360 lines
9.0 KiB
Vue
360 lines
9.0 KiB
Vue
<template>
|
|
<view class="main">
|
|
<view
|
|
class="mainTop"
|
|
:style="{
|
|
paddingTop:
|
|
loginType === 'min' ? menu.top + 'px' : menu.top + 10 + 'px',
|
|
height: loginType === 'min' ? menu.height + 'px' : menu.top + 'px',
|
|
}"
|
|
>
|
|
<image
|
|
class="backIcon"
|
|
src="https://eshangtech.com/wanmeiyizhanImg/home/backArrow.svg"
|
|
@click="handleBack"
|
|
/>
|
|
|
|
<div class="selectBox">
|
|
<div class="first" @click="goSelectServer">
|
|
<image
|
|
class="addressIcon"
|
|
src="https://eshangtech.com/wanmeiyizhanImg/home/blackFixed.png"
|
|
/>
|
|
<div class="text">{{ serverPart.SERVERPART_NAME || "" }}</div>
|
|
<image
|
|
class="moreIcon"
|
|
src="https://eshangtech.com/wanmeiyizhanImg/home/rightArrow.png"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</view>
|
|
|
|
<view class="phoneBox">
|
|
<text class="text">汽车维修服务热线 </text>
|
|
<text class="phoneText">{{ servicePhone || "-" }}</text>
|
|
</view>
|
|
|
|
<view class="projectPublicity">
|
|
<view class="titleBox">
|
|
<text class="normalText">九项</text>
|
|
<text class="lightText">免费</text>
|
|
<text class="normalText">项目公示</text>
|
|
</view>
|
|
|
|
<view class="contentBox">
|
|
<view class="contentItem">
|
|
<image
|
|
class="itemIcon"
|
|
src="https://eshangtech.com/wanmeiyizhanImg/home/autoRepairNo1.png"
|
|
/>
|
|
<text class="itemText">胎压检查</text>
|
|
</view>
|
|
|
|
<view class="contentItem">
|
|
<image
|
|
class="itemIcon"
|
|
src="https://eshangtech.com/wanmeiyizhanImg/home/autoRepairNo2.png"
|
|
/>
|
|
<text class="itemText">机油量检查</text>
|
|
</view>
|
|
|
|
<view class="contentItem">
|
|
<image
|
|
class="itemIcon"
|
|
src="https://eshangtech.com/wanmeiyizhanImg/home/autoRepairNo3.png"
|
|
/>
|
|
<text class="itemText">牌照检查和紧固</text>
|
|
</view>
|
|
|
|
<view class="contentItem">
|
|
<image
|
|
class="itemIcon"
|
|
src="https://eshangtech.com/wanmeiyizhanImg/home/autoRepairNo4.png"
|
|
/>
|
|
<text class="itemText">轮胎螺丝检查和紧固</text>
|
|
</view>
|
|
|
|
<view class="contentItem">
|
|
<image
|
|
class="itemIcon"
|
|
src="https://eshangtech.com/wanmeiyizhanImg/home/autoRepairNo5.png"
|
|
/>
|
|
<text class="itemText">雨刮水量检查</text>
|
|
</view>
|
|
|
|
<view class="contentItem">
|
|
<image
|
|
class="itemIcon"
|
|
src="https://eshangtech.com/wanmeiyizhanImg/home/autoRepairNo6.png"
|
|
/>
|
|
<text class="itemText">车门松动紧固和润滑</text>
|
|
</view>
|
|
|
|
<view class="contentItem">
|
|
<image
|
|
class="itemIcon"
|
|
src="https://eshangtech.com/wanmeiyizhanImg/home/autoRepairNo7.png"
|
|
/>
|
|
<text class="itemText">底盘螺丝检查和紧固</text>
|
|
</view>
|
|
|
|
<view class="contentItem">
|
|
<image
|
|
class="itemIcon"
|
|
src="https://eshangtech.com/wanmeiyizhanImg/home/autoRepairNo8.png"
|
|
/>
|
|
<text class="itemText">轮胎充气 (仅轿车免费)</text>
|
|
</view>
|
|
|
|
<view class="contentItem" style="margin-bottom: 0">
|
|
<image
|
|
class="itemIcon"
|
|
src="https://eshangtech.com/wanmeiyizhanImg/home/autoRepairNo9.png"
|
|
/>
|
|
<text class="itemText">启动搭电 (仅轿车免费)</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<CustomLoading
|
|
:visible="isLoading"
|
|
v-if="isLoading"
|
|
@update:visible="(val) => (isLoading = val)"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import CustomLoading from "../../components/customLoading.vue";
|
|
export default {
|
|
data() {
|
|
return {
|
|
loginType: "", // 登录方式
|
|
menu: "", // 用户手机信息
|
|
serverPart: "", // 当前的服务区
|
|
servicePhone: "", // 服务区的汽修电话
|
|
isLoading: false,
|
|
};
|
|
},
|
|
components: { CustomLoading },
|
|
onLoad() {
|
|
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;
|
|
}
|
|
// 当前服务区
|
|
let currentService = uni.getStorageSync("currentService");
|
|
this.serverPart = currentService;
|
|
this.$utils.addUserBehaviorNew();
|
|
},
|
|
onShow() {
|
|
let currentService = uni.getStorageSync("currentService");
|
|
if (currentService) {
|
|
this.serverPart = currentService;
|
|
this.handleGetServiceDetail();
|
|
}
|
|
},
|
|
methods: {
|
|
handleBack() {
|
|
uni.navigateBack({
|
|
delta: 1,
|
|
});
|
|
},
|
|
// 服务区详情
|
|
async handleGetServiceDetail() {
|
|
this.isLoading = true;
|
|
const req = {
|
|
ServerpartId: this.serverPart.SERVERPART_ID,
|
|
};
|
|
|
|
let detailData = await this.$api.$get(
|
|
"/CommercialApi/BaseInfo/GetServerpartInfo",
|
|
req
|
|
);
|
|
let obj = detailData.Result_Data;
|
|
console.log("detailData", obj);
|
|
this.servicePhone = obj.RegionInfo[0].REPAIR_TEL;
|
|
this.isLoading = false;
|
|
},
|
|
// 跳转到地图选择服务区
|
|
goSelectServer() {
|
|
uni.navigateTo({ url: "/pages/newMap/index/index" });
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
@font-face {
|
|
font-family: "ALIMAMA";
|
|
src: url("/static/font/ALIMAMA/4MehOUFxkPfJ.woff2") format("woff2"),
|
|
url("/static/font/ALIMAMA/4MehOUFxkPfJ.woff") format("woff");
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-display: swap;
|
|
/* 控制字体加载期间的显示行为 */
|
|
}
|
|
|
|
.main {
|
|
width: 100%;
|
|
height: 100vh;
|
|
// background-color: #fff;
|
|
background-image: url("https://eshangtech.com/wanmeiyizhanImg/home/carMaintenanceBg.png");
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
box-sizing: border-box;
|
|
padding: 0 32rpx;
|
|
padding-bottom: calc(90rpx + env(safe-area-inset-bottom));
|
|
|
|
.mainTop {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.backIcon {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.selectBox {
|
|
display: inline-block;
|
|
|
|
.first {
|
|
display: flex;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
border-radius: 48rpx;
|
|
padding: 12rpx 24rpx;
|
|
background: #fff;
|
|
|
|
.addressIcon {
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.text {
|
|
font-family: PingFangSC, PingFang SC;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #090c1a;
|
|
line-height: 40rpx;
|
|
text-align: justify;
|
|
font-style: normal;
|
|
}
|
|
|
|
.moreIcon {
|
|
margin-left: 8rpx;
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.phoneBox {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 32rpx 40rpx;
|
|
background: linear-gradient(270deg, #f0f7ff 0%, #e6f5ff 100%);
|
|
border-radius: 16rpx;
|
|
border: 2rpx solid #ffffff;
|
|
margin-top: 240rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.phoneText {
|
|
font-family: "ALIMAMA";
|
|
font-weight: bold;
|
|
font-size: 44rpx;
|
|
color: #166cfe;
|
|
line-height: 64rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
.text {
|
|
margin-right: 16rpx;
|
|
font-family: "PingFangSC";
|
|
font-weight: 600;
|
|
font-size: 30rpx;
|
|
color: #091524;
|
|
line-height: 36rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
|
|
.projectPublicity {
|
|
width: 100%;
|
|
margin-top: 32rpx;
|
|
background: linear-gradient(270deg, #f0f7ff 0%, #e6f5ff 100%);
|
|
border-radius: 16rpx;
|
|
border: 2rpx solid #ffffff;
|
|
box-sizing: border-box;
|
|
padding: 46rpx 40rpx;
|
|
|
|
.titleBox {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.normalText {
|
|
font-family: "ALIMAMA";
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
color: #010b18;
|
|
line-height: 48rpx;
|
|
letter-spacing: 1px;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
|
|
.lightText {
|
|
font-family: "ALIMAMA";
|
|
font-weight: bold;
|
|
font-size: 40rpx;
|
|
color: #ff6b14;
|
|
line-height: 48rpx;
|
|
letter-spacing: 1px;
|
|
text-align: left;
|
|
font-style: normal;
|
|
margin: 0 8rpx;
|
|
}
|
|
}
|
|
|
|
.contentBox {
|
|
width: 100%;
|
|
margin-top: 24rpx;
|
|
|
|
.contentItem {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
margin-bottom: 20rpx;
|
|
|
|
.itemIcon {
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
.itemText {
|
|
font-family: "PingFangSC";
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #091524;
|
|
line-height: 36rpx;
|
|
text-align: left;
|
|
font-style: normal;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |