导航栏添加自定义跳转方式

src/assets/svg/NFC.svg

@@ -2,10 +2,12 @@
 <!-- Generator: Adobe Illustrator 24.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 <svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#ffa500;}
-</style>
 <title>无线电波</title>
+<style>
+.st0{
+  fill:orange;
+}
+</style>
 <g id="icon">
 	<g id="其他" transform="translate(-160.000000, 0.000000)">
 		<path id="形状结合" class="st0" d="M185.5,6.3c2.7,2.6,4.2,6.1,4.2,9.7c0,3.7-1.5,7.1-4.2,9.7c-0.4,0.4-1,0.4-1.4,0

src/components/NavBar/index.vue

@@ -12,14 +12,26 @@
 import {NavBar} from "vant";
 export default {
   components:{NavBar},
+  props:{
+    go:{
+      type: Object,
+      default: ()=>(
+        {
+          type:'go', //参数：go push replace
+          path:-1
+        }
+      )
+    }
+  },
   computed:{
     title (){
-      return this.$router.history.current.meta.title
+      return this.$router.history.current.meta.title;
     }
   },
   methods:{
     goBack(){
-      this.$router.go(-1);
+      console.log(this.go,'go')
+      this.$router[this.go.type](this.go.path);
     },
   }
 }

src/components/nfcPopup/more.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="nfc-popup">
-    <van-popup v-model="visible" get-container="nfc-popup" lock-scroll>
+    <van-popup v-model="visible" get-container="nfc-popup" lock-scroll :close-on-click-overlay="closeOverlay">
       <div class="nfc-panel">
         <div>
           <p v-if="showBottomBox" class="top-text">将手机背部靠近NFC标签扫描</p>
           <div class="image-box">
-            <img class="nfc-image" v-show="nfcImage" :src="nfcImage" alt="">
+            <img class="nfc-image" v-show="nfcImage" :src="nfcImage" alt="" @click="nfcTakePhotos">
           </div>
           <div v-if="showBottomBox" class="bottom-box">
             <div>
@@ -17,6 +17,10 @@
               <span @click="nfcTakePhotos">拍照</span>
             </div>
           </div>
+          <div v-else>
+            <select-cell title="点击选择NFC列表" @change="changeNFC" v-model="selectNFC" :prop="prop" :dataList="dataList"/>
+            <van-button v-if="showBtn" type="primary"  size="small" block plain @click="onConfirm">确定</van-button>
+          </div>
         </div>
       </div>
       <input v-show="false" ref="upload" type='file' accept="image/*" @change="fileChange"/>
@@ -25,49 +29,86 @@
 </template>
 
 <script>
