Allow share QR Code

web/src/components/ProxyList.vue

@@ -23,25 +23,56 @@
         </v-chip-group>
       </v-list-item-content>
       <v-list-item-action>
-        <v-btn icon @click="showInfo(idx)">
-          <v-icon color="grey lighten-1">mdi-information</v-icon>
-        </v-btn>
+        <v-row>
+          <v-col>
+            <v-btn
+                icon
+                @click="showQRCode(idx)"
+                v-if="proxy.type !== 'http'"
+            >
+              <v-icon small color="grey lighten-1">mdi-qrcode</v-icon>
+            </v-btn>
+          </v-col>
+          <v-col>
+            <v-btn icon @click="showInfo(idx)">
+              <v-icon small color="grey lighten-1">mdi-information</v-icon>
+            </v-btn>
+          </v-col>
+        </v-row>
       </v-list-item-action>
     </v-list-item>
     <v-dialog
         v-model="dialog"
     >
-      <v-card>
+      <v-card
+          color="primary darken-1"
+      >
         <v-card-title>
-          {{info.name}}
+          {{ info.name }}
         </v-card-title>
 
         <v-card-text>
-          {{info.isp}}
+          {{ info.isp }}
           <br/>
-          {{info.region}}
+          {{ info.region }}
           <br/>
-          {{info.ip}}
+          {{ info.ip }}
+        </v-card-text>
+      </v-card>
+    </v-dialog>
+    <v-dialog
+        v-model="showQR"
+    >
+      <v-card
+          color="primary darken-1"
+      >
+        <v-card-title>
+          {{ info.name }}
+        </v-card-title>
+        <v-card-text>
+          <vue-q-r-code-component
+              :text="qr"
+          />
         </v-card-text>
       </v-card>
     </v-dialog>
@@ -50,22 +81,27 @@
 
 <script>
 import {axios} from "@/utils";
+import VueQRCodeComponent from 'vue-qrcode-component';
 
