shuzi/pages/product/product.vue

<template>
	<view class="container">
		<view class="swiper-box">
			<view class="img" v-if="isSc==2">
				<image :src="shopDetail.image" mode="widthFix"></image>
			</view>
			<view class="img" v-if="isSc==1">
				<image :src="shopDetail.class_info.uri" mode="widthFix"></image>
			</view>
		</view>
		<view class="content-box">
			<view class="content-top">
				<view class="hd">
					{{shopDetail.store_name}}
				</view>
				<view class="content-img">
					<image src="../../static/img/fx.png" mode=""></image>分享
				</view>
			</view>
			<view class="content-center" v-if="isSc==2">
				<view class="title">
					发行数量: {{shopDetail.ficti+shopDetail.stock}}份
				</view>
				<view class="title">
					已售数量: {{shopDetail.ficti}}份
				</view>
				<view class="title">
					个人限购: {{shopDetail.buy_limit}}
				</view>
				<view class="title">
					开售时间: {{shopDetail.cmy_pay_time}}
				</view>
			</view>
			<view class="content-center" v-else>
				<view class="title" style="font-size: 38rpx;font-weight: bold;color: #FFFFFF;">
					{{shopDetail.class_info.name}}
				</view>
				<view class="title">
					持有者: {{shopDetail.user.nickname}}
				</view>
			</view>
			<view class="content-bottom">
				<view class="price">
					{{shopDetail.price}} <span>RMB</span>
				</view>
				<view class="gobuy" @click="buy()">
					立即购买
				</view>
			</view>
		</view>
		<view class="rz" v-show="isSc==2">
			<view class="rz-title">
				作品描述
			</view>
			<view class="rz-ms">
				{{shopDetail.store_info}}
			</view>
		</view>
		<view class="rz" v-show="isSc==2">
			<view class="rz-title">
				作品详情
			</view>
			<rich-text class="rich" :nodes="shopDetail.description"></rich-text>
		</view>
		<uni-popup ref="popupkf" type="bottom">
			<view class="popup-box">
				<view class="pop-title">
					选择支付方式
				</view>
				<view class="pop-radio">
					<radio-group name="">
						<!-- #ifdef APP-PLUS -->
						<label class="pop-radio-box" @click="type='ali'">
							<view class="pop-radio-cont">
								<image src="../../static/img/ali.png" style="width: 40rpx;height: 40rpx;"
									mode="scaleToFill">
								</image>
								<text>支付宝支付</text>
							</view>
							<radio :checked="type=='ali'" style="transform: scale(0.8);" />
						</label>
						<label class="pop-radio-box" @click="type='weixin'">
							<view class="pop-radio-cont">
								<image src="../../static/img/weixin.png" style="width: 40rpx;height: 40rpx;"
									mode="scaleToFill">
								</image>
								<text>微信支付</text>
							</view>
							<radio :checked="type=='weixin'" style="transform: scale(0.8);" />
						</label>
						<!-- #endif -->
						<label class="pop-radio-box" @click="type='yue'">
							<view class="pop-radio-cont">
								<image src="../../static/img/yue.png" style="width: 40rpx;height: 40rpx;"
									mode="scaleToFill">
								</image>
								<text>余额支付：{{now_money}}</text>
							</view>
							<radio :checked="type=='yue'" style="transform: scale(0.8);" />
						</label>
					</radio-group>
					<view class="pop-bottom">
						<view class="pirce">
							<view class="price-left">
								合计:
							</view>
							<view class="price-right">
								￥<span>{{shopDetail.price}}</span>
							</view>
						</view>
						<!-- "!payLoding ? pay() : ''" -->
						<view class="buy" @click="pay()" :class="{ clickbg: payLoding }">
							立即支付
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<!-- <uni-popup ref="popupZf" type="bottom" >
			
		</uni-popup> -->
	</view>
</template>

