Client-Teapay/src/pagesC/settledMerchant/addShop.vue

<template>
    <div class="add-shop">
        <uni-forms ref="form" :modelValue="formData" label-width="80px" validateTrigger="blur">
            <uni-forms-item label="商户大使" required name="user_id">
                <div class="userBox">
                    <div class="u_item flex_r flex_ac">
                        <!-- <div class="label">商户大使</div> -->
                        <!-- <div class="text">{{ userinfo.nickname }}</div> -->
                        <uni-easyinput v-model="salesmanSearch" type="text" placeholder="请输入商户大使手机号" v-if="!saleValue" />
                        <uni-easyinput v-model="saleValue" type="text" placeholder="请输入商户大使手机号" v-else />
                    </div>
                    <div class="solesPanel" v-if="salesmanSearch">
                        <div v-if="salesmanList.length>0" class="flex_c">
                            <span v-for="(it,idx) in salesmanList" :key="idx" @click="chooseSaleman(it)">{{ it.nickname+'/'+it.mobile }}</span>
                        </div>
                        <div v-else class="none">
                            <span>该搜索匹配不到商户大使</span>
                        </div>
                    </div>
                    <!-- <div class="u_item flex_r flex_ac">
                        <div class="label">手机号</div>
                        <div class="text">{{ userinfo.mobile }}</div>
                    </div> -->
                </div>
            </uni-forms-item>
            <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="qualification">
                <upimg v-model="formData.qualification" :count="6"/>
            </uni-forms-item>
            <uni-forms-item label="商家账号" required name="mobile">
                <uni-easyinput v-model="formData.mobile" type="text" placeholder="请输入商家账号，即茶付宝账号" />
            </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="请输入让利比率，百分比" />
                <div class="suffix">%</div>
            </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">
                <div class="lat-item flex_r flex_jb flex_ac">
                    <div class="inp_l">
                        <uni-easyinput v-model="formData.longitude" type="text" placeholder="请输入经度" />
                    </div>
                    <div class="lat-btn" @click="getLocation">获取定位</div>
                </div>
            </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="商家简介" required name="summary">
                <uni-easyinput v-model="formData.summary" type="textarea" autoHeight placeholder="请输入商家简介" />
            </uni-forms-item>
            <uni-forms-item label="店铺图集" required name="atlas">
                <upimg v-model="formData.atlas" :count="9"/>
            </uni-forms-item>
            <uni-forms-item label="入驻协议" required name="settled">
                <upimg v-model="formData.settled" :count="9"/>
            </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>
        <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 "@/pagesC/components/up/index"
export default {
    name: "add-shop",
    props: {},
    components: { selectAddress, upimg },
    data() {
        return {
            userinfo: uni.getStorageSync("userinfo"),
            formData: {
                user_id: uni.getStorageSync("userinfo").user_id,
                user_val: uni.getStorageSync("userinfo").nickname+'/'+uni.getStorageSync("userinfo").mobile
            },
            saleValue: uni.getStorageSync("userinfo").nickname+'/'+uni.getStorageSync("userinfo").mobile,
            rules: {
                user_id: { rules: [{ required: true, errorMessage: '请选择商户大使' }] },
                name: { rules: [{ required: true, errorMessage: '请输入店铺名称' }] },
                logo: { rules: [{ required: true, errorMessage: '请上传店铺logo' }] },
                qualification: { rules: [{ required: true, errorMessage: '请上传商家资质' }] },
                mobile: { rules: [{ required: true, errorMessage: '请输入商家账号，即茶付宝账号' }] },
                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: '请输入详细地址' }] },
                summary: { 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: '请输入开户手机' }] },
                atlas: { rules: [{ required: true, errorMessage: '请上传店铺图集' }] },
                settled: { rules: [{ required: true, errorMessage: '请上传入驻协议' }] },
            },
            TypeDesc: {},
            address: {
                province: "",
                city: "",
                area: "",
                street: "",
            },
            userAddress: "",
            submitType: 0, //0新增 1修改
            salesmanSearch: "",
            salesmanList: []
        };
    },
    watch:{
        saleValue(val){
            if(!val){
                this.formData.user_id = ""
                this.formData.user_val = ""
            }
        },
        salesmanSearch(value){
            if(value){
                this.salesmanSearchFn(value)
            }
        }
    },
    methods: {
        submit() {
            let that = this
            this.$refs.form.validate().then((res) => {
                let da = Object.assign({},this.formData);
                da.discount = this.$h.Div(da.discount, 100);
                if(this.submitType == 1){
                    post("v1/merchant/edit",{ ...da,shop_id: this.formData.id }).then(res=>{
                        if (res.code == 0) {
                            that.$toast("修改成功，请关注审核状态")
                            setTimeout(() => {
                                uni.navigateBack({ delta: 1 })
                            }, 1500);
                        }
                    })
                }else{
                    post("v1/merchant/apply",da).then(res=>{
                        if (res.code == 0) {
                            that.$toast("提交成功，请关注审核状态")
                            setTimeout(() => {
                                uni.navigateBack({ delta: 1 })
                            }, 1500);
                        }
                    })
                }
                
            })
            .catch((err) => {
                console.log("表单错误信息：", err);
            });
        },
        salesmanSearchFn(mobile){
            post("v1/merchant/salesman",{mobile:mobile}).then(res=>{
                if (res.code == 0) {
                    this.salesmanList = res.data
                }
            })
        },
        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] + " ";
            }
        },
        chooseSaleman(it){
            this.salesmanSearch = ""
            this.saleValue = it.nickname+'/'+it.mobile
            this.formData.user_id = it.user_id
            this.formData.user_val = it.nickname+'/'+it.mobile
        },
        // 获取当前位置
        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) {
        if (da && da.id) {
            this.submitType = 1
            post("v1/merchant/shopInfo", { shop_id: da.id }).then((res) => {
                if (res.code == 0) {
                    this.formData = res.data;
                    this.saleValue = this.formData.user_val
                }
            });
        }
        this.getLocation()
        this.getTypeDesc()
    },
    onShow() {},
    mounted() {},
};
</script>
<style lang="scss">
.add-shop {
    .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;
        position: relative;
        // margin-bottom: 44rpx;

        .u_item {
            // margin-bottom: 28rpx;
        }

        .label {
            width: 80px;
        }

        .solesPanel{
            position: absolute;
            width: 100%;
            // left: 80px;
            top: 38px;
            max-height: 320rpx;
            font-size: 26rpx;
            line-height: 180%;
            overflow: auto;
            z-index: 99;
            padding: 0 20rpx;
            border-radius: 8rpx;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            border: 1px solid #EBEEF5;
            background: #fff;
            
            span{
                padding: 20rpx 0;
                border-bottom: 1rpx solid rgba($color: #bbbbbb, $alpha: 0.6);
            }
            span:last-child{
                border-bottom: none;
            }
            .none{
                color: #888;
                text-align: center;
                font-size: 24rpx;
                padding: 40rpx 0 !important;
            }
        }
    }

    .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;
        }
    }

    .suffix{
        position: absolute;
        top: 20rpx;
        right: 22rpx;
    }

    .lat-item{
        .inp_l{
            width: calc(100% - 168rpx);
        }
        .lat-btn{
            background-color: #17bb87;
            color: #fff;
            padding: 3rpx 16rpx;
            border-radius: 8rpx;
        }
    }
}
.btn{
    color: #fff;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 36rpx;
    background: #17bb87;
    border-radius: 45rpx;
    text-align: center;
    margin-bottom: 50rpx;
}
</style>