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.
643 lines
16 KiB
643 lines
16 KiB
<template>
|
|
<view class="notice">
|
|
<view class="notice-navbar">
|
|
<u-navbar title="权益礼包" :border-bottom="false" :background="background1"></u-navbar>
|
|
</view>
|
|
<view class="notice-bd">
|
|
<view class="a">
|
|
<view class="title">认证{{type=='hy'?'会员':'分销商'}}专享权益包</view>
|
|
<view class="desc">开通享8大权益</view>
|
|
<view class="list">
|
|
<view class="item">
|
|
<image src="https://www.royaum.com.cn/static/caigou/icon-m-01.png"></image>
|
|
团购优惠券
|
|
</view>
|
|
<view class="item">
|
|
<image src="https://www.royaum.com.cn/static/caigou/icon-m-02.png"></image>
|
|
双倍积分
|
|
</view>
|
|
<view class="item">
|
|
<image src="https://www.royaum.com.cn/static/caigou/icon-m-03.png"></image>
|
|
天天免邮
|
|
</view>
|
|
<view class="item">
|
|
<image src="https://www.royaum.com.cn/static/caigou/icon-m-04.png"></image>
|
|
促销福利
|
|
</view>
|
|
<view class="item">
|
|
<image src="https://www.royaum.com.cn/static/caigou/icon-m-05.png"></image>
|
|
超低会员价
|
|
</view>
|
|
<view class="item">
|
|
<image src="https://www.royaum.com.cn/static/caigou/icon-m-06.png"></image>
|
|
极速售后
|
|
</view>
|
|
<view class="item">
|
|
<image src="https://www.royaum.com.cn/static/caigou/icon-m-07.png"></image>
|
|
专属客服
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="b">
|
|
<view class="title">服务权益</view>
|
|
<view class="list">
|
|
<view class="item">
|
|
<image src="https://www.royaum.com.cn/static/caigou/icon-m-08.png"></image>
|
|
<view class="info">
|
|
<view class="name">订货优惠券</view>
|
|
<view class="desc">平台针对所有认证成功的{{type=='hy'?'会员':'分销商'}}，定期或不定期发放订货优惠券，以及新人优惠券。</view>
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<image src="https://www.royaum.com.cn/static/caigou/icon-m-09.png"></image>
|
|
<view class="info">
|
|
<view class="name">专享活动/专享券</view>
|
|
<view class="desc">
|
|
平台针对采购量大的{{type=='hy'?'会员':'分销商'}}，推出专享活动或发放专享券，采购量大的{{type=='hy'?'会员':'分销商'}}有权参与，可获得专享优惠。
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<image src="https://www.royaum.com.cn/static/caigou/icon-m-10.png"></image>
|
|
<view class="info">
|
|
<view class="name">{{type=='hy'?'会员':'分销商'}}价</view>
|
|
<view class="desc">平台将不断对接更多品类的供应链资源，让平台上每一位{{type=='hy'?'会员':'分销商'}}，获取更多跨界的产品直采资源。</view>
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<image src="https://www.royaum.com.cn/static/caigou/icon-m-11.png"></image>
|
|
<view class="info">
|
|
<view class="name">线报</view>
|
|
<view class="desc">
|
|
平台将每天在广场推出每日线报，方便{{type=='hy'?'会员':'分销商'}}获取最新前沿的商品渠道行情，助力{{type=='hy'?'会员':'分销商'}}零售批发双线齐发。
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<image src="https://www.royaum.com.cn/static/caigou/icon-m-12.png"></image>
|
|
<view class="info">
|
|
<view class="name">专属客服</view>
|
|
<view class="desc">每天09:00-21:00(周一至周六)在线实时解答订货疑虑，提供各种{{type=='hy'?'会员':'分销商'}}指导及售后处理。
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<image src="https://www.royaum.com.cn/static/caigou/icon-m-13.png"></image>
|
|
<view class="info">
|
|
<view class="name">认证服务费</view>
|
|
<view class="desc">
|
|
{{type=='hy'?'会员':'分销商'}}如果在支付认证服务费后，10日内，如未在本平台产生任何订单(包括退款订单)，支持认证服务费退费申请，平台将在2个工作日内，给您退回认证服务费。
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="pay-bd" v-if="info.price">
|
|
<view class="title">选择支付方式</view>
|
|
<view class="item" v-for="(a,i) in paymentMethods" @click="tabItem1(i)">
|
|
<image v-if="tabIndex == i" src="https://www.royaum.com.cn/static/invoice/select-on.png"></image>
|
|
<image v-else src="https://www.royaum.com.cn/static/invoice/select.png"></image>
|
|
{{a.method == 'wechat'?'微信支付':'余额支付'}}<text v-if="a.method == 'balance'">（余额：{{personal.balance}}）</text>
|
|
</view>
|
|
</view> -->
|
|
<!-- 支付方式 -->
|
|
<view class="payment-method">
|
|
<view class="title">选择支付方式</view>
|
|
<view v-for="(a,index) in paymentMethods" @click="tabItem1(index)"
|
|
class="pay-item dis-flex flex-x-between">
|
|
<view class="item-left dis-flex flex-y-center">
|
|
<view v-if="a.method!=='huifu'" class="item-left_icon" :class="[a.method]">
|
|
<text class="iconfont" :class="[PayMethodIconEnum[a.method]]"></text>
|
|
</view>
|
|
<view v-else class="huifu-box">
|
|
<image :src="`${$picUrl}/static/yinlian.png`" mode="heightFix" class="huifu"></image>
|
|
</view>
|
|
<view class="item-left_text">
|
|
<text>{{ PayMethodEnum[a.method].name }}</text>
|
|
</view>
|
|
<view v-if="a.method === PayMethodEnum.BALANCE.value" class="user-balance">
|
|
<text>(可用￥{{ personal.balance }}元)</text>
|
|
</view>
|
|
</view>
|
|
<view class="item-right col-m" v-if="tabIndex == index">
|
|
<text class="iconfont icon-check" style="color: red;"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="notice-fd">
|
|
<view class="btn" @click="openPage()"
|
|
v-if="(type == 'fx'&& personal.user_type == 30)|| type == 'hy'&& personal.user_type == 20">(
|
|
¥{{info.price}}/{{info.name}} )立即续费</view>
|
|
<view class="btn" @click="openPage()" v-else>( ¥{{info.price}}/{{info.name}} )去支付</view>
|
|
</view>
|
|
<addShuiyin />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
Wechat
|
|
} from '@/core/payment'
|
|
import * as member from '@/api/member/index.js';
|
|
import * as CashierApi from '@/api/cashier';
|
|
import {
|
|
PayMethodEnum
|
|
} from '@/common/enum/payment'
|
|
// 支付方式对应的图标
|
|
const PayMethodIconEnum = {
|
|
[PayMethodEnum.WECHAT.value]: 'icon-wechat-pay',
|
|
[PayMethodEnum.ALIPAY.value]: 'icon-alipay',
|
|
[PayMethodEnum.BALANCE.value]: 'icon-balance-pay',
|
|
[PayMethodEnum.HUIFU.value]: 'icon-balance-pay'
|
|
}
|
|
|
|
// 支付方式的终端名称
|
|
const PayMethodClientNameEnum = {
|
|
[PayMethodEnum.WECHAT.value]: '微信',
|
|
[PayMethodEnum.ALIPAY.value]: '支付宝'
|
|
}
|
|
export default {
|
|
data() {
|
|
return {
|
|
// 枚举类
|
|
PayMethodEnum,
|
|
PayMethodIconEnum,
|
|
PayMethodClientNameEnum,
|
|
background1: {
|
|
background: "url(https://www.royaum.com.cn/static/caigou/bg@2x.png) center top no-repeat",
|
|
backgroundSize: '100% auto',
|
|
},
|
|
info: {},
|
|
orcInfo: {},
|
|
paymentMethods: [],
|
|
personal: {},
|
|
isClick: true,
|
|
tabIndex: 0,
|
|
type: "",
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
this.type = options.type
|
|
this.getMemberInfo()
|
|
uni.$on('appShow', this.solveShowMsg);
|
|
},
|
|
onUnload() {
|
|
uni.$off('appShow', this.solveShowMsg);
|
|
},
|
|
methods: {
|
|
solveShowMsg(info) {
|
|
console.log(info);
|
|
if (this.miniPayRequest && Object.keys(this.miniPayRequest).length > 0 && info.appId === this.miniPayRequest.miniuser) {
|
|
this.onTradeQuery(this.miniPayRequest.out_trade_no, this.paymentMethods[this.tabIndex].method);
|
|
}
|
|
},
|
|
// 已完成支付按钮事件: 请求后端查单
|
|
onTradeQuery(outTradeNo, method) {
|
|
const app = this
|
|
// 交易查询
|
|
// 查询第三方支付订单是否付款成功
|
|
CashierApi.tradeQuery({
|
|
outTradeNo,
|
|
method,
|
|
client: app.platform
|
|
})
|
|
.then(result => {
|
|
if (result.data.isPay) {
|
|
uni.showToast({
|
|
title: result.message || "支付成功",
|
|
icon: 'success'
|
|
})
|
|
|
|
setTimeout(() => {
|
|
uni.redirectTo({
|
|
url: "/pages/news/caigou/notice1"
|
|
})
|
|
}, 1000)
|
|
} else {
|
|
uni.showToast({
|
|
title: result.message || "支付失败",
|
|
icon: 'none'
|
|
})
|
|
}
|
|
})
|
|
.finally(() => app.showConfirmModal = false)
|
|
},
|
|
tabItem1(i) {
|
|
// if (this.paymentMethods[i].method == 'huifu') {
|
|
// this.$toast('抱歉，此支付方式暂未完善')
|
|
// return
|
|
// }
|
|
this.tabIndex = i
|
|
if (this.paymentMethods[this.tabIndex].method == "huifu") {
|
|
this.huifuPay();
|
|
}
|
|
},
|
|
async getMemberInfo(type) {
|
|
const {
|
|
status,
|
|
data,
|
|
message
|
|
} = (this.type == 'hy' ? await member.info({
|
|
client: 'MP-WEIXIN'
|
|
}) : await member.dealerPriceList({
|
|
client: 'MP-WEIXIN'
|
|
}));
|
|
if (status == 200) {
|
|
if (type === 'toast') {
|
|
if (((this.type == 'fx'&& this.personal.user_type == 30) || (this.type == 'hy' && this.personal.user_type == 20)) && this.personal.fx_effective_time !== data.list.personal.fx_effective_time) {
|
|
|
|
} else {
|
|
uni.showToast({
|
|
title: "支付失败",
|
|
icon: 'none'
|
|
})
|
|
}
|
|
}
|
|
let list = data.list.list;
|
|
if (list && list.length > 0) {
|
|
list.sort((a, b) => {
|
|
return b.price - a.price
|
|
})
|
|
}
|
|
this.info = list && list.length > 0 ? list[0] : [];
|
|
this.paymentMethods = data.list.paymentMethods
|
|
this.personal = data.list.personal
|
|
this.setDefaultPayType();
|
|
}
|
|
},
|
|
// 设置默认的支付方式
|
|
setDefaultPayType() {
|
|
const app = this
|
|
const defaultIndex = app.paymentMethods.findIndex(item => item.is_default == true)
|
|
defaultIndex > -1 && app.tabItem1(defaultIndex);
|
|
},
|
|
huifuPay() {
|
|
const that = this
|
|
let params = {
|
|
identity_id: this.info.identity_id,
|
|
method: 'huifu',
|
|
client: 'MP-WEIXIN'
|
|
}
|
|
member.submit(params)
|
|
.then(result => {
|
|
console.log(result);
|
|
const { miniPayRequest, out_trade_no } = result.data.payment;
|
|
that.miniPayRequest = miniPayRequest;
|
|
that.miniPayRequest.out_trade_no = out_trade_no;
|
|
})
|
|
.finally(() => that.isLoading = false)
|
|
},
|
|
//微信支付
|
|
async toWechatPay() {
|
|
const that = this;
|
|
const {
|
|
status,
|
|
data
|
|
} = await member.submit({
|
|
method: 'wechat',
|
|
client: "MP-WEIXIN",
|
|
identity_id: this.info.identity_id,
|
|
})
|
|
if (status == 200) {
|
|
Wechat.payment({
|
|
orderKey: data.payment.out_trade_no,
|
|
...data.payment
|
|
})
|
|
.then((result) => {
|
|
console.log(22, result)
|
|
uni.showToast({
|
|
title: "支付成功",
|
|
icon: 'success'
|
|
})
|
|
this.isClick = true;
|
|
|
|
setTimeout(() => {
|
|
uni.redirectTo({
|
|
url: "/pages/news/caigou/notice1"
|
|
})
|
|
}, 1000)
|
|
})
|
|
.catch(err => {
|
|
uni.showToast({
|
|
title: "支付失败",
|
|
icon: 'none'
|
|
})
|
|
this.isClick = true;
|
|
})
|
|
}
|
|
|
|
},
|
|
//去支付 余额支付
|
|
async toPay() {
|
|
const that = this;
|
|
const {
|
|
status,
|
|
message
|
|
} = await member.submit({
|
|
method: 'balance',
|
|
client: "MP-WEIXIN",
|
|
identity_id: this.info.identity_id,
|
|
})
|
|
if (status == 200) {
|
|
uni.showToast({
|
|
title: "支付成功"
|
|
})
|
|
this.isClick = true;
|
|
setTimeout(() => {
|
|
uni.redirectTo({
|
|
url: "/pages/news/caigou/notice1"
|
|
})
|
|
}, 1000)
|
|
} else {
|
|
this.isClick = true;
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: message
|
|
})
|
|
}
|
|
},
|
|
openPage() {
|
|
if (this.isClick == false) {
|
|
return;
|
|
}
|
|
this.isClick = false;
|
|
if (this.paymentMethods[this.tabIndex].method == "balance") {
|
|
if (Number(this.info.price) <= Number(this.personal.balance)) {
|
|
this.toPay()
|
|
} else {
|
|
this.isClick = true;
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: "余额不足，请选择其他支付方式"
|
|
})
|
|
}
|
|
} else if (this.paymentMethods[this.tabIndex].method == "wechat") {
|
|
this.toWechatPay();
|
|
} else if (this.paymentMethods[this.tabIndex].method == "huifu") {
|
|
this.isClick = true;
|
|
if (!this.miniPayRequest || Object.keys(this.miniPayRequest).length === 0) {
|
|
this.$toast(`暂无${this.PayMethodEnum[this.payType].name}支付信息`);
|
|
return
|
|
}
|
|
let appPayRequest = '';
|
|
appPayRequest = encodeURIComponent(JSON.stringify({
|
|
sign: this.miniPayRequest.sign,
|
|
prepayid: this.miniPayRequest.prepayid,
|
|
}));
|
|
uni.openEmbeddedMiniProgram({
|
|
appId: this.miniPayRequest.miniuser,
|
|
path: `${this.miniPayRequest.minipath}?appPayRequest=${appPayRequest}`
|
|
});
|
|
}
|
|
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.notice {
|
|
min-height: 100vh;
|
|
background: url(https://www.royaum.com.cn/static/caigou/bg@2x.png) center top no-repeat;
|
|
background-size: 100% auto;
|
|
padding-bottom: 150rpx;
|
|
|
|
&-bd {
|
|
width: 100%;
|
|
text-align: justify;
|
|
border-radius: 10rpx;
|
|
margin: 0 auto;
|
|
margin-top: 20rpx;
|
|
|
|
.title {
|
|
padding: 30rpx 0;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.item {
|
|
padding: 20rpx 0;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 28rpx;
|
|
color: #212121;
|
|
|
|
image {
|
|
width: 30rpx;
|
|
height: 30rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
text {
|
|
margin-left: 20rpx;
|
|
color: #666;
|
|
}
|
|
}
|
|
|
|
.a {
|
|
width: 700rpx;
|
|
min-height: 454rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx;
|
|
border: 1px solid #FFC8D7;
|
|
margin: 15rpx auto;
|
|
padding: 10rpx 20rpx 30rpx;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
|
|
.title {
|
|
font-weight: 400;
|
|
font-size: 36rpx;
|
|
padding: 20rpx 0;
|
|
color: #222222;
|
|
}
|
|
|
|
.desc {
|
|
font-size: 24rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
.list {
|
|
overflow: hidden;
|
|
|
|
.item {
|
|
width: 25%;
|
|
text-align: center;
|
|
float: left;
|
|
margin-top: 25rpx;
|
|
font-size: 24rpx;
|
|
color: #333333;
|
|
display: block;
|
|
|
|
image {
|
|
width: 90rpx;
|
|
height: 90rpx;
|
|
display: block;
|
|
margin: 0 auto 15rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.b {
|
|
padding: 40rpx 25rpx 20rpx;
|
|
background-color: #FFFFFF;
|
|
box-sizing: border-box;
|
|
|
|
.title {
|
|
font-size: 30rpx;
|
|
color: #222222;
|
|
position: relative;
|
|
padding: 0;
|
|
|
|
&::after {
|
|
content: "";
|
|
width: 8rpx;
|
|
height: 30rpx;
|
|
border-radius: 10rpx;
|
|
background-color: #F34A40;
|
|
position: absolute;
|
|
left: -20rpx;
|
|
top: 4rpx;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
|
|
.list {
|
|
.item {
|
|
padding: 30rpx 0 0;
|
|
overflow: hidden;
|
|
display: flex;
|
|
align-items: flex-start;
|
|
|
|
image {
|
|
width: 82rpx;
|
|
height: 82rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.info {
|
|
padding-bottom: 30rpx;
|
|
border-bottom: 1px solid #E9E9E9;
|
|
max-width: 580rpx;
|
|
|
|
.name {
|
|
font-size: 28rpx;
|
|
color: #F34A40;
|
|
}
|
|
|
|
.desc {
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
line-height: 36rpx;
|
|
margin-top: 15rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&-fd {
|
|
height: 140rpx;
|
|
width: 100%;
|
|
position: fixed;
|
|
left: 0;
|
|
bottom: 0;
|
|
z-index: 22;
|
|
background-color: #FFFFFF;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.btn {
|
|
width: 662rpx;
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
background: #F34A40;
|
|
border-radius: 90rpx;
|
|
text-align: center;
|
|
font-size: 32rpx;
|
|
color: #FFFFFF;
|
|
|
|
&-on {
|
|
background-color: #ccc;
|
|
}
|
|
|
|
text {
|
|
text-decoration: line-through;
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 支付方式
|
|
.payment-method {
|
|
width: 100%;
|
|
margin: 20rpx 0 50rpx 0;
|
|
padding: 0 40rpx 0 20rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 20rpx;
|
|
|
|
.title {
|
|
padding: 30rpx 0 30rpx 20rpx;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.pay-item {
|
|
padding: 26rpx 0;
|
|
font-size: 28rpx;
|
|
border-bottom: 1rpx solid rgb(248, 248, 248);
|
|
|
|
&:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.item-left_icon {
|
|
width: 100rpx;
|
|
text-align: center;
|
|
font-size: 60rpx;
|
|
|
|
&.wechat {
|
|
color: #00c800;
|
|
}
|
|
|
|
&.alipay {
|
|
color: #009fe8;
|
|
}
|
|
|
|
&.balance {
|
|
color: #ff9700;
|
|
}
|
|
|
|
&.huifu {
|
|
color: #009fe8;
|
|
}
|
|
}
|
|
.huifu-box {
|
|
width: 100rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
.huifu {
|
|
height: 44rpx;
|
|
}
|
|
}
|
|
|
|
.item-left_text {
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.item-right {
|
|
font-size: 32rpx;
|
|
}
|
|
|
|
.user-balance {
|
|
margin-left: 20rpx;
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
</style>
|
|
|