You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
417 lines
9.1 KiB
417 lines
9.1 KiB
<template>
|
|
<view>
|
|
<view :class="{ mask: open }" @touchmove.prevent @click="$emit('update:open', false)"></view>
|
|
<view :class="{ show: open }" class="pay-dialog fixed">
|
|
<view class="dialog-hd pos">
|
|
支付方式
|
|
<view class="abs" @click="$emit('update:open', false)">
|
|
<i class="iconfont iconguanbi"></i>
|
|
</view>
|
|
</view>
|
|
<view class="dialog-bd" @click="handleChangePayType">
|
|
<template v-for="item in payOptions">
|
|
<view class="pay-item pos flex flex-center-x" :class="item.value" v-if="item.canuse" :key="item.id">
|
|
<view class="name">
|
|
{{ item.name }}
|
|
<view v-if="item.value === 'yue'" class="info">
|
|
可用余额：￥{{ now_money }}
|
|
</view>
|
|
</view>
|
|
<i class="iconfont icongouxuan" v-if="payChecked === item.value"></i>
|
|
<view class="abs full" :data-type="item.value"></view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
<view class="dialog-ft">
|
|
<view v-if="!isMember && isMembership" class="member" @click="getUrl">
|
|
<div class="news">开通会员，本单可减<span class="money">{{this.$operation.minus(money,memberMoney)}} 元</span></div>
|
|
<i class="iconfont iconxiangyou"></i>
|
|
</view>
|
|
<view class="total">
|
|
支付：<text>￥{{ money }}</text>
|
|
</view>
|
|
<button :disabled="!payChecked" class="flex flex-center" @click="onPay">
|
|
立即支付
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { createOrder } from "@/api/special";
|
|
export default {
|
|
props: {
|
|
open: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
money: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
now_money: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
special_id: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
pay_type_num: {
|
|
type: Number,
|
|
default: -1,
|
|
},
|
|
pinkId: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
link_pay_uid: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
isWechat: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
isMember:{
|
|
type:Boolean,
|
|
default:false
|
|
},
|
|
memberMoney:{
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
isAlipay: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
isBalance: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
signs: {
|
|
type: Object,
|
|
default: function () {
|
|
return {};
|
|
},
|
|
},
|
|
templateId: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
memberLink: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
wxpayH5: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
priceId: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
useGold: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
isMembership: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
payOptions: [
|
|
{
|
|
id: 1,
|
|
name: "微信支付",
|
|
icon: "/static/svg/wxpay.png",
|
|
value: "weixin",
|
|
canuse: true,
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "支付宝支付",
|
|
icon: "/static/svg/alipay.png",
|
|
value: "zhifubao",
|
|
canuse: this.isAlipay,
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "余额支付",
|
|
icon: "/static/svg/yue.png",
|
|
value: "yue",
|
|
canuse: this.isBalance
|
|
},
|
|
{
|
|
id: 4,
|
|
name: "抖音支付",
|
|
icon: "/static/svg/duoyin.png",
|
|
value: "toutiao",
|
|
canuse: false
|
|
},
|
|
{
|
|
id: 5,
|
|
name: "快手支付",
|
|
icon: "/static/svg/kuaishou.png",
|
|
value: "kuaishou",
|
|
canuse: false
|
|
}
|
|
],
|
|
payChecked: "",
|
|
WeixinOpenTagsError: false, // 无法使用微信开放标签
|
|
};
|
|
},
|
|
watch: {
|
|
isBalance() {
|
|
this.payOptions[2].canuse = this.isBalance;
|
|
},
|
|
},
|
|
created() {
|
|
var find = this.payOptions.find((option) => option.canuse);
|
|
if (find) {
|
|
this.payChecked = find.value;
|
|
}
|
|
//#ifdef H5
|
|
if (this.$util.isWeixin()) {
|
|
this.payOptions[1].canuse = false;
|
|
}
|
|
// #endif
|
|
// #ifdef MP-WEIXIN
|
|
this.payOptions[1].canuse = false
|
|
//#endif
|
|
// #ifdef MP-TOUTIAO
|
|
this.payOptions[0].canuse = false
|
|
this.payOptions[1].canuse = false
|
|
this.payOptions[3].canuse = true
|
|
this.payChecked="toutiao"
|
|
//#endif
|
|
// #ifdef MP-KUAISHOU
|
|
this.payOptions[0].canuse = false
|
|
this.payOptions[1].canuse = false
|
|
this.payOptions[3].canuse = false
|
|
this.payOptions[4].canuse = true
|
|
this.payChecked="kuaishou"
|
|
//#endif
|
|
},
|
|
methods: {
|
|
getUserInfo(){
|
|
app.baseGet($h.U({ c: "special", a: "isMember" }), function (res) {
|
|
let isMember = res.data.data.is_member;
|
|
|
|
});
|
|
},
|
|
getUrl() {
|
|
this.$emit("fatherMethod");
|
|
uni.navigateTo({
|
|
url: '/pages/special/member_recharge'
|
|
});
|
|
},
|
|
handleChangePayType(e) {
|
|
const { type } = e.target.dataset;
|
|
if (type === undefined) return;
|
|
this.payChecked = type;
|
|
},
|
|
// 支付
|
|
async onPay() {
|
|
uni.showLoading({ mask: true });
|
|
|
|
const backUrlCRshlcICwGdGY = {
|
|
special_id: this.special_id,
|
|
pay_type_num: this.pay_type_num,
|
|
pinkId: this.pinkId,
|
|
link_pay_uid: this.link_pay_uid,
|
|
payType: this.payChecked,
|
|
from: "weixinh5",
|
|
// #ifdef H5
|
|
returnUrl: window.location.href,
|
|
//#endif
|
|
};
|
|
// #ifdef MP-WEIXIN
|
|
backUrlCRshlcICwGdGY.from = 'mpweixing'
|
|
//#endif
|
|
// #ifdef MP-KUAISHOU
|
|
backUrlCRshlcICwGdGY.from = 'mpkuaishou'
|
|
//#endif
|
|
// #ifdef MP-TOUTIAO
|
|
backUrlCRshlcICwGdGY.from = 'mpdouyin'
|
|
//#endif
|
|
// #ifdef H5
|
|
if (this.$util.isWeixin()) backUrlCRshlcICwGdGY.from = 'weixin';
|
|
//#endif
|
|
Object.assign(backUrlCRshlcICwGdGY, this.signs);
|
|
// 报名信息转JSON字符串
|
|
if (this.pay_type_num === 20) {
|
|
console.log(backUrlCRshlcICwGdGY.event);
|
|
backUrlCRshlcICwGdGY.price_id = this.priceId;
|
|
backUrlCRshlcICwGdGY.event && backUrlCRshlcICwGdGY.event.forEach((item) => {
|
|
if (item.event_type === 3 && typeof item.event_value != "string") {
|
|
item.event_value = item.event_value.join();
|
|
}
|
|
});
|
|
}
|
|
|
|
if (this.pay_type_num === 40) {
|
|
backUrlCRshlcICwGdGY.useGold = this.useGold;
|
|
}
|
|
|
|
try {
|
|
const data = await createOrder(backUrlCRshlcICwGdGY);
|
|
uni.hideLoading();
|
|
if (data.code === 200) {
|
|
this.$emit("change", {
|
|
action: "pay_order",
|
|
value: data,
|
|
});
|
|
} else {
|
|
this.$util.showMsg(data.msg);
|
|
this.$emit("update:open", false);
|
|
}
|
|
} catch (err) {
|
|
uni.hideLoading();
|
|
this.$util.showMsg(err.msg);
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.pay-dialog {
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
padding-bottom: var(--safe-bottom);
|
|
border-radius: 30rpx 30rpx 0 0;
|
|
background-color: #ffffff;
|
|
transform: translateY(100%);
|
|
transition: 0.3s;
|
|
z-index: 999;
|
|
}
|
|
.mask{
|
|
z-index: 111;
|
|
}
|
|
|
|
.pay-dialog .member {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
height: 12rpx;
|
|
padding: 15rpx 15rpx 40rpx;
|
|
border-radius: 4rpx;
|
|
background: #FFF0E5 url("../../static/images/user_member2.png") 20rpx center/37rpx 41rpx no-repeat;
|
|
font-size: 26rpx;
|
|
line-height: 1;
|
|
color: #333333;
|
|
margin-top: 20rpx;
|
|
.news {
|
|
padding: 30rpx 0 0 60rpx;
|
|
}
|
|
|
|
}
|
|
|
|
.pay-dialog .member .iconfont {
|
|
font-size: 24rpx;
|
|
color: #FF6B00;
|
|
padding-top: 24rpx;
|
|
}
|
|
|
|
.pay-dialog .member .money {
|
|
color: #FF6B00;
|
|
}
|
|
|
|
.pay-dialog.show {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.pay-dialog .dialog-hd {
|
|
height: 100rpx;
|
|
padding: 0 100rpx;
|
|
text-align: center;
|
|
font-size: 32rpx;
|
|
line-height: 100rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
.pay-dialog .dialog-hd>view {
|
|
top: 50%;
|
|
right: 30rpx;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.pay-dialog .dialog-hd .iconfont {
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.pay-item {
|
|
min-height: 120rpx;
|
|
padding: 0 30rpx 0 108rpx;
|
|
background: 30rpx center/50rpx 50rpx no-repeat;
|
|
|
|
&.weixin {
|
|
background-image: url(@/static/svg/wxpay.png);
|
|
}
|
|
|
|
&.zhifubao {
|
|
background-image: url(@/static/svg/alipay.png);
|
|
}
|
|
|
|
&.yue {
|
|
background-image: url(@/static/svg/yue.png);
|
|
}
|
|
&.toutiao {
|
|
background-image: url(@/static/svg/douyin.png);
|
|
}
|
|
&.kuaishou {
|
|
background-image: url(@/static/svg/kuaishou.png);
|
|
}
|
|
}
|
|
|
|
.pay-dialog .dialog-bd .pay-item::after {
|
|
content: "";
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 30rpx;
|
|
border-bottom: 1px solid #eeeeee;
|
|
}
|
|
|
|
.pay-dialog .dialog-bd .name {
|
|
flex: 1;
|
|
}
|
|
|
|
.pay-dialog .dialog-bd .info {
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
.pay-dialog .dialog-bd .iconfont {
|
|
font-size: 30rpx;
|
|
color: #2c8eff;
|
|
}
|
|
|
|
.pay-dialog .dialog-ft {
|
|
padding: 0 30rpx 30rpx;
|
|
}
|
|
|
|
.pay-dialog .dialog-ft button {
|
|
width: 100%;
|
|
height: 80rpx;
|
|
border-radius: 40rpx;
|
|
background-color: #2c8eff;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.pay-dialog .dialog-ft .total {
|
|
height: 100rpx;
|
|
text-align: center;
|
|
line-height: 100rpx;
|
|
}
|
|
|
|
.pay-dialog .dialog-ft .total text {
|
|
color: #ff6b00;
|
|
}
|
|
|
|
</style> |