365 lines
8.3 KiB
Vue
365 lines
8.3 KiB
Vue
<template>
|
|
<view class="housekeeper-detail">
|
|
<!-- 导航栏 -->
|
|
<hx-navbar
|
|
:fixed="true"
|
|
:background-color="[0,[0,0,0,0],[0,0,0,0]]"
|
|
statusBarFontColor="#ffffff"
|
|
barPlaceholder="hidden"
|
|
transparent="auto"
|
|
color='#ffffff'
|
|
title="管家详情"
|
|
/>
|
|
|
|
<!-- 管家基本信息区 -->
|
|
<view class="housekeeper-header">
|
|
<view class="header-bg">
|
|
<image
|
|
:src="record.mainImage"
|
|
class="bg-image"
|
|
mode="aspectFill"
|
|
/>
|
|
<view class="bg-overlay"></view>
|
|
</view>
|
|
|
|
<view class="header-content">
|
|
<!-- 专业标签 -->
|
|
<view class="tags-section">
|
|
<view class="gg-item">
|
|
<view class="gg-item-title v12-font-28">旅居管家</view>
|
|
<view>{{record.name}}</view>
|
|
</view>
|
|
<view class="share-btn" @click="shareHousekeeper">
|
|
<view class="share-icon v12-primary">
|
|
<image :src="webUrl + '/home/share.png'" class="share-icon-image v12-primary" mode="aspectFill" />
|
|
</view>
|
|
<view>分</view>
|
|
<view>享</view>
|
|
<view>管</view>
|
|
<view>家</view>
|
|
</view>
|
|
<view class="v12-mt-3 v12-weight-500 v12-font-28">
|
|
{{ record.intro }}
|
|
</view>
|
|
</view>
|
|
<view class="v12-mt-3 v12-align-center" style="flex-wrap: wrap;">
|
|
<view v-for="tag in record.tags" :key="tag" class="v12-primary-text v12-primary-border v12-radius-100 tag-item v12-mr-2 v12-mb-2">{{ tag }}</view>
|
|
</view>
|
|
<view class="v12-mt-2 v12-font-24" style="color: #666">
|
|
{{ record.desc }}
|
|
</view>
|
|
<view class="v12-mt-3 service-wrap v12-pa-3">
|
|
<view class="title-wrap" style="padding-left: 12rpx;">
|
|
<text class="v12-font-30 v12-font-bold">金牌管家</text>
|
|
<text class="v12-font-24" style="color: #666">/ 服务保障</text>
|
|
</view>
|
|
<view v-for="(item, index) in record.skills" :key="index" class="v12-font-24 v12-mt-3" style="color: #666">
|
|
<text class="v12-font-bold v12-font-36 v12-mt-1" style="color: #FADE9F;margin-right: 8rpx;">· </text> {{ item }}
|
|
</view>
|
|
</view>
|
|
<view class="v12-mt-3">
|
|
<view class="v12-font-bold v12-font-32 v12-dark-text">TA能帮你</view>
|
|
<view class="v12-pa-3 icon-grid">
|
|
<view v-for="(item, index) in record.travelStewardServiceList" :key="index" class="service-icon-item">
|
|
<view class="service-icon">
|
|
<u-icon :name="item.serviceIcon" size="30"></u-icon>
|
|
</view>
|
|
<view class="v12-font-24 v12-mt-2 v12-weight-500">{{ item.serviceName }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<sharePopup ref="sharePopup" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getShareHousekeeper, getJiaLouStewardDetail } from '@/api/qianxian.js'
|
|
import sharePopup from '@/components/sharePopup.vue'
|
|
import {getUrlParam} from '@/utils/common.js'
|
|
export default {
|
|
name: 'HousekeeperDetail',
|
|
components: {
|
|
sharePopup
|
|
},
|
|
data() {
|
|
return {
|
|
webUrl: this.$VUE_APP_RESOURCES_URL,
|
|
record: {}
|
|
}
|
|
},
|
|
|
|
onLoad(options) {
|
|
// this.record = JSON.parse(decodeURIComponent(options.obj))
|
|
// console.log(this.record);
|
|
const id = options.id || ''
|
|
this.id = id
|
|
|
|
if (id) {
|
|
// this.partnerId = options.partnerId || null
|
|
} else {
|
|
let obj = uni.getEnterOptionsSync()
|
|
if (options.scene || obj.query.scene) {
|
|
const query = options ? decodeURIComponent(options.scene + '') : decodeURIComponent(obj.query.scene)
|
|
this.id = getUrlParam(query, 'id') || null
|
|
}
|
|
}
|
|
this.getJiaLouStewardDetail()
|
|
},
|
|
|
|
methods: {
|
|
getJiaLouStewardDetail() {
|
|
uni.showLoading()
|
|
getJiaLouStewardDetail(this.id).then(res => {
|
|
uni.hideLoading()
|
|
if(res.status === 200) {
|
|
this.record = res.data || {}
|
|
}
|
|
})
|
|
},
|
|
shareHousekeeper() {
|
|
uni.showLoading()
|
|
getShareHousekeeper(this.record.id).then(res => {
|
|
uni.hideLoading()
|
|
if(res.status === 200) {
|
|
// uni.previewImage({
|
|
// urls: [res.data],
|
|
// })
|
|
this.$refs.sharePopup.showView(res.data)
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.share-icon-image{
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
border-radius: 50%;
|
|
}
|
|
.gg-item{
|
|
text-align: center;
|
|
width: fit-content;
|
|
font-size: 28rpx;
|
|
border-radius: 22rpx;
|
|
border: 1px solid #FADE9F;
|
|
.gg-item-title{
|
|
font-size: 24rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
padding: 8rpx 24rpx;
|
|
border-radius: 100rpx;
|
|
background: #FADE9F;
|
|
margin-top: -12rpx;
|
|
}
|
|
}
|
|
.housekeeper-detail {
|
|
background: #fff;
|
|
min-height: 100vh;
|
|
padding-bottom: 120rpx;
|
|
}
|
|
|
|
// 管家头部信息区
|
|
.housekeeper-header {
|
|
position: relative;
|
|
background: #fff;
|
|
|
|
.header-bg {
|
|
position: relative;
|
|
overflow: hidden;
|
|
height: 791rpx;
|
|
border-bottom-right-radius: 200px 100px;
|
|
border-bottom-left-radius: 200px 100px;
|
|
.bg-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.bg-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
}
|
|
|
|
.header-content {
|
|
position: relative;
|
|
padding: 0 32rpx 40rpx;
|
|
z-index: 2;
|
|
}
|
|
}
|
|
|
|
// 管家基本信息
|
|
.housekeeper-info {
|
|
display: flex;
|
|
margin-bottom: 40rpx;
|
|
|
|
.avatar-section {
|
|
position: relative;
|
|
margin-right: 24rpx;
|
|
|
|
.avatar {
|
|
width: 120rpx;
|
|
height: 120rpx;
|
|
border-radius: 60rpx;
|
|
border: 4rpx solid #fff;
|
|
box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.15);
|
|
}
|
|
|
|
.online-status {
|
|
position: absolute;
|
|
bottom: 8rpx;
|
|
right: 8rpx;
|
|
width: 24rpx;
|
|
height: 24rpx;
|
|
background: #fff;
|
|
border-radius: 12rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.status-dot {
|
|
width: 12rpx;
|
|
height: 12rpx;
|
|
background: #52c41a;
|
|
border-radius: 6rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.info-section {
|
|
flex: 1;
|
|
|
|
.name-row {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 16rpx;
|
|
|
|
.name {
|
|
font-size: 36rpx;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
.title-badge {
|
|
background: rgba(255,255,255,0.9);
|
|
padding: 6rpx 16rpx;
|
|
border-radius: 20rpx;
|
|
|
|
.title {
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rating-row {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 16rpx;
|
|
|
|
.stars {
|
|
display: flex;
|
|
margin-right: 12rpx;
|
|
|
|
.star {
|
|
font-size: 28rpx;
|
|
color: #ddd;
|
|
|
|
&.active {
|
|
color: #ffd700;
|
|
}
|
|
}
|
|
}
|
|
|
|
.rating-text {
|
|
font-size: 28rpx;
|
|
color: #fff;
|
|
margin-right: 16rpx;
|
|
}
|
|
|
|
.service-years {
|
|
font-size: 24rpx;
|
|
color: rgba(255,255,255,0.8);
|
|
}
|
|
}
|
|
|
|
.description {
|
|
font-size: 28rpx;
|
|
line-height: 40rpx;
|
|
color: rgba(255,255,255,0.9);
|
|
}
|
|
}
|
|
}
|
|
|
|
.tag-item{
|
|
width: fit-content;
|
|
padding: 4rpx 24rpx;
|
|
border-radius: 100rpx;
|
|
font-size: 22rpx;
|
|
color: #333;
|
|
text-align: center;
|
|
}
|
|
.service-wrap{
|
|
background: #f5f5f5;
|
|
border-radius: 40rpx;
|
|
}
|
|
.service-icon{
|
|
width: 88rpx;
|
|
height: 88rpx;
|
|
background: #FADE9F;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.icon-grid{
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
gap: 24rpx;
|
|
}
|
|
.service-icon-item{
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
.share-btn{
|
|
background: #FADE9F;
|
|
border-radius: 100rpx;
|
|
padding: 12rpx 10rpx;
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
width: fit-content;
|
|
position: absolute;
|
|
top: -124rpx;
|
|
right: 24rpx;
|
|
text-align: center;
|
|
}
|
|
.share-icon{
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.title-wrap{
|
|
position: relative;
|
|
&::after{
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 6rpx;
|
|
height: 80%;
|
|
border-radius: 10rpx;
|
|
background: #CE4852;
|
|
}
|
|
}
|
|
</style> |