czg_team/cashier_admin_app
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first

Browse Source
This commit is contained in:
YeMingfei666
2024-09-10 10:49:08 +08:00
parent b5fd06b800
commit dd4f5938da
6391 changed files with 722800 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
pageRed/list/readme.txt Normal file
View File

@@ -0,0 +1,14 @@
pages/list/search.vue ： 通用搜索显示卡片
pages/list/render/ : 定义了列表数据渲染样式。
PayOrderRender.vue ： 支付订单
RefundOrderRender.vue ： 退款订单
...

187
pageRed/list/render/AppConfigRender.vue Normal file
View File

@@ -0,0 +1,187 @@
<!--
订单列表页面， 数据渲染
业务： 应用配置信息
@author terrfly
@site https://www.jeequan.com
@date 2022/12/02 16:57
-->
<template>
<JeepayTableListItem :title="props.record.wayName" :subtitle="props.record.wayCode" @tap="openConfig">
<template #titleRight>
<view v-if="props.record.isConfig" class="state-dot state-dot-enable">已配置</view>
<view v-else class="state-dot state-dot-disable">未配置</view>
</template>
</JeepayTableListItem>
<!-- 选择支付 接口 -->
<JeepayPopupListSelect
ref="selectIfcodeRef"
title='请选择支付渠道'
:reqTableDataFunc="reqTableDataByIfcodeFunc"
:fields="{ key: 'ifCode', left: 'ifName', right: 'ifCode' }"
@confirm="confirmFunc"
>
<!-- 小程序， 插槽不生效， 待排查！ TODO -->
<!-- 详见： https://ask.dcloud.net.cn/question/158765 -->
<!-- JeepayPopupListSelect.js 修改 "content-" + i0, 改为： content 即可。 -->
<!-- #ifdef APP-PLUS || H5 -->
<template #content="{record}">
<view class="pay-wrapper">
<view class="pay-info">
<view class="pay-logo flex-center" :style="{ backgroundColor: record.bgColor }">
<image :src="record.icon" mode="scaleToFill" />
</view>
<view>
<view class="pay-title">{{ record.ifName }}</view>
<view class="pay-rate">{{getRateStr(record.paywayFee)}}</view>
</view>
</view>
</view>
</template>
<!-- #endif -->
</JeepayPopupListSelect>
</template>
<script setup>
import { reactive, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { reqLoad, API_URL_PAY_PASSAGE_LIST, $getAvailablePayInterface, $wayCodeConfigIfCode } from '@/http/apiManager.js'
import go from '@/commons/utils/go.js'
import emit from '@/commons/utils/emit.js'
import infoBox from '@/commons/utils/infoBox.js'
import cal from '@/commons/utils/cal.js'
const selectIfcodeRef = ref()
// 定义传入属性
const props = defineProps({
record: {type:Object, default: () => {}}, // 渲染对象
configAppId: { type: String }, // 配置的appId
})
const vdata = reactive({
configedIfCode: '', // 已配置的ifCode
apiRes: { }, //接口返回数据缓存
})
// 请求
function reqTableDataByIfcodeFunc (params) {
return Promise.resolve(vdata.apiRes)
}
// 打开面板 ( 先查询过滤下。 )
function openConfig(wayCode){
vdata.configedIfCode = '';
$getAvailablePayInterface(props.configAppId, props.record.wayCode).then(res => {
vdata.apiRes = res
if(!res.bizData.records.length) return infoBox.showToast('暂无可配置的渠道')
res.bizData.records.forEach(r => {
if(r.configState == 1){
vdata.configedIfCode = r.ifCode
}
})
if(vdata.configedIfCode){
selectIfcodeRef.value.open({ifCode: vdata.configedIfCode})
}else{
selectIfcodeRef.value.open()
}
})
}
function confirmFunc(v){
if(!v){
return infoBox.showToast('请选择接口')
}
$wayCodeConfigIfCode(props.configAppId, props.record.wayCode, v.ifCode).then(() => {
infoBox.showSuccessToast("配置完成")
emit.refPageAndSearchEmit(emit.ENAME_REF_PAY_PASSAGE_LIST)
selectIfcodeRef.value.close();
})
}
function getRateStr(paywayFee){
if(paywayFee.feeType == 'SINGLE'){
return '单笔费率:' + cal.cert2Dollar(paywayFee.feeRate * 10000) + "%"
}else{
return '阶梯费率'
}
}
</script>
<style lang="scss" scoped>
.pay-wrapper {
display: flex;
align-items: center;
height: 170rpx;
.dot {
position: relative;
width: 36rpx;
height: 36rpx;
border-radius: 50%;
background-color: #d7d8d9;
&::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 50%;
height: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background-color: #fff;
}
}
.dot-active {
background-color: #2980fd;
}
.pay-info {
display: flex;
.pay-logo {
margin: 0 20rpx 0 0rpx;
width: 90rpx;
height: 90rpx;
border-radius: $v-b-r20;
background-color: #07112d;
image {
width: 50rpx;
height: 50rpx;
}
}
.pay-title {
font-size: 30rpx;
font-weight: 400;
}
.pay-rate {
margin-top: 16rpx;
font-size: 26rpx;
font-weight: 400;
color: $J-color-t99;
}
}
}
</style>

99
pageRed/list/render/DeviceCommonsRender.vue Normal file
View File

@@ -0,0 +1,99 @@
<!--
组件功能： 设备通用渲染页面
@author terrfly
@site https://www.jeequan.com
@date 2022/12/06 13:25
-->
<template>
<!-- 码牌 -->
<template v-if="props.type == 'qrc'">
<JeepayTableListItem :logo="codeImgListByQrc[record.qrcState]" :title="record.qrcAlias || '未命名'" :subtitle="record.qrcId" :state="record.qrcState" @tap="toDetailPage" />
</template>
<!-- 辅助终端 -->
<template v-if="props.type == 'storeTerminal'">
<JeepayTableListItem :logo="codeImgListByTerm[record.state]" :title="record.trmName" :subtitle="record.trmNo" :state="record.state" @tap="toDetailPage" />
</template>
<!-- 通用设备 -->
<template v-if="props.type == 'device'">
<JeepayTableListItem
:logo="vdata[`imgListByType${props.record.deviceType}`][props.record.state]"
:title="record.deviceName"
:subtitle="record.deviceId"
:state="record.state"
@tap="toDetailPage"
/>
</template>
<template v-if="props.type == 'face'">
<JeepayTableListItem :logo="faceImgListByFace[record.state]" :subtitle="record.deviceNo" :state="record.qrcState" @tap="toDetailPage">
<template #title>
{{ record.deviceName }}
<JeepayTag :type="record.provider == 'wxpayQWPro' ? 'green-rgba' : 'blue'">{{ record.provider == 'wxpayQWPro' ? '青蛙刷脸Pro' : '蜻蜓F4' }}</JeepayTag>
</template>
</JeepayTableListItem>
</template>
</template>
<script setup>
import { reactive, ref } from 'vue'
import go from '@/commons/utils/go.js'
const codeImgListByQrc = ['/pageDevice/static/detailsLislImg/code-none.svg', '/pageDevice/static/devIconImg/icon-code.svg']
const codeImgListByTerm = ['/pageDevice/static/detailsLislImg/trm-none.svg', '/pageDevice/static/devIconImg/icon-term.svg']
const faceImgListByFace = ['/pageDevice/static/devIconImg/icon-face-0.svg', '/pageDevice/static/devIconImg/icon-face-1.svg']
// 定义传入属性
const props = defineProps({
type: { type: String, default: 'device' }, // 类型
record: { type: Object, default: () => {} }, // 渲染对象
})
const vdata = reactive({
imgListByType1: ['/pageDevice/static/detailsLislImg/horn-none.svg', '/pageDevice/static/devIconImg/icon-horn.svg'],
imgListByType2: ['/pageDevice/static/detailsLislImg/print-none.svg', '/pageDevice/static/devIconImg/icon-print.svg'],
imgListByType3: ['/pageDevice/static/detailsLislImg/scanPos-none.svg', '/pageDevice/static/devIconImg/icon-scanPos.svg'],
imgListByType4: ['/pageDevice/static/detailsLislImg/pos-none.svg', '/pageDevice/static/devIconImg/icon-pos.svg'],
imgListByType5: ['/pageDevice/static/detailsLislImg/horn-none.svg', '/pageDevice/static/devIconImg/icon-horn.svg'],
imgListByType7: ['/pageDevice/static/detailsLislImg/lite-none.svg', '/pageDevice/static/detailsLislImg/icon-lite.svg'],
})
function toDetailPage() {
if (props.type == 'qrc') {
return go.to('PAGES_APP_CODE_DETAILS', { codeId: props.record.qrcId })
}
if (props.type == 'storeTerminal') {
return go.to('PAGES_APP_TERMINAL_DETAILS', { trmId: props.record.trmId })
}
// 通用设备 1-喇叭 2-打印机 3-扫码POS 4-智能POS
if (props.record.deviceType) {
const deviceId = props.record.deviceId
switch (props.record.deviceType) {
case 1:
go.to('PAGES_APP_HORN_DETAILS', { deviceId })
break
case 2:
go.to('PAGES_APP_PRINT_DETAILS', { deviceId })
break
case 3:
go.to('PAGES_APP_SCANPOS_DETAILS', { deviceId })
break
case 4:
go.to('PAGES_APP_POS_DETAILS', { deviceId })
break
case 6:
go.to('PAGES_APP_FACE_DETAILS', { deviceId })
break
case 7:
go.to('PAGES_LITE_DETAILS', { deviceId })
break
}
}
}
</script>
<style lang="scss" scoped></style>

