分类多级联动

zhanghua

2025-06-11 2571b833ac19340084f07ac2ccd76b242ee3d4f0

分类多级联动

 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>
@@ -84,14 +93,16 @@
            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 +111,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 +123,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 +144,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()

 pages/goods-manager/goodsList/goodsList.vue

@@ -9,12 +9,12 @@
                    <!-- 通过header插槽定义列表左侧图片 -->

                    <view class="uni-thumb shop-picture" :class="{ 'shop-picture-column': formData.waterfall }">
                        <image :src="item.goods_thumb" mode="aspectFill"></image>
                        <image :src="item.thumbnail" mode="aspectFill"></image>
                    </view>
                    <view class="shop">
                        <view>
                            <view class="uni-title">
                                <text class="uni-ellipsis-2">{{ item.name }}</text>
                                <text class="uni-ellipsis-2">{{ item.goodsName }}</text>
                            </view>
                            <!-- <view>
                                    <text class="uni-tag hot-tag">{{ item.goods_tip }}</text>
@@ -24,12 +24,12 @@
                        <view>
                            <view class="shop-price">
                                <text>¥</text>
                                <text class="shop-price-text">{{ item.goods_price }}</text>
                                <text class="shop-price-text">{{ item.price }}</text>
                                <text>.00</text>
                            </view>
                            <view class="uni-flex-row">
                                <view class="uni-note">{{ item.comment_count || 0 }}条评论 月销量 {{
                                    item.month_sell_count || 0 }}
                                <view class="uni-note">{{ item.commentNum || 0 }}条评论 月销量 {{
                                    item.buyCount || 0 }}
                                </view>
                                <view class="uni-note ellipsis">
                                    <text class="uni-link">上架</text>
@@ -256,6 +256,7 @@
        // 小程序 编译后会多一层标签，而其他平台没有，所以需要特殊处理一下
        /deep/ .uni-list {
            /* #endif */
            height: calc(100vh - 100px - 80px - 60px);
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
@@ -267,7 +268,7 @@
            /deep/
            /* #endif */
            .uni-list-item--waterfall {
                // width: 50%;
                width: 98%;
                display: flex;
                box-sizing: border-box;
                margin-bottom: 10px;