更新多规格添加

App.vue

@@ -95,7 +95,7 @@
 
 
 
-			if (option.referrerInfo?.extraData?.uniMP) {
+			if (option?.referrerInfo?.extraData?.uniMP) {
 				uni.setStorageSync('uniMP', option.referrerInfo?.extraData?.uniMP);
 				// uni.setStorageSync('APP_token', option.referrerInfo?.extraData?.token);
 				this.$store.commit("LOGIN", {

pages/index/index.vue

@@ -131,8 +131,8 @@
               <view class="list-one_right-b">待发货</view>
             </view>
           </view>
-          <view class="" v-for="(g,h) in item.orderProduct">
+          <view class="">
-            <view class="list-two">
+            <view class="list-two" v-for="(g,h) in item.orderProduct">
               <view class="list-two_left">
                 <image :src="g.cart_info.product.image" mode=""></image>
               </view>
@@ -964,7 +964,6 @@
             this.getindex()
             this.getGoods(true)
           }
-
           merstreet({
             street_code: res.data.mer_info.street_id
           }).then((res) => {
@@ -977,7 +976,7 @@
             this.company = res.data.title
             this.organization_code = res.data.organization_code
           }).catch(res => {
-            console.log(res)
+            console.log('错误:', res)
           })
         });
       },

pages/product/addGood/addGood.vue

@@ -43,7 +43,7 @@
 
       <!-- 商品详情 -->
       <commodityComponent ref="commodityRef" v-if="showCommodity" :key="showCommodity" :showCommodity="showCommodity"
-        :product_id="product_id" :merId="merId" :code="code" @lastStep="lastStep">
+        :product_id="product_id" :merId="merId" :code="code">
       </commodityComponent>
 
       <view class="popup_group">
@@ -93,11 +93,14 @@
           show-cancel-button confirm-text="继续" @confirm="changeSpecType2" @cancel="showSpecType=false"
         ></u-modal>
       </picker>
-      <priceComponent v-if="setFormData.spec_type==0" ref="priceRef" :product_id="product_id" :bar_code="code" @updateCode="updateCode">
+      <priceComponent v-if="setFormData.spec_type==0" :datas="setFormData.attrValue[0]" ref="priceRef" :product_id="product_id" :bar_code="code" @updateCode="updateCode">
       </priceComponent>
       <view v-else class="popup_group" style="margin-top: 0;border-top: 1rpx solid #eeeeee;">
         <view class="popup_group_item" @click="navToSpecGood()">
-          <view class="popup_group_item_label" style="flex: 1; text-align: center;">设置多规格</view>
+          <view class="popup_group_item_label" style="flex: 1; text-align: center;">
+            设置多规格
+            <text v-if="setFormData.attrValue.length>0">({{setFormData.attrValue.length}})</text>
+          </view>
         </view>
       </view>
       
@@ -134,7 +137,7 @@
           </view>
           <view class="radio">
             <view class="radio_label ">送货方式</view>
-            <checkbox-group class="select_group flex_start" @change="deliveryWayChange">
+            <checkbox-group class="select_group flex_start">
               <label class="radio_select" v-for="(val, i) in deliveryFreeList" :key="val.value">
                 <view>
                   <checkbox :value="val.value" disabled :checked="val.value" />
@@ -153,11 +156,6 @@
       <view class="handle_button" @click="submitCreatedGoods">提交</view>
     </view>
 
-    <uni-popup ref="tempId" type="bottom">
-      <linkage-assembly selectProductTitle="选择运费模板" :form="setFormData" :classifiedData="classified['temp_id']"
-        :selectProductItem="productItem" :mer_id="merId" @getLinkageData="getTempIdData" @multipleList="multipleList"
-        @close="$refs.tempId.close()" @scrolltolower="scrolltolower"></linkage-assembly>
-    </uni-popup>
 
     <!-- 图片选择器 -->
     <avatar @upload="doUpload" @getName="getImgName" quality="1" ref="avatar" selWidth="250upx" selHeight="250upx">
