测试环境链接替换，部分问题修复，增加批量退菜功能
This commit is contained in:
297
pageUser/index/components/give-coupon.vue
Normal file
297
pageUser/index/components/give-coupon.vue
Normal file
@@ -0,0 +1,297 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- 赠送优惠券弹窗 -->
|
||||
<up-popup :show="visible" mode="center" :safe-area-inset-bottom="true">
|
||||
<view class="popup-container">
|
||||
<!-- 头部 -->
|
||||
<view class="popup-header">
|
||||
<text class="title">赠送优惠券</text>
|
||||
<up-icon name="close" @click="close" size="20"></up-icon>
|
||||
</view>
|
||||
|
||||
<!-- 内容 -->
|
||||
<view class="popup-body">
|
||||
<!-- 用户信息 -->
|
||||
<view class="user-info" v-if="user">
|
||||
<up-avatar :src="user.avatar || ''" text="用户" size="80rpx" shape="square"></up-avatar>
|
||||
<view class="ml-20">
|
||||
<view class="nickname">{{ user.nickName || '用户' }}</view>
|
||||
<view class="text-gray">ID: {{ user.userId }}</view>
|
||||
<view class="text-gray mt-1">手机号: {{ user.phone || '未填写' }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 选择优惠券 -->
|
||||
<view class="form-item" @click="openCouponSelect">
|
||||
<text class="label">选择优惠券</text>
|
||||
<view class="item-right">
|
||||
<text :class="couponTextClass">{{ couponName || '请选择优惠券' }}</text>
|
||||
<up-icon name="arrow-right"></up-icon>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 数量 -->
|
||||
<view class="form-item">
|
||||
<text class="label">数量</text>
|
||||
<view class="item-right">
|
||||
<up-number-box v-model="form.num" :min="1" :step="1"></up-number-box>
|
||||
<text class="ml-2">张</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部按钮 -->
|
||||
<view class="popup-footer">
|
||||
<up-button plain @click="close">取消</up-button>
|
||||
<up-button type="primary" :loading="loading" @click="submit">提交</up-button>
|
||||
</view>
|
||||
</view>
|
||||
</up-popup>
|
||||
|
||||
<!-- 优惠券选择弹窗 -->
|
||||
<up-popup :show="couponShow" mode="bottom" >
|
||||
<view class="popup-header">
|
||||
<text class="title">选择优惠券</text>
|
||||
<up-icon name="close" @click="couponShow=false" size="20"></up-icon>
|
||||
</view>
|
||||
<scroll-view scroll-y class="select-content">
|
||||
<view class="select-item" v-for="item in couponList" :key="item.id" @click="selectCoupon(item)">
|
||||
<text>{{ item.title }}</text>
|
||||
<up-icon name="check" v-if="form.couponId === item.id" color="#2d7cf3"></up-icon>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</up-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
ref,
|
||||
reactive,
|
||||
onMounted
|
||||
} from 'vue'
|
||||
import * as couponApi from '@/http/api/market/coupon.js'
|
||||
|
||||
const emits = defineEmits(['success'])
|
||||
|
||||
// 弹窗显示
|
||||
const visible = ref(false)
|
||||
// 优惠券选择弹窗
|
||||
const couponShow = ref(false)
|
||||
|
||||
// 用户信息
|
||||
const user = ref(null)
|
||||
|
||||
// 表单
|
||||
const form = reactive({
|
||||
userId: '',
|
||||
couponId: '',
|
||||
num: 1,
|
||||
})
|
||||
|
||||
// 优惠券列表
|
||||
const couponList = ref([])
|
||||
const couponName = ref('')
|
||||
const loading = ref(false)
|
||||
|
||||
// 打开弹窗
|
||||
function open(data) {
|
||||
user.value = data
|
||||
form.userId = data.userId
|
||||
visible.value = true
|
||||
}
|
||||
|
||||
// 关闭弹窗
|
||||
function close() {
|
||||
visible.value = false
|
||||
reset()
|
||||
}
|
||||
|
||||
// 重置
|
||||
function reset() {
|
||||
form.userId = ''
|
||||
form.couponId = ''
|
||||
form.num = 1
|
||||
couponName.value = ''
|
||||
user.value = null
|
||||
}
|
||||
|
||||
// 打开选择优惠券
|
||||
function openCouponSelect() {
|
||||
couponShow.value = true
|
||||
}
|
||||
|
||||
// 选择优惠券
|
||||
function selectCoupon(item) {
|
||||
form.couponId = item.id
|
||||
couponName.value = item.title
|
||||
couponShow.value = false
|
||||
}
|
||||
|
||||
// 提交赠送
|
||||
async function submit() {
|
||||
if (!form.couponId) {
|
||||
uni.showToast({
|
||||
title: '请选择优惠券',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
if (form.num <= 0) {
|
||||
uni.showToast({
|
||||
title: '数量不能小于1',
|
||||
icon: 'none'
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
try {
|
||||
loading.value = true
|
||||
const res = await couponApi.giveCoupon(form)
|
||||
if (res) {
|
||||
uni.showToast({
|
||||
title: '赠送成功',
|
||||
icon: 'success'
|
||||
})
|
||||
emits('success')
|
||||
close()
|
||||
}
|
||||
} catch (err) {
|
||||
uni.showToast({
|
||||
title: '赠送失败',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 加载优惠券列表
|
||||
onMounted(() => {
|
||||
couponApi.getList({
|
||||
size: 999
|
||||
}).then((res) => {
|
||||
couponList.value = res.records || []
|
||||
})
|
||||
})
|
||||
|
||||
// 样式判断
|
||||
const couponTextClass = ref((val) => {
|
||||
return form.couponId ? 'text-primary' : 'text-gray'
|
||||
})
|
||||
|
||||
defineExpose({
|
||||
open,
|
||||
close
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.popup-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #fff;
|
||||
border-radius: 36rpx;
|
||||
min-width: 690rpx;
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
padding: 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-body {
|
||||
flex: 1;
|
||||
padding: 30rpx;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
.nickname {
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.text-gray {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.item-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.popup-footer {
|
||||
padding: 20rpx 30rpx;
|
||||
border-top: 1rpx solid #eee;
|
||||
display: flex;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
/* 优惠券选择 */
|
||||
.select-header {
|
||||
padding: 30rpx;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
}
|
||||
|
||||
.select-content {
|
||||
height: calc(100% - 100rpx);
|
||||
}
|
||||
|
||||
.select-item {
|
||||
padding: 30rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-bottom: 1rpx solid #f5f5f5;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
|
||||
.ml-20 {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.ml-2 {
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
.text-gray {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.text-primary {
|
||||
color: #2d7cf3;
|
||||
}
|
||||
</style>
|
||||
@@ -40,7 +40,7 @@
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="u-flex-1 u-text-center" >
|
||||
<view class="u-flex-1 u-text-center" @click="toCoupon">
|
||||
<view class="font-bold color-000 pr-16" >{{data.couponNum||0}}</view>
|
||||
<view class="u-flex u-row-center" >
|
||||
<view class="color-999">优惠券</view>
|
||||
@@ -81,7 +81,11 @@
|
||||
default:false
|
||||
}
|
||||
})
|
||||
|
||||
function toCoupon(){
|
||||
go.to('PAGES_USER_COUPON',{
|
||||
userId: props.data.id||'',
|
||||
})
|
||||
}
|
||||
function toOrder(){
|
||||
go.to('PAGES_ORDER_INDEX',{
|
||||
userId: props.data.userId||'',
|
||||
|
||||
@@ -7,9 +7,9 @@
|
||||
|
||||
</view>
|
||||
<!-- 用户列表 -->
|
||||
<template>
|
||||
<template v-if="true">
|
||||
<view class="input-wrapper u-p-l-30 u-p-r-30 u-p-b-30 bg-fff">
|
||||
<view class="input-main">
|
||||
<view class="input-main ">
|
||||
<uni-easyinput class='jeepay-search' :inputBorder="false" :placeholder="pageData.search.placeholder"
|
||||
v-model="pageData.query.key" @confirm="searchFunc">
|
||||
<template #prefixIcon>
|
||||
@@ -50,6 +50,7 @@
|
||||
</template>
|
||||
|
||||
<my-action-sheet @itemClick="actionSheetClick" ref="moreOperate" :list="moreOperateList"></my-action-sheet>
|
||||
|
||||
</view>
|
||||
<!-- 增减余额 -->
|
||||
<up-popup :show="datas.show" :round="18" mode="center" @close="close">
|
||||
@@ -139,12 +140,21 @@
|
||||
shape="circle"></up-button>
|
||||
</view>
|
||||
</up-popup>
|
||||
<!-- 引入弹窗 -->
|
||||
<GiveCouponPopup ref="giveCouponPopup" @success="refresh" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import go from '@/commons/utils/go.js';
|
||||
import myUser from './components/user.vue'
|
||||
import GiveCouponPopup from './components/give-coupon.vue'
|
||||
const giveCouponPopup = ref(null)
|
||||
// 打开赠送弹窗
|
||||
function openGive(e) {
|
||||
// 传入用户信息（和你 Web 端 open(data) 一样）
|
||||
giveCouponPopup.value.open(e)
|
||||
}
|
||||
|
||||
import { shopUserSummary, shopUserList,shopUserMoney } from '@/http/api/shopUser.js'
|
||||
|
||||
@@ -153,7 +163,7 @@
|
||||
import { onReachBottom } from '@dcloudio/uni-app';
|
||||
import { hasPermission } from '@/commons/utils/hasPermission.js';
|
||||
const moreOperate = ref(null)
|
||||
const moreOperateList = ['增减余额', '修改信息', ]
|
||||
const moreOperateList = ['增减余额', '修改信息','赠送券' ]
|
||||
|
||||
let datas = reactive({
|
||||
|
||||
@@ -199,6 +209,11 @@
|
||||
getUser()
|
||||
});
|
||||
|
||||
function refresh(){
|
||||
pageData.query.page=1
|
||||
getUser()
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取用户数据统计
|
||||
*/
|
||||
@@ -293,6 +308,9 @@
|
||||
}
|
||||
})
|
||||
}
|
||||
else if (i == 2) {
|
||||
openGive(datas.activeUser)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
408
pageUser/user-coupon/user-coupon.vue
Normal file
408
pageUser/user-coupon/user-coupon.vue
Normal file
@@ -0,0 +1,408 @@
|
||||
<template>
|
||||
<view class="coupon-container u-font-28">
|
||||
<!-- 搜索表单 -->
|
||||
<view class="search-box">
|
||||
<!-- 第一行：名称 + 状态 -->
|
||||
<view class="search-row">
|
||||
<view class="search-item " @click="openStatusPicker">
|
||||
<view class="">
|
||||
{{ statusTextMap[query.status] || '请选择' }}
|
||||
</view>
|
||||
<up-icon name="arrow-down"></up-icon>
|
||||
</view>
|
||||
<view class="search-item flex-1 u-p-l-30">
|
||||
<up-search v-model="query.name" placeholder="优惠券名称"></up-search>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 第二行：日期 + 搜索按钮 -->
|
||||
<view class="search-row mt-20">
|
||||
<view class="search-item flex-1" @click="timeToggle">
|
||||
<text class="">领取时间</text>
|
||||
<view class="select-text">
|
||||
{{ showDate || '请选择' }}
|
||||
<view @click.stop="()=>{}">
|
||||
<up-icon name="arrow-down" v-if="!showDate" @click="timeToggle"></up-icon>
|
||||
<up-icon name="close" @click="resetDate" v-else></up-icon>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<my-date-pickerview @confirm="datePickerConfirm" mode="date" ref="datePicker"></my-date-pickerview>
|
||||
|
||||
<!-- 优惠券列表 -->
|
||||
<view class="coupon-list">
|
||||
<view class="coupon-card" v-for="item in tableData" :key="item.id">
|
||||
<view class="card-header">
|
||||
<view class="card-name">{{ item.name }}</view>
|
||||
<view class="card-tag" :class="getStatusClass(item.status)">
|
||||
{{ getStatusText(item.status) }}
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="card-row">
|
||||
<text class="label-text">券ID</text>
|
||||
<text class="value-text">{{ item.id }}</text>
|
||||
</view>
|
||||
<view class="card-row">
|
||||
<text class="label-text">领取来源</text>
|
||||
<text class="value-text">{{ item.source }}</text>
|
||||
</view>
|
||||
<view class="card-row">
|
||||
<text class="label-text">领取时间</text>
|
||||
<text class="value-text">{{ item.createTime }}</text>
|
||||
</view>
|
||||
<view class="card-row">
|
||||
<text class="label-text">使用时间</text>
|
||||
<text class="value-text">{{ item.useTime || '—' }}</text>
|
||||
</view>
|
||||
|
||||
<view class="card-footer u-flex u-row-right">
|
||||
<view style="width:200rpx;">
|
||||
<u-button type="error" size="small" @click="handleInvalid(item)"
|
||||
custom-style="border-radius: 6rpx;padding: 0 20rpx;height: 50rpx;line-height: 50rpx;">
|
||||
失效
|
||||
</u-button>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 空状态 -->
|
||||
<view class="empty" v-if="tableData.length === 0 && !loading">
|
||||
<text class="empty-text">暂无优惠券记录</text>
|
||||
</view>
|
||||
|
||||
<!-- 加载更多 -->
|
||||
<u-loadmore :status="loadStatus" @loadmore="getMoreList" v-if="tableData.length>0" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
reactive,
|
||||
ref
|
||||
} from 'vue';
|
||||
import {
|
||||
onLoad
|
||||
} from '@dcloudio/uni-app';
|
||||
import * as couponApi from '@/http/api/market/coupon.js';
|
||||
const datePicker = ref(null)
|
||||
/**
|
||||
* 选择时间
|
||||
*/
|
||||
function timeToggle() {
|
||||
datePicker.value.toggle()
|
||||
}
|
||||
|
||||
/**
|
||||
* 筛选时间确认
|
||||
* @param {Object} e
|
||||
*/
|
||||
function datePickerConfirm(e) {
|
||||
console.log(e);
|
||||
if (e) {
|
||||
let {
|
||||
start,
|
||||
end
|
||||
} = e
|
||||
start = start.split(' ')[0]
|
||||
end = end.split(' ')[0]
|
||||
query.date = [start, end]
|
||||
showDate.value = start + '至' + end
|
||||
query.page = 1;
|
||||
console.log('query.date', query.date);
|
||||
getList();
|
||||
}
|
||||
}
|
||||
|
||||
function resetDate() {
|
||||
query.date = '';
|
||||
showDate.value = '';
|
||||
query.page = 1;
|
||||
getList();
|
||||
}
|
||||
// 状态配置
|
||||
const statusList = ref([{
|
||||
label: '全部',
|
||||
value: ''
|
||||
},
|
||||
{
|
||||
label: '未使用',
|
||||
value: 0
|
||||
},
|
||||
{
|
||||
label: '已使用',
|
||||
value: 1
|
||||
},
|
||||
{
|
||||
label: '已过期',
|
||||
value: 2
|
||||
},
|
||||
]);
|
||||
const statusTextMap = {
|
||||
'': '全部',
|
||||
0: '未使用',
|
||||
1: '已使用',
|
||||
2: '已过期',
|
||||
};
|
||||
|
||||
// 查询参数
|
||||
const query = reactive({
|
||||
status: '',
|
||||
name: '',
|
||||
date: '',
|
||||
shopUserId: '',
|
||||
page: 1,
|
||||
size: 10,
|
||||
});
|
||||
|
||||
// 页面状态
|
||||
const tableData = ref([]);
|
||||
const loading = ref(false);
|
||||
const loadStatus = ref('loadmore');
|
||||
const showDate = ref('');
|
||||
|
||||
// 页面加载
|
||||
onLoad((opt) => {
|
||||
query.shopUserId = opt.userId;
|
||||
getList();
|
||||
});
|
||||
|
||||
// 打开状态选择
|
||||
function openStatusPicker() {
|
||||
const arr = statusList.value.map(i => i.label);
|
||||
uni.showActionSheet({
|
||||
itemList: arr,
|
||||
success: (res) => {
|
||||
const item = statusList.value[res.tapIndex];
|
||||
query.status = item.value;
|
||||
// 状态改变 → 自动重置页数并搜索
|
||||
query.page = 1;
|
||||
getList();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 获取列表
|
||||
async function getList() {
|
||||
try {
|
||||
loading.value = true;
|
||||
loadStatus.value = 'loadmore';
|
||||
const res = await couponApi.getRecordByUser({
|
||||
...query
|
||||
});
|
||||
tableData.value = res.records || [];
|
||||
loadStatus.value = tableData.value.length >= res.totalRow ? 'nomore' : 'loadmore';
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
// 加载更多
|
||||
async function getMoreList() {
|
||||
if (loadStatus.value === 'nomore') return;
|
||||
query.page++;
|
||||
try {
|
||||
loadStatus.value = 'loading';
|
||||
const res = await couponApi.getRecordByUser({
|
||||
...query
|
||||
});
|
||||
tableData.value.push(...res.records);
|
||||
loadStatus.value = tableData.value.length >= res.totalRow ? 'nomore' : 'loadmore';
|
||||
} catch (e) {
|
||||
loadStatus.value = 'loadmore';
|
||||
}
|
||||
}
|
||||
|
||||
// 搜索
|
||||
function handleSearch() {
|
||||
query.page = 1;
|
||||
getList();
|
||||
}
|
||||
|
||||
// 失效
|
||||
async function handleInvalid(row) {
|
||||
uni.showModal({
|
||||
title: '确认失效',
|
||||
content: '确定要将该优惠券置为失效吗？',
|
||||
success: async (res) => {
|
||||
if (!res.confirm) return;
|
||||
const resApi = await couponApi.deleteRecord({
|
||||
id: row.id
|
||||
});
|
||||
uni.showToast({
|
||||
title: '操作成功',
|
||||
icon: 'success'
|
||||
});
|
||||
getList();
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
// 状态文本 + 样式
|
||||
function getStatusText(status) {
|
||||
return statusTextMap[status] || '未知';
|
||||
}
|
||||
|
||||
function getStatusClass(status) {
|
||||
if (status === 0) return 'tag-unused';
|
||||
if (status === 1) return 'tag-used';
|
||||
if (status === 2) return 'tag-expire';
|
||||
return 'tag-default';
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.coupon-container {
|
||||
padding: 20rpx;
|
||||
background: #f7f8fa;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
/* 搜索区域 */
|
||||
.search-box {
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.search-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.select-text {
|
||||
font-size: 28rpx;
|
||||
border: 1px solid #dedede;
|
||||
border-radius: 16rpx;
|
||||
padding: 10rpx 30rpx;
|
||||
color: #333;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
margin-left: 20rpx;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.arrow {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.search-btn {
|
||||
border-radius: 8rpx !important;
|
||||
height: 70rpx !important;
|
||||
line-height: 70rpx !important;
|
||||
}
|
||||
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.ml-20 {
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.mt-20 {
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
/* 卡片 */
|
||||
.coupon-card {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 32rpx;
|
||||
margin-bottom: 20rpx;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
.card-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.card-tag {
|
||||
padding: 8rpx 16rpx;
|
||||
border-radius: 30rpx;
|
||||
font-size: 24rpx;
|
||||
|
||||
&.tag-unused {
|
||||
background: #fff5e6;
|
||||
color: #ff7d00;
|
||||
}
|
||||
|
||||
&.tag-used {
|
||||
background: #f2f3f5;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
&.tag-expire {
|
||||
background: #f7f8fa;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-row {
|
||||
display: flex;
|
||||
margin-bottom: 16rpx;
|
||||
|
||||
.label-text {
|
||||
width: 140rpx;
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.value-text {
|
||||
flex: 1;
|
||||
font-size: 26rpx;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
text-align: right;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
/* 空状态 */
|
||||
.empty {
|
||||
padding: 100rpx 0;
|
||||
text-align: center;
|
||||
|
||||
.empty-text {
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user