绿满眶商城微信小程序-uniapp
zxl
4 天以前 c9928dd4f6d25e2339ea1400f59ec58674a927a7
pages/goods-manager/addGoods/addGoods.vue
@@ -4,36 +4,54 @@
         <u-form :border-bottom="false" :model="form" ref="uForm" :error-type="['toast']" :rule="rules">
            <u-form-item label="商品分类" label-width="130" prop="">
               <div @click="showPicker">
                  {{ form.___path || '请选择所在地区' }}
               </div>
               <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>
            <u-form-item class="border" label="商品名称" label-width="130" prop="name">
               <u-input v-model="form.name" clearable placeholder="请输入商品名称" />
            <u-form-item class="border" label="商品名称" label-width="130" prop="goodsName">
               <u-input v-model="form.goodsName" clearable placeholder="请输入商品名称" />
            </u-form-item>
            <u-form-item label="商品价格" label-width="130" prop="mobile">
               <u-input v-model="form.mobile" type="number" maxlength="11" placeholder="请输入商品价格" />
            <u-form-item label="商品价格" label-width="130" prop="price">
               <u-input v-model="form.price" type="number" placeholder="请输入商品价格" />
            </u-form-item>
            <u-form-item class="detailgoods" label="详细地址" label-width="130" prop="detail">
               <u-input type="textarea" v-model="form.detail" maxlength="100" height="150" placeholder="街道楼牌号等" />
            </u-form-item>
            <u-form-item label="商品卖点" label-width="130">
               <u-input type="textarea" v-model="form.alias" placeholder="请输入商品卖点" />
               <u-input type="textarea" v-model="form.sellingPoint" placeholder="请输入商品卖点" />
            </u-form-item>
            <u-form-item label="商品品牌" label-width="130" prop="">
               <div @click="showPicker">
                  {{ form.___path || '请选择所在地区' }}
               </div>
            <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">
               <div @click="showPicker">
                  {{ form.___path || '请选择所在地区' }}
               </div>
            <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="salesModel">
               <radio-group name="radio" @change="radioChange" v-model="form.salesModel">
                  <label>
                     <radio value="RETAIL" :checked="form.salesModel == 'RETAIL'" /><text>零售型</text>
                  </label>
                  <label>
                     <radio value="WHOLESALE" :checked="form.salesModel == 'WHOLESALE'" /><text>批发型</text>
                  </label>
               </radio-group>
            </u-form-item>
            <view class="opt-view">
@@ -57,13 +75,27 @@
</template>
<script>
import '@/components/uview-components/uview-ui';
import storage from "@/utils/storage.js";
import * as API_GOODS from "@/api/goods.js";
export default {
   data() {
      return {
         form: {}
         c_index: 0,
         b_index: 0,
         u_index: 0,
         categoryListArray: [],
         multiIndex: [0, 0, 0],
         storage,
         form: {},
         brandsArray: [],
         unitArray: []
      }
   },
   methods: {
      //图片上传
      onUploaded(lists) {
         let images = [];
@@ -73,17 +105,119 @@
         });
         this.form.images = images;
      },
   },
      bindBrandsChange(e) {
         this.b_index = e.detail.value
         this.form.brandId = this.brandsArray[this.b_index].id
      },
      bindUnitChange(e) {
         this.u_index = e.detail.value
         this.form.goodsUnit = this.unitArray[this.u_index].name
      },
      initCategory() {
         API_GOODS.getStoreGoodsCategory().then((res) => {
            const params = res.data.result;
            if (params && params.length > 0) {
               this.initBrands(params[0].id)
            }
            this.categoryListData = params;
            this.manageCategoryListThreeLevel()
         });
      },
      initBrands(categoryId) {
         this.brandsArray = []
         API_GOODS.getStoreGoodsBrands(categoryId).then((res) => {
            const params = res.data;
            this.brandsArray = params
         });
      },
      initGoods() {
         API_GOODS.getgoodsUnit().then((res) => {
            const params = res.data.result.records;
            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()
      this.initCategory()
   },
   onLoad(option) {
      uni.showLoading({
         title: "加载中",
      });
      this.routerVal = option;
      console.log(option);
      if (option.id) {
         getGoodsDetail(option.id).then((res) => {
         API_GOODS.getStoreGoodsInfo(option.id).then((res) => {
            const params = res.data.result;
            params.___path = params.consigneegoodsPath;
            this.$set(this, "form", params);