From a28b79ba47d0766b87969a625e1a30e926093a59 Mon Sep 17 00:00:00 2001
From: wei <1937506227@qq.com>
Date: Fri, 24 Oct 2025 14:44:58 +0800
Subject: [PATCH] =?UTF-8?q?feat(home):=20=E6=96=B0=E5=A2=9E=E8=B5=B0?=
 =?UTF-8?q?=E8=BF=9B=E8=8F=9C=E5=A4=A7=E7=8E=8B=E9=A1=B5=E9=9D=A2=E5=8F=8A?=
 =?UTF-8?q?=E7=9B=B8=E5=85=B3=E5=8A=9F=E8=83=BD=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加走进菜大王主页面及详情页，支持图片和视频展示
- 实现视频播放和图片预览功能
- 新增相关API接口和样式文件
- 优化页面布局和交互体验
---
 libs/api/index.js                       |  40 +++++-
 pages/home/announcement.vue             |  52 ++++++++
 pages/home/enterKing/enterKing.scss     |  81 ++++++++++++
 pages/home/enterKing/enterKing.vue      | 160 ++++++++++++++++++++++++
 pages/home/enterKing/enterKingInfo.scss |   9 ++
 pages/home/enterKing/enterKingInfo.vue  | 115 +++++++++++++++++
 static/enterVegetableKingInfo/video.png | Bin 0 -> 1897 bytes
 7 files changed, 456 insertions(+), 1 deletion(-)
 create mode 100644 pages/home/announcement.vue
 create mode 100644 pages/home/enterKing/enterKing.scss
 create mode 100644 pages/home/enterKing/enterKing.vue
 create mode 100644 pages/home/enterKing/enterKingInfo.scss
 create mode 100644 pages/home/enterKing/enterKingInfo.vue
 create mode 100644 static/enterVegetableKingInfo/video.png

