bc_wx_applet/pages/diningList/diningList.vue

<template>
	<view class="mt20px">
		<view class="contain">
			<view class="box" :class="{ 'boxed-border': showBorder }">
				<view class="container">
					<view class="text-container">
						<view class="flex-item">{{dingName}}</view>
						<u-tag plain :text="tags ? '营业中' : '离线'" :type="tags ? 'success' : 'error'" size="mini"></u-tag>
					</view>
					<view class="icon-container">
						<u-icon name="plus-circle" size="24" @click="call"></u-icon>
						<u-icon style="margin-left: 10px;" name="info-circle" size="24" @click="btnIC"></u-icon>
					</view>
				</view>
				<view :class="{ 'btnbor': showBorder }" v-if="showBorder">
					<u-tag text="镂空" bgColor='#FF6D20' borderColor='#FF6D20' icon="map"></u-tag>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tags: 1,
				showBorder: false,
				dingName: '23333',
				orderinfo: {},
				tableData: []
			}
		},
		created() {
			this.fatchDate()
		},
		methods: {
			call() {
				if (this.orderinfo.shopCall) {
					uni.makePhoneCall({
						phoneNumber: this.orderinfo.shopCall
					});
				} else {
					uni.showToast({
						icon: 'none',
						title: '暂无商家电话'
					})
				}
			},
			btnIC() {
				uni.navigateTo({
					url: `/pages/diningCar/diningCar`
				})
			},
			fatchDate() {
				//const result = await this.$request('get', '/diningCar/{id}')
				const result = this.$request('get', '/diningCar/queryDiningCar')
				if (result) {
					console.log('result', result.data)
					this.tableData = result.data
				}
			}
		}
	}
</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;


	}

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

		.btnbor {
			margin-right: -11px;
			margin-top: -3px;
			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: -30px;
		gap: 10px; /* 设置图标之间的距离 */
	}
</style>