我的券包布局调整;首页商品列表兼容积分商品;商品详情解决图片间隙问题、详情增加边距

pages/home/index.vue

@@ -104,7 +104,8 @@
 								</view>
 								<view class="name more-t">{{ item.storeName }}</view>
 								<view class="price-box">
-									<view class="current">¥{{ item.price }}<text>¥{{item.otPrice}}</text></view>
+									<view class="current" v-if="item.isIntegral === 1">{{ item.integral }}积分</view>
+									<view class="current" v-else>¥{{ item.price }}<text>¥{{item.otPrice}}</text></view>
 								</view>
 							</view>
 						</view>
@@ -128,7 +129,8 @@
 									<image class="img" :src="item.image" mode="aspectFill"></image>
 									<view class="info-box">
 										<view class="title more-t">{{item.storeName}}</view>
-										<view class="price-box">¥{{ item.price }}<text>¥{{item.otPrice}}</text> </view>
+										<view class="price-box" v-if="item.isIntegral === 1">{{ item.integral }}积分</view>
+										<view class="price-box" v-else>¥{{ item.price }}<text>¥{{item.otPrice}}</text></view>
 										<view class="original">{{ item.sales }}+人购买</view>
 									</view>
 								</view>
@@ -141,7 +143,8 @@
 									</view>
 									<view class="name more-t">{{ item.storeName }}</view>
 									<view class="price-box">
-										<view class="current">¥{{ item.price }}<text>¥{{item.otPrice}}</text></view>
+										<view class="current" v-if="item.isIntegral === 1">{{ item.integral }}积分</view>
+										<view class="current" v-else>¥{{ item.price }}<text>¥{{item.otPrice}}</text></view>
 									</view>
 								</view>
 							</view>
@@ -521,12 +524,22 @@
 			//   })
 			// },
 			goGoodsCon(item) {
-				this.$yrouter.push({
-					path: '/pages/shop/GoodsCon/index',
-					query: {
-						id: item.id,
-					},
-				})
+				if(item.isIntegral === 1) {
+					this.$yrouter.push({
+					  path: '/pages/shop/IntegralGoodsCon/index',
+					  query: {
+					    id: item.id,
+					  },
+					})
+				} else {
+					this.$yrouter.push({
+						path: '/pages/shop/GoodsCon/index',
+						query: {
+							id: item.id,
+						},
+					})
+				}
+				
 			},
 			// goGoodsPromotion() {
 			//   this.$yrouter.push('/pages/shop/GoodsPromotion/index')

pages/shop/GoodsCon/index.vue

@@ -414,8 +414,10 @@
 				showEntry: false,
 				tagStyle: {
 					a: 'color:#2DB5AE;text-decoration:underline;',
+					p: 'text-indent:2em;',
 					// span: 'padding: 0rpx 30rpx;text-indent:2em;text-align: justify;text-justify: auto;'
-					span: 'padding: 0rpx 30rpx;	display: inline-block;'
+					// span: 'padding: 0rpx 30rpx;display: inline-block;',
+					img: 'padding:0;margin:0;font-size:0;display:block;'
 				}
 			}
 		},
@@ -572,7 +574,7 @@
 						res.data.storeInfo.description = res.data.storeInfo.description.replace(/\<img/gi,
 							'<img style="max-width:100%;height:auto;"')
 						res.data.storeInfo.description = res.data.storeInfo.description.replace(/&nbsp;/gi,
-							'')
+							' ')
 						that.brandInfo = res.data.brandInfo;
 						that.$set(that, 'storeInfo', res.data.storeInfo)
 						// 给 attr 赋值，将请求回来的规格赋值给 attr