diff --git a/libs/api/index.js b/libs/api/index.js
index 6e67490..6f2538f 100644
--- a/libs/api/index.js
+++ b/libs/api/index.js
@@ -398,7 +398,7 @@ export function getMenuProductsApi(params = {}) {
  */
 export function newMenusToCartApi(data = {}) {
   return request({
-    errorMessage: "添加菜谱到购物车",
+    errorMessage: "菜谱",
     method: "POST",
     data,
     header: {
@@ -407,3 +407,41 @@ export function newMenusToCartApi(data = {}) {
     url: "/setmeal/addCaiPu.do",
   });
 }
+
+// //
+// module.exports.getJoinEnterprise = function (postData, success) {
+//   request('/company/searchCompanyInfo.do', 'GET', postData, success)
+// }
+
+/**
+ * 获取加入企业列表
+ * @param {*} params
+ */
+export function getJoinEnterpriseApi(params = {}) {
+  return request({
+    errorMessage: "企业列表",
+    method: "GET",
+    params,
+    url: "/company/searchCompanyInfo.do",
+  });
+}
+
+// //走进菜大王列表数据
+// module.exports.getNewsList = function (postData, success) {
+//   request('/webAboutUs/getList.do', 'get', postData, success)
+// }
+
+/**
+ * 获取走进菜大王列表
+ */
+export function getNewsListApi(params = {}) {
+  return request({
+    errorMessage: "菜大王列表",
+    method: "GET",
+    params,
+    url: "/webAboutUs/getList.do",
+  });
+}
+// odule.exports.addCart = function (postData, success) {
+//   request('/cart/add.do', 'POST', postData, success);
+// };
diff --git a/pages/home/announcement.vue b/pages/home/announcement.vue
new file mode 100644
index 0000000..3a1ba5c
--- /dev/null
+++ b/pages/home/announcement.vue
@@ -0,0 +1,52 @@
+<script setup>
+import { onLoad } from "@dcloudio/uni-app";
+import { ref } from "vue";
+import navv from "@/components/nav/nav.vue";
+import topTitle from "@/components/topTitle/topTitle.vue";
+import { getNoticesApi } from "@/libs/api";
+
+const notices = ref([]);
+
+async function getList() {
+  const res = await getNoticesApi();
+  if (res.code !== "0") {
+    return;
+  }
+  notices.value = res.data;
+}
+
+onLoad(() => {
+  getList();
+});
+</script>
+
+<template>
+  <navv>
+    <template #default="{ screen, status, menu }">
+      <topTitle title="通知公告" />
+
+      <view
+        :style="{
+          borderTop: 'solid 1px #F0f0f0',
+          width: '100%',
+          height: `${screen - status - (menu || 0)}px`,
+          overflowY: 'auto',
+        }"
+      >
+        <view v-for="(item, index) in notices" :key="index" class="notice">
+          <rich-text :nodes="item" />
+        </view>
+      </view>
+    </template>
+  </navv>
+</template>
+
+<style lang="scss" scoped>
+.notice{
+  padding: 30rpx 30rpx;
+  border-bottom: solid 20rpx #f0f0f0;
+  line-height: 48rpx;
+  font-size: 32rpx;
+  /* background: #ffffff; */
+}
+</style>
diff --git a/pages/home/enterKing/enterKing.scss b/pages/home/enterKing/enterKing.scss
new file mode 100644
index 0000000..51c1147
--- /dev/null
+++ b/pages/home/enterKing/enterKing.scss
@@ -0,0 +1,81 @@
+.grid-item{
+  width: 33.33333333333%;
+  /* height: 63.5vw; */
+  height: calc(100% /3);
+  float: left;
+  margin-bottom: 10rpx;
+}
+
+.grid-item .box{
+  position: relative;
+}
+
+.grid-item .text-box{
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  background-image: linear-gradient(#00000000, rgba(0, 0, 0, 0.842), rgba(0, 0, 0, 0.842));
+  padding: 30rpx 10rpx 20rpx 10rpx;
+  box-sizing: border-box;
+}
+
+.grid-item .text-box .text{ 
+  font-size: 26rpx;
+  color: #fff;
+  text-align: center;
+}
+
+.play_btn{
+  position:absolute;
+  top: 50%;
+  margin-top: -20px;
+  left: 50%;
+  margin-left: -20px;
+  width: 40px;
+  height: 40px;
+}
+.play_btn image{
+  width: 100%;
+  height: 100%;
+}
+
+.title{
+  /* background: #fff; */
+  padding: 30rpx 15rpx;
+  /* background: #f1f1f1; */
+  font-size: 40rpx;
+  color: #151515;
+  /* margin-bottom: 30rpx; */
+  display: flex;
+  align-items: center;
+  /* border-bottom: 1px solid #f1f1f1; */
+}
+
+.title image{
+  width: 50rpx;
+  height: 30rpx;
+  margin-right: 20rpx;
+}
+
+.title text{
+  position: relative;
+  padding-left: 20rpx;
+}
+
+.title text::after{
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 0%;
+  width: 6rpx;
+  height: 50%;
+  border-radius: 14rpx;
+  background-color: #05B359;
+  transform: translateY(-50%);
+}
+
+page{
+  /* background: #f5f5f5; */
+}
diff --git a/pages/home/enterKing/enterKing.vue b/pages/home/enterKing/enterKing.vue
new file mode 100644
index 0000000..87867f8
--- /dev/null
+++ b/pages/home/enterKing/enterKing.vue
@@ -0,0 +1,160 @@
+<script setup>
+import { onLoad } from "@dcloudio/uni-app";
+import { ref } from "vue";
+import navv from "@/components/nav/nav.vue";
+import topTitle from "@/components/topTitle/topTitle.vue";
+import { getNewsListApi } from "@/libs/api";
+
+const lists = ref([]);
+const currentPage = ref(1);
+const finished = ref(false);
+const images = ref([]);// 图片
+const videos = ref([]);// 视频
+
+async function loadList() {
+  if (finished.value) {
+    return;
+  }
+  const res = await getNewsListApi({
+    current: currentPage.value,
+    size: 21,
+    title: "",
+  });
+  if (res.code !== "0") {
+    return;
+  }
+
+  res.data.forEach((each) => {
+    if (each.fileType == 2 && each.content.includes(",")) {
+      each.content = each.content.split(",");
+    }
+    if (each.fileType == 1) {
+      videos.value.push(each);
+    }
+    else {
+      images.value.push(each);
+    }
+  });
+
+  lists.value = [...lists.value, ...res.data];
+
+  if (lists.value.length === res.total) {
+    finished.value = true;
+  }
+  else {
+    currentPage.value++;
+  }
+}
+
+function gotoInfoPage(item) {
+  if (item.fileType == 1) {
+    // 收集所有视频内容，当前项排第一，其余按遍历顺序追加
+    item.content = [
+      item.content,
+      ...lists.value
+        .filter(data => data.fileType == 1 && data.content !== item.content)
+        .map(data => data.content),
+    ];
+  }
+  uni.navigateTo({
+    url: `./enterKingInfo?data=${JSON.stringify(item)}`,
+  });
+}
+
+onLoad(() => {
+  loadList();
+});
+</script>
+
+<template>
+  <navv>
+    <template #default="{ content, screen, status, menu }">
+      <topTitle title="走进菜大王" />
+
+      <scroll-view
+        :scroll-y="true"
+        :style="{
+          width: '100%',
+          height: `${screen - status - (menu || 0)}px`,
+          overflowY: 'auto',
+        }"
+        @scrolltolower="loadList"
+      >
+        <view class="title">
+          <text>厂家合作</text>
+        </view>
+
+        <view style="overflow: hidden;padding: 0 20rpx;">
+          <view
+            v-for="(item, index) in images"
+            :key="index"
+            class="grid-item"
+            :style="{ height: `calc(${content / 3.1}px - 10rpx)` }"
+            @tap="() => gotoInfoPage(item)"
+          >
+            <view style="margin-right: 10rpx;height: 100%;" class="box">
+              <view v-if="item.fileType == 2" style="background: #333333;height: 100%;">
+                <image style="width: 100%; height:100%" mode="aspectFill" :src="item.content[0]" />
+              </view>
+
+              <view
+                v-if="item.fileType == 1"
+                style="position:relative;width:100%;height: 100%;background: #333333;"
+              >
+                <image style="width: 100%; height:100%" mode="aspectFit" :src="item.imageUrl" />
+                <view class="play_btn">
+                  <image src="/static/enterVegetableKingInfo/video.png" />
+                </view>
+              </view>
+
+              <view class="text-box">
+                <view class="text">
+                  {{ item.title }}
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+
+        <view class="title" style="margin-top: 30rpx;">
+          <text>菜大王视频</text>
+        </view>
+
+        <view style="overflow: hidden;padding: 0 20rpx;">
+          <view
+            v-for="(item, index) in videos"
+            :key="index"
+            class="grid-item"
+            :data-item="item"
+            :style="{ height: `${content / 3.1}px` }"
+            @tap="() => gotoInfoPage(item)"
+          >
+            <view style="margin-right: 10rpx;height: 100%;" class="box">
+              <view v-if="item.fileType == 2" style="background: #333333;height: 100%;">
+                <image style="width: 100%; height:100%" mode="aspectFit" :src="item.content[0]" />
+              </view>
+              <view
+                v-if="item.fileType == 1"
+                style="position:relative;width:100%;height: 100%;background: #333333;"
+              >
+                <image style="width: 100%; height:100%" mode="aspectFill" :src="item.imageUrl" />
+                <view class="play_btn">
+                  <image src="/static/enterVegetableKingInfo/video.png" />
+                </view>
+              </view>
+              <view class="text-box">
+                <view class="text">
+                  {{ item.title }}
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </scroll-view>
+    </template>
+  </navv>
+</template>
+
+<style scoped lang="scss">
+@import "./enterKing.scss";
+</style>
diff --git a/pages/home/enterKing/enterKingInfo.scss b/pages/home/enterKing/enterKingInfo.scss
new file mode 100644
index 0000000..c8ded51
--- /dev/null
+++ b/pages/home/enterKing/enterKingInfo.scss
@@ -0,0 +1,9 @@
+#video_box{
+  width: 100%;
+  height: 100%;
+}
+
+video{
+  width: 100%;
+  height: 100%;
+}
\ No newline at end of file
diff --git a/pages/home/enterKing/enterKingInfo.vue b/pages/home/enterKing/enterKingInfo.vue
new file mode 100644
index 0000000..4237f73
--- /dev/null
+++ b/pages/home/enterKing/enterKingInfo.vue
@@ -0,0 +1,115 @@
+<script setup>
+import { onLoad } from "@dcloudio/uni-app";
+import { ref } from "vue";
+import navv from "@/components/nav/nav.vue";
+import topTitle from "@/components/topTitle/topTitle.vue";
+
+const type = ref("");
+const result = ref([]);
+const videoIndex = ref(0); // 视频滑块index
+
+onLoad((options) => {
+  try {
+    const data = JSON.parse(options.data);
+    result.value = data.content;
+    type.value = data.fileType;
+    const videoContext = uni.createVideoContext(`myvideo${videoIndex.value}`);
+    videoContext.play();
+    console.log(type.value, result.value);
+  }
+  catch (err) {
+    console.error(err);
+  }
+});
+
+function swiperchange(e) {
+  videoIndex.value = e.detail.current;
+  for (let index = 0; index < this.data.result.length; index++) {
+    if (e.detail.current == index) {
+      const videoContext = uni.createVideoContext(`myvideo${index}`);
+      videoContext.play();
+    }
+    else {
+      const videoContexta = uni.createVideoContext(`myvideo${index}`);
+      videoContexta.pause();
+    }
+  }
+}
+
+function preview(index) {
+  // const index = e.currentTarget.dataset.index;
+  uni.previewImage({
+    current: result.value[index], // 当前显示图片的http链接
+    urls: result.value, // 需要预览的图片http链接列表
+  });
+}
+</script>
+
+<template>
+  <navv>
+    <template #default="{ screen, status, menu }">
+      <topTitle title="菜大王" />
+
+      <view
+        :style="{
+          height: `${screen - status - (menu || 0)}px`,
+          overflowY: 'auto',
+        }"
+      >
+        <swiper
+          v-if="type == 2"
+          :style="{
+            height: '100%',
+            // height: 'calc(100% - 40rpx)',
+            background: '#000000',
+            paddingBottom: '40rpx',
+          }"
+          :indicator-dots="true"
+          indicator-color="rgba(255, 255, 255, .8)"
+          autoplay
+          interval="3000"
+          duration="200"
+        >
+          <block
+            v-for="(item, index) in result"
+            :key="index"
+          >
+            <swiper-item
+              @tap="() => preview(index)"
+            >
+              <image style="width: 100%; height:100%" mode="aspectFit" :src="item" />
+            </swiper-item>
+          </block>
+        </swiper>
+
+        <swiper
+          v-if="type == 1"
+          :style="{
+            height: 'calc(100% - 40rpx)',
+            background: '#000000',
+            paddingBottom: '40rpx',
+          }"
+          vertical
+          circular
+          @change="(e) => swiperchange(e)"
+        >
+          <block
+            v-for="(item, index) in result"
+            :key="index"
+          >
+            <swiper-item>
+              <video :id="`myvideo${index}`" :src="item" loop />
+            </swiper-item>
+          </block>
+        </swiper>
+      </view>
+    </template>
+  </navv>
+
+<!-- <video id="video_box" autoplay
+ wx:if="{{type==1}}" src="{{result}}"></video> -->
+</template>
+
+<style scoped lang="scss">
+@import "./enterKingInfo.scss";
+</style>
diff --git a/static/enterVegetableKingInfo/video.png b/static/enterVegetableKingInfo/video.png
new file mode 100644
index 0000000000000000000000000000000000000000..d885a3a8e02c02340b80c9812009fa3c6df9bc46
GIT binary patch
literal 1897
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

literal 0
HcmV?d00001