fix issue

templates/model/tuomin/upload.tmpl

@@ -1,7 +1,7 @@
 {{template "base/head" .}}
-<link rel="stylesheet" href="{{StaticUrlPrefix}}/css/vp-user-invite.css?v={{MD5 AppVer}}" />
-<div class="user settings invite">
+<link rel="stylesheet" href="{{StaticUrlPrefix}}/css/vp-model-tuomin.css?v={{MD5 AppVer}}" />
+<div>
   <div id="__vue-root"></div>
 </div>
-<script src="{{StaticUrlPrefix}}/js/vp-user-invite.js?v={{MD5 AppVer}}"></script>
+<script src="{{StaticUrlPrefix}}/js/vp-model-tuomin.js?v={{MD5 AppVer}}"></script>
 {{template "base/footer" .}}

web_src/vuepages/apis/modules/tuomin.js

@@ -0,0 +1,15 @@
+import service from '../service';
+
+// 图片脱敏接口
+export const  imageTranform = (data) => { // page pageSize
+  console.log("-=-=-=-=-=",data)
+  return service({
+    url: '/extension/tuomin/upload',
+    method: 'post',
+    headers:{
+        'Content-type':'multipart/form-data'
+    },
+    params: { model: data.model },
+    data: {...data.file},
+  });
+}

web_src/vuepages/pages/model/tuomin/index.vue

@@ -1,33 +1,63 @@
 <template>
     <div class="ui container">
-      <div class="title">
-        <div class="title-1"><span>{{ $t('user.inviteFriends') }}</span></div>
-        <div class="title-2"><span>{{ $t('user.inviteFriendsTips') }}</span></div>
+      <div class="tuomin-title">
+        <h2>数据脱敏模型体验</h2>
+        <p>利用人工智能AI技术，把图片中的人脸、车牌号码进行脱敏处理。该模型更多信息请访问项目 &nbsp;<a href="">tengxiao / tuomin</a></p>
       </div>
-      <div class="content-1">
-        <div class="img-c">
-          <img class="img" :src="bannerImg" />
-          <div class="txt">{{ bannerTitle }}</div>
-        </div>
-        <div class="descr">
-          <span>{{ pageLinkDesc }}</span>
-          <a :href="pageLink" target="_blank">{{ $t('user.clickToViewTheEventDetails') }}</a>
-        </div>
-      </div>
-      <div class="content-2">
-        <div class="txt-c">
-          <div class="txt-1">
-            <span>{{ pageOpeniDesc }}</span>
+      <el-row :gutter="12" style="margin-top: 33px;">
+        <el-col :span="12">
+          <div class="tuomin-content-image">
+              <div class="tuomin-icon">
+                <i class="ri-image-line" style="font-size: 16px;margin-right:2px;"></i>
+                <span style="font-size: 12px;">img</span>
+              </div>
+              <div style="height:230px;width: 96%;margin: 0 auto;">
+                <el-upload 
+                  action="#" 
+                  accept=".jpg,.jpeg,.png,.gif,.JPG,.JPEG"
+                  :show-file-list="false" 
+                  :on-change="handleLicensePreview"
+                  :before-upload="beforeLicenseUpload"
+                  list-type="picture-card"
+                  :style="{display:(ImageUrl ? 'none':'block')}"
+                  :auto-upload="false"
+                  >
+                    <div class="el-upload__text">拖动图片到这里 <span style="color: rgba(136, 136, 136, 0.87);">或</span>  点击上传</div>
+                </el-upload>
+
+                <img class="preview-image" v-if="ImageUrl" :src="ImageUrl" alt="">
+              </div>
+              <div>
+                  <div class="tuomin-radio-model">
+                    <label class="radio-label">脱敏对象：</label>
+                    <div>
+                      <el-radio-group v-model="radio">
+                        <el-radio :label="2">全部</el-radio>
+                        <el-radio :label="1">仅人脸</el-radio>
+                        <el-radio :label="0">仅车牌</el-radio>
+                      </el-radio-group>
+                    </div>
+                    
+                  </div>
+                  <div class="tuomin-button-model">
+                    <el-button @click="cancelUpload">取消</el-button>
+                    <el-button @click="startTranform" type="primary">开始处理</el-button>
+                  </div>
+              </div>
           </div>
