bill.vue 9.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397
  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. onReady() {
  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. jumpPage(url){
  229. uni.navigateTo({
  230. url
  231. })
  232. }
  233. }
  234. }
  235. </script>
  236. <style lang="scss" scoped>
  237. .content{
  238. width: 100%;
  239. height: 100vh;
  240. .header{
  241. width: 100%;
  242. .headerList{
  243. width: 100%;
  244. box-sizing: border-box;
  245. padding:16rpx 20rpx;
  246. background: #fff;
  247. &:last-child{
  248. border-top:1rpx solid #e4e7ed;
  249. }
  250. .list_l{
  251. width:208rpx;
  252. text{
  253. font-size: 28rpx;
  254. color: #666666;
  255. margin-left: 10rpx;
  256. margin-right: 10rpx;
  257. }
  258. }
  259. .list_r{
  260. width: calc(100% - 208rpx);
  261. }
  262. }
  263. }
  264. .statistical{
  265. padding:20rpx;
  266. background: #fff;
  267. margin:10rpx 0;
  268. .statisticalList{
  269. &:first-child{
  270. width: 210rpx;
  271. }
  272. }
  273. text{
  274. &:last-child{
  275. color:$uni-color-warning;
  276. font-weight: 600;
  277. }
  278. }
  279. }
  280. .chooseCon{
  281. flex-grow: 1;
  282. overflow: auto;
  283. background-color: #fff;
  284. }
  285. .footer{
  286. background-color: #f8f8f8;
  287. padding: 20rpx;
  288. .f-mid{
  289. flex-grow: 1;
  290. color: #666;
  291. font-size: 0.8rem;
  292. > view{
  293. &:first-child{
  294. text{
  295. color: $uni-color-warning;
  296. vertical-align: middle;
  297. }
  298. }
  299. &:last-child{
  300. text{
  301. color: $uni-color-primary;
  302. vertical-align: middle;
  303. }
  304. }
  305. }
  306. .costBtn{
  307. width:70rpx;
  308. height: 40rpx;
  309. line-height: 40rpx;
  310. text-align: center;
  311. color:#fff;
  312. font-size: 20rpx;
  313. border-radius: 30rpx;
  314. background: #999;
  315. margin-left: 20rpx;
  316. }
  317. }
  318. }
  319. // 历史对账单弹窗
  320. .tabBox{
  321. height: 100vh;
  322. .tabs{
  323. flex-grow: 1;
  324. overflow: auto;
  325. padding: 20rpx;
  326. > view{
  327. flex-wrap: wrap;
  328. justify-content: space-between;
  329. > view{
  330. width: 45%;
  331. border: 1rpx solid #eee;
  332. padding: 15rpx;
  333. border-radius: 50rpx;
  334. text-align: center;
  335. margin-bottom: 15rpx;
  336. }
  337. .active{
  338. border:0;
  339. background-color: #0485F6;
  340. color: #fff;
  341. }
  342. }
  343. }
  344. .form-item-inp{
  345. border-bottom: 1rpx solid #eee;
  346. }
  347. .form-footer-btn{
  348. margin: 30upx;
  349. display: flex;
  350. justify-content: space-between;
  351. }
  352. .form-footer-btn {
  353. display: flex;
  354. .handle-btn {
  355. font-size: 28upx;
  356. margin: 0 10upx;
  357. flex: 1;
  358. }
  359. }
  360. }
  361. //打折弹窗
  362. .costPopup{
  363. padding:26rpx 20rpx 40rpx;
  364. box-sizing: border-box;
  365. .costPopupTit{
  366. text-align: center;
  367. font-weight: bold;
  368. }
  369. .costPopupCon{
  370. margin-top:40rpx;
  371. .costList{
  372. margin-bottom:20rpx;
  373. .label{
  374. color: $uni-text-color-grey;
  375. }
  376. }
  377. .costText{
  378. text-align: center;
  379. color: $uni-text-color-grey;
  380. font-size: 22rpx;
  381. margin-top:40rpx;
  382. &:last-child{
  383. font-weight: bold;
  384. color:$uni-color-error;
  385. font-size: 32rpx;
  386. line-height: 60rpx;
  387. margin-top:0rpx;
  388. margin-bottom: 50rpx;
  389. }
  390. }
  391. }
  392. }
  393. }
  394. </style>