From cffddd124c697ae6d2b288928ba11d359e5ccb2d Mon Sep 17 00:00:00 2001
From: ihzero <ihzero@163.com>
Date: Tue, 25 Jun 2024 00:08:38 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E7=AB=9E=E7=8C=9C=E8=AE=B0?=
 =?UTF-8?q?=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue                                   |   6 +
 src/components/quiz/item-new.vue              |  12 +-
 src/components/quiz/item.vue                  |  31 ++++--
 .../pages/activeDetail/activeDetail.vue       |   4 +-
 src/pages.json                                |   2 +-
 src/pages/charts/charts.vue                   |   4 +-
 src/pages/my/index.vue                        |  34 +++---
 src/pages/quiz/logs.vue                       | 104 ++++++++++++++++--
 8 files changed, 154 insertions(+), 43 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 1144cb7..ca47dac 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -132,6 +132,12 @@ button::after {
   margin-bottom: 16px;
 }
 
+.card-shadow {
+  background: #ffffff;
+  box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.04);
+  border-radius: 20rpx;
+}
+
 // 公共样式封装
 .board {
   border-radius: 6px;
diff --git a/src/components/quiz/item-new.vue b/src/components/quiz/item-new.vue
index b06fb5d..b3c6c03 100644
--- a/src/components/quiz/item-new.vue
+++ b/src/components/quiz/item-new.vue
@@ -9,9 +9,11 @@
         })
       "
     >
-      <view class="w-84rpx h-84rpx rounded-full flex-none">
-        <up-avatar size="84rpx" mode="aspectFit" :src="data.avatar"></up-avatar>
-      </view>
+      <up-avatar
+        :size="`70rpx`"
+        mode="aspectFit"
+        :src="data.avatar"
+      ></up-avatar>
       <view class="ml-10rpx flex-1">
         <view class="flex-1 flex justify-between items-center">
           <view class="text-28rpx text-primary">{{ data.nick_name }}</view>
@@ -20,8 +22,8 @@
         <view class="flex items-center text-sm">
           <view class="flex items-center flex-1">
             <view>猜</view>
-            <view class="px-3">
-              {{ data.game_home_field }} VS {{ data.game_away }}
+            <view class="px-2">
+              <text class="font-medium">{{ data.game_home_field }}</text> vs <text class="font-medium">{{ data.game_away }}</text>
             </view>
             <view>{{ data.score }}</view>
           </view>
diff --git a/src/components/quiz/item.vue b/src/components/quiz/item.vue
index 2286b5c..28f7c0b 100644
--- a/src/components/quiz/item.vue
+++ b/src/components/quiz/item.vue
@@ -1,18 +1,25 @@
 <template>
-  <view class="text-sm">
+  <view class="text-sm text-hex-333">
     <view class="p-3">
       <view>{{ data.game_day }} {{ data.game_name }}</view>
-      <view class="grid grid-cols-2 mt-2">
-        <view class="grid grid-cols-3 mr-20rpx">
-          <view>{{ data.game_home_field }}</view>
-          <view class="text-center">VS</view>
-          <view class="text-right">{{ data.game_away }}</view>
-        </view >
-        <view class="grid grid-cols-2 ml-40rpx">
-          <view>{{ data.score }}</view>
-          <view :style="{ color: currentStatus.color }" class="text-right">{{
-            currentStatus.label
-          }}</view>
+      <view class="flex mt-2">
+        <view class="flex-1">
+          <view class="flex">
+            <!-- <view >{{ data.game_home_field }}</view>
+            <view class="text-center mx-10rpx">vs</view>
+            <view class="text-right">{{ data.game_away }}</view> -->
+            <view class="flex-1 text-center">{{ data.game_home_field }}</view>
+            <view class="text-center mx-10rpx">vs</view>
+            <view class="flex-1 text-center">{{ data.game_away }}</view>
+          </view>
+        </view>
+        <view class="w-200rpx flex ml-20rpx">
+          <view class="w-100rpx text-center">{{ data.score }}</view>
+          <view
+            :style="{ color: currentStatus.color }"
+            class="text-right flex-1"
+            >{{ currentStatus.label }}</view
+          >
         </view>
       </view>
     </view>
