134 lines
3.1 KiB
Vue
134 lines
3.1 KiB
Vue
|
<template>
|
|||
|
|
<div class="item-wrap" @click="toDetail">
|
|||
|
|
<img :src="item.coverImgUrl" />
|
|||
|
|
<div class="product-info">
|
|||
|
|
<h4>
|
|||
|
|
{{ item.name }}
|
|||
|
|
</h4>
|
|||
|
|
<p class="intro">
|
|||
|
|
{{ item.content }}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</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">
|
|||
|
|
.item-wrap {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
position: relative;
|
|||
|
|
width: 100%;
|
|||
|
|
background: #f8f9fa;
|
|||
|
|
background-size: 100% 100%;
|
|||
|
|
padding: 20px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
text-align: left;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
img {
|
|||
|
|
width: 108px;
|
|||
|
|
height: 108px;
|
|||
|
|
margin-right: 20px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
}
|
|||
|
|
.product-info {
|
|||
|
|
flex: 1;
|
|||
|
|
width: 0;
|
|||
|
|
}
|
|||
|
|
h4 {
|
|||
|
|
color: #333333;
|
|||
|
|
font-family: "PingFang SC";
|
|||
|
|
font-size: 32px;
|
|||
|
|
font-style: normal;
|
|||
|
|
font-weight: 500;
|
|||
|
|
line-height: 48px;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
.intro {
|
|||
|
|
color: #606877;
|
|||
|
|
text-align: justify;
|
|||
|
|
font-size: 24px;
|
|||
|
|
font-style: normal;
|
|||
|
|
font-weight: 400;
|
|||
|
|
line-height: 44px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
text-overflow: ellipsis;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|