@@ -261,7 +259,9 @@
       this.showCommodity = true;;
       this.initData();
       this.initClasiffy();
-      this.initDataEditData();
+      if(this.product_id){
+        this.initDataEditData();
+      }
     },
     onBackPress() {},
     onShow() {
@@ -545,9 +545,12 @@
       // 创建商品
       submitCreatedGoods() {
         console.log('创建商品');
+        return console.log('商品规格', this.setFormData.attr);
         console.log('是否推荐', this.$refs.commodityRef.addGoodsSecoundData);
         console.log('商品详情', this.$refs.commodityRef.goodsDis, this.$refs.commodityRef.store_name);
-        console.log('价格库存', this.$refs.priceRef.singleSpecification);
+        if(this.setFormData.spec_type==0){
+          console.log('价格库存', this.$refs.priceRef.singleSpecification);
+        }
         let postData = {
           ...this.setFormData,
           ...this.$refs.commodityRef.addGoodsSecoundData,
@@ -556,8 +559,10 @@
             image: this.$refs.commodityRef.goodsDis?.imageList || []
           },
           video_link: this.$refs.commodityRef.addGoodsSecoundData.video_link,
-          attrValue: [this.$refs.priceRef.singleSpecification]
         };
+        if(this.setFormData.spec_type==0){
+          postData.attrValue = [this.$refs.priceRef.singleSpecification];
+        }else postData.attrValue = this.setFormData.attrValue;
         postData.stock = postData.attrValue[0]?.stock||0;
         // return console.log('商品数据', postData);
         Loading();
@@ -612,7 +617,13 @@
           url:'/pages/product/addGood/specGood?product_id=' + this.product_id,
           success: (e) => {
             // console.log(this.setFormData.attrValue, e);
-            e.eventChannel.emit('updateAttrValue', this.setFormData.attrValue);
+            e.eventChannel.emit('updateAttrValue', {
+              attrValue: JSON.parse(JSON.stringify(this.setFormData.attrValue)),
+              attr: JSON.parse(JSON.stringify(this.setFormData.attr))
+            });
+            uni.$once('updateSpecType', (attr)=>{
+              this.setFormData.attrValue = JSON.parse(JSON.stringify(attr));
+            })
           }
         })
       }

pages/product/addGood/components/price.vue

