utils/request.js
//导出方法
// 1.直接导出 用 export导出声明的变量
// export const xx = ({})=>{}
// 2.模块导出如下module.exports = {}
//注意:直接导出的需要使用解构赋值{} 不能直接引文件名
// 1 封装公共请求接口方法
export const http = ({
url,
data = "",
method = "get"
}) => {
// 2 请求前加载 最后在请求后隐藏
uni.showLoading({
title: "拼命加载中..."
})
// 3 Promise
return new Promise((resolve, reject) => {
uni.request({
url: 'https://api-hmugo-web.itheima.net/api/public/v1' + url,
data,
method,
timeout: 6000,
success: (res) => {
resolve(res.data)
},
fail: (err) => {
reject(err)
},
complete() {
uni.hideLoading()
}
})
})
};
// 2 封装成功提示 使用:toast({}) 或 toast({title:"请求失败",icon:"error"})
export const toast = ({
title = '请求成功',
icon = 'succes',
duration = 1500,
}) => {
uni.showToast({
title,
duration,
icon,
})
};
//3 封装跳转 函数形式 这种可以直接挂载到vue原型上使用的时候不需要引入
// export function router ({url='',type='navigateTo',}) {
// uni[type]({
// url
// })
// };
//3 封装跳转 形参形式 router({url='xx',type='xx'})
export const router = ({
url = '',
type = 'navigateTo'
}) => {
uni[type]({
url
})
};
utils/api.js
import {
http
} from './http.js'
// 获取轮播图
export const getSwiper = async () => http({
url: '/home/swiperdata'
})
// 获取分类导航
export const getType = async () => http({
url: '/home/catitems'
})
// 获取楼层
export const getItem = async () => http({
url: '/home/floordata'
})
// 获取分类数据
export const getCates = async () => http({
url: '/categories'
})
// 搜索数据
export const getSearchList = async (key) => http({
url: '/goods/search',
data: {
...key
}
})
在页面使用
<template>
<view class="container">
<my-search></my-search>
<!-- 轮播图 -->
<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
<swiper-item v-for="item in swiper" :key="item.goods_id">
<view class="swiper-item">
<image class="swiper-image" :src="item.image_src" mode="scaleToFill"></image>
</view>
</swiper-item>
</swiper>
<!-- 导航 -->
<view class="navs">
<navigator v-for="item in navs" :key="item.name">
<image class="nav-image" :src="item.image_src" mode="scaleToFill"></image>
</navigator>
</view>
<!-- 底部 -->
<view class="floors">
<view class="floors-list" v-for="(item, i) in floors" :key="i">
<image class="title-image" :src="item.floor_title.image_src" mode="scaleToFill"></image>
<view class="good-box">
<navigator class="nav" :class="'nav' + index" :url="'/pages' + it.navigator_url" :key="index"
v-for="(it, index) in item.product_list">
<image :src="it.image_src" mode="scaleToFill"></image>
</navigator>
</view>
</view>
</view>
</view>
</template>
<script>
import {
getSwiper,
getType,
getItem
} from '../../utils/api.js'
import {
toast,
router
} from '../../utils/http.js'
import mySearch from '../../components/mySearch/mySearch.vue'
export default {
components: {
mySearch
},
data() {
return {
swiper: [],
navs: [],
floors: []
}
},
async created() {
// 请求轮播图数据的方法
let swiper = await getSwiper()
// if (swiper.meta.status != 200) return toast({
// title: '请求失败',
// icon: 'error',
// })
this.swiper = swiper.message
// 请求分类导航数据的方法
let navs = await getType()
this.navs = navs.message
// 请求楼层数据信息
let items = await getItem()
console.log(items);
this.floors = items.message
},
methods: {
}
}
</script>
<style scoped lang="scss">
.container {
background-color: #fff;
swiper {
height: 500rpx;
}
.swiper-image {
width: 100%;
height: 500rpx;
}
}
.navs {
display: flex;
justify-content: space-around;
margin-top: 30rpx;
navigator {
width: 160rpx;
height: 160rpx;
.nav-image {
width: 100%;
height: 100%;
}
}
}
.floors-list {
margin-top: 30rpx;
}
.title-image {
width: 100%;
height: 80rpx;
}
.good-box {
width: 100%;
overflow: hidden;
.nav {
float: left;
width: 230rpx;
height: 200rpx;
padding: 10rpx;
image {
width: 100%;
height: 100%;
}
}
.nav0 {
height: 420rpx;
}
}
</style>
完毕
Thankfulness is the quickest path to joy.
懂得感恩的人,更容易收获快乐。