275 lines
7.4 KiB
Vue
275 lines
7.4 KiB
Vue
<template>
|
||
<view class="container">
|
||
<!-- 公共组件-每个页面必须引入 -->
|
||
<public-module></public-module>
|
||
<!-- <z-nav-bar title="我的订单"></z-nav-bar> -->
|
||
<z-nav-bar title="充值详情"></z-nav-bar>
|
||
|
||
<view class="leve1">
|
||
<view class="item flexbox" v-if="orderDetail.orderStatus == 3">
|
||
<view class="">
|
||
<view class="img">
|
||
<image @click="" style="width: 120rpx; height: 120rpx; margin-top: 0;" class=""
|
||
src="/static/icon/cgts.png" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="txt">
|
||
<text>充值成功</text>
|
||
</view>
|
||
<view class="">
|
||
<text style="font-size: 30rpx;">充值金额：</text><text style=" color: #ff5500;">￥</text>
|
||
<text class="price">{{orderDetail.orderPrice}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="item flexbox" v-if="orderDetail.orderStatus == 0">
|
||
<view class="">
|
||
<view class="img">
|
||
<image @click="" style="width: 120rpx; height: 120rpx; margin-top: 0;" class=""
|
||
src="/static/icon/noPay.png" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="txt">
|
||
<text>待付款</text>
|
||
</view>
|
||
<view class="">
|
||
<text style="font-size: 30rpx;">充值金额：</text><text style=" color: #ff5500;">￥</text>
|
||
<text class="price">{{orderDetail.orderPrice}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="item flexbox" v-if="orderDetail.orderStatus > 3">
|
||
<view class="">
|
||
<view class="img">
|
||
<image @click="" style="width: 120rpx; height: 120rpx; margin-top: 0;" class=""
|
||
src="/static/icon/fail.png" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="txt">
|
||
<text>充值失败</text>
|
||
</view>
|
||
<view class="">
|
||
<text style="font-size: 30rpx;">充值金额：</text><text style=" color: #ff5500;">￥</text>
|
||
<text class="price">{{orderDetail.orderPrice}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="leve2">
|
||
<view class="times">
|
||
<view class="flexbox">
|
||
<text>订单编号：</text><text>{{orderDetail.orderSn}}</text>
|
||
</view>
|
||
<view class="flexbox">
|
||
<text>订单创建时间：</text><text>{{orderDetail.createTime}}</text>
|
||
</view>
|
||
<view class="flexbox" v-if="orderDetail.orderStatus > 0">
|
||
<text>到账时间：</text><text>{{orderDetail.createTime}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="leve3 flexbox">
|
||
<view class="item">
|
||
<button v-if="orderDetail.orderStatus == 3" @click="goHome" class="mini-btn" type="primary" style="backgroundColor:#1AAD19;borderColor:#1AAD19" >完成</button>
|
||
<button v-if="orderDetail.orderStatus == 0" @click="goPay" class="mini-btn" type="warn" >去支付</button>
|
||
</view>
|
||
<view class="item" v-if="orderDetail.orderStatus == 3">
|
||
<button class="mini-btn" type="primary" @click="goCharge">继续充值</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<z-navigation></z-navigation>
|
||
<music-play :playData="playData"></music-play>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
setPay,
|
||
setPayAssign,
|
||
setWXPay
|
||
} from '@/config/utils';
|
||
import musicPlay from '@/components/music.vue'
|
||
import $http from '@/config/requestConfig.js';
|
||
import {
|
||
mapState,
|
||
mapMutations
|
||
} from 'vuex';
|
||
export default {
|
||
data() {
|
||
return {
|
||
playData: {},
|
||
orderId: null,
|
||
orderSn: '',
|
||
orderDetail: {},
|
||
titleStat: '',
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
this.orderId = e.orderId
|
||
this.orderSn = e.orderSn
|
||
},
|
||
onShow() {
|
||
this.getOrderDetail()
|
||
},
|
||
components: {
|
||
musicPlay
|
||
},
|
||
computed: {
|
||
...mapState(['userInfo']),
|
||
},
|
||
methods: {
|
||
// 支付
|
||
goPay() {
|
||
let payItem = this.orderDetail
|
||
console.log(payItem, 'payItem')
|
||
if (payItem.paymentMethod == 2) {
|
||
console.log('阿里支付')
|
||
setPay({
|
||
typePay: 'alipay',
|
||
subject: 'order',
|
||
totalAmount: payItem.realMoney,
|
||
type: 2,
|
||
relevanceoid: payItem.orderSn,
|
||
customerId: this.userInfo.id,
|
||
}, res => {
|
||
if (res.success) {
|
||
uni.showToast({
|
||
title: "支付成功"
|
||
});
|
||
setTimeout(()=>{
|
||
uni.navigateTo({
|
||
url:'/pages/user/persCount'
|
||
})
|
||
},2000)
|
||
} else {
|
||
uni.showToast({
|
||
title: "支付失败",
|
||
icon: "none",
|
||
image: '../../static/icon/ic_close.png'
|
||
});
|
||
}
|
||
this.getOrderDetail()
|
||
})
|
||
} else if (payItem.paymentMethod == 1) {
|
||
console.log('微信支付')
|
||
// console.log(this.isAndorid)
|
||
if (this.isAndorid == false) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '很抱歉，苹果系统暂不支持微信支付',
|
||
showCancel: false
|
||
})
|
||
return false
|
||
} else {
|
||
let data1 = {
|
||
orderSn: payItem.orderSn,
|
||
buyOrderId: null,
|
||
totalAmount: payItem.realMoney
|
||
}
|
||
console.log(data1, 'data1')
|
||
setWXPay(data1, res => {
|
||
if (res.success) {
|
||
uni.showToast({
|
||
title: "支付成功"
|
||
});
|
||
setTimeout(()=>{
|
||
uni.navigateTo({
|
||
url:'/pages/user/persCount'
|
||
})
|
||
},2000)
|
||
} else {
|
||
console.log(res)
|
||
if (res.data.errMsg.indexOf('User canceled') != -1) {
|
||
uni.showToast({
|
||
title: "用户取消支付",
|
||
icon: "none",
|
||
image: '../../static/icon/ic_close.png'
|
||
});
|
||
} else {
|
||
uni.showToast({
|
||
title: "支付失败",
|
||
icon: "none",
|
||
image: '../../static/icon/ic_close.png'
|
||
});
|
||
}
|
||
}
|
||
})
|
||
}
|
||
} else if (payItem.paymentMethod == 3) {
|
||
// 苹果充值
|
||
console.log('苹果二次支付')
|
||
if (this.isAndorid) {
|
||
uni.showModal({
|
||
title: '提示',
|
||
showCancel: false,
|
||
content: '很抱歉，当前订单属于苹果系统内购订单，安卓系统无法完成支付操作，您可切换到苹果系统进行支付，也可以取消该订单，并重新下单'
|
||
})
|
||
} else {
|
||
// this.iphonepay(payItem)
|
||
}
|
||
}
|
||
},
|
||
goCharge(){
|
||
uni.navigateTo({
|
||
url:'./reCharge'
|
||
})
|
||
},
|
||
goHome(){
|
||
uni.switchTab({
|
||
url:'/pages/peanut/home'
|
||
})
|
||
},
|
||
getOrderDetail() {
|
||
this.$http
|
||
.get(`/book/buyOrder/orderDetail?orderSn=${this.orderSn}`)
|
||
.then(res => {
|
||
console.log('订单详情', res)
|
||
this.orderDetail = res.result
|
||
this.consigneeShow = true
|
||
// console.log(this.orderContet,'this.orderContet')
|
||
if (this.orderDetail.orderStatus == 0) {
|
||
this.titleStat = '待支付'
|
||
} else if (this.orderDetail.orderStatus == 1) {
|
||
this.titleStat = '待发货'
|
||
} else if (this.orderDetail.orderStatus == 2) {
|
||
this.titleStat = '待收货'
|
||
} else if (this.orderDetail.orderStatus == 3) {
|
||
this.titleStat = '已完成'
|
||
}
|
||
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.flexbox{display: flex;}
|
||
.container {
|
||
height: 100vh;
|
||
background-color: #fff;
|
||
padding: 10rpx;
|
||
}
|
||
|
||
.leve1 {
|
||
.item {
|
||
text-align: center;
|
||
height: 400rpx;
|
||
justify-content: center;
|
||
align-items: center;
|
||
.txt{margin-bottom: 20rpx;}
|
||
.price{font-size: 50rpx; color: #ff5500; }
|
||
.img { margin-bottom: 20rpx;
|
||
image {
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.leve2{ text-align: center; font-size: 30rpx;
|
||
|
||
.times{ padding: 20rpx; font-size: 28rpx; line-height: 60rpx;
|
||
.flexbox{width: 100%; justify-content:space-between;}
|
||
}
|
||
}
|
||
.leve3{width: 100%; justify-content: space-around; margin-top: 50rpx;
|
||
.item{width: 40%;}
|
||
}
|
||
</style> |