XEH-miniProgram/pages/self/enterprise/components/BaseInfo.vue

<template>
	<view class="info-panel">
		<view class="space"></view>
		<view class="row">
			<view class="label">企业Logo</view>
			<image class="avatar" src="@/static/auth-icon.png" mode="aspectFill"></image>
		</view>
		<view class="row">
			<view class="label">企业全称</view>
			<input class="text" type="text" placeholder="必填" placeholder-class="gray" v-model="form.customerName" />
		</view>
		<view class="row">
			<view class="label">企业简称</view>
			<input class="text" type="text" placeholder="选填" placeholder-class="gray" v-model="form.customerTitle" />
		</view>
		<view class="row">
			<view class="label">统一信用代码</view>
			<input class="text" type="text" placeholder="选填" placeholder-class="gray" v-model="form.customerUsci" />
		</view>
		<view class="row">
			<view class="label">注册资本</view>
			<input class="text" type="text" placeholder="选填" placeholder-class="gray" v-model="form.capital" />
		</view>
		<view class="row no-border">
			<view class="label">注册地址</view>
			<input class="text" type="text" placeholder="选填" placeholder-class="gray" v-model="form.address" />
		</view>
		<view class="space"></view>
		<picker :range="companyTypeList" range-key="dictLabel" @change="onCompanyTypePickerChange">
			<view class="row">
				<view class="label">企业类型</view>
				<view :class="{text: true, gray: !form.companyType}">{{ form.companyType ? filterDict(form.companyType, companyTypeList) : '请选择' }}</view>
				<image class="arrow" src="@/static/svg/arrow.svg"></image>
			</view>
		</picker>
		<picker :range="companyTaxList" range-key="dictLabel" @change="onCompanyTaxPickerChange">
			<view class="row">
				<view class="label">纳税性质</view>
				<view :class="{text: true, gray: !form.tax}">{{ form.tax ? filterDict(form.tax, companyTaxList) : '请选择' }}</view>
				<image class="arrow" src="@/static/svg/arrow.svg"></image>
			</view>
		</picker>
		<picker mode="region" @change="onRegionPickerChange">
			<view class="row">
				<view class="label">所属地区</view>
				<view :class="{text: true, gray: !form.region}">{{ form.region || '请选择' }}</view>
				<image class="arrow" src="@/static/svg/arrow.svg"></image>
			</view>
		</picker>
		<picker :range="companyIndustryList" range-key="dictLabel" @change="onCompanyIndustryPickerChange">
			<view class="row">
				<view class="label">所属行业</view>
				<view :class="{text: true, gray: !form.industry}">{{ form.industry ? filterDict(form.industry, companyIndustryList) : '请选择' }}</view>
				<image class="arrow" src="@/static/svg/arrow.svg"></image>
			</view>
		</picker>
		<picker :range="companySizeList" range-key="dictLabel" @change="onCompanySizePickerChange">
			<view class="row">
				<view class="label">人员规模</view>
				<view :class="{text: true, gray: !form.staffSize}">{{ form.staffSize ? filterDict(form.staffSize, companySizeList) : '请选择' }}</view>
				<image class="arrow" src="@/static/svg/arrow.svg"></image>
			</view>
		</picker>
		<view class="space"></view>
		<view class="row">
			<view class="label">联系人</view>
			<input class="text" type="text" placeholder="选填" placeholder-class="gray" v-model="form.contact" />
		</view>
		<view class="row">
			<view class="label">联系电话</view>
			<input class="text" type="text" placeholder="选填" placeholder-class="gray" v-model="form.tel" maxlength="11"/>
		</view>
		<view class="row">
			<view class="label">电子件接收邮箱</view>
			<input class="text" type="text" placeholder="选填" placeholder-class="gray" v-model="form.email" />
		</view>
	</view>
</template>

