talent_map/uniapp/pages/user/company.vue

<template>
	<view class="huodong-details">

		<view class="p-30 ">
			<view class="detail-title">
				联系信息
			</view>
			<view class="content-box bg-white m-t-30">
				<view class="detail-cell row-between u-border-bottom">
					<view class="width75">
						企业名称
					</view>
					<view class="text-right flex-1">
						<text class="muted">{{userInfo.nickname}}</text>
					</view>
				</view>
				<view class="detail-cell row-between u-border-bottom">
					<view class="width75">
						联系人
					</view>
					<view class="text-right flex-1">
						<text class="muted">{{userInfo.profile.contact}}</text>
					</view>
				</view>
				<view class="detail-cell row-between u-border-bottom">
					<view class="width75">
						联系电话
					</view>
					<view class="text-right flex-1">
						<text class="muted">{{userInfo.tel}}</text>
					</view>
				</view>
			</view>

			<view class="detail-title m-t-30">
				反馈信息
			</view>
			<view class="content-box m-t-30  bj-w ">
				<view class="detail-cell row-between u-border-bottom" @tap="showChainPopup=true">
					<view class="width75">
						产业链
					</view>
					<view class="text-right flex-1">
						<text class="muted">{{info.chain}}</text>
						<u-icon name="arrow-right" size="28" color="#B8B8B8" :label="info.chain ? '' :'请选择'" label-pos="left"></u-icon>
					</view>
				</view>
				<view class="detail-cell row-between u-border-bottom" @tap="showModule=true">
					<view class="width75">
						数据类型
					</view>
					<view class="text-right flex-1">
						<text class="muted">{{moduleTitle}}</text>
						<u-icon name="arrow-right" size="28" color="#B8B8B8" :label="info.module ? '' :'请选择'" label-pos="left"></u-icon>
					</view>
				</view>
				<view class="detail-cell row-between u-border-bottom">
					<view class="width75">
						企业名称
					</view>
					<view class="text-right flex-1">
						<input type="text" v-model="info.title" placeholder="请输入">
					</view>
				</view>
				<view class="detail-cell row-between u-border-bottom">
					<view class="width75">
						联系人
					</view>
					<view class="text-right flex-1">
						<input type="text" v-model="info.principal" placeholder="请输入">
					</view>
				</view>
				<view class="detail-cell row-between u-border-bottom">
					<view class="width75">
						联系电话
					</view>
					<view class="text-right flex-1">
						<input type="text" v-model="info.tel" placeholder="请输入">
					</view>
				</view>

				<view class="detail-cell row-between " @click="goMap">
					<view class="width75 ">
						企业地址
					</view>
					<view class=" text-right flex-1">
						<text class="muted" v-if="info.address">{{info.address}}</text>
						<u-icon name="map-fill" size="28" color="#B8B8B8" label="请选择" label-pos="left" v-else></u-icon>
					</view>
				</view>

				<view class="detail-biaoti bold">
					企业简介
				</view>
				<view class="p-b-20">
					<textarea v-model="info.intro" id="" maxlength="999" placeholder="请输入"></textarea>
					<view class="muted text-right">
						{{ info.intro.length }}/999
					</view>
				</view>
			</view>
		</view>

		<view class="footer">
			<button class="white btn lg" @click="handleConsult">提交</button>
		</view>

		<!-- 组件 产业链 -->
		<chain v-model="showChainPopup" @change="handleChain"></chain>
		<!-- 数据类型 -->
		<u-select v-model="showModule" mode="single-column" :list="moduleList" :default-value="moduleSelect" confirm-color="#D90D0C" @confirm="moduleConfirm"></u-select>
	</view>
</template>

<script>
	import {
		getTalentsModule,
		postTalents
	} from "@/api/app";
	import {
		mapGetters
	} from 'vuex';
	import Chain from "./components/chain.vue"
	export default {
		components: {
			Chain
		},
		data() {
			return {
				info: {
					category_id: 0,
					title: '',
					tel: '',
					address: '',
					chain: '',
					module: '',
					intro: '',
					principal: '',
				},
				showChainPopup: false,
				showModule: false,
				moduleList:[],
				moduleTitle: '',
				moduleSelect:[0]
			}
		},
		async onLoad() {
			this.getModuleListFun();
		},
		methods: {
			// 获取
			async getModuleListFun() {
				const {
					code,
					data
				} = await getTalentsModule({})
				if (code == 1) {
					this.moduleList = data.map((item, index) => {
						return  {
							value: item.name,
							label: item.title,
							extra: index
						};
					})
					this.info.module = this.moduleList[0].value;
					this.moduleTitle = this.moduleList[0].label
				}
			},
			moduleConfirm(e){
				const {value, label, extra} = e[0];
				this.info.module = value;
				this.moduleTitle = label
				this.moduleSelect = [extra || 0]
			},
			handleChain(cate) {
				this.info.chain = cate.title;
				this.info.category_id = cate.id;
			},
			goMap() {
				const that = this
				uni.chooseLocation({
					success: function(res) {
						that.info.address = res.address
					}
				})
			},

			handleConsult() {
				postTalents(this.info).then(res => {
					this.$toast({
						title: res.msg
					}, res.code == 1 ? {
						tab: 3,
						url: 1
					} : {});
				})

			},

		},
		computed: {
			...mapGetters(['userInfo', 'appConfig']),
		}



	}
</script>

<style lang="less" scoped>
	.huodong-details {
		padding-bottom: calc(200rpx + env(safe-area-inset-bottom));
	}

	.details-images {
		height: 408rpx;
		border-radius: 20rpx;
		overflow: hidden;
		width: 100%;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.detail-title {
		// font-size: 36rpx;
		font-weight: bold;
		// padding: 30rpx 0;
	}

	.detail-cell {
		display: flex;
		// align-items: center;
		padding: 30rpx 0;

		.cell-img {
			padding: 5rpx 0;

			image {
				width: 48rpx;
				height: 48rpx;
				display: block
			}
		}

	}

	// .muted {
	// 	color: #989898;
	// 	padding-left: 10rpx;
	// }

	.detail-biaoti {
		// font-size: 36rpx;
		height: 88rpx;
		line-height: 88rpx;
	}

	.bj-w {
		background-color: #fff;
	}

	.padding-30 {
		padding: 0 30rpx !important;

	}

	.content-box {
		padding: 0 24rpx;
		box-shadow: 0rpx 8rpx 16rpx 2rpx rgba(0, 0, 0, 0.03);
		border-radius: 12rpx 12rpx 12rpx 12rpx;

		input {
			font-size: 28rpx;
		}

		textarea {
			width: 100%;
			height: 100rpx;
			font-size: 28rpx;
		}
	}

	.btn-r-border {
		position: relative;

		&::after {
			content: ' ';
			width: 1rpx;
			height: 36rpx;
			background-color: #CCCCCC;
			right: 0;
			top: 50%;
			margin-top: -18rpx;
			position: absolute;
		}
	}

	.width75 {
		width: 150rpx;
		font-weight: bold;
	}
</style>


<style lang="scss">
	.footer {
		left: 0%;
		bottom: 50rpx;
		width: 100%;
		padding: 0 24rpx;
		position: fixed;
		z-index: 99;

		.btn {
			height: 84rpx;
			line-height: 84rpx;
			background-color: $-color-primary;
			box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(243, 113, 113, 0.39);
			border-radius: 18rpx 18rpx 18rpx 18rpx;
		}
	}
</style>