epdc-admin-luzhou/src/views/modules/heart/actuserclock-detail.vue

<template>
  <div class="project-handle" style="background: #ffffff;">
    <div class="project-detail">
      <div v-if="dataForm.oldStatus=='1' || dataForm.oldStatus=='2'">
        <div class="project-detail-tip">处理操作 :</div>
        <el-form
          ref="dataForm"
          :model="dataForm"
          :rules="dataRule"
          @keyup.enter.native="dataFormSubmitHandle()"
        >
          <el-form-item label="是否加积分 :" prop="status">
            <el-radio v-model="dataForm.status" label="5">确认加积分</el-radio>
            <el-radio v-model="dataForm.status" label="6">拒绝加积分</el-radio>
          </el-form-item>
          <el-form-item label="处理意见 :" prop="failureReason">
            <el-input
              :rows="4"
              v-model="dataForm.failureReason"
              type="textarea"
              placeholder="请写明理由，100字以内"
            ></el-input>
          </el-form-item>
          <el-form-item style="float: right;">
            <el-button
              size="small"
              style="width: 95px"
              type="primary"
              @click="dataFormSubmitHandle()"
            >{{ $t('confirm') }}</el-button>
            <el-button size="small" style="width: 95px" @click="backToActClockList">{{ '返回' }}</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="info" v-if="dataForm.oldStatus=='5'">
        <div class="project-detail-tip">处理操作 :</div>
        <div class="info-title">本次活动已确认加积分</div>
        <div class="info-content">如有积分调整，请在“志愿者管理-积分调整”里对该用户进行增或减积分操作</div>
        <el-button class="info-but" size="small" style="width: 95px" @click="backToActClockList">{{ '返回' }}</el-button>
      </div>
      <div class="info" v-if="dataForm.oldStatus=='6'">
        <div class="project-detail-tip">处理操作 :</div>
        <div class="info-title">本次活动已拒绝加积分</div>
        <div  class="info-content">如有积分调整，请在“志愿者管理-积分调整”里对该用户进行增或减积分操作</div>
        <el-button class="info-but" size="small" style="width: 95px" @click="backToActClockList">{{ '返回' }}</el-button>
      </div>
    </div>
    <div class="container">
      <div class="location">
        <span style="font-weight: bold;color: #606266">打卡位置 :</span>
        {{dataForm.address}}
      </div>
      <div id="mapContainer" style="width:450px;height:220px;"></div>
    </div>

    <div class="handle-operation">
      <div class="handle-operation-tip">打卡详情</div>
      <el-table
        v-loading="dataListLoading"
        :data="dataList"
        border
        @selection-change="dataListSelectionChangeHandle"
        style="width: 100%;"
      >
        <el-table-column label="序号" type="index" show-overflow-tooltip align="center" width="50"></el-table-column>
        <el-table-column prop="realName" label="报名人" header-align="center" align="center"></el-table-column>
        <el-table-column
          prop="sex"
          label="性别"
          :formatter="formatSex"
          header-align="center"
          align="center"
        ></el-table-column>
        <el-table-column prop="age" label="年龄" header-align="center" align="center"></el-table-column>
        <el-table-column prop="mobile" label="联系电话" header-align="center" align="center"></el-table-column>
        <el-table-column prop="clockAddress" label="打卡地点" header-align="center" align="center"></el-table-column>
        <el-table-column prop="clockDesc" label="打卡描述" header-align="center" align="center"></el-table-column>
        <el-table-column label="图片" fixed="right" header-align="center" align="center" width="400">
          <template slot-scope="scope">
            <el-image
              class="avatar1"
              v-if="scope.row.clockPic[0]"
              :src="scope.row.clockPic[0]"
              :key="scope.row.clockPic[0]"
              :preview-src-list="previewImgList"
              @click="clickImg(scope.row.clockPic[0])"
            ></el-image>
            <el-image
              class="avatar1"
              v-if="scope.row.clockPic[1]"
              :src="scope.row.clockPic[1]"
              :key="scope.row.clockPic[1]"
              :preview-src-list="previewImgList"
              @click="clickImg(scope.row.clockPic[1])"
            ></el-image>
            <el-image
              class="avatar1"
              v-if="scope.row.clockPic[2]"
              :src="scope.row.clockPic[2]"
              :key="scope.row.clockPic[2]"
              :preview-src-list="previewImgList"
              @click="clickImg(scope.row.clockPic[2])"
            ></el-image>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="limit"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle"
      ></el-pagination>
    </div>
  </div>
