ihotel-h5/pages/myself/myself.vue

<template>
	<view class="content">
		<view class="person">
			<image class="person_touxiang" src="../../static/my/touxiang.svg"></image>
			<view class="person_name">李老师</view>
			<view class="person_phone">13279845567</view>
		</view>
		<!-- 第二部分，我的订单 -->
		<view class="my_order">
			<view class="order_title">我的订单</view>
			<view class="order_all" @click="navigateToAll">全部＞</view>
			<view class="item-list">
			  <view class="item-list-one" @click="navigateToDaizhifu">
			    <image src="../../static/my/no_zhifu.svg" class="img-btn"></image>
			    <text class="list-txt">待支付</text>
			  </view>
			  <view class="item-list-one" @click="navigateToDairuzhu">
			    <image src="../../static/my/dairuzhu.svg" class="img-btn"></image>
			    <text class="list-txt">待入住</text>
			  </view>
			  <view class="item-list-one" @click="navigateToYiruzhu">
			    <image src="../../static/my/yiruzhu.svg" class="img-btn"></image>
			    <text class="list-txt">已入住</text>
			  </view>
			  <view class="item-list-one" @click="navigateToYiquxiao">
			    <image src="../../static/my/yiquxiao.svg" class="img-btn"></image>
			    <text class="list-txt">已取消</text>
			  </view>
			</view>
			<view class="item-list">
			  <view class="item-list-one" @click="navigateToDaijiezhang">
			    <image src="../../static/my/no_pay.svg" class="img-btn"></image>
			    <text class="list-txt">待结账</text>
			  </view>
			  <view class="item-list-one" @click="navigateToYiwancheng">
			    <image src="../../static/my/wancheng.svg" class="img-btn"></image>
			    <text class="list-txt">已完成</text>
			  </view>
			</view>
		</view>
		<!-- 第三部分，我的服务 -->
		<view class="my_help">
			<view class="help_title">我的服务</view>
			<view class="item-list">
			  <view class="item-list-one" @click="telphone(phone)">
			    <image src="../../static/my/person_phone.svg" class="img-btn"></image>
			    <text class="list-txt">人工热线</text>
			  </view>
			  <view class="item-list-one" @click="navigateToCard">
			    <image src="../../static/my/baoxiu.svg" class="img-btn"></image>
			    <text class="list-txt">房间报修</text>
			  </view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sheshiList:[
					{id:1,list:'免费洗刷用品'},
					{id:2,list:'24小时热水'},
					{id:3,list:'客房wifi覆盖'},
					{id:4,list:'电视'},
					{id:5,list:'电吹风'},
					{id:6,list:'分体式空调'},
				],
				sheshiList2:[
					{id:1,list:'吹风机'},
					{id:2,list:'宽带上网接口'},
					{id:3,list:'独立卫生间'},
					{id:4,list:'拖鞋'},
					{id:5,list:'电水壶'},
					{id:6,list:'免费瓶装水'},
				],
				phone:'15079248859',//电话
			}
		},
		onLoad() {
			
		},
		methods: {
			//跳转到全部订单
			navigateToAll(){
				uni.navigateTo({
					url:"../my_orderlist/my_orderlist?Inv=0"
				})
			},
			//跳转到待支付订单
			navigateToDaizhifu(){
				uni.navigateTo({ 
					url: "../my_orderlist/my_orderlist?Inv=1",
					success: res => {console.log("调用成功")},
					fail: () => {console.log("调用失败")},
					complete: () => {console.log("调用完成")}
				})
			},
			//跳转到待入住订单
			navigateToDairuzhu(){
				uni.navigateTo({ 
					url: "../my_orderlist/my_orderlist?Inv=2",
					success: res => {console.log("调用成功")},
					fail: () => {console.log("调用失败")},
					complete: () => {console.log("调用完成")}
				})
			},
			//跳转到已入住订单
			navigateToYiruzhu(){
				uni.navigateTo({ 
					url: "../my_orderlist/my_orderlist?Inv=3",
					success: res => {console.log("调用成功")},
					fail: () => {console.log("调用失败")},
					complete: () => {console.log("调用完成")}
				})
			},
			//跳转到已取消订单
			navigateToYiquxiao(){
				uni.navigateTo({ 
					url: "../my_orderlist/my_orderlist?Inv=4",
					success: res => {console.log("调用成功")},
					fail: () => {console.log("调用失败")},
					complete: () => {console.log("调用完成")}
				})
			},
			//跳转到待结账订单
			navigateToDaijiezhang(){
				uni.navigateTo({ 
					url: "../my_orderlist/my_orderlist?Inv=5",
					success: res => {console.log("调用成功")},
					fail: () => {console.log("调用失败")},
					complete: () => {console.log("调用完成")}
				})
			},
			//跳转到已完成订单
			navigateToYiwancheng(){
				uni.navigateTo({ 
					url: "../my_orderlist/my_orderlist?Inv=6",
					success: res => {console.log("调用成功")},
					fail: () => {console.log("调用失败")},
					complete: () => {console.log("调用完成")}
				})
			},
			//拨打人工热线
			telphone(phone){
				uni.makePhoneCall({ phoneNumber: phone }) // 传参带入号码即可
			}
		}
	}
</script>

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