complete.vue

<template>
    <view class="pg-complete">
        <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="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-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" :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" 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] || ""' :disabled="item.disabled || false" :slotContent="item.fieldsInfo" @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] || ""' :disabled="item.disabled || false" @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-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="nextStep" :custom-style="buttonStyle"
                    type="primary" shape="circle" :hover-class="submitStatus ? '' : 'none'">
                    {{ tabIndex === list.length - 1 ? '提交' : '下一步' }}
                </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 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 Detail from "@/components/order/detail.vue"

    // 表单类型map
    const formType = new Map([
        ['text', ['input','textarea']],
        ['password', ['password','input']],
        ['textarea', ['input','digit']],
        ['number', ['input','digit']],
        ['decimal', ['input','digit']],
        ['double', ['input','digit']],
        ['integer', ['input','digit']],
        ['string', ['input','text']],
        ['jscode', ['input','text']],
        ['multiinput', ['multiinput','text']],
        ['select', ['select','text']],
        ['specifications', ['select','text']],
        ['radio', ['radio','text']],
        ['checkbox', ['checkbox','text']],
        ['file', ['file','text']],
        ['photos', ['file','text']],
        ['location', ['location','text']],
        ['scan', ['scan','text']],
        ['machine_code', ['scan','text']],
        ['service_measures', ['servicemeasure','text']],
        ['time', ['time','text']],
        ['date', ['time','text']],
        ['form', ['form','text']],
        ['label', ['label','text']],
    ])

    /**
	 * 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 === 'partnerInspectItem') { // 勘察
            if (!pass) return handerProgrom.perfect
            return type ? (type === '01' ? handerProgrom.next : handerProgrom.appointment) : handerProgrom.perfect
        } else if (name === 'partnerInstallItem') { // 安装
            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;
                default:
                    hander = handerProgrom.perfect
                    break;
            }
            return hander
        } else { // 基础信息
            if (!pass) return handerProgrom.perfect
            return submit ? handerProgrom.submit : handerProgrom.next
        }
    }

    export default {
        data() {
            return {
                orderId:0,
				categoryId:0,
				orderServiceType:'',
				inGuaranteePeriod:'',
				partnerCompanyId:'',
				auditResultsId: '',
                list: [],
                tabIndex: 0,
                scrollTop: 0, //tab标题的滚动条位置
                oldScrollTop: 0,
                current: null, // 预设当前项的值
                menuHeight: 0, // 左边菜单的高度
                menuItemHeight: 0, // 左边菜单item的高度
                itemId: '', // 栏目右边scroll-view用于滚动的id
                oldItemId: '',
                menuItemPos: [],
                arr: [],
                scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
                timer: null, // 定时器
                form: { // 一维表单
                },
                submitBtnStatus: false,
                completeCheck: {
                    status: false,
                    resulut: [],
                    confirmText: '去完善',
                    cancelText: '',
                    action: '',
                    cancelAction: ''
                },
                waitHandlerPanelIndex: 0,
                waitHandlerGroupIndex: 0,
                waitHandlerEleIndex: 0,
				pass: false,
                // 上传组件相关
                carmeraList: [
					{
						text: '相册'
					},
					{
						text: '拍照'
					}
				],
                maskShow: false,
                takeStatus: false,
				currentItemDate:{},
                photoItem: {},
                maintainStep: 'partnerInspectItem',
				// showTab: true,
            }
        },
        components: {
            XhInput,
            XhMultiInput,
            XhRadio,
            XhCheckbox,
            XhSelect,
            XhFiles,
            XhLocation,
            XhScan,
            XhTime,
			XhServiceMeasure,
			XhServiceMore,
			XhLabel,
			Detail,
            'take-photo': takePhoto
        },
        mixins: [baseFile],
        created() {
            // console.log(allComponents,'allComponents')
        },
        onLoad(option) {
			getApp().trackPage('订单完工信息页')
            if (option) {
                this.maintainStep = option.maintainStep
                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 =item.partnerCompanyName == '挚达充电桩'
            } else {
                this.orderId = 11880091
				this.categoryId = 1100000214
				this.orderServiceType = '安装'
				this.inGuaranteePeriod = 'Y'
            }
			this.getCompleteData()
        },
        updated() {
            //console.log(this.form.name, 'form.name')
        },
        computed: {
			tabList() { // 没有数据的时候tab要有占位数据，不然有页面有晃动
				return this.list.length > 0 ? this.list[this.tabIndex].items : [{name:''}]
			},
            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() {//获取工单配置的完工项目
                uni.showLoading({
					title: '加载中'
				})
			    if(this.orderId){
			        this.$u.api.getCompleteConfigAndData(this.orderId).then((res) => {
			            if (res.code == 200) {
							this.initData(res)
			            } else {
			                this.$refs.uToast.show({
			                	title: res.message,
			                	type: 'error',
			                })
			            }
			        });
			    }
			},
			initData(res) {
                this.form = res.data.value || {}

                const list = res.data.config.sort((a, b) => a.order - b.order)
                list.forEach((item, index) => {
                    if (this.maintainStep === item.panelFieldsName) this.tabIndex = index
                    item.items.forEach(v => {
                        v.items.forEach(d => {
							const type = d.fieldsType.toLocaleLowerCase()
							const formMap = formType.get(type) || formType.get('text')
							d.formType = formMap[0]
							d.inputType = formMap[1]
							if (d.fieldsId == 200 && res.data.value) {
								d.required = res.data.value['paymentMethodsType'] != '03'
							}
                            if (d.fieldsId === 252 || d.fieldsId === 253) { // 申请费用计算
                                this.calcMoney()
                            }
                        })
                    })
                })

                this.list = list
				// this.showTab = this.list.length > 1
                this.current = 0
				// 异常单处理
				if (this.auditResultsId) this.checkCompleteError()
                uni.hideLoading()
			},
			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 checkResult = []
                let pass = true
                let first = true
                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 = 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
                                    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)
                this.completeCheck.result = checkResult
                return pass
            },
            // 检查结果窗口取消回调
            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)
            },
            // 去预约
            async appointment() {
                const save = await this.nextStepSaveData()
                if (save) {
                    uni.reLaunch({
                        url: '/pages/index/order?type=0'
                    })
                }
            },
            // 下一步动作
            async nextAction() {
                const save = await this.nextStepSaveData()
                if (this.tabIndex < this.list.length - 1 && save) {
                    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 = ''
                    })
                }
            },
            // 下一步弹窗处理
            nextStep() {
                this.pass = this.checkCompleteItem()

                const name = this.list[this.tabIndex].panelFieldsName
                const type = name === 'partnerInspectItem' ? this.form.inspectConclusionType : this.form.constructionConclusionType
                const submit = this.tabIndex === this.list.length - 1
                const result = actions(name, this.pass, type, submit)

                this.completeCheck.status = true
                this.completeCheck.confirmText = result.confirmText
                this.completeCheck.action = result.action
                this.completeCheck.cancelText = result.cancelText || ''
                this.completeCheck.cancelAction = result.cancelAction || ''
            },
            // 下一步数据保存
            nextStepSaveData() {
                const params = {
                    maintainFields: this.handleSaveData(),
                    currentStep: this.list[this.tabIndex].panelFieldsName,
                    nextStep: this.list[this.tabIndex + 1].panelFieldsName,
                }
                return this.$u.api.completeNextStep(params, this.orderId).then((res)=>{
                    if (res.code == 200) {
                        return Promise.resolve(true)
                    } else {
                        this.$refs.uToast.show({
                            title: res.message,
                            type: 'error',
                        })
                        return Promise.resolve(false)
                    }
                })
            },
            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.tabIndex = panelIndex
                this.current = groupIndex;
                this.itemId = ''
                this.$nextTick(function() {
                    if (this.oldItemId)this.itemId = this.oldItemId
                })
            },
            // 提交订单
			orderFinish(){
                const param = this.handleSaveData()
                this.$u.api.saveCompleteData(param,this.orderId).then((res)=>{
                    if (res.code == 200) {//完工项信息保存成功再次完工工单
                        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{
                            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 {
                        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) { // 选不需要收款的时候，收款金额修改为非必选
                    const row = groupItem.items.find(v => v.fieldsId === 200)
                    row.required = data.value !='03'
                } 

                if (innerItem.fieldsId === 252 || innerItem.fieldsId === 253) { // 申请费用计算
                    this.calcMoney()
                }

            },
            // 申请费用计算
            calcMoney() {
                const price = parseInt(this.form.pipe) || 0
                const pipeUseLength = parseFloat(this.form.pipeUseLength) || 0
                if (price && pipeUseLength) {
                    const money = (price * pipeUseLength).toFixed(2)
                    this.$set(this.form, 'pipeAmount', money)
                } else {
                    this.$set(this.form, 'pipeAmount', 0)
                }
            },
            // ------------------------- 以下方法为上传组件相关 -------------------------
            // 弹出上传选项
            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() {
                    setTimeout(() => {
                        // 没有指定滚动到某一小项，就滚动到大的项
                        this.scrollRightTop = this.arr[index]
                        this.current = index
                    }, 100)
                })
            },
            // 获取右边菜单每个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;
                this.timer = setTimeout(() => { // 节流
                    this.timer = null;
                    // scrollHeight为右边菜单垂直中点位置
                    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.current = 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  ----------------------------


    .com-content{
        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%;
		overflow: auto;
        // overflow: hidden;
		border-radius: 12rpx 12rpx 0 0;
    }
	
	.detail-view {
		border-radius: 12rpx;
		margin: 30rpx;
	}

    .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>