You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
yanzong_qianduan/components/page/diyComponents/shop/index.vue

98 lines
2.0 KiB

5 months ago
<template>
<!-- 门店列表 -->
<view class="diy-shop">
<view class="shop-item dis-flex flex-y-center" v-for="(dataItem, index) in dataList" :key="index"
@click="handleNavDetail(dataItem.shop_id)">
<view class="shop-item__logo">
<image class="image" :src="dataItem.logo_url"></image>
</view>
<view class="shop-item__content">
<view class="shop-item__title">
<span>{{ dataItem.shop_name }}</span>
</view>
<view class="shop-item__address oneline-hide">
<span>门店地址{{ dataItem.region.province }}{{ dataItem.region.city }}{{ dataItem.region.region }}{{ dataItem.address }}</span>
</view>
<view class="shop-item__phone">
<span>联系电话{{ dataItem.phone }}</span>
</view>
</view>
</view>
</view>
</template>
<script>
import mixin from '../mixin'
export default {
/**
* 组件的属性列表
* 用于组件自定义设置
*/
props: {
itemIndex: String,
itemStyle: Object,
params: Object,
dataList: Array
},
mixins: [mixin],
/**
* 组件的方法列表
* 更新属性和数据的方法与更新页面数据的方法类似
*/
methods: {
// 跳转到门店详情页
handleNavDetail(shopId) {
this.$navTo('pages/shop/detail', { shopId })
}
}
}
</script>
<style lang="scss" scoped>
.shop-item {
padding: 16rpx 30rpx;
min-height: 180rpx;
font-size: 26rpx;
line-height: 1.5;
border-bottom: 1rpx solid #eee;
box-sizing: border-box;
}
.shop-item__logo {
margin-right: 30rpx;
.image {
display: block;
width: 130rpx;
height: 130rpx;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.1);
}
}
.shop-item__content {
flex: 1;
}
.shop-item__title {
font-size: 28rpx;
color: #535353;
margin-bottom: 10rpx;
}
.shop-item__address,
.shop-item__phone {
color: #919396;
}
.shop-item__address {
width: 520rpx;
}
</style>