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.
301 lines
8.7 KiB
Vue
301 lines
8.7 KiB
Vue
<template>
|
|
<view class="content">
|
|
<kevyloading v-if="loading" type="bsm-loader" color="#618af8" transparent></kevyloading>
|
|
<!-- <view class="w-full">
|
|
<wd-navbar fixed safeAreaInsetTop :leftText="coupon_info?.info?.name || '商城首页'">
|
|
<template #right>
|
|
<wd-icon @click="utils.toUrl('/store/setup/index')" name="setting" size="22px"></wd-icon>
|
|
</template>
|
|
</wd-navbar>
|
|
</view> -->
|
|
|
|
<view class=" bg-white sticky top-0 z-50 flex items-center">
|
|
<view class="flex-1">
|
|
<wd-search @search="search({ value: params.keywords })" @clear="search({ value: params.keywords = '' })"
|
|
v-model="params.keywords" hide-cancel>
|
|
<template #prefix>
|
|
<wd-popover v-model="popover" mode="menu" :content="menu" @menuclick="changeSearchType">
|
|
<view class="search-type">
|
|
<text>{{ searchType }}</text>
|
|
<wd-icon custom-class="icon-arrow" name="fill-arrow-down"></wd-icon>
|
|
</view>
|
|
</wd-popover>
|
|
</template>
|
|
</wd-search>
|
|
</view>
|
|
|
|
<view class="mr-2">
|
|
<wd-button @click="utils.toUrl('/store/coupon/edit')" size="small">新增券</wd-button>
|
|
</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" :apiObj="coupon.List" :params="{ ...params }">
|
|
<template #default="{ list: couponList }">
|
|
<view class="flex flex-col">
|
|
<view v-for="coupon of couponList" class="overflow-hidden relative">
|
|
|
|
|
|
<wd-swipe-action class="rounded-xl overflow-hidden mb-3 ">
|
|
|
|
<view class="couponCart relative " style="background-color: #fff;
|
|
background-image: linear-gradient(135deg,#ff552d 10%,#0000 0,#0000 50%,#fe4b26 0,#ff702c 60%,#0000 0,#0000);
|
|
background-size: 9.09px 9.09px;">
|
|
|
|
<view class="w-[76%] bg-red-600 absolute top-0 bottom-0 left-0" style="z-index: 0;"></view>
|
|
|
|
<view class="relative px-4 py-4" style="z-index: 1;">
|
|
<view
|
|
class="rounded-r-xl font-bold absolute top-0 left-0 px-2 pr-4 py-1 text-[12px] bg-neutral-900 text-orange-500 z-30">
|
|
ID: {{ coupon.id }}
|
|
</view>
|
|
|
|
<view
|
|
class="rounded-xl font-bold absolute top-0 left-8 px-2 pr-4 py-1 pl-8 text-[12px] bg-neutral-800 text-orange-500 z-20">
|
|
{{ ["优惠券", "商品可用", "分类可用", "当面付"][coupon.coupon_type] }}
|
|
</view>
|
|
|
|
<view v-if="coupon.stock > 0"
|
|
class="rounded-xl font-bold absolute top-0 left-24 px-2 py-1 pl-8 text-[12px] bg-neutral-700 text-orange-400 z-10">
|
|
剩余 {{ coupon.stock }}
|
|
</view>
|
|
|
|
|
|
<view v-else
|
|
class="rounded-xl font-bold absolute top-0 left-24 px-2 py-1 pl-8 text-[12px] bg-neutral-700 text-white z-10">
|
|
已领完
|
|
</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 text-[12px] text-orange-300">
|
|
{{ coupon.name }}
|
|
</view>
|
|
|
|
<view class="price text-white text-[12px]">
|
|
|
|
<div class="day" v-if="coupon.send_type == 1">
|
|
有效时间： {{ formatOfTime(coupon.start_time) }} - {{ formatOfTime(coupon.end_time) }}
|
|
</div>
|
|
<div v-else>有效时间：--</div>
|
|
|
|
</view>
|
|
|
|
<view class="price text-white text-[12px]">
|
|
过期时间：{{ coupon.day }} 天
|
|
</view>
|
|
|
|
<div class="flex flex-col">
|
|
<view class="price text-white text-[12px] mr-4">
|
|
券金额： {{ coupon.price }} 天
|
|
</view>
|
|
|
|
<view class="price text-white text-[12px]">
|
|
满减金额： {{ coupon.full_price }} 天
|
|
</view>
|
|
|
|
</div>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
<view class="mt-4 text-white flex items-center justify-center absolute top-0 right-[24%] ">
|
|
|
|
<view class="bg-red-700 px-4 py-2 font-bold text-[13px] rounded-l-full " :round="false"
|
|
size="small">
|
|
<span v-if="coupon.limit_type == 1">不限</span>
|
|
<span v-if="coupon.limit_type == 2">每天一次</span>
|
|
<span v-if="coupon.limit_type == 3">每人一次</span>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
<template #right>
|
|
<view class="flex h-full ">
|
|
<view
|
|
class="px-4 text-nowrap h-full bg-red-700 text-white text-black flex items-center justify-center">
|
|
<view @click="utils.toUrl('/store/coupon/edit?id=' + coupon.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 coupon from '@/api/store/coupon.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('')
|
|
// getcouponList();
|
|
})
|
|
</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;
|
|
}
|
|
}
|
|
|
|
|
|
.couponBox,
|
|
.title {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
}
|
|
|
|
.couponBox {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.title {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.title-tip {
|
|
color: rgba(0, 0, 0, 0.25);
|
|
font-size: 12px;
|
|
}
|
|
</style>
|