create-young-proj 0.3.0 → 0.5.0

package/template-uni-app/src/pages/my.vue

@@ -0,0 +1,29 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2023-07-18 17:53:43
+ * @LastEditTime: 2023-07-19 11:56:45
+ * @Description:
+-->
+<script lang="ts" setup>
+onLoad(() => {
+  uni.hideTabBar();
+});
+</script>
+<template>
+  <div>
+    <uni-nav-bar status-bar :border="false" title="个人中心" />
+    <young-tabbar-layout>
+      <h1 class="text-32">我是页面</h1>
+      <view class="uni-primary">主色</view>
+      <view class="uni-success">成功色</view>
+      <view class="uni-warning">警告色</view>
+      <view class="uni-error">错误色</view>
+
+
+      <uni-card title="基础卡片" sub-title="副标题" extra="额外信息"
+        thumbnail="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png">
+        <text>这是一个带头像和双标题的基础卡片，此示例展示了一个完整的卡片。</text>
+      </uni-card>
+    </young-tabbar-layout>
+  </div>
+</template>

package/template-uni-app/src/pages.json

@@ -0,0 +1,63 @@
+{
+  "lazyCodeLoading": "requiredComponents",
+  "pages": [
+    {
+      "path": "pages/index",
+      "style": {
+        "navigationBarTitleText": "demo",
+        "navigationBarBackgroundColor": "#E60012",
+        "navigationBarTextStyle": "white",
+        "navigationStyle": "custom"
+      }
+    },
+    {
+      "path": "pages/my",
+      "style": {
+        "navigationBarTitleText": "demo",
+        "navigationBarBackgroundColor": "#E60012",
+        "navigationBarTextStyle": "white",
+        "navigationStyle": "custom"
+      }
+    }
+  ],
+  "tabBar": {
+    "color": "#7A7E83",
+    "selectedColor": "#3cc51f",
+    "borderStyle": "black",
+    "backgroundColor": "#ffffff",
+    "list": [
+      {
+        "pagePath": "pages/index",
+        "text": "首页"
+      },
+      {
+        "pagePath": "pages/my",
+        "text": "我的"
+      }
+    ]
+  },
+  "globalStyle": {
+    "pageOrientation": "portrait",
+    "navigationBarTitleText": "demo",
+    "navigationBarTextStyle": "white",
+    "navigationBarBackgroundColor": "#0D0D0D",
+    "backgroundColor": "#F2EAE0",
+    "backgroundColorTop": "#F2EAE0",
+    "backgroundColorBottom": "#F4F5F6",
+    "mp-360": {
+      "navigationStyle": "custom"
+    },
+    "h5": {
+      "maxWidth": 1190,
+      "navigationBarTextStyle": "black",
+      "navigationBarBackgroundColor": "#FFFFFF"
+    }
+  },
+  "easycom": {
+    "autoscan": true,
+    "custom": {
+      "^young-(.*)": "@/components/young-$1/young-$1.vue",
+      "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"
+    }
+  }
+}

package/template-uni-app/src/store/index.ts

@@ -0,0 +1,16 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-07-18 11:21:07
+ * @LastEditTime: 2023-07-18 15:20:22
+ * @Description:
+ */
+import type { App } from 'vue';
+import { createPinia } from 'pinia';
+
+export function setupStore(app: App) {
+  const store = createPinia();
+  app.use(store);
+}
+
+export * from './local';
+export * from './system';

package/template-uni-app/src/store/local/index.ts

