新增公司信息,将合同与公司信息封装为组件

main.js

@@ -3,8 +3,10 @@ import store from './store'
 
 import uView from '@/uni_modules/uview-ui'
 import taskCard from "@/components/taskCard/taskCard.vue"
+import company from "@/components/company/company.vue"
 Vue.use(uView)
 Vue.use(taskCard)
+Vue.use(company)
 // #ifndef VUE3
 import Vue from 'vue'
 Vue.config.productionTip = false

manifest.json

@@ -25,6 +25,7 @@
             /* android打包配置 */
             "android" : {
                 "permissions" : [
+                    "<uses-permission android:name=\"android.permission.CALL_PHONE\"/>",
                     "<uses-feature android:name=\"android.hardware.camera\"/>",
                     "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
                     "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",

pages.json

@@ -170,6 +170,24 @@
                     "enablePullDownRefresh": false
                 }
                 
+                }
+                ,{
+                    "path" : "companyInfo/companyInfo",
+                    "style" :                                                                                    
+                {
+                    "navigationBarTitleText": "公司信息",
+                    "enablePullDownRefresh": false
+                }
+                
+                }
+                ,{
+                    "path" : "companySign/companySign",
+                    "style" :                                                                                    
+                {
+                    "navigationBarTitleText": "签约公司详情",
+                    "enablePullDownRefresh": false
+                }
+                
                 }
             ]
   }],

pages/oaHome/oaHome.vue

@@ -5,10 +5,11 @@
     <view class="home_header">
       <!-- #ifdef APP-PLUS||H5 -->
       <view style="height: var(--status-bar-height);"></view>
+      <view style="height: 100rpx"></view>
       <!-- #endif -->
       <view class="my_info flex_a_c">
         <view class="">
-          <u--image :showLoading="true" :src="myOaInfo.avatar||''" width="64px" height="64px" shape="circle"></u--image>
+          <u--image :showLoading="true" :src="myOaInfo.avatar||''" width="112.28rpx" height="112.28rpx" shape="circle"></u--image>
         </view>
         <view class="mesg_box">
           <view class="name">{{ myOaInfo.nickname }} {{ myOaInfo.mobile }}</view>
@@ -112,11 +113,11 @@
         oaHomeData: oaHomeData,
         src: 'https://cdn.uviewui.com/uview/album/1.jpg',
         assessData: [{
-            num: '8',
+            num: '0',
-            name: '岗位任务'
+            name: '任务'
           },
           {
-            num: '8',
+            num: '0',
             name: '已完成'
           },
           {
@@ -124,7 +125,7 @@
             name: '未完成'
           },
           {
-            num: '100%',
+            num: '0%',
             name: '完成率'
           },
         ],

pages/oaManager/oaManager.vue

@@ -9,7 +9,8 @@
       <u-search shape="round" placeholder="搜索片区经理" :showAction="false"></u-search>
       <!-- 筛选按钮 -->
       <view>
-        <u-popup :show="show" @close="show=false" @open="show=true" mode="top" overlayStyle="position: fixed;top:100rpx">
+        <u-popup :show="show" @close="show=false" @open="show=true" mode="top"
+          overlayStyle="position: fixed;top:100rpx">
           <!-- <view class="search_box">
             <view class="">
               <view class="first_order" v-for="item in orderData" :key="item.id" :class="item.id==typeid?'choose':''">
@@ -27,14 +28,14 @@
       </view>
     </view>
     <view class="list">
-      <view class="item" v-for="item in 0" :key="item">
+      <view class="item" v-for="item in 10" :key="item">
         <view class="left">
           <view class="top">
             <image class="avatar" src="../../static/logo.png"></image>
             <view class="text">
               <view class="name">经理名称</view>
               <view class="mobile">
-                联系人-13565632345
+                联系人-<text @click="copyPhone('17685151643')">13565632345</text>
               </view>
             </view>
           </view>
@@ -45,10 +46,10 @@
           </view>
         </view>
         <view class="right">
-          <view class="top">
+          <!-- <view class="top">
             发消息
-          </view>
+          </view> -->
-          <view class="bottom">
+          <view class="bottom" @click="callUp(17685151643)">
             拨打电话
           </view>
         </view>
@@ -59,33 +60,60 @@
 </template>
 
 <script>
