update

src/App.vue

@@ -5,6 +5,14 @@ import { useRouter } from 'vue-router'
 const store = useCounterStore()
 // store.getSystemInfo()
 // store.getUserInfo()
+
+const i = 'orientationchange' in window ? 'orientationchange' : 'resize'
+const setViewHeight = () => {
+  const windowVH = window.innerHeight / 100
+  document.documentElement.style.setProperty('--vh', windowVH + 'px')
+}
+document.addEventListener('DOMContentLoaded', setViewHeight)
+window.addEventListener(i, setViewHeight)
 onLaunch(() => {
   store.token = uni.getStorageSync('token') || null
   store.userId = uni.getStorageSync('userId') || null

src/api/index/index.ts

@@ -222,3 +222,27 @@ export function rongziApi(data: rongziType) {
     data
   })
 }
+
+// 抽奖次数
+export function getLotteryCountApi() {
+  return request({
+    url: `${config.baseURL}/index/lottery_count`,
+    method: 'get'
+  })
+}
+
+// 抽奖结果
+export function getLotteryDrawApi() {
+  return request({
+    url: `${config.baseURL}/index/lottery_draw`,
+    method: 'get'
+  })
+}
+
+// 抽奖历史
+export function getLotteryHistoryApi() {
+  return request({
+    url: `${config.baseURL}/index/lottery_history`,
+    method: 'get'
+  })
+}

src/langurage/cn.ts

@@ -94,7 +94,13 @@ const messages = {
     button3: '帳務',
     button4: '交易明细',
     tip1: '未实名',
-    tip2: '详细'
+    tip2: '详细',
+    gujiang: '刮奖',
+    guajiangRecord: '中奖记录',
+    guajiangTitle: '恭喜中奖！',
+    guajiangButton: '确定',
+    guajiangSuccess: '恭喜您抽中',
+    guajiangFail: '很遗憾'
   },
   gupiaoDetail: {
     title: '股票详情',

src/langurage/ja.ts

@@ -541,7 +541,13 @@ const messages = {
     button3: 'アカウント',
     button4: '取引履歴',
     tip1: 'ご本人確認が未完了',
-    tip2: '詳しい'
+    tip2: '詳しい',
+    guajiang: 'SQPイベント抽選',
+    guajiangRecord: '当選記録',
+    guajiangTitle: '優勝おめでとうございます',
+    guajiangButton: '確認',
+    guajiangSuccess: '優勝',
+    guajiangFail: 'ごめん'
   },
   gupiaoDetail: {
     title: '銘柄詳細',

src/pages.json

@@ -115,6 +115,12 @@
           "style": {
             "navigationStyle": "custom"
           }
+        },
+        {
+          "path": "guajiang/guajiang",
+          "style": {
+            "navigationStyle": "custom"
+          }
         }
       ]
     },

src/pages/index/index.vue

@@ -218,9 +218,11 @@ const button4 = computed(() => t('index.button4'))
 const button6 = computed(() => t('hongli.title'))
 const button8 = computed(() => t('rongzi.title'))
 const button7 = computed(() => t('index.button2'))
