SFH5/pagesb/referrerInfo/index.vue

<template>
    <view class="referrer-info-wrapper" :class="[`${themeInfo.theme}-theme`, `${themeInfo.language}`]">
        <navBar></navBar>
        <view class="referrer-info">
            
            <view class="title">{{ $t("person.referrerInfo") }}</view>
            <view class="info-content">
                <view class="info-item" @click="openPickerCompany">
                    <view class="label"> * {{ $t("referrerInfo.company") }} </view>
                    <view class="input-box">
                        <view class="value">
                            <uv-input disabled v-model="formData.intermediaryCompany" border="none" fontSize="16"></uv-input>
                        </view>
                    </view>
                </view>

                <view class="info-item">
                    <view class="label"> * {{ $t("referrerInfo.branch") }} </view>
                    <view class="input-box">
                        <view class="value">
                            <uv-input readonly v-model="formData.intermediaryBranch" border="none" fontSize="16"></uv-input>
                        </view>
                    </view>
                </view>

                <view class="info-item">
                    <view class="label"> - {{ $t("referrerInfo.commission") }} </view>
                    <view class="input-box">
                        <view class="value">
                            <uv-input v-model="intermediaryCommission" border="none" readonly fontSize="16"></uv-input>
                        </view>
                    </view>
                </view>
                <template v-if="formData.mediatorId">
                <button class="next-btn" @click="handleSubmit">
                    {{ $t("common.submit") }}
                </button>
                </template>
                <template v-else>
                <button class="next-btn" @click="handleSubmit">
                    成为中介
                </button>
            </template>
            </view>
            <view class="button-wrap" v-if="storeState.userInfo?.customerType == 1">
			<view class="bottom-btn" @click="handleNavigate('/pagesb/invitation/index')">{{ $t("referrerInfo.inviteRegister") }}</view>
			<view class="bottom-btn" @click="state.inviteMediatorShow = true">{{ $t("referrerInfo.inviteRecord") }}</view>
		</view>
        </view>
        <uv-picker ref="pickerCompanyRef"
        :confirmText="$t('common.confirm')"
        :cancelText="$t('common.cancel')"
        :columns="[state.mediatorCompanyList]" keyName="intermediaryCompany" @confirm="confirmPickerCompany"></uv-picker>
        <!-- 中介邀请详情 -->
		<MediatorinviteDetail v-model="state.inviteMediatorShow"></MediatorinviteDetail>
    </view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

import navBar from '@/components/navBar.vue';
import MediatorinviteDetail from '@/components/MediatorinviteDetail.vue';
// 主题色配置
import { useMainStore } from '@/store/index.js';
import { getClientCustomerApi } from '@/Apis/clientCustomer.js';
import { useI18n } from 'vue-i18n';
const pickerCompanyRef = ref()
const { themeInfo,storeState,getUserInfo } = useMainStore();
const { t } = useI18n();

const clientCustomerApi = getClientCustomerApi();

const intermediaryCommission = ref('');
const formData = reactive({
    mediatorId: '',
    intermediaryCompany: '',
    intermediaryBranch: '',
    mediatorCompanyList: [],
    mediatorCompanyId: '',
    inviteMediatorShow: false,
});
const state = reactive({
    mediatorCompanyList: [],
})

onLoad( async() => {
    await getUserInfo();
    if(storeState.userInfo?.customerType == 1){
        getReferrerInfo();
    }
    GetMediatorCompanyAllList()
});

function handleNavigate(url) {
	if(!uni.getStorageSync('token')){
		if (needLoginPages.includes(url)) {
			navigateTo('/pages/login/index')
			return
		}
	}
	uni.navigateTo({
		url,
	});
}



const openPickerCompany = () => {
    pickerCompanyRef.value.open();
}
const closePickerCompany = () => {
    pickerCompanyRef.value.close();
}
const confirmPickerCompany = (e)=>{
    let data = e.value[0]
    formData.intermediaryCompany = data.intermediaryCompany;
    formData.mediatorCompanyId = data.id;
    formData.intermediaryBranch = data.intermediaryBranch;
    intermediaryCommission.value = data.intermediaryCommission ? data.intermediaryCommission + '%' : '';
    closePickerCompany();
}
const GetMediatorCompanyAllList = () => {
    clientCustomerApi.GetMediatorCompanyAllList().then(res => {
        if (res.code === 200) {
            state.mediatorCompanyList = res.data;
        }
    }).finally(() => {
        uni.hideLoading();
    });
}

const getReferrerInfo = () => {
    uni.showLoading({
        mask: true
    });
    clientCustomerApi.GetMediatorInfoById().then(res => {
        if (res.code === 200) {
            Object.assign(formData, res.data);
            formData.mediatorCompanyId = res.data.IntermediaryCompanyId;
            intermediaryCommission.value = Number(res.data.intermediaryCommission) ? res.data.intermediaryCommission + '%' : '';
        }
    }).finally(() => {
        uni.hideLoading();
    });
}

const handleSubmit = () => {
    if (!formData.mediatorCompanyId) return uni.showToast({
        title: t('common.placeInputAll'),
        icon: 'none'
    });
    uni.showLoading({
        mask: true
    });

    let api = formData.mediatorId? clientCustomerApi.UpdateMediatorInfo:clientCustomerApi.ApplyMediator;
   api({
        ...formData
    }).then(res => {
        uni.hideLoading();
        if (res.code === 200) {
            getReferrerInfo();
            uni.showToast({
                title: 'Success',
                icon: 'none'
            });
        } else {
            uni.showToast({
                title:'Fail',
                icon: 'none'
            });
        }
    });
}
</script>

<style lang="scss" scoped>
@import "@/static/style/theme.scss";

.referrer-info-wrapper {
    padding: 0 4% 80rpx;
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #F5F5EF;
    .button-wrap {
        display: flex;
        justify-content: space-between;
        width: 700rpx;
        .bottom-btn {
            width: 48%;
            padding: 20rpx 0;
            margin-top: 30rpx;
            color: var(--text-color);
            text-align: center;
            border-radius: 30rpx;
            background: var(--right-linear);
            }
        }
    .referrer-info {
        width: 100%;

        .title {
            padding: 28rpx 0 28rpx 60rpx;
            font-size: 32rpx;
            color: var(--text-color);
            border-radius: 24rpx 24rpx 0 0;
            background: var(--main-color);
            letter-spacing: 2px;
        }

        .info-content {
            width: 100%;
            padding: 20rpx 40rpx;
            border-radius: 0 0 24rpx 24rpx;
            background-color: #FFFFFF;
        }

        .info-item {
            padding-top: 20rpx;
            margin-bottom: 20rpx;
            font-size: 28rpx;
            border-bottom: 1px dashed var(--right-linear);

            .input-box {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 10rpx;

                .value {
                    flex: 1;
                    display: flex;
                    flex-wrap: wrap;
                    color: #242E42;

                    input {
                        width: 100%;
                    }
                }
            }
        }

        .next-btn {
            margin: 60rpx 0;
            font-size: 36rpx;
            color: var(--text-color);
            background: var(--active-color);
            border-radius: 10rpx;
            letter-spacing: 4px;
        }
    }
}
</style>