页面
This commit is contained in:
parent
75b027411b
commit
a5220394a1
@ -60,6 +60,14 @@
|
|||||||
"navigationBarTitleText": "首页"
|
"navigationBarTitleText": "首页"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"path": "pages/about/detail",
|
||||||
|
"type": "page",
|
||||||
|
"layout": "default",
|
||||||
|
"style": {
|
||||||
|
"navigationBarTitleText": "详情"
|
||||||
|
}
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/about/index",
|
"path": "pages/about/index",
|
||||||
"type": "page",
|
"type": "page",
|
||||||
|
180
src/pages/about/detail.vue
Normal file
180
src/pages/about/detail.vue
Normal file
@ -0,0 +1,180 @@
|
|||||||
|
<!-- 使用 type="home" 属性设置首页,其他页面不需要设置,默认为page;推荐使用json5,更强大,且允许注释 -->
|
||||||
|
<route lang="json5" type="page">
|
||||||
|
{
|
||||||
|
layout: 'default',
|
||||||
|
style: {
|
||||||
|
// 'custom' 表示开启自定义导航栏,默认 'default'
|
||||||
|
navigationBarTitleText: '详情',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</route>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<!-- <StickyNav /> -->
|
||||||
|
<view class="">
|
||||||
|
<view class="background_home">
|
||||||
|
<view>
|
||||||
|
<wd-card custom-class="card-content">
|
||||||
|
<view class="relative" style="height: 680rpx">
|
||||||
|
<wd-swiper
|
||||||
|
value-key="url"
|
||||||
|
custom-text-style="color:#fff"
|
||||||
|
v-if="swiperList"
|
||||||
|
height="680rpx"
|
||||||
|
width="100%"
|
||||||
|
:list="swiperList"
|
||||||
|
autoplay
|
||||||
|
:indicator="{ type: 'dots-bar' }"
|
||||||
|
@change="onChange"
|
||||||
|
></wd-swiper>
|
||||||
|
</view>
|
||||||
|
<view
|
||||||
|
class="m-2 absolute top-65 text-center left-0 right-0 bg-gray-200 bg-opacity-60"
|
||||||
|
style="backdrop-filter: blur(10rpx); border-radius: 20rpx"
|
||||||
|
>
|
||||||
|
<view class="content p-2 text-left" style="align-items: normal">
|
||||||
|
<view class="px-2 flex-content-column">
|
||||||
|
<view class="p-1 font-size-4 color-black">{{ detail.author }}</view>
|
||||||
|
<view class="p-1 ellipsis-2 font-size-3">
|
||||||
|
{{ detail.description }}
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<view class="p-1 font-size-3" style="align-items: end">
|
||||||
|
<text class="pe-2 font-size-3">
|
||||||
|
<wd-icon name="location" size="28rpx" color="#87d76b"></wd-icon>
|
||||||
|
泸州市龙马潭区海吉星路
|
||||||
|
</text>
|
||||||
|
<wd-tag
|
||||||
|
custom-class="space font-size-3 text-right"
|
||||||
|
type="primary"
|
||||||
|
icon="location"
|
||||||
|
round
|
||||||
|
>
|
||||||
|
导航
|
||||||
|
</wd-tag>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</wd-card>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="p-8"></view>
|
||||||
|
<view class="p-2">
|
||||||
|
<wd-card custom-class="card-content m-2">
|
||||||
|
<view class="m-2 p-2 font-size-4 color-black">场所介绍</view>
|
||||||
|
<view class="m-2 px-2" style="backdrop-filter: blur(2rpx); border-radius: 10rpx">
|
||||||
|
<wd-textarea v-html="detail.content" />
|
||||||
|
</view>
|
||||||
|
</wd-card>
|
||||||
|
</view>
|
||||||
|
<view class="p-2">
|
||||||
|
<wd-card custom-class="background-none">
|
||||||
|
<template #title>
|
||||||
|
<view class="title">
|
||||||
|
<view>
|
||||||
|
<text class="text-xl px-2 text-sm font-size-4">更多推荐</text>
|
||||||
|
<text class="px-2 text-xl text-sm font-size-3 color-gray-500"></text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
</wd-card>
|
||||||
|
</view>
|
||||||
|
|
||||||
|
<scroll-view scroll-x="true" class="scroll-view-container">
|
||||||
|
<view
|
||||||
|
class="p-2"
|
||||||
|
style=""
|
||||||
|
@click="more"
|
||||||
|
v-for="item in index_list"
|
||||||
|
v-if="item.id != detail.id"
|
||||||
|
>
|
||||||
|
<wd-card custom-class="card-content">
|
||||||
|
<view class="content p-2" style="align-items: normal" @click="goPage(item)">
|
||||||
|
<view class="px-2 flex-content-column">
|
||||||
|
<view class="px-1 font-size-4 color-black">{{ item.author }}</view>
|
||||||
|
<view class="px-1 font-size-3 ellipsis-2">{{ item.description }}</view>
|
||||||
|
|
||||||
|
<view class="p-1 font-size-3" style="align-items: end">
|
||||||
|
<text class="pe-2 font-size-3">泸州市龙马潭区海吉星路</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="relative" style="width: 280rpx; height: 200rpx">
|
||||||
|
<wd-img :width="'100%'" :height="'100%'" radius="20rpx" :src="item.cover" alt="joy" />
|
||||||
|
<view
|
||||||
|
class="m-2 p-1 absolute bottom-0 text-right right-0 text-white bg-black bg-opacity-20"
|
||||||
|
style="backdrop-filter: blur(2rpx); border-radius: 10rpx"
|
||||||
|
>
|
||||||
|
<text class="block font-size-3 text-left">{{ item.category_name }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</wd-card>
|
||||||
|
</view>
|
||||||
|
</scroll-view>
|
||||||
|
<view class="p-1"></view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import {
|
||||||
|
getArticleCategoryAPI,
|
||||||
|
getArticleIndexAPI,
|
||||||
|
getArticleDetailAPI,
|
||||||
|
} from '@/service/crmeb/product.ts'
|
||||||
|
import { useUserStore } from '@/store'
|
||||||
|
import { getUrl, getWebUrl } from '@/utils'
|
||||||
|
|
||||||
|
const userStore = useUserStore()
|
||||||
|
const hasLogin = computed(() => userStore.userInfo?.id)
|
||||||
|
import { defineComponent } from 'vue'
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
banner_list: [],
|
||||||
|
swiperList: [],
|
||||||
|
show: false,
|
||||||
|
index_list: {},
|
||||||
|
detail: {},
|
||||||
|
category: {},
|
||||||
|
currentTab: 1,
|
||||||
|
city: '',
|
||||||
|
title: '',
|
||||||
|
id: 1,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
async onLoad(option) {
|
||||||
|
this.id = option.id || 1
|
||||||
|
this.getDetail(this.id)
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
async getIndex(category_id) {
|
||||||
|
const res = await getArticleIndexAPI({ category_id: category_id })
|
||||||
|
// 使用正确的 map 方法返回新数组
|
||||||
|
this.index_list = res.data
|
||||||
|
},
|
||||||
|
async getDetail(id) {
|
||||||
|
const res = await getArticleDetailAPI({ id: id })
|
||||||
|
// 使用正确的 map 方法返回新数组
|
||||||
|
this.detail = res.data
|
||||||
|
this.getIndex(this.detail['category_id'])
|
||||||
|
this.swiperList = res.data['images']
|
||||||
|
},
|
||||||
|
goPage(item) {
|
||||||
|
getUrl('/pages/about/detail?id=' + item.id)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.section {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 24rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
&-slot {
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
@ -60,7 +60,7 @@
|
|||||||
<scroll-view scroll-x="true" class="scroll-view-container">
|
<scroll-view scroll-x="true" class="scroll-view-container">
|
||||||
<view class="p-2" style="" @click="more" v-for="item in index_list">
|
<view class="p-2" style="" @click="more" v-for="item in index_list">
|
||||||
<wd-card custom-class="card-content">
|
<wd-card custom-class="card-content">
|
||||||
<view class="content p-2" style="align-items: normal">
|
<view class="content p-2" style="align-items: normal" @click="goPage(item)">
|
||||||
<view class="ps-2 flex-content-column">
|
<view class="ps-2 flex-content-column">
|
||||||
<view class="ps-1 font-size-4 font-bold color-black">{{ item.author }}</view>
|
<view class="ps-1 font-size-4 font-bold color-black">{{ item.author }}</view>
|
||||||
<view class="ps-1 font-size-3 ellipsis-2">{{ item.description }}</view>
|
<view class="ps-1 font-size-3 ellipsis-2">{{ item.description }}</view>
|
||||||
@ -140,6 +140,9 @@ export default defineComponent({
|
|||||||
// 使用正确的 map 方法返回新数组
|
// 使用正确的 map 方法返回新数组
|
||||||
this.detail = res.data
|
this.detail = res.data
|
||||||
},
|
},
|
||||||
|
goPage(item) {
|
||||||
|
getUrl('/pages/about/detail?id=' + item.id)
|
||||||
|
},
|
||||||
|
|
||||||
more(item) {
|
more(item) {
|
||||||
console.log(item)
|
console.log(item)
|
||||||
|
@ -42,7 +42,7 @@
|
|||||||
>
|
>
|
||||||
<!-- <wd-search hide-cancel placeholder-left placeholder="请输入内容"></wd-search> -->
|
<!-- <wd-search hide-cancel placeholder-left placeholder="请输入内容"></wd-search> -->
|
||||||
<text class="block font-size-4 text-left">{{ city }}</text>
|
<text class="block font-size-4 text-left">{{ city }}</text>
|
||||||
<text class="block font-size-3 text-left">
|
<text class="block font-size-3 text-left ellipsis-2">
|
||||||
{{ title }}
|
{{ title }}
|
||||||
</text>
|
</text>
|
||||||
</view>
|
</view>
|
||||||
@ -121,27 +121,29 @@
|
|||||||
"
|
"
|
||||||
v-for="item in product_30"
|
v-for="item in product_30"
|
||||||
>
|
>
|
||||||
<wd-card custom-class="card-content">
|
<view class="py-2">
|
||||||
<view style="height: 200rpx; width: 300rpx">
|
<wd-card custom-class="card-content">
|
||||||
<wd-img radius="20rpx" :width="'100%'" :height="'100%'" :src="item.image" />
|
<view style="height: 200rpx; width: 300rpx">
|
||||||
</view>
|
<wd-img radius="20rpx" :width="'100%'" :height="'100%'" :src="item.image" />
|
||||||
<view class="ps-2 pt-2 font-size-4 font-bold">{{ item.store_name }}</view>
|
|
||||||
<view class="ps-2 pt-2 font-size-3 ellipsis">{{ item.store_info }}</view>
|
|
||||||
<view class="ps-2 pt-2 pb-2">
|
|
||||||
<view class="text-sm text-gray-500 text-left">
|
|
||||||
<wd-text size="20rpx" color="red" :text="item.price" mode="price" prefix="¥" />
|
|
||||||
<wd-text size="20rpx" color="red" text="券后价" mode="text" prefix=" " />
|
|
||||||
<wd-text
|
|
||||||
size="18rpx"
|
|
||||||
color="gray"
|
|
||||||
:text="item.ot_price"
|
|
||||||
mode="price"
|
|
||||||
decoration="line-through"
|
|
||||||
prefix="¥"
|
|
||||||
/>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
<view class="ps-2 pt-2 font-size-4 font-bold">{{ item.store_name }}</view>
|
||||||
</wd-card>
|
<view class="ps-2 pt-2 font-size-3 ellipsis">{{ item.store_info }}</view>
|
||||||
|
<view class="ps-2 pt-2 pb-2">
|
||||||
|
<view class="text-sm text-gray-500 text-left">
|
||||||
|
<wd-text size="20rpx" color="red" :text="item.price" mode="price" prefix="¥" />
|
||||||
|
<wd-text size="20rpx" color="red" text="券后价" mode="text" prefix=" " />
|
||||||
|
<wd-text
|
||||||
|
size="18rpx"
|
||||||
|
color="gray"
|
||||||
|
:text="item.ot_price"
|
||||||
|
mode="price"
|
||||||
|
decoration="line-through"
|
||||||
|
prefix="¥"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</wd-card>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
@ -177,20 +179,13 @@
|
|||||||
>
|
>
|
||||||
<wd-card custom-class="card-content">
|
<wd-card custom-class="card-content">
|
||||||
<view class="relative" style="height: 380rpx">
|
<view class="relative" style="height: 380rpx">
|
||||||
<wd-img
|
<wd-img radius="20rpx" :width="'100%'" :height="'100%'" :src="current_item.cover" />
|
||||||
radius="20rpx"
|
|
||||||
:width="'100%'"
|
|
||||||
:height="'100%'"
|
|
||||||
src="https://newbbs-fd.zol-img.com.cn/t_s800x2000/g5/M00/05/03/ChMkJ1kRrUGIU6bFAB7EyXOo1FoAAcQtwIB8tMAHsTh613.jpg"
|
|
||||||
/>
|
|
||||||
<view
|
<view
|
||||||
class="m-2 p-2 absolute bottom-0 text-center left-0 right-0 text-white bg-gray-300 bg-opacity-5"
|
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"
|
style="backdrop-filter: blur(2rpx); border-radius: 10rpx"
|
||||||
>
|
>
|
||||||
<text class="block font-size-4 text-left">三江区街道</text>
|
<text class="block font-size-4 text-left">{{ current_item.title }}</text>
|
||||||
<text class="block font-size-3 text-left">
|
<view class="px-1 font-size-3 ellipsis-2">{{ current_item.description }}</view>
|
||||||
因举办古韵悠然的传统民俗文化节热度飙升,在这里,你能感受到乡村文化的深厚底蕴和无穷魅力。
|
|
||||||
</text>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</wd-card>
|
</wd-card>
|
||||||
@ -200,39 +195,13 @@
|
|||||||
<view class="p-2">
|
<view class="p-2">
|
||||||
<scroll-view scroll-x="true" class="scroll-view-container">
|
<scroll-view scroll-x="true" class="scroll-view-container">
|
||||||
<wd-button
|
<wd-button
|
||||||
v-for="item in [
|
v-for="item in index_eat"
|
||||||
{
|
|
||||||
name: '农产品',
|
|
||||||
id: 1,
|
|
||||||
icon: 'https://newbbs-fd.zol-img.com.cn/t_s800x2000/g5/M00/05/03/ChMkJ1kRrUGIU6bFAB7EyXOo1FoAAcQtwIB8tMAHsTh613.jpg',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '农资供应',
|
|
||||||
id: 2,
|
|
||||||
icon: 'https://newbbs-fd.zol-img.com.cn/t_s800x2000/g5/M00/05/03/ChMkJ1kRrUGIU6bFAB7EyXOo1FoAAcQtwIB8tMAHsTh613.jpg',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '土地流转',
|
|
||||||
id: 3,
|
|
||||||
icon: 'https://newbbs-fd.zol-img.com.cn/t_s800x2000/g5/M00/05/03/ChMkJ1kRrUGIU6bFAB7EyXOo1FoAAcQtwIB8tMAHsTh613.jpg',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '技术服务',
|
|
||||||
id: 4,
|
|
||||||
icon: 'https://newbbs-fd.zol-img.com.cn/t_s800x2000/g5/M00/05/03/ChMkJ1kRrUGIU6bFAB7EyXOo1FoAAcQtwIB8tMAHsTh613.jpg',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '乡村旅游',
|
|
||||||
id: 5,
|
|
||||||
icon: 'https://newbbs-fd.zol-img.com.cn/t_s800x2000/g5/M00/05/03/ChMkJ1kRrUGIU6bFAB7EyXOo1FoAAcQtwIB8tMAHsTh613.jpg',
|
|
||||||
},
|
|
||||||
]"
|
|
||||||
:type="item.id === currentTab ? 'primary' : 'warning'"
|
:type="item.id === currentTab ? 'primary' : 'warning'"
|
||||||
size="large"
|
size="large"
|
||||||
@click="changeTab(item)"
|
@click="changeTab(item)"
|
||||||
:custom-style="`background-image: url('${item.icon}'); background-size: cover;border-radius: 10rpx;`"
|
:custom-style="`background-image: url('${item.cover}'); background-size: cover;border-radius: 10rpx;`"
|
||||||
>
|
>
|
||||||
{{ item.name }}
|
{{ item.title }}
|
||||||
</wd-button>
|
</wd-button>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
@ -256,39 +225,7 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="p-1">
|
<view class="p-1">
|
||||||
<wd-row class=" ">
|
<wd-row class=" ">
|
||||||
<wd-col
|
<wd-col :span="12" v-for="item in product_30">
|
||||||
:span="12"
|
|
||||||
v-for="item in [
|
|
||||||
{
|
|
||||||
name: '农产品',
|
|
||||||
id: 1,
|
|
||||||
icon: 'https://newbbs-fd.zol-img.com.cn/t_s800x2000/g5/M00/05/03/ChMkJ1kRrUGIU6bFAB7EyXOo1FoAAcQtwIB8tMAHsTh613.jpg',
|
|
||||||
price: '320',
|
|
||||||
line_price: '320',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '农资供应',
|
|
||||||
id: 2,
|
|
||||||
icon: 'https://newbbs-fd.zol-img.com.cn/t_s800x2000/g5/M00/05/03/ChMkJ1kRrUGIU6bFAB7EyXOo1FoAAcQtwIB8tMAHsTh613.jpg',
|
|
||||||
price: '320',
|
|
||||||
line_price: '320',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '土地流转',
|
|
||||||
id: 3,
|
|
||||||
icon: 'https://newbbs-fd.zol-img.com.cn/t_s800x2000/g5/M00/05/03/ChMkJ1kRrUGIU6bFAB7EyXOo1FoAAcQtwIB8tMAHsTh613.jpg',
|
|
||||||
price: '320',
|
|
||||||
line_price: '320',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '技术服务',
|
|
||||||
id: 4,
|
|
||||||
icon: 'https://newbbs-fd.zol-img.com.cn/t_s800x2000/g5/M00/05/03/ChMkJ1kRrUGIU6bFAB7EyXOo1FoAAcQtwIB8tMAHsTh613.jpg',
|
|
||||||
price: '320',
|
|
||||||
line_price: '320',
|
|
||||||
},
|
|
||||||
]"
|
|
||||||
>
|
|
||||||
<view
|
<view
|
||||||
class="p-1"
|
class="p-1"
|
||||||
style=""
|
style=""
|
||||||
@ -299,32 +236,29 @@
|
|||||||
})
|
})
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
<wd-card custom-class="card-content">
|
<view class="py-2">
|
||||||
<view style="height: 200rpx">
|
<wd-card custom-class="card-content">
|
||||||
<wd-img
|
<view style="height: 200rpx">
|
||||||
radius="20rpx"
|
<wd-img radius="20rpx" :width="'100%'" :height="'100%'" :src="item.image" />
|
||||||
:width="'100%'"
|
|
||||||
:height="'100%'"
|
|
||||||
src="https://newbbs-fd.zol-img.com.cn/t_s800x2000/g5/M00/05/03/ChMkJ1kRrUGIU6bFAB7EyXOo1FoAAcQtwIB8tMAHsTh613.jpg"
|
|
||||||
/>
|
|
||||||
</view>
|
|
||||||
<view class="ps-2 pt-2 font-size-4 font-bold">xxx蔬菜基地</view>
|
|
||||||
<view class="ps-2 pt-2 font-size-3">我们这里的食物很新鲜</view>
|
|
||||||
<view class="ps-2 pt-2 pb-2">
|
|
||||||
<view class="text-sm text-gray-500 text-left">
|
|
||||||
<wd-text size="20rpx" color="red" :text="item.price" mode="price" prefix="¥" />
|
|
||||||
<wd-text size="20rpx" color="red" text="券后价" mode="text" prefix=" " />
|
|
||||||
<wd-text
|
|
||||||
size="18rpx"
|
|
||||||
color="gray"
|
|
||||||
:text="item.line_price"
|
|
||||||
mode="price"
|
|
||||||
decoration="line-through"
|
|
||||||
prefix="¥"
|
|
||||||
/>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
<view class="ps-2 pt-2 font-size-4 font-bold">{{ item.store_name }}</view>
|
||||||
</wd-card>
|
<view class="ps-2 pt-2 font-size-3 ellipsis">{{ item.store_info }}</view>
|
||||||
|
<view class="ps-2 pt-2 pb-2">
|
||||||
|
<view class="text-sm text-gray-500 text-left">
|
||||||
|
<wd-text size="20rpx" color="red" :text="item.price" mode="price" prefix="¥" />
|
||||||
|
<wd-text size="20rpx" color="red" text="券后价" mode="text" prefix=" " />
|
||||||
|
<wd-text
|
||||||
|
size="18rpx"
|
||||||
|
color="gray"
|
||||||
|
:text="item.ot_price"
|
||||||
|
mode="price"
|
||||||
|
decoration="line-through"
|
||||||
|
prefix="¥"
|
||||||
|
/>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</wd-card>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</wd-col>
|
</wd-col>
|
||||||
</wd-row>
|
</wd-row>
|
||||||
@ -348,36 +282,26 @@
|
|||||||
</wd-card>
|
</wd-card>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view
|
<view class="p-2">
|
||||||
class="p-2"
|
<view class="py-2" v-for="item in index_eat" @click="goPage(item)">
|
||||||
style=""
|
<wd-card custom-class="card-content">
|
||||||
@click="
|
<view class="content p-2" style="align-items: normal">
|
||||||
more({
|
<view style="width: 280rpx; height: 200rpx">
|
||||||
type: 2,
|
<wd-img :width="'100%'" :height="'100%'" radius="20rpx" :src="item.cover" alt="joy" />
|
||||||
url: ' ',
|
</view>
|
||||||
})
|
<view class="ps-2 flex-content-column">
|
||||||
"
|
<view class="ps-1 font-size-3 font-bold">{{ item.title }}</view>
|
||||||
>
|
<view class="px-1 font-size-3 ellipsis-2">{{ item.description }}</view>
|
||||||
<wd-card custom-class="card-content">
|
<view class="p-1 font-size-3" style="align-items: end">
|
||||||
<view class="content p-2" style="align-items: normal">
|
<text class="pe-2 font-size-3">2025-8-23</text>
|
||||||
<view style="width: 280rpx; height: 200rpx">
|
<wd-tag custom-class="space font-size-3" type="danger" round>
|
||||||
<wd-img
|
{{ item.category_name }}
|
||||||
:width="'100%'"
|
</wd-tag>
|
||||||
:height="'100%'"
|
</view>
|
||||||
radius="20rpx"
|
|
||||||
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 font-bold">零失败!手把手教你种出又大又圆的土豆</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>
|
</view>
|
||||||
</view>
|
</wd-card>
|
||||||
</wd-card>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<view class="p-2">
|
<view class="p-2">
|
||||||
@ -399,75 +323,31 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="p-1">
|
<view class="p-1">
|
||||||
<wd-row class=" ">
|
<wd-row class=" ">
|
||||||
<wd-col
|
<wd-col :span="12" v-for="item in index_eat">
|
||||||
:span="12"
|
<view class="p-1">
|
||||||
v-for="item in [
|
<view class="py-2" @click="goPage(item)">
|
||||||
{
|
<wd-card custom-class="card-content">
|
||||||
name: '农产品',
|
<view style="height: 200rpx">
|
||||||
id: 1,
|
<wd-img radius="20rpx" :width="'100%'" :height="'100%'" :src="item.cover" />
|
||||||
icon: 'https://newbbs-fd.zol-img.com.cn/t_s800x2000/g5/M00/05/03/ChMkJ1kRrUGIU6bFAB7EyXOo1FoAAcQtwIB8tMAHsTh613.jpg',
|
|
||||||
price: '320',
|
|
||||||
line_price: '320',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '农资供应',
|
|
||||||
id: 2,
|
|
||||||
icon: 'https://newbbs-fd.zol-img.com.cn/t_s800x2000/g5/M00/05/03/ChMkJ1kRrUGIU6bFAB7EyXOo1FoAAcQtwIB8tMAHsTh613.jpg',
|
|
||||||
price: '320',
|
|
||||||
line_price: '320',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '土地流转',
|
|
||||||
id: 3,
|
|
||||||
icon: 'https://newbbs-fd.zol-img.com.cn/t_s800x2000/g5/M00/05/03/ChMkJ1kRrUGIU6bFAB7EyXOo1FoAAcQtwIB8tMAHsTh613.jpg',
|
|
||||||
price: '320',
|
|
||||||
line_price: '320',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: '技术服务',
|
|
||||||
id: 4,
|
|
||||||
icon: 'https://newbbs-fd.zol-img.com.cn/t_s800x2000/g5/M00/05/03/ChMkJ1kRrUGIU6bFAB7EyXOo1FoAAcQtwIB8tMAHsTh613.jpg',
|
|
||||||
price: '320',
|
|
||||||
line_price: '320',
|
|
||||||
},
|
|
||||||
]"
|
|
||||||
>
|
|
||||||
<view
|
|
||||||
class="p-1"
|
|
||||||
style=""
|
|
||||||
@click="
|
|
||||||
more({
|
|
||||||
type: 2,
|
|
||||||
url: ' ',
|
|
||||||
})
|
|
||||||
"
|
|
||||||
>
|
|
||||||
<wd-card custom-class="card-content">
|
|
||||||
<view style="height: 200rpx">
|
|
||||||
<wd-img
|
|
||||||
radius="20rpx"
|
|
||||||
:width="'100%'"
|
|
||||||
:height="'100%'"
|
|
||||||
src="https://newbbs-fd.zol-img.com.cn/t_s800x2000/g5/M00/05/03/ChMkJ1kRrUGIU6bFAB7EyXOo1FoAAcQtwIB8tMAHsTh613.jpg"
|
|
||||||
/>
|
|
||||||
</view>
|
|
||||||
<view class="ps-2 pt-2 font-size-4 font-bold">xxx蔬菜基地</view>
|
|
||||||
<view class="ps-2 pt-2 font-size-3">我们这里的食物很新鲜</view>
|
|
||||||
<view class="ps-2 pt-2 pb-2">
|
|
||||||
<view class="text-sm text-gray-500 text-left">
|
|
||||||
<wd-text size="20rpx" color="red" :text="item.price" mode="price" prefix="¥" />
|
|
||||||
<wd-text size="20rpx" color="red" text="券后价" mode="text" prefix=" " />
|
|
||||||
<wd-text
|
|
||||||
size="18rpx"
|
|
||||||
color="gray"
|
|
||||||
:text="item.line_price"
|
|
||||||
mode="price"
|
|
||||||
decoration="line-through"
|
|
||||||
prefix="¥"
|
|
||||||
/>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
<view class="ps-2 pt-2 font-size-4 font-bold">{{ item.author }}</view>
|
||||||
</wd-card>
|
<view class="ps-2 pt-2 font-size-3 ellipsis">{{ item.description }}</view>
|
||||||
|
<view class="ps-2 pt-2 pb-2">
|
||||||
|
<!-- <view class="text-sm text-gray-500 text-left">
|
||||||
|
<wd-text size="20rpx" color="red" :text="item.price" mode="price" prefix="¥" />
|
||||||
|
<wd-text size="20rpx" color="red" text="券后价" mode="text" prefix=" " />
|
||||||
|
<wd-text
|
||||||
|
size="18rpx"
|
||||||
|
color="gray"
|
||||||
|
:text="item.ot_price"
|
||||||
|
mode="price"
|
||||||
|
decoration="line-through"
|
||||||
|
prefix="¥"
|
||||||
|
/>
|
||||||
|
</view> -->
|
||||||
|
</view>
|
||||||
|
</wd-card>
|
||||||
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</wd-col>
|
</wd-col>
|
||||||
</wd-row>
|
</wd-row>
|
||||||
@ -482,7 +362,11 @@
|
|||||||
import { getProductAPI, getBannerAPI } from '@/service/crmeb/product.ts'
|
import { getProductAPI, getBannerAPI } from '@/service/crmeb/product.ts'
|
||||||
import { useUserStore } from '@/store'
|
import { useUserStore } from '@/store'
|
||||||
import { getUrl, getWebUrl } from '@/utils'
|
import { getUrl, getWebUrl } from '@/utils'
|
||||||
|
import {
|
||||||
|
getArticleCategoryAPI,
|
||||||
|
getArticleIndexAPI,
|
||||||
|
getArticleDetailAPI,
|
||||||
|
} from '@/service/crmeb/product.ts'
|
||||||
const userStore = useUserStore()
|
const userStore = useUserStore()
|
||||||
const hasLogin = computed(() => userStore.userInfo?.id)
|
const hasLogin = computed(() => userStore.userInfo?.id)
|
||||||
import { defineComponent } from 'vue'
|
import { defineComponent } from 'vue'
|
||||||
@ -493,7 +377,11 @@ export default defineComponent({
|
|||||||
show: false,
|
show: false,
|
||||||
product_30: {},
|
product_30: {},
|
||||||
swiperList: {},
|
swiperList: {},
|
||||||
|
index_eat: {},
|
||||||
|
index_live: {},
|
||||||
|
index_play: {},
|
||||||
|
index_purchase: {},
|
||||||
|
current_item: {},
|
||||||
currentTab: 1,
|
currentTab: 1,
|
||||||
city: '',
|
city: '',
|
||||||
title: '',
|
title: '',
|
||||||
@ -502,6 +390,7 @@ export default defineComponent({
|
|||||||
async onLoad(option) {
|
async onLoad(option) {
|
||||||
this.getBanner()
|
this.getBanner()
|
||||||
this.getProduct(30)
|
this.getProduct(30)
|
||||||
|
this.getArticle()
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
async getBanner() {
|
async getBanner() {
|
||||||
@ -532,11 +421,23 @@ export default defineComponent({
|
|||||||
console.log(e)
|
console.log(e)
|
||||||
// this.currentTab = e.id
|
// this.currentTab = e.id
|
||||||
},
|
},
|
||||||
// async submitGroup() {
|
|
||||||
// const res = await setGroupAPI(this.addressinfo)
|
|
||||||
// this.show = false
|
|
||||||
// },
|
|
||||||
|
|
||||||
|
async getArticle() {
|
||||||
|
this.index_eat = await this.getIndex(1)
|
||||||
|
this.current_item = this.index_eat[0] || {}
|
||||||
|
this.index_live = await this.getIndex(2)
|
||||||
|
|
||||||
|
this.index_play = await this.getIndex(3)
|
||||||
|
this.index_purchase = await this.getIndex(4)
|
||||||
|
},
|
||||||
|
async getIndex(category_id) {
|
||||||
|
const res = await getArticleIndexAPI({ category_id: category_id })
|
||||||
|
// 使用正确的 map 方法返回新数组
|
||||||
|
return res.data
|
||||||
|
},
|
||||||
|
goPage(item) {
|
||||||
|
getUrl('/pages/about/detail?id=' + item.id)
|
||||||
|
},
|
||||||
moreVillage() {
|
moreVillage() {
|
||||||
console.log('查看乡村')
|
console.log('查看乡村')
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
|
@ -44,6 +44,14 @@ page {
|
|||||||
background: linear-gradient(to bottom, #87d76b, #f1f1f1); /* 垂直渐变 */
|
background: linear-gradient(to bottom, #87d76b, #f1f1f1); /* 垂直渐变 */
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.color-black {
|
||||||
|
color: #333333 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.default-color {
|
||||||
|
color: #87d76b;
|
||||||
|
}
|
||||||
|
|
||||||
//渐变背景
|
//渐变背景
|
||||||
.background_home_card {
|
.background_home_card {
|
||||||
background: linear-gradient(to bottom, #f1f1f1, #87d76b); /* 垂直渐变 */
|
background: linear-gradient(to bottom, #f1f1f1, #87d76b); /* 垂直渐变 */
|
||||||
@ -145,7 +153,7 @@ $padding-width: 20rpx;
|
|||||||
}
|
}
|
||||||
.ellipsis-2 {
|
.ellipsis-2 {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
font-weight: 500;
|
// font-weight: 500;
|
||||||
font-size: 40rpx;
|
font-size: 40rpx;
|
||||||
line-height: 40rpx;
|
line-height: 40rpx;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
@ -159,7 +167,7 @@ $padding-width: 20rpx;
|
|||||||
|
|
||||||
.ellipsis-5 {
|
.ellipsis-5 {
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
font-weight: 500;
|
// font-weight: 500;
|
||||||
font-size: 40rpx;
|
font-size: 40rpx;
|
||||||
line-height: 40rpx;
|
line-height: 40rpx;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user