sunliwei/lanan-repair
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
0611548eae
lanan-repair/pages/shopDetail/shopDetail.vue

355 lines
9.6 KiB
Vue
Raw Normal View History

提交
2024-09-22 15:07:01 +08:00
<template>
<view class="container">
<view class="body">
<view class="body-top">
<view style="z-index: 2;position: relative;">
<VNavigationBar titleColor="#fff" backgroundColor="rgba(0,0,0,0)">
<template v-slot:back>
<image style="width: 56rpx;height: 56rpx;" src="../../static/icons/backIcon.png"
mode="aspectFit"></image>
</template>
</VNavigationBar>
</view>
<image class="shopImg" src="" mode="aspectFill"></image>
</view>
<view class="shopBody">
<view class="shopDetail">
先提交一下
2024-09-24 14:08:50 +08:00
<!-- <view class="shopTitle">顺捷汽车维修搭电救援补胎中心</view>-->
<view class="shopTitle">{{ info.corpName }}</view>
提交
2024-09-22 15:07:01 +08:00
<view class="rate">
<view class="rateNumBox">
<text>4.5</text>
<image style="width: 28rpx;height: 28rpx;" src="../../static/icons/rateIcon.png"
mode="aspectFit"></image>
</view>
<text>强烈推荐</text>
</view>
<view class="shopDetailText">
先提交一下
2024-09-24 14:08:50 +08:00
<mote-lines-divide :line="3" expandText="全部" foldHint="收起" v-if="info && info.corpContent">
提交
2024-09-22 15:07:01 +08:00
<text class="shopDetailTextLabel">厂家介绍：</text>
先提交一下
2024-09-24 14:08:50 +08:00
<!-- <text class="shopDetailTextValue">-->
<!-- 正安汽车维修服务有限公司成立于1993年10月25日，属东莞市成立最早、规模最大的民营汽修企业之一。现在莞城区及桥头镇开设有二家连锁经营分厂及直属汽车销售部，主要从事汽车销售、售后，-->
<!-- </text>-->
提交
2024-09-22 15:07:01 +08:00
<text class="shopDetailTextValue">
先提交一下
2024-09-24 14:08:50 +08:00
{{ info.corpContent }}
提交
2024-09-22 15:07:01 +08:00
</text>
</mote-lines-divide>
</view>
<view class="shopDetailFooter">
<view class="shopAddress">
<image style="width: 32rpx;height: 32rpx;" src="../../static/icons/order-icon1.png"
mode="aspectFit"></image>
先提交一下
2024-09-24 14:08:50 +08:00
<!-- <text>济南市历下区福瑞达历下护理院东南门旁</text>-->
<text>{{ info.address }}</text>
提交
2024-09-22 15:07:01 +08:00
</view>
<view class="shopPhone">
<image style="width: 32rpx;height: 32rpx;" src="../../static/icons/order-icon2.png"
mode="aspectFit"></image>
<text>电话</text>
</view>
</view>
</view>
<view class="busiDetail">
先提交一下
2024-09-24 14:08:50 +08:00
<!-- <view class="busiDetailTitle">顺捷汽车维修搭电救援补胎中心</view>-->
<view class="busiDetailTitle">{{info.corpName}}</view>
提交
2024-09-22 15:07:01 +08:00
<view class="busiList">
<view v-for="(item, index) in busiList" :key="index" class="busiItem">
<image class="busiTypeImg" :src="item.image" mode="aspectFill"></image>
<view class="busiItemInfo">
先提交一下
2024-09-24 14:08:50 +08:00
<view class="busiItemTitle">{{ item.name }}</view>
提交
2024-09-22 15:07:01 +08:00
<view class="busiItemDesc">{{ item.desc }}</view>
</view>
先提交一下
2024-09-24 14:08:50 +08:00
<!-- <view class="busiItemBtn">查看</view>-->
提交
2024-09-22 15:07:01 +08:00
</view>
</view>
</view>
</view>
</view>
<view class="footer">
<view class="btn" @click="gotoReservation">开始预约</view>
</view>
</view>
</template>
<script>
import VNavigationBar from '@/components/VNavigationBar.vue'
更新代码
2024-09-24 20:45:24 +08:00
import request from "../../utils/request";
提交
2024-09-22 15:07:01 +08:00
export default {
components: {
VNavigationBar
},
data() {
return {
先提交一下
2024-09-24 14:08:50 +08:00
// busiList: [{
// title: '钣金喷漆维修',
// desc: '钣金喷漆维修是一个汽车修理的技术手段，此方面汽车钣金等于汽车钣金修理，指汽车发生碰撞后要对车身进行修复，也即除对车身进行防腐和装饰的喷涂工作外其余的所有工作。如汽车车身损伤的分析，汽车车身的测量，汽车车身钣金的整形，拉伸矫正，去应力焊接，以及汽车车身附件装配，调整等工作。',
// image: ''
// }, {
// title: '钣金喷漆维修',
// desc: '钣金喷漆维修是一个汽车修理的技术手段，此方面汽车钣金等于汽车钣金修理，指汽车发生碰撞后要对车身进行修复，也即除对车身进行防腐和装饰的喷涂工作外其余的所有工作。如汽车车身损伤的分析，汽车车身的测量，汽车车身钣金的整形，拉伸矫正，去应力焊接，以及汽车车身附件装配，调整等工作。',
// image: ''
// }, {
// title: '钣金喷漆维修',
// desc: '钣金喷漆维修是一个汽车修理的技术手段，此方面汽车钣金等于汽车钣金修理，指汽车发生碰撞后要对车身进行修复，也即除对车身进行防腐和装饰的喷涂工作外其余的所有工作。如汽车车身损伤的分析，汽车车身的测量，汽车车身钣金的整形，拉伸矫正，去应力焊接，以及汽车车身附件装配，调整等工作。',
// image: ''
// }, {
// title: '钣金喷漆维修',
// desc: '钣金喷漆维修是一个汽车修理的技术手段，此方面汽车钣金等于汽车钣金修理，指汽车发生碰撞后要对车身进行修复，也即除对车身进行防腐和装饰的喷涂工作外其余的所有工作。如汽车车身损伤的分析，汽车车身的测量，汽车车身钣金的整形，拉伸矫正，去应力焊接，以及汽车车身附件装配，调整等工作。',
// image: ''
// }, ]
busiList: [],
info: {}
提交
2024-09-22 15:07:01 +08:00
};
},
先提交一下
2024-09-24 14:08:50 +08:00
onLoad(data) {
this.info = JSON.parse(decodeURIComponent(data.info))
},
onShow() {
this.getServer()
},
提交
2024-09-22 15:07:01 +08:00
methods: {
// 去预约
gotoReservation() {
uni.navigateTo({
更新代码
2024-09-24 22:42:08 +08:00
url: '/pages/myReservation/addReservation?info=' + encodeURIComponent(JSON.stringify(this.info))
提交
2024-09-22 15:07:01 +08:00
})
先提交一下
2024-09-24 14:08:50 +08:00
},
// 取能提供的服务
async getServer() {
const res = await request({
url: "/userClient/base/company/get",
method: 'get',
params: {
id: this.info.id
}
})
this.busiList = res.data.servicePackages
this.busiList.forEach(item => {
item['image'] = require("@/static/images/inImage.jpg")
item['desc'] = this.info.business
})
提交
2024-09-22 15:07:01 +08:00
}
}
}
</script>
<style lang="less" scoped>
.container {
height: 100%;
display: flex;
flex-direction: column;
background-color: #fff;
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
.body {
flex: 1;
height: 0;
overflow: auto;
}
.body-top {
position: relative;
width: 750rpx;
height: 468rpx;
.shopImg {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: #eee;
}
.back {}
}
.shopBody {
position: relative;
top: -50rpx;
overflow: auto;
padding-bottom: 20rpx;
}
.shopDetail {
position: relative;
z-index: 2;
padding: 30rpx 32rpx;
background: #FFFFFF;
box-shadow: 0rpx 8rpx 16rpx 0rpx rgba(10, 54, 104, 0.1);
border-radius: 32rpx 32rpx 0rpx 0rpx;
.shopTitle {
font-weight: bold;
font-size: 36rpx;
color: #333333;
}
.rate {
margin: 30rpx 0;
box-sizing: border-box;
width: 282rpx;
height: 56rpx;
background: #FFF1DB;
border-radius: 30rpx 30rpx 30rpx 30rpx;
padding-right: 30rpx;
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 500;
font-size: 28rpx;
color: #E8A321;
.rateNumBox {
width: 120rpx;
height: 56rpx;
background: linear-gradient(180deg, #FFD187 0%, #FEB33A 100%);
border-radius: 30rpx 30rpx 30rpx 30rpx;
display: flex;
align-items: center;
justify-content: center;
column-gap: 4rpx;
font-size: 32rpx;
color: #FFFFFF;
line-height: 1.5;
}
}
.shopDetailText {
padding-bottom: 30rpx;
border-bottom: 1rpx solid #EEEEEE;
margin-bottom: 30rpx;
.shopDetailTextLabel {
font-weight: bold;
font-size: 28rpx;
color: #333333;
}
.shopDetailTextValue {
font-size: 28rpx;
color: #666666;
}
}
.shopDetailFooter {
display: flex;
align-items: center;
.shopAddress {
flex: 1;
width: 0;
display: flex;
align-items: center;
column-gap: 8rpx;
font-size: 28rpx;
color: #666666;
border-right: 1rpx solid #EEEEEE;
margin-right: 20rpx;
}
.shopPhone {
flex-shrink: 0;
display: flex;
flex-direction: column;
align-items: center;
row-gap: 4rpx;
font-size: 24rpx;
color: #333333;
}
}
}
.busiDetail {
padding: 30rpx 32rpx;
background: #FFFFFF;
.busiDetailTitle {
font-weight: bold;
font-size: 36rpx;
color: #333333;
}
.busiList {
.busiItem {
padding: 30rpx 0;
display: flex;
align-items: center;
border-bottom: 1rpx solid #DDDDDD;
column-gap: 20rpx;
}
.busiTypeImg {
width: 112rpx;
height: 112rpx;
background-color: #eee;
}
.busiItemInfo {
flex: 1;
width: 0;
}
.busiItemTitle {
font-size: 28rpx;
color: #333333;
}
.busiItemDesc {
font-size: 24rpx;
color: #858BA0;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-break: break-all;
}
.busiItemBtn {
width: 100rpx;
height: 48rpx;
background: #0174F6;
border-radius: 24rpx 24rpx 24rpx 24rpx;
font-size: 28rpx;
color: #FFFFFF;
先提交一下
2024-09-24 14:08:50 +08:00
提交
2024-09-22 15:07:01 +08:00
display: flex;
align-items: center;
justify-content: center;
}
}
}
.footer {
padding: 12rpx;
background: #FFFFFF;
box-shadow: 0rpx -8rpx 16rpx 0rpx rgba(10, 54, 104, 0.1);
border-radius: 0rpx 0rpx 0rpx 0rpx;
position: relative;
.btn {
width: 510rpx;
height: 76rpx;
margin: 0 auto;
background: #0174F6;
border-radius: 38rpx 38rpx 38rpx 38rpx;
display: flex;
align-items: center;
justify-content: center;
font-size: 32rpx;
color: #FFFFFF;
}
}
}
先提交一下
2024-09-24 14:08:50 +08:00
</style>
Reference in New Issue Copy Permalink