新增公司信息\签约公司信息\优化页面,将合同与公司信息拆分成组件

api/company.js

@@ -0,0 +1,16 @@
+import oahttp from "@/utils/oahttp.js";
+
+/**
+ * 我的公司
+ */
+export const companyMine = (data) => oahttp.get('/company/mine', data)
+
+/**
+ * 公司列表
+ */
+export const companyIndex = (data) => oahttp.get('/company/index', data)
+
+/**
+ * 公司详情
+ */
+export const companyView = (data) => oahttp.get('/company/view', data)

api/pay.js

@@ -24,3 +24,8 @@ export const wechatJsConfig = (data) => oahttp.get('/wechat/jsConfig', data)
  * 支付状态
  */
 export const payStatus = (data) => oahttp.get('/pay/payStatus', data)
+
+/**
+ * 充值记录
+ */
+export const rechargeLists = (data) => oahttp.get('/recharge/lists', data)

components/company/company.vue

@@ -0,0 +1,358 @@
+<template>
+  <view>
+    <view class="item">
+      <view class="title">公司基本信息</view>
+      <view class="card">
+        <view class="top">
+          <view class="left">
+            <image src="../../static/img/contract/company.png"></image>
+            <view class="text">
+              <view class="name">{{company.company_name}}</view>
+              <view class="right">{{company.company_type_name||company.company_type}}</view>
+              <view class="code">社会代码{{company.organization_code}}</view>
+            </view>
+          </view>
+        </view>
+        <view class="bottom"><uni-icons type="location"></uni-icons><text class="location">负责区域:</text></view>
+      </view>
+    </view>
+    <view class="item">
+      <view class="title">
+        <text>联系人管理</text>
+        <!-- <view>新增</view> -->
+      </view>
+      <view class="card">
+        <view class="one">
+          <view class="linkman">主要联系人</view>
+          <view class="info">
+            <view class="info_item">姓名：{{company.master_name}}</view>
+            <view class="info_item">职位：{{company.master_position}}</view>
+            <view class="info_item">联系电话：{{company.master_phone}}</view>
+            <view class="info_item">邮箱：{{company.master_email}}</view>
+          </view>
+        </view>
+        <view style="height: 32rpx;"></view>
+        <view class="one" v-for="(other, index) in company.other_contacts" :key="index">
+          <view class="linkman">其他联系人</view>
+          <view class="info">
+            <view class="info_item">姓名：{{other.name}}</view>
+            <view class="info_item">职位：{{company.position}}</view>
+            <view class="info_item">联系电话：{{other.phone}}</view>
+            <view class="info_item">邮箱：{{other.email}}</view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="item">
+      <view class="title">资质信息</view>
+      <view class="image_box">
+        <image class="top" @click="priview(company.qualification.bank_account)" :src="company.qualification.bank_account"></image>
+        <image class="bottom" @click="priview(company.qualification.business_license)" :src="company.qualification.business_license"></image>
+      </view>
+    </view>
+    <view class="item">
+      <view class="title">电子合同</view>
+      <view class="card">
+        <view class="one">
+          <view class="linkman">{{contract.party_a_name}}</view>
+          <view class="info">
+            <view class="info_item">签约对象：{{contract.party_b_name}}</view>
+            <view class="info_item">合同类型：{{contract.contract_type_name}}</view>
+            <view class="info_item">合同编号：{{contract.contract_no}}</view>
+          </view>
+        </view>
+        <u-line color="#999999FF" style="margin: 31rpx 0;"></u-line>
+        <view class="contract">
+          <view class="left">
+            <image class="contract_img" src="../../static/img/contract/pdf.png"></image>
+            <view class="text">
+              <view class="name">合同</view>
+              <view>
+                <!-- <text class="nickname">张郭郭</text> -->
+                <text>{{contract.create_time}}</text>
+              </view>
+            </view>
+          </view>
+          <view class="right"
+            @click="naviTo('/subpkg/pdfView/pdfView?url=' + contract.file)">
+            <!-- <image class="icon"></image> -->
+            <uni-icons type="paperclip" color="#3274F9"></uni-icons>
+            <view>查看</view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  import { contractView } from "@/api/contract.js"
+  import { companyView } from "@/api/company.js"
+  export default {
+    name:"company",
+    data() {
+      return {
+        company: {
+          qualification: { 
+            bank_account:"",
+            bank_accountB:"",
+            business_license:"",
+            business_licenseB:"",
+          },
+        },
+        contract: {},
+        users: [],
+        current: 1
+      }
+    },
+    props: ['id','type'],
+    mounted() {
+      console.log(this.$props.type, this.$props.id);
+      this.initContract(this.$props.id, this.$props.type||null);
+    },
+    methods: {
+      naviTo(url) {
+        url ?
+          uni.navigateTo({
+            url: url
+          }) : Toast('暂未开放')
+      },
+      naviBack(){
+        uni.navigateBack()
+      },
+      async initContract(id, type="contract") {
+        let res;
+        //判断是合同还是公司
+        if(id&&(type=="contract"||type==null)) res = await contractView({ id });
+        else res = await companyView();
+        this.company = res.data.company;
+        this.user = res.data.user;
+        this.contract = res.data.contract;
+        // console.log(res.data);
+      },
+      //查看图片
+      priview(url){
+        uni.previewImage({
+          urls:[url],
+          longPressActions: {
+              itemList: ['保存图片'],
+              success: function(data) {
+                if (data.tapIndex === 0) {
+                  uni.saveImageToPhotosAlbum({
+                      filePath: url,
+                      success: function() {
+                        uni.showToast({
+                          title: '保存成功',
+                          icon: 'success'
+                        })
+                      },
+                      fail: function() {
+                        uni.showToast({
+                          title: '保存失败',
+                          icon: 'none'
+                        })
+                      }
+                    })
+                }
+              }
+            }
+        })
+      }
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+.item {
+      padding: 31.5rpx 28rpx;
+  
+      .title {
+        margin-bottom: 21rpx;
+        font-size: 35rpx;
+        font-weight: 500;
+        color: #333333;
+        display: flex;
+        justify-content: space-between;
+      }
+  
+      .card {
+        width: 694rpx;
+        // height: 231rpx;
+        padding: 28rpx;
+        background: #FFFFFF;
+        border-radius: 14rpx 14rpx 14rpx 14rpx;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+  
+        .top {
+          display: flex;
+          justify-content: space-between;
+  
+          .left {
+            display: flex;
+  
+            image {
+              width: 142rpx;
+              height: 142rpx;
+              margin-right: 28rpx;
+              background: #CCCCCC;
+              border-radius: 14rpx 14rpx 14rpx 14rpx;
+              opacity: 1;
+            }
+  
+            .text {
+              display: flex;
+              flex-direction: column;
+              justify-content: space-between;
+  
+              .name {
+                font-size: 32rpx;
+                font-weight: 500;
+                color: rgba(0, 0, 0, 0.8);
+              }
+  
+              .code {
+                font-size: 28rpx;
+                font-weight: 400;
+                color: #666666;
+              }
+            }
+          }
+  
+          .right {
+            font-size: 28rpx;
+            font-weight: 500;
+            color: #3274F9;
+          }
+        }
+  
+        .bottom {
+          display: flex;
+          align-items: center;
+          color: #666666FF;
+          margin-top: 32rpx;
+  
+          .location {
+            margin-left: 28rpx;
+          }
+        }
+  
+        .one {
+          .linkman {
+            height: 44rpx;
+            font-size: 32rpx;
+            font-weight: 500;
+            color: #333333;
+            margin-bottom: 28rpx;
+          }
+  
+          .info {
+            font-size: 28rpx;
+            font-weight: 400;
+            color: #666666;
+            line-height: 45rpx;
+          }
+        }
+  
+        .contract {
+          display: flex;
+          justify-content: space-between;
+  
+          .left {
+            display: flex;
+  
+            .contract_img {
+              width: 102rpx;
+              height: 102rpx;
+              background: #F5F5F5;
+              border-radius: 14rpx 14rpx 14rpx 14rpx;
+              margin-right: 21rpx;
+            }
+  
+            .text {
+              display: flex;
+              flex-direction: column;
+              justify-content: space-between;
+  
+              .name {
+                font-size: 32rpx;
+                ;
+                font-weight: 500;
+                color: rgba(0, 0, 0, 0.8);
+                line-height: 35rpx;
+              }
+  
+              .nickname {
+                margin-right: 35rpx;
+              }
+  
+              text {
+                height: 39rpx;
+                font-size: 28rpx;
+                font-weight: 400;
+                color: #666666;
+                line-height: 35rpx;
+              }
+            }
+          }
+  
+          .right {
+            font-size: 28rpx;
+            font-weight: 500;
+            color: #3274F9;
+            line-height: 35rpx;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+  
+            .icon {
+              width: 35rpx;
+              height: 39rpx;
+              background-color: #3274F9;
+              opacity: 1;
+              margin-right: 10rpx
+            }
+          }
+        }
+      }
+  
+      .image_box {
+        display: flex;
+        justify-content: space-between;
+        flex-direction: column;
+        align-items: center;
+  
+        image{
+          padding-bottom: 20rpx;
+          border-radius: 20rpx;
+          width: 650rpx;
+          height: 455rpx;
+        }
+      }
+    }
+  
+    .back_btn {
+      width: 694rpx;
+      height: 84rpx;
+      background: #3274F9;
+      border-radius: 42rpx 42rpx 42rpx 42rpx;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: #fff;
+      margin: 30rpx auto;
+    }
+  
+    .stop_btn {
+      width: 694rpx;
+      height: 84rpx;
+      border-radius: 42rpx 42rpx 42rpx 42rpx;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: #3274F9;
+      background-color: transparent;
+      margin: 30rpx auto;
+    }
+</style>

pages/oaMy/oaMy.vue

@@ -36,7 +36,8 @@
           <view class="ass_cent flex_a_c_j_sb">
             <view class="cent_item" @click="naviTo('/subpkg/finance/finance')">
               <!-- <view class="num">{{ oaUserInfo.achievements_money }}</view> -->
-              <view class="num">{{oaUserInfo.user_money||'0.00'}}</view>
+              <view class="num" v-if="eyeType">{{oaUserInfo.user_money||'0.00'}}</view>
+              <view class="num" v-if="!eyeType">****</view>
               <view class="name">账户余额(元)</view>
             </view>
             <!-- <view class="cent_item" @click="naviTo('/subpkg/finance/finance')">
@@ -45,7 +46,8 @@
             </view> -->
             <view class="cent_item" @click="naviTo('/subpkg/finance/finance')">
               <!-- <view class="num">{{ oaUserInfo.company_money }}</view> -->
-              <view class="num">0.00</view>
+              <view class="num" v-if="eyeType">{{oaUserInfo.income||'0.00'}}</view>
+              <view class="num" v-if="!eyeType">****</view>
               <view class="name">收益金额(元)</view>
             </view>
           </view>
@@ -97,6 +99,11 @@
       this.getOaUserInfo()
     },
     onShow() {},
+    computed:{
+      eyeType(){
+        return this.$store.state.config.eyeType;
+      }
+    },
     methods: {
       ...mapActions(['getWxLogin']),
       login() {

static/server/server.js

@@ -203,7 +203,7 @@ export const oaHomeData = [
     icon: prefix + 'oa/wcsq@2x.png'
   },
   {
-    text: '合同签订',
+    text: '合同管理',
     icon: prefix + 'oa/cgsq@2x.png',
     url: '/subpkg/contract/contract'
   },
@@ -217,7 +217,8 @@ export const oaHomeData = [
   },
   {
     text: '财务管理',
-    icon: prefix + 'oa/gengduo@2x.png'
+    icon: prefix + 'oa/gengduo@2x.png',
+    url: '/subpkg/finance/finance'
   },
   // {
   //   text: 'gong',

store/getters.js

@@ -2,6 +2,7 @@ export default {
   token: state => state.app.token,
   isLogin: state => !!state.app.token,
   userInfo: state => state.app.userInfo || {},
+  eyeType: state => state.config.eyeType || true,
 };
 // export default {
 //   token: state => 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJrYWlmYS5jcm1lYi5uZXQiLCJhdWQiOiJrYWlmYS5jcm1lYi5uZXQiLCJpYXQiOjE1NzcwODM1MzQsIm5iZiI6MTU3NzA4MzUzNCwiZXhwIjoxNTc3MDk0MzM0LCJqdGkiOnsiaWQiOjExMCwidHlwZSI6InVzZXIifX0.U-i1pbdRjyXI1gr79Uq2XBPZ89T8f5Ai9jwrR8woTwE',

store/modules/config.js

@@ -0,0 +1,21 @@
+import Cache from '@/utils/cache';
+const state = {
+  eyeType: Cache.get('eyeType') || true,
+};
+
+const mutations = {
+  SET_EYE_TYPE(state){
+    state.eyeType=!state.eyeType;
+    Cache.set('eyeType', state.eyeType);
+  }
+};
+
+const actions = {
+  
+};
+
+export default {
+  state,
+  mutations,
+  actions
+};

store/modules/index.js

@@ -8,6 +8,8 @@
 // | Author: CRMEB Team <admin@crmeb.com>
 // +----------------------------------------------------------------------
 import app from "./app";
+import config from "./config"
 export default {
-  app
+  app,
+  config
 };

subpkg/companyInfo/companyInfo.vue

@@ -0,0 +1,176 @@
+<template>
+  <view class="">
+    <view class="top_box">
+      <view class="item" :class="current==0?'active':''" @click="current=0">我的公司</view>
+      <view class="item" :class="current==1?'active':''"  @click="current=1">签约公司</view>
+    </view>
+    <view class="company" v-show="current==0">
+      <company></company>
+    </view>
+    <view class="company_list" v-show="current==1">
+      <view class="info_card" v-for="item in companyList" :key="item.id">
+        <view class="top">
+          <view>
+            <view class="info_name">{{item.company_name}}</view>
+            <view class="info_type">{{item.company_type}}</view>
+          </view>
+          <view class="btn" @click="naviTo('/subpkg/companySign/companySign?id='+item.id)">详情<uni-icons type="forward" color="#666666"></uni-icons></view>
+        </view>
+        <u-line ></u-line>
+        <view class="bottom">
+          <image src="../../static/img/contract/company.png"></image>
+          <view class="text">
+            <view>主要联系人：{{item.master_name}}</view>
+            <view>联系方式：{{item.master_phone}}</view>
+            <view>区县乡镇：{{item.city+'/'+item.street}}</view>
+            <!-- <view>片区经理：</view> -->
+          </view>
+        </view>
+      </view>
+      <u-loadmore :status="loadConfig.status" :loading-text="loadConfig.loadingText" :loadmore-text="loadConfig.loadmoreText" :nomore-text="loadConfig.nomoreText" />
+    </view>
+  </view>
+</template>
+
+<script>
+  import {companyIndex} from "@/api/company.js"
+  export default {
+    data() {
+      return {
+        current: 0,
+        loadConfig:{
+          page: 1,
+          limit: 15,
+          lastpage: '',
+          loadingText: '努力加载中',
+          loadmoreText: '轻轻上拉',
+          nomoreText: '我也是有底线的~~',
+          status: 'loadmore'
+        },
+        companyList: []
+      }
+    },
+    onLoad() {},
+    onShow() {
+      this.loadCompanyList();
+    },
+    onReady() {
+      uni.setNavigationBarColor({
+        frontColor: '#ffffff',
+        backgroundColor: '#3175f9'
+      })
+    },
+    onReachBottom() {
+      this.loadCompanyList();
+    },
+    methods: {
+      // 加载公司列表
+      async loadCompanyList(){
+        if(this.loadConfig.status=="nomore")return;
+        this.loadConfig.status="loading"
+        let res = await companyIndex({
+          page: this.loadConfig.page,
+          limit: this.loadConfig.limit
+        })
+        this.loadConfig.status="loadmore"
+        if(res.data.data.length<this.loadConfig.limit){
+          this.loadConfig.status="nomore"
+        }else {
+          this.loadConfig.page++;
+        }
+        this.companyList = [...this.companyList, ...res.data?.data]
+      },
+      naviTo(url) {
+        url ?
+          uni.navigateTo({
+            url: url
+          }) : Toast('暂未开放')
+      },
+      naviBack(){
+        uni.navigateBack()
+      },
+    },
+    onPullDownRefresh() {
+      uni.stopPullDownRefresh()
+    }
+  }
+</script>
+
+<style lang="scss">
+.top_box{
+  background-color: #fff;
+  display: flex;
+  
+  .item{
+    width: 175rpx;
+    height: 53rpx;
+    background: #F5F5F5FF;
+    color: #999999FF;
+    border-radius: 35rpx 35rpx 35rpx 35rpx;
+    opacity: 1;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 28rpx;
+  }
+  .active{
+    background: #3274F9;
+    color: #fff;
+  }
+}
+.company{
+  
+}
+.company_list{
+  padding-bottom: 32rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .info_card{
+    width: 694rpx;
+    // height: 300rpx;
+    background: #FFFFFF;
+    border-radius: 21rpx 21rpx 21rpx 21rpx;
+    margin-top: 28rpx;
+    padding: 24rpx;
+    .top{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 28rpx;
+      .info_name{
+        font-size: 32rpx;
+        font-weight: 500;
+        color: #333333;
+      }
+      .info_type{
+        font-size: 25rpx;
+        font-weight: 500;
+        color: #3274F9;
+        margin-top: 10rpx;
+      }
+      .btn{
+        font-size: 25rpx;
+        font-weight: 400;
+        color: #666666;
+        display: flex;
+        align-items: center;
+      }
+    }
+    .bottom{
+      display: flex;
+      margin-top: 28rpx;
+      image{
+        height: 140rpx;
+        width: 140rpx;
+        margin-right: 28rpx;
+      }
+      .text{
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+      }
+    }
+  }
+}
+</style>

subpkg/companySign/companySign.vue

@@ -0,0 +1,33 @@
+<template>
+  <view class="">
+    <company :id="id" type="company"></company>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      id: '' 
+    }
+  },
+  onLoad(options) {
+    this.id = options.id;
+  },
+  onShow() {},
+  onReady() {
+    uni.setNavigationBarColor({
+      frontColor: '#ffffff',
+      backgroundColor: '#3175f9'
+    })
+  },
+  methods: {},
+  onPullDownRefresh() {
+      uni.stopPullDownRefresh()
+    }
+  }
+</script>
+
+<style lang="scss">
+
+</style>

subpkg/finance/finance.vue

@@ -13,23 +13,27 @@
       </view>
       <view class="center">
         <view class="title">
-          <text style="margin-right: 20rpx;">账户总金额(元)</text><uni-icons type="eye" color="#fff"></uni-icons>
+          <text style="margin-right: 20rpx;">账户总金额(元)</text><uni-icons @click="updateEye()" :type="eyeType?'eye-filled':'eye-slash-filled'" color="#fff"></uni-icons>
         </view>
-        <view class="price">{{userInfo.user_money||0.00}}元</view>
+        <view class="price" v-show="eyeType">{{userInfo.user_money||0.00}}元</view>
+        <view class="price" v-show="!eyeType">****元</view>
         <view class="bubble">
           <!-- <image src="../../static/img/contract/bubble.png"></image> -->
-          <view class="text">可提现金额0.00元</view>
+          <view class="text" v-show="eyeType">可提现金额{{userInfo.user_money||0.00}}元</view>
+          <view class="text" v-show="!eyeType">可提现金额****元</view>
         </view>
       </view>
       <view class="bottom">
         <view class="item">
           <view>账户余额(元)</view>
-          <view class="num">0.00</view>
+          <view class="num" v-show="eyeType">{{userInfo.user_money||0.00}}</view>
+          <view class="num" v-show="!eyeType">****</view>
         </view>
         <u-line direction="col" length="40%" color="#999999FF"></u-line>
         <view class="item">
           <view>收益金额(元)</view>
