shangmenanmo/additionalvue/user/payment/payment.vue

<template>
	<view>
		<view class="box" v-for="(item,index) in list" :key="index" v-if="list.length!=0">
			<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" :style="{background:item.background,color:item.color}"
					v-for="(item,index) in biaqqian" :key="index">
					{{item.text}}
				</view> -->
				<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="xinxis1t">
					<text class="xinxis1">发布时间：</text><text class="text1">{{item.release_time}}</text> <view class="wanc">待付款</view>
				</view>
				<view class="xinxis1t">
					<text class="xinxis1">下单时间：</text><text class="text1">{{item.order_time}}</text>
				</view>
				<view class="xinxis1t">
					<text class="xinxis1">发货电话：</text><text class="text1">{{item.mobile}}</text>
				</view>
			</view>
		</view>
		<view class="zanwu" v-else>
			暂无任务
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				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'
					},
				]
			}
		},
		onShow() {
			this.memberTaskList(1,4)
		},
		methods: {
		memberTaskList(page,type){
			this.$api.memberTaskList({page,type}).then(res=>{
				this.list=res.data.list
			})
		}
		}
	}
</script>

<style scoped>
	.zanwu{
		line-height: 200rpx;
		font-size: 50rpx;
		text-align: center;
	}
	.wanc{
		width: 150rpx;
		height: 56rpx;
		background: #0D5DC9;
		border-radius: 28rpx 0rpx 0rpx 28rpx;
		display: inline-block;
		float: right;
		font-family: Alibaba PuHuiTi;
		font-weight: 400;
		font-size: 24rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 56rpx;
	}
	.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;
	}

	.xinxis1t {
		margin-top: 23rpx;
	}

	.xinxis1 {
		color: #999999;

	}

	.biaoqian {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.biaoqian1 {
		padding: 19rpx;
		border-radius: 10rpx;
		margin-top: 20rpx;
		background: #E2ECFA;
		color: #0D5DC9;
		margin-right: 20rpx;
	}
	
	.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: 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>