-          <div class="txt-2"><span>{{ $t('user.registrationAdress') }}</span><span>{{ invitationLink + invitationCode
-          }}</span></div>
-          <div class="txt-3"><span>{{ $t('user.recommender') }}</span><span>{{ invitationCode }}</span></div>
-          <el-button class="__copy_link_btn__" type="primary">{{ $t('user.copyRegistrationInvitationLink') }}</el-button>
-        </div>
-        <div class="qr-code">
-          <div id="__qr-code__" style="width:120px;height:120px;"></div>
-        </div>
-      </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="tuomin-content-image">
+            <div class="tuomin-icon">
+              <i class="ri-image-line" style="font-size: 16px;margin-right:2px;"></i>
+              <span style="font-size: 12px;">output</span>
+            </div>
+            
+          </div>
+        </el-col>
+      </el-row>
+      
+      
       <div class="table-container">
         <div>
           <el-table border :data="tableData" style="width:100%" v-loading="loading" stripe>
@@ -53,16 +83,7 @@
             </template>
           </el-table>
         </div>
-        <div class="__r_p_pagination">
-          <div style="margin-top: 2rem">
-            <div class="center">
-              <el-pagination background @current-change="currentChange" :current-page="pageInfo.curpage"
-                :page-sizes="pageInfo.pageSizes" :page-size="pageInfo.pageSize"
-                layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total">
-              </el-pagination>
-            </div>
-          </div>
-        </div>
+        
       </div>
     </div>
   </template>
@@ -71,7 +92,8 @@
   import Clipboard from 'clipboard';
   import QRCode from 'qrcodejs2';
   import { formatDate } from 'element-ui/lib/utils/date-util';
