chunwan/pages/users/edit/index.vue

<template>
	<view class="edit">
		<view class="edit-navbar">
			<u-navbar title="编辑资料" back-icon-color="#333333" title-color="#333333" :background="background">
				<view class="slot-wrap" slot="right">
					<view class="btn" @click="toSave()">保存</view>
				</view>
			</u-navbar>
		</view>
		<view class="edit-user">
			<view class="user">
				<view class="pic" @click="toNext(userInfo.faceImage?1:3)">
					<image class="avatar" v-if="userInfo.faceImage" :src="userInfo.faceImage"></image>
					<image class="avatar" v-else :src="baseUrl+userInfo.img"></image>
					<image class="xiangji" src="@/static/xiangji.png"></image>
				</view>
			</view>
			<view class="tips">
				<text>尊敬的用户，个人资料内容必须遵守相关法规和平台规则，上传过于暴露的照片、违规昵称宣言将会被封禁。\n\n您的头像会用于进行实名认证图片比对，若比对不通过，则修改失败。</text>
			</view>
		</view>
		<view class="edit-hd">
			<view class="title">交友宣言</view>
			<view class="xuanyan">
				<image class="icon" src="@/static/editor.png"></image>
				<textarea v-model="userInfo.declaration" placeholder="介绍一下自己"></textarea>
			</view>
		</view>
		<view class="edit-hd">
			<view class="title">语音签名</view>
			<view class="qianming">
				<view class="box" v-if="userInfo.voiceTime">
					{{userInfo.voiceTime?userInfo.voiceTime+"″":'暂无录音'}}
				</view>
				<view class="icon" @click="toPage()">
					{{userInfo.voiceTime?"重新录制":'立即录制'}}<image src="@/static/icon-arrow.png"></image>
				</view>
			</view>
		</view>
		<view class="edit-bd">
			<view class="title">基本信息<text>完善基本资料，让Ta了解你多一点</text></view>
			<view class="content">
				<view class="item">
					<view class="a">昵称</view>
					<view class="b">
					<input type="text" v-model="userInfo.nickname" placeholder="请输入" />	
					<image src="@/static/icon-arrow.png"></image></view>
				</view>
				<view class="item">
					<view class="a">出生日期</view>
					<view class="b">
						<picker mode="date" :end="endDate" :value="userInfo.birthday" @change="pickerDate1">
							{{userInfo.birthday}}
						</picker>
						<image src="@/static/icon-arrow.png"></image></view>
				</view>
				<view class="item">
					<view class="a">性别</view>
					<view class="b">{{userInfo.sex==1?'男':'女'}}</view>
				</view>
				<view class="item">
					<view class="a">身高</view>
					<view class="b"><picker :range="pickerList1" :value="pickerIndex1" @change="pickerDate2">
					<view class="txt" :class="userInfo.height?'txt-on':''">{{userInfo.height?userInfo.height:'请选择'}}</view>
					</picker><image src="@/static/icon-arrow.png"></image></view>
				</view>
				<view class="item">
					<view class="a">体重{{pickerIndex2}}</view>
					<view class="b"><picker :range="pickerList2" :value="pickerIndex2" @change="pickerDate3">
						<view class="txt" :class="userInfo.weight?'txt-on':''">{{userInfo.weight?userInfo.weight:'请选择'}}</view>
					</picker><image src="@/static/icon-arrow.png"></image></view>
				</view>
				<view class="item">
					<view class="a">年收入</view>
					<view class="b"><picker :range="pickerList3" range-key="dictLabel" :value="pickerIndex3" @change="pickerDate4">
							<view class="txt" :class="userInfo.annualIncome?'txt-on':''">{{userInfo.annualIncome?userInfo.annualIncome:'请选择'}}</view>
						</picker><image src="@/static/icon-arrow.png"></image>
					</view>
				</view>
				<view class="item">
					<view class="a">学历</view>
					<view class="b"><picker :range="pickerList4" range-key="dictLabel" :value="pickerIndex4" @change="pickerDate5">
							<view class="txt" :class="userInfo.xueli?'txt-on':''">{{userInfo.xueli?userInfo.xueli:'请选择'}}</view>
						</picker><image src="@/static/icon-arrow.png"></image>
					</view>
				</view>
				<view class="item">
					<view class="a">职业</view>
					<view class="b"><input type="text" v-model="userInfo.post" placeholder="请输入" /><image src="@/static/icon-arrow.png"></image></view>
				</view>
				<view class="item">
					<view class="a">现居城市</view>
					<view class="b"><view class="txt" @click="openCity(1)" :class="userInfo.province?'txt-on':''">{{userInfo.province?(userInfo.province+"-"+userInfo.city+"-"+userInfo.district):'请选择'}}</view><image src="@/static/icon-arrow.png"></image></view>
				</view>
				<view class="item">
					<view class="a">家乡</view>
					<view class="b"><view class="txt" @click="openCity(2)" :class="userInfo.province?'txt-on':''">{{userInfo.home?userInfo.home:'请选择'}}</view><image src="@/static/icon-arrow.png"></image></view>
				</view>
				<view class="item">
					<view class="a">星座</view>
					<view class="b">
						<picker :range="pickerList5" range-key="dictLabel" :value="pickerIndex5" @change="pickerDate6">
								<view class="txt" :class="userInfo.constellation?'txt-on':''">{{userInfo.constellation?userInfo.constellation:'请选择'}}</view>
							</picker><image src="@/static/icon-arrow.png"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="edit-bd">
			<view class="title">情感喜好</view>
			<view class="content">
				<view class="item">
					<view class="a">情感状态</view>
					<view class="b"><picker :range="pickerList6" range-key="dictLabel" :value="pickerIndex6" @change="pickerDate7">
								<view class="txt" :class="userInfo.emotion?'txt-on':''">{{userInfo.emotion?userInfo.emotion:'请选择'}}</view>
							</picker><image src="@/static/icon-arrow.png"></image></view>
				</view>
				<view class="item">
					<view class="a">喜欢什么样的异性</view>
					<view class="b">
						<view class="txt" @click="show = true" v-if="!userInfo.sexFlag">请选择</view>
						<view class="list" v-else>
							<view class="li" v-for="(a,i) in userInfo.sexFlag" @click="show = true">{{a}}</view>
						</view>
						<image src="@/static/icon-arrow.png"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="edit-hd">
			<view class="title">相册</view>
			<view class="content">
				<view class="items" v-for="(a,i) in userInfo.xiangce" :key="i">
					<image class="del" @click.stop="toDel(i)" src="@/static/icon-del.png"></image>
					<image class="pic" :src="a"></image>
				</view>
				<view class="upload" @click="toNext(2)">
					<image src="@/static/jia.png"></image>
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="center" border-radius="20">
			<view class="tiao">
				<view class="title">喜欢的异性</view>
				<view class="content">
					<view class="item" v-for="(a,i) in pickerList7" :class="a.isSelect?'item-on':''" @click="tabItem(i)">{{a.dictLabel}}</view>
				</view>
				<view class="btn" @click="toClick()">确认</view>
			</view>
		</u-popup>
		<u-picker mode="region" v-model="show1" :defaultRegion="defaultRegion" @cancel="cancel" @confirm="confirm" ></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show1: false,
				tabIndex: 1,
				show: false,
				background: {
					"background": "#ffffff"
				},
				baseUrl: "",
				userInfo: {},
				pickerList1: [],
				pickerList2: [],
				pickerList3: [],
				pickerList4: [],
				pickerList5: [],
				pickerList6: [],
				pickerList7: [],
				pickerList8: [],
				pickerIndex1: 0,
				pickerIndex2: 0,
				pickerIndex3: 0,
				pickerIndex4: 0,
				pickerIndex5: 0,
				pickerIndex6: 0,
				cityType: 1,
				defaultRegion: [],
				uploadType: 1
			};
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		onReady() {
			const that = this;
			that.baseUrl = that.$baseUrl;
			that.getUserInfo();
			uni.$on("changVioce",res=>{
				that.getUserInfo();
			})
			// 监听从裁剪页发布的事件，获得裁剪结果
			uni.$on('uAvatarCropper', path => {
				if(that.uploadType == 2 || that.uploadType == 3){
					// 可以在此上传到服务端
					uni.uploadFile({
						url: that.$baseUrl+'/prod-api/common/upload',
						filePath: path,
						name: 'file',
						complete: (res) => {
							if(res.statusCode == 200){
								const {code, fileName, url, msg} = JSON.parse(res.data);
								if(code == 200){
									uni.showToast({
										title: "上传成功"
									})
									if(that.uploadType == 2){
										that.userInfo.xiangce.push(url);
									}else{
										that.userInfo.img = url;
									}
									that.$forceUpdate();
								}else{
									uni.showToast({
										icon: "error",
										title: "上传失败"
									})
								}
							}else{
								uni.showToast({
									icon: "error",
									title: "上传失败"
								})
							}
							
						}
					});
				}else{
					// 可以在此上传到服务端
					uni.uploadFile({
						url: that.$baseUrl+'/prod-api/api/user/uploadOSSFile',
						filePath: path,
						name: 'file',
						formData: {
							"userId": uni.getStorageSync("userInfo").id
						},
						complete: (res) => {
							if(res.statusCode == 200){
								const {code, data, msg} = JSON.parse(res.data);
								if(code == 200){
									uni.showToast({
										title: "上传成功"
									})
									that.toReg(data)
								}else{
									uni.showToast({
										icon: "error",
										title: "上传失败"
									})
								}
							}else{
								uni.showToast({
									icon: "error",
									title: "上传失败"
								})
							}
							
						}
					});
				
				}
				
			})
		},
		methods: {
			openCity(index) {
				this.cityType = index;
				if(index == 1){
					this.defaultRegion = this.userInfo.province?[this.userInfo.province,this.userInfo.city,this.userInfo.district]:[]
				}else{
					this.defaultRegion = this.userInfo.home?this.userInfo.home.split("-"):[]
				}
				console.log(this.defaultRegion)
				this.show1 = true;
			},
			cancel() {
				this.show1 = false
			},
			confirm(e){
				this.show1 = false
				console.log(e)
				if(this.cityType == 1){
					this.userInfo.province = e.province.name;
					this.userInfo.city = e.city.name;
					this.userInfo.district = e.area.name;
					this.defaultRegion = [e.province.name,e.city.name,e.area.name]
				}else{
					this.userInfo.home = e.province.name+"-"+e.city.name+"-"+e.area.name;
					this.defaultRegion = [e.province.name,e.city.name,e.area.name]
				}
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			async getUserInfo() {
				const { code, data , msg } = await this.$api.findUserInfo({userId: uni.getStorageSync("userInfo").id});
				if(code == 200){
					this.userInfo = data;
					this.userInfo.xiangce = []
					if(data.reserved1){
						this.userInfo.xiangce = data.reserved1.split(",")
					}
					if(data.province){
						this.defaultRegion = [data.province, data.city, data.district]
					}else{
						this.defaultRegion = uni.getStorageSync("jingweiInfo").province?[uni.getStorageSync("jingweiInfo").province, uni.getStorageSync("jingweiInfo").city, uni.getStorageSync("jingweiInfo").district]:[]
						
					}
					this.userInfo.province = this.defaultRegion[0];
					this.userInfo.city = this.defaultRegion[1];
					this.userInfo.district = this.defaultRegion[2];
					console.log(this.defaultRegion)
					
					this.getDictDataByType();
				}else{
					uni.showToast({
						title: mgs,
						position: "bottom",
						icon: "none",
					})
				}
			},
			//字典查询
			async getDictDataByType() {
				const that = this;
				for(let i = 150;i<=210;i++){
					if((i+"cm") == that.userInfo.height){
						that.pickerIndex1 = (i-150)
					}
					that.pickerList1.push(i+"cm")
				}
				for(let i = 40;i<=120;i++){
					if((i+"kg") == that.userInfo.weight){
						that.pickerIndex2 = (i-40)
					}
					that.pickerList2.push(i+"kg")
				}
				let res1 = await that.$api.getDictDataByType({dictType: 'salary_type'});
				let res2 = await that.$api.getDictDataByType({dictType: 'education_type'});
				let res3 = await that.$api.getDictDataByType({dictType: 'constellation_type'});
				let res4 = await that.$api.getDictDataByType({dictType: 'marriage_type'});
				let res5 = await that.$api.getDictDataByType({dictType: that.userInfo.sex == 1?'sex_type_2':'sex_type_1'});
				if(res1.data && res1.data.length > 0){
					res1.data.map((a,index)=>{
						if(that.userInfo.annualIncome == a.dictValue){
							that.userInfo.annualIncome = a.dictLabel
							that.userInfo.annualIncomeId = a.dictValue
							that.pickerIndex3 = index;
						}
					})
				}
				if(res2.data && res2.data.length > 0){
					res2.data.map((a,index)=>{
						if(that.userInfo.xueli == a.dictValue){
							that.userInfo.xueli = a.dictLabel
							that.userInfo.xueliId = a.dictValue
							that.pickerIndex4 = index
						}
					})
				}
				if(res3.data && res3.data.length > 0){
					res3.data.map((a,index)=>{
						if(that.userInfo.constellation == a.dictValue){
							that.userInfo.constellation = a.dictLabel;
							that.userInfo.constellationId = a.dictValue;
							that.pickerIndex5 = index
						}
					})
				}
				if(res4.data && res4.data.length > 0){
					res4.data.map((a,index)=>{
						if(that.userInfo.emotion == a.dictValue){
							that.userInfo.emotion = a.dictLabel;
							that.userInfo.emotionId = a.dictValue;
							that.pickerIndex6 = index
						}
						
					})
				}
				this.pickerList3 = res1.data;
				this.pickerList4 = res2.data;
				this.pickerList5 = res3.data;
				this.pickerList6 = res4.data;
				let sexFlag = "",arr=[],arr1=[];
				if(res5.data && res5.data.length > 0){
					res5.data.map(a=>{
						a.isSelect = false;
						if(that.userInfo.sexFlag ){
							sexFlag = that.userInfo.sexFlag.split(",")
							sexFlag.map(b=>{
								if(b== a.dictValue){
									arr.push(a.dictLabel) 
									arr1.push(a.dictValue) 
									a.isSelect = true
								}
							})
						}
					})
				}
				if(that.userInfo.sexFlag ){
				that.userInfo.sexFlag = arr;
				that.userInfo.sexFlagIds = arr1;
				}
				this.pickerList7 = res5.data;
			},
			tabItem(index){
				this.pickerList7[index].isSelect = !this.pickerList7[index].isSelect;
			},
			toClick(){
				this.show = false
				let arr = [],arr1=[];
				if(this.pickerList7 && this.pickerList7.length > 0){
					this.pickerList7.map(a=>{
						if(a.isSelect){
							arr.push(a.dictLabel)
							arr1.push(a.dictValue)
						}
					})
				}
				this.userInfo.sexFlag = arr.length>=1?arr:""
				this.userInfo.sexFlagIds = arr1.length>=1?arr1:""
			},
			pickerDate1(e){
				this.userInfo.birthday = e.detail.value
			},
			pickerDate2(e){
				this.userInfo.height = this.pickerList1[e.detail.value]
			},
			pickerDate3(e){
				this.userInfo.weight = this.pickerList2[e.detail.value]
			},
			pickerDate4(e){
				this.userInfo.annualIncome = this.pickerList3[e.detail.value].dictLabel
				this.userInfo.annualIncomeId = this.pickerList3[e.detail.value].dictValue;
				this.pickerIndex3 = e.detail.value;
			},
			pickerDate5(e){
				this.userInfo.xueli = this.pickerList4[e.detail.value].dictLabel
				this.userInfo.xueliId = this.pickerList4[e.detail.value].dictValue
				this.pickerIndex4 = e.detail.value;
			},
			pickerDate6(e){
				this.userInfo.constellation = this.pickerList5[e.detail.value].dictLabel
				this.userInfo.constellationId = this.pickerList5[e.detail.value].dictValue
				this.pickerIndex5 = e.detail.value;
			},
			pickerDate7(e){
				this.userInfo.emotion = this.pickerList6[e.detail.value].dictLabel
				this.userInfo.emotionId = this.pickerList6[e.detail.value].dictValue
				this.pickerIndex6 = e.detail.value;
			},
			toDel(i){
				this.userInfo.xiangce.splice(i,1);
				this.$forceUpdate();
			},
			toNext(index) {
				this.uploadType=index;
				console.log(222,this.uploadType)
				this.$u.route({
					// 关于此路径，请见下方"注意事项"
					url: '/uni_modules/vk-uview-ui/components/u-avatar-cropper/u-avatar-cropper',
					// 内部已设置以下默认参数值，可不传这些参数
					params: {
						// 输出图片宽度，高等于宽，单位px
						destWidth: 700,
						// 裁剪框宽度，高等于宽，单位px
						rectWidth: 300,
						// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
						fileType: 'jpg',
					}
				})
			},
			//去登录
			async toReg(faceImage) {
				const {code, data, msg} = await this.$api.detectLivingFace({
					userId: uni.getStorageSync("userInfo").id,
					faceImage
				})
				if(code == 200){
					this.userInfo.faceImage = faceImage
					this.$forceUpdate();
				}else{
					uni.showToast({
						icon: "none",
						position: "bottom",
						title: msg
					})
				}
				
			},
			toPage() {
				uni.setStorageSync("yuyinInfo",{
					voice: this.userInfo.voice,
					voiceTime: this.userInfo.voiceTime,
				})
				uni.navigateTo({
					url: "/pages/users/yuyin/index"
				})
			},
			async toSave() {
				if(!this.userInfo.declaration){
					uni.showToast({
						icon: "none",
						position: "bottom",
						title: "交友宣言不能为空！"
					})
					return ;
				}
				if(!this.userInfo.nickname){
					uni.showToast({
						icon: "none",
						position: "bottom",
						title: "昵称不能为空！"
					})
					return ;
				}
				if(!this.userInfo.birthday){
					uni.showToast({
						icon: "none",
						position: "bottom",
						title: "出生日期不能为空！"
					})
					return ;
				}
				if(!this.userInfo.height){
					uni.showToast({
						icon: "none",
						position: "bottom",
						title: "请选择身高"
					})
					return ;
				}
				if(!this.userInfo.weight){
					uni.showToast({
						icon: "none",
						position: "bottom",
						title: "请选择体重"
					})
					return ;
				}
				if(!this.userInfo.annualIncome){
					uni.showToast({
						icon: "none",
						position: "bottom",
						title: "请选择年收入"
					})
					return ;
				}
				if(!this.userInfo.xueli){
					uni.showToast({
						icon: "none",
						position: "bottom",
						title: "请选择学历"
					})
					return ;
				}
				if(!this.userInfo.post){
					uni.showToast({
						icon: "none",
						position: "bottom",
						title: "职业不能为空！"
					})
					return ;
				}
				if(!this.userInfo.city){
					uni.showToast({
						icon: "none",
						position: "bottom",
						title: "请选择现居城市"
					})
					return ;
				}
				if(!this.userInfo.home){
					uni.showToast({
						icon: "none",
						position: "bottom",
						title: "请选择家乡"
					})
					return ;
				}
				if(!this.userInfo.emotion){
					uni.showToast({
						icon: "none",
						position: "bottom",
						title: "请选择情感状态"
					})
					return ;
				}
				if(!this.userInfo.sexFlag){
					uni.showToast({
						icon: "none",
						position: "bottom",
						title: "请选择喜欢什么异性"
					})
					return ;
				}
				if(this.userInfo.xiangce.length == 0){
					uni.showToast({
						icon: "none",
						position: "bottom",
						title: "请上传照片"
					})
					return ;
				}
				const {code, data, msg} = await this.$api.editUser({
					id: uni.getStorageSync("userInfo").id,
					nickname: this.userInfo.nickname,
					faceImage: this.userInfo.faceImage,
					xueli: this.userInfo.xueliId,
					img: this.userInfo.img,
					birthday: this.userInfo.birthday,
					declaration: this.userInfo.declaration,
					voice: this.userInfo.voice,
					voiceTime: this.userInfo.voiceTime,
					height: this.userInfo.height,
					weight: this.userInfo.weight,
					post: this.userInfo.post,
					emotion: this.userInfo.emotionId,
					annualIncome: this.userInfo.annualIncomeId,
					home: this.userInfo.home,
					constellation: this.userInfo.constellationId,
					sexFlag: this.userInfo.sexFlagIds.join(","),
					province: this.userInfo.province,
					district: this.userInfo.district,
					city: this.userInfo.city,
					address: this.userInfo.address,
					reserved1: this.userInfo.xiangce.join(","),
				})
				if(code == 200){
					uni.showToast({
						title: "保存成功"
					})
					// this.getUserInfo();
					// this.$forceUpdate();
					setTimeout(()=>{
						uni.navigateBack({
							delta: 1
						})
					},2000)
				}else{
					uni.showToast({
						icon: "none",
						position: "bottom",
						title: msg
					})
				}
			},
		}
	}
