123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204 |
- <template>
- <view class="container cashier">
- <tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading="true"
- :loadingType="5" />
- <template v-else>
- <!-- <custom :navbar-data='nvabarData' /> -->
-
- <scroll-view scroll-y="true" class="container-banner"
- :style="{ paddingTop:CustomBar + 180 +'px',paddingBottom: isIphoneX ? '68rpx' : '34rpx'}">
- <view class="list-main">
- <view class="fiexd-undes" v-if="isReceived"></view>
- <view class="list" v-for="(shop,index) in list" :key="index">
- <view class="list-logo">
- <image class="list-logo-img" :src="shop.shopLogo" mode=""></image>
- </view>
- <view class="list-name">
- <text class="list-name-text">{{ shop.shopName }}</text>
- </view>
- <view class="list-area">
- <view class="list-area-num">
- {{ shop.showNum }}
- </view>
- </view>
- <view class="list-state acve" v-if="shop.shopSign === 1">已打卡</view>
- <view class="list-state none" v-else>未打卡</view>
- </view>
- </view>
-
- </scroll-view>
- </template>
- </view>
- </template>
- <script>
- export default {
- data() {
- return {
- nvabarData: { //顶部自定义导航
- haveBack: false,
- haveHome: true,
- showCapsule: 1, // 是否显示左上角图标 1表示显示 0表示不显示,
- showSearch: 0,
- title: '', // 导航栏 中间的标题
- textLeft: this.$store.state.isIphone
- },
- isIphoneX: this.$store.state.isIphoneX,
- CustomBar: this.CustomBar, // 顶部导航栏高度
- params: {
- userId: '',
- },
- list: [],
- isReceived:false
- }
- },
- onLoad() {
- this.initData()
- },
- methods: {
- // 初始化
- async initData() {
- const userInfo = await this.$api.getStorage()
- this.params.userId = userInfo.userId ? userInfo.userId : 0
- this.userTicketSignList(this.params)
- },
- // 获取展台打卡列表
- async userTicketSignList(params) {
- try {
- const res = await this.UserService.userTicketSignList(params)
- this.list = res.data
- this.isReceived = this.list[0].giftFlag === 1 ? true : false
- this.skeletonShow = false
- } catch (error) {
- console.log('获取展台列表信息异常~')
- }
- }
- },
- onShow() {
- }
- }
- </script>
- <style lang="scss">
- page {
- background-color: #3d68eb;
- height: auto !important;
- }
-
- .container-banner {
- width: 100%;
- height: auto;
- background: url(https://admin.caimei365.com/userfiles/1/images/photo/2024/08/ziluo_bg.jpg) no-repeat;
- background-size: contain;
- box-sizing: border-box;
- padding: 0 24rpx;
- position: relative;
- .list-main{
- width: 100%;
- height: auto;
- position: relative;
- margin-top: 30rpx;
- .fiexd-undes{
- width: 144rpx;
- height: 128rpx;
- background: url(https://static.caimei365.com/app/img/ziyalan/collect@2x.png);
- background-size: cover;
- position: absolute;
- left: 50%;
- margin-left: -50rpx;
- top: -30rpx;
- z-index: 9999;
- }
- .list {
- width: 100%;
- height: 200rpx;
- background-color: #FFFFFF;
- border-radius: 24rpx;
- margin-bottom: 20rpx;
- box-sizing: border-box;
- padding: 20rpx;
- display: flex;
- align-items: center;
- position: relative;
-
- .list-logo {
- display: flex;
- width: 160rpx;
- height: 160rpx;
- border-radius: 50%;
- background-color: #F7F7F7;
- overflow: hidden;
- border: 1px solid #e1e1e1;
-
- .list-logo-img {
- width: 160rpx;
- height: 160rpx;
- display: block;
- border-radius: 50%;
- }
- }
-
- .list-name {
- display: flex;
- flex: 1;
- justify-content: center;
- font-size: $font-size-26;
-
- .list-name-text {
- display: inline-block;
- width: 180rpx;
- -o-text-overflow: ellipsis;
- text-overflow: ellipsis;
- display: -webkit-box;
- word-break: break-all;
- -webkit-box-orient: vertical;
- -webkit-line-clamp: 1;
- overflow: hidden;
- font-weight: 600;
- }
- }
-
- .list-area {
- display: flex;
- flex: 1;
- justify-content: left;
- align-items: left;
-
- .list-area-num {
- width: 70rpx;
- height: 70rpx;
- border-radius: 50%;
- background-color: #e10078;
- font-size: $font-size-30;
- font-weight: 600;
- color: #FFFFFF;
- text-align: center;
- line-height: 70rpx;
- }
- }
-
- .list-state {
- position: absolute;
- height: 44rpx;
- border-radius: 22rpx;
- right: 20rpx;
- top: 20rpx;
- line-height: 44rpx;
- padding: 0 10rpx;
- font-size: $font-size-22;
-
- &.none {
- background-color: #999999;
- color: #FFFFFF;
- }
-
- &.acve {
- background-color: #e10078;
- color: #FFFFFF;
- }
- }
- }
- }
- }
- </style>
|