新增选择规格模板

pages/product/addGood/specGood.vue

@@ -3,14 +3,13 @@
     <view class="mode">
       <view class="line">
         <view class="title">规格模板</view>
-        <view class="input">
-          <view>点击选择模板</view>
-          <uni-icons type="right"></uni-icons>
-        </view>
+        <picker style="flex: 1;" mode="selector" :range="attr_mode_list" range-key="template_name" @change="changAttrMode">
+          <view class="input">
+            <view>{{template_name}}</view>
+            <uni-icons type="right"></uni-icons>
+          </view>
+        </picker>
         <view class="btn">添加模板</view>
-      </view>
-      <view class="line-warp">
-
       </view>
       <view class="btn-box" @click="settingSpec()">
         <view class="btn">点击设置规格</view>
@@ -58,6 +57,7 @@
         </view>
       </uni-popup>
     </view>
+    <view style="height: 160rpx;"></view>
     <avatar style="height: 1px;" @upload="doUpload" @getName="getImgName" quality="1" ref="avatar" selWidth="250upx"
       selHeight="250upx">
     </avatar>
@@ -109,7 +109,8 @@
   import { TOKENNAME, HTTP_REQUEST_URL } from '@/config/app.js';
   import { Toast } from "../../../libs/uniApi";
   import {
-    specificationUpdate
+    specificationUpdate,
+    attrList
   } from "@/api/product.js"
   export default {
     components: {
@@ -120,7 +121,9 @@
       return {
         attrValue: [],
         attr: [],
-        attr_mode: {
+        attr_mode_list: [], //规格模板列表
+        template_name: '点击选择模板', //选中的模板名字
+        attr_mode: { // 规格字段模板
           "detail": {},
           "sku": "",
           "stock": 0,
@@ -158,6 +161,7 @@
       })
       this.userInfo = this.$store.state.app.userInfo;
       if (typeof this.userInfo == 'string') this.userInfo = JSON.parse(this.userInfo);
+      this.initAttrModeList();
     },
     methods: {
       updateCode(e) {
@@ -421,6 +425,23 @@
       deleteAttr() {
         this.attrValue.splice(this.deleteIndex, 1);
         this.showDelete = false;
+      },
+      // 初始化规格模板
+      initAttrModeList(){
+        attrList(this.userInfo.service.mer_id,{
+          page: 1,
+          limit: 10000
+        }).then((res)=>{
+          console.log(res);
+          this.attr_mode_list = res.data.list;
+        })
+      },
+      changAttrMode(e){
+        this.attr_template_id = this.attr_mode_list[e.detail.value].attr_template_id;
+        this.template_name = this.attr_mode_list[e.detail.value].template_name;
+        this.attr = JSON.parse(JSON.stringify(this.attr_mode_list[e.detail.value].template_value));
+        this.$set(this, 'attrValue', []);
+        this.addAttrValueCard();
       }
     },
     onBackPress: () => {
@@ -514,9 +535,14 @@
   .mode {
     width: 100%;
     background-color: #fff;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1;
 
     .line {
-      padding: 28rpx;
+      padding: 0 28rpx;
+      height: 80rpx;
       display: flex;
       justify-content: space-between;
       align-items: center;
@@ -542,16 +568,13 @@
       }
     }
 
-    .line-warp {
-      padding: 0 28rpx;
-      display: flex;
-    }
-
     .btn-box {
-      padding: 20rpx 28rpx;
+      height: 80rpx;
       display: flex;
       justify-content: center;
+      align-items: center;
       border-top: 1rpx solid #eee;
+      border-bottom: 1rpx solid #eee;
     }
 
     .mode-ref {