417 lines
13 KiB
Vue
417 lines
13 KiB
Vue
<template>
|
|
<view class="container">
|
|
<div
|
|
class="searchBox"
|
|
:style="{ height: localHeight + 'px', paddingTop: top + 'px' }"
|
|
>
|
|
<view class="searchBox_left">
|
|
<u-icon
|
|
bold
|
|
color="#000"
|
|
size="40"
|
|
name="arrow-left"
|
|
@click="back"
|
|
></u-icon>
|
|
</view>
|
|
<div class="searchBox_mid">刘师傅</div>
|
|
<div class="searchBox_right">
|
|
<u-icon
|
|
bold
|
|
color="#000"
|
|
size="40"
|
|
name="arrow-left"
|
|
@click="back"
|
|
></u-icon>
|
|
</div>
|
|
</div>
|
|
<!-- 阿姨 -->
|
|
<div class="aunt" v-if="false">
|
|
<div class="banner">
|
|
<swiper>
|
|
<swiper-item>
|
|
<image
|
|
src="http://192.168.0.172:5500/homeServer_banner.png"
|
|
></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
<div class="dotList">
|
|
<div class="dot active"></div>
|
|
<div class="dot"></div>
|
|
<div class="dot"></div>
|
|
</div>
|
|
</div>
|
|
<div class="master">
|
|
<div class="master_info">
|
|
<div class="master_info_left">
|
|
<image src="http://192.168.0.172:5500/home_icon12.png"></image>
|
|
<div class="state state1">待服务</div>
|
|
<div class="state state2" v-if="false">休息中</div>
|
|
<div class="state state3" v-if="false">服务中</div>
|
|
</div>
|
|
<div class="master_info_right">
|
|
<div class="master_info_right1">
|
|
林师傅
|
|
<image
|
|
class="Medal"
|
|
src="http://192.168.0.172:5500/homeServer_Champion.png"
|
|
></image>
|
|
<image
|
|
class="Medal"
|
|
v-if="false"
|
|
src="http://192.168.0.172:5500/homeServer_RunnerUp.png"
|
|
>
|
|
</image>
|
|
<image
|
|
class="star"
|
|
src="http://192.168.0.172:5500/local_start1.png"
|
|
></image>
|
|
<span>4.8</span>
|
|
</div>
|
|
<div class="master_info_right2">
|
|
价格范围： <span>￥500-￥800</span>
|
|
</div>
|
|
<div class="master_info_right3">
|
|
<div class="master_info_right3_item">
|
|
<div>专业性</div>
|
|
<u-line-progress
|
|
class="gradient-progress"
|
|
:showText="false"
|
|
:percentage="100"
|
|
activeColor="transparent"
|
|
></u-line-progress>
|
|
<span>80分</span>
|
|
</div>
|
|
<div class="master_info_right3_item">
|
|
<div>好评率</div>
|
|
<u-line-progress
|
|
class="gradient-progress"
|
|
:showText="false"
|
|
:percentage="30"
|
|
activeColor="transparent"
|
|
></u-line-progress>
|
|
<span>80%</span>
|
|
</div>
|
|
<div class="master_info_right3_item">
|
|
<div>准时率</div>
|
|
<u-line-progress
|
|
class="gradient-progress"
|
|
:showText="false"
|
|
:percentage="30"
|
|
activeColor="transparent"
|
|
></u-line-progress>
|
|
<span>80%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="master_msg">
|
|
<div class="master_msg_item">
|
|
<image
|
|
src="http://192.168.0.172:5500/homeServer_masterIcon1.png"
|
|
></image>
|
|
<div class="master_msg_itemText">52岁</div>
|
|
<div>广东梅州人</div>
|
|
</div>
|
|
<div class="master_msg_item">
|
|
<image
|
|
src="http://192.168.0.172:5500/homeServer_masterIcon2.png"
|
|
></image>
|
|
<div class="master_msg_itemText">5-10年</div>
|
|
<div>服务经验</div>
|
|
</div>
|
|
<div class="master_msg_item">
|
|
<image
|
|
src="http://192.168.0.172:5500/homeServer_masterIcon3.png"
|
|
></image>
|
|
<div class="master_msg_itemText">500+</div>
|
|
<div>成功预约</div>
|
|
</div>
|
|
<div class="master_msg_item">
|
|
<image
|
|
src="http://192.168.0.172:5500/homeServer_masterIcon4.png"
|
|
></image>
|
|
<div class="master_msg_itemText">100+</div>
|
|
<div>用户评价</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="master_tagList">
|
|
<div class="master_tag" v-for="(item, index) in 8" :key="index">
|
|
积极主动
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="Badge">
|
|
<div class="Tit">职业证书</div>
|
|
<div class="imgList">
|
|
<div class="imgItem" v-for="(item, index) in 5" :key="index">
|
|
<image src="http://192.168.0.172:5500/com_MsgImg1.png"></image>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="recommend">
|
|
<div class="Tit">推荐师傅</div>
|
|
|
|
<div class="master_info mt20" v-for="(item, index) in 3" :key="index">
|
|
<div class="master_info_left">
|
|
<image src="http://192.168.0.172:5500/home_icon12.png"></image>
|
|
<div class="state state1">待服务</div>
|
|
<div class="state state2" v-if="false">休息中</div>
|
|
<div class="state state3" v-if="false">服务中</div>
|
|
</div>
|
|
<div class="master_info_right">
|
|
<div class="master_info_right1">
|
|
<div class="master_info_right_left">
|
|
林师傅
|
|
<image
|
|
class="Medal"
|
|
src="http://192.168.0.172:5500/homeServer_Champion.png"
|
|
></image>
|
|
<image
|
|
class="Medal"
|
|
v-if="false"
|
|
src="http://192.168.0.172:5500/homeServer_RunnerUp.png"
|
|
>
|
|
</image>
|
|
<image
|
|
class="star"
|
|
src="http://192.168.0.172:5500/local_start1.png"
|
|
></image>
|
|
<span>4.8</span>
|
|
</div>
|
|
<div class="master_info_right_right">查看资料</div>
|
|
</div>
|
|
|
|
<div class="master_info_right2">52岁 广东梅州人 5-10年</div>
|
|
|
|
<div class="master_info_right3">
|
|
<span>500+</span>预定<span>100+</span>评价
|
|
</div>
|
|
|
|
<div class="MasterItem_Info_right_4">
|
|
<div class="tagItem tag1">积极主动</div>
|
|
<div class="tagItem tag2">技术精湛</div>
|
|
<div class="tagItem tag3">技术精湛</div>
|
|
</div>
|
|
|
|
<div class="MasterItem_Info_right_5">
|
|
价格范围： <span>￥500-￥800</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 师傅 -->
|
|
<div class="masters">
|
|
<div class="master">
|
|
<div class="master_info">
|
|
<div class="master_info_left">
|
|
<image src="http://192.168.0.172:5500/home_icon12.png"></image>
|
|
<div class="state state1">待服务</div>
|
|
<div class="state state2" v-if="false">休息中</div>
|
|
<div class="state state3" v-if="false">服务中</div>
|
|
</div>
|
|
<div class="master_info_right">
|
|
<div class="master_info_right1">
|
|
林师傅
|
|
<image
|
|
class="Medal"
|
|
src="http://192.168.0.172:5500/homeServer_Champion.png"
|
|
></image>
|
|
<image
|
|
class="Medal"
|
|
v-if="false"
|
|
src="http://192.168.0.172:5500/homeServer_RunnerUp.png"
|
|
>
|
|
</image>
|
|
<image
|
|
class="star"
|
|
src="http://192.168.0.172:5500/local_start1.png"
|
|
></image>
|
|
<span>4.8</span>
|
|
</div>
|
|
<div class="master_info_right2">
|
|
价格范围： <span>￥500-￥800</span>
|
|
</div>
|
|
<div class="master_info_right3">
|
|
<div class="master_info_right3_item">
|
|
<div>专业性</div>
|
|
<u-line-progress
|
|
class="gradient-progress"
|
|
:showText="false"
|
|
:percentage="100"
|
|
activeColor="transparent"
|
|
></u-line-progress>
|
|
<span>80分</span>
|
|
</div>
|
|
<div class="master_info_right3_item">
|
|
<div>好评率</div>
|
|
<u-line-progress
|
|
class="gradient-progress"
|
|
:showText="false"
|
|
:percentage="30"
|
|
activeColor="transparent"
|
|
></u-line-progress>
|
|
<span>80%</span>
|
|
</div>
|
|
<div class="master_info_right3_item">
|
|
<div>准时率</div>
|
|
<u-line-progress
|
|
class="gradient-progress"
|
|
:showText="false"
|
|
:percentage="30"
|
|
activeColor="transparent"
|
|
></u-line-progress>
|
|
<span>80%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="master_msg">
|
|
<div class="master_msg_item">
|
|
<image
|
|
src="http://192.168.0.172:5500/homeServer_masterIcon1.png"
|
|
></image>
|
|
<div class="master_msg_itemText">52岁</div>
|
|
<div>广东梅州人</div>
|
|
</div>
|
|
<div class="master_msg_item">
|
|
<image
|
|
src="http://192.168.0.172:5500/homeServer_masterIcon2.png"
|
|
></image>
|
|
<div class="master_msg_itemText">5-10年</div>
|
|
<div>服务经验</div>
|
|
</div>
|
|
<div class="master_msg_item">
|
|
<image
|
|
src="http://192.168.0.172:5500/homeServer_masterIcon3.png"
|
|
></image>
|
|
<div class="master_msg_itemText">500+</div>
|
|
<div>成功预约</div>
|
|
</div>
|
|
<div class="master_msg_item">
|
|
<image
|
|
src="http://192.168.0.172:5500/homeServer_masterIcon4.png"
|
|
></image>
|
|
<div class="master_msg_itemText">100+</div>
|
|
<div>用户评价</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="master_tagList">
|
|
<div class="master_tag" v-for="(item, index) in 8" :key="index">
|
|
积极主动
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="Evaluate">
|
|
<div class="Tit">客户点评</div>
|
|
<div class="EvaluateItem">
|
|
<div class="evaluateItem_header">
|
|
<div class="evaluateItem_ava">
|
|
<image src="http://192.168.0.172:5500/com_MsgImg1.png"></image>
|
|
</div>
|
|
<div class="evaluateItem_msg">
|
|
<div class="evaluateItem_msg1">TP</div>
|
|
<div class="evaluateItem_msg2">
|
|
<image
|
|
v-for="(item, index) in 5"
|
|
:key="index"
|
|
src="http://192.168.0.172:5500/homeServer_stait.png"
|
|
></image>
|
|
</div>
|
|
</div>
|
|
<div class="evaluateItem_time">2025-06-24</div>
|
|
</div>
|
|
<div class="evaluateItem_main">真好啊！真棒啊！优秀！</div>
|
|
</div>
|
|
<div class="more" @click="EvaluateMore">查看更多</div>
|
|
</div>
|
|
|
|
<div class="Badge">
|
|
<div class="Tit">职业证书</div>
|
|
<div class="imgList">
|
|
<div class="imgItem" v-for="(item, index) in 5" :key="index">
|
|
<image src="http://192.168.0.172:5500/com_MsgImg1.png"></image>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 底部 -->
|
|
<div class="footer">
|
|
<div class="footerIcon" @click="Vendor">
|
|
<image
|
|
id="footerIcon1"
|
|
src="http://192.168.0.172:5500/homeServer_serverInfoIcon.png"
|
|
></image>
|
|
服务商
|
|
</div>
|
|
<div class="footerIcon">
|
|
<image
|
|
id="footerIcon2"
|
|
src="http://192.168.0.172:5500/homeServer_CollectIcon.png"
|
|
></image>
|
|
收藏
|
|
</div>
|
|
<div class="footerbtn1">联系客服</div>
|
|
<div class="footerbtn2">立即预约</div>
|
|
</div>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
request,
|
|
picUrl,
|
|
NavgateTo,
|
|
menuButtonInfo,
|
|
} from "../../../utils/index";
|
|
import { apiArr } from "../../../api/reservation";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
top: "",
|
|
localHeight: "",
|
|
};
|
|
},
|
|
methods: {
|
|
EvaluateMore() {
|
|
NavgateTo("../masterReview/index");
|
|
},
|
|
Vendor() {
|
|
NavgateTo("../vendor/index");
|
|
},
|
|
back() {
|
|
NavgateTo("1");
|
|
},
|
|
},
|
|
onReady() {},
|
|
|
|
onLoad(options) {
|
|
const meun = menuButtonInfo();
|
|
this.top = meun.top;
|
|
this.localHeight = meun.height;
|
|
},
|
|
onShow() {},
|
|
|
|
/**
|
|
* 页面上拉触底事件的处理函数
|
|
*/
|
|
onReachBottom() {},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
@import url("./index.css");
|
|
|
|
/* 添加渐变色样式 */
|
|
.u-line-progress__line {
|
|
background: linear-gradient(90deg, #ffffff 0%, #ff370b 100%) !important;
|
|
}
|
|
</style> |