bill.vue 5.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251
  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. </view>
  9. <view class="list_r u-flex">
  10. <u-input v-model="brandName" @click="timeShow=true" disabled placeholder="请选择对账日期" />
  11. <u-icon name="arrow-right" color="#999" size="30"></u-icon>
  12. </view>
  13. </view>
  14. <view class="headerList u-flex">
  15. <view class="list_l">
  16. <u-icon name="account" color="#00aaff" size="32"></u-icon>
  17. <text>客户名称</text>
  18. </view>
  19. <view class="list_r u-flex">
  20. <u-input v-model="brandName" @click="customerShow=true" disabled placeholder="请选择客户名称" />
  21. <u-icon name="arrow-right" color="#999" size="30"></u-icon>
  22. </view>
  23. </view>
  24. </view>
  25. <view class="statistical u-flex">
  26. <view class="statisticalList">
  27. <text>总单数:</text>
  28. <text>34</text>
  29. </view>
  30. <view class="statisticalList">
  31. <text>待收金额合计:</text>
  32. <text>¥123456.08</text>
  33. </view>
  34. </view>
  35. <view class="chooseCon">
  36. <view class="chooseList u-flex">
  37. <view class="checkbox">
  38. <u-checkbox v-model="checked" :name="productSn" @change="checkChange" size="40" shape="circle"></u-checkbox>
  39. </view>
  40. <view class="choose_r">
  41. <view class="u-flex u-row-between">
  42. <view class="billInfo u-flex">
  43. <text>2022-11-23</text>
  44. <view>待出库</view>
  45. <view>数字货架</view>
  46. </view>
  47. <view class="billOrder">
  48. XS211230001
  49. </view>
  50. </view>
  51. <view class="rigth_b u-flex u-row-between">
  52. <view>应收:¥12.00</view>
  53. <view>已收:¥12.00</view>
  54. <view>待收:<text>¥12.00</text></view>
  55. </view>
  56. </view>
  57. </view>
  58. </view>
  59. <view class="footer u-flex">
  60. <view class="f-left">
  61. <u-checkbox @change="allCheckeChange" v-model="allChecked" shape="circle">{{allChecked?'取消全选':'全选'}}</u-checkbox>
  62. </view>
  63. <view class="f-mid" @click="isDetailShow=!isDetailShow">
  64. <view class="u-flex">
  65. <view>待收:<text>¥80.00</text></view>
  66. <view style="margin-left: 6rpx;">/ 折后:<text>¥80.00</text></view>
  67. </view>
  68. <view class="u-flex">
  69. <view>
  70. 折让:<text>¥0.00</text>
  71. </view>
  72. <view class="costBtn">
  73. 打折
  74. </view>
  75. </view>
  76. </view>
  77. <view class="f-btns">
  78. <u-button size="medium" @click="submitOrder" :custom-style="customBtnStyle" shape="circle" type="primary" hover-class="none" >发送对账单</u-button>
  79. </view>
  80. </view>
  81. <!-- 时间、客户选择弹窗 -->
  82. <u-picker mode="time" v-model="timeShow" :params="params"></u-picker>
  83. <u-picker mode="selector" v-model="customerShow" :default-selector="[0]"></u-picker>
  84. </view>
  85. </template>
  86. <script>
  87. export default {
  88. data() {
  89. return {
  90. params:{//配置时间选项
  91. year: true,
  92. month: true,
  93. day: true,
  94. hour: false,
  95. minute: false,
  96. second: false
  97. },
  98. timeShow:false,
  99. customerShow:false,
  100. customBtnStyle: { // 自定义按钮样式
  101. borderColor: this.$config('primaryColor'),
  102. backgroundColor: this.$config('primaryColor'),
  103. color: '#fff',
  104. width:'180rpx'
  105. },
  106. allChecked:false
  107. };
  108. },
  109. onLoad() {
  110. uni.setNavigationBarColor({
  111. frontColor: '#ffffff',
  112. backgroundColor: this.$config('primaryColor')
  113. })
  114. },
  115. methods:{
  116. }
  117. }
  118. </script>
  119. <style lang="scss" scoped>
  120. .content{
  121. width: 100%;
  122. height: 100vh;
  123. .header{
  124. width: 100%;
  125. .headerList{
  126. width: 100%;
  127. box-sizing: border-box;
  128. padding:16rpx 20rpx;
  129. background: #fff;
  130. &:last-child{
  131. border-top:1rpx solid #e4e7ed;
  132. }
  133. .list_l{
  134. width: 170rpx;
  135. text{
  136. font-size: 28rpx;
  137. color: #666666;
  138. margin-left: 10rpx;
  139. }
  140. }
  141. .list_r{
  142. width: calc(100% - 170rpx);
  143. }
  144. }
  145. }
  146. .statistical{
  147. padding:20rpx;
  148. background: #fff;
  149. margin:10rpx 0;
  150. .statisticalList{
  151. &:first-child{
  152. width: 210rpx;
  153. }
  154. }
  155. text{
  156. &:last-child{
  157. color:$uni-color-warning;
  158. font-weight: 600;
  159. }
  160. }
  161. }
  162. .chooseCon{
  163. flex-grow: 1;
  164. overflow: auto;
  165. background-color: #fff;
  166. .chooseList{
  167. padding:20rpx;
  168. border-bottom:1rpx solid #e4e7ed;
  169. &:last-child{
  170. border-bottom:0rpx solid #e4e7ed;
  171. }
  172. .checkbox{
  173. width: 74rpx;
  174. }
  175. .choose_r{
  176. flex:1;
  177. .billInfo{
  178. text{
  179. font-weight: 600;
  180. }
  181. view{
  182. padding:4rpx 10rpx;
  183. text-align: center;
  184. border-radius: 30rpx;
  185. border:1rpx solid #e4e7ed;
  186. margin-left: 10rpx;
  187. font-size: .7rem;
  188. color: #666;
  189. }
  190. }
  191. .billOrder{
  192. font-size: .8rem;
  193. color: #666;
  194. }
  195. .rigth_b{
  196. color: #666;
  197. font-size: 0.8rem;
  198. margin-top: 10rpx;
  199. view{
  200. &:last-child{
  201. color:#333;
  202. text{
  203. color:$uni-color-warning;
  204. }
  205. }
  206. }
  207. }
  208. }
  209. }
  210. }
  211. .footer{
  212. background-color: #f8f8f8;
  213. padding: 20rpx;
  214. .f-mid{
  215. flex-grow: 1;
  216. color: #666;
  217. font-size: 0.8rem;
  218. > view{
  219. &:first-child{
  220. text{
  221. color: $uni-color-warning;
  222. vertical-align: middle;
  223. }
  224. }
  225. &:last-child{
  226. text{
  227. color: $uni-color-primary;
  228. vertical-align: middle;
  229. }
  230. }
  231. }
  232. .costBtn{
  233. width:70rpx;
  234. height: 40rpx;
  235. line-height: 40rpx;
  236. text-align: center;
  237. color:#fff;
  238. font-size: 20rpx;
  239. border-radius: 30rpx;
  240. background: #999;
  241. margin-left: 20rpx;
  242. }
  243. }
  244. }
  245. }
  246. </style>