131 lines
2.9 KiB
Vue
131 lines
2.9 KiB
Vue
<template>
|
|
<view class="pro-item-wrapper flex flex-col box-border flex-justify-between" @click="toDetail">
|
|
<view class="img-container">
|
|
<image
|
|
:src="detail?.voucherIcon"
|
|
mode="scaleToFill"
|
|
class="img"
|
|
/>
|
|
</view>
|
|
<view class="bottom-container">
|
|
<view class="brand">{{ config[detail.brandFlag].name}}</view>
|
|
<view class="name">{{ detail.voucherTitle }}</view>
|
|
<view class="flex flex-justify-between flex-items-end">
|
|
<view class="price">{{ detail.voucherAmount }}<text>元</text>
|
|
</view>
|
|
<view class="ori">{{ detail.voucherOriginalPrice }}</view>
|
|
</view>
|
|
<view class="btn flex flex-justify-center flex-items-center">
|
|
<view class="btn-content flex flex-justify-center flex-items-center" @click="goBuy">点击购买</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { inject } from 'vue';
|
|
import config from '../config'
|
|
const { handleBuy, goDetail } = inject('custom-events')
|
|
const props = defineProps({
|
|
detail:{
|
|
type:Object,
|
|
required: true,
|
|
default:() => ({})
|
|
},
|
|
index:{
|
|
type:Number,
|
|
required:true,
|
|
default:0,
|
|
}
|
|
})
|
|
const goBuy = (e) => {
|
|
if(e.stopPropagation) { //W3C阻止冒泡方法
|
|
e.stopPropagation();
|
|
}
|
|
handleBuy(props.detail)
|
|
}
|
|
const toDetail = () => {
|
|
goDetail(props.detail)
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.pro-item-wrapper{
|
|
// width:206rpx;
|
|
width:100%;
|
|
height:370rpx;
|
|
background: url('/static/ycnc/bg-product.png') no-repeat;
|
|
background-size: 100% 100%;
|
|
padding: 6rpx 6rpx 10rpx;
|
|
margin-right: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
}
|
|
.bottom-container{
|
|
overflow: hidden;
|
|
flex:1;
|
|
padding: 18rpx 8rpx 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
// justify-content: space-between;
|
|
}
|
|
.brand{
|
|
font-weight: 400;
|
|
font-size: 22rpx;
|
|
color: #887F6E;
|
|
}
|
|
.img-container{
|
|
width:100%;
|
|
height:150rpx !important;
|
|
box-sizing: border-box;
|
|
border-radius: 18rpx;
|
|
overflow: hidden;
|
|
.img{
|
|
width:100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.name{
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #3B2609;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
margin:10rpx 0 6rpx;
|
|
}
|
|
.price{
|
|
font-weight: 400;
|
|
font-size: 32rpx;
|
|
color: #F71924;
|
|
text{
|
|
font-size: 18rpx;
|
|
}
|
|
}
|
|
.ori{
|
|
font-weight: 300;
|
|
font-size: 24rpx;
|
|
color: #888365;
|
|
text-decoration: line-through;
|
|
text{
|
|
font-size: 16rpx;
|
|
// text-decoration: line-through;
|
|
}
|
|
}
|
|
.btn{
|
|
width: 166rpx;
|
|
height: 56rpx;
|
|
background: linear-gradient( 180deg, #FFF8EA 0%, #FFD9BC 100%);
|
|
box-shadow: 0rpx 1 2rpx 0rpx #FAD5A8;
|
|
border-radius: 28rpx;
|
|
margin-top:20rpx;
|
|
.btn-content {
|
|
width: 158rpx;
|
|
height: 48rpx;
|
|
background: linear-gradient( 180deg, #FB3E3A 0%, #F01617 100%);
|
|
border-radius: 24rpx;
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #FFFFFF;
|
|
}
|
|
}
|
|
</style> |