uniapp-ZHSQ/packages/homeServer/masterInfo/index.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')
        },
    },
    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>