bc_wx_applet/pages/diningList/diningList.vue

<template>
	<view>
		<view class="btnS">
			<view style="width: 90%;">
				<u-search :clearabled="true" shape="round" :showAction="false" v-model="seaName"
					@search="searchClick"></u-search>
			</view>
		</view>

		<view class="contain" style="margin: 10px 0;" v-for="(item, index)  in tableData" :key="index">
			<view class="box" :class="{ 'boxed-border': item.defaultState == 2 }">
				<view class="container" @click="carList">
					<view class="text-container">
						<view class="flex-item">{{item.name ? item.name : '无' }}</view>
						<u-tag plain :text="item.openState ? '营业中' : '离线'" :type="item.openState ? 'success' : 'error'"
							size="mini"></u-tag>
					</view>
				</view>
				<view class="icon-container">
					<u-icon name="phone" size="28" @click.stop="call"></u-icon>
					<u-icon style="margin-left: 10px;" name="info-circle" size="28" @click.stop="btnIC(item)"></u-icon>
				</view>
				<view :class="{ 'btnbor': item.defaultState==2 }" v-if="item.defaultState==2">
					<!-- <u-tag text="当前" bgColor='#FF6D20' borderColor='#FF6D20' icon="checkmark-circle"></u-tag> -->
					<image src="../../static/danqian.png" class="img-ding"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				seaName: '',
				orderinfo: {},
				tableData: [{
						name: '23333',
						tags: 1,
						showBorder: true,
					},
					{
						name: '门店',
						tags: 1,
						showBorder: false,
					},
					{
						name: '店家',
						tags: 1,
						showBorder: false,
					}
				],
				page: {
					pageNum: 1,
					pageSize: 20,
					total: 0,
					totalPage: 0
				},
				status: 'loading'
			}
		},
		created() {
			this.fatchDate()
		},
		methods: {
			searchClick(e) {
				this.seaName = e
				this.fatchDate()
				console.log('==============================', e)
			},
			async call() {
				const query = {
					id: this.tableData.customerId
				}
				const response = await this.$request('post', '/sale/customer/queryCustomerById', query);

				if (this.orderinfo.shopCall) {
					uni.makePhoneCall({
						phoneNumber: this.orderinfo.shopCall
					});
				} else {
					uni.showToast({
						icon: 'none',
						title: '暂无商家电话'
					})
				}
			},
			btnIC(e) {
				console.log('e=================', e)
				uni.navigateTo({
					url: `/pages/diningCar/diningCar?id=${e.id}`
				})
			},
			carList() {
				uni.navigateTo({
					url: `/pages/classify/classify`
				})
			},
			async fatchDate() {
				var queryParams = {
					"pageSize": this.page.pageSize,
					"pageNum": this.page.pageNum,
					"name": this.seaName
				}
				try {
					const response = await this.$request('post', '/sale/diningCar/queryDiningCar', queryParams);
					console.log('response', response)

					const data = response.rows; // 假设 res.rows 是一个数组
					console.log('response.rows', response.rows);
					if (response.code === 200) {
						const li = data;
						if (this.page.pageNum === 1) {
							this.tableData = li;
						} else {
							this.tableData = this.tableData.concat(li);
						}
						this.page.total = data.count;
						this.page.totalPage = Math.ceil(data.count / this.page.pageSize);
						this.status = this.page.totalPage === 0 || this.page.totalPage === this.page.pageNum ?
							'noMore' : 'more';
					} else {
						//this.$toast(data.msg);
					}
				} catch (err) {
					console.error('请求异常', err);
				}

			}
		}
	}
</script>

<style scoped lang="scss">
	.box {
		padding: 20rpx 20rpx 0;
		height: 80px;
		border-bottom-left-radius: 30rpx;
		border-bottom-right-radius: 30rpx;
		background-position: top;
		box-shadow: 0 0 5px 2px #ebebeb;
		background-repeat: no-repeat;
		border-radius: 20rpx;
		background-color: #fff;

		.btnbor {
			margin: -32rpx -20rpx 0;
			// margin-right: -11px;
			margin-top: 12px;
			float: right;
			position: relative; // 设置为相对定位

			&::after {
				content: '';
				display: block;
				width: 100%;
				height: 100%;
				border: 1px solid #FF6D20;
				border-radius: 20rpx;
				position: absolute;
				top: 0;
				right: 0;
				background-color: #fff;
				z-index: -1; // 使边框在图片下面
			}
		}
	}

	.boxed-border {
		border: 1px solid #FF6D20;
		/* 边框样式 */
		padding: 20rpx 20rpx 0;
		border-radius: 20rpx;
		/* 添加圆角 */

		// .btnbor {
		// 	margin-right: -11px;
		// 	margin-top: -15px;
		// 	float: right;
		// }
	}

	.box:hover {
		border: 1px solid #FF6D20;
		/* 鼠标悬停时显示边框 */
	}

	.box:active {
		border: 1px solid #F54319;
		/* 鼠标按下时显示另一种边框颜色 */
	}

	.container {
		display: flex;
		/* 使用 Flexbox 布局 */
		justify-content: space-between;
		/* 子元素之间留有空白 */
	}

	.text-container {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		/* 左对齐 */
	}

	.flex-item {
		margin-bottom: 10px;
	}

	.tag-item {
		margin-left: auto;
		/* 将标签推到右边 */
	}

	.icon-container {
		display: flex;
		/* 使用 Flexbox 布局 */
		flex-direction: row;
		/* 水平排列子元素 */
		justify-content: flex-end;
		/* 子元素右对齐 */
		margin-top: -55px;
		right: 0;
		bottom: 0;
		gap: 10px;
		/* 设置图标之间的距离 */
	}

	.img-ding {
		width: 83px;
		height: 30px;
		position: absolute;
		right: 0;
		top: 0;
		margin: 0; // 清除 margin 属性，以避免与边框重叠
	}

	.btnS {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 5px;
	}
</style>