Skip to content

S
self-support
Commit bad4185a authored by Damon's avatar Damon
Browse files
Options

完工页面-拆分调节

parent 0cd5cb61
Show whitespace changes
Inline Side-by-side
Showing with 283 additions and 228 deletions
src/components/complete-check/complete-check.vue
View file @ bad4185a
......@@ -9,6 +9,7 @@
mode="center"
width="690rpx">
<view class="slot-content">
<view v-if="confirmButtonText !== '确定'">
<view class="check-status">
<u-image width="224rpx" height="224rpx" :src="statusImage"></u-image>
<text :class="['status-txt', { 'pass-color': pass }]">{{statusTxt}}</text>
......@@ -21,7 +22,7 @@
</view>
<view class="u-flex u-row-between list-item"
v-for="(item, index) in listData" :key="index">
<view class="item-txt left-txt" style="width: 160rpx;text-align: left;">
<view class="item-txt left-txt" style="width: 200rpx;text-align: left;">
<u-icon
:name="item.pass ? passIcon : noPassIcon"
:label="item.label"
......@@ -38,9 +39,19 @@
</view>
</view>
</view>
</view>
<view v-else>
<view class="check-status">
<text class='status-txt' style="color: #333;">确认安装结果</text>
</view>
<view class="u-flex no-install">
<text class="tips">提交信息，确认安装结论为不安装</text>
</view>
</view>
<view class="check-bottom">
<view class="button cancel" v-show="!pass" @tap="cancel">取消</view>
<view class="button confirm" @tap="confirm">{{confirmText}}</view>
<view class="button cancel" v-show="cancelButtonText !== ''" @tap="cancel">{{ cancelButtonText }}</view>
<view class="button confirm" @tap="confirm">{{ confirmButtonText }}</view>
</view>
</view>
</u-popup>
......@@ -79,6 +90,14 @@
{label: '安装信息', submitted: 15, required: 20, pass: false}
]
}
},
confirmButtonText: {
type: String,
default: '确定'
},
cancelButtonText: {
type: String,
default: ''
}
},
data() {
......@@ -104,9 +123,6 @@
statusTxt() {
return this.pass ? "完工校验已通过" : "完工校验未通过"
},
confirmText() {
return this.pass ? "确定" : "去处理"
},
passIcon() { return process.uniEnv.qn_base_url + 'icon/pass.png'},
noPassIcon() { return process.uniEnv.qn_base_url + 'icon/no-pass.png'},
},
......@@ -115,14 +131,7 @@
this.$emit('close')
},
confirm() {
if(this.pass) {
this.$emit('change')
} else {
let data = this.listData.find((item, index) => {
return item.pass == false;
})
this.$emit('handle', data)
}
this.$emit('confirm')
}
},
......@@ -161,6 +170,15 @@
margin-bottom: 40rpx;
}
}
.no-install {
justify-content: center;
align-items: center;
height: 200rpx;
border-top: 2rpx solid #F4F5F7;
.tips {
font-size: 28rpx;
}
}
.check-bottom {
display: flex;
justify-content: center;
......@@ -194,7 +212,7 @@
line-height: 32rpx;
}
.left-txt {
width: 160rpx;
width: 200rpx;
text-align: left;
}
.right-txt {
......
src/components/createCom/XhInput.vue
View file @ bad4185a
......@@ -3,6 +3,9 @@
<view :style="{'width': fieldsWidth}">
<u-input :type="type" class="input-item" v-model="dataValue" @input="valueChange" :placeholder="placeholder" :placeholder-style="placeholderStyle"
:custom-style="customStyle" :clearable="false" :border="border" border-color="#ECECEC" :maxlength="maxlength" :cursor-spacing="10" hold-keyboard/>
<view class="content" v-if="slotContent">
<text class="txt">{{ slotContent }}</text>
</view>
</view>
</template>
......@@ -26,6 +29,10 @@
type: {
type: String,
default: 'text'
},
slotContent: {
type: String,
default: ''
}
// width: { // 例如：454rpx
// type: String,
......@@ -97,8 +104,16 @@
}
</script>
<style scoped>
<style lang="scss" scoped>
.input-item{
background: #F4F5F7;
}
.content {
padding-top: 20rpx;
line-height: 45rpx;
.txt {
font-size: 24rpx;
color: #999;
}
}
</style>
src/pages/order/complete.vue
View file @ bad4185a
<template>
<view class="pg-complete">
<complete-check :show="completeCheckStatus" :list-data="completeCheckResult" :pass="pass" @close="closeCheckResult" @handle="handerProgrom" @change="confirm"></complete-check>
<complete-check :show="completeCheck.status" :list-data="completeCheck.result" :pass="pass" @close="closeCheckResult" @confirm="confirm" :confirm-button-text="completeCheck.confirmText" :cancel-button-text="completeCheck.cancelText"></complete-check>
<view class="com-content">
<u-navbar :background="{background: '#2272FF'}" back-icon-color="#fff" :title-size="32" title-color="#fff" :border-bottom="false" title="完工信息" title-bold></u-navbar>
<u-navbar :background="{background: '#2272FF'}" back-icon-color="#fff" :title-size="32" title-color="#fff" :border-bottom="false" :title="list[tabIndex].panelName" title-bold></u-navbar>
<u-tabs class="order-tabs" ref="tabs" :current="current" name="panelName" :list="tabList" @change="swichMenu" bg-color="#2272FF" inactive-color="#a6c6ff" active-color="#fff" height="80" font-size="32"></u-tabs>
<view class="u-menu-wrap">
<!-- <scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop" v-if="list[tabIndex].items.length > 1 && showTab">
<view v-for="(item,index) in list[tabIndex].items" :key="index" class="u-tab-item"
:class="[current == index ? 'u-tab-item-active' : '']" @tap.stop="swichMenu(index)">
<text class="u-line-1">{{item.name}}</text>
</view>
</scroll-view> -->
<scroll-view :scroll-top="scrollRightTop" style="height: 100%;" scroll-y scroll-with-animation class="right-box" @scroll="rightScroll" :scroll-into-view="itemId">
<u-form :model="form" ref="uForm">
<template v-for="(groupItem, groupIndex) in (list.length>0?list[tabIndex].items:[])">
<view class="class-item" :key="groupIndex">
<view class="title" v-if="groupItem.name !== '基本信息'">{{groupItem.name}}</view>
<view class="class-item" :id="'item' + groupIndex" :key="groupIndex">
<view class="title">{{groupItem.name}}</view>
<view class="class-bd">
<u-form-item v-for="(item,itemIndex) in groupItem.items" :key="itemIndex" label-position="top"
:prop="item.fieldsName" :border-bottom="false" v-show="item.fieldsId != 200 || show200" :id="`item${item.fieldsId}`">
<view :class="[{'label-bold': groupItem.name === '基本信息'}, 'label']" v-if="item.formType!=='location'&&item.formType!=='form'&&item.formType!=='label'">
<view class="label" v-if="item.formType!=='location'&&item.formType!=='form'&&item.formType!=='label'">
<image class="item-image" :src="mixingImage" v-if="item.required"></image>
{{item.fieldsTitle}}
</view>
......@@ -64,10 +58,6 @@
:groupIndex="groupIndex" :itemIndex="itemIndex" :item="item" :value='form[item.fieldsName] || ""'
@value-change="fieldValueChange">
</xh-scan>
<xh-picker v-else-if="item.formType==='picker'"
:groupIndex="groupIndex" :itemIndex="itemIndex" :item="item" :value='form[item.fieldsName] || ""'
@value-change="fieldValueChange">
</xh-picker>
<xh-service-measure v-else-if="item.formType==='servicemeasure'"
:groupIndex="groupIndex" :itemIndex="itemIndex" :item="item" :orderId="orderId" :categoryId="categoryId"
:orderServiceType="orderServiceType" :specificationId="form['specificationId'] || 0" :value="form[item.fieldsName]"
......@@ -97,13 +87,9 @@
type="primary" shape="circle" :custom-style="customStyle" :hover-class="submitStatus ? '' : 'none'">
暂存
</u-button>
<u-button class="btn-submit" @click="orderFinish" v-if="tabIndex===list.length - 1"
type="primary" shape="circle" :custom-style="buttonStyle" :hover-class="submitStatus ? '' : 'none'">
完工
</u-button>
<u-button class="btn-submit" @click="nextStep" :custom-style="buttonStyle" v-else
<u-button class="btn-submit" @click="nextStep" :custom-style="buttonStyle"
type="primary" shape="circle" :hover-class="submitStatus ? '' : 'none'">
下一步
{{ tabIndex === list.length - 1 ? '提交' : '下一步' }}
</u-button>
</view>
</view>
......@@ -121,7 +107,6 @@
import XhFiles from '@/components/createCom/XhFiles.vue'
import XhLocation from '@/components/createCom/XhLocation.vue'
import XhScan from '@/components/createCom/XhScan.vue'
import XhPicker from '@/components/createCom/XhPicker.vue'
import XhTime from '@/components/createCom/XhTime.vue'
import XhServiceMeasure from '@/components/createCom/XhServiceMeasure.vue'
import XhServiceMore from "../../components/createCom/XhServiceMore"
......@@ -130,6 +115,67 @@
import baseFile from '@/components/upload/index'
import Detail from "@/components/order/detail.vue"
// import XhRadio from '@/components/createCom/XhRadio.vue'
/**
* modal 弹窗校验
* @description 用于校验下一步的动作
* @property {String} name 当前的订单阶段
* @property {Boolean} pass 是否通过校验
* @property {String}} type 是否有二次勘测或二次安装
* @property {submit} submit 提交或下一步
*/
const actions = (name, pass, type, submit) => {
const handerProgrom = {
perfect: {
confirmText: '去完善',
action: 'handerProgrom'
},
appointment: {
confirmText: '好的，再次预约',
action: 'appointment'
},
next: {
confirmText: '下一步',
action: 'nextAction'
},
noPerfectSubmit: {
confirmText: '去完善',
action: 'handerProgrom',
cancelText: '直接提交',
cancelAction: 'appointment'
},
submit: {
confirmText: '提交',
action: 'orderFinish',
},
confirm: {
confirmText: '确定',
action: 'nextAction',
}
}
if (name === '勘察信息') { // 勘察
if (!pass) return handerProgrom.perfect
return type === '01' ? handerProgrom.next : handerProgrom.appointment
} else if (name === '安装信息') { // 安装
let hander = ''
switch (type){
case '01': // 安装完成
hander = !pass ? handerProgrom.perfect : handerProgrom.next
break;
case '02': // 二次安装
hander = !pass ? handerProgrom.noPerfectSubmit : handerProgrom.appointment
break;
case '03': //不安装
hander = handerProgrom.confirm
break;
}
return hander
} else { // 基础信息
if (!pass) return handerProgrom.perfect
return submit ? handerProgrom.submit : handerProgrom.next
}
}
export default {
data() {
return {
......@@ -143,7 +189,7 @@
tabIndex: 0,
scrollTop: 0, //tab标题的滚动条位置
oldScrollTop: 0,
current: 0, // 预设当前项的值
current: null, // 预设当前项的值
menuHeight: 0, // 左边菜单的高度
menuItemHeight: 0, // 左边菜单item的高度
itemId: '', // 栏目右边scroll-view用于滚动的id
......@@ -155,8 +201,14 @@
form: { // 一维表单
},
submitBtnStatus: false,
completeCheckStatus: false,
completeCheckResult: [],
completeCheck: {
status: false,
resulut: [],
confirmText: '去完善',
cancelText: '',
action: '',
cancelAction: ''
},
waitHandlerPanelIndex: 0,
waitHandlerGroupIndex: 0,
waitHandlerEleIndex: 0,
......@@ -186,7 +238,6 @@
XhFiles,
XhLocation,
XhScan,
XhPicker,
XhTime,
XhServiceMeasure,
XhServiceMore,
......@@ -203,9 +254,6 @@
if (option) {
if (option.pageIndex) {
this.tabIndex = option.pageIndex
uni.setNavigationBarTitle({
title: this.title
});
}
this.orderId = option.orderId
this.categoryId = option.categoryId
......@@ -223,20 +271,10 @@
}
this.getCompleteData()
},
onReady() {
// 导航栏滚动切换
this.getMenuItemTop()
},
updated() {
//console.log(this.form.name, 'form.name')
},
computed: {
pageTitles() {
return ['勘察信息', '完工信息', '基本信息']
},
title() {
return this.pageTitles[this.tabIndex]
},
tabList() { // 没有数据的时候tab要有占位数据，不然有页面有晃动
return this.list.length > 0 ? this.list[this.tabIndex].items : [{name:''}]
},
......@@ -348,11 +386,6 @@
formType = 'scan'
inputType = 'text'
break
case 'picker':
case 'mutipicker':
formType = 'picker'
inputType = 'text'
break
case 'service_measures':
formType = 'servicemeasure'
inputType = 'text'
......@@ -379,9 +412,12 @@
}
}
}
this.list = res.data.config
let list = res.data.config
this.list = list.length > 1 ? [list[1], list[2], list[0]] : list
// this.showTab = this.list.length > 1
this.form = res.data.value || {}
this.current = 0
// 异常单处理
if (this.auditResultsId) this.checkCompleteError()
},
......@@ -439,80 +475,145 @@
})
},
checkCompleteItem(){
let self = this
let checkResult = []
let pass = true
let first = true
self.list.forEach((panel, panelIndex)=>{
let panelResult = {label: panel.panelName, submitted: 0, required: 0, pass: true}
panel.items.forEach((group, groupIndex) =>{
const lists = this.tabList
lists.forEach((group, groupIndex) =>{
const checkRequired = group.items.some(v => v.required)
if (checkRequired) {
let panelResult = {label: group.name, submitted: 0, required: 0, pass: true}
group.items.forEach((ele, eleIndex)=>{
if(ele.required){
panelResult.required++
let value = self.form[ele.fieldsName]
let value = this.form[ele.fieldsName]
if(value&&!Array.isArray(value)){
panelResult.submitted++
}else if(value&&Array.isArray(value)&&value.length > 0){
panelResult.submitted++
}else if(first){// 记录第一个 为空 并且需要必填的项 用于定位
first = false
self.waitHandlerPanelIndex = panelIndex
self.waitHandlerGroupIndex = groupIndex
self.waitHandlerEleIndex = eleIndex
self.oldItemId = `item${ele.fieldsId}`
this.waitHandlerPanelIndex = this.tabIndex
this.waitHandlerGroupIndex = groupIndex
this.waitHandlerEleIndex = eleIndex
this.oldItemId = `item${ele.fieldsId}`
}
}
})
})
panelResult.pass = panelResult.required <= panelResult.submitted
pass = pass&&panelResult.pass
checkResult.push(panelResult)
}
})
console.log(checkResult)
self.completeCheckResult = checkResult
this.completeCheck.result = checkResult
return pass
},
confirm(){// 检查结果窗口 确认回调
// 检查结果窗口取消回调
closeCheckResult(){
this.completeCheck.status = false
this[this.completeCheck.cancelAction]()
},
// 检查结果窗口 确认回调
confirm(){
this.completeCheck.status = false
this[this.completeCheck.action]()
},
// 去完善
handerProgrom(){
this.locationCompleteItem(this.waitHandlerPanelIndex,this.waitHandlerGroupIndex,this.waitHandlerEleIndex)
},
// 去预约
appointment() {
uni.reLaunch({
url: '/pages/index/order?type=3'
url: `/pages/order/detail?id=${this.orderId}`
})
},
// 下一步
nextAction() {
if (this.tabIndex < this.list.length - 1) {
this.tabIndex++
this.arr = []
this.scrollRightTop = 0
this.current = 0
const itemId = this.list[this.tabIndex].items[0].items[0].fieldsId
this.oldItemId = `item${itemId}`
this.$nextTick(async () => {
if (this.oldItemId) this.itemId = this.oldItemId
this.oldItemId = ''
})
}
},
closeCheckResult(){// 检查结果窗口取消回调
this.completeCheckStatus = false
nextStep() {
this.pass = this.checkCompleteItem()
const name = this.list[this.tabIndex].panelName
const type = name === '勘察信息' ? this.form.inspectConclusionType : this.form.constructionConclusionType
const submit = this.tabIndex === this.list.length - 1
const result = actions(name, this.pass, type, submit)
console.log("result", result)
this.completeCheck.status = true
this.completeCheck.confirmText = result.confirmText
this.completeCheck.action = result.action
if (result.cancelText) {
this.completeCheck.cancelText = result.cancelText
this.completeCheck.cancelAction = result.cancelAction
}
},
handerProgrom(){// 检查结果窗口 去处理回调 定位到缺失的项
this.completeCheckStatus = false
this.locationCompleteItem(this.waitHandlerPanelIndex,this.waitHandlerGroupIndex,this.waitHandlerEleIndex)
tabsChange(index){
this.tabIndex = index
this.arr = []
this.scrollRightTop = 0;
this.current = 0;
this.$nextTick(function() {
if (this.oldItemId)this.itemId = this.oldItemId
this.getMenuItemTop()
})
},
locationCompleteItem(panelIndex,groupIndex,eleIndex){ // 页面定位到某一项
this.getMenuItemTop()
this.tabIndex = panelIndex
this.arr = []
this.scrollRightTop = 0;
this.current = 0;
this.current = groupIndex;
this.$nextTick(function() {
this.swichMenu(groupIndex)
})
},
// 提交订单
orderFinish(){
let self = this
let pass = this.checkCompleteItem()
if(!pass){
self.completeCheckStatus = true
}else{// 先保存完工项
let param = self.handleSaveData()
self.$u.api.saveCompleteData(param,self.orderId).then((res)=>{
const param = this.handleSaveData()
this.$u.api.saveCompleteData(param,this.orderId).then((res)=>{
if (res.code == 200) {//完工项信息保存成功再次完工工单
console.log("完工");
this.pass = pass
if(self.inGuaranteePeriod === 'Y'){
self.$u.api.inOrderFinish(self.orderId).then((res)=>{
console.log(res)
self.completeCheckStatus = true
if(this.inGuaranteePeriod === 'Y'){
this.$u.api.inOrderFinish(this.orderId).then((res)=>{
if (res.code == 200) {
this.$refs.uToast.show({
title: '提交成功',
type: 'success',
callback: () => {
uni.reLaunch({
url: '/pages/index/order?type=3'
})
}
})
}
})
}else{
self.$u.api.outOrderFinish({customerPayType:'CASH'}, self.orderId).then((res)=>{
console.log(res)
self.completeCheckStatus = true
this.$u.api.outOrderFinish({customerPayType:'CASH'}, this.orderId).then((res)=>{
if (res.code == 200) {
this.$refs.uToast.show({
title: '提交成功',
type: 'success',
callback: () => {
uni.reLaunch({
url: '/pages/index/order?type=3'
})
}
})
}
})
}
} else {
......@@ -522,7 +623,6 @@
})
}
})
}
},
calMaterialCraftListAmount(arr){
let amount = 0
......@@ -563,42 +663,12 @@
}else{
this.$set(this.form,innerItem.fieldsName,data.value)
}
if (innerItem.fieldsId == 199) { // 选不需要收款的时候，收款金额修改为非必选
for (var list of this.list) { // 同时修改基本信息和完工信息
for (var item of list.items) {
for (var i of item.items) {
if (i.fieldsId == 200) {
i.required = data.value !='03'
}
}
}
}
}
},
nextStep() {
if (this.tabIndex < this.list.length - 1) {
this.tabIndex++
this.arr = []
this.scrollRightTop = 0
this.current = 0
this.leftMenuStatus(0)
const itemId = this.list[this.tabIndex].items[0].items[0].fieldsId
this.oldItemId = `item${itemId}`
this.$nextTick(async () => {
if (this.oldItemId) this.itemId = this.oldItemId
})
const row = groupItem.items.find(v => v.fieldsId === 200)
row.required = data.value !='03'
}
},
tabsChange(index){
this.tabIndex = index
this.arr = []
this.scrollRightTop = 0;
this.current = 0;
this.leftMenuStatus(0)
this.$nextTick(function() {
if (this.oldItemId)this.itemId = this.oldItemId
this.getMenuItemTop()
})
},
// ------------------------- 以下方法为上传组件相关 -------------------------
// 弹出上传选项
......@@ -692,62 +762,18 @@
if (this.arr.length == 0) {
await this.getMenuItemTop();
}
if (index == this.current) return;
// if (index == this.current) return;
this.scrollRightTop = this.oldScrollTop;
this.$nextTick(function() {
setTimeout(() => {
this.itemId = this.oldItemId
if(!this.oldItemId) this.scrollRightTop = this.arr[index];
// 没有指定滚动到某一小项，就滚动到大的项
if(!this.oldItemId) this.scrollRightTop = this.arr[index]
this.oldItemId = ''
this.current = index;
this.leftMenuStatus(index);
})
},
// 获取一个目标元素的高度
getElRect(elClass, dataVal) {
new Promise((resolve, reject) => {
const query = uni.createSelectorQuery().in(this);
query.select('.' + elClass).fields({
size: true
}, res => {
// 如果节点尚未生成，res值为null，循环调用执行
if (!res) {
setTimeout(() => {
this.getElRect(elClass);
}, 10);
return;
}
this[dataVal] = res.height;
resolve();
}).exec();
this.current = index
}, 100)
})
},
// 观测元素相交状态
async observer() {
this.tabbar.map((val, index) => {
let observer = uni.createIntersectionObserver(this);
// 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
// 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
observer.relativeTo('.right-box', {
top: 0
}).observe('#item' + index, res => {
if (res.intersectionRatio > 0) {
let id = res.id.substring(4);
this.leftMenuStatus(id);
}
})
})
},
// 设置左边菜单的滚动状态
async leftMenuStatus(index) {
this.current = index;
// 如果为0，意味着尚未初始化
if (this.menuHeight == 0 || this.menuItemHeight == 0) {
await this.getElRect('menu-scroll-view', 'menuHeight');
await this.getElRect('u-tab-item', 'menuItemHeight');
}
// 将菜单活动item垂直居中
this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
},
// 获取右边菜单每个item到顶部的距离
getMenuItemTop() {
new Promise(resolve => {
......@@ -768,7 +794,6 @@
}).exec()
})
},
// 右边菜单滚动
async rightScroll(e) {
this.oldScrollTop = e.detail.scrollTop;
......@@ -776,19 +801,16 @@
await this.getMenuItemTop();
}
if (this.timer) return;
if (!this.menuHeight) {
await this.getElRect('menu-scroll-view', 'menuHeight');
}
this.timer = setTimeout(() => { // 节流
this.timer = null;
// scrollHeight为右边菜单垂直中点位置
let scrollHeight = e.detail.scrollTop + this.menuHeight / 2;
let scrollHeight = e.detail.scrollTop
for (let i = 0; i < this.arr.length; i++) {
let height1 = this.arr[i];
let height2 = this.arr[i + 1];
// 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
this.leftMenuStatus(i);
this.current = i
return;
}
}
......
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