detail

src/common/HeaderBar/index.js

@@ -5,18 +5,30 @@ class HeaderBar extends Component {
     constructor(props) {
         super(props);
     }
+
     goBack = () => {
         window.history.go(-1);
     }
     goShop = () => {
         location.replace('/shopcart');
     }
+
     render() {
         return (
             <div className="detail-header" style={{...this.props.style}}>
-                <i className={`iconfont ${this.props.arrow ? 'iconiconfront-68' : ''} return`} onClick={this.goBack}></i>
+                {
+                    this.props.arrow &&
+                    <i className='iconfont iconiconfront-68' onClick={this.goBack}></i>
+                }
                 <span className='herder'>{this.props.title}</span>
-                <i className={`iconfont ${this.props.cart ? 'icongouwuche-xianxing' : ''} shopping-cart`} onClick={this.goShop}></i>
+                {
+                    this.props.cart &&
+                    <i className='iconfont icongouwuche-xianxing' onClick={this.goShop}></i>
+                }
+                {
+                    this.props.delete &&
+                    <i className='iconfont iconiconfront-56' onClick={this.props.toDelete}></i>
+                }
             </div>
         );
     }

src/common/HeaderBar/index.scss

@@ -3,13 +3,21 @@
   line-height: 44px;
   padding: 0 15px;
   background-color: $bg_f7f9fc;
-  display: flex;
-  justify-content: space-between;
+  text-align: center;
 
-  .shopping-cart, .return {
+  i {
     font-size: 18px !important;
   }
 
+  i:nth-of-type(1) {
+    float: left;
+  }
+
+  i:nth-of-type(2) {
+    float: right;
+  }
+
+
   .herder {
     font-size: 16px;
     color: $color_202426;

src/common/HeaderSearch/index.js

@@ -21,7 +21,7 @@ class HeaderBar extends Component {
                         onFocus={this.toSearch.bind(this)}
                         showCancelButton={false}
                     />
-                    <i className={'iconfont icongouwuche shopping-cart'}></i>
+                    <i className={'iconfont icongouwuche-xianxing shopping-cart'}></i>
                 </div>
             </div>
         )

src/components/classify/index.js

@@ -4,6 +4,8 @@ import './index.scss';
 import {http, api} from "@/utils";
 import {Link} from 'react-router-dom'
 import {Toast} from 'antd-mobile'
+import { HeaderBar } from "@/common"
+
 
 class Classify extends Component {
     constructor(props) {
@@ -45,7 +47,7 @@ class Classify extends Component {
     render() {
         return (
             <div className='class-box'>
-                <div className="class-title">分类</div>
+                <HeaderBar title='分类' arrow={false} cart={false}></HeaderBar>
                 <ClassCourseBox data={this.state.camp.list} title={this.state.camp.name} type={1}/>
                 <ClassCourseBox data={this.state.employment.list} title={this.state.employment.name} type={1}/>
                 <ClassCourseBox data={this.state.basics.list} title={this.state.basics.name} type={2}/>

src/components/detail/index.js

@@ -74,7 +74,7 @@ class Detail extends Component {
         return (
             <div className='detail-box'>
                 <ToApp className='toapp' toApp={this.toApp}></ToApp>
-                <HeaderBar title={'课程详情'}></HeaderBar>
+                <HeaderBar title='课程详情' arrow={true} cart={true}></HeaderBar>
                 {/*弹幕*/}
                 <Carouselw></Carouselw>
                 {/*课程*/}

src/components/my/edit.js

+import React, {PureComponent} from 'react'
+import './index.scss'
+import {connect} from "react-redux"
+import {Toast} from 'antd-mobile'
+import {api, http} from "@/utils"
+import {HeaderBar} from "@/common"
+
+
+class MyEdut extends PureComponent {
+    constructor(props) {
+        super(props)
+        this.state = {
+            isShow: false,
+            value: ''
+        }
+    }
+
+    // 点击编辑
+    toEditName = () => {
+        this.setState({
+            isShow: true,
+            value: ''
+        })
+    }
+    // 取消
+    cancle = () => {
+        this.setState({
+            isShow: false
+        })
+    }
+
+    // 获取input的值
+    handleChange = (e) => {
+        this.setState({
+            value: e.target.value
+        })
+    }
+    // 退出登录
+    outLogin = () => {
+
+    }
+
+    // 确定修改
+    submit = () => {
+        console.log(this.state.value)
+        if (this.state.value.length > 12) {
+            Toast.info('不超过12个字符', 2)
+        } else if (this.state.value.length === 0) {
+            Toast.info('请输入昵称', 2)
+        } else {
+            let data = {
+                user_name: this.state.value
+            }
+            http.post(`${api.home}/m/user_info/update`, data).then((res) => {
+                if (res.data.code === 200) {
+                    this.setState({
+                        isShow: false
+                    })
+                    Toast.info('修改成功', 2)
+                } else {
+                    Toast.info(res.data.msg, 2)
+                }
+
+            })
+        }
+    }
+
+    render() {
+        const {user} = this.props
+        const username = user && user.data && user.data.username
+        const avatar = user && user.data && user.data.avatar
+        return (
+            <div className="edit-name">
+                <HeaderBar title='账号' arrow={true} cart={false}></HeaderBar>
+
+                <div className='my-mess'>
+                    <img src={avatar} alt=""/>
+                    <span className="name">{username}</span>
+                    <span onClick={this.toEditName} className="edit">编辑</span>
+                </div>
+                <div className="out-login" onClick={this.outLogin}>
+                    退出登录
+                </div>
+
+                {
+                    this.state.isShow &&
+                    <div className="edit-mbc">
+                        <div className="edit-content">
+                            <div className="edit-title">修改昵称</div>
+                            <input type="text" placeholder='请输入昵称（不超过12个字符）'
+                                   value={this.state.value}
+                                   onChange={this.handleChange.bind(this)}
+                            />
+                            <div className="edit-btn">
+                                <button className='cancle' onClick={this.cancle}>取消</button>
+                                <button className='submit' onClick={this.submit}>确认</button>
+                            </div>
+                        </div>
+                    </div>
+                }
+            </div>
+        )
+    }
+
+}
+
+export default connect(
+    state => ({user: state.user}),
+    null
+)(MyEdut)

src/components/my/index.js

-import React, {PureComponent} from 'react';
-import {Flex, WhiteSpace, NavBar, List} from 'antd-mobile';
-import './index.scss';
-import Avatar from './image/avatar.png';
-import Vip from './image/vip.png';
+import React, {PureComponent} from 'react'
+import {Flex, WhiteSpace, List} from 'antd-mobile'
+import './index.scss'
+import Avatar from './image/avatar.png'
+import Vip from './image/vip.png'
 import {WithTab} from '@/HOCs'
-import {Link} from "react-router-dom";
-import {connect} from "react-redux";
+import {Link} from "react-router-dom"
+import {connect} from "react-redux"
+import {HeaderBar} from "@/common"
 
 const Item = List.Item;
 const Brief = Item.Brief;
@@ -43,25 +44,26 @@ class My extends PureComponent {
             </List>
         } else {
             list = <List className="my-list">
-                <Item
-                    className="avatar-wrap"
-                    arrow="horizontal"
-                    multipleLine
-                    thumb={avatar}
-                    onClick={() => {
-                    }}>
-                    <Brief>
-                        {username}
-                        {
-                            isVIP === 1 &&
-                            <img src={Vip} className='vip' alt=""/>
-                        }
+                <Link to='/myedit'>
+                    <Item
+                        className="avatar-wrap"
+                        arrow="horizontal"
+                        multipleLine
+                        thumb={avatar}
+                    >
+                        <Brief>
+                            {username}
+                            {
+                                isVIP === 1 &&
+                                <img src={Vip} className='vip' alt=""/>
+                            }
 
-                    </Brief>
-                    <Brief style={{fontSize: "12px"}}>学号: {uid}</Brief>
-                </Item>
+                        </Brief>
+                        <Brief style={{fontSize: "12px"}}>学号: {uid}</Brief>
+                    </Item>
+                </Link>
                 {
-                    isVIP === 0 &&
+                    (isVIP === 0 || !isVIP) &&
                     <div className="my-isvip"></div>
                 }
             </List>
@@ -70,9 +72,8 @@ class My extends PureComponent {
             <div className="flex-container">
                 <Flex>
                     <Flex.Item>
-                        <NavBar className="my-tab" mode="light">
-                            我的
-                        </NavBar>
+                        <HeaderBar title='我的' arrow={false} cart={false}></HeaderBar>
+
                         {list}
 
                         <div className="am-list-header"></div>

src/components/my/index.scss

@@ -128,4 +128,112 @@
     background-color: transparent !important;
     height: 0 !important;
   }
+}
+
+
+.edit-name {
+  width: 100%;
+  height: 100%;
+  background-color: $bg_f5f5f5;
+  position: relative;
+
+  .my-mess {
+    width: 100%;
+    height: 94px;
+    padding: 0 20px;
+    line-height: 94px;
+    font-size: 16px;
+    background-color: $bg_fff;
+
+    img {
+      width: 64px;
+      height: 64px;
+      border-radius: 50%;
+      margin-right: 15px;
+      vertical-align: middle;
+    }
+
+    .name {
+      display: inline-block;
+      margin-left: 15px;
+      color: $color_666;
+    }
+
+    .edit {
+      color: $active;
+      float: right;
+    }
+  }
+
+  .out-login {
+    width: 100%;
+    height: 44px;
+    background-color: $bg_fff;
+    line-height: 44px;
+    text-align: center;
+    font-size: 16px;
+    color: $color_333;
+    position: absolute;
+    bottom: 50px;
+  }
+
+  .edit-mbc {
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    background: rgba(0, 0, 0, .5);
+
+    .edit-content {
+      background-color: $bg_fff;
+      width: 300px;
+      height: 135px;
+      border-radius: 5px;
+      margin: 224px auto 0 auto;
+      text-align: center;
+      padding-top: 20px;
+
+      .edit-title {
+        font-size: 16px;
+        color: $color_333;
+        height: 16px;
+        line-height: 16px;
+      }
+
+      input {
+        width: 240px;
+        height: 30px;
+        border: 1px solid $border_ddd;
+        border-radius: 3px;
+        padding-left: 15px;
+        margin-top: 15px;
+      }
+
+      .edit-btn {
+        height: 40px;
+        margin-top: 15px;
+        font-size: 16px;
+        border-top: 1px solid $border_ddd;
+
+        button {
+          background-color: $bg_fff;
+          width: 50%;
+          height: 100%;
+          border: none;
+        }
+
+        .cancle {
+          border-right: 1px solid $border_ddd;
+          border-radius: 0 0 0 3px;
+        }
+
+        .submit {
+          color: $active;
+          border-radius: 0 0 3px 0;
+
+        }
+      }
+    }
+  }
 }
\ No newline at end of file

src/components/myOrders/index.js

-import React, {Component} from 'react';
-import './index.scss';
+import React, {Component} from 'react'
+import './index.scss'
 import {HeaderBar} from '../../common'
-import OrderList from '@/common/OrderList';
-import {http, api} from "@/utils";
+import OrderList from '@/common/OrderList'
+import {http, api} from "@/utils"
 import {Link} from 'react-router-dom'
-import {Checkbox, NavBar, Modal, Toast} from 'antd-mobile'
+import {Modal, Toast} from 'antd-mobile'
 
 const alert = Modal.alert;
 
@@ -61,7 +61,7 @@ class MyOrders extends Component {
 
         return (
             <div className='myorders-box'>
-                <HeaderBar title={'我的订单'}></HeaderBar>
+                <HeaderBar title='我的订单' arrow={true} cart={false}></HeaderBar>
                 {
                     this.state.data && this.state.data.length > 0 ?
                         this.state.data.map((item, index) => {

src/components/purchased/index.js

@@ -38,7 +38,7 @@ class Purchased extends Component {
         const uid = user && user.data && user.data.uid
         return (
             <div className='purchased-box'>
-                <HeaderBar title={'已购课程'}></HeaderBar>
+                <HeaderBar title='已购课程' arrow={true} cart={false}></HeaderBar>
                 {
                     this.state.data && this.state.data.length > 0 ?
                         <div className="purchased-body">

src/components/sharePoster/index.js

@@ -229,7 +229,7 @@ class SharePoster extends Component {
     render() {
         return (
             <div className='share-poster'>
-                <HeaderBar title={'生成专属海报'}></HeaderBar>
+                <HeaderBar title='生成专属海报' arrow={true} cart={false}></HeaderBar>
                 <div className="total-container">
                     <div className='placard-img-container' id='imgWrapper'>
                         <img src={this.state.billSrc.src} alt=""/>

src/components/shopCart/index.js

 import React, {Component} from 'react'
 import {connect} from 'react-redux'
-import {Checkbox, NavBar, Modal, Toast} from 'antd-mobile'
+import {Checkbox, Modal, Toast} from 'antd-mobile'
+import {HeaderBar} from '../../common'
 
 //组件
 import ShopCart from './cartList.js'
@@ -126,7 +127,7 @@ class Cart extends Component {
     }
 
     // 删除
-    detail = () => {
+    todelete = () => {
         if (this.state.courseIdarr.length > 0) {
             alert('', '确定从购物车中删除？', [
                 {text: '取消', onPress: () => console.log('cancel')},
@@ -155,18 +156,7 @@ class Cart extends Component {
     render() {
         return (
             <div className="cart-page" style={{overflow: 'hidden'}}>
-                <NavBar
-                    style={{"height": "44px"}}
-                    className="order-tab"
-                    mode="light"
-                    icon={<i style={{"fontSize": '24px'}} className="iconfont iconiconfront-68"></i>}
-                    rightContent={[
-                        <i key="0" style={{"fontSize": '24px'}} className="iconfont iconiconfront-56"
-                           onClick={this.detail}></i>
-                    ]}
-                >
-                    购物车
-                </NavBar>
+                <HeaderBar title='购物车' arrow={true} cart={false} delete={true} toDelete={this.todelete}></HeaderBar>
 
                 <div className="cart-body">
                     <ShopCart checkChange={this.checkChange.bind(this)} data={this.state.data}/>

src/router/router-config.js

@@ -4,6 +4,7 @@ import loadable from '@loadable/component'
 import Index from '@/components/Index';
 import Classify from '@/components/classify';
 import My from '@/components/my';
+import MyEdit from '@/components/my/edit';
 import CourseList from '@/components/classify/courselist';
 import Order from '@/components/order/index';
 import Orderinfo from '@/components/order/orderinfo';
@@ -44,6 +45,10 @@ export default [
         component: My
     },
     {
+        path: '/myedit',
+        component: MyEdit
+    },
+    {
         path: '/courselist',
         component: CourseList
     },