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