wuliu/pages/index/index.vue

<template>
	<view class="container">
		<view class="box" v-for="(item,index) in 3">
			<view class="texts">
				<text class="text">发货地：</text><text class="text1">江苏省南京市雨花台区赛虹桥街道街道188号街道</text>
			</view>
			<view class="texts">
				<text class="text">收货地：</text><text class="text1">江苏省南京市雨花台区赛虹桥街道街道188号街道</text>
			</view>
			<view class="biaoqian">
				<view class="biaoqian1" :style="{background:item.background,color:item.color}"
					v-for="(item,index) in biaqqian" :key="index">
					{{item.text}}
				</view>
			</view>
			<view class="xinxis">
				<view class="">
					<text class="xinxis1">发布时间：</text><text class="text1">2024-06-22 16:20</text>
				</view>
				<view class="">
					<text class="xinxis1">下单时间：</text><text class="text1">2024-06-22 16:20</text>
				</view>
				<view class="">
					<text class="xinxis1">装货时间：</text><text class="text1">2024-06-25 16:20 至 2024-06-26 17:23</text>
				</view>
				<view class="">
					<text class="xinxis1">发货电话：</text><text class="text1">13845645666</text>
				</view>
			</view>
			<button :class="item=='0'?'btn':'btndis'" @click="qiangdan">抢单</button>
		</view>
		<uni-popup ref="popup" background-color="#fff" :mask-click='false'>
			<view class="popbox">
				<view class="close">
					<image src="@/static/close-l.png" mode="" style="width: 44rpx;height: 44rpx;" @click="close">
					</image>
				</view>
				<view class="cg">
					<image src="@/static/成功.png" mode="" style="width: 130rpx;height: 130rpx;"></image>
				</view>
				<view class="wenzi">
					抢单成功
				</view>
				<view class="cgwenzi">
					您好，您已抢单成功，请尽快前往发货地装货
				</view>
			</view>

		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				item: 3,
				href: 'https://uniapp.dcloud.io/component/README?id=uniui',
				biaqqian: [{
						text: '车型：13.6',
						background: '#E2ECFA',
						color: '#0D5DC9'
					},
					{
						text: '装载量：20m³',
						background: '#E7F4F9',
						color: '#14B2EC'
					},
					{
						text: '运费价格：￥500',
						background: '#F9EEEE',
						color: '#E45050'
					},
					{
						text: '今日达',
						background: '#F9F3EB',
						color: '#FA9512'
					},
				]
			}
		},
		methods: {
			qiangdan() {
				console.log(123);
				this.$refs.popup.open('center')
			},
			close() {
				this.$refs.popup.close('center')
			},
		}
	}
</script>

<style scoped>
	.cg {
		text-align: center;
	}

	.cgwenzi {
		margin-top: 30rpx;
		text-align: center;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 26rpx;
		color: #222222;
	}

	.wenzi {
		margin-top: 20rpx;
		text-align: center;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 36rpx;
		color: #222222;
	}

	.popbox {
		width: 660rpx;
		height: 450rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
	}

	.close {
		text-align: right;
		margin: 22rpx;
	}

	.btn {
		margin-top: 29rpx;
		width: 602rpx;
		height: 90rpx;
		background: #0D5DC9;
		box-shadow: 0rpx 4rpx 13rpx 0rpx rgba(39, 58, 132, 0.28);
		border-radius: 45rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 36rpx;
		text-align: center;
		line-height: 90rpx;
	}

	.btndis {
		margin-top: 29rpx;
		width: 602rpx;
		height: 90rpx;
		background: #999C9F;
		box-shadow: 0rpx 4rpx 13rpx 0rpx rgba(39, 58, 132, 0.28);
		border-radius: 45rpx;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 30rpx;
		color: #FFFFFF;
		line-height: 36rpx;
		text-align: center;
		line-height: 90rpx;
	}

	.xinxis {
		margin-top: 30rpx;
		font-size: 26rpx;
	}

	.xinxis1 {
		color: #999999;
	}

	.biaoqian {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}

	.biaoqian1 {
		padding: 19rpx;
		border-radius: 10rpx;
		margin-top: 20rpx;
	}

	.container {
		padding: 20px;
		font-size: 14px;
		line-height: 24px;
	}

	.box {
		padding: 30rpx;
		background: #fff;
		margin-top: 20rpx;
	}

	.texts {
		font-size: 30rpx;
		margin-bottom: 29rpx;
	}

	.text {
		color: #999999;
	}
</style>