314 lines
6.3 KiB
Vue
314 lines
6.3 KiB
Vue
<template>
|
|
<view class="flex-col justify-start relative page" :style="{ backgroundImage: 'url(' + bkgUrl + ')' }">
|
|
<view class="section" :style="{ backgroundImage: 'url(' + bkgUrl + ')' }"></view>
|
|
|
|
<view class="my-box">
|
|
<view class="flex-col justify-start items-center text-wrapper pos"><text class="font text">积分商城</text></view>
|
|
<view class="flex-row justify-between items-start section_2 pos_2">
|
|
<view class="flex-col items-center">
|
|
<text class="text_2">可用积分</text>
|
|
<text class="mt-20 text_3">{{ points }}</text>
|
|
</view>
|
|
<view class="flex-col items-center group" @click="jumpToTips">
|
|
<image
|
|
class="image"
|
|
:src="couponUrl + '/CouponMall/jf.png'"
|
|
/>
|
|
<text class="text_4 mt-7">规则</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<view class="flex-col pos_3">
|
|
<view class="flex-col mt-18 list-item" v-for="(item, index) in couponList" :key="index">
|
|
<view class="flex-row justify-between items-start self-stretch">
|
|
<view class="flex-col items-start">
|
|
<text class="font_2">{{ item.conditionAmount }}元优惠券</text>
|
|
<text class="font text_5 mt-15">{{ item.name }}</text>
|
|
</view>
|
|
<view class="flex-col justify-start items-center text-wrapper_2" @click="exchangeCoupon(item)">
|
|
<text class="font_3 text_6">兑换</text>
|
|
</view>
|
|
</view>
|
|
<text class="self-start font_4 mt-7">{{ item.requirePoints }} 积分</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<uni-popup ref="exchange" :maskClick="false" :animation="false">
|
|
<view class="exchange-popup">
|
|
<confirmPopupVue></confirmPopupVue>
|
|
</view>
|
|
</uni-popup>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script setup lang="ts">
|
|
import {ref, onMounted, nextTick, onUnmounted} from 'vue'
|
|
import { baseUrl } from '@/api/request';
|
|
import confirmPopupVue from '../component/confirmPopup.vue';
|
|
import popupVue from '../../popup.vue';
|
|
import emitter from '../../../utils/emitter';
|
|
import { couponUrl } from '../../../common/globalImagesUrl';
|
|
import { onLoad } from "@dcloudio/uni-app";
|
|
import { getFonts } from '../../../common/globalFont';
|
|
onLoad(() => {
|
|
getFonts()
|
|
})
|
|
const cookie = wx.getStorageSync("cookie") //请求头
|
|
|
|
const couponList = ref([])
|
|
const points = ref(0)
|
|
const exchange = ref(null)
|
|
|
|
const coupon = ref(0)
|
|
const bkgUrl = ref(couponUrl + '/CouponMall/bkg.png')
|
|
|
|
const closeConfirmPopupHandler = () => {
|
|
nextTick(() => {
|
|
if (exchange.value) {
|
|
exchange.value.close()
|
|
}
|
|
})
|
|
}
|
|
|
|
const confirmExchangeHandler = async () => {
|
|
await pointsExchangeCoupon()
|
|
await getMyUserInfo()
|
|
}
|
|
|
|
onMounted(() => {
|
|
getMyUserInfo()
|
|
getCouponList()
|
|
emitter.on('closeConfirmPopup', closeConfirmPopupHandler)
|
|
|
|
emitter.on('confirmExchange', confirmExchangeHandler)
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
emitter.off('closeConfirmPopup', closeConfirmPopupHandler)
|
|
|
|
emitter.off('confirmExchange', confirmExchangeHandler)
|
|
})
|
|
|
|
const getMyUserInfo = async () => {
|
|
const res = await uni.request({
|
|
url: baseUrl + '/user/get/login',
|
|
method: 'GET',
|
|
header: {
|
|
cookie
|
|
}
|
|
})
|
|
points.value = res.data.data.points
|
|
}
|
|
|
|
const getCouponList = async () => {
|
|
const res = await uni.request({
|
|
url: baseUrl + '/coupon/list/all',
|
|
method: 'GET',
|
|
header: {
|
|
cookie
|
|
}
|
|
})
|
|
couponList.value = res.data.data
|
|
}
|
|
|
|
const jumpToTips = () => {
|
|
uni.navigateTo({
|
|
url: '../CouponTips/CouponTips'
|
|
})
|
|
}
|
|
|
|
const exchangeCoupon = (val:any) => {
|
|
coupon.value = val
|
|
exchange.value.open('center')
|
|
}
|
|
|
|
|
|
const pointsExchangeCoupon = async () => {
|
|
|
|
if (points.value < coupon.value.requirePoints) {
|
|
uni.showToast({
|
|
title: '积分不足',
|
|
icon: 'error'
|
|
})
|
|
return ;
|
|
}
|
|
|
|
const res = await uni.request({
|
|
url: baseUrl + '/coupon/exchange',
|
|
method: 'POST',
|
|
header: {
|
|
cookie
|
|
},
|
|
data: {
|
|
id: coupon.value.id
|
|
}
|
|
})
|
|
if (res.data.data) {
|
|
uni.showToast({
|
|
title: '兑换成功',
|
|
icon: 'success'
|
|
})
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
.exchange-popup {
|
|
justify-content: center;
|
|
background-color: #fff;
|
|
border-radius: 20rpx;
|
|
margin-top: -200rpx;
|
|
}
|
|
|
|
.my-box {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
margin: 0 auto;
|
|
z-index: 99;
|
|
}
|
|
|
|
.mt-15 {
|
|
margin-top: 28.13rpx;
|
|
}
|
|
|
|
::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
.mt-7 {
|
|
margin-top: 13.13rpx;
|
|
}
|
|
.page {
|
|
background-color: #ffffff;
|
|
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: 1386.88rpx;
|
|
}
|
|
.text-wrapper {
|
|
padding: 45rpx 0;
|
|
background-color: #ffffff;
|
|
}
|
|
.pos {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
.font {
|
|
font-size: 30rpx;
|
|
font-family: FZSongKeBenXiuKaiS-R-GB;
|
|
line-height: 28.09rpx;
|
|
color: #818181;
|
|
}
|
|
.text {
|
|
color: #000000;
|
|
line-height: 28.59rpx;
|
|
}
|
|
.section_2 {
|
|
padding: 24.38rpx 52.5rpx 15rpx;
|
|
background-image: linear-gradient(90deg, #ffffff 42.3%, #fbdedf 93.5%);
|
|
}
|
|
.pos_2 {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 114.38rpx;
|
|
}
|
|
.text_2 {
|
|
color: #000000;
|
|
font-size: 30rpx;
|
|
font-family: FZSongKeBenXiuKaiS-R-GB;
|
|
line-height: 25.78rpx;
|
|
}
|
|
.text_3 {
|
|
color: #c35c5d;
|
|
font-size: 60rpx;
|
|
font-family: FZSongKeBenXiuKaiS-R-GB;
|
|
line-height: 40.09rpx;
|
|
}
|
|
.group {
|
|
margin-right: 18.75rpx;
|
|
margin-top: 11.25rpx;
|
|
}
|
|
.image {
|
|
width: 73.13rpx;
|
|
height: 73.13rpx;
|
|
}
|
|
.text_4 {
|
|
color: #000000;
|
|
font-size: 24.38rpx;
|
|
font-family: FZSongKeBenXiuKaiS-R-GB;
|
|
line-height: 21.34rpx;
|
|
}
|
|
.pos_3 {
|
|
position: absolute;
|
|
left: 22.5rpx;
|
|
right: 22.5rpx;
|
|
top: 307.5rpx;
|
|
padding-bottom: 40rpx;
|
|
}
|
|
.list-item {
|
|
padding: 37.5rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 18.75rpx;
|
|
}
|
|
.list-item:first-child {
|
|
margin-top: 0;
|
|
}
|
|
.font_2 {
|
|
font-size: 33.75rpx;
|
|
font-family: FZSongKeBenXiuKaiS-R-GB;
|
|
line-height: 32.83rpx;
|
|
color: #000000;
|
|
}
|
|
.text_5 {
|
|
line-height: 29.42rpx;
|
|
}
|
|
.text-wrapper_2 {
|
|
margin-right: 3.75rpx;
|
|
margin-top: 45rpx;
|
|
padding: 15rpx 0;
|
|
background-color: #e79ea1;
|
|
border-radius: 18.75rpx;
|
|
width: 159.38rpx;
|
|
height: 60rpx;
|
|
}
|
|
.font_3 {
|
|
font-size: 30rpx;
|
|
font-family: FZSongKeBenXiuKaiS-R-GB;
|
|
line-height: 28.09rpx;
|
|
color: #ffffff;
|
|
}
|
|
.text_6 {
|
|
line-height: 27.66rpx;
|
|
}
|
|
.font_4 {
|
|
font-size: 33.75rpx;
|
|
font-family: FZSongKeBenXiuKaiS-R-GB;
|
|
line-height: 28.09rpx;
|
|
color: #c35c5d;
|
|
}
|
|
@import url(../../../common/css/global.css);
|
|
</style>
|