You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
732 lines
17 KiB
732 lines
17 KiB
<template>
|
|
<view class="pages-home" v-if="isLoad">
|
|
<view class="map-info">
|
|
<view class="position" @tap.stop="toChooseLocation" >
|
|
<i class="iconfont iconjuli mr-sm"></i>
|
|
<view class="map-text max-400 ellipsis">
|
|
{{location&&location.province ?location.province : isLoad ? '定位失败' : '定位中...'}}
|
|
</view>
|
|
</view>
|
|
<view class="input" @click="goSearch">
|
|
<u--input
|
|
placeholder="查找技师或服务"
|
|
prefixIcon="search"
|
|
shape="circle"
|
|
:disabled="true"
|
|
|
|
prefixIconStyle="font-size: 34rpx;color: #A9B4BD"
|
|
></u--input>
|
|
</view>
|
|
|
|
</view>
|
|
<!-- :style="{height:banner.length > 0?`464rpx`:`84rpx`}" -->
|
|
<view :class="[{'rel':banner.length >0}]">
|
|
<banner :list="banner" :height="580" :margin="0" :autoplay="false" :indicatorActiveColor="primaryColor" :dotWidth="20"
|
|
:dotBottom="30" v-if="banner.length > 0">
|
|
</banner>
|
|
<view class="tab">
|
|
<view class="tabItem" v-for="(item,index) in gridList" :key="index" @click="getItemHandle(item)">
|
|
<image :src="item.img" mode=""></image>
|
|
<view class="text">{{item.name}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="gridContainer">
|
|
<view class="sectionTitle">
|
|
<image src="../static/titleicon.png" mode=""></image>
|
|
<text>推荐技师</text>
|
|
</view>
|
|
<u-scroll-list :indicator="false">
|
|
<view class="recommendItem" v-for="(item, index) in picList" :key="index">
|
|
<image :src="item.work_img"></image>
|
|
<view class="flag new" v-if="item.coach_type_status==3">新人</view>
|
|
<view class="flag people" v-if="item.coach_type_status==2">推荐</view>
|
|
<view class="flag people" v-if="item.coach_type_status==1">销冠</view>
|
|
</view>
|
|
|
|
</u-scroll-list>
|
|
</view>
|
|
<!-- <view class="search-box flex-center fill-base ml-md mr-md radius"
|
|
:class="[{'mt-md':banner.length ==0}]">
|
|
<view style="width: 92%;">
|
|
<tab @change="handerTabChange" :isLine="false" :list="tabList" :activeIndex="activeIndex*1"
|
|
:activeColor="primaryColor" :width="100/tabList.length + '%'" height="84rpx"></tab>
|
|
</view>
|
|
<view style="width: 8%;"></view>
|
|
</view> -->
|
|
</view>
|
|
<view class="sectionTitle" style="padding:0 24rpx;">
|
|
<image src="../static/xiangmu.png" mode=""></image>
|
|
<text>服务项目</text>
|
|
</view>
|
|
<view @tap.stop="goDetail(index)" class="list-item flex-center mt-md ml-md mr-md pd-lg fill-base radius-16"
|
|
v-for="(item, index) in list.data" :key="index">
|
|
<image mode="aspectFill" class="cover radius-16" :src="item.cover"></image>
|
|
<view class="flex-1 ml-md" style="max-width: 450rpx;">
|
|
<view class="flex-between">
|
|
<view class="f-title itemTitle max-270 ellipsis">{{ item.title }}</view>
|
|
</view>
|
|
<view class="subTitle ellipsis">{{ item.sub_title || '' }}
|
|
</view>
|
|
<view class="timeInfo">
|
|
<view class="time-long">
|
|
<image src="../static/time.png" mode=""></image>
|
|
<text>{{ item.time_long }}分钟</text>
|
|
</view>
|
|
<view class="lookNum">超{{ item.total_sale }}人选择</view>
|
|
<!-- <view class="flex-y-baseline f-icontext c-warning ml-sm mr-sm">¥<view class="f-sm-title">
|
|
{{ item.price }}
|
|
</view>
|
|
</view>
|
|
<view class="text-delete" v-if="item.init_price">¥{{ item.init_price }}</view> -->
|
|
</view>
|
|
<view class="priceContent">
|
|
<text>￥{{ item.price }}</text>
|
|
<view class="item-btn flex-center f-caption c-base" :style="{ background: primaryColor }">
|
|
选择技师
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<load-more :noMore="list.current_page >= list.last_page && list.data.length > 0" :loading="loading"
|
|
v-if="loading">
|
|
</load-more>
|
|
<abnor v-if="!loading && list.data.length <= 0 && list.current_page == 1"></abnor>
|
|
|
|
<view class="space-footer"></view>
|
|
|
|
|
|
<uni-popup ref="coupon_item" type="center" :maskClick="false">
|
|
<view class="coupon-popup f_r_c_c">
|
|
<image class="bg-img" src="https://lbqnyv2.migugu.com/bianzu3.png" mode=""></image>
|
|
<i @tap.stop="$refs.coupon_item.close()" class="iconfont icon-close c-base"></i>
|
|
</image>
|
|
<view class="coupon-info f_c_m_c">
|
|
<view class="tops f_c_m_c">
|
|
<view class="">
|
|
成功领取
|
|
</view>
|
|
<view class="">
|
|
卡券将放入“我的-我的卡券”
|
|
</view>
|
|
</view>
|
|
<view class="lists f_r_c_c">
|
|
<scroll-view scroll-y style="width: 420rpx;height:100%;">
|
|
<view class="list f_r_sb_c" v-for="(item, index) in couponList" :key="index">
|
|
<image src="/static/coupon/coupon.png" mode="aspectFill"></image>
|
|
<view class="f_r_sb_c">
|
|
<view class="f_c_m_c">
|
|
<view class="price">
|
|
{{item.discount}}
|
|
</view>
|
|
<view class="price_text">
|
|
{{item.full*1>0?`满${item.full}可用`:`立减`}}
|
|
</view>
|
|
</view>
|
|
<view class="title f_r_m_c">
|
|
<view class="ellipsis-3">
|
|
{{item.title}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
<view class="btns f_r_c_c" @tap.stop="userGetCoupon">
|
|
<view class="f_r_c_c">
|
|
领取到卡包
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
<view :style="{height: `${configInfo.tabbarHeight}px`}"></view>
|
|
<tabbar :cur="0"></tabbar>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapState,
|
|
mapActions,
|
|
mapMutations
|
|
} from "vuex"
|
|
import tabbar from "@/components/tabbar.vue"
|
|
export default {
|
|
components: {
|
|
tabbar
|
|
},
|
|
data() {
|
|
return {
|
|
couponList: [], //优惠券
|
|
isLoad: false,
|
|
isLoadBanner: false,
|
|
options: {},
|
|
loading: true,
|
|
lockTap: false,
|
|
gridList:[
|
|
{img:'../static/t1.png',name:'领券中心'},
|
|
{img:'../static/t2.png',name:'邀请有礼'},
|
|
{img:'../static/t3.png',name:'联系客服'},
|
|
{img:'../static/t4.png',name:'技师招募'},
|
|
],
|
|
picList:[
|
|
// {img:'../static/i.png',new:1,people:0},
|
|
// {img:'../static/i.png',new:1,people:0},
|
|
// {img:'../static/i.png',new:1,people:0},
|
|
// {img:'../static/i.png',new:1,people:0},
|
|
// {img:'../static/i.png',new:0,people:1},
|
|
// {img:'../static/i.png',new:0,people:0},
|
|
// {img:'../static/i.png',new:0,people:0},
|
|
]
|
|
}
|
|
},
|
|
computed: mapState({
|
|
location: state => state.user.location,
|
|
pageActive: state => state.service.pageActive,
|
|
activeIndex: state => state.service.activeIndex,
|
|
tabList: state => state.service.tabList,
|
|
param: state => state.service.param,
|
|
list: state => state.service.list,
|
|
banner: state => state.service.banner,
|
|
primaryColor: state => state.config.configInfo.primaryColor,
|
|
subColor: state => state.config.configInfo.subColor,
|
|
configInfo: state => state.config.configInfo,
|
|
autograph: state => state.user.autograph,
|
|
userInfo: state => state.user.userInfo,
|
|
}),
|
|
async onLoad(options) {
|
|
this.getRecommend()
|
|
this.$util.showLoading()
|
|
options = await this.updateCommonOptions(options)
|
|
this.options = options
|
|
if (this.pageActive) {
|
|
this.$util.setNavigationBarColor({
|
|
bg: this.primaryColor
|
|
})
|
|
this.isLoad = true
|
|
this.loading = false
|
|
this.$util.hideAll()
|
|
return
|
|
}
|
|
await this.initIndex()
|
|
this.updateServiceItem({
|
|
key: 'pageActive',
|
|
val: true
|
|
})
|
|
},
|
|
onPullDownRefresh() {
|
|
// #ifndef APP-PLUS
|
|
uni.showNavigationBarLoading()
|
|
// #endif
|
|
this.initRefresh();
|
|
uni.stopPullDownRefresh()
|
|
},
|
|
onReachBottom() {
|
|
if (this.list.current_page >= this.list.last_page || this.loading) return;
|
|
this.loading = true;
|
|
this.getList(this.param.page + 1);
|
|
},
|
|
onShareAppMessage(e) {
|
|
let {
|
|
id: pid
|
|
} = this.userInfo
|
|
let path = `/pages/service?pid=${pid}`
|
|
this.$util.log(path)
|
|
return {
|
|
title: '',
|
|
imageUrl: '',
|
|
path,
|
|
}
|
|
},
|
|
methods: {
|
|
...mapActions(['getConfigInfo', 'getUserInfo', 'updateCommonOptions', 'getServiceIndex', 'getServiceList']),
|
|
...mapMutations(['updateServiceItem']),
|
|
async initIndex(refresh = false) {
|
|
// #ifdef H5
|
|
// if (!refresh && this.$jweixin.isWechat()) {
|
|
// await this.$jweixin.initJssdk();
|
|
// this.toAppShare()
|
|
// }
|
|
// #endif
|
|
if (!this.configInfo.id || refresh) {
|
|
await this.getConfigInfo()
|
|
}
|
|
await this.getServiceIndex()
|
|
this.isLoad = true
|
|
this.isLoadBanner = true
|
|
await Promise.all([this.getList(1), this.getCouponList()])
|
|
this.$util.setNavigationBarColor({
|
|
bg: this.primaryColor
|
|
})
|
|
},
|
|
async getRecommend(){
|
|
let res = await this.$api.service.serviceCoachList({
|
|
sort_field:'distance',
|
|
sort_order:'asc',
|
|
limit:5
|
|
})
|
|
console.log(res,"ooo")
|
|
this.picList = res.data
|
|
|
|
},
|
|
getItemHandle(item){
|
|
console.log(item,)
|
|
if(item.name=="领券中心"){
|
|
this.$util.goUrl({
|
|
url: '/user/pages/coupon/list'
|
|
})
|
|
}
|
|
},
|
|
initRefresh() {
|
|
this.isLoadBanner = false
|
|
this.initIndex(true)
|
|
},
|
|
toAppShare() {
|
|
let {
|
|
id: pid
|
|
} = this.userInfo
|
|
let title = '首页'
|
|
let page_url = window.location.href
|
|
if (page_url.includes('?pid=')) {
|
|
page_url = page_url.split('?pid=')[0]
|
|
}
|
|
let href = `${page_url}?pid=${pid}`
|
|
let imageUrl = ''
|
|
this.$jweixin.wxReady(() => {
|
|
this.$jweixin.showOptionMenu()
|
|
this.$jweixin.shareAppMessage(title, '', href, imageUrl)
|
|
this.$jweixin.shareTimelineMessage(title, href, imageUrl)
|
|
})
|
|
},
|
|
async userGetCoupon() {
|
|
console.log("=====userGetCoupon")
|
|
let ids = []
|
|
this.couponList.forEach(v => {
|
|
ids.push(v.id)
|
|
})
|
|
let res = await this.$api.service.userGetCoupon({
|
|
coupon_id: ids
|
|
})
|
|
this.$util.showToast({
|
|
title: `领取成功`
|
|
})
|
|
setTimeout(() => {
|
|
this.$util.goUrl({
|
|
url: '/user/pages/coupon/list'
|
|
})
|
|
}, 1000)
|
|
this.$refs.coupon_item.close()
|
|
this.loading = false
|
|
this.$util.hideAll()
|
|
},
|
|
async getCouponList() {
|
|
let list = await this.$api.service.couponList()
|
|
this.couponList = list
|
|
if (list.length > 0 && this.isLoad) {
|
|
this.$refs.coupon_item.open()
|
|
}
|
|
this.loading = false
|
|
this.$util.hideAll()
|
|
},
|
|
async getList(page = 0) {
|
|
if (page) {
|
|
let param = this.$util.deepCopy(this.param)
|
|
param.page = page
|
|
this.updateServiceItem({
|
|
key: 'param',
|
|
val: param
|
|
})
|
|
}
|
|
let {
|
|
list: oldList,
|
|
param,
|
|
tabList,
|
|
activeIndex
|
|
} = this
|
|
let {
|
|
sort,
|
|
sign
|
|
} = tabList[activeIndex]
|
|
let desc = activeIndex == 0 || sign == 1 ? '' : 'desc'
|
|
param.sort = `${sort} ${desc}`
|
|
await this.getServiceList(param)
|
|
this.loading = false
|
|
this.$util.hideAll()
|
|
},
|
|
handerTabChange(index) {
|
|
this.updateServiceItem({
|
|
key: 'activeIndex',
|
|
val: index
|
|
})
|
|
let tabList = this.$util.deepCopy(this.tabList)
|
|
let {
|
|
is_sign,
|
|
sign,
|
|
} = tabList[index];
|
|
if (is_sign) {
|
|
tabList[index].sign = sign == 0 ? 1 : 0;
|
|
}
|
|
this.updateServiceItem({
|
|
key: 'tabList',
|
|
val: tabList
|
|
})
|
|
this.$util.showLoading()
|
|
uni.pageScrollTo({
|
|
scrollTop: 0
|
|
})
|
|
this.getList(1)
|
|
},
|
|
// 详情
|
|
goDetail(index) {
|
|
let {
|
|
id
|
|
} = this.list.data[index]
|
|
let url = `/user/pages/detail?id=${id}`
|
|
this.$util.goUrl({
|
|
url
|
|
})
|
|
},
|
|
async toChooseLocation(e) {
|
|
await this.$util.checkAuth({
|
|
type: 'userLocation'
|
|
})
|
|
let [, {
|
|
address = '',
|
|
longitude: lng,
|
|
latitude: lat,
|
|
province = '',
|
|
city = '',
|
|
district = '',
|
|
}] = await uni.chooseLocation();
|
|
if (!lng) return
|
|
let location = {
|
|
lng,
|
|
lat,
|
|
address,
|
|
province,
|
|
city,
|
|
district
|
|
}
|
|
this.updateUserItem({
|
|
key: 'location',
|
|
val: location
|
|
})
|
|
this.param.page = 1
|
|
this.getList()
|
|
},
|
|
goSearch(){
|
|
|
|
this.$util.goUrl({
|
|
url: `/pages/technician`
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
.pages-home {
|
|
background-color: #ffffff;
|
|
min-height:calc(100vh);
|
|
position:relative;
|
|
.map-info{
|
|
// background-color: red;
|
|
position:absolute;
|
|
z-index:99;
|
|
width:100%;
|
|
top:20rpx;
|
|
padding:21rpx;
|
|
display:flex;
|
|
.position{
|
|
color:#ffffff;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.input{
|
|
flex:1;
|
|
margin-left:30rpx;
|
|
/deep/.u-input--circle{
|
|
background-color: #EEFDF8;
|
|
}
|
|
}
|
|
}
|
|
.search-box {
|
|
width: 710rpx;
|
|
bottom: 0;
|
|
z-index: 9;
|
|
overflow: hidden;
|
|
}
|
|
.tab{
|
|
background-color: #ffffff;
|
|
border-radius: 30rpx 30rpx 0rpx 0rpx;
|
|
margin-top: -58rpx;
|
|
position: relative;
|
|
z-index: 999;
|
|
display:flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding:45rpx;
|
|
.tabItem{
|
|
text-align: center;
|
|
image{
|
|
width:100rpx;
|
|
height:100rpx;
|
|
}
|
|
.text{
|
|
margin-top:25rpx;
|
|
font-size: 26rpx;
|
|
font-family: Alibaba PuHuiTi;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
.sectionTitle{
|
|
display:flex;
|
|
align-items: center;
|
|
margin-bottom:21rpx;
|
|
image{
|
|
width:34rpx;
|
|
height:39rpx;
|
|
}
|
|
text{
|
|
font-size: 34rpx;
|
|
font-family: Alibaba PuHuiTi;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
margin-left:15rpx;
|
|
}
|
|
}
|
|
.gridContainer{
|
|
margin-top:13rpx;
|
|
padding:0 24rpx;
|
|
.recommendItem{
|
|
// width:240rpx;
|
|
// height:300rpx;
|
|
background: #aaaaaa;
|
|
border-radius: 27rpx;
|
|
// overflow: hidden;
|
|
margin-right:24rpx;
|
|
position: relative;
|
|
image{
|
|
width:240rpx;
|
|
height:300rpx;
|
|
border-radius: 27rpx;
|
|
}
|
|
.flag{
|
|
width: 100rpx;
|
|
height: 50rpx;line-height: 50rpx;text-align: center;
|
|
background: #08BF77;
|
|
position: absolute;
|
|
border-radius: 27rpx 0px 27rpx 0px;
|
|
top:0;
|
|
left:0;
|
|
font-size: 24rpx;
|
|
color:#ffffff;
|
|
}
|
|
.new{
|
|
background: #08BF77;
|
|
}
|
|
.people{
|
|
background: #F4563C;
|
|
}
|
|
}
|
|
}
|
|
.list-item {
|
|
background: #F4F7F6;
|
|
.cover {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
}
|
|
.itemTitle{
|
|
color:#333333;
|
|
font-size: 34rpx;
|
|
}
|
|
.subTitle{
|
|
color: #C0C5CA;
|
|
font-size: 24rpx;
|
|
margin-top:6rpx;
|
|
}
|
|
.timeInfo{
|
|
margin:15rpx 0;
|
|
display:flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
}
|
|
.time-long {
|
|
display: flex;
|
|
align-items: center;
|
|
image{
|
|
width:30rpx;
|
|
height:30rpx;
|
|
}
|
|
text{
|
|
color: #71787E;
|
|
font-size: 24rpx;
|
|
margin-left:14rpx;
|
|
}
|
|
|
|
// min-width: 72rpx;
|
|
// height: 30rpx;
|
|
// padding: 0 5rpx;
|
|
// background: linear-gradient(270deg, #4C545A 0%, #282B34 100%);
|
|
// border-radius: 4rpx;
|
|
// font-size: 20rpx;
|
|
// color: #FFEEB9;
|
|
// margin-right: 16rpx;
|
|
}
|
|
.lookNum{
|
|
color: #71787E;
|
|
font-size: 24rpx;
|
|
}
|
|
.priceContent{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
text{
|
|
color: #F4563C;
|
|
font-size:30rpx;
|
|
}
|
|
.item-btn {
|
|
|
|
// width: 160rpx;
|
|
// line-height: 54rpx;
|
|
text-align: center;
|
|
// height: 54rpx;
|
|
padding:15rpx 33rpx;
|
|
background: #08BF77;
|
|
border: 1px solid #EAEAEA;
|
|
border-radius: 27px;
|
|
}
|
|
}
|
|
|
|
.f-icontext {
|
|
font-size: 18rpx;
|
|
}
|
|
|
|
.text-delete {
|
|
font-size: 20rpx;
|
|
color: #B9B9B9;
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
|
|
.coupon-popup {
|
|
width: 658rpx;
|
|
height: 865rpx;
|
|
position: relative;
|
|
|
|
.bg-img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.icon-close {
|
|
font-size: 60rpx;
|
|
position: absolute;
|
|
top: 50rpx;
|
|
right: 60rpx;
|
|
z-index: 999;
|
|
}
|
|
|
|
.coupon-info {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
bottom: 0;
|
|
left: 0;
|
|
|
|
.tops {
|
|
width: 480rpx;
|
|
color: #FB4523;
|
|
position: absolute;
|
|
top: 260rpx;
|
|
|
|
>view:nth-child(1) {
|
|
font-weight: bold;
|
|
font-size: 30rpx;
|
|
}
|
|
}
|
|
|
|
.lists {
|
|
width: 500rpx;
|
|
height: 300rpx;
|
|
padding: 10rpx;
|
|
overflow-x: hidden;
|
|
position: absolute;
|
|
bottom: 222rpx;
|
|
|
|
.list {
|
|
width: 420rpx;
|
|
height: 130rpx;
|
|
margin-bottom: 10rpx;
|
|
margin-top: 5rpx;
|
|
position: relative;
|
|
|
|
>image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
>view {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 8rpx;
|
|
|
|
>view:nth-child(1) {
|
|
width: 38%;
|
|
}
|
|
|
|
>view:nth-child(2) {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex: 1;
|
|
padding: 0 15rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.price {
|
|
font-size: 30rpx;
|
|
color: #FB4523;
|
|
}
|
|
|
|
.title {
|
|
font-size: 30rpx;
|
|
line-height: 36rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.price_text {
|
|
color: #ccc;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
view.btns {
|
|
width: 100%;
|
|
position: absolute;
|
|
height: 82rpx;
|
|
bottom: 18rpx;
|
|
left: 0;
|
|
|
|
>view {
|
|
width: 422rpx;
|
|
height: 82rpx;
|
|
|
|
border-radius: 40rpx;
|
|
font-size: 34rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|