疫情上报增加图片和联系方式

src/projects/business/views/Master/Health/Report.vue

@@ -13,11 +13,11 @@
 			<div class="vongi-yqsb vongi-wordcard">
 				<h5>上传照片</h5>
 				<div class="fyy-upphoto">
-					<div class="mui-col-xs-3 fyy-upphoto-close">
-						<img src="~$project/assets/img/zhaop.jpg" />
-						<a class="mui-icon mui-icon-closeempty" href=""></a>
+					<div class="mui-col-xs-3 fyy-upphoto-close" v-for="(item,index) in picList">
+						<img :src="item" />
+						<a class="mui-icon mui-icon-closeempty" @click="delPic(item)"></a>
 					</div>
-					<div class="mui-col-xs-3">
+					<div class="mui-col-xs-3" @click="chooseImage">
 						<a><span class="mui-icon mui-icon-plusempty"></span></a>
 					</div>
 				</div>
@@ -25,8 +25,8 @@
 			<form class="mui-input-group">
 				<div class="mui-input-row">
 					<label>联系方式</label>
-					<input type="text" class="mui-input-clear" placeholder="选填，方便我们联系您">
-				</div>		
+					<input v-model="subForm.phone" type="text" class="mui-input-clear" placeholder="选填，方便我们联系您">
+				</div>
 			</form>
 		</div>
 		<div class="fyy-footer">
@@ -46,6 +46,7 @@
 		mapGetters,
 		mapMutations
 	} from 'vuex'
+	import * as WxJsApi from '$project/utils/wxJsApi'
 	export default {
 		name: 'MasterHealthReport',
 		components: {
@@ -61,13 +62,46 @@
 
 				subForm: {
 					content: '',
-				}
+					phone: '',
+					photo: ''
+				},
+				picList: []
 			}
 		},
 		created() {
 
 		},
 		methods: {
+			//微信选择图片
+			chooseImage() {
+				WxJsApi.chooseImage().then(res => {
+					var localData = res.localData;
+
+					if (localData.indexOf('data:image') != 0) {
+						//判断是否有这样的头部
+						localData = 'data:image/jpeg;base64,' + localData
+					}
+					localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg')
+					this.imgBase64 = localData;
+					//显示裁剪图片
+					//_this.showCropper(field);
+					this.uploadpic();
+				}).catch(error => {
+					mui.toast(error);
+				})
+			},
+			//上传图片
+			uploadpic() {
+				this.isLoading = true;
+				WxJsApi.uploadPic(this.imgBase64).then(response => {
+					this.isLoading = false;
+
+					this.picList.push(response);
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
 			//检测表单
 			checkForm() {
 				if (!this.subForm.content) {
@@ -79,6 +113,7 @@
 			},
 			//保存
 			save() {
+				this.subForm.photo = this.picList.join(',');
 				if (this.checkForm()) {
 					this.isLoading = true;
 					API_Health.report(this.subForm).then(response => {
@@ -96,9 +131,21 @@
 					})
 				}
 			},
+			//删除图片
+			delPic(item) {
+				let picList = this.picList;
+				let index = picList.indexOf(item);
+				if (index > -1) {
+					picList.splice(index, 1);
+				}
+				this.picList = picList;
+			},
 			asynCallBack() {},
 		},
-		mounted() {},
+		mounted() {
+			//获取微信配置
+			WxJsApi.getWxConfig();
+		},
 		destroyed() {
 
 		},
@@ -107,7 +154,7 @@
 				openId: 'wx_openid',
 				token: 'token',
 				person_data: 'person_data',
-                person_popedom: 'person_popedom',
+				person_popedom: 'person_popedom',
 			})
 		}
 	}