LocalLivingServicesUniapp/pages/login/settled.vue

<template>
    <view>
        <cu-custom :bgColor="title == '申请入驻' ? 'bg-gradual-blue1' : 'bg-fff'" :isBack="true">
            <block slot="content">{{ title }}</block>
        </cu-custom>
        <view class="progress" v-if="title == '申请入驻'">
            <view class="progress-style progress-bag">
                <view v-if="tab == 1" class="progress-icon"></view>
                <view v-if="tab == 2" class="progress-style progress-bag1">
                    <view class="progress-icon1"></view>
                </view>
                <view v-if="tab == 3" class="progress-style progress-bag2">
                    <view class="progress-icon1"></view>
                </view>
            </view>
            <view class="progress-title flex justify-between">
                <view :class="tab == '1' ? 'color' : ''">账户信息</view>
                <view :class="tab == '2' ? 'color' : ''">提交资料</view>
                <view :class="tab == '3' ? 'color' : ''">门店信息</view>
            </view>
        </view>
        <status v-else :status="form.status" :updateTime="form.updateTime" :remark="form.remark"></status>
        <view v-if="tab == 1" class="tab-top">
            <form>
                <!-- <view class="borderRadiu">
                    <view class="flex cu-form-group margin-top1 ">
                        <view class="content ">
                            <text class="text-bold" >选择所属供应商</text>
                            <i class="text-bg " ></i>
                        </view>
                    </view>
                    <view class="cu-form-group ">
                    <view class="title">供应商</view>
                    <picker @change="PickerChange" :value="form.purveyorId" range-key="purveyorName"
                        :range="supplierOption">
                        <view class="picker" v-if="form.purveyorId">
                            {{ supplierOption.find(e => e.id == form.purveyorId).purveyorName  }}
                        </view>
                        <view class="picker" v-else style="color: #999999;">
                           请选择
                        </view>
                    </picker>
                </view>
                </view> -->

                <view class="borderRadiu">
                    <view class="flex cu-form-group margin-top1 ">
                        <view class="content ">
                            <text class="text-bold">账户信息</text>
                            <i class="text-bg "></i>
                        </view>
                    </view>
                    <view class=" cu-form-group ">
                        <view class="title">姓名</view>
                        <input placeholder="请输入联系人姓名" v-model="form.name" name="input"></input>
                    </view>
                </view>
            </form>
        </view>
        <view v-if="tab == 2" class="tab-top" :style="title == '店铺信息' ? 'margin-top: 120upx' : ''">
            <form>
                <view class="borderRadiu">
                    <view class="flex cu-form-group margin-top1">
                        <view class="content ">
                            <text class="text-bold">提交经营主体资料</text>
                            <i class="text-bg "></i>
                        </view>
                    </view>
                    <view class=" cu-form-group">
                        <view class="title">主体类型</view>
                        <!-- <uni-data-checkbox  v-model="form.type" :localdata="hobby"></uni-data-checkbox> -->
                        <radio-group @change="typeChang($event, 'type')" v-model="form.type">
                            <label class="margin-left-sm">
                                <radio :class="form.type == '1' ? 'checked blue' : ''"
                                    :checked="form.type == '1' ? true : false" value="1"></radio>
                                <!-- <checkbox class=' blue' :class="form.type?'checked':''" :checked="form.type?true:false" value="1"></checkbox> -->
                                <text class="margin-left-sm">普通企业</text>
                            </label>
                            <label class="margin-left-sm">
                                <radio :class="form.type == '2' ? 'checked blue' : ''"
                                    :checked="form.type == '2' ? true : false" value="2"></radio>
                                <text class="margin-left-sm">个体工商户</text>
                            </label>
                        </radio-group>
                    </view>
                    <view class="cu-form-group">
                        <view class="title">公司名称</view>
                        <input placeholder="请输入公司名称" v-model="form.corporateName" name="input"></input>
                    </view>
                    <view class="cu-form-group">
                        <view class="title">统一代码</view>
                        <input placeholder="请输入统一社会信用代码" v-model="form.creditCode" name="input"></input>
                    </view>
                    <view class="cu-form-group">
                        <view class="title">有效期 </view>
                        <!-- <uni-data-checkbox  v-model="form.lifespan" :localdata="lifespanOption"></uni-data-checkbox> -->
                        <radio-group @change="typeChang($event, 'lifespanType')" v-model="form.lifespanType">
                            <label class="margin-left-sm">
                                <radio :class="form.lifespanType == '1' ? 'checked blue' : ''"
                                    :checked="form.lifespanType == '1' ? true : false" value="1"></radio>
                                <!-- <checkbox class=' blue' :class="form.type?'checked':''" :checked="form.type?true:false" value="1"></checkbox> -->
                                <text class="margin-left-sm">长期有效</text>
                            </label>
                            <label class="margin-left-sm">
                                <radio :class="form.lifespanType == '2' ? 'checked blue' : ''"
                                    :checked="form.lifespanType == '2' ? true : false" value="2"></radio>
                                <text class="margin-left-sm">固定期限</text>
                            </label>
                        </radio-group>
                        <!-- <radio-group @change="typeChang($event, 'lifespan')" v-model="form.lifespan">
                        <label class="margin-left-sm">
                            <radio class="blue radio" value="1" checked></radio>
                            <text class="margin-left-sm">长期有效</text>
                        </label>
                        <label class="margin-left-sm">
                            <radio class="blue radio" value="2"></radio>
                            <text class="margin-left-sm">固定期限</text>
                        </label>
                    </radio-group> -->
                    </view>
                    <view class="cu-form-group" v-if="form.lifespanType == 2">
                        <view class="title">有效期起</view>
                        <picker mode="date" :value="form.lifespanBegin" @change="typeChang($event, 'lifespanBegin')">
                            <view class="picker" v-if="form.lifespanBegin">
                                {{ form.lifespanBegin }}
                            </view>
                            <view class="picker" v-else style="color: #999999;">
                                请选择
                            </view>
                        </picker>
                    </view>
                    <view class="cu-form-group" v-if="form.lifespanType == 2">
                        <view class="title">有效期止</view>
                        <picker mode="date" :value="form.lifespanEnd" @change="typeChang($event, 'lifespanEnd')">
                            <view class="picker" v-if="form.lifespanEnd">
                                {{ form.lifespanEnd }}
                            </view>
                            <view class="picker" v-else style="color: #999999;">
                                请选择
                            </view>
                        </picker>
                    </view>
                    <view class="customize">
                        <view class="title">营业执照</view>
                        <view style="border-bottom: 1px solid #EEEEEE;">
                            <view class="business-img flex align-center">
                                <image
                                    :src="businessLicenseImg ? businessLicenseImg : '/static/login/yingyezhizhao.png'"
                                    mode="" @click="businessChange('businessLicense')">
                                </image>
                            </view>
                        </view>
                        <view class="business-prompt">
                            请上传营业执照照片或复印件，复印件需加盖公司公章，仅支持jpg、png格式;图片需清晰、完整、无反光、无PS、无不相关水印、非拍屏
                        </view>
                    </view>
                </view>
                <view class="borderRadiu" style="margin-bottom: 114upx;">
                    <view class="flex cu-form-group margin-top1 ">
                        <view class="content ">
                            <text class="text-bold">法人信息</text>
                            <i class="text-bg "></i>
                        </view>
                    </view>
                    <view class="cu-form-group  ">
                        <view class="title">法人姓名</view>
                        <input placeholder="请输入法人姓名" v-model="form.legalPerson" name="input"></input>
                    </view>
                    <view class="cu-form-group">
                        <view class="title">法人证件号</view>
                        <input placeholder="请输入法人证件号" v-model="form.legalPersonCode" name="input"></input>
                    </view>
                    <view class="customize">
                        <view class="title">法人证件照片</view>
                        <view style="padding: 16upx 0;border-bottom: 1px solid #EEEEEE;">
                            <view class="flex upload justify-between">
                                <view class="imgOcr-border">
                                    <image :src="identityOneImg ? identityOneImg : '/static/login/code1.png'" mode=""
                                        @click="businessChange('identityOne')"></image>
                                </view>
                                <view class="imgOcr-border">
                                    <image :src="identityTwoImg ? identityTwoImg : '/static/login/code2.png'" mode=""
                                        @click="businessChange('identityTwo')"></image>
                                </view>
                            </view>
                        </view>
                        <view class="business-prompt">
                            <view>请上传中国大陆公民.身份证照片，仅支持jpg、png格式</view>
                            <view>1、需提供与主体证照上一致的法人证件照片</view>
                            <view>2、图片需清晰、完整、无反光、无PS、无不相关水印、非拍屏</view>
                            <view>3、证件未过期</view>
                        </view>
                    </view>
                </view>
            </form>
        </view>
        <view v-if="tab == 3" class="tab-top" :style="title == '店铺信息' ? 'margin-top: 120upx' : ''">
            <form>
                <view class="borderRadiu" style="margin-bottom: 114upx;">
                    <view class="flex cu-form-group margin-top1">
                        <view class="content ">
                            <text class="text-bold">提交门店信息</text>
                            <i class="text-bg "></i>
                        </view>
                    </view>
                    <view class="cu-form-group">
                        <view class="title">门店名称</view>
                        <input placeholder="请输入门店名称" v-model="form.storeName" name="input"></input>
                    </view>
                    <view class="cu-form-group">
                        <view class="title">所在地区</view>
                        <view style="display: flex;width: 74%;justify-content: space-between;"
                            @click="$refs.picker.show()">
                            <!-- <u-input readonly placeholder="去设置" v-model="form.locality" @click="$refs.picker.show()"    /> -->
                            <view style="font-size: 30rpx;">
                                <text v-if="form.locality"> {{ form.locality }}</text>
                                <text v-else style="color: grey">请选择所在地区</text>
                            </view>
                            <u-icon name="arrow-right" style="margin-left: 17rpx;color: #C7C6CA"></u-icon>
                        </view>
                        <!-- <input disabled="true" @mousedown="$refs.picker.show()" placeholder="请选择所在地区" ref="inputRef"
                            name="input" v-model="form.locality"></input>
                        <text class='cuIcon-right' style="color: #C7C6CA ;" @click="$refs.picker.show();mapIsHidden='none'"></text> -->

                    </view>
                    <view class="cu-form-group">
                        <view class="title">门店地址</view>
                        <input placeholder="请输入门店地址详细地址" v-model="form.address" name="input"></input>
                    </view>
                    <view class="customize">
                        <view class="title">地理位置</view>
                        <view class=" booder-top" style="padding-bottom: 16upx" :style="{ 'display': mapIsHidden }">
                            <map style="width: 100%; height: 218upx;" :latitude="latitude" scale="14" zIndex="100"
                                :longitude="longitude" :markers="markers" @tap="handleMarkerTap"></map>
                        </view>

                        <!-- <aMap class=" booder-top" style="padding-bottom: 7px;"></aMap> -->
                        <view class="business-prompt">
                            若位置有误直接影响客户到店，请在地图中仔细核对，可拖拽地图确保位置正确
                        </view>
                    </view>
                    <view class="customize">
                        <view class="title">门头照片</view>
                        <view class="grid col-3 grid-square flex-sub booder-top">
                            <view class="bg-img" v-for="(item, index) in headPhotoImg" :key="index" @tap="ViewImage"
                                :data-url="headPhotoImg[index]">
                                <image :src="headPhotoImg[index]" mode="aspectFill"></image>
                                <view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
                                    <text class='cuIcon-close'></text>
                                </view>
                            </view>
                            <view class="solids" @tap="ChooseImage" v-if="headPhotoImg.length <= 4">
                                <text class='cuIcon-cameraadd'></text>
                            </view>
                        </view>
                        <view class="business-prompt">
                            门店照片需包含完整的门店入口和招牌名称，建议现场拍摄门头照;最多可上传5张，支持格式bmp、png、jpeg、jpg，单个图片不超过5MB，建议尺寸在2000*1500px以上
                        </view>
                    </view>
                </view>
            </form>
        </view>
        <view v-if="tab == 1" class="padding flex flex-direction sub-bottom">
            <button class="cu-btn bg-blue round " @click="tab = 2">保存并下一步</button>
        </view>
        <view v-if="tab == 2 && title == '申请入驻'" class="padding flex sub-bottom">
            <button class="cu-btn round line-blue  shadow" @click="tab = 1">上一步</button>
            <button style="margin-left: 12upx;width:77%" class="cu-btn bg-blue round " @click="tab = 3">保存并下一步</button>
        </view>
        <view v-if="tab == 2 && title == '店铺信息'" class="padding flex sub-bottom">
            <button class="cu-btn round line-gray  shadow" @click="$Router.push({ name: 'settings' })">取消</button>
            <button style="margin-left: 12upx;width:77%" class="cu-btn line-blue  round shadow"
                @click="tab = 3">下一页</button>
        </view>
        <view v-if="tab == 3" class="padding flex sub-bottom">
            <button class="cu-btn round line-blue  shadow" @click="tab = 2">{{ title == '申请入驻' ? '上一步' : '上一页'
                }}</button>
            <button style="margin-left: 12upx;width:77%" class="cu-btn bg-blue round " @click="sumbit">提交审核</button>
        </view>
        <view class="cu-load load-modal" v-if="lodingshow">
            <image src="/static/logo.png" mode="aspectFit"></image>
            <view class="gray-text">加载中...</view>
        </view>
        <w-picker class="picker-style" :visible.sync="visible" ref="picker" mode="region" :value="form.locality"
            @confirm="onConfirm($event, 'region')"></w-picker>
    </view>

