From 616ee05f9e5b628854a4abbbcf86babeddc0dee0 Mon Sep 17 00:00:00 2001
From: zhaoyongnian <541231643@qq.com>
Date: Fri, 10 Apr 2020 13:52:21 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/heart/actuserclock-detail.vue     | 547 ++++++++++--------
 src/views/modules/heart/actuserrelation.vue   |   2 +-
 2 files changed, 301 insertions(+), 248 deletions(-)

diff --git a/src/views/modules/heart/actuserclock-detail.vue b/src/views/modules/heart/actuserclock-detail.vue
index 6e565185..2ccb17e6 100644
--- a/src/views/modules/heart/actuserclock-detail.vue
+++ b/src/views/modules/heart/actuserclock-detail.vue
@@ -1,351 +1,404 @@
 <template>
-  <div class="project-handle"
-       style="background: #ffffff;">
+  <div class="project-handle" style="background: #ffffff;">
     <div class="project-detail">
-      <div v-if="dataForm.status=='2'">
+      <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
+          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 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-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.status=='5'">
-        {{dataForm.status}}
-        <div>本次活动已确认加积分</div>
-        <div>如有积分调整，请在“志愿者管理-积分调整”里对该用户进行增或减积分操作</div>
-        <el-button size="small"
-                   style="width: 95px"
-                   @click="backToActClockList">{{ '返回' }}</el-button>
+      <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.status=='6'">
-        {{dataForm.status}}
-        <div>本次活动已拒绝加积分</div>
-        <div>如有积分调整，请在“志愿者管理-积分调整”里对该用户进行增或减积分操作</div>
-        <el-button size="small"
-                   style="width: 95px"
-                   @click="backToActClockList">{{ '返回' }}</el-button>
+      <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 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">
+      <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>
+            <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>
+      <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 = []
+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 () {
+  name: "ActUserClockDetail",
+  data() {
     return {
       mixinViewModuleOptions: {
-        getDataListURL: '/heart/actuserclocklog/page',
+        getDataListURL: "/heart/actuserclocklog/page",
         getDataListIsPage: true
       },
       dataForm: {
-        id: '',
-        actId: '',
-        status: '',
-        failureReason: '',
-        address: '',
-        latitude: '',
-        longitude: '',
+        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()
+  mounted() {
+    this.dataForm.id = this.$route.query.id;
+    this.dataForm.actId = this.$route.query.actId;
+    this.init();
   },
   computed: {
-    dataRule () {
+    dataRule() {
       return {
         status: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            required: true,
+            message: this.$t("validate.required"),
+            trigger: "blur"
+          }
         ],
         failureReason: [
-          { required: true, message: this.$t('validate.required'), trigger: 'blur' }
+          {
+            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 } })
+    backToActClockList() {
+      this.$emit("refreshDataList");
+      this.$parent.selectComponent = "ActUserClockLog";
+      this.$router.push({
+        path: "/heart-actinfo",
+        query: { id: this.dataForm.actId }
+      });
     },
-    setMap (data) {
+    setMap(data) {
       // 步骤：定义map变量 调用 qq.maps.Map() 构造函数   获取地图显示容器
       // 设置地图中心点
-      var myLatlng = new qq.maps.LatLng(data.latitude, data.longitude)
+      var myLatlng = new qq.maps.LatLng(data.latitude, data.longitude);
       // 定义工厂模式函数
-      var zoom = this.capacity(data)
+      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)
+      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)
+      radiusList.push(radius);
       var marker = new qq.maps.Marker({
         position: myLatlng,
         map: map
-      })
-      markerList.push(marker)
+      });
+      markerList.push(marker);
     },
-    init () {
+    init() {
       this.$nextTick(() => {
         if (this.dataForm.id) {
-          this.getInfo()
+          this.getInfo();
         }
-      })
+      });
     },
     // 点击查看大图
-    clickImg (url) {
-      this.previewImgList = []
-      this.previewImgList.push(url)
+    clickImg(url) {
+      this.previewImgList = [];
+      this.previewImgList.push(url);
     },
-    getDataList () {
-      this.dataListLoading = true
-      this.$http.get(
-        this.mixinViewModuleOptions.getDataListURL,
-        {
+    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,
+            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
-      })
+        .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)
+    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(() => { })
+          this.getDataList();
+        })
+        .catch(() => {});
     },
-    capacity (data) {
+    capacity(data) {
       if (data.radius > 0 && data.radius <= 25) {
-        return 18
+        return 18;
       } else if (data.radius > 25 && data.radius <= 50) {
-        return 17
+        return 17;
       } else if (data.radius > 50 && data.radius <= 100) {
-        return 16
+        return 16;
       } else if (data.radius > 100 && data.radius <= 200) {
-        return 15
+        return 15;
       } else if (data.radius > 200 && data.radius <= 500) {
-        return 14
+        return 14;
       } else if (data.radius > 500 && data.radius <= 1000) {
-        return 13
+        return 13;
       } else if (data.radius > 1000 && data.radius <= 2000) {
-        return 12
+        return 12;
       } else if (data.radius > 2000 && data.radius <= 5000) {
-        return 11
+        return 11;
       }
     },
-    formatSex: function (row, column) {
-      let state = row.sex
-      if (state === '0') {
-        return '女'
-      } else if (state === '1') {
-        return '男'
+    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)
+    dataFormSubmitHandle: debounce(
+      function() {
+        this.$refs["dataForm"].validate(valid => {
+          if (!valid) {
+            return false;
           }
-          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 })
+          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;
diff --git a/src/views/modules/heart/actuserrelation.vue b/src/views/modules/heart/actuserrelation.vue
index 91d42c1e..d9a36917 100644
--- a/src/views/modules/heart/actuserrelation.vue
+++ b/src/views/modules/heart/actuserrelation.vue
@@ -78,7 +78,7 @@
             <el-button
               type="text"
               size="small"
-              v-if="scope.row.status"
+              v-if="scope.row.status == 0"
               @click="addOrUpdateHandle(scope.row.id)"
             >审核</el-button>
             <!-- <el-button  type="text" size="small" :disabled="scope.row.status ==='0'? false :true" @click="addOrUpdateHandle(scope.row.id)">审核</el-button> -->