feat: Store openid on login, redesign mine page coupon popup, and update mine page menu items.
This commit is contained in:
parent
8a6ac48d59
commit
f8b1f57cd7
@ -87,8 +87,10 @@ export function requestShipping(user_id, ids) {
|
|||||||
return authRequest({ url: `/api/app/users/${user_id}/inventory/request-shipping`, method: 'POST', data: { inventory_ids: ids } })
|
return authRequest({ url: `/api/app/users/${user_id}/inventory/request-shipping`, method: 'POST', data: { inventory_ids: ids } })
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getItemCards(user_id) {
|
export function getItemCards(user_id, status) {
|
||||||
return authRequest({ url: `/api/app/users/${user_id}/item_cards`, method: 'GET' })
|
const data = {}
|
||||||
|
if (status !== undefined) data.status = status
|
||||||
|
return authRequest({ url: `/api/app/users/${user_id}/item_cards`, method: 'GET', data })
|
||||||
}
|
}
|
||||||
|
|
||||||
export function getUserCoupons(user_id, status, page = 1, page_size = 20) {
|
export function getUserCoupons(user_id, status, page = 1, page_size = 20) {
|
||||||
|
|||||||
@ -62,20 +62,65 @@
|
|||||||
<!-- Tab 1: 已申请发货 -->
|
<!-- Tab 1: 已申请发货 -->
|
||||||
<block v-if="currentTab === 1">
|
<block v-if="currentTab === 1">
|
||||||
<view v-if="loading && shippedList.length === 0" class="status-text">加载中...</view>
|
<view v-if="loading && shippedList.length === 0" class="status-text">加载中...</view>
|
||||||
<view v-else-if="!shippedList || shippedList.length === 0" class="status-text">暂无已发货记录</view>
|
<view v-else-if="!shippedList || shippedList.length === 0" class="status-text">暂无发货记录</view>
|
||||||
|
|
||||||
<view v-else class="inventory-grid">
|
<view v-else class="shipment-list">
|
||||||
<view v-for="(item, index) in shippedList" :key="index" class="inventory-item">
|
<view v-for="(item, index) in shippedList" :key="index" class="shipment-card">
|
||||||
<!-- 已发货仅展示 -->
|
<!-- 头部：批次信息和状态 -->
|
||||||
<image :src="item.image" mode="aspectFill" class="item-image" @error="onImageError(index, 'shipped')" />
|
<view class="shipment-header">
|
||||||
<view class="item-info">
|
<view class="shipment-batch">
|
||||||
<text class="item-name">{{ item.name || '未命名道具' }}</text>
|
<text class="batch-label">发货单</text>
|
||||||
<text class="item-count">x{{ item.count || 1 }}</text>
|
<text class="batch-no" v-if="item.batch_no">{{ item.batch_no }}</text>
|
||||||
<text class="item-status">已申请发货</text>
|
<view class="count-badge">{{ item.count }}件商品</view>
|
||||||
<text class="item-meta" v-if="item.express_code || item.express_no">快递：{{ item.express_code }} {{ item.express_no }}</text>
|
</view>
|
||||||
<text class="item-meta" v-if="item.shipped_at">发货时间：{{ formatDate(item.shipped_at) }}</text>
|
<view class="shipment-status" :class="getStatusClass(item.status)">
|
||||||
<text class="item-meta" v-if="item.received_at">签收时间：{{ formatDate(item.received_at) }}</text>
|
{{ getStatusText(item.status) }}
|
||||||
</view>
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 商品缩略图列表 -->
|
||||||
|
<view class="product-thumbnails">
|
||||||
|
<view class="thumb-scroll">
|
||||||
|
<image
|
||||||
|
v-for="(img, imgIdx) in item.product_images.slice(0, 4)"
|
||||||
|
:key="imgIdx"
|
||||||
|
:src="img"
|
||||||
|
mode="aspectFill"
|
||||||
|
class="thumb-img"
|
||||||
|
@error="onThumbError(index, imgIdx)"
|
||||||
|
/>
|
||||||
|
<view class="thumb-more" v-if="item.product_images.length > 4">
|
||||||
|
+{{ item.product_images.length - 4 }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<!-- 商品名称列表 -->
|
||||||
|
<view class="product-names">
|
||||||
|
<text class="product-name-item" v-for="(name, nIdx) in item.product_names.slice(0, 3)" :key="nIdx">
|
||||||
|
{{ name }}
|
||||||
|
</text>
|
||||||
|
<text class="product-name-more" v-if="item.product_names.length > 3">
|
||||||
|
等{{ item.product_names.length }}件商品
|
||||||
|
</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 物流信息 -->
|
||||||
|
<view class="shipment-express" v-if="item.express_code || item.express_no">
|
||||||
|
<view class="express-icon">
|
||||||
|
<text class="iconfont">📦</text>
|
||||||
|
</view>
|
||||||
|
<view class="express-info">
|
||||||
|
<text class="express-company">{{ item.express_code || '待发货' }}</text>
|
||||||
|
<text class="express-no" v-if="item.express_no">{{ item.express_no }}</text>
|
||||||
|
</view>
|
||||||
|
<text class="express-copy" v-if="item.express_no" @tap="copyExpressNo(item.express_no)">复制</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 时间信息 -->
|
||||||
|
<view class="shipment-time">
|
||||||
|
<text class="time-item" v-if="item.created_at">申请时间：{{ formatDate(item.created_at) }}</text>
|
||||||
|
<text class="time-item" v-if="item.shipped_at">发货时间：{{ formatDate(item.shipped_at) }}</text>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view v-if="loading && shippedList.length > 0" class="loading-more">加载更多...</view>
|
<view v-if="loading && shippedList.length > 0" class="loading-more">加载更多...</view>
|
||||||
@ -217,6 +262,42 @@ function formatDate(dateStr) {
|
|||||||
return `${y}-${m}-${da} ${h}:${min}`
|
return `${y}-${m}-${da} ${h}:${min}`
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 发货状态辅助函数
|
||||||
|
function getStatusClass(status) {
|
||||||
|
const statusMap = {
|
||||||
|
1: 'status-pending', // 待发货
|
||||||
|
2: 'status-shipped', // 已发货
|
||||||
|
3: 'status-delivered', // 已签收
|
||||||
|
4: 'status-cancelled' // 已取消
|
||||||
|
}
|
||||||
|
return statusMap[status] || 'status-pending'
|
||||||
|
}
|
||||||
|
|
||||||
|
function getStatusText(status) {
|
||||||
|
const statusMap = {
|
||||||
|
1: '待发货',
|
||||||
|
2: '运输中',
|
||||||
|
3: '已签收',
|
||||||
|
4: '已取消'
|
||||||
|
}
|
||||||
|
return statusMap[status] || '待发货'
|
||||||
|
}
|
||||||
|
|
||||||
|
function copyExpressNo(expressNo) {
|
||||||
|
uni.setClipboardData({
|
||||||
|
data: expressNo,
|
||||||
|
success: () => {
|
||||||
|
uni.showToast({ title: '已复制单号', icon: 'success' })
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function onThumbError(shipmentIndex, imgIndex) {
|
||||||
|
if (shippedList.value[shipmentIndex] && shippedList.value[shipmentIndex].product_images) {
|
||||||
|
shippedList.value[shipmentIndex].product_images[imgIndex] = '/static/logo.png'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
async function loadShipments(uid) {
|
async function loadShipments(uid) {
|
||||||
if (loading.value) return
|
if (loading.value) return
|
||||||
loading.value = true
|
loading.value = true
|
||||||
@ -227,21 +308,51 @@ async function loadShipments(uid) {
|
|||||||
if (res && Array.isArray(res.list)) { list = res.list; total = res.total || 0 }
|
if (res && Array.isArray(res.list)) { list = res.list; total = res.total || 0 }
|
||||||
else if (res && Array.isArray(res.data)) { list = res.data; total = res.total || 0 }
|
else if (res && Array.isArray(res.data)) { list = res.data; total = res.total || 0 }
|
||||||
else if (Array.isArray(res)) { list = res; total = res.length }
|
else if (Array.isArray(res)) { list = res; total = res.length }
|
||||||
const mapped = list.map(s => ({
|
|
||||||
image: '/static/logo.png',
|
// 处理每个发货单 - 直接使用返回的 products 数组
|
||||||
name: '发货单',
|
const mapped = list.map(s => {
|
||||||
count: s.count ?? (Array.isArray(s.inventory_ids) ? s.inventory_ids.length : 0),
|
const products = s.products || []
|
||||||
express_code: s.express_code || '',
|
let productImages = []
|
||||||
express_no: s.express_no || '',
|
let productNames = []
|
||||||
shipped_at: s.shipped_at || '',
|
|
||||||
received_at: s.received_at || '',
|
// 从 products 数组中提取图片和名称
|
||||||
status: s.status
|
products.forEach(product => {
|
||||||
}))
|
if (product) {
|
||||||
|
// image 字段是 JSON 数组字符串，需要解析
|
||||||
|
const rawImg = product.image || product.images || product.main_image
|
||||||
|
const img = cleanUrl(rawImg)
|
||||||
|
productImages.push(img)
|
||||||
|
productNames.push(product.name || product.title || '商品')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 如果没有获取到任何图片，使用默认图片
|
||||||
|
if (productImages.length === 0) {
|
||||||
|
productImages = ['/static/logo.png']
|
||||||
|
productNames = ['未知商品']
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
batch_no: s.batch_no || '',
|
||||||
|
count: s.count ?? (Array.isArray(s.inventory_ids) ? s.inventory_ids.length : 0),
|
||||||
|
product_ids: s.product_ids || [],
|
||||||
|
product_images: productImages,
|
||||||
|
product_names: productNames,
|
||||||
|
express_code: s.express_code || '',
|
||||||
|
express_no: s.express_no || '',
|
||||||
|
created_at: s.created_at || '',
|
||||||
|
shipped_at: s.shipped_at || '',
|
||||||
|
received_at: s.received_at || '',
|
||||||
|
status: s.status || 1
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
const next = page.value === 1 ? mapped : [...shippedList.value, ...mapped]
|
const next = page.value === 1 ? mapped : [...shippedList.value, ...mapped]
|
||||||
shippedList.value = next
|
shippedList.value = next
|
||||||
if (list.length < pageSize.value || (page.value * pageSize.value >= total && total > 0)) { hasMore.value = false } else { page.value += 1 }
|
if (list.length < pageSize.value || (page.value * pageSize.value >= total && total > 0)) { hasMore.value = false } else { page.value += 1 }
|
||||||
if (list.length === 0) { hasMore.value = false }
|
if (list.length === 0) { hasMore.value = false }
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
|
console.error('Load shipments error:', e)
|
||||||
uni.showToast({ title: '加载失败', icon: 'none' })
|
uni.showToast({ title: '加载失败', icon: 'none' })
|
||||||
} finally {
|
} finally {
|
||||||
loading.value = false
|
loading.value = false
|
||||||
@ -875,4 +986,207 @@ async function onShip() {
|
|||||||
height: calc(130rpx + constant(safe-area-inset-bottom));
|
height: calc(130rpx + constant(safe-area-inset-bottom));
|
||||||
height: calc(130rpx + env(safe-area-inset-bottom));
|
height: calc(130rpx + env(safe-area-inset-bottom));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* ============================================
|
||||||
|
发货单卡片样式
|
||||||
|
============================================ */
|
||||||
|
.shipment-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shipment-card {
|
||||||
|
background: #FFFFFF;
|
||||||
|
border-radius: 24rpx;
|
||||||
|
padding: 28rpx;
|
||||||
|
box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 发货单头部 */
|
||||||
|
.shipment-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
border-bottom: 1rpx solid #F3F4F6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shipment-batch {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
gap: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.batch-label {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1F2937;
|
||||||
|
}
|
||||||
|
|
||||||
|
.batch-no {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #9CA3AF;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.count-badge {
|
||||||
|
background: linear-gradient(135deg, #FFF4E6, #FFEDD5);
|
||||||
|
color: #FF6B35;
|
||||||
|
font-size: 22rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 6rpx 16rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 发货状态标签 */
|
||||||
|
.shipment-status {
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 8rpx 20rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-pending {
|
||||||
|
background: #FEF3C7;
|
||||||
|
color: #D97706;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-shipped {
|
||||||
|
background: #DBEAFE;
|
||||||
|
color: #2563EB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-delivered {
|
||||||
|
background: #D1FAE5;
|
||||||
|
color: #059669;
|
||||||
|
}
|
||||||
|
|
||||||
|
.status-cancelled {
|
||||||
|
background: #FEE2E2;
|
||||||
|
color: #DC2626;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 商品缩略图 */
|
||||||
|
.product-thumbnails {
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thumb-scroll {
|
||||||
|
display: flex;
|
||||||
|
gap: 16rpx;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.thumb-img {
|
||||||
|
width: 120rpx;
|
||||||
|
height: 120rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
background: linear-gradient(145deg, #FFF8F3, #FFF4E6);
|
||||||
|
flex-shrink: 0;
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
|
||||||
|
}
|
||||||
|
|
||||||
|
.thumb-more {
|
||||||
|
width: 120rpx;
|
||||||
|
height: 120rpx;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
background: linear-gradient(135deg, #F9FAFB, #F3F4F6);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #6B7280;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 商品名称列表 */
|
||||||
|
.product-names {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8rpx 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-name-item {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #6B7280;
|
||||||
|
background: #F9FAFB;
|
||||||
|
padding: 6rpx 14rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
max-width: 200rpx;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
.product-name-more {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #FF6B35;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 物流信息 */
|
||||||
|
.shipment-express {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background: linear-gradient(135deg, #F0F9FF, #E0F2FE);
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.express-icon {
|
||||||
|
width: 48rpx;
|
||||||
|
height: 48rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 32rpx;
|
||||||
|
margin-right: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.express-info {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 4rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.express-company {
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #1F2937;
|
||||||
|
}
|
||||||
|
|
||||||
|
.express-no {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #6B7280;
|
||||||
|
font-family: monospace;
|
||||||
|
}
|
||||||
|
|
||||||
|
.express-copy {
|
||||||
|
font-size: 24rpx;
|
||||||
|
color: #2563EB;
|
||||||
|
font-weight: 500;
|
||||||
|
padding: 12rpx 20rpx;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 时间信息 */
|
||||||
|
.shipment-time {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 6rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-item {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #9CA3AF;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -166,6 +166,9 @@ function onGetPhoneNumber(e) {
|
|||||||
if (user_info.avatar) uni.setStorageSync('avatar', user_info.avatar)
|
if (user_info.avatar) uni.setStorageSync('avatar', user_info.avatar)
|
||||||
if (user_info.nickname) uni.setStorageSync('nickname', user_info.nickname)
|
if (user_info.nickname) uni.setStorageSync('nickname', user_info.nickname)
|
||||||
if (user_info.invite_code) uni.setStorageSync('invite_code', user_info.invite_code)
|
if (user_info.invite_code) uni.setStorageSync('invite_code', user_info.invite_code)
|
||||||
|
// 保存 openid 用于支付等场景
|
||||||
|
const openid = data && (data.openid || data.open_id)
|
||||||
|
if (openid) uni.setStorageSync('openid', openid)
|
||||||
|
|
||||||
// 绑定手机号逻辑...
|
// 绑定手机号逻辑...
|
||||||
try {
|
try {
|
||||||
|
|||||||
@ -21,7 +21,6 @@
|
|||||||
<view class="userid" v-else>ID: {{ userId || '-' }}</view>
|
<view class="userid" v-else>ID: {{ userId || '-' }}</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="join-btn" @click="handleJoin" v-if="!nickname">立即登录</view>
|
<view class="join-btn" @click="handleJoin" v-if="!nickname">立即登录</view>
|
||||||
<view class="join-btn" @click="signCheckin" v-else>立即签到</view>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 数据统计栏 (Modified: Points / Coupons / Item Cards) -->
|
<!-- 数据统计栏 (Modified: Points / Coupons / Item Cards) -->
|
||||||
@ -42,7 +41,7 @@
|
|||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- 邀请Banner (Relocated & Re-designed) -->
|
<!-- 邀请Banner (Relocated & Re-designed) -->
|
||||||
<view class="invite-banner">
|
<view class="invite-banner" @click="handleInvite">
|
||||||
<view class="invite-info">
|
<view class="invite-info">
|
||||||
<view class="invite-tag">好礼相送</view>
|
<view class="invite-tag">好礼相送</view>
|
||||||
<view class="invite-title">邀请好友送好礼</view>
|
<view class="invite-title">邀请好友送好礼</view>
|
||||||
@ -60,7 +59,7 @@
|
|||||||
<view class="section-title">我的订单</view>
|
<view class="section-title">我的订单</view>
|
||||||
<view class="grid-row">
|
<view class="grid-row">
|
||||||
<view class="grid-item" @click="toOrders('pending')">
|
<view class="grid-item" @click="toOrders('pending')">
|
||||||
<image class="grid-icon-img" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNGRjZCMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMSA4YTIgMiAwIDAgMC0xLTEuNzNMNTIuMjdhMiAyIDAgMCAwLTIgMGwtOCA0LjczQTIgMiAwIDAgMCA0IDhoMTZ6TTQgOGwyIDEyaDEybDItMTJNNCA4bDgtNCA4IDQiIC8+PC9zdmc+" mode="aspectFit"></image>
|
<image class="grid-icon-img" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNGRjZCMDAiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0yMSA4YTIgMiAwIDAgMC0xLTEuNzNsLTctNGEyIDIgMCAwIDAtMiAwbC03IDRBMiAyIDAgMCAwIDMgOHY4YTIgMiAwIDAgMCAxIDEuNzNsNyA0YTIgMiAwIDAgMCAyIDBsNy00QTIgMiAwIDAgMCAyMSAxNlY4eiIvPjxwYXRoIGQ9Ik0zLjI3IDYuOTZMMTIgMTIuMDFsMTAgLTUuMDUiLz48cGF0aCBkPSJNMTIgMjIuMDhWMTIiLz48L3N2Zz4=" mode="aspectFit"></image>
|
||||||
<text class="grid-label">盒柜</text>
|
<text class="grid-label">盒柜</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="grid-item" @click="toOrders('pending')">
|
<view class="grid-item" @click="toOrders('pending')">
|
||||||
@ -89,9 +88,9 @@
|
|||||||
<image class="menu-icon-img" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHg9IjMiIHk9IjMiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgcng9IjIiIHJ5PSIyIj48L3JlY3Q+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iNCIgLz48cGF0aCBkPSJNMjEgMTVsLTUuNDMtMy4yM2EyIDIgMCAwIDAtMS44NCAwbC0yLjMxIDEuMzciIC8+PC9zdmc+" mode="aspectFit"></image>
|
<image class="menu-icon-img" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxyZWN0IHg9IjMiIHk9IjMiIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgcng9IjIiIHJ5PSIyIj48L3JlY3Q+PGNpcmNsZSBjeD0iMTIiIGN5PSIxMiIgcj0iNCIgLz48cGF0aCBkPSJNMjEgMTVsLTUuNDMtMy4yM2EyIDIgMCAwIDAtMS44NCAwbC0yLjMxIDEuMzciIC8+PC9zdmc+" mode="aspectFit"></image>
|
||||||
<text class="menu-label">道具卡</text>
|
<text class="menu-label">道具卡</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="menu-item">
|
<view class="menu-item" @click="showTasksPopup">
|
||||||
<image class="menu-icon-img" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik02IDJMNCA2djEyYTIgMiAwIDAgMCAyIDJoMTJhMiAyIDAgMCAwIDItMlY2bC0yLTRINlpNOSA2djRCMyA1IDAgMCAwIDE1IDEweiIgLz48L3N2Zz4=" mode="aspectFit"></image>
|
<image class="menu-icon-img" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik05IDExbDMgM0wyMiA0Ii8+PHBhdGggZD0iTTIxIDEydjdhMiAyIDAgMCAxLTIgMkg1YTIgMiAwIDAgMS0yLTJWNWEyIDIgMCAwIDEgMi0yaDExIi8+PC9zdmc+" mode="aspectFit"></image>
|
||||||
<text class="menu-label">赏包</text>
|
<text class="menu-label">任务中心</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="menu-item" @click="toAddresses"> <!-- 此处暂用 invite_log 占位 -->
|
<view class="menu-item" @click="toAddresses"> <!-- 此处暂用 invite_log 占位 -->
|
||||||
<image class="menu-icon-img" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xNiA0aDJhMiAyIDAgMCAxIDIgMnYxNGEyIDIgMCAwIDEtMiAySDZ4MiAyIDAgMCAxLTItMnYtMTQiIC8+PHJlY3QgeD0iOCIgeT0iMiIgd2lkdGg9IjgiIGhlaWdodD0iNCIgcng9IjEiIHJ5PSIyIj48L3JlY3Q+PC9zdmc+" mode="aspectFit"></image>
|
<image class="menu-icon-img" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik0xNiA0aDJhMiAyIDAgMCAxIDIgMnYxNGEyIDIgMCAwIDEtMiAySDZ4MiAyIDAgMCAxLTItMnYtMTQiIC8+PHJlY3QgeD0iOCIgeT0iMiIgd2lkdGg9IjgiIGhlaWdodD0iNCIgcng9IjEiIHJ5PSIyIj48L3JlY3Q+PC9zdmc+" mode="aspectFit"></image>
|
||||||
@ -102,7 +101,7 @@
|
|||||||
<text class="menu-label">收货地址</text>
|
<text class="menu-label">收货地址</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="menu-item" @click="toHelp">
|
<view class="menu-item" @click="toHelp">
|
||||||
<image class="menu-icon-img" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIiAvPjxwYXRoIGQ9Ik05LjA5IDlhMyAzIDAgMCAxIDUuODMgMS43OGMwIC4zOC0uNDIuNzktLjYzIDEuMDMtLjU5LjcxLTEuMTggMS40My0xLjE4IDIuMTkiIC8+PGxpbmUgeDE9IjEyIiB5MT0iMTciIHgyPSIxMiIgeTI9“MTciPjwvbGluZT48L3N2Zz4=" mode="aspectFit"></image>
|
<image class="menu-icon-img" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0OCIgaGVpZ2h0PSI0OCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiMzMzMiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIi8+PHBhdGggZD0iTTkuMDkgOWEzIDMgMCAwIDEgNS44MyAxYzAgMi0zIDMtMyAzIi8+PHBhdGggZD0iTTEyIDE3aC4wMSIvPjwvc3ZnPg==" mode="aspectFit"></image>
|
||||||
<text class="menu-label">帮助中心</text>
|
<text class="menu-label">帮助中心</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -141,7 +140,7 @@
|
|||||||
|
|
||||||
<!-- 优惠券弹窗 -->
|
<!-- 优惠券弹窗 -->
|
||||||
<view class="popup-mask" v-if="couponsVisible" @tap="closeCouponsPopup">
|
<view class="popup-mask" v-if="couponsVisible" @tap="closeCouponsPopup">
|
||||||
<view class="popup-content" @tap.stop>
|
<view class="popup-content coupon-popup" @tap.stop>
|
||||||
<view class="popup-header">
|
<view class="popup-header">
|
||||||
<text class="popup-title">我的优惠券</text>
|
<text class="popup-title">我的优惠券</text>
|
||||||
<text class="close-btn" @tap="closeCouponsPopup">×</text>
|
<text class="close-btn" @tap="closeCouponsPopup">×</text>
|
||||||
@ -150,30 +149,38 @@
|
|||||||
<view class="popup-tabs">
|
<view class="popup-tabs">
|
||||||
<view class="popup-tab" :class="{ active: couponsTab === 0 }" @tap="switchCouponsTab(0)">未使用</view>
|
<view class="popup-tab" :class="{ active: couponsTab === 0 }" @tap="switchCouponsTab(0)">未使用</view>
|
||||||
<view class="popup-tab" :class="{ active: couponsTab === 1 }" @tap="switchCouponsTab(1)">已使用</view>
|
<view class="popup-tab" :class="{ active: couponsTab === 1 }" @tap="switchCouponsTab(1)">已使用</view>
|
||||||
<view class="popup-tab" :class="{ active: couponsTab === 2 }" @tap="switchCouponsTab(2)">去兑换</view>
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view v-if="couponsTab === 2" class="redeem-container">
|
<scroll-view scroll-y class="coupon-scroll" @scrolltolower="loadMoreCoupons">
|
||||||
<input class="redeem-input" v-model="redeemCode" placeholder="请输入兑换码" />
|
|
||||||
<button class="redeem-btn" @tap="handleRedeem">立即兑换</button>
|
|
||||||
</view>
|
|
||||||
|
|
||||||
<scroll-view v-else scroll-y class="points-list" @scrolltolower="loadMoreCoupons">
|
|
||||||
<view v-if="couponsLoading && couponsList.length === 0" class="status-text">加载中...</view>
|
<view v-if="couponsLoading && couponsList.length === 0" class="status-text">加载中...</view>
|
||||||
<view v-else-if="!couponsList || couponsList.length === 0" class="status-text">暂无优惠券</view>
|
<view v-else-if="!couponsList || couponsList.length === 0" class="empty-state">
|
||||||
|
<text class="empty-icon">🎟️</text>
|
||||||
|
<text class="empty-text">暂无优惠券</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
<view v-for="(item, index) in couponsList" :key="index" class="coupon-item">
|
<view v-for="(item, index) in couponsList" :key="index" class="coupon-ticket" :class="{ 'used': couponsTab === 1 }">
|
||||||
<view class="coupon-left">
|
<view class="coupon-left-section">
|
||||||
<text class="coupon-name">{{ item.name || '优惠券' }}</text>
|
<view class="coupon-value">
|
||||||
<text class="coupon-desc">{{ item.rules || item.description || '' }}</text>
|
<text class="coupon-symbol">¥</text>
|
||||||
<text class="coupon-time">有效期至：{{ formatDate(item.valid_end || item.end_time) }}</text>
|
<text class="coupon-amount">{{ formatCouponValue(item.remaining || item.amount || 0) }}</text>
|
||||||
|
</view>
|
||||||
|
<text class="coupon-condition">满{{ formatCouponValue(item.min_amount || 0) }}可用</text>
|
||||||
</view>
|
</view>
|
||||||
<view class="coupon-right">
|
<view class="coupon-divider">
|
||||||
<view v-if="couponsTab === 0 && (item.remaining !== undefined && item.remaining !== null)" class="coupon-amount-wrapper">
|
<view class="divider-circle top"></view>
|
||||||
<text class="symbol">¥</text>
|
<view class="divider-line"></view>
|
||||||
<text class="amount-value">{{ (Number(item.remaining || 0) / 100).toFixed(2) }}</text>
|
<view class="divider-circle bottom"></view>
|
||||||
</view>
|
</view>
|
||||||
<text class="coupon-status">{{ couponsTab === 0 ? '未使用' : '已使用/过期' }}</text>
|
<view class="coupon-right-section">
|
||||||
|
<text class="coupon-name">{{ item.name || '优惠券' }}</text>
|
||||||
|
<text class="coupon-desc">{{ item.rules || item.description || '全场通用' }}</text>
|
||||||
|
<text class="coupon-expire">有效期至：{{ formatDate(item.valid_end || item.end_time) }}</text>
|
||||||
|
<view class="coupon-action" v-if="couponsTab === 0">
|
||||||
|
<text class="use-btn">去使用</text>
|
||||||
|
</view>
|
||||||
|
<view class="coupon-status-badge" v-else>
|
||||||
|
<text>{{ couponsTab === 1 ? '已使用' : '已过期' }}</text>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
@ -185,22 +192,40 @@
|
|||||||
|
|
||||||
<!-- 道具卡弹窗 -->
|
<!-- 道具卡弹窗 -->
|
||||||
<view class="popup-mask" v-if="itemCardsVisible" @tap="closeItemCardsPopup">
|
<view class="popup-mask" v-if="itemCardsVisible" @tap="closeItemCardsPopup">
|
||||||
<view class="popup-content" @tap.stop>
|
<view class="popup-content item-cards-popup" @tap.stop>
|
||||||
<view class="popup-header">
|
<view class="popup-header">
|
||||||
<text class="popup-title">我的道具卡</text>
|
<text class="popup-title">我的道具卡</text>
|
||||||
<text class="close-btn" @tap="closeItemCardsPopup">×</text>
|
<text class="close-btn" @tap="closeItemCardsPopup">×</text>
|
||||||
</view>
|
</view>
|
||||||
<scroll-view scroll-y class="points-list">
|
|
||||||
|
<view class="popup-tabs">
|
||||||
|
<view class="popup-tab" :class="{ active: itemCardsTab === 0 }" @tap="switchItemCardsTab(0)">未使用</view>
|
||||||
|
<view class="popup-tab" :class="{ active: itemCardsTab === 1 }" @tap="switchItemCardsTab(1)">已使用</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<scroll-view scroll-y class="item-cards-scroll">
|
||||||
<view v-if="itemCardsLoading && itemCardsList.length === 0" class="status-text">加载中...</view>
|
<view v-if="itemCardsLoading && itemCardsList.length === 0" class="status-text">加载中...</view>
|
||||||
<view v-else-if="!itemCardsList || itemCardsList.length === 0" class="status-text">暂无道具卡</view>
|
<view v-else-if="!itemCardsList || itemCardsList.length === 0" class="empty-state">
|
||||||
<view v-for="(item, index) in itemCardsList" :key="index" class="coupon-item">
|
<text class="empty-icon">🃏</text>
|
||||||
<view class="coupon-left">
|
<text class="empty-text">{{ itemCardsTab === 0 ? '暂无可用道具卡' : '暂无使用记录' }}</text>
|
||||||
<text class="coupon-name">{{ item.name || item.title || '道具卡' }}</text>
|
</view>
|
||||||
<text class="coupon-desc">{{ item.description || item.rules || '' }}</text>
|
|
||||||
<text class="coupon-time" v-if="item.valid_end || item.end_time">有效期至：{{ formatDate(item.valid_end || item.end_time) }}</text>
|
<view class="item-cards-grid">
|
||||||
</view>
|
<view v-for="(item, index) in itemCardsList" :key="index" class="item-card" :class="{ 'used': itemCardsTab === 1 }">
|
||||||
<view class="coupon-right">
|
<view class="card-icon-wrap">
|
||||||
<text class="coupon-status">数量：{{ item.remaining ?? item.count ?? 1 }}</text>
|
<text class="card-icon">{{ getCardIcon(item.type || item.name) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="card-info">
|
||||||
|
<text class="card-name">{{ item.name || item.title || '道具卡' }}</text>
|
||||||
|
<text class="card-desc">{{ item.description || item.rules || '可在抽奖时使用' }}</text>
|
||||||
|
<text class="card-use-time" v-if="itemCardsTab === 1 && item.used_at">使用时间：{{ formatDate(item.used_at) }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="card-count-badge" v-if="itemCardsTab === 0">
|
||||||
|
<text class="count-num">×{{ item.remaining ?? item.count ?? 1 }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="card-used-badge" v-else>
|
||||||
|
<text class="used-text">已使用</text>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
@ -209,32 +234,76 @@
|
|||||||
|
|
||||||
<!-- 任务中心弹窗 -->
|
<!-- 任务中心弹窗 -->
|
||||||
<view class="popup-mask" v-if="tasksVisible" @tap="closeTasksPopup">
|
<view class="popup-mask" v-if="tasksVisible" @tap="closeTasksPopup">
|
||||||
<view class="popup-content" @tap.stop>
|
<view class="popup-content task-center-popup" @tap.stop>
|
||||||
<view class="popup-header">
|
<view class="popup-header">
|
||||||
<text class="popup-title">任务中心</text>
|
<text class="popup-title">任务中心</text>
|
||||||
<text class="close-btn" @tap="closeTasksPopup">×</text>
|
<text class="close-btn" @tap="closeTasksPopup">×</text>
|
||||||
</view>
|
</view>
|
||||||
<scroll-view scroll-y class="points-list" @scrolltolower="loadMoreTasks">
|
|
||||||
|
<!-- 任务统计头部 -->
|
||||||
|
<view class="task-stats-bar">
|
||||||
|
<view class="stats-item">
|
||||||
|
<text class="stats-num">{{ tasksList.filter(t => t.status === 2).length }}</text>
|
||||||
|
<text class="stats-label">已完成</text>
|
||||||
|
</view>
|
||||||
|
<view class="stats-divider"></view>
|
||||||
|
<view class="stats-item">
|
||||||
|
<text class="stats-num">{{ tasksList.filter(t => t.status === 1).length }}</text>
|
||||||
|
<text class="stats-label">进行中</text>
|
||||||
|
</view>
|
||||||
|
<view class="stats-divider"></view>
|
||||||
|
<view class="stats-item">
|
||||||
|
<text class="stats-num">{{ tasksList.length }}</text>
|
||||||
|
<text class="stats-label">全部任务</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<scroll-view scroll-y class="task-scroll" @scrolltolower="loadMoreTasks">
|
||||||
<view v-if="tasksLoading && tasksList.length === 0" class="status-text">加载中...</view>
|
<view v-if="tasksLoading && tasksList.length === 0" class="status-text">加载中...</view>
|
||||||
<view v-else-if="!tasksList || tasksList.length === 0" class="status-text">暂无任务</view>
|
<view v-else-if="!tasksList || tasksList.length === 0" class="empty-state">
|
||||||
<view v-for="(task, idx) in tasksList" :key="task.id || idx" class="task-item">
|
<text class="empty-icon">📋</text>
|
||||||
<view class="task-left">
|
<text class="empty-text">暂无任务</text>
|
||||||
<text class="task-name">{{ task.name || '任务' }}</text>
|
</view>
|
||||||
<text class="task-desc">{{ task.description || '' }}</text>
|
|
||||||
<view class="reward-list" v-if="Array.isArray(task.rewards) && task.rewards.length">
|
<view v-for="(task, idx) in tasksList" :key="task.id || idx" class="task-card" :class="{ 'completed': task.status === 2 }">
|
||||||
<text class="reward-label">奖励</text>
|
<view class="task-icon-wrap">
|
||||||
<view class="reward-tags">
|
<text class="task-icon">{{ getTaskIcon(task.type || task.name) }}</text>
|
||||||
<view class="reward-item" v-for="(rw, ri) in task.rewards" :key="ri">
|
</view>
|
||||||
<text class="reward-type">{{ rw.reward_type || '未知' }}</text>
|
<view class="task-main">
|
||||||
<text class="reward-qty">×{{ rw.quantity || 0 }}</text>
|
<view class="task-header">
|
||||||
</view>
|
<text class="task-name">{{ task.name || '任务' }}</text>
|
||||||
|
<view class="task-status-tag" :class="getTaskStatusClass(task.status)">
|
||||||
|
{{ formatStatus(task.status) }}
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<text class="task-desc">{{ task.description || '完成任务获取奖励' }}</text>
|
||||||
|
|
||||||
|
<!-- 任务进度条 -->
|
||||||
|
<view class="task-progress" v-if="task.progress !== undefined || task.current !== undefined">
|
||||||
|
<view class="progress-bar">
|
||||||
|
<view class="progress-fill" :style="{ width: getTaskProgress(task) + '%' }"></view>
|
||||||
|
</view>
|
||||||
|
<text class="progress-text">{{ task.current || 0 }}/{{ task.target || 1 }}</text>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<!-- 奖励区域 -->
|
||||||
|
<view class="task-rewards" v-if="Array.isArray(task.rewards) && task.rewards.length">
|
||||||
|
<view class="reward-badge" v-for="(rw, ri) in task.rewards" :key="ri">
|
||||||
|
<text class="reward-icon">{{ getRewardIcon(rw.reward_type) }}</text>
|
||||||
|
<text class="reward-value">+{{ rw.quantity || 0 }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="task-right">
|
|
||||||
<text class="task-status">{{ formatStatus(task.status) }}</text>
|
<view class="task-action">
|
||||||
|
<text class="action-btn" v-if="task.status === 1" @tap="goToTask(task)">去完成</text>
|
||||||
|
<text class="action-btn done" v-else-if="task.status === 2">已完成</text>
|
||||||
|
<text class="action-btn waiting" v-else>未开始</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<view v-if="tasksLoading && tasksList.length > 0" class="loading-more">加载更多...</view>
|
||||||
|
<view v-if="!tasksHasMore && tasksList.length > 0" class="no-more">没有更多了</view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@ -278,6 +347,7 @@ const redeemCode = ref('')
|
|||||||
const itemCardsVisible = ref(false)
|
const itemCardsVisible = ref(false)
|
||||||
const itemCardsList = ref([])
|
const itemCardsList = ref([])
|
||||||
const itemCardsLoading = ref(false)
|
const itemCardsLoading = ref(false)
|
||||||
|
const itemCardsTab = ref(0) // 0: 未使用, 1: 已使用
|
||||||
|
|
||||||
const tasksVisible = ref(false)
|
const tasksVisible = ref(false)
|
||||||
const tasksList = ref([])
|
const tasksList = ref([])
|
||||||
@ -337,6 +407,20 @@ function toHelp() {
|
|||||||
uni.navigateTo({ url: '/pages/help/index' })
|
uni.navigateTo({ url: '/pages/help/index' })
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function handleInvite() {
|
||||||
|
// Trigger WeChat share menu for inviting friends
|
||||||
|
// #ifdef MP-WEIXIN
|
||||||
|
wx.showShareMenu({
|
||||||
|
withShareTicket: true,
|
||||||
|
menus: ['shareAppMessage', 'shareTimeline']
|
||||||
|
})
|
||||||
|
uni.showToast({ title: '点击右上角分享给好友', icon: 'none', duration: 2000 })
|
||||||
|
// #endif
|
||||||
|
// #ifndef MP-WEIXIN
|
||||||
|
uni.showToast({ title: '请点击右上角分享', icon: 'none' })
|
||||||
|
// #endif
|
||||||
|
}
|
||||||
|
|
||||||
// 积分弹窗逻辑
|
// 积分弹窗逻辑
|
||||||
function showPointsPopup() {
|
function showPointsPopup() {
|
||||||
pointsVisible.value = true
|
pointsVisible.value = true
|
||||||
@ -438,15 +522,24 @@ async function handleRedeem() {
|
|||||||
// 道具卡弹窗逻辑
|
// 道具卡弹窗逻辑
|
||||||
function showItemCardsPopup() {
|
function showItemCardsPopup() {
|
||||||
itemCardsVisible.value = true
|
itemCardsVisible.value = true
|
||||||
|
itemCardsTab.value = 0
|
||||||
|
itemCardsList.value = []
|
||||||
loadItemCards()
|
loadItemCards()
|
||||||
}
|
}
|
||||||
function closeItemCardsPopup() { itemCardsVisible.value = false }
|
function closeItemCardsPopup() { itemCardsVisible.value = false }
|
||||||
|
function switchItemCardsTab(index) {
|
||||||
|
if (itemCardsTab.value === index) return
|
||||||
|
itemCardsTab.value = index
|
||||||
|
itemCardsList.value = []
|
||||||
|
loadItemCards()
|
||||||
|
}
|
||||||
async function loadItemCards() {
|
async function loadItemCards() {
|
||||||
if (itemCardsLoading.value) return
|
if (itemCardsLoading.value) return
|
||||||
itemCardsLoading.value = true
|
itemCardsLoading.value = true
|
||||||
const user_id = uni.getStorageSync('user_id')
|
const user_id = uni.getStorageSync('user_id')
|
||||||
try {
|
try {
|
||||||
const res = await getItemCards(user_id)
|
const status = itemCardsTab.value // 0: 未使用, 1: 已使用
|
||||||
|
const res = await getItemCards(user_id, status)
|
||||||
let list = []
|
let list = []
|
||||||
if (res && Array.isArray(res.list)) list = res.list
|
if (res && Array.isArray(res.list)) list = res.list
|
||||||
else if (res && Array.isArray(res.data)) list = res.data
|
else if (res && Array.isArray(res.data)) list = res.data
|
||||||
@ -490,6 +583,73 @@ async function loadTasks() {
|
|||||||
}
|
}
|
||||||
function loadMoreTasks() { if (tasksHasMore.value && !tasksLoading.value) loadTasks() }
|
function loadMoreTasks() { if (tasksHasMore.value && !tasksLoading.value) loadTasks() }
|
||||||
|
|
||||||
|
// 辅助函数
|
||||||
|
function formatCouponValue(value) {
|
||||||
|
const num = Number(value || 0)
|
||||||
|
return (num / 100).toFixed(0)
|
||||||
|
}
|
||||||
|
|
||||||
|
function getCardIcon(typeOrName) {
|
||||||
|
const name = String(typeOrName || '').toLowerCase()
|
||||||
|
if (name.includes('双倍') || name.includes('double')) return '✨'
|
||||||
|
if (name.includes('保底') || name.includes('guarantee')) return '🛡️'
|
||||||
|
if (name.includes('折扣') || name.includes('discount')) return '💰'
|
||||||
|
if (name.includes('免费') || name.includes('free')) return '🎁'
|
||||||
|
if (name.includes('加成') || name.includes('boost')) return '🚀'
|
||||||
|
return '🃏'
|
||||||
|
}
|
||||||
|
|
||||||
|
// 任务中心辅助函数
|
||||||
|
function getTaskIcon(typeOrName) {
|
||||||
|
const name = String(typeOrName || '').toLowerCase()
|
||||||
|
if (name.includes('签到') || name.includes('checkin')) return '📅'
|
||||||
|
if (name.includes('邀请') || name.includes('invite')) return '👥'
|
||||||
|
if (name.includes('分享') || name.includes('share')) return '📤'
|
||||||
|
if (name.includes('抽奖') || name.includes('lottery') || name.includes('draw')) return '🎲'
|
||||||
|
if (name.includes('充值') || name.includes('recharge')) return '💳'
|
||||||
|
if (name.includes('购买') || name.includes('buy')) return '🛒'
|
||||||
|
if (name.includes('完善') || name.includes('profile')) return '📝'
|
||||||
|
if (name.includes('新人') || name.includes('新手')) return '🌟'
|
||||||
|
return '📋'
|
||||||
|
}
|
||||||
|
|
||||||
|
function getTaskStatusClass(status) {
|
||||||
|
const n = Number(status)
|
||||||
|
if (n === 1) return 'status-ongoing'
|
||||||
|
if (n === 2) return 'status-done'
|
||||||
|
return 'status-waiting'
|
||||||
|
}
|
||||||
|
|
||||||
|
function getTaskProgress(task) {
|
||||||
|
if (task.progress !== undefined) return Math.min(100, Math.max(0, task.progress))
|
||||||
|
if (task.current !== undefined && task.target) {
|
||||||
|
return Math.min(100, Math.max(0, (task.current / task.target) * 100))
|
||||||
|
}
|
||||||
|
return 0
|
||||||
|
}
|
||||||
|
|
||||||
|
function getRewardIcon(rewardType) {
|
||||||
|
const type = String(rewardType || '').toLowerCase()
|
||||||
|
if (type.includes('积分') || type.includes('point')) return '💰'
|
||||||
|
if (type.includes('优惠券') || type.includes('coupon')) return '🎟️'
|
||||||
|
if (type.includes('道具') || type.includes('card') || type.includes('prop')) return '🃏'
|
||||||
|
if (type.includes('现金') || type.includes('cash')) return '💵'
|
||||||
|
return '🎁'
|
||||||
|
}
|
||||||
|
|
||||||
|
function goToTask(task) {
|
||||||
|
closeTasksPopup()
|
||||||
|
// 根据任务类型跳转到对应页面
|
||||||
|
const name = String(task.name || '').toLowerCase()
|
||||||
|
if (name.includes('邀请')) {
|
||||||
|
handleInvite()
|
||||||
|
} else if (name.includes('签到')) {
|
||||||
|
uni.showToast({ title: '签到功能开发中', icon: 'none' })
|
||||||
|
} else {
|
||||||
|
uni.switchTab({ url: '/pages/index/index' })
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function formatDate(dateStr) {
|
function formatDate(dateStr) {
|
||||||
if (!dateStr) return ''
|
if (!dateStr) return ''
|
||||||
const date = new Date(dateStr)
|
const date = new Date(dateStr)
|
||||||
@ -742,4 +902,493 @@ onShareAppMessage(() => {
|
|||||||
.reward-label { font-size: 20rpx; color: #ff6b00; margin-right: 8rpx; background: #FFF0E5; padding: 2rpx 8rpx; border-radius: 6rpx; }
|
.reward-label { font-size: 20rpx; color: #ff6b00; margin-right: 8rpx; background: #FFF0E5; padding: 2rpx 8rpx; border-radius: 6rpx; }
|
||||||
.reward-tags { display: flex; flex-wrap: wrap; gap: 8rpx; }
|
.reward-tags { display: flex; flex-wrap: wrap; gap: 8rpx; }
|
||||||
.reward-item { font-size: 20rpx; color: #666; background: #f0f0f0; padding: 2rpx 8rpx; border-radius: 6rpx; }
|
.reward-item { font-size: 20rpx; color: #666; background: #f0f0f0; padding: 2rpx 8rpx; border-radius: 6rpx; }
|
||||||
|
|
||||||
|
/* ============================================
|
||||||
|
优惠券弹窗样式
|
||||||
|
============================================ */
|
||||||
|
.coupon-popup { width: 680rpx; }
|
||||||
|
.coupon-scroll { flex: 1; min-height: 400rpx; max-height: 60vh; }
|
||||||
|
|
||||||
|
/* 空状态 */
|
||||||
|
.empty-state {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 80rpx 0;
|
||||||
|
}
|
||||||
|
.empty-icon { font-size: 80rpx; margin-bottom: 24rpx; }
|
||||||
|
.empty-text { font-size: 28rpx; color: #999; }
|
||||||
|
|
||||||
|
/* 兑换区域 */
|
||||||
|
.redeem-section {
|
||||||
|
padding: 24rpx 0;
|
||||||
|
}
|
||||||
|
.redeem-input-wrap {
|
||||||
|
background: #F5F5F5;
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 4rpx;
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
}
|
||||||
|
.redeem-section .redeem-input {
|
||||||
|
width: 100%;
|
||||||
|
height: 88rpx;
|
||||||
|
background: transparent;
|
||||||
|
padding: 0 24rpx;
|
||||||
|
font-size: 30rpx;
|
||||||
|
}
|
||||||
|
.redeem-section .redeem-btn {
|
||||||
|
width: 100%;
|
||||||
|
height: 88rpx;
|
||||||
|
line-height: 88rpx;
|
||||||
|
background: linear-gradient(135deg, #FF9F43, #FF6B35);
|
||||||
|
color: #fff;
|
||||||
|
font-size: 32rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
border-radius: 44rpx;
|
||||||
|
text-align: center;
|
||||||
|
border: none;
|
||||||
|
box-shadow: 0 8rpx 24rpx rgba(255, 107, 53, 0.3);
|
||||||
|
}
|
||||||
|
.redeem-tips {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 32rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
background: #FFF8F3;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
}
|
||||||
|
.tip-icon { font-size: 32rpx; margin-right: 12rpx; }
|
||||||
|
.tip-text { font-size: 24rpx; color: #FF6B35; }
|
||||||
|
|
||||||
|
/* 优惠券票券样式 */
|
||||||
|
.coupon-ticket {
|
||||||
|
display: flex;
|
||||||
|
background: linear-gradient(135deg, #FFF8F3, #FFFFFF);
|
||||||
|
border-radius: 16rpx;
|
||||||
|
margin-bottom: 20rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.coupon-ticket.used {
|
||||||
|
background: #F5F5F5;
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
.coupon-ticket.used .coupon-left-section {
|
||||||
|
background: #E0E0E0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coupon-left-section {
|
||||||
|
width: 180rpx;
|
||||||
|
background: linear-gradient(135deg, #FF9F43, #FF6B35);
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 24rpx 16rpx;
|
||||||
|
}
|
||||||
|
.coupon-value {
|
||||||
|
display: flex;
|
||||||
|
align-items: baseline;
|
||||||
|
}
|
||||||
|
.coupon-symbol {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.coupon-amount {
|
||||||
|
font-size: 56rpx;
|
||||||
|
font-weight: 800;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.coupon-condition {
|
||||||
|
font-size: 20rpx;
|
||||||
|
color: rgba(255,255,255,0.85);
|
||||||
|
margin-top: 8rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coupon-divider {
|
||||||
|
width: 24rpx;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.divider-circle {
|
||||||
|
width: 24rpx;
|
||||||
|
height: 12rpx;
|
||||||
|
background: #F8F5F2;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.divider-circle.top { top: -1rpx; border-radius: 0 0 12rpx 12rpx; }
|
||||||
|
.divider-circle.bottom { bottom: -1rpx; border-radius: 12rpx 12rpx 0 0; }
|
||||||
|
.divider-line {
|
||||||
|
width: 2rpx;
|
||||||
|
flex: 1;
|
||||||
|
background: repeating-linear-gradient(to bottom, #E5E5E5 0, #E5E5E5 8rpx, transparent 8rpx, transparent 16rpx);
|
||||||
|
margin: 16rpx 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.coupon-right-section {
|
||||||
|
flex: 1;
|
||||||
|
padding: 20rpx 24rpx;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.coupon-right-section .coupon-name {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1F2937;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
.coupon-right-section .coupon-desc {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #6B7280;
|
||||||
|
margin-bottom: 6rpx;
|
||||||
|
}
|
||||||
|
.coupon-expire {
|
||||||
|
font-size: 20rpx;
|
||||||
|
color: #9CA3AF;
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
}
|
||||||
|
.coupon-action {
|
||||||
|
align-self: flex-end;
|
||||||
|
}
|
||||||
|
.use-btn {
|
||||||
|
display: inline-block;
|
||||||
|
background: linear-gradient(135deg, #FFD166, #FF9F43);
|
||||||
|
color: #1F2937;
|
||||||
|
font-size: 22rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
padding: 10rpx 24rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(255, 159, 67, 0.3);
|
||||||
|
}
|
||||||
|
.coupon-status-badge {
|
||||||
|
align-self: flex-end;
|
||||||
|
background: #E5E5E5;
|
||||||
|
color: #999;
|
||||||
|
font-size: 20rpx;
|
||||||
|
padding: 6rpx 16rpx;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================
|
||||||
|
道具卡弹窗样式
|
||||||
|
============================================ */
|
||||||
|
.item-cards-popup { width: 680rpx; }
|
||||||
|
.item-cards-scroll { flex: 1; min-height: 400rpx; max-height: 60vh; }
|
||||||
|
|
||||||
|
.item-cards-grid {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 16rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-card {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background: linear-gradient(135deg, #FFFFFF, #FAFAFA);
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 24rpx;
|
||||||
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.item-card::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 6rpx;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(180deg, #FF9F43, #FF6B35);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-icon-wrap {
|
||||||
|
width: 80rpx;
|
||||||
|
height: 80rpx;
|
||||||
|
background: linear-gradient(135deg, #FFF4E6, #FFEDD5);
|
||||||
|
border-radius: 20rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.card-icon {
|
||||||
|
font-size: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-info {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.card-name {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1F2937;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
.card-desc {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #6B7280;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-count-badge {
|
||||||
|
background: linear-gradient(135deg, #FF9F43, #FF6B35);
|
||||||
|
padding: 8rpx 20rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.3);
|
||||||
|
}
|
||||||
|
.count-num {
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 已使用道具卡样式 */
|
||||||
|
.item-card.used {
|
||||||
|
opacity: 0.7;
|
||||||
|
background: linear-gradient(135deg, #F3F4F6, #E5E7EB);
|
||||||
|
}
|
||||||
|
.item-card.used::before {
|
||||||
|
background: linear-gradient(180deg, #9CA3AF, #6B7280);
|
||||||
|
}
|
||||||
|
.item-card.used .card-icon-wrap {
|
||||||
|
background: linear-gradient(135deg, #E5E7EB, #D1D5DB);
|
||||||
|
}
|
||||||
|
.card-use-time {
|
||||||
|
font-size: 20rpx;
|
||||||
|
color: #9CA3AF;
|
||||||
|
margin-top: 6rpx;
|
||||||
|
}
|
||||||
|
.card-used-badge {
|
||||||
|
background: #E5E7EB;
|
||||||
|
padding: 8rpx 20rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
}
|
||||||
|
.used-text {
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #6B7280;
|
||||||
|
}
|
||||||
|
|
||||||
|
.loading-more, .no-more {
|
||||||
|
text-align: center;
|
||||||
|
color: #9CA3AF;
|
||||||
|
padding: 24rpx 0;
|
||||||
|
font-size: 24rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ============================================
|
||||||
|
任务中心弹窗样式
|
||||||
|
============================================ */
|
||||||
|
.task-center-popup { width: 700rpx; }
|
||||||
|
.task-scroll { flex: 1; min-height: 400rpx; max-height: 55vh; }
|
||||||
|
|
||||||
|
/* 任务统计栏 */
|
||||||
|
.task-stats-bar {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
align-items: center;
|
||||||
|
background: linear-gradient(135deg, #FFF8F3, #FFEDD5);
|
||||||
|
border-radius: 16rpx;
|
||||||
|
padding: 24rpx;
|
||||||
|
margin-bottom: 24rpx;
|
||||||
|
}
|
||||||
|
.stats-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.stats-num {
|
||||||
|
font-size: 40rpx;
|
||||||
|
font-weight: 800;
|
||||||
|
color: #FF6B35;
|
||||||
|
}
|
||||||
|
.stats-label {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #6B7280;
|
||||||
|
margin-top: 4rpx;
|
||||||
|
}
|
||||||
|
.stats-divider {
|
||||||
|
width: 2rpx;
|
||||||
|
height: 48rpx;
|
||||||
|
background: #E5E5E5;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 任务卡片 */
|
||||||
|
.task-card {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
background: #FFFFFF;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
padding: 24rpx;
|
||||||
|
margin-bottom: 16rpx;
|
||||||
|
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.task-card.completed {
|
||||||
|
opacity: 0.7;
|
||||||
|
background: #FAFAFA;
|
||||||
|
}
|
||||||
|
.task-card::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 6rpx;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(180deg, #FF9F43, #FF6B35);
|
||||||
|
}
|
||||||
|
.task-card.completed::before {
|
||||||
|
background: #D1D5DB;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-icon-wrap {
|
||||||
|
width: 72rpx;
|
||||||
|
height: 72rpx;
|
||||||
|
background: linear-gradient(135deg, #FFF4E6, #FFEDD5);
|
||||||
|
border-radius: 18rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
.task-icon {
|
||||||
|
font-size: 36rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.task-main {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
.task-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 8rpx;
|
||||||
|
}
|
||||||
|
.task-card .task-name {
|
||||||
|
font-size: 28rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #1F2937;
|
||||||
|
flex: 1;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.task-card .task-desc {
|
||||||
|
font-size: 22rpx;
|
||||||
|
color: #6B7280;
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 任务状态标签 */
|
||||||
|
.task-status-tag {
|
||||||
|
font-size: 20rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
padding: 4rpx 12rpx;
|
||||||
|
border-radius: 8rpx;
|
||||||
|
flex-shrink: 0;
|
||||||
|
margin-left: 12rpx;
|
||||||
|
}
|
||||||
|
.status-ongoing {
|
||||||
|
background: #DBEAFE;
|
||||||
|
color: #2563EB;
|
||||||
|
}
|
||||||
|
.status-done {
|
||||||
|
background: #D1FAE5;
|
||||||
|
color: #059669;
|
||||||
|
}
|
||||||
|
.status-waiting {
|
||||||
|
background: #F3F4F6;
|
||||||
|
color: #6B7280;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 任务进度条 */
|
||||||
|
.task-progress {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 12rpx;
|
||||||
|
}
|
||||||
|
.task-progress .progress-bar {
|
||||||
|
flex: 1;
|
||||||
|
height: 12rpx;
|
||||||
|
background: #F3F4F6;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-right: 12rpx;
|
||||||
|
}
|
||||||
|
.task-progress .progress-fill {
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(90deg, #FF9F43, #FF6B35);
|
||||||
|
border-radius: 6rpx;
|
||||||
|
transition: width 0.3s ease;
|
||||||
|
}
|
||||||
|
.task-progress .progress-text {
|
||||||
|
font-size: 20rpx;
|
||||||
|
color: #9CA3AF;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 任务奖励 */
|
||||||
|
.task-rewards {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 8rpx;
|
||||||
|
}
|
||||||
|
.reward-badge {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background: linear-gradient(135deg, #FFF4E6, #FFEDD5);
|
||||||
|
padding: 6rpx 12rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
}
|
||||||
|
.reward-badge .reward-icon {
|
||||||
|
font-size: 22rpx;
|
||||||
|
margin-right: 4rpx;
|
||||||
|
}
|
||||||
|
.reward-badge .reward-value {
|
||||||
|
font-size: 22rpx;
|
||||||
|
font-weight: 600;
|
||||||
|
color: #FF6B35;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 任务操作按钮 */
|
||||||
|
.task-action {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-left: 16rpx;
|
||||||
|
}
|
||||||
|
.task-action .action-btn {
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 700;
|
||||||
|
padding: 12rpx 24rpx;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
background: linear-gradient(135deg, #FF9F43, #FF6B35);
|
||||||
|
color: #fff;
|
||||||
|
box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.3);
|
||||||
|
}
|
||||||
|
.task-action .action-btn.done {
|
||||||
|
background: #D1FAE5;
|
||||||
|
color: #059669;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
.task-action .action-btn.waiting {
|
||||||
|
background: #F3F4F6;
|
||||||
|
color: #9CA3AF;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user