newmyj/pages/user/model/shoprz.vue

<template>
	<view class="content ">
		<view class="item-name">
			工资认证
		</view>
		<view class="listBox">
			<view class="con_box">
				<view class="tip">
					请上传最近3单工资证明
				</view>
				<view class="con_image" v-for="(item,ind) in updata.service_audit_imgs">
					<image class="img" @click="navCroper(400,400,'audit',ind)"
						:src="item"></image>
					<image @click="updata.service_audit_imgs.splice(ind,1)" class="tip" src="../../../static/icon/goodsExit.png" mode="scaleToFill"></image>
				</view>
				<view class="con_image">
					<image class="img" @click="navCroper(400,400,'auditall')"
						src="../../../static/image/upImg.png"></image>
				</view>
			</view>
		</view>
		<view class="base-buttom" :class="{ 'bg-gray': loding }" @click="loding ? '' : confirm()">提交</view>
	</view>
</template>

<script>
	import {
		subTypeAudit
	} from '@/api/model.js';

	import {
		mapState
	} from "vuex"
	export default {
		data() {
			return {
				// 上传数据
				updata:{
					service_audit_imgs: [], //服务图片
				},
				loding: false, //是否载入中

			};
		},
		onLoad(options) {
			this.init()
		},
		computed: {
			// #ifdef H5
			...mapState(['urlFile']),
			// #endif
			...mapState(['baseURL']),
		},
		methods: {
			// 初始化
			init() {
				const that = this;
			},
			upLoad(path) {
				// #ifdef H5
				console.log(path, 'h5');
				// #endif
				uni.showLoading({
					title: '图片上传中',
					mask: true
				});
				return new Promise((resolve, error) => {
					uni.uploadFile({
						url: this.baseURL + '/api/user/qiniuUpload', //仅为示例，非真实的接口地址
						filePath: path,
						name: 'file',
						header: {
							"token": uni.getStorageSync('token')
						},
						success: (uploadFileRes) => {
							if ("string" === typeof uploadFileRes.data) {
								resolve(JSON.parse(uploadFileRes.data).data)
							} else {
								resolve(uploadFileRes.data.data)
							}
						},
						complete() {
							uni.hideLoading()
						}
					});
				})
			},
			// 图片裁切
			/**
			 * @param {Number} w 裁切宽度比例
			 * @param {Number} h 裁切高度比例
			 * @param {Number} mw 图片最小宽度
			 * @param {Number} mh 图片最小高度
			 * @param {String} url url修改
			 */
			navCroper(w, h, type, ind) {
				let that = this;
				let tt = (type == 'upimg' ? 2 : 1)
				this.onImg(tt).then((url) => {
					uni.navigateTo({
						url: `../realName/cropper?width=${w}&height=${h}`,
						events: {
							uploadSuccess(res) {
								that.upLoad(res).then((urldata) => {
									 if (type == 'audit') {
										that.updata.service_audit_imgs.splice(ind, 1, urldata.img)
									}else if (type == 'auditall') {
										that.updata.service_audit_imgs.push( urldata.img)
									}
								})
							}
						},
						success: function(res) {
							// 通过eventChannel向被打开页面传送数据
							res.eventChannel.emit('urlNext', {
								url
							})
						}
					})
				})
			},
			onImg(type) {
				const _this = this
				return new Promise((ok, erro) => {
					// 判断是否需要选择
					if (type == 1) {
						uni.showActionSheet({
							itemList: ['拍照', '选择一张照片'],
							success: function(res) {
								_this.chooseImage(res.tapIndex).then((url) => {
									ok(url)
								}).catch((res) => {
									erro(res)
								})
							},
							fail: function(res) {
								erro(res)
								console.log(res.errMsg);
							}
						});
					}
					// 判断是否只需要拍照
					if (type == 2) {
						_this.chooseImage(0).then((url) => {
							ok(url)
						}).catch((res) => {
							erro(res)
						})
					}
				})

			},
			chooseImage: function(index) {
				const _this = this
				return new Promise((ok, error) => {
					// 从相册/相机选择
					// 如需直接开相机或直接选相册，请只使用一个选项
					const sourceType = index === 0 ? ['camera'] : ['album']
					uni.chooseImage({
						count: 1, //默认9
						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
						sourceType: sourceType,
						success: function(res) {
							ok(res.tempFilePaths[0])
						},
						fail(e) {
							uni.showModal({
								title: '文件打开错误',
								content: '请设置授权文件存储权限',
								showCancel: false,
							});
							error(e)
						}
					});
				})

			},

			// 实名认证
			confirm(e) {
				const that = this;
				if (that.updata.service_audit_imgs.length==0) {
					uni.showModal({
						title: '错误',
						content: '请上传工资截图',
						showCancel: false,
					});
					return
				}
				that.loding = true;
				subTypeAudit({
						service_audit_imgs:that.updata.service_audit_imgs
					})
					.then((e) => {
						that.loding = false;
						this.$api.msg(e.msg);
					})
					.catch(err => {
						this.loding = false;
						console.log(err);
					});
			}
		}
	};
</script>

<style lang="scss">
	.content,
	page {
		min-height: 100%;
	}

	.content {
		padding-bottom: 150rpx;
	}

	.item-name {
		margin: $page-row-spacing;
		font-size: $font-lg;
		font-weight: bold;
		color: $font-color-dark;
	}

	.con_box {
		margin: $page-row-spacing;
		.tip{
			color: #999999;
			font-size: $font-base;
			margin-bottom: 20rpx;
		}
		.con_image {
			width: 150rpx;
			height: 150rpx;
			display: inline-block;
			margin-right: 20rpx;
			position: relative;

			.img {
				width: 100%;
				height: 100%;
			}

			.tip {
				position: absolute;
				top: -10rpx;
				right: -10rpx;
				width: 30rpx;
				height: 30rpx;
				background-color: #FFF;
				border-radius: 99rpx;
			}
		}
	}

	.listBox {
		margin: $page-row-spacing;
		margin-top: 30rpx;
		border-radius: 20rpx;
		overflow: hidden;
		background-color: #FFFFFF;
	}

	.list {
		.input {
			text-align: right;
			font-size: $font-base;
			color: $color-gray;
			width: 100%;
		}

		.listItem {
			padding: 35rpx 40rpx;
			border-bottom: 1px solid $page-color-light;
		}

		.listIconImg {
			width: 36rpx;
		}

		.right {
			color: $font-color-light;
			font-size: $font-base;
			flex-grow: 1;
			justify-content: flex-end;

			.timetype {
				width: 100%;
				justify-content: flex-end;
			}

			.citylist {
				.del {
					color: $color-red;
					font-size: $font-sm;
					border: 1px solid $color-red;
					border-radius: 10rpx;
					line-height: 1;
					padding: 5rpx 15rpx;
				}
			}

			.img {
				width: 26rpx;
			}

			.buttom {
				color: $base-color;
				border: 1px solid $base-color;
				border-radius: 10rpx;
				line-height: 1;
				padding: 10rpx 20rpx;
			}
		}

		.titleBox {
			.title {
				color: $font-color-base;
				font-size: $font-base;
			}
		}
	}

	.bg-gray {
		background-color: $color-gray;
	}

	.base-buttom {
		position: fixed;
		bottom: 30rpx;
		right: 0rpx;
		left: 0rpx;
	}
</style>