封装弹窗组件default和toast类型

.prettierrc

@@ -0,0 +1,4 @@
+{
+  "semi": true,
+  "endOfLine": "auto"
+}

.vscode/settings.json

@@ -0,0 +1,18 @@
+{
+  "editor.formatOnSave": true,
+  "[vue]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}

App.vue

@@ -1,32 +1,40 @@
 <script>
-	export default {
-		onLaunch: function() {
-			console.warn('当前组件仅支持 uni_modules 目录结构 ，请升级 HBuilderX 到 3.1.0 版本以上！')
-			console.log('App Launch')
-		},
-		onShow: function() {
-			console.log('App Show')
-		},
-		onHide: function() {
-			console.log('App Hide')
-		}
-	}
+import { mapActions } from "vuex";
+export default {
+  methods: {
+    ...mapActions("demo", ["getData"]),
+  },
+  onLaunch: function () {
+    console.log("App Launch");
+  },
+  onShow: function () {
+    console.log("App Show");
+  },
+  onHide: function () {
+    console.log("App Hide");
+  },
+  mounted() {
+    this.getData().then((res) => {
+      console.log(res);
+    });
+  },
+};
 </script>
 
 <style lang="scss">
-	/*每个页面公共css */
-	@import '@/uni_modules/uni-scss/index.scss';
-	/* #ifndef APP-NVUE */
-	@import '@/static/customicons.css';
-	// 设置整个项目的背景色
-	page {
-		background-color: #f5f5f5;
-	}
-
-	/* #endif */
-	.example-info {
-		font-size: 14px;
-		color: #333;
-		padding: 10px;
-	}
+/*每个页面公共css */
+// @import "@/uni_modules/uni-scss/index.scss";
+// 设置整个项目的样式
+page {
+  background-color: #f9fafb;
+  * {
+    box-sizing: border-box;
+  }
+  .red {
+    color: $textColorRed;
+  }
+  .green {
+    color: $defaultColor;
+  }
+}
 </style>

components/seiminModel/seiminModel.vue

@@ -0,0 +1,145 @@
+<!--
+ * @Author: 廖明明
+ * @Date: 2022-04-01 17:11:19
+ * @LastEditors: 廖明明
+ * @LastEditTime: 2022-04-02 17:03:14
+ * @Description: 自定义弹窗组件
+-->
+<template>
+  <view class="seiminModel seiminModel_mask" v-if="opts.isVisible">
+    <view
+      class="seiminModel_container animate__animated animate__fadeIn animate__faster"
+    >
+      <view class="seiminModel_header">{{ opts.title }}</view>
+      <view class="seiminModel_content" v-html="opts.content"></view>
+      <view class="seiminModel_footer">
+        <view
+          class="seiminModel_footer__btn"
+          v-for="(btn, i) in opts.btns"
+          :style="{
+            flex: btn.flex,
+            color: btn.textColor,
+          }"
+          @click="btn.click($event)"
+          :key="i"
+          >{{ btn.name }}</view
+        >
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "seiminModel",
+  data() {
+    return {
+      // 配置项
+      opts: {},
+    };
+  },
+  methods: {
+    // 显示弹窗
+    show(args = {}) {
+      // 默认配置项
+      let defaultOptions = {
+        skin: "default", //弹窗风格(default|toast|)
+        isVisible: false, //是否显示弹窗
+        title: "提示", //标题
+        content: "", //内容
+        btns: [
+          { name: "取消", textColor: "#666", flex: 1, click: this.close },
+          { name: "确定", textColor: "#666", flex: 1, click: this.close },
+        ], //弹窗按钮
+      };
+      // 根据弹窗风格修改默认配置项
+      switch (args.skin) {
+        case "toast":
+          defaultOptions.btns = [
+            {
+              name: "知道了",
+              textColor: "#49b856",
+              flex: 1,
+              click: this.close,
+            },
+          ];
+          break;
+      }
+      // 合并配置
+      this.opts = Object.assign({}, defaultOptions, args, {
+        isVisible: true,
+      });
+    },
+    // 关闭弹窗
+    close() {
+      this.opts.isVisible = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.seiminModel {
+  font-size: 36rpx;
+  color: #000;
+  line-height: 50rpx;
+  text-align: center;
+  &.seiminModel_mask {
+    background-color: rgba(0, 0, 0, 0.5);
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    margin: auto;
+    @include flex(center, center);
+    .seiminModel_container {
+      width: 560rpx;
+      border-radius: 8rpx;
+      background-color: #fff;
+      display: flex;
+      flex-direction: column;
+      align-content: center;
+      .seiminModel_header {
+        height: 100rpx;
+        @include flex(center, center);
+      }
+      .seiminModel_content {
+        flex: 1;
+        background-color: #f9fafb;
+        margin: 0 36rpx 25rpx;
+        border: 1px solid #e5e9ed;
+        color: #333;
+        padding: 76rpx 24rpx;
+        @include numbersAndLettersNoWrap;
+        .red {
+          color: $textColorRed;
+        }
+        .green {
+          color: $defaultColor;
+        }
+      }
+      .seiminModel_footer {
+        border-top: 1px solid #e5e5e5;
+        height: 100rpx;
+        color: #666;
+        @include flex(center, center);
+        .seiminModel_footer__btn {
+          height: 100%;
+          @include flex(center, center);
+          position: relative;
+          &::after {
+            content: "";
+            height: 86rpx;
+            position: absolute;
+            width: 1px;
+            bottom: 0;
+            right: 0;
+            background-color: #dde1e5;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

main.js

@@ -1,20 +1,32 @@
-
 // #ifndef VUE3
 import Vue from 'vue'
 import App from './App'
+// 引入vuex配置
+import store from './store'
+// 引入自定义全局组件
+import seiminModel from './components/seiminModel/seiminModel.vue'
+Vue.component('seiminModel', seiminModel)
+// 引入request配置
+import {
+  request
+} from './request';
+Vue.prototype.$request = request
 
 Vue.config.productionTip = false
 
 App.mpType = 'app'
 
 const app = new Vue({
-    ...App
+  store,
+  ...App
 })
 app.$mount()
 // #endif
 
 // #ifdef VUE3
-import { createSSRApp } from 'vue'
+import {
+  createSSRApp
+} from 'vue'
 import App from './App.vue'
 export function createApp() {
   const app = createSSRApp(App)
@@ -22,4 +34,4 @@ export function createApp() {
     app
   }
 }
-// #endif
+// #endif

package-lock.json

@@ -0,0 +1,28 @@
+{
+  "name": "zy-pda",
+  "version": "1.0.0",
+  "lockfileVersion": 2,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "zy-pda",
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "animate.css": "^4.1.1"
+      }
+    },
+    "node_modules/animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmmirror.com/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+    }
+  },
+  "dependencies": {
+    "animate.css": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmmirror.com/animate.css/-/animate.css-4.1.1.tgz",
+      "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="
+    }
+  }
+}

package.json

@@ -0,0 +1,19 @@
+{
+  "name": "zy-pda",
+  "version": "1.0.0",
+  "description": "",
+  "main": "main.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "http://git.dashitech.com/seimin/zy-pda.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "dependencies": {
+    "animate.css": "^4.1.1"
+  }
+}

pages/index/index.vue

@@ -1,29 +1,25 @@
 <template>
-	<view class="container">
-		
-		<view class="intro">本项目已包含uni ui组件，无需import和注册，可直接使用。在代码区键入字母u，即可通过代码助手列出所有可用组件。光标置于组件名称处按F1，即可查看组件文档。</view>
-		<text class="intro">详见：</text>
-		<uni-link :href="href" :text="href"></uni-link>
-	</view>
+  <view class="container">
+    这是测试的一行文字
+    <button type="default" @click="clickHandler()">点击弹窗</button>
+    <seiminModel ref="seiminModel"></seiminModel>
+  </view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				href: 'https://uniapp.dcloud.io/component/README?id=uniui'
-			}
-		},
-		methods: {
-
-		}
-	}
+export default {
+  data() {
+    return {};
+  },
+  methods: {
+    clickHandler() {
+      this.$refs.seiminModel.show({
+        skin: "toast",
+        content: "你还好吗？",
+      });
+    },
+  },
+};
 </script>
 