26
pageRed/list/render/Example.vue Normal file
View File

@@ -0,0 +1,26 @@
<!--
订单列表页面， 数据渲染
业务： 示例模板
@author terrfly
@site https://www.jeequan.com
@date 2022/11/23 16:57
-->
<template>
<view>{{ props.record }}</view>
</template>
<script setup>
import { reactive, ref } from "vue"
// 定义传入属性
const props = defineProps({
record: {type:Object, default: () => {}}, // 渲染对象
})
</script>
<style lang="scss" scoped>
</style>

33
pageRed/list/render/FaceCardRender.vue Normal file
View File

@@ -0,0 +1,33 @@
<template>
<JeepayTableListItem :logo="imgUrl" :subtitle="advertId" logoStyle="border-radius:20rpx" @tap="toAdDetails">
<template #title>
{{ title }}
<JeepayTag type="green-rgba" v-if="releaseState">已发布</JeepayTag>
</template>
</JeepayTableListItem>
</template>
<script setup>
import {
unix
} from 'dayjs';
import go from '@/commons/utils/go.js'
const props = defineProps({
title: {
type: String
},
advertId: {
type: String
},
imgUrl: {
type: String
},
releaseState: {
type: [String, Number]
}
})
const toAdDetails = () => go.to('/pageDevice/adManager/view', { id: props.advertId })
</script>
<style lang="scss" scoped></style>

36
pageRed/list/render/MchAppRender.vue Normal file
View File

@@ -0,0 +1,36 @@
<!--
订单列表页面， 数据渲染
业务： 示例模板
@author terrfly
@site https://www.jeequan.com
@date 2022/11/23 16:57
-->
<template>
<JeepayTableListItem :subtitle="props.record.appId" @tap="toDetailPage" :state="props.record.state">
<template #title>
{{ props.record.appName }}
<JeepayTag v-if="props.record.defaultFlag == 1" type="green-rgba">默认</JeepayTag>
</template>
</JeepayTableListItem>
</template>
<script setup>
import { reactive, ref } from 'vue'
import go from '@/commons/utils/go.js'
import ak from '@/commons/utils/ak.js'
// 定义传入属性
const props = defineProps({
record: { type: Object, default: () => {} }, // 渲染对象
})
function toDetailPage() {
if(ak.ent.has('ENT_MCH_APP_VIEW')){
go.to('PAGES_APP_DETAIL', { appId: props.record.appId })
}
}
</script>
<style lang="scss" scoped></style>

343
pageRed/list/render/MchApplymentRender.vue Normal file
View File

@@ -0,0 +1,343 @@
<!--
订单列表页面， 数据渲染
业务： 进件
@author terrfly
@site https://www.jeequan.com
@date 2022/11/29 09:17
-->
<template>
<!-- 草稿 灰色 失败红色 审核中 黄色 -->
<!-- 列表卡片 -->
<view class="apply-card">
<view class="apply-title" @tap="toViewPage">
<view class="pay-img-wrapper flex-center" :style="{ backgroundColor: record.bgColor }">
<image :src="props.record.icon" mode="scaleToFill" />
</view>
<view class="apply-title-wrapper">
<view class="apply-title-info">
<text class="single-text-beyond" style="width: 340rpx">{{ props.record.mchFullName }}</text>
<view class="apply-state">
<text>{{ stateList[record.state]?.text }}</text>
<view class="apply-dot" :style="{ backgroundColor: stateList[record.state]?.bgColor }"></view>
</view>
</view>
<view class="apply-time">{{ props.record.createdAt }}</view>
</view>
</view>
<view class="apply-info-title" @tap="toViewPage">
<view class="title">进件渠道</view>
<view class="info">{{ props.record.ifName }}</view>
</view>
<view class="apply-info-title" @tap="toViewPage">
<view class="title">进件单号</view>
<view class="info">{{ props.record.applyId }}</view>
</view>
<view class="apply-button">
<view
v-if="
ent.has('ENT_MCH_APPLYMENT_SIGN') && (props.record.state == 1 || props.record.state == 2 || props.record.state == 4 || props.record.state == 5 || props.record.state == 6)
"
class="sign flex-center"
hover-class="touch-hover"
@tap="toSignPage"
>
签约开通
</view>
<view
v-if="ent.has('ENT_MCH_APPLYMENT_GET_INFO') && (props.record.state == 1 || props.record.state == 4 || props.record.state == 5)"
class="new-state flex-center"
hover-class="touch-button"
>
获取最新状态
</view>
<view v-if="ent.has('ENT_MCH_APPLYMENT_ADD')" class="new-state flex-center" hover-class="touch-button" @tap='toShowSelectIfCode()'>复用信息</view>
</view>
<!-- 选择支付 接口 -->
<JeepayPopupListSelect
ref="selectIfcodeRef"
title='请选择渠道'
:reqTableDataFunc="reqTableDataByIfcodeFunc"
:fields="{ key: 'ifCode', left: 'ifName', right: 'ifCode' }"
@confirm="confirmIfCode"
>
<!-- 小程序， 插槽不生效， 待排查！ TODO -->
<!-- 详见： https://ask.dcloud.net.cn/question/158765 -->
<!-- JeepayPopupListSelect.js 修改 "content-" + i0, 改为： content 即可。 -->
<!-- #ifdef APP-PLUS || H5 -->
<template #content="{record}">
<view class="pay-wrapper">
<view class="pay-info">
<view class="pay-logo flex-center" :style="{ backgroundColor: record.bgColor }">
<image :src="record.icon" mode="scaleToFill" />
</view>
<view>
<view class="pay-title">{{ record.ifName }}</view>
</view>
</view>
</view>
</template>
<!-- #endif -->
</JeepayPopupListSelect>
</view>
</template>
<script setup>
import { reactive, ref } from 'vue'
import cal from '@/commons/utils/cal.js'
import go from '@/commons/utils/go.js'
import datamap from '@/commons/utils/datamap.js'
import ent from '@/commons/utils/ent.js'
import ak from '@/commons/utils/ak.js'
import { $getAllAllowApplymentIfCodeList } from "@/http/apiManager.js"
const selectIfcodeRef = ref()
const vdata = reactive({
addIfCodeList: [], // 可以选择的接口集合
})
function toH5ApplyOptionPage(applyId, configPage) {
uni.navigateTo({ url: `/pageApply/applyDetailH5ApplyOption?applyId=${applyId}&configPage=${configPage}` })
}
// 去进件详情 / 修改页
function toViewPage() {
let isView = 1
if ([0, 3, 8].indexOf(props.record.state) >= 0) {
isView = 0
}
go.to('PAGES_APPLYMENT_H5_DETAIL', { autoConfigMchAppId: props.record.autoConfigMchAppId, isvNo: props.record.isvNo, applyId: props.record.applyId, isView: isView })
}
// 签约开通
function toSignPage() {
go.to('PAGES_APPLYMENT_H5_OPTION', { applyId: props.record.applyId, configPage: 'NEXT_BIZS' })
}
// 定义传入属性
const props = defineProps({
record: { type: Object, default: () => {} }, // 渲染对象
})
const stateList = reactive([
{
text: '草稿', //0
bgColor: '#D9D9D9',
},
{
text: '审核中', //1
bgColor: '#FFCC66',
},
{
text: '已开通', //2
bgColor: '#18BC73',
},
{
text: '申请被驳回', //3
bgColor: '#FF4D5B',
},
{
text: '待验证', //4
bgColor: '#FFCC66',
},
{
text: '待签约', //5
bgColor: '#2980FD',
},
{
text: '', //6 占位
bgColor: '',
},
{
text: '等待预审', //7
bgColor: '#FFCC66',
},
{
text: '预审拒绝', //8
bgColor: '#FF4D5B',
},
])
// 打开选择渠道页面
function toShowSelectIfCode(){
ak.go.to('PAGES_APPLYMENT_SELECETDPAY',{applyId: props.record.applyId,ifCode: props.record.ifCode,range: props.record.range})
return
$getAllAllowApplymentIfCodeList().then(({bizData}) => {
vdata.addIfCodeList = bizData
selectIfcodeRef.value.open()
})
}
// 请求可以选择的支付渠道
function reqTableDataByIfcodeFunc(){
// 模拟请求数据
return Promise.resolve({ bizData: { records: vdata.addIfCodeList, hasNext: false }})
}
function confirmIfCode(selected){
if(!selected){
ak.infoBox.showToast('请选择进件渠道')
return false;
}
selectIfcodeRef.value.close()
ak.go.to('PAGES_APPLYMENT_H5_DETAIL', {isView: 0, ifCode: selected.ifCode, copyInfoSourceApplyId: props.record.applyId })
}
function toCopyPage(){
}
</script>
<style lang="scss" scoped>
// 列表卡片样式
.apply-card {
padding: 0.1rpx 30rpx;
padding-bottom: 10rpx;
margin: 20rpx;
background-color: #fff;
border-radius: $J-b-r32;
.apply-title {
display: flex;
margin-top: 30rpx;
margin-bottom: 40rpx;
font-size: 30rpx;
.pay-img-wrapper {
margin-right: 20rpx;
width: 90rpx;
height: 90rpx;
border-radius: 20rpx;
image {
width: 65%;
height: 65%;
}
}
.apply-title-wrapper {
flex: 1;
.apply-title-info {
display: flex;
justify-content: space-between;
height: 40rpx;
.apply-state {
display: flex;
align-items: center;
font-size: 26rpx;
color: #999;
white-space: nowrap;
text {
transform: translateX(-10rpx);
}
.apply-dot {
width: 20rpx;
height: 20rpx;
border-radius: 50%;
background-color: #2980fd;
}
}
}
.apply-time {
color: #999;
margin-top: 10rpx;
font-size: 26rpx;
}
}
}
.apply-info-title {
margin: 20rpx 0;
display: flex;
font-size: 26rpx;
.title {
color: #808080;
}
.info {
text-indent: 56rpx;
}
}
.apply-button {
display: flex;
justify-content: flex-end;
margin-bottom: 20rpx;
view {
font-size: 26rpx;
font-weight: 500;
height: 62rpx;
border-radius: 12rpx;
}
.sign {
width: 164rpx;
border: 1rpx solid #d3d3d4;
}
.new-state {
margin-left: 20rpx;
width: 216rpx;
color: #fff;
background: $jeepay-bg-primary;
}
}
}
.pay-wrapper {
display: flex;
align-items: center;
height: 170rpx;
.dot {
position: relative;
width: 36rpx;
height: 36rpx;
border-radius: 50%;
background-color: #d7d8d9;
&::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 50%;
height: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background-color: #fff;
}
}
.dot-active {
background-color: #2980fd;
}
.pay-info {
display: flex;
.pay-logo {
margin: 0 20rpx 0 0rpx;
width: 90rpx;
height: 90rpx;
border-radius: $v-b-r20;
background-color: #07112d;
image {
width: 50rpx;
height: 50rpx;
}
}
.pay-title {
font-size: 30rpx;
font-weight: 400;
}
}
}
</style>

