fix: 购物车样式修改

src/views/VideoPlay/components/carItem.vue

@@ -0,0 +1,138 @@
+<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">
+@media screen and (min-width: 480px) {
+  .item-wrap {
+    height: 230px !important;
+  }
+}
+.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>

src/views/VideoPlay/hComponents/ShopCar.vue

@@ -2,7 +2,7 @@
   <!-- <p class="kajuan" @click="showOwnDiscount">我的卡券</p> -->
   <div class="list-wrap">
     <div v-for="(item, index) in cartVOList || []" :key="index">
-      <ProductItem
+      <carItem
         class="mb20"
         v-if="item.productType === 21"
         :item="{
@@ -11,16 +11,15 @@
           content: item.productDesc,
           productType: item.productType,
           url: item.url,
+          coverImgUrl: item.coverImgUrl,
         }"
-        :isShopCar="true"
-      />
+        :isShopCar="true" />
       <ServerItem
         v-else
         :item="item"
         :liveProductId="route.query.id"
         :tgId="tgId"
-        :isShopCar="true"
-      />
+        :isShopCar="true" />
     </div>
 
     <Empty text="暂无甄选服务～" v-if="!cartVOList || !cartVOList.length" />
@@ -35,7 +34,7 @@ import ServerItem from "@/components/ServerItem.vue"
 import Empty from "@/components/Empty.vue"
 import { queryCartList } from "@/api/video"
 import emitter from "@/utils/emitter"
-import ProductItem from "../components/ProductItem.vue"
+import carItem from "../components/carItem.vue"
 import OwnDiscount from "../components/OwnDiscount.vue"
 import useDisableScroll from "@/hooks/useDisableScroll"
 const { addScrollEvent } = useDisableScroll()