feat: 工作台页面调整
This commit is contained in:
苟川东
parent
e092081993
commit
9fd647f1f5
|
|
@ -1,54 +1,57 @@
|
|||
.icon-arrow-right-circle:before {
|
||||
.icon-progress-2-line:before {
|
||||
content: "\e900";
|
||||
}
|
||||
.icon-arrow-right:before {
|
||||
.icon-money-cny-circle-line:before {
|
||||
content: "\e901";
|
||||
}
|
||||
.icon-arrow-up-line:before {
|
||||
.icon-user:before {
|
||||
content: "\e902";
|
||||
}
|
||||
.icon-call:before {
|
||||
.icon-upload-cloud-fill:before {
|
||||
content: "\e903";
|
||||
}
|
||||
.icon-checkbox-blank-circle:before {
|
||||
.icon-time:before {
|
||||
content: "\e904";
|
||||
}
|
||||
.icon-checkbox-circle:before {
|
||||
.icon-reset-left-line:before {
|
||||
content: "\e905";
|
||||
}
|
||||
.icon-close-circle-fill:before {
|
||||
.icon-reset-left-fill:before {
|
||||
content: "\e906";
|
||||
}
|
||||
.icon-flashlight:before {
|
||||
.icon-navigation:before {
|
||||
content: "\e907";
|
||||
}
|
||||
.icon-info:before {
|
||||
.icon-logout:before {
|
||||
content: "\e908";
|
||||
}
|
||||
.icon-logout:before {
|
||||
.icon-info:before {
|
||||
content: "\e909";
|
||||
}
|
||||
.icon-navigation:before {
|
||||
.icon-flashlight:before {
|
||||
content: "\e90a";
|
||||
}
|
||||
.icon-progress-2-line:before {
|
||||
.icon-edit-line:before {
|
||||
content: "\e90b";
|
||||
}
|
||||
.icon-reset-left-fill:before {
|
||||
.icon-close-circle-fill:before {
|
||||
content: "\e90c";
|
||||
}
|
||||
.icon-reset-left-line:before {
|
||||
.icon-checkbox-circle:before {
|
||||
content: "\e90d";
|
||||
}
|
||||
.icon-time:before {
|
||||
.icon-checkbox-blank-circle:before {
|
||||
content: "\e90e";
|
||||
}
|
||||
.icon-upload-cloud-fill:before {
|
||||
.icon-call:before {
|
||||
content: "\e90f";
|
||||
}
|
||||
.icon-user:before {
|
||||
.icon-arrow-up-line:before {
|
||||
content: "\e910";
|
||||
}
|
||||
.icon-edit-line:before {
|
||||
.icon-arrow-right:before {
|
||||
content: "\e911";
|
||||
}
|
||||
.icon-arrow-right-circle:before {
|
||||
content: "\e912";
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -17,26 +17,22 @@
|
|||
<me-empty-space :height="listMarginTop"></me-empty-space>
|
||||
|
||||
<view class="list" :style="{ transform: data.type === 'need_visit' ? 'translateY(100rpx)' : 'translateY(0)' }" v-if="data.list.length > 0">
|
||||
<view class="order-item" v-for="(item, index) in data.list" :key="index">
|
||||
<view class="top flex-sb" @click="toDetail(item.id)">
|
||||
<view class="type flex-l">{{item.order_info.item_title}}</view>
|
||||
<view class="price flex-r important-color" v-if="item.order_info.receive_type === 1">上门报价</view>
|
||||
<view class="price flex-r" v-else>平台已收款</view>
|
||||
</view>
|
||||
<view class="content flex-sb">
|
||||
<view class="left" @click="toDetail(item.id)">
|
||||
<view class="address-name flex-l" v-if="item.order_info.address !== ''">
|
||||
{{item.order_info.address}}
|
||||
</view>
|
||||
<view class="address flex-l">
|
||||
{{helpers.removeCommas(item.order_info.area.merge_name)}}
|
||||
</view>
|
||||
<view class="time-ctr flex-l" v-if="item.order_info.plan_time !== null">
|
||||
<me-icon type="icon-time" color="var(--themeColor)" size="40rpx"></me-icon>
|
||||
<text class="time">{{helpers.formatDate(item.plan_time)}}</text>
|
||||
</view>
|
||||
<view class="item" v-for="(item, index) in data.list" :key="index" @click="toDetail(item.id)">
|
||||
<view class="top flex-sb">
|
||||
<view class="time flex-l">
|
||||
<me-icon type="icon-time" color="var(--themeColor)" size="44rpx"></me-icon>
|
||||
<text class="time-text" v-if="item.order_info.plan_time !== null">{{helpers.formatDate(item.plan_time)}}</text>
|
||||
<text class="time-text" v-else>未预约时间</text>
|
||||
</view>
|
||||
<view class="right" @click="helpers.openLocation(item.order_info.lat, item.order_info.lng)">
|
||||
<view class="status flex-r">{{getOrderStatusText(item.status)}}</view>
|
||||
</view>
|
||||
<view class="title flex-l">{{item.order_info.item_title}}</view>
|
||||
<view class="address-ctr flex-sb">
|
||||
<view class="left">
|
||||
<view class="detail flex-l" v-if="item.order_info.address !== ''">{{item.order_info.address}}</view>
|
||||
<view class="area flex-l">{{helpers.removeCommas(item.order_info.area.merge_name)}}</view>
|
||||
</view>
|
||||
<view class="right" @click.stop="helpers.openLocation(item.order_info.lat, item.order_info.lng)">
|
||||
<view class="icon-ctr flex-c">
|
||||
<me-icon type="icon-navigation" color="var(--descriptionColor)" size="60rpx"></me-icon>
|
||||
</view>
|
||||
|
|
@ -44,30 +40,22 @@
|
|||
<view class="distance flex-c" v-else>{{formatDistance(item.order_info.lat, item.order_info.lng)}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="user flex-sb">
|
||||
<view class="left" @click="toDetail(item.id)">
|
||||
<view class="user-name flex-l">
|
||||
<me-icon type="icon-user" color="var(--descriptionColor)" size="36rpx"></me-icon>
|
||||
<view class="name">{{ item.order_info.customer }}</view>
|
||||
</view>
|
||||
<view class="phone flex-l">{{ item.order_info.tel }}</view>
|
||||
</view>
|
||||
<view class="right flex-c">
|
||||
<view @click="helpers.makePhoneCall(item.order_info.tel)" class="icon-ctr flex-c" hover-class="auto-mask-layer-radius8" hover-stay-time="100">
|
||||
<me-icon type="icon-call" color="var(--themeColor)" size="80rpx"></me-icon>
|
||||
</view>
|
||||
<view class="user-ctr flex-sb">
|
||||
<view class="user-name flex-l">
|
||||
<me-icon type="icon-user" color="var(--descriptionColor)" size="36rpx"></me-icon>
|
||||
<view class="name flex-l">{{ item.order_info.customer }}</view>
|
||||
</view>
|
||||
<view class="phone flex-r">{{ item.order_info.tel }}</view>
|
||||
</view>
|
||||
<view class="operate-ctr flex-sb">
|
||||
<view class="status-ctr flex-l" @click="toDetail(item.id)">
|
||||
<me-icon type="icon-progress-2-line" color="#E18F00" size="40rpx"></me-icon>
|
||||
<text class="text">{{getOrderStatusText(item.status)}}</text>
|
||||
<view class="left flex-l">
|
||||
<me-icon type="icon-money-cny-circle-line" color="var(--summaryColor)" size="44rpx"></me-icon>
|
||||
<view class="name flex-l" v-if="item.order_info.receive_type === 1">上门报价</view>
|
||||
<view class="name flex-l" v-else>平台已收款</view>
|
||||
</view>
|
||||
<view class="operate flex-r">
|
||||
<view class="btn flex-c" @click="reportOrderException(item.order_info.id)" hover-class="auto-mask-layer-radius8" hover-start-time="0" hover-stay-time="50">
|
||||
<me-icon type="icon-arrow-up-line" color="#FFFFFF" size="40rpx"></me-icon>
|
||||
<text>上报异常</text>
|
||||
</view>
|
||||
<view class="right flex-r" @click.stop="helpers.makePhoneCall(item.order_info.tel)">
|
||||
<me-icon type="icon-call" color="var(--themeColor)" size="44rpx"></me-icon>
|
||||
<view class="name flex-l">联系客户</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
|
@ -158,7 +146,7 @@ const countWorkbenchOrder = () => {
|
|||
}
|
||||
|
||||
const countOrderByType = (type) => {
|
||||
if (Object.keys(countOrder.value).length === 0) {
|
||||
if (Object.keys(countOrder.value).length === 0 || countOrder.value[type] === 0) {
|
||||
return ''
|
||||
}
|
||||
|
||||
|
|
@ -267,9 +255,120 @@ const filterNeedVisit = (type) => {
|
|||
box-sizing: border-box;
|
||||
.list {
|
||||
transition: transform 0.3s ease;
|
||||
.order-item:first-child {
|
||||
.item:first-child {
|
||||
margin-top: 0!important;
|
||||
}
|
||||
.item {
|
||||
width: 686rpx;
|
||||
background: var(--containerBgColor);
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
margin-top: 20rpx;
|
||||
.top {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
.time {
|
||||
width: 456rpx;
|
||||
height: 80rpx;
|
||||
.time-text {
|
||||
font-weight: 500;
|
||||
font-size: 34rpx;
|
||||
color: var(--themeColor);
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
.status {
|
||||
width: 190rpx;
|
||||
height: 80rpx;
|
||||
font-weight: 500;
|
||||
font-size: 34rpx;
|
||||
color: #E18F00;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
width: 100%;
|
||||
min-height: 60rpx;
|
||||
line-height: 48rpx;
|
||||
font-weight: 500;
|
||||
font-size: 30rpx;
|
||||
color: var(--titleColor);
|
||||
}
|
||||
.address-ctr {
|
||||
width: 100%;
|
||||
.left {
|
||||
width: 466rpx;
|
||||
.detail, .area {
|
||||
width: 100%;
|
||||
min-height: 60rpx;
|
||||
line-height: 44rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.detail {
|
||||
color: var(--titleColor);
|
||||
}
|
||||
.area {
|
||||
color: var(--summaryColor);
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 180rpx;
|
||||
.icon-ctr {
|
||||
height: 60rpx;
|
||||
width: 100%
|
||||
}
|
||||
.distance {
|
||||
width: 100%;
|
||||
min-height: 44rpx;
|
||||
line-height: 44rpx;
|
||||
font-size: 28rpx;
|
||||
color: var(--titleColor);
|
||||
margin-top: 16rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-ctr {
|
||||
width: 646rpx;
|
||||
height: 90rpx;
|
||||
background: var(--auxiliaryBgColor);
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx;
|
||||
box-sizing: border-box;
|
||||
margin-top: 10rpx;
|
||||
.user-name {
|
||||
width: 50%;
|
||||
.name, {
|
||||
font-size: 28rpx;
|
||||
color: var(--titleColor);
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
.phone {
|
||||
width: 50%;
|
||||
font-size: 28rpx;
|
||||
color: var(--titleColor);
|
||||
}
|
||||
}
|
||||
.operate-ctr {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
margin-top: 20rpx;
|
||||
.left, .right {
|
||||
width: 50%;
|
||||
font-weight: 500;
|
||||
font-size: 30rpx;
|
||||
.name {
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
.left {
|
||||
color: var(--summaryColor);
|
||||
}
|
||||
.right {
|
||||
color: var(--themeColor);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.fixed-top {
|
||||
position: fixed;
|
||||
|
|
|
|||
1
svg_icons/money-cny-circle-line.svg
Normal file
1
svg_icons/money-cny-circle-line.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1" width="22" height="22" viewBox="0 0 22 22"><defs><clipPath id="master_svg0_3992_4344"><rect x="0" y="0" width="22" height="22" rx="0"/></clipPath></defs><g clip-path="url(#master_svg0_3992_4344)"><g><path d="M11.0044585546875,20.168993359375C5.9418285546875,20.168993359375,1.8377685546875,16.064993359375002,1.8377685546875,11.002313359375C1.8377685546875,5.939743359375,5.9418285546875,1.835693359375,11.0044585546875,1.835693359375C16.067068554687502,1.835693359375,20.1711685546875,5.939743359375,20.1711685546875,11.002313359375C20.1711685546875,16.064993359375002,16.067068554687502,20.168993359375,11.0044585546875,20.168993359375ZM11.0044585546875,18.335693359375C15.0545685546875,18.335693359375,18.3377685546875,15.052393359375,18.3377685546875,11.002313359375C18.3377685546875,6.952273359375,15.0545685546875,3.669023359375,11.0044585546875,3.669023359375C6.9543485546875,3.669023359375,3.6710985546875,6.952273359375,3.6710985546875,11.002313359375C3.6710985546875,15.052393359375,6.9543485546875,18.335693359375,11.0044585546875,18.335693359375ZM11.9211685546875,11.918993359375L14.6711685546875,11.918993359375L14.6711685546875,13.752293359375L11.9211685546875,13.752293359375L11.9211685546875,15.585693359375L10.0877885546875,15.585693359375L10.0877885546875,13.752293359375L7.3377685546875,13.752293359375L7.3377685546875,11.918993359375L10.0877885546875,11.918993359375L10.0877885546875,11.002313359375L7.3377685546875,11.002313359375L7.3377685546875,9.168983359375L9.708108554687499,9.168983359375L7.7635285546875,7.224483359375L9.0598885546875,5.928113359375L11.0044585546875,7.872653359375L12.9489685546875,5.928113359375L14.2453685546875,7.224483359375L12.3007685546875,9.168983359375L14.6711685546875,9.168983359375L14.6711685546875,11.002313359375L11.9211685546875,11.002313359375L11.9211685546875,11.918993359375Z" fill="#000000" fill-opacity="0.5"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 2.0 KiB |
Loading…
Reference in New Issue
Block a user