xuan-pay-cweb/subpackages/groupBuyingConfiguration/storeImg/storeImgAdd.vue

<template>
	<view class="all-container  pd-main  font15" style="padding-bottom: 60px;">
		<view class="username">
			<view class="namecont font16">图片类型</view>
			<picker mode="selector" style="width: 70%;" :range="imgTypeList" range-key="text"
				@change="bindImgType">
				<view class=" text1 marRight10 font14" v-if="imgType">
					{{imgName}}
				</view>
				<view class=" text1 marRight10 fcor999 font14" v-else>
					请选择图片类型
				</view>
			</picker>
			<image src="/static/img/jtg.png" mode="widthFix" class="iconw"></image>
		</view>
		<view>
			<view class="imageUploadContainer">
				<view class="imageUploadList"> 
					<view class="imageItem"  v-for="(item,index) in imgValue"  :key="index">   
						<image :src="imgUrl+item" mode="aspectFill"  @click="previewImage(imgUrl+item)" :data-index="index"></image>
						<view v-if="isShowDel" class="imageDel" @click="deleteImage(item)" >x</view> 						
					</view>
					<view v-if="isShowAdd" class="imageUpload" @click="upload">+</view>
				</view>
			</view> 	
				
		</view>
		<view class="footer-btn">
			<button class="backcor89 fcorfff" @click="clickToSave">保存</button>
		</view>
	</view>
</template>

<script>
	
	import {insertStoreImg} from '@/Utils/groupBuying.js'
	
	const app = getApp();
	export default {
		data(){
			return{
				reqUrl: app.globalData.url, //请求地址
				imgUrl: app.globalData.imgUrl, //图片访问地址
				imgTypeList: [
					{
						id: 1,
						text: '菜品',
					}, {
						id: 2,
						text: '环境',
					},{
						id:3,
						text:'菜单'
					}
				], //图片类型
				imgType: '', //"  1：菜品  2：环境，3：菜单",
				imgName: '', //1：菜品  2：环境，3：菜单",
				/* ================== */
				imgValue:[],
				merId:'',
				storeId:'',
				
			}
		},
		
		computed:{
			isShowDel(){	
				return true	
			},
			isShowAdd(){
				if(this.imgValue.length>=1){
					return false
				}else{
					return true
				}
			},
			
		},
		onLoad(options){
			if(options.storeId){
				this.storeId = options.storeId;
			}
		},
		methods:{
			/* 点击保存 */
			clickToSave(){
				if(!this.imgType){
					uni.showToast({
						icon:'none',
						title:"请选择图片类型"
					})
					return
				}
				if(this.imgValue.length==0){
					uni.showToast({
						icon:'none',
						title:"请选择图片"
					})
					return
				}
				this.insertStoreImg();
				
			},
			insertStoreImg(){
				let params={
					img:this.imgValue.join(","),
					storeId:this.storeId,
					type:this.imgType,
				};
				console.log(params,"params")
				
				insertStoreImg(params).then(res=>{
					let title ;
					if (res.return_code == '000000') {
					        title = res.return_data;                
					}else{
					    title = res.return_msg;
					}
					uni.showToast({
					    title: title,
					    icon: 'none',
					    duration: 2000
					}) 
					setTimeout(()=>{
						uni.navigateBack();
					},2000)
				})
			},
			
			// 删除
			deleteImage(data){
				let arr = this.imgValue.filter((item)=>item!=data);
				this.imgValue = arr;
			},
			// 预览
			previewImage(img){
				uni.previewImage({
					current: 0,
					indicator: "number",
					loop: "true",
					urls:[img]
				}) 
			},
			/* ====== */
			//图片类型
			bindImgType(e) {
				this.imgType = this.imgTypeList[e.target.value].id;
				this.imgName = this.imgTypeList[e.target.value].text;
			},
			 //上传图片
			upload() {
				let that = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera', 'album'],
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						that.uploadFile(tempFilePaths[0]);
					},
					error: function(e) {
						console.log(e);
					}
				});
			},
			//上传
			uploadFile(imgURL) {
				 const that = this;
				uni.uploadFile({
					url: that.reqUrl + '/fileUpload/uploadfile',
					filePath: imgURL,
					header: {
						"Authorization": app.globalData.token
					},
					name: 'files',
					success: function(uploadFileRes) {
						that.getImgSignedUrl(JSON.parse(uploadFileRes.data)
							.return_data);
					}
				});
			},
			//查看临时图片路径
			getImgSignedUrl( item1) {
				this.imgValue.push(item1);
				console.log(this.imgValue,"this.imgValue")
			},
			
		}
	}
</script>

<style lang="scss" scoped>
.username{
		width: calc(100% - 90upx);
		height: 100upx;
		display: flex;
		align-items: center;
		background-color: rgba($color: #ffffff, $alpha: 0.1);
		border-bottom: 1px solid #f6f6f6;
		padding: 8upx 45upx;

		input {
			width: 50%;
			height: 50upx;
			font-size: 16px;
			color: #333333;
			font-weight: blod;
		}

		.get-code {
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
			right: 7px;
			z-index: 3;
			border: 1px solid #bfbfbf;
			width: 25%;
			padding: 3px 5px;
			border-radius: 22px;

			&:after {
				content: " ";
				width: 1upx;
				height: 50upx;
				position: absolute;
				z-index: 3;
				margin-right: 100%;
				left: 0;
				top: 20upx;
			}
		}
		.namecont {
			color: #666666;
			width: 28%;
		}
	}
	
/* 图片 */
.imageUploadContainer{
		padding: 10upx 5upx;
		margin: 10upx 5upx;
	}
	.name{
		text-align: center;
		margin-top:-30upx;
	}
	.dragging{
		transform: scale(1.2)
	}
	
	.imageUploadList{
		display: flex;
		flex-wrap: wrap;
	}
	
	.imageItem, .imageUpload{
		width: 200upx;
		height: 200upx;
		margin: 30upx 15upx 30upx;
	}
	
	.imageDel{
		position: relative;
		left: 180upx;
		bottom: 225upx;
		background-color: rgba(0,0,0,0.5);
		width: 36upx;
		text-align: center;
		line-height: 35upx;
		border-radius: 17upx;
		color: white;
		font-size: 30upx;
		padding-bottom: 2upx;
	}
	
	.imageItem image, .moveImage{
		width: 200upx;
		height: 200upx;
		border-radius: 8upx;
	}
	
	.imageUpload{
		line-height: 200upx;
		text-align: center;
		font-size: 150upx;
		color: #D9D9D9;
		border: 1px solid #D9D9D9;
		border-radius: 8upx;
	}
	
	.moveImage{
		position: absolute;
	}
	.uni-list {
		width: 260px;
	}	
	.popup_foot {
		display: flex;
		border-top: 1px #F9F9F9 solid;
		line-height: 40px;
		height: 40px;
		margin-top: 30px;
	}
	.build_01{
		line-height: 35px;
	}
	.build_01 input{
		background: #ededed;
	}
	.popup_foot_l {
		width: 50%;
		text-align: center;
	}
	
	.popup_foot_r {
		width: 50%;
		text-align: center;
		border-left: 1px #F9F9F9 solid;
		color: #5095D3;
	}
	
/* 底部按钮 */
.footer-btn{
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	button{
		height: 50px;
		line-height: 50px;
	}
}
</style>