You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
253 lines
7.0 KiB
Vue
253 lines
7.0 KiB
Vue
<template>
|
|
<view class="content">
|
|
<kevyloading v-if="loading" type="bsm-loader" color="#618af8" transparent></kevyloading>
|
|
|
|
<view class="justify-center sticky top-0 z-50 grid items-center py-3 w-full gap-3 grid-cols-3">
|
|
<view @click="utils.toUrl('/store/recharge/edit')"
|
|
class="text-white rounded-r-3xl p-4 px-3 shadow-lg overflow-hidden"
|
|
style="background-image: linear-gradient(to left, #b5b5b5 0%, rgb(110, 114, 125) 100%);">
|
|
<view class="font-bold"> 添加充值方案 </view>
|
|
</view>
|
|
|
|
|
|
<view @click="utils.toUrl('/store/recharge/userRecharge')"
|
|
class="text-white rounded-3xl p-4 shadow-lg overflow-hidden text-center"
|
|
style="background-image: linear-gradient(to top, #b5b5b5 0%, rgb(110, 114, 125) 100%);">
|
|
<view class="font-bold"> 充值记录 </view>
|
|
</view>
|
|
|
|
|
|
<view @click="utils.toUrl('/store/recharge/setUp')"
|
|
class="text-center text-white rounded-l-3xl p-4 shadow-lg overflow-hidden"
|
|
style="background-image: linear-gradient(to top, #b5b5b5 0%, rgb(110, 114, 125) 100%);">
|
|
<view class="font-bold"> 设置 </view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- <view class="flex-1 bg-white pb-2">
|
|
<div class="rounded-md overflow-hidden">
|
|
<wd-tabs @change="search">
|
|
<wd-tab :title="`全部`" :name="null"></wd-tab>
|
|
<wd-tab :title="`领取后过期`" :name="0"></wd-tab>
|
|
<wd-tab :title="`定时过期`" :name="1"></wd-tab>
|
|
</wd-tabs>
|
|
</div>
|
|
</view> -->
|
|
|
|
<view class="grid p-2">
|
|
|
|
<yList height="91vh" ref="yListRef" noPageSize :apiObj="recharge.List" :params="{ ...params }">
|
|
<template #default="{ list: rechargeList }">
|
|
<view class="flex flex-col">
|
|
<view v-for="recharge of rechargeList" class="overflow-hidden relative">
|
|
|
|
|
|
<wd-swipe-action class="rounded-xl overflow-hidden mb-3 ">
|
|
|
|
<view class="rechargeCart relative"
|
|
style="background-image: linear-gradient(to bottom, #b5b5b5 0%, rgb(110, 114, 125) 100%);">
|
|
|
|
|
|
<view class="relative px-4 py-4" style="z-index: 1;">
|
|
<view
|
|
class="rounded-r-xl font-bold absolute top-0 left-0 px-3 py-1 text-[12px] bg-neutral-900 text-orange-500 z-30">
|
|
ID: {{ recharge.id }}
|
|
</view>
|
|
|
|
<view class="flex">
|
|
<view class="mt-4 mr-6">
|
|
<!-- <view class="price text-[16px] text-orange-300">
|
|
|
|
</view> -->
|
|
|
|
<view class="leading-4 mt-1">
|
|
|
|
<view class="price mb-1 text-[14px] text-orange-300">
|
|
{{ recharge.name }}
|
|
</view>
|
|
|
|
<div class="flex flex-col">
|
|
<view class="price text-white text-[12px] mr-4">
|
|
支付金额： {{ recharge.money }} 元
|
|
</view>
|
|
|
|
<view class="price text-white text-[12px]">
|
|
赠送金额： {{ recharge.gift_money }} 元
|
|
</view>
|
|
|
|
</div>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<template #right>
|
|
<view class="flex h-full ">
|
|
<view class="px-4 text-nowrap h-full bg-stone-700 text-white flex items-center justify-center">
|
|
<view @click="utils.toUrl('/store/recharge/edit?edit=' + JSON.stringify(recharge))" style="writing-mode: vertical-rl;
|
|
text-orientation: upright;">
|
|
编辑
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="px-4 text-nowrap h-full bg-stone-800 text-white flex items-center justify-center">
|
|
<view @click="utils.toUrl('/store/recharge/edit?id=' + recharge.id)" style="writing-mode: vertical-rl;
|
|
text-orientation: upright;">
|
|
删除
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
</wd-swipe-action>
|
|
|
|
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</yList>
|
|
|
|
</view>
|
|
|
|
<wd-toast />
|
|
<wd-message-box></wd-message-box>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, nextTick } from 'vue';
|
|
import utils from '@/utils/utils.js';
|
|
import recharge from '@/api/store/recharge.js';
|
|
import kevyloading from "@/components/kevy-loading/kevy-loading";
|
|
import { useMessage } from '@/uni_modules/wot-design-uni';
|
|
import { useToast } from '@/uni_modules/wot-design-uni'
|
|
import yList from "/components/yList/index.vue";
|
|
|
|
import {
|
|
onShow,
|
|
} from "@dcloudio/uni-app";
|
|
|
|
const yListRef = ref(null);
|
|
|
|
const searchType = ref('券名');
|
|
const popover = ref(false);
|
|
|
|
const search = ({ value } = {}) => {
|
|
|
|
if (searchType.value == '券名') {
|
|
yListRef.value.upData({
|
|
name: params.value.keywords,
|
|
});
|
|
} else if (searchType.value == '券金额') {
|
|
yListRef.value.upData({
|
|
price: params.value.keywords
|
|
});
|
|
} else {
|
|
yListRef.value.upData({});
|
|
}
|
|
|
|
};
|
|
|
|
const menu = ref([
|
|
{ content: '券名' },
|
|
{ content: '券金额' },
|
|
]);
|
|
|
|
const params = ref({
|
|
name: null,
|
|
price: null,
|
|
send_type: null
|
|
});
|
|
|
|
/**
|
|
* 切换搜索类型
|
|
* @param {Object} item - 切换的项
|
|
*/
|
|
function changeSearchType({ item, index }) {
|
|
searchType.value = item.content;
|
|
search(params.value.keywords)
|
|
}
|
|
|
|
/**
|
|
* @type {Ref<boolean>}
|
|
* 控制页面加载状态的 Ref
|
|
*/
|
|
const loading = ref(false);
|
|
|
|
const formatOfTime = (theTimeStamp) => {
|
|
const date = new Date(theTimeStamp * 1000); // 将时间戳转换为毫秒
|
|
const year = date.getFullYear();
|
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
|
const day = String(date.getDate()).padStart(2, '0');
|
|
const hours = String(date.getHours()).padStart(2, '0');
|
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
|
|
|
return `${year}-${month}-${day} ${hours}`;
|
|
}
|
|
|
|
// 初始化调用获取一行数据
|
|
onShow(() => {
|
|
|
|
nextTick(() => {
|
|
search({ value: params.value.keywords = '' })
|
|
})
|
|
// search('')
|
|
// getrechargeList();
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.search-type {
|
|
position: relative;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
padding: 0 8px 0 16px;
|
|
font-size: 24rpx;
|
|
color: rgba(0, 0, 0, .45);
|
|
}
|
|
|
|
.search-type::after {
|
|
position: absolute;
|
|
content: '';
|
|
width: 1px;
|
|
right: 0;
|
|
top: 5px;
|
|
bottom: 5px;
|
|
background: rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
.search-type {
|
|
:deep(.icon-arrow) {
|
|
display: inline-block;
|
|
font-size: 20px;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
|
|
.rechargeBox,
|
|
.title {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
}
|
|
|
|
.rechargeBox {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.title {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.title-tip {
|
|
color: rgba(0, 0, 0, 0.25);
|
|
font-size: 12px;
|
|
}
|
|
</style>
|