38
pageRed/list/render/MchStoreRender.vue Normal file
View File

@@ -0,0 +1,38 @@
<!--
订单列表页面， 数据渲染
业务： 门店
@author terrfly
@site https://www.jeequan.com
@date 2022/11/23 16:57
-->
<template>
<JeepayTableListItem :subtitle="props.record.storeId" @tap="toDetailPage" :logo="props.record.storeLogo||'/static/indexImg/icon-store.svg'">
<template #title>
{{ props.record.storeName }}
<JeepayTag v-if="props.record.defaultFlag == 1" type="green-rgba">默认</JeepayTag>
<JeepayTag v-if="props.record.alipayShopStatus == 99" type="blue">蚂蚁店铺</JeepayTag>
</template>
</JeepayTableListItem>
</template>
<script setup>
import { reactive, ref } from "vue"
import go from '@/commons/utils/go.js'
// 定义传入属性
const props = defineProps({
record: {type:Object, default: () => {}}, // 渲染对象
})
function toDetailPage(){
go.to("PAGES_APP_STORE_DETAIL", {storeId: props.record.storeId})
}
</script>
<style lang="scss" scoped>
</style>

141
pageRed/list/render/MemberAccountHistoryRender.vue Normal file
View File

@@ -0,0 +1,141 @@
<!--
会员账户流水列表页面， 数据渲染
业务： 会员账户流水
@author terrfly
@site https://www.jeequan.com
@date 2022/11/30 07:07
-->
<template>
<view class="card">
<view class="card-content" @tap="toDetails">
<view class="card-content-title">
<view class="card-content-title-left">
<image :src="props.record.avatarUrl" />
<text>{{ props.record.mbrName }}</text>
</view>
<view class="card-content-title-right">
<text>{{ props.record.changeAmount < 0? '-' : '+'}}{{cal.cert2Dollar(Math.abs(props.record.changeAmount))}}</text>
</view>
</view>
<view class="card-content-line"></view>
<view class="card-content-body">
<view class="card-content-body-row">
<text>变动时间</text>
<text>{{ props.record.createdAt }}</text>
</view>
<view class="card-content-body-row">
<text>业务类型</text>
<text>{{ props.record.bizType==1?'支付充值':props.record.bizType==2?'现金充值':props.record.bizType==3?'会员消费':props.record.bizType==4?'消费退款':props.record.bizType==5?'人工调账':'其他' }}</text>
</view>
<view class="card-content-body-row">
<text>变动后余额</text>
<text>￥{{ cal.cert2Dollar(props.record.afterAmount) }}</text>
</view>
</view>
</view>
</view>
</template>
<script setup>
import { reactive, ref } from 'vue'
import cal from '@/commons/utils/cal.js'
import go from '@/commons/utils/go.js'
// 定义传入属性
const props = defineProps({
record: { type: Object, default: () => {} }, // 渲染对象
})
//前往会员详情
const toDetails = () => {
go.to('PAGES_MEMBER_ACCOUNT_HISTORY_DETAIL', { hid: props.record.hid })
}
</script>
<style lang="scss" scoped>
.card {
width: 690rpx;
margin: 30rpx auto;
}
.card-content {
border-radius: 20rpx;
background-color: $J-bg-ff;
margin: 10rpx 0;
}
.card-content-title {
height: 100rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 30rpx;
.card-content-title-left {
height: 100rpx;
display: flex;
color: #000000ff;
font-size: 30rpx;
flex-direction: row;
align-items: center;
image {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
}
text {
padding-left: 10rpx;
}
}
.card-content-title-right {
font-weight: 600;
color: #000000ff;
text {
font-size: 30rpx;
}
}
}
.card-content-line {
border-bottom: 2rpx solid rgba(0, 0, 0, 0.06);
}
.card-content-body {
padding: 20rpx;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-evenly;
box-sizing: border-box;
.card-content-body-row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
padding-left: 50rpx;
height: 60rpx;
text:first-child {
width: 170rpx;
color: #999999ff;
font-size: 26rpx;
font-weight: 400;
}
text:last-child {
color: #000000ff;
font-size: 26rpx;
font-weight: 400;
}
}
}
</style>

165
pageRed/list/render/MemberRechargeRecordRender.vue Normal file
View File

@@ -0,0 +1,165 @@
<!--
会员充值记录列表页面， 数据渲染
业务： 会员充值记录
@author terrfly
@site https://www.jeequan.com
@date 2022/11/30 07:07
-->
<template>
<view class="card">
<view class="card-content" @tap="toDetails">
<view class="card-content-title">
<view class="card-content-title-left">
<image :src="props.record.avatarUrl" />
<text>{{ props.record.mbrName }}</text>
</view>
<view class="card-content-title-right">
<text>￥</text>
<text>{{ cal.cert2Dollar(props.record.entryAmount) }}</text>
</view>
</view>
<view class="card-content-line"></view>
<view class="card-content-body">
<view class="card-content-body-row">
<text>充值时间</text>
<text>{{ props.record.createdAt }}</text>
</view>
<view class="card-content-body-row">
<text>充值状态</text>
<view class="order">
<view class="order-spot" :style="{ backgroundColor: datamap.rechargeRecordImage(props.record.state).color }"></view>
<text class="order-text">{{ datamap.rechargeRecordImage(props.record.state).text }}</text>
</view>
</view>
<view v-if="props.record.state==2" class="card-content-body-row">
<text>充值后余额</text>
<text>￥{{ cal.cert2Dollar(props.record.afterBalance) }}</text>
</view>
</view>
</view>
</view>
</template>
<script setup>
import { reactive, ref } from 'vue'
import cal from '@/commons/utils/cal.js'
import go from '@/commons/utils/go.js'
import datamap from '@/commons/utils/datamap.js'
// 定义传入属性
const props = defineProps({
record: { type: Object, default: () => {} }, // 渲染对象
})
//前往会员详情
const toDetails = () => {
go.to('PAGES_MEMBER_RECHARGE_RECORD_DETAIL', { rechargeRecordId: props.record.rechargeRecordId })
}
</script>
<style lang="scss" scoped>
.card {
width: 690rpx;
margin: 30rpx auto;
}
.card-content {
border-radius: 20rpx;
background-color: $J-bg-ff;
margin: 10rpx 0;
}
.card-content-title {
height: 100rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 30rpx;
.card-content-title-left {
height: 100rpx;
display: flex;
color: #000000ff;
font-size: 30rpx;
flex-direction: row;
align-items: center;
image {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
}
text {
padding-left: 10rpx;
}
}
.card-content-title-right {
font-weight: 600;
color: #000000ff;
text:first-child {
font-size: 20rpx;
}
text:last-child {
font-size: 30rpx;
}
}
}
.card-content-line {
border-bottom: 2rpx solid rgba(0, 0, 0, 0.06);
}
.card-content-body {
padding: 20rpx;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-evenly;
box-sizing: border-box;
.card-content-body-row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
opacity: 1;
padding-left: 50rpx;
height: 60rpx;
text:first-child {
width: 160rpx;
color: #999999ff;
font-size: 26rpx;
font-weight: 400;
}
text:last-child {
color: #000000ff;
font-size: 26rpx;
font-weight: 400;
}
.order {
display: flex;
flex-direction: row;
align-items: center;
.order-spot {
width: 10rpx;
height: 10rpx;
border-radius: 50%;
}
.order-text {
padding-left: 10rpx;
color: #000000ff;
font-size: 26rpx;
font-weight: 400;
}
}
}
}
</style>

