[完成] 头像照页面UI

pages.json

@@ -172,6 +172,12 @@
 			"style": {
 				"navigationBarTitleText": "基本资料"
 			}
+		},
+		{
+			"path": "pages/my/photoImage",
+			"style": {
+				"navigationBarTitleText": "形象照"
+			}
 		}
 	],
 	"globalStyle": {

pages/index/index.vue

@@ -24,7 +24,7 @@
 						<view class="lf-m-t-12 lf-color-555 lf-font-24 lf-line-1">我要上墙</view>
 					</view>
 					<view class="user-item" v-for="item in 6" :key="item">
-						<image class="avatar" src="@/static/logo.png"></image>
+						<image class="avatar" src="https://picsum.photos/200"></image>
 						<view class="lf-m-t-12 lf-color-555 lf-font-24 lf-line-1">编号 73949</view>
 					</view>
 				</view>

pages/my/editInfo.vue

@@ -1,7 +1,7 @@
 <template>
 	<view class="lf-w-100 lf-h-100">
 		<view class="edit-head">
-			<view>
+			<view @click="$url('/pages/my/photoImage')">
 				<image src="../../static/logo.png" mode="aspectFill" style="width: 150rpx;height: 150rpx;border-radius: 10rpx;"></image>
 			</view>
 			<view class="lf-font-32 lf-color-222">

pages/my/photoImage.vue

@@ -0,0 +1,170 @@
+<template>
+	<view class="content">
+		<view class="my-images">
+			<view class="my-image-item" @click="uploadImage" v-if="image_list.length < image_count">
+				<text class="lf-iconfont icon-jia my-image-item-after"></text>
+			</view>
+			<view class="my-image-item" v-for="(item, index) in image_list" :key="index" @click="showMenu(index)">
+				<image :src="item" mode="aspectFill"></image>
+				<!-- <view class="remove-image" @click.stop="removeInage(index)">
+					<text class="lf-iconfont icon-shanchu"></text>
+				</view> -->
+				<view class="mask">审核中</view>
+			</view>
+		</view>
+		<view class="tips-desc">！小提示：最多可上传9张个人形象照，使用本人近期真实照片为佳。</view>
+		<u-action-sheet :list="menu_list" v-model="show_menu" @click="clickSheet"></u-action-sheet>
+	</view>
+</template>
+
+<script>
+	export default {
+		data(){
+			return {
+				image_list: [],
+				image_count: 9,
+				menu_list: [{
+					text: '设为封面图',
+				}, {
+					text: '预览'
+				}, {
+					text: '删除',
+					color: 'red'
+				}],
+				show_menu: false,
+				click_index: null
+			}
+		},
+		onLoad(){
+			
+		},
+		methods: {
+			// 显示操作菜单
+			showMenu(index){
+				this.click_index = index;
+				this.show_menu = true;
+			},
+			// 点击了操作菜单的某一项
+			clickSheet(current){
+				switch(current){
+					case 1: this.lookImage(this.click_index); break;
+					case 2: this.removeInage(this.click_index); break;
+				}
+			},
+			// 上传凭证图片
+			uploadImage(){
+				let current_count = this.image_count - this.image_list.length;
+				if(current_count == 0) return;
+				uni.chooseImage({
+					count: current_count,
+					complete: result => {
+						if(result.errMsg == "chooseImage:fail cancel"){
+							return; // 取消选择图片
+						}
+						let tempFiles = result.tempFiles;
+						let image_list = [];
+						let overstep = false;
+						tempFiles.map(item => {
+							// 上传的图片需小于10MB
+							if(item.size < 10464788){
+								image_list.push(item.path);
+							}else{
+								overstep = true;
+							}
+						})
+						if(overstep){
+							uni.showModal({
+								title: '温馨提示',
+								content: '您上传的图片含有超出10M大小的限制，请优化大小后再上传！',
+								showCancel: false
+							})
+						}
+						this.image_list.push(...image_list);
+					}
+				})
+			},
+			// 预览图片
+			lookImage(current){
+				if(this.image_list.length <= 0) return;
+				this.$u.throttle(() => {
+					uni.previewImage({
+						urls: this.image_list,
+						current: current
+					});
+				}, 500);
+			},
+			// 移除图片
+			removeInage(current){
+				this.image_list.splice(current, 1);
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	.content{
+		width: 750rpx;
+		height: max-content;
+		box-sizing: border-box;
+		padding: 30rpx 32rpx;
+	}
+	
+	.my-images{
+		display: flex;
+		flex-wrap: wrap;
+		margin-bottom: 40rpx;
+		.my-image-item{
+			width: 220rpx;
+			height: 220rpx;
+			background: #DDDDDD;
+			position: relative;
+			margin-right: 12rpx;
+			&:nth-child(3n){
+				margin-right: 0rpx;
+			}
+			&:nth-child(n+4){
+				margin-top: 12rpx;
+			}
+			image{
+				width: 100%;
+				height: 100%;
+			}
+			.remove-image{
+				position: absolute;
+				right: -4rpx;
+				top: -18rpx;
+				color: #e74c3c;
+				font-size: 40rpx;
+				padding: 8rpx;
+			}
+			.mask{
+				position: absolute;
+				bottom: 0;
+				left: 0;
+				width: 100%;
+				height: 42rpx;
+				background-color: rgba(0,0,0,0.5);
+				color: #FFFFFF;
+				font-size: 24rpx;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+		}
+		.my-image-item-after{
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			font-size: 60rpx;
+			color: #999999;
+		}
+	}
+	
+	.tips-desc{
+		font-size: 24rpx;
+		color: #999999;
+	}
+</style>

pages/saySomething/saySomething.vue

@@ -56,6 +56,9 @@
 				uni.chooseImage({
 					count: current_count,
 					complete: result => {
+						if(result.errMsg == "chooseImage:fail cancel"){
+							return; // 取消选择图片
+						}
 						let tempFiles = result.tempFiles;
 						let image_list = [];
 						let overstep = false;
@@ -82,8 +85,8 @@
 			lookImage(current){
 				if(this.image_list.length <= 0) return;
 				this.$u.throttle(() => {
-					uni.previewimage({
-						images: this.image_list,
+					uni.previewImage({
+						urls: this.image_list,
 						current: current
 					});
 				}, 500);