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.
337 lines
7.1 KiB
337 lines
7.1 KiB
<template>
|
|
<view class="serve">
|
|
<view class="heade">
|
|
<image :src="$picUrl+'/static/serve/serveBack.png?t='+timestamp" mode="" class="headImage"></image>
|
|
<view class="group">
|
|
<image :src="$picUrl+'/static/serve/right.png'" class="tip tipImg"></image>
|
|
<text lines="1" class="groupText">不满意重做</text>
|
|
<image :src="$picUrl+'/static/serve/right1.png'" class="tip"></image>
|
|
<text lines="1" class="groupText">7x24小时服务</text>
|
|
<image :src="$picUrl+'/static/serve/right2.png'" class="tip"></image>
|
|
<text lines="1" class="groupText">全场保障</text>
|
|
<image :src="$picUrl+'/static/serve/right3.png'" class="tip"></image>
|
|
<text lines="1" class="groupText">专业服务</text>
|
|
</view>
|
|
</view>
|
|
<view class="myServe">
|
|
<view class="serveTitle">
|
|
我的服务
|
|
</view>
|
|
<scroll-view scroll-x class="serveList">
|
|
<view class="listItem" v-for="(a,i) in list" :key="i" @click="openPage(i)">
|
|
<view class="itemImage">
|
|
<image :src="a.image_url" class="itemImage"></image>
|
|
</view>
|
|
<text lines="1" class="itemText">{{a.name}}</text>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view class="flowPath">
|
|
<view class="flowTitle">
|
|
<text>服务流程</text>
|
|
<text class="services">专业服务，细心周到</text>
|
|
</view>
|
|
<view class="flowImage">
|
|
<image :src="$picUrl+'/static/serve/flow.png'" mode=""></image>
|
|
</view>
|
|
<view class="flowList">
|
|
<text class="listText">提交订单</text>
|
|
<text class="listText">安排上门</text>
|
|
<text class="listText">服务完成</text>
|
|
<text class="listText">支付订单</text>
|
|
<text class="listText">服务评价</text>
|
|
</view>
|
|
<view class="member" @click="openPage1()" v-if="!userInfo || userInfo.grade_id == 0">
|
|
<view class="memberCenter">
|
|
会员中心
|
|
</view>
|
|
<view class="power">
|
|
开通立享多重特权
|
|
</view>
|
|
<view class="opera">
|
|
<text class="price" v-if="userInfo.user_id && packageList.price">￥<text class="number">{{packageList.price}}</text>/{{packageList.month}}月</text>
|
|
<text class="price" v-else>￥<text class="number">99</text>年</text>
|
|
<view class="operaBtn">
|
|
立即开通
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import * as newFunApi from '@/api/newFun'
|
|
import * as member from '@/api/member/index.js';
|
|
export default{
|
|
data (){
|
|
return{
|
|
list: [],
|
|
userInfo: {},
|
|
packageList: {},
|
|
timestamp: new Date().getTime(),
|
|
}
|
|
},
|
|
mounted() {
|
|
this.getList();
|
|
|
|
},
|
|
onShow() {
|
|
this.userInfo = uni.getStorageSync("userInfo")?uni.getStorageSync("userInfo"): ""
|
|
if(uni.getStorageSync("userInfo").user_id){
|
|
this.getMemberList();
|
|
}
|
|
},
|
|
methods:{
|
|
openPage1(){
|
|
if(!uni.getStorageSync("userInfo").user_id){
|
|
uni.navigateTo({
|
|
url: "/pages/login/index"
|
|
})
|
|
return ;
|
|
}
|
|
uni.navigateTo({
|
|
url: '/pages/member/index1?type=hy'
|
|
})
|
|
},
|
|
getMemberList() {
|
|
const that = this;
|
|
const params = {
|
|
// #ifdef H5
|
|
client: 'H5'
|
|
// #endif
|
|
// #ifndef H5
|
|
client: 'MP-WEIXIN'
|
|
// #endif
|
|
}
|
|
member.info(params)
|
|
.then(res => {
|
|
if (res.status == 200) {
|
|
that.packageList = res.data.list.list&& res.data.list.list.length >0?res.data.list.list[0]:[];
|
|
console.log(that.packageList)
|
|
}
|
|
})
|
|
},
|
|
openPage(a){
|
|
uni.navigateTo({
|
|
url: "/pages/activity/intimate?index="+a
|
|
})
|
|
},
|
|
/**
|
|
* 获取列表
|
|
*/
|
|
async getList() {
|
|
let {status, message, data} = await newFunApi.serverCategoryList({});
|
|
if(status == 200){
|
|
this.list = data.list
|
|
}
|
|
},
|
|
goMember(){
|
|
uni.navigateTo({
|
|
url:'/pages/member/index'
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.serve {
|
|
width: 100%;
|
|
padding-bottom: 30rpx;
|
|
overflow: hidden;
|
|
|
|
.heade {
|
|
width: 100%;
|
|
height: 396rpx;
|
|
background-color: #fff;
|
|
padding-top: 28rpx;
|
|
box-sizing: border-box;
|
|
.headImage {
|
|
width: 690rpx;
|
|
height: 264rpx;
|
|
display: block;
|
|
margin: 0 auto 0;
|
|
}
|
|
|
|
.group {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 28rpx;
|
|
.tip {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin-left: 10rpx;
|
|
margin-right: 10rpx;
|
|
&:first-child{
|
|
margin-left: 20rpx;
|
|
}
|
|
}
|
|
.groupText {
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: #444444;
|
|
line-height: 34rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.myServe {
|
|
width: 704rpx;
|
|
height: 246rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
padding: 26rpx;
|
|
margin-top: 20rpx;
|
|
.serveTitle {
|
|
height: 40rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
color: #000000;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
.serveList {
|
|
margin-top: 36rpx;
|
|
white-space: nowrap;
|
|
.listItem {
|
|
width: 100rpx;
|
|
display: inline-block;
|
|
text-align: center;
|
|
align-items: center;
|
|
margin-left: 20rpx;
|
|
text-align: center;
|
|
&:first-child{
|
|
margin-left: 0;
|
|
}
|
|
.itemImage {
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
margin: 0 auto 16rpx;
|
|
}
|
|
|
|
.itemText {
|
|
width: 100rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: #565656;
|
|
line-height: 34rpx;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.flowPath {
|
|
width: 704rpx;
|
|
max-height: 534rpx;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
background: #FFFFFF;
|
|
border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
opacity: 1;
|
|
margin-top: 14rpx;
|
|
padding: 24rpx;
|
|
box-sizing: border-box;
|
|
|
|
.flowTitle {
|
|
height: 40rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 500;
|
|
color: #000000;
|
|
line-height: 40rpx;
|
|
.services {
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: #565656;
|
|
}
|
|
}
|
|
|
|
.flowImage {
|
|
width: 592rpx;
|
|
height: 74rpx;
|
|
display: block;
|
|
margin: 0 auto;
|
|
margin-top: 42rpx;
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.flowList {
|
|
width: 678rpx;
|
|
height: 34rpx;
|
|
line-height: 34rpx;
|
|
left: 0;
|
|
right: 0;
|
|
margin: auto;
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-top: 18rpx;
|
|
|
|
.listText {
|
|
width: 96rpx;
|
|
font-size: 24rpx;
|
|
margin-right: 32rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.member {
|
|
width: 644rpx;
|
|
height: 214rpx;
|
|
background-image: url('https://www.royaum.com.cn/static/serve/member.png');
|
|
background-size: 100% 100%;
|
|
padding: 28rpx;
|
|
margin-top: 50rpx;
|
|
.memberCenter {
|
|
height: 40rpx;
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #966542;
|
|
line-height: 50rpx;
|
|
}
|
|
|
|
.power {
|
|
margin-top: 4rpx;
|
|
font-size: 20rpx;
|
|
font-weight: 400;
|
|
color: #966542;
|
|
line-height: 40rpx;
|
|
}
|
|
|
|
.opera {
|
|
margin-top: 14rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 400;
|
|
color: #9F744D;
|
|
display: flex;
|
|
align-items: center;
|
|
.number {
|
|
font-size: 52rpx;
|
|
font-weight: 600;
|
|
color: #9C714A;
|
|
line-height: 61rpx;
|
|
}
|
|
.operaBtn {
|
|
margin-left: 14rpx;
|
|
width: 138rpx;
|
|
height: 60rpx;
|
|
background: #9F744D;
|
|
border-radius: 82rpx;
|
|
text-align: center;
|
|
line-height: 60rpx;
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |