2.2提交

pages_goods/productDetail/productDetail.vue

@@ -18,7 +18,7 @@
 			<view class="swiper-box">
 				<swiper class="detail-swiper" :indicator-dots="true" :autoplay="images.length > 1 ? true : false" :interval="5000" :duration="400" indicator-color="#ccc" indicator-active-color="#8B2316" :circular="true">
 					<swiper-item v-for="(img, idx) in images" :key="idx">
-						<image class="swiper-image" :src="img" mode="aspectFit"></image>
+						<image class="swiper-image" :src="img" mode="widthFix"></image>
 					</swiper-item>
 				</swiper>
 			</view>
@@ -28,7 +28,7 @@
 				<view class="title"><text v-if="product.type == 1">[包邮]</text>{{ product.title }}</view>
 				<view class="price-row">
 					<text class="price">{{ product.price }}积分</text>
-					<text class="exchanged">已兑换{{ product.times }}件</text>
+					<text class="exchanged" v-if="product.times > 0">已兑换{{ product.times }}件</text>
 				</view>
 			</view>
 
@@ -51,8 +51,10 @@
 		</scroll-view>
 
 		<!-- 底部兑换按钮 -->
-		<view class="bottom-bar" @click="goExchange">
-			<view class="redeem-btn" >在线兑换</view>
+		<view class="bottom-bar" >
+			<view class="redeem-btn" @click="goExchange">在线兑换</view>
+			<view class="bar" v-if="isUpan"></view>
+			<view class="redeem-btn" @click="goExchangeUpan" v-if="isUpan" :class="{'disabled': restNum <= 0}">福利兑换<text v-if="restNum > 0">剩余{{ restNum }}个</text></view>
 		</view>
 	</view>
 </template>
@@ -66,22 +68,35 @@ import navBar from '@/components/navBar/navBar.vue'
 
 const product = ref({ id: '', title: '', price: 0, times: 0, content: '' })
 const images = ref([])
-const navTitle = ref('商品详情')
+const navTitle = ref('商品详情');
+const isUpan = ref(false);
+const restNum = ref(0);
 
 const goBack = () => uni.navigateBack()
-
+const getUpanWelfareCount = async () => {
+	const res = await goods_api.getUpanWelfareCount()
+	if (res.code == 200) {
+		restNum.value=res.data;
+	};
+}
 const fetchDetail = async (id) => {
 	try {
 		const res = await goods_api.getGoodsDetail({ uuid: id })
 		if ((res.code === 200 || res.code === '200') && res.data) {
+			let content=res.data.content.replace(/\<img/gi, '<img class="richImg"');
 			product.value = {
 				id,
 				type: res.data.type,
 				title: res.data.name || '',
 				price: res.data.bonuspoints || 0,
 				times: res.data.times || 0,
-				content: res.data.content || ''
+				content: content
+
 			}
+			if(res.data.name.indexOf('U盘') > -1 || res.data.name.indexOf('u盘') > -1){
+				isUpan.value = true;
+				getUpanWelfareCount();
+			};
 			navTitle.value = (product.value.title || '').slice(0, 18)
 			const list = []
 			if (res.data.detial_imgpath) {
@@ -101,10 +116,18 @@ const fetchDetail = async (id) => {
 onLoad((opts) => {
 	if (opts && opts.id) fetchDetail(opts.id)
 })
+const goExchangeUpan = () => {
+	console.log(restNum.value);
+	if(restNum.value>0){
+		uni.navigateTo({
+		url: `/pages_app/buyUpan/buyUpan?restNum=${restNum.value}`
+	})
+}
+}	
 
 const goExchange = () => {
 	uni.navigateTo({
-		url: `/pages_goods/exchange/index?id=${product.value.id}&title=${encodeURIComponent(product.value.title)}&price=${product.value.price}&type=${product.value.type}`
+		url: `/pages_goods/exchange/index?id=${product.value.id}&title=${encodeURIComponent(product.value.title)}&price=${product.value.price}&type=${product.value.type}&times=${product.value.times}`
 	})
 }
 </script>
@@ -127,8 +150,8 @@ const goExchange = () => {
 
 /* 主图轮播 */
 .swiper-box { background: #fff; }
-.detail-swiper { height: 480rpx; }
-.swiper-image { width: 100%; height: 100%; }
+.detail-swiper { height: 440rpx; }
+.swiper-image { width: 100%; height: 440rpx; }
 
 /* 概要 */
 .summary { background: #fff; padding: 24rpx; }
@@ -160,5 +183,23 @@ const goExchange = () => {
 	align-items: center;
 	justify-content: center;
 }
-.redeem-btn { color: #fff; font-size: 32rpx; font-weight: 700; }
+.bottom-bar .bar{
+	height: 100rpx;
+	background-color: #f7f7f7;
+	width:2rpx;
+}
+.bottom-bar .redeem-btn{
+	height: 100rpx;
+	background-color: #27c5b8;
+display: flex;
+align-items: center;
+justify-content: center;
+color: #fff; font-size: 32rpx;flex:1;
+}
+.bottom-bar .redeem-btn.disabled{
+	background-color: #ccc;
+}
+.rich-wrapper >>> .richImg{
+	width: 100%!important;
+}
 </style>