first commit
2
.gitignore
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
/unpackage
|
||||
unpackage
|
||||
16
.hbuilderx/launch.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{ // launch.json 配置了启动调试时相关设置,configurations下节点名称可为 app-plus/h5/mp-weixin/mp-baidu/mp-alipay/mp-qq/mp-toutiao/mp-360/
|
||||
// launchtype项可配置值为local或remote, local代表前端连本地云函数,remote代表前端连云端云函数
|
||||
"version": "0.0",
|
||||
"configurations": [{
|
||||
"default" :
|
||||
{
|
||||
"launchtype" : "local"
|
||||
},
|
||||
"mp-weixin" :
|
||||
{
|
||||
"launchtype" : "local"
|
||||
},
|
||||
"type" : "uniCloud"
|
||||
}
|
||||
]
|
||||
}
|
||||
68
App.vue
Normal file
@@ -0,0 +1,68 @@
|
||||
<script>
|
||||
import { useUserStore } from "./stores/user";
|
||||
import { userOpenApp } from "./api/auth";
|
||||
|
||||
const openApp = async () => {
|
||||
try {
|
||||
const res = await userOpenApp();
|
||||
if (res?.points && res.points > 0) {
|
||||
uni.showToast({
|
||||
title: `每日登录 +${res.points} 积分`,
|
||||
icon: "none",
|
||||
});
|
||||
}
|
||||
const userStore = useUserStore();
|
||||
await userStore.fetchUserAssets();
|
||||
} catch (e) {
|
||||
console.error("userOpenApp error", e);
|
||||
}
|
||||
};
|
||||
|
||||
export default {
|
||||
onLaunch() {
|
||||
const userStore = useUserStore();
|
||||
userStore.loadFromStorage();
|
||||
if (userStore.userInfo.id) {
|
||||
openApp();
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import url("common/style/common-style.scss");
|
||||
wx-swiper .wx-swiper-dot {
|
||||
position: relative;
|
||||
right: -260rpx;
|
||||
bottom: 110rpx;
|
||||
}
|
||||
/* tabBar */
|
||||
.customtabbar {
|
||||
display: flex;
|
||||
justifycontent: spacearound;
|
||||
alignitems: center;
|
||||
height: 50px;
|
||||
backgroundcolor: #fff;
|
||||
bordertop: 1px solid #ccc;
|
||||
}
|
||||
.customtabbar .item {
|
||||
display: flex;
|
||||
flexdirection: column;
|
||||
alignitems: center;
|
||||
}
|
||||
.customtabbar .item span {
|
||||
fontsize: 12px;
|
||||
color: #999;
|
||||
}
|
||||
.customtabbar .item i {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
// .segmented-control__item--text{
|
||||
// color: #fff !important;
|
||||
// border-top: none;
|
||||
// border-right: none;
|
||||
// border-bottom: none;
|
||||
// border-left: none;
|
||||
// }
|
||||
</style>
|
||||
45
api/auth.js
Normal file
@@ -0,0 +1,45 @@
|
||||
import { request } from "@/utils/request.js";
|
||||
|
||||
export const apiLogin = async (data) => {
|
||||
return request({
|
||||
url: "/api/user/login",
|
||||
method: "POST",
|
||||
data,
|
||||
});
|
||||
};
|
||||
|
||||
export const getUserInfo = async () => {
|
||||
return request({
|
||||
url: "/api/user/info",
|
||||
method: "GET",
|
||||
});
|
||||
};
|
||||
|
||||
export const updateUserInfo = async (body) => {
|
||||
return request({
|
||||
url: "/api/user/info",
|
||||
method: "PUT",
|
||||
data: body,
|
||||
});
|
||||
};
|
||||
|
||||
export const userOpenApp = async () => {
|
||||
return request({
|
||||
url: "/api/user/open-app",
|
||||
method: "POST",
|
||||
});
|
||||
};
|
||||
|
||||
export const getUserAsset = async () => {
|
||||
return request({
|
||||
url: "/api/user/asset",
|
||||
method: "GET",
|
||||
});
|
||||
};
|
||||
|
||||
export const reportPrivacy = async () => {
|
||||
// return request({
|
||||
// url: "/api/common/privacy/report",
|
||||
// method: "POST",
|
||||
// });
|
||||
};
|
||||
40
api/mine.js
Normal file
@@ -0,0 +1,40 @@
|
||||
import { request } from "@/utils/request.js";
|
||||
|
||||
export const sendFeedback = async (data) => {
|
||||
return request({
|
||||
url: "/api/common/feedback",
|
||||
method: "POST",
|
||||
data,
|
||||
});
|
||||
};
|
||||
|
||||
export const getMyCard = async (page = 1) => {
|
||||
return request({
|
||||
url: "/api/blessing/my/card?page=" + page,
|
||||
method: "GET",
|
||||
});
|
||||
};
|
||||
|
||||
export const getMyWallpaper = async (page = 1) => {
|
||||
return request({
|
||||
url: "/api/blessing/my/wallpaper?page=" + page,
|
||||
method: "GET",
|
||||
});
|
||||
};
|
||||
|
||||
export const getMyAvatar = async (page = 1) => {
|
||||
return request({
|
||||
url: "/api/blessing/my/avatar?page=" + page,
|
||||
method: "GET",
|
||||
});
|
||||
};
|
||||
|
||||
export const userAvatarChange = async (imageUrl) => {
|
||||
return request({
|
||||
url: "/api/blessing/user/avatar/change",
|
||||
method: "POST",
|
||||
data: {
|
||||
imageUrl,
|
||||
},
|
||||
});
|
||||
};
|
||||
16
api/pay.js
Normal file
@@ -0,0 +1,16 @@
|
||||
import { request } from "@/utils/request.js";
|
||||
|
||||
export const createOrder = async (data) => {
|
||||
return request({
|
||||
url: "/api/pay/order/v2/create",
|
||||
method: "POST",
|
||||
data,
|
||||
});
|
||||
};
|
||||
|
||||
export const getVipPlan = async () => {
|
||||
return request({
|
||||
url: "/api/blessing/vip/plan",
|
||||
method: "GET",
|
||||
});
|
||||
};
|
||||
85
api/system.js
Normal file
@@ -0,0 +1,85 @@
|
||||
import { request } from "@/utils/request.js";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
|
||||
export const createShareToken = async (data) => {
|
||||
return request({
|
||||
url: "/api/blessing/share/token",
|
||||
method: "POST",
|
||||
data,
|
||||
});
|
||||
};
|
||||
|
||||
export const getShareReward = async (data) => {
|
||||
const res = await request({
|
||||
url: "/api/reward/share",
|
||||
method: "POST",
|
||||
data,
|
||||
});
|
||||
console.log("getShareReward res", res);
|
||||
if (res && res.success) {
|
||||
const userStore = useUserStore();
|
||||
userStore.fetchUserAssets();
|
||||
}
|
||||
return res;
|
||||
};
|
||||
|
||||
export const saveRecord = async (data) => {
|
||||
return request({
|
||||
url: "/api/blessing/save/record",
|
||||
method: "POST",
|
||||
data,
|
||||
});
|
||||
};
|
||||
|
||||
export const viewRecord = async (data) => {
|
||||
return request({
|
||||
url: "/api/blessing/view/record",
|
||||
method: "POST",
|
||||
data,
|
||||
});
|
||||
};
|
||||
|
||||
export const getRecommendList = async (page = 1) => {
|
||||
return request({
|
||||
url: `/api/blessing/recommend/list?page=${page}`,
|
||||
method: "get",
|
||||
});
|
||||
};
|
||||
|
||||
export const msgCheckApi = async (content) => {
|
||||
return request({
|
||||
url: "/api/common/msg-check?content=" + content,
|
||||
method: "get",
|
||||
});
|
||||
};
|
||||
|
||||
export const createTracking = async (data) => {
|
||||
return request({
|
||||
url: "/api/common/tracking/create",
|
||||
method: "POST",
|
||||
data,
|
||||
});
|
||||
};
|
||||
|
||||
export const watchAdReward = async (token, scene, type, resourceId) => {
|
||||
return request({
|
||||
url: "/api/ad/reward",
|
||||
method: "POST",
|
||||
data: {
|
||||
rewardToken: token,
|
||||
scene,
|
||||
type,
|
||||
resourceId,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
export const watchAdStart = async () => {
|
||||
return request({
|
||||
url: "/api/ad/start",
|
||||
method: "POST",
|
||||
data: {
|
||||
adPlacementId: "adunit-d7a28e0357d98947",
|
||||
},
|
||||
});
|
||||
};
|
||||
8
api/user.js
Normal file
@@ -0,0 +1,8 @@
|
||||
import { request } from "@/utils/request.js";
|
||||
|
||||
export const getUserSignInfo = async () => {
|
||||
return request({
|
||||
url: "/api/sign/info",
|
||||
method: "GET",
|
||||
});
|
||||
};
|
||||
BIN
common/images/preview_small.webp
Normal file
|
After Width: | Height: | Size: 6.8 KiB |
10
common/style/base-style.scss
Normal file
@@ -0,0 +1,10 @@
|
||||
$brand-theme-color:#262626; //品牌主体红色
|
||||
|
||||
$border-color:#e0e0e0; //边框颜色
|
||||
$border-color-light:#efefef; //边框亮色
|
||||
|
||||
$text-font-color-1:#000; //文字主色
|
||||
$text-font-color-2:#676767; //副标题颜色
|
||||
$text-font-color-3:#a7a7a7; //浅色
|
||||
$text-font-color-4:#e4e4e4; //更浅
|
||||
$text-color: #B2B2B2
|
||||
8
common/style/common-style.scss
Normal file
@@ -0,0 +1,8 @@
|
||||
view, swiper, swiper-item{
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.pageBg{
|
||||
background: $brand-theme-color;
|
||||
min-height: 80vh;
|
||||
}
|
||||
516
components/LoginPopup/LoginPopup.vue
Normal file
@@ -0,0 +1,516 @@
|
||||
<template>
|
||||
<view>
|
||||
<uni-popup ref="popupRef" type="bottom" :safe-area="false">
|
||||
<view class="popup-container">
|
||||
<view class="drag-handle"></view>
|
||||
<view class="popup-header">
|
||||
<text class="popup-title">授权登录</text>
|
||||
<view class="close-btn" @tap="close">
|
||||
<uni-icons type="closeempty" size="20" color="#999"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="avatar-section">
|
||||
<button
|
||||
open-type="chooseAvatar"
|
||||
@chooseavatar="onChooseAvatar"
|
||||
class="avatar-selector custom-button"
|
||||
>
|
||||
<view class="avatar-wrapper">
|
||||
<image v-if="avatarUrl" :src="avatarUrl" class="avatar-preview" />
|
||||
<image
|
||||
v-else
|
||||
src="/static/images/default-avatar.png"
|
||||
class="avatar-preview"
|
||||
/>
|
||||
<view class="camera-icon">
|
||||
<uni-icons
|
||||
type="camera-filled"
|
||||
size="14"
|
||||
color="#fff"
|
||||
></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
<text class="upload-tip">点击上传头像</text>
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<view class="form-section">
|
||||
<view v-if="isSinglePage" class="single-page-tip">
|
||||
<uni-icons type="info" size="16" color="#ff4d4f"></uni-icons>
|
||||
<text class="tip-text">当前处于预览模式,请前往小程序登录</text>
|
||||
</view>
|
||||
<view class="input-group">
|
||||
<text class="label">昵称</text>
|
||||
<input
|
||||
class="nickname-input"
|
||||
type="nickname"
|
||||
v-model="nickname"
|
||||
placeholder="请输入或点击获取昵称"
|
||||
placeholder-class="placeholder"
|
||||
/>
|
||||
<!-- <text class="get-nickname-btn">获取微信昵称</text> -->
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="action-section">
|
||||
<button class="confirm-btn custom-button" @tap="confirmLogin">
|
||||
{{ isSinglePage ? "前往小程序登录" : "一键登录" }}
|
||||
</button>
|
||||
|
||||
<!-- <view class="agreement-row" @tap="toggleAgreement">
|
||||
<view class="checkbox" :class="{ checked: isAgreed }">
|
||||
<uni-icons
|
||||
v-if="isAgreed"
|
||||
type="checkmarkempty"
|
||||
size="12"
|
||||
color="#fff"
|
||||
></uni-icons>
|
||||
</view>
|
||||
<view class="agreement-text">
|
||||
登录即代表您同意
|
||||
<text class="link" @tap.stop="openAgreement('user')"
|
||||
>《用户协议》</text
|
||||
>
|
||||
及
|
||||
<text class="link" @tap.stop="openAgreement('privacy')"
|
||||
>《隐私政策》</text
|
||||
>
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
<!-- 隐私协议弹窗 -->
|
||||
<PrivacyPopup ref="privacyRef" @agree="onPrivacyAgree" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted } from "vue";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
import { getPlatformProvider, isSinglePageMode } from "@/utils/system";
|
||||
import { uploadImage } from "@/utils/common";
|
||||
import { apiLogin } from "@/api/auth.js";
|
||||
import { wxLogin, alipayLogin } from "@/utils/login.js";
|
||||
import PrivacyPopup from "@/components/PrivacyPopup/PrivacyPopup.vue";
|
||||
|
||||
const popupRef = ref(null);
|
||||
const privacyRef = ref(null);
|
||||
const avatarUrl = ref("");
|
||||
const nickname = ref("");
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
const props = defineProps({
|
||||
shareToken: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["logind"]);
|
||||
|
||||
// 监听全局事件
|
||||
const handleGlobalShow = () => {
|
||||
open();
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
uni.$on("show-login-popup", handleGlobalShow);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
uni.$off("show-login-popup", handleGlobalShow);
|
||||
});
|
||||
|
||||
// 是否处于单页模式(朋友圈打开)
|
||||
const isSinglePage = computed(() => isSinglePageMode());
|
||||
|
||||
const festivalNames = [
|
||||
"春意",
|
||||
"福星",
|
||||
"小福",
|
||||
"新禧",
|
||||
"瑞雪",
|
||||
"花灯",
|
||||
"喜乐",
|
||||
"元宝",
|
||||
"春芽",
|
||||
"年年",
|
||||
"花灯",
|
||||
"月圆",
|
||||
"灯影",
|
||||
"小灯",
|
||||
"星灯",
|
||||
"彩灯",
|
||||
"清风",
|
||||
"微风",
|
||||
"小晴",
|
||||
"碧波",
|
||||
"流泉",
|
||||
"月光",
|
||||
"玉轮",
|
||||
"桂香",
|
||||
"秋叶",
|
||||
"星河",
|
||||
"小月",
|
||||
"露华",
|
||||
"秋水",
|
||||
"雪落",
|
||||
"冰晶",
|
||||
"暖阳",
|
||||
"小雪",
|
||||
"冬影",
|
||||
"雪花",
|
||||
"松影",
|
||||
];
|
||||
|
||||
const getFestivalName = () => {
|
||||
const idx = Math.floor(Math.random() * festivalNames.length);
|
||||
return festivalNames[idx];
|
||||
};
|
||||
|
||||
const open = async () => {
|
||||
// #ifdef MP-ALIPAY
|
||||
handleAlipayLogin();
|
||||
return;
|
||||
// #endif
|
||||
|
||||
// #ifdef MP-WEIXIN
|
||||
const isAgreed = await privacyRef.value.check();
|
||||
if (isAgreed) {
|
||||
popupRef.value.open();
|
||||
}
|
||||
// #endif
|
||||
|
||||
// #ifndef MP-WEIXIN || MP-ALIPAY
|
||||
popupRef.value.open();
|
||||
// #endif
|
||||
};
|
||||
|
||||
const handleAlipayLogin = async () => {
|
||||
try {
|
||||
uni.showLoading({ title: "登录中...", mask: true });
|
||||
const code = await alipayLogin();
|
||||
const imageUrl = avatarUrl.value ? await uploadImage(avatarUrl.value) : "";
|
||||
|
||||
const loginRes = await apiLogin({
|
||||
code,
|
||||
nickname: nickname.value || getFestivalName(),
|
||||
avatarUrl: imageUrl,
|
||||
platform: "alipay",
|
||||
shareToken: props.shareToken,
|
||||
});
|
||||
// 保存用户信息到store
|
||||
userStore.setUserInfo({
|
||||
nickName: loginRes?.user?.nickname || nickname.value || getFestivalName(),
|
||||
avatarUrl: loginRes?.user?.avatar || imageUrl,
|
||||
id: loginRes?.user?.id,
|
||||
isVip: loginRes?.isVip || false,
|
||||
vipExpireAt: loginRes?.vipExpireAt || null,
|
||||
points: loginRes?.points || 0,
|
||||
exp: loginRes?.exp || 0,
|
||||
level: loginRes?.level || 0,
|
||||
});
|
||||
|
||||
userStore.setToken(loginRes.token);
|
||||
|
||||
uni.hideLoading();
|
||||
uni.showToast({ title: "登录成功", icon: "success" });
|
||||
emit("logind");
|
||||
popupRef.value.close();
|
||||
|
||||
// 重置临时变量
|
||||
avatarUrl.value = "";
|
||||
nickname.value = "";
|
||||
} catch (err) {
|
||||
uni.hideLoading();
|
||||
uni.showToast({ title: "登录失败", icon: "none" });
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
|
||||
const onPrivacyAgree = () => {
|
||||
popupRef.value.open();
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
popupRef.value.close();
|
||||
};
|
||||
|
||||
const onChooseAvatar = (e) => {
|
||||
avatarUrl.value = e.detail.avatarUrl;
|
||||
};
|
||||
|
||||
const confirmLogin = async () => {
|
||||
// if (!isAgreed.value) {
|
||||
// uni.showToast({ title: "请先同意用户协议和隐私政策", icon: "none" });
|
||||
// return;
|
||||
// }
|
||||
|
||||
if (isSinglePage.value) {
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "请点击屏幕下方的“前往小程序”按钮,进入完整版体验登录功能",
|
||||
showCancel: false,
|
||||
confirmText: "我知道了",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const platform = getPlatformProvider();
|
||||
|
||||
if (platform === "mp-weixin") {
|
||||
uni.showLoading({ title: "登录中...", mask: true });
|
||||
const code = await wxLogin();
|
||||
const imageUrl = avatarUrl.value
|
||||
? await uploadImage(avatarUrl.value)
|
||||
: "";
|
||||
|
||||
const loginRes = await apiLogin({
|
||||
code,
|
||||
nickname: nickname.value || getFestivalName(),
|
||||
avatarUrl: imageUrl,
|
||||
platform: "wx",
|
||||
shareToken: props.shareToken,
|
||||
});
|
||||
// 保存用户信息到store
|
||||
userStore.setUserInfo({
|
||||
nickName: loginRes?.user?.nickname || nickname.value,
|
||||
avatarUrl: loginRes?.user?.avatar || imageUrl,
|
||||
id: loginRes?.user?.id,
|
||||
isVip: loginRes?.isVip || false,
|
||||
vipExpireAt: loginRes?.vipExpireAt || null,
|
||||
points: loginRes?.points || 0,
|
||||
exp: loginRes?.exp || 0,
|
||||
level: loginRes?.level || 0,
|
||||
});
|
||||
|
||||
userStore.setToken(loginRes.token);
|
||||
uni.hideLoading();
|
||||
uni.showToast({ title: "登录成功", icon: "success" });
|
||||
emit("logind");
|
||||
popupRef.value.close();
|
||||
|
||||
// 重置临时变量
|
||||
avatarUrl.value = "";
|
||||
nickname.value = "";
|
||||
} else if (platform === "mp-alipay") {
|
||||
await handleAlipayLogin();
|
||||
}
|
||||
} catch (err) {
|
||||
uni.showToast({ title: "登录失败", icon: "none" });
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
defineExpose({ open, close });
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.custom-button {
|
||||
border: none;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: normal;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.custom-button::after {
|
||||
border: none;
|
||||
}
|
||||
.popup-container {
|
||||
background-color: #fff;
|
||||
padding: 20rpx 40rpx 60rpx;
|
||||
border-top-left-radius: 48rpx;
|
||||
border-top-right-radius: 48rpx;
|
||||
position: relative;
|
||||
|
||||
.drag-handle {
|
||||
width: 64rpx;
|
||||
height: 8rpx;
|
||||
background: #e5e5e5;
|
||||
border-radius: 4rpx;
|
||||
margin: 0 auto 30rpx;
|
||||
}
|
||||
|
||||
.popup-header {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-bottom: 60rpx;
|
||||
position: relative;
|
||||
|
||||
.popup-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
padding: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-section {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 80rpx;
|
||||
|
||||
.avatar-selector {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.avatar-wrapper {
|
||||
width: 200rpx;
|
||||
height: 200rpx;
|
||||
background: #f5f5f5;
|
||||
border-radius: 50%;
|
||||
position: relative;
|
||||
margin-bottom: 20rpx;
|
||||
border: 4rpx solid #fff;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
|
||||
.avatar-preview {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.camera-icon {
|
||||
position: absolute;
|
||||
right: 10rpx;
|
||||
bottom: 10rpx;
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
background: #ff4d4f;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 4rpx solid #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-tip {
|
||||
font-size: 26rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.form-section {
|
||||
margin-bottom: 80rpx;
|
||||
|
||||
.single-page-tip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fff1f0;
|
||||
border: 1rpx solid #ffccc7;
|
||||
border-radius: 12rpx;
|
||||
padding: 16rpx;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.tip-text {
|
||||
font-size: 24rpx;
|
||||
color: #ff4d4f;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
|
||||
.label {
|
||||
font-size: 30rpx;
|
||||
color: #1a1a1a;
|
||||
font-weight: 500;
|
||||
width: 100rpx;
|
||||
}
|
||||
|
||||
.nickname-input {
|
||||
flex: 1;
|
||||
font-size: 30rpx;
|
||||
color: #1a1a1a;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.get-nickname-btn {
|
||||
font-size: 26rpx;
|
||||
color: #576b95;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.action-section {
|
||||
.confirm-btn {
|
||||
background: #ff4d4f;
|
||||
color: #fff;
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
height: 100rpx;
|
||||
border-radius: 50rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 40rpx;
|
||||
box-shadow: 0 12rpx 24rpx rgba(255, 77, 79, 0.3);
|
||||
|
||||
&:active {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.agreement-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-bottom: 20rpx;
|
||||
|
||||
.checkbox {
|
||||
width: 32rpx;
|
||||
height: 32rpx;
|
||||
border: 2rpx solid #ccc;
|
||||
border-radius: 50%;
|
||||
margin-right: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 0.2s;
|
||||
|
||||
&.checked {
|
||||
background: #ff4d4f;
|
||||
border-color: #ff4d4f;
|
||||
}
|
||||
}
|
||||
|
||||
.agreement-text {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
|
||||
.link {
|
||||
color: #576b95;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
123
components/NavBar/NavBar.vue
Normal file
@@ -0,0 +1,123 @@
|
||||
<template>
|
||||
<view>
|
||||
<!-- Placeholder to occupy space if fixed -->
|
||||
<view
|
||||
v-if="fixed && placeholder && !transparent"
|
||||
class="nav-placeholder"
|
||||
:style="{ height: navBarHeight + 'px' }"
|
||||
></view>
|
||||
|
||||
<!-- Actual Navbar -->
|
||||
<view
|
||||
class="nav-bar"
|
||||
:class="{ fixed: fixed }"
|
||||
:style="{
|
||||
height: navBarHeight + 'px',
|
||||
paddingTop: statusBarHeight + 'px',
|
||||
backgroundColor: transparent ? 'transparent' : background,
|
||||
color: color,
|
||||
boxSizing: 'border-box',
|
||||
}"
|
||||
>
|
||||
<view class="nav-content">
|
||||
<view v-if="back" class="back" @tap="goBack" :style="{ color: color }"
|
||||
>‹</view
|
||||
>
|
||||
<text class="nav-title" :style="{ color: color }">{{ title }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { getTitleBarHeight } from "@/utils/system";
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
default: "#ffffff",
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: "#333333",
|
||||
},
|
||||
back: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
fixed: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
placeholder: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
transparent: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const navBarHeight = ref(64);
|
||||
const statusBarHeight = ref(20);
|
||||
|
||||
onMounted(() => {
|
||||
const systemInfo = uni.getSystemInfoSync();
|
||||
statusBarHeight.value = systemInfo.statusBarHeight || 20;
|
||||
navBarHeight.value = statusBarHeight.value + getTitleBarHeight();
|
||||
});
|
||||
|
||||
const goBack = () => {
|
||||
const pages = getCurrentPages();
|
||||
if (pages.length > 1) {
|
||||
uni.navigateBack();
|
||||
} else {
|
||||
uni.switchTab({ url: "/pages/index/index" });
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.nav-bar {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
z-index: 999;
|
||||
|
||||
&.fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
padding: 0 24rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.back {
|
||||
font-size: 50rpx;
|
||||
margin-right: 24rpx;
|
||||
line-height: 1;
|
||||
padding: 20rpx;
|
||||
margin-left: -20rpx;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
margin-right: 50rpx; /* Balance back button */
|
||||
}
|
||||
</style>
|
||||
208
components/PrivacyPopup/PrivacyPopup.vue
Normal file
@@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<view v-if="show" class="privacy-popup">
|
||||
<view class="mask"></view>
|
||||
<view class="content">
|
||||
<view class="title">用户隐私保护指引</view>
|
||||
<view class="desc">
|
||||
感谢您使用本小程序。在使用前,请您仔细阅读
|
||||
<text class="link" @click="openPrivacyContract">{{
|
||||
privacyContractName
|
||||
}}</text>
|
||||
。当您点击“同意”并开始使用产品服务时,即表示您已理解并同意该条款内容,该条款将对您产生法律约束力。如您拒绝,将无法进入小程序。
|
||||
</view>
|
||||
<view class="btns">
|
||||
<button class="btn refuse" @click="handleDisagree">拒绝</button>
|
||||
<button
|
||||
id="agree-btn"
|
||||
class="btn agree"
|
||||
open-type="agreePrivacyAuthorization"
|
||||
@agreeprivacyauthorization="handleAgree"
|
||||
>
|
||||
同意
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { reportPrivacy } from "@/api/auth.js";
|
||||
|
||||
const show = ref(false);
|
||||
const privacyContractName = ref("《用户隐私保护指引》");
|
||||
|
||||
const emit = defineEmits(["agree"]);
|
||||
let resolveCheck = null;
|
||||
|
||||
const check = () => {
|
||||
// #ifdef MP-WEIXIN
|
||||
return new Promise((resolve) => {
|
||||
if (uni.getPrivacySetting) {
|
||||
uni.getPrivacySetting({
|
||||
success: (res) => {
|
||||
if (res.needAuthorization) {
|
||||
privacyContractName.value =
|
||||
res.privacyContractName || "《用户隐私保护指引》";
|
||||
show.value = true;
|
||||
resolveCheck = resolve;
|
||||
} else {
|
||||
resolve(true);
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.error("getPrivacySetting fail:", err);
|
||||
resolve(true);
|
||||
},
|
||||
});
|
||||
} else {
|
||||
resolve(true);
|
||||
}
|
||||
});
|
||||
// #endif
|
||||
// #ifdef MP-ALIPAY
|
||||
return Promise.resolve(true);
|
||||
// #endif
|
||||
};
|
||||
|
||||
// Only for WeChat Mini Program
|
||||
// #ifdef MP-WEIXIN
|
||||
// onMounted(() => {
|
||||
// check();
|
||||
// });
|
||||
// #endif
|
||||
|
||||
const openPrivacyContract = () => {
|
||||
uni.openPrivacyContract({
|
||||
success: () => {},
|
||||
fail: (err) => {
|
||||
console.error("openPrivacyContract fail", err);
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleAgree = async (e) => {
|
||||
if (!show.value) return; // Prevent double execution
|
||||
console.log("handleAgree triggered", e);
|
||||
// 1. Save to local storage
|
||||
uni.setStorageSync("hasAgreedPrivacy", true);
|
||||
|
||||
// 2. Hide popup
|
||||
show.value = false;
|
||||
|
||||
emit("agree");
|
||||
|
||||
// 3. Resolve the check promise
|
||||
if (resolveCheck) {
|
||||
resolveCheck(true);
|
||||
resolveCheck = null;
|
||||
}
|
||||
|
||||
// 4. Call server API
|
||||
try {
|
||||
await reportPrivacy();
|
||||
} catch (e) {
|
||||
console.error("Report privacy failed", e);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDisagree = () => {
|
||||
// Exit mini program
|
||||
// #ifdef MP-WEIXIN
|
||||
uni.exitMiniProgram({
|
||||
success: () => {
|
||||
console.log("Exit success");
|
||||
},
|
||||
});
|
||||
// #endif
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
check,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.privacy-popup {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
z-index: 9999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.content {
|
||||
position: relative;
|
||||
width: 600rpx;
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 48rpx 40rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-bottom: 32rpx;
|
||||
}
|
||||
|
||||
.desc {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
line-height: 1.6;
|
||||
margin-bottom: 48rpx;
|
||||
text-align: justify;
|
||||
|
||||
.link {
|
||||
color: #576b95;
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
.btns {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
|
||||
.btn {
|
||||
width: 240rpx;
|
||||
height: 88rpx;
|
||||
line-height: 88rpx;
|
||||
text-align: center;
|
||||
border-radius: 12rpx;
|
||||
font-size: 32rpx;
|
||||
font-weight: 500;
|
||||
margin: 0;
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
&.refuse {
|
||||
background: #f2f2f2;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
&.agree {
|
||||
background: #07c160;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
49
components/RewardAd/RewardAd.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<view></view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { watchAdStart } from "@/api/system.js";
|
||||
import adManager from "@/utils/adManager.js";
|
||||
|
||||
const props = defineProps({
|
||||
adUnitId: {
|
||||
type: String,
|
||||
default: "adunit-d7a28e0357d98947",
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(["onReward", "onError", "onClose"]);
|
||||
|
||||
const show = async () => {
|
||||
try {
|
||||
// Step 1: Start Ad Session to get Token
|
||||
const res = await watchAdStart();
|
||||
if (res && res.rewardToken) {
|
||||
const rewardToken = res.rewardToken;
|
||||
|
||||
// Step 2: Show Ad through global AdManager
|
||||
const success = await adManager.showVideoAd(props.adUnitId, rewardToken);
|
||||
|
||||
if (success) {
|
||||
// 延迟 300ms 触发回调,避免和微信小程序的 onShow 页面恢复动画抢占底层渲染线程,导致 insertTextView:fail
|
||||
setTimeout(() => {
|
||||
emit("onReward", rewardToken);
|
||||
}, 300);
|
||||
} else {
|
||||
emit("onClose");
|
||||
}
|
||||
} else {
|
||||
uni.showToast({ title: "广告启动失败,请稍后再试", icon: "none" });
|
||||
emit("onError", new Error("watchAdStart failed"));
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("RewardAd: show failed", e);
|
||||
uni.showToast({ title: "广告启动失败,请稍后再试", icon: "none" });
|
||||
emit("onError", e);
|
||||
}
|
||||
};
|
||||
|
||||
defineExpose({ show });
|
||||
</script>
|
||||
69
components/custom-content/custom-content.vue
Normal file
@@ -0,0 +1,69 @@
|
||||
<template>
|
||||
<view class="contentItem" :style="{background: bgColor, height: height, paddingTop: paddingTopValue }">
|
||||
<view class="topRow" :style="{ '--component-color': textColor }">
|
||||
<view class="title">{{title}}</view>
|
||||
<view class="enTitle">{{enTitle}}</view>
|
||||
</view>
|
||||
|
||||
<view class="content">
|
||||
<slot name="content"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
defineProps({
|
||||
title: { type: String, default: ""},
|
||||
enTitle: { type: String, default: "" },
|
||||
bgColor: { type: String, default: "#262626" },
|
||||
height: { type: String, default: "320rpx" },
|
||||
textColor: { type: String, default: "#B2B2B2" },
|
||||
paddingTopValue: { type: String, default: "0rpx" },
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.contentItem {
|
||||
width: 750rpx;
|
||||
|
||||
.topRow {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 50rpx 0;
|
||||
color: var(--component-color);
|
||||
|
||||
.title {
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
.enTitle {
|
||||
width: 200rpx;
|
||||
font-size: 15rpx;
|
||||
text-align: center;
|
||||
margin-top: 10rpx;
|
||||
position: relative;
|
||||
&::before,
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: calc(50% - 60rpx); // 减去左右 padding 的宽度
|
||||
height: 1rpx;
|
||||
background-color: var(--component-color);
|
||||
transform: translateY(-90%);
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
70
components/layout/layout.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<view class="layout">
|
||||
<custom-nav-bar></custom-nav-bar>
|
||||
<view class="header">
|
||||
<slot name="header"></slot>
|
||||
</view>
|
||||
<view class="main">
|
||||
<slot name="main"></slot>
|
||||
</view>
|
||||
<view class="footer">
|
||||
<footer-loayot></footer-loayot>
|
||||
</view>
|
||||
<view class="float">
|
||||
<!-- #ifdef MP -->
|
||||
<button class="item" open-type="contact">
|
||||
<uni-icons type="phone-filled" size="26" color="#888"></uni-icons>
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef MP -->
|
||||
<button class="item" @click="clickContact">
|
||||
<uni-icons type="phone-filled" size="26" color="#888"></uni-icons>
|
||||
</button>
|
||||
<!-- #endif -->
|
||||
<!-- <view @click="onRefresh">
|
||||
|
||||
|
||||
</view> -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.layout{
|
||||
width: 100vw;
|
||||
background-color: #222;
|
||||
.header{
|
||||
min-height: 100rpx;
|
||||
}
|
||||
.main{
|
||||
min-height: 200rpx;
|
||||
}
|
||||
.footer{
|
||||
min-height: 120rpx;
|
||||
background: orange;
|
||||
}
|
||||
.float {
|
||||
position: fixed;
|
||||
right: 30rpx;
|
||||
bottom: 80rpx;
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
|
||||
.item {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border-radius: 50%;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
20
index.html
Normal file
@@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<script>
|
||||
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
|
||||
CSS.supports('top: constant(a)'))
|
||||
document.write(
|
||||
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
|
||||
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
|
||||
</script>
|
||||
<title></title>
|
||||
<!--preload-links-->
|
||||
<!--app-context-->
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"><!--app-html--></div>
|
||||
<script type="module" src="/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
39
main.js
Normal file
@@ -0,0 +1,39 @@
|
||||
import './polyfill'
|
||||
import App from './App'
|
||||
|
||||
// #ifndef VUE3
|
||||
import Vue from 'vue'
|
||||
import './uni.promisify.adaptor'
|
||||
import { createPinia } from 'pinia'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
App.mpType = 'app'
|
||||
const app = new Vue({
|
||||
...App
|
||||
})
|
||||
const pinia = createPinia()
|
||||
app.use(pinia)
|
||||
|
||||
app.$mount()
|
||||
// #endif
|
||||
|
||||
// #ifdef VUE3
|
||||
import { createSSRApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
import { trackRecord } from '@/utils/common.js' // 引入埋点方法
|
||||
|
||||
export function createApp() {
|
||||
const app = createSSRApp(App)
|
||||
const pinia = createPinia()
|
||||
app.use(pinia) // ✅ 这句是关键
|
||||
|
||||
// 挂载到全局配置,使得在 vue3 setup 中可以通过 proxy 或 app.config.globalProperties 访问
|
||||
app.config.globalProperties.$trackRecord = trackRecord
|
||||
// 同时也挂载到 uni 对象上,这样在任何地方都可以直接 uni.$trackRecord 调用
|
||||
uni.$trackRecord = trackRecord
|
||||
|
||||
return {
|
||||
app
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
75
manifest.json
Normal file
@@ -0,0 +1,75 @@
|
||||
{
|
||||
"name" : "tpl-mini",
|
||||
"appid" : "",
|
||||
"description" : "",
|
||||
"versionName" : "1.0.0",
|
||||
"versionCode" : "100",
|
||||
"transformPx" : false,
|
||||
/* 5+App特有相关 */
|
||||
"app-plus" : {
|
||||
"usingComponents" : true,
|
||||
"nvueStyleCompiler" : "uni-app",
|
||||
"compilerVersion" : 3,
|
||||
"splashscreen" : {
|
||||
"alwaysShowBeforeRender" : true,
|
||||
"waiting" : true,
|
||||
"autoclose" : true,
|
||||
"delay" : 0
|
||||
},
|
||||
/* 模块配置 */
|
||||
"modules" : {},
|
||||
/* 应用发布信息 */
|
||||
"distribute" : {
|
||||
/* android打包配置 */
|
||||
"android" : {
|
||||
"permissions" : [
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||
]
|
||||
},
|
||||
/* ios打包配置 */
|
||||
"ios" : {},
|
||||
/* SDK配置 */
|
||||
"sdkConfigs" : {}
|
||||
}
|
||||
},
|
||||
/* 快应用特有相关 */
|
||||
"quickapp" : {},
|
||||
/* 小程序特有相关 */
|
||||
"mp-weixin" : {
|
||||
"appid" : "wx8d0a4bfb94c9a7f0",
|
||||
"__usePrivacyCheck__" : true,
|
||||
"setting" : {
|
||||
"urlCheck" : false
|
||||
},
|
||||
"usingComponents" : true,
|
||||
"lazyCodeLoading" : "requiredComponents"
|
||||
},
|
||||
"mp-alipay" : {
|
||||
"usingComponents" : true,
|
||||
"appid" : "2021006125616610"
|
||||
},
|
||||
"mp-baidu" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-toutiao" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"uniStatistics" : {
|
||||
"enable" : false
|
||||
},
|
||||
"vueVersion" : "3"
|
||||
}
|
||||
105
pages.json
Normal file
@@ -0,0 +1,105 @@
|
||||
{
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "祝福 壁纸 头像",
|
||||
"enablePullDownRefresh": true,
|
||||
"navigationStyle": "custom",
|
||||
"backgroundColor": "#FFFFFF"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/help",
|
||||
"style": {
|
||||
"navigationBarTitleText": "帮助中心",
|
||||
"navigationStyle": "custom",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/vip",
|
||||
"style": {
|
||||
"navigationBarTitleText": "会员中心",
|
||||
"navigationStyle": "custom",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/profile",
|
||||
"style": {
|
||||
"navigationBarTitleText": "个人信息",
|
||||
"navigationStyle": "custom",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/mine",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/creation/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "创作中心",
|
||||
"navigationStyle": "custom",
|
||||
"backgroundColor": "#fbfbfb"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/webview/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "加载中...",
|
||||
"enablePullDownRefresh": false
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/feedback/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "意见反馈",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "uni-app",
|
||||
"navigationBarBackgroundColor": "#F8F8F8",
|
||||
"backgroundColor": "#F8F8F8",
|
||||
"mp-alipay": {
|
||||
"transparentTitle": "always",
|
||||
"titlePenetrate": "YES"
|
||||
}
|
||||
},
|
||||
"tabBar": {
|
||||
"color": "#999999",
|
||||
"selectedColor": "#ff3b30",
|
||||
"backgroundColor": "#ffffff",
|
||||
"iconWidth": "24px",
|
||||
"list": [
|
||||
{
|
||||
"text": "首页",
|
||||
"pagePath": "pages/index/index",
|
||||
"iconPath": "static/images/tabBar/home.png",
|
||||
"selectedIconPath": "static/images/tabBar/home_s.png"
|
||||
},
|
||||
{
|
||||
"text": "创作",
|
||||
"pagePath": "pages/creation/index",
|
||||
"iconPath": "static/images/tabBar/creation.png",
|
||||
"selectedIconPath": "static/images/tabBar/creation_s.png"
|
||||
},
|
||||
{
|
||||
"text": "我的",
|
||||
"pagePath": "pages/mine/mine",
|
||||
"iconPath": "static/images/tabBar/me.png",
|
||||
"selectedIconPath": "static/images/tabBar/me_s.png"
|
||||
}
|
||||
]
|
||||
},
|
||||
"uniIdRouter": {}
|
||||
}
|
||||
BIN
pages/.DS_Store
vendored
Normal file
90
pages/creation/index.vue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<view class="creation-page" :style="{ paddingTop: navBarHeight + 'px' }">
|
||||
<view
|
||||
class="custom-nav"
|
||||
:style="{
|
||||
height: navBarHeight + 'px',
|
||||
paddingTop: statusBarHeight + 'px',
|
||||
}"
|
||||
>
|
||||
<text class="nav-title">创作中心</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { getBavBarHeight, getStatusBarHeight } from "@/utils/system";
|
||||
import {
|
||||
onShareAppMessage,
|
||||
onShareTimeline,
|
||||
onLoad,
|
||||
} from "@dcloudio/uni-app";
|
||||
|
||||
const navBarHeight = ref(getBavBarHeight());
|
||||
const statusBarHeight = ref(getStatusBarHeight());
|
||||
|
||||
onLoad((options) => {
|
||||
uni.$trackRecord({
|
||||
eventName: "creation_page_visit",
|
||||
eventType: `visit`,
|
||||
})
|
||||
});
|
||||
|
||||
onShareAppMessage(async () => {
|
||||
const shareToken = await getShareToken("creation");
|
||||
getShareReward();
|
||||
return {
|
||||
title: "分享",
|
||||
path: "/pages/creation/index?shareToken=" + shareToken,
|
||||
};
|
||||
});
|
||||
|
||||
onShareTimeline(async () => {
|
||||
const shareToken = await getShareToken("creation");
|
||||
getShareReward();
|
||||
return {
|
||||
title: "分享",
|
||||
query: `shareToken=${shareToken}`,
|
||||
};
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.creation-page {
|
||||
min-height: 100vh;
|
||||
background-color: #fbfbfb;
|
||||
padding-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.custom-nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
background-color: #fbfbfb;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 32rpx;
|
||||
justify-content: space-between;
|
||||
|
||||
.nav-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
381
pages/feedback/index.vue
Normal file
@@ -0,0 +1,381 @@
|
||||
<template>
|
||||
<view class="feedback-page" >
|
||||
<NavBar title="意见反馈" />
|
||||
|
||||
<view class="content-wrap">
|
||||
<!-- Top Tip -->
|
||||
<view class="top-notice">
|
||||
<text class="notice-text">此投诉为本小程序自有投诉渠道,非微信官方投诉渠道</text>
|
||||
</view>
|
||||
|
||||
<!-- Type Selector -->
|
||||
<view class="form-item">
|
||||
<view class="label">反馈类型</view>
|
||||
<view class="type-list">
|
||||
<view
|
||||
v-for="(item, index) in feedbackTypes"
|
||||
:key="index"
|
||||
class="type-chip"
|
||||
:class="{ active: formData.type === item.value }"
|
||||
@tap="formData.type = item.value"
|
||||
>
|
||||
{{ item.label }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Content Input -->
|
||||
<view class="form-item">
|
||||
<view class="label">反馈内容 <text class="required">*</text></view>
|
||||
<view class="textarea-box">
|
||||
<textarea
|
||||
v-model="formData.content"
|
||||
class="textarea"
|
||||
placeholder="请输入您的反馈意见,我们将为您不断改进"
|
||||
placeholder-class="placeholder"
|
||||
maxlength="200"
|
||||
/>
|
||||
<text class="counter">{{ formData.content.length }}/200</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Image Upload -->
|
||||
<view class="form-item">
|
||||
<view class="label"
|
||||
>图片上传 <text class="optional">(选填,最多3张)</text></view
|
||||
>
|
||||
<view class="image-grid">
|
||||
<view
|
||||
v-for="(img, index) in formData.images"
|
||||
:key="index"
|
||||
class="image-item"
|
||||
>
|
||||
<image
|
||||
:src="img"
|
||||
mode="aspectFill"
|
||||
class="thumb"
|
||||
@tap="previewImage(index)"
|
||||
/>
|
||||
<view class="delete-btn" @tap.stop="deleteImage(index)">×</view>
|
||||
</view>
|
||||
<view
|
||||
v-if="formData.images.length < 3"
|
||||
class="upload-btn"
|
||||
@tap="chooseImage"
|
||||
>
|
||||
<text class="plus">+</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<view class="submit-wrap">
|
||||
<button
|
||||
class="submit-btn"
|
||||
:class="{ disabled: !isValid }"
|
||||
:disabled="!isValid"
|
||||
@tap="submitFeedback"
|
||||
>
|
||||
提交反馈
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from "vue";
|
||||
import { getDeviceInfo } from "@/utils/system";
|
||||
import { sendFeedback } from "@/api/mine.js";
|
||||
import { uploadImage } from "@/utils/common.js";
|
||||
import NavBar from "@/components/NavBar/NavBar.vue";
|
||||
|
||||
const feedbackTypes = [
|
||||
{ label: "功能建议", value: 1 },
|
||||
{ label: "问题反馈", value: 2 },
|
||||
{ label: "投诉", value: 3 },
|
||||
{ label: "其他", value: 4 },
|
||||
];
|
||||
|
||||
const formData = ref({
|
||||
type: 1,
|
||||
content: "",
|
||||
images: [],
|
||||
});
|
||||
|
||||
const isValid = computed(() => {
|
||||
return formData.value.content.trim().length > 0;
|
||||
});
|
||||
|
||||
const chooseImage = () => {
|
||||
uni.chooseImage({
|
||||
count: 3 - formData.value.images.length,
|
||||
sizeType: ["compressed"],
|
||||
sourceType: ["album", "camera"],
|
||||
success: (res) => {
|
||||
formData.value.images = [...formData.value.images, ...res.tempFilePaths];
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const deleteImage = (index) => {
|
||||
formData.value.images.splice(index, 1);
|
||||
};
|
||||
|
||||
const previewImage = (index) => {
|
||||
uni.previewImage({
|
||||
urls: formData.value.images,
|
||||
current: index,
|
||||
});
|
||||
};
|
||||
|
||||
const submitFeedback = async () => {
|
||||
if (!isValid.value) return;
|
||||
|
||||
uni.showLoading({ title: "提交中..." });
|
||||
|
||||
try {
|
||||
const uploadedImages = [];
|
||||
// Upload all images first
|
||||
for (const img of formData.value.images) {
|
||||
const url = await uploadImage(img);
|
||||
uploadedImages.push(url);
|
||||
}
|
||||
|
||||
// Submit with real URLs
|
||||
const deviceInfo = getDeviceInfo();
|
||||
|
||||
sendFeedback({
|
||||
type: formData.value.type,
|
||||
content: formData.value.content,
|
||||
images: uploadedImages,
|
||||
deviceInfo: deviceInfo,
|
||||
});
|
||||
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: "感谢您的反馈",
|
||||
icon: "success",
|
||||
duration: 2000,
|
||||
});
|
||||
setTimeout(() => {
|
||||
uni.navigateBack();
|
||||
}, 1000);
|
||||
} catch (err) {
|
||||
uni.hideLoading();
|
||||
uni.showToast({ title: "提交失败", icon: "none" });
|
||||
console.error(err);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.feedback-page {
|
||||
min-height: 100vh;
|
||||
background: #f9f9f9;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 24rpx;
|
||||
background: #fff;
|
||||
}
|
||||
.back {
|
||||
font-size: 50rpx;
|
||||
margin-right: 24rpx;
|
||||
line-height: 1;
|
||||
color: #333;
|
||||
padding: 20rpx;
|
||||
margin-left: -20rpx;
|
||||
}
|
||||
.nav-title {
|
||||
font-size: 34rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
margin-right: 50rpx;
|
||||
}
|
||||
|
||||
.content-wrap {
|
||||
padding: 32rpx;
|
||||
}
|
||||
|
||||
.top-notice {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
padding: 20rpx 24rpx;
|
||||
background-color: #fff7e6;
|
||||
border-radius: 16rpx;
|
||||
margin-bottom: 40rpx;
|
||||
border: 1rpx solid #ffe7ba;
|
||||
}
|
||||
|
||||
.notice-icon {
|
||||
font-size: 28rpx;
|
||||
margin-right: 12rpx;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.notice-text {
|
||||
font-size: 24rpx;
|
||||
color: #fa8c16;
|
||||
line-height: 1.4;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 48rpx;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.required {
|
||||
color: #ff3b30;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
.optional {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
font-weight: normal;
|
||||
margin-left: 8rpx;
|
||||
}
|
||||
|
||||
/* Type Selector */
|
||||
.type-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20rpx;
|
||||
}
|
||||
.type-chip {
|
||||
padding: 12rpx 32rpx;
|
||||
background: #fff;
|
||||
border-radius: 999rpx;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
border: 2rpx solid transparent;
|
||||
transition: all 0.2s;
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
.type-chip.active {
|
||||
background: #fff0f0;
|
||||
color: #ff3b30;
|
||||
border-color: #ff3b30;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Textarea */
|
||||
.textarea-box {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 24rpx;
|
||||
position: relative;
|
||||
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
.textarea {
|
||||
width: 100%;
|
||||
height: 240rpx;
|
||||
font-size: 28rpx;
|
||||
line-height: 1.5;
|
||||
color: #333;
|
||||
}
|
||||
.placeholder {
|
||||
color: #ccc;
|
||||
}
|
||||
.counter {
|
||||
position: absolute;
|
||||
bottom: 16rpx;
|
||||
right: 24rpx;
|
||||
font-size: 22rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* Image Grid */
|
||||
.image-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 24rpx;
|
||||
}
|
||||
.image-item {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
position: relative;
|
||||
border-radius: 16rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
.thumb {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
.delete-btn {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
color: #fff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-bottom-left-radius: 12rpx;
|
||||
font-size: 32rpx;
|
||||
line-height: 1;
|
||||
}
|
||||
.upload-btn {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
background: #fff;
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2rpx dashed #ddd;
|
||||
}
|
||||
.plus {
|
||||
font-size: 60rpx;
|
||||
color: #ddd;
|
||||
font-weight: 300;
|
||||
margin-top: -8rpx;
|
||||
}
|
||||
|
||||
/* Submit Button */
|
||||
.submit-wrap {
|
||||
margin-top: 60rpx;
|
||||
}
|
||||
.submit-btn {
|
||||
background: #ff3b30;
|
||||
color: #fff;
|
||||
font-size: 32rpx;
|
||||
font-weight: 600;
|
||||
height: 88rpx;
|
||||
border-radius: 999rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 10rpx 20rpx rgba(255, 59, 48, 0.2);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.submit-btn.disabled {
|
||||
background: #ffccc7;
|
||||
box-shadow: none;
|
||||
opacity: 0.8;
|
||||
}
|
||||
.submit-btn::after {
|
||||
border: none;
|
||||
}
|
||||
</style>
|
||||
206
pages/index/index.vue
Normal file
@@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<view
|
||||
class="home-container"
|
||||
:style="{ paddingTop: statusBarHeight + 54 + 'px' }"
|
||||
>
|
||||
<!-- 顶部用户信息栏 -->
|
||||
<view
|
||||
class="header-section"
|
||||
:style="{ paddingTop: statusBarHeight + 4 + 'px' }"
|
||||
>
|
||||
<view class="user-info">
|
||||
<image
|
||||
class="user-avatar"
|
||||
:src="userInfo.avatarUrl || '/static/images/default-avatar.png'"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view class="user-texts">
|
||||
<text class="greeting-info">{{ greetingText }}</text>
|
||||
<view class="name-row">
|
||||
<text class="user-name" @tap="handleLogin">
|
||||
{{ userInfo.nickName || "点击登录" }}
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 登录弹窗 -->
|
||||
<LoginPopup @logind="handleLoginSuccess" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from "vue";
|
||||
import { getStatusBarHeight } from "@/utils/system";
|
||||
import {
|
||||
onShareAppMessage,
|
||||
onShareTimeline,
|
||||
onShow,
|
||||
onPullDownRefresh,
|
||||
onLoad,
|
||||
} from "@dcloudio/uni-app";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
import {
|
||||
getShareReward,
|
||||
} from "@/api/system";
|
||||
import { getShareToken, saveViewRequest } from "@/utils/common.js";
|
||||
import LoginPopup from "@/components/LoginPopup/LoginPopup.vue";
|
||||
import adManager from "@/utils/adManager.js";
|
||||
|
||||
const userStore = useUserStore();
|
||||
const statusBarHeight = ref(getStatusBarHeight());
|
||||
const userInfo = computed(() => userStore?.userInfo || {});
|
||||
const isLoggedIn = computed(() => !!userStore.userInfo.nickName);
|
||||
|
||||
const greetingText = computed(() => {
|
||||
const hour = new Date().getHours();
|
||||
if (hour < 6) return "凌晨好";
|
||||
if (hour < 9) return "早上好";
|
||||
if (hour < 12) return "上午好";
|
||||
if (hour < 14) return "中午好";
|
||||
if (hour < 17) return "下午好";
|
||||
if (hour < 19) return "傍晚好";
|
||||
return "晚上好";
|
||||
});
|
||||
|
||||
const handleLogin = () => {
|
||||
if (!userInfo.value.nickName) {
|
||||
uni.$emit("show-login-popup");
|
||||
}
|
||||
};
|
||||
|
||||
let firstLoad = true;
|
||||
|
||||
const initData = () => {
|
||||
if (adManager.isAdShowing) return; // 防止广告页返回时立即重新渲染引发 insertTextView:fail
|
||||
};
|
||||
|
||||
onLoad((options) => {
|
||||
uni.$trackRecord({
|
||||
eventName: "index_page_visit",
|
||||
eventType: `visit`,
|
||||
})
|
||||
if (options.shareToken) {
|
||||
saveViewRequest(options.shareToken, "index");
|
||||
}
|
||||
initData();
|
||||
});
|
||||
|
||||
onShow(() => {
|
||||
if (firstLoad) {
|
||||
firstLoad = false;
|
||||
return;
|
||||
}
|
||||
initData();
|
||||
});
|
||||
|
||||
const handleLoginSuccess = () => {
|
||||
};
|
||||
|
||||
onShareAppMessage(async () => {
|
||||
const shareToken = await getShareToken("index");
|
||||
getShareReward();
|
||||
return {
|
||||
title: "分享",
|
||||
path: "/pages/index/index?shareToken=" + shareToken,
|
||||
};
|
||||
});
|
||||
|
||||
onShareTimeline(async () => {
|
||||
const shareToken = await getShareToken("index");
|
||||
getShareReward();
|
||||
return {
|
||||
title: "分享",
|
||||
query: `shareToken=${shareToken}`,
|
||||
};
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.home-container {
|
||||
min-height: 100vh;
|
||||
background-color: #fbfbf9; /* 柔和的米色背景 */
|
||||
padding-left: 32rpx;
|
||||
padding-right: 32rpx;
|
||||
padding-bottom: 120rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 顶部用户信息 */
|
||||
.header-section {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-left: 32rpx;
|
||||
padding-right: 32rpx;
|
||||
padding-bottom: 24rpx;
|
||||
background-color: rgba(251, 251, 249, 0.95);
|
||||
backdrop-filter: blur(20rpx);
|
||||
|
||||
.user-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.user-avatar {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid #fff;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.user-texts {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.greeting-info {
|
||||
font-size: 20rpx;
|
||||
color: #999;
|
||||
margin-bottom: 2rpx;
|
||||
}
|
||||
|
||||
.name-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.user-name {
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.user-points {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(255, 152, 0, 0.1);
|
||||
border: 1rpx solid rgba(255, 152, 0, 0.3);
|
||||
border-radius: 20rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
|
||||
.points-label {
|
||||
font-size: 16rpx;
|
||||
color: #ff9800;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
|
||||
.points-value {
|
||||
font-size: 20rpx;
|
||||
color: #ff5722;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
441
pages/mine/help.vue
Normal file
@@ -0,0 +1,441 @@
|
||||
<template>
|
||||
<view class="help-page">
|
||||
<NavBar title="帮助中心" />
|
||||
|
||||
<!-- Search Bar -->
|
||||
<!-- <view class="search-box">
|
||||
<view class="search-input-box">
|
||||
<uni-icons type="search" size="18" color="#999" />
|
||||
<text class="placeholder">搜索你遇到的问题</text>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<view class="content-scroll">
|
||||
<!-- Quick Start -->
|
||||
<view class="section">
|
||||
<view class="section-header">
|
||||
<view class="red-bar"></view>
|
||||
<text class="section-title">快速上手</text>
|
||||
</view>
|
||||
<view class="steps-card">
|
||||
<view class="step-item">
|
||||
<view class="icon-circle">
|
||||
<uni-icons type="email-filled" size="30" color="#ff3b30" />
|
||||
</view>
|
||||
<text class="step-text">制作贺卡</text>
|
||||
</view>
|
||||
<view class="arrow">
|
||||
<uni-icons type="arrowright" size="16" color="#ffccc7" />
|
||||
</view>
|
||||
<view class="step-item">
|
||||
<view class="icon-circle">
|
||||
<uni-icons type="person-filled" size="30" color="#ff3b30" />
|
||||
</view>
|
||||
<text class="step-text">佩戴挂饰</text>
|
||||
</view>
|
||||
<view class="arrow">
|
||||
<uni-icons type="arrowright" size="16" color="#ffccc7" />
|
||||
</view>
|
||||
<view class="step-item">
|
||||
<view class="icon-circle">
|
||||
<uni-icons type="gift-filled" size="30" color="#ff3b30" />
|
||||
</view>
|
||||
<text class="step-text">送出祝福</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- FAQ -->
|
||||
<view class="section">
|
||||
<view class="section-header">
|
||||
<view class="red-bar"></view>
|
||||
<text class="section-title">常见问题</text>
|
||||
</view>
|
||||
|
||||
<view class="faq-list">
|
||||
<view
|
||||
v-for="(category, index) in faqList"
|
||||
:key="index"
|
||||
class="faq-category"
|
||||
>
|
||||
<view class="category-header" @click="toggleCategory(index)">
|
||||
<view class="cat-left">
|
||||
<uni-icons
|
||||
:type="category.icon"
|
||||
size="20"
|
||||
color="#ff3b30"
|
||||
class="cat-icon"
|
||||
/>
|
||||
<text class="cat-title">{{ category.title }}</text>
|
||||
</view>
|
||||
<uni-icons
|
||||
:type="category.expanded ? 'bottom' : 'right'"
|
||||
size="16"
|
||||
color="#ccc"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<view v-if="category.expanded" class="category-content">
|
||||
<view
|
||||
v-for="(item, idx) in category.items"
|
||||
:key="idx"
|
||||
class="faq-item"
|
||||
>
|
||||
<view class="question" @click="toggleQuestion(index, idx)">
|
||||
<text>{{ item.q }}</text>
|
||||
<uni-icons type="right" size="14" color="#ccc" />
|
||||
</view>
|
||||
<view class="answer">
|
||||
<text>{{ item.a }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Contact Support -->
|
||||
<view class="contact-section">
|
||||
<view class="contact-card">
|
||||
<view class="contact-title">没找到答案?</view>
|
||||
<view class="contact-btns">
|
||||
<button class="c-btn" open-type="contact">
|
||||
<uni-icons type="chatbubbles-filled" size="20" color="#fff" />
|
||||
<text>在线客服</text>
|
||||
</button>
|
||||
<!-- <button class="c-btn">
|
||||
<uni-icons type="world-filled" size="20" color="#fff" />
|
||||
<text>官方公众号</text>
|
||||
</button> -->
|
||||
</view>
|
||||
<view class="bg-decor">
|
||||
<uni-icons
|
||||
type="help-filled"
|
||||
size="120"
|
||||
color="rgba(255,255,255,0.1)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Footer -->
|
||||
<view class="footer">
|
||||
<view class="footer-blessing">
|
||||
<uni-icons type="vip-filled" size="14" color="#ff3b30" />
|
||||
<text>祝您 万事大吉,万事如意</text>
|
||||
</view>
|
||||
<view class="footer-copy">官方出品</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import NavBar from "@/components/NavBar/NavBar.vue";
|
||||
import { trackRecord } from "@/utils/common.js";
|
||||
|
||||
onMounted(() => {
|
||||
trackRecord({
|
||||
eventName: "help_page_visit",
|
||||
eventType: `visit`,
|
||||
});
|
||||
});
|
||||
|
||||
const faqList = ref([
|
||||
{
|
||||
title: "贺卡制作",
|
||||
icon: "compose",
|
||||
expanded: true,
|
||||
items: [
|
||||
{
|
||||
q: "如何分享给微信好友?",
|
||||
a: "制作完成后,点击右下角“分享给好友”按钮即可。您也可以保存为图片后在聊天对话框发送。",
|
||||
},
|
||||
{
|
||||
q: "生成速度太慢怎么办?",
|
||||
a: "生成速度受网络环境和服务器负载影响,请您耐心等待或尝试切换网络。",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "头像定制",
|
||||
icon: "person",
|
||||
expanded: false,
|
||||
items: [
|
||||
{
|
||||
q: "如何更换新的头像",
|
||||
a: "在头像定制页面,首先选择上传头像或系统头像,左边选择您喜欢的边框样式,右边选择头像挂饰,可移动位置,缩放大小,点击保存即可。",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "运势抽取",
|
||||
icon: "calendar",
|
||||
expanded: false,
|
||||
items: [
|
||||
{
|
||||
q: "每天可以抽取几次?",
|
||||
a: "每位用户每天有1次免费抽取机会,分享给好友可获得额外机会。",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "壁纸保存",
|
||||
icon: "image",
|
||||
expanded: false,
|
||||
items: [
|
||||
{
|
||||
q: "下载壁纸不清晰怎么办?",
|
||||
a: "请确保您下载的是原图。如果网络不稳定,可能会自动加载低清预览图,请等待加载完成后再保存。",
|
||||
},
|
||||
],
|
||||
},
|
||||
]);
|
||||
|
||||
const copyright = [
|
||||
"如有疑问,请通过“我的-使用说明”联系客服处理。",
|
||||
"最终解释权归 2026 助手团队所有。",
|
||||
];
|
||||
|
||||
const toggleCategory = (index) => {
|
||||
faqList.value[index].expanded = !faqList.value[index].expanded;
|
||||
};
|
||||
|
||||
const toggleQuestion = (catIndex, itemIndex) => {
|
||||
// Simple expansion for question details not implemented in design but structure is there
|
||||
// The design shows the answer directly under the question for the first item
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.help-page {
|
||||
min-height: 100vh;
|
||||
background-color: #fcfcfc;
|
||||
padding-bottom: 40rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
padding: 20rpx 30rpx;
|
||||
background: #fff;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.search-input-box {
|
||||
background: #f5f5f5;
|
||||
height: 72rpx;
|
||||
border-radius: 36rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 24rpx;
|
||||
|
||||
.placeholder {
|
||||
font-size: 28rpx;
|
||||
color: #999;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.content-scroll {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: 30rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.red-bar {
|
||||
width: 6rpx;
|
||||
height: 28rpx;
|
||||
background: #ff3b30;
|
||||
border-radius: 4rpx;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #ff3b30;
|
||||
}
|
||||
}
|
||||
|
||||
.steps-card {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
padding: 40rpx 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.02);
|
||||
|
||||
.step-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
.icon-circle {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
background: #fff6f6;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.step-text {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.arrow {
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.faq-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.faq-category {
|
||||
background: #fff;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.02);
|
||||
|
||||
.category-header {
|
||||
padding: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
.cat-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16rpx;
|
||||
|
||||
.cat-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.category-content {
|
||||
background: #fcfcfc;
|
||||
padding: 0 30rpx 30rpx;
|
||||
|
||||
.faq-item {
|
||||
margin-top: 24rpx;
|
||||
|
||||
.question {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.answer {
|
||||
font-size: 26rpx;
|
||||
color: #888;
|
||||
line-height: 1.6;
|
||||
background: #f8f8f8;
|
||||
padding: 20rpx;
|
||||
border-radius: 12rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.contact-section {
|
||||
padding: 0 30rpx;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
|
||||
.contact-card {
|
||||
background: linear-gradient(135deg, #e52e2e 0%, #c61a1a 100%);
|
||||
border-radius: 30rpx;
|
||||
padding: 40rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: #fff;
|
||||
|
||||
.contact-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.contact-btns {
|
||||
display: flex;
|
||||
gap: 30rpx;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
.c-btn {
|
||||
flex: 1;
|
||||
height: 80rpx;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12rpx;
|
||||
color: #fff;
|
||||
font-size: 28rpx;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bg-decor {
|
||||
position: absolute;
|
||||
right: -20rpx;
|
||||
bottom: -40rpx;
|
||||
opacity: 0.5;
|
||||
z-index: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.footer {
|
||||
margin-top: 60rpx;
|
||||
text-align: center;
|
||||
padding-bottom: 60rpx;
|
||||
|
||||
.footer-blessing {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 10rpx;
|
||||
font-size: 24rpx;
|
||||
color: #ff8888;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.footer-copy {
|
||||
font-size: 20rpx;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
510
pages/mine/mine.vue
Normal file
@@ -0,0 +1,510 @@
|
||||
<template>
|
||||
<view class="mine-page">
|
||||
<!-- Custom Navbar -->
|
||||
<view
|
||||
class="nav-bar"
|
||||
:style="{ paddingTop: navBarTop + 'px', height: navBarHeight + 'px' }"
|
||||
>
|
||||
<!-- <text class="nav-title">我的</text> -->
|
||||
</view>
|
||||
|
||||
<scroll-view
|
||||
scroll-y
|
||||
class="content-scroll"
|
||||
:style="{ paddingTop: navBarTop + navBarHeight + 'px' }"
|
||||
>
|
||||
<view class="content-wrap">
|
||||
<!-- User Card -->
|
||||
<view class="user-card" @tap="handleUserClick">
|
||||
<view class="avatar-box">
|
||||
<image :src="userInfo.avatarUrl" class="avatar" mode="aspectFill" />
|
||||
<!-- <view class="red-badge"><text class="fire">🔥</text></view> -->
|
||||
</view>
|
||||
<view class="user-info">
|
||||
<view class="row-1">
|
||||
<text class="nickname">{{ userInfo.nickName }}</text>
|
||||
<view class="vip-tag" v-if="isLoggedIn && userInfo.isVip">
|
||||
<text class="vip-text">VIP 祥瑞会员</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="row-2" v-if="isLoggedIn">
|
||||
<!-- <text class="arrow-icon">➤</text> -->
|
||||
<!-- <text class="stats-text"
|
||||
>已发送 <text class="num">3</text> 条新春祝福</text
|
||||
> -->
|
||||
</view>
|
||||
<view class="row-2" v-else>
|
||||
<text class="stats-text">点击登录解锁更多功能</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="card-arrow">›</view>
|
||||
</view>
|
||||
|
||||
<!-- VIP Banner -->
|
||||
<view v-if="!isIos" class="vip-banner" @tap="navTo('vip')">
|
||||
<view class="vip-left">
|
||||
<view class="vip-icon-box">
|
||||
<uni-icons type="vip-filled" size="32" color="#5d4037" />
|
||||
</view>
|
||||
<view class="vip-content">
|
||||
<view class="vip-title-row">
|
||||
<text class="vip-title">祥瑞会员中心</text>
|
||||
<view class="diamond-tag">DIAMOND</view>
|
||||
</view>
|
||||
<text class="vip-subtitle">开通会员解锁全部特权</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="vip-right">
|
||||
<text class="open-text">立即开通</text>
|
||||
<text class="arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- My Creations -->
|
||||
<view class="section-title">我的xx</view>
|
||||
<view class="menu-group">
|
||||
<view class="menu-item" @tap="navTo('avatar')">
|
||||
<view class="icon-box pink-bg"><text>☺</text></view>
|
||||
<text class="menu-text">我的专属头像</text>
|
||||
<text class="arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Other Actions -->
|
||||
<view class="menu-group mt-30">
|
||||
<button class="menu-item share-btn" open-type="share">
|
||||
<view class="icon-left"><text class="share-icon">🔗</text></view>
|
||||
<text class="menu-text">分享给好友</text>
|
||||
<text class="arrow">›</text>
|
||||
</button>
|
||||
<view class="menu-item" @tap="navTo('feedback')">
|
||||
<view class="icon-left"><text class="feedback-icon">📝</text></view>
|
||||
<text class="menu-text">意见反馈</text>
|
||||
<text class="arrow">›</text>
|
||||
</view>
|
||||
<view class="menu-item" @tap="navTo('help')">
|
||||
<view class="icon-left"><text class="help-icon">❓</text></view>
|
||||
<text class="menu-text">使用说明 / 帮助</text>
|
||||
<text class="arrow">›</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Footer -->
|
||||
<!-- <view class="version-info">2026 丙午马年 · 精美助手 v1.0.2</view> -->
|
||||
|
||||
|
||||
<view style="height: 120rpx"></view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- Login Popup -->
|
||||
<LoginPopup ref="loginPopupRef" @logind="handleLogind" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from "vue";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
import { onShareAppMessage, onLoad } from "@dcloudio/uni-app";
|
||||
import { getShareToken } from "@/utils/common";
|
||||
import { getShareReward } from "@/api/system";
|
||||
import LoginPopup from "@/components/LoginPopup/LoginPopup.vue";
|
||||
|
||||
const userStore = useUserStore();
|
||||
const loginPopupRef = ref(null);
|
||||
|
||||
// Navigation Bar
|
||||
const navBarTop = ref(20);
|
||||
const navBarHeight = ref(44);
|
||||
|
||||
// User Info
|
||||
const defaultAvatarUrl =
|
||||
"https://file.lihailezzc.com/resource/d9b329082b32f8305101f708593a4882.png";
|
||||
|
||||
const userInfo = computed(() => ({
|
||||
nickName: userStore.userInfo.nickName || "点击登录",
|
||||
avatarUrl: userStore.userInfo.avatarUrl || defaultAvatarUrl,
|
||||
isVip: userStore.userInfo.isVip || false,
|
||||
}));
|
||||
|
||||
const isLoggedIn = computed(() => !!userStore.userInfo.nickName);
|
||||
|
||||
const isIos = computed(() => uni.getSystemInfoSync().osName === "ios");
|
||||
|
||||
onLoad((options) => {
|
||||
const sysInfo = uni.getSystemInfoSync();
|
||||
navBarTop.value = sysInfo.statusBarHeight;
|
||||
navBarHeight.value = 44;
|
||||
});
|
||||
|
||||
onShareAppMessage(async () => {
|
||||
const shareToken = await getShareToken("mine");
|
||||
getShareReward({ scene: "mine" });
|
||||
return {
|
||||
title: "分享",
|
||||
path: "/pages/index/index?shareToken=" + shareToken,
|
||||
imageUrl:
|
||||
"https://file.lihailezzc.com/resource/8dd026d76ef7a63d123b7fd698fb989b.png",
|
||||
};
|
||||
});
|
||||
|
||||
const handleUserClick = () => {
|
||||
if (!isLoggedIn.value) {
|
||||
loginPopupRef.value.open();
|
||||
} else {
|
||||
// Navigate to profile details
|
||||
uni.navigateTo({
|
||||
url: "/pages/mine/profile",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleLogind = async () => {
|
||||
// Logic after successful login if needed
|
||||
};
|
||||
|
||||
const navTo = (page) => {
|
||||
if (!isLoggedIn.value) {
|
||||
loginPopupRef.value.open();
|
||||
uni.showToast({ title: "请先登录", icon: "none" });
|
||||
return;
|
||||
}
|
||||
|
||||
if (page === "avatar") {
|
||||
uni.navigateTo({
|
||||
url: "/pages/mine/avatar",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (page === "feedback") {
|
||||
uni.navigateTo({
|
||||
url: "/pages/feedback/index",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (page === "help") {
|
||||
uni.navigateTo({
|
||||
url: "/pages/mine/help",
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (page === "vip") {
|
||||
uni.navigateTo({
|
||||
url: "/pages/mine/vip",
|
||||
});
|
||||
return;
|
||||
}
|
||||
uni.showToast({ title: "功能开发中", icon: "none" });
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.mine-page {
|
||||
min-height: 100vh;
|
||||
background: #f9f9f9;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.nav-bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #f9f9f9;
|
||||
}
|
||||
.nav-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
.content-scroll {
|
||||
height: 100vh;
|
||||
}
|
||||
.content-wrap {
|
||||
padding: 20rpx 30rpx 40rpx;
|
||||
}
|
||||
|
||||
/* User Card */
|
||||
.user-card {
|
||||
background: #fff;
|
||||
border-radius: 30rpx;
|
||||
padding: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 40rpx;
|
||||
position: relative;
|
||||
box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.03);
|
||||
}
|
||||
.avatar-box {
|
||||
position: relative;
|
||||
margin-right: 30rpx;
|
||||
}
|
||||
.avatar {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid #fff;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
.red-badge {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -10rpx;
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
background: #ff3b30;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2rpx solid #fff;
|
||||
}
|
||||
.fire {
|
||||
font-size: 24rpx;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
flex: 1;
|
||||
}
|
||||
.row-1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
.nickname {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
.vip-tag {
|
||||
background: #ffecec;
|
||||
padding: 4rpx 16rpx;
|
||||
border-radius: 999rpx;
|
||||
}
|
||||
.vip-text {
|
||||
color: #ff3b30;
|
||||
font-size: 20rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.row-2 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.arrow-icon {
|
||||
color: #ff3b30;
|
||||
font-size: 20rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
.stats-text {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
.num {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin: 0 4rpx;
|
||||
}
|
||||
.card-arrow {
|
||||
font-size: 40rpx;
|
||||
color: #ccc;
|
||||
margin-left: 10rpx;
|
||||
}
|
||||
|
||||
/* VIP Banner */
|
||||
.vip-banner {
|
||||
background: linear-gradient(135deg, #2e2424 0%, #1a1616 100%);
|
||||
border-radius: 30rpx;
|
||||
padding: 30rpx 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 40rpx;
|
||||
box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.vip-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.vip-icon-box {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
background: #fceea9;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 24rpx;
|
||||
border: 4rpx solid #bfa46f;
|
||||
}
|
||||
|
||||
.vip-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.vip-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.vip-title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #fceea9;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
|
||||
.diamond-tag {
|
||||
background: rgba(252, 238, 169, 0.15);
|
||||
color: #fceea9;
|
||||
font-size: 18rpx;
|
||||
padding: 2rpx 8rpx;
|
||||
border-radius: 6rpx;
|
||||
border: 1px solid rgba(252, 238, 169, 0.4);
|
||||
}
|
||||
|
||||
.vip-subtitle {
|
||||
font-size: 22rpx;
|
||||
color: rgba(252, 238, 169, 0.6);
|
||||
}
|
||||
|
||||
.vip-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.open-text {
|
||||
font-size: 26rpx;
|
||||
color: #fceea9;
|
||||
margin-right: 4rpx;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.vip-banner .arrow {
|
||||
color: #fceea9;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
/* Section Title */
|
||||
.section-title {
|
||||
font-size: 26rpx;
|
||||
font-weight: bold;
|
||||
color: #999;
|
||||
margin-bottom: 20rpx;
|
||||
padding-left: 10rpx;
|
||||
}
|
||||
|
||||
/* Menu Group */
|
||||
.menu-group {
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
overflow: hidden;
|
||||
margin-bottom: 40rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
.menu-group.mt-30 {
|
||||
margin-top: 30rpx;
|
||||
}
|
||||
.menu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 30rpx;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
}
|
||||
.menu-item:active {
|
||||
background: #f9f9f9;
|
||||
}
|
||||
/* For button reset */
|
||||
.menu-item.share-btn {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
line-height: normal;
|
||||
border-radius: 0;
|
||||
}
|
||||
.menu-item.share-btn::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.icon-box {
|
||||
width: 72rpx;
|
||||
height: 72rpx;
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 24rpx;
|
||||
font-size: 36rpx;
|
||||
}
|
||||
.red-bg {
|
||||
background: #fff0f0;
|
||||
color: #ff3b30;
|
||||
}
|
||||
.orange-bg {
|
||||
background: #fff8e6;
|
||||
color: #ff9500;
|
||||
}
|
||||
.pink-bg {
|
||||
background: #fff0f5;
|
||||
color: #ff2d55;
|
||||
}
|
||||
.yellow-bg {
|
||||
background: #fffae0;
|
||||
color: #ffcc00;
|
||||
}
|
||||
.gray-bg {
|
||||
background: #f5f5f5;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.icon-left {
|
||||
width: 40rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-right: 24rpx;
|
||||
margin-left: 16rpx;
|
||||
}
|
||||
.share-icon,
|
||||
.help-icon,
|
||||
.feedback-icon {
|
||||
font-size: 36rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.menu-text {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
.new-badge {
|
||||
background: #ff3b30;
|
||||
color: #fff;
|
||||
font-size: 20rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
border-radius: 8rpx;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
.arrow {
|
||||
color: #ccc;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
/* Version Info */
|
||||
.version-info {
|
||||
text-align: center;
|
||||
color: #ccc;
|
||||
font-size: 22rpx;
|
||||
margin-top: 60rpx;
|
||||
}
|
||||
</style>
|
||||
372
pages/mine/profile.vue
Normal file
@@ -0,0 +1,372 @@
|
||||
<template>
|
||||
<view class="profile-page">
|
||||
<NavBar title="个人信息" />
|
||||
|
||||
<!-- Content -->
|
||||
<view class="content">
|
||||
<!-- Avatar Section -->
|
||||
<view class="avatar-section">
|
||||
<view class="avatar-wrapper" @click="handleAvatarClick">
|
||||
<image
|
||||
class="avatar"
|
||||
:src="
|
||||
userInfo.avatarUrl ||
|
||||
'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
|
||||
"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view class="camera-badge">
|
||||
<uni-icons type="camera-filled" size="16" color="#ff3b30" />
|
||||
</view>
|
||||
</view>
|
||||
<text class="change-avatar-text">更换头像</text>
|
||||
</view>
|
||||
|
||||
<!-- Info List -->
|
||||
<view class="info-card">
|
||||
<view class="info-item" @click="handleEditName">
|
||||
<text class="label">昵称</text>
|
||||
<view class="value-box">
|
||||
<text class="value">{{ form.nickName || "微信用户" }}</text>
|
||||
<uni-icons type="right" size="14" color="#ccc" />
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view class="info-item" @click="handleEditGender">
|
||||
<text class="label">性别</text>
|
||||
<view class="value-box">
|
||||
<text class="value">{{ genderText }}</text>
|
||||
<uni-icons type="right" size="14" color="#ccc" />
|
||||
</view>
|
||||
</view> -->
|
||||
<!-- <view class="info-item" @click="handleEditManifesto">
|
||||
<text class="label">个性宣言</text>
|
||||
<view class="value-box">
|
||||
<text class="value red-text">{{ form.bio || "点击选择" }}</text>
|
||||
<uni-icons type="compose" size="16" color="#ccc" />
|
||||
</view>
|
||||
</view> -->
|
||||
</view>
|
||||
|
||||
<!-- Account Binding -->
|
||||
<!-- <view class="section-header">
|
||||
<text class="section-title">账号绑定</text>
|
||||
</view>
|
||||
<view class="info-card">
|
||||
<view class="info-item">
|
||||
<text class="label">手机号</text>
|
||||
<view class="value-box">
|
||||
<text class="value">138 **** 8888</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="info-item">
|
||||
<text class="label">微信号</text>
|
||||
<view class="value-box">
|
||||
<text class="value">WX_CN_2026</text>
|
||||
</view>
|
||||
</view>
|
||||
</view> -->
|
||||
|
||||
<!-- Trophy Decoration -->
|
||||
<view class="trophy-decoration">
|
||||
<uni-icons type="medal" size="60" color="#e0e0e0" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Bottom Action Bar -->
|
||||
<view class="bottom-bar safe-area-bottom">
|
||||
<button class="save-btn" @click="handleSave">
|
||||
<text>保存修改</text>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch } from "vue";
|
||||
import { storeToRefs } from "pinia";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
import { updateUserInfo } from "@/api/auth.js";
|
||||
import NavBar from "@/components/NavBar/NavBar.vue";
|
||||
|
||||
const userStore = useUserStore();
|
||||
const { userInfo } = storeToRefs(userStore);
|
||||
|
||||
const form = ref({
|
||||
nickName: "",
|
||||
gender: 1, // 1: 男, 2: 女
|
||||
bio: "",
|
||||
});
|
||||
|
||||
const genderText = computed(() => {
|
||||
if (form.value.gender === 1) return "男";
|
||||
if (form.value.gender === 2) return "女";
|
||||
return "未知";
|
||||
});
|
||||
|
||||
watch(
|
||||
userInfo,
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
form.value.nickName = newVal.nickName || "";
|
||||
form.value.gender = newVal.gender || 1;
|
||||
form.value.bio = newVal.bio || "万事如意,岁岁平安";
|
||||
}
|
||||
},
|
||||
{ immediate: true, deep: true },
|
||||
);
|
||||
|
||||
const handleAvatarClick = () => {
|
||||
// Navigate to avatar page or open picker
|
||||
uni.navigateTo({
|
||||
url: "/pages/mine/avatar",
|
||||
});
|
||||
};
|
||||
|
||||
const showEditNameModal = (content) => {
|
||||
uni.showModal({
|
||||
title: "修改昵称",
|
||||
editable: true,
|
||||
placeholderText: "请输入昵称(最多5个字)",
|
||||
content: content,
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
if (res.content.length > 5) {
|
||||
uni.showToast({ title: "昵称最多5个字", icon: "none" });
|
||||
// 重新打开弹窗以模拟“不消失”,并保留用户输入
|
||||
setTimeout(() => {
|
||||
showEditNameModal(res.content);
|
||||
}, 100);
|
||||
return;
|
||||
}
|
||||
form.value.nickName = res.content;
|
||||
handleSave();
|
||||
}
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleEditName = () => {
|
||||
showEditNameModal(form.value.nickName);
|
||||
};
|
||||
|
||||
const handleEditGender = () => {
|
||||
uni.showActionSheet({
|
||||
itemList: ["男", "女"],
|
||||
success: (res) => {
|
||||
form.value.gender = res.tapIndex + 1;
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const manifestoOptions = [
|
||||
"万事如意,岁岁平安",
|
||||
"龙马精神,财运亨通",
|
||||
"心想事成,大吉大利",
|
||||
"身体健康,阖家幸福",
|
||||
"吉星高照,福寿安康",
|
||||
];
|
||||
|
||||
const handleEditManifesto = () => {
|
||||
uni.showActionSheet({
|
||||
itemList: manifestoOptions,
|
||||
success: (res) => {
|
||||
form.value.bio = manifestoOptions[res.tapIndex];
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
if (!form.value.nickName) {
|
||||
uni.showToast({ title: "请输入昵称", icon: "none" });
|
||||
return;
|
||||
}
|
||||
|
||||
uni.showLoading({ title: "保存中...", mask: true });
|
||||
// 保存当前值,以便失败时恢复
|
||||
const originalForm = {
|
||||
nickName: userInfo.value.nickName || "",
|
||||
gender: userInfo.value.gender || 1,
|
||||
bio: userInfo.value.bio || "万事如意,岁岁平安",
|
||||
};
|
||||
|
||||
try {
|
||||
const res = await updateUserInfo({
|
||||
nickname: form.value.nickName,
|
||||
gender: form.value.gender,
|
||||
bio: form.value.bio,
|
||||
});
|
||||
|
||||
// Check result
|
||||
if (res && res.success) {
|
||||
await userStore.fetchUserInfo();
|
||||
uni.hideLoading();
|
||||
uni.showToast({ title: "保存成功", icon: "success" });
|
||||
} else {
|
||||
// 恢复之前的内容
|
||||
form.value = { ...originalForm };
|
||||
uni.showToast({ title: res.message || "修改失败", icon: "none" });
|
||||
uni.hideLoading();
|
||||
}
|
||||
} catch (e) {
|
||||
// 恢复之前的内容
|
||||
form.value = { ...originalForm };
|
||||
uni.hideLoading();
|
||||
// Error is handled by request usually if showError is true.
|
||||
// But we can show toast too.
|
||||
console.error(e);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.profile-page {
|
||||
min-height: 100vh;
|
||||
background-color: #fcfcfc;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 200rpx;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
/* Avatar Section */
|
||||
.avatar-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 40rpx;
|
||||
margin-bottom: 60rpx;
|
||||
}
|
||||
|
||||
.avatar-wrapper {
|
||||
position: relative;
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
background: #f8cb8c;
|
||||
border-radius: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 20rpx;
|
||||
border: 4rpx solid #fff;
|
||||
box-shadow: 0 10rpx 30rpx rgba(248, 203, 140, 0.4);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 36rpx;
|
||||
}
|
||||
|
||||
.camera-badge {
|
||||
position: absolute;
|
||||
bottom: -10rpx;
|
||||
right: -10rpx;
|
||||
background: #fff;
|
||||
width: 50rpx;
|
||||
height: 50rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.change-avatar-text {
|
||||
font-size: 26rpx;
|
||||
color: #8a6d65;
|
||||
}
|
||||
|
||||
/* Info List */
|
||||
.info-card {
|
||||
background: #fff;
|
||||
border-radius: 30rpx;
|
||||
padding: 0 30rpx;
|
||||
margin-bottom: 40rpx;
|
||||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.02);
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 110rpx;
|
||||
border-bottom: 2rpx solid #f5f5f5;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 30rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.value-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 30rpx;
|
||||
color: #333;
|
||||
margin-right: 10rpx;
|
||||
font-weight: 500;
|
||||
|
||||
&.red-text {
|
||||
color: #ff3b30;
|
||||
}
|
||||
}
|
||||
|
||||
/* Section Header */
|
||||
.section-header {
|
||||
padding: 0 10rpx;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #8a6d65;
|
||||
}
|
||||
|
||||
/* Trophy Decoration */
|
||||
.trophy-decoration {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 60rpx;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Bottom Bar */
|
||||
.bottom-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: #fcfcfc;
|
||||
padding: 20rpx 40rpx;
|
||||
box-sizing: border-box;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.save-btn {
|
||||
background: #d32f2f;
|
||||
color: #fff;
|
||||
border-radius: 50rpx;
|
||||
height: 90rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
box-shadow: 0 10rpx 20rpx rgba(211, 47, 47, 0.2);
|
||||
|
||||
&:active {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
529
pages/mine/vip.vue
Normal file
@@ -0,0 +1,529 @@
|
||||
<template>
|
||||
<view class="vip-page">
|
||||
<NavBar title="会员中心" />
|
||||
|
||||
<!-- Content -->
|
||||
<view class="content">
|
||||
<!-- User Info Card -->
|
||||
<view class="user-card">
|
||||
<view class="avatar-box">
|
||||
<image
|
||||
class="avatar"
|
||||
:src="
|
||||
userInfo.avatarUrl ||
|
||||
'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
|
||||
"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view class="fire-badge">
|
||||
<uni-icons type="fire-filled" size="14" color="#fff" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="user-info">
|
||||
<view class="name-row">
|
||||
<text class="username">{{ userInfo.nickName || "微信用户" }}</text>
|
||||
<view class="vip-tag" v-if="userInfo.isVip">VIP 祥瑞会员</view>
|
||||
<view class="vip-tag gray" v-else>普通用户</view>
|
||||
</view>
|
||||
<text class="expiry-date" v-if="userInfo.isVip">
|
||||
{{ userInfo.vipExpireAt }} 到期
|
||||
</text>
|
||||
<text class="expiry-date" v-else>开通会员解锁专属权益</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Plans -->
|
||||
<view class="section-title">选择会员方案</view>
|
||||
<view class="plans-grid">
|
||||
<view
|
||||
v-for="(plan, index) in plans"
|
||||
:key="index"
|
||||
class="plan-card"
|
||||
:class="{ active: selectedPlanIndex === index }"
|
||||
@click="selectPlan(index)"
|
||||
>
|
||||
<view v-if="plan.badge" class="plan-badge" :class="plan.badgeType">
|
||||
{{ plan.badge }}
|
||||
</view>
|
||||
<text class="plan-duration">{{ plan.name }}</text>
|
||||
<view class="plan-price">
|
||||
<text class="currency">¥</text>
|
||||
<text class="amount">{{ plan.price / 100 }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Benefits -->
|
||||
<view class="benefits-card">
|
||||
<view class="card-header">
|
||||
<uni-icons type="vip-filled" size="20" color="#ff3b30" />
|
||||
<text class="card-title">会员专属权益</text>
|
||||
</view>
|
||||
<view class="benefits-grid">
|
||||
<view
|
||||
v-for="(benefit, index) in benefits"
|
||||
:key="index"
|
||||
class="benefit-item"
|
||||
>
|
||||
<view class="benefit-icon-box" :style="{ background: benefit.bg }">
|
||||
<uni-icons
|
||||
:type="benefit.icon"
|
||||
size="24"
|
||||
:color="benefit.color"
|
||||
/>
|
||||
</view>
|
||||
<text class="benefit-name">{{ benefit.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Purchase Notes -->
|
||||
<view class="notes-section">
|
||||
<text class="notes-title">购买说明</text>
|
||||
<view class="notes-list">
|
||||
<view class="note-item" v-for="(note, index) in notes" :key="index">
|
||||
<text class="dot">•</text>
|
||||
<text class="note-text">{{ note }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- Bottom Action Bar -->
|
||||
<view class="bottom-bar safe-area-bottom">
|
||||
<button class="buy-btn" @click="handlePurchase">
|
||||
<text>立即开通</text>
|
||||
<uni-icons
|
||||
type="arrowright"
|
||||
size="18"
|
||||
color="#fff"
|
||||
style="margin-left: 4rpx"
|
||||
/>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from "vue";
|
||||
import { storeToRefs } from "pinia";
|
||||
|
||||
import { useUserStore } from "@/stores/user";
|
||||
import { createOrder, getVipPlan } from "@/api/pay.js";
|
||||
import NavBar from "@/components/NavBar/NavBar.vue";
|
||||
import { getPlatformProvider } from "@/utils/system";
|
||||
|
||||
const userStore = useUserStore();
|
||||
const { userInfo } = storeToRefs(userStore);
|
||||
|
||||
const selectedPlanIndex = ref(1);
|
||||
|
||||
const plans = ref([]);
|
||||
|
||||
const benefits = [
|
||||
{ name: "纯净无广", icon: "star-filled", color: "#ff3b30", bg: "#fff0f0" },
|
||||
{ name: "多次下载", icon: "image-filled", color: "#ff6b00", bg: "#fff7e6" },
|
||||
{
|
||||
name: "会员精选头像",
|
||||
icon: "medal-filled",
|
||||
color: "#bfa46f",
|
||||
bg: "#fffbe6",
|
||||
},
|
||||
{
|
||||
name: "会员精选模版",
|
||||
icon: "upload-filled",
|
||||
color: "#ff3b30",
|
||||
bg: "#fff0f0",
|
||||
},
|
||||
{
|
||||
name: "数据永久保存",
|
||||
icon: "paperplane-filled",
|
||||
color: "#409eff",
|
||||
bg: "#ecf5ff",
|
||||
},
|
||||
{ name: "1对1服务", icon: "headphones", color: "#9053fa", bg: "#f5f0ff" },
|
||||
];
|
||||
|
||||
const notes = [
|
||||
"会员服务为虚拟产品,支付后立即生效,不支持退款。",
|
||||
"会员权益在有效期内全平台通用。",
|
||||
"如有疑问,请通过“我的-使用说明”联系客服处理。",
|
||||
"最终解释权归 本平台所有。",
|
||||
];
|
||||
|
||||
onMounted(() => {
|
||||
getVipPlanList();
|
||||
});
|
||||
|
||||
const getVipPlanList = async () => {
|
||||
const planRes = await getVipPlan();
|
||||
plans.value = planRes;
|
||||
};
|
||||
|
||||
const selectPlan = (index) => {
|
||||
selectedPlanIndex.value = index;
|
||||
};
|
||||
|
||||
const handlePurchase = async () => {
|
||||
if (selectedPlanIndex.value < 0 || !plans.value[selectedPlanIndex.value]) {
|
||||
uni.showToast({ title: "请选择会员方案", icon: "none" });
|
||||
return;
|
||||
}
|
||||
|
||||
const plan = plans.value[selectedPlanIndex.value];
|
||||
|
||||
uni.showLoading({ title: "正在发起支付...", mask: true });
|
||||
|
||||
try {
|
||||
const orderRes = await createOrder({
|
||||
planId: plan.id,
|
||||
});
|
||||
|
||||
if (orderRes?.payParams) {
|
||||
const platform = getPlatformProvider();
|
||||
const provider = platform === "mp-alipay" ? "alipay" : "wxpay";
|
||||
|
||||
uni.requestPayment({
|
||||
provider: provider,
|
||||
...orderRes.payParams,
|
||||
success(res) {
|
||||
uni.showToast({ title: "支付成功", icon: "success" });
|
||||
// 支付成功后可以刷新用户信息
|
||||
userStore.fetchUserInfo();
|
||||
},
|
||||
fail(err) {
|
||||
console.log("payment fail", err);
|
||||
// 支付宝取消支付的错误码是 6001
|
||||
// 微信取消支付的错误信息包含 cancel
|
||||
if (err.errMsg.indexOf("cancel") > -1 || err.resultCode === "6001") {
|
||||
uni.showToast({ title: "支付已取消", icon: "none" });
|
||||
} else {
|
||||
uni.showToast({ title: "支付失败", icon: "none" });
|
||||
}
|
||||
},
|
||||
complete() {
|
||||
uni.hideLoading();
|
||||
},
|
||||
});
|
||||
} else {
|
||||
uni.hideLoading();
|
||||
uni.showToast({ title: "获取支付参数失败", icon: "none" });
|
||||
}
|
||||
} catch (e) {
|
||||
uni.hideLoading();
|
||||
uni.showToast({ title: "创建订单失败", icon: "none" });
|
||||
console.error(e);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.vip-page {
|
||||
min-height: 100vh;
|
||||
background-color: #f8f8f8;
|
||||
box-sizing: border-box;
|
||||
padding-bottom: 200rpx; // Space for bottom bar
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
/* User Card */
|
||||
.user-card {
|
||||
background: #fff;
|
||||
border-radius: 30rpx;
|
||||
padding: 30rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 10rpx 40rpx rgba(255, 59, 48, 0.08);
|
||||
margin-bottom: 40rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
// Decorative gradient background hint
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -20%;
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
background: radial-gradient(
|
||||
circle,
|
||||
rgba(255, 59, 48, 0.1) 0%,
|
||||
transparent 70%
|
||||
);
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-box {
|
||||
position: relative;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 100rpx;
|
||||
height: 100rpx;
|
||||
border-radius: 50%;
|
||||
border: 4rpx solid #fff;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.fire-badge {
|
||||
position: absolute;
|
||||
top: -6rpx;
|
||||
right: -6rpx;
|
||||
background: #ff3b30;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 2rpx solid #fff;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.name-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
|
||||
.username {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-right: 16rpx;
|
||||
}
|
||||
|
||||
.vip-tag {
|
||||
background: rgba(255, 59, 48, 0.1);
|
||||
color: #ff3b30;
|
||||
font-size: 20rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
border-radius: 20rpx;
|
||||
font-weight: 500;
|
||||
|
||||
&.gray {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
color: #666;
|
||||
}
|
||||
}
|
||||
|
||||
.expiry-date {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
/* Plans Grid */
|
||||
.section-title {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
font-weight: 500;
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.plans-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.plan-card {
|
||||
width: 330rpx; // (750 - 60 - 30 gap) / 2
|
||||
height: 180rpx;
|
||||
background: #fff;
|
||||
border-radius: 24rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 30rpx;
|
||||
position: relative;
|
||||
border: 2rpx solid transparent;
|
||||
transition: all 0.2s;
|
||||
|
||||
&.active {
|
||||
border-color: #ff3b30;
|
||||
background: #fff5f5;
|
||||
|
||||
.plan-price {
|
||||
color: #ff3b30;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.plan-badge {
|
||||
position: absolute;
|
||||
top: -16rpx;
|
||||
right: -10rpx;
|
||||
font-size: 20rpx;
|
||||
color: #fff;
|
||||
padding: 4rpx 12rpx;
|
||||
border-radius: 12rpx 0 12rpx 0;
|
||||
box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
|
||||
|
||||
&.hot {
|
||||
background: #ff3b30;
|
||||
}
|
||||
|
||||
&.best {
|
||||
background: #e6a23c;
|
||||
}
|
||||
}
|
||||
|
||||
.plan-duration {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.plan-price {
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
.currency {
|
||||
font-size: 28rpx;
|
||||
margin-right: 4rpx;
|
||||
}
|
||||
|
||||
.amount {
|
||||
font-size: 48rpx;
|
||||
}
|
||||
|
||||
/* Benefits Card */
|
||||
.benefits-card {
|
||||
background: #fff;
|
||||
border-radius: 30rpx;
|
||||
padding: 30rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
margin-left: 12rpx;
|
||||
}
|
||||
|
||||
.benefits-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.benefit-item {
|
||||
width: 33.33%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
&:nth-last-child(-n + 3) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.benefit-icon-box {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 16rpx;
|
||||
}
|
||||
|
||||
.benefit-name {
|
||||
font-size: 24rpx;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
/* Notes */
|
||||
.notes-section {
|
||||
padding: 0 10rpx;
|
||||
margin-bottom: 40rpx;
|
||||
}
|
||||
|
||||
.notes-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
color: #666;
|
||||
margin-bottom: 16rpx;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.notes-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.note-item {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 12rpx;
|
||||
}
|
||||
|
||||
.dot {
|
||||
color: #999;
|
||||
margin-right: 10rpx;
|
||||
font-size: 24rpx;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.note-text {
|
||||
flex: 1;
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Bottom Bar */
|
||||
.bottom-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
padding: 20rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);
|
||||
padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
|
||||
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
.buy-btn {
|
||||
background: linear-gradient(90deg, #ff3b30 0%, #ff1a1a 100%);
|
||||
color: #fff;
|
||||
border-radius: 50rpx;
|
||||
height: 90rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
border: none;
|
||||
|
||||
&:active {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
21
pages/webview/index.vue
Normal file
@@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<view>
|
||||
<web-view :src="url"></web-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import { onLoad } from "@dcloudio/uni-app";
|
||||
|
||||
const url = ref("");
|
||||
|
||||
onLoad((options) => {
|
||||
if (options.url) {
|
||||
url.value = decodeURIComponent(options.url);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
53
polyfill.js
Normal file
@@ -0,0 +1,53 @@
|
||||
// #ifdef MP-WEIXIN
|
||||
// 拦截 wx.getSystemInfoSync 和 wx.getSystemInfo,避免 uni-app 内部或第三方库调用导致微信原生警告
|
||||
if (typeof wx !== 'undefined' && wx.getSystemInfoSync) {
|
||||
const originalGetSystemInfoSync = wx.getSystemInfoSync;
|
||||
wx.getSystemInfoSync = function () {
|
||||
if (wx.getWindowInfo && wx.getAppBaseInfo && wx.getDeviceInfo && wx.getAppAuthorizeSetting && wx.getSystemSetting) {
|
||||
try {
|
||||
const windowInfo = wx.getWindowInfo() || {};
|
||||
const appBaseInfo = wx.getAppBaseInfo() || {};
|
||||
const deviceInfo = wx.getDeviceInfo() || {};
|
||||
const appAuthorizeSetting = wx.getAppAuthorizeSetting() || {};
|
||||
const systemSetting = wx.getSystemSetting() || {};
|
||||
|
||||
let safeAreaInsets = undefined;
|
||||
if (windowInfo.safeArea) {
|
||||
safeAreaInsets = {
|
||||
top: windowInfo.safeArea.top,
|
||||
left: windowInfo.safeArea.left,
|
||||
right: windowInfo.screenWidth - windowInfo.safeArea.right,
|
||||
bottom: windowInfo.screenHeight - windowInfo.safeArea.bottom
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
...windowInfo,
|
||||
...appBaseInfo,
|
||||
...deviceInfo,
|
||||
...appAuthorizeSetting,
|
||||
...systemSetting,
|
||||
safeAreaInsets,
|
||||
system: deviceInfo.system,
|
||||
platform: deviceInfo.platform,
|
||||
model: deviceInfo.model
|
||||
};
|
||||
} catch (e) {
|
||||
return originalGetSystemInfoSync.call(wx);
|
||||
}
|
||||
}
|
||||
return originalGetSystemInfoSync.call(wx);
|
||||
};
|
||||
const originalGetSystemInfo = wx.getSystemInfo;
|
||||
wx.getSystemInfo = function (options) {
|
||||
if (wx.getSystemInfoAsync) {
|
||||
try {
|
||||
return wx.getSystemInfoAsync(options);
|
||||
} catch (e) {
|
||||
return originalGetSystemInfo.call(wx, options);
|
||||
}
|
||||
}
|
||||
return originalGetSystemInfo.call(wx, options);
|
||||
};
|
||||
}
|
||||
// #endif
|
||||
BIN
static/.DS_Store
vendored
Normal file
BIN
static/images/.DS_Store
vendored
Normal file
BIN
static/images/default-avatar.png
Normal file
|
After Width: | Height: | Size: 6.6 KiB |
BIN
static/images/qrcode.jpg
Normal file
|
After Width: | Height: | Size: 71 KiB |
BIN
static/images/tabBar/creation.png
Normal file
|
After Width: | Height: | Size: 6.0 KiB |
BIN
static/images/tabBar/creation_s.png
Normal file
|
After Width: | Height: | Size: 6.1 KiB |
BIN
static/images/tabBar/home.png
Normal file
|
After Width: | Height: | Size: 5.0 KiB |
BIN
static/images/tabBar/home_s.png
Normal file
|
After Width: | Height: | Size: 5.0 KiB |
BIN
static/images/tabBar/me.png
Normal file
|
After Width: | Height: | Size: 5.9 KiB |
BIN
static/images/tabBar/me_s.png
Normal file
|
After Width: | Height: | Size: 5.8 KiB |
88
stores/user.js
Normal file
@@ -0,0 +1,88 @@
|
||||
import { defineStore } from "pinia";
|
||||
import { wxLogin, wxGetUserProfile } from "@/utils/login.js";
|
||||
import { getPlatformProvider } from "@/utils/system";
|
||||
import { getUserInfo, getUserAsset } from "@/api/auth.js";
|
||||
|
||||
export const useUserStore = defineStore("user", {
|
||||
state: () => ({
|
||||
token: "",
|
||||
userInfo: {},
|
||||
}),
|
||||
actions: {
|
||||
setToken(token) {
|
||||
this.token = token;
|
||||
uni.setStorageSync("token", token); // 持久化 tokenx
|
||||
},
|
||||
setUserInfo(userInfo) {
|
||||
this.userInfo = userInfo;
|
||||
uni.setStorageSync("userInfo", JSON.stringify(userInfo)); // 持久化用户信息
|
||||
},
|
||||
loadFromStorage() {
|
||||
const token = uni.getStorageSync("token");
|
||||
const userInfoStr = uni.getStorageSync("userInfo");
|
||||
if (token) this.token = token;
|
||||
if (userInfoStr) {
|
||||
try {
|
||||
this.userInfo = JSON.parse(userInfoStr);
|
||||
} catch (e) {
|
||||
this.userInfo = {};
|
||||
}
|
||||
}
|
||||
},
|
||||
clear() {
|
||||
this.token = "";
|
||||
this.userInfo = {};
|
||||
uni.removeStorageSync("token");
|
||||
uni.removeStorageSync("userInfo");
|
||||
},
|
||||
loadUserInfo() {
|
||||
const userStr = uni.getStorageSync("userInfo");
|
||||
if (userStr) {
|
||||
try {
|
||||
this.userInfo = JSON.parse(userStr);
|
||||
} catch (e) {
|
||||
this.userInfo = {};
|
||||
}
|
||||
}
|
||||
},
|
||||
async fetchUserInfo() {
|
||||
try {
|
||||
const res = await getUserInfo();
|
||||
if (res) {
|
||||
this.setUserInfo(res);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("fetchUserInfo error", e);
|
||||
}
|
||||
},
|
||||
async fetchUserAssets() {
|
||||
try {
|
||||
if (!this?.userInfo?.id) return;
|
||||
const res = await getUserAsset();
|
||||
if (res) {
|
||||
const newInfo = { ...this.userInfo, ...res };
|
||||
if (res.points !== undefined) {
|
||||
newInfo.points = res.points;
|
||||
}
|
||||
|
||||
if (res.exp !== undefined) {
|
||||
newInfo.exp = res.exp;
|
||||
}
|
||||
|
||||
if (res.level !== undefined) {
|
||||
newInfo.level = res.level;
|
||||
}
|
||||
this.setUserInfo(newInfo);
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("fetchUserAssets error", e);
|
||||
}
|
||||
},
|
||||
logout() {
|
||||
this.userInfo = {};
|
||||
this.token = "";
|
||||
uni.removeStorageSync("userInfo");
|
||||
uni.removeStorageSync("token");
|
||||
},
|
||||
},
|
||||
});
|
||||
13
uni.promisify.adaptor.js
Normal file
@@ -0,0 +1,13 @@
|
||||
uni.addInterceptor({
|
||||
returnValue (res) {
|
||||
if (!(!!res && (typeof res === "object" || typeof res === "function") && typeof res.then === "function")) {
|
||||
return res;
|
||||
}
|
||||
return new Promise((resolve, reject) => {
|
||||
res.then((res) => {
|
||||
if (!res) return resolve(res)
|
||||
return res[0] ? reject(res[0]) : resolve(res[1])
|
||||
});
|
||||
});
|
||||
},
|
||||
});
|
||||
76
uni.scss
Normal file
@@ -0,0 +1,76 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
|
||||
*/
|
||||
@import "@/common/style/base-style.scss";
|
||||
/* 颜色变量 */
|
||||
|
||||
/* 行为相关颜色 */
|
||||
$uni-color-primary: #007aff;
|
||||
$uni-color-success: #4cd964;
|
||||
$uni-color-warning: #f0ad4e;
|
||||
$uni-color-error: #dd524d;
|
||||
|
||||
/* 文字基本颜色 */
|
||||
$uni-text-color:#333;//基本色
|
||||
$uni-text-color-inverse:#fff;//反色
|
||||
$uni-text-color-grey:#999;//辅助灰色,如加载更多的提示信息
|
||||
$uni-text-color-placeholder: #808080;
|
||||
$uni-text-color-disable:#c0c0c0;
|
||||
|
||||
/* 背景颜色 */
|
||||
$uni-bg-color:#ffffff;
|
||||
$uni-bg-color-grey:#f8f8f8;
|
||||
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
|
||||
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
|
||||
|
||||
/* 边框颜色 */
|
||||
$uni-border-color:#c8c7cc;
|
||||
|
||||
/* 尺寸变量 */
|
||||
|
||||
/* 文字尺寸 */
|
||||
$uni-font-size-sm:12px;
|
||||
$uni-font-size-base:14px;
|
||||
$uni-font-size-lg:16px;
|
||||
|
||||
/* 图片尺寸 */
|
||||
$uni-img-size-sm:20px;
|
||||
$uni-img-size-base:26px;
|
||||
$uni-img-size-lg:40px;
|
||||
|
||||
/* Border Radius */
|
||||
$uni-border-radius-sm: 2px;
|
||||
$uni-border-radius-base: 3px;
|
||||
$uni-border-radius-lg: 6px;
|
||||
$uni-border-radius-circle: 50%;
|
||||
|
||||
/* 水平间距 */
|
||||
$uni-spacing-row-sm: 5px;
|
||||
$uni-spacing-row-base: 10px;
|
||||
$uni-spacing-row-lg: 15px;
|
||||
|
||||
/* 垂直间距 */
|
||||
$uni-spacing-col-sm: 4px;
|
||||
$uni-spacing-col-base: 8px;
|
||||
$uni-spacing-col-lg: 12px;
|
||||
|
||||
/* 透明度 */
|
||||
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
|
||||
|
||||
/* 文章场景相关 */
|
||||
$uni-color-title: #2C405A; // 文章标题颜色
|
||||
$uni-font-size-title:20px;
|
||||
$uni-color-subtitle: #555555; // 二级标题颜色
|
||||
$uni-font-size-subtitle:26px;
|
||||
$uni-color-paragraph: #3F536E; // 文章段落颜色
|
||||
$uni-font-size-paragraph:15px;
|
||||
44
uni_modules/uni-icons/changelog.md
Normal file
@@ -0,0 +1,44 @@
|
||||
## 2.0.12(2025-08-26)
|
||||
- 优化 uni-app x 下 size 类型问题
|
||||
## 2.0.11(2025-08-18)
|
||||
- 修复 图标点击事件返回
|
||||
## 2.0.9(2024-01-12)
|
||||
fix: 修复图标大小默认值错误的问题
|
||||
## 2.0.8(2023-12-14)
|
||||
- 修复 项目未使用 ts 情况下,打包报错的bug
|
||||
## 2.0.7(2023-12-14)
|
||||
- 修复 size 属性为 string 时,不加单位导致尺寸异常的bug
|
||||
## 2.0.6(2023-12-11)
|
||||
- 优化 兼容老版本icon类型,如 top ,bottom 等
|
||||
## 2.0.5(2023-12-11)
|
||||
- 优化 兼容老版本icon类型,如 top ,bottom 等
|
||||
## 2.0.4(2023-12-06)
|
||||
- 优化 uni-app x 下示例项目图标排序
|
||||
## 2.0.3(2023-12-06)
|
||||
- 修复 nvue下引入组件报错的bug
|
||||
## 2.0.2(2023-12-05)
|
||||
-优化 size 属性支持单位
|
||||
## 2.0.1(2023-12-05)
|
||||
- 新增 uni-app x 支持定义图标
|
||||
## 1.3.5(2022-01-24)
|
||||
- 优化 size 属性可以传入不带单位的字符串数值
|
||||
## 1.3.4(2022-01-24)
|
||||
- 优化 size 支持其他单位
|
||||
## 1.3.3(2022-01-17)
|
||||
- 修复 nvue 有些图标不显示的bug,兼容老版本图标
|
||||
## 1.3.2(2021-12-01)
|
||||
- 优化 示例可复制图标名称
|
||||
## 1.3.1(2021-11-23)
|
||||
- 优化 兼容旧组件 type 值
|
||||
## 1.3.0(2021-11-19)
|
||||
- 新增 更多图标
|
||||
- 优化 自定义图标使用方式
|
||||
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-icons](https://uniapp.dcloud.io/component/uniui/uni-icons)
|
||||
## 1.1.7(2021-11-08)
|
||||
## 1.2.0(2021-07-30)
|
||||
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||
## 1.1.5(2021-05-12)
|
||||
- 新增 组件示例地址
|
||||
## 1.1.4(2021-02-05)
|
||||
- 调整为uni_modules目录规范
|
||||
91
uni_modules/uni-icons/components/uni-icons/uni-icons.uvue
Normal file
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<text class="uni-icons" :style="styleObj">
|
||||
<slot>{{unicode}}</slot>
|
||||
</text>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { fontData, IconsDataItem } from './uniicons_file'
|
||||
|
||||
/**
|
||||
* Icons 图标
|
||||
* @description 用于展示 icon 图标
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=28
|
||||
* @property {Number} size 图标大小
|
||||
* @property {String} type 图标图案,参考示例
|
||||
* @property {String} color 图标颜色
|
||||
* @property {String} customPrefix 自定义图标
|
||||
* @event {Function} click 点击 Icon 触发事件
|
||||
*/
|
||||
export default {
|
||||
name: "uni-icons",
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#333333'
|
||||
},
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 16
|
||||
},
|
||||
fontFamily: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
unicode() : string {
|
||||
let codes = fontData.find((item : IconsDataItem) : boolean => { return item.font_class == this.type })
|
||||
if (codes !== null) {
|
||||
return codes.unicode
|
||||
}
|
||||
return ''
|
||||
},
|
||||
iconSize() : string {
|
||||
const size = this.size
|
||||
if (typeof size == 'string') {
|
||||
const reg = /^[0-9]*$/g
|
||||
return reg.test(size as string) ? '' + size + 'px' : '' + size;
|
||||
// return '' + this.size
|
||||
}
|
||||
return this.getFontSize(size as number)
|
||||
},
|
||||
styleObj() : UTSJSONObject {
|
||||
if (this.fontFamily !== '') {
|
||||
return { color: this.color, fontSize: this.iconSize, fontFamily: this.fontFamily }
|
||||
}
|
||||
return { color: this.color, fontSize: this.iconSize }
|
||||
}
|
||||
},
|
||||
created() { },
|
||||
methods: {
|
||||
/**
|
||||
* 字体大小
|
||||
*/
|
||||
getFontSize(size : number) : string {
|
||||
return size + 'px';
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@font-face {
|
||||
font-family: UniIconsFontFamily;
|
||||
src: url('./uniicons.ttf');
|
||||
}
|
||||
|
||||
.uni-icons {
|
||||
font-family: UniIconsFontFamily;
|
||||
font-size: 18px;
|
||||
font-style: normal;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
110
uni_modules/uni-icons/components/uni-icons/uni-icons.vue
Normal file
@@ -0,0 +1,110 @@
|
||||
<template>
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<text :style="styleObj" class="uni-icons" @click="_onClick">{{unicode}}</text>
|
||||
<!-- #endif -->
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<text :style="styleObj" class="uni-icons" :class="['uniui-'+type,customPrefix,customPrefix?type:'']" @click="_onClick">
|
||||
<slot></slot>
|
||||
</text>
|
||||
<!-- #endif -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { fontData } from './uniicons_file_vue.js';
|
||||
|
||||
const getVal = (val) => {
|
||||
const reg = /^[0-9]*$/g
|
||||
return (typeof val === 'number' || reg.test(val)) ? val + 'px' : val;
|
||||
}
|
||||
|
||||
// #ifdef APP-NVUE
|
||||
var domModule = weex.requireModule('dom');
|
||||
import iconUrl from './uniicons.ttf'
|
||||
domModule.addRule('fontFace', {
|
||||
'fontFamily': "uniicons",
|
||||
'src': "url('" + iconUrl + "')"
|
||||
});
|
||||
// #endif
|
||||
|
||||
/**
|
||||
* Icons 图标
|
||||
* @description 用于展示 icons 图标
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=28
|
||||
* @property {Number} size 图标大小
|
||||
* @property {String} type 图标图案,参考示例
|
||||
* @property {String} color 图标颜色
|
||||
* @property {String} customPrefix 自定义图标
|
||||
* @event {Function} click 点击 Icon 触发事件
|
||||
*/
|
||||
export default {
|
||||
name: 'UniIcons',
|
||||
emits: ['click'],
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '#333333'
|
||||
},
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 16
|
||||
},
|
||||
customPrefix: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
fontFamily: {
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
icons: fontData
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
unicode() {
|
||||
let code = this.icons.find(v => v.font_class === this.type)
|
||||
if (code) {
|
||||
return code.unicode
|
||||
}
|
||||
return ''
|
||||
},
|
||||
iconSize() {
|
||||
return getVal(this.size)
|
||||
},
|
||||
styleObj() {
|
||||
if (this.fontFamily !== '') {
|
||||
return `color: ${this.color}; font-size: ${this.iconSize}; font-family: ${this.fontFamily};`
|
||||
}
|
||||
return `color: ${this.color}; font-size: ${this.iconSize};`
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
_onClick(e) {
|
||||
this.$emit('click', e)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* #ifndef APP-NVUE */
|
||||
@import './uniicons.css';
|
||||
|
||||
@font-face {
|
||||
font-family: uniicons;
|
||||
src: url('./uniicons.ttf');
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
.uni-icons {
|
||||
font-family: uniicons;
|
||||
text-decoration: none;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
664
uni_modules/uni-icons/components/uni-icons/uniicons.css
Normal file
@@ -0,0 +1,664 @@
|
||||
|
||||
.uniui-cart-filled:before {
|
||||
content: "\e6d0";
|
||||
}
|
||||
|
||||
.uniui-gift-filled:before {
|
||||
content: "\e6c4";
|
||||
}
|
||||
|
||||
.uniui-color:before {
|
||||
content: "\e6cf";
|
||||
}
|
||||
|
||||
.uniui-wallet:before {
|
||||
content: "\e6b1";
|
||||
}
|
||||
|
||||
.uniui-settings-filled:before {
|
||||
content: "\e6ce";
|
||||
}
|
||||
|
||||
.uniui-auth-filled:before {
|
||||
content: "\e6cc";
|
||||
}
|
||||
|
||||
.uniui-shop-filled:before {
|
||||
content: "\e6cd";
|
||||
}
|
||||
|
||||
.uniui-staff-filled:before {
|
||||
content: "\e6cb";
|
||||
}
|
||||
|
||||
.uniui-vip-filled:before {
|
||||
content: "\e6c6";
|
||||
}
|
||||
|
||||
.uniui-plus-filled:before {
|
||||
content: "\e6c7";
|
||||
}
|
||||
|
||||
.uniui-folder-add-filled:before {
|
||||
content: "\e6c8";
|
||||
}
|
||||
|
||||
.uniui-color-filled:before {
|
||||
content: "\e6c9";
|
||||
}
|
||||
|
||||
.uniui-tune-filled:before {
|
||||
content: "\e6ca";
|
||||
}
|
||||
|
||||
.uniui-calendar-filled:before {
|
||||
content: "\e6c0";
|
||||
}
|
||||
|
||||
.uniui-notification-filled:before {
|
||||
content: "\e6c1";
|
||||
}
|
||||
|
||||
.uniui-wallet-filled:before {
|
||||
content: "\e6c2";
|
||||
}
|
||||
|
||||
.uniui-medal-filled:before {
|
||||
content: "\e6c3";
|
||||
}
|
||||
|
||||
.uniui-fire-filled:before {
|
||||
content: "\e6c5";
|
||||
}
|
||||
|
||||
.uniui-refreshempty:before {
|
||||
content: "\e6bf";
|
||||
}
|
||||
|
||||
.uniui-location-filled:before {
|
||||
content: "\e6af";
|
||||
}
|
||||
|
||||
.uniui-person-filled:before {
|
||||
content: "\e69d";
|
||||
}
|
||||
|
||||
.uniui-personadd-filled:before {
|
||||
content: "\e698";
|
||||
}
|
||||
|
||||
.uniui-arrowthinleft:before {
|
||||
content: "\e6d2";
|
||||
}
|
||||
|
||||
.uniui-arrowthinup:before {
|
||||
content: "\e6d3";
|
||||
}
|
||||
|
||||
.uniui-arrowthindown:before {
|
||||
content: "\e6d4";
|
||||
}
|
||||
|
||||
.uniui-back:before {
|
||||
content: "\e6b9";
|
||||
}
|
||||
|
||||
.uniui-forward:before {
|
||||
content: "\e6ba";
|
||||
}
|
||||
|
||||
.uniui-arrow-right:before {
|
||||
content: "\e6bb";
|
||||
}
|
||||
|
||||
.uniui-arrow-left:before {
|
||||
content: "\e6bc";
|
||||
}
|
||||
|
||||
.uniui-arrow-up:before {
|
||||
content: "\e6bd";
|
||||
}
|
||||
|
||||
.uniui-arrow-down:before {
|
||||
content: "\e6be";
|
||||
}
|
||||
|
||||
.uniui-arrowthinright:before {
|
||||
content: "\e6d1";
|
||||
}
|
||||
|
||||
.uniui-down:before {
|
||||
content: "\e6b8";
|
||||
}
|
||||
|
||||
.uniui-bottom:before {
|
||||
content: "\e6b8";
|
||||
}
|
||||
|
||||
.uniui-arrowright:before {
|
||||
content: "\e6d5";
|
||||
}
|
||||
|
||||
.uniui-right:before {
|
||||
content: "\e6b5";
|
||||
}
|
||||
|
||||
.uniui-up:before {
|
||||
content: "\e6b6";
|
||||
}
|
||||
|
||||
.uniui-top:before {
|
||||
content: "\e6b6";
|
||||
}
|
||||
|
||||
.uniui-left:before {
|
||||
content: "\e6b7";
|
||||
}
|
||||
|
||||
.uniui-arrowup:before {
|
||||
content: "\e6d6";
|
||||
}
|
||||
|
||||
.uniui-eye:before {
|
||||
content: "\e651";
|
||||
}
|
||||
|
||||
.uniui-eye-filled:before {
|
||||
content: "\e66a";
|
||||
}
|
||||
|
||||
.uniui-eye-slash:before {
|
||||
content: "\e6b3";
|
||||
}
|
||||
|
||||
.uniui-eye-slash-filled:before {
|
||||
content: "\e6b4";
|
||||
}
|
||||
|
||||
.uniui-info-filled:before {
|
||||
content: "\e649";
|
||||
}
|
||||
|
||||
.uniui-reload:before {
|
||||
content: "\e6b2";
|
||||
}
|
||||
|
||||
.uniui-micoff-filled:before {
|
||||
content: "\e6b0";
|
||||
}
|
||||
|
||||
.uniui-map-pin-ellipse:before {
|
||||
content: "\e6ac";
|
||||
}
|
||||
|
||||
.uniui-map-pin:before {
|
||||
content: "\e6ad";
|
||||
}
|
||||
|
||||
.uniui-location:before {
|
||||
content: "\e6ae";
|
||||
}
|
||||
|
||||
.uniui-starhalf:before {
|
||||
content: "\e683";
|
||||
}
|
||||
|
||||
.uniui-star:before {
|
||||
content: "\e688";
|
||||
}
|
||||
|
||||
.uniui-star-filled:before {
|
||||
content: "\e68f";
|
||||
}
|
||||
|
||||
.uniui-calendar:before {
|
||||
content: "\e6a0";
|
||||
}
|
||||
|
||||
.uniui-fire:before {
|
||||
content: "\e6a1";
|
||||
}
|
||||
|
||||
.uniui-medal:before {
|
||||
content: "\e6a2";
|
||||
}
|
||||
|
||||
.uniui-font:before {
|
||||
content: "\e6a3";
|
||||
}
|
||||
|
||||
.uniui-gift:before {
|
||||
content: "\e6a4";
|
||||
}
|
||||
|
||||
.uniui-link:before {
|
||||
content: "\e6a5";
|
||||
}
|
||||
|
||||
.uniui-notification:before {
|
||||
content: "\e6a6";
|
||||
}
|
||||
|
||||
.uniui-staff:before {
|
||||
content: "\e6a7";
|
||||
}
|
||||
|
||||
.uniui-vip:before {
|
||||
content: "\e6a8";
|
||||
}
|
||||
|
||||
.uniui-folder-add:before {
|
||||
content: "\e6a9";
|
||||
}
|
||||
|
||||
.uniui-tune:before {
|
||||
content: "\e6aa";
|
||||
}
|
||||
|
||||
.uniui-auth:before {
|
||||
content: "\e6ab";
|
||||
}
|
||||
|
||||
.uniui-person:before {
|
||||
content: "\e699";
|
||||
}
|
||||
|
||||
.uniui-email-filled:before {
|
||||
content: "\e69a";
|
||||
}
|
||||
|
||||
.uniui-phone-filled:before {
|
||||
content: "\e69b";
|
||||
}
|
||||
|
||||
.uniui-phone:before {
|
||||
content: "\e69c";
|
||||
}
|
||||
|
||||
.uniui-email:before {
|
||||
content: "\e69e";
|
||||
}
|
||||
|
||||
.uniui-personadd:before {
|
||||
content: "\e69f";
|
||||
}
|
||||
|
||||
.uniui-chatboxes-filled:before {
|
||||
content: "\e692";
|
||||
}
|
||||
|
||||
.uniui-contact:before {
|
||||
content: "\e693";
|
||||
}
|
||||
|
||||
.uniui-chatbubble-filled:before {
|
||||
content: "\e694";
|
||||
}
|
||||
|
||||
.uniui-contact-filled:before {
|
||||
content: "\e695";
|
||||
}
|
||||
|
||||
.uniui-chatboxes:before {
|
||||
content: "\e696";
|
||||
}
|
||||
|
||||
.uniui-chatbubble:before {
|
||||
content: "\e697";
|
||||
}
|
||||
|
||||
.uniui-upload-filled:before {
|
||||
content: "\e68e";
|
||||
}
|
||||
|
||||
.uniui-upload:before {
|
||||
content: "\e690";
|
||||
}
|
||||
|
||||
.uniui-weixin:before {
|
||||
content: "\e691";
|
||||
}
|
||||
|
||||
.uniui-compose:before {
|
||||
content: "\e67f";
|
||||
}
|
||||
|
||||
.uniui-qq:before {
|
||||
content: "\e680";
|
||||
}
|
||||
|
||||
.uniui-download-filled:before {
|
||||
content: "\e681";
|
||||
}
|
||||
|
||||
.uniui-pyq:before {
|
||||
content: "\e682";
|
||||
}
|
||||
|
||||
.uniui-sound:before {
|
||||
content: "\e684";
|
||||
}
|
||||
|
||||
.uniui-trash-filled:before {
|
||||
content: "\e685";
|
||||
}
|
||||
|
||||
.uniui-sound-filled:before {
|
||||
content: "\e686";
|
||||
}
|
||||
|
||||
.uniui-trash:before {
|
||||
content: "\e687";
|
||||
}
|
||||
|
||||
.uniui-videocam-filled:before {
|
||||
content: "\e689";
|
||||
}
|
||||
|
||||
.uniui-spinner-cycle:before {
|
||||
content: "\e68a";
|
||||
}
|
||||
|
||||
.uniui-weibo:before {
|
||||
content: "\e68b";
|
||||
}
|
||||
|
||||
.uniui-videocam:before {
|
||||
content: "\e68c";
|
||||
}
|
||||
|
||||
.uniui-download:before {
|
||||
content: "\e68d";
|
||||
}
|
||||
|
||||
.uniui-help:before {
|
||||
content: "\e679";
|
||||
}
|
||||
|
||||
.uniui-navigate-filled:before {
|
||||
content: "\e67a";
|
||||
}
|
||||
|
||||
.uniui-plusempty:before {
|
||||
content: "\e67b";
|
||||
}
|
||||
|
||||
.uniui-smallcircle:before {
|
||||
content: "\e67c";
|
||||
}
|
||||
|
||||
.uniui-minus-filled:before {
|
||||
content: "\e67d";
|
||||
}
|
||||
|
||||
.uniui-micoff:before {
|
||||
content: "\e67e";
|
||||
}
|
||||
|
||||
.uniui-closeempty:before {
|
||||
content: "\e66c";
|
||||
}
|
||||
|
||||
.uniui-clear:before {
|
||||
content: "\e66d";
|
||||
}
|
||||
|
||||
.uniui-navigate:before {
|
||||
content: "\e66e";
|
||||
}
|
||||
|
||||
.uniui-minus:before {
|
||||
content: "\e66f";
|
||||
}
|
||||
|
||||
.uniui-image:before {
|
||||
content: "\e670";
|
||||
}
|
||||
|
||||
.uniui-mic:before {
|
||||
content: "\e671";
|
||||
}
|
||||
|
||||
.uniui-paperplane:before {
|
||||
content: "\e672";
|
||||
}
|
||||
|
||||
.uniui-close:before {
|
||||
content: "\e673";
|
||||
}
|
||||
|
||||
.uniui-help-filled:before {
|
||||
content: "\e674";
|
||||
}
|
||||
|
||||
.uniui-paperplane-filled:before {
|
||||
content: "\e675";
|
||||
}
|
||||
|
||||
.uniui-plus:before {
|
||||
content: "\e676";
|
||||
}
|
||||
|
||||
.uniui-mic-filled:before {
|
||||
content: "\e677";
|
||||
}
|
||||
|
||||
.uniui-image-filled:before {
|
||||
content: "\e678";
|
||||
}
|
||||
|
||||
.uniui-locked-filled:before {
|
||||
content: "\e668";
|
||||
}
|
||||
|
||||
.uniui-info:before {
|
||||
content: "\e669";
|
||||
}
|
||||
|
||||
.uniui-locked:before {
|
||||
content: "\e66b";
|
||||
}
|
||||
|
||||
.uniui-camera-filled:before {
|
||||
content: "\e658";
|
||||
}
|
||||
|
||||
.uniui-chat-filled:before {
|
||||
content: "\e659";
|
||||
}
|
||||
|
||||
.uniui-camera:before {
|
||||
content: "\e65a";
|
||||
}
|
||||
|
||||
.uniui-circle:before {
|
||||
content: "\e65b";
|
||||
}
|
||||
|
||||
.uniui-checkmarkempty:before {
|
||||
content: "\e65c";
|
||||
}
|
||||
|
||||
.uniui-chat:before {
|
||||
content: "\e65d";
|
||||
}
|
||||
|
||||
.uniui-circle-filled:before {
|
||||
content: "\e65e";
|
||||
}
|
||||
|
||||
.uniui-flag:before {
|
||||
content: "\e65f";
|
||||
}
|
||||
|
||||
.uniui-flag-filled:before {
|
||||
content: "\e660";
|
||||
}
|
||||
|
||||
.uniui-gear-filled:before {
|
||||
content: "\e661";
|
||||
}
|
||||
|
||||
.uniui-home:before {
|
||||
content: "\e662";
|
||||
}
|
||||
|
||||
.uniui-home-filled:before {
|
||||
content: "\e663";
|
||||
}
|
||||
|
||||
.uniui-gear:before {
|
||||
content: "\e664";
|
||||
}
|
||||
|
||||
.uniui-smallcircle-filled:before {
|
||||
content: "\e665";
|
||||
}
|
||||
|
||||
.uniui-map-filled:before {
|
||||
content: "\e666";
|
||||
}
|
||||
|
||||
.uniui-map:before {
|
||||
content: "\e667";
|
||||
}
|
||||
|
||||
.uniui-refresh-filled:before {
|
||||
content: "\e656";
|
||||
}
|
||||
|
||||
.uniui-refresh:before {
|
||||
content: "\e657";
|
||||
}
|
||||
|
||||
.uniui-cloud-upload:before {
|
||||
content: "\e645";
|
||||
}
|
||||
|
||||
.uniui-cloud-download-filled:before {
|
||||
content: "\e646";
|
||||
}
|
||||
|
||||
.uniui-cloud-download:before {
|
||||
content: "\e647";
|
||||
}
|
||||
|
||||
.uniui-cloud-upload-filled:before {
|
||||
content: "\e648";
|
||||
}
|
||||
|
||||
.uniui-redo:before {
|
||||
content: "\e64a";
|
||||
}
|
||||
|
||||
.uniui-images-filled:before {
|
||||
content: "\e64b";
|
||||
}
|
||||
|
||||
.uniui-undo-filled:before {
|
||||
content: "\e64c";
|
||||
}
|
||||
|
||||
.uniui-more:before {
|
||||
content: "\e64d";
|
||||
}
|
||||
|
||||
.uniui-more-filled:before {
|
||||
content: "\e64e";
|
||||
}
|
||||
|
||||
.uniui-undo:before {
|
||||
content: "\e64f";
|
||||
}
|
||||
|
||||
.uniui-images:before {
|
||||
content: "\e650";
|
||||
}
|
||||
|
||||
.uniui-paperclip:before {
|
||||
content: "\e652";
|
||||
}
|
||||
|
||||
.uniui-settings:before {
|
||||
content: "\e653";
|
||||
}
|
||||
|
||||
.uniui-search:before {
|
||||
content: "\e654";
|
||||
}
|
||||
|
||||
.uniui-redo-filled:before {
|
||||
content: "\e655";
|
||||
}
|
||||
|
||||
.uniui-list:before {
|
||||
content: "\e644";
|
||||
}
|
||||
|
||||
.uniui-mail-open-filled:before {
|
||||
content: "\e63a";
|
||||
}
|
||||
|
||||
.uniui-hand-down-filled:before {
|
||||
content: "\e63c";
|
||||
}
|
||||
|
||||
.uniui-hand-down:before {
|
||||
content: "\e63d";
|
||||
}
|
||||
|
||||
.uniui-hand-up-filled:before {
|
||||
content: "\e63e";
|
||||
}
|
||||
|
||||
.uniui-hand-up:before {
|
||||
content: "\e63f";
|
||||
}
|
||||
|
||||
.uniui-heart-filled:before {
|
||||
content: "\e641";
|
||||
}
|
||||
|
||||
.uniui-mail-open:before {
|
||||
content: "\e643";
|
||||
}
|
||||
|
||||
.uniui-heart:before {
|
||||
content: "\e639";
|
||||
}
|
||||
|
||||
.uniui-loop:before {
|
||||
content: "\e633";
|
||||
}
|
||||
|
||||
.uniui-pulldown:before {
|
||||
content: "\e632";
|
||||
}
|
||||
|
||||
.uniui-scan:before {
|
||||
content: "\e62a";
|
||||
}
|
||||
|
||||
.uniui-bars:before {
|
||||
content: "\e627";
|
||||
}
|
||||
|
||||
.uniui-checkbox:before {
|
||||
content: "\e62b";
|
||||
}
|
||||
|
||||
.uniui-checkbox-filled:before {
|
||||
content: "\e62c";
|
||||
}
|
||||
|
||||
.uniui-shop:before {
|
||||
content: "\e62f";
|
||||
}
|
||||
|
||||
.uniui-headphones:before {
|
||||
content: "\e630";
|
||||
}
|
||||
|
||||
.uniui-cart:before {
|
||||
content: "\e631";
|
||||
}
|
||||
BIN
uni_modules/uni-icons/components/uni-icons/uniicons.ttf
Normal file
664
uni_modules/uni-icons/components/uni-icons/uniicons_file.ts
Normal file
@@ -0,0 +1,664 @@
|
||||
|
||||
export type IconsData = {
|
||||
id : string
|
||||
name : string
|
||||
font_family : string
|
||||
css_prefix_text : string
|
||||
description : string
|
||||
glyphs : Array<IconsDataItem>
|
||||
}
|
||||
|
||||
export type IconsDataItem = {
|
||||
font_class : string
|
||||
unicode : string
|
||||
}
|
||||
|
||||
|
||||
export const fontData = [
|
||||
{
|
||||
"font_class": "arrow-down",
|
||||
"unicode": "\ue6be"
|
||||
},
|
||||
{
|
||||
"font_class": "arrow-left",
|
||||
"unicode": "\ue6bc"
|
||||
},
|
||||
{
|
||||
"font_class": "arrow-right",
|
||||
"unicode": "\ue6bb"
|
||||
},
|
||||
{
|
||||
"font_class": "arrow-up",
|
||||
"unicode": "\ue6bd"
|
||||
},
|
||||
{
|
||||
"font_class": "auth",
|
||||
"unicode": "\ue6ab"
|
||||
},
|
||||
{
|
||||
"font_class": "auth-filled",
|
||||
"unicode": "\ue6cc"
|
||||
},
|
||||
{
|
||||
"font_class": "back",
|
||||
"unicode": "\ue6b9"
|
||||
},
|
||||
{
|
||||
"font_class": "bars",
|
||||
"unicode": "\ue627"
|
||||
},
|
||||
{
|
||||
"font_class": "calendar",
|
||||
"unicode": "\ue6a0"
|
||||
},
|
||||
{
|
||||
"font_class": "calendar-filled",
|
||||
"unicode": "\ue6c0"
|
||||
},
|
||||
{
|
||||
"font_class": "camera",
|
||||
"unicode": "\ue65a"
|
||||
},
|
||||
{
|
||||
"font_class": "camera-filled",
|
||||
"unicode": "\ue658"
|
||||
},
|
||||
{
|
||||
"font_class": "cart",
|
||||
"unicode": "\ue631"
|
||||
},
|
||||
{
|
||||
"font_class": "cart-filled",
|
||||
"unicode": "\ue6d0"
|
||||
},
|
||||
{
|
||||
"font_class": "chat",
|
||||
"unicode": "\ue65d"
|
||||
},
|
||||
{
|
||||
"font_class": "chat-filled",
|
||||
"unicode": "\ue659"
|
||||
},
|
||||
{
|
||||
"font_class": "chatboxes",
|
||||
"unicode": "\ue696"
|
||||
},
|
||||
{
|
||||
"font_class": "chatboxes-filled",
|
||||
"unicode": "\ue692"
|
||||
},
|
||||
{
|
||||
"font_class": "chatbubble",
|
||||
"unicode": "\ue697"
|
||||
},
|
||||
{
|
||||
"font_class": "chatbubble-filled",
|
||||
"unicode": "\ue694"
|
||||
},
|
||||
{
|
||||
"font_class": "checkbox",
|
||||
"unicode": "\ue62b"
|
||||
},
|
||||
{
|
||||
"font_class": "checkbox-filled",
|
||||
"unicode": "\ue62c"
|
||||
},
|
||||
{
|
||||
"font_class": "checkmarkempty",
|
||||
"unicode": "\ue65c"
|
||||
},
|
||||
{
|
||||
"font_class": "circle",
|
||||
"unicode": "\ue65b"
|
||||
},
|
||||
{
|
||||
"font_class": "circle-filled",
|
||||
"unicode": "\ue65e"
|
||||
},
|
||||
{
|
||||
"font_class": "clear",
|
||||
"unicode": "\ue66d"
|
||||
},
|
||||
{
|
||||
"font_class": "close",
|
||||
"unicode": "\ue673"
|
||||
},
|
||||
{
|
||||
"font_class": "closeempty",
|
||||
"unicode": "\ue66c"
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-download",
|
||||
"unicode": "\ue647"
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-download-filled",
|
||||
"unicode": "\ue646"
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-upload",
|
||||
"unicode": "\ue645"
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-upload-filled",
|
||||
"unicode": "\ue648"
|
||||
},
|
||||
{
|
||||
"font_class": "color",
|
||||
"unicode": "\ue6cf"
|
||||
},
|
||||
{
|
||||
"font_class": "color-filled",
|
||||
"unicode": "\ue6c9"
|
||||
},
|
||||
{
|
||||
"font_class": "compose",
|
||||
"unicode": "\ue67f"
|
||||
},
|
||||
{
|
||||
"font_class": "contact",
|
||||
"unicode": "\ue693"
|
||||
},
|
||||
{
|
||||
"font_class": "contact-filled",
|
||||
"unicode": "\ue695"
|
||||
},
|
||||
{
|
||||
"font_class": "down",
|
||||
"unicode": "\ue6b8"
|
||||
},
|
||||
{
|
||||
"font_class": "bottom",
|
||||
"unicode": "\ue6b8"
|
||||
},
|
||||
{
|
||||
"font_class": "download",
|
||||
"unicode": "\ue68d"
|
||||
},
|
||||
{
|
||||
"font_class": "download-filled",
|
||||
"unicode": "\ue681"
|
||||
},
|
||||
{
|
||||
"font_class": "email",
|
||||
"unicode": "\ue69e"
|
||||
},
|
||||
{
|
||||
"font_class": "email-filled",
|
||||
"unicode": "\ue69a"
|
||||
},
|
||||
{
|
||||
"font_class": "eye",
|
||||
"unicode": "\ue651"
|
||||
},
|
||||
{
|
||||
"font_class": "eye-filled",
|
||||
"unicode": "\ue66a"
|
||||
},
|
||||
{
|
||||
"font_class": "eye-slash",
|
||||
"unicode": "\ue6b3"
|
||||
},
|
||||
{
|
||||
"font_class": "eye-slash-filled",
|
||||
"unicode": "\ue6b4"
|
||||
},
|
||||
{
|
||||
"font_class": "fire",
|
||||
"unicode": "\ue6a1"
|
||||
},
|
||||
{
|
||||
"font_class": "fire-filled",
|
||||
"unicode": "\ue6c5"
|
||||
},
|
||||
{
|
||||
"font_class": "flag",
|
||||
"unicode": "\ue65f"
|
||||
},
|
||||
{
|
||||
"font_class": "flag-filled",
|
||||
"unicode": "\ue660"
|
||||
},
|
||||
{
|
||||
"font_class": "folder-add",
|
||||
"unicode": "\ue6a9"
|
||||
},
|
||||
{
|
||||
"font_class": "folder-add-filled",
|
||||
"unicode": "\ue6c8"
|
||||
},
|
||||
{
|
||||
"font_class": "font",
|
||||
"unicode": "\ue6a3"
|
||||
},
|
||||
{
|
||||
"font_class": "forward",
|
||||
"unicode": "\ue6ba"
|
||||
},
|
||||
{
|
||||
"font_class": "gear",
|
||||
"unicode": "\ue664"
|
||||
},
|
||||
{
|
||||
"font_class": "gear-filled",
|
||||
"unicode": "\ue661"
|
||||
},
|
||||
{
|
||||
"font_class": "gift",
|
||||
"unicode": "\ue6a4"
|
||||
},
|
||||
{
|
||||
"font_class": "gift-filled",
|
||||
"unicode": "\ue6c4"
|
||||
},
|
||||
{
|
||||
"font_class": "hand-down",
|
||||
"unicode": "\ue63d"
|
||||
},
|
||||
{
|
||||
"font_class": "hand-down-filled",
|
||||
"unicode": "\ue63c"
|
||||
},
|
||||
{
|
||||
"font_class": "hand-up",
|
||||
"unicode": "\ue63f"
|
||||
},
|
||||
{
|
||||
"font_class": "hand-up-filled",
|
||||
"unicode": "\ue63e"
|
||||
},
|
||||
{
|
||||
"font_class": "headphones",
|
||||
"unicode": "\ue630"
|
||||
},
|
||||
{
|
||||
"font_class": "heart",
|
||||
"unicode": "\ue639"
|
||||
},
|
||||
{
|
||||
"font_class": "heart-filled",
|
||||
"unicode": "\ue641"
|
||||
},
|
||||
{
|
||||
"font_class": "help",
|
||||
"unicode": "\ue679"
|
||||
},
|
||||
{
|
||||
"font_class": "help-filled",
|
||||
"unicode": "\ue674"
|
||||
},
|
||||
{
|
||||
"font_class": "home",
|
||||
"unicode": "\ue662"
|
||||
},
|
||||
{
|
||||
"font_class": "home-filled",
|
||||
"unicode": "\ue663"
|
||||
},
|
||||
{
|
||||
"font_class": "image",
|
||||
"unicode": "\ue670"
|
||||
},
|
||||
{
|
||||
"font_class": "image-filled",
|
||||
"unicode": "\ue678"
|
||||
},
|
||||
{
|
||||
"font_class": "images",
|
||||
"unicode": "\ue650"
|
||||
},
|
||||
{
|
||||
"font_class": "images-filled",
|
||||
"unicode": "\ue64b"
|
||||
},
|
||||
{
|
||||
"font_class": "info",
|
||||
"unicode": "\ue669"
|
||||
},
|
||||
{
|
||||
"font_class": "info-filled",
|
||||
"unicode": "\ue649"
|
||||
},
|
||||
{
|
||||
"font_class": "left",
|
||||
"unicode": "\ue6b7"
|
||||
},
|
||||
{
|
||||
"font_class": "link",
|
||||
"unicode": "\ue6a5"
|
||||
},
|
||||
{
|
||||
"font_class": "list",
|
||||
"unicode": "\ue644"
|
||||
},
|
||||
{
|
||||
"font_class": "location",
|
||||
"unicode": "\ue6ae"
|
||||
},
|
||||
{
|
||||
"font_class": "location-filled",
|
||||
"unicode": "\ue6af"
|
||||
},
|
||||
{
|
||||
"font_class": "locked",
|
||||
"unicode": "\ue66b"
|
||||
},
|
||||
{
|
||||
"font_class": "locked-filled",
|
||||
"unicode": "\ue668"
|
||||
},
|
||||
{
|
||||
"font_class": "loop",
|
||||
"unicode": "\ue633"
|
||||
},
|
||||
{
|
||||
"font_class": "mail-open",
|
||||
"unicode": "\ue643"
|
||||
},
|
||||
{
|
||||
"font_class": "mail-open-filled",
|
||||
"unicode": "\ue63a"
|
||||
},
|
||||
{
|
||||
"font_class": "map",
|
||||
"unicode": "\ue667"
|
||||
},
|
||||
{
|
||||
"font_class": "map-filled",
|
||||
"unicode": "\ue666"
|
||||
},
|
||||
{
|
||||
"font_class": "map-pin",
|
||||
"unicode": "\ue6ad"
|
||||
},
|
||||
{
|
||||
"font_class": "map-pin-ellipse",
|
||||
"unicode": "\ue6ac"
|
||||
},
|
||||
{
|
||||
"font_class": "medal",
|
||||
"unicode": "\ue6a2"
|
||||
},
|
||||
{
|
||||
"font_class": "medal-filled",
|
||||
"unicode": "\ue6c3"
|
||||
},
|
||||
{
|
||||
"font_class": "mic",
|
||||
"unicode": "\ue671"
|
||||
},
|
||||
{
|
||||
"font_class": "mic-filled",
|
||||
"unicode": "\ue677"
|
||||
},
|
||||
{
|
||||
"font_class": "micoff",
|
||||
"unicode": "\ue67e"
|
||||
},
|
||||
{
|
||||
"font_class": "micoff-filled",
|
||||
"unicode": "\ue6b0"
|
||||
},
|
||||
{
|
||||
"font_class": "minus",
|
||||
"unicode": "\ue66f"
|
||||
},
|
||||
{
|
||||
"font_class": "minus-filled",
|
||||
"unicode": "\ue67d"
|
||||
},
|
||||
{
|
||||
"font_class": "more",
|
||||
"unicode": "\ue64d"
|
||||
},
|
||||
{
|
||||
"font_class": "more-filled",
|
||||
"unicode": "\ue64e"
|
||||
},
|
||||
{
|
||||
"font_class": "navigate",
|
||||
"unicode": "\ue66e"
|
||||
},
|
||||
{
|
||||
"font_class": "navigate-filled",
|
||||
"unicode": "\ue67a"
|
||||
},
|
||||
{
|
||||
"font_class": "notification",
|
||||
"unicode": "\ue6a6"
|
||||
},
|
||||
{
|
||||
"font_class": "notification-filled",
|
||||
"unicode": "\ue6c1"
|
||||
},
|
||||
{
|
||||
"font_class": "paperclip",
|
||||
"unicode": "\ue652"
|
||||
},
|
||||
{
|
||||
"font_class": "paperplane",
|
||||
"unicode": "\ue672"
|
||||
},
|
||||
{
|
||||
"font_class": "paperplane-filled",
|
||||
"unicode": "\ue675"
|
||||
},
|
||||
{
|
||||
"font_class": "person",
|
||||
"unicode": "\ue699"
|
||||
},
|
||||
{
|
||||
"font_class": "person-filled",
|
||||
"unicode": "\ue69d"
|
||||
},
|
||||
{
|
||||
"font_class": "personadd",
|
||||
"unicode": "\ue69f"
|
||||
},
|
||||
{
|
||||
"font_class": "personadd-filled",
|
||||
"unicode": "\ue698"
|
||||
},
|
||||
{
|
||||
"font_class": "personadd-filled-copy",
|
||||
"unicode": "\ue6d1"
|
||||
},
|
||||
{
|
||||
"font_class": "phone",
|
||||
"unicode": "\ue69c"
|
||||
},
|
||||
{
|
||||
"font_class": "phone-filled",
|
||||
"unicode": "\ue69b"
|
||||
},
|
||||
{
|
||||
"font_class": "plus",
|
||||
"unicode": "\ue676"
|
||||
},
|
||||
{
|
||||
"font_class": "plus-filled",
|
||||
"unicode": "\ue6c7"
|
||||
},
|
||||
{
|
||||
"font_class": "plusempty",
|
||||
"unicode": "\ue67b"
|
||||
},
|
||||
{
|
||||
"font_class": "pulldown",
|
||||
"unicode": "\ue632"
|
||||
},
|
||||
{
|
||||
"font_class": "pyq",
|
||||
"unicode": "\ue682"
|
||||
},
|
||||
{
|
||||
"font_class": "qq",
|
||||
"unicode": "\ue680"
|
||||
},
|
||||
{
|
||||
"font_class": "redo",
|
||||
"unicode": "\ue64a"
|
||||
},
|
||||
{
|
||||
"font_class": "redo-filled",
|
||||
"unicode": "\ue655"
|
||||
},
|
||||
{
|
||||
"font_class": "refresh",
|
||||
"unicode": "\ue657"
|
||||
},
|
||||
{
|
||||
"font_class": "refresh-filled",
|
||||
"unicode": "\ue656"
|
||||
},
|
||||
{
|
||||
"font_class": "refreshempty",
|
||||
"unicode": "\ue6bf"
|
||||
},
|
||||
{
|
||||
"font_class": "reload",
|
||||
"unicode": "\ue6b2"
|
||||
},
|
||||
{
|
||||
"font_class": "right",
|
||||
"unicode": "\ue6b5"
|
||||
},
|
||||
{
|
||||
"font_class": "scan",
|
||||
"unicode": "\ue62a"
|
||||
},
|
||||
{
|
||||
"font_class": "search",
|
||||
"unicode": "\ue654"
|
||||
},
|
||||
{
|
||||
"font_class": "settings",
|
||||
"unicode": "\ue653"
|
||||
},
|
||||
{
|
||||
"font_class": "settings-filled",
|
||||
"unicode": "\ue6ce"
|
||||
},
|
||||
{
|
||||
"font_class": "shop",
|
||||
"unicode": "\ue62f"
|
||||
},
|
||||
{
|
||||
"font_class": "shop-filled",
|
||||
"unicode": "\ue6cd"
|
||||
},
|
||||
{
|
||||
"font_class": "smallcircle",
|
||||
"unicode": "\ue67c"
|
||||
},
|
||||
{
|
||||
"font_class": "smallcircle-filled",
|
||||
"unicode": "\ue665"
|
||||
},
|
||||
{
|
||||
"font_class": "sound",
|
||||
"unicode": "\ue684"
|
||||
},
|
||||
{
|
||||
"font_class": "sound-filled",
|
||||
"unicode": "\ue686"
|
||||
},
|
||||
{
|
||||
"font_class": "spinner-cycle",
|
||||
"unicode": "\ue68a"
|
||||
},
|
||||
{
|
||||
"font_class": "staff",
|
||||
"unicode": "\ue6a7"
|
||||
},
|
||||
{
|
||||
"font_class": "staff-filled",
|
||||
"unicode": "\ue6cb"
|
||||
},
|
||||
{
|
||||
"font_class": "star",
|
||||
"unicode": "\ue688"
|
||||
},
|
||||
{
|
||||
"font_class": "star-filled",
|
||||
"unicode": "\ue68f"
|
||||
},
|
||||
{
|
||||
"font_class": "starhalf",
|
||||
"unicode": "\ue683"
|
||||
},
|
||||
{
|
||||
"font_class": "trash",
|
||||
"unicode": "\ue687"
|
||||
},
|
||||
{
|
||||
"font_class": "trash-filled",
|
||||
"unicode": "\ue685"
|
||||
},
|
||||
{
|
||||
"font_class": "tune",
|
||||
"unicode": "\ue6aa"
|
||||
},
|
||||
{
|
||||
"font_class": "tune-filled",
|
||||
"unicode": "\ue6ca"
|
||||
},
|
||||
{
|
||||
"font_class": "undo",
|
||||
"unicode": "\ue64f"
|
||||
},
|
||||
{
|
||||
"font_class": "undo-filled",
|
||||
"unicode": "\ue64c"
|
||||
},
|
||||
{
|
||||
"font_class": "up",
|
||||
"unicode": "\ue6b6"
|
||||
},
|
||||
{
|
||||
"font_class": "top",
|
||||
"unicode": "\ue6b6"
|
||||
},
|
||||
{
|
||||
"font_class": "upload",
|
||||
"unicode": "\ue690"
|
||||
},
|
||||
{
|
||||
"font_class": "upload-filled",
|
||||
"unicode": "\ue68e"
|
||||
},
|
||||
{
|
||||
"font_class": "videocam",
|
||||
"unicode": "\ue68c"
|
||||
},
|
||||
{
|
||||
"font_class": "videocam-filled",
|
||||
"unicode": "\ue689"
|
||||
},
|
||||
{
|
||||
"font_class": "vip",
|
||||
"unicode": "\ue6a8"
|
||||
},
|
||||
{
|
||||
"font_class": "vip-filled",
|
||||
"unicode": "\ue6c6"
|
||||
},
|
||||
{
|
||||
"font_class": "wallet",
|
||||
"unicode": "\ue6b1"
|
||||
},
|
||||
{
|
||||
"font_class": "wallet-filled",
|
||||
"unicode": "\ue6c2"
|
||||
},
|
||||
{
|
||||
"font_class": "weibo",
|
||||
"unicode": "\ue68b"
|
||||
},
|
||||
{
|
||||
"font_class": "weixin",
|
||||
"unicode": "\ue691"
|
||||
}
|
||||
] as IconsDataItem[]
|
||||
|
||||
// export const fontData = JSON.parse<IconsDataItem>(fontDataJson)
|
||||
649
uni_modules/uni-icons/components/uni-icons/uniicons_file_vue.js
Normal file
@@ -0,0 +1,649 @@
|
||||
|
||||
export const fontData = [
|
||||
{
|
||||
"font_class": "arrow-down",
|
||||
"unicode": "\ue6be"
|
||||
},
|
||||
{
|
||||
"font_class": "arrow-left",
|
||||
"unicode": "\ue6bc"
|
||||
},
|
||||
{
|
||||
"font_class": "arrow-right",
|
||||
"unicode": "\ue6bb"
|
||||
},
|
||||
{
|
||||
"font_class": "arrow-up",
|
||||
"unicode": "\ue6bd"
|
||||
},
|
||||
{
|
||||
"font_class": "auth",
|
||||
"unicode": "\ue6ab"
|
||||
},
|
||||
{
|
||||
"font_class": "auth-filled",
|
||||
"unicode": "\ue6cc"
|
||||
},
|
||||
{
|
||||
"font_class": "back",
|
||||
"unicode": "\ue6b9"
|
||||
},
|
||||
{
|
||||
"font_class": "bars",
|
||||
"unicode": "\ue627"
|
||||
},
|
||||
{
|
||||
"font_class": "calendar",
|
||||
"unicode": "\ue6a0"
|
||||
},
|
||||
{
|
||||
"font_class": "calendar-filled",
|
||||
"unicode": "\ue6c0"
|
||||
},
|
||||
{
|
||||
"font_class": "camera",
|
||||
"unicode": "\ue65a"
|
||||
},
|
||||
{
|
||||
"font_class": "camera-filled",
|
||||
"unicode": "\ue658"
|
||||
},
|
||||
{
|
||||
"font_class": "cart",
|
||||
"unicode": "\ue631"
|
||||
},
|
||||
{
|
||||
"font_class": "cart-filled",
|
||||
"unicode": "\ue6d0"
|
||||
},
|
||||
{
|
||||
"font_class": "chat",
|
||||
"unicode": "\ue65d"
|
||||
},
|
||||
{
|
||||
"font_class": "chat-filled",
|
||||
"unicode": "\ue659"
|
||||
},
|
||||
{
|
||||
"font_class": "chatboxes",
|
||||
"unicode": "\ue696"
|
||||
},
|
||||
{
|
||||
"font_class": "chatboxes-filled",
|
||||
"unicode": "\ue692"
|
||||
},
|
||||
{
|
||||
"font_class": "chatbubble",
|
||||
"unicode": "\ue697"
|
||||
},
|
||||
{
|
||||
"font_class": "chatbubble-filled",
|
||||
"unicode": "\ue694"
|
||||
},
|
||||
{
|
||||
"font_class": "checkbox",
|
||||
"unicode": "\ue62b"
|
||||
},
|
||||
{
|
||||
"font_class": "checkbox-filled",
|
||||
"unicode": "\ue62c"
|
||||
},
|
||||
{
|
||||
"font_class": "checkmarkempty",
|
||||
"unicode": "\ue65c"
|
||||
},
|
||||
{
|
||||
"font_class": "circle",
|
||||
"unicode": "\ue65b"
|
||||
},
|
||||
{
|
||||
"font_class": "circle-filled",
|
||||
"unicode": "\ue65e"
|
||||
},
|
||||
{
|
||||
"font_class": "clear",
|
||||
"unicode": "\ue66d"
|
||||
},
|
||||
{
|
||||
"font_class": "close",
|
||||
"unicode": "\ue673"
|
||||
},
|
||||
{
|
||||
"font_class": "closeempty",
|
||||
"unicode": "\ue66c"
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-download",
|
||||
"unicode": "\ue647"
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-download-filled",
|
||||
"unicode": "\ue646"
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-upload",
|
||||
"unicode": "\ue645"
|
||||
},
|
||||
{
|
||||
"font_class": "cloud-upload-filled",
|
||||
"unicode": "\ue648"
|
||||
},
|
||||
{
|
||||
"font_class": "color",
|
||||
"unicode": "\ue6cf"
|
||||
},
|
||||
{
|
||||
"font_class": "color-filled",
|
||||
"unicode": "\ue6c9"
|
||||
},
|
||||
{
|
||||
"font_class": "compose",
|
||||
"unicode": "\ue67f"
|
||||
},
|
||||
{
|
||||
"font_class": "contact",
|
||||
"unicode": "\ue693"
|
||||
},
|
||||
{
|
||||
"font_class": "contact-filled",
|
||||
"unicode": "\ue695"
|
||||
},
|
||||
{
|
||||
"font_class": "down",
|
||||
"unicode": "\ue6b8"
|
||||
},
|
||||
{
|
||||
"font_class": "bottom",
|
||||
"unicode": "\ue6b8"
|
||||
},
|
||||
{
|
||||
"font_class": "download",
|
||||
"unicode": "\ue68d"
|
||||
},
|
||||
{
|
||||
"font_class": "download-filled",
|
||||
"unicode": "\ue681"
|
||||
},
|
||||
{
|
||||
"font_class": "email",
|
||||
"unicode": "\ue69e"
|
||||
},
|
||||
{
|
||||
"font_class": "email-filled",
|
||||
"unicode": "\ue69a"
|
||||
},
|
||||
{
|
||||
"font_class": "eye",
|
||||
"unicode": "\ue651"
|
||||
},
|
||||
{
|
||||
"font_class": "eye-filled",
|
||||
"unicode": "\ue66a"
|
||||
},
|
||||
{
|
||||
"font_class": "eye-slash",
|
||||
"unicode": "\ue6b3"
|
||||
},
|
||||
{
|
||||
"font_class": "eye-slash-filled",
|
||||
"unicode": "\ue6b4"
|
||||
},
|
||||
{
|
||||
"font_class": "fire",
|
||||
"unicode": "\ue6a1"
|
||||
},
|
||||
{
|
||||
"font_class": "fire-filled",
|
||||
"unicode": "\ue6c5"
|
||||
},
|
||||
{
|
||||
"font_class": "flag",
|
||||
"unicode": "\ue65f"
|
||||
},
|
||||
{
|
||||
"font_class": "flag-filled",
|
||||
"unicode": "\ue660"
|
||||
},
|
||||
{
|
||||
"font_class": "folder-add",
|
||||
"unicode": "\ue6a9"
|
||||
},
|
||||
{
|
||||
"font_class": "folder-add-filled",
|
||||
"unicode": "\ue6c8"
|
||||
},
|
||||
{
|
||||
"font_class": "font",
|
||||
"unicode": "\ue6a3"
|
||||
},
|
||||
{
|
||||
"font_class": "forward",
|
||||
"unicode": "\ue6ba"
|
||||
},
|
||||
{
|
||||
"font_class": "gear",
|
||||
"unicode": "\ue664"
|
||||
},
|
||||
{
|
||||
"font_class": "gear-filled",
|
||||
"unicode": "\ue661"
|
||||
},
|
||||
{
|
||||
"font_class": "gift",
|
||||
"unicode": "\ue6a4"
|
||||
},
|
||||
{
|
||||
"font_class": "gift-filled",
|
||||
"unicode": "\ue6c4"
|
||||
},
|
||||
{
|
||||
"font_class": "hand-down",
|
||||
"unicode": "\ue63d"
|
||||
},
|
||||
{
|
||||
"font_class": "hand-down-filled",
|
||||
"unicode": "\ue63c"
|
||||
},
|
||||
{
|
||||
"font_class": "hand-up",
|
||||
"unicode": "\ue63f"
|
||||
},
|
||||
{
|
||||
"font_class": "hand-up-filled",
|
||||
"unicode": "\ue63e"
|
||||
},
|
||||
{
|
||||
"font_class": "headphones",
|
||||
"unicode": "\ue630"
|
||||
},
|
||||
{
|
||||
"font_class": "heart",
|
||||
"unicode": "\ue639"
|
||||
},
|
||||
{
|
||||
"font_class": "heart-filled",
|
||||
"unicode": "\ue641"
|
||||
},
|
||||
{
|
||||
"font_class": "help",
|
||||
"unicode": "\ue679"
|
||||
},
|
||||
{
|
||||
"font_class": "help-filled",
|
||||
"unicode": "\ue674"
|
||||
},
|
||||
{
|
||||
"font_class": "home",
|
||||
"unicode": "\ue662"
|
||||
},
|
||||
{
|
||||
"font_class": "home-filled",
|
||||
"unicode": "\ue663"
|
||||
},
|
||||
{
|
||||
"font_class": "image",
|
||||
"unicode": "\ue670"
|
||||
},
|
||||
{
|
||||
"font_class": "image-filled",
|
||||
"unicode": "\ue678"
|
||||
},
|
||||
{
|
||||
"font_class": "images",
|
||||
"unicode": "\ue650"
|
||||
},
|
||||
{
|
||||
"font_class": "images-filled",
|
||||
"unicode": "\ue64b"
|
||||
},
|
||||
{
|
||||
"font_class": "info",
|
||||
"unicode": "\ue669"
|
||||
},
|
||||
{
|
||||
"font_class": "info-filled",
|
||||
"unicode": "\ue649"
|
||||
},
|
||||
{
|
||||
"font_class": "left",
|
||||
"unicode": "\ue6b7"
|
||||
},
|
||||
{
|
||||
"font_class": "link",
|
||||
"unicode": "\ue6a5"
|
||||
},
|
||||
{
|
||||
"font_class": "list",
|
||||
"unicode": "\ue644"
|
||||
},
|
||||
{
|
||||
"font_class": "location",
|
||||
"unicode": "\ue6ae"
|
||||
},
|
||||
{
|
||||
"font_class": "location-filled",
|
||||
"unicode": "\ue6af"
|
||||
},
|
||||
{
|
||||
"font_class": "locked",
|
||||
"unicode": "\ue66b"
|
||||
},
|
||||
{
|
||||
"font_class": "locked-filled",
|
||||
"unicode": "\ue668"
|
||||
},
|
||||
{
|
||||
"font_class": "loop",
|
||||
"unicode": "\ue633"
|
||||
},
|
||||
{
|
||||
"font_class": "mail-open",
|
||||
"unicode": "\ue643"
|
||||
},
|
||||
{
|
||||
"font_class": "mail-open-filled",
|
||||
"unicode": "\ue63a"
|
||||
},
|
||||
{
|
||||
"font_class": "map",
|
||||
"unicode": "\ue667"
|
||||
},
|
||||
{
|
||||
"font_class": "map-filled",
|
||||
"unicode": "\ue666"
|
||||
},
|
||||
{
|
||||
"font_class": "map-pin",
|
||||
"unicode": "\ue6ad"
|
||||
},
|
||||
{
|
||||
"font_class": "map-pin-ellipse",
|
||||
"unicode": "\ue6ac"
|
||||
},
|
||||
{
|
||||
"font_class": "medal",
|
||||
"unicode": "\ue6a2"
|
||||
},
|
||||
{
|
||||
"font_class": "medal-filled",
|
||||
"unicode": "\ue6c3"
|
||||
},
|
||||
{
|
||||
"font_class": "mic",
|
||||
"unicode": "\ue671"
|
||||
},
|
||||
{
|
||||
"font_class": "mic-filled",
|
||||
"unicode": "\ue677"
|
||||
},
|
||||
{
|
||||
"font_class": "micoff",
|
||||
"unicode": "\ue67e"
|
||||
},
|
||||
{
|
||||
"font_class": "micoff-filled",
|
||||
"unicode": "\ue6b0"
|
||||
},
|
||||
{
|
||||
"font_class": "minus",
|
||||
"unicode": "\ue66f"
|
||||
},
|
||||
{
|
||||
"font_class": "minus-filled",
|
||||
"unicode": "\ue67d"
|
||||
},
|
||||
{
|
||||
"font_class": "more",
|
||||
"unicode": "\ue64d"
|
||||
},
|
||||
{
|
||||
"font_class": "more-filled",
|
||||
"unicode": "\ue64e"
|
||||
},
|
||||
{
|
||||
"font_class": "navigate",
|
||||
"unicode": "\ue66e"
|
||||
},
|
||||
{
|
||||
"font_class": "navigate-filled",
|
||||
"unicode": "\ue67a"
|
||||
},
|
||||
{
|
||||
"font_class": "notification",
|
||||
"unicode": "\ue6a6"
|
||||
},
|
||||
{
|
||||
"font_class": "notification-filled",
|
||||
"unicode": "\ue6c1"
|
||||
},
|
||||
{
|
||||
"font_class": "paperclip",
|
||||
"unicode": "\ue652"
|
||||
},
|
||||
{
|
||||
"font_class": "paperplane",
|
||||
"unicode": "\ue672"
|
||||
},
|
||||
{
|
||||
"font_class": "paperplane-filled",
|
||||
"unicode": "\ue675"
|
||||
},
|
||||
{
|
||||
"font_class": "person",
|
||||
"unicode": "\ue699"
|
||||
},
|
||||
{
|
||||
"font_class": "person-filled",
|
||||
"unicode": "\ue69d"
|
||||
},
|
||||
{
|
||||
"font_class": "personadd",
|
||||
"unicode": "\ue69f"
|
||||
},
|
||||
{
|
||||
"font_class": "personadd-filled",
|
||||
"unicode": "\ue698"
|
||||
},
|
||||
{
|
||||
"font_class": "personadd-filled-copy",
|
||||
"unicode": "\ue6d1"
|
||||
},
|
||||
{
|
||||
"font_class": "phone",
|
||||
"unicode": "\ue69c"
|
||||
},
|
||||
{
|
||||
"font_class": "phone-filled",
|
||||
"unicode": "\ue69b"
|
||||
},
|
||||
{
|
||||
"font_class": "plus",
|
||||
"unicode": "\ue676"
|
||||
},
|
||||
{
|
||||
"font_class": "plus-filled",
|
||||
"unicode": "\ue6c7"
|
||||
},
|
||||
{
|
||||
"font_class": "plusempty",
|
||||
"unicode": "\ue67b"
|
||||
},
|
||||
{
|
||||
"font_class": "pulldown",
|
||||
"unicode": "\ue632"
|
||||
},
|
||||
{
|
||||
"font_class": "pyq",
|
||||
"unicode": "\ue682"
|
||||
},
|
||||
{
|
||||
"font_class": "qq",
|
||||
"unicode": "\ue680"
|
||||
},
|
||||
{
|
||||
"font_class": "redo",
|
||||
"unicode": "\ue64a"
|
||||
},
|
||||
{
|
||||
"font_class": "redo-filled",
|
||||
"unicode": "\ue655"
|
||||
},
|
||||
{
|
||||
"font_class": "refresh",
|
||||
"unicode": "\ue657"
|
||||
},
|
||||
{
|
||||
"font_class": "refresh-filled",
|
||||
"unicode": "\ue656"
|
||||
},
|
||||
{
|
||||
"font_class": "refreshempty",
|
||||
"unicode": "\ue6bf"
|
||||
},
|
||||
{
|
||||
"font_class": "reload",
|
||||
"unicode": "\ue6b2"
|
||||
},
|
||||
{
|
||||
"font_class": "right",
|
||||
"unicode": "\ue6b5"
|
||||
},
|
||||
{
|
||||
"font_class": "scan",
|
||||
"unicode": "\ue62a"
|
||||
},
|
||||
{
|
||||
"font_class": "search",
|
||||
"unicode": "\ue654"
|
||||
},
|
||||
{
|
||||
"font_class": "settings",
|
||||
"unicode": "\ue653"
|
||||
},
|
||||
{
|
||||
"font_class": "settings-filled",
|
||||
"unicode": "\ue6ce"
|
||||
},
|
||||
{
|
||||
"font_class": "shop",
|
||||
"unicode": "\ue62f"
|
||||
},
|
||||
{
|
||||
"font_class": "shop-filled",
|
||||
"unicode": "\ue6cd"
|
||||
},
|
||||
{
|
||||
"font_class": "smallcircle",
|
||||
"unicode": "\ue67c"
|
||||
},
|
||||
{
|
||||
"font_class": "smallcircle-filled",
|
||||
"unicode": "\ue665"
|
||||
},
|
||||
{
|
||||
"font_class": "sound",
|
||||
"unicode": "\ue684"
|
||||
},
|
||||
{
|
||||
"font_class": "sound-filled",
|
||||
"unicode": "\ue686"
|
||||
},
|
||||
{
|
||||
"font_class": "spinner-cycle",
|
||||
"unicode": "\ue68a"
|
||||
},
|
||||
{
|
||||
"font_class": "staff",
|
||||
"unicode": "\ue6a7"
|
||||
},
|
||||
{
|
||||
"font_class": "staff-filled",
|
||||
"unicode": "\ue6cb"
|
||||
},
|
||||
{
|
||||
"font_class": "star",
|
||||
"unicode": "\ue688"
|
||||
},
|
||||
{
|
||||
"font_class": "star-filled",
|
||||
"unicode": "\ue68f"
|
||||
},
|
||||
{
|
||||
"font_class": "starhalf",
|
||||
"unicode": "\ue683"
|
||||
},
|
||||
{
|
||||
"font_class": "trash",
|
||||
"unicode": "\ue687"
|
||||
},
|
||||
{
|
||||
"font_class": "trash-filled",
|
||||
"unicode": "\ue685"
|
||||
},
|
||||
{
|
||||
"font_class": "tune",
|
||||
"unicode": "\ue6aa"
|
||||
},
|
||||
{
|
||||
"font_class": "tune-filled",
|
||||
"unicode": "\ue6ca"
|
||||
},
|
||||
{
|
||||
"font_class": "undo",
|
||||
"unicode": "\ue64f"
|
||||
},
|
||||
{
|
||||
"font_class": "undo-filled",
|
||||
"unicode": "\ue64c"
|
||||
},
|
||||
{
|
||||
"font_class": "up",
|
||||
"unicode": "\ue6b6"
|
||||
},
|
||||
{
|
||||
"font_class": "top",
|
||||
"unicode": "\ue6b6"
|
||||
},
|
||||
{
|
||||
"font_class": "upload",
|
||||
"unicode": "\ue690"
|
||||
},
|
||||
{
|
||||
"font_class": "upload-filled",
|
||||
"unicode": "\ue68e"
|
||||
},
|
||||
{
|
||||
"font_class": "videocam",
|
||||
"unicode": "\ue68c"
|
||||
},
|
||||
{
|
||||
"font_class": "videocam-filled",
|
||||
"unicode": "\ue689"
|
||||
},
|
||||
{
|
||||
"font_class": "vip",
|
||||
"unicode": "\ue6a8"
|
||||
},
|
||||
{
|
||||
"font_class": "vip-filled",
|
||||
"unicode": "\ue6c6"
|
||||
},
|
||||
{
|
||||
"font_class": "wallet",
|
||||
"unicode": "\ue6b1"
|
||||
},
|
||||
{
|
||||
"font_class": "wallet-filled",
|
||||
"unicode": "\ue6c2"
|
||||
},
|
||||
{
|
||||
"font_class": "weibo",
|
||||
"unicode": "\ue68b"
|
||||
},
|
||||
{
|
||||
"font_class": "weixin",
|
||||
"unicode": "\ue691"
|
||||
}
|
||||
]
|
||||
|
||||
// export const fontData = JSON.parse<IconsDataItem>(fontDataJson)
|
||||
111
uni_modules/uni-icons/package.json
Normal file
@@ -0,0 +1,111 @@
|
||||
{
|
||||
"id": "uni-icons",
|
||||
"displayName": "uni-icons 图标",
|
||||
"version": "2.0.12",
|
||||
"description": "图标组件,用于展示移动端常见的图标,可自定义颜色、大小。",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"uniui",
|
||||
"icon",
|
||||
"图标"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.2.14",
|
||||
"uni-app": "^4.08",
|
||||
"uni-app-x": "^4.61"
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||
"type": "component-vue",
|
||||
"darkmode": "x",
|
||||
"i18n": "x",
|
||||
"widescreen": "x"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"uni-scss"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "x",
|
||||
"aliyun": "x",
|
||||
"alipay": "x"
|
||||
},
|
||||
"client": {
|
||||
"uni-app": {
|
||||
"vue": {
|
||||
"vue2": "√",
|
||||
"vue3": "√"
|
||||
},
|
||||
"web": {
|
||||
"safari": "√",
|
||||
"chrome": "√"
|
||||
},
|
||||
"app": {
|
||||
"vue": "√",
|
||||
"nvue": "-",
|
||||
"android": {
|
||||
"extVersion": "",
|
||||
"minVersion": "29"
|
||||
},
|
||||
"ios": "√",
|
||||
"harmony": "√"
|
||||
},
|
||||
"mp": {
|
||||
"weixin": "√",
|
||||
"alipay": "√",
|
||||
"toutiao": "√",
|
||||
"baidu": "√",
|
||||
"kuaishou": "-",
|
||||
"jd": "-",
|
||||
"harmony": "-",
|
||||
"qq": "√",
|
||||
"lark": "-"
|
||||
},
|
||||
"quickapp": {
|
||||
"huawei": "√",
|
||||
"union": "√"
|
||||
}
|
||||
},
|
||||
"uni-app-x": {
|
||||
"web": {
|
||||
"safari": "√",
|
||||
"chrome": "√"
|
||||
},
|
||||
"app": {
|
||||
"android": {
|
||||
"extVersion": "",
|
||||
"minVersion": "29"
|
||||
},
|
||||
"ios": "√",
|
||||
"harmony": "√"
|
||||
},
|
||||
"mp": {
|
||||
"weixin": "√"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
8
uni_modules/uni-icons/readme.md
Normal file
@@ -0,0 +1,8 @@
|
||||
## Icons 图标
|
||||
> **组件名:uni-icons**
|
||||
> 代码块: `uIcons`
|
||||
|
||||
用于展示 icons 图标 。
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-icons)
|
||||
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
|
||||
94
uni_modules/uni-popup/changelog.md
Normal file
@@ -0,0 +1,94 @@
|
||||
## 1.9.8(2025-04-16)
|
||||
- 修复 更新组件示例 ,解决更新数据或保存项目导致弹窗消失的问题
|
||||
## 1.9.7(2025-04-14)
|
||||
- 修复 uni-popup-dialog 弹出框在vue3中双向绑定问题
|
||||
## 1.9.6(2025-01-08)
|
||||
- 修复 示例中过期图片地址
|
||||
## 1.9.5(2024-10-15)
|
||||
- 修复 微信小程序中的getSystemInfo警告
|
||||
## 1.9.2(2024-09-21)
|
||||
- 修复 uni-popup在android上的重复点击弹出位置不正确的bug
|
||||
## 1.9.1(2024-04-02)
|
||||
- 修复 uni-popup-dialog vue3下使用value无法进行绑定的bug(双向绑定兼容旧写法)
|
||||
## 1.9.0(2024-03-28)
|
||||
- 修复 uni-popup-dialog 双向绑定时初始化逻辑修正
|
||||
## 1.8.9(2024-03-20)
|
||||
- 修复 uni-popup-dialog 数据输入时修正为双向绑定
|
||||
## 1.8.8(2024-02-20)
|
||||
- 修复 uni-popup 在微信小程序下出现文字向上闪动的bug
|
||||
## 1.8.7(2024-02-02)
|
||||
- 新增 uni-popup-dialog 新增属性focus:input模式下,是否自动自动聚焦
|
||||
## 1.8.6(2024-01-30)
|
||||
- 新增 uni-popup-dialog 新增属性maxLength:限制输入框字数
|
||||
## 1.8.5(2024-01-26)
|
||||
- 新增 uni-popup-dialog 新增属性showClose:控制关闭按钮的显示
|
||||
## 1.8.4(2023-11-15)
|
||||
- 新增 uni-popup 支持uni-app-x 注意暂时仅支持 `maskClick` `@open` `@close`
|
||||
## 1.8.3(2023-04-17)
|
||||
- 修复 uni-popup 重复打开时的 bug
|
||||
## 1.8.2(2023-02-02)
|
||||
- uni-popup-dialog 组件新增 inputType 属性
|
||||
## 1.8.1(2022-12-01)
|
||||
- 修复 nvue 下 v-show 报错
|
||||
## 1.8.0(2022-11-29)
|
||||
- 优化 主题样式
|
||||
## 1.7.9(2022-04-02)
|
||||
- 修复 弹出层内部无法滚动的bug
|
||||
## 1.7.8(2022-03-28)
|
||||
- 修复 小程序中高度错误的bug
|
||||
## 1.7.7(2022-03-17)
|
||||
- 修复 快速调用open出现问题的Bug
|
||||
## 1.7.6(2022-02-14)
|
||||
- 修复 safeArea 属性不能设置为false的bug
|
||||
## 1.7.5(2022-01-19)
|
||||
- 修复 isMaskClick 失效的bug
|
||||
## 1.7.4(2022-01-19)
|
||||
- 新增 cancelText \ confirmText 属性 ,可自定义文本
|
||||
- 新增 maskBackgroundColor 属性 ,可以修改蒙版颜色
|
||||
- 优化 maskClick属性 更新为 isMaskClick ,解决微信小程序警告的问题
|
||||
## 1.7.3(2022-01-13)
|
||||
- 修复 设置 safeArea 属性不生效的bug
|
||||
## 1.7.2(2021-11-26)
|
||||
- 优化 组件示例
|
||||
## 1.7.1(2021-11-26)
|
||||
- 修复 vuedoc 文字错误
|
||||
## 1.7.0(2021-11-19)
|
||||
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-popup](https://uniapp.dcloud.io/component/uniui/uni-popup)
|
||||
## 1.6.2(2021-08-24)
|
||||
- 新增 支持国际化
|
||||
## 1.6.1(2021-07-30)
|
||||
- 优化 vue3下事件警告的问题
|
||||
## 1.6.0(2021-07-13)
|
||||
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||
## 1.5.0(2021-06-23)
|
||||
- 新增 mask-click 遮罩层点击事件
|
||||
## 1.4.5(2021-06-22)
|
||||
- 修复 nvue 平台中间弹出后,点击内容,再点击遮罩无法关闭的Bug
|
||||
## 1.4.4(2021-06-18)
|
||||
- 修复 H5平台中间弹出后,点击内容,再点击遮罩无法关闭的Bug
|
||||
## 1.4.3(2021-06-08)
|
||||
- 修复 错误的 watch 字段
|
||||
- 修复 safeArea 属性不生效的问题
|
||||
- 修复 点击内容,再点击遮罩无法关闭的Bug
|
||||
## 1.4.2(2021-05-12)
|
||||
- 新增 组件示例地址
|
||||
## 1.4.1(2021-04-29)
|
||||
- 修复 组件内放置 input 、textarea 组件,无法聚焦的问题
|
||||
## 1.4.0 (2021-04-29)
|
||||
- 新增 type 属性的 left\right 值,支持左右弹出
|
||||
- 新增 open(String:type) 方法参数 ,可以省略 type 属性 ,直接传入类型打开指定弹窗
|
||||
- 新增 backgroundColor 属性,可定义主窗口背景色,默认不显示背景色
|
||||
- 新增 safeArea 属性,是否适配底部安全区
|
||||
- 修复 App\h5\微信小程序底部安全区占位不对的Bug
|
||||
- 修复 App 端弹出等待的Bug
|
||||
- 优化 提升低配设备性能,优化动画卡顿问题
|
||||
- 优化 更简单的组件自定义方式
|
||||
## 1.2.9(2021-02-05)
|
||||
- 优化 组件引用关系,通过uni_modules引用组件
|
||||
## 1.2.8(2021-02-05)
|
||||
- 调整为uni_modules目录规范
|
||||
## 1.2.7(2021-02-05)
|
||||
- 调整为uni_modules目录规范
|
||||
- 新增 支持 PC 端
|
||||
- 新增 uni-popup-message 、uni-popup-dialog扩展组件支持 PC 端
|
||||
@@ -0,0 +1,45 @@
|
||||
// #ifdef H5
|
||||
export default {
|
||||
name: 'Keypress',
|
||||
props: {
|
||||
disable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const keyNames = {
|
||||
esc: ['Esc', 'Escape'],
|
||||
tab: 'Tab',
|
||||
enter: 'Enter',
|
||||
space: [' ', 'Spacebar'],
|
||||
up: ['Up', 'ArrowUp'],
|
||||
left: ['Left', 'ArrowLeft'],
|
||||
right: ['Right', 'ArrowRight'],
|
||||
down: ['Down', 'ArrowDown'],
|
||||
delete: ['Backspace', 'Delete', 'Del']
|
||||
}
|
||||
const listener = ($event) => {
|
||||
if (this.disable) {
|
||||
return
|
||||
}
|
||||
const keyName = Object.keys(keyNames).find(key => {
|
||||
const keyName = $event.key
|
||||
const value = keyNames[key]
|
||||
return value === keyName || (Array.isArray(value) && value.includes(keyName))
|
||||
})
|
||||
if (keyName) {
|
||||
// 避免和其他按键事件冲突
|
||||
setTimeout(() => {
|
||||
this.$emit(keyName, {})
|
||||
}, 0)
|
||||
}
|
||||
}
|
||||
document.addEventListener('keyup', listener)
|
||||
this.$once('hook:beforeDestroy', () => {
|
||||
document.removeEventListener('keyup', listener)
|
||||
})
|
||||
},
|
||||
render: () => {}
|
||||
}
|
||||
// #endif
|
||||
@@ -0,0 +1,327 @@
|
||||
<template>
|
||||
<view class="uni-popup-dialog">
|
||||
<view class="uni-dialog-title">
|
||||
<text class="uni-dialog-title-text" :class="['uni-popup__'+dialogType]">{{titleText}}</text>
|
||||
</view>
|
||||
<view v-if="mode === 'base'" class="uni-dialog-content">
|
||||
<slot>
|
||||
<text class="uni-dialog-content-text">{{content}}</text>
|
||||
</slot>
|
||||
</view>
|
||||
<view v-else class="uni-dialog-content">
|
||||
<slot>
|
||||
<input class="uni-dialog-input" :maxlength="maxlength" v-model="val" :type="inputType"
|
||||
:placeholder="placeholderText" :focus="focus">
|
||||
</slot>
|
||||
</view>
|
||||
<view class="uni-dialog-button-group">
|
||||
<view class="uni-dialog-button" v-if="showClose" @click="closeDialog">
|
||||
<text class="uni-dialog-button-text">{{closeText}}</text>
|
||||
</view>
|
||||
<view class="uni-dialog-button" :class="showClose?'uni-border-left':''" @click="onOk">
|
||||
<text class="uni-dialog-button-text uni-button-color">{{okText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import popup from '../uni-popup/popup.js'
|
||||
import {
|
||||
initVueI18n
|
||||
} from '@dcloudio/uni-i18n'
|
||||
import messages from '../uni-popup/i18n/index.js'
|
||||
const {
|
||||
t
|
||||
} = initVueI18n(messages)
|
||||
/**
|
||||
* PopUp 弹出层-对话框样式
|
||||
* @description 弹出层-对话框样式
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
||||
* @property {String} value input 模式下的默认值
|
||||
* @property {String} placeholder input 模式下输入提示
|
||||
* @property {Boolean} focus input模式下是否自动聚焦,默认为true
|
||||
* @property {String} type = [success|warning|info|error] 主题样式
|
||||
* @value success 成功
|
||||
* @value warning 提示
|
||||
* @value info 消息
|
||||
* @value error 错误
|
||||
* @property {String} mode = [base|input] 模式、
|
||||
* @value base 基础对话框
|
||||
* @value input 可输入对话框
|
||||
* @showClose {Boolean} 是否显示关闭按钮
|
||||
* @property {String} content 对话框内容
|
||||
* @property {Boolean} beforeClose 是否拦截取消事件
|
||||
* @property {Number} maxlength 输入
|
||||
* @event {Function} confirm 点击确认按钮触发
|
||||
* @event {Function} close 点击取消按钮触发
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: "uniPopupDialog",
|
||||
mixins: [popup],
|
||||
emits: ['confirm', 'close', 'update:modelValue', 'input'],
|
||||
props: {
|
||||
inputType: {
|
||||
type: String,
|
||||
default: 'text'
|
||||
},
|
||||
showClose: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// #ifdef VUE2
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
modelValue: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
// #endif
|
||||
|
||||
|
||||
placeholder: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'error'
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'base'
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
beforeClose: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
cancelText: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
maxlength: {
|
||||
type: Number,
|
||||
default: -1,
|
||||
},
|
||||
focus: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogType: 'error',
|
||||
val: ""
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
okText() {
|
||||
return this.confirmText || t("uni-popup.ok")
|
||||
},
|
||||
closeText() {
|
||||
return this.cancelText || t("uni-popup.cancel")
|
||||
},
|
||||
placeholderText() {
|
||||
return this.placeholder || t("uni-popup.placeholder")
|
||||
},
|
||||
titleText() {
|
||||
return this.title || t("uni-popup.title")
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
type(val) {
|
||||
this.dialogType = val
|
||||
},
|
||||
mode(val) {
|
||||
if (val === 'input') {
|
||||
this.dialogType = 'info'
|
||||
}
|
||||
},
|
||||
value(val) {
|
||||
setVal(val)
|
||||
},
|
||||
// #ifdef VUE3
|
||||
modelValue(val) {
|
||||
setVal(val)
|
||||
},
|
||||
// #endif
|
||||
val(val) {
|
||||
// #ifdef VUE2
|
||||
// TODO 兼容 vue2
|
||||
this.$emit('input', val);
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
// TODO 兼容 vue3
|
||||
this.$emit('update:modelValue', val);
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 对话框遮罩不可点击
|
||||
this.popup.disableMask()
|
||||
// this.popup.closeMask()
|
||||
if (this.mode === 'input') {
|
||||
this.dialogType = 'info'
|
||||
this.val = this.value;
|
||||
// #ifdef VUE3
|
||||
this.val = this.modelValue;
|
||||
// #endif
|
||||
} else {
|
||||
this.dialogType = this.type
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 给val属性赋值
|
||||
*/
|
||||
setVal(val) {
|
||||
if (this.maxlength != -1 && this.mode === 'input') {
|
||||
this.val = val.slice(0, this.maxlength);
|
||||
} else {
|
||||
this.val = val
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 点击确认按钮
|
||||
*/
|
||||
onOk() {
|
||||
if (this.mode === 'input') {
|
||||
this.$emit('confirm', this.val)
|
||||
} else {
|
||||
this.$emit('confirm')
|
||||
}
|
||||
if (this.beforeClose) return
|
||||
this.popup.close()
|
||||
},
|
||||
/**
|
||||
* 点击取消按钮
|
||||
*/
|
||||
closeDialog() {
|
||||
this.$emit('close')
|
||||
if (this.beforeClose) return
|
||||
this.popup.close()
|
||||
},
|
||||
close() {
|
||||
this.popup.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.uni-popup-dialog {
|
||||
width: 300px;
|
||||
border-radius: 11px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.uni-dialog-title {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding-top: 25px;
|
||||
}
|
||||
|
||||
.uni-dialog-title-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.uni-dialog-content {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.uni-dialog-content-text {
|
||||
font-size: 14px;
|
||||
color: #6C6C6C;
|
||||
}
|
||||
|
||||
.uni-dialog-button-group {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
border-top-color: #f5f5f5;
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.uni-dialog-button {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.uni-border-left {
|
||||
border-left-color: #f0f0f0;
|
||||
border-left-style: solid;
|
||||
border-left-width: 1px;
|
||||
}
|
||||
|
||||
.uni-dialog-button-text {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.uni-button-color {
|
||||
color: #007aff;
|
||||
}
|
||||
|
||||
.uni-dialog-input {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
border: 1px #eee solid;
|
||||
height: 40px;
|
||||
padding: 0 10px;
|
||||
border-radius: 5px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.uni-popup__success {
|
||||
color: #4cd964;
|
||||
}
|
||||
|
||||
.uni-popup__warn {
|
||||
color: #f0ad4e;
|
||||
}
|
||||
|
||||
.uni-popup__error {
|
||||
color: #dd524d;
|
||||
}
|
||||
|
||||
.uni-popup__info {
|
||||
color: #909399;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,143 @@
|
||||
<template>
|
||||
<view class="uni-popup-message">
|
||||
<view class="uni-popup-message__box fixforpc-width" :class="'uni-popup__'+type">
|
||||
<slot>
|
||||
<text class="uni-popup-message-text" :class="'uni-popup__'+type+'-text'">{{message}}</text>
|
||||
</slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import popup from '../uni-popup/popup.js'
|
||||
/**
|
||||
* PopUp 弹出层-消息提示
|
||||
* @description 弹出层-消息提示
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
||||
* @property {String} type = [success|warning|info|error] 主题样式
|
||||
* @value success 成功
|
||||
* @value warning 提示
|
||||
* @value info 消息
|
||||
* @value error 错误
|
||||
* @property {String} message 消息提示文字
|
||||
* @property {String} duration 显示时间,设置为 0 则不会自动关闭
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: 'uniPopupMessage',
|
||||
mixins:[popup],
|
||||
props: {
|
||||
/**
|
||||
* 主题 success/warning/info/error 默认 success
|
||||
*/
|
||||
type: {
|
||||
type: String,
|
||||
default: 'success'
|
||||
},
|
||||
/**
|
||||
* 消息文字
|
||||
*/
|
||||
message: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
/**
|
||||
* 显示时间,设置为 0 则不会自动关闭
|
||||
*/
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 3000
|
||||
},
|
||||
maskShow:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
created() {
|
||||
this.popup.maskShow = this.maskShow
|
||||
this.popup.messageChild = this
|
||||
},
|
||||
methods: {
|
||||
timerClose(){
|
||||
if(this.duration === 0) return
|
||||
clearTimeout(this.timer)
|
||||
this.timer = setTimeout(()=>{
|
||||
this.popup.close()
|
||||
},this.duration)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" >
|
||||
.uni-popup-message {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.uni-popup-message__box {
|
||||
background-color: #e1f3d8;
|
||||
padding: 10px 15px;
|
||||
border-color: #eee;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
.fixforpc-width {
|
||||
margin-top: 20px;
|
||||
border-radius: 4px;
|
||||
flex: none;
|
||||
min-width: 380px;
|
||||
/* #ifndef APP-NVUE */
|
||||
max-width: 50%;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
max-width: 500px;
|
||||
/* #endif */
|
||||
}
|
||||
}
|
||||
|
||||
.uni-popup-message-text {
|
||||
font-size: 14px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.uni-popup__success {
|
||||
background-color: #e1f3d8;
|
||||
}
|
||||
|
||||
.uni-popup__success-text {
|
||||
color: #67C23A;
|
||||
}
|
||||
|
||||
.uni-popup__warn {
|
||||
background-color: #faecd8;
|
||||
}
|
||||
|
||||
.uni-popup__warn-text {
|
||||
color: #E6A23C;
|
||||
}
|
||||
|
||||
.uni-popup__error {
|
||||
background-color: #fde2e2;
|
||||
}
|
||||
|
||||
.uni-popup__error-text {
|
||||
color: #F56C6C;
|
||||
}
|
||||
|
||||
.uni-popup__info {
|
||||
background-color: #F2F6FC;
|
||||
}
|
||||
|
||||
.uni-popup__info-text {
|
||||
color: #909399;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,188 @@
|
||||
<template>
|
||||
<view class="uni-popup-share">
|
||||
<view class="uni-share-title"><text class="uni-share-title-text">{{shareTitleText}}</text></view>
|
||||
<view class="uni-share-content">
|
||||
<view class="uni-share-content-box">
|
||||
<view class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index" @click.stop="select(item,index)">
|
||||
<image class="uni-share-image" :src="item.icon" mode="aspectFill"></image>
|
||||
<text class="uni-share-text">{{item.text}}</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-share-button-box">
|
||||
<button class="uni-share-button" @click="close">{{cancelText}}</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import popup from '../uni-popup/popup.js'
|
||||
import {
|
||||
initVueI18n
|
||||
} from '@dcloudio/uni-i18n'
|
||||
import messages from '../uni-popup/i18n/index.js'
|
||||
const { t } = initVueI18n(messages)
|
||||
export default {
|
||||
name: 'UniPopupShare',
|
||||
mixins:[popup],
|
||||
emits:['select'],
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
beforeClose: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// TODO 替换为自己的图标
|
||||
bottomData: [{
|
||||
text: '微信',
|
||||
icon: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
|
||||
name: 'wx'
|
||||
},
|
||||
{
|
||||
text: '支付宝',
|
||||
icon: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
|
||||
name: 'ali'
|
||||
},
|
||||
{
|
||||
text: 'QQ',
|
||||
icon: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
|
||||
name: 'qq'
|
||||
},
|
||||
{
|
||||
text: '新浪',
|
||||
icon: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
|
||||
name: 'sina'
|
||||
},
|
||||
// {
|
||||
// text: '百度',
|
||||
// icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/1ec6e920-50bf-11eb-8a36-ebb87efcf8c0.png',
|
||||
// name: 'copy'
|
||||
// },
|
||||
// {
|
||||
// text: '其他',
|
||||
// icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/2e0fdfe0-50bf-11eb-b997-9918a5dda011.png',
|
||||
// name: 'more'
|
||||
// }
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
computed: {
|
||||
cancelText() {
|
||||
return t("uni-popup.cancel")
|
||||
},
|
||||
shareTitleText() {
|
||||
return this.title || t("uni-popup.shareTitle")
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 选择内容
|
||||
*/
|
||||
select(item, index) {
|
||||
this.$emit('select', {
|
||||
item,
|
||||
index
|
||||
})
|
||||
this.close()
|
||||
|
||||
},
|
||||
/**
|
||||
* 关闭窗口
|
||||
*/
|
||||
close() {
|
||||
if(this.beforeClose) return
|
||||
this.popup.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" >
|
||||
.uni-popup-share {
|
||||
background-color: #fff;
|
||||
border-top-left-radius: 11px;
|
||||
border-top-right-radius: 11px;
|
||||
}
|
||||
.uni-share-title {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 40px;
|
||||
}
|
||||
.uni-share-title-text {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
.uni-share-content {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.uni-share-content-box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
.uni-share-content-item {
|
||||
width: 90px;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 10px 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uni-share-content-item:active {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.uni-share-image {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.uni-share-text {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
color: #3B4144;
|
||||
}
|
||||
|
||||
.uni-share-button-box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.uni-share-button {
|
||||
flex: 1;
|
||||
border-radius: 50px;
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.uni-share-button::after {
|
||||
border-radius: 50px;
|
||||
}
|
||||
</style>
|
||||
7
uni_modules/uni-popup/components/uni-popup/i18n/en.json
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"uni-popup.cancel": "cancel",
|
||||
"uni-popup.ok": "ok",
|
||||
"uni-popup.placeholder": "pleace enter",
|
||||
"uni-popup.title": "Hint",
|
||||
"uni-popup.shareTitle": "Share to"
|
||||
}
|
||||
8
uni_modules/uni-popup/components/uni-popup/i18n/index.js
Normal file
@@ -0,0 +1,8 @@
|
||||
import en from './en.json'
|
||||
import zhHans from './zh-Hans.json'
|
||||
import zhHant from './zh-Hant.json'
|
||||
export default {
|
||||
en,
|
||||
'zh-Hans': zhHans,
|
||||
'zh-Hant': zhHant
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"uni-popup.cancel": "取消",
|
||||
"uni-popup.ok": "确定",
|
||||
"uni-popup.placeholder": "请输入",
|
||||
"uni-popup.title": "提示",
|
||||
"uni-popup.shareTitle": "分享到"
|
||||
}
|
||||
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"uni-popup.cancel": "取消",
|
||||
"uni-popup.ok": "確定",
|
||||
"uni-popup.placeholder": "請輸入",
|
||||
"uni-popup.title": "提示",
|
||||
"uni-popup.shareTitle": "分享到"
|
||||
}
|
||||
45
uni_modules/uni-popup/components/uni-popup/keypress.js
Normal file
@@ -0,0 +1,45 @@
|
||||
// #ifdef H5
|
||||
export default {
|
||||
name: 'Keypress',
|
||||
props: {
|
||||
disable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const keyNames = {
|
||||
esc: ['Esc', 'Escape'],
|
||||
tab: 'Tab',
|
||||
enter: 'Enter',
|
||||
space: [' ', 'Spacebar'],
|
||||
up: ['Up', 'ArrowUp'],
|
||||
left: ['Left', 'ArrowLeft'],
|
||||
right: ['Right', 'ArrowRight'],
|
||||
down: ['Down', 'ArrowDown'],
|
||||
delete: ['Backspace', 'Delete', 'Del']
|
||||
}
|
||||
const listener = ($event) => {
|
||||
if (this.disable) {
|
||||
return
|
||||
}
|
||||
const keyName = Object.keys(keyNames).find(key => {
|
||||
const keyName = $event.key
|
||||
const value = keyNames[key]
|
||||
return value === keyName || (Array.isArray(value) && value.includes(keyName))
|
||||
})
|
||||
if (keyName) {
|
||||
// 避免和其他按键事件冲突
|
||||
setTimeout(() => {
|
||||
this.$emit(keyName, {})
|
||||
}, 0)
|
||||
}
|
||||
}
|
||||
document.addEventListener('keyup', listener)
|
||||
// this.$once('hook:beforeDestroy', () => {
|
||||
// document.removeEventListener('keyup', listener)
|
||||
// })
|
||||
},
|
||||
render: () => {}
|
||||
}
|
||||
// #endif
|
||||
26
uni_modules/uni-popup/components/uni-popup/popup.js
Normal file
@@ -0,0 +1,26 @@
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.popup = this.getParent()
|
||||
},
|
||||
methods:{
|
||||
/**
|
||||
* 获取父元素实例
|
||||
*/
|
||||
getParent(name = 'uniPopup') {
|
||||
let parent = this.$parent;
|
||||
let parentName = parent.$options.name;
|
||||
while (parentName !== name) {
|
||||
parent = parent.$parent;
|
||||
if (!parent) return false
|
||||
parentName = parent.$options.name;
|
||||
}
|
||||
return parent;
|
||||
},
|
||||
}
|
||||
}
|
||||
90
uni_modules/uni-popup/components/uni-popup/uni-popup.uvue
Normal file
@@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<view class="popup-root" v-if="isOpen" v-show="isShow" @click="clickMask">
|
||||
<view @click.stop>
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
type CloseCallBack = ()=> void;
|
||||
let closeCallBack:CloseCallBack = () :void => {};
|
||||
export default {
|
||||
emits:["close","clickMask"],
|
||||
data() {
|
||||
return {
|
||||
isShow:false,
|
||||
isOpen:false
|
||||
}
|
||||
},
|
||||
props: {
|
||||
maskClick: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
// 设置show = true 时,如果没有 open 需要设置为 open
|
||||
isShow:{
|
||||
handler(isShow) {
|
||||
// console.log("isShow",isShow)
|
||||
if(isShow && this.isOpen == false){
|
||||
this.isOpen = true
|
||||
}
|
||||
},
|
||||
immediate:true
|
||||
},
|
||||
// 设置isOpen = true 时,如果没有 isShow 需要设置为 isShow
|
||||
isOpen:{
|
||||
handler(isOpen) {
|
||||
// console.log("isOpen",isOpen)
|
||||
if(isOpen && this.isShow == false){
|
||||
this.isShow = true
|
||||
}
|
||||
},
|
||||
immediate:true
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
open(){
|
||||
// ...funs : CloseCallBack[]
|
||||
// if(funs.length > 0){
|
||||
// closeCallBack = funs[0]
|
||||
// }
|
||||
this.isOpen = true;
|
||||
},
|
||||
clickMask(){
|
||||
if(this.maskClick == true){
|
||||
this.$emit('clickMask')
|
||||
this.close()
|
||||
}
|
||||
},
|
||||
close(): void{
|
||||
this.isOpen = false;
|
||||
this.$emit('close')
|
||||
closeCallBack()
|
||||
},
|
||||
hiden(){
|
||||
this.isShow = false
|
||||
},
|
||||
show(){
|
||||
this.isShow = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.popup-root {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 750rpx;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 99;
|
||||
}
|
||||
</style>
|
||||
518
uni_modules/uni-popup/components/uni-popup/uni-popup.vue
Normal file
@@ -0,0 +1,518 @@
|
||||
<template>
|
||||
<view v-if="showPopup" class="uni-popup" :class="[popupstyle, isDesktop ? 'fixforpc-z-index' : '']">
|
||||
<view @touchstart="touchstart">
|
||||
<uni-transition key="1" v-if="maskShow" name="mask" mode-class="fade" :styles="maskClass"
|
||||
:duration="duration" :show="showTrans" @click="onTap" />
|
||||
<uni-transition key="2" :mode-class="ani" name="content" :styles="transClass" :duration="duration"
|
||||
:show="showTrans" @click="onTap">
|
||||
<view class="uni-popup__wrapper" :style="getStyles" :class="[popupstyle]" @click="clear">
|
||||
<slot />
|
||||
</view>
|
||||
</uni-transition>
|
||||
</view>
|
||||
<!-- #ifdef H5 -->
|
||||
<keypress v-if="maskShow" @esc="onTap" />
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef H5
|
||||
import keypress from './keypress.js'
|
||||
// #endif
|
||||
|
||||
/**
|
||||
* PopUp 弹出层
|
||||
* @description 弹出层组件,为了解决遮罩弹层的问题
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
||||
* @property {String} type = [top|center|bottom|left|right|message|dialog|share] 弹出方式
|
||||
* @value top 顶部弹出
|
||||
* @value center 中间弹出
|
||||
* @value bottom 底部弹出
|
||||
* @value left 左侧弹出
|
||||
* @value right 右侧弹出
|
||||
* @value message 消息提示
|
||||
* @value dialog 对话框
|
||||
* @value share 底部分享示例
|
||||
* @property {Boolean} animation = [true|false] 是否开启动画
|
||||
* @property {Boolean} maskClick = [true|false] 蒙版点击是否关闭弹窗(废弃)
|
||||
* @property {Boolean} isMaskClick = [true|false] 蒙版点击是否关闭弹窗
|
||||
* @property {String} backgroundColor 主窗口背景色
|
||||
* @property {String} maskBackgroundColor 蒙版颜色
|
||||
* @property {String} borderRadius 设置圆角(左上、右上、右下和左下) 示例:"10px 10px 10px 10px"
|
||||
* @property {Boolean} safeArea 是否适配底部安全区
|
||||
* @event {Function} change 打开关闭弹窗触发,e={show: false}
|
||||
* @event {Function} maskClick 点击遮罩触发
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: 'uniPopup',
|
||||
components: {
|
||||
// #ifdef H5
|
||||
keypress
|
||||
// #endif
|
||||
},
|
||||
emits: ['change', 'maskClick'],
|
||||
props: {
|
||||
// 开启动画
|
||||
animation: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 弹出层类型,可选值,top: 顶部弹出层;bottom:底部弹出层;center:全屏弹出层
|
||||
// message: 消息提示 ; dialog : 对话框
|
||||
type: {
|
||||
type: String,
|
||||
default: 'center'
|
||||
},
|
||||
// maskClick
|
||||
isMaskClick: {
|
||||
type: Boolean,
|
||||
default: null
|
||||
},
|
||||
// TODO 2 个版本后废弃属性 ,使用 isMaskClick
|
||||
maskClick: {
|
||||
type: Boolean,
|
||||
default: null
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'none'
|
||||
},
|
||||
safeArea: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
maskBackgroundColor: {
|
||||
type: String,
|
||||
default: 'rgba(0, 0, 0, 0.4)'
|
||||
},
|
||||
borderRadius:{
|
||||
type: String,
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
/**
|
||||
* 监听type类型
|
||||
*/
|
||||
type: {
|
||||
handler: function(type) {
|
||||
if (!this.config[type]) return
|
||||
this[this.config[type]](true)
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
isDesktop: {
|
||||
handler: function(newVal) {
|
||||
if (!this.config[newVal]) return
|
||||
this[this.config[this.type]](true)
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
/**
|
||||
* 监听遮罩是否可点击
|
||||
* @param {Object} val
|
||||
*/
|
||||
maskClick: {
|
||||
handler: function(val) {
|
||||
this.mkclick = val
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
isMaskClick: {
|
||||
handler: function(val) {
|
||||
this.mkclick = val
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
// H5 下禁止底部滚动
|
||||
showPopup(show) {
|
||||
// #ifdef H5
|
||||
// fix by mehaotian 处理 h5 滚动穿透的问题
|
||||
document.getElementsByTagName('body')[0].style.overflow = show ? 'hidden' : 'visible'
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
duration: 300,
|
||||
ani: [],
|
||||
showPopup: false,
|
||||
showTrans: false,
|
||||
popupWidth: 0,
|
||||
popupHeight: 0,
|
||||
config: {
|
||||
top: 'top',
|
||||
bottom: 'bottom',
|
||||
center: 'center',
|
||||
left: 'left',
|
||||
right: 'right',
|
||||
message: 'top',
|
||||
dialog: 'center',
|
||||
share: 'bottom'
|
||||
},
|
||||
maskClass: {
|
||||
position: 'fixed',
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.4)'
|
||||
},
|
||||
transClass: {
|
||||
backgroundColor: 'transparent',
|
||||
borderRadius: this.borderRadius || "0",
|
||||
position: 'fixed',
|
||||
left: 0,
|
||||
right: 0
|
||||
},
|
||||
maskShow: true,
|
||||
mkclick: true,
|
||||
popupstyle: 'top'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getStyles() {
|
||||
let res = { backgroundColor: this.bg };
|
||||
if (this.borderRadius || "0") {
|
||||
res = Object.assign(res, { borderRadius: this.borderRadius })
|
||||
}
|
||||
return res;
|
||||
},
|
||||
isDesktop() {
|
||||
return this.popupWidth >= 500 && this.popupHeight >= 500
|
||||
},
|
||||
bg() {
|
||||
if (this.backgroundColor === '' || this.backgroundColor === 'none') {
|
||||
return 'transparent'
|
||||
}
|
||||
return this.backgroundColor
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const fixSize = () => {
|
||||
// #ifdef MP-WEIXIN
|
||||
const {
|
||||
windowWidth,
|
||||
windowHeight,
|
||||
windowTop,
|
||||
safeArea,
|
||||
screenHeight,
|
||||
safeAreaInsets
|
||||
} = uni.getWindowInfo()
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
const {
|
||||
windowWidth,
|
||||
windowHeight,
|
||||
windowTop,
|
||||
safeArea,
|
||||
screenHeight,
|
||||
safeAreaInsets
|
||||
} = uni.getSystemInfoSync()
|
||||
// #endif
|
||||
this.popupWidth = windowWidth
|
||||
this.popupHeight = windowHeight + (windowTop || 0)
|
||||
// TODO fix by mehaotian 是否适配底部安全区 ,目前微信ios 、和 app ios 计算有差异,需要框架修复
|
||||
if (safeArea && this.safeArea) {
|
||||
// #ifdef MP-WEIXIN
|
||||
this.safeAreaInsets = screenHeight - safeArea.bottom
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
this.safeAreaInsets = safeAreaInsets.bottom
|
||||
// #endif
|
||||
} else {
|
||||
this.safeAreaInsets = 0
|
||||
}
|
||||
}
|
||||
fixSize()
|
||||
// #ifdef H5
|
||||
// window.addEventListener('resize', fixSize)
|
||||
// this.$once('hook:beforeDestroy', () => {
|
||||
// window.removeEventListener('resize', fixSize)
|
||||
// })
|
||||
// #endif
|
||||
},
|
||||
// #ifndef VUE3
|
||||
// TODO vue2
|
||||
destroyed() {
|
||||
this.setH5Visible()
|
||||
},
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
// TODO vue3
|
||||
unmounted() {
|
||||
this.setH5Visible()
|
||||
},
|
||||
// #endif
|
||||
activated() {
|
||||
this.setH5Visible(!this.showPopup);
|
||||
},
|
||||
deactivated() {
|
||||
this.setH5Visible(true);
|
||||
},
|
||||
created() {
|
||||
// this.mkclick = this.isMaskClick || this.maskClick
|
||||
if (this.isMaskClick === null && this.maskClick === null) {
|
||||
this.mkclick = true
|
||||
} else {
|
||||
this.mkclick = this.isMaskClick !== null ? this.isMaskClick : this.maskClick
|
||||
}
|
||||
if (this.animation) {
|
||||
this.duration = 300
|
||||
} else {
|
||||
this.duration = 0
|
||||
}
|
||||
// TODO 处理 message 组件生命周期异常的问题
|
||||
this.messageChild = null
|
||||
// TODO 解决头条冒泡的问题
|
||||
this.clearPropagation = false
|
||||
this.maskClass.backgroundColor = this.maskBackgroundColor
|
||||
},
|
||||
methods: {
|
||||
setH5Visible(visible = true) {
|
||||
// #ifdef H5
|
||||
// fix by mehaotian 处理 h5 滚动穿透的问题
|
||||
document.getElementsByTagName('body')[0].style.overflow = visible ? "visible" : "hidden";
|
||||
// #endif
|
||||
},
|
||||
/**
|
||||
* 公用方法,不显示遮罩层
|
||||
*/
|
||||
closeMask() {
|
||||
this.maskShow = false
|
||||
},
|
||||
/**
|
||||
* 公用方法,遮罩层禁止点击
|
||||
*/
|
||||
disableMask() {
|
||||
this.mkclick = false
|
||||
},
|
||||
// TODO nvue 取消冒泡
|
||||
clear(e) {
|
||||
// #ifndef APP-NVUE
|
||||
e.stopPropagation()
|
||||
// #endif
|
||||
this.clearPropagation = true
|
||||
},
|
||||
|
||||
open(direction) {
|
||||
// fix by mehaotian 处理快速打开关闭的情况
|
||||
if (this.showPopup) {
|
||||
return
|
||||
}
|
||||
let innerType = ['top', 'center', 'bottom', 'left', 'right', 'message', 'dialog', 'share']
|
||||
if (!(direction && innerType.indexOf(direction) !== -1)) {
|
||||
direction = this.type
|
||||
}
|
||||
if (!this.config[direction]) {
|
||||
console.error('缺少类型:', direction)
|
||||
return
|
||||
}
|
||||
this[this.config[direction]]()
|
||||
this.$emit('change', {
|
||||
show: true,
|
||||
type: direction
|
||||
})
|
||||
},
|
||||
close(type) {
|
||||
this.showTrans = false
|
||||
this.$emit('change', {
|
||||
show: false,
|
||||
type: this.type
|
||||
})
|
||||
clearTimeout(this.timer)
|
||||
// // 自定义关闭事件
|
||||
// this.customOpen && this.customClose()
|
||||
this.timer = setTimeout(() => {
|
||||
this.showPopup = false
|
||||
}, 300)
|
||||
},
|
||||
// TODO 处理冒泡事件,头条的冒泡事件有问题 ,先这样兼容
|
||||
touchstart() {
|
||||
this.clearPropagation = false
|
||||
},
|
||||
|
||||
onTap() {
|
||||
if (this.clearPropagation) {
|
||||
// fix by mehaotian 兼容 nvue
|
||||
this.clearPropagation = false
|
||||
return
|
||||
}
|
||||
this.$emit('maskClick')
|
||||
if (!this.mkclick) return
|
||||
this.close()
|
||||
},
|
||||
/**
|
||||
* 顶部弹出样式处理
|
||||
*/
|
||||
top(type) {
|
||||
this.popupstyle = this.isDesktop ? 'fixforpc-top' : 'top'
|
||||
this.ani = ['slide-top']
|
||||
this.transClass = {
|
||||
position: 'fixed',
|
||||
left: 0,
|
||||
right: 0,
|
||||
backgroundColor: this.bg,
|
||||
borderRadius:this.borderRadius || "0"
|
||||
}
|
||||
// TODO 兼容 type 属性 ,后续会废弃
|
||||
if (type) return
|
||||
this.showPopup = true
|
||||
this.showTrans = true
|
||||
this.$nextTick(() => {
|
||||
this.showPoptrans()
|
||||
if (this.messageChild && this.type === 'message') {
|
||||
this.messageChild.timerClose()
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 底部弹出样式处理
|
||||
*/
|
||||
bottom(type) {
|
||||
this.popupstyle = 'bottom'
|
||||
this.ani = ['slide-bottom']
|
||||
this.transClass = {
|
||||
position: 'fixed',
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
paddingBottom: this.safeAreaInsets + 'px',
|
||||
backgroundColor: this.bg,
|
||||
borderRadius:this.borderRadius || "0",
|
||||
}
|
||||
// TODO 兼容 type 属性 ,后续会废弃
|
||||
if (type) return
|
||||
this.showPoptrans()
|
||||
},
|
||||
/**
|
||||
* 中间弹出样式处理
|
||||
*/
|
||||
center(type) {
|
||||
this.popupstyle = 'center'
|
||||
//微信小程序下,组合动画会出现文字向上闪动问题,再此做特殊处理
|
||||
// #ifdef MP-WEIXIN
|
||||
this.ani = ['fade']
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
this.ani = ['zoom-out', 'fade']
|
||||
// #endif
|
||||
this.transClass = {
|
||||
position: 'fixed',
|
||||
/* #ifndef APP-NVUE */
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
/* #endif */
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
borderRadius:this.borderRadius || "0"
|
||||
}
|
||||
// TODO 兼容 type 属性 ,后续会废弃
|
||||
if (type) return
|
||||
this.showPoptrans()
|
||||
},
|
||||
left(type) {
|
||||
this.popupstyle = 'left'
|
||||
this.ani = ['slide-left']
|
||||
this.transClass = {
|
||||
position: 'fixed',
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
backgroundColor: this.bg,
|
||||
borderRadius:this.borderRadius || "0",
|
||||
/* #ifndef APP-NVUE */
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
/* #endif */
|
||||
}
|
||||
// TODO 兼容 type 属性 ,后续会废弃
|
||||
if (type) return
|
||||
this.showPoptrans()
|
||||
},
|
||||
right(type) {
|
||||
this.popupstyle = 'right'
|
||||
this.ani = ['slide-right']
|
||||
this.transClass = {
|
||||
position: 'fixed',
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
backgroundColor: this.bg,
|
||||
borderRadius:this.borderRadius || "0",
|
||||
/* #ifndef APP-NVUE */
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
/* #endif */
|
||||
}
|
||||
// TODO 兼容 type 属性 ,后续会废弃
|
||||
if (type) return
|
||||
this.showPoptrans()
|
||||
},
|
||||
showPoptrans(){
|
||||
this.$nextTick(()=>{
|
||||
this.showPopup = true
|
||||
this.showTrans = true
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.uni-popup {
|
||||
position: fixed;
|
||||
/* #ifndef APP-NVUE */
|
||||
z-index: 99;
|
||||
|
||||
/* #endif */
|
||||
&.top,
|
||||
&.left,
|
||||
&.right {
|
||||
/* #ifdef H5 */
|
||||
top: var(--window-top);
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
top: 0;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-popup__wrapper {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
position: relative;
|
||||
|
||||
/* iphonex 等安全区设置,底部安全区适配 */
|
||||
/* #ifndef APP-NVUE */
|
||||
// padding-bottom: constant(safe-area-inset-bottom);
|
||||
// padding-bottom: env(safe-area-inset-bottom);
|
||||
/* #endif */
|
||||
&.left,
|
||||
&.right {
|
||||
/* #ifdef H5 */
|
||||
padding-top: var(--window-top);
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
padding-top: 0;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixforpc-z-index {
|
||||
/* #ifndef APP-NVUE */
|
||||
z-index: 999;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fixforpc-top {
|
||||
top: 0;
|
||||
}
|
||||
</style>
|
||||
90
uni_modules/uni-popup/package.json
Normal file
@@ -0,0 +1,90 @@
|
||||
{
|
||||
"id": "uni-popup",
|
||||
"displayName": "uni-popup 弹出层",
|
||||
"version": "1.9.8",
|
||||
"description": " Popup 组件,提供常用的弹层",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"弹出层",
|
||||
"弹窗",
|
||||
"popup",
|
||||
"弹框"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": ""
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"uni-scss",
|
||||
"uni-transition"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y",
|
||||
"alipay": "n"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y",
|
||||
"app-harmony": "u",
|
||||
"app-uvue": "u"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
17
uni_modules/uni-popup/readme.md
Normal file
@@ -0,0 +1,17 @@
|
||||
|
||||
|
||||
## Popup 弹出层
|
||||
> **组件名:uni-popup**
|
||||
> 代码块: `uPopup`
|
||||
> 关联组件:`uni-transition`
|
||||
|
||||
|
||||
弹出层组件,在应用中弹出一个消息提示窗口、提示框等
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-popup)
|
||||
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
8
uni_modules/uni-scss/changelog.md
Normal file
@@ -0,0 +1,8 @@
|
||||
## 1.0.3(2022-01-21)
|
||||
- 优化 组件示例
|
||||
## 1.0.2(2021-11-22)
|
||||
- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题
|
||||
## 1.0.1(2021-11-22)
|
||||
- 修复 vue3中scss语法兼容问题
|
||||
## 1.0.0(2021-11-18)
|
||||
- init
|
||||
1
uni_modules/uni-scss/index.scss
Normal file
@@ -0,0 +1 @@
|
||||
@import './styles/index.scss';
|
||||
82
uni_modules/uni-scss/package.json
Normal file
@@ -0,0 +1,82 @@
|
||||
{
|
||||
"id": "uni-scss",
|
||||
"displayName": "uni-scss 辅助样式",
|
||||
"version": "1.0.3",
|
||||
"description": "uni-sass是uni-ui提供的一套全局样式 ,通过一些简单的类名和sass变量,实现简单的页面布局操作,比如颜色、边距、圆角等。",
|
||||
"keywords": [
|
||||
"uni-scss",
|
||||
"uni-ui",
|
||||
"辅助样式"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": "^3.1.0"
|
||||
},
|
||||
"dcloudext": {
|
||||
"category": [
|
||||
"JS SDK",
|
||||
"通用 SDK"
|
||||
],
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "u"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "n",
|
||||
"联盟": "n"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
4
uni_modules/uni-scss/readme.md
Normal file
@@ -0,0 +1,4 @@
|
||||
`uni-sass` 是 `uni-ui`提供的一套全局样式 ,通过一些简单的类名和`sass`变量,实现简单的页面布局操作,比如颜色、边距、圆角等。
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass)
|
||||
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
|
||||
7
uni_modules/uni-scss/styles/index.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
@import './setting/_variables.scss';
|
||||
@import './setting/_border.scss';
|
||||
@import './setting/_color.scss';
|
||||
@import './setting/_space.scss';
|
||||
@import './setting/_radius.scss';
|
||||
@import './setting/_text.scss';
|
||||
@import './setting/_styles.scss';
|
||||
3
uni_modules/uni-scss/styles/setting/_border.scss
Normal file
@@ -0,0 +1,3 @@
|
||||
.uni-border {
|
||||
border: 1px $uni-border-1 solid;
|
||||
}
|
||||
66
uni_modules/uni-scss/styles/setting/_color.scss
Normal file
@@ -0,0 +1,66 @@
|
||||
|
||||
// TODO 暂时不需要 class ,需要用户使用变量实现 ,如果使用类名其实并不推荐
|
||||
// @mixin get-styles($k,$c) {
|
||||
// @if $k == size or $k == weight{
|
||||
// font-#{$k}:#{$c}
|
||||
// }@else{
|
||||
// #{$k}:#{$c}
|
||||
// }
|
||||
// }
|
||||
$uni-ui-color:(
|
||||
// 主色
|
||||
primary: $uni-primary,
|
||||
primary-disable: $uni-primary-disable,
|
||||
primary-light: $uni-primary-light,
|
||||
// 辅助色
|
||||
success: $uni-success,
|
||||
success-disable: $uni-success-disable,
|
||||
success-light: $uni-success-light,
|
||||
warning: $uni-warning,
|
||||
warning-disable: $uni-warning-disable,
|
||||
warning-light: $uni-warning-light,
|
||||
error: $uni-error,
|
||||
error-disable: $uni-error-disable,
|
||||
error-light: $uni-error-light,
|
||||
info: $uni-info,
|
||||
info-disable: $uni-info-disable,
|
||||
info-light: $uni-info-light,
|
||||
// 中性色
|
||||
main-color: $uni-main-color,
|
||||
base-color: $uni-base-color,
|
||||
secondary-color: $uni-secondary-color,
|
||||
extra-color: $uni-extra-color,
|
||||
// 背景色
|
||||
bg-color: $uni-bg-color,
|
||||
// 边框颜色
|
||||
border-1: $uni-border-1,
|
||||
border-2: $uni-border-2,
|
||||
border-3: $uni-border-3,
|
||||
border-4: $uni-border-4,
|
||||
// 黑色
|
||||
black:$uni-black,
|
||||
// 白色
|
||||
white:$uni-white,
|
||||
// 透明
|
||||
transparent:$uni-transparent
|
||||
) !default;
|
||||
@each $key, $child in $uni-ui-color {
|
||||
.uni-#{"" + $key} {
|
||||
color: $child;
|
||||
}
|
||||
.uni-#{"" + $key}-bg {
|
||||
background-color: $child;
|
||||
}
|
||||
}
|
||||
.uni-shadow-sm {
|
||||
box-shadow: $uni-shadow-sm;
|
||||
}
|
||||
.uni-shadow-base {
|
||||
box-shadow: $uni-shadow-base;
|
||||
}
|
||||
.uni-shadow-lg {
|
||||
box-shadow: $uni-shadow-lg;
|
||||
}
|
||||
.uni-mask {
|
||||
background-color:$uni-mask;
|
||||
}
|
||||
55
uni_modules/uni-scss/styles/setting/_radius.scss
Normal file
@@ -0,0 +1,55 @@
|
||||
@mixin radius($r,$d:null ,$important: false){
|
||||
$radius-value:map-get($uni-radius, $r) if($important, !important, null);
|
||||
// Key exists within the $uni-radius variable
|
||||
@if (map-has-key($uni-radius, $r) and $d){
|
||||
@if $d == t {
|
||||
border-top-left-radius:$radius-value;
|
||||
border-top-right-radius:$radius-value;
|
||||
}@else if $d == r {
|
||||
border-top-right-radius:$radius-value;
|
||||
border-bottom-right-radius:$radius-value;
|
||||
}@else if $d == b {
|
||||
border-bottom-left-radius:$radius-value;
|
||||
border-bottom-right-radius:$radius-value;
|
||||
}@else if $d == l {
|
||||
border-top-left-radius:$radius-value;
|
||||
border-bottom-left-radius:$radius-value;
|
||||
}@else if $d == tl {
|
||||
border-top-left-radius:$radius-value;
|
||||
}@else if $d == tr {
|
||||
border-top-right-radius:$radius-value;
|
||||
}@else if $d == br {
|
||||
border-bottom-right-radius:$radius-value;
|
||||
}@else if $d == bl {
|
||||
border-bottom-left-radius:$radius-value;
|
||||
}
|
||||
}@else{
|
||||
border-radius:$radius-value;
|
||||
}
|
||||
}
|
||||
|
||||
@each $key, $child in $uni-radius {
|
||||
@if($key){
|
||||
.uni-radius-#{"" + $key} {
|
||||
@include radius($key)
|
||||
}
|
||||
}@else{
|
||||
.uni-radius {
|
||||
@include radius($key)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $direction in t, r, b, l,tl, tr, br, bl {
|
||||
@each $key, $child in $uni-radius {
|
||||
@if($key){
|
||||
.uni-radius-#{"" + $direction}-#{"" + $key} {
|
||||
@include radius($key,$direction,false)
|
||||
}
|
||||
}@else{
|
||||
.uni-radius-#{$direction} {
|
||||
@include radius($key,$direction,false)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
56
uni_modules/uni-scss/styles/setting/_space.scss
Normal file
@@ -0,0 +1,56 @@
|
||||
|
||||
@mixin fn($space,$direction,$size,$n) {
|
||||
@if $n {
|
||||
#{$space}-#{$direction}: #{$size*$uni-space-root}px
|
||||
} @else {
|
||||
#{$space}-#{$direction}: #{-$size*$uni-space-root}px
|
||||
}
|
||||
}
|
||||
@mixin get-styles($direction,$i,$space,$n){
|
||||
@if $direction == t {
|
||||
@include fn($space, top,$i,$n);
|
||||
}
|
||||
@if $direction == r {
|
||||
@include fn($space, right,$i,$n);
|
||||
}
|
||||
@if $direction == b {
|
||||
@include fn($space, bottom,$i,$n);
|
||||
}
|
||||
@if $direction == l {
|
||||
@include fn($space, left,$i,$n);
|
||||
}
|
||||
@if $direction == x {
|
||||
@include fn($space, left,$i,$n);
|
||||
@include fn($space, right,$i,$n);
|
||||
}
|
||||
@if $direction == y {
|
||||
@include fn($space, top,$i,$n);
|
||||
@include fn($space, bottom,$i,$n);
|
||||
}
|
||||
@if $direction == a {
|
||||
@if $n {
|
||||
#{$space}:#{$i*$uni-space-root}px;
|
||||
} @else {
|
||||
#{$space}:#{-$i*$uni-space-root}px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $orientation in m,p {
|
||||
$space: margin;
|
||||
@if $orientation == m {
|
||||
$space: margin;
|
||||
} @else {
|
||||
$space: padding;
|
||||
}
|
||||
@for $i from 0 through 16 {
|
||||
@each $direction in t, r, b, l, x, y, a {
|
||||
.uni-#{$orientation}#{$direction}-#{$i} {
|
||||
@include get-styles($direction,$i,$space,true);
|
||||
}
|
||||
.uni-#{$orientation}#{$direction}-n#{$i} {
|
||||
@include get-styles($direction,$i,$space,false);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
167
uni_modules/uni-scss/styles/setting/_styles.scss
Normal file
@@ -0,0 +1,167 @@
|
||||
/* #ifndef APP-NVUE */
|
||||
|
||||
$-color-white:#fff;
|
||||
$-color-black:#000;
|
||||
@mixin base-style($color) {
|
||||
color: #fff;
|
||||
background-color: $color;
|
||||
border-color: mix($-color-black, $color, 8%);
|
||||
&:not([hover-class]):active {
|
||||
background: mix($-color-black, $color, 10%);
|
||||
border-color: mix($-color-black, $color, 20%);
|
||||
color: $-color-white;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
@mixin is-color($color) {
|
||||
@include base-style($color);
|
||||
&[loading] {
|
||||
@include base-style($color);
|
||||
&::before {
|
||||
margin-right:5px;
|
||||
}
|
||||
}
|
||||
&[disabled] {
|
||||
&,
|
||||
&[loading],
|
||||
&:not([hover-class]):active {
|
||||
color: $-color-white;
|
||||
border-color: mix(darken($color,10%), $-color-white);
|
||||
background-color: mix($color, $-color-white);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@mixin base-plain-style($color) {
|
||||
color:$color;
|
||||
background-color: mix($-color-white, $color, 90%);
|
||||
border-color: mix($-color-white, $color, 70%);
|
||||
&:not([hover-class]):active {
|
||||
background: mix($-color-white, $color, 80%);
|
||||
color: $color;
|
||||
outline: none;
|
||||
border-color: mix($-color-white, $color, 50%);
|
||||
}
|
||||
}
|
||||
@mixin is-plain($color){
|
||||
&[plain] {
|
||||
@include base-plain-style($color);
|
||||
&[loading] {
|
||||
@include base-plain-style($color);
|
||||
&::before {
|
||||
margin-right:5px;
|
||||
}
|
||||
}
|
||||
&[disabled] {
|
||||
&,
|
||||
&:active {
|
||||
color: mix($-color-white, $color, 40%);
|
||||
background-color: mix($-color-white, $color, 90%);
|
||||
border-color: mix($-color-white, $color, 80%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.uni-btn {
|
||||
margin: 5px;
|
||||
color: #393939;
|
||||
border:1px solid #ccc;
|
||||
font-size: 16px;
|
||||
font-weight: 200;
|
||||
background-color: #F9F9F9;
|
||||
// TODO 暂时处理边框隐藏一边的问题
|
||||
overflow: visible;
|
||||
&::after{
|
||||
border: none;
|
||||
}
|
||||
|
||||
&:not([type]),&[type=default] {
|
||||
color: #999;
|
||||
&[loading] {
|
||||
background: none;
|
||||
&::before {
|
||||
margin-right:5px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
&[disabled]{
|
||||
color: mix($-color-white, #999, 60%);
|
||||
&,
|
||||
&[loading],
|
||||
&:active {
|
||||
color: mix($-color-white, #999, 60%);
|
||||
background-color: mix($-color-white,$-color-black , 98%);
|
||||
border-color: mix($-color-white, #999, 85%);
|
||||
}
|
||||
}
|
||||
|
||||
&[plain] {
|
||||
color: #999;
|
||||
background: none;
|
||||
border-color: $uni-border-1;
|
||||
&:not([hover-class]):active {
|
||||
background: none;
|
||||
color: mix($-color-white, $-color-black, 80%);
|
||||
border-color: mix($-color-white, $-color-black, 90%);
|
||||
outline: none;
|
||||
}
|
||||
&[disabled]{
|
||||
&,
|
||||
&[loading],
|
||||
&:active {
|
||||
background: none;
|
||||
color: mix($-color-white, #999, 60%);
|
||||
border-color: mix($-color-white, #999, 85%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not([hover-class]):active {
|
||||
color: mix($-color-white, $-color-black, 50%);
|
||||
}
|
||||
|
||||
&[size=mini] {
|
||||
font-size: 16px;
|
||||
font-weight: 200;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
&.uni-btn-small {
|
||||
font-size: 14px;
|
||||
}
|
||||
&.uni-btn-mini {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
&.uni-btn-radius {
|
||||
border-radius: 999px;
|
||||
}
|
||||
&[type=primary] {
|
||||
@include is-color($uni-primary);
|
||||
@include is-plain($uni-primary)
|
||||
}
|
||||
&[type=success] {
|
||||
@include is-color($uni-success);
|
||||
@include is-plain($uni-success)
|
||||
}
|
||||
&[type=error] {
|
||||
@include is-color($uni-error);
|
||||
@include is-plain($uni-error)
|
||||
}
|
||||
&[type=warning] {
|
||||
@include is-color($uni-warning);
|
||||
@include is-plain($uni-warning)
|
||||
}
|
||||
&[type=info] {
|
||||
@include is-color($uni-info);
|
||||
@include is-plain($uni-info)
|
||||
}
|
||||
}
|
||||
/* #endif */
|
||||
24
uni_modules/uni-scss/styles/setting/_text.scss
Normal file
@@ -0,0 +1,24 @@
|
||||
@mixin get-styles($k,$c) {
|
||||
@if $k == size or $k == weight{
|
||||
font-#{$k}:#{$c}
|
||||
}@else{
|
||||
#{$k}:#{$c}
|
||||
}
|
||||
}
|
||||
|
||||
@each $key, $child in $uni-headings {
|
||||
/* #ifndef APP-NVUE */
|
||||
.uni-#{$key} {
|
||||
@each $k, $c in $child {
|
||||
@include get-styles($k,$c)
|
||||
}
|
||||
}
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
.container .uni-#{$key} {
|
||||
@each $k, $c in $child {
|
||||
@include get-styles($k,$c)
|
||||
}
|
||||
}
|
||||
/* #endif */
|
||||
}
|
||||
146
uni_modules/uni-scss/styles/setting/_variables.scss
Normal file
@@ -0,0 +1,146 @@
|
||||
// @use "sass:math";
|
||||
@import '../tools/functions.scss';
|
||||
// 间距基础倍数
|
||||
$uni-space-root: 2 !default;
|
||||
// 边框半径默认值
|
||||
$uni-radius-root:5px !default;
|
||||
$uni-radius: () !default;
|
||||
// 边框半径断点
|
||||
$uni-radius: map-deep-merge(
|
||||
(
|
||||
0: 0,
|
||||
// TODO 当前版本暂时不支持 sm 属性
|
||||
// 'sm': math.div($uni-radius-root, 2),
|
||||
null: $uni-radius-root,
|
||||
'lg': $uni-radius-root * 2,
|
||||
'xl': $uni-radius-root * 6,
|
||||
'pill': 9999px,
|
||||
'circle': 50%
|
||||
),
|
||||
$uni-radius
|
||||
);
|
||||
// 字体家族
|
||||
$body-font-family: 'Roboto', sans-serif !default;
|
||||
// 文本
|
||||
$heading-font-family: $body-font-family !default;
|
||||
$uni-headings: () !default;
|
||||
$letterSpacing: -0.01562em;
|
||||
$uni-headings: map-deep-merge(
|
||||
(
|
||||
'h1': (
|
||||
size: 32px,
|
||||
weight: 300,
|
||||
line-height: 50px,
|
||||
// letter-spacing:-0.01562em
|
||||
),
|
||||
'h2': (
|
||||
size: 28px,
|
||||
weight: 300,
|
||||
line-height: 40px,
|
||||
// letter-spacing: -0.00833em
|
||||
),
|
||||
'h3': (
|
||||
size: 24px,
|
||||
weight: 400,
|
||||
line-height: 32px,
|
||||
// letter-spacing: normal
|
||||
),
|
||||
'h4': (
|
||||
size: 20px,
|
||||
weight: 400,
|
||||
line-height: 30px,
|
||||
// letter-spacing: 0.00735em
|
||||
),
|
||||
'h5': (
|
||||
size: 16px,
|
||||
weight: 400,
|
||||
line-height: 24px,
|
||||
// letter-spacing: normal
|
||||
),
|
||||
'h6': (
|
||||
size: 14px,
|
||||
weight: 500,
|
||||
line-height: 18px,
|
||||
// letter-spacing: 0.0125em
|
||||
),
|
||||
'subtitle': (
|
||||
size: 12px,
|
||||
weight: 400,
|
||||
line-height: 20px,
|
||||
// letter-spacing: 0.00937em
|
||||
),
|
||||
'body': (
|
||||
font-size: 14px,
|
||||
font-weight: 400,
|
||||
line-height: 22px,
|
||||
// letter-spacing: 0.03125em
|
||||
),
|
||||
'caption': (
|
||||
'size': 12px,
|
||||
'weight': 400,
|
||||
'line-height': 20px,
|
||||
// 'letter-spacing': 0.03333em,
|
||||
// 'text-transform': false
|
||||
)
|
||||
),
|
||||
$uni-headings
|
||||
);
|
||||
|
||||
|
||||
|
||||
// 主色
|
||||
$uni-primary: #2979ff !default;
|
||||
$uni-primary-disable:lighten($uni-primary,20%) !default;
|
||||
$uni-primary-light: lighten($uni-primary,25%) !default;
|
||||
|
||||
// 辅助色
|
||||
// 除了主色外的场景色,需要在不同的场景中使用(例如危险色表示危险的操作)。
|
||||
$uni-success: #18bc37 !default;
|
||||
$uni-success-disable:lighten($uni-success,20%) !default;
|
||||
$uni-success-light: lighten($uni-success,25%) !default;
|
||||
|
||||
$uni-warning: #f3a73f !default;
|
||||
$uni-warning-disable:lighten($uni-warning,20%) !default;
|
||||
$uni-warning-light: lighten($uni-warning,25%) !default;
|
||||
|
||||
$uni-error: #e43d33 !default;
|
||||
$uni-error-disable:lighten($uni-error,20%) !default;
|
||||
$uni-error-light: lighten($uni-error,25%) !default;
|
||||
|
||||
$uni-info: #8f939c !default;
|
||||
$uni-info-disable:lighten($uni-info,20%) !default;
|
||||
$uni-info-light: lighten($uni-info,25%) !default;
|
||||
|
||||
// 中性色
|
||||
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。
|
||||
$uni-main-color: #3a3a3a !default; // 主要文字
|
||||
$uni-base-color: #6a6a6a !default; // 常规文字
|
||||
$uni-secondary-color: #909399 !default; // 次要文字
|
||||
$uni-extra-color: #c7c7c7 !default; // 辅助说明
|
||||
|
||||
// 边框颜色
|
||||
$uni-border-1: #F0F0F0 !default;
|
||||
$uni-border-2: #EDEDED !default;
|
||||
$uni-border-3: #DCDCDC !default;
|
||||
$uni-border-4: #B9B9B9 !default;
|
||||
|
||||
// 常规色
|
||||
$uni-black: #000000 !default;
|
||||
$uni-white: #ffffff !default;
|
||||
$uni-transparent: rgba($color: #000000, $alpha: 0) !default;
|
||||
|
||||
// 背景色
|
||||
$uni-bg-color: #f7f7f7 !default;
|
||||
|
||||
/* 水平间距 */
|
||||
$uni-spacing-sm: 8px !default;
|
||||
$uni-spacing-base: 15px !default;
|
||||
$uni-spacing-lg: 30px !default;
|
||||
|
||||
// 阴影
|
||||
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5) !default;
|
||||
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2) !default;
|
||||
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5) !default;
|
||||
|
||||
// 蒙版
|
||||
$uni-mask: rgba($color: #000000, $alpha: 0.4) !default;
|
||||
19
uni_modules/uni-scss/styles/tools/functions.scss
Normal file
@@ -0,0 +1,19 @@
|
||||
// 合并 map
|
||||
@function map-deep-merge($parent-map, $child-map){
|
||||
$result: $parent-map;
|
||||
@each $key, $child in $child-map {
|
||||
$parent-has-key: map-has-key($result, $key);
|
||||
$parent-value: map-get($result, $key);
|
||||
$parent-type: type-of($parent-value);
|
||||
$child-type: type-of($child);
|
||||
$parent-is-map: $parent-type == map;
|
||||
$child-is-map: $child-type == map;
|
||||
|
||||
@if (not $parent-has-key) or ($parent-type != $child-type) or (not ($parent-is-map and $child-is-map)){
|
||||
$result: map-merge($result, ( $key: $child ));
|
||||
}@else {
|
||||
$result: map-merge($result, ( $key: map-deep-merge($parent-value, $child) ));
|
||||
}
|
||||
}
|
||||
@return $result;
|
||||
};
|
||||
31
uni_modules/uni-scss/theme.scss
Normal file
@@ -0,0 +1,31 @@
|
||||
// 间距基础倍数
|
||||
$uni-space-root: 2;
|
||||
// 边框半径默认值
|
||||
$uni-radius-root:5px;
|
||||
// 主色
|
||||
$uni-primary: #2979ff;
|
||||
// 辅助色
|
||||
$uni-success: #4cd964;
|
||||
// 警告色
|
||||
$uni-warning: #f0ad4e;
|
||||
// 错误色
|
||||
$uni-error: #dd524d;
|
||||
// 描述色
|
||||
$uni-info: #909399;
|
||||
// 中性色
|
||||
$uni-main-color: #303133;
|
||||
$uni-base-color: #606266;
|
||||
$uni-secondary-color: #909399;
|
||||
$uni-extra-color: #C0C4CC;
|
||||
// 背景色
|
||||
$uni-bg-color: #f5f5f5;
|
||||
// 边框颜色
|
||||
$uni-border-1: #DCDFE6;
|
||||
$uni-border-2: #E4E7ED;
|
||||
$uni-border-3: #EBEEF5;
|
||||
$uni-border-4: #F2F6FC;
|
||||
|
||||
// 常规色
|
||||
$uni-black: #000000;
|
||||
$uni-white: #ffffff;
|
||||
$uni-transparent: rgba($color: #000000, $alpha: 0);
|
||||
62
uni_modules/uni-scss/variables.scss
Normal file
@@ -0,0 +1,62 @@
|
||||
@import './styles/setting/_variables.scss';
|
||||
// 间距基础倍数
|
||||
$uni-space-root: 2;
|
||||
// 边框半径默认值
|
||||
$uni-radius-root:5px;
|
||||
|
||||
// 主色
|
||||
$uni-primary: #2979ff;
|
||||
$uni-primary-disable:mix(#fff,$uni-primary,50%);
|
||||
$uni-primary-light: mix(#fff,$uni-primary,80%);
|
||||
|
||||
// 辅助色
|
||||
// 除了主色外的场景色,需要在不同的场景中使用(例如危险色表示危险的操作)。
|
||||
$uni-success: #18bc37;
|
||||
$uni-success-disable:mix(#fff,$uni-success,50%);
|
||||
$uni-success-light: mix(#fff,$uni-success,80%);
|
||||
|
||||
$uni-warning: #f3a73f;
|
||||
$uni-warning-disable:mix(#fff,$uni-warning,50%);
|
||||
$uni-warning-light: mix(#fff,$uni-warning,80%);
|
||||
|
||||
$uni-error: #e43d33;
|
||||
$uni-error-disable:mix(#fff,$uni-error,50%);
|
||||
$uni-error-light: mix(#fff,$uni-error,80%);
|
||||
|
||||
$uni-info: #8f939c;
|
||||
$uni-info-disable:mix(#fff,$uni-info,50%);
|
||||
$uni-info-light: mix(#fff,$uni-info,80%);
|
||||
|
||||
// 中性色
|
||||
// 中性色用于文本、背景和边框颜色。通过运用不同的中性色,来表现层次结构。
|
||||
$uni-main-color: #3a3a3a; // 主要文字
|
||||
$uni-base-color: #6a6a6a; // 常规文字
|
||||
$uni-secondary-color: #909399; // 次要文字
|
||||
$uni-extra-color: #c7c7c7; // 辅助说明
|
||||
|
||||
// 边框颜色
|
||||
$uni-border-1: #F0F0F0;
|
||||
$uni-border-2: #EDEDED;
|
||||
$uni-border-3: #DCDCDC;
|
||||
$uni-border-4: #B9B9B9;
|
||||
|
||||
// 常规色
|
||||
$uni-black: #000000;
|
||||
$uni-white: #ffffff;
|
||||
$uni-transparent: rgba($color: #000000, $alpha: 0);
|
||||
|
||||
// 背景色
|
||||
$uni-bg-color: #f7f7f7;
|
||||
|
||||
/* 水平间距 */
|
||||
$uni-spacing-sm: 8px;
|
||||
$uni-spacing-base: 15px;
|
||||
$uni-spacing-lg: 30px;
|
||||
|
||||
// 阴影
|
||||
$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5);
|
||||
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
|
||||
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5);
|
||||
|
||||
// 蒙版
|
||||
$uni-mask: rgba($color: #000000, $alpha: 0.4);
|
||||
27
uni_modules/uni-transition/changelog.md
Normal file
@@ -0,0 +1,27 @@
|
||||
## 1.3.4(2025-04-16)
|
||||
- 修复 页面数据更新到底动画复原的问题
|
||||
- 修复 示例页面打开报错的问题
|
||||
## 1.3.3(2024-04-23)
|
||||
- 修复 当元素会受变量影响自动隐藏的bug
|
||||
## 1.3.2(2023-05-04)
|
||||
- 修复 NVUE 平台报错的问题
|
||||
## 1.3.1(2021-11-23)
|
||||
- 修复 init 方法初始化问题
|
||||
## 1.3.0(2021-11-19)
|
||||
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-transition](https://uniapp.dcloud.io/component/uniui/uni-transition)
|
||||
## 1.2.1(2021-09-27)
|
||||
- 修复 init 方法不生效的 Bug
|
||||
## 1.2.0(2021-07-30)
|
||||
- 组件兼容 vue3,如何创建 vue3 项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||
## 1.1.1(2021-05-12)
|
||||
- 新增 示例地址
|
||||
- 修复 示例项目缺少组件的 Bug
|
||||
## 1.1.0(2021-04-22)
|
||||
- 新增 通过方法自定义动画
|
||||
- 新增 custom-class 非 NVUE 平台支持自定义 class 定制样式
|
||||
- 优化 动画触发逻辑,使动画更流畅
|
||||
- 优化 支持单独的动画类型
|
||||
- 优化 文档示例
|
||||
## 1.0.2(2021-02-05)
|
||||
- 调整为 uni_modules 目录规范
|
||||
@@ -0,0 +1,131 @@
|
||||
// const defaultOption = {
|
||||
// duration: 300,
|
||||
// timingFunction: 'linear',
|
||||
// delay: 0,
|
||||
// transformOrigin: '50% 50% 0'
|
||||
// }
|
||||
// #ifdef APP-NVUE
|
||||
const nvueAnimation = uni.requireNativePlugin('animation')
|
||||
// #endif
|
||||
class MPAnimation {
|
||||
constructor(options, _this) {
|
||||
this.options = options
|
||||
// 在iOS10+QQ小程序平台下,传给原生的对象一定是个普通对象而不是Proxy对象,否则会报parameter should be Object instead of ProxyObject的错误
|
||||
this.animation = uni.createAnimation({
|
||||
...options
|
||||
})
|
||||
this.currentStepAnimates = {}
|
||||
this.next = 0
|
||||
this.$ = _this
|
||||
|
||||
}
|
||||
|
||||
_nvuePushAnimates(type, args) {
|
||||
let aniObj = this.currentStepAnimates[this.next]
|
||||
let styles = {}
|
||||
if (!aniObj) {
|
||||
styles = {
|
||||
styles: {},
|
||||
config: {}
|
||||
}
|
||||
} else {
|
||||
styles = aniObj
|
||||
}
|
||||
if (animateTypes1.includes(type)) {
|
||||
if (!styles.styles.transform) {
|
||||
styles.styles.transform = ''
|
||||
}
|
||||
let unit = ''
|
||||
if(type === 'rotate'){
|
||||
unit = 'deg'
|
||||
}
|
||||
styles.styles.transform += `${type}(${args+unit}) `
|
||||
} else {
|
||||
styles.styles[type] = `${args}`
|
||||
}
|
||||
this.currentStepAnimates[this.next] = styles
|
||||
}
|
||||
_animateRun(styles = {}, config = {}) {
|
||||
let ref = this.$.$refs['ani'].ref
|
||||
if (!ref) return
|
||||
return new Promise((resolve, reject) => {
|
||||
nvueAnimation.transition(ref, {
|
||||
styles,
|
||||
...config
|
||||
}, res => {
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
_nvueNextAnimate(animates, step = 0, fn) {
|
||||
let obj = animates[step]
|
||||
if (obj) {
|
||||
let {
|
||||
styles,
|
||||
config
|
||||
} = obj
|
||||
this._animateRun(styles, config).then(() => {
|
||||
step += 1
|
||||
this._nvueNextAnimate(animates, step, fn)
|
||||
})
|
||||
} else {
|
||||
this.currentStepAnimates = {}
|
||||
typeof fn === 'function' && fn()
|
||||
this.isEnd = true
|
||||
}
|
||||
}
|
||||
|
||||
step(config = {}) {
|
||||
// #ifndef APP-NVUE
|
||||
this.animation.step(config)
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
this.currentStepAnimates[this.next].config = Object.assign({}, this.options, config)
|
||||
this.currentStepAnimates[this.next].styles.transformOrigin = this.currentStepAnimates[this.next].config.transformOrigin
|
||||
this.next++
|
||||
// #endif
|
||||
return this
|
||||
}
|
||||
|
||||
run(fn) {
|
||||
// #ifndef APP-NVUE
|
||||
this.$.animationData = this.animation.export()
|
||||
this.$.timer = setTimeout(() => {
|
||||
typeof fn === 'function' && fn()
|
||||
}, this.$.durationTime)
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
this.isEnd = false
|
||||
let ref = this.$.$refs['ani'] && this.$.$refs['ani'].ref
|
||||
if(!ref) return
|
||||
this._nvueNextAnimate(this.currentStepAnimates, 0, fn)
|
||||
this.next = 0
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const animateTypes1 = ['matrix', 'matrix3d', 'rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scale3d',
|
||||
'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'translate', 'translate3d', 'translateX', 'translateY',
|
||||
'translateZ'
|
||||
]
|
||||
const animateTypes2 = ['opacity', 'backgroundColor']
|
||||
const animateTypes3 = ['width', 'height', 'left', 'right', 'top', 'bottom']
|
||||
animateTypes1.concat(animateTypes2, animateTypes3).forEach(type => {
|
||||
MPAnimation.prototype[type] = function(...args) {
|
||||
// #ifndef APP-NVUE
|
||||
this.animation[type](...args)
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
this._nvuePushAnimates(type, args)
|
||||
// #endif
|
||||
return this
|
||||
}
|
||||
})
|
||||
|
||||
export function createAnimation(option, _this) {
|
||||
if(!_this) return
|
||||
clearTimeout(_this.timer)
|
||||
return new MPAnimation(option, _this)
|
||||
}
|
||||
@@ -0,0 +1,289 @@
|
||||
<template>
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<view v-show="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<view v-if="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick"><slot></slot></view>
|
||||
<!-- #endif -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { createAnimation } from './createAnimation'
|
||||
|
||||
/**
|
||||
* Transition 过渡动画
|
||||
* @description 简单过渡动画组件
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=985
|
||||
* @property {Boolean} show = [false|true] 控制组件显示或隐藏
|
||||
* @property {Array|String} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
|
||||
* @value fade 渐隐渐出过渡
|
||||
* @value slide-top 由上至下过渡
|
||||
* @value slide-right 由右至左过渡
|
||||
* @value slide-bottom 由下至上过渡
|
||||
* @value slide-left 由左至右过渡
|
||||
* @value zoom-in 由小到大过渡
|
||||
* @value zoom-out 由大到小过渡
|
||||
* @property {Number} duration 过渡动画持续时间
|
||||
* @property {Object} styles 组件样式,同 css 样式,注意带’-‘连接符的属性需要使用小驼峰写法如:`backgroundColor:red`
|
||||
*/
|
||||
export default {
|
||||
name: 'uniTransition',
|
||||
emits:['click','change'],
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
modeClass: {
|
||||
type: [Array, String],
|
||||
default() {
|
||||
return 'fade'
|
||||
}
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 300
|
||||
},
|
||||
styles: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
customClass:{
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
onceRender:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShow: false,
|
||||
transform: '',
|
||||
opacity: 1,
|
||||
animationData: {},
|
||||
durationTime: 300,
|
||||
config: {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
this.open()
|
||||
} else {
|
||||
// 避免上来就执行 close,导致动画错乱
|
||||
if (this.isShow) {
|
||||
this.close()
|
||||
}
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 生成样式数据
|
||||
stylesObject() {
|
||||
let styles = {
|
||||
...this.styles,
|
||||
'transition-duration': this.duration / 1000 + 's'
|
||||
}
|
||||
let transform = ''
|
||||
for (let i in styles) {
|
||||
let line = this.toLine(i)
|
||||
transform += line + ':' + styles[i] + ';'
|
||||
}
|
||||
return transform
|
||||
},
|
||||
// 初始化动画条件
|
||||
transformStyles() {
|
||||
return 'transform:' + this.transform + ';' + 'opacity:' + this.opacity + ';' + this.stylesObject
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 动画默认配置
|
||||
this.config = {
|
||||
duration: this.duration,
|
||||
timingFunction: 'ease',
|
||||
transformOrigin: '50% 50%',
|
||||
delay: 0
|
||||
}
|
||||
this.durationTime = this.duration
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* ref 触发 初始化动画
|
||||
*/
|
||||
init(obj = {}) {
|
||||
if (obj.duration) {
|
||||
this.durationTime = obj.duration
|
||||
}
|
||||
this.animation = createAnimation(Object.assign(this.config, obj),this)
|
||||
},
|
||||
/**
|
||||
* 点击组件触发回调
|
||||
*/
|
||||
onClick() {
|
||||
this.$emit('click', {
|
||||
detail: this.isShow
|
||||
})
|
||||
},
|
||||
/**
|
||||
* ref 触发 动画分组
|
||||
* @param {Object} obj
|
||||
*/
|
||||
step(obj, config = {}) {
|
||||
if (!this.animation) return
|
||||
for (let i in obj) {
|
||||
try {
|
||||
if(typeof obj[i] === 'object'){
|
||||
this.animation[i](...obj[i])
|
||||
}else{
|
||||
this.animation[i](obj[i])
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(`方法 ${i} 不存在`)
|
||||
}
|
||||
}
|
||||
this.animation.step(config)
|
||||
return this
|
||||
},
|
||||
/**
|
||||
* ref 触发 执行动画
|
||||
*/
|
||||
run(fn) {
|
||||
if (!this.animation) return
|
||||
this.animation.run(fn)
|
||||
},
|
||||
// 开始过度动画
|
||||
open() {
|
||||
clearTimeout(this.timer)
|
||||
this.transform = ''
|
||||
this.isShow = true
|
||||
let { opacity, transform } = this.styleInit(false)
|
||||
if (typeof opacity !== 'undefined') {
|
||||
this.opacity = opacity
|
||||
}
|
||||
this.transform = transform
|
||||
// 确保动态样式已经生效后,执行动画,如果不加 nextTick ,会导致 wx 动画执行异常
|
||||
this.$nextTick(() => {
|
||||
// TODO 定时器保证动画完全执行,目前有些问题,后面会取消定时器
|
||||
this.timer = setTimeout(() => {
|
||||
this.animation = createAnimation(this.config, this)
|
||||
this.tranfromInit(false).step()
|
||||
this.animation.run(() => {
|
||||
this.transform = ''
|
||||
this.opacity = opacity || 1
|
||||
})
|
||||
this.$emit('change', {
|
||||
detail: this.isShow
|
||||
})
|
||||
}, 20)
|
||||
})
|
||||
},
|
||||
// 关闭过度动画
|
||||
close(type) {
|
||||
if (!this.animation) return
|
||||
this.tranfromInit(true)
|
||||
.step()
|
||||
.run(() => {
|
||||
this.isShow = false
|
||||
this.animationData = null
|
||||
this.animation = null
|
||||
let { opacity, transform } = this.styleInit(false)
|
||||
this.opacity = opacity || 1
|
||||
this.transform = transform
|
||||
this.$emit('change', {
|
||||
detail: this.isShow
|
||||
})
|
||||
})
|
||||
},
|
||||
// 处理动画开始前的默认样式
|
||||
styleInit(type) {
|
||||
let styles = {
|
||||
transform: ''
|
||||
}
|
||||
let buildStyle = (type, mode) => {
|
||||
if (mode === 'fade') {
|
||||
styles.opacity = this.animationType(type)[mode]
|
||||
} else {
|
||||
styles.transform += this.animationType(type)[mode] + ' '
|
||||
}
|
||||
}
|
||||
if (typeof this.modeClass === 'string') {
|
||||
buildStyle(type, this.modeClass)
|
||||
} else {
|
||||
this.modeClass.forEach(mode => {
|
||||
buildStyle(type, mode)
|
||||
})
|
||||
}
|
||||
return styles
|
||||
},
|
||||
// 处理内置组合动画
|
||||
tranfromInit(type) {
|
||||
let buildTranfrom = (type, mode) => {
|
||||
let aniNum = null
|
||||
if (mode === 'fade') {
|
||||
aniNum = type ? 0 : 1
|
||||
} else {
|
||||
aniNum = type ? '-100%' : '0'
|
||||
if (mode === 'zoom-in') {
|
||||
aniNum = type ? 0.8 : 1
|
||||
}
|
||||
if (mode === 'zoom-out') {
|
||||
aniNum = type ? 1.2 : 1
|
||||
}
|
||||
if (mode === 'slide-right') {
|
||||
aniNum = type ? '100%' : '0'
|
||||
}
|
||||
if (mode === 'slide-bottom') {
|
||||
aniNum = type ? '100%' : '0'
|
||||
}
|
||||
}
|
||||
this.animation[this.animationMode()[mode]](aniNum)
|
||||
}
|
||||
if (typeof this.modeClass === 'string') {
|
||||
buildTranfrom(type, this.modeClass)
|
||||
} else {
|
||||
this.modeClass.forEach(mode => {
|
||||
buildTranfrom(type, mode)
|
||||
})
|
||||
}
|
||||
|
||||
return this.animation
|
||||
},
|
||||
animationType(type) {
|
||||
return {
|
||||
fade: type ? 0 : 1,
|
||||
'slide-top': `translateY(${type ? '0' : '-100%'})`,
|
||||
'slide-right': `translateX(${type ? '0' : '100%'})`,
|
||||
'slide-bottom': `translateY(${type ? '0' : '100%'})`,
|
||||
'slide-left': `translateX(${type ? '0' : '-100%'})`,
|
||||
'zoom-in': `scaleX(${type ? 1 : 0.8}) scaleY(${type ? 1 : 0.8})`,
|
||||
'zoom-out': `scaleX(${type ? 1 : 1.2}) scaleY(${type ? 1 : 1.2})`
|
||||
}
|
||||
},
|
||||
// 内置动画类型与实际动画对应字典
|
||||
animationMode() {
|
||||
return {
|
||||
fade: 'opacity',
|
||||
'slide-top': 'translateY',
|
||||
'slide-right': 'translateX',
|
||||
'slide-bottom': 'translateY',
|
||||
'slide-left': 'translateX',
|
||||
'zoom-in': 'scale',
|
||||
'zoom-out': 'scale'
|
||||
}
|
||||
},
|
||||
// 驼峰转中横线
|
||||
toLine(name) {
|
||||
return name.replace(/([A-Z])/g, '-$1').toLowerCase()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
87
uni_modules/uni-transition/package.json
Normal file
@@ -0,0 +1,87 @@
|
||||
{
|
||||
"id": "uni-transition",
|
||||
"displayName": "uni-transition 过渡动画",
|
||||
"version": "1.3.4",
|
||||
"description": "元素的简单过渡动画",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"uniui",
|
||||
"动画",
|
||||
"过渡",
|
||||
"过渡动画"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": ""
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": ["uni-scss"],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y",
|
||||
"alipay": "n"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y",
|
||||
"app-harmony": "u",
|
||||
"app-uvue": "n"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "u",
|
||||
"联盟": "u"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
11
uni_modules/uni-transition/readme.md
Normal file
@@ -0,0 +1,11 @@
|
||||
|
||||
|
||||
## Transition 过渡动画
|
||||
> **组件名:uni-transition**
|
||||
> 代码块: `uTransition`
|
||||
|
||||
|
||||
元素过渡动画
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-transition)
|
||||
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
|
||||
92
utils/ability.js
Normal file
@@ -0,0 +1,92 @@
|
||||
import { abilityCheck } from "@/api/system";
|
||||
import adManager from "@/utils/adManager";
|
||||
|
||||
/**
|
||||
* Checks if a user has the ability to perform an action (e.g., download).
|
||||
* Handles common blocking scenarios like "need_share" or "need_ad".
|
||||
*
|
||||
* @param {string} scene - The scene identifier for the ability check (e.g., "wallpaper_download").
|
||||
* @returns {Promise<boolean>} - Returns true if the action can proceed, false otherwise.
|
||||
*/
|
||||
export const checkAbilityAndHandle = async (scene) => {
|
||||
try {
|
||||
const abilityRes = await abilityCheck(scene);
|
||||
if (abilityRes.canUse) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (
|
||||
abilityRes?.blockType === "need_share" &&
|
||||
abilityRes?.message === "分享可继续"
|
||||
) {
|
||||
uni.showToast({
|
||||
title: "分享给好友即可下载",
|
||||
icon: "none",
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
if (
|
||||
abilityRes?.blockType === "need_ad"
|
||||
) {
|
||||
uni.showModal({
|
||||
title: "积分不足",
|
||||
content: "观看广告可获得50积分,继续下载",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
adManager.showVideoAd();
|
||||
}
|
||||
},
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
if (abilityRes?.blockType === "need_vip") {
|
||||
uni.showModal({
|
||||
title: "会员激活",
|
||||
content: "会员激活即可继续使用该功能,是否前往开通?",
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.navigateTo({
|
||||
url: "/pages/mine/vip",
|
||||
});
|
||||
}
|
||||
},
|
||||
});
|
||||
return false;
|
||||
}
|
||||
|
||||
uni.showToast({
|
||||
title: "您今日下载次数已用完,明日再试",
|
||||
icon: "none",
|
||||
});
|
||||
return false;
|
||||
} catch (e) {
|
||||
console.error("Ability check failed", e);
|
||||
uni.showToast({ title: "系统繁忙,请稍后重试", icon: "none" });
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Gets the display label for an unlock type.
|
||||
* @param {string} unlockType - The unlock type identifier.
|
||||
* @returns {string} - The display label.
|
||||
*/
|
||||
export const getUnlockLabel = (unlockType) => {
|
||||
if (!unlockType) return "解锁";
|
||||
switch (unlockType) {
|
||||
case "sing3":
|
||||
return "连续签到3天";
|
||||
case "sing5":
|
||||
return "连续签到5天";
|
||||
case "sing7":
|
||||
return "连续签到7天";
|
||||
case "ad":
|
||||
return "广告";
|
||||
case "vip":
|
||||
return "VIP";
|
||||
default:
|
||||
return "解锁";
|
||||
}
|
||||
};
|
||||
199
utils/adManager.js
Normal file
@@ -0,0 +1,199 @@
|
||||
import { watchAdStart, watchAdReward } from "@/api/system.js";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
|
||||
class AdManager {
|
||||
constructor() {
|
||||
this.videoAd = null;
|
||||
this.rewardToken = "";
|
||||
this.isLoaded = false;
|
||||
this.isAdShowing = false; // 新增:标记广告是否正在展示
|
||||
this.adUnitId = "adunit-d7a28e0357d98947"; // Default ID from RewardAd.vue
|
||||
|
||||
// 彻底废除预初始化。
|
||||
// 在微信小程序中,如果在页面未完全就绪时调用 createRewardedVideoAd,
|
||||
// 会导致底层寻找挂载点失败,抛出 `insertTextView:fail` 等严重渲染错误。
|
||||
// 因此改为:只在用户真正点击“看广告”时才进行初始化。
|
||||
}
|
||||
|
||||
/**
|
||||
* Initializes the ad instance synchronously when needed.
|
||||
* @param {string} adUnitId
|
||||
*/
|
||||
_initSync(adUnitId) {
|
||||
if (this.videoAd && this.adUnitId === adUnitId) {
|
||||
return true; // Already initialized for this ID
|
||||
}
|
||||
|
||||
this.adUnitId = adUnitId || this.adUnitId;
|
||||
|
||||
// #ifdef MP-WEIXIN || MP-ALIPAY || MP-TOUTIAO || MP-QQ
|
||||
if (uni.createRewardedVideoAd) {
|
||||
try {
|
||||
// Destroy old instance if ID changed
|
||||
if (this.videoAd) {
|
||||
if (this.videoAd.destroy) {
|
||||
try {
|
||||
this.videoAd.destroy();
|
||||
} catch (destroyErr) {
|
||||
console.error("Ad Manager: destroy old ad failed", destroyErr);
|
||||
}
|
||||
}
|
||||
this.videoAd = null;
|
||||
}
|
||||
|
||||
// 核心修复:微信小程序官方建议使用单例,且多次调用 createRewardedVideoAd 传入相同的 adUnitId 会返回同一个实例。
|
||||
// 但如果在短时间内销毁又立即创建,底层可能会发生不可预知的渲染报错(如找不到 parent 节点)。
|
||||
// 因此,我们只需安全地获取实例,并重新绑定事件。
|
||||
this.videoAd = uni.createRewardedVideoAd({
|
||||
adUnitId: this.adUnitId
|
||||
});
|
||||
|
||||
if (this.videoAd) {
|
||||
// 清理之前可能存在的残留事件,防止重复触发和内存泄漏导致底层崩溃
|
||||
if (this.videoAd.offLoad) this.videoAd.offLoad();
|
||||
if (this.videoAd.offError) this.videoAd.offError();
|
||||
if (this.videoAd.offClose) this.videoAd.offClose();
|
||||
|
||||
this.videoAd.onLoad(() => {
|
||||
console.log("Ad Manager: Ad Loaded");
|
||||
this.isLoaded = true;
|
||||
});
|
||||
|
||||
this.videoAd.onError((err) => {
|
||||
console.error("Ad Manager: Ad Load Error", err);
|
||||
this.isLoaded = false;
|
||||
});
|
||||
return true;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Ad Manager Init Error", e);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the rewarded video ad.
|
||||
* Handles the full flow: start session -> show ad -> verify completion -> claim reward -> refresh assets.
|
||||
* @param {string} [adUnitId] - Optional adUnitId to override the default.
|
||||
* @param {string} [providedToken] - Optional token if watchAdStart was already called externally.
|
||||
* @returns {Promise<boolean>} Resolves with true if reward was claimed, false otherwise.
|
||||
*/
|
||||
async showVideoAd(adUnitId, providedToken) {
|
||||
if (this.isAdShowing || this.isStarting) {
|
||||
console.log("Ad Manager: Ad is already starting or showing");
|
||||
return false;
|
||||
}
|
||||
|
||||
this.isStarting = true;
|
||||
|
||||
// 延迟到这一步才初始化,避开页面渲染期
|
||||
const canInit = this._initSync(adUnitId);
|
||||
|
||||
if (!canInit || !this.videoAd) {
|
||||
uni.showToast({ title: "当前环境不支持广告", icon: "none" });
|
||||
this.isStarting = false;
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
// Step 1: Start Ad Session (if not provided)
|
||||
if (providedToken) {
|
||||
this.rewardToken = providedToken;
|
||||
} else {
|
||||
const startRes = await watchAdStart();
|
||||
if (!startRes || !startRes.rewardToken) {
|
||||
uni.showToast({ title: "广告启动失败,请稍后再试", icon: "none" });
|
||||
this.isStarting = false;
|
||||
return false;
|
||||
}
|
||||
this.rewardToken = startRes.rewardToken;
|
||||
}
|
||||
|
||||
// Step 2: Show Ad
|
||||
try {
|
||||
this.isAdShowing = true;
|
||||
this.isStarting = false;
|
||||
await this.videoAd.show();
|
||||
} catch (e) {
|
||||
// Retry load and show
|
||||
try {
|
||||
await this.videoAd.load();
|
||||
await this.videoAd.show();
|
||||
} catch (loadErr) {
|
||||
this.isAdShowing = false;
|
||||
console.error("Ad Manager: Retry load failed", loadErr);
|
||||
throw loadErr;
|
||||
}
|
||||
}
|
||||
|
||||
// Step 3: Wait for Close
|
||||
return new Promise((resolve) => {
|
||||
const onCloseHandler = async (res) => {
|
||||
// 延迟 500ms 释放状态,防止从广告返回页面时(onShow)立即触发 DOM 大量更新,导致底层 insertTextView:fail 崩溃
|
||||
setTimeout(() => {
|
||||
this.isAdShowing = false;
|
||||
}, 500);
|
||||
|
||||
// 安全地解绑事件
|
||||
try {
|
||||
if (this.videoAd && this.videoAd.offClose) {
|
||||
this.videoAd.offClose(onCloseHandler); // Clean up listener
|
||||
}
|
||||
} catch (offErr) {
|
||||
console.error("Ad Manager: offClose error", offErr);
|
||||
}
|
||||
|
||||
if (res && res.isEnded) {
|
||||
// Step 4: Claim Reward
|
||||
// Only claim if token wasn't provided externally (if provided, external component claims it)
|
||||
if (!providedToken) {
|
||||
await this._claimReward(this.rewardToken);
|
||||
}
|
||||
resolve(true);
|
||||
} else {
|
||||
uni.showToast({ title: "观看完整广告才能获取奖励哦", icon: "none" });
|
||||
resolve(false);
|
||||
}
|
||||
};
|
||||
|
||||
try {
|
||||
this.videoAd.onClose(onCloseHandler);
|
||||
} catch (onErr) {
|
||||
console.error("Ad Manager: onClose error", onErr);
|
||||
resolve(false);
|
||||
}
|
||||
});
|
||||
|
||||
} catch (e) {
|
||||
console.error("Ad Manager: Show failed", e);
|
||||
uni.showToast({ title: "广告加载失败,请稍后再试", icon: "none" });
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
async _claimReward(token) {
|
||||
try {
|
||||
uni.showLoading({ title: "发放奖励中..." });
|
||||
const res = await watchAdReward(token);
|
||||
if (res) {
|
||||
uni.showToast({
|
||||
title: "获得50积分",
|
||||
icon: "success",
|
||||
});
|
||||
// Refresh user assets
|
||||
const userStore = useUserStore();
|
||||
await userStore.fetchUserAssets();
|
||||
}
|
||||
} catch (e) {
|
||||
console.error("Ad Manager: Reward claim failed", e);
|
||||
uni.showToast({ title: "奖励发放失败", icon: "none" });
|
||||
} finally {
|
||||
uni.hideLoading();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default new AdManager();
|
||||
127
utils/common.js
Normal file
@@ -0,0 +1,127 @@
|
||||
import { getDeviceInfo } from "@/utils/system";
|
||||
import {
|
||||
saveRecord,
|
||||
viewRecord,
|
||||
createShareToken,
|
||||
createTracking,
|
||||
} from "@/api/system";
|
||||
|
||||
export const generateObjectId = (
|
||||
m = Math,
|
||||
d = Date,
|
||||
h = 16,
|
||||
s = (s) => m.floor(s).toString(h),
|
||||
) => s(d.now() / 1000) + " ".repeat(h).replace(/./g, () => s(m.random() * h));
|
||||
|
||||
export const uploadImage = (filePath) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.uploadFile({
|
||||
url: "https://api.ai-meng.com/api/common/upload",
|
||||
filePath: filePath,
|
||||
name: "file",
|
||||
header: {
|
||||
"x-app-id": "69665538a49b8ae3be50fe5d",
|
||||
},
|
||||
success: (res) => {
|
||||
if (res.statusCode < 400) {
|
||||
try {
|
||||
const keyJson = JSON.parse(res.data);
|
||||
if (keyJson?.data?.result === "auditFailed") {
|
||||
reject("图片不符合发布规范,请稍作修改后再试");
|
||||
} else {
|
||||
const url = `https://file.lihailezzc.com/${keyJson?.data.key}`;
|
||||
resolve(url);
|
||||
}
|
||||
} catch (e) {
|
||||
reject(e);
|
||||
}
|
||||
} else {
|
||||
reject(new Error("Upload failed"));
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(err);
|
||||
},
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
export const saveRecordRequest = async (path, targetId, scene, imageUrl) => {
|
||||
if (!imageUrl) {
|
||||
imageUrl = await uploadImage(path);
|
||||
}
|
||||
const deviceInfo = getDeviceInfo();
|
||||
saveRecord({
|
||||
scene,
|
||||
targetId,
|
||||
imageUrl,
|
||||
deviceInfo,
|
||||
});
|
||||
};
|
||||
|
||||
export const saveViewRequest = async (shareToken, scene, targetId = "") => {
|
||||
const deviceInfo = getDeviceInfo();
|
||||
viewRecord({
|
||||
shareToken,
|
||||
scene,
|
||||
targetId,
|
||||
deviceInfo,
|
||||
});
|
||||
};
|
||||
|
||||
export const saveRemoteImageToLocal = (imageUrl) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.downloadFile({
|
||||
url: imageUrl,
|
||||
success: (res) => {
|
||||
if (res.statusCode === 200) {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
success: () => {
|
||||
resolve(true);
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(err);
|
||||
},
|
||||
});
|
||||
} else {
|
||||
reject(
|
||||
new Error("Download failed with status code: " + res.statusCode),
|
||||
);
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(err);
|
||||
},
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
export const getShareToken = async (scene, targetId = "") => {
|
||||
const deviceInfo = getDeviceInfo();
|
||||
const shareTokenRes = await createShareToken({
|
||||
scene,
|
||||
targetId,
|
||||
...deviceInfo,
|
||||
});
|
||||
return shareTokenRes?.shareToken || "";
|
||||
};
|
||||
|
||||
export const trackRecord = (event) => {
|
||||
const pages = getCurrentPages();
|
||||
// 核心修复:在小程序刚启动或页面尚未压栈时,pages 可能为空数组
|
||||
const currentPage = pages && pages.length > 0 ? pages[pages.length - 1] : null;
|
||||
const route = currentPage ? currentPage.route : "app_launch";
|
||||
|
||||
const deviceInfo = getDeviceInfo();
|
||||
createTracking({
|
||||
...event,
|
||||
page: route,
|
||||
deviceInfo,
|
||||
});
|
||||
};
|
||||
|
||||
export const getThumbUrl = (url) => {
|
||||
if (!url) return "";
|
||||
return `${url}?imageView2/1/w/200/h/200/q/80`;
|
||||
};
|
||||
18
utils/date.js
Normal file
@@ -0,0 +1,18 @@
|
||||
export function formatDate(isoString, format = 'YYYY-MM-DD HH:mm:ss') {
|
||||
if (!isoString) return ''
|
||||
const date = new Date(isoString)
|
||||
if (isNaN(date.getTime())) return ''
|
||||
|
||||
const pad = (n) => n.toString().padStart(2, '0')
|
||||
|
||||
const map = {
|
||||
YYYY: date.getFullYear().toString(),
|
||||
MM: pad(date.getMonth() + 1),
|
||||
DD: pad(date.getDate()),
|
||||
HH: pad(date.getHours()),
|
||||
mm: pad(date.getMinutes()),
|
||||
ss: pad(date.getSeconds())
|
||||
}
|
||||
|
||||
return format.replace(/YYYY|MM|DD|HH|mm|ss/g, token => map[token])
|
||||
}
|
||||
53
utils/login.js
Normal file
@@ -0,0 +1,53 @@
|
||||
export const wxLogin = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
wx.login({
|
||||
success: (res) => {
|
||||
if (res.code) {
|
||||
resolve(res.code);
|
||||
} else {
|
||||
reject("登录失败:code为空");
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(err);
|
||||
},
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
export const alipayLogin = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
// #ifdef MP-ALIPAY
|
||||
my.getAuthCode({
|
||||
scopes: "auth_user",
|
||||
success: (res) => {
|
||||
if (res.authCode) {
|
||||
resolve(res.authCode);
|
||||
} else {
|
||||
reject("登录失败:authCode为空");
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(err);
|
||||
},
|
||||
});
|
||||
// #endif
|
||||
// #ifndef MP-ALIPAY
|
||||
reject("当前非支付宝环境");
|
||||
// #endif
|
||||
});
|
||||
};
|
||||
|
||||
export const wxGetUserProfile = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
wx.getUserProfile({
|
||||
desc: "用于完善用户信息",
|
||||
success: (res) => {
|
||||
resolve(res);
|
||||
},
|
||||
fail: (err) => {
|
||||
reject(err);
|
||||
},
|
||||
});
|
||||
});
|
||||
};
|
||||
143
utils/request.js
Normal file
@@ -0,0 +1,143 @@
|
||||
const BASE_URL = "https://api.ai-meng.com";
|
||||
// const BASE_URL = 'http://127.0.0.1:3999'
|
||||
// const BASE_URL = "http://192.168.1.2:3999";
|
||||
// const BASE_URL = "http://192.168.31.253:3999";
|
||||
import { useUserStore } from "@/stores/user";
|
||||
import { getPlatform } from "./system.js";
|
||||
const platform = getPlatform();
|
||||
|
||||
// 环境区分
|
||||
// const BASE_URL =
|
||||
// process.env.NODE_ENV === 'production'
|
||||
// ? 'https://apis.lihailezzc.com'
|
||||
// : 'http://127.0.0.1:3999'
|
||||
// 192.168.2.186
|
||||
// 192.168.31.253
|
||||
// const BASE_URL = 'https://apis.lihailezzc.com'
|
||||
|
||||
let isLoadingCount = 0; // 计数多次请求loading
|
||||
|
||||
function showLoadingFlag(loadingText) {
|
||||
if (isLoadingCount === 0) {
|
||||
uni.showLoading({ title: loadingText });
|
||||
}
|
||||
isLoadingCount++;
|
||||
}
|
||||
|
||||
function hideLoading() {
|
||||
isLoadingCount--;
|
||||
if (isLoadingCount <= 0) {
|
||||
isLoadingCount = 0;
|
||||
uni.hideLoading();
|
||||
}
|
||||
}
|
||||
|
||||
function getHeaders() {
|
||||
const userStore = useUserStore();
|
||||
const headers = {
|
||||
"x-app-id": "69665538a49b8ae3be50fe5d",
|
||||
"x-platform": platform,
|
||||
"x-user-id": userStore?.userInfo?.id || "",
|
||||
};
|
||||
if (userStore.token) {
|
||||
headers["Authorization"] = userStore.token;
|
||||
}
|
||||
return headers;
|
||||
}
|
||||
|
||||
function handleError(err, showError = true) {
|
||||
if (!showError) return;
|
||||
let msg = "网络异常,请稍后重试";
|
||||
if (typeof err === "string") {
|
||||
msg = err;
|
||||
} else if (err?.msg) {
|
||||
msg = err.msg;
|
||||
} else if (err?.message) {
|
||||
msg = err.message;
|
||||
}
|
||||
uni.showModal({
|
||||
title: "错误提示",
|
||||
content: msg,
|
||||
showCancel: false,
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 请求函数,支持自动加载状态、token、错误弹窗、重试等
|
||||
* @param {Object} config 请求配置
|
||||
* @param {string} config.url 请求路径(必填)
|
||||
* @param {string} [config.method='GET'] 请求方法
|
||||
* @param {Object} [config.data={}] 请求参数
|
||||
* @param {Object} [config.header={}] 额外 headers
|
||||
* @param {boolean} [config.showLoading=true] 是否自动显示加载提示
|
||||
* @param {boolean} [config.showError=true] 是否自动弹错误提示
|
||||
* @param {number} [config.timeout=10000] 请求超时,单位毫秒
|
||||
* @param {number} [config.retry=1] 失败后自动重试次数
|
||||
* @returns {Promise<any>} 返回接口 data
|
||||
*/
|
||||
export function request(config) {
|
||||
if (!config || !config.url) {
|
||||
return Promise.reject(new Error("请求缺少 url 参数"));
|
||||
}
|
||||
|
||||
const {
|
||||
url,
|
||||
method = "GET",
|
||||
data = {},
|
||||
header = {},
|
||||
showLoading = false,
|
||||
showError = true,
|
||||
retry = 1,
|
||||
loadingText = "加载中",
|
||||
} = config;
|
||||
|
||||
const finalHeader = { ...getHeaders(), ...header };
|
||||
const upperMethod = method.toUpperCase();
|
||||
|
||||
let attempt = 0;
|
||||
|
||||
const doRequest = () =>
|
||||
new Promise((resolve, reject) => {
|
||||
if (showLoading) showLoadingFlag(loadingText);
|
||||
|
||||
uni.request({
|
||||
url: BASE_URL + url,
|
||||
method: upperMethod,
|
||||
data,
|
||||
header: finalHeader,
|
||||
success: (res) => {
|
||||
if (showLoading) hideLoading();
|
||||
const { statusCode, data: body } = res;
|
||||
if (
|
||||
(statusCode === 200 || statusCode === 201) &&
|
||||
body?.code === 200
|
||||
) {
|
||||
resolve(body.data);
|
||||
} else {
|
||||
reject({
|
||||
type: "business",
|
||||
msg: body?.msg || "服务器错误",
|
||||
data: body,
|
||||
});
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
if (showLoading) hideLoading();
|
||||
reject({ type: "network", msg: "网络请求失败", error: err });
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
// 自动重试
|
||||
const tryRequest = () =>
|
||||
doRequest().catch((err) => {
|
||||
if (attempt < retry) {
|
||||
attempt++;
|
||||
return tryRequest();
|
||||
}
|
||||
if (showError) handleError(err.msg || err);
|
||||
return Promise.reject(err);
|
||||
});
|
||||
|
||||
return tryRequest();
|
||||
}
|
||||
122
utils/system.js
Normal file
@@ -0,0 +1,122 @@
|
||||
function getSafeSystemInfo() {
|
||||
try {
|
||||
// #ifdef MP-WEIXIN
|
||||
// 优先使用原生 wx 新 API,避开 uni 包装层内部对 getSystemInfoSync 的兼容调用
|
||||
if (
|
||||
typeof wx !== "undefined" &&
|
||||
wx.getWindowInfo &&
|
||||
wx.getAppBaseInfo &&
|
||||
wx.getDeviceInfo
|
||||
) {
|
||||
return {
|
||||
...wx.getWindowInfo(),
|
||||
...wx.getAppBaseInfo(),
|
||||
...wx.getDeviceInfo(),
|
||||
};
|
||||
}
|
||||
// #endif
|
||||
|
||||
if (uni.getWindowInfo && uni.getAppBaseInfo && uni.getDeviceInfo) {
|
||||
return {
|
||||
...uni.getWindowInfo(),
|
||||
...uni.getAppBaseInfo(),
|
||||
...uni.getDeviceInfo(),
|
||||
};
|
||||
}
|
||||
} catch (e) {
|
||||
// fall through to legacy fallback
|
||||
}
|
||||
|
||||
return uni.getSystemInfoSync();
|
||||
}
|
||||
|
||||
let SYSTEM = getSafeSystemInfo();
|
||||
|
||||
export const getStatusBarHeight = () => SYSTEM.statusBarHeight || 15;
|
||||
|
||||
export const getTitleBarHeight = () => {
|
||||
// #ifdef MP-ALIPAY
|
||||
return 44;
|
||||
// #endif
|
||||
|
||||
if (uni.getMenuButtonBoundingClientRect) {
|
||||
try {
|
||||
const rect = uni.getMenuButtonBoundingClientRect();
|
||||
if (rect && rect.top && rect.height) {
|
||||
return rect.height + (rect.top - getStatusBarHeight()) * 2;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
return 44;
|
||||
};
|
||||
|
||||
export const getBavBarHeight = () => getStatusBarHeight() + getTitleBarHeight();
|
||||
|
||||
export const getLeftIconLeft = () => {
|
||||
// if(tt?.getMenuButtonBoundingClientRect) {
|
||||
// const { leftIcon: {left, width}} = tt.getMenuButtonBoundingClientRect
|
||||
// return left + parseInt(width) + 5
|
||||
// } else {
|
||||
// return 0
|
||||
// }
|
||||
// #ifdef MP-TOUTIAO
|
||||
const {
|
||||
leftIcon: { left, width },
|
||||
} = tt.getCustomButtonBoundingClientRect();
|
||||
return left + parseInt(width);
|
||||
// #endif
|
||||
// #ifndef MP-TOUTIAO
|
||||
return 0;
|
||||
// #endif
|
||||
};
|
||||
|
||||
export function getPlatform() {
|
||||
return getPlatformProvider().replace("mp-", "");
|
||||
}
|
||||
|
||||
export function getPlatformProvider() {
|
||||
const platform = process.env.UNI_PLATFORM;
|
||||
return platform || "mp-weixin";
|
||||
// const platform = uni.getSystemInfoSync().platform;
|
||||
// console.log(1111111, platform)
|
||||
// // H5 模拟器调试时使用 __wxConfig 环境变量判断
|
||||
// if (typeof __wxConfig !== 'undefined') return 'weixin';
|
||||
// if (platform === 'devtools') {
|
||||
// // 可以根据小程序环境变量判断
|
||||
// // 抖音开发工具会定义 tt 对象
|
||||
// return typeof tt !== 'undefined' ? 'toutiao' : 'weixin';
|
||||
// }
|
||||
|
||||
// return typeof tt !== 'undefined' ? 'toutiao' : 'weixin';
|
||||
}
|
||||
|
||||
export function getDeviceInfo() {
|
||||
const info = getSafeSystemInfo();
|
||||
|
||||
return {
|
||||
platform: info.platform,
|
||||
brand: info.brand,
|
||||
model: info.model,
|
||||
system: info.system,
|
||||
screenWidth: info.screenWidth,
|
||||
screenHeight: info.screenHeight,
|
||||
pixelRatio: info.pixelRatio,
|
||||
language: info.language,
|
||||
version: info.version,
|
||||
SDKVersion: info.SDKVersion,
|
||||
appId: "69665538a49b8ae3be50fe5d",
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 判断是否处于朋友圈单页模式
|
||||
*/
|
||||
export function isSinglePageMode() {
|
||||
// #ifdef MP-WEIXIN
|
||||
const launchOptions = uni.getLaunchOptionsSync();
|
||||
return launchOptions.scene === 1154;
|
||||
// #endif
|
||||
return false;
|
||||
}
|
||||
121
utils/track.js
Normal file
@@ -0,0 +1,121 @@
|
||||
import { request } from "@/utils/request";
|
||||
|
||||
// 生成并缓存 device_id
|
||||
function getOrCreateDeviceId() {
|
||||
let deviceId = uni.getStorageSync("device_id");
|
||||
if (!deviceId) {
|
||||
deviceId = Date.now() + "_" + Math.random().toString(36).substr(2, 9);
|
||||
uni.setStorageSync("device_id", deviceId);
|
||||
}
|
||||
return deviceId;
|
||||
}
|
||||
|
||||
// 获取网络类型
|
||||
function getNetworkType() {
|
||||
return new Promise((resolve) => {
|
||||
uni.getNetworkType({
|
||||
success: (res) => resolve(res.networkType || "unknown"),
|
||||
fail: () => resolve("unknown"),
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 获取系统平台
|
||||
function getSystemInfo() {
|
||||
return new Promise((resolve) => {
|
||||
uni.getSystemInfo({
|
||||
success: (res) => resolve(res),
|
||||
fail: () => resolve({}),
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 获取当前页面路径
|
||||
function getCurrentPagePath() {
|
||||
const pages = getCurrentPages();
|
||||
const currentPage = pages[pages.length - 1];
|
||||
return currentPage?.route || "";
|
||||
}
|
||||
|
||||
function getMiniProgramVersion() {
|
||||
const platform = process.env.UNI_PLATFORM;
|
||||
let version = "";
|
||||
let envVersion = "";
|
||||
|
||||
try {
|
||||
if (platform === "mp-weixin") {
|
||||
// 微信小程序
|
||||
const info = wx.getAccountInfoSync();
|
||||
version = info?.miniProgram?.version || "";
|
||||
envVersion = info?.miniProgram?.envVersion || "";
|
||||
} else if (platform === "mp-alipay") {
|
||||
// 支付宝小程序
|
||||
const info = my.getAppInfoSync();
|
||||
version = info?.version || "";
|
||||
} else if (platform === "mp-toutiao" || platform === "mp-jd") {
|
||||
// 抖音/头条/京东小程序
|
||||
const info = tt.getAccountInfoSync?.();
|
||||
version = info?.miniProgram?.version || "";
|
||||
envVersion = info?.miniProgram?.envVersion || "";
|
||||
} else if (platform === "mp-baidu") {
|
||||
// 百度小程序(无标准方法获取版本号)
|
||||
version = ""; // 百度不支持获取版本号
|
||||
} else {
|
||||
version = "";
|
||||
}
|
||||
} catch (e) {
|
||||
version = "";
|
||||
envVersion = "";
|
||||
}
|
||||
|
||||
return {
|
||||
platform, // 当前小程序平台
|
||||
version, // 小程序版本号
|
||||
envVersion, // develop / trial / release(微信等支持)
|
||||
};
|
||||
}
|
||||
|
||||
// 构造埋点对象
|
||||
async function buildEventData(
|
||||
eventName,
|
||||
eventType = "click",
|
||||
customParams = {}
|
||||
) {
|
||||
const deviceId = getOrCreateDeviceId();
|
||||
const systemInfo = await getSystemInfo();
|
||||
const networkType = await getNetworkType();
|
||||
// const location = await getLocation()
|
||||
const appVersion = typeof plus !== "undefined" ? plus?.runtime?.version : "";
|
||||
const { envVersion, platform, version } = getMiniProgramVersion();
|
||||
|
||||
return {
|
||||
userId: uni.getStorageSync("user_id") || null,
|
||||
deviceId: deviceId,
|
||||
eventName: eventName,
|
||||
eventType: eventType,
|
||||
eventTime: new Date(),
|
||||
page: getCurrentPagePath(),
|
||||
elementId: customParams.element_id || null,
|
||||
elementContent: customParams.element_content || null,
|
||||
customParams: customParams,
|
||||
networkType: networkType,
|
||||
os: systemInfo.platform || "unknown",
|
||||
appVersion: version || "unknown",
|
||||
envVersion: envVersion || "",
|
||||
platform: platform || "",
|
||||
};
|
||||
}
|
||||
|
||||
// 发送埋点数据到服务器
|
||||
async function sendTrack(eventName, eventType = "click", customParams = {}) {
|
||||
const eventData = await buildEventData(eventName, eventType, customParams);
|
||||
request({
|
||||
url: "/api/common/tracking/create",
|
||||
method: "POST",
|
||||
data: eventData,
|
||||
});
|
||||
}
|
||||
|
||||
export default {
|
||||
sendTrack,
|
||||
};
|
||||