代码提交
This commit is contained in:
黄少君
136
pages/discountCoupon/components/CouponItem.vue
Normal file
136
pages/discountCoupon/components/CouponItem.vue
Normal file
@ -0,0 +1,136 @@
|
||||
<!--
|
||||
@name: CouponItem
|
||||
@author: kahu4
|
||||
@date: 2023-10-31 11:22
|
||||
@description：CouponItem
|
||||
@update: 2023-10-31 11:22
|
||||
-->
|
||||
<script setup>
|
||||
import { toRefs } from "vue";
|
||||
import { receiveACoupon } from "@/api/coupon";
|
||||
import { useRouter } from "@/hooks/useRouter";
|
||||
|
||||
const {push} = useRouter()
|
||||
const props = defineProps({
|
||||
coupons: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'select'
|
||||
},
|
||||
tabType: {
|
||||
type: Number,
|
||||
default: 0
|
||||
}
|
||||
})
|
||||
|
||||
const {
|
||||
coupons
|
||||
} = toRefs(props)
|
||||
|
||||
const getCoupon = async () => {
|
||||
await receiveACoupon(coupons.value.id)
|
||||
uni.showToast({
|
||||
title: "领取成功",
|
||||
icon: "none",
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
|
||||
const goToProduct = () => {
|
||||
push({
|
||||
url: '/pages/goodsList/goodsList'
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="coupon-item">
|
||||
<!-- 折扣力度 -->
|
||||
<view class="discount">
|
||||
<view class="unit pre-unit" v-if="coupons.couponType === 1">
|
||||
￥
|
||||
</view>
|
||||
{{coupons.couponType == 1 ? coupons.couponValue : coupons.discount}}
|
||||
<view class="unit" v-if="coupons.couponType === 2">
|
||||
折
|
||||
</view>
|
||||
</view>
|
||||
<!-- 优惠券信息 -->
|
||||
<view class="info">
|
||||
<view class="row">
|
||||
{{coupons.couponType == 1 ? '满减券' : '折扣券'}}
|
||||
</view>
|
||||
<view class="row tip">
|
||||
(实付{{coupons.threshold}}元使用)
|
||||
</view>
|
||||
</view>
|
||||
<!-- button -->
|
||||
<view v-if="type === 'select'">
|
||||
<view class="button" v-if="tabType === 0">
|
||||
<span @click="goToProduct">去使用</span>
|
||||
</view>
|
||||
<view class="button disable" v-if="tabType === 1">
|
||||
<span>已使用</span>
|
||||
</view>
|
||||
<view class="button expired" v-if="tabType === 2">
|
||||
<span>已失效</span>
|
||||
</view>
|
||||
</view>
|
||||
<view class="button get-coupon" v-if="type === 'get'" @click="getCoupon">
|
||||
领取
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style
|
||||
scoped
|
||||
lang="scss"
|
||||
>
|
||||
.coupon-item{
|
||||
margin-bottom: 30rpx;
|
||||
width: 100%;
|
||||
aspect-ratio: 682/176;
|
||||
background: url("@/static/background/coupon-bg.png") no-repeat ;
|
||||
background-size: 100%;
|
||||
padding: 25rpx 60rpx;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.discount{
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
font-size: 68rpx;
|
||||
.unit{
|
||||
font-size: 38rpx;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.info{
|
||||
font-size: 38rpx;
|
||||
.tip{
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.button{
|
||||
padding: 14rpx 22rpx;
|
||||
background: #ee6d46;
|
||||
color: #fff;
|
||||
}
|
||||
.get-coupon {
|
||||
|
||||
}
|
||||
.disable{
|
||||
background: #666666;
|
||||
}
|
||||
.expired{
|
||||
background: #999999;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
23
pages/discountCoupon/index.data.js
Normal file
23
pages/discountCoupon/index.data.js
Normal file
@ -0,0 +1,23 @@
|
||||
/**
|
||||
* @name: index.data
|
||||
* @author: kahu4
|
||||
* @date: 2023-10-31 11:06
|
||||
* @description：index.data
|
||||
* @update: 2023-10-31 11:06
|
||||
* */
|
||||
|
||||
// tab数组
|
||||
export const tabList = [
|
||||
{
|
||||
label:'可使用',
|
||||
value:1
|
||||
},
|
||||
{
|
||||
label:'已使用',
|
||||
value:2
|
||||
},
|
||||
{
|
||||
label: '已失效',
|
||||
value:3
|
||||
}
|
||||
]
|
||||
59
pages/discountCoupon/index.utils.js
Normal file
59
pages/discountCoupon/index.utils.js
Normal file
@ -0,0 +1,59 @@
|
||||
/**
|
||||
* @name: index.utli
|
||||
* @author: kahu4
|
||||
* @date: 2023-10-31 11:19
|
||||
* @description：index.utli
|
||||
* @update: 2023-10-31 11:19
|
||||
* */
|
||||
import { ref, computed } from "vue";
|
||||
import { onShow } from '@dcloudio/uni-app'
|
||||
import {getCouponList} from "@/api/coupon";
|
||||
import { tabList } from "@/pages/discountCoupon/index.data";
|
||||
|
||||
export function useDiscountCoupon(){
|
||||
const tabCurrent = ref(0) // tab选中
|
||||
const couponType = ref(1) // 1、可使用，2、已使用，3、已失效
|
||||
const couponListLoading = ref(false)
|
||||
const couponList = ref([])
|
||||
const showEmpty = computed(() => couponList.value.length <= 0)
|
||||
|
||||
/**
|
||||
* tab发生改变
|
||||
* @param e
|
||||
*/
|
||||
async function handleTabsChange(e){
|
||||
console.log(e)
|
||||
couponList.value = []
|
||||
tabCurrent.value = e.index
|
||||
couponType.value = e.value
|
||||
await doGetCouponList()
|
||||
}
|
||||
/**
|
||||
* 获取购物车列表
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
async function doGetCouponList() {
|
||||
try {
|
||||
couponListLoading.value = true
|
||||
const res = await getCouponList(couponType.value)
|
||||
couponList.value = res
|
||||
} finally {
|
||||
couponListLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
onShow(async () => {
|
||||
await doGetCouponList()
|
||||
})
|
||||
|
||||
return {
|
||||
tabList,
|
||||
tabCurrent,
|
||||
handleTabsChange,
|
||||
showEmpty,
|
||||
couponListLoading,
|
||||
couponList,
|
||||
doGetCouponList
|
||||
}
|
||||
}
|
||||
83
pages/discountCoupon/index.vue
Normal file
83
pages/discountCoupon/index.vue
Normal file
@ -0,0 +1,83 @@
|
||||
<!--
|
||||
@name: index
|
||||
@author: kahu4
|
||||
@date: 2023-10-31 11:05
|
||||
@description：index
|
||||
@update: 2023-10-31 11:05
|
||||
-->
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { useRouter } from "@/hooks/useRouter";
|
||||
|
||||
const {goBack} = useRouter();
|
||||
import { useDiscountCoupon } from "@/pages/discountCoupon/index.utils";
|
||||
import CouponItem from "@/pages/discountCoupon/components/CouponItem.vue";
|
||||
import Empty from "@/components/Empty/index.vue"
|
||||
import emptyIcon from '@/static/icon/empty/优惠券.png'
|
||||
|
||||
const {
|
||||
tabList,
|
||||
tabCurrent,
|
||||
handleTabsChange,
|
||||
couponList,
|
||||
showEmpty,
|
||||
} = useDiscountCoupon()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="discount-coupon">
|
||||
<!-- tab -->
|
||||
<view class="tabs-row">
|
||||
<uv-tabs
|
||||
:current="tabCurrent"
|
||||
:list="tabList"
|
||||
lineColor="#ee6d46"
|
||||
:activeStyle="{color:'#ee6d46'}"
|
||||
:itemStyle="{width:`calc( 100% / ${tabList.length} )`,'box-sizing':'border-box','height':'80rpx'}"
|
||||
keyName="label"
|
||||
@change="handleTabsChange"
|
||||
/>
|
||||
</view>
|
||||
<!-- coupon list -->
|
||||
<view class="coupon-box">
|
||||
<template v-if="!showEmpty">
|
||||
<template v-for="item in couponList">
|
||||
<CouponItem
|
||||
:coupons="item"
|
||||
:tabType="tabCurrent"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
<Empty
|
||||
:iconSrc="emptyIcon"
|
||||
v-else
|
||||
>
|
||||
您暂时没有可使用的优惠券~
|
||||
</Empty>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style
|
||||
scoped
|
||||
lang="scss"
|
||||
>
|
||||
.discount-coupon {
|
||||
.tabs-row {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.coupon-box {
|
||||
padding: 35rpx;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user