新增部分优惠券页面
This commit is contained in:
243
pageMarket/exchangeCoupon/index.vue
Normal file
243
pageMarket/exchangeCoupon/index.vue
Normal file
@@ -0,0 +1,243 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="header-wrap">
|
||||
<view class="fixed-header-wrap">
|
||||
<scroll-view scroll-x direction="horizontal" class="tabs-wrap">
|
||||
<view class="item" :class="{ active: couponType == item.value }" v-for="item in emunList.couponTypes" :key="item.value" @click="changeType(item.value)">
|
||||
<div class="item-flex">
|
||||
<text class="t">{{ item.label }}</text>
|
||||
</div>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view class="search-wrap">
|
||||
<view class="ipt">
|
||||
<u-input
|
||||
placeholder="搜索优惠券名称"
|
||||
shape="circle"
|
||||
prefixIcon="search"
|
||||
prefixIconStyle="font-size: 22px;color: #909399"
|
||||
clearable
|
||||
:customStyle="{ border: 'none', background: '#F9F9F9' }"
|
||||
v-model="tableData.query"
|
||||
@confirm="searchHandle"
|
||||
@clear="searchHandle"
|
||||
></u-input>
|
||||
</view>
|
||||
<div class="btn">
|
||||
<u-button shape="circle" type="primary" :customStyle="{ height: '36px' }" @click="searchHandle">搜索</u-button>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="my-coupon-item-list">
|
||||
<view class="my-coupon-item-item" v-for="item in tableData.list" :key="item.id">
|
||||
<my-coupon-item :item="item">
|
||||
<view class="my-coupon-item-row-wrap">
|
||||
<template v-if="couponType == 5">
|
||||
<view class="row">
|
||||
<text class="title">赠券门槛</text>
|
||||
<text class="info">满{{ item.fullAmount }}元赠送</text>
|
||||
</view>
|
||||
<view class="row">
|
||||
<text class="title">每人限量</text>
|
||||
<text class="info">
|
||||
<template v-if="item.useLimit == -10086">无限制</template>
|
||||
<template v-else>{{ item.useLimit }}张</template>
|
||||
</text>
|
||||
</view>
|
||||
<view class="row">
|
||||
<text class="title">每次赠送</text>
|
||||
<text class="info">
|
||||
<template v-if="item.getLimit == -10086">无限制</template>
|
||||
<template v-else>{{ item.getLimit }}张</template>
|
||||
</text>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="row" v-if="couponType == 1">
|
||||
<text class="title">使用门槛</text>
|
||||
<text class="info">满{{ item.fullAmount }}元减{{ item.discountAmount }}元</text>
|
||||
</view>
|
||||
<view class="row" v-if="couponType == 2">
|
||||
<text class="title">使用门槛</text>
|
||||
<text class="info">满{{ item.fullAmount }}元可用</text>
|
||||
</view>
|
||||
<view class="row" v-if="couponType == 3">
|
||||
<text class="title">最大折扣金额</text>
|
||||
<text class="info">满{{ item.discountAmount }}元可用</text>
|
||||
</view>
|
||||
<view class="row">
|
||||
<text class="title">发放方式</text>
|
||||
<text class="info">用户{{ getEmunListLabel('getType', item.getType) }}</text>
|
||||
</view>
|
||||
<view class="row">
|
||||
<text class="title">有效期</text>
|
||||
<text class="info">
|
||||
<template v-if="item.validType == 'fixed'">领券后{{ item.validDays }}天过期</template>
|
||||
<template v-if="item.validType == 'custom'">{{ item.validStartTime }}至{{ item.validEndTime }}</template>
|
||||
</text>
|
||||
</view>
|
||||
</template>
|
||||
<view class="row">
|
||||
<text class="title">创建时间</text>
|
||||
<text class="info">{{ item.createTime }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</my-coupon-item>
|
||||
</view>
|
||||
</view>
|
||||
<u-loadmore :status="tableData.status"></u-loadmore>
|
||||
<my-footer-btn confirmText="+ 添加商品兑换券" @confirm="go.to('PAGES_ADD_COUPON')"></my-footer-btn>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue';
|
||||
import go from '@/commons/utils/go.js';
|
||||
import { couponPage } from '@/http/api/market/index.js';
|
||||
import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app';
|
||||
import { getEmunListLabel, emunList } from '../utils/couponUtils.js';
|
||||
|
||||
// 切换类型
|
||||
function changeType(type) {
|
||||
couponType.value = type;
|
||||
resetGetData();
|
||||
}
|
||||
|
||||
// 搜索
|
||||
function searchHandle() {
|
||||
resetGetData();
|
||||
}
|
||||
|
||||
function resetGetData() {
|
||||
tableData.page = 1;
|
||||
tableData.status = 'loading';
|
||||
tableData.list = [];
|
||||
couponPageAjax();
|
||||
}
|
||||
|
||||
// 获取优惠券
|
||||
const couponType = ref(1);
|
||||
const tableData = reactive({
|
||||
query: '',
|
||||
status: 'loading',
|
||||
page: 1,
|
||||
size: 10,
|
||||
list: []
|
||||
});
|
||||
async function couponPageAjax() {
|
||||
try {
|
||||
tableData.status = 'loading';
|
||||
const res = await couponPage({
|
||||
couponType: couponType.value,
|
||||
title: tableData.query,
|
||||
page: tableData.page,
|
||||
size: tableData.size
|
||||
});
|
||||
|
||||
if (tableData.page == 1) {
|
||||
tableData.list = res.records;
|
||||
} else {
|
||||
tableData.list.push(...res.records);
|
||||
}
|
||||
if (res.pageNumber >= res.totalPage) {
|
||||
tableData.status = 'nomore';
|
||||
}
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
}
|
||||
}
|
||||
|
||||
onReachBottom(() => {
|
||||
if (tableData.status != 'nomore') {
|
||||
tableData.page++;
|
||||
couponPageAjax();
|
||||
}
|
||||
});
|
||||
|
||||
onShow(() => {
|
||||
couponPageAjax();
|
||||
});
|
||||
|
||||
onLoad((options) => {
|
||||
couponType.value = options.coupon_type;
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
page {
|
||||
background-color: #f7f7f7;
|
||||
}
|
||||
</style>
|
||||
<style scoped lang="scss">
|
||||
.container {
|
||||
padding: 28upx;
|
||||
}
|
||||
.header-wrap {
|
||||
$height: 86px;
|
||||
$scrollHeight: 30px;
|
||||
$color: #318afe;
|
||||
width: 100%;
|
||||
height: $height;
|
||||
.fixed-header-wrap {
|
||||
width: 100%;
|
||||
height: $height;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 99;
|
||||
background-color: #fff;
|
||||
.tabs-wrap {
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
height: $scrollHeight;
|
||||
box-sizing: border-box;
|
||||
.item {
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
margin-left: 28upx;
|
||||
&:last-child {
|
||||
margin-right: 28upx;
|
||||
}
|
||||
&.active {
|
||||
.item-flex {
|
||||
background-color: #e6f0ff;
|
||||
.t {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item-flex {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20upx;
|
||||
border-radius: 4upx;
|
||||
background-color: #f7f7fa;
|
||||
.t {
|
||||
color: #666666;
|
||||
font-size: 28upx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.search-wrap {
|
||||
height: $height - $scrollHeight;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 28upx 10px;
|
||||
gap: 28upx;
|
||||
box-sizing: border-box;
|
||||
.ipt {
|
||||
flex: 1;
|
||||
height: 36px;
|
||||
}
|
||||
.btn {
|
||||
width: 160upx;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user