tourism/uni_applet/pageA/food/menu.vue

<template>
	<view class="content">
		<view style="padding: 20rpx;">
			<view>
				<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="wrap1" 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=''><u-icon name="phone" color='#fff' size="20"></u-icon></view>
				<view style="font-size: 36rpx;">电话订餐</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', {
					phoneRecordInfo: JSON.stringify({
						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" scoped>
	page {
		background: #fff;
	}

	.content {
		box-sizing: border-box;
		background: #fff;
		padding-bottom: 200rpx;

	}

	.head {
		padding: 20rpx 0;

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

	.wrap1 {
		.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 - 40rpx);
			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 - 40rpx);
			height: calc(50vw - 40rpx);
			// width: 344rpx;
			// height: 344rpx;
		}

	}

	.bottom-wrap {
		position: fixed;
		width: 100vw;
		bottom: 0;
		display: flex;
		background-color: red;

		.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>