购买商品 下一步 界面优化

mall/src/pages/goods/components/sel-popup.vue

@@ -1,230 +1,239 @@
 <template>
-	<div class="sel-popup">
-        <bottom-popup  class="popup-wrap" :show="show" @close="close">
-            <app-close @close="close" />
-            <div class="tui-popup-box">
-				<div class="tui-product-box">
-					<img :src="imgNormal" class="tui-popup-img" />
-					<div class="tui-popup-price" v-if="!$util.isEmpty(info.goodsStyleList)">
-                        <div class="goods-tit app-bold app-font-size-30">{{ info.goodsStyleList[selIndex].styleName }}</div>
-						<div class="tui-amount tui-bold">￥{{ info.goodsStyleList[selIndex].price }}</div>
-					</div>
-					<div class="tui-popup-price" v-else>
-                        <div class="goods-tit app-bold app-font-size-30">{{ info.goodsName }}</div>
-						<div class="tui-amount tui-bold">￥{{ info.price }}</div>
-					</div>
-				</div>
-				<scroll-view scroll-y class="tui-popup-scroll">
-					<div class="tui-scrolldiv-box">
-						<div class="tui-bold tui-attr-title">款式</div>
-						<div class="tui-attr-box">
-							<div class="tui-attr-item" :class="{'tui-attr-active': selIndex == index}" v-for="(item, index) in info.goodsStyleList" :key="index" @click="changeStyleFn(index)">{{ item.styleName }}</div>
-						</div>
-
-						<div class="tui-number-box tui-bold tui-attr-title">
-							<div class="tui-attr-title">数量</div>
-							<number-box :max="info.stock" :min="1" :value="buyNum" @change="change"></number-box>
-						</div>
-					</div>
-				</scroll-view>
-				<div class="tui-popup-btn">
-                    <button class="button-com red" @click="nextFn">下一步</button>
-				</div>
-			</div>
-        </bottom-popup>
-    </div>
+  <div class="sel-popup">
+    <bottom-popup class="popup-wrap" :show="show" @close="close">
+      <app-close @close="close" />
+      <div class="tui-popup-box">
+        <div class="tui-product-box">
+          <img :src="imgNormal" class="tui-popup-img" />
+          <div class="tui-popup-price" v-if="!$util.isEmpty(info.goodsStyleList)">
+            <div
+              class="goods-tit app-bold app-font-size-30"
+            >{{ info.goodsStyleList[selIndex].styleName }}</div>
+            <div class="tui-amount tui-bold">￥{{ info.goodsStyleList[selIndex].price }}</div>
+          </div>
+          <div class="tui-popup-price" v-else>
+            <div class="goods-tit app-bold app-font-size-30">{{ info.goodsName }}</div>
+            <div class="tui-amount tui-bold">￥{{ info.price }}</div>
+          </div>
+        </div>
+        <scroll-view scroll-y class="tui-popup-scroll">
+          <div class="tui-scrolldiv-box">
+            <template v-if="$util.isEmpty(info.goodsStyleList) == false">
+              <div class="tui-bold tui-attr-title">款式</div>
+              <div class="tui-attr-box">
+                <div
+                  class="tui-attr-item"
+                  :class="{'tui-attr-active': selIndex == index}"
+                  v-for="(item, index) in info.goodsStyleList"
+                  :key="index"
+                  @click="changeStyleFn(index)"
+                >{{ item.styleName }}</div>
+              </div>
+            </template>
+
+            <div class="tui-number-box tui-bold tui-attr-title">
+              <div class="tui-attr-title">数量</div>
+              <number-box :max="maxStock" :min="1" :value="buyNum" @change="change"></number-box>
+            </div>
+          </div>
+        </scroll-view>
+        <div class="tui-popup-btn">
+          <button class="button-com red" @click="nextFn">下一步</button>
+        </div>
+      </div>
+    </bottom-popup>
+  </div>
 </template>
 
 <script>
