<template>
<view class="content">
<view class="flex nav-list">
<view class="item" v-for="(item,index) in navList" :class="{'action': current == index}"
@click="changeNavT(index)">
{{item.tit}} <text v-if="item.loaded">({{item.count}})</text>
</view>
</view>
<swiper class="good-content" :style="{'height':height }" :current="current">
<swiper-item v-for="item in navList" :style="{'height':height }">
<scroll-view scroll-y="true" :style="{'height':height }" @scrolltolower="getList">
<view class="dyquan-wrap" v-for="(itemt,index) in item.list" :key="index">
<view class="showtime">
<text class="float_left order-no-text">{{ itemt.verify_code|| '' }}</text>
</view>
<view class="item-info">
<image src="../../static/img/tyq.png" mode=""></image>
<view class="info-info">
<view class="clamp2">
太空舱体验券
</view>
<view class="clamp2">
X1
</view>
</view>
</view>
<view class="btm">
<view v-if="itemt.status == 0 && itemt.source_uid == 0" class="btn" @click="giveFriend(itemt.id)">
转赠好友
</view>
<view v-if="itemt.status == 0 && itemt.source_uid != userInfo.uid" class="btn btn-2" @click="navto(itemt.verify_code)">
立即使用
</view>
</view>
</view>
<uni-load-more v-if="!(item.list == 0 && item.loaded)" :status="item.loadingType"></uni-load-more>
<empty v-else></empty>
</scroll-view>
</swiper-item>
</swiper>
<!-- 核销弹窗 -->
<uni-popup ref="popuphx" class="agree-wrapper">
<view class="hx-wrapper">
<view class="hx-img">
<image src="../../static/img/hxbg.png" mode=""></image>
</view>
<view class="hx-body">
<view class="hx-title">
接收人UID
</view>
<input type="text" v-model="code" placeholder="请输入接收人UID" placeholder-class="hx-placeholder" />
<view class="hx-btn" @click="qhx">
赠送
</view>
</view>
<view class="hx-close" @click="close">
<image src="../../static/icon/close.png" mode=""></image>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import {
mapState,
mapMutations
} from 'vuex';
import { getUserCard,giveCard} from '@/api/user.js'
import empty from '@/components/empty';
export default {
components: {
empty
},
data() {
return {
code: '',
give_id: 0,
height: '',
current: 0,
navList: [
{
count: 0,
status: -1,
tit: '全部',
list: [],
page: 1,
limit: 10,
loaded: false,
loadingType: 'more'
},{
count: 0,
status: 0,
tit: '待使用',
list: [],
page: 1,
limit: 10,
loaded: false,
loadingType: 'more'
},
{
count: 0,
status: 1,
tit: '已使用',
list: [],
page: 1,
limit: 10,
loaded: false,
loadingType: 'more'
},
]
}
},
onLoad() {
},
computed: {
...mapState('user', ['userInfo', 'orderInfo', 'hasLogin']),
},
onShow() {
console.log('ddd ')
this.getList('re')
},
onReachBottom() {
},
onReady(res) {
var that = this;
uni.getSystemInfo({
success: resu => {
const query = uni.createSelectorQuery();
query.select('.good-content').boundingClientRect();
query.exec(function(res) {
that.height = resu.windowHeight - res[0].top + 'px';
});
},
fail: res => {}
});
},
methods: {
qhx() {
if(!this.code) {
return this.$api.msg('请输入接收人UID')
}
if(this.code == this.userInfo.uid) {
return this.$api.msg('接收人不能为自己')
}
console.log(this.give_id)
giveCard({
id: this.give_id,
to_uid:this.code
}).then(res => {
uni.showToast({
icon:'success',
title:'赠送成功'
})
this.close()
this.getList('re')
})
},
close() {
this.code = ''
this.give_id = ''
this.$refs.popuphx.close()
},
navto(val) {
uni.navigateTo({
url: '/pages/user/hxqm?val=' + val
})
},
giveFriend(id) {
console.log(id)
this.give_id = id
this.$refs.popuphx.open()
},
changeNavT(index) {
if (index == this.current) {
return
}
this.current = index
this.getList('re')
},
getList(type) {
let that = this
let item = that.navList[that.current]
if(type == 're') {
item.page = 1
item.list = []
item.loadingType = 'more'
}
if(item.loadingType == 'loading' || item.loadingType == 'noMore') {
return
}
item.loadingType = 'loading'
getUserCard({
uid: that.userInfo.uid,
page: item.page,
limit: item.limit,
status: item.status
}).then(res => {
let arr = res.data.list
item.list = item.list.concat(arr)
item.count = res.data.count
if(item.limit == arr.length) {
item.loadingType = 'more'
item.page++
}else {
item.loadingType = 'noMore'
}
item.loaded = true
})
}
}
}
</script>
<style lang="scss" scoped>
.nav-list {
justify-content: space-around;
background-color: #fff;
font-weight: 500;
color: #333333;
.item {
padding: 28rpx 20rpx 16rpx;
}
.action {
color: #333;
font-weight: bold;
border-bottom: 2px solid $base-color;
}
}
.dyquan-wrap {
padding: 20rpx;
background-color: #fff;
margin-bottom: 15rpx;
.showtime {
height: 50rpx;
}
.item-info {
width: 750rpx;
height: 205rpx;
background: #F7F7F7;
display: flex;
justify-content: flex-start;
align-items: center;
image {
width: 160rpx;
height: 160rpx;
margin-right: 30rpx;
}
.info-info {
height: 160rpx;
padding: 15rpx 0;
padding-right: 50rpx;
font-size: 30rpx;
font-weight: 500;
color: #666666;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
.info-cs {
font-size: 26rpx;
font-weight: 500;
color: #999999;
}
}
}
.btn-list {
}
.btm {
width: 100%;
height: 95rpx;
background-color: #fff;
display: flex;
justify-content: flex-end;
align-items: center;
.btn {
width: 144rpx;
height: 55rpx;
border-radius: 28rpx;
font-size: 26rpx;
font-weight: 500;
color:$base-color;
line-height: 55rpx;
text-align: center;
border: 1px solid $base-color;
}
.btn-2 {
background-color: $base-color;color: #fff;
margin-left: 15rpx;
}
}
}
.hx-wrapper {
width: 536rpx;
// height: 630rpx;
position: relative;
padding-bottom: 40rpx;
background-color: #fff;
border-radius: 20rpx;
.hx-img {
width: 536rpx;
height: 281rpx;
image {
width: 536rpx;
height: 281rpx;
}
}
.hx-close {
position: absolute;
left: 243rpx;
bottom: -80rpx;
width: 52rpx;
height: 52rpx;
image {
width: 52rpx;
height: 52rpx;
}
}
.hx-body {
width: 536rpx;
// min-height: 349rpx;
background-color: #fff;
border-radius: 0 0 10rpx 10rpx;
padding-top: 40rpx;
.hx-title {
width: 536rpx;
font-size: 36rpx;
font-weight: 500;
color: #333333;
line-height: 1;
padding-top: 20rpx;
text-align: center;
padding-bottom: 20rpx;
}
input {
width: 439rpx;
height: 68rpx;
background: #f1faf6;
border-radius: 10rpx;
margin: 0 auto 40rpx;
padding-left: 26rpx;
.hx-placeholder {
font-size: 26rpx;
font-weight: 500;
color: $base-color;
}
}
.hx-btn {
margin: 44rpx auto 0;
width: 353rpx;
height: 71rpx;
background: $base-color;
border-radius: 34rpx;
font-size: 36rpx;
font-weight: 500;
color: #F8F9F9;
line-height: 71rpx;
text-align: center;
}
}
}
</style>