</template>
<script>
import mixinViewModule from '@/mixins/view-module'
import debounce from 'lodash/debounce'
import 'element-ui/lib/theme-chalk/timeline.css'
import 'element-ui/lib/theme-chalk/timeline-item.css'
import 'element-ui/lib/theme-chalk/image.css'
var map
var markerList = []
var radiusList = []
// var clockList = []
export default {
  mixins: [mixinViewModule],
  name: 'ActUserClockDetail',
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/heart/actuserclocklog/page',
        getDataListIsPage: true
      },
      dataForm: {
        id: '',
        actId: '',
        status: '',
        failureReason: '',
        address: '',
        latitude: '',
        longitude: '',
        radius: 200,
        clockPic: []
      },
      previewImgList: [],
      isAble: false
    }
  },
  mounted () {
    this.dataForm.id = this.$route.query.id
    this.dataForm.actId = this.$route.query.actId
    this.init()
  },
  computed: {
    dataRule () {
      return {
        status: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'blur'
          }
        ],
        failureReason: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    backToActClockList () {
      this.$emit('refreshDataList')
      this.$parent.selectComponent = 'ActUserClockLog'
      this.$router.push({
        path: '/heart-actinfo',
        query: { id: this.dataForm.actId }
      })
    },
    setMap (data) {
      // 步骤：定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
      // 设置地图中心点
      var myLatlng = new qq.maps.LatLng(data.latitude, data.longitude)
      // 定义工厂模式函数
      var zoom = this.capacity(data)
      var myOptions = {
        zoom: zoom, // 设置地图缩放级别
        center: myLatlng, // 设置中心点样式
        mapTypeId: qq.maps.MapTypeId.ROADMAP // 设置地图样式详情参见MapType
      }
      // //获取dom元素添加地图信息
      map = new qq.maps.Map(document.getElementById('mapContainer'), myOptions)
      // 设置圆形
      var radius = new qq.maps.Circle({
        center: new qq.maps.LatLng(data.latitude, data.longitude),
        radius: this.dataForm.radius,
        map: map
      })

      radiusList.push(radius)
      var marker = new qq.maps.Marker({
        position: myLatlng,
        map: map
      })
      markerList.push(marker)
    },
    init () {
      this.$nextTick(() => {
        if (this.dataForm.id) {
          this.getInfo()
        }
      })
    },
    // 点击查看大图
    clickImg (url) {
      this.previewImgList = []
      this.previewImgList.push(url)
    },
    getDataList () {
      this.dataListLoading = true
      this.$http
        .get(this.mixinViewModuleOptions.getDataListURL, {
          params: {
            order: this.order,
            orderField: this.orderField,
            page: this.mixinViewModuleOptions.getDataListIsPage
              ? this.page
              : null,
            limit: this.mixinViewModuleOptions.getDataListIsPage
              ? this.limit
              : null,
            ...this.dataForm
          }
        })
        .then(({ data: res }) => {
          this.dataListLoading = false
          if (res.code !== 0) {
            this.dataList = []
            this.total = 0
            return this.$message.error(res.msg)
          }
          this.dataList = this.mixinViewModuleOptions.getDataListIsPage
            ? res.data.list
            : res.data
          this.total = this.mixinViewModuleOptions.getDataListIsPage
            ? res.data.total
            : 0
          this.dataList.forEach(item => {
            var LogLatlng = new qq.maps.LatLng(
              item.clockLatitude,
              item.clockLongitude
            )
            var LogMarker = new qq.maps.Marker({
              position: LogLatlng,
              map: map
            })
            markerList.push(LogMarker)
          })
          console.log(markerList)
        })
        .catch(() => {
          this.dataListLoading = false
        })
    },
    // 获取信息
    getInfo () {
      this.$http
        .get(`/heart/actuserclocklog/clockDetail/${this.dataForm.id}`)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.dataForm = {
            ...this.dataForm,
            ...res.data
          }
          // if (res.data.status != '5' && res.data.status != '6') {
          //   this.dataForm.status = '5';
          //   this.dataForm.failureReason = '';
          // } else {
          //   this.isAble = true;
          // }
          this.setMap(res.data)

          this.getDataList()
        })
        .catch(() => {})
    },
    capacity (data) {
      if (data.radius > 0 && data.radius <= 25) {
        return 18
      } else if (data.radius > 25 && data.radius <= 50) {
        return 17
      } else if (data.radius > 50 && data.radius <= 100) {
        return 16
      } else if (data.radius > 100 && data.radius <= 200) {
        return 15
      } else if (data.radius > 200 && data.radius <= 500) {
        return 14
      } else if (data.radius > 500 && data.radius <= 1000) {
        return 13
      } else if (data.radius > 1000 && data.radius <= 2000) {
        return 12
      } else if (data.radius > 2000 && data.radius <= 5000) {
        return 11
      }
    },
    formatSex: function (row, column) {
      let state = row.sex
      if (state === '0') {
        return '女'
      } else if (state === '1') {
        return '男'
      }
    },
    // 表单提交
    dataFormSubmitHandle: debounce(
      function () {
        this.$refs['dataForm'].validate(valid => {
          if (!valid) {
            return false
          }
          if (this.dataForm.failureReason.length > 100) {
            return this.$message.error('处理意见不超过100字')
          }
          // this.isAble = true
          this.$http['post']('/heart/actuserclocklog/pointCheck', this.dataForm)
            .then(({ data: res }) => {
              // this.isAble = false
              if (res.code !== 0) {
                return this.$message.error(res.msg)
              }
              this.$message({
                message: this.$t('prompt.success'),
                type: 'success',
                duration: 500,
                onClose: () => {
                  this.$emit('refreshDataList')
                  this.$parent.selectComponent = 'ActUserClockLog'
                  this.$router.push({
                    path: '/heart-actinfo',
                    query: { id: this.dataForm.actId }
                  })
                }
              })
            })
            .catch(() => {})
        })
      },
      1000,
      { leading: true, trailing: false }
    )
  }
}
</script>
<style lang="scss">
.aui-wrapper .el-pagination {
  margin-top: 10px;
  margin-bottom: 10px !important;
}
.project-handle .el-input {
  width: 100px !important;
}
.project-handle .handle-operation {
  background: #fff;
}
.el-pagination__editor.el-input {
  width: 50px !important;
}
.project-handle {
  padding: 0 !important;
}
.project-handle .project-detail {
  width: 59% !important;
  padding-left: 50px;
  padding-top: 40px !important;
  min-height: 245px !important;
}
.info-title {
  text-align: center;
  font-weight: 500;
  text-align: center;
  font-size: 20px;
}
.info-content {
  text-align: center;
  margin-top: 18px;
  font-size: 17px;
  color: #6e6e6e;
}
.info-but{
  margin: 60px 70px 20px 0;
  float: right;
}
.avatar1 {
  width: 120px;
  height: 120px;
}
.el-image-viewer__close {
  top: 16%;
}
.el-table__fixed-right::before,
.el-table__fixed::before {
  background: transparent !important;
}
</style>

<style lang="scss" scoped>
.project-handle {
  width: 100%;
  height: 49%;
  background: #ffffff;
  box-sizing: border-box;
  padding: 10px;
  .project-detail {
    background: #ffffff;
    width: 60%;
    height: 49%;
    border: 2px solid #ccc;
    box-sizing: border-box;
    padding-top: 20px;
    float: left;
    margin-bottom: 1%;
    position: relative;
    .project-detail-tip {
      position: absolute;
      top: 0;
      left: 0;
      width: 80px;
      height: 30px;
      line-height: 30px;
      color: #ffffff;
      background: #4ac38b;
      text-align: center;
    }
    .el-form {
      height: 100%;
      float: left;
      overflow-y: auto;
      &::-webkit-scrollbar {
        width: 5px;
        height: 1px;
      }
      &::-webkit-scrollbar-thumb {
        border-radius: 5px;
        background: #ccc;
      }
      &::-webkit-scrollbar-track {
        border-radius: 10px;
        background: #fff;
      }
    }
  }
  .container {
    background: #ffffff;
    width: 40%;
    height: 49%;
    float: right;
    .location {
      height: 30px;
      line-height: 30px;
    }
    #map {
      width: 100%;
      height: calc(100% - 30px);
    }
  }
  .project-progress {
    width: 20%;
    height: 100%;
    float: right;
    border: 2px solid #ccc;
    box-sizing: border-box;
    margin-left: 1%;
    padding-top: 20px;
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 5px;
      height: 1px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background: #aaa;
    }
    &::-webkit-scrollbar-track {
      border-radius: 10px;
      background: #ccc;
    }
  }
  .handle-operation {
    padding-top: 30px;
    box-sizing: border-box;
    width: 100%;
    height: 49%;
    box-sizing: border-box;
    border: 2px solid #ccc;
    float: left;
    position: relative;
    overflow-y: auto;
    &::-webkit-scrollbar {
      width: 5px;
      height: 1px;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 5px;
      background: #aaa;
    }
    &::-webkit-scrollbar-track {
      border-radius: 10px;
      background: #ccc;
    }
    .handle-operation-tip {
      position: absolute;
      top: 0;
      left: 0;
      width: 80px;
      height: 30px;
      line-height: 30px;
      color: #ffffff;
      background: #ff7600;
      text-align: center;
    }
  }
  .info {
    height: 100%;
    background: #fff;
    margin-bottom: 0px;
  }
}
</style>