yiliangyiyun-app/pages/user/set_picture.vue

<template>
	<view class="container">
		<view class="headPortrait">
			<view style="text-align: center;" v-if="!src">
				<view class="plus" v-if="!src">
					<u-icon name="plus" color="#afb3bf" size="50" ></u-icon>
				</view>
				<image :src="src" class="avatar" @tap="upload"></image>
				<view class="item" @tap="upload">自定义</view>
			</view>
			<view style="text-align: center;padding-top: 70rpx;border-radius: 50%;" v-else>
				<image :src="src" class="avatar1" @tap="upload"></image>
				<view class="item" @tap="upload">自定义</view>
			</view>
		</view>
		<view class="headPortrait flex">
			<view class="pictures">
				<image src="../../static/img/myimg/YongHu@3x.png" v-bind:class="pictures" @click="oKSelected(1)">
				</image>
				<view style="margin: 0 auto;text-align: center;margin-top: -15px;" v-if="pictures == 'picture1'">
					<image src="../../static/img/login/duihao2@3x.png" class="duihao"></image>
				</view>
				<view v-else style='margin: 0 auto;text-align: center;margin-top: -15px;width:18px;height:21px;'></view>
				<view class="title">默认</view>
			</view>
			<view class="pictures">
				<image src="../../static/img/myimg/SiJi@3x.png" v-bind:class="picturesTwo" @click="oKSelected(2)">
				</image>
				<view style="margin: 0 auto;text-align: center;margin-top: -15px;" v-if="picturesTwo == 'picture1'">
					<image src="../../static/img/login/duihao2@3x.png" class="duihao"></image>
				</view>
				<view v-else style='margin: 0 auto;text-align: center;margin-top: -15px;width:18px;height:21px;'></view>
				<view class="title">司机</view>
			</view>
			<view class="pictures">
				<image src="../../static/img/myimg/LiangShang@3x.png" v-bind:class="picturesThree"
					@click="oKSelected(3)"></image>
				<view style="margin: 0 auto;text-align: center;margin-top: -15px;" v-if="picturesThree == 'picture1'">
					<image src="../../static/img/login/duihao2@3x.png" class="duihao"></image>
				</view>
				<view v-else style='margin: 0 auto;text-align: center;margin-top: -15px;width:18px;height:21px;'></view>
				<view class="title">粮商</view>
			</view>
			<view class="pictures">
				<image src="../../static/img/myimg/LiangNong@3x.png" v-bind:class="picturesFour" @click="oKSelected(4)">
				</image>
				<view style="margin: 0 auto;text-align: center;margin-top: -15px;" v-if="picturesFour == 'picture1'">
					<image src="../../static/img/login/duihao2@3x.png" class="duihao"></image>
				</view>
				<view v-else style='margin: 0 auto;text-align: center;margin-top: -15px;width:18px;height:21px;'></view>
				<view class="title">粮农</view>
			</view>
		</view>
		<view class="btn" @click="commit">
			保存
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				pictures: "picture",
				picturesTwo: "picture",
				picturesThree: "picture",
				picturesFour: "picture",
				identityUrl: "",
				deptListurl: {},
				src: ''

			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onLoad(option) {
			let url = this.userInfo.avatarUrl
			if(url){
				if(url == 'https://taohaoliang.oss-cn-beijing.aliyuncs.com/appData/162874144867649.png'){
					this.oKSelected(1)
				}else if(url == 'https://taohaoliang.oss-cn-beijing.aliyuncs.com/appData/162874149682940.png'){
					this.oKSelected(2)
				}else if(url == 'https://taohaoliang.oss-cn-beijing.aliyuncs.com/appData/1628741540162138.png'){
					this.oKSelected(3)
				}else if(url == 'https://taohaoliang.oss-cn-beijing.aliyuncs.com/appData/162874156836497.png'){
					this.oKSelected(4)
				}else{
					this.src = url
					this.identityUrl = url
					this.oKSelected(0)
				}
			}
			if (option.src) {
				this.src = option.src;
				this.identityUrl = option.src
				this.oKSelected(0)
			}
		},
		methods: {
			oKSelected(number) {
				if (number == 1) {
					if (this.pictures == "picture") {
						this.pictures = "picture1"
						this.picturesTwo = "picture"
						this.picturesThree = "picture"
						this.picturesFour = "picture"
						this.identityUrl = "https://taohaoliang.oss-cn-beijing.aliyuncs.com/appData/162874144867649.png"
					} else {
						this.pictures = "picture"
					}
				} else if (number == 2) {
					if (this.picturesTwo == "picture") {
						this.picturesTwo = "picture1"
						this.pictures = "picture"
						this.picturesThree = "picture"
						this.picturesFour = "picture"
						this.identityUrl = "https://taohaoliang.oss-cn-beijing.aliyuncs.com/appData/162874149682940.png"
					} else {
						this.picturesTwo = "picture"
						this.identityUrl = ""
					}
				} else if (number == 3) {
					if (this.picturesThree == "picture") {
						this.picturesThree = "picture1"
						this.pictures = "picture"
						this.picturesTwo = "picture"
						this.picturesFour = "picture"
						this.identityUrl = "https://taohaoliang.oss-cn-beijing.aliyuncs.com/appData/1628741540162138.png"
					} else {
						this.picturesThree = "picture"
						this.identityUrl = ""
					}
				} else if (number == 4) {
					if (this.picturesFour == "picture") {
						this.picturesFour = "picture1"
						this.pictures = "picture"
						this.picturesTwo = "picture"
						this.picturesThree = "picture"
						this.identityUrl = "https://taohaoliang.oss-cn-beijing.aliyuncs.com/appData/162874156836497.png"
					} else {
						this.picturesFour = "picture"
						this.identityUrl = ""
					}
				}else{
					this.pictures = "picture"
					this.picturesTwo = "picture"
					this.picturesThree = "picture"
					this.picturesFour = "picture"
					// this.identityUrl = ""
				}
			},
			upload() {
				uni.chooseImage({
					count: 1, // 默认9
					sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
					success(res) {
						const src = res.tempFilePaths[0];
						uni.redirectTo({
							url: '/pages/user/upload?src=' + src
						});
					}
				});
			},
			commit() {
				if (this.identityUrl == null || this.identityUrl == "") {
					this.$api.msg('请选择一张图片！')
					return
				}
				var that = this
				that.deptListurl.avatarUrl = that.identityUrl
				that.deptListurl.id = that.userInfo.id
				that.$api.doRequest('post', '/commonUser/editUserInfo', that.deptListurl).then(
						res => {
							if (res.data.code == 200) {
								uni.showToast({
									title: '修改成功！',
									icon: 'success',
									duration: 2000,
									success() {
										setTimeout(() => {
											that.userInfo.avatarUrl = that.identityUrl
											var _student = uni.getStorageSync('userInfo');
											_student.avatarUrl = that.identityUrl;
											uni.setStorageSync('userInfo', _student);
											var name = 'userInfo';
											var value = _student;
											that.$store.commit('$uStore', {
												name,
												value
											});
											// this.$api.msg('修改成功2！')
											uni.navigateBack({
												delta: 1
											})
										}, 2000)
									}
								})

							}
						})
					.catch(res => {
						if (res.data.errmsg) {
							uni.showToast({
								title: res.data.errmsg,
								icon: 'none',
								duration: 2000
							})
						} else {
							uni.showToast({
								title: "系统异常，请联系管理员",
								icon: 'none',
								duration: 2000
							})
						}
					});
			},
		}
	}
