uniapp-ZHSQ/packages/homeServer/vendor/index.vue

<template>
    <view class="container">
        <div class="searchIpt" @click="search">
            <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_communitySearchIcon.png"></image>
            <u--input placeholder="请输入内容" border="none" disabled v-model="value" @change="change"></u--input>
        </div>
        <div class="line"></div>

        <div class="vendor">
            <div class="vendorInfo">
                <div class="vendorInfo_left">
                    <div class="vendorInfo_img">
                        <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_MsgImg1.png"></image>
                    </div>
                    <div class="vendorInfo_info">
                        <div class="vendor_name">专业到家服务</div>
                        <div class="vendor_fs">120个粉丝</div>
                    </div>
                </div>
                <div class="vendorInfo_right">
                    <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start1.png"></image>
                    <image v-if="false" src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/local_start2.png"></image>
                    <div>收藏</div>
                    <div v-if="false">取消收藏</div>
                </div>
            </div>
            <div class="vendorMsg">
                <div class="vendorMsg_Item">
                    <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_masterIcon1.png"></image>
                    <div class="vendorMsg_Item_msg">
                        <div class="num">150+</div>
                        <div>服务师傅</div>
                    </div>
                </div>

                <div class="vendorMsg_Item">
                    <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_CumulativeIcon.png"></image>
                    <div class="vendorMsg_Item_msg">
                        <div class="num">5000+</div>
                        <div>累计订单</div>
                    </div>
                </div>

                <div class="vendorMsg_Item">
                    <image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/homeServer_masterIcon2.png"></image>
                    <div class="vendorMsg_Item_msg">
                        <div class="num">10+</div>
                        <div>行业经验</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="line"></div>
        <div class="tabList">
            <div class="tabItem active">推荐</div>
            <div class="tabItem">分类</div>
        </div>

        <div class="cateList">
            <div class="cateItem active2" v-for="item,index in 5" :key="index">家电清洗</div>
        </div>

        <div class="master_info" 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>
    </view>
</template>

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

export default {
    data() {
        return {
            top: "",
            localHeight: "",
            value: ""
        }
    },
    methods: {
        search(){
            // 搜索后再跳页面
            // NavgateTo("../vendorSearch/index")
        },
    },
    onReady() {

    },

    onLoad(options) {
        const meun = menuButtonInfo();
        this.top = meun.top;
        this.localHeight = meun.height;
    },
    onShow() {

    },

    /**
    * 页面上拉触底事件的处理函数
    */
    onReachBottom() {

    },

}
</script>

<style>
@import url("./index.css");
</style>