新闻页&修改后的用户页

src/app.config.js

@@ -25,6 +25,12 @@ export default defineAppConfig({
     'pages/scope/index',
     'pages/order/index',
     'pages/order-detail/index',
+    'pages/setting/index',
+    'pages/about-me/index',
+    'pages/change-user/index',
+    'pages/message/index',
+    'pages/message-list/index',
+    'pages/message-detail/index',
   ],
   window: {
     backgroundTextStyle: 'light',

src/app.scss

@@ -92,6 +92,10 @@
     margin-left: 30px;
 }
 
+.ml12 {
+    margin-left: 12px;
+}
+
 .ml17 {
     margin-left: 17px;
 }
@@ -100,6 +104,10 @@
     margin-top: 32px;
 }
 
+.mt18 {
+    margin-top: 18px;
+}
+
 .mt20 {
     margin-top: 20px;
 }
@@ -143,7 +151,7 @@
 
 .next-icon {
     width: 6px;
-    height: 10px;
+    height: 12px;
 }
 
 .bt-none {
@@ -203,4 +211,15 @@
 .flex-col {
     display: flex;
     flex-direction: column;
+}
+
+.dialog-content {
+    padding: 16px 24px;
+    box-shadow: 0px 5px 10px 0px rgba(31, 35, 41, 0.1);
+    border-radius: 8px;
+    background: #FFFFFF;
+}
+
+.nut-popup {
+    background: none !important;
 }

src/pages/about-me/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+    navigationBarTitleText: '关于我们'
+})

src/pages/about-me/index.jsx

@@ -0,0 +1,49 @@
+import { Image, Text, View } from "@tarojs/components"
+import next from '@/images/next.png'
+import './index.scss'
+import { useState } from "react"
+import Taro from "@tarojs/taro"
+import backNav from '@/images/backNav.png'
+import { useEffect } from "react"
+
+
+const Login = () => {
+
+
+
+    // 返回页面
+    const backFn = () => {
+        Taro.getCurrentPages().length > 0 && Taro.navigateBack()
+    }
+
+
+    const navAboutMe = () => {
+        Taro.navigateTo({
+            url: '/pages/about-me/index'
+        })
+    }
+
+
+    return <View className="about-frame  h-screen text-base">
+        <View className='addr-detail-title'>
+            <Image src={backNav} className="square-35 absolute left-10 nav-icon" onClick={backFn} />
+            关于我们
+        </View>
+        <View className="flex-center about-logo">
+            <Image src={'https://img.yzcdn.cn/vant/cat.jpeg'} className="about-img" />
+        </View>
+        <View className="about-container flex-col justify-center">
+            <View className="about-item">
+                <Text>客服邮箱</Text>
+                <Text className="about-item-text">lhqjN@example.com</Text>
+            </View>
+            <View className="about-item">
+                <Text>当前版本</Text>
+                <Text className="about-item-text">v1.0</Text>
+            </View>
+        </View>
+    </View>
+}
+
+
+export default Login

src/pages/about-me/index.scss

@@ -0,0 +1,41 @@
+.about-frame {
+    min-height: 100vh;
+    height: auto;
+    font-size: 14px;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    background-color: #FBFBFD;
+}
+
+.about-container {
+    width: 333px;
+    box-sizing: border-box;
+    padding: 0 40px;
+    margin: 0 auto;
+    margin-top: 18px;
+    background: #FFFFFF;
+    box-shadow: 4px 7px 9px 0px rgba(56, 63, 68, 0.03);
+    border-radius: 10px 10px 10px 10px;
+    opacity: 1;
+    font-weight: 400;
+    color: #181A20;
+    height: 125px;
+
+}
+
+.about-item {
+    font-weight: 400;
+    color: #181A20;
+    font-size: 15px;
+    line-height: 28px;
+}
+
+.about-item-text {
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.4);
+    font-size: 14px;
+    margin-left: 4px;
+}
+
+.about-logo {
+    margin-top: 40px;
+}

src/pages/change-user/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+    navigationBarTitleText: '个人信息'
+})

src/pages/change-user/index.jsx

