fix bug

xuxueyang

2024-07-15 f09d9ec905b6247b36a394158662fe90d02197a5

fix bug

 common/global.scss

@@ -99,10 +99,10 @@
            font-weight: 400;
            font-size: 28rpx;
            line-height: 58rpx;
            padding: 8rpx 30rpx;
            padding: 8rpx 24rpx;
            color: #33a868;
            margin-left: 13rpx;
            margin-right: 13rpx;
            margin-left: 6rpx;
            margin-right: 6rpx;
            border: 2rpx solid #F1F5F2;
        }
        .value-item.cur{

 mixin/mixin.js

@@ -24,6 +24,9 @@
            cache_user: state => {
                return state.currentInfo || {}
            },
            sign: state => {
                return state.sign || {}
            },
            // currentEnId: state=>{
            //     // console.log('currentEnId',state.currentInfo.enId,state.currentInfo)
            //     return state.currentInfo.enId || ''

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

@@ -27,7 +27,7 @@
                </view>

            </view>

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

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

                <view class="label">商品名称</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>

@@ -35,7 +35,7 @@
                </view>

            </view>

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

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

                <view class="label">商品单位</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>

@@ -44,7 +44,7 @@
            </view>



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

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

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

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

                    show_select_color=true

                }">

@@ -77,7 +77,7 @@
            </view>



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

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

                <view class="label " 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')">

@@ -147,7 +147,7 @@




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

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

                <view class="label">商品视频</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')">

@@ -229,6 +229,16 @@
                    stock: 0,

                    params: [], //id,value

                },

                requireFields: [{

                    name: '商品分类',

                    key: 'category'

                },{

                    name: '列表封面图',

                    key: 'cover'

                },{

                    name: '商品等级',

                    key: 'level'

                }],

                show_select_category: false,

                show_select_level: false,

                columns_categorys: [],

