页面提交

2025-08-30 11:05:15 +08:00 · 2025-08-30 11:05:15 +08:00 · 527cf837fc
commit 527cf837fc
parent 0bd3d93b39
9 changed files with 357 additions and 129 deletions
--- a/env/.env
+++ b/env/.env
@ -13,6 +13,8 @@ VITE_LOGIN_URL = '/pages/login/index'
 VITE_SERVER_BASEURL = 'https://test.shop.lihaink.cn/'
 VITE_UPLOAD_BASEURL = 'https://test.shop.lihaink.cn//upload'

+VITE_SHOP_SERVER_BASEURL = 'https://shop.lihaink.cn'
+
 # 有些同学可能需要在微信小程序里面根据 develop、trial、release 分别设置上传地址，参考代码如下。
 # 下面的变量如果没有设置，会默认使用 VITE_SERVER_BASEURL or VITE_UPLOAD_BASEURL
 VITE_SERVER_BASEURL__WEIXIN_DEVELOP = 'https://test.shop.lihaink.cn/'
--- a/src/pages.json
+++ b/src/pages.json
@ -112,13 +112,21 @@
      }
    },
    {
-      "path": "pages/web_view/index",
+      "path": "pages/web_view/h5",
      "type": "page",
      "layout": "heardbg",
      "style": {
        "navigationBarTitleText": "",
        "navigationBarTextStyle": "white"
      }
+    },
+    {
+      "path": "pages/web_view/index",
+      "type": "page",
+      "layout": "heardbg",
+      "style": {
+        "navigationBarTitleText": ""
+      }
    }
  ],
  "subPackages": [
--- a/src/pages/about/index.vue
+++ b/src/pages/about/index.vue
@ -12,10 +12,67 @@

 <template>
  <view class="">
-    <view class="pt-3 background_home">
-      <!-- 顶部搜索栏 -->
-      <wd-search hide-cancel placeholder-left placeholder="请输入内容"></wd-search>
-      <!-- 横幅广告 -->
+    <view class="background_home">
+      <view class=" ">
+        <view class=" " style="" @click="more">
+          <wd-card custom-class="card-content">
+            <view class="relative" style="height: 380rpx">
+              <wd-img
+                radius="10rpx"
+                :width="'100%'"
+                :height="'100%'"
+                src="https://bpic.588ku.com/back_list_pic/23/05/17/75e92f4e681efeb526f7d8603199ca11.jpg"
+              />
+              <view
+                class="m-2 p-2 absolute bottom-0 text-center left-0 right-0 text-white bg-gray-300 bg-opacity-5"
+                style="backdrop-filter: blur(2rpx); border-radius: 10rpx"
+              >
+                <text class="block font-size-4 text-left">三江区街道</text>
+                <text class="block font-size-3 text-left">
+                  因举办古韵悠然的传统民俗文化节热度飙升，在这里，你能感受到乡村文化的深厚底蕴和无穷魅力。
+                </text>
+              </view>
+            </view>
+          </wd-card>
+        </view>
+      </view>
+
+      <view class="p-2">
+        <scroll-view scroll-x="true" class="scroll-view-container">
+          <wd-button
+            v-for="item in [
+              {
+                name: '吃',
+                id: 1,
+                icon: 'https://bpic.588ku.com/back_list_pic/23/05/17/75e92f4e681efeb526f7d8603199ca11.jpg',
+              },
+              {
+                name: '住',
+                id: 2,
+                icon: 'https://www.beijing.gov.cn/renwen/bjgk/mygk/myfg/202208/W020220812574023612181.jpg',
+              },
+              {
+                name: '玩',
+                id: 3,
+                icon: 'https://www.keaitupian.cn/cjpic/frombd/2/253/1659552792/3869332496.jpg',
+              },
+              {
+                name: '购',
+                id: 4,
+                icon: 'https://aerial.scol.com.cn/items/202001/200102174156554000120F0A.jpg',
+              },
+            ]"
+            :type="item.id === currentTab ? 'primary' : 'warning'"
+            size="large"
+            @click="changeTab(item)"
+            :custom-style="`background-image: url('${item.icon}'); background-size: cover;border-radius: 10rpx;`"
+          >
+            {{ item.name }}
+          </wd-button>
+        </scroll-view>
+      </view>
+      <!-- <wd-search hide-cancel placeholder-left placeholder="请输入内容"></wd-search>
+
      <view class="relative h-40 p-2">
        <wd-img
          radius="10rpx"
