添加app popup弹窗组件

src/components-app/base/dk-app-popup/dk-app-popup.vue

@@ -0,0 +1,64 @@
+<!-- @desc:DkAppPopup组件  @auth:admin  @time:2022/12/29 10:47 -->
+<template>
+  <van-popup v-model="showPopupTemp" position="bottom" @close="onClose" >
+    <van-cell-group :border="false">
+
+        <van-grid square :border="false" icon-size="42px">
+
+          <van-grid-item use-slot v-for="(item,index ) in gridItemList" @click="onClick(item)" >
+            <div>
+              <van-image width="40" height="40" :src="item.imagePath"/>
+            </div>
+            <div style="margin-top: 9px;">
+              <div style="font-size: 12px">{{item.gridName}}</div>
+            </div>
+          </van-grid-item>
+        </van-grid>
+    </van-cell-group>
+
+  </van-popup>
+</template>
+
+<script>
+export default {
+  name: "DkAppPopup",
+  props: {
+    //显示隐藏
+    showPopup:{
+      type:Boolean,
+      default:false
+    },
+    gridItemList:{   //按钮数据列表
+      type:Array,
+      default:[]
+    }
+
+  },
+  data() {
+    return {
+      showPopupTemp:this.showPopup
+    }
+  },
+  watch: {
+    showPopup(val) {
+      this.showPopupTemp = val;
+    }
+  },
+  methods: {
+    //点击图标事件
+    onClick(e) {
+      this.$emit("onClick", e)
+    },
+    //关闭弹框事件
+    onClose(e){
+      this.$emit("onClose", e)
+    }
+  },
+  created() {
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/components-app/base/dk-app-popup/index.js

@@ -0,0 +1,2 @@
+import DkAppPopup from "./dk-app-popup.vue";
+export default  DkAppPopup;

src/main.js

@@ -551,6 +551,9 @@ Vue.component("DkAppNavBar", DkAppNavBar)
 import DkAppTable from "@/components-app/base/dk-app-table";
 Vue.component("DkAppTable", DkAppTable)
 
+import DkAppPopup from "@/components-app/base/dk-app-popup";
+Vue.component("DkAppPopup", DkAppPopup)
+
 import Message from '_c/base/dk-message'
 
 Vue.prototype.$IBMessage = Message.install

src/view-app/mold-management/molding-mold-management/index.vue

@@ -1,10 +1,13 @@
 <template>
   <div class="main-app">
     <!-- 顶部导航栏 -->
-    <dk-app-nav-bar :title="$t('moldingMoldManagementActiveTitle')" :leftArrow="false" @click-left="onClickLeft"></dk-app-nav-bar>
+    <dk-app-nav-bar :title="$t('moldingMoldManagementActiveTitle')" leftText="返回"
+                    rightText="操作" @click-left="onClickLeft" @click-right="onClickRight"></dk-app-nav-bar>
     <van-sticky :offset-top="46">
       <dk-app-search :placeholder="$t('moldingMoldManagementSearchPlaceholder')"></dk-app-search>
     </van-sticky>
+
+
     <!--    主体-->
     <div class="main">
       <!--  列表-->
@@ -19,15 +22,15 @@
                 </div>
 
               </div>
-<!--              TODO 未完成-->
+              <!--              TODO 未完成-->
               <div style="width: 90%;">
-                <dk-app-cell title="模具编号" :value="item.name" :center="true" ></dk-app-cell>
-                <dk-app-cell :title="$t('uniqueCode')" :value="item.name" :center="true" ></dk-app-cell>
-                <dk-app-cell title="产品编码" :value="item.name" :center="true" ></dk-app-cell>
-                <dk-app-cell title="注浆次数" :value="item.name" :center="true" ></dk-app-cell>
-                <dk-app-cell title="开始日期" :value="item.name" :center="true" ></dk-app-cell>
-                <dk-app-cell title="备注" :value="item.name" :center="true" ></dk-app-cell>
-                <dk-app-cell title="操作备注" :value="item.name" :center="true" ></dk-app-cell>
+                <dk-app-cell title="模具编号" :value="item.name" :center="true"></dk-app-cell>
+                <dk-app-cell :title="$t('uniqueCode')" :value="item.name" :center="true"></dk-app-cell>
+                <dk-app-cell title="产品编码" :value="item.name" :center="true"></dk-app-cell>
+                <dk-app-cell title="注浆次数" :value="item.name" :center="true"></dk-app-cell>
+                <dk-app-cell title="开始日期" :value="item.name" :center="true"></dk-app-cell>
+                <dk-app-cell title="备注" :value="item.name" :center="true"></dk-app-cell>
+                <dk-app-cell title="操作备注" :value="item.name" :center="true"></dk-app-cell>
 
 
               </div>
@@ -40,7 +43,10 @@
       </div>
 
     </div>
+
+    <dk-app-popup :showPopup="showPopup" :gridItemList="gridItemList" @onClose="onClose" @onClick="onClick"></dk-app-popup>
   </div>
+
 </template>
 
 <script>
@@ -51,7 +57,19 @@ export default {
   mixins: [appIndexMixin],
   data() {
     return {
-
+      showPopup: false,
+      gridItemList: [
+        {
+          gridName:'上模',
+          imagePath:'1',
+          path:'test'
+        },
+        {
+          gridName:'卸模',
+          imagePath:'1',
+          path:'test'
+        }
+      ],
       tableData: [
         {
           title: '模具变化',
@@ -66,10 +84,26 @@ export default {
       ]
     }
   },
-  methods:{
-    onClickLeft(){
+  methods: {
+    //点击标题左侧返回事件
+    onClickLeft() {
       this.$router.go(-1)
     },
+    //点击标题右侧事件
+    onClickRight() {
+      console.log('onClickRight')
+      this.showPopup = true
+    },
+
+    //点击弹窗图标功能事件
+    onClick(item){
+      console.log(item)
+    },
+
+    //关闭pupop弹窗
+    onClose(){
+      this.showPopup = false
+    }
 
   }
 }