@@ -0,0 +1,40 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-07-18 15:01:00
+ * @LastEditTime: 2023-07-19 16:50:39
+ * @Description:
+ */
+import { randomId } from '@bluesyoung/utils';
+
+export type LocationInfo = {
+  longitude: string | number;
+  latitude: string | number;
+  city?: string;
+  timer: number;
+};
+export type NavInfo = {
+  /**
+   * 系统状态栏高度
+   */
+  statusBarH: number;
+  /**
+   * 自定义导航栏高度 = 胶囊下距离 + 胶囊上距离 - 状态栏高度
+   */
+  customBarH: number;
+  /**
+   * 底部安全距离
+   */
+  safeBottom: number;
+};
+
+export const getLocationInfo = () => uni.getStorageSync(YoungStorageKeys.位置信息) as LocationInfo;
+export const setLocationInfo = (v: LocationInfo) =>
+  uni.setStorageSync(YoungStorageKeys.位置信息, v);
+export const removeLocationInfo = () => uni.removeStorageSync(YoungStorageKeys.位置信息);
+
+export const getUuid = () => uni.getStorageSync(YoungStorageKeys.唯一标识) as string;
+export const setUuid = () =>
+  uni.setStorageSync(YoungStorageKeys.唯一标识, randomId() + randomId() + randomId() + randomId());
+
+export const setNavbarHeihgt = (v: NavInfo) => uni.setStorageSync(YoungStorageKeys.导航栏高度, v);
+export const getNavbarHeihgt = () => uni.getStorageSync(YoungStorageKeys.导航栏高度) as NavInfo;

package/template-uni-app/src/store/system.ts

@@ -0,0 +1,12 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-07-18 15:20:04
+ * @LastEditTime: 2023-07-18 15:20:04
+ * @Description:
+ */
+import { defineStore } from 'pinia';
+
+export const useSystemInfo = defineStore('useSystemInfo', () => {
+  const systemInfo = ref<UniApp.GetSystemInfoResult>();
+  return { systemInfo };
+});

package/template-uni-app/src/uni.scss

@@ -0,0 +1,76 @@
+/**
+ * 这里是uni-app内置的常用样式变量
+ *
+ * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
+ * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
+ *
+ */
+
+/**
+ * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
+ *
+ * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
+ */
+
+/* 颜色变量 */
+
+/* 行为相关颜色 */
+$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:24rpx;
+$uni-font-size-base:28rpx;
+$uni-font-size-lg:32rpx;
+
+/* 图片尺寸 */
+$uni-img-size-sm:40rpx;
+$uni-img-size-base:52rpx;
+$uni-img-size-lg:80rpx;
+
+/* Border Radius */
+$uni-border-radius-sm: 4rpx;
+$uni-border-radius-base: 6rpx;
+$uni-border-radius-lg: 12rpx;
+$uni-border-radius-circle: 50%;
+
+/* 水平间距 */
+$uni-spacing-row-sm: 10px;
+$uni-spacing-row-base: 20rpx;
+$uni-spacing-row-lg: 30rpx;
+
+/* 垂直间距 */
+$uni-spacing-col-sm: 8rpx;
+$uni-spacing-col-base: 16rpx;
+$uni-spacing-col-lg: 24rpx;
+
+/* 透明度 */
+$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
+
+/* 文章场景相关 */
+$uni-color-title: #2C405A; // 文章标题颜色
+$uni-font-size-title:40rpx;
+$uni-color-subtitle: #555555; // 二级标题颜色
+$uni-font-size-subtitle:36rpx;
+$uni-color-paragraph: #3F536E; // 文章段落颜色
+$uni-font-size-paragraph:30rpx;

package/template-uni-app/src/utils/auth.ts

