Browse Source

新增物流信息

shenjj 7 years ago
parent
commit
c26103282f
1 changed files with 224 additions and 0 deletions
  1. 224 0
      pages/mobile/center/vendor/logistics/distributionSpec.vue

+ 224 - 0
pages/mobile/center/vendor/logistics/distributionSpec.vue

@@ -0,0 +1,224 @@
+<template>
+  <div class="logistics-wrapper">
+    <div class="com-mobile-header">
+      <a @click="goLastPage"><i class="iconfont icon-fanhui"></i></a>
+      <p>物流信息
+      </p>
+    </div>
+    <div class="logistics-content" id="logistics-content">
+      <div class="logistics-nav">
+        <div class="order-nav">
+          <div class="active"><span>配送规则</span></div>
+          <div><span>配送商</span></div>
+          <div><span>自提点</span></div>
+          <div><span>发货地址</span></div>
+        </div>
+      </div>
+      <ul class="distributionSpec_ul">
+        <li v-for="(item, index) in resourceList.content">
+          <div class="clearfix">
+            <div class="pull-left Textoverhiden">
+              <div class="wrapper-line clearfix">
+                <div class="name pull-left">优先级:</div>
+                <div class="name-text pull-left">{{item.num}}</div>
+              </div>
+              <div class="wrapper-line clearfix">
+                <div class="name pull-left">配送方式:</div>
+                <div class="name-text pull-left">
+                  {{item.shippingMethod === 1301 ? '第三方配送' : (item.shippingMethod === 1302 ? '卖家配送': '上门自提')}}
+                </div>
+              </div>
+              <div class="wrapper-line clearfix">
+                <div class="name pull-left">规则名称:</div>
+                <div class="name-text pull-left">{{item.ruleName}}</div>
+              </div>
+            </div>
+            <div class="pull-right">
+              <div class="dropMenu" @click="showDropMenu(index)">{{item.active === 1 ? '已生成' : '暂不生效'}}<i class="iconfont icon-arrow-down"></i></div>
+              <div class="dropList">
+                <div @click="SaveBtn()">暂不生效</div>
+                <div @click="SaveBtn()">生效</div>
+              </div>
+            </div>
+          </div>
+          <div class="item-bottom clearfix">
+            <div class="pull-left w50">
+              <i class="iconfont icon-edit"></i>修改
+            </div>
+            <div class="pull-right w50">
+              <i class="iconfont icon-lajitong"></i>删除
+            </div>
+          </div>
+        </li>
+      </ul>
+    </div>
+
+    <pull-up :fixId="'logistics-content'"
+             :searchMore="isSearchSearchingMore"
+             :allPage="allPage"
+             :page="param.page"
+             @pullUpAction="getMoreSearch"></pull-up>
+  </div>
+</template>
+
+<script type="text/javascript">
+  import { PullUp } from '~components/mobile/common'
+  import axios from '~plugins/axios'
+  export default {
+    name: 'distributionSpec',
+    layout: 'mobile',
+    middleware: 'authenticated',
+    data() {
+      return {
+        showDropMenuIndex: '',
+        param: {
+          count: 10,
+          page: 1,
+          sorting: { 'num': 'asc' }
+        },
+        isSearchSearchingMore: false,
+        resourceList: {}  // 实际渲染网页的资源
+      }
+    },
+    async asyncData({store, commit}) {
+      let { data } = await axios.get(`/trade/distributionRule/page`, {count: 10, page: 1, sorting: { 'num': 'asc' }})
+      return {
+        resourceList: data
+      }
+    },
+    methods: {
+      // 生效按钮事件
+      SaveBtn() {},
+      // 显示下拉按钮
+      showDropMenu(index) {
+        this.showDropMenuIndex = index
+      },
+      // 加载更多
+      getMoreSearch() {}
+    },
+    computed: {
+      allPage() {
+        return this.resourceList.totalElements
+      }
+    },
+    components: {
+      PullUp
+    }
+  }
+</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
+  }
+  .logistics-wrapper {
+    @include Fixed();
+    z-index: 111;
+    background: #f1f3f6;
+    .logistics-content {
+      margin-top: 0.88rem;
+      overflow-y: scroll;
+      height: calc(100vh - 0.88rem)
+    }
+    .order-nav {
+      background: #fff;
+      div {
+        height: 0.82rem;
+        line-height: 0.82rem;
+        display: inline-block;
+        width: 25%;
+        text-align: center;
+        font-size: .28rem;
+        color: #666;
+        &.active span{
+          color: #3f84f6;
+          border-bottom: 0.04rem solid #3f84f6;
+          padding-bottom: 0.2rem;
+        }
+      }
+    }
+    .distributionSpec_ul {
+      li {
+        margin: 0.2rem auto 0;
+        background: #fefefe;
+        width: 7.1rem;
+        height: 2.64rem;
+        padding: 0.3rem 0.24rem 0;
+        border: 1px solid #e4e6e9;
+        border-radius: 5px;
+        .Textoverhiden {
+          @include overFlowHidden();
+          width: 5rem;
+        }
+        .dropMenu {
+          font-size: 0.26rem;
+          color: #666;
+          border: 1px solid #d9d9d9;
+          background: #fff;
+          width: 1.37rem;
+          @include lineHeight(0.46rem);
+          border-radius: 0.46rem;
+          text-align: center;
+          i {
+            font-size: 0.2rem;
+          }
+        }
+        .pull-right {position: relative}
+        .dropList {
+          position: absolute;
+          border: 1px solid #d9d9d9;
+          background: #fff;
+          font-size: 0.26rem;
+          width: 1.37rem;
+          top: 0.46rem;
+          text-align: center;
+          div {
+            @include lineHeight(0.46rem);
+          }
+        }
+        .wrapper-line {
+          margin-bottom: 0.16rem;
+          .name {
+            font-size: 0.28rem;
+            color: rgba(63, 132, 246, 0.9);
+            width: 1.4rem;
+            text-align: right;
+          }
+          .name-text {
+            font-size: 0.28rem;
+            color: #333;
+          }
+        }
+        .item-bottom {
+          color: #333;
+          @include lineHeight(0.8rem);
+          font-size: 0.26rem;
+          text-align: center;
+          border-top: 1px solid #d3d3d3;
+          .pull-left {border-right: 1px solid #d3d3d3;}
+          .pull-left, .pull-right {
+            width: 50%;
+            text-align: center;
+          }
+          i {
+            font-size: 0.34rem;
+            vertical-align: middle;
+          }
+        }
+      }
+    }
+  }
+</style>