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="请输入备注信息" />
			</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:''
				},
			}
		},
		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')
				}
			},
			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;
		.textarea{
			width: 100%;
			height: 100%;
		}
	}
	.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>