增加明细图详情

mini/app.json

@@ -31,7 +31,8 @@
     "pages/login/index",
     "pages/logs/logs",
     "pages/about/agreement",
-    "pages/detailInfo/detailinfo"
+    "pages/detailInfo/detailinfo",
+    "pages/detailInfo/detailData"
   ],
   "tabBar": {
     "custom": true,

mini/components/detail-table/index.wxss

@@ -16,8 +16,9 @@
   overflow: hidden;
 }
 .sg-box {
-  display: flex;
+  /* display: flex;
   align-items: center;
-  justify-content: center;
+  justify-content: center; */
+  display: inline-block;
   padding-top: 50rpx;
 }

mini/pages/data-center/index.js

@@ -306,9 +306,10 @@ Page({
         },
         series: [{
           type: type,
-          data: data.data
+          data: data.data,
+          left:"center",
         }],
-        width: "100%",
+        width: "70%",
         xAxis: {},
         yAxis: {},
         tooltip: {},

mini/pages/data-center/index.wxml

@@ -74,7 +74,7 @@
       </view>
       <view class="sg-chart">
         <block wx:if="{{chartIndex == 4}}">
-          <detail-table bindtap="detailInfo" data="{{detail_data}}"></detail-table>
+          <detail-table bindtap="detailInfo" data="{{detail_data}}" class="sg-flex" style=" justify-content: center;"></detail-table>
         </block>
         <block wx:else>
           <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>

mini/pages/detailInfo/detailData.js

@@ -0,0 +1,88 @@
+// pages/detailInfo/detailData.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    th: ["租赁设备", "提交人", "金额"],
+    td: [
+      [
+        "滴滴滴",
+        "18399997777",
+        "多喝水",
+      ],
+      [
+        "滴滴滴2",
+        "18399997777",
+        "多喝水",
+      ],
+      [
+        "滴滴滴3",
+        "18399997777",
+        "多喝水",
+      ],
+      [
+        "滴滴滴4",
+        "18399997777",
+        "多喝水",
+      ]
+    ],
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

mini/pages/detailInfo/detailData.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

mini/pages/detailInfo/detailData.wxml

@@ -0,0 +1,79 @@
+<view class="sg-container sg-index-bg" style="padding-bottom:0">
+  <view class="sg-white sg-bold"
+    style="font-size:36rpx;height:160rpx; display: flex;flex-direction: column;justify-content: flex-end;margin-left:25rpx">
+    账单详情
+    <view style="font-size:26rpx;margin-top:15rpx">
+      请查看账单详情，有疑问请联系管理员
+    </view>
+  </view>
+  <view class="sg-chart-box" style="background:#fff">
+    <view class="sg-flex sg-pad sg-align-center sg-space-between">
+      <!-- <picker mode="date" value="{{date}}" start="{{min_date}}" end="{{max_date}}" bindchange="onChange"
+        data-name="date" fields="month">
+        <view class="picker">
+          <view class="sg-font-small sg-pad-tb-sm sg-flex sg-align-center" style="color:#5693FC">
+            <text style="margin-right:8rpx">{{date}}</text>
+            <van-icon name="arrow-down" class="sg-icon"></van-icon>
+          </view>
+        </view>
+      </picker> -->
+    </view>
+    <view class="sg-item sg-white-bg sg-pad">
+      <view class="sg-top sg-flex sg-space-between sg-pad-bottom-sm sg-font-small sg-bold">
+        <view class="sg-name sg-flex sg-align-center">
+          账单单号：
+        </view>
+        <view class="sg-flex sg-align-center" style="">
+          <view class="sg-status sg-flex sg-align-center">
+            <view class="sg-status-name" style="color:#000;font-size:26rpx">LYD202010112</view>
+          </view>
+        </view>
+      </view>
+      <view class="sg-body sg-font-xs sg-bottom-border  sg-pad-bottom-sm">
+        <view class="sg-item sg-margin-tb-sm sg-flex">
+          <view class="sg-left-item sg-width-50">年月：</view>
+          <view class="sg-right-item sg-width-50" style="text-align: right;">2020年10月</view>
+        </view>
+        <view class="sg-item sg-margin-tb-sm sg-flex">
+          <view class="sg-left-item sg-width-50">金额：</view>
+          <view class="sg-right-item sg-width-50" style="text-align: right;">8600元</view>
+        </view>
+        <view class="sg-item sg-margin-tb-sm sg-flex">
+          <view class="sg-right-item sg-width-50">单位：</view>
+          <view class="sg-right-item sg-width-50" style="text-align: right;">运营中心</view>
+        </view>
+        <view class="sg-item sg-margin-tb-sm sg-flex">
+          <view class="sg-right-item sg-width-50">对应项目：</view>
+          <view class="sg-right-item sg-width-50" style="text-align: right;">xx项目</view>
+        </view>
+        <view class="sg-item sg-margin-tb-sm sg-flex">
+          <view class="sg-right-item sg-width-50">对账时间：</view>
+          <view class="sg-right-item sg-width-50" style="text-align: right;">2020-11-12</view>
+        </view>
+        <view class="sg-item sg-margin-tb-sm sg-flex">
+          <view class="sg-right-item sg-width-50">状态：</view>
+          <view class="sg-right-item sg-width-50" style="text-align: right;">待确认</view>
+        </view>
+      </view>
+    </view>
+    <!-- 账单明细 -->
+    <view>
+      <view class="titlestyle">
+        账单明细
+      </view>
+      <!-- 表格 -->
+      <view class="su-table-box">
+        <view class="su-table">
+          <!-- 表格标题 -->
+          <view class="su-tr">
+            <view class="su-th" wx:for="{{th}}" wx:key="index">{{item}}</view>
+          </view>
+          <!-- 表格内容 -->
+          <view class="su-tr" wx:for="{{td}}" wx:for-item="it" wx:for-index="in" wx:key="in">
+            <view class="su-td" wx:for="{{it}}" wx:key="index">{{item}}</view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</view>

mini/pages/detailInfo/detailData.wxss

@@ -0,0 +1,273 @@
+/* pages/detailInfo/detailData.wxss */
+/* pages/detailInfo/detailinfo.wxss */
+.sg-chart-box {
+  min-height: 90vh;
+  border-top-right-radius: 50rpx;
+  border-top-left-radius: 50rpx;
+  margin-top: 40rpx;
+}
+.sg-pad-top {
+  padding-top: 30rpx;
+}
+.sg-pad-bottom {
+  padding-bottom: 30rpx;
+}
+.sg-pad-bottom-sm {
+  padding-bottom: 15rpx;
+}
+.sg-pad-tb-sm {
+  padding-bottom: 15rpx;
+  padding-top: 15rpx;
+}
+.sg-pad-sm {
+  padding: 15rpx;
+}
+.sg-pad {
+  padding: 30rpx;
+}
+.sg-pad-lg {
+  padding: 50rpx;
+  box-sizing: border-box;
+}
+.sg-center {
+  text-align: center;
+}
+.sg-primary-color {
+  color: #195ED7;
+}
+.sg-white {
+  color: white;
+}
+.sg-center {
+  margin-left: auto;
+  margin-right: auto;
+}
+.sg-white-bg {
+  background: white;
+}
+.sg-gray-color {
+  color: rgba(16, 16, 16, 0.5);
+}
+.sg-gray-bg {
+  background: rgba(16, 16, 16, 0.5);
+}
+.sg-bold {
+  font-weight: bold;
+}
+.sg-border {
+  border: 1px solid #ebedf0;
+}
+.sg-bottom-border {
+  border-bottom: 1px solid #ebedf0;
+}
+.sg-top-border {
+  border-top: 1px solid #ebedf0;
+}
+.sg-border-right {
+  border-right: 1px solid #ebedf0;
+}
+.sg-margin {
+  margin: 30rpx;
+}
+.sg-margin-top-sm {
+  margin-top: 30rpx;
+}
+.sg-margin-top {
+  margin-top: 50rpx;
+}
+.sg-margin-bottom {
+  margin-bottom: 30rpx;
+}
+.sg-margin-right {
+  margin-right: 30rpx;
+}
+.sg-margin-tb {
+  margin: 30rpx 0;
+}
+.sg-pad-tb {
+  padding: 30rpx 0;
+}
+.sg-pad-tb-sm {
+  padding: 15rpx 0;
+}
+.sg-margin-tb-sm {
+  margin: 15rpx 0;
+}
+.sg-shadow {
+  box-shadow: 0px 4px 6px 1px #c9c9c9;
+}
+.sg-icon-img {
+  width: 50rpx;
+}
+.sg-font-lg {
+  font-size: 1.2rem;
+}
+.sg-font-xs {
+  font-size: 0.8rem;
+}
+.sg-font-small {
+  font-size: 0.9rem;
+}
+.sg-index-bg {
+  background-color: #5693FC;
+}
+.sg-index-color {
+  color: #5693FC;
+}
+.sg-tabs .sg-tab.sg-selected {
+  color: #5693FC;
+  border-color: #5693FC;
+}
+.sg-avatar {
+  width: 80rpx;
+  border-radius: 50%;
+  border: 2px solid white;
+}
+.sg-icon {
+  font-size: 1.2rem;
+}
+.sg-header {
+  font-size: 1.2rem;
+  font-weight: bold;
+}
+.sg-flex {
+  display: flex;
+}
+.sg-align-center {
+  align-items: center;
+}
+.sg-space-between {
+  justify-content: space-between;
+}
+.sg-just-center {
+  justify-content: center;
+}
+.sg-space-around {
+  justify-content: space-around;
+}
+.sg-flex-grow {
+  flex-grow: 1;
+}
+.sg-bottom-submit-box {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: white;
+}
+.sg-big-avatar {
+  width: 130rpx;
+  margin-right: 30rpx;
+  border-radius: 50%;
+}
+.sg-red {
+  color: #ee0a24;
+}
+.sg-red-bg {
+  background: #ee0a24;
+  color: white;
+}
+.sg-green {
+  color: #07c160;
+}
+.sg-green-bg {
+  background: #07c160;
+  color: white;
+}
+.sg-black {
+  color: black;
+}
+.sg-yellow {
+  color: #ff976a;
+}
+.sg-fix-bottom {
+  width: 100%;
+  position: fixed;
+  z-index: 100;
+  left: 0;
+  bottom: 0;
+}
+.sg-text-right {
+  text-align: right;
+}
+.sg-fix-top {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+}
+.sg-calendar .van-calendar {
+  z-index: 3000;
+}
+.sg-flex-column {
+  flex-direction: column;
+}
+.sg-block {
+  width: 100%;
+}
+.sg-dot {
+  width: 20rpx;
+  height: 20rpx;
+  border-radius: 50%;
+  margin-right: 20rpx;
+}
+.sg-width-50 {
+  width: 50%;
+}
+.titlestyle{
+  margin-left: 60rpx;
+  font-size: 30rpx;
+  font-weight: bold;
+  color: #5693FC;
+  position: relative;
+}
+.titlestyle::before{
+  content: '';
+  display: inline-block;
+  position: absolute;
+  width: 7rpx;
+  height: 40rpx;
+  color: #5693FC;
+  background-color: #5693FC;
+  left: -21rpx;
+}
+
+	.su-table-box {
+		height: 100%;
+		margin: 0rpx 30rpx;
+		overflow-x: auto;
+		padding-bottom: 40rpx;
+  }
+  .su-table {
+    margin-top: 50rpx;
+    display: table;
+    border-collapse: collapse; 
+    overflow-x: auto;
+    word-break: keep-all;
+    white-space: nowrap;
+    background-color: #FFFFFF;
+    width: 100%;
+  }
+  .su-td {
+    padding: 0rpx 30rpx;
+    display: table-cell; 
+    height: 60rpx;
+    line-height: 60rpx;
+    text-align: center;
+    border: 1rpx solid #DDDDDD;
+    border-right: none;
+  }
+  .su-th {
+    display: table-cell; 
+    height: 60rpx;
+    line-height: 60rpx;
+    text-align: center;
+    border: 1rpx solid #DDDDDD;
+    border-right: none;
+    border-bottom: none;
+    background-color: #87CEFA;
+    color: #FFFFFF;
+  }
+  .su-tr {
+    display: table-row;
+  }

mini/pages/detailInfo/detailinfo.js

@@ -1,18 +1,23 @@
 // pages/detailInfo/detailinfo.js
+import http from '../../utils/http'
+import util from '../../utils/util'
+import api from '../../utils/api'
 Page({
 
   /**
    * 页面的初始数据
    */
   data: {
-
+    min_date: "",
+    max_date: "",
+    date: ""
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
   onLoad: function (options) {
-
+    this.getDateInfo()
   },
 
   /**
@@ -21,7 +26,23 @@ Page({
   onReady: function () {
 
   },
-
+  getDateInfo() {
+    var that = this
+    http({
+      url: 'data/getDateInfo',
+      data: {},
+      success: function (res) {
+        if (res.code == 0) {
+          that.setData(res.data)
+        }
+      }
+    })
+  },
+  detailDatainfo(){
+    wx.navigateTo({
+      url: '../detailInfo/detailData',
+    })
+  },
   /**
    * 生命周期函数--监听页面显示
    */

mini/pages/detailInfo/detailinfo.wxml

@@ -1,2 +1,53 @@
-<!--pages/detailInfo/detailinfo.wxml-->
-<text>pages/detailInfo/detailinfo.wxml</text>
+<view class="sg-container sg-index-bg" style="padding-bottom:0">
+  <view class="sg-white sg-bold"
+    style="font-size:36rpx;height:160rpx; display: flex;flex-direction: column;justify-content: flex-end;margin-left:25rpx">
+    月度详情
+    <view style="font-size:26rpx;margin-top:15rpx">
+      请根据你需要查看都数据，选择筛选
+    </view>
+  </view>
+  <view class="sg-chart-box" style="background:#fff">
+    <view class="sg-flex sg-pad sg-align-center sg-space-between">
+      <picker mode="date" value="{{date}}" start="{{min_date}}" end="{{max_date}}" bindchange="onChange"
+        data-name="date" fields="month">
+        <view class="picker">
+          <view class="sg-font-small sg-pad-tb-sm sg-flex sg-align-center" style="color:#5693FC">
+            <text style="margin-right:8rpx">{{date}}</text>
+            <van-icon name="arrow-down" class="sg-icon"></van-icon>
+          </view>
+        </view>
+      </picker>
+    </view>
+
+    <view class="sg-item sg-white-bg sg-pad sg-margin-bottom" wx:for="{{6}}" wx:key="index" bindtap="detailDatainfo" data-index="{{index}}">
+      <view class="sg-top sg-flex sg-space-between sg-pad-bottom-sm sg-font-small sg-bold">
+        <view class="sg-name sg-flex sg-align-center">
+          账单单号：xxxxxx
+        </view>
+        <view class="sg-flex sg-align-center" wx:if="{{false}}" style="padding:10rpx;background-color: #5693FC;border-radius: 50rpx;">
+          <view class="sg-status sg-flex sg-align-center">
+            <view class="sg-status-name" style="color:#fff;font-size:26rpx">未确认</view>
+          </view>
+        </view>
+        <view class="sg-flex sg-align-center" wx:else style="padding:10rpx;background-color: #19be6b;border-radius: 50rpx;">
+          <view class="sg-status sg-flex sg-align-center">
+            <view class="sg-status-name" style="color:#fff;font-size:26rpx">已确认</view>
+          </view>
+        </view>
+      </view>
+      <view class="sg-body sg-font-xs sg-bottom-border  sg-pad-bottom-sm">
+        <view class="sg-item sg-margin-tb-sm sg-flex">
+          <view class="sg-left-item">年月：2020年9月</view>
+        </view>
+        <view class="sg-item sg-margin-tb-sm sg-flex">
+          <view class="sg-left-item sg-width-50">金额：10200元</view>
+          <view class="sg-right-item sg-width-50">对应项目：xx项目</view>
+        </view>
+        <view class="sg-item sg-margin-tb-sm sg-flex">
+          <view class="sg-right-item sg-width-50">确认人：项目经理</view>
+          <view class="sg-right-item sg-width-50">对账时间：2020-09-28</view>
+        </view>
+      </view>
+    </view>
+  </view>
+</view>

mini/pages/detailInfo/detailinfo.wxss

@@ -1 +1,215 @@
-/* pages/detailInfo/detailinfo.wxss */
+/* pages/detailInfo/detailinfo.wxss */
+.sg-chart-box {
+  min-height: 90vh;
+  border-top-right-radius: 50rpx;
+  border-top-left-radius: 50rpx;
+  margin-top: 40rpx;
+}
+.sg-pad-top {
+  padding-top: 30rpx;
+}
+.sg-pad-bottom {
+  padding-bottom: 30rpx;
+}
+.sg-pad-bottom-sm {
+  padding-bottom: 15rpx;
+}
+.sg-pad-tb-sm {
+  padding-bottom: 15rpx;
+  padding-top: 15rpx;
+}
+.sg-pad-sm {
+  padding: 15rpx;
+}
+.sg-pad {
+  padding: 30rpx;
+}
+.sg-pad-lg {
+  padding: 50rpx;
+  box-sizing: border-box;
+}
+.sg-center {
+  text-align: center;
+}
+.sg-primary-color {
+  color: #195ED7;
+}
+.sg-white {
+  color: white;
+}
+.sg-center {
+  margin-left: auto;
+  margin-right: auto;
+}
+.sg-white-bg {
+  background: white;
+}
+.sg-gray-color {
+  color: rgba(16, 16, 16, 0.5);
+}
+.sg-gray-bg {
+  background: rgba(16, 16, 16, 0.5);
+}
+.sg-bold {
+  font-weight: bold;
+}
+.sg-border {
+  border: 1px solid #ebedf0;
+}
+.sg-bottom-border {
+  border-bottom: 1px solid #ebedf0;
+}
+.sg-top-border {
+  border-top: 1px solid #ebedf0;
+}
+.sg-border-right {
+  border-right: 1px solid #ebedf0;
+}
+.sg-margin {
+  margin: 30rpx;
+}
+.sg-margin-top-sm {
+  margin-top: 30rpx;
+}
+.sg-margin-top {
+  margin-top: 50rpx;
+}
+.sg-margin-bottom {
+  margin-bottom: 30rpx;
+}
+.sg-margin-right {
+  margin-right: 30rpx;
+}
+.sg-margin-tb {
+  margin: 30rpx 0;
+}
+.sg-pad-tb {
+  padding: 30rpx 0;
+}
+.sg-pad-tb-sm {
+  padding: 15rpx 0;
+}
+.sg-margin-tb-sm {
+  margin: 15rpx 0;
+}
+.sg-shadow {
+  box-shadow: 0px 4px 6px 1px #c9c9c9;
+}
+.sg-icon-img {
+  width: 50rpx;
+}
+.sg-font-lg {
+  font-size: 1.2rem;
+}
+.sg-font-xs {
+  font-size: 0.8rem;
+}
+.sg-font-small {
+  font-size: 0.9rem;
+}
+.sg-index-bg {
+  background-color: #5693FC;
+}
+.sg-index-color {
+  color: #5693FC;
+}
+.sg-tabs .sg-tab.sg-selected {
+  color: #5693FC;
+  border-color: #5693FC;
+}
+.sg-avatar {
+  width: 80rpx;
+  border-radius: 50%;
+  border: 2px solid white;
+}
+.sg-icon {
+  font-size: 1.2rem;
+}
+.sg-header {
+  font-size: 1.2rem;
+  font-weight: bold;
+}
+.sg-flex {
+  display: flex;
+}
+.sg-align-center {
+  align-items: center;
+}
+.sg-space-between {
+  justify-content: space-between;
+}
+.sg-just-center {
+  justify-content: center;
+}
+.sg-space-around {
+  justify-content: space-around;
+}
+.sg-flex-grow {
+  flex-grow: 1;
+}
+.sg-bottom-submit-box {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: white;
+}
+.sg-big-avatar {
+  width: 130rpx;
+  margin-right: 30rpx;
+  border-radius: 50%;
+}
+.sg-red {
+  color: #ee0a24;
+}
+.sg-red-bg {
+  background: #ee0a24;
+  color: white;
+}
+.sg-green {
+  color: #07c160;
+}
+.sg-green-bg {
+  background: #07c160;
+  color: white;
+}
+.sg-black {
+  color: black;
+}
+.sg-yellow {
+  color: #ff976a;
+}
+.sg-fix-bottom {
+  width: 100%;
+  position: fixed;
+  z-index: 100;
+  left: 0;
+  bottom: 0;
+}
+.sg-text-right {
+  text-align: right;
+}
+.sg-fix-top {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+}
+.sg-calendar .van-calendar {
+  z-index: 3000;
+}
+.sg-flex-column {
+  flex-direction: column;
+}
+.sg-block {
+  width: 100%;
+}
+.sg-dot {
+  width: 20rpx;
+  height: 20rpx;
+  border-radius: 50%;
+  margin-right: 20rpx;
+}
+.sg-width-50 {
+  width: 50%;
+}