jiangchengfeiyi-xiaochengxu/pages/coupon/MyCoupon/MyCoupon.vue

<template>
	<view class="flex-col justify-start relative page" :style="{ backgroundImage: 'url(' + bkgUrl + ')' }">
	  <view class="shrink-0 section" :style="{ backgroundImage: 'url(' + bkgUrl + ')' }"></view>
	  <view class="flex-col justify-start items-center text-wrapper pos"><text class="font text">我的优惠券</text></view>
	  <text class="font_2 text_2 pos_2">优惠券</text>
	  <view class="flex-col pos_3">
	    <view class="flex-col relative list-item mt-15" v-for="(item, index) in couponList" :key="index">
	      <view class="flex-row justify-between items-center">
	        <view class="flex-row items-center">
	          <view class="group">
	            <text class="font_3">{{ item.couponVO.conditionAmount }}</text>
	            <text class="font_2 text_3">元</text>
	          </view>
	          <text class="ml-54 font">{{ item.couponVO.name }}</text>
	        </view>
	        <text class="font_4 text_4"></text>
	      </view>
	      <view class="mt-14 flex-row">
	        <text class="shrink-0 self-start font_5">满{{ item.couponVO.standardAmount }}元使用</text>
	        <text class="flex-1 font_6 ml-27">{{ item.couponVO.startTime.substr(0, 16) }}至{{ item.couponVO.endTime.substr(0, 16) }}</text>
	      </view>
	    </view>
	  </view>
	  <text class="font_4 text_5 pos_4" @click="jumpToOverDue">查看失效的券码></text>
	  <view @click="jumpToMall" class="flex-col justify-start items-center text-wrapper pos_5"><text class="font text">兑换优惠券</text></view>
	</view>
</template>

<script setup lang="ts">
	import {onMounted, ref} from 'vue'
	import { baseUrl } from '../../../api/request';
	import { onShow, onLoad } from "@dcloudio/uni-app";
	import { getFonts } from '../../../common/globalFont';
	import { couponUrl } from '../../../common/globalImagesUrl';
	const cookie = wx.getStorageSync("cookie")  //请求头
	const bkgUrl = ref(couponUrl + '/MyCoupon/bkg.png')
	onLoad(() => {
		getFonts()
	})
	
	onMounted(() => {
		getCouponList()
	})
	
	onShow(() => {
		getCouponList()
	})
	
	const couponList = ref([])
	
	const getCouponList = async () => {
		const res = await uni.request({
			url: baseUrl + '/coupon/list/my',
			method: 'POST',
			header: {
				cookie
			},
			data: {
				type: '可用'
			}
		})
		couponList.value = res.data.data
		console.log(couponList.value)
	}
	
	const jumpToMall = () => {
		uni.navigateTo({
			url: '../CouponMall/CouponMall'
		})
	}
	
	const jumpToOverDue = () => {
		uni.navigateTo({
			url: '../OverDueCoupon/OverDueCoupon'
		})
	}
	
</script>

<style scoped lang="scss">
.mt-15 {
  margin-top: 28.13rpx;
}
.ml-27 {
  margin-left: 50.63rpx;
}
.page {
  overflow: hidden;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}
.section {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 750rpx;
  height: 1400rpx;
}
.text-wrapper {
  padding: 45rpx 0;
  background-color: #ffffff;
}
.pos {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}
.font_2 {
  font-size: 37.5rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 29.42rpx;
  color: #c35c5c;
}
.text_2 {
  color: #000000;
  line-height: 36.47rpx;
}
.pos_2 {
  position: absolute;
  left: 53.08rpx;
  top: 146.49rpx;
}
.pos_3 {
  position: absolute;
  left: 52.5rpx;
  right: 50.63rpx;
  top: 221.25rpx;
  height: 1000rpx;
  padding-bottom: 40rpx;
  overflow-y: auto;
}

/* 隐藏所有滚动条 */
::-webkit-scrollbar {
  display: none;
}


.list-item {
  padding: 30rpx 22.5rpx 30rpx 48.75rpx;
  background-image: linear-gradient(90deg, #ffffff 28.8%, #faddde 96.8%);
  border-radius: 18.75rpx;
  box-shadow: 0rpx 7.5rpx 7.5rpx #00000040;
}
.list-item:first-child {
  margin-top: 0;
}
.group {
  height: 43.22rpx;
}
.font_3 {
  font-size: 60rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 40.09rpx;
  color: #c35c5c;
}
.text_3 {
  line-height: 29.31rpx;
}
.font {
  font-size: 30rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 29.42rpx;
  color: #000000;
}
.text {
  line-height: 29.18rpx;
}
.font_4 {
  font-size: 26.25rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 24.62rpx;
  color: #000000;
}
.text_4 {
  margin-right: 11.25rpx;
  line-height: 24.3rpx;
}
.font_5 {
  font-size: 26.25rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 24.62rpx;
  color: #818181;
}
.font_6 {
  font-size: 26.25rpx;
  font-family: FZSongKeBenXiuKaiS-R-GB;
  line-height: 31.88rpx;
  color: #818181;
}
.text_5 {
  color: #4c4c4c;
  line-height: 25.22rpx;
}
.pos_4 {
  position: absolute;
  right: 265.91rpx;
  bottom: 100.76rpx;
  line-height: 60rpx;
}
.pos_5 {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}
@import url(../../../common/css/global.css);
</style>