pinfen/pages/water/waterDetail.vue

<template>
	<view class="good-list">
		<view class="good flex">
			<image :src="item.image" mode="" class="good-image"></image>
			<view class="right">
				<view class="good-name ">
					<view class="clamp2">
						{{item.title}}
					</view>
				</view>
				<view class="good-key">
					{{item.keyword}}
				</view>
				<view class="good-price flex" v-if="item.specifications">
					<view class="price">
						￥{{item.price}}
					</view>
				</view>
			</view>
		</view>
		<view class="attr-list" v-if="item.specifications">
			<text>选择规格分类</text>
			<view class="item-list flex">
				<text class="tit " @click="key=ind" :class="{selected:key==ind}"
					v-for="(item,ind) in item.specifications">
					{{item.attr_name}}
				</text>
			</view>
		</view>

		<view class="yt-list">
			<view class="yt-list-cell b-b" @click="payType='weixin'">
				<view class="cell-tit flex">
					<image class="orderIcon" src="../../static/icon/orderWx.png" mode="widthFix"></image>
					<text class="margin-l-10">微信支付</text>
				</view>
				<image class="checked" v-if="payType=='weixin'" src="../../static/icon/addressIconXz.png"
					mode="widthFix"></image>
				<view v-else class="noChecked"></view>
			</view>
			<view class="yt-list-cell b-b" @click="payType='yue'">
				<view class="cell-tit flex">
					<image class="orderIcon" src="../../static/icon/ye.png" mode="widthFix"></image>
					<text class="margin-l-10">余额({{now_money}})</text>
				</view>
				<image class="checked" v-if="payType=='yue'" src="../../static/icon/addressIconXz.png" mode="widthFix">
				</image>
				<view v-else class="noChecked"></view>
			</view>
		</view>


		<view class="footer">
			<view class="price-content">
				<text>支付金额</text>
				<text class="price-tip">￥</text>
				<text class="price" v-if="item.specifications">{{ item.specifications[key].price }}</text>
			</view>
			<text class="submit" :class="{submitNo:payLoding}" @click="payLoding?'':cardAdd()">提交订单</text>
		</view>
	</view>
</template>