148
pageRed/list/render/MemberRechargeRuleRender.vue Normal file
View File

@@ -0,0 +1,148 @@
<!--
充值规则列表页面， 数据渲染
业务： 充值规则
@author terrfly
@site https://www.jeequan.com
@date 2022/11/30 07:07
-->
<template>
<view class="card">
<view class="card-content">
<view class="card-content-left">
<view class="rule">
<view class="rule-amount">
<text>充：</text>
<text class="rule-amount-recharge">￥{{ cal.cert2Dollar(props.record.rechargeAmount) }}</text>
</view>
<view class="rule-amount">
<text>赠：</text>
<text class="rule-amount-give">￥{{ cal.cert2Dollar(props.record.giveAmount) }}</text>
</view>
</view>
<view class="rule-state">
<view class="order-spot" :style="{ backgroundColor: props.record.state ? '#09BB07' : '#CB2972' }"></view>
<text>{{ props.record.state ? '启用' : '禁用' }}</text>
</view>
</view>
<view class="card-content-right">
<image src="/static/member/edit.svg" @tap="editFunc(props.record.ruleId)"></image>
<view class="right-line"></view>
<image src="/static/member/delete.svg" @tap="deleteFunc(props.record.ruleId)"></image>
</view>
</view>
<JeepayPopupConfirm ref="jeepayPopupConfirmRef" />
</view>
</template>
<script setup>
import { reactive, ref } from 'vue'
import cal from '@/commons/utils/cal.js'
import go from '@/commons/utils/go.js'
import emit from '@/commons/utils/emit.js'
import infoBox from '@/commons/utils/infoBox.js'
import { reqLoad, API_URL_MEMBER_RECHARGE_RULES } from "@/http/apiManager.js"
const jeepayPopupConfirmRef = ref()
// 定义传入属性
const props = defineProps({
record: { type: Object, default: () => {} }, // 渲染对象
})
const editFunc = (ruleId) => {
go.to("PAGES_RECHARGE_RULE_EDIT", { ruleId: ruleId })
}
const deleteFunc = (ruleId) => {
jeepayPopupConfirmRef.value.open('确定删除规则？', { confirmColor: 'red' }).then(() => {
return reqLoad.delById(API_URL_MEMBER_RECHARGE_RULES, ruleId).then(() => {
infoBox.showSuccessToast("删除成功");
emit.pageEmit(emit.ENAME_REF_RECHARGE_RULE_LIST) // 更新列表
})
}).catch(() => {
})
}
</script>
<style lang="scss" scoped>
.card {
width: 711rpx;
margin: 0 auto;
}
.card-content {
height: 180rpx;
display: flex;
flex-direction: row;
border-radius: 20rpx;
background-color: $J-bg-ff;
margin: 20rpx 0;
}
.card-content-left {
width: 590rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 40rpx;
.rule {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
.rule-amount {
color: #808080ff;
font-size: 30rpx;
padding: 8rpx 0;
}
.rule-amount-recharge {
color: #000000ff;
font-size: 30rpx;
}
.rule-amount-give {
color: #3d8affff;
font-size: 30rpx;
}
}
.rule-state {
color: #000000ff;
font-size: 26rpx;
display: flex;
flex-direction: row;
align-items: center;
.order-spot {
width: 10rpx;
height: 10rpx;
border-radius: 50%;
}
text {
margin-left: 8rpx;
}
}
}
.card-content-right {
width: 120rpx;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
border-left: 2rpx solid rgba(0, 0, 0, 0.06);
image {
width: 40rpx;
height: 40rpx;
}
.right-line {
width: 100%;
border-bottom: 2rpx solid rgba(0, 0, 0, 0.06);
}
}
</style>

118
pageRed/list/render/MemberRender.vue Normal file
View File

