|
@@ -0,0 +1,204 @@
|
|
|
+<template name="alert">
|
|
|
+ <view class="coupon-content-model">
|
|
|
+ <view class="coupon-alert-content">
|
|
|
+ <view class="coupon">
|
|
|
+ <view class="coupon-list">
|
|
|
+ <view class="list-cell-tags"
|
|
|
+ ><text>{{ coupon.couponType | TypeFormat }}</text></view
|
|
|
+ >
|
|
|
+ <view class="list-cell-le">
|
|
|
+ <view class="coupon-maxMoney"> <text class="small">¥</text> {{ coupon.couponAmount }} </view>
|
|
|
+ <view class="coupon-minMoney">
|
|
|
+ <text class="txt">满{{ coupon.touchPrice }}可用</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="list-cell-ri">
|
|
|
+ <view class="list-cell-top">
|
|
|
+ <text v-if="coupon.couponType == 0">
|
|
|
+ {{
|
|
|
+ coupon.productType && coupon.productType == 1
|
|
|
+ ? '全商城商品通用'
|
|
|
+ : coupon.couponName
|
|
|
+ }}
|
|
|
+ </text>
|
|
|
+ <text v-if="coupon.couponType == 1">
|
|
|
+ {{ coupon.categoryType == 1 ? coupon.couponName : coupon.couponName }}
|
|
|
+ </text>
|
|
|
+ <text v-if="coupon.couponType == 3">仅限购买店铺【{{ coupon.shopName }}】的商品</text>
|
|
|
+ <text v-if="coupon.couponType == 4 || coupon.couponType == 2">全商城商品通用</text>
|
|
|
+ </view>
|
|
|
+ <view class="list-cell-time">{{ coupon.startDate }} - {{ coupon.endDate }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="coupon-btn" @click.stop="cancel">立即收下</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'alert',
|
|
|
+ props: {
|
|
|
+ coupon: {
|
|
|
+ type: Object
|
|
|
+ }
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ TypeFormat(value) {
|
|
|
+ const map = {
|
|
|
+ 0:'活动券',
|
|
|
+ 1:'品类券',
|
|
|
+ 2:'用户专享券',
|
|
|
+ 3:'店铺券',
|
|
|
+ 4:'新用户券',
|
|
|
+ }
|
|
|
+ return map[value]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {}
|
|
|
+ },
|
|
|
+ created() {},
|
|
|
+ onLoad() {},
|
|
|
+ methods: {
|
|
|
+ cancel(){
|
|
|
+ this.$emit('cancel')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {}
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+.coupon-content-model {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 8888;
|
|
|
+ transition: all 0.4s;
|
|
|
+ .coupon-alert-content {
|
|
|
+ width: 600rpx;
|
|
|
+ height: 612rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ margin: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-top: 92rpx;
|
|
|
+ .coupon {
|
|
|
+ width: 600rpx;
|
|
|
+ height: 522rpx;
|
|
|
+ background: url(https://static.caimei365.com/app/img/icon/icon-coupon-alertbg@2x.png);
|
|
|
+ background-size: cover;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 230rpx 40rpx 0 40rpx;
|
|
|
+ .coupon-list {
|
|
|
+ width: 100%;
|
|
|
+ height: 147rpx;
|
|
|
+ margin-bottom: 32rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: url(https://static.caimei365.com/app/img/icon/icon-coupon-bg@2x.png);
|
|
|
+ background-size: cover;
|
|
|
+ position: relative;
|
|
|
+ .list-cell-tags {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 0 10rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ line-height: 32rpx;
|
|
|
+ background-color: #f94b4b;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: 18rpx;
|
|
|
+ border-radius: 16rpx 0 16rpx 0;
|
|
|
+ text-align: center;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ .list-cell-le {
|
|
|
+ width: 154rpx;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 30rpx 0;
|
|
|
+ float: left;
|
|
|
+ .coupon-maxMoney {
|
|
|
+ width: 100%;
|
|
|
+ height: 54rpx;
|
|
|
+ line-height: 54rpx;
|
|
|
+ font-size: 42rpx;
|
|
|
+ color: #f94b4b;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ .small {
|
|
|
+ font-size: $font-size-20;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .coupon-minMoney {
|
|
|
+ width: 100%;
|
|
|
+ height: 28rpx;
|
|
|
+ float: left;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-left: 24rpx;
|
|
|
+ .txt {
|
|
|
+ display: block;
|
|
|
+ height: 28rpx;
|
|
|
+ line-height: 28rpx;
|
|
|
+ font-size: 16rpx;
|
|
|
+ color: #f94b4b;
|
|
|
+ text-align: center;
|
|
|
+ padding: 0 5rpx;
|
|
|
+ background-color: #fff1eb;
|
|
|
+ border-radius: 4rpx;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-cell-ri {
|
|
|
+ width: 366rpx;
|
|
|
+ height: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 30rpx 20rpx;
|
|
|
+ float: left;
|
|
|
+ .list-cell-top {
|
|
|
+ width: 100%;
|
|
|
+ height: 64rpx;
|
|
|
+ line-height: 64rpx;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ color: #333333;
|
|
|
+ float: left;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ display: -webkit-box;
|
|
|
+ word-break: break-all;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .list-cell-time {
|
|
|
+ width: 100%;
|
|
|
+ height: 28rpx;
|
|
|
+ line-height: 28rpx;
|
|
|
+ text-align: left;
|
|
|
+ font-size: $font-size-20;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .coupon-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: 78rpx;
|
|
|
+ background: url(https://static.caimei365.com/app/img/icon/icon-coupon-alertbtnbg@2x.png);
|
|
|
+ background-size: cover;
|
|
|
+ line-height: 78rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: $font-size-36;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|