图片上传组件

h5app/src/views/pages/demo/edit.vue

@@ -1,101 +1,103 @@
 <template>
-   <ion-page class="list-page">
-     <ion-header>
-       <ion-toolbar>
-         <ion-title>表单页面</ion-title>
-       </ion-toolbar>
-     </ion-header>
-     <ion-content>
-       <div class="bw-vue-form">
-         <div class="form-title">船舶信息编辑页面</div>
-         <div class="form-input">
-           <ion-label>船舶名称</ion-label>
-           <ion-input placeholder="请输入船舶名称"></ion-input>
-         </div>
-         <div class="form-input">
-           <ion-label>证件号码</ion-label>
-           <ion-input placeholder="请输入证件号码"></ion-input>
-         </div>
-         <div class="form-select">
-           <ion-label>船舶主体</ion-label>
-           <ion-select interface="action-sheet" placeholder="请选择船舶主体">
-             <ion-select-option value="apples">Apples</ion-select-option>
-             <ion-select-option value="oranges">Oranges</ion-select-option>
-             <ion-select-option value="bananas">Bananas</ion-select-option>
-           </ion-select>
-         </div>
-       </div>
+  <ion-page class="list-page">
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>表单页面</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content>
+      <div class="bw-vue-form">
+        <div class="form-title">船舶信息编辑页面</div>
+        <div class="form-input">
+          <ion-label>船舶名称</ion-label>
+          <ion-input placeholder="请输入船舶名称"></ion-input>
+        </div>
+        <div class="form-input">
+          <ion-label>证件号码</ion-label>
+          <ion-input placeholder="请输入证件号码"></ion-input>
+        </div>
+        <div class="form-select">
+          <ion-label>船舶主体</ion-label>
+          <ion-select interface="action-sheet" placeholder="请选择船舶主体">
+            <ion-select-option value="apples">Apples</ion-select-option>
+            <ion-select-option value="oranges">Oranges</ion-select-option>
+            <ion-select-option value="bananas">Bananas</ion-select-option>
+          </ion-select>
+        </div>
+      </div>
 
-       <div class="bw-vue-form">
-         <div class="form-title">个人基本信息详情页面</div>
-         <div class="form-detail">
-           <ion-label>社保号码</ion-label>
-           <ion-text>123456789</ion-text>
-         </div>
-         <div class="form-detail">
-           <ion-label>姓名</ion-label>
-           <ion-text>张xx</ion-text>
-         </div>
-         <div class="form-detail">
-           <ion-label>性别</ion-label>
-           <ion-text>男</ion-text>
-         </div>
-         <div class="form-detail">
-           <ion-label>民族</ion-label>
-           <ion-text>汉族</ion-text>
-         </div>
-         <div class="form-detail">
-           <ion-label>联系电话</ion-label>
-           <ion-text>123456789</ion-text>
-         </div>
-         <div class="form-detail">
-           <ion-label>简单介绍</ion-label>
-           <ion-text>上海张江综合性国家科学中心与合肥综合性国家科学中心携手实施“两心同创”，探路科技创新共同体建设。“合肥光源”和“上海光源”的合作，正是这一探索的生动实践</ion-text>
-         </div>
-       </div>
+      <div class="bw-vue-form">
+        <div class="form-title">个人基本信息详情页面</div>
+        <div class="form-detail">
+          <ion-label>社保号码</ion-label>
+          <ion-text>123456789</ion-text>
+        </div>
+        <div class="form-detail">
+          <ion-label>姓名</ion-label>
+          <ion-text>张xx</ion-text>
+        </div>
+        <div class="form-detail">
+          <ion-label>性别</ion-label>
+          <ion-text>男</ion-text>
+        </div>
+        <div class="form-detail">
+          <ion-label>民族</ion-label>
+          <ion-text>汉族</ion-text>
+        </div>
+        <div class="form-detail">
+          <ion-label>联系电话</ion-label>
+          <ion-text>123456789</ion-text>
+        </div>
+        <div class="form-detail">
+          <ion-label>简单介绍</ion-label>
+          <ion-text>
+            上海张江综合性国家科学中心与合肥综合性国家科学中心携手实施“两心同创”，探路科技创新共同体建设。“合肥光源”和“上海光源”的合作，正是这一探索的生动实践
+          </ion-text>
+        </div>
+      </div>
 
-       <div class="bw-vue-list">
-         <div class="list-title">列表页面</div>
-         <div class="list-content">
-           <ion-list>
-             <ion-item>
-               <ion-label>
-                 <div class="multi-title">
-                   <h2>广州市中医院同德门诊部</h2>
-                   <p>7.58km</p>
-                 </div>
-                 <p>广州市白云区27号</p>
-               </ion-label>
-             </ion-item>
-             <ion-item>
-               <ion-label>
-                 <h2>H3 Heading</h2>
-                 <p>Paragraph</p>
-               </ion-label>
-             </ion-item>
-             <ion-item>
-               <ion-label>
-                 <h2>H3 Heading</h2>
-                 <p>Paragraph</p>
-               </ion-label>
-             </ion-item>
-             <ion-item>
-               <ion-label>
-                 <h2>H3 Heading</h2>
-                 <p>Paragraph</p>
-               </ion-label>
-             </ion-item>
-           </ion-list>
-         </div>
-       </div>
-<!--       <div>
-         <b-qr-scan></b-qr-scan>
-       </div>-->
+      <div class="bw-vue-list">
+        <div class="list-title">列表页面</div>
+        <div class="list-content">
+          <ion-list>
+            <ion-item>
+              <ion-label>
+                <div class="multi-title">
+                  <h2>广州市中医院同德门诊部</h2>
+                  <p>7.58km</p>
+                </div>
+                <p>广州市白云区27号</p>
+              </ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>
+                <h2>H3 Heading</h2>
+                <p>Paragraph</p>
+              </ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>
+                <h2>H3 Heading</h2>
+                <p>Paragraph</p>
+              </ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-label>
+                <h2>H3 Heading</h2>
+                <p>Paragraph</p>
+              </ion-label>
+            </ion-item>
+          </ion-list>
+        </div>
+      </div>
+      <!--       <div>
+               <b-qr-scan></b-qr-scan>
+             </div>-->
 
-       <b-image :file-ref-id="'ssssss'" :readonly="false" :is-single="false"></b-image>
-     </ion-content>
+      <b-image :file-ref-id="fileRefId" :readonly="false" :is-single="false"></b-image>
+    </ion-content>
 
-   </ion-page>
+  </ion-page>
 </template>
 <script>
 import {defineComponent} from "vue";
@@ -103,11 +105,14 @@ import BQrScan from "@/components/bQrScan.vue";
 import BImage from "@/components/bImage.vue";
 
 export default defineComponent({
-  name:"demo_edit",
+  name: "demo_edit",
   // eslint-disable-next-line vue/no-unused-components
-  components:{BQrScan,BImage},
-  setup(){
-    return {}
+  components: {BQrScan, BImage},
+  setup() {
+    const fileRefId = "11111";//文件关键业务ID
+    return {
+      fileRefId
+    }
   }
 });
 </script>