CommunityApp/pages/uploadFace/uploadFace.vue

<template>
	<view>
		<view class="" v-if="vuex_appletType==1">
			<view>
				<view class="cu-list menu" @click="locationShow=true">
					<view class="cu-item">
						<view class="content">
							<text>我的房屋</text>
						</view>
						<view class="action">
							<text>{{selectLabel?selectLabel:list[0].address}}</text>
							<text class="cuIcon-right padding-left-10"></text>
						</view>
					</view>
				</view>
			</view>

			<view class="upload_container">
				<view>
					<view @click="show=true"
						style="margin: 30rpx 0 10rpx 0;display: flex;align-items: center;flex-direction: column;">
						<upload-img :width="$isEmpty(face_url)?300:560" :height="$isEmpty(face_url)?300:420"
							:currentImage="face_url"
							bgsrc="https://szsq.nxzhsq.cn/community/miniofile/image/camera1.png">
						</upload-img>
						<view class="" style="color: #59a5f0;">
							<text class="cuIcon-camera padding-right-sm" style="font-size: 30rpx;"></text>
							<text v-if="$isEmpty(face_url)">点击上传人脸</text>
							<text style="margin-top: 40rpx;display: inline-block;" v-else>点击重新上传</text>
						</view>
					</view>
				</view>
			</view>
			<view class="category">
				<view v-for="(item, index) in iconArray" :key="index" class="category_item">
					<view class="category_item_wrap" :data-index="item.index">
						<view class="icon_wrap">
							<image :src="item.iconUrl" class="index_icon"></image>
						</view>
						<view class="category_item_text">
							<text>{{item.iconText}}</text>
						</view>
					</view>
				</view>
			</view>
			<canvas canvas-id="photo_canvas"
				:style="'width:' + canvasWidth + 'px;height:' + canvasHeight + 'px;position: absolute;left:-300px;top:-300px;'"></canvas>
			<view @tap="uploadFace" class=" footer-fixed">
				<view class="cu-btn  flex  text-lg bg-red-btn" style="padding: 46rpx 0;">
					提交人脸信息
				</view>
			</view>
			<u-select z-index="9999999" mode="single-column" value-name="id" label-name="address"
				v-model="locationShow" :list="list" @confirm="roomChange"></u-select>
			<u-action-sheet @click="photoChecked" z-index="999999" :list="actionList" v-model="show"></u-action-sheet>
		</view>

		<view v-else>

		</view>
	</view>
</template>

<script>
	import uploadImg from '@/comps/uploadimg/uploadImg.vue'
	//获取app实例
	var app = getApp();

	export default {
		components: {
			uploadImg
		},
		data() {
			return {
				appletType: 0,

				//显示模态框
				locationShow: false,
				selectLabel: '',

				//上传人脸
				actionList: [{
					text: '相册上传',
				}, {
					text: '拍照上传'
				}],
				show: false,

				face_url: null,
				//人脸图片地址
				face_image: null,
				//人脸图片的base64字符串
				list: null,
				//住户信息列表
				index: null,
				//当前显示住户信息下标
				iconArray: [{
					"iconUrl": "https://szsq.nxzhsq.cn/community/miniofile/image/zd.png",
					"iconText": '不要遮挡',
					"index": 1
				}, {
					"iconUrl": "https://szsq.nxzhsq.cn/community/miniofile/image/mj.png",
					"iconText": '不戴墨镜',
					"index": 2
				}, {
					"iconUrl": "https://szsq.nxzhsq.cn/community/miniofile/image/zl.png",
					"iconText": '不能仰头俯拍',
					"index": 3
				}, {
					"iconUrl": "https://szsq.nxzhsq.cn/community/miniofile/image/cz.png",
					"iconText": '光线充足',
					"index": 4
				}, {
					"iconUrl": "https://szsq.nxzhsq.cn/community/miniofile/image/bg.png",
					"iconText": '浅色背景',
					"index": 5
				}, {
					"iconUrl": "https://szsq.nxzhsq.cn/community/miniofile/image/sh.png",
					"iconText": '物业审核生效',
					"index": 6
				}]

			};
		},
		onShow() {
			if (this.vuex_appletType == 0) {
				uni.setNavigationBarTitle({
					title: "功能待开发"
				})
			} else {
				uni.setNavigationBarTitle({
					title: "上传人脸"
				})
			}
			//获取当前页面的对象
			let currPage = this.$util.getPageCtx()
			if (!this.$isEmpty(currPage.data.image)) {
				this.handelImg(currPage.data.image)
			}
		},
		components: {},
		props: {},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad: function(options) {
			this.getFaceImg();
		},
		onShow() {
			this.getAppletType()
		},
		methods: {
			//获取小程序是否已经审核通过,通过就开放人脸
			getAppletType: function() {
				uni.login({
					success: res => {
						let params = {};
						params['js_code'] = res.code;
						params['name'] = 'community';
						this.$http.getOpenid(params).then(res => {
							//获取成功
							if (res.data.result_code == 1) {
								uni.setStorageSync("appletType", res.data.appletType);
								this.appletType = res.data.appletType
								this.$u.vuex('vuex_appletType', res.data.appletType)
							}
						})
					}
				});
			},
			//点击模态框选项触发
			photoChecked(index) {
				if (index == 0) {
					//图片上传
					this.chooseImage()
				} else if (index == 1) {
					//拍照上传
					uni.navigateTo({
						url: "../my-camera/my-camera"
					})
				}
			},
			//选择房间
			roomChange: function(e) {
				// 选中的房屋 id
				let id = e[0].value
				//选中的房屋名字
				this.selectLabel = e[0].label
				//选中的房屋列表的下标
				this.index = this.list.findIndex(value => value.id === id)
				this.face_url=this.list[this.index].faceUrl
			},
			//获取住户人脸
			getFaceImg: function() {
				let params = {
					memberId: app.globalData.member.id,
					residentialId: uni.getStorageSync("residentialId")
				};
				this.$http.getHouseUserCondition(params).then(res => {
					if (this.$isNotEmpty(res.data.data)) {
						this.list = res.data.data;
						this.face_url = this.list[0].faceUrl
						this.index = 0
					}
				})
			},
			//点击上传图片事件
			chooseImage() {
				uni.chooseImage({
					count: 1,
					//最多可以选择的图片张数，默认9
					sourceType: ['album', 'camera'],
					sizeType: ['compressed'],
					//可选择原图或压缩后的图片
					success: res => {
						this.handelImg(res.tempFilePaths[0])
					}
				});
			},
			//处理照片，拍照上传和相册上传的共同处理方法
			handelImg(imgUrl) {
				this.$http.uploadFile(imgUrl).then(res => {
					this.face_url = res.data.data.link
					console.log(this.face_url);
				})
			},
			//上传用户faceImg
			uploadFace: function() {
				let data= this.list[this.index]
				data.faceUrl=this.face_url
				if (this.$isEmpty(this.face_url)) {
					this.$u.toast('请上传人脸')
					return
				}
				this.$http.modifyFace(data).then(res => {
					if (res.data.success) {
						this.$u.toast('修改成功')
					} else {
						this.$u.toast('修改失败')
					}

				});
			}
		}
	};
