江西小程序管理端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

263 lines
5.8 KiB

1 year ago
  1. <template>
  2. <!-- 结算明细 -->
  3. <view class="pageBgImg">
  4. <topNavbar title="结算明细"></topNavbar>
  5. <view class="pad">
  6. <searchRow placeholder="搜索学员姓名/学员手机号"/>
  7. </view>
  8. <scroll-view class="scroll-view_w" scroll-x="true" scroll-with-animation :scroll-into-view="'tab'+currentTab" scroll-left="140">
  9. <view class="tabs">
  10. <view class="tab" v-for="(item,index) in tabData" :key="index" @click="changeTab(item)" :class="{active: currentTab==item.id}" :id="'tab'+item.id">{{ item.text }}</view>
  11. <view class="rightPad"></view>
  12. </view>
  13. </scroll-view>
  14. <view class="content pad">
  15. <view class="month_row" @click="showDate=true">
  16. <!-- <view class="month">8</view>
  17. <view class="unit"></view> -->
  18. <view class="">{{ selectDate }}</view>
  19. <view class="iconFont">
  20. <u-icon name="arrow-down" color="#686B73" size="14"></u-icon>
  21. </view>
  22. </view>
  23. <view class="total">结算金额共计</view>
  24. <view class="record">
  25. <view class="card" v-for="(item,index) in 10" :key="index" @click="$goPage('/pages/indexEntry/settlement/detail/detail')">
  26. <stage/>
  27. </view>
  28. </view>
  29. </view>
  30. <u-popup :show="showDate" mode="bottom" :round="20" >
  31. <view class="popupCon">
  32. <view class="popTab">
  33. <view class="tabItem" :class="{active: currentPopTab==1}" @click="changePopTab(1)">月份选择</view>
  34. <view class="tabItem" :class="{active: currentPopTab==2}" @click="changePopTab(2)">自定义时间</view>
  35. </view>
  36. <view class="timer">
  37. <view class="tabCon" v-if="currentPopTab==1">
  38. <view class="dateBtn" @click="showDatePickerFn(1)" :class="{hui: !data1}">{{ date1 }}</view>
  39. <!-- <u-datetime-picker-my
  40. :show="show"
  41. v-model="value1"
  42. mode="year-month"
  43. :showToolbar="false"
  44. :visibleItemCount="4"
  45. @confirm="confirm"
  46. ></u-datetime-picker-my> -->
  47. </view>
  48. <view class="tabCon" v-else>
  49. <view class="dateBtn" :class="{hui: !data2}" @click="showDatePickerFn(2)">{{ date2 }}</view>
  50. <view class="to"></view>
  51. <view class="dateBtn" :class="{hui: !data3}" @click="showDatePickerFn(3)">{{ date3 }}</view>
  52. </view>
  53. <view class="btnBg" @click="selectDateClick">确定</view>
  54. <!-- <u-picker-my></u-picker-my> -->
  55. </view>
  56. </view>
  57. </u-popup>
  58. <u-datetime-picker
  59. :show="showDatePicker"
  60. v-model="value1"
  61. mode="year-month"
  62. :visibleItemCount="4"
  63. :closeOnClickOverlay="false"
  64. @confirm="confirmDatePicker"
  65. @cancel="cancelDatePicker"
  66. ></u-datetime-picker>
  67. </view>
  68. </template>
  69. <script>
  70. import stage from '../../tabbar/statistics/comp/stage.vue'
  71. export default {
  72. components: { stage },
  73. data() {
  74. return {
  75. date3: '',
  76. date2: '',
  77. date1: '',
  78. value1: '',
  79. showDate: false,
  80. showDatePicker: false,
  81. show: false,
  82. tabData: [{
  83. text: '全部',
  84. id: 10
  85. },
  86. {
  87. text: '阶段一',
  88. id: 0
  89. },
  90. {
  91. text: '阶段二',
  92. id: 1
  93. },
  94. {
  95. text: '阶段三',
  96. id: 2
  97. },
  98. {
  99. text: '阶段四',
  100. id: 3
  101. },
  102. {
  103. text: '阶段五',
  104. id: 4
  105. },
  106. {
  107. text: '阶段六',
  108. id: 5
  109. },
  110. ],
  111. currentTab: 2,
  112. currentPopTab: 2,
  113. currentBtnDate: 1,
  114. selectDate: '',//筛选日期
  115. }
  116. },
  117. methods: {
  118. // tab切换
  119. changeTab(val) {
  120. this.currentTab = val.id
  121. },
  122. // 切换选择时间的类型
  123. changePopTab(num) {
  124. this.currentPopTab = num
  125. },
  126. // 1打开时间选择器
  127. showDatePickerFn(num) {
  128. this.showDate = false
  129. this.showDatePicker = true
  130. this.currentBtnDate = num
  131. },
  132. // 2选择时间选择器里的时间
  133. confirmDatePicker(val) {
  134. this.showDate = true
  135. this.showDatePicker = false
  136. let date = uni.$u.date(val.value, 'yyyy-mm-dd')
  137. if(this.currentBtnDate==1) {
  138. date = uni.$u.date(val.value, 'yyyy-mm')
  139. }
  140. this['date'+this.currentBtnDate] = date
  141. },
  142. // 3最后确定具体选择使用什么时间
  143. selectDateClick() {
  144. this.showDate = false
  145. this.selectDate = this['date'+this.currentBtnDate]
  146. }
  147. }
  148. }
  149. </script>
  150. <style lang="scss" scoped>
  151. .scroll-view_w {
  152. width: 100%;
  153. margin: 30rpx 0 40rpx 0;
  154. .tabs {
  155. display: flex;
  156. flex-wrap: nowrap;
  157. padding: 0 0rpx 10rpx 32rpx;
  158. width: auto;
  159. .tab {
  160. width: 108rpx;
  161. height: 60rpx;
  162. border-radius: 8rpx;
  163. border: 2rpx solid #FFFFFF;
  164. font-size: 28rpx;
  165. color: #fff;
  166. text-align: center;
  167. line-height: 60rpx;
  168. margin-right: 28rpx;
  169. flex-shrink: 0;
  170. &.active {
  171. background-color: #fff;
  172. color: $themC;
  173. }
  174. &.all {
  175. width: 96rpx;
  176. }
  177. }
  178. .rightPad {
  179. min-width: 10rpx;
  180. height: 60rpx;
  181. }
  182. }
  183. }
  184. .month_row {
  185. display: flex;
  186. align-items: center;
  187. color: $themC;
  188. .month {
  189. font-size: 50rpx;
  190. font-weight: 600;
  191. }
  192. .unit {
  193. font-size: 30rpx;
  194. margin: 0 4rpx;
  195. }
  196. }
  197. .total {
  198. padding: 20rpx 0;
  199. }
  200. .card {
  201. margin-bottom: 24rpx;
  202. }
  203. .popupCon {
  204. height: 430rpx;
  205. .popTab {
  206. display: flex;
  207. padding: 40rpx 32rpx;
  208. .tabItem {
  209. font-size: 32rpx;
  210. color: #333;
  211. margin-right: 60rpx;
  212. &.active {
  213. color: $themC;
  214. position: relative;
  215. &::before {
  216. content: '';
  217. position: absolute;
  218. bottom: -20rpx;
  219. left: 50%;
  220. transform: translateX(-50%);
  221. width: 128rpx;
  222. height: 4rpx;
  223. background: #1989FA;
  224. border-radius: 3rpx;
  225. }
  226. }
  227. }
  228. }
  229. }
  230. .tabCon {
  231. display: flex;
  232. align-items: center;
  233. padding-left: 32rpx;
  234. padding-top: 20rpx;
  235. .dateBtn {
  236. width: 280rpx;
  237. height: 80rpx;
  238. border-radius: 10rpx;
  239. border: 2rpx solid #1989FA;
  240. line-height: 80rpx;
  241. text-align: center;
  242. color: $themC;
  243. font-size: 32rpx;
  244. &.hui {
  245. border: 2rpx solid #E8E9EC;
  246. }
  247. }
  248. .to {
  249. font-size: 32rpx;
  250. margin: 0 40rpx;
  251. }
  252. }
  253. .btnBg {
  254. width: 396rpx;
  255. margin: 34rpx auto 42rpx auto;
  256. }
  257. </style>