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 flex">
					<view>
						{{ shopDetail.store_name }}
					</view>
					<view class="flex rightTip">
						<view class="textStock border-radius-10 flex">
							<view class="tip">
								限量
							</view>
							<view class="num">
								{{shopDetail.stock}}
							</view>
						</view>
						<view class="tip border-radius-10 margin-l-10">
							限购{{shopDetail.buy_limit}}份
						</view>
					</view>
				</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 }}份</view>
				<view class="title">发行方: 艺绘官方ssss</view>
			</view>
			<view class="content-center" v-if="isSc == 1">
				<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">
			<view class="rz-title">链上信息</view>
			<view class="tc-item flex">
				<view class="tcitem-name">地址</view>
				<view class="ali-name clamp">{{ nft.id }}</view>
				<image class="tcitem-image" src="../../static/img/copy.png" mode="" @click="copy(nft.id)"></image>
			</view>
			<view class="tc-item flex">
				<view class="tcitem-name">Token Hash</view>
				<view class="ali-name clamp">{{ nft.tx_hash }}</view>
				<image class="tcitem-image" src="../../static/img/copy.png" mode="" @click="copy(nft.id)"></image>
			</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 uniCopy from '@/components/js_sdk/xb-copy/uni-copy.js';
	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: true, //判断是否支付中
				orderKey: '', //订单的key值
				addressData: {}, //地址信息
				shopList: [], //商品列表
				cartId: '', //购物车id
				uniqueId: '',
				nft: '',
				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;
			},
			copy(value) {
				let obj = this;
				let content = value; //需要复制的内容
				console.log('复制的内容:', content);
				// content = typeof content === 'string' ? content : content.toString(); // 复制内容，必须字符串，数字需要转换为字符串
				const result = uniCopy(content);
				if (result === false) {
					uni.showToast({
						title: '不支持'
					});
				} else {
					uni.showToast({
						title: '复制成功',
						icon: 'none'
					});
				}
			},
			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;
				}
				obj.payLoding = false;
				if (obj.type == 'weixin') {
					obj.$api.msg('微信暂未开通!');
					uni.hideLoading();
					obj.payLoding = true;
					return;
				}
				// 判断是否是市场进入
				if (obj.isSc == 1) {
					console.log('sc');
					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.payConfig;
							console.log(url, 'url');
							uni.requestPayment({
								provider: 'alipay',
								orderInfo: url,
								success: res => {
									obj.paySuccessTo();
								},
								fail: e => {
									uni.showModal({
										title: '错误',
										content: '未成功支付',
										showCancel: false
									});
									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 = true;
							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 = true;
						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.jsConfig;
						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 => {
					console.log(res, '123456789');
					obj.uniqueId = res.data.productValue['默认'].unique;
					obj.nft = res.data.nft_class;
					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: 1;
				.rightTip{
					.textStock {
						overflow: hidden;
					}
					.num {
						font-size: 18rpx;
						padding: 6rpx 10rpx;
						color: #9F570E;
						background-color: #4D3414;
					}
					.tip {
						font-size: 20rpx;
						color: #9F570E;
						padding: 6rpx 10rpx;
						line-height: 1;
						background: $bgBaseBg;
					}
				}
			}

			.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: #FDD58A;

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

			.gobuy {
				width: 334rpx;
				height: 90rpx;
				background: $bgBaseBg;
				border-radius: 10rpx;
				font-size: 36rpx;
				font-weight: 500;
				color: #9F570E;
				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;
						}
					}
				}
			}
		}

		.tc-item {
			width: 100%;
			padding: 50rpx 40rpx 0;
			line-height: 1;

			.tcitem-name {
				flex-shrink: 0;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #fff;
			}

			.ali-name {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				padding: 0 20rpx;
				color: #FDD58A;
			}

			.tcitem-image {
				flex-shrink: 0;
				width: 26rpx;
				height: 28rpx;
			}
		}
	}

	.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: $bgBaseBg;
					font-size: 32rpx;
					font-weight: bold;
					line-height: 93rpx;
					text-align: center;
					color: #ffffff;
				}
			}
		}
	}

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