-const flags = new Map([[ "AC" , "🇦🇨" ] , [ "AF" , "🇦🇫" ] , [ "AI" , "🇦🇮" ] , [ "AL" , "🇦🇱" ] , [ "AM" , "🇦🇲" ] , [ "AQ" , "🇦🇶" ] , [ "AR" , "🇦🇷" ] , [ "AS" , "🇦🇸" ] , [ "AT" , "🇦🇹" ] , [ "AU" , "🇦🇺" ] , [ "AW" , "🇦🇼" ] , [ "AX" , "🇦🇽" ] , [ "AZ" , "🇦🇿" ] , [ "BB" , "🇧🇧" ] , [ "BD" , "🇧🇩" ] , [ "BE" , "🇧🇪" ] , [ "BF" , "🇧🇫" ] , [ "BG" , "🇧🇬" ] , [ "BH" , "🇧🇭" ] , [ "BI" , "🇧🇮" ] , [ "BJ" , "🇧🇯" ] , [ "BM" , "🇧🇲" ] , [ "BN" , "🇧🇳" ] , [ "BO" , "🇧🇴" ] , [ "BR" , "🇧🇷" ] , [ "BS" , "🇧🇸" ] , [ "BT" , "🇧🇹" ] , [ "BV" , "🇧🇻" ] , [ "BW" , "🇧🇼" ] , [ "BY" , "🇧🇾" ] , [ "BZ" , "🇧🇿" ] , [ "CA" , "🇨🇦" ] , [ "CF" , "🇨🇫" ] , [ "CH" , "🇨🇭" ] , [ "CK" , "🇨🇰" ] , [ "CL" , "🇨🇱" ] , [ "CM" , "🇨🇲" ] , [ "CN" , "🇨🇳" ] , [ "CO" , "🇨🇴" ] , [ "CP" , "🇨🇵" ] , [ "CR" , "🇨🇷" ] , [ "CU" , "🇨🇺" ] , [ "CV" , "🇨🇻" ] , [ "CW" , "🇨🇼" ] , [ "CX" , "🇨🇽" ] , [ "CY" , "🇨🇾" ] , [ "CZ" , "🇨🇿" ] , [ "DE" , "🇩🇪" ] , [ "DG" , "🇩🇬" ] , [ "DJ" , "🇩🇯" ] , [ "DK" , "🇩🇰" ] , [ "DM" , "🇩🇲" ] , [ "DO" , "🇩🇴" ] , [ "DZ" , "🇩🇿" ] , [ "EA" , "🇪🇦" ] , [ "EC" , "🇪🇨" ] , [ "EE" , "🇪🇪" ] , [ "EG" , "🇪🇬" ] , [ "EH" , "🇪🇭" ] , [ "ER" , "🇪🇷" ] , [ "ES" , "🇪🇸" ] , [ "ET" , "🇪🇹" ] , [ "EU" , "🇪🇺" ] , [ "FI" , "🇫🇮" ] , [ "FJ" , "🇫🇯" ] , [ "FK" , "🇫🇰" ] , [ "FM" , "🇫🇲" ] , [ "FO" , "🇫🇴" ] , [ "FR" , "🇫🇷" ] , [ "GA" , "🇬🇦" ] , [ "GB" , "🇬🇧" ] , [ "HK" , "🇭🇰" ] ,["HU","🇭🇺"], [ "ID" , "🇮🇩" ] , [ "IE" , "🇮🇪" ] , [ "IL" , "🇮🇱" ] , [ "IM" , "🇮🇲" ] , [ "IN" , "🇮🇳" ] , [ "IS" , "🇮🇸" ] , [ "IT" , "🇮🇹" ] , [ "JP" , "🇯🇵" ] , [ "KR" , "🇰🇷" ] , [ "LU" , "🇱🇺" ] , [ "MO" , "🇲🇴" ] , [ "MX" , "🇲🇽" ] , [ "MY" , "🇲🇾" ] , [ "NL" , "🇳🇱" ] , [ "PH" , "🇵🇭" ] , [ "RO" , "🇷🇴" ] , [ "RS" , "🇷🇸" ] , [ "RU" , "🇷🇺" ] , [ "RW" , "🇷🇼" ] , [ "SA" , "🇸🇦" ] , [ "SB" , "🇸🇧" ] , [ "SC" , "🇸🇨" ] , [ "SD" , "🇸🇩" ] , [ "SE" , "🇸🇪" ] , [ "SG" , "🇸🇬" ] , [ "TH" , "🇹🇭" ] , [ "TN" , "🇹🇳" ] , [ "TO" , "🇹🇴" ] , [ "TR" , "🇹🇷" ] , [ "TV" , "🇹🇻" ] , [ "TW" , "🇨🇳" ] , [ "UK" , "🇬🇧" ] , [ "UM" , "🇺🇲" ] , [ "US" , "🇺🇸" ] , [ "UY" , "🇺🇾" ] , [ "UZ" , "🇺🇿" ] , [ "VA" , "🇻🇦" ] , [ "VE" , "🇻🇪" ] , [ "VG" , "🇻🇬" ] , [ "VI" , "🇻🇮" ] , [ "VN" , "🇻🇳" ] , [ "ZA" , "🇿🇦"]])
+const flags = new Map([["AC", "🇦🇨"], ["AF", "🇦🇫"], ["AI", "🇦🇮"], ["AL", "🇦🇱"], ["AM", "🇦🇲"], ["AQ", "🇦🇶"], ["AR", "🇦🇷"], ["AS", "🇦🇸"], ["AT", "🇦🇹"], ["AU", "🇦🇺"], ["AW", "🇦🇼"], ["AX", "🇦🇽"], ["AZ", "🇦🇿"], ["BB", "🇧🇧"], ["BD", "🇧🇩"], ["BE", "🇧🇪"], ["BF", "🇧🇫"], ["BG", "🇧🇬"], ["BH", "🇧🇭"], ["BI", "🇧🇮"], ["BJ", "🇧🇯"], ["BM", "🇧🇲"], ["BN", "🇧🇳"], ["BO", "🇧🇴"], ["BR", "🇧🇷"], ["BS", "🇧🇸"], ["BT", "🇧🇹"], ["BV", "🇧🇻"], ["BW", "🇧🇼"], ["BY", "🇧🇾"], ["BZ", "🇧🇿"], ["CA", "🇨🇦"], ["CF", "🇨🇫"], ["CH", "🇨🇭"], ["CK", "🇨🇰"], ["CL", "🇨🇱"], ["CM", "🇨🇲"], ["CN", "🇨🇳"], ["CO", "🇨🇴"], ["CP", "🇨🇵"], ["CR", "🇨🇷"], ["CU", "🇨🇺"], ["CV", "🇨🇻"], ["CW", "🇨🇼"], ["CX", "🇨🇽"], ["CY", "🇨🇾"], ["CZ", "🇨🇿"], ["DE", "🇩🇪"], ["DG", "🇩🇬"], ["DJ", "🇩🇯"], ["DK", "🇩🇰"], ["DM", "🇩🇲"], ["DO", "🇩🇴"], ["DZ", "🇩🇿"], ["EA", "🇪🇦"], ["EC", "🇪🇨"], ["EE", "🇪🇪"], ["EG", "🇪🇬"], ["EH", "🇪🇭"], ["ER", "🇪🇷"], ["ES", "🇪🇸"], ["ET", "🇪🇹"], ["EU", "🇪🇺"], ["FI", "🇫🇮"], ["FJ", "🇫🇯"], ["FK", "🇫🇰"], ["FM", "🇫🇲"], ["FO", "🇫🇴"], ["FR", "🇫🇷"], ["GA", "🇬🇦"], ["GB", "🇬🇧"], ["HK", "🇭🇰"], ["HU", "🇭🇺"], ["ID", "🇮🇩"], ["IE", "🇮🇪"], ["IL", "🇮🇱"], ["IM", "🇮🇲"], ["IN", "🇮🇳"], ["IS", "🇮🇸"], ["IT", "🇮🇹"], ["JP", "🇯🇵"], ["KR", "🇰🇷"], ["LU", "🇱🇺"], ["MO", "🇲🇴"], ["MX", "🇲🇽"], ["MY", "🇲🇾"], ["NL", "🇳🇱"], ["PH", "🇵🇭"], ["RO", "🇷🇴"], ["RS", "🇷🇸"], ["RU", "🇷🇺"], ["RW", "🇷🇼"], ["SA", "🇸🇦"], ["SB", "🇸🇧"], ["SC", "🇸🇨"], ["SD", "🇸🇩"], ["SE", "🇸🇪"], ["SG", "🇸🇬"], ["TH", "🇹🇭"], ["TN", "🇹🇳"], ["TO", "🇹🇴"], ["TR", "🇹🇷"], ["TV", "🇹🇻"], ["TW", "🇨🇳"], ["UK", "🇬🇧"], ["UM", "🇺🇲"], ["US", "🇺🇸"], ["UY", "🇺🇾"], ["UZ", "🇺🇿"], ["VA", "🇻🇦"], ["VE", "🇻🇪"], ["VG", "🇻🇬"], ["VI", "🇻🇮"], ["VN", "🇻🇳"], ["ZA", "🇿🇦"]])
 
 export default {
   name: "ProxyList",
   props: ['url', 'sub'],
+  components: {VueQRCodeComponent},
   data: function () {
     return {
       proxies: [],
+      uris: [],
       dialog: false,
+      showQR: false,
       info: {
         name: "",
         isp: "",
         region: "",
         ip: ""
-      }
+      },
+      qr: ""
     }
   },
   methods: {
@@ -75,24 +111,48 @@ export default {
       })
     },
 