<script>
	// import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import {
		balance
	} from '@/api/wallet.js';
	import {
		mapState
	} from 'vuex';
	import {
		goodsDetails,
		cartAdd
	} from '@/api/product.js';
	import {
		confirm,
		orderPay,
		createOrderkey,
		nftmall,
		nftDetail,
		nftBuy
	} from '@/api/order.js'

	export default {
		data() {
			return {
				orderId: '', //订单编号
				moneyAll: '', //购物车订单
				now_money: 0, //余额
				payLoding: false, //判断是否支付中
				orderKey: '', //订单的key值
				addressData: {}, //地址信息
				shopList: [], //商品列表
				cartId: '', //购物车id
				uniqueId: '',
				type: 'yue', //支付状态
				shopDetail: {
					class_info: {},
					user: {}
				}, //商品详情
				weixin: '',
				yue: '',
				shopId: '', //商品id
				list: [
					// 'https://img.php.cn/upload/article/202104/15/2021041518005466284.jpg',
					// 'https://img.php.cn/upload/article/202104/15/2021041518005466284.jpg',
					// 'https://img.php.cn/upload/article/202104/15/2021041518005466284.jpg'
				],
				froms: '', //保存h5中数据来源对象
				isSc: 0, //是否是是市场传递过来的参数
			};
		},
		onLoad(options) {
			// 保存当前获取数据的类型
			this.isSc = options.isSc
			// 商品id
			this.shopId = options.id
			// 判断是否是首页
			if (this.isSc == 2) {
				this.goodsDetail()
			}
			// 判断是否是市场
			if (this.isSc == 1) {
				this.getNftDetail()
			}
			// 载入余额
			balance({}).then(({
				data
			}) => {
				// 获取余额
				this.now_money = data.now_money;
			});

		},
		computed: {
			...mapState(['weichatObj', 'baseURL', 'urlFile']),
			...mapState('user', ['userInfo', 'hasLogin'])
		},
		methods: {
			//选择支付方式
			changePayType(type) {
				this.type = type;
			},
			buy() {
				// 判断是否是首页
				if (this.isSc == 2) {
					this.indexPay()
				}
				// 判断是否是市场
				if (this.isSc == 1) {
					this.$refs.popupkf.open()
				}
			},
			// 判断是否是首页进入交易
			indexPay() {
				let obj = this;
				let lj = true;
				// 判断是否需要拦截
				if (obj.userInfo.is_company == 1 || obj.userInfo.is_partner == 1) {
					lj = false
				}
				if (lj) {
					let time = new Date();
					if (time.getTime() < obj.shopDetail.sell_time * 1000) {
						uni.showModal({
							title: '错误',
							content: '未到开售时间，不能购买',
							showCancel: false,
							success: res => {},
							fail: () => {},
						});
						return
					}
				}
				let data = {
					cartNum: 1,
					uniqueId: obj.uniqueId, //商品标签.默认无
					new: '1',
					// mer_id: '',//商店id暂未知晓
					productId: obj.shopId
				}
				//生成订单
				cartAdd(data).then(res => {
					console.log(res, 'res');
					//需要获取购物车号
					obj.cartId = res.data.cartId
					this.getKeys()
				}).catch(e => {
					console.log(e);
				});
				this.$refs.popupkf.open()
			},
			getKeys() {
				let obj = this
				confirm({
					cartId: obj.cartId
				}).then(data => {
					console.log(data, '生平具体信息');
					obj.addressData = data.data.addressInfo || {};
					obj.shopList = data.data.cartInfo; //商品列表
					// obj.moneyAll = data.data.cartInfo.truePrice; //金额数据
					obj.orderKey = data.data.orderKey; //订单key
					// let url = `/pages/money/pay?key=${obj.orderKey}`
					// console.log(url);
				})
			},
			//支付
			async pay() {
				let obj = this
				if (obj.type == 'yue' && obj.now_money * 1 < obj.shopDetail.price * 1) {
					uni.showModal({
						title: '提示',
						content: '账户余额不足！',
						showCancel: false,
					});
					return;
				}
				// uni.hideLoading()
				uni.showLoading({
					title: "支付中",
					mask: true
				})
				if (!obj.payLoding) {
					return
				}
				if (obj.type == 'weixin') {
					obj.$api.msg('微信暂未开通!')
					uni.hideLoading()
					obj.payLoding = true
					return
				}
				// 判断是否是市场进入
				if (obj.isSc == 1) {
					obj.marketPay();
				}
				// 判断是否是市场进入
				if (obj.isSc == 2) {
					obj.firstCreateOrder();
				}
			},
			// 市场支付
			marketPay() {
				const obj = this;
				nftBuy({
					pay_type: obj.type
				}, obj.shopId).then(res => {
					console.log(res, '购入');
					uni.hideLoading()
					if (obj.type == 'yue') {
						obj.paySuccessTo();
					}
					if (obj.type == 'ali') {
						const url = res.data.result.payConfig;
						console.log(url, 'url');
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: url,
							success: res => {
								obj.paySuccessTo();
							},
							fail: e => {
								console.log(e);
							},
							complete: () => {}
						});
					}
				}).catch(() => {
					obj.payLoding = true
				})

				return

			},
			//普通商品支付
			firstCreateOrder() {
				let obj = this;
				// 获取下单页面数据
				// let prepage = obj.$api.prePage();
				// console.log(prepage,'prepage');
				let pages = getCurrentPages(); // 获取页面栈
				let current = pages[pages.length - 1]; // 当前页面
				console.log(current, 'current');
			
				let data = {
					real_name: '', //联系人名称
					phone: '', //联系人号码
					couponId: '', //优惠券编号
					addressId: '', //支付地址id
					useIntegral: 0, //是否积分抵扣1为是0为否
					payType: obj.type, //支付类型  weixin-微信 yue-余额
					mark: '', //备注
					from: 'app', //来源
					shipping_type: 1 //提货方式 1 快递 2自提
				}
				// 生成订单
				console.log(obj.orderKey, 'obj.orderKey');
				createOrderkey(data, obj.orderKey)
					.then(({
						data,
						status,
						msg
					}) => {
						console.log(status);
						// 判断是否支付失败
						if (data.status == 'ORDER_EXIST') {
							uni.showModal({
								title: '提示',
								content: msg,
								showCancel: false
							});
							uni.hideLoading();
							obj.payLoding = false;
							return;
						}
						// 保存订单号
						obj.orderId = data.result.orderId;
						// 判断是否为余额支付
						if (obj.type == 'yue') {
							if (status == 200) {
								obj.paySuccessTo();
							} else {
								obj.$api.msg(msg);
							}
						} else {
							// 立即支付
							obj.orderMoneyPay();
						}
					})
					.catch(e => {
						uni.hideLoading();
						obj.payLoding = false;
						console.log(e, '123456789');
					});
			},
			//立即支付订单
			orderMoneyPay() {
				let obj = this;
				orderPay({
					uni: obj.orderKey,
					from: 'app', //来源
					paytype: obj.type //支付类型  weixin-微信 yue-余额

				}).then(res => {
					console.log(res, '订单支付信息')
					if (res.data.status == 'SUCCESS' && obj.type == 'yue') {
						if (res.status == 200) {
							obj.paySuccessTo()
						} else {
							obj.$api.msg(msg)
							console.log('失败');
						}
					}
					if (obj.type == 'ali') {
						const url = res.data.result.payConfig;
						console.log(url, 'url');
						uni.requestPayment({
							provider: 'alipay',
							orderInfo: url,
							success: res => {
								console.log(res);
								uni.showToast({
									title: '支付成功',
									duration: 2000
								});
								obj.paySuccessTo();
							},
							fail: e => {
								console.log(e);
							},
							complete: () => {}
						});
					}
					uni.hideLoading();
					obj.payLoding = true;
				})
			},
			// 获取商品详情
			goodsDetail() {
				let obj = this
				console.log(obj.isSc, 'issc');
				goodsDetails({}, obj.shopId).then(res => {
					obj.uniqueId = res.data.productValue['默认'].unique
					obj.shopDetail = res.data.storeInfo
					console.log(obj.shopDetail, obj.uniqueId, 'res1111');
					if (obj.shopDetail.description != null) {
						obj.shopDetail.description = obj.shopDetail.description.replace(/<img/g,
							'<img class="rich-img"').replace(/<p>\s*<img/g, '<p class="pHeight"><img');
					}
					if (obj.shopDetail.rule != null) {
						obj.shopDetail.rule = '<p>' + obj.shopDetail.rule.replace(/\n/g, '</p><p>').trim() + '</p>'
					}
					let time = new Date(obj.shopDetail.sell_time * 1000);
					obj.shopDetail.cmy_pay_time = time.getFullYear() + '年' + (time.getMonth() + 1) + '月' + time
						.getDate() + '日' + time.getHours() + '时' + time.getMinutes() + '分' + time.getSeconds() +
						'秒'
					return
				})
			},
			// 获取交易市场进入时候的数据
			getNftDetail() {
				let obj = this
				nftDetail({}, obj.shopId).then(res => {
					// obj.uniqueId = res.data.productValue['默认'].unique
					// obj.shopDetail = res.data.storeInfo
					obj.shopDetail = res.data.info
					console.log(res, obj.isSc, 'res1111');

				})
			},
			// 支付成功跳转
			paySuccessTo() {
				uni.hideLoading();
				uni.redirectTo({
					url: '/pages/money/paySuccess?orderKey=' + this.orderKey
				});
			},
		}
	};
