Skip to content

Y
yongxinda-h5
提交 5484b168 authored 作者: 刘旭's avatar 刘旭
浏览文件
操作

首页80%

上级 a2bab482
全部展开 显示空白字符变更
内嵌 并排
正在显示 包含 103 行增加 和 132 行删除
src/api/index.ts 0 → 100644
浏览文件 @ 5484b168
import { request } from '@/utils/request';
export const homeIndex = () => request('/wx/home/index', 'GET');
export const indexDetails = (data: any) => request('/wx/goods/detail', 'GET', data);
src/pages/goods/index.vue
浏览文件 @ 5484b168
差异被折叠。
src/pages/index/index.vue
浏览文件 @ 5484b168
<template>
<!-- 搜索 -->
<view><uni-search-bar placeholder="输入搜索商品" bgColor="#EEEEEE" clearButton="auto" cancelButton="none" @blur="blur" @focus="focus" @confirm="search" /></view>
<view>
<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
<swiper-item v-for="(item, index) in bannerList" :key="index">
<view class="swiper-item"><image class="banner" :src="item.img" /></view>
</swiper-item>
</swiper>
</view>
<view>
<uni-grid :column="4" :showBorder="false">
<uni-grid-item v-for="(item, index) in gridList" :key="index">
<uni-icons :type="item.icon" :size="30" color="#777" />
<text class="text">{{ item.text }}</text>
</uni-grid-item>
</uni-grid>
</view>
<!-- 轮播图 -->
<view class="wrap"><u-swiper :list="indexData?.banner" name="url" height="400"></u-swiper></view>
<!-- 宫格布局 -->
<u-grid :col="4" class="grid" @click="clickGrid">
<u-grid-item v-for="(item, index) in indexData?.channel" :key="item.id" :index="item.id">
<u-icon :name="item.iconUrl" :size="46"></u-icon>
<view class="grid-text">{{ item.name }}</view>
</u-grid-item>
</u-grid>
<view class="goods">
<uni-row>
<uni-col :span="12" v-for="(item, index) in goodsList" :key="index">
<uni-col :span="12" v-for="(item, index) in indexData?.newGoodsList" :key="item.id">
<view class="goods-item" @click="viewGoods(item)">
<image class="goods-img" :src="item.img"></image>
<image class="goods-img" :src="item.picUrl"></image>
<view class="goods-infos">
<uni-row>
<uni-col :span="24">
<text class="goods-title">{{ item.title }}</text>
<text class="goods-title">{{ item.name }}</text>
</uni-col>
<uni-col>
<uni-row>
<uni-col :span="12">
<uni-col :span="24">
<text class="goods-price">
<text class="unit">￥</text>
<text class="price">{{ item.price }}</text>
<text class="price">{{ item.counterPrice }}</text>
</text>
</uni-col>
<uni-col :span="12">
<!-- <uni-col :span="12">
<text class="goods-sales-count">
<text>销量</text>
<text>{{ item.sales }}</text>
</text>
</uni-col>
</uni-col> -->
</uni-row>
</uni-col>
</uni-row>
......@@ -54,90 +47,34 @@
<script setup lang="ts">
import { ref } from 'vue';
import { GoodsItem } from '@/types/goods';
import { homeIndex } from '@/api/index';
// import { GoodsItem } from '@/types/goods';
const indicatorDots = ref(true);
const autoplay = ref(true);
const interval = ref(3000);
const duration = ref(1500);
const indexData = ref();
const bannerList = ref([
{
id: 1,
img: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/banner/banner1.jpg'
},
{
id: 2,
img: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/banner/banner2.jpg'
},
{
id: 3,
img: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/banner/banner3.jpg'
}
]);
const gridList = ref([
{
icon: 'phone-filled',
text: '手机'
},
{
icon: 'phone',
text: '电脑'
},
{
icon: 'phone',
text: '家电'
},
{
icon: 'phone',
text: '更多'
}
]);
const clickGrid = (index: any) => {
console.log(index);
};
const goodsList = ref([
{
id: 1,
img: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/goods/goods_1.jpg',
title: 'Iphone 13 Pro Max 256G 全网通 国行正品',
price: '5000.00',
sales: 1000
},
{
id: 2,
img: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/goods/goods_2.jpg',
title: 'Iphone 13 Pro Max',
price: '5000.00',
sales: 1000
},
{
id: 3,
img: 'https://bytelibs-dev.oss-cn-beijing.aliyuncs.com/image/goods/goods_3.jpg',
title: 'Iphone 13 Pro Max',
price: '5000.00',
sales: 1000
}
]);
const viewGoods = (row: any) => {
uni.navigateTo({ url: '/pages/goods/index?id=' + row.id });
};
const viewGoods = (row: GoodsItem) => {
console.log('查看商品', row.id);
uni.navigateTo({ url: '/pages/goods/index?goodsId=' + row.id });
const initIndex = () => {
homeIndex().then((res: any) => {
// console.log(res);
// if (res.data.code === 200) {
indexData.value = res.data.data;
console.log(res, '首页数据');
// }
});
};
initIndex();
</script>
<style lang="scss">
.swiper {
height: 300rpx;
.swiper-item {
display: block;
height: 300rpx;
line-height: 300rpx;
text-align: center;
.banner {
width: 100%;
height: 100%;
}
}
.grid {
padding: 16rpx;
}
.text {
......@@ -160,7 +97,7 @@ const viewGoods = (row: GoodsItem) => {
overflow: hidden;
.goods-img {
width: 100%;
height: 350rpx;
height: 300rpx;
}
.goods-infos {
margin: 6rpx 10rpx;
......@@ -171,17 +108,19 @@ const viewGoods = (row: GoodsItem) => {
word-break: break-all;
text-overflow: ellipsis;
overflow: hidden;
margin-bottom: 30rpx;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.goods-price {
color: #dd524d;
font-family: arial, sans-serif;
.unit {
display: flex;
justify-content: flex-end;
font-size: 10px;
}
.price {
font-size: 14px;
margin: 40rpx 20rpx 0 0;
font-size: 16px;
font-weight: bold;
}
}
......@@ -193,16 +132,4 @@ const viewGoods = (row: GoodsItem) => {
}
}
}
//.grid-item-box {
// flex: 1;
// // position: relative;
// /* #ifndef APP-NVUE */
// display: flex;
// /* #endif */
// flex-direction: column;
// align-items: center !important;
// justify-content: center !important;
// padding: 15px 0;
//}
</style>
src/utils/auth.ts 0 → 100644
浏览文件 @ 5484b168
export const TokenKey: string = 'X-Litemall-Admin-Token'
// 获取指定缓存
export const getCache= (key: string) => {
uni.getStorage({
key: key,
success: (res: any) => {
return res.data
}
})
}
// 获取缓存信息
export const getAllCache= () => {
uni.getStorageInfo({
success: (res: any) => {
return res
}
})
}
// 修改指定缓存
export const setCache = (key: string, data: any) => {
uni.setStorage({
key: key,
data
})
}
// 移除制定缓存
export const renoveCache = (key: any) => {
uni.removeStorage({
key
})
}
// 清除本地缓存
export const clearCache = () => {
uni.clearStorage()
}
\ No newline at end of file
src/utils/config.ts
浏览文件 @ 5484b168
const CONFIG: any = {
// 开发环境配置
development: {
assetsPath: 'https://m.siccat.com/public/static/images/', // 静态资源路径
baseUrl: 'https://api.test.siccat.com/api/graphql', // 后台接口请求地址
hostUrl: 'http://m.test.siccat.com/', // H5地址(前端运行地址)
assetsPath: 'http://192.168.2.210:8080', // 静态资源路径
baseUrl: 'http://193.112.67.73:81', // 后台接口请求地址
hostUrl: 'http://192.168.2.210:8080', // H5地址(前端运行地址)
websocketUrl: '', // websocket服务端地址
weixinAppId: 'wx47469e48cd51018c' // 微信公众号appid
},
// 生产环境配置
production: {
......@@ -14,7 +13,6 @@ const CONFIG: any = {
// baseUrl: 'https://api.test.siccat.com/api/graphql',
hostUrl: 'https://m.siccat.com/', // H5地址(前端运行地址)
websocketUrl: '', // websocket服务端地址
weixinAppId: 'wx47469e48cd51018c' // 微信公众号appid
}
};
......
src/utils/request.ts
浏览文件 @ 5484b168
......@@ -13,17 +13,17 @@ function request(url: string, method: 'GET' | 'POST' | 'PUT' | 'DELETE', data?:
} else {
let pages = getCurrentPages();
let curRoute = pages[pages.length - 1].route;
if (curRoute != 'pages/login/login') {
uni.showToast({
icon: 'none',
title: '请重新登录',
success() {
uni.navigateTo({
url: '/pages/login/login'
});
}
});
}
// if (curRoute != 'pages/login/login') {
// uni.showToast({
// icon: 'none',
// title: '请重新登录',
// success() {
// uni.navigateTo({
// url: '/pages/login/login'
// });
// }
// });
// }
}
uni.request({
url: baseUrl + url,
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论