+// const guajiang = computed(() => t('index.guajiang'))
 const buttonList = [
   { label: button1, icon: '/static/image/index/icon_1.png', url: '/subPackages/index/ipo/ipo' },
   { label: button6, icon: '/static/image/index/icon_6.png', url: '/subPackages/index/hongli/hongli' },
+  // { label: guajiang, icon: '/static/image/index/guajiang2.png', url: '/subPackages/index/guajiang/guajiang' },
   { label: button2, icon: '/static/image/index/icon_5.png', url: '/subPackages/index/dadan/dadan' },
 
   // { label: button2, icon: '/static/image/index/icon_2.png', url: '/subPackages/customerService/customerService' },

src/pages/user/user.vue

@@ -93,7 +93,6 @@ import { useCounterStore } from '@/store/store'
 import { onShow } from '@dcloudio/uni-app'
 import { getCzhiurlApi } from '@/api/user'
 import { changeMoney } from '@/common/common'
-import { showToast } from 'vant'
 import bg from '@/static/bg.png'
 import right from '@/static/rigth.png'
 import set from '@/static/image/searchNavigation/set.png'
@@ -123,8 +122,8 @@ const desensitization = (str: string) => {
 }
 
 const goWeb = () => {
-  showToast(t('user.tip1'))
-  // window.open(kefu_url.value)
+  // showToast(t('user.tip1'))
+  window.open(kefu_url.value)
 }
 onMounted(() => {
   const myChart = echarts.init(document.getElementById('zichan-chart'))

src/style/index.scss

 * {
   box-sizing: border-box;
-  color: $uni-text-color;
 }
 
 .van-toast__text {

src/subPackages/index/guajiang/guajiang.vue

+<template>
+  <div class="container">
+    <div class="bg">
+      <div class="bgTitle"></div>
+      <div class="content" @click="openCanvas">
+        <img :src="guajiangStatus ? yigua : weigua" alt="" />
+        <div class="center">{{ guajiangResult }}</div>
+      </div>
+      <div class="canvasWrap" @click="choose">
+        <canvas ref="bottomCanvas" canvas-id="bottomCanvas" class="bottomCanvas"></canvas>
+        <canvas ref="topCanvas" canvas-id="topCanvas" class="topCanvas" @touchmove="touchmove"></canvas>
+        <div class="center">{{ guajiangResult }}</div>
+      </div>
+      <div class="bottom">
+        <div class="row" @click="recordWindow = true">
+          <image src="/static/image/index/guajiang/gift.png" mode="" />
+          <span>{{ t('index.guajiangRecord') }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+  <van-popup v-model:show="showWindow" class="window">
+    <div class="title">{{ t('index.guajiangTitle') }}</div>
+    <div class="center">{{ guajiangResult }}</div>
+    <div class="button" @click="showWindow = false">{{ t('index.guajiangButton') }}</div>
+  </van-popup>
+
+  <van-popup v-model:show="recordWindow" position="bottom" class="recordWindow">
+    <div class="close" @click="recordWindow = false">
+      <van-icon name="cross" color="#fff" />
+    </div>
+    <div class="title">{{ t('index.guajiangRecord') }}</div>
+    <div v-if="recordList.length === 0" class="nodata">{{ t('common.nodata') }}</div>
+    <div class="recordList">
+      <div v-for="(item, index) in recordList" :key="index" class="row">
+        <div class="left">{{ item.status === 1 ? t('index.guajiangSuccess') : t('index.guajiangFail') }}</div>
+        <div class="center" :class="item.status === 1 ? 'success' : 'fail'">{{ item.name }}</div>
+        <div class="right">{{ timestempToDate(item.updatetime * 1000) }}</div>
+      </div>
+    </div>
+  </van-popup>
+
+  <van-popup v-model:show="canvasShow" class="canvasWindow">
+    <div class="canvasWrap" @click="choose">
+      <canvas ref="bottomCanvas" canvas-id="bottomCanvas" class="bottomCanvas"></canvas>
+      <canvas ref="topCanvas" canvas-id="topCanvas" class="topCanvas" @touchmove="touchmove"></canvas>
+      <div class="center">{{ guajiangResult }}</div>
+    </div>
+  </van-popup>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { getLotteryHistoryApi, getLotteryDrawApi, getLotteryCountApi } from '@/api/index'
+import { onShow } from '@dcloudio/uni-app'
+import weigua from '@/static/image/index/guajiang/weigua.png'
+import yigua from '@/static/image/index/guajiang/yigua.png'
+import { useI18n } from 'vue-i18n'
+import { timestempToDate } from '@/common/common'
+const { t } = useI18n()
+
+const guajiangStatus = ref(false)
+const showWindow = ref(false)
+const recordWindow = ref(false)
+const guajiangResult = ref('')
+const recordList = ref([])
+const guajiangCount = ref(0)
+
+onShow(() => {
+  // getLotteryCount()
+  getLotteryHistoryList()
+  getLotteryCount()
+  initBottomCanvas()
+  initTopCanvas()
+})
+
+const bottomCtx = ref(null)
+const bottomCanvas = ref(null)
+const topCtx = ref(null)
+const topCanvas = ref(null)
+const canvasShow = ref(false)
+
+const openCanvas = () => {
+  canvasShow.value = true
+  initBottomCanvas()
+  initTopCanvas()
+}
+
+const initBottomCanvas = () => {
+  setTimeout(() => {
+    // 底图
+    bottomCtx.value = uni.createCanvasContext('bottomCanvas')
+    const backgroundImage = new Image()
+    backgroundImage.src = yigua
+    backgroundImage.onload = function () {
+      console.log(backgroundImage.currentSrc, bottomCanvas.value.$el.clientWidth)
+      bottomCtx.value.drawImage(backgroundImage.currentSrc, 0, 0, bottomCanvas.value.$el.clientWidth, bottomCanvas.value.$el.clientWidth)
+      bottomCtx.value.draw()
+    }
+  }, 0)
+}
+const initTopCanvas = () => {
+  setTimeout(() => {
+    // 顶部图
+    topCtx.value = uni.createCanvasContext('topCanvas')
+    const backgroundImage = new Image()
+    backgroundImage.src = weigua
+    backgroundImage.onload = function () {
+      topCtx.value.drawImage(backgroundImage.currentSrc, 0, 0, topCanvas.value.$el.clientWidth, topCanvas.value.$el.clientWidth)
+      topCtx.value.draw()
+    }
+  }, 0)
+}
+
+const touchmove = (e) => {
+  console.log(e)
+  if (!guajiangStatus.value) {
+    guajiang()
+    guajiangStatus.value = true
+  }
+  if (guajiangCount.value === 0) {
+    return
+  }
+  const x = e.changedTouches[0].x
+  const y = e.changedTouches[0].y
+  clearArcFun(x, y, 30, topCtx.value)
+  topCtx.value.draw(true)
+}
+
+const clearArcFun = (x, y, r, cxt) => {
+  // (x,y)为要清除的圆的圆心，r为半径，cxt为context
+  let stepClear = 1 // 别忘记这一步
+  clearArc(x, y, r)
+  function clearArc(x, y, radius) {
+    const calcWidth = radius - stepClear
+    const calcHeight = Math.sqrt(radius * radius - calcWidth * calcWidth)
+
+    const posX = x - calcWidth
+    const posY = y - calcHeight
+
+    const widthX = 2 * calcWidth
+    const heightY = 2 * calcHeight
+
+    if (stepClear <= radius) {
+      cxt.clearRect(posX, posY, widthX, heightY)
+      stepClear += 1
+      clearArc(x, y, radius)
+    }
+  }
+}
+
+// // 获取抽奖历史
+const getLotteryHistoryList = async () => {
+  const res = await getLotteryHistoryApi()
+
+  recordList.value = res.data
+}
+
+// // 获取抽奖次数
+const getLotteryCount = async () => {
+  const res = await getLotteryCountApi()
+  console.log(res)
+  guajiangCount.value = res.data.count
+}
+
+const guajiang = async () => {
+  guajiangStatus.value = false
+  guajiangResult.value = ''
+  const res = await getLotteryDrawApi()
+  if (res.code === 1) {
+    guajiangResult.value = res.data?.product?.name
+    getLotteryHistoryList()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.container {
+  overflow: hidden;
+  height: calc(var(--vh) * 100);
+  touch-action: none;
+}
+.bg {
+  background: url('@/static/image/index/guajiang/bg.png');
+  height: calc(var(--vh) * 100);
+  background-size: 100% 100%;
+  background-repeat: no-repeat;
+  overflow: hidden;
+  position: relative;
+  .bgTitle {
+    background: url('@/static/image/index/guajiang/title.png');
+    width: calc(100vw - 2.5rem);
+    height: 6.25rem;
+    object-fit: contain;
+    padding: 0 1.25rem;
+    background-size: 100% auto;
+    background-repeat: no-repeat;
+    margin: 5vh auto 0;
+  }
+}
+
+.content {
+  position: relative;
+  display: none;
+  img {
+    margin: 0 0.5rem;
+    width: calc(100vw - 1rem);
+  }
+  .center {
+    position: absolute;
+    text-align: center;
+    width: 80%;
+    left: 10%;
+    color: #8ebbff;
+    font-size: 1.63rem;
+    font-weight: bold;
+    top: 40%;
+  }
+}
+
+.canvasWrap {
+  margin: 0 0.5rem;
+  width: calc(100vw - 1rem);
+  height: calc(100vw - 1rem);
+  position: relative;
+  touch-action: manipulation;
+  canvas {
+    width: 100%;
+    height: calc(100vw - 1rem);
+    position: absolute;
+  }
+  .bottomCanvas {
+    z-index: 10;
+  }
+  .topCanvas {
+    z-index: 100;
+  }
+  .center {
+    position: absolute;
+    text-align: center;
+    width: 80%;
+    left: 10%;
+    color: #8ebbff;
+    font-size: 1.63rem;
+    font-weight: bold;
+    top: 43%;
+    z-index: 50;
+  }
+}
+
+.bottom {
+  display: flex;
+  justify-content: flex-end;
+  .row {
+    display: flex;
+    align-items: center;
+    margin: 1rem;
+    gap: 0.3rem;
+    span {
+      color: #fff;
+    }
+  }
+  image {
+    width: 1.44rem;
+    height: 1.44rem;
+  }
+}
+
+.window {
+  width: 21.56rem;
+  height: 16.25rem;
+  border-radius: 1rem;
+  padding: 1.38rem 1.56rem;
+  .title {
+    font-size: 1.13rem;
+    color: #004eaa;
+    text-align: center;
+  }
+  .center {
+    color: #8ebbff;
+    font-size: 1.63rem;
+    font-weight: bold;
+    margin: 2.31rem auto 3.88rem;
+    text-decoration: underline;
+    text-align: center;
+  }
+  .button {
+    width: 100%;
+    height: 2.75rem;
+    line-height: 2.75rem;
+    background: #004eaa;
+    border-radius: 1.38rem;
+    text-align: center;
+    font-weight: bold;
+    color: #fff;
+    font-size: 1.13rem;
+  }
+}
+
+.recordWindow {
+  height: 70vh;
+  background: #00000099;
+  border-radius: 1.25rem 1.25rem 0 0;
+  .close {
+    position: absolute;
+    right: 1rem;
+    top: 1rem;
+    .van-icon {
+      font-size: 1.33rem;
+      font-weight: bold;
+    }
+  }
+  .title {
+    margin: 1.88rem auto 1.56rem;
+    text-align: center;
+    color: #ffecb9;
+    font-weight: bold;
+    font-size: 1.13rem;
+    position: relative;
+    &::before {
+      content: '';
+      position: absolute;
+      width: 3.5rem;
+      height: 0.81rem;
+      background: url('@/static/image/index/guajiang/right.png');
+      background-size: 100% 100%;
+      left: 23vw;
+      top: 0.45rem;
+    }
+    &::after {
+      content: '';
+      position: absolute;
+      width: 3.5rem;
+      height: 0.81rem;
+      background: url('@/static/image/index/guajiang/left.png');
+      background-size: 100% 100%;
+      left: 62vw;
+      top: 0.45rem;
+    }
+  }
+
+  .recordList {
+    height: 51vh;
+    overflow: auto;
+    .row {
+      display: flex;
+      justify-content: space-between;
+      padding: 0 1rem;
+      height: 2.75rem;
+      align-items: center;
+      .left {
+        color: #fff;
+        font-size: 0.81rem;
+      }
+      .center {
+        max-width: 50vw;
+        font-size: 0.94rem;
+      }
+      .right {
+        color: #fff;
+        font-size: 0.7rem;
+      }
+      .success {
+        color: #8ebbff;
+      }
+      .fail {
+        color: #e80004;
+      }
+    }
+  }
+
+  .nodata {
+    color: #888;
+    font-size: 1.13rem;
+  }
+}
+.canvasWindow {
+  border-radius: 1rem;
+  padding: 1rem;
+  .canvasWrap {
+    margin: 0;
+    width: calc(100vw - 4rem);
+    height: calc(100vw - 4rem);
+    position: relative;
+    canvas {
+      width: 100%;
+      height: calc(100vw - 4rem);
+      position: absolute;
+    }
+    .bottomCanvas {
+      z-index: 10;
+    }
+    .topCanvas {
+      z-index: 100;
+    }
+    .center {
+      position: absolute;
+      text-align: center;
+      width: 80%;
+      left: 10%;
+      color: #8ebbff;
+      font-size: 1.63rem;
+      font-weight: bold;
+      top: 43%;
+      z-index: 50;
+    }
+  }
+}
+</style>

src/subPackages/login/login.vue

@@ -26,10 +26,6 @@
         <view class="button" @click="login">{{ t('login.button_text') }}</view>
         <view class="text" @click="goPage('/subPackages/register/register')">{{ t('login.register') }}</view>
       </view>
-
-      <!-- <view class="text_button mx-[1.88rem]">
-        <view @click="goWeb()">{{ t('login.forget_password') }}</view>
-      </view> -->
     </view>
   </view>
 </template>
@@ -41,9 +37,7 @@ import { loginApi } from '@/api/login/login'
 import { switchTab, goPage, checkInput } from '@/common/common'
 import { useCounterStore } from '@/store/store'
 import { showSuccessToast } from 'vant'
-import { getCzhiurlApi } from '@/api/user'
 import bg from '@/static/logo.png'
-import { onLoad } from '@dcloudio/uni-app'
 const { t } = useI18n()
 const store = useCounterStore()
 
@@ -52,22 +46,6 @@ const loginParams = ref({
   password: ''
 })
 
-const kefu_url = ref('')
-onLoad(() => {
-  getCzhiurlFn()
-})
-
-const getCzhiurlFn = async () => {
-  const res = await getCzhiurlApi()
-  if (res.code === 1) {
-    kefu_url.value = res.data.kefu_url
-  }
-}
-
-// const goWeb = () => {
-//   window.open(kefu_url.value)
-// }
-
 const checkArr = [
   { key: 'account', message: t('login.account_error') },
   { key: 'password', message: t('login.password_error') }