85 lines
2.8 KiB
Vue
85 lines
2.8 KiB
Vue
<template>
|
|
<view class="container">
|
|
<view class="content">
|
|
<view v-for="(item, index) in redPacketList" :key="index">
|
|
<view class="item">
|
|
<view class="item_left">￥{{ item.yuan }}</view>
|
|
<view class="item_center">
|
|
<view class="title">{{ item.name }}</view>
|
|
<view class="time">{{ item.time }}</view>
|
|
<view class="desc">{{ item.shiyong }}</view>
|
|
</view>
|
|
<view class="item_right">
|
|
<view class="status" @click="showPopup(item)">{{ item.status }}</view>
|
|
</view>
|
|
<view class="status2" :data-status="item.status"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="bottom">
|
|
<view @click="goRedPacket()">我的权益</view>
|
|
</view>
|
|
|
|
<!-- 弹窗 -->
|
|
<view v-if="popupVisible" class="popup-overlay" @click="hidePopup">
|
|
<view class="popup-content" @click.stop>
|
|
<view class="popup-icon">
|
|
<view class="checkmark"></view>
|
|
</view>
|
|
<view class="popup-title">领取成功!</view>
|
|
<view class="popup-desc">已存入您的账户</view>
|
|
<button class="popup-btn" @click="hidePopup">确定</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import { menuButtonInfo, NavgateTo, picUrl, request } from '../../../utils/index';
|
|
export default {
|
|
data() {
|
|
return {
|
|
redPacketList: [
|
|
{
|
|
name: '100元红包',
|
|
time: '2023-01-01 10:00:00',
|
|
shiyong: '用于购买商品',
|
|
status: '待领取',
|
|
yuan: 100
|
|
},
|
|
{
|
|
name: '50元红包',
|
|
time: '2023-01-02 12:00:00',
|
|
shiyong: '用于购买商品',
|
|
status: '待领取',
|
|
yuan: 50
|
|
},
|
|
{
|
|
name: '20元红包',
|
|
time: '2023-01-03 14:00:00',
|
|
shiyong: '用于购买商品',
|
|
status: '已使用',
|
|
yuan: 20
|
|
}
|
|
],
|
|
popupVisible: false,
|
|
currentItem: null
|
|
}
|
|
},
|
|
methods: {
|
|
showPopup(item) {
|
|
this.currentItem = item;
|
|
this.popupVisible = true;
|
|
},
|
|
hidePopup() {
|
|
this.popupVisible = false;
|
|
this.currentItem = null;
|
|
},
|
|
goRedPacket() {
|
|
NavgateTo('/packages/user/myRedPacket/index');
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style>
|
|
@import url("./index.css");
|
|
</style> |