first
This commit is contained in:
139
pages/memberCenter/accountHistory/detail.vue
Normal file
139
pages/memberCenter/accountHistory/detail.vue
Normal file
@@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="mbr-info">
|
||||
<image :src="vdata.record.avatarUrl" />
|
||||
<text class="mbr-info-name">{{ vdata.record.mbrName }}</text>
|
||||
<text class="mbr-info-amount">{{ vdata.record.changeAmount > 0 ? '+'+cal.cert2Dollar(vdata.record.changeAmount) : cal.cert2Dollar(vdata.record.changeAmount) }}</text>
|
||||
</view>
|
||||
<view class="account-line"></view>
|
||||
<view class="account-history">
|
||||
<view class="account-history-item"><text>业务类型</text>
|
||||
<text>{{ vdata.record.bizType==1?'支付充值':vdata.record.bizType==2?'现金充值':vdata.record.bizType==3?'会员消费':vdata.record.bizType==4?'消费退款':vdata.record.bizType==5?'人工调账':'其他' }}</text>
|
||||
</view>
|
||||
<view class="account-history-item"><text>流水ID</text><text>{{ vdata.record.hid }}</text></view>
|
||||
<view class="account-history-item"><text>会员ID</text><text>{{ vdata.record.mbrId }}</text></view>
|
||||
<view class="account-history-item"><text>会员手机号</text><text>{{ vdata.record.mbrTel }}</text></view>
|
||||
<view class="account-history-item"><text>变动前余额</text><text>¥{{ cal.cert2Dollar(vdata.record.beforeAmount) }}</text></view>
|
||||
<view class="account-history-item"><text>变动金额</text><text>¥{{ cal.cert2Dollar(vdata.record.changeAmount) }}</text></view>
|
||||
<view class="account-history-item"><text>变动后余额</text><text>¥{{ cal.cert2Dollar(vdata.record.afterAmount) }}</text></view>
|
||||
<view v-if="vdata.record.relaBizOrderId && vdata.record.bizType == 1" class="account-history-item">
|
||||
<text>充值订单号</text>
|
||||
<text>{{ vdata.record.relaBizOrderId }}
|
||||
<text class="info-copy" @tap="copyInfo(vdata.record.relaBizOrderId)">复制</text>
|
||||
</text>
|
||||
</view>
|
||||
<view class="account-history-item"><text>变动时间</text><text>{{ vdata.record.createdAt }}</text></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue'
|
||||
import { onLoad, onUnload } from '@dcloudio/uni-app'
|
||||
import { reqLoad, API_URL_MEMBER_ACCOUNT_HISTORY } from '@/http/apiManager.js'
|
||||
import infoBox from '@/commons/utils/infoBox.js';
|
||||
import cal from '@/commons/utils/cal.js'
|
||||
import go from '@/commons/utils/go.js'
|
||||
import emit from '@/commons/utils/emit.js'
|
||||
import ent from '@/commons/utils/ent.js'
|
||||
|
||||
onLoad((options) => {
|
||||
refData(options.hid)
|
||||
})
|
||||
|
||||
const vdata = reactive({
|
||||
record : { }
|
||||
})
|
||||
|
||||
// 监听 更新事件
|
||||
onUnload(() => uni.$off(emit.ENAME_REF_MEMBER_ACCOUNT_HISTORY_DETAIL))
|
||||
uni.$on(emit.ENAME_REF_MEMBER_ACCOUNT_HISTORY_DETAIL, function(data){
|
||||
refData(vdata.record.hid)
|
||||
})
|
||||
|
||||
function refData(hid){
|
||||
reqLoad.getById(API_URL_MEMBER_ACCOUNT_HISTORY, hid).then(({bizData}) => {
|
||||
vdata.record = bizData
|
||||
})
|
||||
}
|
||||
|
||||
const copyInfo = (val) => {
|
||||
uni.setClipboardData({ data: val}).then(() => {
|
||||
infoBox.showSuccessToast('复制成功')
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
width: 630rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.mbr-info {
|
||||
height: 376rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.mbr-info-name {
|
||||
padding-top: 10rpx;
|
||||
color: #828282ff;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.mbr-info-amount {
|
||||
padding-top: 10rpx;
|
||||
color: #000000ff;
|
||||
font-size: 50rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.account-line {
|
||||
border-bottom: 1rpx solid #0000001a;
|
||||
}
|
||||
.account-history {
|
||||
padding-top: 60rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
|
||||
.account-history-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
opacity: 1;
|
||||
padding: 13rpx 0 12rpx;
|
||||
|
||||
text:first-child {
|
||||
width: 180rpx;
|
||||
color: #999999;
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
text:nth-child(2) {
|
||||
width: 450rpx;
|
||||
color: #000000;
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
word-break: break-all;
|
||||
|
||||
.info-copy {
|
||||
padding-left: 20rpx;
|
||||
opacity: 1;
|
||||
color: #2d6dccff;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
116
pages/memberCenter/accountHistory/index.vue
Normal file
116
pages/memberCenter/accountHistory/index.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<view class="page-wrapper">
|
||||
<JeepayCustomNavbar title="账户流水" backCtrl="back" />
|
||||
|
||||
<!-- 搜索 -->
|
||||
<JSearchTitle place="搜索" @click="go.toSearchPage('memberAccountHistory')">
|
||||
<template #right>
|
||||
<JeepaySearchSelect v-model:bizType="vdata.searchData.bizType" :list="vdata.bizTypeList" title="按业务类型筛选" @change="refTable"/>
|
||||
</template>
|
||||
</JSearchTitle>
|
||||
|
||||
|
||||
<JeepayTableList ref="jeepayTableListRef" :searchData="vdata.searchData" :reqTableDataFunc="reqTableDataFunc">
|
||||
<template #tableBody="{ record }">
|
||||
<MemberAccountHistoryRender :record="record" />
|
||||
</template>
|
||||
</JeepayTableList>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import { nextTick, reactive, ref } from "vue"
|
||||
import { onReachBottom, onShow, onUnload } from '@dcloudio/uni-app'
|
||||
import go from '@/commons/utils/go.js'
|
||||
import emit from '@/commons/utils/emit.js'
|
||||
import { reqLoad, API_URL_MEMBER_ACCOUNT_HISTORY } from "@/http/apiManager.js"
|
||||
import MemberAccountHistoryRender from '@/pages/list/render/MemberAccountHistoryRender.vue'
|
||||
|
||||
const jeepayTableListRef = ref()
|
||||
|
||||
const vdata = reactive({
|
||||
searchData: { bizType: '' },
|
||||
bizTypeList: [
|
||||
{ label: '全部业务类型', value: '' },
|
||||
{ label: '支付充值', value: '1' },
|
||||
{ label: '现金充值', value: '2' },
|
||||
{ label: '会员消费', value: '3' },
|
||||
{ label: '消费退款', value: '4' },
|
||||
{ label: '人工调账', value: '5' },
|
||||
]
|
||||
})
|
||||
|
||||
onReachBottom(() => { })
|
||||
|
||||
// // 监听 更新事件
|
||||
onUnload(() => uni.$off(emit.ENAME_REF_MEMBER_ACCOUNT_HISTORY_LIST))
|
||||
uni.$on(emit.ENAME_REF_MEMBER_ACCOUNT_HISTORY_LIST, function(data){
|
||||
jeepayTableListRef.value.refTable(true)
|
||||
})
|
||||
|
||||
function refTable (e) {
|
||||
jeepayTableListRef.value.refTable(true)
|
||||
}
|
||||
|
||||
// 请求
|
||||
function reqTableDataFunc (params) {
|
||||
return reqLoad.list(API_URL_MEMBER_ACCOUNT_HISTORY, params)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sta-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 30rpx;
|
||||
height: 110rpx;
|
||||
background-color: $J-bg-ff;
|
||||
.input-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 70rpx;
|
||||
background-color: $J-bg-f5;
|
||||
border-radius: $J-b-r12;
|
||||
color: rgba(0, 0, 0, 0.35);
|
||||
font-size: 27rpx;
|
||||
font-weight: 400;
|
||||
image {
|
||||
padding: 22rpx;
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
}
|
||||
}
|
||||
.icon-more {
|
||||
margin-left: 30rpx;
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
}
|
||||
.footer-wrapper {
|
||||
height: 170rpx;
|
||||
background-color: transparent;
|
||||
.footer-button {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 30rpx;
|
||||
button {
|
||||
height: 110rpx;
|
||||
font-size: 33rpx;
|
||||
font-weight: 500;
|
||||
color: $J-color-tff;
|
||||
border-radius: 20rpx;
|
||||
background: $jeepay-bg-primary;
|
||||
}
|
||||
.hover-button {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
490
pages/memberCenter/index.vue
Normal file
490
pages/memberCenter/index.vue
Normal file
@@ -0,0 +1,490 @@
|
||||
<template>
|
||||
<JeepayBackground :bgColorStyle="{ background: '#f7f7f7' }">
|
||||
<JeepayCustomNavbar title="会员中心" backCtrl="back" textColor="#fff"
|
||||
bgDefaultColor="linear-gradient(270deg, rgb(35, 143, 252) 0%, rgb(26, 102, 255) 100%)" />
|
||||
<view class="header-info">
|
||||
<view class="member-info">
|
||||
<view class="info-main">
|
||||
<text class="num">{{ vdata.mbrTotalCount }}</text>
|
||||
<text class="sub-title">会员总数</text>
|
||||
</view>
|
||||
<view class="info-main">
|
||||
<view class="num">{{ cal.cert2Dollar(vdata.mbrTotalBalance) }}<text class="unit">元</text></view>
|
||||
<text class="sub-title">会员总余额</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="nav-list-wrapper">
|
||||
<block v-for="(v, i) in navList" :key="i">
|
||||
<view class="nav-item" @tap="toPage(v.pageUrl)">
|
||||
<image :src="v.icon"></image>
|
||||
<text>{{ v.title }}</text>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<view class="stat-card">
|
||||
<view class="time-wrapper">
|
||||
<block v-for="(v, i) in timeList" :key="i">
|
||||
<view class="time-item" @tap="changeTime(v.value)"
|
||||
:class="{ 'time-selected': v.value == vdata.selected }">{{
|
||||
v.label }}</view>
|
||||
</block>
|
||||
</view>
|
||||
<view v-show="vdata.selected == 'custom'">
|
||||
<view class="time-selection time-custom">
|
||||
<image src="/static/iconImg/custom-time-icon.svg" mode="scaleToFill" />
|
||||
<view class="selection-main" @tap="startTimeRef.show()">{{ vdata.startTime || '请选择开始时间' }} </view>
|
||||
<view>---</view>
|
||||
<view class="selection-main" @tap="endTimeRef.show()">{{ vdata.endTime || '请选择结束时间' }}</view>
|
||||
<image src="/static/iconImg/icon-nav-left.svg" style="transform: rotate(-90deg);" mode="scaleToFill" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="member-consume">
|
||||
<text class="num">{{ cal.cert2Dollar(Math.abs(vdata.mbrCount.changeAmount)) }}</text>
|
||||
<text class="sub-title">会员消费金额 (元)</text>
|
||||
</view>
|
||||
<view class="stat-card-info">
|
||||
<view class="stat-item">
|
||||
<view class="stat-num">{{ cal.cert2Dollar(vdata.rechargeRecordCount.entryAmount) }}</view>
|
||||
<view class="stat-title">充值入账 (元)</view>
|
||||
</view>
|
||||
<view class="stat-item">
|
||||
<view class="stat-num">{{ cal.cert2Dollar(vdata.rechargeRecordCount.giveAmount) }}</view>
|
||||
<view class="stat-title">充值赠送 (元)</view>
|
||||
</view>
|
||||
<view class="stat-item">
|
||||
<view class="stat-num">{{ cal.cert2Dollar(vdata.rechargeRecordCount.payAmount) }}</view>
|
||||
<view class="stat-title">充值支付 (元)</view>
|
||||
</view>
|
||||
<view class="stat-item">
|
||||
<view class="stat-num">{{ cal.cert2Dollar(Math.abs(vdata.accountHistoryCount.changeAmount)) }}</view>
|
||||
<view class="stat-title">余额变动 (元)</view>
|
||||
</view>
|
||||
<view class="stat-item">
|
||||
<view class="stat-num">{{ vdata.accountHistoryCount.countNum }}</view>
|
||||
<view class="stat-title">余额变动条数</view>
|
||||
</view>
|
||||
<view class="stat-item">
|
||||
<view class="stat-num">{{ vdata.mbrCount.changeCount }}</view>
|
||||
<view class="stat-title">会员消费笔数</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="switch-wrapper">
|
||||
<block v-for="v in vdata.memberConfig" :key="v.configKey">
|
||||
<view class="switch-item" v-if="v.configKey != 'memberModelState'">
|
||||
<text class="switch-text">{{ v.phoneTips.title }}</text>
|
||||
<JeepayStateSwitch v-if="v.configKey != 'mbrMaxBalance'" :confirmTitle="v.phoneTips.tips"
|
||||
:state="v.configVal" showSwitchType @update:state="changeState($event, v)" />
|
||||
<text class="max-amount" v-else>{{ !v.phoneTips.maxAmount ? '不限制充值余额' : cal.cert2Dollar(v.phoneTips?.maxAmount) }}</text>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</JeepayBackground>
|
||||
<view v-show="vdata.selected == 'custom'">
|
||||
<xp-picker ref="startTimeRef" mode="ymd" @confirm="customTime($event, 'startTime')" />
|
||||
<xp-picker ref="endTimeRef" mode="ymd" @confirm="customTime($event, 'endTime')" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref, onMounted, nextTick } from 'vue'
|
||||
import { req, API_URL_MEMBERS, API_URL_MEMBER_RECHARGE_RECORDS, API_URL_MEMBER_ACCOUNT_HISTORY, $findOrEditMemberConfig } from '@/http/apiManager.js'
|
||||
import go from '@/commons/utils/go.js'
|
||||
import cal from '@/commons/utils/cal.js'
|
||||
import dayjs from 'dayjs'
|
||||
import infoBox from '@/commons/utils/infoBox.js'
|
||||
import { onPullDownRefresh, onShow } from '@dcloudio/uni-app'
|
||||
const startTimeRef = ref()
|
||||
const endTimeRef = ref()
|
||||
const vdata = reactive({
|
||||
mbrTotalCount: '', // 会员总数,不随时间条件变化
|
||||
mbrTotalBalance: '', // 会员总余额,不随时间条件变化
|
||||
mbrCount: {}, // 会员统计
|
||||
accountHistoryCount: {}, // 流水统计
|
||||
rechargeRecordCount: {}, // 充值统计
|
||||
selected: 'today',
|
||||
startTime: '',
|
||||
endTime: '',
|
||||
memberConfig: [] //会员配置项
|
||||
})
|
||||
|
||||
const toPage = (url) => {
|
||||
go.to(url)
|
||||
}
|
||||
|
||||
onShow(() => {
|
||||
vdata.selected = 'today'
|
||||
getMbrCount()
|
||||
getMbrStats(vdata.selected)
|
||||
})
|
||||
|
||||
// 导航列表
|
||||
const navList = [
|
||||
{
|
||||
title: '会员管理',
|
||||
icon: '/static/indexImg/icon-member.svg',
|
||||
pageUrl: 'PAGES_MEMBER',
|
||||
entId: 'ENT_MCH_MEMBER'
|
||||
},
|
||||
{
|
||||
title: '充值规则',
|
||||
icon: '/static/member/recharge-rule.svg',
|
||||
pageUrl: 'PAGES_RECHARGE_RULE',
|
||||
entId: 'ENT_MEMBER_RECHARGE_RULE'
|
||||
},
|
||||
{
|
||||
title: '账户流水',
|
||||
icon: '/static/member/account-history.svg',
|
||||
pageUrl: 'PAGES_MEMBER_ACCOUNT_HISTORY',
|
||||
entId: 'ENT_MEMBER_ACCOUNT_HISTORY'
|
||||
},
|
||||
{
|
||||
title: '充值记录',
|
||||
icon: '/static/member/recharge-record.svg',
|
||||
pageUrl: 'PAGES_MEMBER_RECHARGE_RECORD',
|
||||
entId: 'ENT_MEMBER_RECHARGE_RECORD'
|
||||
},
|
||||
]
|
||||
const timeList = [
|
||||
{ label: '今天', value: 'today' },
|
||||
{ label: '昨天', value: 'yesterday' },
|
||||
{ label: '近30天', value: 'near2now_30' },
|
||||
{ label: '自定义', value: 'custom' }
|
||||
]
|
||||
// 下拉刷新
|
||||
onPullDownRefresh(() => {
|
||||
getMbrCount()
|
||||
changeTime(vdata.selected)
|
||||
})
|
||||
|
||||
function getMbrCount () {
|
||||
// 请求会员统计,不随时间变化
|
||||
req.list(API_URL_MEMBERS + '/count', undefined).then(({ bizData }) => {
|
||||
uni.stopPullDownRefresh()
|
||||
vdata.mbrTotalCount = bizData.memberNum
|
||||
vdata.mbrTotalBalance = bizData.balance
|
||||
}).catch((err) => uni.stopPullDownRefresh())
|
||||
}
|
||||
|
||||
function getMbrStats (queryDate) {
|
||||
const reqParams = {}
|
||||
if (queryDate) {
|
||||
reqParams.queryDateRange = queryDate
|
||||
}
|
||||
|
||||
// 请求会员统计
|
||||
req.list(API_URL_MEMBERS + '/count', reqParams).then(({ bizData }) => {
|
||||
vdata.mbrCount = bizData
|
||||
})
|
||||
|
||||
// 请求记录统计
|
||||
req.list(API_URL_MEMBER_RECHARGE_RECORDS + '/count', Object.assign({ state: 2 }, reqParams)).then(({ bizData }) => {
|
||||
vdata.rechargeRecordCount = bizData
|
||||
})
|
||||
|
||||
// 请求会员流水统计
|
||||
req.list(API_URL_MEMBER_ACCOUNT_HISTORY + '/count', reqParams).then(({ bizData }) => {
|
||||
vdata.accountHistoryCount = bizData
|
||||
})
|
||||
}
|
||||
|
||||
// 切换日期选项,当选自定义时,赋予默认时间
|
||||
function changeTime (e) {
|
||||
if (e != 'custom') {
|
||||
vdata.selected = e
|
||||
getMbrStats(e)
|
||||
} else {
|
||||
if (vdata.selected == 'today') {
|
||||
vdata.startTime = dayjs().format('YYYY-MM-DD')
|
||||
vdata.endTime = dayjs().format('YYYY-MM-DD')
|
||||
|
||||
} else if (vdata.selected == 'yesterday') {
|
||||
vdata.startTime = dayjs().subtract(1, 'day').format('YYYY-MM-DD')
|
||||
vdata.endTime = dayjs().subtract(1, 'day').format('YYYY-MM-DD')
|
||||
|
||||
} else if (vdata.selected == 'near2now_30') {
|
||||
vdata.startTime = dayjs().subtract(30, 'day').format('YYYY-MM-DD')
|
||||
vdata.endTime = dayjs().format('YYYY-MM-DD')
|
||||
}
|
||||
|
||||
vdata.selected = e
|
||||
}
|
||||
}
|
||||
|
||||
function customTime ({ value }, type) {
|
||||
if ((type == 'startTime' && dayjs(value).isAfter(dayjs(vdata.endTime)))
|
||||
|| (type == 'endTime' && (dayjs(vdata.startTime).isAfter(dayjs(value)) || dayjs(value).isAfter(dayjs())))) {
|
||||
return infoBox.showToast('时间选择有误')
|
||||
}
|
||||
|
||||
vdata[type] = value
|
||||
|
||||
const queryDateRange = `customDateTime_
|
||||
${dayjs(vdata.startTime).startOf('date').format('YYYY-MM-DD HH:mm:ss')}_
|
||||
${dayjs(vdata.endTime).endOf('date').format('YYYY-MM-DD HH:mm:ss')}`
|
||||
|
||||
getMbrStats(queryDateRange)
|
||||
}
|
||||
//移动端自定义提示语
|
||||
const mebConfig = {
|
||||
memberCustomAmountState: {
|
||||
title: '是否开启自定义金额充值',
|
||||
tips: '是否修改自定义充值金额状态',
|
||||
weight: 1
|
||||
},
|
||||
memberPayState: {
|
||||
title: '是否开启会员支付',
|
||||
tips: '是否修改会员支付状态',
|
||||
weight: 0
|
||||
},
|
||||
mbrMaxBalance: {
|
||||
title: '会员最大储值余额(单位元)',
|
||||
tips: '是否修改会员支付状态',
|
||||
weight: 2,
|
||||
maxAmount: ''
|
||||
}
|
||||
}
|
||||
// 获取会员支付配置项
|
||||
const findOrEditMemberConfig = (data, mode, uri) => {
|
||||
$findOrEditMemberConfig(data, mode, uri).then(({ bizData }) => {
|
||||
if (mode) return infoBox.showToast('修改成功')
|
||||
//不需要会员模块
|
||||
const index = bizData.findIndex(v => v.configKey == 'memberModelState')
|
||||
if (index != '-1') {
|
||||
bizData.splice(index, 1)
|
||||
}
|
||||
bizData.forEach(v => {
|
||||
v.phoneTips = mebConfig[v.configKey] || {}
|
||||
})
|
||||
bizData.sort((a, b) => a.phoneTips.weight - b.phoneTips.weight)
|
||||
Object.assign(vdata.memberConfig, bizData)
|
||||
findMemberMaxAmount()
|
||||
})
|
||||
}
|
||||
findOrEditMemberConfig({ groupKey: 'memberConfig' })
|
||||
function changeState (e, v) {
|
||||
v.configVal = e
|
||||
findOrEditMemberConfig({ configData: vdata.memberConfig }, 'PUT', '/memberConfig')
|
||||
}
|
||||
//查询 会员最大储值金额
|
||||
function findMemberMaxAmount () {
|
||||
$findOrEditMemberConfig(undefined, undefined, '/mbrMaxBalance').then(({ bizData }) => {
|
||||
vdata.memberConfig.find(v => v.configKey == 'mbrMaxBalance').phoneTips.maxAmount = bizData
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.time-item {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.header-info {
|
||||
height: 290rpx;
|
||||
background: linear-gradient(270deg, rgb(35, 143, 252) 0%, rgb(26, 102, 255) 100%);
|
||||
border: 1rpx solid transparent;
|
||||
border-radius: 0 0 32rpx 32rpx;
|
||||
|
||||
.member-info {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 50rpx;
|
||||
|
||||
.info-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 335rpx;
|
||||
height: 106rpx;
|
||||
|
||||
.num {
|
||||
margin-bottom: 10rpx;
|
||||
color: #ffffff;
|
||||
font-size: 50rpx;
|
||||
font-weight: 500;
|
||||
|
||||
.unit {
|
||||
margin-left: 10rpx;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
font-size: 23rpx;
|
||||
}
|
||||
}
|
||||
|
||||
view:nth-child(1) {
|
||||
border-right: 1rpx solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-list-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 50rpx auto 40rpx;
|
||||
width: 680rpx;
|
||||
height: 170rpx;
|
||||
border-radius: 32rpx;
|
||||
background-color: #fff;
|
||||
|
||||
view {
|
||||
width: 170rpx;
|
||||
height: 170rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
margin-bottom: 10rpx;
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
color: rgba(63, 63, 63, 1);
|
||||
font-size: 22rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
margin: 40rpx auto;
|
||||
margin-top: 120rpx;
|
||||
width: 680rpx;
|
||||
min-height: 656rpx;
|
||||
border-radius: 32rpx;
|
||||
background-color: #fff;
|
||||
border: .1rpx solid transparent;
|
||||
|
||||
.time-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 30rpx auto;
|
||||
width: 620rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 20rpx;
|
||||
background: linear-gradient(270deg, rgba(35, 143, 252, 0.1) 0%, rgba(26, 102, 255, 0.1) 100%);
|
||||
|
||||
.time-item {
|
||||
width: 153.5rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 20rpx;
|
||||
color: rgb(89, 134, 179);
|
||||
}
|
||||
|
||||
.time-selected {
|
||||
background: linear-gradient(270deg, rgb(35, 143, 252) 0%, rgb(26, 102, 255) 100%);
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.time-selection {
|
||||
height: 100rpx;
|
||||
white-space: nowrap;
|
||||
|
||||
image {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
}
|
||||
|
||||
.selection-main {
|
||||
height: auto;
|
||||
margin: 0 10rpx 0 20rpx;
|
||||
font-size: 30rpx;
|
||||
color: rgb(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.time-custom {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 60rpx;
|
||||
}
|
||||
|
||||
.member-consume {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding-bottom: 50rpx;
|
||||
box-shadow: 0 50rpx 70rpx -60rpx rgba(107, 130, 153, 0.2);
|
||||
|
||||
.num {
|
||||
margin-top: 50rpx;
|
||||
color: rgb(41, 128, 253);
|
||||
font-size: 60rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.sub-title {
|
||||
margin-top: 10rpx;
|
||||
color: rgb(166, 166, 166);
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.stat-card-info {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
padding: 25rpx;
|
||||
|
||||
.stat-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 25rpx 0;
|
||||
width: 210rpx;
|
||||
height: 82rpx;
|
||||
|
||||
.stat-num {
|
||||
margin-bottom: 10rpx;
|
||||
color: rgb(0, 0, 0);
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stat-title {
|
||||
color: rgb(166, 166, 166);
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.switch-wrapper {
|
||||
margin: 40rpx auto 0;
|
||||
width: 680rpx;
|
||||
height: 330rpx;
|
||||
border-radius: 32rpx;
|
||||
background: #ffffffff;
|
||||
|
||||
.switch-item {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0 10rpx 0 30rpx;
|
||||
height: 110rpx;
|
||||
}
|
||||
|
||||
.switch-item:nth-child(2) {
|
||||
border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);
|
||||
border-top: 1rpx solid rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
.max-amount {
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
</style>
|
||||
108
pages/memberCenter/member/conponents/ConfirmManual.vue
Normal file
108
pages/memberCenter/member/conponents/ConfirmManual.vue
Normal file
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<uni-popup ref="popup" type="center" mask-background-color="rgba(0,0,0,.5)">
|
||||
<view class="psw-wrapper">
|
||||
<view class="psw-top">
|
||||
<view class="close-wrapper">
|
||||
<view class="psw-close" @tap="close">
|
||||
<image src="/static/iconImg/icon-x.svg"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="psw-title">请输入支付密码</view>
|
||||
<view class="sub-tips">会员调账</view>
|
||||
<view class="amount">{{ vdata.amount }}</view>
|
||||
</view>
|
||||
<view class="psw-input">
|
||||
<JPasswordInput ref="refPswInput" margin="0 20px" @inputChange="inputChange" />
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from "vue"
|
||||
import infoBox from '@/commons/utils/infoBox.js';
|
||||
import { $memberManual } from "@/http/apiManager"
|
||||
import emit from '@/commons/utils/emit.js'
|
||||
import go from '@/commons/utils/go.js'
|
||||
import { Base64 } from "js-base64";
|
||||
const refPswInput = ref(null)
|
||||
const popup = ref(null)
|
||||
const vdata = reactive({})
|
||||
const open = (val) => {
|
||||
val.addOrRedUce
|
||||
vdata.amount = val.addOrRedUce == 'add' ? '+' + val.num : '-' + val.num
|
||||
vdata.memberId = val.mbrId
|
||||
popup.value.open()
|
||||
}
|
||||
const close = () => popup.value.close()
|
||||
|
||||
const inputChange = (e) => {
|
||||
if (e.length >= 6) return manual(e)
|
||||
}
|
||||
const manual = (pswd) => {
|
||||
$memberManual({ memberId: vdata.memberId, changeAmount: vdata.amount, currentPassword: Base64.encode(pswd) }).then(res => {
|
||||
infoBox.showToast('调账成功').then(r => {
|
||||
close()
|
||||
emit.pageEmit(emit.ENAME_REF_MEMBER_LIST) // 更新列表
|
||||
go.back(1, emit.ENAME_REF_MEMBER_DETAIL) // 返回详情 && 更新详情
|
||||
})
|
||||
}).catch(err => {
|
||||
refPswInput.value.clearInput()
|
||||
})
|
||||
}
|
||||
defineExpose({ open })
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.psw-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
justify-content: space-between;
|
||||
width: 650rpx;
|
||||
height: 496rpx;
|
||||
border-radius: 32rpx;
|
||||
background-color: #fff;
|
||||
|
||||
.psw-title {
|
||||
text-align: center;
|
||||
color: #000000ff;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.close-wrapper {
|
||||
.psw-close {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 106rpx;
|
||||
height: 106rpx;
|
||||
|
||||
image {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.psw-input {
|
||||
margin-bottom: 50rpx;
|
||||
width: 650rpx;
|
||||
}
|
||||
|
||||
.sub-tips {
|
||||
margin: 30rpx 0 20rpx 0;
|
||||
color: #808080ff;
|
||||
font-size: 30rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.amount {
|
||||
text-align: center;
|
||||
color: #000000ff;
|
||||
font-size: 50rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
180
pages/memberCenter/member/detail.vue
Normal file
180
pages/memberCenter/member/detail.vue
Normal file
@@ -0,0 +1,180 @@
|
||||
<template>
|
||||
<JeepayBackground :bgColorStyle="{}">
|
||||
|
||||
<JeepayCustomNavbar textColor="#fff"
|
||||
bgDefaultColor="linear-gradient(270deg, rgba(72, 192, 255, 1) 0%, rgba(51, 157, 255, 1) 100%)" title="会员详情"
|
||||
backCtrl="back" />
|
||||
<JeepayTableListItem viewClass="list-item-by-detail" :logo="vdata.record.avatarUrl" :title="vdata.record.mbrName"
|
||||
:subtitle="vdata.record.mbrTel" :moreBtnList="list" :logoStyle="{ borderRadius: '50%' }" />
|
||||
|
||||
<!-- 账户金额 -->
|
||||
<JeepayCard :viewStyle="{ marginTop: '50rpx' }">
|
||||
<view class="pay-wrapper">
|
||||
<view>
|
||||
<JeepayDescviewItem title="账户余额 (元)" />
|
||||
<view class="pay-amount">{{ (vdata.record.balance / 100).toFixed(2) }}</view>
|
||||
</view>
|
||||
<view class="pay-shift" @tap="toManual">调账
|
||||
<image src="/static/member/member-arrow.svg"></image>
|
||||
</view>
|
||||
</view>
|
||||
</JeepayCard>
|
||||
<JeepayCard viewStyle="margin-top: 50rpx" editText="编辑信息"
|
||||
@editTap="go.to('PAGES_MEMBER_EDIT', { mbrId: vdata.record.mbrId })">
|
||||
<JeepayDescview>
|
||||
<JeepayDescviewItem title="会员编号" :desc="vdata.record.mbrId" />
|
||||
<JeepayDescviewItem title="会员备注" :desc="vdata.record.remark ? vdata.record.remark : '-'" />
|
||||
<JeepayDescviewItem title="创建时间" :desc="vdata.record.createdAt" />
|
||||
</JeepayDescview>
|
||||
</JeepayCard>
|
||||
|
||||
<JeepayCard viewStyle="margin-top: 40rpx">
|
||||
<JeepayTableListItem v-if="ent.has('ENT_MEMBER_EDIT')" title="会员状态" subtitle="状态禁用后,该会员将无法使用">
|
||||
<template #titleRight>
|
||||
<JeepayStateSwitch v-model:state="vdata.record.state" :showSwitchType="true"
|
||||
:updateStateFunc="updateStateFunc" />
|
||||
</template>
|
||||
</JeepayTableListItem>
|
||||
|
||||
</JeepayCard>
|
||||
|
||||
<JSinglePopup ref="single" :list="list" activeColor="#FF5B4C" />
|
||||
<JeepayPopupConfirm ref="jeepayPopupConfirmRef" />
|
||||
</JeepayBackground>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue'
|
||||
import { onLoad, onUnload } from '@dcloudio/uni-app'
|
||||
import { reqLoad, API_URL_MEMBERS } from '@/http/apiManager.js'
|
||||
import infoBox from '@/commons/utils/infoBox.js';
|
||||
import go from '@/commons/utils/go.js'
|
||||
import emit from '@/commons/utils/emit.js'
|
||||
import ent from '@/commons/utils/ent.js'
|
||||
|
||||
const single = ref()
|
||||
const jeepayPopupConfirmRef = ref()
|
||||
|
||||
const list = reactive([
|
||||
{ label: '调账', value: 'delete', fun: toManual },
|
||||
])
|
||||
|
||||
onLoad((options) => {
|
||||
refData(options.mbrId)
|
||||
})
|
||||
|
||||
const vdata = reactive({
|
||||
record: {}
|
||||
})
|
||||
|
||||
// 监听 更新事件
|
||||
onUnload(() => uni.$off(emit.ENAME_REF_MEMBER_DETAIL))
|
||||
uni.$on(emit.ENAME_REF_MEMBER_DETAIL, function (data) {
|
||||
refData(vdata.record.mbrId)
|
||||
})
|
||||
|
||||
function refData (mbrId) {
|
||||
reqLoad.getById(API_URL_MEMBERS, mbrId).then(({ bizData }) => {
|
||||
vdata.record = bizData
|
||||
})
|
||||
}
|
||||
|
||||
function updateStateFunc (state) {
|
||||
return reqLoad.updateById(API_URL_MEMBERS, vdata.record.mbrId, { state: state }).then(() => {
|
||||
emit.pageEmit(emit.ENAME_REF_MEMBER_LIST)
|
||||
infoBox.showSuccessToast("修改成功");
|
||||
})
|
||||
}
|
||||
|
||||
function toManual () {
|
||||
go.to('PAGES_MEMBER_RECHARGE_MEMBERMANUAL', { mbrId: vdata.record.mbrId })
|
||||
}
|
||||
|
||||
function deleteFunc () {
|
||||
return reqLoad.delById(API_URL_MEMBERS, vdata.record.mbrId).then(() => {
|
||||
infoBox.showSuccessToast("删除成功");
|
||||
go.back(1, emit.ENAME_REF_MEMBER_LIST) // 返回页面 && 更新
|
||||
})
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sex-info-text {
|
||||
image {
|
||||
width: 30rpx;
|
||||
height: 30rpx;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.sta-info {
|
||||
display: flex;
|
||||
margin-top: 50rpx;
|
||||
padding: 0 50rpx;
|
||||
|
||||
.sta-photo {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
|
||||
image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.info-main {
|
||||
flex: 1;
|
||||
margin-left: 30rpx;
|
||||
color: #fff;
|
||||
|
||||
.info-name {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 33rpx;
|
||||
font-weight: 400;
|
||||
|
||||
image {
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.info-phone {
|
||||
margin-top: 16rpx;
|
||||
color: rgba(251, 252, 253, 0.7);
|
||||
font-size: 25rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.pay-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.pay-amount {
|
||||
margin: 40rpx;
|
||||
color: #000000ff;
|
||||
font-size: 50rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.pay-shift {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #2980fdff;
|
||||
font-size: 33rpx;
|
||||
|
||||
image {
|
||||
margin-right: 40rpx;
|
||||
width: 44rpx;
|
||||
height: 44rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
129
pages/memberCenter/member/edit.vue
Normal file
129
pages/memberCenter/member/edit.vue
Normal file
@@ -0,0 +1,129 @@
|
||||
<template>
|
||||
<JeepayBackground>
|
||||
<view class="page-wrapper jeepay-edit-form">
|
||||
<JeepayCustomNavbar :title="vdata.mbrId ? '修改会员信息' : '创建会员' " backCtrl="back" />
|
||||
<uni-forms ref="formRef" :rules="rules" :model="vdata.formData" :label-width="140">
|
||||
|
||||
<uni-forms-item required label="会员名称" name="mbrName">
|
||||
<uni-easyinput v-model="vdata.formData.mbrName" placeholder="请输入会员名称" :inputBorder="false"></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
|
||||
<uni-forms-item required label="手机号" name="mbrTel">
|
||||
<text v-if="vdata.mbrId">{{ vdata.formData.mbrTel }}</text>
|
||||
<uni-easyinput v-else v-model="vdata.formData.mbrTel" placeholder="请输入手机号" :inputBorder="false"></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
|
||||
<JeepayTableListItem v-if="vdata.mbrId" title="状态" subtitle="状态禁用后,会员将无法支付">
|
||||
<template #titleRight>
|
||||
<JeepayStateSwitch v-model:state="vdata.formData.state" :showSwitchType="true" :confirm='false' />
|
||||
</template>
|
||||
</JeepayTableListItem>
|
||||
|
||||
<uni-forms-item required label="备注" name="remark">
|
||||
<uni-easyinput v-model="vdata.formData.remark" placeholder="请输入备注" :inputBorder="false"></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
|
||||
</uni-forms>
|
||||
|
||||
<view class="confirm-wrapper">
|
||||
<view class="confirm-button flex-center" hover-class="touch-button" @tap="confirmFunc"> {{ vdata.mbrId ? '确认修改' : '确认创建' }}</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</JeepayBackground>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { reqLoad, API_URL_MEMBERS } from '@/http/apiManager.js'
|
||||
import infoBox from '@/commons/utils/infoBox.js';
|
||||
import go from '@/commons/utils/go.js'
|
||||
import formUtil from '@/commons/utils/formUtil.js'
|
||||
import emit from '@/commons/utils/emit.js'
|
||||
|
||||
const formRef = ref()
|
||||
|
||||
onLoad((options) => {
|
||||
|
||||
// 修改页面
|
||||
if(options.mbrId){
|
||||
vdata.mbrId = options.mbrId
|
||||
reqLoad.getById(API_URL_MEMBERS, vdata.mbrId).then(({bizData}) => {
|
||||
vdata.formData = bizData
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
const rules = {
|
||||
mbrName: {
|
||||
rules:[ formUtil.rules.requiredInput() ],
|
||||
},
|
||||
mbrTel: {
|
||||
rules:[ formUtil.rules.requiredInput(), formUtil.rules.patternRule('联系人电话', formUtil.regexp.mobile) ],
|
||||
},
|
||||
}
|
||||
|
||||
|
||||
const vdata = reactive({
|
||||
|
||||
mbrId: null, // 新建 or 修改
|
||||
|
||||
// 表单数据
|
||||
formData: {
|
||||
state: 1
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
function confirmFunc(){
|
||||
|
||||
formUtil.validate(formRef.value).then(() => {
|
||||
return reqLoad.addOrUpdate(vdata.mbrId, API_URL_MEMBERS, vdata.formData)
|
||||
})
|
||||
.then(( {bizData} ) => {
|
||||
emit.pageEmit(emit.ENAME_REF_MEMBER_LIST) // 更新列表
|
||||
go.back(1, emit.ENAME_REF_MEMBER_DETAIL) // 返回详情 && 更新详情
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
input {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
.f-label {
|
||||
width: 240rpx;
|
||||
}
|
||||
.selected-sex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-top: 45rpx;
|
||||
margin-bottom: 10rpx;
|
||||
font-size: 32rpx;
|
||||
color: #b3b3b3;
|
||||
image {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
margin-top: -40rpx;
|
||||
}
|
||||
.selected-box {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
.confirm-wrapper {
|
||||
padding: 50rpx 30rpx;
|
||||
.confirm-button {
|
||||
height: 110rpx;
|
||||
color: #fff;
|
||||
border-radius: 20rpx;
|
||||
background: $jeepay-bg-primary;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
116
pages/memberCenter/member/member.vue
Normal file
116
pages/memberCenter/member/member.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<view class="page-wrapper">
|
||||
<JeepayCustomNavbar title="会员管理" backCtrl="back" />
|
||||
<view class="sta-input" @tap="go.toSearchPage('member')">
|
||||
<view class="input-main">
|
||||
<image src="/static/iconImg/icon-search.svg" mode="scaleToFill" />
|
||||
搜索会员名称、手机号
|
||||
</view>
|
||||
<!-- <image class="icon-more" src="/static/iconImg/icon-more.svg" mode="scaleToFill" /> -->
|
||||
</view>
|
||||
|
||||
|
||||
<JeepayTableList ref="jeepayTableListRef" :reqTableDataFunc="reqTableDataFunc">
|
||||
<template #tableBody="{ record }">
|
||||
<MemberRender :record="record" />
|
||||
</template>
|
||||
</JeepayTableList>
|
||||
|
||||
<view class="footer-wrapper">
|
||||
<view class="footer-button footer-button-style">
|
||||
<button hover-class="hover-button" hover-stay-time="150" class="flex-center" @tap="createMember">创建会员</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<JeepayPopupConfirm ref="jeepayPopupConfirmRef" />
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import { nextTick, reactive, ref } from "vue"
|
||||
import { onReachBottom, onShow, onUnload } from '@dcloudio/uni-app'
|
||||
import go from '@/commons/utils/go.js'
|
||||
import emit from '@/commons/utils/emit.js'
|
||||
import { reqLoad, API_URL_MEMBERS } from "@/http/apiManager.js"
|
||||
import MemberRender from '@/pages/list/render/MemberRender.vue'
|
||||
|
||||
const jeepayTableListRef = ref()
|
||||
const jeepayPopupConfirmRef = ref()
|
||||
|
||||
onReachBottom(() => { })
|
||||
|
||||
// // 监听 更新事件
|
||||
onUnload(() => uni.$off(emit.ENAME_REF_MEMBER_LIST))
|
||||
uni.$on(emit.ENAME_REF_MEMBER_LIST, function(data){
|
||||
jeepayTableListRef.value.refTable(true)
|
||||
})
|
||||
|
||||
// 请求
|
||||
function reqTableDataFunc (params) {
|
||||
return reqLoad.list(API_URL_MEMBERS, params)
|
||||
}
|
||||
|
||||
|
||||
// 创建会员
|
||||
const createMember = () => {
|
||||
go.to("PAGES_MEMBER_EDIT")
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sta-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 30rpx;
|
||||
height: 110rpx;
|
||||
background-color: $J-bg-ff;
|
||||
.input-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 70rpx;
|
||||
background-color: $J-bg-f5;
|
||||
border-radius: $J-b-r12;
|
||||
color: rgba(0, 0, 0, 0.35);
|
||||
font-size: 27rpx;
|
||||
font-weight: 400;
|
||||
image {
|
||||
padding: 22rpx;
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
}
|
||||
}
|
||||
.icon-more {
|
||||
margin-left: 30rpx;
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
}
|
||||
.footer-wrapper {
|
||||
height: 170rpx;
|
||||
background-color: transparent;
|
||||
.footer-button {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 30rpx;
|
||||
button {
|
||||
height: 110rpx;
|
||||
font-size: 33rpx;
|
||||
font-weight: 500;
|
||||
color: $J-color-tff;
|
||||
border-radius: 20rpx;
|
||||
background: $jeepay-bg-primary;
|
||||
}
|
||||
.hover-button {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
195
pages/memberCenter/member/memberManual.vue
Normal file
195
pages/memberCenter/member/memberManual.vue
Normal file
@@ -0,0 +1,195 @@
|
||||
<template>
|
||||
<view class="page-wrapper">
|
||||
<view class="member-header">
|
||||
<view class="left">
|
||||
<view class="top-title">会员当前余额 (元)</view>
|
||||
<view class="member-amount">{{ (vdata.balance / 100).toFixed(2) }}</view>
|
||||
</view>
|
||||
<image :src="vdata.avatarUrl" class="member-photo"></image>
|
||||
</view>
|
||||
<view class="m-wrapper" @tap="openAddOrRed">
|
||||
<view class="left">
|
||||
<view class="sub-title">调账方式</view>
|
||||
<view class="m-type">{{ vdata.addOrRedUce == 'add' ? '加款' : '减款' }} </view>
|
||||
</view>
|
||||
<view class="right">
|
||||
<image src="/static/iconImg/icon-arrow-right.svg" class="member-photo"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="m-wrapper m-amout">
|
||||
<view class="left">
|
||||
<view class="sub-title">调账金额</view>
|
||||
<input class="m-input" type="digit" v-model="vdata.num" placeholder="请输入调账金额" @input="inputChange">
|
||||
</view>
|
||||
<view class="right">
|
||||
元
|
||||
</view>
|
||||
</view>
|
||||
<view class="ba-wrapper">
|
||||
<view class="sub-title">调账后金额</view>
|
||||
<view class="m-balance">¥{{ (vdata.manualAmount / 100).toFixed(2) }}</view>
|
||||
</view>
|
||||
<view class="but-wrapper">
|
||||
<Button @tap="openManual">确认调账</Button>
|
||||
</view>
|
||||
</view>
|
||||
<ConfirmManual ref="refManual" />
|
||||
<JSinglePopup :list="list" ref="refSingle" />
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from "vue"
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import ConfirmManual from "./conponents/ConfirmManual.vue"
|
||||
import { $memberManual, reqLoad, API_URL_MEMBERS } from "@/http/apiManager"
|
||||
import infoBox from '@/commons/utils/infoBox.js';
|
||||
onLoad((options) => {
|
||||
getMemberInfos(options.mbrId)
|
||||
})
|
||||
const vdata = reactive({})
|
||||
const refSingle = ref(null)
|
||||
const refManual = ref(null)
|
||||
const list = [
|
||||
{
|
||||
label: '加款', value: 'add', fun: () => {
|
||||
vdata.addOrRedUce = 'add'
|
||||
if (vdata.num) return vdata.manualAmount = (vdata.balance * 1 + vdata.num * 100)// 隐式转换后 在进行加法运算
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '减款', value: 'reduce', fun: () => {
|
||||
vdata.addOrRedUce = 'reduce'
|
||||
if (vdata.num) return vdata.manualAmount = (vdata.balance - vdata.num * 100)
|
||||
}
|
||||
},
|
||||
]
|
||||
const styles = {
|
||||
backgroundColor: 'transparent',
|
||||
color: '#000',
|
||||
fontSize: '32rpx',
|
||||
}
|
||||
function getMemberInfos (mbrId) {
|
||||
reqLoad.getById(API_URL_MEMBERS, mbrId).then(({ bizData }) => {
|
||||
Object.assign(vdata, bizData)
|
||||
vdata.manualAmount = bizData.balance
|
||||
vdata.addOrRedUce = 'add' //赋值初始值 加款
|
||||
})
|
||||
}
|
||||
const openAddOrRed = () => {
|
||||
refSingle.value.open()
|
||||
}
|
||||
const inputChange = (e) => {
|
||||
if (vdata.addOrRedUce == 'add') {
|
||||
vdata.manualAmount = (vdata.balance * 1 + vdata.num * 100)// 隐式转换后 在进行加法运算
|
||||
return
|
||||
}
|
||||
return vdata.manualAmount = (vdata.balance - vdata.num * 100)
|
||||
}
|
||||
const REG_AMOUNT = /^([0-9]{1}|^[1-9]{1}\d{1,15})(\.\d{1,2})?$/
|
||||
const openManual = () => {
|
||||
if (vdata.num <= 0) return infoBox.showToast('调账金额 不能为零')
|
||||
if (!REG_AMOUNT.test(vdata.num)) return infoBox.showToast('请输入正数金额 保留两位小数')
|
||||
refManual.value.open(vdata)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page-wrapper {
|
||||
background-color: #fff !important;
|
||||
min-height: 100vh;
|
||||
|
||||
.sub-title {
|
||||
color: #4c4c4cff;
|
||||
font-size: 30rpx;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.member-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 35rpx;
|
||||
padding-bottom: 50rpx;
|
||||
border-bottom: 1rpx solid #0000000f;
|
||||
|
||||
.top-title {
|
||||
color: #808080ff;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
|
||||
.member-amount {
|
||||
margin-top: 20rpx;
|
||||
color: #000000ff;
|
||||
font-size: 50rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
image {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.m-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
width: 680rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 32rpx;
|
||||
opacity: 1;
|
||||
background: #f7f7f7ff;
|
||||
|
||||
.left {
|
||||
display: flex;
|
||||
margin-left: 40rpx;
|
||||
|
||||
.m-type {
|
||||
margin-left: 78rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
image {
|
||||
width: 108rpx;
|
||||
height: 120rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.m-amout {
|
||||
margin-top: 30rpx;
|
||||
|
||||
.m-input {
|
||||
margin-left: 78rpx;
|
||||
}
|
||||
|
||||
.right {
|
||||
margin-right: 40rpx;
|
||||
color: #00000080;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.ba-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 50rpx auto;
|
||||
width: 600rpx;
|
||||
|
||||
.m-balance {
|
||||
color: #000000ff;
|
||||
font-size: 30rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.but-wrapper {
|
||||
margin: 105rpx auto;
|
||||
width: 400rpx;
|
||||
}
|
||||
</style>
|
||||
147
pages/memberCenter/rechargeRecord/detail.vue
Normal file
147
pages/memberCenter/rechargeRecord/detail.vue
Normal file
@@ -0,0 +1,147 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<view class="mbr-info">
|
||||
<image :src="vdata.record.avatarUrl" />
|
||||
<text class="mbr-info-name">{{ vdata.record.mbrName }}</text>
|
||||
<text class="mbr-info-amount">{{ '+' + cal.cert2Dollar(vdata.record.entryAmount) }}</text>
|
||||
</view>
|
||||
<view class="account-line"></view>
|
||||
<view class="account-history">
|
||||
<view class="account-history-item"><text>充值状态</text>
|
||||
<text class="order-text">{{ datamap.rechargeRecordImage(vdata.record.state).text }}</text>
|
||||
</view>
|
||||
<view class="account-history-item">
|
||||
<text>充值订单号</text>
|
||||
<text>{{ vdata.record.rechargeRecordId }}
|
||||
<text class="info-copy" @tap="copyInfo(vdata.record.rechargeRecordId)">复制</text>
|
||||
</text>
|
||||
</view>
|
||||
<view class="account-history-item"><text>会员ID</text><text>{{ vdata.record.mbrId }}</text></view>
|
||||
<view class="account-history-item"><text>会员手机号</text><text>{{ vdata.record.mbrTel }}</text></view>
|
||||
<view class="account-history-item"><text>支付金额</text><text>¥{{ cal.cert2Dollar(vdata.record.payAmount) }}</text></view>
|
||||
<view class="account-history-item"><text>赠送金额</text><text>¥{{ cal.cert2Dollar(vdata.record.giveAmount) }}</text></view>
|
||||
<view class="account-history-item"><text>到账金额</text><text>¥{{ cal.cert2Dollar(vdata.record.entryAmount) }}</text></view>
|
||||
<view v-if="vdata.record.payOrderId" class="account-history-item">
|
||||
<text>支付订单号</text>
|
||||
<text>{{ vdata.record.payOrderId }}
|
||||
<text class="info-copy" @tap="copyInfo(vdata.record.payOrderId)">复制</text>
|
||||
</text>
|
||||
</view>
|
||||
<view class="account-history-item"><text>异步通知地址</text><text>{{ vdata.record.notifyUrl }}</text></view>
|
||||
<view class="account-history-item"><text>创建时间</text><text>{{ vdata.record.createdAt }}</text></view>
|
||||
<view class="account-history-item"><text>支付成功时间</text><text>{{ vdata.record.successTime }}</text></view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue'
|
||||
import { onLoad, onUnload } from '@dcloudio/uni-app'
|
||||
import { reqLoad, API_URL_MEMBER_RECHARGE_RECORDS } from '@/http/apiManager.js'
|
||||
import infoBox from '@/commons/utils/infoBox.js';
|
||||
import cal from '@/commons/utils/cal.js'
|
||||
import go from '@/commons/utils/go.js'
|
||||
import emit from '@/commons/utils/emit.js'
|
||||
import ent from '@/commons/utils/ent.js'
|
||||
import datamap from '@/commons/utils/datamap.js'
|
||||
|
||||
onLoad((options) => {
|
||||
refData(options.rechargeRecordId)
|
||||
})
|
||||
|
||||
const vdata = reactive({
|
||||
record : { }
|
||||
})
|
||||
|
||||
// 监听 更新事件
|
||||
onUnload(() => uni.$off(emit.ENAME_REF_MEMBER_RECHARGE_RECORD_DETAIL))
|
||||
uni.$on(emit.ENAME_REF_MEMBER_RECHARGE_RECORD_DETAIL, function(data){
|
||||
refData(vdata.record.rechargeRecordId)
|
||||
})
|
||||
|
||||
function refData(rechargeRecordId){
|
||||
reqLoad.getById(API_URL_MEMBER_RECHARGE_RECORDS, rechargeRecordId).then(({bizData}) => {
|
||||
vdata.record = bizData
|
||||
})
|
||||
}
|
||||
|
||||
const copyInfo = (val) => {
|
||||
uni.setClipboardData({ data: val}).then(() => {
|
||||
infoBox.showSuccessToast('复制成功')
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content {
|
||||
width: 630rpx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.mbr-info {
|
||||
height: 376rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
image {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.mbr-info-name {
|
||||
padding-top: 10rpx;
|
||||
color: #828282ff;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
.mbr-info-amount {
|
||||
padding-top: 10rpx;
|
||||
color: #000000ff;
|
||||
font-size: 50rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
.account-line {
|
||||
border-bottom: 1rpx solid #0000001a;
|
||||
}
|
||||
.account-history {
|
||||
padding-top: 60rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
|
||||
.account-history-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
opacity: 1;
|
||||
padding: 13rpx 0 12rpx;
|
||||
|
||||
text:first-child {
|
||||
width: 180rpx;
|
||||
color: #999999;
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
}
|
||||
text:nth-child(2) {
|
||||
width: 450rpx;
|
||||
word-break: break-all;
|
||||
color: #000000;
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
|
||||
.info-copy {
|
||||
padding-left: 20rpx;
|
||||
color: #2d6dccff;
|
||||
font-size: 26rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
116
pages/memberCenter/rechargeRecord/index.vue
Normal file
116
pages/memberCenter/rechargeRecord/index.vue
Normal file
@@ -0,0 +1,116 @@
|
||||
<template>
|
||||
<view class="page-wrapper">
|
||||
<JeepayCustomNavbar title="红包记录" backCtrl="back" />
|
||||
|
||||
<!-- 搜索 -->
|
||||
<JSearchTitle place="搜索手机号、会员名称" @click="go.toSearchPage('memberRechargeRecord')">
|
||||
<template #right>
|
||||
<JeepaySearchSelect v-model:bizType="vdata.searchData.state" :list="vdata.searchParamsList" title="按充值状态筛选" @change="refTable"/>
|
||||
</template>
|
||||
</JSearchTitle>
|
||||
|
||||
<!-- 数据列表 -->
|
||||
<JeepayTableList ref="jeepayTableListRef" :searchData="vdata.searchData" :reqTableDataFunc="reqTableDataFunc">
|
||||
<template #tableBody="{ record }">
|
||||
<MemberRechargeRecordRender :record="record" />
|
||||
</template>
|
||||
</JeepayTableList>
|
||||
|
||||
</view>
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import { nextTick, reactive, ref } from "vue"
|
||||
import { onReachBottom, onShow, onUnload } from '@dcloudio/uni-app'
|
||||
import go from '@/commons/utils/go.js'
|
||||
import emit from '@/commons/utils/emit.js'
|
||||
import { reqLoad, API_URL_MEMBER_RECHARGE_RECORDS } from "@/http/apiManager.js"
|
||||
import MemberRechargeRecordRender from '@/pages/list/render/MemberRechargeRecordRender.vue'
|
||||
|
||||
const jeepayTableListRef = ref()
|
||||
|
||||
onReachBottom(() => { })
|
||||
|
||||
const vdata = reactive({
|
||||
searchData: { state: '' },
|
||||
searchParamsList: [
|
||||
{ label: '全部充值状态', value: '' },
|
||||
{ label: '初始化', value: '0' },
|
||||
{ label: '充值中', value: '1' },
|
||||
{ label: '充值成功', value: '2' },
|
||||
{ label: '充值失败', value: '3' }
|
||||
]
|
||||
})
|
||||
|
||||
// // 监听 更新事件
|
||||
onUnload(() => uni.$off(emit.ENAME_REF_MEMBER_RECHARGE_RECORD_LIST))
|
||||
uni.$on(emit.ENAME_REF_MEMBER_RECHARGE_RECORD_LIST, function(data){
|
||||
jeepayTableListRef.value.refTable(true)
|
||||
})
|
||||
|
||||
function refTable (e) {
|
||||
jeepayTableListRef.value.refTable(true)
|
||||
}
|
||||
|
||||
// 请求
|
||||
function reqTableDataFunc (params) {
|
||||
return reqLoad.list(API_URL_MEMBER_RECHARGE_RECORDS, params)
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sta-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 30rpx;
|
||||
height: 110rpx;
|
||||
background-color: $J-bg-ff;
|
||||
.input-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 70rpx;
|
||||
background-color: $J-bg-f5;
|
||||
border-radius: $J-b-r12;
|
||||
color: rgba(0, 0, 0, 0.35);
|
||||
font-size: 27rpx;
|
||||
font-weight: 400;
|
||||
image {
|
||||
padding: 22rpx;
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
}
|
||||
}
|
||||
.icon-more {
|
||||
margin-left: 30rpx;
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
}
|
||||
.footer-wrapper {
|
||||
height: 170rpx;
|
||||
background-color: transparent;
|
||||
.footer-button {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 30rpx;
|
||||
button {
|
||||
height: 110rpx;
|
||||
font-size: 33rpx;
|
||||
font-weight: 500;
|
||||
color: $J-color-tff;
|
||||
border-radius: 20rpx;
|
||||
background: $jeepay-bg-primary;
|
||||
}
|
||||
.hover-button {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
139
pages/memberCenter/rechargeRule/edit.vue
Normal file
139
pages/memberCenter/rechargeRule/edit.vue
Normal file
@@ -0,0 +1,139 @@
|
||||
<template>
|
||||
<JeepayBackground>
|
||||
<view class="page-wrapper jeepay-edit-form">
|
||||
<JeepayCustomNavbar :title="vdata.ruleId ? '修改充值规则' : '创建充值规则' " backCtrl="back" />
|
||||
<uni-forms ref="formRef" :rules="rules" :model="vdata.formData" :label-width="140">
|
||||
|
||||
<uni-forms-item required label="充值金额" name="rechargeAmount">
|
||||
<uni-easyinput type="digit" v-model="vdata.formData.rechargeAmount" placeholder="请输入充值金额" :inputBorder="false"></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
|
||||
<uni-forms-item required label="赠送金额" name="giveAmount">
|
||||
<uni-easyinput type="digit" v-model="vdata.formData.giveAmount" placeholder="请输入赠送金额" :inputBorder="false"></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
|
||||
<uni-forms-item required label="排序" name="sort">
|
||||
<uni-easyinput type="number" v-model="vdata.formData.sort" placeholder="请输入排序" :inputBorder="false"></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
|
||||
<JeepayTableListItem v-if="vdata.ruleId" title="状态" subtitle="状态禁用后,规则将无法使用">
|
||||
<template #titleRight>
|
||||
<JeepayStateSwitch v-model:state="vdata.formData.state" :showSwitchType="true" :confirm='false' />
|
||||
</template>
|
||||
</JeepayTableListItem>
|
||||
|
||||
<uni-forms-item required label="备注" name="remark">
|
||||
<uni-easyinput v-model="vdata.formData.remark" placeholder="请输入备注" :inputBorder="false"></uni-easyinput>
|
||||
</uni-forms-item>
|
||||
|
||||
</uni-forms>
|
||||
|
||||
<view class="confirm-wrapper">
|
||||
<view class="confirm-button flex-center" hover-class="touch-button" @tap="confirmFunc"> {{ vdata.ruleId ? '确认修改' : '确认创建' }}</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</JeepayBackground>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { reactive, ref } from 'vue'
|
||||
import { onLoad } from '@dcloudio/uni-app'
|
||||
import { reqLoad, API_URL_MEMBER_RECHARGE_RULES } from '@/http/apiManager.js'
|
||||
import infoBox from '@/commons/utils/infoBox.js';
|
||||
import go from '@/commons/utils/go.js'
|
||||
import formUtil from '@/commons/utils/formUtil.js'
|
||||
import cal from '@/commons/utils/cal.js'
|
||||
import emit from '@/commons/utils/emit.js'
|
||||
|
||||
const formRef = ref()
|
||||
|
||||
onLoad((options) => {
|
||||
|
||||
// 修改页面
|
||||
if(options.ruleId){
|
||||
vdata.ruleId = options.ruleId
|
||||
reqLoad.getById(API_URL_MEMBER_RECHARGE_RULES, vdata.ruleId).then(({bizData}) => {
|
||||
vdata.formData = bizData
|
||||
vdata.formData.rechargeAmount = cal.cert2Dollar(vdata.formData.rechargeAmount)
|
||||
vdata.formData.giveAmount = cal.cert2Dollar(vdata.formData.giveAmount)
|
||||
})
|
||||
}
|
||||
|
||||
})
|
||||
|
||||
|
||||
const rules = {
|
||||
rechargeAmount: {
|
||||
rules:[ formUtil.rules.requiredInput('充值金额') ]
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const vdata = reactive({
|
||||
|
||||
ruleId: null, // 新建 or 修改
|
||||
|
||||
// 表单数据
|
||||
formData: {
|
||||
state: 1
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
function confirmFunc(){
|
||||
if(vdata.formData.rechargeAmount<=0) return infoBox.showToast('充值金额 不能小于0')
|
||||
const REG_AMOUNT = /^([0-9]{1}|^[1-9]{1}\d{1,15})(\.\d{1,2})?$/
|
||||
if (!REG_AMOUNT.test(vdata.formData.rechargeAmount)) {
|
||||
return infoBox.showToast('请输入正确的充值金额,最多两位小数')
|
||||
}
|
||||
if (vdata.formData.giveAmount && !REG_AMOUNT.test(vdata.formData.giveAmount)) {
|
||||
return infoBox.showToast('请输入正确的赠送金额,不能小于0 最多保留两位小数')
|
||||
}
|
||||
|
||||
formUtil.validate(formRef.value).then(() => {
|
||||
return reqLoad.addOrUpdate(vdata.ruleId, API_URL_MEMBER_RECHARGE_RULES, vdata.formData)
|
||||
})
|
||||
.then(( {bizData} ) => {
|
||||
go.back(1, emit.ENAME_REF_RECHARGE_RULE_LIST) // 返回页面 && 更新
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
input {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
.f-label {
|
||||
width: 240rpx;
|
||||
}
|
||||
.selected-sex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
margin-top: 45rpx;
|
||||
margin-bottom: 10rpx;
|
||||
font-size: 32rpx;
|
||||
color: #b3b3b3;
|
||||
image {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
margin-top: -40rpx;
|
||||
}
|
||||
.selected-box {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
.confirm-wrapper {
|
||||
padding: 50rpx 30rpx;
|
||||
.confirm-button {
|
||||
height: 110rpx;
|
||||
color: #fff;
|
||||
border-radius: 20rpx;
|
||||
background: $jeepay-bg-primary;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
108
pages/memberCenter/rechargeRule/index.vue
Normal file
108
pages/memberCenter/rechargeRule/index.vue
Normal file
@@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<view class="page-wrapper">
|
||||
<JeepayCustomNavbar title="充值规则" backCtrl="back" />
|
||||
|
||||
<JeepayTableList ref="jeepayTableListRef" :reqTableDataFunc="reqTableDataFunc">
|
||||
<template #tableBody="{ record }">
|
||||
<MemberRechargeRuleRender :record="record" />
|
||||
</template>
|
||||
</JeepayTableList>
|
||||
|
||||
<view class="footer-wrapper">
|
||||
<view class="footer-button footer-button-style">
|
||||
<button hover-class="hover-button" hover-stay-time="150" class="flex-center" @tap="create">创建充值规则</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<JeepayPopupConfirm ref="jeepayPopupConfirmRef" />
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
|
||||
<script setup>
|
||||
import { nextTick, reactive, ref } from "vue"
|
||||
import { onReachBottom, onShow, onUnload } from '@dcloudio/uni-app'
|
||||
import go from '@/commons/utils/go.js'
|
||||
import emit from '@/commons/utils/emit.js'
|
||||
import { reqLoad, API_URL_MEMBER_RECHARGE_RULES } from "@/http/apiManager.js"
|
||||
import MemberRechargeRuleRender from '@/pages/list/render/MemberRechargeRuleRender.vue'
|
||||
|
||||
const jeepayTableListRef = ref()
|
||||
const jeepayPopupConfirmRef = ref()
|
||||
|
||||
onReachBottom(() => { })
|
||||
|
||||
// // 监听 更新事件
|
||||
onUnload(() => uni.$off(emit.ENAME_REF_RECHARGE_RULE_LIST))
|
||||
uni.$on(emit.ENAME_REF_RECHARGE_RULE_LIST, function(data){
|
||||
jeepayTableListRef.value.refTable(true)
|
||||
})
|
||||
|
||||
// 请求
|
||||
function reqTableDataFunc (params) {
|
||||
return reqLoad.list(API_URL_MEMBER_RECHARGE_RULES, params)
|
||||
}
|
||||
|
||||
|
||||
// 创建充值规则
|
||||
const create = () => {
|
||||
go.to("PAGES_RECHARGE_RULE_EDIT")
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.sta-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 30rpx;
|
||||
height: 110rpx;
|
||||
background-color: $J-bg-ff;
|
||||
.input-main {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 70rpx;
|
||||
background-color: $J-bg-f5;
|
||||
border-radius: $J-b-r12;
|
||||
color: rgba(0, 0, 0, 0.35);
|
||||
font-size: 27rpx;
|
||||
font-weight: 400;
|
||||
image {
|
||||
padding: 22rpx;
|
||||
width: 26rpx;
|
||||
height: 26rpx;
|
||||
}
|
||||
}
|
||||
.icon-more {
|
||||
margin-left: 30rpx;
|
||||
width: 70rpx;
|
||||
height: 70rpx;
|
||||
}
|
||||
}
|
||||
.footer-wrapper {
|
||||
height: 170rpx;
|
||||
background-color: transparent;
|
||||
.footer-button {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
padding: 30rpx;
|
||||
button {
|
||||
height: 110rpx;
|
||||
font-size: 33rpx;
|
||||
font-weight: 500;
|
||||
color: $J-color-tff;
|
||||
border-radius: 20rpx;
|
||||
background: $jeepay-bg-primary;
|
||||
}
|
||||
.hover-button {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user