</script>
<style lang="scss">
	/* pages/ uploadFace/uploadFace.wxss */
	page {
		background: #fff;
	}

	.upload_container {
		text-align: center;
		color: #333;
		background: #fff;
		border-radius: 10rpx;
	}

	.upload_bg {
		position: relative;
	}

	.upload_bg .upload_btn {
		width: 120rpx;
		height: 120rpx;
		position: absolute;
		left: 50%;
		top: 40%;
		margin-left: -65rpx;
		margin-top: -60rpx;
	}

	.upload_bg .upload_btn image {
		width: 100%;
		height: 100%;
	}

	.upload_text {
		position: absolute;
		top: 55%;
		width: 100%;
		color: $base-btn-color;
	}

	.img_content {
		margin-top: 20rpx;
		position: relative;
		text-align: center;
	}

	.img_content .upload_bgImg {
		width: 560rpx;
		height: 420rpx;
		max-height: 1;
		display: inline-block;
		border-radius: 20rpx;
	}

	.reUpload {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		height: 60rpx;
		line-height: 60rpx;
		color: #333;
		padding-right: 40rpx;
	}

	.img_content .img_icon {
		width: 40rpx;
		height: 40rpx;
		vertical-align: text-top;
		margin-right: 6rpx;
		border-radius: 20rpx;
	}

	.tips {
		height: 80rpx;
		line-height: 80rpx;
		padding-left: 30rpx;
		background-color: #f5f5f5;
		color: #777;
	}

	.category {
		padding: 20px 20rpx 0;
		overflow: auto;
		background-color: #FFF;
		text-align: center;

	}

	.category_item {
		width: 33.3%;
		float: left;
		margin-bottom: 40rpx;
	}

	.icon_wrap {
		width: 120rpx;
		margin: 0 auto;
		margin-bottom: 5px;
	}

	.index_icon {
		width: 60rpx;
		height: 60rpx;
	}

	.category_item_text {
		text-align: center;
		font-size: 24rpx;
		color: #999;
	}

	.form_group {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin: 20rpx 20rpx;
		line-height: 100rpx;
		position: relative;
		font-size: 26rpx;
		border-bottom: 2rpx solid #ddd;

	}

	.my-item .iconfont.arrow {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translate(0, -50%);
		font-size: 32rpx;
		vertical-align: top;

	}

	.my-item {
		width: 100%;
		position: relative;
		background: #fff;
		font-size: 28rpx;
		box-sizing: border-box;
	}

	.my-item .status {
		position: absolute;
		right: 35rpx;
		top: 50%;
		transform: translate(0, -50%);
		font-size: 28rpx;
	}
</style>