【第一版开发】

package-lock.json

@@ -25,6 +25,7 @@
         "@dcloudio/uni-quickapp-webview": "3.0.0-4040520250104002",
         "@dcloudio/uni-ui": "^1.5.7",
         "vue": "^3.4.21",
+        "vue-avatar": "^2.3.3",
         "vue-i18n": "^9.1.9"
       },
       "devDependencies": {
@@ -11566,6 +11567,16 @@
         }
       }
     },
+    "node_modules/vue-avatar": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmmirror.com/vue-avatar/-/vue-avatar-2.3.3.tgz",
+      "integrity": "sha512-Z57ILRTkFIAuCH9JiFBxX74C5zua5ub/jRDM/KZ+QKXNfscvmUOgWBs3kA2+wrpZMowIvfLHIT0gvQu1z+zpLg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4.0.0",
+        "npm": ">= 3.0.0"
+      }
+    },
     "node_modules/vue-i18n": {
       "version": "9.14.2",
       "resolved": "https://registry.npmmirror.com/vue-i18n/-/vue-i18n-9.14.2.tgz",

package.json

@@ -51,6 +51,7 @@
     "@dcloudio/uni-quickapp-webview": "3.0.0-4040520250104002",
     "@dcloudio/uni-ui": "^1.5.7",
     "vue": "^3.4.21",
+    "vue-avatar": "^2.3.3",
     "vue-i18n": "^9.1.9"
   },
   "devDependencies": {

src/common/style/common-style.scss

@@ -0,0 +1,3 @@
+view {
+    box-sizing: border-box;
+}

src/pages.json

@@ -7,16 +7,66 @@
 	},
 	"pages": [
 		{
-			"path": "pages/index/index",
+			"path": "pages/market",
 			"style": {
-				"navigationBarTitleText": "uni-app"
+				"navigationBarTitleText": "订阅市场"
+			}
+		},
+		{
+			"path": "pages/subscribeList",
+			"style": {
+				"navigationBarTitleText": "已订阅"
+			}
+		},
+		{
+			"path": "pages/userInfo",
+			"style": {
+				"navigationBarTitleText": "我的"
+			}
+		},
+		{
+			"path": "pages/detail/productHuntDetail",
+			"style": {
+				"navigationBarTitleText": "ProductHunt每日热棒"
+			}
+		},
+		{
+			"path": "pages/login",
+			"style": {
+				"navigationBarTitleText": "登录"
 			}
 		}
 	],
+	"tabBar": {
+		"color": "#000000",
+		"selectedColor": "#FFD800",
+		"borderStyle": "black",
+		"backgroundColor": "#ffffff",
+		"list": [
+			{
+				"pagePath": "pages/market",
+				"iconPath": "static/market.png",
+				"selectedIconPath": "static/market_active.png",
+				"text": "市场"
+			},
+			{
+				"pagePath": "pages/subscribeList",
+				"iconPath": "static/subscribe.png",
+				"selectedIconPath": "static/subscribe_active.png",
+				"text": "已订阅"
+			},
+			{
+				"pagePath": "pages/userInfo",
+				"iconPath": "static/user.png",
+				"selectedIconPath": "static/user_active.png",
+				"text": "我的"
+			}
+		]
+	},
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
 		"navigationBarTitleText": "uni-app",
-		"navigationBarBackgroundColor": "#F8F8F8",
-		"backgroundColor": "#F8F8F8"
+		"navigationBarBackgroundColor": "#FFD800",
+		"backgroundColor": "#FFFFFF"
 	}
-}
+}

src/pages/detail/productHuntDetail.vue