@@ -276,10 +286,10 @@
            }).then(res => {

                var data = res.data

                this.columns_levels = [data || []]

                this.columns_levels[0].unshift({

                    label: '全部',

                    value: ''

                })

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

                //     label: '全部',

                //     value: ''

                // })



            })

            if (options.id) {

@@ -500,6 +510,16 @@


            },

            async submit() {

                for (var field of this.requireFields) {

                    if (!this.dto[field.key]) {

                        this.$message.showToast(`${field.name}信息未填写`)

                        return

                    }

                }
                if(this.dto.params.length<1){
                    this.$message.showToast('商品参数详情未设置')
                    return
                }

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

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

                //     return

@@ -532,6 +552,12 @@
                    this.$store.dispatch('sign_add', 'flower');



                    this.backpage()

                } else {

                    console.log('error re', re)

                    if (re.code === 30000 && Array.isArray(re.msg)) {

                        this.$message.showToast('字段未填写完整')



                    }

                }

            },

            async deleteBanner(index) {

@@ -544,8 +570,15 @@
                const that = this

                if (key == 'video') {

                    uni.chooseVideo({

                        maxDuration: 30,

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

                        success: function(res) {

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

                            // size: 11082508

                            if (res.size > 1024 * 1024 * 50) {

                                that.$message.confirm('视频最多支持50M大小,超出大小限制')

                                return

                            }

                            if (res.tempFilePath) {

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

                                that.$message.showLoading()

@@ -572,12 +605,15 @@
                        count: 1, // 最多可以选择的图片张数，默认9

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

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

                        success: function({

                            errMsg,

                            tempFiles

                        }) {

                        success: function(res) {

                            let errMsg = res.errMsg

                            let tempFiles = res.tempFiles

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

                                // console.log(tempFiles[0])

                                if (tempFiles[0].size > 1024 * 1024 * 5) {

                                    that.$message.confirm('图片最多支持5M大小,超出大小限制')

                                    return

                                }

                                that.$message.showLoading()

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

                                    console.log('res1', res)


 sub_pages/supplier/supplier-info/supplier-info.vue

@@ -1,566 +1,631 @@
<template>
    <view class="container-page">
        <view>
            <view class="form-item">
                <view class="label required">店铺类型</view>
                <view class="m-l-a m-r-0 flex " :class="[!dto.typeId?'desc-gray':'']" @click="()=>{
                    if(!id){
                        show_select_type=true
                    }
                }">
                    <view>{{dto.typeName || '请选择'}}</view>
                    <u-icon class="m-l-a" name="arrow-right"></u-icon>
                </view>
                <!--     <view class="m-l-a m-r-0 flex " :class="[!dto.typeId?'desc-gray':'']">
                    <uni-data-picker @change="(e)=>{PickData('typeId','typeStr',e)}" placeholder="请选择"
                        :localdata="columns_types">
                        {{dto.typeStr || '请选择'}}
                    </uni-data-picker>
                    <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">
                    <input v-model="dto.name" placeholder="请输入店铺名称" style="margin-top: 16px;text-align: right;"></input>

                </view>
            </view>
            <view class="form-item bottom-border-no">
                <view class="label required" style="width: 360rpx;">店铺头像（750*750px）</view>
                <view class="m-l-a m-r-0 flex m-t-20 m-b-20">
                    <view class="component-button-upload" @click="uploadIcon('cover')">

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

                        </image>
                        <view class="t-red text-center" @click.stop="deleteImg('cover','')">删除</view>
                    </view>
                </view>
            </view>
            <u-divider></u-divider>

            <view class="form-item before-line">
                <view class="label required">联系人姓名</view>
                <view class="m-l-a m-r-0 flex">
                    <input v-model="dto.contactName" placeholder="请输入联系人姓名"
                        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.contactTel" placeholder="请输入联系方式"
                        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.stationId?'desc-gray':'']" @click="()=>{
                    if(!id){
                        show_select_station=true
                    }
                }">
                    <view>{{dto.stationName || '请选择'}}</view>
                    <u-icon class="m-l-a" name="arrow-right"></u-icon>
                </view>
                <!--             <view class="m-l-a m-r-0 flex " :class="[!dto.stationId?'desc-gray':'']">
                    <uni-data-picker @change="(e)=>{PickData('stationId','stationStr',e)}" placeholder="请选择"
                        :localdata="columns_station">
                        {{dto.typeStr || '请选择'}}
                    </uni-data-picker>
                    <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 " :class="[!dto.applicationType?'desc-gray':'']" @click="()=>{
                    if(!id){
                        show_select_type=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 " :class="[!dto['province']?'desc-gray':'']">
                    <uni-data-picker @change="(e)=>{PickArea(dto,e)}" placeholder="" :localdata="regionDataPlus">
                        {{ dto['province'] || '请选择' }}{{ dto['city'] && ('/' + dto['city']) || '' }}{{
                                                  dto['region'] && ('/' + dto['region']) || ''
                                                }}
                    </uni-data-picker>
                    <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">
                    <input v-model="dto.address" placeholder="请输入地址"
                        style="margin-top: 16px;text-align: right;"></input>

                </view>
            </view>
            <view class="form-item before-line">
                <view class="label required">店铺简介</view>
            </view>
            <view class="flex">
                <u--textarea v-model="dto.description" placeholder="请输入店铺简介"></u--textarea>
            </view>
            <view class="form-item before-line m-t-20">
                <view class="label required">选择审核方式</view>
                <view class="m-l-a m-r-0 flex">

                    <u-radio-group v-model="dto.idcardType" placement="row">
                        <u-radio :customStyle="{'margin-bottom': '8px','margin-right': '8px','font-size':'28rpx'}"
                            v-for="(item, index) in shTypeList" :key="index" :label="item.name" :name="item.name">
                        </u-radio>
                    </u-radio-group>
                </view>
            </view>
            <view class="form-item bottom-border-no before-line m-t-20 p-b-20" v-if="dto.idcardType=='身份证'">
                <view class="label required">身份证正反面</view>
                <view class="m-l-a m-r-0 flex">
                    <!--                     <view class="component-button-upload m-r-15" @click="uploadIcon('idCards')">

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

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

                    </image>
                    <view class="t-red text-center" @click.stop="deleteImg('idCards',index)">删除</view>
                </view>
            </view>
            <view class="form-item bottom-border-no before-line m-t-20 p-b-20" v-if="dto.idcardType=='营业执照'">
                <view class="label required">营业执照</view>
                <view class="m-l-a m-r-0 flex">
                    <view class="component-button-upload m-r-15" @click="uploadIcon('pictures')">

                    </view>

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

                    </image>
                    <view class="t-red text-center" @click.stop="deleteImg('pictures',index)">删除</view>
                </view>
            </view>



            <view class="button-green-1 m-t-20 button-fixed-bottom before-line " @click="submit">
                提交审核
            </view>

        </view>

        <view style="min-height: 200rpx;">
            &nbsp;
        </view>
        <u-picker @confirm="select_type" keyName="name" @cancel="show_select_type=false" :show="show_select_type"
            :columns="columns_types"></u-picker>

        <u-picker @confirm="select_station" keyName="name" @cancel="show_select_station=false"
            :show="show_select_station" :columns="columns_station"></u-picker>


    </view>
</template>

<script>
    import environments from '@/environments'

    import {
        mapState
    } from 'vuex'

    export default {

        data() {
            return {
                id: '',
                refresh: false,
                api: '',
                dto: {
                    id: '',
                    pictures: [],
                    idCards: [],
                    cover: '',
                    idcardType: '身份证',
                    description: '',
                    address: '',
                    stationId: '',
                    stationName: '',
                    id: '',
                    userId: '',
                    name: '',
                    typeId: '',
                    typeName: '',
                    contactName: '',
                    contactTel: '',
                    province: '',
                    city: '',
                    region: '',
                },
                show_select_type: false,
                show_select_station: false,
                columns_types: [],
                columns_station: [],

                //审核方式
                shTypeList: [{
                        name: '身份证',
                        disabled: false
                    },
                    {
                        name: '营业执照',
                        disabled: false
                    }
                ],
                regionDataPlus: [],
            }
        },
        onLoad(options) {
            if (options.id) {
                this.id = options.id
                this.getDetail()
            } else {
                this.getCurrentInfo()
                //类型和集火站
                this.$http.request('get', '/api/station/list', {
                    params: {}
                }).then(res => {
                    var data = res.data
                    this.columns_station = [data || []]
                    // this.columns_station = (data || []).map(item => {
                    //     return {
                    //         ...item,
                    //         code: item.id,
                    //         text: item.name,
                    //     }
                    // })
                })
                //类型和集火站
                this.$http.request('get', '/api/supplier/type/list', {
                    params: {}
                }).then(res => {
                    var data = res.data
                    this.columns_types = [data || []]
                    // this.columns_types = (data || []).map(item => {
                    //     return {
                    //         ...item,
                    //         code: item.id,
                    //         text: item.name,
                    //     }
                    // })
                    // console.log('columns_types', this.columns_types)
                })
                this.init_area()
            }

        },

        methods: {
            PickArea(item, e) {
                console.log('PickArea', item, e)
                if (e.detail.value) {
                    this.dto.province = ''
                    this.dto.city = ''
                    this.dto.region = ''
                    if(e.detail.value.length<=3){
                        if (!!e.detail.value[0])
                            this.dto.province = e.detail.value[0].value
                        if (!!e.detail.value[1])
                            this.dto.city = e.detail.value[1].value
                        if (!!e.detail.value[2])
                            this.dto.region = e.detail.value[2].value
                    }else{
                        //说明有重复的
                        var plusnum = e.detail.value.length - 3
                        if (!!e.detail.value[plusnum+0])
                            this.dto.province = e.detail.value[plusnum+0].value
                        if (!!e.detail.value[plusnum+1])
                            this.dto.city = e.detail.value[plusnum+1].value
                        if (!!e.detail.value[plusnum+2])
                            this.dto.region = e.detail.value[plusnum+2].value
                    }

                    this.$forceUpdate()

                }
            },
            PickData(valueKey, nameKey, e) {
                // console.log('PickArea', item, e)
                if (e.detail.value) {
                    if (!!e.detail.value[0])
                        this.dto[valueKey] = e.detail.value[0].value || e.detail.value[0].id
                    if (nameKey) {
                        this.dto[nameKey] = e.detail.value[0].label || e.detail.value[0].name || e.detail.value[0].value
                    }
                    this.$forceUpdate()

                }
            },
            async init_area() {
                const res = await this.$http.request('get', '/api/pub/china/area/json')
                // console.log('area', JSON.parse(res.data))
                this.regionDataPlus = res.data && JSON.parse(res.data.replaceAll('code', 'value').replaceAll('name',
                    'text')) || []
					
                console.log('area', this.regionDataPlus)


            },

            select_type(e) {
                this.show_select_type = false
                this.dto.typeName = e.value[0].name
                this.dto.typeId = e.value[0].id
            },
            select_station(e) {
                this.show_select_station = false
                this.dto.stationName = e.value[0].name
                this.dto.stationId = e.value[0].id
            },
            async getCurrentInfo() {
                this.$message.showLoading()
                const {
                    code,
                    data
                } = await this.$http.request('get', "/api/current/supplier", {})
                if (code == 0) {
                    this.dto = {
                        ...data,

                    }
                    if (!this.dto.pictures) {
                        this.dto.pictures = []
                    } else if (typeof this.dto.pictures == 'string') {
                        this.dto.pictures = JSON.parse(this.dto.pictures)
                    }
                    if (!this.dto.idCards) {
                        this.dto.idCards = []
                    } else if (typeof this.dto.idCards == 'string') {
                        this.dto.idCards = JSON.parse(this.dto.idCards)
                    }

                    if (this.dto.idcardType == '1') {
                        this.dto.idcardType = '身份证'
                    }
                    this.dto.userId = this.currentInfo.id

                }

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

                    }
                    if (!this.dto.pictures) {
                        this.dto.pictures = []
                    } else if (typeof this.dto.pictures == 'string') {
                        this.dto.pictures = JSON.parse(this.dto.pictures)
                    }
                    if (!this.dto.idCards) {
                        this.dto.idCards = []
                    } else if (typeof this.dto.idCards == 'string') {
                        this.dto.idCards = JSON.parse(this.dto.idCards)
                    }
                    if (this.dto.idcardType == '1') {
                        this.dto.idcardType = '身份证'
                    }
                }

                this.$message.hideLoading()

            },
            async submit() {

                await this.$message.confirm(`是否确定提交/修改店铺信息`)


                var dto = {
                    ...this.dto,
                    idcardType: this.dto.idcardType === '身份证' ? "1" : '2'
                }
                this.$message.showLoading()
                const re = await this.$http.request('post', '/api/supplier/addOrUpdate', {
                    data: dto
                })
                this.$message.hideLoading()
                if (re.code == 2000 || re.code == 0) {
                    this.$message.showToast('操作成功')
                    //需要标记加一下
                    this.$store.dispatch('sign_add', 'info');
                    this.$store.dispatch('getCurrentInfo')

                    this.backpage()
                }
            },

            async deleteImg(key, index) {
                await this.$message.confirm('是否确认删除此图片')
                if (Array.isArray(this.dto[key])) {
                    this.dto[key].splice(index, 1)

                } else {
                    this.dto[key] = ''
                }
                this.$forceUpdate()
            },
            uploadIcon(key) {
                const that = this
                uni.chooseImage({
                    count: 1, // 最多可以选择的图片张数，默认9
                    sizeType: ['original', 'compressed'], //original 原图，compressed 压缩图，默认二者都有
                    sourceType: ['camera', 'album'], //album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
                    success: function({
                        errMsg,
                        tempFiles
                    }) {
                        if (errMsg === 'chooseImage:ok') {
<template>

    <view class="container-page">

        <view>

            <view class="form-item">

                <view class="label required">店铺类型</view>

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

                    if(!id){

                        show_select_type=true

                    }

                }">

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

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

                </view>

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

                    <uni-data-picker @change="(e)=>{PickData('typeId','typeStr',e)}" placeholder="请选择"

                        :localdata="columns_types">

                        {{dto.typeStr || '请选择'}}

                    </uni-data-picker>

                    <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">

                    <input v-model="dto.name" placeholder="请输入店铺名称" style="margin-top: 16px;text-align: right;"></input>



                </view>

            </view>

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

                <view class="label required" style="width: 360rpx;">店铺头像（750*750px）</view>

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

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



                    </view>

                </view>

            </view>

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

                <view class="flex p20 form-item bottom-border-no" style="padding-top: 0rpx;padding-bottom: 10rpx">

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

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



                        </image>

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

                    </view>

                </view>

            </view>

            <u-divider></u-divider>



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

                <view class="label required">联系人姓名</view>

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

                    <input v-model="dto.contactName" placeholder="请输入联系人姓名"

                        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.contactTel" placeholder="请输入联系方式"

                        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.stationId?'desc-gray':'']" @click="()=>{

                    if(!id){

                        show_select_station=true

                    }

                }">

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

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

                </view>

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

                    <uni-data-picker @change="(e)=>{PickData('stationId','stationStr',e)}" placeholder="请选择"

                        :localdata="columns_station">

                        {{dto.typeStr || '请选择'}}

                    </uni-data-picker>

                    <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 " :class="[!dto.applicationType?'desc-gray':'']" @click="()=>{

                    if(!id){

                        show_select_type=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 " :class="[!dto['province']?'desc-gray':'']">

                    <uni-data-picker :area="true" @change="(e)=>{PickArea(dto,e)}" placeholder=""

                        :localdata="regionDataPlus">

                        {{ dto['province'] || '请选择' }}{{ dto['city'] && ('/' + dto['city']) || '' }}{{

                                                  dto['region'] && ('/' + dto['region']) || ''

                                                }}

                    </uni-data-picker>

                    <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">

                    <input v-model="dto.address" placeholder="请输入地址"

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



                </view>

            </view>

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

                <view class="label required">店铺简介</view>

            </view>

            <view class="flex">

                <u--textarea v-model="dto.description" placeholder="请输入店铺简介"></u--textarea>

            </view>

            <view class="form-item before-line m-t-20">

                <view class="label required">选择审核方式</view>

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



                    <u-radio-group v-model="dto.idcardType" placement="row">

                        <u-radio :customStyle="{'margin-bottom': '8px','margin-right': '8px','font-size':'28rpx'}"

                            v-for="(item, index) in shTypeList" :key="index" :label="item.name" :name="item.name">

                        </u-radio>

                    </u-radio-group>

                </view>

            </view>

            <view class="form-item bottom-border-no before-line m-t-20 p-b-20" v-if="dto.idcardType=='身份证'">

                <view class="label required">身份证正反面</view>

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

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



                    </view> -->

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



                    </view>

                </view>

            </view>

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

                v-if="dto.idcardType=='身份证'&&dto.idCards&&dto.idCards.length>0">

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

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



                    </image>

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

                </view>

            </view>

            <view class="form-item bottom-border-no before-line m-t-20 p-b-20" v-if="dto.idcardType=='营业执照'">

                <view class="label required">营业执照</view>

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

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



                    </view>



                </view>

            </view>

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

                v-if="dto.idcardType=='营业执照'&&dto.pictures&&dto.pictures.length>0">

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

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



                    </image>

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

                </view>

            </view>







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

                提交审核

            </view>



        </view>



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

            &nbsp;

        </view>

        <u-picker @confirm="select_type" keyName="name" @cancel="show_select_type=false" :show="show_select_type"

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



        <u-picker @confirm="select_station" keyName="name" @cancel="show_select_station=false"

            :show="show_select_station" :columns="columns_station"></u-picker>





    </view>

</template>



<script>

    import environments from '@/environments'



    import {

        mapState

    } from 'vuex'



    export default {



        data() {

            return {

                id: '',

                refresh: false,

                api: '',

                dto: {

                    id: '',

                    pictures: [],

                    idCards: [],

                    cover: '',

                    idcardType: '身份证',

                    description: '',

                    address: '',

                    stationId: '',

                    stationName: '',

                    id: '',

                    userId: '',

                    name: '',

                    typeId: '',

                    typeName: '',

                    contactName: '',

                    contactTel: '',

                    province: '',

                    city: '',

                    region: '',

                },

                requireFields: [{

                        name: '店铺类型',

                        key: 'typeId'

                    },

                    {

                        name: '店铺名称',

                        key: 'name'

                    },

                    {

                        name: '店铺头像',

                        key: 'cover'

                    },

                    {

                        name: '联系人姓名',

                        key: 'contactName'

                    },

                    {

                        name: '联系方式',

                        key: 'contactTel'

                    },

                    {

                        name: '集货站',

                        key: 'stationId'

                    },

                    {

                        name: '地区',

                        key: 'province'

                    },

                    {

                        name: '地址',

                        key: 'address'

                    },

                    {

                        name: '店铺简介',

                        key: 'description'

                    },

                ],

                show_select_type: false,

                show_select_station: false,

                columns_types: [],

                columns_station: [],



                //审核方式

                shTypeList: [{

                        name: '身份证',

                        disabled: false

                    },

                    {

                        name: '营业执照',

                        disabled: false

                    }

                ],

                regionDataPlus: [],

            }

        },

        onLoad(options) {

            if (options.id) {

                this.id = options.id

                this.getDetail()

            } else {

                this.getCurrentInfo()

                //类型和集火站

                this.$http.request('get', '/api/station/list', {

                    params: {}

                }).then(res => {

                    var data = res.data

                    this.columns_station = [data || []]

                    // this.columns_station = (data || []).map(item => {

                    //     return {

                    //         ...item,

                    //         code: item.id,

                    //         text: item.name,

                    //     }

                    // })

                })

                //类型和集火站

                this.$http.request('get', '/api/supplier/type/list', {

                    params: {}

                }).then(res => {

                    var data = res.data

                    this.columns_types = [data || []]

                    // this.columns_types = (data || []).map(item => {

                    //     return {

                    //         ...item,

                    //         code: item.id,

                    //         text: item.name,

                    //     }

                    // })

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

                })

                this.init_area()

            }



        },



        methods: {

            PickArea(item, e) {

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

                if (e.detail.value) {

                    this.dto.province = ''

                    this.dto.city = ''

                    this.dto.region = ''

                    if (e.detail.value.length <= 3) {

                        if (!!e.detail.value[0])

                            this.dto.province = e.detail.value[0].value

                        if (!!e.detail.value[1])

                            this.dto.city = e.detail.value[1].value

                        if (!!e.detail.value[2])

                            this.dto.region = e.detail.value[2].value

                    } else {

                        //说明有重复的

                        var plusnum = e.detail.value.length - 3

                        if (!!e.detail.value[plusnum + 0])

                            this.dto.province = e.detail.value[plusnum + 0].value

                        if (!!e.detail.value[plusnum + 1])

                            this.dto.city = e.detail.value[plusnum + 1].value

                        if (!!e.detail.value[plusnum + 2])

                            this.dto.region = e.detail.value[plusnum + 2].value

                    }



                    this.$forceUpdate()



                }

            },

            PickData(valueKey, nameKey, e) {

                // console.log('PickArea', item, e)

                if (e.detail.value) {

                    if (!!e.detail.value[0])

                        this.dto[valueKey] = e.detail.value[0].value || e.detail.value[0].id

                    if (nameKey) {

                        this.dto[nameKey] = e.detail.value[0].label || e.detail.value[0].name || e.detail.value[0].value

                    }

                    this.$forceUpdate()



                }

            },

            async init_area() {

                const res = await this.$http.request('get', '/api/pub/china/area/json')

                // console.log('area', JSON.parse(res.data))

                this.regionDataPlus = res.data && JSON.parse(res.data.replaceAll('code', 'value').replaceAll('name',

                    'text')) || []



                // console.log('area', this.regionDataPlus)





            },



            select_type(e) {

                this.show_select_type = false

                this.dto.typeName = e.value[0].name

                this.dto.typeId = e.value[0].id

            },

            select_station(e) {

                this.show_select_station = false

                this.dto.stationName = e.value[0].name

                this.dto.stationId = e.value[0].id

            },

            async getCurrentInfo() {

                this.$message.showLoading()

                const {

                    code,

                    data

                } = await this.$http.request('get', "/api/current/supplier", {})

                if (code == 0) {

                    this.dto = {

                        ...data,



                    }

                    if (!this.dto.pictures) {

                        this.dto.pictures = []

                    } else if (typeof this.dto.pictures == 'string') {

                        this.dto.pictures = JSON.parse(this.dto.pictures)

                    }

                    if (!this.dto.idCards) {

                        this.dto.idCards = []

                    } else if (typeof this.dto.idCards == 'string') {

                        this.dto.idCards = JSON.parse(this.dto.idCards)

                    }



                    if (this.dto.idcardType == '1') {

                        this.dto.idcardType = '身份证'

                    } else {

                        this.dto.idcardType = '营业执照'

                    }

                    this.dto.userId = this.currentInfo.id



                }



                this.$message.hideLoading()

            },

            async getDetail() {

                this.$message.showLoading()

                const {

                    code,

                    data

                } = await this.$http.request('get', "/api/supplier/addOrUpdate/detail/" + this.id, {})

                if (code == 0) {

                    this.dto = {

                        ...data,



                    }

                    if (!this.dto.pictures) {

                        this.dto.pictures = []

                    } else if (typeof this.dto.pictures == 'string') {

                        this.dto.pictures = JSON.parse(this.dto.pictures)

                    }

                    if (!this.dto.idCards) {

                        this.dto.idCards = []

                    } else if (typeof this.dto.idCards == 'string') {

                        this.dto.idCards = JSON.parse(this.dto.idCards)

                    }

                    if (this.dto.idcardType == '1') {

                        this.dto.idcardType = '身份证'

                    } else {

                        this.dto.idcardType = '营业执照'

                    }

                }



                this.$message.hideLoading()



            },

            async submit() {

                for (var field of this.requireFields) {

                    if (!this.dto[field.key]) {

                        this.$message.showToast(`${field.name}信息未填写`)

                        return

                    }

                }

                if (this.dto.idcardType == '身份证' && this.dto.idCards.length == 0) {

                    this.$message.showToast(`${this.dto.idcardType}信息未填写`)

                    return

                }

                if (this.dto.idcardType !== '身份证' && this.dto.pictures.length == 0) {

                    this.$message.showToast(`${this.dto.idcardType}信息未填写`)

                    return

                }

                await this.$message.confirm(`是否确定提交/修改店铺信息`)





                var dto = {

                    ...this.dto,

                    idcardType: this.dto.idcardType === '身份证' ? "1" : '2'

                }

                this.$message.showLoading()

                const re = await this.$http.request('post', '/api/supplier/addOrUpdate', {

                    data: dto

                })

                this.$message.hideLoading()

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

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

                    //需要标记加一下

                    this.$store.dispatch('sign_add', 'info');

                    this.$store.dispatch('getCurrentInfo')



                    this.backpage()

                } else {

                    console.log('error re', re)

                    if (re.code === 30000 && Array.isArray(re.msg)) {

                        this.$message.showToast('字段未填写完整')



                    }

                }

            },



            async deleteImg(key, index) {

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

                if (Array.isArray(this.dto[key])) {

                    this.dto[key].splice(index, 1)



                } else {

                    this.dto[key] = ''

                }

                this.$forceUpdate()

            },

            uploadIcon(key) {

                const that = this

                uni.chooseImage({

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

                    sizeType: ['original', '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 => {
                                var pic = res.data && res.data.length > 0 && res.data[
                                    0] || {}
                                that.$message.hideLoading()
                                if (Array.isArray(that.dto[key])) {
                                    that.dto[key].push(pic || '')

                                } else {
                                    that.dto[key] = (pic || {}).url || ''

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

                            })
                        }
                    }
                })
            },

        },
        computed: {
            ...mapState(['currentInfo'])
        },
        components: {}
    }
</script>

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

    .form-item {
        // padding: 40rpx;
        border-bottom: 2rpx solid #F3F3F3;
        display: flex;
        // 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);
    }
                            if (tempFiles[0].size > 1024 * 1024 * 5) {
                                that.$message.confirm('图片最多支持5M大小,超出大小限制')
                                return
                            }

                            that.$message.showLoading()

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

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

                                    0] || {}

                                that.$message.hideLoading()

                                if (Array.isArray(that.dto[key])) {

                                    that.dto[key].push(pic || '')



                                } else {

                                    that.dto[key] = (pic || {}).url || ''



                                }

                                that.$forceUpdate()

                            }).catch(res => {

                                that.$message.hideLoading()



                            })

                        }

                    }

                })

            },



        },

        computed: {

            ...mapState(['currentInfo'])

        },

        components: {}

    }

