feat(积分):积分管理
This commit is contained in:
parent
d5e3d34e0f
commit
5f257aaa63
3
.env
3
.env
|
@ -18,3 +18,6 @@ MALL_STATIC_URL = https://file.sheepjs.com
|
|||
|
||||
# 是否开启直播 1 开启直播 | 0 关闭直播 (小程序官方后台未审核开通直播权限时请勿开启)
|
||||
MALL_MPLIVE_ON = 0
|
||||
|
||||
# APP 下载地址
|
||||
MALL_APP_DOWNLOAD_PATH = ''
|
|
@ -147,7 +147,8 @@
|
|||
{
|
||||
"path": "point/loglist",
|
||||
"style": {
|
||||
"navigationBarTitleText": "历史积分"
|
||||
"navigationBarTitleText": "历史积分",
|
||||
"enablePullDownRefresh": true
|
||||
},
|
||||
"meta": {
|
||||
"auth": true
|
||||
|
|
|
@ -1,12 +1,17 @@
|
|||
<template>
|
||||
<pb-layout navbar="inner" tabbar="/pages/index/index" :bgStyle="bgStyle">
|
||||
<view class="dashboard-module ss-p-x-30">
|
||||
<view class="merchant-info flex align-center">
|
||||
<image class="logo" :src="merchantInfo?.logo" mode="aspectFill"></image>
|
||||
<view class="merchant-info flex align-center justify-between">
|
||||
<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="name ss-font-26">{{ merchantInfo.name }}</view>
|
||||
<view class="description ss-font-26">{{ merchantInfo?.contactPhone }}</view>
|
||||
<view class="detail flex flex-column justify-center gap-10">
|
||||
<view class="name ss-font-26">{{ merchantInfo.name }}</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>
|
||||
|
||||
|
@ -19,7 +24,7 @@
|
|||
<view class="unit self-start">¥</view>
|
||||
<view class="sincome ss-font-60">{{ state.statistic.todayPaymentAmount || 0 }}</view>
|
||||
</view>
|
||||
<button class="right-btn ss-reset-button">查看详情</button>
|
||||
<!-- <button class="right-btn ss-reset-button">查看详情</button> -->
|
||||
</view>
|
||||
<view class="des ss-m-t-20">
|
||||
总销售额 {{ state.statistic.totalSalesAmount }} 元 | 成功退款 {{ state.statistic.refundCount }} 笔 |
|
||||
|
@ -110,6 +115,14 @@ async function getStatistic() {
|
|||
state.value.more[3].value = res.data.deliveryOrderCount
|
||||
}
|
||||
|
||||
/**
|
||||
* @author Ankkaya
|
||||
* @description 核销
|
||||
* @param {Type} -
|
||||
* @returns {Type}
|
||||
*/
|
||||
function checkVerifi() {}
|
||||
|
||||
onShow(() => {
|
||||
getStatistic()
|
||||
})
|
||||
|
|
|
@ -1,12 +1,21 @@
|
|||
<template>
|
||||
<pb-layout navbar="inner" tabbar="/pages/index/my" :bgStyle="bgStyle">
|
||||
<view class="my-module ss-p-x-30">
|
||||
<view class="user-info flex align-center">
|
||||
<image class="avatar" :src="userInfo.avatar || '/static/default_avatar.png'" mode="aspectFill"></image>
|
||||
<view class="user-info flex align-center justify-between">
|
||||
<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="name ss-font-26">{{ userInfo.nickname }}</view>
|
||||
<view class="description ss-font-26">{{ userInfo.mobile }}</view>
|
||||
<view class="detail flex flex-column justify-center gap-10">
|
||||
<view class="name ss-font-26">{{ userInfo.nickname }}</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>
|
||||
|
||||
|
|
|
@ -1,167 +1,176 @@
|
|||
<template>
|
||||
<pb-layout navbar="inner" iconColor="#fff" class="buy-point-wrap" leftIcon="leftIcon" color="#fff" title="购买积分"
|
||||
:bgStyle="bgStyle">
|
||||
<view class="title ss-m-t-80">
|
||||
<view class="main">购买商城积分</view>
|
||||
<view class="sub ss-flex ss-row-center ss-m-t-55"><text style="color: #F3D3BF;"
|
||||
class="cicon-safe"></text>订单多多·出单多多<text style="color: #F3D3BF;" class="cicon-safe"></text></view>
|
||||
</view>
|
||||
|
||||
<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>
|
||||
<pb-layout
|
||||
navbar="inner"
|
||||
iconColor="#fff"
|
||||
class="buy-point-wrap"
|
||||
leftIcon="leftIcon"
|
||||
color="#fff"
|
||||
title="购买积分"
|
||||
:bgStyle="bgStyle"
|
||||
>
|
||||
<view class="title ss-m-t-80">
|
||||
<view class="main">购买商城积分</view>
|
||||
<view class="sub ss-flex ss-row-center ss-m-t-55"
|
||||
><text style="color: #f3d3bf" class="cicon-safe"></text>订单多多·出单多多<text
|
||||
style="color: #f3d3bf"
|
||||
class="cicon-safe"
|
||||
></text
|
||||
></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>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
const state = ref({
|
||||
isShaking: false,
|
||||
agreeStatus: false,
|
||||
isShaking: false,
|
||||
agreeStatus: false,
|
||||
})
|
||||
|
||||
const bgStyle = {
|
||||
backgroundImage: '/static/point.png',
|
||||
imageType: 'local',
|
||||
backgroundColor: '#fff',
|
||||
description: '',
|
||||
backgroundImage: '/static/point.png',
|
||||
imageType: 'local',
|
||||
backgroundColor: '#fff',
|
||||
description: '',
|
||||
height: '100%',
|
||||
}
|
||||
|
||||
function onProtocol(title) {
|
||||
|
||||
}
|
||||
function onProtocol(title) {}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.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 {
|
||||
font-size: 39rpx;
|
||||
color: #fccdb1;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.title::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 80px;
|
||||
position: relative;
|
||||
left: -100px;
|
||||
top: 14px;
|
||||
border-bottom: 1px dotted #e7b493;
|
||||
.middle {
|
||||
.title {
|
||||
font-size: 39rpx;
|
||||
color: #fccdb1;
|
||||
}
|
||||
|
||||
.title::before {
|
||||
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 {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 80px;
|
||||
position: relative;
|
||||
left: 130px;
|
||||
top: -12px;
|
||||
border-bottom: 1px dotted #e7b493;
|
||||
.combo {
|
||||
.draw-btn {
|
||||
height: 82rpx;
|
||||
line-height: normal;
|
||||
background: linear-gradient(-90deg, rgba(230, 179, 147, 1), rgba(250, 232, 218, 1));
|
||||
border-radius: 28rpx;
|
||||
font-size: 32rpx;
|
||||
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 {
|
||||
background-color: #e7b493;
|
||||
border-radius: 18rpx;
|
||||
border: 1px solid #979797;
|
||||
letter-spacing: 5px;
|
||||
padding: 0 10rpx 0 18rpx;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
.agreement-box {
|
||||
width: 100%;
|
||||
|
||||
.combo {
|
||||
.protocol-check {
|
||||
transform: scale(0.7);
|
||||
}
|
||||
|
||||
.draw-btn {
|
||||
height: 82rpx;
|
||||
line-height: normal;
|
||||
background: linear-gradient(-90deg, rgba(230, 179, 147, 1), rgba(250, 232, 218, 1));
|
||||
border-radius: 28rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
.agreement-text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
|
||||
.tcp-text {
|
||||
color: rgba(243, 192, 156, 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.agreement-box {
|
||||
|
||||
width: 100%;
|
||||
|
||||
.protocol-check {
|
||||
transform: scale(0.7);
|
||||
.shake {
|
||||
animation: shake 0.05s linear 4 alternate;
|
||||
}
|
||||
|
||||
.agreement-text {
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: #999999;
|
||||
@keyframes shake {
|
||||
from {
|
||||
transform: translateX(-5rpx);
|
||||
}
|
||||
|
||||
.tcp-text {
|
||||
color: rgba(243, 192, 156, 1);
|
||||
}
|
||||
to {
|
||||
transform: translateX(5rpx);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.shake {
|
||||
animation: shake 0.05s linear 4 alternate;
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
from {
|
||||
transform: translateX(-5rpx);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateX(5rpx);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -1,105 +1,126 @@
|
|||
<template>
|
||||
<pb-layout navbar="inner" iconColor="#fff" 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" />
|
||||
<pb-layout
|
||||
navbar="inner"
|
||||
iconColor="#fff"
|
||||
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-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="label">积分</view>
|
||||
<view class="date">{{ item.date }}</view>
|
||||
</view>
|
||||
<view class="bottom ss-flex ss-row-between">
|
||||
<view class="last">{{ item.last }}</view>
|
||||
<view class="change">{{ item.income }}</view>
|
||||
</view>
|
||||
<view v-if="state.pagination.total > 0">
|
||||
<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="label">积分</view>
|
||||
<view class="date">{{ item.date }}</view>
|
||||
</view>
|
||||
<view class="bottom ss-flex ss-row-between">
|
||||
<view class="last">{{ item.last }}</view>
|
||||
<view class="change">{{ item.income }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<uni-load-more v-if="state.pagination.total > 0" :status="state.loadStatus"
|
||||
:content-text="{ contentdown: '上拉加载更多' }" />
|
||||
</pb-layout>
|
||||
<uni-load-more
|
||||
v-if="state.pagination.total > 0"
|
||||
:status="state.loadStatus"
|
||||
:content-text="{ contentdown: '上拉加载更多' }"
|
||||
/>
|
||||
</pb-layout>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { resetPagination } from '@/peach/utils'
|
||||
import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
|
||||
|
||||
import PointApi from '@/peach/api/pay/point'
|
||||
|
||||
const bgStyle = {
|
||||
backgroundImage: '/static/point.png',
|
||||
imageType: 'local',
|
||||
backgroundColor: '#fff'
|
||||
backgroundImage: '/static/point.png',
|
||||
imageType: 'local',
|
||||
backgroundColor: '#fff',
|
||||
height: '100%',
|
||||
}
|
||||
|
||||
const state = ref({
|
||||
currentTab: 0,
|
||||
pagination: {
|
||||
list: [
|
||||
{
|
||||
last: 50000,
|
||||
date: '2022-05-30',
|
||||
income: '+1000'
|
||||
},
|
||||
{
|
||||
last: 50000,
|
||||
date: '2022-05-30',
|
||||
income: '-1000'
|
||||
}
|
||||
],
|
||||
total: 2,
|
||||
pageNo: 1,
|
||||
pageSize: 6,
|
||||
},
|
||||
loadStatus: '',
|
||||
currentTab: 0,
|
||||
pagination: {
|
||||
list: [
|
||||
{
|
||||
last: 50000,
|
||||
date: '2022-05-30',
|
||||
income: '+1000',
|
||||
},
|
||||
{
|
||||
last: 50000,
|
||||
date: '2022-05-30',
|
||||
income: '-1000',
|
||||
},
|
||||
],
|
||||
total: 2,
|
||||
pageNo: 1,
|
||||
pageSize: 6,
|
||||
},
|
||||
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() {
|
||||
if (state.value.loadStatus === 'noMore') {
|
||||
return
|
||||
}
|
||||
state.value.pagination.pageNo++
|
||||
getLogList()
|
||||
if (state.value.loadStatus === 'noMore') {
|
||||
return
|
||||
}
|
||||
state.value.pagination.pageNo++
|
||||
getLogList()
|
||||
}
|
||||
|
||||
// 上拉加载更多
|
||||
onReachBottom(() => {
|
||||
loadMore()
|
||||
loadMore()
|
||||
})
|
||||
|
||||
// 下拉刷新
|
||||
onPullDownRefresh(() => {
|
||||
resetPagination(state.value.pagination)
|
||||
getLogList()
|
||||
setTimeout(function () {
|
||||
uni.stopPullDownRefresh()
|
||||
}, 800)
|
||||
resetPagination(state.value.pagination)
|
||||
getLogList()
|
||||
setTimeout(function () {
|
||||
uni.stopPullDownRefresh()
|
||||
}, 800)
|
||||
})
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.loglist-point-wrap {
|
||||
.log-point-item {
|
||||
border-bottom: 1px solid rgba(231, 180, 147, .2);
|
||||
margin: 30rpx 40rpx;
|
||||
padding-bottom: 30rpx;
|
||||
.log-point-item {
|
||||
border-bottom: 1px solid rgba(231, 180, 147, 0.2);
|
||||
margin: 30rpx 40rpx;
|
||||
padding-bottom: 30rpx;
|
||||
|
||||
.top,
|
||||
.bottom {
|
||||
color: #E7B493;
|
||||
.top,
|
||||
.bottom {
|
||||
color: #e7b493;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.log-point-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
.log-point-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -1,124 +1,243 @@
|
|||
<template>
|
||||
<pb-layout navbar="inner" iconColor="#fff" class="share-point-wrap" leftIcon="leftIcon" color="#fff" title="分发积分"
|
||||
:bgStyle="bgStyle">
|
||||
<view class="title ss-m-t-80">
|
||||
<view class="main">分发积分</view>
|
||||
<view class="sub ss-flex ss-row-center ss-m-t-55"><text style="color: #F3D3BF;"
|
||||
class="cicon-safe"></text>订单多多·出单多多<text style="color: #F3D3BF;" class="cicon-safe"></text></view>
|
||||
</view>
|
||||
|
||||
<view class="user-search">
|
||||
<view class="search">
|
||||
<uni-easyinput :styles="{ backgroundColor: 'transparent', color: '#E7B493' }" placeholderStyle="color: #E7B493;"
|
||||
:clearable="false" :inputBorder="false" type="number" trim="all" suffixIcon="search" placeholder="请输入用户名" />
|
||||
</view>
|
||||
<view class="result" :style="{ height: resultHeight, overflow: 'auto' }">
|
||||
<view v-for="item in 10" 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;" src="/static/default_avatar.png" />
|
||||
<view class="nickname">哈哈哈</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>
|
||||
<pb-layout
|
||||
navbar="inner"
|
||||
iconColor="#fff"
|
||||
class="share-point-wrap"
|
||||
leftIcon="leftIcon"
|
||||
color="#fff"
|
||||
title="分发积分"
|
||||
right="历史积分"
|
||||
:bgStyle="bgStyle"
|
||||
>
|
||||
<view class="title ss-m-t-80">
|
||||
<view class="main">分发积分</view>
|
||||
<view class="sub ss-flex ss-row-center ss-m-t-55"
|
||||
><text style="color: #f3d3bf" class="cicon-safe"></text>订单多多·出单多多<text
|
||||
style="color: #f3d3bf"
|
||||
class="cicon-safe"
|
||||
></text
|
||||
></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>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
import PointApi from '@/peach/api/pay/point'
|
||||
import UserUtil from '@/peach/api/member/user'
|
||||
import peach from '@/peach'
|
||||
|
||||
const placeholderStyle = ref('color: #E7B493')
|
||||
|
||||
const resultHeight = computed(() => {
|
||||
return `calc(100vh - 728rpx)`
|
||||
return `calc(100vh - 728rpx)`
|
||||
})
|
||||
|
||||
|
||||
const state = ref({
|
||||
isShaking: false,
|
||||
agreeStatus: false,
|
||||
inputData: '',
|
||||
userList: [],
|
||||
isShaking: false,
|
||||
agreeStatus: false,
|
||||
userParams: {
|
||||
mobile: '',
|
||||
nickname: '',
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
pointParams: {
|
||||
memberId: '',
|
||||
point: '',
|
||||
},
|
||||
})
|
||||
|
||||
const bgStyle = {
|
||||
backgroundImage: '/static/point.png',
|
||||
imageType: 'local',
|
||||
backgroundColor: '#fff',
|
||||
description: '',
|
||||
backgroundImage: '/static/point.png',
|
||||
imageType: 'local',
|
||||
backgroundColor: '#fff',
|
||||
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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.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 {
|
||||
.main {
|
||||
font-size: 80rpx;
|
||||
color: rgba(232, 181, 150, 1);
|
||||
letter-spacing: 20px;
|
||||
position: relative;
|
||||
left: 10px;
|
||||
text-align: center;
|
||||
.sub {
|
||||
font-size: 32rpx;
|
||||
color: #f3d3bf;
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.sub {
|
||||
font-size: 32rpx;
|
||||
color: #f3d3bf;
|
||||
letter-spacing: 4px;
|
||||
}
|
||||
}
|
||||
.user-search {
|
||||
margin: 50rpx 40rpx 0;
|
||||
|
||||
.user-search {
|
||||
margin: 50rpx 40rpx 0;
|
||||
.search {
|
||||
border: 1px solid #e7b493;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.search {
|
||||
border: 1px solid #E7B493;
|
||||
border-radius: 30px;
|
||||
:deep(.uniui-search) {
|
||||
color: #e7b493 !important;
|
||||
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) {
|
||||
color: #E7B493 !important;
|
||||
padding-right: 10px;
|
||||
}
|
||||
.bottom {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
width: calc(100% - 60rpx);
|
||||
|
||||
: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 {
|
||||
.share-btn {
|
||||
height: 82rpx;
|
||||
line-height: normal;
|
||||
background: linear-gradient(-90deg, rgba(230, 179, 147, 1), rgba(250, 232, 218, 1));
|
||||
border-radius: 28rpx;
|
||||
font-size: 26rpx;
|
||||
color: #E7B493;
|
||||
}
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.input-point {
|
||||
:deep(.uni-easyinput__content-input) {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
|
@ -63,10 +63,10 @@
|
|||
import { computed, reactive } from 'vue'
|
||||
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
|
||||
import peach from '@/peach'
|
||||
import dayjs from 'dayjs'
|
||||
import _ from 'lodash'
|
||||
import PayWalletApi from '@/peach/api/pay/wallet'
|
||||
import { fen2yuan } from '@/peach/hooks/useGoods'
|
||||
import dayjs from 'dayjs'
|
||||
import PayWalletApi from '@/peach/api/pay/wallet'
|
||||
import { resetPagination } from '@/peach/utils'
|
||||
|
||||
const bgStyle = {
|
||||
|
|
|
@ -24,6 +24,23 @@ const UserUtil = {
|
|||
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
|
||||
|
|
|
@ -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
|
|
@ -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>
|
|
@ -673,7 +673,34 @@ export function copyText(text) {
|
|||
// #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 {
|
||||
debounce,
|
||||
range,
|
||||
getPx,
|
||||
sleep,
|
||||
|
|
|
@ -1,6 +1,42 @@
|
|||
import share from './share'
|
||||
import android from './provider/android'
|
||||
|
||||
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
|
||||
|
@ -68,6 +104,7 @@ const _platform = {
|
|||
navBar,
|
||||
capsule,
|
||||
checkNetwork,
|
||||
checkUpdate,
|
||||
}
|
||||
|
||||
export default _platform
|
||||
|
|
|
@ -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,
|
||||
}
|
|
@ -1,30 +1,49 @@
|
|||
<template>
|
||||
<pb-fixed :noFixed="props.noFixed" :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 />
|
||||
<pb-fixed
|
||||
:noFixed="props.noFixed"
|
||||
: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-bar ss-p-x-20" :class="state.isDark ? 'text-white' : 'text-black'"
|
||||
:style="[{ height: sys_navBar - sys_statusBar + 'px' }]">
|
||||
<view v-if="leftIcon" class="icon-box ss-flex">
|
||||
<view class="icon-button icon-button-left ss-flex ss-row-center" @tap="onClickLeft">
|
||||
<text class="sicon-back" v-if="hasHistory" />
|
||||
<text class="sicon-home" v-else />
|
||||
</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 class="ui-navbar-box">
|
||||
<view
|
||||
class="ui-bar ss-p-x-20"
|
||||
:class="state.isDark ? 'text-white' : 'text-black'"
|
||||
:style="[{ height: sys_navBar - sys_statusBar + 'px' }]"
|
||||
>
|
||||
<view v-if="leftIcon" class="icon-box ss-flex">
|
||||
<view class="icon-button icon-button-left ss-flex ss-row-center" @tap="onClickLeft">
|
||||
<text class="sicon-back" v-if="hasHistory" />
|
||||
<text class="sicon-home" v-else />
|
||||
</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>
|
||||
<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>
|
||||
</pb-fixed>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
@ -44,7 +63,7 @@
|
|||
* @param {Boolean} stopBack = false - 是否禁用返回
|
||||
* @param {Boolean} placeholder = true - 是否开启占位
|
||||
* @param {Object} bgStyles = {} - 背景样式
|
||||
*
|
||||
* @param {Boolean} right - 右侧显示内容
|
||||
*/
|
||||
|
||||
import { computed, reactive, onBeforeMount, ref } from 'vue'
|
||||
|
@ -54,336 +73,343 @@ import { showMenuTools, closeMenuTools } from '@/peach/hooks/useModal'
|
|||
|
||||
// 本地数据
|
||||
const state = reactive({
|
||||
statusCur: '',
|
||||
capsuleStyle: {},
|
||||
capsuleBack: {},
|
||||
isDark: true,
|
||||
statusCur: '',
|
||||
capsuleStyle: {},
|
||||
capsuleBack: {},
|
||||
isDark: true,
|
||||
})
|
||||
|
||||
const sys_statusBar = peach.$platform.device.statusBarHeight
|
||||
const sys_navBar = peach.$platform.navBar
|
||||
|
||||
const props = defineProps({
|
||||
dark: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
zIndex: {
|
||||
type: Number,
|
||||
default: 100,
|
||||
},
|
||||
dark: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
zIndex: {
|
||||
type: Number,
|
||||
default: 100,
|
||||
},
|
||||
|
||||
leftIcon: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
leftIcon: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
|
||||
iconColor: {
|
||||
type: String,
|
||||
default: '#000'
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
default: '#000',
|
||||
},
|
||||
|
||||
title: {
|
||||
//返回文本
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
bg: {
|
||||
type: String,
|
||||
default: 'bg-white',
|
||||
},
|
||||
// 常驻
|
||||
alway: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
opacity: {
|
||||
//是否开启滑动渐变
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
noFixed: {
|
||||
//是否浮动
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
ui: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
capsule: {
|
||||
//是否开启胶囊返回
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
stopBack: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
placeholder: {
|
||||
type: [Boolean],
|
||||
default: false,
|
||||
},
|
||||
bgStyles: {
|
||||
type: Object,
|
||||
default() { },
|
||||
},
|
||||
title: {
|
||||
//返回文本
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
bg: {
|
||||
type: String,
|
||||
default: 'bg-white',
|
||||
},
|
||||
// 常驻
|
||||
alway: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
opacity: {
|
||||
//是否开启滑动渐变
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
noFixed: {
|
||||
//是否浮动
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
ui: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
capsule: {
|
||||
//是否开启胶囊返回
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
stopBack: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
placeholder: {
|
||||
type: [Boolean],
|
||||
default: false,
|
||||
},
|
||||
bgStyles: {
|
||||
type: Object,
|
||||
default() {},
|
||||
},
|
||||
right: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
})
|
||||
|
||||
const emits = defineEmits(['navback', 'clickLeft'])
|
||||
const hasHistory = peach.$router.hasHistory()
|
||||
|
||||
const themeColor = computed(() => {
|
||||
if (props.dark) {
|
||||
return props.color ? props.color : '#fff'
|
||||
}
|
||||
return props.color || '#333'
|
||||
if (props.dark) {
|
||||
return props.color ? props.color : '#fff'
|
||||
}
|
||||
return props.color || '#333'
|
||||
})
|
||||
|
||||
onBeforeMount(() => {
|
||||
init()
|
||||
init()
|
||||
})
|
||||
|
||||
onPageScroll((e) => {
|
||||
let top = e.scrollTop
|
||||
state.isDark = top < peach.$platform.navbar
|
||||
let top = e.scrollTop
|
||||
state.isDark = top < peach.$platform.navbar
|
||||
})
|
||||
|
||||
function onClickLeft() {
|
||||
if (hasHistory) {
|
||||
peach.$router.back()
|
||||
} else {
|
||||
peach.$router.go('/pages/index/index')
|
||||
}
|
||||
emits('clickLeft')
|
||||
if (hasHistory) {
|
||||
peach.$router.back()
|
||||
} else {
|
||||
peach.$router.go('/pages/index/index')
|
||||
}
|
||||
emits('clickLeft')
|
||||
}
|
||||
function onClickRight() {
|
||||
showMenuTools()
|
||||
showMenuTools()
|
||||
}
|
||||
|
||||
function rightTap() {
|
||||
peach.$router.go('/pages/user/point/loglist')
|
||||
}
|
||||
|
||||
// 初始化
|
||||
const init = () => {
|
||||
// #ifdef MP-ALIPAY
|
||||
my.hideAllFavoriteMenu()
|
||||
// #endif
|
||||
state.capsuleStyle = {
|
||||
width: peach.$platform.capsule.width + 'px',
|
||||
height: peach.$platform.capsule.height + 'px',
|
||||
}
|
||||
// #ifdef MP-ALIPAY
|
||||
my.hideAllFavoriteMenu()
|
||||
// #endif
|
||||
state.capsuleStyle = {
|
||||
width: peach.$platform.capsule.width + 'px',
|
||||
height: peach.$platform.capsule.height + 'px',
|
||||
}
|
||||
|
||||
state.capsuleBack = state.capsuleStyle
|
||||
state.capsuleBack = state.capsuleStyle
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.icon-box {
|
||||
box-shadow: 0px 0px 4rpx rgba(51, 51, 51, 0.08), 0px 4rpx 6rpx 2rpx rgba(102, 102, 102, 0.12);
|
||||
border-radius: 30rpx;
|
||||
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;
|
||||
box-shadow: 0px 0px 4rpx rgba(51, 51, 51, 0.08), 0px 4rpx 6rpx 2rpx rgba(102, 102, 102, 0.12);
|
||||
border-radius: 30rpx;
|
||||
width: 134rpx;
|
||||
height: 56rpx;
|
||||
margin-left: 8rpx;
|
||||
border: 1px solid rgba(#fff, 0.4);
|
||||
|
||||
&-left:hover {
|
||||
background: rgba(0, 0, 0, 0.16);
|
||||
border-radius: 30rpx 0px 0px 30rpx;
|
||||
.line {
|
||||
width: 2rpx;
|
||||
height: 24rpx;
|
||||
background: #e5e5e7;
|
||||
}
|
||||
|
||||
&-right:hover {
|
||||
background: rgba(0, 0, 0, 0.16);
|
||||
border-radius: 0px 30rpx 30rpx 0px;
|
||||
.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;
|
||||
|
||||
&-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 {
|
||||
font-size: 36rpx;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
|
||||
.tools-icon {
|
||||
font-size: 40rpx;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
|
||||
.ui-navbar-box {
|
||||
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;
|
||||
background-color: transparent;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.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%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -1,32 +1,47 @@
|
|||
<template>
|
||||
<view class="page-app" :class="['theme-' + sys.mode, 'main-' + sys.theme, 'font-' + sys.fontSize]">
|
||||
<view class="page-main" :style="[bgMain]">
|
||||
<!-- 顶部导航栏-情况1:默认通用顶部导航栏 -->
|
||||
<pb-navbar v-if="navbar === 'normal'" :title="title" :leftIcon="leftIcon" statusBar :color="color" :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" :title="title"
|
||||
:leftIcon="leftIcon" />
|
||||
<view v-if="navbar === 'inner'" :style="[{ paddingTop: peach.$platform.navBar + 'px' }]"></view>
|
||||
<view class="page-app" :class="['theme-' + sys.mode, 'main-' + sys.theme, 'font-' + sys.fontSize]">
|
||||
<view class="page-main" :style="[bgMain]">
|
||||
<!-- 顶部导航栏-情况1:默认通用顶部导航栏 -->
|
||||
<pb-navbar
|
||||
v-if="navbar === 'normal'"
|
||||
:title="title"
|
||||
:leftIcon="leftIcon"
|
||||
statusBar
|
||||
:color="color"
|
||||
: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" />
|
||||
</view>
|
||||
<!-- 底部导航 -->
|
||||
<pb-tabbar v-if="tabbar !== ''" :path="tabbar" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="page-modal">
|
||||
<!-- 全局授权弹窗 -->
|
||||
<!-- <p-auth-modal /> -->
|
||||
<!-- 全局分享弹窗 -->
|
||||
<!-- <p-share-modal :shareInfo="shareInfo" /> -->
|
||||
<!-- 全局快捷入口 -->
|
||||
<p-menu-tools />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="page-modal">
|
||||
<!-- 全局授权弹窗 -->
|
||||
<!-- <p-auth-modal /> -->
|
||||
<!-- 全局分享弹窗 -->
|
||||
<!-- <p-share-modal :shareInfo="shareInfo" /> -->
|
||||
<!-- 全局快捷入口 -->
|
||||
<!-- <p-menu-tools /> -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
@ -51,66 +66,70 @@ import { onShareAppMessage } from '@dcloudio/uni-app'
|
|||
// #endif
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
leftIcon: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
navbar: {
|
||||
type: String,
|
||||
default: 'normal',
|
||||
},
|
||||
opacityBgUi: {
|
||||
type: String,
|
||||
default: 'bg-white',
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
tools: {
|
||||
type: String,
|
||||
default: 'title',
|
||||
},
|
||||
bgStyle: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
src: '',
|
||||
color: 'var(--ui-BG-1)',
|
||||
}),
|
||||
},
|
||||
tabbar: {
|
||||
type: [String, Boolean],
|
||||
default: '',
|
||||
},
|
||||
onShareAppMessage: {
|
||||
type: [Boolean, Object],
|
||||
default: true,
|
||||
},
|
||||
leftWidth: {
|
||||
type: [Number, String],
|
||||
default: 100,
|
||||
},
|
||||
rightWidth: {
|
||||
type: [Number, String],
|
||||
default: 100,
|
||||
},
|
||||
defaultSearch: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
//展示返回按钮
|
||||
showLeftButton: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
default: '#000'
|
||||
}
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
leftIcon: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
navbar: {
|
||||
type: String,
|
||||
default: 'normal',
|
||||
},
|
||||
opacityBgUi: {
|
||||
type: String,
|
||||
default: 'bg-white',
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
tools: {
|
||||
type: String,
|
||||
default: 'title',
|
||||
},
|
||||
bgStyle: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
src: '',
|
||||
color: 'var(--ui-BG-1)',
|
||||
}),
|
||||
},
|
||||
tabbar: {
|
||||
type: [String, Boolean],
|
||||
default: '',
|
||||
},
|
||||
onShareAppMessage: {
|
||||
type: [Boolean, Object],
|
||||
default: true,
|
||||
},
|
||||
leftWidth: {
|
||||
type: [Number, String],
|
||||
default: 100,
|
||||
},
|
||||
rightWidth: {
|
||||
type: [Number, String],
|
||||
default: 100,
|
||||
},
|
||||
defaultSearch: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
//展示返回按钮
|
||||
showLeftButton: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
default: '#000',
|
||||
},
|
||||
right: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
})
|
||||
const emits = defineEmits(['search'])
|
||||
|
||||
|
@ -122,102 +141,102 @@ const sys = computed(() => sysStore)
|
|||
|
||||
// 导航栏模式(因为有自定义导航栏 需要计算)
|
||||
const navbarMode = computed(() => {
|
||||
if (props.navbar === 'normal') {
|
||||
return 'normal'
|
||||
}
|
||||
return 'inner'
|
||||
if (props.navbar === 'normal') {
|
||||
return 'normal'
|
||||
}
|
||||
return 'inner'
|
||||
})
|
||||
|
||||
// 背景1
|
||||
const bgMain = computed(() => {
|
||||
if (navbarMode.value === 'inner') {
|
||||
return {
|
||||
background: `${props.bgStyle.backgroundColor} url(${peach.$url.static(
|
||||
props.bgStyle.backgroundImage,
|
||||
props.bgStyle.imageType
|
||||
)}) no-repeat top center / 100% auto`,
|
||||
if (navbarMode.value === 'inner') {
|
||||
return {
|
||||
background: `${props.bgStyle.backgroundColor} url(${peach.$url.static(
|
||||
props.bgStyle.backgroundImage,
|
||||
props.bgStyle.imageType
|
||||
)}) no-repeat top center / 100% ${props.bgStyle.height || 'auto'}`,
|
||||
}
|
||||
}
|
||||
}
|
||||
return {}
|
||||
return {}
|
||||
})
|
||||
|
||||
// 背景2
|
||||
const bgBody = computed(() => {
|
||||
if (navbarMode.value === 'normal') {
|
||||
return {
|
||||
background: `${props.bgStyle.backgroundColor} url(${peach.$url.static(
|
||||
props.bgStyle.backgroundImage,
|
||||
props.bgStyle.imageType
|
||||
)}) no-repeat top center / 100% auto`,
|
||||
if (navbarMode.value === 'normal') {
|
||||
return {
|
||||
background: `${props.bgStyle.backgroundColor} url(${peach.$url.static(
|
||||
props.bgStyle.backgroundImage,
|
||||
props.bgStyle.imageType
|
||||
)}) no-repeat top center / 100% auto`,
|
||||
}
|
||||
}
|
||||
}
|
||||
return {}
|
||||
return {}
|
||||
})
|
||||
|
||||
// 分享信息
|
||||
const shareInfo = computed(() => {
|
||||
if (props.onShareAppMessage === true) {
|
||||
return peach.$platform.share.getShareInfo()
|
||||
} else {
|
||||
if (!isEmpty(props.onShareAppMessage)) {
|
||||
// peach.$platform.share.updateShareInfo(props.onShareAppMessage)
|
||||
return props.onShareAppMessage
|
||||
if (props.onShareAppMessage === true) {
|
||||
return peach.$platform.share.getShareInfo()
|
||||
} else {
|
||||
if (!isEmpty(props.onShareAppMessage)) {
|
||||
// peach.$platform.share.updateShareInfo(props.onShareAppMessage)
|
||||
return props.onShareAppMessage
|
||||
}
|
||||
}
|
||||
}
|
||||
return {}
|
||||
return {}
|
||||
})
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
// 微信小程序分享
|
||||
onShareAppMessage(() => {
|
||||
return {
|
||||
title: shareInfo.value.title,
|
||||
path: shareInfo.value.path,
|
||||
imageUrl: shareInfo.value.image,
|
||||
}
|
||||
return {
|
||||
title: shareInfo.value.title,
|
||||
path: shareInfo.value.path,
|
||||
imageUrl: shareInfo.value.image,
|
||||
}
|
||||
})
|
||||
// #endif
|
||||
|
||||
onShow(() => {
|
||||
if (!isEmpty(shareInfo.value)) {
|
||||
// peach.$platform.share.updateShareInfo(shareInfo.value)
|
||||
}
|
||||
if (!isEmpty(shareInfo.value)) {
|
||||
// peach.$platform.share.updateShareInfo(shareInfo.value)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-app {
|
||||
position: relative;
|
||||
color: var(--ui-TC);
|
||||
background-color: var(--ui-BG-1) !important;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
|
||||
.page-main {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
position: relative;
|
||||
color: var(--ui-TC);
|
||||
background-color: var(--ui-BG-1) !important;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
|
||||
.page-body {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
flex: 1;
|
||||
}
|
||||
.page-main {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.page-img {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
Binary file not shown.
After Width: | Height: | Size: 85 KiB |
Loading…
Reference in New Issue