chenkainan
5 months ago
12 changed files with 1855 additions and 10 deletions
@ -1,8 +1,657 @@ |
|||||
<template> |
<template> |
||||
|
<view class="bg"> |
||||
|
<view class="title">我的</view> |
||||
|
|
||||
|
<view class="topBox"> |
||||
|
<view class="avatar-box flex-center"> |
||||
|
<image :src="showImg(userInfo.avatar)" mode="aspectFill" class="headImg" v-if="userInfo.avatar"></image> |
||||
|
<image src="https://changshu.js-dyyj.com/uploads/20250326/516242619f0772bee371a60684618c01.png" mode="aspectFill" |
||||
|
class="headImg" v-else></image> |
||||
|
</view> |
||||
|
<view class="username" v-if="userInfo.nickname">{{userInfo.nickname}}</view> |
||||
|
<view class="username" v-else>请登录/注册 ></view> |
||||
|
<view class="personalCenter flex-center" v-if="userInfo.nickname" @click="gotoProfile"> |
||||
|
个人中心 |
||||
|
</view> |
||||
|
</view> |
||||
|
|
||||
|
<view class="orderBox"> |
||||
|
<navigator :url="'/subPackages/order/trades'" class="moreBox flex-between"> |
||||
|
我的订单 |
||||
|
<span class="flex-between">查看更多 <img |
||||
|
src="https://static.ticket.sz-trip.com/cgc/images/user/rightIcon.png" alt=""></span> |
||||
|
</navigator> |
||||
|
|
||||
|
<view class="flex-around" style="margin-top: 20rpx;"> |
||||
|
<view class="orderItem" v-for="(item,index) in orderList" :key="index" @click="goTrades(item)"> |
||||
|
<img :src="item.src" alt=""> |
||||
|
<view>{{item.title}}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- 待付款轮播 --> |
||||
|
<!-- <swiper class="my-swipe" :autoplay="3000" indicator-color="white" v-if="dfkList && dfkList.length>0" circular> |
||||
|
<swiper-item v-for="(item,index) in dfkList" :key="item.id"> |
||||
|
<div class="dfkBox" @click="goToOrderDetail(item)"> |
||||
|
<image :src="showImg(item.order_child[0].specifications_image)" mode="aspectFill"></image> |
||||
|
<div class="contentBox"> |
||||
|
<div style="width:300rpx;"> |
||||
|
<div style="font-size: 27rpx;margin-bottom: 10rpx;">等待付款 </div> |
||||
|
<div style="display: flex;color: #8A8A8A;font-size: 27rpx;">剩余时间：<uni-countdown class="countdown" @timeup="timeup(index)" :show-day="false" :hour="differTimeList[index].slice(0,2)" :minute="differTimeList[index].slice(3,5)" :second="differTimeList[index].slice(6,8)"/></div> |
||||
|
</div> |
||||
|
<div class="orderBtn" @click.stop="setOrderId(item.order_id)">去支付</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</swiper-item> |
||||
|
</swiper> --> |
||||
|
</view> |
||||
|
|
||||
|
<view class="cygj"> |
||||
|
<view class="cyItem" style="font-weight: bold;font-size: 31rpx;color: #333333;"> |
||||
|
常用工具 |
||||
|
</view> |
||||
|
<view class="cyItem flex-between" v-for="(item,index) in cyList" :key="index" |
||||
|
@click="gotoUrl(item,index)" v-if="item.isShow"> |
||||
|
<view class="flex-center"> |
||||
|
<img :src="item.src" class="headIcon"> |
||||
|
{{item.title}} |
||||
|
</view> |
||||
|
<img src="https://static.ticket.sz-trip.com/yandu/images/user/rightIcon-gray.png" class="rightIcon"> |
||||
|
</view> |
||||
|
<!-- <button id="contact" class="cyItem flex-between" open-type="contact" bindcontact="handleContact" session-from="sessionFrom"> |
||||
|
<view class="flex-center"> |
||||
|
<img src="https://static.ticket.sz-trip.com/dongtai/images/user/zxkf.png" class="headIcon"> |
||||
|
在线客服 |
||||
|
</view> |
||||
|
<img src="https://static.ticket.sz-trip.com/dongtai/images/user/rightIcon-gray.png" class="rightIcon"> |
||||
|
</button> --> |
||||
|
</view> |
||||
|
|
||||
|
<!-- 旅游咨询弹框 --> |
||||
|
<uni-popup ref="popup" type="center"> |
||||
|
<view class="consult-popup"> |
||||
|
客服电话： |
||||
|
<view class="consult-subtitle">服务时间：周一至周五<br>9:00-12:00，13:00-18:00</view> |
||||
|
<view class="consult-btns"> |
||||
|
<view @click="$refs.popup.close()">取消</view> |
||||
|
<view @click="clickPhone('0515-69186109')">确定</view> |
||||
|
<!-- <view> |
||||
|
<button class="confirm" open-type="contact">确定</button> |
||||
|
</view> --> |
||||
|
</view> |
||||
|
</view> |
||||
|
</uni-popup> |
||||
|
</view> |
||||
</template> |
</template> |
||||
|
|
||||
<script> |
<script> |
||||
|
// import moment from "moment"; |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
dfkList: [], |
||||
|
differTimeList: [], |
||||
|
nowDateTime: '', //当前时间秒数 |
||||
|
userInfo: {}, |
||||
|
orderList: [{ |
||||
|
src: 'https://static.ticket.sz-trip.com/cgc/images/user/dfk.png', |
||||
|
title: '待付款', |
||||
|
status: 'WAIT_PAYMENT' |
||||
|
}, |
||||
|
{ |
||||
|
src: 'https://static.ticket.sz-trip.com/cgc/images/user/dfh.png', |
||||
|
title: '待使用/发货', |
||||
|
status: 'PAYMENT_SUCCESSFULLY' |
||||
|
}, |
||||
|
{ |
||||
|
src: 'https://static.ticket.sz-trip.com/cgc/images/user/dsh.png', |
||||
|
title: '待收货', |
||||
|
status: 'POST' |
||||
|
}, |
||||
|
// { |
||||
|
// src: 'https://changshu.js-dyyj.com/uploads/20250326/3f13d3a10dd0f88e764e3ddf1157c108.png', |
||||
|
// title: '待评价', |
||||
|
// status: 'WAIT_COMMENT' |
||||
|
// }, |
||||
|
{ |
||||
|
src: 'https://static.ticket.sz-trip.com/cgc/images/user/tk.png', |
||||
|
title: '退款/售后', |
||||
|
status: 'WAIT_REFUND,REFUND_SUCCESS,REFUND_REFUSAL,REFUND_ERROR,REFUND_PART' |
||||
|
}, |
||||
|
], |
||||
|
cyList: [ |
||||
|
{ |
||||
|
src: 'https://static.ticket.sz-trip.com/cgc/images/user/gwc.png', |
||||
|
title: '购物车', |
||||
|
path: '', |
||||
|
isShow: true |
||||
|
}, |
||||
|
{ |
||||
|
src: 'https://static.ticket.sz-trip.com/cgc/images/user/kfdh.png', |
||||
|
title: '客服电话', |
||||
|
path: '', |
||||
|
isShow: true |
||||
|
}, |
||||
|
{ |
||||
|
src: 'https://static.ticket.sz-trip.com/cgc/images/user/shdz.png', |
||||
|
title: '收货地址', |
||||
|
path: '', |
||||
|
isShow: true |
||||
|
}, |
||||
|
{ |
||||
|
src: 'https://static.ticket.sz-trip.com/cgc/images/user/ysgl.png', |
||||
|
title: '隐私管理', |
||||
|
path: '/subPackages/user/privacy', |
||||
|
isShow: true |
||||
|
}, |
||||
|
// { |
||||
|
// src: 'https://changshu.js-dyyj.com/uploads/20250326/3e977f62b6cbfeec5a17d945b96b8c8c.png', |
||||
|
// title: '投诉建议', |
||||
|
// path: '/subPackages/service/service', |
||||
|
// isShow: true |
||||
|
// }, |
||||
|
], |
||||
|
} |
||||
|
}, |
||||
|
onShow() { |
||||
|
this.userInfo = (uni.getStorageSync('userInfo') && JSON.parse(uni.getStorageSync('userInfo'))) || this.$store.state.user.userInfo || {} |
||||
|
console.log(this.userInfo) |
||||
|
// this.dfkList = [] |
||||
|
// this.nowDateTime = parseInt(new Date().getTime() / 1000) |
||||
|
// this.Post({}, "/api/user/userInfo").then((res) => { |
||||
|
// if (res.data) { |
||||
|
// this.userInfo = res.data; |
||||
|
// // this.getDfk() |
||||
|
|
||||
|
// // 是否展示商户核销 |
||||
|
// this.Post({},'/api/merchants/is_merchant').then(res => { |
||||
|
// this.cyList[6].isShow = res.data |
||||
|
// }) |
||||
|
// } |
||||
|
// }); |
||||
|
}, |
||||
|
methods: { |
||||
|
// 个人信息或登录 |
||||
|
gotoProfile() { |
||||
|
// 有token去个人信息，没有去登录 |
||||
|
if(this.userInfo.token) { |
||||
|
uni.navigateTo({ |
||||
|
url: '/subPackages/user/profile' |
||||
|
}) |
||||
|
}else { |
||||
|
uni.navigateTo({ |
||||
|
url: '/pages/login/login' |
||||
|
}) |
||||
|
} |
||||
|
}, |
||||
|
timeup(index) { |
||||
|
// return this.dfkList.splice(index,1) |
||||
|
}, |
||||
|
setOrderId(id) { |
||||
|
let that = this; |
||||
|
that.orderId = id; |
||||
|
that.Post({ |
||||
|
order_id: id, |
||||
|
type: "miniprogram", |
||||
|
platform: 'miniprogram' |
||||
|
}, |
||||
|
'/api/pay/unify' |
||||
|
).then(res => { |
||||
|
if (res.data) { |
||||
|
uni.requestPayment({ |
||||
|
nonceStr: res.data.nonceStr, |
||||
|
package: res.data.package, |
||||
|
paySign: res.data.paySign, |
||||
|
signType: res.data.signType, |
||||
|
timeStamp: res.data.timeStamp |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 待付款 |
||||
|
getDfk() { |
||||
|
this.differTimeList = [] |
||||
|
let params = { |
||||
|
offset: this.dfkList.length, |
||||
|
limit: 10, |
||||
|
status: 'WAIT_PAYMENT', |
||||
|
} |
||||
|
this.Post(params, '/api/order/orderList').then(res => { |
||||
|
this.isLoading = false |
||||
|
if (res) { |
||||
|
this.dfkList = [...this.dfkList, ...res.data] |
||||
|
this.dfkList.forEach(item => { |
||||
|
// 获取时间差,订单关闭时间-当前时间，若存在即展示倒计时differTimeList |
||||
|
let del; |
||||
|
if (moment(item.close_time).diff(moment()) > 0) { |
||||
|
del = moment.utc(moment(item.close_time).diff(moment())).format('HH:mm:ss') |
||||
|
} else { |
||||
|
del = '00:00:00' |
||||
|
} |
||||
|
this.differTimeList.push(del) |
||||
|
}) |
||||
|
console.log(this.differTimeList); |
||||
|
console.log('this.differTimeList：' + this.differTimeList[0].slice(0, 2)) |
||||
|
} |
||||
|
}) |
||||
|
}, |
||||
|
goToOrderDetail(item) { |
||||
|
uni.navigateTo({ |
||||
|
url: '/subPackages/order/detail?id=' + item.order_id |
||||
|
}); |
||||
|
}, |
||||
|
getChild(list) { |
||||
|
let arr = [] |
||||
|
for (let i = 0; i < list.length; i++) { |
||||
|
if (list[i].product_model == "ticket") { |
||||
|
console.log(list[i]); |
||||
|
arr.push(list[i]) |
||||
|
break |
||||
|
} |
||||
|
} |
||||
|
console.log(arr); |
||||
|
if (arr.length > 0) { |
||||
|
return arr[0] |
||||
|
} else { |
||||
|
return list[0] |
||||
|
} |
||||
|
|
||||
|
}, |
||||
|
goCoupon() { |
||||
|
uni.navigateTo({ |
||||
|
url: "/subPackages/user/coupon", |
||||
|
}); |
||||
|
}, |
||||
|
goKeFu() { |
||||
|
uni.navigateTo({ |
||||
|
url: "/subPackages/publicservices/ServiceOnline", |
||||
|
}); |
||||
|
}, |
||||
|
// open(){ |
||||
|
// this.$refs.popup.open('center') |
||||
|
// }, |
||||
|
gotoUrl(item, index) { |
||||
|
if (item.title == "客服电话") { |
||||
|
this.$refs.popup.open() |
||||
|
return; |
||||
|
} |
||||
|
uni.navigateTo({ |
||||
|
url: item.path |
||||
|
}) |
||||
|
}, |
||||
|
qidai() { |
||||
|
uni.showToast({ |
||||
|
title: '功能建设中...', |
||||
|
icon: 'none' |
||||
|
}) |
||||
|
}, |
||||
|
goTrades(item) { |
||||
|
if (item) { |
||||
|
uni.navigateTo({ |
||||
|
url: "/subPackages/order/trades?type=" + item.title, |
||||
|
}); |
||||
|
} else { |
||||
|
uni.navigateTo({ |
||||
|
url: "/subPackages/order/trades", |
||||
|
}); |
||||
|
} |
||||
|
}, |
||||
|
//判断是否关注公众号 |
||||
|
isGz(item) { |
||||
|
this.$refs.pop.openPop( |
||||
|
'https://yjks.oss-cn-shanghai.aliyuncs.com/uploads/20230517/db9eb60e0abfea8be1075b406fefe551.jpg'); |
||||
|
// this.Post({}, '/api/wechat/getSubcribeInfo').then(res => { |
||||
|
// if (res.data) { |
||||
|
// uni.navigateTo({ |
||||
|
// url:'/subPackages/webPage/webPage?url='+'https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzU2NjQwNTYxNg==#wechat_redirect' |
||||
|
// }) |
||||
|
// } else { |
||||
|
// console.log(this.$refs.pop); |
||||
|
// } |
||||
|
// }); |
||||
|
}, |
||||
|
} |
||||
|
} |
||||
</script> |
</script> |
||||
|
|
||||
<style> |
<style scoped lang="scss"> |
||||
|
view{ |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
::v-deep .uni-countdown { |
||||
|
font-size: 20px !important; |
||||
|
|
||||
|
::v-deep .uni-countdown__splitor { |
||||
|
font-size: 20px !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.bg { |
||||
|
min-height: 100vh; |
||||
|
overflow-x: hidden; |
||||
|
background: url('https://static.ticket.sz-trip.com/cgc/images/user/bg.png') no-repeat; |
||||
|
background-size: 100% auto; |
||||
|
background-color: #F7F7F7; |
||||
|
padding-bottom: 100rpx; |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
font-weight: bold; |
||||
|
font-size: 36rpx; |
||||
|
color: #333333; |
||||
|
position: absolute; |
||||
|
top: 110rpx; |
||||
|
left: 50%; |
||||
|
transform: translate(-50%, 0); |
||||
|
} |
||||
|
|
||||
|
.topBox { |
||||
|
width: 750rpx; |
||||
|
height: 373rpx; |
||||
|
padding: 100rpx 0 0 26rpx; |
||||
|
box-sizing: border-box; |
||||
|
display: flex; |
||||
|
margin-top: 90rpx; |
||||
|
|
||||
|
.avatar-box { |
||||
|
width: 120rpx; |
||||
|
height: 120rpx; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 50%; |
||||
|
overflow: hidden; |
||||
|
} |
||||
|
|
||||
|
.headImg { |
||||
|
width: 120rpx; |
||||
|
height: 120rpx; |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
|
||||
|
.username { |
||||
|
margin: 40rpx 0 0 28rpx; |
||||
|
font-weight: 500; |
||||
|
font-size: 40rpx; |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
.personalCenter { |
||||
|
width: 165rpx; |
||||
|
height: 59rpx; |
||||
|
background: rgba(24, 135, 145, 1); |
||||
|
border-radius: 29rpx 0rpx 0rpx 29rpx; |
||||
|
margin: 40rpx 0 0 auto; |
||||
|
font-weight: bold; |
||||
|
font-size: 28rpx; |
||||
|
color: #FFFFFF; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.orderBox { |
||||
|
width: 697rpx; |
||||
|
background: #FFFFFF; |
||||
|
box-shadow: 0rpx 0rpx 23rpx 0rpx rgba(80, 80, 80, 0.12); |
||||
|
border-radius: 20rpx; |
||||
|
margin: -48rpx auto 0; |
||||
|
padding-bottom: 30.6rpx; |
||||
|
|
||||
|
.moreBox { |
||||
|
height: 84rpx; |
||||
|
margin: auto; |
||||
|
font-size: 31rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: bold; |
||||
|
color: #000000; |
||||
|
padding-left: 26rpx; |
||||
|
|
||||
|
span { |
||||
|
padding-right: 18rpx; |
||||
|
font-size: 27rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
box-sizing: border-box; |
||||
|
|
||||
|
img { |
||||
|
width: 12rpx; |
||||
|
height: 21rpx; |
||||
|
margin-left: 12rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.orderItem { |
||||
|
font-size: 27rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #000000; |
||||
|
width: 25%; |
||||
|
text-align: center; |
||||
|
|
||||
|
img { |
||||
|
width: 80rpx; |
||||
|
height: 80rpx; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.lxwm { |
||||
|
width: 696rpx; |
||||
|
height: 447rpx; |
||||
|
background: #FFFFFF; |
||||
|
box-shadow: 0px 4rpx 12rpx 0px rgba(150, 149, 149, 0.3); |
||||
|
border-radius: 20rpx; |
||||
|
margin: auto; |
||||
|
padding: 27rpx 19rpx 0 19rpx; |
||||
|
font-size: 31rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: bold; |
||||
|
color: #000000; |
||||
|
|
||||
|
.midBox { |
||||
|
padding: 26rpx 43rpx 21rpx 44rpx; |
||||
|
box-sizing: border-box; |
||||
|
|
||||
|
img { |
||||
|
width: 265rpx; |
||||
|
height: 252rpx; |
||||
|
border-radius: 15rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.botBox { |
||||
|
padding: 0 30rpx 0 51rpx; |
||||
|
font-size: 27rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: bold; |
||||
|
color: #000000; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.cygj { |
||||
|
width: 697rpx; |
||||
|
background: #FFFFFF; |
||||
|
border-radius: 20rpx; |
||||
|
margin: 30rpx auto 0; |
||||
|
padding: 0 27rpx; |
||||
|
font-size: 28rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #000000; |
||||
|
box-sizing: border-box; |
||||
|
|
||||
|
.cyItem { |
||||
|
height: 106rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
border-bottom: 1rpx solid #D8D8D8; |
||||
|
|
||||
|
.headIcon { |
||||
|
width: 42rpx; |
||||
|
height: 42rpx; |
||||
|
margin-right: 15rpx; |
||||
|
} |
||||
|
|
||||
|
.rightIcon { |
||||
|
width: 20rpx; |
||||
|
height: 20rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.cyItem:last-child { |
||||
|
border: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.my-swipe { |
||||
|
// width: 100%; |
||||
|
margin: 0 30rpx; |
||||
|
margin-top: 37.3rpx; |
||||
|
} |
||||
|
|
||||
|
swiper { |
||||
|
height: 111rpx !important; |
||||
|
} |
||||
|
|
||||
|
.dfkBox { |
||||
|
width: 100%; |
||||
|
height: 111rpx; |
||||
|
background: #F7F7F7; |
||||
|
margin: 0 auto 30.64rpx; |
||||
|
// padding: 0.25rem; |
||||
|
display: flex; |
||||
|
} |
||||
|
|
||||
|
.dfkBox image { |
||||
|
width: 137rpx; |
||||
|
height: 111rpx; |
||||
|
border-radius: 13rpx; |
||||
|
flex-shrink: 0; |
||||
|
// margin-right: 16.7rpx; |
||||
|
} |
||||
|
|
||||
|
.dfkBox .contentBox { |
||||
|
padding-left: 5rpx; |
||||
|
padding-right: 5rpx; |
||||
|
height: 111rpx; |
||||
|
width: 100%; |
||||
|
display: flex; |
||||
|
justify-content: space-around; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
// .van-count-down{ |
||||
|
// font-size: 0.39rem; |
||||
|
// font-family: PingFang SC; |
||||
|
// font-weight: 400; |
||||
|
// color: #FB6E4D; |
||||
|
// } |
||||
|
|
||||
|
.orderBtn { |
||||
|
width: 152rpx; |
||||
|
height: 56rpx; |
||||
|
background: linear-gradient(270deg, #FC5109, #FDC43A); |
||||
|
; |
||||
|
border-radius: 28rpx; |
||||
|
text-align: center; |
||||
|
line-height: 56rpx; |
||||
|
font-size: 27rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 400; |
||||
|
color: #FFFFFF; |
||||
|
// margin-left: 50rpx; |
||||
|
// margin-right: 20rpx; |
||||
|
} |
||||
|
|
||||
|
#contact { |
||||
|
-webkit-tap-highlight-color: transparent; |
||||
|
background-color: rgba(0, 0, 0, 0); |
||||
|
border-radius: 0; |
||||
|
box-sizing: border-box; |
||||
|
color: transparent; |
||||
|
cursor: pointer; |
||||
|
overflow: hidden; |
||||
|
padding: 0 27rpx; |
||||
|
position: relative; |
||||
|
text-align: center; |
||||
|
text-decoration: none; |
||||
|
border: transparent 0px solid; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
font-size: 28rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #000000; |
||||
|
} |
||||
|
|
||||
|
button::after { |
||||
|
border: none; |
||||
|
background-color: rgba(0, 0, 0, 0); |
||||
|
} |
||||
|
|
||||
|
.more { |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
background-color: rgba(0, 0, 0, .5); |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-around; |
||||
|
align-items: center; |
||||
|
|
||||
|
image { |
||||
|
width: 646rpx; |
||||
|
height: 959rpx; |
||||
|
} |
||||
|
|
||||
|
img { |
||||
|
width: 80rpx; |
||||
|
height: 80rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.consult-popup { |
||||
|
width: 487rpx; |
||||
|
height: 367rpx; |
||||
|
background: #F0F0F0; |
||||
|
border-radius: 20rpx; |
||||
|
padding: 65rpx 0 23rpx; |
||||
|
font-weight: bold; |
||||
|
font-size: 32rpx; |
||||
|
color: #000000; |
||||
|
text-align: center; |
||||
|
|
||||
|
.consult-subtitle { |
||||
|
font-weight: 500; |
||||
|
font-size: 27rpx; |
||||
|
color: #333333; |
||||
|
margin-top: 43rpx; |
||||
|
} |
||||
|
|
||||
|
.consult-btns { |
||||
|
display: flex; |
||||
|
margin-top: 75rpx; |
||||
|
|
||||
|
view { |
||||
|
width: 50%; |
||||
|
font-weight: bold; |
||||
|
font-size: 32rpx; |
||||
|
color: #00AEA0; |
||||
|
line-height: 54rpx; |
||||
|
} |
||||
|
view:first-child { |
||||
|
border-right: 1rpx solid #D8D8D8; |
||||
|
color: #000000; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.confirm{ |
||||
|
height: 58rpx; |
||||
|
line-height: 58rpx; |
||||
|
background: none; |
||||
|
font-weight: bold; |
||||
|
font-size: 32rpx; |
||||
|
color: #00AEA0; |
||||
|
} |
||||
</style> |
</style> |
||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 6.7 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 6.0 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 5.3 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 10 KiB |
@ -0,0 +1,680 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<view class="top-bg"> |
||||
|
<view class="search-box"> |
||||
|
<view class="left"> |
||||
|
<image src="https://static.ticket.sz-trip.com/yandu/images/eventCalendar/search.png" |
||||
|
mode="aspectFill"></image> |
||||
|
<input v-model="keywords" type="text" placeholder="请输入关键字" @confirm="search()" /> |
||||
|
</view> |
||||
|
|
||||
|
<!-- <view class="btn" @click="search()">搜索</view> --> |
||||
|
</view> |
||||
|
<view class="common-box"> |
||||
|
<view class="common-types com-flex-tao"> |
||||
|
<view @click="setType(index)" v-for="(item, index) in typeList" :key="item.id" |
||||
|
:class="['common-type', typeIndex == index ? 'active' : '']"> |
||||
|
{{ item.name }} |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="list-common-empty" v-if="list.length == 0"> |
||||
|
<img :src="showImg('/uploads/20221201/8f97261b8eddffcc55342eca0ed0249c.png')" /> |
||||
|
<p class="list-common-empty-tip">暂无订单~</p> |
||||
|
</view> |
||||
|
<view class="trade-list" v-if="list.length > 0"> |
||||
|
<view v-for="(item, key) in list" :key="item.id" class="trade-items" v-if="showItem(item)" |
||||
|
@click="() => choseType(item)"> |
||||
|
<view class="trade-item-head"> |
||||
|
<view class="trade-item-head-tid">订单号:{{ item.order_id }}</view> |
||||
|
<view class="trade-item-head-state">{{ item.status_text }}</view> |
||||
|
</view> |
||||
|
<view class="trade-item-pros"> |
||||
|
<view class="trade-item-pro" v-for="(pro, proIndex) in item.order_child" :key="pro.child_id"> |
||||
|
<view class="trade-item-pro-img" v-if="pro.specifications_image"> |
||||
|
<image :src="showImg(pro.specifications_image)" mode="aspectFill"></image> |
||||
|
</view> |
||||
|
<view style="flex: 1;"> |
||||
|
<view class="trade-item-pro-title">{{ pro.goods_title }}</view> |
||||
|
<view class="trade-item-pro-subtitle">{{ pro.specifications_name }}</view> |
||||
|
</view> |
||||
|
<view class="trade-item-pro-price"> |
||||
|
<view class="trade-item-pro-price-pri">￥{{ pro.pay_money / 100 }}</view> |
||||
|
<view class="trade-item-pro-num">x{{ pro.num }}</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<view class="trade-item-info"> |
||||
|
合计 |
||||
|
<text>￥{{ item.pay_money / 100 }}</text> |
||||
|
</view> |
||||
|
<view class="trade-item-btns"> |
||||
|
<view @click.stop="() => refund(item.order_id, key)" v-if="item.status == 'PAYMENT_SUCCESSFULLY'"> |
||||
|
申请退款</view> |
||||
|
<view @click.stop="() => closeOrder(item.order_id, item)" v-if="item.status == 'WAIT_PAYMENT'">关闭订单 |
||||
|
</view> |
||||
|
<view @click.stop="confirmpost(item.order_id, key)" v-if="item.postFlag">确认收货</view> |
||||
|
<view class="pay-btn" @click.stop="setOrderId(item.order_id)" v-if="item.status == 'WAIT_PAYMENT'"> |
||||
|
立即支付</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
<!-- <view v-if="list.length === 0 && finished" class="noDate"> |
||||
|
<view>暂无订单</view> |
||||
|
</view> --> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
name: 'Trades', |
||||
|
data() { |
||||
|
return { |
||||
|
finished: false, |
||||
|
list: [], |
||||
|
typeList: [{ |
||||
|
id: 'ALL', |
||||
|
name: '全部' |
||||
|
}, |
||||
|
{ |
||||
|
id: 'WAIT_PAYMENT', |
||||
|
name: '待付款' |
||||
|
}, |
||||
|
{ |
||||
|
id: 'PAYMENT_SUCCESSFULLY', |
||||
|
name: '待使用' |
||||
|
}, |
||||
|
{ |
||||
|
id: 'PAYMENT_SUCCESSFULLY', |
||||
|
name: '待发货' |
||||
|
}, |
||||
|
{ |
||||
|
id: 'POST', |
||||
|
name: '待收货' |
||||
|
}, |
||||
|
// { |
||||
|
// id: 'WAIT_COMMENT', |
||||
|
// name: '待评价' |
||||
|
// }, |
||||
|
{ |
||||
|
id: 'WAIT_REFUND,REFUND_SUCCESS,REFUND_REFUSAL,REFUND_ERROR,REFUND_PART', |
||||
|
name: '退款/售后' |
||||
|
} |
||||
|
], |
||||
|
typeIndex: 0, |
||||
|
ajaxFlag: true, |
||||
|
keywords: '', |
||||
|
orderId: null, |
||||
|
dateRange: [], |
||||
|
type: '' |
||||
|
}; |
||||
|
}, |
||||
|
onLoad(options) { |
||||
|
console.log(options); |
||||
|
if (options.type) this.typeIndex = this.typeList.findIndex(vm => vm.name === options.type); |
||||
|
uni.$on("updateDataByConnect", this.getDataByConnect) |
||||
|
}, |
||||
|
onShow() { |
||||
|
this.getList(); |
||||
|
}, |
||||
|
onUnload() { |
||||
|
uni.$off("updateDataByConnect", this.getDataByConnect) |
||||
|
}, |
||||
|
onReachBottom() { |
||||
|
if (this.finished) return false; |
||||
|
this.getList(); |
||||
|
}, |
||||
|
methods: { |
||||
|
getDataByConnect(data) { |
||||
|
if (data.msgType == "updateOrderTrades") { |
||||
|
this.list = []; |
||||
|
this.finished = false; |
||||
|
this.getList() |
||||
|
} |
||||
|
}, |
||||
|
emptyFunc() { |
||||
|
|
||||
|
}, |
||||
|
showItem(item) { |
||||
|
let flag = true; |
||||
|
// if (this.typeIndex == 2 && item.order_child[0] && !item.order_child[0].consignee) flag = false |
||||
|
return flag; |
||||
|
}, |
||||
|
onReload() { |
||||
|
this.list = []; |
||||
|
this.finished = false; |
||||
|
this.getList(); |
||||
|
}, |
||||
|
setType(index) { |
||||
|
this.typeIndex = index; |
||||
|
this.onReload(); |
||||
|
}, |
||||
|
setOrderId(id) { |
||||
|
let that = this; |
||||
|
that.orderId = id; |
||||
|
that.Post({ |
||||
|
order_id: id, |
||||
|
type: "miniprogram", |
||||
|
platform: 'miniprogram' |
||||
|
}, |
||||
|
'/api/pay/unify' |
||||
|
).then(res => { |
||||
|
if (res.data) { |
||||
|
uni.requestPayment({ |
||||
|
nonceStr: res.data.nonceStr, |
||||
|
package: res.data.package, |
||||
|
paySign: res.data.paySign, |
||||
|
signType: res.data.signType, |
||||
|
timeStamp: res.data.timeStamp, |
||||
|
success: () => { |
||||
|
const templateIds = [ |
||||
|
// 退款成功通知 |
||||
|
'hRZoiEES2BWtKb6Xgsnn8khLQH9un5j_11qu0bwlhfE', |
||||
|
// 出票结果通知 |
||||
|
'YyTCUIYBnrj9CyKks8cOjNX_Rk8a4yVdswMP-zXVbhc' |
||||
|
] |
||||
|
uni.requestSubscribeMessage({ |
||||
|
tmplIds: templateIds, |
||||
|
complete (res) { |
||||
|
that.list = []; |
||||
|
that.finished = false; |
||||
|
that.getList() |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 确认收货 |
||||
|
confirmpost(id, index) { |
||||
|
let that = this; |
||||
|
uni.showModal({ |
||||
|
title: '提示', |
||||
|
content: '是否确认收货？', |
||||
|
success: successRes => { |
||||
|
if (successRes.confirm) { |
||||
|
that.Post({ |
||||
|
order_id: id |
||||
|
}, |
||||
|
'/api/order/confirmPost' |
||||
|
).then(res => { |
||||
|
if (res.code == 1) { |
||||
|
list[index].order_child.map(item => { |
||||
|
item.status = 'WAIT_COMMENT'; |
||||
|
}); |
||||
|
list[index].status = 'WAIT_COMMENT'; |
||||
|
list[index].postFlag = false; |
||||
|
that.list = list; |
||||
|
uni.showToast({ |
||||
|
title: '操作成功' |
||||
|
}); |
||||
|
that.$forceUpdate(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 关闭订单 |
||||
|
closeOrder(id, index) { |
||||
|
console.log(id); |
||||
|
console.log(index); |
||||
|
let that = this; |
||||
|
uni.showModal({ |
||||
|
title: '提示', |
||||
|
content: '是否关闭订单？', |
||||
|
success: successRes => { |
||||
|
if (successRes.confirm) { |
||||
|
that.Post({ |
||||
|
order_id: id |
||||
|
}, |
||||
|
'/api/order/closeOrder' |
||||
|
).then(res => { |
||||
|
if (res.code == 1) { |
||||
|
uni.showToast({ |
||||
|
title: '关闭成功', |
||||
|
icon: 'success' |
||||
|
}); |
||||
|
that.list = []; |
||||
|
that.finished = false; |
||||
|
that.getList(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
//删除订单 |
||||
|
deletOrder(id) { |
||||
|
let that = this; |
||||
|
uni.showModal({ |
||||
|
title: '提示', |
||||
|
content: '是否删除订单？', |
||||
|
success: successRes => { |
||||
|
if (successRes.confirm) { |
||||
|
that.Post({ |
||||
|
order_id: id |
||||
|
}, |
||||
|
'/api/order/delOrder' |
||||
|
).then(res => { |
||||
|
if (res.code == 1) { |
||||
|
uni.showToast({ |
||||
|
title: '删除成功', |
||||
|
icon: 'success' |
||||
|
}); |
||||
|
that.list = []; |
||||
|
that.finished = false; |
||||
|
that.getList(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
// 申请退款 |
||||
|
refund(id, index) { |
||||
|
console.log(id); |
||||
|
let that = this; |
||||
|
uni.showModal({ |
||||
|
title: '提示', |
||||
|
content: '是否申请退款？', |
||||
|
success: successRes => { |
||||
|
if (successRes.confirm) { |
||||
|
that.Post({ |
||||
|
order_id: id |
||||
|
}, |
||||
|
'/api/order/applyRefund' |
||||
|
).then(res => { |
||||
|
if (res.code == 1) { |
||||
|
uni.showToast({ |
||||
|
title: '申请成功', |
||||
|
icon: 'success' |
||||
|
}); |
||||
|
that.onReload(); |
||||
|
} |
||||
|
}); |
||||
|
} |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
search(e) { |
||||
|
this.list = []; |
||||
|
this.getList(); |
||||
|
// if (e.keyCode == 13) { |
||||
|
// // 提交 |
||||
|
// this.keywords = e.target.value; |
||||
|
// } |
||||
|
}, |
||||
|
getList() { |
||||
|
let data = { |
||||
|
status: this.typeList[this.typeIndex].id == 'ALL' ? '' : this.typeList[this.typeIndex].true_id || |
||||
|
this.typeList[this.typeIndex].id, |
||||
|
offset: this.list.length, |
||||
|
limit: 5, |
||||
|
name: this.keywords, |
||||
|
type: this.typeList[this.typeIndex].name == '待使用' ? 1 : (this.typeList[this.typeIndex].name == |
||||
|
'待发货' ? 2 : '') |
||||
|
}; |
||||
|
this.Post(data, '/api/order/orderList').then(res => { |
||||
|
this.list = [...this.list, ...res.data] |
||||
|
if (res.data.length < 5) { |
||||
|
this.finished = true; |
||||
|
} |
||||
|
}); |
||||
|
}, |
||||
|
UpdateOrder(id) { |
||||
|
this.ajaxFlag = false; |
||||
|
let list = this.list; |
||||
|
this.Post({ |
||||
|
order_id: id |
||||
|
}, |
||||
|
'/api/order/orderDetail' |
||||
|
).then(res => { |
||||
|
this.ajaxFlag = true; |
||||
|
list.map(item => { |
||||
|
if (item.order_id == id) { |
||||
|
item = res.data; |
||||
|
} |
||||
|
}); |
||||
|
this.list = list; |
||||
|
}); |
||||
|
}, |
||||
|
choseType(item) { |
||||
|
uni.navigateTo({ |
||||
|
url: '/subPackages/order/detail?id=' + item.order_id |
||||
|
}); |
||||
|
}, |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
view { |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
|
||||
|
.common-box { |
||||
|
height: 90rpx; |
||||
|
} |
||||
|
|
||||
|
.common-types { |
||||
|
background: white; |
||||
|
height: 90rpx; |
||||
|
font-size: 31rpx; |
||||
|
z-index: 10; |
||||
|
margin: auto; |
||||
|
color: #666; |
||||
|
overflow-x: scroll; |
||||
|
overflow-y: hidden; |
||||
|
padding: 0 27rpx; |
||||
|
} |
||||
|
|
||||
|
.common-types::-webkit-scrollbar { |
||||
|
width: 0rpx; |
||||
|
height: 0; |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.common-type { |
||||
|
flex-shrink: 0; |
||||
|
margin: 0 26rpx; |
||||
|
line-height: 90rpx; |
||||
|
height: 90rpx; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
.common-type.active { |
||||
|
font-size: 31rpx; |
||||
|
font-weight: bold; |
||||
|
color: #000; |
||||
|
} |
||||
|
|
||||
|
.common-type.active:after { |
||||
|
display: block; |
||||
|
width: 60%; |
||||
|
font-size: 0; |
||||
|
content: '1'; |
||||
|
margin: auto; |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
right: 0; |
||||
|
bottom: 1rpx; |
||||
|
height: 4rpx; |
||||
|
background: #C3282E; |
||||
|
border-radius: 2rpx; |
||||
|
} |
||||
|
|
||||
|
.bg { |
||||
|
min-height: 100vh; |
||||
|
background-color: #f7f7f7; |
||||
|
} |
||||
|
|
||||
|
.noDate { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
margin-top: 200rpx; |
||||
|
} |
||||
|
|
||||
|
.noDate img { |
||||
|
width: 514rpx; |
||||
|
height: auto; |
||||
|
} |
||||
|
|
||||
|
.noDate view { |
||||
|
font-size: 24rpx; |
||||
|
color: #777777; |
||||
|
} |
||||
|
|
||||
|
.trade-list { |
||||
|
padding: 28rpx 26rpx; |
||||
|
} |
||||
|
|
||||
|
.trade-items { |
||||
|
background-color: white; |
||||
|
margin-bottom: 28rpx; |
||||
|
border-radius: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.trade-item-head { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
padding: 28rpx 20rpx; |
||||
|
border-bottom: 1rpx solid #d8d8d8; |
||||
|
} |
||||
|
|
||||
|
.trade-item-head-tid { |
||||
|
font-size: 24rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
color: #666666; |
||||
|
} |
||||
|
|
||||
|
.trade-item-head-state { |
||||
|
font-size: 27rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: bold; |
||||
|
color: #C3282E; |
||||
|
} |
||||
|
|
||||
|
.trade-item-head-name { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
font-size: 31rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: bold; |
||||
|
color: #333333; |
||||
|
|
||||
|
image { |
||||
|
width: 33rpx; |
||||
|
height: 31rpx; |
||||
|
} |
||||
|
|
||||
|
view { |
||||
|
margin-left: 13rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.trade-item-pros { |
||||
|
display: flex; |
||||
|
/* background-color: #F2F2F2; */ |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.trade-item-pro { |
||||
|
display: flex; |
||||
|
padding: 20rpx; |
||||
|
justify-content: space-between; |
||||
|
} |
||||
|
|
||||
|
.trade-item-pro-img { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.trade-item-pro-img image { |
||||
|
width: 180rpx; |
||||
|
height: 180rpx; |
||||
|
border-radius: 10rpx; |
||||
|
} |
||||
|
|
||||
|
.trade-item-pro-price { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
.trade-item-pro-title { |
||||
|
text-align: left; |
||||
|
flex: 1; |
||||
|
padding: 0 20rpx; |
||||
|
font-size: 28rpx; |
||||
|
} |
||||
|
|
||||
|
.trade-item-pro-subtitle { |
||||
|
text-align: left; |
||||
|
flex: 1; |
||||
|
padding: 0 20rpx; |
||||
|
font-weight: 500; |
||||
|
font-size: 24rpx; |
||||
|
color: #C3282E; |
||||
|
margin-top: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.trade-item-pro-price view { |
||||
|
display: flex; |
||||
|
flex-wrap: nowrap; |
||||
|
text-wrap: none; |
||||
|
white-space: nowrap; |
||||
|
justify-content: flex-end; |
||||
|
} |
||||
|
|
||||
|
.trade-item-pro-price-pri { |
||||
|
font-size: 27rpx; |
||||
|
color: #C3282E; |
||||
|
font-weight: 500; |
||||
|
color: #333333; |
||||
|
} |
||||
|
|
||||
|
.trade-item-pro-num { |
||||
|
font-size: 24rpx; |
||||
|
color: #666666; |
||||
|
margin-top: 24rpx; |
||||
|
} |
||||
|
|
||||
|
.trade-item-info { |
||||
|
font-size: 28rpx; |
||||
|
display: flex; |
||||
|
justify-content: flex-end; |
||||
|
align-items: center; |
||||
|
background-color: white; |
||||
|
padding: 0rpx 20rpx; |
||||
|
margin-top: -6rpx; |
||||
|
/* border-bottom: 1px solid #B6B6B6; */ |
||||
|
} |
||||
|
|
||||
|
.trade-item-info text { |
||||
|
font-size: 36rpx; |
||||
|
font-weight: bold; |
||||
|
color: rgba(238, 0, 0, 1); |
||||
|
} |
||||
|
|
||||
|
.trade-item-btns { |
||||
|
display: flex; |
||||
|
flex-direction: row; |
||||
|
justify-content: flex-end; |
||||
|
align-items: center; |
||||
|
padding: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.trade-item-btns view { |
||||
|
margin-left: 20rpx; |
||||
|
background: rgba(237, 237, 237, 0); |
||||
|
border: 1rpx solid #999999; |
||||
|
border-radius: 27rpx; |
||||
|
padding: 8rpx 16rpx; |
||||
|
font-size: 27rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #333333; |
||||
|
} |
||||
|
|
||||
|
.trade-item-btns .pay-btn { |
||||
|
color: #FFFFFF; |
||||
|
background: #C3282E; |
||||
|
border: none; |
||||
|
padding: 10rpx 16rpx; |
||||
|
} |
||||
|
|
||||
|
.comment-btn { |
||||
|
width: 100rpx; |
||||
|
text-align: center; |
||||
|
line-height: 40rpx; |
||||
|
border-radius: 20rpx; |
||||
|
border: 1px solid #999999; |
||||
|
color: #333333; |
||||
|
justify-content: center !important; |
||||
|
font-size: 24rpx; |
||||
|
margin-top: 16rpx; |
||||
|
} |
||||
|
|
||||
|
.list-common-empty { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
min-height: 50vh; |
||||
|
} |
||||
|
|
||||
|
.list-common-empty img { |
||||
|
width: 483rpx; |
||||
|
height: 254rpx; |
||||
|
} |
||||
|
|
||||
|
.list-common-empty-tip { |
||||
|
margin-top: 61rpx; |
||||
|
|
||||
|
font-size: 29rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #8599b5; |
||||
|
} |
||||
|
|
||||
|
.com-flex-tao { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.search-box { |
||||
|
width: 697rpx; |
||||
|
height: 67rpx; |
||||
|
background: #f2f2f2; |
||||
|
border-radius: 33rpx; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
padding: 0 8rpx 0 28rpx; |
||||
|
margin: 0 auto; |
||||
|
margin-bottom: 20rpx; |
||||
|
|
||||
|
.left { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
image { |
||||
|
width: 28rpx; |
||||
|
height: 30rpx; |
||||
|
} |
||||
|
|
||||
|
input { |
||||
|
margin-left: 20rpx; |
||||
|
font-size: 31rpx; |
||||
|
font-weight: 400; |
||||
|
color: #333; |
||||
|
width: 450rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.btn { |
||||
|
width: 107rpx; |
||||
|
height: 53rpx; |
||||
|
background: #71B580; |
||||
|
border-radius: 27rpx; |
||||
|
font-size: 28rpx; |
||||
|
font-weight: 400; |
||||
|
color: #ffffff; |
||||
|
line-height: 53rpx; |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.top-bg { |
||||
|
background: #fff; |
||||
|
padding-top: 20rpx; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,58 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<view class="list"> |
||||
|
<view class="item" v-for="(item,index) in list" :key="item.id" @click="goInfo(item)"> |
||||
|
{{item.name}} |
||||
|
</view> |
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
<script> |
||||
|
export default{ |
||||
|
data(){ |
||||
|
return { |
||||
|
list:[{name:'用户协议',id:'10001'},{name:'隐私协议',id:'9999'},{name:'个人信息收集清单',id:'10202 '}], |
||||
|
} |
||||
|
}, |
||||
|
onShow() { |
||||
|
// this.Post({ |
||||
|
// id: 9999 |
||||
|
// },'/api/article/getArticleById').then(res => { |
||||
|
// this.content = res.data.content |
||||
|
// }) |
||||
|
}, |
||||
|
|
||||
|
methods:{ |
||||
|
goInfo(item){ |
||||
|
uni.navigateTo({ |
||||
|
url:'/subPackages/user/privacyInfo?id='+item.id |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
view{ |
||||
|
box-sizing: border-box; |
||||
|
} |
||||
|
.list{ |
||||
|
width: 698rpx; |
||||
|
background: #FFFFFF; |
||||
|
box-shadow: 0px 4rpx 12rpx 0px rgba(150,149,149,0.3); |
||||
|
border-radius: 18rpx; |
||||
|
margin: 0 auto; |
||||
|
margin-top: 20rpx; |
||||
|
padding:0 20rpx ; |
||||
|
} |
||||
|
.item{ |
||||
|
width: 100%; |
||||
|
height: 93rpx; |
||||
|
border-bottom: 1rpx solid #EEEFF7; |
||||
|
font-size: 28rpx; |
||||
|
font-family: PingFang SC; |
||||
|
font-weight: 500; |
||||
|
color: #333333; |
||||
|
line-height: 93rpx; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,30 @@ |
|||||
|
<template> |
||||
|
<view class="bg"> |
||||
|
<view class="text" v-html="formateRichText(content)"> |
||||
|
|
||||
|
</view> |
||||
|
</view> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
content:'' |
||||
|
}; |
||||
|
}, |
||||
|
onLoad(option){ |
||||
|
this.Post({ |
||||
|
id:option.id |
||||
|
},'/api/article/getArticleById').then(res => { |
||||
|
this.content = res.data.content |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style lang="scss"> |
||||
|
.text{ |
||||
|
padding: 20rpx; |
||||
|
} |
||||
|
</style> |
||||
Loading…
Reference in new issue