root/ludu-admin-vue3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

REVIEW 公众号的实现

Browse Source
This commit is contained in:
YunaiV 2023-04-13 22:25:35 +08:00
parent 3aefedff6a
commit 1a1bfe0ebb
9 changed files with 20 additions and 334 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
build/vite/optimize.ts
View File

@ -75,7 +75,8 @@ const include = [
'element-plus/es/components/dropdown-item/style/css',
'element-plus/es/components/badge/style/css',
'element-plus/es/components/breadcrumb/style/css',
'element-plus/es/components/breadcrumb-item/style/css'
'element-plus/es/components/breadcrumb-item/style/css',
'element-plus/es/components/image/style/css'
]
const exclude = ['@iconify/json']

2
src/views/mp/components/WxMpSelect.vue
View File

@ -3,7 +3,7 @@
<el-option v-for="item in accountList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</template>
<!-- TODO @芋艿：WxMpSelect 改成 WxAccountSelect，然后挪到现有的 wx-account-select 包下 -->
<script lang="ts" setup name="WxMpSelect">
import * as MpAccountApi from '@/api/mp/account'

2
src/views/mp/components/wx-editor/WxEditor.vue
View File

@ -102,5 +102,3 @@ const uploadError = () => {
</div>
</div>
</template>
<style></style>

3
src/views/mp/draft/index.vue
View File

@ -252,7 +252,6 @@ import * as MpFreePublishApi from '@/api/mp/freePublish'
import type { UploadFiles, UploadProps, UploadRawFile } from 'element-plus'
// 可以用改本地数据模拟，避免API调用超限
// import drafts from './mock'
const message = useMessage() // 消息
const loading = ref(true) // 列表的加载中
@ -362,7 +361,7 @@ const submitForm = async () => {
} finally {
dialogNewsVisible.value = false
addMaterialLoading.value = false
getList()
await getList()
}
}

17
src/views/mp/material/index.vue
View File

