yanzong_qianduan/pages/member/index.vue

<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>