@@ -0,0 +1,125 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-07-18 14:28:16
+ * @LastEditTime: 2023-07-19 16:51:04
+ * @Description: 权限相关
+ */
+/**
+ * 获取微信授权码
+ */
+export const getWxCode = async () =>
+  new Promise<string>((resolve, reject) => {
+    uni.login({
+      provider: 'weixin',
+      success: (res) => {
+        if (res.errMsg === 'login:ok') {
+          resolve(res.code);
+        } else {
+          reject('wechat auth fail');
+        }
+      },
+      fail: () => {
+        reject('wechat auth fail');
+      },
+    });
+  });
+
+/**
+ * 定位
+ */
+export const locate = (cancelback = true) =>
+  new Promise<UniApp.GetLocationSuccess & { timer?: number }>((_resolve, _reject) => {
+    const position = getLocationInfo();
+    // 系统 getLocation 30s 获取一次  这里延续到 60s
+    if (new Date().getTime() - position.timer < 1000 * 60) {
+      setLocationInfo(position);
+      _resolve(position as unknown as UniApp.GetLocationSuccess);
+    } else {
+      uni.getLocation({
+        type: 'gcj02',
+        success: (res) => {
+          setLocationInfo({
+            latitude: res.latitude,
+            longitude: res.longitude,
+            timer: Date.now(),
+          });
+
+          console.log(res, 'location');
+          _resolve(res);
+        },
+        fail: (res: UniApp.GetLocationSuccess & { errMsg: string }) => {
+          console.log(res, 'location');
+          if (cancelback) {
+            _reject(res);
+          } else {
+            _resolve(position as unknown as UniApp.GetLocationSuccess);
+          }
+        },
+      });
+    }
+  });
+
+/**
+ * 授权定位
+ * @param {boolean} cancelback  取消授权时是否有回调值
+ */
+export const authLocation = async (cancelback = true, isShowModal = true) =>
+  new Promise<UniApp.GetLocationSuccess>(async (resolve, reject) => {
+    uni.getSetting({
+      withSubscriptions: true,
+      success: async (conf) => {
+        if (conf.authSetting['scope.userLocation']) {
+          // 同意过定位授权
+          const position = await locate();
+          uni.$emit(AuthLocationEvents.同意授权, true);
+          resolve(position);
+        } else {
+          try {
+            const position = await locate();
+            uni.$emit(AuthLocationEvents.同意授权, true);
+            resolve(position);
+          } catch (error) {
+            console.log(error);
+            if (isShowModal) {
+              // 是否显示弹窗
+              showModal({
+                title: '获取位置时发生异常，您可点击小程序右上角-设置-允许获取位置',
+                confirmText: '去设置',
+                success: (res) => {
+                  if (res.confirm) {
+                    uni.openSetting({
+                      success: async (e) => {
+                        console.log(
+                          e.authSetting['scope.userLocation'],
+                          `e.authSetting['scope.userLocation']`,
+                        );
+                        if (e.authSetting['scope.userLocation']) {
+                          const position = await locate();
+                          resolve(position);
+                        } else {
+                          reject(false);
+                        }
+                      },
+                    });
+                  } else {
+                    removeLocationInfo();
+                    cancelback && uni.$emit(AuthLocationEvents.启用授权, false);
+                    reject(false);
+                  }
+                },
+                fail: () => {
+                  reject(false);
+                },
+              });
+            } else {
+              reject(false);
+            }
+          }
+        }
+      },
+      fail: (conf) => {
+        uni.$emit(AuthLocationEvents.启用授权);
+        reject(false);
+      },
+    });
+  });

package/template-uni-app/src/utils/index.ts

@@ -0,0 +1,11 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-07-18 14:12:16
+ * @LastEditTime: 2023-07-18 15:30:03
+ * @Description:
+ */
+export * from './modal';
+export * from './auth';
+export * from './map';
+export * from './system';
+export * from './route';

package/template-uni-app/src/utils/map.ts

