382 lines
9.4 KiB
Vue
382 lines
9.4 KiB
Vue
<template>
|
||
<view class="min-body">
|
||
<!-- <u-navbar title="消费补贴" placeholder @rightClick="closePage()" :autoBack="true"> -->
|
||
<!-- </u-navbar> -->
|
||
<view class="mt-30">
|
||
<u-gap height="30rpx"></u-gap>
|
||
<view class="header">
|
||
<view class="img-box">
|
||
<image class="img" :src="walletInfo['user_lv']==3?walletInfo['vipimage']:(walletInfo['user_lv']==1?walletInfo['img']:walletInfo['vipfenimage'])"
|
||
mode="widthFix">
|
||
</image>
|
||
<view class="xx-box">
|
||
<view style="padding-left: 38rpx;">
|
||
|
||
<view class="subgift_consume">
|
||
<view>
|
||
余额(元)
|
||
</view>
|
||
<view class="subgift_content" v-show="walletInfo['amount']>0" @click="toSubgift">
|
||
<image class="subgiftImg" :src='subgift'></image>
|
||
<text>余额转赠</text>
|
||
</view>
|
||
|
||
</view>
|
||
<view style="font-size: 70rpx;padding-bottom: 20rpx;">
|
||
{{walletInfo['amount']/100}}
|
||
</view>
|
||
<view class="seeEquity">
|
||
<view style="font-weight: 300;padding-bottom: 52rpx;">
|
||
累计已省钱：￥{{walletInfo.consumption/100}}
|
||
</view>
|
||
<view class="seeEquity_detail" v-show="walletInfo['is_vip']==1" @click="toEquity">查看权益
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="flbtn" style="padding-top: 18rpx;">
|
||
<view class="flbtn-item name-style" @tap="goPath(item['link'])"
|
||
v-for="(item,index) in tabList" :key="index">
|
||
{{item.name}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="big-333 bold">
|
||
线上消费补贴平台
|
||
</view>
|
||
</view>
|
||
<view class="">
|
||
<navigator url="/pages/goods/goods_list/index" hover-class="none">
|
||
<image :src="imageUrl.link1" class="gg-img" mode=""></image>
|
||
<view class="big-333 bold">
|
||
线下消费补贴商家
|
||
</view>
|
||
</navigator>
|
||
</view>
|
||
|
||
<view class="">
|
||
<navigator url="/pages/restaurant/restaurant_home_list/index" hover-class="none">
|
||
<image :src="imageUrl.link2" class="gg-img" mode=""></image>
|
||
</navigator>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
import {
|
||
consumerCard,
|
||
GetUserInvitationCode,
|
||
|
||
} from '@/static/js/share.js';
|
||
import {
|
||
consumptionBannerAPI,
|
||
conWalletInfoAPI,
|
||
} from '@/request/recharge/index.js';
|
||
import mixin from '@/static/js/mixin/mixin.js';
|
||
import {
|
||
mapMutations
|
||
} from 'vuex'
|
||
export default {
|
||
mixins: [mixin],
|
||
data() {
|
||
return {
|
||
|
||
tabList: [{
|
||
name: '余额明细',
|
||
link: '/pages/pages-recharge/balance_details/index',
|
||
isbd: false
|
||
},
|
||
// {
|
||
// name: '消费补贴',
|
||
// link: '/pages/pages-recharge/recharge/index?rechargetype=0',
|
||
// isbd: false
|
||
// },
|
||
{
|
||
name: '卡密激活',
|
||
link: '/pages/pages-recharge/recharge/index?rechargetype=1',
|
||
isbd: false
|
||
},
|
||
{
|
||
name: '我的订单',
|
||
link: '/pages/pages-recharge/order/index',
|
||
isbd: false
|
||
}
|
||
],
|
||
// 用户数据
|
||
UserInfo: {},
|
||
// 钱包信息
|
||
walletInfo: {
|
||
amount: 0,
|
||
consumption: 0,
|
||
is_vip: 0,
|
||
user_lv:1,
|
||
|
||
},
|
||
// 补贴平台
|
||
imageUrl: {
|
||
link1: '',
|
||
link2: ''
|
||
},
|
||
subgift: 'https://img.agrimedia.cn/subgift.png',
|
||
// 正常背景图
|
||
// bg_img: "https://img.agrimedia.cn/chwl/sub_card/bg_img2.png",
|
||
// 新年背景图
|
||
bg_img: "https://img.agrimedia.cn/chwl/sub_card/bg_img2.png",
|
||
vipCardBg: "https://img.agrimedia.cn/chwl/vipCardBg.png",
|
||
}
|
||
},
|
||
onLoad(parameters) {
|
||
console.log(getApp()['globalData'], 'globalData1');
|
||
console.log(this['ModeList'],'ModeList---');
|
||
// 扁平化处理
|
||
// let flatten = (arr)=> [].concat(...arr.map(x => Array.isArray(x) ? flatten(x) : x))
|
||
// 构建传入后台保存的新数组(此方法可以在回显时不需要多级便利对应ID改变数据状态,直接合并即可)
|
||
// let _Data = 源解构数据.map(item=>{
|
||
// // 用于查找当前类下是否有选中规格
|
||
// let IsLength = flatten(item['children'].map(_item=>_item['children']).map(__item=>__item.filter(___item=>___item['isChecked'])));
|
||
// // 过滤未选择的类数据(格式同本地使用格式一致)
|
||
// if(IsLength['length']) {
|
||
// return {
|
||
// // 一级
|
||
// id:item['id'],
|
||
// name:item['name'],
|
||
// children:item['children'].map(_item=>{
|
||
// // 查找二级下的规格是否有被选中（与IsLength变量获取逻辑不同的是，IsLength若是为空数组则不进入该逻辑，ChildrList则是进入该逻辑后将选中的规格赋值）
|
||
// let ChildrList = _item['children'].filter(__item=>__item['isChecked']);
|
||
// if(ChildrList['length']) return {
|
||
// // 二级
|
||
// id:_item['id'],
|
||
// name:_item['name'],
|
||
// // 当前类下选中的规格
|
||
// children:ChildrList
|
||
// }
|
||
// }).filter(n=>n)
|
||
// }
|
||
// }
|
||
// }).filter(n=>n)
|
||
|
||
// // 合并方法，找到当前对应的类然后将三级规格合并
|
||
// this['ModeList2'].forEach((item)=>{
|
||
// // 查找一级ID
|
||
// let oneindex = this['ModeList'].findIndex(x=> x['id'] == item['id']);
|
||
// let str = item['children'].map(item=>item['id']).join();
|
||
// this['ModeList'][oneindex]['children'].map(_item=>{
|
||
// if(str.includes(_item['id'])) {
|
||
// // 此处代码直接合并即可
|
||
// // _item['children'] = [..._item['children'],item['children'].find(cItem => cItem['id'] == _item['id'])]
|
||
// }
|
||
// })
|
||
|
||
// })
|
||
// console.log(JSON.stringify(_Data,null,5),'/////////////');
|
||
|
||
},
|
||
onShow() {
|
||
this.init();
|
||
|
||
},
|
||
methods: {
|
||
...mapMutations(['GetState']),
|
||
// 初始化
|
||
init() {
|
||
conWalletInfoAPI().then(res => {
|
||
// 获取钱包信息
|
||
this.walletInfo = res['data'];
|
||
console.log(this.walletInfo, "this.walletInfo哈哈哈哈", "test")
|
||
return consumptionBannerAPI();
|
||
}).then(res => {
|
||
// 获取线上线下数据
|
||
this.imageUrl.link1 = res['data'][0].img_url || '';
|
||
this.imageUrl.link2 = res['data'][1].img_url || '';
|
||
return GetUserInvitationCode();
|
||
}).then(res => {
|
||
// 获取用户信息
|
||
this.UserInfo = res['data'];
|
||
})
|
||
},
|
||
// 余额明细/付费充值/卡密充值/我的订单
|
||
goPath(url) {
|
||
// uni.navigateTo({
|
||
// url:'/pa'
|
||
// });
|
||
// return
|
||
if (!url) return;
|
||
uni.navigateTo({
|
||
url
|
||
});
|
||
},
|
||
getWallet() {
|
||
this.$store.dispatch('card/conWalletInfo').then(res => {
|
||
this.walletInfo = res
|
||
})
|
||
},
|
||
|
||
|
||
//跳转到转赠
|
||
toSubgift() {
|
||
|
||
if (this.walletInfo['auth_mobile'] != 1) {
|
||
uni.showToast({
|
||
title: '未绑定手机号无法使用此功能，请在设置中进行绑定',
|
||
icon: 'none'
|
||
});
|
||
return
|
||
}
|
||
// var balance = this.walletInfo['amount'] / 100
|
||
uni.navigateTo({
|
||
url: `/pages/pages-recharge/rechargeSubgift/index`
|
||
});
|
||
},
|
||
toEquity() {
|
||
uni.navigateTo({
|
||
url: `/pages/pages-recharge/rechargeEquity/index`
|
||
});
|
||
},
|
||
|
||
|
||
},
|
||
onHide() {
|
||
this.walletInfo = {
|
||
amount: 0,
|
||
consumption: 0,
|
||
is_vip: 0
|
||
}
|
||
},
|
||
// 分享
|
||
onShareAppMessage() {
|
||
return consumerCard(this['UserInfo']['userInfo']['invite_code']);
|
||
},
|
||
|
||
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.header {
|
||
position: relative;
|
||
|
||
.bold {
|
||
margin-top: 32rpx !important;
|
||
}
|
||
|
||
.img-box {
|
||
.img {
|
||
width: 100%;
|
||
}
|
||
|
||
.xx-box {
|
||
position: absolute;
|
||
z-index: 1;
|
||
color: #fff;
|
||
padding-top: 38rpx;
|
||
font-size: 32rpx;
|
||
top: 0;
|
||
width: 100%;
|
||
margin-bottom: 32rpx;
|
||
|
||
.subgift_content {
|
||
background: #FFFFFF;
|
||
border-radius: 10rpx;
|
||
line-height: 50rpx;
|
||
padding-left: 8rpx;
|
||
padding-right: 8rpx;
|
||
margin-left: 18rpx;
|
||
|
||
text {
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #B28A1E;
|
||
}
|
||
|
||
.subgiftImg {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
vertical-align: middle;
|
||
margin-right: 6rpx;
|
||
}
|
||
}
|
||
|
||
.subgift_consume {
|
||
display: flex;
|
||
margin-bottom: 10rpx;
|
||
align-items: center;
|
||
|
||
|
||
|
||
}
|
||
|
||
.seeEquity {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.seeEquity_detail {
|
||
margin-right: 60rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 10rpx;
|
||
font-size: 28rpx;
|
||
font-family: PingFangSC-Semibold, PingFang SC;
|
||
font-weight: 600;
|
||
color: #B28A1E;
|
||
padding-left: 8rpx;
|
||
padding-right: 8rpx;
|
||
height: 40rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.gg-img {
|
||
width: 100%;
|
||
height: 317rpx;
|
||
border-radius: 20rpx;
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
.border-style {
|
||
width: 2rpx;
|
||
background-color: #FFEDBF;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.name-style {
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.flbtn {
|
||
position: relative;
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 2rpx;
|
||
background-color: #ffffff;
|
||
}
|
||
|
||
&-item {
|
||
position: relative;
|
||
|
||
&:last-child::after {
|
||
display: none;
|
||
}
|
||
|
||
&::after {
|
||
content: '';
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
width: 2rpx;
|
||
height: 100%;
|
||
background-color: #ffff;
|
||
}
|
||
}
|
||
}
|
||
</style>
|