tourism/uni_applet/pageA/food/menu.vue

<template>
	<view class="content">

		<view class="">
			<view style='margin:20rpx;'>
				<u-search placeholder="搜索美食" v-model="keyword" clearabled :show-action='false'></u-search>
			</view>
			
			<view class="head flex">
				<image :src="dataObj.coverImage" style="width:60rpx;height:60rpx;border-radius:50%;"></image>
				<view class="right">
					{{dataObj.shopNames}}
				</view>
			</view>
			<view class="wrap" v-if="dataObj.dishClassifyInfoList&&dataObj.dishClassifyInfoList.length>0">
				<view class="item1" v-for="item in dataObj.dishClassifyInfoList" v-if="item.foodDishesInfoList&&item.foodDishesInfoList.length>0">
					<view style='font-weight:600;' class="row">
						{{item.classifyName}}
					</view>
					<view style='flex-wrap: wrap;' class="flex" v-if="item.foodDishesInfoList&&item.foodDishesInfoList.length>0">
						<view class="item2" v-for="item1 in item.foodDishesInfoList">
							<image :src="item1.dishImage" mode="" class="img"></image>
							<view class="bottom">
								<view class="name">
									{{item1.dishName}}
								</view>
								<view class="price" v-if="dataObj.lookFlag==0">
									￥{{item1.dishPrice}}
								</view>
								<view class="" v-else>
									暂无价格
								</view>
							</view>
							
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-wrap">
			<view class="left" :style='{width:dataObj.contactsPhone?"60vw":"100vw",}'>
				<text>营业时间：</text>
				<text>{{dataObj.startDate}}~{{dataObj.startDate}}</text>
			</view>
			<view @click='toTel' v-if='dataObj.contactsPhone'  class="right flex align-item-center">
				<view style='position:relative;top:4rpx;'><u-icon name="phone" color='#fff'></u-icon></view>
				<view>电话订餐</view>
			</view>
		</view>
	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				keyword: '',
				dataObj: {
					shopNames: ''
				}
			};
		},
		onLoad(options) {
			that = this
			console.log(options.val)
			this.id = JSON.parse(options.val).id
			this.init()

		},
		methods: {
			toTel(){
				that.$request.baseRequest('admin.tourism.phoneRecordInfo', 'add', {
					commonId:uni.getStorageSync("userInfo").id,
					phone:this.dataObj.contactsPhone
				
				}, failres => {
					uni.showToast({
						icon: "none",
						title: failres.errmsg,
						duration: 3000
					});
				
				}).then(res => {
					
				
				})
				// uni.makePhoneCall({phoneNumber: this.dataObj.contactsPhone, // 成功回调
				// success: (res) => {console.log('调用成功!')	},
				// // 失败回调
				// fail: (res) => {console.log('调用失败!')}})
			},
			init() {
				uni.showLoading({
					title: '数据加载中'
				})
				that.$request.baseRequest('admin.tourism.foodInfo', 'list', {
					page: 1,
					limit: 10,
					id: this.id

				}, failres => {
					uni.showToast({
						icon: "none",
						title: failres.errmsg,
						duration: 3000
					});

				}).then(res => {
					uni.hideLoading()
					this.dataObj = res.data.items[0]
					console.log(this.dataObj)

				})
			},

		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.content {
		box-sizing: border-box;
	}

	.head {
		padding: 20rpx;

		.right {
			margin-left: 20rpx;
		}
	}

	.wrap {
		.item1{
			// margin-bottom: 20rpx;
		}
		.item1 .row{
			position: relative;
			padding-left: 20rpx;
			margin: 20rpx;
		}
		.item1 .row:before{
			position: absolute;
			content: '';
			background: #fbb612;
			width: 6rpx;
			height: 40rpx;
			    top: 2px;
			    left: 0px;
		}
		.item2 {
			display: inline-block;
			width: calc(50vw - 60rpx);
			margin: 10rpx;
			box-shadow: 0px 1px 2px 0px #ccc;
			border-radius: 20rpx;
			.bottom{
				padding: 20rpx;
				.name{
					margin-bottom: 20rpx;
				}
				.price{
					color: #fbb612;
				}
			}
		}

		.img {
			border-radius: 20rpx 20rpx 0 0 ;
			width: calc(50vw - 60rpx);
			height: calc(50vw - 60rpx);
			// width: 344rpx;
			// height: 344rpx;
		}

	}
	.bottom-wrap{
		position: fixed;
		width: 100vw;
		bottom: 0;
		display: flex;
		.left{
			
			padding: 40rpx;
			background: #f7f4ed;
			width: 60vw;
			box-sizing: border-box;
			
		}
		.right{
			box-sizing: border-box;
			padding: 40rpx;
			width: 40vw;
			background: #fbb612;
			color:#fff;
		}
	}
</style>