LocalLivingServicesUniapp/pages/login/settled.vue

<template>
    <view>
        <cu-custom :isBack="true">
            <block slot="content">申请入驻</block>
        </cu-custom>
        <view v-if="tab == 1">
            <form>
                <view class="cu-form-group ">
                    <!-- <mySelect label="选择所属供应商" ></mySelect> -->
                    <view class="title">选择所属供应商</view>
                    <picker @change="PickerChange" :value="form.purveyorId" range-key="purveyorName"
                        :range="supplierOption">
                        <view class="picker">
                            {{ form.purveyorId ? supplierOption.find(e => e.id == form.purveyorId).purveyorName : '请选择'
                            }}
                        </view>
                    </picker>
                </view>
                <view class="flex cu-form-group margin-top">
                    <view class="content ">
                        <text class="text-bold">账户信息</text>
                    </view>
                    <view class="action">
                        <text class="text-bold">1/3</text>
                    </view>
                </view>
                <view class="cu-form-group">
                    <view class="title">姓名</view>
                    <input placeholder="请输入联系人姓名" v-model="form.name" name="input"></input>
                </view>
            </form>
            <view class="padding flex flex-direction">
                <button class="cu-btn bg-blue " @click="tab = 2">保存并下一步</button>
            </view>
        </view>
        <view v-if="tab == 2">
            <form>
                <view class="flex cu-form-group margin-top">
                    <view class="content ">
                        <text class="text-bold">提交经营主体资料</text>
                    </view>
                    <view class="action">
                        <text class="text-bold">2/3</text>
                    </view>
                </view>
                <view class="cu-form-group">
                    <view class="title">主体类型</view>
                    <radio-group @change="typeChang($event, 'type')" v-model="form.type">
                        <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">
                    <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>
                    <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.lifespan == 2">
                    <view class="title">日期开始时间</view>
                    <picker mode="date" :value="form.lifespanBegin" @change="typeChang($event, 'lifespanBegin')">
                        <view class="picker">
                            {{ form.lifespanBegin ? form.lifespanBegin : '请选择' }}
                        </view>
                    </picker>
                </view>
                <view class="cu-form-group" v-if="form.lifespan == 2">
                    <view class="title">日期结束时间</view>
                    <picker mode="date" :value="form.lifespanEnd" @change="typeChang($event, 'lifespanEnd')">
                        <view class="picker">
                            {{ form.lifespanEnd ? form.lifespanEnd : '请选择' }}

                        </view>
                    </picker>
                </view>
                <view class="customize">
                    <view class="title">营业执照</view>
                    <view class="business-img flex align-center">
                        <image :src="businessLicenseImg ? businessLicenseImg : '/static/login/yingyezhizhao.png'" mode=""
                            @click="businessChange('businessLicense')">
                        </image>
                    </view>
                </view>
                <view class="cu-form-group  margin-top">
                    <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 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>
            </form>
            <view class="padding flex justify-around ">
                <button class="cu-btn bg-blue " @click="tab = 1">上一步</button>
                <button class="cu-btn bg-blue " @click="tab = 3">保存并下一步</button>
            </view>
        </view>
        <view v-if="tab == 3">
            <form>
                <view class="flex cu-form-group margin-top">
                    <view class="content ">
                        <text class="text-bold">提交门店信息</text>
                    </view>
                    <view class="action">
                        <text class="text-bold">3/3</text>
                    </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" @click="$refs.picker.show()">
                    <view class="title">所在地区</view>
                    <input placeholder="请输入所在地区" name="input" v-model="country" disabled="true"></input>
                    <w-picker :visible.sync="visible" ref="picker" mode="region" :value="country"
                        @confirm="onConfirm($event, 'region')"></w-picker>
                </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="grid col-4 grid-square flex-sub img-border">
                        <view class="bg-img" v-for="(item, index) in imgList" :key="index" @tap="ViewImage"
                            :data-url="imgList[index]">
                            <image :src="imgList[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="imgList.length < 4">
                            <text class='cuIcon-cameraadd'></text>
                        </view>
                    </view>
                </view>
            </form>
            <view class="padding flex justify-around ">
                <button class="cu-btn bg-blue " @click="tab = 2">上一步</button>
                <button class="cu-btn bg-blue " @click="sumbit">提交申请</button>
            </view>
        </view>
    </view>
</template>
<script>
import configService from '../../common/service/config.service'
import { ACCESS_TOKEN } from '@/common/util/constants.js'
import regionPicker from "../../components/w-picker/region-picker.vue"