@ -23,61 +80,9 @@
          :height="'100%'"
          src="https://img95.699pic.com/photo/50384/2866.jpg_wh860.jpg"
        />
-        <!-- <view
-          class="absolute bottom-4 left-0 right-0 text-center text-white bg-black bg-opacity-50 py-2"
-        >
-          <text class="text-xl">新鲜蔬菜，自然生态健康美味</text>
-          <text class="block text-sm">同城一小时新鲜送到家</text>
-        </view> -->
-      </view>
+      </view> -->
    </view>

-    <wd-grid class="p-2" bg-color="rgba(0, 0, 0, 0)">
-      <view
-        v-for="item in [
-          { name: '乡村振兴', icon: 'home', color: 'green' },
-          { name: '公益助力', icon: 'heart', color: 'blue' },
-          { name: '县域好货', icon: 'gift', color: 'orange' },
-          { name: '品质保障', icon: 'secured', color: 'red' },
-        ]"
-      >
-        <wd-grid-item use-slot>
-          <wd-tag
-            custom-class="space"
-            bg-color="rgba(0, 0, 0, 0)"
-            color="#595959"
-            mark
-            use-icon-slot
-          >
-            <text>{{ item.name }}</text>
-            <template #icon>
-              <wd-icon size="32rpx" color="#595959" :name="item.icon" />
-            </template>
-          </wd-tag>
-        </wd-grid-item>
-      </view>
-    </wd-grid>
-    <wd-card>
-      <wd-grid :gutter="10" :column="4" custom-class=" ">
-        <view
-          @click="more"
-          v-for="item in [
-            { name: '村庄服务', icon: '/static/icons/village_service.png', color: 'green' },
-            { name: '农资服务', icon: '/static/icons/agriculture_service.png', color: 'blue' },
-            { name: '农技课堂', icon: '/static/icons/agriculture_course.png', color: 'orange' },
-            { name: '乡村电商', icon: '/static/icons/rural_ecommerce.png', color: 'red' },
-          ]"
-        >
-          <wd-grid-item use-slot>
-            <view class="detail-box" style="border: none; padding: 0; margin: 0">
-              <wd-img radius="10rpx" :width="'100rpx'" :height="'100rpx'" :src="item.icon" />
-              <view class="pt-2 pb-2 text-center text-gray-500 font-size-3">{{ item.name }}</view>
-            </view>
-          </wd-grid-item>
-        </view>
-      </wd-grid>
-    </wd-card>
-
    <wd-row class="pe-2 ps-2">
      <wd-col :span="12">
        <view class="detail-box m-1" style="" @click="moreVillage">
--- a/src/pages/service/index.vue
+++ b/src/pages/service/index.vue
@ -20,52 +20,116 @@ const { safeAreaInsets } = uni.getSystemInfoSync()
 //   console.log('oxlint')
 // }
 // testOxlint('oxlint')
-console.log('about')
+// console.log('about')
+function more(url) {
+  uni.navigateTo({
+    url: `/pages/web_view/index?local_url=${url}`,
+  })
+}
 </script>

 <template>
  <view class="">
