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> <template>
<!-- 搜索 -->
<view><uni-search-bar placeholder="输入搜索商品" bgColor="#EEEEEE" clearButton="auto" cancelButton="none" @blur="blur" @focus="focus" @confirm="search" /></view> <view><uni-search-bar placeholder="输入搜索商品" bgColor="#EEEEEE" clearButton="auto" cancelButton="none" @blur="blur" @focus="focus" @confirm="search" /></view>
<!-- 轮播图 -->
<view> <view class="wrap"><u-swiper :list="indexData?.banner" name="url" height="400"></u-swiper></view>
<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"> <!-- 宫格布局 -->
<swiper-item v-for="(item, index) in bannerList" :key="index"> <u-grid :col="4" class="grid" @click="clickGrid">
<view class="swiper-item"><image class="banner" :src="item.img" /></view> <u-grid-item v-for="(item, index) in indexData?.channel" :key="item.id" :index="item.id">
</swiper-item> <u-icon :name="item.iconUrl" :size="46"></u-icon>
</swiper> <view class="grid-text">{{ item.name }}</view>
</view> </u-grid-item>
</u-grid>
<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="goods"> <view class="goods">
<uni-row> <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)"> <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"> <view class="goods-infos">
<uni-row> <uni-row>
<uni-col :span="24"> <uni-col :span="24">
<text class="goods-title">{{ item.title }}</text> <text class="goods-title">{{ item.name }}</text>
</uni-col> </uni-col>
<uni-col> <uni-col>
<uni-row> <uni-row>
<uni-col :span="12"> <uni-col :span="24">
<text class="goods-price"> <text class="goods-price">
<text class="unit">￥</text> <text class="unit">￥</text>
<text class="price">{{ item.price }}</text> <text class="price">{{ item.counterPrice }}</text>
</text> </text>
</uni-col> </uni-col>
<uni-col :span="12"> <!-- <uni-col :span="12">
<text class="goods-sales-count"> <text class="goods-sales-count">
<text>销量</text> <text>销量</text>
<text>{{ item.sales }}</text> <text>{{ item.sales }}</text>
</text> </text>
</uni-col> </uni-col> -->
</uni-row> </uni-row>
</uni-col> </uni-col>
</uni-row> </uni-row>
...@@ -54,90 +47,34 @@ ...@@ -54,90 +47,34 @@
<script setup lang="ts"> <script setup lang="ts">
import { ref } from 'vue'; import { ref } from 'vue';
import { GoodsItem } from '@/types/goods'; import { homeIndex } from '@/api/index';
// import { GoodsItem } from '@/types/goods';
const indicatorDots = ref(true); const indexData = ref();
const autoplay = ref(true);
const interval = ref(3000);
const duration = ref(1500);
const bannerList = ref([ const clickGrid = (index: any) => {
{ console.log(index);
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 goodsList = ref([ const viewGoods = (row: any) => {
{ uni.navigateTo({ url: '/pages/goods/index?id=' + row.id });
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: GoodsItem) => { const initIndex = () => {
console.log('查看商品', row.id); homeIndex().then((res: any) => {
uni.navigateTo({ url: '/pages/goods/index?goodsId=' + row.id }); // console.log(res);
// if (res.data.code === 200) {
indexData.value = res.data.data;
console.log(res, '首页数据');
// }
});
}; };
initIndex();
</script> </script>
<style lang="scss"> <style lang="scss">
.swiper { .grid {
height: 300rpx; padding: 16rpx;
.swiper-item {
display: block;
height: 300rpx;
line-height: 300rpx;
text-align: center;
.banner {
width: 100%;
height: 100%;
}
}
} }
.text { .text {
...@@ -160,7 +97,7 @@ const viewGoods = (row: GoodsItem) => { ...@@ -160,7 +97,7 @@ const viewGoods = (row: GoodsItem) => {
overflow: hidden; overflow: hidden;
.goods-img { .goods-img {
width: 100%; width: 100%;
height: 350rpx; height: 300rpx;
} }
.goods-infos { .goods-infos {
margin: 6rpx 10rpx; margin: 6rpx 10rpx;
...@@ -171,17 +108,19 @@ const viewGoods = (row: GoodsItem) => { ...@@ -171,17 +108,19 @@ const viewGoods = (row: GoodsItem) => {
word-break: break-all; word-break: break-all;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
margin-bottom: 30rpx;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
} }
.goods-price { .goods-price {
color: #dd524d; color: #dd524d;
font-family: arial, sans-serif; font-family: arial, sans-serif;
.unit { display: flex;
justify-content: flex-end;
font-size: 10px; font-size: 10px;
}
.price { .price {
font-size: 14px; margin: 40rpx 20rpx 0 0;
font-size: 16px;
font-weight: bold; font-weight: bold;
} }
} }
...@@ -193,16 +132,4 @@ const viewGoods = (row: GoodsItem) => { ...@@ -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> </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 = { const CONFIG: any = {
// 开发环境配置 // 开发环境配置
development: { development: {
assetsPath: 'https://m.siccat.com/public/static/images/', // 静态资源路径 assetsPath: 'http://192.168.2.210:8080', // 静态资源路径
baseUrl: 'https://api.test.siccat.com/api/graphql', // 后台接口请求地址 baseUrl: 'http://193.112.67.73:81', // 后台接口请求地址
hostUrl: 'http://m.test.siccat.com/', // H5地址(前端运行地址) hostUrl: 'http://192.168.2.210:8080', // H5地址(前端运行地址)
websocketUrl: '', // websocket服务端地址 websocketUrl: '', // websocket服务端地址
weixinAppId: 'wx47469e48cd51018c' // 微信公众号appid
}, },
// 生产环境配置 // 生产环境配置
production: { production: {
...@@ -14,7 +13,6 @@ const CONFIG: any = { ...@@ -14,7 +13,6 @@ const CONFIG: any = {
// baseUrl: 'https://api.test.siccat.com/api/graphql', // baseUrl: 'https://api.test.siccat.com/api/graphql',
hostUrl: 'https://m.siccat.com/', // H5地址(前端运行地址) hostUrl: 'https://m.siccat.com/', // H5地址(前端运行地址)
websocketUrl: '', // websocket服务端地址 websocketUrl: '', // websocket服务端地址
weixinAppId: 'wx47469e48cd51018c' // 微信公众号appid
} }
}; };
......
src/utils/request.ts
浏览文件 @ 5484b168
...@@ -13,17 +13,17 @@ function request(url: string, method: 'GET' | 'POST' | 'PUT' | 'DELETE', data?: ...@@ -13,17 +13,17 @@ function request(url: string, method: 'GET' | 'POST' | 'PUT' | 'DELETE', data?:
} else { } else {
let pages = getCurrentPages(); let pages = getCurrentPages();
let curRoute = pages[pages.length - 1].route; let curRoute = pages[pages.length - 1].route;
if (curRoute != 'pages/login/login') { // if (curRoute != 'pages/login/login') {
uni.showToast({ // uni.showToast({
icon: 'none', // icon: 'none',
title: '请重新登录', // title: '请重新登录',
success() { // success() {
uni.navigateTo({ // uni.navigateTo({
url: '/pages/login/login' // url: '/pages/login/login'
}); // });
} // }
}); // });
} // }
} }
uni.request({ uni.request({
url: baseUrl + url, url: baseUrl + url,
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论