swiper.vue 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244
  1. <template>
  2. <view class="container">
  3. <view class="list">
  4. <view @click="detail(item.id)" class="item" style="border-left:none;padding: 0 30rpx;" v-for="(item,index) in list" :key="index">
  5. <view class="top flex flex-y-center box-pack-between">
  6. <view class="flex-y-center">
  7. <view class="name">{{item.name}}</view>
  8. </view>
  9. <view class="flex-y-center">
  10. <view class="ft26" style="color: #FF5722;margin-right: 20rpx;">
  11. {{item.type==1?'小程序':item.type==2?'内部':item.type==3?'外链':item.type==4?'会员授权弹窗':''}}
  12. </view>
  13. <view class="del" @click.stop="del(item.id)">删除</view>
  14. </view>
  15. </view>
  16. <view class="content flex flex-y-center" hover-class="nav-hover">
  17. <image mode="aspectFit" class="content-icon" :src="URL+item.thumb"></image>
  18. </view>
  19. </view>
  20. <view class="no-more">没有更多内容了~</view>
  21. </view>
  22. <view class="footer-bar">
  23. <view class="content flex flex-center">
  24. <navigator url="./add" class="btn">+新增弹窗轮播图</navigator>
  25. </view>
  26. </view>
  27. </view>
  28. </template>
  29. <script>
  30. export default {
  31. data() {
  32. return {
  33. store_id: "",
  34. list: [],
  35. page: 1,
  36. is_bottom: false,
  37. URL:getApp().globalData.URL
  38. }
  39. },
  40. onLoad(options) {
  41. this.store_id = options.store_id
  42. },
  43. onShow() {
  44. this.getData()
  45. },
  46. // onReachBottom() {
  47. // if (!this.is_bottom) {
  48. // this.getData(this.page + 1)
  49. // }
  50. // },
  51. methods: {
  52. detail(id) {
  53. uni.navigateTo({
  54. url: `./add?id=${id}`
  55. })
  56. },
  57. del(id) {
  58. uni.showModal({
  59. title: '提示',
  60. content: '是否要删除?',
  61. showCancel: true,
  62. cancelText: '取消',
  63. confirmText: '确定',
  64. success: res => {
  65. if (res.confirm) {
  66. this.request({
  67. url: 'Smdcshop/index_banner_delect',
  68. data: {
  69. id: id,
  70. },
  71. }).then(res => {
  72. console.log(res, "res")
  73. if (res.code === 200 || res.code === "200") {
  74. uni.showToast({
  75. title: "删除成功",
  76. icon: "none",
  77. })
  78. setTimeout(() => {
  79. this.getData()
  80. }, 2000)
  81. }
  82. }).catch((res) => {
  83. uni.showToast({
  84. title: res.message,
  85. icon: "none",
  86. })
  87. });
  88. }
  89. },
  90. fail: () => {},
  91. complete: () => {}
  92. });
  93. },
  94. getData() {
  95. // if (page == 1) {
  96. // this.list = []
  97. // this.page = 1
  98. // this.is_bottom = false
  99. // }
  100. this.request({
  101. url: 'Smdcshop/index_banner_data',
  102. data: {
  103. // page,
  104. // limit: 10,
  105. admin_id: uni.getStorageSync("admin_id")
  106. }
  107. }).then(res => {
  108. if (res.code == 200) {
  109. this.list = res.data
  110. }
  111. })
  112. }
  113. }
  114. }
  115. </script>
  116. <style>
  117. /* @import url("../../static/css/comm"); */
  118. .content-icon {
  119. width: 100%;
  120. height: 400rpx;
  121. }
  122. .del {
  123. height: 44rpx;
  124. line-height: 44rpx;
  125. padding: 0 15rpx;
  126. font-size: 24rpx;
  127. background-color: #FF5722;
  128. /* margin-right: 25rpx; */
  129. color: #fff;
  130. border-radius: 4rpx;
  131. }
  132. page {
  133. background-color: #F4F5F7;
  134. }
  135. .list {
  136. padding: 30rpx 25rpx;
  137. }
  138. .list .item {
  139. border-radius: 8rpx;
  140. overflow: hidden;
  141. padding-left: 30rpx;
  142. border-left: 8rpx solid #247EFF;
  143. background-color: #fff;
  144. margin-bottom: 30rpx;
  145. }
  146. .list .item .top {
  147. /* height: 80rpx; */
  148. border-bottom: 1rpx solid #f5f5f5;
  149. padding: 20rpx 0;
  150. }
  151. .list .item .top .name {
  152. font-size: 30rpx;
  153. /* line-height: 80rpx; */
  154. font-weight: bold;
  155. max-width: 389rpx;
  156. }
  157. .list .item .top .type-btn {
  158. zoom: 0.7;
  159. margin-right: 25rpx;
  160. }
  161. .list .item .content {
  162. padding: 20rpx 0 24rpx;
  163. }
  164. .list .item .content .cell {
  165. flex: none;
  166. width: 50%;
  167. box-sizing: border-box;
  168. padding-right: 30rpx;
  169. font-size: 26rpx;
  170. line-height: 37rpx;
  171. color: #666;
  172. }
  173. .list .item .content .cell .title {
  174. color: #99A0AD;
  175. }
  176. /* */
  177. .footer-bar {
  178. height: 160rpx;
  179. /*兼容 IOS<11.2*/
  180. padding-bottom: constant(safe-area-inset-bottom);
  181. /*兼容 IOS>11.2*/
  182. padding-bottom: env(safe-area-inset-bottom);
  183. box-sizing: content-box;
  184. }
  185. .footer-bar .content {
  186. width: 100%;
  187. height: 160rpx;
  188. background-color: #fff;
  189. position: fixed;
  190. left: 0;
  191. bottom: 0;
  192. z-index: 100;
  193. /*兼容 IOS<11.2*/
  194. padding-bottom: constant(safe-area-inset-bottom);
  195. /*兼容 IOS>11.2*/
  196. padding-bottom: env(safe-area-inset-bottom);
  197. box-sizing: content-box;
  198. box-shadow: 0 -5rpx 10rpx #eee;
  199. }
  200. .footer-bar .content .btn {
  201. width: 700rpx;
  202. height: 100rpx;
  203. background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
  204. border-radius: 8rpx;
  205. box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(51, 135, 255, 0.20);
  206. text-align: center;
  207. line-height: 100rpx;
  208. font-size: 36rpx;
  209. font-weight: 500;
  210. color: #fff;
  211. }
  212. .footer-bar .content .detail-btn {
  213. width: 50%;
  214. height: 40rpx;
  215. }
  216. .footer-bar .content .detail-btn .btn-icon {
  217. flex: none;
  218. display: block;
  219. width: 32rpx;
  220. height: 32rpx;
  221. margin-right: 8rpx;
  222. }
  223. </style>