首页图片获取,行业报告中行业新闻及详情页和新品发布及详情页接口对接完毕

This commit is contained in:
clay
2022-12-28 22:15:56 +08:00
parent 8c63db07ab
commit b3b0b620bf
9 changed files with 89 additions and 184 deletions

View File

@@ -1,9 +1,8 @@
<template>
<view>
<view :key="index">
<u-swiper :list="detailList.images" indicatorMode="line " width="750rpx" height="530rpx" radius="0"
circular>
</u-swiper>
<u-image :src="imgUrl+detailList.cover" width="750rpx" height="530rpx">
</u-image>
<view class="collect">
<view class="star">
<u-image v-if="showStar==false" src="/static/detail/xp_icon_wstar.png" width="28rpx" height="28rpx"
@@ -31,8 +30,7 @@
</view>
<view class="tag_view">
<view>
<text class="tagOne">{{detailList.tags}}</text>
<!-- <text class="tagTwo">{{item.tagTwo}}</text> v-for="item in detailList.tags" :key="item.id" -->
<text class="tagOne" v-for="item in detailList.tags" :key="item.id">{{item}}</text>
</view>
<view v-if="isThumb==false" class="heart">
<u-image v-if="showHeart==false" src="/static/detail/xp_icon_heart.png" width="34rpx"
@@ -64,44 +62,39 @@
</template>
<script>
import {
dateFormatDetail
} from '../../../utills/date.js'
export default {
data() {
return {
id: '',
imgUrl: '',
tagsArray: [],
showStar: false,
showHeart: false,
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'
]
detailList: []
}
},
onLoad(option) {
console.log('产品id', option.id);
this.id = option.id
this.getProductDetail()
this.imgUrl = uni.getStorageSync('img_url')
},
methods: {
//获取详情信息
getProductDetail() {
this.$apiServe.getProductDetail(this.id).then(res => {
// console.log('详情页', res.data.data.thumb)
// console.log('详情页', res.data.data)
if (res.data.data.thumb) {
this.isThumb = true
}
let detail = res.data.data
detail.pub_time = dateFormatDetail(detail.pub_time)
let tag = detail.tags
this.tagsArray = tag.split(',')
detail.tags = this.tagsArray
this.detailList = res.data.data
}).finally(_ => {})
},

View File

@@ -14,7 +14,7 @@
<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.icon" width="86rpx" height="86rpx" :lazy-load="true">
<u--image :src="imgUrl+listItem.icon" width="86rpx" height="86rpx" :lazy-load="true">
</u--image>
<!-- <u-icon size="86rpx" :name="listItem.icon"></u-icon> -->
<text class="grid-text">{{listItem.name}}</text>
@@ -23,7 +23,7 @@
</view>
<!-- 分类模块下的轮播图 -->
<view>
<u-swiper :list="swiperList" indicatorMode="line" radius="0" circular></u-swiper>
<u-swiper :list="swiperList" keyName="img" indicatorMode="line" radius="0" circular></u-swiper>
</view>
@@ -49,48 +49,7 @@
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: [],
tabList: [{
name: '上架时间'
},
@@ -98,11 +57,8 @@
name: '点赞量'
},
],
// swiperList: [
// 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
// 'https://cdn.uviewui.com/uview/swiper/swiper3.png'
// ],
imgUrl: '',
swiperList: [],
}
},
onPullDownRefresh() {
@@ -118,32 +74,26 @@
this.getBanner()
this.getImgUrl()
// this.$refs.getProducts.getProducts()
this.imgUrl = uni.getStorageSync('img_url')
},
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);
item.img = this.imgUrl + item.img
}
// this.swiperList = res.data.data
this.swiperList = res.data.data
}).finally(_ => {})
},
//点击一级分类
// click(listIndex) {
// this.$refs.uToast.success(`点击了第${listIndex}个`)
// },
//点击搜索框跳转到搜索页面
toSearch() {
uni.navigateTo({
@@ -165,8 +115,6 @@
console.log("登录code", code);
//客户端成功获取授权临时票据code,向业务服务器发起登录请求。
// 调用登录接口 拿到token 传手机code,更新手机号码
},
@@ -184,7 +132,7 @@
},
getImgUrl() {
this.$apiServe.getImgUrl().then(res => {
console.log(res)
// console.log(res)
try {
uni.setStorageSync('img_url', res.data.data.img_url);
} catch (e) {

View File

@@ -4,7 +4,6 @@
<view class="classify">
<u-grid :border="false" col="3">
<u-grid-item v-for="(listItem,listIndex) in classifyList" :key="listIndex" @click="click(listIndex)">
<!-- 懒加载 :lazy-load="true" -->
<u--image :src="listItem.src" width="86rpx" height="86rpx" :lazy-load="true">
</u--image>
<text class="grid-text">{{listItem.title}}</text>