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

<template>
	<!-- backcorfff backcor6-->
	<view class="all-container  pd-main backcor6 font15">
		<view class="dis-flex  width100 mart10">
			<button class="btns icon tianjia " @click.stop="clickToAdd()">新增</button>
			<button class="btns bgRed "   @click.stop = "clickToDelete()">删除</button>
		</view>
		<view class="mart20 backcorfff">
			<view class="dis-flex height40 bor-botm1">
				<view class="checkFlex fotct fontwig6"></view>
				<view class="flex-1 fotct fontwig6">图片</view>
				<next-bubble-menu class="flex-1" :d-width="200" :dataList="dataList" bingEleId="imgType" @change="getItem($event)">
					<view class=" fotct fontwig6 " id="imgType">{{imgType.imgTypeText}}<text class="icon xia font14 "></text></view>
				</next-bubble-menu>

				<view class="flex-1 fotct fontwig6">图片状态</view>
			</view>
			<checkbox-group @change="checkClick">
			<view class="dis-flex bor-botm1 paddtop5 paddbotm5 " v-for="(item,index) in imgDataList" :key="index">
				<view class="checkFlex fotct">
					<checkbox @click.stop  class=" checkContainer"  color="#FFC71E"
						:value="String(item.id)" :checked="false" />
				</view>
				<view class="flex-1 fotct">
					<image :src="imgUrl+item.img"  @click.stop="previewImage(imgUrl+item.img)" mode="aspectFit" class="width100 height60 verc"></image>
				</view>
				<view class="flex-1 fotct">{{item.type | filterType}}</view>
				<view :class="' flex-1 fotct '+(item.status == 0 ? ' fcRed ':'')">{{ item.status | filterStatus}}</view>
			</view>
			</checkbox-group>
		</view>

	</view>
</template>

<script>
	import nextBubleMenu from "@/components/next-bubble-menu/next-bubble-menu.vue"
	
	import {getBsStoreImgByList,
	deleteStoreImg
	} from '@/Utils/groupBuying.js';
	const app = getApp();
	export default {
		data() {
			return {
				imgUrl: app.globalData.imgUrl, //图片访问地址
				dataList: [{
						id: 0,
						text: '全部',
					},
					{
						id: 1,
						text: '菜品',
					}, {
						id: 2,
						text: '环境',
					},{
						id:3,
						text:'菜单'
					}
				],
				
				imgType:{
					// isShowImgType:false,
					imgTypeText:"图片类型",
					imgTypeId:0,
				},
				storeId:"",//门店id
				imgDataList:[],	
				imgSelectList:[],
			
				
			}
		},
		components: {
			nextBubleMenu
		},
		onLoad(options){
			if(options.storeId){
				this.storeId = options.storeId;
			}
		},
		onShow(){
			this.imgType.imgTypeId=0;
			this.imgType.imgTypeText="图片类型";
			this.getBsStoreImgByList();
		},
		filters:{
			filterType(type){
				switch (type) {
				    case 1:
				       return "菜品";
				    case 2:
				        return "环境";
					case 3:
					    return "菜单";
				      
				    default:
				        return "未知";
				}
				
			},
			filterStatus(value){
				switch (value) {
				    case 1:
				       return "正常";
				    case 0:
				        return "失败";
				    default:
				        return "未知";
				}
			}
		},
		methods: {
			/* 获取列表 */
			getBsStoreImgByList(){
				let params={
					storeId:this.storeId,
					type:this.imgType.imgTypeId,
				}
				if(params.type==0){
					delete params.type;
				}
				uni.showLoading({
					title:"加载中",
					 mask:true,
				})
				this.imgDataList = [];
				getBsStoreImgByList(params).then(res=>{
					uni.hideLoading();
					if (res.return_code == '000000') {
					    this.imgDataList = res.return_data;         
					    // console.log(res.return_data)
					
					}else{
					    uni.showToast({
					        title: res.return_msg,
					        icon: 'none',
					        duration: 2000
					    })
					}
				})
			},
			// 预览
			previewImage(img){
				uni.previewImage({
					current: 0,
					indicator: "number",
					loop: "true",
					urls:[img]
				}) 
			},			
			getItem(data) {
				console.log(data)
				if (data.id == 0) { 
					this.imgType.imgTypeText = "图片类型";
					this.imgType.imgTypeId = data.id;
				}else{
					this.imgType.imgTypeText = data.text;
					this.imgType.imgTypeId = data.id;
				}
				this.getBsStoreImgByList();
				this.imgSelectList = [];

			},
			/* 点击去新增页面 */
			clickToAdd(){
				let that = this;
				uni.navigateTo({
					url:"./storeImgAdd?storeId="+that.storeId
				})
			},
			/* 点击删除 */
			clickToDelete(){
				if(this.imgSelectList.length==0){
					uni.showToast({
						icon:'none',
						title:"请勾选想要删除的图片"
					})
					return
				}
				let _this = this;
				uni.showModal({
				    title: '提示',
				    content: '确定要删除选中的这些图片吗?',
				    success: function(res) {
				        if (res.confirm) {
							let params={
								id:_this.imgSelectList.join(",")
							}
							deleteStoreImg(params).then(res=>{
								let title ;
								if (res.return_code == '000000') {
								        title = res.return_data;                
								}else{
								    title = res.return_msg;
								}
								_this.imgSelectList =[];
								uni.showToast({
								    title: title,
								    icon: 'none',
								    duration: 2000,
								}) 
								setTimeout(()=>{
									 _this.getBsStoreImgByList()
								},2000)
							})
							
				        } else if (res.cancel) {
				
				            // console.log('用户点击取消');
				        }
				    }
				});
				
				
			},
			// checkChange
			checkClick(e) {
				this.imgSelectList = e.detail.value;
				console.log(this.imgSelectList,"this.imgSelectList")
			},
		}
		
	}
</script>

<style lang="scss" scoped>
	.width60 {
		width: 60px;
	}

	.alin-stretch {
		align-self: stretch;
	}

	.btns {
		width: 21%;
		height: 35px;
		line-height: 35px;
		background-color: #0083f5;
		color: #FFFFFF;
		font-weight: bold;
		font-size: 12px;
		padding: 0px;
	}

	.bgRed {
		background-color: red;
	}
	.fcRed{
		color: red;
	}
	
	//checkbox
	.checkContainer{
		width: 40px;
		// height: 200rpx;
		// line-height: 200rpx;
		// padding-left: 10px;
	}
	.checkFlex{
		flex: 0.7;
	}
	
</style>