Skip to content

B
bigwood
Commit 7715dcf0 authored by youjie's avatar youjie
Browse files
Options

no message

parent e7e134dc
Show whitespace changes
Inline Side-by-side
Showing with 192 additions and 72 deletions
src/components/passbook/passbookHead.vue
View file @ 7715dcf0
<template>
<div class="banner q-pa-sm q-mt-lg" style="position: relative;">
<q-img src="../../assets/images/personal/bg1.png"
<div class="banner q-pa-sm q-mt-lg" style="position: relative;"
:style="{'margin':$q.platform.is.mobile?'20px 10px 0 10px':''}"
:class="{'mobile':$q.platform.is.mobile}">
<q-img v-if="$q.platform.is.desktop" src="../../assets/images/personal/bg1.png"
width="156px"
height="162px" style="position: absolute; bottom: 0px;"/>
<div class="text-center" style="position: absolute; top: -27px;width: 100%;left:0;">
<div class="text-center passbookHead-title"
:class="[$q.platform.is.desktop?'desktop':'mobile']">
<q-img src="../../assets/images/personal/title.png"
width="199px"
height="59px"/>
</div>
<div class="row justify-between passbookHead-form">
<div class="column col">
<p class="text-white" style="opacity: .5;">可用余额</p>
<div
class="passbookHead-form"
:class="{'row justify-between':$q.platform.is.desktop,
'column mobile':$q.platform.is.mobile}">
<div class="col"
:class="{'column':$q.platform.is.desktop,'row justify-between':$q.platform.is.mobile}"
:style="{'position':$q.platform.is.mobile?'reactive':''}">
<div class="column"
:style="{'padding':$q.platform.is.mobile?'20px 0 15px 0':''}">
<div class="text-white" style="opacity: .5;">可用余额</div>
<div class="row items-end text-white" style="position: relative;">
<div class="fz22">
¥
</div>
<div class="fz40 q-pl-md">
<span style="position: relative; top: 11px;">{{Client_Balance}}</span>
<div class="fz40 q-pl-md ">
<span style="position: relative; top: 11px;">{{Client_Balance.toFixed(2)}}</span>
</div>
<div class="fz12 q-pl-lg cursor-pointer" style="position: absolute;right: 0;bottom: 0;">
使用规则
</div>
</div>
<q-img v-if="$q.platform.is.mobile" src="../../assets/images/personal/bg1.png"
style="position: absolute;right: 20px;top: 40px;"
width="117px"
height="auto"/>
</div>
<div class="row items-center justify-end col-7">
<div class="q-pa-xs q-px-sm bg-amber-3 rounded-borders text-orange-14 passbookHeadButtom cursor-pointer" @click="seeDetails">
<q-img src="../../assets/images/personal/ck.png"
<q-separator v-if="$q.platform.is.mobile" dark class="q-mt-md" />
<div class="row justify-between col-8"
:class="{'items-end':$q.platform.is.desktop,'items-center':$q.platform.is.mobile}">
<div
:class="{'q-pl-lg fz12 text-white':$q.platform.is.desktop,'fz14 text-amber-1 col text-center':$q.platform.is.mobile}">
<span>使用规则</span>
</div>
<q-separator v-if="$q.platform.is.mobile" dark vertical inset />
<div class="row items-center" style="height: 100%;"
:class="{'q-pt-lg':$q.platform.is.desktop,'col-6 text-center':$q.platform.is.mobile}">
<div class="rounded-borders cursor-pointer" @click="seeDetails"
:class="{'q-pa-xs q-px-sm bg-amber-3 passbookHeadButtom text-orange-14 q-mt-md':$q.platform.is.desktop,'text-amber-1':$q.platform.is.mobile}"
:style="{'width':$q.platform.is.mobile?'100%':''}">
<q-img v-if="$q.platform.is.desktop" src="../../assets/images/personal/ck.png"
width="12px"
height="12px" style="position: relative; top: 0px;"/>
<span class="fz14 q-pl-xs">查看明细</span>
<span class="fz14 q-pl-xs">使用明细</span>
</div>
</div>
</div>
</div>
......@@ -78,10 +102,24 @@
border: 6px solid #EEA376;
padding: 0 57px;
}
.banner.mobile{
border-radius: 10px;
padding: 0 20px;
border: 4px solid #EEA376;
}
.passbookHead-form{
padding: 36px 0 37px 246px;
}
.passbookHead-form.mobile{
padding: 36px 0 5px 0px;
}
.passbookHeadButtom{
border: 2px solid #F6CA58;
}
.passbookHead-title{
position: absolute;
width: 100%;;
left: 0;
top: -27px;
}
</style>
\ No newline at end of file
src/components/passbook/rebate.vue
View file @ 7715dcf0
<template>
<div class="bg-white q-mt-lg">
<div class="bg-white q-mt-lg"
:style="{'margin':$q.platform.is.mobile?'20px 10px 0 10px':'',
'border-radius':$q.platform.is.desktop?'':'10px'}">
<rebatehead :title="titleHead"/>
<q-separator color="grey-3" class="q-my-sm" />
<div class="row justify-between rebate-form">
<div class="column col rebate-left fz14">
<div class="row items-center left-text text-grey-9">
<div>订单信息</div><div>系列</div>
<div
style="padding: 15px 0 0 0;"
:class="[$q.platform.is.desktop?'row justify-between':'column reverse']">
<div v-if="$q.platform.is.mobile" class="text-center fz16 q-py-md" @click="isShow=!isShow"
style="border: 1px dashed #E0E0E0;">
查看明细<q-icon
:name="isShow ? 'keyboard_arrow_up' : 'keyboard_arrow_down'" class="q-ml-sm text-grey-6"
size="25px"
/>
</div>
<div class="column col rebate-left fz14"
:style="{'padding':$q.platform.is.desktop?'0 30px 0 30px':''}">
<template v-if="isShow||$q.platform.is.desktop">
<div class="row items-center left-text text-grey-9"
:class="[$q.platform.is.desktop?'':'q-py-sm']">
<div>订单{{$q.platform.is.desktop?'信息':''}}</div><div>系列</div>
<div>人数</div><div>返佣</div>
</div>
<q-separator color="grey-3" />
......@@ -24,20 +38,24 @@
<svg-icon :size="50" color="nav" icon="General/Clipboard.svg"></svg-icon>
<div class="q-mt-md f12 text-grey-6">{{ $t('noneData') }}</div>
</div>
</template>
</div>
<div class="col-4 rebate-right column q-px-lg">
<p class="fz14 text-grey-7">线路数据占比</p>
<div class="q-pl-lg">
<div class="rebate-right column"
:class="[$q.platform.is.desktop?'col-4 q-px-lg':'col']"
:style="{'padding':$q.platform.is.desktop?'0 30px 0 30px':''}">
<div class="fz14 text-grey-7 q-pl-lg">线路数据占比</div>
<div :class="[$q.platform.is.desktop?'q-pl-lg':'']">
<div ref="main" style="width: 100%;height: 300px;"></div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { ref, toRefs, onMounted } from "vue";
import { useRouter } from 'vue-router';
import { useQuasar } from 'quasar'
import { defineComponent, ref, reactive, toRefs, provide } from 'vue'
import { useI18n } from 'vue-i18n'
import * as echarts from "echarts"
......@@ -56,9 +74,11 @@
}
},
setup(props) {
const $q = useQuasar()
const $router = useRouter();
const main = ref();
const data=reactive({
isShow: false,
titleHead: '人头返佣',
title: '线路数据占比',
dataList: [],
......@@ -141,14 +161,13 @@
trigger: "item",
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
calculable: true,
graphic: [
{
type: "text",
left: "33%",
top: "45%",
left: $q.platform.is.desktop?"35%":"40%",
top: $q.platform.is.desktop?"43%":"48%",
style: {
text: "线路占比",
textAlign: "center",
......@@ -163,6 +182,7 @@
name: "订单来源",
type: "pie",
radius: ["50%", "70%"],
center: $q.platform.is.desktop?["50%", "45%"]:["50%", "50%"],
itemStyle: {
normal: {
label: {
......@@ -188,7 +208,6 @@
emphasis: {
label: {
show: true,
textStyle: {
fontSize: "20",
fontFamily: "pingfangR"
......@@ -226,7 +245,7 @@
padding: 15px 30px 0 30px;
}
.rebate-left {
/* width: 70%; */
}
.left-text div{
display: inline-block;
......@@ -237,7 +256,7 @@
background: #E0E0E0;
}
.rebate-right{
/* width: 28%; */
}
</style>
\ No newline at end of file
src/components/passbook/rebate/rebatehead.vue
View file @ 7715dcf0
<template>
<div class="row justify-between q-px-lg q-py-sm q-pt-md">
<span class="fz16 text-weight-bold dark">{{title}}</span>
<span class="fz16 text-weight-bold dark"
:class="[$q.platform.is.mobile?'q-pl-sm':'']"
:style="{'border-left':$q.platform.is.mobile?'4px solid #EE4454 ':'',}">{{title}}</span>
<span @click="title=='使用明细'?Return():''">
<span class="fz12 cursor-pointer text-grey-6">
{{title!='使用明细'?'':'返回'}}
......
src/components/passbook/redEnvelope.vue
View file @ 7715dcf0
<template>
<div class="bg-white q-mt-lg">
<div class="bg-white q-mt-lg"
:style="{'margin':$q.platform.is.mobile?'20px 10px 0 10px':'',
'border-radius':$q.platform.is.desktop?'':'10px'}">
<rebatehead :title="titleHead"/>
<q-separator color="grey-3" class="q-my-sm" />
<div class="row justify-between redEnvelope-form">
<div class="column col redEnvelope-left fz14">
<p class="fz14 text-grey-7">近半年收益</p>
<div ref="main" style="width: 100%;height: 280px;position: relative;left: -20px;top: -30px;"></div>
<div style="padding: 15px 0 0 0;"
:class="[$q.platform.is.desktop?'row justify-between':'column mobile']">
<div class="column col redEnvelope-left fz14"
:class="[$q.platform.is.desktop?'q-pl-sm':'']"
:style="{'padding':$q.platform.is.desktop?'0 30px 0 30px':''}">
<!-- <p class="fz14 text-grey-7">近半年收益</p> -->
<div ref="main" :class="[$q.platform.is.desktop?'q-pt-lg':'']" style="height: 280px;position: relative;top: -30px;"
:style="{'width': $q.platform.is.desktop?'100%':'95%', 'left': $q.platform.is.desktop?'-20px':'10px','top': $q.platform.is.desktop?'-30px':'0'}"></div>
</div>
<div class="row justify-center">
<div v-if="$q.platform.is.desktop" class="row justify-center">
<q-separator vertical inset style="height: 50%;position: relative;top: 10%;"/>
</div>
<div class="col-4 redEnvelope-right column q-px-lg">
<p class="fz14 text-grey-7 q-pb-xs">本年累计交易总额</p>
<div class="q-pb-lg row items-end">
<div class="redEnvelope-right q-px-lg"
:class="[$q.platform.is.desktop?'col-4 column':'col row']"
:style="{'padding':$q.platform.is.desktop?'0 30px 0 30px':''}"
>
<div :class="[$q.platform.is.desktop?'':'col-6 text-center']">
<div class="fz14 text-grey-7" :class="[$q.platform.is.desktop?'q-pb-xs':'']">本年累计交易总额</div>
<div class="row items-end"
:class="[$q.platform.is.desktop?'q-pb-lg':'justify-center']">
<span class="fz12">¥</span> <div class="fz32 q-pl-sm"><span style="position: relative;top: 9px;">{{datainfo.Amount}}</span></div>
</div>
<q-separator color="grey-3"/>
<p class="fz14 text-grey-7 q-pt-lg">累计收益</p>
<div class="q-pb-lg row items-end">
</div>
<q-separator v-if="$q.platform.is.desktop" color="grey-3"/>
<div :class="[$q.platform.is.desktop?'':'col-6 text-center']">
<div class="fz14 text-grey-7" :class="[$q.platform.is.desktop?'q-pt-lg':'']">累计收益</div>
<div class="row items-end"
:class="[$q.platform.is.desktop?'q-pb-lg':'justify-center']">
<span class="fz12">¥</span> <div class="fz32 q-pl-sm"><span style="position: relative;top: 9px;">{{datainfo.TotalMoney}}</span></div>
</div>
<q-separator color="grey-3"/>
</div>
<q-separator v-if="$q.platform.is.desktop" color="grey-3"/>
</div>
<q-separator v-if="$q.platform.is.mobile" color="grey-3"/>
</div>
<div class="q-px-lg q-pb-lg"><span>当前交易额：</span><span class="q-pl-lg">¥</span><span class="fz32 q-pl-sm">{{datainfo.Amount.toFixed(2)}}</span> </div>
<div class="q-px-lg " :class="[$q.platform.is.desktop?'q-pb-lg':'q-py-md']"><span>当前交易额：</span><span class="q-pl-lg">¥</span><span class="fz32 q-pl-sm">{{datainfo.Amount.toFixed(2)}}</span> </div>
<div class="q-px-lg q-pt-sm">
<div class="row items-center no-wrap q-pb-lg" v-for="(item,index) in datainfo.RatioList" :key="index" >
<q-linear-progress class="col" stripe rounded size="20px" :value="item.width/100" color="item.percent>1?'orange-9':item.percent<1?'red-5':'cyan-4'"/>
<div class="col-4 row items-center q-ml-lg">
<div class="q-pb-lg" v-for="(item,index) in datainfo.RatioList" :key="index"
:class="[$q.platform.is.desktop?'row items-center no-wrap':'column']">
<div class="col">
<template v-if="$q.platform.is.desktop">
<q-linear-progress v-if="item.percent>1" stripe rounded size="20px" :value="item.width/100" color="orange-9"/>
<q-linear-progress v-else-if="item.percent<1" stripe rounded size="20px" :value="item.width/100" color="red-5"/>
<q-linear-progress v-else stripe rounded size="20px" :value="item.width/100" color="cyan-4"/>
</template>
<template v-else>
<q-linear-progress v-if="item.percent>1" stripe rounded size="10px" :value="item.width/100" color="orange-9"/>
<q-linear-progress v-else-if="item.percent<1" stripe rounded size="10px" :value="item.width/100" color="red-5"/>
<q-linear-progress v-else stripe rounded size="10px" :value="item.width/100" color="cyan-4"/>
</template>
</div>
<div class="row items-center"
:class="[$q.platform.is.desktop?'col-4 q-ml-lg':'col no-wrap']">
<div :class="[$q.platform.is.desktop?'':'q-mr-sm']">
<template v-if="$q.platform.is.desktop">
<q-img v-if="item.percent>1" src="../../assets/images/personal/gou.png"
width="20px"
height="20px" style="position: relative;"/>
<q-img v-else src="../../assets/images/personal/x1.png"
width="26px"
height="26px" style="position: relative;"/>
<div class="column q-ml-md">
<span class="row wrap fz16 text-weight-bold"
:class="[item.percent>1?'text-light-green-6':item.percent<1?'text-red-5':'text-dark']">
</template>
<template v-else>
<q-img v-if="item.percent>1" src="../../assets/images/personal/gou.png"
width="15px"
height="15px" style="position: relative;"/>
<q-img v-else src="../../assets/images/personal/x1.png"
width="16px"
height="16px" style="position: relative;"/>
</template>
</div>
<div
:class="[$q.platform.is.desktop?'column q-ml-md':'row no-wrap items-center justify-between q-pt-xs']">
<span class="row"
:class="[item.percent>1?'text-light-green-6':item.percent<1?'text-red-5':'text-dark',$q.platform.is.desktop?'wrap fz16 text-weight-bold':'fz12']">
<span>
......@@ -79,6 +123,7 @@
<script lang="ts">
import { ref, toRefs, onMounted } from "vue";
import { useRouter } from 'vue-router';
import { useQuasar } from 'quasar'
import { defineComponent, ref, reactive, toRefs } from 'vue'
import { useI18n } from 'vue-i18n'
import * as echarts from "echarts"
......@@ -97,6 +142,7 @@
}
},
setup(props) {
const $q = useQuasar()
const $router = useRouter();
const main = ref();
const data=reactive({
......@@ -120,13 +166,23 @@
// 基于准备好的dom，初始化echarts实例
const myChart = echarts.init(main.value);
const option = {
title:{
text:'近半年收益',
left:'left',
textStyle: {
fontSize: '14px',
color: '#757575',
fontWeight: '100',
fontFamily: '"microsoft yahei", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji", "MicrosoftJhengHeiBoldFix", "Microsoft JhengHei" !important',
},
},
xAxis: {
type: "category",
boundaryGap: false,
axisLine: {
show: false,
lineStyle: {
width: 30
width: 30,
}
},
axisTick: true,
......@@ -152,11 +208,11 @@
data: data.yMoney1,
lineStyle: {
width: 3,
color: "#36C7D9"
color: "#36C7D9",
},
itemStyle: {
borderWidth: 5,
color: "#FFFFFF"
color: "#FFFFFF",
},
areaStyle: {
color: "#A4E6EE"
......@@ -197,11 +253,14 @@
.redEnvelope-form{
padding: 15px 30px 0 30px;
}
.redEnvelope-form.mobile{
padding: 15px 10px 0 20px;
}
.redEnvelope-left {
/* width: 70%; */
}
.redEnvelope-right{
/* width: 28%; */
}
</style>
\ No newline at end of file
src/components/passbook/useDetails.vue
View file @ 7715dcf0
<template>
<div class="bg-white q-mt-lg">
<div class="bg-white q-mt-lg" :style="{'margin':$q.platform.is.mobile?'0 10px':''}">
<rebatehead :title="titleHead"/>
<q-separator color="grey-3" class="q-my-sm" />
<div class="q-px-lg q-pt-md">
......
src/pages/passbook/passbook.vue
View file @ 7715dcf0
<template>
<div class="column items-center">
<div class="passbook-form q-mt-sm q-mb-lg">
<div class="q-mt-sm q-mb-lg"
:class="[$q.platform.is.desktop?'passbook-form':'']"
:style="{'width':$q.platform.is.mobile?'100%':''}">
<template v-if="!isUseDetails">
<passbookHead :dataNum="datainfo?datainfo.Client_Balance:0"/>
<rebate />
......
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