认证通v1.7.5页面绘制

src/router/index.js

@@ -28,6 +28,7 @@ import normalPersonnel from './module/normal/personnel'
 import normalVip from './module/normal/vip'
 import normalUser from './module/normal/user'
 import normalSettings from './module/normal/settings'
+import activityRoutes from './module/normal/activity'
 
 // 需要权限访问的路由列表
 export const asyncRoutes = [
@@ -45,6 +46,7 @@ export const asyncRoutes = [
   ...normalPersonal,
   ...normalPersonnel,
   ...normalSettings,
+  ...activityRoutes,
   ...normalUser
 ]
 

src/router/module/base.js

@@ -12,6 +12,11 @@ export default [
     component: () => import(/* webpackChunkName: "common-page" */ '@/views/common/login'),
     hidden: true
   },
+  {
+    path: '/code',
+    component: () => import(/* webpackChunkName: "common-page" */ '@/views/common/auth/code'),
+    hidden: true
+  },
   {
     path: '/proxy',
     component: () => import(/* webpackChunkName: "common-page" */ '@/views/common/proxy'),
@@ -68,6 +73,7 @@ export default [
       }
     ]
   },
+
   {
     path: '/404',
     component: () => import(/* webpackChunkName: "common-page" */ '@/views/common/error-page/404'),

src/router/module/normal/activity.js

@@ -0,0 +1,24 @@
+/* Layout */
+import Layout from '@/layout'
+
+// 资料管理页面路由
+const activityRoutes = [
+  {
+    path: '/challenge',
+    component: Layout,
+    alwaysShow: true,
+    redirect: '/video',
+    name: 'Challenge',
+    meta: { title: '挑战赛', noCache: true },
+    children: [
+      {
+        path: 'video',
+        component: () => import('@/views/normal/activity/video'),
+        name: 'ChallengeVideoList',
+        meta: { title: '短视频', noCache: true }
+      }
+    ]
+  }
+]
+
+export default activityRoutes

src/styles/index.scss

@@ -21,7 +21,8 @@ label {
 
 html {
   height: 100%;
-  box-sizing: border-box;
+  -webkit-box-sizing: border-box;
+          box-sizing: border-box;
 }
 
 #app {
@@ -31,7 +32,8 @@ html {
 *,
 *:before,
 *:after {
-  box-sizing: inherit;
+  -webkit-box-sizing: inherit;
+          box-sizing: inherit;
 }
 
 .no-padding {
@@ -145,7 +147,16 @@ aside {
   width: 100%;
   text-align: right;
   padding-right: 20px;
+  -webkit-transition: 600ms ease position;
   transition: 600ms ease position;
+  background: -webkit-gradient(
+    linear,
+    left top, right top,
+    from(rgba(32, 182, 249, 1)),
+    color-stop(0%, rgba(32, 182, 249, 1)),
+    color-stop(100%, rgba(33, 120, 241, 1)),
+    to(rgba(33, 120, 241, 1))
+  );
   background: linear-gradient(
     90deg,
     rgba(32, 182, 249, 1) 0%,
@@ -286,6 +297,18 @@ aside {
 .display {
   .el-input {
     input {
+      &::-webkit-input-placeholder {
+        color: #606266;
+      }
+      &::-moz-placeholder {
+        color: #606266;
+      }
+      &:-ms-input-placeholder {
+        color: #606266;
+      }
+      &::-ms-input-placeholder {
+        color: #606266;
+      }
       &::placeholder {
         color: #606266;
       }
@@ -341,9 +364,15 @@ aside {
 }
 
 .el-dialog__wrapper {
+  display: -webkit-box;
+  display: -ms-flexbox;
   display: flex;
-  justify-content: center;
-  align-items: center;
+  -webkit-box-pack: center;
+      -ms-flex-pack: center;
+          justify-content: center;
+  -webkit-box-align: center;
+      -ms-flex-align: center;
+          align-items: center;
 
   .el-dialog {
     margin: 0;
@@ -397,7 +426,8 @@ aside {
     height: 100%;
     position: absolute;
     left: 50%;
-    transform: translateX(-50%);
+    -webkit-transform: translateX(-50%);
+            transform: translateX(-50%);
   }
 }
 
@@ -414,3 +444,10 @@ aside {
 .max-width {
   width: 100%;
 }
+
+.el-table-column--selection {
+  .cell {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+}

src/views/admin/logistics-licensed/components/club-list.vue

@@ -11,6 +11,16 @@
           @keyup.enter.native="handleFilter"
         />
       </div>
+      <div class="filter-control">
+        <span>认证编号:</span>
+        <el-input
+          v-model="listQuery.authParty"
+          placeholder="认证编号"
+          style="width: 280px"
+          class="filter-item"
+          @keyup.enter.native="handleFilter"
+        />
+      </div>
       <div class="filter-control">
         <el-button type="primary" @click="getList">查询</el-button>
       </div>
@@ -30,6 +40,8 @@
 
       <el-table-column label="机构名称" align="center" prop="authParty" />
 
+      <el-table-column label="认证编号" align="center" width="240" />
+
       <el-table-column label="创建时间" class-name="status-col" width="160px">
         <template slot-scope="{ row }">
           <span>{{ row.createTime | formatTime }}</span>
@@ -52,7 +64,7 @@
             查看
           </el-button>
           <el-button type="primary" size="mini" @click="navigationTo(`/logistics/device-list?authId=${row.authId}`)">
-            查看设备认证
+            设备列表
           </el-button>
           <el-button v-if="sendStatus === 0" type="primary" size="mini" @click="onSend(row)"> 寄送 </el-button>
           <el-button v-else type="primary" size="mini" @click="onLookRecord(row)"> 寄送记录 </el-button>

src/views/admin/logistics-licensed/licensed-record.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="page-section">
     <div class="app-container">
+      <div class="control"><el-button size="small" type="primary" @click="onChange">修改</el-button></div>
       <div class="row">
         <div class="col">货物名称：</div>
         <div class="col">{{ detailData.authParty }}授权牌</div>
@@ -13,7 +14,6 @@
         <div class="col">物流单号：</div>
         <div class="col">{{ detailData.logisticsNumber }}</div>
       </div>
-
       <div class="title">物流详情</div>
       <el-divider />
       <div class="info">
@@ -23,17 +23,87 @@
         </div>
       </div>
     </div>
+
+    <!-- 物流信息修改 -->
+    <el-dialog title="机构授权牌寄送" :visible.sync="dialogVisible" width="40%">
+      <el-form ref="ruleForm" :model="formData" :rules="rules" label-width="100px">
+        <el-form-item label="快递公司：" prop="companyId">
+          <el-select v-model="formData.companyId" placeholder="请选择快递公司" clearable>
+            <template v-for="item in companyList">
+              <el-option :key="item.id" :label="item.companyName" :value="item.id" />
+            </template>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="物流编号：" prop="logisticsNumber">
+          <el-input v-model="formData.logisticsNumber" placeholder="请输入物流编号" />
+        </el-form-item>
+        <el-form-item v-if="formData.companyId === 222" label="手机号：" prop="mobile">
+          <el-input v-model="formData.mobile" placeholder="请输入收货人手机号" maxlength="11" show-word-limit />
+        </el-form-item>
+        <el-form-item label="图片备注：" prop="imageRemark">
+          <el-input v-show="false" v-model="formData.imageRemark" />
+          <upload-image
+            tip="请上传jpg/png格式的图片，最大不超过5M，最多可上传6张"
+            :multiple="true"
+            :limit="6"
+            accept=".jpg,.png"
+            :image-list="imageRemarkList"
+            :before-upload="beforeRemarkImageUpload"
+            @success="uploadRemarkImageSuccess"
+            @remove="handleRemarkImageRemove"
+          />
+        </el-form-item>
+        <el-form-item label="备注：" prop="remarks">
+          <el-input v-model="formData.remarks" type="textarea" rows="4" />
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="onSubmitLogistics">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { logisticsDetails } from '@/api/logistics'
+import { fetchCompanyList, logisticsDetails, logisticsSend } from '@/api/logistics'
+import UploadImage from '@/components/UploadImage'
+import { isMobile } from '@/utils/validate'
 export default {
+  components: { UploadImage },
   data() {
+    // 表单校验手机号
+    const mobileValidate = (rule, value, callback) => {
+      if (!isMobile(value)) {
+        callback(new Error('手机号格式不正确'))
+      } else {
+        callback()
+      }
+    }
     return {
       authId: '',
       detailData: {},
-      logisticInfo: []
+      logisticInfo: [],
+      dialogVisible: false,
+      formData: {
+        authId: '',
+        companyId: '',
+        logisticsNumber: '',
+        imageList: '',
+        remarks: '',
+        imageRemark: '',
+        mobile: ''
+      },
+      rules: {
+        companyId: [{ required: true, message: '快递公司名称不能为空', trigger: ['change'] }],
+        logisticsNumber: [{ required: true, message: '物流编号不能为空', trigger: ['blur'] }],
+        mobile: [
+          { required: true, message: '收货人手机号不能为空', trigger: ['blur'] },
+          { validator: mobileValidate, trigger: ['blur'] }
+        ]
+      },
+      companyList: [],
+      imageRemarkList: []
     }
   },
   created() {
@@ -45,11 +115,73 @@ export default {
       try {
         const res = await logisticsDetails({ authId: this.authId })
         this.detailData = { ...this.detailData, ...res.data }
-        this.logisticInfo = res.data.info && JSON.parse(res.data.info)
-        console.log(this.logisticInfo)
+        if (res.data.info) {
+          this.logisticInfo = JSON.parse(res.data.info)
+        }
+        this.initLogistData(res.data)
+      } catch (error) {
+        console.log(error)
+      }
+    },
+
+    initLogistData(data) {
+      this.formData.authId = this.authId
+      this.formData.companyId = data.companyCode
+      this.formData.logisticsNumber = data.logisticsNumber
+      this.formData.imageList = data.imageList
+      this.formData.remarks = data.remarks
+      this.formData.imageRemark = data.remarksImage
+      this.formData.mobile = data.mobile
+      if (data.imageList && data.imageList.length > 0) {
+        this.imageRemarkList = data.imageList.map((item) => ({ name: '图片备注', url: item }))
+      }
+    },
+
+    onChange() {
+      this.fetchCompanyList()
+      this.dialogVisible = true
+    },
+    async onSubmitLogistics() {
+      try {
+        await this.$refs.ruleForm.validate()
       } catch (error) {
         console.log(error)
+        return
       }
+      try {
+        await logisticsSend(this.formData)
+        this.$message.success('发货成功')
+        this.dialogVisible = false
+        this.getList()
+      } catch (error) {
+        this.$message.error('发货失败')
+      }
+    },
+
+    async fetchCompanyList() {
+      try {
+        const res = await fetchCompanyList()
+        this.companyList = res.data
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    uploadRemarkImageSuccess({ response, file, fileList }) {
+      this.imageRemarkList = fileList
+      this.formData.imageRemark = fileList.length
+      this.formData.imageList = fileList.map((item) => item.response.data)
+    },
+    handleRemarkImageRemove({ file, fileList }) {
+      this.imageRemarkList = fileList
+      this.formData.imageRemark = fileList.length
+      this.formData.imageList = fileList.map((item) => item.response.data)
+    },
+    beforeRemarkImageUpload(file) {
+      const flag = file.size / 1024 / 1024 < 1
+      if (!flag) {
+        this.$message.error('医疗许可证图片大小不能超过 1MB!')
+      }
+      return flag
     }
   }
 }
@@ -58,15 +190,22 @@ export default {
 <style lang="scss" scoped>
 .page-section {
   width: 100%;
-  height: calc(100vh - 84px);
+  min-height: calc(100vh - 84px);
   background: #f7f7f7;
   box-sizing: border-box;
   padding: 20px;
 }
 
 .app-container {
+  position: relative;
   background: #fff;
   box-sizing: border-box;
+
+  .control {
+    position: absolute;
+    right: 20px;
+    top: 20px;
+  }
   .row {
     display: flex;
     justify-content: flex-start;

src/views/common/auth/code.vue

@@ -0,0 +1,3 @@
+<template>
+  <div />
+</template>

src/views/components/ClubDetail/index.vue

@@ -35,6 +35,14 @@
       <div class="col">运营联系人手机号：</div>
       <div class="col">{{ clubInfo.linkMobile }}</div>
     </div>
+    <div class="row">
+      <div class="col">认证编号：</div>
+      <div class="col">{{ clubInfo.authCode }}</div>
+    </div>
+    <div class="row">
+      <div class="col">认证日期：</div>
+      <div class="col">{{ clubInfo.authDate | formatTime }}</div>
+    </div>
     <div class="row">
       <div class="col">logo：</div>
       <div class="col">

src/views/normal/activity/video/index.vue

@@ -0,0 +1,211 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container activity">
+      <div class="filter-control">
+        <span>活动时间:</span>
+        <el-date-picker
+          v-model="activityFormData.time"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期"
+        />
+      </div>
+      <div class="filter-control">
+        <span>活动状态:</span>
+        <el-switch v-model="activityFormData.status" el-switch :active-value="1" :inactive-value="0" />
+      </div>
+    </div>
+    <el-divider />
+    <div class="filter-container">
+      <div class="filter-control">
+        <span>所属机构:</span>
+        <el-select v-model="listQuery.authId" placeholder="所属机构" clearable @change="getList">
+          <el-option label="全部" value="" />
+          <el-option label="待审核" :value="2" />
+          <el-option label="审核通过" :value="1" />
+          <el-option label="审核未通过" :value="0" />
+        </el-select>
+      </div>
+      <div class="filter-control">
+        <span>登录账号:</span>
+        <el-input v-model="listQuery.loginAccount" placeholder="登录账号" @keyup.enter.native="handleFilter" />
+      </div>
+      <div class="filter-control">
+        <permission-button type="primary">查询</permission-button>
+        <permission-button type="primary">下载</permission-button>
+      </div>
+    </div>
+    <!-- 列表 -->
+    <el-table
+      v-loading="listLoading"
+      :data="list"
+      border
+      fit
+      highlight-current-row
+      style="width: 100%"
+      header-row-class-name="tableHeader"
+      @selection-change="onSelectionChange"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="序号" :index="indexMethod" align="center" width="80" type="index" />
+      <el-table-column label="视频" align="center">
+        <template><el-image /></template>
+      </el-table-column>
+      <el-table-column label="登录账号" align="center" prop="loginAccount" width="240" />
+      <el-table-column label="机构名称" align="center" prop="authParty" />
+      <el-table-column label="浏览量" align="center" prop="pv" width="120" />
+      <el-table-column label="点赞数" align="center" prop="praise" width="120" />
+      <el-table-column label="排名" align="center" prop="ranking" width="120" />
+      <el-table-column label="抖音上传状态" align="center" width="120">
+        <template slot-scope="{ row }">
+          <span v-if="row.status === 1" class="status success">已上传</span>
+          <span v-if="row.status === 0" class="status danger">未上传</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" width="440">
+        <template>
+          <permission-button size="mini" type="primary" @click="scanDialog = true">上传至抖音</permission-button>
+          <permission-button size="mini" type="primary" @click="commandDialog = true">抖音口令</permission-button>
+          <permission-button size="mini" type="primary" @click="onPlayVideo">播放视频</permission-button>
+          <permission-button size="mini" type="primary" @click="onDownload">下载</permission-button>
+          <permission-button size="mini" type="primary" @click="onRemove">删除</permission-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 上传抖音 -->
+    <el-dialog title="发布抖音" :visible.sync="scanDialog" width="300px" center :close-on-click-modal="false">
+      <el-image class="dy-code" />
+      <div class="tip">请使用抖音app扫码发布视频</div>
+    </el-dialog>
+
+    <!-- 抖音口令 -->
+    <el-dialog
+      title="抖音口令"
+      :visible.sync="commandDialog"
+      width="30%"
+      :show-close="false"
+      :close-on-click-modal="false"
+      @close="onCommandClose"
+    >
+      <el-form ref="commandForm" :model="commandFormData" :rules="commandRules">
+        <el-form-item prop="commandCode">
+          <el-input v-model="commandFormData.commandCode" type="textarea" :rows="5" placeholder="请输入抖音口令" />
+        </el-form-item>
+      </el-form>
+      <div class="control">
+        <el-button @click="commandDialog = false">取消</el-button>
+        <el-button type="primary" @click="onCommandSubmit">提交</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      listQuery: {
+        authId: '',
+        loginAccount: '',
+        pageNum: 1,
+        pageSize: 10
+      },
+      listLoading: false,
+      list: [{}],
+      // 活动表单数据
+      activityFormData: {
+        time: '',
+        status: 1
+      },
+      scanDialog: false,
+      commandDialog: false,
+      // 抖音口令表单数据
+      commandFormData: {
+        commandCode: ''
+      },
+      commandRules: {
+        commandCode: [{ required: true, message: '口令不能为空', trigger: ['blur'] }]
+      }
+    }
+  },
+  methods: {
+    // 获取列表
+    getList() {},
+    // 提交抖音口令
+    async onCommandSubmit() {
+      try {
+        await this.$refs.commandForm.validate()
+        this.onSaveCommand()
+      } catch (error) {
+        console.log(error)
+      }
+    },
+    // 保存抖音口令
+    onSaveCommand() {},
+    // 清楚表单
+    onCommandClose() {
+      this.$refs.commandForm.resetFields()
+    },
+    // 播放视频
+    onPlayVideo() {},
+    // 下载视频
+    onDownload() {},
+    // 删除视频
+    async onRemove() {
+      try {
+        await this.$confirm('此操作将永久删除该视频, 是否继续?', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        })
+        this.removeVideo()
+      } catch (error) {
+        console.log(error)
+        this.$message.info('已取消操作')
+      }
+    },
+    // 删除视频
+    removeVideo() {},
+    // 表格数据选中
+    onSelectionChange() {},
+    // 表格索引
+    indexMethod(index) {
+      return index + this.listQuery.pageSize * (this.listQuery.pageNum - 1) + 1
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.activity {
+  .filter-control {
+    margin-bottom: 0;
+  }
+}
+
+.el-divider {
+  margin: 12px 0;
+}
+
+.el-dialog {
+  .control {
+    text-align: right;
+  }
+
+  .dy-code {
+    width: 160px;
+    height: 160px;
+    display: block;
+    margin: 0 auto;
+  }
+
+  .tip {
+    font-size: 14px;
+    text-align: center;
+    color: #666;
+    padding: 16px 0 8px;
+  }
+}
+</style>

src/views/normal/club/edit.vue

@@ -401,6 +401,7 @@ export default {
     this.editType = this.$route.query.type || 'add'
     this.authId = this.$route.query.id
     this.initFormData()
+    this.fetchAuthTempUsed()
   },
   methods: {
     // 关联机构选择