storevisit-ui-mobile/src/views/deviceWithin/taskPhotoTaking.vue

<template>
  <div class="taskPhotoTaking">
    <van-nav-bar class="navBar" left-arrow title="拜访任务" @click-left="onClickLeft">
      <template #right>
        <span
          v-if="isEdit"
          @click="onSubmit"
          style="
            color: white;
            background: rgb(0, 87, 186);
            display: block;
            padding: 6px 10px;
            border-radius: 6px;
          "
          >保存</span
        >
      </template>
    </van-nav-bar>
    <div class="content" v-if="formData">
      <div
        class="container"
        style="width: 94%; margin: 0 auto; border-radius: 6px; padding: 10px 10px 10px 0">
        <van-form ref="tabstoreVal">
          <div v-for="(item, index) in formData.collectionItemList" :key="index">
            <div v-if="item.answerType == 'zp'" class="formLabel z-cell">
              <van-cell>
                <template #title>
                  <span v-if="item.isMust == 0" class="van-f-red">*</span>
                  <span>1.</span>
                  {{ item.collectionName }}
                  <!-- 操作说明图片和电话 -->
                  <taskTips
                    v-if="item.contactPhone || item.examplePhoto"
                    :contactPhone="item.contactPhone"
                    :examplePhoto="item.examplePhoto">
                  </taskTips>
                </template>
              </van-cell>
              <delete-upload-img
                :imgs="item.fileInfoList"
                :storeGroupId="formData.storeGroupId"
                :taskIds="taskIds"
                :visitsId="visitsId"
                :collectionItemId="item.collectionId"
                :putInCode="formData.putInCode"
                :photoIdentifyType="formData.photoIdentifyType"
                @upDataDetail="getDetaile"
                :pictureSource="item.pictureSource"
                :continuousShoot="item.continuousShoot"></delete-upload-img>
            </div>
          </div>
        </van-form>
      </div>
    </div>
  </div>
</template>
<script>
import { getCollectionInfosBatch } from '@/api/index';
import taskTips from './taskTips';
import deleteUploadImg from '@/components/deleteUploadImgTaskPhoto';
export default {
  name: 'abnortaskPhotoTakingmalVisit',
  components: { taskTips, deleteUploadImg },
  data() {
    return {
      isEdit: true,
      formData: null,
      taskIds: [],
      visitsId: null,
    };
  },
  activated() {
    this.taskIds = this.$route.query.taskIds || [];
    this.visitsId = this.$route.query.visitsId || '';
    this.getDetaile();
  },
  methods: {
    getDetaile() {
      console.log(this.$route.query);
      getCollectionInfosBatch({
        storeCode: this.$route.query.storeCode,
        insert: true,
        id: this.visitsId,
        taskIds: this.taskIds.split(','),
      }).then((res) => {
        if (res.data && res.data.length) {
          this.formData = res.data[0];
        } else {
          this.formData = null;
        }
      });
    },
    onSubmit() {},
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="scss" scoped>
.taskPhotoTaking {
  display: flex;
  flex-direction: column;
  background: #fff;
  .content {
    .formLabel {
      margin-left: 20px;
      border-bottom: 1px solid #f1f1f1;
    }
    .formLabel .van-cell {
      padding: 10px 0;
    }
    .formLabel .van-cell::after {
      border: 0;
    }
    .formLabel .van-field {
      border: 1px solid #f1f1f1;
      padding: 6px;
      width: 100%;
      border-radius: 4px;
      overflow: hidden;
    }
    .formLabel .van-field__control {
      padding: 0 10px;
    }
    .formLabel .formLabeltitle {
      position: absolute;
      top: 8px;
    }
    .z-cell .van-cell__title {
      font-size: 16px;
    }
    .van-f-red {
      color: red;
      width: 8px;
      display: inline-block;
      line-height: 26px;
    }
  }
}
</style>