Client-Teapay/src/pagesB/my/addShop.vue

<template>
    <div class="add-shop">
        <div class="userBox">
            <div class="u_item flex_r flex_ac">
                <div class="label">业务员</div>
                <div class="text">{{ userinfo.nickname }}</div>
            </div>
            <div class="u_item flex_r flex_ac">
                <div class="label">手机号</div>
                <div class="text">{{ userinfo.mobile }}</div>
            </div>
        </div>
        <uni-forms ref="form" :modelValue="formData" label-width="80px" validateTrigger="blur">
            <uni-forms-item label="店铺名称" required name="name">
                <uni-easyinput v-model="formData.name" type="text" placeholder="请输入店铺名称" />
            </uni-forms-item>
            <uni-forms-item label="商家logo" required name="logo">
                <upimg v-model="formData.logo"/>
            </uni-forms-item>
            <uni-forms-item label="商家分类" required name="business">
                <uni-data-select v-model="formData.business" :localdata="TypeDesc.business" placeholder="请选择商家分类"></uni-data-select>
            </uni-forms-item>
            <uni-forms-item label="商家属性" required name="attribute">
                <uni-data-select v-model="formData.attribute" :localdata="TypeDesc.attribute" placeholder="请选择商家属性"></uni-data-select>
            </uni-forms-item>
            <uni-forms-item label="合作类型" required name="type">
                <uni-data-select v-model="formData.type" :localdata="TypeDesc.type" placeholder="请选择合作类型"></uni-data-select>
            </uni-forms-item>
            <uni-forms-item label="让利比率" required name="discount">
                <uni-easyinput v-model="formData.discount" type="text" placeholder="请输入让利比率" />
            </uni-forms-item>
            <uni-forms-item label="省市区" required name="province">
                <div class="selectAdder flex_r flex_ac flex_jb" @click="btnClick">
                    <div v-if="userAddress">{{userAddress}}</div>
                    <div class="msg" v-else>请选择省市区地址</div>
                    <div class="ico iconfont">&#xe62e;</div>
                </div>
            </uni-forms-item>
            <uni-forms-item label="详细地址" required name="address">
                <uni-easyinput v-model="formData.address" type="text" placeholder="请输入详细地址" />
            </uni-forms-item>
            <uni-forms-item label="经度" required name="longitude">
                <uni-easyinput v-model="formData.longitude" type="text" placeholder="请输入经度" />
            </uni-forms-item>
            <uni-forms-item label="纬度" required name="latitude">
                <uni-easyinput v-model="formData.latitude" type="text" placeholder="请输入纬度" />
            </uni-forms-item>
            <uni-forms-item label="联系人" required name="contact">
                <uni-easyinput v-model="formData.contact" type="text" placeholder="请输入联系人" />
            </uni-forms-item>
            <uni-forms-item label="联系电话" required name="phone">
                <uni-easyinput v-model="formData.phone" type="text" placeholder="请输入联系电话" />
            </uni-forms-item>
            <uni-forms-item label="商家微信" required name="we_chat">
                <uni-easyinput v-model="formData.we_chat" type="text" placeholder="请输入商家微信" />
            </uni-forms-item>
            <uni-forms-item label="开票类型" required name="billing_type">
                <uni-data-select v-model="formData.billing_type" :localdata="TypeDesc.billing_type" placeholder="请选择开票类型"></uni-data-select>
            </uni-forms-item>
            <uni-forms-item label="开户行" required name="bank">
                <uni-easyinput v-model="formData.bank" type="text" placeholder="请输入开户行" />
            </uni-forms-item>
            <uni-forms-item label="银行卡号" required name="card_no">
                <uni-easyinput v-model="formData.card_no" type="text" placeholder="请输入银行卡号" />
            </uni-forms-item>
            <uni-forms-item label="开户姓名" required name="account_name">
                <uni-easyinput v-model="formData.account_name" type="text" placeholder="请输入开户姓名" />
            </uni-forms-item>
            <uni-forms-item label="身份证号" required name="card_id">
                <uni-easyinput v-model="formData.card_id" type="text" placeholder="请输入身份证号" />
            </uni-forms-item>
            <uni-forms-item label="开户手机" required name="open_phone">
                <uni-easyinput v-model="formData.open_phone" type="text" placeholder="请输入开户手机" />
            </uni-forms-item>
            <uni-forms-item label="平台截图" name="other_type">
                <uni-data-select v-model="formData.other_type" :localdata="TypeDesc.other_type" placeholder="请选择平台"></uni-data-select>
            </uni-forms-item>
            <uni-forms-item label="上传截图">
                <upimg v-model="formData.other_images"/>
            </uni-forms-item>
            <uni-forms-item label="店铺图集">
                <upimg v-model="formData.atlas" :count="6"/>
            </uni-forms-item>
        </uni-forms>
        <div class="btn" @click="submit">确认提交</div>
        <!-- <button class="button" @click="submit">校验表单</button> -->
        <select-address :address.sync="address" ref="selectAddress" @change="changeAddress" />
    </div>