@@ -0,0 +1,97 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-07-18 14:29:41
+ * @LastEditTime: 2023-07-19 16:51:26
+ * @Description: 地图相关(基于腾讯地图)
+ */
+export type TxLocationSearchRes = {
+  address: string;
+  title: string;
+  _distance: number;
+  id: string;
+  location: {
+    lat: number;
+    lng: number;
+  };
+};
+
+export type TxLocationSearch = {
+  /**
+   * 分页信息
+   */
+  page_size: number;
+  page_index: number;
+  /**
+   * 搜索关键字
+   */
+  keyword: string;
+
+  /**
+   * 经纬度
+   */
+  latitude: number;
+  longitude: number;
+};
+
+/**
+ * 地点搜索
+ */
+export const searchLoaction = (args: TxLocationSearch) => {
+  const { page_size, page_index, keyword, latitude, longitude } = args;
+
+  return new Promise<TxLocationSearchRes[]>((resolve, reject): void => {
+    uni.request({
+      url: `https://apis.map.qq.com/ws/place/v1/search?boundary=nearby(${latitude},${longitude},1000)${keyword ? `&keyword=${keyword}` : ''
+        }&page_size=${page_size}&page_index=${page_index}&key=${getMapApiKey()}`,
+      success: (res) => {
+        resolve((res.data as unknown as { data: TxLocationSearchRes[] }).data);
+      },
+      fail: (err) => {
+        console.log(err);
+        reject();
+      },
+      complete: (err) => {
+        console.log(err);
+        reject();
+      },
+    });
+  });
+};
+
+export type GeoCoderRes = {
+  province_code: string;
+  city_code: string;
+  city: string;
+  province: string;
+  location: {
+    lat: number;
+    lng: number;
+  };
+};
+
+/**
+ * 逆地址解析（坐标位置描述）
+ */
+export const geocoderLocation = (latitude: number, longitude: number) => {
+  return new Promise<GeoCoderRes>((resolve, reject): void => {
+    uni.request({
+      url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${latitude},${longitude}&key=${getMapApiKey()}&get_poi=1`,
+      success: (res) => {
+        const ad_info = (res.data as any).result.ad_info;
+        resolve({
+          ...ad_info,
+          province_code: ad_info.adcode.slice(0, 2),
+          city_code: ad_info.adcode.slice(0, 4),
+        });
+      },
+      fail: (err) => {
+        console.log(err);
+        reject();
+      },
+      complete: (err) => {
+        console.log(err);
+        reject();
+      },
+    });
+  });
+};

package/template-uni-app/src/utils/modal.ts

@@ -0,0 +1,98 @@
+/*
+ * @Author: zhangyang
+ * @Date: 2023-07-18 14:12:25
+ * @LastEditTime: 2023-07-18 14:24:22
+ * @Description: ui 交互，弹窗之类的
+ */
+import { sleep } from '@bluesyoung/utils';
+
+let loadingCount = 0;
+
+/**
+ * 显示loading
+ * @param mask - 是否显示遮罩
+ * @param title - 提示文本
+ */
+export function showLoading(title = '加载中...', mask = true) {
+  loadingCount++;
+  uni.showLoading({
+    mask,
+    title,
+  });
+}
+
+/**
+ * 隐藏loading
+ */
+export function hideLoading() {
+  --loadingCount === 0 && uni.hideLoading();
+}
+
+/**
+ * 展示 toast
+ */
+export function showToast(options?: UniApp.ShowToastOptions) {
+  const { icon = 'none', mask = false } = options || {};
+
+  uni.showToast({
+    icon,
+    mask,
+    ...options,
+  });
+}
+
+let hasModel = false;
+const modalPage = new Set<string>();
+/**
+ * 显示弹窗
+ * ! 全局一次只展示一个弹窗，其他的往后排
+ */
+export async function showModal(options: UniApp.ShowModalOptions) {
+  const page = getCurrentPages();
+  const route = page[page.length - 1].route || '';
+  if (modalPage.has(route)) {
+    hasModel = true;
+  } else {
+    hasModel = false;
+    modalPage.add(route);
+  }
+  const { title = '提示', showCancel = true, complete } = options;
+  while (hasModel) {
+    await sleep(0.5);
+  }
+  return new Promise((resolve, reject) => {
+    hasModel = true;
+    uni.showModal({
+      title,
+      showCancel,
+      success(res) {
+        hasModel = false;
+        modalPage.delete(route);
+        if (res.confirm) {
+          resolve(res);
+        } else if (res.cancel) {
+          reject(res);
+        }
+      },
+      fail(err) {
+        hasModel = false;
+        modalPage.delete(route);
+        reject(err);
+      },
+      ...options,
+      complete: (res) => {
+        hasModel = false;
+        modalPage.delete(route);
+        complete?.(res);
+      },
+    });
+  });
+}
+
+/**
+ * 显示错误弹窗 只有确定按钮
+ * @param errMsg - 错误信息
+ */
+export function showErrorModal(errMsg: string) {
+  return showModal({ content: errMsg, showCancel: false });
+}