初始项目
This commit is contained in:
liupopo
115
mallplusui-uniapp-app/pages/integral/home/home.css
Normal file
115
mallplusui-uniapp-app/pages/integral/home/home.css
Normal file
@@ -0,0 +1,115 @@
|
||||
.top {}
|
||||
|
||||
.top-integral {
|
||||
font-size: 60upx;
|
||||
}
|
||||
|
||||
.top-bot {
|
||||
height: 100upx;
|
||||
margin-top: 40upx;
|
||||
background: rgba(255,255,255,0.12);
|
||||
}
|
||||
|
||||
.top-warn{
|
||||
width: 50upx;
|
||||
height: 50upx;
|
||||
position: relative;
|
||||
left: 400upx;
|
||||
bottom: 100upx;
|
||||
}
|
||||
|
||||
.level{
|
||||
border: 1px solid #FFCC00;
|
||||
border-radius: 20upx;
|
||||
}
|
||||
|
||||
.bill {
|
||||
width: 33%;
|
||||
height: 100upx;
|
||||
}
|
||||
|
||||
.content-title{
|
||||
width: 100%;
|
||||
height: 100upx;
|
||||
}
|
||||
|
||||
|
||||
.hot-goods-content {
|
||||
width: 100%;
|
||||
/* padding: 0 1.5% 25upx 1.5%; */
|
||||
padding: 0 1.5%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding-bottom: 20upx;
|
||||
/* justify-content: center; */
|
||||
}
|
||||
|
||||
.hot-goods-item {
|
||||
margin: 20upx 2% 0 2%;
|
||||
padding: 5upx 0;
|
||||
width: 46%;
|
||||
/* height: 430upx; */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background: #ffffff;
|
||||
border-bottom-right-radius: 8upx;
|
||||
border-bottom-left-radius: 8upx;
|
||||
box-shadow: 0upx 0px 15upx #FFEFDB;
|
||||
}
|
||||
|
||||
.hot-goods-item2 {
|
||||
margin: 20upx 2% 0 2%;
|
||||
width: 46%;
|
||||
padding: 5upx 0;
|
||||
/* height: 430upx; */
|
||||
height: 500upx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background: #ffffff;
|
||||
border-bottom-right-radius: 8upx;
|
||||
border-bottom-left-radius: 8upx;
|
||||
/* box-shadow: 0upx 0px 15upx #FFEFDB; */
|
||||
}
|
||||
|
||||
.hot-goods-item:nth-child(2n-1) {
|
||||
margin-right: auto;
|
||||
|
||||
}
|
||||
|
||||
.hot-goods-image {
|
||||
width: 290upx;
|
||||
height: 290upx;
|
||||
margin-top: 3upx;
|
||||
}
|
||||
|
||||
.hot-goods-image-more {
|
||||
width: 150upx;
|
||||
height: 150upx;
|
||||
}
|
||||
|
||||
.hot-goods-name {
|
||||
margin-top: 10upx;
|
||||
font-size: 30upx;
|
||||
width: 94%;
|
||||
text-align: left;
|
||||
/* height: 100upx; */
|
||||
}
|
||||
|
||||
.hot-goods-more {
|
||||
margin-top: 5upx;
|
||||
margin-left: 10upx;
|
||||
font-size: 30upx;
|
||||
width: 94%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hot-goods-price {
|
||||
margin: 20upx 10upx 0 0;
|
||||
font-size: 30upx;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
}
|
||||
166
mallplusui-uniapp-app/pages/integral/home/home.vue
Normal file
166
mallplusui-uniapp-app/pages/integral/home/home.vue
Normal file
@@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<view class="content column">
|
||||
<view class="top bg-green column with-100 align-height">
|
||||
<text class="font-bold top-integral text-while">{{integrals || 0}}</text>
|
||||
<view class="text-size-below-normal center-algin" style="margin-left: -40upx;">
|
||||
<image class="top-warn" src="/static/images/icon_sigh.png"></image>
|
||||
<text class="text-while">兑换余额</text>
|
||||
</view>
|
||||
<view class="top-bot row with-100">
|
||||
<view class="bill center-algin">
|
||||
<text class="text-while">积分明细</text>
|
||||
</view>
|
||||
<view class="bill center-algin">
|
||||
<text class="text-while">积分订单</text>
|
||||
</view>
|
||||
<view class="bill center-algin">
|
||||
<text class="text-while">积分等级</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="with-100 margin-top-20 column">
|
||||
<view class="content-title padding-width-20 bg-white center-algin">
|
||||
<text class="">积分兑换商品</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="hot-goods-content bg-white">
|
||||
<view class="hot-goods-item" hover-class="hot-goods-item-hover" v-for="(item,index) in newProductList" :key="index"
|
||||
:class="index % 2 === 2 ? 'no-border-right' : ''" @click="toGoods(item)" >
|
||||
<view class="items column padding-20">
|
||||
<view class="center-algin item-images">
|
||||
<image class="hot-goods-image" :src="item.orderSn"></image>
|
||||
</view>
|
||||
<view class="hot-goods-name ellipsis-oneline">{{item.goodsName}}</view>
|
||||
<view class="row align-height hot-goods-price space-between-algin">
|
||||
<text class="text-grey text-size-mim">{{item.totalAmount}}积分</text>
|
||||
<text class="level text-size-24 text-green padding-width-15">{{item.levelName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import mallplusCopyright from '@/components/mall-copyright/mallplusCopyright.vue';
|
||||
import Api from '@/common/api';
|
||||
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
|
||||
export default {
|
||||
components: {
|
||||
mallplusCopyright,
|
||||
uniLoadMore,
|
||||
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
pageNum: 1,
|
||||
loadingType: 'more', //加载更多状态
|
||||
integrals:0,
|
||||
newProductList: [],
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
//加载更多
|
||||
onReachBottom() {
|
||||
this.pageNum = this.pageNum + 1;
|
||||
this.getNewProductList();
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.pageNum = this.pageNum + 1;
|
||||
this.getNewProductList('refresh');
|
||||
|
||||
|
||||
setTimeout(function () {
|
||||
uni.stopPullDownRefresh();
|
||||
}, 2000);
|
||||
},
|
||||
|
||||
async onShow() {
|
||||
this.getNewProductList('refresh');
|
||||
let params = {orderType:5 };
|
||||
|
||||
|
||||
let data1 = await Api.apiCall('get', Api.member.currentMember, params);
|
||||
this.integrals = data1.integration;
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
|
||||
},
|
||||
methods:{
|
||||
/**
|
||||
* 获取新品上市信息
|
||||
*/
|
||||
async getNewProductList(type = 'add', loading){
|
||||
//没有更多直接返回
|
||||
if (type === 'add') {
|
||||
if (this.loadingType === 'nomore') {
|
||||
return;
|
||||
}
|
||||
this.loadingType = 'loading';
|
||||
} else {
|
||||
this.loadingType = 'more';
|
||||
}
|
||||
let params = { pageNum: this.pageNum,orderType:5};
|
||||
let list = await Api.apiCall('get', Api.order.sampleOrderList, params);
|
||||
|
||||
|
||||
let goodsList = list.records;
|
||||
|
||||
if (type === 'refresh') {
|
||||
this.newProductList = [];
|
||||
}
|
||||
|
||||
this.newProductList = this.newProductList.concat(goodsList);
|
||||
|
||||
//判断是否还有下一页，有是more 没有是nomore(测试数据判断大于20就没有了)
|
||||
this.loadingType = this.newProductList.length > list.total ? 'nomore' : 'more';
|
||||
if (type === 'refresh') {
|
||||
if (loading == 1) {
|
||||
uni.hideLoading();
|
||||
} else {
|
||||
uni.stopPullDownRefresh();
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
toGoods(item){
|
||||
let id = item.goodsId;
|
||||
uni.navigateTo({
|
||||
url: `../../pagesA/product/giftProduct?id=${id}`
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@import url("./home.css");
|
||||
page{background-color: #F3F3F3;}
|
||||
view {font-size: 30upx;line-height: 1.8;display: flex;}
|
||||
.with-100{width: 100%;}
|
||||
.row{flex-direction: row;}
|
||||
.column {flex-direction: column;}
|
||||
.text-size-max{font-size: 80upx;}
|
||||
.center-algin{justify-content: center;align-items: center;}
|
||||
.justify-center{justify-content: center;}
|
||||
.justify-between{justify-content: space-between;}
|
||||
.align-height{align-items: center;}
|
||||
.bg-white{background: #FFFFFF;}
|
||||
.bg-green {background: #F44142;}
|
||||
.text-size-24 {font-size: 24upx;}
|
||||
.text-size-mim {font-size: 26upx;}
|
||||
.text-grey {color: #9B9B9B;}
|
||||
.text-while{color: #FFFFFF;}
|
||||
.font-bold{font-weight: bold;}
|
||||
.text-size-below-normal {font-size: 28upx;}
|
||||
.bottom-line{border-bottom: #EEEEEE solid 1upx}
|
||||
.margin-bottom-20{margin-bottom: 20upx;}
|
||||
.margin-top-20{margin-top: 20upx;}
|
||||
.margin-width-20{margin:0 20upx;}
|
||||
.padding-width-20{padding: 0 20upx;}
|
||||
.content{width: 100%;}
|
||||
</style>
|
||||
Reference in New Issue
Block a user