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

<template>
	<!-- backcorfff backcor6-->
	<view class="all-container  pd-main backcor6 font15">
		<view class="  width100 mart10">
			<button class="btns icon tianjia " @click.stop="clickToAdd()">新增</button>
		</view>
		<view class="mart20 backcorfff">
			<view class="dis-flex height40 bor-botm1">
				<view class="flex-1 fotct fontwig6 " ></view>
				<view class="flex-1 fotct fontwig6">名称</view>
				<view class="flex-1 fotct fontwig6">价格</view>
				<view class="flex-1 fotct fontwig6">分类</view>
				<!-- <view class="flex-1 fotct fontwig6">售卖数量</view> -->
				<view class="flex-1 fotct fontwig6">操作</view>
			</view>
			
			<view class="dis-flex bor-botm1 paddtop5 paddbotm5 fon15" v-for="(item,index) in productList" @click="cilckToShowDetail(item)" :key="index">
				<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 text1">{{item.name}}</view>
				<view class="flex-1 fotct">{{item.price}}</view>
				<view class="flex-1 fotct text1">{{item.productCategoryName}}</view>
				<!-- <view class="flex-1 fotct">{{item.saleCount}}</view> -->
				<view class="flex-1 fotct fcor41c " @click.stop="clickToEdit(item)"><text class="icon bianji font15 fcor41c"></text>编辑</view>
			</view>
			
		</view>
		<wybPopup ref="popup" @hide="hide()" zIndex="999" type="bottom" height="500" width="500" :scrollY="true"
			radius="6" :showCloseIcon="true">
			<view class="pop-contain pd-main">
				<view class="pop-title fontwig6"><text>详情</text></view>
				
				<view class="dis-flex flex-wrap" v-if="productDetail">
					<view class="width100 dis-flex bor-botm1">
						<view class=" fotct fontwig6 backcor6 titleWidth minheight40">名称</view>
						<view class="flex-1 fotct ">{{productDetail.name}}</view>
					</view>
					<view class="width100 dis-flex bor-botm1">
						<view class=" fotct fontwig6 backcor6 titleWidth minheight40">价格</view>
						<view class="flex-1 fotct ">{{productDetail.price}}</view>
					</view>
					<view class="width100 dis-flex bor-botm1">
						<view class=" fotct fontwig6 backcor6 titleWidth minheight40">分类</view>
						<view class="flex-1 fotct ">{{productDetail.productCategoryName}}</view>
					</view>
					<view class="width100 dis-flex bor-botm1">
						<view class=" fotct fontwig6 backcor6 titleWidth minheight40">规格</view>
						<view class="flex-1 fotct ">{{productDetail.spec}}</view>
					</view>
					<view class="width100 dis-flex bor-botm1">
						<view class=" fotct fontwig6 backcor6 titleWidth minheight40">售卖数量</view>
						<view class="flex-1 fotct ">{{productDetail.saleCount}}</view>
					</view>
					<view class="width100 dis-flex bor-botm1">
						<view class=" fotct fontwig6 backcor6 titleWidth minheight40">创建时间</view>
						<view class="flex-1 fotct ">{{productDetail.createTime | timeFormat}}</view>
					</view>
					<view class="width100 dis-flex ">
						<view class=" fotct fontwig6 backcor6 titleWidth minheight80">图片</view>
						<view class="flex-1 fotct ">
							<image :src="imgUrl+productDetail.img" @click.stop="previewImage(imgUrl+productDetail.img)"  mode="aspectFit" class="width100 height60 verc"></image>
						</view>
					</view>
				</view>
				
				
			</view>
		</wybPopup>
	</view>
</template>

<script>
	import {getStoreProductByList,getStoreProductById
	} from '@/Utils/groupBuying.js';
	import wybPopup from '@/components/wyb-popup/wyb-popup.vue'
	const app = getApp();
	export default {
		data() {
			return {
				imgUrl: app.globalData.imgUrl, //图片访问地址
				storeId:"",//门店id
				productList:[],
				productDetail:null,
				
			
				
			}
		},
		
		onLoad(options){
			if(options.storeId){
				this.storeId = options.storeId;
			}
			
			
		},
		onShow(){
			this.getStoreProductByList();
		},
		components:{
			wybPopup
		},
		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: {
			/* 获取列表 */
			getStoreProductByList(){
				let params={
					storeId:this.storeId,
				}
				uni.showLoading({
					title:"加载中",
					 mask:true,
				})
				getStoreProductByList(params).then(res=>{
					uni.hideLoading();
					if (res.return_code == '000000') {
					  this.productList = res.return_data;
					}else{
					    uni.showToast({
					        title: res.return_msg,
					        icon: 'none',
					        duration: 2000
					    })
					}
				})
			},
			/* 点击行显示详情 */
			cilckToShowDetail(data){
				uni.showLoading({
					title:"加载中",
				})
				let params={
					id:data.id
				}
				getStoreProductById(params).then(res=>{
					uni.hideLoading();
					if (res.return_code == '000000') {
						this.$refs.popup.show();               
						this.productDetail =res.return_data;
					
					}else{
					    uni.showToast({
					        title: res.return_msg,
					        icon: 'none',
					        duration: 2000
					    })
					}
				})
				
				
			},
			hide(){
				this.productDetail=null;
			},
			
			// 预览
			previewImage(img){
				uni.previewImage({
					current: 0,
					indicator: "number",
					loop: "true",
					urls:[img]
				}) 
			},			
			
			/* 点击去新增页面 */
			clickToAdd(){
				let that = this;
				uni.navigateTo({
					url:"./storeProductAdd?status=1&storeId="+that.storeId
				})
			},
			/* 点击去编辑 */
			clickToEdit(data){
				let that = this;
				uni.navigateTo({
					url:"./storeProductAdd?status=2&storeId="+that.storeId+"&id="+data.id
				})
			},
			
		}
		
	}
</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;
		margin: 0 0 0 auto;
	}

	.bgRed {
		background-color: red;
	}
	.fcRed{
		color: red;
	}

/* 弹窗 */
.pop-contain {
		text-align: center;
		padding-top: 50px;
		background-color: #ffffff;

		.pop-title {
			text-align: center;
			height: 50px;
			line-height: 50px;
			font-size: 18px;
			position: fixed;
			z-index: 10;
			top: 0;
			left: 0;
			right: 0;
			background: #ffffff;

		}
	}
.flex-wrap{
	flex-wrap: wrap;
}
.titleWidth{
	width: 80px;
	text-align: center;
}
.minheight40{
	padding: 15px 0;
}
.minheight80{
	min-height: 80px;
	line-height: 80px;
}
</style>