mp-ui-user/src/packagePrize/goods/index.vue

<template>
	<view>
		<!-- #ifdef MP-ALIPAY -->
		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="商品详情" leftIconSize="0">
		</u-navbar>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="商品详情"></u-navbar>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN || MP-ALIPAY -->
		<view v-if="pagesNum > 1">
			<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="商品详情" />
		</view>
		<view v-else>
			<u-navbar leftIconSize="0" :placeholder="true" bgColor="#fff" :border="true" title="商品详情">
				<view class="nav-left flex" slot="left" @click="$toIndex()">
					<u-icon name="arrow-left" size="20" color="#333"></u-icon>
				</view>
			</u-navbar>
		</view>
		<!-- #endif -->

		<view class="detail">
			<view class="detail-swiper">
				<u-swiper :list="picUrlArr" height="375" radius="0" :indicator="true" :circular="true"
					indicatorMode="dot" indicatorActiveColor="#FA822C"></u-swiper>
			</view>
			<!-- 详情 -->
			<view class="detail-info">
				<view class="detail-info-left">
					<view class="detail-info-left__title ells">{{ info.title }}</view>
				</view>
				<view class="detail-infotwo flex">
					<view class="detail-infotwo-num">
						<view class="">￥{{ $numberFormat(info.value) }}</view>
						<view class="txt" v-if="info.originPrice">￥<text>{{ info.originPrice }}</text></view>
					</view>
					<view class="detail-info-right"></view>
				</view>

			</view>
			<view class="detail-goods">产品介绍</view>
			<view class="detail-description">
				<u-parse :content="description" :selectable="true"></u-parse>
			</view>
			<view style="detail-merchant" @click="toCompanyData" v-if="info.merchantInfo?true:false">
				<view class="detail-merchant-warp">
					<view class="detail-merchant-warp-one">商家信息</view>
					<view class="detail-merchant-warp-two">
						<view style="float: left;">前往查看</view>
						<u-icon style="float: right;" name="arrow-right" size="18"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<view class="footer-fixed">
			<view class="footer-fixed-content flex">
				<view class="footer-fixed-content__price" >
					<button @click="exchange">立即购买</button>
				</view>
			</view>
		</view>
		<!-- 支付弹框组件 -->
		<pay-popup :pay-show="payShow" :pay-info="payInfo" @close="close" @success="toProcess" v-if="payShow" />
	</view>
</template>

