feat(custom): 大转盘第一版

src/pages/turntable/records/index.vue

@@ -0,0 +1,146 @@
+<template>
+    <view class="app">
+        <template v-if="typeNum === 1">
+            <view class="card" v-for="(item,index) in list as any[]" :key="index">
+                <view>
+                    <view>第{{ item.Periods }}期开奖</view>
+                    <view>
+                        开奖数字:
+                        <text
+                            :style="{
+                                color: numColor(item.Name),
+                            }"
+                        >
+                            {{ item.Name }}
+                        </text>
+                    </view>
+                    <view>开奖时间: {{ item.DrawTime }}</view>
+                </view>
+            </view>
+        </template>
+        <template v-else>
+            <view v-if="list.length > 0">
+                <view class="card desc" v-for="(item,index) in list as any[]" :key="index">
+                    <view>
+                        <view>第{{ item.Periods }}期投注:</view>
+                        <view>
+                            点数:
+                            <text style="color: red">{{ item.Name }}</text>
+                        </view>
+                        <view class="sub">
+                            投注时间:
+                            <text>{{ item.DrawTime }}</text>
+                        </view>
+                    </view>
+                    <view style="text-align: right">
+                        <view style="color: red" v-if="item.State === 1">
+                            +{{ item.DrawNum }}积分
+                        </view>
+                        <view style="color: green">-{{ item.Number }}豆子</view>
+                    </view>
+                </view>
+            </view>
+            <view v-else>
+                <view style="margin-top: 100px">暂无记录.....</view>
+            </view>
+        </template>
+    </view>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import Taro from '@tarojs/taro'
+
+const list = ref<any[]>([])
+
+const typeNum = ref(0)
+
+Taro.useLoad((options) => {
+    typeNum.value = Number(options.type)
+    Taro.setNavigationBarTitle({
+        title: options.type === '1' ? '开奖记录' : '投注记录',
+    })
+    getData()
+})
+
+Taro.usePullDownRefresh(() => {
+    getData()
+})
+
+const numColor = (num: string) => {
+    switch (num) {
+        case '大':
+            return 'red'
+        case '小':
+            return 'green'
+        case '单':
+            return 'orange'
+        case '双':
+            return 'blue'
+        case '和':
+            return 'purple'
+        default:
+            return 'black'
+    }
+}
+
+const getData = async () => {
+    if (typeNum.value === 1) {
+        Taro.request({
+            url: `${process.env.TARO_APP_TURNTABLE_API}/draw`,
+            method: 'GET',
+            success: ({ data: res }) => {
+                list.value = res.data.data || []
+            },
+        })
+    } else {
+        Taro.request({
+            url: `${
+                process.env.TARO_APP_TURNTABLE_API
+            }/userTurntableRecord?uid=${Taro.getStorageSync('uid')}`,
+            method: 'GET',
+            success: ({ data: res }) => {
+                console.log(res)
+                list.value = res.data.data || []
+            },
+        })
+    }
+    Taro.stopPullDownRefresh()
+}
+</script>
+
+<style lang="scss" scoped>
+.taro_page {
+    background-color: #f5f5f5 !important;
+}
+.app {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    //justify-content: center;
+    font-size: 35px;
+    width: 100%;
+    padding: 10px;
+    box-sizing: border-box;
+}
+
+.card {
+    width: 95%;
+    padding: 20px;
+    background-color: #fff;
+    margin-top: 10px;
+    border-radius: 10px;
+
+    .sub {
+        margin-top: 10px;
+        color: #555555;
+    }
+}
+
+.desc {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+}
+</style>