football/pages/app_admin/goods-cat/goods-cat.vue

<template>
    <view style="position: absolute;width: 100%;height: 100%;top: 0;left: 0;background-color: #fff">
        <app-layout>
            <view v-if="list.length == 0" class="title">暂无分类，请添加</view>
            <view class="dir-left-wrap cat-list">
                <view v-for="(item,index) in list" :key="item.value" class="cross-center dir-left-nowrap cat-item">
                    <view>{{item.label}}</view>
                    <view @click="delCat(index)" class="close cross-center main-center">
                        <image @click="delCat(index)" src="./../image/cat-close.png"></image>
                    </view>
                </view>
            </view>
            <view :class="['add main-between', `${iphone_x? 'iphone_x':''}`]">
                <view class="add-btn" @click="add">添加分类</view>
                <view class="save-btn" @click="save">保存</view>
            </view>
            <view class="dialog" v-if="dialog">
                <view class="picker-list">
                    <view class="main-between picker-header">
                        <view @click="cancel">取消</view>
                        <view @click="toAdd">新增</view>
                    </view>
                    <picker-view indicator-style="height: 36px;" :value="[index]" @change="bindChange">
                        <picker-view-column>
                            <view
                                v-for="(item,idx) in cat" :key="item.value"
                                :class="[`picker-view`,{
                                    'sure-color': index_1 === idx,
                                    'cardinal-color': index_1 === idx + 1 || index_1 === idx - 1,
                                    'even-color': index_1 === idx + 2 || index_1 === idx - 2,
                                }]">
                                {{item.label}}
                            </view>
                        </picker-view-column>
                        <picker-view-column>
                            <view
                                v-for="(item,idx) in sec_list" :key="item.value"
                                :class="[`picker-view`,{
                                    'sure-color': index_2 === idx,
                                    'cardinal-color': index_2 === idx + 1 || index_2 === idx - 1,
                                    'even-color': index_2 === idx + 2 || index_2 === idx - 2,
                                }]">
                                {{item.label}}
                            </view>
                        </picker-view-column>
                        <picker-view-column>
                            <view
                                v-for="(item,idx) in third_list" :key="item.value"
                                :class="[`picker-view`,{
                                    'sure-color': index_3 === idx,
                                    'cardinal-color': index_3 === idx + 1 || index_3 === idx - 1,
                                    'even-color': index_3 === idx + 2 || index_3 === idx - 2,
                                }]">
                                {{item.label}}
                            </view>
                        </picker-view-column>
                    </picker-view>
                </view>
            </view>
        </app-layout>
    </view>
</template>

