yanzong_qianduan/pages/serve/index.vue

<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/index?type=hy"
				})
			},
			getMemberList() {
				const that = this;
				const params = {
					client: 'MP-WEIXIN'
				}
				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>