wuliu/pages/index/index.vue

<template>
	<view class="container">
		<view class="hd">
			<view class="a" @click="openPopup()">
				{{startTime?startTime:'请选择城市'}}<image src="/static/jiantou.png"></image>
			</view>
		</view>
		<view class="box" v-for="(item,index) in list" :key="index">
			<view class="texts">
				<text class="text">发货地：</text><text class="text1">{{item.deliver_address}}</text>
			</view>
			<view class="texts">
				<text class="text">收货地：</text><text class="text1">{{item.receiving_address}}</text>
			</view>
			<view class="biaoqian">
				<view class="biaoqian1">
					车型：{{item.car_type}}
				</view>
				<view class="biaoqian2">
					装载量：{{item.loading_capacity}}
				</view>
				<view class="biaoqian3">
					运费价格：{{item.freight}}
				</view>
				<view class="biaoqian4">
					{{item.transport_time}}
				</view>
			</view>
			<view class="xinxis">
				<view class="">
					<text class="xinxis1">发布时间：</text><text class="text1">{{item.release_time}}</text>
				</view>
				<view class="">
					<text class="xinxis1">下架时间：</text><text class="text1">{{item.delisting_time}}</text>
				</view>
				<view class="">
					<text class="xinxis1">装货时间：</text><text
						class="text1">{{item.loading_start_time}}至{{item.loading_end_time}} </text>
				</view>
				<view class="">
					<text class="xinxis1">发货电话：</text><text class="text1">{{item.mobile}}</text>
				</view>
			</view>
			<button :class="item.status=='2'?'btn':'btndis'" @click="qiangdan(item)">抢单</button>
		</view>
		<uni-popup ref="popup" background-color="#fff" :mask-click='false'>
			<view class="popbox" v-if="status">
				<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>
			<view class="popbox" v-else>
				<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">
					{{msg}}
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				listwdl: [{
						car_type: "9.6米",
						delisting_time: "2024-07-30 00:00",
						deliver_address: "江苏省徐州市鼓楼区新航",
						freight: "800.00",
						id: 11,
						is_accep: 0,
						loading_capacity: "60",
						loading_end_time: "2024-07-30 00:00",
						loading_start_time: "2024-07-30 00:00",
						mobile: "13280243699",
						order_time: "2024-07-29 19:02",
						receiving_address: "安徽省宿州市萧县新淮",
						release_time: "2024-07-29 19:01",
						status: 2,
						status_text: "抢单中",
						transport_time: "今日"
					}

				],
				content: '',
				msg: "",
				status: true,
				list: [],
				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'
					},
				]
			}
		},
		onReady() {
			this.getLocation();
		},
		onShow() {
			this.memberAgreement()
			// this.taskList(1)
		},
		onReachBottom() {
			console.log(11122);
		},
		methods: {
			getLocation() {
				const that = this;
				uni.getFuzzyLocation({
					type: 'gcj02',
					success(res1) {
						console.log(res1)
						let latitude = res1.latitude,longitude = res1.longitude;
						let url = `https://restapi.amap.com/v3/geocode/regeo?output=json&location=${longitude},${latitude}&key=4a6e2ba8eac3864f0d88f9b5abd026e6&radius=1000`
						uni.request({
							url,
							success(res) {
								console.log(res)
								
							}
						})
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			memberAgreement() {
				this.$api.memberAgreement().then(res => {
					console.log(7, res);
					this.content = res.data.content
					if (this.content != '<p><br></p>') {
						this.taskList(1)
					}else{}
					this.list=this.listwdl
				})
			},
			memberInfo() {
				this.$api.memberInfo().then(res => {
					if (res.data.auth_status != 2) {
						uni.showModal({
							title: "温馨提示",
							content: "司机未认证成功，请先认证",
							confirmColor: "#05754D",
							showCancel: false,
							success(res) {
								uni.switchTab({
									url: "/pages/user/index"
								})
							}
						})
					}
				})
			},
			taskList(page) {
				this.$api.taskList({
					page
				}).then(res => {
					this.memberInfo()
					this.list = res.data.list
				})
			},
			qiangdan(e) {
				if (e.status == 2) {
					this.$refs.popup.open('center')
					this.$api.orderGrabbing({
						task_id: e.id
					}).then(res => {
						if (res.code == 200) {
							this.status = true
							this.$refs.popup.open('center')
							this.taskList(1)
						}
					}).catch(res => {
						console.log(444, res);
						uni.hideToast();
						this.status = false
						this.$refs.popup.open('center')
						this.taskList(1)
						this.msg = res.msg ? res.msg : '您好，您来晚了一步，订单已被其他司机抢走 了，请选择其他订单'
					})
				} else {

				}

			},
			close() {
				this.$refs.popup.close('center')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.hd{
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
		height: 90rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		.a{
			font-weight: 500;
			font-size: 28rpx;
			color: #333333;
			image{
				width: 20rpx;
				height: 12rpx;
				margin-left: 10rpx;
			}
		}
	}
	.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;
		font-size: 24rpx;
	}

	.biaoqian1 {
		padding: 19rpx;
		border-radius: 10rpx;
		margin-top: 20rpx;
		background: #E2ECFA;
		color: #0D5DC9
	}

	.biaoqian2 {
		padding: 19rpx;
		border-radius: 10rpx;
		margin-top: 20rpx;
		background: #E7F4F9;
		color: #14B2EC
	}

	.biaoqian3 {
		padding: 19rpx;
		border-radius: 10rpx;
		margin-top: 20rpx;
		background: #F9EEEE;
		color: #E45050
	}

	.biaoqian4 {
		padding: 19rpx;
		border-radius: 10rpx;
		margin-top: 20rpx;
		background: #F9F3EB;
		color: #FA9512
	}

	.container {
		padding: 24rpx;
		font-size: 14px;
		line-height: 24px;
		padding-top: 0;
	}

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

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

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