@@ -0,0 +1,185 @@
+<template>
+  <view class="bg-box">
+
+    <view class="placehold"></view>
+
+    <!-- 标题部分 -->
+    <view class="bg-item">
+      <view class="title">Product Hunt每日榜单</view>
+      <view class="description">通过微信渠道快速推送 Product Hunt 前一天的 Top30 产品的中文信息摘要</view>
+    </view>
+
+    <!-- 推送部分 -->
+    <view class="mt-24 bg-item">
+      <view class="title">推送</view>
+      <view class="description">推送渠道：XXX服务号</view>
+      <view class="description">推送频率：北京时间每天下午 4 点</view>
+    </view>
+
+    <!-- 订阅时间部分 -->
+    <view class="mt-24 bg-item">
+      <view class="title">订阅</view>
+      <view class="price-table">
+        <view class="price-item price-border">
+          <view class="item">订阅时长</view>
+          <view class="item">价格</view>
+          <view class="item"></view>
+        </view>
+        <view class="price-item price-border">
+          <view class="item">7天</view>
+          <view class="item price">1元</view>
+          <view class="item">
+            <view class="buy-btn">购买</view>
+          </view>
+        </view>
+        <view class="price-item price-border">
+          <view class="item">7天</view>
+          <view class="item price">1元</view>
+          <view class="item">
+            <view class="buy-btn">购买</view>
+          </view>
+        </view>
+        <view class="price-item price-border">
+          <view class="item">7天</view>
+          <view class="item price">1元</view>
+          <view class="item">
+            <view class="buy-btn">购买</view>
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <!-- 详情部分 -->
+    <view class="mt-24 bg-item">
+      <view class="title">详情</view>
+      <view class="description">Product Hunt 是全球最大的软件产品打榜平台，每天都有开发者发布新品并为 loved 产品投票。作为聚焦创新产品的热门网站，Product Hunt
+        吸引了大量开发者和产品爱好者查看全球最新创意。
+      </view>
+      <view class="description">然而，由于其为英文网站且访问需借助网络工具，许多用户在移动设备上快速获取信息并不方便，为此，我们推出了一款消息服务，每天在榜单更新结束后，精选当日排名靠前的产品，</view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+// 假设这是从后端获取的数据
+const subscribeData = ref([
+  {
+    time: '7天',
+    price: '1.0元',
+    action: '购买'
+  },
+  {
+    time: '30天',
+    price: '1.0元',
+    action: '购买'
+  },
+  {
+    time: '90天',
+    price: '1.0元',
+    action: '购买'
+  }
+]);
+
+// const subscribeColumns = ref([
+//   {
+//     title: '订阅时间',
+//     key: 'time'
+//   },
+//   {
+//     title: '价格',
+//     key: 'price'
+//   },
+//   {
+//     title: '操作',
+//     key: 'action',
+//     render: (item) => (
+//       <view class="action-button">{item.action}</view>
+//     )
+//   }
+// ]);
+</script>
+
+<style lang="scss" scoped>
+.bg-box {
+  background-color: #f5f5f5;
+}
+
+.bg-item {
+  background-color: #FFFFFF;
+  padding: 20rpx 24rpx;
+}
+
+.placehold {
+  height: 24rpx;
+  width: 100%;
+}
+
+.mt-24 {
+  margin-top: 24rpx;
+}
+
+.title {
+  font-size: 29.17rpx;
+  font-weight: 400;
+  letter-spacing: 0rpx;
+  line-height: 40.02rpx;
+  color: #000000;
+  text-align: left;
+  vertical-align: top;
+}
+
+.description {
+  font-size: 25rpx;
+  font-weight: 400;
+  letter-spacing: 0rpx;
+  line-height: 34.3rpx;
+  color: #999999;
+  text-align: left;
+  vertical-align: top;
+}
+
+.price-table {
+  border: 1rpx solid #E5E5E5;
+  padding: 0rpx 16rpx;
+
+  .price-item {
+    display: flex;
+  }
+
+  .price-border {
+    border-bottom: 1rpx solid #E5E5E5;
+  }
+
+  .price-border:last-child {
+    border-bottom: none;
+  }
+
+  .item {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    padding: 16rpx;
+  }
+
+  .price {
+    color: #FF6744;
+  }
+
+  .buy-btn {
+    padding: 4rpx 24rpx;
+    background-color: #FFD800;
+    border-radius: 20rpx;
+
+    font-size: 24rpx;
+    font-weight: 400;
+    letter-spacing: 0rpx;
+    line-height: 34.75rpx;
+    color: #000000;
+    text-align: left;
+    vertical-align: top;
+  }
+}
+</style>

src/pages/index/index.vue

