caimei-applets-mcare/pages/user/order/order-addpay.vue

<template>
	<view class="container qualifications">
		<view class="qualifications-content">
			<view class="list-view-title"><text class="none">*</text>支付凭证图片：</view>
			<view class="list-view-upload clearfix">
				<view class="photo-item" v-for="(item, imageIndex) in imageList" :key="imageIndex">
					<image :src="item" mode="aspectFill" @click.stop="previewImg(item)"></image>
					<text class="iconfont icon-iconfontguanbi" @click.stop="deletePhotoFn(imageIndex)"></text>
				</view>
				<view
					class="photo-item add"
					@click.stop="uploadPhotoFn"
					v-if="imageList.length < 5 || imageList.length == 0"
				>
					<text class="iconfont icon-jiahao"></text>
				</view>
			</view>
			<view class="list-view-title">备注：</view>
			<view class="list-view-text">
				<textarea
					class="textarea"
					v-model="params.remarks"
					placeholder="请输入备注信息"
					maxlength="200"
					@input="conInput"
				/>
				<text class="limit-text">{{ min }}/{{ max }}</text>
			</view>
		</view>
		<view class="card-mains-btn">
			<button
				class="add-btn"
				:disabled="disabled"
				:class="[disabled ? 'disabled' : '']"
				@click="orderInsertVoucher"
			>
				提交
			</button>
		</view>
	</view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import { uploadFileImage } from '@/services/public.js'
export default {
	data() {
		return {
			isIphoneX: this.$store.state.isIphoneX,
			isPreviewImg: false,
			imageList: [],
			params: {
				id: 0,
				orderId: 0,
				remarks: '',
				voucherImgs: ''
			},
			min: 0,
			max: 200
		}
	},
	onLoad(option) {
		console.log(option)
		this.params.orderId = option.orderId
	},
	computed: {
		disabled() {
			return !(this.imageList.length > 0)
		}
	},
	methods: {
		async orderInsertVoucher() {
			try {
				this.params.voucherImgs = this.imageList.join('##')
				console.log('params', this.params)
				const res = await this.OrderService.orderInsertVoucher(this.params)
				this.$util.msg('保存成功', 2000, true, 'success')
				setTimeout(() => {
					this.$api.navigateBack(1)
				}, 2000)
			} catch (error) {
				console.log('error', error)
			}
		},
		async uploadPhotoFn() {
			//添加图片
			try {
				const res = await uploadFileImage()
				const data = JSON.parse(res.data).data
				this.imageList.push(data)
				console.log('imageList', this.imageList)
			} catch (e) {
				console.log('1111111111')
			}
		},
		conInput(e) {
			//备注文字字数限制
			let value = e.detail.value
			let len = parseInt(value.length)
			if (len > this.max) return
			this.min = len
			if (this.min == 200) {
				return
			}
		},
		deletePhotoFn(index) {
			//删除图片
			this.imageList.splice(index, 1)
		},
		previewImg(image) {
			//顶部商品图片预览
			this.isPreviewImage = true
			let urls = []
			urls.push(image)
			uni.previewImage({
				urls: urls,
				current: 0
			})
		}
	},
	onShow() {}
}
</script>

<style lang="scss">
page {
	height: auto;
	background: #ffffff;
}
.qualifications-content {
	width: 100%;
	height: auto;
	box-sizing: border-box;
	padding: 0 24rpx;
	.list-view-title {
		width: 100%;
		height: 92rpx;
		line-height: 92rpx;
		font-size: $font-size-30;
		color: #333333;
		text-align: left;
		.none {
			color: #f85050;
		}
	}
	.list-view-text {
		width: 100%;
		height: 216rpx;
		box-sizing: border-box;
		border: 1px solid #e1e1e1;
		padding: 20rpx;
		border-radius: 6rpx;
		position: relative;
		.textarea {
			width: 100%;
			height: 100%;
			font-size: $font-size-26;
			color: #666666;
		}
		.limit-text {
			position: absolute;
			right: 20rpx;
			bottom: 16rpx;
			line-height: 44rpx;
			font-size: $font-size-24;
			color: #b2b2b2;
		}
	}
	.list-view-upload {
		width: 100%;
		height: auto;
		padding: 10rpx 0;
		.photo-item {
			display: inline-block;
			width: 150rpx;
			height: 150rpx;
			margin: 10rpx 0;
			margin-right: 25rpx;
			border-radius: 10rpx;
			border: 1px dashed #b8bfca;
			position: relative;
			float: left;
			&.add {
				width: 150rpx;
				height: 150rpx;
				border-color: #b2b2b2;
				text-align: center;
				line-height: 150rpx;
				margin-right: 0rpx;
				.icon-jiahao {
					font-size: $font-size-44;
					color: #b2b2b2;
					font-weight: bold;
				}
			}
			.icon-iconfontguanbi {
				width: 30rpx;
				height: 30rpx;
				border-radius: 50%;
				display: block;
				position: absolute;
				right: -10rpx;
				top: -10rpx;
				background: #f94b4b;
				text-align: center;
				line-height: 30rpx;
				color: #ffffff;
				font-size: $font-size-22;
			}
			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
				display: block;
			}
		}
		.photo-list {
			width: 100%;
			height: 116rpx;
			overflow: hidden;
			white-space: nowrap;
			display: flex;
			align-items: flex-start;
		}
		.scoll-wrapper {
			display: flex;
			align-items: flex-start;
		}
	}
}
.card-mains-btn {
	width: 100%;
	height: auto;
	box-sizing: border-box;
	padding: 0 75rpx;
	margin-top: 180rpx;
	.add-btn {
		width: 100%;
		height: 90rpx;
		font-size: $font-size-30;
		line-height: 90rpx;
		color: #ffffff;
		text-align: center;
		background: $btn-confirm;
		border-radius: 45rpx;
		border-radius: 44rpx;
		margin-top: 80rpx;
		&.disabled {
			background: #e1e1e1;
			border-radius: 44rpx;
		}
	}
}
</style>