<script>
import systemService from '@/api/system.js';
import enterpriseService from '@/api/enterprise.js';
import { filterDict } from '@/utils/util.js';
export default {
	data() {
		return {
			form: {
				customerName: '',
				customerTitle: '',
				customerUsci: '',
				capital: '',
				address: '',
				companyType: '',
				tax: '',
				region: '',
				industry: '',
				staffSize: '',
				contact: '',
				tel: '',
				email: ''
			},
			companyTypeList: [],
			companyTaxList: [],
			companyIndustryList: [],
			companySizeList: [],
		};
	},
	created() {
		this.getOptionsConfig();
	},
	beforeDestroy() {
		this.updateEnterpriseInfo();
	},
	methods: {
		// 修改企业资料
		async updateEnterpriseInfo() {
			if(!this.form.customerName) return
			await enterpriseService.addEnterprise(this.form);
		},
		// 获取选项配置
		async getOptionsConfig() {
			const { rows: companyTypeList } = await systemService.getDict('biz_company_type');
			const { rows: companyTaxList } = await systemService.getDict('biz_company_tax ');
			const { rows: companyIndustryList } = await systemService.getDict('biz_company_industry');
			const { rows: companySizeList } = await systemService.getDict('biz_company_size');
			this.companyTypeList = companyTypeList;
			this.companyTaxList = companyTaxList;
			this.companyIndustryList = companyIndustryList;
			this.companySizeList = companySizeList;
		},
		// 监听选择器变化-企业类型
		onCompanyTypePickerChange(e) {
			this.form.companyType = this.companyTypeList[e.detail.value].dictValue;
		},
		// 监听选择器变化-纳税性质
		onCompanyTaxPickerChange(e) {
			this.form.tax = this.companyTaxList[e.detail.value].dictValue;
		},
		// 监听选择器变化-省市区
		onRegionPickerChange(e) {
			this.form.region = e.detail.value.join('/');
		},
		// 监听选择器变化-所属行业
		onCompanyIndustryPickerChange(e) {
			this.form.industry = this.companyIndustryList[e.detail.value].dictValue;
		},
		// 监听选择器变化-人员规模
		onCompanySizePickerChange(e) {
			this.form.staffSize = this.companySizeList[e.detail.value].dictValue;
		},
		// 引用方法需要手动注入，否则报错
		filterDict
	}
};
</script>

<style lang="scss" scoped>
.info-panel {
	font-size: 27.47rpx;

	.row {
		min-height: 96.15rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20.6rpx 41.21rpx;
		box-sizing: border-box;
		background: #fff;
		position: relative;
		color: #515151;
		border-bottom: 1rpx solid #e0e0e0;
		&.no-border {
			border: none;
		}

		.label {
			white-space: nowrap;
			margin-right: 54.95rpx;
		}

		.text {
			flex: 1;
			text-align: right;
		}

		.arrow {
			width: 27.47rpx;
			height: 27.47rpx;
			margin-left: 6.87rpx;
		}

		.avatar {
			width: 82.42rpx;
			height: 82.42rpx;
			border-radius: 50%;
		}
		
		/deep/.gray{
			color: #ccc;
		}
	}

	.title {
		color: #666666;
		padding: 0 41.21rpx;
		line-height: 82.42rpx;
	}

	.space {
		background: #f3f3f3;
		height: 13.74rpx;
	}

	.radio-group {
		display: flex;

		.item {
			position: relative;
			padding-left: 43.96rpx;
			line-height: 32.97rpx;
			margin-left: 41.21rpx;

			&:before {
				content: '';
				position: absolute;
				left: 0%;
				top: 50%;
				transform: translateY(-50%);
				width: 30.22rpx;
				height: 30.22rpx;
				border: 1rpx solid #ddd;
				border-radius: 50%;
				box-sizing: border-box;
			}

			.radio {
				width: 32.97rpx;
				height: 32.97rpx;
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				display: none;
				z-index: 1;
			}

			&.active .radio {
				display: block;
			}
		}
	}
}
</style>