jiangchengfeiyi-xiaochengxu/pages/coupon/component/couponPopup.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>