<script>
	import env from '../../config/env.js'
	import $http from '@/utils/request.js'
	import appId from '@/config/appId.js'
	import { formatRichText } from '@/utils/util.js'
	import PayPopup from '../../components/pay-popup/pay-popup.vue'
	export default {
		components: {
			PayPopup,
		},
		data() {
			return {
				boxId: '',
				picUrlArr: [],
				info: {},
				prizeList: [],
				description: '',
				goodsId: '',

				payShow: false,
				payInfo: {},
				purchasePopupShow: false,
				pagesNum: '',
			};
		},
		onShow() {
			this.pagesNum = getCurrentPages().length
		},
		onLoad(opthios) {
			this.getDetail(opthios.id)
			this.goodsId = opthios.id
			this.boxId = opthios.boxId
		},
		methods: {
			getDetail(id) {
				uni.showLoading({
					title: '加载中'
				});
				$http.post('/api/v1/mp/user/exchange/goods/detail', {
					noToken: true,
					goodsId: id
				}).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						this.info = res.data
						let picUrlArr = res.data.picUrl.split(',')
						picUrlArr.forEach(item => {
							this.picUrlArr.push(env.filePublic + item + '?imageView2/2/w/750')
						})
						// 处理富文本
						// #ifndef MP-ALIPAY
						const description = res.data.description.replaceAll(".jpg\"", ".jpg?imageView2/2/w/750\"")
							.replaceAll(".jpeg\"", ".jpeg?imageView2/2/w/750\"").replaceAll(".png\"",
								".png?imageView2/2/w/750\"");
						this.description = formatRichText(description);
						// #endif

						// #ifdef MP-ALIPAY
						res.data.description.split(".jpg\"").join(".jpg?imageView2/2/w/750\"")
						res.data.description.split(".jpeg\"").join(".jpeg?imageView2/2/w/750\"")
						res.data.description.split(".png\"").join(".png?imageView2/2/w/750\"")
						this.description = formatRichText(res.data.description);
						// #endif

					}
				}).catch(() => {
					uni.hideLoading();
				})
			},

			close() {
				this.payShow = false
			},
			toProcess(id) {
				this.payShow = false
				uni.navigateTo({
					url: `/packagePrize/purchase/index?boxId=${ this.boxId }&orderId=${ id }&isTry=0`
				})
			},
			
			exchange() {
				let data = {
					couponIds: [],
					autoCoupon: 1,
					boxId: this.boxId,
					orderNum: 1,
					appSource: appId
				}
				$http.post('/api/v1/mp/user/ticket/order/settle', data).then(res => {
					if (res.code == 0) {
						let info = {
							...res.data,
							...this.info,
							picUrl: env.filePublic + res.data.goodsPicUrl.split(',')[0],
							couponTitle: res.data && res.data.couponList && res.data.couponList.length &&
								res
								.data.couponList[0].title,
							couponId: res.data && res.data.couponList && res.data.couponList.length && res
								.data
								.couponList[0].id
						}
						this.payInfo = info
						this.payShow = true
					}
				})
			},

			toCompanyData() {
				uni.navigateTo({
					url: `/packageGoods/goods/company?goodsId=${ this.goodsId }`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.detail {
		// 设置ios刘海屏底部横线安全区域
		// padding-bottom: constant(safe-area-inset-bottom);
		// padding-bottom: env(safe-area-inset-bottom);
		padding-bottom: 210rpx;
		// 商品轮播
		&-swiper {
			background-color: #FFFFFF;
		}

		// 详情
		&-infotwo {
			background-color: #fff;
			justify-content: space-between;

			&-num {
				view {
					display: inline-block;
					color: #F9822C;
					line-height: 80rpx;
					font-size: 32rpx;
					font-weight: bold;
				}

				.txt {
					margin-left: 14rpx;
					font-size: 26rpx;
					color: #666666;
					font-weight: 400;
					text-decoration: line-through;
				}
			}

		}

		&-info {
			background-color: #fff;
			justify-content: space-between;
			padding: 34rpx;
			margin-bottom: 22rpx;

			&-left {
				flex: 1;

				&__title {
					font-size: 34rpx;
					line-height: 40rpx;
					max-height: 80rpx;
					overflow: hidden;
					// margin-bottom: 26rpx;
					font-weight: bold;
				}

				&__coin {
					display: flex;
					line-height: 30rpx;
					margin-bottom: 26rpx;

					.content {
						color: #FA822C;
						margin-right: 34rpx;
						font-weight: bold;
						font-size: 30rpx;

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

						text {
							font-weight: normal;
						}
					}

					.txt {
						font-size: 26rpx;
						color: #666666;
						text-decoration: line-through;
					}
				}

				&__price {
					line-height: 24rpx;
					color: #666666;
				}
			}

			&-right {
				color: #666666;
			}
		}

		&-goods {
			height: 90rpx;
			text-align: center;
			line-height: 90rpx;
			font-weight: bold;
			font-size: 30rpx;
			background-color: #FFFFFF;
		}

		&-description {
			image {
				width: 100%;
			}
		}

		&-merchant {
			height: 88rpx;
			// text-align: center;
			line-height: 88rpx;
			font-weight: bold;
			background-color: #FFFFFF;

			&-warp {
				height: 88rpx;
				width: 100%;
				background-color: #ffffff;

				&-one {
					float: left;
					margin: 20rpx;
					font-weight: 600;
				}

				&-two {
					float: right;
					margin: 20rpx;
					font-weight: 600;
				}
			}
		}

		
	}

	.footer-fixed {
		position: fixed;
		bottom: var(--window-bottom);
		left: 0;
		right: 0;
		z-index: 11;
		box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24);
		background: #fff;
		// 设置ios刘海屏底部横线安全区域
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		&-content {
			justify-content: space-around;
			height: 132rpx;
			background-color: #fff;

			&__price {

				button {
					line-height: 82rpx;
					width: 420rpx;
					height: 82rpx;
					font-size: 30rpx;
					background: #F9822C;
					border-radius: 20px;
					color: #fff;
					margin-right: 20rpx;
				}

			}
		}
	}
</style>