@@ -26,7 +26,7 @@
     data() {
       return {
         singleSpecification: {
-          sku: '', //名称
+          // sku: '', //名称
           price: '', // 售价
           cost: '', // 成本价
           stock: '', // 库存
@@ -35,7 +35,7 @@
           bar_code: '', // 商品条码
           weight: '', // 重量
           volume: '', // 体积
-          image: '',
+          // image: '',
           extension_one: '',
           extension_two: ''
         },

pages/product/addGood/specGood.vue

@@ -1,40 +1,101 @@
 <template>
   <view>
-    <avatar style="height: 1px;" @upload="doUpload" @getName="getImgName" quality="1" ref="avatar" selWidth="250upx" selHeight="250upx">
+    <view class="mode">
+      <view class="line">
+        <view class="title">规格模板</view>
+        <view class="input">
+          <view>点击选择模板</view>
+          <uni-icons type="right"></uni-icons>
+        </view>
+        <view class="btn">添加模板</view>
+      </view>
+      <view class="line-warp">
+
+      </view>
+      <view class="btn-box" @click="test()">
+        <view class="btn">点击设置规格</view>
+      </view>
+      <uni-popup ref="modeRef" type="top">
+        <view class="mode-ref" style="min-height: 300rpx;width: 100%;background-color: #fff;">
+          <view style="height: 1rpx;"></view>
+          <scroll-view scroll-y style="max-height: 550rpx;min-height: 220rpx;">
+            <view class="mode-item" v-for="(item, index) in attr" :key="item+index">
+              <view class="mode-head">{{item.value}}</view>
+              <view class="mode-body">
+                <view class="box mode-body-box" v-for="(t, i) in item.detail" :key="t+i"
+                  @click="deleteAttrTow(index, i)">
+                  {{t}}<uni-icons type="close" color="#f84221" style="margin-left: 10rpx;"></uni-icons>
+                </view>
+                <view class="box mode-body-add" @click="addSpecTow(index)"><uni-icons type="plus" color="#333"
+                    style="margin-right: 10rpx;"></uni-icons>添加</view>
+              </view>
+              <view class="delete-spec" @click="deleteAttrOne(index)"><uni-icons type="close" color="#f84221"
+                  style="margin-right: 10rpx;"></uni-icons>删除规格</view>
+            </view>
+          </scroll-view>
+          <view class="tab">
+            <view class="add-btn" @click="addSpecOne()">添加新规格</view>
+            <view class="save">保存模板</view>
+          </view>
+        </view>
+      </uni-popup>
+
+      <uni-popup ref="inputModeRef" type="center">
+        <view class="input-mode">
+          <view class="head-tips">{{addAttrType==1?'添加规格值': '添加新规格'}}</view>
+          <view class="input-box">
+            <input v-if="addAttrType==2" v-model="attrName" placeholder="请输入规格名称" />
+            <input v-model="attrDetail" placeholder="请输入规格值" />
+          </view>
+          <view class="show-btn-box">
+            <view class="cof prai" @click="addAttr()">确认</view>
+            <view class="can" @click="closeAddAttr()">取消</view>
+          </view>
+        </view>
+      </uni-popup>
+    </view>
+    <avatar style="height: 1px;" @upload="doUpload" @getName="getImgName" quality="1" ref="avatar" selWidth="250upx"
+      selHeight="250upx">
     </avatar>
     <block v-for="(item,index) in attrValue" :key="item.uuid">
-      <view class="popup_group">
+      <view class="popup_group head_close">
-        <view class="popup_group_item head_close">
+        <view class="popup_group_item " v-for="(value, key) in item.detail" :key="value">
-          <view class="popup_group_item_label"><text style="color: #e93323;font-size: 28rpx;">{{'* '}}</text>规格名称</view>
+          <view class="popup_group_item_label">{{key}}</view>
-          <view class="popup_group_item_value"><input v-model="item.sku" type="text"
+          <view class="popup_group_item_value">
-              placeholder="请填写规格名称" /></view>
+            <input :value="value" type="text" disabled placeholder="请填写规格名称" />
-          <view class="delete_btn" @click="deleteByIndex(index)">
-            <image style="width: 50%;height: 50%;" src="../static/images/close.png"></image>
           </view>
         </view>
+        <view class="delete_btn" @click="deleteByIndex(index)">
+          <image style="width: 50%;height: 50%;" src="../static/images/close.png"></image>
+        </view>
         <view class="popup_group_item">
           <view class="popup_group_item_label">规格图片</view>
           <view style="width: 120rpx;height: 120rpx;position: relative;">
             <block v-if="item.image">
-              <image  @click="clk(item.uuid)" style="width: 120rpx;height: 120rpx;border-radius: 10rpx;" :src="item.image"></image>
+              <image @click="clk(item.uuid)" style="width: 120rpx;height: 120rpx;border-radius: 10rpx;"
+                :src="item.image"></image>
               <view class="close-icon" @click="deleteImage(item)">
                 <image style="width: 50%;height: 50%;" src="../static/images/close.png"></image>
               </view>
             </block>
-            <view v-else style="width: 120rpx;height: 120rpx;display: flex;justify-content: center;align-items: center;border: 1rpx solid #ccc;border-radius: 10rpx;">
+            <view v-else
-              <image @click="clk(item.uuid)" style="height: 60rpx;width: 60rpx;" src="../static/images/creamer.png"></image>
+              style="width: 120rpx;height: 120rpx;display: flex;justify-content: center;align-items: center;border: 1rpx solid #ccc;border-radius: 10rpx;">
+              <image @click="clk(item.uuid)" style="height: 60rpx;width: 60rpx;" src="../static/images/creamer.png">
+              </image>
             </view>
           </view>
         </view>
       </view>
-      <priceComponent ref="priceRef" :product_id="product_id" :datas="item" :bar_code="item.bar_code" @updateCode="updateCode" :show_sku="true">
+      <priceComponent ref="priceRef" :product_id="product_id" :datas="item" :bar_code="item.bar_code"
+        @updateCode="updateCode" :show_sku="true">
       </priceComponent>
     </block>
     <button class="add_btn" @click="addAttrValue">点击添加规格</button>
     <view class="submit">
-      <button class="btn" @click="submitAttr">确认</button>
+      <button class="btn" @click="submitAttr">确认<text>({{attrValue.length}})</text></button>
     </view>
-    <u-modal title="警告" content="删除后数据不可恢复,是否确认删除?" :show="showDelete" show-cancel-button @cancel="showDelete=false" @confirm="deleteAttr()"></u-modal>
+    <u-modal title="警告" content="删除后数据不可恢复,是否确认删除?" :show="showDelete" show-cancel-button @cancel="showDelete=false"
+      @confirm="deleteAttr()"></u-modal>
   </view>
 </template>
 
@@ -42,55 +103,178 @@
   import priceComponent from "./components/price.vue";
   import avatar from "@/components/yq-avatar/yq-avatar.vue";
   import { TOKENNAME, HTTP_REQUEST_URL } from '@/config/app.js';
-import { Toast } from "../../../libs/uniApi";
+  import { Toast } from "../../../libs/uniApi";
+  import {
+    specificationUpdate
+  } from "@/api/product.js"
   export default {
-    components:{
+    components: {
       priceComponent,
       avatar
     },
-    data(){
+    data() {
-      return{
+      return {
         attrValue: [],
+        attr: [],
         product_id: '',
         uuid: '', //选择图片的id
         deleteIndex: '', //删除图片下标
         showDelete: false,
-        userInfo: {}
+        userInfo: {},
+        addAttrType: 1, // 规格类型, 1为添加规格值, 2为添加新规格
+        attrName: '', // 规格名称
+        attrDetail: '', // 规格值
+        changeAttr: 0, // 选中的规格
       }
     },
     onLoad(options) {
       this.product_id = options.product_id;
-      this.attrValue = JSON.parse(uni.getStorageSync('attrValue')||'[]');   
+      this.attrValue = JSON.parse(uni.getStorageSync('attrValue') || '[]');
-      this.getOpenerEventChannel().once('updateAttrValue', (e)=>{
+      this.attr = JSON.parse(uni.getStorageSync('attr') || '[]');
-        e.forEach((item, index)=>{
+      this.getOpenerEventChannel().once('updateAttrValue', (e) => {
-          item.uuid=index + '-' + Math.floor(Math.random() * 10000);
+        e.attrValue.forEach((item, index) => {
+          item.uuid = index + '-' + Math.floor(Math.random() * 10000);
         })
-        this.attrValue = e;
+        this.attrValue = e.attrValue;
-        uni.setStorageSync('attrValue', JSON.stringify(e));
+        uni.setStorageSync('attrValue', JSON.stringify(e.attrValue));
+        this.attr = e.attr;
+        uni.setStorageSync('attr', JSON.stringify(e.attr));
       })
       this.userInfo = this.$store.state.app.userInfo;
-      if(typeof this.userInfo == 'string') this.userInfo = JSON.parse(this.userInfo);
+      if (typeof this.userInfo == 'string') this.userInfo = JSON.parse(this.userInfo);
     },
-    methods:{
+    watch: {
-      updateCode(e){
+      attr: {
+        handler(n, o) {
+          let arr = this.computeAttr(n);
+          let t = [];
+          n.forEach(item=>{
+            t.push(item.value)
+          })
+          this.attrValue.forEach((item)=>{
+            t.forEach(key=>{
+              console.log(item.detail[key]);
+            })
+          })
+          console.log(arr);
+        },
+        deep: true
+      }
+    },
+    methods: {
+      updateCode(e) {
         console.log(e);
+      },
+      // 点击设置规格
+      test() {
+        this.$refs.modeRef.open();
+      },
+      // 添加规格二级
+      addSpecTow(index) {
+        this.addAttrType = 1;
+        this.changeAttr = index;
+        this.$refs.inputModeRef.open();
+      },
+      // 添加规格一级
+      addSpecOne() {
+        this.addAttrType = 2;
+        this.$refs.inputModeRef.open();
+      },
+      // 删除规格二级
+      deleteAttrTow(i, j) {
+        this.attr[i].detail.splice(j, 1);
+      },
+      // 删除规格一级
+      deleteAttrOne(i) {
+        this.attr.splice(i, 1);
+      },
+      // 关闭添加规格
+      closeAddAttr() {
+        this.$refs.inputModeRef.close();
+      },
+      // 获取产品的组合
+      computeAttr(arr) {
+        let s = [];
+        arr.forEach(item => {
+          s.push(item.detail);
+        })
+        let t = this.getCombination(s);
+        // t = t.map(item=>{
+        //   if(typeof item=='object'){
+        //     return item.join(',')
+        //   }else return item;
+        // })
+        return t;
+      },
+      // 递归计算
+      getCombination(arr) {
+        if (arr.length === 1) {
+          return arr[0];
+        }
+        var result = [];
+        var first = arr[0];
+        var rest = arr.slice(1);
+        for (var i = 0; i < first.length; i++) {
+          var subResult = this.getCombination(rest);
+          for (var j = 0; j < subResult.length; j++) {
+            result.push([first[i]].concat(subResult[j]));
+          }
+        }
+        return result;
+      },
+      // 确认添加规格
+      addAttr() {
+        if (this.addAttrType == 1) {
+          if (this.attr[this.changeAttr].detail.find(name => name == this.attrDetail)) {
+            this.closeAddAttr();
+            this.$nextTick(() => {
+              Toast('该规格已存在')
+            })
+          } else {
+            this.attr[this.changeAttr].detail.push(this.attrDetail);
+            this.closeAddAttr();
+          }
+        } else {
+          if (this.attr.find(item => item.value == this.attrName)) {
+            this.closeAddAttr();
+            this.$nextTick(() => {
+              Toast('该规格已存在')
+            })
+          } else {
+            this.attr.push({
+              value: this.attrName,
+              detail: [this.attrDetail]
+            });
+            this.closeAddAttr();
+          }
+        }
+      },
+      // 保存模板
+      saveAttrMode() {
+
       },
       // 提交数据
-      submitAttr(){
+      submitAttr() {
+        if (this.attrValue.length < 1) return Toast('请至少添加一种规格');
         let flag = true;
-        this.attrValue.forEach((item,index)=>{
+        this.attrValue.forEach((item, index) => {
-          Object.keys(this.$refs.priceRef[index].singleSpecification).forEach(key=>{
+          Object.keys(this.$refs.priceRef[index].singleSpecification).forEach(key => {
-            item[key]=this.$refs.priceRef[index].singleSpecification[key];
+            item[key] = this.$refs.priceRef[index].singleSpecification[key];
           })
           console.log(item);
-          if(flag){
+          if (flag) {
-            if(item.price<=0)flag=false;
+            if (item.sku == undefined || item.sku == null || item.sku == '') flag = false;
-            if(item.stock<=0)flag=false;
+            if (!item.price) flag = false;
-            if(item.cost<=0)flag=false;
+            if (!item.stock) flag = false;
-            if(item.procure_price<=0&&this.userInfo.mer_info.type_code=='TypeSupplyChain')flag=false;
+            if (!item.cost) flag = false;
+            if (!item.procure_price && this.userInfo.mer_info.type_code == 'TypeSupplyChain') flag = false;
           }
         })
-        if(!flag)return Toast('请填写完整信息')
+        if (!flag) return Toast('请填写完整信息');
+        else {
+          uni.$emit('updateSpecType', this.attrValue);
+          uni.navigateBack();
+        }
       },
       // 选择图片
       clk(uuid) {
@@ -117,7 +301,7 @@ import { Toast } from "../../../libs/uniApi";
           },
           success: (uploadFileRes) => {
             let imgData = JSON.parse(uploadFileRes.data)
-            let item = this.attrValue.find(item=>item.uuid==this.uuid);
+            let item = this.attrValue.find(item => item.uuid == this.uuid);
             item.image = imgData.data.path;
           },
           complete(res) {
@@ -133,97 +317,278 @@ import { Toast } from "../../../libs/uniApi";
         item.image = '';
       },
       // 添加规格
-      addAttrValue(){
+      addAttrValue() {
         this.attrValue.push({
           uuid: this.attrValue.length + '-' + Math.floor(Math.random() * 10000)
         })
       },
       // 预删除
-      deleteByIndex(index){
+      deleteByIndex(index) {
         this.deleteIndex = index;
         this.showDelete = true;
       },
       // 删除规格
-      deleteAttr(){
+      deleteAttr() {
         this.attrValue.splice(this.deleteIndex, 1);
         this.showDelete = false;
       }
     },
     onBackPress: () => {
-      
+
     }
   }
 </script>
 
 <style lang="scss">
-@import './scss/index.scss';
+  @import './scss/index.scss';
-.popup_group{
+
-  margin-bottom: 0;
+  .popup_group {
-}
+    margin-bottom: 0;
-.popup_group_item{
-  border-bottom: 1rpx solid #eee;
-  padding-left: 18rpx !important;
-  .close-icon{
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 30rpx;
-    height: 30rpx;
-    border-radius: 10rpx;
-    overflow: hidden;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: rgba(#000, 0.4);
-    color: #fff;
   }
-  
+
-}
+  .popup_group_item {
-.head_close{
+    border-bottom: 1rpx solid #eee;
-  position: relative;
+    padding-left: 18rpx !important;
-  
+
-  .delete_btn{
+    .close-icon {
-    position: absolute;
+      position: absolute;
-    top: -15rpx;
+      top: 0;
-    right: -15rpx;
+      right: 0;
-    width: 40rpx;
+      width: 30rpx;
-    height: 40rpx;
+      height: 30rpx;
-    display: flex;
+      border-radius: 10rpx;
-    justify-content: center;
+      overflow: hidden;
-    align-items: center;
+      display: flex;
-    background-color: red;
+      justify-content: center;
-    color: #fff;
+      align-items: center;
-    border-radius: 50%;
+      background-color: rgba(#000, 0.4);
+      color: #fff;
+    }
+
   }
-  
+
-}
+  .head_close {
-.add_btn{
+    position: relative;
-  width: 710rpx;
+
-  margin: 28rpx auto;
+    .delete_btn {
-  margin-bottom: 160rpx;
+      position: absolute;
-  font-size: 30rpx;
+      top: -15rpx;
-  padding: 28rpx;
+      right: -15rpx;
-  color: #333;
+      width: 40rpx;
-}
+      height: 40rpx;
-.submit{
+      display: flex;
-  position: fixed;
+      justify-content: center;
-  bottom: 0;
+      align-items: center;
-  left: 0;
+      background-color: red;
-  width: 100%;
+      color: #fff;
-  background-color: #fff;
+      border-radius: 50%;
-  padding: 20rpx 0;
+    }
-  
+
-  .btn{
+  }
-    width: 694rpx;
+
-    height: 80rpx;
+  .add_btn {
-    margin: 0 auto;
+    width: 710rpx;
-    background: #e93323;
+    margin: 28rpx auto;
-    border-radius: 43px;
+    margin-bottom: 160rpx;
-    display: flex;
+    font-size: 30rpx;
-    align-items: center;
+    padding: 28rpx;
-    justify-content: center;
+    color: #333;
-    font-size: 15px;
+  }
-    color: #ffffff;
+
+  .submit {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background-color: #fff;
+    padding: 20rpx 0;
+
+    .btn {
+      width: 694rpx;
+      height: 80rpx;
+      margin: 0 auto;
+      background: #e93323;
+      border-radius: 43px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 15px;
+      color: #ffffff;
+    }
+  }
+
+  .mode {
+    width: 100%;
+    background-color: #fff;
+
+    .line {
+      padding: 28rpx;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 28rpx;
+
+      .btn {
+        background-color: #f84221;
+        color: #fff;
+        width: 140rpx;
+        height: 50rpx;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 10rpx;
+      }
+
+      .input {
+        flex: 1;
+        padding: 0 16rpx;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+    }
+
+    .line-warp {
+      padding: 0 28rpx;
+      display: flex;
+    }
+
+    .btn-box {
+      padding: 20rpx 28rpx;
+      display: flex;
+      justify-content: center;
+      border-top: 1rpx solid #eee;
+    }
+
+    .mode-ref {
+
+      .mode-item {
+        margin: 20rpx;
+        border: 1rpx solid #eee;
+        border-radius: 10rpx;
+        font-size: 26rpx;
+        position: relative;
+        overflow: hidden;
+
+        .mode-head {
+          padding-top: 20rpx;
+          padding-left: 20rpx;
+          font-size: 32rpx;
+          font-weight: bold;
+        }
+
+        .mode-body {
+          display: flex;
+          flex-wrap: wrap;
+          padding: 20rpx;
+          padding-left: 0;
+
+          .box {
+            padding: 10rpx 20rpx;
+            border: 1px solid #f84221;
+            margin-left: 20rpx;
+            border-radius: 10rpx;
+            margin-bottom: 10rpx;
+            background-color: rgba(#f84221, 0.1);
+            color: #f84221;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+          }
+
+          .mode-body-add {
+            border: 1rpx solid #ddd;
+            background-color: #fff;
+            color: #333;
+          }
+        }
+
+        .delete-spec {
+          position: absolute;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          top: 0;
+          right: 0;
+          background-color: #eee;
+          padding: 5rpx;
+          border-radius: 0 0 0 10rpx;
+          color: #f84221;
+        }
+      }
+
+      .tab {
+        padding: 20rpx;
+        border-top: 1rpx solid #eee;
+        display: flex;
+        font-size: 28rpx;
+
+        .add-btn {
+          flex: 1;
+          background-color: #f84221;
+          color: #fff;
+          padding: 10rpx;
+          text-align: center;
+          border-radius: 10rpx;
+        }
+
+        .save {
+          color: #333;
+          border: 1rpx solid #ddd;
+          padding: 10rpx;
+          text-align: center;
+          border-radius: 10rpx;
+          margin-left: 20rpx;
+        }
+      }
+    }
+
+    .input-mode {
+      width: 694rpx;
+      padding: 28rpx;
+      font-size: 28rpx;
+      border-radius: 10rpx;
+      background-color: #fff;
+
+      .head-tips {
+        font-size: 32rpx;
+        font-weight: bold;
+        text-align: center;
+        padding-bottom: 20rpx;
+      }
+
+      .input-box {
+        input {
+          height: 80rpx;
+          margin-bottom: 20rpx;
+          font-size: 28rpx;
+          border: 1rpx solid #ddd;
+          padding: 0 20rpx;
+          border-radius: 10rpx;
+        }
+      }
+
+      .show-btn-box {
+        width: 100%;
+        display: flex;
+        justify-content: space-between;
+
+        .cof,
+        .can {
+          height: 80rpx;
+          line-height: 80rpx;
+          width: 300rpx;
+          text-align: center;
+          border: 1rpx solid #ddd;
+          border-radius: 10rpx;
+        }
+
+        .prai {
+          background-color: #f84221;
+          border: 1rpx solid #f84221;
+          color: #fff;
+        }
+      }
+    }
   }
-}
 </style>