uniapp-ZHSQ/kitchen/index/index.vue

<template>
	<view class="box">
	    <view class="banner">
	        <image class="banner_pic" :src="shopInfo.newlogo" mode="" />
	    </view>
	
	    <view class="tit">
	        {{shopInfo.shop_name}}
	    </view>
	    <view class="msg">
	        <view class="msg_left">
	            <view class="msg_left_1">
	                <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/kitchen/kitchen_time.png" mode="widthFix" />
	                {{shopInfo.opening_time}}-{{shopInfo.closing_time}}
	                <view>营业</view>
	            </view>
	            <view class="msg_left_2">
	                <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/kitchen/kitchen_add.png" mode="widthFix" />
	                {{shopInfo.addrInfo}}
	            </view>
	        </view>
	        <view class="msg_right">
	            <view class="msg_right1" @click="haderTelClick">
	                <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/kitchen/kitchen_phone.png" mode="widthFix" />
	                电话
	            </view>
	            <view class="msg_right2" @click="handleOptionClick">
	                <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/kitchen/kitchen_add.png" mode="widthFix" />
	                导航
	            </view>
	        </view>
	    </view>
	
	    <view class="tag">
	        餐饮
	        服务
	    </view>
	    <view class="imgList">
	        <image v-for="(item, index) in shopInfo.picList" :data-pic="item" @click="headerPicClick" :key="index" :src="item" mode="" />
	    </view>
	    <view class="gray"></view>
	
	    <view class="subtit">
	        商家承诺
	    </view>
	    <view class="subCon">
	        食品安全
	        <view>亮证经营</view>
	        <view>食无忧保障</view>
	    </view>
	
	    <view class="gray"></view>
	
	    <view class="subtit">
	        公告
	    </view>
	    <view class="subCon">
	        {{shopInfo.presentation}}
	    </view>
	    <view class="payList">
	        <view class="payBtn" @click="pay">立即支付</view>
	        <view class="payBtn2" @click="jump">充值续费</view>
	    </view>
	</view>
</template>


<script>
	import { request, picUrl, NavgateTo } from '../../utils/index.js';
	import { apiArr } from '../../api/kitchen';
	export default {
		data() {
			return {
				shopInfo: {},
				picUrl,
			}
		},
		
		onLoad () {
			this.init();
		},
		methods: {

			async init() {
				console.log('123');
				const res = await request(apiArr.shopList, 'POST', {
					page_num: 1,
					page_size: 10,
					user_id: 67
				})
				console.log('1231312312331', res);
				if (res?.list && res?.list?.length !== 0) {
					const picList = res.list[0].photo ? res.list[0].photo.split(',') : [];
	
					const newPicList = picList.map((item) => {
						return `${picUrl}${item}`
					})
	
					const newRes = {
						...res.list[0],
						addrInfo: `${res.list[0].city.name}${res.list[0].area.name}${res.list[0].business.business_name}${res.list[0].addr}`,
						picList: newPicList,
						newlogo: `${picUrl}${res.list[0].logo}`
					}
					console.log('newResnewResnewRes', newRes)
					this.shopInfo = newRes
				} else {
					uni.showToast({
						title: '暂无可用厨房',
						icon: 'none',
						success() {
							setTimeout(() => {
								uni.navigateBack({
									delta: 1
								})
							}, 1500)
						}
					})
				}
			},
			// 拨打电话
			haderTelClick() {
				const { shopInfo } = this;
				uni.makePhoneCall({
					phoneNumber: shopInfo.tel,
					fail(err) {
						console.log('errr', err)
					}
				})
			},
			
			// 导航
			handleOptionClick() {
				const { shopInfo } = this;
				let openParmas = {
					latitude: Number(shopInfo.lat),
					longitude: Number(shopInfo.lng),
					name: shopInfo.shop_name,
					address: `${shopInfo.city_id}${shopInfo.area_id}${shopInfo.business_id}${shopInfo.addr}`,
				}
				uni.openLocation(openParmas);
			},
			
			// 点击查看图片
			headerPicClick(e) {
				console.log('eee', e);
				const { shopInfo } = this;
				uni.previewImage({
					urls: shopInfo.picList,
					current: e.currentTarget.dataset.pic,
				})
			},
			
			pay(){
				const { shopInfo } = this;
				NavgateTo(`/kitchen/pay/index?id=${shopInfo.shop_id}`, { isLogin: false });
			},
			
			jump(){
				NavgateTo('/kitchen/recharge/index', { isLogin: false });
			},
		}
	}
</script>

<style>
@import url("./index.css");
</style>