chen
/
perry-mall
1
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
perry-mall/pagesA/immediatePayment/immediatePayment.vue

222 lines
8.1 KiB
Vue
Raw Blame History

<template>
<view>
<!-- 状态栏 -->
<status-nav :titleVal="'立即支付'" :statusTitle="true"></status-nav>
<view :style="{paddingTop: statusHNH+'px'}" class="pad-zy30" style="padding-bottom: 150rpx;">
<view v-if="!isSuccess">
<!-- 订单信息 -->
<view class="bacf radius20 mar-s20" style="padding: 27rpx 20rpx;">
<view class="bold fon28">订单支付</view>
<view v-for="(item,index) in orderList" :key="index" class="fon26 col3 disjbac pad-sx50 disjbac bbot">
<navigator url="/pagesB/shopDetail/shopDetail" hover-class="none">
<image :src="item.imgSrc" class="flexs order-image" mode="aspectFill"></image>
</navigator>
<view class="width100 disjb fw" style="height: 166rpx;">
<view>
<navigator url="/pagesB/shopDetail/shopDetail" hover-class="none">
<view class="fon28 col3 bold clips2">{{item.title}}</view>
</navigator>
<view class="order-sy">试用</view>
</view>
<view class="disjbac mar-s10 width100">
<view class="order-item-price">￥{{item.price}}</view>
<view class="fon28 col6">x{{item.num}}</view>
</view>
</view>
</view>
<view class="fon28 disjbac mar-s50 pad-s10 mar-x20">
<view class="col6">共{{zf_allNum}}件</view>
<view class="bold colf8">应付款：{{zf_allPrice}}<span v-if="isKq">+{{zf_kqPrice}}孔雀币</span></view>
</view>
</view>
<!-- 支付方式 -->
<view class="bacf radius20 mar-s20 fon28 col3 pad-sx30 pad-zy20">
<view class="bold fon28">选择支付方式</view>
<view @tap="chooseFS(index)" v-for="(item,index) in payFS" :key="index" class="disjbac mar-s30">
<view class="disac">
<image v-if="item.isActive" src="/static/public/chooseFS.png" class="chooseDX" mode=""></image>
<image v-else src="/static/public/cancle-FS.png" class="chooseDX" mode=""></image>
<view class="mar-z25">{{item.title}}</view>
</view>
<view v-if="item.num!=0">余{{item.num}}</view>
</view>
</view>
<view v-if="isGuo" class="fon28 col3 dao-box">该订单已过期</view>
<view v-else class="fon28 col3 dao-box">请在<span class="colf8 bold">{{daoTime}}</span>完成支付</view>
<!-- 确认支付 -->
<view @tap="payment" class="submit-pay">确认支付</view>
</view>
<!-- 支付成功 -->
<view v-if="isSuccess" class="bacf radius20 mar-s20" style="padding: 27rpx 20rpx;text-align: center;">
<image src="/static/public/pay-success.png" style="width: 194rpx;height: 194rpx;" mode=""></image>
<view class="fon28 col3 pad-s20 pad-x40">支付成功</view>
<view class="" style="font-size: 46rpx;margin-bottom: 120rpx;color: #F85050;">￥{{jsPrice}}</view>
<view class="disja success-btn">
<view @tap="goDetail" style="">查看订单</view>
<view @tap="goShop" class="colf" :style="{background:publicColor}">再逛一逛</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
statusHNH:uni.getStorageSync('statusHNH'),
publicColor:uni.getStorageSync('publicColor'),//主题颜色
isSuccess:false,
orderList:uni.getStorageSync('orderList'),
zf_allNum:0,//总数量
zf_allPrice:0,//实际付款
zf_kqPrice:0,//孔雀币
payFS:[
{title:'微信支付',isActive:true,num:0},
{title:'孔雀币',isActive:false,num:3000},
],
isKq:false,
jsPrice:0,//结算时的金额,
zc_allPrice:0,//暂存实际总金额
orderInfo:uni.getStorageSync('orderInfo'),
daoTime:'',//支付倒计时
isGuo:false//是否过期
}
},
onShow() {
this.$toolAll.tools.isLogin()
},
onUnload() {
uni.removeStorageSync('orderInfo');
},
onLoad(options) {
this.zc_allPrice = this.zf_allPrice = options.allPrice;
this.zf_allPrice = this.$toolAll.tools.addXiaoShu(this.zf_allPrice);
this.zf_allNum = options.allNum;
let endTime = this.orderInfo.expired_at;
let endChuo = new Date(this.orderInfo.expired_at).getTime();
this.daoTime = this.$toolAll.tools.dayTime(endTime,options.startTime);
let timer = setInterval(()=>{
if(options.startTime - endChuo>=0){
this.isGuo = true;
clearInterval(timer);
} else {
options.startTime = options.startTime*1 + 1000;
this.daoTime = this.$toolAll.tools.dayTime(endTime,options.startTime)
}
},1000)
},
methods: {
chooseFS(index){
this.payFS[index].isActive = !this.payFS[index].isActive;
if(index==0){
//选择了微信支付+选择了孔雀币
if(this.payFS[0].isActive && this.payFS[1].isActive){
this.isKq = true;
return;
}
//取消了微信支付+选择了孔雀币
if(!this.payFS[0].isActive && this.payFS[1].isActive){
this.$toolAll.tools.showToast('孔雀币不足');
return;
}
//取消了微信支付+取消了孔雀币
if(!this.payFS[0].isActive && !this.payFS[1].isActive){
this.$toolAll.tools.showToast('请选择支付方式');
return;
}
//选择了微信支付+选择了孔雀币
if(this.payFS[0].isActive && this.payFS[1].isActive){
this.zf_allPrice = this.zc_allPrice - this.payFS[index].num;
this.zf_kqPrice = this.payFS[index].num;
return;
}
}
if(index==1) {
//选择了微信支付+选择了孔雀币
if(this.payFS[0].isActive && this.payFS[1].isActive) {
this.isKq = true;
this.zf_allPrice = this.zc_allPrice - this.payFS[index].num;
this.zf_kqPrice = this.payFS[index].num;
return;
}
//选择了微信支付+取消了孔雀币
if(this.payFS[0].isActive && !this.payFS[1].isActive) {
this.isKq = false;
this.zf_allPrice = this.zc_allPrice;
return;
}
//取消了微信支付+选择了孔雀币+孔雀币不足以抵扣应付款
if(!this.payFS[0].isActive && this.payFS[1].isActive && this.zc_allPrice*1 > this.zf_kqPrice*1){
this.$toolAll.tools.showToast('孔雀币不足')
this.isKq = true;
this.zf_allPrice = this.zc_allPrice - this.payFS[index].num;
this.zf_kqPrice = this.payFS[index].num;
return;
}
//取消了微信支付+选择了孔雀币+孔雀币足以抵扣应付款
if(!this.payFS[0].isActive && this.payFS[1].isActive && this.zc_allPrice*1 < this.zf_kqPrice*1){
this.isKq = true;
this.zf_allPrice = this.zc_allPrice - this.payFS[index].num;
this.zf_kqPrice = this.payFS[index].num;
return;
}
//取消了微信支付+取消了孔雀币
if(!this.payFS[0].isActive && !this.payFS[1].isActive){
this.$toolAll.tools.showToast('请选择支付方式')
this.isKq = false;
this.zf_allPrice = this.zc_allPrice;
return;
}
}
},
payment(){
if(!this.payFS[0].isActive && !this.payFS[1].isActive) {
this.$toolAll.tools.showToast('请选择支付方式')
} else if(!this.payFS[0].isActive && this.zc_allPrice*1 > this.zf_kqPrice*1){
this.$toolAll.tools.showToast('孔雀币不足')
} else {
console.log(this.orderInfo.needPay);
if(this.orderInfo.needPay){
uni.requestPayment({
provider: 'wxpay',
appId:this.orderInfo.payment_params.appId,//appId
timeStamp: this.orderInfo.payment_params.timeStamp,//时间戳
nonceStr: this.orderInfo.payment_params.nonceStr,//随机字符串
package: this.orderInfo.payment_params.package,//package
signType: this.orderInfo.payment_params.signType,//MD5
paySign: this.orderInfo.payment_params.sign,//签名
success:(res)=> {
this.$requst.post('order/paid',{order_coding:this.orderInfo.coding}).then(res=>{
this.isSuccess = true;
},error=>{this.$toolAll.tools.showToast(res.msg);})
},
fail: (err)=> {}
});
} else {
this.$requst.post('order/paid',{order_coding:this.orderInfo.coding}).then(res=>{
this.isSuccess = true;
},error=>{this.$toolAll.tools.showToast(res.msg);})
}
}
},
goDetail(){
uni.navigateTo({
url:'/pagesB/orderDetail/orderDetail'
})
},
goShop(){
uni.reLaunch({
url:'/pages/tabbar/shop/shop'
})
}
}
}
</script>
<style>
page {
background-color: #F5F5F5;
}
</style>
Reference in New Issue View Git Blame Copy Permalink