searchList.vue 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
  1. <template>
  2. <view class="content">
  3. <view class="tips">注:服务提报必须通过审核后才可进行开通</view>
  4. <!-- <view class="page-top">
  5. <uni-search-bar :radius="100" placeholder="搜索" @confirm="search"></uni-search-bar>
  6. </view> -->
  7. <no-none v-if='list.length<=0'></no-none>
  8. <block v-else>
  9. <view style="margin-top: 30rpx;" class="item" v-for="(item,index) of list" :key='index'>
  10. <view class="border-b item-title flex-y-center">
  11. <text>{{item.title}}</text>
  12. <view @click="onClickBtn(item)" class="btn"
  13. :style="{background:item.box_status == 'OFFLINE'?'#febe07':item.box_status == 'ONLINE'?'#ff3535':'#3C94FC'}">
  14. {{item.box_status == 'OFFLINE'?'上架':item.box_status == 'ONLINE'?'下架':'开通'}}
  15. </view>
  16. </view>
  17. <view class="item-bottom flex-y-center">
  18. <view class="flex-grow-1">
  19. <view class="box-pack-between item-bottom-right">
  20. <text><text class="item-bottom-number">状态</text>:{{item.status}}</text>
  21. </view>
  22. <view class="box-pack-between item-bottom-right flex-y-center">
  23. <text><text class="item-bottom-number">原因</text>:{{item.fail_reason}} </text>
  24. <text class="iconfont icongengduo"></text>
  25. </view>
  26. </view>
  27. </view>
  28. </view>
  29. </block>
  30. </view>
  31. </template>
  32. <script>
  33. export default {
  34. data() {
  35. return {
  36. list: [],
  37. page: 1,
  38. URL: getApp().globalData.URL,
  39. is_load: false
  40. }
  41. },
  42. onLoad() {
  43. },
  44. onShow() {
  45. this.page = 1;
  46. this.list = [];
  47. this.http();
  48. },
  49. onReachBottom(e) {
  50. if (!this.is_load) {
  51. this.page = this.page + 1;
  52. this.http();
  53. }
  54. },
  55. methods: {
  56. onClickBtn(item) {
  57. let url = item.box_status == 'OFFLINE'?'alipaycoupon/shangjia':item.box_status == 'ONLINE'?'alipaycoupon/xiajia':'alipaycoupon/kaitong'
  58. this.request({
  59. url,
  60. data: {
  61. admin_id: uni.getStorageSync("admin_id"),
  62. },
  63. }).then(res => {
  64. if (res.code == 200) {
  65. uni.showModal({
  66. content: res.message,
  67. showCancel: false,
  68. success: () => {
  69. this.http()
  70. }
  71. })
  72. } else {
  73. uni.showToast({
  74. title: res.message,
  75. icon: "none"
  76. })
  77. }
  78. }).catch(res => {
  79. uni.showToast({
  80. title: res.message,
  81. icon: "none"
  82. })
  83. });
  84. },
  85. http() {
  86. let url = "alipaycoupon/operation_index";
  87. this.request({
  88. url,
  89. data: {
  90. admin_id: uni.getStorageSync("admin_id"),
  91. page: this.page,
  92. limit: 10,
  93. },
  94. }).then(res => {
  95. console.log(res, "res")
  96. if (res.code === "200") {
  97. this.list = this.list.concat(res.data);
  98. if (res.data.length == 0) {
  99. this.is_load = true
  100. } else {
  101. this.is_load = false
  102. }
  103. }
  104. });
  105. },
  106. },
  107. }
  108. </script>
  109. <style lang="scss">
  110. page {
  111. background: #F5F7FA;
  112. }
  113. .page-top {
  114. background: #fff;
  115. position: sticky;
  116. top: 0;
  117. z-index: 99;
  118. padding: 10rpx 0;
  119. box-shadow: 0 5rpx 10rpx #f0f0f0;
  120. }
  121. .item {
  122. width: 690rpx;
  123. background: #ffffff;
  124. margin: 0 auto;
  125. padding: 0rpx 24rpx;
  126. opacity: 1;
  127. border-radius: 8rpx;
  128. box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(213, 213, 213, 0.04);
  129. .item-title {
  130. opacity: 1;
  131. font-size: 28rpx;
  132. font-family: PingFang SC, PingFang SC-Medium;
  133. font-weight: 500;
  134. color: #333333;
  135. padding: 24rpx 0;
  136. .item-type {
  137. margin-right: 16rpx;
  138. // width: 78rpx;
  139. height: 36rpx;
  140. font-size: 21rpx;
  141. opacity: 1;
  142. border-radius: 4rpx;
  143. color: #FFFFFF;
  144. border-bottom: 1rpx solid #F1F1F1;
  145. padding: 0 13rpx;
  146. }
  147. .item-type-one {
  148. background: linear-gradient(134deg, #FF8C1A 2%, #FF8C1A 98%);
  149. }
  150. .item-type-two {
  151. background: linear-gradient(135deg, #4992ff 2%, #61a8fc 97%);
  152. }
  153. .item-type-three {
  154. background: linear-gradient(134deg, #febe07 2%, #ffcc3e 98%);
  155. }
  156. }
  157. .item-bottom {
  158. font-size: 26rpx;
  159. padding: 20rpx 0 24rpx 0;
  160. color: #666666;
  161. .item-bottom-left {
  162. width: 90rpx;
  163. height: 90rpx;
  164. margin-right: 24rpx;
  165. min-width: 90rpx;
  166. margin-bottom: 16rpx;
  167. }
  168. .item-bottom-right {
  169. margin-bottom: 16rpx;
  170. .item-bottom-number {
  171. color: #99A0AD;
  172. }
  173. }
  174. }
  175. }
  176. .color-ffa {
  177. color: #3387FF;
  178. }
  179. .icongengduo {
  180. color: #999;
  181. font-size: 24rpx;
  182. }
  183. .bottom-bar {
  184. position: fixed;
  185. bottom: 0px;
  186. width: 100%;
  187. z-index: 1000;
  188. background: #FFFFFF;
  189. padding: 30rpx 0;
  190. }
  191. .bottom-bar button {
  192. width: 690rpx;
  193. height: 98rpx;
  194. opacity: 1;
  195. background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
  196. border-radius: 8rpx;
  197. box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(51, 135, 255, 0.20);
  198. margin: 0 auto;
  199. opacity: 1;
  200. font-size: 36rpx;
  201. font-family: PingFang SC, PingFang SC-Medium;
  202. font-weight: 500;
  203. color: #ffffff;
  204. }
  205. .label {
  206. min-width: 70rpx;
  207. height: 44rpx;
  208. /* line-height: 44rpx; */
  209. padding: 0 10rpx;
  210. color: #FFFFFF;
  211. font-size: 24rpx;
  212. background-color: #1E9FFF;
  213. margin-left: 20rpx;
  214. border-radius: 5rpx;
  215. }
  216. .tips {
  217. padding: 30rpx;
  218. font-size: 28rpx;
  219. color: #f00;
  220. }
  221. .btn {
  222. height: 40rpx;
  223. padding: 0 20rpx;
  224. border-radius: 4rpx;
  225. font-size: 24rpx;
  226. color: #fff;
  227. line-height: 40rpx;
  228. margin-left: auto;
  229. }
  230. </style>