ShopCoupon.vue 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317
  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.status=='I'?'item-type-one':item.status=='S'?'item-type-two':item.status=='D'?'item-type-one':'item-type-three'">
  13. {{item.status=='I'?'未生效':item.status=='S'?'已生效':item.status=='D'?'已删除':'已过期'}}
  14. </view>
  15. <!-- I:未生效,S:已生效,D:已删除,E:已过期 -->
  16. <text>{{item.brand_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">模板id</text>:{{item.template_id}}</text>
  22. </view>
  23. <view class="box-pack-between item-bottom-right flex-y-center">
  24. <text><text class="item-bottom-number">总金额</text>:{{item.total_amount}} </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='./addCoupon' 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. defaultIndex: 0,
  42. list: [],
  43. page: 1,
  44. $test: this.$test.$test,
  45. URL: getApp().globalData.URL,
  46. is_load: false
  47. }
  48. },
  49. onLoad() {
  50. uni.setNavigationBarTitle({
  51. title: "优惠列表"
  52. })
  53. },
  54. onShow() {
  55. this.page = 1;
  56. this.list = [];
  57. this.http();
  58. },
  59. onReachBottom(e) {
  60. if (!this.is_load) {
  61. this.page = this.page + 1;
  62. this.http();
  63. }
  64. },
  65. methods: {
  66. enit(id) {
  67. uni.navigateTo({
  68. url: "./add?id=" + id
  69. })
  70. },
  71. previewImg(logourl) {
  72. let URL = this.URL + logourl;
  73. uni.previewImage({
  74. urls: [URL]
  75. });
  76. },
  77. bindDetail(id) {
  78. uni.navigateTo({
  79. url: "./ShopCouponDetail?id=" + id
  80. })
  81. },
  82. del(id, index) {
  83. uni.showModal({
  84. title: '提示',
  85. content: '是否要删除?',
  86. showCancel: true,
  87. cancelText: '取消',
  88. confirmText: '确定',
  89. success: res => {
  90. if (res.confirm) {
  91. this.request({
  92. url: 'tag/delete',
  93. data: {
  94. id: id,
  95. },
  96. }).then(res => {
  97. console.log(res, "res")
  98. if (res.code === 200 || res.code === "200") {
  99. this.list.splice(index, 1);
  100. }
  101. }).catch(() => {
  102. uni.showToast({
  103. title: res.message,
  104. icon: "none",
  105. })
  106. });
  107. }
  108. },
  109. fail: () => {},
  110. complete: () => {}
  111. });
  112. },
  113. http() {
  114. let url = "Smdcshop/alipaycoupon";
  115. this.request({
  116. url,
  117. data: {
  118. admin_id: uni.getStorageSync("admin_id"),
  119. page: this.page,
  120. limit: 10,
  121. },
  122. showLoading: true,
  123. }).then(res => {
  124. console.log(res, "res")
  125. if (res.code === "200") {
  126. this.list = this.list.concat(res.data);
  127. if (res.data.length == 0) {
  128. this.is_load = true
  129. } else {
  130. this.is_load = false
  131. }
  132. }
  133. });
  134. },
  135. del(id, index) {
  136. uni.showModal({
  137. title: '提示',
  138. content: '是否要删除?',
  139. showCancel: true,
  140. cancelText: '取消',
  141. confirmText: '确定',
  142. success: res => {
  143. if (res.confirm) {
  144. this.request({
  145. url: "tikpush/del",
  146. data: {
  147. id: id,
  148. },
  149. }).then(res => {
  150. console.log(res, "res")
  151. if (res.code === 200 || res.code === "200") {
  152. this.list.splice(index, 1);
  153. }
  154. }).catch(() => {
  155. uni.showToast({
  156. title: res.message,
  157. icon: "none",
  158. })
  159. });
  160. }
  161. },
  162. fail: () => {},
  163. complete: () => {}
  164. });
  165. },
  166. },
  167. }
  168. </script>
  169. <style lang="scss">
  170. page {
  171. background: #F5F7FA;
  172. }
  173. .page-top {
  174. background: #fff;
  175. position: sticky;
  176. top: 0;
  177. z-index: 99;
  178. padding: 10rpx 0;
  179. box-shadow: 0 5rpx 10rpx #f0f0f0;
  180. }
  181. .item {
  182. width: 690rpx;
  183. background: #ffffff;
  184. margin: 0 auto;
  185. padding: 0rpx 24rpx;
  186. opacity: 1;
  187. border-radius: 8rpx;
  188. box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(213, 213, 213, 0.04);
  189. .item-title {
  190. opacity: 1;
  191. font-size: 28rpx;
  192. font-family: PingFang SC, PingFang SC-Medium;
  193. font-weight: 500;
  194. color: #333333;
  195. padding: 24rpx 0;
  196. .item-type {
  197. margin-right: 16rpx;
  198. // width: 78rpx;
  199. height: 36rpx;
  200. font-size: 21rpx;
  201. opacity: 1;
  202. border-radius: 4rpx;
  203. color: #FFFFFF;
  204. border-bottom: 1rpx solid #F1F1F1;
  205. padding: 0 13rpx;
  206. }
  207. .item-type-one {
  208. background: linear-gradient(134deg, #FF8C1A 2%, #FF8C1A 98%);
  209. }
  210. .item-type-two {
  211. background: linear-gradient(135deg, #4992ff 2%, #61a8fc 97%);
  212. }
  213. .item-type-three {
  214. background: linear-gradient(134deg, #febe07 2%, #ffcc3e 98%);
  215. }
  216. }
  217. .item-bottom {
  218. font-size: 26rpx;
  219. padding: 20rpx 0 24rpx 0;
  220. color: #666666;
  221. .item-bottom-left {
  222. width: 90rpx;
  223. height: 90rpx;
  224. margin-right: 24rpx;
  225. min-width: 90rpx;
  226. margin-bottom: 16rpx;
  227. }
  228. .item-bottom-right {
  229. margin-bottom: 16rpx;
  230. .item-bottom-number {
  231. color: #99A0AD;
  232. }
  233. }
  234. }
  235. }
  236. .color-ffa {
  237. color: #3387FF;
  238. }
  239. .icongengduo {
  240. color: #999;
  241. font-size: 24rpx;
  242. }
  243. .bottom-bar {
  244. position: fixed;
  245. bottom: 0px;
  246. width: 100%;
  247. z-index: 1000;
  248. background: #FFFFFF;
  249. padding: 30rpx 0;
  250. }
  251. .bottom-bar button {
  252. width: 690rpx;
  253. height: 98rpx;
  254. opacity: 1;
  255. background: linear-gradient(315deg, #3387ff 2%, #569bff 99%);
  256. border-radius: 8rpx;
  257. box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(51, 135, 255, 0.20);
  258. margin: 0 auto;
  259. opacity: 1;
  260. font-size: 36rpx;
  261. font-family: PingFang SC, PingFang SC-Medium;
  262. font-weight: 500;
  263. color: #ffffff;
  264. }
  265. .label {
  266. min-width: 70rpx;
  267. height: 44rpx;
  268. /* line-height: 44rpx; */
  269. padding: 0 10rpx;
  270. color: #FFFFFF;
  271. font-size: 24rpx;
  272. background-color: #1E9FFF;
  273. margin-left: 20rpx;
  274. border-radius: 5rpx;
  275. }
  276. </style>