baiyuApp/pages/expert/info.vue

<template>
	<view style="position: relative;">
		<image class="page_bg" :src="form.backGround||defaultBg" mode="widthFix" :style="{transform: 'scale('+scale+')'}"></image>
		<view class="content-header">
			<image class="backicon" src="/static/image/liveStream/back_white_icon.png" mode="aspectFill"
				@click="$navBack()"></image>
			<view class="editinfo x-f">
				<image class="es-w-32 es-h-33 es-mr-12" src="/static/image/liveStream/change_bg_icon.png"
					mode="aspectFill" @tap="chooseImage('bg')"></image>设置背景
			</view>
		</view>
		<u-sticky offsetTop="0" customNavHeight="0" zIndex="999">
			<view class="content-header-sticky"
				:style="{height:`calc(${statusBarHeight}px + 44px)`,opacity:opacity,display:showNav? 'flex':'none'}"
				@click.stop="">
				<image src="/static/image/black_back.png" mode="aspectFill" @click="$navBack()"></image>
			</view>
		</u-sticky>
		<view class="content-body">
			<view class="content-box">
				<u--form ref="uForm" :rules="rules" :model="form" labelPosition="left" labelWidth="150rpx"
					errorType="toast">
					<view class="boxtitle">
						<text class="es-fw-600 es-fs-40">基础信息</text><text
							class="es-fw-400 es-fs-24 es-c-99 es-ml-24">(必填项)</text>
					</view>
					<u-form-item borderBottom label="头像" prop="avatar" :borderBottom="false">
						<view class="x-f es-pe flex">
							<image class="head" @tap="chooseImage('avatar')" :src="form.avatar||'/static/images/detault_head.jpg'" mode="aspectFill"></image>
							<u-icon class="es-ml-14" name="arrow-right" size="14" bold color="#757575"></u-icon>
						</view>
					</u-form-item>
					<u-form-item borderBottom label="昵称" prop="nickName" :borderBottom="false">
						<view class="x-f es-pe flex" @click="openPop('nickName')">
							<text class="placeholderClass" :style="{color: form.nickName ?'#222':'#999'}">{{form.nickName}}</text>
							<u-icon class="es-ml-14" name="arrow-right" size="14" bold color="#757575"></u-icon>
						</view>
					</u-form-item>
					<u-form-item borderBottom label="简介" prop="title" :borderBottom="false">
						<view class="x-f es-pe flex" @click="openPop('title')">
							<text class="placeholderClass" :style="{color: form.title ?'#222':'#999'}">{{form.title || '介绍喜好、个性'}}</text>
							<u-icon class="es-ml-14" name="arrow-right" size="14" bold color="#757575"></u-icon>
						</view>
					</u-form-item>
					<u-form-item borderBottom label="性别" prop="sex" :borderBottom="false">
						<picker class="x-f es-pe flex" @change="bindPickerChange($event)" :value="sexIndex" :range="sexArray">
							<view class="x-f es-pe flex">
								<text class="placeholderClass" :style="{color: form.sex === 0 || form.sex == 1 || form.sex == 2 ?'#222':'#999'}">
									{{form.sex === 0 ? '男' : form.sex == 1 ? '女' : form.sex == 2 ? '未知':'请选择性别'}}
								</text>
								<u-icon class="es-ml-14" name="arrow-right" size="14" bold color="#757575"></u-icon>
							</view>
						</picker>
					</u-form-item>
					<u-form-item borderBottom label="生日" prop="birthDay" :borderBottom="false">
						<picker class="x-f es-pe flex" :value="birthDay" mode="date" fields="day" @change="birthdayChange">
							<view class="x-f es-pe flex">
								<text class="placeholderClass" :style="{color: form.birthDay ?'#222':'#999'}">
									{{form.birthDay ? form.birthDay.substring(0,10) : '请选择生日'}}
								</text>
								<u-icon class="es-ml-14" name="arrow-right" size="14" bold color="#757575"></u-icon>
							</view>
						</picker>
					</u-form-item>
					<u-form-item borderBottom label="手机号" prop="phone" :borderBottom="false">
						<view class="x-f es-pe flex" @click="openPop('phone')">
							<text class="placeholderClass" :style="{color: form.phone ?'#222':'#999'}">{{form.phone || '请填写手机号'}}</text>
							<u-icon class="es-ml-14" name="arrow-right" size="14" bold color="#757575"></u-icon>
						</view>
					</u-form-item>
					<u-form-item borderBottom label="所在地" prop="address" :borderBottom="false">
						<picker :value="multiIndex" class="x-f es-pe flex" mode="multiSelector" range-key="n" :range="addressList" @change="pickerChangeCity"  @columnchange="pickerColumnchange">
							<view class="x-f es-pe flex">
								<text class="placeholderClass" :style="{color: form.address ?'#222':'#999'}">
									{{form.address ? form.address : '请选择所在地'}}
								</text>
								<u-icon class="es-ml-14" name="arrow-right" size="14" bold color="#757575"></u-icon>
							</view>
						</picker>
					</u-form-item>
					<u-form-item borderBottom label="抖音链接" prop="tiktokLink" :borderBottom="false">
						<view class="x-f es-pe flex" @click="openPop('tiktokLink')">
							<text class="placeholderClass" :style="{color: form.tiktokLink ?'#222':'#999'}">{{form.tiktokLink}}</text>
							<u-icon class="es-ml-14" name="arrow-right" size="14" bold color="#757575"></u-icon>
						</view>
					</u-form-item>
					<u-form-item borderBottom label="快手链接" prop="kwaiLink" :borderBottom="false">
						<view class="x-f es-pe flex" @click="openPop('kwaiLink')">
							<text class="placeholderClass" :style="{color: form.kwaiLink ?'#222':'#999'}">{{form.kwaiLink}}</text>
							<u-icon class="es-ml-14" name="arrow-right" size="14" bold color="#757575"></u-icon>
						</view>
					</u-form-item>
				</u--form>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="popupbox">
				<view class="popupbox-head">
					<view class="popupbox-cancel" @tap="close">取消</view>
					<text class="popupbox-head-title">{{poptitle}}</text>
					<view class="popupbox-confirm" @tap="confirm">确定</view>
				</view>
				<view class="popupbox-body">
					<view class="inpubox" v-show="poptitle">
						<uni-easyinput :type="type" v-model="inputVal" :trim="true" :inputBorder="false" :primaryColor="'#c0c4cc'"
							placeholderClass="placeholderClass" placeholderStyle="color: #999" :placeholder="placeholder" :maxlength="maxlength" />
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>
<script>
	import { premissionCheck } from '@/js_sdk/wa-permission/permission.js';
	import {
		getTalentByToken,
		updateTalent
	} from "@/api/expert.js"
	import {getCitys}  from '@/api/common.js'
	export default {
		data() {
			return {
				userId: '',
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight,
				defaultBg: "https://zkzh-2025.oss-cn-beijing.aliyuncs.com/appimgs/e5fb40b2b6e640b48e5f055c786dd289.png",
				customNavHeight: 22,
				showNav: false,
				opacity: 1,
				form: {
					avatar:"",
					title: "",
					nickName: "",
					birthDay:"",
					phone:"",
					address:"",
					sex: 0,
					province:"",
					city: "",
					district: "",
					backGround: "",
					tiktokLink:"",
					kwaiLink: "",
				},
				rules: {},
				user: {},
				birthDay: "",
				sexArray: ['男', '女','未知'],
				sexIndex: 0,
				addressList:[[],[],[]],
				multiIndex:[0,0,0],
				address:[],
				poptitle: "",
				placeholder: "",
				inputVal: "",
				type: "text",
				maxlength: 300,
				scale: 1,
				mescroll:null,
				downOption: {   //下拉刷新
				 	use:true,
					auto: false, // 不自动加载 (mixin已处理第一个tab触发downCallback)
					textInOffset: '', // 下拉的距离在offset范围内的提示文本
					textOutOffset: '', // 下拉的距离大于offset范围的提示文本
					textLoading: '', // 加载中的提示文本
					textSuccess: '', // 加载成功的文本
					textErr: '', // 加载失败的文本
				},
				upOption: {
					onScroll:false,
					use: false, // 是否启用上拉加载; 默认true
					page: {
						pae: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					textNoMore:"已经到底了",
					empty: {
						icon:'https://zkzh-2025.oss-cn-beijing.aliyuncs.com/appimgs/cf4a86b913a04341bb44e34bb4d37aa2.png',
						tip: '暂无数据'
					}
				},
				dataList: [],
			}
		},
		onLoad() {
			this.customNavHeight = this.statusBarHeight / 2 + 44;
			this.user = this.$getUserInfo()
			this.userId = this.user.userId || ''
			this.getInfo()
			this.getCitys()
		},
		methods: {
			getInfo() {
				getTalentByToken().then(res => {
					if (res.code == 200) {
						const info = res.data.fsUserTalent
						this.form = {
							avatar: info.avatar,
							title: info.title || '',
							nickName: info.nickName || '',
							birthDay: info.birthDay,
							phone: info.phone || '',
							address: info.address,
							province: info.province,
							city: info.city,
							district: info.district,
							sex: info.sex,
							backGround: info.backGround,
							tiktokLink: info.tiktokLink,
							kwaiLink: info.kwaiLink,
						}
					}
				})
			},
			// 选择照片
			async chooseImage(type) {
				// #ifdef APP-PLUS
				if (!plus.runtime.isAgreePrivacy()) {
					uni.showToast({
						title: "请同意隐私政策",
						icon: "none"
					});
					return;
				}
				let result = await premissionCheck("EXTERNAL_STORAGE");
				// #endif
				// #ifndef APP-PLUS
				let result = 1
				// #endif
				if (result == 1) {
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: ['album', 'camera'], //从相册选择
						success: (res) => {
							uni.uploadFile({
								url: uni.getStorageSync('requestPath') + '/app/common/uploadOSS', //仅为示例，非真实的接口地址
								filePath: res.tempFilePaths[0],
								name: 'file',
								formData: {
									'user': 'test' // 上传附带参数
								},
								success: (uploadFileRes) => {
									console.log(uploadFileRes)
									// 根据接口具体返回格式   赋值具体对应url
									let data = JSON.parse(uploadFileRes.data)
									if(type == 'avatar') {
										this.form.avatar = data.url;
									} else {
										this.form.backGround = data.url;
									}
									this.submit()
								},
								fail: res=> {
									uni.showToast({
										title: "上传头像失败",
										icon: "none"
									})
								}
							});
						}
					});
				}
			},
			openPop(type) {
				if(type=="nickName") {
					this.poptitle = '昵称'
					this.placeholder = '请输入昵称'
					this.type = 'text'
					this.inputVal = this.form.nickName
					this.maxlength = 20
				} else if (type=="title") {
					this.poptitle = '简介'
					this.placeholder = '介绍喜好、个性'
					this.type = 'text'
					this.inputVal = this.form.title
					this.maxlength = 100
				} else if (type=="phone") {
					this.poptitle = '手机号'
					this.placeholder = '请输入手机号'
					this.type = 'number'
					this.inputVal = this.form.phone
					this.maxlength = 11
				} else if (type=="tiktokLink") {
					this.poptitle = '抖音链接'
					this.placeholder = '请输入抖音链接'
					this.type = 'text'
					this.inputVal = this.form.tiktokLink
					this.maxlength = 40
				} else if (type=="kwaiLink") {
					this.poptitle = '快手链接'
					this.placeholder = '请输入快手链接'
					this.type = 'text'
					this.inputVal = this.form.kwaiLink
					this.maxlength = 40
				}
				this.$refs.popup.open()
			},
			confirm() {
				if(this.poptitle=="昵称") {
					if (!this.inputVal.trim()) {
						uni.showToast({
							title: '请输入昵称',
							icon: "none"
						})
						return
					}
					this.form.nickName = this.inputVal
				} else if(this.poptitle=="简介") {
					// if (!this.inputVal.trim()) {
					// 	uni.showToast({
					// 		title: '请输入简介',
					// 		icon: "none"
					// 	})
					// 	return
					// }
					this.form.title = this.inputVal
				} else if (this.poptitle=="手机号") {
					const reg = /^1[3-9]\d{9}$/;
					if (!reg.test(this.inputVal)) {
						uni.showToast({
							title: '请输入正确的手机号',
							icon: "none"
						})
						return
					}
					this.form.phone = this.inputVal
				} else if(this.poptitle=="快手链接") {
					this.form.kwaiLink = this.inputVal
				} else if(this.poptitle=="抖音链接") {
					this.form.tiktokLink = this.inputVal
				}
				this.$refs.popup.close()
				this.submit()
			},
			close() {
				this.$refs.popup.close()
			},
			bindPickerChange(e) {
				this.sexIndex = e.detail.value
				this.form.sex = this.sexIndex
				this.submit()
			},
			// 生日
			birthdayChange(e) {
				this.birthDay = e.detail.value
				this.form.birthDay = this.birthDay
				this.submit()
			},
			// 地区选择
			pickerChangeCity(e) {
				this.multiIndex = e.detail.value;
				// 数组内的下标
				// 获取一级类目
				// 获取二级类目
				// 获取三级类目
				this.form.address=this.addressList[0][this.multiIndex[0]].n+this.addressList[1][this.multiIndex[1]].n+this.addressList[2][this.multiIndex[2]].n
				this.form.province=this.addressList[0][this.multiIndex[0]].n
				this.form.city=this.addressList[1][this.multiIndex[1]].n
				this.form.district=this.addressList[2][this.multiIndex[2]].n
				this.submit()
			},
			pickerColumnchange(e){
				// 第一列滑动
				if(e.detail.column === 0){
					this.multiIndex[0] =  e.detail.value
					// console.log('第一列滑动');
					this.addressList[1] = this.address[this.multiIndex[0]].c;
					this.addressList[2] = this.address[this.multiIndex[0]].c[0].c
					// 第一列滑动  第二列 和第三列 都变为第一个
					this.multiIndex.splice(1, 1, 0)
					this.multiIndex.splice(2, 1, 0)
				}
				// 第二列滑动
				if(e.detail.column === 1){
					this.multiIndex[1] =  e.detail.value
					// console.log('第二列滑动');
					// console.log(this.multiIndex)
					this.addressList[2] = this.address[this.multiIndex[0]].c[this.multiIndex[1]].c
					// 第二列 滑动 第三列 变成第一个
					this.multiIndex.splice(2, 1, 0)
				}
				// 第三列滑动
				if(e.detail.column === 2){
					this.multiIndex[2] =  e.detail.value
				}
			},
			getCitys(){
				getCitys().then(
					res => {
						if(res.code==200){
							this.address=res.data
							for(var i=0; i<this.address.length; i++){
								this.addressList[0].push(this.address[i])
							}
							for(var i=0; i<this.address[0].c.length; i++){
								this.addressList[1].push(this.address[0].c[i])
							}
							for(var i=0; i<this.address[0].c[0].c.length; i++){
								this.addressList[2].push(this.address[0].c[0].c[i])
							}
						}else{
							uni.showToast({
								icon:'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
			submit() {
				updateTalent(this.form).then(res=>{
					if(res.code != 200) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*下拉刷新的回调 */
			downCallback(mescroll) {
				setTimeout(()=>{
					this.mescroll.endSuccess();
				}, 500)
			},
			upCallback(page) {
				setTimeout(()=>{
					this.mescroll.endSuccess();
				}, 500)
			},
		},
		onPageScroll(e) {
			if (e.scrollTop <= 136) {
				this.showNav = false
				this.opacity = 0
			} else if (e.scrollTop > 136) {
				this.opacity = e.scrollTop / 216 * 1 > 1 ? 1 : e.scrollTop / 216 * 1
				this.showNav = true
			}

		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}

	::v-deep {
		.u-form-item__body__left__content__label {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #757575;
		}
		.placeholderClass {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 32rpx;
			color: #999;
		}
	}
	.head{
		border-radius: 50%;
		width: 96rpx;
		height: 96rpx;
	}
	.page_bg {
		width: 100%;
		height: 400rpx;
		position: absolute;
		top: 0;
		left: 0;
	}

	.content-header {
		position: relative;
		width: 100%;
		height: calc(var(--status-bar-height) + 44px);
		padding: 12rpx 24rpx;
		padding-top: calc(var(--status-bar-height) + 12rpx);
		@include u-flex(row-reverse, center, space-between);

		&-sticky {
			background-color: #fff;
			@include u-flex(row, center, center);
			position: absolute;
			width: 100%;
			top: 0;
			left: 0;
			padding-top: calc(var(--status-bar-height));

			image {
				width: 64rpx;
				height: 64rpx;
				position: absolute;
				top: calc(var(--status-bar-height));
				left: 24rpx;
			}
		}
	}

	.backicon {
		width: 64rpx;
		height: 64rpx;
		position: fixed;
		left: 24rpx;
		top: calc(var(--status-bar-height));
		z-index: 998;
	}

	.editinfo {
		background: rgba(0, 0, 0, 0.5);
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		padding: 15rpx 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
	}

	.content-body {
		font-family: PingFang SC;
		font-weight: 400;
		position: relative;
		color: #222222;
		padding-top: 256rpx;

		.content-box {
			background: #FFFFFF;
			border-radius: 32rpx 32rpx 0rpx 0rpx;
			padding: 32rpx;
		}

		.boxtitle {
			font-family: PingFang SC, PingFang SC;
			font-weight: 600;
			font-size: 40rpx;
			color: #222222;
		}

		.editinfo {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
		}
	}
	.popupbox {
		background-color: #f7f7f7;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		&-head {
			padding: 24rpx;
			@include u-flex(row, center, space-between);
			&-title {
				font-size: 30rpx;
			}
		} 
		&-cancel {
			color: #999;
		}
		&-confirm {
			color: #2583EB;
		}
		&-body {
			min-height: 100rpx;
			padding: 24px;
			box-sizing: border-box;
		}
		.inpubox {
			background-color: #fff;
		}
	}
</style>