Skip to content

S
self-support
Commit 94705533 authored by 李超鹏's avatar 李超鹏
Browse files
Options

修改

parent 6810ebc5
Show whitespace changes
Inline Side-by-side
Showing with 30 additions and 680 deletions
src/components/complete-check/complete-check.vue
View file @ 94705533
...@@ -24,13 +24,14 @@ ...@@ -24,13 +24,14 @@
'color': '#FFFFFF', 'color': '#FFFFFF',
}" }"
:confirm-text="confirmText" :confirm-text="confirmText"
@confirm="confirmModel" ref="checkModel" @cancel="cancel"
@confirm="confirm" ref="checkModel"
:show-cancel-button="true" :show-cancel-button="true"
:show-title="false"> :show-title="false">
<view class="slot-content"> <view class="slot-content">
<view class="check-status"> <view class="check-status">
<u-image width="224rpx" height="224rpx" :src="statusImage"></u-image> <u-image width="224rpx" height="224rpx" :src="statusImage"></u-image>
<text class="check-status-txt">{{statusTxt}}</text> <text :class="['status-txt', { 'pass-color': pass }]">{{statusTxt}}</text>
</view> </view>
<view class="check-list"> <view class="check-list">
<view class="u-flex u-row-between list-title"> <view class="u-flex u-row-between list-title">
...@@ -50,7 +51,7 @@ ...@@ -50,7 +51,7 @@
size="32"></u-icon> size="32"></u-icon>
</view> </view>
<view class="item-txt">{{item.submitted}}/{{item.required}}</view> <view class="item-txt">{{item.submitted}}/{{item.required}}</view>
<view class="item-txt" :class="item.pass ? 'pass-color' : 'no-pass-color'"> <view :class="['item-txt', item.pass ? 'pass-color' : 'no-pass-color']">
{{item.pass ? "通过" : "未通过"}} {{item.pass ? "通过" : "未通过"}}
</view> </view>
</view> </view>
...@@ -76,7 +77,7 @@ ...@@ -76,7 +77,7 @@
type: Array, type: Array,
default(){ default(){
return [ return [
{label: '基本信息', submitted: 3, required: 3, pass: false}, {label: '基本信息', submitted: 3, required: 3, pass: true},
{label: '勘察信息', submitted: 20, required: 20, pass: true}, {label: '勘察信息', submitted: 20, required: 20, pass: true},
{label: '安装信息', submitted: 15, required: 20, pass: false} {label: '安装信息', submitted: 15, required: 20, pass: false}
] ]
...@@ -105,6 +106,9 @@ ...@@ -105,6 +106,9 @@
noPassIcon() { return process.uniEnv.qn_base_url + 'icon/no-pass.png'}, noPassIcon() { return process.uniEnv.qn_base_url + 'icon/no-pass.png'},
}, },
methods: { methods: {
cancel() {
this.$emit('close')
},
confirm() { confirm() {
if(this.pass) { if(this.pass) {
uni.navigateTo({ uni.navigateTo({
...@@ -117,6 +121,7 @@ ...@@ -117,6 +121,7 @@
this.$emit('handle-problem', data) this.$emit('handle-problem', data)
} }
} }
}, },
} }
</script> </script>
...@@ -130,7 +135,7 @@ ...@@ -130,7 +135,7 @@
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
.check-status-txt { .status-txt {
height: 46rpx; height: 46rpx;
font-size: 40rpx; font-size: 40rpx;
font-weight: bold; font-weight: bold;
...@@ -162,10 +167,10 @@ ...@@ -162,10 +167,10 @@
line-height: 32rpx; line-height: 32rpx;
} }
.pass-color { .pass-color {
color: #2272FF; color: #2272FF !important;
} }
.no-pass-color { .no-pass-color {
color: #FA5A49; color: #FA5A49 !important;;
} }
.u-border-top { .u-border-top {
......
src/components/createCom/XhInput.vue
View file @ 94705533
<!-- ******************* 输入框 ******************* --> <!-- ******************* 输入框 ******************* -->
<template> <template>
<view> <view>
<u-input :type="type" class="input-item" v-model="dataValue" @input="valueChange" :border="true" placeholder="请输入" /> <u-input :type="type" class="input-item" v-model="dataValue" @input="valueChange" :placeholder="placeholder" placeholder-style="placeholderStyle"
custom-style="customStyle"/>
</view> </view>
</template> </template>
...@@ -11,7 +12,12 @@ ...@@ -11,7 +12,12 @@
name: 'XhInput', // 新建 input name: 'XhInput', // 新建 input
components: {}, components: {},
mixins: [stringMixin], mixins: [stringMixin],
props: {}, props: {
placeholder: {
type: String,
default: '请输入'
}
},
data() { data() {
return {} return {}
}, },
...@@ -22,6 +28,16 @@ ...@@ -22,6 +28,16 @@
} else { } else {
return 'text' return 'text'
} }
},
placeholderStyle() {
return 'color:#FFFFFF;font-size:26rpx'
},
customStyle() {
return {
'background-color': '#F4F5F7',
'border-radius': '12rpx',
'color': '#ff0000'
}
} }
}, },
watch: {}, watch: {},
......
src/pages/order/complete.vue deleted 100644 → 0
View file @ 6810ebc5
<template>
<view>
<view class="u-wrap" v-if="!takeStatus">
<u-navbar :background="{background: '#2272FF'}" back-icon-color="#fff" :title-size="26" title-color="#fff" :border-bottom="false" title="完工信息"></u-navbar>
<u-tabs-swiper ref="tabs" :current="tabIndex" name="panelName" :list="list" @change="tabsChange" :is-scroll="false" bg-color="#2272FF" inactive-color="#a6c6ff" active-color="#fff" height="120"></u-tabs-swiper>
<view class="u-menu-wrap">
<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop" :scroll-into-view="itemId" v-if="list[tabIndex].items.length > 1">
<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">
<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">{{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">
<view class="label" v-if="typeToComponentType(item.fieldsType)!=='location'">
<image class="item-image" :src="mixingImage" v-if="item.required"></image>
{{item.fieldsTitle}}
</view>
<template v-if="item.fieldsType">
<xh-input v-if="typeToComponentType(item.fieldsType)==='input'" :groupIndex="groupIndex"
:itemIndex="itemIndex" :item="item" :value='form[item.fieldsName] || ""' @value-change="fieldValueChange">
</xh-input>
<xh-multi-input v-else-if="typeToComponentType(item.fieldsType)==='multiinput'"
:groupIndex="groupIndex" :itemIndex="itemIndex" :item="item" :value='form[item.fieldsName] || ""'
@value-change="fieldValueChange">
</xh-multi-input>
<xh-radio v-else-if="typeToComponentType(item.fieldsType)==='radio'"
:groupIndex="groupIndex" :itemIndex="itemIndex" :item="item" :value='form[item.fieldsName] || ""'
@value-change="fieldValueChange">
</xh-radio>
<xh-checkbox v-else-if="typeToComponentType(item.fieldsType)==='checkbox'"
:groupIndex="groupIndex" :itemIndex="itemIndex" :item="item" :value='form[item.fieldsName] || ""'
@value-change="fieldValueChange">
</xh-checkbox>
<xh-select v-else-if="typeToComponentType(item.fieldsType)==='select'"
:groupIndex="groupIndex" :itemIndex="itemIndex" :item="item" :value='form[item.fieldsName] || ""'
@value-change="fieldValueChange">
</xh-select>
<xh-files v-else-if="typeToComponentType(item.fieldsType)==='file'"
:groupIndex="groupIndex" :itemIndex="itemIndex" :item="item" :value='form[item.fieldsName] || []'
:files="files[itemIndex.toString()]"
@value-change="fieldValueChange" @getTakeStatus="getTakeStatus">
</xh-files>
<xh-location v-else-if="typeToComponentType(item.fieldsType)==='location'"
:groupIndex="groupIndex" :itemIndex="itemIndex" :item="item" :value='form[item.fieldsName] || ""'
@value-change="fieldValueChange">
</xh-location>
<xh-scan v-else-if="typeToComponentType(item.fieldsType)==='scan'"
:groupIndex="groupIndex" :itemIndex="itemIndex" :item="item" :value='form[item.fieldsName] || ""'
@value-change="fieldValueChange">
</xh-scan>
<xh-picker v-else-if="typeToComponentType(item.fieldsType)==='picker'"
:groupIndex="groupIndex" :itemIndex="itemIndex" :item="item" :value='form[item.fieldsName] || ""'
@value-change="fieldValueChange">
</xh-picker>
<xh-service-measure v-else-if="typeToComponentType(item.fieldsType)==='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="typeToComponentType(item.fieldsType)==='time'"
:groupIndex="groupIndex" :itemIndex="itemIndex" :item="item" :value='form[item.fieldsName] || ""'
@value-change="fieldValueChange">
</xh-time>
</template>
</u-form-item>
</view>
</view>
</template>
</u-form>
</scroll-view>
</view>
<view class="btn-wrap flex-xc">
<u-button class="btn-submit" @click="saveComplete"
type="primary" shape="circle" :hover-class="submitStatus ? '' : 'none'">
暂存
</u-button>
<u-button class="btn-submit" @click="orderFinish" v-if="tabIndex===list.length - 1"
type="primary" shape="circle" :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>
<take-photo v-else @close="closeTake"></take-photo>
<u-toast ref="uToast" />
</view>
</template>
<script>
import classifyData from '@/common/classify.data.js';
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 takePhoto from '@/components/take/index.vue'
import XhServiceMeasure from '@/components/createCom/XhServiceMeasure.vue'
// import XhRadio from '@/components/createCom/XhRadio.vue'
export default {
data() {
return {
orderId:0,
categoryId:0,
orderServiceType:'',
inGuaranteePeriod:'',
list: [],
tabIndex: 0,
scrollTop: 0, //tab标题的滚动条位置
oldScrollTop: 0,
current: 0, // 预设当前项的值
menuHeight: 0, // 左边菜单的高度
menuItemHeight: 0, // 左边菜单item的高度
itemId: '', // 栏目右边scroll-view用于滚动的id
groupList: classifyData, // 基本信息、安装 、勘察（其中一项表单数据）
menuItemPos: [],
arr: [],
scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
timer: null, // 定时器
form: { // 一维表单
},
rules: {
name: [{
required: true,
min: 10,
message: '姓名不能为空',
// 可以单个或者同时写两个触发验证方式
trigger: ['change', 'blur'],
}],
mobile: [{
required: true,
min: 10,
message: '姓名不能为空',
// 可以单个或者同时写两个触发验证方式
trigger: ['change', 'blur'],
}, {
// 自定义验证函数，见上说明
validator: (rule, value, callback) => {
// 上面有说，返回true表示校验通过，返回false表示不通过
// this.$u.test.mobile()就是返回true或者false的
return this.$u.test.mobile(value);
},
message: '手机号码不正确',
// 触发器可以同时用blur和change
trigger: ['change', 'blur'],
}]
},
submitBtnStatus: false,
takeStatus: false,
fileIndex: null,
files: []
}
},
components: {
XhInput,
XhMultiInput,
XhRadio,
XhCheckbox,
XhSelect,
XhFiles,
XhLocation,
XhScan,
XhPicker,
XhTime,
XhServiceMeasure,
'take-photo': takePhoto
},
created() {
// console.log(allComponents,'allComponents')
},
onLoad(option) {
console.log(option)
if (option) {
this.orderId = option.orderId
this.categoryId = option.categoryId
this.orderServiceType = decodeURIComponent(option.orderServiceType)
this.inGuaranteePeriod = option.inGuaranteePeriod
} else {
this.orderId = 9708719
this.categoryId = 88
this.orderServiceType = '安装'
this.inGuaranteePeriod = 'Y'
}
this.getCompleteData()
},
onReady() {
this.$refs.uForm.setRules(this.rules);
// 导航栏滚动切换
this.getMenuItemTop()
},
updated() {
//console.log(this.form.name, 'form.name')
},
computed: {
mixingImage() {
return process.uniEnv.qn_base_url + 'mixing.png'
},
buttonStyle() {
return this.submitBtnStatus ? {
'color': '#FFFFFF',
'background-color': '#2272FF;',
'width': '600rpx',
'height': '104rpx',
'font-size': '32rpx',
'font-weight': 'bold'
} : {
'color': '#FFFFFF',
'background-color': '#D1D4D4;',
'width': '600rpx',
'height': '104rpx',
'font-size': '32rpx',
'font-weight': 'bold'
}
}
},
methods: {
getCompleteData() {//获取工单配置的完工项目
let self = this
if(self.orderId){
self.$u.api.getCompleteConfigAndData(self.orderId).then((res) => {
if (res.code == 200) {
self.list = res.data.config
self.form = res.data.value
} else {
console.log(res.message, "获取订单完工项目失败！");
}
});
}
},
saveComplete(){// 保存完工信息
let self = this
let param = {}
self.list.forEach((panel)=>{
param[panel.panelFieldsName] = []
panel.items.forEach((group) =>{
group.items.forEach((ele)=>{
if(self.form[ele.fieldsName]){
param[panel.panelFieldsName].push({
"fieldsName": ele.fieldsName,
"fieldsType": ele.fieldsType,
"fieldsValue": self.form[ele.fieldsName],
"required": ele.required,
})
}
})
})
})
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',
})
}
})
},
orderFinish(){
let self = this
if(self.inGuaranteePeriod === 'Y'){
self.$u.api.inOrderFinish(self.orderId).then((res)=>{
console.log(res)
})
}else{
self.$u.api.outOrderFinish({customerPayType:'CASH'}, self.orderId).then((res)=>{
console.log(res)
})
}
},
getTakeStatus(event) {
this.takeStatus = event.status
this.fileIndex = event.index.toString()
if(!this.files[event.index] || this.files[event.index].length < 1) this.files[event.index] = []
},
tabsChange(index){
this.tabIndex = index
this.arr = []
this.scrollRightTop = 0;
this.current = 0;
this.leftMenuStatus(0)
this.$nextTick(function() {
this.getMenuItemTop()
})
},
closeTake(images) {
this.takeStatus = false
//const newFile = this.files[this.fileIndex].concat(images)
this.$set(this.files, this.fileIndex, images)
},
// 字段的值更新
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)
}
},
nextStep() {
if (this.tabIndex < this.list.length - 1) {
this.tabIndex++
this.arr = []
this.$nextTick(function() {
this.getMenuItemTop()
})
}
},
typeToComponentType(type) {
// 将fieldType类型统一转换为公共组件判定类型
let formType = ''
type = type.toLocaleLowerCase()
switch (type) {
case 'text':
case 'password':
case 'textarea':
case 'number':
case 'decimal':
case 'double':
formType = 'input'
break
case 'multiinput':
formType = 'multiinput'
break;
case 'select':
case 'specifications':
formType = 'select'
break
case 'radio':
formType = 'radio'
break
case 'checkbox':
formType = 'checkbox'
break
case 'file':
case 'photos':
formType = 'file'
break
case 'location':
formType = 'location'
break
case 'scan':
formType = 'scan'
break
case 'picker':
case 'mutipicker':
formType = 'picker'
break
case 'service_measures':
formType = 'servicemeasure'
break
case 'time':
case 'date':
formType = 'time'
break
}
return formType
},
// ------------------------- 以下方法为展示滚动切换 -------------------------
// 点击左边的栏目切换
async swichMenu(index) {
if (this.arr.length == 0) {
await this.getMenuItemTop();
}
if (index == this.current) return;
this.scrollRightTop = this.oldScrollTop;
this.$nextTick(function() {
this.scrollRightTop = this.arr[index];
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)
}
}
}
</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 {
padding: 50rpx;
.title {
font-weight: bold;
font-size: 32rpx;
line-height: 32rpx;
color: #333;
}
.label {
color: #333;
font-size: 28rpx;
line-height: 40rpx;
}
.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;
}
.u-search-box {
padding: 18rpx 30rpx;
}
.u-menu-wrap {
flex: 1;
display: flex;
overflow: hidden;
}
.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%;
}
.u-tab-item {
height: 110rpx;
background: #f6f6f6;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
font-size: 26rpx;
color: #444;
font-weight: 400;
line-height: 1;
}
.u-tab-item-active {
position: relative;
color: #2272FF;
font-size: 30rpx;
font-weight: 600;
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 {
background-color: rgb(250, 250, 250);
}
.page-view {
padding: 16rpx;
}
.class-item {
margin-bottom: 30rpx;
background-color: #fff;
padding: 16rpx;
border-radius: 8rpx;
}
.class-item:last-child {
min-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-wrap {
width: 100%;
padding: 20rpx 0 40rpx 0;
display: flex;
justify-content: center;
align-items: center;
}
.btn-save {
color: #FFFFFF;
background-color: #2272FF;
font-size: 32rpx;
font-weight: bold;
}
</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