xiamen-sb-uniapp/pages/maintain-detail/maintain-detail-ignore.vue

<template>
    <view class="container py2">
        <view class="mx3 p3 bg-color-white" style="border-radius: 16rpx">
            <equipment-line title="状态" :content="statusMap[infoData.status]" />
            <equipment-line title="检查项目" :content="infoData.requirement" />
            <equipment-line title="执行标准" :content="infoData.remark" />
        </view>
        <view class="mx3 p3 bg-color-white" style="border-radius: 16rpx">
            <view class="d-flex py3 border-bottom">
                <view class="f-size-26 text-color-9 w200">维护步骤</view>
                <view class="f-size-26 text-color-3 d-flex ">
                    <block v-for="(item,index) in checkImgList" :key="index">
                        <u-image width="100" class="mr-2" :src="item" @click="handlePre(index)" mode="widthFix"><u-loading slot="loading"></u-loading></u-image>
                    </block>
                </view>
            </view>
        </view>
        <view class="mx3 p3 bg-color-white" style="border-radius: 16rpx">
            <equipment-line title="检查结果" :content="infoData.feedback" />
        </view>
        <view class="p-fixed d-flex j-around a-center footer">
            <view
                v-if="infoData.status === 1||
                    infoData.status === 4"
                class="main-color-bg text-color-white common"
                @tap="handleExecute"
            >接收</view
            >
            <view
                v-if="infoData.status === 2"
                class="main-color-bg text-color-white common"
                @tap="handleFinish"
            >完成</view
            >
            <view
                v-if="infoData.status === 3"
                class="main-color-bg text-color-white common"
                @tap="handleFinish"
            >发起报修</view
            >
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            infoData: {},
            detailId: '',
            statusMap: null,
            sbStatusMap: null,
            checkImgList: []
        };
    },
    onLoad(options) {
        this.detailId = options.detailId;
        this.statusMap = this.$DictCache.getLabelByValueMapByType(
            this.$DictCache.TYPE.CHECK_JOB_STATUS
        );
        this.sbStatusMap = this.$DictCache.getLabelByValueMapByType(
            this.$DictCache.TYPE.SB_INFO_STATUS
        );
    },
    onShow() {
        this.initData();
    },

    methods: {
        handlePre(index) {
            uni.previewImage({
                urls: this.checkImgList,
                current: this.checkImgList[index],
                success() {
                }
            });
        },
        handleExecute() {
            this.$Http.requireLogin(() => {
                this.$Http.executeJobIgnores(this.infoData).then((res) => {
                    this.initData();
                    uni.showToast({ title: '已接收，请及时完成任务' });
                });
            }, '接收保养任务需要先登录，是否登录？');
        },
        handleFinish() {
            this.$Http.requireLogin(() => {
                uni.navigateTo({
                    url: '/pages/maintain-add/maintain-add-ignore?detailId=' + this.detailId
                });
            }, '完成保养任务需要先登录，是否登录？');
        },
        handleRepair() {
            this.$Http.requireLogin(() => {
                uni.navigateTo({
                    url: '/pages/repair-add/repair-add?detailId=' + this.infoData.sbId
                });
            }, '发起报修需要先登录，是否登录？');
        },
        initData() {
            this.$Http
                .fetchCheckJobIgnores({
                    id: this.detailId
                })
                .then((res) => {
                    this.infoData = res.data;
                    if (res.data.checkImgList.length > 0) {
                        this.checkImgList = res.data.checkImgList.map(item => {
                            return this.$BaseTool.UserUtil.getFileUrl(item.url);
                        })
                    }
                });
        }
    }
};
</script>

<style lang="less">
page {
  background-color: #f4f4f4;
}

.container {
  padding-bottom: 100rpx;

  .footer {
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    z-index: 10000;
  }

  .title {
    border-bottom: 1rpx solid #f4f4f4;
  }

  .img {
    width: 100rpx;
    height: 100rpx;
  }

  .p-fixed {
    border-top: 1rpx solid #f4f4f4;
    height: 100rpx;

    .common {
      padding: 15rpx 200rpx;
      border-radius: 30rpx;
      background-color: #0082ff;
      color: #fff;
    }
  }
}
</style>