Initial commit: GamePortrait 竖屏版 - 深色豪华主题

src/views/game.vue

@@ -0,0 +1,66 @@
+<template>
+  <div class="game-iframe">
+    <div v-if="false" class="back" @click="goBack">返回</div>
+    <iframe class="iframe" :src="gameUrl" frameborder="0"></iframe>
+  </div>
+</template>
+
+<script>
+import { computed, onMounted } from "vue"
+import { useStore } from "vuex"
+import { useRouter } from "vue-router"
+export default {
+  name: "GameIframe",
+  setup() {
+    const store = useStore()
+    const router = useRouter()
+    const gameUrl = computed(() => store.state.app.gameUrl)
+    const goBack = () => {
+      router.back()
+    }
+    onMounted(() => {
+      store.commit("config/setValue", { name: "musicVolume", type: false })
+    })
+    return { gameUrl, goBack }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.game-iframe {
+  width: 100%;
+  height: 100%;
+  background: #000;
+  position: absolute;
+  transform: rotateX(0deg);
+  .back {
+    position: absolute;
+    z-index: 999;
+    top: 0.34rem;
+    left: 0.5rem;
+    width: 1.2rem;
+    height: 1.2rem;
+    background: #212121;
+    font-size: 0.4rem;
+    text-align: center;
+    line-height: 1.2rem;
+    border-radius: 0.2rem;
+    font-weight: bold;
+    box-sizing: border-box;
+    border: 1px solid #959494;
+    color: #fff;
+    &:active {
+      opacity: 0.8;
+    }
+  }
+  .iframe {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+  }
+}
+</style>

src/views/hall.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="hall">
+    <HallNav></HallNav>
+    <HallList></HallList>
+    <Tabbar></Tabbar>
+  </div>
+</template>
+
+<script>
+import HallNav from "@/components/HallNav.vue"
+import Tabbar from "@/components/Tabbar.vue"
+import HallList from "@/components/HallList.vue"
+export default {
+  name: "HallView",
+  components: { Tabbar, HallNav, HallList },
+  setup() {}
+}
+</script>
+<style lang="scss" scoped>
+/* 深色豪华主题 */
+.hall {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background: #0d0d0d;
+}
+</style>

src/views/help.vue

@@ -0,0 +1,261 @@
+<template>
+  <div class="help">
+    <NavBar class="navbar" :clickable="false">
+      <template #left>
+        <img
+          class="icon"
+          @click="back"
+          src="~@/assets/images/icon/back.png"
+          alt=""
+        />
+      </template>
+      <template #title>{{ Lang[Type].help }}</template>
+    </NavBar>
+    <van-tabs class="help-tabs" v-model:active="active">
+      <!-- 百家乐 -->
+      <van-tab name="baccarat" :title="Lang[Type].Baccarat">
+        <template v-if="Type == 'cn'">
+          <van-image
+            width="100%"
+            :src="require('../assets/images/help/cn_baccarat_1.jpg')"
+          />
+          <van-image
+            width="100%"
+            :src="require('../assets/images/help/cn_baccarat_2.jpg')"
+          />
+        </template>
+        <van-image
+          v-else-if="Type == 'tw'"
+          width="100%"
+          :src="require('../assets/images/help/tw_baccarat_1.jpg')"
+        />
+        <template v-else>
+          <van-image
+            width="100%"
+            :src="require('../assets/images/help/en_baccarat_1.jpg')"
+          />
+          <van-image
+            width="100%"
+            :src="require('../assets/images/help/en_all.jpg')"
+          />
+        </template>
+      </van-tab>
+      <!-- 龙虎 -->
+      <van-tab name="lh" :title="Lang[Type].DragonTiger">
+        <van-image
+          v-if="Type == 'cn'"
+          width="100%"
+          :src="require('../assets/images/help/cn_longhu.jpg')"
+        />
+        <van-image
+          v-else-if="Type == 'tw'"
+          width="100%"
+          :src="require('../assets/images/help/tw_longhu.jpg')"
+        />
+        <template v-else>
+          <van-image
+            width="100%"
+            :src="require('../assets/images/help/en_longhu.jpg')"
+          />
+          <van-image
+            width="100%"
+            :src="require('../assets/images/help/en_all.jpg')"
+          />
+        </template>
+      </van-tab>
+      <!-- 牛牛 -->
+      <van-tab name="nn" :title="Lang[Type].NN">
+        <van-image
+          v-if="Type == 'cn'"
+          width="100%"
+          :src="require('../assets/images/help/cn_nn.jpg')"
+        />
+        <van-image
+          v-else-if="Type == 'tw'"
+          width="100%"
+          :src="require('../assets/images/help/tw_nn.jpg')"
+        />
+        <template v-else>
+          <van-image
+            width="100%"
+            :src="require('../assets/images/help/en_nn.jpg')"
+          />
+          <van-image
+            width="100%"
+            :src="require('../assets/images/help/en_all.jpg')"
+          />
+        </template>
+      </van-tab>
+      <!-- 急速牛牛 -->
+      <van-tab name="tc" :title="Lang[Type].ThreeCard">
+        <van-image
+          v-if="Type == 'cn'"
+          width="100%"
+          :src="require('../assets/images/help/cn_three_card.jpg')"
+        />
+        <van-image
+          v-else-if="Type == 'tw'"
+          width="100%"
+          :src="require('../assets/images/help/tw_three_card.jpg')"
+        />
+        <template v-else>
+          <van-image
+            width="100%"
+            :src="require('../assets/images/help/en_three_card.jpg')"
+          />
+          <van-image
+            width="100%"
+            :src="require('../assets/images/help/en_all.jpg')"
+          />
+        </template>
+      </van-tab>
+      <!-- 骰宝 -->
+      <van-tab name="sb" title="骰宝" v-if="false">
+        <div style="padding-bottom: 50px"></div>
+      </van-tab>
+      <!-- 色碟 -->
+      <van-tab name="sd" :title="Lang[Type].Toning">
+        <van-image
+          v-if="Type == 'cn'"
+          width="100%"
+          :src="require('../assets/images/help/cn_toning.jpg')"
+        />
+        <van-image
+          v-else-if="Type == 'tw'"
+          width="100%"
+          :src="require('../assets/images/help/tw_toning.jpg')"
+        />
+        <template v-else>
+          <van-image
+            width="100%"
+            :src="require('../assets/images/help/en_toning_1.jpg')"
+          />
+          <van-image
+            width="100%"
+            :src="require('../assets/images/help/en_toning_2.jpg')"
+          />
+        </template>
+      </van-tab>
+      <!-- 轮盘 -->
+      <van-tab name="lp" title="轮盘" v-if="false">
+        <div style="padding-bottom: 50px"></div>
+      </van-tab>
+      <!-- 炸金花 -->
+      <van-tab name="zjh" title="炸金花" v-if="false">
+        <div style="padding-bottom: 50px"></div>
+      </van-tab>
+    </van-tabs>
+  </div>
+</template>
+
+<script>
+import { mapState } from "vuex"
+import { Tab, Tabs, NavBar } from "vant"
+export default {
+  name: "demoPage",
+  components: { "van-tab": Tab, "van-tabs": Tabs, NavBar },
+  data() {
+    return {
+      active: "tc"
+    }
+  },
+  computed: {
+    ...mapState({
+      game_id: (state) => state.app.game_id,
+      Lang: (state) => state.config.$lang,
+      Type: (state) => state.config.$Type
+    })
+  },
+  created() {
+    this.active =
+      this.game_id == 1
+        ? "baccarat"
+        : this.game_id == 2
+        ? "lh"
+        : this.game_id == 4
+        ? "nn"
+        : "tc"
+  },
+  methods: {
+    back() {
+      this.$router.back()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.help {
+  position: absolute;
+  left: 0;
+  top: 0;
+  background: #fff;
+  width: 100%;
+  height: 100%;
+  .navbar {
+    .icon {
+      width: 24px;
+      &:active {
+        opacity: 0.6;
+      }
+      &.margin {
+        margin: 0 20px;
+      }
+    }
+  }
+  .help-tabs {
+    height: calc(100% - 46px);
+    overflow: hidden;
+    ::v-deep {
+      .van-tabs__wrap {
+        box-shadow: 0px 0px 4px 0.5px rgba(0, 0, 0, 0.1);
+      }
+      .van-tabs__content {
+        height: calc(100% - 44px);
+        overflow-y: auto;
+        color: #555;
+        font-size: 13px;
+        padding: 15px;
+      }
+    }
+    .title {
+      padding-top: 20px;
+      text-align: center;
+      font-size: 16px;
+    }
+    .div {
+      padding: 0 8px;
+    }
+    .strong {
+      color: #ae7b2b;
+    }
+    p {
+      padding: 4px 8px;
+    }
+    .img {
+      width: 100%;
+      height: auto;
+      display: block;
+    }
+    .lable {
+      font-weight: 600;
+      text-align: center;
+    }
+    .icon-way {
+      display: inline-block;
+      width: 15px;
+      height: 15px;
+      vertical-align: middle;
+    }
+    .table {
+      border-collapse: collapse;
+      width: 100%;
+      margin-bottom: 20px;
+      th,
+      td {
+        padding: 10px;
+      }
+    }
+  }
+}
+</style>

src/views/login.vue

@@ -0,0 +1,232 @@
+<template>
+  <div class="login">
+    <div class="langview">
+      <div class="select" @click="showLangselect(true)">
+        {{ langList[Type] }}
+      </div>
+      <div class="select-box" v-show="langselect">
+        <div
+          class="option"
+          v-for="item in Object.keys(langList)"
+          :key="item"
+          :class="{ active: item == Type }"
+          @click="choseLang(item)"
+        >
+          {{ langList[item] }}
+        </div>
+      </div>
+    </div>
+    <div class="content">
+      <van-field
+        class="input"
+        v-model="username"
+        type="text"
+        :label="Lang[Type].account"
+      />
+      <van-field
+        class="input"
+        v-model="password"
+        :type="showPassword ? 'text' : 'password'"
+        :label="Lang[Type].password"
+      >
+        <template #right-icon>
+          <van-icon
+            @click="showPassword = !showPassword"
+            :name="showPassword ? 'eye-o' : 'closed-eye'"
+          />
+        </template>
+      </van-field>
+      <div class="btn" @click="doLogin('login')">{{ Lang[Type].login }}</div>
+      <div class="btn" @click="doLogin('dome')">{{ Lang[Type].dome }}</div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref, computed, onMounted } from "vue"
+import { useStore } from "vuex"
+import { showToast, showFailToast, showLoadingToast } from "vant"
+import { useRouter } from "vue-router"
+import { login, dome } from "@/utils/api"
+export default {
+  name: "LoginPage",
+  components: {},
+  setup() {
+    const langList = {
+      cn: "简体中文",
+      tw: "繁體中文",
+      en: "English",
+      yn: "Việt nam",
+      kr: "한국어",
+      tl: "แบบไทย",
+      in: "Indonesia"
+    }
+    const langselect = ref(false)
+    const router = useRouter()
+    const store = useStore()
+    const Type = computed(() => store.state.config.$Type)
+    const Lang = computed(() => store.state.config.$lang)
+    const showPassword = ref(false)
+    // const username = ref("488507782")
+    // const password = ref("123321")
+    const username = ref("")
+    const password = ref("")
+    const doLogin = (type) => {
+      const o = navigator.userAgent
+      const isAndroid = o.indexOf("Android") > -1 || o.indexOf("Adr") > -1 //android终端
+      const isiOS = !!o.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) //ios终端
+      const client = isAndroid ? 3 : isiOS ? 2 : 1
+      const params = {
+        username: username.value,
+        password: password.value,
+        client
+      }
+      if (type == "login" && !params.username) {
+        showToast({ message: Lang.value[Type.value].please_account })
+      } else if (type == "login" && !params.password) {
+        showToast({ message: Lang.value[Type.value].please_password })
+      } else {
+        const api = type == "dome" ? dome : login
+        if (type == "dome") {
+          params.token = "shiwanlogin"
+        }
+        showLoadingToast({
+          message: Lang.value[Type.value].loging,
+          forbidClick: true
+        })
+        api(params)
+          .then((res) => {
+            if (res.Success) {
+              store.commit("app/updateUserInfo", res.Data)
+              // store.dispatch("app/init")
+              router.push("/hall")
+            } else {
+              showToast({ message: res.Msg })
+            }
+          })
+          .catch((err) => {
+            showFailToast({ message: err })
+          })
+      }
+    }
+    const showLangselect = (state) => {
+      langselect.value = state
+    }
+    const choseLang = (lang) => {
+      store.commit("config/updateLang", lang)
+      langselect.value = false
+    }
+    onMounted(() => {
+      let userInfo = {}
+      try {
+        userInfo = JSON.parse(localStorage.getItem("userInfo"))
+      } catch (err) {
+        console.log(err)
+      }
+      if (userInfo && userInfo.online_token) {
+        router.push("/hall")
+      }
+    })
+    return {
+      langselect,
+      langList,
+      Type,
+      Lang,
+      username,
+      password,
+      showPassword,
+      doLogin,
+      showLangselect,
+      choseLang
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.login {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: #0d0d0d;
+  transform: rotateX(0deg);
+  .langview {
+    position: absolute;
+    top: 0.5rem;
+    right: 1rem;
+    .select {
+      border-radius: 0.2rem;
+      width: 2.5rem;
+      display: inline-block;
+      font-size: 0.45rem;
+      color: #c5a059;
+      line-height: 0.88rem;
+      background: #1a1a1a;
+      border: 1px solid #333;
+      text-align: center;
+      &:active {
+        opacity: 0.6;
+      }
+    }
+    .select-box {
+      position: absolute;
+      right: 0;
+      top: 1.4rem;
+      width: 2.5rem;
+      line-height: 0.88rem;
+      background: #1e1e1e;
+      border: 1px solid #333;
+      border-radius: 0.2rem;
+      text-align: center;
+      color: #fff;
+      font-size: 0.4rem;
+      z-index: 9;
+      .option:active {
+        opacity: 0.6;
+      }
+      .active {
+        color: #c5a059;
+        font-weight: bold;
+      }
+    }
+  }
+  .content {
+    width: 240px;
+    .input {
+      border-radius: 40px;
+      margin: 20px 0;
+      padding: 8px 15px;
+      background: #1e1e1e;
+      border: 1px solid #333;
+      ::v-deep .van-field__label {
+        min-width: 40px;
+        width: auto;
+        color: #888;
+      }
+      ::v-deep .van-field__control {
+        color: #fff;
+      }
+      ::v-deep .van-icon {
+        color: #666;
+      }
+    }
+    .btn {
+      width: 100%;
+      height: 40px;
+      line-height: 40px;
+      text-align: center;
+      font-size: 18px;
+      background: linear-gradient(135deg, #c5a059 0%, #d4af37 50%, #c5a059 100%);
+      border-radius: 40px;
+      color: #000;
+      font-weight: 600;
+      margin-bottom: 10px;
+      box-shadow: 0 4px 12px rgba(197, 160, 89, 0.3);
+      &:active {
+        opacity: 0.8;
+      }
+    }
+  }
+}
+</style>

src/views/test.vue

@@ -0,0 +1,105 @@
+<template>
+  <div id="demo">
+    <div>
+      <div span="9">
+        <div class="demo-input">
+          <input
+            v-model="value"
+            maxlength="10"
+            show-word-limit
+            clearable
+            placeholder="请输入添加项..."
+            style="width: 200px"
+          />
+          <button class="add-btn" type="success" @click="handleAdd">
+            添加
+          </button>
+        </div>
+      </div>
+      <div span="15"><span></span></div>
+    </div>
+    <div class="demo-input remove-btn">
+      <h3>数据展示区:</h3>
+      <transition-group name="myfade" tag="ul">
+        <li v-for="item in dataList" :key="item.id">
+          {{ item.label }} {{ item.id }}
+          <button type="text" @click="handleRemove(item)">remove</button>
+        </li>
+      </transition-group>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "demoPage",
+  data() {
+    return {
+      value: "",
+      dataList: []
+    }
+  },
+  methods: {
+    //添加子项
+    handleAdd() {
+      this.dataList.push({
+        id: new Date().getTime(),
+        label: this.value
+      })
+      this.value = ""
+      console.log(this.dataList)
+    },
+    //删除子项
+    handleRemove(row) {
+      console.log(row.id)
+      this.dataList = this.dataList.filter((item) => item.id != row.id)
+      console.log("删除操作", this.dataList)
+    }
+  }
+}
+</script>
+
+<style scoped>
+#demo {
+  background: #fff;
+}
+.demo-input {
+  padding: 20px 10px;
+}
+.add-btn {
+  margin-left: 10px;
+}
+.remove-btn li {
+  width: 270px;
+  height: 30px;
+  display: flex;
+  line-height: 30px;
+  margin-bottom: 5px;
+  padding: 0 10px;
+  justify-content: space-between;
+}
+.remove-btn li:hover {
+  border: 1px solid rgba(0, 0, 0, 0.1);
+}
+.remove-btn >>> .ivu-btn-text {
+  color: #57a3f3;
+}
+.remove-btn >>> .ivu-btn-text:hover {
+  color: red;
+  background: transparent;
+}
+.remove-btn >>> .ivu-btn-text:focus {
+  box-shadow: none;
+}
+/* 效果过程 */
+.myfade-enter-active,
+.myfade-leave-active {
+  transition: all 0.8s linear;
+}
+/* 进场的瞬间与离场的效果添加 */
+.myfade-enter-from,
+.myfade-leave-to {
+  opacity: 0;
+  transform: translateX(200px);
+}
+</style>