feat: 添加PC端详情页

CHANGELOG.md

@@ -1,4 +1,4 @@
-# 0.1.0 (2021-10-20)
+# 0.1.0 (2021-10-26)
 
 ### 🌟 新功能
 范围|描述|commitId
@@ -51,6 +51,7 @@
  - | 添加 环境变量，动态控制webview project的path | 8a40481
  - | 添加子任务插件 子项目插件 | 7bda7e2
  - | 添加时间轴上下滚动 | 2b81bbc
+ - | 添加登录，修改密码页面 | 8d53e63
  - | 添加顶部导航栏和详情页 | 2a63485
  - | 添加项目排序 | a0b491b
  - | 点击日历日期查询项目列表 | c458385

public/index.html

@@ -25,4 +25,13 @@
         <!-- built files will be auto injected -->
     </body>
 
+      <script>
+        document.addEventListener('UniAppJSBridgeReady', function() {
+        uni.webView.getEnv(function(res) {
+            console.log('当前环境：' + JSON.stringify(res));
+        });
+        // uni.webView.navigateTo(...)
+        });
+    </script>
+
 </html>

src/App.vue

@@ -26,6 +26,13 @@ export default {
     }
     /* #endif */
     this.initSocket();
+
+    // 判断是在pc端还是移动端
+    if (navigator.userAgent.match(/(iPhone|Android)/i)) {
+      this.setIsPC(false);
+    } else {
+      this.setIsPC(true);
+    }
   },
 
   computed: {
@@ -37,7 +44,7 @@ export default {
     ...mapActions('user', ['getToken']),
     ...mapActions('socket', ['initSocket']),
     ...mapMutations(['setNetworkConnected', 'setSystemInfo']),
-    ...mapMutations('user', ['setToken', 'setUser']),
+    ...mapMutations('user', ['setToken', 'setUser', 'setIsPC']),
 
     // 检查网络状态 设置store里的网络状态变量
     // 网络连接 且 不是2g 不是3g 才算是网络连接; 否则不是 将启用本地存储

src/apis/wbs.js

@@ -1,7 +1,8 @@
 const install = (Vue, vm) => {
   vm.$u.api = { ...vm.$u.api } || {};
   // 导入wbs
-  vm.$u.api.import = formData => vm.$t.chooseAndUpload(`${uni.$t.domain}/wbs`, formData);
+  // vm.$u.api.import = formData => vm.$t.chooseAndUpload(`${uni.$t.domain}/wbs`, formData);
+  vm.$u.api.import = formData => vm.$t.chooseAndUpload(`https://test.tall.wiki/gateway/sports/wbs`, formData);
 };
 
 export default { install };

src/components/change-password/change-password.vue

@@ -20,11 +20,11 @@
         <view class="mt-1 text-sm text-red-500" v-if="showPasswordNewTips">{{ passwordNewTips }}</view>
       </u-form>
 
-      <view class="flex justify-end my-8 text-sm">
+      <view class="flex justify-end mt-8 text-sm" v-if="showBack">
         <text class="text-blue cursor-pointer" @click="$emit('changeShow')">返回登录</text>
       </view>
 
-      <u-button @click="submit" type="primary" class="btn">确认修改</u-button>
+      <u-button @click="submit" type="primary" class="btn mt-8">确认修改</u-button>
     </view>
   </view>
 </template>
@@ -33,6 +33,8 @@
 import { mapMutations } from 'vuex';
 
 export default {
+  props: { showBack: { type: Boolean, default: true } },
+
   data() {
     return {
       border: true,

src/config/message.js

@@ -0,0 +1,23 @@
+export default {
+  // 收到PC端打开详情页需要的消息
+  onMessage() {
+    console.log('收到消息');
+    let result = null;
+    window.addEventListener(
+      'message',
+      function (e) {
+        console.log('父-接受：', e.data);
+        // if (e.source !== frame.src) return; // 来源
+        const { event } = e.data;
+        console.log('event: ', event);
+        result = event;
+
+        // if (event === 'openDetail') {
+        //   location.reload();
+        // }
+      },
+      false,
+    );
+    return result;
+  },
+};

src/pages/index/index.vue

@@ -46,6 +46,7 @@ export default {
     if (!this.token) return;
     this.getProjects();
     this.handleFindPoint();
+    this.setTaskDetailUrl('');
   },
 
   onReady() {
@@ -53,7 +54,7 @@ export default {
   },
 
   methods: {
-    ...mapMutations('project', ['setProjects', 'setDotList']),
+    ...mapMutations('project', ['setProjects', 'setDotList', 'setTaskDetailUrl']),
 
     // 获取项目列表
     getProjects(start = this.$moment().startOf('day').valueOf(), end = this.$moment().endOf('day').valueOf()) {

src/pages/project-webview/project-webview.vue

@@ -3,16 +3,32 @@
 </template>
 
 <script>
+import { mapState, mapMutations } from 'vuex';
 export default {
   data() {
-    return { src: '' };
+    return { src: '', urlOptions: {} };
   },
 
   onLoad(options) {
-    console.log('options: ', options);
     if (!options) {
       this.$t.ui.showModal('缺少参数, 请返回重试');
     } else {
+      this.serUrl(options);
+    }
+
+    /* #ifdef H5 */
+    this.getPostMessage();
+    /* #endif */
+  },
+
+  computed: mapState('user', ['isPC']),
+
+  methods: {
+    ...mapMutations('project', ['setTaskDetailUrl']),
+
+    // 设置路径
+    serUrl(options) {
+      this.urlOptions = options;
       const { p, u, pname, url } = options;
       if (pname) {
         uni.setNavigationBarTitle({ title: pname });
@@ -27,9 +43,30 @@ export default {
         return;
       }
 
-      const baseUrl = process.env.VUE_APP_PROJECT_PATH;
+      // const baseUrl = process.env.VUE_APP_PROJECT_PATH;
+      const baseUrl = 'http://localhost:9000/tall-project';
       this.src = `${baseUrl}/${this.$t.app.version}/#/?u=${u}&p=${p}&url=${url}&pname=${pname}`;
-    }
+    },
+
+    // 接收消息
+    getPostMessage() {
+      const that = this;
+
+      window.addEventListener(
+        'message',
+        function (e) {
+          if (e.data.event === 'openDetail') {
+            if (that.isPC) {
+              that.setTaskDetailUrl(e.data.data);
+            } else {
+              const { p, u, pname, url } = that.urlOptions;
+              that.src = `${e.data.data}/${that.$t.app.version}/#/?u=${u}&p=${p}&url=${url}&pname=${pname}`;
+            }
+          }
+        },
+        false,
+      );
+    },
   },
 };
 </script>

src/pages/right-window/right-window.vue

@@ -2,11 +2,11 @@
   <view class="h-full bg-gray-50">
     <view class="w-full h-full" v-if="!user || !token">
       <login v-if="!show" @changeShow="show = true"></login>
-      <change-password v-if="show" @changeShow="show = false"></change-password>
+      <change-password v-else @changeShow="show = false"></change-password>
     </view>
-    <view v-else>
-      <view v-if="project && project.id">{{ project.name }}</view>
-      <view v-else>详情页</view>
+    <view v-else class="w-full h-full">
+      <iframe v-if="!show" id="iframe" :src="src" frameborder="0"></iframe>
+      <change-password v-else @changeShow="show = false" :showBack="false"></change-password>
     </view>
   </view>
 </template>
@@ -16,16 +16,23 @@ import { mapState } from 'vuex';
 
 export default {
   data() {
-    return { show: false };
+    return { show: false, src: '' };
   },
 
   computed: {
-    ...mapState('project', ['project']),
+    ...mapState('project', ['project', 'taskDetailUrl']),
     ...mapState('user', ['user', 'token']),
   },
 
-  onLoad(options) {
-    console.log('options: ', options);
+  watch: {
+    taskDetailUrl(val) {
+      if (val && val.split('?')[0] === 'change-password') {
+        this.show = true;
+      } else {
+        this.src = val;
+        this.show = false;
+      }
+    },
   },
 };
 </script>

src/store/project/mutations.js

@@ -57,6 +57,15 @@ const mutations = {
   setDotList(state, data) {
     state.dotList = data;
   },
+
+  /**
+   * 设置任务详情页路径
+   * @param { object } state
+   * @param { string } data
+   */
+  setTaskDetailUrl(state, data) {
+    state.taskDetailUrl = data;
+  },
 };
 
 export default mutations;

src/store/project/state.js

@@ -3,6 +3,7 @@ const state = {
   project: { name: '加载中...' }, // 当前项目信息
   projects: [], // 项目列表
   dotList: [], // 小红点
+  taskDetailUrl: '', // 任务详情页路径
 };
 
 export default state;

src/store/user/mutations.js

@@ -28,6 +28,15 @@ const mutations = {
   setFirstInter(state, show) {
     state.firstInter = show;
   },
+
+  /**
+   * 设置是不是PC端
+   * @param {object} state
+   * @param {boolean} show 项目列表
+   */
+  setIsPC(state, show) {
+    state.isPC = show;
+  },
 };
 
 export default mutations;

src/store/user/state.js

@@ -2,5 +2,6 @@ const state = {
   token: '',
   user: null,
   firstInter: false,
+  isPC: false, // 是不是PC端
 };
 export default state;

src/utils/tall.js

@@ -7,6 +7,7 @@ import ui from '@/utils/ui.js';
 import upload from '@/utils/upload.js';
 import user from '@/config/user.js';
 import zIndex from '@/config/zIndex.js';
+import message from '@/config/message.js';
 
 const gateway = process.env.VUE_APP_API_URL;
 
@@ -21,6 +22,7 @@ const $t = {
   cache, // 本地存储相关
   $q: cacheAndRequest,
   user, // 用户相关配置
+  message, // 跨源通信
 };
 
 uni.$t = $t;