新增商品兑换、购买详情

packageGoods/components/exchange-popup/exchange-popup.vue

@@ -0,0 +1,299 @@
+<template>
+	<u-popup :show="popupShow" round="17" mode="bottom" @close="close" :closeable="true" @touchmove.prevent.stop>
+		<view class="choiceShow-wrap">
+			<!-- 商品信息 -->
+			<view class="flex goods">
+				<view class="goods-left">
+					<view class="goods-left__image flex">
+						<image class="image-goods" :src="payInfo.picUrl" mode="aspectFit"></image>
+					</view>
+					<view class="goods-left-content flex">
+						<view class="goods-left-content__title ells-one">{{ detailInfo.title }}</view>
+						<view class="goods-left-content__coin flex">
+							<image class="image-coin" src="../../static/goods_coin.png" mode=""></image>
+							<view>× {{ payInfo.exValue }}</view>
+						</view>
+					</view>
+				</view>
+				<view class="goods-right">库存：{{ payInfo.quantity }}</view>
+			</view>
+			<!-- sku -->
+			<view class="sku" v-for="(item, index) in skuList" :key="index">
+				<view class="sku-title">{{ item.name }}</view>
+				<view class="flex sku-list">
+					<view
+						class="sku-list-item"
+						:class="{'action': item.actionIndex == indexs}"
+						v-for="(ele, indexs) in item.value" :key="indexs" @click="getSku(ele, item, indexs)">
+						{{ ele }}
+					</view>
+				</view>
+			</view>
+			<!-- 数量 -->
+			<view class="flex quantity">
+				<view class="quantity-title">商品数量</view>
+				<view class="quantity-title">
+					<u-number-box v-model="orderNum" :min="1" :disabledInput="true"
+						@change="valChange($event, payInfo)"></u-number-box>
+				</view>
+			</view>
+			<!-- 按钮 -->
+			<view class="flex btn">
+				<view class="flex btn-left">
+					<view class="title">应付：</view>
+					<view class="flex coin">
+						<image src="../../static/goods_coin.png" mode=""></image>
+						<view>× {{ payInfo.exchangePrice }}</view>
+					</view>
+				</view>
+				<view class="btn-right">
+					<view class="confirm" @click="confirmPrize">立即兑换</view>
+				</view>
+			</view>
+		</view>
+	</u-popup>
+</template>
+
+<script>
+	import env from '@/config/env.js'
+	import $http from '@/utils/request.js'
+	export default {
+		name: "exchange-popup",
+		props: {
+			popupShow: {
+				type: [Boolean],
+				default: false
+			},
+			skuListInit: {
+				type: Array,
+				default: () => []
+			},
+			skuList: {
+				type: Array,
+				default: () => []
+			},
+			detailInfo: {
+				type: [Object],
+				default: {}
+			},
+			popupInfo: {
+				type: [Object],
+				default: {}
+			}
+		},
+		data() {
+			return {
+				orderNum: 1,
+				payInfo: {}
+			};
+		},
+		
+		created() {
+			this.payInfo = this.popupInfo
+		},
+		
+		methods: {
+			valChange(e, item) {
+				let value = e.value
+				this.$set(item, 'exchangePrice', value * item.exValue)
+				if (this.payInfo.quantity < value) {
+					uni.$u.toast('库存不足');
+				}
+			},
+			
+			getSku(e, item, indexs) {
+				this.$set(item, 'txt', `${item.name}:${e}`)
+				this.$set(item, 'actionIndex', indexs)
+				this.orderNum = 1
+				let actionSku = this.skuList.map(item => {
+					return item.txt
+				}).join(';')
+				let sku = this.skuListInit.find(item => {
+					return item.properties == actionSku
+				})
+				this.payInfo = {
+					...sku,
+					exValue: sku.exchangePrice,
+					picUrl: env.filePublic + sku.picUrl
+				}
+			},
+			
+			confirmPrize() {
+				let flag = false
+				let data = {
+					goodsId: this.payInfo.goodsId,
+					skuId: this.payInfo.skuId,
+					orderNum: this.orderNum,
+				}
+				if (flag) return
+				if (this.payInfo.quantity == 0) {
+					uni.$u.toast('库存不足');
+					return
+				}
+				if (this.payInfo.quantity < this.orderNum) {
+					uni.$u.toast('库存不足');
+					return
+				}
+				uni.showLoading({
+					title: '兑换中'
+				});
+				flag = true
+				$http.post('/api/v1/mp/user/exchange/submit', data).then(res => {
+					uni.hideLoading();
+					flag = false
+					if (res.code == 0) {
+						this.$emit('success')
+					} else if (res.code == 1021) {
+						uni.$u.toast(res.msg);
+					}
+				}).catch(() => {
+					flag = false
+					uni.hideLoading();
+				})
+			},
+			
+			close() {
+				this.$emit('close')
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.choiceShow-wrap {
+		min-height: 400rpx;
+		padding: 34rpx;
+		
+		// 商品
+		.goods {
+			justify-content: space-between;
+			margin-bottom: 66rpx;
+			
+			&-left {
+				flex: 1;
+				display: flex;
+				
+				&__image {
+					width: 154rpx;
+					height: 154rpx;
+					border: 1px solid #EEEEEE;
+					border-radius: 18rpx;
+					margin-right: 24rpx;
+					
+					.image-goods {
+						width: 154rpx;
+						height: 154rpx;
+					}
+				}
+				
+				&-content {.image-goods {
+					width: 154rpx;
+					height: 154rpx;
+					border-radius: 18rpx;
+					border: 1px solid #EEEEEE;
+					margin-right: 24rpx;
+				}
+					height: 154rpx;
+					flex-direction: column;
+					align-items: flex-start;
+					justify-content: space-between;
+					padding: 34rpx 0;
+					
+					&__title {
+						font-size: 30rpx;
+						line-height: 30rpx;
+						font-weight: bold;
+					}
+					
+					&__coin {
+						color: #FF2929;
+						
+						.image-coin {
+							width: 34rpx;
+							height: 30rpx;
+						}
+					}
+				}
+			}
+			
+			&-right {
+				color: #666;
+			}
+		}
+		
+		// sku
+		.sku {
+			&-title {
+				font-size: 30rpx;
+				line-height: 30rpx;
+				font-weight: bold;
+				margin-bottom: 34rpx;
+			}
+	
+			&-list {
+				justify-content: flex-start;
+				flex-wrap: wrap;
+	
+				&-item {
+					padding: 20rpx 66rpx;
+					border-radius: 36rpx;
+					margin-right: 18rpx;
+					background: #F5F6F8;
+					margin-bottom: 34rpx;
+				}
+	
+				.action {
+					background-color: rgba(250, 130, 44, .25);
+					color: #FA822C;
+				}
+			}
+		}
+		
+		// 数量
+		.quantity {
+			justify-content: space-between;
+			margin: 34rpx 0;
+			
+			&-title {
+				font-size: 30rpx;
+				line-height: 30rpx;
+				font-weight: bold;
+			}
+		}
+	
+		// 按钮
+		.btn {
+			justify-content: space-between;
+			padding-top: 36rpx;
+			border-top: 1px solid #eee;
+	
+			&-left {
+				.coin {
+					display: flex;
+					align-items: center;
+					font-size: 26rpx;
+					line-height: 30rpx;
+					color: #FF2929;
+	
+					image {
+						width: 34rpx;
+						height: 30rpx;
+					}
+				}
+			}
+	
+			&-right {
+				.confirm {
+					width: 414rpx;
+					height: 88rpx;
+					line-height: 88rpx;
+					background: #FA362C;
+					border-radius: 44rpx;
+					font-size: 36rpx;
+					color: #fff;
+					text-align: center;
+				}
+			}
+		}
+	}
+</style>

packageGoods/components/purchase-popup/purchase-popup.vue

@@ -0,0 +1,283 @@
+<template>
+	<u-popup :show="popupShow" round="17" mode="bottom" @close="close" :closeable="true" @touchmove.prevent.stop>
+		<view class="choiceShow-wrap">
+			<!-- 商品信息 -->
+			<view class="flex goods">
+				<view class="goods-left">
+					<view class="goods-left__image flex">
+						<image class="image-goods" :src="payInfo.picUrl" mode="aspectFit"></image>
+					</view>
+					<view class="goods-left-content flex">
+						<view class="goods-left-content__title ells-one">{{ detailInfo.title }}</view>
+						<view class="goods-left-content__price">￥{{ $numberFormat(payInfo.price) }}</view>
+					</view>
+				</view>
+				<view class="goods-right">库存：{{ payInfo.quantity }}</view>
+			</view>
+			<!-- sku -->
+			<view class="sku" v-for="(item, index) in skuList" :key="index">
+				<view class="sku-title">{{ item.name }}</view>
+				<view class="flex sku-list">
+					<view
+						class="sku-list-item"
+						:class="{'action': item.actionIndex == indexs}"
+						v-for="(ele, indexs) in item.value" :key="indexs" @click="getSku(ele, item, indexs)">
+						{{ ele }}
+					</view>
+				</view>
+			</view>
+			<!-- 数量 -->
+			<view class="flex quantity">
+				<view class="quantity-title">商品数量</view>
+				<view class="quantity-title">
+					<u-number-box v-model="orderNum" :min="1" :disabledInput="true"
+						@change="valChange($event, payInfo)"></u-number-box>
+				</view>
+			</view>
+			<!-- 按钮 -->
+			<view class="flex btn">
+				<view class="flex btn-left">
+					<view class="title">应付：</view>
+					<view class="price">￥{{ $numberFormat(payInfo.value) }}</view>
+				</view>
+				<view class="btn-right">
+					<view class="confirm" @click="confirmPrize">立即购买</view>
+				</view>
+			</view>
+		</view>
+	</u-popup>
+</template>
+
+<script>
+	import env from '@/config/env.js'
+	import $http from '@/utils/request.js'
+	export default {
+		name: "purchase-popup",
+		props: {
+			popupShow: {
+				type: [Boolean],
+				default: false
+			},
+			skuListInit: {
+				type: Array,
+				default: () => []
+			},
+			skuList: {
+				type: Array,
+				default: () => []
+			},
+			detailInfo: {
+				type: [Object],
+				default: {}
+			},
+			popupInfo: {
+				type: [Object],
+				default: {}
+			}
+		},
+		data() {
+			return {
+				orderNum: 1,
+				payInfo: {}
+			};
+		},
+		
+		created() {
+			this.payInfo = this.popupInfo
+			console.log(this.popupInfo);
+		},
+		
+		methods: {
+			valChange(e, item) {
+				let value = e.value
+				this.$set(item, 'value', value * item.price)
+				if (this.payInfo.quantity < value) {
+					uni.$u.toast('库存不足');
+				}
+			},
+			
+			getSku(e, item, indexs) {
+				console.log(item);
+				this.$set(item, 'txt', `${item.name}:${e}`)
+				this.$set(item, 'actionIndex', indexs)
+				this.orderNum = 1
+				let actionSku = this.skuList.map(item => {
+					return item.txt
+				}).join(';')
+				let sku = this.skuListInit.find(item => {
+					return item.properties == actionSku
+				})
+				this.payInfo = {
+					...sku,
+					price: sku.value,
+					picUrl: env.filePublic + sku.picUrl
+				}
+			},
+			
+			confirmPrize() {
+				let flag = false
+				let data = {
+					goodsId: this.payInfo.goodsId,
+					skuId: this.payInfo.skuId,
+					orderNum: this.orderNum,
+				}
+				if (flag) return
+				if (this.payInfo.quantity == 0) {
+					uni.$u.toast('库存不足');
+					return
+				}
+				if (this.payInfo.quantity < this.orderNum) {
+					uni.$u.toast('库存不足');
+					return
+				}
+				uni.showLoading({
+					title: '购买中'
+				});
+				flag = true
+				$http.post('/api/v1/mp/user/exchange/submit', data).then(res => {
+					uni.hideLoading();
+					flag = false
+					if (res.code == 0) {
+						this.$emit('success')
+					} else if (res.code == 1021) {
+						uni.$u.toast(res.msg);
+					}
+				}).catch(() => {
+					flag = false
+					uni.hideLoading();
+				})
+			},
+			
+			close() {
+				this.$emit('close')
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.choiceShow-wrap {
+		min-height: 400rpx;
+		padding: 34rpx;
+		
+		// 商品
+		.goods {
+			justify-content: space-between;
+			margin-bottom: 66rpx;
+			
+			&-left {
+				flex: 1;
+				display: flex;
+				
+				&__image {
+					width: 154rpx;
+					height: 154rpx;
+					border: 1px solid #EEEEEE;
+					border-radius: 18rpx;
+					margin-right: 24rpx;
+					
+					.image-goods {
+						width: 154rpx;
+						height: 154rpx;
+					}
+				}
+				
+				&-content {.image-goods {
+					width: 154rpx;
+					height: 154rpx;
+					border-radius: 18rpx;
+					border: 1px solid #EEEEEE;
+					margin-right: 24rpx;
+				}
+					height: 154rpx;
+					flex-direction: column;
+					align-items: flex-start;
+					justify-content: space-between;
+					padding: 34rpx 0;
+					
+					&__title {
+						font-size: 30rpx;
+						line-height: 30rpx;
+						font-weight: bold;
+					}
+					
+					&__price {
+						color: #F42D4E;
+						font-size: 26rpx;
+					}
+				}
+			}
+			
+			&-right {
+				color: #666;
+			}
+		}
+		
+		// sku
+		.sku {
+			&-title {
+				font-size: 30rpx;
+				line-height: 30rpx;
+				font-weight: bold;
+				margin-bottom: 34rpx;
+			}
+	
+			&-list {
+				justify-content: flex-start;
+				flex-wrap: wrap;
+	
+				&-item {
+					padding: 20rpx 66rpx;
+					border-radius: 36rpx;
+					margin-right: 18rpx;
+					background: #F5F6F8;
+					margin-bottom: 34rpx;
+				}
+	
+				.action {
+					background-color: rgba(250, 130, 44, .25);
+					color: #FA822C;
+				}
+			}
+		}
+		
+		// 数量
+		.quantity {
+			justify-content: space-between;
+			margin: 34rpx 0;
+			
+			&-title {
+				font-size: 30rpx;
+				line-height: 30rpx;
+				font-weight: bold;
+			}
+		}
+	
+		// 按钮
+		.btn {
+			justify-content: space-between;
+			padding-top: 36rpx;
+			border-top: 1px solid #eee;
+	
+			&-left {
+				.price {
+					font-size: 26rpx;
+					color: #F42D4E;
+				}
+			}
+	
+			&-right {
+				.confirm {
+					width: 414rpx;
+					height: 88rpx;
+					line-height: 88rpx;
+					background: #FA362C;
+					border-radius: 44rpx;
+					font-size: 36rpx;
+					color: #fff;
+					text-align: center;
+				}
+			}
+		}
+	}
+</style>

packageGoods/goods/detail.vue

@@ -1,18 +1,27 @@
 <template>
 	<view>
 		<u-navbar title="商品详情" :border="true" :placeholder="true" :autoBack="true" bgColor="#fff" />
-		<view class="detail" style="margin-bottom: 90rpx;">
-			<view class="detail-top">
-				<u-swiper :list="picUrlArr" height="375" radius="0" :indicator="true" :circular="true"></u-swiper>
+		<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-title">
-				<view class="txt">{{ info.title }}</view>
-				<view class="coin">
-					<image src="../../static/icon/bean.png" mode=""></image>
-					<view>× {{ info.exchangePrice }}</view>
+			<!-- 详情 -->
+			<view class="detail-info flex">
+				<view class="detail-info-left">
+					<view class="detail-info-left__title ells-one">{{ info.title }}</view>
+					<view class="detail-info-left__coin">
+						<view class="content flex">
+							<image src="../static/goods_coin.png" mode=""></image>
+							<view>× {{ info.exchangePrice }}</view>
+						</view>
+						<view class="txt">原价：<text>￥{{ info.originPrice }}</text></view>
+					</view>
+					<view class="detail-info-left__price">￥{{ $numberFormat(info.value) }}</view>
 				</view>
+				<view class="detail-info-right" v-show="false">销量：30个</view>
 			</view>
-			<view class="detail-goods">商品详情</view>
+			<view class="detail-goods">产品介绍</view>
 			<view class="detail-description">
 				<u-parse :content="description" :selectable="true"></u-parse>
 			</view>
@@ -28,59 +37,26 @@
 		</view>
 
 		<view class="footer-fixed">
-			<view class="flex btn">
-				<button type="default" @click="exChange">立即兑换</button>
-			</view>
-		</view>
-
-		<!-- 兑换选择 -->
-		<u-popup :show="choiceShow" mode="bottom" @close="close" :closeable="true">
-			<view class="choiceShow-wrap">
-				<view class="flex goods">
-					<view class="flex image-wrap">
-						<image :src="payInfo.picUrl" mode="aspectFill"></image>
-					</view>
-					<view class="info">
-						<view class="info-title">{{ info.title }}</view>
-						<view class="info-coin">
-							<image src="../../static/icon/bean.png" mode=""></image>
-							<view>× {{ payInfo.exValue }}</view>
-						</view>
-						<view class="info-stock">库存：{{ payInfo.quantity }}</view>
-					</view>
+			<view class="footer-fixed-content flex">
+				<!-- <button type="default">立即兑换</button> -->
+				<view class="footer-fixed-content__coin flex">
+					<text>我的盲豆:</text>
+					<text>{{ initData.coinNum ? `${ initData.coinNum }颗` : '--' }}</text>
 				</view>
-				<view class="sku" v-for="(item, index) in skuList" :key="index">
-					<view class="sku-title">{{ item.name }}</view>
-					<view class="flex sku-list">
-						<view
-							:class="{'action': item.actionIndex == indexs, 'sku-list-item': item.actionIndex != indexs}"
-							v-for="(ele, indexs) in item.value" :key="indexs" @click="getSku(ele, item, indexs)">
-							{{ ele }}
-						</view>
-					</view>
+				<view class="footer-fixed-content__exchange flex" @click="exChange">
+					<text>盲豆兑换</text>
+					<text>{{ info.exchangePrice }}颗</text>
 				</view>
-				<view class="flex quantity">
-					<view class="quantity-title">兑换数量</view>
-					<view class="quantity-title">
-						<u-number-box v-model="orderNum" :min="1" :disabledInput="true"
-							@change="valChange($event, payInfo)"></u-number-box>
-					</view>
-				</view>
-				<view class="flex btn">
-					<view class="flex btn-left">
-						<view class="title">应付：</view>
-						<view class="flex coin">
-							<image src="../../static/icon/bean.png" mode=""></image>
-							<view>× {{ payInfo.exchangePrice }}</view>
-						</view>
-					</view>
-					<view class="btn-right">
-						<view class="confirm" @click="confirmPrize">立即兑换</view>
-					</view>
+				<view class="footer-fixed-content__price flex" @click="purchase">
+					<text>立即购买</text>
 				</view>
 			</view>
-		</u-popup>
+		</view>
 
+		<!-- 兑换选择 -->
+		
+		
+		<!-- 兑换成功 -->
 		<u-popup :show="tipShow" mode="center">
 			<view class="tip-show">
 				<view class="flex tip-show-title">
@@ -94,13 +70,45 @@
 				</view>
 			</view>
 		</u-popup>
+		
+		<!-- 商品兑换 -->
+		<exchange-popop 
+			:popup-show="exchangePopupShow" 
+			:detailInfo="info" 
+			:popup-info="payInfo" 
+			:sku-list-init="skuListInit" 
+			:sku-list="skuList" 
+			@close="close"
+			@success="exchangeSuccess"
+			v-if="exchangePopupShow" 
+		/>
+		
+		<!-- 商品购买 -->
+		<purchase-popup
+			:popup-show="purchasePopupShow" 
+			:detailInfo="info" 
+			:popup-info="payInfo" 
+			:sku-list-init="skuListInit" 
+			:sku-list="skuList" 
+			@close="close"
+			@success="purchaseSuccess"
+			v-if="purchasePopupShow" 
+		/>
+		
 	</view>
 </template>
 
 <script>
 	import env from '../../config/env.js'
 	import $http from '@/utils/request.js'
+	import { formatRichText } from '@/utils/util.js'
+	import ExchangePopop from '../components/exchange-popup/exchange-popup.vue'
+	import PurchasePopup from '../components/purchase-popup/purchase-popup.vue'
 	export default {
+		components: {
+			ExchangePopop,
+			PurchasePopup
+		},
 		data() {
 			return {
 				goodsId: '',
@@ -115,7 +123,10 @@
 				skuList: [],
 				skuListInit: [],
 				payInfo: {},
-				tipShow: false
+				tipShow: false,
+				
+				exchangePopupShow: false,
+				purchasePopupShow: false
 			};
 		},
 		onLoad(opthios) {
@@ -123,6 +134,9 @@
 		},
 		onShow() {
 			this.getDetail()
+			if(uni.getStorageSync('token')) {
+				this.getBean()
+			}
 		},
 		methods: {
 			getDetail() {
@@ -144,7 +158,7 @@
 						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 = this.formatRichText(description);
+						this.description = formatRichText(description);
 						this.skuListInit = res.data.skuList
 						if (res.data.skuList.length) {
 							let skuProp = JSON.parse(res.data.skuProp)
@@ -161,12 +175,14 @@
 							this.payInfo = {
 								...sku,
 								exValue: sku.exchangePrice,
+								price: sku.value,
 								picUrl: env.filePublic + sku.picUrl
 							}
 							this.skuList = skuProp
 						} else {
 							this.payInfo = {
 								...res.data,
+								price: this.info.value,
 								exValue: this.info.exchangePrice,
 								picUrl: this.picUrlArr[0]
 							}
@@ -192,106 +208,35 @@
 			},
 
 			exChange() {
-				this.choiceShow = true
+				this.exchangePopupShow = true
+				this.getBean()
 			},
-
+			
+			purchase() {
+				this.purchasePopupShow = true
+			},
+			
 			close() {
-				this.choiceShow = false
+				this.exchangePopupShow = false
+				this.purchasePopupShow = false
 			},
-
-			valChange(e, item) {
-				let value = e.value
-				this.$set(item, 'exchangePrice', value * item.exValue)
-				if (this.payInfo.quantity < value) {
-					uni.$u.toast('库存不足');
-				}
+			
+			exchangeSuccess() {
+				this.close()
+				this.tipShow = true
+				this.getBean()
+				this.getDetail()
 			},
-
-			getSku(e, item, indexs) {
-				this.$set(item, 'txt', `${item.name}:${e}`)
-				this.$set(item, 'actionIndex', indexs)
-				this.orderNum = 1
-				let actionSku = this.skuList.map(item => {
-					return item.txt
-				}).join(';')
-				let sku = this.skuListInit.find(item => {
-					return item.properties == actionSku
-				})
-				this.payInfo = {
-					...sku,
-					exValue: sku.exchangePrice,
-					picUrl: env.filePublic + sku.picUrl
-				}
+			
+			purchaseSuccess() {
+				this.close()
 			},
 
-			confirmPrize() {
-				let flag = false
-				let data = {
-					goodsId: this.payInfo.goodsId,
-					skuId: this.payInfo.skuId,
-					orderNum: this.orderNum,
-				}
-				if (flag) return
-				if (this.payInfo.quantity == 0) {
-					uni.$u.toast('库存不足');
-					return
-				}
-				if (this.payInfo.quantity < this.orderNum) {
-					uni.$u.toast('库存不足');
-					return
-				}
-				uni.showLoading({
-					title: '兑换中'
-				});
-				flag = true
-				$http.post('/api/v1/mp/user/exchange/submit', data).then(res => {
-					uni.hideLoading();
-					flag = false
-					if (res.code == 0) {
-						this.choiceShow = false
-						this.tipShow = true
-						this.getDetail()
-					} else if (res.code == 1021) {
-						uni.$u.toast(res.msg);
-					}
-				}).catch(() => {
-					flag = false
-					uni.hideLoading();
-				})
-			},
-			
 			toCompanyData(){
 				uni.navigateTo({
 					url:`/packageGoods/goods/company?goodsId=${ this.goodsId }`
 				})
 			},
-
-			/**
-			 * 处理富文本里的图片宽度自适应
-			 * 1.去掉img标签里的style、width、height属性
-			 * 2.img标签添加style属性：max-width:100%;height:auto
-			 * 3.修改所有style里的width属性为max-width:100%
-			 * 4.去掉<br/>标签
-			 * @param html
-			 * @returns {void|string|*}
-			 */
-			formatRichText(html) { //控制小程序中图片大小
-				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
-					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
-					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
-					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
-					return match;
-				});
-				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
-					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
-						'max-width:100%;');
-					return match;
-				});
-				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
-				newContent = newContent.replace(/\<img/gi,
-					'<img style="max-width:100%;height:auto;font-size: 0;margin-top: -5px;"');
-				return newContent;
-			},
 		}
 	}
 </script>
@@ -301,50 +246,72 @@
 </style>
 <style lang="scss" scoped>
 	.detail {
-		padding-bottom: 100rpx;
+		padding-bottom: 180rpx;
 
-		&-top {
-			height: 750rpx;
+		// 商品轮播
+		&-swiper {
 			background-color: #FFFFFF;
 		}
 
-		&-title {
-			padding: 24rpx;
-			background-color: #FFFFFF;
-			margin-bottom: 10rpx;
-
-			.txt {
-				font-size: 32rpx;
-				line-height: 44rpx;
-				overflow: hidden;
-				text-overflow: ellipsis;
-				display: -webkit-box;
-				-webkit-box-orient: vertical;
-				-webkit-line-clamp: 2;
-				margin-bottom: 24rpx;
-				font-weight: bold;
-			}
-
-			.coin {
-				display: flex;
-				align-items: center;
-				font-size: 32rpx;
-				line-height: 44rpx;
-				color: rgba(235, 112, 9, 100);
+		// 详情
+		&-info {
+			background-color: #fff;
+			justify-content: space-between;
+			padding: 34rpx;
+			margin-bottom: 22rpx;
+			
+			&-left {
+				flex: 1;
+				
+				&__title {
+					font-size: 34rpx;
+					line-height: 34rpx;
+					margin-bottom: 26rpx;
+					font-weight: bold;
+				}
+				
+				&__coin {
+					display: flex;
+					line-height: 30rpx;
+					margin-bottom: 26rpx;
+					font-size: 26rpx;
+					
+					.content {
+						color: #FF2929;
+						margin-right: 34rpx;
+						
+						image {
+							width: 34rpx;
+							height: 30rpx;
+						}
+					}
+					
+					.txt {
+						color: #666666;
+						
+						text {
+							text-decoration: line-through;
+						}
+					}
+				}
+				
+				&__price {
+					line-height: 24rpx;
+					color: #666666;
+				}
 			}
-
-			image {
-				width: 42rpx;
-				height: 42rpx;
-				margin-right: 20rpx;
+			
+			&-right {
+				color: #666666;
 			}
 		}
 
 		&-goods {
-			height: 88rpx;
+			height: 90rpx;
 			text-align: center;
-			line-height: 88rpx;
+			line-height: 90rpx;
 			font-weight: bold;
+			font-size: 30rpx;
 			background-color: #FFFFFF;
 		}
 
@@ -382,128 +349,6 @@
 		}
 	}
 
-	.choiceShow-wrap {
-		min-height: 400rpx;
-		padding: 80rpx 20rpx 60rpx;
-
-		.goods {
-			justify-content: space-between;
-			margin-bottom: 20rpx;
-
-			.image-wrap {
-				width: 220rpx;
-				height: 220rpx;
-				border: 1px solid rgba(236, 236, 236, 100);
-				border-radius: 10rpx;
-
-				image {
-					width: 174rpx;
-					height: 174rpx;
-				}
-			}
-
-			.info {
-				flex: 1;
-				display: flex;
-				flex-direction: column;
-				justify-content: space-between;
-				padding-left: 26rpx;
-				height: 220rpx;
-
-				&-title {
-					font-size: 32rpx;
-					line-height: 44rpx;
-					font-weight: bold;
-				}
-
-				&-coin {
-					display: flex;
-					align-items: center;
-					font-size: 32rpx;
-					line-height: 44rpx;
-					color: rgba(235, 112, 9, 100);
-					font-weight: bold;
-
-					image {
-						width: 42rpx;
-						height: 42rpx;
-						margin-right: 20rpx;
-					}
-				}
-
-				&-stock {
-					line-height: 44rpx;
-				}
-			}
-		}
-
-		.sku {
-			margin-bottom: 30rpx;
-
-			&-title {
-				line-height: 42rpx;
-			}
-
-			&-list {
-				justify-content: flex-start;
-
-				&-item {
-					line-height: 44rpx;
-					padding: 0 20rpx;
-					border: 1px solid rgba(187, 187, 187, 100);
-					margin-left: 36rpx;
-				}
-
-				.action {
-					line-height: 44rpx;
-					padding: 0 20rpx;
-					margin-left: 36rpx;
-					border: 1px solid $uni-bg-color;
-				}
-			}
-		}
-
-		.quantity {
-			justify-content: space-between;
-			margin-bottom: 40rpx;
-		}
-
-		.btn {
-			justify-content: space-between;
-
-			&-left {
-				.coin {
-					display: flex;
-					align-items: center;
-					font-size: 32rpx;
-					line-height: 44rpx;
-					color: rgba(235, 112, 9, 100);
-					font-weight: bold;
-					margin-left: 20rpx;
-
-					image {
-						width: 42rpx;
-						height: 42rpx;
-						margin-right: 20rpx;
-					}
-				}
-			}
-
-			&-right {
-				.confirm {
-					width: 280rpx;
-					height: 90rpx;
-					font-size: 36rpx;
-					line-height: 90rpx;
-					border-radius: 10rpx;
-					background-color: rgba(235, 112, 9, 100);
-					color: rgba(255, 255, 255, 100);
-					text-align: center;
-				}
-			}
-		}
-	}
-
 	.tip-show {
 		width: 80vw;
 		background-color: #FFFFFF;
@@ -559,18 +404,47 @@
 		padding-bottom: constant(safe-area-inset-bottom);
 		padding-bottom: env(safe-area-inset-bottom);
 
-		.btn {
-			padding: 20rpx 0;
-
-			/deep/ button {
-				width: 640rpx;
-				height: 90rpx;
-				line-height: 90rpx;
-				font-size: 36rpx;
+		&-content {
+			justify-content: flex-start;
+			height: 132rpx;
+			background-color: #fff;
+			
+			&__coin {
+				height: 100%;
+				flex: 1;
+				font-size: 30rpx;
+				
+				text:first-child {
+					color: #999;
+				}
+			}
+			
+			&__exchange {
+				height: 100%;
+				flex-direction: column;
+				padding: 0 50rpx;
+				background-color: #FA822C;
+				color: #fff;
+				
+				text {
+					font-weight: bold;
+					font-size: 30rpx;
+					line-height: 40rpx;
+				}
+				
+				text:last-child {
+					font-weight: normal;
+					font-size: 26rpx;
+				}
+			}
+			
+			&__price {
+				font-size: 30rpx;
+				font-weight: bold;
+				height: 100%;
+				padding: 0 50rpx;
+				background-color: #FA362C;
 				color: #fff;
-				background-color: $uni-bg-color;
-				border: none;
-				border-radius: 20rpx;
 			}
 		}
 	}

packagePrize/goods/detail.vue

@@ -2,13 +2,25 @@
 	<view>
 		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="奖品详情"></u-navbar>
 		<view class="detail">
-			<view class="detail-top">
-				<u-swiper :list="picUrlArr" height="375" radius="0" :indicator="true" :circular="true"></u-swiper>
+			<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="content" v-text="info.title"></view>
+			<!-- 详情 -->
+			<view class="detail-info flex">
+				<view class="detail-info-left">
+					<view class="detail-info-left__title ells-one">{{ info.title }}</view>
+					<view class="detail-info-left__coin">
+						<view class="content flex">
+							<image src="../static/goods_coin.png" mode=""></image>
+							<view>× {{ info.exchangePrice }}</view>
+						</view>
+						<view class="txt">原价：<text>￥{{ $numberFormat(999) }}</text></view>
+					</view>
+					<view class="detail-info-left__price">￥{{ $numberFormat(999) }}</view>
+				</view>
+				<view class="detail-info-right" v-show="false">销量：30个</view>
 			</view>
-			<view class="detail-title">商品详情</view>
+			<view class="detail-goods">产品介绍</view>
 			<view class="detail-description">
 				<u-parse :content="description" :selectable="true"></u-parse>
 			</view>
@@ -28,6 +40,7 @@
 <script>
 	import env from '../../config/env.js'
 	import $http from '@/utils/request.js'
+	import { formatRichText } from '@/utils/util.js'
 	export default {
 		data() {
 			return {
@@ -66,7 +79,7 @@
 						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 = this.formatRichText(description);
+						this.description = formatRichText(description);
 					}
 				}).catch(() => {
 					uni.hideLoading();
@@ -103,33 +116,6 @@
 					url:`/packageGoods/goods/company?goodsId=${ this.goodsId }`
 				})
 			},
-			
-			/**
-			 * 处理富文本里的图片宽度自适应
-			 * 1.去掉img标签里的style、width、height属性
-			 * 2.img标签添加style属性：max-width:100%;height:auto
-			 * 3.修改所有style里的width属性为max-width:100%
-			 * 4.去掉<br/>标签
-			 * @param html
-			 * @returns {void|string|*}
-			 */
-			formatRichText(html) { //控制小程序中图片大小
-				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
-					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
-					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
-					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
-					return match;
-				});
-				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
-					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
-						'max-width:100%;');
-					return match;
-				});
-				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
-				newContent = newContent.replace(/\<img/gi,
-					'<img style="max-width:100%;height:auto;font-size: 0;margin-top: -5px;"');
-				return newContent;
-			},
 		}
 	}
 </script>
@@ -137,22 +123,70 @@
 <style lang="scss" scoped>
 	.detail {
 
+		// 商品轮播
+		&-swiper {
+			background-color: #FFFFFF;
+		}
+		
+		// 详情
 		&-info {
-			padding: 50rpx 20rpx 50rpx;
-			margin-bottom: 10rpx;
 			background-color: #fff;
-
-			.content {
-				font-size: 32rpx;
-				font-weight: bold;
+			justify-content: space-between;
+			padding: 34rpx;
+			margin-bottom: 22rpx;
+			
+			&-left {
+				flex: 1;
+				
+				&__title {
+					font-size: 34rpx;
+					line-height: 34rpx;
+					margin-bottom: 26rpx;
+					font-weight: bold;
+				}
+				
+				&__coin {
+					display: flex;
+					line-height: 30rpx;
+					margin-bottom: 26rpx;
+					font-size: 26rpx;
+					
+					.content {
+						color: #FF2929;
+						margin-right: 34rpx;
+						
+						image {
+							width: 34rpx;
+							height: 30rpx;
+						}
+					}
+					
+					.txt {
+						color: #666666;
+						
+						text {
+							text-decoration: line-through;
+						}
+					}
+				}
+				
+				&__price {
+					line-height: 24rpx;
+					color: #666666;
+				}
+			}
+			
+			&-right {
+				color: #666666;
 			}
 		}
-
-		&-title {
-			height: 88rpx;
+		
+		&-goods {
+			height: 90rpx;
 			text-align: center;
-			line-height: 88rpx;
+			line-height: 90rpx;
 			font-weight: bold;
+			font-size: 30rpx;
 			background-color: #FFFFFF;
 		}