-export default {
+  import { Toast } from '@/libs/uniApi.js'
-  data() {
+  export default {
-    return {
+    data() {
-       show: false,
+      return {
-       lastpage: '',
+        show: false,
-       loadingText: '努力加载中',
+        lastpage: '',
-       loadmoreText: '轻轻上拉',
+        loadingText: '努力加载中',
-       nomoreText: '我也是有底线的~~',
+        loadmoreText: '轻轻上拉',
-    }
+        nomoreText: '我也是有底线的~~',
-  },
+        status: 'loadmore'
-  onReady() {
+      }
-    uni.setNavigationBarColor({
+    },
-      frontColor: '#ffffff',
+    onReady() {
-      backgroundColor: '#3175f9'
+      uni.setNavigationBarColor({
-    })
+        frontColor: '#ffffff',
-  },
+        backgroundColor: '#3175f9'
-  onLoad() {},
+      })
-  onShow() {},
+    },
-  methods: {},
+    onLoad() {},
-  onPullDownRefresh() {
+    onShow() {},
+    methods: {
+      //拨打电话
+      callUp(phone) {
+        uni.makePhoneCall({
+          phoneNumber: phone+"",
+          success: (e) => {
+            console.log(e);
+          },
+          fail: (e) => {
+            Toast('页面跳转失败,请检查是否开启权限')
+          }
+        });
+      },
+      //复制号码
+      copyPhone(str=""){
+        uni.setClipboardData({
+          data:str+"",
+          success: (e) => {
+            Toast('号码已复制')
+          },
+          fail: (e) => {
+            Toast('复制失败')
+          }
+        })
+      }
+    },
+    onPullDownRefresh() {
       uni.stopPullDownRefresh()
     }
   }
 </script>
 
 <style lang="scss">
-.task_box {
+  .task_box {
     margin: 0 auto;
     width: 750rpx;
     height: 98rpx;
@@ -149,114 +177,131 @@ export default {
     }
 
   }
-.head_box{
+
-  width: 750rpx;
+  .head_box {
-  height: 98rpx;
+    width: 750rpx;
-  box-sizing: border-box;
+    height: 98rpx;
-  padding: 0 28rpx;
-  background-color: #FFFFFF;
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  .btn{
-    width: 149rpx;
-    height: 63rpx;
-    background: #FFFFFF;
-    border-radius: 35rpx 35rpx 35rpx 35rpx;
-    opacity: 1;
-    border: 2rpx solid #E6E5E5;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-}
-.list{
-  margin: 21rpx 28rpx;
-  padding-bottom: 21rpx;
-  .item{
-    width: 694rpx;
-    height: 231rpx;
-    background: #FFFFFF;
-    border-radius: 14rpx 14rpx 14rpx 14rpx;
-    opacity: 1;
-    margin-bottom: 21rpx;
     box-sizing: border-box;
-    padding: 28rpx;
+    padding: 0 28rpx;
+    background-color: #FFFFFF;
     display: flex;
-    justify-content: space-between;
+    justify-content: space-around;
-    .left{
+    align-items: center;
+
+    .btn {
+      width: 149rpx;
+      height: 63rpx;
+      background: #FFFFFF;
+      border-radius: 35rpx 35rpx 35rpx 35rpx;
+      opacity: 1;
+      border: 2rpx solid #E6E5E5;
       display: flex;
-      flex-direction: column;
+      align-items: center;
-      justify-content: space-between;
-      .top{
-        display: flex;
-        justify-content: left;
-        align-items: center;
-        .avatar{
-          width: 88rpx;
-          height: 88rpx;
-          border-radius: 50%;
-          margin-right: 18rpx;
-        }
-        .text{
-          display: flex;
-          justify-content: space-between;
-          flex-direction: column;
-          height: 100%;
-          .name{
-            font-size: 32rpx;
-            font-weight: 500;
-            color: #333333;
-          }
-          .mobile {
-            color: #999999;
-          }
-        }
-      }
-      .bottom{
-        display: flex;
-        justify-content: left;
-        align-items: center;
-        .circle{
-          width: 11rpx;
-          height: 11rpx;
-          opacity: 1;
-          border: 2rpx solid #34A853;
-          margin-right: 10rpx;
-          border-radius: 50%;
-        }
-        .green{
-          font-weight: 400;
-          color: #34A853;
-          line-height: 0rpx;
-          margin-right: 18rpx;
-          -webkit-background-clip: text;
-        }
-      }
-    }
-    .right{
-      height: 100%;
-      display: flex;
-      flex-direction: column;
       justify-content: center;
-      .top, .bottom{
+    }
-        width: 158rpx;
+  }
-        height: 53rpx;
+
-        background: #FFFFFF;
+  .list {
-        border-radius: 26rpx 26rpx 26rpx 26rpx;
+    margin: 21rpx 28rpx;
-        opacity: 1;
+    padding-bottom: 21rpx;
-        border: 2rpx solid #3274F9;
+
-        color: #3274F9;
+    .item {
+      width: 694rpx;
+      height: 231rpx;
+      background: #FFFFFF;
+      border-radius: 14rpx 14rpx 14rpx 14rpx;
+      opacity: 1;
+      margin-bottom: 21rpx;
+      box-sizing: border-box;
+      padding: 28rpx;
+      display: flex;
+      justify-content: space-between;
+
+      .left {
         display: flex;
-        align-items: center;
+        flex-direction: column;
-        justify-content: center;
+        justify-content: space-between;
+
+        .top {
+          display: flex;
+          justify-content: left;
+          align-items: center;
+
+          .avatar {
+            width: 88rpx;
+            height: 88rpx;
+            border-radius: 50%;
+            margin-right: 18rpx;
+          }
+
+          .text {
+            display: flex;
+            justify-content: space-between;
+            flex-direction: column;
+            height: 100%;
+
+            .name {
+              font-size: 32rpx;
+              font-weight: 500;
+              color: #333333;
+            }
+
+            .mobile {
+              color: #999999;
+            }
+          }
+        }
+
+        .bottom {
+          display: flex;
+          justify-content: left;
+          align-items: center;
+
+          .circle {
+            width: 11rpx;
+            height: 11rpx;
+            opacity: 1;
+            border: 2rpx solid #34A853;
+            margin-right: 10rpx;
+            border-radius: 50%;
+          }
+
+          .green {
+            font-weight: 400;
+            color: #34A853;
+            line-height: 0rpx;
+            margin-right: 18rpx;
+            -webkit-background-clip: text;
+          }
+        }
       }
-      .bottom{
+
-        border: 2rpx solid #F9AA32;
+      .right {
-        color: #F9AA32;
+        height: 100%;
-        margin-top: 18rpx;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+        .top,
+        .bottom {
+          width: 158rpx;
+          height: 53rpx;
+          background: #FFFFFF;
+          border-radius: 26rpx 26rpx 26rpx 26rpx;
+          opacity: 1;
+          border: 2rpx solid #3274F9;
+          color: #3274F9;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+        }
+
+        .bottom {
+          border: 2rpx solid #F9AA32;
+          color: #F9AA32;
+          margin-top: 18rpx;
+        }
       }
     }
   }
-}
+</style>
-</style>

pages/oaMy/oaMy.vue

@@ -4,8 +4,9 @@
       <image class="head_img" src="../../static/img/home/head-bg.png"></image>
       <!-- #ifdef APP-PLUS||H5 -->
       <view style="height: var(--status-bar-height);"></view>
+      <view style="height: 100rpx"></view>
       <!-- #endif -->
-      <view v-if="!oaUserInfo" class="my_head">
+      <view v-if="!$store.state.app.token" class="my_head">
         <view class="department flex_a_c">
           <view class="section">产品技术部</view>
           <view class="" @click="login">去登陆</view>
@@ -35,17 +36,16 @@
           <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">1000</view>
+              <view class="num">{{oaUserInfo.user_money||'0.00'}}</view>
               <view class="name">可提现金额</view>
             </view>
-            <view class="cent_item" @click="naviTo('/subpkg/finance/finance')">
+            <!-- <view class="cent_item" @click="naviTo('/subpkg/finance/finance')">
-              <!-- <view class="num">{{ oaUserInfo.department_money }}</view> -->
+              <view class="num">0.00</view>
-              <view class="num">0</view>
               <view class="name">冻结金额</view>
-            </view>
+            </view> -->
             <view class="cent_item" @click="naviTo('/subpkg/finance/finance')">
               <!-- <view class="num">{{ oaUserInfo.company_money }}</view> -->
-              <view class="num">0</view>
+              <view class="num">0.00</view>
               <view class="name">充值金额</view>
             </view>
           </view>
@@ -63,7 +63,8 @@
         </view>
       </block>
     </view>
-    <view class="log_out" @click="logout">退出登录</view>
+    <view class="log_out" v-if="$store.state.app.token" @click="logout">退出登录</view>
+    <view class="log_out" v-else @click="login">去登录</view>
     <!-- <tabbar></tabbar> -->
   </view>
 </template>
@@ -99,11 +100,9 @@
     methods: {
       ...mapActions(['getWxLogin']),
       login() {
-        // #ifndef H5 || APP
+        uni.navigateTo({
-        // #endif
+          url:'/pages/oaLogin/oaLogin'
-        // #ifdef MP-WEIXIN || MP
+        })
-        this.getWxLogin()
-        // #endif
       },
       logout(){
         let that = this;
@@ -185,7 +184,7 @@
 
   .personage {
     // position: relative;
-    padding: 42.11rpx 28.07rpx 28.07rpx 28.07rpx;
+    padding: 42.11rpx 0 28.07rpx 0;
     border-radius: 12px;
     // background-color: #fff;
     color: #fff;
@@ -223,6 +222,7 @@
       height: 170.18rpx;
       border-radius: 12px;
       background-color: rgba(#fff, 0.18);
+      justify-content: space-around;
 
       .cent_item {
         font-size: 24.56rpx;

static/server/server.js

@@ -191,7 +191,7 @@ export const oaHomeData = [
   {
     text: '公司信息',
     icon: prefix + 'oa/qjsq@2x.png',
-    // url: '/pages/views/leave_request'
+    url: '/subpkg/companyInfo/companyInfo'
   },
   {
     text: '人员管理',

subpkg/contract/contract.vue

@@ -49,6 +49,12 @@
     onShow() {
       this.initContractList()
     },
+    onReady() {
+      uni.setNavigationBarColor({
+        frontColor: '#ffffff',
+        backgroundColor: '#3175f9'
+      })
+    },
     methods: {
       naviTo(url) {
         url ?

subpkg/contractDetail/contractDetail.vue

@@ -1,87 +1,6 @@
 <template>
   <view class="">
-    <view class="item">
+    <company :id="id" type="contract"></company>
-      <view class="title">公司基本信息</view>
-      <view class="card">
-        <view class="top">
-          <view class="left">
-            <image></image>
-            <view class="text">
-              <view class="name">{{company.company_name}}</view>
-              <view class="code">社会代码{{company.organization_code}}</view>
-            </view>
-          </view>
-          <view class="right">{{company.company_type_name}}</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="left" @click="priview(company.qualification.bank_account)" :src="company.qualification.bank_account"></image>
-        <image class="right" @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/contract.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>
     <button class="back_btn" @click="naviBack">返回</button>
     <!-- <button class="stop_btn">终止合同</button> -->
   </view>
@@ -92,20 +11,17 @@
   export default {
     data() {
       return {
-        company: {
+        id: '',
-          qualification: { 
-            bank_account:"",
-            bank_accountB:"",
-            business_license:"",
-            business_licenseB:"",
-          },
-        },
-        contract: {},
-        users: []
       }
     },
     onLoad(options) {
-      this.initContract(options.id)
+      this.id = options.id
+    },
+    onReady() {
+      uni.setNavigationBarColor({
+        frontColor: '#ffffff',
+        backgroundColor: '#3175f9'
+      })
     },
     onShow() {},
     methods: {
@@ -118,41 +34,6 @@
       naviBack(){
         uni.navigateBack()
       },
-      async initContract(id) {
-        let res = await contractView({ id });
-        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'
-                        })
-                      }
-                    })
-                }
-              }
-            }
-        })
-      }
     },
     onPullDownRefresh() {
       uni.stopPullDownRefresh()
@@ -161,180 +42,7 @@
 </script>
 
 <style lang="scss">
-  .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: 102rpx;
-            height: 102rpx;
-            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;
-
-      .left {
-        width: 224rpx;
-        height: 319rpx;
-        background: #FFFFFF;
-        border-radius: 14rpx 14rpx 14rpx 14rpx;
-      }
-
-      .right {
-        width: 450rpx;
-        height: 318rpx;
-        background: #FFFFFF;
-        border-radius: 14rpx 14rpx 14rpx 14rpx;
-      }
-    }
-  }
-
   .back_btn {
     width: 694rpx;
     height: 84rpx;

subpkg/finance/finance.vue

@@ -21,6 +21,44 @@
           <view class="text">可提现金额0.00元</view>
         </view>
       </view>
+      <view class="bottom">
+        <view class="item">
+          <view>账户余额(元)</view>
+          <view class="num">0.00</view>
+        </view>
+        <u-line direction="col" length="40%" color="#999999FF"></u-line>
+        <view class="item">
+          <view>收益金额(元)</view>
+          <view class="num">0.00</view>
+        </view>
+      </view>
+    </view>
+    <view class="bill">
+      <uni-section titleFontSize="32rpx" type="line" title="账单流水"></uni-section>
+      <!-- <u-subsection :list="billTypeList" :current="current" mode="subsection"></u-subsection> -->
+      <view class="type_box">
+        <view class="type">
+          <view class="active">日账单</view>
+          <view>月账单</view>
+        </view>
+      </view>
+      <view class="card" v-for="item in 3" :key="item">
+        <view class="top">
+          <view class="blue">账单详情</view>
+          <view>账单日期：2023-06-15  18:00</view>
+        </view>
+        <view class="bottom">
+          <view class="left">
+            <view>收益金额(元)</view>
+            <view class="num">0.00</view>
+          </view>
+          <view class="right">
+            <view>支出金额:0.00</view>
+            <view>入账金额:0.00</view>
+          </view>
+        </view>
+      </view>
+      <button class="btn">提现余额</button>
     </view>
   </view>
 </template>
@@ -29,7 +67,9 @@
 export default {
   data() {
     return {
-      userInfo:{} 
+      userInfo:{},
+      billTypeList:['日账单','月账单'],
+      current: 0
     }
   },
   onLoad() {
@@ -56,9 +96,19 @@ export default {
 </script>
 
 <style lang="scss">
+page{
+  background-color: #fff;
+}
 .finance_head{
   background-color: #3274F9FF;
-  height: 500rpx;
+  height: 400rpx;
+  position: relative;
+  // box-shadow: 0 -10px 20px rgba(#fff, 0.9) inset;
+  background-image: linear-gradient(to top, rgba(#fff, 1), transparent);
+  // box-shadow: -10px -10px 40px rgba(#fff, 0.9);
+  background-size: 100% 35%;
+  background-repeat: no-repeat;
+  background-position: center bottom;
   .top{
     display: flex;
     justify-content: space-between;
@@ -112,5 +162,130 @@ export default {
       }
     }
   }
+  .bottom{
+    position: absolute;
+    bottom: -78rpx;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 694rpx;
+    height: 140rpx;
+    background: #FFFFFF;
+    box-shadow: 0rpx 0rpx 18rpx 2rpx rgba(50,116,249,0.1);
+    border-radius: 14rpx 14rpx 14rpx 14rpx;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    .item{
+      text-align: center;
+      font-size: 25rpx;
+      font-weight: 400;
+      color: #666666;
+      line-height: 39rpx;
+      .num{
+        font-size: 39rpx;
+        font-weight: 500;
+        color: #F02828;
+        line-height: 39rpx;
+      }
+    }
+  }
+}
+.bill{
+  // padding: 28rpx;
+  margin-top: 90rpx;
+  padding-bottom: 32rpx;
+  background-color: #f5f5f5;
+  .type_box{
+    background-color: #fff;
+    padding: 32rpx 0;
+    .type{
+      border-radius: 30rpx;
+      height: 52.5rpx;
+      width: 333rpx;
+      border: 1px solid #3274f9;
+      display: flex;
+      align-items: center;
+      overflow: hidden;
+      margin: 0 auto;
+      view{
+        flex: 1;
+        color: #3274f9;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .active{
+        background-color: #3274f9;
+        color: #fff;
+      }
+    }
+  }
+  .card{
+    padding: 28rpx;
+    background-color: #fff;
+    margin-bottom: 21rpx;
+    .top{
+      display: flex;
+      align-items: center;
+      font-size: 25rpx;
+      font-weight: 400;
+      color: #333333FF;
+      line-height: 39rpx;
+      .blue{
+        width: 137rpx;
+        height: 49rpx;
+        background: #3274F9;
+        border-radius: 26rpx 26rpx 26rpx 26rpx;
+        font-size: 25rpx;
+        font-weight: 400;
+        color: #FFFFFF;
+        line-height: 39rpx;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin-right: 28rpx;
+      }
+    }
+    .bottom{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      height: 160rpx;
+      .left{
+        flex: 1;
+        text-align: center;
+        font-size: 25rpx;
+        font-weight: 400;
+        color: #666666;
+        line-height: 39rpx;
+        .num{
+          font-size: 39rpx;
+          font-weight: 500;
+          color: #F02828;
+          line-height: 39rpx;
+        }
+      }
+      .right{
+        flex: 1;
+        font-size: 25rpx;
+        font-weight: 400;
+        color: #666666;
+        line-height: 39rpx;
+      }
+    }
+  }
+  .btn{
+    color: #fff;
+    border-radius: 100px;
+    text-align: center;
+    line-height: 84.21rpx;
+    margin: 0 auto;
+    margin-top: 84.21rpx;
+    width: 693.93rpx;
+    height: 84.21rpx;
+    background: #3274F9;
+    box-shadow: 0px 9px 26px 1px #E9EFF5;
+  }
 }
 </style>