cbz/page_shop/pages/good/shop.vue

<template>
	<view class="content">
		<view class="top">
			<u-navbar title=" " @leftClick="leftClick" height="44px" bgColor="rgb(255,255,255,0)" :placeholder="true">
				<view class="u-nav-slot" slot="center"> 
					<u-search placeholder="店铺热搜" v-model="keyword" :showAction="false"></u-search>
				</view>
			</u-navbar>
		</view>
		<view class="box">
			<view class="box_top hflex acenter" @click="toDetail">
				<image :src="shop.img" class="avatar"></image>
				<view class="top_name">{{shop.name}}</view>
			</view>
			<view class="addr hflex acenter jbetween">
				<view class="addr_text">{{shop.address}}</view>
				<image src="/static/images/shop/map_icon.png" class="addr_icon"></image>
			</view>
			<view class="tabs hflex acenter">
				<block v-for="(item,index) in tabs" :key="index">
					<view class="hflex acenter" style="padding-right: 68rpx;">
						<view class="tab_item" :class="tab_active == index ? 'tab_active': ''" @click="changeTab(index)">{{item.name}}</view>
						<view class="vflex acenter jcenter" v-if="index == 2">
							<u-icon name="arrow-up-fill" :color="color" size="4"></u-icon>
							<u-icon name="arrow-down-fill" :color="color2" size="4"></u-icon>
						</view>
					</view>
				</block>
			</view>
			<menuList :menuLists="shop.lists" bottomSize="200rpx" @listenEvent="myEvent" @listenMenu="myMenu">
			</menuList>
			<view class="bottom hflex acenter jbetween">
				<view class="vflex acenter" @click="tellPhone">
					<u-icon name="phone-fill" color="#506dff" size="20"></u-icon>
					<view class="text_style1">打电话</view>	
				</view>	
				<view class="hflex acenter jcenter btn">
					<image class="btn_icon" src="/static/images/shop/consulting.png"></image>
					<view class="btn_text">咨询客服</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				keyword: '',
				shop: {
					img: '/static/images/mine/avatar1.jpg',
					name: '江南造船厂',
					address: '北城新区与汾河路交汇处',
					phone: '13412341234',
					lists: [
						{
							title: '柴油机',
							goods: [
								{
									label: '扬子柴油发电机3kw/5kw/8kw/10kw小型家用工业…',
									img: '/static/images/index/class_img3.png',
									price: '3400.00',
								},
								{
									label: '扬子柴油发电机3kw/5kw/8kw/10kw小型家用工业…',
									img: '/static/images/index/class_img3.png',
									price: '3400.00',
								},
								{
									label: '扬子柴油发电机3kw/5kw/8kw/10kw小型家用工业…',
									img: '/static/images/index/class_img3.png',
									price: '3400.00',
								},
								{
									label: '扬子柴油发电机3kw/5kw/8kw/10kw小型家用工业…',
									img: '/static/images/index/class_img3.png',
									price: '3400.00',
								},
								{
									label: '扬子柴油发电机3kw/5kw/8kw/10kw小型家用工业…',
									img: '/static/images/index/class_img3.png',
									price: '3400.00',
								},
								{
									label: '扬子柴油发电机3kw/5kw/8kw/10kw小型家用工业…',
									img: '/static/images/index/class_img3.png',
									price: '3400.00',
								},
								{
									label: '扬子柴油发电机3kw/5kw/8kw/10kw小型家用工业…',
									img: '/static/images/index/class_img3.png',
									price: '3400.00',
								}
							]
						},
						{
							title: '齿轮箱',
							goods: [
								{
									label: '扬子柴油发电机3kw/5kw/8kw/10kw小型家用工业…',
									img: '/static/images/index/class_img4.png',
									price: '3400.00',
								},
								{
									label: '扬子柴油发电机3kw/5kw/8kw/10kw小型家用工业…',
									img: '/static/images/index/class_img3.png',
									price: '3400.00',
								},
								{
									label: '扬子柴油发电机3kw/5kw/8kw/10kw小型家用工业…',
									img: '/static/images/index/class_img3.png',
									price: '3400.00',
								},
								{
									label: '扬子柴油发电机3kw/5kw/8kw/10kw小型家用工业…',
									img: '/static/images/index/class_img3.png',
									price: '3400.00',
								},
								{
									label: '扬子柴油发电机3kw/5kw/8kw/10kw小型家用工业…',
									img: '/static/images/index/class_img3.png',
									price: '3400.00',
								},
								{
									label: '扬子柴油发电机3kw/5kw/8kw/10kw小型家用工业…',
									img: '/static/images/index/class_img3.png',
									price: '3400.00',
								},
								{
									label: '扬子柴油发电机3kw/5kw/8kw/10kw小型家用工业…',
									img: '/static/images/index/class_img3.png',
									price: '3400.00',
								}
							]
						},
						{
							title: '舵机',
							goods: [
								{
									label: '扬子柴油发电机3kw/5kw/8kw/10kw小型家用工业…',
									img: '/static/images/index/class_img5.png',
									price: '3400.00',
								},
								{
									label: '扬子柴油发电机3kw/5kw/8kw/10kw小型家用工业…',
									img: '/static/images/index/class_img3.png',
									price: '3400.00',
								},
								{
									label: '扬子柴油发电机3kw/5kw/8kw/10kw小型家用工业…',
									img: '/static/images/index/class_img3.png',
									price: '3400.00',
								},
								{
									label: '扬子柴油发电机3kw/5kw/8kw/10kw小型家用工业…',
									img: '/static/images/index/class_img3.png',
									price: '3400.00',
								},
								{
									label: '扬子柴油发电机3kw/5kw/8kw/10kw小型家用工业…',
									img: '/static/images/index/class_img3.png',
									price: '3400.00',
								},
								{
									label: '扬子柴油发电机3kw/5kw/8kw/10kw小型家用工业…',
									img: '/static/images/index/class_img3.png',
									price: '3400.00',
								},
								{
									label: '扬子柴油发电机3kw/5kw/8kw/10kw小型家用工业…',
									img: '/static/images/index/class_img3.png',
									price: '3400.00',
								}
							]
						}
					],
				},
				tabs: [
					{
						index: 0,
						name: '全部',
					},
					{
						index: 1,
						name: '销量',
					},
					{
						index: 2,
						name: '价格',
					}
				],
				tab_active: 0,
				color: '#7D7D7D',
				color2: '#7D7D7D',
			}
		},
		onLoad() {
			that = this
		},
		methods: {
			// 返回
			leftClick() {
				console.log('返回');
				$api.jump(-1)
			},
			// 店铺详情
			toDetail() {
				$api.jump('/page_shop/pages/good/shopDetail')
			},
			// 点击产品列表
			myEvent(e) {
				console.log(e);
			},
			// 点击菜单列表
			myMenu(e) {
				console.log(e);
			},
			// 切换tabs
			changeTab(e) {
				console.log(e);
				if(that.tab_active != 2) {
					that.color = '#506dff'
				} else {
					that.color = '#7D7D7D'
					that.color2 = '#506dff'
				}
				that.tab_active = e
			},
			// 打电话
			tellPhone() {
				var value = that.shop.phone
				uni.makePhoneCall({
					phoneNumber: value //仅为示例
				});
			}
			
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		position: relative;
		.top {
			background: url('../../../static/images/comment/nav_bg.png') no-repeat;
			background-size: 100%;
			box-sizing: border-box;
			padding: 30rpx;
			height: 540rpx;
			.u-nav-slot {
				position: absolute;
				top: 8rpx;
				left: 134rpx;
			}
		}
		.box {
			position: absolute;
			left: 0;
			top: 240rpx;
			width: 100%;
			min-height: calc(100vh - 240rpx);
			background: #FFFFFF;
			border-radius: 40rpx 40rpx 0  0;
			.box_top {
				position: relative;
				.avatar {
					position: absolute;
					left: 30rpx;
					top: -52rpx;
					width: 148rpx;
					height: 148rpx;
					border-radius: 50%;
					border: 4rpx solid #FFFFFF;
				}
				.top_name {
					font-size: 40rpx;
					font-weight: 500;
					color: #222222;
					line-height: 56rpx;
					padding: 20rpx 0 0 218rpx;
				}
			}
			.addr {
				padding: 44rpx 30rpx 28rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #F4F4F4;
				width: 100%;
				.addr_text {
					font-size: 26rpx;
					font-weight: 400;
					color: #222222;
					line-height: 36rpx ;
				}
				.addr_icon {
					width: 36rpx;
					height: 36rpx;
				}
			}
			.tabs {
				width: 100%;
				box-sizing: border-box;
				padding: 34rpx 30rpx 40rpx;
				.tab_item {
					font-size: 32rpx;
					font-weight: 500;
					color: #7D7D7D;
					line-height: 44rpx;
					padding-right: 10rpx;
				}
				.tab_active {
					font-size: 36rpx;
					font-weight: 500;
					color: #222222;
					line-height: 50rpx;
					position: relative;
				}
				.tab_active::after {
					content: "";
					position: absolute;
					left: 18rpx;
					bottom: -5rpx;
					width: 40rpx;
					height: 8rpx;
					background: #506DFF;
					border-radius: 4rpx;
				}
			}
			.bottom {
				width: 100%;
				z-index: 9;
				position: fixed;
				bottom: 0;
				height: 166rpx;
				background: #FFFFFF;
				box-sizing: border-box;
				padding: 8rpx 50rpx 74rpx;
				.text_style1 {
					font-size: 20rpx;
					font-weight: 400;
					color: #506DFF;
					line-height: 28rpx;
					padding-top: 6rpx;
				}
				.btn {
					width: 550rpx;
					height: 84rpx;
					background: #506DFF;
					border-radius: 42rpx;
				}
				.btn_icon {
					width: 40rpx;
					height: 40rpx;
				}
				.btn_text {
					padding-left: 4rpx;
					font-size: 32rpx;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 44rpx;
				}
			}
		}
	}
</style>