1

xuxueyang

2024-07-08 a72add8a584fc017da11b6f6e05a749ad7f2f4f7

1

 plugins/storage.js

@@ -1,5 +1,5 @@
// import Vue from 'vue'
const APPID = 'hmy-token'
const APPID = 'hmy-token' + process.env.PUB_TYPE
const storage = {
    getItem(key) {
        return uni.getStorageSync(`${APPID}_${key}_${process.env.NODE_ENV}`)

 sub_pages/supplier/flower-manage/flower-add.vue

@@ -1,704 +1,712 @@
<template>
    <view class="container-page" style="padding: 0rpx;">
        <view>
            <view class="form-item">
                <view class="label required">商品分类</view>
                <!--                 <view class="m-l-a m-r-0 flex " :class="[!dto.category?'desc-gray':'']" @click="()=>{
                    // show_select_category=true
                    $refs.picker_category.showPicker()
                }">
                    <view>{{dto.categoryStr||dto.category || '请选择'}}</view>
                    <u-icon class="m-l-a" name="arrow-right"></u-icon>
                </view> -->
                <view class="m-l-a m-r-0 flex " :class="[!dto['category']?'desc-gray':'']">
                    <!--     <uni-data-picker ref="picker_category" @change="(e)=>{PickCategory(dto,e)}" placeholder=""
                        @search="updateSearch" :filter="true" :localdata="columns_categorys_picker">
                        {{dto.categoryStr||dto.category || '请选择'}}
                    </uni-data-picker> -->
                    <tree-filter ref="picker_category" @change="(e)=>{PickCategory(dto,e)}" placeholder=""
                        @search="updateSearch" :filter="true" :localdata="columns_categorys_picker"
                        selectConfirmTitle="">
                        <view class="flex">
                            <view>{{dto.categoryStr||dto.category || '请选择'}}</view>
                            <u-icon class="m-l-a" name="arrow-right"></u-icon>
                        </view>

                    </tree-filter>
                </view>
            </view>
            <view class="form-item before-line">
                <view class="label required">商品名称</view>
                <view class="m-l-a m-r-0 flex">
                    <input v-model="dto.name" placeholder="请选择分类" disabled
                        style="margin-top: 16px;text-align: right;"></input>

                </view>
            </view>
            <view class="form-item before-line">
                <view class="label required">商品单位</view>
                <view class="m-l-a m-r-0 flex">
                    <input v-model="dto.unit" placeholder="请选择分类" disabled
                        style="margin-top: 16px;text-align: right;"></input>

                </view>
            </view>

            <view class="form-item before-line">
                <view class="label required">商品颜色</view>
                <!--     <view class="m-l-a m-r-0 flex " :class="[!dto.color?'desc-gray':'']" @click="()=>{
                    show_select_color=true
                }">
                    <view>{{dto.applicationTypeStr||dto.applicationType || '请选择'}}</view>
                    <u-icon class="m-l-a" name="arrow-right"></u-icon>
                </view> -->
                <view class="m-l-a m-r-0 flex">
                    <input v-model="dto.color" placeholder="请选择分类" disabled
                        style="margin-top: 16px;text-align: right;"></input>
                </view>
            </view>
            <view class="line-gray-big"></view>

            <!-- :style="{'background-image':dto.cover&&`url('${dto.cover}')`||''}" -->
            <view class="form-item bottom-border-no">
                <view class="label required" style="width: 400rpx;">列表封面图（130*120px）</view>
                <view class="m-l-a m-r-0 flex">
                    <view class="component-button-upload" @click="uploadIcon('cover')">

                    </view>
                </view>
            </view>
            <view class="flex p20" style="padding-top: 0rpx;padding-bottom: 10rpx" v-if="dto.cover">
                <view class="m-t-12 m-r-10 ">
                    <image class="banner-img" :src="dto.cover" @click.stop="previewImg(dto.cover)">

                    </image>
                    <view class="t-red text-center" @click.stop="dto.cover=''">删除</view>
                </view>
            </view>

            <view class="form-item before-line bottom-border-no">
                <view class="label required" style="width: 400rpx;">商品轮播图（300*160px）</view>
                <view class="m-l-a m-r-0 flex">
                    <!-- :style="{'background-image':dto.icon&&`url('${dto.icon}')`||''}" -->
                    <view class="component-button-upload" @click="uploadIcon('bannerList')">

                    </view>
                </view>
            </view>
            <view class="flex p20" style="padding-top: 0rpx;padding-bottom: 10rpx"
                v-if="dto.bannerList&&dto.bannerList.length>0">
                <view class="m-t-12 m-r-10 " v-for="(tBanner,index) of dto.bannerList" :key="index">
                    <image class="banner-img" :src="tBanner" @click.stop="previewImg(tBanner)">

                    </image>
                    <view class="t-red text-center" @click.stop="deleteBanner(index)">删除</view>
                </view>
            </view>
            <view class="line-gray-big"></view>


            <view class="form-item before-line">
                <view class="label required">售价(元)</view>
                <view class="m-l-a m-r-0 flex">
                    <input v-model="dto.price" placeholder="请输入数字" type="digit"
                        style="margin-top: 16px;text-align: right;"></input>
                </view>
            </view>
            <view class="form-item ">
                <view class="label required">库存</view>
                <view class="m-l-a m-r-0 flex">
                    <input v-model="dto.stock" placeholder="请输入数字" type="number"
                        style="margin-top: 16px;text-align: right;"></input>
                </view>
            </view>

            <view class="line-gray-big"></view>

            <view class="form-item ">
                <view class="label required">商品参数详情</view>
                <view class="m-l-a m-r-0 flex " :class="[!dto.applicationType?'desc-gray':'']" @click="()=>{
                    if(!dto.category){
                        $message.showToast('请先选择分类')
                    }else{
                        if(dto.params&&dto.params.length==0){
                            $message.showToast('暂无参数可以设置')
                        }else{
                            $refs.popup_param.open()
                        }
						
                    }
                }">
                    <view>{{ paramstr || '去设置'}}</view>
                    <u-icon class="m-l-a" name="arrow-right"></u-icon>
                </view>

            </view>
            <view class="line-gray-big"></view>
            <view class="form-item before-line">
                <view class="label required">商品等级</view>
                <view class="m-l-a m-r-0 flex " :class="[!dto.level?'desc-gray':'']" @click="()=>{
                    show_select_level=true
                }">
                    <view>{{dto.levelStr||dto.level || '请选择'}}</view>
                    <u-icon class="m-l-a" name="arrow-right"></u-icon>
                </view>

            </view>


            <view class="form-item before-line">
                <view class="label required">商品视频</view>
                <view class="m-l-a m-r-0 flex">
                    <!-- :style="{'background-image':dto.icon&&`url('${dto.icon}')`||''}" -->
                    <view class="component-button-upload m-r-15" @click="uploadIcon('video')">

                    </view>

                </view>
            </view>
            <view v-if="dto.video">
                <video :src="dto.video" style="display: block;margin: 0 auto;"></video>
            </view>

            <view style="min-height: 200rpx;">
                &nbsp;
            </view>
            <view class="button-green-1 m-t-20 button-fixed-bottom " @click="submit" v-if="!dto.id">
                提交审核
            </view>
            <view class="button-green-1 m-t-20 button-fixed-bottom before-line" @click="submit" v-if="dto.id">
                修改
            </view>
        </view>
        <!-- 

        <u-picker @confirm="select_category" keyName="name" @cancel="show_select_category=false"
            :show="show_select_category" :columns="columns_categorys"></u-picker> -->

        <u-picker @confirm="select_level" keyName="label" @cancel="show_select_level=false" :show="show_select_level"
            :columns="columns_levels"></u-picker>


        <uni-popup ref="popup_param" type="top">
            <view class="component-popup_input" v-if="dto.params">
                <view class="text-center m-b-40" style="font-size: 48rpx;font-weight: 600;">商品参数设置</view>
                <!-- 输入框-->
                <view v-for="(item,i) in dto.params" :key="i" class="m-b-20">
                    <view class="title topic-font" style="font-size: 36rpx;font-weight: 600;">{{item.name}}</view>
                    <view class="m-t-12">
                        <u-radio-group v-model="item.value" placement="row">
                            <u-radio
                                :customStyle="{'margin-bottom': '16rpx','margin-right': '24rpx','font-size':'28rpx'}"
                                v-for="(each, j) in item.values" :key="j" :label="each" :name="each">
                            </u-radio>
                        </u-radio-group>
                    </view>
                </view>

                <!-- 提交按钮 -->
                <view class="button-green" @click="closeParamPop">返回</view>
            </view>
        </uni-popup>
        <!--         <dying318picker :picker-list="columns_categorys" ref="picker_category" @confirm="confirmPickerCategory">
        </dying318picker> -->
    </view>
