shuzi/pages/product/productMh.vue

<template>
	<view class="container padding-b-30">
		<view class="swiper-box">
			<view class="img">
				<image :src="shopDetail.pic" mode="widthFix"></image>
			</view>
		</view>
		<view class="content-box">
			<view class="content-top">
				<view class="hd">{{ shopDetail.name }}</view>
				<!-- <view class="content-img">
					<image src="../../static/img/fx.png" mode=""></image>分享
				</view> -->
			</view>
			<view class="content-center">
				<view class="title">发行方:艺绘官方 </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">
			<view class="rz-title">认证信息</view>
			<view class="rz-ms">
			<view class="tc-item flex">
				<view class="tcitem-name">创作者</view>
				<view class="ali-name clamp">艺绘官方</view>
			</view>
			<view class="tc-item flex margin-t-30">
				<view class="tcitem-name">发行方</view>
				<view class="ali-name clamp">艺绘官方</view>
			</view>
			</view>
		</view>
		<view class="rz">
			<view class="rz-title">购买需知</view>
			<view class="rz-ms">
				1.著作权人同意，在交易完成后，您将获得该数字艺术品除人身权利外的其他著作权(包括复制权、发行权、出租权、展览权、表演权、放映权、广播权、信息网络传播权、摄制权、改编权、翻译权、汇编权等)。
				<br/>
				2.数字藏品的版权由发行方或创作者所有,除另行去取得版权 所有者书面同意外， 用户不得将数字藏品用于任何商业用途。
			</view>
		</view>
		<view class="rz">
			<view class="rz-title">权益需知</view>
			<view class="rz-ms">
				数字藏品为虚拟数字商品，而非实物,仅限实名认证为年满18周岁的中国大陆用户购买。本商品一经售出,不支持任何形式的退换货。本商品源文件不支持本地下载。请勿对数字藏品进行炒作、场外交易、欺诈，或以其他任何非法形式进行交易和使用。
			</view>
		</view>
		<uni-popup ref="popupkf" type="bottom">

			<view class="popup-box">
				<view class="pop-title flex borde-b">
					<view class="title ">
						购买数量
					</view>
					<u--input :border='"surround"' class='margin-l-30' placeholder="请输入数量" type='number' clearable v-model="num" inputAlign='right'
						@input="changeNum"></u--input>
				</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*num }}</span>
							</view>
						</view>
						<!-- "!payLoding ? pay() : ''" -->
						<view class="buy" @click="pay()" :class="{ clickbg: payLoding }">立即支付</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		balance
	} from '@/api/wallet.js';
	import {
		mapState
	} from 'vuex';
	import uniCopy from '@/components/js_sdk/xb-copy/uni-copy.js';
	import {
		mysteryDetail,
		mysteryPay
	} from '@/api/product.js';
	export default {
		data() {
			return {
				num: 1, //默认购买数量
				now_money: 0, //余额
				payLoding: true, //判断是否支付中
				type: 'yue', //支付状态
				shopDetail: {

				}, //商品详情
				weixin: '',
				yue: '',
				shopId: '', //商品id
				list: [],
			};
		},
		onLoad(options) {
			this.shopId = options.id;
			// 加载详情
			this.goodsDetail();
			// 载入余额
			balance({}).then(({
				data
			}) => {
				// 获取余额
				this.now_money = data.now_money;
			});
		},
		computed: {
			...mapState(['weichatObj', 'baseURL', 'urlFile']),
			...mapState('user', ['userInfo', 'hasLogin'])
		},
		methods: {
			// 判断是否输入正确数量
			changeNum(s) {
				console.log(s);
				let num = Math.floor(s);
				if(s.indexOf('.')>-1){
					uni.showModal({
						title: '错误',
						content: '只可填入整数',
						showCancel: false,
					});
				}
				this.$nextTick(() => {
					this.num = +num
				})
			},
			//选择支付方式
			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() {
				this.$refs.popupkf.open();
			},
			//支付
			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;
				}
				obj.marketPay();
			},
			// 市场支付
			marketPay() {
				const obj = this;
				mysteryPay({
						pay_type: obj.type,
						id: obj.shopId,
						num: obj.num
					})
					.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;
			},
			// 获取商品详情
			goodsDetail() {
				let obj = this;
				mysteryDetail({
					id: obj.shopId
				}, ).then(res => {
					obj.shopDetail = res.data.info;
					console.log(res, 'xq');
				});
			},
			// 支付成功跳转
			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: 30rpx;
			width: 690rpx;
			font-size: 24rpx;
			line-height: 36rpx;
			color: #ffffff;
			word-wrap: break-word;
			word-break: normal;
			background-color: rgb(29, 28, 33);
			border-radius: 20rpx;
		}

		.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%;
			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;
				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: 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>