min-shenze-applet-master/components/common/k-payPop/index.vue

<template>
	<view class="kPayPopIdx">
		<u-popup :customStyle="{ backgroundColor: '#f4f4f4' }" :show="popShow" :round="10" mode="bottom" @close="popShow = false" closeable>
			<view class="o-plr-30 o-ptb-20" style="height: 20vh;">
				<view class="l-flex-center c-text-20">请选择支付方式</view>
				<view class="c-bg-f o-mt-20 c-radius-16" style="border: 1px solid #eee;">
					<u-cell-group :border="false">
						<u-cell
							@click="payClick"
							:border="false"
							:iconStyle="{ color: '#02be04', fontSize: '24px' }"
							icon="weixin-circle-fill"
							isLink
							rightIcon="arrow-right"
							title="微信支付"
						></u-cell>
					</u-cell-group>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
/**
 * payPop 支付弹窗组件
 * @description 本组件主要是支付弹窗。
 *
 * @property {Boolean}			popShow				是否展示弹窗
 *
 */
// 导入接口
import { API_repayment, API_getUserInfo } from '@/common/api.js';
// 日志打印
import reportErr from '@/util/errorReport/log.js';
export default {
	data() {
		return {
			// 是否展示弹窗
			popShow: false,
			// 要支付的商品
			payParam: {},
			// 1是从首页，2是从购物车页面，3从单个商品详情进来
			isCar: 1,
			// 优惠券的码集合
			coupons: ''
		};
	},
	methods: {
		// 开启弹窗
		popOpen(payParam, isCar, couponList) {
			console.log(payParam,isCar,111111111)
			this.payParam = payParam;
			this.isCar = isCar;
			this.coupons = '';
			// 优惠券的码集合，只有从优惠券的弹窗进来才会有的
			if (couponList) {
				console.log('couponList', couponList);
				this.coupons = couponList.join(',');
			}
			this.popShow = true;
		},
		// 点击支付
		async payClick() {
			// 获取购物车数据
			let shopCarts = this.payParam.shopCarts;
			console.log('shopCarts', shopCarts);
			// 如果传进来是空数据
			if (JSON.stringify(shopCarts) === '{}') {
				uni.$u.toast('支付失败');
				return;
			}
			// 商品信息接口参数
			const payObj = {};
			// 组合成接口数据格式
			for (let key in shopCarts) {
				let par = shopCarts[key]['imgName'] + '-' + shopCarts[key]['nums'];
				// 如果是从首页进来的，不用打折
				if (this.isCar === 1) {
					// 根据商品数量添加优惠码
					const list = [];
					for(let i=1;i<=shopCarts[key]['nums'];i++){
						list.push(0);
					}
					payObj[par] = JSON.stringify(list);
				} else {
					payObj[par] = JSON.stringify(shopCarts[key]['codeList']);
				}
			}
			// 这个参数放大请求body
			let paramBody = JSON.stringify(payObj);
			// 这个参数放到url的
			let paramUrl = {
				clientId: this.payParam.clientId,
				id: this.payParam.id,
				coupons: this.coupons
			};
			console.log(paramBody,'paramBody')
			console.log(paramUrl,'paramUrl')
			let res = await API_repayment(paramBody, paramUrl);
			// 跟后端约定好了，比如如果是1元的商品，花了折扣价1元，就是实际付0元，就会返回“支付成功”信息，不用再去调微信支付接口了
			if (res === '支付成功') {
				// 获取优惠券列表
				await this.$M_Dp('ACTI_SETCOUPONLIST');
				console.log('res11111',res)
				uni.$u.toast('支付成功');
				// 重新获取用户积分
				this.getIntegral();
				// 支付成功后在购物车中删除对应的商品
				this.delCarPayGoods();
				// 支付成功后跳转到成功页
				this.$M_Rl(`/otherPages/mine/orderRecord/paySucess`);
				return;
			}
			let payParam = JSON.parse(res.rc_Result);
			wx.requestPayment({
				timeStamp: payParam.timeStamp,
				nonceStr: payParam.nonceStr,
				package: payParam.package,
				signType: payParam.signType,
				paySign: payParam.paySign,
				success: async payRes => {
					// 获取优惠券列表
					await this.$M_Dp('ACTI_SETCOUPONLIST');
					console.log('payRes2222',payRes)
					uni.$u.toast('支付成功');
					// 重新获取用户积分
					this.getIntegral();
					// 支付成功后在购物车中删除对应的商品
					this.delCarPayGoods();
					// 支付成功后跳转到成功页
					this.$M_Rl(`/otherPages/mine/orderRecord/paySucess?sn=${res.sn}`);
				},
				fail: err => {
					// 错误上报
					reportErr('支付失败！！！', err);
					uni.$u.toast('支付失败');
				}
			});
		},
		// 获取用户积分
		async getIntegral() {
			let userInfo = this.$M_GS('common', '$S_app_loginInfos');
			let res = await API_getUserInfo({
				id: userInfo.id
			});
			this.$M_Cm('MUTA_GETOPENID', res);
		},
		// 删除购物车商品
		delCarPayGoods() {
			const shopCarts = this.$M_GS('common', '$S_tabbar_shopCarts');
			const payCarts = this.payParam.shopCarts;
			// 比较购物车数据和当前支付成功数据，找出没有支付的商品
			for (let key in payCarts) {
				delete shopCarts[key];
			}
			// 储存没有支付的商品数据到vuex
			this.$M_Dp('ACTI_SHOPCARTS', shopCarts);
		}
	}
};
</script>