HW 4 år sedan
förälder
incheckning
abf61bdce8

BIN
src/custom-tab-bar/image/tabBarBackground.png


+ 6 - 8
src/custom-tab-bar/index.jsx

@@ -34,19 +34,19 @@ class CustomTabBar extends Component{
           pagePath: "/pages/index/index",
           iconPath: icon_component,
           selectedIconPath: icon_component_HL,
-          text: "组件"
+          text: "首页"
         },
         {
-          pagePath: "/pages/user/index",
+          pagePath: "/pages/index/index",
           iconPath: icon_API,
           selectedIconPath: icon_API_HL,
-          text: "接口"
+          text: "课程"
         },
         {
           pagePath: "/pages/user/index",
           iconPath: icon_API,
           selectedIconPath: icon_API_HL,
-          text: "接口"
+          text: "我的"
         },
       ]
     }
@@ -62,8 +62,7 @@ class CustomTabBar extends Component{
   render() {
     return(
       <View className='tab-bar'>
-        <View className='ss'>
-          <View  className='tab-bar-border'/>
+          {/*<View  className='tab-bar-border'/>*/}
           {
             this.state.list.map((v,key)=>(
               <View key={key} className='tab-bar-item' dataPath={v.pagePath} dataIndex={key} onClick={()=>{
@@ -77,7 +76,7 @@ class CustomTabBar extends Component{
                         {v.text}
                       </View>
                     </>:
-                    <View className='zhong' style={{background: '#393484'}}>
+                    <View className='zhong'>
                       <CoverImage className='coverImage' src={this.props.counter.num === key ? v.selectedIconPath : v.iconPath}/>
                       <View className='View'  style={{color:this.props.counter.num === key ? this.state.selectedColor : this.state.color}}>{v.text}</View>
                     </View>
@@ -85,7 +84,6 @@ class CustomTabBar extends Component{
               </View >
             ))
           }
-        </View>
       </View >
     )
   }

+ 6 - 11
src/custom-tab-bar/index.less

@@ -3,22 +3,17 @@
   bottom: 0;
   left: 0;
   right: 0;
-  height: 132px;
-  padding-top:23px;
+  height: 149px;
   display: flex;
   padding-bottom: env(safe-area-inset-bottom);
   z-index: 9999999;
-  .ss{
-    display: flex;
-    height: 100%;
-    width: 100%;
-    background: #393484;
-  }
+  background: #00000000 url("./image/tabBarBackground.png") no-repeat;
+  background-size: 100% 100%;
   .tab-bar-border {
     background-color: rgba(0, 0, 0, 0.33);
     position: absolute;
     left: 0;
-    top: 23px;
+    top: 0;
     width: 100%;
     height: 1px;
     transform: scaleY(0.5);
@@ -36,6 +31,7 @@
   .tab-bar-item .coverImage {
     width: 44px;
     height: 44px;
+    padding-top: 48px;
   }
 
   .tab-bar-item .View {
@@ -45,8 +41,7 @@
 
   .zhong {
     position: absolute;
-    bottom: 50px;
-    background: #393484;
+    bottom: 14px;
     width: 98px;
     height: 98px;
     padding: 23px;

+ 2 - 0
src/pages/details/index.config.js

@@ -2,6 +2,8 @@ export default {
   navigationBarTitleText: '产品详情',
   enablePullDownRefresh: true,
   backgroundColor: '#000',
+  navigationBarBackgroundColor:'#77D4FF',
+  navigationBarTextStyle:'white',
   usingComponents: {
     "mp-html": "../../components/common/mp-weixin/index",
   }

Filskillnaden har hållts tillbaka eftersom den är för stor
+ 48 - 87
src/pages/details/index.jsx


+ 66 - 73
src/pages/details/index.less

@@ -1,93 +1,86 @@
-.indexPage{
-  .swiper{
-    height: 500px;
-    .swiperImage {
-      width: 100%;
-      height: inherit;
-    }
+.detailsPage{
+  position: relative;
+  min-height: 100vh;
+  background: #F5F5F5;
+  z-index: 1;
+  padding-bottom: 65px;
+  .background{
+    position: absolute;
+    top: -18px;
+    z-index: -1;
+    width: 100%;
+    height: 300px;
   }
-  .content{
-    display: flex;
-    flex-flow: row nowrap;
-    align-items: center;
-    justify-content: space-between;
-    padding: 25px 25px 45px 25px;
-    border-bottom: 20px solid #eae5e5;
-    .contentIntroduce{
-     padding-right: 80px;
-      text-align: center;
-      .title{
-        font-size: 38px;
-        color: #777777;
-      }
-      .introduce{
-        padding-top: 15px;
-        text-align: left;
-        font-size: 25px;
-        color: #777777;
-      }
-      .time{
-        text-align: left;
-        font-size: 18px;
-        color: #666;
-        padding-top: 18px;
+  .introduce{
+    margin: 18px 26px 42px 0;
+    background: #FFFFFF;
+    border-top-right-radius: 33px;
+    border-bottom-right-radius: 33px;
+    overflow: hidden;
+    box-shadow: #393483 -1px 1px 21px 0;
+    .imgContent{
+      width: 100%;
+      .img{
+        width: 100%;
       }
     }
-    .giveContent{
-      text-align: center;
-      .giveImage{
-        width: 60px;
-        height: 60px;
+    .infor{
+      padding: 24px;
+      background: #393484;
+      .title{
+        color: #FFFFFF;
+        font-size: 22px;
       }
-      .time{
-        font-size: 20px;
-        color: #666;
-        white-space: nowrap;
+      .introduceItem{
+        display: flex;
+        flex-flow: row nowrap;
+        justify-content: space-between;
+        padding-top: 19px;
+        .introduceContent{
+          color: #999999;
+          font-size: 13px;
+        }
+        .user{
+          display: flex;
+          flex-flow: row nowrap;
+          .avater{
+             width: 18px;
+             height: 18px;
+            border-radius: 18px;
+          }
+          .name{
+            padding-left: 6px;
+            color: #FFFFFF;
+            font-size: 15px;
+          }
+        }
       }
     }
   }
-  .shopInfo{
-    padding: 15px 25px 0px 25px;
-    margin-bottom: 53px;
-    image{
-      width: 100%;
+  .detailsContent{
+    padding-left: 19px;
+    padding-right: 19px;
+    .details{
+      font-size: 32px;
+      font-weight: bolder;
+      color: #303030;
+      padding-bottom: 22px;
     }
   }
-  .at-tabs__item-underline{
-    width: 56%;
-    margin-left: 88px;
-    border-radius: 10px;
-    background-color: #30ec0e;
-    padding-top: 4px;
-    padding-bottom: 4px;
-  }
-  .at-tabs__item {
-    font-size: 34px;
-    color: #777777;
-  }
-  .at-tabs__item--active{
-    color: #30ec0e;
-  }
   .shop{
     display: flex;
     position: fixed;
     bottom: 0;
     left: 0;
     right: 0;
-    height: 120px;
-    color: #FFF;
-    font-size: 35px;
-    .member{
-      flex: 1;
-      text-align: center;
-      background: darkorange;
-      line-height: 120px;
-    }
+    color: #FFFFFF;
+    font-size: 27px;
     .singlePurchase{
-      flex: 1;
+      margin-left: auto;
+      padding: 19px 44px;
       text-align: center;
-      background: #30ec0e;
-      line-height: 120px;
+      background: #CE9F1E;
+      width: 220px;
     }
   }
 }

+ 1 - 0
src/pages/index/index.config.js

@@ -3,6 +3,7 @@ export default {
   enablePullDownRefresh: true,
   // navigationStyle: 'custom',
   navigationBarBackgroundColor:'#77D4FF',
+  navigationBarTextStyle:'white',
   backgroundColor: '#FFF',
   onReachBottomDistance: 310,
   usingComponents: {

+ 4 - 1
src/pages/user/index.config.js

@@ -1,5 +1,8 @@
 export default {
   navigationBarTitleText: '我的',
   enablePullDownRefresh: true,
-  backgroundColor: '#000',
+  navigationBarTextStyle:'white',
+  backgroundColor: '#FFF',
+  navigationBarBackgroundColor:'#77D4FF',
+  onReachBottomDistance: 310,
 }

+ 68 - 3
src/pages/user/index.jsx

@@ -5,10 +5,11 @@ import { View, Image, Video,Button,OpenData } from '@tarojs/components'
 import {add, minus, asyncAdd, set} from '../../actions/counter'
 import { Swiper, SwiperItem } from '@tarojs/components'
 import { AtTabs, AtTabsPane } from 'taro-ui'
-import { login,pay,payClose } from '../../utils/servers/servers'
 import './index.less'
 import IconFont from '../../components/iconfont';
 import API from '../../utils/API';
+import { login,getProjecList } from '../../utils/servers/servers'
+import background from "../../assets/images/background.png";
 
 @connect(({ counter }) => ({
   counter
@@ -33,7 +34,8 @@ class Index extends Component {
   constructor(props) {
     super(props);
     this.state={
-
+      pageNo:1,
+      list: [],
     }
   }
 
@@ -128,10 +130,73 @@ class Index extends Component {
     }
   }
 
+  getProjecList (pageNo = 1){
+    getProjecList({
+      pageNo: pageNo,
+      pageSize: 5,
+    }).then(v=>{
+      if(v.error.length === 0){
+        this.setState({
+          list:pageNo === 1 ? v.data.list : this.state.list.concat(v.data.list),
+          pageNo: v.data.pageNo
+        })
+      }else{
+        Taro.showToast({title:v.error[0].message,icon:'none'})
+      }
+      Taro.stopPullDownRefresh();
+    })
+  }
+
+  async componentDidMount() {
+    this.login();
+    await this.getProjecList();
+  }
+
+  onPullDownRefresh(){
+    this.getProjecList();
+  }
+
+  onReachBottom(){
+    this.getProjecList(this.state.pageNo+1);
+  }
+
   render () {
     return (
       <View className='userPage'>
-       1111
+        <Image src={background} className='background'/>
+        <View className='userInfor'>
+          <View className='avatar'>
+            <OpenData type='userAvatarUrl'/>
+          </View>
+          <View className='nickName'>
+            <OpenData type='userNickName'/>
+          </View>
+        </View>
+        <View className='list'>
+          {this.state.list.map((v,k)=>(
+            <View className='item' key={k} onClick={()=>{
+              Taro.navigateTo({
+                url:'/pages/details/index?id='+v.id
+              })
+            }}>
+              <View className='block'>
+                <View className='top'/>
+                <View className='bottom'>
+                  <View className='left'/>
+                  <View className='right'/>
+                </View>
+              </View>
+              <View className='infor'>
+                <View className='title'>高新培育课程</View>
+                <View className='content'>快速提高 项目奖励 </View>
+              </View>
+              <View className='moneyInfor'>
+                <View className='money'>¥269</View>
+                <View className='time'>2021-05-01</View>
+              </View>
+            </View>
+          ))}
+        </View>
       </View>
     )
   }

+ 89 - 1
src/pages/user/index.less

@@ -1,3 +1,91 @@
 .userPage{
-
+  position: relative;
+  min-height: 100vh;
+  background: #F5F5F5;
+  z-index: 1;
+  padding-bottom: 202px;
+  .background{
+    position: absolute;
+    top: 0;
+    z-index: -1;
+    width: 100%;
+    height: 300px;
+  }
+  .userInfor{
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: flex-start;
+    padding: 39px 0 36px 25px;
+    .avatar{
+      width: 104px;
+      height: 104px;
+      border-radius: 104px;
+      overflow: hidden;
+    }
+    .nickName{
+      padding-left: 19px;
+      font-size: 25px;
+      color: #FFFFFF;
+    }
+  }
+  .list{
+    padding: 0 154px 0 66px;
+    .item{
+      background: #FFFFFF;
+      border-radius: 6px;
+      padding: 47px 22px 16px 16px;
+      display: flex;
+      flex-flow: row nowrap;
+      align-items: center;
+      margin-bottom: 64px;
+      .block{
+        width: 29px;
+        height: 28px;
+        .top{
+          height: 10px;
+          background: #CF91FA;
+        }
+        .bottom{
+          display: flex;
+          flex-flow: row nowrap;
+          height: 18px;
+          .left{
+            flex: 1;
+            background: #C6106A;
+            opacity: 0.6;
+          }
+          .right{
+            flex: 1;
+            background: #912FFF;
+            opacity: 0.6;
+          }
+        }
+      }
+      .infor{
+        padding-left: 20px;
+        .title{
+          font-size: 24px;
+          color: #000000;
+          padding-bottom: 12px;
+        }
+        .content{
+          font-size: 18px;
+          color: #000000;
+        }
+      }
+      .moneyInfor{
+        margin-left: auto;
+        text-align: right;
+        .money{
+          font-size: 27px;
+          color: #000000;
+          padding-bottom: 10px;
+        }
+        .time{
+          font-size: 16px;
+          color: #000000;
+        }
+      }
+    }
+  }
 }

+ 6 - 1
src/utils/servers/servers.js

@@ -8,7 +8,7 @@ export const login = (postData) => {
 
 //产品支付
 export const pay = (postData) => {
-  return HTTPREQUEST.post('/wxPush', postData)
+  return HTTPREQUEST.post('/api/user/wxPush', postData)
 }
 
 //撤销支付
@@ -21,6 +21,11 @@ export const getProjecList = (postData) => {
   return HTTPREQUEST.get('/open/projectList', postData)
 }
 
+//产品详情
+export const getSelectProject = (postData) => {
+  return HTTPREQUEST.get('/open/selectProject', postData)
+}
+
 //测试
 export const test = (postData) => {
   return HTTPREQUEST.get('/open/test', postData)