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">
			<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: 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;
					}
				}
			}
		}
	}
	.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: #fff;
		}
		.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: 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>