@@ -1,48 +0,0 @@
-<template>
-  <view class="content">
-    <image class="logo" src="/static/logo.png"></image>
-    <view class="text-area">
-      <text class="title">{{ title }}</text>
-    </view>
-  </view>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      title: 'Hello',
-    }
-  },
-  onLoad() {},
-  methods: {},
-}
-</script>
-
-<style>
-.content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-}
-
-.logo {
-  height: 200rpx;
-  width: 200rpx;
-  margin-top: 200rpx;
-  margin-left: auto;
-  margin-right: auto;
-  margin-bottom: 50rpx;
-}
-
-.text-area {
-  display: flex;
-  justify-content: center;
-}
-
-.title {
-  font-size: 36rpx;
-  color: #8f8f94;
-}
-</style>

src/pages/login.vue

@@ -0,0 +1,53 @@
+<template>
+  <view class="login-container">
+    <img class="logo" src="/static/logo.png" alt="应用Logo"></img>
+    <input class="input-field" type="text" v-model="nickname" placeholder="请输入昵称" />
+    <button class="login-button" @click="handleLogin">登录</button>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const nickname = ref('');
+
+const handleLogin = () => {
+  // 处理登录逻辑
+  console.log('昵称:', nickname.value);
+};
+</script>
+
+<style lang="scss" scoped>
+.login-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+}
+
+.logo {
+  // width: auto; // 修改: 将宽度设置为auto以适应SVG的实际尺寸
+  // height: 100px; // 修改: 设置固定高度以确保图片在垂直方向上有一个固定的尺寸
+  // margin-bottom: 20px;
+}
+
+.input-field {
+  width: 80%;
+  padding: 10px;
+  margin-bottom: 20px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+}
+
+.login-button {
+  width: 80%;
+  padding: 10px;
+  background-color: #FFD800;
+  border: none;
+  border-radius: 5px;
+  color: #000;
+  font-size: 16px;
+  cursor: pointer;
+}
+</style>

src/pages/market.vue

@@ -0,0 +1,35 @@
+<template>
+  <view>
+    <!-- 订阅列表 -->
+    <uni-list>
+      <uni-list-item v-for="(item, index) in productList" :title="item.title" :note="item.description" rightText="详情"
+        link to="/pages/detail/productHuntDetail" />
+    </uni-list>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+// 假设这是从后端获取的数据
+const productList = ref([
+  {
+    title: 'Product Hunt每日榜单',
+    description: '通过微信渠道快速推送 Product Hunt 前一天的 Top30 产品的中文信息摘要',
+    price: 3.99
+  },
+  {
+    title: 'Product Hunt每日榜单',
+    description: '通过微信渠道快速推送 Product Hunt 前一天的 Top30 产品的中文信息摘要',
+    price: 3.99
+  },
+  {
+    title: 'Product Hunt每日榜单',
+    description: '通过微信渠道快速推送 Product Hunt 前一天的 Top30 产品的中文信息摘要',
+    price: 3.99
+  },
+]);
+
+</script>
+
+<style lang="scss" scoped></style>

src/pages/subscribeList.vue

@@ -0,0 +1,89 @@
+<template>
+  <view>
+    <!-- 已订阅列表 -->
+    <uni-list>
+      <uni-list-item v-for="(item1, index) in productList" :key="index">
+        <template v-slot:body>
+          <view class="item-box">
+            <view class="title">{{ item1.title }}</view>
+            <view class="description">{{ item1.description }}</view>
+            <view class="func-box">
+              <view class="date">剩余有效期：7天</view>
+              <view class="switch-text">
+                <span>通知状态：开启中</span>
+                <switch color="#FFD800" style="transform:scale(0.7)" />
+              </view>
+            </view>
+          </view>
+        </template>
+      </uni-list-item>
+    </uni-list>
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+// 假设这是从后端获取的数据
+const productList = ref([
+  {
+    title: 'Product Hunt每日榜单',
+    description: '通过微信渠道快速推送 Product Hunt 前一天的 Top30 产品的中文信息摘要',
+    price: 3.99
+  },
+  {
+    title: 'Product Hunt每日榜单',
+    description: '通过微信渠道快速推送 Product Hunt 前一天的 Top30 产品的中文信息摘要',
+    price: 3.99
+  },
+  {
+    title: 'Product Hunt每日榜单',
+    description: '通过微信渠道快速推送 Product Hunt 前一天的 Top30 产品的中文信息摘要',
+    price: 3.99
+  },
+  // ... 更多产品数据
+]);
+
+</script>
+
+<style lang="scss" scoped>
+.item-box {
+  .title {
+    font-size: 29.17rpx;
+    font-weight: 400;
+    letter-spacing: 0rpx;
+    line-height: 40.02rpx;
+    color: #191919;
+    text-align: left;
+    vertical-align: top;
+  }
+
+  .description,
+  .date,
+  .switch-text {
+    font-size: 25rpx;
+    font-weight: 400;
+    letter-spacing: 0rpx;
+    line-height: 34.3rpx;
+    color: #999999;
+    text-align: left;
+    vertical-align: top;
+  }
+
+  .func-box {
+    display: flex;
+  }
+
+  .date,
+  .switch-text {
+    flex: 0 0 50%;
+    /* 禁止伸缩，基础宽度50% */
+    display: flex;
+    align-items: center;
+  }
+
+  .switch-text {
+    justify-content: space-between; // 修改: 添加此行以使两个元素按一头一尾排列
+  }
+}
+</style>

