Merge branch '0609guide' into test

src/views/rules/components/androidGuide.vue

@@ -9,83 +9,23 @@
     </div>
     <section>
       <p>1.将您的手机或平板连接到您智能电视机所在的同一无线局域网。</p>
-      <p>2.打开“设置”页面，点击“更多连接”按钮：</p>
-      <img
-        v-if="brand == 'xiaomi'"
-        class="img"
-        src="../../../assets/images/guide/7.png"
-        width="100%"
-        alt=""
-      />
-      <img
-        v-else-if="brand == 'meizu'"
-        class="img"
-        src="../../../assets/images/guide/4.png"
-        width="100%"
-        alt=""
-      />
-      <img
-        v-else
-        class="img"
-        src="../../../assets/images/guide/1.png"
-        width="100%"
-        alt=""
-      />
-      <p>3.点击“手机投屏”：</p>
-      <img
-        v-if="brand == 'xiaomi'"
-        class="img"
-        src="../../../assets/images/guide/8.png"
-        width="100%"
-        alt=""
-      />
-      <img
-        v-else-if="brand == 'meizu'"
-        class="img"
-        src="../../../assets/images/guide/5.png"
-        width="100%"
-        alt=""
-      />
-      <img
-        v-else
-        class="img"
-        src="../../../assets/images/guide/2.png"
-        width="100%"
-        alt=""
-      />
-      <p>
-        4.打开“无线投屏”开关，即可看到可以投屏的设备列表，选择您的设备进行连接。
-      </p>
-      <img
-        v-if="brand == 'xiaomi'"
-        class="img"
-        src="../../../assets/images/guide/9.png"
-        width="100%"
-        alt=""
-      />
-      <img
-        v-else-if="brand == 'meizu'"
-        class="img"
-        src="../../../assets/images/guide/6.png"
-        width="100%"
-        alt=""
-      />
-      <img
-        v-else
-        class="img"
-        src="../../../assets/images/guide/3.png"
-        width="100%"
-        alt=""
-      />
+      <p>{{ infoMsg[brand]["title1"] }}</p>
+      <img class="img" :src="infoMsg[brand]['img1']" width="100%" alt="" />
+
+      <p>{{ infoMsg[brand]["title2"] }}</p>
+      <img class="img" :src="infoMsg[brand]['img2']" width="100%" alt="" />
+
+      <p>{{ infoMsg[brand]["title3"] }}</p>
+      <img class="img" :src="infoMsg[brand]['img3']" width="100%" alt="" />
     </section>
     <section>
       <p class="blod">如果音乐意外停止：</p>
       <p>
-       如果在这台设备上使用语音助手或进行其他任务，则可能会导致所有音频设备停止播放音乐
+        如果在这台设备上使用语音助手或进行其他任务，则可能会导致所有音频设备停止播放音乐
       </p>
       <p class="blod">如果您看到视频但听不到声音：</p>
       <p>
-     如果您听不到任何声音，则请确保手机设备和电视机/听筒的音量都已调高，而且没有静音。 
+        如果您听不到任何声音，则请确保手机设备和电视机/听筒的音量都已调高，而且没有静音。
       </p>
       <p>
         请检查响铃/静音开关。如果开关设为静音，您会看到一条橙色的线。切换开关以开启响铃。
@@ -145,20 +85,61 @@
   </div>
 </template>
 <script>
+const infoMsg = {
+  meizu: {
+    img1: require("@/assets/images/guide/4.png"),
+    img2: require("@/assets/images/guide/5.png"),
+    img3: require("@/assets/images/guide/6.png"),
+    title1: "2.打开“设置”页面，点击“更多连接方式”按钮：",
+    title2: "3.点击“投射屏幕”：",
+    title3:
+      "4.打开“投射屏幕”开关，即可看到可以投屏的设备列表，选择您的设备进行连接。",
+  },
+  xiaomi: {
+    img1: require("@/assets/images/guide/7.png"),
+    img2: require("@/assets/images/guide/8.png"),
+    img3: require("@/assets/images/guide/9.png"),
+    title1: "2.打开“设置”页面，点击“连接与共享”按钮：",
+    title2: "3.点击“投屏”：",
+    title3:
+      "4.打开“打开投屏”开关，即可看到可以投屏的设备列表，选择您的设备进行连接。",
+  },
+  vivo: {
+    img1: require("@/assets/images/guide/12.png"),
+    img2: require("@/assets/images/guide/13.png"),
+    img3: require("@/assets/images/guide/14.png"),
+    title1: "2.打开“设置”页面，点击“其他网络与连接”按钮：",
+    title2: "3.点击“手机投屏”：",
+    title3:
+      "4.打开“手机投屏”开关，即可看到可以投屏的设备列表，选择您的设备进行连接。",
+  },
+  huawei: {
+    img1: require("@/assets/images/guide/1.png"),
+    img2: require("@/assets/images/guide/2.png"),
+    img3: require("@/assets/images/guide/3.png"),
+    title1: "2.打开“设置”页面，点击“更多连接”按钮：",
+    title2: "3.点击“手机投屏”：",
+    title3:
+      "4.打开“无线投屏”开关，即可看到可以投屏的设备列表，选择您的设备进行连接。",
+  },
+};
 export default {
   data() {
     return {
-      brand: "",
+      brand: "huawei",
+      infoMsg,
     };
   },
   mounted() {
     var ua = navigator.userAgent.split("(")[1].split(")")[0];
     this.brand = "";
-    var phone = [/MZ/gi, /mi/gi];
+    var phone = [/MZ/gi, /mi/gi, /vivo/gi];
     if (phone[0].test(ua)) {
       this.brand = "meizu";
     } else if (phone[1].test(ua)) {
       this.brand = "xiaomi";
+    } else if (phone[2].test(ua)) {
+      this.brand = "vivo";
     } else {
       this.brand = "huawei";
     }