机器人

src/components/Detail/audio.vue

@@ -13,7 +13,7 @@
     </div>
     <div v-if="item.id">
       <van-cell-group>
-        <van-cell title="" :value="item.publishTime" />
+        <van-cell :title="item.title" :value="item.publishTime" />
         <div
           @click="showIntrodu = !showIntrodu"
           :class="{ introduction: true, 'van-ellipsis': !showIntrodu }"
@@ -94,12 +94,13 @@ export default {
       // });
       window.Progress.progress = pro;
     },
-    autoPlay() {
-      console.log("客户端调用");
-      if (this.$refs.audioEle.isPlaying) {
-        this.$refs.audioEle.pause();
-      } else {
+    autoPlay(pageStatus) {
+      console.log("客户端调用", pageStatus);
+      this.$refs.audioEle.pause();
+      if (pageStatus === "show" && this.pageStatus) {
         this.$refs.audioEle.play();
+      } else {
+        this.pageStatus = this.$refs.audioEle.isPlaying;
       }
     }
   },
@@ -118,10 +119,9 @@ export default {
     this.$pageParams = currentUrlToParams();
     this.timeout = new Date();
     let _this = this;
-    console.log("生成autoplay", this.$refs.audioEle);
     this.$refs.audioEle &&
-      (window["autoPlay"] = function() {
-        _this.autoPlay();
+      (window["autoPlay"] = function(pageStatus) {
+        _this.autoPlay(pageStatus);
       });
   },
   beforeDestroy: function() {},

src/components/Detail/video.vue

@@ -22,7 +22,7 @@
       </video-player>
     </van-sticky>
     <div class="videoItem" v-if="item.id">
-      <p class="title van-ellipsis">{{ item.title }}</p>
+      <p class="title">{{ item.title }}</p>
       <p class="publistTime">{{ item.publishTime }}</p>
       <div
         @click="showIntrodu = !showIntrodu"
@@ -127,12 +127,13 @@ export default {
           this.$refs.elementAsconten.offsetHeight
         );
     },
-    autoPlay() {
-      console.log("客户端调用");
-      if (this.pleayStatus) {
-        this.$refs.videoPlayer.player.pause();
-      } else {
+    autoPlay(pageStatus) {
+      console.log("客户端调用", pageStatus);
+      this.$refs.videoPlayer.player.pause();
+      if (pageStatus === "show" && this.pleayStatus) {
         this.$refs.videoPlayer.player.play();
+      } else {
+        this.pleayStatus = this.$refs.audioEle.isPlaying;
       }
       this.pleayStatus = !this.pleayStatus;
     }
@@ -157,8 +158,8 @@ export default {
 
     let _this = this;
     this.$refs.videoPlayer &&
-      (window["autoPlay"] = function() {
-        _this.autoPlay();
+      (window["autoPlay"] = function(pageStatus) {
+        _this.autoPlay(pageStatus);
       });
   },
   beforeDestroy: function() {},

src/pages/robot/Index.vue

@@ -1,25 +1,46 @@
 <template>
-  <div>
-    <van-sticky :offset-top="0" v-if="robotList.length">
-      <van-dropdown-menu>
-        <van-dropdown-item
-          @change="change"
-          v-model="deviceId"
-          :options="robotList"
+  <div class="robot">
+    <van-dropdown-menu v-if="robotList.length">
+      <van-dropdown-item
+        @change="change"
+        v-model="deviceId"
+        :options="robotList"
+      />
+    </van-dropdown-menu>
+    <van-cell size="large">
+      <template #title>
+        <van-image
+          width="20"
+          height="20"
+          :src="logo"
+          style="vertical-align: middle;margin-right: 5px"
         />
-      </van-dropdown-menu>
-    </van-sticky>
-    <van-cell title="党建机器人" size="large" value="" />
+        <span class="custom-title">党建机器人</span>
+      </template>
+    </van-cell>
     <div id="robot" class="app">
       <div class="van-hairline--surround msg" ref="scroll">
-        <div class="" ref="msgScroll">
+        <div ref="msgScroll">
           <div class="defaultQuestion">
-            <div
-              v-for="item in q"
-              :key="item.id"
-              v-text="item"
-              @click="() => defQ(item)"
-            ></div>
+            <van-row>
+              <van-col
+                span="8"
+                class="queryTitle"
+                :style="'height: ' + q.length * 28 + 'px;'"
+              >
+                <van-image width="50" height="50" :src="logo" />
+                <van-icon name="replay" @click="reset" class="reset" />
+              </van-col>
+              <van-col span="16">
+                <div
+                  class="van-ellipsis van-hairline--bottom"
+                  v-for="item in q"
+                  :key="item"
+                  v-text="item + '?'"
+                  @click="() => defQ(item)"
+                ></div>
+              </van-col>
+            </van-row>
           </div>
           <div
             class="msgBg"
@@ -35,88 +56,96 @@
         </div>
       </div>
       <div class="van-hairline--left van-hairline--right van-hairline--bottom">
-        <van-field v-model="message" rows="1" autosize type="textarea" />
-        <div style="text-align: right; padding: 0.1rem">
-          <van-button size="small" type="primary" @click="tomsg">
-            发送
-          </van-button>
-        </div>
+        <van-field
+          v-model="message"
+          center
+          clearable
+          placeholder="请输入你的问题"
+        >
+          <template #button>
+            <van-button size="small" @click="tomsg">
+              发送
+            </van-button>
+          </template>
+        </van-field>
       </div>
       <van-cell title="遥控器" value="" />
       <van-row>
         <van-col span="12">
-          <div class="control">
-            <van-button
-              type="default"
+          <div class="control ">
+            <div class="bg" :style="touchArce"></div>
+            <van-icon
               @touchstart="() => toOperation('head', 'up')"
               @touchend="() => (touch = false)"
-            >
-              上
-            </van-button>
+              class="btnClass"
+              name="arrow-up"
+            />
             <div class="conBtnGroup">
-              <van-button
-                type="default"
+              <van-icon
+                class="btnClass"
                 @touchstart="() => toOperation('head', 'left')"
                 @touchend="() => (touch = false)"
-              >
-                左
-              </van-button>
-              <van-image
-                style="width: 0.45rem;vertical-align: middle;"
-                :src="robotHead"
-              ></van-image>
-              <van-button
-                type="default"
+                name="arrow-left"
+              />
+              <div>
+                <van-image
+                  class="centerImg"
+                  fit="cover"
+                  :src="robotHead"
+                ></van-image>
+              </div>
+              <van-icon
+                class="btnClass"
                 @touchstart="() => toOperation('head', 'right')"
                 @touchend="() => (touch = false)"
-              >
-                右
-              </van-button>
-            </div>
-            <div class="conBtnGroup">
-              <van-button
-                type="default"
-                @touchstart="() => toOperation('head', 'down')"
-                @touchend="() => (touch = false)"
-              >
-                下
-              </van-button>
+                name="arrow"
+              />
             </div>
+            <van-icon
+              class="btnClass"
+              @touchstart="() => toOperation('head', 'down')"
+              @touchend="() => (touch = false)"
+              name="arrow-down"
+            />
           </div>
         </van-col>
         <van-col span="12">
           <div class="control">
-            <div class="text">轮子</div>
-            <van-button
-              type="default"
+            <div class="bg" :style="touchArceWheel"></div>
+            <van-icon
               @touchstart="() => toOperation('wheel', 'forward')"
               @touchend="() => (touch = false)"
-            >
-              前
-            </van-button>
+              class="btnClass"
+              name="arrow-up"
+            />
             <div class="conBtnGroup">
-              <van-button
-                type="default"
+              <van-icon
+                class="btnClass"
                 @touchstart="() => toOperation('wheel', 'left')"
                 @touchend="() => (touch = false)"
-              >
-                左
-              </van-button>
-              <van-button
-                type="default"
-                @touchstart="() => toOperation('wheel', 'backward')"
-                @touchend="() => (touch = false)"
-              >
-                后
-              </van-button>
-              <van-button
-                type="default"
+                name="arrow-left"
+              />
+              <div>
+                <van-image
+                  class="centerImg"
+                  fit="cover"
+                  :src="robotBody"
+                ></van-image>
+              </div>
+              <van-icon
+                class="btnClass"
                 @touchstart="() => toOperation('wheel', 'right')"
                 @touchend="() => (touch = false)"
-              >
-                右
-              </van-button>
+                name="arrow"
+              />
             </div>
+
+            <van-icon
+              class="btnClass"
+              @touchstart="() => toOperation('wheel', 'backward')"
+              @touchend="() => (touch = false)"
+              name="arrow-down"
+            />
           </div>
         </van-col>
       </van-row>
@@ -133,10 +162,10 @@ import {
   Col as vanCol,
   Row as vanRow,
   Field as vanField,
-  Image as VanImage,
+  Image as vanImage,
   DropdownMenu as vanDropdownMenu,
   DropdownItem as vanDropdownItem,
-  Sticky as vanSticky,
+  Icon as vanIcon,
   Toast
 } from "vant";
 import "vant/lib/button/style";
@@ -144,58 +173,81 @@ import "vant/lib/cell/style";
 import "vant/lib/col/style";
 import "vant/lib/row/style";
 import "vant/lib/field/style";
-import "vant/lib/sticky/style";
 import "vant/lib/toast/style";
 import "vant/lib/image/style";
+import "vant/lib/icon/style";
 import "vant/lib/dropdown-menu/style";
 import "vant/lib/dropdown-item/style";
 
 import robotHead from "@/assets/image/robot-head.png";
+import robotBody from "@/assets/image/robot-body.png";
+import logo from "@/assets/image/logo.png";
 
 export default {
   name: "app",
-  robotToken: "",
-  scoket: undefined,
-  status: true,
-  timeout: undefined,
   data: function() {
     return {
-      robotList: [],
-      dialogueList: [],
-      q: [
-        "天气如何？",
+      robotToken: "",
+      scoket: undefined,
+      status: false,
+      timeout: undefined,
+      quetion: [
+        "天气如何",
         "两学一做",
         "八项规定",
         "三严三实",
-        "什么是两个100年？",
-        "党的生日是那一天？"
+        "什么是两个100年",
+        "党的生日是那一天"
       ],
+      qPage: 1,
+      qPageSize: 5,
       robotHead,
-      remoteControl: [
-        {
-          typeL: "head",
-          btn: {
-            up: "上",
-            left: "左",
-            down: "下",
-            right: "右"
-          }
-        },
-        {
-          typeL: "wheel",
-          btn: {
-            forward: "前",
-            left: "左",
-            backward: "后",
-            right: "右"
-          }
-        }
-      ],
+      robotBody,
+      logo,
+      robotList: [],
+      dialogueList: [],
+      q: [],
       touch: false,
       deviceId: "",
       message: ""
     };
   },
+  computed: {
+    touchArce() {
+      if (!this.touch)
+        return {
+          type: "",
+          style: ""
+        };
+      let l = this.touch.split("-");
+      switch (l[1]) {
+        case "up":
+          l[1] = "top";
+          break;
+        case "down":
+          l[1] = "bottom";
+          break;
+      }
+      return l[0] === "head" ? "border-" + l[1] + "-color: #dadada" : "";
+    },
+    touchArceWheel() {
+      if (!this.touch)
+        return {
+          type: "",
+          style: ""
+        };
+      let l = this.touch.split("-");
+      switch (l[1]) {
+        case "forward":
+          l[1] = "top";
+          break;
+        case "backward":
+          l[1] = "bottom";
+          break;
+      }
+      return l[0] === "wheel" ? "border-" + l[1] + "-color: #dadada" : "";
+    }
+  },
   methods: {
     defQ(t) {
       this.message = t;
@@ -213,7 +265,7 @@ export default {
     tomsg() {
       if (!this.status) {
         this.message = "";
-        return Toast("链接已断开！");
+        return Toast("未链接！");
       }
       if (!this.message) return;
       let dialogue = {
@@ -234,9 +286,9 @@ export default {
       this.message = "";
     },
     toOperation(type, opera) {
-      if (!this.status) return Toast("链接已断开！");
+      if (!this.status) return Toast("未链接！");
       if (this.timeout) clearInterval(this.timeout);
-      this.touch = true;
+      this.touch = type + "-" + opera;
       this.timeout = setInterval(() => {
         if (!this.touch) clearInterval(this.timeout);
         let p = {
@@ -280,21 +332,40 @@ export default {
       this.scoket.onerror = function() {
         _this.status = false;
         console.log("链接错误");
-        Toast("链接已断开！");
+        Toast("未链接！");
       };
       this.scoket.onclose = function() {
         _this.status = false;
         console.log("链接断开");
-        Toast("链接已断开！");
+        Toast("未链接！");
       };
     },
     change(e) {
       if (!e) return;
       this.deviceId = e;
       this.createRobotLink();
+    },
+    reset() {
+      let l = [];
+      let start = this.qPageSize * (this.qPage - 1);
+      for (let i = 0; i < this.qPageSize; i++) {
+        let index =
+          i + start >= this.quetion.length
+            ? i + start - this.quetion.length
+            : i + start;
+        const v = this.quetion[index];
+        l.push(v);
+      }
+      this.q = l;
+      if (this.qPageSize * this.qPage > this.quetion.length) {
+        this.qPage = 1;
+      } else {
+        this.qPage++;
+      }
     }
   },
   mounted() {
+    this.reset();
     getRobotToken().then(res => {
       if (res.error_code !== 0) return Toast("机器人走丢了");
       this.robotToken = res.token || "";
@@ -320,9 +391,9 @@ export default {
     vanCell,
     vanCol,
     vanRow,
+    vanIcon,
     vanField,
-    vanSticky,
-    VanImage,
+    vanImage,
     vanDropdownMenu,
     vanDropdownItem
   }
@@ -335,38 +406,71 @@ export default {
     padding: 0.1rem;
     height: 3rem;
     overflow-y: scroll;
+    .defaultQuestion {
+      padding: 5px;
+      color: #222;
+      line-height: 2em;
+      font-size: 0.14rem;
+      border-radius: 5px;
+      word-wrap: break-word;
+      box-shadow: rgba(122, 122, 122, 0.2) 0px 0px 5px;
+      .queryTitle {
+        padding: 3px;
+        position: relative;
+        .reset {
+          position: absolute;
+          font-size: 16px;
+          bottom: 3px;
+          left: 3px;
+        }
+      }
+    }
+    .msgBg {
+      padding: 5px 3px;
+      > div {
+        padding: 5px;
+        color: #fff;
+        border-radius: 5px;
+        word-wrap: break-word;
+        background-color: #959595;
+      }
+    }
   }
   .control {
-    display: inline-block;
-    margin-top: 0.1rem;
-    width: 1.45rem;
+    margin-top: 0.05rem;
+    width: 173px;
     text-align: center;
-    .conBtnGroup {
-      text-align: center;
+    position: relative;
+    padding: 3px;
+    .bg {
+      width: 0;
+      height: 0;
+      border: 87px solid #fafafa;
+      border-radius: 50%;
+      position: absolute;
+      z-index: -1;
     }
-    .text {
-      padding: 0.1rem;
-      font-size: 0.14rem;
+    .btnClass {
+      width: 45px;
+      height: 55px;
+      line-height: 55px;
+      display: inline-block;
     }
-  }
-  .msgBg {
-    padding: 5px 3px;
-    > div {
-      padding: 5px;
-      color: #fff;
-      border-radius: 5px;
-      word-wrap: break-word;
-      background-color: #959595;
+    .conBtnGroup {
+      display: flex;
+      > * {
+        flex: 1;
+      }
+      .centerImg {
+        width: 0.56rem;
+        height: 0.55rem;
+        text-align: center;
+        padding: 0.1rem;
+        border: 1px solid #eee;
+        background-color: #dadada;
+        border-radius: 50%;
+      }
     }
   }
-  .defaultQuestion {
-    padding: 5px;
-    color: #fff;
-    border-radius: 5px;
-    word-wrap: break-word;
-    background-color: #959595;
-    line-height: 2em;
-    font-size: 0.14rem;
-  }
 }
 </style>