Skip to content

B
bigwood
Commit 99eb9318 authored by 罗超's avatar 罗超
Browse files
Options

修改

parent 63575108
Hide whitespace changes
Inline Side-by-side
Showing with 345 additions and 358 deletions
src/components/passbook/redEnvelope.vue
View file @ 99eb9318
<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' }">
:style="{'margin':$q.platform.is.mobile?'20px 10px 0 10px':'', <rebatehead :title="titleHead" />
'border-radius':$q.platform.is.desktop?'':'10px'}"> <q-separator color="grey-3" class="q-my-sm" />
<rebatehead :title="titleHead"/> <div style="padding: 15px 0 0 0" :class="[$q.platform.is.desktop ? 'row justify-between' : 'column mobile']">
<q-separator color="grey-3" class="q-my-sm" /> <div class="column col redEnvelope-left fz14" :class="[$q.platform.is.desktop ? 'q-pl-sm' : '']" :style="{ padding: $q.platform.is.desktop ? '0 25px 0 25px' : '' }">
<div style="padding: 15px 0 0 0;" <p class="fz14 text-grey-7" :class="[$q.platform.is.desktop ? '' : 'q-pl-md']">{{ $t('v104.passbook.titles.text6') }}</p>
:class="[$q.platform.is.desktop?'row justify-between':'column mobile']"> <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 class="column col redEnvelope-left fz14" </div>
:class="[$q.platform.is.desktop?'q-pl-sm':'']" <div v-if="$q.platform.is.desktop" class="row justify-center">
:style="{'padding':$q.platform.is.desktop?'0 25px 0 25px':''}"> <q-separator vertical inset style="height: 50%; position: relative; top: 11%" />
<p class="fz14 text-grey-7" </div>
:class="[$q.platform.is.desktop?'':'q-pl-md']">{{$t('v104.passbook.titles.text6')}}</p> <div class="redEnvelope-right" :class="[$q.platform.is.desktop ? 'col-4 column q-px-lg' : 'col row q-px-sm']" :style="{ padding: $q.platform.is.desktop ? '0 30px 0 30px' : '' }">
<div ref="main" :class="[$q.platform.is.desktop?'q-pt-lg':'']" style="height: 280px;position: relative;top: -30px;" <div :class="[$q.platform.is.desktop ? 'q-pb-sm' : 'col-6 text-center']">
:style="{'width': $q.platform.is.desktop?'100%':'95%', 'left': $q.platform.is.desktop?'-20px':'10px','top': $q.platform.is.desktop?'-30px':'0'}"></div> <div class="fz14 text-grey-7" :class="[$q.platform.is.desktop ? 'q-pb-xs' : '']">{{ $t('v104.passbook.titles.text9') }}</div>
<div class="row items-end" :class="[$q.platform.is.desktop ? 'q-pt-sm 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>
<div v-if="$q.platform.is.desktop" class="row justify-center"> </div>
<q-separator vertical inset style="height: 50%;position: relative;top: 11%;"/> </div>
</div> <q-separator v-if="$q.platform.is.desktop" color="grey-3" />
<div class="redEnvelope-right" <div :class="[$q.platform.is.desktop ? 'q-pb-sm' : 'col-6 text-center']">
:class="[$q.platform.is.desktop?'col-4 column q-px-lg':'col row q-px-sm']" <div class="fz14 text-grey-7" :class="[$q.platform.is.desktop ? 'q-pb-xs q-pt-lg' : '']">{{ $t('v104.passbook.titles.text10') }}</div>
:style="{'padding':$q.platform.is.desktop?'0 30px 0 30px':''}" <div class="row items-end" :class="[$q.platform.is.desktop ? 'q-pt-sm q-pb-lg' : 'justify-center']">
> <span class="fz12">¥</span>
<div :class="[$q.platform.is.desktop?'q-pb-sm':'col-6 text-center']"> <div class="fz32 q-pl-sm">
<div class="fz14 text-grey-7" :class="[$q.platform.is.desktop?'q-pb-xs':'']">{{$t('v104.passbook.titles.text9')}}</div> <span style="position: relative; top: 9px">{{ datainfo.TotalMoney }}</span>
<div class="row items-end"
:class="[$q.platform.is.desktop?'q-pt-sm 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>
</div>
<q-separator v-if="$q.platform.is.desktop" color="grey-3"/>
<div :class="[$q.platform.is.desktop?'q-pb-sm':'col-6 text-center']">
<div class="fz14 text-grey-7" :class="[$q.platform.is.desktop?'q-pb-xs q-pt-lg':'']">{{$t('v104.passbook.titles.text10')}}</div>
<div class="row items-end"
:class="[$q.platform.is.desktop?'q-pt-sm 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>
</div>
<q-separator v-if="$q.platform.is.desktop" color="grey-3"/>
</div> </div>
<q-separator v-if="$q.platform.is.mobile" 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 :class="[$q.platform.is.desktop ? 'q-pb-lg q-px-lg' : 'q-py-md q-px-md']">
<span>{{ $t('v104.passbook.titles.text11') }}：</span><span class="q-pl-lg"></span><span class="fz32 q-pl-sm">{{ datainfo.Amount.toFixed(0) }}</span>
</div>
<div class="q-pt-sm" :class="[$q.platform.is.desktop ? 'q-px-lg' : 'q-px-md']">
<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 style="border-radius: 15px" v-if="item.percent > 1" stripe rounded size="20px" :value="item.width / 1000" color="orange-9" />
<q-linear-progress style="border-radius: 15px" v-else-if="item.percent < 1" stripe rounded size="20px" :value="item.width / 1000" color="red-5" />
<q-linear-progress style="border-radius: 15px" v-else stripe rounded size="20px" :value="item.width / 1000" color="cyan-4" />
</template>
<template v-else>
<q-linear-progress style="border-radius: 15px" v-if="item.percent > 1" stripe rounded size="10px" :value="item.width / 1000" color="orange-9" />
<q-linear-progress style="border-radius: 15px" v-else-if="item.percent < 1" stripe rounded size="10px" :value="item.width / 1000" color="red-5" />
<q-linear-progress style="border-radius: 15px" v-else stripe rounded size="10px" :value="item.width / 1000" color="cyan-4" />
</template>
</div> </div>
<div :class="[$q.platform.is.desktop?'q-pb-lg q-px-lg':'q-py-md q-px-md']"><span>{{$t('v104.passbook.titles.text11')}}：</span><span class="q-pl-lg">¥</span><span class="fz32 q-pl-sm">{{datainfo.Amount.toFixed(2)}}</span> </div> <div class="row items-center no-wrap" :class="[$q.platform.is.desktop ? 'col-4 q-ml-lg' : 'col']">
<div class="q-pt-sm" :class="[$q.platform.is.desktop?'q-px-lg':'q-px-md']"> <div :class="[$q.platform.is.desktop ? '' : 'q-mr-sm']">
<div class="q-pb-lg" v-for="(item,index) in datainfo.RatioList" :key="index" <template v-if="$q.platform.is.desktop">
:class="[$q.platform.is.desktop?'row items-center no-wrap':'column']"> <q-img v-if="item.percent > 1" src="../../assets/images/personal/gou.png" width="20px" height="20px" style="position: relative" />
<div class="col"> <q-img v-else src="../../assets/images/personal/x1.png" width="26px" height="26px" style="position: relative" />
<template v-if="$q.platform.is.desktop"> </template>
<q-linear-progress style="border-radius: 15px;" v-if="item.percent>1" stripe rounded size="20px" :value="item.width/1000" color="orange-9"/> <template v-else>
<q-linear-progress style="border-radius: 15px;" v-else-if="item.percent<1" stripe rounded size="20px" :value="item.width/1000" color="red-5"/> <q-img v-if="item.percent > 1" src="../../assets/images/personal/gou.png" width="15px" height="15px" style="position: relative" />
<q-linear-progress style="border-radius: 15px;" v-else stripe rounded size="20px" :value="item.width/1000" color="cyan-4"/> <q-img v-else src="../../assets/images/personal/x1.png" width="16px" height="16px" style="position: relative" />
</template> </template>
<template v-else> </div>
<q-linear-progress style="border-radius: 15px;" v-if="item.percent>1" stripe rounded size="10px" :value="item.width/1000" color="orange-9"/>
<q-linear-progress style="border-radius: 15px;" v-else-if="item.percent<1" stripe rounded size="10px" :value="item.width/1000" color="red-5"/>
<q-linear-progress style="border-radius: 15px;" v-else stripe rounded size="10px" :value="item.width/1000" color="cyan-4"/>
</template>
</div> <div :class="[$q.platform.is.desktop ? 'column q-ml-md' : 'row no-wrap items-center justify-between q-pt-xs']">
<div class="row items-center no-wrap" <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 col-6']">
:class="[$q.platform.is.desktop?'col-4 q-ml-lg':'col']"> <template v-if="item.percent > 1">
<div :class="[$q.platform.is.desktop?'':'q-mr-sm']"> {{ $t('v104.passbook.titles.text12') }}
<template v-if="$q.platform.is.desktop"> </template>
<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;"/>
</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 <template v-if="item.percent < 1">
:class="[$q.platform.is.desktop?'column q-ml-md':'row no-wrap items-center justify-between q-pt-xs']"> {{ $t('v104.passbook.titles.text13') }}
<span class="row" {{ item.Money - datainfo.GuestNum }}/{{ $t('travel.people') }},
: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 col-6']"> {{ $t('v104.passbook.titles.text14') }}
<template v-if="item.percent>1">{{$t('v104.passbook.titles.text12')}} ¥{{(item.Money*item.Ratio)/1000}}</template> ¥{{ item.Ratio }} / {{ $t('travel.people') }}
<template v-if="item.percent<1">{{$t('v104.passbook.titles.text13')}}¥{{item.Money-datainfo.Amount}},{{$t('v104.passbook.titles.text14')}} ¥{{(item.Money*item.Ratio)/1000}}</template> </template>
</span> </span>
<span class="fz12 text-grey-6 q-pt-xs" <span class="fz12 text-grey-6 q-pt-xs" :class="[$q.platform.is.desktop ? '' : 'col-6']">
:class="[$q.platform.is.desktop?'':'col-6']">{{$t('v104.passbook.titles.text15')}} ¥ {{item.Money}} {{$t('v104.passbook.titles.text16')}}{{item.Ratio}}‰</span> {{ $t('v104.passbook.titles.text15') }}
</div> {{ item.Money }}
</div> <span v-if="index<datainfo.RatioList.length-1">
</div> -{{ datainfo.RatioList[index+1].Money-1 }}
</span>
<span v-else>
{{ $t('v104.passbook.titles.text17') }}
</span>
{{ $t('v104.passbook.titles.text16') }}
{{ item.Ratio }}/{{ $t('travel.people') }}
</span>
</div>
</div> </div>
</div>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { ref, toRefs, onMounted, onBeforeUnmount } from "vue"; import { ref, toRefs, onMounted, onBeforeUnmount } from 'vue'
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router'
import { useQuasar } from 'quasar' 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'
import rebatehead from '../../components/passbook/rebate/rebatehead.vue' import rebatehead from '../../components/passbook/rebate/rebatehead.vue'
export default defineComponent({ export default defineComponent({
name: 'user-info', name: 'user-info',
components: { rebatehead }, components: { rebatehead },
props: { props: {
Obj: { Obj: {
type: Object, type: Object,
require: true require: true
},
info: {
type: Object,
require: true
}
}, },
setup(props) { info: {
const $q = useQuasar() type: Object,
const { t } = useI18n() require: true
const $router = useRouter(); }
const main = ref(); },
const data=reactive({ setup(props) {
titleHead: t('v104.passbook.titles.text5'), const $q = useQuasar()
xMonth:[] as Array<any>, const { t } = useI18n()
yMoney1:[] as Array<any>, const $router = useRouter()
yMoney2:[] as Array<any>, const main = ref()
datainfo: null as any const data = reactive({
}) titleHead: t('v104.passbook.titles.text5'),
if(props.Obj&&props.info){ xMonth: [] as Array<any>,
data.xMonth = props.Obj.xMonth yMoney1: [] as Array<any>,
data.yMoney1 = props.Obj.yMoney1 yMoney2: [] as Array<any>,
data.yMoney2 = props.Obj.yMoney2 datainfo: null as any
data.datainfo = props.info })
} if (props.Obj && props.info) {
let chart = null data.xMonth = props.Obj.xMonth
const methods = { data.yMoney1 = props.Obj.yMoney1
getinit() { data.yMoney2 = props.Obj.yMoney2
// 基于准备好的dom，初始化echarts实例 data.datainfo = props.info
const myChart = echarts.init(main.value); }
const option = { let chart = null
xAxis: { const methods = {
type: "category", getinit() {
boundaryGap: false, // 基于准备好的dom，初始化echarts实例
axisLine: { const myChart = echarts.init(main.value)
show: false, const option = {
lineStyle: { xAxis: {
width: 30, type: 'category',
} boundaryGap: false,
}, axisLine: {
axisTick: false, show: false,
data: data.xMonth, lineStyle: {
}, width: 30
}
yAxis: { },
type: "value", axisTick: false,
min: '10', data: data.xMonth
axisTick: true, },
splitLine: {
show: true,
lineStyle: {
color: "#fff"
}
},
},
grid: {
top: $q.platform.is.desktop?"30px":"20px",
left: $q.platform.is.desktop?"45px":"45px",
right: $q.platform.is.desktop?"30px":"20px",
bottom: $q.platform.is.desktop?"50px":"60px",
},
series: [
{
type: "line",
smooth: 2,
symbol: 'none',
data: data.yMoney1,
lineStyle: {
width: 3,
color: "#36C7D9",
},
itemStyle: {
borderWidth: 5,
color: "#FFFFFF",
},
areaStyle: {
color: "#A4E6EE"
}
},
{
type: "line",
smooth: 2,
data: data.yMoney2,
lineStyle: {
width: 3,
color: "#ED6A6B",
type: 'dashed'
},
itemStyle: {
borderWidth: 5,
},
areaStyle: { yAxis: {
color: "#FAD2D2" type: 'value',
} min: '10',
} axisTick: true,
] splitLine: {
show: true,
lineStyle: {
color: '#fff'
}
}
},
grid: {
top: $q.platform.is.desktop ? '30px' : '20px',
left: $q.platform.is.desktop ? '45px' : '45px',
right: $q.platform.is.desktop ? '30px' : '20px',
bottom: $q.platform.is.desktop ? '50px' : '60px'
},
series: [
{
type: 'line',
smooth: 2,
symbol: 'none',
data: data.yMoney1,
lineStyle: {
width: 3,
color: '#36C7D9'
},
itemStyle: {
borderWidth: 5,
color: '#FFFFFF'
},
areaStyle: {
color: '#A4E6EE'
}
},
{
type: 'line',
smooth: 2,
data: data.yMoney2,
lineStyle: {
width: 3,
color: '#ED6A6B',
type: 'dashed'
},
itemStyle: {
borderWidth: 5
},
}; areaStyle: {
// 使用刚指定的配置项和数据显示图表。 color: '#FAD2D2'
myChart.setOption(option); }
}
]
} }
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option)
} }
onBeforeUnmount(()=>{
})
onMounted(() => {
methods.getinit();
});
return {...toRefs(data),main,...methods}
} }
}) onBeforeUnmount(() => {})
</script> onMounted(() => {
methods.getinit()
})
return { ...toRefs(data), main, ...methods }
}
})
</script>
<style scoped> <style scoped>
.redEnvelope-form{ .redEnvelope-form {
padding: 15px 30px 0 30px; padding: 15px 30px 0 30px;
} }
.redEnvelope-form.mobile{ .redEnvelope-form.mobile {
padding: 15px 10px 0 20px; padding: 15px 10px 0 20px;
} }
.redEnvelope-left { .redEnvelope-left {
}
} .redEnvelope-right {
.redEnvelope-right{ }
</style>
}
</style>
\ No newline at end of file
src/i18n/en-US/index.ts
View file @ 99eb9318
...@@ -1524,7 +1524,7 @@ export default { ...@@ -1524,7 +1524,7 @@ export default {
text6: 'Revenue in the past six months', text6: 'Revenue in the past six months',
text7: 'Time selection', text7: 'Time selection',
text8: 'Select month', text8: 'Select month',
text9: 'Accumulated number of transactions this year', text9: 'Number of people this year',
text10: 'Accumulated revenue', text10: 'Accumulated revenue',
text11: 'Month Number', text11: 'Month Number',
text12: 'Activated, expected revenue', text12: 'Activated, expected revenue',
...@@ -1532,6 +1532,7 @@ export default { ...@@ -1532,6 +1532,7 @@ export default {
text14: 'Estimated Revenue', text14: 'Estimated Revenue',
text15: 'Monthly transaction amount has been reached', text15: 'Monthly transaction amount has been reached',
text16: 'Return', text16: 'Return',
text17: 'up',
}, },
col: { col: {
title1: 'Order', title1: 'Order',
......
src/i18n/ja-RB/index.ts
View file @ 99eb9318
...@@ -1522,14 +1522,15 @@ export default { ...@@ -1522,14 +1522,15 @@ export default {
text6: '半年近くの収益', text6: '半年近くの収益',
text7: '時間の選択', text7: '時間の選択',
text8: '選択月', text8: '選択月',
text9: '本年の累計取引総額です', text9: '本年の累計人数',
text10: '累積収益', text10: '累積収益',
text11: '当面の取引額', text11: '現在の人数',
text12: '活性化しています,収益見込み', text12: '活性化しています,収益見込み',
text13: 'まだまだ', text13: 'まだまだ',
text14: '収益予想', text14: '収益予想',
text15: '月の取引額はすでに達しました', text15: '月の取引額はすでに達しました',
text16: '返します', text16: '返します',
text17: '以下',
}, },
col:{ col:{
title1: '註文します', title1: '註文します',
......
src/i18n/zh-SW/index.ts
View file @ 99eb9318
...@@ -1525,14 +1525,15 @@ export default { ...@@ -1525,14 +1525,15 @@ export default {
text6: '近半年收益', text6: '近半年收益',
text7: '时间选择', text7: '时间选择',
text8: '选择月份', text8: '选择月份',
text9: '本年累计交易总额', text9: '本年累计人数',
text10: '累计收益', text10: '累计收益',
text11: '当前交易额', text11: '当前人数',
text12: '已激活，预计收益', text12: '已激活，预计收益',
text13: '还差', text13: '还差',
text14: '预计收益', text14: '预计收益',
text15: '月交易额已达', text15: '月交易额已达',
text16: '返', text16: '返',
text17: '以上',
}, },
col:{ col:{
title1: '订单', title1: '订单',
......
src/i18n/zh-TW/index.ts
View file @ 99eb9318
...@@ -1527,14 +1527,15 @@ export default { ...@@ -1527,14 +1527,15 @@ export default {
text6: '近半年收益', text6: '近半年收益',
text7: '時間選擇', text7: '時間選擇',
text8: '選擇月份', text8: '選擇月份',
text9: '本年累計交易總額', text9: '本年累計人數',
text10: '累計收益', text10: '累計收益',
text11: '當前交易額', text11: '當前人數',
text12: '已激活，預計收益', text12: '已激活，預計收益',
text13: '還差', text13: '還差',
text14: '預計收益', text14: '預計收益',
text15: '月交易額已達', text15: '月交易額已達',
text16: '返', text16: '返',
text17: '以上',
}, },
col:{ col:{
title1: '訂單', title1: '訂單',
......
src/pages/passbook/passbook.vue
View file @ 99eb9318
<template> <template>
<div class="column items-center"> <div class="column items-center">
<div class="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%' : '' }">
:class="[$q.platform.is.desktop?'passbook-form':'']" <transition-group v-if="!isUseDetails" appear enter-active-class="animated fadeInRight" leave-active-class="animated fadeInLeft">
:style="{'width':$q.platform.is.mobile?'100%':''}"> <template v-if="MonthObj && datainfo">
<transition-group <passbookHead :dataNum="datainfo ? datainfo.Client_Balance : 0" />
v-if="!isUseDetails" <!-- <rebate/> -->
appear <redEnvelope :Obj="MonthObj" :info="datainfo" />
enter-active-class="animated fadeInRight" </template>
leave-active-class="animated fadeInLeft" </transition-group>
> <transition v-else appear enter-active-class="animated fadeInLeft" leave-active-class="animated fadeInRight">
<template v-if="MonthObj&&datainfo"> <useDetails />
<passbookHead :dataNum="datainfo?datainfo.Client_Balance:0"/> </transition>
<!-- <rebate/> -->
<redEnvelope :Obj="MonthObj" :info="datainfo"/>
</template>
</transition-group>
<transition
v-else
appear
enter-active-class="animated fadeInLeft"
leave-active-class="animated fadeInRight"
>
<useDetails/>
</transition>
</div>
</div> </div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import useMetaModule from '../../module/meta/metaModule' import useMetaModule from '../../module/meta/metaModule'
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router'
import { defineComponent, ref, reactive, toRefs, provide, inject } from 'vue' import { defineComponent, ref, reactive, toRefs, provide, inject } from 'vue'
import { useQuasar } from 'quasar' import { useQuasar } from 'quasar'
import { ApiResult } from '../../@types/enumHelper' import { ApiResult } from '../../@types/enumHelper'
import message from '../../utils/message' import message from '../../utils/message'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import Store from '../../store' import Store from '../../store'
import { DirtionmaryHelper } from '../../config/dictionary' import { DirtionmaryHelper } from '../../config/dictionary'
import passbookHead from '../../components/passbook/passbookHead.vue' import passbookHead from '../../components/passbook/passbookHead.vue'
import rebate from '../../components/passbook/rebate.vue' import rebate from '../../components/passbook/rebate.vue'
import redEnvelope from '../../components/passbook/redEnvelope.vue' import redEnvelope from '../../components/passbook/redEnvelope.vue'
import useDetails from '../../components/passbook/useDetails.vue' import useDetails from '../../components/passbook/useDetails.vue'
import passbookService from '../../api/passbook' import passbookService from '../../api/passbook'
export default defineComponent({ export default defineComponent({
name: 'user-info', name: 'user-info',
components: { passbookHead,rebate,redEnvelope,useDetails }, components: { passbookHead, rebate, redEnvelope, useDetails },
props: {}, props: {},
setup() { setup() {
const $router = useRouter()
const $q = useQuasar()
const data = reactive({
datainfo: null as Object,
xMonth: [] as Array<any>,
yMoney1: [] as Array<any>,
yMoney2: [] as Array<any>,
MonthObj: null as Object
})
const $router = useRouter(); let { setTitle } = useMetaModule()
const $q = useQuasar() const { locale, t } = useI18n()
const data=reactive({ const pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY) as any
datainfo:null as Object, pageTitle.value = t('v104.passbook.pageTitle')
xMonth:[] as Array<any>, setTitle(pageTitle.value)
yMoney1:[] as Array<any>, const ratioListBase = ref([
yMoney2:[] as Array<any>, {
MonthObj:null as Object Money: 5,
}) Ratio: 100000
},
let { setTitle } = useMetaModule() {
const { locale, t } = useI18n() Money: 11,
const pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY) as any Ratio: 150000
pageTitle.value = t('v104.passbook.pageTitle') },
setTitle(pageTitle.value) {
const ratioListBase = ref([ Money: 16,
{ Ratio: 200000
Money:5, },
Ratio:100000, {
}, Money: 21,
{ Ratio: 250000
Money:11, }
Ratio:150000, ])
}, const isUseDetails = ref(false)
{ provide(DirtionmaryHelper.PASSBOOK_DETAILS, isUseDetails)
Money:16, const methods = {
Ratio:200000, GetBigRedEnvelope() {
}, let CustomerId
{ if (Store.state && Store.state.user?.userDetail) {
Money:21, CustomerId = Store.state.user?.userDetail?.customerId
Ratio:250000, }
}, $q.loading.show()
]) passbookService
const isUseDetails = ref(false) .GetCustomerBigRedEnvelope(CustomerId)
provide(DirtionmaryHelper.PASSBOOK_DETAILS,isUseDetails) .then(r => {
const methods = { let arr1 = ['-', '-', '-', '-']
GetBigRedEnvelope() { let newarr = []
let CustomerId if (r.data.resultCode == ApiResult.SUCCESS) {
if (Store.state && Store.state.user?.userDetail) { data.datainfo = r.data.data
CustomerId = Store.state.user?.userDetail?.customerId data.datainfo.JQLRList.forEach((item, index) => {
} data.xMonth.push(item.Date)
$q.loading.show() if (index < 5) {
passbookService.GetCustomerBigRedEnvelope(CustomerId) data.yMoney1.push(item.Money)
.then(r => {
let arr1=['-', '-', '-','-'];
let newarr=[];
if (r.data.resultCode == ApiResult.SUCCESS) {
data.datainfo=r.data.data;
data.datainfo.JQLRList.forEach((item,index)=>{
data.xMonth.push(item.Date)
if(index<5){
data.yMoney1.push(item.Money)
}
if(index>3){
newarr.push(item.Money);
data.yMoney2=arr1.concat(newarr);
}
})
data.datainfo.RatioList = ratioListBase.value
data.datainfo.RatioList.forEach(item=>{
item.percent=data.datainfo.Amount/item.Money;
item.width=(item.percent)*100;
})
console.log(data.datainfo.RatioList)
data.yMoney1=data.yMoney1.concat(["-"]);
data.MonthObj ={
xMonth: data.xMonth,
yMoney1: data.yMoney1,
yMoney2: data.yMoney2
} }
} else { if (index > 3) {
message.errorMsg(r.data.message) newarr.push(item.Money)
data.yMoney2 = arr1.concat(newarr)
}
})
data.datainfo.RatioList = ratioListBase.value
data.datainfo.GuestNum = data.datainfo.GuestNum ? data.datainfo.GuestNum : 0
data.datainfo.RatioList.forEach(item => {
item.percent = data.datainfo.GuestNum / item.Money
item.width = item.percent * 100
})
data.yMoney1 = data.yMoney1.concat(['-'])
data.MonthObj = {
xMonth: data.xMonth,
yMoney1: data.yMoney1,
yMoney2: data.yMoney2
} }
$q.loading.hide() } else {
}) message.errorMsg(r.data.message)
.catch(r => { }
$q.loading.hide() $q.loading.hide()
message.errorMsg(r.message) })
}) .catch(r => {
}, $q.loading.hide()
message.errorMsg(r.message)
})
} }
methods.GetBigRedEnvelope()
return {...toRefs(data),isUseDetails,...methods}
} }
}) methods.GetBigRedEnvelope()
</script> return { ...toRefs(data), isUseDetails, ...methods }
}
})
</script>
<style> <style>
.passbook-form{ .passbook-form {
width: 963px; width: 963px;
/* min-width: 663px; */ /* min-width: 663px; */
} }
</style> </style>
\ No newline at end of file
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