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

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

129
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.$apiServe.getCategories().then(res => {
console.log(res)
}).finally(_ => {})
this.getCategories()
this.getBanner()
// this.$refs.getProducts.getProducts()
},
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) {
// this.$refs.uToast.success(`点击了第${listIndex}个`)