@@ -0,0 +1,118 @@
<!--
会员列表页面， 数据渲染
业务： 会员管理
@author terrfly
@site https://www.jeequan.com
@date 2022/11/30 07:07
-->
<template>
<view class="card-wrapper">
<view class="card-main" hover-class="touch-hover" :style="{ right: right + 'rpx' }">
<view class="card-item" @tap="toDetails">
<view class="img-wrapper">
<image :src="props.record.avatarUrl" mode="scaleToFill" />
</view>
<view class="card-info">
<view class="info-text">
<view class="text-main single-text-beyond">{{ props.record.mbrName }}</view>
</view>
<view class="info-phone">
{{props.record.mbrTel}}
<text class="info-balance">余额：￥{{ cal.cert2Dollar(props.record.balance) }}</text>
</view>
</view>
</view>
</view>
</view>
</template>
<script setup>
import { reactive, ref } from 'vue'
import go from '@/commons/utils/go.js'
import cal from '@/commons/utils/cal.js'
// 定义传入属性
const props = defineProps({
record: { type: Object, default: () => {} }, // 渲染对象
})
//前往会员详情
const toDetails = () => {
go.to('PAGES_MEMBER_DETAIL', { mbrId: props.record.mbrId })
}
</script>
<style lang="scss" scoped>
.card-wrapper {
overflow: hidden;
.card-main {
position: relative;
padding: 0 30rpx;
height: 170rpx;
background-color: $J-bg-ff;
transition: 0.2s ease-in;
.card-item {
display: flex;
align-items: center;
width: 100%;
height: 100%;
.img-wrapper {
position: relative;
flex-shrink: 0;
width: 100rpx;
height: 100rpx;
background-color: skyblue;
border-radius: 50%;
image {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.card-info {
margin-left: 30rpx;
.info-text {
display: flex;
.text-main {
max-width: 446rpx;
font-size: 30rpx;
font-weight: 400;
color: #000000ff;
opacity: 1;
}
.info-state {
display: flex;
align-items: center;
margin-left: 30rpx;
padding: 0 15rpx;
height: 40rpx;
font-size: 23rpx;
font-weight: 400;
color: #fff;
white-space: nowrap;
background: linear-gradient(270deg, rgba(61, 220, 68, 1) 0%, rgba(23, 187, 118, 1) 100%);
border-radius: 6rpx;
}
}
.info-phone {
margin-top: 16rpx;
font-size: 25rpx;
font-weight: 400;
color: $J-color-t99;
.info-balance {
padding-left: 30rpx;
color: #000000ff;
font-size: 26rpx;
}
}
}
}
}
}
</style>

142
pageRed/list/render/PayOrderRender.vue Normal file
View File

@@ -0,0 +1,142 @@
<!--
订单列表页面， 数据渲染
业务： 支付订单列表页
@author terrfly
@site https://www.jeequan.com
@date 2022/11/23 16:57
-->
<template>
<!-- 列表卡片循环渲染start -->
<view class="order-card" hover-class="touch-hover" hover-stay-time="150" @tap="toDetail()">
<view class="img-wrapper flex-center" :style="{ backgroundColor: datamap.payOrderImage(record?.wayCodeType)?.bgColor }">
<image :src="datamap.payOrderImage(record?.wayCodeType)?.imgUrl" mode="scaleToFill"></image>
</view>
<view class="order-info">
<view class="order-num">
<view> <text class="icon-money">￥</text> {{ cal.cert2Dollar(props.record.amount) }} </view>
<view class="order-state">
{{ datamap.payOrderState(props.record.state).text }}
<text class="order-spot" :style="{ backgroundColor: datamap.payOrderState(props.record.state).color }"></text>
</view>
</view>
<view class="order-time">{{ props.record.createdAt }}</view>
</view>
</view>
</template>
<script setup>
import { reactive, ref } from 'vue'
import cal from '@/commons/utils/cal.js'
import go from '@/commons/utils/go.js'
import datamap from '@/commons/utils/datamap.js'
// 跳转详情页
function toDetail() {
go.to('PAGES_PAY_ORDER_DETAIL', { payOrderId: props.record.payOrderId })
}
// 定义传入属性
const props = defineProps({
record: { type: Object, default: () => {} }, // 渲染对象
})
</script>
<style lang="scss" scoped>
.store-name {
display: flex;
align-items: center;
font-size: 33rpx;
font-weight: 500;
image {
width: 44rpx;
height: 44rpx;
margin-left: 5rpx;
transform: rotate(180deg);
}
}
.input-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 30rpx;
padding-top: 22rpx;
height: 110rpx;
background-color: $J-bg-ff;
.input-main {
flex: 1;
display: flex;
align-items: center;
height: 70rpx;
background: $J-bg-f5;
border-radius: $J-b-r12;
image {
padding: 22rpx;
width: 26rpx;
height: 26rpx;
}
input {
flex: 1;
font-size: 27rpx;
}
}
.screen-wrapper {
margin: 0 12rpx 0 20rpx;
font-size: 32rpx;
color: $J-color-t99;
image {
width: 28rpx;
height: 26rpx;
padding: 0 21rpx;
}
}
}
.order-card {
display: flex;
align-items: center;
padding: 0 30rpx;
height: 170rpx;
background-color: $J-bg-ff;
.img-wrapper {
margin-right: 30rpx;
width: 100rpx;
height: 100rpx;
border-radius: 50%;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
.order-info {
flex: 1;
.order-num {
display: flex;
justify-content: space-between;
font-size: 30rpx;
font-weight: 500;
.icon-money {
font-size: 23rpx;
}
.order-state {
display: flex;
align-items: center;
color: $J-color-t80;
.order-spot {
display: block;
margin: 0 10rpx 0 20rpx;
width: 20rpx;
height: 20rpx;
border-radius: 50%;
}
}
}
.order-time {
margin-top: 16rpx;
font-size: 26rpx;
color: $J-color-t99;
}
}
}
</style>

190
pageRed/list/render/RedAccountHistoryRender.vue Normal file
View File

@@ -0,0 +1,190 @@
<!--
会员充值记录列表页面， 数据渲染
业务： 会员充值记录
@author terrfly
@site https://www.jeequan.com
@date 2022/11/30 07:07
-->
<template>
<view class="card">
<view class="card-content" >
<view class="card-content-title">
<view class="card-content-title-left">
<!-- <image :src="props.record.avatarUrl" /> -->
<text>{{ props.record.storeName }}[{{ props.record.storeId }}]</text>
</view>
<!-- <view class="card-content-title-right">
<text v-if="props.record.type == 1">下单奖励 </text>
<text v-if="props.record.type == 2">消费退款 </text>
<text>{{ cal.cert2Dollar(props.record.entryAmount) }}</text>
</view> -->
</view>
<view class="card-content-line"></view>
<view class="card-content-body">
<view class="card-content-body-row">
<text class="card-content-body-row-text">流水号</text>
<text>{{ props.record.flowNo }}</text>
</view>
<view class="card-content-body-row">
<text class="card-content-body-row-text">顾客uid</text>
<text class="card-content-body-row-text">{{ props.record.payUserId }}</text>
</view>
<view class="card-content-body-row">
<text class="card-content-body-row-text">顾客来源</text>
<text v-if="props.record.type == 'WECHAT'">微信 </text>
<text v-if="props.record.type == 'ALIPAY'">支付宝 </text>
</view>
<view class="card-content-body-row">
<text class="card-content-body-row-text">交易金额</text>
<text>{{cal.cert2Dollar(props.record.transAmt) }}</text>
</view>
<view class="card-content-body-row">
<text class="card-content-body-row-text">红包优惠</text>
<text>{{ props.record.discountScale }}折</text>
</view>
<view class="card-content-body-row">
<text class="card-content-body-row-text">实付金额</text>
<text>{{ cal.cert2Dollar(props.record.findAmt) }}</text>
</view>
<view class="card-content-body-row">
<text class="card-content-body-row-text">奖励红包</text>
<text>{{ cal.cert2Dollar(props.record.rewardAmt) }}</text>
</view>
<view class="card-content-body-row">
<text class="card-content-body-row-text">交易时间</text>
<text>{{ props.record.transTime }}</text>
</view>
<view class="card-content-body-row">
<text class="card-content-body-row-text">红包有效期</text>
<text>{{ props.record.expireTime }}</text>
</view>
<view class="card-content-body-row">
<text class="card-content-body-row-text">创建日期</text>
<text>{{ props.record.createdAt }}</text>
</view>
</view>
</view>
</view>
</template>
<script setup>
import { reactive, ref } from 'vue'
import cal from '@/commons/utils/cal.js'
import go from '@/commons/utils/go.js'
import datamap from '@/commons/utils/datamap.js'
// 定义传入属性
const props = defineProps({
record: { type: Object, default: () => {} }, // 渲染对象
})
</script>
<style lang="scss" scoped>
.card {
width: 690rpx;
margin: 30rpx auto;
}
.card-content {
border-radius: 20rpx;
background-color: $J-bg-ff;
margin: 10rpx 0;
}
.card-content-title {
height: 100rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 30rpx;
.card-content-title-left {
height: 100rpx;
display: flex;
color: #000000ff;
font-size: 30rpx;
flex-direction: row;
align-items: center;
image {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
}
text {
padding-left: 10rpx;
}
}
.card-content-title-right {
font-weight: 600;
color: #000000ff;
text:first-child {
font-size: 20rpx;
}
text:last-child {
font-size: 30rpx;
}
}
}
.card-content-line {
border-bottom: 2rpx solid rgba(0, 0, 0, 0.06);
}
.card-content-body {
padding: 20rpx;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-evenly;
box-sizing: border-box;
.card-content-body-row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
opacity: 1;
// padding-left: 50rpx;
height: 60rpx;
text:first-child {
width: 150rpx;
color: #999999ff;
font-size: 26rpx;
font-weight: 400;
text-align: right;
padding-right: 20rpx;
}
text:last-child {
color: #000000ff;
font-size: 26rpx;
font-weight: 400;
}
.order {
display: flex;
flex-direction: row;
align-items: center;
.order-spot {
width: 10rpx;
height: 10rpx;
border-radius: 50%;
}
.order-text {
padding-left: 10rpx;
color: #000000ff;
font-size: 26rpx;
font-weight: 400;
}
}
}
}
</style>

178
pageRed/list/render/RedRechargeRecordRender.vue Normal file
View File

@@ -0,0 +1,178 @@
<!--
会员充值记录列表页面， 数据渲染
业务： 会员充值记录
@author terrfly
@site https://www.jeequan.com
@date 2022/11/30 07:07
-->
<template>
<view class="card">
<view class="card-content" >
<view class="card-content-title">
<view class="card-content-title-left">
<!-- <image :src="props.record.avatarUrl" /> -->
<text>{{ props.record.storeName }}[{{ props.record.storeId }}]</text>
</view>
<!-- <view class="card-content-title-right">
<text v-if="props.record.type == 1">下单奖励 </text>
<text v-if="props.record.type == 2">消费退款 </text>
<text>{{ cal.cert2Dollar(props.record.entryAmount) }}</text>
</view> -->
</view>
<view class="card-content-line"></view>
<view class="card-content-body">
<view class="card-content-body-row">
<text class="card-content-body-row-text">流水号</text>
<text>{{ props.record.flowNo }}</text>
</view>
<view class="card-content-body-row">
<text class="card-content-body-row-text">顾客uid</text>
<text class="card-content-body-row-text">{{ props.record.payUserId }}</text>
</view>
<view class="card-content-body-row">
<text class="card-content-body-row-text">变动类型</text>
<text v-if="props.record.type == 1">下单奖励</text>
<text v-if="props.record.type == 2">消费退款</text>
</view>
<view class="card-content-body-row">
<text class="card-content-body-row-text">变动前余额</text>
<text>{{cal.cert2Dollar(props.record.beforeAmt) }}</text>
</view>
<view class="card-content-body-row">
<text class="card-content-body-row-text">变动金额</text>
<text>{{ cal.cert2Dollar(props.record.changeAmt) }}</text>
</view>
<view class="card-content-body-row">
<text class="card-content-body-row-text">变动后余额</text>
<text>{{ cal.cert2Dollar(props.record.afterAmt) }}</text>
</view>
<view class="card-content-body-row">
<text class="card-content-body-row-text">更新日期</text>
<text>{{ props.record.updatedAt }}</text>
</view>
</view>
</view>
</view>
</template>
<script setup>
import { reactive, ref } from 'vue'
import cal from '@/commons/utils/cal.js'
import go from '@/commons/utils/go.js'
import datamap from '@/commons/utils/datamap.js'
// 定义传入属性
const props = defineProps({
record: { type: Object, default: () => {} }, // 渲染对象
})
</script>
<style lang="scss" scoped>
.card {
width: 690rpx;
margin: 30rpx auto;
}
.card-content {
border-radius: 20rpx;
background-color: $J-bg-ff;
margin: 10rpx 0;
}
.card-content-title {
height: 100rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 30rpx;
.card-content-title-left {
height: 100rpx;
display: flex;
color: #000000ff;
font-size: 30rpx;
flex-direction: row;
align-items: center;
image {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
}
text {
padding-left: 10rpx;
}
}
.card-content-title-right {
font-weight: 600;
color: #000000ff;
text:first-child {
font-size: 20rpx;
}
text:last-child {
font-size: 30rpx;
}
}
}
.card-content-line {
border-bottom: 2rpx solid rgba(0, 0, 0, 0.06);
}
.card-content-body {
padding: 20rpx;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-evenly;
box-sizing: border-box;
.card-content-body-row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
opacity: 1;
// padding-left: 50rpx;
height: 60rpx;
text:first-child {
width: 150rpx;
color: #999999ff;
font-size: 26rpx;
font-weight: 400;
text-align: right;
padding-right: 20rpx;
}
text:last-child {
color: #000000ff;
font-size: 26rpx;
font-weight: 400;
}
.order {
display: flex;
flex-direction: row;
align-items: center;
.order-spot {
width: 10rpx;
height: 10rpx;
border-radius: 50%;
}
.order-text {
padding-left: 10rpx;
color: #000000ff;
font-size: 26rpx;
font-weight: 400;
}
}
}
}
</style>

