first

pages/login/components/EnvChangeTips.vue

@@ -0,0 +1,158 @@
+<!--
+  环境变量切换组件
+
+  @author terrfly
+  @site https://www.jeequan.com
+  @date 2022/04/12 10:14
+-->
+<template>
+  <view>
+    <!-- 当包含环境变量 && 不是生产环境时  -->
+    <view
+      class="login-test"
+      v-if="
+        vdata.currentEnvEnum &&
+        vdata.currentEnvEnum != appConfig.ENV_ENUM.PRODUCTION
+      "
+      ><text>{{ vdata.currentEnvEnum }}</text></view
+    >
+    <!-- 切换环境提示 -->
+    <uni-popup ref="uniPopupRef" :mask-click="false" :open="true">
+      <view class="uni-popup-dialog">
+        <image
+          @tap="uniClose"
+          class="uni-dialog-close"
+          src="/static/indexImg/del.svg"
+          mode="scaleToFill"
+        />
+        <view class="uni-dialog-button-box">
+          <view
+            class="uni-dialog-button"
+            style="border-bottom: 2rpx solid #e1e1e1"
+            @click="changeEnvFunc(appConfig.ENV_ENUM.DEVELOPMENT)"
+            ><text>开发环境</text></view
+          >
+          <view
+            class="uni-dialog-button"
+            style="border-bottom: 2rpx solid #e1e1e1"
+            @click="changeEnvFunc(appConfig.ENV_ENUM.TEST)"
+            ><text>测试环境</text></view
+          >
+          <view
+            class="uni-dialog-button"
+            style="border-bottom: 2rpx solid #e1e1e1"
+            @click="changeEnvFunc(appConfig.ENV_ENUM.DEMO)"
+            ><text>演示环境</text></view
+          >
+          <view
+            class="uni-dialog-button"
+            @click="changeEnvFunc(appConfig.ENV_ENUM.PRODUCTION)"
+            ><text>生产环境</text></view
+          >
+        </view>
+      </view>
+    </uni-popup>
+  </view>
+</template>
+<script setup>
+import { reactive, ref, onMounted } from 'vue'
+import appConfig from '@/config/appConfig.js'
+import envConfig from '@/env/config.js'
+import storageManage from '@/commons/utils/storageManage.js'
+import { $getSiteInfos } from '@/http/apiManager.js';
+
+const uniPopupRef = ref()
+
+// emit 
+const emit = defineEmits(['change'])
+
+const vdata = reactive({
+  currentEnvEnum: '', // 当前环境变量
+  count: 0, // 当前点击次数
+})
+
+onMounted(() => {
+  vdata.currentEnvEnum = storageManage.env()
+})
+
+// 父组件的点击事件
+function tapFunc() {
+  vdata.count++
+  if (vdata.count >= 10) {
+    vdata.count = 0
+    uniPopupRef.value.open()
+  }
+}
+
+// 改变环境函数
+function changeEnvFunc(envMode) {
+  vdata.currentEnvEnum = envMode //显示信息
+  envConfig.changeEnv(envMode) //更改请求包
+  storageManage.env(envMode) // 改变存储
+  
+  // 更改公司信息
+  $getSiteInfos().then( ( { bizData } ) => {
+  	storageManage.siteInfos(bizData)
+	
+	// 调起外层页面
+	emit("change")
+	
+  })
+  
+  uniPopupRef.value.close() //弹层关闭
+}
+// 关闭弹窗
+function uniClose() {
+  uniPopupRef.value.close()
+}
+defineExpose({ tapFunc })
+</script>
+
+<style lang="scss" scoped>
+.uni-popup-dialog {
+  position: relative;
+  box-sizing: border-box;
+  width: 500rpx;
+  height: 600rpx;
+  overflow: hidden;
+  border-radius: 30rpx;
+  background-color: #ffffff;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  .uni-dialog-close {
+    position: absolute;
+    top: 20rpx;
+    right: 20rpx;
+    width: 50rpx;
+    height: 50rpx;
+  }
+  .uni-dialog-button-box {
+    width: 100%;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-around;
+    flex-direction: column;
+    text-align: center;
+    padding: 0 40rpx;
+    .uni-dialog-button {
+      width: 100%;
+      height: 150rpx;
+      line-height: 150rpx;
+      text {
+        font-size: 40rpx;
+      }
+    }
+  }
+}
+
+.login-test {
+  position: absolute;
+  bottom: 70rpx;
+  width: 100%;
+  text-align: center;
+  text {
+    color: #666f80;
+  }
+}
+</style>