奖品详情页、商品详情页，增加“查看商家信息”

pages.json

@@ -61,6 +61,8 @@
 		"path": "pages/coreRange/coreRange"
 	}, {
 		"path": "pages/webview/index"
+	}, {
+		"path": "pages/goods/company"
 	}],
 	"tabBar": {
 		"custom": true,

pages/goods/company.vue

@@ -0,0 +1,64 @@
+<template>
+	<view>
+		<u-navbar title="商家信息" :border="true" :placeholder="true" :autoBack="true" bgColor="#fff" />
+		<view class="company">该商品由以下商家提供</view>
+		<view class="detail-description" v-for="(item,index) in merchantInfo" :key="index">
+			<image :src="item" mode=""></image>
+		</view>
+	</view>
+</template>
+
+<script>
+	import env from '../../config/env.js'
+	import $http from '@/utils/request.js'
+	export default {
+		data() {
+			return {
+				merchantInfo: [],
+				goodsId:'',
+				data:[],
+			}
+		},
+		onLoad(opthios) {
+			this.goodsId = opthios.goodsId
+		},
+		onShow() {
+			this.getDetail()
+		},
+		methods: {
+			toGoodsDetail(){
+				uni.navigateBack({})
+			},
+			getDetail(){
+				uni.showLoading({
+					title: '加载中'
+				});
+				$http.post('/api/v1/mp/user/exchange/goods/detail', {
+					goodsId: this.goodsId,
+					noToken: true
+				}).then(res => {
+					uni.hideLoading();
+					if (res.code == 0) {
+						let merchantInfos = res.data.merchantInfo.split(',')
+						merchantInfos.forEach(item => {
+							this.merchantInfo.push(env.filePublic + item + '?imageView2/2/w/750')
+						})
+					}
+				}).catch(() => {
+					uni.hideLoading();
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.company{
+		margin: 20rpx 40rpx;
+	}
+	.detail-description {
+		image {
+			width: 100%;
+		}
+	}
+</style>

pages/goods/detail.vue

@@ -1,7 +1,7 @@
 <template>
 	<view>
 		<u-navbar title="商品详情" :border="true" :placeholder="true" :autoBack="true" bgColor="#fff" />
-		<view class="detail">
+		<view class="detail" style="margin-bottom: 108rpx;">
 			<view class="detail-top">
 				<u-swiper :list="picUrlArr" height="375" radius="0" :indicator="true" :circular="true"></u-swiper>
 			</view>
@@ -16,7 +16,17 @@
 			<view class="detail-description">
 				<view class="" v-html="description"></view>
 			</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="flex btn">
 				<button type="default" @click="exChange">立即兑换</button>
@@ -131,7 +141,9 @@
 							this.picUrlArr.push(env.filePublic + item + '?imageView2/2/w/750')
 						})
 						// 处理富文本
-						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\"");
+						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.skuListInit = res.data.skuList
 						if (res.data.skuList.length) {
@@ -247,6 +259,12 @@
 					uni.hideLoading();
 				})
 			},
+			
+			toCompanyData(){
+				uni.navigateTo({
+					url:`/pages/goods/company?goodsId=${ this.goodsId }`
+				})
+			},
 
 			/**
 			 * 处理富文本里的图片宽度自适应
@@ -330,6 +348,33 @@
 			background-color: #FFFFFF;
 		}
 
+		&-merchant {
+			height: 88rpx;
+			// text-align: center;
+			line-height: 88rpx;
+			font-weight: bold;
+			background-color: #FFFFFF;
+
+			&-warp {
+				height: 88rpx;
+				width: 100%;
+				background-color: #ffffff;
+				margin-top: 10rpx;
+
+				&-one {
+					float: left;
+					margin: 20rpx;
+					font-weight: 600;
+				}
+
+				&-two {
+					float: right;
+					margin: 20rpx;
+					font-weight: 600;
+				}
+			}
+		}
+
 		&-description {
 			image {
 				width: 100%;
@@ -415,10 +460,6 @@
 					margin-left: 36rpx;
 					border: 1px solid $uni-bg-color;
 				}
-
-				// &-item:first-child {
-				// 	margin-left: 0;
-				// }
 			}
 		}
 

pages/prizeGoods/detail.vue

@@ -12,6 +12,15 @@
 			<view class="detail-description">
 				<view class="" v-html="description"></view>
 			</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>
 </template>
@@ -26,7 +35,8 @@
 				picUrlArr: [],
 				info: {},
 				prizeList: [],
-				description:'',
+				description: '',
+				goodsId: '',
 
 				payShow: false,
 				payInfo: {}
@@ -34,6 +44,7 @@
 		},
 		onLoad(opthios) {
 			this.getDetail(opthios.id)
+			this.goodsId = opthios.id
 		},
 		methods: {
 			getDetail(id) {
@@ -52,7 +63,9 @@
 							this.picUrlArr.push(env.filePublic + item + '?imageView2/2/w/750')
 						})
 						// 处理富文本
-						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\"");
+						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);
 					}
 				}).catch(() => {
@@ -84,6 +97,13 @@
 					}
 				})
 			},
+			
+			toCompanyData(){
+				uni.navigateTo({
+					url:`/pages/goods/company?goodsId=${ this.goodsId }`
+				})
+			},
+			
 			/**
 			 * 处理富文本里的图片宽度自适应
 			 * 1.去掉img标签里的style、width、height属性
@@ -117,30 +137,60 @@
 <style lang="scss" scoped>
 	.detail {
 
-		&-info{
+		&-info {
 			padding: 50rpx 20rpx 50rpx;
 			margin-bottom: 10rpx;
 			background-color: #fff;
-			
-			.content{
+
+			.content {
 				font-size: 32rpx;
 				font-weight: bold;
 			}
 		}
-		
-		&-title{
+
+		&-title {
 			height: 88rpx;
 			text-align: center;
 			line-height: 88rpx;
 			font-weight: bold;
 			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;
+				margin-top: 10rpx;
+
+				&-one {
+					float: left;
+					margin: 20rpx;
+					font-weight: 600;
+				}
+
+				&-two {
+					float: right;
+					margin: 20rpx;
+					font-weight: 600;
+				}
+			}
+		}
+
+		// 设置ios刘海屏底部横线安全区域
+		padding-bottom: constant(safe-area-inset-bottom);
+		padding-bottom: env(safe-area-inset-bottom);
 	}
 </style>