Skip to content

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

no message

parent e7e134dc
Expand all Hide 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="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>
<div class="fz12 q-pl-lg cursor-pointer" style="position: absolute;right: 0;bottom: 0;">
使用规则
<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.toFixed(2)}}</span>
</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 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"
width="12px"
height="12px" style="position: relative; top: 0px;"/>
<span class="fz14 q-pl-xs">查看明细</span>
<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>
</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
This diff is collapsed.
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