diff --git a/src/packages/pages/activeDetail/activeDetail.vue b/src/packages/pages/activeDetail/activeDetail.vue
index 5421a9b..144601d 100644
--- a/src/packages/pages/activeDetail/activeDetail.vue
+++ b/src/packages/pages/activeDetail/activeDetail.vue
@@ -216,6 +216,8 @@
               :key="index"
               :data="item"
             ></Item>
+
+            <mescroll-empty v-if="!activeLogs.length"></mescroll-empty>
           </view>
         </view>
       </view>
@@ -1018,7 +1020,7 @@ onLoad((query) => {
 const handleGameRank = (e) => {
   vm.proxy.$goToPage({
     url: 'pages/quiz/logs',
-    params: { activity_id: detailId.value },
+    params: { activity_id: detailId.value, user_id: e.user_id },
   })
 }
 </script>
diff --git a/src/pages.json b/src/pages.json
index 34d73e5..37ba1df 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -46,7 +46,7 @@
     },{
       "path":"pages/quiz/logs",
       "style": {
-        "navigationBarTitleText": "活动详情"
+        "navigationBarTitleText": "竞猜记录"
       }
     }
   ],
diff --git a/src/pages/charts/charts.vue b/src/pages/charts/charts.vue
index 5421a9b..144601d 100644
--- a/src/pages/charts/charts.vue
+++ b/src/pages/charts/charts.vue
@@ -216,6 +216,8 @@
               :key="index"
               :data="item"
             ></Item>
+
+            <mescroll-empty v-if="!activeLogs.length"></mescroll-empty>
           </view>
         </view>
       </view>