</script>

<style scoped lang="scss">
.edit{
	padding: 0 25rpx 25rpx;
	overflow: hidden;
	.tiao{
		width: 670rpx;
		min-height: 570rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		.title{
			font-weight: 500;
			font-size: 36rpx;
			padding: 50rpx 0;
			color: #333333;
			text-align: center;
		}
		.content{
			width: 110%;
			overflow: hidden;
			.item{
				min-width: 180rpx;
				line-height: 80rpx;
				background: #EBEBEB;
				border-radius: 80rpx;
				text-align: center;
				font-weight: 500;
				font-size: 28rpx;
				color: #333333;
				margin-left: 35rpx;
				margin-top: 30rpx;
				float: left;
				&-on{
					background-color: #222222;
					color: #fff;
				}
			}
		}
		.btn{
			width: 520rpx;
			line-height: 100rpx;
			background: linear-gradient(0deg, #000000, #3D3B38);
			box-shadow: 0px 4rpx 18rpx 0px rgba(42,41,39,0.34);
			border-radius: 100rpx;
			text-align: center;
			margin: 0 auto;
			font-size: 30rpx;
			color: #FFFFFF;
			margin-top: 80rpx;
		}
	}
	&-navbar{
		.btn{
			font-weight: 500;
			font-size: 30rpx;
			color: #222222;
			margin-right: 30rpx;
		}
	}
	&-bd{
		width: 100%;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 25rpx 30rpx 0;
		box-sizing: border-box;
		margin-top: 20rpx;
		overflow: hidden;
		.title{
			font-weight: 500;
			font-size: 30rpx;
			color: #222222;
			text{
				float: right;
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
			}
		}
		.content {
			width: 100%;
			box-sizing: border-box;
			.item{
				padding: 40rpx 0;
				border-top: 1px solid #EAEAEA;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-weight: 500;
				font-size: 30rpx;
				&:first-child{
					border-top-color: #FFFFFF;
				}
				.a{
					color: #999999;
				}
				.b{
					display: flex;
					align-items: center;
					justify-content: flex-end;
					flex: 1;
					color: #222222;
					font-size: 30rpx;
					.list{
						max-width: 360rpx;
						.li{
							float: left;
							padding: 0 20rpx;
							line-height: 50rpx;
							background: #000000;
							border-radius: 50rpx;
							font-weight: 500;
							font-size: 24rpx;
							text-align: center;
							color: #FFFFFF;
							margin-top: 10rpx;
							margin-right: 10rpx;
						}
					}
					.txt{
						color: #a3a3a3;
						&-on{
							color: #222222;
						}
					}
					image{
						width: 30rpx;
						height: 30rpx;
						display: block;
						position: relative;
						top: 5rpx;
					}
					input{
						flex: 1;
						text-align: right;
					}
				}
			}
		}
	}
	&-hd{
		width: 100%;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 25rpx 30rpx 30rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
		overflow: hidden;
		.title{
			font-weight: 500;
			font-size: 30rpx;
			color: #222222;
			text{
				float: right;
				font-weight: 500;
				font-size: 24rpx;
				color: #999999;
			}
		}
		.content{
			width: 110%;
			.items{
				width: 200rpx;
				height: 200rpx;
				border-radius: 10rpx;
				float: left;
				position: relative;
				margin-top: 20rpx;
				margin-right: 20rpx;
				.pic{
					width: 100%;
					height: 100%;
					border-radius: 10rpx;
				}
				.del{
					width: 40rpx;
					height: 40rpx;
					position: absolute;
					right: 0;
					top: 0;
					z-index: 2;
				}
			}
			.upload{
				width: 200rpx;
				height: 200rpx;
				border-radius: 10rpx;
				float: left;
				position: relative;
				margin-top: 20rpx;
				background: #F3F4F5;
				display: flex;
				align-items: center;
				justify-content: center;
				image{
					width: 45rpx;
					height: 45rpx;
				}
			}
		}
		.qianming{
			margin-top: 20rpx;
			width: 100%;
			height: 80rpx;
			border-radius: 20rpx;
			border: 1px solid #EAEAEA;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 25rpx 20rpx;
			box-sizing: border-box;
			font-size: 24rpx;
			color: #999999;
			image{
				width: 25rpx;
				height: 25rpx;
				vertical-align: middle;
			}
		}
		.xuanyan{
			margin-top: 20rpx;
			width: 100%;
			height: 120rpx;
			border-radius: 20rpx;
			border: 1px solid #EAEAEA;
			display: flex;
			align-items: flex-start;
			padding: 25rpx;
			box-sizing: border-box;
			.icon{
				width: 24rpx;
				height: 24rpx;
				margin-right: 25rpx;
				display: block;
				margin-top: 5rpx;
			}
			textarea{
				display: block;
				flex: 1;
				font-size: 24rpx;
				color: #222222;
				height: 100%;
			}
		}
	}
	&-user{
		width: 100%;
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 25rpx 30rpx 30rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
		.tips{
			width: 100%;
			background: #F3F4F5;
			border-radius: 20rpx;
			padding: 25rpx;
			box-sizing: border-box;
			font-weight: 500;
			font-size: 22rpx;
			color: #999999;
			line-height: 36rpx;
			margin-top: 30rpx;
		}
		.user{
			width: 100%;
			height: 160rpx;
			text-align: center;
			position: relative;
			.pic{
				width: 160rpx;
				height: 160rpx;
				position: relative;
				margin: 0 auto;
				.avatar{
					width: 160rpx;
					height: 160rpx;
					border-radius: 50%;
				}
				.xiangji{
					width: 85rpx;
					height: 85rpx;
					position: absolute;
					right: 0;
					bottom: -10rpx;
					z-index: 2;
				}
			}
			
		}
	}
}
</style>