wanmeiyizhan/pages/home/index.vue
2025-03-13 22:14:06 +08:00

2024 lines
61 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="main">
<div
v-if="loginType === 'min'"
class="topBox"
:style="{ height: menu.bottom + 8 + 'px' }"
>
<div
class="topContent"
:style="{ paddingTop: menu.top + 'px', height: menu.height + 'px' }"
>
<div class="topLeft">
<image class="YDIcon" src="/static/images/home/YDIcon.png" />
<span class="pageTitle">皖美驿站</span>
</div>
<div class="topRight" @click="goSelectServer">
<image class="searchIcon" src="/static/images/home/searchIcon.png" />
<span class="searchText">请输入服务区</span>
</div>
</div>
</div>
<div
class="appTopBox"
v-else
:style="{
paddingTop: menu.top + 10 + 'px',
height: menu.top + 50 + 'px',
}"
>
<div class="topContent">
<div class="topLeft">
<image class="YDIcon" src="/static/images/home/YDIcon.png" />
<span class="pageTitle">皖美驿站</span>
</div>
<div class="topRight" @click="goSelectServer">
<image class="searchIcon" src="/static/images/home/searchIcon.png" />
<span class="searchText">请输入服务区</span>
</div>
</div>
</div>
<!-- 轮播框 -->
<div
class="carousel"
:style="{
marginTop:
loginType === 'min' ? `${menu.bottom + 8}px` : `${menu.top + 50}px`,
}"
v-if="showBanner"
>
<swiper
scroll-x="true"
autoplay="true"
circular="true"
class="banner"
@change="swiperChange($event, 'currentBan')"
:current="currentBan"
>
<swiper-item v-for="(image, i) in bannerList" :key="i">
<image class="swiperImg" :src="image"></image>
</swiper-item>
</swiper>
</div>
<!-- 页面其他内容 -->
<div class="content">
<!-- 用户信息框 -->
<!-- 说用户信息隐藏 只有在我的页面显示 2025.03.13 -->
<div class="userBox" v-if="false">
<!-- 头像 -->
<div class="profile">
<!-- <open-data type="userAvatarUrl"></open-data> -->
<!-- <div
style="
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
"
>
<image
style="width: 40%; height: 40%"
src="/static/images/home/defaultUser.png"
/>
</div> -->
<button
class="avatarBtn"
open-type="chooseAvatar"
@chooseavatar="onChooseAvatar"
>
<image
class="headerImg"
:src="WXProfile || user.MEMBERSHIP_HEADIMAGEURL"
/>
</button>
</div>
<!-- 用户详细 -->
<div class="detailBox" @click="handleGoToUser">
<div class="userDetail">
<span class="userName" @click.stop="handleGoLogin">{{
user.MEMBERSHIP_NAME || "游客"
}}</span>
<span class="identity">{{ user.MEMBERSHIP_LEVEL_TEXT || "" }}</span>
</div>
<!-- 余额 -->
<div class="balanceBox">
<div class="balanceItem">
<div class="itemLabel">优惠券</div>
<div class="itemValue">{{ user.COUPON_COUNT || 0 }}</div>
</div>
<div class="balanceItem">
<div class="itemLabel">积分</div>
<div class="itemValue">{{ user.MEMBERSHIP_POINT || 0 }}</div>
</div>
<!-- <div class="balanceItem">
<div class="itemLabel">余额</div>
<div class="itemValue">{{ user.ACCOUNT_BALANCE || "0.00" }}</div>
</div> -->
</div>
</div>
<!-- 会员码 -->
<div class="userCode" @click="isGo('/pages/homeFn/payfor/index')">
<!-- <div class="leftLine"></div> -->
<div class="codeBox">
<image class="codeImg" src="/static/images/home/codeIcon.png" />
<span class="codeText">会员码</span>
</div>
</div>
</div>
<!-- 预约和商城 -->
<div class="majorFun">
<div class="majorItem" @click="handleGoReservation">
<image class="majorIcon" src="/static/images/home/order.svg" />
<span class="majorTitle">点餐</span>
<span class="majorDesc">提前点餐 免排队</span>
</div>
<div class="majorLine"></div>
<div class="majorItem" @click="handleClick(1)">
<!-- handleGoOnlineShop -->
<image
class="majorIcon"
src="/static/images/home/scanCodeToCharge.svg"
/>
<span class="majorTitle">扫码充电</span>
<span class="majorDesc">快捷充电 免等待</span>
<!-- <image class="majorIcon" src="/static/images/home/store.svg" />
<span class="majorTitle">线上商城</span>
<span class="majorDesc">购特产 买周边</span> -->
</div>
</div>
<!-- 更多的一些功能 -->
<div class="otherFunBox">
<div
class="funItem"
v-for="(item, index) in funList"
:key="index"
@click="handleClick(item.value)"
>
<image
class="funItemIcon"
:src="item.click ? item.src : item.noSrc"
/>
<span
class="funItemText"
:style="{ color: item.click ? '#130F05' : '#B8B7B4' }"
>{{ item.label }}</span
>
</div>
</div>
<!-- 高速头条 -->
<div class="highwayHeadlines" @click="handleGoHighWayHeaderLine">
<div class="headTop">
<div class="leftHead">优惠<span class="text">活动</span></div>
<div class="rightHead">
<image class="moreIcon" src="/static/images/home/rightArrow.png" />
</div>
</div>
<div class="messageListBox">
<div
:class="
headlinesList.length > 2 ? 'messageList scrolling' : 'messageList'
"
>
<!-- 为了实现无缝滚动克隆一份列表 -->
<div
class="messageItem"
v-for="(item, index) in headlinesList.concat(headlinesList)"
:key="index"
>
<div class="icon"></div>
<div class="contentMessage">
{{ item.NOTICEINFO_TITLE || "-" }}
</div>
</div>
</div>
</div>
</div>
<!-- 精选商家 -->
<div class="selectedMerchants">
<div class="merchantsTop">
<div class="leftMerchants">
<span class="pageTitle">精选商家</span>
</div>
<!-- @click="handleGoReservation" -->
<div class="rightMerchants" @click="goSelectServer(serverPart)">
<!-- nearPart.ServerPart_Name || "" -->
<span class="serviceName">{{
serverPart.ServerPart_Name || ""
}}</span>
<image class="moreIcon" src="/static/images/home/rightArrow.png" />
</div>
</div>
<div class="merchantsList" v-if="storeList && storeList.length > 0">
<div
class="merchantsItem"
v-for="(item, index) in storeList"
:key="index"
>
<div class="merchantsIconBox" @click="goShop(item)">
<image class="merchantsIcon" :src="item.IMAGE_URL" />
</div>
<span class="merchantsName">{{ item.TITLE || "" }}</span>
</div>
</div>
</div>
<!-- 精选商品 -->
<div class="selectShop" v-if="false">
<div class="shopTop">
<div class="leftShop">
<span class="pageTitle">精选商品</span>
</div>
<div class="rightShop" @click="handleGoOnlineShop">
<!-- <div class="moreText">更多</div> -->
<image class="moreIcon" src="/static/images/home/rightArrow.png" />
</div>
</div>
<div class="shopList">
<div
class="shopItem"
v-for="(item, index) in mallList"
:key="index"
@click="goMall(item)"
>
<div class="shopImgBox">
<img class="shopImg" :src="item.IMAGE_URL" />
</div>
<div class="shopDetail">
<div class="shopName">{{ item.TITLE || "" }}</div>
<div class="priceBox">
<div class="price">
<span class="unit">¥</span>{{ item.COMMODITY_MEMBERPRICE }}
</div>
<image
class="shopIcon"
src="/static/images/home/shopIcon.png"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { mapGetters, mapMutations } from "vuex";
import {
handleHavePointInApp,
handleHavePointInMin,
} from "../../utils/publicMethods";
export default {
data() {
return {
statusBarHeight: {},
menu: {},
bannerList: [
"https://eshangtech.com/ShopICO/yifu/banner/banner1.png",
"https://eshangtech.com/ShopICO/yifu/banner/banner2.png",
"https://eshangtech.com/ShopICO/yifu/banner/banner3.png",
], // 轮播框内容
currentBan: 1, // 当前的轮播框 显示内容
funList: [
// {
// label: "扫码充电",
// value: 1,
// src: "/static/images/home/scanCodeToCharge.svg",
// noSrc: "/static/images/home/noScanCodeToCharge.svg",
// click: true,
// },
{
label: "出行导航",
value: 2,
src: "/static/images/home/travel.svg",
noSrc: "/static/images/home/noTravel.svg",
click: true,
},
// {
// label: "社区互动",
// value: 3,
// src: "/static/images/home/community.svg",
// noSrc: "/static/images/home/noCommunity.svg",
// click: true,
// },
{
label: "一键救援",
value: 4,
src: "/static/images/home/oneClickRescue.svg",
noSrc: "/static/images/home/noOneClickRescue.svg",
click: true,
},
// {
// label: "服务区",
// value: 5,
// src: "/static/images/home/communityInteraction.svg",
// noSrc: "/static/images/home/noCommunityInteraction.svg",
// click: true,
// },
{
label: "投诉反馈",
value: 6,
src: "/static/images/home/complaints.svg",
noSrc: "/static/images/home/noComplaints.svg",
click: true,
},
// {
// label: "会员权益",
// value: 7,
// src: "/static/images/home/MEMBERBENEFITS.svg",
// noSrc: "/static/images/home/noMEMBERBENEFITS.svg",
// click: true,
// },
{
label: "失物招领",
value: 8,
src: "/static/images/home/lostAndfound.svg",
noSrc: "/static/images/home/nolostAndfound.svg",
click: true,
},
], // 更多功能的渲染列表
userInfo: {}, // 当前账号的信息
seat: {}, // 经纬度信息
severPartList: [],
serverPart: {},
currentServicePart: {},
storeList: [],
loginType: "", // 登录类型 min 还是 app
// shopList: [], // 商品列表
mallList: [], // 商品列表
headlinesList: [], // 高速头条
showBanner: false, // 是否显示轮播框
WXProfile: "",
nearPart: {}, // 锁死的最近的服务区
};
},
computed: {
...mapGetters({
user: "user",
canIuse: "canIuse",
provinceCode: "provinceCode",
severList: "severList",
}),
},
async onLoad() {
// 支付宝付款码页面
// plus.runtime.openURL(`alipayqr://platformapi/startapp?saId=20000056`);
// 微信付款码页面 (微信不行 只能跳转到微信)
// plus.runtime.openURL(`weixin://`)
// 跳转微信或者支付宝的方法
// uni.showModal({
// title: "提示",
// content: "是否打开微信?",
// success: (res) => {
// if (res.confirm) {
// uni.request({
// method: "GET",
// url: "https://api.weixin.qq.com/cgi-bin/token?appid=wx4fb5da2b8d9e0e43&secret=e4cb7d88c85b425af0ec75f2b961e814&grant_type=client_credential",
// success: (res1) => {
// console.log("res1", res1);
// uni.request({
// method: "POST",
// url:
// "https://api.weixin.qq.com/wxa/generatescheme?access_token=" +
// res1.data.access_token,
// data: {
// // path跳转到的小程序目标页面query跳转需要携带参数在目标页面onload里面接收options里面其他参数固定获取看文档了解
// jump_wxa: {
// path: "pages/index/index",
// env_version: "release", // 正式版为"release",体验版为"trial",开发版为"develop"
// },
// is_expire: true,
// expire_type: 1,
// expire_interval: 1,
// // env_version: "trial",
// },
// success: (res2) => {
// console.log("res2", res2);
// plus.runtime.openURL(res2.data.openlink)
// },
// });
// },
// });
// // 1b56719e-aff9-44df-84e8-193680241c0b
// const appId = "wx6624ce07ccaa86af"; // 你的微信小程序 AppID
// const path = "pages/index/main"; // 你想打开的小程序页面路径
// // 拼接正确的 URL 格式
// // const url = `weixin://dl/business/?appid=${appId}&path=${path}`;
// // const url = `alipays://platformapi`;
// // &query=*QUERY*&env_version=*ENV_VERSION*
// // plus.runtime.openURL(url);
// // 用户点击确定,打开微信
// // plus.runtime.openURL(`weixin://app/wx4fb5da2b8d9e0e43?pages/index/index`);
// } else {
// // 用户点击取消
// console.log("用户取消了打开微信");
// }
// },
// });
// 等app.vue加载完之后 在执行onLoad的神奇方法
// await getApp().globalData.initReady;
// if (!this.user) {
// return;
// }
// console.log("this.user", this.user);
// 获取手机参数对页面进行适配 主要是用于拿到胶囊的位置
let systemInfo = uni.getSystemInfoSync();
let type = uni.getStorageSync("loginType");
console.log("type", type);
this.loginType = type;
if (type === "min") {
this.menu = uni.getMenuButtonBoundingClientRect();
} else {
this.menu = systemInfo.safeArea;
}
console.log("this.menu", this.menu);
// 拿到第几次进入到小程序
let howTimes = uni.getStorageSync("howTimes");
console.log("howTimes", howTimes);
if (howTimes === 2 && type === "min") {
this.handleGetPoint();
}
this.handleGetHighwayHeadlines();
},
async onShow() {
let systemInfo = uni.getSystemInfoSync();
let type = uni.getStorageSync("loginType");
if (type === "min") {
this.menu = uni.getMenuButtonBoundingClientRect();
this.$forceUpdate();
} else {
this.menu = systemInfo.safeArea;
this.$forceUpdate();
}
this.showBanner = true;
// await getApp().globalData.initReady;
let _this = this;
this.currentBan = 0;
// 等app.vue加载完之后 在执行onLoad的神奇方法
// 当前服务区
let currentService = uni.getStorageSync("currentService");
console.log("currentService", currentService);
if (currentService) {
this.currentServicePart = currentService;
this.serverPart = currentService;
this.getStore();
this.getMall();
} else {
if (this.loginType === "min") {
this.getLocalServer();
} else if (this.loginType === "android") {
plus.geolocation.getCurrentPosition(
async function (position) {
console.log("当前位置:", position);
let res = position.coords;
let seatInfo = {
latitude: res.latitude,
longitude: res.longitude,
};
uni.setStorageSync("seatInfo", JSON.stringify(seatInfo));
uni.setStorageSync("actualLocation", JSON.stringify(seatInfo));
_this.seat = seatInfo;
let latitude = res.latitude;
let longitude = res.longitude;
await _this.handleGetNearService(latitude, longitude);
},
function (error) {
// handleHavePointInApp();
console.error("获取位置失败:", error.message);
}
);
} else if (this.loginType === "ios") {
plus.geolocation.getCurrentPosition(
function (position) {
// 获取成功后的回调
console.log("获取位置成功:", position);
const latitude = position.coords.latitude; // 纬度
const longitude = position.coords.longitude; // 经度
// 其他业务逻辑
},
function (error) {
// 定位失败的回调
console.error("获取位置失败:", error);
if (error.code === 1) {
// 权限拒绝的情况
uni.showModal({
title: "定位失败",
content: "请开启定位权限以获取您的位置信息。",
success: function (modalRes) {
if (modalRes.confirm) {
// 打开设置界面
uni.openSetting({
success: function (settingRes) {
console.log("用户已打开定位设置", settingRes);
},
});
}
},
});
}
},
{ enableHighAccuracy: true } // 高精度定位
);
}
}
this.handleGetUserInfo();
let nearService = uni.getStorageSync("nearService");
if (nearService) {
this.nearPart = nearService;
} else {
this.handleGetNearService();
}
},
onHide() {
this.showBanner = false;
},
async onPullDownRefresh() {
// 拿到第几次进入到小程序
let howTimes = uni.getStorageSync("howTimes");
console.log("howTimes", howTimes);
if (howTimes === 2) {
await this.handleGetPoint();
}
if (this.loginType === "min") {
this.handleGetUserInfo();
}
await this.handleGetHighwayHeadlines();
this.showBanner = true;
let _this = this;
this.currentBan = 0;
// 等app.vue加载完之后 在执行onLoad的神奇方法
// 当前服务区
let currentService = uni.getStorageSync("currentService");
console.log("currentService", currentService);
if (currentService) {
this.currentServicePart = currentService;
this.serverPart = currentService;
await this.getStore();
await this.getMall();
} else {
if (this.loginType === "min") {
await this.getLocalServer();
} else if (this.loginType === "android") {
plus.geolocation.getCurrentPosition(
async function (position) {
console.log("当前位置:", position);
let res = position.coords;
let seatInfo = {
latitude: res.latitude,
longitude: res.longitude,
};
uni.setStorageSync("seatInfo", JSON.stringify(seatInfo));
uni.setStorageSync("actualLocation", JSON.stringify(seatInfo));
_this.seat = seatInfo;
let latitude = res.latitude;
let longitude = res.longitude;
await _this.handleGetNearService(latitude, longitude);
},
function (error) {
// handleHavePointInApp();
console.error("获取位置失败:", error.message);
}
);
} else {
plus.geolocation.getCurrentPosition(
async function (position) {
// 获取成功后的回调
console.log("获取位置成功:", position);
const latitude = position.coords.latitude; // 纬度
const longitude = position.coords.longitude; // 经度
// 其他业务逻辑
let seatInfo = {
latitude: latitude,
longitude: longitude,
};
uni.setStorageSync("seatInfo", JSON.stringify(seatInfo));
uni.setStorageSync("actualLocation", JSON.stringify(seatInfo));
_this.seat = seatInfo;
await _this.handleGetNearService(latitude, longitude);
},
function (error) {
// 定位失败的回调
console.error("获取位置失败:", error);
if (error.code === 1) {
// 权限拒绝的情况
uni.showModal({
title: "定位失败",
content: "请开启定位权限以获取您的位置信息。",
success: function (modalRes) {
if (modalRes.confirm) {
// 打开设置界面
uni.openSetting({
success: function (settingRes) {
console.log("用户已打开定位设置", settingRes);
},
});
}
},
});
}
},
{
enableHighAccuracy: true,
} // 高精度定位
);
}
}
uni.stopPullDownRefresh();
},
methods: {
...mapMutations({
setArea: "setHomeServer",
setServerPart: "discoveryServerPart",
setSeverList: "severList",
setprovinceCode: "setprovinceCode",
setInvitedCode: "setInvitedCode",
setOwnerUnitId: "setOwnerUnitId",
}),
// 判断有没有地理位置的权限 如果没有就询问跳转
handleGetPoint() {
if (this.loginType === "android") {
handleHavePointInApp();
return;
const context = plus.android.runtimeMainActivity();
const PackageManager = plus.android.importClass(
"android.content.pm.PackageManager"
);
const hasPermission =
context.checkCallingOrSelfPermission(
"android.permission.ACCESS_FINE_LOCATION"
) === PackageManager.PERMISSION_GRANTED;
console.log("hasPermission", hasPermission);
if (hasPermission) {
} else {
uni.showModal({
title: "位置权限未开启",
content: "请在设置中打开位置权限",
confirmText: "去设置",
cancelText: "取消",
success: function (res) {
if (res.confirm) {
const main = plus.android.runtimeMainActivity();
const Intent = plus.android.importClass(
"android.content.Intent"
);
const Settings = plus.android.importClass(
"android.provider.Settings"
);
const intent = new Intent(
Settings.ACTION_APPLICATION_DETAILS_SETTINGS
);
const uri = plus.android.invoke(
"android.net.Uri",
"parse",
"package:" + main.getPackageName()
);
intent.setData(uri);
main.startActivity(intent);
}
},
});
return;
}
} else if (this.loginType === "min") {
handleHavePointInMin();
} else {
handleHavePointInMin();
}
},
// 拿用户最新的user信息
handleGetUserInfo() {
let _this = this;
_this.$api
.getCoop({
action_type: "GetMembershipInfo",
WechatUserId: _this.user.WechatUserId,
})
.then(function (data) {
if (data.ResultCode === "100") {
let _data = data;
console.log("_data", _data);
_this.user.MEMBERSHIP_ID = _data.Data.MEMBERSHIP_ID || "";
_this.user.MEMBERSHIP_NAME = _data.Data.MEMBERSHIP_NAME || "";
_this.user.MEMBERSHIP_LEVEL_TEXT =
_data.Data.MEMBERSHIP_LEVEL_TEXT || "";
_this.user.COUPON_COUNT = _data.Data.COUPON_COUNT || "";
_this.user.PENDORDER_COUNT = _data.Data.PENDORDER_COUNT || "";
_this.user.RESERVATION_COUNT = _data.Data.RESERVATION_COUNT || "";
_this.user.ACCOUNT_BALANCE = _data.Data.ACCOUNT_BALANCE || "";
_this.user.ISPLUS = _data.Data.ISPLUS || "";
_this.user.INDUSTRY_MEMBERSHIP_ID =
_data.Data.INDUSTRY_MEMBERSHIP_ID || "";
_this.user.MEMBERSHIP_TYPE = _data.Data.MEMBERSHIP_TYPE || "";
_this.user.MEMBERSHIP_LEVEL = _data.Data.MEMBERSHIP_LEVEL || "";
_this.user.InviteCode = _data.Data.InviteCode || "";
_this.user.MEMBERSHIP_POINT = _data.Data.MEMBERSHIP_POINT || "";
_this.user.MEMBERSHIP_MOBILEPHONE =
_data.Data.MEMBERSHIP_MOBILEPHONE || "";
_this.WXProfile = _data.Data.MEMBERSHIP_HEADIMAGEURL;
// _this.setUser(user);
_this.$store.commit("setUser", _this.user);
} else {
// _this.setUser({});
_this.$store.commit("setUser", _this.user);
}
});
},
// 微信用户头像
async onChooseAvatar(e) {
console.log("e", e);
// this.WXProfile = e.detail.avatarUrl;
// console.log("this.WXProfile", this.WXProfile);
// if (!this.WXProfile) {
// return;
// }
let _this = this;
uni.uploadFile({
url: "https://api.eshangtech.com/EShangApiMain/Picture/UploadPicture", // 你的接口 URL
filePath: e.detail.avatarUrl,
name: "file", // 表单中的文件字段名
formData: {
Tabletype: "1005", // 表单中其他数据
},
success: async (uploadRes) => {
let data = uploadRes.data ? JSON.parse(uploadRes.data) : "";
let url = data.Result_Data.ImageUrl;
console.log("url", url);
if (url) {
let req = {
membershipId: this.user.MEMBERSHIP_ID,
headImgUrl: url,
};
_this.WXProfile = url;
const userInfoData = await _this.$api.$get(
"/WeChat/UpdateMemberInfo",
req
);
console.log("userInfoData", userInfoData);
if (userInfoData.Result_Code === 100) {
_this.handleGetUserInfo();
}
}
},
});
return;
console.log("this.user", this.user);
uni.saveFile({
tempFilePath: e.detail.avatarUrl,
success: async (res) => {
console.log("res.savedFilePath", res.savedFilePath);
let req = {
membershipId: this.user.MEMBERSHIP_ID,
headImgUrl: res.savedFilePath,
};
_this.WXProfile = res.savedFilePath;
const userInfoData = await _this.$api.$get(
"/WeChat/UpdateMemberInfo",
req
);
console.log("userInfoData", userInfoData);
if (userInfoData.Result_Code === 100) {
_this.handleGetUserInfo();
}
},
fail: (err) => {
console.log("err", err);
uni.showToast({
title: err,
icon: "none",
});
},
});
},
// 跳转去高速头条
handleGoHighWayHeaderLine() {
uni.navigateTo({
url: "/pages/highwayHeadlines/index",
});
},
isGo(url) {
console.log("this.user", this.user);
if (this.user.MEMBERSHIP_ID) {
if (this.user.MEMBERSHIP_MOBILEPHONE) {
if (url === "/pages/homeFn/consumption/index") {
if (this.user.INDUSTRY_MEMBERSHIP_ID) {
uni.navigateTo({ url: url });
}
} else {
uni.navigateTo({ url: url });
}
} else {
this.isShowPop = true;
}
} else {
let _this = this;
uni.showModal({
title: "温馨提示",
content: "请您授权登录后再操作。",
success(res) {
if (res.confirm) {
if (_this.loginType === "min") {
uni.navigateTo({ url: "/pages/register/index" });
} else {
uni.navigateTo({ url: "/pages/login/index" });
}
}
},
});
}
},
// 高速头条
async handleGetHighwayHeadlines() {
let nearService = uni.getStorageSync("nearService");
console.log("nearService3232", nearService);
let req = {
SearchParameter: {
NOTICEINFO_TYPES: 2010,
PROVINCE_CODE: this.user.PROVINCE_CODE,
NOTICEINFO_STATE: 1,
SERVERPART_IDS: this.serverPart.SERVERPART_ID || "",
},
PageIndex: 1,
PageSize: 6,
};
const data = await this.$api.$post(
"/EShangApiMain/Notice/GetNOTICEINFOList",
req
);
let list = data.Result_Data.List;
if (list && list.length > 0) {
this.headlinesList = list;
} else {
this.headlinesList = [];
}
},
goMall(item) {
if (!this.user.MEMBERSHIP_ID) {
uni.showModal({
title: "温馨提示",
content: "请您授权登录后再操作。",
success(res) {
if (res.confirm) {
uni.redirectTo({ url: "/pages/register/index" });
}
},
});
return;
}
if (this.user.MEMBERSHIP_MOBILEPHONE) {
uni.navigateTo({
url: "/pages/product/productDetail/index?id=" + item.ITEM_ID,
});
} else {
this.isLogin = true;
}
},
goShop(item) {
uni.navigateTo({ url: "/pages/storeDetail/index?id=" + item.ITEM_ID });
// if (!this.user.MEMBERSHIP_ID) {
// uni.showModal({
// title: "温馨提示",
// content: "请您授权登录后再操作。",
// success(res) {
// if (res.confirm) {
// uni.redirectTo({ url: "/pages/register/index" });
// }
// },
// });
// return;
// }
// if (this.user.MEMBERSHIP_MOBILEPHONE) {
// uni.navigateTo({ url: "/pages/storeDetail/index?id=" + item.ITEM_ID });
// } else {
// this.isLogin = true;
// }
},
// 功能的点击事件
handleClick(value) {
let _this = this;
console.log("value", value);
console.log("_this.loginType", _this.loginType);
// 扫码充电
if (value === 1) {
uni.navigateTo({ url: "/pages/scanCodeCharge/index" });
// 变成要去跳转理想的了 先return掉 后面再看怎么弄 2024-12-13
return;
let hasPer = false;
if (this.loginType === "min") {
uni.getSetting({
success: (res) => {
if (res.authSetting["scope.camera"]) {
hasPer = true;
} else {
uni.showModal({
title: "摄像头权限未开启",
content: "请在设置中打开摄像头权限,以使用扫码功能。",
confirmText: "去设置",
cancelText: "取消",
success: function (res) {
if (res.confirm) {
// 用户点击了 "去设置"
uni.openSetting({
success: (settingRes) => {},
});
}
},
});
}
},
});
} else if (this.loginType === "android") {
const context = plus.android.runtimeMainActivity();
const PackageManager = plus.android.importClass(
"android.content.pm.PackageManager"
);
const Camera = plus.android.importClass("android.hardware.Camera");
const hasPermission =
context.checkCallingOrSelfPermission(
"android.permission.CAMERA"
) === PackageManager.PERMISSION_GRANTED;
console.log("hasPermission", hasPermission);
// hasPermission true的时候 是已经有了摄像头权限 false的时候没有摄像头权限
if (hasPermission) {
hasPer = true;
} else {
uni.showModal({
title: "摄像头权限未开启",
content: "请在设置中打开摄像头权限,以使用扫码功能。",
confirmText: "去设置",
cancelText: "取消",
success: function (res) {
if (res.confirm) {
const main = plus.android.runtimeMainActivity();
const Intent = plus.android.importClass(
"android.content.Intent"
);
const Settings = plus.android.importClass(
"android.provider.Settings"
);
const intent = new Intent(
Settings.ACTION_APPLICATION_DETAILS_SETTINGS
);
const uri = plus.android.invoke(
"android.net.Uri",
"parse",
"package:" + main.getPackageName()
);
intent.setData(uri);
main.startActivity(intent);
return;
}
},
});
}
}
if (hasPer) {
uni.scanCode({
success: function (res) {
console.log("条码类型:" + res.scanType);
console.log("条码内容:" + res.result);
},
});
}
} else if (value === 2) {
uni.navigateTo({
url: "/pages/scanCodeCharge/travelNavigation",
});
// uni.switchTab({
// url: "/pages/travelNavigation/index",
// });
} else if (value === 3) {
// 社区互动
uni.navigateTo({ url: "/pages/community/index" });
} else if (value === 4) {
// 一键救援
if (_this.loginType === "min") {
uni.navigateTo({ url: "/pages/clickRescue/index" });
// uni.navigateToMiniProgram({
// // appId: "wx18badcd70575b5f8", 老的
// appId: "wx66d2a32a9ead6251",
// envVersion: "release",
// });
} else {
uni.navigateTo({ url: "/pages/clickRescue/index" });
// "wx18badcd70575b5f8",
// this.handleAppTomin(
// "wx66d2a32a9ead6251",
// "52954de3b2113c083277c927595270be",
// "",
// "即将打开“皖美一键救援”小程序"
// );
}
} else if (value === 5) {
if (_this.currentServicePart.SERVERPART_ID) {
uni.navigateTo({
url:
"/pages/serviceDetail/index?id=" +
this.currentServicePart.SERVERPART_ID,
});
// uni.navigateTo({ url: "/pages/serviceDetail/shopDetail/index" });
// uni.navigateTo({
// url:
// "/pages/serviceDetail/index?id=" +
// _this.currentServicePart.SERVERPART_ID,
// });
}
} else if (value === 6) {
if (!this.user.MEMBERSHIP_ID) {
let _this = this;
uni.showModal({
title: "温馨提示",
content: "请您授权登录后再操作。",
success(res) {
if (res.confirm) {
if (_this.loginType === "min") {
uni.navigateTo({ url: "/pages/register/index" });
} else {
uni.navigateTo({ url: "/pages/login/index" });
}
}
},
});
return;
}
if (_this.loginType === "min") {
// uni.navigateToMiniProgram({
// appId: "wxd5e0baee7e67351e",
// envVersion: "release",
// });
uni.navigateTo({
url: "/pages/complaintFeedback/index",
});
} else {
// this.handleAppTomin(
// "wxd5e0baee7e67351e",
// "7b861d4f9bae381d66d48d82e986b41e",
// "",
// "即将打开“驿答”小程序"
// );
uni.navigateTo({
url: "/pages/complaintFeedback/index",
});
}
} else if (value === 7) {
uni.navigateTo({
url: "/pages/memberBenefits/index",
});
} else if (value === 8) {
uni.navigateTo({
url: "/pages/contact/index",
});
}
},
// 判断是跳转到登录 还是 用户信息
handleGoLogin() {
if (this.user.MEMBERSHIP_NAME) {
} else {
if (this.loginType === "min") {
} else {
// uni.navigateTo({ url: "/pages/login/register" });
uni.navigateTo({ url: "/pages/login/index" });
}
}
},
// 跳转到地图选择服务区
goSelectServer(obj) {
// // 业主说不变
// return;
if (obj.SERVERPART_ID) {
uni.navigateTo({
url: "/pages/serviceDetail/index?id=" + obj.SERVERPART_ID,
});
} else {
if (this.currentServicePart.SERVERPART_ID) {
// uni.navigateTo({ url: "/pages/serviceDetail/shopDetail/index" });
uni.navigateTo({
url:
"/pages/serviceDetail/index?id=" +
this.currentServicePart.SERVERPART_ID,
});
} else {
uni.navigateTo({ url: "/pages/newMap/index/index?comeForm=home" });
}
}
},
// 轮播框的图片切换
swiperChange(e, name) {
// this[name] = e.mp.detail.current;
this.currentBan = e.mp.detail.current;
},
// 预约点餐 跳转的是一个列表页面 里面的内容只有可以预约点餐的门店
handleGoReservation() {
// uni.switchTab({
// url: "/pages/discovery/index",
// });
uni.navigateTo({
url: "/pages/reservationOrder/index",
});
},
// 线上商城
handleGoOnlineShop() {
if (this.loginType === "android") {
this.handleAppTomin(
"wxc4d4ae493d7e1e68",
"8085e1869fe52aa4715bb1a031446ace",
"",
"即将打开“驿佳”小程序"
);
} else if (this.loginType === "min") {
uni.navigateToMiniProgram({
appId: "wxc4d4ae493d7e1e68",
envVersion: "release",
});
}
},
getLocalServer() {
console.log("getLocalServer");
// 根据定位获取周边服务区
let _this = this;
uni.getLocation({
type: "gcj02",
altitude: true,
success: async (res) => {
console.log("rewrwqerwq", res);
let seatInfo = {
latitude: res.latitude,
longitude: res.longitude,
};
uni.setStorageSync("seatInfo", JSON.stringify(seatInfo));
uni.setStorageSync("actualLocation", JSON.stringify(seatInfo));
_this.seat = seatInfo;
let latitude = res.latitude;
let longitude = res.longitude;
await _this.handleGetNearService(latitude, longitude);
},
fail: async (res) => {
console.log("res", res);
},
});
},
// 拿到最近的服务区数据
async handleGetNearService(latitude, longitude) {
console.log("latitude", latitude);
console.log("longitude", longitude);
let req = {
Province_Code: "340000",
longitude: longitude,
latitude: latitude,
};
uni.showLoading({
title: "查找最近的服务区...",
});
try {
const data = await this.$api.$get(
"/CommercialApi/BaseInfo/GetServerpartList",
req
);
console.log("data321312", data);
let _data = data.Result_Data.List;
let serverSelectList = [];
if (_data && _data.length > 0) {
_data.forEach((item) => {
serverSelectList.push({
...item,
showName: item.SERVERPART_NAME,
ProvinceCode: "340000",
ServerPart_Id: item.SERVERPART_ID,
ServerPart_Name: item.SERVERPART_NAME,
});
});
}
this.severPartList = _data;
this.setSeverList(serverSelectList);
let obj = this.handleChangeServiceInfo(_data[0]);
uni.setStorageSync("nearService", obj); // 当前选中服务区信息
this.nearPart = obj;
uni.setStorageSync("currentService", obj); // 当前选中服务区信息
this.serverPart = obj;
console.log("_this.serverPart2", this.serverPart);
console.log("obj", obj);
this.setprovinceCode(obj.ProvinceCode);
this.setArea(obj);
this.setOwnerUnitId(obj.OwnerUnitId);
uni.hideLoading();
this.currentServicePart = obj;
this.serverPart = obj;
this.getStore();
this.getMall();
this.handleGetHighwayHeadlines();
} catch (error) {
uni.showToast({
title: error.message || "获取服务区失败,请稍后重试",
icon: "none",
});
}
},
// 兼容一下老接口要的服务区对象的内容
handleChangeServiceInfo(obj) {
let newObj = {
...obj,
Distance: obj.SERVERPART_DISTANCE,
OwnerUnitId: obj.OWNERUNIT_ID,
OwnerUnitName: obj.OWNERUNIT_NAME,
ProvinceCode: "340000",
ServerPart_Id: obj.SERVERPART_ID,
ServerPart_Name: obj.SERVERPART_NAME,
ServerPart_Tel: "",
ServerPart_X: obj.SERVERPART_X,
ServerPart_Y: obj.SERVERPART_Y,
showName: `${obj.SERVERPART_NAME}(${obj.SERVERPART_DISTANCE}km)`,
};
return newObj;
},
// 拿精选商家的方法
getStore() {
let _this = this;
_this.$api
.getCoop({
action_type: "GetRcmContent",
rcmtagKey: "HOME_SELLER",
serverpartId: _this.serverPart.ServerPart_Id || "",
provinceCode: _this.provinceCode || "340000",
})
.then(function (data) {
console.log("getStore", data);
if (data.ResultCode === "100") {
_this.storeList = data.Data.List;
console.log("_this.storeList", _this.storeList);
}
});
},
getMall() {
let _this = this;
console.log("_this.serverPart", _this.serverPart);
_this.$api
.getCoop({
action_type: "GetRcmContent",
rcmtagKey: "HOME_MALL",
serverpartId: _this.serverPart.ServerPart_Id,
provinceCode: _this.provinceCode || "340000",
showThird: 0,
})
.then(function (data) {
if (data.ResultCode === "100") {
_this.mallList = data.Data.List;
console.log("_this.mallList", _this.mallList);
}
});
},
// app跳转小程序的方法
handleAppTomin(appid, secret, indexUrl, contentText) {
uni.showModal({
title: "提示",
content: contentText || "是否打开微信?",
success: (res) => {
if (res.confirm) {
uni.request({
method: "GET",
url: `https://api.weixin.qq.com/cgi-bin/token?appid=${appid}&secret=${secret}&grant_type=client_credential`,
success: (res1) => {
console.log("res1", res1);
uni.request({
method: "POST",
url:
"https://api.weixin.qq.com/wxa/generatescheme?access_token=" +
res1.data.access_token,
data: {
// path跳转到的小程序目标页面query跳转需要携带参数在目标页面onload里面接收options里面其他参数固定获取看文档了解
jump_wxa: {
path: indexUrl || "pages/index/index",
env_version: "release", // 正式版为"release",体验版为"trial",开发版为"develop"
},
is_expire: true,
expire_type: 1,
expire_interval: 1,
// env_version: "trial",
},
success: (res2) => {
plus.runtime.openURL(res2.data.openlink);
},
});
},
});
}
},
});
},
// 跳转 我的页面
handleGoToUser() {
if (this.user.MEMBERSHIP_ID) {
uni.switchTab({
url: "/pages/userCenter/index",
});
} else {
let _this = this;
uni.showModal({
title: "温馨提示",
content: "请您授权登录后再操作。",
success(res) {
if (res.confirm) {
if (_this.loginType === "min") {
uni.navigateTo({ url: "/pages/register/index" });
} else {
uni.navigateTo({ url: "/pages/login/index" });
}
}
},
});
}
},
},
};
</script>
<style scoped lang="less">
.main {
width: 100vw;
// height: 100vh;
.topBox {
width: 100%;
box-sizing: border-box;
padding: 0 32rpx;
position: fixed;
background: #fff;
top: 0;
left: 0;
z-index: 99;
.topContent {
display: flex;
align-items: center;
.topLeft {
display: flex;
align-items: center;
.YDIcon {
width: 48rpx;
height: 48rpx;
margin-right: 8rpx;
}
.pageTitle {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 32rpx;
color: #090c1a;
line-height: 44rpx;
text-align: justify;
font-style: normal;
}
}
.topRight {
width: 302rpx;
height: 72rpx;
background: #f6f8fa;
border-radius: 36rpx;
margin-left: 24rpx;
box-sizing: border-box;
padding: 16rpx 20rpx;
display: flex;
align-items: center;
.searchIcon {
width: 32rpx;
height: 32rpx;
}
.searchText {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #9fa1aa;
line-height: 40rpx;
text-align: left;
font-style: normal;
margin-left: 8rpx;
}
}
}
}
.appTopBox {
width: 100%;
box-sizing: border-box;
padding: 0 32rpx;
background: #fff;
border-bottom: 1px solid rgb(238, 237, 237);
position: fixed;
top: 0;
left: 0;
z-index: 99;
.topContent {
display: flex;
align-items: center;
.topLeft {
display: flex;
align-items: center;
.YDIcon {
width: 48rpx;
height: 48rpx;
margin-right: 8rpx;
}
.pageTitle {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 32rpx;
color: #090c1a;
line-height: 44rpx;
text-align: justify;
font-style: normal;
}
}
.topRight {
width: 302rpx;
height: 72rpx;
background: #f6f8fa;
border-radius: 36rpx;
margin-left: 24rpx;
box-sizing: border-box;
padding: 16rpx 20rpx;
display: flex;
align-items: center;
.searchIcon {
width: 32rpx;
height: 32rpx;
}
.searchText {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #9fa1aa;
line-height: 40rpx;
text-align: left;
font-style: normal;
margin-left: 8rpx;
}
}
}
}
.carousel {
width: 100%;
height: 440rpx;
.banner {
width: 100%;
height: 100%;
.swiperImg {
width: 100%;
}
}
}
.content {
width: 100%;
box-sizing: border-box;
padding: 32rpx 32rpx 0;
.userBox {
width: 100%;
height: 168rpx;
background: linear-gradient(180deg, #f9fbff 0%, #ffffff 100%);
border-radius: 8rpx;
border: 2rpx solid #f3f3f3;
box-sizing: border-box;
padding: 24rpx 0 24rpx 32rpx;
display: flex;
align-items: center;
.profile {
width: 104rpx;
height: 104rpx;
border-radius: 50%;
overflow: hidden;
.avatarBtn {
width: 100%;
height: 100%;
padding: 0;
.headerImg {
width: 100%;
height: 100%;
}
}
}
.detailBox {
width: calc(100% - 260rpx);
margin-left: 20rpx;
.userDetail {
display: flex;
align-items: center;
.userName {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #090c1a;
line-height: 44rpx;
text-align: justify;
font-style: normal;
margin-right: 12rpx;
}
.identity {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 22rpx;
color: #c79519;
line-height: 32rpx;
text-align: justify;
font-style: normal;
background: #faf3e2;
border-radius: 16rpx 16rpx 16rpx 0rpx;
padding: 2rpx 6rpx;
}
}
.balanceBox {
width: 100%;
margin-top: 8rpx;
display: flex;
align-items: center;
justify-content: space-between;
.balanceItem {
width: calc((100% - 28rpx) / 2);
.itemLabel {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #090c1a;
line-height: 34rpx;
text-align: justify;
font-style: normal;
}
.itemValue {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #c79519;
line-height: 34rpx;
text-align: justify;
font-style: normal;
}
}
}
}
.userCode {
width: 128rpx;
box-sizing: border-box;
padding: 0 32rpx;
border-left: 1px solid #f3f3f3;
// .leftLine {
// width: 2rpx;
// height: 80rpx;
// background: #f3f3f3;
// margin-right: 32rpx;
// }
.codeBox {
display: flex;
align-items: center;
flex-direction: column;
.codeImg {
width: 64rpx;
height: 64rpx;
margin-bottom: 6rpx;
}
.codeText {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 22rpx;
color: #090c1a;
line-height: 32rpx;
text-align: justify;
font-style: normal;
white-space: nowrap;
}
}
}
}
.majorFun {
width: 100%;
box-sizing: border-box;
padding: 32rpx 0;
background: linear-gradient(180deg, #f9fbff 0%, #ffffff 100%);
border-radius: 8rpx;
border: 2rpx solid #f3f3f3;
margin-top: 32rpx;
display: flex;
align-items: center;
.majorItem {
width: calc((100% - 2rpx) / 2);
display: flex;
flex-direction: column;
align-items: center;
.majorIcon {
width: 72rpx;
height: 72rpx;
margin-bottom: 8rpx;
}
.majorTitle {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #090c1a;
line-height: 40rpx;
text-align: left;
font-style: normal;
}
.majorDesc {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 22rpx;
color: #787879;
line-height: 32rpx;
text-align: justify;
font-style: normal;
}
}
.majorLine {
width: 2rpx;
height: 120rpx;
background: #f3f3f3;
}
}
.otherFunBox {
width: 100%;
// height: 280rpx;
box-sizing: border-box;
padding: 32rpx 0 0 0;
background: linear-gradient(180deg, #f9fbff 0%, #ffffff 100%);
border-radius: 8rpx;
border: 2rpx solid #f3f3f3;
margin-top: 32rpx;
display: flex;
align-items: center;
flex-wrap: wrap;
.funItem {
width: 25%;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
margin-bottom: 32rpx;
.funItemIcon {
width: 48rpx;
height: 48rpx;
margin-bottom: 8rpx;
}
.funItemText {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #090c1a;
line-height: 34rpx;
text-align: right;
font-style: normal;
}
}
}
.highwayHeadlines {
width: 100%;
box-sizing: border-box;
background: linear-gradient(180deg, #f9fbff 0%, #ffffff 100%);
border-radius: 8rpx;
border: 2rpx solid #f3f3f3;
margin-top: 32rpx;
padding: 24rpx;
.headTop {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.leftHead {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #090c1a;
line-height: 36rpx;
text-align: left;
font-style: normal;
.text {
color: #c7951a;
}
}
.rightHead {
.moreIcon {
width: 24rpx;
height: 24rpx;
}
}
}
.messageListBox {
width: 100%;
height: 104rpx;
overflow: hidden;
position: relative;
margin-top: 16rpx;
.messageList {
display: flex;
flex-direction: column;
.messageItem {
width: 100%;
box-sizing: border-box;
padding: 6rpx 0;
display: flex;
align-items: center;
.icon {
width: 11rpx;
height: 11rpx;
background: #090c1a;
transform: rotate(45deg);
margin-right: 16rpx;
}
.contentMessage {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 24rpx;
color: #130f05;
line-height: 40rpx;
text-align: left;
}
}
&.scrolling {
animation: scrollAnimation 10s linear infinite;
}
}
}
@keyframes scrollAnimation {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-50%);
}
}
}
.selectedMerchants {
margin-top: 48rpx;
padding-bottom: 24rpx;
.merchantsTop {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.leftMerchants {
.pageTitle {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #090c1a;
line-height: 44rpx;
text-align: justify;
font-style: normal;
}
.serviceName {
margin-left: 16rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #787879;
line-height: 32rpx;
text-align: justify;
font-style: normal;
}
}
.rightMerchants {
display: flex;
align-items: center;
.serviceName {
margin-left: 16rpx;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #787879;
line-height: 32rpx;
text-align: justify;
font-style: normal;
}
.moreText {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #787879;
line-height: 40rpx;
text-align: left;
font-style: normal;
}
.moreIcon {
width: 24rpx;
height: 24rpx;
margin-left: 8rpx;
}
}
}
.merchantsList {
width: 100%;
height: 276rpx;
border-radius: 8rpx;
border: 2rpx solid #f3f3f3;
padding: 22rpx;
box-sizing: border-box;
margin-top: 24rpx;
display: flex;
align-items: center;
overflow-x: scroll;
.merchantsItem {
margin-right: 24rpx;
.merchantsIconBox {
width: 168rpx;
height: 168rpx;
border-radius: 8rpx;
overflow: hidden;
.merchantsIcon {
width: 100%;
height: 100%;
}
}
.merchantsName {
display: inline-block;
width: 168rpx;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #090c1a;
line-height: 40rpx;
text-align: justify;
font-style: normal;
}
}
}
.merchantsList::-webkit-scrollbar {
display: none;
}
}
.selectShop {
margin-top: 48rpx;
padding-bottom: 24rpx;
.shopTop {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.leftShop {
.pageTitle {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #090c1a;
line-height: 44rpx;
text-align: justify;
font-style: normal;
}
}
.rightShop {
display: flex;
align-items: center;
.moreText {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 24rpx;
color: #787879;
line-height: 40rpx;
text-align: left;
font-style: normal;
}
.moreIcon {
width: 24rpx;
height: 24rpx;
margin-left: 8rpx;
}
}
}
.shopList {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
margin-top: 12px;
.shopItem {
width: calc((100% - 24rpx) / 2);
border-radius: 8rpx;
border: 2rpx solid #f3f3f3;
margin-bottom: 24rpx;
.shopImgBox {
width: 100%;
height: 264rpx;
background: #ffffff;
border-radius: 8rpx;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding-top: 6rpx;
.shopImg {
width: 372rpx;
height: 100%;
}
}
.shopDetail {
width: 100%;
box-sizing: border-box;
padding: 0 24rpx 24rpx;
margin-top: 16rpx;
.shopName {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 28rpx;
color: #090c1a;
line-height: 32rpx;
text-align: justify;
font-style: normal;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
height: 65rpx;
margin-bottom: 4rpx;
}
.countNumber {
font-family: PingFangSC, PingFang SC;
font-weight: 400;
font-size: 20rpx;
color: #666666;
line-height: 32rpx;
text-align: left;
font-style: normal;
}
.priceBox {
font-family: DINAlternate, DINAlternate;
font-weight: bold;
font-size: 32rpx;
color: #090c1a;
line-height: 32rpx;
text-align: left;
font-style: normal;
display: flex;
align-items: center;
margin-top: 12rpx;
justify-content: space-between;
.unit {
font-family: DINAlternate, DINAlternate;
font-weight: bold;
font-size: 24rpx;
color: #090c1a;
line-height: 24rpx;
text-align: left;
font-style: normal;
}
}
.shopIcon {
width: 32rpx;
height: 32rpx;
}
}
}
}
}
}
}
</style>