169
pageRed/list/render/RedRechargeRuleRender.vue Normal file
View File

@@ -0,0 +1,169 @@
<!--
充值规则列表页面， 数据渲染
业务： 充值规则
@author terrfly
@site https://www.jeequan.com
@date 2022/11/30 07:07
-->
<template>
<view class="card">
<view class="card-content">
<view class="card-content-left">
<view class="rule">
<view class="rule-amount">
<text>{{props.record.storeName}}</text>
<text class="rule-amount-recharge" v-if="props.record.packetType == 1">门店专享</text>
<text class="rule-amount-recharge" v-if="props.record.packetType == 2">平台通用</text>
</view>
<view class="rule-amount">
<text>折扣比例</text>
<text class="rule-amount-give">{{props.record.marketScale}}折</text>
</view>
<view class="rule-amount">
<text>补贴比例</text>
<text class="rule-amount-give">{{props.record.platScale}}折</text>
</view>
<view class="rule-amount">
<text>红包比例</text>
<text class="rule-amount-give">{{props.record.userPerkScale*100}}%</text>
</view>
<view class="rule-amount">
<text>红包有效期</text>
<text class="rule-amount-give">{{props.record.expireNumber}}个月</text>
</view>
</view>
<!-- <view class="rule-state">
<view class="order-spot" :style="{ backgroundColor: props.record.state ? '#09BB07' : '#CB2972' }"></view>
<text>{{ props.record.state ? '启用' : '禁用' }}</text>
</view> -->
</view>
<view class="card-content-right" @tap="editFunc(props.record.id)">
<image src="/static/member/edit.svg" ></image>
<!-- <view class="right-line"></view>
<image src="/static/member/delete.svg" @tap="deleteFunc(props.record.ruleId)"></image> -->
</view>
</view>
<JeepayPopupConfirm ref="jeepayPopupConfirmRef" />
</view>
</template>
<script setup>
import { reactive, ref } from 'vue'
import cal from '@/commons/utils/cal.js'
import go from '@/commons/utils/go.js'
import emit from '@/commons/utils/emit.js'
import infoBox from '@/commons/utils/infoBox.js'
import { reqLoad, API_URL_MEMBER_RECHARGE_RULES } from "@/http/apiManager.js"
const jeepayPopupConfirmRef = ref()
// 定义传入属性
const props = defineProps({
record: { type: Object, default: () => {} }, // 渲染对象
})
console.log(props,'propspropsprops')
const editFunc = (id) => {
go.to("PAGES_RED_RULE_EDIT", { ruleId: id })
}
const deleteFunc = (ruleId) => {
jeepayPopupConfirmRef.value.open('确定删除规则？', { confirmColor: 'red' }).then(() => {
return reqLoad.delById(API_URL_MEMBER_RECHARGE_RULES, ruleId).then(() => {
infoBox.showSuccessToast("删除成功");
emit.pageEmit(emit.ENAME_REF_RECHARGE_RULE_LIST) // 更新列表
})
}).catch(() => {
})
}
</script>
<style lang="scss" scoped>
.card {
width: 711rpx;
margin: 0 auto;
}
.card-content {
// height: 180rpx;
display: flex;
flex-direction: row;
border-radius: 20rpx;
background-color: $J-bg-ff;
margin: 20rpx 0;
padding: 20rpx 0;
}
.card-content-left {
width: 590rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 40rpx;
.rule {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
.rule-amount {
color: #808080ff;
font-size: 30rpx;
padding: 8rpx 0;
text{
margin: 0 10px;
}
}
.rule-amount-recharge {
margin-left: 10px;
color: #000000ff;
font-size: 30rpx;
}
.rule-amount-give {
color: #3d8affff;
font-size: 30rpx;
}
}
.rule-state {
color: #000000ff;
font-size: 26rpx;
display: flex;
flex-direction: row;
align-items: center;
.order-spot {
width: 10rpx;
height: 10rpx;
border-radius: 50%;
}
text {
margin-left: 8rpx;
}
}
}
.card-content-right {
width: 120rpx;
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
border-left: 2rpx solid rgba(0, 0, 0, 0.06);
image {
width: 40rpx;
height: 40rpx;
}
.right-line {
width: 100%;
border-bottom: 2rpx solid rgba(0, 0, 0, 0.06);
}
}
</style>

171
pageRed/list/render/RedUserRender.vue Normal file
View File

@@ -0,0 +1,171 @@
<!--
会员充值记录列表页面， 数据渲染
业务： 会员充值记录
@author terrfly
@site https://www.jeequan.com
@date 2022/11/30 07:07
-->
<template>
<view class="card">
<view class="card-content" >
<view class="card-content-title">
<view class="card-content-title-left">
<!-- <image :src="props.record.avatarUrl" /> -->
<text>{{ props.record.storeName }}[{{ props.record.storeId }}]</text>
</view>
<!-- <view class="card-content-title-right">
<text v-if="props.record.type == 1">下单奖励 </text>
<text v-if="props.record.type == 2">消费退款 </text>
<text>{{ cal.cert2Dollar(props.record.entryAmount) }}</text>
</view> -->
</view>
<view class="card-content-line"></view>
<view class="card-content-body">
<view class="card-content-body-row">
<text class="card-content-body-row-text">顾客来源</text>
<!-- <text>{{ props.record.flowNo }}</text> -->
<text v-if="props.record.type == 'WECHAT'">微信 </text>
<text v-if="props.record.type == 'ALIPAY'">支付宝 </text>
</view>
<view class="card-content-body-row">
<text class="card-content-body-row-text">顾客uid</text>
<text class="card-content-body-row-text">{{ props.record.payUserId }}</text>
</view>
<view class="card-content-body-row">
<text class="card-content-body-row-text">红包余额</text>
<text>{{cal.cert2Dollar(props.record.balance) }}</text>
</view>
<view class="card-content-body-row">
<text class="card-content-body-row-text">最新一次下单时间</text>
<text>{{ props.record.lastTransTime }}</text>
</view>
<view class="card-content-body-row">
<text class="card-content-body-row-text">首次下单时间</text>
<text>{{ props.record.createdAt }}</text>
</view>
</view>
</view>
</view>
</template>
<script setup>
import { reactive, ref } from 'vue'
import cal from '@/commons/utils/cal.js'
import go from '@/commons/utils/go.js'
import datamap from '@/commons/utils/datamap.js'
// 定义传入属性
const props = defineProps({
record: { type: Object, default: () => {} }, // 渲染对象
})
</script>
<style lang="scss" scoped>
.card {
width: 690rpx;
margin: 30rpx auto;
}
.card-content {
border-radius: 20rpx;
background-color: $J-bg-ff;
margin: 10rpx 0;
}
.card-content-title {
height: 100rpx;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 30rpx;
.card-content-title-left {
height: 100rpx;
display: flex;
color: #000000ff;
font-size: 30rpx;
flex-direction: row;
align-items: center;
image {
width: 40rpx;
height: 40rpx;
border-radius: 50%;
}
text {
padding-left: 10rpx;
}
}
.card-content-title-right {
font-weight: 600;
color: #000000ff;
text:first-child {
font-size: 20rpx;
}
text:last-child {
font-size: 30rpx;
}
}
}
.card-content-line {
border-bottom: 2rpx solid rgba(0, 0, 0, 0.06);
}
.card-content-body {
padding: 20rpx;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-evenly;
box-sizing: border-box;
.card-content-body-row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
opacity: 1;
// padding-left: 50rpx;
height: 60rpx;
text:first-child {
width: 150rpx;
color: #999999ff;
font-size: 26rpx;
font-weight: 400;
text-align: right;
padding-right: 20rpx;
}
text:last-child {
color: #000000ff;
font-size: 26rpx;
font-weight: 400;
}
.order {
display: flex;
flex-direction: row;
align-items: center;
.order-spot {
width: 10rpx;
height: 10rpx;
border-radius: 50%;
}
.order-text {
padding-left: 10rpx;
color: #000000ff;
font-size: 26rpx;
font-weight: 400;
}
}
}
}
</style>

