148 lines
3.4 KiB
Vue
148 lines
3.4 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>
|
|
</template>
|
|
|
|
<script setup>
|
|
import dayjs from 'dayjs'
|
|
const props = defineProps({
|
|
item: {
|
|
type: Object,
|
|
default: () => {},
|
|
},
|
|
});
|
|
function previewImage(url) {
|
|
uni.previewImage({
|
|
urls: [url],
|
|
});
|
|
}
|
|
function returnTime(coupon){
|
|
// if(coupon.validType=="fixed"){
|
|
// return dayjs().add(coupon.daysToTakeEffect,'day').format('YYYY-MM-DD')
|
|
// }
|
|
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>
|
|
|