liaofei
/
mall-app-t
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(提现)

This commit is contained in:
unknown 2024-05-30 01:20:31 +08:00
parent 4f1a9a3440
commit 69aa02da78
9 changed files with 981 additions and 1068 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
pages.json
View File

@ -101,6 +101,20 @@
} }
} }
] ]
},
{
"root": "pages/user",
"pages": [
{
"path": "wallet/money",
"style": {
"navigationBarTitleText": "余额"
},
"meta": {
"auth": false
}
}
]
} }
], ],
"tabBar": { "tabBar": {

287
pages/index/login.vue
View File

@ -1,60 +1,39 @@
<template> <template>
<pb-layout :leftIcon="''" navbar="inner" :bgStyle="{ backgroundColor: '#fff' }"> <pb-layout :leftIcon="''" navbar="inner" :bgStyle="{ backgroundColor: '#fff' }">
<view class="login-module ss-p-x-30"> <view class="login-module ss-p-x-30">
<view class="login-title ss-font-56 ss-m-b-72"> <view class="login-title ss-font-56 ss-m-b-72">
{{ title }} {{ title }}
</view> </view>
<uni-forms ref="smsLoginRef" v-model="state.model" :rules="state.rules" validateTrigger="bind"> <uni-forms ref="smsLoginRef" v-model="state.model" :rules="state.rules" validateTrigger="bind">
<uni-forms-item name="mobile"> <uni-forms-item name="mobile">
<uni-easyinput <uni-easyinput :styles="state.inputStyle" trim="all" placeholder="请输入手机号" v-model="state.model.mobile"
:styles="state.inputStyle" :inputBorder="false" type="number" />
trim="all" </uni-forms-item>
placeholder="请输入手机号" <uni-forms-item name="code">
v-model="state.model.mobile" <uni-easyinput :styles="state.inputStyle" trim="all" placeholder="验证码" v-model="state.model.code"
:inputBorder="false" :inputBorder="false" type="number" maxlength="4">
type="number" <template #right>
/> <button :disabled="state.isMobileEnd" :class="{ 'code-btn-end': state.isMobileEnd }"
</uni-forms-item> class="ss-reset-button code-btn code-btn-start" @tap="getSmsCode('smsLogin', state.model.mobile)">
<uni-forms-item name="code"> {{ getSmsTimer('smsLogin') }}
<uni-easyinput </button>
:styles="state.inputStyle" </template>
trim="all" </uni-easyinput>
placeholder="验证码" </uni-forms-item>
v-model="state.model.code" </uni-forms>
:inputBorder="false" <button class="ss-reset-button login-btn-start" @tap="smsLoginSubmit">登录</button>
type="number" <view class="agreement-box ss-flex ss-row-center" :class="{ shake: state.isShaking }">
maxlength="4" <label class="radio ss-flex" @tap="onChange">
> <radio :checked="state.agreeStatus" color="var(--ui-BG-Main)" style="transform: scale(0.8)"
<template #right> @tap.stop="onChange" />
<button <view class="agreement-text ss-flex ss-m-l-8">
:disabled="state.isMobileEnd" 我已阅读并遵守
:class="{ 'code-btn-end': state.isMobileEnd }" <view class="tcp-text" @tap.stop="onProtocol('商家入驻协议')"> 《商家入驻协议》 </view>
class="ss-reset-button code-btn code-btn-start" </view>
@tap="getSmsCode('smsLogin', state.model.mobile)" </label>
> </view>
{{ getSmsTimer('smsLogin') }} </view>
</button> </pb-layout>
</template>
</uni-easyinput>
</uni-forms-item>
</uni-forms>
<button class="ss-reset-button login-btn-start" @tap="smsLoginSubmit">登录</button>
<view class="agreement-box ss-flex ss-row-center" :class="{ shake: state.isShaking }">
<label class="radio ss-flex" @tap="onChange">
<radio
:checked="state.agreeStatus"
color="var(--ui-BG-Main)"
style="transform: scale(0.8)"
@tap.stop="onChange"
/>
<view class="agreement-text ss-flex ss-m-l-8">
我已阅读并遵守
<view class="tcp-text" @tap.stop="onProtocol('商家入驻协议')"> 《商家入驻协议》 </view>
</view>
</label>
</view>
</view>
</pb-layout>
</template> </template>
<script setup> <script setup>
@ -68,127 +47,131 @@ const title = ref('欢迎登录')
const smsLoginRef = ref(null) const smsLoginRef = ref(null)
const state = ref({ const state = ref({
isMobileEnd: false, isMobileEnd: false,
agreeStatus: false, agreeStatus: false,
isShaking: false, isShaking: false,
model: { model: {
mobile: '15036370128', mobile: '15036370128',
code: '9999', code: '9999',
}, },
rules: { rules: {
mobile, mobile,
code, code,
}, },
inputStyle: { inputStyle: {
backgroundColor: '#ECECEC', backgroundColor: '#ECECEC',
}, },
}) })
function onChange() { function onChange() {
state.value.agreeStatus = !state.value.agreeStatus state.value.agreeStatus = !state.value.agreeStatus
}
function onProtocol() {
peach.$router.go('/pages/public/richtext?title=商家入驻协议')
} }
async function smsLoginSubmit() { async function smsLoginSubmit() {
const validate = await smsLoginRef.value.validate().catch((err) => { const validate = await smsLoginRef.value.validate().catch((err) => {
console.log('err', err) console.log('err', err)
}) })
if (!validate) return if (!validate) return
if (!state.value.agreeStatus) { if (!state.value.agreeStatus) {
state.value.isShaking = true state.value.isShaking = true
setTimeout(() => { setTimeout(() => {
state.value.isShaking = false state.value.isShaking = false
}, 1000) }, 1000)
peach.$helper.toast('请勾选同意') peach.$helper.toast('请勾选同意')
return return
} }
const { code } = await AuthUtil.smsLogin(state.value.model) const { code } = await AuthUtil.smsLogin(state.value.model)
} }
</script> </script>
<style lang="scss"> <style lang="scss">
.login-module { .login-module {
.uni-easyinput { .uni-easyinput {
::v-deep .uni-easyinput__content { ::v-deep .uni-easyinput__content {
border-radius: 41rpx; border-radius: 41rpx;
padding: 0 10rpx; padding: 0 10rpx;
}
.is-focused {
::v-deep .content-clear-icon {
.uniui-clear {
color: red !important;
}
}
}
} }
.is-focused {
::v-deep .content-clear-icon {
.uniui-clear {
color: red !important;
}
}
}
}
} }
</style> </style>
<style lang="scss" scoped> <style lang="scss" scoped>
.login-module { .login-module {
margin-top: 50%; margin-top: 50%;
overflow: hidden; overflow: hidden;
.login-title { .login-title {
color: '#1818d'; color: '#1818d';
font-weight: 600; font-weight: 600;
}
.login-btn-start {
height: 82rpx;
line-height: normal;
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
border-radius: 28rpx;
font-size: 26rpx;
font-weight: 500;
color: #fff;
}
.code-btn-start {
width: 160rpx;
height: 56rpx;
line-height: normal;
border-radius: 28rpx;
font-size: 26rpx;
font-weight: 400;
color: var(--ui-BG-Main);
opacity: 1;
}
.agreement-box {
margin: -10px auto 10px;
position: absolute;
bottom: 30rpx;
width: 100%;
.protocol-check {
transform: scale(0.7);
} }
.login-btn-start { .agreement-text {
height: 82rpx; font-size: 26rpx;
line-height: normal; font-weight: 500;
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient)); color: #999999;
border-radius: 28rpx;
font-size: 26rpx;
font-weight: 500;
color: #fff;
}
.code-btn-start { .tcp-text {
width: 160rpx;
height: 56rpx;
line-height: normal;
border-radius: 28rpx;
font-size: 26rpx;
font-weight: 400;
color: var(--ui-BG-Main); color: var(--ui-BG-Main);
opacity: 1; }
}
}
.shake {
animation: shake 0.05s linear 4 alternate;
}
@keyframes shake {
from {
transform: translateX(-5rpx);
} }
.agreement-box { to {
margin: -10px auto 10px; transform: translateX(5rpx);
position: absolute;
bottom: 30rpx;
width: 100%;
.protocol-check {
transform: scale(0.7);
}
.agreement-text {
font-size: 26rpx;
font-weight: 500;
color: #999999;
.tcp-text {
color: var(--ui-BG-Main);
}
}
}
.shake {
animation: shake 0.05s linear 4 alternate;
}
@keyframes shake {
from {
transform: translateX(-5rpx);
}
to {
transform: translateX(5rpx);
}
} }
}
} }
</style> </style>

