You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
529 lines
17 KiB
529 lines
17 KiB
<template>
|
|
<view class="memberCenter" v-if="ifShow">
|
|
<global-loading />
|
|
<view class="memberBox">
|
|
<view class="posBox">
|
|
<view class="memberBoxTop">
|
|
<!-- <view class="memberTopPos" :style="{backgroundImage:'url('+levelInfo.memberLevelBackground+')'}">-->
|
|
<view class="memberTopPos">
|
|
<view class="memberTopBg">
|
|
<view class="flex-items">
|
|
<view class="avatarBox">
|
|
<image :src="memberData.headImage"></image>
|
|
</view>
|
|
<view class="nameBox">
|
|
<view class="name fs32">{{memberData.name}}</view>
|
|
<view class="level">
|
|
<image :src="levelInfo.memberLevelIcon"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="integralInfo flex-items flex-sp-between mar-top-20">
|
|
<view class="itemBox">
|
|
<view class="integraNum fs28 font-color-252744 fs-weight-400">{{ memberData.totalCredit }}</view>
|
|
<view class="fs28 font-color-252744 fs-weight-400">累计积分</view>
|
|
</view>
|
|
<view class="itemBox">
|
|
<view class="integraNum fs28 font-color-252744 fs-weight-400">{{ memberData.totalCredit - memberData.credit }}</view>
|
|
<view class="fs28 font-color-252744 fs-weight-400">累计消费</view>
|
|
</view>
|
|
<view class="itemBox">
|
|
<view class="integraNum fs28 font-color-252744 fs-weight-400">{{ memberData.credit }}</view>
|
|
<view class="fs28 font-color-252744 fs-weight-400">剩余积分</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="signBox flex-items flex-sp-between mar-top-30" @click="goToSign">
|
|
<view class="signLeft flex-items flex-sp-between">
|
|
<view class="signIcon"></view>
|
|
<view class="signText fs28 font-color-252744">积分签到</view>
|
|
</view>
|
|
<view class="u-arrow u-arrow-right"></view>
|
|
</view>
|
|
<view class="signTabs mar-top-30 flex-items">
|
|
<view :class="{active: tabActive === 1}" class="tabItem flex-items flex-center" @click="changeTab(1)">
|
|
<view class="icon detailIcon"></view>
|
|
<text>积分明细</text>
|
|
</view>
|
|
<view :class="{active: tabActive === 2}" class="tabItem flex-items flex-center" @click="changeTab(2)">
|
|
<view class="icon exchangeIcon"></view>
|
|
<text>积分兑换</text>
|
|
</view>
|
|
</view>
|
|
<view class="signInfo mar-top-20" v-if="tabActive === 1">
|
|
<view class="signInBox">
|
|
<view class="signItem flex-items flex-sp-between" v-for="(item, index) of integralRecord" :key="index">
|
|
<view class="leftBox flex-items">
|
|
<<<<<<< HEAD
|
|
<image src="@/static/images/temp/signIcon1.png"></image>
|
|
=======
|
|
<image src="http://36.138.125.206:8081/ceres-local-file/static/images/signIcon1.png"></image>
|
|
>>>>>>> 586af40 (统一修改图片地址)
|
|
<view class="leftInfo">
|
|
<label class="fs28 font-color-252744">{{item.recordContent}}</label>
|
|
<view class="fs24 font-color-90919C">{{item.createTime}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="rightBtn">{{item.recordType === 1 ? '+' : '-'}}{{item.credit}}</view>
|
|
</view>
|
|
<view class="emptyCart-box flex-items-plus flex-column" v-if="integralRecord.length === 0">
|
|
<image class="emptyCart-img" src="http://36.138.125.206:8081/ceres-local-file/static/images/searchEmpty.png"></image>
|
|
<label class="font-color-999 fs26 mar-top-30">暂无记录~</label>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="signExchange mar-top-20" v-else>
|
|
<view class="exchangeInfoBox">
|
|
<view class="exchangeItem flex-items flex-sp-between" v-for="(item, index) of creditCouponList" :key="index">
|
|
<view class="exchangeLeft flex-items">
|
|
<view class="discountBox mar-right-20">
|
|
<view class="fs24" v-if="item.couponType === 1">{{item.fullMoney === 0 ? `无门槛减${item.reduceMoney}元` : `满${item.fullMoney}元减${item.reduceMoney}元`}}</view>
|
|
<view class="fs24" v-else>{{item.fullMoney === 0 ? `无门槛打${item.reduceMoney}折` : `满${item.fullMoney}元打${item.reduceMoney}折`}}</view>
|
|
<view class="fs30">{{item.couponType === 1 ? '满减券' : '折扣券'}}</view>
|
|
</view>
|
|
<view class="exchangeInfo">
|
|
<view class="fs28 font-color-333" v-if="item.couponType === 1">{{item.fullMoney === 0 ? `无门槛减${item.reduceMoney}元` : `满${item.fullMoney}元减${item.reduceMoney}元`}}</view>
|
|
<view class="fs28 font-color-333" v-else>{{item.fullMoney === 0 ? `无门槛打${item.reduceMoney}折` : `满${item.fullMoney}元打${item.reduceMoney}折`}}</view>
|
|
<view class="fs24 state" v-if="item.stockNumber > 0">还剩{{item.stockNumber}}个</view>
|
|
<view class="fs24 state finish" v-else>已兑完</view>
|
|
<view class="integral fs32">{{ item.credit }}积分</view>
|
|
</view>
|
|
</view>
|
|
<view class="exchangeRight">
|
|
<view class="exchangeBtn fs28 font-color-FFF" v-if="item.state === 0 && item.stockNumber !== 0" @click="goExchangeDetail(item)">兑换</view>
|
|
<view class="exchangeBtn available fs28 font-color-FFF" v-if="item.stockNumber === 0">已兑完</view>
|
|
<view class="exchangeBtn available fs28 font-color-FFF" v-if="item.state === 1" @click="goExchangeDetail(item)">已兑换</view>
|
|
</view>
|
|
</view>
|
|
<view class="emptyCart-box flex-items-plus flex-column" v-if="creditCouponList.length === 0">
|
|
<image class="emptyCart-img" src="http://36.138.125.206:8081/ceres-local-file/static/images/searchEmpty.png"></image>
|
|
<label class="font-color-999 fs26 mar-top-30">暂无优惠券~</label>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<tui-modal :show="isConvertible" :custom="true" :fadein="true">
|
|
<view class="Put-box1">
|
|
<view class="text-align fs34 fs-bold">
|
|
{{$t('common.notice_dialog_title')}}
|
|
</view>
|
|
<view class="mar-top-40 text-align">
|
|
您的积分不够哦，请获取更多的积分!
|
|
</view>
|
|
<view class="flex-display flex-sp-between">
|
|
<view class="btn" @click="goToSign">
|
|
去签到
|
|
</view>
|
|
</view>
|
|
<view v-if="isConvertible" @click="isConvertible = false" class="cancelDel">
|
|
<image src="http://36.138.125.206:8081/ceres-local-file/static/images/cancelClose.png" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</tui-modal>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import tuiModal from "@/components/modal/modal";
|
|
const NET = require('../../utils/request')
|
|
const API = require('../../config/api')
|
|
export default {
|
|
name: "index",
|
|
components: {
|
|
tuiModal
|
|
},
|
|
data() {
|
|
return {
|
|
memberData: {},
|
|
equityList: [],
|
|
integralRecord: [],
|
|
creditCouponList: [],
|
|
levelInfo: {},
|
|
tabActive: 1,
|
|
isConvertible: false,
|
|
integralInfo: {
|
|
page: 1,
|
|
pageSize: 10,
|
|
session: ""
|
|
},
|
|
couponListInfo: {
|
|
page: 1,
|
|
pageSize: 10,
|
|
session: ""
|
|
},
|
|
ifShow: false
|
|
}
|
|
},
|
|
onLoad(option) {
|
|
this.memberData = uni.getStorageSync('storage_userInfo');
|
|
this.GetUser()
|
|
if (option.tabActive) {
|
|
this.tabActive = parseInt(option.tabActive)
|
|
}
|
|
this.getIntegralList()
|
|
this.getCreditCouponList()
|
|
this.getMemberByMemberLevel()
|
|
},
|
|
methods: {
|
|
GetUser() {
|
|
NET.request(API.GetUser, {}, 'GET').then(res => {
|
|
this.memberData = res.data
|
|
uni.setStorageSync('storage_userInfo', this.memberData);
|
|
}).catch(res => {
|
|
|
|
})
|
|
},
|
|
getIntegralList() {
|
|
// 获取签到信息
|
|
// uni.showLoading({
|
|
// mask: true,
|
|
// title: '加载中...',
|
|
// })
|
|
NET.request(API.selectCreditRecord, this.integralInfo, 'POST').then(res => {
|
|
// uni.hideLoading()
|
|
this.ifShow = true
|
|
this.integralRecord = res.data.list
|
|
}).catch(res => {
|
|
})
|
|
},
|
|
// 获取可兑换优惠券列表
|
|
getCreditCouponList() {
|
|
NET.request(API.selectCreditCouponList, this.couponListInfo, 'POST').then(res => {
|
|
this.creditCouponList = res.data.list
|
|
}).catch(res => {
|
|
})
|
|
},
|
|
// 去首页
|
|
goToShopping () {
|
|
uni.switchTab({
|
|
url: '../../pages/tabbar/index/index'
|
|
})
|
|
},
|
|
getPercent(num, total){
|
|
num = parseFloat(num);
|
|
total = parseFloat(total);
|
|
if (isNaN(num) || isNaN(total)) {
|
|
return "-";
|
|
}
|
|
return total <= 0? "0%" : Math.round((num / total) * 10000) / 100.0;
|
|
},
|
|
// 获取会员等级
|
|
getMemberByMemberLevel() {
|
|
NET.request(`${API.getMemberByMemberLevel}/${this.memberData.memberLevelId}`,{}, 'GET').then(res => {
|
|
this.levelInfo = res.data
|
|
uni.setStorageSync('storage_levelInfo', this.levelInfo);
|
|
}).catch(res => {
|
|
})
|
|
},
|
|
// 签到
|
|
goToSign() {
|
|
uni.navigateTo({
|
|
url: '../../pages_category_page1/integral/sign'
|
|
})
|
|
},
|
|
// 跳转到兑换优惠详情
|
|
goExchangeDetail (item) {
|
|
if (this.memberData.credit < item.credit) {
|
|
this.isConvertible = true
|
|
} else {
|
|
uni.navigateTo({
|
|
url: `../integral/exchangeDetail?data=${JSON.stringify(item)}`
|
|
})
|
|
}
|
|
},
|
|
// 切换tab
|
|
changeTab(type) {
|
|
this.tabActive = type
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
background: #FAFAFA;
|
|
}
|
|
.memberCenter {
|
|
<<<<<<< HEAD
|
|
border-top: 1rpx solid #252744;
|
|
background: url("@/static/images/temp/integral_bg.png") no-repeat left top;
|
|
=======
|
|
border-top: 2rpx solid #4b4b4b;
|
|
background: url("http://36.138.125.206:8081/ceres-local-file/static/images/addBankBg.png") no-repeat left top;
|
|
>>>>>>> 586af40 (统一修改图片地址)
|
|
background-size: contain;
|
|
min-height: 389rpx;
|
|
padding: 0 20rpx;
|
|
.memberBox {
|
|
min-height: 230rpx;
|
|
margin-top: 120rpx;
|
|
width: 100%;
|
|
border-radius: 25rpx;
|
|
background-size: contain;
|
|
position: relative;
|
|
box-sizing: border-box;
|
|
.posBox {
|
|
position: absolute;
|
|
width: 100%;
|
|
left: 0;
|
|
top: -80rpx;
|
|
}
|
|
.memberBoxTop {
|
|
position: relative;
|
|
.memberTopPos{
|
|
<<<<<<< HEAD
|
|
//background: url("https://ceres.zkthink.com/static/images/integralBg.png") no-repeat left top;
|
|
background: linear-gradient(-30deg, #C8CBF7, #E6E8FB);
|
|
=======
|
|
//background: url("http://36.138.125.206:8081/ceres-local-file/static/images/integralBg.png") no-repeat left top;
|
|
>>>>>>> 586af40 (统一修改图片地址)
|
|
background-size: cover;
|
|
height: 302rpx;
|
|
border-radius: 24rpx;
|
|
//box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.05);
|
|
box-shadow: 0rpx 20rpx 40rpx 0rpx #E4E6FC;
|
|
.memberTopBg {
|
|
padding: 40rpx 30rpx;
|
|
.integralInfo {
|
|
padding: 0 50rpx;
|
|
.itemBox {
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.avatarBox {
|
|
margin-left: 30rpx;
|
|
image {
|
|
width: 110rpx;
|
|
height: 110rpx;
|
|
border: 5rpx solid #FFFFFF;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
.nameBox {
|
|
margin-left: 20rpx;
|
|
.name {
|
|
color: #333333;
|
|
margin-right: 30rpx;
|
|
}
|
|
.level {
|
|
image {
|
|
width: 172rpx;
|
|
height: 50rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.signBox {
|
|
background: #ffffff;
|
|
height: 96rpx;
|
|
border-radius: 24rpx;
|
|
padding: 0 30rpx;
|
|
.signLeft {
|
|
.signIcon {
|
|
<<<<<<< HEAD
|
|
background: url("@/static/images/temp/signIcon.png") no-repeat center left;
|
|
=======
|
|
background: url("http://36.138.125.206:8081/ceres-local-file/static/images/signIcon.png") no-repeat center left;
|
|
>>>>>>> 586af40 (统一修改图片地址)
|
|
background-size: contain;
|
|
height: 76rpx;
|
|
width: 76rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
}
|
|
.u-arrow {
|
|
width: 16rpx;
|
|
height: 16rpx;
|
|
border-top: 3rpx solid #252744;
|
|
border-right: 3rpx solid #252744;
|
|
}
|
|
}
|
|
.signTabs {
|
|
.tabItem {
|
|
width: 50%;
|
|
height: 96rpx;
|
|
border-radius: 16rpx;
|
|
text {
|
|
color: #252744;
|
|
font-size: 28rpx;
|
|
}
|
|
.icon {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
margin-right: 15rpx;
|
|
}
|
|
.detailIcon {
|
|
<<<<<<< HEAD
|
|
background: url("@/static/images/temp/detailIcon1.png") no-repeat center center;
|
|
background-size: contain;
|
|
}
|
|
.exchangeIcon {
|
|
background: url("@/static/images/temp/exchangeIcon1.png") no-repeat center center;
|
|
=======
|
|
background: url("http://36.138.125.206:8081/ceres-local-file/static/images/detailIcon.png") no-repeat center center;
|
|
background-size: contain;
|
|
}
|
|
.exchangeIcon {
|
|
background: url("http://36.138.125.206:8081/ceres-local-file/static/images/exchangeIcon.png") no-repeat center center;
|
|
>>>>>>> 586af40 (统一修改图片地址)
|
|
background-size: contain;
|
|
}
|
|
}
|
|
.active {
|
|
background: #252744;
|
|
.detailIcon {
|
|
<<<<<<< HEAD
|
|
background: url("@/static/images/temp/detailIcon.png") no-repeat center center;
|
|
background-size: contain;
|
|
}
|
|
.exchangeIcon {
|
|
background: url("@/static/images/temp/exchangeIcon.png") no-repeat center center;
|
|
=======
|
|
background: url("http://36.138.125.206:8081/ceres-local-file/static/images/detailIcon1.png") no-repeat center center;
|
|
background-size: contain;
|
|
}
|
|
.exchangeIcon {
|
|
background: url("http://36.138.125.206:8081/ceres-local-file/static/images/exchangeIcon1.png") no-repeat center center;
|
|
>>>>>>> 586af40 (统一修改图片地址)
|
|
background-size: contain;
|
|
}
|
|
text {
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
.signInfo {
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.05);
|
|
padding: 30rpx;
|
|
.signInBox {
|
|
.signItem {
|
|
border-top: 2rpx solid #F3F4F5;
|
|
padding: 30rpx 0;
|
|
.leftBox {
|
|
image {
|
|
width: 90rpx;
|
|
height: 90rpx;
|
|
margin-right: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
.signItem:first-child {
|
|
border-top: none;
|
|
}
|
|
.rightBtn {
|
|
//width: 160rpx;
|
|
//height: 58rpx;
|
|
//line-height: 58rpx;
|
|
//background: #FFF9F6;
|
|
//border-radius: 10rpx;
|
|
color: #F54639;
|
|
text-align: center;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
.signExchange {
|
|
box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.05);
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx;
|
|
padding: 40rpx 30rpx;
|
|
.exchangeInfoBox {
|
|
.exchangeItem {
|
|
padding-bottom: 20rpx;
|
|
margin-bottom: 20rpx;
|
|
border-bottom: 2rpx #F3F4F5 solid;
|
|
.exchangeLeft {
|
|
.discountBox {
|
|
color: #FDFED6;
|
|
width: 300rpx;
|
|
height: 146rpx;
|
|
background: url('http://36.138.125.206:8081/ceres-local-file/static/images/exchangeItem.png') no-repeat left top;
|
|
background-size: contain;
|
|
padding: 30rpx 25rpx;
|
|
}
|
|
.exchangeInfo {
|
|
.state {
|
|
text-align: center;
|
|
background: #333333;
|
|
color: #FFEBC4;
|
|
font-size: 24rpx;
|
|
margin: 8rpx 0 4rpx 0;
|
|
padding: 8rpx 14rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
.finish {
|
|
color: #CCCCCC;
|
|
border: 2rpx solid #CCCCCC;
|
|
background: none;
|
|
}
|
|
.integral {
|
|
color: #D72E2E;
|
|
}
|
|
}
|
|
}
|
|
.exchangeRight {
|
|
height: 146rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
.exchangeBtn {
|
|
width: 120rpx;
|
|
height: 48rpx;
|
|
line-height: 48rpx;
|
|
text-align: center;
|
|
background: linear-gradient(90deg, #C83732 0%, #E25C44 100%);
|
|
box-shadow: 0 6rpx 12rpx rgba(233, 0, 0, 0.3);
|
|
border-radius: 24rpx;
|
|
}
|
|
.available {
|
|
background: linear-gradient(90deg, #C83732 0%, #E25C44 100%);
|
|
box-shadow: 0 6rpx 12rpx rgba(233, 0, 0, 0.3);
|
|
}
|
|
}
|
|
}
|
|
.exchangeItem:last-child {
|
|
border-bottom: none;
|
|
}
|
|
}
|
|
}
|
|
.cancelDel {
|
|
position: absolute;
|
|
bottom: -100rpx;
|
|
left: 45%;
|
|
|
|
image {
|
|
width: 60upx;
|
|
height: 60upx;
|
|
|
|
}
|
|
}
|
|
.Put-box1 {
|
|
.btn {
|
|
margin-top: 50rpx;
|
|
width: 100%;
|
|
height: 84rpx;
|
|
line-height: 84rpx;
|
|
text-align: center;
|
|
background: #333333;
|
|
color: #FFEBC4;
|
|
}
|
|
}
|
|
.emptyCart-box{
|
|
margin: 60upx 0;
|
|
.emptyCart-img{
|
|
width: 113upx;
|
|
height: 98upx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|