WIP on main: 57be2a1 新建
This commit is contained in:
commit
525ea3cef8
@ -76,6 +76,7 @@
|
||||
"lint:fix": "eslint --fix"
|
||||
},
|
||||
"dependencies": {
|
||||
"@climblee/uv-ui": "^1.1.20",
|
||||
"@dcloudio/uni-app": "3.0.0-4060620250520001",
|
||||
"@dcloudio/uni-app-harmony": "3.0.0-4060620250520001",
|
||||
"@dcloudio/uni-app-plus": "3.0.0-4060620250520001",
|
||||
@ -99,6 +100,7 @@
|
||||
"pinia": "2.0.36",
|
||||
"pinia-plugin-persistedstate": "3.2.1",
|
||||
"qs": "6.5.3",
|
||||
"uview-ui": "2.0.38",
|
||||
"vue": "^3.4.21",
|
||||
"wot-design-uni": "^1.9.1",
|
||||
"z-paging": "2.8.7"
|
||||
|
||||
17
pnpm-lock.yaml
generated
17
pnpm-lock.yaml
generated
@ -16,6 +16,9 @@ importers:
|
||||
|
||||
.:
|
||||
dependencies:
|
||||
'@climblee/uv-ui':
|
||||
specifier: ^1.1.20
|
||||
version: 1.1.20
|
||||
'@dcloudio/uni-app':
|
||||
specifier: 3.0.0-4060620250520001
|
||||
version: 3.0.0-4060620250520001(@dcloudio/types@3.4.14)(postcss@8.4.49)(rollup@4.41.1)(vue@3.5.15(typescript@5.7.2))
|
||||
@ -85,6 +88,9 @@ importers:
|
||||
qs:
|
||||
specifier: 6.5.3
|
||||
version: 6.5.3
|
||||
uview-ui:
|
||||
specifier: 2.0.38
|
||||
version: 2.0.38
|
||||
vue:
|
||||
specifier: ^3.4.21
|
||||
version: 3.5.15(typescript@5.7.2)
|
||||
@ -938,6 +944,9 @@ packages:
|
||||
'@clack/prompts@0.11.0':
|
||||
resolution: {integrity: sha512-pMN5FcrEw9hUkZA4f+zLlzivQSeQf5dRGJjSUbvVYDLvpKCdQx5OaknvKzgbtXOizhP+SJJJjqEbOe55uKKfAw==}
|
||||
|
||||
'@climblee/uv-ui@1.1.20':
|
||||
resolution: {integrity: sha512-jkyesHJsPJkF4Nap9ZmG1/ibKlxXA5M8+ntqKXwwloIsYSYL5SOKb0gyPj17aBOU1PkJpmeiZ8PwnTolhK2/HA==}
|
||||
|
||||
'@commitlint/cli@19.8.1':
|
||||
resolution: {integrity: sha512-LXUdNIkspyxrlV6VDHWBmCZRtkEVRpBKxi2Gtw3J54cGWhLCTouVD/Q6ZSaSvd2YaDObWK8mDjrz3TIKtaQMAA==}
|
||||
engines: {node: '>=v18'}
|
||||
@ -6152,6 +6161,10 @@ packages:
|
||||
resolution: {integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==}
|
||||
engines: {node: '>= 0.4.0'}
|
||||
|
||||
uview-ui@2.0.38:
|
||||
resolution: {integrity: sha512-6egHDf9lXHKpG3hEjRE0vMx4+VWwKk/ReTf5x18KrIKqdvdPRqO3+B8Unh7vYYwrIxzAWIlmhZ9RJpKI/4UqPQ==}
|
||||
engines: {HBuilderX: ^3.1.0}
|
||||
|
||||
v8-to-istanbul@8.1.1:
|
||||
resolution: {integrity: sha512-FGtKtv3xIpR6BYhvgH8MI/y78oT7d8Au3ww4QIxymrCtZEh5b8gCw2siywE+puhEmuWKDtmfrvF5UlB298ut3w==}
|
||||
engines: {node: '>=10.12.0'}
|
||||
@ -7330,6 +7343,8 @@ snapshots:
|
||||
picocolors: 1.1.1
|
||||
sisteransi: 1.0.5
|
||||
|
||||
'@climblee/uv-ui@1.1.20': {}
|
||||
|
||||
'@commitlint/cli@19.8.1(@types/node@20.17.9)(typescript@5.7.2)':
|
||||
dependencies:
|
||||
'@commitlint/format': 19.8.1
|
||||
@ -14036,6 +14051,8 @@ snapshots:
|
||||
|
||||
utils-merge@1.0.1: {}
|
||||
|
||||
uview-ui@2.0.38: {}
|
||||
|
||||
v8-to-istanbul@8.1.1:
|
||||
dependencies:
|
||||
'@types/istanbul-lib-coverage': 2.0.6
|
||||
|
||||
78
src/components/CustomNavbar.vue
Normal file
78
src/components/CustomNavbar.vue
Normal file
@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<wd-config-provider :themeVars="themeVars">
|
||||
<view class="fixed-top" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
|
||||
<wd-navbar :title="title" left-text="返回" :border="false" left-arrow>
|
||||
<template #capsule>
|
||||
<wd-navbar-capsule @back="handleBack" @back-home="handleBackHome" />
|
||||
</template>
|
||||
<template #left>
|
||||
<slot name="left">
|
||||
<wd-icon name="arrow-left" size="18px" />
|
||||
<wd-icon name="home" size="18px" />
|
||||
</slot>
|
||||
</template>
|
||||
<template #right>
|
||||
<slot name="right" />
|
||||
</template>
|
||||
</wd-navbar>
|
||||
|
||||
<!-- <wd-navbar
|
||||
:title="title"
|
||||
left-arrow
|
||||
:border="false"
|
||||
custom-class="custom-navbar"
|
||||
@click-left="handleBack"
|
||||
>
|
||||
<template #left>
|
||||
<slot name="left">
|
||||
<wd-icon name="arrow-left" size="18px" />
|
||||
<wd-icon name="home" size="18px" />
|
||||
</slot>
|
||||
</template>
|
||||
<template #right>
|
||||
<slot name="right" />
|
||||
</template>
|
||||
</wd-navbar> -->
|
||||
</view>
|
||||
</wd-config-provider>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { ConfigProviderThemeVars } from 'wot-design-uni'
|
||||
|
||||
interface Props {
|
||||
title?: string
|
||||
}
|
||||
const props = defineProps<Props>()
|
||||
|
||||
const { safeAreaInsets } = uni.getSystemInfoSync()
|
||||
|
||||
const themeVars: ConfigProviderThemeVars = {
|
||||
navbarBackgroundColor: 'transparent',
|
||||
navbarTitleColor: '#ffffff',
|
||||
navbarIconColor: '#ffffff',
|
||||
}
|
||||
|
||||
const handleBack = () => {
|
||||
uni.navigateBack()
|
||||
}
|
||||
//返回首页
|
||||
function handleBackHome() {
|
||||
uni.switchTab({
|
||||
url: '/pages/index/index',
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fixed-top {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 1000;
|
||||
}
|
||||
.custom-navbar {
|
||||
--wot-navbar-background: transparent !important;
|
||||
}
|
||||
</style>
|
||||
@ -35,18 +35,12 @@ export const tabbarList = [
|
||||
// 注意 unocss 的图标需要在 页面上引入一下，或者配置到 unocss.config.ts 的 safelist 中
|
||||
iconType: 'unocss',
|
||||
},
|
||||
// {
|
||||
// pagePath: 'pages/my/index',
|
||||
// text: '我的',
|
||||
// icon: '/static/logo.svg',
|
||||
// iconType: 'local',
|
||||
// },
|
||||
// {
|
||||
// pagePath: 'pages/mine/index',
|
||||
// text: '我的',
|
||||
// icon: 'iconfont icon-my',
|
||||
// iconType: 'iconfont',
|
||||
// },
|
||||
{
|
||||
pagePath: 'pages/my/index',
|
||||
text: '我的',
|
||||
icon: 'i-ant-design-user-outlined ',
|
||||
iconType: 'unocss',
|
||||
},
|
||||
]
|
||||
|
||||
const _tabbar = {
|
||||
@ -54,7 +48,7 @@ const _tabbar = {
|
||||
selectedColor: '#018d71',
|
||||
backgroundColor: '#F8F8F8',
|
||||
borderStyle: 'black',
|
||||
height: '50px',
|
||||
height: '60px',
|
||||
fontSize: '10px',
|
||||
iconWidth: '24px',
|
||||
spacing: '3px',
|
||||
|
||||
25
src/layouts/heardbg.vue
Normal file
25
src/layouts/heardbg.vue
Normal file
@ -0,0 +1,25 @@
|
||||
<script lang="ts" setup>
|
||||
import type { ConfigProviderThemeVars } from 'wot-design-uni'
|
||||
|
||||
const themeVars: ConfigProviderThemeVars = {
|
||||
// colorTheme: 'red',
|
||||
// buttonPrimaryBgColor: '#07c160',
|
||||
// buttonPrimaryColor: '#07c160',
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<wd-config-provider :theme-vars="themeVars">
|
||||
<wd-navbar
|
||||
title=""
|
||||
left-text=""
|
||||
left-arrow
|
||||
:bordered="false"
|
||||
custom-style="background: rgba(0, 0, 0, 0) !important;--wot-navbar-color:white;--wot-font-gray-1:white;"
|
||||
></wd-navbar>
|
||||
|
||||
<slot />
|
||||
<wd-toast />
|
||||
<wd-message-box />
|
||||
</wd-config-provider>
|
||||
</template>
|
||||
335
src/pages-tourism-sub/home/index.vue
Normal file
335
src/pages-tourism-sub/home/index.vue
Normal file
@ -0,0 +1,335 @@
|
||||
<route lang="json5" type="page">
|
||||
{
|
||||
layout: 'default',
|
||||
style: {
|
||||
navigationBarTitleText: '',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
<style>
|
||||
.wd-tabs {
|
||||
background: rgba(0, 0, 0, 0) !important;
|
||||
/* background-color: rgba(0, 0, 0, 0) !important; */
|
||||
}
|
||||
.wd-tabs__nav {
|
||||
/* background: rgba(0, 0, 0, 0) !important; */
|
||||
background-color: rgba(0, 0, 0, 0) !important;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view>
|
||||
<view class="background_home">
|
||||
<view class="relative" style="height: 360rpx">
|
||||
<wd-img
|
||||
radius="10rpx"
|
||||
:width="'100%'"
|
||||
:height="'100%'"
|
||||
src="https://x0.ifengimg.com/ucms/2022_53/5EA8CAB4307AAD81F17C318296493C2554C0EBFF_size2164_w1618_h870.png"
|
||||
/>
|
||||
<view style="position: absolute; top: 10px; right: 0px; left: 0px">
|
||||
<!-- <wd-button size="small">No.1</wd-button> -->
|
||||
<wd-search hide-cancel placeholder-left placeholder="请输入内容"></wd-search>
|
||||
</view>
|
||||
<view
|
||||
style="
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 0px;
|
||||
left: 30rpx;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
"
|
||||
>
|
||||
<!-- <text class="block font-size-4 text-left">泸州市江阳区分水岭镇董允坝村</text> -->
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class=" ">
|
||||
<wd-tabs
|
||||
v-model="currentTab"
|
||||
@change="handleChange"
|
||||
auto-line-width
|
||||
color="#59CB56"
|
||||
lineWidth="80rpx"
|
||||
>
|
||||
<wd-tab
|
||||
v-for="(item, index) in [
|
||||
{ name: '江阳区', icon: 'home', color: 'green' },
|
||||
{ name: '龙马潭区', icon: 'heart', color: 'blue' },
|
||||
{ name: '土地流转', icon: 'gift', color: 'orange' },
|
||||
{ name: '技术服务', icon: 'secured', color: 'red' },
|
||||
{ name: '乡村旅游', icon: 'secured', color: 'red' },
|
||||
{ name: '产品供需', icon: 'home', color: 'green' },
|
||||
{ name: '农资供应', icon: 'heart', color: 'blue' },
|
||||
{ name: '土地流转', icon: 'gift', color: 'orange' },
|
||||
{ name: '技术服务', icon: 'secured', color: 'red' },
|
||||
{ name: '乡村旅游', icon: 'secured', color: 'red' },
|
||||
]"
|
||||
:key="index"
|
||||
:title="`${item.name}`"
|
||||
:name="index"
|
||||
setActive="item.name"
|
||||
></wd-tab>
|
||||
</wd-tabs>
|
||||
</view>
|
||||
|
||||
<view class="pe-2 ps-2 pt-2">
|
||||
<view class="m-1" style="" @click="more">
|
||||
<wd-card custom-class="card-content">
|
||||
<view class="content" style="align-items: normal">
|
||||
<view style="width: 240rpx">
|
||||
<wd-img
|
||||
radius="10rpx"
|
||||
:width="'100%'"
|
||||
:height="'100%'"
|
||||
src="https://youimg1.c-ctrip.com/target/100113000000v65dv25F3.jpg"
|
||||
alt="joy"
|
||||
/>
|
||||
</view>
|
||||
<view class="p-2 flex-content-column">
|
||||
<view class="ps-1 font-size-4">
|
||||
<text class="pe-2 font-size-4 ellipsis">
|
||||
四川省泸州市江阳区分水岭镇董允坝村1队2号发胶发蜡斯拉夫卡是空间看了大家按时付款了就爱上精神分裂
|
||||
</text>
|
||||
<wd-tag custom-class="space me-2" mark>景区服务</wd-tag>
|
||||
<wd-tag custom-class="space me-2" type="primary" mark>景区服务</wd-tag>
|
||||
<text class="pe-2 pt-2 font-size-3 ellipsis-5">
|
||||
<wd-icon name="location" size="24rpx" />
|
||||
四川省泸州市江阳区分水岭镇董允坝村
|
||||
江阳区地处城市中心半岛，区位优势及地理条件突出，距省会成都256公里，距重庆市135公里，是川、滇、黔、渝四省（市）结合部的商贸中心和重要物资集散地；泸州航空港…
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</wd-card>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<wd-cell-group custom-class="background-none">
|
||||
<wd-cell size="large">
|
||||
<template #title>
|
||||
<view>
|
||||
<view class="title">江阳区管辖乡镇</view>
|
||||
</view>
|
||||
</template>
|
||||
<view class="custom-text font-size-3 text-gray-500">查看更多 》</view>
|
||||
</wd-cell>
|
||||
</wd-cell-group>
|
||||
|
||||
<view class="pe-2 ps-2">
|
||||
<view class="m-1" style="" @click="more">
|
||||
<wd-card custom-class="card-content">
|
||||
<view class="content" style="align-items: normal">
|
||||
<view style="width: 240rpx">
|
||||
<wd-img
|
||||
radius="10rpx"
|
||||
:width="'100%'"
|
||||
:height="'100%'"
|
||||
src="https://youimg1.c-ctrip.com/target/100113000000v65dv25F3.jpg"
|
||||
alt="joy"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view class="p-2 flex-content-column">
|
||||
<view class="ps-1 font-size-4">
|
||||
<text class="pe-2 font-size-4 ellipsis">
|
||||
四川省泸州市江阳区分水岭镇董允坝村1队2号发胶发蜡斯拉夫卡是空间看了大家按时付款了就爱上精神分裂
|
||||
</text>
|
||||
<wd-tag custom-class="space me-2" mark>景区服务</wd-tag>
|
||||
<wd-tag custom-class="space me-2" type="primary" mark>景区服务</wd-tag>
|
||||
<text class="pe-2 pt-2 font-size-3 ellipsis-5">
|
||||
<wd-icon name="location" size="24rpx" />
|
||||
四川省泸州市江阳区分水岭镇董允坝村
|
||||
江阳区地处城市中心半岛，区位优势及地理条件突出，距省会成都256公里，距重庆市135公里，是川、滇、黔、渝四省（市）结合部的商贸中心和重要物资集散地；泸州航空港…
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</wd-card>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<wd-cell-group custom-class="background-none">
|
||||
<wd-cell size="large">
|
||||
<template #title>
|
||||
<view>
|
||||
<view class="title">江阳文旅</view>
|
||||
</view>
|
||||
</template>
|
||||
<view class="custom-text font-size-3 text-gray-500">查看更多 》</view>
|
||||
</wd-cell>
|
||||
</wd-cell-group>
|
||||
|
||||
<view class="p-2">
|
||||
<view class="" style="" @click="more">
|
||||
<wd-card custom-class="card-content">
|
||||
<view class="relative" style="height: 360rpx">
|
||||
<wd-img
|
||||
radius="10rpx"
|
||||
:width="'100%'"
|
||||
:height="'100%'"
|
||||
src="https://pic3.40017.cn/poi/2016/02/19/15/tjLmAf_640x320_00.jpg"
|
||||
/>
|
||||
<view style="position: absolute; top: -20rpx; right: 40rpx">
|
||||
<wd-img
|
||||
:width="'120rpx'"
|
||||
:height="'120rpx'"
|
||||
src="/static/icons//top_num.png"
|
||||
></wd-img>
|
||||
<view
|
||||
style="
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 20rpx;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
"
|
||||
class="font-size-4"
|
||||
>
|
||||
NO.1
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="m-4 p-2 absolute bottom-0 text-center left-0 right-0 text-white bg-gray-300 bg-opacity-40"
|
||||
style="backdrop-filter: blur(10px); border-radius: 10rpx"
|
||||
>
|
||||
<text class="block font-size-4 text-left">泸州方山景区</text>
|
||||
<text class="font-size-3 text-left ellipsis-2">
|
||||
因举办古韵悠然的传统民俗文化节热度飙升，在这里，你能感受到乡村文化的深厚底蕴和无穷魅力。
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</wd-card>
|
||||
</view>
|
||||
</view>
|
||||
<wd-cell-group custom-class="background-none">
|
||||
<wd-cell size="large">
|
||||
<template #title>
|
||||
<view>
|
||||
<view class="title">江阳特产</view>
|
||||
</view>
|
||||
</template>
|
||||
<view class="custom-text font-size-3 text-gray-500">
|
||||
查看更多 》
|
||||
<!-- <wd-icon name="arrow-right" size="24rpx" /> -->
|
||||
</view>
|
||||
</wd-cell>
|
||||
</wd-cell-group>
|
||||
|
||||
<view class=" ">
|
||||
<wd-card custom-class=" ">
|
||||
<view class=" " style="" @click="more">
|
||||
<wd-card custom-class="card-content">
|
||||
<view class="content pt-2" style="align-items: normal">
|
||||
<view style="width: 200rpx; height: 200rpx">
|
||||
<wd-img
|
||||
radius="10rpx"
|
||||
:width="'100%'"
|
||||
:height="'100%'"
|
||||
src="https://bpic.588ku.com/back_pic/06/38/31/7363f87dd4223eb.jpg"
|
||||
alt="joy"
|
||||
/>
|
||||
</view>
|
||||
<view class="ps-2 flex-content-column">
|
||||
<view class="ps-1 font-size-4">
|
||||
<text class="pe-2 pb-2 font-size-4 ellipsis-2">黄粑</text>
|
||||
<wd-tag custom-class="space me-2" mark>景区服务</wd-tag>
|
||||
<wd-tag custom-class="space me-2" type="primary" mark>景区服务</wd-tag>
|
||||
<text class="pe-2 pt-2 font-size-3 ellipsis-2">
|
||||
四川省泸州市江阳区分水岭镇董允坝村safflkjljflkaJFK咖啡浪费了骄傲进了房间垃圾立即分解放假啊就了
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</wd-card>
|
||||
</view>
|
||||
<view class="p-1" />
|
||||
</wd-card>
|
||||
</view>
|
||||
|
||||
<wd-cell-group custom-class="background-none">
|
||||
<wd-cell size="large">
|
||||
<template #title>
|
||||
<view>
|
||||
<view class="title">江阳名企</view>
|
||||
</view>
|
||||
</template>
|
||||
<view class="custom-text font-size-3 text-gray-500">
|
||||
查看更多 》
|
||||
<!-- <wd-icon name="arrow-right" size="24rpx" /> -->
|
||||
</view>
|
||||
</wd-cell>
|
||||
</wd-cell-group>
|
||||
|
||||
<view class=" ">
|
||||
<wd-card custom-class=" ">
|
||||
<view class=" " style="" @click="more">
|
||||
<wd-card custom-class="card-content">
|
||||
<view class="content pt-2" style="align-items: normal">
|
||||
<view class="ps-2 flex-content-column">
|
||||
<view class="ps-1 font-size-4">四川巨洋大饭店</view>
|
||||
<view class="ps-1 font-size-3">
|
||||
<wd-tag custom-class="space me-2" type="primary" mark>500平升降舞台歌剧院</wd-tag>
|
||||
</view>
|
||||
<view class="ps-1 font-size-3">
|
||||
<wd-tag custom-class="space me-2" type="primary" mark>旅游文化新地标</wd-tag>
|
||||
</view>
|
||||
<view class="p-1 font-size-3" style="align-items: end">
|
||||
<wd-tag custom-class="space me-2" mark>配有设备完善中心建设中心等</wd-tag>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="width: 280rpx">
|
||||
<wd-img
|
||||
radius="10rpx"
|
||||
:width="'100%'"
|
||||
:height="'100%'"
|
||||
src="https://bpic.588ku.com/back_pic/06/38/31/7363f87dd4223eb.jpg"
|
||||
alt="joy"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</wd-card>
|
||||
</view>
|
||||
<view class="p-1" />
|
||||
</wd-card>
|
||||
</view>
|
||||
|
||||
<view class="p-2" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const currentTab = ref<number>(1)
|
||||
uni.setNavigationBarTitle({
|
||||
title: '旅游首页', // 运行时修改标题
|
||||
})
|
||||
function changeTab(e) {
|
||||
console.log(e)
|
||||
currentTab.value = e.id
|
||||
}
|
||||
function handleChange(e) {
|
||||
console.log(e)
|
||||
// currentTab.value = e.id
|
||||
}
|
||||
function handleBack() {
|
||||
uni.navigateBack({})
|
||||
}
|
||||
|
||||
function handleBackHome() {
|
||||
uni.reLaunch({ url: '/pages/index/index' })
|
||||
}
|
||||
function more() {
|
||||
console.log('查看更多')
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/list',
|
||||
})
|
||||
}
|
||||
</script>
|
||||
27
src/pages-village-sub/demo/index.vue
Normal file
27
src/pages-village-sub/demo/index.vue
Normal file
@ -0,0 +1,27 @@
|
||||
<route lang="json5" type="page">
|
||||
{
|
||||
style: {
|
||||
navigationStyle: 'default',
|
||||
navigationBarTitleText: '分包页面 标题',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
|
||||
<script lang="ts" setup>
|
||||
// code here
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="text-center">
|
||||
<view class="m-8">
|
||||
http://localhost:9000/#/pages-sub/demo/index
|
||||
</view>
|
||||
<view class="text-green-500">
|
||||
分包页面demo
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
//
|
||||
</style>
|
||||
455
src/pages-village-sub/home/index.vue
Normal file
455
src/pages-village-sub/home/index.vue
Normal file
@ -0,0 +1,455 @@
|
||||
<route lang="json5" type="page">
|
||||
{
|
||||
layout: 'default',
|
||||
style: {
|
||||
navigationBarTitleText: '',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
<style>
|
||||
.wd-tabs {
|
||||
background: rgba(0, 0, 0, 0) !important;
|
||||
/* background-color: rgba(0, 0, 0, 0) !important; */
|
||||
}
|
||||
.wd-tabs__nav {
|
||||
/* background: rgba(0, 0, 0, 0) !important; */
|
||||
background-color: rgba(0, 0, 0, 0) !important;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view>
|
||||
<view class="background_home">
|
||||
<view class="relative" style="height: 360rpx">
|
||||
<wd-img
|
||||
radius="10rpx"
|
||||
:width="'100%'"
|
||||
:height="'100%'"
|
||||
src="https://img95.699pic.com/photo/50384/2866.jpg_wh860.jpg"
|
||||
/>
|
||||
<view style="position: absolute; top: 10px; right: 0px; left: 0px">
|
||||
<!-- <wd-button size="small">No.1</wd-button> -->
|
||||
<wd-search hide-cancel placeholder-left placeholder="请输入内容"></wd-search>
|
||||
</view>
|
||||
<view
|
||||
style="
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 0px;
|
||||
left: 30rpx;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
"
|
||||
>
|
||||
<text class="block font-size-4 text-left">泸州市江阳区分水岭镇董允坝村</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="pe-2 ps-2 pt-2"></view>
|
||||
<wd-card>
|
||||
<wd-grid :gutter="10" :column="4" custom-class="pt-2">
|
||||
<!-- <view
|
||||
v-for="item in [
|
||||
{ name: '政务办事', icon: '/static/icons/village_service.png', url: 'green' },
|
||||
{ name: '农业助手', icon: '/static/icons/agriculture_service.png', url: 'blue' },
|
||||
{ name: '文化活动', icon: '/static/icons/agriculture_course.png', url: 'orange' },
|
||||
{ name: '智慧党建', icon: '/static/icons/rural_ecommerce.png', url: 'red' },
|
||||
{ name: '安防监控', icon: '/static/icons/village_service.png', url: 'green' },
|
||||
{ name: '农业企业', icon: '/static/icons/agriculture_service.png', url: 'blue' },
|
||||
{ name: '农技课堂', icon: '/static/icons/agriculture_course.png', url: 'orange' },
|
||||
{ name: '乡村电商', icon: '/static/icons/rural_ecommerce.png', url: 'red' },
|
||||
]"
|
||||
> -->
|
||||
<view
|
||||
@click="goPage(item.url)"
|
||||
v-for="item in [
|
||||
{
|
||||
name: '市场行情',
|
||||
icon: '/static/icons/village_service.png',
|
||||
url: '/pages-village-sub/server/market',
|
||||
},
|
||||
{
|
||||
name: '农业助手',
|
||||
icon: '/static/icons/agriculture_service.png',
|
||||
url: '/pages-village-sub/server/helper',
|
||||
},
|
||||
{
|
||||
name: '水稻专题',
|
||||
icon: '/static/icons/agriculture_course.png',
|
||||
url: '/pages-village-sub/server/rice',
|
||||
},
|
||||
{
|
||||
name: '智慧党建',
|
||||
icon: '/static/icons/rural_ecommerce.png',
|
||||
url: '/pages-village-sub/server/index',
|
||||
},
|
||||
{
|
||||
name: '农技课堂',
|
||||
icon: '/static/icons/village_service.png',
|
||||
url: '/pages-village-sub/server/classroom',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<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>
|
||||
</view>
|
||||
<wd-cell-group custom-class="background-none pe-2 ps-2">
|
||||
<wd-cell size="large">
|
||||
<template #title>
|
||||
<view>
|
||||
<view class="title">村庄基本情况</view>
|
||||
</view>
|
||||
</template>
|
||||
<view class="custom-text font-size-3 text-gray-500">
|
||||
查看更多 》
|
||||
<!-- <wd-icon name="arrow-right" size="24rpx" /> -->
|
||||
</view>
|
||||
</wd-cell>
|
||||
</wd-cell-group>
|
||||
|
||||
<wd-cell-group custom-class="background-none pe-2 ps-2">
|
||||
<wd-cell size="large">
|
||||
<template #title>
|
||||
<view>
|
||||
<view class="title">畅销商品</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<view class="custom-text font-size-3 text-gray-500">
|
||||
查看更多 》
|
||||
<!-- <wd-icon name="arrow-right" size="24rpx" /> -->
|
||||
</view>
|
||||
</wd-cell>
|
||||
</wd-cell-group>
|
||||
|
||||
<wd-grid :column="3" class="pe-2 ps-2">
|
||||
<view
|
||||
v-for="item in [
|
||||
{
|
||||
name: '助农兴产',
|
||||
icon: 'https://img95.699pic.com/photo/50384/2866.jpg_wh860.jpg',
|
||||
color: 'green',
|
||||
price: '320',
|
||||
line_price: '320',
|
||||
},
|
||||
{
|
||||
name: '助农畅销',
|
||||
icon: 'https://img95.699pic.com/photo/50384/2866.jpg_wh860.jpg',
|
||||
price: '320',
|
||||
line_price: '320',
|
||||
},
|
||||
{
|
||||
name: '助农畅销',
|
||||
icon: 'https://img95.699pic.com/photo/50384/2866.jpg_wh860.jpg',
|
||||
price: '320',
|
||||
line_price: '320',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<wd-grid-item use-slot>
|
||||
<view class="detail-box" style="border: none; padding: 0; margin: 0">
|
||||
<wd-img radius="10rpx" :width="'100%'" :height="'180rpx'" :src="item.icon" />
|
||||
<view
|
||||
class="m-2 p-1 absolute bottom-0 text-center left-0 right-0 text-white bg-gray-300 bg-opacity-5"
|
||||
style="backdrop-filter: blur(2px); border-radius: 10rpx"
|
||||
>
|
||||
<view class="text-sm text-gray-500 text-left">
|
||||
<wd-text
|
||||
size="20rpx"
|
||||
color="orange"
|
||||
:text="item.price"
|
||||
mode="price"
|
||||
type="error"
|
||||
prefix="￥"
|
||||
/>
|
||||
<wd-text
|
||||
size="18rpx"
|
||||
color="white"
|
||||
:text="item.line_price"
|
||||
mode="price"
|
||||
decoration="line-through"
|
||||
prefix="￥"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</wd-grid-item>
|
||||
</view>
|
||||
</wd-grid>
|
||||
|
||||
<wd-cell-group custom-class="background-none pe-2 ps-2">
|
||||
<wd-cell size="large">
|
||||
<template #title>
|
||||
<view>
|
||||
<view class="title">热门景点</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<view class="custom-text font-size-3 text-gray-500">
|
||||
查看更多 》
|
||||
<!-- <wd-icon name="arrow-right" size="24rpx" /> -->
|
||||
</view>
|
||||
</wd-cell>
|
||||
</wd-cell-group>
|
||||
<wd-grid :column="3" class="pe-2 ps-2">
|
||||
<view
|
||||
v-for="item in [
|
||||
{
|
||||
name: '助农兴产',
|
||||
icon: 'https://img95.699pic.com/photo/50384/2866.jpg_wh860.jpg',
|
||||
color: 'green',
|
||||
price: '320',
|
||||
line_price: '320',
|
||||
},
|
||||
{
|
||||
name: '助农畅销',
|
||||
icon: 'https://img95.699pic.com/photo/50384/2866.jpg_wh860.jpg',
|
||||
price: '320',
|
||||
line_price: '320',
|
||||
},
|
||||
{
|
||||
name: '助农畅销',
|
||||
icon: 'https://img95.699pic.com/photo/50384/2866.jpg_wh860.jpg',
|
||||
price: '320',
|
||||
line_price: '320',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<wd-grid-item use-slot>
|
||||
<view class="detail-box" style="border: none; padding: 0; margin: 0">
|
||||
<wd-img radius="10rpx" :width="'100%'" :height="'180rpx'" :src="item.icon" />
|
||||
</view>
|
||||
</wd-grid-item>
|
||||
</view>
|
||||
</wd-grid>
|
||||
<wd-cell-group custom-class="background-none pe-2 ps-2">
|
||||
<wd-cell size="large">
|
||||
<template #title>
|
||||
<view>
|
||||
<view class="title">热门美食</view>
|
||||
</view>
|
||||
</template>
|
||||
<view class="custom-text font-size-3 text-gray-500">
|
||||
查看更多 》
|
||||
<!-- <wd-icon name="arrow-right" size="24rpx" /> -->
|
||||
</view>
|
||||
</wd-cell>
|
||||
</wd-cell-group>
|
||||
<wd-grid :column="3" class="pe-2 ps-2">
|
||||
<view
|
||||
v-for="item in [
|
||||
{
|
||||
name: '泸州黄粑',
|
||||
icon: 'https://img95.699pic.com/photo/50384/2866.jpg_wh860.jpg',
|
||||
color: 'green',
|
||||
price: '320',
|
||||
line_price: '320',
|
||||
},
|
||||
{
|
||||
name: '泸州白糕',
|
||||
icon: 'https://img95.699pic.com/photo/50384/2866.jpg_wh860.jpg',
|
||||
price: '320',
|
||||
line_price: '320',
|
||||
},
|
||||
{
|
||||
name: '泸州猪儿粑',
|
||||
icon: 'https://img95.699pic.com/photo/50384/2866.jpg_wh860.jpg',
|
||||
price: '320',
|
||||
line_price: '320',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<wd-grid-item use-slot>
|
||||
<view class="detail-box" style="border: none; padding: 0; margin: 0">
|
||||
<wd-img radius="10rpx" :width="'100%'" :height="'180rpx'" :src="item.icon" />
|
||||
<view
|
||||
class="m-2 p-1 absolute bottom-0 text-center left-0 right-0 text-white bg-black bg-opacity-5"
|
||||
style="backdrop-filter: blur(2px); border-radius: 10rpx"
|
||||
>
|
||||
<view class="text-sm text-white text-center">{{ item.name }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</wd-grid-item>
|
||||
</view>
|
||||
</wd-grid>
|
||||
<wd-cell-group custom-class="background-none pe-2 ps-2">
|
||||
<wd-cell size="large">
|
||||
<template #title>
|
||||
<view>
|
||||
<view class="title">乡村动态</view>
|
||||
</view>
|
||||
</template>
|
||||
<view class="custom-text font-size-3 text-gray-500">
|
||||
查看更多 》
|
||||
<!-- <wd-icon name="arrow-right" size="24rpx" /> -->
|
||||
</view>
|
||||
</wd-cell>
|
||||
</wd-cell-group>
|
||||
|
||||
<view class="pe-2 ps-2">
|
||||
<view class="m-1" style="" @click="more">
|
||||
<wd-card custom-class="card-content">
|
||||
<view class="relative" style="height: 360rpx">
|
||||
<wd-img
|
||||
radius="10rpx"
|
||||
:width="'100%'"
|
||||
:height="'100%'"
|
||||
src="https://img95.699pic.com/photo/50384/2866.jpg_wh860.jpg"
|
||||
/>
|
||||
<view style="position: absolute; top: -10px; right: 20px">
|
||||
<wd-img :width="60" :height="60" src="/static/icons//top_num.png"></wd-img>
|
||||
<view
|
||||
style="
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 20rpx;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
"
|
||||
class="font-size-4"
|
||||
>
|
||||
NO.1
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view
|
||||
class="m-4 p-2 absolute bottom-0 text-center left-0 right-0 text-white bg-gray-300 bg-opacity-5"
|
||||
style="backdrop-filter: blur(10px); 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>
|
||||
<wd-cell-group custom-class="background-none pe-2 ps-2">
|
||||
<wd-cell size="large">
|
||||
<template #title>
|
||||
<view>
|
||||
<view class="title">热门发布</view>
|
||||
</view>
|
||||
</template>
|
||||
<view class="custom-text font-size-3 text-gray-500">
|
||||
查看更多 》
|
||||
<!-- <wd-icon name="arrow-right" size="24rpx" /> -->
|
||||
</view>
|
||||
</wd-cell>
|
||||
</wd-cell-group>
|
||||
|
||||
<view class="pe-2 ps-2">
|
||||
<wd-grid :gutter="10" :column="5" custom-class=" ">
|
||||
<!-- <scroll-view scroll-x="true" class="scroll-view-container"> -->
|
||||
<wd-button
|
||||
v-for="item in [
|
||||
{
|
||||
name: '农产品',
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
name: '农资供应',
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
name: '土地流转',
|
||||
id: 3,
|
||||
},
|
||||
{
|
||||
name: '技术服务',
|
||||
id: 4,
|
||||
},
|
||||
{
|
||||
name: '乡村旅游',
|
||||
id: 5,
|
||||
},
|
||||
]"
|
||||
:type="item.id === currentTab ? 'primary' : 'none'"
|
||||
size="small"
|
||||
@click="changeTab(item)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</wd-button>
|
||||
</wd-grid>
|
||||
</view>
|
||||
|
||||
<view class=" ">
|
||||
<wd-card custom-class=" ">
|
||||
<view class=" " style="" @click="more">
|
||||
<wd-card custom-class="card-content">
|
||||
<view class="content pt-2" style="align-items: normal">
|
||||
<view style="width: 200rpx; height: 200rpx">
|
||||
<wd-img
|
||||
radius="10rpx"
|
||||
:width="'100%'"
|
||||
:height="'100%'"
|
||||
src="https://bpic.588ku.com/back_pic/06/38/31/7363f87dd4223eb.jpg"
|
||||
alt="joy"
|
||||
/>
|
||||
</view>
|
||||
<view class="ps-2 flex-content-column">
|
||||
<view class="ps-1 font-size-4">
|
||||
<text class="pe-2 pb-2 font-size-4 ellipsis-2">黄粑</text>
|
||||
<wd-tag custom-class="space me-2" mark>景区服务</wd-tag>
|
||||
<wd-tag custom-class="space me-2" type="primary" mark>景区服务</wd-tag>
|
||||
<text class="pe-2 pt-2 font-size-3 ellipsis-2">
|
||||
四川省泸州市江阳区分水岭镇董允坝村safflkjljflkaJFK咖啡浪费了骄傲进了房间垃圾立即分解放假啊就了
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</wd-card>
|
||||
</view>
|
||||
<view class="p-1" />
|
||||
</wd-card>
|
||||
</view>
|
||||
|
||||
<view class="p-1" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const currentTab = ref<number>(1)
|
||||
uni.setNavigationBarTitle({
|
||||
title: '乡村首页', // 运行时修改标题
|
||||
})
|
||||
|
||||
function goPage(url) {
|
||||
uni.navigateTo({
|
||||
url: url,
|
||||
})
|
||||
}
|
||||
function changeTab(e) {
|
||||
console.log(e)
|
||||
currentTab.value = e.id
|
||||
}
|
||||
function handleChange(e) {
|
||||
console.log(e)
|
||||
// currentTab.value = e.id
|
||||
}
|
||||
function handleBack() {
|
||||
uni.navigateBack({})
|
||||
}
|
||||
|
||||
function handleBackHome() {
|
||||
uni.reLaunch({ url: '/pages/index/index' })
|
||||
}
|
||||
function more() {
|
||||
console.log('查看更多')
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/list',
|
||||
})
|
||||
}
|
||||
</script>
|
||||
128
src/pages-village-sub/server/classroom.vue
Normal file
128
src/pages-village-sub/server/classroom.vue
Normal file
@ -0,0 +1,128 @@
|
||||
<route lang="json5" type="page">
|
||||
{
|
||||
layout: 'default',
|
||||
style: {
|
||||
navigationBarTitleText: '',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
<style>
|
||||
.wd-tabs {
|
||||
background: rgba(0, 0, 0, 0) !important;
|
||||
/* background-color: rgba(0, 0, 0, 0) !important; */
|
||||
}
|
||||
.wd-tabs__nav {
|
||||
/* background: rgba(0, 0, 0, 0) !important; */
|
||||
background-color: rgba(0, 0, 0, 0) !important;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view>
|
||||
<!-- <wd-search hide-cancel placeholder-left placeholder="请输入内容"></wd-search> -->
|
||||
<view class="background_home" style="background: white">
|
||||
<view class="relative" style="height: 80rpx">
|
||||
<!-- <wd-img
|
||||
radius="10rpx"
|
||||
:width="'100%'"
|
||||
:height="'100%'"
|
||||
src="https://img95.699pic.com/photo/50384/2866.jpg_wh860.jpg"
|
||||
/> -->
|
||||
<view style="position: absolute; top: 10px; right: 0px; left: 0px">
|
||||
<!-- <wd-button size="small">No.1</wd-button> -->
|
||||
<wd-search hide-cancel placeholder-left placeholder="请输入内容"></wd-search>
|
||||
</view>
|
||||
<view
|
||||
style="
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 0px;
|
||||
left: 30rpx;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
"
|
||||
></view>
|
||||
</view>
|
||||
<view class="p-2"></view>
|
||||
<view class="title pt-2">
|
||||
<wd-tabs
|
||||
v-model="currentTab"
|
||||
@change="handleChange"
|
||||
auto-line-width
|
||||
color="#59CB56"
|
||||
lineWidth="80rpx"
|
||||
>
|
||||
<wd-tab
|
||||
v-for="(item, index) in [
|
||||
{ name: '全部', icon: 'home', color: 'green' },
|
||||
{ name: '种植业', icon: 'heart', color: 'blue' },
|
||||
{ name: '养殖业', icon: 'gift', color: 'orange' },
|
||||
{ name: '渔业', icon: 'secured', color: 'red' },
|
||||
]"
|
||||
:key="index"
|
||||
:title="`${item.name}`"
|
||||
:name="index"
|
||||
setActive="item.name"
|
||||
></wd-tab>
|
||||
</wd-tabs>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="pt-2">
|
||||
<wd-card custom-class=" ">
|
||||
<view class=" " style="" @click="more">
|
||||
<wd-card custom-class="card-content">
|
||||
<view class="content pt-2" style="align-items: normal">
|
||||
<view class="pe-1 flex-content-column">
|
||||
<view class="pe-1 font-size-4 color-black">
|
||||
零失败！手把手教你种出又大又圆的土豆
|
||||
</view>
|
||||
<view class="p-1 font-size-3" style="align-items: end">
|
||||
<text class="pe-2 font-size-3">播放量：2000 | 2025-8-23</text>
|
||||
</view>
|
||||
</view>
|
||||
<view style="width: 280rpx; height: 200rpx">
|
||||
<wd-img
|
||||
:width="'100%'"
|
||||
:height="'100%'"
|
||||
radius="10rpx"
|
||||
src="https://bpic.588ku.com/back_pic/06/38/31/7363f87dd4223eb.jpg"
|
||||
alt="joy"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</wd-card>
|
||||
</view>
|
||||
<view class="p-1" />
|
||||
</wd-card>
|
||||
</view>
|
||||
<view class="p-2" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const currentTab = ref<number>(1)
|
||||
uni.setNavigationBarTitle({
|
||||
title: '农机课堂', // 运行时修改标题
|
||||
})
|
||||
function changeTab(e) {
|
||||
console.log(e)
|
||||
currentTab.value = e.id
|
||||
}
|
||||
function handleChange(e) {
|
||||
console.log(e)
|
||||
// currentTab.value = e.id
|
||||
}
|
||||
function handleBack() {
|
||||
uni.navigateBack({})
|
||||
}
|
||||
|
||||
function handleBackHome() {
|
||||
uni.reLaunch({ url: '/pages/index/index' })
|
||||
}
|
||||
function more() {
|
||||
console.log('查看更多')
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/list',
|
||||
})
|
||||
}
|
||||
</script>
|
||||
157
src/pages-village-sub/server/helper.vue
Normal file
157
src/pages-village-sub/server/helper.vue
Normal file
@ -0,0 +1,157 @@
|
||||
<route lang="json5" type="page">
|
||||
{
|
||||
layout: 'default',
|
||||
style: {
|
||||
navigationBarTitleText: '',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
<style>
|
||||
.wd-tabs {
|
||||
background: rgba(0, 0, 0, 0) !important;
|
||||
/* background-color: rgba(0, 0, 0, 0) !important; */
|
||||
}
|
||||
.wd-tabs__nav {
|
||||
/* background: rgba(0, 0, 0, 0) !important; */
|
||||
background-color: rgba(0, 0, 0, 0) !important;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view>
|
||||
<view class=" ">
|
||||
<view class="relative p-2" style="height: 360rpx">
|
||||
<wd-img
|
||||
radius="20rpx"
|
||||
:width="'100%'"
|
||||
:height="'100%'"
|
||||
src="https://p3.itc.cn/q_70/images03/20220721/815add901b6442e1ba3a1662ed1cb819.jpeg"
|
||||
/>
|
||||
</view>
|
||||
<wd-card>
|
||||
<wd-grid :gutter="10" :column="4" class="pt-2 pb-2">
|
||||
<view
|
||||
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>
|
||||
<view class="p-1" />
|
||||
</wd-card>
|
||||
</view>
|
||||
|
||||
<view class=" ">
|
||||
<wd-card custom-class=" ">
|
||||
<view class="title pt-2">
|
||||
<view>
|
||||
<text class="text-xl text-sm font-size-4 text-black">农业专题</text>
|
||||
<text class="ps-2 text-xl text-sm font-size-3 font-500"></text>
|
||||
</view>
|
||||
<view class="title-tip text-gray-500">查看更多 》</view>
|
||||
</view>
|
||||
|
||||
<wd-grid :column="3" class="pt-2 pb-2">
|
||||
<view
|
||||
v-for="item in [
|
||||
{
|
||||
name: '助农兴产',
|
||||
icon: 'https://img.tukuppt.com/preview/00/52/63/47/52634764e573f622168show.jpg',
|
||||
color: 'green',
|
||||
price: '320',
|
||||
line_price: '320',
|
||||
},
|
||||
{
|
||||
name: '助农畅销',
|
||||
icon: 'https://img.tukuppt.com/preview/00/52/63/47/52634764e573f622168show.jpg',
|
||||
price: '320',
|
||||
line_price: '320',
|
||||
},
|
||||
{
|
||||
name: '助农畅销',
|
||||
icon: 'https://img.tukuppt.com/preview/00/52/63/47/52634764e573f622168show.jpg',
|
||||
price: '320',
|
||||
line_price: '320',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<wd-grid-item use-slot>
|
||||
<view class=" " style="border: none; padding: 0; margin: 0">
|
||||
<wd-img radius="10rpx" :width="'100%'" :height="'280rpx'" :src="item.icon" />
|
||||
</view>
|
||||
</wd-grid-item>
|
||||
</view>
|
||||
</wd-grid>
|
||||
|
||||
<view class="title pt-2">
|
||||
<view>
|
||||
<text class="text-xl text-sm font-size-4 text-black">精品课程</text>
|
||||
<text class="ps-2 text-xl text-sm font-size-3 font-500"></text>
|
||||
</view>
|
||||
<view class="title-tip text-gray-500">查看更多 》</view>
|
||||
</view>
|
||||
|
||||
<view class=" " style="" @click="more">
|
||||
<wd-card custom-class="card-content">
|
||||
<view class="content pt-2" style="align-items: normal">
|
||||
<view style="width: 280rpx; height: 200rpx">
|
||||
<wd-img
|
||||
:width="'100%'"
|
||||
:height="'100%'"
|
||||
radius="10rpx"
|
||||
src="https://img95.699pic.com/photo/60051/3096.jpg_wh860.jpg"
|
||||
alt="joy"
|
||||
/>
|
||||
</view>
|
||||
<view class="ps-2 flex-content-column">
|
||||
<view class="ps-1 font-size-3">零失败！手把手教你种出又大又圆的土豆</view>
|
||||
<view class="p-1 font-size-3" style="align-items: end">
|
||||
播放量：2000 |2025-8-23
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</wd-card>
|
||||
</view>
|
||||
<view class="p-1" />
|
||||
<!-- <template #footer></template> -->
|
||||
</wd-card>
|
||||
</view>
|
||||
<view class="p-1" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const currentTab = ref<number>(1)
|
||||
uni.setNavigationBarTitle({
|
||||
title: '农业助手', // 运行时修改标题
|
||||
})
|
||||
function changeTab(e) {
|
||||
console.log(e)
|
||||
currentTab.value = e.id
|
||||
}
|
||||
function handleChange(e) {
|
||||
console.log(e)
|
||||
// currentTab.value = e.id
|
||||
}
|
||||
function handleBack() {
|
||||
uni.navigateBack({})
|
||||
}
|
||||
|
||||
function handleBackHome() {
|
||||
uni.reLaunch({ url: '/pages/index/index' })
|
||||
}
|
||||
function more() {
|
||||
console.log('查看更多')
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/list',
|
||||
})
|
||||
}
|
||||
</script>
|
||||
153
src/pages-village-sub/server/index.vue
Normal file
153
src/pages-village-sub/server/index.vue
Normal file
@ -0,0 +1,153 @@
|
||||
<route lang="json5" type="page">
|
||||
{
|
||||
layout: 'default',
|
||||
style: {
|
||||
navigationBarTitleText: '',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
<style>
|
||||
.wd-tabs {
|
||||
background: rgba(0, 0, 0, 0) !important;
|
||||
/* background-color: rgba(0, 0, 0, 0) !important; */
|
||||
}
|
||||
.wd-tabs__nav {
|
||||
/* background: rgba(0, 0, 0, 0) !important; */
|
||||
background-color: rgba(0, 0, 0, 0) !important;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view>
|
||||
<view class=" ">
|
||||
<view class="relative p-2" style="height: 360rpx">
|
||||
<wd-img
|
||||
radius="10rpx"
|
||||
:width="'100%'"
|
||||
:height="'100%'"
|
||||
src="https://bpic.588ku.com/back_pic/06/38/31/7363f87dd4223eb.jpg"
|
||||
/>
|
||||
<view style="position: absolute; top: 10px; right: 0px; left: 0px">
|
||||
<!-- <wd-button size="small">No.1</wd-button> -->
|
||||
<!-- <wd-search hide-cancel placeholder-left placeholder="请输入内容"></wd-search> -->
|
||||
</view>
|
||||
<view
|
||||
style="
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
right: 0px;
|
||||
left: 30rpx;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
"
|
||||
>
|
||||
<!-- <text class="block font-size-4 text-left">泸州市江阳区分水岭镇董允坝村</text> -->
|
||||
</view>
|
||||
</view>
|
||||
<view class="pe-2 ps-2"></view>
|
||||
<wd-card>
|
||||
<wd-grid :gutter="10" :column="4" custom-class=" ">
|
||||
<view
|
||||
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>
|
||||
</view>
|
||||
<view class=" ">
|
||||
<wd-card custom-class=" ">
|
||||
<view class="title pt-2">
|
||||
<wd-tabs
|
||||
v-model="currentTab"
|
||||
@change="handleChange"
|
||||
auto-line-width
|
||||
color="#59CB56"
|
||||
lineWidth="80rpx"
|
||||
>
|
||||
<wd-tab
|
||||
v-for="(item, index) in [
|
||||
{ name: '最新时政', icon: 'home', color: 'green' },
|
||||
{ name: '党建知识', icon: 'heart', color: 'blue' },
|
||||
{ name: '政策解读', icon: 'gift', color: 'orange' },
|
||||
{ name: '党建活动', icon: 'secured', color: 'red' },
|
||||
{ name: '党建学习', icon: 'secured', color: 'red' },
|
||||
{ name: '产品供需', icon: 'home', color: 'green' },
|
||||
{ name: '农资供应', icon: 'heart', color: 'blue' },
|
||||
{ name: '土地流转', icon: 'gift', color: 'orange' },
|
||||
{ name: '技术服务', icon: 'secured', color: 'red' },
|
||||
{ name: '乡村旅游', icon: 'secured', color: 'red' },
|
||||
]"
|
||||
:key="index"
|
||||
:title="`${item.name}`"
|
||||
:name="index"
|
||||
setActive="item.name"
|
||||
></wd-tab>
|
||||
</wd-tabs>
|
||||
</view>
|
||||
|
||||
<view class=" " style="" @click="more">
|
||||
<wd-card custom-class="card-content">
|
||||
<view class="content pt-2" style="align-items: normal">
|
||||
<view style="width: 280rpx; height: 200rpx">
|
||||
<wd-img
|
||||
:width="'100%'"
|
||||
:height="'100%'"
|
||||
radius="10rpx"
|
||||
src="https://bpic.588ku.com/back_pic/06/38/31/7363f87dd4223eb.jpg"
|
||||
alt="joy"
|
||||
/>
|
||||
</view>
|
||||
<view class="ps-2 flex-content-column">
|
||||
<view class="ps-1 font-size-3">零失败！手把手教你种出又大又圆的土豆</view>
|
||||
<view class="p-1 font-size-3" style="align-items: end">
|
||||
<text class="pe-2 font-size-3">2025-8-23</text>
|
||||
<wd-tag custom-class="space font-size-3" type="danger" round>建党知识</wd-tag>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</wd-card>
|
||||
</view>
|
||||
<view class="p-1" />
|
||||
<!-- <template #footer></template> -->
|
||||
</wd-card>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const currentTab = ref<number>(1)
|
||||
uni.setNavigationBarTitle({
|
||||
title: '智慧党建', // 运行时修改标题
|
||||
})
|
||||
function changeTab(e) {
|
||||
console.log(e)
|
||||
currentTab.value = e.id
|
||||
}
|
||||
function handleChange(e) {
|
||||
console.log(e)
|
||||
// currentTab.value = e.id
|
||||
}
|
||||
function handleBack() {
|
||||
uni.navigateBack({})
|
||||
}
|
||||
|
||||
function handleBackHome() {
|
||||
uni.reLaunch({ url: '/pages/index/index' })
|
||||
}
|
||||
function more() {
|
||||
console.log('查看更多')
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/list',
|
||||
})
|
||||
}
|
||||
</script>
|
||||
153
src/pages-village-sub/server/market.vue
Normal file
153
src/pages-village-sub/server/market.vue
Normal file
@ -0,0 +1,153 @@
|
||||
<route lang="json5" type="page">
|
||||
{
|
||||
layout: 'default',
|
||||
style: {
|
||||
navigationBarTitleText: '',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
<style>
|
||||
/* .wd-tabs {
|
||||
background: rgba(0, 0, 0, 0) !important;
|
||||
background-color: rgba(0, 0, 0, 0) !important;
|
||||
} */
|
||||
.wd-tabs__nav {
|
||||
background: rgba(0, 0, 0, 0) !important;
|
||||
background-color: rgba(0, 0, 0, 0) !important;
|
||||
}
|
||||
.wd-table,
|
||||
#table-header > .wd-table__cell {
|
||||
background: rgba(0, 0, 0, 0) !important;
|
||||
background-color: rgba(0, 0, 0, 0) !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
<view>
|
||||
<view class="p-2">
|
||||
<view class="relative" style="height: 360rpx">
|
||||
<wd-img
|
||||
radius="10rpx"
|
||||
:width="'100%'"
|
||||
:height="'100%'"
|
||||
src="https://kscgc.sctv-tf.com/sctv/1/image/public/202208/20220824115112_bnkt9lrxi5.jpg"
|
||||
/>
|
||||
</view>
|
||||
<view class="pt-2">
|
||||
<wd-notice-bar
|
||||
text="这是一条消息提示信息，这是一条消息提示信息，这是一条消息提示信息"
|
||||
prefix="check-outline"
|
||||
closable
|
||||
color="#34D19D"
|
||||
background-color="#f0f9eb"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="">
|
||||
<wd-card custom-class="background_home_card">
|
||||
<template #title>
|
||||
<view class="title pt-2">
|
||||
<view>
|
||||
<text class="text-xl text-sm font-size-4">市场行情</text>
|
||||
<text class="ps-2 text-xl text-sm font-size-3 font-500">反应供需，指引产销决策</text>
|
||||
</view>
|
||||
<view class="title-tip text-gray-500">查看更多 》</view>
|
||||
</view>
|
||||
</template>
|
||||
<view class="">
|
||||
<wd-tabs
|
||||
v-model="currentTab"
|
||||
@change="handleChange"
|
||||
auto-line-width
|
||||
color="#59CB56"
|
||||
lineWidth="80rpx"
|
||||
>
|
||||
<wd-tab
|
||||
v-for="(item, index) in [
|
||||
{ name: '江阳区', icon: 'home', color: 'green' },
|
||||
{ name: '龙马潭区', icon: 'heart', color: 'blue' },
|
||||
{ name: '土地流转', icon: 'gift', color: 'orange' },
|
||||
{ name: '技术服务', icon: 'secured', color: 'red' },
|
||||
{ name: '乡村旅游', icon: 'secured', color: 'red' },
|
||||
{ name: '产品供需', icon: 'home', color: 'green' },
|
||||
{ name: '农资供应', icon: 'heart', color: 'blue' },
|
||||
{ name: '土地流转', icon: 'gift', color: 'orange' },
|
||||
{ name: '技术服务', icon: 'secured', color: 'red' },
|
||||
{ name: '乡村旅游', icon: 'secured', color: 'red' },
|
||||
]"
|
||||
:key="index"
|
||||
:title="`${item.name}`"
|
||||
:name="index"
|
||||
setActive="item.name"
|
||||
></wd-tab>
|
||||
</wd-tabs>
|
||||
</view>
|
||||
<wd-table
|
||||
:data="[
|
||||
{ name: '江阳区', price: '20', parseInt: '20', color: 'red', icon: '↘' },
|
||||
{ name: '龙马潭区', price: '20', parseInt: '20', color: 'red', icon: '↗' },
|
||||
{ name: '土地流转', price: '20', parseInt: '20', color: 'red', icon: '↗' },
|
||||
{ name: '技术服务', price: '20', parseInt: '20', color: 'red', icon: '↗' },
|
||||
{ name: '乡村旅游', price: '20', parseInt: '20', color: 'red', icon: '↗' },
|
||||
{ name: '产品供需', price: '20', parseInt: '20', color: 'red', icon: '↗' },
|
||||
{ name: '农资供应', price: '20', parseInt: '20', color: 'red', icon: '↗' },
|
||||
{ name: '土地流转', price: '20', parseInt: '20', color: 'red', icon: '↗' },
|
||||
{ name: '技术服务', price: '20', parseInt: '20', color: 'red', icon: '↘' },
|
||||
{ name: '乡村旅游', price: '20', parseInt: '20', color: 'red', icon: '↘' },
|
||||
]"
|
||||
:border="false"
|
||||
:stripe="false"
|
||||
:showHeader="true"
|
||||
>
|
||||
<wd-table-col prop="name" label="品种" fixed align="center" width="25%"></wd-table-col>
|
||||
<wd-table-col
|
||||
prop="price"
|
||||
label="当日价格"
|
||||
width="25%"
|
||||
fixed
|
||||
align="center"
|
||||
></wd-table-col>
|
||||
<wd-table-col
|
||||
prop="parseInt"
|
||||
label="涨跌幅"
|
||||
width="25%"
|
||||
fixed
|
||||
align="center"
|
||||
></wd-table-col>
|
||||
<wd-table-col prop="icon" label="走势" width="25%" fixed align="center"></wd-table-col>
|
||||
</wd-table>
|
||||
<template #footer></template>
|
||||
</wd-card>
|
||||
<view class="p-1" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const currentTab = ref<number>(1)
|
||||
uni.setNavigationBarTitle({
|
||||
title: '市场行情', // 运行时修改标题
|
||||
})
|
||||
function changeTab(e) {
|
||||
console.log(e)
|
||||
currentTab.value = e.id
|
||||
}
|
||||
function handleChange(e) {
|
||||
console.log(e)
|
||||
// currentTab.value = e.id
|
||||
}
|
||||
function handleBack() {
|
||||
uni.navigateBack({})
|
||||
}
|
||||
|
||||
function handleBackHome() {
|
||||
uni.reLaunch({ url: '/pages/index/index' })
|
||||
}
|
||||
function more() {
|
||||
console.log('查看更多')
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/list',
|
||||
})
|
||||
}
|
||||
</script>
|
||||
208
src/pages-village-sub/server/rice.vue
Normal file
208
src/pages-village-sub/server/rice.vue
Normal file
@ -0,0 +1,208 @@
|
||||
<route lang="json5" type="page">
|
||||
{
|
||||
layout: 'default',
|
||||
style: {
|
||||
navigationBarTitleText: '',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
<style>
|
||||
.wd-tabs {
|
||||
background: rgba(0, 0, 0, 0) !important;
|
||||
/* background-color: rgba(0, 0, 0, 0) !important; */
|
||||
}
|
||||
.wd-tabs__nav {
|
||||
/* background: rgba(0, 0, 0, 0) !important; */
|
||||
background-color: rgba(0, 0, 0, 0) !important;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view>
|
||||
<view class="pt-3">
|
||||
<wd-card custom-class="">
|
||||
<view class="title pt-2 pb-2">
|
||||
<view>
|
||||
<text class="text-xl text-sm font-size-4 text-black">水稻专题</text>
|
||||
<text class="ps-2 text-xl text-sm font-size-3 font-500"></text>
|
||||
</view>
|
||||
<view class="title-tip text-gray-500">查看更多 》</view>
|
||||
</view>
|
||||
<view>
|
||||
水稻是稻属谷类作物，代表种为稻（学名：Oryza sativa L.）水稻原产于中国和印度，
|
||||
七千年前中国长江流域的先民们就曾种植水稻。水稻是全球主要粮食作物，是保障粮食安全的核心作物。
|
||||
如今，通过杂交育种等技术，水稻产量和抗逆性不断提升，持续守护着全球粮食安全。
|
||||
</view>
|
||||
<wd-grid :column="4" class="pt-2 pb-2">
|
||||
<view
|
||||
v-for="item in [
|
||||
{
|
||||
name: '助农兴产',
|
||||
icon: 'https://img95.699pic.com/photo/60126/7618.jpg_wh860.jpg',
|
||||
color: 'green',
|
||||
price: '320',
|
||||
line_price: '320',
|
||||
},
|
||||
{
|
||||
name: '助农畅销',
|
||||
icon: 'https://img95.699pic.com/photo/60126/7618.jpg_wh860.jpg',
|
||||
price: '320',
|
||||
line_price: '320',
|
||||
},
|
||||
{
|
||||
name: '助农畅销',
|
||||
icon: 'https://img95.699pic.com/photo/60126/7618.jpg_wh860.jpg',
|
||||
price: '320',
|
||||
line_price: '320',
|
||||
},
|
||||
{
|
||||
name: '助农畅销',
|
||||
icon: 'https://img95.699pic.com/photo/60126/7618.jpg_wh860.jpg',
|
||||
price: '320',
|
||||
line_price: '320',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<wd-grid-item use-slot>
|
||||
<view class="detail-box" style="border: none; padding: 0; margin: 0">
|
||||
<wd-img radius="10rpx" :width="'100%'" :height="'120rpx'" :src="item.icon" />
|
||||
</view>
|
||||
</wd-grid-item>
|
||||
</view>
|
||||
</wd-grid>
|
||||
<view class="p-1" />
|
||||
</wd-card>
|
||||
</view>
|
||||
|
||||
<view class="pt-2">
|
||||
<wd-card custom-class="">
|
||||
<view class="title pt-2 pb-2">
|
||||
<view>
|
||||
<text class="text-xl text-sm font-size-4 text-black">水稻专题</text>
|
||||
<text class="ps-2 text-xl text-sm font-size-3 font-500"></text>
|
||||
</view>
|
||||
<view class="title-tip text-gray-500">查看更多 》</view>
|
||||
</view>
|
||||
|
||||
<wd-grid :column="3" class="pt-2 pb-2">
|
||||
<view
|
||||
v-for="item in [
|
||||
{
|
||||
name: '冈优725',
|
||||
icon: 'https://img95.699pic.com/photo/60126/7618.jpg_wh860.jpg',
|
||||
color: 'green',
|
||||
price: '320',
|
||||
line_price: '320',
|
||||
},
|
||||
{
|
||||
name: '川香优2号',
|
||||
icon: 'https://img95.699pic.com/photo/60126/7618.jpg_wh860.jpg',
|
||||
price: '320',
|
||||
line_price: '320',
|
||||
},
|
||||
{
|
||||
name: '德优4727',
|
||||
icon: 'https://img95.699pic.com/photo/60126/7618.jpg_wh860.jpg',
|
||||
price: '320',
|
||||
line_price: '320',
|
||||
},
|
||||
{
|
||||
name: '助农畅销',
|
||||
icon: 'https://img95.699pic.com/photo/60126/7618.jpg_wh860.jpg',
|
||||
price: '320',
|
||||
line_price: '320',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<wd-grid-item use-slot>
|
||||
<view class="detail-box" style="border: none; padding: 0; margin: 0">
|
||||
<wd-img radius="10rpx" :width="'100%'" :height="'160rpx'" :src="item.icon" />
|
||||
<view class="p-2">{{ item.name }}</view>
|
||||
</view>
|
||||
</wd-grid-item>
|
||||
</view>
|
||||
</wd-grid>
|
||||
<view class="p-1" />
|
||||
</wd-card>
|
||||
</view>
|
||||
<view class="pt-2">
|
||||
<wd-card custom-class="">
|
||||
<view class="title pt-2 pb-2">
|
||||
<view>
|
||||
<text class="text-xl text-sm font-size-4 text-black">常见病害</text>
|
||||
<text class="ps-2 text-xl text-sm font-size-3 font-500"></text>
|
||||
</view>
|
||||
<view class="title-tip text-gray-500">查看更多 》</view>
|
||||
</view>
|
||||
|
||||
<wd-grid :column="3" class="pt-2 pb-2">
|
||||
<view
|
||||
v-for="item in [
|
||||
{
|
||||
name: '冈优725',
|
||||
icon: 'https://img95.699pic.com/photo/60126/7618.jpg_wh860.jpg',
|
||||
color: 'green',
|
||||
price: '320',
|
||||
line_price: '320',
|
||||
},
|
||||
{
|
||||
name: '川香优2号',
|
||||
icon: 'https://img95.699pic.com/photo/60126/7618.jpg_wh860.jpg',
|
||||
price: '320',
|
||||
line_price: '320',
|
||||
},
|
||||
{
|
||||
name: '德优4727',
|
||||
icon: 'https://img95.699pic.com/photo/60126/7618.jpg_wh860.jpg',
|
||||
price: '320',
|
||||
line_price: '320',
|
||||
},
|
||||
{
|
||||
name: '助农畅销',
|
||||
icon: 'https://img95.699pic.com/photo/60126/7618.jpg_wh860.jpg',
|
||||
price: '320',
|
||||
line_price: '320',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<wd-grid-item use-slot>
|
||||
<view class="detail-box" style="border: none; padding: 0; margin: 0">
|
||||
<wd-img radius="10rpx" :width="'100%'" :height="'160rpx'" :src="item.icon" />
|
||||
<view class="p-2">{{ item.name }}</view>
|
||||
</view>
|
||||
</wd-grid-item>
|
||||
</view>
|
||||
</wd-grid>
|
||||
<view class="p-1" />
|
||||
</wd-card>
|
||||
</view>
|
||||
<view class="p-1" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const currentTab = ref<number>(1)
|
||||
uni.setNavigationBarTitle({
|
||||
title: '水稻专题', // 运行时修改标题
|
||||
})
|
||||
function changeTab(e) {
|
||||
console.log(e)
|
||||
currentTab.value = e.id
|
||||
}
|
||||
function handleChange(e) {
|
||||
console.log(e)
|
||||
// currentTab.value = e.id
|
||||
}
|
||||
function handleBack() {
|
||||
uni.navigateBack({})
|
||||
}
|
||||
|
||||
function handleBackHome() {
|
||||
uni.reLaunch({ url: '/pages/index/index' })
|
||||
}
|
||||
function more() {
|
||||
console.log('查看更多')
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/list',
|
||||
})
|
||||
}
|
||||
</script>
|
||||
128
src/pages.json
128
src/pages.json
@ -19,7 +19,7 @@
|
||||
"selectedColor": "#018d71",
|
||||
"backgroundColor": "#F8F8F8",
|
||||
"borderStyle": "black",
|
||||
"height": "50px",
|
||||
"height": "60px",
|
||||
"fontSize": "10px",
|
||||
"iconWidth": "24px",
|
||||
"spacing": "3px",
|
||||
@ -39,6 +39,12 @@
|
||||
"text": "关于",
|
||||
"icon": "i-carbon-code",
|
||||
"iconType": "unocss"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/my/index",
|
||||
"text": "我的",
|
||||
"icon": "i-ant-design-user-outlined ",
|
||||
"iconType": "unocss"
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -46,7 +52,7 @@
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"type": "home",
|
||||
"layout": "tabbar",
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "首页"
|
||||
@ -59,7 +65,123 @@
|
||||
"style": {
|
||||
"navigationBarTitleText": "关于"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/index/detail",
|
||||
"type": "page",
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/login/login",
|
||||
"type": "page",
|
||||
"layout": "tabbar",
|
||||
"style": {
|
||||
"navigationBarTitleText": "登录"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/my/index",
|
||||
"type": "page",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/web_view/index",
|
||||
"type": "page",
|
||||
"layout": "heardbg",
|
||||
"style": {
|
||||
"navigationBarTitleText": "",
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
}
|
||||
],
|
||||
"subPackages": []
|
||||
"subPackages": [
|
||||
{
|
||||
"root": "pages-village-sub",
|
||||
"pages": [
|
||||
{
|
||||
"path": "demo/index",
|
||||
"type": "page",
|
||||
"style": {
|
||||
"navigationStyle": "default",
|
||||
"navigationBarTitleText": "分包页面 标题"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "home/index",
|
||||
"type": "page",
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "server/classroom",
|
||||
"type": "page",
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "server/helper",
|
||||
"type": "page",
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "server/index",
|
||||
"type": "page",
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "server/market",
|
||||
"type": "page",
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "server/rice",
|
||||
"type": "page",
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pages-tourism-sub",
|
||||
"pages": [
|
||||
{
|
||||
"path": "demo/index",
|
||||
"type": "page",
|
||||
"style": {
|
||||
"navigationStyle": "default",
|
||||
"navigationBarTitleText": "分包页面 标题"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "home/index",
|
||||
"type": "page",
|
||||
"layout": "default",
|
||||
"style": {
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
123
src/pages/index/detail.vue
Normal file
123
src/pages/index/detail.vue
Normal file
@ -0,0 +1,123 @@
|
||||
<route lang="json5" type="page">
|
||||
{
|
||||
layout: 'default',
|
||||
style: {
|
||||
navigationStyle: 'custom',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
<style>
|
||||
.wd-tabs {
|
||||
background: rgba(0, 0, 0, 0) !important;
|
||||
background-color: rgba(0, 0, 0, 0) !important;
|
||||
}
|
||||
.wd-tabs__nav {
|
||||
background: rgba(0, 0, 0, 0) !important;
|
||||
background-color: rgba(0, 0, 0, 0) !important;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view>
|
||||
<view class="background_home">
|
||||
<wd-navbar
|
||||
title=""
|
||||
left-text=""
|
||||
left-arrow
|
||||
:bordered="false"
|
||||
@click-left="handleBack"
|
||||
custom-style="background: rgba(0, 0, 0, 0) !important;--wot-navbar-color:white;--wot-font-gray-1:white;position: fixed"
|
||||
></wd-navbar>
|
||||
<view class="p-6"></view>
|
||||
<!-- 顶部搜索栏 -->
|
||||
<wd-search hide-cancel placeholder-left placeholder="请输入内容"></wd-search>
|
||||
<view class="p-2">
|
||||
<wd-tabs
|
||||
v-model="currentTab"
|
||||
@change="handleChange"
|
||||
auto-line-width
|
||||
color="#59CB56"
|
||||
lineWidth="40rpx"
|
||||
>
|
||||
<wd-tab
|
||||
v-for="(item, index) in [
|
||||
{ name: '产品供需', icon: 'home', color: 'green' },
|
||||
{ name: '农资供应', icon: 'heart', color: 'blue' },
|
||||
{ name: '土地流转', icon: 'gift', color: 'orange' },
|
||||
{ name: '技术服务', icon: 'secured', color: 'red' },
|
||||
{ name: '乡村旅游', icon: 'secured', color: 'red' },
|
||||
]"
|
||||
:key="index"
|
||||
:title="`${item.name}`"
|
||||
:name="index"
|
||||
setActive="item.name"
|
||||
></wd-tab>
|
||||
</wd-tabs>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="pt-2" style="" @click="more">
|
||||
<wd-card custom-class=" ">
|
||||
<view class="relative pt-2" style="height: 280rpx">
|
||||
<wd-img
|
||||
radius="10rpx"
|
||||
:width="'100%'"
|
||||
:height="'100%'"
|
||||
src="https://img95.699pic.com/photo/50384/2866.jpg_wh860.jpg"
|
||||
/>
|
||||
</view>
|
||||
<view class="content" style="align-items:">
|
||||
<view style="width: 100rpx; height: 100rpx">
|
||||
<wd-img
|
||||
:width="'100%'"
|
||||
:height="'100%'"
|
||||
round
|
||||
src="https://img11.360buyimg.com/imagetools/jfs/t1/143248/37/5695/265818/5f3a8546E98d998a4/745897ca9c9e474b.jpg"
|
||||
alt="joy"
|
||||
/>
|
||||
</view>
|
||||
<view class="ps-2 flex-content-column">
|
||||
<view class="ps-2">
|
||||
<view class="p-1 font-size-4 font-bold color-black">
|
||||
泸州市江阳区分水岭董允坝村
|
||||
<wd-rate :modelValue="5" readonly />
|
||||
</view>
|
||||
<view class="p-1">
|
||||
<wd-tag custom-class="space me-2" mark>景区服务</wd-tag>
|
||||
<wd-tag custom-class="space me-2" type="primary" mark>景区服务</wd-tag>
|
||||
<wd-tag custom-class="space me-2" type="danger" mark>标签</wd-tag>
|
||||
<wd-tag custom-class="space me-2" type="warning" mark>标签</wd-tag>
|
||||
<wd-tag custom-class="space me-2" type="success" mark>标签</wd-tag>
|
||||
</view>
|
||||
<view class="p-1 font-size-3">
|
||||
<wd-icon name="location" size="24rpx" />
|
||||
泸州市江阳区分水岭镇董允坝村1队2号
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</wd-card>
|
||||
</view>
|
||||
<view class="p-1" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const currentTab = ref<number>(0)
|
||||
function handleChange(e) {
|
||||
console.log(e)
|
||||
// currentTab.value = e.id
|
||||
}
|
||||
function handleBack() {
|
||||
uni.navigateBack({})
|
||||
}
|
||||
|
||||
function handleBackHome() {
|
||||
uni.reLaunch({ url: '/pages/index/index' })
|
||||
}
|
||||
function more() {
|
||||
console.log('查看更多')
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/list',
|
||||
})
|
||||
}
|
||||
</script>
|
||||
@ -1,7 +1,7 @@
|
||||
<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
|
||||
<route lang="json5" type="home">
|
||||
{
|
||||
layout: 'tabbar',
|
||||
layout: 'default',
|
||||
style: {
|
||||
// 'custom' 表示开启自定义导航栏，默认 'default'
|
||||
navigationStyle: 'custom',
|
||||
@ -10,73 +10,376 @@
|
||||
}
|
||||
</route>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import PLATFORM from '@/utils/platform'
|
||||
|
||||
defineOptions({
|
||||
name: 'Home',
|
||||
})
|
||||
|
||||
// 获取屏幕边界到安全区域距离
|
||||
let safeAreaInsets
|
||||
let systemInfo
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
// 微信小程序使用新的API
|
||||
systemInfo = uni.getWindowInfo()
|
||||
safeAreaInsets = systemInfo.safeArea
|
||||
? {
|
||||
top: systemInfo.safeArea.top,
|
||||
right: systemInfo.windowWidth - systemInfo.safeArea.right,
|
||||
bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
|
||||
left: systemInfo.safeArea.left,
|
||||
}
|
||||
: null
|
||||
// #endif
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
// 其他平台继续使用uni API
|
||||
systemInfo = uni.getSystemInfoSync()
|
||||
safeAreaInsets = systemInfo.safeAreaInsets
|
||||
// #endif
|
||||
const author = ref('菲鸽')
|
||||
const description = ref(
|
||||
'unibest 是一个集成了多种工具和技术的 uniapp 开发模板，由 uniapp + Vue3 + Ts + Vite5 + UnoCss + VSCode 构建，模板具有代码提示、自动格式化、统一配置、代码片段等功能，并内置了许多常用的基本组件和基本功能，让你编写 uniapp 拥有 best 体验。',
|
||||
)
|
||||
// 测试 uni API 自动引入
|
||||
onLoad(() => {
|
||||
console.log('项目作者:', author.value)
|
||||
})
|
||||
|
||||
console.log('index')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<view class="bg-white px-4 pt-2" :style="{ marginTop: `${safeAreaInsets?.top}px` }">
|
||||
<view class="mt-12">
|
||||
<image src="/static/logo.svg" alt="" class="mx-auto block h-28 w-28" />
|
||||
</view>
|
||||
<view class="mt-4 text-center text-4xl text-[#d14328]">
|
||||
unibest
|
||||
</view>
|
||||
<view class="mb-8 mt-2 text-center text-2xl">
|
||||
最好用的 uniapp 开发模板
|
||||
<view class="">
|
||||
<view class="pt-3 background_home">
|
||||
<!-- 顶部搜索栏 -->
|
||||
<wd-search hide-cancel placeholder-left placeholder="请输入内容"></wd-search>
|
||||
<!-- 横幅广告 -->
|
||||
<view class="relative h-40 p-2">
|
||||
<wd-img
|
||||
radius="10rpx"
|
||||
:width="'100%'"
|
||||
: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 class="m-auto mb-2 max-w-100 text-justify indent text-4">
|
||||
{{ description }}
|
||||
</view>
|
||||
<view class="mt-8 text-center">
|
||||
当前平台是：
|
||||
<text class="text-green-500">
|
||||
{{ PLATFORM.platform }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="mt-4 text-center">
|
||||
模板分支是：
|
||||
<text class="text-green-500">
|
||||
base
|
||||
</text>
|
||||
<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">
|
||||
<wd-card custom-class="card-content">
|
||||
<template #title>
|
||||
<view class="title">
|
||||
<view>寻美乡村</view>
|
||||
<view class="title-tip">
|
||||
<wd-button type="primary" size="small">
|
||||
<wd-text text="更多" color="#ffffff" size="24rpx"></wd-text>
|
||||
<wd-icon name="arrow-right" size="24rpx" />
|
||||
</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<view class="pb-2">回归自然 从新开始</view>
|
||||
<view style="height: 200rpx">
|
||||
<wd-img
|
||||
radius="10rpx"
|
||||
:width="'100%'"
|
||||
:height="'100%'"
|
||||
src="https://img95.699pic.com/photo/50384/2866.jpg_wh860.jpg"
|
||||
/>
|
||||
</view>
|
||||
</wd-card>
|
||||
</view>
|
||||
</wd-col>
|
||||
<wd-col :span="12">
|
||||
<view class="detail-box m-1" style="" @click="moreTourism">
|
||||
<wd-card custom-class="card-content">
|
||||
<template #title>
|
||||
<view class="title">
|
||||
<view>优选榜单</view>
|
||||
<view class="title-tip">
|
||||
<wd-button type="primary" size="small">
|
||||
<wd-text text="更多" color="#ffffff" size="24rpx"></wd-text>
|
||||
<wd-icon name="arrow-right" size="24rpx" />
|
||||
</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<view class="pb-2">优选精品 榜单集萃</view>
|
||||
<view style="height: 200rpx">
|
||||
<wd-grid :column="2">
|
||||
<view
|
||||
v-for="item in [
|
||||
{
|
||||
name: '村庄服务',
|
||||
icon: 'https://img95.699pic.com/photo/50384/2866.jpg_wh860.jpg',
|
||||
color: 'green',
|
||||
price: '320',
|
||||
line_price: '320',
|
||||
},
|
||||
{
|
||||
name: '农资服务',
|
||||
icon: 'https://img95.699pic.com/photo/50384/2866.jpg_wh860.jpg',
|
||||
price: '320',
|
||||
line_price: '320',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<wd-grid-item use-slot>
|
||||
<view class="detail-box" style="border: none; padding: 0; margin: 0">
|
||||
<wd-img
|
||||
radius="10rpx"
|
||||
:width="'140rpx'"
|
||||
:height="'140rpx'"
|
||||
:src="item.icon"
|
||||
/>
|
||||
<view class="text-sm text-gray-500 pt-1">
|
||||
<wd-text
|
||||
size="18rpx"
|
||||
:text="item.price"
|
||||
mode="price"
|
||||
type="error"
|
||||
prefix="￥"
|
||||
/>
|
||||
<wd-text
|
||||
size="16rpx"
|
||||
:text="item.line_price"
|
||||
mode="price"
|
||||
decoration="line-through"
|
||||
prefix="￥"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</wd-grid-item>
|
||||
</view>
|
||||
</wd-grid>
|
||||
</view>
|
||||
</wd-card>
|
||||
</view>
|
||||
</wd-col>
|
||||
<wd-col :span="12">
|
||||
<view class="detail-box m-1" style="" @click="more">
|
||||
<wd-card custom-class="card-content">
|
||||
<template #title>
|
||||
<view class="title">
|
||||
<view>区域特产</view>
|
||||
<view class="title-tip">
|
||||
<wd-button type="primary" size="small">
|
||||
<wd-text text="更多" color="#ffffff" size="24rpx"></wd-text>
|
||||
<wd-icon name="arrow-right" size="24rpx" />
|
||||
</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<view class="pb-2">区特臻品 质纯味美</view>
|
||||
<view style="height: 200rpx">
|
||||
<wd-img
|
||||
radius="10rpx"
|
||||
:width="'100%'"
|
||||
:height="'100%'"
|
||||
src="https://img95.699pic.com/photo/50384/2866.jpg_wh860.jpg"
|
||||
/>
|
||||
</view>
|
||||
</wd-card>
|
||||
</view>
|
||||
</wd-col>
|
||||
|
||||
<wd-col :span="12">
|
||||
<view class="detail-box m-1" style="" @click="more">
|
||||
<wd-card custom-class="card-content">
|
||||
<template #title>
|
||||
<view class="title">
|
||||
<view>助农产销</view>
|
||||
<view class="title-tip">
|
||||
<wd-button type="primary" size="small">
|
||||
<wd-text text="更多" color="#ffffff" size="24rpx"></wd-text>
|
||||
<wd-icon name="arrow-right" size="24rpx" />
|
||||
</wd-button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<view class="pb-2">助农兴产 丰产畅销</view>
|
||||
<view style="height: 200rpx">
|
||||
<wd-grid :column="2">
|
||||
<view
|
||||
v-for="item in [
|
||||
{
|
||||
name: '助农兴产',
|
||||
icon: 'https://img95.699pic.com/photo/50384/2866.jpg_wh860.jpg',
|
||||
color: 'green',
|
||||
price: '320',
|
||||
line_price: '320',
|
||||
},
|
||||
{
|
||||
name: '助农畅销',
|
||||
icon: 'https://img95.699pic.com/photo/50384/2866.jpg_wh860.jpg',
|
||||
price: '320',
|
||||
line_price: '320',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<wd-grid-item use-slot>
|
||||
<view class="detail-box" style="border: none; padding: 0; margin: 0">
|
||||
<wd-img
|
||||
radius="10rpx"
|
||||
:width="'140rpx'"
|
||||
:height="'140rpx'"
|
||||
:src="item.icon"
|
||||
/>
|
||||
<view class="pt-2 pb-2 text-center text-black font-size-3">
|
||||
{{ item.name }}
|
||||
</view>
|
||||
</view>
|
||||
</wd-grid-item>
|
||||
</view>
|
||||
</wd-grid>
|
||||
</view>
|
||||
</wd-card>
|
||||
</view>
|
||||
</wd-col>
|
||||
</wd-row>
|
||||
<wd-cell-group custom-class="background-none pe-2 ps-2">
|
||||
<wd-cell size="large">
|
||||
<template #title>
|
||||
<view>
|
||||
<view class="title">热门发布</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<view class="custom-text font-size-3 text-gray-500">
|
||||
查看更多 》
|
||||
<!-- <wd-icon name="arrow-right" size="24rpx" /> -->
|
||||
</view>
|
||||
</wd-cell>
|
||||
</wd-cell-group>
|
||||
<view class="pe-2 ps-2">
|
||||
<wd-grid :gutter="10" :column="5" custom-class=" ">
|
||||
<wd-button
|
||||
v-for="item in [
|
||||
{
|
||||
name: '农产品',
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
name: '农资供应',
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
name: '土地流转',
|
||||
id: 3,
|
||||
},
|
||||
{
|
||||
name: '技术服务',
|
||||
id: 4,
|
||||
},
|
||||
{
|
||||
name: '乡村旅游',
|
||||
id: 5,
|
||||
},
|
||||
]"
|
||||
:type="item.id === currentTab ? 'primary' : 'none'"
|
||||
size="small"
|
||||
@click="changeTab(item)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</wd-button>
|
||||
</wd-grid>
|
||||
</view>
|
||||
<wd-row class="pe-2 ps-2">
|
||||
<wd-col :span="12">
|
||||
<view class="detail-box m-1" style="" @click="goToShop('https://shop.lihaink.cn/')">
|
||||
<wd-card custom-class="card-content">
|
||||
<view style="height: 200rpx">
|
||||
<wd-img
|
||||
radius="10rpx"
|
||||
:width="'100%'"
|
||||
:height="'100%'"
|
||||
src="https://img95.699pic.com/photo/50384/2866.jpg_wh860.jpg"
|
||||
/>
|
||||
</view>
|
||||
<view class="pt-2 font-size-4 font-bold">xxx蔬菜基地</view>
|
||||
<view class="pt-2 font-size-3">我们这里的食物很新鲜</view>
|
||||
<view class="pt-2 pb-2">
|
||||
<wd-tag custom-class="space">标签</wd-tag>
|
||||
<wd-tag custom-class="space" type="primary">标签</wd-tag>
|
||||
<wd-tag custom-class="space" type="danger">标签</wd-tag>
|
||||
<wd-tag custom-class="space" type="warning">标签</wd-tag>
|
||||
<wd-tag custom-class="space" type="success">标签</wd-tag>
|
||||
</view>
|
||||
</wd-card>
|
||||
</view>
|
||||
</wd-col>
|
||||
</wd-row>
|
||||
|
||||
<view class="p-1"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
// import { toLogin } from '@/libs/login.js'
|
||||
const currentTab = ref(1)
|
||||
function changeTab(e) {
|
||||
console.log(e)
|
||||
currentTab.value = e.id
|
||||
}
|
||||
|
||||
function moreVillage() {
|
||||
console.log('查看乡村')
|
||||
uni.navigateTo({
|
||||
url: '/pages-village-sub/home/index',
|
||||
})
|
||||
}
|
||||
|
||||
function moreTourism() {
|
||||
console.log('查看旅游')
|
||||
uni.navigateTo({
|
||||
url: '/pages-tourism-sub/home/index',
|
||||
})
|
||||
}
|
||||
function more() {
|
||||
console.log('数字乡村详情')
|
||||
uni.navigateTo({
|
||||
url: '/pages/index/detail',
|
||||
})
|
||||
}
|
||||
function goToShop(url) {
|
||||
// if (this.isLogin) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/web_view/index?local_url=${url}&title=区域特产`,
|
||||
})
|
||||
// } else {
|
||||
// this.openAuto()
|
||||
// }
|
||||
}
|
||||
|
||||
// 打开授权
|
||||
function openAuto() {
|
||||
toLogin()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.section {
|
||||
width: 100%;
|
||||
padding: 0 24rpx;
|
||||
box-sizing: border-box;
|
||||
&-slot {
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
20
src/pages/login/login.vue
Normal file
20
src/pages/login/login.vue
Normal file
@ -0,0 +1,20 @@
|
||||
<route lang="json5" type="page">
|
||||
{
|
||||
layout: 'tabbar',
|
||||
style: {
|
||||
navigationBarTitleText: '登录',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<view class=""></view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
//
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
//
|
||||
</style>
|
||||
39
src/pages/my/components/wx-login.vue
Normal file
39
src/pages/my/components/wx-login.vue
Normal file
@ -0,0 +1,39 @@
|
||||
<route lang="json5">
|
||||
{
|
||||
style: { navigationBarTitleText: '登录' },
|
||||
}
|
||||
</route>
|
||||
|
||||
<template>
|
||||
<view class="p-4">
|
||||
<view class="flex items-center leading-6" v-if="hasLogin">
|
||||
<image class="w-8 h-8 rounded-full" :src="userStore.userInfo?.avatar"></image>
|
||||
<view class="ml-2">{{ userStore.userInfo?.nickname }}</view>
|
||||
</view>
|
||||
<view class="flex items-center leading-6" v-else @click="show = true">
|
||||
<view class="i-carbon-user-avatar"></view>
|
||||
<view class="ml-2">点击显示微信头像</view>
|
||||
</view>
|
||||
<fly-login v-model="show" />
|
||||
<fly-content :line="10" />
|
||||
<button v-if="hasLogin" class="mt-2" @click="logout">退出登录</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="WxLogin">
|
||||
import { useUserStore } from '@/store'
|
||||
|
||||
const show = ref(false)
|
||||
const userStore = useUserStore()
|
||||
const hasLogin = computed(() => userStore.userInfo?.nickname)
|
||||
const logout = () => {
|
||||
uni.showModal({
|
||||
title: '确认退出当前账号？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
userStore.clearUserInfo()
|
||||
}
|
||||
},
|
||||
})
|
||||
}
|
||||
</script>
|
||||
37
src/pages/my/index.vue
Normal file
37
src/pages/my/index.vue
Normal file
@ -0,0 +1,37 @@
|
||||
<route lang="json5">
|
||||
{
|
||||
style: { navigationBarTitleText: '我的' },
|
||||
}
|
||||
</route>
|
||||
<template>
|
||||
<view class="ml-4">wx的openid:</view>
|
||||
<view class="ml-4">{{ openId }}</view>
|
||||
<wx-login />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useUserStore } from '@/store'
|
||||
import { http } from '@/utils/http'
|
||||
import WxLogin from './components/wx-login.vue'
|
||||
|
||||
const userStore = useUserStore()
|
||||
const openId = ref('')
|
||||
|
||||
// 用户登录，获取openId
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
success: async ({ code }) => {
|
||||
const res = await http<{ session_key: string; openid: string }>({
|
||||
method: 'GET',
|
||||
url: '/weixin/jscode2session',
|
||||
data: {
|
||||
code,
|
||||
},
|
||||
})
|
||||
console.log('微信登录-1：', res)
|
||||
// {code: 0, msg: "success", data: {session_key: "JTzhLVK+oM3X58uJ/heDcQ==", openid: "oSYa06xPVqjsK-eFYzt0kSPYu1q4"}}
|
||||
openId.value = res.data.openid
|
||||
userStore.setUserInfo({ openid: res.data.openid })
|
||||
},
|
||||
})
|
||||
</script>
|
||||
91
src/pages/web_view/index.vue
Normal file
91
src/pages/web_view/index.vue
Normal file
@ -0,0 +1,91 @@
|
||||
<route lang="json5" type="page">
|
||||
{
|
||||
layout: 'heardbg',
|
||||
style: {
|
||||
navigationBarTitleText: '',
|
||||
navigationStyle: 'custom',
|
||||
navigationBarTextStyle: 'white',
|
||||
},
|
||||
}
|
||||
</route>
|
||||
<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'
|
||||
|
||||
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(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>
|
||||
BIN
src/static/icons/agriculture_course.png
Normal file
BIN
src/static/icons/agriculture_course.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
BIN
src/static/icons/agriculture_service.png
Normal file
BIN
src/static/icons/agriculture_service.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/static/icons/rural_ecommerce.png
Normal file
BIN
src/static/icons/rural_ecommerce.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/static/icons/top_num.png
Normal file
BIN
src/static/icons/top_num.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 846 B |
BIN
src/static/icons/village_service.png
Normal file
BIN
src/static/icons/village_service.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
@ -1,4 +1,5 @@
|
||||
@import './iconfont.css';
|
||||
@import '@/uni.scss';
|
||||
|
||||
.test {
|
||||
// 可以通过 @apply 多个样式封装整体样式
|
||||
@ -7,12 +8,159 @@
|
||||
padding-top: 4px;
|
||||
color: red;
|
||||
}
|
||||
.default-color {
|
||||
color: #70cd6aff;
|
||||
}
|
||||
|
||||
:root,
|
||||
page {
|
||||
background-color: $uni-bg-color;
|
||||
// 修改按主题色
|
||||
// --wot-color-theme: #37c2bc;
|
||||
--wot-color-theme: #70cd6aff;
|
||||
--wot-button-primary-bg-color: #70cd6aff; // 按钮默认颜色
|
||||
--wot-grid-item-padding: 0rpx 10rpx; //gid布局
|
||||
--wot-search-input-height: 60rpx; //搜索框高度
|
||||
|
||||
// 修改按钮背景色
|
||||
// --wot-button-primary-bg-color: green;
|
||||
--wot-tabs-nav-height: 80rpx; //tab滚动条高度
|
||||
|
||||
--wot-grid-item-bg: --wot-color-white, rgba(0, 0, 0, 0); //grid-item统一去边框
|
||||
|
||||
--wot-card-margin: 0 var(--wot-size-side-padding, 20rpx); //card 统一边距
|
||||
|
||||
// background-color: var(--wot-grid-item-bg, var(--wot-color-white, rgb(255, 255, 255)));
|
||||
// --wot-segmented-item-bg-color: #70CD6AFF; //wd-segmentedb 背景颜色
|
||||
}
|
||||
|
||||
.wd-search {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
//渐变背景
|
||||
.background_home {
|
||||
background: linear-gradient(to bottom, #70cd6aff, #f1f1f1); /* 垂直渐变 */
|
||||
}
|
||||
|
||||
//渐变背景
|
||||
.background_home_card {
|
||||
background: linear-gradient(to bottom, #f1f1f1, #70cd6aff); /* 垂直渐变 */
|
||||
}
|
||||
|
||||
.scroll-view-container {
|
||||
white-space: nowrap; // 防止内容换行
|
||||
padding: 20rpx;
|
||||
height: 80rpx;
|
||||
overflow-x: auto; // 允许水平滚动
|
||||
.wd-button {
|
||||
margin-right: 20rpx !important; // 添加间距以防止按钮粘连
|
||||
}
|
||||
}
|
||||
.relative {
|
||||
position: relative;
|
||||
}
|
||||
// .wd-segmented__item.is-active {
|
||||
// background: #70CD6AFF !important;
|
||||
// color: #fff !important;
|
||||
// }
|
||||
|
||||
.background-none {
|
||||
--wot-color-white: rgba(0, 0, 0, 0) !important;
|
||||
background: rgba(0, 0, 0, 0) !important;
|
||||
}
|
||||
// .wd-grid-item__content {
|
||||
// padding: 0px !important;
|
||||
// }
|
||||
//card 样式
|
||||
.card-content {
|
||||
margin: 0px !important;
|
||||
padding: 0px !important;
|
||||
}
|
||||
.wd-grid-item {
|
||||
border-radius: 20rpx;
|
||||
}
|
||||
|
||||
.detail-box {
|
||||
margin: 10rpx 0rpx;
|
||||
background-color: #fff;
|
||||
border: 1rpx solid #dfdfdf;
|
||||
border-radius: 20rpx;
|
||||
padding: 16rpx;
|
||||
}
|
||||
.wd-card__title-content {
|
||||
padding: 10rpx 0 !important;
|
||||
}
|
||||
.content,
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
// font-weight: bold;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.content {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.title {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.title-tip {
|
||||
color: rgba(0, 0, 0, 0.25);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.ellipsis {
|
||||
display: inline-block;
|
||||
/* 在末尾显示省略号 */
|
||||
width: calc(100vw - 340rpx);
|
||||
/* 防止文字换行 */
|
||||
overflow: hidden;
|
||||
/* 隐藏超出部分的文字 */
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
/* 确保元素有宽度 */
|
||||
}
|
||||
$container-width: 100vw;
|
||||
$padding-width: 0rpx;
|
||||
.ellipsis-2 {
|
||||
display: -webkit-box;
|
||||
font-weight: 500;
|
||||
font-size: 40rpx;
|
||||
line-height: 40rpx;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2; /* 限制为2行 */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: normal; /* 允许文字换行 */
|
||||
width: calc($container-width - $padding-width); /* 确保容器有宽度 */
|
||||
// 注意事项：100vw 和 340rpx 的单位不同，可能会导致在某些设备上显示异常。
|
||||
}
|
||||
|
||||
.ellipsis-5 {
|
||||
display: -webkit-box;
|
||||
font-weight: 500;
|
||||
font-size: 40rpx;
|
||||
line-height: 40rpx;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 5; /* 限制为2行 */
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: normal; /* 允许文字换行 */
|
||||
width: calc($container-width - $padding-width); /* 确保容器有宽度 */
|
||||
// 注意事项：100vw 和 340rpx 的单位不同，可能会导致在某些设备上显示异常。
|
||||
}
|
||||
//上下布局
|
||||
.flex-content-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between; /* 这行确保子元素在容器中顶部和底部对齐 */
|
||||
flex: 1; /* 使该容器自适应高度 */
|
||||
min-height: 0; /* 确保在某些情况下仍然能够自适应高度 */
|
||||
}
|
||||
//横向布局
|
||||
.flex-content-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between; /* 这行确保子元素在容器中顶部和底部对齐 */
|
||||
flex: 1; /* 使该容器自适应高度 */
|
||||
min-height: 0; /* 确保在某些情况下仍然能够自适应高度 */
|
||||
}
|
||||
|
||||
@ -16,8 +16,9 @@
|
||||
/* 颜色变量 */
|
||||
|
||||
/* 行为相关颜色 */
|
||||
$uni-color-default: #70cd6aff;
|
||||
$uni-color-primary: #007aff;
|
||||
$uni-color-success: #4cd964;
|
||||
$uni-color-success: #70cd6aff;
|
||||
$uni-color-warning: #f0ad4e;
|
||||
$uni-color-error: #dd524d;
|
||||
|
||||
@ -29,7 +30,7 @@ $uni-text-color-placeholder: #808080;
|
||||
$uni-text-color-disable: #c0c0c0;
|
||||
|
||||
/* 背景颜色 */
|
||||
$uni-bg-color: #fff;
|
||||
$uni-bg-color: #f1f1f1;
|
||||
$uni-bg-color-grey: #f8f8f8;
|
||||
$uni-bg-color-hover: #f1f1f1; // 点击状态颜色
|
||||
$uni-bg-color-mask: rgb(0 0 0 / 40%); // 遮罩颜色
|
||||
|
||||
@ -62,7 +62,7 @@ export default async ({ command, mode }) => {
|
||||
routeBlockLang: 'json5', // 虽然设了默认值，但是vue文件还是要加上 lang="json5", 这样才能很好地格式化
|
||||
// homePage 通过 vue 文件的 route-block 的type="home"来设定
|
||||
// pages 目录为 src/pages，分包目录不能配置在pages目录下
|
||||
// subPackages: ['src/pages-sub'], // 是个数组，可以配置多个，但是不能为pages里面的目录
|
||||
subPackages: ['src/pages-village-sub', 'src/pages-tourism-sub'], // 是个数组，可以配置多个，但是不能为pages里面的目录
|
||||
dts: 'src/types/uni-pages.d.ts',
|
||||
}),
|
||||
UniLayouts(),
|
||||
@ -75,7 +75,7 @@ export default async ({ command, mode }) => {
|
||||
// 自定义插件禁用 vite:vue 插件的 devToolsEnabled，强制编译 vue 模板时 inline 为 true
|
||||
name: 'fix-vite-plugin-vue',
|
||||
configResolved(config) {
|
||||
const plugin = config.plugins.find(p => p.name === 'vite:vue')
|
||||
const plugin = config.plugins.find((p) => p.name === 'vite:vue')
|
||||
if (plugin && plugin.api && plugin.api.options) {
|
||||
plugin.api.options.devToolsEnabled = false
|
||||
}
|
||||
@ -91,7 +91,7 @@ export default async ({ command, mode }) => {
|
||||
// Optimization 插件需要 page.json 文件，故应在 UniPages 插件之后执行
|
||||
Optimization({
|
||||
enable: {
|
||||
'optimization': true,
|
||||
optimization: true,
|
||||
'async-import': true,
|
||||
'async-component': true,
|
||||
},
|
||||
@ -113,14 +113,14 @@ export default async ({ command, mode }) => {
|
||||
},
|
||||
},
|
||||
// 打包分析插件，h5 + 生产环境才弹出
|
||||
UNI_PLATFORM === 'h5'
|
||||
&& mode === 'production'
|
||||
&& visualizer({
|
||||
filename: './node_modules/.cache/visualizer/stats.html',
|
||||
open: true,
|
||||
gzipSize: true,
|
||||
brotliSize: true,
|
||||
}),
|
||||
UNI_PLATFORM === 'h5' &&
|
||||
mode === 'production' &&
|
||||
visualizer({
|
||||
filename: './node_modules/.cache/visualizer/stats.html',
|
||||
open: true,
|
||||
gzipSize: true,
|
||||
brotliSize: true,
|
||||
}),
|
||||
// 只有在 app 平台时才启用 copyNativeRes 插件
|
||||
// UNI_PLATFORM === 'app' && copyNativeRes(),
|
||||
Components({
|
||||
@ -163,7 +163,7 @@ export default async ({ command, mode }) => {
|
||||
[VITE_APP_PROXY_PREFIX]: {
|
||||
target: VITE_SERVER_BASEURL,
|
||||
changeOrigin: true,
|
||||
rewrite: path => path.replace(new RegExp(`^${VITE_APP_PROXY_PREFIX}`), ''),
|
||||
rewrite: (path) => path.replace(new RegExp(`^${VITE_APP_PROXY_PREFIX}`), ''),
|
||||
},
|
||||
}
|
||||
: undefined,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user