</template>
<script>
import { post } from "@/request/api.js";
import selectAddress from "@/components/lcw-select-address/lcw-select-address";
import upimg from "@/pagesB/components/up/index"
export default {
    name: "add-shop",
    props: {},
    components: { selectAddress, upimg },
    data() {
        return {
            userinfo: uni.getStorageSync("userinfo"),
            formData: {},
            rules: {
                name: { rules: [{ required: true, errorMessage: '请输入店铺名称' }] },
                logo: { rules: [{ required: true, errorMessage: '请上传店铺logo' }] },
                business: { rules: [{ required: true, errorMessage: '请选择商家分类' }] },
                attribute: { rules: [{ required: true, errorMessage: '请选择商家属性' }] },
                type: { rules: [{ required: true, errorMessage: '请选择合作类型' }] },
                discount: { rules: [{ required: true, errorMessage: '请输入让利比率' }] },
                province: { rules: [{ required: true, errorMessage: '请选择省市区地址' }] },
                address: { rules: [{ required: true, errorMessage: '请输入详细地址' }] },
                longitude: { rules: [{ required: true, errorMessage: '请输入经度' }] },
                latitude: { rules: [{ required: true, errorMessage: '请输入纬度' }] },
                contact: { rules: [{ required: true, errorMessage: '请输入联系人' }] },
                phone: { rules: [{ required: true, errorMessage: '请输入联系电话' }] },
                we_chat: { rules: [{ required: true, errorMessage: '商家微信' }] },
                billing_type: { rules: [{ required: true, errorMessage: '请选择开票类型' }] },
                bank: { rules: [{ required: true, errorMessage: '请输入开户行' }] },
                card_no: { rules: [{ required: true, errorMessage: '请输入银行卡号' }] },
                account_name: { rules: [{ required: true, errorMessage: '请输入开户姓名' }] },
                card_id: { rules: [{ required: true, errorMessage: '请输入身份证号' }] },
                open_phone: { rules: [{ required: true, errorMessage: '请输入开户手机' }] },
            },
            TypeDesc: {},
            address: {
                province: "",
                city: "",
                area: "",
                street: "",
            },
            userAddress: "",
        };
    },
    methods: {
        submit() {
            let that = this
            this.$refs.form.validate().then((res) => {
                post("v1/merchant/apply",this.formData).then(res=>{
                    if (res.code == 0) {
                        that.$toast("提交成功，请关注审核状态")
                        setTimeout(() => {
                            uni.navigateBack({ delta: 1 })
                        }, 1500);
                    }
                })
            })
            .catch((err) => {
                console.log("表单错误信息：", err);
            });
        },
        async getTypeDesc() {
            let res = await post("v1/merchant/typeDesc");
            if (res.code == 0) {
                this.TypeDesc = res.data
            }
        },
        btnClick() {
            this.$refs.selectAddress.open();
        },
        changeAddress(address) { //选择地区成功回调
            let { area, city, province, street } = address
            let obj = { county:area, city, province, street }
            this.formData = Object.assign({}, this.formData, obj);
            this.address = address;
            this.userAddress = "";
            for (const i in address) {
                if (i != "regional_code") this.userAddress += address[i] + " ";
            }
        },
        // 获取当前位置
        async getLocation() {
            let adres = await uni.Location();
            this.$set(this.formData, "longitude", adres.lng)
            this.$set(this.formData, "latitude", adres.lat)
        },
    },
    onReady() {
        this.$refs.form.setRules(this.rules);
    },
    onLoad(da) {
        this.getLocation()
        this.getTypeDesc()
    },
    onShow() {},
    mounted() {},
};
</script>
<style lang="scss">
.add-shop {
    // .uni-forms-item {
    //     margin-bottom: 25rpx !important;
    // }
    // .uni-forms-item__error{
    //     display: none;
    // }

    .uni-forms-item__label {
        color: #222;
    }

    .uni-stat__select {
        background-color: #fff;
    }
}
</style>
<style scoped lang='scss'>
.add-shop {
    padding: 28rpx 32rpx;

    .userBox {
        color: #222;
        font-size: 28rpx;
        margin-bottom: 44rpx;

        .u_item {
            margin-bottom: 28rpx;
        }

        .label {
            width: 80px;
        }
    }

    .formCon {
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .selectAdder {
        height: 100%;
        background-color: #fff;
        border-radius: 4px;
        border: 1px solid #e5e5e5;
        padding: 0 10px;
        font-size: 24rpx;

        .msg {
            color: #999;
        }

        .ico {
            color: #888;
        }
    }
}
.btn{
    color: #fff;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 36rpx;
    background: #17bb87;
    border-radius: 45rpx;
    text-align: center;
    margin-bottom: 50rpx;
}
</style>