+import SelectCell from "@/components/selectCell";
 import {baseImg} from "@/views/menu/LZRegister/api";
 import {upload} from "@/api/public";
 import ImageCompressor from "js-image-compressor";
 export default {
-  name: "index",
+  components:{SelectCell},
   data(){
     return {
       //nfc弹窗
       visible:false,
-      //nfc图片(base64)
+      //上传的nfc图片
       nfcImage:null,
       //是否显示底部按钮
       showBottomBox:true,
+      //nfc数据
+      dataList:[],
+      //选中的nfc
+      selectNFC:null,
+      //自定义字段
+      prop:{
+        label:'checkName',
+        value:'nfccdoe'
+      },
+      //是否可点击遮罩层关闭
+      closeOverlay:true,
+      showBtn:false,
     }
   },
   watch:{
     visible(val){
-      if(val){
-        this.nfcImage = null;
-        this.showBottomBox = true;
+      if(!this.visible){
+        this.clear();
       }
     }
   },
   methods:{
+    onConfirm(){
+      let data = {
+        nfcCode:this.selectNFC,
+        url:this.nfcImage,
+      }
+      this.$emit('change',data);
+      this.visible = false;
+      this.clear();
+    },
+    //切换nfc后可点击退出
+    changeNFC(){
+      this.showBtn = true;
+    },
+    //清空数据
+    clear(){
+      this.nfcImage = null;
+      this.showBottomBox = true;
+      this.selectNFC = null;
+      this.dataList = [];
+      this.closeOverlay = true;
+    },
+    //显示弹窗
+    show(list){
+      this.visible = true;
+      this.dataList = list;
+      console.log(this.dataList,'datalist')
+    },
     //上传前
     async fileChange(e){
       let file = e.target.files[0];
-      let fileName = e.target.files[0].name;
+     // let fileName = e.target.files[0].name;
       let imgFile = await this.imageCompress(file);
-      console.log(imgFile,'imgFile')
       let formData = new FormData();
       formData.append('file',imgFile);
       upload(formData,'image').then(res=>{
-        console.log(res,'resssss')
-        this.nfcImage = baseImg.base;
-        this.$emit('change',baseImg)
+        //上传成功后，将图片显示在页面上并禁用退出
+        this.nfcImage = res.data.url;
         this.showBottomBox = false;
+        this.closeOverlay = false;
       })
-
     },
     //压缩图片
     imageCompress(file){
-      let imageCom = new Promise((resolve,reject)=>{
+       return new Promise((resolve,reject)=>{
         new ImageCompressor({
           file,
           quality: 0.6,
@@ -88,7 +129,6 @@ export default {
           },
         });
       });
-      return imageCom;
     },
     //拍照
     nfcTakePhotos(){
@@ -122,6 +162,7 @@ export default {
 .image-box{
   width: 100%;
   height: 350px;
+  padding: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -129,6 +170,7 @@ export default {
 .nfc-image{
   width: 300px;
   height: 300px;
+  background-color: #fff;
 }
 .bottom-box{
   display: flex;

src/components/selectCell/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="date-cell">
-    <van-cell  :title="title" :label="label" is-link @click="clickItem"/>
+    <van-cell :title="title" :label="label" is-link @click="clickItem"/>
     <van-popup v-model="showPicker" round lazy-render position="bottom" :close-on-popstate="true" get-container="#app">
       <van-picker
         v-bind="$attrs"
@@ -63,9 +63,12 @@ export default {
     this.queryDict();
   },
   watch:{
-    dataList(){
-      if(this.dict) return;
-      this.columns = this.dataList;
+    dataList:{
+      handler(val){
+        if(this.dict) return;
+        this.columns = this.dataList;
+      },
+      immediate: true
     },
     value:{
       handler (val) {

src/config/env.development.js

@@ -2,7 +2,7 @@
 module.exports = {
   title: 'soc-app-dev',
   baseUrl: 'http://localhost:9018', // 项目地址
-  baseApi: '/yuanjingchao', // 本地api请求地址,注意：如果你使用了代理，请设置成'/'
+  baseApi: '/luowei', // 本地api请求地址,注意：如果你使用了代理，请设置成'/'
   APPID: 'xxx',
   APPSECRET: 'xxx',
   $cdn: 'https://www.sunniejs.cn/static'  //静态资源

src/utils/dicts.js

@@ -0,0 +1,17 @@
+
+ export default class Dicts {
+    constructor(){
+      this.dicts = {}
+    }
+    addDict (dictName, dict){
+      this.dicts[dictName] = dict
+    }
+    getDict (dictName){
+      return this.dicts[dictName]
+    }
+    getDicts (){
+      return this.dicts
+    }
+  }
+
+

src/utils/globalMixins.js

@@ -1,6 +1,6 @@
 import { getDict } from '@/api/toConsult.js'
 import dayjs from 'dayjs'
-
+import Dicts from '../utils/dicts'
 export default {
   data() {
     return {
@@ -39,7 +39,7 @@ export default {
     },
     //根据字典类型获取字典值,返回字典label
     getDicts(s,dict){
-      console.log(this[dict],11111);
+      console.log(this[dict],dict);
       //判断内存中是否有该字典,没有就去获取
       if( !this[dict]){
         getDict( dict ).then(res => {

src/views/menu/LZRegister/edit.vue

@@ -48,13 +48,13 @@
                 <span>NFC:</span>
               </template>
               <template #extra>
-                <span style="display: inline-block;margin-right: 10px;color:#969799;">{{NFCNum}}</span>
-                <van-icon :name="require('../../../assets/svg/NFC.svg')" class="nfc-icon" @click="clickNFC"/>
+                <span style="display: inline-block;color:#969799;">{{NFCNum}}</span>
+                <img v-if="NFCNum" :src="require('../../../assets/svg/NFC.svg')" class="nfc-icon" @click="clickNFC"/>
               </template>
 
             </van-cell>
             <van-cell v-show="nfcImage.length > 0" :border="false" >
-              <img v-for="v in nfcImage" :src="nfcImage" alt="" :key="v.url">
+              <img class="nfc-img" v-for="(v,i) in nfcImage" :src="v.url" alt="" :key="v.url">
             </van-cell>
           </div>
         </van-panel>
@@ -130,7 +130,7 @@
         </van-collapse>
       </div >
 
-      <p class="warning-msg">需要完成所有区域的履职内容才能提交内容</p>
+      <p class="warning-msg" v-if="getDicts(taskInfo.status,'resumption_status') === '未开始' || getDicts(taskInfo.status,'resumption_status') === '进行中'">需要完成所有区域的履职内容才能提交内容</p>
       <div class="flex-box" v-if="getDicts(taskInfo.status,'resumption_status') === '未开始' || getDicts(taskInfo.status,'resumption_status') === '进行中'">
         <van-button type="default" style="width: 28%;" plain  @click="goBack">取消</van-button>
         <van-button type="info" style="width: 28%;" plain hairline @click="saveData">保存</van-button>
@@ -177,9 +177,7 @@ export default {
       //区域下检查项数量
       checkNum:0,
       //nfc图片
-      nfcImage:[
-        { url: 'https://img01.yzcdn.cn/vant/leaf.jpg' },
-      ]
+      nfcImage:[]
     }
   },
   mounted() {
@@ -191,7 +189,7 @@ export default {
     NFCList(){
       if(!this.NFCList) return;
       let arr = this.NFCList.filter(item=>{
-        return item.status == 1;
+        return item.status == 0;
       })
       this.NFCNum = arr.length;
     },
@@ -297,7 +295,6 @@ export default {
         num += v.checkitemlist.length;
       });
       this.checkNum = num;
-      console.log(num,'num')
     },
     //获取当前区域nfc数量
     getNFCItemNum(){
@@ -349,8 +346,13 @@ export default {
       this.$router.go(-1);
       this.clearData();
     },
+    //点击NFC图标
     clickNFC(){
-      this.$refs.NfcPopup.visible = true;
+      if(!this.NFCNum) return;
+      let arr = this.selectArea.nfclist.filter(item=>{
+        return item.status == 0;
+      })
+      this.$refs.NfcPopup.show(arr);
     },
     //清空数据
     clearData(){
@@ -366,10 +368,10 @@ export default {
       console.log(item,'666')
       item.resTime = formatDate(new Date());
     },
-    changeNfcImg(baseImg){
-      console.log(baseImg,'baseImg')
+    changeNfcImg(imgItem){
+      console.log(imgItem,'imgItem')
       let arr = [];
-      arr.push({url:baseImg});
+      arr.push(imgItem);
       this.nfcImage = arr;
     },
   }
@@ -409,10 +411,9 @@ export default {
     box-shadow: 0 2px 6px #ddd;
   }
   .nfc-icon{
-    font-size: 50px;
-    font-weight: 600;
-    color:orange;
-    fill:orange;
+    width: 50px;
+    height: 50px;
+    margin-left: 20px;
   }
   .custom-title {
     align-self: center;
@@ -431,4 +432,8 @@ export default {
     color: #fff;
     background-color: #1989fa;
   }
+  .nfc-img{
+    width: 160px;
+    height: 160px;
+  }
 </style>