-import BottomPopup from '@/components/plugin/bottom-popup'
-import NumberBox from '@/components/plugin/number-box'
-import AppClose from '@/components/module/app-close'
+import BottomPopup from "@/components/plugin/bottom-popup";
+import NumberBox from "@/components/plugin/number-box";
+import AppClose from "@/components/module/app-close";
 export default {
-	name: 'sel-popup',
-	components: {
-		BottomPopup,
-		NumberBox,
-		AppClose
+  name: "sel-popup",
+  components: {
+    BottomPopup,
+    NumberBox,
+    AppClose
+  },
+  props: {
+    // 信息
+    info: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    buyNum: {
+      type: Number,
+      default: 1
+    },
+    show: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      selIndex: 0
+    };
+  },
+  computed: {
+    imgNormal() {
+      if (!this.$util.isEmpty(this.info)) {
+        return this.info.smallImgList[0];
+      } else {
+        return "";
+      }
 	},
-	props: {
-		// 信息
-		info: {
-			type: Object,
-			default: () => {
-				return {}
-			}
-		},
-		// selIndex: {
-		// 	type: Number,
-		// 	default: 0
-		// },
-		buyNum: {
-			type: Number,
-			default: 1
-		},
-		show: {
-			type: Boolean,
-			default: true
-		}
-	},
-	data() {
-		return {
-			selIndex: 0
-		}
-	},
-	computed: {
-		imgNormal() {
-			if (!this.$util.isEmpty(this.info)) {
-				return this.info.smallImgList[0]
-			} else {
-				return ''
-			}
-		}
-	},
-	methods: {
-		change(e) {
-			this.$emit('change', e)
-		},
-		close() {
-			this.$emit('close')
-		},
-		changeStyleFn(index) {
-			this.selIndex = index
-		},
-		nextFn() {
-			uni.setStorageSync('buyGoodsDetil', this.info)
-			this.$util.pageTo({
-				url: '/pages/order/buy',
-				query: {
-					goodsId: this.info.id,
-					goodsStyleId: this.$util.isEmpty(this.info.goodsStyleList) ? '' : this.info.goodsStyleList[this.selIndex].id,
-					goodsNum: this.buyNum,
-					selIndex: this.selIndex
-				}
-			})
-		}
-	}
-}
+	maxStock(){
+		return this.info.stock == -1 ? 99999 : this.info.stock
+	}
+  },
+  methods: {
+    change(e) {
+      this.$emit("change", e);
+    },
+    close() {
+      this.$emit("close");
+    },
+    changeStyleFn(index) {
+      this.selIndex = index;
+    },
+    nextFn() {
+      uni.setStorageSync("buyGoodsDetil", this.info);
+      this.$util.pageTo({
+        url: "/pages/order/buy",
+        query: {
+          goodsId: this.info.id,
+          goodsStyleId: this.$util.isEmpty(this.info.goodsStyleList)
+            ? ""
+            : this.info.goodsStyleList[this.selIndex].id,
+          goodsNum: this.buyNum,
+          selIndex: this.selIndex
+        }
+      });
+    }
+  }
+};
 </script>
 
 <style lang="scss" scoped>
 /deep/.popup-wrap {
-	.tui-popup-class {
-		border-top-left-radius: 24rpx;
-        border-top-right-radius: 24rpx;
-        // 适配iphoneX
-		padding-bottom: env(safe-area-inset-bottom);
-	}
-
-	.tui-popup-box {
-		position: relative;
-		padding: 30rpx 30px 100rpx;
-	}
-
-	.tui-popup-btn {
-		width: 100%;
-		position: absolute;
-		left: 0;
-        bottom: 0;
-        padding: 14px 0;
-        @include disFlex(center, center);
-        border-top: 1px solid $borderColor;
-        .button-com {
-            width: 80%;
-            font-size: 32px;
-            // padding-top: 12px;
-            // padding-bottom: 12px;
-        }
-	}
-
-	.tui-product-box {
-		display: flex;
-		align-items: center;
-		font-size: 24rpx;
-		padding-bottom: 30rpx;
-	}
-
-	.tui-popup-img {
-		height: 200rpx;
-		width: 200rpx;
-		border-radius: 24rpx;
-		display: block;
-	}
-
-	.tui-popup-price {
-		padding-left: 20rpx;
-        padding-bottom: 8rpx;
-        .goods-tit {
-            margin-bottom: 75px;
-        }
-	}
-
-	.tui-amount {
-		color: #ff201f;
-		font-size: 36rpx;
-	}
-
-	.tui-popup-scroll {
-		height: 380rpx;
-		font-size: 26rpx;
-	}
-
-	.tui-scrollview-box {
-		padding: 0 30rpx 60rpx 30rpx;
-		box-sizing: border-box;
-	}
-
-	.tui-attr-title {
-		padding: 10rpx 0;
-		color: #333;
-	}
-
-	.tui-attr-box {
-		font-size: 0;
-		padding: 20rpx 0;
-	}
-
-	.tui-attr-item {
-		max-width: 100%;
-		min-width: 200rpx;
-		height: 64rpx;
-		display: -webkit-inline-flex;
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		background: #f7f7f7;
-		padding: 0 26rpx;
-		box-sizing: border-box;
-		border-radius: 32rpx;
-		margin-right: 20rpx;
-		margin-bottom: 20rpx;
-		font-size: 26rpx;
-	}
-
-	.tui-attr-active {
-		background: #fcedea !important;
-		color: #e41f19;
-		font-weight: bold;
-		position: relative;
-	}
-
-	.tui-attr-active::after {
-		content: "";
-		position: absolute;
-		border: 1rpx solid #e41f19;
-		width: 100%;
-		height: 100%;
-		border-radius: 40rpx;
-		left: 0;
-		top: 0;
-	}
-
-	.tui-number-box {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 20rpx 0 30rpx 0;
-		box-sizing: border-box;
-	}
+  .tui-popup-class {
+    border-top-left-radius: 24rpx;
+    border-top-right-radius: 24rpx;
+    // 适配iphoneX
+    padding-bottom: env(safe-area-inset-bottom);
+  }
+
+  .tui-popup-box {
+    position: relative;
+    padding: 30rpx 30px 100rpx;
+  }
+
+  .tui-popup-btn {
+    width: 100%;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    padding: 14px 0;
+    @include disFlex(center, center);
+    border-top: 1px solid $borderColor;
+    .button-com {
+      width: 80%;
+      font-size: 32px;
+    }
+  }
+
+  .tui-product-box {
+    display: flex;
+    align-items: center;
+    font-size: 24rpx;
+    padding-bottom: 30rpx;
+  }
+
+  .tui-popup-img {
+    height: 200rpx;
+    width: 200rpx;
+    border-radius: 24rpx;
+    display: block;
+  }
+
+  .tui-popup-price {
+    padding-left: 20rpx;
+    padding-bottom: 8rpx;
+    .goods-tit {
+      margin-bottom: 75px;
+    }
+  }
+
+  .tui-amount {
+    color: #ff201f;
+    font-size: 36rpx;
+  }
+
+  .tui-popup-scroll {
+    max-height: 380rpx;
+    font-size: 26rpx;
+  }
+
+  .tui-scrollview-box {
+    padding: 0 30rpx 60rpx 30rpx;
+    box-sizing: border-box;
+  }
+
+  .tui-attr-title {
+    padding: 10rpx 0;
+    color: #333;
+  }
+
+  .tui-attr-box {
+    font-size: 0;
+    padding: 20rpx 0;
+  }
+
+  .tui-attr-item {
+    max-width: 100%;
+    min-width: 200rpx;
+    height: 64rpx;
+    display: -webkit-inline-flex;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: #f7f7f7;
+    padding: 0 26rpx;
+    box-sizing: border-box;
+    border-radius: 32rpx;
+    margin-right: 20rpx;
+    margin-bottom: 20rpx;
+    font-size: 26rpx;
+  }
+
+  .tui-attr-active {
+    background: #fcedea !important;
+    color: #e41f19;
+    font-weight: bold;
+    position: relative;
+  }
+
+  .tui-attr-active::after {
+    content: "";
+    position: absolute;
+    border: 1rpx solid #e41f19;
+    width: 100%;
+    height: 100%;
+    border-radius: 40rpx;
+    left: 0;
+    top: 0;
+  }
+
+  .tui-number-box {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20rpx 0 30rpx 0;
+    box-sizing: border-box;
+  }
 }
 </style>

mall/src/pages/goods/detail.vue

@@ -45,7 +45,9 @@
       <div class="module-tit app-size-30">商品详情</div>
       <div class="module-det">
         <!-- <app-img :src="imgNormal" alt mode="widthFix" /> -->
-        <div class="module-det-text" v-html="data.content"></div>
+        <div class="module-det-text">
+<rich-text :nodes="data.content"></rich-text>
+        </div>
       </div>
     </div>
     <!-- 商品详情 -->
@@ -53,7 +55,9 @@
     <div class="module-wrap shop-desc">
       <div class="module-tit app-size-30">简要说明</div>
       <div class="module-det">
-        <div class="module-det-text">{{ data.commonIntro }}</div>
+        <div class="module-det-text">
+          <rich-text :nodes="data.commonIntro"></rich-text>
+        </div>
       </div>
     </div>
     <!-- 简要说明 -->