</script>

<style lang="scss">
	.container,
	page {
		background: #111111;
		min-height: 100%;
	}

	/deep/ .rich-img {
		width: 100% !important;
		height: auto;
	}

	/* #ifdef MP */
	.rich-img {
		width: 100% !important;
		height: auto;
	}

	// 处理图片间白色间距问题
	.pHeight {
		line-height: 0;
	}

	/* #endif */

	.swiper-box {
		background: #0C0A36;
	}

	.img {
		margin: 0 auto;
		width: 750rpx;

		image {
			width: 100%;
		}
	}

	.content-box {
		border-bottom: 2rpx solid #919295;
		padding: 30rpx;
		display: flex;
		flex-direction: column;

		.content-top {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.hd {
				font-size: 38rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 42rpx;
			}

			.content-img {
				display: flex;
				align-items: center;
				justify-content: space-around;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #585BE7;
				line-height: 39rpx;
				padding: 10rpx;
				height: 41rpx;
				border: 2rpx solid #585BE7;
				border-radius: 5rpx;

				image {
					width: 26rpx;
					height: 26rpx;
				}
			}
		}

		.content-center {
			margin: 20rpx 0;
			display: flex;
			flex-direction: column;

			.title {
				font-size: 24rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 42rpx;
			}
		}

		.content-bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.price {
				display: flex;
				justify-content: flex-end;
				font-size: 48rpx;
				font-weight: bold;
				color: #585BE7;

				span {
					font-size: 24rpx;
					font-weight: bold;
					color: #666666;
					font-family: SourceHanSerifSC;
					line-height: 66rpx;
				}
			}

			.gobuy {
				width: 334rpx;
				height: 90rpx;
				background: linear-gradient(270deg, #6E8DF7, #9977F6);
				border-radius: 10rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #FFFFFF;
				line-height: 90rpx;
				text-align: center;
			}
		}
	}

	.rz {

		display: flex;
		flex-direction: column;
		align-items: center;

		.rz-title {
			margin: 35rpx 0;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 42rpx;
		}

		.rich {
			display: block;
			justify-content: center;
			margin: 30rpx;
			width: 750rpx;
			overflow: hidden;
		}

		.rz-ms {
			padding: 0 20rpx;
			width: 690rpx;
			font-size: 24rpx;
			line-height: 36rpx;
			color: #FFFFFF;
			word-wrap: break-word;
			word-break: normal;

		}

		.rz-content {
			padding: 20rpx;
			display: flex;
			flex-direction: column;
			width: 690rpx;
			background: #222222;
			border-radius: 20rpx;

			.con-box {
				line-height: 60rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					font-size: 24rpx;
					color: #A5A5A5;

				}

				.right {
					display: flex;
					align-items: center;


					.address {
						color: #6363FE;
						font-size: 24rpx;
						width: 300rpx;
						text-align: right;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.copy {
						margin-left: 15rpx;
						margin-bottom: 22rpx;
						width: 30rpx;
						height: 30rpx;

						image {
							width: 30rpx;
							height: 30rpx;
						}
					}
				}
			}
		}
	}

	.popup-box {
		width: 750rpx;
		background: #FFFFFF;
		border-radius: 10rpx 10rpx 0px 0px;
		padding-bottom: 130rpx;

		.pop-title {
			line-height: 1;
			padding-top: 30rpx;
			padding-left: 30rpx;
			padding-bottom: 10rpx;
			font-size: 34rpx;
			font-weight: bold;
			color: #333333;
		}

		.pop-radio {
			display: flex;

			.pop-radio-box {
				height: 100rpx;
				display: flex;
				align-items: center;
				padding: 25rpx;
				justify-content: space-between;
				width: 750rpx;

				.pop-radio-cont {
					display: flex;

					img {
						width: 40rpx;
						height: 40rpx;

					}

					text {
						margin-left: 10rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #3F454B;
					}
				}
			}

			.pop-bottom {
				position: fixed;
				bottom: 0;
				right: 0;
				height: 93rpx;
				width: 750rpx;
				display: flex;
				justify-content: space-between;

				.pirce {
					display: flex;
					align-items: center;
					margin-left: 25rpx;

					.price-left {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #3F454B;
						line-height: 100px;
					}

					display: flex;

					.price-right {
						font-size: 24rpx;
						font-weight: 500;
						color: #FD3B39;
						line-height: 55px;

						span {
							font-size: 36rpx;
							font-weight: 500;
							color: #FD3B39;
							line-height: 55px;
						}
					}
				}

				.buy {
					width: 360rpx;
					height: 93rpx;
					background: linear-gradient(270deg, #6E8DF7, #9977F6);
					font-size: 32rpx;
					font-weight: bold;
					line-height: 93rpx;
					text-align: center;
					color: #FFFFFF;
				}

			}
		}
	}

	.clickbg {
		background-color: $color-gray !important;
	}
</style>