229 lines
7.3 KiB
Vue
229 lines
7.3 KiB
Vue
<template>
|
||
<view class="ctr">
|
||
<view class="fixed-top">
|
||
<me-top title="接单大厅"></me-top>
|
||
</view>
|
||
|
||
<me-empty-space :height="listMarginTop"></me-empty-space>
|
||
<view class="list">
|
||
<view class="item">
|
||
<view class="top flex-sb">
|
||
<view class="type flex-l">日常保洁</view>
|
||
<view class="price flex-r">平台已收款</view>
|
||
</view>
|
||
<view class="content flex-sb">
|
||
<view class="left">
|
||
<view class="address-name flex-l">
|
||
金城花园(天府二街)
|
||
</view>
|
||
<view class="address">
|
||
广东省茂名市茂南区金城路26号大院附近
|
||
</view>
|
||
<view class="time-ctr flex-l">
|
||
<me-icon type="icon-time" color="var(--themeColor)" size="40rpx"></me-icon>
|
||
<text class="time">周日 10月08日 12:30</text>
|
||
</view>
|
||
</view>
|
||
<view class="right">
|
||
<view class="icon-ctr flex-c">
|
||
<me-icon type="icon-navigation" color="var(--descriptionColor)" size="60rpx"></me-icon>
|
||
</view>
|
||
<view class="distance flex-c">8.34公里</view>
|
||
</view>
|
||
</view>
|
||
<view class="btn-ctr flex-sb">
|
||
<me-button @click="" text="确认接单" width="460rpx" icon-type="icon-flashlight"></me-button>
|
||
<me-button @click="" active-color="var(--contentBgColor)" text="拒 绝" width="166rpx" text-color="var(--titleColor)"></me-button>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="item">
|
||
<view class="top flex-sb">
|
||
<view class="type flex-l">日常保洁</view>
|
||
<view class="price flex-r important-color">上门报价</view>
|
||
</view>
|
||
<view class="content flex-sb">
|
||
<view class="left">
|
||
<view class="address-name flex-l">
|
||
金城花园(天府二街)
|
||
</view>
|
||
<view class="address">
|
||
广东省茂名市茂南区金城路26号大院附近
|
||
</view>
|
||
<view class="time-ctr flex-l">
|
||
<me-icon type="icon-time" color="var(--themeColor)" size="40rpx"></me-icon>
|
||
<text class="time">周日 10月08日 12:30</text>
|
||
</view>
|
||
</view>
|
||
<view class="right">
|
||
<view class="icon-ctr flex-c">
|
||
<me-icon type="icon-navigation" color="var(--descriptionColor)" size="60rpx"></me-icon>
|
||
</view>
|
||
<view class="distance flex-c">8.34公里</view>
|
||
</view>
|
||
</view>
|
||
<view class="discount flex-l">已支付订金：30元抵扣50元</view>
|
||
<view class="btn-ctr flex-sb">
|
||
<me-button @click="" text="确认接单" width="460rpx" icon-type="icon-flashlight"></me-button>
|
||
<me-button @click="" active-color="var(--contentBgColor)" text="拒 绝" width="166rpx" text-color="var(--titleColor)"></me-button>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="item">
|
||
<view class="top flex-sb">
|
||
<view class="type flex-l">日常保洁</view>
|
||
<view class="price flex-r important-color">上门报价</view>
|
||
</view>
|
||
<view class="content flex-sb">
|
||
<view class="left">
|
||
<view class="address-name flex-l">
|
||
金城花园(天府二街)
|
||
</view>
|
||
<view class="address">
|
||
广东省茂名市茂南区金城路26号大院附近
|
||
</view>
|
||
<view class="time-ctr flex-l">
|
||
<me-icon type="icon-time" color="var(--themeColor)" size="40rpx"></me-icon>
|
||
<text class="time">周日 10月08日 12:30</text>
|
||
</view>
|
||
</view>
|
||
<view class="right">
|
||
<view class="icon-ctr flex-c">
|
||
<me-icon type="icon-navigation" color="var(--descriptionColor)" size="60rpx"></me-icon>
|
||
</view>
|
||
<view class="distance flex-c">8.34公里</view>
|
||
</view>
|
||
</view>
|
||
<view class="discount flex-l">已支付订金：30元抵扣50元</view>
|
||
<view class="btn-ctr flex-sb">
|
||
<me-button @click="" text="确认接单" width="460rpx" icon-type="icon-flashlight"></me-button>
|
||
<me-button @click="" active-color="var(--contentBgColor)" text="拒 绝" width="166rpx" text-color="var(--titleColor)"></me-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<me-empty-space height="100"></me-empty-space>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {onLoad, onShow} from '@dcloudio/uni-app'
|
||
import {ref, reactive, computed, watch, inject} from 'vue'
|
||
import MeIcon from "../../components/me-icon/me-icon";
|
||
import MeButton from "../../components/me-button/me-button";
|
||
import MeEmptySpace from "../../components/me-empty-space/me-empty-space.vue";
|
||
import MeTop from "../../components/me-top/me-top.vue";
|
||
const data = reactive({
|
||
globalData: {},
|
||
})
|
||
onLoad(() => {
|
||
data.globalData = inject('globalData')
|
||
})
|
||
|
||
const listMarginTop = computed(() => {
|
||
return (data.globalData.statusBarH + (data.globalData.customBarH - data.globalData.statusBarH)) * 2
|
||
})
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.ctr {
|
||
padding: 0 32rpx;
|
||
box-sizing: border-box;
|
||
.fixed-top {
|
||
position: fixed;
|
||
top: 0;
|
||
background-color: var(--pageBgColor);
|
||
width: 100%;
|
||
}
|
||
.list {
|
||
.item {
|
||
width: 100%;
|
||
background: var(--containerBgColor);
|
||
border-radius: 16rpx;
|
||
padding: 20rpx;
|
||
box-sizing: border-box;
|
||
margin-top: 32rpx;
|
||
.top {
|
||
height: 60rpx;
|
||
.type,.price {
|
||
width: 323rpx;
|
||
height: 100%;
|
||
}
|
||
.type {
|
||
font-weight: 500;
|
||
font-size: 34rpx;
|
||
color: var(--titleColor);
|
||
}
|
||
.price {
|
||
font-size: 30rpx;
|
||
color: var(--summaryColor);
|
||
}
|
||
.important-color {
|
||
color: var(--importantColor) !important;
|
||
}
|
||
}
|
||
.content {
|
||
width: 100%;
|
||
.left {
|
||
width: 466rpx;
|
||
.address-name {
|
||
width: 100%;
|
||
min-height: 60rpx;
|
||
font-size: 30rpx;
|
||
color: var(--titleColor);
|
||
line-height: 44rpx;
|
||
}
|
||
.address {
|
||
width: 100%;
|
||
min-height: 60rpx;
|
||
font-size: 28rpx;
|
||
color: var(--summaryColor);
|
||
line-height: 44rpx;
|
||
}
|
||
.time-ctr {
|
||
width: 100%;
|
||
min-height: 80rpx;
|
||
font-size: 28rpx;
|
||
color: var(--themeColor);
|
||
line-height: 44rpx;
|
||
.time {
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
}
|
||
.right {
|
||
width: 180rpx;
|
||
.icon-ctr {
|
||
width: 100%;
|
||
height: 60rpx;
|
||
}
|
||
.distance {
|
||
width: 100%;
|
||
height: 44rpx;
|
||
font-size: 28rpx;
|
||
color: var(--titleColor);
|
||
line-height: 44rpx;
|
||
margin-top: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
.discount {
|
||
width: 100%;
|
||
height: 64rpx;
|
||
background: rgba(230,82,31,0.1);
|
||
border-radius: 16rpx;
|
||
font-size: 28rpx;
|
||
color: var(--importantColor);
|
||
padding: 0 16rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
.btn-ctr {
|
||
width: 100%;
|
||
height: 126rpx;
|
||
box-sizing: border-box;
|
||
margin-top: 10rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|