<!-- 订单待付款 待收货 --> <template> <view class="content"> <view class="headerBanner" v-if="status == '2'||'3'" > <view class="bannerLeft"> <view class="T1">订单已完成</view> </view> <image src="../../static/car.png" mode="aspectFill" ></image> </view> <!-- 待付款 --> <view class="order-time" v-if="status == '0'" > <text>请在</text> <uni-countdown color="#EC5D3B" splitor-color="#EC5D3B" :show-day="false" :hour="0" :second="getLeftTime" @timeup="timeup" > </uni-countdown> <text>内完成付款</text> </view> <view class="headerBanner" v-if="status == '1'" > <view class="bannerLeft"> <view class="T1">卖家已发货</view> <!-- <view class="T2">还剩 确认收货</view> --> </view> <image src="../../static/car.png" mode="aspectFill" ></image> </view> <view class="order"> <view class="order-user"> <view class="order-user-head"> <text class="p1">{{orderAddressInfo.name}}</text> <text class="p2">{{orderAddressInfo.mobile}}</text> </view> <view class="order-user-body"> <image src="../../static/myorder-paying-location.png"></image> <text class="p3">{{orderAddressInfo.address}}</text> </view> </view> <view class="order-info"> <view class="order-info-head" v-for="(orderInfoListItem, index) in orderInfoList" :key="index" > <image :src="orderInfoListItem.imgUrl" mode="aspectFill" ></image> <view class="order-info-head-r"> <text class="p1">{{orderInfoListItem.p_name}}</text> <template v-if="orderInfoList.length === 1"> <view class="p2" style="margin: 0;" > {{skuList[0] ? skuList[0].sku_name.replace('_', '/') : ''}} </view> </template> <view class="infoText-bottom"> <view class="markPrice">¥{{Number(orderInfoListItem.nowPrice)/100}}</view> <view class="buy-num">X {{orderInfoListItem.num}}</view> </view> </view> </view> <!-- <view class="order-info-goodsnum"> <text>X1</text> </view> --> <text class="order-info-freight"> <text class="p1">运费</text> <text class="p2">免运费</text> </text> <text class="order-info-discount"> <text class="p1">优惠</text> <text class="p2">-¥{{totalDiscount}}</text> </text> <text class="order-info-price"> <text class="p1">实付</text> <text class="p2">¥{{Number(totalPrice)/100}}</text> </text> <text class="order-info-num"> <text>订单号:{{payId}}</text> </text> <text class="order-info-time"> <text>下单时间:{{orderInfo.pay_time}}</text> </text> <view class="order-info-hr"></view> <view class="order-info-contact"> <image src="../../static/myorder-paying-contact.png"></image> <button open-type="contact">联系客服</button> </view> </view> </view> <view class="order-confim" v-if="status == '0'" > <button class="b1" @click="cancleOrder" >取消订单</button> <button class="b2" @click="paylog" >立即支付</button> </view> <view class="order-confim" v-if="status == '1'" > <!-- <button class="b1">取消订单</button> --> <button class="b2" @click="confirmOrder" >确认收货</button> </view> <view class="order-confim" v-if="status == '2'" > <button class="b2" @click="toDetail" >再次购买</button> </view> </view> </template> <script> import store from '@/store' import MD5Util from '../../utils/md5' import UniCountdown from '../../components/UniCountdown/UniCountdown.vue' export default { components: { UniCountdown, }, data() { return { payId: '', payTime: '', status: '', // status 0 待付款 1 已发货 uid: '', openid: '', lefttime: 0, isPay: 0, totalPrice: 0, index: 0, } }, async onLoad ({ payId, status, isPay }) { this.payId = payId this.status = status this.isPay = isPay // console.log('++++++++++++++++++',this.status) const openid = uni.getStorageSync('openid') const uid = this.$store.state.user.userInfo.uid this.uid = uid this.openid = openid await store.dispatch('orderRead/getOrderInfo', { pay_id: this.payId, uid: uid, openid: openid, }) const { list } = this.orderInfo.order_info for (let index = 0; index < list.length; index++) { await store.dispatch('orderRead/goodDetails', { pid: list[index].pid, skId: list[index].sk_id, }) } this.totalPrice = this.orderInfo.total_fee }, // 若从支付页面跳转过来,返回直接返回到首页 onBackPress(option) { if (option.from === 'backbutton' && this.isPay) { uni.switchTab({ url: '/pages/index/index', }) return true // 阻止默认返回行为 } }, computed: { // 规格列表 skuList () { return this.$store.state.orderRead.skuList }, orderInfo() { return this.$store.state.orderRead.orderInfo }, orderInfoList () { return this.orderInfo.order_info ? this.orderInfo.order_info.list : null }, // 获取订单地址信息 orderAddressInfo () { return this.orderInfo.order_info ? this.orderInfo.order_info.address : null }, // 订单付款时间 getLeftTime () { return this.orderInfo.order_info ? this.orderInfo.order_info.lefttime : 1800 }, // 计算总优惠额 totalDiscount() { const discountInfoList = this.orderInfo.discount_info let totalDiscount = 0 if (discountInfoList) { discountInfoList.map((discountItem, index) => { totalDiscount += Number(discountItem.value) }) } // console.log(totalDiscount) return totalDiscount }, }, methods: { // 再次购买 暂时只支持跳转第一个商品 toDetail() { const pid = this.orderInfo.order_info.list[0].pid uni.navigateTo({ url: '../details/details?pid=' + pid, fail: (res) => { console.log(res) }, }) }, // 取消订单 timeup() { this.cancleOrder() }, cancleOrder() { const uid = this.uid const openid = this.openid const keyname = this.orderInfo.order_info.keyname const that = this // console.log('keyname',this.orderInfo.keyname) uni.showModal({ title: '提示', content: '现在取消,订单不可恢复哦,确认取消吗?', success: function(res) { if (res.confirm) { store.dispatch('cancelOrder/cancel', { keyname: keyname, uid: uid, openid: openid, }).then(() => { if (that.isPay === '1') { console.log('lalallala-1') uni.switchTab({ url: '/pages/index/index', }) } else { console.log('lalallala-2') uni.navigateBack({ delta: 1, }) } }) } else if (res.cancel) { console.log('用户点击取消', that.isPay) } }, }) }, paylog() { console.log('pay', this.orderInfo) const { data, exKeyName: keyName } = this.orderInfo const uid = uni.getStorageSync('uid') const timeStamp = new Date().getTime().toString() const nonceStr = 'asfafasfasfasfasf' // 支付参数 const fieldSet = { openid: this.$store.state.user.userInfo.openid, uid: this.$store.state.user.userInfo.uid, shopid: 0, payCate: 2020, payMoney: this.totalPrice, payWoodId: `fcdj-${uid}-${keyName}`, payWoodDesc: '在【非常戴镜】的微信付款凭证', nonceStr, signType: 'MD5', app_uid: 2020, timeStamp, keyname: keyName, billInfo: JSON.stringify(data), } // 请求后台支付接口 store.dispatch('order/pay', fieldSet).then(({ data, data2, pay_id: payId }) => { if (data.return_code === 'SUCCESS' && data.result_code === 'SUCCESS') { const stringA = `appId=wx115b25aa396d27ac&nonceStr=${nonceStr}&package=prepay_id=${data.prepay_id}&signType=MD5&timeStamp=${timeStamp}` const stringSignTemp = stringA + '&key=NewMoney2017hatemydaddy123456789' // 微信支付接口 uni.requestPayment({ appId: data.appid, timeStamp, nonceStr, total_fee: this.totalPrice, package: `prepay_id=${data.prepay_id}`, signType: 'MD5', paySign: MD5Util.MD5(stringSignTemp).toUpperCase(), success: (res) => { // 支付成功 uni.showModal({ content: '支付成功', showCancel: false, }) // 跳转订单详情页->状态 待收货 uni.reLaunch({ url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=1&isPay=1`, }) }, fail: (res) => { // 支付失败 uni.showModal({ content: '支付失败', showCancel: false, }) // 跳转订单详情页->刷新本页面 // uni.redirectTo({ // url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=0&isPay=1`, // }) }, complete: () => { uni.hideLoading() }, }) } else { uni.showModal({ content: '支付失败', showCancel: false, }) console.log('支付失败') uni.hideLoading() // uni.redirectTo({ // url: `../myOrderPaying/myOrderPaying?payId=${payId}&status=0&isPay=1`, // }) } }) // 修改订单状态 待付款==>待收货 store.dispatch('statusConfirm/confirm', { uid: this.uid, openid: this.openid, oldway: '0', way: '1', pay_id: this.payId, judgeContent: '', orderInfo: this.orderInfo.order_info, }) .then( // setTimeout(() => { // uni.navigateBack(); // }, 1500) ) }, confirmOrder() { // 确认收货 way1 ==>way2 store .dispatch('statusConfirm/confirm', { uid: this.uid, openid: this.openid, oldway: '1', way: '2', pay_id: this.payId, judgeContent: '', orderInfo: this.orderInfo.order_info, }) .then((res) => { if (res.data.code === 1) { uni.showToast({ title: '已确认', mask: true, duration: 1500, icon: 'success', }) } else { uni.showToast({ title: '服务器错误,确认失败!', mask: true, }) } setTimeout(() => { uni.navigateBack() }, 1500) }) }, }, // filters: { // timerChange: function(value) { // var newDate = new Date() // newDate.setTime(value * 1000) // return newDate.toLocaleString() // }, // }, } </script> <style lang="scss" scoped> .content { min-height: 100vh; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; background-color: #f2f2f2; } .order { margin-bottom: 112rpx; background: #f2f2f2; margin-top: 140rpx; width: 670rpx; } .order-time { width: 100%; height: 140rpx; background-color: #fff; display: flex; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; text { // font-family: PingFangSC-Regular; // margin-top: 48rpx; font-size: 14px; color: #333333; letter-spacing: -0.26px; } .p2 { // font-family: DINAlternate-Bold; margin: 42rpx 20rpx 0 20rpx; font-size: 18px; color: #ec5d3b; letter-spacing: -0.34px; } } .headerBanner { width: 100%; height: 140rpx; background: #4a90e2; padding: 26rpx 60rpx 24rpx 60rpx; box-sizing: border-box; color: #ffffff; display: flex; justify-content: space-between; align-items: center; position: fixed; top: 0; left: 0; .bannerLeft { font-size: 36rpx; display: flex; flex-direction: column; justify-content: center; align-items: center; .T2 { font-size: 24rpx; } } image { height: 56rpx; width: 72rpx; } } .order-user { height: 228rpx; background: #ffffff; border-radius: 14rpx; margin: 0 auto; margin-top: 20rpx; margin-bottom: 20rpx; .order-user-head { display: flex; height: 108rpx; align-items: center; margin-left: 126rpx; .p1 { // font-family: PingFangSC-Regular; font-size: 14px; color: #333333; letter-spacing: -0.26px; margin-right: 20rpx; } .p2 { // font-family: PingFangSC-Regular; font-size: 14px; color: #999999; letter-spacing: -0.26px; } } .order-user-body { display: flex; width: 100%; image { width: 24px; height: 26px; margin: 12rpx 32rpx 0 40rpx; } .p3 { // font-family: PingFangSC-Semibold; font-size: 14px; color: #333333; letter-spacing: -0.26px; line-height: 70rpx; } } } .order-info { background-color: #fff; box-shadow: 0 0 20rpx 0 rgba(177, 128, 128, 0.06); border-radius: 16rpx; margin: 0 auto; view { margin-left: 40rpx; } text { font-size: 14px; } .order-info-head { display: flex; padding-top: 40rpx; image { height: 188rpx; width: 188rpx; } .order-info-head-r { margin: 0; width: 368rpx; margin-left: 24rpx; // margin-top: 40rpx; text { display: block; } // .arrow{ // width: 0; // height: 0; // border-left: 5px transparent; // border-right: 5px transparent; // border-top: 5px #979797; // border-bottom: 0 transparent; // border-style: solid; // position: relative; // // transform: scaleY(-1); // } // .arrow::after{ // content: ''; // position: absolute; // top: -6.5px; // left: -5px; // border-left: 5px transparent; // border-right: 5px transparent; // border-top: 5px #FFFFFF; // border-bottom: 0 transparent; // border-style: solid; // } .p1 { min-height: 40px; // font-family: PingFangSC-Regular; font-size: 14px; color: #333333; letter-spacing: -0.26px; line-height: 18px; // line-height: 20px; } .p2 { height: 34px; padding: 1px 0 3px 0; // font-family: PingFangSC-Regular; font-size: 12px; color: #999999; letter-spacing: -0.23px; } .infoText-bottom { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; width: 100%; margin-left: 0; .markPrice { font-size: 14px; color: #ff6b4a; margin-right: 20rpx; margin-left: 0rpx; } .buy-num { font-size: 12px; color: #999999; margin-left: 0; } } } } // .order-info-goodsnum { // display: flex; // align-items: center; // justify-content: flex-end; // text { // margin-right: 44rpx; // // ont-family: PingFangSC-Regular; // font-size: 12px; // color: #999999; // letter-spacing: -0.23px; // } // } .order-info-freight { display: block; margin-left: 40rpx; margin-top: 22rpx; .p1 { // font-family: PingFangSC-Regular; font-size: 14px; color: #333333; letter-spacing: -0.26px; line-height: 18px; margin-right: 24px; } .p2 { // font-family: PingFangSC-Regular; font-size: 14px; color: #ff6b4a; letter-spacing: -0.26px; } } .order-info-discount { display: block; margin-left: 40rpx; margin-top: 24rpx; .p1 { // font-family: PingFangSC-Regular; font-size: 14px; color: #333333; letter-spacing: -0.26px; line-height: 18px; margin-right: 24px; } .p2 { // font-family: PingFangSC-Regular; font-size: 14px; color: #ff6b4a; letter-spacing: -0.26px; } } .order-info-price { display: block; margin-left: 40rpx; margin-top: 24rpx; .p1 { // font-family: PingFangSC-Semibold; font-size: 14px; color: #333333; letter-spacing: -0.26px; line-height: 18px; margin-right: 24px; } .p2 { // font-family: PingFangSC-Semibold; font-size: 14px; color: #ff6b4a; letter-spacing: -0.26px; } } .order-info-num { display: block; margin-left: 40rpx; margin-top: 44rpx; text { // font-family: PingFangSC-Regular; font-size: 12px; color: #999999; letter-spacing: -0.23px; } } .order-info-time { display: block; margin: 8rpx 0 48rpx 40rpx; text { // font-family: PingFangSC-Regular; font-size: 12px; color: #999999; letter-spacing: -0.23px; } } .order-info-hr { width: 520rpx; height: 1px; background-color: #e9e9e9; margin-bottom: 20rpx; } .order-info-contact { display: flex; padding-bottom: 28rpx; image { width: 19px; height: 16px; } button { // font-family: PingFangSC-Regular; border: none; border-radius: 0; text-align: left; margin-left: 20rpx; font-size: 14px; color: #333333; letter-spacing: -0.26px; line-height: 18px; background-color: #fff; padding: 0; &::after { border: 0; } } } } .order-confim { display: flex; align-items: center; justify-content: flex-end; // z-index: 999; width: 100%; height: 112rpx; position: fixed; bottom: 0; background: #ffffff; button { width: 204rpx; height: 80rpx; border: 1px solid #ff6b4a; border-radius: 40rpx; font-size: 32rpx; letter-spacing: -0.3px; margin-right: 0; } .b1 { // font-family: PingFangSC-Regular; color: #ff6b4a; background-color: #ffffff; } .b2 { // font-family: PingFangSC-Regular; background-color: #ff6b4a; color: #ffffff; margin: 0 26rpx 0 20rpx; } } </style>