This commit is contained in:
dzc committed 2025-04-03 15:12:04 +08:00
commit bba120798d
15 files changed
+1087 -922

No files matched your search

+154 -156
View File
@@ -67,181 +67,179 @@ const tabbar = [
]
export default {
onLaunch() {
async onLaunch() {
if (isDevEnv()) return
console.log("环境判断")
// 诗画浦江获取用户信息进行环境判断
;(window as any).CP2.getAppInfo().then(async (res) => {
if (res.code !== 0) {
// 不是诗画环境
const launchParam = new URL(window.location.href).searchParams.get("launchParam")
console.log("app launch 启动路径参数", launchParam)
switch (launchParam) {
case "canteen":
uni.switchTab({ url: "/pages/tabbar/canteen" })
break
case "selfMerchant":
uni.switchTab({ url: "/pages/tabbar/selfMerchant" })
break
default:
break
const res = await (window as any).CP2.getAppInfo()
if (res.code == 0) {
// 不是诗画环境
const launchParam = new URL(window.location.href).searchParams.get("launchParam")
console.log("app launch 启动路径参数", launchParam)
switch (launchParam) {
case "canteen":
uni.switchTab({ url: "/pages/tabbar/canteen" })
break
case "selfMerchant":
uni.switchTab({ url: "/pages/tabbar/selfMerchant" })
break
default:
break
}
} else {
// 是诗画环境
const userRole = uni.getStorageSync("userRole")
if (userRole && userRole == "user") uni.switchTab({ url: "/pages/tabbar/coopMerchant" })
if (userRole && userRole == "merchant") uni.switchTab({ url: "/pages/tabbar/individualOrder" })
const res = await user.isMerchant()
if (res.code == 0) {
if (res.data) {
return uni.redirectTo({ url: "/pages/user/userRole" })
} else {
uni.setStorageSync("userRole", "user")
uni.switchTab({ url: "/pages/tabbar/coopMerchant" })
}
} else {
// 是诗画环境
const userRole = uni.getStorageSync("userRole")
if (userRole && userRole == "user") uni.switchTab({ url: "/pages/tabbar/coopMerchant" })
if (userRole && userRole == "merchant") uni.switchTab({ url: "/pages/tabbar/individualOrder" })
const res = await user.isMerchant()
if (res.code == 0) {
if (res.data) {
return uni.redirectTo({ url: "/pages/user/userRole" })
} else {
uni.setStorageSync("userRole", "user")
uni.switchTab({ url: "/pages/tabbar/coopMerchant" })
}
} else {
uni.showToast({ title: "角色身份判断失败", icon: "none" })
}
uni.showToast({ title: "角色身份判断失败", icon: "none" })
}
})
}
},
onShow() {},
onHide() {},
methods: {
_initTabbar() {
// const launchPath = uni.getLaunchOptionsSync().path
// console.log("启动路径", launchPath)
async _initTabbar() {
if (isDevEnv()) {
tabbar.forEach(({ pagePath, text, iconPath, selectedIconPath, authPath, auth }, index) => {
uni.setTabBarItem({
index,
pagePath,
text,
iconPath,
selectedIconPath,
visible: true,
})
})
return
}
const launchParam = new URL(window.location.href).searchParams.get("launchParam")
console.log("tabbar launch 启动路径参数", launchParam)
// 诗画浦江获取用户信息进行环境判断
;(window as any).CP2.getAppInfo().then((res) => {
if (res.code == 0) {
// 不是诗画环境
if (isDevEnv()) {
tabbar.forEach(({ pagePath, text, iconPath, selectedIconPath, authPath, auth }, index) => {
uni.setTabBarItem({
index,
pagePath,
text,
iconPath,
selectedIconPath,
visible: true,
})
const res = await (window as any).CP2.getAppInfo()
if (res.code == 0) {
// 不是诗画环境
switch (launchParam) {
case "canteen":
tabbar.forEach(({ pagePath, text, iconPath, selectedIconPath, authPath }, index) => {
if (authPath.includes("pages/tabbar/canteen")) {
uni.setTabBarItem({
index,
pagePath,
text,
iconPath,
selectedIconPath,
visible: true,
})
} else {
uni.setTabBarItem({
index,
pagePath,
text,
iconPath,
selectedIconPath,
visible: false,
})
}
})
} else {
switch (launchParam) {
case "canteen":
tabbar.forEach(({ pagePath, text, iconPath, selectedIconPath, authPath }, index) => {
if (authPath.includes("pages/tabbar/canteen")) {
uni.setTabBarItem({
index,
pagePath,
text,
iconPath,
selectedIconPath,
visible: true,
})
} else {
uni.setTabBarItem({
index,
pagePath,
text,
iconPath,
selectedIconPath,
visible: false,
})
}
break
case "selfMerchant":
tabbar.forEach(({ pagePath, text, iconPath, selectedIconPath, authPath }, index) => {
if (authPath.includes("pages/tabbar/selfMerchant")) {
uni.setTabBarItem({
index,
pagePath,
text,
iconPath,
selectedIconPath,
visible: true,
})
break
case "selfMerchant":
tabbar.forEach(({ pagePath, text, iconPath, selectedIconPath, authPath }, index) => {
if (authPath.includes("pages/tabbar/selfMerchant")) {
uni.setTabBarItem({
index,
pagePath,
text,
iconPath,
selectedIconPath,
visible: true,
})
} else {
uni.setTabBarItem({
index,
pagePath,
text,
iconPath,
selectedIconPath,
visible: false,
})
}
} else {
uni.setTabBarItem({
index,
pagePath,
text,
iconPath,
selectedIconPath,
visible: false,
})
break
default:
uni.hideTabBar()
uni.showToast({ title: "启动参数不合法", icon: "none" })
break
}
}
} else {
// 是诗画环境
const userRole = uni.getStorageSync("userRole")
switch (userRole) {
case "user":
tabbar.forEach(({ pagePath, text, iconPath, selectedIconPath, authPath, auth }, index) => {
if (auth.includes("user")) {
uni.setTabBarItem({
index,
pagePath,
text,
iconPath,
selectedIconPath,
visible: true,
})
} else {
uni.setTabBarItem({
index,
pagePath,
text,
iconPath,
selectedIconPath,
visible: false,
})
}
})
break
case "merchant":
tabbar.forEach(({ pagePath, text, iconPath, selectedIconPath, authPath, auth }, index) => {
if (auth.includes("merchant")) {
uni.setTabBarItem({
index,
pagePath,
text,
iconPath,
selectedIconPath,
visible: true,
})
} else {
uni.setTabBarItem({
index,
pagePath,
text,
iconPath,
selectedIconPath,
visible: false,
})
}
})
break
default:
uni.hideTabBar()
uni.showToast({ title: "用户身份未确认", icon: "none" })
break
}
}
})
break
default:
uni.hideTabBar()
uni.showToast({ title: "启动参数不合法", icon: "none" })
break
}
})
} else {
// 是诗画环境
const userRole = uni.getStorageSync("userRole")
switch (userRole) {
case "user":
tabbar.forEach(({ pagePath, text, iconPath, selectedIconPath, authPath, auth }, index) => {
if (auth.includes("user")) {
uni.setTabBarItem({
index,
pagePath,
text,
iconPath,
selectedIconPath,
visible: true,
})
} else {
uni.setTabBarItem({
index,
pagePath,
text,
iconPath,
selectedIconPath,
visible: false,
})
}
})
break
case "merchant":
tabbar.forEach(({ pagePath, text, iconPath, selectedIconPath, authPath, auth }, index) => {
if (auth.includes("merchant")) {
uni.setTabBarItem({
index,
pagePath,
text,
iconPath,
selectedIconPath,
visible: true,
})
} else {
uni.setTabBarItem({
index,
pagePath,
text,
iconPath,
selectedIconPath,
visible: false,
})
}
})
break
default:
uni.hideTabBar()
uni.showToast({ title: "用户身份未确认", icon: "none" })
break
}
}
},
},
}
+7
View File
@@ -313,6 +313,13 @@
"navigationBarTitleText": "支付完成",
"disableScroll": true
}
},
{
"path": "transferMoney",
"style": {
"navigationBarTitleText": "转账",
"disableScroll": true
}
}
]
}
+2 -83
View File
@@ -9,63 +9,7 @@
</tm-sheet>
<tm-button class="mt-40" :block="true" @click="disabled ? '' : handlePay()" :disabled="disabled">支付</tm-button>
<view class="bg-[#f5f5f5] px-1 py-2 rounded-4 absolute bottom-0 w-full">
<view class="flex mb-2.5" v-for="(row, rowIndex) in keyboardLayout" :key="rowIndex">
<view
class="flex-1 h-[60px] flex items-center justify-center bg-white text-2xl text-[#333] mx-[5px] rounded-lg cursor-pointer select-none active:bg-[#f0f0f0]"
v-for="(key, keyIndex) in row"
:key="keyIndex"
@click="handleKeyPress(key)"
>
{{ key }}
</view>
</view>
<view class="flex mb-0">
<view
class="flex-1 h-[60px] flex items-center justify-center bg-white text-2xl text-[#333] mx-[5px] rounded-lg cursor-pointer select-none active:bg-[#f0f0f0]"
@click="handleKeyPress('.')"
>
.
</view>
<view
class="flex-auto h-[60px] flex items-center justify-center bg-white text-2xl text-[#333] mx-[5px] rounded-lg cursor-pointer select-none active:bg-[#f0f0f0]"
@click="handleKeyPress('0')"
>
0
</view>
<view
class="flex-1 h-[60px] flex items-center justify-center bg-white mx-[5px] rounded-lg cursor-pointer select-none active:bg-[#f0f0f0]"
@click="handleDelete"
>
<svg
t="1742457305987"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="4499"
width="24"
height="24"
>
<path
d="M897.706667 831.146667H286.72c-8.533333 0-15.36-3.413333-20.48-10.24L39.253333 527.36c-6.826667-8.533333-6.826667-22.186667 0-30.72l226.986667-293.546667c5.12-6.826667 11.946667-10.24 20.48-10.24h610.986667c51.2 0 92.16 40.96 92.16 92.16v453.973334c0 51.2-40.96 92.16-92.16 92.16z m-599.04-51.2h599.04c22.186667 0 40.96-18.773333 40.96-40.96V285.013333c0-22.186667-18.773333-40.96-40.96-40.96H298.666667L92.16 512l206.506667 267.946667z"
fill="#333333"
p-id="4500"
></path>
<path
d="M670.72 650.24c-6.826667 0-13.653333-1.706667-18.773333-6.826667L426.666667 416.426667c-10.24-10.24-10.24-25.6 0-35.84 10.24-10.24 25.6-10.24 35.84 0l226.986666 226.986666c10.24 10.24 10.24 25.6 0 35.84-6.826667 5.12-11.946667 6.826667-18.773333 6.826667z"
fill="#333333"
p-id="4501"
></path>
<path
d="M443.733333 650.24c-6.826667 0-13.653333-1.706667-18.773333-6.826667-10.24-10.24-10.24-25.6 0-35.84l226.986667-226.986666c10.24-10.24 25.6-10.24 35.84 0 10.24 10.24 10.24 25.6 0 35.84L462.506667 643.413333c-5.12 5.12-11.946667 6.826667-18.773334 6.826667z"
fill="#333333"
p-id="4502"
></path>
</svg>
</view>
</view>
</view>
<numberKeyboard v-model="amount" />
</view>
</crud-layout>
</template>
@@ -78,13 +22,9 @@ import payApi from "@@/api/pay"
import { storePrice } from "@/sheep/utils/formatMoney"
import { router } from "@/sheep"
import { merchantApi } from "@/sheep/api"
import numberKeyboard from "@/sheep/components/numberKeyboard.vue"
const amount = ref("")
const keyboardLayout = ref([
["1", "2", "3"],
["4", "5", "6"],
["7", "8", "9"],
])
const scanData = ref<{ id?: string; name?: string }>({})
const disabled = ref(false)
@@ -113,27 +53,6 @@ const displayAmount = computed(() => {
)
})
// 按下键盘
const handleKeyPress = (key) => {
if (key === "." && amount.value.includes(".")) return
if (key === "." && !amount.value) {
amount.value = "0."
return
}
if (amount.value.includes(".")) {
const decimalPlaces = amount.value.split(".")[1]
if (decimalPlaces && decimalPlaces.length >= 2) return
}
amount.value += key
}
// 点击删除
const handleDelete = () => {
amount.value = amount.value.slice(0, -1)
}
// 点击支付
const handlePay = () => {
if (!scanData.value.id || !scanData.value.name) return uni.showToast({ title: "扫码信息不存在", icon: "none" })
+197
View File
@@ -0,0 +1,197 @@
<template>
<view class="bg-gray-100 flex-col min-h-screen">
<view class="bg-white p-4 card mx-3 my-1 mt-2 flex items-center justify-between">
<view class="flex items-center">
<image class="w-64 h-64 mr-2" :src="filePath(transferMoney.sourceWalletType.walletTypeIcon)" />
<view>{{ transferMoney.sourceWalletType.walletTypeName }}</view>
</view>
<view class="flex items-center">
<view class="main-text-28">余额:</view>
<view class="main-text-28 mr-1">{{ hooks.useMoney(transferMoney.sourceWalletType.balance) + "元" }}</view>
</view>
</view>
<view class="bg-white p-4 card mx-3 my-1 flex items-center justify-between active:bg-[#f0f0f0]" @click="targetWalletSelect">
<view class="flex items-center">
<image class="w-64 h-64 rounded-full mr-2" src="@/static/page/money-cny-circle-fill.svg" />
<view>转入到</view>
</view>
<view class="flex items-center">
<view class="second-text-28 mr-1">{{ state.targetWalletTypeName }}</view>
<image class="w-38 h-38 rounded-full c-blueGray" src="@/static/page/arrow-right.svg" />
</view>
</view>
<view class="bg-white p-4 card mx-3 my-1">
<text class="text-gray-700 font-bold text-lg">转账金额</text>
<view class="flex-row items-center">
<text class="text-3xl text-[#333] mr-2">¥</text>
<text v-if="!amount" class="text-xl text-gray-300">转账金额</text>
<text v-else class="text-3xl">{{ formattedAmount }}</text>
</view>
</view>
<!-- 金额限制提示 -->
<view class="h-30rpx">
<view v-if="storePrice(amount) > transferMoney.sourceWalletType?.balance" class="text-xs c-red px-8">
注:转账金额不能超过钱包余额
</view>
</view>
<view class="p-4 font-bold mt-1">
<tm-button block @click="confirmTransfer" v-if="transferMoney.sourceWalletType.walletTypeId">确定转账</tm-button>
</view>
<number-keyboard v-model="amount" />
<!-- 选择转入方式 -->
<tm-drawer v-model:show="show" title="选择钱包" size="50%" bg-color="#efefef" position="bottom" :show-footer="true" :showClose="true">
<view class="m-4">
<view
v-for="(v, index) in state.walletList"
:key="index"
class="card mb-2 overflow-hidden relative border-4 border-solid border-white duration-200 flex justify-between items-center p-4"
:class="{ 'border-4 border-solid border-blue!': state.targetWalletTypeId == v.walletTypeId }"
@click="state.targetWalletTypeId = v.walletTypeId"
>
<view class="flex items-center">
<image class="w-70 h-70 mr-2" :src="filePath(v.walletTypeIcon)" />
<view class="flex flex-col">
<view class="main-text-32">{{ v.walletTypeName }}</view>
<view class="text-gray-500 text-sm">{{ v.cardNumber }}</view>
</view>
</view>
<view class="main-text-32">余额:{{ hooks.useMoney(v.balance) + "元" }}</view>
</view>
</view>
<template #footer>
<view class="font-bold px-5">
<tm-button block @click="confirmTargetWallet">确 定</tm-button>
</view>
</template>
</tm-drawer>
</view>
</template>
<script setup lang="ts">
import { ref, computed, reactive } from "vue"
import { onLoad } from "@dcloudio/uni-app"
import NumberKeyboard from "@/sheep/components/numberKeyboard.vue"
import { payApi, walletApi } from "@/sheep/api"
import { hooks, router } from "@@/index"
import { filePath } from "@/sheep/utils/file"
import { storePrice } from "@/sheep/utils/formatMoney"
import { useTransferMoney } from "@/sheep/stores/transferMoney"
const transferMoney = useTransferMoney()
const amount = ref("")
const show = ref(false)
const state = reactive<any>({
sourceWalletTypeId: "",
sourceWalletTypeName: "",
walletList: [],
targetWalletTypeId: "",
targetWalletTypeName: "",
})
const curTargetWallet = ref()
onLoad(async () => {
if (!transferMoney.sourceWalletType.walletTypeId) return uni.showToast({ title: "钱包类型id不存在", icon: "none" })
state.sourceWalletTypeId = transferMoney.sourceWalletType.walletTypeId
state.sourceWalletTypeName = transferMoney.sourceWalletType.walletTypeName
uni.setNavigationBarTitle({ title: state.sourceWalletTypeName || "源钱包" })
const res = await walletApi.all()
if (res.code == 0) {
state.walletList = res.data.records.filter((item: any) => item.walletTypeId != state.sourceWalletTypeId)
}
if (!curTargetWallet.value) {
curTargetWallet.value = state.walletList[0]
state.targetWalletTypeId = state.walletList[0]?.walletTypeId
state.targetWalletTypeName = state.walletList[0]?.walletTypeName
}
})
// 目标钱包选择
const targetWalletSelect = () => {
// state.sourceWalletTypeId = ""
show.value = true
}
// 确认目标钱包
const confirmTargetWallet = () => {
// state.sourceWalletTypeName = state.walletList.find((item: any) => item.walletTypeId != state.sourceWalletTypeId).walletTypeName
show.value = false
}
// 格式化金额显示
const formattedAmount = computed(() => {
if (!amount.value) return ""
// 处理小数点情况
if (amount.value.endsWith(".")) {
return amount.value
}
const parts = amount.value.split(".")
// 添加千位分隔符
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",")
// 处理小数部分
if (parts.length > 1) {
// 如果小数部分不足两位,不自动补零
return `${parts[0]}.${parts[1]}`
}
return parts[0]
})
const numAmount = computed(() => storePrice(parseFloat(amount.value.endsWith(".") ? amount.value.slice(0, -1) : amount.value)))
// 确认转账
const confirmTransfer = async () => {
if (!amount.value || amount.value === "0" || amount.value === "0." || parseFloat(amount.value) === 0) {
return uni.showToast({ title: "金额不能为零", icon: "none" })
}
if (numAmount > transferMoney.sourceWalletType.balance) {
return uni.showToast({ title: "转账金额不能超过钱包余额", icon: "none" })
}
console.log("state.sourceWalletTypeId", state.sourceWalletTypeId)
console.log("state.targetWalletTypeId", state.targetWalletTypeId)
console.log("金额", numAmount.value)
uni.showModal({
title: "确定转入吗?",
success: async (res) => {
if (res.confirm) {
await confirmTransferAgain()
}
},
})
}
// 二次确认转账
const confirmTransferAgain = async () => {
try {
uni.showLoading({ title: "正在转入...", mask: true })
const res = await payApi.transferMoney({
sourceWalletTypeId: state.sourceWalletTypeId,
targetWalletTypeId: state.targetWalletTypeId,
balance: numAmount.value,
})
if (res.code == 0) {
uni.showToast({ title: "转账成功", icon: "success" })
router.jump("/pages/wallet/list", {}, 2)
} else {
uni.showToast({ title: res.msg, icon: "none" })
}
} catch (error: any) {
uni.showToast({
title: error.message,
icon: "none",
})
} finally {
uni.hideLoading()
}
}
</script>
+1
View File
@@ -71,6 +71,7 @@ const doTab = (e: any) => {
<tm-tag v-if="v.title == '充值'" size="m">{{ v.title }}</tm-tag>
<tm-tag v-if="v.title == '支付'" color="error" size="m">{{ v.title }}</tm-tag>
<tm-tag v-if="v.title == '退款'" color="info" size="m">{{ v.title }}</tm-tag>
<tm-tag v-if="v.title == '转账'" color="success" size="m">{{ v.title }}</tm-tag>
</view>
<view class="flex-row-center">
<text class="sub-text-30">{{ hooks.useMoney(v.price) }}元</text>
+12
View File
@@ -8,6 +8,7 @@ import { hooks, router } from "@@/index"
import { merchantApi, walletApi } from "@@/api"
import { filePath } from "@@/utils/file"
import { useTransferMoney } from "@/sheep/stores/transferMoney"
const state = reactive<any>({
showBindDialog: false,
@@ -119,6 +120,16 @@ const doFreeze = async () => {
uni.hideLoading()
}
}
// 转账
const doTransferMoney = (v: any) => {
if (v.walletTypeId) {
useTransferMoney().setSourceWalletType(v)
router.jump("/pages/pay/transferMoney")
return
}
uni.showToast({ title: "钱包类型id不存在", icon: "none" })
}
</script>
<template>
@@ -173,6 +184,7 @@ const doFreeze = async () => {
</view>
<view class="flex-row items-center justify-end space-x-20rpx m-t-10rpx">
<!-- <view v-if="v.walletTypeUniqueCode == 1 && !v.cardNumber" class="botder_btn" @tap.stop="openBindDialog(v)">绑定</view> -->
<view v-if="v.isRule == '1'" class="botder_btn" @tap.stop="doTransferMoney(v)">转账</view>
<view v-if="v.walletTypeUniqueCode == 1 && v.cardNumber && v.isFreeze != 1" class="botder_btn" @tap.stop="openFreezeDialog(v)">
申请冻结
</view>
+11
View File
@@ -61,4 +61,15 @@ export default {
},
})
},
// 转账
transferMoney: (data): Promise<any> => {
return request({
url: "/wallet/wallet-rule-transaction/app/transfer-accounts",
method: "POST",
data,
custom: {
showLoading: false,
},
})
},
}
+1 -1
View File
@@ -1,7 +1,7 @@
import request from "@/sheep/utils/request"
export default {
all: () =>
all: (): Promise<any> =>
request({
url: "/wallet/wallet-manage/app/get-all",
method: "GET",
+75
View File
@@ -0,0 +1,75 @@
<template>
<view class="bg-[#f5f5f5] px-1 py-2 rounded-4 absolute bottom-0 w-full">
<view class="flex mb-2.5" v-for="(row, rowIndex) in keyboardLayout" :key="rowIndex">
<view
class="flex-1 h-[60px] flex items-center justify-center bg-white text-2xl text-[#333] mx-[5px] rounded-lg cursor-pointer select-none active:bg-[#f0f0f0]"
v-for="(key, keyIndex) in row"
:key="keyIndex"
@click="handleKeyPress(key.toString())"
>
{{ key }}
</view>
</view>
<view class="flex mb-0">
<view
class="flex-1 h-[60px] flex items-center justify-center bg-white text-2xl text-[#333] mx-[5px] rounded-lg cursor-pointer select-none active:bg-[#f0f0f0]"
@click="handleKeyPress('.')"
>
.
</view>
<view
class="flex-auto h-[60px] flex items-center justify-center bg-white text-2xl text-[#333] mx-[5px] rounded-lg cursor-pointer select-none active:bg-[#f0f0f0]"
@click="handleKeyPress('0')"
>
0
</view>
<view
class="flex-1 h-[60px] flex items-center justify-center bg-white mx-[5px] rounded-lg cursor-pointer select-none active:bg-[#f0f0f0]"
@click="handleDelete"
>
<image class="w-[30px] h-[30px]" src="@/static/page/keyboardDelete.svg" />
</view>
</view>
</view>
</template>
<script setup lang="ts">
import { ref } from "vue"
const amount = defineModel<string>("modelValue", { default: "" })
const keyboardLayout = ref([
["1", "2", "3"],
["4", "5", "6"],
["7", "8", "9"],
])
// 按下键盘
const handleKeyPress = (key) => {
if (key === "." && amount.value.includes(".")) return
if (key === "." && !amount.value) {
amount.value = "0."
return
}
// 特殊处理:如果当前为0,新输入不是小数点,则替换0
if (amount.value == "0" && key != ".") {
amount.value = key
return
}
// 特殊处理:如果有小数点且已有两位小数,不再添加数字
if (amount.value.includes(".")) {
const decimalPlaces = amount.value.split(".")[1]
if (decimalPlaces && decimalPlaces.length >= 2) return
}
amount.value += key
}
// 点击删除
const handleDelete = () => {
if (amount.value.length > 0) {
amount.value = amount.value.slice(0, -1)
}
}
</script>
+14
View File
@@ -0,0 +1,14 @@
import { defineStore } from "pinia"
export const useTransferMoney = defineStore("transferMoney", {
state: (): any => {
return {
sourceWalletType: {},
}
},
actions: {
setSourceWalletType(data: any) {
this.sourceWalletType = data
},
},
})
+182 -286
View File
@@ -4,22 +4,170 @@ import isDevEnv from "./isDevEnv"
import { router, constant } from "@@/index"
import { userApi } from "../api"
// 定义常量
// 常量定义
const TOKEN_KEY = constant.storageConstant.TOKEN
const USER_INFO_KEY = constant.storageConstant.USERINFO
// Loading 管理
const LoadingInstance: { target: any; count: number } = {
// Loading 状态管理
const LoadingInstance = {
target: null,
count: 0,
}
// 关闭 loading
// 关闭加载提示
function closeLoading() {
if (LoadingInstance.count > 0) LoadingInstance.count--
if (LoadingInstance.count === 0) uni.hideLoading()
}
// 显示加载提示
function showLoading(message: string) {
LoadingInstance.count++
if (LoadingInstance.count === 1) {
uni.showLoading({
title: message,
mask: true,
fail: () => uni.hideLoading(),
})
}
}
// 读取token并处理Authorization请求头
const getAuthHeader = (tokenStorage: any) => {
if (isDevEnv()) {
return tokenStorage?.access_token ? `Bearer ${tokenStorage.access_token}` : null
}
return tokenStorage?.accessToken?.tokenValue ? `Bearer ${tokenStorage.accessToken.tokenValue}` : null
}
// 浙政钉登录 登录成功返回true,否则返回false
async function handleZzdLogin(): Promise<boolean> {
try {
uni.showLoading({ title: "加载中...", mask: true })
const params = new URL(window.location.href).searchParams
const token = params.get("uabaseToken")
if (!token) return false
const res = await userApi.auth(token)
if (res?.code === 0) {
uni.setStorageSync(TOKEN_KEY, res.data)
const { data: userData } = await userApi.userInfo()
uni.setStorageSync(USER_INFO_KEY, userData)
return true
} else {
uni.removeStorageSync(TOKEN_KEY)
uni.removeStorageSync(USER_INFO_KEY)
uni.showToast({ title: res.msg || "登录失败", icon: "none" })
return false
}
} catch (error) {
uni.showToast({ title: "登录错误", icon: "none" })
return false
} finally {
uni.hideLoading()
}
}
// 诗画登录 登录成功返回true,否则返回false
async function handleShLogin(): Promise<boolean> {
try {
uni.showLoading({ title: "登录中...", mask: true })
const userInfo = await (window as any).CP2.getUserInfo()
if (userInfo.code == 0) {
uni.showToast({ title: "获取诗画用户信息失败", icon: "none" })
return false
}
const { accountId, sessionId } = userInfo.data
const response = await userApi.authsh({ accountId, sessionId })
if (response.code == 0) {
uni.setStorageSync(TOKEN_KEY, { accessToken: response.data.accessToken })
const { data: userData } = await userApi.userInfo()
uni.setStorageSync(USER_INFO_KEY, userData)
uni.showToast({ title: "登录成功", icon: "none" })
return true
} else {
uni.showToast({ title: "获取用户信息失败", icon: "none" })
return false
}
} catch (error) {
uni.showToast({ title: "登录错误", icon: "none" })
return false
} finally {
uni.hideLoading()
}
}
// 根据应用环境自动登录 返回登录结果
async function autoLogin(): Promise<boolean> {
const appInfo = await (window as any).CP2.getAppInfo()
// 浙政钉环境
if (appInfo.code == 0) {
return await handleZzdLogin()
}
// 诗画环境
else {
return await handleShLogin()
}
}
// token过期刷新检查
async function checkAndRefreshToken(tokenStorage: any) {
const { accessToken } = tokenStorage
if (!accessToken) return
const expiresDate = new Date(accessToken.expiresAt).getTime()
// console.log("过期时间", expiresDate)
// console.log("现在时间", new Date().getTime())
// console.log("现在时间大于过期时间吗", new Date().getTime() >= expiresDate)
// token已过期,尝试刷新
if (new Date().getTime() >= expiresDate) {
await autoLogin()
}
}
// 处理错误响应
function handleErrorResponse(response: any) {
if (!response.config?.custom?.showError) return
switch (response.data.code) {
case 401:
// 处理未授权情况
setTimeout(() => {
uni.removeStorageSync(TOKEN_KEY)
uni.removeStorageSync(USER_INFO_KEY)
}, 500)
break
case 424:
// 处理token过期
autoLogin()
break
default:
uni.showToast({
title: response.data.msg || "服务器开小差啦,请稍后再试~",
icon: "none",
mask: true,
})
}
}
// 处理成功提示
function handleSuccessMessage(response: any) {
const { data, config } = response
if (data.code === 0 && data.message && config?.custom?.showSuccess) {
uni.showToast({
title: config.custom.successMsg || data.message,
icon: "none",
})
}
}
// 创建请求实例
const http = new Request({
baseURL: import.meta.env.VITE_API_URL,
@@ -31,88 +179,16 @@ const http = new Request({
},
withCredentials: true,
custom: {
showSuccess: false,
// 成功提醒 默认使用后端返回值
successMsg: "",
// 显示失败消息 默认显示
showError: true,
// 失败提醒 默认使用后端返回信息
errorMsg: "",
// 显示请求时loading模态框 默认显示
showLoading: true,
// loading提醒文字
loadingMsg: "加载中",
// 需要授权才能请求 默认放开
auth: false,
showSuccess: false, // 成功提醒 默认使用后端返回值
successMsg: "", // 成功消息
showError: true, // 显示失败消息 默认显示
errorMsg: "", // 失败提醒 默认使用后端返回信息
showLoading: true, // 显示请求时loading模态框 默认显示
loadingMsg: "加载中", // loading提醒文字
auth: false, // 需要授权才能请求 默认放开
},
})
// 读取token 处理Authorization请求头
const getAuthHeader = (tokenStorage: any) => {
if (isDevEnv()) {
return tokenStorage?.access_token ? `Bearer ${tokenStorage.access_token}` : null
}
return tokenStorage?.accessToken?.tokenValue ? `Bearer ${tokenStorage.accessToken.tokenValue}` : null
}
// token过期刷新检查
const checkAndRefreshToken = async (tokenStorage: any) => {
const { accessToken } = tokenStorage
if (!accessToken) return
const expiresDate = new Date(accessToken.expiresAt).getTime()
// console.log("现在的时间大于过期时间吗:", new Date().getTime() >= expiresDate)
if (new Date().getTime() >= expiresDate) {
const appInfo = await (window as any).CP2.getAppInfo()
if (appInfo.code == 0) {
try {
uni.showLoading({ title: "加载中...", mask: true })
const params = new URL(window.location.href).searchParams
const token = params.get("uabaseToken")
if (token) {
const res = await userApi.auth(token)
if (res?.code === 0) {
uni.setStorageSync(TOKEN_KEY, res.data)
} else {
uni.removeStorageSync(TOKEN_KEY)
uni.removeStorageSync(USER_INFO_KEY)
uni.showToast({ title: res.msg, icon: "none" })
}
}
} catch (error) {
uni.showToast({ title: "错误", icon: "none" })
} finally {
uni.hideLoading()
}
} else {
// 诗画
try {
uni.showLoading({ title: "登录中...", mask: true })
const userInfo = await (window as any).CP2.getUserInfo()
if (userInfo.code == 0) {
return uni.showToast({ title: "获取诗画用户信息失败", icon: "none" })
} else {
const { accountId, sessionId } = userInfo.data
const response = await userApi.authsh({ accountId, sessionId })
if (response.code == 0) {
uni.setStorageSync(TOKEN_KEY, { accessToken: response.data.accessToken })
uni.showToast({ title: "登录成功", icon: "none" })
const { data: userData } = await userApi.userInfo()
uni.setStorageSync(USER_INFO_KEY, userData)
} else {
uni.showToast({ title: "获取用户信息失败", icon: "none" })
}
}
} catch (error) {
uni.showToast({ title: "错误", icon: "none" })
} finally {
uni.hideLoading()
}
}
}
}
// 请求拦截器
http.interceptors.request.use(async (config) => {
const tokenStorage = uni.getStorageSync(TOKEN_KEY)
@@ -126,25 +202,19 @@ http.interceptors.request.use(async (config) => {
// 处理 loading
if (config.custom?.showLoading) {
LoadingInstance.count++
if (LoadingInstance.count === 1) {
uni.showLoading({
title: config.custom.loadingMsg,
mask: true,
fail: () => uni.hideLoading(),
})
}
showLoading(config.custom.loadingMsg)
}
// 设置认证头
if (
!config.url?.startsWith("/thirdparty/thirdPartyOAth2") &&
config.url !== "/sys/auth/refresh-token" &&
config.url !== "/auth/oauth2/token"
) {
// 不需要设置认证头的接口
const skipAuthUrls = ["/thirdparty/thirdPartyOAth2", "/sys/auth/refresh-token", "/auth/oauth2/token"]
// 判断是否需要设置认证头
const needAuth = !skipAuthUrls.some((url) => config.url?.startsWith(url))
if (needAuth) {
if (!isEmpty(tokenStorage)) {
// token过期刷新检查
checkAndRefreshToken(tokenStorage)
await checkAndRefreshToken(tokenStorage)
const authHeader = getAuthHeader(tokenStorage)
if (authHeader) {
@@ -152,57 +222,13 @@ http.interceptors.request.use(async (config) => {
}
} else {
// token不存在,则发起登录
const appInfo = await (window as any).CP2.getAppInfo()
if (appInfo.code == 0) {
// 浙政钉
const params = new URL(window.location.href).searchParams
const token = params.get("uabaseToken")
if (token) {
try {
uni.showLoading({ title: "加载中...", mask: true })
const res = await userApi.auth(token)
if (res.code == 0) {
uni.setStorageSync(TOKEN_KEY, res.data)
const { data: userData } = await userApi.userInfo()
uni.setStorageSync(USER_INFO_KEY, userData)
await autoLogin()
const authHeader = getAuthHeader(tokenStorage)
if (authHeader) {
config_header.Authorization = authHeader
}
} else {
uni.showToast({ title: "获取浙政钉用户信息失败", icon: "none" })
}
} catch (error) {
uni.showToast({ title: "错误", icon: "none" })
} finally {
uni.hideLoading()
}
}
} else {
// 诗画
try {
uni.showLoading({ title: "登录中...", mask: true })
const userInfo = await (window as any).CP2.getUserInfo()
if (userInfo.code == 0) {
return uni.showToast({ title: "获取诗画用户信息失败", icon: "none" })
} else {
const { accountId, sessionId } = userInfo.data
const response = await userApi.authsh({ accountId, sessionId })
if (response.code == 0) {
uni.setStorageSync(TOKEN_KEY, { accessToken: response.data.accessToken })
uni.showToast({ title: "登录成功", icon: "none" })
const { data: userData } = await userApi.userInfo()
uni.setStorageSync(USER_INFO_KEY, userData)
} else {
uni.showToast({ title: "获取用户信息失败", icon: "none" })
}
}
} catch (error) {
uni.showToast({ title: "错误", icon: "none" })
} finally {
uni.hideLoading()
}
// 登录后重新获取token
const newTokenStorage = uni.getStorageSync(TOKEN_KEY)
const authHeader = getAuthHeader(newTokenStorage)
if (authHeader) {
config_header.Authorization = authHeader
}
}
}
@@ -210,91 +236,6 @@ http.interceptors.request.use(async (config) => {
return config
}, Promise.reject)
// 处理错误响应
const handleErrorResponse = async (response: any) => {
if (!response.config?.custom?.showError) return
switch (response.data.code) {
case 401:
// 处理未授权情况
setTimeout(() => {
uni.removeStorageSync(TOKEN_KEY)
uni.removeStorageSync(USER_INFO_KEY)
// console.log("未授权")
}, 500)
break
case 424:
const appInfo = await (window as any).CP2.getAppInfo()
if (appInfo.code == 0) {
try {
const params = new URL(window.location.href).searchParams
const token = params.get("uabaseToken")
if (token) {
userApi.auth(token).then((res) => {
if (res?.code === 0) {
uni.setStorageSync(TOKEN_KEY, res.data)
} else {
uni.removeStorageSync(TOKEN_KEY)
uni.removeStorageSync(USER_INFO_KEY)
// uni.showToast({ title: "登录已过期", icon: "none" })
return Promise.resolve({
code: 1,
data: "登录已过期",
msg: "登录已过期",
})
}
})
}
} catch (error) {
uni.hideLoading()
uni.showToast({ title: "错误", icon: "none" })
}
} else {
// 诗画
try {
uni.showLoading({ title: "登录中...", mask: true })
const userInfo = await (window as any).CP2.getUserInfo()
if (userInfo.code == 0) {
return uni.showToast({ title: "获取诗画用户信息失败", icon: "none" })
} else {
const { accountId, sessionId } = userInfo.data
const response = await userApi.authsh({ accountId, sessionId })
if (response.code == 0) {
uni.setStorageSync(TOKEN_KEY, { accessToken: response.data.accessToken })
uni.showToast({ title: "登录成功", icon: "none" })
const { data: userData } = await userApi.userInfo()
uni.setStorageSync(USER_INFO_KEY, userData)
} else {
uni.showToast({ title: "获取用户信息失败", icon: "none" })
}
}
} catch (error) {
uni.showToast({ title: "错误", icon: "none" })
} finally {
uni.hideLoading()
}
}
break
default:
uni.showToast({
title: response.data.msg || "服务器开小差啦,请稍后再试~",
icon: "none",
mask: true,
})
}
}
// 处理成功提示
const handleSuccessMessage = (response: any) => {
const { data, config } = response
if (data.code === 0 && data.message && config?.custom?.showSuccess) {
uni.showToast({
title: config.custom.successMsg || data.message,
icon: "none",
})
}
}
// 响应拦截器
http.interceptors.response.use(
async (response) => {
@@ -324,6 +265,11 @@ http.interceptors.response.use(
return Promise.resolve(response.data)
},
async (error) => {
// 处理 loading
if (error.config?.custom?.showLoading) {
closeLoading()
}
// 处理 424 错误(token过期)
if (error.statusCode === 424) {
if (isDevEnv()) {
@@ -334,58 +280,7 @@ http.interceptors.response.use(
router.jump("/pages/test/login")
return false
} else {
const appInfo = await (window as any).CP2.getAppInfo()
if (appInfo.code == 0) {
try {
uni.showLoading({ title: "加载中...", mask: true })
const params = new URL(window.location.href).searchParams
const token = params.get("uabaseToken")
if (token) {
userApi.auth(token).then((res) => {
if (res?.code === 0) {
uni.setStorageSync(TOKEN_KEY, res.data)
} else {
uni.removeStorageSync(TOKEN_KEY)
uni.removeStorageSync(USER_INFO_KEY)
// uni.showToast({ title: "登录已过期", icon: "none" })
return Promise.resolve({
code: 1,
data: "登录已过期",
msg: "登录已过期",
})
}
})
}
} catch (error) {
uni.showToast({ title: "错误", icon: "none" })
} finally {
uni.hideLoading()
}
} else {
// 诗画
try {
uni.showLoading({ title: "登录中...", mask: true })
const userInfo = await (window as any).CP2.getUserInfo()
if (userInfo.code == 0) {
return uni.showToast({ title: "获取诗画用户信息失败", icon: "none" })
} else {
const { accountId, sessionId } = userInfo.data
const response = await userApi.authsh({ accountId, sessionId })
if (response.code == 0) {
uni.setStorageSync(TOKEN_KEY, { accessToken: response.data.accessToken })
uni.showToast({ title: "登录成功", icon: "none" })
const { data: userData } = await userApi.userInfo()
uni.setStorageSync(USER_INFO_KEY, userData)
} else {
uni.showToast({ title: "获取用户信息失败", icon: "none" })
}
}
} catch (error) {
uni.showToast({ title: "错误", icon: "none" })
} finally {
uni.hideLoading()
}
}
await autoLogin()
}
}
@@ -397,10 +292,11 @@ http.interceptors.response.use(
mask: true,
})
}
return false
return Promise.resolve(error.data)
},
)
// 请求函数
const request = (config: any) => {
return http.middleware(config)
}
+1
View File
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1743643959336" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2508" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="64"><path d="M334.08 192a47.36 47.36 0 0 0 0 64l256 256-256 256a47.36 47.36 0 1 0 64 64l288.64-288.64A50.56 50.56 0 0 0 704 512a47.36 47.36 0 0 0-14.08-33.28L401.28 192a47.36 47.36 0 0 0-67.2 0z" p-id="2509" fill="#C5BFBF"></path></svg>

After

Width:  |  Height:  |  Size: 554 B

+26
View File
@@ -0,0 +1,26 @@
<svg
t="1742457305987"
class="icon"
viewBox="0 0 1024 1024"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
p-id="4499"
width="24"
height="24"
>
<path
d="M897.706667 831.146667H286.72c-8.533333 0-15.36-3.413333-20.48-10.24L39.253333 527.36c-6.826667-8.533333-6.826667-22.186667 0-30.72l226.986667-293.546667c5.12-6.826667 11.946667-10.24 20.48-10.24h610.986667c51.2 0 92.16 40.96 92.16 92.16v453.973334c0 51.2-40.96 92.16-92.16 92.16z m-599.04-51.2h599.04c22.186667 0 40.96-18.773333 40.96-40.96V285.013333c0-22.186667-18.773333-40.96-40.96-40.96H298.666667L92.16 512l206.506667 267.946667z"
fill="#333333"
p-id="4500"
></path>
<path
d="M670.72 650.24c-6.826667 0-13.653333-1.706667-18.773333-6.826667L426.666667 416.426667c-10.24-10.24-10.24-25.6 0-35.84 10.24-10.24 25.6-10.24 35.84 0l226.986666 226.986666c10.24 10.24 10.24 25.6 0 35.84-6.826667 5.12-11.946667 6.826667-18.773333 6.826667z"
fill="#333333"
p-id="4501"
></path>
<path
d="M443.733333 650.24c-6.826667 0-13.653333-1.706667-18.773333-6.826667-10.24-10.24-10.24-25.6 0-35.84l226.986667-226.986666c10.24-10.24 25.6-10.24 35.84 0 10.24 10.24 10.24 25.6 0 35.84L462.506667 643.413333c-5.12 5.12-11.946667 6.826667-18.773334 6.826667z"
fill="#333333"
p-id="4502"
></path>
</svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1743596095932" class="icon" viewBox="0 0 1042 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7038" width="65.125" height="64" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M515.657143 54.857143c-252.342857 0-457.142857 204.8-457.142857 457.142857s204.8 457.142857 457.142857 457.142857 457.142857-204.8 457.142857-457.142857S768 54.857143 515.657143 54.857143z m182.857143 442.514286h-146.285715v36.571428h146.285715v73.142857h-146.285715v109.714286h-73.142857v-109.714286h-146.285714v-73.142857h146.285714v-36.571428h-146.285714v-73.142858h91.428571l-65.828571-65.828571 51.2-51.2 104.228571 104.228571 104.228572-104.228571 51.2 51.2-65.828572 65.828571h91.428572v73.142858h3.657143z" fill="#0779FD" p-id="7039"></path></svg>

After

Width:  |  Height:  |  Size: 890 B

@@ -1,74 +1,89 @@
<template>
<!-- @vue-ignore -->
<view @click="onclick" :hover-start-time="_isLinksHover ? 50 : 0" :hover-stay-time="_isLinksHover ? 100 : 0"
:hover-class="_isLinksHover ? 'cellHover' : ''" class="tmCell "
:class="[_allAttr.card == true ? 'cellCard' : 'cardInset']" :style="{
backgroundColor: _color,
borderRadius: _cardRadius,
minHeight: _minHeight,
borderBottom: _allAttr.bottom && !_allAttr.card && !bottomBorderInsert ? `1px solid ${_bottomBorderColor}` : 'none',
padding: `0px ${_lrPadding}`
}">
<view v-if="_icon != ''" class="tmCellAvatar"
:style="{ width: _leftSize, height: _leftSize, borderRadius: _avatarRound }">
<!--
<!-- @vue-ignore -->
<view
@click="onclick"
:hover-start-time="_isLinksHover ? 50 : 0"
:hover-stay-time="_isLinksHover ? 100 : 0"
:hover-class="_isLinksHover ? 'cellHover' : ''"
class="tmCell"
:class="[_allAttr.card == true ? 'cellCard' : 'cardInset']"
:style="{
backgroundColor: _color,
borderRadius: _cardRadius,
minHeight: _minHeight,
borderBottom: _allAttr.bottom && !_allAttr.card && !bottomBorderInsert ? `1px solid ${_bottomBorderColor}` : 'none',
padding: `0px ${_lrPadding}`,
}"
>
<view v-if="_icon != ''" class="tmCellAvatar" :style="{ width: _leftSize, height: _leftSize, borderRadius: _avatarRound }">
<!--
@slot 头像图标
@binding {string} icon 图标名称
-->
<slot name="avatar" :icon="_icon">
<tm-icon :color="_allAttr.iconColor" :size="_iconSize" :name="_icon"></tm-icon>
</slot>
</view>
<slot name="avatar" :icon="_icon">
<tm-icon :color="_allAttr.iconColor" :size="_iconSize" :name="_icon"></tm-icon>
</slot>
</view>
<view class="tmCellWrap" :style="{
padding: `${_tbPadding} 0px `,
borderBottom: _allAttr.bottom && !_allAttr.card && bottomBorderInsert ? `1px solid ${_bottomBorderColor}` : 'none'
}">
<view class="center">
<!--
<view
class="tmCellWrap"
:style="{
padding: `${_tbPadding} 0px `,
borderBottom: _allAttr.bottom && !_allAttr.card && bottomBorderInsert ? `1px solid ${_bottomBorderColor}` : 'none',
}"
>
<view class="center">
<!--
@slot 默认标题插槽
-->
<slot>
<text class="title" :style="{ color: _titleColor, fontSize: _titleSize }">{{ _allAttr.title
}}</text>
</slot>
<!--
<slot>
<text class="title" :style="{ color: _titleColor, fontSize: _titleSize }">{{ _allAttr.title }}</text>
</slot>
<!--
@slot 简介
@binding {string} desc 简介
-->
<slot name="desc" :desc="_allAttr.desc">
<tm-text v-if="_allAttr.desc != ''" size="28" color='#bfbfbf' dark-color='#bfbfbf' class="desc">{{
_allAttr.desc }}</tm-text>
</slot>
</view>
<view class="tmCellRight">
<!--
<slot name="desc" :desc="_allAttr.desc">
<tm-text v-if="_allAttr.desc != ''" size="28" color="#bfbfbf" dark-color="#bfbfbf" class="desc">{{ _allAttr.desc }}</tm-text>
</slot>
</view>
<view class="tmCellRight">
<!--
@slot 右边文字
@binding {string} label 标签内容
-->
<slot name="label" :label="_allAttr.label">
<text v-if="_allAttr.label != ''" :style="{ color: _allAttr.labelColor, fontSize: _rightLableSize }"
class="rightLabel">{{ _allAttr.label }}</text>
</slot>
<!--
<slot name="label" :label="_allAttr.label">
<text v-if="_allAttr.label != ''" :style="{ color: _allAttr.labelColor, fontSize: _rightLableSize }" class="rightLabel">{{
_allAttr.label
}}</text>
</slot>
<!--
@slot 右插槽
-->
<slot name="right"></slot>
<tm-icon v-if="_allAttr.url != '' || _allAttr.link" color="#bfbfbf" size="36" :name="attrs.linkIcon"
_style="paddingLeft:12rpx"></tm-icon>
</view>
</view>
</view>
<slot name="right"></slot>
<tm-icon
v-if="_allAttr.url != '' || _allAttr.link"
color="#bfbfbf"
size="36"
:name="attrs.linkIcon"
_style="paddingLeft:12rpx"
></tm-icon>
</view>
</view>
</view>
</template>
<script lang="ts" setup>
import { computed, ref, onMounted, PropType } from "vue"
import { arrayNumberValid, arrayNumberValidByStyleMP, covetUniNumber, arrayNumberValidByStyleBorderColor, linearValid, getUnit } from "../../libs/tool";
import { getDefaultColor, getDefaultColorObj, getOutlineColorObj, getTextColorObj, getThinColorObj } from "../../libs/colors";
import { useTmConfig } from "../../libs/config";
import { computed, ref, onMounted } from "vue"
import {
arrayNumberValid,
arrayNumberValidByStyleMP,
covetUniNumber,
arrayNumberValidByStyleBorderColor,
linearValid,
getUnit,
} from "../../libs/tool"
import { getDefaultColor, getDefaultColorObj, getOutlineColorObj, getTextColorObj, getThinColorObj } from "../../libs/colors"
import { useTmConfig } from "../../libs/config"
/**
* @displayName 列表
* @exportName tm-cell
@@ -79,233 +94,231 @@ import { useTmConfig } from "../../libs/config";
| --- | --- | --- | --- |
| ☑️| ☑️ | ☑️ | ☑️ | ☑️ | 1.0.0 |
*/
defineOptions({ name: 'TmCell' });
defineOptions({ name: "TmCell" })
const { config } = useTmConfig()
type tmCellItemType = {
icon: string,
title: string,
desc: string,
label: string,
bottom: boolean,
link: boolean,
url: string,
iconColor: string,
labelColor: string,
card: boolean
icon: string
title: string
desc: string
label: string
bottom: boolean
link: boolean
url: string
iconColor: string
labelColor: string
card: boolean
}
const emits = defineEmits(
[
/**
* 项目点击
*/
"click"
]
)
const emits = defineEmits([
/**
* 项目点击
*/
"click",
])
const attrs = defineProps({
/**
* 左图标
*/
icon: {
type: String,
default: ""
},
/**
* 左侧图标、头像圆角。默认为8
*/
avatarRound: {
type: String,
default: "8"
},
/**
* 背景的主题色
*/
color: {
type: String,
default: 'white'
},
/**
* 暗黑背景的主题色,空值时取sheetDarkColor
*/
darkColor: {
type: String,
default: ''
},
/**
* 图标色,空值时取全局主题值。
*/
iconColor: {
type: String,
default: ""
},
/**
* 标题
*/
title: {
type: String,
default: "标题"
},
/**
* 标题颜色
*/
titleColor: {
type: String,
default: "black"
},
/**
* 暗黑标题颜色,如果不填写取白
*/
darkTitleColor: {
type: String,
default: "white"
},
/**
* 标题大小
*/
titleSize: {
type: [String, Number],
default: "32"
},
/**
* 左边图标大小
*/
iconSize: {
type: [String, Number],
default: "42"
},
/**
* 右边文本
*/
label: {
type: String,
default: ""
},
/**
* 右边文本颜色
*/
labelColor: {
type: String,
default: "#bfbfbf"
},
/**
* 右侧label文字大小
*/
labelSize: {
type: [String, Number],
default: "24"
},
/**
* 标题正文的简介文本
*/
desc: {
type: String,
default: ""
},
/**
* 是否显示下边线
*/
showBottomBorder: {
type: Boolean,
default: true
},
/**
* 是否让下边线显示居右,不贯穿到左边。
*/
bottomBorderInsert: {
type: Boolean,
default: false
},
/**
* 下边线的颜色。如果你设定了的话。
* 暗黑的边颜色失效,采用你自定的颜色。
*/
bottomBorderColor: {
type: String,
default: ""
},
/**
* 是否显示链接状态,有点按效果。包括出现右边跳转指示。
* 关闭的话,事件反应和跳转会更快。
* 如果true右侧箭头图标会显示
*/
link: {
type: Boolean,
default: true
},
/**
* 需要跳转的页面地址。
* 如果填写了右侧箭头图标会显示
*/
url: {
type: String,
default: ""
},
openType: {
type: String as PropType<"navigate" | "redirect" | "switchTab" | "reLaunch" | "navigateBack" | "exit">,
default: "navigate"
},
/**
* 是否是卡片模式
*/
card: {
type: Boolean,
default: true
},
/**
* 卡片模式圆角,不填写采用全局的cardRadius属性值.
*/
round: {
type: [String, Number],
default: ""
},
/**
* 左边图标区域宽和高的大小。
*/
leftSize: {
type: [String, Number],
default: '60'
},
/**
* 最小高度,主要是用来统一风格高度不至于让点击范围过小
* 如果你需要紧凑型可以设置为auto
*/
minHeight: {
type: [String, Number],
default: "88"
},
/**
* 左右的间隙。
*/
lrPadding: {
type: [String, Number],
default: "32"
},
linkIcon: {
type: String,
default: "arrow-right-s-line"
},
/**
* 上下间隙
*/
tbPadding: {
type: [String, Number],
default: "32"
}
/**
* 左图标
*/
icon: {
type: String,
default: "",
},
/**
* 左侧图标、头像圆角。默认为8
*/
avatarRound: {
type: String,
default: "8",
},
/**
* 背景的主题色
*/
color: {
type: String,
default: "white",
},
/**
* 暗黑背景的主题色,空值时取sheetDarkColor
*/
darkColor: {
type: String,
default: "",
},
/**
* 图标色,空值时取全局主题值。
*/
iconColor: {
type: String,
default: "",
},
/**
* 标题
*/
title: {
type: String,
default: "标题",
},
/**
* 标题颜色
*/
titleColor: {
type: String,
default: "black",
},
/**
* 暗黑标题颜色,如果不填写取白
*/
darkTitleColor: {
type: String,
default: "white",
},
/**
* 标题大小
*/
titleSize: {
type: [String, Number],
default: "32",
},
/**
* 左边图标大小
*/
iconSize: {
type: [String, Number],
default: "42",
},
/**
* 右边文本
*/
label: {
type: String,
default: "",
},
/**
* 右边文本颜色
*/
labelColor: {
type: String,
default: "#bfbfbf",
},
/**
* 右侧label文字大小
*/
labelSize: {
type: [String, Number],
default: "24",
},
/**
* 标题正文的简介文本
*/
desc: {
type: String,
default: "",
},
/**
* 是否显示下边线
*/
showBottomBorder: {
type: Boolean,
default: true,
},
/**
* 是否让下边线显示居右,不贯穿到左边。
*/
bottomBorderInsert: {
type: Boolean,
default: false,
},
/**
* 下边线的颜色。如果你设定了的话。
* 暗黑的边颜色失效,采用你自定的颜色。
*/
bottomBorderColor: {
type: String,
default: "",
},
/**
* 是否显示链接状态,有点按效果。包括出现右边跳转指示。
* 关闭的话,事件反应和跳转会更快。
* 如果true右侧箭头图标会显示
*/
link: {
type: Boolean,
default: true,
},
/**
* 需要跳转的页面地址。
* 如果填写了右侧箭头图标会显示
*/
url: {
type: String,
default: "",
},
openType: {
type: String,
default: "navigate",
},
/**
* 是否是卡片模式
*/
card: {
type: Boolean,
default: true,
},
/**
* 卡片模式圆角,不填写采用全局的cardRadius属性值.
*/
round: {
type: [String, Number],
default: "",
},
/**
* 左边图标区域宽和高的大小。
*/
leftSize: {
type: [String, Number],
default: "60",
},
/**
* 最小高度,主要是用来统一风格高度不至于让点击范围过小
* 如果你需要紧凑型可以设置为auto
*/
minHeight: {
type: [String, Number],
default: "88",
},
/**
* 左右的间隙。
*/
lrPadding: {
type: [String, Number],
default: "32",
},
linkIcon: {
type: String,
default: "arrow-right-s-line",
},
/**
* 上下间隙
*/
tbPadding: {
type: [String, Number],
default: "32",
},
})
const _color = computed(() => {
if (config.mode === 'dark') {
if (attrs.darkColor !== '') return getDefaultColor(attrs.darkColor)
return getDefaultColor(config.sheetDarkColor)
}
return getDefaultColor(attrs.color)
if (config.mode === "dark") {
if (attrs.darkColor !== "") return getDefaultColor(attrs.darkColor)
return getDefaultColor(config.sheetDarkColor)
}
return getDefaultColor(attrs.color)
})
const _titleColor = computed(() => {
if (config.mode === 'dark') {
if (attrs.darkTitleColor !== '') return getDefaultColor(attrs.darkTitleColor)
return '#ffffff'
}
return getDefaultColor(attrs.titleColor)
if (config.mode === "dark") {
if (attrs.darkTitleColor !== "") return getDefaultColor(attrs.darkTitleColor)
return "#ffffff"
}
return getDefaultColor(attrs.titleColor)
})
const _leftSize = computed(() => covetUniNumber(attrs.leftSize))
@@ -317,189 +330,183 @@ const _avatarRound = computed(() => covetUniNumber(attrs.avatarRound))
const _minHeight = computed(() => covetUniNumber(attrs.minHeight))
const _bottomBorderColor = computed(() => {
if (attrs.bottomBorderColor !== '') return getDefaultColor(attrs.bottomBorderColor)
if (config.mode === 'dark') return config.borderDarkColor
return "#f5f5f5"
if (attrs.bottomBorderColor !== "") return getDefaultColor(attrs.bottomBorderColor)
if (config.mode === "dark") return config.borderDarkColor
return "#f5f5f5"
})
const icon = ref('')
const icon = ref("")
const _allAttr = computed(() => {
let iconColor = attrs.iconColor;
if (iconColor === '') {
iconColor = config.color;
}
let p = {
icon: icon.value,
title: attrs.title,
desc: attrs.desc,
label: attrs.label,
bottom: attrs.showBottomBorder,
link: attrs.link,
url: attrs.url,
iconColor: getDefaultColor(iconColor),
labelColor: getDefaultColor(attrs.labelColor),
card: attrs.card
} as tmCellItemType
return p
let iconColor = attrs.iconColor
if (iconColor === "") {
iconColor = config.color
}
let p = {
icon: icon.value,
title: attrs.title,
desc: attrs.desc,
label: attrs.label,
bottom: attrs.showBottomBorder,
link: attrs.link,
url: attrs.url,
iconColor: getDefaultColor(iconColor),
labelColor: getDefaultColor(attrs.labelColor),
card: attrs.card,
} as tmCellItemType
return p
})
const _cardRadius = computed(() => {
if (attrs.round === '') return arrayNumberValidByStyleMP(config.cellRadius)
return arrayNumberValidByStyleMP(attrs.round, config.unit)
if (attrs.round === "") return arrayNumberValidByStyleMP(config.cellRadius)
return arrayNumberValidByStyleMP(attrs.round, config.unit)
})
const _titleSize = computed(() => {
let fontSize = covetUniNumber(attrs.titleSize, config.unit);
if (config.fontSizeScale === 1) return fontSize;
let sizeNumber = parseInt(fontSize)
if (isNaN(sizeNumber)) {
sizeNumber = 16
}
return (sizeNumber * config.fontSizeScale).toString() + getUnit(fontSize)
let fontSize = covetUniNumber(attrs.titleSize, config.unit)
if (config.fontSizeScale === 1) return fontSize
let sizeNumber = parseInt(fontSize)
if (isNaN(sizeNumber)) {
sizeNumber = 16
}
return (sizeNumber * config.fontSizeScale).toString() + getUnit(fontSize)
})
const _iconSize = computed(() => {
let fontSize = covetUniNumber(attrs.iconSize, config.unit);
if (config.fontSizeScale === 1) return fontSize;
let sizeNumber = parseInt(fontSize)
if (isNaN(sizeNumber)) {
sizeNumber = 17
}
return (sizeNumber * config.fontSizeScale).toString() + getUnit(fontSize)
let fontSize = covetUniNumber(attrs.iconSize, config.unit)
if (config.fontSizeScale === 1) return fontSize
let sizeNumber = parseInt(fontSize)
if (isNaN(sizeNumber)) {
sizeNumber = 17
}
return (sizeNumber * config.fontSizeScale).toString() + getUnit(fontSize)
})
const _rightLableSize = computed(() => {
let fontSize = covetUniNumber(attrs.labelSize, config.unit);
let fontSize = covetUniNumber(attrs.labelSize, config.unit)
if (config.fontSizeScale === 1) return fontSize;
let sizeNumber = parseInt(fontSize)
if (isNaN(sizeNumber)) {
sizeNumber = 13
}
return (sizeNumber * config.fontSizeScale).toString() + getUnit(fontSize)
if (config.fontSizeScale === 1) return fontSize
let sizeNumber = parseInt(fontSize)
if (isNaN(sizeNumber)) {
sizeNumber = 13
}
return (sizeNumber * config.fontSizeScale).toString() + getUnit(fontSize)
})
const _isLinksHover = computed(() => attrs.link)
const _icon = computed(() => attrs.icon)
const onclick = () => {
/**
* 整个列表被点击
*/
emits("click");
if (attrs.url != "") {
if (attrs.openType == 'navigate') {
uni.navigateTo({
url: attrs.url
})
} else if (attrs.openType == 'navigateBack') {
uni.navigateBack({})
} else if (attrs.openType == 'reLaunch') {
uni.reLaunch({
url: attrs.url
})
} else if (attrs.openType == 'redirect') {
uni.redirectTo({
url: attrs.url
})
} else if (attrs.openType == 'switchTab') {
uni.switchTab({
url: attrs.url
})
}
}
/**
* 整个列表被点击
*/
emits("click")
if (attrs.url != "") {
if (attrs.openType == "navigate") {
uni.navigateTo({
url: attrs.url,
})
} else if (attrs.openType == "navigateBack") {
uni.navigateBack({})
} else if (attrs.openType == "reLaunch") {
uni.reLaunch({
url: attrs.url,
})
} else if (attrs.openType == "redirect") {
uni.redirectTo({
url: attrs.url,
})
} else if (attrs.openType == "switchTab") {
uni.switchTab({
url: attrs.url,
})
}
}
}
</script>
<script lang="ts">
export default {
options: {
styleIsolation: "apply-shared",
virtualHost: true,
addGlobalClass: true,
multipleSlots: true,
},
};
options: {
styleIsolation: "apply-shared",
virtualHost: true,
addGlobalClass: true,
multipleSlots: true,
},
}
</script>
<style scoped lang="scss">
.cellHover {
filter: contrast(90%);
filter: contrast(90%);
}
.tmCell {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.cardInset {
// padding: 0 32rpx;
// padding: 0 32rpx;
}
.cellCard {
// padding: 0 32rpx;
margin-bottom: 12rpx;
margin-left: 24rpx;
margin-right: 24rpx;
// padding: 0 32rpx;
margin-bottom: 12rpx;
margin-left: 24rpx;
margin-right: 24rpx;
}
.tmCellWrap {
flex: 1;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 100%;
// padding: 32rpx 0rpx;
flex: 1;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 100%;
// padding: 32rpx 0rpx;
}
.title {
line-clamp: 2;
display: -webkit-box;
text-overflow: ellipsis;
flex: 1;
line-clamp: 2;
display: -webkit-box;
text-overflow: ellipsis;
flex: 1;
}
.desc {
font-size: 24rpx;
padding-top: 4rpx;
font-size: 24rpx;
padding-top: 4rpx;
}
.tmCellAvatar {
margin-right: 20rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-shrink: 0;
overflow: hidden;
margin-right: 20rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-shrink: 0;
overflow: hidden;
}
.center {
flex: 1;
flex: 1;
}
.tmCellRight {
padding-left: 32rpx;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
padding-left: 32rpx;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
.rightLabel {
line-clamp: 1;
display: -webkit-box;
text-overflow: ellipsis;
font-size: 24rpx;
text-align: right;
max-width: 200rpx;
line-clamp: 1;
display: -webkit-box;
text-overflow: ellipsis;
font-size: 24rpx;
text-align: right;
max-width: 200rpx;
}
</style>
</style>