update

.env.test

@@ -1 +1,4 @@
-# TARO_APP_ID="测试环境下的小程序appid"
+# TARO_APP_ID="测试环境下的小程序appid"
+
+TARO_APP_API="https://shake.wanzhuanyongcheng.cn"
+TARO_APP_WS="shake.wanzhuanyongcheng.cn"

config/index.js

@@ -81,6 +81,9 @@ export default defineConfig(async (merge, { command, mode }) => {
     h5: {
       publicPath: "/",
       staticDirectory: "static",
+      router: {
+        mode: "browser", // 或者是 'browser'
+      },
       output: {
         filename: "js/[name].[hash:8].js",
         chunkFilename: "js/[name].[chunkhash:8].js",

package.json

@@ -1,100 +1,102 @@
 {
-  "name": "swayBall",
-  "version": "1.0.0",
-  "private": true,
-  "description": "",
-  "templateInfo": {
-    "name": "default",
-    "typescript": false,
-    "css": "Sass",
-    "framework": "Vue3"
-  },
-  "scripts": {
-    "build:weapp": "taro build --type weapp",
-    "build:swan": "taro build --type swan",
-    "build:alipay": "taro build --type alipay",
-    "build:tt": "taro build --type tt",
-    "build:h5": "taro build --type h5",
-    "build:h5:test": "taro build --type h5 --mode test",
-    "build:rn": "taro build --type rn",
-    "build:qq": "taro build --type qq",
-    "build:jd": "taro build --type jd",
-    "build:quickapp": "taro build --type quickapp",
-    "build:harmony-hybrid": "taro build --type harmony-hybrid",
-    "dev:weapp": "npm run build:weapp -- --watch",
-    "dev:swan": "npm run build:swan -- --watch",
-    "dev:alipay": "npm run build:alipay -- --watch",
-    "dev:tt": "npm run build:tt -- --watch",
-    "dev:h5": "npm run build:h5 -- --watch",
-    "dev:rn": "npm run build:rn -- --watch",
-    "dev:qq": "npm run build:qq -- --watch",
-    "dev:jd": "npm run build:jd -- --watch",
-    "dev:quickapp": "npm run build:quickapp -- --watch",
-    "dev:harmony-hybrid": "npm run build:harmony-hybrid -- --watch",
-    "test": "jest",
-    "postinstall": "weapp-tw patch"
-  },
-  "browserslist": [
-    "last 3 versions",
-    "Android >= 4.1",
-    "ios >= 8"
-  ],
-  "author": "",
-  "dependencies": {
-    "@alova/adapter-taro": "^1.2.1",
-    "@babel/runtime": "^7.21.5",
-    "@icon-park/vue-next": "^1.4.2",
-    "@nutui/nutui-taro": "^4.3.11",
-    "@tarojs/components": "3.6.32",
-    "@tarojs/helper": "3.6.32",
-    "@tarojs/plugin-framework-vue3": "3.6.32",
-    "@tarojs/plugin-html": "^3.6.32",
-    "@tarojs/plugin-platform-alipay": "3.6.32",
-    "@tarojs/plugin-platform-h5": "3.6.32",
-    "@tarojs/plugin-platform-harmony-hybrid": "3.6.32",
-    "@tarojs/plugin-platform-jd": "3.6.32",
-    "@tarojs/plugin-platform-qq": "3.6.32",
-    "@tarojs/plugin-platform-swan": "3.6.32",
-    "@tarojs/plugin-platform-tt": "3.6.32",
-    "@tarojs/plugin-platform-weapp": "3.6.32",
-    "@tarojs/runtime": "3.6.32",
-    "@tarojs/shared": "3.6.32",
-    "@tarojs/taro": "3.6.32",
-    "alova": "^2.21.3",
-    "tcplayer.js": "^5.1.0",
-    "vue": "^3.0.0",
-    "xgplayer": "^3.0.18",
-    "xgplayer-flv": "^3.0.18"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.8.0",
-    "@nutui/auto-import-resolver": "^1.0.0",
-    "@tarojs/cli": "3.6.32",
-    "@tarojs/taro-loader": "3.6.32",
-    "@tarojs/test-utils-vue3": "^0.1.1",
-    "@tarojs/webpack5-runner": "3.6.32",
-    "@types/jest": "^29.3.1",
-    "@types/node": "^18.15.11",
-    "@types/webpack-env": "^1.13.6",
-    "@vue/babel-plugin-jsx": "^1.0.6",
-    "@vue/compiler-sfc": "^3.0.0",
-    "autoprefixer": "^10.4.19",
-    "babel-preset-taro": "3.6.32",
-    "css-loader": "3.4.2",
-    "eslint": "^8.12.0",
-    "eslint-config-taro": "3.6.32",
-    "eslint-plugin-vue": "^8.0.0",
-    "jest": "^29.3.1",
-    "jest-environment-jsdom": "^29.5.0",
-    "postcss": "^8.4.39",
-    "postcss-rem-to-responsive-pixel": "^6.0.1",
-    "style-loader": "1.3.0",
-    "stylelint": "^14.4.0",
-    "tailwindcss": "^3.4.4",
-    "ts-node": "^10.9.1",
-    "unplugin-vue-components": "^0.27.2",
-    "vue-loader": "^17.1.0",
-    "weapp-tailwindcss": "^3.3.3",
-    "webpack": "5.78.0"
-  }
+	"name": "swayBall",
+	"version": "1.0.0",
+	"private": true,
+	"description": "",
+	"templateInfo": {
+		"name": "default",
+		"typescript": false,
+		"css": "Sass",
+		"framework": "Vue3"
+	},
+	"scripts": {
+		"build:weapp": "taro build --type weapp",
+		"build:swan": "taro build --type swan",
+		"build:alipay": "taro build --type alipay",
+		"build:tt": "taro build --type tt",
+		"build:h5": "taro build --type h5",
+		"build:h5:test": "taro build --type h5 --mode test",
+		"build:rn": "taro build --type rn",
+		"build:qq": "taro build --type qq",
+		"build:jd": "taro build --type jd",
+		"build:quickapp": "taro build --type quickapp",
+		"build:harmony-hybrid": "taro build --type harmony-hybrid",
+		"dev:weapp": "npm run build:weapp -- --watch",
+		"dev:swan": "npm run build:swan -- --watch",
+		"dev:alipay": "npm run build:alipay -- --watch",
+		"dev:tt": "npm run build:tt -- --watch",
+		"dev:h5": "npm run build:h5 -- --watch",
+		"dev:rn": "npm run build:rn -- --watch",
+		"dev:qq": "npm run build:qq -- --watch",
+		"dev:jd": "npm run build:jd -- --watch",
+		"dev:quickapp": "npm run build:quickapp -- --watch",
+		"dev:harmony-hybrid": "npm run build:harmony-hybrid -- --watch",
+		"test": "jest",
+		"postinstall": "weapp-tw patch"
+	},
+	"browserslist": [
+		"last 3 versions",
+		"Android >= 4.1",
+		"ios >= 8"
+	],
+	"author": "",
+	"dependencies": {
+		"@alova/adapter-taro": "^1.2.1",
+		"@babel/runtime": "^7.21.5",
+		"@icon-park/vue-next": "^1.4.2",
+		"@nutui/nutui-taro": "^4.3.11",
+		"@tarojs/components": "3.6.34",
+		"@tarojs/helper": "3.6.34",
+		"@tarojs/plugin-framework-vue3": "3.6.34",
+		"@tarojs/plugin-html": "3.6.34",
+		"@tarojs/plugin-platform-alipay": "3.6.34",
+		"@tarojs/plugin-platform-h5": "3.6.34",
+		"@tarojs/plugin-platform-harmony-hybrid": "3.6.32",
+		"@tarojs/plugin-platform-jd": "3.6.34",
+		"@tarojs/plugin-platform-qq": "3.6.34",
+		"@tarojs/plugin-platform-swan": "3.6.34",
+		"@tarojs/plugin-platform-tt": "3.6.34",
+		"@tarojs/plugin-platform-weapp": "3.6.34",
+		"@tarojs/runtime": "3.6.34",
+		"@tarojs/shared": "3.6.34",
+		"@tarojs/taro": "3.6.34",
+		"alova": "^2.21.3",
+		"lottie-web": "^5.12.2",
+		"tcplayer.js": "^5.1.0",
+		"vue": "^3.0.0",
+		"xgplayer": "^3.0.18",
+		"xgplayer-flv": "^3.0.18"
+	},
+	"devDependencies": {
+		"@babel/core": "^7.8.0",
+		"@nutui/auto-import-resolver": "^1.0.0",
+		"@tarojs/cli": "3.6.34",
+		"@tarojs/taro-loader": "3.6.34",
+		"@tarojs/test-utils-vue3": "^0.1.1",
+		"@tarojs/webpack5-runner": "3.6.34",
+		"@types/jest": "^29.3.1",
+		"@types/node": "^18.15.11",
+		"@types/webpack-env": "^1.13.6",
+		"@vue/babel-plugin-jsx": "^1.0.6",
+		"@vue/compiler-sfc": "^3.0.0",
+		"autoprefixer": "^10.4.19",
+		"babel-preset-taro": "3.6.34",
+		"css-loader": "3.4.2",
+		"eslint": "^8.12.0",
+		"eslint-config-taro": "3.6.34",
+		"eslint-plugin-vue": "^8.0.0",
+		"jest": "^29.3.1",
+		"jest-environment-jsdom": "^29.5.0",
+		"postcss": "^8.4.39",
+		"postcss-rem-to-responsive-pixel": "^6.0.1",
+		"style-loader": "1.3.0",
+		"stylelint": "^14.4.0",
+		"tailwindcss": "^3.4.4",
+		"ts-node": "^10.9.1",
+		"unplugin-vue-components": "^0.27.2",
+		"vue-loader": "^17.1.0",
+		"weapp-tailwindcss": "^3.3.3",
+		"webpack": "5.78.0"
+	},
+	"packageManager": "pnpm@9.1.4+sha512.9df9cf27c91715646c7d675d1c9c8e41f6fce88246f1318c1aa6a1ed1aeb3c4f032fcdf4ba63cc69c4fe6d634279176b5358727d8f2cc1e65b65f43ce2f8bfb0"
 }

src/api/index.js

@@ -4,7 +4,13 @@ export const GetBetOptList = async (type) =>
   await alovaInst.Get(`/dice/shake?type=${type}`);
 export const GetUserInfo = async (uid) =>
   await alovaInst.Get(`/dice/userShakeInfo?uid=${uid}`);
-export const GetBetRecord = async (uid) =>
-  await alovaInst.Get(`/dice/userShakeRecord?uid=${uid}`);
+export const GetBetRecord = async (data) =>
+  await alovaInst.Get(
+    `/dice/userShakeRecord?uid=${data.uid}&PageNum=${data.PageNum}&PageSize=${data.PageSize}`
+  );
 export const GetLotteryRecord = async (uid) =>
   await alovaInst.Get(`/dice/draw?uid=${uid}`);
+export const GetPeriod = async () => await alovaInst.Get(`/dice/periods`);
+
+export const GetIsWin = async (uid) =>
+  await alovaInst.Get(`/dice/user/win?uid=${uid}`);

src/pages/bet_record/index.vue

@@ -1,39 +1,54 @@
 <template>
   <view>
-    <view class="p-[30px]">
-      <view class="h-[155px] line" v-for="(item, index) in data" :key="index">
+    <view class="p-[30px]" v-if="data.length !== 0">
+      <view
+        class="pt-[10px] pb-[10px] line"
+        v-for="(item, index) in data"
+        :key="index"
+      >
         <view class="flex justify-between text-[#959BB1] text-[28px]">
           <view>{{ item.qs }}</view>
           <view>{{ item.t }}</view>
         </view>
-        <view class="flex mt-[20px] justify-between items-center">
+        <view class="flex justify-between items-center">
           <view class="flex justify-between items-center">
-            <view
-              class="m-[5px] rounded-full w-[44px] h-[44px] text-[28px] text-center leading-[44px]"
-              v-for="(itm, index) in item.hm"
-              :key="index"
-            >
-              <view
-                class="mr-[10] text-[28px] text-[#959BB1]"
-                v-if="item.type !== 2"
-                >{{ itm }}
-              </view>
-              <view
+            <view v-for="(itm, index) in item.hm" :key="index">
+              <!--  v-if="item.type !== 2" -->
+              <view class="mr-[10] text-[28px] text-[#959BB1]">{{ itm }} </view>
+              <!-- <view
                 v-else
                 class="rounded-full border-[1px] border-[#000] text-[28px] text-center leading-[44px]"
                 :style="{
                   color: itm.color,
                 }"
                 >{{ itm.num }}</view
-              >
+              > -->
             </view>
           </view>
           <view v-if="item.j" class="text-[#088207] text-[28px]"
             >- {{ item.j }} 豆子</view
           >
         </view>
+        <view class="flex items-center justify-between" v-if="item.state === 1">
+          <view class="text-[28px] flex items-center">
+            <view class="text-[#959BB1]">状态：</view>
+            <view class="text-[red]">已中奖</view>
+          </view>
+          <view v-if="item.state === 1" class="text-[28px] flex">
+            <view class="text-[#959BB1]">得</view>
+            <view class="text-[red]">{{ item.draw_num }}</view>
+            <view class="text-[#959BB1]">积分</view>
+          </view>
+        </view>
+        <!-- <view v-if="item.state === 1" class="flex items-center justify-between">
+          <view class="text-[28px] flex items-center">
+            <view class="text-[#959BB1]">中奖数字：</view>
+            <view class="text-[#959BB1]">{{ item.periods_num }}</view>
+          </view>
+        </view> -->
       </view>
     </view>
+    <view v-else class="text-[#959BB1] text-center">暂无记录</view>
   </view>
 </template>
 
@@ -75,21 +90,53 @@ const uid = ref("");
 // ]);
 const data = ref([]);
 
+const page = ref({
+  page: 1,
+  size: 20,
+  total: 0,
+});
+
 Taro.useLoad((opt) => {
   uid.value = opt.uid;
+});
+
+Taro.useDidShow(() => {
+  getList();
+});
+
+Taro.useReachBottom(() => {
+  if (page.value.total === data.value.length)
+    return Taro.showToast({
+      title: "没有更多了",
+      icon: "none",
+    });
+  page.value.page++;
   getList();
 });
 
 const getList = async () => {
-  const res = await GetBetRecord(uid.value);
-  // console.log(res);
-  data.value = res.data.map((item) => ({
-    type: 1,
-    qs: `第${item.Periods}期`,
-    hm: [item.Name],
-    t: item.DrawTime,
-    j: item.Number,
-  }))
+  Taro.showLoading({
+    title: "加载中",
+  });
+  const res = await GetBetRecord({
+    uid: uid.value,
+    PageNum: page.value.page,
+    PageSize: page.value.size,
+  });
+  const arr =
+    res.data.map((item) => ({
+      type: 1,
+      qs: `第${item.Periods}期`,
+      hm: [item.Name],
+      t: item.DrawTime,
+      j: item.Number,
+      draw_num: item.DrawNum,
+      state: item.State,
+      periods_num: item.PeriodsNum,
+    })) || [];
+  data.value.push(...arr);
+  page.value.total = res.total;
+  Taro.hideLoading();
 };
 </script>
 

src/pages/index/index.scss

@@ -21,14 +21,61 @@
 }
 
 .nut-popover-content {
-  width: 150px;
-  font-size: 30px;
+  width: 300px;
+
+  .nut-popover-menu-item {
+    height: 100px;
+    font-size: 30px;
+  }
 }
 
 .popover .nut-popover-content {
-  width: 1000px;
+  width: 600px;
   height: 700px;
   font-size: 30px;
   overflow: auto;
   border-radius: 0px;
 }
+
+#lottie {
+  position: fixed;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.8);
+
+  .lottie-text {
+    position: absolute;
+    top: 59%;
+    left: 50%;
+    transform: translateX(-50%);
+    color: #b81801;
+    text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff,
+      2px 2px 0 #fff;
+    font-size: 80px;
+    font-weight: bold;
+  }
+
+  .lottie-bg {
+    position: absolute;
+    left: 50%;
+    bottom: 5%;
+    transform: translateX(-50%);
+    background-image: url("../../static/img_0.png");
+    background-size: 100% 100%;
+    width: 700px;
+    height: 300px;
+    animation: lottie 0.3s linear forwards;
+    text-align: center;
+    line-height: 310px;
+    overflow: hidden;
+
+    .lottie-num {
+      color: #b81801;
+      text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff,
+        2px 2px 0 #fff;
+      font-size: 45px;
+      font-weight: bold;
+    }
+  }
+}

src/utils/request.js

@@ -4,11 +4,12 @@ import AdapterTaroVue from "@alova/adapter-taro/vue";
 
 const alovaInst = createAlova({
   baseURL: process.env.TARO_APP_API,
+  localCache: null,
   ...AdapterTaroVue(),
   beforeRequest: (instance) => {
     instance.config.headers = {
       "Content-Type": "application/json",
-      token: getStorageSync("token"),
+      // token: getStorageSync("token"),
     };
   },
   responded: {