盲票详情页新增跳转奖品详情页

pages/prizeGoods/detail.vue

@@ -6,9 +6,12 @@
 				<u-swiper :list="picUrlArr" height="375" radius="0" :indicator="true" :circular="true"></u-swiper>
 			</view>
 			<view class="detail-info">
-				<view class="content">零跑C11电动汽车新能源车整车国产中型SUV C11性能版</view>
+				<view class="content" v-text="info.title"></view>
 			</view>
 			<view class="detail-title">商品详情</view>
+			<view class="detail-description">
+				<view class="" v-html="description"></view>
+			</view>
 		</view>
 	</view>
 </template>
@@ -20,13 +23,10 @@
 		data() {
 			return {
 				boxId: '',
-				picUrlArr: [
-					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
-					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
-					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
-				],
+				picUrlArr: [],
 				info: {},
 				prizeList: [],
+				description:'',
 
 				payShow: false,
 				payInfo: {}
@@ -40,26 +40,19 @@
 				uni.showLoading({
 					title: '加载中'
 				});
-				$http.post('/api/v1/mp/channel/mall/ticket/detail', {
-					boxId: id
+				$http.post('/api/v1/mp/user/exchange/goods/detail', {
+					noToken: true,
+					goodsId: id
 				}).then(res => {
 					uni.hideLoading();
-					console.log(res);
-					return
 					if (res.code == 0) {
 						this.info = res.data
 						let picUrlArr = res.data.picUrl.split(',')
 						picUrlArr.forEach(item => {
 							this.picUrlArr.push(env.filePublic + item)
 						})
-
-						let prizeList = res.data.prizeList
-
-						prizeList.forEach(item => {
-							item.picUrl = env.filePublic + item.picUrl
-						})
-
-						this.prizeList = prizeList
+						// 处理富文本
+						this.description = this.formatRichText(res.data.description);
 					}
 				}).catch(() => {
 					uni.hideLoading();
@@ -90,6 +83,32 @@
 					}
 				})
 			},
+			/**
+			 * 处理富文本里的图片宽度自适应
+			 * 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;margin:10rpx auto;"');
+				return newContent;
+			},
 		}
 	}
 </script>
@@ -116,6 +135,12 @@
 			font-weight: bold;
 			background-color: #FFFFFF;
 		}
+		
+		&-description {
+			image {
+				width: 100%;
+			}
+		}
 
 	}
 </style>

pages/ticketBox/detail.vue

@@ -35,7 +35,7 @@
 				<view class="detail-goods-list">
 					<!-- <navigator :url="`/pages/prizeGoods/detail?id=${ item.prizeId }`" class="detail-goods-list-item"
 						hover-class="navigator-hover" v-for="(item, index) in prizeList" :key="index"> -->
-					<view class="detail-goods-list-item" v-for="(item, index) in prizeList" :key="index">
+					<view class="detail-goods-list-item" v-for="(item, index) in prizeList" :key="index" @click="toPrizeGoods(item)">
 						<view class="detail-goods-list-item__value">
 							<view class="flex image-wrap">
 								<image :src="item.picUrl" mode="scaleToFill"></image>
@@ -198,6 +198,14 @@
 				uni.switchTab({
 					url: '/pages/index/index'
 				})
+			},
+			
+			toPrizeGoods(item){
+				if(item.prizeType == "goods"){
+					uni.navigateTo({
+						url:`/pages/prizeGoods/detail?id=${ item.refId }`
+					})
+				}
 			}
 		}
 	}