feat: 样式修复

pages/home/index.vue

@@ -105,7 +105,10 @@
 					<text v-else :class="statusClass[item.orderStatus]">{{status[item.orderStatus]}}</text>
 				</view>
 				<view class="c_middle">
-					<image :src="item.cover"></image>
+					<view class="image">
+						<image :src="item.cover"></image>
+					</view>
+
 					<view class="cm_info">
 						<view class="cmi_title">{{item.orderType=='201'?item.comboName:item.houseBaseName}}</view>
 						<view class="cmi_pre">{{item.guestName}}</view>
@@ -115,6 +118,7 @@
 						</view>
 						<view class="cmi_pre" v-else>{{item.date}}<span>共{{item.num}}晚</span></view>
 					</view>
+
 					<view class="cm_price">￥{{item.orderAmount?item.orderAmount.toFixed(2):''}}</view>
 				</view>
 				<view class="c_bottom">
@@ -611,13 +615,22 @@
 				display: flex;
 				position: relative;
 
-				image {
+				.image {
 					width: 180rpx;
 					height: 180rpx;
 					border-radius: 20rpx;
+
+					image {
+						width: 100%;
+						height: 100%;
+						border-radius: 20rpx;
+					}
 				}
 
+
+
 				.cm_info {
+					width: 435rpx;
 					padding-left: 20rpx;
 
 					.cmi_title {

pagesMy/orderList/orderList.vue

@@ -1,426 +1,448 @@
-<template>
-	<!-- <view class="pages"> -->
-	<view class="pages" :style="{'min-height':h+'px','padding-top':(mt)+'px'}">
-		<c-nav-bar title="我的订单" showIcon="true" :titleStyle="titleStyle"></c-nav-bar>
-		<!-- <TopTabs :list="tabList" @changeTab="changeTab">
-		</TopTabs> -->
-		<view class="tb">
-			<view class="tabs">
-				<view v-for="(item,index) in tabList" :key="index" @tap="changeTab1(index)">
-					<text :class="index==current?'active':''">{{item.name}}</text>
-				</view>
-			</view>
-		</view>
-		<view class="mainContain">
-			<view v-if="dataList.length>0" class="card" v-for="item,index  in dataList" :key="index">
-				<view class="header">
-					<span style="font-weight: 700;">订单号：{{item.orderCode}}</span>
-					<text v-if='item.orderStatus==-1' class="orange">待确认</text>
-					<text v-else-if='item.orderStatus==-2' class="red">待支付</text>
-					<text v-else-if='item.orderStatus==1' class="green">已预订</text>
-					<text v-else-if='item.orderStatus==5' class="green">已退款</text>
-					<text v-else-if='item.orderStatus==4' class="green">已取消</text>
-					<text v-else-if='item.orderStatus==2' class="green">{{item.orderType==2?'已入住':'已核销'}}</text>
-					<text v-else-if='item.orderStatus==3' class="green">已退房</text>
-					<text v-else :class="statusClass[item.orderStatus]">{{status[item.orderStatus]}}</text>
-				</view>
-				<view class="mainContent">
-					<image class="image" :src="item.cover" mode="aspectFill"></image>
-					<view class="middle">
-						<span class="title" v-if="item.orderType=='2'">{{item.houseBaseName}}-{{item.roomNumber}}</span>
-						<span class="title" v-else>{{item.comboName}}</span>
-						<span class='info'>
-							<span v-if="item.orderType==201">{{item.comboType==1?'包桌':'按人均'}}</span>
-							<span v-if="item.orderType==2">{{item.guestName}}</span>
-							<span v-if="item.orderType==201">{{item.guestName}} {{item.guestPhoneCopy}}</span>
-							<span v-if="item.orderType==2">{{item.guestPhoneCopy}}</span>
-							<span v-if="item.orderType=='2'">{{item.arriveDate}}到{{item.leaveDate}} </span>
-							<span v-else>{{item.repastTime}} </span>
-						</span>
-					</view>
-					<view class="price">
-						￥{{item.orderAmount}}
-					</view>
-				</view>
-				<!-- <view class="bottom"  v-if="item.orderStatus==-1">
-					<view class="refuse">
-						拒绝
-					</view>
-					<view class="btn">
-						确认订单
-					</view>
-				</view>
-				<view class="bottom"  v-else-if="item.orderStatus==1">
-					<view class="btn">
-						办理入住
-					</view>
-				</view>
-				<view class="bottom" v-else-if="item.orderStatus==2">
-					<view class="btn">
-						办理退房
-					</view>
-				</view> -->
-				<view class="bottom" @click="handleDetail(item)">
-					<view class="detail">
-						详情
-					</view>
-				</view>
-				<!-- <view class="bottom" @click="handleDetail(item)" v-else-if="item.orderStatus==4">
-					<view class="detail">
-						详情
-					</view>
-				</view> -->
-			</view>
-			<view class="nodata" v-if='dataList.length==0'>
-				<NoData></NoData>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	import TopTabs from '../../components/TopTabs/topTabs.vue';
-	// import NoData from '../../components/NoData/index.vue';
-	export default {
-		components: {
-			TopTabs,
-			// NoData
-		},
-		data() {
-			return {
-				current: 0,
-				mysearch: '',
-				dataList: [],
-				limit: 10,
-				page: 1,
-				homestayId: uni.getStorageSync('homestayId'),
-				statusClass: [
-					'',
-					'green',
-					'blue',
-					'grey',
-					'grey',
-				],
-				status: [
-					'',
-					'已预订',
-					'已入住',
-					'已退房',
-					'已取消',
-				],
-				// mt: uni.getSystemInfoSync().statusBarHeight + 44,
-				tabList: [{
-						name: '全部'
-					},
-					{
-						name: '待确认'
-					},
-					{
-						name: '待支付'
-					},
-					{
-						name: '已预订'
-					},
-					{
-						name: '已退款'
-					},
-				],
-			}
-		},
-		onLoad(option) {
-			if (option.Type) {
-				const type = parseInt(option.Type) + 1
-				this.changeTab1(type)
-			} else {
-				this.getOrderList()
-			}
-		},
-		methods: {
-			changeTab1(index) {
-				this.current = index;
-				this.changeTab(index)
-			},
-			getOrderList(orderStatus) {
-				this.$api.get('/merchant/hotel/order/getMerchantOrderPageList', {
-					homestayId: this.homestayId,
-					limit: this.limit,
-					page: this.page,
-					orderStatus: orderStatus ? orderStatus : ''
-				}).then((res => {
-					if (res.data.code == 0) {
-						this.dataList = res.data.data.list
-						this.dataList.forEach((i, index) => {
-							if (i.orderType == 2) {
-								this.dataList[index].arriveDate = i.arriveDate.slice(0, 10)
-								this.dataList[index].leaveDate = i.leaveDate.slice(0, 10)
+<template>
+	<!-- <view class="pages"> -->
+	<view class="pages" :style="{'min-height':h+'px','padding-top':(mt)+'px'}">
+		<c-nav-bar title="我的订单" showIcon="true" :titleStyle="titleStyle"></c-nav-bar>
+		<!-- <TopTabs :list="tabList" @changeTab="changeTab">
+		</TopTabs> -->
+		<view class="tb">
+			<view class="tabs">
+				<view v-for="(item,index) in tabList" :key="index" @tap="changeTab1(index)">
+					<text :class="index==current?'active':''">{{item.name}}</text>
+				</view>
+			</view>
+		</view>
+		<view class="mainContain">
+			<view v-if="dataList.length>0" class="card" v-for="item,index  in dataList" :key="index">
+				<view class="header">
+					<span style="font-weight: 700;">订单号：{{item.orderCode}}</span>
+					<text v-if='item.orderStatus==-1' class="orange">待确认</text>
+					<text v-else-if='item.orderStatus==-2' class="red">待支付</text>
+					<text v-else-if='item.orderStatus==1' class="green">已预订</text>
+					<text v-else-if='item.orderStatus==5' class="green">已退款</text>
+					<text v-else-if='item.orderStatus==4' class="green">已取消</text>
+					<text v-else-if='item.orderStatus==2' class="green">{{item.orderType==2?'已入住':'已核销'}}</text>
+					<text v-else-if='item.orderStatus==3' class="green">已退房</text>
+					<text v-else :class="statusClass[item.orderStatus]">{{status[item.orderStatus]}}</text>
+				</view>
+				<view class="mainContent">
+					<view class="image">
+						<image :src="item.cover" mode="aspectFill"></image>
+					</view>
+					<view class="middle">
+						<span class="title" v-if="item.orderType=='2'">{{item.houseBaseName}}-{{item.roomNumber}}</span>
+						<span class="title" v-else>{{item.comboName}}</span>
+						<span class='info'>
+							<span v-if="item.orderType==201">{{item.comboType==1?'包桌':'按人均'}}</span>
+							<span v-if="item.orderType==2">{{item.guestName}}</span>
+							<span v-if="item.orderType==201">{{item.guestName}} {{item.guestPhoneCopy}}</span>
+							<span v-if="item.orderType==2">{{item.guestPhoneCopy}}</span>
+							<span v-if="item.orderType=='2'">{{item.arriveDate}}到{{item.leaveDate}} </span>
+							<span v-else>{{item.repastTime}} </span>
+						</span>
+					</view>
+					<view class="price">
+						￥{{item.orderAmount}}
+					</view>
+				</view>
+				<!-- <view class="bottom"  v-if="item.orderStatus==-1">
+					<view class="refuse">
+						拒绝
+					</view>
+					<view class="btn">
+						确认订单
+					</view>
+				</view>
+				<view class="bottom"  v-else-if="item.orderStatus==1">
+					<view class="btn">
+						办理入住
+					</view>
+				</view>
+				<view class="bottom" v-else-if="item.orderStatus==2">
+					<view class="btn">
+						办理退房
+					</view>
+				</view> -->
+				<view class="bottom" @click="handleDetail(item)">
+					<view class="detail">
+						详情
+					</view>
+				</view>
+				<!-- <view class="bottom" @click="handleDetail(item)" v-else-if="item.orderStatus==4">
+					<view class="detail">
+						详情
+					</view>
+				</view> -->
+			</view>
+			<view class="nodata" v-if='dataList.length==0'>
+				<NoData></NoData>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import TopTabs from '../../components/TopTabs/topTabs.vue';
+	// import NoData from '../../components/NoData/index.vue';
+	export default {
+		components: {
+			TopTabs,
+			// NoData
+		},
+		data() {
+			return {
+				current: 0,
+				mysearch: '',
+				dataList: [],
+				limit: 10,
+				page: 1,
+				homestayId: uni.getStorageSync('homestayId'),
+				statusClass: [
+					'',
+					'green',
+					'blue',
+					'grey',
+					'grey',
+				],
+				status: [
+					'',
+					'已预订',
+					'已入住',
+					'已退房',
+					'已取消',
+				],
+				// mt: uni.getSystemInfoSync().statusBarHeight + 44,
+				tabList: [{
+						name: '全部'
+					},
+					{
+						name: '待确认'
+					},
+					{
+						name: '待支付'
+					},
+					{
+						name: '已预订'
+					},
+					{
+						name: '已退款'
+					},
+				],
+			}
+		},
+		onLoad(option) {
+			if (option.Type) {
+				const type = parseInt(option.Type) + 1
+				this.changeTab1(type)
+			} else {
+				this.getOrderList()
+			}
+		},
+		methods: {
+			changeTab1(index) {
+				this.current = index;
+				this.changeTab(index)
+			},
+			getOrderList(orderStatus) {
+				this.$api.get('/merchant/hotel/order/getMerchantOrderPageList', {
+					homestayId: this.homestayId,
+					limit: this.limit,
+					page: this.page,
+					orderStatus: orderStatus ? orderStatus : ''
+				}).then((res => {
+					if (res.data.code == 0) {
+						this.dataList = res.data.data.list
+						this.dataList.forEach((i, index) => {
+							if (i.orderType == 2) {
+								this.dataList[index].arriveDate = i.arriveDate.slice(0, 10)
+								this.dataList[index].leaveDate = i.leaveDate.slice(0, 10)
 							}
-							i.guestPhoneCopy = this.$aesTm.tuomin(i.guestPhone,2)
-						})
-					} else {
-						uni.showToast({
-							title: res.data.msg,
-							icon: 'none'
-						})
-					}
-				}))
-			},
-			getOrderByStatusList() {
-				this.$api.get('/merchant/hotel/order/getMerchantOrderPageList', {
-					homestayId: this.homestayId,
-					limit: this.limit,
-					page: this.page,
-					status: 0
-				}).then((res => {
-					if (res.data.code == 0) {
-						this.dataList = res.data.data.list
-						this.dataList.forEach((i, index) => {
-							if (i.orderType == 2) {
-								this.dataList[index].arriveDate = i.arriveDate.slice(0, 10)
-								this.dataList[index].leaveDate = i.leaveDate.slice(0, 10)
+							i.guestPhoneCopy = this.$aesTm.tuomin(i.guestPhone, 2)
+						})
+					} else {
+						uni.showToast({
+							title: res.data.msg,
+							icon: 'none'
+						})
+					}
+				}))
+			},
+			getOrderByStatusList() {
+				this.$api.get('/merchant/hotel/order/getMerchantOrderPageList', {
+					homestayId: this.homestayId,
+					limit: this.limit,
+					page: this.page,
+					status: 0
+				}).then((res => {
+					if (res.data.code == 0) {
+						this.dataList = res.data.data.list
+						this.dataList.forEach((i, index) => {
+							if (i.orderType == 2) {
+								this.dataList[index].arriveDate = i.arriveDate.slice(0, 10)
+								this.dataList[index].leaveDate = i.leaveDate.slice(0, 10)
 							}
-							i.guestPhoneCopy = this.$aesTm.tuomin(i.guestPhone,2)
-						})
-					} else {
-						uni.showToast({
-							title: res.data.msg,
-							icon: 'none'
-						})
-					}
-				}))
-			},
-			handleDetail(item) {
-				if (item.orderType == 2) {
-					uni.navigateTo({
-						url: '/pages/house/orderInfo?orderId=' + item.id
-					})
-				} else {
-					let obj = {
-						orderId: item.id,
-						isDel: 0
-					}
-					uni.navigateTo({
-						url: '/pages/house/orderDetails?obj=' + JSON.stringify(obj)
-					})
-				}
-			},
-			changeTab(index) {
-				this.tabIdx = index;
-				switch (index) {
-					case 0:
-						this.getOrderList()
-						break
-					case 1:
-						this.getOrderList(-1)
-						break
-					case 2:
-						// this.getOrderByStatusList(-2)
-						this.getOrderList(-2)
-						break
-					case 3:
-						this.getOrderList(1)
-						break
-					case 4:
-						this.getOrderList(5)
-						break
-				}
-			},
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	.pages {
-		background: #F9FAFC;
-
-		.tb {
-			width: 100%;
-
-			top: 0;
-			left: 0;
-			z-index: 999;
-
-			.searchBoxParent {
-				width: 100%;
-				background: #fff;
-				padding: 20rpx 24rpx 6rpx;
-				box-sizing: border-box;
-
-				.searchBox {
-					width: 100%;
-					background-color: #fff;
-				}
-			}
-
-			.tabs {
-				background: #fff;
-				padding: 26rpx 0;
-				display: flex;
-				align-items: center;
-				width: 100%;
-
-				&>view {
-					width: 25%;
-					font-size: 28rpx;
-					font-family: PingFangSC-Regular, PingFang SC;
-					font-weight: 400;
-					color: black;
-					line-height: 40rpx;
-					position: relative;
-					text-align: center;
-				}
-
-				.active {
-					font-size: 32rpx;
-					font-family: PingFang-SC-Bold, PingFang-SC;
-					font-weight: bold;
-					color: black;
-					line-height: 45rpx;
-				}
-
-				.active::after {
-					position: absolute;
-					content: '';
-					width: 50rpx;
-					height: 8rpx;
-					background: #1372FF;
-					bottom: -26rpx;
-					left: 60%;
-					margin-left: -42rpx;
-				}
-			}
-		}
-
-		.green {}
-
-		.mainContain {
-			display: flex;
-			flex-direction: column;
-			padding: 0 20rpx;
-
-			.nodata {
-				background: white;
-
-			}
-
-			.card {
-				background: #fff;
-				border-radius: 16rpx;
-				margin: 20rpx 0;
-				padding: 20rpx;
-
-				.header {
-					display: flex;
-					justify-content: space-between;
-					border-bottom: 1px #f3f3f3 solid;
-					padding: 20rpx;
-
-					.red {
-						color: indianred;
-					}
-
-					.green {
-						color: #39CE77;
-					}
-
-					.blue {
-						color: #1372FF;
-					}
-
-					.grey {
-						color: #4C5F76;
-					}
-
-					.orange {
-						color: #FF9100;
-					}
-				}
-
-				.mainContent {
-					border-bottom: 1px #f3f3f3 solid;
-					display: flex;
-					padding: 20rpx 0;
-
-
-					justify-content: space-evenly;
-
-					.image {
-						background-repeat: no-repeat;
-						background-size: cover;
-						width: 198rpx;
-						height: 180rpx;
-						border-radius: 16rpx;
-					}
-
-					.middle {
-						color: #777777;
-						display: flex;
-						flex-direction: column;
-						justify-content: space-between;
-						margin-left: 25rpx;
-
-
-						.title {
-							font-weight: 700;
-							font-size: 32rpx;
-							color: black;
-						}
-
-						.info {
-							color: #777777;
-							display: flex;
-							flex-direction: column;
-
-							&>span {
-								margin-top: 10rpx;
-
-							}
-						}
-					}
-
-					.price {
-						color: red;
-						text-align: center;
-						height: 100%;
-						align-items: center;
-						align-self: center;
-						font-size: 29rpx;
-						font-weight: 700;
-					}
-
-				}
-
-				.bottom {
-					padding: 30rpx 20rpx;
-					display: flex;
-					justify-content: flex-end;
-
-					.refuse {
-						margin-right: 30rpxs;
-						border: 1rpx solid orangered;
-						border-radius: 35rpx;
-						color: orangered;
-						padding: 13rpx 34rpx;
-					}
-
-					.btn {
-						background: #1372FF;
-						border-radius: 35rpx;
-						color: white;
-						padding: 13rpx 34rpx;
-						margin-left: 30rpx;
-
-					}
-
-					.detail {
-
-						border: 1rpx solid darkgrey;
-						border-radius: 35rpx;
-						color: darkgrey;
-						padding: 13rpx 34rpx;
-					}
-				}
-
-			}
-		}
-	}
+							i.guestPhoneCopy = this.$aesTm.tuomin(i.guestPhone, 2)
+						})
+					} else {
+						uni.showToast({
+							title: res.data.msg,
+							icon: 'none'
+						})
+					}
+				}))
+			},
+			handleDetail(item) {
+				if (item.orderType == 2) {
+					uni.navigateTo({
+						url: '/pages/house/orderInfo?orderId=' + item.id
+					})
+				} else {
+					let obj = {
+						orderId: item.id,
+						isDel: 0
+					}
+					uni.navigateTo({
+						url: '/pages/house/orderDetails?obj=' + JSON.stringify(obj)
+					})
+				}
+			},
+			changeTab(index) {
+				this.tabIdx = index;
+				switch (index) {
+					case 0:
+						this.getOrderList()
+						break
+					case 1:
+						this.getOrderList(-1)
+						break
+					case 2:
+						// this.getOrderByStatusList(-2)
+						this.getOrderList(-2)
+						break
+					case 3:
+						this.getOrderList(1)
+						break
+					case 4:
+						this.getOrderList(5)
+						break
+				}
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.pages {
+		background: #F9FAFC;
+
+		.tb {
+			width: 100%;
+
+			top: 0;
+			left: 0;
+			z-index: 999;
+
+			.searchBoxParent {
+				width: 100%;
+				background: #fff;
+				padding: 20rpx 24rpx 6rpx;
+				box-sizing: border-box;
+
+				.searchBox {
+					width: 100%;
+					background-color: #fff;
+				}
+			}
+
+			.tabs {
+				background: #fff;
+				padding: 26rpx 0;
+				display: flex;
+				align-items: center;
+				width: 100%;
+
+				&>view {
+					width: 25%;
+					font-size: 28rpx;
+					font-family: PingFangSC-Regular, PingFang SC;
+					font-weight: 400;
+					color: black;
+					line-height: 40rpx;
+					position: relative;
+					text-align: center;
+				}
+
+				.active {
+					font-size: 32rpx;
+					font-family: PingFang-SC-Bold, PingFang-SC;
+					font-weight: bold;
+					color: black;
+					line-height: 45rpx;
+				}
+
+				.active::after {
+					position: absolute;
+					content: '';
+					width: 50rpx;
+					height: 8rpx;
+					background: #1372FF;
+					bottom: -26rpx;
+					left: 60%;
+					margin-left: -42rpx;
+				}
+			}
+		}
+
+		.green {}
+
+		.mainContain {
+			display: flex;
+			flex-direction: column;
+			padding: 0 20rpx;
+
+			.nodata {
+				background: white;
+
+			}
+
+			.card {
+				background: #fff;
+				border-radius: 16rpx;
+				margin: 20rpx 0;
+				padding: 20rpx;
+
+				.header {
+					display: flex;
+					justify-content: space-between;
+					border-bottom: 1px #f3f3f3 solid;
+					padding: 20rpx;
+
+					.red {
+						color: indianred;
+					}
+
+					.green {
+						color: #39CE77;
+					}
+
+					.blue {
+						color: #1372FF;
+					}
+
+					.grey {
+						color: #4C5F76;
+					}
+
+					.orange {
+						color: #FF9100;
+					}
+				}
+
+				.mainContent {
+					border-bottom: 1px #f3f3f3 solid;
+					display: flex;
+					padding: 20rpx 0;
+					position: relative;
+					box-sizing: border-box;
+
+					justify-content: space-evenly;
+
+
+					.image {
+						background-repeat: no-repeat;
+						background-size: cover;
+						width: 198rpx;
+						height: 180rpx;
+						border-radius: 16rpx;
+
+						image {
+							width: 100%;
+							height: 100%;
+							border-radius: 16rpx;
+						}
+					}
+
+					.middle {
+						width: 460rpx;
+						color: #777777;
+						display: flex;
+						flex-direction: column;
+						justify-content: space-between;
+						margin-left: 25rpx;
+
+
+						.title {
+							font-weight: 700;
+							font-size: 32rpx;
+							color: black;
+							width: 435rpx;
+						}
+
+						.info {
+							color: #777777;
+							display: flex;
+							flex-direction: column;
+
+							&>span {
+								margin-top: 10rpx;
+
+							}
+						}
+					}
+
+					.price {
+						font-size: 32rpx;
+						font-family: PingFang SC, PingFang SC;
+						font-weight: bold;
+						color: #F9423A;
+						position: absolute;
+						top: 50%;
+						margin-top: -22.5rpx;
+						right: 30rpx;
+
+
+						// color: red;
+						// text-align: center;
+						// height: 100%;
+						// align-items: center;
+						// align-self: center;
+						// font-size: 29rpx;
+						// font-weight: 700;
+					}
+
+				}
+
+				.bottom {
+					padding: 30rpx 20rpx;
+					display: flex;
+					justify-content: flex-end;
+
+					.refuse {
+						margin-right: 30rpxs;
+						border: 1rpx solid orangered;
+						border-radius: 35rpx;
+						color: orangered;
+						padding: 13rpx 34rpx;
+					}
+
+					.btn {
+						background: #1372FF;
+						border-radius: 35rpx;
+						color: white;
+						padding: 13rpx 34rpx;
+						margin-left: 30rpx;
+
+					}
+
+					.detail {
+
+						border: 1rpx solid darkgrey;
+						border-radius: 35rpx;
+						color: darkgrey;
+						padding: 13rpx 34rpx;
+					}
+				}
+
+			}
+		}
+	}
 </style>