@@ -0,0 +1,113 @@
+import { Image, Input, Text, View } from "@tarojs/components"
+import back from '@/images/back.png'
+import checked from '@/images/checked.png'
+import eyeClose from '@/images/eyeClose.png'
+import eye from '@/images/eye.png'
+import './index.scss'
+import { Button } from "@nutui/nutui-react-taro"
+import { useState } from "react"
+import Taro from "@tarojs/taro"
+import backNav from '@/images/backNav.png'
+
+const activeEye = eye
+
+const uinfo = () => {
+
+    const [account, setAccount] = useState('')
+    const [pwd, setPwd] = useState()
+    const [uinfoMode, setuinfoMode] = useState('account')
+
+    const [mobile, setMobile] = useState('')
+    const [smsCode, setSmsCode] = useState('')
+    const [interval, setIntervalTime] = useState(0)
+
+
+    // 返回页面
+    const backFn = () => {
+        Taro.getCurrentPages().length > 0 && Taro.navigateBack()
+    }
+
+
+    // 去登陆
+    const uinfoFn = () => {
+        Taro.redirectTo({
+            url: '/pages/uinfo/index'
+        })
+    }
+
+    //清理数据
+    const cleanFn = () => {
+        if (uinfoMode === 'account') {
+            setAccount('')
+            setPwd('')
+            return
+        }
+        setMobile('')
+        setSmsCode('')
+    }
+
+    // 倒计时
+    const countDown = () => {
+        if (!mobile) {
+            return
+        }
+        setIntervalTime(60)
+        if (interval > 0) {
+            return
+        }
+        let start = 60
+        const timer = setInterval(() => {
+            if (start > 0) {
+                start--
+                if (start <= 0) {
+                    clearInterval(timer)
+                }
+                setIntervalTime(start)
+            }
+        }, 1000)
+    }
+
+    return <View className="uinfo-frame bg-slate-50 h-screen text-base">
+        <View className='addr-detail-title'>
+            <Image src={backNav} className="square-35 absolute left-10 nav-icon" onClick={backFn} />
+            个人信息
+
+        </View>
+        <View className="uinfo-container bg-slate-50 relative">
+            <View>
+                <View className="form-item mt-22">
+                    <View className="form-label">用户名</View>
+                    <View className="form-control relative">
+                        <Input className="form-input" placeholder="请输入用户名" onInput={(v) => {
+                            setAccount(v.detail.value)
+                        }} />
+                        {
+                            account && <Image className="w-6 h-6 absolute right-0 bottom-16" src={checked} />
+                        }
+
+                    </View>
+                </View>
+                <View className="form-item mt-22">
+                    <View className="form-label">昵称</View>
+                    <View className="form-control relative">
+                        <Input className="form-input" type='text' placeholder="请输入昵称" onInput={(v) => {
+                            setPwd(v.detail.value)
+                        }} />
+                        {
+                            pwd && <Image className="w-6 h-6 absolute right-0 bottom-16" src={checked} />
+                        }
+                    </View>
+                </View>
+                <View className="uinfo-footer flex flex-col justify-center">
+                    <Button className="uinfo-btn">保存</Button>
+
+                </View>
+            </View>
+
+        </View>
+
+    </View>
+}
+
+
+export default uinfo

src/pages/change-user/index.scss

