bill.vue 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392
  1. <template>
  2. <view class="content flex flex_column">
  3. <view class="header">
  4. <view class="headerList u-flex">
  5. <view class="list_l">
  6. <u-icon name="clock" color="#00aaff" size="32"></u-icon>
  7. <text>对账周期</text>
  8. <u-icon name="question-circle-fill" @click="tipShow = true" :color="wordColor" size="32"></u-icon>
  9. </view>
  10. <view class="list_r u-flex">
  11. <u-input v-model="brandName" @click="showSearch=true" disabled placeholder="请选择对账日期" />
  12. <u-icon name="arrow-right" color="#999" size="30"></u-icon>
  13. </view>
  14. </view>
  15. <view class="headerList u-flex">
  16. <view class="list_l">
  17. <u-icon name="account" color="#00aaff" size="32"></u-icon>
  18. <text>客户名称</text>
  19. </view>
  20. <view class="list_r u-flex">
  21. <u-input v-model="brandName" @click="jumpPage('/pages/sales/chooseCustomerBill')" disabled placeholder="请选择客户名称" />
  22. <u-icon name="arrow-right" color="#999" size="30"></u-icon>
  23. </view>
  24. </view>
  25. </view>
  26. <view class="statistical u-flex">
  27. <view class="statisticalList">
  28. <text>总单数:</text>
  29. <text>34</text>
  30. </view>
  31. <view class="statisticalList">
  32. <text>待收金额合计:</text>
  33. <text>¥123456.08</text>
  34. </view>
  35. </view>
  36. <view class="chooseCon">
  37. <billList :showCheck="true"></billList>
  38. </view>
  39. <view class="footer u-flex">
  40. <view class="f-left">
  41. <u-checkbox @change="allCheckeChange" v-model="allChecked" shape="circle">{{allChecked?'取消全选':'全选'}}</u-checkbox>
  42. </view>
  43. <view class="f-mid" @click="isDetailShow=!isDetailShow">
  44. <view class="u-flex">
  45. <view>待收:<text>¥80.00</text></view>
  46. <view style="margin-left: 6rpx;">/ 折后:<text>¥80.00</text></view>
  47. </view>
  48. <view class="u-flex">
  49. <view>
  50. 折让:<text>¥0.00</text>
  51. </view>
  52. <view class="costBtn" @click="costShow= true">
  53. 打折
  54. </view>
  55. </view>
  56. </view>
  57. <view class="f-btns">
  58. <u-button size="medium" @click="submitOrder" :custom-style="customBtnStyle" shape="circle" type="primary" hover-class="none" >发送对账单</u-button>
  59. </view>
  60. </view>
  61. <!-- 对账周期弹窗 -->
  62. <u-popup v-model="showSearch" mode="right" width="70%">
  63. <view class="tabBox">
  64. <view class="tabs">
  65. <view class="flex">
  66. <view :class="item.val==curTab?'active':'all'" v-for="item in placeTab" :key="item.val" @click="tabChange(item)">{{item.name}}</view>
  67. </view>
  68. </view>
  69. <view class="flex align_center form-item-inp" style="padding: 0 30rpx;" v-if="curTab == 6">
  70. <u-input clearable v-model="dateArray" disabled placeholder="请选择时间段" @click="showDate=true" />
  71. <u-icon name="arrow-down" color="#999"></u-icon>
  72. </view>
  73. <view class="form-footer-btn">
  74. <u-button class="handle-btn" shape="circle" size="medium" hover-class="none" @click="handleClean">重置</u-button>
  75. <u-button class="handle-btn" shape="circle" size="medium" hover-class="none" :custom-style="customBtnStyle" @click="handleSearch">查询</u-button>
  76. </view>
  77. </view>
  78. </u-popup>
  79. <!-- 选择日期范围 -->
  80. <u-calendar v-model="showDate" ref="rangeDate" @change="dateChange" mode="range"></u-calendar>
  81. <!-- 打折弹窗 -->
  82. <u-popup v-model="costShow" mode="center" :border-radius="20" closeable width="80%">
  83. <view class="costPopup">
  84. <view class="costPopupTit">
  85. 东莞市京步车证汽车服务中心
  86. </view>
  87. <view class="costPopupCon">
  88. <view class="costList">
  89. <text class="label">待收金额:</text>
  90. <text>¥527.00</text>
  91. </view>
  92. <view class="costList u-flex">
  93. <view class="label">折让金额:</view>
  94. <u-input v-model="value" type="number" :border="true" :height="50"/>
  95. </view>
  96. <view class="costText">
  97. 折让后金额
  98. </view>
  99. <view class="costText">
  100. ¥500.00
  101. </view>
  102. </view>
  103. <u-button type="primary" :custom-style="customStyle" shape="circle">确定</u-button>
  104. </view>
  105. </u-popup>
  106. <!-- 对账周期弹窗 -->
  107. <u-modal v-model="tipShow" :show-title="false" :content="tipContent" confirm-text="知道了"></u-modal>
  108. </view>
  109. </template>
  110. <script>
  111. import billList from './billListComponent.vue'
  112. export default {
  113. components: { billList },
  114. data() {
  115. return {
  116. params:{//配置时间选项
  117. year: true,
  118. month: true,
  119. day: true,
  120. hour: false,
  121. minute: false,
  122. second: false
  123. },
  124. checked:true,
  125. brandName:'',
  126. timeShow:false,
  127. customerShow:false,
  128. customBtnStyle: { // 自定义按钮样式
  129. borderColor: this.$config('primaryColor'),
  130. backgroundColor: this.$config('primaryColor'),
  131. color: '#fff',
  132. width:'180rpx'
  133. },
  134. wordColor:this.$config('infoColor'),
  135. customStyle:{
  136. borderColor: this.$config('primaryColor'),
  137. backgroundColor: this.$config('primaryColor'),
  138. color: '#fff',
  139. },
  140. allChecked:false,
  141. tipShow:false,
  142. value:'',
  143. tipContent:`账单周期指销售单的创建时间`,
  144. placeTab: [
  145. {
  146. name:'今日',
  147. val: '0'
  148. },
  149. {
  150. name:'昨日',
  151. val: '1'
  152. },
  153. {
  154. name:'本周',
  155. val: '2'
  156. },
  157. {
  158. name:'上周',
  159. val: '3'
  160. },
  161. {
  162. name:'本月',
  163. val: '4'
  164. },
  165. {
  166. name:'上月',
  167. val: '5'
  168. },
  169. {
  170. name:'自定义',
  171. val: '6'
  172. }
  173. ],
  174. curTab: '4',
  175. showSearch:false,
  176. showDate:false,
  177. costShow:false
  178. };
  179. },
  180. onLoad() {
  181. uni.setNavigationBarColor({
  182. frontColor: '#ffffff',
  183. backgroundColor: this.$config('primaryColor')
  184. })
  185. },
  186. onNavigationBarButtonTap() {
  187. // this.showSearch = true
  188. uni.navigateTo({
  189. url:'/pages/sales/billHistory'
  190. })
  191. },
  192. onBackPress() {
  193. if(this.showSearch){
  194. this.showSearch = false
  195. return true
  196. }
  197. },
  198. methods:{
  199. // 时间 change
  200. dateChange(date){
  201. this.dateArray = date.startDate + ' ~ ' + date.endDate
  202. this.queryPramas.beginDate = date.startDate + ' 00:00:00'
  203. this.queryPramas.endDate = date.endDate + ' 23:59:59'
  204. //#ifdef APP-PLUS
  205. this.webView.setTitleNViewButtonStyle(0, {
  206. "text":"\ue626 "+date.startDate.substr(5)+"至"+date.endDate.substr(5),
  207. "color": "#00aaff",
  208. "width": "130px"
  209. });
  210. //#endif
  211. },
  212. tabChange(data){
  213. this.curTab = data.val
  214. if(data.val != 6){
  215. //#ifdef APP-PLUS
  216. this.webView.setTitleNViewButtonStyle(0, {
  217. "text":"\ue626 "+data.name,
  218. "color": "#00aaff",
  219. "width": "80px"
  220. });
  221. //#endif
  222. }else{
  223. this.dateArray = ''
  224. this.queryPramas.beginDate = ''
  225. this.queryPramas.endDate = ''
  226. }
  227. },
  228. }
  229. }
  230. </script>
  231. <style lang="scss" scoped>
  232. .content{
  233. width: 100%;
  234. height: 100vh;
  235. .header{
  236. width: 100%;
  237. .headerList{
  238. width: 100%;
  239. box-sizing: border-box;
  240. padding:16rpx 20rpx;
  241. background: #fff;
  242. &:last-child{
  243. border-top:1rpx solid #e4e7ed;
  244. }
  245. .list_l{
  246. width:208rpx;
  247. text{
  248. font-size: 28rpx;
  249. color: #666666;
  250. margin-left: 10rpx;
  251. margin-right: 10rpx;
  252. }
  253. }
  254. .list_r{
  255. width: calc(100% - 208rpx);
  256. }
  257. }
  258. }
  259. .statistical{
  260. padding:20rpx;
  261. background: #fff;
  262. margin:10rpx 0;
  263. .statisticalList{
  264. &:first-child{
  265. width: 210rpx;
  266. }
  267. }
  268. text{
  269. &:last-child{
  270. color:$uni-color-warning;
  271. font-weight: 600;
  272. }
  273. }
  274. }
  275. .chooseCon{
  276. flex-grow: 1;
  277. overflow: auto;
  278. background-color: #fff;
  279. }
  280. .footer{
  281. background-color: #f8f8f8;
  282. padding: 20rpx;
  283. .f-mid{
  284. flex-grow: 1;
  285. color: #666;
  286. font-size: 0.8rem;
  287. > view{
  288. &:first-child{
  289. text{
  290. color: $uni-color-warning;
  291. vertical-align: middle;
  292. }
  293. }
  294. &:last-child{
  295. text{
  296. color: $uni-color-primary;
  297. vertical-align: middle;
  298. }
  299. }
  300. }
  301. .costBtn{
  302. width:70rpx;
  303. height: 40rpx;
  304. line-height: 40rpx;
  305. text-align: center;
  306. color:#fff;
  307. font-size: 20rpx;
  308. border-radius: 30rpx;
  309. background: #999;
  310. margin-left: 20rpx;
  311. }
  312. }
  313. }
  314. // 历史对账单弹窗
  315. .tabBox{
  316. height: 100vh;
  317. .tabs{
  318. flex-grow: 1;
  319. overflow: auto;
  320. padding: 20rpx;
  321. > view{
  322. flex-wrap: wrap;
  323. justify-content: space-between;
  324. > view{
  325. width: 45%;
  326. border: 1rpx solid #eee;
  327. padding: 15rpx;
  328. border-radius: 50rpx;
  329. text-align: center;
  330. margin-bottom: 15rpx;
  331. }
  332. .active{
  333. border:0;
  334. background-color: #0485F6;
  335. color: #fff;
  336. }
  337. }
  338. }
  339. .form-item-inp{
  340. border-bottom: 1rpx solid #eee;
  341. }
  342. .form-footer-btn{
  343. margin: 30upx;
  344. display: flex;
  345. justify-content: space-between;
  346. }
  347. .form-footer-btn {
  348. display: flex;
  349. .handle-btn {
  350. font-size: 28upx;
  351. margin: 0 10upx;
  352. flex: 1;
  353. }
  354. }
  355. }
  356. //打折弹窗
  357. .costPopup{
  358. padding:26rpx 20rpx 40rpx;
  359. box-sizing: border-box;
  360. .costPopupTit{
  361. text-align: center;
  362. font-weight: bold;
  363. }
  364. .costPopupCon{
  365. margin-top:40rpx;
  366. .costList{
  367. margin-bottom:20rpx;
  368. .label{
  369. color: $uni-text-color-grey;
  370. }
  371. }
  372. .costText{
  373. text-align: center;
  374. color: $uni-text-color-grey;
  375. font-size: 22rpx;
  376. margin-top:40rpx;
  377. &:last-child{
  378. font-weight: bold;
  379. color:$uni-color-error;
  380. font-size: 32rpx;
  381. line-height: 60rpx;
  382. margin-top:0rpx;
  383. margin-bottom: 50rpx;
  384. }
  385. }
  386. }
  387. }
  388. }
  389. </style>