add 款式委托

src/components/hs-material-thumbnail/hs-material-thumbnail.vue

 <template>
-  <view class="home_con_content_order u-m-t-30" >
+  <view class="home_con_content_order" @click="click">
     <image style="width: 100%;height: 160rpx;" src="@/static/images/home/1@2x.png" mode=""></image>
     <view class="order_tit">
       <view class="u-flex justify-between u-font-32">
@@ -28,6 +28,11 @@ export default {
   },
   data() {
     return {};
+  },
+  methods:{
+    click(){
+      this.$emit("click")
+    }
   }
 }
 </script>

src/config/request/apiList/colors.js

+export default {
+    colors:{
+        // 获取颜色组
+        getColors:{
+            url: "/gdep-mdm/colour/selectColour",
+            method: "get",
+        }
+    }
+}

src/config/request/apiList/orderTicket.js

+// 委托单接口列表
+let base = "/gdep-plm/orderTicket"
+export default {
+    orderTicket:{
+        // 委托单详情
+        detail:{
+            url: `${base}/detail`,
+            method: 'get'
+        },
+        // 新建委托单
+        save:{
+            url: `${base}/save`,
+            method: 'post'
+        },
+        // 编辑委托单
+        update:{
+            url: `${base}/update`,
+            method: 'post'
+        },
+        // 拆分委托单
+        split:{
+            url: `${base}/split`,
+            method: 'post'
+        },
+        // 删除委托单
+        del:{
+            url: `${base}/removeByIds`,
+            method: 'post'
+        },
+        // 取消发布
+        abolishByIds:{
+            url: `${base}/abolishByIds`,
+            method: 'post'
+        },
+        // 确认寄样
+        sendSamplesByIds:{
+            url: `${base}/sendSamplesByIds`,
+            method: 'post'
+        },
+        // 风格树
+        styleTreeList:{
+            url: `${base}/styleTreeList`,
+            method: 'get'
+        }
+    }
+}

src/config/request/apis.js

@@ -4,11 +4,15 @@
 import user from './apiList/user.js'
 import auth from './apiList/auth.js'
 import plm from './apiList/plm.js'
+import color from './apiList/colors.js'
+import orderTicket from './apiList/orderTicket.js'
 // import goods from './apiList/goods.js'
 // import base from './apiList/base.js'
 
 export default {
   ...user,
   ...auth,
+  ...color,
+  ...orderTicket,
   ...plm
 };

src/pages/designCommissioned/list.vue

@@ -18,15 +18,16 @@
                        swiperWidth="750"></u-tabs-swiper>
       </view>
       <!--状态栏 tab-->
-      <view v-if="!status[current].status">
+      <view v-if="!status[current].close">
         <view class="list-tip u-flex u-p-r-30 u-p-l-30" >
-          <text class="u-flex-1">
-            全部总共 {{totalNum}}款
-          </text>
+
           <text class="u-flex-1" v-if="current === 3">
             已选中{{ selectedLength}} 款
           </text>
-          <u-icon name="close"></u-icon>
+          <text class="u-flex-1" v-if="current !== 3">
+            {{status[current].label}}总共 {{totalNum}}款
+          </text>
+          <u-icon name="close" @click="closeTip"></u-icon>
         </view>
       </view>
     </view>
@@ -35,9 +36,7 @@
        <view v-for="(item,index) in data">
          <view class="u-flex u-p-t-12 u-p-b-12">
            <text class="u-flex-1">
-             {{ item.label }}(20 款)
-<!--             {{item.children.length}}-->
-<!--             款)-->
+             {{ item.label }}({{item.children.length}} 款)
            </text>
            <text class="" @click="collapse(index)">
              {{ activeIndex === index ? '收起': '展开' }}
@@ -92,107 +91,76 @@
 
 <script>
 import status from './mixins/status'