197
pageRed/list/render/SysUserRender.vue Normal file
View File

@@ -0,0 +1,197 @@
<!--
订单列表页面， 数据渲染
业务： 用户管理 迁移自 JFeftCard
@author terrfly
@site https://www.jeequan.com
@date 2022/11/30 07:07
-->
<template>
<view class="card-wrapper">
<view class="card-main" hover-class="touch-hover" :style="{ right: right + 'rpx' }">
<view class="card-item" @tap="toDetails">
<view class="img-wrapper" :class="{ 'open-state': props.record.state == 1, 'close-state': props.record.state == 0 }">
<image :src="props.record.avatarUrl" mode="scaleToFill" />
</view>
<view class="card-info">
<view class="info-text">
<view class="text-main single-text-beyond">{{ props.record.realname }}</view>
<JeepayTag :type="datamap.userType(props.record.userType).type">{{ datamap.userType(props.record.userType).text }}</JeepayTag>
</view>
<view class="info-phone">{{props.record.telphone}}</view>
</view>
</view>
<view class="card-delete" hover-class="u-cell-delete" hover-stay-time="150" @tap="deleteStaff"> 删除 </view>
</view>
</view>
</template>
<script setup>
import { reactive, ref } from 'vue'
import cal from '@/commons/utils/cal.js'
import go from '@/commons/utils/go.js'
import datamap from '@/commons/utils/datamap.js'
// 定义传入属性
const props = defineProps({
record: { type: Object, default: () => {} }, // 渲染对象
})
// 删除确认弹窗
const deleteStaff = (v) => {
// jeepayPopupConfirmRef.value.open(`确认删除 ${v.name} 员工吗?`).then(() => {
// console.log('确认')
// });
}
//前往员工详情
const toDetails = () => {
go.to('PAGES_USER_DETAIL', { sysUserId: props.record.sysUserId })
}
// 该部分 为左滑右滑功能部分
const right = ref(0)
let startX = 0
const touchStart = (e) => {
startX = e.touches[0].clientX
}
const touchMove = (e) => {
const endX = e.changedTouches[0].clientX
const deviationX = startX - endX
if (deviationX > 0) {
leftTouch(deviationX)
} else if (deviationX < 0) {
rightTouch(deviationX)
}
}
const touchEnd = (e) => {
const endX = e.changedTouches[0].clientX
const deviationX = startX - endX
if (deviationX == 0) {
emits('touchDown')
}
}
const leftTouch = (x) => {
if (x <= 50) return
right.value += x
if (right.value > 232) {
right.value = 232
}
}
const rightTouch = (x) => {
if (right.value > 0) {
right.value += x
right.value = right.value > 0 ? 0 : right.value
} else {
right.value = 0
}
}
// 左滑右滑 end
</script>
<style lang="scss" scoped>
.card-wrapper {
overflow: hidden;
.card-main {
position: relative;
padding: 0 30rpx;
height: 170rpx;
background-color: #fff;
transition: 0.2s ease-in;
.card-item {
display: flex;
align-items: center;
width: 100%;
height: 100%;
.img-wrapper {
position: relative;
flex-shrink: 0;
width: 100rpx;
height: 100rpx;
background-color: skyblue;
border-radius: 50%;
image {
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.close-state::after {
content: '';
position: absolute;
right: -10rpx;
bottom: -5rpx;
width: 25rpx;
height: 25rpx;
border: 6rpx solid #fff;
border-radius: 50%;
background-color: #d9d9d9;
}
.open-state::after {
content: '';
position: absolute;
right: -10rpx;
bottom: -5rpx;
width: 25rpx;
height: 25rpx;
border: 6rpx solid #fff;
border-radius: 50%;
background-color: #168fff;
}
.card-info {
margin-left: 30rpx;
.info-text {
display: flex;
.text-main {
max-width: 446rpx;
font-size: 30rpx;
font-weight: 400;
}
.info-state {
display: flex;
align-items: center;
margin-left: 30rpx;
padding: 0 15rpx;
height: 40rpx;
font-size: 23rpx;
font-weight: 400;
color: #fff;
white-space: nowrap;
background: linear-gradient(270deg, rgba(61, 220, 68, 1) 0%, rgba(23, 187, 118, 1) 100%);
border-radius: 6rpx;
}
}
.info-phone {
margin-top: 16rpx;
font-size: 25rpx;
font-weight: 400;
color: $J-color-t99;
}
}
}
.card-delete {
position: absolute;
top: 0;
right: -232rpx;
display: flex;
justify-content: center;
align-items: center;
width: 232rpx;
height: 170rpx;
color: #fff;
background-color: #ff5b4c;
}
}
}
.u-cell-hover {
background-color: #f8f9fa;
}
.u-cell-delete {
opacity: 0.5;
}
</style>

64
pageRed/list/render/WxmpUserRender.vue Normal file
View File

@@ -0,0 +1,64 @@
<!--
订单列表页面， 数据渲染
业务： 通知人管理
@author terrfly
@site https://www.jeequan.com
@date 2022/11/28 17:44
-->
<template>
<view class="notice-main">
<view class="notice-title">
<view class="notice-name single-text-beyond">{{ props.record.nickname }}</view>
<JeepayStateSwitch v-model:state="props.record.sendStatus" :showSwitchType="true" :updateStateFunc="updateStateFunc" />
</view>
<view class="notice-info">{{ props.record.wxOpenId }}</view>
</view>
</template>
<script setup>
import { reactive, ref } from "vue"
import cal from '@/commons/utils/cal.js'
import go from '@/commons/utils/go.js'
import datamap from '@/commons/utils/datamap.js'
import { reqLoad, API_URL_WXMP_USER_LIST } from "@/http/apiManager.js"
import infoBox from '@/commons/utils/infoBox.js'
// 定义传入属性
const props = defineProps({
record: {type:Object, default: () => {}}, // 渲染对象
})
function updateStateFunc (sendStatus) {
return reqLoad.updateById(API_URL_WXMP_USER_LIST, props.record.userId, { sendStatus : sendStatus }).then(({bizData}) => {
infoBox.showSuccessToast('更新成功')
})
}
</script>
<style lang="scss" scoped>
.notice-main {
display: flex;
flex-direction: column;
justify-content: center;
padding: 0 40rpx;
height: 175rpx;
background-color: $J-bg-ff;
.notice-title {
display: flex;
align-items: center;
justify-content: space-between;
.notice-name {
width: 480rpx;
font-size: 30rpx;
}
}
.notice-info {
margin-top: 16rpx;
font-size: 26rpx;
color: $J-color-t99;
}
}
</style>

315
pageRed/list/search.vue Normal file
View File

@@ -0,0 +1,315 @@
<template>
<JeepayBackground>
<view class="input-wrapper">
<view class="input-main">
<uni-easyinput class='jeepay-search' :inputBorder="false" :placeholder="vdata.pageObject.searchPlaceholder"
v-model="vdata.searchVal" @focus="focus" @confirm="searchFunc">
<template #prefixIcon><image src="@/static/iconImg/icon-search.svg" class="input-icon" @tap="vdata.searchVal=''" /></template>
</uni-easyinput>
<button type="text" @click="searchFunc()">搜索</button>
<!-- <button v-show="!vdata.isSearch" type="text" @click="searchFunc">取消</button> -->
</view>
</view>
<JeepayTableList ref="tableRef" :reqTableDataFunc="reqTableDataFunc" :searchData="vdata.searchData" :initData="false">
<template #tableBody="{ record }">
<PayOrderRender v-if="vdata.pageType == 'payOrder'" :record="record" />
<MchAppRender v-if="vdata.pageType == 'mchApp'" :record="record" />
<WxmpUserRender v-if="vdata.pageType == 'wxmpUser'" :record="record" />
<MchApplymentRender v-if="vdata.pageType == 'mchApplyment'" :record="record" />
<MchStoreRender v-if="vdata.pageType == 'mchStore'" :record="record" />
<SysUserRender v-if="vdata.pageType == 'sysUser'" :record="record" />
<AppConfigRender v-if="vdata.pageType == 'payPassage'" :record="record" :configAppId="vdata.pageOptions.appId" />
<MemberRender v-if="vdata.pageType == 'member'" :record="record" />
<MemberRechargeRecordRender v-if="vdata.pageType == 'memberRechargeRecord'" :record="record" />
<MemberAccountHistoryRender v-if="vdata.pageType == 'memberAccountHistory'" :record="record" />
<!-- 设备的三个类型的搜索 -->
<DeviceCommonsRender v-if="vdata.pageType == 'qrc'" type="qrc" :record="record" />
<DeviceCommonsRender v-if="vdata.pageType == 'storeTerminal'" type="storeTerminal" :record="record" />
<DeviceCommonsRender v-if="vdata.pageType == 'device'" type="device" :record="record" />
<DeviceCommonsRender v-if="vdata.pageType == 'face'" type="face" :record="record" />
<FaceCardRender v-if="vdata.pageType == 'faceImgAd'" v-bind="record" />
<!-- 数据渲染: 动态组件： 微信小程序不支持 -->
<!-- <component ref="recordRenderComponentRef" :is="vdata.pageObject.component" :record="record" /> -->
</template>
</JeepayTableList>
</JeepayBackground>
</template>
<script setup>
import { reactive, ref, onMounted, nextTick } from 'vue';
import emit from '@/commons/utils/emit.js';
import go from '@/commons/utils/go.js';
import {
reqLoad,
API_URL_PAY_ORDER_LIST,
API_URL_MCH_APP_LIST,
API_URL_WXMP_USER_LIST,
API_URL_MCH_APPLYMENT_LIST,
API_URL_MCH_STORE_LIST,
API_URL_SYS_USER_LIST,
API_URL_PAY_PASSAGE_LIST,
API_URL_SYS_CODE_LIST,
API_URL_SYS_DEVICE_LIST,
API_URL_SYS_TERMINALS,
API_URI_PAY_AD_LIST,
API_URL_MEMBERS,
API_URL_MEMBER_RECHARGE_RECORDS,
API_URL_MEMBER_ACCOUNT_HISTORY
} from '@/http/apiManager.js';
import { onLoad, onUnload, onReachBottom } from '@dcloudio/uni-app';
import PayOrderRender from './render/PayOrderRender.vue';
import MchAppRender from './render/MchAppRender.vue';
import WxmpUserRender from './render/WxmpUserRender.vue';
import MchApplymentRender from './render/MchApplymentRender.vue';
import MchStoreRender from './render/MchStoreRender.vue';
import SysUserRender from './render/SysUserRender.vue';
import AppConfigRender from './render/AppConfigRender.vue';
import DeviceCommonsRender from './render/DeviceCommonsRender.vue';
import FaceCardRender from './render/FaceCardRender.vue';
import MemberRender from './render/MemberRender.vue';
import MemberRechargeRecordRender from './render/MemberRechargeRecordRender.vue';
import MemberAccountHistoryRender from './render/MemberAccountHistoryRender.vue';
onReachBottom(() => {});
const tableRef = ref();
const recordRenderComponentRef = ref(); // 数据渲染组件
// 定义所有的页面类型
const pageTypeMap = {
payOrder: {
// 支付订单列表
component: PayOrderRender, // 渲染组件
searchUrl: API_URL_PAY_ORDER_LIST,
searchField: 'unionOrderId', // 搜索字段
searchPlaceholder: '支付订单号、商户单号' // 显示名称
},
mchApp: {
// 商户应用
component: MchAppRender, // 渲染组件
searchUrl: API_URL_MCH_APP_LIST,
searchField: 'unionSearchId', // 搜索字段
searchPlaceholder: '应用APPID、名称' // 显示名称
},
wxmpUser: {
// 通知人管理
component: WxmpUserRender, // 渲染组件
searchUrl: API_URL_WXMP_USER_LIST,
searchField: 'nickname', // 搜索字段
searchPlaceholder: '昵称' // 显示名称
},
mchApplyment: {
// 进件
component: MchApplymentRender, // 渲染组件
searchUrl: API_URL_MCH_APPLYMENT_LIST,
searchField: 'unionSearchId', // 搜索字段
searchPlaceholder: '进件单号' // 显示名称
},
mchStore: {
// 门店
component: MchStoreRender, // 渲染组件
searchUrl: API_URL_MCH_STORE_LIST,
searchField: 'unionStoreInfo', // 搜索字段
searchPlaceholder: '门店名称、ID' // 显示名称
},
sysUser: {
// 用户管理
component: SysUserRender, // 渲染组件
searchUrl: API_URL_SYS_USER_LIST,
searchField: 'realname', // 搜索字段
searchPlaceholder: '姓名' // 显示名称
},
payPassage: {
// 支付通道配置
component: AppConfigRender, // 渲染组件
searchUrl: API_URL_PAY_PASSAGE_LIST,
searchField: 'wayCode', // 搜索字段
searchPlaceholder: '支付方式代码' // 显示名称
},
qrc: {
searchUrl: API_URL_SYS_CODE_LIST,
searchField: 'appSearchData',
searchPlaceholder: '搜索码牌名称，编号'
},
device: {
searchUrl: API_URL_SYS_DEVICE_LIST,
searchField: 'appSearchData',
searchPlaceholder: '搜索设备名称、编号'
},
storeTerminal: {
searchUrl: API_URL_SYS_TERMINALS,
searchField: 'trmName',
searchPlaceholder: '搜索辅助终端名称'
},
face: {
searchUrl: API_URL_SYS_DEVICE_LIST,
searchField: 'appSearchData',
searchPlaceholder: '搜索设备名称、编号'
},
faceImgAd:{
searchUrl: API_URI_PAY_AD_LIST,
searchField: 'title',
searchPlaceholder: '搜索广告标题'
},
// 会员管理
member: {
component: MemberRender, // 渲染组件
searchUrl: API_URL_MEMBERS,
searchField: 'unionQueryParam',
searchPlaceholder: '搜索手机号、会员名称'
},
// 会员充值记录
memberRechargeRecord: {
component: MemberRechargeRecordRender, // 渲染组件
searchUrl: API_URL_MEMBER_RECHARGE_RECORDS,
searchField: 'unionQueryParam',
searchPlaceholder: '搜索订单号、手机号、会员名称'
},
// 会员账户流水
memberAccountHistory: {
component: MemberAccountHistoryRender, // 渲染组件
searchUrl: API_URL_MEMBER_ACCOUNT_HISTORY,
searchField: 'unionQueryParam',
searchPlaceholder: '搜索充值单号、手机号、会员名称'
}
};
onLoad(option => {
vdata.pageOptions = option;
vdata.pageType = option.type;
vdata.pageObject = pageTypeMap[option.type];
// 特殊处理
if (vdata.pageType == 'payPassage') {
vdata.searchData.appId = option.appId;
}
// 特殊处理
if (vdata.pageType == 'device') {
vdata.searchData.deviceType = option.deviceType;
}
// 特殊处理
if (vdata.pageType == 'sysUser') { // 不查询普通用户。
vdata.searchData.isNotHasType2 = 1;
}
});
// 监听 更新事件
onUnload(() => uni.$off(emit.ENAME_REF_SEARCH_PAGE));
uni.$on(emit.ENAME_REF_SEARCH_PAGE, function(data) {
searchFunc();
});
const vdata = reactive({
pageOptions: {}, // 页面参数
pageType: '', // 页面类型
pageObject: {}, // 页面对象
searchVal: '', // 搜索值
searchData: {} ,// 搜索内容
});
// 请求
function reqTableDataFunc(params) {
return reqLoad.list(vdata.pageObject.searchUrl, params);
}
// 点击搜索事件
async function searchFunc(val) {
if(!vdata.searchVal.trim()) return;
vdata.searchData[vdata.pageObject.searchField] = vdata.searchVal;
tableRef.value.refTable(true); // 刷新列表页
}
const focus = () => {
vdata.isSearch = false
}
</script>
<style lang="scss" scoped>
.input-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 30rpx;
padding-top: 22rpx;
height: 110rpx;
background-color: $J-bg-ff;
.input-main {
flex: 1;
display: flex;
align-items: center;
height: 70rpx;
image {
padding: 22rpx;
width: 26rpx;
height: 26rpx;
}
input {
flex: 1;
font-size: 27rpx;
}
::v-deep uni-button {
font-size: 32rpx;
color: rgba(29,121,253,1);
background: rgba(255,255,255,1);
}
::v-deep.uni-easyinput {
.uni-easyinput__content {
background-color: $J-bg-f5 !important;
border-radius: $J-b-r12;
.uni-easyinput__content-input {
padding-left: 0 !important;
.uni-input-input {
border-radius: $J-b-r12 !important;
overflow: hidden !important;
}
}
.uni-input-placeholder {
font-size: 27rpx;
}
.uni-icons {
color: rgba(230,230,230,1) !important;
}
}
}
}
}
.input-icon{
position: relative;
z-index: 10;
}
.search-button{
position: absolute;
right: 0;
background-color: transparent !important;
color: transparent !important;
}
</style>