save2
This commit is contained in:
parent
f971e5053a
commit
e48a3ffcac
BIN
public/img/allow.png
Normal file
BIN
public/img/allow.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 771 B |
BIN
public/img/allow_bg.jpg
Normal file
BIN
public/img/allow_bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.6 KiB |
BIN
public/img/certificate.png
Normal file
BIN
public/img/certificate.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
BIN
public/img/check.png
Normal file
BIN
public/img/check.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
BIN
public/img/co_icon.png
Normal file
BIN
public/img/co_icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 644 B |
Binary file not shown.
|
Before Width: | Height: | Size: 962 B After Width: | Height: | Size: 5.0 KiB |
BIN
public/img/cv_bg.jpg
Normal file
BIN
public/img/cv_bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
BIN
public/img/down-one.png
Normal file
BIN
public/img/down-one.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 209 B |
BIN
public/img/ft_i1.png
Normal file
BIN
public/img/ft_i1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
BIN
public/img/ft_i2.png
Normal file
BIN
public/img/ft_i2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
BIN
public/img/ft_i3.png
Normal file
BIN
public/img/ft_i3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 333 KiB After Width: | Height: | Size: 220 KiB |
BIN
public/img/logo.png
Normal file
BIN
public/img/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
public/img/merchant_bg.jpg
Normal file
BIN
public/img/merchant_bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 23 KiB |
BIN
public/img/paycode.jpg
Normal file
BIN
public/img/paycode.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
BIN
public/img/point_bg.jpg
Normal file
BIN
public/img/point_bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 941 B |
@ -49,7 +49,8 @@
|
||||
</van-cell>
|
||||
<van-cell size="small">
|
||||
<template #title>
|
||||
<van-button round type="primary" size="large" native-type="save" :loading="isSaving">保存</van-button>
|
||||
<van-button round type="primary" color="#ca2904" size="large" native-type="save"
|
||||
:loading="isSaving">保存</van-button>
|
||||
</template>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
@ -61,7 +62,7 @@
|
||||
<van-cascader v-model="region" title="请选择地区" :options="options" @finish="onFinish" @close="showRegion = false" />
|
||||
</van-popup>
|
||||
<van-action-bar>
|
||||
<van-action-bar-button type="primary" text="新增地址" @click="beforeAdd()" />
|
||||
<van-action-bar-button color="#ca2904" type="primary" text="新增地址" @click="beforeAdd()" />
|
||||
</van-action-bar>
|
||||
</van-action-sheet>
|
||||
</template>
|
||||
@ -174,6 +175,10 @@ export default {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.van-switch--on {
|
||||
background: #ca2904;
|
||||
}
|
||||
|
||||
.address-item {
|
||||
padding: 1.067vw 0;
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<van-popup v-model:show="visible" position="right" :style="{ width: '60%', height: '100%' }">
|
||||
<div class="manager_container">
|
||||
<div class="manager_dbox">
|
||||
<div @click="goInfo">
|
||||
<div @click="navigateAndClose('My')">
|
||||
<img src="/img/my_u1.png" alt="">
|
||||
<span>个人管理中心</span>
|
||||
<van-icon class="r" name="arrow"></van-icon>
|
||||
@ -10,13 +10,13 @@
|
||||
|
||||
<div @click="navigateAndClose('Merchant')">
|
||||
<img src="/img/my_u2.png" alt="">
|
||||
<span>商家中心</span>
|
||||
<span>商家管理中心</span>
|
||||
<van-icon class="r" name="arrow"></van-icon>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<img src="/img/my_u3.png" alt="">
|
||||
<span>运营中心</span>
|
||||
<span>运营管理中心</span>
|
||||
<van-icon class="r" name="arrow"></van-icon>
|
||||
</div>
|
||||
</div>
|
||||
@ -41,37 +41,11 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button @click="visible = false">
|
||||
返回
|
||||
<button @click="loginout">
|
||||
退出登录
|
||||
</button>
|
||||
</div>
|
||||
</van-popup>
|
||||
|
||||
<!-- 个人管理中心弹窗 -->
|
||||
<van-action-sheet v-model:show="showInfo" title="个人信息">
|
||||
<van-form @submit="save">
|
||||
<van-cell-group inset>
|
||||
<van-field name="uploader" label="头像" required>
|
||||
<template #input>
|
||||
<van-uploader v-model="tempData.AvatarUploader" :after-read="upload" :max-count="1" upload-text="头像" />
|
||||
</template>
|
||||
</van-field>
|
||||
<van-field v-model="tempData.nickname" label="昵称" placeholder="请输入昵称"
|
||||
:rules="[{ required: true, message: '请填写昵称' }]" clearable required />
|
||||
<van-field v-model="tempData.cellphone" label="手机号" readonly>
|
||||
<template #button>
|
||||
更改联系平台
|
||||
</template>
|
||||
</van-field>
|
||||
<van-cell>
|
||||
<template #title>
|
||||
<van-button style="width: 100%" color="#ea3e23" round type="primary" native-type="save"
|
||||
:loading="saving">保存</van-button>
|
||||
</template>
|
||||
</van-cell>
|
||||
</van-cell-group>
|
||||
</van-form>
|
||||
</van-action-sheet>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -108,6 +82,17 @@ export default {
|
||||
this.$navigate(route)
|
||||
})
|
||||
},
|
||||
loginout() {
|
||||
this.$showConfirmDialog({
|
||||
title: "确认退出？",
|
||||
}).then(() => {
|
||||
this.$ls.remove('token');
|
||||
location.replace('#/Login');
|
||||
setTimeout(() => {
|
||||
location.reload();
|
||||
}, 100);
|
||||
}).catch(() => { });
|
||||
},
|
||||
open() {
|
||||
this.visible = true
|
||||
},
|
||||
@ -119,52 +104,6 @@ export default {
|
||||
this.loadUserInfo()
|
||||
this.showInfo = true
|
||||
},
|
||||
loadUserInfo() {
|
||||
this.$get('/v1/client/DUsersClient').then(data => {
|
||||
this.tempData = {}
|
||||
Object.assign(this.tempData, data.data)
|
||||
this.tempData.AvatarUploader = [{ url: this.$file(data.data.userimg), isImage: true }]
|
||||
})
|
||||
},
|
||||
upload(file) {
|
||||
this.tempData.userimg = file.file
|
||||
},
|
||||
save() {
|
||||
if (this.tempData.userimg instanceof File) {
|
||||
const fd = new FormData()
|
||||
fd.append('file', this.tempData.userimg)
|
||||
fetch(`${import.meta.env.VITE_API_URL}/v1/client/DUsersClient/userimg`, {
|
||||
method: 'POST',
|
||||
headers: { 'Authorization': `Bearer ${localStorage.getItem('token')}` },
|
||||
body: fd,
|
||||
}).then(res => res.json()).then(res => {
|
||||
if (res.status !== 200) throw new Error(res.errmsg)
|
||||
this.tempData.userimg = res.data
|
||||
}).then(() => {
|
||||
return this.$put('/v1/client/DUsersClient', {
|
||||
nickname: this.tempData.nickname,
|
||||
cellphone: this.tempData.cellphone,
|
||||
})
|
||||
}).then(() => {
|
||||
this.$showSuccessToast('保存成功')
|
||||
this.showInfo = false
|
||||
window.location.reload()
|
||||
}).catch(err => {
|
||||
this.$showFailToast(err.errmsg || err.message || '保存失败')
|
||||
})
|
||||
} else {
|
||||
this.$put('/v1/client/DUsersClient', {
|
||||
nickname: this.tempData.nickname,
|
||||
cellphone: this.tempData.cellphone,
|
||||
}).then(() => {
|
||||
this.$showSuccessToast('保存成功')
|
||||
this.showInfo = false
|
||||
window.location.reload()
|
||||
}).catch(err => {
|
||||
this.$showFailToast(err.errmsg || '保存失败')
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -62,20 +62,36 @@ const routes = [
|
||||
title: '余额',
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/Voucher',
|
||||
name: 'Voucher',
|
||||
component: () => import('./views/User/Voucher.vue'),
|
||||
meta: {
|
||||
title: '消费券',
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/CV',
|
||||
name: 'CV',
|
||||
component: () => import('./views/User/CV.vue'),
|
||||
meta: {
|
||||
title: '贡献值',
|
||||
title: '会员卡额度',
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/Point',
|
||||
name: 'Point',
|
||||
component: () => import('./views/User/Point.vue'),
|
||||
meta: {
|
||||
title: '积分',
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/Allow',
|
||||
name: 'Allow',
|
||||
component: () => import('./views/User/Allow.vue'),
|
||||
meta: {
|
||||
title: '业绩统计',
|
||||
}
|
||||
},
|
||||
{
|
||||
path: '/Certificate',
|
||||
name: 'Certificate',
|
||||
component: () => import('./views/User/Certificate.vue'),
|
||||
meta: {
|
||||
title: '礼品券',
|
||||
}
|
||||
},
|
||||
{
|
||||
|
||||
@ -2510,9 +2510,12 @@
|
||||
.b_l_w;
|
||||
.f5;
|
||||
padding: 4vw 3.33vw;
|
||||
background: url(/img/merchant_bg.jpg) no-repeat;
|
||||
background-size: 100% auto;
|
||||
|
||||
.shopinfo {
|
||||
.box;
|
||||
position: relative;
|
||||
|
||||
.tx {
|
||||
width: 16vw;
|
||||
@ -2539,62 +2542,88 @@
|
||||
}
|
||||
|
||||
.service-box {
|
||||
height: 6.4vw;
|
||||
background-color: #2db57c;
|
||||
border-radius: 3.2vw;
|
||||
.bs;
|
||||
.box;
|
||||
.box-align-center;
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
color: #fff;
|
||||
font-size: 3.47vw;
|
||||
font-weight: bold;
|
||||
right: -4vw;
|
||||
top: 8vw;
|
||||
height: 6.67vw;
|
||||
background-color: #fc6a39;
|
||||
border-radius: 3.33vw 0vw 0vw 3.33vw;
|
||||
padding: 0 2.8vw;
|
||||
white-space: nowrap;
|
||||
padding: 0 1.33vw;
|
||||
|
||||
.icon {
|
||||
height: 4.67vw;
|
||||
margin-right: 1.2vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wallet {
|
||||
padding: 4.133vw 2.667vw;
|
||||
background-color: #3dcd91;
|
||||
border-radius: 2.667vw;
|
||||
background-color: #ffffff;
|
||||
border-radius: 1.6vw;
|
||||
position: relative;
|
||||
margin-top: 4vw;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
width: 12.67vw;
|
||||
height: 14.27vw;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 3.73vw;
|
||||
z-index: 0;
|
||||
background: url(/img/money.png)no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.tit {
|
||||
span {
|
||||
color: #1b1b1b;
|
||||
}
|
||||
|
||||
.line {
|
||||
.box;
|
||||
.box-align-center;
|
||||
margin-top: 4.53vw;
|
||||
|
||||
>div {
|
||||
margin-left: 6.67vw;
|
||||
.box;
|
||||
.box-align-center;
|
||||
height: 6.13vw;
|
||||
padding: 0 1.47vw;
|
||||
border-radius: 1.07vw;
|
||||
border: solid 0.13vw #222222;
|
||||
color: #1b1b1b;
|
||||
|
||||
p {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
b {
|
||||
font-size: 6.67vw;
|
||||
color: #1b1b1b;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
b {
|
||||
font-size: 4vw;
|
||||
.bs;
|
||||
}
|
||||
|
||||
.cc {
|
||||
.box;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: #ffffff;
|
||||
border-radius: 1.333vw;
|
||||
background-color: #f5f5f5;
|
||||
border-radius: 1.6vw;
|
||||
padding: 5.667vw 3.33vw;
|
||||
margin-top: 3.33vw;
|
||||
|
||||
>div {
|
||||
.box;
|
||||
.box-tb;
|
||||
.box-align-center;
|
||||
width: 50%;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
>div:first-child {
|
||||
border-right: 1px solid #8a8a8a80;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
margin-bottom: 2vw;
|
||||
@ -2607,6 +2636,53 @@
|
||||
}
|
||||
}
|
||||
|
||||
.fastTo {
|
||||
.box;
|
||||
.box-align-center;
|
||||
.box-pack-between;
|
||||
margin-top: 4vw;
|
||||
|
||||
>div {
|
||||
.box;
|
||||
width: 29.33vw;
|
||||
height: 18.67vw;
|
||||
border-radius: 1.6vw;
|
||||
position: relative;
|
||||
padding: 4vw 2.2vw;
|
||||
font-size: 3.73vw;
|
||||
font-weight: bold;
|
||||
line-height: 4.44vw;
|
||||
color: #1b1b1b;
|
||||
|
||||
img {
|
||||
width: 11.6vw;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.ft1 {
|
||||
background-color: #f5f8ff;
|
||||
border: solid 0.27vw #9ab0f9;
|
||||
}
|
||||
|
||||
.ft2 {
|
||||
background-color: #fff8f6;
|
||||
border: solid 0.27vw #f9b49d;
|
||||
}
|
||||
|
||||
.ft3 {
|
||||
background-color: #fff8ef;
|
||||
border: solid 0.27vw #f6c88a;
|
||||
|
||||
img {
|
||||
bottom: 1.2vw;
|
||||
right: 1.2vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.block {
|
||||
.box;
|
||||
.box-pack-between;
|
||||
@ -4113,209 +4189,141 @@
|
||||
}
|
||||
}
|
||||
|
||||
.voucher {
|
||||
background: url(/img/voucher-bg.png) no-repeat;
|
||||
background-size: 100% auto;
|
||||
padding: 6.667vw 3.333vw;
|
||||
.b_l_w;
|
||||
.f5;
|
||||
.balance {
|
||||
|
||||
>div {
|
||||
.b_l_w;
|
||||
}
|
||||
.top {
|
||||
.bs;
|
||||
background-color: #374c6d;
|
||||
padding: 8vw 4vw;
|
||||
|
||||
.t {
|
||||
background-size: 100% 100% !important;
|
||||
border-radius: 4vw;
|
||||
position: relative;
|
||||
margin-bottom: 4vw;
|
||||
height: 49.2vw;
|
||||
.line {
|
||||
.box;
|
||||
.box-align-center;
|
||||
margin-bottom: 5vw;
|
||||
|
||||
.num {
|
||||
font-size: 8vw;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.tit {
|
||||
.box;
|
||||
.box-align-center;
|
||||
font-size: 4.8vw;
|
||||
color: #ffffff;
|
||||
|
||||
.van-icon {
|
||||
margin-left: 2.4vw;
|
||||
}
|
||||
}
|
||||
|
||||
.co_box {
|
||||
.r;
|
||||
.box;
|
||||
.box-align-center;
|
||||
|
||||
span {
|
||||
font-size: 4vw;
|
||||
.box;
|
||||
.box-align-center;
|
||||
margin: 0 1.2vw;
|
||||
}
|
||||
|
||||
i {
|
||||
font-size: 4vw;
|
||||
margin: .5vw 0 0 1vw;
|
||||
}
|
||||
img {
|
||||
height: 4.27vw;
|
||||
}
|
||||
}
|
||||
|
||||
.c {
|
||||
button {
|
||||
padding: 0 4vw;
|
||||
color: #333;
|
||||
height: 8vw;
|
||||
background-color: #ffffff;
|
||||
border-radius: 4vw;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.pn {
|
||||
.box;
|
||||
.box-align-center;
|
||||
.box-wrap;
|
||||
font-size: 3.2vw;
|
||||
position: relative;
|
||||
background: url(/img/voucher-c.png) no-repeat;
|
||||
background-size: 100% auto;
|
||||
height: 50vw;
|
||||
padding: 5vw 5.467vw 0;
|
||||
padding-bottom: 4.53vw;
|
||||
|
||||
|
||||
>div {
|
||||
.b_l_w;
|
||||
}
|
||||
|
||||
.number {
|
||||
font-size: 8vw;
|
||||
.box;
|
||||
.box-pack-between;
|
||||
.box-align-center;
|
||||
margin: 4vw 0 0;
|
||||
color: #d5a837;
|
||||
|
||||
.a {
|
||||
width: 26.667vw;
|
||||
height: 8vw;
|
||||
line-height: 8vw;
|
||||
border-radius: 4vw;
|
||||
.center;
|
||||
background-color: #f3c947;
|
||||
font-size: 4.267vw;
|
||||
color: #141414;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.van-button {
|
||||
width: 24vw;
|
||||
.b;
|
||||
font-size: 3.733vw;
|
||||
margin-left: 3vw;
|
||||
}
|
||||
}
|
||||
|
||||
.total {
|
||||
margin: 4vw 0 0;
|
||||
line-height: 8vw;
|
||||
.box;
|
||||
.box-pack-around;
|
||||
.center;
|
||||
font-size: 3.333vw;
|
||||
color: #959595;
|
||||
|
||||
p {
|
||||
font-size: 4vw;
|
||||
color: #252525;
|
||||
.b;
|
||||
}
|
||||
}
|
||||
|
||||
color: #b6c7e1;
|
||||
}
|
||||
}
|
||||
|
||||
.times {
|
||||
.botom {
|
||||
padding: 5.87vw 4vw;
|
||||
background-color: #ffffff;
|
||||
border-radius: 5.33vw 5.33vw 0vw 0vw;
|
||||
margin-top: -10vw;
|
||||
|
||||
.tabs {
|
||||
margin-top: 4vw;
|
||||
|
||||
.van-tab--card:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.van-tab--card {
|
||||
border-right: none;
|
||||
border-radius: 4vw;
|
||||
background-color: #f6f6f6;
|
||||
margin-right: 3vw;
|
||||
gap: 3vw;
|
||||
width: max-content;
|
||||
font-size: 3.2vw;
|
||||
}
|
||||
|
||||
.van-tabs__nav--card {
|
||||
border: none;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.date_box {
|
||||
.box;
|
||||
.box-align-center;
|
||||
height: 12.8vw;
|
||||
margin: 2vw 0 4vw;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0vw 0.67vw 1.11vw 0.09vw rgba(219, 255, 242, 0.08);
|
||||
border-radius: 2.67vw;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
width: 86.4vw;
|
||||
height: 10.4vw;
|
||||
background-color: #ffffff;
|
||||
opacity: 0.5;
|
||||
border-radius: 2.67vw;
|
||||
position: absolute;
|
||||
bottom: -2vw;
|
||||
left: 2.4vw;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 2.4vw;
|
||||
height: 1.333vw;
|
||||
margin-left: 1.2vw;
|
||||
}
|
||||
|
||||
._t {
|
||||
.date {
|
||||
.box;
|
||||
.box-align-center;
|
||||
height: 12.667vw;
|
||||
.box-center-center;
|
||||
height: 8vw;
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 4vw;
|
||||
padding: 0 2.8vw;
|
||||
|
||||
p {
|
||||
width: 1.333vw;
|
||||
height: 4vw;
|
||||
border-radius: 0.667vw;
|
||||
margin-right: 1.867vw;
|
||||
img {
|
||||
height: 1.2vw;
|
||||
margin-left: 1.2vw;
|
||||
}
|
||||
}
|
||||
|
||||
b {
|
||||
font-size: 3.867vw;
|
||||
}
|
||||
.count {
|
||||
.r;
|
||||
.box;
|
||||
gap: 12vw;
|
||||
line-height: 4.67vw;
|
||||
|
||||
a {
|
||||
.r;
|
||||
.b;
|
||||
>div {
|
||||
.box;
|
||||
.box-tb;
|
||||
.box-align-center;
|
||||
}
|
||||
}
|
||||
|
||||
._m {
|
||||
.box;
|
||||
.box-align-center;
|
||||
.box-pack-between;
|
||||
width: 100%;
|
||||
padding-right: 3.33vw;
|
||||
|
||||
.l {
|
||||
.box;
|
||||
.box-align-center;
|
||||
.box-pack-center;
|
||||
width: 28vw;
|
||||
height: 8vw;
|
||||
.b_k;
|
||||
border-radius: 4vw;
|
||||
font-size: 3.33vw;
|
||||
color: #474747;
|
||||
|
||||
span {
|
||||
.box;
|
||||
.box-tb;
|
||||
.box-align-center;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
.box;
|
||||
.center;
|
||||
|
||||
p {
|
||||
margin-left: 10vw;
|
||||
line-height: 4.5vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
._m_list {
|
||||
background-color: #ffffff;
|
||||
border-radius: 2.67vw;
|
||||
._m_ {
|
||||
margin-top: 4vw;
|
||||
|
||||
.list {
|
||||
.b_l_w;
|
||||
.b_k;
|
||||
// margin-bottom: 4vw;
|
||||
margin-bottom: 4vw;
|
||||
border-bottom: 1px solid #f5f5f580;
|
||||
padding: 3.333vw;
|
||||
.box;
|
||||
.box-tb;
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 1.6vw;
|
||||
border-radius: 2vw;
|
||||
border-bottom: 1px solid #f5f5f580;
|
||||
|
||||
>div {
|
||||
.b_l_w;
|
||||
@ -4449,94 +4457,205 @@
|
||||
}
|
||||
|
||||
.cv {
|
||||
.b_l_w;
|
||||
.f5;
|
||||
padding: 8vw 4vw;
|
||||
|
||||
>div {
|
||||
.b_l_w;
|
||||
}
|
||||
.card {
|
||||
.box;
|
||||
.box-tb;
|
||||
.box-pack-between;
|
||||
background-color: #fbf0f0;
|
||||
border-radius: 2.67vw;
|
||||
overflow: hidden;
|
||||
border: solid 1.33vw #ffffff;
|
||||
padding: 5.07vw 2.67vw;
|
||||
// height: 34.67vw;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
.top {
|
||||
background: url(/img/cv-t.png) no-repeat;
|
||||
background-size: 100% auto;
|
||||
padding: 9.07vw 6.67vw;
|
||||
height: 58.13vw;
|
||||
.bs;
|
||||
&::after {
|
||||
content: '';
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
width: 26vw;
|
||||
height: 23.33vw;
|
||||
background: url(/img/cv-i1.png) no-repeat;
|
||||
background-size: 100% auto;
|
||||
}
|
||||
|
||||
.line {
|
||||
.t {
|
||||
.box;
|
||||
.box-align-center;
|
||||
|
||||
.title {
|
||||
font-size: 4.67vw;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.explain {
|
||||
.r;
|
||||
.u_info {
|
||||
margin-left: 3.6vw;
|
||||
height: 10.4vw;
|
||||
.box;
|
||||
.box-center-center;
|
||||
padding: 0 1.2vw;
|
||||
height: 5.33vw;
|
||||
border-radius: 2.67vw;
|
||||
border: solid 0.27vw #ffffff;
|
||||
.box-tb;
|
||||
.box-pack-around;
|
||||
|
||||
img {
|
||||
width: 3.33vw;
|
||||
height: 3.33vw;
|
||||
margin-right: 1.2vw;
|
||||
b {
|
||||
font-size: 3.47vw;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
b {
|
||||
display: block;
|
||||
font-size: 8.67vw;
|
||||
margin-top: 10vw;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
background: #f5f5f5;
|
||||
padding: 0 3.33vw
|
||||
}
|
||||
|
||||
.inf_box {
|
||||
.box;
|
||||
.box-tb;
|
||||
padding: 3.73vw 3.07vw;
|
||||
background-color: #ffffff;
|
||||
border-radius: 2.67vw;
|
||||
margin-top: -6.67vw;
|
||||
|
||||
.title {
|
||||
font-size: 4vw;
|
||||
font-weight: bold;
|
||||
color: #000000;
|
||||
margin-bottom: 4vw;
|
||||
}
|
||||
|
||||
.list {
|
||||
|
||||
>div:last-child {
|
||||
border: none;
|
||||
.record {
|
||||
color: #841e36;
|
||||
}
|
||||
}
|
||||
|
||||
>div {
|
||||
.db {
|
||||
.box;
|
||||
.box-align-center;
|
||||
padding-left: 12.4vw;
|
||||
margin-top: 5.2vw;
|
||||
|
||||
.left {
|
||||
.box;
|
||||
.box-align-center;
|
||||
padding: 3.33vw 1.2vw;
|
||||
border-bottom: 1px solid #f5f5f580;
|
||||
.box-tb;
|
||||
.box-align-start;
|
||||
|
||||
img {
|
||||
width: 4.27vw;
|
||||
margin-right: 2.53vw;
|
||||
span {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
b {
|
||||
.r;
|
||||
margin-top: 1.73vw;
|
||||
display: block;
|
||||
font-size: 4.8vw;
|
||||
line-height: 3.2vw;
|
||||
color: #222222;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
.r;
|
||||
height: 6.67vw;
|
||||
border-radius: 3.33vw;
|
||||
border: solid 0.27vw #841e36;
|
||||
padding: 0 2.4vw;
|
||||
background: transparent;
|
||||
color: #841e36;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list_box {
|
||||
background-color: #ffffff;
|
||||
border-radius: 2.67vw 2.67vw 1.07vw 1.07vw;
|
||||
margin-top: 4vw;
|
||||
padding: 6vw 2.67vw;
|
||||
height: 100%;
|
||||
|
||||
.date_box {
|
||||
.box;
|
||||
.box-align-center;
|
||||
|
||||
.date {
|
||||
.box;
|
||||
.box-center-center;
|
||||
height: 8vw;
|
||||
background-color: #fbf0f0;
|
||||
border-radius: 4vw;
|
||||
padding: 0 2.8vw;
|
||||
color: #841e36;
|
||||
|
||||
img {
|
||||
height: 1.2vw;
|
||||
margin-left: 1.2vw;
|
||||
}
|
||||
}
|
||||
|
||||
.count {
|
||||
.r;
|
||||
.box;
|
||||
gap: 12vw;
|
||||
line-height: 4.67vw;
|
||||
|
||||
>div {
|
||||
.box;
|
||||
.box-tb;
|
||||
.box-align-center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.list {
|
||||
margin-top: 4vw;
|
||||
|
||||
.item {
|
||||
.box;
|
||||
.box-tb;
|
||||
padding: 3.07vw 2.67vw;
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 1.6vw;
|
||||
margin-bottom: 4vw;
|
||||
|
||||
span {
|
||||
font-size: 3.2vw;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
line-height: 4.67vw;
|
||||
letter-spacing: 0vw;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.t {
|
||||
.box;
|
||||
.box-align-center;
|
||||
margin-bottom: 1.2vw;
|
||||
|
||||
span {
|
||||
.bs;
|
||||
}
|
||||
|
||||
.tit {
|
||||
font-size: 3.47vw;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.in {
|
||||
.box;
|
||||
.box-center-center;
|
||||
.bs;
|
||||
height: 4.8vw;
|
||||
background-color: #269f3d;
|
||||
border-radius: 0.53vw;
|
||||
padding: 0 2.4vw;
|
||||
}
|
||||
|
||||
.out {
|
||||
.box;
|
||||
.box-center-center;
|
||||
.bs;
|
||||
height: 4.8vw;
|
||||
background-color: #d13c25;
|
||||
border-radius: 0.53vw;
|
||||
padding: 0 2.4vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.point {
|
||||
.top {
|
||||
background: url(/img/point_bg.jpg) no-repeat;
|
||||
background-size: 100% auto;
|
||||
|
||||
.line {
|
||||
.pn {
|
||||
color: #e8b5b6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -4554,20 +4673,25 @@
|
||||
.count {
|
||||
.box;
|
||||
.box-tb;
|
||||
background-image: linear-gradient(0deg,
|
||||
#156e3f 0%,
|
||||
#52c087 100%);
|
||||
background-color: #d1b792;
|
||||
border-radius: 2vw;
|
||||
padding: 3.33vw;
|
||||
|
||||
.num {
|
||||
font-size: 6.67vw;
|
||||
line-height: 6.4vw;
|
||||
color: #222222;
|
||||
}
|
||||
|
||||
.top {
|
||||
.box;
|
||||
.box-align-center;
|
||||
color: #222222;
|
||||
|
||||
.left {
|
||||
.box;
|
||||
.box-tb;
|
||||
.bs;
|
||||
// .box-tb;
|
||||
// .bs;
|
||||
|
||||
b {
|
||||
font-size: 3.73vw;
|
||||
@ -4586,9 +4710,10 @@
|
||||
height: 8vw;
|
||||
line-height: 8vw;
|
||||
.b_k;
|
||||
.bs;
|
||||
background-color: #1b1b1b;
|
||||
border-radius: 4vw;
|
||||
padding: 0 3.33vw;
|
||||
color: #2c8d5a;
|
||||
font-size: 4vw;
|
||||
|
||||
img {
|
||||
@ -4654,10 +4779,12 @@
|
||||
.user_box {
|
||||
.box;
|
||||
.box-align-center;
|
||||
width: 100%;
|
||||
margin-bottom: 4vw;
|
||||
background-color: #ffffff;
|
||||
border-radius: 2vw;
|
||||
padding: 3.33vw;
|
||||
padding-bottom: 0;
|
||||
|
||||
.icon {
|
||||
width: 12vw;
|
||||
@ -4669,11 +4796,13 @@
|
||||
.info {
|
||||
.box;
|
||||
.box-tb;
|
||||
width: 100%;
|
||||
|
||||
>div {
|
||||
.box;
|
||||
.box-align-center;
|
||||
margin-bottom: 2.53vw;
|
||||
margin-bottom: 3.33vw;
|
||||
width: 100%;
|
||||
|
||||
b {
|
||||
font-size: 4vw;
|
||||
@ -4712,4 +4841,138 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.allow {
|
||||
|
||||
.top {
|
||||
background: url(/img/allow_bg.jpg);
|
||||
background-size: 100% auto;
|
||||
// height: 35vw;
|
||||
padding: 12vw 4vw;
|
||||
|
||||
.tit {
|
||||
.box;
|
||||
.box-align-center;
|
||||
font-size: 4.8vw;
|
||||
color: #222222;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
margin-right: 1.2vw;
|
||||
}
|
||||
}
|
||||
|
||||
b {
|
||||
display: block;
|
||||
font-size: 8vw;
|
||||
color: #222222;
|
||||
margin-top: 5.47vw;
|
||||
}
|
||||
}
|
||||
|
||||
.content {
|
||||
background-color: #ffffff;
|
||||
border-radius: 5.33vw 5.33vw 0vw 0vw;
|
||||
margin-top: -4vw;
|
||||
padding: 4vw;
|
||||
|
||||
.t {
|
||||
font-size: 4vw;
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.list {
|
||||
.box;
|
||||
.box-tb;
|
||||
margin-top: 3.33vw;
|
||||
|
||||
.item {
|
||||
.box;
|
||||
.box-align-center;
|
||||
// height: 10vw;
|
||||
padding: 4vw 0;
|
||||
border-bottom: 1px solid #f5f5f580;
|
||||
|
||||
img {
|
||||
width: 4.53vw;
|
||||
height: 4.27vw;
|
||||
margin-right: 4vw;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 3.47vw;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.certificate {
|
||||
.f5;
|
||||
|
||||
.van-tabs__line {
|
||||
bottom: 5.5vw;
|
||||
}
|
||||
|
||||
.list {
|
||||
margin-top: 4vw;
|
||||
padding: 0 4vw;
|
||||
|
||||
.item {
|
||||
.box;
|
||||
.box-align-center;
|
||||
margin-bottom: 4vw;
|
||||
|
||||
img {
|
||||
width: 26.67vw;
|
||||
height: 26.67vw;
|
||||
}
|
||||
|
||||
.info {
|
||||
.box;
|
||||
.box-align-center;
|
||||
height: 26.67vw;
|
||||
background-color: #ffffff;
|
||||
border-radius: 1.6vw;
|
||||
width: 100%;
|
||||
padding: 5.2vw 0;
|
||||
position: relative;
|
||||
|
||||
>div {
|
||||
margin-left: 5.2vw;
|
||||
|
||||
b {
|
||||
font-size: 4.8vw;
|
||||
color: #010101;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #333333;
|
||||
margin-top: 5.2vw;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 11.6vw;
|
||||
height: 10.27vw;
|
||||
position: absolute;
|
||||
right: 2.4vw;
|
||||
}
|
||||
|
||||
button {
|
||||
position: absolute;
|
||||
right: 2.4vw;
|
||||
width: 18.67vw;
|
||||
height: 6.67vw;
|
||||
background-color: #ea3e23;
|
||||
border-radius: 1.6vw;
|
||||
border: none;
|
||||
.bs;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1098,8 +1098,11 @@ img {
|
||||
}
|
||||
|
||||
button {
|
||||
position: fixed;
|
||||
bottom: 4vw;
|
||||
|
||||
border: none;
|
||||
width: 100%;
|
||||
width: 86%;
|
||||
.bs;
|
||||
font-size: 4.53vw;
|
||||
height: 10.67vw;
|
||||
@ -1375,6 +1378,7 @@ img {
|
||||
.box-pack-between;
|
||||
font-size: 3.47vw;
|
||||
color: #303030;
|
||||
width: 100%;
|
||||
|
||||
b {
|
||||
.text-hide(1);
|
||||
@ -2163,6 +2167,7 @@ img {
|
||||
.box-align-center;
|
||||
.box-pack-between;
|
||||
margin-top: 4vw;
|
||||
white-space: nowrap;
|
||||
|
||||
>div {
|
||||
.box;
|
||||
@ -2304,20 +2309,29 @@ img {
|
||||
margin-bottom: 3.2vw;
|
||||
}
|
||||
|
||||
.active {
|
||||
background-color: #ca2904;
|
||||
.bs;
|
||||
}
|
||||
|
||||
.inactive {
|
||||
border: 1px solid #ca2904;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.spec_de {
|
||||
height: 8vw;
|
||||
background-color: #ca2904;
|
||||
border-radius: 1.07vw;
|
||||
padding: 0 4vw;
|
||||
width: max-content;
|
||||
margin-right: 2.4vw;
|
||||
.box;
|
||||
.box-center-center;
|
||||
.bs;
|
||||
}
|
||||
|
||||
.buynums {
|
||||
.box;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
.title {
|
||||
margin-bottom: 0;
|
||||
|
||||
@ -324,6 +324,15 @@ export default {
|
||||
},
|
||||
mounted() {
|
||||
this.init()
|
||||
// 解析邀请链接参数
|
||||
const params = new URLSearchParams(location.hash.split('?')[1] || '');
|
||||
const inviteCode = params.get('invite');
|
||||
if (inviteCode) {
|
||||
this.formData.Recommend = inviteCode;
|
||||
localStorage.setItem('recommend', inviteCode);
|
||||
// 有邀请码时自动切换到注册模式
|
||||
this.isReg = true;
|
||||
}
|
||||
},
|
||||
beforeUnmount() {
|
||||
if (this.countdown.timer) {
|
||||
|
||||
@ -16,8 +16,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="price_box">
|
||||
<div class="price">
|
||||
¥{{ data.saleprice?.toFixed(2) }}
|
||||
@ -60,9 +58,9 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="spec_box">
|
||||
<div class="spec_box" @click="showSpecs = true">
|
||||
<img src="/img/spec.png" alt="">
|
||||
<span>请选择规格分类</span>
|
||||
<span>{{ selectedSku }}</span>
|
||||
<van-icon class="r" name="arrow"></van-icon>
|
||||
</div>
|
||||
|
||||
@ -71,17 +69,15 @@
|
||||
<img src="/img/pro.png" alt="">
|
||||
<span>产品详情</span>
|
||||
</div>
|
||||
<div class="vhtml">
|
||||
|
||||
</div>
|
||||
<div class="vhtml" v-html="data.contents"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<van-action-bar safe-area-inset-bottom placeholder>
|
||||
<van-action-bar-icon icon="/img/vb-home.png" text="首页" @click="$navigate('Home')" />
|
||||
<van-action-bar-icon icon="/img/vb-service.png" text="客服" @click="$navigate('Service')" />
|
||||
<van-action-bar-icon icon="/img/vb-share.png" text="分享" @click="showShare = true" />
|
||||
<van-action-bar-button type="danger" text="立即购买" @click="showSpecs = true" />
|
||||
<van-action-bar-icon icon="/img/vb-service.png" text="客服" @click="$goService()" />
|
||||
<van-action-bar-icon icon="/img/vb-share.png" text="分享" @click="beforeShare" />
|
||||
<van-action-bar-button color="#ca2904" type="danger" text="立即购买" @click="showSpecs = true" />
|
||||
</van-action-bar>
|
||||
|
||||
<van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />
|
||||
@ -89,40 +85,40 @@
|
||||
<van-popup v-model:show="showSpecs" position="bottom" closeable round>
|
||||
<div class="showspec">
|
||||
<div class="goods">
|
||||
<img :src="$file(data.img)" alt="">
|
||||
<img :src="$file(tempSku.img || data.img)" alt="">
|
||||
<div>
|
||||
<div class="s_price">¥</div>
|
||||
<div class="s_stock">剩余：</div>
|
||||
<div class="s_spec">已选：</div>
|
||||
<div class="s_price">¥{{ (tempSku.saleprice * tempSku.Qty).toFixed(2) }}</div>
|
||||
<div class="s_stock">剩余：{{ tempSku.saleleft }}</div>
|
||||
<div class="s_spec">已选：{{ tempSku.skuname }}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="spec_box">
|
||||
<div class="spec_box" v-for="spec in specSelect">
|
||||
<span class="title">
|
||||
基本规格
|
||||
{{ spec.name }}
|
||||
</span>
|
||||
|
||||
<div class="speccc">
|
||||
<div class="spec_de">
|
||||
瓶
|
||||
<div v-for="child in spec.children" class="spec_de"
|
||||
:class="selectedSpecs[spec.name] === child.name ? 'active' : 'inactive'"
|
||||
@click="selectSpec(spec.name, child.name)">
|
||||
{{ child.name }}
|
||||
</div>
|
||||
<div class="spec_de">
|
||||
瓶
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="buynums">
|
||||
<span class="title">
|
||||
购买数量
|
||||
</span>
|
||||
|
||||
<van-stepper class="r" integer v-model="value" theme="round" button-size="22" disable-input />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="buynums box">
|
||||
<span class="title">
|
||||
购买数量
|
||||
</span>
|
||||
|
||||
<van-stepper class="r" integer v-model="tempSku.Qty" min="1" max="99" theme="round" button-size="22"
|
||||
disable-input />
|
||||
|
||||
</div>
|
||||
|
||||
<van-action-bar safe-area-inset-bottom placeholder>
|
||||
<van-action-bar-button color="#ca2904" type="danger" text="立即购买" @click="showSpecs = true" />
|
||||
<van-action-bar-button color="#ca2904" type="danger" text="立即购买" @click="submit" />
|
||||
</van-action-bar>
|
||||
</div>
|
||||
</van-popup>
|
||||
@ -133,19 +129,28 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { html2canvas, canvasToDataURL } from '@/utils/html2image';
|
||||
|
||||
export default {
|
||||
name: 'GoodsDetail',
|
||||
emits: ['updateShare'],
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: {},
|
||||
showShare: false,
|
||||
specSelect: [],
|
||||
specCombinations: [],
|
||||
tempSku: {},
|
||||
showSpecs: false,
|
||||
selectedSku: '请选择规格分类',
|
||||
selectedSpecs: {},
|
||||
showShare: false,
|
||||
options: [
|
||||
{ name: '分享海报', icon: '/img/share.png' },
|
||||
]
|
||||
],
|
||||
shareLink: location.origin
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
@ -156,9 +161,85 @@ export default {
|
||||
this.specCombinations = this.data.specCombinations || [];
|
||||
this.shareLink = `${location.origin}/GoodsDetail?id=${this.data.id}`;
|
||||
this.$emit('updateShare', { title: this.data.name, imageUrl: this.data.img, link: this.shareLink });
|
||||
// this.initDefaultSku();
|
||||
this.initDefaultSku();
|
||||
});
|
||||
},
|
||||
initDefaultSku() {
|
||||
const mainSku = this.specCombinations.find(s => s.ismain) || this.specCombinations[0];
|
||||
if (mainSku) {
|
||||
this.tempSku = { ...mainSku, Qty: 1 };
|
||||
this.selectedSku = "已选:" + mainSku.skuname;
|
||||
// 根据skuname设置默认选中规格
|
||||
this.specSelect.forEach(spec => {
|
||||
const child = spec.children?.find(c => mainSku.skuname.includes(c.name));
|
||||
if (child) {
|
||||
this.selectedSpecs[spec.name] = child.name;
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
selectSpec(specName, specValue) {
|
||||
this.selectedSpecs[specName] = specValue;
|
||||
this.refreshSku();
|
||||
},
|
||||
refreshSku() {
|
||||
const specKeys = Object.keys(this.selectedSpecs);
|
||||
if (specKeys.length === 0) return;
|
||||
|
||||
let matchedSku = this.specCombinations.find(combo => {
|
||||
return specKeys.every(key => {
|
||||
const spec = this.specSelect.find(s => s.name === key);
|
||||
if (!spec) return false;
|
||||
const specValue = this.selectedSpecs[key];
|
||||
return combo.skuname === specValue;
|
||||
});
|
||||
});
|
||||
|
||||
if (matchedSku) {
|
||||
this.tempSku = { ...matchedSku, Qty: this.tempSku.Qty || 1 };
|
||||
this.selectedSku = "已选:" + matchedSku.skuname;
|
||||
}
|
||||
},
|
||||
onSelect(option) {
|
||||
this.showShare = false;
|
||||
if (option.name === "分享海报") {
|
||||
this.generateShareImg();
|
||||
} else if (option.name == "复制链接") {
|
||||
this.$copyText(location.href);
|
||||
this.$showToast({ type: "success", message: "复制成功" });
|
||||
} else if (option.name == "分享好友") {
|
||||
this.showTip = true;
|
||||
}
|
||||
},
|
||||
submit() {
|
||||
if (this.tempSku.saleleft < 1) {
|
||||
this.$showFailToast("该规格库存不足，无法购买");
|
||||
return;
|
||||
}
|
||||
this.$navigate(`/TradeConfirm?id=${this.data.id}&buynums=${this.tempSku.Qty}`);
|
||||
},
|
||||
beforeShare() {
|
||||
this.showShare = true;
|
||||
},
|
||||
async generateShareImg() {
|
||||
var shareContent = document.querySelector('#bsCard');
|
||||
if (!shareContent) return;
|
||||
var width = shareContent.offsetWidth;
|
||||
var height = shareContent.offsetHeight;
|
||||
try {
|
||||
var canvas = await html2canvas(shareContent, {
|
||||
scale: 2,
|
||||
width: width,
|
||||
height: height,
|
||||
useCORS: true,
|
||||
allowTaint: true,
|
||||
});
|
||||
this.ShareImg = canvasToDataURL(canvas, "image/png", 1.0);
|
||||
this.showShareImg = true;
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -8,41 +8,52 @@
|
||||
<p>账号：{{ data.MerchantPhone }}</p>
|
||||
</div>
|
||||
|
||||
<div class="service-box" @click="$navigate('Service')">
|
||||
<img class="icon" src="/img/service-icon.png" alt="">
|
||||
专属顾问
|
||||
<div class="service-box" @click="$showManagerPopup()">
|
||||
管理中心
|
||||
<van-icon name="arrow"></van-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="wallet">
|
||||
<b>
|
||||
我的钱包
|
||||
</b>
|
||||
<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('MerchantIncome')">
|
||||
<div class="ll" @click="$navigate('Balance')">
|
||||
<span>
|
||||
当前营业收入<van-icon name="arrow"></van-icon>
|
||||
可用余额<van-icon name="arrow"></van-icon>
|
||||
</span>
|
||||
<b>{{ data.Income?.toFixed(2) }}</b>
|
||||
</div>
|
||||
<div class="ll" @click="$navigate('Voucher?type=merchant')">
|
||||
<div class="ll" @click="$navigate('CV')">
|
||||
<span>
|
||||
消费券累计<van-icon name="arrow"></van-icon>
|
||||
会员卡额度<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')">
|
||||
<!-- <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>
|
||||
<div class="_r">
|
||||
<div class="d2" @click="$navigate('MerchantTrade')">
|
||||
<b>订单记录</b>
|
||||
@ -58,6 +69,23 @@
|
||||
</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">
|
||||
@ -81,7 +109,7 @@
|
||||
|
||||
<div class="item">
|
||||
<span>
|
||||
今日抵扣积分
|
||||
今日应收（元）
|
||||
</span>
|
||||
<b>{{ data.TodayDeduct?.toFixed(2) }}</b>
|
||||
<p>昨日<span>{{ data.YesterdayDeduct?.toFixed(2) }}</span></p>
|
||||
@ -97,36 +125,58 @@
|
||||
|
||||
<div class="item">
|
||||
<span>
|
||||
本月收入（元）
|
||||
今日惠利金额（元）
|
||||
</span>
|
||||
<b>{{ data.MonthIncome?.toFixed(2) }}</b>
|
||||
<p>上月<span>{{ data.PrevMonthIncome?.toFixed(2) }}</span></p>
|
||||
<p>昨日<span>{{ data.PrevMonthIncome?.toFixed(2) }}</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="back" @click="$showManagerPopup()">
|
||||
返回个人中心
|
||||
</button>
|
||||
|
||||
|
||||
</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() {
|
||||
this.init();
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showInfo: false,
|
||||
showBottom: false,
|
||||
paycodeImg: '',
|
||||
isCapturing: false,
|
||||
link: '',
|
||||
data: {
|
||||
id: 'merchant_001',
|
||||
MerchantAvatar: '/img/co-1.png',
|
||||
MerchantAvatar: '',
|
||||
MerchantName: '泰古润直营店',
|
||||
MerchantPhone: '13800138000',
|
||||
Income: 12868.50,
|
||||
@ -143,11 +193,137 @@ export default {
|
||||
},
|
||||
States: 0,
|
||||
expiring: 3,
|
||||
loading: false,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</style>
|
||||
@ -4,7 +4,7 @@
|
||||
<div class="xzdz" @click="$refs.ad_selector.showSelector()">
|
||||
<img src="/img/addr.png" alt="">
|
||||
|
||||
<span v-if="address.ReceiveName">
|
||||
<span style="color: #333;" v-if="address.ReceiveName">
|
||||
<p>
|
||||
{{ address.ReceiveName }}
|
||||
{{ address.ReceivePhone }}
|
||||
@ -41,7 +41,7 @@
|
||||
<div class="top">
|
||||
<span>商品金额</span>
|
||||
<b class="r"><span>￥</span>{{ ((product.saleprice || 0) * (product.buynums || 1))?.toFixed(2)
|
||||
}}</b>
|
||||
}}</b>
|
||||
</div>
|
||||
<van-radio-group v-model="checked" checked-color="#ca2904">
|
||||
<van-radio name="1" label-position="left">
|
||||
@ -142,18 +142,29 @@ export default {
|
||||
},
|
||||
methods: {
|
||||
loadProduct() {
|
||||
this.$get(`/v1/client/EProsClient/${this.$route.query.id}`).then(res => {
|
||||
const id = this.$route.query.id;
|
||||
const skuid = this.$route.query.skuid;
|
||||
this.$get(`/v1/client/EProsClient/${id}`).then(res => {
|
||||
const data = res.data;
|
||||
const skuid = this.$route.query.skuid;
|
||||
const sku = (data.specCombinations || []).find(s => s.skuid == skuid);
|
||||
// 从规格组合中找到匹配的SKU
|
||||
let sku = null;
|
||||
if (skuid && data.specCombinations) {
|
||||
sku = data.specCombinations.find(s => String(s.skuid) === String(skuid));
|
||||
}
|
||||
if (!sku && data.specCombinations?.length) {
|
||||
sku = data.specCombinations[0];
|
||||
}
|
||||
this.product = {
|
||||
...data,
|
||||
skuid: sku?.skuid,
|
||||
skuname: sku?.skuname,
|
||||
saleprice: sku?.saleprice,
|
||||
originalprice: sku?.originalprice,
|
||||
id: data.id,
|
||||
name: data.name,
|
||||
img: sku?.img || data.img,
|
||||
buynums: 1
|
||||
saleprice: sku?.saleprice || data.saleprice,
|
||||
originalprice: sku?.originalprice || data.originalprice,
|
||||
skuid: sku?.skuid,
|
||||
skuname: sku?.skuname || '默认规格',
|
||||
buynums: parseInt(this.$route.query.buynums) || 1,
|
||||
typename: data.typename || '商品',
|
||||
expressprice: data.expressprice || 0
|
||||
};
|
||||
});
|
||||
},
|
||||
|
||||
56
src/views/User/Allow.vue
Normal file
56
src/views/User/Allow.vue
Normal file
@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<BasePage>
|
||||
<div class="allow">
|
||||
<div class="top">
|
||||
<div class="tit">
|
||||
<span>礼包业绩总累计</span>
|
||||
<van-icon name="question-o" @click.stop="showTerm = true"></van-icon>
|
||||
</div>
|
||||
|
||||
<b>4000.00</b>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<div class="t">
|
||||
业绩统计
|
||||
</div>
|
||||
|
||||
<div class="list">
|
||||
<div class="item">
|
||||
<img src="/img/allow.png" alt="">
|
||||
<span>
|
||||
自己礼包消费业绩
|
||||
</span>
|
||||
<span class="r"></span>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<img src="/img/allow.png" alt="">
|
||||
<span>
|
||||
网体礼包消费业绩
|
||||
</span>
|
||||
<span class="r"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<van-action-sheet v-model:show="showTerm" safe-area-inset-bottom :title="`礼包业绩说明`" closeable
|
||||
style="min-height: 50%; padding: 0px 10px 10px 10px">
|
||||
<div class="w100 html" v-html="data.Term" />
|
||||
</van-action-sheet>
|
||||
</div>
|
||||
</BasePage>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
showTerm: false,
|
||||
data: {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<BasePage>
|
||||
<div class="asset asset-1">
|
||||
<!-- <div class="asset asset-1">
|
||||
<div class="t">
|
||||
<a @click.stop="$navigate('/CashoutRecord?Area=Balance')" class="a">
|
||||
<img src="/img/asset-i1.png" />
|
||||
@ -57,7 +57,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <van-tabs v-model:active="searchParams.RecordSource" class="balance-tabs" type="card"
|
||||
<van-tabs v-model:active="searchParams.RecordSource" class="balance-tabs" type="card"
|
||||
background="transparent" color="#ff5e5e" title-inactive-color="#313131" title-active-color="#fff"
|
||||
@click="changeTabs">
|
||||
<van-tab title="全部" name=""></van-tab>
|
||||
@ -65,7 +65,7 @@
|
||||
<van-tab title="分享补贴" name="direct"></van-tab>
|
||||
<van-tab title="管理补贴" name="subsidy"></van-tab>
|
||||
<van-tab title="销售分成" name="sale"></van-tab>
|
||||
</van-tabs> -->
|
||||
</van-tabs>
|
||||
|
||||
<BaseList ref="baselist" url="/v1/client/DUsermoneysClient" class="_m_" :params="searchParams">
|
||||
<template #default="{ item }">
|
||||
@ -114,56 +114,169 @@
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
</BaseList>
|
||||
<!-- <div class="_m" style="padding-top: 0;">
|
||||
<div class="b_l_w">
|
||||
<div v-for="item in list" :key="item.TradeCode" class="list">
|
||||
<table width="100%" cellpadding="0" cellspacing="0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div style="margin-bottom: 2vw;">{{ $route.meta.title }}：{{
|
||||
item.CurValue?.toFixed(2) }}</div>
|
||||
</td>
|
||||
<td style="text-align: right;">
|
||||
<van-tag :type="item.OpeType == '1' ? 'primary' : 'danger'"
|
||||
style="margin-bottom: 2vw;">
|
||||
{{ item.OpeType == "1" ? "增加：+" : "减少：-"
|
||||
}}{{ (item.RecordValue).toFixed(2) }}
|
||||
</van-tag>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="item.Remark">
|
||||
<td colspan="2">
|
||||
<div style="line-height: 5vw;word-break: break-all; color: #999">
|
||||
备注：{{ item.Remark }}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="item.TradeCode">
|
||||
<td colspan="2">
|
||||
<div
|
||||
style="line-height: 5vw;word-break: break-all;color: #999;display: inline;">
|
||||
订单：{{ item.TradeCode }}
|
||||
</div>
|
||||
<u style="color: #535353; margin-left: 1.667vw"
|
||||
@click="$copyText(item.TradeCode); $showSuccessToast('复制成功')">复制</u>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<div
|
||||
style="line-height: 5vw;word-break: break-all;color: #999;display: inline;">
|
||||
时间：{{ $date.dateformat(item.CTime, true) }}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</BaseList>
|
||||
<div class="_m" style="padding-top: 0;">
|
||||
<div class="b_l_w">
|
||||
<div v-for="item in list" :key="item.TradeCode" class="list">
|
||||
<table width="100%" cellpadding="0" cellspacing="0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div style="margin-bottom: 2vw;">{{ $route.meta.title }}：{{
|
||||
item.CurValue?.toFixed(2) }}</div>
|
||||
</td>
|
||||
<td style="text-align: right;">
|
||||
<van-tag :type="item.OpeType == '1' ? 'primary' : 'danger'" style="margin-bottom: 2vw;">
|
||||
{{ item.OpeType == "1" ? "增加：+" : "减少：-"
|
||||
}}{{ (item.RecordValue).toFixed(2) }}
|
||||
</van-tag>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="item.Remark">
|
||||
<td colspan="2">
|
||||
<div style="line-height: 5vw;word-break: break-all; color: #999">
|
||||
备注：{{ item.Remark }}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="item.TradeCode">
|
||||
<td colspan="2">
|
||||
<div style="line-height: 5vw;word-break: break-all;color: #999;display: inline;">
|
||||
订单：{{ item.TradeCode }}
|
||||
</div>
|
||||
<u style="color: #535353; margin-left: 1.667vw"
|
||||
@click="$copyText(item.TradeCode); $showSuccessToast('复制成功')">复制</u>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<div style="line-height: 5vw;word-break: break-all;color: #999;display: inline;">
|
||||
时间：{{ $date.dateformat(item.CTime, true) }}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<div class="balance">
|
||||
<div class="top">
|
||||
<div class="line">
|
||||
<b class="tit">
|
||||
当前余额 <van-icon name="question-o" @click.stop="showTerm = true"></van-icon>
|
||||
</b>
|
||||
|
||||
<div class="co_box">
|
||||
<img src="/img/co_icon.png" alt="">
|
||||
<span>提现记录</span>
|
||||
<van-icon name="arrow"></van-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
<div class="line">
|
||||
<b class="num">
|
||||
{{ data.total.totalsum?.toFixed(2) }}
|
||||
</b>
|
||||
|
||||
<button class="r" @click="$navigate('Cashout')">
|
||||
提现
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="pn">
|
||||
累计收入:
|
||||
<p>{{ data.total?.positivesum?.toFixed(2) }}</p>
|
||||
</div>
|
||||
<div class="r pn">
|
||||
累计支出:
|
||||
<p>{{ Math.abs((data.total?.negativesum))?.toFixed(2) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="botom">
|
||||
<div class="date_box">
|
||||
<div class="date" @click="showDate = true">
|
||||
{{ date[0] }}-
|
||||
<p>{{ (parseInt(date[1]) < 10) ? `0${parseInt(date[1])}` : parseInt(date[1]) }}</p>
|
||||
<img src="/img/down.png" alt="">
|
||||
</div>
|
||||
|
||||
<div class="count">
|
||||
<div>
|
||||
<span>收入</span>
|
||||
<p> {{ data.total?.positivesumcurrent?.toFixed(2) }}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span>支出</span>
|
||||
<p> {{ Math.abs((data.total?.negativesumcurrent))?.toFixed(2) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<van-tabs v-model:active="active" type="card" class="tabs" color="#374c6d">
|
||||
<van-tab title="全部"></van-tab>
|
||||
<van-tab title="礼包"></van-tab>
|
||||
<van-tab title="商家"></van-tab>
|
||||
<van-tab title="商城"></van-tab>
|
||||
<van-tab title="分成"></van-tab>
|
||||
</van-tabs>
|
||||
|
||||
<BaseList ref="baselist" url="/v1/client/DUsermoneysClient" class="_m_" :params="searchParams">
|
||||
<template #default="{ item }">
|
||||
<div class="list" :key="item.TradeCode">
|
||||
<table width="100%" cellpadding="0" cellspacing="0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div style="margin-bottom: 2vw;">{{ $route.meta.title }}：{{
|
||||
item.balance?.toFixed(2) }}</div>
|
||||
</td>
|
||||
<td style="text-align: right;">
|
||||
<van-tag :type="item.nums > 0 ? 'primary' : 'danger'"
|
||||
style="margin-bottom: 2vw;">
|
||||
{{ item.nums > 0 ? "增加：+" : "减少："
|
||||
}}{{ (item.nums).toFixed(2) }}
|
||||
</van-tag>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="item.remark">
|
||||
<td colspan="2">
|
||||
<div style="line-height: 5vw;word-break: break-all; color: #999">
|
||||
备注：{{ item.remark }}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="item.ordernum">
|
||||
<td colspan="2">
|
||||
<div
|
||||
style="line-height: 5vw;word-break: break-all;color: #999;display: inline;">
|
||||
订单：{{ item.ordernum }}
|
||||
</div>
|
||||
<u style="color: #535353; margin-left: 1.667vw"
|
||||
@click="$copyText(item.ordernum); $showSuccessToast('复制成功')">复制</u>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<div
|
||||
style="line-height: 5vw;word-break: break-all;color: #999;display: inline;">
|
||||
时间：{{ $formatGMT(item.addtime, 'yyyy-MM-dd HH:mm:ss') }}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
</BaseList>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<van-popup v-model:show="showDate" position="bottom">
|
||||
<van-date-picker v-model="currentDate" title="选择年月" :columns-type="['year', 'month']" @confirm="onconfirm"
|
||||
@cancel="showDate = false" />
|
||||
@ -176,8 +289,6 @@
|
||||
</BasePage>
|
||||
</template>
|
||||
<script>
|
||||
import BaseList from '../../components/BaseList.vue';
|
||||
|
||||
export default {
|
||||
name: 'Balance',
|
||||
mounted() {
|
||||
@ -185,6 +296,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
active: 0,
|
||||
data: {
|
||||
total: {
|
||||
Balance: 8888.88,
|
||||
|
||||
@ -1,154 +1,123 @@
|
||||
<template>
|
||||
<BasePage>
|
||||
<div class="cv">
|
||||
<div class="top">
|
||||
<div class="line">
|
||||
<span class="title">
|
||||
当前贡献值统计
|
||||
</span>
|
||||
<div class="explain" @click="showTerm = true">
|
||||
<img src="/img/explain.png" alt="">
|
||||
贡献值说明
|
||||
<div class="card">
|
||||
<div class="t">
|
||||
<img style="height: 10.4vw;" src="/img/logo.png" alt="">
|
||||
<div class="u_info">
|
||||
<b>会员卡<van-icon style="margin-left: 1.2vw;" name="question-o" @click.stop="showTerm = true"></van-icon></b>
|
||||
<span>123456789</span>
|
||||
</div>
|
||||
|
||||
<div class="record r">
|
||||
赠卡记录
|
||||
<van-icon name="arrow"></van-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<b>
|
||||
{{ (data.gongxianzhi + data.maxgongxianzhi + data.othersgongxianzhi)?.toFixed(2) }}
|
||||
</b>
|
||||
<div class="db">
|
||||
<div class="left">
|
||||
<span>余额（元）</span>
|
||||
<b>{{ data.totalsum?.toFixed(2) }}</b>
|
||||
</div>
|
||||
|
||||
<button>
|
||||
赠卡
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="inf_box">
|
||||
<span class="title">
|
||||
团队贡献值构成
|
||||
</span>
|
||||
<div class="list_box">
|
||||
<div class="date_box">
|
||||
<div class="date" @click="showDate = true">
|
||||
{{ date[0] }}-
|
||||
<p>{{ (parseInt(date[1]) < 10) ? `0${parseInt(date[1])}` : parseInt(date[1]) }}</p>
|
||||
<img src="/img/down-one.png" alt="">
|
||||
</div>
|
||||
|
||||
<div class="list">
|
||||
<div class="count">
|
||||
<div>
|
||||
<img src="/img/cv-i1.png" alt="">
|
||||
<span>个人贡献值累计</span>
|
||||
<b>{{ (data.gongxianzhi)?.toFixed(2) }}</b>
|
||||
<span>收入</span>
|
||||
<p> {{ data?.positivesumcurrent?.toFixed(2) }}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<img src="/img/cv-i2.png" alt="">
|
||||
<span>网体大部门贡献值累计</span>
|
||||
<b>{{ (data.maxgongxianzhi)?.toFixed(2) }}</b>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<img src="/img/cv-i3.png" alt="">
|
||||
<span>网体其他部门贡献值累计</span>
|
||||
<b>{{ (data.othersgongxianzhi)?.toFixed(2) }}</b>
|
||||
<span>支出</span>
|
||||
<p> {{ Math.abs((data?.negativesumcurrent))?.toFixed(2) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<BaseList ref="baselist" url="/v1/client/DUserxiaofeiquansClient" class="list" :params="searchParams">
|
||||
<template #default="{ item }">
|
||||
<div class="item">
|
||||
<div class="t">
|
||||
<span class="tit">当前额度：{{ item.balance?.toFixed(2) }}</span>
|
||||
<span :class="item.nums > 0 ? 'in' : 'out'" class="r">
|
||||
<span v-if="item.nums > 0">增加：+</span>
|
||||
<span v-else>减少：</span>
|
||||
{{ item.nums }}
|
||||
</span>
|
||||
</div>
|
||||
<span>
|
||||
备注：{{ item.remark }}
|
||||
</span>
|
||||
<span>
|
||||
订单：{{ item.ordernum }}
|
||||
</span>
|
||||
<span>
|
||||
时间：{{ $formatGMT(item.addtime, 'yyyy-dd-MM HH:ss') }}
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
</BaseList>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<van-popup v-model:show="showDate" position="bottom">
|
||||
<van-date-picker v-model="currentDate" title="选择年月" :columns-type="['year', 'month']" @confirm="onconfirm"
|
||||
@cancel="showDate = false" />
|
||||
</van-popup>
|
||||
<van-action-sheet v-model:show="showTerm" safe-area-inset-bottom :title="`${this.$route.meta.title}说明`" closeable
|
||||
style="min-height: 50%; padding: 0px 10px 10px 10px">
|
||||
<div class="w100 html" v-html="data.Term" />
|
||||
</van-action-sheet>
|
||||
</BasePage>
|
||||
|
||||
|
||||
<van-action-sheet v-model:show="showTerm" safe-area-inset-bottom :title="`贡献值说明`" closeable
|
||||
style="min-height: 50%; padding: 0px 10px 10px 10px">
|
||||
<div class="w100 html" v-html="data.Term" />
|
||||
</van-action-sheet>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Point',
|
||||
mounted() {
|
||||
this.getCVList();
|
||||
this.init();
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: {
|
||||
total: {
|
||||
Balance: 3680.50,
|
||||
TotalBalance: 10000.00,
|
||||
MonthBalance: 1250.00,
|
||||
MonthReduceBalance: 569.50,
|
||||
},
|
||||
Term: '贡献值说明：贡献值可用于升级会员、兑换礼品等。',
|
||||
},
|
||||
showDate: false,
|
||||
showTerm: false,
|
||||
data: {},
|
||||
date: [`${new Date().getFullYear()}`, `${new Date().getMonth() + 1}`],
|
||||
currentDate: [`${new Date().getFullYear()}`, `${new Date().getMonth() + 1}`],
|
||||
show: false,
|
||||
showDate: false,
|
||||
searchParams: {
|
||||
WalletType: this.$route.query.type || 'CV',
|
||||
RecordSource: '',
|
||||
Year: new Date().getFullYear(),
|
||||
Month: new Date().getMonth() + 1,
|
||||
// type: 'Balance',
|
||||
year: new Date().getFullYear(),
|
||||
month: new Date().getMonth() + 1,
|
||||
},
|
||||
loading: false,
|
||||
showTerm: false,
|
||||
list: [
|
||||
{
|
||||
CurValue: 200.00,
|
||||
OpeType: '1',
|
||||
RecordValue: 200.00,
|
||||
Remark: '完成任务奖励',
|
||||
TradeCode: 'CV202604200001',
|
||||
CTime: '2026-04-20 10:00:00',
|
||||
},
|
||||
{
|
||||
CurValue: 80.00,
|
||||
OpeType: '1',
|
||||
RecordValue: 80.00,
|
||||
Remark: '邀请新用户贡献',
|
||||
TradeCode: 'CV202604200002',
|
||||
CTime: '2026-04-20 11:30:00',
|
||||
},
|
||||
{
|
||||
CurValue: 150.00,
|
||||
OpeType: '2',
|
||||
RecordValue: 150.00,
|
||||
Remark: '兑换礼品',
|
||||
TradeCode: 'CV202604190001',
|
||||
CTime: '2026-04-19 14:00:00',
|
||||
},
|
||||
{
|
||||
CurValue: 50.00,
|
||||
OpeType: '1',
|
||||
RecordValue: 50.00,
|
||||
Remark: '每日签到奖励',
|
||||
TradeCode: 'CV202604190002',
|
||||
CTime: '2026-04-19 09:00:00',
|
||||
},
|
||||
{
|
||||
CurValue: 300.00,
|
||||
OpeType: '1',
|
||||
RecordValue: 300.00,
|
||||
Remark: '团队业绩奖励',
|
||||
TradeCode: 'CV202604180001',
|
||||
CTime: '2026-04-18 16:30:00',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getCVList() {
|
||||
this.$get('/v1/client/DUsergongxianzhisClient/statistics').then(data => {
|
||||
// this.list = data.data.items;
|
||||
this.data = data.data;
|
||||
// console.log(data);
|
||||
|
||||
}).catch(err => {
|
||||
this.$showFailToast(err.message || '加载失败');
|
||||
});
|
||||
},
|
||||
onconfirm(value) {
|
||||
this.date = this.currentDate;
|
||||
this.showDate = false;
|
||||
this.searchParams.Year = Number.parseInt(this.currentDate[0]);
|
||||
this.searchParams.Month = Number.parseInt(this.currentDate[1]);
|
||||
this.searchParams.year = Number.parseInt(this.currentDate[0]);
|
||||
this.searchParams.month = Number.parseInt(this.currentDate[1]);
|
||||
this.init();
|
||||
this.$refs.baselist.refresh()
|
||||
},
|
||||
changeTabs(e) {
|
||||
this.show = false;
|
||||
},
|
||||
onShowTerm() {
|
||||
this.showTerm = true;
|
||||
init() {
|
||||
this.$get('/v1/client/DUserxiaofeiquansClient/statistics', this.searchParams).then(res => {
|
||||
this.data = res.data;
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
52
src/views/User/Certificate.vue
Normal file
52
src/views/User/Certificate.vue
Normal file
@ -0,0 +1,52 @@
|
||||
<template>
|
||||
<BasePage>
|
||||
<div class="certificate">
|
||||
<van-tabs v-model:active="active" background="#fff" color="#ea3e23" line-height="1.07vw" line-width="5.33vw"
|
||||
title-active-color="#ea3e23">
|
||||
<van-tab title="全部"></van-tab>
|
||||
<van-tab title="待核销"></van-tab>
|
||||
<van-tab title="已核销"></van-tab>
|
||||
</van-tabs>
|
||||
|
||||
<div class="list">
|
||||
<div class="item">
|
||||
<img src="/img/certificate.png" alt="">
|
||||
<div class="info">
|
||||
<div>
|
||||
<b>礼品券</b>
|
||||
<p>券码：123456789</p>
|
||||
</div>
|
||||
<button>
|
||||
去核销
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<img src="/img/certificate.png" alt="">
|
||||
<div class="info">
|
||||
<div>
|
||||
<b>礼品券</b>
|
||||
<p>券码：123456789</p>
|
||||
</div>
|
||||
<button v-if="check">
|
||||
去核销
|
||||
</button>
|
||||
<img v-else src="/img/check.png" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</BasePage>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0,
|
||||
check: false,
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -5,11 +5,13 @@
|
||||
<div class="d1">
|
||||
<div class="w100">
|
||||
<!-- <img id="invite_bg" :src="$file(data.Icon)" /> -->
|
||||
<img id="invite_bg" src="/img/invite_bg.jpg">
|
||||
<img id="invite_bg" src="/img/invite_bg.jpg" crossorigin="anonymous">
|
||||
</div>
|
||||
<img class="icon" :src="$file(data.Avatar)">
|
||||
<img class="icon" :src="$file(data.Avatar) + '?t=1'" crossorigin="anonymous">
|
||||
<div class="name">
|
||||
<b>{{ $substring(data.NickName, 0, 8) }}</b>
|
||||
<p>邀请你使用泰古润平台<br>
|
||||
共赴葡园品鉴醇香</p>
|
||||
</div>
|
||||
<div class="ewm_test box box-tb box-align-center">
|
||||
<vue-qr v-if="!loading" :text="link" backgroundColor="rgb(255,255,255)"
|
||||
@ -26,6 +28,7 @@
|
||||
|
||||
<script>
|
||||
import { html2canvas, canvasToDataURL } from '@/utils/html2image';
|
||||
import { useUserStore } from '@/stores/user';
|
||||
|
||||
export default {
|
||||
name: 'Invite',
|
||||
@ -34,30 +37,66 @@ export default {
|
||||
loading: true,
|
||||
data: {
|
||||
Icon: '',
|
||||
Avatar: '/img/avatar.png',
|
||||
NickName: '123123',
|
||||
Avatar: '',
|
||||
NickName: '',
|
||||
},
|
||||
link: '123',
|
||||
link: '',
|
||||
userStore: useUserStore(),
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.loading = false;
|
||||
document.getElementById("invite_bg").onload = () => {
|
||||
this.CreatePoster(".ewm_bg > div", "#sc_ewm");
|
||||
};
|
||||
this.init().then(() => {
|
||||
// 等数据和二维码都准备好后再生成海报
|
||||
this.$nextTick(() => {
|
||||
const img = document.getElementById("invite_bg");
|
||||
if (img.complete) {
|
||||
this.CreatePoster(".ewm_bg > div", "#sc_ewm");
|
||||
} else {
|
||||
img.onload = () => this.CreatePoster(".ewm_bg > div", "#sc_ewm");
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
async init() {
|
||||
try {
|
||||
// 获取用户信息
|
||||
const userInfo = await this.$get('/v1/client/DUsersClient');
|
||||
if (userInfo?.data) {
|
||||
this.data.Avatar = userInfo.data.userimg || '';
|
||||
this.data.NickName = userInfo.data.nickname || '';
|
||||
this.data.Icon = userInfo.data.Icon || '';
|
||||
}
|
||||
// 生成包含邀请码的链接
|
||||
const inviteCode = userInfo?.data?.cellphone || '';
|
||||
this.link = `${location.origin}${location.pathname}#/Login?invite=${inviteCode}`;
|
||||
} catch (err) {
|
||||
console.error('获取用户信息失败:', err);
|
||||
}
|
||||
},
|
||||
async CreatePoster(divID, targetID) {
|
||||
var shareContent = document.querySelector(divID);
|
||||
var width = shareContent.offsetWidth;
|
||||
var height = shareContent.offsetHeight;
|
||||
|
||||
try {
|
||||
// 等待头像图片加载完成
|
||||
const avatarImg = shareContent.querySelector('.icon');
|
||||
if (avatarImg && !avatarImg.complete) {
|
||||
await new Promise((resolve, reject) => {
|
||||
avatarImg.onload = resolve;
|
||||
avatarImg.onerror = resolve; // 加载失败也继续
|
||||
setTimeout(resolve, 5000); // 超时也继续
|
||||
});
|
||||
}
|
||||
|
||||
var canvas = await html2canvas(shareContent, {
|
||||
scale: 2,
|
||||
width: width,
|
||||
height: height,
|
||||
useCORS: true,
|
||||
allowTaint: false,
|
||||
});
|
||||
var dataUrl = canvasToDataURL(canvas, "image/png", 1.0);
|
||||
var newImg = document.createElement("img");
|
||||
@ -88,38 +127,39 @@ export default {
|
||||
|
||||
.name {
|
||||
position: absolute;
|
||||
bottom: 78.067vw;
|
||||
left: 20.27vw;
|
||||
bottom: 25.6vw;
|
||||
line-height: 6vw;
|
||||
width: 100%;
|
||||
|
||||
b {
|
||||
font-size: 4.8vw;
|
||||
color: #1d3437;
|
||||
font-size: 3.47vw;
|
||||
color: #3a0a05;
|
||||
}
|
||||
|
||||
p {
|
||||
color: #1d3437;
|
||||
font-size: 3.2vw;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
position: absolute;
|
||||
width: 16.8vw;
|
||||
height: 16.8vw;
|
||||
left: 41.467vw;
|
||||
bottom: 86.933vw;
|
||||
width: 10.67vw;
|
||||
height: 10.67vw;
|
||||
left: 20.27vw;
|
||||
bottom: 42vw;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.ewm_test {
|
||||
position: absolute;
|
||||
left: 30vw;
|
||||
bottom: 28.133vw;
|
||||
left: 23.73vw;
|
||||
bottom: 57.47vw;
|
||||
white-space: nowrap;
|
||||
|
||||
img {
|
||||
width: 39.333vw;
|
||||
height: 39.333vw;
|
||||
width: 52.53vw;
|
||||
height: 52.53vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -32,7 +32,7 @@
|
||||
</div>
|
||||
|
||||
<div class="wallet_box">
|
||||
<div>
|
||||
<div @click="$navigate('Balance')">
|
||||
<div class="t">
|
||||
<img src="/img/my_w1.png" alt="">
|
||||
<span>余额</span>
|
||||
@ -40,7 +40,7 @@
|
||||
<b>1377.00</b>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div @click="$navigate('CV')">
|
||||
<div class="t">
|
||||
<img src="/img/my_w2.png" alt="">
|
||||
<span>会员卡额度</span>
|
||||
@ -48,7 +48,7 @@
|
||||
<b>13777.00</b>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div @click="$navigate('Point')">
|
||||
<div class="t">
|
||||
<img src="/img/my_w3.png" alt="">
|
||||
<span>积分</span>
|
||||
|
||||
174
src/views/User/Point.vue
Normal file
174
src/views/User/Point.vue
Normal file
@ -0,0 +1,174 @@
|
||||
<template>
|
||||
<BasePage>
|
||||
|
||||
<div class="balance point">
|
||||
<div class="top">
|
||||
<div class="line">
|
||||
<b class="tit">
|
||||
当前积分 <van-icon name="question-o" @click.stop="showTerm = true"></van-icon>
|
||||
</b>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<b class="num">
|
||||
{{ data.total.totalsum?.toFixed(2) }}
|
||||
</b>
|
||||
</div>
|
||||
|
||||
<div class="line">
|
||||
<div class="pn">
|
||||
累计收入:
|
||||
<p>{{ data.total?.positivesum?.toFixed(2) }}</p>
|
||||
</div>
|
||||
<div class="r pn">
|
||||
累计支出:
|
||||
<p>{{ Math.abs((data.total?.negativesum))?.toFixed(2) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="botom">
|
||||
<div class="date_box">
|
||||
<div class="date" @click="showDate = true">
|
||||
{{ date[0] }}-
|
||||
<p>{{ (parseInt(date[1]) < 10) ? `0${parseInt(date[1])}` : parseInt(date[1]) }}</p>
|
||||
<img src="/img/down.png" alt="">
|
||||
</div>
|
||||
|
||||
<div class="count">
|
||||
<div>
|
||||
<span>收入</span>
|
||||
<p> {{ data.total?.positivesumcurrent?.toFixed(2) }}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<span>支出</span>
|
||||
<p> {{ Math.abs((data.total?.negativesumcurrent))?.toFixed(2) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!--
|
||||
<van-tabs v-model:active="active" type="card" class="tabs" color="#374c6d">
|
||||
<van-tab title="全部"></van-tab>
|
||||
<van-tab title="礼包"></van-tab>
|
||||
<van-tab title="商家"></van-tab>
|
||||
<van-tab title="商城"></van-tab>
|
||||
<van-tab title="分成"></van-tab>
|
||||
</van-tabs> -->
|
||||
|
||||
<BaseList ref="baselist" url="/v1/client/DUserxiaofeijifensClient" class="_m_" :params="searchParams">
|
||||
<template #default="{ item }">
|
||||
<div class="list" :key="item.TradeCode">
|
||||
<table width="100%" cellpadding="0" cellspacing="0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div style="margin-bottom: 2vw;">{{ $route.meta.title }}：{{
|
||||
item.balance?.toFixed(2) }}</div>
|
||||
</td>
|
||||
<td style="text-align: right;">
|
||||
<van-tag :type="item.nums > 0 ? 'primary' : 'danger'" style="margin-bottom: 2vw;">
|
||||
{{ item.nums > 0 ? "增加：+" : "减少："
|
||||
}}{{ (item.nums).toFixed(2) }}
|
||||
</van-tag>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="item.remark">
|
||||
<td colspan="2">
|
||||
<div style="line-height: 5vw;word-break: break-all; color: #999">
|
||||
备注：{{ item.remark }}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="item.ordernum">
|
||||
<td colspan="2">
|
||||
<div style="line-height: 5vw;word-break: break-all;color: #999;display: inline;">
|
||||
订单：{{ item.ordernum }}
|
||||
</div>
|
||||
<u style="color: #535353; margin-left: 1.667vw"
|
||||
@click="$copyText(item.ordernum); $showSuccessToast('复制成功')">复制</u>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<div style="line-height: 5vw;word-break: break-all;color: #999;display: inline;">
|
||||
时间：{{ $formatGMT(item.addtime, 'yyyy-MM-dd HH:mm:ss') }}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
</BaseList>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<van-popup v-model:show="showDate" position="bottom">
|
||||
<van-date-picker v-model="currentDate" title="选择年月" :columns-type="['year', 'month']" @confirm="onconfirm"
|
||||
@cancel="showDate = false" />
|
||||
</van-popup>
|
||||
<van-action-sheet v-model:show="showTerm" safe-area-inset-bottom :title="`${this.$route.meta.title}说明`" closeable
|
||||
style="min-height: 50%; padding: 0px 10px 10px 10px">
|
||||
<div class="w100 html" v-html="data.Term" />
|
||||
</van-action-sheet>
|
||||
|
||||
</BasePage>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'Point',
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: {
|
||||
total: {
|
||||
Balance: 8888.88,
|
||||
TotalBalance: 20000.00,
|
||||
MonthBalance: 5200.00,
|
||||
MonthReduceBalance: 1311.12,
|
||||
},
|
||||
Term: '余额说明：余额可用于提现、购物等。',
|
||||
},
|
||||
date: [`${new Date().getFullYear()}`, `${new Date().getMonth() + 1}`],
|
||||
currentDate: [`${new Date().getFullYear()}`, `${new Date().getMonth() + 1}`],
|
||||
show: false,
|
||||
showDate: false,
|
||||
searchParams: {
|
||||
// type: 'Balance',
|
||||
year: new Date().getFullYear(),
|
||||
month: new Date().getMonth() + 1,
|
||||
},
|
||||
loading: false,
|
||||
showTerm: false,
|
||||
list: [],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.$get('/v1/client/DUserxiaofeijifensClient/statistics', this.searchParams).then(data => {
|
||||
this.data.total = data.data;
|
||||
}).catch(err => {
|
||||
this.$showFailToast(err.message || '加载失败');
|
||||
})
|
||||
},
|
||||
onconfirm(value) {
|
||||
this.date = this.currentDate;
|
||||
this.showDate = false;
|
||||
this.searchParams.year = Number.parseInt(this.currentDate[0]);
|
||||
this.searchParams.month = Number.parseInt(this.currentDate[1]);
|
||||
this.init();
|
||||
this.$refs.baselist.refresh()
|
||||
},
|
||||
changeTabs(e) {
|
||||
this.show = false;
|
||||
},
|
||||
onShowTerm() {
|
||||
this.showTerm = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -7,9 +7,11 @@
|
||||
<b>
|
||||
我的好友
|
||||
</b>
|
||||
<span>
|
||||
<van-icon style="margin-left: 1.2vw;" :name="cansee ? 'eye-o' : 'closed-eye'"
|
||||
@click="cansee = !cansee"> </van-icon>
|
||||
<!-- <span>
|
||||
{{ total.TotalTreeQty }}
|
||||
</span>
|
||||
</span> -->
|
||||
</div>
|
||||
<div class="right_btn r" @click="$navigate('/Invite')">
|
||||
<img src="/img/team-i1.png" alt="">
|
||||
@ -19,8 +21,13 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="count_box">
|
||||
<!-- <div class="item">
|
||||
<div class="num">
|
||||
<b>
|
||||
{{ !cansee ? (total.allfriendcount || 0) : '***' }}
|
||||
</b>
|
||||
</div>
|
||||
<!-- <div class="count_box">
|
||||
<div class="item">
|
||||
<div>
|
||||
<img src="/img/team_i1.png" alt="">
|
||||
<span>
|
||||
@ -41,7 +48,7 @@
|
||||
<div>
|
||||
<b>{{ total.TotalTreeQty }}</b>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<div class="item">
|
||||
<div>
|
||||
<span>
|
||||
@ -63,14 +70,16 @@
|
||||
<b>{{ total.allfriendcount }}</b>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
|
||||
<div class="list_title">
|
||||
<!-- 直推好友列表({{ total.TotalCount }}) -->
|
||||
<van-tabs v-model:active="active" background="transparent" color="#177142">
|
||||
<van-tab :title="'直推好友(' + total.friendcount + ')'"></van-tab>
|
||||
<van-tab :title="'网体好友(' + total.allfriendcount + ')'"></van-tab>
|
||||
<van-tabs v-model:active="active" background="transparent" color="#ad9573">
|
||||
<van-tab :title="'分享的好友(' + total.friendcount + ')'"></van-tab>
|
||||
<van-tab :title="'拓展的商家'"></van-tab>
|
||||
<van-tab :title="'我的推荐人'"></van-tab>
|
||||
|
||||
</van-tabs>
|
||||
|
||||
|
||||
@ -85,25 +94,47 @@
|
||||
<img class="icon" :src="$file(item.userimg)" alt="">
|
||||
<div class="info">
|
||||
<div>
|
||||
<b>{{ item.username }}</b>
|
||||
<b>{{ item.nickname }}</b>
|
||||
<span class="vip">{{ item.userlevelname }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<div class="box">
|
||||
<p>账号:{{ item.cellphone ? item.cellphone.substring(0, 3) + '****' +
|
||||
item.cellphone.substring(7) : '' }}</p>
|
||||
|
||||
</div>
|
||||
<!-- <div>
|
||||
<p>ID {{ item.UserID }}</p>
|
||||
<img src="/img/copy.png" @click="$copyText(item.UserID); $showSuccessToast('复制ID成功')"
|
||||
alt="">
|
||||
</div> -->
|
||||
<span>{{ $formatGMT(item.addtime, 'yyyy-MM-dd HH:mm:ss') }}</span>
|
||||
|
||||
<div>
|
||||
<span>{{ $formatGMT(item.addtime, 'yyyy-MM-dd HH:mm:ss') }}</span>
|
||||
<span class="r" @click="show = true">
|
||||
商家信息 <van-icon name="arrow"></van-icon>
|
||||
</span>
|
||||
<!-- <span class="r">
|
||||
Ta的好友
|
||||
<van-icon name="arrow"></van-icon>
|
||||
</span> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</BaseList>
|
||||
|
||||
<van-popup v-model:show="show" style="padding: 4vw 3.33vw;border-radius: 2.67vw;">
|
||||
<!-- 该账号商家信息： -->
|
||||
<div class="merchantinfo">
|
||||
<img src="" alt="">
|
||||
|
||||
<div class="inf">
|
||||
<b>name</b>
|
||||
<span>账号：</span>
|
||||
</div>
|
||||
</div>
|
||||
</van-popup>
|
||||
</div>
|
||||
</BasePage>
|
||||
</template>
|
||||
@ -122,39 +153,11 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
active: 0,
|
||||
cansee: true,
|
||||
show: false,
|
||||
data: [
|
||||
{
|
||||
UserID: '10001',
|
||||
NickName: '张三',
|
||||
Avatar: '/img/mall_i1.png',
|
||||
LevelName: 'VIP会员',
|
||||
Phone: '13812345678',
|
||||
CTime: '2026-04-15 10:30:00',
|
||||
},
|
||||
{
|
||||
UserID: '10002',
|
||||
NickName: '李四',
|
||||
Avatar: '/img/mall_i2.png',
|
||||
LevelName: '银卡会员',
|
||||
Phone: '13987654321',
|
||||
CTime: '2026-04-10 14:20:00',
|
||||
},
|
||||
{
|
||||
UserID: '10003',
|
||||
NickName: '王五',
|
||||
Avatar: '/img/mall_i3.png',
|
||||
LevelName: '普通会员',
|
||||
Phone: '13611112222',
|
||||
CTime: '2026-04-05 09:15:00',
|
||||
},
|
||||
],
|
||||
total: {
|
||||
TotalTreeQty: 3,
|
||||
TotalTreeSeed: 12,
|
||||
TotalTreeFruit: 580,
|
||||
TotalCount: 3,
|
||||
friendcount: 0,
|
||||
allfriendcount: 0,
|
||||
},
|
||||
title: this.$route.query.title || null,
|
||||
};
|
||||
@ -188,4 +191,32 @@ export default {
|
||||
.r10 {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.merchantinfo {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.merchantinfo img {
|
||||
width: 12vw;
|
||||
height: 12vw;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.merchantinfo .inf {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin-left: 3.33vw;
|
||||
height: 12vw;
|
||||
}
|
||||
|
||||
.merchantinfo .inf b {
|
||||
font-size: 4vw;
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
.merchantinfo .inf span {
|
||||
font-size: 3.67vw;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,258 +0,0 @@
|
||||
<template>
|
||||
<BasePage>
|
||||
<div class="voucher">
|
||||
<div class="t">
|
||||
<div class="c">
|
||||
<div class="tit">
|
||||
<span>当前{{ $route.meta.title }}<van-icon name="question-o" @click.stop="onShowTerm"></van-icon></span>
|
||||
</div>
|
||||
<div class="number">
|
||||
<b>{{ data.total?.totalsum?.toFixed(2) }}</b>
|
||||
</div>
|
||||
<div class="total" style="margin: 1vw 0 0;">
|
||||
<div>
|
||||
累计收入
|
||||
<p>{{ data.total?.positivesum?.toFixed(2) }}</p>
|
||||
</div>
|
||||
<div>
|
||||
累计支出
|
||||
<p>{{ Math.abs(data.total?.negativesum)?.toFixed(2) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="times">
|
||||
<div class="_m">
|
||||
<div class="l" @click="showDate = true">
|
||||
<span>
|
||||
{{ date[0] }}年
|
||||
<p>{{ (parseInt(date[1]) < 10) ? `0${parseInt(date[1])}` : parseInt(date[1]) }}月</p>
|
||||
</span>
|
||||
<img src="/img/i-date.png">
|
||||
</div>
|
||||
<div class="right">
|
||||
<p>
|
||||
收入<br />
|
||||
{{ data.total?.positivesumcurrent?.toFixed(2) }}
|
||||
</p>
|
||||
<p>
|
||||
支出<br />
|
||||
{{ Math.abs(data.total?.negativesumcurrent)?.toFixed(2) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- <van-tabs v-model:active="searchParams.RecordSource" class="balance-tabs" type="card"
|
||||
background="transparent" color="#ff5e5e" title-inactive-color="#313131" title-active-color="#fff"
|
||||
@click="changeTabs">
|
||||
<van-tab title="全部" name=""></van-tab>
|
||||
<van-tab title="参团补贴" name="fail"></van-tab>
|
||||
<van-tab title="分享补贴" name="direct"></van-tab>
|
||||
<van-tab title="管理补贴" name="subsidy"></van-tab>
|
||||
<van-tab title="销售分成" name="sale"></van-tab>
|
||||
</van-tabs> -->
|
||||
|
||||
<BaseList ref="baselist" url="/v1/client/DUserxiaofeiquansClient" class="_m_list" :params="searchParams">
|
||||
<template #default="{ item }">
|
||||
<div class="list" :key="item.TradeCode">
|
||||
<table width="100%" cellpadding="0" cellspacing="0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div style="margin-bottom: 2vw;">{{ $route.meta.title }}：{{
|
||||
item.balance?.toFixed(2) }}</div>
|
||||
</td>
|
||||
<td style="text-align: right;">
|
||||
<van-tag :type="item.nums > 0 ? 'primary' : 'danger'" style="margin-bottom: 2vw;">
|
||||
{{ item.nums > 0 ? "增加：+" : "减少："
|
||||
}}{{ (item.nums).toFixed(2) }}
|
||||
</van-tag>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="item.remark">
|
||||
<td colspan="2">
|
||||
<div style="line-height: 5vw;word-break: break-all; color: #999">
|
||||
备注：{{ item.remark }}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="item.ordernum">
|
||||
<td colspan="2">
|
||||
<div style="line-height: 5vw;word-break: break-all;color: #999;display: inline;">
|
||||
订单：{{ item.ordernum }}
|
||||
</div>
|
||||
<u style="color: #535353; margin-left: 1.667vw"
|
||||
@click="$copyText(item.ordernum); $showSuccessToast('复制成功')">复制</u>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<div style="line-height: 5vw;word-break: break-all;color: #999;display: inline;">
|
||||
时间：{{ $formatGMT(item.addtime, 'yyyy-MM-dd HH:mm:ss') }}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</template>
|
||||
</BaseList>
|
||||
<!-- <div class="_m_list" style="padding-top: 0;">
|
||||
<div class="b_l_w">
|
||||
<div v-for="item in list" :key="item.TradeCode" class="list">
|
||||
<table width="100%" cellpadding="0" cellspacing="0">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<div style="margin-bottom: 2vw;">{{ $route.meta.title }}：{{
|
||||
item.CurValue?.toFixed(2) }}</div>
|
||||
</td>
|
||||
<td style="text-align: right;">
|
||||
<van-tag :type="item.OpeType == '1' ? 'primary' : 'danger'" style="margin-bottom: 2vw;">
|
||||
{{ item.OpeType == "1" ? "增加：+" : "减少：-"
|
||||
}}{{ (item.RecordValue).toFixed(2) }}
|
||||
</van-tag>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="item.Remark">
|
||||
<td colspan="2">
|
||||
<div style="line-height: 5vw;word-break: break-all; color: #999">
|
||||
备注：{{ item.Remark }}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="item.TradeCode">
|
||||
<td colspan="2">
|
||||
<div style="line-height: 5vw;word-break: break-all;color: #999;display: inline;">
|
||||
订单：{{ item.TradeCode }}
|
||||
</div>
|
||||
<u style="color: #535353; margin-left: 1.667vw"
|
||||
@click="$copyText(item.TradeCode); $showSuccessToast('复制成功')">复制</u>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="2">
|
||||
<div style="line-height: 5vw;word-break: break-all;color: #999;display: inline;">
|
||||
时间：{{ $date.dateformat(item.CTime, true) }}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
<van-popup v-model:show="showDate" position="bottom">
|
||||
<van-date-picker v-model="currentDate" title="选择年月" :columns-type="['year', 'month']" @confirm="onconfirm"
|
||||
@cancel="showDate = false" />
|
||||
</van-popup>
|
||||
<van-action-sheet v-model:show="showTerm" safe-area-inset-bottom :title="`${this.$route.meta.title}说明`" closeable
|
||||
style="min-height: 50%; padding: 0px 10px 10px 10px">
|
||||
<div class="w100 html" v-html="data.Term" />
|
||||
</van-action-sheet>
|
||||
|
||||
</BasePage>
|
||||
</template>
|
||||
<script>
|
||||
import BaseList from '../../components/BaseList.vue';
|
||||
|
||||
export default {
|
||||
name: 'Voucher',
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: {
|
||||
total: {
|
||||
Balance: 8888.88,
|
||||
TotalBalance: 20000.00,
|
||||
MonthBalance: 5200.00,
|
||||
MonthReduceBalance: 1311.12,
|
||||
},
|
||||
Term: '余额说明：余额可用于提现、购物等。',
|
||||
},
|
||||
date: [`${new Date().getFullYear()}`, `${new Date().getMonth() + 1}`],
|
||||
currentDate: [`${new Date().getFullYear()}`, `${new Date().getMonth() + 1}`],
|
||||
show: false,
|
||||
showDate: false,
|
||||
searchParams: {
|
||||
year: new Date().getFullYear(),
|
||||
month: new Date().getMonth() + 1,
|
||||
},
|
||||
loading: false,
|
||||
showTerm: false,
|
||||
list: [
|
||||
{
|
||||
CurValue: 100.00,
|
||||
OpeType: '1',
|
||||
RecordValue: 100.00,
|
||||
Remark: '参团补贴奖励',
|
||||
TradeCode: 'TR202604200001',
|
||||
CTime: '2026-04-20 10:30:00',
|
||||
},
|
||||
{
|
||||
CurValue: 50.00,
|
||||
OpeType: '1',
|
||||
RecordValue: 50.00,
|
||||
Remark: '分享补贴奖励',
|
||||
TradeCode: 'TR202604200002',
|
||||
CTime: '2026-04-20 11:00:00',
|
||||
},
|
||||
{
|
||||
CurValue: 200.00,
|
||||
OpeType: '2',
|
||||
RecordValue: 200.00,
|
||||
Remark: '余额提现',
|
||||
TradeCode: 'TR202604190001',
|
||||
CTime: '2026-04-19 14:20:00',
|
||||
},
|
||||
{
|
||||
CurValue: 80.00,
|
||||
OpeType: '1',
|
||||
RecordValue: 80.00,
|
||||
Remark: '管理补贴奖励',
|
||||
TradeCode: 'TR202604190002',
|
||||
CTime: '2026-04-19 16:45:00',
|
||||
},
|
||||
{
|
||||
CurValue: 150.00,
|
||||
OpeType: '1',
|
||||
RecordValue: 150.00,
|
||||
Remark: '销售分成奖励',
|
||||
TradeCode: 'TR202604180001',
|
||||
CTime: '2026-04-18 09:15:00',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.$get('/v1/client/DUserxiaofeiquansClient/statistics', this.searchParams).then(data => {
|
||||
this.data.total = data.data;
|
||||
// console.log(this.data.total);
|
||||
|
||||
}).catch(err => {
|
||||
this.$showFailToast(err.message || '加载失败');
|
||||
})
|
||||
},
|
||||
onconfirm(value) {
|
||||
this.date = this.currentDate;
|
||||
this.showDate = false;
|
||||
this.searchParams.year = Number.parseInt(this.currentDate[0]);
|
||||
this.searchParams.month = Number.parseInt(this.currentDate[1]);
|
||||
this.init();
|
||||
this.$refs.baselist.refresh()
|
||||
},
|
||||
changeTabs(e) {
|
||||
this.show = false;
|
||||
},
|
||||
onShowTerm() {
|
||||
this.showTerm = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
Loading…
x
Reference in New Issue
Block a user