</script>

<style>
	.container {
		padding: 10px 10px 0px;
		background-color: #F5F6FA;
	}

	.headPortrait {
		width: 100%;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 20rpx;
	}

	.picture {
		width: 70px;
		height: 70px;
		margin: 0 auto;
		margin-top: 10px;
		border: 2px solid transparent;
	}

	.picture1 {
		width: 70px;
		height: 70px;
		margin: 0 auto;
		border-radius: 35px;
		margin-top: 10px;
		border: 2px solid #22C572;
	}

	.title {
		text-align: center;
		margin: 9px 0;
		font-size: 14px;
		font-weight: 500;
	}

	.pictures {
		margin-left: 15px;
	}

	.duihao {
		width: 18px;
		height: 18px;
		text-align: center;
		margin: 0 auto;
	}

	.btn {
		width: 100%;
		height: 46px;
		background-color: #FFFFFF;
		text-align: center;
		color: #22C572;
		font-size: 17px;
		margin-top: 16px;
		border-radius: 30px;
		line-height: 50px;
		font-weight: 500;
	}

	.avatar-container {
		position: relative;
		text-align: center;
		padding-top: 50%;
	}
	.avatar {
		width: 230rpx;
		height: 230rpx;
		border: 1px dashed #afb3bf;
		border-radius: 50%;
	}
	.avatar1 {
		width: 230rpx;
		height: 230rpx;
		border-radius: 50%;
	}

	.plus {
		position: relative;
		width: 30px;
		margin: auto;
		top: 70px;
	}

	.item {
		text-align: center;
		margin: auto;
		margin-bottom: 20rpx;
		line-height: 60rpx;
	}
</style>