492
pages/user/wallet/money.vue
View File

@ -1,71 +1,48 @@
<!-- 我的钱包 -->
<template> <template>
<pb-layout navbar="inner" class="wallet-wrap" title="钱包" :bgStyle="bgStyle"> <pb-layout navbar="inner" class="wallet-wrap" color="#fff" title="余额" :bgStyle="bgStyle">
<!-- 钱包卡片 --> <view class="header-box ss-row-center ss-col-center">
<view class="header-box ss-flex ss-row-center ss-col-center"> <view class="card-box ui-BG-Main ui-Shadow-Main ss-flex ss-row-between ss-col-center">
<view class="card-box ui-BG-Main ui-Shadow-Main"> <view class="ss-flex ss-flex-col ss-row-between ss-col-top ss-gap-40">
<view class="card-head ss-flex ss-col-center"> <view class="card-head ss-flex ss-col-center">
<view class="card-title ss-m-r-10">钱包余额（元）</view> <view class="card-title ss-m-r-10">账户余额（元）</view>
<view <view @tap="state.showMoney = !state.showMoney" class="ss-eye-icon"
@tap="state.showMoney = !state.showMoney" :class="state.showMoney ? 'cicon-eye' : 'cicon-eye-off'" />
class="ss-eye-icon" </view>
:class="state.showMoney ? 'cicon-eye' : 'cicon-eye-off'"
/>
</view>
<view class="ss-flex ss-row-between ss-col-center ss-m-t-64">
<view class="money-num">{{ state.showMoney ? fen2yuan(userWallet.balance) : '*****' }}</view>
<button class="ss-reset-button topup-btn" @tap="peach.$router.go('/pages/pay/recharge')">
充值
</button>
</view>
</view>
</view>
<su-sticky> <view class="money-num">{{ state.showMoney ? fen2yuan(userWallet.balance) : '*****' }}</view>
<!-- 统计 -->
<view class="filter-box ss-p-x-30 ss-flex ss-col-center ss-row-between">
<uni-datetime-picker v-model="state.data" type="daterange" @change="onChangeTime" :end="state.today">
<button class="ss-reset-button date-btn">
<text>{{ dateFilterText }}</text>
<text class="cicon-drop-down ss-seldate-icon"></text>
</button>
</uni-datetime-picker>
<view class="total-box">
<view class="ss-m-b-10">总收入￥{{ fen2yuan(state.summary.totalIncome) }}</view>
<view>总支出￥{{ fen2yuan(state.summary.totalExpense) }}</view>
</view>
</view>
<su-tabs :list="tabMaps" @change="onChange" :scrollable="false" :current="state.currentTab"></su-tabs>
</su-sticky>
<s-empty v-if="state.pagination.total === 0" text="暂无数据" icon="/static/data-empty.png" />
<!-- 钱包记录 -->
<view v-if="state.pagination.total > 0">
<view class="wallet-list ss-flex border-bottom" v-for="item in state.pagination.list" :key="item.id">
<view class="list-content">
<view class="title-box ss-flex ss-row-between ss-m-b-20">
<text class="title ss-line-1">
{{ item.title }}
</text>
<view class="money">
<text v-if="item.price >= 0" class="add">+{{ fen2yuan(item.price) }}</text>
<text v-else class="minus">{{ fen2yuan(item.price) }}</text>
</view>
</view>
<text class="time">
{{ peach.$helper.timeFormat(state.createTime, 'yyyy-mm-dd hh:MM:ss') }}
</text>
</view>
</view>
</view> </view>
<uni-load-more <button class="ss-reset-button topup-btn" @tap="peach.$router.go('/pages/pay/recharge')">
v-if="state.pagination.total > 0" 提现
:status="state.loadStatus" </button>
:content-text="{ </view>
contentdown: '上拉加载更多', </view>
}"
/>
</pb-layout> <p-empty v-if="state.pagination.total === 0" :marginTop="40" text="暂无数据" icon="/static/data-empty.png" />
<!-- 钱包记录 -->
<view v-if="state.pagination.total > 0">
<view class="wallet-list ss-flex border-bottom" v-for="item in state.pagination.list" :key="item.id">
<view class="list-content">
<view class="title-box ss-flex ss-row-between ss-m-b-20">
<text class="title ss-line-1">
{{ item.title }}
</text>
<view class="money">
<text v-if="item.price >= 0" class="add">+{{ fen2yuan(item.price) }}</text>
<text v-else class="minus">{{ fen2yuan(item.price) }}</text>
</view>
</view>
<text class="time">
{{ peach.$helper.timeFormat(state.createTime, 'yyyy-mm-dd hh:MM:ss') }}
</text>
</view>
</view>
</view>
<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" :content-text="{
contentdown: '上拉加载更多',
}" />
</pb-layout>
</template> </template>
<script setup> <script setup>
@ -76,295 +53,210 @@ import dayjs from 'dayjs'
import _ from 'lodash' import _ from 'lodash'
import PayWalletApi from '@/peach/api/pay/wallet' import PayWalletApi from '@/peach/api/pay/wallet'
import { fen2yuan } from '@/peach/hooks/useGoods' import { fen2yuan } from '@/peach/hooks/useGoods'
import { resetPagination } from '@/peach/util' import { resetPagination } from '@/peach/utils'
const bgStyle = { const bgStyle = {
backgroundImage: '/static/bg-page.png', backgroundImage: '/static/bg-page.png',
imageType: 'local', imageType: 'local',
backgroundColor: '#fff', backgroundColor: '#fff',
description: '', description: '',
} }
const headerBg = peach.$url.css('/static/img/shop/user/wallet_card_bg.png') // const headerBg = peach.$url.css('/static/img/shop/user/wallet_card_bg.png')
// 数据 // 数据
const state = reactive({ const state = reactive({
showMoney: false, showMoney: false,
date: [], // 筛选的时间段 pagination: {
currentTab: 0, list: [],
pagination: { total: 0,
list: [], pageNo: 1,
total: 0, pageSize: 8,
pageNo: 1, },
pageSize: 8, loadStatus: '',
},
summary: {
totalIncome: 0,
totalExpense: 0,
},
loadStatus: '',
today: '',
}) })
const tabMaps = [
{
name: '全部',
value: '',
},
{
name: '收入',
value: '1',
},
{
name: '支出',
value: '2',
},
]
const userWallet = computed(() => peach.$store('user').userWallet) const userWallet = computed(() => peach.$store('user').userWallet)
// 格式化时间段
const dateFilterText = computed(() => {
if (state.date[0] === state.date[1]) {
return state.date[0]
} else {
return state.date.join('~')
}
})
// 获得钱包记录分页 // 获得钱包记录分页
async function getLogList() { async function getLogList() {
state.loadStatus = 'loading' state.loadStatus = 'loading'
const { data, code } = await PayWalletApi.getWalletTransactionPage({ // const { data, code } = await PayWalletApi.getWalletTransactionPage({
pageNo: state.pagination.pageNo, // pageNo: state.pagination.pageNo,
pageSize: state.pagination.pageSize, // pageSize: state.pagination.pageSize,
type: tabMaps[state.currentTab].value,
'createTime[0]': state.date[0] + ' 00:00:00', // })
'createTime[1]': state.date[1] + ' 23:59:59',
}) // state.pagination.list = _.concat(state.pagination.list, data.list)
if (code !== 0) { // state.pagination.total = data.total
return // state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore'
}
state.pagination.list = _.concat(state.pagination.list, data.list)
state.pagination.total = data.total
state.loadStatus = state.pagination.list.length < state.pagination.total ? 'more' : 'noMore'
} }
// 获得钱包统计
async function getSummary() {
const { data, code } = await PayWalletApi.getWalletTransactionSummary({
createTime: [state.date[0] + ' 00:00:00', state.date[1] + ' 23:59:59'],
})
if (code !== 0) {
return
}
state.summary = data
}
onLoad(() => { onLoad(() => {
state.today = dayjs().format('YYYY-MM-DD') getLogList()
state.date = [state.today, state.today] // 刷新钱包的缓存
getLogList() // peach.$store('user').getWallet()
getSummary()
// 刷新钱包的缓存
peach.$store('user').getWallet()
}) })
// 处理 tab 切换
function onChange(e) {
state.currentTab = e.index
// 重新加载列表
resetPagination(state.pagination)
getLogList()
getSummary()
}
// 处理时间筛选
function onChangeTime(e) {
state.date[0] = e[0]
state.date[1] = e[e.length - 1]
// 重新加载列表
resetPagination(state.pagination)
getLogList()
getSummary()
}
onReachBottom(() => { onReachBottom(() => {
if (state.loadStatus === 'noMore') { if (state.loadStatus === 'noMore') {
return return
} }
state.pagination.pageNo++ state.pagination.pageNo++
getLogList() getLogList()
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
// 钱包
.header-box { .header-box {
background-color: $white; .card-box {
padding: 30rpx; width: 100%;
min-height: 250rpx;
padding: 0 40rpx;
background-size: 100% 100%;
border-radius: 30rpx;
overflow: hidden;
position: relative;
z-index: 1;
box-sizing: border-box;
.card-box { .card-head {
width: 100%; color: $white;
min-height: 300rpx; font-size: 30rpx;
padding: 40rpx;
background-size: 100% 100%;
border-radius: 30rpx;
overflow: hidden;
position: relative;
z-index: 1;
box-sizing: border-box;
&::after {
content: '';
display: block;
width: 100%;
height: 100%;
z-index: 2;
position: absolute;
top: 0;
left: 0;
background: v-bind(headerBg) no-repeat;
pointer-events: none;
}
.card-head {
color: $white;
font-size: 30rpx;
}
.ss-eye-icon {
font-size: 40rpx;
color: $white;
}
.money-num {
font-size: 70rpx;
line-height: 70rpx;
font-weight: 500;
color: $white;
font-family: OPPOSANS;
}
.reduce-num {
font-size: 26rpx;
font-weight: 400;
color: $white;
}
.topup-btn {
width: 120rpx;
height: 60rpx;
line-height: 60rpx;
border-radius: 30px;
font-size: 26rpx;
font-weight: 500;
background-color: $white;
color: var(--ui-BG-Main);
}
} }
.ss-eye-icon {
font-size: 40rpx;
color: $white;
}
.money-num {
font-size: 70rpx;
line-height: 70rpx;
font-weight: 500;
color: $white;
font-family: OPPOSANS;
}
.reduce-num {
font-size: 26rpx;
font-weight: 400;
color: $white;
}
.topup-btn {
width: 150rpx;
height: 60rpx;
line-height: 60rpx;
border-radius: 30px;
font-size: 26rpx;
font-weight: 500;
background-color: $white;
color: var(--ui-BG-Main);
}
}
} }
// 筛选 // 筛选
.filter-box { .filter-box {
height: 114rpx; height: 114rpx;
background-color: $bg-page; background-color: $bg-page;
.total-box { .total-box {
font-size: 24rpx; font-size: 24rpx;
font-weight: 500; font-weight: 500;
color: $dark-9; color: $dark-9;
}
.date-btn {
background-color: $white;
line-height: 54rpx;
border-radius: 27rpx;
padding: 0 20rpx;
font-size: 24rpx;
font-weight: 500;
color: $dark-6;
.ss-seldate-icon {
font-size: 50rpx;
color: $dark-9;
} }
}
.date-btn {
background-color: $white;
line-height: 54rpx;
border-radius: 27rpx;
padding: 0 20rpx;
font-size: 24rpx;
font-weight: 500;
color: $dark-6;
.ss-seldate-icon {
font-size: 50rpx;
color: $dark-9;
}
}
}
.tabs-box {
background: $white;
border-bottom: 2rpx solid #eeeeee;
} }
// tab // tab
.wallet-tab-card { .wallet-tab-card {
.tab-item { .tab-item {
height: 80rpx; height: 80rpx;
position: relative; position: relative;
.tab-title { .tab-title {
font-size: 30rpx; font-size: 30rpx;
}
.cur-tab-title {
font-weight: $font-weight-bold;
}
.tab-line {
width: 60rpx;
height: 6rpx;
border-radius: 6rpx;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 2rpx;
background-color: var(--ui-BG-Main);
}
} }
.cur-tab-title {
font-weight: $font-weight-bold;
}
.tab-line {
width: 60rpx;
height: 6rpx;
border-radius: 6rpx;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 2rpx;
background-color: var(--ui-BG-Main);
}
}
} }
// 钱包记录 // 钱包记录
.wallet-list { .wallet-list {
padding: 30rpx; padding: 30rpx;
background-color: #ffff; background-color: #ffff;
.head-img { .head-img {
width: 70rpx; width: 70rpx;
height: 70rpx; height: 70rpx;
border-radius: 50%; border-radius: 50%;
background: $gray-c; background: $gray-c;
}
.list-content {
justify-content: space-between;
align-items: flex-start;
flex: 1;
.title {
font-size: 28rpx;
color: $dark-3;
width: 400rpx;
} }
.list-content { .time {
justify-content: space-between; color: $gray-c;
align-items: flex-start; font-size: 22rpx;
flex: 1; }
}
.title { .money {
font-size: 28rpx; font-size: 28rpx;
color: $dark-3; font-weight: bold;
width: 400rpx; font-family: OPPOSANS;
}
.time { .add {
color: $gray-c; color: var(--ui-BG-Main);
font-size: 22rpx;
}
} }
.money { .minus {
font-size: 28rpx; color: $dark-3;
font-weight: bold;
font-family: OPPOSANS;
.add {
color: var(--ui-BG-Main);
}
.minus {
color: $dark-3;
}
} }
}
} }
</style> </style>

7
peach/api/pay/wallet.js Normal file
View File

@ -0,0 +1,7 @@
import request from "@/peach/request";
const PayWalletApi = {
getWalletTransactionPage: () => {},
};
export default PayWalletApi;

130
peach/components/p-empty/p-empty.vue
View File

@ -1,87 +1,99 @@
<template> <template>
<view class="ss-flex-col ss-col-center ss-row-center empty-box" :style="[{ paddingTop: paddingTop + 'rpx' }]"> <view class="ss-flex-col ss-col-center ss-row-center empty-box"
<view class=""><image class="empty-icon" :src="icon" mode="widthFix"></image></view> :style="[{ paddingTop: paddingTop + 'rpx', backgroundColor: bgColor, marginTop: marginTop + 'rpx' }]">
<view class="empty-text ss-m-t-28 ss-m-b-40"> <view class="">
<text v-if="text !== ''">{{ text }}</text> <image class="empty-icon" :src="icon" mode="widthFix"></image>
</view>
<button class="ss-reset-button empty-btn" v-if="showAction" @tap="clickAction">
{{ actionText }}
</button>
</view> </view>
<view class="empty-text ss-m-t-28 ss-m-b-40">
<text v-if="text !== ''">{{ text }}</text>
</view>
<button class="ss-reset-button empty-btn" v-if="showAction" @tap="clickAction">
{{ actionText }}
</button>
</view>
</template> </template>
<script setup> <script setup>
import peach from '@/peach' import peach from '@/peach'
const props = defineProps({ const props = defineProps({
// 图标 // 图标
icon: { icon: {
type: String, type: String,
default: '', default: '',
}, },
// 描述 // 描述
text: { text: {
type: String, type: String,
default: '', default: '',
}, },
// 是否显示button // 是否显示button
showAction: { showAction: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
// button 文字 // button 文字
actionText: { actionText: {
type: String, type: String,
default: '', default: '',
}, },
// 链接 // 链接
actionUrl: { actionUrl: {
type: String, type: String,
default: '', default: '',
}, },
// 间距 // 间距
paddingTop: { paddingTop: {
type: String, type: String,
default: '260', default: '260',
}, },
//主题色 //主题色
buttonColor: { buttonColor: {
type: String, type: String,
default: 'var(--ui-BG-Main)', default: 'var(--ui-BG-Main)',
}, },
bgColor: {
type: String,
default: '#ffffff',
},
marginTop: {
type: Number,
default: 0
}
}) })
const emits = defineEmits(['clickAction']) const emits = defineEmits(['clickAction'])
function clickAction() { function clickAction() {
if (props.actionUrl !== '') { if (props.actionUrl !== '') {
peach.$router.go(props.actionUrl) peach.$router.go(props.actionUrl)
} }
emits('clickAction') emits('clickAction')
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.empty-box { .empty-box {
width: 100%; width: 100%;
} }
.empty-icon { .empty-icon {
width: 240rpx; width: 240rpx;
} }
.empty-text { .empty-text {
font-size: 26rpx; font-size: 26rpx;
font-weight: 500; font-weight: 500;
color: #999999; color: #999999;
} }
.empty-btn { .empty-btn {
width: 320rpx; width: 320rpx;
height: 70rpx; height: 70rpx;
border: 2rpx solid v-bind('buttonColor'); border: 2rpx solid v-bind('buttonColor');
border-radius: 35rpx; border-radius: 35rpx;
font-weight: 500; font-weight: 500;
color: v-bind('buttonColor'); color: v-bind('buttonColor');
font-size: 28rpx; font-size: 28rpx;
} }
</style> </style>

221
peach/store/user.js
View File

@ -1,124 +1,125 @@
import { ref } from 'vue' import { ref } from "vue";
import { defineStore } from 'pinia' import { defineStore } from "pinia";
import $share from '@/peach/platform/share' import $share from "@/peach/platform/share";
import $router from '@/peach/router' import $router from "@/peach/router";
import UserUtil from '@/peach/api/member/user' import UserUtil from "@/peach/api/member/user";
import { isEmpty, cloneDeep, clone } from 'lodash' import { isEmpty, cloneDeep, clone } from "lodash";
// 默认用户信息 // 默认用户信息
const defaultUserInfo = { const defaultUserInfo = {
avatar: '', // 头像 avatar: "", // 头像
nickname: '', // 昵称 nickname: "", // 昵称
mobile: '', // 手机号 mobile: "", // 手机号
point: 0, // 积分 point: 0, // 积分
particulars: null, particulars: null,
} };
// 默认钱包信息 // 默认钱包信息
const defaultWallet = { const defaultWallet = {
balance: 0, // 余额 balance: 0, // 余额
totalExpense: 0, // 总消费 totalExpense: 0, // 总消费
totalRecharge: 0, // 总充值 totalRecharge: 0, // 总充值
} };
// 默认订单信息 // 默认订单信息
const defaultNumData = { const defaultNumData = {
unusedCouponCount: 0, unusedCouponCount: 0,
orderCount: { orderCount: {
allCount: 0, allCount: 0,
unpaidCount: 0, unpaidCount: 0,
undeliveredCount: 0, undeliveredCount: 0,
deliveredCount: 0, deliveredCount: 0,
uncommentedCount: 0, uncommentedCount: 0,
afterSaleCount: 0, afterSaleCount: 0,
}, },
} };
const useUserStore = defineStore( const useUserStore = defineStore(
'user', "user",
() => { () => {
const userInfo = ref(cloneDeep(defaultUserInfo)) const userInfo = ref(cloneDeep(defaultUserInfo));
const userWallet = ref(clone(defaultWallet)) const userWallet = ref(clone(defaultWallet));
const userNumData = ref(cloneDeep(defaultNumData)) const userNumData = ref(cloneDeep(defaultNumData));
const isLogin = ref(!!uni.getStorageSync('token')) const isLogin = ref(!!uni.getStorageSync("token"));
const lastUpdateTime = ref(0) const lastUpdateTime = ref(0);
const lastRoutePage = ref(null) const lastRoutePage = ref(null);
async function getUserInfo() { async function getUserInfo() {
let res = await UserUtil.getUserInfo() let res = await UserUtil.getUserInfo();
userInfo.value = res.data userInfo.value = res.data;
}
async function getWallet() {
let res = await UserUtil.getWalletInfo()
userWallet.value = res.data
}
function getNumData() {}
function setToken(token, refreshToken) {
if (token === '') {
isLogin.value = false
uni.removeStorageSync('token')
uni.removeStorageSync('refresh-token')
} else {
isLogin.value = true
uni.setStorageSync('token', token)
uni.setStorageSync('refresh-token', refreshToken)
// 成功后处理
loginAfter()
}
return isLogin.value
}
function resetUserData() {
setToken('')
userInfo.value = cloneDeep(defaultUserInfo)
userWallet.value = clone(defaultWallet)
userNumData.value = cloneDeep(defaultNumData)
}
async function updateUserData() {
const nowTime = new Date().getTime()
if (lastUpdateTime.value + 5000 > nowTime) {
return
}
lastUpdateTime.value = nowTime
await Promise.all([getUserInfo(), getWallet(), getNumData()])
return userInfo.value
}
async function loginAfter() {
await updateUserData()
$share.getShareInfo()
$router.go('/pages/index/index')
}
function logOut() {
resetUserData()
return !isLogin.value
}
return {
userInfo,
userWallet,
isLogin,
setToken,
logOut,
loginAfter,
lastRoutePage,
}
},
{
persist: {
enabled: true,
strategies: [
{
key: 'user-store',
},
],
},
} }
)
export default useUserStore async function getWallet() {
let res = await UserUtil.getWalletInfo();
userWallet.value = res.data;
}
function getNumData() {}
function setToken(token, refreshToken) {
if (token === "") {
isLogin.value = false;
uni.removeStorageSync("token");
uni.removeStorageSync("refresh-token");
} else {
isLogin.value = true;
uni.setStorageSync("token", token);
uni.setStorageSync("refresh-token", refreshToken);
// 成功后处理
loginAfter();
}
return isLogin.value;
}
function resetUserData() {
setToken("");
userInfo.value = cloneDeep(defaultUserInfo);
userWallet.value = clone(defaultWallet);
userNumData.value = cloneDeep(defaultNumData);
}
async function updateUserData() {
const nowTime = new Date().getTime();
if (lastUpdateTime.value + 5000 > nowTime) {
return;
}
lastUpdateTime.value = nowTime;
await Promise.all([getUserInfo(), getWallet(), getNumData()]);
return userInfo.value;
}
async function loginAfter() {
await updateUserData();
$share.getShareInfo();
$router.go("/pages/index/index");
}
function logOut() {
resetUserData();
return !isLogin.value;
}
return {
userInfo,
userWallet,
isLogin,
lastRoutePage,
setToken,
logOut,
loginAfter,
getWallet,
};
},
{
persist: {
enabled: true,
strategies: [
{
key: "user-store",
},
],
},
}
);
export default useUserStore;

599
peach/ui/pb-inner-navbar/pb-inner-navbar.vue
View File

@ -1,43 +1,30 @@
<template> <template>
<pb-fixed <pb-fixed :noFixed="props.noFixed" :alway="props.alway" :bgStyles="props.bgStyles" :val="0" :index="props.zIndex"
:noFixed="props.noFixed" noNav :bg="props.bg" :ui="props.ui" :opacity="props.opacity" :placeholder="props.placeholder">
:alway="props.alway" <pb-status-bar />
:bgStyles="props.bgStyles"
:val="0"
:index="props.zIndex"
noNav
:bg="props.bg"
:ui="props.ui"
:opacity="props.opacity"
:placeholder="props.placeholder"
>
<pb-status-bar />
<view class="ui-navbar-box"> <view class="ui-navbar-box">
<view <view class="ui-bar ss-p-x-20" :class="state.isDark ? 'text-white' : 'text-black'"
class="ui-bar ss-p-x-20" :style="[{ height: sys_navBar - sys_statusBar + 'px' }]">
:class="state.isDark ? 'text-white' : 'text-black'" <view v-if="leftIcon" class="icon-box ss-flex">
:style="[{ height: sys_navBar - sys_statusBar + 'px' }]" <view class="icon-button icon-button-left ss-flex ss-row-center" @tap="onClickLeft">
> <text class="sicon-back" v-if="hasHistory" />
<view v-if="leftIcon" class="icon-box ss-flex"> <text class="sicon-home" v-else />
<view class="icon-button icon-button-left ss-flex ss-row-center" @tap="onClickLeft"> </view>
<text class="sicon-back" v-if="hasHistory" /> <view class="line"></view>
<text class="sicon-home" v-else /> <view class="icon-button icon-button-right ss-flex ss-row-center" @tap="onClickRight">
</view> <text class="sicon-more" />
<view class="line"></view> </view>
<view class="icon-button icon-button-right ss-flex ss-row-center" @tap="onClickRight">
<text class="sicon-more" />
</view>
</view>
<slot name="center">
<view class="center navbar-title">{{ title }}</view>
</slot>
<!-- #ifdef MP -->
<view :style="[state.capsuleStyle]"></view>
<!-- #endif -->
</view>
</view> </view>
</pb-fixed> <slot name="center">
<view :style="{ color: themeColor }" class="center navbar-title">{{ title }}</view>
</slot>
<!-- #ifdef MP -->
<view :style="[state.capsuleStyle]"></view>
<!-- #endif -->
</view>
</view>
</pb-fixed>
</template> </template>
<script setup> <script setup>
@ -67,302 +54,328 @@ import { showMenuTools, closeMenuTools } from '@/peach/hooks/useModal'
// 本地数据 // 本地数据
const state = reactive({ const state = reactive({
statusCur: '', statusCur: '',
capsuleStyle: {}, capsuleStyle: {},
capsuleBack: {}, capsuleBack: {},
isDark: true, isDark: true,
}) })
const sys_statusBar = peach.$platform.device.statusBarHeight const sys_statusBar = peach.$platform.device.statusBarHeight
const sys_navBar = peach.$platform.navbar const sys_navBar = peach.$platform.navBar
const props = defineProps({ const props = defineProps({
zIndex: { dark: {
type: Number, type: Boolean,
default: 100, default: false,
}, },
color: {
type: String,
default: '',
},
zIndex: {
type: Number,
default: 100,
},
leftIcon: { leftIcon: {
type: String, type: String,
default: '', default: '',
}, },
title: { title: {
//返回文本 //返回文本
type: String, type: String,
default: '', default: '',
}, },
bg: { bg: {
type: String, type: String,
default: 'bg-white', default: 'bg-white',
}, },
// 常驻 // 常驻
alway: { alway: {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
opacity: { opacity: {
//是否开启滑动渐变 //是否开启滑动渐变
type: Boolean, type: Boolean,
default: true, default: true,
}, },
noFixed: { noFixed: {
//是否浮动 //是否浮动
type: Boolean, type: Boolean,
default: true, default: true,
}, },
ui: { ui: {
type: String, type: String,
default: '', default: '',
}, },
capsule: { capsule: {
//是否开启胶囊返回 //是否开启胶囊返回
type: Boolean, type: Boolean,
default: false, default: false,
}, },
stopBack: { stopBack: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
placeholder: { placeholder: {
type: [Boolean], type: [Boolean],
default: false, default: false,
}, },
bgStyles: { bgStyles: {
type: Object, type: Object,
default() {}, default() { },
}, },
}) })
const emits = defineEmits(['navback', 'clickLeft']) const emits = defineEmits(['navback', 'clickLeft'])
const hasHistory = peach.$router.hasHistory() const hasHistory = peach.$router.hasHistory()
const themeColor = computed(() => {
if (props.dark) {
return props.color ? props.color : '#fff'
}
return props.color || '#333'
})
onBeforeMount(() => { onBeforeMount(() => {
init() init()
}) })
onPageScroll((e) => { onPageScroll((e) => {
let top = e.scrollTop let top = e.scrollTop
state.isDark = top < peach.$platform.navbar state.isDark = top < peach.$platform.navbar
}) })
function onClickLeft() { function onClickLeft() {
if (hasHistory) { if (hasHistory) {
peach.$router.back() peach.$router.back()
} else { } else {
peach.$router.go('/pages/index/index') peach.$router.go('/pages/index/index')
} }
emits('clickLeft') emits('clickLeft')
} }
function onClickRight() { function onClickRight() {
showMenuTools() showMenuTools()
} }
// 初始化 // 初始化
const init = () => { const init = () => {
// #ifdef MP-ALIPAY // #ifdef MP-ALIPAY
my.hideAllFavoriteMenu() my.hideAllFavoriteMenu()
// #endif // #endif
state.capsuleStyle = { state.capsuleStyle = {
width: peach.$platform.capsule.width + 'px', width: peach.$platform.capsule.width + 'px',
height: peach.$platform.capsule.height + 'px', height: peach.$platform.capsule.height + 'px',
} }
state.capsuleBack = state.capsuleStyle state.capsuleBack = state.capsuleStyle
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.icon-box { .icon-box {
box-shadow: 0px 0px 4rpx rgba(51, 51, 51, 0.08), 0px 4rpx 6rpx 2rpx rgba(102, 102, 102, 0.12); box-shadow: 0px 0px 4rpx rgba(51, 51, 51, 0.08), 0px 4rpx 6rpx 2rpx rgba(102, 102, 102, 0.12);
border-radius: 30rpx; border-radius: 30rpx;
width: 134rpx; width: 134rpx;
height: 56rpx;
margin-left: 8rpx;
border: 1px solid rgba(#fff, 0.4);
.line {
width: 2rpx;
height: 24rpx;
background: #e5e5e7;
}
.sicon-back {
font-size: 32rpx;
}
.sicon-home {
font-size: 32rpx;
}
.sicon-more {
font-size: 32rpx;
}
.icon-button {
width: 67rpx;
height: 56rpx; height: 56rpx;
margin-left: 8rpx;
border: 1px solid rgba(#fff, 0.4); &-left:hover {
.line { background: rgba(0, 0, 0, 0.16);
width: 2rpx; border-radius: 30rpx 0px 0px 30rpx;
height: 24rpx;
background: #e5e5e7;
} }
.sicon-back {
font-size: 32rpx; &-right:hover {
} background: rgba(0, 0, 0, 0.16);
.sicon-home { border-radius: 0px 30rpx 30rpx 0px;
font-size: 32rpx;
}
.sicon-more {
font-size: 32rpx;
}
.icon-button {
width: 67rpx;
height: 56rpx;
&-left:hover {
background: rgba(0, 0, 0, 0.16);
border-radius: 30rpx 0px 0px 30rpx;
}
&-right:hover {
background: rgba(0, 0, 0, 0.16);
border-radius: 0px 30rpx 30rpx 0px;
}
} }
}
} }
.navbar-title { .navbar-title {
font-size: 36rpx; font-size: 36rpx;
} }
.tools-icon { .tools-icon {
font-size: 40rpx; font-size: 40rpx;
} }
.ui-navbar-box { .ui-navbar-box {
background-color: transparent; background-color: transparent;
width: 100%;
.ui-bar {
position: relative;
z-index: 2;
white-space: nowrap;
display: flex;
position: relative;
align-items: center;
justify-content: space-between;
.left {
@include flex-bar;
.back {
@include flex-bar;
.back-icon {
@include flex-center;
width: 56rpx;
height: 56rpx;
margin: 0 10rpx;
font-size: 46rpx !important;
&.opacityIcon {
position: relative;
border-radius: 50%;
background-color: rgba(127, 127, 127, 0.5);
&::after {
content: '';
display: block;
position: absolute;
height: 200%;
width: 200%;
left: 0;
top: 0;
border-radius: inherit;
transform: scale(0.5);
transform-origin: 0 0;
opacity: 0.1;
border: 1px solid currentColor;
pointer-events: none;
}
&::before {
transform: scale(0.9);
}
}
}
/* #ifdef MP-ALIPAY */
._icon-back {
opacity: 0;
}
/* #endif */
}
.capsule {
@include flex-bar;
border-radius: 100px;
position: relative;
&.dark {
background-color: rgba(255, 255, 255, 0.5);
}
&.light {
background-color: rgba(0, 0, 0, 0.15);
}
&::after {
content: '';
display: block;
position: absolute;
height: 60%;
width: 1px;
left: 50%;
top: 20%;
background-color: currentColor;
opacity: 0.1;
pointer-events: none;
}
&::before {
content: '';
display: block;
position: absolute;
height: 200%;
width: 200%;
left: 0;
top: 0;
border-radius: inherit;
transform: scale(0.5);
transform-origin: 0 0;
opacity: 0.1;
border: 1px solid currentColor;
pointer-events: none;
}
.capsule-back,
.capsule-home {
@include flex-center;
flex: 1;
}
&.isFristPage {
.capsule-back,
&::after {
display: none;
}
}
}
}
.right {
@include flex-bar;
.right-content {
@include flex;
flex-direction: row-reverse;
}
}
.center {
@include flex-center;
text-overflow: ellipsis;
// text-align: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
.image {
display: block;
height: 36px;
max-width: calc(100vw - 200px);
}
}
}
.ui-bar-bg {
position: absolute;
width: 100%; width: 100%;
height: 100%;
.ui-bar { top: 0;
position: relative; z-index: 1;
z-index: 2; pointer-events: none;
white-space: nowrap; }
display: flex;
position: relative;
align-items: center;
justify-content: space-between;
.left {
@include flex-bar;
.back {
@include flex-bar;
.back-icon {
@include flex-center;
width: 56rpx;
height: 56rpx;
margin: 0 10rpx;
font-size: 46rpx !important;
&.opacityIcon {
position: relative;
border-radius: 50%;
background-color: rgba(127, 127, 127, 0.5);
&::after {
content: '';
display: block;
position: absolute;
height: 200%;
width: 200%;
left: 0;
top: 0;
border-radius: inherit;
transform: scale(0.5);
transform-origin: 0 0;
opacity: 0.1;
border: 1px solid currentColor;
pointer-events: none;
}
&::before {
transform: scale(0.9);
}
}
}
/* #ifdef MP-ALIPAY */
._icon-back {
opacity: 0;
}
/* #endif */
}
.capsule {
@include flex-bar;
border-radius: 100px;
position: relative;
&.dark {
background-color: rgba(255, 255, 255, 0.5);
}
&.light {
background-color: rgba(0, 0, 0, 0.15);
}
&::after {
content: '';
display: block;
position: absolute;
height: 60%;
width: 1px;
left: 50%;
top: 20%;
background-color: currentColor;
opacity: 0.1;
pointer-events: none;
}
&::before {
content: '';
display: block;
position: absolute;
height: 200%;
width: 200%;
left: 0;
top: 0;
border-radius: inherit;
transform: scale(0.5);
transform-origin: 0 0;
opacity: 0.1;
border: 1px solid currentColor;
pointer-events: none;
}
.capsule-back,
.capsule-home {
@include flex-center;
flex: 1;
}
&.isFristPage {
.capsule-back,
&::after {
display: none;
}
}
}
}
.right {
@include flex-bar;
.right-content {
@include flex;
flex-direction: row-reverse;
}
}
.center {
@include flex-center;
text-overflow: ellipsis;
// text-align: center;
position: absolute;
left: 50%;
transform: translateX(-50%);
.image {
display: block;
height: 36px;
max-width: calc(100vw - 200px);
}
}
}
.ui-bar-bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
z-index: 1;
pointer-events: none;
}
} }
</style> </style>

299
peach/ui/pb-layout/pb-layout.vue
View File

@ -1,40 +1,31 @@
<template> <template>
<view class="page-app" :class="['theme-' + sys.mode, 'main-' + sys.theme, 'font-' + sys.fontSize]"> <view class="page-app" :class="['theme-' + sys.mode, 'main-' + sys.theme, 'font-' + sys.fontSize]">
<view class="page-main" :style="[bgMain]"> <view class="page-main" :style="[bgMain]">
<!-- 顶部导航栏-情况1：默认通用顶部导航栏 --> <!-- 顶部导航栏-情况1：默认通用顶部导航栏 -->
<pb-navbar <pb-navbar v-if="navbar === 'normal'" :title="title" :leftIcon="leftIcon" statusBar :color="color" :tools="tools"
v-if="navbar === 'normal'" :opacityBgUi="opacityBgUi" @search="(e) => emits('search', e)" :defaultSearch="defaultSearch" />
:title="title" <view class="page-body" :style="[bgBody]">
:leftIcon="leftIcon" <!-- 顶部导航栏-情况2：沉浸式头部 -->
statusBar <pb-inner-navbar v-if="navbar === 'inner'" :color="color" :title="title" :leftIcon="leftIcon" />
:color="color" <view v-if="navbar === 'inner'" :style="[{ paddingTop: peach.$platform.navBar + 'px' }]"></view>
:tools="tools"
:opacityBgUi="opacityBgUi"
@search="(e) => emits('search', e)"
:defaultSearch="defaultSearch"
/>
<view class="page-body" :style="[bgBody]">
<!-- 顶部导航栏-情况2：沉浸式头部 -->
<pb-inner-navbar v-if="navbar === 'inner'" :title="title" :leftIcon="leftIcon" />
<view v-if="navbar === 'inner'" :style="[{ paddingTop: peach.$platform.navbar + 'px' }]"></view>
<!-- 页面内容插槽 --> <!-- 页面内容插槽 -->
<slot /> <slot />
<!-- 底部导航 --> <!-- 底部导航 -->
<pb-tabbar v-if="tabbar !== ''" :path="tabbar" /> <pb-tabbar v-if="tabbar !== ''" :path="tabbar" />
</view> </view>
</view>
<view class="page-modal">
<!-- 全局授权弹窗 -->
<!-- <p-auth-modal /> -->
<!-- 全局分享弹窗 -->
<!-- <p-share-modal :shareInfo="shareInfo" /> -->
<!-- 全局快捷入口 -->
<!-- <p-menu-tools /> -->
</view>
</view> </view>
<view class="page-modal">
<!-- 全局授权弹窗 -->
<!-- <p-auth-modal /> -->
<!-- 全局分享弹窗 -->
<!-- <p-share-modal :shareInfo="shareInfo" /> -->
<!-- 全局快捷入口 -->
<!-- <p-menu-tools /> -->
</view>
</view>
</template> </template>
<script setup> <script setup>
@ -59,62 +50,62 @@ import { onShareAppMessage } from '@dcloudio/uni-app'
// #endif // #endif
const props = defineProps({ const props = defineProps({
title: { title: {
type: String, type: String,
default: '', default: '',
}, },
leftIcon: { leftIcon: {
type: String, type: String,
default: '', default: '',
}, },
navbar: { navbar: {
type: String, type: String,
default: 'normal', default: 'normal',
}, },
opacityBgUi: { opacityBgUi: {
type: String, type: String,
default: 'bg-white', default: 'bg-white',
}, },
color: { color: {
type: String, type: String,
default: '', default: '',
}, },
tools: { tools: {
type: String, type: String,
default: 'title', default: 'title',
}, },
bgStyle: { bgStyle: {
type: Object, type: Object,
default: () => ({ default: () => ({
src: '', src: '',
color: 'var(--ui-BG-1)', color: 'var(--ui-BG-1)',
}), }),
}, },
tabbar: { tabbar: {
type: [String, Boolean], type: [String, Boolean],
default: '', default: '',
}, },
onShareAppMessage: { onShareAppMessage: {
type: [Boolean, Object], type: [Boolean, Object],
default: true, default: true,
}, },
leftWidth: { leftWidth: {
type: [Number, String], type: [Number, String],
default: 100, default: 100,
}, },
rightWidth: { rightWidth: {
type: [Number, String], type: [Number, String],
default: 100, default: 100,
}, },
defaultSearch: { defaultSearch: {
type: String, type: String,
default: '', default: '',
}, },
//展示返回按钮 //展示返回按钮
showLeftButton: { showLeftButton: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
}) })
const emits = defineEmits(['search']) const emits = defineEmits(['search'])
@ -126,102 +117,102 @@ const sys = computed(() => sysStore)
// 导航栏模式(因为有自定义导航栏 需要计算) // 导航栏模式(因为有自定义导航栏 需要计算)
const navbarMode = computed(() => { const navbarMode = computed(() => {
if (props.navbar === 'normal') { if (props.navbar === 'normal') {
return 'normal' return 'normal'
} }
return 'inner' return 'inner'
}) })
// 背景1 // 背景1
const bgMain = computed(() => { const bgMain = computed(() => {
if (navbarMode.value === 'inner') { if (navbarMode.value === 'inner') {
return { return {
background: `${props.bgStyle.backgroundColor} url(${peach.$url.static( background: `${props.bgStyle.backgroundColor} url(${peach.$url.static(
props.bgStyle.backgroundImage, props.bgStyle.backgroundImage,
props.bgStyle.imageType props.bgStyle.imageType
)}) no-repeat top center / 100% auto`, )}) no-repeat top center / 100% auto`,
}
} }
return {} }
return {}
}) })
// 背景2 // 背景2
const bgBody = computed(() => { const bgBody = computed(() => {
if (navbarMode.value === 'normal') { if (navbarMode.value === 'normal') {
return { return {
background: `${props.bgStyle.backgroundColor} url(${peach.$url.static( background: `${props.bgStyle.backgroundColor} url(${peach.$url.static(
props.bgStyle.backgroundImage, props.bgStyle.backgroundImage,
props.bgStyle.imageType props.bgStyle.imageType
)}) no-repeat top center / 100% auto`, )}) no-repeat top center / 100% auto`,
}
} }
return {} }
return {}
}) })
// 分享信息 // 分享信息
const shareInfo = computed(() => { const shareInfo = computed(() => {
if (props.onShareAppMessage === true) { if (props.onShareAppMessage === true) {
return peach.$platform.share.getShareInfo() return peach.$platform.share.getShareInfo()
} else { } else {
if (!isEmpty(props.onShareAppMessage)) { if (!isEmpty(props.onShareAppMessage)) {
// peach.$platform.share.updateShareInfo(props.onShareAppMessage) // peach.$platform.share.updateShareInfo(props.onShareAppMessage)
return props.onShareAppMessage return props.onShareAppMessage
}
} }
return {} }
return {}
}) })
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
// 微信小程序分享 // 微信小程序分享
onShareAppMessage(() => { onShareAppMessage(() => {
return { return {
title: shareInfo.value.title, title: shareInfo.value.title,
path: shareInfo.value.path, path: shareInfo.value.path,
imageUrl: shareInfo.value.image, imageUrl: shareInfo.value.image,
} }
}) })
// #endif // #endif
onShow(() => { onShow(() => {
if (!isEmpty(shareInfo.value)) { if (!isEmpty(shareInfo.value)) {
// peach.$platform.share.updateShareInfo(shareInfo.value) // peach.$platform.share.updateShareInfo(shareInfo.value)
} }
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.page-app { .page-app {
position: relative; position: relative;
color: var(--ui-TC); color: var(--ui-TC);
background-color: var(--ui-BG-1) !important; background-color: var(--ui-BG-1) !important;
z-index: 2; z-index: 2;
display: flex; display: flex;
width: 100%;
height: 100vh;
.page-main {
position: absolute;
z-index: 1;
width: 100%; width: 100%;
height: 100vh; min-height: 100%;
display: flex;
flex-direction: column;
.page-main { .page-body {
position: absolute; width: 100%;
z-index: 1; position: relative;
width: 100%; z-index: 1;
min-height: 100%; flex: 1;
display: flex;
flex-direction: column;
.page-body {
width: 100%;
position: relative;
z-index: 1;
flex: 1;
}
.page-img {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
} }
.page-img {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
}
} }
</style> </style>

BIN
static/data-empty.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 KiB