338 lines
7.4 KiB
Vue
338 lines
7.4 KiB
Vue
<template>
|
|
<view v-if="visible">
|
|
<view v-if="adInfo.type === 3"
|
|
class="mask mask-coupon ad-coupons"
|
|
@touchmove.stop.prevent="moveHandle">
|
|
<view class="ad-box-warp">
|
|
<view class="ad-boxs">
|
|
<!-- <image class="img"-->
|
|
<!-- :src="adInfo.popupImage"-->
|
|
<!-- ></image>-->
|
|
<view class="coupon-list">
|
|
<scroll-view :scroll-top="0"
|
|
class="scrollBox"
|
|
scroll-y="true">
|
|
<div class="coupon-item" v-for="(item, index) in couponList">
|
|
<div class="coupon-left">
|
|
<!-- 折扣力度 -->
|
|
<div class="discount">
|
|
<div class="unit pre-unit" v-if="item.couponType === 1">
|
|
￥
|
|
</div>
|
|
{{item.couponType === 1 ? item.couponValue : item.discount}}
|
|
<div class="unit" v-if="item.couponType === 2">
|
|
折
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="coupon-right">
|
|
<div class="info">
|
|
<div class="type">
|
|
{{item.couponType === 1 ? '满减券' : '折扣券'}}
|
|
</div>
|
|
<div class="tip">
|
|
{{item.threshold!==0?`(实付${item.threshold}元使用)`:'无门槛使用'}}
|
|
</div>
|
|
</div>
|
|
<!-- button -->
|
|
<div class="button get-coupon" @click="receiveCoupon(item.id)">
|
|
领取
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
<view class="close-btn">
|
|
<image :src="adInfo.buttonImage"
|
|
class='btn'
|
|
mode="widthFix"
|
|
@click="close()"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-else class="mask mask-coupon ad-link">
|
|
<view class="ad-box-warp">
|
|
<view class="ad-boxs"
|
|
@click="goRoll()">
|
|
<image class="img"
|
|
:src="adInfo.popupImage"
|
|
mode="widthFix"></image>
|
|
</view>
|
|
<view class="close-btn">
|
|
<image :src="adInfo.buttonImage"
|
|
class='btn'
|
|
mode="widthFix"
|
|
@click="close()"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {onMounted, ref} from 'vue';
|
|
import { getAdPopup } from '@/api/global'
|
|
import { getCouponListById, receiveACoupon } from '@/api/coupon'
|
|
import {orderInfo} from "@/api/order";
|
|
import {useRouter} from "@/hooks/useRouter";
|
|
import cookie from "@/utils/cookie";
|
|
import api from "@/components/canvasShow/config/api";
|
|
const {push} = useRouter()
|
|
const visible = ref(false)
|
|
const adInfo = ref({})
|
|
const linkData = ref({})
|
|
const couponList = ref([])
|
|
const cParams = ref({})
|
|
|
|
onMounted(() => {
|
|
getAd()
|
|
})
|
|
|
|
// 阻止滑动
|
|
const moveHandle = () => {
|
|
return
|
|
}
|
|
// 获取广告信息
|
|
const getAd = async () => {
|
|
adInfo.value = await getAdPopup()
|
|
if (adInfo.value.link) {
|
|
linkData.value = JSON.parse(adInfo.value.link)
|
|
}
|
|
visible.value = true
|
|
if (adInfo.value.type === 3) {
|
|
getCoupons()
|
|
}
|
|
}
|
|
// 查询优惠券
|
|
const getCoupons = async () => {
|
|
const _items = linkData.value.items.map(item=>{
|
|
return item.id
|
|
}).join(',')
|
|
if (_items) {
|
|
const res = await getCouponListById({ids:_items})
|
|
couponList.value = res.list
|
|
}
|
|
}
|
|
|
|
// 领取优惠券
|
|
async function receiveCoupon (id) {
|
|
var token = cookie.get('accessToken')
|
|
if (token) {
|
|
const res = await receiveACoupon(id)
|
|
if(res){
|
|
uni.showToast({
|
|
title: '领取成功',
|
|
icon: 'success'
|
|
})
|
|
}
|
|
} else {
|
|
uni.showToast({
|
|
title: '请先登录',
|
|
icon: 'none'
|
|
})
|
|
uni.navigateTo({
|
|
url: '/pages/login/guid'
|
|
})
|
|
}
|
|
}
|
|
|
|
// 关闭弹窗
|
|
const close = () => {
|
|
visible.value = false
|
|
}
|
|
const goRoll = () => {
|
|
visible.value = false
|
|
switch (adInfo.value.type) {
|
|
case 1:
|
|
push({url: '/pages/goodsDetail/goodsDetail'}, {data: {id:linkData.value.id}})
|
|
break
|
|
case 2:
|
|
let _id = linkData.value.id[linkData.value.id.length - 1]
|
|
push({
|
|
url: '/pages/goodsList/goodsList'
|
|
}, {
|
|
data: {sid: _id}
|
|
})
|
|
break
|
|
case 4:
|
|
uni.navigateToMiniProgram({
|
|
appId: linkData.value.appId,
|
|
path: linkData.value.link,
|
|
success(res) {
|
|
// 打开成功
|
|
}
|
|
})
|
|
case 5:
|
|
push({
|
|
url: linkData.value.link
|
|
})
|
|
break
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped
|
|
lang="scss">
|
|
.mask {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: 55;
|
|
background-color: rgba(0, 0, 0, 0.7);
|
|
}
|
|
|
|
|
|
.mask-coupon {
|
|
z-index: 9999;
|
|
/*background: rgba(39, 38, 39, .15);*/
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.ad-box-warp {
|
|
width: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
flex-direction: column;
|
|
|
|
.ad-boxs {
|
|
position: relative;
|
|
width: 100%;
|
|
text-align: center;
|
|
|
|
.img {
|
|
width: 70%;
|
|
}
|
|
}
|
|
|
|
.btn-receive {
|
|
width: 446rpx;
|
|
height: 84rpx;
|
|
background: #EC6F43;
|
|
border-radius: 42rpx;
|
|
display: block;
|
|
text-align: center;
|
|
font-size: 28rpx;
|
|
line-height: 84rpx;
|
|
color: #fff;
|
|
position: absolute;
|
|
bottom: 32rpx;
|
|
left: 50%;
|
|
margin-left: -223rpx;
|
|
}
|
|
|
|
.close-btn {
|
|
position: absolute;
|
|
bottom: -70rpx;
|
|
left: 50%;
|
|
margin-left: -25rpx;
|
|
|
|
.btn {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ad-coupons {
|
|
.ad-box-warp {
|
|
width: 682rpx;
|
|
position: relative;
|
|
|
|
.ad-boxs {
|
|
margin-bottom: 20rpx;
|
|
.img {
|
|
position: absolute;
|
|
top:0;
|
|
left:0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.coupon-list {
|
|
width: 682rpx;
|
|
overflow: auto;
|
|
|
|
.scrollBox {
|
|
max-height: 528upx;
|
|
}
|
|
|
|
.coupon-item {
|
|
width: 100%;
|
|
height: 160rpx;
|
|
margin-top: 24rpx;
|
|
background: url('https://b2c-pro-static-dev.zkthink.com/static/images/canvas/bg-coupon-l.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
&:first-child{
|
|
margin-top: 0;
|
|
}
|
|
.discount{
|
|
display: flex;
|
|
align-items: baseline;
|
|
font-size: 68rpx;
|
|
line-height: 64rpx;
|
|
font-weight: bold;
|
|
.unit{
|
|
font-size: 32rpx;
|
|
}
|
|
}
|
|
|
|
.info{
|
|
font-size: 38rpx;
|
|
.type{
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
line-height: 45rpx;
|
|
}
|
|
.tip{
|
|
font-size: 24rpx;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
.button{
|
|
width: 144rpx;
|
|
height: 64rpx;
|
|
border-radius: 8rpx;
|
|
background: #ee6d46;
|
|
font-size: 24rpx;
|
|
color: #fff;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.disable{
|
|
background: #666666;
|
|
}
|
|
.expired{
|
|
background: #999999;
|
|
}
|
|
|
|
.coupon-left{
|
|
width: 206rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.coupon-right{
|
|
flex: 1;
|
|
display: flex;
|
|
padding: 0 32rpx;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|