147 lines
3.2 KiB
Vue
147 lines
3.2 KiB
Vue
<!-- 支付结果页 -->
|
|
<template>
|
|
<view class="success-page">
|
|
|
|
<view class="success-box u-flex-col u-row-center u-col-center">
|
|
<view><image class="pay-img" :src="payImg[payState]" mode=""></image></view>
|
|
<view><text class="notice">{{ payText[payState] }}</text></view>
|
|
<view><text class="pay-money" v-if="payState === 'success' && orderDetail.total_fee">￥{{ orderDetail.total_fee }}</text></view>
|
|
<view class="btn-box u-flex u-row-between" v-if="showModal == 'app'">
|
|
<button class="u-reset-button base-btn" open-type="launchApp" app-parameter="wechat" binderror="launchAppError" >返回APP </button>
|
|
</view>
|
|
|
|
<view class="btn-box u-flex u-row-between" v-if="showModal == 'xcx'">
|
|
<button class="u-reset-button base-btn" @click="getLos()" >返回 </button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
|
|
let payTimer = null;
|
|
const payCount = 5;
|
|
export default {
|
|
components: {},
|
|
data() {
|
|
return {
|
|
showModal: 'h5',
|
|
messageType: '',
|
|
templateIds: [],
|
|
wxOpenTags: '',
|
|
orderDetail: {}, //订单详情
|
|
orderType: '', //订单类型
|
|
payText: {
|
|
fail: '支付失败',
|
|
success: '支付成功',
|
|
paying: '查询中...'
|
|
},
|
|
payImg: {
|
|
fail: '/static/syb/order_pay_fail.gif',
|
|
success: '/static/syb/order_pay_success.gif',
|
|
paying:'/static/syb/order_paying.gif'
|
|
},
|
|
payState: '' //支付状态
|
|
};
|
|
},
|
|
computed: {
|
|
...mapGetters(['subscribeMessageIdsMap'])
|
|
},
|
|
onLoad(opt) {
|
|
var that = this;
|
|
that.payState = opt.pay_state
|
|
that.showModal = opt.show_modal
|
|
console.log(that.showModal,'that.showModal')
|
|
},
|
|
methods: {
|
|
...mapActions(['getCartList']),
|
|
getLos(){
|
|
wx.navigateBackMiniProgram({
|
|
extraData: {
|
|
name: '半屏小程序返回',
|
|
status: this.payState
|
|
},
|
|
success(res) {
|
|
// 返回成功
|
|
}
|
|
})
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scopeds>
|
|
.success-box {
|
|
text-align: center;
|
|
background: #fff;
|
|
width: 750rpx;
|
|
padding: 40rpx 0;
|
|
|
|
.pay-img {
|
|
width: 130rpx;
|
|
height: 130rpx;
|
|
}
|
|
|
|
.notice {
|
|
font-size: 30rpx;
|
|
|
|
font-weight: bold;
|
|
color: rgba(51, 51, 51, 1);
|
|
line-height: 30rpx;
|
|
margin-top: 30rpx;
|
|
}
|
|
|
|
.pay-money {
|
|
font-size: 36rpx;
|
|
color: #ff3000;
|
|
font-weight: 600;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.btn-box {
|
|
margin-top: 30rpx;
|
|
// width: 660rpx;
|
|
|
|
.base-btn {
|
|
width: 320rpx;
|
|
line-height: 70rpx;
|
|
background: rgba(255, 255, 255, 1);
|
|
border: 1rpx solid rgba(223, 223, 223, 0.5);
|
|
border-radius: 35rpx;
|
|
font-size: 28rpx;
|
|
|
|
font-weight: 400;
|
|
color: rgba(153, 153, 153, 1);
|
|
padding: 0;
|
|
}
|
|
|
|
.again-pay {
|
|
width: 320rpx;
|
|
line-height: 70rpx;
|
|
background: linear-gradient(90deg, rgba(233, 180, 97, 1), rgba(238, 204, 137, 1));
|
|
box-shadow: 0px 7rpx 6rpx 0px rgba(229, 138, 0, 0.22);
|
|
border-radius: 35rpx;
|
|
font-size: 28rpx;
|
|
|
|
font-weight: 400;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.hot-box {
|
|
background: #fff;
|
|
padding: 20rpx;
|
|
margin-top: 20rpx;
|
|
|
|
.hot-title {
|
|
font-size: 30rpx;
|
|
|
|
font-weight: 500;
|
|
color: rgba(51, 51, 51, 1);
|
|
height: 80rpx;
|
|
}
|
|
}
|
|
</style>
|