<template>
|
<view class="coreshop-padding-10 coreshop-margin-10 coreshop-bg-white coreshop-border-radius-trbl-18" v-if="count">
|
<u-toast ref="uToast" />
|
<view class="coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-between coreshop-min-height-30">
|
<view class="coreshop-font-16 coreshop-text-black coreshop-font-weight-bold">领券专区</view>
|
<u-icon name="arrow-right-double" size="12" label="查看更多" labelSize="12" labelPos="left" @tap="$u.route('/pages/coupon/coupon')"></u-icon>
|
</view>
|
<view class="coreshop-divider">
|
<view class="complete"></view>
|
</view>
|
<view class="coreshop-margin-bottom-10 coreshop-bg-main coreshop-text-black">
|
<scroll-view class="groupon-scroll" enable-flex scroll-anchoring scroll-x scroll-with-animation>
|
<view class="groupon-card-wrap coreshop-flex coreshop-align-center">
|
<view v-for="(item, index) in coreshopData.parameters.list" :key="index">
|
<view class="coreshop-padding-right-5">
|
<view class="coupon-wrap " :style="{ background: `linear-gradient(to right, ${bgColor1}, ${bgColor2})` }">
|
<view class="coupon-item coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-between">
|
<view class="coupon-left coreshop-flex coreshop-flex-direction">
|
<view class="sum-box">
|
<text class="unit" style="color: #6b3f12">￥</text>
|
<text class="sub" style="color: #6b3f12">{{ item.name }}</text>
|
</view>
|
<view class="notice " style="color: #9d6d25">
|
<text v-for="(itemCondition, index) in item.conditions" :key="index">【{{itemCondition}}】</text>
|
</view>
|
<view class="notice" style="color: #9d6d25">
|
有效期：{{$u.timeFormat(item.startTime, 'yyyy-mm-dd')}} 至 {{$u.timeFormat(item.endTime, 'yyyy-mm-dd')}}
|
</view>
|
</view>
|
<view class="coupon-right coreshop-flex coreshop-flex-direction">
|
<button class="get-btn" :style="{ color: bgColor1 }" @tap.stop="receiveCoupon(item.id)">立即领取</button>
|
<view class="surplus-num" style="color: #9d6d25">
|
<text v-for="(itemResult, index) in item.results" :key="index">{{itemResult}}</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</scroll-view>
|
</view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
name: "coreshopCoupon",
|
components: {
|
},
|
props: {
|
coreshopData: {
|
type: Object,
|
required: true,
|
}
|
},
|
computed: {
|
count() {
|
if (!this.coreshopData) {
|
return false;
|
}
|
if (!this.coreshopData.parameters) {
|
return false;
|
}
|
if (!this.coreshopData.parameters.list) {
|
return false;
|
}
|
return (this.coreshopData.parameters.list.length > 0)
|
}
|
},
|
created() {
|
},
|
methods: {
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.coupon-wrap { mask: url($apiFilesUrl+'/static/images/coupon/coupon_bg1.png'); -webkit-mask-box-image: url($apiFilesUrl+'/static/images/coupon/coupon_bg1.png'); mask-size: 100% 100%; position: relative; border-radius: 5px; width: 355px; height: 100px; background: linear-gradient(to right, $u-type-warning-disabled, $u-type-warning);
|
.coupon-item { width: 100%; height: 100%; border-radius: 5px;
|
.coupon-left { justify-content: center; padding-left: 10px; padding-right: 5px;
|
.unit { font-size: 12px; color: #fff; }
|
.sum { font-size: 22.5px; font-weight: bold; color: #fff; line-height: 22.5px; padding-right: 5px; }
|
.sub { font-size: 18px; font-weight: bold; color: #fff; line-height: 18px; padding-right: 5px; }
|
.notice { font-size: 11px; color: rgba(#fff, 0.7); margin-top: 3px; }
|
}
|
.coupon-right { min-width: 110px; justify-content: center; align-items: center; padding-right: 5px;
|
.get-btn { width: 72px; height: 27px; background: #ffffff; border-radius: 13px; padding: 0; font-size: 12px; font-weight: 500; color: $u-type-warning; }
|
.surplus-num { font-size: 11px; font-weight: 500; color: #fff; margin-top: 7px; }
|
}
|
}
|
}
|
</style>
|
