cbz/page_shop/pages/good/shopDetail.vue

<template>
	<view class="content">
		<view class="top">
			<u-navbar title="店铺详情" @leftClick="leftClick" height="44px" bgColor="rgb(255,255,255,0)" :placeholder="true">
			</u-navbar>
		</view>
		<view class="box">
			<view class="box_top hflex acenter">
				<image :src="shop.headimg" mode="aspectFill" class="avatar"></image>
				<view class="top_name">{{shop.name}}</view>
			</view>
			<view class="addr hflex acenter jbetween">
				<view class="addr_text text_hide">{{shop.address}}</view>
				<image src="/static/images/shop/map_icon.png" class="addr_icon"></image>
			</view>
			<view class="text_style1">商家简介</view>
			<view class="text_style2">{{shop.intro}}</view>
		</view>
		<view class="box1">
			<view class="text_style1">图片及视频</view>
			<view class="hflex acenter fwrap">
				<block v-for="(item,index) in shop.imgs_videos" :key="index">
					<image :src="item" mode="aspectFill" class="box1_img"></image>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import $api from '@/static/js/api.js'
	var that = ''
	export default {
		data() {
			return {
				shop: {
				},
				admin_id: '',
			}
		},
		onLoad(options) {
			that = this
			that.admin_id = options.admin_id			
			that.getData() 
		},
		methods: {
			// 返回
			leftClick() {
				console.log('返回');
				$api.jump(-1)
			},
			getData() {
				$api.req({
					url: '/data/api.Goods/user_info',
					method: 'POST',
					data: {
						admin_id: that.admin_id
					}
				}, function(res) {
					if(res.code == 1) {
						that.shop = res.data
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		background: #F4F4F4;
		position: relative;
		.top {
			background: url('https://ship.shipcc.cn/common/nav_bg.png') no-repeat;
			background-size: 100%;
			box-sizing: border-box;
			padding: 30rpx;
			height: 248rpx;
			.u-nav-slot {
				position: absolute;
				top: 8rpx;
				left: 134rpx;
			}
		}
		.box {
			// position: absolute;
			// left: 0;
			// top: 240rpx;
			width: 100%;
			background: #FFFFFF;
			box-sizing: border-box;
			padding: 30rpx;
			border-radius: 40rpx 40rpx 0  0;
			.box_top {
				position: relative;
				.avatar {
					position: absolute;
					left: 0;
					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 200rpx;
				}
			}
			.addr {
				padding: 44rpx 0 28rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #F4F4F4;
				width: 100%;
				.addr_text {
					width: 650rpx;
					font-size: 26rpx;
					font-weight: 400;
					color: #222222;
					line-height: 36rpx ;
				}
				.addr_icon {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}
		.text_style1 {
			font-size: 32rpx;
			font-weight: 500;
			color: #222222;
			padding: 24rpx 0 20rpx;
		}
		.text_style2 {
			font-size: 26rpx;
			font-weight: 400;
			color: #222222;
			line-height: 36rpx;
		}
		.box1 {
			margin: 20rpx 0;
			width: 100%;
			box-sizing: border-box;
			padding: 24rpx 30rpx;
			background: #FFFFFF;
			.box1_img {
				width: 220rpx;
				height: 220rpx;
				border-radius: 20rpx;
				margin: 0 16rpx 20rpx 0;
			}
			.box1_img:nth-child(3n+3) {
				margin: 0 0 20rpx;
			}
		}
	}
</style>