绿满眶商城微信小程序-uniapp
zxl
4 天以前 c9928dd4f6d25e2339ea1400f59ec58674a927a7
pages/goods-manager/addGoods/addGoods.vue
@@ -4,8 +4,17 @@
         <u-form :border-bottom="false" :model="form" ref="uForm" :error-type="['toast']" :rule="rules">
            <u-form-item label="商品分类" label-width="130" prop="">
               <picker @change="bindCategoryChange" :value="c_index" :range="categoryArray" :range-key="'name'">
                  <view class="uni-input">{{ categoryArray[c_index].name }}</view>
               <picker mode="multiSelector" @change="bindMultiPickerChange"
                  @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="categoryListArray"
                  range-key="name">
                  <view class="picker">
                     {{ categoryListArray[0][multiIndex[0]].name ? categoryListArray[0][multiIndex[0]].name +
                        ',' : '' }}
                     {{ categoryListArray[1][multiIndex[1]].name ? categoryListArray[1][multiIndex[1]].name +
                        ',' : '' }}
                     {{ categoryListArray[2][multiIndex[2]].name ? categoryListArray[2][multiIndex[2]].name :
                        '' }}
                  </view>
               </picker>
            </u-form-item>
@@ -21,24 +30,24 @@
               <u-input type="textarea" v-model="form.sellingPoint" placeholder="请输入商品卖点" />
            </u-form-item>
            <u-form-item label="商品品牌" label-width="130" prop="">
            <u-form-item label="商品品牌" label-width="130" prop="brandId">
               <picker @change="bindBrandsChange" :value="b_index" :range="brandsArray" :range-key="'name'">
                  <view class="uni-input">{{ brandsArray[b_index].name }}</view>
               </picker>
            </u-form-item>
            <u-form-item label="计量单位" label-width="130" prop="___path">
            <u-form-item label="计量单位" label-width="130" prop="goodsUnit">
               <picker @change="bindUnitChange" :value="u_index" :range="unitArray" :range-key="'name'">
                  <view class="uni-input">{{ unitArray[u_index].name }}</view>
               </picker>
            </u-form-item>
            <u-form-item label="销售模式" label-width="130" prop="___path">
               <radio-group name="radio">
            <u-form-item label="销售模式" label-width="130" prop="salesModel">
               <radio-group name="radio" @change="radioChange" v-model="form.salesModel">
                  <label>
                     <radio value="radio1" /><text>零售型</text>
                     <radio value="RETAIL" :checked="form.salesModel == 'RETAIL'" /><text>零售型</text>
                  </label>
                  <label>
                     <radio value="radio2" /><text>批发型</text>
                     <radio value="WHOLESALE" :checked="form.salesModel == 'WHOLESALE'" /><text>批发型</text>
                  </label>
               </radio-group>
            </u-form-item>
@@ -66,32 +75,27 @@
</template>
<script>
import UForm from '@/uview-components/uview-ui/components/u-form/u-form.vue';
import UFormItem from '@/uview-components/uview-ui/components/u-form-item/u-form-item.vue';
import UInput from '@/uview-components/uview-ui/components/u-input/u-input.vue';
import UUpload from '@/uview-components/uview-ui/components/u-upload/u-upload.vue';
// import UCheckboxGroup from '@/uview-components/uview-ui/components/u-checkbox-group/u-checkbox-group.vue';
// import UCheckbox from '@/uview-components/uview-ui/components/u-checkbox/u-checkbox.vue';
import UIcon from '@/uview-components/uview-ui/components/u-icon/u-icon.vue';
import '@/components/uview-components/uview-ui';
import storage from "@/utils/storage.js";
import * as API_GOODS from "@/api/goods.js";
export default {
   components: { UForm, UFormItem, UInput, UUpload, UIcon },
   data() {
      return {
         c_index: 0,
         b_index: 0,
         u_index: 0,
         categoryListArray: [],
         multiIndex: [0, 0, 0],
         storage,
         form: {},
         categoryArray: [],
         brandsArray: [],
         unitArray: []
      }
   },
   methods: {
      //图片上传
      onUploaded(lists) {
         let images = [];
@@ -100,12 +104,6 @@
            images.push(item.response.result);
         });
         this.form.images = images;
      },
      bindCategoryChange(e) {
         this.c_index = e.detail.value
         console.log('this.c_index', this.c_index);
         this.initBrands(this.categoryArray[this.c_index].id)
      },
      bindBrandsChange(e) {
         this.b_index = e.detail.value
@@ -118,10 +116,11 @@
      initCategory() {
         API_GOODS.getStoreGoodsCategory().then((res) => {
            const params = res.data.result;
            this.categoryArray = params
            if (params && params.length > 0) {
               this.initBrands(params[0].id)
            }
            this.categoryListData = params;
            this.manageCategoryListThreeLevel()
         });
      },
      initBrands(categoryId) {
@@ -138,6 +137,73 @@
            this.unitArray = params
         });
      },
      manageCategoryListThreeLevel() {
         let categoryLen = this.categoryListData.length
         for (var i = categoryLen - 1; i >= 0; i--) {
            let categoryChildrenLen = this.categoryListData[i].children.length
            for (var j = categoryChildrenLen - 1; j >= 0; j--) {
               if (!this.categoryListData[i].children[j].children.length) {
                  this.categoryListData[i].children.splice(j, 1)
               }
            }
         }
         this.manageCategoryListTwoLevel()
      },
      manageCategoryListTwoLevel() {
         let categoryLen = this.categoryListData.length
         for (var i = categoryLen - 1; i >= 0; i--) {
            if (!this.categoryListData[i].children.length) {
               this.categoryListData.splice(i, 1)
            }
         }
         this.categoryListArray = [
            this.categoryListData,
            this.categoryListData[0].children,
            this.categoryListData[0].children[0].children,
         ]
      },
      // value 改变时触发 change 事件
      bindMultiPickerChange: function (e) {
         this.multiIndex = e.detail.value
         this.initBrands(this.categoryListData[this.multiIndex[0]].id)
      },
      // 某一列的值改变时触发 columnchange 事件
      bindMultiPickerColumnChange: function (e) {
         if (!this.multiIndex || !this.multiIndex.length) {
            this.multiIndex = [0, 0, 0]
         }
         let column = e.detail.column;
         let value = e.detail.value;
         let multiIndex = this.multiIndex;
         multiIndex[column] = value;
         if (column == 0) {
            multiIndex[1] = 0;
            multiIndex[2] = 0;
         }
         if (column == 1) {
            multiIndex[2] = 0;
         }
         this.multiIndex = multiIndex;
         let categoryListArray = [];
         categoryListArray[0] = this.categoryListData;
         categoryListArray[1] = this.categoryListData[multiIndex[0]].children;
         if (this.categoryListData[multiIndex[0]].children[multiIndex[1]].children) {
            categoryListArray[2] = this.categoryListData[multiIndex[0]].children[multiIndex[1]].children;
         } else {
            categoryListArray[2] = [];
         }
         this.categoryListArray = categoryListArray;
      },
      radioChange: function (e) {
         this.form.salesModel = e.detail.value
      },
   },
   onShow() {
      this.initGoods()