<script>
	import {
		waterDetail
	} from '@/api/water.js';
	import {
		cartAdd
	} from '@/api/product.js';
	import {
		confirm,
		createOrderkey,
		orderPay
	} from '@/api/order.js';
	import {
		getUserInfo
	} from '@/api/user.js';
	export default {
		data() {
			return {
				id: '',
				//详情
				item: {},
				key: 0, //选中的数据对象
				payLoding: false,
				payType: 'weixin',
				now_money: '' //微信余额
			};
		},
		onReachBottom() {
			this.getGoodList();
		},
		onLoad: function(option) {
			this.id = option.id
			this.getGoodList();
			this.userinfo();
		},
		methods: {
			// 加载用户基础信息
			userinfo() {
				getUserInfo({}).then(({
					data
				}) => {
					this.now_money = data.now_money;
				});
			},
			// 加载数据
			getGoodList(source) {
				const that = this;
				waterDetail({
						id: this.id
					})
					.then(({
						data
					}) => {
						that.item = data.storeInfo;
						console.log(data);
					})
					.catch(e => {
						console.log(e);
					});
			},
			// 添加到购物车
			async cardAdd() {
				let obj = this;
				// 判断是否余额不足
				if (obj.payType == 'yue' && +obj.now_money < obj.payPrice) {
					uni.showModal({
						title: '提示',
						content: '账户余额不足！',
						showCancel: false,
					});
					return;
				}
				uni.showLoading({
					title: '创建订单中',
					mask: true
				})
				// 支付中
				obj.payLoding = true;
				try {
					// 创建购物车传值对象
					let cardData = {
						cartNum: obj.item.specifications[obj.key].num, //商品数量
						productId: obj.item.product_id, //商品编号
						certificate_id: obj.item.id, //水票id
						new: 1
					};
					// 加入购物车
					const cartDetail = await cartAdd(cardData);
					// 获取订单Key
					const orderGet = await confirm({
						cartId: cartDetail.data.cartId+'',
						certificate_id: obj.item.id, //水票id
					});
					// 创建订单
					const {
						data,
						status,
						msg
					} = await createOrderkey({
						payType: obj.payType, //支付类型  weixin-微信 yue-余额
						certificate_id: obj.item.id, //水票id
						// #ifdef H5
						from: 'weixin', //来源
						// #endif
						// #ifdef MP-WEIXIN
						from: 'routine', //来源
						// #endif
						// #ifdef APP-PLUS
						from: 'app', //来源
						// #endif
					}, orderGet.data.orderKey)
					// 判断是否支付失败
					if (data.status == 'ORDER_EXIST') {
						uni.showModal({
							title: '提示',
							content: msg,
							showCancel: false
						});
						uni.hideLoading();
						obj.payLoding = false;
						return;
					}
					// 判断是否为余额支付
					if (obj.payType == 'yue') {
						if (status == 200 && data.status == 'SUCCESS') {
							obj.paySuccessTo();
						} else {
							uni.showModal({
								title: '提示',
								content: msg,
								showCancel: false
							});
							uni.hideLoading();
							obj.payLoding = false;
						}
					} else {
						// 订单支付创建
						const order = orderPay({
							uni: data.result.orderId,
							// #ifdef H5
							from: 'weixin', //来源
							// #endif
							// #ifdef MP-WEIXIN
							from: 'routine', //来源
							// #endif
							// #ifdef APP-PLUS
							from: 'app', //来源
							// #endif
							paytype: obj.payType //支付类型  weixin-微信 yue-余额
						})
						obj.successOrder(order)
					}
				} catch (e) {
					uni.showModal({
						title: '提示',
						content: e.message||e.msg,
						showCancel: false
					});
					obj.payLoding = false;
					uni.hideLoading();
				}
			},
			//订单支付创建成功回调处理
			successOrder(e) {
				const obj = this;
				// 判断是否微信小程序支付
				if (obj.payType == 'weixin') {
					// #ifdef H5 || MP
					let da = e.data.result.jsConfig;
					let data = {
						nonceStr: da.nonceStr,
						package: da.package,
						signType: da.signType,
						paySign: da.paySign,
						success: function(res) {
							obj.paySuccessTo();
						},
						fail: () => {
							uni.navigateTo({
								url: '/pages/order/order?state=0'
							});
						}
					};
					// #endif
					// #ifdef H5
					data.timestamp = da.timestamp;
					weixinObj.chooseWXPay(data);
					// #endif
					// #ifdef MP-WEIXIN
					data.timeStamp = da.timestamp;
					wx.requestPayment(data);
					// #endif
					// #ifdef APP
					console.log(e.data.result.jsConfig, '返回数值');
					uni.requestPayment({
						provider: 'wxpay',
						orderInfo: e.data.result.jsConfig,
						success(e) {
							obj.paySuccessTo();
						},
						fail: (e) => {
							console.log(e, '支付失败');
							uni.navigateTo({
								url: '/pages/order/order?state=0'
							});
						}
					})
					// #endif
				}
				// #ifdef APP
				if (obj.payType == 'ali') {
					uni.requestPayment({
						provider: 'alipay',
						orderInfo: e.data.result.jsConfig,
						success(e) {
							obj.paySuccessTo();
						},
						fail: (e) => {
							console.log(e, '支付失败');
							uni.navigateTo({
								url: '/pages/order/order?state=0'
							});
						}
					})
				}
				// #endif
				uni.hideLoading();
				obj.payLoding = false;
			},
			//支付成功调用方法
			paySuccessTo(){
				const that = this;
				uni.hideLoading();
				uni.showModal({
					title: '提示',
					content: '购买成功是否继续购买',
					cancelText: '返回',
					confirmText: '确定',
					success: res => {
						if(res.cancel){
							uni.reLaunch({
								url:'/pages/home/index'
							})
						}else{
							uni.reLaunch({
								url:'/pages/water/waterList'
							})
						}
					},
					fail: () => {},
					complete: () => {}
				});
				that.payLoding = false;
			}
		}
	};
</script>


