hongze_yb_xcx/pages-applyPermission/applyPermission.vue

<template>
    <view class="apply-trial-page">
        <view class="tips">请上传您的名片信息，以便工作人员更好地为您服务</view>
        <view class="flex upload-wrap">
            <view class="box upload-box" @click="handleUploadCard">
                <image
                    class="add-icon"
                    src="./static/upload.png"
                    mode="widthFix"
                    v-if="!cardImg"
                ></image>
                <image class="bg-img" :src="cardImg" mode="widthFix" v-if="cardImg"></image>
                <view class="tips" v-if="!cardImg">上传您的名片</view>
            </view>
            <view class="box exp">
                <image class="bg-img" :src="globalImgUrls.idCardExp" mode="widthFix"></image>
                <view class="tips">名片示例</view>
            </view>
        </view>

        <view class="form-wrap">
            <van-field
                clearable
                label="姓名"
                :value="form.name"
                placeholder="请输入姓名"
                :border="false"
                title-width="70px"
                @change="inputChange('name', $event)"
            />
            <van-field
                clearable
                label="公司名"
                :value="form.companyName"
                placeholder="请输入公司名"
                :border="false"
                title-width="70px"
                @change="inputChange('companyName', $event)"
            />
            <van-field
                clearable
                label="手机号"
                type="number"
                :value="userInfo.mobile"
                placeholder="请输入手机号"
                :border="false"
                title-width="70px"
                disabled
                v-if="!userInfo.email"
            />
            <van-field
                label="关注品种"
                readonly
                :value="form.permission"
                placeholder="请选择关注品种"
                :border="false"
                is-link
                title-width="70px"
                @click-input="handleGoSelectVariety"
            />
        </view>

        <view class="global-btn-yellow-change btn" @click="handleSubmit">提交</view>
    </view>
</template>

<script>
import { uploadImg } from '@/utils/upload'
import {apiApplyPermission} from '@/api/user'
export default {
    name: "ApplyTrial",
    data() {
        return {
            cardImg: '',//上传的名片地址
            form: {
                name: "",
                companyName: '',
                tel: '',
                permission: ''
            },
        }
    },
    onLoad(){
        this.addEventListenerPermission()
    },
    onUnload(){
		uni.$off('selectPermission')
	},
    methods: {
        // 监听权限选择
        addEventListenerPermission(){
            uni.$on('selectPermission',(e)=>{
                this.form.permission=e.permissionList.join(',')
            })
        },

        inputChange(key, event) {
            this.form[key] = event.detail
        },

        // 上传名片
        async handleUploadCard() {
            const res = await uploadImg()
            this.cardImg=res[0]
        },

        // 去选择品种
        handleGoSelectVariety() {
            
            uni.navigateTo({
                url: "/pages-applyPermission/selectVariety",
                events:{},
                success: (res)=> {
                    // 通过eventChannel向被打开页面传送数据
                    res.eventChannel.emit('hasPermissionData', { data: this.form.permission })
                }
            })

        },

        // 提交
        async handleSubmit(){
            let params={
                business_card_url:this.cardImg,
                company_name:this.form.companyName,
                permission:this.form.permission,
                real_name:this.form.name,
            }
            if(!params.company_name){
                uni.showToast({
                    title:"请填写公司名",
                    icon:"none"
                })
                return
            }
            if(!params.real_name){
                uni.showToast({
                    title:"请填写姓名",
                    icon:"none"
                })
                return
            }
            if(!params.permission){
                uni.showToast({
                    title:"请选择品种",
                    icon:"none"
                })
                return
            }

            const res=await apiApplyPermission(params)
            if(res.code===200){
                uni.showToast({
                    title:"申请成功",
                    icon:"none"
                })
                this.$store.dispatch('getUserInfo')//重新获取一次个人信息
                setTimeout(()=>{
                    uni.redirectTo({
                        url:"/pages-applyPermission/applyResult"
                    })
                },1000)
            }

        }
    }
}
</script>

<style lang="scss">
.tips {
    background-color: #fbf3e8;
    color: $global-text-color-grey;
    font-size: $global-font-size-sm;
    padding: 14rpx 34rpx;
}
.upload-wrap {
    padding: 30rpx 34rpx 40rpx 34rpx;
    justify-content: space-between;
    .box {
        background-color: $global-bg-color-grey;
        width: 326rpx;
        height: 260rpx;
        border-radius: 16rpx;
        overflow: hidden;
        position: relative;
        .tips {
            background-color: rgba(0, 0, 0, 0.2);
            color: $global-text-color-white;
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            text-align: center;
        }
        .bg-img{
            width: 100%;
            height: 100%;
        }
    }
    .upload-box {
        .add-icon {
            width: 30%;
            position: absolute;
            top: 53rpx;
            left: 50%;
            transform: translateX(-50%);
        }
    }
}

.van-cell {
    border-bottom: 1px solid $global-border-color;
}
.form-wrap {
    border-top: 10rpx solid #f6f6f6;
}

.btn {
    width: 380rpx;
    margin-top: 80rpx;
    margin-left: auto;
    margin-right: auto;
}
</style>