418 lines
8.2 KiB
Vue
418 lines
8.2 KiB
Vue
<template>
|
||
<view class="app">
|
||
<view class="vacancies">
|
||
<image src="../../static/jifenbeij.png" mode=""></image>
|
||
<view class="lefttext">
|
||
积分余额
|
||
</view>
|
||
<view class="righttext">
|
||
<!-- <image src="../../static/jfgz.png" mode=""></image>
|
||
<view class="">
|
||
积分规则
|
||
</view> -->
|
||
</view>
|
||
<view class="title">
|
||
{{integral}}
|
||
</view>
|
||
<view class="centertext">
|
||
<!-- 20积分将于2022.01.01过期 -->
|
||
</view>
|
||
<view class="bottombutton" @tap='gainshow=true'>
|
||
获取积分
|
||
</view>
|
||
</view>
|
||
<view class="titles">
|
||
积分兑换
|
||
</view>
|
||
<view class="items">
|
||
<view class="item" v-for="(item,index) in goodslist" :key="index">
|
||
<image :src="item.goodsPictureUrl" mode=""></image>
|
||
<view class="title">
|
||
{{item.goodsName}}
|
||
</view>
|
||
<view class="text">
|
||
{{item.attributeDetailsName}}
|
||
</view>
|
||
<view class="jifen">
|
||
需使用
|
||
<span style='padding: 0 5rpx;'> {{item.integralExchangeSill}}</span>
|
||
积分兑换
|
||
</view>
|
||
<view class="btn">
|
||
立即兑换
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-mask :show="gainshow" @tap="gainshow = false">
|
||
<view class="mask" @click.stop="">
|
||
<view class="title">
|
||
获取方式
|
||
</view>
|
||
<view class="maskitems">
|
||
<view class="item">
|
||
<image src="../../static/qiandao.png" mode=""></image>
|
||
<view class="titletext">
|
||
累计签到
|
||
<span style='padding: 0 5rpx;'> {{list.totalSignInDays}}</span>
|
||
天(当前签到
|
||
<span style='padding: 0 5rpx;'> {{list.patientSignInCount}}</span>天)
|
||
</view>
|
||
<view class="text">
|
||
＋<span style='padding: 0 5rpx;'> {{list.signInCount}}</span>积分
|
||
</view>
|
||
<view class="btn" @tap='signIninfo' v-if='list.todaySignInCount==0'>
|
||
签到
|
||
</view>
|
||
<view class="btn" v-if='list.todaySignInCount==1'>
|
||
已签到
|
||
</view>
|
||
</view>
|
||
<view class="item" style="background-color: #F44B2F;">
|
||
<image src="../../static/yaoqing.png" mode=""></image>
|
||
<view class="titletext">
|
||
每邀请
|
||
<span style='padding: 0 5rpx;'> 1</span>
|
||
位好友
|
||
</view>
|
||
<view class="text">
|
||
＋<span style='padding: 0 5rpx;'> {{list.inviteFriends}}</span>积分
|
||
</view>
|
||
<view class="btn" style="color: #F44B2F;" @tap="yaoqingshowtrue">
|
||
去完成
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-mask>
|
||
<u-mask :show="yaoqingshow" @tap="yaoqingshowfalse">
|
||
<view class="masks" @click.stop="">
|
||
<r-canvas ref="rCanvas"></r-canvas>
|
||
</view>
|
||
</u-mask>
|
||
<u-toast ref="uToast" />
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import {
|
||
signIn,
|
||
selectPatientSignIn,
|
||
selectExchangeGoods
|
||
} from '@/api/integral/index.js'
|
||
import {
|
||
inviteFriends
|
||
} from '@/api/Personal/Personal.js';
|
||
import baseurl from '../../api/baseurl';
|
||
export default {
|
||
|
||
data() {
|
||
return {
|
||
integral: 0,
|
||
gainshow: false,
|
||
yaoqingshow: false,
|
||
patientId: null,
|
||
list: null,
|
||
inviteimg: null,
|
||
pageNum: 1,
|
||
pageSize: 10,
|
||
goodstotal: 0,
|
||
goodslist: null,
|
||
};
|
||
},
|
||
onReady() {
|
||
|
||
},
|
||
onLoad(options) {
|
||
this.integral = options.integral
|
||
var that = this
|
||
this.selectExchangeGoodsinfo();
|
||
const value = uni.getStorageSync('patientId');
|
||
if (value) {
|
||
that.patientId = value
|
||
that.selectPatientSignInifo();
|
||
inviteFriends(value).then(res => {
|
||
that.inviteimg = res.msg
|
||
})
|
||
}
|
||
},
|
||
methods: {
|
||
yaoqingshowfalse() {},
|
||
//可兑换商品
|
||
selectExchangeGoodsinfo() {
|
||
selectExchangeGoods(this.pageNum, this.pageSize).then(res => {
|
||
res.rows.forEach(e => {
|
||
e.goodsPictureUrl = baseurl + e.goodsPictureUrl
|
||
})
|
||
this.goodslist = res.rows
|
||
this.goodstotal = res.total
|
||
})
|
||
},
|
||
//积分
|
||
selectPatientSignInifo() {
|
||
selectPatientSignIn(this.patientId).then(res => {
|
||
this.list = res.data
|
||
})
|
||
},
|
||
//点击签到
|
||
signIninfo() {
|
||
signIn(this.patientId).then(res => {
|
||
if (res.code == 200) {
|
||
this.$refs.uToast.show({
|
||
title: '今日签到成功',
|
||
type: 'success',
|
||
duration: '1000',
|
||
})
|
||
this.selectPatientSignInifo();
|
||
}
|
||
})
|
||
},
|
||
},
|
||
onReachBottom() { //下滑加载
|
||
if (this.goodslist.length >= this.goodstotal) {} else {
|
||
this.pageNum++;
|
||
selectExchangeGoods(this.pageNum, this.pageSize).then(res => {
|
||
res.rows.forEach(e => {
|
||
e.goodsPictureUrl = baseurl + e.goodsPictureUrl
|
||
this.goodslist.push(e)
|
||
})
|
||
})
|
||
}
|
||
},
|
||
onPullDownRefresh() { //下拉刷新
|
||
this.pageNum = 1;
|
||
this.selectExchangeGoodsinfo();
|
||
setTimeout(function() {
|
||
uni.stopPullDownRefresh();
|
||
}, 1000);
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.app {
|
||
.masks {
|
||
margin: 50rpx auto 0;
|
||
height: 1100rpx;
|
||
width: 620rpx;
|
||
|
||
::v-deep .r-canvas {
|
||
height: 1100rpx !important;
|
||
width: 620rpx !important;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
::v-deep .r-canvas-component {
|
||
height: 1100rpx !important;
|
||
width: 620rpx !important;
|
||
margin: 0 auto;
|
||
}
|
||
}
|
||
|
||
.mask {
|
||
position: fixed;
|
||
bottom: 0;
|
||
height: 600rpx;
|
||
width: 100%;
|
||
background-color: #fff;
|
||
|
||
.maskitems {
|
||
color: #fff;
|
||
width: 90%;
|
||
margin: 60rpx auto 0;
|
||
|
||
.item {
|
||
background: #557BC2;
|
||
width: 100%;
|
||
margin: 0 auto 20rpx;
|
||
height: 150rpx;
|
||
position: relative;
|
||
font-size: 26rpx;
|
||
|
||
.btn {
|
||
text-align: center;
|
||
width: 121rpx;
|
||
height: 44rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 22rpx;
|
||
position: absolute;
|
||
right: 30rpx;
|
||
top: 58rpx;
|
||
line-height: 44rpx;
|
||
font-size: 22rpx;
|
||
color: #557BC2;
|
||
}
|
||
|
||
.text {
|
||
position: absolute;
|
||
left: 150rpx;
|
||
top: 90rpx;
|
||
}
|
||
|
||
.titletext {
|
||
position: absolute;
|
||
left: 150rpx;
|
||
top: 48rpx;
|
||
}
|
||
|
||
image {
|
||
margin: 49rpx 0 0 43rpx;
|
||
width: 66rpx;
|
||
height: 66rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.title {
|
||
padding-top: 10rpx;
|
||
font-size: 38rpx;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
width: 100%;
|
||
}
|
||
}
|
||
|
||
.items {
|
||
margin-top: 30rpx;
|
||
|
||
.item {
|
||
width: 92%;
|
||
margin: 0 auto 12rpx;
|
||
background-color: #FFFFFF;
|
||
height: 220rpx;
|
||
position: relative;
|
||
|
||
.text {
|
||
font-size: 24rpx;
|
||
position: absolute;
|
||
left: 220rpx;
|
||
top: 90rpx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis
|
||
}
|
||
|
||
.btn {
|
||
position: absolute;
|
||
right: 40rpx;
|
||
top: 140rpx;
|
||
width: 139rpx;
|
||
height: 44rpx;
|
||
background: #557BC2;
|
||
border-radius: 22rpx;
|
||
color: #fff;
|
||
text-align: center;
|
||
font-size: 22rpx;
|
||
color: #FFFFFF;
|
||
line-height: 44rpx;
|
||
}
|
||
|
||
.jifen {
|
||
position: absolute;
|
||
left: 220rpx;
|
||
top: 140rpx;
|
||
font-size: 26rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.title {
|
||
width: 460rpx;
|
||
font-size: 34rpx;
|
||
font-weight: 600;
|
||
position: absolute;
|
||
left: 220rpx;
|
||
top: 25rpx;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis
|
||
}
|
||
|
||
image {
|
||
margin: 15rpx 0 0 15rpx;
|
||
width: 180rpx;
|
||
height: 180rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.titles {
|
||
margin: 38rpx 0 0 31rpx;
|
||
font-size: 30rpx;
|
||
}
|
||
|
||
.vacancies {
|
||
width: 92%;
|
||
height: 330rpx;
|
||
margin: 0 auto;
|
||
position: relative;
|
||
color: #fff;
|
||
|
||
.bottombutton {
|
||
position: absolute;
|
||
top: 230rpx;
|
||
left: 50%;
|
||
font-size: 32rpx;
|
||
color: #557BC2;
|
||
line-height: 72rpx;
|
||
text-align: center;
|
||
transform: translateX(-50%);
|
||
width: 440rpx;
|
||
height: 72rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 36rpx;
|
||
}
|
||
|
||
.centertext {
|
||
position: absolute;
|
||
top: 160rpx;
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
opacity: 0.8;
|
||
}
|
||
|
||
.title {
|
||
position: absolute;
|
||
left: 50%;
|
||
font-size: 70rpx;
|
||
top: 90rpx;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.righttext {
|
||
position: absolute;
|
||
top: 32rpx;
|
||
right: 31rpx;
|
||
font-size: 24rpx;
|
||
line-height: 28rpx;
|
||
width: 130rpx;
|
||
height: 28rpx;
|
||
|
||
image {
|
||
position: absolute;
|
||
left: 0;
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
}
|
||
|
||
view {
|
||
opacity: 0.6;
|
||
position: absolute;
|
||
right: 0;
|
||
}
|
||
}
|
||
|
||
.lefttext {
|
||
position: absolute;
|
||
top: 32rpx;
|
||
left: 33rpx;
|
||
font-size: 30rpx;
|
||
line-height: 33rpx;
|
||
}
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
</style>
|