-  import { getUserInvitationCode } from '~/apis/modules/userinvite';
+  import { imageTranform } from '~/apis/modules/tuomin';
+  import axios from 'axios';
   
   export default {
     data() {
@@ -92,93 +114,62 @@
           pageSizes: [10],
           total: 0,
         },
+
+        dialogImageUrl: '',
+        dialogVisible: false,
+        disabled: false,
+        form:{},
+
+        ImageUrl:'',
+        radio:2,
+        file:''
       };
     },
     components: {},
     methods: {
-      initCopy() {
-        const clipboard = new Clipboard('.__copy_link_btn__', {
-          text: () => {
-            return `${this.pageOpeniDesc}\n${this.$t('user.registrationAdress')}${this.invitationLink + this.invitationCode}\n${this.$t('user.recommender')}${this.invitationCode}`;
-          },
-        });
-        clipboard.on('success', (e) => {
-          this.$message({
-            type: 'success',
-            message: this.$t('user.theSharedContentHasBeenCopiedToTheClipboard')
-          });
-        });
-        clipboard.on('error', (e) => {
-          this.$message({
-            type: 'error',
-            message: this.$t('user.copyError')
-          });
-        });
+      
+      handleLicensePreview(file) {
+        console.log(file)
+        this.ImageUrl = URL.createObjectURL(file.raw);
+        this.file = file
       },
-      transRowData(item) {
-        return {
-          userName: item.Name,
-          avatarSrc: item.Avatar,
-          userLink: window.origin + '/' + item.Name,
-          statusStr: item.IsActive ? this.$t('user.Activated') : this.$t('user.notActive'),
-          statusColor: item.IsActive ? 'rgb(82, 196, 26)' : 'rgb(245, 34, 45)',
-          regTime: formatDate(new Date(item.CreatedUnix * 1000), 'yyyy-MM-dd HH:mm:ss'),
-        }
+      cancelUpload(){
+        this.ImageUrl = ''
       },
-      initData() {
-        getUserInvitationCode({ page: this.pageInfo.curpage, pageSize: this.pageInfo.pageSize }).then(res => {
-          res = res.data;
-          if (res) {
-            this.bannerImg = res.page_banner_img;
-            this.bannerTitle = res.page_banner_title;
-            this.pageLink = res.page_link;
-            this.pageLinkDesc = res.page_link_desc;
-            this.invitationCode = res.invitation_code;
-            this.pageOpeniDesc = res.page_openi_desc;
-            this.tableData = (res.invitation_users || []).map((item, index) => {
-              return this.transRowData(item);
-            });
-            this.pageInfo.total = res.invitation_users_count;
-            const qrCode = new QRCode("__qr-code__", {
-              text: this.invitationLink + this.invitationCode,
-              width: 120,
-              height: 120,
-              colorDark: '#000000',
-              colorLight: '#ffffff',
-              correctLevel: QRCode.CorrectLevel.H
-            });
-          }
+      startTranform(){
+        let fd = new FormData();
+        fd.append('file', this.file.raw);
+        console.log(fd.get("file"))
+        axios({
+          method:'POST',
+          url: '/extension/tuomin/upload',
+          header:{
+              'Content-Type':"multipart/form-data",
+              'Accept':"image/png"
+          },
+          params: { model: this.radio },
+          data:fd
+        }).then(res => {
+          console.log(res)
+          
         }).catch(err => {
           console.log(err);
-        });
-      },
-      getTableData() {
-        const params = {
-          page: this.pageInfo.curpage,
-          pageSize: this.pageInfo.pageSize,
-        };
-        this.loading = true;
-        getUserInvitationCode(params).then(res => {
-          this.loading = false;
-          res = res.data;
-          const data = (res.invitation_users || []).map((item, index) => {
-            return this.transRowData(item);
+          this.$message({
+            type: 'error',
+            message: this.$t('submittedFailed')
           });
-          this.tableData = data;
-          this.pageInfo.total = res.invitation_users_count;
-        }).catch(err => {
-          console.log(err);
-          this.loading = false;
-        });
+        })
+
       },
-      currentChange(val) {
-        this.pageInfo.curpage = val;
-        this.getTableData();
+      beforeLicenseUpload(){
+        console.log("----------")
       },
+      
+      
+     
     },
     mounted() {
-      this.initData();
-      this.initCopy();
+
     },
     beforeDestroy() {
     },
@@ -186,6 +177,70 @@
   </script>
   
   <style scoped lang="less">
+  
+  .tuomin-title{
+    margin-top: 34px;
+    h2 {
+      display: flex;
+      justify-content: center;
+    }
+    p{
+      display: flex;
+      justify-content: center;
+      color: rgba(136, 136, 136, 0.87);
+    }
+  }
+  .tuomin-content-image{
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 5px;
+    min-height: 358px;
+    position: relative;
+    .tuomin-icon {
+      display: flex;
+      align-items: center;
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 66px;
+      height: 22px;
+      justify-content: center;
+      color: rgba(136, 136, 136, 0.87);
+      border-radius: 5px 0px 10px 0px;
+      border: 1px solid rgba(0, 0, 0, 0.1);
+    }
+    .el-upload__text{
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .preview-image{
+      height: 100%;
+      width: 100%;
+    }
+    .tuomin-radio-model{
+      display: flex;
+      margin: 25px 12px 0 12px;
+      .radio-label{
+        font-weight: 600;
+        margin-right: 4px;
+        color: rgba(16, 16, 16, 1);
+      }
+    }
+    .tuomin-button-model{
+      text-align: right;
+      margin: 22px 12px 0 12px;
+
+    }
+  }
+  /deep/ .el-upload--picture-card{
+    width: 100%;
+    background: #ffff;
+    border: none;
+    border-bottom: 1px dashed #888;
+    border-radius: 0;
+    min-height: 230px;
+  }
   .title {
     margin-top: 15px;
     margin-bottom: 15px;