946 lines
25 KiB
Vue
946 lines
25 KiB
Vue
<template>
|
||
<view class="supermarket-container">
|
||
<view class="hander">
|
||
<uni-nav-bar
|
||
class="hander-nav-bar"
|
||
title=""
|
||
:fixed="true"
|
||
:statusBar="true"
|
||
:border="false"
|
||
backgroundColor="transparent"
|
||
>
|
||
<view class="title-name">门店列表</view>
|
||
<block slot="left">
|
||
<uni-icons type="back" color="#fff" size="24" @click="handerSkip" />
|
||
</block>
|
||
</uni-nav-bar>
|
||
</view>
|
||
<view class="address-block">
|
||
<view class="address-name" @click="selectAddress">
|
||
<text class="iconfontAili icon-dingwei"></text>
|
||
<text class="address-box">{{
|
||
originalData.result.sematic_description
|
||
}}</text>
|
||
<text class="iconfontAili icon-right"></text>
|
||
</view>
|
||
<view class="refresh-address" @click="anewLoction">
|
||
<text class="iconfontAili icon-zhongxindingwei"></text>
|
||
<text style="padding-left: 8rpx">重新定位</text>
|
||
</view>
|
||
</view>
|
||
<view class="supermarketl-list">
|
||
<view class="input-block">
|
||
<view class="input-view">
|
||
<uni-icons
|
||
type="search"
|
||
size="22"
|
||
color="#666666"
|
||
style="line-height: 60rpx"
|
||
/>
|
||
<input
|
||
confirm-type="search"
|
||
class="input"
|
||
type="text"
|
||
v-model="storeName"
|
||
placeholder="输入超市名进行搜索"
|
||
@input="handerInputName"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<scroll-view
|
||
class="m-scroll-list"
|
||
scroll-y="true"
|
||
@scrolltolower="scrollbottom"
|
||
:show-scrollbar="false"
|
||
:scroll-with-animation="false"
|
||
enhanced
|
||
>
|
||
<view class="">
|
||
<view
|
||
class="list-content"
|
||
v-for="(item, index) of shopList"
|
||
:key="index"
|
||
@click="handerSkipShop(item)"
|
||
>
|
||
<view :class="['list-item-hander']">
|
||
<view :class="['list-item-img', {'is-rest': item.store_biz_state ==2 }]">
|
||
<image
|
||
class="item-img"
|
||
lazy-load
|
||
:src="item.store_logo"
|
||
></image>
|
||
<view class="is-rest-bg" v-if="item.store_biz_state ==2"></view>
|
||
<view class="is-rest-tips" v-if="item.store_biz_state ==2">休息中</view>
|
||
</view>
|
||
<view class="list-item-info">
|
||
<view class="list-item-name">{{ item.store_name }}</view>
|
||
<view class="list-item-time"
|
||
>{{ item.store_opening_hours }}~{{
|
||
item.store_close_hours
|
||
}}</view
|
||
>
|
||
<view class="list-item-address">
|
||
<view class="address-name">{{ item.store_address }}</view>
|
||
<view class="list-item-distance">
|
||
<text class="distance-number">{{
|
||
(item.distance / 1000).toFixed(2)
|
||
}}</text>
|
||
<text class="distance-unit">km</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="list-item-bottom">
|
||
<view class="list-item-lable-list">
|
||
<!-- <text class="list-item-lable">实体店</text> -->
|
||
<text class="list-item-lable" v-if="item.chain_count > 0"
|
||
>上门自提</text
|
||
>
|
||
<text class="list-item-lable" v-if="same_city_setting_count > 0"
|
||
>同城配送</text
|
||
>
|
||
</view>
|
||
<view class="list-item-skipu">
|
||
<text class="skipu-name">详细</text>
|
||
<text class="iconfontAili icon-right"></text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<block v-if="ispage">
|
||
<view class="u-loadmore">
|
||
<label class="u-loading"></label>
|
||
<text class="u-loadmore-tips">{{ __("正在加载") }}</text>
|
||
</view>
|
||
</block>
|
||
<block v-else>
|
||
<view class="u-loadmore u-loadmore-line">
|
||
<text class="u-loadmore-tips">{{ __("没有更多数据啦！") }}</text>
|
||
</view>
|
||
</block>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { mapState, mapMutations } from "vuex";
|
||
var bmap = require("../../libs/bmap-wx");
|
||
export default {
|
||
data() {
|
||
return {
|
||
ispage: false,
|
||
originalData: {
|
||
result: {
|
||
sematic_description: "定位中..",
|
||
},
|
||
},
|
||
addressInfo: {},
|
||
provinceData: [],
|
||
cityData: [],
|
||
areaData: [],
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
time: null,
|
||
shopList: [],
|
||
time2: null,
|
||
isNoData: false,
|
||
storeName: "",
|
||
};
|
||
},
|
||
computed: mapState([
|
||
"Config",
|
||
"StateCode",
|
||
"notice",
|
||
"plantformInfo",
|
||
"shopInfo",
|
||
"userInfo",
|
||
"hasLogin",
|
||
]),
|
||
onLoad(options) {
|
||
// if (options) {
|
||
// this.originalData.result.sematic_description = options.address;
|
||
// }
|
||
},
|
||
onPullDownRefresh() {
|
||
this.pageNum = 1;
|
||
this.storeName = "";
|
||
this.shopList = [];
|
||
this.getShopList(null);
|
||
},
|
||
onShow() {
|
||
let item = uni.getStorageSync("currentAddress");
|
||
this.getAppDistrict();
|
||
if (item) {
|
||
this.originalData.result.sematic_description = item.name;
|
||
this.addressInfo = item;
|
||
this.getShopList();
|
||
} else {
|
||
this.isPhoneLocationEnabled();
|
||
}
|
||
},
|
||
onHide() {
|
||
this.time = null;
|
||
clearTimeout(this.time);
|
||
this.time2 = null;
|
||
clearTimeout(this.time2);
|
||
this.shopList = [];
|
||
this.pageNum = 1;
|
||
},
|
||
methods: {
|
||
handerSkipShop(item) {
|
||
let km = (item.distance / 1000).toFixed(2);
|
||
|
||
uni.navigateTo({
|
||
url: `/pagesub/index/store?store_id=${item.store_id}&d=${km}km`,
|
||
});
|
||
},
|
||
handerSkip() {
|
||
this.$.gopage("/pages/index/index");
|
||
},
|
||
handerInputName(e) {
|
||
this.storeName = e.target.value;
|
||
|
||
if (this.time !== null) {
|
||
clearTimeout(this.time);
|
||
}
|
||
|
||
this.time = setTimeout(() => {
|
||
this.getShopList(e.target.value, null, true);
|
||
}, 600);
|
||
},
|
||
isPhoneLocationEnabled() {
|
||
let _this = this;
|
||
// 获取用户手机系统信息
|
||
uni.getSystemInfo({
|
||
success: (res) => {
|
||
const locationEnabled = res.locationEnabled;
|
||
if (locationEnabled) {
|
||
// 手机GPS定位已开启则判断微信APP是否已获取访问定位信息的权限
|
||
_this.isAppAuthorized();
|
||
} else {
|
||
// 手机GPS定位未开启则引导用户手动前往开启
|
||
uni.showModal({
|
||
title: "提示",
|
||
content:
|
||
'小程序需要基于您的手机定位信息为您提供服务，当前检测到您的手机并未打开定位开关，请关闭小程序后前往 "设置 - 定位服务/位置信息" 开启手机定位，然后重新进入小程序~',
|
||
showCancel: false,
|
||
confirmText: "我已知悉",
|
||
});
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
console.log("用户手机系统信息获取失败", err);
|
||
},
|
||
});
|
||
},
|
||
isAuthorized(a = "scope.userLocation") {
|
||
// 检查当前是否已经授权访问scope属性
|
||
let _this = this;
|
||
uni.getSetting({
|
||
success: (res) => {
|
||
let userLocation = res.authSetting[a];
|
||
if (!userLocation) {
|
||
// 判断当前是否获得授权，如果没有就去申请授权
|
||
_this.getAuthorize();
|
||
} else {
|
||
_this.getLocation();
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
_this.openSetting();
|
||
},
|
||
});
|
||
},
|
||
isAppAuthorized() {
|
||
let _this = this;
|
||
// 微信APP授权设置
|
||
const appAuthorizeSetting = uni.getAppAuthorizeSetting();
|
||
// 是否允许微信使用定位信息的开关
|
||
let locationAuthorized = appAuthorizeSetting.locationAuthorized;
|
||
switch (locationAuthorized) {
|
||
case "authorized":
|
||
_this.isAuthorized();
|
||
break;
|
||
case "denied":
|
||
uni.showModal({
|
||
title: "提示",
|
||
content:
|
||
"已拒绝微信获取定位权限，即将打开权限管理页面，请把定位权限设置为允许~",
|
||
confirmText: "前往设置",
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
_this.openAppAuthorizeSetting();
|
||
} else if (res.cancel) {
|
||
_this.rejectGetLocation();
|
||
}
|
||
},
|
||
});
|
||
break;
|
||
case "not determined":
|
||
uni.showModal({
|
||
title: "提示",
|
||
content: "请授权微信获取定位权限~",
|
||
confirmText: "同意授权",
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
_this.openAppAuthorizeSetting();
|
||
} else if (res.cancel) {
|
||
_this.rejectGetLocation();
|
||
}
|
||
},
|
||
});
|
||
break;
|
||
}
|
||
},
|
||
getAuthorize(a = "scope.userLocation") {
|
||
let _this = this;
|
||
// uniapp弹窗弹出获取授权（地理，个人微信信息等授权信息）弹窗
|
||
uni.authorize({
|
||
scope: a,
|
||
success: () => {
|
||
_this.getLocation();
|
||
},
|
||
fail: () => {
|
||
_this.openSetting();
|
||
},
|
||
});
|
||
},
|
||
openSetting() {
|
||
let _this = this;
|
||
uni.showModal({
|
||
title: "提示",
|
||
content: "我们需要获取您的位置信息，为您提供服务~",
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
uni.openSetting({
|
||
success: (res) => {
|
||
if (res.authSetting["scope.userLocation"] === true) {
|
||
_this.getLocation();
|
||
} else {
|
||
_this.rejectGetLocation();
|
||
}
|
||
},
|
||
fail: (err) => {
|
||
console.log("小程序授权弹窗打开失败", err);
|
||
},
|
||
});
|
||
} else if (res.cancel) {
|
||
_this.rejectGetLocation();
|
||
}
|
||
},
|
||
});
|
||
},
|
||
rejectGetLocation() {
|
||
uni.showToast({
|
||
title: "您拒绝了位置授权，小程序无法继续提供出行服务~",
|
||
icon: "none",
|
||
duration: 3000,
|
||
});
|
||
},
|
||
openAppAuthorizeSetting() {
|
||
let _this = this;
|
||
uni.openAppAuthorizeSetting({
|
||
success: (res) => {
|
||
console.log("打开系统微信授权管理页成功", res);
|
||
_this.isAuthorized();
|
||
},
|
||
fail: (err) => {
|
||
console.log("打开系统微信授权管理页失败", err);
|
||
},
|
||
});
|
||
},
|
||
getLocation() {
|
||
uni.getLocation({
|
||
type: "wgs84",
|
||
isHighAccuracy: true,
|
||
success: function (res) {
|
||
location = res.latitude + "," + res.longitude;
|
||
|
||
let BMap = new bmap.BMapWX({
|
||
ak: "LkqqCMB1qZmjYEkzx0Y1PTfmAUrkWPog",
|
||
});
|
||
|
||
let fail = function (res) {
|
||
console.log("fail", res);
|
||
};
|
||
|
||
let success = function (res) {
|
||
console.log("结果地址", res);
|
||
that.originalData = res.originalData;
|
||
that.getShopList(null);
|
||
};
|
||
|
||
BMap.regeocoding({
|
||
location: location,
|
||
coordtype: "wgs84ll",
|
||
ret_coordtype: "gcj02ll",
|
||
fail: fail,
|
||
success: success,
|
||
});
|
||
},
|
||
fail: function (error) {
|
||
console.error("获取位置失败：", error);
|
||
},
|
||
});
|
||
},
|
||
selectAddress() {
|
||
uni.navigateTo({
|
||
url: "/address/selectShippingAddress?isShopList=true",
|
||
});
|
||
},
|
||
getAppDistrict() {
|
||
let that = this;
|
||
// 读取地区数据 【为了不同项目的小程序包体大小考虑，这里不能直接把数据放前端，可以使用服务端缓存和浏览器与小程序的本地存储来优化】
|
||
let district_data = uni.getStorageSync("district_data");
|
||
if (!district_data) {
|
||
that.$.request({
|
||
url: that.cf.URL.getAppDistrict,
|
||
data: {},
|
||
loading: false,
|
||
ajaxCache: {
|
||
timeout: this.cf.CACHE_EXPIRE,
|
||
},
|
||
success: function (data, status, msg, code) {
|
||
if (status == 200) {
|
||
uni.setStorageSync("district_data", data);
|
||
that.setDistrictData(data);
|
||
}
|
||
},
|
||
});
|
||
} else {
|
||
that.setDistrictData(district_data);
|
||
}
|
||
},
|
||
setDistrictData(district_data) {
|
||
this.provinceData = district_data.provinceData;
|
||
this.cityData = district_data.cityData;
|
||
this.areaData = district_data.areaData;
|
||
},
|
||
fuzzyMatch(shortStr, longStr) {
|
||
if (!shortStr || !longStr) {
|
||
console.log("找不到地址");
|
||
return;
|
||
}
|
||
|
||
const lowerShortStr = shortStr.toLowerCase();
|
||
const lowerLongStr = longStr.toLowerCase();
|
||
|
||
return lowerShortStr.includes(lowerLongStr);
|
||
},
|
||
getLocation() {
|
||
var that = this;
|
||
|
||
var location = "";
|
||
|
||
uni.getLocation({
|
||
type: "wgs84",
|
||
success: function (res) {
|
||
location = res.latitude + "," + res.longitude;
|
||
|
||
let BMap = new bmap.BMapWX({
|
||
ak: "LkqqCMB1qZmjYEkzx0Y1PTfmAUrkWPog",
|
||
});
|
||
|
||
let fail = function (res) {
|
||
console.log("fail", res);
|
||
};
|
||
|
||
let success = function (res) {
|
||
console.log("结果地址", res);
|
||
that.originalData = res.originalData;
|
||
|
||
that.getShopList(null, res.originalData.result.location);
|
||
};
|
||
|
||
BMap.regeocoding({
|
||
location: location,
|
||
coordtype: "wgs84ll",
|
||
ret_coordtype: "gcj02ll",
|
||
fail: fail,
|
||
success: success,
|
||
});
|
||
},
|
||
fail: function (error) {
|
||
console.error("获取位置失败：", error);
|
||
},
|
||
});
|
||
},
|
||
async getShopList(storeName, currlocation, isSearch) {
|
||
let that = this;
|
||
|
||
var province = {
|
||
label: "",
|
||
value: 0,
|
||
};
|
||
|
||
var city = {
|
||
label: "",
|
||
value: 0,
|
||
};
|
||
|
||
var county = {
|
||
label: "",
|
||
value: 0,
|
||
};
|
||
|
||
var location = {
|
||
lat: 0,
|
||
lng: 0,
|
||
};
|
||
if (!currlocation) {
|
||
var item = this.addressInfo;
|
||
|
||
if (item && item.ud_id) {
|
||
province.value = item.ud_province_id;
|
||
city.value = item.ud_city_id;
|
||
county.value = item.ud_county_id;
|
||
location = item.location;
|
||
}
|
||
|
||
if (item && !item.ud_id) {
|
||
let res = await this.getAddressUid(item.uid);
|
||
let items = res.data.result;
|
||
|
||
location = items.location;
|
||
|
||
this.provinceData.forEach((group) => {
|
||
let isFind = this.fuzzyMatch(items.province, group.label);
|
||
if (isFind) {
|
||
province = group;
|
||
}
|
||
});
|
||
|
||
this.cityData.forEach((group) => {
|
||
group.forEach((group1) => {
|
||
let isFind = this.fuzzyMatch(group1.label, items.city);
|
||
if (isFind) {
|
||
city = group1;
|
||
}
|
||
});
|
||
});
|
||
|
||
this.areaData.forEach((group) => {
|
||
group.forEach((group1) => {
|
||
group1.forEach((group2) => {
|
||
let isFind = this.fuzzyMatch(group2.label, items.area);
|
||
if (isFind) {
|
||
county = group2;
|
||
}
|
||
});
|
||
});
|
||
});
|
||
}
|
||
} else {
|
||
let data = this.originalData.result.addressComponent;
|
||
this.provinceData.forEach((group) => {
|
||
let isFind = this.fuzzyMatch(data.province, group.label);
|
||
if (isFind) {
|
||
province = group;
|
||
}
|
||
});
|
||
|
||
this.cityData.forEach((group) => {
|
||
group.forEach((group1) => {
|
||
let isFind = this.fuzzyMatch(group1.label, data.city);
|
||
if (isFind) {
|
||
city = group1;
|
||
}
|
||
});
|
||
});
|
||
|
||
this.areaData.forEach((group) => {
|
||
group.forEach((group1) => {
|
||
group1.forEach((group2) => {
|
||
let isFind = this.fuzzyMatch(group2.label, data.district);
|
||
if (isFind) {
|
||
county = group2;
|
||
}
|
||
});
|
||
});
|
||
});
|
||
location = currlocation;
|
||
|
||
console.log(province, city, county);
|
||
}
|
||
|
||
let params = {
|
||
provinceId: province.value,
|
||
cityId: city.value,
|
||
countyId: county.value,
|
||
userLng: location.lng,
|
||
userLat: location.lat,
|
||
storeCategoryId: 1003,
|
||
pageNum: this.pageNum,
|
||
pageSize: this.pageSize,
|
||
storeName: this.storeName || "",
|
||
};
|
||
that.ispage = true;
|
||
that.$.request({
|
||
url: that.Config.URL.store.nearList,
|
||
data: params,
|
||
success: (res, status) => {
|
||
if (status == 200) {
|
||
if (res.items.length > 0) {
|
||
if (isSearch) {
|
||
that.shopList = res.items;
|
||
} else {
|
||
that.shopList = [...that.shopList, ...res.items];
|
||
}
|
||
|
||
console.log(that.shopList);
|
||
} else {
|
||
that.isNoData = true;
|
||
that.pageNum = 1;
|
||
}
|
||
that.ispage = false;
|
||
}
|
||
},
|
||
fail: (res) => {},
|
||
});
|
||
},
|
||
getAddressUid(uid) {
|
||
let baiduParams = {
|
||
uid: uid,
|
||
scope: 1,
|
||
ak: "qWKt2xbrqXsp2yK35YYXVBNZgrbiCG5v",
|
||
output: "json",
|
||
};
|
||
|
||
return new Promise((resolve) => {
|
||
uni.request({
|
||
url: "https://api.map.baidu.com/place/v2/detail",
|
||
data: baiduParams,
|
||
success(res) {
|
||
console.log("66", res);
|
||
resolve(res);
|
||
},
|
||
fail(res) {
|
||
resolve(res);
|
||
},
|
||
});
|
||
}).catch((e) => {});
|
||
},
|
||
scrollbottom() {
|
||
if (this.isNoData) return;
|
||
if (this.time2 !== null) {
|
||
clearTimeout(this.time2);
|
||
}
|
||
this.time2 = setTimeout(() => {
|
||
this.pageNum = this.pageNum + 1;
|
||
this.getShopList();
|
||
}, 600);
|
||
},
|
||
anewLoction() {
|
||
uni.removeStorageSync("currentAddress");
|
||
this.time = null;
|
||
clearTimeout(this.time);
|
||
this.time2 = null;
|
||
clearTimeout(this.time2);
|
||
this.shopList = [];
|
||
this.pageNum = 1;
|
||
this.isPhoneLocationEnabled();
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.supermarket-container {
|
||
height: 100vh;
|
||
// background: linear-gradient(to top left, #e85169, #e93340);
|
||
// background: linear-gradient(to top left, #e93340, #e85169);
|
||
background: rgb(249, 55, 43);
|
||
overflow: hidden;
|
||
|
||
.hander {
|
||
.title-name {
|
||
width: 100vw;
|
||
font-size: 16px;
|
||
text-align: center;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
/* 隐藏滚动条 */
|
||
.m-scroll-list {
|
||
scrollbar-width: none; /* Firefox */
|
||
}
|
||
|
||
.m-scroll-list::-webkit-scrollbar {
|
||
display: none; /* Chrome, Safari */
|
||
}
|
||
|
||
.address-block {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
color: #fff;
|
||
padding: 16px;
|
||
|
||
.address-name {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.address-box {
|
||
display: block;
|
||
margin: 0 6px;
|
||
max-width: 180px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.icon-zhongxindingwei {
|
||
margin-right: 4px;
|
||
}
|
||
}
|
||
|
||
.m-scroll-list {
|
||
height: calc(100vh - 220px);
|
||
}
|
||
|
||
.supermarketl-list {
|
||
background: #f4f5f9;
|
||
padding: 4px;
|
||
border-top-left-radius: 18px;
|
||
border-top-right-radius: 18px;
|
||
overflow: hidden;
|
||
|
||
.input-view {
|
||
// width: 50%;
|
||
display: flex;
|
||
background-color: #ffffff;
|
||
height: 60rpx;
|
||
border-radius: 30rpx;
|
||
padding: 0 4%;
|
||
flex-wrap: nowrap;
|
||
margin: 20px 10px;
|
||
line-height: 60rpx;
|
||
color: #b9b9b9;
|
||
}
|
||
|
||
.input-view .uni-icon {
|
||
line-height: 60rpx !important;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.input-view .uni-icons {
|
||
font-size: 32rpx !important;
|
||
}
|
||
|
||
.input-view .input {
|
||
height: 60rpx;
|
||
line-height: 60rpx;
|
||
width: 100%;
|
||
padding: 0 2%;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
.list-content {
|
||
margin: 10px;
|
||
background: #fff;
|
||
border-radius: 6px;
|
||
padding: 18px 12px;
|
||
|
||
.list-item-hander {
|
||
display: flex;
|
||
|
||
.list-item-img {
|
||
border-radius: 10px;
|
||
margin-right: 12px;
|
||
width: 102px;
|
||
height: 102px;
|
||
min-width: 102px;
|
||
min-height: 102px;
|
||
overflow: hidden;
|
||
|
||
.item-img {
|
||
width: 102px;
|
||
height: 102px;
|
||
}
|
||
}
|
||
|
||
.list-item-info {
|
||
flex: 1 1;
|
||
font-size: 13px;
|
||
color: #5e6066;
|
||
line-height: 18px;
|
||
|
||
.list-item-name {
|
||
font-size: 16px;
|
||
color: #2f3033;
|
||
line-height: 22px;
|
||
margin-bottom: 6px;
|
||
font-weight: 700;
|
||
max-width: 258px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.list-item-time {
|
||
font-size: 13px;
|
||
color: #5e6066;
|
||
line-height: 18px;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.list-item-address {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.address-name {
|
||
max-width: 180px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.list-item-distance {
|
||
.distance-number {
|
||
font-weight: 700;
|
||
font-size: 20px;
|
||
color: #000;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.is-rest{
|
||
position: relative;
|
||
|
||
.is-rest-bg{
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 40rpx;
|
||
background: #000;
|
||
opacity: 0.5;
|
||
z-index: 2;
|
||
}
|
||
|
||
.is-rest-tips{
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 100%;
|
||
line-height: 40rpx;
|
||
font-size: 24rpx;
|
||
color: #fff;
|
||
text-align: center;
|
||
z-index: 3;
|
||
}
|
||
}
|
||
|
||
.list-item-bottom {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.list-item-lable-list {
|
||
.list-item-lable {
|
||
margin-right: 9px;
|
||
border-radius: 4px;
|
||
height: 18px;
|
||
font-size: 11px;
|
||
padding: 0 4px;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #6f7dad;
|
||
background: #f4f6fa;
|
||
}
|
||
}
|
||
|
||
.list-item-skipu {
|
||
font-size: 14px;
|
||
font-weight: 700;
|
||
color: #fe0137;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 小屏幕设备（如 iPhone 5/SE） */
|
||
@media screen and (max-width: 320px) {
|
||
.address-block {
|
||
.address-box {
|
||
max-width: 140px;
|
||
}
|
||
}
|
||
|
||
.list-item-img {
|
||
width: 62px !important;
|
||
height: 62px !important;
|
||
min-width: 62px !important;
|
||
min-height: 62px !important;
|
||
|
||
.item-img {
|
||
width: 62px !important;
|
||
height: 62px !important;
|
||
}
|
||
}
|
||
|
||
.address-name {
|
||
max-width: 120px !important;
|
||
}
|
||
}
|
||
|
||
/* 中等屏幕设备（如 iPhone 6/7/8/X） */
|
||
@media screen and (min-width: 321px) and (max-width: 414px) {
|
||
.m-product-info {
|
||
width: 60%;
|
||
}
|
||
.list-item-img {
|
||
width: 62px !important;
|
||
height: 62px !important;
|
||
min-width: 62px !important;
|
||
min-height: 62px !important;
|
||
|
||
.item-img {
|
||
width: 62px !important;
|
||
height: 62px !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 大屏幕设备（如 iPhone Plus 系列） */
|
||
@media screen and (min-width: 415px) {
|
||
/* 可以添加针对大屏幕的样式 */
|
||
.list-item-img {
|
||
width: 102px !important;
|
||
height: 102px !important;
|
||
min-width: 102px !important;
|
||
min-height: 102px !important;
|
||
|
||
.item-img {
|
||
width: 102px !important;
|
||
height: 102px !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
/* 专门针对 iPhone X 的竖屏模式 */
|
||
@media only screen
|
||
and (min-device-width: 375px)
|
||
and (max-device-width: 812px)
|
||
and (-webkit-device-pixel-ratio: 3)
|
||
and (orientation: portrait) {
|
||
.list-item-img {
|
||
width: 62px !important;
|
||
height: 62px !important;
|
||
min-width: 62px !important;
|
||
min-height: 62px !important;
|
||
|
||
.item-img {
|
||
width: 62px !important;
|
||
height: 62px !important;
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
}
|
||
</style> |