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.
327 lines
7.5 KiB
327 lines
7.5 KiB
<template>
|
|
<view class="homepersonalCenter">
|
|
<view class="title">
|
|
<view class="swiperBox">
|
|
<swiper class="swiper" indicator-color="rgba(255,255,255,.4)" indicator-active-color="rgba(255,255,255,.85)" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500">
|
|
<swiper-item v-for="(item, index) in userData.thumbs" :key="index" @click="lookImg(userData.thumbs,index)">
|
|
<image :src="item" mode="aspectFill"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
</view>
|
|
<view class="content">
|
|
<view class="nameAndlogo">
|
|
<image :src="userData.thumb" mode=""></image>
|
|
<view style="padding: 10upx 0;">
|
|
<view class="f-32 f-w">
|
|
{{userData.name}}<text class="iconfont icon-female nv" style="color:#FE83AF ;padding-left: 10upx;" v-if="userData.gender != 1"></text>
|
|
<text class="iconfont iconfont icon-male" style="color:#0084FF ;padding-left: 10upx;" v-else></text>
|
|
</view>
|
|
<view class="tags">
|
|
<view class="tags-item" v-for="(item,index) in userData.catearray">
|
|
{{item}}
|
|
</view>
|
|
</view>
|
|
<view class="location f-28" style="padding-top: 20upx;" @click="conloding">
|
|
<text class="iconfont icon-location" style="font-size: 28upx;"></text>
|
|
<text style="padding: 0 20upx;">{{userData.address}}</text>
|
|
<text style="padding-right: 20upx;" v-if="false">210m</text>
|
|
<text class="iconfont icon-right" style="font-size: 28upx;"></text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="yab">
|
|
<v-tabs
|
|
:lineScale="0.25"
|
|
:lineRadius="'100rpx 100rpx 0 0'"
|
|
:lineHeight="'8rpx'"
|
|
:fontSize="'32rpx'"
|
|
:activeFontSize="'32rpx'"
|
|
:bold="true"
|
|
:height="'100rpx'"
|
|
:paddingItem="'0 22rpx 20rpx'"
|
|
:activeColor="'#333333'"
|
|
:lineColor="'#333333'"
|
|
:color="'#999999'"
|
|
v-model="sort"
|
|
:scroll="false"
|
|
@change="vtabschange"
|
|
:tabs="['服务项目','案例图片']"
|
|
></v-tabs>
|
|
</view>
|
|
</view>
|
|
<view class="listmen" v-if="sort == 0">
|
|
<view class="listItem" v-for="(item,index) in serverList" :key="index" >
|
|
<serveItem :serItem="item"></serveItem>
|
|
</view>
|
|
</view>
|
|
<view class="listmen" v-else style="column-count: 3;column-gap: 0;">
|
|
<view class="imgitrm" v-for="(item,index) in userData.casethumbs" :key="index" @click="lookImg(userData.casethumbs,index)">
|
|
<view class="imgbox">
|
|
<image style="width: 100%;height: 100%;" :src="item" mode="widthFix"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="bpttombox dis-flex">
|
|
<view style="flex: 0.2;" @click="navIndex">
|
|
<view class="iconfont icon-home t-c" style="font-size: 44upx;">
|
|
|
|
</view>
|
|
<view class="t-c f-20">
|
|
首页
|
|
</view>
|
|
</view>
|
|
<view class="liaot" style="background-color: #FDAD28;" @click="chat">
|
|
在线聊
|
|
</view>
|
|
<view class="liaot" style="background-color: #72AAFD;" @click="call">
|
|
电话联系
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import App from '@/common/js/app.js';
|
|
//#ifdef H5
|
|
import wxApi from "@/common/js/wxApi.js";
|
|
//#endif
|
|
import vTabs from '@/components/v-tabs/v-tabs.vue';
|
|
import serveItem from '@/components/template/serveItem.vue';
|
|
import Map from '@/common/js/ms-openMap/openMap.js'
|
|
export default{
|
|
data(){
|
|
return{
|
|
sort:0,
|
|
userData:{},
|
|
mid:'',
|
|
id:'',
|
|
page:1,
|
|
total:1,
|
|
serverList:[]
|
|
|
|
}
|
|
},
|
|
onLoad(e) {
|
|
this.mid = e.mid || '';
|
|
this.id = e.id || ''
|
|
this.getuserData();
|
|
},
|
|
methods:{
|
|
lookImg(img,index){
|
|
uni.previewImage({
|
|
current:img[index],
|
|
urls: img
|
|
})
|
|
},
|
|
chat(){
|
|
// debugger
|
|
App.navigationTo({
|
|
url: 'pages/subPages/homepage/chat/chat?other_party_id=' + this.mid + '&other_party_type=' + 1 + '&type=1' + '&id='
|
|
})
|
|
},
|
|
call(){
|
|
uni.makePhoneCall({
|
|
phoneNumber: this.userData.mobile
|
|
})
|
|
},
|
|
navIndex(){
|
|
App.navigationTo({
|
|
url: "pages/mainPages/index/diypage?type=18"
|
|
});
|
|
},
|
|
opendelit(item){
|
|
App.navigationTo({
|
|
url:`pages/subPages2/homemaking/homemakingDetails/homemakingDetails?id=${item.pid}`
|
|
});
|
|
},
|
|
getseverList(){
|
|
App._post_form(
|
|
`&p=housekeep&do=getServicelist`,
|
|
{
|
|
status:0,
|
|
page:this.page,
|
|
mid:this.mid,
|
|
type:2
|
|
},
|
|
res => {
|
|
console.log(res);
|
|
this.total = res.data.total;
|
|
this.serverList = res.data.list;
|
|
// this.userData = res.data;
|
|
// debugger
|
|
},
|
|
false,
|
|
() => {
|
|
|
|
}
|
|
);
|
|
},
|
|
conloding(){
|
|
let storeInfo = {};
|
|
storeInfo = {
|
|
location:{
|
|
lat:this.userData.lat,
|
|
lng:this.userData.lng
|
|
},
|
|
address:this.userData.address
|
|
}
|
|
// #ifdef H5
|
|
|
|
console.log(storeInfo);
|
|
wxApi.WxopenLocation(
|
|
storeInfo['location']['lat'],
|
|
storeInfo['location']['lng'],
|
|
storeInfo['address']
|
|
)
|
|
// #endif
|
|
// #ifdef MP-WEIXIN
|
|
App.openLocation(storeInfo)
|
|
// #endif
|
|
//#ifdef APP-PLUS
|
|
Map.openMap(Number(storeInfo['location']['lat']),Number(storeInfo['location']['lng']),storeInfo['address'],'gcj02')
|
|
//#endif
|
|
},
|
|
getuserData(){
|
|
App._post_form(
|
|
`&p=housekeep&do=personalHomepage`,
|
|
{id:this.id},
|
|
res => {
|
|
console.log(res);
|
|
this.userData = res.data;
|
|
// debugger
|
|
this.getseverList();
|
|
},
|
|
false,
|
|
() => {
|
|
|
|
}
|
|
);
|
|
},
|
|
vtabschange(e){
|
|
|
|
}
|
|
},
|
|
components:{
|
|
vTabs,
|
|
serveItem
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
page{
|
|
background-color: #F8F8F8;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.homepersonalCenter{
|
|
padding-bottom: 150upx;
|
|
.title{
|
|
.swiperBox{
|
|
.swiper{
|
|
width: 750upx;
|
|
height: 430upx;
|
|
image{
|
|
width: 750upx;
|
|
height: 430upx;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
.bpttombox{
|
|
width: 750upx;
|
|
padding: 30upx 0;
|
|
background-color: #FFFFFF;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
.liaot{
|
|
flex: 0.4;
|
|
margin-right: 20upx;
|
|
height: 82upx;
|
|
line-height: 82upx;
|
|
text-align: center;
|
|
border-radius: 10upx;
|
|
color: #FFFFFF;
|
|
font-size: 28upx;
|
|
}
|
|
}
|
|
.listmen{
|
|
padding: 0upx 30upx 20upx;
|
|
position: relative;
|
|
top: -20upx;
|
|
|
|
// padding-bottom: 150upx;
|
|
.listItem{
|
|
|
|
}
|
|
.imgitrm{
|
|
box-sizing: border-box;
|
|
break-inside: avoid;
|
|
padding: 10upx;
|
|
.imgbox{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
// padding: 10px;
|
|
height: auto;
|
|
font-size: 20px;
|
|
color: #686868;
|
|
background-color: #ffffff;
|
|
box-sizing: border-box;
|
|
// border: 1px solid #ccc;
|
|
border-radius: 20upx;
|
|
image{
|
|
border-radius: 20upx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.content{
|
|
width: 690upx;
|
|
padding: 30upx 30upx 0;
|
|
background-color: #FFFFFF;
|
|
border-radius: 30upx 30upx 0 0;
|
|
position: relative;
|
|
top: -40upx;
|
|
.nameAndlogo{
|
|
position: relative;
|
|
padding-top: 50upx;
|
|
image{
|
|
width: 130upx;
|
|
height: 130upx;
|
|
margin-right: 30upx;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
left: 0upx;
|
|
top: -100upx;
|
|
border: 6upx solid #FFFFFF;
|
|
}
|
|
.nv{
|
|
transform: rotate(45deg);
|
|
}
|
|
.tags{
|
|
padding-top: 10upx;
|
|
height: 50upx;
|
|
overflow: hidden;
|
|
.tags-item{
|
|
background-color: #EEEEEE;
|
|
color: #999999;
|
|
height: 30upx;
|
|
line-height: 30upx;
|
|
padding: 0 10upx;
|
|
border-radius: 8upx;
|
|
font-size: 24upx;
|
|
text-align: center;
|
|
display: inline-block;
|
|
margin-right: 10upx;
|
|
margin-bottom: 10upx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|