-    fetch() {
-      axios.get(this.url).then(resp => {
+    async fetch() {
+      await axios.get(this.url).then(resp => {
         const {data} = resp;
-        this.proxies = data.split("\n").map(p => JSON.parse(p));
+        if (data.indexOf("\n") !== -1)
+          this.proxies = data.split("\n").map(p => JSON.parse(p));
+        else
+          this.proxies = [data];
       }).catch(err => {
         this.$store.commit("SET_ERROR_MESSAGE", err);
       });
+
+      await axios.get(`${this.url}?target=URI`).then(resp => {
+        const {data} = resp;
+        if (data.indexOf("\n") !== -1)
+          this.uris = data.split("\n");
+        else
+          this.uris = [data];
+      });
+
+      // fix http offset
+      this.proxies.forEach((p, idx) => {
+        if (p.type === 'http') {
+          this.uris.splice(idx, 0, null);
+        }
+      })
     },
 
     async showInfo(idx) {
       const {server, name} = this.proxies[idx];
       const res = await axios.get(`/IP_API/${encodeURIComponent(server)}`).then(resp => resp.data);
       this.info.name = name;
-      this.info.isp = `ISP：${res.org}`;
+      this.info.isp = `ISP：${res.isp}`;
       this.info.region = `地区：${flags.get(res.countryCode)} ${res.regionName} ${res.city}`;
       this.info.ip = `IP：${res.query}`
       this.dialog = true
     },
+
+    async showQRCode(idx) {
+      this.qr = this.uris[idx];
+      this.info.name = this.proxies[idx].name;
+      this.showQR = true;
+    }
   },
   created() {
     this.fetch();