hornList.vue 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208
  1. <template>
  2. <view class="container">
  3. <view class="list">
  4. <view @click="detail(item.id,item.admin_id)" class="item" v-for="(item,index) in list" :key="index">
  5. <view class="top flex flex-y-center box-pack-between">
  6. <view class="name">{{item.device_type==1?'品生':item.device_type==2?'品生(新)':item.device_type==3?'百励华':item.device_type==4?'百励华-WiFi':''}} </view>
  7. <view class="flex-y-center">
  8. <view class="del" @click.stop="del(item.id)">删除</view>
  9. </view>
  10. </view>
  11. <view class="content flex flex-y-center box-pack-between" v-if="type==1" hover-class="nav-hover">
  12. <view class="cell flex flex-y-center">
  13. <view class="title">门店:</view>
  14. <view class="desc">{{item.store_title}}</view>
  15. </view>
  16. </view>
  17. <view class="content flex flex-y-center box-pack-between" hover-class="nav-hover">
  18. <view class="cell flex flex-y-center">
  19. <view class="title">设备号:</view>
  20. <view class="desc">{{item.device_id}}</view>
  21. </view>
  22. <view class="cell flex flex-y-center">
  23. <view class="title">播报方式:</view>
  24. <view class="desc">{{item.type==1?'收款播报':'排队播报'}}</view>
  25. </view>
  26. </view>
  27. </view>
  28. <view class="no-more">没有更多内容了~</view>
  29. </view>
  30. <view class="footer-bar">
  31. <view class="content flex flex-center">
  32. <navigator :url="`./hornAdd?type=${type}`" class="btn">+新增云喇叭</navigator>
  33. </view>
  34. </view>
  35. </view>
  36. </template>
  37. <script>
  38. export default {
  39. data() {
  40. return {
  41. store_id: "",
  42. list: [],
  43. page: 1,
  44. is_bottom: false,
  45. type:2,
  46. }
  47. },
  48. onLoad(options) {
  49. this.type=options.type;
  50. this.store_id = uni.getStorageSync("store_id");
  51. },
  52. onShow() {
  53. this.getData(1)
  54. },
  55. onReachBottom() {
  56. if (!this.is_bottom) {
  57. this.getData(this.page + 1)
  58. }
  59. },
  60. methods: {
  61. detail(id,admin_id){
  62. let type=this.type;
  63. uni.navigateTo({
  64. url:`./hornAdd?id=${id}&type=${type}`
  65. })
  66. },
  67. del(id) {
  68. uni.showModal({
  69. title: '提示',
  70. content: '是否要删除?',
  71. showCancel: true,
  72. cancelText: '取消',
  73. confirmText: '确定',
  74. success: res => {
  75. if (res.confirm) {
  76. this.request({
  77. url: 'Smdcshop/horn_delect',
  78. data: {
  79. id: id,
  80. },
  81. }).then(res => {
  82. console.log(res, "res")
  83. if (res.code === 200 || res.code === "200") {
  84. uni.showToast({
  85. title: "删除成功",
  86. icon: "none",
  87. })
  88. setTimeout(() => {
  89. this.getData(1)
  90. }, 2000)
  91. }
  92. }).catch((res) => {
  93. uni.showToast({
  94. title: res.message,
  95. icon: "none",
  96. })
  97. });
  98. }
  99. },
  100. fail: () => {},
  101. complete: () => {}
  102. });
  103. },
  104. getData(page) {
  105. if (page == 1) {
  106. this.list = []
  107. this.page = 1
  108. this.is_bottom = false
  109. }
  110. this.request({
  111. url: 'Smdcshop/horn_index',
  112. data: {
  113. admin_id: uni.getStorageSync("admin_id"),
  114. page,
  115. limit: 10,
  116. // store_id: uni.getStorageSync("store_id")
  117. }
  118. }).then(res => {
  119. if (res.code == 200 && res.data.length) {
  120. this.list = this.list.concat(res.data)
  121. this.page = page
  122. } else {
  123. this.is_bottom = true
  124. }
  125. })
  126. }
  127. }
  128. }
  129. </script>
  130. <style>
  131. @import url("./static/css/common.css");
  132. .del {
  133. height: 44rpx;
  134. line-height: 44rpx;
  135. padding: 0 15rpx;
  136. font-size: 24rpx;
  137. background-color: #FF5722;
  138. margin-right: 25rpx;
  139. color: #fff;
  140. border-radius: 4rpx;
  141. }
  142. page {
  143. background-color: #F4F5F7;
  144. }
  145. .list {
  146. padding: 30rpx 25rpx;
  147. }
  148. .list .item {
  149. border-radius: 8rpx;
  150. overflow: hidden;
  151. padding-left: 30rpx;
  152. border-left: 8rpx solid #247EFF;
  153. background-color: #fff;
  154. margin-bottom: 30rpx;
  155. }
  156. .list .item .top {
  157. height: 80rpx;
  158. border-bottom: 1rpx solid #f5f5f5;
  159. }
  160. .list .item .top .name {
  161. font-size: 30rpx;
  162. line-height: 80rpx;
  163. font-weight: bold;
  164. }
  165. .list .item .top .type-btn {
  166. zoom: 0.7;
  167. margin-right: 25rpx;
  168. }
  169. .list .item .content {
  170. padding: 20rpx 0 24rpx;
  171. }
  172. .list .item .content .cell {
  173. flex: none;
  174. /* width: 50%; */
  175. box-sizing: border-box;
  176. padding-right: 30rpx;
  177. font-size: 26rpx;
  178. line-height: 37rpx;
  179. color: #666;
  180. }
  181. .list .item .content .cell .title {
  182. color: #99A0AD;
  183. }
  184. </style>