+import dom from './mixins/dom'
 import HsTipTitle from "../../components/hs-tip-title/hs-tip-title";
 export default {
   name: "list",
   components: {HsTipTitle},
-  mixins: [status],
+  mixins: [status,dom],
   data() {
     return {
       current: 0, // tabs组件的current值，表示当前活动的tab选项
       activeIndex: 0,
       // data: ,
-      res: [] , //列表数据源
-      headerHeight: 0,
-      footerHeight: 0
+      res: [
+        {date: '12月11日', title: '立领夹克',status: 1},
+        {date: '12月11日', title: '立领夹克',status: 1},
+        {date: '12月10日', title: '立领夹克1',status: 1},
+        {date: '12月10日', title: '立领夹克1',status: 1}
+      ] , //列表数据源
     };
   },
   computed:{
     data(){
-      return [
-        {
-          children: [
-            {
-              title: '立领夹克',
-              status: 1
-            },
-            {
-              title: '立领夹克',
-              status: 1
-            },
-            {
-              title: '立领夹克',
-              status: 1
-            },
-            {
-              title: '立领夹克',
-              status: 1
-            },
-            {
-              title: '立领夹克',
-              status: 1
-            },
-          ],
-          label: '12月11日'
-        },
-        {
-          children: [
-            {
-              title: '立领夹克',
-              status: 1
-            },
-          ],
-          label: '12月10日'
+      function arr2Tree(data, id = "colourGroup") {
+        const newList = [],
+            map = Array.from(
+                new Set(
+                    data.map((item) => {
+                      return item[id];
+                    })
+                )
+            );
+        for (let i = 0; i < data.length; i++) {
+          let item = data[i],
+              name = item[id],
+              index = map.indexOf(name);
+          if (newList[index]) {
+            newList[index]["children"].push(item);
+          } else {
+            newList.push({
+              label: name,
+              children: [item]
+            });
+          }
         }
-      ]
+        return newList;
+      }
+
+      return arr2Tree(this.res,"date");
     },
     totalNum(){
-      let res = this.data.reduce((total,item) =>{
-        return total.concat(item.children)
-      },[]);
-      console.log(res)
-      return 0;
+      return this.res.length
     },
     selectedLength(){
-      return this.data.filter
+      return this.res.filter((item) =>{
+        return item.status == 1
+      }).length;
     }
   },
   watch:{
     current(){
+      this.getHeaderHeight();
       this.getFooterHeight();
     }
   },
-  mounted() {
-
-    this.uGetRect("#header").then(res =>{
-      this.headerHeight = res.height;
-    })
-  },
   methods: {
-    getFooterHeight(){
-      this.$nextTick(() =>{
-        this.uGetRect("#footer").then(res =>{
-          this.footerHeight = res.height || 0;
-        })
-      })
-    },
-    uGetRect(selector, all) {
-      return new Promise((resolve) => {
-        uni.createSelectorQuery()
-            .in(this)[all ? 'selectAll' : 'select'](selector)
-            .boundingClientRect((rect) => {
-              if (all && Array.isArray(rect) && rect.length) {
-                resolve(rect)
-              }
-              if (!all && rect) {
-                resolve(rect)
-              }
-              if(rect === null){
-                resolve({})
-              }
-            })
-            .exec()
+    closeTip(){
+      this.$set(this.status, this.current,{
+        ...this.status[this.current],
+        close: true
       })
+      this.getHeaderHeight()
     },
     collapse(index){
       this.activeIndex = this.activeIndex === index ? null : index;

src/pages/designCommissioned/listSelectToAdd.vue

 <!--新增委托-->
 <template>
   <view>
-    <!--新增委托navbar-->
-    <u-navbar title="新增委托"
-              :border-bottom="false"
-              :background="{backgroundColor: 'whitesmoke'}">
-      <template v-slot:right>
-        新增面料
-      </template>
-    </u-navbar>
-    <view class="title u-p-30">选择面料</view>
-    <view class="u-p-30 bg-fff">
+    <view id="header">
       <!--新增委托navbar-->
-      <u-search placeholder="请输入面料名称" v-model="keyword"
-                border-color="#e1e1e1" height="76"
-                bg-color="#fff" :show-action="false"></u-search>
+      <u-navbar title="新增委托"
+                :border-bottom="false"
+                :background="{backgroundColor: 'whitesmoke'}">
+        <template v-slot:right>
+          新增面料
+        </template>
+      </u-navbar>
+      <view class="title u-p-30">选择面料</view>
+      <view class="u-p-30 bg-fff">
+        <!--新增委托navbar-->
+        <u-search placeholder="请输入面料名称" v-model="keyword"
+                  border-color="#e1e1e1" height="76"
+                  bg-color="#fff" :show-action="false"></u-search>
+      </view>
     </view>
     <!-- 列表 确定-->
-    <view class="u-p-30">
-      <radio-group style="width: 100%">
-        <view v-for="(item, index) in list" :key="item.id" class="u-flex u-m-b-20">
-          <view>
-            <radio :value="item.value" :checked="index === selectedIndex" />
-          </view>
-          <hs-material-thumbnail :item="item"></hs-material-thumbnail>
+    <view class="u-p-30 body" :style="{ bottom: footerHeight+ 'px', top: headerHeight + 'px' }">
+      <view v-for="(item, index) in list" :key="item.id" class="u-flex u-m-b-20">
+        <view class="u-m-r-30">
+          <u-icon :name="index === selectedIndex ? 'checkmark-circle-fill': 'checkmark-circle'"
+            color="#000" size="40"
+                  @click="triggerSelectItem(index)"
+          />
         </view>
-      </radio-group>
+        <hs-material-thumbnail :item="item" @click="toMaterialDetail(item)"></hs-material-thumbnail>
+      </view>
     </view>
     <!-- 底部按钮 确定-->
     <view class="footer" id="footer">
       <view class="footer-btn">
 <!--        /* 以下形式在微信小程序会无效，APP和H5有效 */-->
-        <u-button class="custom-style" shape="circle">
+        <u-button :disabled="selectedIndex === -1"
+                  @click="toAddItem"
+                  class="custom-style" shape="circle"
+        >
           确定
         </u-button>
       </view>
@@ -40,16 +46,17 @@
 </template>
 
 <script>
+import dom from './mixins/dom'
 import HsSelectItem from "../../components/hs-select-item/hs-select-item";
 import HsMaterialThumbnail from "../../components/hs-material-thumbnail/hs-material-thumbnail";
 export default {
   name: "listSelectToAdd",
   components: {HsMaterialThumbnail, HsSelectItem},
+  mixins:[dom],
   data(){
     return {
       keyword: "",
-      selectedIndex: "",
-      selectedItem: {},
+      selectedIndex: -1,
       list: [
         {
           title: '加厚荷兰绒绒布布料',
@@ -59,12 +66,47 @@ export default {
           title: '加厚荷兰绒绒布布料加厚荷兰绒绒布布料',
           id: 12
         },
+        {
+          title: '加厚荷兰绒绒布布料',
+          id: 221
+        },
         {
           title: '加厚荷兰绒绒布布料',
           id: 22
+        },
+        {
+          title: '加厚荷兰绒绒布布料',
+          id: 224
+        },
+        {
+          title: '加厚荷兰绒绒布布料',
+          id: 222
         }
       ]
     }
+  },
+  methods:{
+    triggerSelectItem(index){
+      this.selectedIndex = index === this.selectedIndex ? -1 : index;
+    },
+    // 跳转到新增详情页面
+    toAddItem({id}){
+      this.$Router.push({
+        path:"/pages/designCommissioned/addItem",
+        query:{
+          id
+        }
+      })
+    },
+    // 跳转到面料详情
+    toMaterialDetail({id}){
+      this.$Router.push({
+        path:"/pages/home/fabricDetails",
+        query:{
+          id
+        }
+      })
+    },
   }
 }
 </script>
@@ -72,6 +114,17 @@ export default {
 <style scoped lang="scss">
 $h-color: #AF8D66;
 $main-color: #fff;
+.body{
+  position: absolute;
+  width: 100%;
+  height: auto;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  top: 0;
+  overflow-y: auto;
+
+}
 .title{
   color: $h-color;
   background-color: whitesmoke;

src/pages/designCommissioned/mixins/dom.js

+export default {
+    data(){
+        return{
+            headerHeight: 0,
+            footerHeight: 0
+        }
+    },
+    methods:{
+        getHeaderHeight(){
+            this.$nextTick(() =>{
+                this.uGetRect("#header").then(res =>{
+                    this.headerHeight = res.height;
+                })
+            })
+        },
+        getFooterHeight(){
+            this.$nextTick(() =>{
+                this.uGetRect("#footer").then(res =>{
+                    this.footerHeight = res.height;
+                })
+            })
+        },
+        uGetRect(selector, all) {
+            return new Promise((resolve) => {
+                uni.createSelectorQuery()
+                    .in(this)[all ? 'selectAll' : 'select'](selector)
+                    .boundingClientRect((rect) => {
+                        if (all && Array.isArray(rect) && rect.length) {
+                            resolve(rect)
+                        }
+                        if (!all && rect) {
+                            resolve(rect)
+                        }
+                        if(rect === null){
+                            resolve({})
+                        }
+                    })
+                    .exec()
+            })
+        },
+    },
+    mounted() {
+        this.getHeaderHeight();
+        this.getFooterHeight();
+    },
+}