@@ -0,0 +1,116 @@
+.uinfo-header {
+    height: 86px;
+}
+
+.uinfo-frame {
+    height: auto;
+    font-size: 14px;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+}
+
+.uinfo-container {
+    width: 375px;
+    height: calc(100vh - 86px);
+    border-radius: 20px 20px 0 0;
+    box-shadow: 0px 8px 51px 0px rgba(230, 234, 238, 0.8);
+    box-sizing: border-box;
+    padding: 20px 30px;
+}
+
+.form-item {
+    height: 68px;
+    opacity: 1;
+}
+
+.form-label {
+    font-size: 12px;
+    font-weight: bold;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    color: #2a2b2d;
+    line-height: 16px;
+}
+
+.form-input>.weui-input {
+    border: none;
+    height: 52px;
+    line-height: 52px;
+    border-bottom: 1px solid #262A34;
+    position: relative;
+    font-size: 16px;
+    color: #000;
+}
+
+.form-input>.weui-input:focus {
+    border-bottom: 2px solid #F67952;
+}
+
+.form-input-placeholder,
+.form-input>.weui-input::placeholder {
+    font-size: 16px;
+    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    font-weight: bold;
+    color: #aeafb4;
+}
+
+.form-control {
+    height: 52px;
+    position: relative;
+}
+
+.forgot-password {
+    height: 24px;
+    font-size: 16px;
+    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    font-weight: 400;
+    color: #666;
+    line-height: 24px;
+
+    text-align: right;
+}
+
+
+.uinfo-btn {
+    width: 253px;
+    height: 55px;
+    background: #F67952;
+    border-radius: 68px 68px 68px 68px;
+    opacity: 1;
+    border: none;
+    color: white;
+    font-size: 16px;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    font-weight: bold;
+}
+
+.uinfo-footer {
+    margin-top: 150px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.quick-uinfo {
+    font-size: 16px;
+    font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+    font-weight: 400;
+    color: #000000;
+    line-height: 24px;
+    margin-top: 30px;
+}
+
+.code-btn {
+    width: 83px;
+    height: 30px;
+    background: #F67952;
+    border-radius: 4px 4px 4px 4px;
+    opacity: 1;
+    font-size: 12px;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    font-weight: bold;
+    color: #FFFFFF;
+    border: none;
+    padding: 0;
+    position: absolute;
+    right: 0;
+    bottom: 12px;
+}

src/pages/home/index.jsx

@@ -5,7 +5,7 @@ import TabbarAction from '@/components/action';
 import message from '@/images/message.png'
 import setting from '@/images/setting.png'
 import level1 from '@/images/level1.png'
-import level2 from '@/images/level2.png'
+import homeBg from '@/images/homeBg.png'
 import bal from '@/images/bal.png'
 import income from '@/images/income.png'
 import scope from '@/images/scope.png'
@@ -22,20 +22,18 @@ import next from '@/images/next.png'
 
 const Index = () => {
 
-    return <View className='home-container'>
-        <View className='home-title flex-center'>我的
-            <View className='home-title-extra'>
-                <Image src={setting} className='home-title-icon' />
-                <Image src={message} className='home-title-icon' />
+    return <View className='user-container'>
+        <View className='my-header-top relative'>
+            <View className='user-title flex-center'>
+                <View className='home-title-extra'>
+                    <Image src={setting} className='home-title-icon' />
+                    <Image src={message} className='home-title-icon' />
+                </View>
             </View>
-        </View>
-
-        <View className='my-body'>
             <View className='my-header flex-between'>
                 <View className='my-content flex-start'>
-
                     <View className='my-avatar flex-center'>
-                        <Avatar size={56} icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
+                        <Avatar size={50} icon="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
                         />
                     </View>
 
@@ -46,87 +44,102 @@ const Index = () => {
                                 <Text className='my-lev-text'>V5</Text>
                             </View>
                         </View>
-                        <View className='my-id-box flex-start'>
-                            <Text>区域合伙人</Text>
-                            <Image className='my-id-icon' src={level1} />
-                        </View>
                     </View>
                 </View>
                 <View className='my-edit'>
-                    <Text>编辑资料</Text>
-                    <Image className='next-icon' src={next} />
+                    <Text>编辑资料 {'>'} </Text>
+                </View>
+            </View>
+            <View className='flex-start my-id-box'>
+                <Image src={level1} className='my-id-icon' />
+                <Text className=''>区域合伙人</Text>
+            </View>
+        </View>
+        <View className='my-container'>
+            <View className="my-header-bottom">
+                <Image src={homeBg} className="home-bg absolute" />
+                <View className='my-order-container'>
+                    <View className='my-order-title flex-between'>
+                        <Text>我的订单</Text>
+                        <View className='my-order-more flex-center'>
+                            <Text>全部订单</Text>
+                            <Image className='next-icon' src={next} />
+                        </View>
+                    </View>
+                    <View className='my-order-tool flex-between'>
+                        <View className='flex-col my-order-tool-item'>
+                            <View className="relative my-order-tool-box">
+                                <Image className='my-order-tool-icon' src={waitpay} />
+                                <Text className='my-order-mark' style={{ fontSize: 4 }}>2</Text>
+                            </View>
+                            <Text>待付款</Text>
+                        </View>
+                        <View className='flex-col my-order-tool-item'>
+                            <View className="relative my-order-tool-box">
+                                <Image className='my-order-tool-icon' src={delivery} />
+                                <Text className='my-order-mark' style={{ fontSize: 4 }}>2</Text>
+                            </View>
+                            <Text>待发货</Text>
+                        </View>
+                        <View className='flex-col my-order-tool-item'>
+                            <View className="relative my-order-tool-box">
+                                <Image className='my-order-tool-icon' src={done} />
+                                <Text className='my-order-mark' style={{ fontSize: 4 }}>2</Text>
+                            </View>
+                            <Text>已完成</Text>
+                        </View>
+                    </View>
                 </View>
             </View>
 
-            <View className='bal-container flex-between'>
-                <View className='bal-item flex-start'>
-                    <Image src={bal} className='bal-icon' />
-                    <View className='bal-item-content flex-col'>
+            <View className='my-tool-box flex-col'>
+                <View className='my-tool-box-title'>
+                    我的属性
+                </View>
+                <View className='flex-around justify-center mt-22'>
+                    <View className='bal-item-content flex-col items-center'>
+                        <Text>12345</Text>
+                        <Text className='bal-item-helper'>贡献值</Text>
+                    </View>
+                    <View className='bal-item-content flex-col items-center'>
+                        <Text>12345</Text>
+                        <Text className='bal-item-helper'>能量值</Text>
+                    </View>
+                </View>
+            </View>
+
+            <View className='mt18 my-tool-box flex-col'>
+                <View className='my-tool-box-title'>
+                    我的钱包
+                </View>
+                <View className='flex-between  mt-22'>
+                    <View className='bal-item-content flex-col items-center'>
                         <Text>12345</Text>
                         <Text className='bal-item-helper'>余额</Text>
                     </View>
-                </View>
-                <View className='bal-item flex-start'>
-                    <Image src={income} className='bal-icon' />
-                    <View className='bal-item-content flex-col'>
+                    <View className='bal-item-content flex-col items-center'>
                         <Text>12345</Text>
                         <Text className='bal-item-helper'>收益</Text>
                     </View>
-                </View>
-                <View className='bal-item flex-start'>
-                    <Image src={scope} className='bal-icon' />
-                    <View className='bal-item-content flex-col'>
+                    <View className='bal-item-content flex-col items-center'>
                         <Text>12345</Text>
-                        <Text className='bal-item-helper'>积分</Text>
+                        <Text className='bal-item-helper'>购物金</Text>
                     </View>
                 </View>
             </View>
 
-            <View className='my-order-container'>
-                <View className='my-order-title flex-between'>
-                    <Text>我的订单</Text>
-                    <View className='my-order-more flex-center'>
-                        <Text>全部订单</Text>
-                        <Image className='next-icon' src={next} />
-                    </View>
+            <View className='mt18 my-tool-box flex-col'>
+                <View className='my-tool-box-title'>
+                    常用工具
                 </View>
-                <View className='my-order-tool flex-around'>
+                <View className='flex-around  mt18'>
                     <View className='flex-col my-order-tool-item'>
                         <View className="relative my-order-tool-box">
-                            <Image className='my-order-tool-icon' src={waitpay} />
-                            <Text className='my-order-mark' style={{ fontSize: 4 }}>2</Text>
+                            <Image className='my-tool-icon' src={friend} />
                         </View>
-                        <Text>待付款</Text>
+                        <Text>邀请好友</Text>
                     </View>
-                    <View className='flex-col my-order-tool-item'>
-                        <View className="relative my-order-tool-box">
-                            <Image className='my-order-tool-icon' src={delivery} />
-                            <Text className='my-order-mark' style={{ fontSize: 4 }}>2</Text>
-                        </View>
-                        <Text>待发货</Text>
-                    </View>
-                    <View className='flex-col my-order-tool-item'>
-                        <View className="relative my-order-tool-box">
-                            <Image className='my-order-tool-icon' src={done} />
-                            <Text className='my-order-mark' style={{ fontSize: 4 }}>2</Text>
-                        </View>
-                        <Text>已完成</Text>
-                    </View>
-                </View>
-            </View>
-            <View className='my-order-container'>
-                <View className='my-order-title flex-between'>
-                    <Text>常用工具</Text>
 
-                </View>
-                <View className='my-order-tool flex-around'>
-                    <View className='flex-col my-order-tool-item'>
-                        <View className="relative my-order-tool-box">
-                            <Image className='my-tool-icon' src={team} />
-
-                        </View>
-                        <Text>我的团队</Text>
-                    </View>
                     <View className='flex-col my-order-tool-item'>
                         <View className="relative my-order-tool-box">
                             <Image className='my-tool-icon' src={mall} />
@@ -142,15 +155,16 @@ const Index = () => {
                     </View>
                     <View className='flex-col my-order-tool-item'>
                         <View className="relative my-order-tool-box">
-                            <Image className='my-tool-icon' src={friend} />
+                            <Image className='my-tool-icon' src={team} />
+
                         </View>
-                        <Text>邀请好友</Text>
+                        <Text>我的团队</Text>
                     </View>
                 </View>
+
             </View>
+
         </View>
-
-
         <TabbarAction index={2} />
     </View>
 }

src/pages/home/index.scss

@@ -1,16 +1,33 @@
-.home-container {
+.user-container {
     font-family: Source Han Sans CN-Bold, Source Han Sans CN;
     font-size: 14px;
-    background: linear-gradient(#fdf3f1, #FCFCFE);
     font-weight: 400;
+    // min-height: 100vh;
+    // height: auto;
 }
 
-.home-title {
+.my-header-top {
+    height: 202px;
+    width: 100vw;
+    background: none;
+}
+
+.my-header-top:after {
+    width: 142%;
+    height: 202px;
+    position: absolute;
+    left: -22.5%;
+    top: 0;
+    z-index: -1;
+    content: '';
+    border-radius: 0 0 50% 50%;
+    background: linear-gradient(180deg, #FAE3DD 0%, #F8A489, #F67952 100%);
+}
+
+
+.user-title {
     width: 100vw;
     height: 60px;
-    background: #FFFFFF;
-    box-shadow: 0px 4px 13px 0px rgba(0, 0, 0, 0.12);
-    border-radius: 0px 0px 0px 0px;
     opacity: 1;
     font-size: 18px;
     font-weight: bold;
@@ -34,37 +51,27 @@
     display: block;
 }
 
-.my-body {
-    height: calc(100vh - 60px - 66px);
-    padding-bottom: 10px;
-    box-sizing: border-box;
-    overflow-y: auto;
-    overflow-x: hidden;
-    padding: 13px 20px;
-    padding-right: 20px;
+.my-header {
+    padding: 0 18px;
 }
 
-.my-header {
-    margin-top: 18px;
-}
 
 .my-edit {
-    color: rgba(0, 0, 0, 0.4);
+    color: #fff;
 }
 
-.my-edit text {
-    margin-right: 10px;
-}
 
 .my-content-info {
     margin-left: 9px;
-    color: #000;
+    color: #fff;
+    font-weight: bold;
+    font-size: 16px;
 
 }
 
 .my-avatar {
-    width: 56px;
-    height: 56px;
+    width: 50px;
+    height: 50px;
     border-radius: 50%;
     border: 3px solid #ffffffa3;
 }
@@ -88,32 +95,42 @@
     color: transparent;
 }
 
+.my-container {
+    margin-bottom: 80px;
+}
+
+.home-bg {
+    top: -30px;
+    z-index: -1;
+    width: 100vw;
+}
+
+.my-header-bottom {
+    height: 126px;
+    width: 100vw;
+}
+
+
+
 .my-id-box {
-    color: rgba(0, 0, 0, 0.4);
+    font-weight: bold;
+    color: #FFFFFF;
+    font-size: 16px;
     margin-top: 2px;
+    position: absolute;
+    bottom: 32px;
+    left: 30px;
 }
 
 .my-id-icon {
-    width: 18px;
-    height: 18px;
+    width: 14px;
+    height: 14px;
     margin-left: 8px;
+    margin-right: 4px;
 }
 
 
-.bal-container {
-    margin-top: 38px;
-}
 
-.bal-item {
-    width: 102px;
-    height: 62px;
-    background: #FFFFFF;
-    box-shadow: -2px 8px 46px 0px rgba(37, 45, 50, 0.05);
-    border-radius: 10px 10px 10px 10px;
-    opacity: 1;
-    box-sizing: border-box;
-    padding-left: 8px;
-}
 
 .bal-icon {
     width: 22px;
@@ -125,6 +142,7 @@
     color: #181A20;
     margin-left: 6px;
     line-height: 20px;
+    font-size: 18px;
 }
 
 .bal-item-helper {
@@ -135,12 +153,16 @@
 }
 
 .my-order-container {
-    margin-top: 38px;
+    width: 290px;
+    margin: 0 auto;
+
 }
 
 .my-order-title {
     font-weight: 600;
     color: #000000;
+    position: relative;
+    top: -4px;
 }
 
 .my-order-more {
@@ -155,7 +177,7 @@
 }
 
 .my-order-tool {
-    margin-top: 20px;
+    margin-top: 13px;
 }
 
 .my-order-tool-item {
@@ -164,6 +186,7 @@
     font-weight: 400;
     color: rgba(0, 0, 0, 0.5);
     font-size: 12px;
+
 }
 
 .my-order-tool-icon {
@@ -194,4 +217,25 @@
 .my-tool-icon {
     width: 25px;
     height: 24px;
+}
+
+
+.my-tool-box {
+    width: 333px;
+    height: 118px;
+    background: #fff;
+    box-shadow: 4px 7px 26px 20px rgba(37, 45, 50, 0.05);
+    border-radius: 16px 16px 16px 16px;
+    opacity: 1;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 0 16px;
+    color: #181A20;
+    box-sizing: border-box;
+
+}
+
+.my-tool-box-title {
+    font-weight: bold;
+    margin-top: 14px;
 }

src/pages/message-detail/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+    navigationBarTitleText: '消息中心'
+})

src/pages/message-detail/index.jsx

@@ -0,0 +1,34 @@
+import { Image, Text, View } from "@tarojs/components"
+import next from '@/images/next.png'
+import './index.scss'
+import { useState } from "react"
+import Taro from "@tarojs/taro"
+import backNav from '@/images/backNav.png'
+import { useEffect } from "react"
+
+
+const Login = () => {
+
+    // 返回页面
+    const backFn = () => {
+        Taro.getCurrentPages().length > 0 && Taro.navigateBack()
+    }
+
+
+    return <View className="message-frame  h-screen text-base">
+        <View className='addr-detail-title'>
+            <Image src={backNav} className="square-35 absolute left-10 nav-icon" onClick={backFn} />
+            消息中心
+        </View>
+        <View className="message-detail-container flex-col items-center">
+            <View className="message-detail-title">秒杀专区暂时下线公告</View>
+            <View className="message-detail-time">2023-05-23 13:12:00</View>
+            <View className="message-detail-content">
+                秒杀专区暂时下线公告秒杀专区暂时下线公告秒杀专区暂时下线公告秒杀专区暂时下线公告秒杀专区暂时下线公告秒杀专区暂时下线公告秒杀专区暂时下线公告秒杀专区暂时下线公告
+            </View>
+        </View>
+    </View>
+}
+
+
+export default Login

src/pages/message-detail/index.scss

@@ -0,0 +1,32 @@
+.message-frame {
+    min-height: 100vh;
+    height: auto;
+    font-size: 14px;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    background-color: #FBFBFD;
+    font-weight: 400;
+    color: #000000;
+}
+
+.message-detail-container {
+    width: 100vw;
+    padding: 24px;
+    box-sizing: border-box;
+}
+
+.message-detail-title {
+    font-size: 16px;
+    color: #181A20;
+    margin-top: 24px;
+}
+
+.message-detail-time {
+    color: rgba(94, 98, 114, 0.5);
+    margin-top: 6px;
+    font-size: 12px;
+}
+
+.message-detail-content {
+    margin-top: 24px;
+    color: #5E6272;
+}

src/pages/message-list/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+    navigationBarTitleText: '消息中心'
+})

src/pages/message-list/index.jsx

@@ -0,0 +1,60 @@
+import { Image, Text, View } from "@tarojs/components"
+import next from '@/images/next.png'
+import './index.scss'
+import { useState } from "react"
+import Taro from "@tarojs/taro"
+import backNav from '@/images/backNav.png'
+import { useEffect } from "react"
+
+
+const Login = () => {
+
+    // 返回页面
+    const backFn = () => {
+        Taro.getCurrentPages().length > 0 && Taro.navigateBack()
+    }
+
+    const navDetail = (id) => {
+        Taro.navigateTo({
+            url: '/pages/message-detail/index?id=' + id
+        })
+    }
+
+    return <View className="message-frame  h-screen text-base">
+        <View className='addr-detail-title'>
+            <Image src={backNav} className="square-35 absolute left-10 nav-icon" onClick={backFn} />
+            消息中心
+        </View>
+        <View className="message-list-container flex-col">
+            <View className="message-item flex-col items-center mt-22">
+                <View className="message-time">今天8:00</View>
+                <View className="message-item-body mt-22">
+                    <View className="message-item-content">
+                        <View className="message-item-title">秒杀专区暂时下线公告</View>
+                        <View className="mt20">秒杀专区暂时下线公告秒杀专区暂时下线公告秒杀专区暂时下线公告秒杀专区暂时下线公告秒杀专区暂时下线公告秒杀专区暂时下线公告秒杀专区暂时下线公告秒杀专区暂时下线公告</View>
+                    </View>
+                    <View className="flex-between message-item-action" onClick={() => { navDetail(1) }}>
+                        <Text>查看详情</Text>
+                        <Image src={next} className="next-icon" />
+                    </View>
+                </View>
+            </View>
+            <View className="message-item flex-col items-center mt-22">
+                <View className="message-time">今天8:00</View>
+                <View className="message-item-body mt-22">
+                    <View className="message-item-content">
+                        <View className="message-item-title">秒杀专区暂时下线公告</View>
+                        <View className="mt20">秒杀专区暂时下线公告秒杀专区暂时下线公告秒杀专区暂时下线公告秒杀专区暂时下线公告秒杀专区暂时下线公告秒杀专区暂时下线公告秒杀专区暂时下线公告秒杀专区暂时下线公告</View>
+                    </View>
+                    <View className="flex-between message-item-action">
+                        <Text>查看详情</Text>
+                        <Image src={next} className="next-icon" />
+                    </View>
+                </View>
+            </View>
+        </View>
+    </View>
+}
+
+
+export default Login

src/pages/message-list/index.scss

@@ -0,0 +1,45 @@
+.message-frame {
+    min-height: 100vh;
+    height: auto;
+    font-size: 14px;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    background-color: #FBFBFD;
+    font-weight: 400;
+    color: #000000;
+}
+
+.message-list-container {
+    padding: 21px;
+}
+
+.message-item-body {
+    width: 333px;
+    background: #FFFFFF;
+    border-radius: 10px 10px 10px 10px;
+    opacity: 1;
+    box-sizing: border-box;
+    padding: 0 11px;
+}
+
+.message-item-content {
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+    padding: 18px 0;
+    color: #5E6272;
+    font-size: 14px;
+}
+
+.message-item-action {
+    height: 58px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.4);
+    font-size: 12px;
+}
+
+.message-time {
+    color: #72778ac6;
+}
+
+.message-item-title {
+    font-size: 16px;
+    color: #000000;
+}

src/pages/message/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+    navigationBarTitleText: '消息中心'
+})

src/pages/message/index.jsx

@@ -0,0 +1,49 @@
+import { Image, Text, View } from "@tarojs/components"
+import right from '@/images/right.png'
+import msg from '@/images/msg.png'
+import ling from '@/images/ling.png'
+import './index.scss'
+import { useState } from "react"
+import Taro from "@tarojs/taro"
+import backNav from '@/images/backNav.png'
+import { useEffect } from "react"
+
+
+const Login = () => {
+
+    // 返回页面
+    const backFn = () => {
+        Taro.getCurrentPages().length > 0 && Taro.navigateBack()
+    }
+
+
+    return <View className="message-frame  h-screen text-base">
+        <View className='addr-detail-title'>
+            <Image src={backNav} className="square-35 absolute left-10 nav-icon" onClick={backFn} />
+            消息中心
+        </View>
+        <View className="message-container">
+            <View className="flex-between">
+                <View className="flex-start">
+                    <View className="msg-icon-container flex-center">
+                        <Image src={msg} className="msg-icon" />
+                    </View>
+                    <Text className="message-title">消息中心</Text>
+                </View>
+                <Image src={right} className="msg-icon" />
+            </View>
+            <View className="flex-between mt25">
+                <View className="flex-start">
+                    <View className="msg-icon-container flex-center">
+                        <Image src={ling} className="msg-icon" />
+                    </View>
+                    <Text className="message-title">系统消息</Text>
+                </View>
+                <Image src={right} className="msg-icon" />
+            </View>
+        </View>
+    </View>
+}
+
+
+export default Login

src/pages/message/index.scss

@@ -0,0 +1,35 @@
+.message-frame {
+    min-height: 100vh;
+    height: auto;
+    font-size: 14px;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    background-color: #FBFBFD;
+    font-weight: 400;
+    color: #000000;
+}
+
+.message-container {
+    box-sizing: border-box;
+    padding: 0 20px;
+    margin: 0 auto;
+    margin-top: 18px;
+    opacity: 1;
+    font-weight: 400;
+    color: #181A20;
+    height: 125px;
+
+}
+
+.msg-icon-container {
+    width: 43px;
+    height: 42px;
+    background: rgba(246, 121, 82, 0.07);
+    border-radius: 10px 10px 10px 10px;
+    opacity: 1;
+    margin-right: 14px;
+}
+
+.msg-icon {
+    width: 24px;
+    height: 24px;
+}

src/pages/order-detail/index.jsx

@@ -1,14 +1,14 @@
 import React from 'react'
-import { Image, Swiper, SwiperItem, Text, View } from '@tarojs/components'
+import { Image, Text, View } from '@tarojs/components'
 import './index.scss'
 
 import { useEffect } from 'react';
 import { useState } from 'react';
 import backNav from '@/images/backNav.png'
-import next from '@/images/next.png'
+import success from '@/images/success.png'
 import Taro from '@tarojs/taro';
 import { useRouter } from '@tarojs/taro';
-import { Button } from '@nutui/nutui-react-taro';
+import { Popup } from '@nutui/nutui-react-taro';
 
 
 
@@ -17,7 +17,9 @@ function Index() {
   const param = useRouter().params
   const [id] = useState(param.id)
 
-  const [swiperProgress, setSwiperProgress] = useState(1)
+  const [actionVisible, setActionVisible] = useState(false)
+  const [actionText, setActionText] = useState('')
+
 
 
   useEffect(() => {
@@ -128,9 +130,19 @@ function Index() {
           <Text className='order-detail-item-right'>在线支付</Text>
         </View>
       </View>
-      <View className='flex-end'>
-        <View className='order-detail-algin-btn flex-center'>再次购买</View>
+      <View className='flex-end order-detail-action'>
+        <View className='order-detail-btn flex-center order-btn-cancel'>取消订单</View>
+        <View className='order-detail-btn flex-center order-btn-pay'>去支付</View>
+        {/* <View className='order-detail-algin-btn flex-center'>再次购买</View> */}
       </View>
+
+
+      <Popup visible={actionVisible} onClose={() => { setShowBasic(false) }}>
+        <View className='dialog-content flex-center'>
+          <Image src={success} className='w-4 h-4' />
+          <Text className='ml12'>{actionText}</Text>
+        </View>
+      </Popup>
     </View>
   )
 }

src/pages/order-detail/index.scss

@@ -207,13 +207,47 @@
     margin-left: 10px;
 }
 
-.order-detail-algin-btn {
+.order-detail-btn {
     width: 145px;
     height: 55px;
-    background: #FEEBE5;
     border-radius: 123px 123px 123px 123px;
+    margin-left: 10px;
+}
+
+.order-detail-btn:first {
+    margin-left: 0;
+}
+
+.order-detail-action {
+    padding: 0 20px;
+}
+
+.order-detail-algin-btn {
+    @extend .order-detail-btn;
+    background: #FEEBE5;
     opacity: 1;
-    margin-top: 16px;
     color: #F67952;
-    margin-right: 20px;
+
+}
+
+.order-btn-pay {
+    background: #F67952;
+    border: none;
+    color: #FFFFFF;
+}
+
+.order-btn-cancel {
+    background: rgba(246, 121, 82, 0.15);
+    border: none;
+    color: #F67952
+}
+
+.order-btn-algin {
+    border: 1px solid #F67952;
+    color: #F67952
+}
+
+.order-btn-delete {
+    border: 1px solid rgba(0, 0, 0, 0.5);
+    color: #5E6272;
 }

src/pages/setting/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+    navigationBarTitleText: '设置'
+})

src/pages/setting/index.jsx

@@ -0,0 +1,42 @@
+import { Image, Text, View } from "@tarojs/components"
+import next from '@/images/next.png'
+import './index.scss'
+import { useState } from "react"
+import Taro from "@tarojs/taro"
+import backNav from '@/images/backNav.png'
+import { useEffect } from "react"
+
+
+const Login = () => {
+
+
+
+    // 返回页面
+    const backFn = () => {
+        Taro.getCurrentPages().length > 0 && Taro.navigateBack()
+    }
+
+
+    const navAboutMe = () => {
+        Taro.navigateTo({
+            url: '/pages/about-me/index'
+        })
+    }
+
+
+    return <View className="setting-frame  h-screen text-base">
+        <View className='addr-detail-title'>
+            <Image src={backNav} className="square-35 absolute left-10 nav-icon" onClick={backFn} />
+            系统设置
+        </View>
+        <View className="setting-container">
+            <View className="flex-between setting-item" onClick={navAboutMe}>
+                <Text>关于我们</Text>
+                <Image src={next} className="next-icon" />
+            </View>
+        </View>
+    </View>
+}
+
+
+export default Login

src/pages/setting/index.scss

@@ -0,0 +1,26 @@
+.setting-frame {
+    min-height: 100vh;
+    height: auto;
+    font-size: 14px;
+    font-family: Source Han Sans CN-Bold, Source Han Sans CN;
+    background-color: #FBFBFD;
+}
+
+.setting-container {
+    width: 333px;
+    box-sizing: border-box;
+    padding: 0 20px;
+    margin: 0 auto;
+    margin-top: 18px;
+    background: #FFFFFF;
+    box-shadow: 4px 7px 9px 0px rgba(56, 63, 68, 0.03);
+    border-radius: 10px 10px 10px 10px;
+    opacity: 1;
+    font-weight: 400;
+    color: #181A20;
+}
+
+.setting-item {
+    height: 56px;
+    border-bottom: 1px solid #ededed6f;
+}

src/pages/team/index.jsx

@@ -1,7 +1,7 @@
 import { Image, Input, Text, View } from "@tarojs/components"
 import back from '@/images/back.png'
 import checked from '@/images/checked.png'
-import level2 from '@/images/level2.png'
+import teamIcon from '@/images/teamIcon.png'
 import eye from '@/images/eye.png'
 import './index.scss'
 import { Button } from "@nutui/nutui-react-taro"
@@ -76,7 +76,7 @@ const Login = () => {
 
         <View className="team-container flex-col items-center">
             <View className="team-logo flex-col items-center">
-                <Image src={level2} className="team-logo-img" />
+                <Image src={teamIcon} className="team-logo-img" />
                 <Text>城市合伙人</Text>
                 <Text className="team-logo-text">我的等级</Text>
             </View>

src/pages/team/index.scss

@@ -16,8 +16,8 @@
 }
 
 .team-logo-img {
-    width: 80px;
-    height: 80px;
+    width: 86px;
+    height: 86px;
     margin-bottom: 10px;
 }