-    <view class="p-2 background_home">
-      <wd-card>
-        <view class="p-2">
-          <wd-card custom-class="background-none">
-            <template #title>
-              <view class="title">
-                <view>
-                  <text class="text-xl text-sm font-size-4">看看附近</text>
-                  <text class="ps-2 text-xl text-sm font-size-3 color-gray-500">
-                    好物上新季，特产抢先购
-                  </text>
-                </view>
-                <!-- <wd-button type="primary" size="small">
+    <view class="background_home">
+      <view class="relative h-50">
+        <wd-img
+          radius="10rpx"
+          :width="'100%'"
+          :height="'100%'"
+          src="https://meizi-chao-pub.8531.cn/1813416312440430594_720px.jpg"
+        />
+        <view
+          class="absolute bottom-4 left-0 right-0 text-left text-white bg-black bg-opacity-10 ps-4"
+        >
+          <text class="font-size-8">数字乡村</text>
+          <text class="block font-size-4 pt-2">同城一小时新鲜送到家</text>
+        </view>
+      </view>
+      <view class="p-2">
+        <wd-card>
+          <view class="p-2">
+            <wd-card custom-class="background-none">
+              <template #title>
+                <view class="title">
+                  <view>
+                    <text class="text-xl text-sm font-size-4">看看附近</text>
+                    <text class="ps-2 text-xl text-sm font-size-3 color-gray-500">
+                      好物上新季，特产抢先购
+                    </text>
+                  </view>
+                  <!-- <wd-button type="primary" size="small">
                  <wd-text text="更多" color="#ffffff" size="24rpx"></wd-text>
                </wd-button> -->
-              </view>
-            </template>
-          </wd-card>
-        </view>
-        <wd-grid :gutter="2" :column="4">
-          <view
-            @click="more"
-            v-for="item in [
-              { name: '特产产品', icon: '/static/icons/village_service.png', color: 'green' },
-              { name: '特色美食', icon: '/static/icons/agriculture_service.png', color: 'blue' },
-              { name: '当季产品', icon: '/static/icons/agriculture_course.png', color: 'orange' },
-              { name: '美丽乡村', icon: '/static/icons/rural_ecommerce.png', color: 'red' },
-              { name: '景区景色', icon: '/static/icons/rural_ecommerce.png', color: 'red' },
-            ]"
-          >
-            <wd-grid-item use-slot>
-              <view class="p-2">
-                <wd-img radius="10rpx" :width="'100rpx'" :height="'100rpx'" :src="item.icon" />
-                <view class="ps-2 pt-2 pb-2 text-center text-gray-500 font-size-3">
-                  {{ item.name }}
                </view>
-              </view>
-            </wd-grid-item>
+              </template>
+            </wd-card>
          </view>
-        </wd-grid>
-      </wd-card>
+          <wd-grid :gutter="2" :column="4">
+            <view
+              @click="more(item.url)"
+              v-for="item in [
+                {
+                  name: '租赁服务',
+                  url: '/pages/activity/lease/index',
+                  icon: '/static/icons/village_service.png',
+                  color: 'green',
+                },
+                {
+                  name: '农事服务',
+                  url: '/pages/store/home/index?id=13',
+                  icon: '/static/icons/agriculture_service.png',
+                  color: 'blue',
+                },
+                {
+                  name: '店铺街',
+                  url: '/pages/points_mall/index',
+                  icon: '/static/icons/agriculture_course.png',
+                  color: 'orange',
+                },
+                {
+                  name: '特产产品',
+                  url: '/pages/activity/lease/index',
+                  icon: '/static/icons/village_service.png',
+                  color: 'green',
+                },
+                {
+                  name: '特色美食',
+                  url: '/pages/store/home/index?id=13',
+                  icon: '/static/icons/agriculture_service.png',
+                  color: 'blue',
+                },
+                {
+                  name: '当季产品',
+                  url: '/pages/activity/lease/index',
+                  icon: '/static/icons/agriculture_course.png',
+                  color: 'orange',
+                },
+                {
+                  name: '美丽乡村',
+                  url: '/pages/activity/lease/index',
+                  icon: '/static/icons/rural_ecommerce.png',
+                  color: 'red',
+                },
+                {
+                  name: '景区景色',
+                  url: '/pages/activity/lease/index',
+                  icon: '/static/icons/rural_ecommerce.png',
+                  color: 'red',
+                },
+              ]"
+            >
+              <wd-grid-item use-slot>
+                <view class="p-2">
+                  <wd-img radius="10rpx" :width="'100rpx'" :height="'100rpx'" :src="item.icon" />
+                  <view class="ps-2 pt-2 pb-2 text-center text-gray-500 font-size-3">
+                    {{ item.name }}
+                  </view>
+                </view>
+              </wd-grid-item>
+            </view>
+          </wd-grid>
+        </wd-card>
+      </view>
    </view>
    <view class="p-2">
      <wd-card>
