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="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/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="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/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="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_Champion.png"
              ></image>
              <image
                class="Medal"
                v-if="false"
                src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_RunnerUp.png"
              >
              </image>
              <image
                class="star"
                src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/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="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_masterIcon1.png"
            ></image>
            <div class="master_msg_itemText">52岁</div>
            <div>广东梅州人</div>
          </div>
          <div class="master_msg_item">
            <image
              src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_masterIcon2.png"
            ></image>
            <div class="master_msg_itemText">5-10年</div>
            <div>服务经验</div>
          </div>
          <div class="master_msg_item">
            <image
              src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_masterIcon3.png"
            ></image>
            <div class="master_msg_itemText">500+</div>
            <div>成功预约</div>
          </div>
          <div class="master_msg_item">
            <image
              src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/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="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/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="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/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="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_Champion.png"
                ></image>
                <image
                  class="Medal"
                  v-if="false"
                  src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_RunnerUp.png"
                >
                </image>
                <image
                  class="star"
                  src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/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="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/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="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_Champion.png"
              ></image>
              <image
                class="Medal"
                v-if="false"
                src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_RunnerUp.png"
              >
              </image>
              <image
                class="star"
                src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/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="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_masterIcon1.png"
            ></image>
            <div class="master_msg_itemText">52岁</div>
            <div>广东梅州人</div>
          </div>
          <div class="master_msg_item">
            <image
              src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_masterIcon2.png"
            ></image>
            <div class="master_msg_itemText">5-10年</div>
            <div>服务经验</div>
          </div>
          <div class="master_msg_item">
            <image
              src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_masterIcon3.png"
            ></image>
            <div class="master_msg_itemText">500+</div>
            <div>成功预约</div>
          </div>
          <div class="master_msg_item">
            <image
              src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/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="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/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="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/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="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_MsgImg1.png"
            ></image>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部 -->
    <div class="footer">
      <div class="footerIcon" @click="Vendor">
        <image
          id="footerIcon1"
          src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/footer_shop.png"
        ></image>
        店铺
      </div>
      <div class="footerIcon">
        <image
          id="footerIcon2"
          src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_CollectIcon.png"
        ></image>
        收藏
      </div>
      <div class="footerIcon">
        <image
          @click="openSave"
          id="footerIcon2"
          src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/shop_share.png"
        ></image>
        分享
      </div>
      <div class="footerbtn1">联系客服咨询</div>
      <!-- <div class="footerbtn2">立即预约</div> -->
    </div>

    <!-- 分享 -->
    <view class="shadow" @click="changeShadow2" v-if="boxshadow2">
      <view class="shadowBox2">
        <view class="shadowBox_img">
          <view class="boxshadow_tit">分享服务给朋友</view>
          <view class="boxshadow_text">将服务人员信息分享给微信,</view>
          <view class="boxshadow_text">好友对方可以直接查看详情</view>
          <view class="boxshadow_text2">张师傅</view>
          <view class="boxshadow_img">
            <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/erweima.png"> </image>
          </view>
          <view class="boxshadow_text2">扫描二维码查看服务详情</view>
          <view class="boxshadow_btnList">
            <view class="shadowBox_btn1">分享到微信</view>
            <view class="shadowBox_btn2">保存二维码</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  request,
  picUrl,
  NavgateTo,
  menuButtonInfo,
} from "../../../utils/index";
import { apiArr } from "../../../api/reservation";

export default {
  data() {
    return {
      top: "",
      localHeight: "",
      boxshadow2: false,
    };
  },
  methods: {
    EvaluateMore() {
      NavgateTo("../masterReview/index");
    },
    Vendor() {
      NavgateTo("../vendor/index");
    },
    back() {
      NavgateTo("1");
    },

    openSave() {
      this.boxshadow2 = true;
    },
    changeShadow2() {
      this.boxshadow2 = false;
    },
  },
  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>