Skip to content

F
FuLiMini
Commit f7d3e171 by wangjian
Options

1

parent b367e101
Showing with 625 additions and 40 deletions
pages/home/home.vue
......@@ -21,7 +21,56 @@
<text v-if="isLogin" class="header-name">你好，{{ name }}</text>
<text v-else class="header-login" @click="goLogin()">请登录</text>
<view class="integral-detail" @click="goIntegralDetail">积分明细 ></view>
<view class="list" ref="list">
<view class="swiper-container" v-if="headerData.length>1">
<swiper class="swiper" @change="changeSwiper" :indicator-dots="false">
<swiper-item v-for="(item, index) in headerData" :key="index">
<view class="list">
<view class="item" v-for="(subItem, subIndex) in item" :key="subIndex" @click="goToLandPage(item)">
<image class="icon" mode="aspectFill" :src="subItem.icon"></image>
<view class="item-title">{{ subItem.title }}</view>
<view class="item-desc">{{ subItem.subTitle }}</view>
</view>
</view>
</swiper-item>
</swiper>
<view>
<view class="indicator">
<view class="swiper-dot" :class="index===headerIndex?'swiper-dot-active':''" v-for="(item, index) in headerData" :key="index"></view>
</view>
</view>
</view>
<view v-else class="list" :key="index">
<view class="item" v-for="(subItem, subIndex) in headerData[0]" :key="subIndex" @click="goToLandPage(subItem)">
<image class="icon" mode="aspectFill" :src="subItem.icon"></image>
<view class="item-title">{{ subItem.title }}</view>
<view class="item-desc">{{ subItem.subTitle }}</view>
</view>
</view>
<view class="bottom-list">
<view class="top">
<image class="img" src="../../static/home-rec.png" alt="">
<view class="name">热门推荐</view>
</view>
<view @click="goDetail(item)" class="item" v-for="(item,index) in goodsList" :key="index">
<image class="img" mode="aspectFill" :src="item.thumb"></image>
<view class="right">
<!-- <view class="title-container"><text class="brand">{{item.brand}}</text>{{item.title}}</view> -->
<text class="title-container">
<text class="brand">京东</text>&nbsp;&nbsp;&nbsp;几点开始放枸杞就开始读后感佛IQ而后工委
</text>
<view class="bottom">
<view class="money">
{{item.price}}<text>积分</text>
</view>
<view class="btn">
立即兑换
</view>
</view>
</view>
</view>
</view>
<!-- <view class="list" ref="list">
<view class="item" v-for="(item, index) in brandList" :key="index" @click="goToGoodDetail(item.brandNo, item.name)">
<view class="item-layout">
<image class="icon" mode="aspectFill" :src="item.imgPath"></image>
......@@ -31,8 +80,8 @@
</view>
</view>
</view>
</view>
<!-- <uni-load-more v-if="brandList.length > 0" :status="loadingType"></uni-load-more> -->
</view> -->
<uni-load-more v-if="brandList.length > 0" :status="loadingType"></uni-load-more>
</view>
</template>
......@@ -47,13 +96,18 @@ export default {
page: 1,
pageSize: 20,
isLogin: false,
opacity: 0
opacity: 0,
headerData: [],
headerIndex: 0,
goodsList: []
};
},
onShow() {
this.integralCount = 0
this.getUserInfo();
this.getData();
this.getHeaderData()
// this.getData();
this.getList()
},
onPageScroll(e) {
console.log(e)
......@@ -65,6 +119,10 @@ export default {
// }, () => {})
},
onReachBottom() {
console.log(11111);
this.getList();
},
methods: {
goLogin() {
this.$router.push('Login');
......@@ -95,6 +153,50 @@ export default {
.then(res => {
if (res.data.list.length > 0) {
this.brandList = this.brandList.concat(res.data.list);
this.brandList = this.brandList.concat(res.data.list);
this.brandList = this.brandList.concat(res.data.list);
this.goodsList = this.goodsList.concat(res.data.list);
let data = [].concat(this.brandList)
this.headerData = this.division(data, 15)
}
})
.catch(err => {
console.log(err);
});
},
getHeaderData() {
this.$net
.get('/home/header', { 'refreshToken': 'not' })
.then(res => {
let data = res.data.list || []
this.headerData = this.division(data, 15)
})
.catch(err => {
console.log(err);
});
},
division(arr, length) {
let index = 0;
let newArray = []
while (index < arr.length) {
if (length > arr.length) {
newArray.push(arr)
index += length
} else {
newArray.push(arr.slice(index, index += length))
}
}
return newArray
},
getList() {
if (this.loadingType == 'noMore') {
return
}
this.$net
.get('/home/list', { page: this.page, pageSize: this.pageSize, 'refreshToken': 'not' })
.then(res => {
if (res.data.list.length > 0) {
this.goodsList = this.goodsList.concat(res.data.list);
this.page += 1;
}
this.loadingType = res.data.list.length < this.pageSize ? 'noMore' : 'more';
......@@ -104,12 +206,20 @@ export default {
console.log(err);
});
},
goToGoodDetail(brandNo, brandName) {
goToLandPage(item) {
if (!this.isLogin) {
this.goLogin();
return
}
this.$router.push('GoodSkuList', { brandNo: brandNo, brandName: brandName });
console.log(item);
this.$router.goLandPage(item.schema);
},
goDetail(item) {
if (!this.isLogin) {
this.goLogin();
return
}
this.$router.push('GoodsDetail', {skuNo:item.skuId, spuNo:item.spuId})
},
goIntegralDetail() {
if (!this.isLogin) {
......@@ -117,6 +227,10 @@ export default {
return
}
this.$router.push('IntegralDetail')
},
changeSwiper(event) {
console.log(event);
this.headerIndex = event.detail.current
}
}
};
......@@ -240,60 +354,201 @@ export default {
z-index: 999;
right: 0;
}
.swiper-container {
border-radius: 30rpx;
background-color: #FFFFFF;
padding-bottom: 30rpx;
.swiper {
height: 600rpx;
width: 100%;
margin-top: -50rpx;
border-radius: 30rpx;
.list {
display: flex;
flex-direction: row;
background: #ffeeee;
border-radius: 30rpx 30rpx 0rpx 0rpx;
padding-top: 25rpx;
margin-top: -50rpx;
background: #ffffff;
border-radius: 30rpx;
padding: 30rpx 5rpx 0;
z-index: 99;
padding: 15rpx 15rpx;
flex-wrap: wrap;
width: 100%;
height: 100%;
.item {
width: 50%;
height: 144rpx;
margin-top: 15rpx;
margin-bottom: 15rpx;
.item-layout {
width: 148rpx;
height: 180rpx;
text-align: center;
.icon {
width: 96rpx;
height: 96rpx;
margin: 0 auto;
display: block;
}
.item-title {
margin-top: 12rpx;
font-size: 24rpx;
color: #333333;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 148rpx;
}
.item-desc {
font-size: 20rpx;
color: #999999;
text-overflow: ellipsis;
white-space: nowrap;
margin-top: 10rpx;
overflow: hidden;
width: 148rpx;
}
}
}
}
.indicator {
margin: 30rpx auto 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: 144rpx;
margin: 0 15rpx;
background: #ffffff;
border-radius: 20rpx;
padding-left: 15rpx;
padding-right: 15rpx;
overflow: hidden;
.icon {
width: 90rpx;
height: 90rpx;
border-radius: 90rpx;
border: 2rpx solid #EEEEEE;
.swiper-dot {
// 指示点元素默认样式
width: 12upx;
height: 8upx;
background: #DDDDDD;
border-radius: 4rpx;
margin-left: 6rpx;
}
.swiper-dot-active {
// 指示点元素激活（当前选中）状态样式
width: 32upx;
height: 8upx;
background: #FF3737;
border-radius: 4rpx;
}
}
.item-right {
}
.list {
display: flex;
flex: 1;
flex-direction: column;
margin-left: 20rpx;
overflow: hidden;
flex-direction: row;
background: #FFFFFF;
border-radius: 30rpx;
padding: 30rpx 5rpx;
z-index: 99;
flex-wrap: wrap;
width: 100%;
height: 100%;
margin-top: -50rpx;
.item {
width: 148rpx;
height: 180rpx;
text-align: center;
.icon {
width: 96rpx;
height: 96rpx;
margin: 0 auto;
display: block;
}
.item-title {
font-size: 30rpx;
font-weight: bolder;
margin-top: 12rpx;
font-size: 24rpx;
color: #333333;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 148rpx;
}
.item-desc {
font-size: 24rpx;
font-size: 20rpx;
color: #999999;
text-overflow: ellipsis;
white-space: nowrap;
margin-top: 15rpx;
margin-top: 10rpx;
overflow: hidden;
width: 148rpx;
}
}
}
.bottom-list {
margin: 20rpx 0;
background-color: #FFFFFF;
border-radius: 30rpx;
padding: 30rpx;
.top {
display: flex;
align-items: center;
.img {
height: 32rpx;
width: 32rpx;
}
.name {
margin-left: 10rpx;
font-size: 32rpx;
font-weight: bolder;
font-weight: bolder;
}
}
.item {
height: 240rpx;
margin-top: 30rpx;
display: flex;
.img {
height: 240rpx;
width: 240rpx;
background-color: #F9F9F9;
border-radius: 8rpx;
border: 1rpx solid #F5F5F5;
}
.right {
margin-top: 20rpx;
margin-left: 20rpx;
.title-container {
height: 80rpx;
width: 428rpx;
font-size: 30rpx;
color: #333333;
line-height: 44rpx;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
vertical-align:middle;
.brand {
font-size: 22rpx;
line-height: 32rpx;
color: #FFFFFF;
height: 30rpx;
padding: 0 10rpx;
background-color: #FF0520;
border-radius: 15rpx;
position: relative;
top: -2rpx;
margin-right: 10rpx;
}
}
.bottom {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 82rpx;
.money {
color: #FF0520;
font-size: 38rpx;
font-weight: bolder;
text {
font-size: 28rpx;
font-weight: 400;
}
}
.btn {
height: 56rpx;
width: 156rpx;
border-radius: 28rpx;
background-color: #FF3737;
color: #ffffff;
line-height: 58rpx;
font-size: 28rpx;
text-align: center;
}
}
}
......
uni_modules/uni-swiper-dot/changelog.md 0 → 100644
## 1.2.0（2021-11-19）
- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-swiper-dot](https://uniapp.dcloud.io/component/uniui/uni-swiper-dot)
## 1.1.0（2021-07-30）
- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.0.6（2021-05-12）
- 新增 示例地址
- 修复 示例项目缺少组件的Bug
## 1.0.5（2021-02-05）
- 调整为uni_modules目录规范
- 新增 clickItem 事件，支持指示点控制轮播
- 新增 支持 pc 可用
uni_modules/uni-swiper-dot/components/uni-swiper-dot/uni-swiper-dot.vue 0 → 100644
<template>
<view class="uni-swiper__warp">
<slot />
<view v-if="mode === 'default'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='default'>
<view v-for="(item,index) in info" @click="clickItem(index)" :style="{
'width': (index === current? dots.width*2:dots.width ) + 'px','height':dots.width/2 +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border-radius':'0px'}"
:key="index" class="uni-swiper__dots-item uni-swiper__dots-bar" />
</view>
<view v-if="mode === 'dot'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='dot'>
<view v-for="(item,index) in info" @click="clickItem(index)" :style="{
'width': dots.width + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
:key="index" class="uni-swiper__dots-item" />
</view>
<view v-if="mode === 'round'" :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box" key='round'>
<view v-for="(item,index) in info" @click="clickItem(index)" :class="[index === current&&'uni-swiper__dots-long']" :style="{
'width':(index === current? dots.width*3:dots.width ) + 'px','height':dots.height +'px' ,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
:key="index" class="uni-swiper__dots-item " />
</view>
<view v-if="mode === 'nav'" key='nav' :style="{'background-color':dotsStyles.backgroundColor,'bottom':'0'}" class="uni-swiper__dots-box uni-swiper__dots-nav">
<text :style="{'color':dotsStyles.color}" class="uni-swiper__dots-nav-item">{{ (current+1)+"/"+info.length +' ' +info[current][field] }}</text>
</view>
<view v-if="mode === 'indexes'" key='indexes' :style="{'bottom':dots.bottom + 'px'}" class="uni-swiper__dots-box">
<view v-for="(item,index) in info" @click="clickItem(index)" :style="{
'width':dots.width + 'px','height':dots.height +'px' ,'color':index === current?dots.selectedColor:dots.color,'background-color':index !== current?dots.backgroundColor:dots.selectedBackgroundColor,'border':index !==current ? dots.border:dots.selectedBorder}"
:key="index" class="uni-swiper__dots-item uni-swiper__dots-indexes"><text class="uni-swiper__dots-indexes-text">{{ index+1 }}</text></view>
</view>
</view>
</template>
<script>
/**
* SwiperDod 轮播图指示点
* @description 自定义轮播图指示点
* @tutorial https://ext.dcloud.net.cn/plugin?id=284
* @property {Number} current 当前指示点索引，必须是通过 `swiper` 的 `change` 事件获取到的 `e.detail.current`
* @property {String} mode = [default|round|nav|indexes] 指示点的类型
* @value defualt 默认指示点
* @value round 圆形指示点
* @value nav 条形指示点
* @value indexes 索引指示点
* @property {String} field mode 为 nav 时，显示的内容字段（mode = nav 时必填）
* @property {String} info 轮播图的数据，通过数组长度决定指示点个数
* @property {Object} dotsStyles 指示点样式
* @event {Function} clickItem 组件触发点击事件时触发，e={currentIndex}
*/
export default {
name: 'UniSwiperDot',
emits:['clickItem'],
props: {
info: {
type: Array,
default () {
return []
}
},
current: {
type: Number,
default: 0
},
dotsStyles: {
type: Object,
default () {
return {}
}
},
// 类型 ：default(默认) indexes long nav
mode: {
type: String,
default: 'default'
},
// 只在 nav 模式下生效，变量名称
field: {
type: String,
default: ''
}
},
data() {
return {
dots: {
width: 6,
height: 6,
bottom: 10,
color: '#fff',
backgroundColor: 'rgba(0, 0, 0, .3)',
border: '1px rgba(0, 0, 0, .3) solid',
selectedBackgroundColor: '#333',
selectedBorder: '1px rgba(0, 0, 0, .9) solid'
}
}
},
watch: {
dotsStyles(newVal) {
this.dots = Object.assign(this.dots, this.dotsStyles)
},
mode(newVal) {
if (newVal === 'indexes') {
this.dots.width = 14
this.dots.height = 14
} else {
this.dots.width = 6
this.dots.height = 6
}
}
},
created() {
if (this.mode === 'indexes') {
this.dots.width = 12
this.dots.height = 12
}
this.dots = Object.assign(this.dots, this.dotsStyles)
},
methods: {
clickItem(index) {
this.$emit('clickItem', index)
}
}
}
</script>
<style lang="scss" scoped>
.uni-swiper__warp {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: column;
position: relative;
overflow: hidden;
}
.uni-swiper__dots-box {
position: absolute;
bottom: 10px;
left: 0;
right: 0;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: row;
justify-content: center;
align-items: center;
}
.uni-swiper__dots-item {
width: 8px;
border-radius: 100px;
margin-left: 6px;
background-color: rgba(0, 0, 0, 0.4);
/* #ifndef APP-NVUE */
cursor: pointer;
/* #endif */
/* #ifdef H5 */
// border-width: 5px 0;
// border-style: solid;
// border-color: transparent;
// background-clip: padding-box;
/* #endif */
// transition: width 0.2s linear; 不要取消注释，不然会不能变色
}
.uni-swiper__dots-item:first-child {
margin: 0;
}
.uni-swiper__dots-default {
border-radius: 100px;
}
.uni-swiper__dots-long {
border-radius: 50px;
}
.uni-swiper__dots-bar {
border-radius: 50px;
}
.uni-swiper__dots-nav {
bottom: 0px;
// height: 26px;
padding: 8px 0;
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
flex: 1;
flex-direction: row;
justify-content: flex-start;
align-items: center;
background-color: rgba(0, 0, 0, 0.2);
}
.uni-swiper__dots-nav-item {
/* overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; */
font-size: 14px;
color: #fff;
margin: 0 15px;
}
.uni-swiper__dots-indexes {
/* #ifndef APP-NVUE */
display: flex;
/* #endif */
// flex: 1;
justify-content: center;
align-items: center;
}
.uni-swiper__dots-indexes-text {
color: #fff;
font-size: 12px;
line-height: 14px;
}
</style>
uni_modules/uni-swiper-dot/package.json 0 → 100644
{
"id": "uni-swiper-dot",
"displayName": "uni-swiper-dot 轮播图指示点",
"version": "1.2.0",
"description": "自定义轮播图指示点组件",
"keywords": [
"uni-ui",
"uniui",
"轮播图指示点",
"dot",
"swiper"
],
"repository": "https://github.com/dcloudio/uni-ui",
"engines": {
"HBuilderX": ""
},
"directories": {
"example": "../../temps/example_temps"
},
"dcloudext": {
"category": [
"前端组件",
"通用组件"
],
"sale": {
"regular": {
"price": "0.00"
},
"sourcecode": {
"price": "0.00"
}
},
"contact": {
"qq": ""
},
"declaration": {
"ads": "无",
"data": "无",
"permissions": "无"
},
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
},
"uni_modules": {
"dependencies": ["uni-scss"],
"encrypt": [],
"platforms": {
"cloud": {
"tcb": "y",
"aliyun": "y"
},
"client": {
"App": {
"app-vue": "y",
"app-nvue": "y"
},
"H5-mobile": {
"Safari": "y",
"Android Browser": "y",
"微信浏览器(Android)": "y",
"QQ浏览器(Android)": "y"
},
"H5-pc": {
"Chrome": "y",
"IE": "y",
"Edge": "y",
"Firefox": "y",
"Safari": "y"
},
"小程序": {
"微信": "y",
"阿里": "y",
"百度": "y",
"字节跳动": "y",
"QQ": "y"
},
"快应用": {
"华为": "u",
"联盟": "u"
},
"Vue": {
"vue2": "y",
"vue3": "y"
}
}
}
}
}
\ No newline at end of file
uni_modules/uni-swiper-dot/readme.md 0 → 100644
## SwiperDot 轮播图指示点
> **组件名：uni-swiper-dot**
> 代码块： `uSwiperDot`
自定义轮播图指示点
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-swiper-dot)
#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment