✨ feat(ID1000772 我的页面_个人详情页 完成):

src/components/iconfont/iconfont.scss

@@ -1,3 +1,3 @@
-.icon {
+.icon {
-  background-repeat: no-repeat;
+  background-repeat: no-repeat;
-}
+}

src/pages/user/index.module.scss

@@ -1,15 +1,274 @@
 .user_main {
+  min-height: 100vh;
+  background: #f7f7f7;
   .user_main__header {
-    height: 315px;
+    min-height: 315px;
     width: 100%;
     background-color: #eff3ff;
     position: relative;
-    image {
+    .header_bg {
       width: 100%;
       height: 100%;
       position: absolute;
       top: 0;
       left: 0;
     }
+    .header_img_name {
+      display: flex;
+      position: relative;
+      padding: 25px 36px 0 36px;
+      z-index: 999;
+      align-items: center;
+      flex: 1;
+      .header_img {
+        width: 120px;
+        height: 120px;
+        border-radius: 50%;
+        border: 4px solid #ffffff;
+        box-sizing: border-box;
+        .header_img_src {
+          height: 100%;
+          width: 100%;
+          border-radius: 50%;
+        }
+      }
+      .header_name {
+        margin-left: 36px;
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        position: relative;
+        .getPhoneButton {
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          opacity: 0;
+        }
+        .arcd-info-left-phone {
+          position: relative;
+          .header_title {
+            font-size: 28px;
+            color: rgba(0, 0, 0, 0.6);
+            margin-top: 10px;
+          }
+        }
+        text {
+          &:nth-child(1) {
+            font-size: 48px;
+            font-weight: 500;
+          }
+          &:nth-child(2) {
+            font-size: 28px;
+            color: rgba(0, 0, 0, 0.6);
+            margin-top: 10px;
+          }
+        }
+        .header_picture {
+          display: flex;
+          align-items: center;
+          padding: 5px 0;
+          padding-right: 10px;
+          height: 38px;
+          background: #3e6cff;
+          border-radius: 16px;
+          font-size: 24px;
+          border-radius: 16px;
+          color: #fff;
+          margin-top: 8px;
+          align-self: baseline;
+          .header_picture_name {
+            margin-left: 8px;
+          }
+        }
+      }
+      .header_setting {
+        margin-right: 36px;
+      }
+    }
+    .header_count {
+      width: 100%;
+      position: relative;
+      z-index: 999;
+      display: flex;
+      justify-content: space-between;
+      margin-top: 48px;
+      .header_count__item {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        text {
+          &:nth-child(1) {
+            font-size: 42px;
+            font-weight: bold;
+          }
+          &:nth-child(2) {
+            font-size: 26px;
+            color: #666666;
+            margin-top: 16px;
+          }
+        }
+      }
+    }
+    .price_count {
+      position: relative;
+      z-index: 999;
+      width: 100%;
+      padding: 0 24px;
+      box-sizing: border-box;
+      margin-top: 24px;
+      .price_bg {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+      .price_count_list {
+        height: 131px;
+        display: flex;
+        justify-content: space-between;
+        background: #15214c;
+        border-radius: 24px 24px 0px 0px;
+        position: relative;
+        .list_item {
+          flex: 1;
+          text-align: center;
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          justify-content: center;
+          margin-left: 48px;
+          position: relative;
+          z-index: 999;
+          .list_item_title {
+            color: rgba(255, 255, 255, 0.6);
+            font-size: 24px;
+          }
+          .list_item_number {
+            font-size: 28px;
+            color: rgba(255, 255, 255, 0.8);
+            margin-top: 8px;
+            text {
+              font-size: 22px;
+            }
+          }
+        }
+      }
+    }
+  }
+  .order_count {
+    background-color: #fff;
+    padding-bottom: 32px;
+    .order_count__title {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 32px;
+      .title_text {
+        font-size: 28px;
+        font-weight: 700;
+        color: rgba(0, 0, 0, 0.9);
+      }
+      .title__more {
+        display: flex;
+        align-items: center;
+        text {
+          font-size: 24px;
+          color: #666666;
+        }
+        .title_more_icon {
+          transform: rotate(-90deg);
+        }
+      }
+    }
+    .order_count__list {
+      display: flex;
+      justify-content: space-between;
+      padding: 0 10px;
+      .order_count__item {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        font-size: 26px;
+        position: relative;
+        text {
+          color: #666666;
+          margin-top: 8px;
+        }
+      }
+    }
+    .order_number {
+      background: #f64861ff;
+      color: #fff !important;
+      height: 30px;
+      border-radius: 20px;
+      padding: 2px 10px;
+      text-align: center;
+      line-height: 30px;
+      position: absolute;
+      font-size: 20px;
+      box-sizing: border-box;
+      top: 0;
+      right: 15px;
+    }
+  }
+  .nav_list {
+    background-color: #fff;
+    margin-top: 10px;
+    .nav_list__title {
+      font-size: 28px;
+      font-weight: 700;
+      color: rgba(0, 0, 0, 0.9);
+      padding: 32px;
+      padding-bottom: 16px;
+    }
+  }
+  .list_con {
+    .list_item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 0 32px;
+      height: 88px;
+      position: relative;
+      &:nth-last-child(n + 2) {
+        .list_item_con {
+          border-bottom: 1px solid #efefef;
+        }
+      }
+      .customer {
+        position: absolute;
+        opacity: 0;
+        width: 100%;
+        height: 100%;
+      }
+      .list_item_con {
+        flex: 1;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 28px;
+        color: rgba(0, 0, 0, 0.7);
+        height: 100%;
+        margin-left: 32px;
+
+        box-sizing: border-box;
+        .title_more_icon {
+          transform: rotate(-90deg);
+        }
+        .title_more_kf {
+          display: flex;
+          font-size: 28px;
+          text {
+            margin-right: 27px;
+            color: rgba(0, 0, 0, 0.7);
+          }
+        }
+      }
+    }
   }
 }

src/pages/user/index.tsx

@@ -1,15 +1,164 @@
-import { Image, View } from '@tarojs/components'
+import { Button, Image, Text, View } from '@tarojs/components'
+import Taro, { useDidShow, usePullDownRefresh } from '@tarojs/taro'
 import classnames from 'classnames'
+import { useMemo } from 'react'
 import styles from './index.module.scss'
 import namedPng from '@/styles/image/user_header.png'
+import price_bg from '@/styles/image/price_bg.png'
 import LabAndImg from '@/components/LabAndImg'
+import { useSelector } from '@/reducers/hooks'
+import { alert, goLink } from '@/common/common'
+import { formatImgUrl, formatPriceDiv } from '@/common/fotmat'
+import { userassets, userorderStatistics } from '@/api/mine'
+import useLogin from '@/use/useLogin'
+import IconFont from '@/components/iconfont/iconfont'
 
 export default () => {
+  const userInfo = useSelector(state => state.userInfo)
+
+  const { fetchData: Apiassets, state: priceState } = userassets()
+  const { fetchData: ApigetTotal, state: orderState } = userorderStatistics()
+  const { getAdminUserInfo, getPhoneNumber } = useLogin()
+
+  useDidShow(() => {
+    ApigetTotal()
+    getAdminUserInfo()
+    Apiassets()
+  })
+
+  const priceList = useMemo(() => {
+    console.log('priceState::', priceState.data)
+    return [
+      {
+        label: '预存货款(元)',
+        value: formatPriceDiv(priceState?.data?.wallet_money || 0, 100, true),
+      },
+      {
+        label: '账期货款(元)',
+        value: formatPriceDiv(priceState?.data.credit_line || 0, 100, true),
+      },
+    ]
+  }, [priceState])
+
+  const orderList = useMemo(() => {
+    return [
+      { label: '待配布', icon: 'icon-daipeibu2', url: '/pages/order/orderList/index?status=0', number: orderState?.data?.wait_match > 99 ? '99+' : orderState?.data?.wait_match },
+      { label: '待付款', icon: 'icon-daifukuan2', url: '/pages/order/orderList/index?status=1', number: orderState?.data?.wait_pay > 99 ? '99+' : orderState?.data?.wait_pay },
+      { label: '待发货', icon: 'icon-daifahuo2', url: '/pages/order/orderList/index?status=2', number: orderState?.data?.wait_shipped > 99 ? '99+' : orderState?.data?.wait_shipped },
+      { label: '待收货', icon: 'icon-daishouhuo2', url: '/pages/order/orderList/index?status=3', number: orderState?.data?.already_shipped > 99 ? '99+' : orderState?.data?.already_shipped },
+      { label: '退款/售后', icon: 'icon-tuikuan-shouhou', url: '/pages/salesAfter/salesAfterList/index', number: orderState?.data?.after_return > 99 ? '99+' : orderState?.data?.after_return },
+    ]
+  }, [orderState])
+
+  const menuList = [
+    { label: '地址管理', icon: 'icon-dizhiguanli', callback: () => goLink('/pages/addressManager/index') },
+    { label: '码单管理', icon: 'icon-yanseduibi', callback: () => goLink('/pages/weightList/index') },
+    { label: '颜色对比', icon: 'icon-yanseduibi', callback: () => goLink('/pages/sampleComparison/index') },
+    { label: '我的客服', icon: 'icon-wodekefu', text: '7x24小时服务', type: 'customer' },
+  ]
+
+  const mGetPhoneNumber = (ev) => {
+    if (ev.detail?.code) {
+      getPhoneNumber(ev.detail.code)
+    }
+    else {
+      alert.none('绑定失败!')
+    }
+  }
+
+  const integral = () => {
+    alert.none('【积分】暂未对外开放 敬请期待')
+  }
+
+  usePullDownRefresh(async() => {
+    await ApigetTotal()
+    await getAdminUserInfo()
+    await Apiassets()
+    Taro.stopPullDownRefresh()
+  })
+
   return <View className={styles.user_main}>
     <View className={styles.user_main__header}>
-      <Image src={namedPng} mode="aspectFit"></Image>
       <View className={styles.header_img_name}>
-        <LabAndImg value={{ }} />
+        <View className={styles.header_img}>
+          <Image className={styles.header_img_src} mode="aspectFill" src={`${userInfo?.adminUserInfo?.avatar_url}`} />
+        </View>
+        <View className={styles.header_name}>
+          <Text>{userInfo?.adminUserInfo?.phone ? userInfo?.adminUserInfo?.user_name : '点击登录'}</Text>
+          <View className={styles['arcd-info-left-phone']}>
+            <View className={styles.header_title}> {userInfo?.adminUserInfo?.phone || 'Hi,欢迎来到陆盈商城'}</View>
+          </View>
+          <View className={styles.header_picture} ><IconFont name="icon-a-0tianzhangqi" size={47} /><View className={styles.header_picture_name}>{userInfo?.adminUserInfo?.company_name}</View></View>
+          {!userInfo?.adminUserInfo?.phone && <Button className={styles.getPhoneButton} openType="getPhoneNumber" onGetPhoneNumber={mGetPhoneNumber}></Button>}
+        </View>
+        <View className={styles.header_setting} onClick={() => goLink('/pages/userEdit/index')}>
+          <IconFont name="icon-shezhi" size={50} />
+        </View>
+      </View>
+      <View className={styles.header_count}>
+        <View className={styles.header_count__item} onClick={() => goLink('/pages/collection/index')}>
+          <Text>{userInfo?.adminUserInfo?.collection_quantity || 0}</Text>
+          <Text>商品收藏</Text>
+        </View>
+        <View className={styles.header_count__item} onClick={integral}>
+          <Text>0</Text>
+          <Text>活动积分</Text>
+        </View>
+        <View className={styles.header_count__item}>
+          <IconFont name="icon-erweima" size={50} />
+          <Text>邀请码</Text>
+        </View>
+      </View>
+      {userInfo?.adminUserInfo?.order_access_status == 3 && <View className={styles.price_count}>
+        <View className={styles.price_count_list}>
+          {priceList?.map((item, index) => {
+            return <View key={index} className={styles.list_item} >
+              <Text className={styles.list_item_title}>{item.label}</Text>
+              <View className={styles.list_item_number}><Text>¥</Text> {item.value}</View>
+            </View>
+          })}
+          <Image className={styles.price_bg} src={formatImgUrl('/mall/price_bg.png', '')} mode="aspectFit"></Image>
+        </View>
+      </View>}
+      <Image className={styles.header_bg} src={formatImgUrl('/mall/user_header_bg.png', '')} mode="aspectFit"></Image>
+    </View>
+    <View className={styles.order_count}>
+      <View className={styles.order_count__title}>
+        <Text className={styles.title_text}>我的订单</Text>
+        <View className={styles.title__more} onClick={() => goLink('/pages/order/orderList/index')}>
+          <Text>全部订单</Text>
+          <View className={styles.title_more_icon}><IconFont name="icon-xiala" size={35} /></View>
+        </View>
+      </View>
+      <View className={styles.order_count__list}>
+        {orderList?.map((item, index) => {
+          return <View key={index} className={styles.order_count__item} onClick={() => goLink(item.url)}>
+            <IconFont name={item.icon as any} size={70} />
+            <Text className={styles.item_img}>{item.label}</Text>
+            {!!item.number && <Text className={styles.order_number}>{item.number}</Text>}
+          </View>
+        })}
+
+      </View>
+    </View>
+    <View className={styles.nav_list}>
+      <View className={styles.nav_list__title}>
+        <Text className={styles.title_text}>我的服务</Text>
+      </View>
+      <View className={styles.list_con}>
+        {menuList.map((item, index) => {
+          return <View key={index} className={styles.list_item} onClick={item?.callback}>
+            <IconFont name={item.icon as any} size={70} />
+            <View className={styles.list_item_con}>
+              <Text>{item.label}</Text>
+              <View className={styles.title_more_kf}>
+                <Text>{item.text}</Text>
+                <View className={styles.title_more_icon}><IconFont name="icon-xiala" size={40} /></View>
+              </View>
+            </View>
+            {item.type == 'customer' && <Button openType="contact" className={styles.customer} />}
+          </View>
+        })}
       </View>
     </View>
   </View>

src/pages/userEdit copy/components/ModifyModal.scss

@@ -0,0 +1,76 @@
+  .modify-ickname-content {
+    margin: 0 auto;
+    width: 658px;
+    padding-bottom: 50px;
+
+    .modify-ickname-input {
+      width: 658px;
+      height: 182px;
+      background: #f3f3f3;
+      border: 2px solid #e6e6e6;
+      border-radius: 10px;
+      padding: 15px;
+      box-sizing: border-box;
+      font-size: 22px;
+      font-weight: 400;
+      color: #ababab;
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+    }
+
+    .modify-ickname-input textarea {
+      width: 100%;
+      height: 80%;
+      font-size: 26px;
+      font-weight: 400;
+      color: #3c3c3c;
+    }
+
+    .modify-ickname-tips {
+      font-size: 22px;
+      font-weight: 400;
+      color: #ababab;
+      margin-top: 30px;
+    }
+
+    .modify-ickname-operation {
+      width: 658px;
+      height: 82px;
+      background: #ffffff;
+      border: 2px solid #cde5ff;
+      border-radius: 40px;
+      display: flex;
+      overflow: hidden;
+      margin-top: 105px;
+      display: flex;
+    }
+
+    .modify-ickname-operation button {
+      height: 100%;
+      width: 50%;
+      font-size: 32px;
+      font-weight: 400;
+      color: #007aff;
+      background-color: white;
+      border: none;
+      outline: none;
+      padding: 0;
+      border-radius: 0;
+    }
+
+    .modify-ickname-operation button::after,
+    .user-edit-logout::after {
+      border-radius: 0;
+      border: none;
+    }
+
+    .modify-ickname-operation .modify-ickname-operation-save {
+      background: #007aff;
+      color: #ffffff;
+    }
+
+    .modify-ickname-operation button::after {
+      border-radius: 0;
+    }
+  }

src/pages/userEdit copy/components/ModifyModal.tsx

@@ -0,0 +1,49 @@
+
+import { Button, Image, Text, Textarea, View } from '@tarojs/components'
+import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useState } from 'react'
+import Popup from '@/components/popup'
+import './ModifyModal.scss'
+
+interface Params{
+  title?: string
+  save: (value: any) => void // 确定保存
+}
+export default memo(forwardRef((props: any, ref) => {
+  const { title = '修改昵称' } = props
+  const [value, setValue] = useState('')
+  useEffect(() => {
+    setValue(props.value)
+  }, [props.value])
+  // popup输入长度
+  const handleTextareaInput = (ev: any) => {
+    setValue(ev.detail.value.slice(0, 20))
+  }
+  // 重置
+  const handleTextareaReset = () => {
+    setValue('')
+  }
+  const [textareaBottom, setTextareaBottom] = useState(0)
+  const handleBlur = () => {
+    setTextareaBottom(0)
+  }
+  const handleFocus = (ev) => {
+    setTextareaBottom(ev.detail.height)
+  }
+  const [modalShow, setModalShow] = useState(false)
+  useImperativeHandle(ref, () => ({ setModalShow }))
+  return (
+    <Popup onClose={() => setModalShow(false)} title={title} show={modalShow}>
+      <View style={{ marginBottom: `${textareaBottom}px` }} className="modify-ickname-content">
+        <View className="modify-ickname-input">
+          <Textarea showConfirmBar={false} auto-focus adjustPosition={false} value={value} onBlur={handleBlur} onFocus={handleFocus} onInput={handleTextareaInput} maxlength={20} />
+          <Text>{value?.length}/20</Text>
+        </View>
+        <Text className="modify-ickname-tips">请设置2-20个字符，可由中文、英文、数字组成</Text>
+        <View className="modify-ickname-operation">
+          <Button onClick={handleTextareaReset} hoverClass="none" className="modify-ickname-operation-reset">重置</Button>
+          <Button onClick={() => props.save(value)} hoverClass="none" className="modify-ickname-operation-save">保存</Button>
+        </View>
+      </View>
+    </Popup>
+  )
+}))

src/pages/userEdit copy/index.config.ts

@@ -0,0 +1,4 @@
+export default {
+  navigationBarTitleText: '编辑个人资料',
+  enableShareAppMessage: true,
+}

src/pages/userEdit copy/index.scss

@@ -0,0 +1,126 @@
+.user-edit{
+  height: 100vh;
+  background: #f3f3f3;
+  .user-edit-portrait{
+    font-size: 22px;
+    font-weight: 400;
+    color: #ababab;
+    display: flex;flex-direction: column;
+    align-items: center;justify-content: center;
+    background-color: white;
+    height: 300px;
+  }
+  .user-edit-portrait image{
+    width: 170px;
+    height: 170px;
+    border-radius: 50%;
+    overflow: hidden;
+    object-fit: cover;
+    margin-bottom: 15px;
+  }
+
+  .user-edit-content{
+    background-color: white;
+    margin-top: 24px;
+    padding: 0 30px;
+  }
+  .user-edit-content-title{
+    font-size: 26px;
+    font-weight: 700;
+    color: #000000;
+    padding: 40px;
+  }
+  .user-edit-content-title text{
+    margin-right: 10px;
+  }
+  .user-edit-content-phone{
+    font-size: 26px;
+    font-weight: 400;
+    color: #000000;
+    display: flex;justify-content: space-between;
+  }
+  .user-edit-content-phone text{
+    font-size: 24px;
+    font-weight: 400;
+    color: #ababab;
+  }
+  .user-edit-content-bindphone{
+    padding: 0;width: auto;height: auto;
+    margin: 0;background: none;border: 0;
+    text-align: left;
+    font-size: 26px;
+    font-weight: 400;
+    color: #ababab;
+  }
+  .user-edit-content-bindphone::after{
+    border: 0;
+  }
+  .user-edit-content-company{
+    width: 118px;
+    height: 40px;
+    background: #dddddd;
+    border-radius: 6px;
+    display: flex;align-items: center;justify-content: center;
+    font-size: 24px;
+    font-weight: 400;
+    color: #707070;
+  }
+  .user-edit-content-company,.user-edit-content-company-adopt{
+    background: #CDF3DF;
+    color: #07C160;
+  }
+  .user-edit-content-company text{
+    margin-left: 5px;
+  }
+  .user-edit-content-company.user-edit-content-company-auth{
+    background-color: #CDF3DF;
+    color: #07C160;
+  }
+  .user-edit-list{
+    height: 90px;
+    display: flex;align-items: center;
+    border-bottom: 2px solid #f0f0f0;
+  }
+  .user-edit-list:last-of-type{
+    border: none;
+  }
+  .user-edit-list-left{
+    width: 120px;
+    border-right: 2px solid #f3f3f3;
+    margin-right: 30px;
+    font-size: 26px;
+    font-weight: 400;
+    color: #000000;
+  }
+  .user-edit-list-right{
+    display: flex;justify-content: space-between;align-items: center;
+    flex: auto;
+    font-size: 26px;
+    font-weight: 400;
+    color: #000000;
+  }
+  .user-edit-list-right>view{
+    flex: 1;
+  }
+  .user-edit-list-right-placeholder{
+    color: #cccccc;
+  }
+  .user-edit-list-right .icon-a-moreback{
+    font-size: 30px;
+  }
+
+  .user-edit-logout{
+    width: 668px;
+    height: 82px;
+    background: #ffffff;
+    border: 2px solid #cde5ff;
+    border-radius: 40px;
+    // margin: 359px auto 0;
+    position: fixed;left: 50%;bottom: 50px;
+    transform: translateX(-50%);
+    font-size: 32px;
+    font-weight: 400;
+    text-align: center;
+    color: #007aff;
+  }
+}

src/pages/userEdit copy/index.tsx

@@ -0,0 +1,246 @@
+import { Button, Image, Picker, Text, Textarea, View } from '@tarojs/components'
+import Taro, { chooseMedia } from '@tarojs/taro'
+import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { alert, goLink, isEmptyObject, retrieval } from '@/common/common'
+import Popup from '@/components/popup'
+import { companyTypeApi, portraitUpdateApi, realNameUpdateApi } from '@/api/user'
+import { companyDetailApi, companyUpdateApi } from '@/api/company'
+import './index.scss'
+import ModifyModal from './components/ModifyModal'
+import useLogin from '@/use/useLogin'
+import { useSelector } from '@/reducers/hooks'
+import useUploadCDNImg from '@/use/useUploadImage'
+import { IMG_CND_Prefix } from '@/common/constant'
+import useUserInfo from '@/use/useUserInfo'
+
+export default () => {
+  const { getPhoneNumber, getAdminUserInfo } = useLogin()
+  const { adminUserInfo } = useSelector(state => state.userInfo)
+  // 用户信息
+  useEffect(() => {
+    setFormData({
+      ...formData,
+      ...(adminUserInfo as any),
+    })
+  }, [adminUserInfo])
+  useEffect(() => {
+    setFormData({
+      ...(adminUserInfo as any),
+      company_type_index: 0,
+    })
+    getCompanyTypeData()
+  }, [])
+  // 表单数据
+  const [formData, setFormData] = useState<typeof adminUserInfo>(adminUserInfo)
+  // 昵称修改保存
+  const { fetchData: realNameUpdateFetch } = realNameUpdateApi()
+  const rules = {
+    text: [
+      {
+        message: '请输入',
+      },
+    ],
+  }
+  const { fetchData: saveFetch } = companyUpdateApi()
+  const { fetchData: getCompanyFetch } = companyDetailApi()
+  const handleTextareaSave = async(text, type) => {
+    retrieval({ text }, rules)
+      .then(async() => {
+        let result
+        if (type == 'Ickname') {
+          result = await realNameUpdateFetch({ real_name: text })
+        }
+        else {
+          const params = await getCompanyFetch()
+          result = await saveFetch({
+            ...params.data,
+            company_name: text,
+          })
+        }
+        if (result.success) {
+          getAdminUserInfo()
+          ;(ModifyIcknameEl.current as any).setModalShow(false)
+          ;(ModifyCompanyNameEl.current as any).setModalShow(false)
+          alert.success('保存成功')
+        }
+        else {
+          alert.none(result.msg)
+        }
+      })
+      .catch((message) => {
+        alert.none(message)
+      })
+  }
+  // Taro.eventCenter.on('message:detail', (message) => console.log(message))
+  // 面面跳转
+  const onNavigate = (url: string) => {
+    goLink(url)
+  }
+  // 肖像编辑
+  const { fetchData: portraitUpdateFetch } = portraitUpdateApi()
+  const { getWxPhoto } = useUploadCDNImg()
+  const handleSelectRortrait = () => {
+    Taro.showModal({
+      title: '提示',
+      content: '是否确定更改头像？',
+      showCancel: true,
+      async success(ev) {
+        if (ev.confirm) {
+          const result = await getWxPhoto('mall')
+          const portraitUpdateResult = await portraitUpdateFetch({
+            avatar_url: IMG_CND_Prefix + (result as any).url,
+          })
+          if (portraitUpdateResult.success) {
+            getAdminUserInfo()
+            alert.success('保存成功')
+          }
+          else {
+            alert.none(portraitUpdateResult.msg)
+          }
+        }
+      },
+    })
+  }
+  const mGetPhoneNumber = (ev) => {
+    if (ev.detail?.code) {
+      getPhoneNumber(ev.detail.code)
+    }
+    else {
+      alert.none('绑定失败!')
+    }
+  }
+  const ModifyIcknameEl = useRef(null)
+  const ModifyCompanyNameEl = useRef(null)
+  // 获取企业类型
+  const { fetchData: companyTypeFetch, state: companyTypeData } = companyTypeApi()
+  const getCompanyTypeData = async() => {
+    const reuslt = await companyTypeFetch()
+    if (reuslt.success) {
+      reuslt.data?.list?.every((item, index) => {
+        if (item.id == (adminUserInfo as any).purchaser_type) {
+          setFormData({
+            ...(adminUserInfo as any),
+            company_type_index: index,
+          })
+          return false
+        }
+        return true
+      })
+    }
+  }
+  // 修改企业类型
+  const handleCompanyType = async(ev) => {
+    const { value } = ev.detail
+    const item = companyTypeData.data.list && companyTypeData.data.list[value]
+    if (item) {
+      if (item.id == 0) { return alert.error('请选择类型') }
+      const params = await getCompanyFetch()
+      const result = await saveFetch({
+        ...params.data,
+        purchaser_type: item.id,
+      })
+      if (result.success) {
+        getAdminUserInfo()
+        alert.success('保存成功')
+      }
+      else {
+        alert.none(result.msg)
+      }
+    }
+  }
+
+  const { removeToken, removeSessionKey, removeUserInfo } = useUserInfo()
+  const outLogin = () => {
+    removeToken()
+    removeSessionKey()
+    removeUserInfo()
+    goLink('/pages/index/index', {}, 'switchTab')
+  }
+
+  const comanyTypeDataFormat = useMemo(() => {
+    if (companyTypeData.data.list) {
+      return companyTypeData.data.list?.map((item) => {
+        if (item.id == 0) { item.name = '--请选择类型--' }
+        return item
+      })
+    }
+    else {
+      return []
+    }
+  }, [companyTypeData])
+
+  return (
+    <View className="user-edit">
+      <View onClick={handleSelectRortrait} className="user-edit-portrait">
+        <Image src={(formData as any)?.avatar_url} />
+        <View>点击编辑头像</View>
+      </View>
+      <View className="user-edit-content">
+        <UserEditList
+          onClick={() => (ModifyIcknameEl.current as any).setModalShow(true)}
+          data={(formData as any)?.user_name}
+          label="昵称"
+          placeholder="请输入"
+          icon=""
+        />
+        <UserEditList label="手机号" placeholder="去绑定" icon="">
+          {(formData as any)?.phone
+            ? (
+              <View className="user-edit-content-phone">
+                <View>{(formData as any)?.phone}</View>
+              </View>
+            )
+            : (
+              <Button className="user-edit-content-bindphone" openType="getPhoneNumber" onGetPhoneNumber={mGetPhoneNumber}>
+              去绑定
+              </Button>
+            )}
+        </UserEditList>
+      </View>
+      <View className="user-edit-content">
+        <UserEditList
+          onClick={() => (ModifyCompanyNameEl.current as any).setModalShow(true)}
+          data={(formData as any)?.company_name}
+          label="组织名称"
+          placeholder="待绑定"
+          icon=""
+        />
+        {/* <UserEditList label="组织类型" placeholder="完善公司/组织信息" icon="">
+          <Picker mode="selector" range={comanyTypeDataFormat as any} rangeKey="name" value={(formData as any)?.purchaser_type} onChange={handleCompanyType}>
+            {formData?.purchaser_type_name}
+          </Picker>
+        </UserEditList> */}
+        <UserEditList label="我的认证" placeholder="待绑定" icon="" useIcon="true">
+          <View className={`user-edit-content-company ${(formData as any)?.authentication_status == 4 && 'user-edit-content-company-adopt'}`}>
+            <Text className="iconfont " /> {(formData as any)?.authentication_status == 4 ? '已认证' : '未认证'}
+          </View>
+        </UserEditList>
+        <UserEditList label="创建人" data={(formData as any)?.founder_user_name} placeholder="完善公司/组织信息" icon="" useIcon="true" />
+      </View>
+      <Button hoverClass="none" className="user-edit-logout" onClick={outLogin}>
+        退出当前账号
+      </Button>
+
+      <ModifyModal title="修改昵称" ref={ModifyIcknameEl} value={(formData as any)?.user_name} save={value => handleTextareaSave(value, 'Ickname')} />
+      <ModifyModal
+        title="修改名称"
+        ref={ModifyCompanyNameEl}
+        value={(formData as any)?.company_name}
+        save={value => handleTextareaSave(value, 'companyName')}
+      />
+    </View>
+  )
+}
+
+// 列表
+const UserEditList = memo((props: any) => {
+  return (
+    <View onClick={props.onClick} className="user-edit-list">
+      <View className="user-edit-list-left">{props.label}</View>
+      <View className="user-edit-list-right">
+        <View>{props.children ? props.children : props.data ? props.data : <View className="user-edit-list-right-placeholder">{props.placeholder}</View>}</View>
+        {!props.useIcon && <Text className="iconfont icon-a-moreback"></Text>}
+      </View>
+    </View>
+  )
+})

src/pages/userEdit/index.scss

@@ -1,16 +1,18 @@
-.user-edit{
+.user-edit {
   height: 100vh;
   background: #f3f3f3;
-  .user-edit-portrait{
+  .user-edit-portrait {
     font-size: 22px;
     font-weight: 400;
     color: #ababab;
-    display: flex;flex-direction: column;
+    display: flex;
-    align-items: center;justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
     background-color: white;
     height: 300px;
   }
-  .user-edit-portrait image{
+  .user-edit-portrait image {
     width: 170px;
     height: 170px;
     border-radius: 50%;
@@ -19,108 +21,187 @@
     margin-bottom: 15px;
   }
 
-  .user-edit-content{
+  .user-edit-content {
     background-color: white;
     margin-top: 24px;
     padding: 0 30px;
   }
-  .user-edit-content-title{
+  .customer_service {
+    width: 750px;
+    height: 160px;
+    background: #ffffff;
+    margin-top: 24px;
+    display: flex;
+    align-items: center;
+    padding: 0 43px;
+    box-sizing: border-box;
+    .customer_service_image {
+      height: 90px;
+      width: 90px;
+      border-radius: 50%;
+      margin-right: 32px;
+      border: 4px solid #dfdfdf;
+    }
+    .customer_service_name_and_phone {
+      flex: 1;
+      .customer_service_name {
+        display: flex;
+        align-items: center;
+
+        text {
+          &:nth-child(1) {
+            font-size: 32px;
+            font-weight: 500;
+            color: #000000;
+          }
+          &:nth-child(2) {
+            width: 148px;
+            height: 30px;
+            line-height: 30px;
+            background: linear-gradient(125deg, #323534 0%, #0b0d0c 100%);
+            border-radius: 4px;
+            font-size: 22px;
+            color: #fdddb3ff;
+            padding: 5px 10px;
+            border-radius: 4px;
+            text-align: center;
+            margin-left: 16px;
+          }
+        }
+      }
+      .customer_service_phone {
+        font-size: 28px;
+        color: rgba(0, 0, 0, 0.4);
+        margin-top: 8px;
+      }
+    }
+    .customer_service_button {
+      width: 140px;
+      height: 56px;
+      border-radius: 30px;
+      border: 1px solid #337fff;
+      color: #337fff;
+      display: flex;
+      font-size: 28px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text {
+        margin-left: 10px;
+      }
+    }
+  }
+  .user-edit-content-title {
     font-size: 26px;
     font-weight: 700;
     color: #000000;
     padding: 40px;
   }
-  .user-edit-content-title text{
+  .user-edit-content-title text {
     margin-right: 10px;
   }
-  .user-edit-content-phone{
+  .user-edit-content-phone {
     font-size: 26px;
     font-weight: 400;
     color: #000000;
-    display: flex;justify-content: space-between;
+    display: flex;
+    justify-content: space-between;
   }
-  .user-edit-content-phone text{
+  .user-edit-content-phone text {
     font-size: 24px;
     font-weight: 400;
     color: #ababab;
   }
-  .user-edit-content-bindphone{
+  .user-edit-content-bindphone {
-    padding: 0;width: auto;height: auto;
+    padding: 0;
-    margin: 0;background: none;border: 0;
+    width: auto;
+    height: auto;
+    margin: 0;
+    background: none;
+    border: 0;
     text-align: left;
     font-size: 26px;
     font-weight: 400;
     color: #ababab;
   }
-  .user-edit-content-bindphone::after{
+  .user-edit-content-bindphone::after {
     border: 0;
   }
-  .user-edit-content-company{
+  .user-edit-content-company {
     width: 118px;
     height: 40px;
     background: #dddddd;
     border-radius: 6px;
-    display: flex;align-items: center;justify-content: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     font-size: 24px;
     font-weight: 400;
     color: #707070;
   }
-  .user-edit-content-company,.user-edit-content-company-adopt{
+  .user-edit-content-company,
-    background: #CDF3DF;
+  .user-edit-content-company-adopt {
-    color: #07C160;
+    background: #cdf3df;
+    color: #07c160;
   }
-  .user-edit-content-company text{
+  .user-edit-content-company text {
     margin-left: 5px;
   }
-  .user-edit-content-company.user-edit-content-company-auth{
+  .user-edit-content-company.user-edit-content-company-auth {
-    background-color: #CDF3DF;
+    background-color: #cdf3df;
-    color: #07C160;
+    color: #07c160;
   }
-  .user-edit-list{
+  .user-edit-list {
     height: 90px;
-    display: flex;align-items: center;
+    display: flex;
+    align-items: center;
     border-bottom: 2px solid #f0f0f0;
   }
-  .user-edit-list:last-of-type{
+  .user-edit-list:last-of-type {
     border: none;
   }
-  .user-edit-list-left{
+  .user-edit-list-left {
     width: 120px;
     border-right: 2px solid #f3f3f3;
     margin-right: 30px;
-    font-size: 26px;
+    padding-right: 10px;
+    font-size: 28px;
     font-weight: 400;
     color: #000000;
   }
-  .user-edit-list-right{
+  .user-edit-list-right {
-    display: flex;justify-content: space-between;align-items: center;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     flex: auto;
     font-size: 26px;
     font-weight: 400;
     color: #000000;
   }
-  .user-edit-list-right>view{
+  .user-edit-list-right > view {
     flex: 1;
   }
-  .user-edit-list-right-placeholder{
+  .user-edit-list-right-placeholder {
     color: #cccccc;
   }
-  .user-edit-list-right .icon-a-moreback{
+  .user-edit-list-right .icon-a-moreback {
     font-size: 30px;
   }
 
-  .user-edit-logout{
+  .user-edit-logout {
     width: 668px;
     height: 82px;
     background: #ffffff;
     border: 2px solid #cde5ff;
     border-radius: 40px;
     // margin: 359px auto 0;
-    position: fixed;left: 50%;bottom: 50px;
+    position: fixed;
+    left: 50%;
+    bottom: 50px;
     transform: translateX(-50%);
     font-size: 32px;
     font-weight: 400;
     text-align: center;
     color: #007aff;
   }
-}
+}

src/pages/userEdit/index.tsx

@@ -1,17 +1,19 @@
 import { Button, Image, Picker, Text, Textarea, View } from '@tarojs/components'
 import Taro, { chooseMedia } from '@tarojs/taro'
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import ModifyModal from './components/ModifyModal'
 import { alert, goLink, isEmptyObject, retrieval } from '@/common/common'
 import Popup from '@/components/popup'
 import { companyTypeApi, portraitUpdateApi, realNameUpdateApi } from '@/api/user'
 import { companyDetailApi, companyUpdateApi } from '@/api/company'
 import './index.scss'
-import ModifyModal from './components/ModifyModal'
 import useLogin from '@/use/useLogin'
 import { useSelector } from '@/reducers/hooks'
 import useUploadCDNImg from '@/use/useUploadImage'
 import { IMG_CND_Prefix } from '@/common/constant'
 import useUserInfo from '@/use/useUserInfo'
+import IconFont from '@/components/iconfont/iconfont'
+import { formatImgUrl } from '@/common/fotmat'
 
 export default () => {
   const { getPhoneNumber, getAdminUserInfo } = useLogin()
@@ -169,6 +171,15 @@ export default () => {
     }
   }, [companyTypeData])
 
+  const userInfo = useSelector(state => state.userInfo)
+
+  const onPhone = () => {
+    if (!userInfo?.adminUserInfo?.sale_user_phone) { return alert.error('手机号不能为空') }
+    Taro.makePhoneCall({
+      phoneNumber: userInfo?.adminUserInfo?.sale_user_phone,
+    })
+  }
+
   return (
     <View className="user-edit">
       <View onClick={handleSelectRortrait} className="user-edit-portrait">
@@ -183,7 +194,7 @@ export default () => {
           placeholder="请输入"
           icon=""
         />
-        <UserEditList label="手机号" placeholder="去绑定" icon="">
+        <UserEditList label="手机号" placeholder="去绑定" icon="" useIcon="true">
           {(formData as any)?.phone
             ? (
               <View className="user-edit-content-phone">
@@ -196,30 +207,33 @@ export default () => {
               </Button>
             )}
         </UserEditList>
-      </View>
-      <View className="user-edit-content">
         <UserEditList
           onClick={() => (ModifyCompanyNameEl.current as any).setModalShow(true)}
           data={(formData as any)?.company_name}
-          label="组织名称"
+          label="公司名称"
           placeholder="待绑定"
           icon=""
         />
-        {/* <UserEditList label="组织类型" placeholder="完善公司/组织信息" icon="">
-          <Picker mode="selector" range={comanyTypeDataFormat as any} rangeKey="name" value={(formData as any)?.purchaser_type} onChange={handleCompanyType}>
-            {formData?.purchaser_type_name}
-          </Picker>
-        </UserEditList> */}
-        <UserEditList label="我的认证" placeholder="待绑定" icon="" useIcon="true">
-          <View className={`user-edit-content-company ${(formData as any)?.authentication_status == 4 && 'user-edit-content-company-adopt'}`}>
-            <Text className="iconfont " /> {(formData as any)?.authentication_status == 4 ? '已认证' : '未认证'}
-          </View>
-        </UserEditList>
-        <UserEditList label="创建人" data={(formData as any)?.founder_user_name} placeholder="完善公司/组织信息" icon="" useIcon="true" />
       </View>
-      <Button hoverClass="none" className="user-edit-logout" onClick={outLogin}>
+
+      <View className="customer_service">
+        <Image className="customer_service_image" src={formatImgUrl('/mall/avatar2.png', '')}></Image>
+        <View className="customer_service_name_and_phone">
+          <View className="customer_service_name">
+            <Text>{userInfo?.adminUserInfo?.sale_user_name}</Text>
+            <Text>专属客服经理</Text>
+          </View>
+          <View className="customer_service_phone">客服热线 {userInfo?.adminUserInfo?.sale_user_phone}</View>
+        </View>
+        <View className="customer_service_button" onClick={() => onPhone()}>
+          <IconFont name="icon-a-0tianzhangqi" />
+          <Text>拨打</Text>
+        </View>
+      </View>
+
+      {/* <Button hoverClass="none" className="user-edit-logout" onClick={outLogin}>
         退出当前账号
-      </Button>
+      </Button> */}
 
       <ModifyModal title="修改昵称" ref={ModifyIcknameEl} value={(formData as any)?.user_name} save={value => handleTextareaSave(value, 'Ickname')} />
       <ModifyModal

src/reducers/userInfo.ts

@@ -51,6 +51,9 @@ export interface UserAdminParam {
   order_access_status_name?: string
   purchaser_type?: number
   purchaser_type_name?: string
+  collection_quantity?: number
+  sale_user_phone?: string
+  sale_user_name?: string
 }
 
 export interface SortCodeParam {
@@ -119,4 +122,4 @@ export default function counter(state = INIT_USER, action: Action) {
     default:
       return state
   }
-}
+}