第一次提交
This commit is contained in:
@fawn-nine
275
pages/peanut/chargeDetaill.vue
Normal file
275
pages/peanut/chargeDetaill.vue
Normal file
@@ -0,0 +1,275 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user