价格

components/mobile/MobileHeader.vue

@@ -187,6 +187,9 @@
         } else if (this.startWith(val, '/mobile/user/info/admin')) {
           this.showSearchIcon = false
           title = '管理员信息'
+        } else if (this.startWith(val, '/mobile/product')) {
+          this.showSearchIcon = false
+          title = '产品详情'
         } else {
           this.showSearchIcon = true
           title = '优软商城'

pages/mobile/center/user/collect/component.vue

@@ -11,6 +11,7 @@
             <p>品牌：<span v-text="comp.componentinfo.brand.nameCn"></span></p>
             <p>类目(产品名称)：<span v-text="comp.componentinfo.kind.nameCn"></span></p>
             <p>型号：<span v-text="comp.componentinfo.code"></span></p>
+            <p>产品描述：<span v-text="comp.componentinfo.description"></span></p>
           </div>
           <div class="vir"></div>
           <div class="fr">

pages/mobile/product/_batchCode.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="mobile-content commodity-detail">
+    <div class="logo-wrap">
+      <img :src="commodity.img || '/images/store/common/default.png'" alt="">
+    </div>
+    <div class="content-wrap">
+      <div class="content-line cl-title">
+        <span class="code text-ellipse inline-block">sddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</span>
+        <div class="focus-wrap inline-block">
+          <i class="iconfont icon-shoucang"></i>
+          <span>店铺关注</span>
+        </div>
+      </div>
+      <div class="content-line cl-price1">
+        <div class="fl">
+          <p class="price-tag">价格:</p>
+          <span>数量:</span>
+        </div>
+        <ul>
+          <li class="text-ellipse inline-block price-level">
+            <p><span>$</span>159.00</p>
+            <span>1+</span>
+          </li>
+          <li class="text-ellipse inline-block price-level">
+            <p><span>$</span>159.00</p>
+            <span>1+</span>
+          </li>
+          <li class="text-ellipse inline-block price-level">
+            <p><span>$</span>159.00</p>
+            <span>1+</span>
+          </li>
+        </ul>
+        <i class="iconfont icon-arrow-down"></i>
+      </div>
+      <div class="content-line cl-price2">
+        <ul>
+          <li class="text-ellipse inline-block price-level">
+            <p><span>$</span>159.00</p>
+            <span>1+</span>
+          </li>
+          <li class="text-ellipse inline-block price-level">
+            <p><span>$</span>159.00</p>
+            <span>1+</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    layout: 'mobile',
+    fetch({ store, route }) {
+      return Promise.all([
+        store.dispatch('shop/findCommodityOnBatchInfo', route.params)
+      ])
+    },
+    computed: {
+      commodity () {
+        return this.$store.state.shop.storeInfo.commodity.data
+      }
+    }
+  }
+</script>
+<style lang="scss" scoped>
+  .commodity-detail {
+    .logo-wrap {
+      height: 5.18rem;
+      line-height: 5.18rem;
+      background: #fff;
+      text-align: center;
+      img {
+        border: .01rem solid #ccc;
+        max-width: 4.06rem;
+        max-height: 3.27rem;
+      }
+    }
+    .content-wrap {
+      -webkit-box-shadow: 0 -3px 7px 0px rgba(143, 141, 141, 0.25);
+      -moz-box-shadow: 0 -3px 7px 0px rgba(143, 141, 141, 0.25);
+      box-shadow: 0 -3px 7px 0px rgba(143, 141, 141, 0.25);
+      height: 3rem;
+      .content-line {
+        height: 1.04rem;
+        border-bottom: .01rem solid #d9d9d9;
+        &.cl-title {
+          padding: .14rem 0 .14rem .2rem;
+          .code {
+            font-size: .3rem;
+            font-weight: bold;
+            max-width: 6.22rem;
+            padding-right: .3rem;
+            border-right: .01rem solid #e1e1e1;
+            line-height: .76rem;
+          }
+          .focus-wrap {
+            width: .8rem;
+            text-align: center;
+            margin-left: .15rem;
+            i {
+              font-size: .4rem;
+              display: block;
+              color: #dddddd;
+            }
+            span {
+              font-size: .2rem;
+            }
+            &.active {
+              i {
+                color: #ff7803;
+              }
+            }
+          }
+        }
+        .price-level {
+          text-align: center;
+          font-size: .24rem;
+          border-right: .01rem solid #b0b0b0;
+          &:last-child {
+            border-right: none;
+          }
+          p {
+            font-size: .44rem;
+            color: #f42d29;
+            span {
+              font-size: .22rem;
+            }
+          }
+        }
+        &.cl-price1 {
+          padding: .18rem .18rem .2rem;
+          .fl {
+            font-size: .24rem;
+            text-align: center;
+            .price-tag {
+              width: .69rem;
+              height: .34rem;
+              line-height: .34rem;
+              text-align: center;
+              background: #f42d29;
+              border-radius: .1rem;
+              color: #fff;
+              margin: .02rem 0 .06rem;
+            }
+          }
+          ul {
+            display: inline-block;
+            li {
+              width: 2.04rem;
+            }
+          }
+          i {
+            font-size: .32rem;
+          }
+        }
+        &.cl-price2 {
+          ul {
+            text-align: center;
+            li {
+              width: 2.3rem;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>