Commit 09e50ec4 authored by Facius's avatar Facius
parents 26629893 010001bb
......@@ -114,7 +114,7 @@
<style lang="scss" scoped>
.con-box {
margin-top: 30rpx;
padding: 30rpx 30rpx 30rpx 20rpx;
padding: 30rpx 30rpx 20rpx;
border-radius: 12rpx;
background-color: #FFFFFF;
......@@ -187,7 +187,7 @@
.time-item {
min-width: 196rpx;
margin-right: 26rpx;
margin-right: 21rpx;
margin-bottom: 24rpx;
border-radius: 12rpx;
padding: 26rpx 20rpx 24rpx;
......
......@@ -29,6 +29,14 @@
"navigationStyle": "custom", // 隐藏系统导航栏
"disableScroll": true
}
},{
"path": "pages/order/refuse",
"style": {
"navigationBarTitleText": "订单-拒单",
"enablePullDownRefresh": false,
"navigationStyle": "custom", // 隐藏系统导航栏
"disableScroll": true
}
},
{
"path": "pages/mine/index",
......
......@@ -66,12 +66,33 @@
<text>接单时间:2021.04.21 16:40:35</text>
</view>
</view>
<view class="card appoint-item">
<appoint-time @dateChange="dateChange" @timeChange="timeChange" @weekChange="weekChange"></appoint-time>
</view>
</view>
<view class="toolbar">
<!-- view用于占位 -->
<view class="left">
<view v-show="allowFeedback" @click="clickFeedback" class="button"></view>
</view>
<view class="center">
<view v-if="centerButton=='appoint'" @click="clickCenterButton" class="button" :class="centerButtonClass">
{{ centerButtonText }}
</view>
</view>
<view class="right">
<view v-show="allowFeedback" @click="clickFeedback" class="button"></view>
</view>
</view>
</view>
</template>
<script>
import appointTime from '@/components/appoint/appoint-time.vue'
export default {
components:{
appointTime
},
data() {
return {
background: {
......@@ -84,7 +105,11 @@
},
orderId: null,
order: {},
allowRejection: false,
allowRejection: false, // 允许拒单
allowFeedback: true, // 允许过程反馈
needPhotograph: true, // 需要现场拍摄
centerButton: 'appoint', // 是否显示按钮
centerButtonText: '预约',
};
},
onLoad(e) {
......@@ -102,6 +127,10 @@
navigationIcon() {
return process.uniEnv.qn_base_url + 'icon/daohang-1@2x.png'
},
centerButtonClass() {
let btnClass = "appoint-btn"
return btnClass
},
},
methods: {
loadOrderDetail() {
......@@ -149,7 +178,31 @@
*/
rejectOrder() {
console.log("点击拒单")
}
},
/**
* 点击下一周
* @param {Object} data
*/
weekChange(data){
console.log(data,'week-data')
},
/**
* 点击日期选择
* @param {Object} data
*/
dateChange(data){
console.log(data,'week-data')
},
/**
* 时间段选择变化
* @param {Object} data
*/
timeChange(data){
console.log(data,'week-data')
},
clickCenterButton() {
},
}
}
</script>
......@@ -276,6 +329,64 @@
}
.record-item {
}
.appoint-item {
padding: 0;
}
}
.toolbar {
margin-bottom: 104rpx;
display: flex;
justify-content: center;
align-items: center;
.left {
width: 100rpx;
height: 100rpx;
.button {
width: 100rpx;
height: 100rpx;
background: #929CB8;
border-radius: 100rpx;
}
}
.center {
width: 140rpx;
height: 140rpx;
margin-left: 74rpx;
margin-right: 74rpx;
.button {
width: 140rpx;
height: 140rpx;
border-radius: 100rpx;
display: flex;
justify-content: center;
align-items: center;
color: #FFFFFF;
font-size: 32rpx;
font-weight: bold;
}
.appoint-btn {
background: #2272FF;
box-shadow: 2px 2px 20px 0px rgba(34, 114, 255, 0.3);
}
.sign-timeout-btn {
background: #FA5A49;
box-shadow: 2px 2px 20px 0px rgba(34, 114, 255, 0.3);
}
.appoint-btn {
background: #2272FF;
box-shadow: 2px 2px 20px 0px rgba(34, 114, 255, 0.3);
}
}
.right {
width: 100rpx;
height: 100rpx;
.button {
width: 100rpx;
height: 100rpx;
background: #12CF84;
border-radius: 100rpx;
}
}
}
}
......
<!-- 过程反馈 -->
<template>
<view class="refuse-box bg">
<u-navbar back-icon-color="#FFFFFF" :background="background" title="拒单" title-color="#fff" :border-bottom="false"></u-navbar>
<view class="title">拒单说明</view>
<view class="content">
<view class="con-box">
<view class="tit u-m-b-40 u-flex"><text class="txt label"></text>{{refuse.title}}</view>
<view class="u-flex u-flex-wrap">
<view :class="{'txt-item':true,'active':true}" v-for="(txt,index) in refuse.list" :key="index">
<text class="txt">{{txt}}</text>
</view>
</view>
</view>
<view class="con-box">
<view class="tit u-m-b-40">补充说明</view>
<u-input class="textarea" height="156" type="textarea" placeholder="请补充详细说明,以便于记录您的接单信用分"></u-input>
</view>
</view>
<view class="u-m-60">
<button class="btn">确定</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
background: {
backgroundColor: 'none',
},
refuse:{
title:'问题归属',
list:['时间不匹配', '技术不匹配', '价格过低', '距离太远', '其他'],
},
};
},
components:{},
methods: {
}
}
</script>
<style lang="scss">
.bg {
width: 750rpx;
height: 100vh;
overflow: auto;
background-color: #F4F5F7;
background-image: linear-gradient(to top, #F4F5F7 0%, #2272FF 100%);
background-size: 750rpx 600rpx;
background-repeat: no-repeat;
}
/deep/ .u-subsection{
padding:4rpx!important;
}
.content{
margin:0 30rpx;
overflow: hidden;
border-radius: 12rpx;
padding-bottom: 60rpx;
background-color: #fff;
}
.con-box{
padding:30rpx 30rpx 30rpx 20rpx;
// border-radius: 12rpx;
background-color: #FFFFFF;
.tit{
font-weight: bold;
font-size: 32rpx;
line-height: 32rpx;
color: #333;
}
&>.u-flex{
// margin-top:40rpx;
margin-right:-20rpx;
.txt-item{
border-radius: 12rpx;
padding:24rpx 38rpx;
min-width: 196rpx;
text-align: center;
margin-right: 20rpx;
margin-bottom: 20rpx;
background-color: #F4F5F7;
&.active{
background-color: #2272FF;
.txt{
color: #fff;
}
}
}
}
.txt{
display:block;
font-size: 26rpx;
line-height: 26rpx;
color: #333;
}
.textarea{
/deep/ .u-input{
textarea{
margin-top:20rpx;
border: 2rpx solid #ECECEC;
padding:18rpx 30rpx;
}
}
}
}
.btn{
padding:30rpx;
border-radius: 52rpx;
line-height: 44rpx;
font-size:32rpx;
text-align: center;
background-color: #2272FF;
color:#fff;
&::after{
content:'';
height:0;
}
}
.width-320{
width:320rpx;
}
.title{
padding:30rpx 30rpx 46rpx;
line-height: 40rpx;
font-size:40rpx;
color:#fff;
}
.label{
display: inline-block;
line-height: 40rpx;
font-size:24rpx;
margin-right: 10rpx;
color:#FA5A49
}
</style>
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