</template>

<script>
    import environments from '@/environments'
    import dying318picker from '@/components/dying318-picker/Picker.vue'
    import treeFilter from '@/components/tree-filter/tree-filter.vue'


    import {
        mapState
    } from 'vuex'

    export default {

        data() {
            return {
                id: '',
                dto: {
                    id: '',
                    category: '',
                    name: '',
                    unit: '',
                    color: '',
                    cover: '',
                    bannerList: [], //str[]
                    video: '',
                    level: '', //FLOWER_LEVEL
                    price: 0.00,
                    stock: 0,
                    params: [], //id,value
                },
                show_select_category: false,
                show_select_level: false,
                columns_categorys: [],
                columns_categorys_picker: [],
                columns_categorys_dict: {},
                columns_categorys_search: '',
                columns_levels: [],
                //     columns_params: [], //弹窗选择具体的值
                // cancel: {
                //     color: '#999',
                // },
                // confirm: {
                //     color: '#20613D',
                // },
                // column: [
                //     {flex: 1},
                //     {flex: 1},
                //     {flex: 3},
                // ]
            }
        },

        async onLoad(options) {
            //tree
            this.$http.request('get', '/api/flower/category/tree', {}).then(res => {
                var data = res.data
                this.columns_categorys = data || []
                // console.log('columns_categorys', this.columns_categorys)
                //递归mao
                this.mapCategoryTree(this.columns_categorys_picker, this.columns_categorys)
                // console.log('columns_categorys_picker', this.columns_categorys_picker)
                // this.columns_categorys = [data || []]
                // this.columns_categorys[0].unshift({
                //     label: '全部',
                //     value: '',
                //     children: []
                // })

            })

            this.$http.request('get', '/api/code/value', {
                params: {
                    type: 'FLOWER_LEVEL'
                }
            }).then(res => {
                var data = res.data
                this.columns_levels = [data || []]
                this.columns_levels[0].unshift({
                    label: '全部',
                    value: ''
                })

            })
            if (options.id) {
                this.id = options.id
                uni.setNavigationBarTitle({
                    title: '商品详情'
                })
                this.getDetail()
            } else {
                if (options.copyId) {
                    this.id = options.copyId
                    await this.getDetail()
                    this.id = ''
                    delete this.dto.id
                    uni.setNavigationBarTitle({
                        title: '复制商品并新增'
                    })
                } else {
                    uni.setNavigationBarTitle({
                        title: '商品新增'
                    })
                }


            }

        },

        methods: {
            async updateSearch(search) {
                this.columns_categorys_search = search || ''
                this.columns_categorys_picker = []
                this.mapCategoryTree(this.columns_categorys_picker, this.columns_categorys)
                console.log('change updateSearch', search, this.columns_categorys_picker)
                this.$refs.picker_category.selectedClear()
            },
            async PickCategory(item, e) {
                console.log('PickCategory', item, e)
                if (e.detail.value) {
                    var currentnode = this.columns_categorys_dict['@' + e.detail.value[e.detail.value.length - 1]
                        .value]
                    let tmpe = e
                    if (this.dto.category && this.dto.category !== currentnode.id) {
                        this.$message.confirm('修改分类将清空商品参数，确定修改吗').then(async res => {
                            // console.log('currentnode',currentnode,this.columns_categorys_dict,'@'+e.detail.value[e.detail.value.length - 1].value)
                            this.dto.categoryStr = currentnode.name
                            this.dto.category = currentnode.id
                            this.dto.name = currentnode.name
                            this.dto.unit = currentnode.unit
                            this.dto.color = currentnode.color
                            //递归获取category的其他数据，用来做map？
                            this.$message.showLoading()
                            await this.refresh_category()
                            this.$message.hideLoading()
                        }).catch(e1 => {
                            console.log('this.$refs.picker_category', this.$refs.picker_category)
                            this.$refs.picker_category.onchange(tmpe.detail.value)
                        })
                    } else {
                        this.dto.categoryStr = currentnode.name
                        this.dto.category = currentnode.id
                        this.dto.name = currentnode.name
                        this.dto.unit = currentnode.unit
                        this.dto.color = currentnode.color
                        //递归获取category的其他数据，用来做map？
                        this.$message.showLoading()
                        await this.refresh_category()
                        this.$message.hideLoading()
                    }
                }
            },
            mapCategoryTree(node, arr) {
                var has = true
                if (arr) {
                    var hasTrue = false
                    if (!this.columns_categorys_search) {
                        hasTrue = true
                    }
                    for (var item of arr) {
                        has = true
                        if (this.columns_categorys_search) {
                            has = false
                        }
                        var tmp = {
                            ...item,
                            name: item.name,
                            text: item.name,
                            label: item.name,
                            value: item.id,
                            children: undefined
                        }
                        if (item.name == this.columns_categorys_search) {
                            has = true
                            hasTrue = true
                        }
                        this.columns_categorys_dict['@' + item.id] = item
                        if (item.children && item.children.length > 0) {
                            tmp.children = []
                            var childrenhas = this.mapCategoryTree(tmp.children, item.children)
                            if (childrenhas) {
                                has = true
                                hasTrue = true
                            }
                        } else {
                            tmp.children = undefined
                        }

                        if (has) {
                            console.log('has ', tmp, hasTrue, has)
                            node.push(tmp)
                        } else {

                        }
                        if (!has && hasTrue) {
                            //说明是这个节点有的，需要判断是否需要删除
                            if (!tmp.children || tmp.children.length == 0) {

                            } else {
                                console.log('has ', tmp, hasTrue, has)
                                node.push(tmp)
                            }
                        }
                        // if (hasTrue || has) {
                        //     node.push(tmp)

                        // } else {
                        //     console.log('not has ', tmp)
                        // }

                    }
                }
                return hasTrue
            },
            async confirmPickerCategory(picker) {
                console.log('confirmPickerCategory', picker)
                var id = picker.value
                var name = picker.label
                if (id !== this.dto.category) {
                    if (this.dto.category) {
                        await this.$message.confirm('修改分类将清空商品参数，确定修改吗')
                    }
                    this.dto.categoryStr = name
                    this.dto.category = id
                    // name: '',
                    // unit: '',
                    // color: '',
                    //递归获取category的其他数据，用来做map？
                    this.$message.showLoading()
                    await this.refresh_category()
                    this.$message.hideLoading()
                }
            },
            closeParamPop() {
                this.$refs.popup_param.close()
            },

            async refresh_category() {
                // this.columns_params = []
                this.dto.params = []
                //获取分类参数
                if (this.dto.category) {
                    const res = await this.$http.request('get', '/api/supplier/flower/params', {
                        params: {
                            categoryId: this.dto.category
                        }
                    })
                    if (res.code == 0) {
                        // this.columns_params = res.data || []
                        this.dto.params = res.data || []
                    }
                }

            },
            select_level(e) {
                this.show_select_level = false
                this.dto.levelStr = e.value[0].label
                this.dto.level = e.value[0].value
            },

            async getDetail() {
                this.$message.showLoading()
                const {
                    code,
                    data
                } = await this.$http.request('get', "/api/supplier/flower/list/view?id=" + this.id, {})
                if (code == 0) {
                    this.dto = {
                        ...data,

                    }
                    // if (this.dto.applicationDate) {
                    //     this.dto.applicationDate = this.$util.toDate(new Date(this.dto.applicationDate))
                    // }
                    // // console.log('this.dto', this.dto)
                    if (!this.dto.bannerList) {
                        this.dto.bannerList = []
                    }
                    // if (this.dto.category) {
                    //     await this.refresh_category()
                    // }
                }

                this.$message.hideLoading()

            },
            async submit() {
                // if (!this.dto.applicationType) {
                //     this.$message.showToast('未选择类型')
                //     return
                // }
                // if (!this.dto.applicationTitle) {
                //     this.$message.showToast('未填写申请主题')
                //     return
                // }
                // if (!this.dto.auditPersonId) {
                //     this.$message.showToast('未选择审批人')
                //     return
                // }
                // await this.$message.confirm(`是否确定提交申请${this.auditPersonName?("，审批人为:"+this.auditPersonName):""}`)

                // this.$message.showToast('1')
                // return
                var dto = {
                    ...this.dto,
                    // applicationDate: this.$util.toDate(new Date()),
                    // applicantId: this.currentInfo.id
                }
                this.$message.showLoading()
                const re = await this.$http.request('post', `/api/supplier/flower/list/${this.id?'edit':'new'}`, {
                    data: dto
                })
                this.$message.hideLoading()
                if (re.code == 2000 || re.code == 0) {
                    this.$message.showToast('操作成功')
                    //需要标记加一下
                    // this.$store.dispatch('sign_add', 'application');

                    this.backpage()
                }
            },
            async deleteBanner(index) {
                await this.$message.confirm('是否确认删除此图片')
                // this.dto.bannerList  = 
                this.dto.bannerList.splice(index, 1)
            },
            uploadIcon(key) {
                console.log('that dto key', key)
                const that = this
                if (key == 'video') {
                    uni.chooseVideo({
                        sourceType: ['camera', 'album'],
                        success: function(res) {
                            if (res.tempFilePath) {
                                console.log('res.tempFilePath', res.tempFilePath)
                                that.$message.showLoading()
                                that.$http.upload(res.tempFilePath).then(async res => {
                                    console.log('res1', res)
                                    var pic = res.data && res.data.length > 0 && res.data[
                                            0]
                                        .url || ''
                                    that.$message.hideLoading()
                                    that.dto[key] = pic || ''

                                    that.$forceUpdate()
                                    console.log('that dto', that.dto)
                                }).catch(res => {
                                    that.$message.hideLoading()
                                    console.error(res)
                                })
                            }
                        }
                    });
                } else {

                    uni.chooseImage({
                        count: 1, // 最多可以选择的图片张数，默认9
                        sizeType: ['compressed'], //original 原图，compressed 压缩图，默认二者都有
                        sourceType: ['camera', 'album'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
                        success: function({
                            errMsg,
                            tempFiles
                        }) {
                            if (errMsg === 'chooseImage:ok') {
                                // console.log(tempFiles[0])
                                that.$message.showLoading()
                                that.$http.upload(tempFiles[0].path).then(async res => {
                                    console.log('res1', res)
                                    var pic = res.data && res.data.length > 0 && res.data[
                                            0]
                                        .url || ''
                                    that.$message.hideLoading()
                                    if (key == 'bannerList') {
                                        that.dto[key].push(pic)
                                    } else {
                                        that.dto[key] = pic || ''
                                    }

                                    that.$forceUpdate()
                                }).catch(res => {
                                    that.$message.hideLoading()
                                    console.error(res)
                                })
                            }
                        }
                    })
                }
            },

        },
        computed: {
            ...mapState(['currentInfo']),
            paramstr() {
                if (this.dto && this.dto.params) {
                    var strs = []
                    for (var i of this.dto.params) {
                        if (i.value) {
                            strs.push(i.value)
                        }
                    }
                    return strs.join(',')
                }
                return ''
            }
        },
        components: {
            dying318picker,
            treeFilter
        }
    }
</script>

<style lang="scss" scoped>
    .banner-img {
        width: 96rpx;
        height: 96rpx;
        border-radius: 4rpx;
        border: 2rpx dashed #CECECE;
    }

    .form-item {
        // padding: 40rpx;
        border-bottom: 1px solid #F3F3F3;
        display: flex;
        padding: 20rpx;
        // height: 100px;

        .label {
            width: 300rpx;
            line-height: 60px;

        }

        .flex {
            line-height: 60px;

            .flex1 {
                flex: 1;
                text-align: center;
                color: var(--selfblue)
            }


        }

    }

    .form-item.bottom-border-no {
        border-bottom: none;
    }

    .container-page {
        padding: 40rpx;
        background-color: #FFFFFF;
        // min-height: calc(100vh - 80rpx);
        min-height: 100vh;
    }

    .style {
        width: fit-content;
        margin: 0 auto;
        line-height: 64rpx;
        border-radius: 8rpx;
        padding-left: 20rpx;
        padding-right: 20rpx;
        // padding-top: 5rpx;
        // padding-bottom: 5rpx;
        border: 2rpx solid var(--selfblue);
        background-color: var(--selfbluebg);
        min-width: 100rpx;
    }


    .style-1 {
        border: 1px solid rgb(122, 187, 255);
        border: 1px solid #409EFF;
        color: #409EFF;
        background-color: rgb(240, 247, 255);
    }

    .style-2 {
        border: 1px solid rgb(255, 184, 78);
        border: 1px solid #FE9044;
        color: #FE9044;
        background-color: rgb(255, 247, 235);
    }

    .style-3 {
        border: 1px solid #19be6b;
        color: #19be6b;
        background-color: rgb(231, 244, 238);
    }

    .style-4 {
        border: 1px solid #F56c6c;
        color: #F56c6c;
        background-color: rgb(254, 243, 243);
    }
<template>

    <view class="container-page" style="padding: 0rpx;">

        <view>

            <view class="form-item">

                <view class="label required">商品分类</view>

                <!--                 <view class="m-l-a m-r-0 flex " :class="[!dto.category?'desc-gray':'']" @click="()=>{

                    // show_select_category=true

                    $refs.picker_category.showPicker()

                }">

                    <view>{{dto.categoryStr||dto.category || '请选择'}}</view>

                    <u-icon class="m-l-a" name="arrow-right"></u-icon>

                </view> -->

                <view class="m-l-a m-r-0 flex " :class="[!dto['category']?'desc-gray':'']">

                    <!--     <uni-data-picker ref="picker_category" @change="(e)=>{PickCategory(dto,e)}" placeholder=""

                        @search="updateSearch" :filter="true" :localdata="columns_categorys_picker">

                        {{dto.categoryStr||dto.category || '请选择'}}

                    </uni-data-picker> -->

                    <tree-filter ref="picker_category" @change="(e)=>{PickCategory(dto,e)}" placeholder=""

                        @search="updateSearch" :filter="true" :localdata="columns_categorys_picker"

                        selectConfirmTitle="">

                        <view class="flex">

                            <view>{{dto.categoryStr||dto.category || '请选择'}}</view>

                            <u-icon class="m-l-a" name="arrow-right"></u-icon>

                        </view>



                    </tree-filter>

                </view>

            </view>

            <view class="form-item before-line">

                <view class="label required">商品名称</view>

                <view class="m-l-a m-r-0 flex">

                    <input v-model="dto.name" placeholder="请选择分类" disabled

                        style="margin-top: 16px;text-align: right;"></input>



                </view>

            </view>

            <view class="form-item before-line">

                <view class="label required">商品单位</view>

                <view class="m-l-a m-r-0 flex">

                    <input v-model="dto.unit" placeholder="请选择分类" disabled

                        style="margin-top: 16px;text-align: right;"></input>



                </view>

            </view>



            <view class="form-item before-line">

                <view class="label required">商品颜色</view>

                <!--     <view class="m-l-a m-r-0 flex " :class="[!dto.color?'desc-gray':'']" @click="()=>{

                    show_select_color=true

                }">

                    <view>{{dto.applicationTypeStr||dto.applicationType || '请选择'}}</view>

                    <u-icon class="m-l-a" name="arrow-right"></u-icon>

                </view> -->

                <view class="m-l-a m-r-0 flex">

                    <input v-model="dto.color" placeholder="请选择分类" disabled

                        style="margin-top: 16px;text-align: right;"></input>

                </view>

            </view>

            <view class="line-gray-big"></view>



            <!-- :style="{'background-image':dto.cover&&`url('${dto.cover}')`||''}" -->

            <view class="form-item bottom-border-no">

                <view class="label required" style="width: 400rpx;">列表封面图（130*120px）</view>

                <view class="m-l-a m-r-0 flex">

                    <view class="component-button-upload" @click="uploadIcon('cover')">



                    </view>

                </view>

            </view>

            <view class="flex p20" style="padding-top: 0rpx;padding-bottom: 10rpx" v-if="dto.cover">

                <view class="m-t-12 m-r-10 ">

                    <image class="banner-img" :src="dto.cover" @click.stop="previewImg(dto.cover)">



                    </image>

                    <view class="t-red text-center" @click.stop="dto.cover=''">删除</view>

                </view>

            </view>



            <view class="form-item before-line bottom-border-no">

                <view class="label required" style="width: 400rpx;">商品轮播图（300*160px）</view>

                <view class="m-l-a m-r-0 flex">

                    <!-- :style="{'background-image':dto.icon&&`url('${dto.icon}')`||''}" -->

                    <view class="component-button-upload" @click="uploadIcon('bannerList')">



                    </view>

                </view>

            </view>

            <view class="flex p20" style="padding-top: 0rpx;padding-bottom: 10rpx"

                v-if="dto.bannerList&&dto.bannerList.length>0">

                <view class="m-t-12 m-r-10 " v-for="(tBanner,index) of dto.bannerList" :key="index">

                    <image class="banner-img" :src="tBanner" @click.stop="previewImg(tBanner)">



                    </image>

                    <view class="t-red text-center" @click.stop="deleteBanner(index)">删除</view>

                </view>

            </view>

            <view class="line-gray-big"></view>





            <view class="form-item before-line">

                <view class="label required">售价(元)</view>

                <view class="m-l-a m-r-0 flex">

                    <input v-model="dto.price" placeholder="请输入数字" type="digit"

                        style="margin-top: 16px;text-align: right;"></input>

                </view>

            </view>

            <view class="form-item ">

                <view class="label required">库存</view>

                <view class="m-l-a m-r-0 flex">

                    <input v-model="dto.stock" placeholder="请输入数字" type="number"

                        style="margin-top: 16px;text-align: right;"></input>

                </view>

            </view>



            <view class="line-gray-big"></view>



            <view class="form-item ">

                <view class="label required">商品参数详情</view>

                <view class="m-l-a m-r-0 flex " :class="[!dto.applicationType?'desc-gray':'']" @click="()=>{

                    if(!dto.category){

                        $message.showToast('请先选择分类')

                    }else{

                        if(dto.params&&dto.params.length==0){

                            $message.showToast('暂无参数可以设置')

                        }else{

                            $refs.popup_param.open()

                        }

						
                    }

                }">

                    <view>{{ paramstr || '去设置'}}</view>

                    <u-icon class="m-l-a" name="arrow-right"></u-icon>

                </view>



            </view>

            <view class="line-gray-big"></view>

            <view class="form-item before-line">

                <view class="label required">商品等级</view>

                <view class="m-l-a m-r-0 flex " :class="[!dto.level?'desc-gray':'']" @click="()=>{

                    show_select_level=true

                }">

                    <view>{{dto.levelStr||dto.level || '请选择'}}</view>

                    <u-icon class="m-l-a" name="arrow-right"></u-icon>

                </view>



            </view>





            <view class="form-item before-line">

                <view class="label required">商品视频</view>

                <view class="m-l-a m-r-0 flex">

                    <!-- :style="{'background-image':dto.icon&&`url('${dto.icon}')`||''}" -->

                    <view class="component-button-upload m-r-15" @click="uploadIcon('video')">



                    </view>



                </view>

            </view>

            <view v-if="dto.video">

                <video :src="dto.video" style="display: block;margin: 0 auto;"></video>

            </view>



            <view style="min-height: 200rpx;">

                &nbsp;

            </view>

            <view class="button-green-1 m-t-20 button-fixed-bottom " @click="submit" v-if="!dto.id">

                提交审核

            </view>

            <view class="button-green-1 m-t-20 button-fixed-bottom before-line" @click="submit" v-if="dto.id">

                修改

            </view>

        </view>

        <!-- 


        <u-picker @confirm="select_category" keyName="name" @cancel="show_select_category=false"

            :show="show_select_category" :columns="columns_categorys"></u-picker> -->



        <u-picker @confirm="select_level" keyName="label" @cancel="show_select_level=false" :show="show_select_level"

            :columns="columns_levels"></u-picker>





        <uni-popup ref="popup_param" type="top">

            <view class="component-popup_input" v-if="dto.params">

                <view class="text-center m-b-40" style="font-size: 48rpx;font-weight: 600;">商品参数设置</view>

                <!-- 输入框-->

                <view v-for="(item,i) in dto.params" :key="i" class="m-b-20">

                    <view class="title topic-font" style="font-size: 36rpx;font-weight: 600;">{{item.name}}</view>

                    <view class="m-t-12">

                        <u-radio-group v-model="item.value" placement="row">

                            <u-radio

                                :customStyle="{'margin-bottom': '16rpx','margin-right': '24rpx','font-size':'28rpx'}"

                                v-for="(each, j) in item.values" :key="j" :label="each" :name="each">

                            </u-radio>

                        </u-radio-group>

                    </view>

                </view>



                <!-- 提交按钮 -->

                <view class="button-green" @click="closeParamPop">返回</view>

            </view>

        </uni-popup>

        <!--         <dying318picker :picker-list="columns_categorys" ref="picker_category" @confirm="confirmPickerCategory">

        </dying318picker> -->

    </view>

</template>



<script>

    import environments from '@/environments'

    import dying318picker from '@/components/dying318-picker/Picker.vue'

    import treeFilter from '@/components/tree-filter/tree-filter.vue'





    import {

        mapState

    } from 'vuex'



    export default {



        data() {

            return {

                id: '',

                dto: {

                    id: '',

                    category: '',

                    name: '',

                    unit: '',

                    color: '',

                    cover: '',

                    bannerList: [], //str[]

                    video: '',

                    level: '', //FLOWER_LEVEL

                    price: 0.00,

                    stock: 0,

                    params: [], //id,value

                },

                show_select_category: false,

                show_select_level: false,

                columns_categorys: [],

                columns_categorys_picker: [],

                columns_categorys_dict: {},

                columns_categorys_search: '',

                columns_levels: [],

                //     columns_params: [], //弹窗选择具体的值

                // cancel: {

                //     color: '#999',

                // },

                // confirm: {

                //     color: '#20613D',

                // },

                // column: [

                //     {flex: 1},

                //     {flex: 1},

                //     {flex: 3},

                // ]

            }

        },



        async onLoad(options) {

            //tree

            this.$http.request('get', '/api/flower/category/tree', {}).then(res => {

                var data = res.data

                this.columns_categorys = data || []

                // console.log('columns_categorys', this.columns_categorys)

                //递归mao

                this.mapCategoryTree(this.columns_categorys_picker, this.columns_categorys)

                // console.log('columns_categorys_picker', this.columns_categorys_picker)

                // this.columns_categorys = [data || []]

                // this.columns_categorys[0].unshift({

                //     label: '全部',

                //     value: '',

                //     children: []

                // })



            })



            this.$http.request('get', '/api/code/value', {

                params: {

                    type: 'FLOWER_LEVEL'

                }

            }).then(res => {

                var data = res.data

                this.columns_levels = [data || []]

                this.columns_levels[0].unshift({

                    label: '全部',

                    value: ''

                })



            })

            if (options.id) {

                this.id = options.id

                uni.setNavigationBarTitle({

                    title: '商品详情'

                })

                this.getDetail()

            } else {

                if (options.copyId) {

                    this.id = options.copyId

                    await this.getDetail()

                    this.id = ''

                    delete this.dto.id

                    uni.setNavigationBarTitle({

                        title: '复制商品并新增'

                    })

                } else {

                    uni.setNavigationBarTitle({

                        title: '商品新增'

                    })

                }





            }



        },



        methods: {

            async updateSearch(search) {

                this.columns_categorys_search = search || ''

                this.columns_categorys_picker = []

                this.mapCategoryTree(this.columns_categorys_picker, this.columns_categorys)

                console.log('change updateSearch', search, this.columns_categorys_picker)

                this.$refs.picker_category.selectedClear()

            },

            async PickCategory(item, e) {

                console.log('PickCategory', item, e)

                if (e.detail.value) {

                    var currentnode = this.columns_categorys_dict['@' + e.detail.value[e.detail.value.length - 1]

                        .value]

                    let tmpe = e

                    if (this.dto.category && this.dto.category !== currentnode.id) {

                        this.$message.confirm('修改分类将清空商品参数，确定修改吗').then(async res => {

                            // console.log('currentnode',currentnode,this.columns_categorys_dict,'@'+e.detail.value[e.detail.value.length - 1].value)

                            this.dto.categoryStr = currentnode.name

                            this.dto.category = currentnode.id

                            this.dto.name = currentnode.name

                            this.dto.unit = currentnode.unit

                            this.dto.color = currentnode.color

                            //递归获取category的其他数据，用来做map？

                            this.$message.showLoading()

                            await this.refresh_category()

                            this.$message.hideLoading()

                        }).catch(e1 => {

                            console.log('this.$refs.picker_category', this.$refs.picker_category)

                            this.$refs.picker_category.onchange(tmpe.detail.value)

                        })

                    } else {

                        this.dto.categoryStr = currentnode.name

                        this.dto.category = currentnode.id

                        this.dto.name = currentnode.name

                        this.dto.unit = currentnode.unit

                        this.dto.color = currentnode.color

                        //递归获取category的其他数据，用来做map？

                        this.$message.showLoading()

                        await this.refresh_category()

                        this.$message.hideLoading()

                    }

                }

            },

            mapCategoryTree(node, arr) {

                var has = true

                if (arr) {

                    var hasTrue = false

                    if (!this.columns_categorys_search) {

                        hasTrue = true

                    }

                    for (var item of arr) {

                        has = true

                        if (this.columns_categorys_search) {

                            has = false

                        }

                        var tmp = {

                            ...item,

                            name: item.name,

                            text: item.name,

                            label: item.name,

                            value: item.id,

                            children: undefined

                        }

                        if (this.columns_categorys_search) {

                            if (this.columns_categorys_search.indexOf(item.name) >= 0 ||

                                item.name.indexOf(this.columns_categorys_search) >= 0

                            ) {

                                has = true

                                hasTrue = true

                            }

                        }

                        // if (item.name == this.columns_categorys_search) {

                        //     has = true

                        //     hasTrue = true

                        // }

                        this.columns_categorys_dict['@' + item.id] = item

                        if (item.children && item.children.length > 0) {

                            tmp.children = []

                            var childrenhas = this.mapCategoryTree(tmp.children, item.children)

                            if (childrenhas) {

                                has = true

                                hasTrue = true

                            }

                        } else {

                            tmp.children = undefined

                        }



                        if (has) {

                            console.log('has ', tmp, hasTrue, has)

                            node.push(tmp)

                        } else {



                        }

                        if (!has && hasTrue) {

                            //说明是这个节点有的，需要判断是否需要删除

                            if (!tmp.children || tmp.children.length == 0) {



                            } else {

                                console.log('has ', tmp, hasTrue, has)

                                node.push(tmp)

                            }

                        }

                        // if (hasTrue || has) {

                        //     node.push(tmp)



                        // } else {

                        //     console.log('not has ', tmp)

                        // }



                    }

                }

                return hasTrue

            },

            async confirmPickerCategory(picker) {

                console.log('confirmPickerCategory', picker)

                var id = picker.value

                var name = picker.label

                if (id !== this.dto.category) {

                    if (this.dto.category) {

                        await this.$message.confirm('修改分类将清空商品参数，确定修改吗')

                    }

                    this.dto.categoryStr = name

                    this.dto.category = id

                    // name: '',

                    // unit: '',

                    // color: '',

                    //递归获取category的其他数据，用来做map？

                    this.$message.showLoading()

                    await this.refresh_category()

                    this.$message.hideLoading()

                }

            },

            closeParamPop() {

                this.$refs.popup_param.close()

            },



            async refresh_category() {

                // this.columns_params = []

                this.dto.params = []

                //获取分类参数

                if (this.dto.category) {

                    const res = await this.$http.request('get', '/api/supplier/flower/params', {

                        params: {

                            categoryId: this.dto.category

                        }

                    })

                    if (res.code == 0) {

                        // this.columns_params = res.data || []

                        this.dto.params = res.data || []

                    }

                }



            },

            select_level(e) {

                this.show_select_level = false

                this.dto.levelStr = e.value[0].label

                this.dto.level = e.value[0].value

            },



            async getDetail() {

                this.$message.showLoading()

                const {

                    code,

                    data

                } = await this.$http.request('get', "/api/supplier/flower/list/view?id=" + this.id, {})

                if (code == 0) {

                    this.dto = {

                        ...data,



                    }

                    // if (this.dto.applicationDate) {

                    //     this.dto.applicationDate = this.$util.toDate(new Date(this.dto.applicationDate))

                    // }

                    // // console.log('this.dto', this.dto)

                    if (!this.dto.bannerList) {

                        this.dto.bannerList = []

                    }

                    // if (this.dto.category) {

                    //     await this.refresh_category()

                    // }

                }



                this.$message.hideLoading()



            },

            async submit() {

                // if (!this.dto.applicationType) {

                //     this.$message.showToast('未选择类型')

                //     return

                // }

                // if (!this.dto.applicationTitle) {

                //     this.$message.showToast('未填写申请主题')

                //     return

                // }

                // if (!this.dto.auditPersonId) {

                //     this.$message.showToast('未选择审批人')

                //     return

                // }

                // await this.$message.confirm(`是否确定提交申请${this.auditPersonName?("，审批人为:"+this.auditPersonName):""}`)



                // this.$message.showToast('1')

                // return

                var dto = {

                    ...this.dto,

                    // applicationDate: this.$util.toDate(new Date()),

                    // applicantId: this.currentInfo.id

                }

                this.$message.showLoading()

                const re = await this.$http.request('post', `/api/supplier/flower/list/${this.id?'edit':'new'}`, {

                    data: dto

                })

                this.$message.hideLoading()

                if (re.code == 2000 || re.code == 0) {

                    this.$message.showToast('操作成功')

                    //需要标记加一下

                    // this.$store.dispatch('sign_add', 'application');



                    this.backpage()

                }

            },

            async deleteBanner(index) {

                await this.$message.confirm('是否确认删除此图片')

                // this.dto.bannerList  = 
                this.dto.bannerList.splice(index, 1)

            },

            uploadIcon(key) {

                console.log('that dto key', key)

                const that = this

                if (key == 'video') {

                    uni.chooseVideo({

                        sourceType: ['camera', 'album'],

                        success: function(res) {

                            if (res.tempFilePath) {

                                console.log('res.tempFilePath', res.tempFilePath)

                                that.$message.showLoading()

                                that.$http.upload(res.tempFilePath).then(async res => {

                                    console.log('res1', res)

                                    var pic = res.data && res.data.length > 0 && res.data[

                                            0]

                                        .url || ''

                                    that.$message.hideLoading()

                                    that.dto[key] = pic || ''



                                    that.$forceUpdate()

                                    console.log('that dto', that.dto)

                                }).catch(res => {

                                    that.$message.hideLoading()

                                    console.error(res)

                                })

                            }

                        }

                    });

                } else {



                    uni.chooseImage({

                        count: 1, // 最多可以选择的图片张数，默认9

                        sizeType: ['compressed'], //original 原图，compressed 压缩图，默认二者都有

                        sourceType: ['camera', 'album'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项

                        success: function({

                            errMsg,

                            tempFiles

                        }) {

                            if (errMsg === 'chooseImage:ok') {

                                // console.log(tempFiles[0])

                                that.$message.showLoading()

                                that.$http.upload(tempFiles[0].path).then(async res => {

                                    console.log('res1', res)

                                    var pic = res.data && res.data.length > 0 && res.data[

                                            0]

                                        .url || ''

                                    that.$message.hideLoading()

                                    if (key == 'bannerList') {

                                        that.dto[key].push(pic)

                                    } else {

                                        that.dto[key] = pic || ''

                                    }



                                    that.$forceUpdate()

                                }).catch(res => {

                                    that.$message.hideLoading()

                                    console.error(res)

                                })

                            }

                        }

                    })

                }

            },



        },

        computed: {

            ...mapState(['currentInfo']),

            paramstr() {

                if (this.dto && this.dto.params) {

                    var strs = []

                    for (var i of this.dto.params) {

                        if (i.value) {

                            strs.push(i.value)

                        }

                    }

                    return strs.join(',')

                }

                return ''

            }

        },

        components: {

            dying318picker,

            treeFilter

        }

    }

</script>



<style lang="scss" scoped>

    .banner-img {

        width: 96rpx;

        height: 96rpx;

        border-radius: 4rpx;

        border: 2rpx dashed #CECECE;

    }



    .form-item {

        // padding: 40rpx;

        border-bottom: 1px solid #F3F3F3;

        display: flex;

        padding: 20rpx;

        // height: 100px;



        .label {

            width: 300rpx;

            line-height: 60px;



        }



        .flex {

            line-height: 60px;



            .flex1 {

                flex: 1;

                text-align: center;

                color: var(--selfblue)

            }





        }



    }



    .form-item.bottom-border-no {

        border-bottom: none;

    }



    .container-page {

        padding: 40rpx;

        background-color: #FFFFFF;

        // min-height: calc(100vh - 80rpx);

        min-height: 100vh;

    }



    .style {

        width: fit-content;

        margin: 0 auto;

        line-height: 64rpx;

        border-radius: 8rpx;

        padding-left: 20rpx;

        padding-right: 20rpx;

        // padding-top: 5rpx;

        // padding-bottom: 5rpx;

        border: 2rpx solid var(--selfblue);

        background-color: var(--selfbluebg);

        min-width: 100rpx;

    }





    .style-1 {

        border: 1px solid rgb(122, 187, 255);

        border: 1px solid #409EFF;

        color: #409EFF;

        background-color: rgb(240, 247, 255);

    }



    .style-2 {

        border: 1px solid rgb(255, 184, 78);

        border: 1px solid #FE9044;

        color: #FE9044;

        background-color: rgb(255, 247, 235);

    }



    .style-3 {

        border: 1px solid #19be6b;

        color: #19be6b;

        background-color: rgb(231, 244, 238);

    }



    .style-4 {

        border: 1px solid #F56c6c;

        color: #F56c6c;

        background-color: rgb(254, 243, 243);

    }

</style>