hant/wanyu_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提交订单

Browse Source
This commit is contained in:
gcd 2025-03-27 17:18:23 +08:00
parent b7f1679ffd
commit 828c962295
10 changed files with 249 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/me-icon/me-icon.css
View File

@ -1,3 +1,6 @@
.icon-upload-cloud-fill:before {
content: "\e90b";
}
.icon-arrow-right:before {
content: "\e90a";
}

BIN
components/me-icon/me-icon.ttf
View File

Binary file not shown.

7
pages.json
View File

@ -38,6 +38,13 @@
{
"navigationBarTitleText" : "工单详情"
}
},
{
"path" : "pages/order/order-submit",
"style" :
{
"navigationBarTitleText" : "提交"
}
}
],
"globalStyle": {

7
pages/order/order-info.vue
View File

@ -49,7 +49,7 @@
<view class="bottom">
<me-button @click="" active-color="var(--contentBgColor)" text="拒 绝" width="686rpx" text-color="var(--titleColor)"></me-button>
<me-button @click="" text="确认接单" width="686rpx" icon-type="icon-flashlight" margin-top="32rpx"></me-button>
<me-button @click="submit()" text="确认接单" width="686rpx" icon-type="icon-flashlight" margin-top="32rpx"></me-button>
</view>
</view>
</template>
@ -59,6 +59,11 @@
import MeIcon from "../../components/me-icon/me-icon.vue";
import MeEmptySpace from "../../components/me-empty-space/me-empty-space.vue";
import MeButton from "../../components/me-button/me-button.vue";
import helpers from "../../utils/helpers";
const submit = () => {
helpers.jumpToPage('order-submit')
}
</script>
<style lang="scss" scoped>

210
pages/order/order-submit.vue Normal file
View File

@ -0,0 +1,210 @@
<template>
<view class="ctr">
<view class="group">
<view class="group-name flex-l line-after">
<me-icon class="icon" type="icon-info" color="#E18F00" size="40rpx"></me-icon>
<text class="text">沟通后请提交信息</text>
</view>
<view class="item time">
<view class="item-row flex-sb">
<view class="title flex-l">上门时间</view>
<uni-datetime-picker type="datetime" :hide-second="true">
<view class="value flex-r">2025年03月22日21:42</view>
</uni-datetime-picker>
</view>
<view class="desc flex-l">点击时间可更改，请确认和客户沟通的上门时间</view>
</view>
</view>
<view class="group">
<view class="group-name flex-l line-after">
<me-icon class="icon" type="icon-info" color="#E18F00" size="40rpx"></me-icon>
<text class="text">服务完成后请提交信息</text>
</view>
<view class="item upload flex-sb">
<view class="left">
<view class="title flex-l">拍照打卡</view>
<view class="desc flex-l">请上传完成图片，留存记录</view>
</view>
<view class="right flex-c">
<view class="up-ctr flex-direction-column" hover-class="auto-mask-layer-radius4" hover-start-time="0" hover-stay-time="50">
<me-icon class="icon" type="icon-upload-cloud-fill" color="var(--summaryColor)" size="36rpx"></me-icon>
<view class="up flex-c">点击上传</view>
</view>
</view>
</view>
</view>
<view class="group">
<view class="group-name flex-l line-after">
<me-icon class="icon" type="icon-info" color="#E18F00" size="40rpx"></me-icon>
<text class="text">提交收款信息</text>
</view>
<view class="item input flex-sb line-after">
<view class="title flex-l">收款金额</view>
<view class="input-ctr">
<input type="digit" class="uni-input" placeholder-class="placeholder-class" placeholder="请输入收款金额"/>
</view>
</view>
<view class="item input flex-sb line-after">
<view class="title flex-l">优惠信息</view>
<view class="uni-input flex-r">30.00元抵扣50.00元</view>
</view>
<view class="item upload flex-sb">
<view class="left">
<view class="title flex-l">收款信息</view>
<view class="desc flex-l">请上传收款成功图片</view>
</view>
<view class="right flex-c">
<view class="up-ctr flex-direction-column" hover-class="auto-mask-layer-radius4" hover-start-time="0" hover-stay-time="50">
<me-icon class="icon" type="icon-upload-cloud-fill" color="var(--summaryColor)" size="36rpx"></me-icon>
<view class="up flex-c">点击上传</view>
</view>
</view>
</view>
</view>
<me-empty-space height="376"></me-empty-space>
<view class="bottom">
<me-button @click="submit()" text="确认上门时间" width="686rpx" icon-type="icon-arrow-right-circle" margin-top="32rpx"></me-button>
</view>
</view>
</template>
<script setup>
import MeIcon from "../../components/me-icon/me-icon.vue";
import MeEmptySpace from "../../components/me-empty-space/me-empty-space.vue";
import MeButton from "../../components/me-button/me-button.vue";
import helpers from "../../utils/helpers";
</script>
<style lang="scss" scoped>
.ctr {
padding: 0 32rpx;
box-sizing: border-box;
height: 100vh;
.group {
width: 100%;
background: var(--containerBgColor);
border-radius: 16rpx;
padding: 20rpx;
box-sizing: border-box;
margin-top: 32rpx;
.group-name {
width: 100%;
height: 80rpx;
position: relative;
.text {
font-size: 30rpx;
color: #E18F00;
margin-left: 8rpx;
}
}
.item {
width: 100%;
}
.time {
.item-row {
width: 100%;
height: 100rpx;
.title {
width: 200rpx;
height: 100rpx;
font-size: 30rpx;
color: var(--titleColor);
}
.value {
width: 446rpx;
height: 100rpx;
font-size: 30rpx;
color: var(--titleColor);
}
}
.desc {
width: 100%;
min-height: 50rpx;
font-size: 28rpx;
color: var(--descriptionColor);
line-height: 48rpx;
}
}
.upload {
.left {
width: 516rpx;
height: 130rpx;
.title {
width: 100%;
height: 80rpx;
font-size: 30rpx;
color: var(--titleColor);
}
.desc {
width: 100%;
height: 50rpx;
font-size: 28rpx;
color: var(--descriptionColor);
}
}
.right {
width: 130rpx;
height: 130rpx;
.up-ctr {
width: 100rpx;
height: 100rpx;
background: var(--contentBgColor);
border-radius: 8rpx;
.up {
width: 100%;
height: 36rpx;
font-size: 20rpx;
color: var(--summaryColor);
}
}
}
}
.input {
width: 100%;
height: 100rpx;
position: relative;
.title {
width: 200rpx;
height: 100rpx;
font-size: 30rpx;
color: var(--titleColor);
}
.input-ctr {
width: 446rpx;
height: 100rpx;
}
.uni-input {
text-align: right;
width: 100%;
height: 100%;
font-size: 30rpx;
color: var(--titleColor);
}
}
}
.bottom {
width: 100%;
padding-top: 20rpx;
padding-bottom: 68rpx;
background: var(--pageBgColor);
box-sizing: border-box;
position: fixed;
bottom: 0;
}
}
</style>

2
theme/theme.scss
View File

@ -10,6 +10,7 @@
--containerBgColor: #FFFFFF; // 内容块背景
--importantColor: #E6521F; // 重要色
--themeColor: #2772F0; // 主题色
--themeColor30: rgba(39, 114, 240, 0.3);//主题色30%
--navbarBgColor: #FFFFFF; // 导航背景
--defaultUserAvatar: url("/static/img/default-user.png") no-repeat center / 100%;
@ -28,6 +29,7 @@
--containerBgColor: #1E1E1E;
--importantColor: #E6521F;
--themeColor: #2772F0;
--themeColor30: rgba(39, 114, 240, 0.3);//主题色30%
--navbarBgColor: #1D1D1D;
--defaultUserAvatar: url("/static/img/default-user-dark.png") no-repeat center / 100%;

12
uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar-item.vue
View File

@ -76,7 +76,7 @@
font-size: 14px;
// font-family: Lato-Bold, Lato;
font-weight: bold;
color: var(--contentColor90);
color: var(--titleColor);
}
.uni-calendar-item__weeks-box-item {
@ -102,7 +102,7 @@
width: 8px;
height: 8px;
border-radius: 8px;
background-color: var(--remindColor);
background-color: var(--importantColor);
}
@ -111,21 +111,21 @@
}
.uni-calendar-item--disable .uni-calendar-item__weeks-box-text-disable {
color: var(--contentColor30);
color: var(--contentBgColor);
}
.uni-calendar-item--today {
position: absolute;
top: 10px;
right: 17%;
background-color: var(--remindColor);
background-color: var(--importantColor);
width:6px;
height: 6px;
border-radius: 50%;
}
.uni-calendar-item--extra {
color: var(--remindColor);
color: var(--importantColor);
opacity: 0.8;
}
@ -160,7 +160,7 @@
.uni-calendar-item--before-checked .uni-calendar-item--checked-text,
.uni-calendar-item--after-checked .uni-calendar-item--checked-text {
color: var(--contentColor90)
color: var(--titleColor)
}
.uni-calendar-item--before-checked-x {

12
uni_modules/uni-datetime-picker/components/uni-datetime-picker/calendar.vue
View File

@ -686,7 +686,7 @@
}
.uni-calendar__content {
background-color: var(--blockBgColor);
background-color: var(--containerBgColor);
}
.uni-calendar__content-mobile {
@ -748,7 +748,7 @@
text-align: center;
width: 100px;
font-size: 15px;
color: var(--contentColor50);
color: var(--summaryColor);
}
.uni-calendar__button-text {
@ -775,10 +775,10 @@
.uni-calendar__header-btn {
width: 9px;
height: 9px;
border-left-color: var(--contentColor50);
border-left-color: var(--summaryColor);
border-left-style: solid;
border-left-width: 1px;
border-top-color: var(--contentColor50);
border-top-color: var(--summaryColor);
border-top-style: solid;
border-top-width: 1px;
}
@ -820,7 +820,7 @@
.uni-calendar__weeks-day-text {
font-size: 12px;
color: var(--contentColor50);
color: var(--summaryColor);
}
.uni-calendar__box {
@ -884,7 +884,7 @@
}
.uni-date-changed--time-date {
color: var(--contentColor50);
color: var(--summaryColor);
line-height: 50px;
/* #ifdef MP-TOUTIAO */
font-size: 16px;

14
uni_modules/uni-datetime-picker/components/uni-datetime-picker/time-picker.vue
View File

@ -14,12 +14,12 @@
<view v-if="visible" id="mask" class="uni-datetime-picker-mask" @click="tiggerTimePicker"></view>
<view v-if="visible" class="uni-datetime-picker-popup" :class="[dateShow && timeShow ? '' : 'fix-nvue-height']"
:style="fixNvueBug">
<view class="uni-title" style="color: var(--contentColor50);">
<view class="uni-title" style="color: var(--summaryColor);">
<text class="uni-datetime-picker-text">{{selectTimeText}}</text>
</view>
<view v-if="dateShow" class="uni-datetime-picker__container-box" style="color: var(--contentColor90)">
<view v-if="dateShow" class="uni-datetime-picker__container-box" style="color: var(--summaryColor)">
<picker-view class="uni-datetime-picker-view" :indicator-style="indicatorStyle" :value="ymd"
@change="bindDateChange" mask-style="background-color: var(--contentColor10)">
@change="bindDateChange" mask-style="background-color: var(--contentBgColor)">
<picker-view-column>
<view class="uni-datetime-picker-item" v-for="(item,index) in years" :key="index">
<text class="uni-datetime-picker-item">{{lessThanTen(item)}}</text>
@ -40,7 +40,7 @@
<text class="uni-datetime-picker-sign sign-left">-</text>
<text class="uni-datetime-picker-sign sign-right">-</text>
</view>
<view v-if="timeShow" class="uni-datetime-picker__container-box" style="color: var(--contentColor90);">
<view v-if="timeShow" class="uni-datetime-picker__container-box" style="color: var(--titleColor);">
<picker-view class="uni-datetime-picker-view" mask-style="background-color: rgba(255, 255, 255, 0.1)" :class="[hideSecond ? 'time-hide-second' : '']"
:indicator-style="indicatorStyle" :value="hms" @change="bindTimeChange">
<picker-view-column>
@ -851,7 +851,7 @@
/* #ifdef APP-NVUE */
width: 330px;
/* #endif */
background-color: var(--blockBgColor);
background-color: var(--containerBgColor);
position: fixed;
top: 50%;
left: 50%;
@ -867,7 +867,7 @@
}
.uni-datetime-picker-time {
color: var(--contentColor50);
color: var(--summaryColor);
}
.uni-datetime-picker-column {
@ -889,7 +889,7 @@
/* #ifndef APP-NVUE */
cursor: pointer;
/* #endif */
color: var(--contentColor90);
color: var(--titleColor);
}

2
utils/helpers.js
View File

@ -17,6 +17,8 @@ class helpers {
'login': '/pages/user/login',
//订单详情
'order-info': '/pages/order/order-info',
//提交订单
'order-submit': '/pages/order/order-submit',
}
url = paths[pathName]