gather.vue 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. <template>
  2. <view class="modal-box">
  3. <u-popup v-model="isShow" @close="isShow=false" mode="right" length="85%" >
  4. <view class="modal-con u-flex u-flex-wrap u-row-between" :style="{height:toggle? auto:'180rpx'}">
  5. <view class="list" v-for="(item,i) in list" :key="i">{{item}}</view>
  6. </view>
  7. <view class="showMore" :style="{color:$config('primaryColor')}" @click="toggle=!toggle">
  8. <text>{{toggle?'收起':'更多选项'}}</text>
  9. <u-icon :name="toggle?'arrow-up':'arrow-down'" :color="$config('primaryColor')" size="28"></u-icon>
  10. </view>
  11. <view class="form-footer-btn">
  12. <u-button class="handle-btn" shape="circle" size="medium" hover-class="none" @click="handleClean">重置</u-button>
  13. <u-button class="handle-btn" shape="circle" size="medium" hover-class="none" :custom-style="customBtnStyle" @click="handleSearch">查询</u-button>
  14. </view>
  15. </u-popup>
  16. </view>
  17. </template>
  18. <script>
  19. export default{
  20. props:{
  21. showModal:{
  22. type: Boolean,
  23. default: false
  24. }
  25. },
  26. data(){
  27. return{
  28. customBtnStyle: { // 自定义按钮样式
  29. borderColor: this.$config('primaryColor'),
  30. backgroundColor: this.$config('primaryColor'),
  31. color: '#fff'
  32. },
  33. isShow:this.showModal,
  34. toggle:false,
  35. list:['未指定','现金','月结','挂账','支付宝','微信支付','银行刷卡','银行汇款','待收','托收','农银e管家','农银e管家(代付)','市场通企业支付','市场通个人支付']
  36. }
  37. },
  38. methods:{
  39. },
  40. watch:{
  41. // 父页面传过来的弹框状态
  42. showModal (newValue, oldValue) {
  43. this.isShow = newValue
  44. },
  45. // 重定义的弹框状态
  46. isShow (newValue, oldValue) {
  47. if (!newValue) {
  48. this.$emit('close')
  49. }
  50. }
  51. }
  52. }
  53. </script>
  54. <style lang="scss">
  55. .modal-box{
  56. width: 100%;
  57. .modal-con{
  58. padding:20upx;
  59. overflow: hidden;
  60. .list{
  61. width: 46%;
  62. text-align: center;
  63. line-height: 70rpx;
  64. height: 70rpx;
  65. border-radius: 38rpx;
  66. margin-bottom: 20rpx;
  67. background:#f0f0f0;
  68. font-size: 26rpx;
  69. }
  70. }
  71. .showMore{
  72. text-align: center;
  73. margin-top: 30rpx;
  74. text{
  75. margin-right: 10rpx;
  76. }
  77. }
  78. .form-footer-btn {
  79. display: flex;
  80. padding: 20upx;
  81. margin-top: 180upx;
  82. .handle-btn {
  83. font-size: 28upx;
  84. margin: 0 30upx;
  85. width: 100%;
  86. flex: 1;
  87. }
  88. }
  89. }
  90. </style>