-<style>
-	.container {
-		padding: 20px;
-		font-size: 14px;
-		line-height: 24px;
-	}
-</style>
+<style></style>

request/config.js

@@ -0,0 +1,18 @@
+/*
+ * @Author: 廖明明
+ * @Date: 2022-03-31 15:12:00
+ * @LastEditors: 廖明明
+ * @LastEditTime: 2022-04-02 14:29:15
+ * @Description: 后端服务配置文件
+ */
+//配置项
+const config = {
+  baseUrl: "", // 后端服务地址
+};
+// 后端服务地址
+const baseUrls = {
+  development: "http://itsmpoc.dashitech.com/service", //开发环境
+  production: "http://itsmpoc.dashitech.com/service", //生产环境
+};
+config.baseUrl = baseUrls[process.env.NODE_ENV];
+export default config;

request/demo.js

@@ -0,0 +1,6 @@
+import { request } from "./index.js";
+// 测试接口
+export const reqGetData = () =>
+  request({
+    url: "/auth/getSysName",
+  });

request/index.js

@@ -0,0 +1,39 @@
+/*
+ * @Author: 廖明明
+ * @Date: 2022-03-30 15:54:48
+ * @LastEditors: 廖明明
+ * @LastEditTime: 2022-04-02 14:27:53
+ * @Description:后端服务入口文件
+ */
+import config from "./config.js";
+/**
+ * @description:封装请求函数
+ * @param {string} url 接口地址，以”/“开头
+ * @param {object} data 请求参数
+ * @param {string} method 请求类型
+ * @param {object} header 请求头
+ * @return {promise}
+ * @author: 廖明明
+ */
+export function request({ url = "", data = {}, method = "GET", header = {} }) {
+  return new Promise((resolve) => {
+    uni.request({
+      method,
+      url: config.baseUrl + url,
+      data,
+      header,
+      dataType: "json",
+      success(res) {
+        console.log(res);
+        resolve(res.data);
+      },
+      fail(err) {
+        console.log(err);
+        uni.showToast({
+          icon: "none",
+          title: "请求失败！",
+        });
+      },
+    });
+  });
+}

