<template> <view> <view class="card" v-if="current == status" > <view class="cardHeader"> <text class="orderId" v-if="status == '0'||status == '1'" >订单号:{{order.pay_id}}</text> <text class="orderId" v-if="status == '2'||status == '3'" >下单时间:{{order.pay_time}}</text> <text class="orderType" v-if="status=='0'" >待付款</text> <text class="orderType" v-if="status=='1'" >待收货</text> <text class="orderType" v-if="status == '2'||status == '3'" >已完成</text> <!-- <text class="orderType" v-if="status == '3'">已评价</text> --> </view> <view class="orderCardInfo" @click="toOrderInfo(status,order.pay_id)" v-for="(orderInfo, index) in orderInfoList" :key="index" > <image :src="orderInfo.imgUrl" mode="aspectFill" ></image> <view class="infoText"> <view class="orderName">{{orderInfo.p_name}}</view> <view class="orderDescrib">{{orderInfo.p_name}}</view> <view class="infoText-bottom"> <view class="markPrice">{{orderInfo.nowPrice}}</view> <view class="buy-num">X {{orderInfo.num}}</view> </view> </view> </view> <view class="payPrice">实付:<text class="priceNum">{{order.total_fee}}</text> </view> <!-- 0待付款 1 已付款 待收货 2 已收货待评价 3 已评价 --> <view class="btns" v-if="status == '0'" > <view class="btn-type1" @click="cancleOrder">取消订单</view> <view class="btn-type2" @click="paylog">去支付</view> </view> <view class="btns" v-if="status == '1'" > <view class="btn-type2">确认收货</view> </view> <view class="btns" v-if="status == '2'" > <view class="btn-type2" @click="toDetail(order.order_info[0].pid)">再次购买</view> </view> <!-- <view class="btns" v-if="status == '3'"> <view class="btn-type2">再次购买</view> </view> --> </view> <view class="card" v-if="current == '10'" > <view class="cardHeader"> <text class="orderId" v-if="status == '0'||status == '1'">订单号:{{order.pay_id}}</text> <text class="orderId" v-if="status == '2'||status == '3'">下单时间:{{order.pay_time}}</text> <text class="orderType" v-if="status=='0'">待付款</text> <text class="orderType" v-if="status=='1'">待收货</text> <text class="orderType" v-if="status == '2'||status == '3'">已完成</text> <!-- <text class="orderType" v-if="status == '3'">已评价</text> --> </view> <view class="orderCardInfo" @click="toOrderInfo(status,order.pay_id)" v-for="(orderInfo) in orderInfoList" :key="orderInfo"> <image :src="orderInfo.imgUrl" mode="aspectFill"></image> <view class="infoText"> <view class="orderName">{{orderInfo.p_name}}</view> <view class="orderDescrib">{{orderInfo.p_name}}</view> <view class="infoText-bottom"> <view class="markPrice">{{orderInfo.nowPrice}}</view> <view class="buy-num">X {{orderInfo.num}}</view> </view> </view> </view> <view class="payPrice">实付:<text class="priceNum">{{order.total_fee}}</text> </view> <view class="btns" v-if="status == '0'"> <view class="btn-type1" @click="cancleOrder">取消订单</view> <view class="btn-type2" @click="paylog">去支付</view> </view> <view class="btns" v-if="status == '1'"> <view class="btn-type2">确认收货</view> </view> <view class="btns" v-if="status == '2'||status == '3'"> <view class="btn-type2" @click="toDetail(order.order_info[0].pid)">再次购买</view> </view> </view> </view> </template> <script> import MD5Util from '../../../utils/md5' import store from "@/store"; export default { data() { return { }; }, props: { /** * 订单数据 */ order: {}, /** * 当前选择 */ current:Number }, created() { console.log('order',this.order); // console.log(this.order.status ); // console.log(this.current); }, computed:{ status(){ return this.order.status }, orderInfoList(){ return this.order.order_info } }, methods:{ async paylog() { const openid = uni.getStorageSync('openid') const uid = this.order.uid; //先拿订单详情 await store.dispatch('orderRead/getOrderInfo', { pay_id: this.order.pay_id, uid: uid, openid: openid }).then((res)=>{ // console.log(res) const { data, exKeyName: keyName } = res.order_info const timeStamp = new Date().getTime().toString() const total_fee = res.total_fee const payId = res.pay_id const nonceStr = 'asfafasfasfasfasf' // 支付参数 const fieldSet = { openid: openid, uid: uid, shopid: 0, payCate: 2020, payMoney: total_fee, 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: total_fee, package: `prepay_id=${data.prepay_id}`, signType: 'MD5', paySign: MD5Util.MD5(stringSignTemp).toUpperCase(), success: (res) => { // 支付成功 uni.showModal({ content: '支付成功', showCancel: false, }) // //修改订单状态 待付款==>待收货 // store.dispatch("statusConfirm/confirm", { // uid: this.uid, // openid: this.openid, // oldway: "0", // way: "1", // pay_id: payId, // judgeContent: "", // orderInfo: this.orderInfo.order_info // }) }, fail: (res) => { // 支付失败 uni.showModal({ content: '支付失败', showCancel: false, }) }, complete: () => { uni.hideLoading() }, }) } else { uni.showModal({ content: '支付失败', showCancel: false, }) console.log('支付失败') uni.hideLoading() } }) //修改订单状态 待付款==>待收货 // store.dispatch("statusConfirm/confirm", { // uid: this.uid, // openid: this.openid, // oldway: "0", // way: "1", // pay_id: this.payId, // judgeContent: "", // orderInfo: this.orderInfo.order_info // }) }) }, async cancleOrder(e) { const openid = uni.getStorageSync('openid') const uid = this.order.uid; //先从订单详情中拿到keyname await store.dispatch('orderRead/getOrderInfo', { pay_id: this.order.pay_id, uid: uid, openid: openid }).then((res)=>{ const keyname = res.order_info.keyname uni.showModal({ title: "提示", content: "现在取消,订单不可恢复哦,确认取消吗?", success: function(res) { if (res.confirm) { store.dispatch("cancelOrder/cancel", { keyname: keyname, uid: uid, openid: openid }).then((res)=>{ console.log(res) if(res.code == 1){ store.dispatch("myOrder/getList", { way: "" }); }else{ uni.showToast({ title:'取消失败,服务器错误!', icon:'none' }) } }); } else if (res.cancel) { console.log("用户点击取消"); } } }); }); }, toDetail(pid){ console.log('pid',pid) uni.navigateTo({ url: '../details/details?pid='+pid, fail: (res) => {console.log(res)}, }); }, toRefundment(){ uni.navigateTo({ url: '../refundment/refundment', success: res => {}, fail: () => {}, complete: () => {} }); }, toOrderInfo(status,payId){ console.log(status,payId) switch(status){ // 0待付款 1待收货 2已收货 3 已评价 case '0': uni.navigateTo({ url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId, fail(errMsg) { console.log(errMsg) } }) break; case '1': uni.navigateTo({ url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId, fail(errMsg) { console.log(errMsg) } }) break; case '2' || '3': uni.navigateTo({ url:`../myOrderPaying/myOrderPaying?status=`+status+`&payId=`+payId, fail(errMsg) { console.log(errMsg) } }) break; default: break; } } } } </script> <style lang="scss"> .card { width: 670rpx; // height: 478rpx; background: #ffffff; box-shadow: 0 0 10px 0 rgba(177, 128, 128, 0.06); border-radius: 8px; border-radius: 8px; margin-top: 20rpx; padding: 40rpx; box-sizing: border-box; .cardHeader { width: 100%; height: 40rpx; display: flex; justify-content: space-between; align-items: center; .orderId { font-size: 12px; color: #999999; } .orderType { font-size: 14px; color: #ff6b4a; } } .orderCardInfo { width: 100%; height: 188rpx; display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin-top: 40rpx; image { height: 188rpx; width: 188rpx; margin-right: 24rpx; } .infoText { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; height: 188rpx; width: 368rpx; } .orderName { font-size: 14px; color: #333333; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .orderDescrib { font-size: 12px; color: #999999; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .infoText-bottom { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; width: 100%; .markPrice { font-size: 14px; color: #ff6b4a; margin-right: 20rpx; } .buy-num { font-size: 12px; color: #999999; } } } .payPrice { text-align: right; margin: 20rpx 0; font-size: 14px; color: #333333; .priceNum { font-size: 14px; color: #ff6b4a; } } .btns { display: flex; justify-content: flex-end; align-items: center; .btn-type1 { height: 48rpx; width: 156rpx; border: 1px solid #ff6b4a; border-radius: 12px; border-radius: 12px; text-align: center; line-height: 48rpx; font-size: 12px; color: #ff6b4a; } .btn-type2 { height: 48rpx; width: 140rpx; background: #ff6b4a; border-radius: 12px; border-radius: 12px; text-align: center; line-height: 48rpx; font-size: 12px; color: #ffffff; margin-left: 20rpx; } } } </style>