|
@@ -13,6 +13,14 @@
|
|
|
<div id="robot" class="app">
|
|
|
<div class="van-hairline--surround msg" ref="scroll">
|
|
|
<div class="" ref="msgScroll">
|
|
|
+ <div class="defaultQuestion">
|
|
|
+ <div
|
|
|
+ v-for="item in q"
|
|
|
+ :key="item.id"
|
|
|
+ v-text="item"
|
|
|
+ @click="() => defQ(item)"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
<div
|
|
|
class="msgBg"
|
|
|
v-for="item in dialogueList"
|
|
@@ -53,26 +61,32 @@
|
|
|
>
|
|
|
左
|
|
|
</van-button>
|
|
|
+ <van-image
|
|
|
+ style="width: 0.45rem;vertical-align: middle;"
|
|
|
+ :src="robotHead"
|
|
|
+ ></van-image>
|
|
|
<van-button
|
|
|
type="default"
|
|
|
- @touchstart="() => toOperation('head', 'down')"
|
|
|
+ @touchstart="() => toOperation('head', 'right')"
|
|
|
@touchend="() => (touch = false)"
|
|
|
>
|
|
|
- 下
|
|
|
+ 右
|
|
|
</van-button>
|
|
|
+ </div>
|
|
|
+ <div class="conBtnGroup">
|
|
|
<van-button
|
|
|
type="default"
|
|
|
- @touchstart="() => toOperation('head', 'right')"
|
|
|
+ @touchstart="() => toOperation('head', 'down')"
|
|
|
@touchend="() => (touch = false)"
|
|
|
>
|
|
|
- 右
|
|
|
+ 下
|
|
|
</van-button>
|
|
|
</div>
|
|
|
- <div class="text">头部</div>
|
|
|
</div>
|
|
|
</van-col>
|
|
|
<van-col span="12">
|
|
|
<div class="control">
|
|
|
+ <div class="text">轮子</div>
|
|
|
<van-button
|
|
|
type="default"
|
|
|
@touchstart="() => toOperation('wheel', 'forward')"
|
|
@@ -103,7 +117,6 @@
|
|
|
右
|
|
|
</van-button>
|
|
|
</div>
|
|
|
- <div class="text">轮子</div>
|
|
|
</div>
|
|
|
</van-col>
|
|
|
</van-row>
|
|
@@ -120,6 +133,7 @@ import {
|
|
|
Col as vanCol,
|
|
|
Row as vanRow,
|
|
|
Field as vanField,
|
|
|
+ Image as VanImage,
|
|
|
DropdownMenu as vanDropdownMenu,
|
|
|
DropdownItem as vanDropdownItem,
|
|
|
Sticky as vanSticky,
|
|
@@ -132,8 +146,12 @@ 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/dropdown-menu/style";
|
|
|
import "vant/lib/dropdown-item/style";
|
|
|
+
|
|
|
+import robotHead from "@/assets/image/robot-head.png";
|
|
|
+
|
|
|
export default {
|
|
|
name: "app",
|
|
|
robotToken: "",
|
|
@@ -144,6 +162,15 @@ export default {
|
|
|
return {
|
|
|
robotList: [],
|
|
|
dialogueList: [],
|
|
|
+ q: [
|
|
|
+ "天气如何?",
|
|
|
+ "两学一做",
|
|
|
+ "八项规定",
|
|
|
+ "三严三实",
|
|
|
+ "什么是两个100年?",
|
|
|
+ "党的生日是那一天?"
|
|
|
+ ],
|
|
|
+ robotHead,
|
|
|
remoteControl: [
|
|
|
{
|
|
|
typeL: "head",
|
|
@@ -170,6 +197,10 @@ export default {
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
+ defQ(t) {
|
|
|
+ this.message = t;
|
|
|
+ this.tomsg();
|
|
|
+ },
|
|
|
creatID() {
|
|
|
const T =
|
|
|
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
|
|
@@ -180,7 +211,10 @@ export default {
|
|
|
return id;
|
|
|
},
|
|
|
tomsg() {
|
|
|
- if (!this.status) return Toast("链接已断开!");
|
|
|
+ if (!this.status) {
|
|
|
+ this.message = "";
|
|
|
+ return Toast("链接已断开!");
|
|
|
+ }
|
|
|
if (!this.message) return;
|
|
|
let dialogue = {
|
|
|
type: "local",
|
|
@@ -288,6 +322,7 @@ export default {
|
|
|
vanRow,
|
|
|
vanField,
|
|
|
vanSticky,
|
|
|
+ VanImage,
|
|
|
vanDropdownMenu,
|
|
|
vanDropdownItem
|
|
|
}
|
|
@@ -324,5 +359,14 @@ export default {
|
|
|
background-color: #959595;
|
|
|
}
|
|
|
}
|
|
|
+ .defaultQuestion {
|
|
|
+ padding: 5px;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 5px;
|
|
|
+ word-wrap: break-word;
|
|
|
+ background-color: #959595;
|
|
|
+ line-height: 2em;
|
|
|
+ font-size: 0.14rem;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|