first commit
This commit is contained in:
zzc
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
@@ -0,0 +1,2 @@
|
||||
/unpackage
|
||||
unpackage
|
||||
49
App.vue
Normal file
49
App.vue
Normal file
@@ -0,0 +1,49 @@
|
||||
<script>
|
||||
import { useUserStore } from './stores/user'
|
||||
|
||||
export default {
|
||||
onLaunch() {
|
||||
const userStore = useUserStore()
|
||||
userStore.loadFromStorage()
|
||||
}
|
||||
}
|
||||
|
||||
</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>
|
||||
10
api/auth.js
Normal file
10
api/auth.js
Normal file
@@ -0,0 +1,10 @@
|
||||
import { request } from "@/utils/request.js"
|
||||
|
||||
export const apiLogin = async (data) => {
|
||||
return request({
|
||||
url:"/api/user/login",
|
||||
method: 'POST',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
BIN
common/images/preview_small.webp
Normal file
BIN
common/images/preview_small.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.8 KiB |
10
common/style/base-style.scss
Normal file
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
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;
|
||||
}
|
||||
179
components/LoginPopup/LoginPopup.vue
Normal file
179
components/LoginPopup/LoginPopup.vue
Normal file
@@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<uni-popup ref="popupRef" type="bottom" :safe-area="false">
|
||||
<view class="popup-container">
|
||||
<view class="popup-header">
|
||||
<text class="popup-title">登录授权</text>
|
||||
</view>
|
||||
|
||||
<view class="avatar-nickname">
|
||||
<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="avatar-selector custom-button">
|
||||
<image v-if="avatarUrl" :src="avatarUrl" class="avatar-preview" />
|
||||
<text v-else>获取头像</text>
|
||||
</button>
|
||||
<input
|
||||
class="nickname-input"
|
||||
type="nickname"
|
||||
v-model="nickname"
|
||||
placeholder="请输入昵称"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<button class="confirm-btn custom-button" @tap="confirmLogin">确认登录</button>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { getPlatformProvider } from '@/utils/system'
|
||||
import { apiLogin } from '@/api/auth.js'
|
||||
import { wxLogin } from '@/utils/login.js'
|
||||
|
||||
// import { connectSocket, sendSocketMessage } from '@/utils/socket.js'
|
||||
|
||||
const popupRef = ref(null)
|
||||
const avatarUrl = ref('')
|
||||
const nickname = ref('')
|
||||
|
||||
const userStore = useUserStore()
|
||||
|
||||
const emit = defineEmits(['logind'])
|
||||
|
||||
const open = () => {
|
||||
popupRef.value.open()
|
||||
}
|
||||
|
||||
const close = () => {
|
||||
popupRef.value.close()
|
||||
}
|
||||
|
||||
const onChooseAvatar = (e) => {
|
||||
avatarUrl.value = e.detail.avatarUrl
|
||||
}
|
||||
|
||||
const confirmLogin = async () => {
|
||||
try {
|
||||
const platform = getPlatformProvider()
|
||||
if (platform === 'mp-weixin') {
|
||||
const code = await wxLogin()
|
||||
console.log('准备登录：', { code, nickname: nickname.value, avatarUrl: avatarUrl.value })
|
||||
// console.log('准备登录：', { code, nickname: nickname.value, avatarUrl: 'http://tmp/HXhtcEwQ5A3B58476c91ba545ab67c6bf9c67d9c2559.jpeg' })
|
||||
|
||||
const fileKeyRes = await uni.uploadFile({
|
||||
url: 'https://apis.lihailezzc.com/api/common/upload',
|
||||
filePath: avatarUrl.value,
|
||||
name: 'file', // 和后端接收文件字段名一致
|
||||
header: {
|
||||
'x-app-id': '6846f093fdf841f6189ef0b5',
|
||||
},
|
||||
})
|
||||
if(fileKeyRes.statusCode < 400) {
|
||||
const keyJson = JSON.parse(fileKeyRes.data)
|
||||
const url = `https://file.lihailezzc.com/${keyJson?.data.key}`
|
||||
const loginRes = await apiLogin({ code, nickname: nickname.value, avatarUrl: url })
|
||||
// 保存用户信息到store
|
||||
userStore.setUserInfo({
|
||||
nickName: loginRes?.user?.nickname || nickname.value,
|
||||
avatarUrl: loginRes?.user?.avatar || url,
|
||||
id: loginRes?.user?.id
|
||||
})
|
||||
|
||||
userStore.setToken(loginRes.token)
|
||||
|
||||
uni.showToast({ title: '登录成功', icon: 'success' })
|
||||
emit('logind')
|
||||
popupRef.value.close()
|
||||
|
||||
// connectSocket()
|
||||
|
||||
// 重置临时变量
|
||||
avatarUrl.value = ''
|
||||
nickname.value = ''
|
||||
} else {
|
||||
throw Error('获取失败')
|
||||
}
|
||||
|
||||
}
|
||||
} 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: 40rpx 30rpx 60rpx;
|
||||
border-top-left-radius: 30rpx;
|
||||
border-top-right-radius: 30rpx;
|
||||
|
||||
.popup-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.popup-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-nickname {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.avatar-selector {
|
||||
width: 145rpx;
|
||||
height: 145rpx;
|
||||
border-radius: 50%;
|
||||
font-size: 26rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 20rpx;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.avatar-preview {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.nickname-input {
|
||||
width: 80%;
|
||||
border: 1rpx solid #ccc;
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx;
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
background-color: #07c160;
|
||||
color: white;
|
||||
font-size: 30rpx;
|
||||
border-radius: 50rpx;
|
||||
padding: 20rpx 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
69
components/custom-content/custom-content.vue
Normal file
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
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
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>
|
||||
31
main.js
Normal file
31
main.js
Normal file
@@ -0,0 +1,31 @@
|
||||
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'
|
||||
|
||||
export function createApp() {
|
||||
const app = createSSRApp(App)
|
||||
const pinia = createPinia()
|
||||
app.use(pinia) // ✅ 这句是关键
|
||||
return {
|
||||
app
|
||||
}
|
||||
}
|
||||
// #endif
|
||||
72
manifest.json
Normal file
72
manifest.json
Normal file
@@ -0,0 +1,72 @@
|
||||
{
|
||||
"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" : "wx397b136a586c5667",
|
||||
"setting" : {
|
||||
"urlCheck" : false
|
||||
},
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-alipay" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-baidu" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-toutiao" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"uniStatistics" : {
|
||||
"enable" : false
|
||||
},
|
||||
"vueVersion" : "3"
|
||||
}
|
||||
67
pages.json
Normal file
67
pages.json
Normal file
@@ -0,0 +1,67 @@
|
||||
{
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "新春祝福",
|
||||
"enablePullDownRefresh": true,
|
||||
"navigationStyle": "custom",
|
||||
"backgroundColor": "#FFFFFF"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/make/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "讨论",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine/mine",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的",
|
||||
"enablePullDownRefresh": false,
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "uni-app",
|
||||
"navigationBarBackgroundColor": "#F8F8F8",
|
||||
"backgroundColor": "#F8F8F8"
|
||||
},
|
||||
"tabBar": {
|
||||
"color": "#999999",
|
||||
"selectedColor": "#7DBB9D",
|
||||
"backgroundColor": "#f6f1ec",
|
||||
"iconWidth": "8px",
|
||||
"list": [
|
||||
{
|
||||
"text": "祝福",
|
||||
"pagePath": "pages/index/index",
|
||||
"iconPath": "static/images/tabBar/home.png",
|
||||
"selectedIconPath": "static/images/tabBar/home_s.png"
|
||||
},
|
||||
{
|
||||
"text": "讨论",
|
||||
"pagePath": "pages/make/index",
|
||||
"iconPath": "static/images/tabBar/message.png",
|
||||
"selectedIconPath": "static/images/tabBar/message_s.png"
|
||||
},
|
||||
{
|
||||
"text": "个人中心",
|
||||
"pagePath": "pages/mine/mine",
|
||||
"iconPath": "static/images/tabBar/me.png",
|
||||
"selectedIconPath": "static/images/tabBar/me_s.png"
|
||||
}
|
||||
]
|
||||
},
|
||||
"uniIdRouter": {},
|
||||
"permission": {
|
||||
"scope.userLocation": {
|
||||
"desc": "用于获取您的当前位置，以显示附近景点和打卡功能"
|
||||
}
|
||||
}
|
||||
}
|
||||
263
pages/index/index.vue
Normal file
263
pages/index/index.vue
Normal file
@@ -0,0 +1,263 @@
|
||||
<template>
|
||||
<view class="spring-page" :style="{ paddingTop: getBavBarHeight() + 'px' }">
|
||||
<!-- 顶部 Banner -->
|
||||
<view class="hero">
|
||||
<view class="hero-badge">
|
||||
<text class="badge-dot">•</text>
|
||||
<text class="badge-text">距春节还有 25 天</text>
|
||||
</view>
|
||||
<view class="hero-title">
|
||||
<text class="year">2026</text>
|
||||
<text class="main">新春祝福</text>
|
||||
</view>
|
||||
<text class="hero-sub">新年快乐，万事如意!</text>
|
||||
<image class="hero-decor" src="https://file.lihailezzc.com/resource/58c8d19e5f2d9c958a7b8b9f44b8c3e3.png" mode="aspectFill" />
|
||||
</view>
|
||||
|
||||
<!-- 功能入口宫格 -->
|
||||
<view class="feature-grid">
|
||||
<view
|
||||
v-for="(item, idx) in features"
|
||||
:key="idx"
|
||||
class="feature-item"
|
||||
@tap="onFeatureTap(item)"
|
||||
>
|
||||
<image class="feature-icon" :src="item.icon" mode="aspectFill" :style="{
|
||||
backgroundColor: idx < 2 ? '#FEF2F2' : '#FFFBEC'
|
||||
}"/>
|
||||
<view class="feature-texts">
|
||||
<text class="feature-title">{{ item.title }}</text>
|
||||
<text class="feature-sub">{{ item.subtitle }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 大家都在用（竖向列表：左图右文） -->
|
||||
<view class="section">
|
||||
<view class="section-header">
|
||||
<view class="section-bar"></view>
|
||||
<text class="section-title">大家都在用</text>
|
||||
<text class="section-more" @tap="onMore('use')">查看更多 ></text>
|
||||
</view>
|
||||
<view class="use-list">
|
||||
<view
|
||||
v-for="(card, i) in popularCards"
|
||||
:key="i"
|
||||
class="use-row"
|
||||
@tap="previewCard(card)"
|
||||
>
|
||||
<view class="thumb-wrap">
|
||||
<image :src="card.cover" class="thumb" mode="aspectFill" />
|
||||
<view v-if="card.type === 'video'" class="thumb-play">▶</view>
|
||||
</view>
|
||||
<view class="use-right">
|
||||
<view class="title-line">
|
||||
<text class="use-title">{{ card.title }}</text>
|
||||
<text v-if="card.tag" class="tag" :class="`tag--${card.tagType || 'default'}`">{{ card.tag }}</text>
|
||||
</view>
|
||||
<text class="use-desc">{{ card.desc }}</text>
|
||||
<text class="use-cta" @tap.stop="onCta(card)">{{ card.cta }} ></text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { onPullDownRefresh } from '@dcloudio/uni-app'
|
||||
import { getBavBarHeight } from '@/utils/system'
|
||||
|
||||
const features = ref([
|
||||
{ title: '新春祝福卡片', subtitle: '定制专属贺卡', icon:'/static/icon/celebrate.png', type: 'card' },
|
||||
{ title: '红包封面', subtitle: '获取新年红包封面', icon: '/static/icon/hongbao.png', type: 'video' },
|
||||
{ title: '新春头像挂饰', subtitle: '焕上节日新饰', icon: '/static/icon/guashi.png', type: 'avatar_decor' },
|
||||
{ title: '新年运势', subtitle: '抽取新年关键词', icon: '/static/icon/yunshi.png', type: 'avatar_frame' },
|
||||
])
|
||||
|
||||
const popularCards = ref([
|
||||
{
|
||||
title: '招财进宝金框',
|
||||
tag: '热门',
|
||||
tagType: 'hot',
|
||||
desc: '2026马年限定汉字金框，金光闪烁，财运亨通。适合送亲友的新春祝福。',
|
||||
cta: '立即制作',
|
||||
cover: 'https://file.lihailezzc.com/9a929a32-439f-453b-b603-fda7b04cbe08.png'
|
||||
},
|
||||
{
|
||||
title: '大吉大利卡片',
|
||||
tag: '精选',
|
||||
tagType: 'featured',
|
||||
desc: '经典红色大拜年卡片，适合送长辈、老师、同学，传递满满的新春喜气。',
|
||||
cta: '去写祝福',
|
||||
cover: 'https://file.lihailezzc.com/b5fe8ffb-5901-48d2-94fb-48191e36cbf5.png'
|
||||
},
|
||||
{
|
||||
title: '合家团圆模板',
|
||||
tag: '爆款',
|
||||
tagType: 'hot2',
|
||||
desc: '一键生成合家福贺图，支持换装、特效装饰、朋友圈海报等。',
|
||||
cta: '开始创作',
|
||||
cover: 'https://file.lihailezzc.com/91cd1611-bb87-442b-a338-24e9d79e4ee9.png',
|
||||
type: 'video'
|
||||
}
|
||||
])
|
||||
|
||||
const onFeatureTap = (item) => {
|
||||
uni.showToast({ title: `进入：${item.title}`, icon: 'none' })
|
||||
// uni.navigateTo({ url: `/pages/${item.type}/index` })
|
||||
}
|
||||
|
||||
const previewCard = (card) => {
|
||||
uni.previewImage({ urls: [card.cover] })
|
||||
}
|
||||
|
||||
const onMore = () => {
|
||||
uni.showToast({ title: '更多模板即将上线～', icon: 'none' })
|
||||
}
|
||||
|
||||
const onCta = (card) => {
|
||||
uni.showToast({ title: `${card.cta} · ${card.title}`, icon: 'none' })
|
||||
}
|
||||
|
||||
onPullDownRefresh(() => {
|
||||
setTimeout(() => {
|
||||
uni.stopPullDownRefresh()
|
||||
uni.showToast({ title: '已为你更新内容', icon: 'success' })
|
||||
}, 600)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.spring-page {
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
background: #F8F6F6;
|
||||
}
|
||||
|
||||
/* 顶部 Banner */
|
||||
.hero {
|
||||
position: relative;
|
||||
margin: 24rpx auto;
|
||||
padding: 32rpx;
|
||||
height: 324rpx;
|
||||
width: 92vw;
|
||||
border-radius: 24rpx;
|
||||
color: #fff;
|
||||
background: url("http://file.lihailezzc.com/77ea2597-569c-4f13-b5af-22606742adcfssss.jpg");
|
||||
background-size: cover;
|
||||
overflow: hidden;
|
||||
|
||||
.hero-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: rgba(255,255,255,0.2);
|
||||
border-radius: 999rpx;
|
||||
padding: 8rpx 16rpx;
|
||||
font-size: 22rpx;
|
||||
.badge-dot { margin-right: 8rpx; }
|
||||
}
|
||||
.hero-title {
|
||||
margin-top: 24rpx;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
.year { font-size: 44rpx; font-weight: 700; margin-right: 12rpx; }
|
||||
.main { font-size: 44rpx; font-weight: 700; }
|
||||
}
|
||||
.hero-sub { margin-top: 8rpx; font-size: 24rpx; opacity: 0.9; }
|
||||
.hero-decor {
|
||||
position: absolute; right: 12rpx; bottom: 12rpx;
|
||||
width: 160rpx; height: 160rpx; opacity: 0.3; border-radius: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 功能入口宫格 - 2x2 */
|
||||
.feature-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-gap: 20rpx;
|
||||
padding: 0 24rpx;
|
||||
margin-top: 8rpx;
|
||||
|
||||
.feature-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: left;
|
||||
flex-direction: column;
|
||||
padding: 20rpx; border-radius: 18rpx;
|
||||
background: #fff;
|
||||
box-shadow: 0 6rpx 16rpx rgba(0,0,0,0.04);
|
||||
}
|
||||
.feature-item::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-bottom-left-radius: 80rpx;
|
||||
z-index: 1;
|
||||
}
|
||||
.feature-item:nth-child(1)::after,
|
||||
.feature-item:nth-child(2)::after {
|
||||
background: #FEF2F2; /* 可换成你的主题粉 */
|
||||
}
|
||||
.feature-item:nth-child(3)::after,
|
||||
.feature-item:nth-child(4)::after {
|
||||
background: #FFFBEC; /* 温柔一点的黄 */
|
||||
}
|
||||
.feature-icon {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 50%;
|
||||
padding: 5rpx;
|
||||
}
|
||||
.feature-texts {
|
||||
margin-top: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.feature-title { font-size: 28rpx; color: #222; font-weight: 600; }
|
||||
.feature-sub { font-size: 22rpx; color: #888; margin-top: 4rpx; }
|
||||
}
|
||||
}
|
||||
|
||||
/* 通用区块标题 */
|
||||
.section { margin-top: 28rpx; }
|
||||
.section-header {
|
||||
display: flex; align-items: center; padding: 0 24rpx;
|
||||
.section-bar { width: 10rpx; height: 30rpx; border-radius: 6rpx; background: #ff3b30; margin-right: 12rpx; }
|
||||
.section-title { font-size: 28rpx; color: #222; flex: 1; font-weight: 600; }
|
||||
.section-more { font-size: 24rpx; color: #ff3b30; }
|
||||
}
|
||||
|
||||
/* 大家都在用 - 竖向列表 */
|
||||
.use-list { padding: 0 24rpx; margin-top: 16rpx; }
|
||||
.use-row {
|
||||
display: flex; align-items: center; background: #fff;
|
||||
border-radius: 18rpx; box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.06);
|
||||
padding: 16rpx; margin-bottom: 18rpx;
|
||||
}
|
||||
.thumb-wrap {
|
||||
position: relative; width: 120rpx; height: 120rpx;
|
||||
border-radius: 16rpx; overflow: hidden; margin-right: 16rpx;
|
||||
}
|
||||
.thumb { width: 100%; height: 100%; }
|
||||
.thumb-play {
|
||||
position: absolute; right: 8rpx; bottom: 8rpx;
|
||||
width: 40rpx; height: 40rpx; border-radius: 50%;
|
||||
background: rgba(0,0,0,0.55); color: #fff; font-size: 22rpx;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
.use-right { flex: 1; display: flex; flex-direction: column; }
|
||||
.title-line { display: flex; align-items: center; }
|
||||
.use-title { font-size: 28rpx; color: #222; font-weight: 600; margin-right: 12rpx; }
|
||||
.tag {
|
||||
font-size: 22rpx; border-radius: 999rpx; padding: 4rpx 10rpx; margin-left: 4rpx;
|
||||
&.tag--hot { color: #ff6a00; background: #fff4eb; }
|
||||
&.tag--featured { color: #ff4d6d; background: #fff0f3; }
|
||||
&.tag--hot2 { color: #7c4dff; background: #f3efff; }
|
||||
}
|
||||
.use-desc { margin-top: 6rpx; font-size: 24rpx; color: #777; line-height: 1.5; }
|
||||
.use-cta { margin-top: 10rpx; font-size: 24rpx; color: #ff3b30; }
|
||||
</style>
|
||||
599
pages/make/index.vue
Normal file
599
pages/make/index.vue
Normal file
@@ -0,0 +1,599 @@
|
||||
<template>
|
||||
<view class="make-page" :style="{ paddingTop: getBavBarHeight() + 'px' }">
|
||||
<!-- 预览卡片 -->
|
||||
<view class="card-preview">
|
||||
<image class="card-bg" :src="currentTemplate.cover" mode="aspectFill" />
|
||||
<view class="card-overlay">
|
||||
<view class="title">
|
||||
<text class="main">新春快乐</text>
|
||||
<text class="sub">2026 YEAR OF THE HORSE</text>
|
||||
</view>
|
||||
<view class="bubble" @tap="editBlessing">
|
||||
<text class="bubble-text">{{ blessingText }}</text>
|
||||
</view>
|
||||
<view class="user">
|
||||
<image class="avatar" src="https://file.lihailezzc.com/resource/1463f294244c11cf274a5eaae115872a.jpeg" mode="aspectFill" />
|
||||
<view class="user-info">
|
||||
<text class="user-name">陈小明</text>
|
||||
<text class="user-desc">送上祝福</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="tip-line">
|
||||
<text>点击卡片内容即可编辑</text>
|
||||
</view>
|
||||
|
||||
<!-- 编辑工具区 -->
|
||||
<view class="editor-panel">
|
||||
<view class="drag-handle"></view>
|
||||
|
||||
<!-- 功能入口 -->
|
||||
<view class="tools">
|
||||
<view
|
||||
v-for="(tool, idx) in tools"
|
||||
:key="idx"
|
||||
class="tool-item"
|
||||
:class="{ active: activeTool === tool.type }"
|
||||
@tap="activeTool = tool.type"
|
||||
>
|
||||
<view class="tool-icon">{{ tool.icon }}</view>
|
||||
<text class="tool-text">{{ tool.text }}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 模板区 -->
|
||||
<view v-if="activeTool === 'template'" class="section">
|
||||
<view class="section-title">
|
||||
<text>热门模板</text>
|
||||
<text class="more" @tap="showMore">查看更多 ></text>
|
||||
</view>
|
||||
<scroll-view scroll-x class="tpl-scroll" show-scrollbar="false">
|
||||
<view class="tpl-wrap">
|
||||
<view
|
||||
v-for="(tpl, i) in templates"
|
||||
:key="i"
|
||||
class="tpl-card"
|
||||
:class="{ selected: tpl.id === currentTemplate.id }"
|
||||
@tap="applyTemplate(tpl)"
|
||||
>
|
||||
<image :src="tpl.cover" class="tpl-cover" mode="aspectFill" />
|
||||
<view class="tpl-name">{{ tpl.name }}</view>
|
||||
<view v-if="tpl.id === currentTemplate.id" class="tpl-check">✔</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- 文字编辑 -->
|
||||
<view v-if="activeTool === 'text'" class="section">
|
||||
<view class="section-title"><text>编辑祝福语</text></view>
|
||||
<textarea
|
||||
class="text-area"
|
||||
v-model="blessingText"
|
||||
placeholder="请输入你的新春祝福语～"
|
||||
:maxlength="100"
|
||||
auto-height
|
||||
show-confirm-bar="false"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 图片/背景 -->
|
||||
<view v-if="activeTool === 'image'" class="section">
|
||||
<view class="section-title"><text>替换背景</text></view>
|
||||
<view class="row">
|
||||
<button class="btn" @tap="pickImage">从相册选择</button>
|
||||
<button class="btn" @tap="resetBackground">重置为模板背景</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 头像挂饰 -->
|
||||
<view v-if="activeTool === 'avatar'" class="section">
|
||||
<view class="section-title"><text>头像挂饰</text></view>
|
||||
<view class="row">
|
||||
<button class="btn" @tap="toggleAvatarDecor">切换挂饰</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部操作 -->
|
||||
<view class="bottom-actions">
|
||||
<button class="btn secondary" @tap="preview">预览</button>
|
||||
<button class="btn primary" @tap="shareOrSave">分享 / 保存</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<canvas
|
||||
canvas-id="cardCanvas"
|
||||
class="hidden-canvas"
|
||||
style="width: 540px; height: 960px;"
|
||||
/>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { getBavBarHeight } from '@/utils/system'
|
||||
|
||||
const blessingText = ref('祝您在新的一年里：\n身体健康，万事如意！\n马到成功，财源广进！\n一马当先，前程似锦！\n龙马精神，阖家安康！\n骏马奔腾，福运常在！\n策马扬鞭，步步高升!')
|
||||
|
||||
const tools = [
|
||||
{ type: 'template', text: '模板', icon: '▦' },
|
||||
{ type: 'text', text: '文字', icon: '文' },
|
||||
{ type: 'image', text: '图片/背景', icon: '图' },
|
||||
{ type: 'avatar', text: '头像挂饰', icon: '饰' }
|
||||
]
|
||||
const activeTool = ref('template')
|
||||
|
||||
const templates = ref([
|
||||
{ id: 1, name: '金典红金', cover: 'https://file.lihailezzc.com/20260109082842_666_1.jpg' },
|
||||
{ id: 2, name: '富贵花开', cover: 'https://file.lihailezzc.com/20260108222141_644_1.jpg' },
|
||||
{ id: 3, name: '大气字法', cover: 'https://file.lihailezzc.com/20260108222141_644_1.jpg' },
|
||||
{ id: 4, name: '萌趣马年', cover: 'https://file.lihailezzc.com/20260109082842_666_1.jpg' }
|
||||
])
|
||||
|
||||
const currentTemplate = ref(templates.value[0])
|
||||
|
||||
const applyTemplate = (tpl) => {
|
||||
currentTemplate.value = tpl
|
||||
}
|
||||
|
||||
const editBlessing = () => {
|
||||
uni.showModal({
|
||||
title: '编辑祝福语',
|
||||
editable: true,
|
||||
content: blessingText.value,
|
||||
success: ({ confirm, content }) => {
|
||||
if (confirm && content !== undefined) blessingText.value = content
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const pickImage = () => {
|
||||
uni.chooseImage({
|
||||
count: 1,
|
||||
success: (res) => {
|
||||
const path = res.tempFilePaths?.[0]
|
||||
if (path) currentTemplate.value = { ...currentTemplate.value, cover: path }
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
const resetBackground = () => {
|
||||
currentTemplate.value = templates.value[0]
|
||||
}
|
||||
|
||||
const toggleAvatarDecor = () => {
|
||||
uni.showToast({ title: '挂饰功能即将上线～', icon: 'none' })
|
||||
}
|
||||
|
||||
const preview = () => {
|
||||
uni.showToast({ title: '预览生成中…', icon: 'none' })
|
||||
}
|
||||
|
||||
const shareOrSave = () => {
|
||||
saveByCanvas()
|
||||
uni.showToast({ title: '已保存到相册并可分享', icon: 'none' })
|
||||
}
|
||||
|
||||
const showMore = () => {
|
||||
uni.showToast({ title: '更多模板即将上线～', icon: 'none' })
|
||||
}
|
||||
|
||||
const saveByCanvas = async () => {
|
||||
const ctx = uni.createCanvasContext('cardCanvas')
|
||||
|
||||
// 画布尺寸（rpx 转 px）
|
||||
const W = 540
|
||||
const H = 960
|
||||
|
||||
// 1️⃣ 画背景
|
||||
// ⭐ 先加载背景图
|
||||
const bgPath = await loadImage(currentTemplate.value.cover)
|
||||
const avatarPath = await loadImage('https://file.lihailezzc.com/resource/1463f294244c11cf274a5eaae115872a.jpeg')
|
||||
console.log(111111, bgPath)
|
||||
|
||||
ctx.drawImage(
|
||||
bgPath,
|
||||
0,
|
||||
0,
|
||||
W,
|
||||
H
|
||||
)
|
||||
|
||||
// 2️⃣ 半透明遮罩（和你 UI 一致）
|
||||
ctx.setFillStyle('rgba(0,0,0,0.08)')
|
||||
ctx.fillRect(0, 0, W, H)
|
||||
|
||||
// 3️⃣ 标题
|
||||
ctx.setFillStyle('#ffffff')
|
||||
ctx.setFontSize(42)
|
||||
ctx.setTextAlign('center')
|
||||
ctx.fillText('新春快乐', W / 2, 120)
|
||||
|
||||
ctx.setFontSize(22)
|
||||
ctx.setGlobalAlpha(0.9)
|
||||
ctx.fillText('2026 YEAR OF THE HORSE', W / 2, 165)
|
||||
ctx.setGlobalAlpha(1)
|
||||
|
||||
// 4️⃣ 祝福语气泡
|
||||
drawBubbleText(ctx, {
|
||||
text: blessingText.value,
|
||||
x: 70,
|
||||
y: 260,
|
||||
maxWidth: 400,
|
||||
fontSize: 32,
|
||||
lineHeight: 46,
|
||||
backgroundColor: 'rgba(255,255,255,0.85)'
|
||||
})
|
||||
|
||||
// 5️⃣ 用户信息
|
||||
ctx.save()
|
||||
ctx.beginPath()
|
||||
ctx.arc(80, H - 80, 32, 0, Math.PI * 2)
|
||||
ctx.clip()
|
||||
ctx.drawImage(
|
||||
avatarPath,
|
||||
48,
|
||||
H - 112,
|
||||
64,
|
||||
64
|
||||
)
|
||||
ctx.restore()
|
||||
|
||||
ctx.setFillStyle('#ffffff')
|
||||
ctx.setFontSize(24)
|
||||
ctx.fillText('zzc', 150, H - 85)
|
||||
|
||||
ctx.setFontSize(20)
|
||||
ctx.setGlobalAlpha(0.6)
|
||||
ctx.fillText('送上祝福', 150, H - 55)
|
||||
ctx.setGlobalAlpha(1)
|
||||
|
||||
// 6️⃣ 输出
|
||||
ctx.draw(false, () => {
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: 'cardCanvas',
|
||||
success: res => {
|
||||
saveImage(res.tempFilePath)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const loadImage = (url) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.getImageInfo({
|
||||
src: url,
|
||||
success: res => {
|
||||
resolve(res.path) // 本地路径
|
||||
},
|
||||
fail: err => {
|
||||
reject(err)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const getImageInfo = (url) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.getImageInfo({
|
||||
src: url,
|
||||
success: resolve,
|
||||
fail: reject
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
const drawImageCover = (ctx, imgPath, canvasW, canvasH, imgW, imgH) => {
|
||||
const scale = Math.max(canvasW / imgW, canvasH / imgH)
|
||||
|
||||
const drawW = imgW * scale
|
||||
const drawH = imgH * scale
|
||||
|
||||
const dx = (canvasW - drawW) / 2
|
||||
const dy = (canvasH - drawH) / 2
|
||||
|
||||
ctx.drawImage(imgPath, dx, dy, drawW, drawH)
|
||||
}
|
||||
|
||||
const saveImage = (path) => {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: path,
|
||||
success() {
|
||||
uni.showToast({ title: '已保存到相册' })
|
||||
},
|
||||
fail() {
|
||||
uni.showModal({
|
||||
title: '提示',
|
||||
content: '请授权保存到相册'
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
function drawBubbleText(ctx, options) {
|
||||
const {
|
||||
text,
|
||||
x,
|
||||
y,
|
||||
maxWidth = 400,
|
||||
padding = 84,
|
||||
lineHeight = 42,
|
||||
radius = 24,
|
||||
backgroundColor = 'rgba(255,255,255,0.9)',
|
||||
textColor = '#fff',
|
||||
fontSize = 32,
|
||||
fontFamily = 'PingFang SC'
|
||||
} = options
|
||||
|
||||
if (!text) return
|
||||
|
||||
ctx.setFontSize(fontSize)
|
||||
ctx.setFillStyle(textColor)
|
||||
ctx.font = `${fontSize}px ${fontFamily}`
|
||||
|
||||
// 1️⃣ 文本自动换行
|
||||
const lines = []
|
||||
let currentLine = ''
|
||||
|
||||
for (let i = 0; i < text.length; i++) {
|
||||
const testLine = currentLine + text[i]
|
||||
const metrics = ctx.measureText(testLine)
|
||||
if (metrics.width > maxWidth - padding * 2) {
|
||||
lines.push(currentLine)
|
||||
currentLine = text[i]
|
||||
} else {
|
||||
currentLine = testLine
|
||||
}
|
||||
}
|
||||
lines.push(currentLine)
|
||||
|
||||
// 2️⃣ 计算气泡尺寸
|
||||
const bubbleWidth =
|
||||
Math.min(
|
||||
maxWidth,
|
||||
Math.max(
|
||||
...lines.map(line => ctx.measureText(line).width)
|
||||
) + padding * 2
|
||||
)
|
||||
|
||||
const bubbleHeight = lines.length * lineHeight + padding * 2
|
||||
|
||||
// 3️⃣ 绘制气泡（圆角矩形）
|
||||
drawRoundRect(
|
||||
ctx,
|
||||
x,
|
||||
y,
|
||||
bubbleWidth,
|
||||
bubbleHeight,
|
||||
radius,
|
||||
backgroundColor
|
||||
)
|
||||
|
||||
// 4️⃣ 绘制文字
|
||||
ctx.setFillStyle(textColor)
|
||||
lines.forEach((line, index) => {
|
||||
ctx.fillText(
|
||||
line,
|
||||
x + padding,
|
||||
y + padding + (index + 1) * lineHeight - 10
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
function drawRoundRect(ctx, x, y, w, h, r, color) {
|
||||
ctx.beginPath()
|
||||
// ctx.setFillStyle(color)
|
||||
ctx.fillStyle = 'rgba(255,255,255,0.18)'
|
||||
ctx.fill()
|
||||
|
||||
// 描边（非常关键）
|
||||
ctx.strokeStyle = 'rgba(255,255,255,0.35)'
|
||||
ctx.lineWidth = 1
|
||||
ctx.stroke()
|
||||
|
||||
ctx.moveTo(x + r, y)
|
||||
ctx.lineTo(x + w - r, y)
|
||||
ctx.arcTo(x + w, y, x + w, y + r, r)
|
||||
ctx.lineTo(x + w, y + h - r)
|
||||
ctx.arcTo(x + w, y + h, x + w - r, y + h, r)
|
||||
ctx.lineTo(x + r, y + h)
|
||||
ctx.arcTo(x, y + h, x, y + h - r, r)
|
||||
ctx.lineTo(x, y + r)
|
||||
ctx.arcTo(x, y, x + r, y, r)
|
||||
ctx.closePath()
|
||||
ctx.fill()
|
||||
}
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.make-page {
|
||||
min-height: 100vh;
|
||||
background: #fff;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 卡片预览 */
|
||||
.card-preview {
|
||||
margin: 24rpx auto;
|
||||
height: 960rpx;
|
||||
width: 540rpx;
|
||||
border-radius: 30rpx;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
box-shadow: 0 16rpx 40rpx rgba(0,0,0,0.12);
|
||||
}
|
||||
.card-bg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.card-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
padding: 30rpx;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.card-overlay .title {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-top: 60rpx;
|
||||
}
|
||||
.title .main {
|
||||
font-size: 42rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
.title .sub {
|
||||
margin-top: 8rpx;
|
||||
font-size: 22rpx;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.bubble {
|
||||
margin-top: 80rpx;
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.35);
|
||||
border-radius: 26rpx;
|
||||
padding: 40rpx;
|
||||
max-width: 560rpx;
|
||||
backdrop-filter: blur(10rpx);
|
||||
}
|
||||
.bubble-text {
|
||||
font-size: 26rpx;
|
||||
line-height: 1.6;
|
||||
}
|
||||
.user {
|
||||
position: absolute;
|
||||
bottom: 40rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(255, 255, 255, 0.18);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.35);
|
||||
border-radius: 9999rpx;
|
||||
padding: 15rpx;
|
||||
padding-left: 20rpx;
|
||||
padding-right: 20rpx;
|
||||
}
|
||||
.avatar {
|
||||
width: 64rpx;
|
||||
height: 64rpx;
|
||||
border-radius: 50%;
|
||||
margin-right: 14rpx;
|
||||
border: 2rpx solid rgba(255,255,255,0.6);
|
||||
}
|
||||
.user .user-info{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.user-name { font-size: 24rpx; font-weight: 600; }
|
||||
.user-desc { font-size: 20rpx; opacity: 0.6; }
|
||||
|
||||
/* 顶部提示 */
|
||||
.tip-line {
|
||||
text-align: center;
|
||||
color: #999;
|
||||
font-size: 22rpx;
|
||||
}
|
||||
|
||||
/* 编辑工具区 */
|
||||
.editor-panel {
|
||||
margin: 20rpx 24rpx 40rpx;
|
||||
border-radius: 30rpx 30rpx 0 0;
|
||||
background: #fff;
|
||||
box-shadow: 0 -10rpx 30rpx rgba(0,0,0,0.06);
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
.drag-handle {
|
||||
width: 120rpx; height: 8rpx; border-radius: 999rpx;
|
||||
background: #eee; margin: 12rpx auto;
|
||||
}
|
||||
|
||||
/* 工具入口 */
|
||||
.tools {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
padding: 16rpx 24rpx 8rpx;
|
||||
}
|
||||
.tool-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 14rpx 0;
|
||||
border-radius: 18rpx;
|
||||
color: #666;
|
||||
}
|
||||
.tool-item.active {
|
||||
background: #fff6f5;
|
||||
color: #ff3b30;
|
||||
}
|
||||
.tool-icon {
|
||||
width: 64rpx; height: 64rpx;
|
||||
border-radius: 16rpx;
|
||||
background: #fafafa;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
margin-bottom: 8rpx;
|
||||
}
|
||||
.tool-text { font-size: 22rpx; }
|
||||
|
||||
/* 模板区 */
|
||||
.section { padding: 12rpx 24rpx 0; }
|
||||
.section-title {
|
||||
display: flex; align-items: center;
|
||||
}
|
||||
.section-title .more {
|
||||
margin-left: auto;
|
||||
color: #ff3b30;
|
||||
font-size: 24rpx;
|
||||
}
|
||||
.tpl-scroll { margin-top: 12rpx; }
|
||||
.tpl-wrap { display: flex; }
|
||||
.tpl-card {
|
||||
width: 180rpx; height: 240rpx;
|
||||
border-radius: 18rpx; overflow: hidden;
|
||||
background: #fff; margin-right: 16rpx;
|
||||
position: relative;
|
||||
box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.06);
|
||||
}
|
||||
.tpl-card.selected { outline: 4rpx solid #ff3b30; }
|
||||
.tpl-cover { width: 100%; height: 160rpx; }
|
||||
.tpl-name {
|
||||
font-size: 22rpx; color: #333;
|
||||
padding: 8rpx 12rpx;
|
||||
}
|
||||
.tpl-check {
|
||||
position: absolute; right: 10rpx; top: 10rpx;
|
||||
width: 36rpx; height: 36rpx; border-radius: 50%;
|
||||
background: #ff3b30; color: #fff; font-size: 22rpx;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
}
|
||||
|
||||
/* 按钮区 */
|
||||
.bottom-actions {
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
padding: 20rpx 24rpx 30rpx;
|
||||
}
|
||||
.btn {
|
||||
height: 88rpx; border-radius: 999rpx; padding: 0 40rpx;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
.btn.secondary {
|
||||
background: #f5f5f5; color: #333;
|
||||
}
|
||||
.btn.primary {
|
||||
background: #ff3b30; color: #fff;
|
||||
box-shadow: 0 12rpx 24rpx rgba(255,59,48,0.35);
|
||||
}
|
||||
.hidden-canvas {
|
||||
position: fixed;
|
||||
left: -9999px;
|
||||
top: -9999px;
|
||||
}
|
||||
</style>
|
||||
20
pages/message/message.vue
Normal file
20
pages/message/message.vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<view class="message-content">
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.message-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
background: linear-gradient(to bottom, #D6EDD8 0%, #F4E2D8 100%);
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
303
pages/mine/mine.vue
Normal file
303
pages/mine/mine.vue
Normal file
@@ -0,0 +1,303 @@
|
||||
<template>
|
||||
<view class="mine-content">
|
||||
<!-- 顶部区域 -->
|
||||
<view class="mine-top-panel" :style="{ paddingTop: getBavBarHeight() + 'px' }">
|
||||
<view class="user-info">
|
||||
<!-- 根据登录状态显示不同内容 -->
|
||||
<view v-if="isLoggedIn" class="user-logged-in">
|
||||
<image :src="userInfo.avatarUrl" class="avatar" mode="aspectFill" />
|
||||
<view class="user-logged-in-info">
|
||||
<text class="nickname">{{ userInfo.nickName }}</text>
|
||||
<text class="phone">19969024553</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-else class="user-not-logged-in">
|
||||
<image :src="defaultAvatarUrl" class="avatar" mode="aspectFill" />
|
||||
<button class="login-button" @tap="openPopup">点击登录</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="mine-middle-panel">
|
||||
<view class="mine-info-panel">
|
||||
<view>0.00</view>
|
||||
<view>我的余额</view>
|
||||
</view>
|
||||
|
||||
<view class="mine-info-panel">
|
||||
<view>0</view>
|
||||
<view>优惠卷</view>
|
||||
</view>
|
||||
|
||||
<view class="mine-info-panel">
|
||||
<view>0</view>
|
||||
<view>积分</view>
|
||||
</view>
|
||||
|
||||
<view class="mine-info-panel">
|
||||
<view>0</view>
|
||||
<view>我的收藏</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 登录弹窗 -->
|
||||
<uni-popup ref="popupRef" type="bottom" :safe-area="false">
|
||||
<view class="popup-container">
|
||||
<view class="popup-header">
|
||||
<text class="popup-title">登录授权</text>
|
||||
</view>
|
||||
|
||||
<view class="avatar-nickname">
|
||||
<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="avatar-selector">
|
||||
<image v-if="avatarUrl" :src="avatarUrl" class="avatar-preview" />
|
||||
<text v-else>获取头像</text>
|
||||
</button>
|
||||
<input
|
||||
class="nickname-input"
|
||||
type="nickname"
|
||||
v-model="nickname"
|
||||
placeholder="请输入昵称"
|
||||
/>
|
||||
</view>
|
||||
|
||||
<button class="confirm-btn" @tap="confirmLogin">确认登录</button>
|
||||
</view>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue'
|
||||
import { wxLogin } from '@/utils/login.js'
|
||||
import { getPlatformProvider, getBavBarHeight } from '@/utils/system'
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { apiLogin } from '@/api/auth.js'
|
||||
|
||||
const userStore = useUserStore()
|
||||
const popupRef = ref(null)
|
||||
|
||||
// 用户输入的临时信息
|
||||
const avatarUrl = ref('')
|
||||
const nickname = ref('')
|
||||
|
||||
// 从store获取用户信息（改为计算属性）
|
||||
const userInfo = computed(() => ({
|
||||
nickName: userStore.userInfo.nickName || '未登录',
|
||||
avatarUrl: userStore.userInfo.avatarUrl || defaultAvatarUrl
|
||||
}))
|
||||
|
||||
// 判断用户是否已登录
|
||||
const isLoggedIn = computed(() => !!userStore.userInfo.nickName)
|
||||
|
||||
// 默认头像
|
||||
const defaultAvatarUrl = 'https://file.lihailezzc.com/resource/d9b329082b32f8305101f708593a4882.png'
|
||||
|
||||
// 获取状态栏高度
|
||||
const bavBarHeight = ref(0)
|
||||
|
||||
onMounted(() => {
|
||||
// 确保高度值在组件挂载后获取
|
||||
bavBarHeight.value = getBavBarHeight()
|
||||
})
|
||||
|
||||
const openPopup = () => {
|
||||
popupRef.value.open()
|
||||
}
|
||||
|
||||
const onChooseAvatar = (e) => {
|
||||
avatarUrl.value = e.detail.avatarUrl
|
||||
}
|
||||
|
||||
const confirmLogin = async () => {
|
||||
if (!nickname.value || !avatarUrl.value) {
|
||||
return uni.showToast({ title: '请填写完整信息', icon: 'none' })
|
||||
}
|
||||
|
||||
try {
|
||||
const platform = getPlatformProvider()
|
||||
if (platform === 'mp-weixin') {
|
||||
const code = await wxLogin()
|
||||
console.log('准备登录：', { code, nickname: nickname.value, avatarUrl: avatarUrl.value })
|
||||
// console.log('准备登录：', { code, nickname: nickname.value, avatarUrl: 'http://tmp/HXhtcEwQ5A3B58476c91ba545ab67c6bf9c67d9c2559.jpeg' })
|
||||
|
||||
const fileKeyRes = await uni.uploadFile({
|
||||
url: 'https://apis.lihailezzc.com/api/common/upload',
|
||||
filePath: avatarUrl.value,
|
||||
name: 'file', // 和后端接收文件字段名一致
|
||||
header: {
|
||||
'x-app-id': '6846f093fdf841f6189ef0b5',
|
||||
},
|
||||
})
|
||||
if(fileKeyRes.statusCode < 400) {
|
||||
const keyJson = JSON.parse(fileKeyRes.data)
|
||||
const url = `https://file.lihailezzc.com/${keyJson?.data.key}`
|
||||
const loginRes = await apiLogin({ code, nickname: nickname.value, avatarUrl: url })
|
||||
// 保存用户信息到store
|
||||
userStore.setUserInfo({
|
||||
nickName: nickname.value,
|
||||
avatarUrl: avatarUrl.value,
|
||||
})
|
||||
|
||||
userStore.setToken(loginRes.token)
|
||||
|
||||
uni.showToast({ title: '登录成功', icon: 'success' })
|
||||
popupRef.value.close()
|
||||
|
||||
// 重置临时变量
|
||||
avatarUrl.value = ''
|
||||
nickname.value = ''
|
||||
} else {
|
||||
throw Error('获取失败')
|
||||
}
|
||||
|
||||
}
|
||||
} catch (err) {
|
||||
uni.showToast({ title: '登录失败', icon: 'none' })
|
||||
console.error(err)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.mine-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100vh;
|
||||
background: #F9F6F2;
|
||||
|
||||
button {
|
||||
border: none;
|
||||
outline: none;
|
||||
background-color: transparent;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: normal;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
button::after {
|
||||
border: none;
|
||||
}
|
||||
|
||||
.mine-top-panel{
|
||||
width: 100vw;
|
||||
height: 500rpx;
|
||||
background-color: #beecd8;
|
||||
border-bottom-left-radius: 50% 50rpx;
|
||||
border-bottom-right-radius: 50% 50rpx;
|
||||
overflow: hidden;
|
||||
.user-info{
|
||||
padding-left: 40rpx;
|
||||
image {
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.user-logged-in{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.user-logged-in-info{
|
||||
padding-left: 20rpx;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.nickname{
|
||||
color: #1a1a1a;
|
||||
font-weight: 800;
|
||||
}
|
||||
.phone{
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
.user-not-logged-in{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.login-button{
|
||||
padding-left: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.mine-middle-panel{
|
||||
width: 90vw;
|
||||
height: 200rpx;
|
||||
background-color: #fff;
|
||||
margin-top: -100rpx;
|
||||
border-radius: 20rpx; /* 四角小圆角 */
|
||||
box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.05); /* 柔和阴影 */
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding-left: 20rpx;
|
||||
padding-right: 20rpx;
|
||||
.mine-info-panel{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 23%;
|
||||
}
|
||||
}
|
||||
}
|
||||
/* 弹窗样式 */
|
||||
.popup-container {
|
||||
background-color: #fff;
|
||||
padding: 40rpx 30rpx 60rpx;
|
||||
border-top-left-radius: 30rpx;
|
||||
border-top-right-radius: 30rpx;
|
||||
|
||||
.popup-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.popup-title {
|
||||
font-size: 36rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-nickname {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.avatar-selector {
|
||||
width: 145rpx;
|
||||
height: 145rpx;
|
||||
border-radius: 50%;
|
||||
font-size: 26rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 20rpx;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.avatar-preview {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.nickname-input {
|
||||
width: 80%;
|
||||
border: 1rpx solid #ccc;
|
||||
border-radius: 20rpx;
|
||||
padding: 20rpx;
|
||||
font-size: 26rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-btn {
|
||||
background-color: #07c160;
|
||||
color: white;
|
||||
font-size: 30rpx;
|
||||
border-radius: 50rpx;
|
||||
padding: 20rpx 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
360
pages/spring/index.vue
Normal file
360
pages/spring/index.vue
Normal file
@@ -0,0 +1,360 @@
|
||||
<template>
|
||||
<view class="spring-page" :style="{ paddingTop: getBavBarHeight() + 'px' }">
|
||||
<!-- 顶部 Banner -->
|
||||
<view class="hero">
|
||||
<view class="hero-badge">
|
||||
<text class="badge-dot">•</text>
|
||||
<text class="badge-text">距春节还有 15 天</text>
|
||||
</view>
|
||||
<view class="hero-title">
|
||||
<text class="year">2026</text>
|
||||
<text class="main">新春祝福</text>
|
||||
</view>
|
||||
<text class="hero-sub">新年快乐，万事如意</text>
|
||||
<image class="hero-decor" src="https://file.lihailezzc.com/resource/58c8d19e5f2d9c958a7b8b9f44b8c3e3.png" mode="aspectFill" />
|
||||
</view>
|
||||
|
||||
<!-- 功能入口宫格 -->
|
||||
<view class="feature-grid">
|
||||
<view
|
||||
v-for="(item, idx) in features"
|
||||
:key="idx"
|
||||
class="feature-item"
|
||||
@tap="onFeatureTap(item)"
|
||||
>
|
||||
<image class="feature-icon" :src="item.icon" mode="aspectFill" />
|
||||
<view class="feature-texts">
|
||||
<text class="feature-title">{{ item.title }}</text>
|
||||
<text class="feature-sub">{{ item.subtitle }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 大家都在用 -->
|
||||
<view class="section">
|
||||
<view class="section-header">
|
||||
<view class="section-bar"></view>
|
||||
<text class="section-title">大家都在用</text>
|
||||
<text class="section-more" @tap="onMore('use')">更多</text>
|
||||
</view>
|
||||
<scroll-view scroll-x class="cards-scroll" show-scrollbar="false">
|
||||
<view class="cards-wrap">
|
||||
<view v-for="(card, i) in popularCards" :key="i" class="use-card" @tap="previewCard(card)">
|
||||
<image :src="card.cover" class="use-cover" mode="aspectFill" />
|
||||
<view class="use-info">
|
||||
<text class="use-title">{{ card.title }}</text>
|
||||
<text class="use-sub">{{ card.sub }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- 最新祝福 -->
|
||||
<view class="section">
|
||||
<view class="section-header">
|
||||
<view class="section-bar"></view>
|
||||
<text class="section-title">最新祝福</text>
|
||||
</view>
|
||||
|
||||
<view class="feed-list">
|
||||
<view v-for="(post, i) in feeds" :key="i" class="feed-item">
|
||||
<view class="feed-header">
|
||||
<image :src="post.avatar" class="feed-avatar" mode="aspectFill" />
|
||||
<view class="feed-user">
|
||||
<text class="feed-name">{{ post.name }}</text>
|
||||
<text class="feed-time">{{ post.time }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="feed-content">
|
||||
<text class="feed-text">{{ post.text }}</text>
|
||||
<image v-if="post.image" :src="post.image" class="feed-image" mode="aspectFill" />
|
||||
</view>
|
||||
<view class="feed-actions">
|
||||
<view class="action" @tap="like(i)">
|
||||
<text class="icon">❤</text>
|
||||
<text>{{ post.likes }}</text>
|
||||
</view>
|
||||
<view class="action" @tap="comment(i)">
|
||||
<text class="icon">💬</text>
|
||||
<text>{{ post.comments }}</text>
|
||||
</view>
|
||||
<view class="action" @tap="share(i)">
|
||||
<text class="icon">↗</text>
|
||||
<text>分享</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="see-more" @tap="onMore('feed')">查看更多祝福…</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部中间发布按钮 -->
|
||||
<view class="fab" @tap="createGreeting">
|
||||
<text class="fab-plus">＋</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { onPullDownRefresh } from '@dcloudio/uni-app'
|
||||
import { getBavBarHeight } from '@/utils/system'
|
||||
|
||||
const features = ref([
|
||||
{ title: '新春祝福卡片', subtitle: '龙年贺卡', icon: 'https://file.lihailezzc.com/resource/6b6cb83abf3a9c9b78a4744238b5b851.png', type: 'card' },
|
||||
{ title: '视频拜年', subtitle: 'AI合成短视频', icon: 'https://file.lihailezzc.com/resource/1a7b4b9d2b9b4bcb88f14c9f1ef4413a.png', type: 'video' },
|
||||
{ title: '新春头像装饰', subtitle: '锦上添花', icon: 'https://file.lihailezzc.com/resource/5e7d2b8d1c34c22f9c4f4f4cb4cba70d.png', type: 'avatar_decor' },
|
||||
{ title: '马年主题头像框', subtitle: '2026限定', icon: 'https://file.lihailezzc.com/resource/9f80ab295b7e0a7a5f62c3b0f2d7a11c.png', type: 'avatar_frame' },
|
||||
])
|
||||
|
||||
const popularCards = ref([
|
||||
{ title: '极简祝福金框', sub: '极简风格', cover: 'https://file.lihailezzc.com/resource/7a5b2f2f5d6c42b5b21b8b1c9b28a3a1.jpg' },
|
||||
{ title: '红包封面', sub: '新春限定', cover: 'https://file.lihailezzc.com/resource/9b3d2a1a4c7b4a4a9e3b94c4a2b9c3e2.jpg' },
|
||||
{ title: '新春大拜年卡', sub: '全家福', cover: 'https://file.lihailezzc.com/resource/3a2b1c9d7e6f5a4b3c2d1e0f9a8b7c6d.jpg' }
|
||||
])
|
||||
|
||||
const feeds = ref([
|
||||
{
|
||||
name: '陈小明',
|
||||
time: '刚刚',
|
||||
avatar: 'https://file.lihailezzc.com/resource/1463f294244c11cf274a5eaae115872a.jpeg',
|
||||
text: '祝大家新的一年万事如意，阖家幸福！龙年行大运，喜气满满～✨',
|
||||
image: 'https://file.lihailezzc.com/resource/02b7d1f8a9c34f2b8a2a7d4e9b1a5c8d.jpg',
|
||||
likes: 12,
|
||||
comments: 3
|
||||
},
|
||||
{
|
||||
name: '李华',
|
||||
time: '5分钟前',
|
||||
avatar: 'https://file.lihailezzc.com/resource/1463f294244c11cf274a5eaae115872a.jpeg',
|
||||
text: '新年快乐！祝朋友们身体健康、工作顺利，2026马到成功～',
|
||||
image: '',
|
||||
likes: 8,
|
||||
comments: 2
|
||||
},
|
||||
{
|
||||
name: '王伟',
|
||||
time: '10分钟前',
|
||||
avatar: 'https://file.lihailezzc.com/resource/1463f294244c11cf274a5eaae115872a.jpeg',
|
||||
text: '给你们拜年啦！',
|
||||
image: 'https://file.lihailezzc.com/resource/1c2d3e4f5a6b7c8d9e0f1a2b3c4d5e6f.jpg',
|
||||
likes: 6,
|
||||
comments: 1
|
||||
}
|
||||
])
|
||||
|
||||
const onFeatureTap = (item) => {
|
||||
uni.showToast({ title: `进入：${item.title}`, icon: 'none' })
|
||||
// 可跳转到对应功能页面
|
||||
// uni.navigateTo({ url: `/pages/${item.type}/index` })
|
||||
}
|
||||
|
||||
const previewCard = (card) => {
|
||||
uni.previewImage({ urls: [card.cover] })
|
||||
}
|
||||
|
||||
const onMore = (type) => {
|
||||
uni.showToast({ title: '即将开放～', icon: 'none' })
|
||||
}
|
||||
|
||||
const like = (index) => {
|
||||
feeds.value[index].likes += 1
|
||||
}
|
||||
|
||||
const comment = (index) => {
|
||||
uni.showToast({ title: '评论功能开发中～', icon: 'none' })
|
||||
}
|
||||
|
||||
const share = () => {
|
||||
uni.showShareMenu && uni.showShareMenu()
|
||||
}
|
||||
|
||||
const createGreeting = () => {
|
||||
uni.showToast({ title: '去发布祝福～', icon: 'none' })
|
||||
}
|
||||
|
||||
onPullDownRefresh(() => {
|
||||
setTimeout(() => {
|
||||
uni.stopPullDownRefresh()
|
||||
uni.showToast({ title: '已为你更新内容', icon: 'success' })
|
||||
}, 600)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.spring-page {
|
||||
min-height: 100vh;
|
||||
box-sizing: border-box;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* 顶部 Banner */
|
||||
.hero {
|
||||
position: relative;
|
||||
margin: 24rpx;
|
||||
padding: 32rpx;
|
||||
border-radius: 24rpx;
|
||||
color: #fff;
|
||||
background: linear-gradient(180deg, #e52e2e 0%, #c61a1a 100%);
|
||||
overflow: hidden;
|
||||
|
||||
.hero-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
background: rgba(255,255,255,0.2);
|
||||
border-radius: 999rpx;
|
||||
padding: 8rpx 16rpx;
|
||||
font-size: 22rpx;
|
||||
.badge-dot { margin-right: 8rpx; }
|
||||
}
|
||||
.hero-title {
|
||||
margin-top: 24rpx;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
.year {
|
||||
font-size: 44rpx;
|
||||
font-weight: 700;
|
||||
margin-right: 12rpx;
|
||||
}
|
||||
.main {
|
||||
font-size: 44rpx;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
.hero-sub {
|
||||
margin-top: 8rpx;
|
||||
font-size: 24rpx;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.hero-decor {
|
||||
position: absolute;
|
||||
right: 12rpx;
|
||||
bottom: 12rpx;
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
opacity: 0.3;
|
||||
border-radius: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 功能入口宫格 - 2x2 */
|
||||
.feature-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-gap: 20rpx;
|
||||
padding: 0 24rpx;
|
||||
margin-top: 8rpx;
|
||||
|
||||
.feature-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
border-radius: 18rpx;
|
||||
background: #f9f5f0;
|
||||
box-shadow: 0 6rpx 16rpx rgba(0,0,0,0.04);
|
||||
}
|
||||
.feature-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-right: 16rpx;
|
||||
background: #fff;
|
||||
}
|
||||
.feature-texts {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.feature-title {
|
||||
font-size: 28rpx; color: #222; font-weight: 600;
|
||||
}
|
||||
.feature-sub {
|
||||
font-size: 22rpx; color: #888; margin-top: 8rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 通用区块标题 */
|
||||
.section {
|
||||
margin-top: 28rpx;
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 24rpx;
|
||||
.section-bar {
|
||||
width: 10rpx; height: 30rpx; border-radius: 6rpx; background: #ff3b30; margin-right: 12rpx;
|
||||
}
|
||||
.section-title { font-size: 28rpx; color: #222; flex: 1; font-weight: 600; }
|
||||
.section-more { font-size: 24rpx; color: #999; }
|
||||
}
|
||||
}
|
||||
|
||||
/* 大家都在用 - 横滑卡片 */
|
||||
.cards-scroll {
|
||||
margin-top: 16rpx;
|
||||
padding-left: 24rpx;
|
||||
}
|
||||
.cards-wrap { display: flex; }
|
||||
.use-card {
|
||||
width: 260rpx;
|
||||
flex-shrink: 0;
|
||||
margin-right: 18rpx;
|
||||
border-radius: 18rpx;
|
||||
background: #fff;
|
||||
box-shadow: 0 8rpx 20rpx rgba(0,0,0,0.06);
|
||||
overflow: hidden;
|
||||
|
||||
.use-cover { width: 100%; height: 200rpx; }
|
||||
.use-info { padding: 16rpx; }
|
||||
.use-title { font-size: 26rpx; color: #333; font-weight: 600; }
|
||||
.use-sub { font-size: 22rpx; color: #999; margin-top: 6rpx; }
|
||||
}
|
||||
|
||||
/* 已移除：.cards-scroll、feed-list、feed-item、feed-header、feed-avatar、feed-user、feed-name、feed-time、feed-content、feed-text、feed-image、feed-actions、.see-more */
|
||||
.feed-list { padding: 0 24rpx; }
|
||||
.feed-item {
|
||||
padding: 22rpx 0;
|
||||
border-bottom: 1rpx solid #f0f0f0;
|
||||
}
|
||||
.feed-header { display: flex; align-items: center; }
|
||||
.feed-avatar {
|
||||
width: 64rpx; height: 64rpx; border-radius: 50%; margin-right: 16rpx;
|
||||
}
|
||||
.feed-user { display: flex; flex-direction: column; }
|
||||
.feed-name { font-size: 26rpx; color: #333; font-weight: 600; }
|
||||
.feed-time { font-size: 22rpx; color: #999; margin-top: 6rpx; }
|
||||
.feed-content { margin-top: 12rpx; }
|
||||
.feed-text { font-size: 26rpx; color: #333; line-height: 1.6; }
|
||||
.feed-image { width: 100%; height: 280rpx; border-radius: 12rpx; margin-top: 12rpx; background: #f6f6f6; }
|
||||
.feed-actions {
|
||||
margin-top: 12rpx;
|
||||
display: flex;
|
||||
.action {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-right: 24rpx;
|
||||
color: #666;
|
||||
.icon { margin-right: 8rpx; }
|
||||
}
|
||||
}
|
||||
|
||||
.see-more {
|
||||
margin: 24rpx; padding: 18rpx 0; text-align: center;
|
||||
color: #999; font-size: 24rpx;
|
||||
}
|
||||
|
||||
/* 发布悬浮按钮 */
|
||||
.fab {
|
||||
position: fixed;
|
||||
left: 50%; transform: translateX(-50%);
|
||||
bottom: 60rpx;
|
||||
width: 100rpx; height: 100rpx;
|
||||
border-radius: 50%;
|
||||
background: #ff3b30;
|
||||
color: #fff;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
box-shadow: 0 12rpx 24rpx rgba(255,59,48,0.4);
|
||||
.fab-plus { font-size: 48rpx; line-height: 1; }
|
||||
}
|
||||
</style>
|
||||
BIN
static/icon/celebrate.png
Normal file
BIN
static/icon/celebrate.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.9 KiB |
BIN
static/icon/guashi.png
Normal file
BIN
static/icon/guashi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
static/icon/hongbao.png
Normal file
BIN
static/icon/hongbao.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
BIN
static/icon/yunshi.png
Normal file
BIN
static/icon/yunshi.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.3 KiB |
BIN
static/images/tabBar/home.png
Normal file
BIN
static/images/tabBar/home.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
static/images/tabBar/home_s.png
Normal file
BIN
static/images/tabBar/home_s.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
BIN
static/images/tabBar/me.png
Normal file
BIN
static/images/tabBar/me.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
static/images/tabBar/me_s.png
Normal file
BIN
static/images/tabBar/me_s.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
static/images/tabBar/message.png
Normal file
BIN
static/images/tabBar/message.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
static/images/tabBar/message_s.png
Normal file
BIN
static/images/tabBar/message_s.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
static/logo.png
Normal file
BIN
static/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
54
stores/user.js
Normal file
54
stores/user.js
Normal file
@@ -0,0 +1,54 @@
|
||||
import { defineStore } from 'pinia'
|
||||
import { wxLogin, wxGetUserProfile } from '@/utils/login.js'
|
||||
import {getPlatformProvider} from '@/utils/system'
|
||||
|
||||
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 {
|
||||
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 = {}
|
||||
}
|
||||
}
|
||||
},
|
||||
logout() {
|
||||
this.userInfo = {}
|
||||
this.token = ''
|
||||
uni.removeStorageSync('userInfo')
|
||||
uni.removeStorageSync('token')
|
||||
}
|
||||
}
|
||||
})
|
||||
13
uni.promisify.adaptor.js
Normal file
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
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;
|
||||
94
uni_modules/uni-popup/changelog.md
Normal file
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
|
||||
1
utils/common.js
Normal file
1
utils/common.js
Normal file
@@ -0,0 +1 @@
|
||||
|
||||
18
utils/date.js
Normal file
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])
|
||||
}
|
||||
30
utils/login.js
Normal file
30
utils/login.js
Normal file
@@ -0,0 +1,30 @@
|
||||
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 wxGetUserProfile = () => {
|
||||
return new Promise((resolve, reject) => {
|
||||
wx.getUserProfile({
|
||||
desc: '用于完善用户信息',
|
||||
success: res => {
|
||||
resolve(res)
|
||||
},
|
||||
fail: err => {
|
||||
reject(err)
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
55
utils/request.js
Normal file
55
utils/request.js
Normal file
@@ -0,0 +1,55 @@
|
||||
// const BASE_URL = 'https://apis.lihailezzc.com'
|
||||
const BASE_URL = 'http://127.0.0.1:3999'
|
||||
export const request = (config = {}) => {
|
||||
const {
|
||||
url,
|
||||
method="GET",
|
||||
header={},
|
||||
data={}
|
||||
} = config
|
||||
|
||||
// 默认 header
|
||||
const defaultHeader = {
|
||||
'x-app-id': '68774dc2d7a1efe42086078a',
|
||||
};
|
||||
|
||||
// 合并 header（用户传入的覆盖默认的）
|
||||
const finalHeader = {
|
||||
...defaultHeader,
|
||||
...header
|
||||
};
|
||||
|
||||
return new Promise((reslove, reject) => {
|
||||
uni.request({
|
||||
url: BASE_URL + url,
|
||||
method,
|
||||
header: finalHeader,
|
||||
data,
|
||||
success: res => {
|
||||
if(res.statusCode === 200 || res.statusCode === 201) {
|
||||
if(res?.data?.code === 200) {
|
||||
reslove(res.data.data)
|
||||
} else {
|
||||
uni.showModal({
|
||||
title: "错误提示",
|
||||
content: res.data.msg || '',
|
||||
showCancel: false
|
||||
})
|
||||
reject(res.data)
|
||||
}
|
||||
} else {
|
||||
uni.showModal({
|
||||
title: "错误提示",
|
||||
content: res.data.errMsg,
|
||||
showCancel: false
|
||||
})
|
||||
reject(res.data)
|
||||
}
|
||||
},
|
||||
fail: err => {
|
||||
reject(err)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
47
utils/system.js
Normal file
47
utils/system.js
Normal file
@@ -0,0 +1,47 @@
|
||||
const SYSTEM = uni.getSystemInfoSync()
|
||||
|
||||
|
||||
export const getStatusBarHeight = () => SYSTEM.statusBarHeight || 15
|
||||
export const getTitleBarHeight = () => {
|
||||
if(uni.getMenuButtonBoundingClientRect) {
|
||||
const { top, height } = uni.getMenuButtonBoundingClientRect()
|
||||
return height + (top - getStatusBarHeight()) * 2
|
||||
} else {
|
||||
return 40
|
||||
}
|
||||
}
|
||||
|
||||
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 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';
|
||||
}
|
||||
117
utils/track.js
Normal file
117
utils/track.js
Normal file
@@ -0,0 +1,117 @@
|
||||
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
|
||||
}
|
||||
Reference in New Issue
Block a user