@@ -1018,7 +1020,7 @@ onLoad((query) => {
 const handleGameRank = (e) => {
   vm.proxy.$goToPage({
     url: 'pages/quiz/logs',
-    params: { activity_id: detailId.value },
+    params: { activity_id: detailId.value, user_id: e.user_id },
   })
 }
 </script>
diff --git a/src/pages/my/index.vue b/src/pages/my/index.vue
index da1bcbf..ece8e04 100644
--- a/src/pages/my/index.vue
+++ b/src/pages/my/index.vue
@@ -3,8 +3,8 @@
     <view class="phone-warp">
       <view class="text-sm">人工客服</view>
       <view style="margin-top: 10rpx">
-				<up-text mode="phone" call text="400-9915-666"></up-text>
-			</view>
+        <up-text mode="phone" call text="400-9915-666"></up-text>
+      </view>
     </view>
   </view>
   <mescroll-body
@@ -42,8 +42,12 @@
             />
           </div>
         </view>
-        <view v-for="(block, index) in menus" :key="index">
-          <view class="block-box bg-white rounded-4px">
+        <view class="space-y-3">
+          <view
+            v-for="(block, index) in menus"
+            :key="index"
+            class="card-shadow overflow-hidden px-30rpx"
+          >
             <view v-for="(item, index) in block" :key="index">
               <view
                 class="flex text-primary items-center cell text-base"
@@ -55,7 +59,10 @@
                   <text class="text">{{ item.text }}</text>
                   <text class="extra" v-if="item.extra">{{ item.extra }}</text>
                 </view>
-                <image class="icon" src="@/static/icons/arrow.svg" />
+                <image
+                  class="w-30rpx h-30rpx opacity-50"
+                  src="@/static/icons/arrow.svg"
+                />
               </view>
 
               <view
@@ -223,18 +230,17 @@ const upCallback = (mescroll) => {
   // #ifdef H5
   bottom: 180rpx;
   // #endif
-	z-index: 9999;
+  z-index: 9999;
   left: 0;
-	width: 100%;
-	&-warp{
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-	}
+  width: 100%;
+  &-warp {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+  }
 }
 
-
 .icon {
   width: 20px;
   height: 20px;
diff --git a/src/pages/quiz/logs.vue b/src/pages/quiz/logs.vue
index a1edcf9..1894824 100644
--- a/src/pages/quiz/logs.vue
+++ b/src/pages/quiz/logs.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="">
+  <view class="bg-hex-1b2f85">
     <mescroll-body
       @init="mescrollInit"
       @down="downCallback"
@@ -20,24 +20,65 @@
             mode="widthFix"
             :src="`${config.baseUrl}/images/mini-bg.jpg`"
           ></image>
-          <view class="relative text-white space-x-2">
-            <view class="text-base">{{ detail.name }}</view>
-            <view class="text-xs mt-3">{{
-              dayjs(detail.start_at).format('YYYY-MM-DD')
-            }}</view>
+          <view class="relative text-white">
+            <view class="flex justify-between">
+              <view class="text-base font-medium">{{ detail.name }}</view>
+              <view class="text-xs" @click="showRuleModal">活动规则</view>
+            </view>
+            <view class="text-sm mt-3 font-medium"
+              >{{ dayjs(detail.start_at).format('YYYY-MM-DD') }}至{{
+                dayjs(detail.end_at).format('YYYY-MM-DD')
+              }}
+            </view>
           </view>
-          <view class="bg-white rounded-12px relative mt-4">
+          <view class="bg-white rounded-12px relative mt-4 min-h-40vh">
             <view class="px-3 pt-16rpx">
-              <CTitle title="他的战绩"></CTitle>
+              <CTitle title="他的竞猜"></CTitle>
             </view>
             <view class="">
               <Item v-for="(item, i) in list" :key="i" :data="item"></Item>
               <mescroll-empty v-if="!list.length"></mescroll-empty>
+              <view class="flex-center py-30rpx" v-else> </view>
             </view>
           </view>
         </view>
       </view>
     </mescroll-body>
+    <view class="h-160rpx">
+      <view
+        class="fixed bottom-50rpx h-100rpx flex left-0 w-full justify-center items-center box-content"
+      >
+        <up-button
+          class="guess-btn"
+          :disabled="false"
+          shape="circle"
+          :customStyle="{
+            margin: 0,
+            width: '132px',
+            backgroundColor: '#1D2B5C',
+            color: '#fff',
+            opacity: 1,
+          }"
+          @click="goActiveDetail"
+          >立即参与竞猜</up-button
+        >
+      </view>
+    </view>
+
+    <up-modal
+      :show="showRuleModalVisible"
+      :width="335"
+      :closeOnClickOverlay="true"
+      :showConfirmButton="false"
+      :showCancelButton="false"
+      @close="hideRuleModal"
+    >
+      <view class="slot-content-rule">
+        <view class="title">活动规则</view>
+
+        <view class="content">{{ detail.rules }}</view>
+      </view>
+    </up-modal>
   </view>
 </template>
 <script setup>
@@ -48,11 +89,14 @@ import { queryActivitiesDetail, activityGameLogs } from '@/api/xinjiang_guess'
 import Item from '@/components/quiz/item.vue'
 import CTitle from '@/components/c-title/index.vue'
 import config from '@/common/config'
-import { ref } from 'vue'
+import { ref, getCurrentInstance } from 'vue';
+import useAuthUser from '@/utils/hooks/useAuthUser';
+const vm = getCurrentInstance();
 const activityId = ref(null)
 const userId = ref(null)
 const detail = ref({})
 const list = ref([])
+const showRuleModalVisible = ref(false)
 const { mescrollInit, downCallback, getMescroll } = useMescroll(
   onPageScroll,
   onReachBottom
@@ -89,4 +133,46 @@ const getActiveDetail = async () => {
     detail.value = resData.data
   } catch (error) {}
 }
+
+const showRuleModal = async () => {
+  showRuleModalVisible.value = true
+}
+const hideRuleModal = async () => {
+  showRuleModalVisible.value = false
+}
+
+function goActiveDetail() {
+	const { user } = useAuthUser();
+	if (user.is_need_bind_phone) {
+		vm.proxy.$goToPage('packages/pages/login/login?previous=index');
+		return;
+	}
+  vm.proxy.$goToPage({
+		url: 'packages/pages/activeDetail/activeDetail',
+		params: {
+			id: activityId.value
+		}
+	})
+}
 </script>
+<style lang="scss" scoped>
+  .slot-content-rule {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 12px;
+
+    .title {
+      font-size: 16px;
+      font-weight: 500;
+    }
+
+    .content {
+      font-size: 12px;
+      font-weight: 400;
+      white-space: pre-wrap;
+    }
+  }
+
+</style>