</script>



<style lang="scss" scoped>

    .banner-img {

        width: 96rpx;

        height: 96rpx;

        border-radius: 4rpx;

        border: 2rpx dashed #CECECE;

    }



    .form-item {

        // padding: 40rpx;

        border-bottom: 2rpx solid #F3F3F3;

        display: flex;

        // 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>

 uni_modules/uni-data-picker/components/uni-data-picker/uni-data-picker.vue

@@ -49,6 +49,7 @@
            <data-picker-view class="picker-view" ref="pickerView" v-model="dataValue" :localdata="localdata"
                :preload="preload" :collection="collection" :field="field" :orderby="orderby" :where="where"
                :key="showpicker"
                :area="area"
                :step-searh="stepSearh" :self-field="selfField" :parent-field="parentField" :managed-mode="true"
                :map="map" :ellipsis="ellipsis" @change="onchange" @datachange="ondatachange" @nodeclick="onnodeclick">
            </data-picker-view>
@@ -132,6 +133,10 @@
            ellipsis: {
                type: Boolean,
                default: true
            },
            area:{
                type: Boolean,
                default: false
            }
        },
        data() {

 uni_modules/uni-data-picker/components/uni-data-pickerview/uni-data-picker.js

@@ -92,6 +92,10 @@
      type: Boolean,
      default: false
    },
    area:{
        type: Boolean,
        default: false
    },
    map: {
      type: Object,
      default () {

 uni_modules/uni-data-picker/components/uni-data-pickerview/uni-data-pickerview.vue

@@ -1,324 +1,353 @@
<template>
  <view class="uni-data-pickerview">
    <scroll-view v-if="!isCloudDataList" class="selected-area" scroll-x="true">
      <view class="selected-list">
          <view 
            class="selected-item"
            v-for="(item,index) in selected"
            :key="index"
            :class="{
              'selected-item-active':index == selectedIndex
            }"
            @click="handleSelect(index)"
          >
            <text>{{item.text || ''}}</text>
          </view>
      </view>
    </scroll-view>
    <view class="tab-c">
      <scroll-view class="list" :scroll-y="true">
        <view class="item" :class="{'is-disabled': !!item.disable}" v-for="(item, j) in dataList[selectedIndex]" :key="j"
          @click="handleNodeClick(item, selectedIndex, j)">
          <text class="item-text">{{item[map.text]}}</text>
          <view class="check" v-if="selected.length > selectedIndex && item[map.value] == selected[selectedIndex].value"></view>
        </view>
      </scroll-view>

      <view class="loading-cover" v-if="loading">
        <uni-load-more class="load-more" :contentText="loadMore" status="loading"></uni-load-more>
      </view>
      <view class="error-message" v-if="errorMessage">
        <text class="error-text">{{errorMessage}}</text>
      </view>
    </view>
  </view>
</template>

<script>
  import dataPicker from "./uni-data-picker.js"

  /**
   * DataPickerview
   * @description uni-data-pickerview
   * @tutorial https://ext.dcloud.net.cn/plugin?id=3796
   * @property {Array} localdata 本地数据，参考
   * @property {Boolean} step-searh = [true|false] 是否分布查询
   * @value true 启用分布查询，仅查询当前选中节点
   * @value false 关闭分布查询，一次查询出所有数据
   * @property {String|DBFieldString} self-field 分布查询当前字段名称
   * @property {String|DBFieldString} parent-field 分布查询父字段名称
   * @property {String|DBCollectionString} collection 表名
   * @property {String|DBFieldString} field 查询字段，多个字段用 `,` 分割
   * @property {String} orderby 排序字段及正序倒叙设置
   * @property {String|JQLString} where 查询条件
   */
  export default {
    name: 'UniDataPickerView',
    emits: ['nodeclick', 'change', 'datachange', 'update:modelValue'],
    mixins: [dataPicker],
    props: {
      managedMode: {
        type: Boolean,
        default: false
      },
      ellipsis: {
        type: Boolean,
        default: true
      }
    },
    created() {
        console.log('created picker')
      if (!this.managedMode) {
        this.$nextTick(() => {
          this.loadData();
        })
      }
    },
    methods: {
      onPropsChange() {
        this._treeData = [];
        this.selectedIndex = 0;
        this.$nextTick(() => {
          this.loadData();
        })
      },
      handleSelect(index) {
        this.selectedIndex = index;
      },
      handleNodeClick(item, i, j) {
        if (item.disable) {
          return;
        }

        const node = this.dataList[i][j];
        const text = node[this.map.text];
        const value = node[this.map.value];

        if (i < this.selected.length - 1) {
          this.selected.splice(i, this.selected.length - i)
          this.selected.push({
            text,
            value
          })
        } else if (i === this.selected.length - 1) {
          this.selected.splice(i, 1, {
            text,
            value
          })
        }

        if (node.isleaf) {
          this.onSelectedChange(node, node.isleaf)
          return
        }

        const {
          isleaf,
          hasNodes
        } = this._updateBindData()

        // 本地数据
        if (this.isLocalData) {
          this.onSelectedChange(node, (!hasNodes || isleaf))
        } else if (this.isCloudDataList) { // Cloud 数据 (单列)
          this.onSelectedChange(node, true)
        } else if (this.isCloudDataTree) { // Cloud 数据 (树形)
          if (isleaf) {
            this.onSelectedChange(node, node.isleaf)
          } else if (!hasNodes) { // 请求一次服务器以确定是否为叶子节点
            this.loadCloudDataNode((data) => {
              if (!data.length) {
                node.isleaf = true
              } else {
                this._treeData.push(...data)
                this._updateBindData(node)
              }
              this.onSelectedChange(node, node.isleaf)
            })
          }
        }
      },
      updateData(data) {
        this._treeData = data.treeData
        this.selected = data.selected
        if (!this._treeData.length) {
          this.loadData()
        } else {
          //this.selected = data.selected
          this._updateBindData()
        }
      },
      onDataChange() {
        this.$emit('datachange');
      },
      onSelectedChange(node, isleaf) {
        if (isleaf) {
          this._dispatchEvent()
        }

        if (node) {
          this.$emit('nodeclick', node)
        }
      },
      _dispatchEvent() {
        this.$emit('change', this.selected.slice(0))
      }
    }
  }
</script>

<style lang="scss">
    $uni-primary: #007aff !default;

    .uni-data-pickerview {
        flex: 1;
        /* #ifndef APP-NVUE */
        display: flex;
        /* #endif */
        flex-direction: column;
        overflow: hidden;
        height: 100%;
    }

  .error-text {
    color: #DD524D;
  }

  .loading-cover {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, .5);
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    align-items: center;
    z-index: 1001;
  }

  .load-more {
    /* #ifndef APP-NVUE */
    margin: auto;
    /* #endif */
  }

  .error-message {
    background-color: #fff;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    padding: 15px;
    opacity: .9;
    z-index: 102;
  }

  /* #ifdef APP-NVUE */
  .selected-area {
    width: 750rpx;
  }
  /* #endif */

  .selected-list {
    /* #ifndef APP-NVUE */
    display: flex;
    flex-wrap: nowrap;
    /* #endif */
    flex-direction: row;
    padding: 0 5px;
    border-bottom: 1px solid #f8f8f8;
  }

  .selected-item {
    margin-left: 10px;
    margin-right: 10px;
    padding: 12px 0;
    text-align: center;
    /* #ifndef APP-NVUE */
    white-space: nowrap;
    /* #endif */
  }

  .selected-item-text-overflow {
    width: 168px;
    /* fix nvue */
    overflow: hidden;
    /* #ifndef APP-NVUE */
    width: 6em;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    /* #endif */
  }

    .selected-item-active {
        border-bottom: 2px solid $uni-primary;
    }

    .selected-item-text {
        color: $uni-primary;
    }

  .tab-c {
    position: relative;
    flex: 1;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    overflow: hidden;
  }

  .list {
    flex: 1;
  }

  .item {
    padding: 12px 15px;
    /* border-bottom: 1px solid #f0f0f0; */
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
    justify-content: space-between;
  }

  .is-disabled {
    opacity: .5;
  }

  .item-text {
    /* flex: 1; */
    color: #333333;
  }

  .item-text-overflow {
    width: 280px;
    /* fix nvue */
    overflow: hidden;
    /* #ifndef APP-NVUE */
    width: 20em;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    /* #endif */
  }

    .check {
        margin-right: 5px;
        border: 2px solid $uni-primary;
        border-left: 0;
        border-top: 0;
        height: 12px;
        width: 6px;
        transform-origin: center;
        /* #ifndef APP-NVUE */
        transition: all 0.3s;
        /* #endif */
        transform: rotate(45deg);
    }