<script>
    import { mapState } from "vuex";

    export default {
        data() {
            return {
                iphone_x: false,
                cat: [],
                sec_list: [],
                third_list: [],
                list: [],
                index: [0,0,0],
                index: -1,
                dialog: false,
                index_1: 0,
                index_2: 0,
                index_3: 0,
            }
        },
        computed: {
            ...mapState({
                theme: state => state.mallConfig.theme,
            })
        },
        methods: {
            cancel() {
                this.dialog = false;
                sec_list = [];
                third_list = [];
                index_1 = 0;
                index_2 = 0;
                index_3 = 0;
            },
            toAdd() {
                let first = this.cat[this.index_1];
                let second = this.sec_list[this.index_2];
                let third = this.third_list[this.index_3];
                if(second.label == '未选择' ) {
                    this.list.push(first)
                }else if(third.label == '未选择' ) {
                    this.list.push(second)
                }else {
                    this.list.push(third)
                }
                this.dialog = false;
            },
            getCat() {
                let that = this;
                that.$request({
                    url: that.$api.app_admin.cat,
                }).then(response=>{
                    that.$hideLoading();
                    if(response.code == 0) {
                        that.cat = response.data.list;
                    }else {
                        uni.showToast({
                            title: response.msg,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                }).catch(response => {
                    that.$hideLoading();
                });
            },
            delCat(index) {
                this.list.splice(index,1);
            },
            bindChange(res) {
                let that = this;
                if(that.index_1 == res.detail.value[0]) {
                    if(that.index_2 == res.detail.value[1]) {
                        that.index_3 = res.detail.value[2];
                    }else {
                        that.index_2 = res.detail.value[1];
                        that.index_3 = 0;
                        that.third_list = [{label:'未选择',value:''}];
                        if(that.sec_list[that.index_2].children) {
                            that.third_list = that.third_list.concat(that.sec_list[that.index_2].children)
                        }
                    }
                }else {
                    that.index_1 = res.detail.value[0];
                    that.index_2 = 0;
                    that.index_3 = 0;
                    that.sec_list = [{label:'未选择',value:''}];
                    that.third_list = [{label:'未选择',value:''}];
                    if(that.cat[that.index_1].children) {
                        that.sec_list = that.sec_list.concat(that.cat[that.index_1].children);
                        if(that.sec_list[0].children) {
                            that.third_list = that.third_list.concat(that.sec_list[0].children)
                        }
                    }
                }
            },
            save() {
                uni.setStorage({
                    key: "goods_cat",
                    data: this.list
                })
                setTimeout(function() {
                    uni.navigateBack();
                }, 500)
            },
            add() {
                this.dialog = true;
                this.sec_list = [{label:'未选择',value:''}];
                this.third_list = [{label:'未选择',value:''}];
                if(this.cat[0].children) {
                    this.sec_list = this.sec_list.concat(this.cat[0].children);
                    if(this.sec_list[0].children) {
                        this.third_list = this.third_list.concat(this.sec_list[0].children)
                    }
                }
            }
        },

        onLoad(options) {
            let that = this;
            that.$showLoading({
                type: 'global',
                text: '加载中...'
            });
            uni.getStorage({
                key: 'goods_cat',
                success(res) {
                    that.list = res.data
                }
            })
            uni.getSystemInfo({
                success: function (res) {
                    if(res.model.indexOf('iPhone X') > -1 || res.model.indexOf('iPhone 11') > -1 || res.model.indexOf('iPhone11') > -1 || res.model.indexOf('iPhone12') > -1 || res.model.indexOf('Unknown Device') > -1) {
                        that.iphone_x = true;
                    }
                }
            })
            that.getCat();
        }
    }
</script>

<style scoped lang="scss">
    .cat-list {
        background-color: #fff;
        padding: #{30rpx};
        padding-left: 0;
    }
    .cat-item {
        width: auto;
        border-radius: #{33rpx};
        background-color: #ECF0FF;
        padding-left: #{30rpx};
        height: #{66rpx};
        line-height: #{66rpx};
        color: #446DFD;
        margin-left: #{30rpx};
        margin-bottom: #{30rpx};
        .close {
            width: #{60rpx};
            height: #{66rpx};
            image {
                width: #{16rpx};
                height: #{16rpx};
                display: block;
            } 
        }
    }
    .title {
        font-size: #{32rpx};
        color: #999999;
        padding-top: #{36rpx};
        background-color: #fff;
        text-align: center;
    }

    .add.iphone_x {
        height: #{170rpx};
        padding-bottom: #{50rpx};
    }

    .add {
        height: #{120rpx};
        padding: 0 #{24rpx};
        margin: 0 auto;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        border-top: #{2rpx} solid #e2e2e2;
        background-color: #fff;
        .add-btn {
            background-color: #fff;
            color: #446dfd;
            border: #{2rpx} solid #446dfd;
        }
    }

    .add>view {
        height: #{80rpx};
        width: #{300rpx};
        margin-top: #{20rpx};
        border-radius: #{40rpx};
        background-color: #446dfd;
        color: #fff;
        font-size: #{28rpx};
        text-align: center;
        line-height: #{80rpx};
    }
    
    .dialog {
        position: fixed;
        height: 100%;
        width: 100%;
        bottom: 0;
        left: 0;
        z-index: 9999;
        background-color: rgba(0, 0, 0, .3);
    }

    .dialog.iphone_x .picker-list{
        padding-bottom: #{50rpx};
    }

    .picker {
        width: 100%;
        height: #{440rpx};
        color:#999999;
    }


    .dialog.iphone_x .picker{
        height:#{490rpx};
    }

    .picker-list {
        background-color: #fff;
        padding-top: #{20rpx};
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 9999;
        height: #{520rpx};
        border-top-left-radius: #{10rpx};
        border-top-right-radius: #{10rpx};
    }

    .picker-header {
        padding: 0 #{24rpx};
        color: #446dfd;
        font-size: #{32rpx};
    }

    .dialog {
        position: fixed;
        height: 100%;
        width: 100%;
        bottom: 0;
        left: 0;
        z-index: 9999;
        background-color: rgba(0, 0, 0, .3);
    }

    .picker-view {
        line-height: #{72rpx};
        text-align:center;
        font-size: #{32rpx};
    }

    .picker-view.sure-color {
        color: #446dfd;
    }
    .picker-view.cardinal-color {
        color: #999999;
    }
    .picker-view.even-color {
        color: #cdcdcd;
    }
    picker-view {
        width: 100%;
        height: #{440rpx};
    }
</style>