store/index.js

@@ -0,0 +1,31 @@
+/*
+ * @Author: 廖明明
+ * @Date: 2022-03-31 16:36:19
+ * @LastEditors: 廖明明
+ * @LastEditTime: 2022-04-01 17:45:03
+ * @Description:vuex入口文件
+ */
+import Vue from "vue";
+import Vuex from "vuex";
+
+import demo from "@/store/modules/demo";
+
+Vue.use(Vuex);
+
+const myPlugin = (store) => {
+  // 当 store 初始化后调用
+  let vuexStorage = uni.getStorageSync("vuexStorage");
+  if (vuexStorage) {
+    store.replaceState(vuexStorage);
+  }
+  store.subscribe((mutation, state) => {
+    uni.setStorageSync("vuexStorage", state);
+  });
+};
+
+export default new Vuex.Store({
+  modules: {
+    demo,
+  },
+  plugins: [myPlugin],
+});

store/modules/demo.js

@@ -0,0 +1,25 @@
+import { reqGetData } from "@/request/demo.js";
+const state = {
+  dataList: [],
+};
+const getters = {};
+const mutations = {
+  // 获取三级导航
+  getData(state, dataList) {
+    state.dataList = dataList;
+  },
+};
+const actions = {
+  async getData({ commit, state }) {
+    console.log(state);
+    let result = await reqGetData();
+    commit("getData", result.data);
+  },
+};
+export default {
+  namespaced: true,
+  state,
+  getters,
+  mutations,
+  actions,
+};

uni.scss

@@ -1 +1,24 @@
-@import '@/uni_modules/uni-scss/variables.scss';
+@import "@/uni_modules/uni-scss/variables.scss";
+@import "animate.css/animate.css";
+// 主题色
+$defaultColor: #49b856;
+// 红色
+$textColorRed: #ff3b53;
+//数字字母不换行
+@mixin numbersAndLettersNoWrap {
+  word-break: break-all;
+}
+//flex布局
+// $justifyContent 主轴对齐方式
+// $alignItem 交叉轴对齐方式
+// $flexDirection 方向
+@mixin flex(
+  $justifyContent: flex-start,
+  $alignItem: stretch,
+  $flexDirection: row
+) {
+  display: flex;
+  justify-content: $justifyContent;
+  align-items: $alignItem;
+  flex-direction: $flexDirection;
+}