165 lines
3.8 KiB
Vue
165 lines
3.8 KiB
Vue
<template>
|
||
<div class="item-wrap" @click="toDetail">
|
||
<slot />
|
||
<h4>
|
||
{{ item.name }}
|
||
</h4>
|
||
<p class="intro">
|
||
{{ item.content }}
|
||
</p>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { defineProps } from "vue"
|
||
import { useRoute } from "vue-router"
|
||
import { queryCartRead } from "@/api/video"
|
||
import { useStore } from "vuex"
|
||
const props = defineProps({
|
||
item: {
|
||
required: true,
|
||
type: Object,
|
||
default: () => ({}),
|
||
},
|
||
liveProductId: {
|
||
// 直播视频id，用于溯源直播带货里面的产品是从那个视频直播里购买的
|
||
default: "",
|
||
},
|
||
liveCategoryId: {
|
||
default: 3,
|
||
},
|
||
tgId: {
|
||
type: String,
|
||
default: "",
|
||
},
|
||
isShopCar: {
|
||
type: Boolean,
|
||
default: false,
|
||
},
|
||
type: {
|
||
// 直播:3 , 短视频: 35 , 课程: 32, 合集: 33
|
||
type: Number,
|
||
default: 3,
|
||
},
|
||
})
|
||
const route = useRoute()
|
||
const store = useStore()
|
||
const toDetail = async () => {
|
||
if (props.isShopCar) {
|
||
await queryCartRead({
|
||
productId: props.item.productId ? props.item.productId : props.item.id,
|
||
productType: props.item.productType,
|
||
videoId: route.query.id,
|
||
saleUserId: route.query.saleUserId,
|
||
})
|
||
}
|
||
if (props.item.productType === 21) {
|
||
// let bvideo = `${
|
||
// props.item.url.indexOf("?") === -1 ? "?" : "&"
|
||
// }bvideo=videoId_${route.query.id},type_${props.type}`;
|
||
// if (route.query.saleUserId) {
|
||
// bvideo = `${bvideo},saleUserId_${route.query.saleUserId}`;
|
||
// }
|
||
// location.href = `${props.item.url}${bvideo}`;
|
||
location.href = window.config.getCarProductLink({
|
||
token: store.state.userInfo.token,
|
||
refreshToken: store.state.userInfo.refreshToken,
|
||
activityId: props.item.url,
|
||
})
|
||
} else {
|
||
if (props.liveProductId) {
|
||
location.href = `${location.origin}/tgh5/viewpackageDetail/${
|
||
props.item.id
|
||
}?liveProductId=${props.liveProductId}&liveCategoryId=${
|
||
props.liveCategoryId
|
||
}&liveMarketId=${
|
||
route.query.saleUserId ? route.query.saleUserId : ""
|
||
}&liveTgId=${props.tgId}`
|
||
} else {
|
||
location.href = `${location.origin}/tgh5/viewpackageDetail/${props.item.id}`
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped lang="scss">
|
||
@media screen and (min-width: 480px) {
|
||
.item-wrap {
|
||
height: 230px !important;
|
||
}
|
||
}
|
||
.item-wrap {
|
||
position: relative;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
background: url(@/assets/images/chat/product-bg.png) no-repeat center;
|
||
background-size: 100% 100%;
|
||
padding: 24px;
|
||
border-radius: 8px;
|
||
text-align: left;
|
||
height: 180px;
|
||
box-sizing: border-box;
|
||
&.disabled {
|
||
background: url(@/assets/images/chat/product-bg1.png) no-repeat center;
|
||
background-size: 100% 100%;
|
||
opacity: 0.6;
|
||
}
|
||
h4 {
|
||
color: #333333;
|
||
font-family: "PingFang SC";
|
||
font-size: 28px;
|
||
font-style: normal;
|
||
font-weight: 500;
|
||
line-height: 32px;
|
||
margin-bottom: 8px;
|
||
overflow: hidden;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
span {
|
||
color: #f02e18;
|
||
}
|
||
}
|
||
.intro {
|
||
color: #666666;
|
||
text-align: justify;
|
||
font-size: 28px;
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
line-height: 44px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
.item-footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
color: #999999;
|
||
align-items: center;
|
||
font-size: 24px;
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
span {
|
||
color: #f02e18;
|
||
font-size: 32px;
|
||
font-style: normal;
|
||
font-weight: 500;
|
||
text-transform: uppercase;
|
||
margin-left: 4px;
|
||
}
|
||
strong {
|
||
color: #f02e18;
|
||
font-size: 32px;
|
||
font-style: normal;
|
||
font-weight: 500;
|
||
}
|
||
i {
|
||
color: #999999;
|
||
font-size: 24px;
|
||
font-style: normal;
|
||
font-weight: 400;
|
||
text-decoration: line-through;
|
||
}
|
||
}
|
||
}
|
||
</style>
|