为FastAdmin“文明随手拍”插件增加logo和背景图片的方法

为FastAdmin“文明随手拍”插件增加logo和背景图片的方法
目标：
给“文明随手拍”微信小程序“用户协议（agreement）”页面添加背景图片（agreement_bg）和顶部标题图片（agreement_title），效果如图：



操作方法：

1.打开 根目录/addons/keesuishoupai/config.php配置文件，在相应位置插入如下代码：

1. [
   
2.             'name' => 'agreement_title',
   
3.             'title' => '监督受理内容标题',
   
4.             'type' => 'image',
   
5.             'content' => [],
   
6.             'value' => '/assets/addons/keesuishoupai/img/agreement_title.png',
   
7.             'rule' => 'required',
   
8.             'msg' => '',
   
9.             'tip' => '',
   
10.             'ok' => '',
    
11.             'extend' => '',
    
12.         ],
    
13.         [
    
14.             'name' => 'agreement_bg',
    
15.             'title' => '监督受理内容背景',
    
16.             'type' => 'image',
    
17.             'content' => [],
    
18.             'value' => '/assets/addons/keesuishoupai/img/agreement_bg.jpg',
    
19.             'rule' => 'required',
    
20.             'msg' => '',
    
21.             'tip' => '',
    
22.             'ok' => '',
    
23.             'extend' => '',
    
24.         ],

复制代码

2.打开 网站根目录 /addons/keesuishoupai/config.html 文件，查找如下一段代码：

1. $groupList = [
   
2. 'config'=>'labels,levels',
   
3. 'scoreshop'=>'scoreshop_open,score_desc',
   
4. 'site'=>'swiperInfo,logo,login_bg,name,phone,email,address,qqmapkey,lat,lng',
   
5. 'wxapp'=>'wxappid,wxappsecret'
   
6. ];

复制代码

修改site代码段，添加agreement_title,agreement_bg，添加后代码如下：
'site'=>'swiperInfo,logo,login_bg,agreement_title,agreement_bg,name,phone,email,address,qqmapkey,lat,lng',

3.打开网站根目录 /addons/keesuishoupai/controller/api/Common.php 文件，在相应位置添加如下代码：

1. $config['agreement_title'] = cdnurl($config['agreement_title'], true);
   
2. $config['agreement_bg'] = cdnurl($config['agreement_bg'], true);

复制代码

4.打开小程序前端展示页 uniapp/pages/index/index.vue，在相应位置添加如下代码：
<view class="page" :style="{backgroundImage:'url('+ vuex_config.agreement_bg + ')'}">

<u-image width="750rpx" height="350rpx" :src="vuex_config.agreement_title">
</u-image>

添加好后，完整代码如下：

1. <template>
   
2.         <view class="page" :style="{backgroundImage:'url('+ vuex_config.agreement_bg + ')'}">
   
3.                 <view class="page__bd">
   
4.                         <u-image width="750rpx" height="350rpx" :src="vuex_config.agreement_title">
   
5.                         </u-image>
   
6.                         <view class="content">
   
7.                                 <view class="title u-p-b-30 desc">监督受理内容</view>
   
8.                                 <view>
   
9.                                         <u-parse :html="vuex_config.agreement"></u-parse>
   
10.                                 </view>
    
11.                         </view>
    
12.                 </view>
    
13.                 <view class="page__ft">
    
14.                         <view class="know">
    
15.                                 <u-cell-item class="u-p-l-0 u-p-r-0" hover-class="none" icon="checkmark-circle" :arrow="false"
    
16.                                         title="我已认真阅读并了解以上内容">
    
17.                                 </u-cell-item>
    
18.                         </view>
    
19.                         <u-button type="success" shape="circle" :ripple="true" @click="navTo('/pages/report/submit')">我要监督
    
20.                         </u-button>
    
21. 
    
22.                 </view>
    
23.         </view>
    
24. </template>
    
25. <style>
    
26.         .page {
    
27.                 background-color: #f4f4f4;
    
28.                 background-position: center;
    
29.                 background-size: cover;
    
30.                 background-repeat: no-repeat;
    
31.         }
    
32.         .page__bd {
    
33.                 padding-bottom: 10rpx;
    
34.         }
    
35. 
    
36.         .content {
    
37.                 background-color: #ffffff;
    
38.                 border-radius: 30rpx;
    
39.                 padding: 50rpx 30rpx;
    
40.                 width: calc(100% - 100rpx);
    
41.                 margin-left: auto;
    
42.                 margin-right: auto;
    
43.                 box-shadow: 4px 4px 10px #e0e0e0;
    
44.                 position: relative;
    
45.                 z-index: 100;
    
46.                 margin-top: -100rpx;
    
47.         }
    
48. 
    
49.         .content .title {
    
50.                 text-align: center;
    
51.                 font-weight: 600;
    
52.                 font-size: 46rpx;
    
53.                 margin-bottom: 10rpx;
    
54.                 border-bottom: 1rpx solid #eeeeee;
    
55.                 padding-bottom: 30rpx;
    
56.                 color: #666666;
    
57.         }
    
58. 
    
59.         .page__ft {
    
60.                 flex-shrink: 0;
    
61.                 padding: 0rpx 50rpx 30rpx 50rpx;
    
62.                 background-color: #f4f4f4;
    
63.         }
    
64. 
    
65.         .know {
    
66.                 padding-left: 30rpx;
    
67.         }
    
68. </style>

复制代码