</style>
<template>

    <view class="uni-data-pickerview">

        <scroll-view v-if="!isCloudDataList" class="selected-area" scroll-x="true">

            <view class="selected-list">

                <view class="selected-item" v-for="(item,index) in selected" :key="index" :class="{

              'selected-item-active':index == selectedIndex

            }" @click="handleSelect(index)">

                    <text>{{item.text || ''}}</text>

                </view>

            </view>

        </scroll-view>

        <view class="tab-c">

            <!--     <view>

                selected:{{JSON.stringify(selected)}}

            </view> -->

            <!-- v-if="!area||!selected|| selected.length==0||area&&selected&&selected.length>0&&(item[map.text]!==selected[selected.length-1].text)" -->

            <scroll-view class="list" :scroll-y="true">

                <view v-for="(item, j) in dynamicList" :key="j">

                    <view class="item" :class="{'is-disabled': !!item.disable}" v-show="!item.hide"

                        @click="handleNodeClick(item, selectedIndex, j)">

                        <text class="item-text">{{item[map.text]}}</text>

                        <view class="check"

                            v-if="selected.length > selectedIndex && item[map.value] == selected[selectedIndex].value">

                        </view>

                    </view>

                </view>



            </scroll-view>



            <view class="loading-cover" v-if="loading">

                <uni-load-more class="load-more" :contentText="loadMore" status="loading"></uni-load-more>

            </view>

            <view class="error-message" v-if="errorMessage">

                <text class="error-text">{{errorMessage}}</text>

            </view>

        </view>

    </view>