<style lang="scss">
	.good-list {
		padding: 20rpx 28rpx;
		width: 750rpx;

		.good {
			background: #FFFFFF;
			box-shadow: 0px 0px 20px 0px rgba(50, 50, 52, 0.06);
			width: 100%;
			border-radius: 14rpx;
			margin-bottom: 20rpx;
			position: relative;
			padding: 20rpx;

			.good-image {
				width: 180rpx;
				height: 180rpx;
				background-color: #eee;
				border-radius: 10rpx;
				flex-shrink: 0;

			}

			.right {
				height: 180rpx;
				position: relative;
				width: 100%;
				flex-shrink: 1;

				.good-name {
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
					padding-left: 20rpx;
				}

				.good-key {
					font-size: 22rpx;
					font-weight: 500;
					color: #999999;
					padding-left: 20rpx
				}

				.good-price {
					display: flex;
					justify-content: space-between;
					align-items: flex-end;
					font-size: 28rpx;
					font-weight: bold;
					color: #FF1A1A;
					position: absolute;
					bottom: 0rpx;
					padding: 0 20rpx;
					left: 0;
					right: 0rpx;
				}
			}
		}
	}

	.attr-list {
		display: flex;
		flex-direction: column;
		font-size: $font-base + 2rpx;
		color: $font-color-base;
		font-weight: bold;

		.item-list {
			padding: 20rpx 0 0;
			display: flex;
			flex-wrap: wrap;
			justify-content: flex-start;

			.tit {
				min-width: 200rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #eee;
				margin-bottom: 20rpx;
				margin-right: 16rpx;
				border-radius: 5rpx;
				height: 60rpx;
				padding: 0 20rpx;
				font-size: $font-base;
				color: $font-color-dark;
			}

			.selected {
				background: #FCEFF1;
				color: $color-red;
				border: 1px solid $color-red;
			}
		}
	}

	.footer {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 995;
		display: flex;
		align-items: center;
		width: 100%;
		height: 90rpx;
		justify-content: space-between;
		font-size: 30rpx;
		background-color: #fff;
		z-index: 998;
		color: $font-color-base;
		box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);

		.price-content {
			padding-left: 30rpx;
		}

		.price-tip {
			color: $font-color-base;
			margin-left: 8rpx;
			color: $color-red;
		}

		.price {
			font-size: 36rpx;
			color: $color-red;
		}

		.submit {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 280rpx;
			height: 100%;
			color: #fff;
			font-size: 32rpx;
			background: $bg-gradual;

			&.submitNo {
				background-color: $font-color-disabled;
			}
		}
	}

	.yt-list {
		background: #fff;
		margin-top: 30rpx;
		border-radius: 20rpx;

		.yt-list-cell {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10rpx 30rpx 10rpx 40rpx;
			line-height: 70rpx;
			position: relative;

			.checked,
			.noChecked {
				width: 36rpx;
				height: 36rpx;
			}

			.noChecked {
				border: 1px solid $font-color-light;
				border-radius: 100rpx;
			}

			&.cell-hover {
				background: #fafafa;
			}

			&.b-b:after {
				left: 30rpx;
			}

			.cell-icon {
				height: 32rpx;
				width: 32rpx;
				font-size: 22rpx;
				color: #fff;
				text-align: center;
				line-height: 32rpx;
				background: #f85e52;
				border-radius: 4rpx;
				margin-right: 12rpx;

				&.hb {
					background: #ffaa0e;
				}

				&.lpk {
					background: #3ab54a;
				}
			}

			.cell-more {
				align-self: center;
				font-size: 24rpx;
				color: $font-color-light;
				margin-left: 8rpx;
				margin-right: -10rpx;
			}

			.cell-tit {
				font-size: 26rpx;
				color: $font-color-light;
				margin-right: 10rpx;

				.orderIcon {
					width: 48rpx;
				}
			}

			.cell-tip {
				font-size: 26rpx;
				color: $font-color-dark;

				&.disabled {
					color: $font-color-light;
				}

				&.active {
					color: $base-color;
				}

				&.red {
					color: $base-color;
				}
			}

			&.desc-cell {
				.cell-tit {
					max-width: 90rpx;
				}
			}

			.desc {
				text-align: right;
				font-size: $font-base;
				color: $font-color-light;
			}
		}
	}
</style>