151 lines
3.6 KiB
Vue
151 lines
3.6 KiB
Vue
<template>
|
|
<text class="" v-if="item.msg_type == 1">{{ item.content }}</text>
|
|
<image
|
|
v-if="item.msg_type == 2"
|
|
:src="item.image_url"
|
|
class="img"
|
|
mode="widthFix"
|
|
@click="previewImage(item.image_url)"
|
|
></image>
|
|
<video
|
|
@error="videoErrorCallback"
|
|
v-if="item.msg_type == 5"
|
|
:src="item.image_url"
|
|
class="img"
|
|
mode="widthFix"
|
|
></video>
|
|
<view class="" v-if="item.msg_type == 4">
|
|
<view>{{ item.coupon.title }}</view>
|
|
<view class="u-m-t-16 bg-f7 coupon u-flex u-col-stretch" style="min-width: 500rpx;">
|
|
<template v-if="item.coupon.type == 1">
|
|
<view class="left">
|
|
<view class="price">
|
|
<text class="u-font-32">¥</text>
|
|
<text style="font-size: 72rpx">{{
|
|
item.coupon.discountAmount
|
|
}}</text>
|
|
</view>
|
|
<view class="u-font-24 color-999 no-wrap"
|
|
>满{{ item.coupon.fullAmount }}可用</view
|
|
>
|
|
</view>
|
|
</template>
|
|
<template v-if="item.coupon.type == 2">
|
|
<view class="left">
|
|
<view class="price">
|
|
<text class="u-font-32"
|
|
>商品兑换券</text
|
|
>
|
|
</view>
|
|
<view class="u-font-24 color-999 no-wrap"
|
|
>满{{ item.coupon.fullAmount }}可用</view
|
|
>
|
|
</view>
|
|
</template>
|
|
|
|
<template v-if="item.coupon.type == 3">
|
|
<view class="left">
|
|
<view class="price">
|
|
<text class="u-font-32"
|
|
>{{ item.coupon.discountRate / 100 }}折</text
|
|
>
|
|
</view>
|
|
<view class="u-font-24 color-999 no-wrap"
|
|
>满{{ item.coupon.fullAmount }}可用</view
|
|
>
|
|
</view>
|
|
</template>
|
|
<template v-if="item.coupon.type == 4">
|
|
<view class="left">
|
|
<view class="price">
|
|
<text class="u-font-32"
|
|
>第二件半价券</text
|
|
>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
<template v-if="item.coupon.type == 6">
|
|
<view class="left">
|
|
<view class="price">
|
|
<text class="u-font-32"
|
|
>买一送一券</text
|
|
>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<view class="right u-p-l-28 u-flex u-col-center">
|
|
<view class="u-font-32">{{ item.coupon.couponName }}</view>
|
|
|
|
</view>
|
|
</view>
|
|
<view class="u-flex u-row-center u-m-t-32">
|
|
<!-- <view class="lingqu hasGet" v-if="item.coupon_claim">已领取</view> -->
|
|
<view class="lingqu" @click="getCoupon()" >领取</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
item: {
|
|
type: Object,
|
|
default: () => {},
|
|
},
|
|
});
|
|
|
|
const emits = defineEmits(["getCoupon",'previewImage']);
|
|
function getCoupon() {
|
|
emits("getCoupon", props.item);
|
|
}
|
|
function previewImage(url) {
|
|
emits('previewImage',url)
|
|
}
|
|
function returnTime(coupon){
|
|
let startTime = coupon.useStartTime;
|
|
let endTime = coupon.useEndTime;
|
|
if(startTime && endTime){
|
|
return startTime.split(' ')[0] + '-' + endTime.split(' ')[0]
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.img {
|
|
width: 50vw;
|
|
}
|
|
.coupon {
|
|
padding: 16rpx 10rpx;
|
|
border-radius: 16rpx;
|
|
.price {
|
|
color: #ff1c1c;
|
|
font-weight: 700;
|
|
}
|
|
.left {
|
|
width: 112rpx;
|
|
margin-right: 26rpx;
|
|
}
|
|
.right {
|
|
border-left: 1rpx solid #ededed;
|
|
|
|
}
|
|
}
|
|
.lingqu {
|
|
background-color: #e8ad7b;
|
|
line-height: 48rpx;
|
|
font-size: 28rpx;
|
|
padding: 6rpx 70rpx;
|
|
color: #fff;
|
|
border-radius: 140rpx;
|
|
&.hasGet {
|
|
background-color: #eee;
|
|
color: #999;
|
|
}
|
|
}
|
|
.u-col-stretch{
|
|
align-items: stretch;
|
|
}
|
|
</style>
|