Skip to content

A
Athena
Commit 4b67ceb2 authored by huangyuanyuan's avatar huangyuanyuan
Browse files
Options

添加幸福存折

parent d0327575
Hide whitespace changes
Inline Side-by-side
Showing with 414 additions and 206 deletions
src/components/newPersonalCenter/integral/RedBag.vue 0 → 100644
View file @ 4b67ceb2
<template>
<div id="redBag">
<RedEnvel v-if="active==6" v-on:ChildEvent="ChildEvent"></RedEnvel>
<useDetails v-else></useDetails>
</div>
</template>
<script>
import RedEnvel from './RedEnvelopes'
import useDetails from './useDetails'
export default {
components:{
RedEnvel:RedEnvel,
useDetails:useDetails,
},
props:{
data: ""
},
data () {
return {
active:"",
}
},
mounted() {
console.log('456', this.data)
this.active=this.data;
},
methods: {
ChildEvent(val){
console.log(val,"ChildEventChildEventChildEvent")
this.active=val;
},
}
}
</script>
<style>
</style>
src/components/newPersonalCenter/integral/RedEnvelopes.vue
View file @ 4b67ceb2
......@@ -2,21 +2,24 @@
<div id="Red" class="commonF">
<div class="banner">
<div class="bannerContent">
<div class="myRedBag">我的大红包</div>
<div class="myRedBag"><img src="../../../assets/img/active/title.png" alt=""></div>
<el-row>
<el-col :span="6">
<img style="width:156px;height:150px;" src="../../../assets/img/activy.jpg" alt="">
<img style="width:156px;height:150px;" src="../../../assets/img/active/bg1.png" alt="">
</el-col>
<el-col :span="12">
<p style="color:#FFFFFF;margin-top:40px">可用红包余额</p>
<p style="color:#FFFFFF">
<span class="f26">￥</span>
<span class="f40 pfR">12012</span>
<span class="f40 pfR">{{datainfo.Client_Balance}}</span>
<span class="f12" style="margin-left:40px">使用规则</span>
</p>
</el-col>
<el-col :span="6" style="text-align:right">
<div class="ckBtn">查看明细</div>
<div @click="ChildEvent" class="ckBtn">
<img style="width:16px;height:16px" src="../../../assets/img/active/ck.png" alt="">
查看明细</div>
</el-col>
</el-row>
</div>
......@@ -24,46 +27,24 @@
<div class="rentou-box">
<div class="box-tit">
<span class="f16 pfR">人头返佣</span>
<span class="f12 c33">规则说明</span>
<!-- <span class="f12 c33">规则说明</span> -->
</div>
<el-row class="rentou-box-table" :gutter="35">
<el-col :span="16">
<table style="width: 100%;">
<table style="width: 100%;" cellpadding="0" cellspacing="0">
<tr class="f16 c66 rentou-box-table-head">
<th>订单信息</th>
<th>系列</th>
<th>人数</th>
<th>返佣</th>
</tr>
<tr class="c11">
<td>2566</td>
<td>好嗨哦感觉沙河是</td>
<td>2</td>
<td class="cee">+￥45.00</td>
</tr>
<tr class="c11">
<td>2566</td>
<td>好嗨哦感觉沙河是</td>
<td>2</td>
<td class="cee">+￥45.00</td>
</tr>
<tr class="c11">
<td>2566</td>
<td>好嗨哦感觉沙河是</td>
<td>2</td>
<td class="cee">+￥45.00</td>
</tr>
<tr class="c11">
<td>2566</td>
<td>好嗨哦感觉沙河是</td>
<td>2</td>
<td class="cee">+￥45.00</td>
</tr><tr class="c11">
<td>2566</td>
<td>好嗨哦感觉沙河是</td>
<td>2</td>
<td class="cee">+￥45.00</td>
<tr v-for="(item,index) in dataList" :key="index" class="c11">
<td>{{item.id}}</td>
<td>{{item.teamSeries}}</td>
<td>{{item.peopleNum}}</td>
<td class="cee">￥{{item.money}}</td>
</tr>
</table>
</el-col>
<el-col :span="8">
......@@ -76,114 +57,98 @@
</el-col>
</el-row>
</div>
<div>
<div id="chartsMap" style="height:165px;width:100%;"></div>
</div>
<div class="jyeDiv">
<p>当前交易额：¥<span class="f30 pfR">124565456</span></p>
<div class="jyItem">
<el-row>
<el-col :span="15" style="position:relative;margin-top:15px">
<div class="progress progress1">
<span></span>
</div>
</el-col>
<el-col :span="2" style="text-align:center;margin-top:15px">
<img style="width:20px;height:20px" src="../../../assets/img/active/gou.png" alt="">
</el-col>
<el-col :span="6">
<p style="color:#00B526" class="pfR">已激活，预计收益 ¥360</p>
<p style="color:#999999">月交易额已达<span class="pfR">￥1000</span><span>返</span><span class="pfR">2%</span></p>
</el-col>
</el-row>
</div>
<div class="jyItem">
<el-row>
<el-col :span="15" style="position:relative;margin-top:15px">
<div class="progress progress2">
<span></span>
</div>
</el-col>
<el-col :span="2" style="text-align:center;margin-top:15px">
<img style="width:20px;height:20px" src="../../../assets/img/active/gou.png" alt="">
</el-col>
<el-col :span="6">
<p style="color:#EE4454" class="pfR">已激活，预计收益 ¥360</p>
<p style="color:#999999">月交易额已达<span class="pfR">￥1000</span><span>返</span><span class="pfR">2%</span></p>
</el-col>
</el-row>
</div>
<div class="jyItem">
<el-row>
<el-col :span="15" style="position:relative;margin-top:15px">
<div class="progress progress3">
<span></span>
</div>
</el-col>
<el-col :span="2" style="text-align:center;margin-top:15px">
<img style="width:20px;height:20px" src="../../../assets/img/active/gou.png" alt="">
</el-col>
<el-col :span="6">
<p style="color:#333333" class="pfR">已激活，预计收益 ¥360</p>
<p style="color:#999999">月交易额已达<span class="pfR">￥1000</span><span>返</span><span class="pfR">2%</span></p>
</el-col>
</el-row>
<div class="rentou-box" style="padding-bottom:30px">
<div class="box-tit">
<span class="f16 pfR">大红包</span>
<!-- <span class="f12 c33">规则说明</span> -->
</div>
<el-row>
<el-col :span="18">
<div id="chartsMap" style="height:280px;width:96%;"></div>
</el-col>
<el-col :span="6">
<p class="f14" style="color:#999999;margin-top:30px">本年累计交易总额</p>
<p style="margin-top:20px"><span>￥</span><span class="f30">{{datainfo.Amount}}</span></p>
<div style="border-bottom:1px solid #EDEDED;width:256px;margin:30px 0"></div>
<p class="f14" style="color:#999999;">累计收益</p>
<p style="margin-top:20px"><span>￥</span><span class="f30">{{datainfo.TotalMoney}}</span></p>
</el-col>
</el-row>
<div class="jyeDiv">
<p>当前交易额：¥<span class="f30 pfR">{{datainfo.Amount}}</span></p>
<div v-for="(item,index) in datainfo.RatioList" :key="index+500" class="jyItem" :class="'jyTtem'+index">
<el-row>
<el-col :span="13" style="position:relative;margin-top:15px">
<div class="progress progress1">
<span :style="'width:'+ item.width +'%;'"></span>
</div>
</el-col>
<el-col :span="2" style="text-align:center;margin-top:15px">
<img v-if="item.percent>1" style="width:20px;height:20px" src="../../../assets/img/active/gou.png" alt="">
<!-- <img v-else style="width:20px;height:20px" :src="`/assets/img/active/x${index+1}.png`" alt=""> -->
<img v-else style="width:20px;height:20px" src="../../../assets/img/active/x1.png" alt="">
</el-col>
<el-col :span="9">
<p v-if="item.percent>1" style="color:#00B526" class="pfR">已激活，预计收益 ¥{{(item.Money*item.Ratio)/1000}}</p>
<p v-if="item.percent<1" style="color:#EE4454" class="pfR">还差¥{{item.Money-datainfo.Amount}},预计收益 ¥{{(item.Money*item.Ratio)/1000}}</p>
<p style="color:#999999">月交易额已达<span class="pfR">￥{{item.Money}}</span><span>返</span><span class="pfR">{{item.Ratio}}‰</span></p>
</el-col>
</el-row>
</div>
<!-- <div class="jyItem">
<el-row>
<el-col :span="15" style="position:relative;margin-top:15px">
<div class="progress progress2">
<span></span>
</div>
</el-col>
<el-col :span="2" style="text-align:center;margin-top:15px">
<img style="width:20px;height:20px" src="../../../assets/img/active/gou.png" alt="">
</el-col>
<el-col :span="6">
<p style="color:#EE4454" class="pfR">已激活，预计收益 ¥360</p>
<p style="color:#999999">月交易额已达<span class="pfR">￥1000</span><span>返</span><span class="pfR">2%</span></p>
</el-col>
</el-row>
</div>
<div class="jyItem">
<el-row>
<el-col :span="15" style="position:relative;margin-top:15px">
<div class="progress progress3">
<span></span>
</div>
</el-col>
<el-col :span="2" style="text-align:center;margin-top:15px">
<img style="width:20px;height:20px" src="../../../assets/img/active/gou.png" alt="">
</el-col>
<el-col :span="6">
<p style="color:#333333" class="pfR">已激活，预计收益 ¥360</p>
<p style="color:#999999">月交易额已达<span class="pfR">￥1000</span><span>返</span><span class="pfR">2%</span></p>
</el-col>
</el-row>
</div> -->
</div>
</div>
<div class="hotDate">
<p class="f14 pfR">近期热门团期</p>
<div class="basefix">
<div class="hotItem">
<div v-for="(item,index) in homeSale" :key="index+200" class="hotItem">
<div class="ImgDiv">
<img src="../../../assets/img/activy.jpg" alt="">
<p class="text1">[五一]泰国-普吉岛机票+当地5晚6日游>0自费1店,全程5星酒</p>
<img v-if="item.imgCover[0]" :src="item.imgCover[0].url" alt="">
<p class="text1">{{item.title}}</p>
</div>
<el-row>
<el-col :span="12" style="color:#FF6600"><span class="f12">￥</span><span class="f18 pfR">311</span></el-col>
<el-col :span="12" style="color:#FF6600"><span class="f12">￥</span><span class="f18 pfR">{{item.b2BPrice}}</span></el-col>
<el-col :span="12" style="text-align:right">
<span style="color:#666666" class="f12">出发：7-16</span>
</el-col>
</el-row>
</div>
<div class="hotItem">
<div class="ImgDiv">
<img src="../../../assets/img/activy.jpg" alt="">
<p class="text1">[五一]泰国-普吉岛机票+当地5晚6日游>0自费1店,全程5星酒</p>
</div>
<el-row>
<el-col :span="12" style="color:#FF6600"><span class="f12">￥</span><span class="f18 pfR">311</span></el-col>
<el-col :span="12" style="text-align:right">
<span style="color:#666666" class="f12">出发：7-16</span>
</el-col>
</el-row>
</div>
<div class="hotItem">
<div class="ImgDiv">
<img src="../../../assets/img/activy.jpg" alt="">
<p class="text1">[五一]泰国-普吉岛机票+当地5晚6日游>0自费1店,全程5星酒</p>
</div>
<el-row>
<el-col :span="12" style="color:#FF6600"><span class="f12">￥</span><span class="f18 pfR">311</span></el-col>
<el-col :span="12" style="text-align:right">
<span style="color:#666666" class="f12">出发：7-16</span>
</el-col>
</el-row>
</div>
<div class="hotItem">
<div class="ImgDiv">
<img src="../../../assets/img/activy.jpg" alt="">
<p class="text1">[五一]泰国-普吉岛机票+当地5晚6日游>0自费1店,全程5星酒</p>
</div>
<el-row>
<el-col :span="12" style="color:#FF6600"><span class="f12">￥</span><span class="f18 pfR">311</span></el-col>
<el-col :span="12" style="text-align:right">
<span style="color:#666666" class="f12">出发：7-16</span>
<span style="color:#666666" class="f12">出发:{{item.startDate}}</span>
</el-col>
</el-row>
</div>
</div>
</div>
</div>
......@@ -194,56 +159,181 @@ export default {
data () {
return {
CustomerId:"",
datainfo:{},
xMonth:[],
yMoney1:[],
yMoney2:[],
homeSale:[],
cityId:262,
companyId:0,
dataList:[],
zbList:[],
}
},
created(){
this.cityId=localStorage.cityId;
this.companyId=parseInt(localStorage.site);
let userInfo = this.getLocalStorage();
this.CustomerId=userInfo.customerId;
this.getData();
this.Cztm();
this.getList();
this.getZb();
},
mounted() {
this.creatChart()
this.creatZhanBi()
},
methods: {
creatZhanBi(){
let myChart = this.$echarts.init(document.getElementById('zhanbi'));
myChart.setOption({
getZb(){
this.zbList=[];
this.apiJavaPost('/api/b2b/user/getLinePercentage',{},res=>{
if(res.data.resultCode==1){
let data=res.data.data;
let arr=[];
for(let k in data){
let obj={};
obj.name=k;
obj.value=data[k];
this.zbList.push(obj);
}
this.creatZhanBi();
}else{
this.Error(res.data.message);
}
},null)
},
getList(){
this.apiJavaPost('/api/b2b/user/getDepositBankbookDetail',{CustomerId:this.CustomerId},res=>{
if(res.data.resultCode==1){
this.dataList=res.data.data.pageData;
}else{
this.Error(res.data.message);
}
},null)
},
ChildEvent(){
this.$emit("ChildEvent","6-")
},
creatZhanBi() {
let myChart = this.$echarts.init(document.getElementById("zhanbi"));
let option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
series: [
{
name:'访问来源',
type:'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
calculable: true,
graphic: [
{
type: "text",
left: "33%",
top: "45%",
style: {
text: "线路占比",
textAlign: "center",
fill: "#2C3343", //文字的颜色
fontSize: 18,
fontFamily: "pingfangR"
}
}
],
series: [
{
name: "订单来源",
type: "pie",
radius: ["50%", "70%"],
itemStyle: {
normal: {
show: false,
position: 'center'
label: {
show: false
},
labelLine: {
show: false
},
borderWidth: 2,
borderColor: "#fff",
color: function(params) {
//自定义颜色
var colorList = [
"#F8733A",
"#53D277",
"#36C7D9",
"#F8733A",
"#F9B89C"
];
return colorList[params.dataIndex];
}
},
emphasis: {
label: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
fontSize: "20",
fontFamily: "pingfangR"
}
}
}
},
labelLine: {
normal: {
show: false
}
},
data:[
{value:335, name:'直接访问'},
{value:310, name:'邮件营销'},
{value:234, name:'联盟广告'},
{value:135, name:'视频广告'},
{value:1548, name:'搜索引擎'}
]
}
]
},true)
},
data: this.zbList
}
]
};
myChart.setOption(option);
},
Cztm(){
let Msg={
pageIndex:1,
pageSize:4,
companyId:this.companyId,
cityId:this.cityId,
};
this.apiJavaPost('/api/b2b/home/getHomeTravelSpecialSale',Msg,res=>{
if(res.data.resultCode==1){
this.homeSale=res.data.data.pageData;
}else{
this.Error(res.data.message);
}
},null)
},
getData(){
this.apipost('customer_post_GetCustomerBigRedEnvelope',{CustomerId:this.CustomerId},res=>{
let arr1=['-', '-', '-','-'];
let newarr=[];
if(res.data.resultCode==1){
this.datainfo=res.data.data;
this.datainfo.JQLRList.forEach((item,index)=>{
this.xMonth.push(item.Date)
if(index<5){
this.yMoney1.push(item.Money)
}
if(index>3){
newarr.push(item.Money);
this.yMoney2=arr1.concat(newarr);
}
})
this.datainfo.RatioList.forEach(item=>{
item.percent=this.datainfo.Amount/item.Money;
item.width=(item.percent)*100;
})
this.yMoney1=this.yMoney1.concat(["-"]);
this.creatChart()
}
},null)
},
creatChart: function(getExpArr, getExpTimeArr, getExpNullArr) {
// let that = this
// console.log(getExpArr, getExpTimeArr, getExpNullArr,[0, 1000, 2000, '-', '-','-'],['-', '-', 2000, 4000, 6000, 8000])
......@@ -266,6 +356,7 @@ export default {
},
xAxis: {
type: "category",
boundaryGap: false,
axisLine: {
show: false,
lineStyle: {
......@@ -273,20 +364,9 @@ export default {
}
},
axisTick: false,
data: ['一月', '二月', '三月', '四月', '五月', '六月'],
},
grid: {
x: -100,
y: 20,
x2: 0,
y2: 0,
containLabel: true,
tooltip: {
textStyle:{
color: 'red'
}
}
data: this.xMonth,
},
yAxis: {
type: "value",
min: '10',
......@@ -294,16 +374,16 @@ export default {
splitLine: {
show: true,
lineStyle: {
color: "rgba(245,245,245,1)"
color: "#fff"
}
},
},
series: [
{
type: "line",
smooth: true,
smooth: 2,
symbol: 'none',
data: [0, 500, 235, 689, 600,'-'],
data: this.yMoney1,
lineStyle: {
width: 3,
color: "#36C7D9"
......@@ -318,8 +398,8 @@ export default {
},
{
type: "line",
smooth: true,
data: ['-', '-', '-', '-', 600, 352],
smooth: 2,
data: this.yMoney2,
lineStyle: {
width: 3,
color: "#ED6A6B",
......@@ -328,11 +408,7 @@ export default {
itemStyle: {
borderWidth: 5,
},
markPoint: {
data: [
{name: '123', value: 700, xAxis: 2, yAxis: 2}
]
},
areaStyle: {
color: "#FAD2D2"
}
......@@ -346,20 +422,13 @@ export default {
<style>
@import "../../../assets/css/common.css";
#Red .myRedBag{
position: absolute;
width: 220px;
height: 59px;
line-height: 59px;
text-align: center;
color: rgb(221, 221, 221);
top: -20px;
left: 600px;
background: #E87D53;
border-radius: 24px;
font-family: "PingFangR";
font-size: 28px;
box-shadow:0px 3px 10px 0px #D34735;
}
#Red .hotDate .hotItem .ImgDiv>p{
......@@ -405,7 +474,7 @@ export default {
border-radius: 15px;
overflow: hidden;
}
#Red .progress3 span {
#Red .jyTtem0 .progress span {
display: inline-block;
width: 60%;
height: 100%;
......@@ -420,7 +489,7 @@ export default {
text-align: center;
color:#fff;
}
#Red .progress2 span {
#Red .jyTtem1 .progress span {
display: inline-block;
width: 50%;
height: 100%;
......@@ -435,7 +504,7 @@ export default {
text-align: center;
color:#fff;
}
#Red .progress1 span {
#Red .jyTtem2 .progress span {
display: inline-block;
width: 70%;
height: 100%;
......@@ -461,6 +530,8 @@ export default {
box-sizing: border-box;
}
#Red .banner .ckBtn{
display: inline-flex;
align-items: center;
width:110px;
height:38px;
background:#FBE775;
......@@ -469,9 +540,9 @@ export default {
margin-top: 60px;
text-align: center;
color:#B55D1D;
line-height: 38px;
font-size: 14px;
display: inline-block;
justify-content: center;
cursor: pointer;
}
#Red .banner{
width:963px;
......@@ -490,6 +561,8 @@ export default {
box-sizing: border-box;
}
#Red .rentou-box{
width: 963px;
box-sizing: border-box;
margin-top: 35px;
background-color: #FFFFFF;
}
......@@ -504,6 +577,10 @@ export default {
padding: 8px 20px;
text-align: left !important;
}
.rentou-box td{
font-size: 14px;
color:#111111;
}
.rentou-box-table{
padding: 30px;
}
......@@ -520,6 +597,5 @@ export default {
width: 200px;
height: 200px;
margin: 0 auto;
background-color: rebeccapurple;
}
</style>
src/components/newPersonalCenter/integral/useDetails.vue 0 → 100644
View file @ 4b67ceb2
<template>
<div id="useDetails">
<div style="width:963px;background:#fff;padding:30px;box-sizing:border-box">
<p style="font-family:'PingFangR'">使用明细</p>
<div style="margin:20px 0">
<span style="margin-right:8px;font-size:14px">时间选择</span>
<span><el-date-picker @change="DateChange" size="small"
v-model="value2" value-format="yyyy-MM"
type="month"
placeholder="选择月">
</el-date-picker></span>
</div>
<div class="rentou-box">
<table style="width: 100%;" cellpadding="0" cellspacing="0">
<tr class=" c66 rentou-box-table-head">
<th>时间</th>
<th>描述</th>
<th>收入（支出）</th>
</tr>
<tr class="c11" v-for="(item,index) in dataList" :key="index">
<td width="120">{{item.updateTime | YMD}}</td>
<td>{{item.description}}</td>
<td width="120" style="color:#EE4454">￥{{item.money}}</td>
</tr>
</table>
<div v-if="dataList.length==0" style="padding:15px 0;text-align:center">
<div class="empty-data"><i class="iconfont icon-kong"></i>
很抱歉，你想要的信息我们真的找不到了
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data () {
return {
value2:"",
dataList:[],
}
},
mounted() {
this.getList();
},
methods: {
DateChange(val){
this.value2=val;
this.getList();
},
getList(){
this.apiJavaPost('/api/b2b/user/getBankbookUseDetail',{queryTime:this.value2},res=>{
if(res.data.resultCode==1){
this.dataList=res.data.data.pageData;
}else{
this.Error(res.data.message);
}
},null)
},
}
}
</script>
<style scoped>
#useDetails .rentou-box th{
color:#666666;
font-size: 14px;
}
#useDetails .rentou-box th,.rentou-box td {
padding: 8px 20px;
text-align: left !important;
}
#useDetails .rentou-box td{
font-size: 14px;
color:#111111;
}
#useDetails .rentou-box-table{
padding: 30px;
}
#useDetails .rentou-box-table-head{
box-shadow:0px 1px 0px 0px rgba(221,221,221, .7);
border-bottom:1px solid #DDDDDD;
background: #fff!important;
}
#useDetails table tr:nth-child(odd){
background:rgba(245,245,245,1);
}
</style>
src/components/newPersonalCenter/newPersonalCenter.vue
View file @ 4b67ceb2
......@@ -105,7 +105,7 @@
</el-menu-item> -->
<el-menu-item index="8" @click="clickMenu('6')">
<i><img style="width:19px;height:17px" src="../../assets/img/active/hb.png" alt=""></i>
<span>我的大红包</span>
<span>幸福存折</span>
</el-menu-item>
</el-menu>
</el-col>
......@@ -126,7 +126,7 @@
<!-- 我的积分 -->
<Integral v-else-if="active.indexOf('4-') !== -1" :data="active"/>
<!-- 我的大红包 -->
<RedEnvelopes v-else-if="active.indexOf('6') !== -1" :data="active"/>
<RedBag v-else-if="active.indexOf('6') !== -1" :data="active"/>
</el-col>
</el-row>
</div>
......@@ -141,7 +141,7 @@ import MemberCenter from '@/components/newPersonalCenter/block/MemberCenter'
import OrderCenter from '@/components/newPersonalCenter/block/OrderCenter'
import MyCoupon from '@/components/newPersonalCenter/block/MyCoupon'
import Integral from '@/components/newPersonalCenter/integral/index'
import RedEnvelopes from '@/components/newPersonalCenter/integral/RedEnvelopes'
import RedBag from '@/components/newPersonalCenter/integral/RedBag'
export default {
components: {
HomePage,
......@@ -151,7 +151,7 @@ export default {
MyCoupon,
Integral,
CustomizedList,
RedEnvelopes
RedBag
},
data () {
return {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment