commit message

pages/product/product/goods/-goods-intro.vue

@@ -0,0 +1,138 @@
+<template>
+  <div>
+    <view class="detail-box">
+      <view class="goods-detail">
+        <view class="detail_padding">
+          <div class="goods-detail-box">
+            <div class="goods-detail-item goods-active">商品介绍</div>
+          </div>
+          <u-empty class="empty" text="暂无商品介绍" mode="data" v-if="!res.intro"></u-empty>
+          <u-parse class="vhtml" :lazy-load="true" :use-cache="true" :show-with-animation="true" :html="res.mobileIntro"></u-parse>
+        </view>
+      </view>
+    </view>
+
+    <view class="detail-box">
+      <view class="goods-detail">
+        <view class="detail_padding">
+          <div class="goods-detail-box">
+            <div class="goods-detail-item goods-active">商品参数</div>
+          </div>
+          <u-divider>商品参数</u-divider>
+           <div class="param-list" v-if="!goodsDetail.goodsParamsList || goodsDetail.goodsParamsList.length == 0">
+              <u-empty text="暂无商品参数" mode="list"></u-empty>
+          </div>
+          <div class="param-list"  v-if="goodsDetail.goodsParamsList && goodsDetail.goodsParamsList.length != 0">
+            <div class="param-item" v-for="(param,index) in goodsDetail.goodsParamsList" :key="index">
+              <div class="param-left">
+                {{param.paramName}}
+              </div>
+              <div class="param-right">
+                {{param.paramValue}}</div>
+            </div>
+          </div>
+         
+        </view>
+      </view>
+    </view>
+  </div>
+</template>
+
+<script>
+import { getGoodsMessage } from "@/api/goods";
+export default {
+  data() {
+    return {
+      goodsDetail: "",
+    };
+  },
+  props: ["res", "goodsId"],
+  async mounted() {
+    let res = await getGoodsMessage(this.goodsId);
+    if (res.data.success) {
+      this.goodsDetail = res.data.result;
+      console.log(this.goodsDetail);
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../product.scss";
+.param-list {
+  padding: 40rpx 0 80rpx 0;
+}
+.param-item {
+  display: flex;
+  justify-content: center;
+  border-bottom: none;
+
+  > .param-left,
+  > .param-right {
+    padding: 16rpx 0;
+    font-size: 24rpx;
+    color: #666;
+    border: 1px solid rgb(220, 223, 230);
+    border-bottom: none;
+  }
+  > .param-left {
+    text-align: center;
+    border-right: none;
+    flex: 3;
+  }
+
+  > .param-right {
+    padding: 0 10rpx;
+    align-items: center;
+    display: flex;
+    flex: 7;
+  }
+}
+.param-item:nth-last-of-type(1) {
+  > .param-left,
+  > .param-right {
+    border-bottom: 1px solid rgb(220, 223, 230);
+  }
+}
+.empty {
+  margin: 40rpx 0;
+}
+.goods-detail /deep/ .vhtml {
+  overflow: hidden;
+
+  width: 100%;
+}
+
+/deep/ img {
+  width: 100%;
+}
+.goods-detail-box {
+  display: flex;
+  justify-content: space-between;
+  // padding: 0 80rpx;
+  height: 120rpx;
+  line-height: 120rpx;
+  > .goods-active {
+    font-weight: 700;
+    &::before {
+      position: absolute;
+      left: 50%;
+      bottom: 15px;
+      -webkit-transform: translateX(-50%);
+      transform: translateX(-50%);
+      content: "";
+      display: block;
+      width: 52rpx;
+      height: 6rpx;
+
+      background-image: linear-gradient(90deg, $jd-color, $jd-light-color);
+    }
+  }
+  > .goods-detail-item {
+    color: #262626;
+    position: relative;
+  }
+}
+.detail_padding {
+}
+</style>