-          <view class="num">0.00</view>
+          <view class="num" v-show="eyeType">{{userInfo.income||0.00}}</view>
+          <view class="num" v-show="!eyeType">****</view>
         </view>
       </view>
     </view>
@@ -38,8 +42,8 @@
       <!-- <u-subsection :list="billTypeList" :current="current" mode="subsection"></u-subsection> -->
       <view class="type_box">
         <view class="type">
-          <view class="active">日账单</view>
+          <view :class="current==0?'active':''" @click="changeBillType(0)">日账单</view>
-          <view>月账单</view>
+          <view :class="current==1?'active':''" @click="changeBillType(1)">月账单</view>
         </view>
       </view>
       <view class="card" v-for="item in 3" :key="item">
@@ -58,6 +62,7 @@
           </view>
         </view>
       </view>
+      
       <button class="btn">提现余额</button>
     </view>
   </view>
@@ -69,7 +74,7 @@ export default {
     return {
       userInfo:{},
       billTypeList:['日账单','月账单'],
-      current: 0
+      current: 0,
     }
   },
   onLoad() {
@@ -81,6 +86,11 @@ export default {
     })
   },
   onShow() {},
+  computed:{
+    eyeType(){
+      return this.$store.state.config.eyeType;
+    }
+  },
   methods: {
     naviTo(url) {
       url ?
@@ -88,6 +98,12 @@ export default {
           url: url
         }) : Toast('暂未开放')
     },
