<!--
|
/**
|
* @description 商品详情-优惠券模态框板块
|
* @author shm
|
*/
|
-->
|
<template>
|
<div class="coupon-modal">
|
<div class="coupon-list row-between coloum-center mt20 mb20" v-if="couponList.length"
|
@click="clickGetBtn">
|
<div class="common-txt-color font600 flex1 flex">
|
优惠:
|
<span class="color_red flex1" v-if="couponList && couponList.length">
|
{{ couponList[0].couponName }}
|
</span>
|
</div>
|
<!-- <div class="get-button ml20">领取</div> -->
|
<img src="~@/assets/images/goodsDetail/arrows.png" class="common-base-icon ml20" />
|
</div>
|
<NewModal :visable="modalVis" title="优惠券" @close-modal="CloseModal" class="coupon-modal-content"
|
v-if="modalVis">
|
<scroll-view scroll-y slot="modal-content" class="modal-content-box">
|
<w-coupon type="get" :item="item" v-for="(item, index) in couponList" :key="index"
|
@click-right="reciveCoupon"></w-coupon>
|
</scroll-view>
|
</NewModal>
|
</div>
|
</template>
|
|
<script>
|
import NewModal from '@/components/new-modal/index.vue'
|
import wCoupon from '@/components/w-coupon/index.vue'
|
import {
|
checkGoodHaveCouponLogin,
|
checkGoodHaveCouponUnLogin
|
} from '@/api/goodsDetail/index.js'
|
export default {
|
name: 'CouponModal',
|
components: {
|
NewModal,
|
wCoupon
|
},
|
props: {
|
visable: {
|
type: Boolean,
|
default: false
|
},
|
spuId: {
|
type: String,
|
default: ''
|
},
|
list: {
|
type: Array,
|
default () {
|
return []
|
}
|
}
|
},
|
created () {
|
this.checkIsLogin()
|
},
|
|
data () {
|
return {
|
modalVis: this.visable,
|
couponList: this.list
|
}
|
},
|
watch: {
|
list (newVal) {
|
this.couponList = newVal
|
}
|
},
|
methods: {
|
// 查看是否登录
|
checkIsLogin () {
|
if (localStorage.getItem('access_token')) {
|
this.getUseCouponByLogin() // 获取商品适用优惠券--已登录
|
} else {
|
this.getUseCouponUnLogin() // 获取超值优惠券--未登录
|
}
|
},
|
// 点击获取按钮
|
clickGetBtn () {
|
this.modalVis = !this.modalVis
|
if (!this.modalVis) return
|
this.checkIsLogin()
|
},
|
CloseModal () {
|
this.modalVis = false
|
},
|
// 查看此商品可领取的优惠券---已登录
|
async getUseCouponByLogin () {
|
try {
|
const res = await checkGoodHaveCouponLogin({ prodId: this.spuId })
|
this.couponList = res.data
|
if (this.couponList && this.couponList.length > 0) {
|
this.couponList.forEach((item) => {
|
item.flag = false
|
})
|
}
|
} catch (e) {
|
console.log(e)
|
// TODO handle the exception
|
}
|
},
|
// 查看此商品可领取的优惠券---未登录
|
async getUseCouponUnLogin () {
|
try {
|
const res = await checkGoodHaveCouponUnLogin({ shopSpuId: this.shopSpuId })
|
this.couponList = res.data
|
if (this.couponList && this.couponList.length > 0) {
|
this.couponList.forEach((item) => {
|
item.flag = false
|
})
|
}
|
} catch (e) {
|
console.log(e)
|
// TODO handle the exception
|
}
|
},
|
// 点领取 提示下载app
|
reciveCoupon () {
|
this.$emit('openGuide')
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.coupon-modal {
|
.coupon-modal-content {
|
z-index: 100;
|
}
|
.modal-content-box {
|
max-height: 800px;
|
overflow-y: auto;
|
}
|
.get-button {
|
width: 100px;
|
height: 50px;
|
border-radius: 50px;
|
line-height: 50px;
|
text-align: center;
|
color: #fff;
|
background: #eb0f17;
|
}
|
/deep/.modal-box-open {
|
left: 0;
|
}
|
.common-txt-color {
|
color: #333333;
|
.color_red {
|
font-size: 26px;
|
margin-left: 30px;
|
font-weight: 400;
|
color: #eb0f17;
|
}
|
}
|
}
|
</style>
|
