<template>
|
<view class="container">
|
<!-- 搜索区域 -->
|
<view class="search-box">
|
<view class="search-input">
|
<input
|
type="text"
|
v-model="searchKeyword"
|
placeholder="请输入激活码"
|
placeholder-class="placeholder-class"
|
@confirm="searchActivationCode" />
|
<text class="icon iconfont icon-sousuo" @click="searchActivationCode"></text>
|
</view>
|
</view>
|
<view style="display: flex;justify-content: space-between;">
|
<view >
|
未使用：{{wsy}}
|
</view>
|
<view >
|
已使用：{{ysy}}
|
</view>
|
</view>
|
<!-- 激活码列表 -->
|
<view class="activation-list">
|
<view class="list-header">
|
<text class="header-item">激活码</text>
|
<text class="header-item">状态</text>
|
<text class="header-item">类型</text>
|
</view>
|
|
<view class="list-content">
|
<view class="list-item" v-for="(item, index) in activationList" :key="index">
|
<view class="item-content">
|
<view class="item-code" @longpress="copyActivationCode(item.activation_code)">
|
<text class="code-text">{{ item.activation_code }}</text>
|
</view>
|
<view class="item-status">
|
<text :class="['status', item.status == 0 ? 'unused' : 'used']">
|
{{ item.status == 0 ? '未使用' : '已使用' }}
|
</text>
|
</view>
|
<view class="item-type">
|
<text class="type">{{ item.type_text }}</text>
|
</view>
|
</view>
|
<view class="item-footer">
|
<text class="time">创建时间：{{ item.create_time }}</text>
|
<text class="time" v-if="item.use_time">使用时间：{{ item.use_time }}</text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 空状态 -->
|
<view class="empty-box" v-if="activationList.length === 0 && !loading">
|
<view class="empty-icon">
|
<text class="icon iconfont icon-wushuju"></text>
|
</view>
|
<text class="empty-text">暂无激活码</text>
|
</view>
|
</view>
|
|
<!-- 加载更多 -->
|
<view class="load-more" v-if="loading">
|
<text>加载中...</text>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
// 搜索关键词
|
searchKeyword: '',
|
// 激活码列表
|
activationList: [],
|
wsy:[],
|
ysy:[],
|
// 分页信息
|
page: 1,
|
// 每页条数
|
listRows: 10,
|
// 是否正在加载
|
loading: false,
|
// 是否还有更多数据
|
hasMore: true
|
}
|
},
|
|
onLoad() {
|
// 页面加载时获取数据
|
this.getActivationCodeList();
|
},
|
|
onReachBottom() {
|
// 上拉加载更多
|
if (this.hasMore && !this.loading) {
|
this.page++;
|
this.getActivationCodeList();
|
}
|
},
|
|
methods: {
|
// 获取激活码列表
|
getActivationCodeList() {
|
let self=this;
|
if (self.loading) return;
|
|
self.loading = true;
|
const params = {
|
page: self.page,
|
list_rows: self.listRows,
|
activation_code: self.searchKeyword
|
};
|
self._get('user.ActivationCode/list',params,res=>{
|
const mockData = res.data.list.data;
|
self.wsy= res.data.wsy
|
self.ysy= res.data.ysy
|
if (self.page === 1) {
|
self.activationList = mockData;
|
} else {
|
self.activationList = [...self.activationList, ...mockData];
|
}
|
|
self.hasMore = mockData.length >= self.listRows;
|
self.loading = false;
|
})
|
},
|
|
// 搜索激活码
|
searchActivationCode() {
|
this.page = 1;
|
this.getActivationCodeList();
|
},
|
|
// 复制激活码
|
copyActivationCode(code) {
|
let self = this;
|
uni.setClipboardData({
|
data: code,
|
success: function() {
|
self.showSuccess('激活码已复制到剪贴板');
|
},
|
fail: function() {
|
self.showError('复制失败');
|
}
|
});
|
},
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.container {
|
min-height: 100vh;
|
background-color: #f5f5f5;
|
padding: 20rpx;
|
}
|
|
.search-box {
|
background-color: #fff;
|
padding: 20rpx;
|
margin-bottom: 20rpx;
|
border-radius: 10rpx;
|
}
|
|
.search-input {
|
display: flex;
|
align-items: center;
|
height: 70rpx;
|
background-color: #f7f7f7;
|
border-radius: 35rpx;
|
padding: 0 20rpx;
|
|
input {
|
flex: 1;
|
font-size: 28rpx;
|
color: #333;
|
}
|
|
.icon {
|
font-size: 36rpx;
|
color: #999;
|
}
|
}
|
|
.placeholder-class {
|
color: #999;
|
font-size: 28rpx;
|
}
|
|
.activation-list {
|
background-color: #fff;
|
border-radius: 10rpx;
|
overflow: hidden;
|
}
|
|
.list-header {
|
display: flex;
|
background-color: #f7f7f7;
|
padding: 20rpx;
|
border-bottom: 1rpx solid #eee;
|
|
.header-item {
|
flex: 1;
|
text-align: center;
|
font-size: 28rpx;
|
color: #666;
|
font-weight: bold;
|
}
|
}
|
|
.list-content {
|
.list-item {
|
padding: 20rpx;
|
border-bottom: 1rpx solid #eee;
|
|
&:last-child {
|
border-bottom: none;
|
}
|
|
.item-content {
|
display: flex;
|
align-items: center;
|
margin-bottom: 10rpx;
|
|
.item-code {
|
flex: 1;
|
|
.code-text {
|
font-size: 28rpx;
|
color: #333;
|
font-weight: bold;
|
}
|
}
|
|
.item-status {
|
flex: 1;
|
text-align: center;
|
|
.status {
|
padding: 5rpx 15rpx;
|
border-radius: 20rpx;
|
font-size: 24rpx;
|
}
|
|
.unused {
|
background-color: #e8f4ff;
|
color: #1890ff;
|
}
|
|
.used {
|
background-color: #f0f0f0;
|
color: #999;
|
}
|
}
|
|
.item-type {
|
flex: 1;
|
text-align: center;
|
|
.type {
|
font-size: 24rpx;
|
color: #666;
|
}
|
}
|
}
|
|
.item-footer {
|
display: flex;
|
flex-direction: column;
|
|
.time {
|
font-size: 20rpx;
|
color: #999;
|
margin-bottom: 5rpx;
|
}
|
|
.time:last-child {
|
margin-bottom: 0;
|
}
|
}
|
}
|
}
|
|
.empty-box {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: center;
|
padding: 100rpx 0;
|
|
.empty-icon {
|
margin-bottom: 20rpx;
|
|
.icon {
|
font-size: 100rpx;
|
color: #ccc;
|
}
|
}
|
|
.empty-text {
|
font-size: 28rpx;
|
color: #999;
|
}
|
}
|
|
.load-more {
|
text-align: center;
|
padding: 20rpx;
|
font-size: 24rpx;
|
color: #999;
|
}
|
</style>
|