@@ -1509,12 +1511,12 @@
 
 	.product-con .product-intro .conter {
 		background-color: #FFFFFF;
-		// font-size: 24rpx;
+		font-size: 30rpx;
 		font-family: PingFang SC;
 		font-weight: 500;
 		color: #3A3A3C;
 		// line-height: 32rpx;
-		// padding: 0rpx 30rpx;
+		padding: 0rpx 30rpx;
 		view {
 			width: 100% !important;
 		}

pages/shop/IntegralGoodsCon/index.vue

@@ -59,7 +59,11 @@
       <!-- 商品详情 -->
       <view class="product-intro">
         <view class="title">商品展示</view>
-        <view class="conter" v-html="storeInfo.description"></view>
+        <!-- <view class="conter" v-html="storeInfo.description"></view> -->
+				<view class="conter">
+					<mp-html id="article" :setTitle="false" :lazy-load="true" :copy-link="false" :tag-style="tagStyle"
+						:content="storeInfo.description" @linktap="linktap" />
+				</view>
       </view>
 
       <view :style="addBottom?'height: 162rpx;':'height: 122rpx;'"></view>
@@ -74,8 +78,16 @@
             <text>立即兑换</text>
           </view>
         </view>
-      </view>
-
+      </view>
+			
+			<!-- 词条弹框 -->
+			<view class="entry-mask" v-show="showEntry" @touchmove.stop.prevent @click="closeEntry">
+				<view class="entry-box">
+					<view class="entry">
+						{{entryInfo.entryInfo}}
+					</view>
+				</view>
+			</view>
       <!-- 商品规格弹窗 -->
       <ProductWindow :isIntegral="isIntegral" v-on:changeFun="changeFun" :attr="attr" :cartNum="cart_num"></ProductWindow>
       <!-- 分享海报 -->
@@ -93,7 +105,7 @@ import CouponPop from '@/components/CouponPop'
 import ProductWindow from '@/components/ProductWindow'
 import StorePoster from '@/components/StorePoster'
 import ShareInfo from '@/components/ShareInfo'
-import { getProductDetail, postCartAdd, getCartCount, getProductCode } from '@/api/store'
+import { getProductDetail, postCartAdd, getCartCount, getProductCode, getEntry } from '@/api/store'
 import { getCoupon, getCollectAdd, getCollectDel, getUserInfo } from '@/api/user'
 import cookie from '@/utils/store/cookie'
 import { isWeixin, PosterCanvas, handleQrCode, handleUrlParam, getCurrentPageUrlWithArgs } from '@/utils'
@@ -168,7 +180,15 @@ export default {
       qqmapsdk: null,
       productConClass: 'product-con',
       tempName: '全国包邮',
-      isIntegral: true,
+      isIntegral: true,
+			tagStyle: {
+				a: 'color:#2DB5AE;text-decoration:underline;',
+				p: 'text-indent:2em;',
+				// span: 'padding: 0rpx 32rpx !important;display: inline-block;',
+				img: 'padding:0;margin:0;font-size:0;display:block;'
+			},
+			showEntry: false,
+			entryInfo: {}
     }
   },
   computed: mapGetters(['isLogin', 'location']),
