yiliangyiyun-app/pages/user/set_picture.vue

<template>
	<view class="container">
		<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: {},

			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		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 = ""
					}
				}
			},
			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: 20px;
	}

	.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;
	}
</style>