741 lines
18 KiB
Vue
741 lines
18 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<view class="select-store" v-if="sjList.length ">
|
|||
|
|
<view class="flex-row-center-between">
|
|||
|
|
<text class="select-store-title">适用门店</text>
|
|||
|
|
<view class="select-store-right flex-row-center" @click="open">
|
|||
|
|
<text class="select-store-right-text">{{ clickItem?"切换门店":"请选择门店" }}</text>
|
|||
|
|
<image class="select-store-right-img" src="/static/images/wallet/right.png"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="store-info" v-if="clickItem">
|
|||
|
|
<view class="info-header">
|
|||
|
|
<image class="info-header-left" :src="clickItem.head_photo"></image>
|
|||
|
|
<view class="info-header-right">
|
|||
|
|
<view class="info-header-right-name flex-row-center-between">
|
|||
|
|
<text class="right-name-text">{{ clickItem.name }}</text>
|
|||
|
|
<view class="right-name-distance flex-row-center">
|
|||
|
|
<image class="right-name-distance-icon" src="/static/images/icons/address_icon2.png">
|
|||
|
|
</image>
|
|||
|
|
<text class="right-name-distance-text">{{ clickItem.distance.toFixed(2) }}km</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view style="display:flex;flex-direction:row">
|
|||
|
|
<text class="info-header-right-time">
|
|||
|
|
营业时间：
|
|||
|
|
</text>
|
|||
|
|
<text class="info-header-right-time" style="color: #333;">{{ clickItem.business_time }}</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="info-bottom">
|
|||
|
|
<view class="info-bottom-left">
|
|||
|
|
<text class="info-bottom-left-address">地址：{{ clickItem.address }}</text>
|
|||
|
|
<text class="info-bottom-left-phone">电话：{{ clickItem.account}}</text>
|
|||
|
|
</view>
|
|||
|
|
<image class="right-adress-icon" src="/static/images/icons/adress.png" @click="openMap(clickItem)">
|
|||
|
|
</image>
|
|||
|
|
<image class="right-phone-icon" src="/static/images/icons/phone.png"
|
|||
|
|
@click="contactService(clickItem.account)"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<image v-else-if="!sjList.length && firstLoad" class="store-tip" src="/static/images/background/storeTip2.png" />
|
|||
|
|
|
|||
|
|
<uv-popup ref="popup" mode="bottom" bgColor="#f4f4f4">
|
|||
|
|
<view class="store-list">
|
|||
|
|
<text class="store-list-title">门店选择 </text>
|
|||
|
|
<image class="store-list-close" src="/static/images/wallet/close.png" @click="close"></image>
|
|||
|
|
<image class="store-list-tip" src="/static/images/background/storeTip.png"></image>
|
|||
|
|
|
|||
|
|
<scroll-view scroll-y style="height: 800rpx" @scrolltolower="loadMore">
|
|||
|
|
<view class="store-list-item" v-for="(item, index) in sjList" :key="index">
|
|||
|
|
<view class="item-container" @click="clickSj(item)">
|
|||
|
|
<image class="item-container-left" :src="item.head_photo"></image>
|
|||
|
|
<view class="item-container-right">
|
|||
|
|
<view class="item-container-right-name flex-row-center-between">
|
|||
|
|
<text class="right-name-text">{{ item.name }}</text>
|
|||
|
|
<view class="right-name-distance flex-row-center">
|
|||
|
|
<image class="right-name-distance-icon"
|
|||
|
|
src="/static/images/icons/address_icon2.png"></image>
|
|||
|
|
<text class="right-name-distance-text">{{ item.distance.toFixed(2) }}km</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<text class="item-container-right-time">
|
|||
|
|
营业时间：{{ item.business_time }}
|
|||
|
|
</text>
|
|||
|
|
<view class="item-container-right-adress flex-row-center">
|
|||
|
|
<text class="right-adress-text">{{ item.address }}</text>
|
|||
|
|
<image class="right-adress-icon" src="/static/images/icons/adress.png"
|
|||
|
|
@click="openMap(item)"></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="item-container-right-phone flex-row-center">
|
|||
|
|
<text class="right-phone-text">电话：{{ item.account }}</text>
|
|||
|
|
<image class="right-phone-icon" src="/static/images/icons/phone.png"
|
|||
|
|
@click="contactService(item.account)"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<view class="item-types flex-row-center">
|
|||
|
|
<text class="item-types-title">主营服务:</text>
|
|||
|
|
<scroll-view scroll-x class="item-types-scroll">
|
|||
|
|
<text class="item-type" v-for="(server, idx) in item.servers_kill_arr" :key="idx">
|
|||
|
|
{{ server }}
|
|||
|
|
</text>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 加载提示：无数据时显示空提示 -->
|
|||
|
|
<text class="empty-tip" v-if="sjList.length === 0 && !loading">
|
|||
|
|
暂无相关门店
|
|||
|
|
</text>
|
|||
|
|
<view class="load-more-tip" v-if="sjList.length > 0">
|
|||
|
|
<text class="load-more-tip-text" v-if="loading">加载中...</text>
|
|||
|
|
<text class="load-more-tip-text" v-else-if="noMore">没有更多门店了</text>
|
|||
|
|
</view>
|
|||
|
|
</scroll-view>
|
|||
|
|
</view>
|
|||
|
|
</uv-popup>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import request from '@/utils/request'
|
|||
|
|
import _public from "@/utils/public";
|
|||
|
|
import locationService from "@/utils/locationService";
|
|||
|
|
import permissionUtils from "@/utils/per";
|
|||
|
|
export default {
|
|||
|
|
props: {
|
|||
|
|
id: {
|
|||
|
|
type: [Number, String],
|
|||
|
|
default: "",
|
|||
|
|
},
|
|||
|
|
src: {
|
|||
|
|
type: String,
|
|||
|
|
default: "/user/serversSelf/sjList",
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
firstLoad: false,// 是否首次加载
|
|||
|
|
clickItem: null,
|
|||
|
|
sjList: [],
|
|||
|
|
queryData: {
|
|||
|
|
id: "",
|
|||
|
|
userLngz: "117.333333",
|
|||
|
|
userLat: "38.366667",
|
|||
|
|
page: 1,
|
|||
|
|
limit: 5,
|
|||
|
|
},
|
|||
|
|
loading: false, // 加载中状态
|
|||
|
|
noMore: false, // 没有更多数据
|
|||
|
|
totalCount: 0 // 总条数（新增：存储接口返回的count）
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
reservationAddress() {
|
|||
|
|
return this.$store.state.reservationAddress;
|
|||
|
|
},
|
|||
|
|
reservationSyr() {
|
|||
|
|
return this.$store.state.reservationSyr;
|
|||
|
|
},
|
|||
|
|
reservationTime() {
|
|||
|
|
return this.$store.state.reservationTime;
|
|||
|
|
},
|
|||
|
|
userAdrees(){
|
|||
|
|
return uni.getStorageSync("userAdrees").addressRes || getApp().globalData.addressRes;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
id(newVal) {
|
|||
|
|
if (newVal) {
|
|||
|
|
this.resetPagination();
|
|||
|
|
this.getSjList(newVal);
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
created() {
|
|||
|
|
this.getLocation();
|
|||
|
|
this.queryData.city = this.userAdrees.cCode
|
|||
|
|
if (this.id) {
|
|||
|
|
this.getSjList(this.id);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
clickSj(item) {
|
|||
|
|
this.clickItem = item;
|
|||
|
|
this.$store.commit("setSelectStore", item);
|
|||
|
|
this.$emit("select-store", item);
|
|||
|
|
this.close();
|
|||
|
|
},
|
|||
|
|
getLocation() {
|
|||
|
|
let userAdrees = uni.getStorageSync("userAdrees");
|
|||
|
|
if (userAdrees) {
|
|||
|
|
let addressRes = userAdrees.addressRes;
|
|||
|
|
this.queryData.userLat = addressRes.latitude;
|
|||
|
|
this.queryData.userLngz = addressRes.longitude;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
// 重置分页状态（新增：重置totalCount）
|
|||
|
|
resetPagination() {
|
|||
|
|
this.queryData.page = 1;
|
|||
|
|
this.sjList = [];
|
|||
|
|
this.loading = false;
|
|||
|
|
this.noMore = false;
|
|||
|
|
this.totalCount = 0; // 切换id时重置总条数
|
|||
|
|
},
|
|||
|
|
// 获取门店列表（核心优化：根据totalCount判断是否有更多数据）
|
|||
|
|
getSjList(id) {
|
|||
|
|
if (id) {
|
|||
|
|
this.queryData.id = id;
|
|||
|
|
}
|
|||
|
|
// 防止重复请求 + 没有更多数据时不请求
|
|||
|
|
if (this.loading || this.noMore) return;
|
|||
|
|
|
|||
|
|
this.loading = true;
|
|||
|
|
request
|
|||
|
|
.post(this.src, this.queryData)
|
|||
|
|
.then((res) => {
|
|||
|
|
if (res.code == 200) {
|
|||
|
|
const {
|
|||
|
|
list = [], count = 0
|
|||
|
|
} = res.data; // 解构list和count
|
|||
|
|
this.totalCount = count; // 保存总条数
|
|||
|
|
|
|||
|
|
// 第一页覆盖，后续页追加
|
|||
|
|
if (this.queryData.page === 1) {
|
|||
|
|
this.sjList = list;
|
|||
|
|
} else {
|
|||
|
|
this.sjList = this.sjList.concat(list);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 核心优化：根据总条数判断是否还有更多数据
|
|||
|
|
// 逻辑：当前已加载条数 >= 总条数 → 没有更多
|
|||
|
|
this.noMore = this.sjList.length >= this.totalCount;
|
|||
|
|
|
|||
|
|
// 额外处理：总条数为0时显示空提示
|
|||
|
|
if (this.totalCount === 0) {
|
|||
|
|
this.noMore = true;
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: res.msg || "获取门店失败",
|
|||
|
|
icon: "none",
|
|||
|
|
});
|
|||
|
|
// 请求失败回退页码
|
|||
|
|
if (this.queryData.page > 1) {
|
|||
|
|
this.queryData.page--;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
.catch((err) => {
|
|||
|
|
console.log('获取门店列表失败：', err);
|
|||
|
|
if (this.queryData.page > 1) {
|
|||
|
|
this.queryData.page--;
|
|||
|
|
}
|
|||
|
|
uni.showToast({
|
|||
|
|
title: "网络错误，请稍后重试",
|
|||
|
|
icon: "none",
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
.finally(() => {
|
|||
|
|
this.firstLoad = true;
|
|||
|
|
this.loading = false;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
// 滚动加载更多（优化：判断当前页码是否超过总页数）
|
|||
|
|
loadMore() {
|
|||
|
|
// 正在加载、没有更多数据、总条数为0时，不执行
|
|||
|
|
if (this.loading || this.noMore || this.totalCount === 0) return;
|
|||
|
|
|
|||
|
|
// 计算总页数：向上取整（总条数/每页条数）
|
|||
|
|
const totalPage = Math.ceil(this.totalCount / this.queryData.limit);
|
|||
|
|
// 当前页码 < 总页数 → 加载下一页
|
|||
|
|
if (this.queryData.page < totalPage) {
|
|||
|
|
this.queryData.page++;
|
|||
|
|
this.getSjList();
|
|||
|
|
} else {
|
|||
|
|
// 已到最后一页，直接设置noMore
|
|||
|
|
this.noMore = true;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
open() {
|
|||
|
|
this.$refs.popup.open();
|
|||
|
|
},
|
|||
|
|
close() {
|
|||
|
|
this.$refs.popup.close();
|
|||
|
|
},
|
|||
|
|
openMap(store) {
|
|||
|
|
if (!store.latitude || !store.longitude) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: "该门店暂无定位信息",
|
|||
|
|
icon: "none"
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// #ifdef MP-WEIXIN
|
|||
|
|
uni.openLocation({
|
|||
|
|
latitude: parseFloat(store.latitude),
|
|||
|
|
longitude: parseFloat(store.longitude),
|
|||
|
|
name: store.name,
|
|||
|
|
address: store.address,
|
|||
|
|
success: () => console.log("打开地图成功"),
|
|||
|
|
fail: (err) => console.log("打开地图失败：", err)
|
|||
|
|
});
|
|||
|
|
// #endif
|
|||
|
|
// #ifdef APP-PLUS
|
|||
|
|
_public.goMap({
|
|||
|
|
latitude: parseFloat(store.latitude),
|
|||
|
|
longitude: parseFloat(store.longitude),
|
|||
|
|
name: store.name,
|
|||
|
|
address: store.address,
|
|||
|
|
});
|
|||
|
|
// #endif
|
|||
|
|
},
|
|||
|
|
async contactService(phone) {
|
|||
|
|
if (!phone) {
|
|||
|
|
uni.showToast({
|
|||
|
|
title: "暂无联系电话",
|
|||
|
|
icon: "none"
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const systemInfo = uni.getSystemInfoSync();
|
|||
|
|
if (systemInfo.platform === "ios") {
|
|||
|
|
uni.makePhoneCall({
|
|||
|
|
phoneNumber: phone
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
try {
|
|||
|
|
const {
|
|||
|
|
granted
|
|||
|
|
} = await permissionUtils.checkPermission(
|
|||
|
|
"phone",
|
|||
|
|
"需要拨打电话权限，方便您联系商家"
|
|||
|
|
);
|
|||
|
|
if (granted) {
|
|||
|
|
uni.makePhoneCall({
|
|||
|
|
phoneNumber: phone
|
|||
|
|
});
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const confirm = await this.showPermissionDialog(
|
|||
|
|
"拨打电话权限申请",
|
|||
|
|
"我们需要获取拨打电话权限，以便您直接联系商家"
|
|||
|
|
);
|
|||
|
|
if (!confirm) return;
|
|||
|
|
|
|||
|
|
const result = await permissionUtils.requestPermission(
|
|||
|
|
"phone",
|
|||
|
|
"需要拨打电话权限，方便您联系商家"
|
|||
|
|
);
|
|||
|
|
if (result) {
|
|||
|
|
uni.makePhoneCall({
|
|||
|
|
phoneNumber: phone
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
locationService.openAppSettings();
|
|||
|
|
}
|
|||
|
|
} catch (err) {
|
|||
|
|
console.log("联系商家失败：", err);
|
|||
|
|
uni.showToast({
|
|||
|
|
title: "操作失败，请稍后重试",
|
|||
|
|
icon: "none"
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
showPermissionDialog(title, content) {
|
|||
|
|
return new Promise((resolve) => {
|
|||
|
|
uni.showModal({
|
|||
|
|
title,
|
|||
|
|
content,
|
|||
|
|
confirmText: "去设置",
|
|||
|
|
cancelText: "取消",
|
|||
|
|
success: (res) => resolve(res.confirm)
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="less">
|
|||
|
|
.select-store {
|
|||
|
|
margin: 20rpx 24rpx 20rpx 24rpx;
|
|||
|
|
padding: 30rpx 20rpx;
|
|||
|
|
background: #ffffff;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
|
|||
|
|
.select-store-title {
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 30rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
line-height: 42rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.select-store-right {
|
|||
|
|
|
|||
|
|
|
|||
|
|
.select-store-right-text {
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
line-height: 40rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.select-store-right-img {
|
|||
|
|
width: 12rpx;
|
|||
|
|
height: 24rpx;
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.store-tip{
|
|||
|
|
width: 702rpx;
|
|||
|
|
margin: 0 29rpx;
|
|||
|
|
height: 82rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.store-info {
|
|||
|
|
margin-top: 30rpx;
|
|||
|
|
|
|||
|
|
.info-header {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
padding-bottom: 20rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
border-bottom: 1rpx solid #F1F1F1;
|
|||
|
|
|
|||
|
|
.info-header-left {
|
|||
|
|
width: 90rpx;
|
|||
|
|
height: 90rpx;
|
|||
|
|
border-radius: 18rpx;
|
|||
|
|
object-fit: cover;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-header-right {
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
flex: 1;
|
|||
|
|
|
|||
|
|
.info-header-right-name {
|
|||
|
|
.right-name-text {
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
line-height: 40rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.right-name-distance {
|
|||
|
|
|
|||
|
|
.right-name-distance-text {
|
|||
|
|
font-family: DINPro;
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
line-height: 31rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
margin-left: 6rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.right-name-distance-icon {
|
|||
|
|
width: 19rpx;
|
|||
|
|
height: 21rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-header-right-time {
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
line-height: 33rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
margin-top: 17rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-bottom {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.info-bottom-left {
|
|||
|
|
flex: 1;
|
|||
|
|
|
|||
|
|
.info-bottom-left-address {
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
line-height: 33rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
lines:1;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
|
|||
|
|
width: 500rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-bottom-left-phone {
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
line-height: 33rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.right-adress-icon {
|
|||
|
|
width: 43rpx;
|
|||
|
|
height: 43rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.right-phone-icon {
|
|||
|
|
margin-left: 40rpx;
|
|||
|
|
width: 43rpx;
|
|||
|
|
height: 43rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.store-list {
|
|||
|
|
width: 750rpx;
|
|||
|
|
background: #f4f4f4;
|
|||
|
|
border-radius: 20rpx 20rpx 0rpx 0rpx;
|
|||
|
|
padding: 30rpx 20rpx 0 20rpx;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
.store-list-title {
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
line-height: 45rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
font-style: normal;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.store-list-close {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 40rpx;
|
|||
|
|
right: 40rpx;
|
|||
|
|
width: 24rpx;
|
|||
|
|
height: 24rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.store-list-tip {
|
|||
|
|
width: 376rpx;
|
|||
|
|
height: 64rpx;
|
|||
|
|
margin-top: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.store-list-item {
|
|||
|
|
padding: 24rpx 20rpx;
|
|||
|
|
background: #ffffff;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
|
|||
|
|
.item-container {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
|
|||
|
|
.item-container-left {
|
|||
|
|
width: 140rpx;
|
|||
|
|
height: 140rpx;
|
|||
|
|
border-radius: 24rpx;
|
|||
|
|
object-fit: cover;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-container-right {
|
|||
|
|
flex: 1;
|
|||
|
|
margin-left: 20rpx;
|
|||
|
|
|
|||
|
|
.item-container-right-name {
|
|||
|
|
.right-name-text {
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
line-height: 32rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.right-name-distance {
|
|||
|
|
|
|||
|
|
.right-name-distance-text {
|
|||
|
|
font-family: DINPro;
|
|||
|
|
font-weight: 500;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
line-height: 31rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
margin-left: 6rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.right-name-distance-icon {
|
|||
|
|
width: 19rpx;
|
|||
|
|
height: 21rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-container-right-time {
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
line-height: 33rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
margin-top: 4rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-container-right-adress {
|
|||
|
|
margin-top: 4rpx;
|
|||
|
|
|
|||
|
|
.right-adress-text {
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
line-height: 33rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
// width: 460rpx;
|
|||
|
|
max-width: 460rpx;
|
|||
|
|
lines:1;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.right-adress-icon {
|
|||
|
|
width: 35rpx;
|
|||
|
|
height: 35rpx;
|
|||
|
|
margin-left: 14rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-container-right-phone {
|
|||
|
|
margin-top: 4rpx;
|
|||
|
|
|
|||
|
|
.right-phone-text {
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
line-height: 33rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
// width: 460rpx;
|
|||
|
|
lines:1;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.right-phone-icon {
|
|||
|
|
width: 35rpx;
|
|||
|
|
height: 35rpx;
|
|||
|
|
margin-left: 14rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-types {
|
|||
|
|
margin-top: 14rpx;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
|
|||
|
|
.item-types-title {
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
line-height: 33rpx;
|
|||
|
|
text-align: left;
|
|||
|
|
font-style: normal;
|
|||
|
|
margin-right: 10rpx;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.item-types-scroll {
|
|||
|
|
white-space: nowrap;
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.item-type {
|
|||
|
|
margin: 0 14rpx;
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
color: #666666;
|
|||
|
|
line-height: 32rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
font-style: normal;
|
|||
|
|
padding: 0 14rpx;
|
|||
|
|
height: 32rpx;
|
|||
|
|
background: #f3f3f3;
|
|||
|
|
border-radius: 16rpx;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 空数据提示样式
|
|||
|
|
.empty-tip {
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 80rpx 0;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
background: #ffffff;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 加载提示样式
|
|||
|
|
.load-more-tip {
|
|||
|
|
padding: 20rpx 0;
|
|||
|
|
color: #999999;
|
|||
|
|
// background: #ffffff;
|
|||
|
|
border-radius: 20rpx;
|
|||
|
|
margin-bottom: 20rpx;
|
|||
|
|
|
|||
|
|
.load-more-tip-text {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.flex-row-center-between {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.flex-row-center {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
</style>
|