@ -90,11 +154,36 @@ console.log('about')
          <view
            @click="more"
            v-for="item in [
-              { name: '特产产品', icon: '/static/icons/village_service.png', color: 'green' },
-              { name: '特色美食', icon: '/static/icons/agriculture_service.png', color: 'blue' },
-              { name: '当季产品', icon: '/static/icons/agriculture_course.png', color: 'orange' },
-              { name: '美丽乡村', icon: '/static/icons/rural_ecommerce.png', color: 'red' },
-              { name: '景区景色', icon: '/static/icons/rural_ecommerce.png', color: 'red' },
+              {
+                name: '特产产品',
+                url: '/pages/activity/lease/index',
+                icon: '/static/icons/village_service.png',
+                color: 'green',
+              },
+              {
+                name: '特色美食',
+                url: '/pages/activity/lease/index',
+                icon: '/static/icons/agriculture_service.png',
+                color: 'blue',
+              },
+              {
+                name: '当季产品',
+                url: '/pages/activity/lease/index',
+                icon: '/static/icons/agriculture_course.png',
+                color: 'orange',
+              },
+              {
+                name: '美丽乡村',
+                url: '/pages/activity/lease/index',
+                icon: '/static/icons/rural_ecommerce.png',
+                color: 'red',
+              },
+              {
+                name: '景区景色',
+                url: '/pages/activity/lease/index',
+                icon: '/static/icons/rural_ecommerce.png',
+                color: 'red',
+              },
            ]"
          >
            <wd-grid-item use-slot>
@ -132,11 +221,36 @@ console.log('about')
          <view
            @click="more"
            v-for="item in [
-              { name: '特产产品', icon: '/static/icons/village_service.png', color: 'green' },
-              { name: '特色美食', icon: '/static/icons/agriculture_service.png', color: 'blue' },
-              { name: '当季产品', icon: '/static/icons/agriculture_course.png', color: 'orange' },
-              { name: '美丽乡村', icon: '/static/icons/rural_ecommerce.png', color: 'red' },
-              { name: '景区景色', icon: '/static/icons/rural_ecommerce.png', color: 'red' },
+              {
+                name: '特产产品',
+                url: '/pages/activity/lease/index',
+                icon: '/static/icons/village_service.png',
+                color: 'green',
+              },
+              {
+                name: '特色美食',
+                url: '/pages/activity/lease/index',
+                icon: '/static/icons/agriculture_service.png',
+                color: 'blue',
+              },
+              {
+                name: '当季产品',
+                url: '/pages/activity/lease/index',
+                icon: '/static/icons/agriculture_course.png',
+                color: 'orange',
+              },
+              {
+                name: '美丽乡村',
+                url: '/pages/activity/lease/index',
+                icon: '/static/icons/rural_ecommerce.png',
+                color: 'red',
+              },
+              {
+                name: '景区景色',
+                url: '/pages/activity/lease/index',
+                icon: '/static/icons/rural_ecommerce.png',
+                color: 'red',
+              },
            ]"
          >
            <wd-grid-item use-slot>
