背景图片组件的封装

components/base-background/README.md

@@ -0,0 +1 @@
+ 

components/base-background/base-background.vue

@@ -0,0 +1,54 @@
+<template>
+  <image 
+    class="background-image" 
+    :src="backgroundSrc" 
+    :mode="mode"
+    :style="customStyle"
+  ></image>
+</template>
+
+<script>
+import CommonEnum from "../../enum/common";
+
+export default {
+  name: 'BaseBackground',
+  props: {
+    // 背景图片源，如果不传则使用默认背景
+    src: {
+      type: String,
+      default: ''
+    },
+    // 图片裁剪模式
+    mode: {
+      type: String,
+      default: 'aspectFill'
+    },
+    // 自定义样式
+    customStyle: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  computed: {
+    CommonEnum() {
+      return CommonEnum
+    },
+    // 背景图片源，优先使用传入的src，否则使用默认背景
+    backgroundSrc() {
+      return this.src || CommonEnum.BACKGROUND
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.background-image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: -1;
+  border-radius: 16rpx;
+}
+</style> 

pages/monk/monkDetail.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="page">
     <custom-navbar title="高僧详情" />
-    <image class="background-image" :src="CommonEnum.BACKGROUND" mode="aspectFill"></image>
+    <base-background />
     <view class="container">
       <view class="header">
         <view class="content">
@@ -49,10 +49,12 @@ import CommonEnum from "../../enum/common";
 import MonkEnum from "../../enum/monk";
 import {getMonkDetail} from "../../api/monk/monkDetail.js";
 import CustomNavbar from "../../components/custom-navbar/custom-navbar.vue";
+import BaseBackground from "../../components/base-background/base-background.vue";
 
 export default {
   components: {
-    CustomNavbar
+    CustomNavbar,
+    BaseBackground
   },
   computed: {
     MonkEnum() {
@@ -128,15 +130,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.background-image {
+
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: -1;
-  border-radius: 16rpx;
-}
 
 .page {
   width: 100%;