overseas/pages/index/component/coupon.vue

273 lines
6.8 KiB
Vue

<template>
<view class="coupon_main" :style="'margin: 0 '+prConfig+'rpx'">
<view class="coupon_count" :style="'padding-top:' + mbConfig +'rpx;border-radius:'+bgStyle+'rpx'" v-if="couponList.length">
<view class="acea-row coupon-title">
<text>领优惠券</text>
<navigator v-if="merId" :url="'/pages/store/home/index?id='+merId+'&coupon=1'" class="more-box" hover-class="none">
<view class="txt">查看更多 <text class="iconfont icon-jiantou"></text></view>
</navigator>
<navigator v-else url="/pages/activity/collect_coupons/index" class="more-box" hover-class="none">
查看更多 <text class="iconfont icon-jiantou"></text>
</navigator>
</view>
<scroll-view scroll-x="true" style="white-space: nowrap; vertical-align: middle;" show-scrollbar="false">
<view class="wrapper" v-if="style == 0">
<view class="item item0" style="margin-right: 20rpx;" v-for="(item,index) in couponList"
:key="index" hover-class="none">
<view class="top" :style="{color:`${themeColor}`,backgroundImage: `url(${domain}/static/images/coupon-bg.png)`}">
<view class="money"><text>HK$</text>{{item.coupon_price}}</view>
<view class="info">满{{item.use_min_price}}元可用</view>
</view>
<navigator hover-class="none" :style="{background:`${themeColor}`}" v-if="item.issue" :url="'/pages/columnGoods/goods_coupon_list/index?coupon_id='+item.coupon_id" class="coupon-btn"><text>去使用</text></navigator>
<view :style="{background:`${themeColor}`}" class="coupon-btn" v-else @click="receiveCoupon(item)"><text>立即领取</text></view>
</view>
</view>
<view class="wrapper" v-else-if="style == 1">
<view class="item item1" :style="{background:`${themeColor}`}" v-for="(item,index) in couponList"
:key="index" hover-class="none">
<view class="itemCon acea-row row-between-wrapper">
<view class="text" :style="{color:`${themeColor}`}">
<view class="money"><text>HK$</text>{{item.coupon_price}}</view>
<view class="info">满{{item.use_min_price}}元可用</view>
</view>
<navigator v-if="item.issue" :url="'/pages/columnGoods/goods_coupon_list/index?coupon_id='+item.coupon_id" class="bnt"><text>去使用</text></navigator>
<view class="bnt" v-else @click="receiveCoupon(item)"><text>立即领取</text></view>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
</template>
<script>
import {setCouponReceive,getCouponData} from '@/api/api.js';
import { HTTP_REQUEST_URL } from '@/config/app';
import { toLogin } from '@/libs/login.js';
import { mapGetters } from "vuex";
export default {
name: 'coupon',
props: {
dataConfig: {
type: Object,
default: () => {}
},
merId: {
type: String || Number,
default: ''
}
},
computed: mapGetters(['isLogin']),
components: {},
watch:{
isLogin:{
handler:function(newV,oldV){
if(newV){
this.getCoupon();
}
},
deep:true
}
},
data() {
return {
domain: HTTP_REQUEST_URL,
couponList: [],
style: this.dataConfig.tabConfig&&this.dataConfig.tabConfig.tabVal || 0,
themeColor: this.dataConfig.themeColor.color[0].item,
mbConfig: this.dataConfig.mbConfig.val*2,
prConfig: this.dataConfig.prConfig&&this.dataConfig.prConfig.val*2,
bgStyle: this.dataConfig.bgStyle.type ? 20 : 0,
diy_id: this.dataConfig.did,
unique: this.dataConfig.timestamp,
};
},
created() {},
mounted() {
this.getCoupon();
},
methods: {
getCoupon: function() {
let that = this;
getCouponData({
diy_id: that.diy_id,
unique: that.unique,
mer_id: that.merId,
page: 1,
limit: 10
}).then(res => {
that.$set(that, 'couponList', res.data.list);
}).catch(err => {
return that.$util.Tips({
title: err
});
});
},
receiveCoupon: function(item) {
let that = this;
if (that.isLogin === false) {
toLogin()
} else {
setCouponReceive(item.coupon_id).then(res => {
item.issue = 1
uni.showToast({
title: res.message,
icon: 'none'
})
}).catch(err => {
uni.showToast({
title: err,
icon: 'none'
})
})
}
},
}
}
</script>
<style lang="scss" scoped>
.coupon_main {
.coupon_count{
background: #ffffff;
padding: 0 0 30rpx 20rpx;
}
.coupon-title {
justify-content: space-between;
align-items: center;
padding: 20rpx 20rpx 20rpx 10rpx;
font-size: 28rpx;
font-weight: bold;
color: #282828;
.more-box {
display: flex;
align-items: center;
justify-content: center;
font-size: 24rpx;
font-weight: normal;
image {
width: 20rpx;
height: 20rpx;
margin-top: 10rpx;
margin: 10rpx 0 0 5rpx;
}
.iconfont{
font-size: 22rpx;
}
}
}
.item {
position: relative;
&.item0{
margin-right: 28rpx;
width: 260rpx;
height: 194rpx;
position: relative;
display: flex;
justify-content: flex-end;
align-items: flex-end;
.top{
text-align: center;
position: absolute;
top: 0;
left: 10rpx;
width: 240rpx;
height: 124rpx;
background-size: 100% 100%;
color: #E93323;
.money{
margin: 8rpx 0 2rpx;
font-size: 52rpx;
font-weight: bold;
text{
font-size: 28rpx;
font-weight: normal;
}
}
.info{
font-size: 24rpx;
}
}
.coupon-btn{
width: 260rpx;
height: 160rpx;
text-align: center;
font-size: 28rpx;
display: flex;
align-items: end;
justify-items: center;
justify-content: flex-end;
border-radius: 24rpx;
background: #E93323;
text{
display: inline-block;
color: #ffffff;
width: 100%;
position: absolute;
bottom: 20rpx;
}
}
}
&.item1{
width: 244rpx;
height: 126rpx;
background: #BBBBBB;
border-radius: 14rpx;
color: #fff;
margin-right: 24rpx;
&::before {
position: absolute;
content: ' ';
width: 20rpx;
height: 20rpx;
border-radius: 50%;
background-color: #fff;
left: -8rpx;
top: 54rpx;
}
}
.itemCon {
width: 244rpx;
height: 128rpx;
.text {
width: 198rpx;
height: 130rpx;
padding: 18rpx 0;
margin: -2rpx 0 0 -1rpx;
background-color: #f7f7f7;
border-radius: 14rpx;
.money {
font-size: 48rpx;
text-align: center;
font-weight: bold;
text {
font-size: 24rpx;
}
}
.info {
font-size: 24rpx;
text-align: center;
}
}
.bnt {
float: right;
position: relative;
height: 100%;
font-size: 20rpx;
writing-mode: vertical-lr;
line-height: 1.2;
width: 46rpx;
height: 128rpx;
display: flex;
align-items: center;
justify-content: center;
}
}
}
.wrapper {
display: flex;
}
}
</style>