You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
391 lines
7.3 KiB
391 lines
7.3 KiB
<template>
|
|
<view class="sub-sctibes-server">
|
|
<mNavbar title="服务详情" :leftClick="leftClick"></mNavbar>
|
|
<view class="image-box b-relative">
|
|
<!-- <image @click="back" src="@/static/technician/back.png" mode="aspectFill" class="icon"></image> -->
|
|
<image :src="projectDetail.image" mode="aspectFill" class="projectImage"></image>
|
|
</view>
|
|
<view class="door box-s bg-w">
|
|
<view class="call box-s">
|
|
<image src="@/static/technician/lightning-icon.png" mode="aspectFill"></image>
|
|
<view class="rush-door">
|
|
<text class="rush">急速</text>上门
|
|
</view>
|
|
<view class="desc">
|
|
随叫随到 最快30分钟上门
|
|
</view>
|
|
</view>
|
|
<view class="server-list">
|
|
<view class="server-item box-s">
|
|
<view class="server-name">{{ projectDetail.title }}</view>
|
|
<view class="select-box"></view>
|
|
<view class="price-and-time">
|
|
<view class="price">
|
|
<text class="unit">￥</text>
|
|
<text>{{ projectDetail.price }}</text>
|
|
<text class="time">
|
|
元/{{ projectDetail.times }}分钟
|
|
</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="guarantee-and-coupon mar-10 bg-w box-s">
|
|
<view class="item">
|
|
<view class="title">保障</view>
|
|
<view class="guarantee">
|
|
<view class="guarantee-item">
|
|
<image src="@/static/icons/icon7.png"></image>
|
|
安全可靠
|
|
</view>
|
|
<view class="guarantee-item">
|
|
<image src="@/static/icons/icon7.png"></image>
|
|
无额外收费
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- <view class="item">
|
|
<view class="title">
|
|
领券
|
|
</view>
|
|
<view class="coupon-list">
|
|
<view class="coupon-item">
|
|
{{ projectDetail.subTitle }}
|
|
</view>
|
|
<view class="coupon-item">
|
|
满299减20
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
|
|
</view>
|
|
|
|
<van-tabs v-model:active="active">
|
|
<van-tab title="项目介绍">
|
|
<img class="project-detail-img" width="100%" :src="projectDetail.projectSub" alt="项目介绍图片" />
|
|
</van-tab>
|
|
<van-tab title="下单说明">
|
|
<view v-html="configList.orderInstructions" class="jies"></view>
|
|
</van-tab>
|
|
</van-tabs>
|
|
|
|
<view class="md-doc mar-10 b-relative">
|
|
<view class="pack-up">
|
|
<!-- 收起
|
|
<van-icon name="arrow-up" /> -->
|
|
</view>
|
|
</view>
|
|
|
|
<view class="select-button bg-white">
|
|
<view @click="selectTechnician" class="btn">
|
|
下单选择技师
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import mNavbar from '@/components/base/m-navbar.vue'
|
|
|
|
export default {
|
|
components: {
|
|
mNavbar
|
|
},
|
|
data() {
|
|
return {
|
|
active: 0,
|
|
projectDetail: {},
|
|
reviewList : [],
|
|
orderInstructions : '', //下单说明
|
|
technicianList : [] ,
|
|
queryParams : {
|
|
projectId : this.$route.query.id,
|
|
pageNo : 1,
|
|
pageSize : 10,
|
|
fraction : 0
|
|
},
|
|
loading : false,
|
|
finished : false
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getProjectDetail()
|
|
// this.getConfig()
|
|
},
|
|
methods: {
|
|
|
|
//获取项目详情
|
|
getProjectDetail() {
|
|
|
|
let queryParams = {
|
|
id: this.$route.query.id
|
|
}
|
|
|
|
if(this.$store.state.selectArea.id){
|
|
queryParams.county = this.$store.state.selectArea.id
|
|
}
|
|
|
|
this.$api('getProjectDetail', queryParams, res => {
|
|
if (res.code == 200) {
|
|
this.projectDetail = res.result.details;
|
|
this.technicianList = res.result.tenPageList;
|
|
}
|
|
})
|
|
},
|
|
|
|
//返回
|
|
back() {
|
|
if (this.$route.query.r == '1') {
|
|
uni.switchTab({
|
|
url: '/pages/index/index'
|
|
})
|
|
} else {
|
|
uni.navigateBack(-1)
|
|
}
|
|
},
|
|
|
|
//跳转选择技师页面
|
|
selectTechnician() {
|
|
uni.navigateTo({
|
|
url: `/pages/technician/selectTechnician?serviceId=${this.projectDetail.id}`
|
|
})
|
|
sessionStorage.setItem('technicianList',JSON.stringify(this.technicianList))
|
|
},
|
|
|
|
//获取配置
|
|
getConfig() {
|
|
this.$api('getConfig', {} ,res => {
|
|
if(res.code == 200){
|
|
res.result.forEach(item => {
|
|
if(item.keyValue == 'orderInstructions'){
|
|
this.orderInstructions = item.content;
|
|
}
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
//返回首页
|
|
leftClick() {
|
|
uni.switchTab({
|
|
url: '/pages/index/index'
|
|
})
|
|
},
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.jies{
|
|
padding: 20px;
|
|
background-color: #fff;
|
|
}
|
|
.sub-sctibes-server {
|
|
background: #F5F5F5;
|
|
width: 750rpx;
|
|
margin: 0 auto;
|
|
padding-bottom: 80rpx;
|
|
|
|
.box-s {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.mar-10 {
|
|
margin: 20rpx 0rpx;
|
|
}
|
|
|
|
.bg-w {
|
|
background: white;
|
|
}
|
|
|
|
.image-box {
|
|
// height: 500rpx;
|
|
width: 750rpx;
|
|
|
|
.icon {
|
|
position: absolute;
|
|
z-index: 1000;
|
|
left: 10rpx;
|
|
top: 10rpx;
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
}
|
|
|
|
.projectImage {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.door {
|
|
padding: 20rpx;
|
|
|
|
.call {
|
|
display: flex;
|
|
align-items: center;
|
|
background: #F8F8F8;
|
|
border-radius: 10rpx;
|
|
height: 60rpx;
|
|
padding: 0rpx 10rpx;
|
|
|
|
image {
|
|
width: 25rpx;
|
|
height: 25rpx;
|
|
}
|
|
|
|
.rush-door {
|
|
font-size: 32rpx;
|
|
color: black;
|
|
font-family: 'PangMenZhengDao';
|
|
font-weight: 600;
|
|
margin-left: 5rpx;
|
|
|
|
.rush {
|
|
color: #49B369;
|
|
}
|
|
}
|
|
|
|
.desc {
|
|
font-size: 26rpx;
|
|
color: #666666;
|
|
margin-left: 20rpx;
|
|
}
|
|
}
|
|
|
|
.server-list {
|
|
margin-top: 20rpx;
|
|
|
|
.server-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
background: #E4FEF1;
|
|
width: 300rpx;
|
|
height: 120rpx;
|
|
border-radius: 15rpx;
|
|
padding: 10rpx 20rpx;
|
|
border: 1px solid #49B369;
|
|
|
|
.server-name {
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.price-and-time {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
height: 40rpx;
|
|
|
|
.price {
|
|
color: #FFB300;
|
|
font-size: 32rpx;
|
|
font-weight: 600;
|
|
|
|
.unit {
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.time {
|
|
font-size: 20rpx;
|
|
color: #9CADA5;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.guarantee-and-coupon {
|
|
.item {
|
|
height: 80rpx;
|
|
padding: 0rpx 20rpx;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.title {
|
|
font-size: 28rpx;
|
|
}
|
|
|
|
.guarantee,
|
|
.coupon-list {
|
|
display: flex;
|
|
font-size: 24rpx;
|
|
color: #333333;
|
|
|
|
.guarantee-item {
|
|
margin-left: 20rpx;
|
|
|
|
image {
|
|
width: 25rpx;
|
|
height: 25rpx;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.coupon-item {
|
|
background: #F29E45;
|
|
margin-left: 20rpx;
|
|
color: white;
|
|
padding: 5rpx 18rpx;
|
|
border-radius: 3.5rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.project-detail-img{
|
|
width: 100%;
|
|
}
|
|
|
|
/* md表格 */
|
|
.md-doc {
|
|
// height: 750rpx;
|
|
background: #fff;
|
|
|
|
.pack-up {
|
|
text-align: center;
|
|
font-size: 26rpx;
|
|
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.select-button {
|
|
position: fixed;
|
|
display: flex;
|
|
align-items: center;
|
|
bottom: 0;
|
|
left: 0;
|
|
height: 100rpx;
|
|
width: 750rpx;
|
|
margin: 0 auto;
|
|
box-shadow: -2px -2px 10px rgba(0, 0, 0, .1);
|
|
|
|
.btn {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 90%;
|
|
height: 80rpx;
|
|
margin: 0 auto;
|
|
background: #49B369;
|
|
border-radius: 42.5rpx;
|
|
color: white;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media all and (min-width: 961px) {
|
|
.select-button {
|
|
left: 50% !important;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
</style>
|