init

src/pages/records/index.vue

@@ -0,0 +1,141 @@
+<template>
+  <view class="app">
+    <template v-if="typeNum === 1">
+      <view class="card" v-for="(item, index) in list" :key="index">
+        <view>
+          <view>
+            第{{ item.Periods }}期开奖:
+            <text
+              v-for="(num, i) in item.Name"
+              :key="i"
+              :style="{
+                color: numColor(num),
+              }"
+            >
+              {{ num }},
+            </text>
+          </view>
+        </view>
+      </view>
+    </template>
+    <template v-else>
+      <view v-if="list.length > 0">
+        <view class="card desc" v-for="(item, index) in list" :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 setup>
+import { ref } from "vue";
+import Taro from "@tarojs/taro";
+import { getKaiJiangList, getTzJl } from "@/api";
+
+const list = ref([]);
+
+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) => {
+  switch (num) {
+    case "大":
+      return "red";
+    case "小":
+      return "green";
+    case "单":
+      return "orange";
+    case "双":
+      return "blue";
+    case "和":
+      return "purple";
+    default:
+      return "black";
+  }
+};
+
+const getData = async () => {
+  let res;
+  if (typeNum.value === 1) {
+    res = await getKaiJiangList();
+    list.value = res.data.data.map((item) => {
+      return {
+        ...item,
+        Name: item.Name.split("-"),
+      };
+    });
+  } else {
+    res = await getTzJl(Taro.getStorageSync("uid"));
+    list.value = res.data.data || [];
+  }
+  Taro.stopPullDownRefresh();
+};
+</script>
+
+<style lang="scss">
+.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>