1.0yangche/components/shop-item/shop-item.vue

<template>
	<view class="wrap">
		<view class="item" v-for="item,index in msg" :key="index">
			<view class="nav_list clear" :data-id = "item.id" @tap="toShopDetail(item.id)">
				<view class="nav_list_img"><image :src="url + item.imgLog" mode="aspectFill"></image></view>
				<view class="middle">
					<view class="clear">
						<view class="middle_title">{{item.name}}</view>
						<view class="middle_title_pai" v-if="item.status == 1">
							<image src="https://wx.fujinyangche.com/nvrnetwork/images/vip.png"></image>
						</view>	
					</view> 
					<view style="margin-top:10rpx;overflow:hidden;">
						<view v-for="item,index in item.mainBusiness" :key="index" class="middle_qian">{{item}}</view>
					</view>
					<view class="nav_address">{{item.street}}</view>
					<view class="recommend" v-if="item.isHot == 1">荐</view>
					<view class="distance">{{item.distance}}</view>
				</view>
			</view>
			<view class="back1"></view>
		</view>	
	</view>	
</template>

<script>
	let app = getApp();
	export default {
		data() {
			return {
				url:app.globalData.url
			}
		},
		props:['msg'],
		methods: {
			//跳转店铺详情
			toShopDetail(id){
				uni.navigateTo({
					url:"/pages/packageOne/service/classify/shop_detail/shop_detail?id=" + id
				})
			}
		}
	}
</script>

<style>
	.clear:after{
		content: "";
		display: block;
		clear:both;
	}
	.nav_list{
	  width:100%;
	  height:208rpx;
	  box-sizing: border-box;
	  position: relative;
	  padding:24rpx 0 24rpx 30rpx;
	}
	.nav_list_img{
	  width:160rpx;
	  height:160rpx;
	  float:left;
	  overflow: hidden;
	  position: relative;
	}
	.nav_list_img image{
	  display: block;
	  width:100%;
	  height:100%;
	  position: absolute;
	  top:50%;
	  left:50%;
	  transform: translate(-50%,-50%);
	  border-radius: 6rpx;
	}
	.middle{
	  width:480rpx;
	  margin-left: 20rpx;
	  float:left;
	}
	.middle_title{
	  width:400rpx;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  white-space: nowrap;
	  font-size: 30rpx;
	  color:#2A2A2A;
	  font-weight: bold;
	  float:left;
	}
	.middle_title_pai{
	  width:120rpx;
	  height:37rpx;
	  position: absolute;
	  top:28rpx;
	  right:30rpx;
	}
	.middle_title_pai image{
	  display: block;
	  width: 100%;
	  height:100%;
	}
	.middle_qian{
	  width: 150rpx;
	  box-sizing: border-box;
	  overflow: hidden;
	  white-space: nowrap;
	  text-overflow: ellipsis;
	  padding:0 16rpx;
	  height:34rpx;
	  background:rgba(231,120,23,0.06);
	  border-radius:4rpx;
	  text-align: center;
	  line-height: 34rpx;
	  font-size: 22rpx;
	  color:#E77817;
	  display: inline-block;
	  margin-right:10rpx;
	}
	.nav_address{
	  width:310rpx;
	  font-size: 26rpx;
	  color:#999999;
	  margin-top:20rpx;
	  overflow: hidden;
	  text-overflow: ellipsis;
	  white-space: nowrap;
	}
	.recommend{
	  width:28rpx;
	  height:28rpx;
	  color:#ffffff;
	  font-size: 22rpx;
	  text-align: center;
	  line-height: 28rpx;
	  background:linear-gradient(270deg,rgba(254,107,21,1) 0%,rgba(254,163,48,1) 100%);
	  position: absolute;
	  top:12rpx;
	  right:0rpx;
	}
	.distance{
	  font-size: 24rpx;
	  color:#999999;
	  position: absolute;
	  right:30rpx;
	  bottom:36rpx;
	}
	.back1{
		width:100%;
		height: 10rpx;
		background-color: rgba(249,249,249,1);

	}
</style>