--- a/src/pages/web_view/h5.vue
+++ b/src/pages/web_view/h5.vue
@ -0,0 +1,95 @@
+<route lang="json5" type="page">
+{
+  layout: 'heardbg',
+  style: {
+    navigationBarTitleText: '',
+
+    navigationBarTextStyle: 'white',
+  },
+}
+</route>
+<!-- navigationStyle: 'custom', -->
+<template>
+  <CustomNavbar :title="title">
+    <template #right>
+      <!-- <wd-icon name="home" @click="handleSearch" /> -->
+    </template>
+  </CustomNavbar>
+  <!-- <view class="content"> -->
+  <web-view class="web-view" :webview-styles="webviewStyles" :src="local_url"></web-view>
+  <!-- </view> -->
+</template>
+<!-- :style="{ width: windowW + 'px', height: windowH + 'px' }" -->
+<script>
+import { defineComponent, computed } from 'vue'
+import CustomNavbar from '@/components/CustomNavbar.vue'
+import { getUrlCrmeb } from '@/utils'
+
+export default defineComponent({
+  data() {
+    return {
+      windowH: 0,
+      windowW: 0,
+      local_url: '',
+      title: '',
+      webviewStyles: {
+        progress: {
+          color: 'transparent',
+        },
+      },
+    }
+  },
+  computed: {
+    navHeight() {
+      const { safeAreaInsets } = uni.getSystemInfoSync()
+      return (safeAreaInsets?.top || 0) + 44
+    },
+  },
+  onLoad(option) {
+    uni.setNavigationBarTitle({
+      title: '商城', // 运行时修改标题
+    })
+
+    this.local_url = decodeURIComponent(getUrlCrmeb() + option.local_url)
+
+    this.title = option.title || '商城首页'
+
+    try {
+      const res = uni.getSystemInfoSync()
+      this.windowW = res.windowWidth
+      this.windowH = res.windowHeight - this.navHeight // 减去导航栏的高度
+    } catch (e) {
+      console.error('获取系统信息失败:', e)
+      // 可以根据实际情况在这里添加默认值
+      this.windowW = 375 // 假设默认宽度为375px
+      this.windowH = 623 // 假设默认高度为667px - 44px (导航栏高度)
+    }
+  },
+  methods: {
+    handleSearch() {
+      console.log('search')
+      // 跳转到搜索页面
+      uni.navigateTo({ url: '/pages/search/index' })
+    },
+  },
+})
+</script>
+
+<style scoped>
+/* 根据需要添加样式 */
+.content {
+  position: relative;
+  width: 100%;
+  /* height: calc(100vh - 44px); */
+  overflow: hidden; /* 移除滚动条 */
+}
+
+.web-view {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden; /* 移除滚动条 */
+}
+</style>
--- a/src/pages/web_view/index.vue
+++ b/src/pages/web_view/index.vue
@ -3,18 +3,16 @@
  layout: 'heardbg',
  style: {
    navigationBarTitleText: '',
-
-    navigationBarTextStyle: 'white',
  },
 }
 </route>
 <!-- navigationStyle: 'custom', -->
 <template>
-  <CustomNavbar :title="title">
+  <!-- <CustomNavbar :title="title">
    <template #right>
-      <!-- <wd-icon name="home" @click="handleSearch" /> -->
+      <wd-icon name="home" @click="handleSearch" />
    </template>
-  </CustomNavbar>
+  </CustomNavbar> -->
  <!-- <view class="content"> -->
  <web-view class="web-view" :webview-styles="webviewStyles" :src="local_url"></web-view>
  <!-- </view> -->
@ -23,6 +21,7 @@
 <script>
 import { defineComponent, computed } from 'vue'
 import CustomNavbar from '@/components/CustomNavbar.vue'
