chooseCustomerBill.vue 5.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
  1. <template>
  2. <view class="content flex flex_column">
  3. <view class="header u-flex">
  4. <view class="tab">
  5. <u-tabs :show-bar="false" :active-item-style="activeItemStyle" :list="tabsList" :is-scroll="false" :current="current" @change="changeTabs"></u-tabs>
  6. </view>
  7. <view class="payType" @click="gatherShow = true">
  8. <text :style="{ color: wordColor }">收款方式</text>
  9. <u-icon name="shaixuan" custom-prefix="iscm-icon" size="30" :color="wordColor"></u-icon>
  10. </view>
  11. </view>
  12. <view class="tabCon flex flex_column" v-show="current == 0">
  13. <view class="scroll-con u-flex u-row-between">
  14. <scroll-view scroll-x class="scroll-date">
  15. <view class="u-flex" v-show="!showType">
  16. <view v-for="(item, i) in 10" :key="i">
  17. <view class="scroll-box" :class="chooseNum == i ? 'activeBox' : ''" v-if="i < 2" @click="handleDate(i)">
  18. <view>11.{{ i + 1 }}</view>
  19. <view>今日</view>
  20. </view>
  21. <view class="scroll-box" v-else :class="chooseNum == i ? 'activeBox' : ''" @click="handleDate(i)">{{ i + 1 }}</view>
  22. </view>
  23. </view>
  24. <view class="u-flex" v-show="showType">
  25. <view v-for="(item, i) in 10" :key="i">
  26. <view class="scroll-box" :class="chooseNum == i ? 'activeBox' : ''" v-if="i < 2" @click="handleDate(i)">
  27. <view>2022.{{ i + 1 }}</view>
  28. <view>本月</view>
  29. </view>
  30. <view class="scroll-box" v-else :class="chooseNum == i ? 'activeBox' : ''" @click="handleDate(i)">2022.{{ i + 1 }}</view>
  31. </view>
  32. </view>
  33. </scroll-view>
  34. <u-image :src="`../../static/${theme}/navIcon/dayImg.png`" width="42" height="42" v-show="!showType" @click="chooseType"></u-image>
  35. <u-image :src="`../../static/${theme}/navIcon/monthImg.png`" width="42" height="42" v-show="showType" @click="chooseType"></u-image>
  36. </view>
  37. <view class="customer-con">
  38. <view class="customer-list">
  39. <view class="u-line-1">按成修配按成修配按成修配按成修配按成修配按成修配按成修配按成修配按成修配</view>
  40. <view class="customer-b u-flex">
  41. <view class="customer-box">
  42. <text>欠款:</text>
  43. <text>¥582222.00</text>
  44. </view>
  45. <view class="customer-box">收款方式:现金</view>
  46. </view>
  47. </view>
  48. </view>
  49. </view>
  50. <view class="tabCon flex flex_column" v-show="current == 1">
  51. <view class="customer-search">
  52. <u-search
  53. v-model="keyword"
  54. @input="$u.debounce(getSearchCon, 800)"
  55. @search="getSearchCon"
  56. @custom="getSearchCon"
  57. @clear="clearSearch"
  58. :show-action="false"
  59. placeholder="请输入客户名称拼音首字母查询"
  60. ></u-search>
  61. </view>
  62. <view class="customer-con">
  63. <u-index-list :scrollTop="scrollTop">
  64. <view v-for="(item, index) in indexList" :key="index">
  65. <u-index-anchor :index="item" />
  66. <view class="customer-list">
  67. <view class="u-line-1">按成修配按成修配按成修配按成修配按成修配按成修配按成修配按成修配按成修配</view>
  68. <view class="customer-b u-flex">
  69. <view class="customer-box">
  70. <text>欠款:</text>
  71. <text>¥582222.00</text>
  72. </view>
  73. <view class="customer-box">收款方式:现金</view>
  74. </view>
  75. </view>
  76. </view>
  77. </u-index-list>
  78. </view>
  79. </view>
  80. <!-- 收款方式弹窗 -->
  81. <search :showModal="gatherShow" @refresh="refreshList" @close="gatherShow=false"/>
  82. </view>
  83. </template>
  84. <script>
  85. import search from './gather.vue'
  86. export default {
  87. components:{search},
  88. data() {
  89. return {
  90. tabsList: [
  91. {
  92. name: '最近开单'
  93. },
  94. {
  95. name: '全部用户'
  96. }
  97. ],
  98. current: 0,
  99. activeItemStyle: {
  100. color: this.$config('primaryColor'),
  101. borderBottom: '4rpx solid ' + this.$config('primaryColor')
  102. },
  103. wordColor: this.$config('infoColor'),
  104. theme: '',
  105. chooseNum: 0,
  106. showType: false,
  107. indexList: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
  108. scrollTop: 0,
  109. keyword:'',
  110. gatherShow:false
  111. };
  112. },
  113. onReady() {
  114. uni.setNavigationBarColor({
  115. frontColor: '#ffffff',
  116. backgroundColor: this.$config('primaryColor')
  117. });
  118. },
  119. onLoad() {
  120. this.theme = getApp().globalData.theme;
  121. },
  122. onPageScroll(e) {
  123. this.scrollTop = e.scrollTop;
  124. },
  125. methods: {
  126. changeTabs(index) {
  127. this.current = index;
  128. },
  129. handleDate(i) {
  130. this.chooseNum = i;
  131. },
  132. chooseType() {
  133. this.showType = !this.showType;
  134. },
  135. getSearchCon(){
  136. },
  137. clearSearch(){
  138. },
  139. refreshList(){
  140. }
  141. }
  142. };
  143. </script>
  144. <style lang="scss" scoped>
  145. .content {
  146. width: 100%;
  147. height: 100vh;
  148. .header {
  149. position: relative;
  150. background: #fff;
  151. .tab {
  152. width: 60%;
  153. margin: 0 auto;
  154. }
  155. .payType {
  156. position: absolute;
  157. right: 20rpx;
  158. text {
  159. vertical-align: top;
  160. font-size: 26rpx;
  161. }
  162. }
  163. }
  164. .tabCon {
  165. flex-grow: 1;
  166. .scroll-con {
  167. width: 100%;
  168. background: #fff;
  169. margin: 6rpx 0;
  170. padding: 10rpx 20rpx;
  171. .scroll-date {
  172. width: calc(100% - 62rpx);
  173. .scroll-box {
  174. margin-right: 20rpx;
  175. padding: 10rpx 20rpx;
  176. text-align: center;
  177. font-size: 26rpx;
  178. view {
  179. &:last-child {
  180. font-size: 24rpx;
  181. color: #666;
  182. }
  183. }
  184. }
  185. .activeBox {
  186. font-weight: bold;
  187. color: $uni-color-primary;
  188. view {
  189. &:last-child {
  190. font-size: 24rpx;
  191. color: $uni-color-primary;
  192. }
  193. }
  194. }
  195. }
  196. }
  197. .customer-con {
  198. flex-grow: 1;
  199. overflow: auto;
  200. background: #fff;
  201. .customer-list {
  202. padding: 20rpx;
  203. border-bottom: 1rpx solid #f8f8f8;
  204. }
  205. .customer-b {
  206. margin-top: 10rpx;
  207. color: #666;
  208. font-size: 26rpx;
  209. .customer-box {
  210. width: 46%;
  211. text {
  212. &:last-child {
  213. color: $uni-color-warning;
  214. }
  215. }
  216. }
  217. }
  218. }
  219. //选择客户
  220. .customer-search {
  221. padding: 10rpx 20rpx;
  222. background: #fff;
  223. margin: 6rpx 0;
  224. }
  225. }
  226. }
  227. </style>