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

Merge pull request '首页初次对接口' (#32) from DJ into dev

Browse Source 
Reviewed-on: http://git.hchyun.com/feashow/pupil/pulls/32
This commit is contained in:
odjbin
2022-12-25 08:07:12 +00:00
parent 4050e638f0 fd6f5b5390
commit ae137c498a
7 changed files with 305 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
components/certifiedCj/certifiedCj.vue
View File

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

64
components/news/news.vue
View File

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

107
components/products/products.vue
View File

@@ -2,31 +2,29 @@
<view> <view>
<view class="products_box"> <view class="products_box">
<u-grid :border="false" col="2"> <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 src="/static/products/sy_bb.png" width="354rpx" height="539rpx" :lazy-load="true">
</u-image> </u-image>
<view class="bgContent"> <view class="bgContent">
<view> <view>
<u-image :src="item.src" width="346rpx" height="320rpx" :lazy-load="true" <u-image :src="item.cover" width="346rpx" height="320rpx" :lazy-load="true">
@click="toDetailPage()">
</u-image> </u-image>
<view class="img_tag">{{item.img_tag}}</view> <view class="img_tag">{{item.cate_name}}</view>
</view> </view>
<view style="padding: 14rpx 22rpx;"> <view style="padding: 14rpx 22rpx;">
<view class="title_box"> <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> <u-tag :text="item.tag" type="warning" shape="circle"></u-tag>
</view> </view>
<view class="product_desc"> <view class="product_desc">
{{item.desc}} {{item.title}}
</view> </view>
<view class="releaseDate"> <view class="releaseDate">
<u-image src="/static/products/xp_icon_sjf.png" width="22rpx" height="22rpx" <u-image src="/static/products/xp_icon_sjf.png" width="22rpx" height="22rpx"
:lazy-load="true"> :lazy-load="true">
</u-image> </u-image>
<text class="release">发布日期：</text> <text class="release">发布日期：</text>
<text>{{item.time}}</text> <text>{{item.pub_time}}</text>
</view> </view>
</view> </view>
</view> </view>
@@ -37,49 +35,72 @@
</template> </template>
<script> <script>
// import {
// simpleDateFormat,
// simpleDateFormatByMoreLine
// } from '@/utills/util.js'
export default { export default {
data() { data() {
return { return {
productList: [{ productList: [
src: '/static/products/zhanwei_dg.png', // {
title: '锅巴', // src: '/static/products/zhanwei_dg.png',
tag: '无添加剂', // title: '锅巴',
img_tag: '零食铺子', // tag: '无添加剂',
desc: '糯米蟹黄锅巴散装，非油炸绿色健康食品', // img_tag: '零食铺子',
time: '2022-12-04' // desc: '糯米蟹黄锅巴散装，非油炸绿色健康食品',
}, // time: '2022-12-04'
{ // },
src: '/static/products/zhanwei_dg.png', // {
title: '干吃汤圆', // src: '/static/products/zhanwei_dg.png',
tag: '天然原料', // title: '干吃汤圆',
img_tag: '糕点卷酥', // tag: '天然原料',
desc: '休闲食品厂家甜品糯米食品零食闽南特产宵夜好吃糍粑', // img_tag: '糕点卷酥',
time: '2022-12-04' // desc: '休闲食品厂家甜品糯米食品零食闽南特产宵夜好吃糍粑',
}, // time: '2022-12-04'
{ // },
src: '/static/products/zhanwei_dg.png', // {
title: '紫薯魔芋人参魔芋人参魔芋人参…', // src: '/static/products/zhanwei_dg.png',
tag: '天然原料', // title: '紫薯魔芋人参魔芋人参魔芋人参…',
img_tag: '健康创新', // tag: '天然原料',
desc: '紫薯魔芋人参代餐粉 冲调饮品贴牌加工 五谷杂粮粉代餐', // img_tag: '健康创新',
time: '2022-12-04' // desc: '紫薯魔芋人参代餐粉 冲调饮品贴牌加工 五谷杂粮粉代餐',
}, // time: '2022-12-04'
{ // },
src: '/static/products/zhanwei_dg.png', // {
title: '焦糖饼干', // src: '/static/products/zhanwei_dg.png',
tag: '无防腐剂', // title: '焦糖饼干',
img_tag: '饼干曲奇', // tag: '无防腐剂',
desc: '比利时风味焦糖饼干代餐小吃零食品', // img_tag: '饼干曲奇',
time: '2022-12-04' // desc: '比利时风味焦糖饼干代餐小吃零食品',
} // time: '2022-12-04'
] // }
],
query: {
sortType: 1,
pageSize: 4,
pageNum: 1
}
} }
}, },
created() {
this.getProducts()
},
methods: { 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({ 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 { export default {
data() { data() {
return { return {
id: '',
detailList: [],
// src: '/static/detail/cj_bg.png', // src: '/static/detail/cj_bg.png',
features: '活冻鲍鱼,冻煮鲍鱼,鲍鱼罐头 佛跳墙,海螺片', features: '活冻鲍鱼,冻煮鲍鱼,鲍鱼罐头 佛跳墙,海螺片',
business_introduce: '福建省海纳川食品有限公司是一家从事水产养殖，加工与销售为一体的现代化企业，公司主要加工：活冻鲍鱼，溏心皇金鲍，兰花蟹，黄金鲍片，佛跳墙，大盆菜，火锅小章鱼，鲨鱼礼盒等系列产品。公司位于福建省自由贸易试验区马尾片区，离全国大的水产交易市场--马尾名成水产市场不到一公里，这里交通方便，商贾云集，冷链物流通达全国。', business_introduce: '福建省海纳川食品有限公司是一家从事水产养殖，加工与销售为一体的现代化企业，公司主要加工：活冻鲍鱼，溏心皇金鲍，兰花蟹，黄金鲍片，佛跳墙，大盆菜，火锅小章鱼，鲨鱼礼盒等系列产品。公司位于福建省自由贸易试验区马尾片区，离全国大的水产交易市场--马尾名成水产市场不到一公里，这里交通方便，商贾云集，冷链物流通达全国。',
@@ -53,8 +55,20 @@
} }
}, },
onLoad(option) {
console.log('认证厂家id', option.id);
this.id = option.id
this.getCertifiedCjDetail()
},
methods: { methods: {
//获取认证厂家详情
getCertifiedCjDetail() {
this.$apiServe.getCertifiedCjDetail().then(res => {
console.log('认证厂家详情页', res)
// this.detailList = res.data.data
}).finally(_ => {})
},
} }
} }
</script> </script>

30
packageReport/xwDetail/xwDetail.vue
View File

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

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

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

129
pages/index/index.vue
View File

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