230 lines
5.8 KiB
Vue
230 lines
5.8 KiB
Vue
<template>
|
||
<view class="container" :style="viewColor">
|
||
<!-- #ifdef H5 -->
|
||
<!--公众号-->
|
||
<view class="payCount" v-if="isWeixin">
|
||
<view class="count">
|
||
<view class="main">
|
||
<view>点击右上角
|
||
<text class='iconfont icon-gengduo2'></text>
|
||
<image class="image" :src="`${domain}/static/images/guide.png`"></image>
|
||
</view>
|
||
<view>选择在<text class="text">浏览器</text>中打开，去支付宝支付</view>
|
||
</view>
|
||
</view>
|
||
<view class="pay_count">
|
||
<navigator v-if="type == 0" url="/pages/users/order_list/index?status=1" class="payBtn">完成支付</navigator>
|
||
<navigator v-if="type == 10" url="/pages/users/user_payment/index" class="payBtn bg-none">返回</navigator>
|
||
<navigator v-else-if="type == 11" url="/pages/annex/vip_paid/index" class="payBtn bg-none">返回</navigator>
|
||
<navigator v-else url="/pages/users/order_list/index?status=0" class="payBtn bg-none">返回查看订单</navigator>
|
||
</view>
|
||
</view>
|
||
<!--H5-->
|
||
<view v-else>
|
||
<view class="alipay">
|
||
<image class="alipay_wait" :src="domain+'/static/diy/alipay_wait'+keyColor+'.png'"></image>
|
||
<view class="alipay_text">正在跳转支付... </view>
|
||
</view>
|
||
<view class="pay_count">
|
||
<navigator v-if="type == 0" url="/pages/users/order_list/index?status=1" class="payBtn">完成支付</navigator>
|
||
<navigator v-if="type == 10" url="/pages/users/user_payment/index" class="payBtn bg-none">返回</navigator>
|
||
<navigator v-else-if="type == 11" url="/pages/annex/vip_paid/index" class="payBtn bg-none">返回</navigator>
|
||
<navigator v-else url="/pages/users/order_list/index?status=0" class="payBtn bg-none">返回查看订单</navigator>
|
||
</view>
|
||
</view>
|
||
<!-- #endif -->
|
||
<!-- #ifdef MP -->
|
||
<!--小程序-->
|
||
<view class="payCount">
|
||
<view class="count">
|
||
<view class="main_text">
|
||
<view>去支付，请长按网址复制后 使用浏览器访问</view>
|
||
<text class='copy' @tap='copy'>{{url}}</text>
|
||
</view>
|
||
</view>
|
||
<view class="pay_count">
|
||
<navigator v-if="type == 10" url="/pages/users/user_payment/index" class="payBtn">完成支付</navigator>
|
||
<navigator v-else-if="type == 11" url="/pages/annex/vip_paid/index" class="payBtn">完成支付</navigator>
|
||
<navigator v-else url="/pages/users/order_list/index?status=1" class="payBtn">完成支付</navigator>
|
||
<navigator v-if="type == 10" url="/pages/users/user_payment/index" class="payBtn bg-none">返回</navigator>
|
||
<navigator v-else-if="type == 11" url="/pages/annex/vip_paid/index" class="payBtn bg-none">返回</navigator>
|
||
<navigator v-else url="/pages/users/order_list/index?status=0" class="payBtn bg-none">返回查看订单</navigator>
|
||
</view>
|
||
</view>
|
||
<!-- #endif -->
|
||
|
||
</view>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
|
||
import ClipboardJS from "@/plugin/clipboard/clipboard.js";
|
||
import { getCallBackUrlApi } from "@/api/order";
|
||
import { mapGetters } from "vuex";
|
||
import { HTTP_REQUEST_URL } from '@/config/app';
|
||
export default {
|
||
computed: mapGetters(['viewColor','keyColor']),
|
||
data() {
|
||
return {
|
||
domain: HTTP_REQUEST_URL,
|
||
isWeixin: false,
|
||
url: '',
|
||
keyCode: '',
|
||
type: 0
|
||
};
|
||
},
|
||
/**
|
||
* 生命周期函数--监听页面显示
|
||
*/
|
||
onShow: function() {
|
||
|
||
|
||
},
|
||
onReady: function() {
|
||
// #ifdef H5
|
||
this.$nextTick(function() {
|
||
const clipboard = new ClipboardJS(".copy-data");
|
||
clipboard.on("success", () => {
|
||
this.$util.Tips({
|
||
title: '复制成功'
|
||
});
|
||
});
|
||
});
|
||
// #endif
|
||
},
|
||
onLoad: function(options){
|
||
let that = this;
|
||
that.url = options.url;
|
||
that.type = options.type || 0;
|
||
if(options.keyCode && options.url){
|
||
// #ifdef H5
|
||
that.keyCode = options.keyCode;
|
||
that.getCallBackUrl(that.keyCode);
|
||
// 公众号
|
||
if(that.$wechat.isWeixin()){
|
||
that.isWeixin = true;
|
||
}else{
|
||
setTimeout(function(){
|
||
window.location.href = that.url;
|
||
},2000)
|
||
}
|
||
// #endif
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
/**
|
||
*
|
||
* 剪切订单号
|
||
*/
|
||
// #ifndef H5
|
||
copy: function() {
|
||
let that = this;
|
||
uni.setClipboardData({
|
||
data: that.url,
|
||
success: function(res){
|
||
}
|
||
});
|
||
},
|
||
// #endif
|
||
getCallBackUrl: function(key){
|
||
let that = this;
|
||
getCallBackUrlApi(key)
|
||
.then(res => {
|
||
that.url = res.message;
|
||
})
|
||
.catch(res => {
|
||
that.$util.Tips({
|
||
title: res
|
||
});
|
||
});
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.container{
|
||
height: 100vh;
|
||
background: #F5F5F5;
|
||
}
|
||
.payCount{
|
||
padding-bottom: 60rpx;
|
||
.count{
|
||
padding-top: 260rpx;
|
||
}
|
||
.main{
|
||
position: relative;
|
||
padding: 0 100rpx;
|
||
color: #111111;
|
||
font-size: 32rpx;
|
||
line-height: 60rpx;
|
||
.text{
|
||
color: #000000;
|
||
font-size: 36rpx;
|
||
margin: 0 4px;
|
||
font-weight: 700;
|
||
}
|
||
.image{
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
position: absolute;
|
||
right: 50rpx;
|
||
top: -200rpx;
|
||
}
|
||
}
|
||
.main_text{
|
||
position: relative;
|
||
color: #111111;
|
||
font-size: 32rpx;
|
||
line-height: 60rpx;
|
||
text-align: center;
|
||
width: 600rpx;
|
||
margin: 0 auto;
|
||
}
|
||
.copy{
|
||
display: block;
|
||
margin-top: 100rpx;
|
||
font-weight: bold;
|
||
word-break:break-all;
|
||
}
|
||
}
|
||
.pay_count{
|
||
padding: 0 15px;
|
||
box-sizing: border-box;
|
||
margin-top: 180rpx;
|
||
}
|
||
.payBtn{
|
||
width: 690rpx;
|
||
margin: 0 auto;
|
||
height: 86rpx;
|
||
border-radius: 50rpx;
|
||
text-align: center;
|
||
line-height: 86rpx;
|
||
font-size: 30rpx;
|
||
color: #fff;
|
||
background-color: var(--view-theme);
|
||
&.bg-none{
|
||
color: var(--view-theme);
|
||
background-color: #fff;
|
||
border: 1px solid var(--view-theme);
|
||
margin-top: 30rpx;
|
||
}
|
||
}
|
||
.alipay{
|
||
text-align: center;
|
||
.alipay_wait{
|
||
width: 502rpx;
|
||
height: 400rpx;
|
||
margin-top: 200rpx;
|
||
}
|
||
.alipay_text{
|
||
color: #111111;
|
||
font-size: 32rpx;
|
||
margin-top: 40rpx;
|
||
}
|
||
}
|
||
|
||
</style>
|