370 lines
8.0 KiB
Vue
370 lines
8.0 KiB
Vue
<template>
|
|
<view>
|
|
<view class="head-box">
|
|
<view class="account-content">
|
|
<view class="left">
|
|
<view>我的积分</view>
|
|
</view>
|
|
<view class="right" @click="redirect('/pages/mine/point_list')">
|
|
<text class="point price-font">{{point}}</text>
|
|
<text class="text">积分</text>
|
|
<uni-icons type="right" size="22" style="display: block;float: right;margin-top: -1px;"></uni-icons>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="index-goods" >
|
|
<view class='img-grids column2' >
|
|
<view class='hs-row right-img' >
|
|
<view class='hs-row-hd'>
|
|
<view class='hs-hd-title'>积分换商品</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="content">
|
|
<view class="" v-if="list&&list.length>0">
|
|
<view class="t-goods-list" >
|
|
<view class="t-goods-item" v-for="(item,index) in list" :key="index" @click="goexchange(item)">
|
|
<image class="t-goods-img" :src="item.thumb"></image>
|
|
<view class="t-goods-name"><text>{{item.name}}</text></view>
|
|
<view class="t-goods-price">
|
|
<text class="t-p1">{{item.point}}积分+{{item.price}}元</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<uni-load-more :status="loadmore" :content-text="contentText" />
|
|
</view>
|
|
<view class="zanwuimg" v-if="list.length == 0">
|
|
<image src="../../static/img/null.png" mode="widthFix"></image>
|
|
<view>暂无相关商品</view>
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default{
|
|
data(){
|
|
return{
|
|
list:[],
|
|
ifBottomRefresh:false,
|
|
loadmore: 'more',
|
|
contentText: {
|
|
contentdown: '查看更多',
|
|
contentrefresh: '加载中',
|
|
contentnomore: '没有更多'
|
|
},
|
|
point:0
|
|
}
|
|
},
|
|
onLoad(e) {
|
|
this.getdata()
|
|
},
|
|
onShow() {
|
|
this.$api.config({}, res => {
|
|
if (res.code == "1") {
|
|
uni.setNavigationBarTitle({
|
|
title: '积分商城'
|
|
});
|
|
}else{
|
|
|
|
}
|
|
})
|
|
},
|
|
onReachBottom() {
|
|
this.page += 1
|
|
// 没有更多数据之后 就不会在触底加载
|
|
if (this.loadmore == 'noMore') return
|
|
this.ifBottomRefresh = true
|
|
this.getData() // 触底 拉取数据
|
|
},
|
|
methods:{
|
|
goexchange(item){
|
|
uni.navigateTo({
|
|
url:'/pages/exchange/goodsdetail?id='+item.id
|
|
})
|
|
},
|
|
redirect(url){
|
|
uni.navigateTo({
|
|
url:url
|
|
})
|
|
},
|
|
getdata(){
|
|
let data={page:this.page}
|
|
this.$api.exchangegoodslists(data,res=>{
|
|
if(res.code == '1'){
|
|
this.list= this.list.concat(res.data.list.data)
|
|
this.loadmore = this.list.length < res.data.list.total ? 'more' : 'noMore'
|
|
}
|
|
})
|
|
this.$api.userInfo({},res=>{
|
|
if(res.code == '1'){
|
|
this.point = res.data.user.user_point
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page{
|
|
background: #fff;
|
|
}
|
|
.index-goods{margin-top:10px}
|
|
.hs-hd-title{font-weight:600}
|
|
.hs-row-hd{border-left:6upx solid #fe5047;padding-left:14upx;font-weight:600}
|
|
.hs-fttext{font-size:24upx;color:#999;font-weight:bold}
|
|
.index-goods{background-color: #fff;}
|
|
.head-box{
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: #fff;
|
|
padding: 24rpx;
|
|
box-sizing: border-box;
|
|
border-bottom: solid 10px #eee;
|
|
|
|
.account-content{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.left{
|
|
display: flex;
|
|
align-items: center;
|
|
image{
|
|
width: 88rpx;
|
|
height: 88rpx;
|
|
}
|
|
view{
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
margin-left: 25rpx;
|
|
}
|
|
}
|
|
.right{
|
|
display: flex;
|
|
align-items: baseline;
|
|
.point{
|
|
font-weight: bold!important;
|
|
font-size: 38rpx;
|
|
color: #FF002D ;
|
|
}
|
|
.text{
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
margin: 0 10rpx;
|
|
}
|
|
}
|
|
}
|
|
.remark{
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 30rpx;
|
|
padding: 25rpx 0 0;
|
|
border-top: 2rpx solid #F2F2F2;
|
|
|
|
.label{
|
|
border-radius: 4rpx;
|
|
border: 2rpx solid #FE172E;
|
|
color: #FE172E;
|
|
padding: 2rpx 8rpx;
|
|
font-size: 22rpx;
|
|
line-height: 1;
|
|
font-weight: bold;
|
|
}
|
|
.text{
|
|
font-size: 24rpx;
|
|
font-weight: bold;
|
|
margin-left: 30rpx;
|
|
line-height: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.content {
|
|
box-sizing: border-box;
|
|
min-width: 100vw;
|
|
min-height: 100vh;
|
|
padding-bottom: 80rpx;
|
|
|
|
|
|
.t-goods-list {
|
|
padding-top: 18rpx;
|
|
box-sizing: border-box;
|
|
width: 690rpx;
|
|
margin: 0 auto;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
.t-goods-item {
|
|
box-sizing: border-box;
|
|
width: 336rpx;
|
|
height: 480rpx;
|
|
background-color: #ffffff;
|
|
overflow: hidden;
|
|
margin-bottom: 18rpx;
|
|
position: relative;
|
|
|
|
.t-goods-img {
|
|
width: 100%;
|
|
height: 340rpx;
|
|
}
|
|
|
|
.t-goods-name {
|
|
font-size: 28rpx;
|
|
color: #000000;
|
|
line-height: 30rpx;
|
|
-webkit-line-clamp: 1;
|
|
display: -webkit-box;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
-webkit-box-orient: vertical;
|
|
padding: 6rpx 18rpx;
|
|
box-sizing: border-box;
|
|
word-break: break-all;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.t-goods-desc {
|
|
font-size: 24rpx;
|
|
color: #9e9e9e;
|
|
line-height: 26rpx;
|
|
-webkit-line-clamp: 1;
|
|
display: -webkit-box;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
-webkit-box-orient: vertical;
|
|
padding: 0rpx 18rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 16rpx;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.t-goods-tags {
|
|
padding: 0rpx 18rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 16rpx;
|
|
|
|
.t-tag {
|
|
font-size: 20rpx;
|
|
border-radius: 4rpx;
|
|
border: 1rpx solid;
|
|
box-sizing: border-box;
|
|
padding: 3rpx 5rpx;
|
|
-webkit-line-clamp: 1;
|
|
display: -webkit-box;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
-webkit-box-orient: vertical;
|
|
float: left;
|
|
word-break: break-all;
|
|
|
|
&:not(:last-child) {
|
|
margin-right: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.t-goods-price {
|
|
padding: 0rpx 18rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
position: absolute;
|
|
width: 100%;
|
|
bottom: 25rpx;
|
|
left: 0rpx;
|
|
width: 100%;
|
|
|
|
.t-p1 {
|
|
font-size: 32rpx;
|
|
color: red;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.t-p2 {
|
|
font-size: 20rpx;
|
|
color: #999999;
|
|
margin-left: 10rpx;
|
|
text-decoration: line-through;
|
|
}
|
|
}
|
|
|
|
.t-rate {
|
|
padding: 0rpx 18rpx;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
position: absolute;
|
|
width: 100%;
|
|
bottom: 30rpx;
|
|
left: 0rpx;
|
|
width: 100%;
|
|
font-size: 20rpx;
|
|
color: #999999;
|
|
|
|
.t-rate-percent {
|
|
margin-left: 8rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.t-empty {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #fff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
image {
|
|
width: 320rpx;
|
|
height: 320rpx;
|
|
}
|
|
|
|
.t-empty-desc {
|
|
padding-bottom: 30rpx;
|
|
padding-top: 20rpx;
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
|
|
.t-loading-more {
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 60rpx;
|
|
|
|
image {
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
-webkit-animation: spin 1s 0s step-end infinite;
|
|
animation: spin 1s 0s step-end infinite;
|
|
margin-right: 12rpx;
|
|
}
|
|
|
|
.t-loading-desc {
|
|
font-size: 28rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
}
|
|
</style> |