</template>



<script>

    import dataPicker from "./uni-data-picker.js"



    /**

     * DataPickerview

     * @description uni-data-pickerview

     * @tutorial https://ext.dcloud.net.cn/plugin?id=3796

     * @property {Array} localdata 本地数据，参考

     * @property {Boolean} step-searh = [true|false] 是否分布查询

     * @value true 启用分布查询，仅查询当前选中节点

     * @value false 关闭分布查询，一次查询出所有数据

     * @property {String|DBFieldString} self-field 分布查询当前字段名称

     * @property {String|DBFieldString} parent-field 分布查询父字段名称

     * @property {String|DBCollectionString} collection 表名

     * @property {String|DBFieldString} field 查询字段，多个字段用 `,` 分割

     * @property {String} orderby 排序字段及正序倒叙设置

     * @property {String|JQLString} where 查询条件

     */

    export default {

        name: 'UniDataPickerView',

        emits: ['nodeclick', 'change', 'datachange', 'update:modelValue'],

        mixins: [dataPicker],

        props: {

            managedMode: {

                type: Boolean,

                default: false

            },

            ellipsis: {

                type: Boolean,

                default: true

            }

        },

        computed: {

            dynamicList() {

                var lastnodes = []

                if (this.selected && this.selected.length > 0) {

                    for (var name of this.selected) {

                        lastnodes.push(name.text)

                    }

                    // lastnode = this.selected[this.selectedIndex].text

                }

                var arr = []

                console.log('lastnodes', lastnodes)

                if (this.dataList && this.dataList[this.selectedIndex]) {

                    for (var item of this.dataList[this.selectedIndex]) {

                        if (lastnodes.indexOf(item[this.map.text]) >= 0) {
                            item.hide = true

                            arr.push(item)

                        } else {
                            item.hide = false

                            arr.push(item)

                        }

                    }

                }

                return arr

            }

        },

        created() {

            console.log('created picker')

            if (!this.managedMode) {

                this.$nextTick(() => {

                    this.loadData();

                })

            }

        },

        methods: {

            onPropsChange() {

                this._treeData = [];

                this.selectedIndex = 0;

                this.$nextTick(() => {

                    this.loadData();

                })

            },

            handleSelect(index) {

                this.selectedIndex = index;

            },

            handleNodeClick(item, i, j) {

                if (item.disable) {

                    return;

                }



                const node = this.dataList[i][j];

                const text = node[this.map.text];

                const value = node[this.map.value];



                if (i < this.selected.length - 1) {

                    this.selected.splice(i, this.selected.length - i)

                    this.selected.push({

                        text,

                        value

                    })

                } else if (i === this.selected.length - 1) {

                    this.selected.splice(i, 1, {

                        text,

                        value

                    })

                }



                if (node.isleaf) {

                    this.onSelectedChange(node, node.isleaf)

                    return

                }



                const {

                    isleaf,

                    hasNodes

                } = this._updateBindData()



                // 本地数据

                if (this.isLocalData) {

                    this.onSelectedChange(node, (!hasNodes || isleaf))

                } else if (this.isCloudDataList) { // Cloud 数据 (单列)

                    this.onSelectedChange(node, true)

                } else if (this.isCloudDataTree) { // Cloud 数据 (树形)

                    if (isleaf) {

                        this.onSelectedChange(node, node.isleaf)

                    } else if (!hasNodes) { // 请求一次服务器以确定是否为叶子节点

                        this.loadCloudDataNode((data) => {

                            if (!data.length) {

                                node.isleaf = true

                            } else {

                                this._treeData.push(...data)

                                this._updateBindData(node)

                            }

                            this.onSelectedChange(node, node.isleaf)

                        })

                    }

                }

            },

            updateData(data) {

                this._treeData = data.treeData

                this.selected = data.selected

                if (!this._treeData.length) {

                    this.loadData()

                } else {

                    //this.selected = data.selected

                    this._updateBindData()

                }

            },

            onDataChange() {

                this.$emit('datachange');

            },

            onSelectedChange(node, isleaf) {

                if (isleaf) {

                    this._dispatchEvent()

                }



                if (node) {

                    this.$emit('nodeclick', node)

                }

            },

            _dispatchEvent() {

                this.$emit('change', this.selected.slice(0))

            }

        }

    }

