409 lines
8.0 KiB
Vue
409 lines
8.0 KiB
Vue
<template>
|
|
<view class="flex-col page">
|
|
<view class="flex-col">
|
|
<view class="flex-col section">
|
|
<view class="flex-row justify-center items-center relative group">
|
|
<text class="text">请选择优惠券</text>
|
|
<image
|
|
class="image pos"
|
|
:src="couponUrl + '/component/cha.png'"
|
|
@click="closeCoupon"
|
|
/>
|
|
</view>
|
|
<view class="flex-col mt-33">
|
|
<view class="flex-row justify-between group_2">
|
|
<text class="font" style="line-height: 70rpx;" @click="changeStateLeft(isShow)">可用</text>
|
|
<text class="font" style="line-height: 70rpx;" @click="changeStateRight(isShow)">不可用</text>
|
|
</view>
|
|
<view class="relative divider">
|
|
<view class="section_2 pos_2" v-show="isShow"></view>
|
|
<view class="section_2 pos_3" v-show="!isShow"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="flex-row justify-between section_3" @click="jumpToMall">
|
|
<text class="font_2 text_2">优惠券商城</text>
|
|
<image
|
|
class="image_2"
|
|
:src="couponUrl + '/component/yjt.png'"
|
|
/>
|
|
</view>
|
|
</view>
|
|
<view class="flex-col list">
|
|
|
|
<radio-group>
|
|
<view class="flex-col list-item mt-17" v-for="(item, index) in myCouponList" :key="index" @click="selectOne(index)">
|
|
<view class="flex-row justify-between self-stretch group_3" :style="borderStyle">
|
|
<view class="flex-row items-baseline self-start group_6">
|
|
<text class="font_3 text_4">{{item.couponVO.standardAmount}}</text>
|
|
<text class="font_4 text_5">￥</text>
|
|
</view>
|
|
<view class="flex-row items-center self-center group_4">
|
|
<view class="flex-col shrink-0 group_5">
|
|
<text class="self-start font text_3">{{item.couponVO.name}}</text>
|
|
<text class="self-stretch font_5 text_6 mt-11">{{item.couponVO.startTime.substr(0, 16)}}至{{item.couponVO.endTime.substr(0, 16)}}</text>
|
|
</view>
|
|
<!-- <view class="ml-22 shrink-0 section_4"></view> -->
|
|
<radio class="ml-22 shrink-0 section_4" :value="index" :checked="checkedArr[index]"
|
|
color="#FFB5B8" v-show="isShow"></radio>
|
|
<view class="ml-22 shrink-0 section_4" v-show="!isShow"></view>
|
|
</view>
|
|
</view>
|
|
<text class="mt-14 self-start font_2 text_7" v-show="!isShow">未满足使用门槛</text>
|
|
</view>
|
|
</radio-group>
|
|
|
|
|
|
</view>
|
|
<view class="flex-row section_5">
|
|
<view class="flex-col justify-start items-center text-wrapper" @click="cancel">
|
|
<text class="font_6 text_8">不使用优惠券</text>
|
|
</view>
|
|
<view class="flex-col justify-start items-center text-wrapper_2" @click="confirm"><text class="font_6 text_9">确定</text></view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {onMounted, ref} from 'vue'
|
|
import emitter from '../../../utils/emitter';
|
|
import { baseUrl } from '../../../api/request';
|
|
import { onShow } from "@dcloudio/uni-app";
|
|
import { couponUrl } from '../../../common/globalImagesUrl';
|
|
const checkedArr = ref([])
|
|
const idx = ref(-1)
|
|
const isShow = ref(true)
|
|
const borderStyle = ref({})
|
|
let totalAmount = 0
|
|
const myCouponList = ref([])
|
|
const cookie = wx.getStorageSync("cookie") //请求头
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
emitter.on('getTotalPrice', (val:any) => {
|
|
totalAmount = val
|
|
getMyCouponList()
|
|
})
|
|
})
|
|
|
|
|
|
const changeStateLeft = (val:any) => {
|
|
if (!val) {
|
|
isShow.value = !isShow.value
|
|
borderStyle.value.borderBottom = 'solid 0px'
|
|
getMyCouponList()
|
|
}
|
|
}
|
|
|
|
const changeStateRight = (val:any) => {
|
|
if (val) {
|
|
isShow.value = !isShow.value
|
|
borderStyle.value.borderBottom = 'solid 1.88rpx #d9d9d9'
|
|
getMyCouponList()
|
|
}
|
|
}
|
|
|
|
const closeCoupon = () => {
|
|
emitter.emit('closeCoupon')
|
|
}
|
|
|
|
const selectOne = (val:any) => {
|
|
idx.value = val
|
|
for (var i = 0; i < checkedArr.value.length; i ++ ) {
|
|
if (i == val) {
|
|
checkedArr.value[i] = true
|
|
} else {
|
|
checkedArr.value[i] = false
|
|
}
|
|
}
|
|
}
|
|
|
|
const confirm = () => {
|
|
if (idx.value !== -1) {
|
|
emitter.emit('getCouponObj', myCouponList.value[idx.value])
|
|
}
|
|
emitter.emit('closeCoupon')
|
|
}
|
|
|
|
const cancel = () => {
|
|
emitter.emit('cancelCoupon')
|
|
emitter.emit('closeCoupon')
|
|
}
|
|
|
|
|
|
const getMyCouponList = async () => {
|
|
const res = await uni.request({
|
|
url: baseUrl + '/coupon/list/use',
|
|
method: 'POST',
|
|
header: {
|
|
cookie
|
|
},
|
|
data: {
|
|
currentAmount: totalAmount,
|
|
isAvailable: isShow.value
|
|
}
|
|
})
|
|
myCouponList.value = res.data.data
|
|
checkedArr.value = new Array(myCouponList.value.length).fill(false)
|
|
}
|
|
|
|
|
|
const jumpToMall = () => {
|
|
uni.navigateTo({
|
|
url: '/pages/coupon/CouponMall/CouponMall'
|
|
})
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
.mt-33 {
|
|
margin-top: 61.88rpx;
|
|
}
|
|
.mt-17 {
|
|
margin-top: 31.88rpx;
|
|
}
|
|
.mt-11 {
|
|
margin-top: 20.63rpx;
|
|
}
|
|
.page {
|
|
background-color: #f4f3f3;
|
|
border-radius: 18.75rpx 18.75rpx 0rpx 0rpx;
|
|
width: 100%;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
height: 100%;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
margin: 0 auto;
|
|
}
|
|
.section {
|
|
padding-top: 41.25rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 18.75rpx 18.75rpx 0rpx 0rpx;
|
|
border-bottom: solid 1.88rpx #d9d9d9;
|
|
}
|
|
.group {
|
|
padding: 0 35.63rpx;
|
|
}
|
|
.text {
|
|
color: #323232;
|
|
font-size: 33.75rpx;
|
|
font-family: Inter;
|
|
line-height: 31.18rpx;
|
|
}
|
|
.image {
|
|
width: 37.5rpx;
|
|
height: 37.5rpx;
|
|
}
|
|
.pos {
|
|
position: absolute;
|
|
right: 35.63rpx;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
.group_2 {
|
|
padding: 0 138.75rpx 0 157.5rpx;
|
|
}
|
|
.font {
|
|
font-size: 30rpx;
|
|
font-family: Inter;
|
|
line-height: 25.65rpx;
|
|
color: #323232;
|
|
}
|
|
.divider {
|
|
height: 5.63rpx;
|
|
}
|
|
.section_2 {
|
|
background-color: #ff3c3c;
|
|
width: 80.63rpx;
|
|
height: 5.63rpx;
|
|
}
|
|
.pos_2 {
|
|
position: absolute;
|
|
left: 144.38rpx;
|
|
top: 0;
|
|
}
|
|
.pos_3 {
|
|
position: absolute;
|
|
right: 144.38rpx;
|
|
top: 0;
|
|
}
|
|
.section_3 {
|
|
padding: 22.5rpx 33.75rpx 22.5rpx 41.25rpx;
|
|
background-color: #ffffff;
|
|
}
|
|
.image_2 {
|
|
width: 26.25rpx;
|
|
height: 22.5rpx;
|
|
}
|
|
.list {
|
|
padding: 31.88rpx 22.5rpx 31.88rpx;
|
|
height: 70%;
|
|
overflow-y: auto;
|
|
}
|
|
.list::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.list-item {
|
|
padding-bottom: 18.75rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 18.75rpx;
|
|
}
|
|
.list-item:first-child {
|
|
margin-top: 0;
|
|
}
|
|
.group_3 {
|
|
padding: 33.75rpx 37.5rpx 18.75rpx;
|
|
}
|
|
.group_6 {
|
|
margin-top: 26.25rpx;
|
|
width: 81.6rpx;
|
|
}
|
|
.font_3 {
|
|
font-size: 45rpx;
|
|
font-family: Inter;
|
|
line-height: 33.81rpx;
|
|
font-weight: 600;
|
|
color: #c35c5d;
|
|
}
|
|
.text_4 {
|
|
margin-left: 26.25rpx;
|
|
}
|
|
.font_4 {
|
|
font-size: 30rpx;
|
|
font-family: Inter;
|
|
line-height: 21.64rpx;
|
|
color: #c35c5d;
|
|
}
|
|
.text_5 {
|
|
margin-left: -82.5rpx;
|
|
}
|
|
.group_4 {
|
|
margin-right: 7.5rpx;
|
|
}
|
|
.group_5 {
|
|
width: 365.66rpx;
|
|
}
|
|
.text_3 {
|
|
font-size: 28.13rpx;
|
|
line-height: 25.91rpx;
|
|
}
|
|
.font_5 {
|
|
font-size: 26.25rpx;
|
|
font-family: Inter;
|
|
line-height: 30rpx;
|
|
color: #000000;
|
|
}
|
|
.text_6 {
|
|
font-size: 24.38rpx;
|
|
}
|
|
.section_4 {
|
|
background-color: #ffffff;
|
|
border-radius: 75rpx;
|
|
width: 33.75rpx;
|
|
height: 33.75rpx;
|
|
}
|
|
.font_2 {
|
|
font-size: 26.25rpx;
|
|
font-family: Inter;
|
|
line-height: 25.65rpx;
|
|
color: #323232;
|
|
}
|
|
.text_2 {
|
|
line-height: 24.28rpx;
|
|
}
|
|
.text_7 {
|
|
margin-left: 30rpx;
|
|
line-height: 24.34rpx;
|
|
}
|
|
.section_5 {
|
|
margin-top: 50.75rpx;
|
|
padding: 15rpx 46.88rpx;
|
|
background-color: #ffffff;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
margin: 0 auto;
|
|
}
|
|
.text-wrapper {
|
|
padding: 26.25rpx 0;
|
|
flex: 1 1 328.13rpx;
|
|
background-color: #ff3c3cad;
|
|
border-radius: 93.75rpx 0rpx 0rpx 93.75rpx;
|
|
height: 82.5rpx;
|
|
}
|
|
.font_6 {
|
|
font-size: 30rpx;
|
|
font-family: Inter;
|
|
color: #ffffff;
|
|
}
|
|
.text_8 {
|
|
line-height: 27.81rpx;
|
|
}
|
|
.text-wrapper_2 {
|
|
padding: 26.25rpx 0;
|
|
flex: 1 1 328.13rpx;
|
|
background-color: #ffb5b8;
|
|
border-radius: 0rpx 93.75rpx 93.75rpx 0rpx;
|
|
height: 82.5rpx;
|
|
}
|
|
.text_9 {
|
|
line-height: 27.79rpx;
|
|
}
|
|
@import url(../../../common/css/global.css);
|
|
</style> |