+    updateEye(){
+      this.$store.commit('SET_EYE_TYPE')
+    },
+    changeBillType(type){
+      this.current = type;
+    }
   },
   onPullDownRefresh() {
       uni.stopPullDownRefresh()

uni_modules/uni-section/changelog.md

@@ -0,0 +1,2 @@
+## 0.0.1（2022-07-22）
+- 初始化

uni_modules/uni-section/components/uni-section/uni-section.vue

@@ -0,0 +1,167 @@
+<template>
+	<view class="uni-section">
+		<view class="uni-section-header" @click="onClick">
+				<view class="uni-section-header__decoration" v-if="type" :class="type" />
+        <slot v-else name="decoration"></slot>
+
+        <view class="uni-section-header__content">
+          <text :style="{'font-size':titleFontSize,'color':titleColor}" class="uni-section__content-title" :class="{'distraction':!subTitle}">{{ title }}</text>
+          <text v-if="subTitle" :style="{'font-size':subTitleFontSize,'color':subTitleColor}" class="uni-section-header__content-sub">{{ subTitle }}</text>
+        </view>
+
+        <view class="uni-section-header__slot-right">
+          <slot name="right"></slot>
+        </view>
+		</view>
+
+		<view class="uni-section-content" :style="{padding: _padding}">
+			<slot />
+		</view>
+	</view>
+</template>
+
+<script>
+
+	/**
+	 * Section 标题栏
+	 * @description 标题栏
+	 * @property {String} type = [line|circle|square] 标题装饰类型
+	 * 	@value line 竖线
+	 * 	@value circle 圆形
+	 * 	@value square 正方形
+	 * @property {String} title 主标题
+	 * @property {String} titleFontSize 主标题字体大小
+	 * @property {String} titleColor 主标题字体颜色
+	 * @property {String} subTitle 副标题
+	 * @property {String} subTitleFontSize 副标题字体大小
+	 * @property {String} subTitleColor 副标题字体颜色
+	 * @property {String} padding 默认插槽 padding
+	 */
+
+	export default {
+		name: 'UniSection',
+    emits:['click'],
+		props: {
+			type: {
+				type: String,
+				default: ''
+			},
+			title: {
+				type: String,
+				required: true,
+				default: ''
+			},
+      titleFontSize: {
+        type: String,
+        default: '14px'
+      },
+			titleColor:{
+				type: String,
+				default: '#333'
+			},
+			subTitle: {
+				type: String,
+				default: ''
+			},
+      subTitleFontSize: {
+        type: String,
+        default: '12px'
+      },
+      subTitleColor: {
+        type: String,
+        default: '#999'
+      },
+			padding: {
+				type: [Boolean, String],
+				default: false
+			}
+		},
+    computed:{
+      _padding(){
+        if(typeof this.padding === 'string'){
+          return this.padding
+        }
+
+        return this.padding?'10px':''
+      }
+    },
+		watch: {
+			title(newVal) {
+				if (uni.report && newVal !== '') {
+					uni.report('title', newVal)
+				}
+			}
+		},
+    methods: {
+			onClick() {
+				this.$emit('click')
+			}
+		}
+	}
+</script>
+<style lang="scss" >
+	$uni-primary: #2979ff !default;
+
+	.uni-section {
+		background-color: #fff;
+    .uni-section-header {
+      position: relative;
+      /* #ifndef APP-NVUE */
+      display: flex;
+      /* #endif */
+      flex-direction: row;
+      align-items: center;
+      padding: 12px 10px;
+      font-weight: normal;
+
+      &__decoration{
+        margin-right: 6px;
+        background-color: $uni-primary;
+        &.line {
+          width: 4px;
+          height: 12px;
+          border-radius: 10px;
+        }
+
+        &.circle {
+          width: 8px;
+          height: 8px;
+          border-top-right-radius: 50px;
+          border-top-left-radius: 50px;
+          border-bottom-left-radius: 50px;
+          border-bottom-right-radius: 50px;
+        }
+
+        &.square {
+          width: 8px;
+          height: 8px;
+        }
+      }
+
+      &__content {
+        /* #ifndef APP-NVUE */
+        display: flex;
+        /* #endif */
+        flex-direction: column;
+        flex: 1;
+        color: #333;
+
+        .distraction {
+          flex-direction: row;
+          align-items: center;
+        }
+        &-sub {
+          margin-top: 2px;
+        }
+      }
+
+      &__slot-right{
+        font-size: 14px;
+      }
+    }
+
+    .uni-section-content{
+      font-size: 14px;
+    }
+	}
+</style>

uni_modules/uni-section/package.json

@@ -0,0 +1,87 @@
+{
+  "id": "uni-section",
+  "displayName": "uni-section 标题栏",
+  "version": "0.0.1",
+  "description": "标题栏组件",
+  "keywords": [
+    "uni-ui",
+    "uniui",
+    "标题栏"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+  "dcloudext": {
+    "category": [
+      "前端组件",
+      "通用组件"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": [
+      "uni-scss"
+    ],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}

uni_modules/uni-section/readme.md

@@ -0,0 +1,8 @@
+## Section 标题栏
+> **组件名：uni-section**
+> 代码块： `uSection`
+
+uni-section 组件主要用于文章、列表详情等标题展示
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-section)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839