153 lines
3.7 KiB
Vue
153 lines
3.7 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"
|
||
@click="previewVideo(item.video_url)"
|
||
></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" 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">
|
||
<view class="u-font-32">{{ item.coupon.couponName }}</view>
|
||
<view class="u-font-24 color-999 u-m-t-8"
|
||
>有效期：{{ returnTime(item.coupon) }}</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"]);
|
||
function getCoupon() {
|
||
emits("getCoupon", props.item);
|
||
}
|
||
function previewImage(url) {
|
||
uni.previewImage({
|
||
urls: [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;
|
||
}
|
||
}
|
||
</style>
|