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

feat(积分)：积分管理

This commit is contained in:
Ankkaya 2024-06-17 18:16:46 +08:00
parent d5e3d34e0f
commit 5f257aaa63
17 changed files with 1295 additions and 757 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.env
View File

@ -17,4 +17,7 @@ MALL_DEV_PORT = 3000
MALL_STATIC_URL = https://file.sheepjs.com MALL_STATIC_URL = https://file.sheepjs.com
# 是否开启直播 1 开启直播 | 0 关闭直播 (小程序官方后台未审核开通直播权限时请勿开启) # 是否开启直播 1 开启直播 | 0 关闭直播 (小程序官方后台未审核开通直播权限时请勿开启)
MALL_MPLIVE_ON = 0 MALL_MPLIVE_ON = 0
# APP 下载地址
MALL_APP_DOWNLOAD_PATH = ''

3
pages.json
View File

@ -147,7 +147,8 @@
{ {
"path": "point/loglist", "path": "point/loglist",
"style": { "style": {
"navigationBarTitleText": "历史积分" "navigationBarTitleText": "历史积分",
"enablePullDownRefresh": true
}, },
"meta": { "meta": {
"auth": true "auth": true

25
pages/index/index.vue
View File

@ -1,12 +1,17 @@
<template> <template>
<pb-layout navbar="inner" tabbar="/pages/index/index" :bgStyle="bgStyle"> <pb-layout navbar="inner" tabbar="/pages/index/index" :bgStyle="bgStyle">
<view class="dashboard-module ss-p-x-30"> <view class="dashboard-module ss-p-x-30">
<view class="merchant-info flex align-center"> <view class="merchant-info flex align-center justify-between">
<image class="logo" :src="merchantInfo?.logo" mode="aspectFill"></image> <view class="flex align-center ss-gap-10">
<image class="logo" :src="merchantInfo?.logo" mode="aspectFill"></image>
<view class="detail flex flex-column justify-center gap-10"> <view class="detail flex flex-column justify-center gap-10">
<view class="name ss-font-26">{{ merchantInfo.name }}</view> <view class="name ss-font-26">{{ merchantInfo.name }}</view>
<view class="description ss-font-26">{{ merchantInfo?.contactPhone }}</view> <view class="description ss-font-26">{{ merchantInfo?.contactPhone }}</view>
</view>
</view>
<view @tap="checkVerifi">
<text style="color: #fff; font-size: 32px" class="cicon-scan"></text>
</view> </view>
</view> </view>
@ -19,7 +24,7 @@
<view class="unit self-start">￥</view> <view class="unit self-start">￥</view>
<view class="sincome ss-font-60">{{ state.statistic.todayPaymentAmount || 0 }}</view> <view class="sincome ss-font-60">{{ state.statistic.todayPaymentAmount || 0 }}</view>
</view> </view>
<button class="right-btn ss-reset-button">查看详情</button> <!-- <button class="right-btn ss-reset-button">查看详情</button> -->
</view> </view>
<view class="des ss-m-t-20"> <view class="des ss-m-t-20">
总销售额 {{ state.statistic.totalSalesAmount }} 元 | 成功退款 {{ state.statistic.refundCount }} 笔 | 总销售额 {{ state.statistic.totalSalesAmount }} 元 | 成功退款 {{ state.statistic.refundCount }} 笔 |
@ -110,6 +115,14 @@ async function getStatistic() {
state.value.more[3].value = res.data.deliveryOrderCount state.value.more[3].value = res.data.deliveryOrderCount
} }
/**
* @author Ankkaya
* @description 核销
* @param {Type} -
* @returns {Type}
*/
function checkVerifi() {}
onShow(() => { onShow(() => {
getStatistic() getStatistic()
}) })

19
pages/index/my.vue
View File

@ -1,12 +1,21 @@
<template> <template>
<pb-layout navbar="inner" tabbar="/pages/index/my" :bgStyle="bgStyle"> <pb-layout navbar="inner" tabbar="/pages/index/my" :bgStyle="bgStyle">
<view class="my-module ss-p-x-30"> <view class="my-module ss-p-x-30">
<view class="user-info flex align-center"> <view class="user-info flex align-center justify-between">
<image class="avatar" :src="userInfo.avatar || '/static/default_avatar.png'" mode="aspectFill"></image> <view class="flex align-center ss-gap-10">
<image
class="avatar"
:src="userInfo.avatar || '/static/default_avatar.png'"
mode="aspectFill"
></image>
<view class="detail flex flex-column justify-center gap-10"> <view class="detail flex flex-column justify-center gap-10">
<view class="name ss-font-26">{{ userInfo.nickname }}</view> <view class="name ss-font-26">{{ userInfo.nickname }}</view>
<view class="description ss-font-26">{{ userInfo.mobile }}</view> <view class="description ss-font-26">{{ userInfo.mobile }}</view>
</view>
</view>
<view>
<text style="color: #fff; font-size: 20px" class="cicon-settings-o"></text>
</view> </view>
</view> </view>

275
pages/user/point/buy.vue
View File

@ -1,167 +1,176 @@
<template> <template>
<pb-layout navbar="inner" iconColor="#fff" class="buy-point-wrap" leftIcon="leftIcon" color="#fff" title="购买积分" <pb-layout
:bgStyle="bgStyle"> navbar="inner"
<view class="title ss-m-t-80"> iconColor="#fff"
<view class="main">购买商城积分</view> class="buy-point-wrap"
<view class="sub ss-flex ss-row-center ss-m-t-55"><text style="color: #F3D3BF;" leftIcon="leftIcon"
class="cicon-safe"></text>订单多多·出单多多<text style="color: #F3D3BF;" class="cicon-safe"></text></view> color="#fff"
</view> title="购买积分"
:bgStyle="bgStyle"
<view class="middle ss-m-t-150 ss-flex-col ss-row-center ss-col-center ss-gap-40"> >
<view class="title">积分额度选择</view> <view class="title ss-m-t-80">
<view class="sub">专属您的积分</view> <view class="main">购买商城积分</view>
</view> <view class="sub ss-flex ss-row-center ss-m-t-55"
><text style="color: #f3d3bf" class="cicon-safe"></text>订单多多·出单多多<text
<view class="combo ss-m-t-90 ss-m-b-50 ss-p-x-40"> style="color: #f3d3bf"
<button class="ss-reset-button draw-btn ui-Shadow-Main">购买5000积分/50元</button> class="cicon-safe"
<button class="ss-reset-button draw-btn-raw ui-Shadow-Main">购买5000积分/50元</button> ></text
</view> ></view>
<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="rgba(243, 192, 156, 1)" 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> </view>
</label>
</view>
</pb-layout> <view class="middle ss-m-t-150 ss-flex-col ss-row-center ss-col-center ss-gap-40">
<view class="title">积分额度选择</view>
<view class="sub">专属您的积分</view>
</view>
<view class="combo ss-m-t-90 ss-m-b-50 ss-p-x-40">
<button class="ss-reset-button draw-btn ui-Shadow-Main">购买5000积分/50元</button>
<button class="ss-reset-button draw-btn-raw ui-Shadow-Main">购买5000积分/50元</button>
</view>
<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="rgba(243, 192, 156, 1)"
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>
</pb-layout>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue' import { ref } from 'vue'
const state = ref({ const state = ref({
isShaking: false, isShaking: false,
agreeStatus: false, agreeStatus: false,
}) })
const bgStyle = { const bgStyle = {
backgroundImage: '/static/point.png', backgroundImage: '/static/point.png',
imageType: 'local', imageType: 'local',
backgroundColor: '#fff', backgroundColor: '#fff',
description: '', description: '',
height: '100%',
} }
function onProtocol(title) { function onProtocol(title) {}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.buy-point-wrap { .buy-point-wrap {
.title {
.main {
font-size: 80rpx;
color: rgba(232, 181, 150, 1);
letter-spacing: 20px;
position: relative;
left: 20px;
}
.sub {
font-size: 32rpx;
color: #f3d3bf;
letter-spacing: 4px;
}
}
.middle {
.title { .title {
font-size: 39rpx; .main {
color: #fccdb1; font-size: 80rpx;
color: rgba(232, 181, 150, 1);
letter-spacing: 20px;
position: relative;
left: 20px;
}
.sub {
font-size: 32rpx;
color: #f3d3bf;
letter-spacing: 4px;
}
} }
.title::before { .middle {
content: ""; .title {
display: block; font-size: 39rpx;
width: 80px; color: #fccdb1;
position: relative; }
left: -100px;
top: 14px; .title::before {
border-bottom: 1px dotted #e7b493; content: '';
display: block;
width: 80px;
position: relative;
left: -100px;
top: 14px;
border-bottom: 1px dotted #e7b493;
}
.title::after {
content: '';
display: block;
width: 80px;
position: relative;
left: 130px;
top: -12px;
border-bottom: 1px dotted #e7b493;
}
.sub {
background-color: #e7b493;
border-radius: 18rpx;
border: 1px solid #979797;
letter-spacing: 5px;
padding: 0 10rpx 0 18rpx;
font-size: 24rpx;
}
} }
.title::after { .combo {
content: ""; .draw-btn {
display: block; height: 82rpx;
width: 80px; line-height: normal;
position: relative; background: linear-gradient(-90deg, rgba(230, 179, 147, 1), rgba(250, 232, 218, 1));
left: 130px; border-radius: 28rpx;
top: -12px; font-size: 32rpx;
border-bottom: 1px dotted #e7b493; font-weight: 500;
}
.draw-btn-raw {
height: 82rpx;
line-height: normal;
background: transparent;
border-radius: 28rpx;
font-size: 32rpx;
font-weight: 500;
color: #e7b493;
border: 1px solid #e7b493;
margin-top: 20px;
}
} }
.sub { .agreement-box {
background-color: #e7b493; width: 100%;
border-radius: 18rpx;
border: 1px solid #979797;
letter-spacing: 5px;
padding: 0 10rpx 0 18rpx;
font-size: 24rpx;
}
}
.combo { .protocol-check {
transform: scale(0.7);
}
.draw-btn { .agreement-text {
height: 82rpx; font-size: 26rpx;
line-height: normal; font-weight: 500;
background: linear-gradient(-90deg, rgba(230, 179, 147, 1), rgba(250, 232, 218, 1)); color: #999999;
border-radius: 28rpx;
font-size: 32rpx; .tcp-text {
font-weight: 500; color: rgba(243, 192, 156, 1);
}
}
} }
.draw-btn-raw { .shake {
height: 82rpx; animation: shake 0.05s linear 4 alternate;
line-height: normal;
background: transparent;
border-radius: 28rpx;
font-size: 32rpx;
font-weight: 500;
color: #e7b493;
border: 1px solid #E7B493;
margin-top: 20px;
}
}
.agreement-box {
width: 100%;
.protocol-check {
transform: scale(0.7);
} }
.agreement-text { @keyframes shake {
font-size: 26rpx; from {
font-weight: 500; transform: translateX(-5rpx);
color: #999999; }
.tcp-text { to {
color: rgba(243, 192, 156, 1); transform: translateX(5rpx);
} }
} }
}
.shake {
animation: shake 0.05s linear 4 alternate;
}
@keyframes shake {
from {
transform: translateX(-5rpx);
}
to {
transform: translateX(5rpx);
}
}
} }
</style> </style>

157
pages/user/point/loglist.vue
View File

@ -1,105 +1,126 @@
<template> <template>
<pb-layout navbar="inner" iconColor="#fff" class="loglist-point-wrap" leftIcon="leftIcon" color="#fff" title="分发积分" <pb-layout
:bgStyle="bgStyle"> navbar="inner"
<view> iconColor="#fff"
<p-empty v-if="state.pagination.total === 0" icon="/static/order-empty.png" text="暂无记录" bgColor="transparent" /> class="loglist-point-wrap"
leftIcon="leftIcon"
color="#fff"
title="历史积分"
:bgStyle="bgStyle"
>
<view>
<p-empty
v-if="state.pagination.total === 0"
icon="/static/order-empty.png"
text="暂无记录"
bgColor="transparent"
/>
<view v-if="state.pagination.total > 0"> <view v-if="state.pagination.total > 0">
<view v-for="item in state.pagination.list" class=" log-point-item ss-font-26"> <view v-for="item in state.pagination.list" class="log-point-item ss-font-26">
<view class="top ss-flex ss-row-between ss-m-b-20"> <view class="top ss-flex ss-row-between ss-m-b-20">
<view class="label">积分</view> <view class="label">积分</view>
<view class="date">{{ item.date }}</view> <view class="date">{{ item.date }}</view>
</view> </view>
<view class="bottom ss-flex ss-row-between"> <view class="bottom ss-flex ss-row-between">
<view class="last">{{ item.last }}</view> <view class="last">{{ item.last }}</view>
<view class="change">{{ item.income }}</view> <view class="change">{{ item.income }}</view>
</view> </view>
</view>
</view>
</view> </view>
</view>
</view>
<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus" <uni-load-more
:content-text="{ contentdown: '上拉加载更多' }" /> v-if="state.pagination.total > 0"
</pb-layout> :status="state.loadStatus"
:content-text="{ contentdown: '上拉加载更多' }"
/>
</pb-layout>
</template> </template>
<script setup> <script setup>
import { ref } from 'vue' import { ref } from 'vue'
import { resetPagination } from '@/peach/utils' import { resetPagination } from '@/peach/utils'
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app' import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
import PointApi from '@/peach/api/pay/point'
const bgStyle = { const bgStyle = {
backgroundImage: '/static/point.png', backgroundImage: '/static/point.png',
imageType: 'local', imageType: 'local',
backgroundColor: '#fff' backgroundColor: '#fff',
height: '100%',
} }
const state = ref({ const state = ref({
currentTab: 0, currentTab: 0,
pagination: { pagination: {
list: [ list: [
{ {
last: 50000, last: 50000,
date: '2022-05-30', date: '2022-05-30',
income: '+1000' income: '+1000',
}, },
{ {
last: 50000, last: 50000,
date: '2022-05-30', date: '2022-05-30',
income: '-1000' income: '-1000',
} },
], ],
total: 2, total: 2,
pageNo: 1, pageNo: 1,
pageSize: 6, pageSize: 6,
}, },
loadStatus: '', loadStatus: '',
}) })
function getLogList() { } async function getLogList() {
let { data } = await PointApi.getPointList({
pageNo: state.value.pagination.pageNo,
pageSize: state.value.pagination.pageSize,
})
state.value.total = data.total
state.value.list = data.list
}
// 加载更多 // 加载更多
function loadMore() { function loadMore() {
if (state.value.loadStatus === 'noMore') { if (state.value.loadStatus === 'noMore') {
return return
} }
state.value.pagination.pageNo++ state.value.pagination.pageNo++
getLogList() getLogList()
} }
// 上拉加载更多 // 上拉加载更多
onReachBottom(() => { onReachBottom(() => {
loadMore() loadMore()
}) })
// 下拉刷新 // 下拉刷新
onPullDownRefresh(() => { onPullDownRefresh(() => {
resetPagination(state.value.pagination) resetPagination(state.value.pagination)
getLogList() getLogList()
setTimeout(function () { setTimeout(function () {
uni.stopPullDownRefresh() uni.stopPullDownRefresh()
}, 800) }, 800)
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.loglist-point-wrap { .loglist-point-wrap {
.log-point-item { .log-point-item {
border-bottom: 1px solid rgba(231, 180, 147, .2); border-bottom: 1px solid rgba(231, 180, 147, 0.2);
margin: 30rpx 40rpx; margin: 30rpx 40rpx;
padding-bottom: 30rpx; padding-bottom: 30rpx;
.top, .top,
.bottom { .bottom {
color: #E7B493; color: #e7b493;
}
} }
}
.log-point-item:last-child { .log-point-item:last-child {
border-bottom: none; border-bottom: none;
} }
} }
</style> </style>

293
pages/user/point/share.vue
View File

@ -1,124 +1,243 @@
<template> <template>
<pb-layout navbar="inner" iconColor="#fff" class="share-point-wrap" leftIcon="leftIcon" color="#fff" title="分发积分" <pb-layout
:bgStyle="bgStyle"> navbar="inner"
<view class="title ss-m-t-80"> iconColor="#fff"
<view class="main">分发积分</view> class="share-point-wrap"
<view class="sub ss-flex ss-row-center ss-m-t-55"><text style="color: #F3D3BF;" leftIcon="leftIcon"
class="cicon-safe"></text>订单多多·出单多多<text style="color: #F3D3BF;" class="cicon-safe"></text></view> color="#fff"
</view> title="分发积分"
right="历史积分"
<view class="user-search"> :bgStyle="bgStyle"
<view class="search"> >
<uni-easyinput :styles="{ backgroundColor: 'transparent', color: '#E7B493' }" placeholderStyle="color: #E7B493;" <view class="title ss-m-t-80">
:clearable="false" :inputBorder="false" type="number" trim="all" suffixIcon="search" placeholder="请输入用户名" /> <view class="main">分发积分</view>
</view> <view class="sub ss-flex ss-row-center ss-m-t-55"
<view class="result" :style="{ height: resultHeight, overflow: 'auto' }"> ><text style="color: #f3d3bf" class="cicon-safe"></text>订单多多·出单多多<text
<view v-for="item in 10" class="user ss-flex ss-row-between ss-col-center"> style="color: #f3d3bf"
<view class="user-info ss-flex ss-col-center ss-gap-20"> class="cicon-safe"
<image style="width: 48rpx; height: 48rpx;" src="/static/default_avatar.png" /> ></text
<view class="nickname">哈哈哈</view> ></view>
</view>
<view class="input-point">
<uni-easyinput :styles="{ backgroundColor: 'transparent', color: '#E7B493' }"
:placeholderStyle="placeholderStyle" :clearable="false" :inputBorder="false" type="number" trim="all"
placeholder="请输入积分额度" />
</view>
</view> </view>
</view>
</view>
</pb-layout> <view class="user-search">
<view class="search">
<uni-easyinput
v-model="state.inputData"
:styles="{ backgroundColor: 'transparent', color: '#E7B493' }"
placeholderStyle="color: #E7B493;"
@input="inputUserFunc"
:clearable="false"
:inputBorder="false"
trim="all"
suffixIcon="search"
placeholder="请输入用户名/手机号"
/>
</view>
<view class="result" :style="{ height: resultHeight, overflow: 'auto' }">
<view v-for="item in state.userList" class="user ss-flex ss-row-between ss-col-center">
<view class="user-info ss-flex ss-col-center ss-gap-20">
<image
style="width: 48rpx; height: 48rpx; border-radius: 50%"
:src="item.avatar ? item.avatar : '/static/default_avatar.png'"
/>
<view class="nickname">{{ item.nickname }}</view>
</view>
<view class="input-point">
<uni-easyinput
:styles="{ backgroundColor: 'transparent', color: '#E7B493' }"
:placeholderStyle="placeholderStyle"
v-model="item.point"
:clearable="false"
:inputBorder="false"
@input="inputPointFunc(item)"
type="number"
trim="all"
placeholder="请输入积分额度"
/>
</view>
</view>
</view>
</view>
<view class="ss-p-x-30 bottom">
<button class="ss-reset-button share-btn" @tap="confirmShare">确定</button>
</view>
</pb-layout>
</template> </template>
<script setup> <script setup>
import { ref, computed } from 'vue' import { ref, computed } from 'vue'
import PointApi from '@/peach/api/pay/point'
import UserUtil from '@/peach/api/member/user'
import peach from '@/peach' import peach from '@/peach'
const placeholderStyle = ref('color: #E7B493') const placeholderStyle = ref('color: #E7B493')
const resultHeight = computed(() => { const resultHeight = computed(() => {
return `calc(100vh - 728rpx)` return `calc(100vh - 728rpx)`
}) })
const state = ref({ const state = ref({
isShaking: false, inputData: '',
agreeStatus: false, userList: [],
isShaking: false,
agreeStatus: false,
userParams: {
mobile: '',
nickname: '',
pageNo: 1,
pageSize: 10,
},
pointParams: {
memberId: '',
point: '',
},
}) })
const bgStyle = { const bgStyle = {
backgroundImage: '/static/point.png', backgroundImage: '/static/point.png',
imageType: 'local', imageType: 'local',
backgroundColor: '#fff', backgroundColor: '#fff',
description: '', description: '',
height: '100%',
} }
function onProtocol(title) { let timer
function inputUserFunc() {
clearTimeout(timer)
timer = setTimeout(() => {
getUserList()
}, 1000)
} }
async function confirmShare() {
if (!state.value.pointParams.memberId) {
peach.$helper.toast('请选择要赠送的用户')
return
}
if (!state.value.pointParams.point) {
peach.$helper.toast('请输入要赠送的积分')
return
}
await PointApi.sendPoint(state.value.pointParams)
uni.showToast({
title: '赠送成功',
icon: 'none',
success: () => {
state.value.inputData = ''
getUserList()
},
})
}
function inputPointFunc(data) {
state.value.userList.forEach((item) => {
if (data.id !== item.id) item.point = ''
})
state.value.pointParams.memberId = data.id
state.value.pointParams.point = data.point
}
async function getUserList() {
// 清空 userParams 数据
state.value.userParams = {
mobile: '',
nickname: '',
pageNo: 1,
pageSize: 10,
}
// 判断 inputData 的输入类型
// 如果 string 是纯数字
if (/^\d+$/.test(state.value.inputData)) {
state.value.userParams.mobile = state.value.inputData
} else {
state.value.userParams.nickname = state.value.inputData
}
let { data } = await UserUtil.getUserList(state.value.userParams)
data.list.forEach((item) => {
item.point = ''
})
state.value.userList = data.list
}
function onProtocol(title) {}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.share-point-wrap { .share-point-wrap {
.title {
.main {
font-size: 80rpx;
color: rgba(232, 181, 150, 1);
letter-spacing: 20px;
position: relative;
left: 10px;
text-align: center;
}
.title { .sub {
.main { font-size: 32rpx;
font-size: 80rpx; color: #f3d3bf;
color: rgba(232, 181, 150, 1); letter-spacing: 4px;
letter-spacing: 20px; }
position: relative;
left: 10px;
text-align: center;
} }
.sub { .user-search {
font-size: 32rpx; margin: 50rpx 40rpx 0;
color: #f3d3bf;
letter-spacing: 4px;
}
}
.user-search { .search {
margin: 50rpx 40rpx 0; border: 1px solid #e7b493;
border-radius: 30px;
}
.search { :deep(.uniui-search) {
border: 1px solid #E7B493; color: #e7b493 !important;
border-radius: 30px; padding-right: 10px;
}
:deep(.uni-easyinput__content-input) {
padding-left: 15px !important;
}
.result {
.user {
margin-top: 20px;
border: 1px solid #e7b493;
border-radius: 30px;
padding: 0 40rpx;
.user-info {
.nickname {
font-size: 26rpx;
color: #e7b493;
}
}
.input-point {
:deep(.uni-easyinput__content-input) {
text-align: right;
}
}
}
}
} }
:deep(.uniui-search) { .bottom {
color: #E7B493 !important; position: absolute;
padding-right: 10px; bottom: 20px;
} width: calc(100% - 60rpx);
:deep(.uni-easyinput__content-input) { .share-btn {
padding-left: 15px !important; height: 82rpx;
} line-height: normal;
background: linear-gradient(-90deg, rgba(230, 179, 147, 1), rgba(250, 232, 218, 1));
.result { border-radius: 28rpx;
.user {
margin-top: 20px;
border: 1px solid #E7B493;
border-radius: 30px;
padding: 0 40rpx;
.user-info {
.nickname {
font-size: 26rpx; font-size: 26rpx;
color: #E7B493; font-weight: 500;
}
} }
.input-point {
:deep(.uni-easyinput__content-input) {
text-align: right;
}
}
}
} }
}
} }
</style> </style>

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

@ -63,10 +63,10 @@
import { computed, reactive } from 'vue' import { computed, reactive } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app' import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import peach from '@/peach' import peach from '@/peach'
import dayjs from 'dayjs'
import _ from 'lodash' import _ from 'lodash'
import PayWalletApi from '@/peach/api/pay/wallet'
import { fen2yuan } from '@/peach/hooks/useGoods' import { fen2yuan } from '@/peach/hooks/useGoods'
import dayjs from 'dayjs'
import PayWalletApi from '@/peach/api/pay/wallet'
import { resetPagination } from '@/peach/utils' import { resetPagination } from '@/peach/utils'
const bgStyle = { const bgStyle = {

17
peach/api/member/user.js
View File

@ -24,6 +24,23 @@ const UserUtil = {
method: 'GET', method: 'GET',
}) })
}, },
/**
* @author Ankkaya
* @description 用户列表
* @param {String} mobile - 手机号
* @param {String} nickname - 用户昵称
* @param {Number} pageNo - 页码
* @param {Number} pageSize - 每页条数
* @returns {Type}
*/
getUserList: (data) => {
return request({
url: '/particulars/point/page-member',
method: 'GET',
params: data,
})
},
} }
export default UserUtil export default UserUtil

28
peach/api/pay/point.js Normal file
View File

@ -0,0 +1,28 @@
import request from '@/peach/request'
const PointApi = {
/**
* @author Ankkaya
* @description 分发积分
* @param {String} memberId - 用户 id
* @param {Number} point - 积分
* @returns {Type}
*/
sendPoint: (data) => {
return request({
url: '/particulars/point/send-member',
method: 'post',
data,
})
},
getPointList: (data) => {
return request({
url: '/particulars/point/page-record',
method: 'get',
params: data,
})
},
}
export default PointApi

114
peach/components/p-menu-tools/p-menu-tools.vue Normal file
View File

@ -0,0 +1,114 @@
<!-- 全局 - 快捷入口 -->
<template>
<uni-popup
ref="popupRef"
type="top"
borderRadius="0 0 20px 20px"
backgroundColor="#F0F0F0"
@close="closeMenuTools"
@maskClick="closeMenuTools"
>
<pb-status-bar />
<view class="tools-wrap ss-m-x-30 ss-m-b-16">
<view class="title ss-m-b-34 ss-p-t-20">快捷菜单</view>
<view class="container-list ss-flex ss-flex-wrap">
<view class="list-item ss-m-b-24" v-for="item in list" :key="item.title">
<view class="ss-flex-col ss-col-center">
<button
class="ss-reset-button list-image ss-flex ss-row-center ss-col-center"
@tap="onClick(item)"
>
<image v-if="show" :src="peach.$url.static(item.icon, 'local')" class="list-icon" />
</button>
<view class="list-title ss-m-t-20">{{ item.title }}</view>
</view>
</view>
</view>
</view>
</uni-popup>
</template>
<script setup>
import { ref, watch, computed } from 'vue'
import peach from '@/peach'
import { closeMenuTools } from '@/peach/hooks/useModal'
const popupRef = ref()
const show = computed(() => peach.$store('modal').menu)
watch(show, (newVal) => {
if (newVal) {
popupRef.value.open()
} else {
popupRef.value.close()
}
})
function onClick(item) {
closeMenuTools()
if (item.url) peach.$router.redirect(item.url)
}
const list = [
{
url: '/pages/user/point/share',
icon: '/static/dispensecent.png',
title: '分发积分',
},
{
url: '/pages/user/point/buy',
icon: '/static/buycent.png',
title: '购买积分',
},
{
url: '/pages/user/wallet/withdraw',
icon: '/static/withdraw.png',
title: '余额提现',
},
]
</script>
<style lang="scss" scoped>
.tools-wrap {
// background: #F0F0F0;
// box-shadow: 0px 0px 28rpx 7rpx rgba(0, 0, 0, 0.13);
// opacity: 0.98;
// border-radius: 0 0 20rpx 20rpx;
.title {
font-size: 36rpx;
font-weight: bold;
color: #333333;
}
.list-item {
width: calc(25vw - 20rpx);
.list-image {
width: 104rpx;
height: 104rpx;
border-radius: 52rpx;
background: var(--ui-BG);
.list-icon {
width: 54rpx;
height: 54rpx;
}
}
.list-title {
font-size: 26rpx;
font-weight: 500;
color: #333333;
}
}
}
.uni-popup {
top: 0 !important;
}
:deep(.button-hover) {
background: #fafafa !important;
}
</style>

27
peach/helper/index.js
View File

@ -673,7 +673,34 @@ export function copyText(text) {
// #endif // #endif
} }
/**
* @desc 函数防抖
* @param func 目标函数
* @param wait 延迟执行毫秒数
* @param immediate true - 立即执行， false - 延迟执行
*/
export const debounce = function (func, wait = 1000, immediate = true) {
let timer
return function () {
let context = this,
args = arguments
if (timer) clearTimeout(timer)
if (immediate) {
let callNow = !timer
timer = setTimeout(() => {
timer = null
}, wait)
if (callNow) func.apply(context, args)
} else {
timer = setTimeout(() => {
func.apply(context, args)
}, wait)
}
}
}
export default { export default {
debounce,
range, range,
getPx, getPx,
sleep, sleep,

37
peach/platform/index.js
View File

@ -1,6 +1,42 @@
import share from './share' import share from './share'
import android from './provider/android'
const device = uni.getSystemInfoSync() const device = uni.getSystemInfoSync()
const os = device.platform
let name = ''
let provider = ''
let platform = ''
let isWechatInstalled = true
// #ifdef APP-PLUS
name = 'App'
platform = 'openPlatform'
// 检查微信客户端是否安装，否则 AppleStore 会因此拒绝上架
if (os === 'ios') {
provider = 'ios'
isWechatInstalled = plus.ios.import('WXApi').isWXapiInstalled()
} else {
provider = 'android'
}
// #endif
function useProvider() {
if (provider === 'android') {
return android
}
}
/**
* @author Ankkaya
* @description 检查更新
* @param {Type} -
* @returns {Type}
*/
function checkUpdate() {
useProvider().checkUpdate()
}
/** /**
* @author Ankkaya * @author Ankkaya
@ -68,6 +104,7 @@ const _platform = {
navBar, navBar,
capsule, capsule,
checkNetwork, checkNetwork,
checkUpdate,
} }
export default _platform export default _platform

95
peach/platform/provider/android/index.js Normal file
View File

@ -0,0 +1,95 @@
const device = uni.getSystemInfoSync()
/**
* @author Ankkaya
* @description 检查更新
* @param {String} newVersion - 最新版本
* @returns {Type}
*/
function checkUpdate(newVersion) {
plus.runtime.getProperty(plus.runtime.appid, (wgtInfo) => {
if (String(device.platform).toLowerCase() === 'android') {
console.log(wgtInfo)
if (wgtInfo.version !== newVersion) {
uni.showModal({
title: '温馨提示',
content: '发现新版本APP，您是否要升级体验?',
cancelText: '暂时忽略',
confirmText: '立即升级',
success: (action) => {
if (action.confirm) {
// 下载 app
downLoadApp()
} else {
// 忽略
}
},
})
}
}
})
}
function downLoadApp() {
let percent = 0
let downnUrl = import.meta.env.MALL_APP_DOWNLOAD_PATH
let dtask = plus.downloader.createDownload(downnUrl, {}, (d, status) => {
if (status == 200) {
let path = d.filename
plus.runtime.install(path, {}, () => {})
} else {
uni.showToast({
title: '下载失败',
icon: 'none',
})
}
})
try {
dtask.start()
let showLoading = plus.nativeUI.showWaiting('正在下载...')
dtask.addEventListener('statechanged', (download, status) => {
switch (download.state) {
case 1:
showLoading.setTitle('正在下载...')
break
case 2:
showLoading.setTitle('已连接到服务器')
break
case 3:
percent = parseInt((parseFloat(download.downloadedSize) / parseFloat(download.totalSize)) * 100)
showLoading.setTitle(`正在下载` + percent + '%')
break
case 4:
plus.nativeUI.closeWaiting()
break
}
})
} catch (e) {
plus.nativeUI.closeWaiting()
uni.showToast({
title: '更新失败!',
icon: 'none',
})
}
}
/**
* @author Ankkaya
* @description 本地版本
* @param {Type} -
* @returns {Type}
*/
function getVersion() {
let version = ''
plus.runtime.getProperty(plus.runtime.appid, (wgtInfo) => {
version = wgtInfo.version
})
return version
}
export default {
checkUpdate,
downLoadApp,
getVersion,
}

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

@ -1,30 +1,49 @@
<template> <template>
<pb-fixed :noFixed="props.noFixed" :alway="props.alway" :bgStyles="props.bgStyles" :val="0" :index="props.zIndex" <pb-fixed
noNav :bg="props.bg" :ui="props.ui" :opacity="props.opacity" :placeholder="props.placeholder"> :noFixed="props.noFixed"
<pb-status-bar /> :alway="props.alway"
: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 class="ui-bar ss-p-x-20" :class="state.isDark ? 'text-white' : 'text-black'" <view
:style="[{ height: sys_navBar - sys_statusBar + 'px' }]"> class="ui-bar ss-p-x-20"
<view v-if="leftIcon" class="icon-box ss-flex"> :class="state.isDark ? 'text-white' : 'text-black'"
<view class="icon-button icon-button-left ss-flex ss-row-center" @tap="onClickLeft"> :style="[{ height: sys_navBar - sys_statusBar + 'px' }]"
<text class="sicon-back" v-if="hasHistory" /> >
<text class="sicon-home" v-else /> <view v-if="leftIcon" class="icon-box ss-flex">
</view> <view class="icon-button icon-button-left ss-flex ss-row-center" @tap="onClickLeft">
<view class="line"></view> <text class="sicon-back" v-if="hasHistory" />
<view class="icon-button icon-button-right ss-flex ss-row-center" @tap="onClickRight"> <text class="sicon-home" v-else />
<text class="sicon-more" /> </view>
</view> <view class="line"></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 :style="{ color: themeColor }" class="center navbar-title">{{ title }}</view>
</slot>
<!-- #ifndef MP -->
<view v-if="props.right" style="color: #fff" @tap="rightTap">
{{ props.right }}
</view>
<!-- #endif -->
<!-- #ifdef MP -->
<view :style="[state.capsuleStyle]"></view>
<!-- #endif -->
</view>
</view> </view>
<slot name="center"> </pb-fixed>
<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>
@ -44,7 +63,7 @@
* @param {Boolean} stopBack = false - 是否禁用返回 * @param {Boolean} stopBack = false - 是否禁用返回
* @param {Boolean} placeholder = true - 是否开启占位 * @param {Boolean} placeholder = true - 是否开启占位
* @param {Object} bgStyles = {} - 背景样式 * @param {Object} bgStyles = {} - 背景样式
* * @param {Boolean} right - 右侧显示内容
*/ */
import { computed, reactive, onBeforeMount, ref } from 'vue' import { computed, reactive, onBeforeMount, ref } from 'vue'
@ -54,336 +73,343 @@ 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({
dark: { dark: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
color: { color: {
type: String, type: String,
default: '', default: '',
}, },
zIndex: { zIndex: {
type: Number, type: Number,
default: 100, default: 100,
}, },
leftIcon: { leftIcon: {
type: String, type: String,
default: '', default: '',
}, },
iconColor: { iconColor: {
type: String, type: String,
default: '#000' default: '#000',
}, },
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() {},
}, },
right: {
type: String,
default: null,
},
}) })
const emits = defineEmits(['navback', 'clickLeft']) const emits = defineEmits(['navback', 'clickLeft'])
const hasHistory = peach.$router.hasHistory() const hasHistory = peach.$router.hasHistory()
const themeColor = computed(() => { const themeColor = computed(() => {
if (props.dark) { if (props.dark) {
return props.color ? props.color : '#fff' return props.color ? props.color : '#fff'
} }
return props.color || '#333' 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()
}
function rightTap() {
peach.$router.go('/pages/user/point/loglist')
} }
// 初始化 // 初始化
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;
color: v-bind(iconColor)
}
.sicon-home {
font-size: 32rpx;
color: v-bind(iconColor)
}
.sicon-more {
font-size: 32rpx;
color: v-bind(iconColor)
}
.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;
} }
&-right:hover { .sicon-back {
background: rgba(0, 0, 0, 0.16); font-size: 32rpx;
border-radius: 0px 30rpx 30rpx 0px; color: v-bind(iconColor);
}
.sicon-home {
font-size: 32rpx;
color: v-bind(iconColor);
}
.sicon-more {
font-size: 32rpx;
color: v-bind(iconColor);
}
.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%;
top: 0; .ui-bar {
z-index: 1; position: relative;
pointer-events: none; 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%;
height: 100%;
top: 0;
z-index: 1;
pointer-events: none;
}
} }
</style> </style>

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

