329 lines
9.2 KiB
Vue
329 lines
9.2 KiB
Vue
<template>
|
||
<BasePage>
|
||
<div class="merchant">
|
||
<div class="shopinfo">
|
||
<img class="tx" :src="$file(data.MerchantAvatar)">
|
||
<div class="info">
|
||
<b>{{ data.MerchantName }}</b>
|
||
<p>账号：{{ data.MerchantPhone }}</p>
|
||
</div>
|
||
|
||
<div class="service-box" @click="$showManagerPopup()">
|
||
管理中心
|
||
<van-icon name="arrow"></van-icon>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="wallet">
|
||
<div class="tit">
|
||
<span @click="$navigate('MerchantIncome')"> 营业收入(元) <van-icon name="arrow"></van-icon>
|
||
</span>
|
||
<div class="line">
|
||
<b @click="$navigate('MerchantIncome')">
|
||
1020.00
|
||
</b>
|
||
<div>
|
||
<span>提现中金额
|
||
</span>
|
||
<p>￥1000.00</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="cc">
|
||
<div class="ll" @click="$navigate('Balance')">
|
||
<span>
|
||
可用余额<van-icon name="arrow"></van-icon>
|
||
</span>
|
||
<b>{{ data.Income?.toFixed(2) }}</b>
|
||
</div>
|
||
<div class="ll" @click="$navigate('CV')">
|
||
<span>
|
||
会员卡额度<van-icon name="arrow"></van-icon>
|
||
</span>
|
||
<b>{{ data.Point?.toFixed(2) }}</b>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- <div class="block">
|
||
<div class="d1" @click="$navigate('MerchantTrade')">
|
||
<b>订单记录</b>
|
||
<p>查看订单记录</p>
|
||
<van-badge :content="expiring ? expiring : ''" :offset="[60, -40]">
|
||
<button>立即查看</button>
|
||
</van-badge>
|
||
<img src="/img/bbb1.png">
|
||
</div>
|
||
<div class="_r">
|
||
<div class="d2" @click="$navigate('MerchantTrade')">
|
||
<b>订单记录</b>
|
||
<p>查看订单记录</p>
|
||
<button>立即查看</button>
|
||
<img src="/img/bbb2.png">
|
||
</div>
|
||
<div class="d3" @click="$navigate('MerchantProduct')">
|
||
<b>产品列表</b>
|
||
<p>查看我的产品</p>
|
||
<button>立即查看</button>
|
||
<img src="/img/bbb3.png">
|
||
</div>
|
||
</div>
|
||
|
||
</div> -->
|
||
|
||
<div class="fastTo">
|
||
<div class="ft1" @click="showBottom = true">
|
||
<span>收款码</span>
|
||
<img src="/img/ft_i1.png" alt="">
|
||
</div>
|
||
|
||
<div class="ft2" @click="$navigate('MerchantTrade')">
|
||
<span>订单记录</span>
|
||
<img src="/img/ft_i2.png" alt="">
|
||
</div>
|
||
|
||
<div class="ft3">
|
||
<span>商家资料</span>
|
||
<img src="/img/ft_i3.png" alt="">
|
||
</div>
|
||
</div>
|
||
|
||
<div class="countbox">
|
||
<div class="title">
|
||
<b>经营数据</b>
|
||
</div>
|
||
<div class="box line">
|
||
<span>截止{{ data.endTimes }}</span>
|
||
<p class="refresh" @click="init">刷新</p>
|
||
<p class="cou r" @click="$navigate('Statistics')">统计<van-icon name="arrow"></van-icon></p>
|
||
</div>
|
||
|
||
<div class="list">
|
||
<div class="item">
|
||
<span>
|
||
今日营业额（元）
|
||
</span>
|
||
<b>{{ data.TodayAmount?.toFixed(2) }}</b>
|
||
<p>昨日<span>{{ data.YesterdayAmount?.toFixed(2) }}</span></p>
|
||
</div>
|
||
|
||
<div class="item">
|
||
<span>
|
||
今日应收（元）
|
||
</span>
|
||
<b>{{ data.TodayDeduct?.toFixed(2) }}</b>
|
||
<p>昨日<span>{{ data.YesterdayDeduct?.toFixed(2) }}</span></p>
|
||
</div>
|
||
|
||
<div class="item">
|
||
<span>
|
||
今日订单数
|
||
</span>
|
||
<b>{{ data.TodayQty }}</b>
|
||
<p>昨日<span>{{ data.YesterdayQty }}</span></p>
|
||
</div>
|
||
|
||
<div class="item">
|
||
<span>
|
||
今日惠利金额（元）
|
||
</span>
|
||
<b>{{ data.MonthIncome?.toFixed(2) }}</b>
|
||
<p>昨日<span>{{ data.PrevMonthIncome?.toFixed(2) }}</span></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
|
||
<van-action-sheet v-model:show="showBottom" title="收款码" @click-overlay="onCloseBottom" @opened="onOpenBottom">
|
||
<div class="paycode-wrap">
|
||
<div class="paycode-original" ref="paycodeOriginal" v-show="!paycodeImg">
|
||
<img src="/img/paycode.jpg" alt="" style="width: 100%; display: block;">
|
||
<div class="info">
|
||
<img :src="$file(data.MerchantAvatar)" alt="" style="border-radius: 50%;">
|
||
</div>
|
||
<div class="name">
|
||
<span>{{ data.MerchantName }}</span>
|
||
</div>
|
||
<div class="code">
|
||
<vue-qr v-if="!loading" :margin="0" :text="link" backgroundColor="rgb(255,255,255)"
|
||
colorLight="rgb(255,255,255)"></vue-qr>
|
||
</div>
|
||
</div>
|
||
<div class="paycode-result" v-if="paycodeImg">
|
||
<img :src="paycodeImg" style="width: 100%;" alt="收款码">
|
||
</div>
|
||
</div>
|
||
</van-action-sheet>
|
||
</BasePage>
|
||
|
||
</template>
|
||
|
||
<script>
|
||
import { htmlToDataURL } from '@/utils/html2image'
|
||
|
||
export default {
|
||
name: 'Merchant',
|
||
mounted() {
|
||
},
|
||
data() {
|
||
return {
|
||
showInfo: false,
|
||
showBottom: false,
|
||
paycodeImg: '',
|
||
isCapturing: false,
|
||
link: '',
|
||
data: {
|
||
id: 'merchant_001',
|
||
MerchantAvatar: '',
|
||
MerchantName: '泰古润直营店',
|
||
MerchantPhone: '13800138000',
|
||
Income: 12868.50,
|
||
Point: 5680.00,
|
||
TodayAmount: 5680.00,
|
||
YesterdayAmount: 4200.00,
|
||
TodayDeduct: 1280.00,
|
||
YesterdayDeduct: 980.00,
|
||
TodayQty: 45,
|
||
YesterdayQty: 38,
|
||
MonthIncome: 45600.00,
|
||
PrevMonthIncome: 38500.00,
|
||
endTimes: '2024-04-18 10:30'
|
||
},
|
||
States: 0,
|
||
expiring: 3,
|
||
loading: false,
|
||
}
|
||
},
|
||
methods: {
|
||
onOpenBottom() {
|
||
this.paycodeImg = ''
|
||
this.$nextTick(() => {
|
||
const el = this.$refs.paycodeOriginal
|
||
if (!el) return
|
||
|
||
const scale = 2
|
||
const rect = el.getBoundingClientRect()
|
||
const w = rect.width * scale
|
||
const h = rect.height * scale
|
||
const elRect = el.getBoundingClientRect()
|
||
|
||
const canvas = document.createElement('canvas')
|
||
canvas.width = w
|
||
canvas.height = h
|
||
const ctx = canvas.getContext('2d')
|
||
|
||
// 画背景
|
||
const bg = new Image()
|
||
bg.src = el.querySelector('img').src
|
||
bg.onload = () => {
|
||
ctx.drawImage(bg, 0, 0, w, h)
|
||
|
||
const infoEl = el.querySelector('.info')
|
||
const codeEl = el.querySelector('.code')
|
||
|
||
// 截取头像
|
||
const avatarEl = infoEl.querySelector('img')
|
||
htmlToDataURL(avatarEl, { scale: 2, useCORS: true, backgroundColor: 'transparent' }).then(avaCanvas => {
|
||
const avaImg = new Image()
|
||
avaImg.src = avaCanvas
|
||
avaImg.onload = () => {
|
||
const infoRect = infoEl.getBoundingClientRect()
|
||
const avaSize = infoRect.height * scale * 0.8
|
||
const avaX = (infoRect.left - elRect.left) * scale + avaSize * 0.1
|
||
const avaY = (infoRect.top - elRect.top) * scale + (infoRect.height * scale - avaSize) / 2
|
||
|
||
// 画头像（圆形）
|
||
ctx.save()
|
||
ctx.beginPath()
|
||
ctx.arc(avaX + avaSize / 2, avaY + avaSize / 2, avaSize / 2, 0, Math.PI * 2)
|
||
ctx.clip()
|
||
ctx.drawImage(avaImg, avaX, avaY, avaSize, avaSize)
|
||
ctx.restore()
|
||
|
||
// 画文字
|
||
ctx.font = `${avaSize * 0.6}px 'PingFang SC'`
|
||
ctx.fillStyle = '#333'
|
||
ctx.textBaseline = 'middle'
|
||
ctx.fillText(this.data.MerchantName, avaX + avaSize + avaSize * 0.3, avaY + avaSize / 2)
|
||
|
||
// 截取二维码
|
||
htmlToDataURL(codeEl, { scale: 2, useCORS: true, backgroundColor: '#ffffff' }).then(codeCanvas => {
|
||
const qrImg = new Image()
|
||
qrImg.src = codeCanvas
|
||
qrImg.onload = () => {
|
||
const codeRect = codeEl.getBoundingClientRect()
|
||
ctx.drawImage(
|
||
qrImg,
|
||
(codeRect.left - elRect.left) * scale,
|
||
(codeRect.top - elRect.top) * scale,
|
||
codeRect.width * scale,
|
||
codeRect.height * scale
|
||
)
|
||
this.paycodeImg = canvas.toDataURL('image/png')
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
onCloseBottom() {
|
||
this.showBottom = false
|
||
this.paycodeImg = ''
|
||
},
|
||
},
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="less">
|
||
.paycode-original {
|
||
position: relative;
|
||
width: 100%;
|
||
font-family: 'PingFang SC';
|
||
|
||
>img {
|
||
width: 100%;
|
||
display: block;
|
||
}
|
||
|
||
.info {
|
||
display: flex;
|
||
align-items: center;
|
||
position: absolute;
|
||
left: 30.67vw;
|
||
top: 32.27vw;
|
||
|
||
img {
|
||
width: 6.4vw;
|
||
height: 6.4vw;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
|
||
.name {
|
||
position: absolute;
|
||
left: 39.33vw;
|
||
top: 33.47vw;
|
||
|
||
span {
|
||
font-size: 4vw;
|
||
color: #333;
|
||
}
|
||
}
|
||
|
||
.code {
|
||
position: absolute;
|
||
top: 42.4vw;
|
||
left: 23.33vw;
|
||
|
||
canvas,
|
||
img {
|
||
width: 53.33vw;
|
||
height: 53.33vw;
|
||
}
|
||
}
|
||
}
|
||
</style> |