activity-entry-list.vue 7.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
  1. <template>
  2. <view class="container cashier">
  3. <tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading="true"
  4. :loadingType="5" />
  5. <template v-else>
  6. <!-- <custom :navbar-data='nvabarData' /> -->
  7. <scroll-view scroll-y="true" class="container-banner"
  8. :style="{ paddingTop:CustomBar + 180 +'px',paddingBottom: isIphoneX ? '68rpx' : '34rpx'}">
  9. <view class="list-main">
  10. <view class="fiexd-undes" v-if="isReceived"></view>
  11. <view class="list" v-for="(shop,index) in list" :key="index">
  12. <view class="list-logo">
  13. <image class="list-logo-img" :src="shop.shopLogo" mode=""></image>
  14. </view>
  15. <view class="list-name">
  16. <text class="list-name-text">{{ shop.shopName }}</text>
  17. </view>
  18. <view class="list-area">
  19. <view class="list-area-num">
  20. {{ shop.showNum }}
  21. </view>
  22. </view>
  23. <view class="list-state acve" v-if="shop.shopSign === 1">已打卡</view>
  24. <view class="list-state none" v-else>未打卡</view>
  25. </view>
  26. </view>
  27. </scroll-view>
  28. </template>
  29. </view>
  30. </template>
  31. <script>
  32. export default {
  33. data() {
  34. return {
  35. nvabarData: { //顶部自定义导航
  36. haveBack: false,
  37. haveHome: true,
  38. showCapsule: 1, // 是否显示左上角图标 1表示显示 0表示不显示,
  39. showSearch: 0,
  40. title: '', // 导航栏 中间的标题
  41. textLeft: this.$store.state.isIphone
  42. },
  43. isIphoneX: this.$store.state.isIphoneX,
  44. CustomBar: this.CustomBar, // 顶部导航栏高度
  45. params: {
  46. userId: '',
  47. },
  48. list: [],
  49. isReceived:false
  50. }
  51. },
  52. onLoad() {
  53. this.initData()
  54. },
  55. methods: {
  56. // 初始化
  57. async initData() {
  58. const userInfo = await this.$api.getStorage()
  59. this.params.userId = userInfo.userId ? userInfo.userId : 0
  60. this.userTicketSignList(this.params)
  61. },
  62. // 获取展台打卡列表
  63. async userTicketSignList(params) {
  64. try {
  65. const res = await this.UserService.userTicketSignList(params)
  66. this.list = res.data
  67. this.isReceived = this.list[0].giftFlag === 1 ? true : false
  68. this.skeletonShow = false
  69. } catch (error) {
  70. console.log('获取展台列表信息异常~')
  71. }
  72. }
  73. },
  74. onShow() {
  75. }
  76. }
  77. </script>
  78. <style lang="scss">
  79. page {
  80. background-color: #3d68eb;
  81. height: auto !important;
  82. }
  83. .container-banner {
  84. width: 100%;
  85. height: auto;
  86. background: url(https://admin.caimei365.com/userfiles/1/images/photo/2024/08/ziluo_bg.jpg) no-repeat;
  87. background-size: contain;
  88. box-sizing: border-box;
  89. padding: 0 24rpx;
  90. position: relative;
  91. .list-main{
  92. width: 100%;
  93. height: auto;
  94. position: relative;
  95. margin-top: 30rpx;
  96. .fiexd-undes{
  97. width: 144rpx;
  98. height: 128rpx;
  99. background: url(https://static.caimei365.com/app/img/ziyalan/collect@2x.png);
  100. background-size: cover;
  101. position: absolute;
  102. left: 50%;
  103. margin-left: -50rpx;
  104. top: -30rpx;
  105. z-index: 9999;
  106. }
  107. .list {
  108. width: 100%;
  109. height: 200rpx;
  110. background-color: #FFFFFF;
  111. border-radius: 24rpx;
  112. margin-bottom: 20rpx;
  113. box-sizing: border-box;
  114. padding: 20rpx;
  115. display: flex;
  116. align-items: center;
  117. position: relative;
  118. .list-logo {
  119. display: flex;
  120. width: 160rpx;
  121. height: 160rpx;
  122. border-radius: 50%;
  123. background-color: #F7F7F7;
  124. overflow: hidden;
  125. border: 1px solid #e1e1e1;
  126. .list-logo-img {
  127. width: 160rpx;
  128. height: 160rpx;
  129. display: block;
  130. border-radius: 50%;
  131. }
  132. }
  133. .list-name {
  134. display: flex;
  135. flex: 1;
  136. justify-content: center;
  137. font-size: $font-size-26;
  138. .list-name-text {
  139. display: inline-block;
  140. width: 180rpx;
  141. -o-text-overflow: ellipsis;
  142. text-overflow: ellipsis;
  143. display: -webkit-box;
  144. word-break: break-all;
  145. -webkit-box-orient: vertical;
  146. -webkit-line-clamp: 1;
  147. overflow: hidden;
  148. font-weight: 600;
  149. }
  150. }
  151. .list-area {
  152. display: flex;
  153. flex: 1;
  154. justify-content: left;
  155. align-items: left;
  156. .list-area-num {
  157. width: 70rpx;
  158. height: 70rpx;
  159. border-radius: 50%;
  160. background-color: #e10078;
  161. font-size: $font-size-30;
  162. font-weight: 600;
  163. color: #FFFFFF;
  164. text-align: center;
  165. line-height: 70rpx;
  166. }
  167. }
  168. .list-state {
  169. position: absolute;
  170. height: 44rpx;
  171. border-radius: 22rpx;
  172. right: 20rpx;
  173. top: 20rpx;
  174. line-height: 44rpx;
  175. padding: 0 10rpx;
  176. font-size: $font-size-22;
  177. &.none {
  178. background-color: #999999;
  179. color: #FFFFFF;
  180. }
  181. &.acve {
  182. background-color: #e10078;
  183. color: #FFFFFF;
  184. }
  185. }
  186. }
  187. }
  188. }
  189. </style>