</template>
<script>
import { watch } from 'vue'
import configService from '../../common/service/config.service'
import regionPicker from "../../components/w-picker/region-picker.vue"
// import aMap from "./map.vue"
import status from "../store/components/status.vue"

export default {
    components: {
        regionPicker, status
        // aMap
    },
    data() {
        return {
            imageList: [],
            mapIsHidden: false,
            latitude: 37.827066,
            longitude: 112.34988,
            title: '申请入驻',
            lodingshow: false,
            form: {
                name: null,
                type: 1,
                corporateName: null,
                creditCode: null,
                lifespanType: 1,
                lifespanBegin: this.timestampToTime(),
                lifespanEnd: '9999-12-31',
                businessLicense: null,
                legalPerson: null,
                legalPersonCode: null,
                storeName: null,
                country: null,
                locality: '',
                address: null,
                headPhoto: '',
                passWord: uni.getStorageSync('password'),
                phone: uni.getStorageSync('phone'),
            },
            formName: {
                headPhoto: '门头照片',
                name: '姓名',
                corporateName: '公司名称',
                creditCode: '统一代码',
                legalPerson: '法人姓名',
                legalPersonCode: '法人证件号',
                storeName: '门店名称',
                locality: '所在地区',
                address: '门店地址',
            },
            tab: 1,
            supplierOption: [],
            businessLicenseImg: '',
            identityOneImg: '',
            identityTwoImg: '',
            visible: false,
            index: -1,
            // markers:[{
            // 	latitude: 37.827066,
            // 	longitude: 112.34988,
            // 	iconPath: '../../static/avatar_girl.png'
            // }]
            markers: [],
            headPhotoImg: [],
        }
    },
    watch: {
        visible(val) {
            if (!val) {
                this.mapIsHidden = 'block'
            }
        }
    },
    onShow() {
        this.markers = uni.getStorageSync('address') ?
            [Object.assign(uni.getStorageSync('address'), { iconPath: '../../static/boiaoji.png' })]
            : []

    },
    async onLoad(data) {
        if (data.params) {
            let obj = JSON.parse(decodeURIComponent(data.params));
            this.title = '店铺信息'
            this.tab = 2
            obj.lifespanType = obj.lifespanType ? obj.lifespanType : '1'
            this.markers = this.form.longitude && this.form.latitude ?
                [{ longitude: this.form.longitude, latitude: this.form.latitude, iconPath: '../../static/boiaoji.png' }]
                : []
            this.businessLicenseImg = configService.apiUrl + '/' + obj.businessLicense
            this.identityOneImg = configService.apiUrl + '/' + obj.identityOne
            this.headPhotoImg = obj.headPhoto ? obj.headPhoto.split(',').filter(id => id !== '') : []
            obj.headPhoto = obj.headPhoto ? obj.headPhoto.split(',').filter(id => id !== '') : []
            this.identityTwoImg = configService.apiUrl + '/' + obj.identityTwo
            obj.locality=obj.locality?obj.locality:''
            this.form = obj
        }
        // let res = await this.$http.get("/merchant/app/allList")
        // if (res.data.success) {
        //     this.supplierOption = res.data.result
        // } else {
        //     this.$tip.toast(res.data.message);
        // }

    },
    methods: {
        handleMarkerTap() {
            const queryString = uni.getStorageSync('address') ? encodeURIComponent(JSON.stringify(uni.getStorageSync('address'))) : ''
            uni.navigateTo({
                url: `/pages/login/map?position=${queryString}`
            })

        },
        getFile(e) {
            let path = ''
            uni.uploadFile({
                url: configService.apiUrl + '/sys/common/upload',
                filePath: e,
                name: "file",
                formData: {
                    'biz': 'temp',
                },
                success: (files) => {
                    let data = JSON.parse(files.data);
                    if (data.success) {
                        path = res.tempFilePaths
                    }
                }
            })
            console.log(path, 88);

            return path
        },
        uploadAll() {
            if (this.imageList.length === 0) {
                uni.showToast({ title: '请先选择图片', icon: 'none' });
                return;
            }

            uni.showLoading({ title: '上传中...', mask: true });

            const uploadPromises = this.imageList.map((path, index) => {
                return new Promise((resolve, reject) => {
                    uni.uploadFile({
                        url: configService.apiUrl + '/sys/common/upload',// 替换为实际接口
                        filePath: path,
                        formData: {
                            'biz': 'temp',
                        },
                        name: 'file',
                        success: (files)=>{
                            resolve(configService.apiUrl + '/' +JSON.parse(files.data).message)
                        },
                        fail: reject
                    });
                });

            });

            Promise.all(uploadPromises)
                .then(results => {
                    uni.hideLoading();
                    this.imageList = []; // 清空已上传列表
                    this.headPhotoImg = this.headPhotoImg.concat(results)
                    this.form.headPhoto = this.form.headPhoto.concat(results)
                    
                })
                .catch(error => {
                    uni.hideLoading();
                });
        },

        ChooseImage() {
            uni.chooseImage({
                count: 5-Number(this.headPhotoImg.length) , 
                sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album'], //从相册选择
                success: (res) => {
                    if (res) {
                        this.imageList = [...this.imageList, ...res.tempFilePaths];
                        this.uploadAll()
                    }
                }
            });
        },
        ViewImage(e) {
            uni.previewImage({
                urls: this.headPhotoImg,
                current: e.currentTarget.dataset.url
            });
        },
        DelImg(e) {
            uni.showModal({
                title: '提示',
                content: '确定要删除？',
                cancelText: '取消',
                confirmText: '确定',
                success: res => {
                    if (res.confirm) {
                        this.headPhotoImg.splice(e.currentTarget.dataset.index, 1)
                        this.form.headPhoto.splice(e.currentTarget.dataset.index, 1)
                    }
                }
            })
        },
        onConfirm(e) {
            this.mapIsHidden = false
            this.form.locality = e.result
            this.form.country = e.value[e.value.length - 1]
        },
        PickerChange(e) {
            this.form.purveyorId = this.supplierOption[e.detail.value].id
        },
        typeChang(e, val) {
            this.form[val] = e.detail.value
        },

        async businessChange(type) {
            let [chooseImageErr, chooseImageRes] = await uni.chooseImage({
                count: 1,
                sizeType: ['compressed']
            });
            let size = chooseImageRes.tempFiles[0].size / 1024 / 1024 < 5;
            if (!size) {
                this.$refs.uToast.show({
                    title: '上传图片大小不能超过 5MB!',
                    type: 'error',
                })
                return false
            }

            if (chooseImageRes) {
                this.lodingshow = true;
                // this.$tip.loading()
                this[type + 'Img'] = chooseImageRes.tempFilePaths[0];
                uni.uploadFile({
                    url: configService.apiUrl + '/sys/common/upload',
                    filePath: chooseImageRes.tempFilePaths[0],
                    name: "file",
                    formData: {
                        'biz': 'temp',
                    },
                    success: (files) => {
                        let data = JSON.parse(files.data);
                        if (data.success) {
                            this.form[type] = data.message

                            if (type == 'businessLicense' || type == 'identityOne') {
                                uni.uploadFile({
                                    url: configService.apiUrl + `${type == 'businessLicense' ? '/order/identify/businessLicense' : '/order/identify/idCard'}`,
                                    filePath: chooseImageRes.tempFilePaths[0],
                                    name: "image1",
                                    success: (uploadFileRes) => {
                                        let data1 = JSON.parse(uploadFileRes.data).result;
                                        let obj = {}
                                        if (type == 'businessLicense') {
                                            obj = {
                                                corporateName: data1.company ? data1.company : '', //公司名称
                                                creditCode: data1.socialCreditCode ? data1.socialCreditCode : '', //统一社会信用代码
                                                lifespanBegin: data1.registerDate ? data1.registerDate.substr(0,
                                                    4) + '-' + data1.registerDate.substr(5, 2) + '-' + data1.registerDate
                                                        .substr(8, 2) : '',
                                                lifespanEnd: data1.effectiveDate && data1.effectiveDate.includes('年') ? data1.effectiveDate.substr(0,
                                                    4) + '-' + data1.effectiveDate.substr(5, 2) + '-' + data1.effectiveDate
                                                        .substr(8, 2) : '9999-12-31',
                                                lifespanType: data1.registerDate || data1.effectiveDate ? '2' : '1',
                                            }

                                        }
                                        else {
                                            obj = {
                                                legalPerson: data1.customerInfo.name ? data1.customerInfo.name : '', //法人姓名
                                                legalPersonCode: data1.customerInfo.identifyNumber ? data1.customerInfo.identifyNumber : '', //法人证件号
                                            }
                                        }
                                        this.$nextTick(() => {
                                            this.form = {
                                                ...this.form,
                                                ...obj,
                                            }
                                            // this.$set(this.form, obj);
                                            // this.form=Object.assign(this.form,obj)
                                            console.log(obj, this.form, 88888);

                                        })
                                        this.lodingshow = false;

                                    }
                                });
                            }
                            else {
                                this.lodingshow = false;

                            }
                        }
                    }
                });
            } else {
                this.lodingshow = false;
            }
        },
        timestampToTime(timestamp) {
            // let date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
            let date = new Date(new Date());//时间戳为10位需*1000，时间戳为13位的话不需乘1000
            let Y = date.getFullYear() + '-';
            let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
            let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
            return Y + M + D;
        },
        sumbit() {
            
            if (this.title == '申请入驻') {
                for (let j in this.form) {
                    if (!this.form[j]) {
                        if (this.form['lifespanType'] == 2 && (this.form['lifespanBegin'] == null || this.form['lifespanEnd'] == null)) {
                            this.$tip.alert('请选择日期！')
                            return
                        }
                        if (this.form['businessLicense'] == null) {
                            this.$tip.alert('请上传营业执照！')
                            return
                        }
                        this.$tip.alert(`请填写${this.formName[j]}！`)
                        return
                    }
                }
                let data = {
                    ...this.form,
                    source: 2,
                    headPhoto: Array.isArray(this.form.headPhoto)?this.form.headPhoto.join(','):this.form.headPhoto,
                    longitude: this.markers.length > 0 ? this.markers[0].longitude : '',
                    latitude: this.markers.length > 0 ? this.markers[0].latitude : ''
                }
                this.$http.post('/merchant/app/add', data).then(res => {
                    if (res.data.success) {
                        this.$tip.success(res.data.result || '成功')
                        this.$Router.push({ name: "login" })
                    }
                    else {
                        this.$tip.error(res.data.message);
                    }
                })
            }
            else {
                let data = {
                    ...this.form,
                    source: 2,
                    headPhoto: Array.isArray(this.form.headPhoto)?this.form.headPhoto.join(','):this.form.headPhoto,
                    longitude: this.markers.length > 0 ? this.markers[0].longitude : '',
                    latitude: this.markers.length > 0 ? this.markers[0].latitude : ''
                }
				console.log(this.form.headPhoto,88);
				
                this.$http.post('/merchant/localMerchantInfo/edit', data).then(res => {
                    if (res.data.success) {
                        this.$tip.success(res.data.result || '成功')
                        uni.navigateBack({
                            delta: 1 // 返回的页面数，默认为1
                        })
                    }
                    else {
                        this.$tip.error(res.data.message);
                    }
                })
            }

        }
    }
}
</script>
<style scoped lang="scss">
page {
    background: #F8F8FA;
}