@ -1,32 +1,47 @@
<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 v-if="navbar === 'normal'" :title="title" :leftIcon="leftIcon" statusBar :color="color" :tools="tools" <pb-navbar
:opacityBgUi="opacityBgUi" @search="(e) => emits('search', e)" :defaultSearch="defaultSearch" /> v-if="navbar === 'normal'"
<view class="page-body" :style="[bgBody]"> :title="title"
<!-- 顶部导航栏-情况2：沉浸式头部 --> :leftIcon="leftIcon"
<pb-inner-navbar v-if="navbar === 'inner'" :iconColor="iconColor" :color="color" :title="title" statusBar
: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'"
:iconColor="iconColor"
:color="color"
:right="props.right"
: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>
@ -51,66 +66,70 @@ 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,
}, },
iconColor: { iconColor: {
type: String, type: String,
default: '#000' default: '#000',
} },
right: {
type: String,
default: null,
},
}) })
const emits = defineEmits(['search']) const emits = defineEmits(['search'])
@ -122,102 +141,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% ${props.bgStyle.height || '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;
width: 100%;
height: 100vh;
.page-main {
position: absolute;
z-index: 1;
width: 100%;
min-height: 100%;
display: flex; display: flex;
flex-direction: column; width: 100%;
height: 100vh;
.page-body { .page-main {
width: 100%; position: absolute;
position: relative; z-index: 1;
z-index: 1; width: 100%;
flex: 1; min-height: 100%;
} display: flex;
flex-direction: column;
.page-img { .page-body {
width: 100vw; width: 100%;
height: 100vh; position: relative;
position: absolute; z-index: 1;
top: 0; flex: 1;
left: 0; }
z-index: 0;
.page-img {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
z-index: 0;
}
} }
}
} }
</style> </style>

BIN
static/point.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 85 KiB