@ -277,14 +277,11 @@ const uploadRules: FormRules = {
}
// 素材类型
type MatertialType = 'image' | 'voice' | 'video'
const type = ref<MatertialType>('image')
// 遮罩层
const loading = ref(false)
// 总条数
// 数据列表
const list = ref<any[]>([])
const total = ref(0)
type MaterialType = 'image' | 'voice' | 'video'
const type = ref<MaterialType>('image')
const loading = ref(false) // 遮罩层
const list = ref<any[]>([]) // 总条数
const total = ref(0) // 数据列表
// 查询参数
interface QueryParams {
pageNo: number
@ -302,7 +299,7 @@ const queryParams: QueryParams = reactive({
const fileList = ref<UploadUserFile[]>([])
interface UploadData {
type: MatertialType
type: MaterialType
title: string
introduction: string
}
@ -346,7 +343,7 @@ const handleQuery = () => {
const onTabChange = (tabName: TabPaneName) => {
// 设置 type
uploadData.type = tabName as MatertialType
uploadData.type = tabName as MaterialType
// 提前情况数据，避免tab切换后显示垃圾数据
list.value = []

4
src/views/mp/tag/index.vue
View File

@ -71,11 +71,10 @@
<TagForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts" name="MpTag">
import { dateFormatter } from '@/utils/formatTime'
import * as MpTagApi from '@/api/mp/tag'
import TagForm from './TagForm.vue'
import WxMpSelect from '@/views/mp/components/WxMpSelect.vue'
import { dateFormatter } from '@/utils/formatTime'
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化
@ -93,7 +92,6 @@ const queryParams: QueryParams = reactive({
pageSize: 10,
accountId: undefined
})
const formRef = ref<InstanceType<typeof TagForm> | null>(null)
/** 侦听公众号变化 **/

17
src/views/mp/user/index.vue
View File

@ -121,15 +121,8 @@ const queryParams: QueryParams = reactive({
openid: null,
nickname: null
})
const tagList = ref<any[]>([]) // 公众号标签列表
const queryFormRef = ref<FormInstance | null>(null) // 搜索的表单
const formRef = ref<InstanceType<typeof UserForm> | null>(null)
/** 初始化 */
onMounted(async () => {
tagList.value = await MpTagApi.getSimpleTagList()
})
const tagList = ref<any[]>([]) // 公众号标签列表
/** 侦听公众号变化 **/
const onAccountChanged = (id?: number) => {
@ -165,6 +158,7 @@ const resetQuery = () => {
}
/** 添加/修改操作 */
const formRef = ref<InstanceType<typeof UserForm> | null>(null)
const openForm = (id: number) => {
formRef.value?.open(id)
}
@ -175,7 +169,12 @@ const handleSync = async () => {
await message.confirm('是否确认同步粉丝？')
await MpUserApi.syncUser(queryParams.accountId)
message.success('开始从微信公众号同步粉丝信息，同步需要一段时间，建议稍后再查询')
getList()
await getList()
} catch {}
}
/** 初始化 */
onMounted(async () => {
tagList.value = await MpTagApi.getSimpleTagList()
})
</script>

152
src/views/pay/order/orderForm.vue
View File

@ -1,152 +0,0 @@
<template>
<Dialog :title="dialogTitle" v-model="dialogVisible" width="50%">
<el-descriptions :column="2" label-class-name="desc-label">
<el-descriptions-item label="商户名称">{{ orderDetail.merchantName }}</el-descriptions-item>
<el-descriptions-item label="应用名称">{{ orderDetail.appName }}</el-descriptions-item>
<el-descriptions-item label="商品名称">{{ orderDetail.subject }}</el-descriptions-item>
</el-descriptions>
<el-divider />
<el-descriptions :column="2" label-class-name="desc-label">
<el-descriptions-item label="商户订单号">
<el-tag size="small">{{ orderDetail.merchantOrderId }}</el-tag>
</el-descriptions-item>
<el-descriptions-item label="渠道订单号">
<el-tag class="tag-purple" size="small">{{ orderDetail.channelOrderNo }}</el-tag>
</el-descriptions-item>
<el-descriptions-item label="支付订单号">
<el-tag v-if="orderDetail.payOrderExtension.no !== ''" class="tag-pink" size="small">
{{ orderDetail.payOrderExtension.no }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="金额">
<el-tag type="success" size="small">{{ parseFloat(orderDetail.amount / 100, 2) }}</el-tag>
</el-descriptions-item>
<el-descriptions-item label="手续费">
<el-tag type="warning" size="small"
>{{ parseFloat(orderDetail.channelFeeAmount / 100, 2) }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="手续费比例">
{{ parseFloat(orderDetail.channelFeeRate / 100, 2) }}%
</el-descriptions-item>
<el-descriptions-item label="支付状态">
<dict-tag :type="DICT_TYPE.PAY_ORDER_STATUS" :value="orderDetail.status" />
</el-descriptions-item>
<el-descriptions-item label="回调状态">
<dict-tag :type="DICT_TYPE.PAY_ORDER_NOTIFY_STATUS" :value="orderDetail.notifyStatus" />
</el-descriptions-item>
<el-descriptions-item label="回调地址">{{ orderDetail.notifyUrl }}</el-descriptions-item>
<el-descriptions-item label="创建时间" :formatter="dateFormatter">
{{ formatDate(orderDetail.createTime) }}
</el-descriptions-item>
<el-descriptions-item label="支付时间" :formatter="dateFormatter">
{{ formatDate(orderDetail.successTime) }}
</el-descriptions-item>
<el-descriptions-item label="失效时间" :formatter="dateFormatter">
{{ formatDate(orderDetail.expireTime) }}
</el-descriptions-item>
<el-descriptions-item label="通知时间" :formatter="dateFormatter">
{{ formatDate(orderDetail.notifyTime) }}
</el-descriptions-item>
</el-descriptions>
<el-divider />
<el-descriptions :column="2" label-class-name="desc-label">
<el-descriptions-item label="支付渠道"
>{{ orderDetail.channelCodeName }}
</el-descriptions-item>
<el-descriptions-item label="支付IP">{{ orderDetail.userIp }}</el-descriptions-item>
<el-descriptions-item label="退款状态">
<dict-tag :type="DICT_TYPE.PAY_ORDER_REFUND_STATUS" :value="orderDetail.refundStatus" />
</el-descriptions-item>
<el-descriptions-item label="退款次数">{{ orderDetail.refundTimes }}</el-descriptions-item>
<el-descriptions-item label="退款金额">
<el-tag type="warning">
{{ parseFloat(orderDetail.refundAmount / 100, 2) }}
</el-tag>
</el-descriptions-item>
</el-descriptions>
<el-divider />
<el-descriptions :column="1" label-class-name="desc-label" direction="vertical" border>
<el-descriptions-item label="商品描述">
{{ orderDetail.body }}
</el-descriptions-item>
<el-descriptions-item label="支付通道异步回调内容">
{{ orderDetail.payOrderExtension.channelNotifyData }}
</el-descriptions-item>
</el-descriptions>
</Dialog>
</template>
<script setup lang="ts" name="orderForm">
import { DICT_TYPE } from '@/utils/dict'
import * as OrderApi from '@/api/pay/order'
import { dateFormatter, formatDate } from '@/utils/formatTime'
const { t } = useI18n() // 国际化
// const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('订单详情') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const defaultOrderDetail = {
merchantName: '',
appName: '',
channelCodeName: '',
subject: '',
merchantOrderId: null,
channelOrderNo: '',
body: '',
amount: null,
channelFeeRate: null,
channelFeeAmount: null,
userIp: '',
status: null,
notifyUrl: '',
notifyStatus: null,
refundStatus: null,
refundTimes: '',
refundAmount: null,
createTime: '',
successTime: '',
notifyTime: '',
expireTime: '',
payOrderExtension: {
channelNotifyData: '',
no: ''
}
}
const orderDetail = ref(JSON.parse(JSON.stringify(defaultOrderDetail)))
/** 打开弹窗 */
const open = async (id?: number) => {
dialogVisible.value = true
dialogTitle.value = t('action.preview')
// 修改时，设置数据
if (id) {
formLoading.value = true
try {
orderDetail.value = await OrderApi.getOrderDetail(id)
if (orderDetail.value.payOrderExtension === null) {
orderDetail.value.payOrderExtension = Object.assign(
defaultOrderDetail.payOrderExtension,
{}
)
}
} finally {
formLoading.value = false
}
}
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>
<style>
.tag-purple {
color: #722ed1;
background: #f9f0ff;
border-color: #d3adf7;
}
.tag-pink {
color: #eb2f96;
background: #fff0f6;
border-color: #ffadd2;
}
</style>

154
src/views/pay/refund/refundForm.vue
View File

@ -1,154 +0,0 @@
<template>
<Dialog :title="dialogTitle" v-model="dialogVisible" width="50%">
<el-descriptions :column="2" label-class-name="desc-label">
<el-descriptions-item label="商户名称">{{ refundDetail.merchantName }}</el-descriptions-item>
<el-descriptions-item label="应用名称">{{ refundDetail.appName }}</el-descriptions-item>
<el-descriptions-item label="商品名称">{{ refundDetail.subject }}</el-descriptions-item>
</el-descriptions>
<el-divider />
<el-descriptions :column="2" label-class-name="desc-label">
<el-descriptions-item label="商户退款单号">
<el-tag size="small">{{ refundDetail.merchantRefundNo }}</el-tag>
</el-descriptions-item>
<el-descriptions-item label="商户订单号"
>{{ refundDetail.merchantOrderId }}
</el-descriptions-item>
<el-descriptions-item label="交易订单号">{{ refundDetail.tradeNo }}</el-descriptions-item>
</el-descriptions>
<el-divider />
<el-descriptions :column="2" label-class-name="desc-label">
<el-descriptions-item label="支付金额">
{{ parseFloat(refundDetail.payAmount / 100).toFixed(2) }}
</el-descriptions-item>
<el-descriptions-item label="退款金额" size="small">
<el-tag class="tag-purple" size="small">
{{ parseFloat(refundDetail.refundAmount / 100).toFixed(2) }}
</el-tag>
</el-descriptions-item>
<el-descriptions-item label="退款类型">
<dict-tag :type="DICT_TYPE.PAY_REFUND_ORDER_TYPE" :value="refundDetail.type" />
</el-descriptions-item>
<el-descriptions-item label="退款状态">
<dict-tag :type="DICT_TYPE.PAY_REFUND_ORDER_STATUS" :value="refundDetail.status" />
</el-descriptions-item>
<el-descriptions-item label="创建时间"
>{{ formatDate(refundDetail.createTime) }}
</el-descriptions-item>
<el-descriptions-item label="退款成功时间"
>{{ formatDate(refundDetail.successTime) }}
</el-descriptions-item>
<el-descriptions-item label="退款失效时间"
>{{ formatDate(refundDetail.expireTime) }}
</el-descriptions-item>
<el-descriptions-item label="更新时间"
>{{ formatDate(refundDetail.updateTime) }}
</el-descriptions-item>
</el-descriptions>
<el-divider />
<el-descriptions :column="2" label-class-name="desc-label">
<el-descriptions-item label="支付渠道">
{{ refundDetail.channelCodeName }}
</el-descriptions-item>
<el-descriptions-item label="支付IP" size="small">
{{ refundDetail.userIp }}
</el-descriptions-item>
<el-descriptions-item label="回调地址">{{ refundDetail.notifyUrl }}</el-descriptions-item>
<el-descriptions-item label="回调状态">
<dict-tag :type="DICT_TYPE.PAY_ORDER_NOTIFY_STATUS" :value="refundDetail.notifyStatus" />
</el-descriptions-item>
<el-descriptions-item label="回调时间"
>{{ formatDate(refundDetail.notifyTime) }}
</el-descriptions-item>
</el-descriptions>
<el-divider />
<el-descriptions :column="2" label-class-name="desc-label">
<el-descriptions-item label="渠道订单号"
>{{ refundDetail.channelOrderNo }}
</el-descriptions-item>
<el-descriptions-item label="渠道退款单号"
>{{ refundDetail.channelRefundNo }}
</el-descriptions-item>
<el-descriptions-item label="渠道错误码"
>{{ refundDetail.channelErrorCode }}
</el-descriptions-item>
<el-descriptions-item label="渠道错误码描述"
>{{ refundDetail.channelErrorMsg }}
</el-descriptions-item>
</el-descriptions>
<br />
<el-descriptions :column="1" label-class-name="desc-label" direction="vertical" border>
<el-descriptions-item label="渠道额外参数"
>{{ refundDetail.channelExtras }}
</el-descriptions-item>
<el-descriptions-item label="退款原因">{{ refundDetail.reason }}</el-descriptions-item>
</el-descriptions>
</Dialog>
</template>
<script setup lang="ts" name="refundForm">
import { DICT_TYPE } from '@/utils/dict'
import * as RefundApi from '@/api/pay/refund'
import { formatDate } from '@/utils/formatTime'
const { t } = useI18n() // 国际化
// const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('退款订单详情') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const defaultrefundDetail = {
id: null,
appId: null,
appName: '',
channelCode: '',
channelCodeName: '',
channelErrorCode: '',
channelErrorMsg: '',
channelExtras: '',
channelId: null,
channelOrderNo: '',
channelRefundNo: '',
createTime: null,
expireTime: null,
merchantId: null,
merchantName: '',
merchantOrderId: '',
merchantRefundNo: '',
notifyStatus: null,
notifyTime: null,
notifyUrl: '',
orderId: null,
payAmount: null,
reason: '',
refundAmount: null,
status: null,
subject: '',
successTime: null,
tradeNo: '',
type: null,
userIp: ''
}
const refundDetail = ref(JSON.parse(JSON.stringify(defaultrefundDetail)))
/** 打开弹窗 */
const open = async (id?: number) => {
dialogVisible.value = true
dialogTitle.value = t('action.preview')
// 修改时，设置数据
if (id) {
formLoading.value = true
try {
refundDetail.value = await RefundApi.getRefundApi(id)
} finally {
formLoading.value = false
}
}
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>
<style>
.tag-purple {
color: #722ed1;
background: #f9f0ff;
border-color: #d3adf7;
}
</style>