tourism/uni_applet/pageA/enter/myCateringdustry/index.vue

<template>
	<view class='content'>
		<view class='flex align-items-flex-start justify-space-between'
			style="background: #fff;padding: 20rpx 20rpx 0 20rpx;">
			<view class="flex">
				<view class="head_sculpture">
					<u--image :showLoading="true" :src="currectData.coverImage" width="80rpx" height="80rpx"
						shape="circle"></u--image>
				</view>
				<view>
					<view @click='switchShop' style='font-size:28rpx;'>{{currectData.shopNames}}
						<image src="@/static/image/yjt.png" mode=""
							style="margin-left:10rpx;width:12rpx;height: 21rpx;"></image>
					</view>
					<view style='color:#999;font-size:24rpx;'>{{currectData.detailedAddress}}</view>
				</view>
			</view>

			<view>
				<view class='caution' v-if='currectData.status!="显示中"&&currectData.status!="已隐藏"'>
					{{currectData.status}}
				</view>
			</view>
		</view>
		<view class='shop'>
			<view style="padding: 20rpx;background: #fff;">
				<view class="img-title">店铺照片</view>
				<view style='flex-wrap: wrap;' class='flex'>
					<view class='shop_image' v-for='item in currectData.indoorImageArray'>
						<u--image :showLoading="true" :radius='10' :src="item" width="100rpx"
							height="100rpx"></u--image>
					</view>
				</view>
			</view>
			<view class="product">
				<view class='switch_show flex' style='font-size:34rpx;'>
					<view :class='showStatus==0?"active":""' @click='switchShow(0)'>
						商品展示（{{currectData.displaysNum?currectData.displaysNum:0}}）</view>
					<!-- <view :class='showStatus==1?"active":""' @click='switchShow(1)'>
							团购（{{currectData.groupNum?currectData.groupNum:0}}）
						</view> -->
				</view>
				<view v-if='showStatus==0' style='font-size:28rpx;'>
					<view v-for='item in currectData.dishClassifyInfoList' v-show='item.dishesNum'>
						<view class='flex justify-space-between' style="margin: 20rpx 0;">
							<view>{{item.classifyName}}（{{item.dishesNum}}）</view>
							<view @click='up(item)'>置顶</view>
						</view>
						<view style='flex-wrap: wrap;justify-content: space-between;' class='flex'>
							<view v-for='item1 in item.foodDishesInfoList' class="product-item">
								<u--image :showLoading="true" :src="item1.dishImage" width="30vw"
									height="30vw"></u--image>
								<view class="text-content">
									<view class="name">{{item1.dishName}}</view>
									<view class="price">￥{{item1.dishPrice}}</view>
								</view>

							</view>
						</view>

					</view>
				</view>
				<view v-if='showStatus==1'>
					<view style='margin:10rpx;' v-for='item1 in currectData.foodGroupInfoList'>
						<u--image v-if='item1.showImage' :showLoading="true" :src="item1.showImage" :width="width"
							:height="height"></u--image>
						<view>{{item1.groupTitle}}</view>
						<view class='flex justify-space-between align-item-center'>
							<view>{{item1.groupPrice}}</view>
							<view class='flex align-item-center'>
								<view>已收{{item1.soldNum}}.</view>
								<view>已用{{item1.usedNum}}.</view>
								<view>待用{{item1.notUseNum}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if='currectData.status=="显示中"||currectData.status=="已隐藏"' class='flex justify-space-between bottom-fixed'>
			<view class='merchants_button' @click='addfood'>添加菜品</view>
			<!-- <view class='merchants_button' @click='addGroupBuying'>添加团购</view> -->
			<view class='merchants_button' @click='shopSetting'>店铺设置</view>
		</view>
		<view v-else style='margin:20rpx;' class='flex justify-space-between'>
			<view v-if='currectData.status=="审核中"||currectData.status=="已禁用"' class='merchants_unable_button'>添加菜品
			</view>
			<view v-if='currectData.status=="审核中"||currectData.status=="已禁用"' class='merchants_unable_button'>添加团购
			</view>
			<view v-if='currectData.status=="审核中"||currectData.status=="已禁用"' class='merchants_unable_button'>店铺设置
			</view>
			<view v-if='currectData.status=="已驳回"'></view>
			<view v-if='currectData.status=="已驳回"' class='merchants_button' @click='editCateringindustry'>编辑店铺信息
			</view>
			<view v-if='currectData.status=="已驳回"'></view>
		</view>
		<u-picker immediateChange='true' title='选择店铺' @cancel='show = false' @confirm='shopConfirm' :show="show"
			:columns="columns" keyName="shopNames"></u-picker>
	</view>
</template>

<script>
	var that
	export default {
		data() {
			return {
				dataList: [],
				currectData: {
					coverImage: '',
					shopNames: '',
					detailedAddress: '',
					status: ''
				},
				showStatus: 0,
				show: false,
				height: '',
				width: '',
				columns: []
			}
		},
		onLoad() {
			that = this
		},
		onShow() {
			this.height = (uni.getSystemInfoSync().windowWidth / 2);
			this.width = uni.getSystemInfoSync().windowWidth - 50;
			console.log(this.height)
			uni.showLoading({
				title: '加载中',
				mask: true
			})
			this.$request.baseRequest('admin.tourism.foodInfo', 'list', {
				commonId: uni.getStorageSync("userInfo").id,
				page: 1,
				limit: 9999
			}, failres => {
				uni.showToast({
					icon: "none",
					title: failres.errmsg,
					duration: 3000
				});

				uni.hideLoading()
			}).then(res => {
				for (var i = 0; i < res.data.items.length; i++) {
					if (res.data.items[i].indoorImage) {
						res.data.items[i].indoorImageArray = res.data.items[i].indoorImage.split(',')
					}
					if (res.data.items[i].foodGroupInfoList) {
						for (var q = 0; q < res.data.items[i].foodGroupInfoList.length; q++) {
							var data = res.data.items[i].foodGroupInfoList[q]
							if (data.dishImage) {
								var images = data.dishImage.split(',')
								data.showImage = images[0]
							}
						}
					}
				}
				this.columns = [res.data.items]
				this.dataList = res.data.items
				this.currectData = res.data.items[0]
				uni.hideLoading()

			})

		},
		methods: {
			up(item) {

			},
			shopConfirm(e) {
				console.log(e)
				this.currectData = e.value[0]
				this.show = false
			},
			switchShop() {
				this.show = true
			},
			switchShow(status) {
				this.showStatus = status
			},
			addfood() {
				uni.navigateTo({
					url: '/pageA/enter/myCateringdustry/addfood?foodId=' + this.currectData.id + '&shopNames=' +
						this.currectData.shopNames
				})
			},
			editCateringindustry() {
				uni.navigateTo({
					url: '/pageA/enter/myCateringdustry/edit?foodId=' + this.currectData.id
				})
			},
			addGroupBuying() {
				uni.navigateTo({
					url: '/pageA/enter/myCateringdustry/addGroupBuying?foodId=' + this.currectData.id +
						'&shopNames=' + this.currectData.shopNames
				})
			},
			shopSetting() {
				uni.setStorageSync('myCateringdustry', JSON.stringify(this.currectData))
				uni.navigateTo({
					url: '/pageA/enter/myCateringdustry/shopSetting/index?foodId=' + this.currectData.id +
						'&shopNames=' + this.currectData.shopNames
				})
			}
		}
	}
</script>

<style lang='scss' scoped>
	.head_sculpture {
		margin-right: 20rpx;
		/* padding: 0 20rpx 20rpx 0; */
	}

	.shop_image {
		margin: 10rpx;
	}

	.switch_show {
		.active {
			font-weight: 600;
			color: #5F7DE9;
		}
	}

	.shop {

		/* margin-top: 20rpx;
		background: red; */
		.img-title {
			font-weight: 700;
			margin-bottom: 20rpx;

		}
	}

	.product {
		margin-top: 20rpx;
		background: #fff;
		padding: 20rpx;

		.product-item {
			margin-bottom: 20rpx;
			background: rgba(255, 255, 255, 0.7);
			box-shadow: 2px 3px 3px 1px rgba(187, 187, 187, 0.4);

			border-radius: 20rpx;

			.text-content {
				padding: 10rpx;

				.name {
					font-weight: 700;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
					width: 27vw;
				}

				.price {
					color: #F50808;
				}
			}
		}
	}

	.merchants_button {
		font-size: 32rpx;
		padding: 10rpx 40rpx;
	}
	.content{
		padding-bottom: 200rpx;
	}
	.bottom-fixed{
		    position: fixed;
		    bottom: 0;
		    background: #fff;
		    width: 100%;
		    justify-content: space-evenly;
		    padding: 40rpx;
		
	}
</style>