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/select@3x.png" class="duihao"></image>
				</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/select@3x.png" class="duihao"></image>
				</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/select@3x.png" class="duihao"></image>
				</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/select@3x.png" class="duihao"></image>
				</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
				uni.showModal({
					content: "您确定要更改图像？",
					showCancel: true,
					confirmText: '确定',
					success: function(res) {
						if (res.confirm) {
							that.deptListurl.avatarUrl = that.identityUrl
							that.$api.doRequest('post', '/commonUser/editUserInfo', that.deptListurl).then(
									res => {
										if (res.data.code == 200) {
											that.userInfo.avatarUrl = that.identityUrl
											var _student = wx.getStorageSync('userInfo');
											_student.avatarUrl = that.identityUrl;
											wx.setStorageSync('userInfo', _student);
											uni.navigateTo({
												url: `/pages/user/setUp`
											})
										}

									})
								.catch(res => {
									uni.showToast({
										title: res.errmsg,
										icon: 'none',
										duration: 2000
									})
								});
						} else if (res.cancel) {
							// console.log('用户点击取消');
						}
					},
				})
			},
		}
	}
</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;
	}

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

	.title {
		text-align: center;
		margin: 16px 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: 50px;
		background-color: #FFFFFF;
		text-align: center;
		color: #22C572;
		font-size: 20px;
		margin-top: 16px;
		border-radius: 20px;
		line-height: 50px;
		font-weight: 500;
	}
</style>