Skip to content

S
self-support
Commit 2078f707 authored by Facius's avatar Facius
Browse files
Options

详情页面ui修改

parent 3dc6d0d7
Hide whitespace changes
Inline Side-by-side
Showing with 177 additions and 161 deletions
src/components/order/bottomButtons.vue
View file @ 2078f707
<template>
<view class="bottom-button">
<view v-for="(item, index) in buttons" :class="['button-view', item.type]">
<u-button :class="['list-button', item.type]" @click="handleClick(index)"
:hover-class="item.type == 'image' ? 'none' : ''" :custom-style="buttonStyle[item.type]" type="primary"
shape="circle">
<view class="image-view" v-if="item.type == 'image'">
<image :src="baseImageUrl + item.image" class="image-content"></image>
<view v-for="(item, index) in list" :class="['button-view', item.type]">
<u-button :class="['list-button', item.type]" @click="handleClick(item)"
:hover-class="item.type == 'image' || item.disabled ? 'none' : ''"
:custom-style="buttonStyle[item.disabled ? 'disabled' : item.type]" type="primary" shape="circle">
<view class="image-view" v-if="item.type == 'image'">
<image :src="baseImageUrl + item.image" class="image-content"></image>
</view>
<view :class="['text-content', item.type]">{{item.label}}</view>
</u-button>
</u-button>
<view v-if="index == 1"style="width: 6rpx;"></view>
</view>
</view>
</template>
......@@ -22,17 +23,29 @@
return [{
label: '过程反馈',
type: 'image',
image: 'dianhua.png'
image: 'guochengfankui.png',
show: true,
disabled: false,
},
{
label: '异常签到',
type: 'image',
image: 'daohang.png'
image: 'yichangqiandao.png',
show: false,
disabled: false
},
{
label: '现场拍照',
type: 'image',
image: 'xiancahngpaizhao.png',
show: true,
disabled: false,
},
{
label: '接单',
type: 'text',
image: ''
show: true,
disabled: true
}
]
}
......@@ -42,6 +55,11 @@
baseImageUrl() {
return process.uniEnv.qn_base_url
},
list() {
return this.buttons.filter((item) => {
return item.show == true
})
},
buttonStyle() {
return {
'image': {
......@@ -63,12 +81,23 @@
'width': '100%'
},
'disabled': {
'background-color': '#D1D4D4',
'border-color': 'transparent',
'display': 'flex',
'flex-direction': 'column',
'height': '104rpx',
'width': '100%'
},
}
},
},
methods: {
handleClick(index) {
this.$emit('submit', index)
methods: {
// 0 主流程； 1 过程反馈；2 异常签到； 3 现场拍照
handleClick(item) {
if (item.disabled) return
this.$emit('submit', item.id)
}
}
}
......@@ -82,6 +111,8 @@
padding: 0 30rpx 44rpx 30rpx;
.button-view {
max-width: 600rpx;
display: flex;
&.image {}
&.text {
......@@ -92,22 +123,24 @@
display: flex;
flex-direction: column;
max-width: 600rpx;
width: 100%;
&.image {}
&.text {}
.image-view {
flex-shrink: 0;
background-color: #FFFFFF;
border-radius: 38rpx;
width: 76rpx;
height: 76rpx;
.image-content {
width: 76rpx;
height: 76rpx;
}
.image-view {
flex-shrink: 0;
background-color: #FFFFFF;
border-radius: 38rpx;
width: 76rpx;
height: 76rpx;
.image-content {
width: 76rpx;
height: 76rpx;
}
}
.text-content {
&.text {
color: #FFFFFF;
......@@ -125,7 +158,5 @@
}
}
}
}
</style>
src/components/order/index.vue
View file @ 2078f707
......@@ -40,7 +40,7 @@
<view v-if="showCountTime" class="bottom-left-view">
<view :class="['bottom-tag-view', {'timeout': timeout}]"><text>{{tagText}}</text></view>
<u-count-down :timestamp="timestamp" font-size="40" show-days separator="zh"
:color="timeout ? '#FA5A49' : '#FF930D'" @change="handleChange"separator-color="#666666" ref="order-count-down"></u-count-down>
:color="timeout ? '#FA5A49' : '#FF930D'" @change="handleChange" separator-color="#666666" ref="order-count-down"></u-count-down>
</view>
<view v-else-if="showTime">
<text>{{timeTitle}}</text>
......
src/pages/order/detail.vue
View file @ 2078f707
<template>
<view class="order-wrap">
<u-navbar :title="title" title-color="#FFFFFF" title-size="32" back-icon-color="#FFFFFF" :background="background" :border-bottom="false"></u-navbar>
<view class="content">
<view class="header" v-if="order.currentOverTime && showTimeOut">
<view class="header" v-if="order.currentOverTime && showTimeOut">
<view class="tip-text">{{tipText}}</view>
<view class="header-content">
<view class="title">
<view :class="['bottom-tag-view', {'timeout': timeout}]"><text>{{timeout ? '超' : '剩'}}</text></view>
<u-count-down :timestamp="timestampDiff(order.currentOverTime)" font-size="44" show-days separator="zh" separator-size="44"
:color="tipColor" :separator-color="tipColor" @change="timeOutChange(order.currentOverTime)" ref="order-count-down"></u-count-down>
<u-count-down :timestamp="timestamp" font-size="44" show-days separator="zh" separator-size="44"
color="#FFFFFF" separator-color="#FFFFFF" @change="timeOutChange" ref="order-count-down" bg-color="transparent"></u-count-down>
</view>
<u-button v-if="allowRejection || 1" :custom-style="customStyle" size="mini" @click="rejectOrder" shape="circle">拒单</u-button>
<view v-show="allowRejection" class="reject-button" @click="$u.throttle(rejectOrder, 500)">拒单</view>
</view>
</view>
<view class="content">
<view class="card base-item">
<Detail :order="order" :readMore.sync="readMore" :operate="isAllowDianhuaAndDaohang"></Detail>
</view>
......@@ -42,51 +45,7 @@
</view>
<!-- 不是从我的页面进来才显示 -->
<template v-if="!isFromMine">
<BottomButtons :buttons="buttons" @submit="handleSubmit"></BottomButtons>
<view v-if="showCenterBtn" class="toolbar">
<!-- 背景，内容，请求接口 根据状态不同改变 {{operationDoing[order.orderStatus].background}} -->
<!-- 过程反馈 -->
<view class="left">
<view v-if="allowFeedback" @click="clickFeedback" class="button">
<text>反馈</text>
</view>
</view>
<!--接单，抢单，已被抢， 预约 ，签到 ，去完工 timestampDiff(order.currentOverTime)>0 -->
<view class="center">
<view>
<u-toast ref="uToast" />
</view>
<view v-if="showCenterBtn" @click="$u.throttle(handleClickSure, 500)" class="button" :class="['center-button-view', btnClass]">
<text>{{ centerButtonText }}</text>
<view v-if="order.currentOverTime && showTimeOut" class="time-view">
<text style="padding-right: 8rpx;">{{timeOut?'剩':'超'}}</text>
<!-- <u-count-down
:timestamp="timestampDiff(order.currentOverTime)"
font-size="20"
color="#FFFFFF"
bg-color="transparent"
separator-color="#FFFFFF"
separator-size="20"
:ref="'uCountDown'"
show-days
height="20"
:show-days="threeDays()"
:show-minutes="!threeDays()"
:show-seconds="!threeDays()"
:separator="threeDays() ? 'zh' : 'colon'"
@change="timeOutChange(order.currentOverTime)" >
</u-count-down> -->
</view>
</view>
</view>
<!-- 异常预约 ，现场拍照 这里是调用拍照的两个组件-->
<view class="right">
<view v-if="errorSignIn || scenePhoto" @click="$u.throttle(handleClickRight, 500)" :class="['button', {'active': scenePhoto}]">
<text :style="errorSignIn ? 'font-size:24rpx' : ''">{{errorSignIn ? '异常\n签到' : '拍照'}}</text>
</view>
</view>
</view>
<BottomButtons v-if="showCenterBtn" :buttons="buttons" @submit="handleSubmit"></BottomButtons>
<take-photo type="test" v-if="takeStatus" @close="closeTake" :upload="false" :num="1"></take-photo>
<!-- <PopView title="查看交互规范" message="为完善交付质量，请查看对应的交付规范" :visible.sync="visible" @click="handleClick"/> -->
<u-popup border-radius="12" v-model="visible" safe-area-inset-bottom mode="center" width="690rpx"
......@@ -166,7 +125,6 @@
showTimeSelect: false,
submitType: '',
nextUrl:'',
btnClass:'appoint-btn',
takeStatus:false,
errorSignIn:false,
scenePhoto: false,
......@@ -186,21 +144,8 @@
isFromMine: false,
settlementInfo: {formatTime: '-', list: [], amount: ''},
unloaded: false,
buttons: [{
label: '过程反馈',
type: 'image',
image: 'dianhua.png'
},
{
label: '异常签到',
type: 'image',
image: 'daohang.png'
},
{
label: '接单',
type: 'text',
image: ''
}]
timeout: false,
timestamp: 0
}
},
onLoad(option) {
......@@ -235,23 +180,62 @@
this.closeLocationChange()
},
computed: {
centerButtonClass() {
let btnClass = "appoint-btn"
return btnClass
},
timeout() {
return this.order.currentOverTime < new Date().getTime()
},
tipColor() {
return this.timeout ? '#FA5A49' : '#FF930D'
},
customStyle() {
return {
'height': '48rpx',
'width': '100rpx',
'color': '#2272FF'
'color': '#FFFFFF',
'border-color': 'transparent',
'background-color': 'transparent'
}
}
},
tipText() {
switch (this.centerButtonText) {
case '接单':
return this.timeout ? '您的订单已超时，请及时接单' : '请您注意剩余时间，及时接单'
case '预约':
return this.timeout ? '您的订单已超时，请及时预约' : '请您注意剩余时间，及时预约'
case '去完工':
return this.timeout ? '您的订单已超时，请及时完工' : '请您注意剩余时间，及时完工'
default:
return ''
}
},
buttons() {
//id: 0 主流程； 1 过程反馈；2 异常签到； 3 现场拍照
return [{
label: '过程反馈',
type: 'image',
image: 'guochengfankui.png',
show: this.allowFeedback,
disabled: false,
id: 1
},
{
label: '异常签到',
type: 'image',
image: 'yichangqiandao.png',
show: this.errorSignIn,
disabled: false,
id: 2
},
{
label: '现场拍照',
type: 'image',
image: 'xiancahngpaizhao.png',
show: this.scenePhoto,
disabled: false,
id: 3
},
{
label: this.centerButtonText,
type: 'text',
image: '',
show: true,
disabled: this.centerBtnDisabled,
id: 0
}]
}
},
methods: {
updateLocation(){
......@@ -272,7 +256,6 @@
if(this.getDistance(res.latitude,res.longitude)>this.signDistance){
// 计算签到距离
this.btnClass = "isGan-btn"
this.centerBtnDisabled = false
}else{
this.centerBtnDisabled = true
......@@ -325,13 +308,9 @@
if (res.code == 200) {
self.order = res.data
this.getCurrentBtn()
var nowTime = new Date();
if(this.showTimeOut && this.order.currentOverTime && nowTime.getTime() > this.order.currentOverTime){
this.btnClass='timeOut-btn'
}
// if(self.order.isFirstOrder){
// this.visible = true
// }
var nowTime = new Date().getTime();
this.timeout = this.order.currentOverTime && nowTime> this.order.currentOverTime
this.timestamp = Math.round(Math.abs(this.order.currentOverTime - nowTime) / 1000)
// 格式化时间
this.settlementInfo.formatTime = this.order.settleCenterSyncDatetime ? this.$u.timeFormat(this.order.settleCenterSyncDatetime, 'yyyy.mm.dd hh:MM:ss') : '-'
} else {
......@@ -546,8 +525,23 @@
this.handleBtn()
}
},
handleSubmit(index) {
console.log(index)
handleSubmit(id) {
console.log(id)
// 0 主流程； 1 过程反馈；2 异常签到； 3 现场拍照
switch (id) {
case 0:
this.handleClickSure()
break
case 1:
this.clickFeedback()
break
case 2:
this.take()
break
case 3:
this.scenePhotoClick()
break
}
},
handleBtn() {
console.log('click button')
......@@ -660,7 +654,7 @@
isGan(){
this.centerButtonText = "已被抢"
this.submitType = ""
this.btnClass='isGan-btn'
this.centerBtnDisabled = true
},
clickFeedback(){
// 过程反馈
......@@ -745,23 +739,15 @@
Rad(d){
return d * Math.PI / 180.0;//经纬度转换成三角函数中度分表形式。
},
timestampDiff(currentOverTime){ // 计算超时时间
if(!currentOverTime){
return 0
}
return Math.round(Math.abs(this.order.currentOverTime - new Date().getTime()) / 1000);
},
timeOutChange(currentOverTime){
let self = this
var nowTime = new Date(); // 当前时间
if(currentOverTime && nowTime.getTime() > currentOverTime){
if(this.centerBtnDisabled === false && this.submitType === 'maintainWorkerCheckin'){
this.btnClass = "isGan-btn"
}else{
this.btnClass='timeOut-btn'
}
this.$refs['order-count-down'].seconds += 2
}
timeOutChange(timestamp){
if (this.timeout) this.$refs['order-count-down'].seconds += 2
console.log('-----timestamp-----:', timestamp, this.timeout)
if (timestamp == 0 && !this.timeout) { // 超时之后倒计时变为正计时
setTimeout(()=> {
this.timestamp = 1
this.timeout = true
}, 1000)
}
},
// handleClick(){
// this.visible = false
......@@ -774,9 +760,6 @@
this.visible = false
// 添加客服
},
threeDays() {
return this.timestampDiff(this.order.currentOverTime) > 3600 * 24 * 3
}
}
};
</script>
......@@ -794,15 +777,18 @@
flex-direction: column;
.header {
padding: 24rpx 30rpx 24rpx 30rpx;
margin-bottom: 20rpx;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #FFFFFF;
border-radius: 12rpx;
max-height: 100rpx;
padding: 6rpx 30rpx 20rpx 30rpx;
.tip-text {
font-size: 26rpx;
color: #EFEFEF;
}
.header-content {
display: flex;
justify-content: space-between;
align-items: center;
max-height: 100rpx;
margin-top: 24rpx;
}
.title {
display: flex;
align-items: center;
......@@ -810,29 +796,30 @@
width: 52rpx;
height: 52rpx;
border-radius: 26rpx;
color: #FFFFFF;
color: #FF930D;
font-size: 26rpx;
background-color: #FF930D;
background-color: #FFFFFF;
margin-right: 16rpx;
display: flex;
justify-content: center;
align-items: center;
&.timeout {
background-color: #FA5A49;
color: #FA5A49;
}
}
}
.button {
// text-align: center;
// width: 106rpx;
// height: 52rpx;
// border-radius: 40rpx;
// font-size: 24rpx;
// font-weight: 400;
// line-height: 52rpx;
// color: #DEDEDE;
.reject-button {
text-align: center;
width: 106rpx;
height: 52rpx;
border-radius: 40rpx;
font-size: 24rpx;
font-weight: 400;
line-height: 52rpx;
color: #DEDEDE;
text-align: right;
}
}
......@@ -840,9 +827,7 @@
height: 100%;
border-radius: 12rpx;
overflow: auto;
margin-right: 30rpx;
margin-left: 30rpx;
margin-bottom: 30rpx;
margin: 6rpx 30rpx 30rpx 30rpx;
.card {
background-color: #FFFFFF;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment