147 lines
2.8 KiB
Vue
147 lines
2.8 KiB
Vue
<!--
|
||
* @Date: 2023-11-17 11:44:58
|
||
* @LastEditTime: 2023-11-30 18:08:33
|
||
* @Description: content
|
||
-->
|
||
<template>
|
||
<view class="content">
|
||
<uni-nav-bar
|
||
left-icon="left"
|
||
title="道具卡"
|
||
color="#fff"
|
||
backgroundColor="transparent"
|
||
:fixed="true"
|
||
:statusBar="true"
|
||
:border="false"
|
||
@clickLeft="$c.back"
|
||
></uni-nav-bar>
|
||
|
||
<mescroll-body
|
||
ref="mescrollRef"
|
||
@init="mescrollInit"
|
||
@down="downCallback"
|
||
@up="getList"
|
||
:down="downOption"
|
||
:up="upOption"
|
||
>
|
||
<view
|
||
class="card-item"
|
||
v-for="(item, i) in listData"
|
||
:key="i">
|
||
<view class="icon">
|
||
<image src="/static/common/cardIcon.png"></image>
|
||
</view>
|
||
<view class="card-r">
|
||
<view class="title">{{item.title}}</view>
|
||
<view class="desc">抽赏时可选择重新抽赏</view>
|
||
</view>
|
||
<view class="card-num">×1</view>
|
||
</view>
|
||
</mescroll-body>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
// 下拉刷新的配置(可选, 绝大部分情况无需配置)
|
||
downOption: {
|
||
auto: false
|
||
},
|
||
// 上拉加载的配置(可选, 绝大部分情况无需配置)
|
||
upOption: {
|
||
auto: true,
|
||
page: {
|
||
size: 10 // 每页数据的数量,默认10
|
||
}
|
||
},
|
||
listData: []
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
/**
|
||
* @description: 获取列表
|
||
* @param {*} num
|
||
* @param {*} size
|
||
* @return {*}
|
||
*/
|
||
getList({ num, size }) {
|
||
this.req({
|
||
url: 'item_card_list',
|
||
data: {
|
||
page: num
|
||
},
|
||
|
||
success: res => {
|
||
if (res.status == 1) {
|
||
if (num == 1) {
|
||
this.listData = []
|
||
}
|
||
|
||
this.listData = this.listData.concat(res.data.list)
|
||
this.mescroll.endByPage(res.data.list.length, res.data.last_page)
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.content {
|
||
padding: 0 0 30rpx;
|
||
|
||
.card-item {
|
||
width: 710rpx;
|
||
margin: 20rpx auto 0;
|
||
box-sizing: border-box;
|
||
padding: 30rpx 40rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
background: #3B3941;
|
||
|
||
.icon {
|
||
width: 100rpx;
|
||
height: 58rpx;
|
||
}
|
||
|
||
.card-r {
|
||
width: 300rpx;
|
||
box-sizing: border-box;
|
||
margin-left: 30rpx;
|
||
|
||
.title {
|
||
font-weight: bold;
|
||
font-size: 40rpx;
|
||
color: #B07AF3;
|
||
}
|
||
|
||
.desc {
|
||
margin-top: 10rpx;
|
||
word-wrap: break-word;
|
||
word-break: break-all;
|
||
|
||
font-size: 26rpx;
|
||
font-family: Source Han Sans CN;
|
||
font-weight: 400;
|
||
color: #dddddd;
|
||
}
|
||
}
|
||
|
||
.card-num {
|
||
flex: 1;
|
||
text-align: right;
|
||
font-size: 36rpx;
|
||
font-family: YouSheBiaoTiHei;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
.common_bg {
|
||
}
|
||
}
|
||
</style>
|