aliPlan.vue 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236
  1. <template>
  2. <view class="content">
  3. <!-- <view class="page-top">
  4. <uni-search-bar :radius="100" placeholder="搜索" @confirm="search"></uni-search-bar>
  5. </view> -->
  6. <no-none v-if='list.length<=0'></no-none>
  7. <block v-else>
  8. <navigator @click="bindDetail(item.id)" style="margin-top: 30rpx;" class="item" v-for="(item,index) of list"
  9. :key='index'>
  10. <view class="border-b item-title flex-y-center">
  11. <!-- <view class="item-type flex-center"
  12. :class="item.delivery_status=='AUDITING'?'item-type-one':item.delivery_status=='ACTIVE'?'item-type-two':item.delivery_status == 'AUDIT_NO_PASS'?'item-type-three':'item-type-one'">
  13. {{item.delivery_status=='AUDITING'?'审核中':item.delivery_status=='ACTIVE'?'生效中':item.delivery_status=='AUDIT_NO_PASS'?'审核失败':'已失效'}}
  14. </view> -->
  15. <!-- I:未生效,S:已生效,D:已删除,E:已过期 -->
  16. <text>{{item.delivery_name}}</text>
  17. </view>
  18. <view class="item-bottom flex-y-center">
  19. <view class="flex-grow-1">
  20. <view class="box-pack-between item-bottom-right">
  21. <text><text class="item-bottom-number">商家活动券名称</text>:{{item.activity_name}}</text>
  22. </view>
  23. <view class="box-pack-between item-bottom-right flex-y-center">
  24. <text><text class="item-bottom-number">添加时间</text>:{{item.create_time}} </text>
  25. <text class="iconfont icongengduo"></text>
  26. </view>
  27. </view>
  28. </view>
  29. </navigator>
  30. </block>
  31. <view style="height: 90px;"></view>
  32. <navigator style="margin-bottom:0" url='./addAliPlan' class="bottom-bar flex-center">
  33. <button formType="submit" class="flex-center ft28">+添加投放计划</button>
  34. </navigator>
  35. </view>
  36. </template>
  37. <script>
  38. export default {
  39. data() {
  40. return {
  41. list: [],
  42. page: 1,
  43. URL: getApp().globalData.URL,
  44. is_load: false
  45. }
  46. },
  47. onLoad() {
  48. uni.setNavigationBarTitle({
  49. title: "投放计划"
  50. })
  51. },
  52. onShow() {
  53. this.page = 1;
  54. this.list = [];
  55. this.http();
  56. },
  57. onReachBottom(e) {
  58. if (!this.is_load) {
  59. this.page = this.page + 1;
  60. this.http();
  61. }
  62. },
  63. methods: {
  64. bindDetail(id) {
  65. uni.navigateTo({
  66. url: "./aliPlanDetail?id=" + id
  67. })
  68. },
  69. http() {
  70. let url = "alipaycoupon/plan_index";
  71. this.request({
  72. url,
  73. data: {
  74. admin_id: uni.getStorageSync("admin_id"),
  75. page: this.page,
  76. limit: 10,
  77. },
  78. }).then(res => {
  79. console.log(res, "res")
  80. if (res.code === "200") {
  81. this.list = this.list.concat(res.data);
  82. if (res.data.length == 0) {
  83. this.is_load = true
  84. } else {
  85. this.is_load = false
  86. }
  87. }
  88. });
  89. },
  90. },
  91. }
  92. </script>
  93. <style lang="scss">
  94. page {
  95. background: #F5F7FA;
  96. }
  97. .page-top {
  98. background: #fff;
  99. position: sticky;
  100. top: 0;
  101. z-index: 99;
  102. padding: 10rpx 0;
  103. box-shadow: 0 5rpx 10rpx #f0f0f0;
  104. }
  105. .item {
  106. width: 690rpx;
  107. background: #ffffff;
  108. margin: 0 auto;
  109. padding: 0rpx 24rpx;
  110. opacity: 1;
  111. border-radius: 8rpx;
  112. box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(213, 213, 213, 0.04);
  113. .item-title {
  114. opacity: 1;
  115. font-size: 28rpx;
  116. font-family: PingFang SC, PingFang SC-Medium;
  117. font-weight: 500;
  118. color: #333333;
  119. padding: 24rpx 0;
  120. .item-type {
  121. margin-right: 16rpx;
  122. // width: 78rpx;
  123. height: 36rpx;
  124. font-size: 21rpx;
  125. opacity: 1;
  126. border-radius: 4rpx;
  127. color: #FFFFFF;
  128. border-bottom: 1rpx solid #F1F1F1;
  129. padding: 0 13rpx;
  130. }
  131. .item-type-one {
  132. background: linear-gradient(134deg, #FF8C1A 2%, #FF8C1A 98%);
  133. }
  134. .item-type-two {
  135. background: linear-gradient(135deg, #4992ff 2%, #61a8fc 97%);
  136. }
  137. .item-type-three {
  138. background: linear-gradient(134deg, #febe07 2%, #ffcc3e 98%);
  139. }
  140. }
  141. .item-bottom {
  142. font-size: 26rpx;
  143. padding: 20rpx 0 24rpx 0;
  144. color: #666666;
  145. .item-bottom-left {
  146. width: 90rpx;
  147. height: 90rpx;
  148. margin-right: 24rpx;
  149. min-width: 90rpx;
  150. margin-bottom: 16rpx;
  151. }
  152. .item-bottom-right {
  153. margin-bottom: 16rpx;
  154. .item-bottom-number {
  155. color: #99A0AD;
  156. }
  157. }
  158. }
  159. }
  160. .color-ffa {
  161. color: #3387FF;
  162. }
  163. .icongengduo {
  164. color: #999;
  165. font-size: 24rpx;
  166. }
  167. .bottom-bar {
  168. position: fixed;
  169. bottom: 0px;
  170. width: 100%;
  171. z-index: 1000;
  172. background: #FFFFFF;
  173. padding: 30rpx 0;
  174. }
  175. .bottom-bar button {
  176. width: 690rpx;
  177. height: 98rpx;
  178. opacity: 1;
  179. background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
  180. border-radius: 8rpx;
  181. box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(51, 135, 255, 0.20);
  182. margin: 0 auto;
  183. opacity: 1;
  184. font-size: 36rpx;
  185. font-family: PingFang SC, PingFang SC-Medium;
  186. font-weight: 500;
  187. color: #ffffff;
  188. }
  189. .label {
  190. min-width: 70rpx;
  191. height: 44rpx;
  192. /* line-height: 44rpx; */
  193. padding: 0 10rpx;
  194. color: #FFFFFF;
  195. font-size: 24rpx;
  196. background-color: #1E9FFF;
  197. margin-left: 20rpx;
  198. border-radius: 5rpx;
  199. }
  200. </style>