完成会员页面

src/components/UserItem.vue

@@ -51,9 +51,11 @@ defineProps({
   color: #999;
   margin-right: 10px;
 }
-
 .user-item > view image {
   width: 24px;
   height: 24px;
 }
+.user-item > view button {
+  margin-left: 5px;
+}
 </style>

src/pages.json

@@ -30,6 +30,12 @@
         "navigationBarTitleText": "订单详情"
       }
     },
+    {
+      "path": "pages/be-vip",
+      "style": {
+        "navigationBarTitleText": "会员"
+      }
+    },
     {
       "path": "pages/my-growth",
       "style": {

src/pages/be-vip.vue

@@ -0,0 +1,145 @@
+<script setup>
+import { ref } from "vue";
+import Container from "@/components/Container.vue";
+import Avatar from "@/components/Avatar.vue";
+import SButton from "@/components/SButton.vue";
+import useStore from "@/store";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user } = storeToRefs(store);
+
+const vipChoosen = ref(0);
+
+const vips = [1, 3, 6, 12];
+
+const chooseVip = (index) => {
+  vipChoosen.value = index;
+};
+</script>
+
+<template>
+  <Container title="会员说明">
+    <view class="header">
+      <view>
+        <Avatar :src="user.avatarUrl" :size="35" :border="true" />
+        <text>{{ user.nickName }}</text>
+      </view>
+      <text>5月5号到期</text>
+    </view>
+    <view class="container">
+      <view class="content">
+        <view class="title-bar">
+          <view />
+          <text>VIP 介绍</text>
+        </view>
+        <view>
+          <text
+            >射灵的的VIP服务是为了正式对战打造的专属特权，让您在激烈的射击运动中充分享受与同级别想着对战的乐趣；</text
+          >
+          <text
+            >VIP的收取形式灵活多样，充分考虑到了不同用户的需求。我们提供按月收取的方式，每月仅需10元，即可轻松成为VIP会员，享受一个月的尊贵特权。这种方式适合那些希望先体验VIP服务，再决定是否长期投入的用户。您可以先购买一个月的VIP，亲身感受VIP带来的种种好处，如果觉得满意，再继续选择适合自己的购买方案。而对于那些已经确定会长期参与对战，希望持续享受VIP特权的用户，我们则推出了更为优惠的一年VIP套餐。一次性购买一年的VIP，仅需100元，平均每月不到9元，您就能全年畅享VIP的所有权益。这不仅为您节省了时间和精力，还为您带来了实实在在的经济优惠。
+            一年的时间，足够您在对战的世界中尽情驰骋，不断挑战自我，创造属于自己的辉煌战绩。</text
+          >
+          <text
+            >VIP会员还将获得专属的客服支持。当您在游戏中遇到任何问题，无论是技术故障、规则疑问还是其他需要帮助的情况，都可以随时联系我们的VIP专属客服团队、他们将为您提供</text
+          >
+        </view>
+      </view>
+      <view class="content">
+        <view class="title-bar">
+          <view />
+          <text>成为射灵会员</text>
+        </view>
+        <view class="vip-items">
+          <view
+            v-for="(item, index) in vips"
+            :key="index"
+            :style="{
+              color: vipChoosen === index ? '#fff' : '#333333',
+              borderColor: vipChoosen === index ? '#FF7D57' : '#eee',
+              background:
+                vipChoosen === index
+                  ? '#FF7D57'
+                  : 'linear-gradient(180deg, #fbfbfb 0%, #f5f5f5 100%)',
+            }"
+            @click="chooseVip(index)"
+          >
+            {{ item }}个月会员
+          </view>
+        </view>
+      </view>
+      <SButton>支付</SButton>
+    </view>
+  </Container>
+</template>
+
+<style scoped>
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #fff;
+  padding: 15px;
+  padding-top: 0;
+  font-size: 14px;
+}
+.header > view {
+  display: flex;
+  align-items: center;
+}
+.header > view > text:last-child {
+  margin-left: 10px;
+}
+.header > text:nth-child(2) {
+  color: #fed847;
+}
+.container {
+  width: 100%;
+  height: 100%;
+  background-color: #e4e4e4;
+  padding-top: 10px;
+}
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: #fff;
+  padding: 15px;
+  margin-bottom: 10px;
+}
+.title-bar {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  font-weight: bold;
+}
+.title-bar > view:first-child {
+  width: 5px;
+  height: 15px;
+  border-radius: 10px;
+  background-color: #fed847;
+  margin-right: 10px;
+}
+.content > view:nth-child(2) {
+  font-size: 14px;
+  color: #333;
+}
+.content > view:nth-child(2) > text {
+  display: block;
+  margin-top: 10px;
+}
+.vip-items {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px;
+}
+.vip-items > view {
+  border: 1px solid #eee;
+  padding: 12px 0;
+  width: 23%;
+  border-radius: 10px;
+  text-align: center;
+}
+</style>

src/pages/user.vue

@@ -14,6 +14,22 @@ const toOrderPage = () => {
     url: "/pages/orders",
   });
 };
+
+const toFristTryPage = () => {
+  uni.navigateTo({
+    url: "/pages/first-try",
+  });
+};
+const toBeVipPage = () => {
+  uni.navigateTo({
+    url: "/pages/be-vip",
+  });
+};
+const toMyGrowthPage = () => {
+  uni.navigateTo({
+    url: "/pages/my-growth",
+  });
+};
 </script>
 
 <template>
@@ -33,8 +49,13 @@ const toOrderPage = () => {
         }"
         :onClick="toOrderPage"
       />
-      <UserItem title="新手试炼场" />
+      <UserItem title="新手试炼场" :onClick="toFristTryPage">
-      <UserItem title="会员" />
+        <text v-if="user.trio" :style="{ color: '#259249' }">已完成</text>
+        <text v-else :style="{ color: '#CC311F' }">未完成</text>
+      </UserItem>
+      <UserItem title="会员" :onClick="toBeVipPage">
+        已赠送6个月会员
+      </UserItem>
       <UserItem title="等级介绍" />
       <UserItem
         title="段位介绍"
@@ -42,9 +63,9 @@ const toOrderPage = () => {
           marginBottom: '10px',
         }"
       />
-      <button class="my-grow">
+      <view class="my-grow" @click="toMyGrowthPage">
         <image src="../static/my-grow.png" mode="widthFix" />
-      </button>
+      </view>
     </view>
   </view>
 </template>