Skip to content

S
self-support
Commit 5a7073c6 authored by Facius's avatar Facius
Browse files
Options

临时

parent 5698b06a
Hide whitespace changes
Inline Side-by-side
Showing with 1069 additions and 44 deletions
src/components/order/detail.vue
View file @ 5a7073c6
...@@ -20,7 +20,8 @@ ...@@ -20,7 +20,8 @@
<text>客户信息：</text> <text>客户信息：</text>
<text>{{ order.contactName }}</text> <text>{{ order.contactName }}</text>
</view> </view>
<image style="width: 84rpx;height: 56rpx;" :src="phoneIcon" @click="phoneToCustomer(order.contactPhone)"> <image v-if="showOperate" style="width: 84rpx;height: 56rpx;" :src="phoneIcon"
@click="phoneToCustomer(order.contactPhone)">
</image> </image>
</view> </view>
<view class="order-cell"> <view class="order-cell">
...@@ -32,7 +33,7 @@ ...@@ -32,7 +33,7 @@
<u-icon name="map" size="28"></u-icon> <u-icon name="map" size="28"></u-icon>
<text class="address-txt">{{ formatAddress }}</text> <text class="address-txt">{{ formatAddress }}</text>
</view> </view>
<image style="width: 84rpx;height: 56rpx;" :src="navigationIcon" <image v-if="showOperate" style="width: 84rpx;height: 56rpx;" :src="navigationIcon"
@click="openLocation(order.contactAddress)"></image> @click="openLocation(order.contactAddress)"></image>
</view> </view>
<view v-if="readMore" @click="handleClick(false)" class="read-more-toggle"> <view v-if="readMore" @click="handleClick(false)" class="read-more-toggle">
...@@ -70,16 +71,22 @@ ...@@ -70,16 +71,22 @@
default () { default () {
return {} return {}
} }
}, },
// true 显示「查看更多」按钮， false 显示「点击收起」按钮 // true 显示「查看更多」按钮， false 显示「点击收起」按钮
readMore: { readMore: {
type: Boolean, type: Boolean,
default: true default: true
}, },
// 可以点击电话和地址 // 可以点击电话和地址
operate: { operate: {
type: Boolean, type: Boolean,
default: true default: true
},
// 显示点击电话和地址
showOperate: {
type: Boolean,
default: true
} }
}, },
data() { data() {
...@@ -255,26 +262,29 @@ ...@@ -255,26 +262,29 @@
margin-bottom: 20rpx; margin-bottom: 20rpx;
} }
} }
.order-cell {
font-size: 26rpx; .order-cell {
font-weight: 400; font-size: 26rpx;
color: #333333; font-weight: 400;
line-height: 48rpx; color: #333333;
margin-bottom: 10rpx; line-height: 48rpx;
margin-bottom: 10rpx;
}
}
.between-cell {
display: flex; .between-cell {
justify-content: space-between; display: flex;
align-items: center; justify-content: space-between;
} align-items: center;
.display-cell { }
display: flex;
} .display-cell {
.cell-title { display: flex;
text-align: left; }
flex-shrink: 0;
.cell-title {
text-align: left;
flex-shrink: 0;
} }
</style> </style>
src/pages/order/complete copy.vue 0 → 100644
View file @ 5a7073c6
<template>
<view class="com-content">
<complete-check :show="completeCheckStatus" :list-data="completeCheckResult" :pass="pass" @close="closeCheckResult" @handle="handerProgrom" @change="confirm"></complete-check>
<view class="u-wrap">
<u-navbar :background="{background: '#2272FF'}" back-icon-color="#fff" :title-size="32" title-color="#fff" :border-bottom="false" title="完工信息" title-bold></u-navbar>
<u-tabs v-show="showTab" class="order-tabs" ref="tabs" :current="tabIndex" name="panelName" :list="list" @change="tabsChange" :is-scroll="false" bg-color="#2272FF" inactive-color="#a6c6ff" active-color="#fff" height="80" font-size="32"></u-tabs>
<view :class="['u-menu-wrap', {'one': !showTab}]">
<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" 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-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'">
<image class="item-image" :src="mixingImage" v-if="item.required"></image>
{{item.fieldsTitle}}
</view>
<template v-if="item.fieldsType">
<xh-input v-if="item.formType==='input'" :groupIndex="groupIndex" :type="item.inputType"
:itemIndex="itemIndex" :item="item" :value='form[item.fieldsName] || ""' @value-change="fieldValueChange">
</xh-input>
<xh-multi-input v-else-if="item.formType==='multiinput'"
:groupIndex="groupIndex" :itemIndex="itemIndex" :item="item" :value='form[item.fieldsName] || ""'
@value-change="fieldValueChange">
</xh-multi-input>
<xh-radio v-else-if="item.formType==='radio'"
:groupIndex="groupIndex" :itemIndex="itemIndex" :item="item" :value='form[item.fieldsName] || ""'
@value-change="fieldValueChange">
</xh-radio>
<xh-checkbox v-else-if="item.formType==='checkbox'"
:groupIndex="groupIndex" :itemIndex="itemIndex" :item="item" :value='form[item.fieldsName] || ""'
@value-change="fieldValueChange">
</xh-checkbox>
<xh-select v-else-if="item.formType==='select'"
:groupIndex="groupIndex" :itemIndex="itemIndex" :item="item" :value='form[item.fieldsName] || ""'
@value-change="fieldValueChange">
</xh-select>
<view v-else-if="item.formType==='file'">
<xh-files
:ref="`fileChild${groupIndex}${itemIndex}`"
:groupIndex="groupIndex" :itemIndex="itemIndex" :item="item" :partnerCompanyId="partnerCompanyId" :categoryId="categoryId" :value='form[item.fieldsName] || []'
@value-change="fieldValueChange">
<template v-slot>
<view class="img-list">
<u-image class="pic" width="160rpx" height="160rpx" :border-radius="10" @click="selectUpload(JSON.stringify(item), groupIndex, itemIndex)" :src="uploadImage"></u-image>
</view>
</template>
</xh-files>
</view>
<xh-location v-else-if="item.formType==='location'"
:groupIndex="groupIndex" :itemIndex="itemIndex" :item="item" :value='form[item.fieldsName] || ""'
@value-change="fieldValueChange">
</xh-location>
<xh-scan v-else-if="item.formType==='scan'"
: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]"
@value-change="fieldValueChange">
</xh-service-measure>
<xh-time v-else-if="item.formType==='time'"
:groupIndex="groupIndex" :itemIndex="itemIndex" :item="item" :value='form[item.fieldsName] || ""'
@value-change="fieldValueChange">
</xh-time>
<xh-service-more v-else-if="item.formType==='form'"
:groupIndex="groupIndex" :itemIndex="itemIndex" :item="item" :order-id="orderId" :value='form[item.fieldsName] || ""'
@value-change="fieldValueChange">
</xh-service-more>
<xh-label v-else-if="item.formType==='label'"
:groupIndex="groupIndex" :itemIndex="itemIndex" :item="item" :value='form[item.fieldsName] || ""'>
</xh-label>
</template>
</u-form-item>
</view>
</view>
</template>
</u-form>
</scroll-view>
</view>
<view :class="['btn-wrap', 'flex-xc', {'btn-bottom': tabIndex > 0}]">
<u-button class="btn-submit" @click="saveComplete"
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
type="primary" shape="circle" :hover-class="submitStatus ? '' : 'none'">
下一步
</u-button>
</view>
</view>
<u-toast ref="uToast" />
<take-photo v-if="takeStatus" @close="closeTake" :upload="false" :currentItem="currentItemDate"></take-photo>
<u-action-sheet :list="carmeraList" v-model="maskShow" :cancel-btn="true" @click="uploadSelect"></u-action-sheet>
</view>
</template>
<script>
import XhInput from '@/components/createCom/XhInput.vue'
import XhMultiInput from '@/components/createCom/XhMultiInput.vue'
import XhRadio from '@/components/createCom/XhRadio.vue'
import XhCheckbox from '@/components/createCom/XhCheckbox.vue'
import XhSelect from '@/components/createCom/XhSelect.vue'
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";
import XhLabel from "../../components/createCom/XhLabel";
import takePhoto from '@/components/take/index.vue'
import baseFile from '@/components/upload/index';
// import XhRadio from '@/components/createCom/XhRadio.vue'
export default {
data() {
return {
orderId:0,
categoryId:0,
orderServiceType:'',
inGuaranteePeriod:'',
partnerCompanyId:'',
auditResultsId: '',
list: [],
tabIndex: 0,
scrollTop: 0, //tab标题的滚动条位置
oldScrollTop: 0,
current: 0, // 预设当前项的值
menuHeight: 0, // 左边菜单的高度
menuItemHeight: 0, // 左边菜单item的高度
itemId: '', // 栏目右边scroll-view用于滚动的id
oldItemId: '',
menuItemPos: [],
arr: [],
scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
timer: null, // 定时器
form: { // 一维表单
},
submitBtnStatus: false,
completeCheckStatus: false,
completeCheckResult: [],
waitHandlerPanelIndex: 0,
waitHandlerGroupIndex: 0,
waitHandlerEleIndex: 0,
pass: false,
// 上传组件相关
carmeraList: [
{
text: '相册'
},
{
text: '拍照'
}
],
maskShow: false,
takeStatus: false,
currentItemDate:{},
photoItem: {},
showTab: true
}
},
components: {
XhInput,
XhMultiInput,
XhRadio,
XhCheckbox,
XhSelect,
XhFiles,
XhLocation,
XhScan,
XhPicker,
XhTime,
XhServiceMeasure,
XhServiceMore,
XhLabel,
'take-photo': takePhoto
},
mixins: [baseFile],
created() {
// console.log(allComponents,'allComponents')
},
onLoad(option) {
getApp().trackPage('订单完工信息页')
if (option) {
this.orderId = option.orderId
this.categoryId = option.categoryId
this.orderServiceType = decodeURIComponent(option.orderServiceType)
this.inGuaranteePeriod = option.inGuaranteePeriod
this.partnerCompanyId = option.partnerCompanyId
this.auditResultsId = option.auditResultsId
this.showTab =option.partnerCompanyName == '挚达充电桩'
} else {
this.orderId = 11880091
this.categoryId = 1100000214
this.orderServiceType = '安装'
this.inGuaranteePeriod = 'Y'
}
this.getCompleteData()
},
onReady() {
// 导航栏滚动切换
this.getMenuItemTop()
},
updated() {
//console.log(this.form.name, 'form.name')
},
computed: {
mixingImage() {
return process.uniEnv.qn_base_url + 'mixing.png'
},
uploadImage() {
return process.uniEnv.qn_base_url + 'upload-file.png'
},
buttonStyle() {
return {
'color': '#FFFFFF',
'background-color': '#2272FF;',
'width': '300rpx',
'height': '104rpx',
'font-size': '32rpx',
'font-weight': 'bold',
'margin-left': '50rpx'
}
},
customStyle() {
return {
'background-color': '#D1D4D4',
'width': '300rpx',
'height': '104rpx',
'background-color': 'transparent',
'border': '1px solid #2272FF',
'color': '#2272FF',
'font-weight': 'bold',
'font-size': '32rpx',
}
},
show200() {
return this.form.paymentMethodsType && this.form.paymentMethodsType != '03'
}
},
methods: {
getCompleteData() {//获取工单配置的完工项目
let self = this
if(self.orderId){
self.$u.api.getCompleteConfigAndData(self.orderId).then((res) => {
if (res.code == 200) {
self.initData(res)
} else {
this.$refs.uToast.show({
title: res.message,
type: 'error',
})
}
});
}
},
initData(res) {
for (var item of res.data.config) {
for (var i of item.items) {
for (var d of i.items) {
var inputType = 'text'
var formType = ''
var type = d.fieldsType.toLocaleLowerCase()
switch (type) {
case 'text':
inputType = 'textarea'
formType = 'input'
break
case 'password':
inputType = 'password'
formType = 'input'
break
case 'textarea':
case 'number':
case 'decimal':
case 'double':
case 'integer':
formType = 'input'
inputType = 'digit'
break
case 'string':
formType='input',
inputType = 'text'
break
case 'multiinput':
formType = 'multiinput'
inputType = 'text'
break;
case 'select':
case 'specifications':
formType = 'select'
inputType = 'text'
break
case 'radio':
formType = 'radio'
inputType = 'text'
break
case 'checkbox':
formType = 'checkbox'
inputType = 'text'
break
case 'file':
case 'photos':
formType = 'file'
inputType = 'text'
break
case 'location':
formType = 'location'
inputType = 'text'
break
case 'scan':
case 'machine_code':
formType = 'scan'
inputType = 'text'
break
case 'picker':
case 'mutipicker':
formType = 'picker'
inputType = 'text'
break
case 'service_measures':
formType = 'servicemeasure'
inputType = 'text'
break
case 'time':
case 'date':
formType = 'time'
inputType = 'text'
break
case 'form':
formType = 'form'
inputType = 'text'
break
case 'label':
formType = 'label'
inputType = 'text'
break
}
d.formType = formType
d.inputType = inputType
if (d.fieldsId == 200 && res.data.value) {
d.required = res.data.value['paymentMethodsType'] !='03'
}
}
}
}
this.list = res.data.config
this.showTab = this.list.length > 1
this.form = res.data.value || {}
// 异常单处理
if (this.auditResultsId) this.checkCompleteError()
},
checkCompleteError() { // 异常单定位错误项
let self = this
self.list.forEach((panel, panelIndex)=>{
panel.items.forEach((group, groupIndex) =>{
group.items.forEach((ele, eleIndex)=>{
if (ele.fieldsName === self.auditResultsId) {
self.waitHandlerPanelIndex = panelIndex
self.waitHandlerGroupIndex = groupIndex
self.waitHandlerEleIndex = eleIndex
self.oldItemId = `item${ele.fieldsId}`
}
})
})
})
this.locationCompleteItem(self.waitHandlerPanelIndex, self.waitHandlerGroupIndex, self.waitHandlerEleIndex)
},
handleSaveData(){
let param = {}
this.list.forEach((panel)=>{
param[panel.panelFieldsName] = []
panel.items.forEach((group) =>{
group.items.forEach((ele)=>{
if(this.form[ele.fieldsName]){
param[panel.panelFieldsName].push({
"fieldsName": ele.fieldsName,
"fieldsType": ele.fieldsType,
"fieldsValue": this.form[ele.fieldsName],
"required": ele.required,
})
}
})
})
})
return param
},
saveComplete(){// 保存完工信息
let self = this
let param = self.handleSaveData()
self.$u.api.saveCompleteData(param,self.orderId).then((res)=>{
if (res.code == 200) {
this.$refs.uToast.show({
title: '保存成功',
type: 'success',
})
} else {
this.$refs.uToast.show({
title: res.message,
type: 'error',
})
}
})
},
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) =>{
group.items.forEach((ele, eleIndex)=>{
if(ele.required){
panelResult.required++
let value = self.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}`
}
}
})
})
panelResult.pass = panelResult.required <= panelResult.submitted
pass = pass&&panelResult.pass
checkResult.push(panelResult)
})
console.log(checkResult)
self.completeCheckResult = checkResult
return pass
},
confirm(){// 检查结果窗口 确认回调
uni.reLaunch({
url: '/pages/index/order?type=3'
})
},
closeCheckResult(){// 检查结果窗口取消回调
this.completeCheckStatus = false
},
handerProgrom(){// 检查结果窗口 去处理回调 定位到缺失的项
this.completeCheckStatus = false
this.locationCompleteItem(this.waitHandlerPanelIndex,this.waitHandlerGroupIndex,this.waitHandlerEleIndex)
},
locationCompleteItem(panelIndex,groupIndex,eleIndex){ // 页面定位到某一项
this.tabIndex = panelIndex
this.arr = []
this.scrollRightTop = 0;
this.current = 0;
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)=>{
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
})
}else{
self.$u.api.outOrderFinish({customerPayType:'CASH'}, self.orderId).then((res)=>{
console.log(res)
self.completeCheckStatus = true
})
}
} else {
this.$refs.uToast.show({
title: res.message,
type: 'error',
})
}
})
}
},
calMaterialCraftListAmount(arr){
let amount = 0
if(arr){
arr.forEach(item =>{
if (Number(item.useLength) && Number(item.freeLength) && Number(item.unitAmt)) {
amount += Math.max(Number(item.useLength) - Number(item.freeLength), 0) * Number(item.unitAmt)
}
if(Number(item.extraAmt)){
amount += Number(item.extraAmt)
}
})
}
return amount
},
setData(data){// 通过页面设置数据
Object.keys(data).forEach(key => {
this.$set(this.form,key,data[key])
})
// 更新预计超出金额
let amount = this.calMaterialCraftListAmount(this.form.materialList)
amount += this.calMaterialCraftListAmount(this.form.craftList)
this.$set(this.form,'overAmount',amount)
},
// 字段的值更新
fieldValueChange(data) {
const groupItem = this.list[this.tabIndex].items[data.groupIndex]
let innerItem
if (groupItem.items) {
innerItem = groupItem.items[data.itemIndex]
}
if(innerItem.fieldsType ==='multiInput'){
// 多个输入框的值触发
let key = Object.keys(data.value)[0]
this.form[key] = data.value[key]
}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
})
}
},
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()
})
},
// ------------------------- 以下方法为上传组件相关 -------------------------
// 弹出上传选项
selectUpload(item, groupIndex, itemIndex){
const imgList = this.$refs[`fileChild${groupIndex}${itemIndex}`][0].imgList
if (imgList.length === 10) {
return this.$refs.uToast.show({
title: '图片已超出最大数量',
type: 'error',
})
}
this.photoItem = {
...JSON.parse(item),
groupIndex,
itemIndex,
}
// 弹窗展示
this.maskShow = true
},
// 区分上传动作
uploadSelect(index) {
if (index === 0) {
this.uploadFile('photo')
} else {
this.uploadFile()
}
},
// 拍照回调
async closeTake(val) {
if(val && val.length > 0){
const files = val.map(v => v.path)
const value = await this.saveToTask(files)
this.$refs[`fileChild${this.photoItem.groupIndex}${this.photoItem.itemIndex}`][0].setTmpValue(value)
}
this.takeStatus = false
},
// 上传图片
async uploadFile(type){
const self = this
if(type&&type==='photo'){
// 直接打开相册
let options = {
sourceType:['album'],//['album', 'camera']
count: 3,
sizeType: ['compressed']
}
const value = await this.chooseImg(options)
self.$refs[`fileChild${self.photoItem.groupIndex}${self.photoItem.itemIndex}`][0].setTmpValue(value)
return
}
// 使用拍照工具拍摄
this.photograph()
this.getWatermark()
},
// 获取拍照规范
photograph(){
let self = this
let param = {
"partnerCompanyId":this.partnerCompanyId || '',
"categoryId":this.categoryId,
"brandId":this.brandId || '',
"fieldName":this.photoItem.fieldsName}
this.$u.api.orderStandardItem(param).then((res)=>{
if (res.code == 200 && res.data.length>0) {
self.currentItemDate = res.data[0]
}else{
console.log("获取完工项的拍照标准异常",res.data.message)
}
self.takeStatus = true
})
},
// 获取水印
getWatermark(){
if(getApp().globalData.photo.waterSetting){
return
}
var data={partnerCompanyId:this.partnerCompanyId || ''}
this.$u.api.getWatermark(data).then((res) => {
if (res.code == 200) {
getApp().globalData.photo.waterSetting = res.data
} else {
console.log("获取水印备注异常",res.data.message)
}
});
},
// ------------------------- 以上方法为上传组件相关 -------------------------
// ------------------------- 以下方法为展示滚动切换 -------------------------
// 点击左边的栏目切换
async swichMenu(index) {
if (this.arr.length == 0) {
await this.getMenuItemTop();
}
if (index == this.current) return;
this.scrollRightTop = this.oldScrollTop;
this.$nextTick(function() {
this.itemId = this.oldItemId
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();
})
},
// 观测元素相交状态
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 => {
let selectorQuery = uni.createSelectorQuery();
selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
if (!rects.length) {
setTimeout(() => {
this.getMenuItemTop();
}, 10);
return;
}
rects.forEach((rect) => {
// 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
this.arr.push(rect.top - rects[0].top);
resolve();
})
}).exec()
})
},
// 右边菜单滚动
async rightScroll(e) {
this.oldScrollTop = e.detail.scrollTop;
if (this.arr.length == 0) {
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;
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);
return;
}
}
}, 10)
},
handleTouchstart() { // 防止输入光标滚动出现错乱
uni.hideKeyboard()
}
}
}
</script>
<style lang="scss" scoped>
// ---------------------------- 表单样式begin ----------------------------
/deep/ .u-form-item {
.u-form-item__message {
padding-left: 0 !important;
}
.u-form-item--left__content--required {
vertical-align: top;
}
}
.class-item {
background-color: #fff;
padding: 28rpx;
border-radius: 8rpx;
.title {
font-weight: bold;
font-size: 32rpx;
line-height: 32rpx;
color: #333;
}
.label {
color: #333;
font-size: 28rpx;
line-height: 40rpx;
padding-bottom: 20rpx;
}
.label-bold {
font-size: 32rpx;
font-weight: bold;
}
.required {
padding-right: 10rpx;
font-size: 28rpx;
line-height: 40rpx;
color: #fa3534;
}
.item-image {
width: 24rpx;
height: 24rpx;
margin-right: 10rpx;
}
}
// ---------------------------- 表单样式end ----------------------------
.u-wrap {
height: calc(100vh);
/* #ifdef H5 */
height: calc(100vh - var(--window-top));
/* #endif */
display: flex;
flex-direction: column;
background-color: #FFFFFF;
background-image: linear-gradient(to top, #2272ff 0%, #2272ff 100%);
background-size: 750rpx 600rpx;
background-repeat: no-repeat;
}
.u-search-box {
padding: 18rpx 30rpx;
}
.order-tabs {
margin-top: 20rpx;
margin-bottom: 32rpx;
}
.u-menu-wrap {
flex: 1;
height: 100%;
display: flex;
overflow: hidden;
border-radius: 12rpx 12rpx 0 0;
&.one {
border-radius: 0;
}
}
.u-search-inner {
background-color: rgb(234, 234, 234);
border-radius: 100rpx;
display: flex;
align-items: center;
padding: 10rpx 16rpx;
}
.u-search-text {
font-size: 26rpx;
color: $u-tips-color;
margin-left: 10rpx;
}
.u-tab-view {
width: 200rpx;
height: 100%;
border: 4rpx solid #F4F5F7;
overflow: auto;
}
.u-tab-item {
height: 110rpx;
background: #fff;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
font-size: 26rpx;
color: #333333;
font-weight: 400;
line-height: 1;
}
.u-tab-item-active {
position: relative;
color: #2272FF;
background: #fff;
}
// .u-tab-item-active::before {
// content: "";
// position: absolute;
// border-left: 4px solid $u-type-primary;
// height: 32rpx;
// left: 0;
// top: 39rpx;
// }
.u-tab-view {
height: 100%;
}
.right-box, .right-boxs {
// background-color: rgb(250, 250, 250);
background-color: #FFFFFF;
overflow: auto;
width: 100%;
}
.page-view {
padding: 16rpx;
}
.class-item:last-child {
max-height: 100vh;
}
.item-title {
font-size: 26rpx;
color: $u-main-color;
font-weight: bold;
}
.item-menu-name {
font-weight: normal;
font-size: 24rpx;
color: $u-main-color;
}
.item-container {
display: flex;
flex-wrap: wrap;
}
.thumb-box {
width: 33.333333%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin-top: 20rpx;
}
.item-menu-image {
width: 120rpx;
height: 120rpx;
}
/*提交按钮*/
.btn-bottom {
border: 2rpx solid #F4F5F7;
}
.btn-wrap {
width: 100%;
padding: 20rpx 0 44rpx 0;
display: flex;
justify-content: center;
align-items: center;
}
.btn-save {
color: #FFFFFF;
background-color: #2272FF;
font-size: 32rpx;
font-weight: bold;
}
.img-list {
position: relative;
margin: 8rpx;
width: 160rpx;
height: 160rpx;
.pic{
// margin-right: 15rpx;
// margin-bottom: 15rpx;
&:nth-child(3n){
margin-right: 0;
}
}
}
</style>
src/pages/order/complete.vue
View file @ 5a7073c6
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
<complete-check :show="completeCheckStatus" :list-data="completeCheckResult" :pass="pass" @close="closeCheckResult" @handle="handerProgrom" @change="confirm"></complete-check> <complete-check :show="completeCheckStatus" :list-data="completeCheckResult" :pass="pass" @close="closeCheckResult" @handle="handerProgrom" @change="confirm"></complete-check>
<view class="u-wrap"> <view class="u-wrap">
<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="完工信息" title-bold></u-navbar>
<Detail :order="order" :readMore.sync="readMore" :showOperate="false"></Detail>
<u-tabs v-show="showTab" class="order-tabs" ref="tabs" :current="tabIndex" name="panelName" :list="list" @change="tabsChange" :is-scroll="false" bg-color="#2272FF" inactive-color="#a6c6ff" active-color="#fff" height="80" font-size="32"></u-tabs> <u-tabs v-show="showTab" class="order-tabs" ref="tabs" :current="tabIndex" name="panelName" :list="list" @change="tabsChange" :is-scroll="false" bg-color="#2272FF" inactive-color="#a6c6ff" active-color="#fff" height="80" font-size="32"></u-tabs>
<view :class="['u-menu-wrap', {'one': !showTab}]"> <view :class="['u-menu-wrap', {'one': !showTab}]">
<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"> <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">
...@@ -129,6 +130,7 @@ ...@@ -129,6 +130,7 @@
import XhLabel from "../../components/createCom/XhLabel"; import XhLabel from "../../components/createCom/XhLabel";
import takePhoto from '@/components/take/index.vue' import takePhoto from '@/components/take/index.vue'
import baseFile from '@/components/upload/index'; import baseFile from '@/components/upload/index';
import Detail from "@/components/order/detail.vue"
// import XhRadio from '@/components/createCom/XhRadio.vue' // import XhRadio from '@/components/createCom/XhRadio.vue'
export default { export default {
data() { data() {
...@@ -174,7 +176,9 @@ ...@@ -174,7 +176,9 @@
takeStatus: false, takeStatus: false,
currentItemDate:{}, currentItemDate:{},
photoItem: {}, photoItem: {},
showTab: true showTab: true,
order: {},
readMore: true
} }
}, },
components: { components: {
...@@ -191,6 +195,7 @@ ...@@ -191,6 +195,7 @@
XhServiceMeasure, XhServiceMeasure,
XhServiceMore, XhServiceMore,
XhLabel, XhLabel,
Detail,
'take-photo': takePhoto 'take-photo': takePhoto
}, },
mixins: [baseFile], mixins: [baseFile],
...@@ -200,13 +205,17 @@ ...@@ -200,13 +205,17 @@
onLoad(option) { onLoad(option) {
getApp().trackPage('订单完工信息页') getApp().trackPage('订单完工信息页')
if (option) { if (option) {
this.orderId = option.orderId let string = decodeURIComponent(option.item)
this.categoryId = option.categoryId const item = JSON.parse(decodeURIComponent(string))
this.orderServiceType = decodeURIComponent(option.orderServiceType) this.order = item
this.inGuaranteePeriod = option.inGuaranteePeriod
this.partnerCompanyId = option.partnerCompanyId this.orderId = item.orderId
this.auditResultsId = option.auditResultsId this.categoryId = item.categoryId
this.showTab =option.partnerCompanyName == '挚达充电桩' this.orderServiceType = decodeURIComponent(item.orderServiceType)
this.inGuaranteePeriod = item.inGuaranteePeriod
this.partnerCompanyId = item.partnerCompanyId
this.auditResultsId = item.auditResultsId
this.showTab =item.partnerCompanyName == '挚达充电桩'
} else { } else {
this.orderId = 11880091 this.orderId = 11880091
this.categoryId = 1100000214 this.categoryId = 1100000214
......
src/pages/order/detail.vue
View file @ 5a7073c6
...@@ -475,7 +475,7 @@ ...@@ -475,7 +475,7 @@
this.allowFeedback = true this.allowFeedback = true
this.showCenterBtn = true this.showCenterBtn = true
this.scenePhoto = true this.scenePhoto = true
this.readMore = false this.readMore = true
this.isAllowDianhuaAndDaohang = true this.isAllowDianhuaAndDaohang = true
} else { } else {
this.isAllowDianhuaAndDaohang = true this.isAllowDianhuaAndDaohang = true
...@@ -617,14 +617,18 @@ ...@@ -617,14 +617,18 @@
}, },
filish(){ filish(){
// 去完工 // 去完工
let item = encodeURIComponent(JSON.stringify(this.order))
uni.navigateTo({ uni.navigateTo({
url: 'pages/order/complete?orderId='+this.order.orderId url: 'pages/order/complete?item='+item
+ "&categoryId=" + this.order.categoryId
+ "&orderServiceType=" + this.order.orderServiceType
+ "&inGuaranteePeriod=" + this.order.inGuaranteePeriod
+ "&partnerCompanyId=" + this.order.partnerCompanyId
+ '&partnerCompanyName=' + this.order.partnerCompanyName
}) })
// uni.navigateTo({
// url: 'pages/order/complete?orderId='+this.order.orderId
// + "&categoryId=" + this.order.categoryId
// + "&orderServiceType=" + this.order.orderServiceType
// + "&inGuaranteePeriod=" + this.order.inGuaranteePeriod
// + "&partnerCompanyId=" + this.order.partnerCompanyId
// + '&partnerCompanyName=' + this.order.partnerCompanyName
// })
}, },
rejectOrder() { // 拒单 rejectOrder() { // 拒单
// 检查是否可以拒单 // 检查是否可以拒单
......
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