+import { getUrlCrmeb } from '@/utils'

 export default defineComponent({
  data() {
@ -45,12 +44,11 @@ export default defineComponent({
    },
  },
  onLoad(option) {
+    this.local_url = decodeURIComponent(getUrlCrmeb() + option.local_url)
+    this.title = option.title || ''
    uni.setNavigationBarTitle({
-      title: '商城', // 运行时修改标题
+      title: this.title, // 运行时修改标题
    })
-    this.local_url = decodeURIComponent(option.local_url)
-    this.title = option.title || '商城首页'
-
    try {
      const res = uni.getSystemInfoSync()
      this.windowW = res.windowWidth
--- a/src/style/index.scss
+++ b/src/style/index.scss
@ -9,15 +9,15 @@
  color: red;
 }
 .default-color {
-  color: #70cd6aff;
+  color: #87d76b;
 }

 :root,
 page {
  background-color: $uni-bg-color;
  // 修改按主题色
-  --wot-color-theme: #70cd6aff;
-  --wot-button-primary-bg-color: #70cd6aff; // 按钮默认颜色
+  --wot-color-theme: #87d76b;
+  --wot-button-primary-bg-color: #87d76b; // 按钮默认颜色
  --wot-grid-item-padding: 0rpx 10rpx; //gid布局
  --wot-search-input-height: 60rpx; //搜索框高度

@ -31,7 +31,7 @@ page {
  --wot-grid-item-padding: 0px;

  // background-color: var(--wot-grid-item-bg, var(--wot-color-white, rgb(255, 255, 255)));
-  // --wot-segmented-item-bg-color: #70CD6AFF; //wd-segmentedb 背景颜色
+  // --wot-segmented-item-bg-color: #87d76b; //wd-segmentedb 背景颜色
 }
 .wd-card {
  margin-bottom: 0px !important;
@ -41,12 +41,12 @@ page {
 }
 //渐变背景
 .background_home {
-  background: linear-gradient(to bottom, #70cd6aff, #f1f1f1); /* 垂直渐变 */
+  background: linear-gradient(to bottom, #87d76b, #f1f1f1); /* 垂直渐变 */
 }

 //渐变背景
 .background_home_card {
-  background: linear-gradient(to bottom, #f1f1f1, #70cd6aff); /* 垂直渐变 */
+  background: linear-gradient(to bottom, #f1f1f1, #87d76b); /* 垂直渐变 */
 }

 .scroll-view-container {
@ -62,7 +62,7 @@ page {
  position: relative;
 }
 // .wd-segmented__item.is-active {
-//   background: #70CD6AFF !important;
+//   background: #87d76b !important;
 //   color: #fff !important;
 // }

--- a/src/uni.scss
+++ b/src/uni.scss
@ -16,9 +16,9 @@
 /* 颜色变量 */

 /* 行为相关颜色 */
-$uni-color-default: #70cd6aff;
+$uni-color-default: #87d76b;
 $uni-color-primary: #007aff;
-$uni-color-success: #70cd6aff;
+$uni-color-success: #87d76b;
 $uni-color-warning: #f0ad4e;
 $uni-color-error: #dd524d;

--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@ -66,8 +66,8 @@ export function getUrlObj(url: string) {
 export function getAllPages(key = 'needLogin') {
  // 这里处理主包
  const mainPages = pages
-    .filter(page => !key || page[key])
-    .map(page => ({
+    .filter((page) => !key || page[key])
+    .map((page) => ({
      ...page,
      path: `/${page.path}`,
    }))
@ -79,7 +79,7 @@ export function getAllPages(key = 'needLogin') {
    const { root } = subPageObj

    subPageObj.pages
-      .filter(page => !key || page[key])
+      .filter((page) => !key || page[key])
      .forEach((page: { path: string } & Record<string, any>) => {
        subPages.push({
          ...page,
@ -96,13 +96,13 @@ export function getAllPages(key = 'needLogin') {
 * 得到所有的需要登录的 pages，包括主包和分包的
 * 只得到 path 数组
 */
-export const getNeedLoginPages = (): string[] => getAllPages('needLogin').map(page => page.path)
+export const getNeedLoginPages = (): string[] => getAllPages('needLogin').map((page) => page.path)

 /**
 * 得到所有的需要登录的 pages，包括主包和分包的
 * 只得到 path 数组
 */
-export const needLoginPages: string[] = getAllPages('needLogin').map(page => page.path)
+export const needLoginPages: string[] = getAllPages('needLogin').map((page) => page.path)

 /**
 * 根据微信小程序当前环境，判断应该获取的 baseUrl
@ -161,3 +161,9 @@ export function getEnvBaseUploadUrl() {

  return baseUploadUrl
 }
+
+export function getUrlCrmeb() {
+  // 请求基准地址
+  let baseUrl = import.meta.env.VITE_SHOP_SERVER_BASEURL
+  return baseUrl
+}