@@ -291,7 +311,8 @@ export default {
       })
       getProductDetail(that.id, from)
         .then(res => {
-          res.data.storeInfo.description = res.data.storeInfo.description.replace(/\<img/gi, '<img style="max-width:100%;height:auto;"')
+          res.data.storeInfo.description = res.data.storeInfo.description.replace(/\<img/gi, '<img style="max-width:100%;height:auto;"');
+					res.data.storeInfo.description = res.data.storeInfo.description.replace(/&nbsp;/gi, ' ');
           that.$set(that, 'storeInfo', res.data.storeInfo)
           // 给 attr 赋值，将请求回来的规格赋值给 attr
           that.$set(that.attr, 'productAttr', res.data.productAttr)
@@ -599,7 +620,25 @@ export default {
     tapBuy: function() {
       //  1=直接购买
       this.goCat(1)
-    },
+    },
+		linktap(e) {
+			// console.log('description', e.innerText);
+			// var ctx = this.selectComponent('#article');
+			// console.log('description11111111', ctx);
+			if (e.innerText == this.entryInfo.entryName) {
+				this.showEntry = true;
+				return;
+			}
+			getEntry({
+				name: e.innerText
+			}).then(res => {
+				this.entryInfo = res.data;
+				this.showEntry = true;
+			})
+		},
+		closeEntry() {
+			this.showEntry = false;
+		},
     listenerActionSheet: function() {
       if (isWeixin() === true) {
         this.weixinStatus = true
@@ -703,6 +742,42 @@ export default {
 		border-right: 0rpx solid transparent;
 		margin-left: 8rpx;
 	}
+	
+	.entry-mask {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		z-index: 20;
+		background: rgba(125, 125, 125, 0.25);
+		-webkit-backdrop-filter: blur(10rpx);
+		backdrop-filter: blur(10rpx);
+	
+		.entry-box {
+			position: fixed;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+			z-index: 30;
+			width: 592rpx;
+			height: 374rpx;
+			background: #F1F1F1;
+			box-shadow: 0rpx 10rpx 16rpx 0rpx rgba(0, 0, 0, 0.15);
+			border-radius: 28rpx;
+			padding: 32rpx;
+	
+			.entry {
+				height: 100%;
+				overflow: scroll;
+				font-size: 26rpx;
+				font-family: SourceHanSansSCVF;
+				font-weight: 500;
+				color: #3A3A3C;
+				line-height: 38rpx;
+			}
+		}
+	}
 	
 .geoPage {
   position: fixed;
@@ -870,8 +945,16 @@ export default {
   filter: blur(2px);
 }
 
-.product-con .product-intro .conter view {
-  width: 100% !important;
+.product-con .product-intro .conter {
+	background-color: #FFFFFF;
+	font-size: 30rpx;
+	font-family: PingFang SC;
+	font-weight: 500;
+	color: #3A3A3C;
+	padding: 0rpx 30rpx;
+	view {
+		width: 100% !important;
+	}
 }
 
 .generate-posters {

pages/shop/brands/index.vue

@@ -77,8 +77,8 @@
 						<view class="tip line2">{{item.storeInfo}}</view>
 						<view class="acea-row row-between-wrapper">
 							<view class="acea-row row-middle">
-								<image class="brand-img" src=""></image>
-								<view class="brand-title one-t">小米有品</view>
+								<image class="brand-img" :src="item.pic"></image>
+								<view class="brand-title one-t">{{item.brandName}}</view>
 							</view>
 							<view class="acea-row row-between-wrapper">
 								<text>查看详情</text>
@@ -409,7 +409,6 @@
 					width: 34rpx;
 					height: 34rpx;
 					border-radius: 50%;
-					background-color: #CCEDEB;
 				}
 				.brand-title {
 					width: 240rpx;

pages/user/coupon/UserCoupon/index.vue

@@ -13,9 +13,9 @@
 			</cu-custom>
 		</view>
 
-		<view class="content-box" :style="'height:calc(100vh - '+CustomBar+'px);'">
-			<view class="content">
-				<view class="nav acea-row row-around" :style="'top:calc('+CustomBar+'px+2px)'">
+		<view class="content" :style="'min-height:calc(100vh - '+CustomBar+'px);'">
+			<view class="nav-box" :style="'top:calc('+CustomBar+'px)'">
+				<view class="nav acea-row row-around">
 					<view class="item" @click="setType(0)">
 						<view :class="'title ' + (navType == 0? 'active' : '')">待领取</view>
 					</view>
@@ -26,68 +26,68 @@
 						<view :class="'title acea-row row-middle ' + (navType === 2 ? 'active' : '')">已失效</view>
 					</view>
 				</view>
+			</view>
 
-				<view class="coupon-list" v-if="couponsList.length > 0">
-					<view class="item acea-row row-between" v-cloak v-for="(item, index) in couponsList" :key="index">
-						<image class="coupon-bg" src="@/static/images/coupon-bg.png" mode=""></image>
-						<view class="coupon-left">
-							<view class="left-bg acea-row"
-								:style="item._msg == '已过期'?'background: linear-gradient(135deg, #D4D4D4 0%, #B4B4B4 100%);':''">
-								<view class="radiusLT"></view>
-								<view class="radiusRT"></view>
-								<view class="radiusLB"></view>
-								<view class="radiusRB"></view>
-							</view>
-							<image class="coupon-pattern" src="@/static/images/coupon-pattern.png" mode=""></image>
-							<view class="text-box">
-								<view class="money">¥{{ item.couponPrice }}</view>
-								<!-- <view class="money">7<text>折</text></view> -->
-								<view class="line"></view>
-								<view class="tip acea-row row-between">
-									<view class="">仅限定品牌可用</view>
-									<view v-if="item.endTime === 0">不限时</view>
-									<view v-else>{{navType===0? item.startTime : item.useStartTime }}-{{navType===0? item.endTime:item.useEndTime}}</view>
-								</view>
-							</view>
+			<view class="coupon-list" v-if="couponsList.length > 0">
+				<view class="item acea-row row-between" v-cloak v-for="(item, index) in couponsList" :key="index">
+					<image class="coupon-bg" src="@/static/images/coupon-bg.png" mode=""></image>
+					<view class="coupon-left">
+						<view class="left-bg acea-row"
+							:style="item._msg == '已过期'?'background: linear-gradient(135deg, #D4D4D4 0%, #B4B4B4 100%);':''">
+							<view class="radiusLT"></view>
+							<view class="radiusRT"></view>
+							<view class="radiusLB"></view>
+							<view class="radiusRB"></view>
 						</view>
-						<view class="coupon-right acea-row row-center-column">
-							<image v-if="item._msg == '已过期'" class="tag"
-								src="../../../../static/images/failure-icon.png" mode=""></image>
-							<image v-else-if="item.isUse" class="tag" src="../../../../static/images/gotCoupon-icon.png" mode="">
-							<image v-else-if="item._msg=='可使用'" class="tag" src="../../../../static/images/gotCoupon-icon.png" mode="">
-							</image>
-							<view :class="'type '+(item._msg == '已过期'?'col-fail':'')">{{'满减券' || '折扣券'}}</view>
-							<view :class="'tip '+(item._msg == '已过期'?'col-fail':'')">满{{ item.useMinPrice }}可用</view>
-							<view v-if="item._msg == '已过期'" class="btn btn-fail">不可用</view>
-							<view v-else class="btn" @click="getCoupon(item.id,index)">{{navType===0 && item.isUse? '已领取' : (navType===0 ?'立刻领取' :'去使用')}}</view>
-							<!-- <view class="btn btn-white">去使用</view> -->
+						<image class="coupon-pattern" src="@/static/images/coupon-pattern.png" mode=""></image>
+						<view class="text-box">
+							<view class="money">¥{{ item.couponPrice }}</view>
+							<!-- <view class="money">7<text>折</text></view> -->
+							<view class="line"></view>
+							<view class="tip acea-row row-between">
+								<view class="">仅限定品牌可用</view>
+								<view v-if="item.endTime === 0">不限时</view>
+								<view v-else>{{navType===0? item.startTime : item.useStartTime }}-{{navType===0? item.endTime:item.useEndTime}}</view>
+							</view>
 						</view>
-						<!-- <div class="money" :class="item._type === 0 ? 'moneyGray' : ''">
-				      <div>
-				        ￥<span class="num">{{ item.couponPrice }}</span>
-				      </div>
-				      <div class="pic-num">满{{ item.useMinPrice }}元可用</div>
-				    </div>
-				    <div class="text">
-				      <div class="condition line1">{{ item.couponTitle }}</div>
-				      <div class="data acea-row row-between-wrapper">
-				        <div v-if="item.endTime === 0">不限时</div>
-				        <div v-else>{{ item.createTime }}-{{ item.endTime }}</div>
-				        <div class="bnt gray" v-if="item._type === 0">{{ item._msg }}</div>
-				        <div class="bnt bg-color-red" v-else>{{ item._msg }}</div>
-				      </div>
-				    </div> -->
 					</view>
-				</view>
-
-				<!--暂无优惠券-->
-				<view class="noCommodity" v-if="couponsList.length === 0 && loading === false">
-					<view class="noPictrue">
-						<image :src="`${$VUE_APP_RESOURCES_URL}/images/noCoupon.png`" class="image" />
+					<view class="coupon-right acea-row row-center-column">
+						<image v-if="item._msg == '已过期'" class="tag"
+							src="../../../../static/images/failure-icon.png" mode=""></image>
+						<image v-else-if="item.isUse" class="tag" src="../../../../static/images/gotCoupon-icon.png" mode="">
+						<image v-else-if="item._msg=='可使用'" class="tag" src="../../../../static/images/gotCoupon-icon.png" mode="">
+						</image>
+						<view :class="'type '+(item._msg == '已过期'?'col-fail':'')">{{'满减券' || '折扣券'}}</view>
+						<view :class="'tip '+(item._msg == '已过期'?'col-fail':'')">满{{ item.useMinPrice }}可用</view>
+						<view v-if="item._msg == '已过期'" class="btn btn-fail">不可用</view>
+						<view v-else class="btn" @click="getCoupon(item.id,index)">{{navType===0 && item.isUse? '已领取' : (navType===0 ?'立刻领取' :'去使用')}}</view>
+						<!-- <view class="btn btn-white">去使用</view> -->
 					</view>
+					<!-- <div class="money" :class="item._type === 0 ? 'moneyGray' : ''">
+						<div>
+							￥<span class="num">{{ item.couponPrice }}</span>
+						</div>
+						<div class="pic-num">满{{ item.useMinPrice }}元可用</div>
+					</div>
+					<div class="text">
+						<div class="condition line1">{{ item.couponTitle }}</div>
+						<div class="data acea-row row-between-wrapper">
+							<div v-if="item.endTime === 0">不限时</div>
+							<div v-else>{{ item.createTime }}-{{ item.endTime }}</div>
+							<div class="bnt gray" v-if="item._type === 0">{{ item._msg }}</div>
+							<div class="bnt bg-color-red" v-else>{{ item._msg }}</div>
+						</div>
+					</div> -->
 				</view>
+			</view>
 
+			<!--暂无优惠券-->
+			<view class="noCommodity" v-if="couponsList.length === 0 && loading === false" style="padding-top:208rpx;">
+				<view class="noPictrue">
+					<image :src="`${$VUE_APP_RESOURCES_URL}/images/noCoupon.png`" class="image" />
+				</view>
 			</view>
+
 		</view>
 
 	</view>
@@ -262,69 +262,69 @@
 		}
 	}
 
-	.content-box {
-		padding-top: 4rpx;
-		width: 100vw;
-		position: relative;
-
-		.content {
-			width: 100%;
-			height: 100%;
-			overflow-y: scroll;
+	.content {
+		width: 100%;
+		height: 100%;
+		overflow-y: scroll;
+		background: #FFFFFF;
+		border-radius: 28rpx 28rpx 0rpx 0rpx;
+		
+		.nav-box {
+			width: 100vw;
+			padding-top: 4rpx;
+			position: fixed;
+			left: 0;
+			z-index: 5;
+			background: #F1F1F1;
+		}
+		
+		.nav {
+			width: 100vw;
 			background: #FFFFFF;
+			height: 88rpx;
+			padding: 34rpx 52rpx 12rpx;
 			border-radius: 28rpx 28rpx 0rpx 0rpx;
 
-			.nav {
-				width: 100vw;
-				background: #FFFFFF;
-				height: 88rpx;
-				padding: 34rpx 52rpx 12rpx;
-				position: fixed;
-				left: 0;
-				z-index: 5;
-				border-radius: 28rpx 28rpx 0rpx 0rpx;
+			.item {
+				text-align: center;
+				position: relative;
 
-				.item {
-					text-align: center;
-					position: relative;
-
-					.title {
-						font-size: 26rpx;
-						font-family: PingFang SC;
-						font-weight: 500;
-						color: #3A3A3C;
-						line-height: 38rpx;
-					}
+				.title {
+					font-size: 26rpx;
+					font-family: PingFang SC;
+					font-weight: 500;
+					color: #3A3A3C;
+					line-height: 38rpx;
+				}
 
-					.active {
-						color: #2DB5AE;
-						font-weight: 600;
-					}
+				.active {
+					color: #2DB5AE;
+					font-weight: 600;
+				}
 
-					.title::after {
-						display: block;
-						content: '';
-						width: 100%;
-						height: 2rpx;
-						background: #2DB5AE;
-						position: absolute;
-						bottom: 0;
-						left: 0;
-						opacity: 0;
-						transform: scaleX(0);
-						transition: all .2s cubic-bezier(.18, .89, .17, .88), opacity .15s ease;
-					}
+				.title::after {
+					display: block;
+					content: '';
+					width: 100%;
+					height: 2rpx;
+					background: #2DB5AE;
+					position: absolute;
+					bottom: 0;
+					left: 0;
+					opacity: 0;
+					transform: scaleX(0);
+					transition: all .2s cubic-bezier(.18, .89, .17, .88), opacity .15s ease;
+				}
 
-					.active::after {
-						opacity: 1;
-						transform: scaleX(1);
-					}
+				.active::after {
+					opacity: 1;
+					transform: scaleX(1);
 				}
 			}
+		}
 
-			.coupon-list {
-				padding-top: 98rpx;
-			}
+		.coupon-list {
+			padding-top: 104rpx;
 		}
 	}
-</style>
+</style>