export default {
    components: {
        regionPicker,
    },
    data() {
        return {
            form: {
                purveyorId: 0,
                type: 1,
                lifespan: 1,
                lifespanBegin: null,
                lifespanEnd: null,
                headPhoto: null,
                passWord:uni.getStorageSync('password'),
                phone:uni.getStorageSync('phone'),
            },
            tab: 1,
            supplierOption: [],
            businessLicenseImg: '',
            identityOneImg: '',
            identityTwoImg: '',
            visible: false,
            imgList: [],
            imgList1: [],
            index: -1,
            country: '',
        }
    },
   
    async onLoad() {
        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: {
        ChooseImage() {
            uni.chooseImage({
                // count: 4, //默认9
                sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
                sourceType: ['album'], //从相册选择
                success: (res) => {
                    if (res) {
                        // this[type + 'Img'] = chooseImageRes.tempFilePaths[0];
                        uni.uploadFile({
                            url: configService.apiUrl + '/sys/common/upload',
                            filePath: res.tempFilePaths[0],
                            name: "file",
                            success: (files) => {
                                let data = JSON.parse(files.data);
                                if (data.success) {
                                    if (this.imgList.length != 0) {
                                        this.imgList = this.imgList.concat(res.tempFilePaths)
                                        this.form.headPhoto.push(data.message)
                                    } else {
                                        this.imgList = res.tempFilePaths
                                        this.form.headPhoto=[data.message]
                                    }

                                    // this.form.headPhoto =this.form.headPhoto+'/'+ data.message
                                }
                            }
                        })
                    }
                    
                }
            });
        },
        ViewImage(e) {
            uni.previewImage({
                urls: this.imgList,
                current: e.currentTarget.dataset.url
            });
        },
        DelImg(e) {
            uni.showModal({
                title: '提示',
                content: '确定要删除？',
                cancelText: '取消',
                confirmText: '确定',
                success: res => {
                    if (res.confirm) {
                        this.imgList.splice(e.currentTarget.dataset.index, 1)
                        this.form.headPhoto.splice(e.currentTarget.dataset.index, 1)

                    }
                }
            })
        },
        onConfirm(e) {
            console.log("confirm", e)
            this.country = 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[type + 'Img'] = chooseImageRes.tempFilePaths[0];
                uni.uploadFile({
                    url: configService.apiUrl + '/sys/common/upload',
                    filePath: chooseImageRes.tempFilePaths[0],
                    name: "file",
                    success: (files) => {
                        let data = JSON.parse(files.data);
                        if (data.success) {
                            this.form[type] = data.message
                            // uni.uploadFile({
                            //     url: this.$base.baseUrl + '/order/identify/drivingPermit',
                            //     filePath: chooseImageRes.tempFilePaths[0],
                            //     name: "image2",
                            //     header: {
                            //         Authorization: store.state.token,
                            //     },
                            //     success: (uploadFileRes) => {

                            //         let data1 = JSON.parse(uploadFileRes.data).data;
                            //         this.carback = {
                            //             vehicleweight: data1.carInfo
                            //                 .grossMass, //总质量
                            //             completeKerbMass: data1.carInfo
                            //                 .unladenMass, //整备质量
                            //             seatCount: data1.carInfo
                            //                 .approvedPassengersCapacity, //核定载客数
                            //             limitLoad: data1.carInfo
                            //                 .limitLoad, //核定载质量
                            //         }
                            //         this.lodingshow = false;
                            //     }
                            // });
                        }
                    }
                });
            } else {
            }
        },
        sumbit() {
            let headPhoto=this.form.headPhoto?this.form.headPhoto.join('/'):null
            this.$http.post('/merchant/app/add',{...this.form,source:2,headPhoto}).then(res=>{
                if(res.data.success){
					this.$tip.success(res.data.result||'成功')
                    this.$Router.push({name:"login"})
                }
                else{
					this.$tip.error(res.data.message);
				  }

            })

        }
    }
}
</script>
<style scoped lang="scss">
.customize {
    background-color: #fff;
    border-top: 0.5px solid #eee;

    .title {
        font-size: 15px;
        padding-right: 15px;
        padding: 15px;
        padding-bottom: 0;
    }
}
.business-img{
    height: 218upx;
    width: 360upx;
    padding: 14upx;
    background: url('/static/login/yingye2.png');
    image {
            width: 100%;
            height: 100%;
        }
}
.img-border{
    padding: 15px 20px;

}
.upload {
    width: 100%;
    height: 182upx;
    // 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');
        // box-shadow: 0px 4px 10px 0px #DAE3F4;

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