rj

channel-access/package-lock.json

@@ -2093,6 +2093,28 @@
         "object.assign": "^4.1.0"
       }
     },
+    "babel-polyfill": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-polyfill/-/babel-polyfill-6.26.0.tgz",
+      "integrity": "sha1-N5k3q8Z9eJWXCtxiHyhM2WbPIVM=",
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "core-js": "^2.5.0",
+        "regenerator-runtime": "^0.10.5"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.11",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.11.tgz",
+          "integrity": "sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg=="
+        },
+        "regenerator-runtime": {
+          "version": "0.10.5",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
+          "integrity": "sha1-M2w+/BIgrc7dosn6tntaeVWjNlg="
+        }
+      }
+    },
     "babel-runtime": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
@@ -11591,6 +11613,14 @@
         "clipboard": "^2.0.0"
       }
     },
+    "vue-cropper": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/vue-cropper/-/vue-cropper-0.5.0.tgz",
+      "integrity": "sha512-skBq7jy6iYZ6DEry40M8qU1wLU9/cHPpSYSf5IYgySzSuGlBtnLOlkEgLt/Emu6Pz4t0AumJnWtzRhCHTnurAg==",
+      "requires": {
+        "babel-polyfill": "^6.26.0"
+      }
+    },
     "vue-eslint-parser": {
       "version": "5.0.0",
       "resolved": "https://registry.npm.taobao.org/vue-eslint-parser/download/vue-eslint-parser-5.0.0.tgz",

channel-access/package.json

@@ -13,8 +13,9 @@
         "element-ui": "^2.13.0",
         "js-cookie": "^2.2.1",
         "vue": "^2.6.10",
-        "vue-clipboard2": "^0.3.1",
         "vue-bus": "^1.2.1",
+        "vue-clipboard2": "^0.3.1",
+        "vue-cropper": "^0.5.0",
         "vue-router": "^3.1.3",
         "vuex": "^3.1.2"
     },

channel-access/src/main.js

@@ -19,21 +19,26 @@ import VueClipboard from "vue-clipboard2";
 //
 import Router from "vue-router";
 
+//图片截取插件
+import VueCropper from "vue-cropper";
+
+Vue.use(VueCropper);
+
 const originalPush = Router.prototype.push;
 Router.prototype.push = function push(location) {
-  return originalPush.call(this, location).catch(err => err);
+    return originalPush.call(this, location).catch(err => err);
 };
 
 getTokens().then(res => {
-  //存储token
-  seveCookie("token", res.data.data.token);
+    //存储token
+    seveCookie("token", res.data.data.token);
 });
 Vue.use(Element);
 // Vue.use(VueBus);
 Vue.use(VueClipboard);
 Vue.config.productionTip = false;
 new Vue({
-  router,
-  store,
-  render: h => h(App)
-}).$mount("#app");
+    router,
+    store,
+    render: h => h(App)
+}).$mount("#app");
\ No newline at end of file

channel-access/src/views/pages/jdbycquerytm/index.vue

@@ -221,6 +221,25 @@
         <p>同时您也可以使用同义关键词或减少筛选范围再进行尝试。</p>
       </div>
     </div>
+    <!-- 相机弹出层 -->
+    <div class="imgUpload">
+      <div class="imgUpload-main">
+        <div class="imgUpload-title">
+          <h1>
+            把不必要的部分裁剪掉，以保证搜索结果的准确性
+          </h1>
+          <i class="el-icon-close"></i>
+        </div>
+        <div class="vueCropper">
+          <VueCropper ref="cropper" />
+        </div>
+        <div class="imgUpload-bottom">
+          <el-button type="primary">重新选择</el-button>
+          <el-button type="primary">下载图片</el-button>
+          <el-button type="primary">提交图片</el-button>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -352,6 +371,7 @@ export default {
     };
   },
   mounted() {
+    console.log(this.$refs);
     this.serchName = this.$route.query.tminput;
     this.serchNameList();
   },
@@ -673,6 +693,55 @@ export default {
 .jdbycquerytm {
   width: 100%;
   padding-bottom: 1px;
+  .imgUpload {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    background: rgba(0, 0, 0, 0.3);
+    z-index: 111;
+    .imgUpload-main {
+      width: 600px;
+      margin: 150px auto;
+      border-radius: 5px;
+      overflow: hidden;
+      .imgUpload-title {
+        background: #fff;
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        position: relative;
+        height: 50px;
+        h1 {
+          font-size: 15px;
+        }
+        i{
+          position: absolute;
+          right: 20px;
+          top: 17px;
+          font-size: 17px;
+          cursor: pointer;
+        }
+      }
+      .vueCropper{
+        width: 100%;
+        height: 400px;
+      }
+      .imgUpload-bottom{
+        width: 100%;
+        height: 70px;
+        background: #fff;
+        display: flex;
+        justify-content: space-between;
+        padding: 16px 100px;
+        .el-button{
+          padding: 0 20px;
+        }
+      }
+    }
+  }
   .jdbycquerytm-main {
     width: 1200px;
     margin: 0 auto;