src/pages/userInfo.vue

@@ -0,0 +1,98 @@
+<template>
+  <view class="bg-box">
+
+    <view class="placehold"></view>
+
+    <view>
+      <uni-list>
+        <uni-list-item :showArrow="true">
+          <template v-slot:body>
+            <view class="avatar-box">
+              <view class="avatar">
+                <view>
+                  <Avatar :username="nickname" color="#FFFFFF" backgroundColor="#FFD800"></Avatar>
+                </view>
+                <span class="nickname">{{ nickname }}</span>
+              </view>
+              <view class="avatar-func">修改</view>
+            </view>
+          </template>
+        </uni-list-item>
+      </uni-list>
+    </view>
+
+    <view class="mt24">
+      <uni-list :border="true">
+        <uni-list-item title="订单记录" :showArrow="true" :showExtraIcon="true"
+          :extraIcon="{ color: '#000000', size: 22, type: 'list' }">
+        </uni-list-item>
+      </uni-list>
+    </view>
+
+    <view class="mt24">
+      <uni-list :border="true">
+        <uni-list-item title="关于我们" :showArrow="true" :showExtraIcon="true"
+          :extraIcon="{ color: '#000000', size: 22, type: 'info' }">
+        </uni-list-item>
+        <uni-list-item title="免责声明" :showArrow="true" :showExtraIcon="true"
+          :extraIcon="{ color: '#000000', size: 22, type: 'minus' }">
+        </uni-list-item>
+      </uni-list>
+    </view>
+
+    <view class="mt24">
+      <uni-list :border="true">
+        <uni-list-item title="退出登录" :showArrow="true" :showExtraIcon="true"
+          :extraIcon="{ color: 'red', size: 22, type: 'closeempty' }">
+        </uni-list-item>
+      </uni-list>
+    </view>
+
+  </view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Avatar from 'vue-avatar/src/Avatar.vue';
+const nickname = ref('蜗牛');
+</script>
+
+<style lang="scss" scoped>
+.bg-box {
+  background-color: #f5f5f5;
+  height: 100vh;
+}
+
+.mt24 {
+  margin-top: 24rpx;
+}
+
+.placehold {
+  width: 100%;
+  height: 24rpx;
+}
+
+.avatar-box {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+
+  .avatar {
+    display: flex;
+    align-items: center;
+  }
+
+  .nickname {
+    margin-left: 16rpx;
+  }
+
+  .avatar-func {
+    font-size: 24rpx;
+    font-weight: 400;
+    letter-spacing: 0rpx;
+    line-height: 34.75rpx;
+    color: #000000;
+  }
+}
+</style>

src/static/logo.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500" viewBox="0 0 500 500" fill="none">
+<path d="M0 0L500 0L500 500L0 500L0 0Z"   fill="#FFEB3B" >
+</path>
+</svg>

src/uni.scss

@@ -73,4 +73,6 @@ $uni-font-size-title: 20px;
 $uni-color-subtitle: #555; // 二级标题颜色
 $uni-font-size-subtitle: 18px;
 $uni-color-paragraph: #3f536e; // 文章段落颜色
-$uni-font-size-paragraph: 15px;
+$uni-font-size-paragraph: 15px;
+
+@use "@/common/style/common-style.scss";