新增企业产品库

pages/mobile/center/vendor/productList/index.vue

@@ -0,0 +1,402 @@
+<template>
+  <div class="product-list-wrapper">
+    <div class="Kuang">
+      <div class="overflow-hidden fixedOver" ref="mobileModalBox">
+        <div class="content">
+          <div class="infob">
+            <div class="info"><div class="name">品牌：</div><div>{{cnmpBand}}</div></div>
+            <div class="info"><div class="name">物料名称(类目)：</div><div>{{cnmpType || '-'}}</div></div>
+            <div class="info"><div class="name">型号：</div><div>{{cnmpCode}}</div></div>
+            <div class="info"><div class="name">规格：</div><div>{{cnmpSpec}}</div></div>
+          </div>
+          <div class="content_sq" v-bind:key="item.id" v-for="(item, index) in vendorlist" >
+            <div class="labelBg">
+              <div class="labelinfo" style="margin-left: -0.1rem">
+                <div class="labelicon" style="vertical-align:top;margin-top: 0.09rem">标签</div>
+                <div class="labeltext">{{item.tag}}</div>
+              </div>
+              <div class="middle">
+                <div class="list clearfix" style="height: auto">
+                  <div class="fl">
+                    <div class="name">
+                      <div class="pms">
+                        {{item.storeid === '33069557578d44e69bd91ad12d28a8d4' ? '寄售' : '自营'}}
+                      </div>
+                    </div>
+                    <span @click="update(item)">编辑</span>
+                  </div>
+                  <div class="fr">
+                    <div class="textinfo" v-if="item.breakUp">可拆卖</div>
+                  </div>
+                </div>
+                <div class="list list-long clearfix" style="height: auto">
+                  <div class="fl">
+                    <div class="name">规格：</div>
+                    <div class="text">{{item.spec || '-'}}</div>
+                  </div>
+                </div>
+                <div class="list clearfix" style="height: auto">
+                  <div class="fl">
+                    <div class="name">最小包装数：</div>
+                    <div class="text">{{item.minPackQty}}</div>
+                  </div>
+                  <div class="fr">
+                    <div class="name">交期(天)：</div>
+                    <div class="text" v-if="item.b2cMaxDelivery && (item.b2cMaxDelivery != item.b2cMinDelivery)" v-text="item.b2cMinDelivery + '-'+ item.b2cMaxDelivery"></div>
+                    <div class="text" v-if="item.b2cMaxDelivery && (item.b2cMaxDelivery == item.b2cMinDelivery)" v-text="item.b2cMinDelivery"></div>
+                  </div>
+                </div>
+
+                <div class="list clearfix" style="height: auto">
+                  <div class="fl">
+                    <div class="name">包装方式：</div>
+                    <div class="text">{{item.packaging || '无包装信息'}}</div>
+                  </div>
+                  <div class="fr">
+                    <div class="name">库存：</div>
+                    <div class="text">{{item.reserve}}</div>
+                  </div>
+                </div>
+
+                <div class="list clearfix" style="height: auto">
+                  <div class="fl">
+                    <div class="name">生产日期：</div>
+                    <div class="text" :title="item.produceDate">{{item.produceDate || '-'}}</div>
+                  </div>
+                  <div class="fr">
+                    <div class="name">最小起订量：</div>
+                    <div class="text" style="color: #f31919">{{item.minBuyQty}}</div>
+                  </div>
+                </div>
+
+                <div class="list clearfix" style="height: auto">
+                  <div class="name left">价格梯度：</div>
+                  <div class="table left">
+                    <ul>
+                      <li class="title">
+                        <div>分段数量/PCS</div>
+                        <div>分段单价</div>
+                      </li>
+                      <li v-for="price in item.prices">
+                        <div>{{price.start}}+</div>
+                        <div v-if="item.currencyName == 'RMB'">¥{{price.rMBPrice}}</div>
+                        <div v-else>${{price.rMBPrice}}</div>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script type="text/javascript">
+  import { PullUp } from '~components/mobile/common'
+  import axios from '~plugins/axios'
+  export default {
+    name: 'productList',
+    layout: 'mobile',
+    middleware: 'authenticated',
+    methods: {
+      closeMoreinfo() {},
+      update(item) {
+        this.$store.commit('product/brand/GET_ONSALE_DETAILS_SUCCESS', item)
+        this.$router.push('/mobile/center/vendor/productdetails')
+      }
+    },
+    async asyncData({route}) {
+     let { data } = await axios.get(`/trade/products/goods/productid/${route.query.uuid}`)
+      return {
+        vendorlist: data
+      }
+    },
+    mounted() {
+      this._initscroll()
+    },
+    data() {
+      return {
+        vendorlist: {}
+      }
+    },
+    components: {
+      PullUp
+    },
+    computed: {
+      cnmpCode() { // 型号
+        return this.vendorlist[0].code || '-'
+      },
+      cnmpType() { // 类目
+        return this.vendorlist[0].kindNameCn || '-'
+      },
+      cnmpBand() { // 品牌
+        return this.vendorlist[0].brandNameEn || '-'
+      },
+      cnmpSpec () {
+        return this.vendorlist[0].spec
+      }
+    }
+  }
+</script>
+
+<style lang="scss" scoped>
+  @mixin overFlowHidden {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  @mixin lineHeight($value) {
+    height: $value;
+    line-height: $value;
+  }
+  @mixin Fixed() {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: 0
+  }
+  .product-list-wrapper {
+    .fixedOver {
+      position: absolute;
+      top: 1.26rem;
+      bottom: 0.98rem;
+      overflow: hidden;
+      background: #f1f3f6;
+    }
+    i {
+      font-size: .6rem;
+      position: absolute;
+      right: -0.3rem;
+      top: -0.35rem;
+      color: #fff;
+      &::after {
+        position: absolute;
+        top: -0.1rem;
+        left: -0.1rem;
+        right: -0.1rem;
+        bottom: -0.1rem;
+        content: ' '
+      }
+    }
+    .title {
+      background: #3f84f6;
+      height: 0.7rem;
+      line-height: 0.7rem;
+      color: #fff;
+      text-align: center;
+      font-size: 0.3rem;
+      position: relative;
+    }
+    .content {
+      .infob {
+        background: #e3edfd;
+        padding: 0.2rem;
+        .info {
+          color: #333;
+          font-size: 0.3rem;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          margin-bottom: 0.18rem;
+          .name {
+            color: #666;
+          }
+          div {
+            display: inline-block;
+          }
+        }
+      }
+      .content_sq {
+        margin: 0.1rem auto;
+        background: #fff;
+        padding: 0.2rem 0;
+        .list {
+          margin-bottom: 0.18rem;
+        }
+        .fl {
+          width: 3.2rem;
+        }
+        .table {
+          width: 4.2rem;
+          margin-top: -0.1rem;
+        }
+        .labelinfo {
+          background-image: url('/images/mobile/@2x/labelTop.png');
+          background-repeat: no-repeat;
+          width: 6.29rem;
+          height: 0.64rem;
+          line-height: 0.64rem;
+          background-size: 100%;
+          margin-top: 0rem;
+          margin-right: 0rem;
+          background-color: rgba(0, 0, 0, 0);
+          color: #666;
+        }
+      }
+    }
+    .labelinfo {
+      padding: 0 .24rem;
+      background: #e6e6e6;
+      height: 0.6rem;
+      line-height: 0.6rem;
+      width: 100%;
+      color: #666;
+      font-size: 0.26rem;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      .labelicon {
+        background-image: url('/images/mobile/@2x/label_icon.png');
+        background-repeat: no-repeat;
+        width: 0.61rem;
+        height: 0.38rem;
+        line-height: 0.38rem;
+        background-size: 100%;
+        color: #fff;
+        margin-right: 0.1rem;
+        display: inline-block;
+        font-size: 0.22rem;
+        text-align: center;
+        /*vertical-align: middle;*/
+      }
+      .labeltext{
+        display: inline-block;
+        /*vertical-align: middle;*/
+      }
+    }
+    .label-text {
+      padding: .09rem .21rem;
+      border-radius: .22rem;
+      background: #ddd;
+      font-size: .26rem;
+      color: #666;
+      display: inline-block;
+      margin-left: .22rem;
+      margin-bottom: .25rem;
+    }
+    .middle {
+      padding: 0.24rem 0.24rem 0px;
+      background: #fff;
+      .pms {
+        color: #f57710;
+        border: 1px solid #f57710;
+        border-radius: 0.4rem;
+        background: #fff;
+        font-size: 0.24rem;
+        height: 0.4rem;
+        line-height: 0.4rem;
+        width: 0.8rem;
+        text-align: center;
+      }
+      .list {
+        /*height: 0.46rem;*/
+        .left {
+          float: left;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .textinfo {
+          color: #0067e7;
+          font-size: 0.3rem;
+        }
+        .button {
+          font-size: 0.26rem;
+          color: #fff;
+          width: 0.92rem;
+          text-align: center;
+          border-radius: 5px;
+          /*border:1px solid #1a58dd;*/
+          background: #1a58dd;
+          display: inline-block;
+          margin-right: 0.2rem;
+          line-height: 0.33rem;
+          height: 0.37rem;
+        }
+        margin-bottom: 0.18rem;
+        &::after{
+          clear: both;
+          display: block;
+          content: ' ';
+          visibility: hidden;
+          zoom: 1;
+        }
+        .fl {
+          width: 4.3rem;
+          float: left;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        .fr {
+          text-align: left;
+          width: 2.6rem;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+        &.list-long {
+          .fl {
+            width: 100% !important;
+          }
+        }
+        .name {
+          color: #666;
+          font-size: 0.3rem;
+          display: inline-block;
+        }
+        .text {
+          display: inline-block;
+          color: #333;
+          font-size: 0.3rem
+        }
+        .table {
+          width: 5.5rem;
+          margin-bottom: 0;
+          margin-top: 0;
+          li {
+            height: 0.43rem;
+            line-height: 0.43rem;
+            border-left: .01rem solid #c5c5c5;
+            font-size: .28rem;
+            &::after {
+              clear: both;
+              display: block;
+              content: ' ';
+              visibility: hidden;
+              zoom: 1;
+            }
+            div {
+              text-align: center;
+              width: 50%;
+              float: left;
+              border-right: .01rem solid #c5c5c5;
+              border-bottom: .01rem solid #c5c5c5;
+            }
+            &:nth-child(odd) {
+              background: #ddd;
+              color: #666;
+              font-size: 0.28rem;
+            }
+            &:nth-child(even) {
+              background: #fcfcfc;
+              color: #666;
+              font-size: 0.28rem;
+            }
+            &:nth-last-of-type(1){
+              color: #f31919;
+            }
+            &.title {
+              font-size: 0.28rem;
+              color: #333;
+            }
+          }
+        }
+      }
+    }
+  }
+</style>