odjbin/pupil
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

首页初次对接口

Browse Source
This commit is contained in:
clay
2022-12-25 16:05:39 +08:00
parent 4050e638f0
commit fd6f5b5390
7 changed files with 305 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
components/certifiedCj/certifiedCj.vue
View File

@@ -1,16 +1,17 @@
<template>
<view>
<view class="xw_content" v-for="(item,index) in cjsList" :key="index" @click="clickCj(index)">
<u--image :src="item.src" width="112rpx" height="112rpx" :lazy-load="true">
<view class="xw_content" v-for="(item,index) in cjsList" :key="index" @click="clickCj(item)">
<u--image :src="item.cover" width="112rpx" height="112rpx" :lazy-load="true">
</u--image>
<view class="xw_right">
<view class="xw_title">
{{item.title}}
{{item.name}}
</view>
<view style="display: flex;">
<text class="cj_tags" v-for="(tagsItem,tagsIndex) in item.tags" :key="tagsIndex">
<!-- <text class="cj_tags" v-for="(tagsItem,tagsIndex) in item.tags" :key="tagsIndex">
{{tagsItem.tag}}
</text>
</text> -->
<text class="cj_tags">{{item.tag}}</text>
</view>
</view>
</view>
@@ -21,48 +22,56 @@
export default {
data() {
return {
cjsList: [
cjsList: [{
src: '/static/report/zhanwei_xf(1).png',
title: '西安兴沃丰餐饮管理有限责任公司',
tags: [{
tag: '咖啡'
},
{
tag: '饮品'
}
]
},
{
src: '/static/report/zhanwei_xf(1).png',
title: '福建省海纳川食品有限公司',
tags: [{
tag: '活冻鲍鱼'
},
{
tag: '鲍鱼罐头'
},
{
tag: '佛跳墙'
},
{
tag: '海螺片'
}
// {
// src: '/static/report/zhanwei_xf(1).png',
// title: '西安兴沃丰餐饮管理有限责任公司',
// tags: [{
// tag: '咖啡'
// },
// {
// tag: '饮品'
// }
// ]
// },
// {
// src: '/static/report/zhanwei_xf(1).png',
// title: '福建省海纳川食品有限公司',
// tags: [{
// tag: '活冻鲍鱼'
// },
// {
// tag: '鲍鱼罐头'
// },
// {
// tag: '佛跳墙'
// },
// {
// tag: '海螺片'
// }
]
},
// ]
// },
]
}
},
created() {
this.getCertifiedCj()
},
methods: {
// 获取认证厂家列表
getCertifiedCj() {
this.$apiServe.getCertifiedCj().then(res => {
// console.log('认证厂家', res.data.data)
this.cjsList = res.data.data
}).finally(_ => {})
},
// 跳转到认证厂家详情页
clickCj(index) {
if (index == 0) {
clickCj(item) {
uni.navigateTo({
url: '../../packageReport/certifiedCjDetail/certifiedCjDetail'
url: '../../packageReport/certifiedCjDetail/certifiedCjDetail?id=' + item.id
})
}
}
}
}

60
components/news/news.vue
View File

@@ -1,7 +1,7 @@
<template>
<view>
<view class="xw_content" v-for="(item,index) in newsList" :key="index" @click="clickNews(index)">
<u--image :src="item.src" width="192rpx" height="122rpx" :lazy-load="true">
<view class="xw_content" v-for="(item,index) in newsList" :key="index" @click="clickNews(item)">
<u--image :src="item.cover" width="192rpx" height="122rpx" :lazy-load="true">
</u--image>
<view class="xw_right">
<view class="xw_title">
@@ -9,10 +9,10 @@
</view>
<view style="display: flex;">
<text class="xw_time">
{{item.time}}
{{item.pub_time}}
</text>
<text class="xw_time xw_place">
{{item.place}}
{{item.pub_name}}
</text>
</view>
</view>
@@ -24,35 +24,43 @@
export default {
data() {
return {
newsList: [{
src: '/static/report/zhanwei_xf.png',
title: '2022近50款食品饮料新品，创新的方向都在这里',
time: '2022-12-03 09:59',
place: '第一食品资讯官方账号'
},
{
src: '/static/report/zhanwei_xf.png',
title: '食品企业如何开发新产品？创新思维又发挥着怎样的效应呢？',
time: '2022-10-18 14:43',
place: '腾讯新闻 '
},
{
src: '/static/report/zhanwei_xf.png',
title: '食品企业如何开发新产品？创新思维又发挥着怎样的效应呢？',
time: '2022-10-18 14:43',
place: '腾讯新闻'
},
newsList: [
// {
// src: '/static/report/zhanwei_xf.png',
// title: '2022近50款食品饮料新品，创新的方向都在这里',
// time: '2022-12-03 09:59',
// place: '第一食品资讯官方账号'
// },
// {
// src: '/static/report/zhanwei_xf.png',
// title: '食品企业如何开发新产品？创新思维又发挥着怎样的效应呢？',
// time: '2022-10-18 14:43',
// place: '腾讯新闻 '
// },
],
}
},
created() {
this.getNews()
},
methods: {
//获取行业新闻
// {
// pageSize: 2,
// pageNum: 1
// }
getNews() {
this.$apiServe.getNews().then(res => {
// console.log('行业新闻', res.data.data)
this.newsList = res.data.data
}).finally(_ => {})
},
// 跳转到新闻详情页
clickNews(index) {
if (index == 0) {
clickNews(item) {
uni.navigateTo({
url: '../../packageReport/xwDetail/xwDetail'
url: '../../packageReport/xwDetail/xwDetail?id=' + item.id
})
}
},
}
}

105
components/products/products.vue
View File

@@ -2,31 +2,29 @@
<view>
<view class="products_box">
<u-grid :border="false" col="2">
<u-grid-item v-for="(item,index) in productList" :key="index">
<u-grid-item v-for="(item,index) in productList" :key="index" @click="toDetailPage(item)">
<u-image src="/static/products/sy_bb.png" width="354rpx" height="539rpx" :lazy-load="true">
</u-image>
<view class="bgContent">
<view>
<u-image :src="item.src" width="346rpx" height="320rpx" :lazy-load="true"
@click="toDetailPage()">
<u-image :src="item.cover" width="346rpx" height="320rpx" :lazy-load="true">
</u-image>
<view class="img_tag">{{item.img_tag}}</view>
<view class="img_tag">{{item.cate_name}}</view>
</view>
<view style="padding: 14rpx 22rpx;">
<view class="title_box">
<text class="title">{{item.title}}</text>
<text class="title">{{item.name}}</text>
<u-tag :text="item.tag" type="warning" shape="circle"></u-tag>
</view>
<view class="product_desc">
{{item.desc}}
{{item.title}}
</view>
<view class="releaseDate">
<u-image src="/static/products/xp_icon_sjf.png" width="22rpx" height="22rpx"
:lazy-load="true">
</u-image>
<text class="release">发布日期：</text>
<text>{{item.time}}</text>
<text>{{item.pub_time}}</text>
</view>
</view>
</view>
@@ -37,49 +35,72 @@
</template>
<script>
// import {
// simpleDateFormat,
// simpleDateFormatByMoreLine
// } from '@/utills/util.js'
export default {
data() {
return {
productList: [{
src: '/static/products/zhanwei_dg.png',
title: '锅巴',
tag: '无添加剂',
img_tag: '零食铺子',
desc: '糯米蟹黄锅巴散装，非油炸绿色健康食品',
time: '2022-12-04'
},
{
src: '/static/products/zhanwei_dg.png',
title: '干吃汤圆',
tag: '天然原料',
img_tag: '糕点卷酥',
desc: '休闲食品厂家甜品糯米食品零食闽南特产宵夜好吃糍粑',
time: '2022-12-04'
},
{
src: '/static/products/zhanwei_dg.png',
title: '紫薯魔芋人参魔芋人参魔芋人参…',
tag: '天然原料',
img_tag: '健康创新',
desc: '紫薯魔芋人参代餐粉 冲调饮品贴牌加工 五谷杂粮粉代餐',
time: '2022-12-04'
},
{
src: '/static/products/zhanwei_dg.png',
title: '焦糖饼干',
tag: '无防腐剂',
img_tag: '饼干曲奇',
desc: '比利时风味焦糖饼干代餐小吃零食品',
time: '2022-12-04'
productList: [
// {
// src: '/static/products/zhanwei_dg.png',
// title: '锅巴',
// tag: '无添加剂',
// img_tag: '零食铺子',
// desc: '糯米蟹黄锅巴散装，非油炸绿色健康食品',
// time: '2022-12-04'
// },
// {
// src: '/static/products/zhanwei_dg.png',
// title: '干吃汤圆',
// tag: '天然原料',
// img_tag: '糕点卷酥',
// desc: '休闲食品厂家甜品糯米食品零食闽南特产宵夜好吃糍粑',
// time: '2022-12-04'
// },
// {
// src: '/static/products/zhanwei_dg.png',
// title: '紫薯魔芋人参魔芋人参魔芋人参…',
// tag: '天然原料',
// img_tag: '健康创新',
// desc: '紫薯魔芋人参代餐粉 冲调饮品贴牌加工 五谷杂粮粉代餐',
// time: '2022-12-04'
// },
// {
// src: '/static/products/zhanwei_dg.png',
// title: '焦糖饼干',
// tag: '无防腐剂',
// img_tag: '饼干曲奇',
// desc: '比利时风味焦糖饼干代餐小吃零食品',
// time: '2022-12-04'
// }
],
query: {
sortType: 1,
pageSize: 4,
pageNum: 1
}
]
}
},
created() {
this.getProducts()
},
methods: {
//获取产品列表
getProducts() {
// console.log("子组件的获取产品列表方法====");
this.$apiServe.getProducts(this.query).then(res => {
// console.log(res.data.data)
this.productList = res.data.data
}).finally(_ => {})
},
//点击图片跳转到详情页
toDetailPage() {
toDetailPage(item) {
uni.navigateTo({
url: '/pages/detail/productsDetail/productsDetail'
url: '/pages/detail/productsDetail/productsDetail?id=' + item.id
})
}
}

14
packageReport/certifiedCjDetail/certifiedCjDetail.vue
View File

@@ -32,6 +32,8 @@
export default {
data() {
return {
id: '',
detailList: [],
// src: '/static/detail/cj_bg.png',
features: '活冻鲍鱼,冻煮鲍鱼,鲍鱼罐头 佛跳墙,海螺片',
business_introduce: '福建省海纳川食品有限公司是一家从事水产养殖，加工与销售为一体的现代化企业，公司主要加工：活冻鲍鱼，溏心皇金鲍，兰花蟹，黄金鲍片，佛跳墙，大盆菜，火锅小章鱼，鲨鱼礼盒等系列产品。公司位于福建省自由贸易试验区马尾片区，离全国大的水产交易市场--马尾名成水产市场不到一公里，这里交通方便，商贾云集，冷链物流通达全国。',
@@ -53,8 +55,20 @@
}
},
onLoad(option) {
console.log('认证厂家id', option.id);
this.id = option.id
this.getCertifiedCjDetail()
},
methods: {
//获取认证厂家详情
getCertifiedCjDetail() {
this.$apiServe.getCertifiedCjDetail().then(res => {
console.log('认证厂家详情页', res)
// this.detailList = res.data.data
}).finally(_ => {})
},
}
}
</script>

30
packageReport/xwDetail/xwDetail.vue
View File

@@ -1,18 +1,18 @@
<template>
<view style="padding: 12rpx 16rpx;">
<view class="xwD_title">
{{title}}
{{detailList.title}}
</view>
<view style="display: flex;">
<text class="xwD_time">
{{time}}
{{detailList.pub_time}}
</text>
<text class="xwD_time xwD_place">
{{place}}
{{detailList.pub_name}}
</text>
</view>
<view class="xwD_content">
<u-parse :content="news" @preview="preview" @navigate="navigate"></u-parse>
<u-parse :content="detailList.content" @preview="preview" @navigate="navigate"></u-parse>
</view>
</view>
</template>
@@ -21,14 +21,28 @@
export default {
data() {
return {
title: '2022近50款食品饮料新品，创新的方向都在这里',
time: '2022-12-03 09:59',
place: '第一食品资讯官方账号',
news: '<h1>一级标题</h1><br/><h2>二级标题</h2>'
id: '',
detailList: []
// title: '2022近50款食品饮料新品，创新的方向都在这里',
// time: '2022-12-03 09:59',
// place: '第一食品资讯官方账号',
// news: '<h1>一级标题</h1><br/><h2>二级标题</h2>'
}
},
onLoad(option) {
console.log('新闻详情id', option.id);
this.id = option.id
this.getNewsDetail()
},
methods: {
//获取行业新闻详情
getNewsDetail() {
this.$apiServe.getNewsDetail(this.id).then(res => {
console.log('新闻详情页', res.data.data)
this.detailList = res.data.data
}).finally(_ => {})
},
}
}
</script>

63
pages/detail/productsDetail/productsDetail.vue
View File

@@ -1,7 +1,8 @@
<template>
<view>
<view v-for="(item,index) in detailList" :key="index">
<u-swiper :list="swiperList" indicatorMode="line " width="750rpx" height="530rpx" radius="0" circular>
<view :key="index">
<u-swiper :list="detailList.images" indicatorMode="line " width="750rpx" height="530rpx" radius="0"
circular>
</u-swiper>
<view class="collect">
<view class="star">
@@ -19,19 +20,19 @@
<view class="content">
<view class="title_box">
<text class="title">{{item.title}}</text>
<view class="title_tag">{{item.tag}}</view>
<text class="title">{{detailList.name}}</text>
<view class="title_tag">{{detailList.cate_bname}}</view>
</view>
<view class="desc">
{{item.desc}}
{{detailList.title}}
</view>
<view class="classify">
{{item.classify}}
{{detailList.cate_name}}
</view>
<view class="tag_view">
<view>
<text class="tagOne">{{item.tagOne}}</text>
<text class="tagTwo">{{item.tagTwo}}</text>
<text class="tagOne">{{detailList.tags}}</text>
<!-- <text class="tagTwo">{{item.tagTwo}}</text> v-for="item in detailList.tags" :key="item.id" -->
</view>
<view v-if="isThumb==false" class="heart">
<u-image v-if="showHeart==false" src="/static/detail/xp_icon_heart.png" width="34rpx"
@@ -45,7 +46,7 @@
<view v-if="isThumb==true" class="heart">
<u-image src="/static/detail/xp_icon_ysc.png" width="34rpx" height="32rpx" @click="heartTap">
</u-image>
<text class="thumb">122赞</text>
<text class="thumb">{{detailList.thumb}}赞</text>
</view>
</view>
</view>
@@ -54,9 +55,9 @@
<u-image src="/static/products/xp_icon_sjf.png" width="24rpx" height="24rpx">
</u-image>
<text class="release">发布日期：</text>
<text>{{item.time}}</text>
<text>{{detailList.pub_time}}</text>
</view>
<u-parse :content="item.content" @preview="preview" @navigate="navigate"></u-parse>
<u-parse :content="detailList.desc" @preview="preview" @navigate="navigate"></u-parse>
</view>
</view>
@@ -66,26 +67,44 @@
export default {
data() {
return {
id: '',
showStar: false,
showHeart: false,
isThumb: true,
detailList: [{
title: '锅巴',
tag: '零食铺子',
desc: '糯米蟹黄锅巴散装，非油炸绿色健康食品',
classify: '薯片膨化',
tagOne: '无添加剂1',
tagTwo: '无添加剂',
time: '2022年12月04日',
content: '<h1>一级标题</h1><br/><h2>二级标题</h2>'
}],
isThumb: false,
detailList: [
// {
// title: '锅巴',
// tag: '零食铺子',
// desc: '糯米蟹黄锅巴散装，非油炸绿色健康食品',
// classify: '薯片膨化',
// tagOne: '无添加剂1',
// tagTwo: '无添加剂',
// time: '2022年12月04日',
// content: '<h1>一级标题</h1><br/><h2>二级标题</h2>'
// },
],
swiperList: [
'/static/detail/zhanwei_xppx.png',
'/static/detail/zhanwei_xppx.png'
]
}
},
onLoad(option) {
console.log('产品id', option.id);
this.id = option.id
this.getProductDetail()
},
methods: {
//获取详情信息
getProductDetail() {
this.$apiServe.getProductDetail(this.id).then(res => {
// console.log('详情页', res.data.data.thumb)
if (res.data.data.thumb) {
this.isThumb = true
}
this.detailList = res.data.data
}).finally(_ => {})
},
//收藏按钮
starTap() {
this.showStar = !this.showStar

127
pages/index/index.vue
View File

@@ -14,9 +14,10 @@
<view class="classify">
<u-grid :border="false" col="5">
<u-grid-item v-for="(listItem,listIndex) in classifyList" :key="listIndex" @click="toClassify()">
<u--image :src="listItem.src" width="86rpx" height="86rpx" :lazy-load="true">
<u--image :src="listItem.icon" width="86rpx" height="86rpx" :lazy-load="true">
</u--image>
<text class="grid-text">{{listItem.title}}</text>
<!-- <u-icon size="86rpx" :name="listItem.icon"></u-icon> -->
<text class="grid-text">{{listItem.name}}</text>
</u-grid-item>
</u-grid>
</view>
@@ -37,54 +38,58 @@
</u-tabs>
</view>
<!-- 产品 -->
<products></products>
<products ref="getProducts"></products>
</view>
</view>
</template>
<script>
import {
serverHost
} from '@/service/request.js'
export default {
data() {
return {
classifyList: [{
src: '/static/classify/sy_icon_hp.png',
title: '烘培宝典'
},
{
src: '/static/classify/sy_icon_ls.png',
title: '零食铺子'
},
{
src: '/static/classify/sy_icon_yp.png',
title: '饮品大全'
},
{
src: '/static/classify/sy_icon_tw.png',
title: '调味菜单'
},
{
src: '/static/classify/sy_icon_rs.png',
title: '肉食荟萃'
},
{
src: '/static/classify/sy_icon_np.png',
title: '乳品手册'
},
{
src: '/static/classify/sy_icon_gs.png',
title: '果蔬地图'
},
{
src: '/static/classify/sy_icon_sj.png',
title: '食界新贵'
},
{
src: '/static/classify/sy_icon_hz.png',
title: '欢喜盒子'
},
{
src: '/static/classify/sy_icon_cy.png',
title: '创意工具'
},
classifyList: [
// {
// src: '/static/classify/sy_icon_hp.png',
// title: '烘培宝典'
// },
// {
// src: '/static/classify/sy_icon_ls.png',
// title: '零食铺子'
// },
// {
// src: '/static/classify/sy_icon_yp.png',
// title: '饮品大全'
// },
// {
// src: '/static/classify/sy_icon_tw.png',
// title: '调味菜单'
// },
// {
// src: '/static/classify/sy_icon_rs.png',
// title: '肉食荟萃'
// },
// {
// src: '/static/classify/sy_icon_np.png',
// title: '乳品手册'
// },
// {
// src: '/static/classify/sy_icon_gs.png',
// title: '果蔬地图'
// },
// {
// src: '/static/classify/sy_icon_sj.png',
// title: '食界新贵'
// },
// {
// src: '/static/classify/sy_icon_hz.png',
// title: '欢喜盒子'
// },
// {
// src: '/static/classify/sy_icon_cy.png',
// title: '创意工具'
// },
],
tabList: [{
name: '上架时间'
@@ -94,22 +99,46 @@
},
],
swiperList: [
'https://cdn.uviewui.com/uview/swiper/swiper3.png',
'https://cdn.uviewui.com/uview/swiper/swiper3.png'
],
// swiperList: [
// 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
// 'https://cdn.uviewui.com/uview/swiper/swiper3.png'
// ],
}
},
onPullDownRefresh() {
// this.$refs.getProducts.query.pageNum = 1
// this.$refs.getProducts.productList = []
this.$refs.getProducts.getProducts()
//关闭下拉刷新
uni.stopPullDownRefresh()
},
onLoad() {
this.getCategories()
this.getBanner()
// this.$refs.getProducts.getProducts()
},
methods: {
//获取一级分类
getCategories() {
this.$apiServe.getCategories().then(res => {
console.log(res)
// console.log(res.data.data)
this.classifyList = res.data.data
}).finally(_ => {})
},
//获取首页轮播图
getBanner() {
this.$apiServe.getBanner().then(res => {
// console.log(res.data.data);
let banner = res.data.data
for (const item of banner) {
this.swiperList = item.img
// console.log(item);
}
// this.swiperList = res.data.data
}).finally(_ => {})
},
methods: {
//点击一级分类
// click(listIndex) {
// this.$refs.uToast.success(`点击了第${listIndex}个`)