Hooke / jgdl

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
d8ebf415 1 parent 262d1016

feat: 初始化项目基础结构和功能 

添加项目基础文件结构，包括页面、组件、API、状态管理等
集成Taro4、Vue3、Pinia、TailwindCSS等技术栈
实现授权登录、页面导航、海报生成等核心功能
配置构建工具和开发环境
Expand all
Inline Side-by-side
Showing 63 changed files with 2844 additions and 0 deletions
# http://editorconfig.org
root = true
[*]
indent_style = space
indent_size = 2
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
// ESLint 检查 .vue 文件需要单独配置编辑器：
// https://eslint.vuejs.org/user-guide/#editor-integrations
{
"extends": ["taro/vue3"]
}
dist/
deploy_versions/
.temp/
.rn_temp/
node_modules/
.DS_Store
.swc
.history
.trae
## 项目介绍
基于Taro4的微信小程序模版，集成了常用的功能，如登录、注册、列表、详情、购物车等。
## 技术栈
- Taro4
- Vue3
- TypeScript
- Pinia
- Less
## 项目结构
- src
- api：请求接口
- assets：静态资源
- components：全局组件
- config：项目配置
- pages：页面
- stores：状态管理
- utils：工具函数
- app.config.js：项目配置
- app.js：应用入口
- app.less：全局样式
- taro.config.js：Taro配置
- tsconfig.json：TypeScript配置
- package.json：依赖配置
## 项目运行
1. 安装依赖
```bash
npm install
```
2. 运行项目
```bash
npm run dev:weapp
```
3. 打包项目
```bash
npm run build:weapp
```
......
// babel-preset-taro 更多选项和默认值：
// https://github.com/NervJS/taro/blob/next/packages/babel-preset-taro/README.md
module.exports = {
presets: [
['taro', {
framework: 'vue3',
ts: false,
compiler: 'webpack5',
}]
]
}
/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399
export {}
declare module 'vue' {
export interface GlobalComponents {
NavBar: typeof import('./src/components/navBar.vue')['default']
NutButton: typeof import('@nutui/nutui-taro')['Button']
NutToast: typeof import('@nutui/nutui-taro')['Toast']
Picker: typeof import('./src/components/time-picker-data/picker.vue')['default']
PosterBuilder: typeof import('./src/components/PosterBuilder/index.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
}
}
/*
* @Date: 2025-06-28 10:33:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-06-28 10:45:27
* @FilePath: /myApp/config/dev.js
* @Description: 文件描述
*/
export default {
env: {
NODE_ENV: '"development"'
},
logger: {
quiet: false,
stats: true
},
mini: {},
h5: {}
}
import { defineConfig } from '@tarojs/cli'
import devConfig from './dev'
import prodConfig from './prod'
import NutUIResolver from '@nutui/auto-import-resolver'
import Components from 'unplugin-vue-components/webpack'
const path = require('path')
const { UnifiedWebpackPluginV5 } = require('weapp-tailwindcss/webpack')
// https://taro-docs.jd.com/docs/next/config#defineconfig-辅助函数
export default defineConfig(async (merge) => {
const baseConfig = {
projectName: 'myApp',
date: '2025-6-28',
designWidth (input) {
// 配置 NutUI 375 尺寸
if (input?.file?.replace(/\\+/g, '/').indexOf('@nutui') > -1) {
return 375
}
// 全局使用 Taro 默认的 750 尺寸
return 750
},
deviceRatio: {
640: 2.34 / 2,
750: 1,
375: 2,
828: 1.81 / 2
},
alias: { // 配置目录别名
"@/utils": path.resolve(__dirname, "../src/utils"),
"@/components": path.resolve(__dirname, "../src/components"),
"@/images": path.resolve(__dirname, "../src/assets/images"),
"@/assets": path.resolve(__dirname, "../src/assets"),
"@/composables": path.resolve(__dirname, "../src/composables"),
"@/api": path.resolve(__dirname, "../src/api"),
"@/stores": path.resolve(__dirname, "../src/stores"),
"@/hooks": path.resolve(__dirname, "../src/hooks"),
},
sourceRoot: 'src',
outputRoot: 'dist',
plugins: ['@tarojs/plugin-html', 'taro-plugin-pinia',],
defineConstants: {
},
copy: {
patterns: [
],
options: {
}
},
framework: 'vue3',
compiler: {
type: 'webpack5',
prebundle: {
enable: false
}
},
cache: {
enable: false // Webpack 持久化缓存配置，建议开启。默认配置请参考：https://docs.taro.zone/docs/config-detail#cache
},
sass:{
data: `@import "@nutui/nutui-taro/dist/styles/variables.scss";`
},
mini: {
miniCssExtractPluginOption: {
ignoreOrder: true
},
postcss: {
pxtransform: {
enable: true,
config: {
}
},
// url: {
// enable: true,
// config: {
// limit: 1024 // 设定转换尺寸上限
// }
// },
cssModules: {
enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
config: {
namingPattern: 'module', // 转换模式，取值为 global/module
generateScopedName: '[name]__[local]___[hash:base64:5]'
}
}
},
webpackChain(chain) {
chain.plugin('unplugin-vue-components').use(Components({
resolvers: [NutUIResolver({taro: true})]
}))
chain.merge({
plugin: {
install: {
plugin: UnifiedWebpackPluginV5,
args: [{
appType: 'taro',
// 下面个配置，会开启 rem -> rpx 的转化
rem2rpx: true,
injectAdditionalCssVarScope: true
}]
}
}
})
}
},
h5: {
publicPath: '/',
staticDirectory: 'static',
// esnextModules: ['nutui-taro', 'icons-vue-taro'],
output: {
filename: 'js/[name].[hash:8].js',
chunkFilename: 'js/[name].[chunkhash:8].js'
},
miniCssExtractPluginOption: {
ignoreOrder: true,
filename: 'css/[name].[hash].css',
chunkFilename: 'css/[name].[chunkhash].css'
},
postcss: {
autoprefixer: {
enable: true,
config: {}
},
cssModules: {
enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
config: {
namingPattern: 'module', // 转换模式，取值为 global/module
generateScopedName: '[name]__[local]___[hash:base64:5]'
}
}
},
webpackChain(chain) {
chain.plugin('unplugin-vue-components').use(Components({
resolvers: [NutUIResolver({taro: true})]
}))
}
},
rn: {
appName: 'taroDemo',
postcss: {
cssModules: {
enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
}
}
}
}
if (process.env.NODE_ENV === 'development') {
// 本地开发构建配置（不混淆压缩）
return merge({}, baseConfig, devConfig)
}
// 生产构建配置（默认开启压缩混淆等）
return merge({}, baseConfig, prodConfig)
})
/*
* @Date: 2025-06-28 10:33:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-06-28 11:00:57
* @FilePath: /myApp/config/prod.js
* @Description: 文件描述
*/
export default {
env: {
NODE_ENV: '"production"'
},
mini: {},
h5: {
/**
* WebpackChain 插件配置
* @docs https://github.com/neutrinojs/webpack-chain
*/
// webpackChain (chain) {
// /**
// * 如果 h5 端编译后体积过大，可以使用 webpack-bundle-analyzer 插件对打包体积进行分析。
// * @docs https://github.com/webpack-contrib/webpack-bundle-analyzer
// */
// chain.plugin('analyzer')
// .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
// /**
// * 如果 h5 端首屏加载时间过长，可以使用 prerender-spa-plugin 插件预加载首页。
// * @docs https://github.com/chrisvfritz/prerender-spa-plugin
// */
// const path = require('path')
// const Prerender = require('prerender-spa-plugin')
// const staticDir = path.join(__dirname, '..', 'dist')
// chain
// .plugin('prerender')
// .use(new Prerender({
// staticDir,
// routes: [ '/pages/index/index' ],
// postProcess: (context) => ({ ...context, outputPath: path.join(staticDir, 'index.html') })
// }))
// }
}
}
{
"name": "myApp",
"version": "1.0.0",
"private": true,
"description": "myApp",
"templateInfo": {
"name": "vue3-NutUI",
"typescript": false,
"css": "Less",
"framework": "Vue3"
},
"scripts": {
"build:weapp": "taro build --type weapp",
"build:swan": "taro build --type swan",
"build:alipay": "taro build --type alipay",
"build:tt": "taro build --type tt",
"build:h5": "taro build --type h5",
"build:rn": "taro build --type rn",
"build:qq": "taro build --type qq",
"build:quickapp": "taro build --type quickapp",
"dev:weapp": "npm run build:weapp -- --watch",
"dev:swan": "npm run build:swan -- --watch",
"dev:alipay": "npm run build:alipay -- --watch",
"dev:tt": "npm run build:tt -- --watch",
"dev:h5": "npm run build:h5 -- --watch",
"dev:rn": "npm run build:rn -- --watch",
"dev:qq": "npm run build:qq -- --watch",
"dev:quickapp": "npm run build:quickapp -- --watch",
"postinstall": "weapp-tw patch"
},
"browserslist": [
"last 3 versions",
"Android >= 4.1",
"ios >= 8"
],
"author": "",
"license": "MIT",
"dependencies": {
"@babel/runtime": "^7.7.7",
"@nutui/icons-vue-taro": "^0.0.9",
"@nutui/nutui-taro": "^4.3.13",
"@tarojs/components": "4.1.2",
"@tarojs/helper": "4.1.2",
"@tarojs/plugin-framework-vue3": "4.1.2",
"@tarojs/plugin-html": "4.1.2",
"@tarojs/plugin-platform-alipay": "4.1.2",
"@tarojs/plugin-platform-h5": "4.1.2",
"@tarojs/plugin-platform-jd": "4.1.2",
"@tarojs/plugin-platform-qq": "4.1.2",
"@tarojs/plugin-platform-swan": "4.1.2",
"@tarojs/plugin-platform-tt": "4.1.2",
"@tarojs/plugin-platform-weapp": "4.1.2",
"@tarojs/runtime": "4.1.2",
"@tarojs/shared": "4.1.2",
"@tarojs/taro": "4.1.2",
"axios-miniprogram": "^2.7.2",
"pinia": "^3.0.3",
"taro-plugin-pinia": "^1.0.0",
"vue": "^3.3.0"
},
"devDependencies": {
"@babel/core": "^7.8.0",
"@nutui/auto-import-resolver": "^1.0.0",
"@tarojs/cli": "4.1.2",
"@tarojs/taro-loader": "4.1.2",
"@tarojs/webpack5-runner": "4.1.2",
"@types/webpack-env": "^1.13.6",
"@vue/babel-plugin-jsx": "^1.0.6",
"@vue/compiler-sfc": "^3.0.0",
"autoprefixer": "^10.4.21",
"babel-preset-taro": "4.1.2",
"css-loader": "3.4.2",
"eslint": "^8.12.0",
"eslint-config-taro": "4.1.2",
"postcss": "^8.5.6",
"style-loader": "1.3.0",
"tailwindcss": "^3.4.0",
"unplugin-vue-components": "^0.26.0",
"vue-loader": "^17.0.0",
"weapp-tailwindcss": "^4.1.10",
"webpack": "5.78.0"
}
}
/*
* @Date: 2025-06-30 13:27:35
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-06-30 13:27:42
* @FilePath: /myApp/postcss.config.js
* @Description: 文件描述
*/
// postcss 插件以 object 方式注册的话，是按照由上到下的顺序执行的
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}
{
"miniprogramRoot": "./dist",
"projectname": "myApp",
"description": "myApp",
"appid": "touristappid",
"setting": {
"urlCheck": true,
"es6": false,
"enhance": false,
"compileHotReLoad": false,
"postcss": false,
"minified": false
},
"compileType": "miniprogram"
}
{
"miniprogramRoot": "./",
"projectname": "myApp",
"description": "myApp",
"appid": "touristappid",
"setting": {
"urlCheck": true,
"es6": false,
"postcss": false,
"minified": false
},
"compileType": "miniprogram"
}
/*
* @Date: 2022-06-17 14:54:29
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-06-18 22:18:46
* @FilePath: /tswj/src/api/common.js
* @Description: 通用接口
*/
import { fn, fetch, uploadFn } from '@/api/fn';
const Api = {
SMS: '/srv/?a=sms',
TOKEN: '/srv/?a=upload',
SAVE_FILE: '/srv/?a=upload&t=save_file',
}
/**
* @description: 发送验证码
* @param {*} phone 手机号码
* @returns
*/
export const smsAPI = (params) => fn(fetch.post(Api.SMS, params));
/**
* @description: 获取七牛token
* @param {*} filename 文件名
* @param {*} file 图片base64
* @returns
*/
export const qiniuTokenAPI = (params) => fn(fetch.stringifyPost(Api.TOKEN, params));
/**
* @description: 上传七牛
* @param {*}
* @returns
*/
export const qiniuUploadAPI = (url, data, config) => uploadFn(fetch.basePost(url, data, config));
/**
* @description: 保存图片
* @param {*} format
* @param {*} hash
* @param {*} height
* @param {*} width
* @param {*} filekey
* @returns
*/
export const saveFileAPI = (params) => fn(fetch.stringifyPost(Api.SAVE_FILE, params));
/*
* @Date: 2022-05-18 22:56:08
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-05-25 22:35:00
* @FilePath: /meihuaApp/src/api/fn.js
* @Description: 文件描述
*/
import axios from '@/utils/request';
import Taro from '@tarojs/taro'
// import qs from 'qs'
/**
* 网络请求功能函数
* @param {*} api 请求axios接口
* @returns 请求成功后，获取数据
*/
export const fn = (api) => {
return api
.then(res => {
if (res.data.code) {
return res.data || true;
} else {
// tslint:disable-next-line: no-console
console.warn(res);
Taro.showToast({
title: res.data.msg,
icon: 'none',
duration: 2000
});
return false;
}
})
.catch(err => {
// tslint:disable-next-line: no-console
console.error(err);
return false;
})
.finally(() => { // 最终执行
})
}
/**
* 七牛返回格式
* @param {*} api
* @returns
*/
export const uploadFn = (api) => {
return api
.then(res => {
if (res.statusText === 'OK') {
return res.data || true;
} else {
// tslint:disable-next-line: no-console
console.warn(res);
Taro.showToast({
title: res.data.msg,
icon: 'none',
duration: 2000
});
return false;
}
})
.catch(err => {
// tslint:disable-next-line: no-console
console.error(err);
return false;
})
}
/**
* 统一 GET/POST 不同传参形式
*/
export const fetch = {
get: function (api, params) {
return axios.get(api, params)
},
post: function (api, params) {
return axios.post(api, params)
},
// stringifyPost: function (api, params) {
// return axios.post(api, qs.stringify(params))
// },
basePost: function (url, data, config) {
return axios.post(url, data, config)
}
}
/*
* @Date: 2023-12-22 10:29:37
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-06-06 09:31:34
* @FilePath: /meihuaApp/src/api/index.js
* @Description: 文件描述
*/
import { fn, fetch } from './fn';
const Api = {
BIND_PHONE: '/srv/?a=room_order&t=bind_phone',
SEND_SMS_CODE: '/srv/?a=room_order&t=send_sms_code',
SHOW_SESSION: '/srv/?a=room_order&t=show_session',
SAVE_CUSTOMER_INFO: '/srv/?a=room_order&t=save_customer_info',
SYS_PARAM: '/srv/?a=room_order&t=sys_param',
GET_LIST: '/srv/?a=room_data&t=get_list',
GET_ROOM: '/srv/?a=room_data&t=get_room',
ADD_ORDER: '/srv/?a=room_data&t=add_order',
MY_ORDER: '/srv/?a=room_data&t=my_order',
ORDER_CANCEL: '/srv/?a=room_data&t=order_cancel',
PAY: '/srv/?a=pay',
PAY_CHECK: '/srv/?a=pay_check',
ORDER_SUCCESS: '/srv/?a=room_data&t=order_success',
TMP_SYS_PARAM: '/srv/?a=get_item',
}
/**
* @description: 绑定手机号（手机号登录）
* @param phone 手机号
* @param sms_code 验证码
* @returns
*/
export const bindPhoneAPI = (params) => fn(fetch.post(Api.BIND_PHONE, params));
/**
* @description: 发送验证码
* @param phone 手机号
* @returns
*/
export const sendSmsCodeAPI = (params) => fn(fetch.post(Api.SEND_SMS_CODE, params));
/**
* @description: 获取我的信息
* @returns
*/
export const showMyInfoAPI = (params) => fn(fetch.get(Api.SHOW_SESSION, params));
/**
* @description: 保存我的信息
* @param params
* @returns
*/
export const saveCustomerInfoAPI = (params) => fn(fetch.post(Api.SAVE_CUSTOMER_INFO, params));
/**
* @description: 获取系统参数
* @returns
*/
export const sysParamAPI = (params) => fn(fetch.get(Api.SYS_PARAM, params));
/**
* @description: 获取房间列表
* @param start_date 入住时间
* @param end_date 离店时间
* @param offset 偏移量
* @param limit 条数
* @returns
*/
export const getListAPI = (params) => fn(fetch.get(Api.GET_LIST, params));
/**
* @description: 获取房间详情
* @param start_date 入住时间
* @param end_date 离店时间
* @param room_type floor/room
* @returns
*/
export const getRoomAPI = (params) => fn(fetch.get(Api.GET_ROOM, params));
/**
* @description: 预定房间
* @param id ID
* @param num 预定房间数量
* @param plan_in 入住时间
* @param plan_out 离店时间
* @param contact_name 联系人
* @param contact_phone 联系电话
* @param order_remark 备注
* @param room_type floor/room
* @returns
*/
export const addOrderAPI = (params) => fn(fetch.post(Api.ADD_ORDER, params));
/**
* @description: 支付
* @param order_id 订单ID
* @returns
*/
export const payAPI = (params) => fn(fetch.post(Api.PAY, params));
/**
* @description: 检查是否支付成功
* @param order_id 订单ID
* @returns
*/
export const payCheckAPI = (params) => fn(fetch.post(Api.PAY_CHECK, params));
/**
* @description: 获取我的订单列表
* @param pay_type
* @param page
* @param limit
* @returns
*/
export const myOrderAPI = (params) => fn(fetch.get(Api.MY_ORDER, params));
/**
* @description: 取消订单
* @param id
* @returns
*/
export const orderCancelAPI = (params) => fn(fetch.post(Api.ORDER_CANCEL, params));
/**
* @description: 订单成功
* @param id
* @returns
*/
export const orderSuccessAPI = (params) => fn(fetch.post(Api.ORDER_SUCCESS, params));
/**
* @description:
* @param id
* @returns
*/
export const tmpSysParamAPI = (params) => fn(fetch.get(Api.TMP_SYS_PARAM, params));
/*
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-06-09 13:32:44
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-06-14 14:47:01
* @FilePath: /tswj/src/api/wx/config.js
* @Description:
*/
import { fn, fetch } from '@/api/fn';
const Api = {
WX_JSAPI: '/srv/?a=wx_share',
}
/**
* @description 获取微信CONFIG配置文件
* @param {*} url
* @returns {*} cfg
*/
export const wxJsAPI = (params) => fn(fetch.get(Api.WX_JSAPI, params));
/*
* @Date: 2022-06-13 14:18:57
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-06-13 14:27:21
* @FilePath: /tswj/src/api/wx/jsApiList.js
* @Description: 文件描述
*/
export const apiList = [
"updateAppMessageShareData",
"updateTimelineShareData",
"onMenuShareTimeline",
"onMenuShareAppMessage",
"onMenuShareQQ",
"onMenuShareWeibo",
"onMenuShareQZone",
"startRecord",
"stopRecord",
"onVoiceRecordEnd",
"playVoice",
"pauseVoice",
"stopVoice",
"onVoicePlayEnd",
"uploadVoice",
"downloadVoice",
"chooseImage",
"previewImage",
"uploadImage",
"downloadImage",
"translateVoice",
"getNetworkType",
"openLocation",
"getLocation",
"hideOptionMenu",
"showOptionMenu",
"hideMenuItems",
"showMenuItems",
"hideAllNonBaseMenuItem",
"showAllNonBaseMenuItem",
"closeWindow",
"scanQRCode",
"chooseWXPay",
"openProductSpecificView",
"addCard",
"chooseCard",
"openCard"
]
/*
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2022-06-09 13:32:44
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-06-09 13:42:06
* @FilePath: /tswj/src/api/wx/config.js
* @Description:
*/
import { fn, fetch } from '@/api/fn';
const Api = {
WX_PAY: 'c/bill_paymentForBill.do',
}
/**
* @description 微信支付接口
* @param {*}
* @returns {*}
*/
export const wxPayAPI = (params) => fn(fetch.get(Api.WX_PAY, params));
/*
* @Date: 2025-06-28 10:33:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-06-28 11:05:47
* @FilePath: /myApp/src/app.config.js
* @Description: 文件描述
*/
export default {
pages: [
'pages/index/index',
'pages/auth/index',
],
subpackages: [ // 配置在tabBar中的页面不能分包写到subpackages中去
{
root: 'pages/demo',
pages: ['index'],
},
],
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: 'WeChat',
navigationBarTextStyle: 'black'
}
}
/*
* @Date: 2025-06-28 10:33:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-06-28 11:04:17
* @FilePath: /myApp/src/app.js
* @Description: 文件描述
*/
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import './app.less'
import { routerStore } from '@/stores/router'
import Taro from '@tarojs/taro'
const App = createApp({
// 对应 onLaunch
onLaunch(options) {
// 未授权状态跳转授权页面，首页不需要权限
const path = options.path;
const query = options.query;
// 缓存没有权限的地址
const router = routerStore();
router.add(path);
// if (path !== 'pages/index/index' && !wx.getStorageSync("sessionid")) {
if (!wx.getStorageSync("sessionid")) {
console.warn("没有权限");
// if (path === 'pages/detail/index') {
// Taro.navigateTo({
// url: `./pages/auth/index?url=${path}&id=${query.id}&start_date=${query.start_date}&end_date=${query.end_date}`,
// })
// } else {
// Taro.navigateTo({
// url: './pages/auth/index?url=' + path,
// })
// }
}
},
onShow(options) {
},
// 入口组件不需要实现 render 方法，即使实现了也会被 taro 所覆盖
});
App.use(createPinia())
export default App
@tailwind base;
@tailwind components;
@tailwind utilities;
@namespace: 'meihua';
/* ============ 颜色 ============ */
// 主色调
@base-color: #199A74;
// 文字颜色
@base-font-color: #333333;
@sub-font-color: #999999;
// 定义一个映射
#colors() {
base-color: @base-color;
base-font-color: @base-font-color;
}
// 混合
.width100 {
width: 100%;
}
<template>
<canvas
type="2d"
:id="canvasId"
:style="`height: ${height}rpx; width:${width}rpx;
position: absolute;
${debug ? '' : 'transform:translate3d(-9999rpx, 0, 0)'}`"
/>
</template>
<script lang="ts">
import Taro from "@tarojs/taro"
import { defineComponent, onMounted, PropType, ref } from "vue"
import { Image, DrawConfig } from "./types"
import { drawImage, drawText, drawBlock, drawLine } from "./utils/draw"
import {
toPx,
toRpx,
getRandomId,
getImageInfo,
getLinearColor,
} from "./utils/tools"
export default defineComponent({
name: "PosterBuilder",
props: {
showLoading: {
type: Boolean,
default: false,
},
config: {
type: Object as PropType<DrawConfig>,
default: () => ({}),
},
},
emits: ["success", "fail"],
setup(props, context) {
const count = ref(1)
const {
width,
height,
backgroundColor,
texts = [],
blocks = [],
lines = [],
debug = false,
} = props.config || {}
const canvasId = getRandomId()
/**
* step1: 初始化图片资源
* @param {Array} images = imgTask
* @return {Promise} downloadImagePromise
*/
const initImages = (images: Image[]) => {
const imagesTemp = images.filter((item) => item.url)
const drawList = imagesTemp.map((item, index) =>
getImageInfo(item, index)
)
return Promise.all(drawList)
}
/**
* step2: 初始化 canvas && 获取其 dom 节点和实例
* @return {Promise} resolve 里返回其 dom 和实例
*/
const initCanvas = () =>
new Promise<any>((resolve) => {
setTimeout(() => {
const pageInstance = Taro.getCurrentInstance()?.page || {} // 拿到当前页面实例
const query = Taro.createSelectorQuery().in(pageInstance) // 确定在当前页面内匹配子元素
query
.select(`#${canvasId}`)
.fields({ node: true, size: true, context: true }, (res) => {
const canvas = res.node
const ctx = canvas.getContext("2d")
resolve({ ctx, canvas })
})
.exec()
}, 300)
})
/**
* @description 保存绘制的图片
* @param { object } config
*/
const getTempFile = (canvas) => {
Taro.canvasToTempFilePath(
{
canvas,
success: (result) => {
Taro.hideLoading()
context.emit("success", result)
},
fail: (error) => {
const { errMsg } = error
if (errMsg === "canvasToTempFilePath:fail:create bitmap failed") {
count.value += 1
if (count.value <= 3) {
getTempFile(canvas)
} else {
Taro.hideLoading()
Taro.showToast({
icon: "none",
title: errMsg || "绘制海报失败",
})
context.emit("fail", errMsg)
}
}
},
},
context
)
}
/**
* step2: 开始绘制任务
* @param { Array } drawTasks 待绘制任务
*/
const startDrawing = async (drawTasks) => {
// TODO: check
// const configHeight = getHeight(config)
const { ctx, canvas } = await initCanvas()
canvas.width = width
canvas.height = height
// 设置画布底色
if (backgroundColor) {
ctx.save() // 保存绘图上下文
const grd = getLinearColor(ctx, backgroundColor, 0, 0, width, height)
ctx.fillStyle = grd // 设置填充颜色
ctx.fillRect(0, 0, width, height) // 填充一个矩形
ctx.restore() // 恢复之前保存的绘图上下文
}
// 将要画的方块、文字、线条放进队列数组
const queue = drawTasks
.concat(
texts.map((item) => {
item.type = "text"
item.zIndex = item.zIndex || 0
return item
})
)
.concat(
blocks.map((item) => {
item.type = "block"
item.zIndex = item.zIndex || 0
return item
})
)
.concat(
lines.map((item) => {
item.type = "line"
item.zIndex = item.zIndex || 0
return item
})
)
queue.sort((a, b) => a.zIndex - b.zIndex) // 按照层叠顺序由低至高排序, 先画低的，再画高的
for (let i = 0; i < queue.length; i++) {
const drawOptions = {
canvas,
ctx,
toPx,
toRpx,
}
if (queue[i].type === "image") {
await drawImage(queue[i], drawOptions)
} else if (queue[i].type === "text") {
drawText(queue[i], drawOptions)
} else if (queue[i].type === "block") {
drawBlock(queue[i], drawOptions)
} else if (queue[i].type === "line") {
drawLine(queue[i], drawOptions)
}
}
setTimeout(() => {
getTempFile(canvas) // 需要做延时才能能正常加载图片
}, 300)
}
// start: 初始化 canvas 实例 && 下载图片资源
const init = () => {
if (props.showLoading)
Taro.showLoading({ mask: true, title: "生成中..." })
if (props.config?.images?.length) {
initImages(props.config.images)
.then((result) => {
// 1. 下载图片资源
startDrawing(result)
})
.catch((err) => {
Taro.hideLoading()
Taro.showToast({
icon: "none",
title: err.errMsg || "下载图片失败",
})
context.emit("fail", err)
})
} else {
startDrawing([])
}
}
onMounted(() => {
init()
})
return {
canvasId,
debug,
width,
height,
}
},
})
</script>
export type DrawType = 'text' | 'image' | 'block' | 'line';
export interface Block {
type?: DrawType;
x: number;
y: number;
width?: number;
height: number;
paddingLeft?: number;
paddingRight?: number;
borderWidth?: number;
borderColor?: string;
backgroundColor?: string;
borderRadius?: number;
borderRadiusGroup?: number[];
text?: Text;
opacity?: number;
zIndex?: number;
}
export interface Text {
type?: DrawType;
x?: number;
y?: number;
text: string | Text[];
fontSize?: number;
color?: string;
opacity?: 1 | 0;
lineHeight?: number;
lineNum?: number;
width?: number;
marginTop?: number;
marginLeft?: number;
marginRight?: number;
textDecoration?: 'line-through' | 'none';
baseLine?: 'top' | 'middle' | 'bottom';
textAlign?: 'left' | 'center' | 'right';
fontFamily?: string;
fontWeight?: string;
fontStyle?: string;
zIndex?: number;
}
export interface Image {
type?: DrawType;
x: number;
y: number;
url: string;
width: number;
height: number;
borderRadius?: number;
borderRadiusGroup?: number[];
borderWidth?: number;
borderColor?: string;
zIndex?: number;
}
export interface Line {
type?: DrawType;
startX: number;
startY: number;
endX: number;
endY: number;
width: number;
color?: string;
zIndex?: number;
}
export type DrawConfig = {
width: number;
height: number;
backgroundColor?: string;
debug?: boolean;
blocks?: Block[];
texts?: Text[];
images?: Image[];
lines?: Line[];
};
This diff is collapsed. Click to expand it.
/* eslint-disable prefer-destructuring */
import Taro, { CanvasContext, CanvasGradient } from '@tarojs/taro';
declare const wx: any;
/**
* @description 生成随机字符串
* @param { number } length - 字符串长度
* @returns { string }
*/
export function randomString(length) {
let str = Math.random().toString(36).substr(2);
if (str.length >= length) {
return str.substr(0, length);
}
str += randomString(length - str.length);
return str;
}
/**
* 随机创造一个id
* @param { number } length - 字符串长度
* @returns { string }
*/
export function getRandomId(prefix = 'canvas', length = 10) {
return prefix + randomString(length);
}
/**
* @description 获取最大高度
* @param {} config
* @returns { number }
*/
// export function getHeight (config) {
// const getTextHeight = text => {
// const fontHeight = text.lineHeight || text.fontSize
// let height = 0
// if (text.baseLine === 'top') {
// height = fontHeight
// } else if (text.baseLine === 'middle') {
// height = fontHeight / 2
// } else {
// height = 0
// }
// return height
// }
// const heightArr: number[] = [];
// (config.blocks || []).forEach(item => {
// heightArr.push(item.y + item.height)
// });
// (config.texts || []).forEach(item => {
// let height
// if (Object.prototype.toString.call(item.text) === '[object Array]') {
// item.text.forEach(i => {
// height = getTextHeight({ ...i, baseLine: item.baseLine })
// heightArr.push(item.y + height)
// })
// } else {
// height = getTextHeight(item)
// heightArr.push(item.y + height)
// }
// });
// (config.images || []).forEach(item => {
// heightArr.push(item.y + item.height)
// });
// (config.lines || []).forEach(item => {
// heightArr.push(item.startY)
// heightArr.push(item.endY)
// })
// const sortRes = heightArr.sort((a, b) => b - a)
// let canvasHeight = 0
// if (sortRes.length > 0) {
// canvasHeight = sortRes[0]
// }
// if (config.height < canvasHeight || !config.height) {
// return canvasHeight
// }
// return config.height
// }
/**
* 将http转为https
* @param {String}} rawUrl 图片资源url
* @returns { string }
*/
export function mapHttpToHttps(rawUrl) {
if (rawUrl.indexOf(':') < 0 || rawUrl.startsWith('http://tmp')) {
return rawUrl;
}
const urlComponent = rawUrl.split(':');
if (urlComponent.length === 2) {
if (urlComponent[0] === 'http') {
urlComponent[0] = 'https';
return `${urlComponent[0]}:${urlComponent[1]}`;
}
}
return rawUrl;
}
/**
* 获取 rpx => px 的转换系数
* @returns { number } factor 单位转换系数 1rpx = factor * px
*/
export const getFactor = () => {
const sysInfo = Taro.getSystemInfoSync();
const { screenWidth } = sysInfo;
return screenWidth / 750;
};
/**
* rpx => px 单位转换
* @param { number } rpx - 需要转换的数值
* @param { number } factor - 转化因子
* @returns { number }
*/
export const toPx = (rpx, factor = getFactor()) =>
parseInt(String(rpx * factor), 10);
/**
* px => rpx 单位转换
* @param { number } px - 需要转换的数值
* @param { number } factor - 转化因子
* @returns { number }
*/
export const toRpx = (px, factor = getFactor()) =>
parseInt(String(px / factor), 10);
/**
* 下载图片资源
* @param { string } url
* @returns { Promise }
*/
export function downImage(url) {
return new Promise<string>((resolve, reject) => {
// eslint-disable-next-line no-undef
if (/^http/.test(url) && !new RegExp(wx.env.USER_DATA_PATH).test(url)) {
// wx.env.USER_DATA_PATH 文件系统中的用户目录路径
Taro.downloadFile({
url: mapHttpToHttps(url),
success: (res) => {
if (res.statusCode === 200) {
resolve(res.tempFilePath);
} else {
console.log('下载失败', res);
reject(res);
}
},
fail(err) {
console.log('下载失败了', err);
reject(err);
}
});
} else {
resolve(url); // 支持本地地址
}
});
}
/**
* 下载图片并获取图片信息
* @param {} item 图片参数信息
* @param {} index 图片下标
* @returns { Promise } result 整理后的图片信息
*/
export const getImageInfo = (item, index) =>
new Promise((resolve, reject) => {
const { x, y, width, height, url, zIndex } = item;
downImage(url).then((imgPath) =>
Taro.getImageInfo({ src: imgPath })
.then((imgInfo) => {
// 获取图片信息
// 根据画布的宽高计算出图片绘制的大小，这里会保证图片绘制不变形， 即宽高比不变，截取再拉伸
let sx; // 截图的起点 x 坐标
let sy; // 截图的起点 y 坐标
const borderRadius = item.borderRadius || 0;
const imgWidth = toRpx(imgInfo.width); // 图片真实宽度 单位 px
const imgHeight = toRpx(imgInfo.height); // 图片真实高度 单位 px
// 根据宽高比截取图片
if (imgWidth / imgHeight <= width / height) {
sx = 0;
sy = (imgHeight - (imgWidth / width) * height) / 2;
} else {
sy = 0;
sx = (imgWidth - (imgHeight / height) * width) / 2;
}
// 给 canvas 画图准备参数，详见 ./draw.ts-drawImage
const result = {
type: 'image',
borderRadius,
borderWidth: item.borderWidth,
borderColor: item.borderColor,
borderRadiusGroup: item.borderRadiusGroup,
zIndex: typeof zIndex !== 'undefined' ? zIndex : index,
imgPath: url,
sx,
sy,
sw: imgWidth - sx * 2,
sh: imgHeight - sy * 2,
x,
y,
w: width,
h: height
};
resolve(result);
})
.catch((err) => {
console.log('读取图片信息失败', err);
reject(err);
})
);
});
/**
* 获取线性渐变色
* @param {CanvasContext} ctx canvas 实例对象
* @param {String} color 线性渐变色,如 'linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 100%)'
* @param {Number} startX 起点 x 坐标
* @param {Number} startY 起点 y 坐标
* @param {Number} w 宽度
* @param {Number} h 高度
* @returns {}
*/
// TODO: 待优化, 支持所有角度，多个颜色的线性渐变
export function getLinearColor(
ctx: CanvasContext,
color,
startX,
startY,
w,
h
) {
if (
typeof startX !== 'number' ||
typeof startY !== 'number' ||
typeof w !== 'number' ||
typeof h !== 'number'
) {
console.warn('坐标或者宽高只支持数字');
return color;
}
let grd: CanvasGradient | string = color;
if (color.includes('linear-gradient')) {
// fillStyle 不支持线性渐变色
const colorList = color.match(/\((\d+)deg,\s(.+)\s\d+%,\s(.+)\s\d+%/);
const radian = colorList[1]; // 渐变弧度（角度）
const color1 = colorList[2];
const color2 = colorList[3];
const L = Math.sqrt(w * w + h * h);
const x = Math.ceil(Math.sin(180 - radian) * L);
const y = Math.ceil(Math.cos(180 - radian) * L);
// 根据弧度和宽高确定渐变色的两个点的坐标
if (Number(radian) === 180 || Number(radian) === 0) {
if (Number(radian) === 180) {
grd = ctx.createLinearGradient(startX, startY, startX, startY + h);
}
if (Number(radian) === 0) {
grd = ctx.createLinearGradient(startX, startY + h, startX, startY);
}
} else if (radian > 0 && radian < 180) {
grd = ctx.createLinearGradient(startX, startY, x + startX, y + startY);
} else {
throw new Error('只支持0 <= 颜色弧度 <= 180');
}
(grd as CanvasGradient).addColorStop(0, color1);
(grd as CanvasGradient).addColorStop(1, color2);
}
return grd;
}
/**
* 根据文字对齐方式设置坐标
* @param {*} imgPath
* @param {*} index
* @returns { Promise }
*/
export function getTextX(textAlign, x, width) {
let newX = x;
if (textAlign === 'center') {
newX = width / 2 + x;
} else if (textAlign === 'right') {
newX = width + x;
}
return newX;
}
<!--
* @Date: 2022-09-21 11:59:20
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-09-13 10:52:42
* @FilePath: /meihuaApp/src/components/navBar.vue
* @Description: 底部导航栏
-->
<template>
<view id="navbar-page" class="navbar-page">
<view @tap="goTo('index')" class="home">
<view style="height: 1.5rem;">
<IconFont :name="icon_home" size="1.5rem" color="" />
</view>
<view><text :style="homeStyle">首页</text></view>
</view>
<view @tap="goTo('book')" class="book">
<view style="height: 1.5rem;">
<IconFont :name="icon_book" size="1.5rem" color="" />
</view>
<view><text :style="bookStyle">订房</text></view>
</view>
<view @tap="goTo('serverInfo')" class="server">
<view style="height: 1.5rem;">
<IconFont :name="icon_server" size="1.5rem" color="" />
</view>
<view><text :style="serverStyle">服务</text></view>
</view>
<view @tap="goTo('my')" class="my">
<view style="height: 1.5rem;">
<IconFont :name="icon_my" size="1.5rem" color="" />
</view>
<view><text :style="myStyle">我的</text></view>
</view>
</view>
</template>
<script setup>
import Taro from '@tarojs/taro'
import { ref, defineProps, computed, onMounted } from 'vue'
import icon_home1 from '@/images/icon/icon_home1@2x.png'
import icon_home2 from '@/images/icon/icon_home2@2x.png'
import icon_my1 from '@/images/icon/icon_my1@2x.png'
import icon_my2 from '@/images/icon/icon_my2@2x.png'
import icon_book1 from '@/images/icon/icon_book1@2x.png'
import icon_book2 from '@/images/icon/icon_book2@2x.png'
import icon_server1 from '@/images/icon/icon_server1.png'
import icon_server2 from '@/images/icon/icon_server2.png'
// import { hostListAPI } from '@/api/Host/index'
import { IconFont } from '@nutui/icons-vue-taro';
const goTo = (page) => {
if (props.activated === page) {
return;
}
wx.redirectTo({
url: `../${page}/index`
});
}
// const createActivity = async () => {
// // 获取主办方列表信息
// const { code, data } = await hostListAPI();
// if (code) {
// if (!data.my_hosts.length) { // 主办方为空
// Taro.showModal({
// title: '温馨提示',
// content: '请先创建主办方后新建活动',
// success: function (res) {
// if (res.confirm) {
// Taro.navigateTo({
// url: '../createProject/index'
// });
// }
// }
// });
// } else {
// Taro.navigateTo({
// url: '../createActivity/index'
// })
// }
// }
// }
const currentPage = ref('');
onMounted(() => {
let pages = getCurrentPages();
let current_page = pages[pages.length - 1];
let url = current_page.route;
if (url == 'pages/index/index') {
currentPage.value = 'index'
} else {
currentPage.value = 'my'
}
})
const props = defineProps({
activated: String,
})
const homeStyle = ref({})
const myStyle = ref({})
const bookStyle = ref({})
const serverStyle = ref({})
const icon_home = computed(() => {
if (props.activated === 'index') {
return icon_home1
} else {
return icon_home2
}
})
const icon_my = computed(() => {
if (props.activated === 'my') {
return icon_my1
} else {
return icon_my2
}
})
const icon_book = computed(() => {
if (props.activated === 'book') {
return icon_book1
} else {
return icon_book2
}
})
const icon_server= computed(() => {
if (props.activated === 'serverInfo') {
return icon_server1
} else {
return icon_server2
}
})
if (props.activated === 'index') {
homeStyle.value = {
color: '#6A4925',
fontSize: '0.9rem'
}
myStyle.value = {
color: '#999999',
fontSize: '0.9rem'
}
bookStyle.value = {
color: '#999999',
fontSize: '0.9rem'
}
serverStyle.value = {
color: '#999999',
fontSize: '0.9rem'
}
} else if (props.activated === 'my') {
homeStyle.value = {
color: '#999999',
fontSize: '0.9rem'
}
myStyle.value = {
color: '#6A4925',
fontSize: '0.9rem'
}
bookStyle.value = {
color: '#999999',
fontSize: '0.9rem'
}
serverStyle.value = {
color: '#999999',
fontSize: '0.9rem'
}
} else if (props.activated === 'book') {
homeStyle.value = {
color: '#999999',
fontSize: '0.9rem'
}
myStyle.value = {
color: '#999999',
fontSize: '0.9rem'
}
bookStyle.value = {
color: '#6A4925',
fontSize: '0.9rem'
}
serverStyle.value = {
color: '#999999',
fontSize: '0.9rem'
}
} else if (props.activated === 'serverInfo') {
homeStyle.value = {
color: '#999999',
fontSize: '0.9rem'
}
myStyle.value = {
color: '#999999',
fontSize: '0.9rem'
}
bookStyle.value = {
color: '#999999',
fontSize: '0.9rem'
}
serverStyle.value = {
color: '#6A4925',
fontSize: '0.9rem'
}
}
</script>
<style lang="less">
.navbar-page {
position: fixed;
bottom: 0;
background-color: #FFFFFF;
padding-top: 0.5rem;
height: 5rem;
width: 100%;
.home {
position: absolute;
left: 10%;
transform: translateX(-15%);
text-align: center;
}
.book {
position: absolute;
left: 35%;
transform: translateX(-50%);
text-align: center;
}
.server {
position: absolute;
left: 60%;
transform: translateX(-50%);
text-align: center;
}
.my {
position: absolute;
left: 85%;
transform: translateX(-85%);
text-align: center;
}
}
</style>
var getDaysInOneMonth = function (year, month) {
let _month = parseInt(month, 10);
let d = new Date(year, _month, 0);
return d.getDate();
}
var dateDate = function (date) {
let year = date && date.getFullYear();
let month = date && date.getMonth() + 1;
let day = date && date.getDate();
let hours = date && date.getHours();
let minutes = date && date.getMinutes();
return {
year, month, day, hours, minutes
}
}
var dateTimePicker = function (startyear, endyear) {
// 获取date time 年份，月份，天数，小时，分钟推后30分
const years = [];
const months = [];
const hours = [];
const minutes = [];
for (let i = startyear; i <= endyear; i++) {
years.push({
name: i + '年',
id: i
});
}
//获取月份
for (let i = 1; i <= 12; i++) {
if (i < 10) {
i = "0" + i;
}
months.push({
name: i + '月',
id: i
});
}
//获取小时
for (let i = 0; i < 24; i++) {
if (i < 10) {
i = "0" + i;
}
hours.push({
name: i + '时',
id: i
});
}
//获取分钟
for (let i = 0; i < 60; i++) {
if (i < 10) {
i = "0" + i;
}
minutes.push({
name: i + '分',
id: i
});
}
return function (_year, _month) {
const days = [];
_year = parseInt(_year);
_month = parseInt(_month);
//获取日期
for (let i = 1; i <= getDaysInOneMonth(_year, _month); i++) {
if (i < 10) {
i = "0" + i;
}
days.push({
name: i + '日',
id: i
});
}
return [years, months, days, hours, minutes];
}
}
export {
dateTimePicker,
getDaysInOneMonth,
dateDate
}
<template>
<picker mode="multiSelector" :range-key="'name'" :value="timeIndex" :range="activityArray" :disabled="disabled"
@change="bindMultiPickerChange" @columnChange="bindMultiPickerColumnChange">
<slot />
</picker>
</template>
<script>
import { dateTimePicker, dateDate } from "./dateTimePicker.js";
export default {
props: {
startTime: {
type: [Object, Date],
default: new Date(),
},
endTime: {
type: [Object, Date],
default: new Date(),
},
defaultTime: {
type: [Object, Date],
default: new Date(),
},
disabled: {
type: Boolean,
default: false,
},
},
data() {
return {
timeIndex: [0, 0, 0, 0, 0],
activityArray: [],
year: 0,
month: 1,
day: 1,
hour: 0,
minute: 0,
datePicker: "",
defaultIndex: [0, 0, 0, 0, 0],
startIndex: [0, 0, 0, 0, 0],
endIndex: [0, 0, 0, 0, 0],
};
},
computed: {
timeDate() {
const { startTime, endTime } = this;
return { startTime, endTime };
},
},
watch: {
timeDate() {
this.initData();
},
defaultTime () {
this.initData();
}
},
created() {
this.initData();
},
methods: {
initData() {
let startTime = this.startTime;
let endTime = this.endTime;
this.datePicker = dateTimePicker(
startTime.getFullYear(),
endTime.getFullYear()
);
this.setDateData(this.defaultTime);
this.getKeyIndex(this.startTime, "startIndex");
// 截止时间索引
this.getKeyIndex(this.endTime, "endIndex");
// 默认索引
this.getKeyIndex(this.defaultTime, "defaultIndex");
this.timeIndex = this.defaultIndex;
// 初始时间
this.initTime();
},
getKeyIndex(time, key) {
let Arr = dateDate(time);
let _index = this.getIndex(Arr);
this[key] = _index;
},
getIndex(arr) {
let timeIndex = [];
let indexKey = ["year", "month", "day", "hours", "minutes"];
this.activityArray.forEach((element, index) => {
let _index = element.findIndex(
(item) => parseInt(item.id) === parseInt(arr[indexKey[index]])
);
timeIndex[index] = _index >= 0 ? _index : 0;
});
return timeIndex;
},
initTime() {
let _index = this.timeIndex;
this.year = this.activityArray[0][_index[0]].id;
this.month = this.activityArray[1].length && this.activityArray[1][_index[1]].id;
this.day = this.activityArray[2].length && this.activityArray[2][_index[2]].id;
this.hour = this.activityArray[3].length && this.activityArray[3][_index[3]].id;
this.minute = this.activityArray[4].length && this.activityArray[4][_index[4]].id;
},
setDateData(_date) {
let _data = dateDate(_date);
this.activityArray = this.datePicker(_data.year, _data.month);
},
bindMultiPickerChange(e) {
console.log("picker发送选择改变，携带值为", e.detail.value);
let activityArray = JSON.parse(JSON.stringify(this.activityArray)),
{ value } = e.detail,
_result = [];
for (let i = 0; i < value.length; i++) {
_result[i] = activityArray[i][value[i]].id;
}
this.$emit("result", _result);
},
bindMultiPickerColumnChange(e) {
console.log("修改的列为", e.detail.column, "，值为", e.detail.value);
let _data = JSON.parse(JSON.stringify(this.activityArray)),
timeIndex = JSON.parse(JSON.stringify(this.timeIndex)),
{ startIndex, endIndex } = this,
{ column, value } = e.detail,
_value = _data[column][value].id,
_start = dateDate(this.startTime),
_end = dateDate(this.endTime);
switch (e.detail.column) {
case 0:
if (_value <= _start.year) {
timeIndex = startIndex;
this.year = _start.year;
this.setDateData(this.startTime);
} else if (_value >= _end.year) {
this.year = _end.year;
timeIndex = [endIndex[0], 0, 0, 0, 0];
this.setDateData(this.endTime);
} else {
this.year = _value;
timeIndex = [value, 0, 0, 0, 0];
this.activityArray = this.datePicker(_value, 1);
}
timeIndex = this.timeIndex = JSON.parse(JSON.stringify(timeIndex));
this.timeIndex = timeIndex;
break;
case 1:
if (this.year == _start.year && value <= startIndex[1]) {
timeIndex = startIndex;
this.month = _start.month;
this.setDateData(this.startTime);
} else if (this.year == _end.year && value >= endIndex[1]) {
timeIndex = endIndex;
this.month = _end.month;
this.setDateData(this.endTime);
} else {
this.month = _value;
_data[2] = this.datePicker(this.year, this.month)[2];
timeIndex = [timeIndex[0], value, 0, 0, 0];
this.activityArray = _data;
}
this.timeIndex = JSON.parse(JSON.stringify(timeIndex));
break;
case 2:
if (
this.year == _start.year &&
this.month == _start.month &&
value <= startIndex[2]
) {
this.day = _start.day;
timeIndex = startIndex;
} else if (
this.year == _end.year &&
this.month == _end.month &&
value >= endIndex[2]
) {
this.day = _end.day;
timeIndex = endIndex;
} else {
this.day = _value;
timeIndex = [timeIndex[0], timeIndex[1], value, 0, 0];
}
this.timeIndex = JSON.parse(JSON.stringify(timeIndex));
break;
case 3:
if (
this.year == _start.year &&
this.month == _start.month &&
this.day == _start.day &&
value <= startIndex[3]
) {
this.hour = _start.hours;
timeIndex = startIndex;
} else if (
this.year == _end.year &&
this.month == _end.month &&
this.day == _end.day &&
value >= endIndex[3]
) {
this.hour = _end.hours;
timeIndex = endIndex;
} else {
this.hour = _value;
timeIndex[3] = value;
timeIndex[4] = 0;
}
this.timeIndex = JSON.parse(JSON.stringify(timeIndex));
break;
case 4:
timeIndex[4] = value;
if (
this.year == _start.year &&
this.month == _start.month &&
this.day == _start.day &&
this.hour == _start.hours &&
value <= startIndex[4]
) {
timeIndex = startIndex;
} else if (
this.year == _end.year &&
this.month == _end.month &&
this.day == _end.day &&
this.hour == _end.hours &&
value >= endIndex[4]
) {
timeIndex = endIndex;
}
this.timeIndex = JSON.parse(JSON.stringify(timeIndex));
break;
}
},
},
};
</script>
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<meta name="format-detection" content="telephone=no,address=no">
<meta name="apple-mobile-web-app-status-bar-style" content="white">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
<title>myApp</title>
<script><%= htmlWebpackPlugin.options.script %></script>
</head>
<body>
<div id="app"></div>
</body>
</html>
export default {
navigationBarTitleText: '授权页',
usingComponents: {
},
}
.red {
color: red;
}
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-05-26 10:17:04
* @FilePath: /meihuaApp/src/pages/auth/index.vue
* @Description: 文件描述
-->
<template>
<div>
<!-- <button wx:if="{{canIUse}}" open-type="getUserInfo" @getuserinfo="bindGetUserInfo">授权登录</button>
<view @tap="auth">授权登陆</view> -->
</div>
</template>
<script setup>
import Taro from '@tarojs/taro'
import { ref } from "vue";
import request from '@/utils/request';
</script>
<script>
import "./index.less";
import { getCurrentPageParam } from "@/utils/weapp";
export default {
name: "authPage",
mounted () {
// 授权登陆
Taro.login({
success: function (res) {
if (res.code) {
//发起网络请求
Taro.showLoading({
title: '授权中',
})
request.post('/srv/?a=openid', {
code: res.code
// openid: '0002'
// openid: 'o5NFZ5cFQtLRy3aVHaZMLkjHFusI'
// openid: 'o5NFZ5TpgG4FwYursGCLjcUJH2ak'
// openid: 'o5NFZ5cqroPYwawCp8FEOxewtgnw'
})
.then(res => {
if (res.data.code) {
var cookie = res.cookies[0];
if (cookie != null) {
wx.setStorageSync("sessionid", res.cookies[0]);//服务器返回的 Set-Cookie，保存到本地
//TAG 小程序绑定cookie
// 修改请求头
request.defaults.headers.cookie = res.cookies[0];
// if (res.data.data.avatar) {
// Taro.reLaunch({
// url: '../../' + getCurrentPageParam().url
// })
// } else { // 头像没有设置跳转完善信息页面
// Taro.redirectTo({
// url: '../apxUserInfo/index'
// })
// }
// TAG：处理分享跳转问题
const params = getCurrentPageParam();
if (getCurrentPageParam().url === 'pages/detail/index') { // 详情页的分享跳转处理
Taro.reLaunch({
url: `../../${params.url}?id=${params.id}&start_date=${params.start_date}&end_date=${params.end_date}`
})
} else { // 其他页面分享跳首页
Taro.reLaunch({
url: `/pages/index/index?first_in=${wx.getStorageSync("first_in")}`
})
}
Taro.hideLoading();
}
} else {
console.warn(res.data.msg);
Taro.hideLoading();
}
})
.catch(err => {
console.error(err);
Taro.hideLoading();
});
} else {
console.log('登录失败！' + res.errMsg)
}
}
})
},
data () {
return {
canIUse: wx.canIUse('button.open-type.getUserInfo')
}
},
onLoad: function() {
// 查看是否授权
// wx.getSetting({
// success (res){
// if (res.authSetting['scope.userInfo']) {
// // 已经授权，可以直接调用 getUserInfo 获取头像昵称
// wx.getUserInfo({
// success: function(res) {
// console.warn(res.userInfo)
// }
// })
// }
// }
// })
},
methods: {
bindGetUserInfo (e) {
console.warn(e.detail.userInfo)
},
// auth () {
// Taro.getSetting({
// success: function (res) {
// if (!res.authSetting['scope.userInfo']) {
// console.warn(0);
// Taro.authorize({
// scope: 'scope.userInfo',
// success: function () {
// Taro.getUserInfo({
// success: function(res) {
// var userInfo = res.userInfo
// console.warn(userInfo);
// }
// })
// },
// fail: function (error) {
// console.error(error)
// }
// })
// }
// }
// })
// }
auth () {
// wx.getSetting({
// success (res){
// if (res.authSetting['scope.userInfo']) {
// // 已经授权，可以直接调用 getUserInfo 获取头像昵称
// wx.getUserInfo({
// success: function(res) {
// console.warn(res.userInfo)
// }
// })
// }
// }
// })
wx.getSetting({
success(res) {
if (!res.authSetting['scope.userInfo']) {
wx.authorize({
scope: 'scope.userInfo',
success () {
// 已经授权，可以直接调用 getUserInfo 获取头像昵称
wx.getUserInfo({
success: function(res) {
console.warn(res.userInfo)
}
})
}
})
}
}
})
}
}
};
</script>
export default {
navigationBarTitleText: 'demo',
usingComponents: {
},
}
.red {
color: red;
}
<!--
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-01 10:56:38
* @FilePath: /myApp/src/pages/demo/index.vue
* @Description: 文件描述
-->
<template>
<div class="red">{{ str }}</div>
</template>
<script setup>
import '@tarojs/taro/html.css'
import { ref } from "vue";
import "./index.less";
// 定义响应式数据
const str = ref('Demo页面')
</script>
<script>
export default {
name: "demoPage",
};
</script>
export default {
navigationBarTitleText: '首页'
}
/**
* index页面样式
*/
.index {
padding: 20px;
.nut-button {
margin-bottom: 20px;
}
}
\ No newline at end of file
<!--
* @Date: 2025-06-28 10:33:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-01 11:13:13
* @FilePath: /myApp/src/pages/index/index.vue
* @Description: 文件描述
-->
<template>
<view class="index">
<nut-button type="primary" @click="onClick">按钮</nut-button>
<nut-toast v-model:visible="show" msg="你成功了" />
<View className="text-[#acc855] text-[100px]">Hello world!</View>
</view>
</template>
<script setup>
import Taro from '@tarojs/taro'
import '@tarojs/taro/html.css'
import { ref, onMounted } from 'vue'
import { useDidShow, useReady } from '@tarojs/taro'
import "./index.less";
const show = ref(false)
const onClick = () => {
show.value = true
}
// 生命周期钩子
useDidShow(() => {
console.warn('index onShow')
})
useReady(async () => {
console.warn('index onReady')
// 版本更新检查
if (!Taro.canIUse("getUpdateManager")) {
Taro.showModal({
title: "提示",
content: "当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试",
showCancel: false,
});
return;
}
// https://developers.weixin.qq.com/miniprogram/dev/api/base/update/UpdateManager.html
const updateManager = Taro.getUpdateManager();
updateManager.onCheckForUpdate((res) => {
// 请求完新版本信息的回调
if (res.hasUpdate) {
updateManager.onUpdateReady(function () {
Taro.showModal({
title: "更新提示",
content: "新版本已经准备好，是否重启应用？",
success: function (res) {
if (res.confirm) {
// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
updateManager.applyUpdate();
}
},
});
});
updateManager.onUpdateFailed(function () {
// 新版本下载失败
Taro.showModal({
title: "更新提示",
content: "新版本已上线，请删除当前小程序，重新搜索打开",
});
});
}
});
})
onMounted(() => {
console.warn('index mounted')
})
// 分享功能
wx.showShareMenu({
withShareTicket: true,
menus: ['shareAppMessage', 'shareTimeline']
})
</script>
<script>
import { getCurrentPageParam } from "@/utils/weapp";
export default {
name: "indexPage",
onHide () {
console.warn('index onHide')
},
onShareAppMessage() {
let params = getCurrentPageParam();
// 设置菜单中的转发按钮触发转发事件时的转发内容
var shareObj = {
title: "xxx", // 默认是小程序的名称(可以写slogan等)
path: `pages/detail/index?id=${params.id}&start_date=${params.start_date}&end_date=${params.end_date}&room_type=${params.room_type}`, // 默认是当前页面，必须是以'/'开头的完整路径
imageUrl: '', //自定义图片路径，可以是本地文件路径、代码包文件路径或者网络图片路径，支持PNG及JPG，不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
success: function (res) {
// 转发成功之后的回调
if (res.errMsg == 'shareAppMessage:ok') {
//
}
},
fail: function () {
// 转发失败之后的回调
if (res.errMsg == 'shareAppMessage:fail cancel') {
// 用户取消转发
} else if (res.errMsg == 'shareAppMessage:fail') {
// 转发失败，其中 detail message 为详细失败信息
}
},
complete: function () {
// 转发结束之后的回调（转发成不成功都会执行）
}
}
// 来自页面内的按钮的转发
// if (options.from == 'button') {
// var eData = options.target.dataset;
// // 此处可以修改 shareObj 中的内容
// shareObj.path = '/pages/goods/goods?goodId=' + eData.id;
// }
// 返回shareObj
return shareObj;
}
};
</script>
// https://pinia.esm.dev/introduction.html
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => {
return { count: 0 }
},
// could also be defined as
// state: () => ({ count: 0 })
actions: {
increment() {
this.count++
},
},
})
// You can even use a function (similar to a component setup()) to define a Store for more advanced use cases:
// export const useCounterStore = defineStore('counter', () => {
// const count = ref(0)
//
// function increment() {
// count.value++
// }
//
// return {count, increment}
// })
\ No newline at end of file
/*
* @Date: 2022-10-28 14:34:22
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-10-28 15:12:55
* @FilePath: /swx/src/stores/host.js
* @Description: 缓存主办方ID
*/
import { defineStore } from 'pinia'
export const hostStore = defineStore('host', {
state: () => {
return {
id: '',
join_id: ''
}
},
actions: {
add (id) {
this.id = id
},
addJoin (id) {
this.join_id = id
},
},
})
/*
* @Date: 2022-10-28 14:34:22
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-11-01 13:27:09
* @FilePath: /swx/src/stores/router.js
* @Description: 缓存路由信息
*/
import { defineStore } from 'pinia'
export const routerStore = defineStore('router', {
state: () => {
return {
url: '',
}
},
actions: {
add (path) {
this.url = path
},
remove () {
this.url = ''
},
},
})
/*
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2024-01-15 17:07:14
* @FilePath: /meihuaApp/src/utils/config.js
* @Description: 文件描述
*/
// TAG：服务器环境配置
// const BASE_URL = "https://oa-dev.onwall.cn"; // 测试服务器
const BASE_URL = "https://oa.onwall.cn"; // 正式服务器
export default BASE_URL
/*
* @Date: 2022-10-13 22:36:08
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2023-12-22 18:23:08
* @FilePath: /meihuaApp/src/utils/mixin.js
* @Description: 文件描述
*/
import { getSessionId, setSessionId, clearSessionId } from './request';
/**
* 全局mixin，提供sessionid管理功能
* 注意：sessionid现在由request.js自动管理，无需手动设置
*/
export default {
// 初始化设置
init: {
created () {
// sessionid现在由request.js的拦截器自动管理
// 这里可以添加其他初始化逻辑
}
}
};
// 导出sessionid管理工具函数，供其他组件使用
export { getSessionId, setSessionId, clearSessionId }
This diff is collapsed. Click to expand it.
/*
* @Date: 2022-09-19 14:11:06
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-01 11:17:49
* @FilePath: /myApp/src/utils/request.js
* @Description: 简单axios封装，后续按实际处理
*/
// import axios from 'axios'
import axios from 'axios-miniprogram';
import Taro from '@tarojs/taro'
// import { strExist } from './tools'
// import qs from 'Qs'
import { routerStore } from '@/stores/router'
// import { ProgressStart, ProgressEnd } from '@/components/axios-progress/progress';
// import store from '@/store'
// import { getToken } from '@/utils/auth'
import BASE_URL from './config';
/**
* 获取sessionid的工具函数
* @returns {string|null} sessionid或null
*/
const getSessionId = () => {
try {
return wx.getStorageSync("sessionid") || null;
} catch (error) {
console.error('获取sessionid失败:', error);
return null;
}
};
/**
* 设置sessionid的工具函数
* @param {string} sessionid - 要设置的sessionid
*/
const setSessionId = (sessionid) => {
try {
wx.setStorageSync("sessionid", sessionid);
} catch (error) {
console.error('设置sessionid失败:', error);
}
};
/**
* 清除sessionid的工具函数
*/
const clearSessionId = () => {
try {
wx.removeStorageSync("sessionid");
} catch (error) {
console.error('清除sessionid失败:', error);
}
};
// create an axios instance
const service = axios.create({
baseURL: BASE_URL, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
timeout: 5000, // request timeout
})
service.defaults.params = {
f: 'room',
client_id: '772428',
};
// request interceptor
service.interceptors.request.use(
config => {
// console.warn(config)
// console.warn(store)
/**
* 动态获取sessionid并设置到请求头
* 确保每个请求都带上最新的sessionid
*/
const sessionid = getSessionId();
if (sessionid) {
config.headers.cookie = sessionid;
}
/**
* POST PHP需要修改数据格式
* 序列化POST请求时需要屏蔽上传相关接口，上传相关接口序列化后报错
*/
// config.data = config.method === 'post' && !strExist(['a=upload', 'upload.qiniup.com'], config.url) ? qs.stringify(config.data) : config.data;
return config
},
error => {
// do something with request error
console.error(error, 'err') // for debug
return Promise.reject(error)
}
)
// response interceptor
service.interceptors.response.use(
/**
* If you want to get http information such as headers or status
* Please return response => response
*/
/**
* Determine the request status by custom code
* Here is just an example
* You can also judge the status by HTTP Status Code
*/
response => {
/**
* 检查响应头中是否有新的sessionid
* 如果有，则更新本地存储
*/
const setCookieHeader = response.headers['set-cookie'];
if (setCookieHeader) {
// 解析set-cookie头，提取sessionid
const sessionidMatch = setCookieHeader.match(/sessionid=([^;]+)/);
if (sessionidMatch && sessionidMatch[1]) {
setSessionId(sessionidMatch[1]);
}
}
// wx.hideLoading();
// const res = response.data
// // Toast.clear();
// // if the custom code is not 20000, it is judged as an error.
// if (res.code !== 100000) {
// // 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired;
// if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
// // to re-login
// // Toast.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
// // confirmButtonText: 'Re-Login',
// // cancelButtonText: 'Cancel',
// // type: 'warning'
// // }).then(() => {
// // // store.dispatch('user/resetToken').then(() => {
// // // location.reload()
// // // })
// // })
// } else {
// // Toast.fail({
// // message: res.message,
// // duration: 1.5 * 1000
// // })
// // Tips.error(res.message, false)
// }
// return Promise.reject(new Error(res.message || 'Error'))
// } else {
// return res
// }
/**
* 处理401未授权状态
* 清除本地sessionid并跳转到登录页
*/
if (response.data.code === 401) {
// 清除无效的sessionid
clearSessionId();
/**
* 未授权跳转登录页
* 授权完成后 返回当前页面
*/
setTimeout(() => {
Taro.navigateTo({
url: '../../pages/auth/index?url=' + routerStore().url
});
}, 1000);
}
return response
},
error => {
// Toast.clear();
console.error('err' + error) // for debug
// Toast.fail({
// message: error.message,
// duration: 1.5 * 1000
// })
return Promise.reject(error)
}
)
// 导出sessionid管理工具函数
export { getSessionId, setSessionId, clearSessionId };
export default service
/**
* 系统参数
*/
const DEFAULT_HOST_TYPE = ['首次参与', '老用户']; // 主办方默认用户类型
const DEFAULT_HOST_STATUS = ['跟踪', '引导']; // 主办方默认用户状态
export { DEFAULT_HOST_TYPE, DEFAULT_HOST_STATUS }
/*
* @Date: 2022-04-18 15:59:42
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-12-07 22:09:30
* @FilePath: /swx/src/utils/tools.js
* @Description: 文件描述
*/
import Taro from '@tarojs/taro'
import moment from '@/utils/moment.min.js'
// 格式化时间
const formatDate = (date) => {
return moment(date).format('YYYY-MM-DD HH:mm')
};
/**
* @description 判断浏览器属于平台
* @returns
*/
const wxInfo = () => {
let u = navigator.userAgent;
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
let uAgent = navigator.userAgent.toLowerCase();
let isTable = (uAgent.match(/MicroMessenger/i) == 'micromessenger') ? true : false;
let isMobile = window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i); // 是否手机端
let isWx = /micromessenger/i.test(navigator.userAgent); // 是否微信
let isWxPc = isWx && !isMobile; // PC端微信
return {
isAndroid,
isiOS,
isTable,
isWxPc
};
};
/**
* @description 判断多行省略文本
* @param {*} id 目标dom标签
* @returns
*/
const hasEllipsis = (id) => {
let oDiv = document.getElementById(id);
let flag = false;
if (oDiv.scrollHeight > oDiv.clientHeight) {
flag = true
}
return flag
}
/**
* @description 解析URL参数
* @param {*} url
* @returns
*/
const parseQueryString = url => {
var json = {};
var arr = url.indexOf('?') >= 0 ? url.substr(url.indexOf('?') + 1).split('&') : [];
arr.forEach(item => {
var tmp = item.split('=');
json[tmp[0]] = tmp[1];
});
return json;
}
/**
* 字符串包含字符数组中字符的状态
* @param {*} array 字符数组
* @param {*} str 字符串
* @returns 包含状态
*/
const strExist = (array, str) => {
const exist = array.filter(arr => {
if (str.indexOf(arr) >= 0) return str;
})
return exist.length > 0
}
const randomId = (n) => {
const charts = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'];
var res = '';
for (var i = 0; i < n; i++) {
undefined
var id = Math.ceil(Math.random() * 35);
res += charts[id];
}
return res;
}
/**
* 获取页面query参数
*/
const pageQuery = () => {
const instance = Taro.getCurrentInstance();
let $query = '';
$query = JSON.stringify(instance.router.params);
return JSON.parse($query)
}
export { formatDate, wxInfo, hasEllipsis, parseQueryString, strExist, randomId, pageQuery };
/*获取当前页url*/
const getCurrentPageUrl = () => {
let pages = getCurrentPages() //获取加载的页面
let currentPage = pages[pages.length - 1] //获取当前页面的对象
let url = currentPage.route //当前页面url
return url
}
/*获取当前页参数*/
const getCurrentPageParam = () => {
let pages = getCurrentPages() //获取加载的页面
let currentPage = pages[pages.length - 1] //获取当前页面的对象
let options = currentPage.options //如果要获取url中所带的参数可以查看options
return options
}
export {
getCurrentPageUrl,
getCurrentPageParam
}
/*
* @Date: 2025-06-30 13:27:50
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-06-30 13:27:56
* @FilePath: /myApp/tailwind.config.js
* @Description: 文件描述
*/
/** @type {import('tailwindcss').Config} */
module.exports = {
// 这里给出了一份 taro 通用示例，具体要根据你自己项目的目录结构进行配置
// 比如你使用 vue3 项目，你就需要把 vue 这个格式也包括进来
// 不在 content glob 表达式中包括的文件，在里面编写 tailwindcss class，是不会生成对应的 css 工具类的
content: ['./public/index.html', './src/**/*.{html,js,ts,jsx,tsx,vue}'],
theme: {
extend: {},
},
plugins: [],
corePlugins: {
// 小程序不需要 preflight，因为这主要是给 h5 的，如果你要同时开发多端，你应该使用 process.env.TARO_ENV 环境变量来控制它
preflight: false,
},
}
This diff could not be displayed because it is too large.