.cu-form-group .title {
    width: 190upx;
}

.cu-bg {
    background: linear-gradient(180deg, #D6E9FF 0%, #FFFFFF 100%);
}

.tab-top {
    margin-top: 78upx;
    padding: 26upx;
}

.borderRadiu {
    border-radius: 8px;
    padding-bottom: 10px;
    background-color: #ffffff;
    // border-bottom: 1px solid #eee;
}

.sub-bottom {
    position: fixed;
    width: 100%;
    bottom: 0;
    background: #FFFFFF;
    border-top: 1px solid #EEEEEE;
}

.progress-status {
    position: fixed;
    width: 100%;
    z-index: 9999;
    padding: 26upx 42upx;
    background: #FFFFFF;

    .status {
        font-size: 38upx;
        color: #F6863E;
        font-weight: 500;
        margin-bottom: 10upx;

        text {
            margin-left: 5upx
        }

        image {
            vertical-align: text-top;
            width: 42upx;
            height: 42upx;
        }
    }
}

.progress {
    position: fixed;
    height: 96upx;
    width: 100%;
    z-index: 9999;
    background: #FFFFFF;
    padding: 20upx 30upx;

    .progress-title {
        margin-top: 16upx;
        font-size: 24upx;
        color: #999999;

        .color {
            color: #333333;

        }
    }

    .progress-style {
        width: 100%;
        height: 10upx;
        border-radius: 5px 5px 5px 5px;
    }

    .progress-bag {
        position: relative;
        background: rgba(68, 154, 255, 0.05);

        .progress-icon {
            position: absolute;
            margin-top: -1px;
            width: 12upx;
            height: 12upx;
            background: #449AFF;
            border-radius: 50%;
            box-shadow: 0px 0px 0px 7upx rgba(68, 154, 255, 0.3);
        }

        .progress-icon1 {
            position: absolute;
            margin-top: -1px;
            width: 12upx;
            height: 12upx;
            background: #449AFF;
            border-radius: 50%;
            left: 99%;
            box-shadow: 0px 0px 0px 7upx rgba(68, 154, 255, 0.3);
        }

        .progress-bag1 {
            width: 50%;
            position: absolute;
            background: rgba(68, 154, 255, 0.8);

        }

        .progress-bag2 {
            position: absolute;
            background: rgba(68, 154, 255, 0.8);
        }
    }

}

.customize {
    background-color: #fff;
    // border-top: 0.5px solid #eee;
    margin: 16upx 18upx;

    .title {
        font-size: 30upx;
        // padding: 10px;
    }

    .business-img {
        height: 218upx;
        width: 360upx;
        padding: 16upx;
        // padding-bottom: 16upx;
        background: url('/static/login/yingye2.png');
        margin: 16upx auto;
        background-size: cover;

        image {
            width: 100%;
            height: 100%;
        }
    }

    .business-prompt {
        padding-top: 16upx;
        font-size: 20upx;
        color: #999999;
    }
}

.booder-top {
    border-bottom: 1px solid rgb(238, 238, 238);
    padding-top: 7px;
}


.img-border {
    padding: 15px 20px;

}

.upload {
    width: 100%;
    height: 188upx;
    // padding: 15px 20px;
    background-color: white;

    .imgOcr-border {
        position: relative;
        width: 48%;
        height: 100%;
        padding: 12upx;
        // background-color: #fff;
        background: url('/static/login/code3.png');

        background-size: cover;
        // box-shadow: 0px 4px 10px 0px #DAE3F4;

        image {
            width: 100%;
            // border-radius: 4px;
            height: 100%;
        }
    }
}

.picker-style {
    .w-picker-cnt .visible {
        position: absolute;
        z-index: 100000;
    }
}
</style>