</script>



<style lang="scss">

    $uni-primary: #007aff !default;



    .uni-data-pickerview {

        flex: 1;

        /* #ifndef APP-NVUE */

        display: flex;

        /* #endif */

        flex-direction: column;

        overflow: hidden;

        height: 100%;

    }



    .error-text {

        color: #DD524D;

    }



    .loading-cover {

        position: absolute;

        left: 0;

        top: 0;

        right: 0;

        bottom: 0;

        background-color: rgba(255, 255, 255, .5);

        /* #ifndef APP-NVUE */

        display: flex;

        /* #endif */

        flex-direction: column;

        align-items: center;

        z-index: 1001;

    }



    .load-more {

        /* #ifndef APP-NVUE */

        margin: auto;

        /* #endif */

    }



    .error-message {

        background-color: #fff;

        position: absolute;

        left: 0;

        top: 0;

        right: 0;

        bottom: 0;

        padding: 15px;

        opacity: .9;

        z-index: 102;

    }



    /* #ifdef APP-NVUE */

    .selected-area {

        width: 750rpx;

    }



    /* #endif */



    .selected-list {

        /* #ifndef APP-NVUE */

        display: flex;

        flex-wrap: nowrap;

        /* #endif */

        flex-direction: row;

        padding: 0 5px;

        border-bottom: 1px solid #f8f8f8;

    }



    .selected-item {

        margin-left: 10px;

        margin-right: 10px;

        padding: 12px 0;

        text-align: center;

        /* #ifndef APP-NVUE */

        white-space: nowrap;

        /* #endif */

    }



    .selected-item-text-overflow {

        width: 168px;

        /* fix nvue */

        overflow: hidden;

        /* #ifndef APP-NVUE */

        width: 6em;

        white-space: nowrap;

        text-overflow: ellipsis;

        -o-text-overflow: ellipsis;

        /* #endif */

    }



    .selected-item-active {

        border-bottom: 2px solid $uni-primary;

    }



    .selected-item-text {

        color: $uni-primary;

    }



    .tab-c {

        position: relative;

        flex: 1;

        /* #ifndef APP-NVUE */

        display: flex;

        /* #endif */

        flex-direction: row;

        overflow: hidden;

    }



    .list {

        flex: 1;

    }



    .item {

        padding: 12px 15px;

        /* border-bottom: 1px solid #f0f0f0; */

        /* #ifndef APP-NVUE */

        display: flex;

        /* #endif */

        flex-direction: row;

        justify-content: space-between;

    }



    .is-disabled {

        opacity: .5;

    }



    .item-text {

        /* flex: 1; */

        color: #333333;

    }



    .item-text-overflow {

        width: 280px;

        /* fix nvue */

        overflow: hidden;

        /* #ifndef APP-NVUE */

        width: 20em;

        white-space: nowrap;

        text-overflow: ellipsis;

        -o-text-overflow: ellipsis;

        /* #endif */

    }



    .check {

        margin-right: 5px;

        border: 2px solid $uni-primary;

        border-left: 0;

        border-top: 0;

        height: 12px;

        width: 6px;

        transform-origin: center;

        /* #ifndef APP-NVUE */

        transition: all 0.3s;

        /* #endif */

        transform: rotate(45deg);

    }

</style>