源文件
This commit is contained in:
230
components/coupon-card/coupon-card.vue
Normal file
230
components/coupon-card/coupon-card.vue
Normal file
@@ -0,0 +1,230 @@
|
||||
<template>
|
||||
<view :class="theme_view">
|
||||
<view class="padding-bottom padding-horizontal-main">
|
||||
<view class="coupon-card oh pr flex-row">
|
||||
<view class="card-left flex-col jc-sa align-c" :class="propStatusType > 3 ? 'failure cr-grey-9' : 'cr-white'">
|
||||
<view class="price">
|
||||
<text v-if="propData.type == '0'" class="symbol text-size">{{ currency_symbol }}</text>
|
||||
<text class="num text-size-xxl">{{ propData.discount_value }}</text>
|
||||
<text v-if="propData.type !== '0'" class="unit text-size-md">{{ propData.type_unit }}</text>
|
||||
</view>
|
||||
<text v-if="(propData.desc || null) != null" class="desc text-size-xs single-text">{{ propData.desc }}</text>
|
||||
</view>
|
||||
<view class="card-right flex-1 flex-width flex-row jc-sb align-c" :class="propStatusType > 3 ? 'failure cr-grey-9' : ''">
|
||||
<view class="card-info flex-1 flex-width padding-right-main" :class="propStatusType > 3 ? 'failure cr-grey-9' : 'cr-black'">
|
||||
<view class="title text-size-lg single-text" :class="propData.time_start">{{ propData.use_limit_type_name }}</view>
|
||||
<view v-if="propStartTime && propEndTime" class="date text-size-xs cr-grey-9 single-text padding-top-sm">{{ propStartTime }}-{{ propEndTime }}</view>
|
||||
<view v-if="propIsProgress && propData.process_data" class="progress padding-top-sm flex-row align-c">
|
||||
<block v-if="propData.process_data.type == 0">
|
||||
<text class="text-size-xs cr-grey-9"> {{ propData.process_data.msg }} </text>
|
||||
</block>
|
||||
<block v-else>
|
||||
<progress class="flex-1" :percent="propData.process_data.value" stroke-width="6" activeColor="#FF7004" backgroundColor="#fff" border-radius="3" />
|
||||
<view class="percent text-size-xss cr-grey-9 padding-left-main"> {{ propData.process_data.msg }} </view>
|
||||
</block>
|
||||
</view>
|
||||
<view v-if="propData.expire_tips" class="padding-top-sm text-size-xs cr-red">{{ propData.expire_tips }}</view>
|
||||
</view>
|
||||
<view class="card-type">
|
||||
<!-- 按钮状态 0-领取，1-已领取，2-已抢完，3-去使用,4-已使用，5-已过期 -->
|
||||
<view v-if="propStatusType == 0" class="card-btn dis-inline-block cr-white" @tap="receive">{{ propStatusOperableName || this.$t('coupon-card.coupon-card.m9316y') }}</view>
|
||||
<view v-else-if="propStatusType == 1" class="card-btn dis-inline-block cr-red br-red received">{{ propStatusOperableName || this.$t('coupon-card.coupon-card.m9316y') }}</view>
|
||||
<view v-else-if="propStatusType == 2" class="card-btn dis-inline-block cr-white robbed">{{ propStatusOperableName || this.$t('coupon-card.coupon-card.m9316y') }}</view>
|
||||
<view v-else-if="propStatusType == 3" :data-value="home_page_url" @tap="url_event" class="cp">
|
||||
<view class="card-btn dis-inline-block cr-white">
|
||||
{{ propStatusOperableName || this.$t('coupon-card.coupon-card.m9316y') }}
|
||||
</view>
|
||||
</view>
|
||||
<view v-else-if="propStatusType == 4" class="card-image pa top-0 right-0">
|
||||
<image class="image" :src="coupon_static_url + 'coupon-used.png'" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view v-else-if="propStatusType == 5" class="card-image pa top-0 right-0">
|
||||
<image class="image" :src="coupon_static_url + 'coupon-expire.png'" mode="scaleToFill"></image>
|
||||
</view>
|
||||
<view v-else @tap="receive">{{$t('coupon-card.coupon-card.j318xx')}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-circle-top" :style="{ background: `${propBg}` }"></view>
|
||||
<view class="card-circle-bottom" :style="{ background: `${propBg}` }"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const app = getApp();
|
||||
var coupon_static_url = app.globalData.get_static_url('coupon', true);
|
||||
var tabbar_pages = app.globalData.app_tabbar_pages();
|
||||
export default {
|
||||
name: 'coupon-card',
|
||||
props: {
|
||||
propData: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
// id: "0",
|
||||
// // 领取数量
|
||||
// already_send_count: 0,
|
||||
// // 总数
|
||||
// process_data: {
|
||||
// type: 1, // 0 无限制
|
||||
// value: 20,
|
||||
// msg: "已领20%",
|
||||
// },
|
||||
// // 日期有效日期 // 2023.08.30-2023.09.1
|
||||
// date: "",
|
||||
// expire_tips: "",
|
||||
// time_start: "",
|
||||
// time_end: "",
|
||||
};
|
||||
},
|
||||
},
|
||||
// 监听
|
||||
propRandom: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
// 半圆背景
|
||||
propBg: {
|
||||
type: String,
|
||||
default: '#fff',
|
||||
},
|
||||
// 进度条
|
||||
propIsProgress: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 是否可重复领取
|
||||
propRepeatedClaim: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 是否可点击
|
||||
propDisabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 下标
|
||||
propIndex: {
|
||||
type: [Number,String],
|
||||
default: 0,
|
||||
},
|
||||
// 按钮状态 0-领取，1-已领取，2-已抢完，3-去使用,4-已使用，5-已过期
|
||||
propStatusType: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
// 按钮名称： 领取 已领取 已抢完 去使用
|
||||
propStatusOperableName: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
// 优惠券有效期
|
||||
propStartTime:{
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
propEndTime:{
|
||||
type: String,
|
||||
default: '',
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
theme_view: app.globalData.get_theme_value_view(),
|
||||
coupon_static_url: coupon_static_url + 'app/',
|
||||
// 符号
|
||||
currency_symbol: app.globalData.currency_symbol(),
|
||||
// 首页地址
|
||||
home_page_url: tabbar_pages[0],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
// 领取
|
||||
receive(e) {
|
||||
this.$emit('call-back', this.propIndex, this.propData.id);
|
||||
},
|
||||
|
||||
// url事件
|
||||
url_event(e) {
|
||||
app.globalData.url_event(e);
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.coupon-card {
|
||||
border-radius: 24rpx;
|
||||
height: 208rpx;
|
||||
}
|
||||
|
||||
.card-left {
|
||||
width: 176rpx;
|
||||
padding: 24rpx 12rpx;
|
||||
background: linear-gradient(95deg, #ff994b 0%, #ff6e00 100%);
|
||||
}
|
||||
|
||||
.card-left.failure {
|
||||
background: linear-gradient(95deg, #eeeeee 0%, #fafafa 100%);
|
||||
}
|
||||
|
||||
.card-right {
|
||||
padding: 32rpx 24rpx 32rpx 46rpx;
|
||||
background-color: #ffe4d1;
|
||||
}
|
||||
|
||||
.card-right.failure {
|
||||
background: linear-gradient(95deg, #f8f8f8 0%, #e0dede 100%);
|
||||
}
|
||||
|
||||
.card-info.failure {
|
||||
padding-right: 116rpx;
|
||||
}
|
||||
|
||||
.card-btn {
|
||||
width: 116rpx;
|
||||
text-align: center;
|
||||
padding: 6rpx 0;
|
||||
background: linear-gradient(93deg, #ff9747 0%, #ff6e01 100%);
|
||||
border-radius: 13px;
|
||||
}
|
||||
|
||||
.robbed {
|
||||
background: #fbd3b7;
|
||||
}
|
||||
|
||||
.received {
|
||||
border-radius: 13px;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
::v-deep .uni-progress-bar,
|
||||
::v-deep .uni-progress-inner-bar {
|
||||
border-radius: 6rpx;
|
||||
}
|
||||
|
||||
.card-circle-top,
|
||||
.card-circle-bottom {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
left: 180rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.card-circle-top {
|
||||
top: -20rpx;
|
||||
}
|
||||
|
||||
.card-circle-bottom {
|
||||
bottom: -20rpx;
|
||||
}
|
||||
|
||||
.card-image .image {
|
||||
width: 136rpx;
|
||||
height: 108rpx;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user