diff --git a/src/pages/details/components/feature/index.module.scss b/src/pages/details/components/feature/index.module.scss index 02ec54e..5f5509a 100644 --- a/src/pages/details/components/feature/index.module.scss +++ b/src/pages/details/components/feature/index.module.scss @@ -1,22 +1,25 @@ -.main { - padding: 32px; - width: 686px; - .title { - font-size: 34px; - font-weight: 600; - color: #333333; - } - .line { - margin-top: 24px; - margin-bottom: 32px; - background-color: #f2f2f2; - height: 1px; - } - .topFont { - margin-top: 20px; - margin-bottom: 24px; - font-size: 28px; - font-weight: 700; - color: rgba(0, 0, 0, 0.8); +.sollBox { + height: calc(100vh - 200px); + .main { + padding: 32px; + width: 686px; + .title { + font-size: 34px; + font-weight: 600; + color: #333333; + } + .line { + margin-top: 24px; + margin-bottom: 32px; + background-color: #f2f2f2; + height: 1px; + } + .topFont { + margin-top: 20px; + margin-bottom: 24px; + font-size: 28px; + font-weight: 700; + color: rgba(0, 0, 0, 0.8); + } } } diff --git a/src/pages/details/components/feature/index.tsx b/src/pages/details/components/feature/index.tsx index 39ac702..fcb0335 100644 --- a/src/pages/details/components/feature/index.tsx +++ b/src/pages/details/components/feature/index.tsx @@ -48,7 +48,7 @@ const FeaturePopup = (param: Props) => { return ( param.closePopup?.()}> - + {param.productName} diff --git a/src/pages/details/components/guidePopup/index.module.scss b/src/pages/details/components/guidePopup/index.module.scss new file mode 100644 index 0000000..5874fbb --- /dev/null +++ b/src/pages/details/components/guidePopup/index.module.scss @@ -0,0 +1,107 @@ +.main { + width: 100vw; + height: 100%; + position: fixed; + top: 0; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 1998; + overflow: hidden; + .mask { + border-radius: 20px 20px 0px 0px; + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + z-index: 10000; + background: rgba(0, 0, 0, 0.6); + transition: all 0.3s; + // opacity: 0; + .bigBox { + position: absolute; + padding: 32px; + border-radius: 16px; + background-color: #fff; + left: 10px; + top: 320px; + .topTitleBox { + display: flex; + align-items: center; + .topTitle { + color: #353535; + font-size: 28px; + margin-right: 10px; + font-weight: 500; + } + } + .modeBox { + margin-top: 20px; + display: flex; + .modeKindOne { + width: 160px; + height: 68px; + background: rgba(51, 127, 255, 0.1); + border-radius: 8px; + border: 1px solid #337fff; + font-size: 28px; + font-weight: 400; + color: #337fff; + text-align: center; + line-height: 68px; + margin-right: 18px; + } + .modeKindTwo { + margin-right: 18px; + background-color: #f6f6f6; + width: 160px; + height: 68px; + border-radius: 8px; + color: #626262; + font-size: 28px; + font-weight: 400; + color: #000000; + text-align: center; + line-height: 68px; + } + } + .line { + margin-top: 15px; + margin-bottom: 15px; + // width: 512px; + height: 1px; + background: #050000; + opacity: 0.1; + } + .pleaseFont { + font-size: 26px; + font-weight: 500; + color: #000000; + margin-bottom: 16px; + } + .saleFont { + font-size: 24px; + font-weight: 400; + color: #333333; + margin-bottom: 16px; + } + .flexBox { + display: flex; + justify-content: space-between; + align-items: center; + .flexLeft { + font-size: 24px; + font-weight: 400; + color: #333333; + } + .flexRight { + font-size: 26px; + font-weight: 500; + color: #337fff; + } + } + } + } +} diff --git a/src/pages/details/components/guidePopup/index.tsx b/src/pages/details/components/guidePopup/index.tsx new file mode 100644 index 0000000..de8773b --- /dev/null +++ b/src/pages/details/components/guidePopup/index.tsx @@ -0,0 +1,43 @@ +import { Button, Image, Input, RichText, ScrollView, Text, View } from '@tarojs/components' +import Taro, { useDidShow, usePullDownRefresh, useReady } from '@tarojs/taro' +import classnames from 'classnames' +import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react' +import styles from './index.module.scss' +import { GetProductKindListApi } from '@/api/material' +import { getFilterData } from '@/common/util' +import { alert, goLink } from '@/common/common' +import { Mallproductinstruct } from '@/api/favorite' +import IconFont from '@/components/iconfont/iconfont' + +interface Props { + closePopup: () => void +} + +const guidePopup = (props: Props) => { + return ( + + + + + 布料类型 + + + + 大货 + 剪版 + 散剪 + + + 请选择你需要的商品类型✨ + 大货:按【条数】销售; + 散剪:按【米】销售; + + 剪版:按【公斤】销售; + props.closePopup?.()}>我知道了 + + + + + ) +} +export default memo(guidePopup) diff --git a/src/pages/details/components/orderCount/index.module.scss b/src/pages/details/components/orderCount/index.module.scss index f003bf6..a16693e 100644 --- a/src/pages/details/components/orderCount/index.module.scss +++ b/src/pages/details/components/orderCount/index.module.scss @@ -27,9 +27,11 @@ align-items: center; padding: 20px; .search_title { + display: flex; font-size: $font_size; color: #000; - width: 160px; + width: 200px; + align-items: center; } .search_list { display: flex; diff --git a/src/pages/details/components/orderCount/index.tsx b/src/pages/details/components/orderCount/index.tsx index f05f225..84a1b36 100644 --- a/src/pages/details/components/orderCount/index.tsx +++ b/src/pages/details/components/orderCount/index.tsx @@ -4,6 +4,7 @@ import Big from 'big.js' import classnames from 'classnames' import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react' import VirtualList from '@tarojs/components/virtual-list' +import GuidePopup from '../guidePopup/index' import styles from './index.module.scss' import Popup from '@/components/popup' import LoadingCard from '@/components/loadingCard' @@ -18,14 +19,16 @@ import { getFilterData } from '@/common/util' import LabAndImg from '@/components/LabAndImg' import useCommonData from '@/use/useCommonData' import LabAndImgShow from '@/components/LabAndImgShow' +import IconFont from '@/components/iconfont/iconfont' interface param { show?: true | false onClose?: () => void title?: string productId?: number + is_first_login?: boolean // 是否首次进来需要展示引导 } -const OrderCount = ({ show = false, onClose, title = '', productId = 0 }: param) => { +const OrderCount = ({ show = false, onClose, title = '', productId = 0, is_first_login = true }: param) => { const { adminUserInfo } = useSelector(state => state.userInfo) const [selectList, _] = useState([ @@ -310,13 +313,26 @@ const OrderCount = ({ show = false, onClose, title = '', productId = 0 }: param) }, 100) }, [show]) + const [showGuidePopup, setshowGuidePopup] = useState(true) + + useEffect(() => { + if (show) { + if (!is_first_login) { + console.log(is_first_login, 'showGuidePopupshowGuidePopup') + console.log(2222) + setshowGuidePopup(false) + } + } + }, [show]) + return ( closePopup()}> {title} - 下单类型: + 下单类型 setshowGuidePopup(true)}>: + {selectList.map((item, index) => { return ( @@ -380,6 +396,9 @@ const OrderCount = ({ show = false, onClose, title = '', productId = 0 }: param) {/* */} + { + showGuidePopup && showPopup && setshowGuidePopup(false)}> + } diff --git a/src/pages/details/index.module.scss b/src/pages/details/index.module.scss index 7f843a8..33602e1 100644 --- a/src/pages/details/index.module.scss +++ b/src/pages/details/index.module.scss @@ -79,7 +79,7 @@ display: grid; grid-template-columns: 50% 50%; grid-template-rows: auto auto auto; - grid-template-areas: 'a b' 'c d' 'e e'; + grid-template-areas: 'a b' 'c d' 'e f'; font-size: $font_size_medium; color: $color_font_three; background-color: rgba(247, 247, 247, 0.6); diff --git a/src/pages/details/index.tsx b/src/pages/details/index.tsx index 3bb3d8f..85e7095 100644 --- a/src/pages/details/index.tsx +++ b/src/pages/details/index.tsx @@ -210,9 +210,9 @@ const Details = (props: Params) => { } - + {/* 编号:{productInfo.code} - + */} 幅宽:{productInfo.width} @@ -297,7 +297,7 @@ const Details = (props: Params) => { )} - setShowOrderCount(false)} title={productName} productId={productInfo.id} /> + setShowOrderCount(false)} title={productName} productId={productInfo.id} /> setShowCart(false)} /> setshowPopup(false)} productName={productName} productIds={Number(params?.id)}> diff --git a/src/pages/searchList/hightSearchList.tsx b/src/pages/searchList/hightSearchList.tsx index 0ae2c2a..132bc25 100644 --- a/src/pages/searchList/hightSearchList.tsx +++ b/src/pages/searchList/hightSearchList.tsx @@ -252,7 +252,7 @@ export default () => { {materialList.list.map((item) => { return ( - + goLink(`/pages/details/index?id=${item.product_id}`)} key={item} data={item}> // goLinkPage(item)}> // // diff --git a/src/pages/searchList/search.tsx b/src/pages/searchList/search.tsx index c70577c..2456660 100644 --- a/src/pages/searchList/search.tsx +++ b/src/pages/searchList/search.tsx @@ -230,7 +230,7 @@ export default () => { { materialList?.list.map((item) => { return ( - + goLink(`/pages/details/index?id=${item.id}`)} key={item} data={item}> ) }) } diff --git a/src/pages/user copy/index.config.ts b/src/pages/user copy/index.config.ts new file mode 100644 index 0000000..96b0f9a --- /dev/null +++ b/src/pages/user copy/index.config.ts @@ -0,0 +1,5 @@ +export default { + navigationBarTitleText: '我的', + navigationStyle: 'custom', + enableShareAppMessage: true, +} diff --git a/src/pages/user copy/index.module.scss b/src/pages/user copy/index.module.scss new file mode 100644 index 0000000..ffe17de --- /dev/null +++ b/src/pages/user copy/index.module.scss @@ -0,0 +1,565 @@ +.main { + background-color: #f8f8f8; + min-height: 100vh; + display: flex; + flex-direction: column; + position: relative; + + .header { + background: #68b4ff; + background-size: cover; + height: 560px; + position: relative; + + .card-main { + margin-top: 10px; + } + } + + .auth-suspension { + position: fixed; + left: 0; + top: 0; + z-index: 1; + width: 100vw; + height: 100vh; + inset: 0; + } + + .header-card { + position: absolute; + left: 50%; + bottom: -18%; + transform: translateX(-50%); + } + + .crad { + width: 702px; + background: rgba(255, 255, 255, 0.95); + border-radius: 20px; + padding: 30px; + box-sizing: border-box; + box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.05); + } + + .card-info { + display: flex; + justify-content: space-between; + position: absolute; + top: -15%; + left: 0; + right: 0; + width: 702px; + padding: 0 30px; + box-sizing: border-box; + } + + .arcd-info-left { + display: flex; + align-items: flex-end; + } + + .arcd-info-left-portrait { + width: 170px; + height: 170px; + background: rgba(0, 0, 0, 0); + border: 4px solid #ffffff; + border-radius: 50%; + overflow: hidden; + } + + .arcd-info-left-portrait image { + width: 100%; + height: 100%; + object-fit: cover; + } + + .arcd-info-left-desc { + margin-left: 24px; + } + + .arcd-info-left-nickname { + font-size: 44px; + font-weight: 700; + color: #000000; + display: flex; + align-items: center; + } + + .arcd-info-left-phone { + font-size: 24px; + font-weight: 400; + color: #707070; + } + + .arcd-info-left-phone button { + padding: 0 10px; + height: 42px; + background: #ffffff; + border: 2px solid #cde5ff; + border-radius: 20px; + font-size: 22px; + font-weight: 400; + color: #007aff; + display: flex; + align-items: center; + justify-content: center; + } + + .card-info-right { + font-size: 26px; + display: flex; + align-items: flex-end; + } + + .setup-icon { + position: relative; + padding-bottom: 10px; + } + + .icon-wrapper { + font-size: 60px; + } + + .icon-point { + width: 8px; + height: 8px; + border-radius: 50%; + background: #ff0000; + position: absolute; + right: 0; + top: 0; + } + + .card-main { + margin: 20px auto 0; + } + + .card-main-title { + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 2px solid #dddddd; + padding: 0 5px 15px; + box-sizing: border-box; + .card_main_title_order { + flex: 1; + font-size: 28px; + font-weight: 700; + } + .order_more { + display: flex; + justify-content: flex-end; + align-items: center; + font-size: 25px; + color: #707070; + text { + width: auto; + } + } + } + + .card-main-title text { + font-size: 22px; + font-weight: 400; + color: #ababab; + display: inline-block; + text-align: right; + width: 150px; + } + + .card-main-title-content { + display: grid; + grid-template-columns: repeat(5, 1fr); + } + + .card-main-title-content-item { + font-size: 24px; + font-weight: 400; + color: #3c3c3c; + text-align: center; + margin-top: 30px; + position: relative; + } + + .card-main-title-content-item Text { + font-size: 56px; + color: #3c3c3c; + } + + .card-main-title-content-item-badge { + padding: 0 10px; + height: 32px; + background: #007aff; + border: 2px solid #ffffff; + border-radius: 32px; + box-sizing: border-box; + overflow: hidden; + font-size: 18px; + font-weight: 700; + color: #ffffff; + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: -10px; + right: 0; + } + + .assets-title { + font-size: 28px; + font-weight: 700; + color: #3c3c3c; + margin-bottom: 20px; + } + + .assets-content { + display: grid; + grid-template-columns: repeat(2, 1fr); + } + + .assets-content > view, + .assets-content > navigator { + text-align: center; + } + + .assets-content-item-top { + color: #007aff; + font-weight: 400; + } + + .assets-content-item-top-before { + font-size: 20px; + } + + .assets-content-item-top-content { + font-size: 36px; + } + + .assets-content-item-top-after { + font-size: 20px; + } + + .assets-content-item-tips { + font-size: 24px; + font-weight: 400; + color: #707070; + } + + .main-card { + margin: 131px auto 0; + } + + .card-feature { + margin-bottom: 50px; + } + + .card-main-list-content-item { + display: flex; + align-items: center; + justify-content: space-between; + height: 90px; + position: relative; + } + + .card-main-list-content-item-left { + font-size: 26px; + font-weight: 400; + text-align: left; + color: #707070; + display: flex; + align-items: center; + min-width: 260px; + } + .card-main-list-content-item .label { + width: 100%; + text-align: right; + padding-right: 10px; + font-size: 26px; + } + .card-main-list-content-item-left text { + margin-right: 35px; + font-size: 56px; + color: #707070; + } + + .card-main-list-content-item-right text { + font-size: 30px; + } + .card-main-list-content-item .customer { + position: absolute; + opacity: 0; + width: 100%; + height: 100%; + } + + .auth { + margin-top: 115px; + } + + .auth-top { + display: flex; + align-items: center; + justify-content: space-between; + } + + .auth-status { + padding: 0 10px; + height: 30px; + background: #dddddd; + border-radius: 10px 4px 0px 0px; + display: flex; + align-items: center; + justify-content: center; + font-size: 18px; + font-weight: 400; + color: #707070; + } + + .auth-status, + .auth-status-ongoing { + color: #ee7500; + background-color: #ffe6ce; + } + + .auth-status, + .auth-status-adopt { + color: #007aff; + background-color: #cde5ff; + } + + .auth-tips { + font-size: 18px; + font-weight: 400; + color: #007aff; + text-align: right; + } + + .auth-tips, + .auth-tips-adopt { + color: #ababab; + } + + .auth-tips text { + font-size: 17px; + } + + .auth-company { + height: 70px; + width: 100%; + background: #f6f6f6; + border: 2px solid #f0f0f0; + border-radius: 0px 10px 10px 10px; + font-size: 26px; + font-weight: 700; + color: #707070; + display: flex; + align-items: center; + justify-content: center; + } + + .auth-company, + .auth-company-adopt { + background: #ecf5ff; + border: 2px solid #cde5ff; + } + + .tips-modal { + background: rgba(0, 0, 0, 0.6); + position: fixed; + inset: 0; + display: flex; + justify-content: center; + align-items: center; + z-index: 2; + } + + .tips-modal-content { + width: 598px; + background: #ffffff; + border-radius: 10px; + animation: enlargeK 0.2s linear; + overflow: hidden; + } + + @keyframes enlargeK { + 0% { + transform: scale(0); + } + + 100% { + transform: scale(1); + } + } + + .tips-modal-title { + font-size: 32px; + font-weight: 700; + text-align: center; + color: #000000; + margin-bottom: 58px; + padding-top: 48px; + } + + .tips-modal-letter { + font-size: 26px; + font-weight: 400; + color: #707070; + padding: 0 30px; + line-height: 50px; + } + + .tips-modal-letter-text { + text-indent: 60px; + } + + .tips-modal-letter-beginn { + font-size: 28px; + font-weight: 400; + color: #000000; + margin-bottom: 25px; + } + + .tips-modal-letter-end { + font-size: 26px; + font-weight: 400; + text-align: right; + margin-top: 61px; + } + + .tips-modal-button { + display: flex; + border-top: 1px solid #dddddd; + margin-top: 45px; + } + + .tips-modal-button button, + .tips-modal-button view { + display: flex; + align-items: center; + justify-content: center; + width: 50%; + height: 90px; + background-color: white; + } + + .tips-modal-button button { + font-size: 26px; + font-weight: 400; + color: #707070; + border-radius: 0; + border-right: 1px solid #dddddd; + } + + .tips-modal-button button::after { + border: 0; + border-radius: 0; + } + + .tips-modal-button view { + font-size: 26px; + font-weight: 400; + color: #007aff; + } + + .auth-box { + width: 614px; + height: 70px; + background: #f6f6f6; + border-radius: 10px; + display: flex; + align-items: center; + justify-content: space-between; + padding-left: 18px; + padding-right: 16px; + + .auth-left-box { + display: flex; + align-items: center; + + .auth-tag { + width: 86px; + height: 34px; + background: #dddddd; + border-radius: 10px; + font-size: 22px; + font-family: Microsoft YaHei, Microsoft YaHei-Regular; + font-weight: 400; + text-align: center; + color: #707070; + text-align: center; + line-height: 34px; + margin-right: 28px; + } + + .auth-tagone { + width: 86px; + height: 34px; + background: #ffe6ce; + border-radius: 10px; + font-size: 22px; + font-family: Microsoft YaHei, Microsoft YaHei-Regular; + font-weight: 400; + text-align: center; + color: #707070; + text-align: center; + line-height: 34px; + margin-right: 28px; + } + + .auth-tagtwo { + display: flex; + align-items: center; + overflow: hidden; + padding-left: 10px; + width: 100px; + height: 32px; + background: #cde5ff; + border-radius: 10px; + + .iconFont-color { + display: flex; + align-items: center; + font-size: 30px; + margin-right: 3px; + color: #007aff; + } + + .auth-font { + font-size: 20px; + font-family: Microsoft YaHei, Microsoft YaHei-Regular; + font-weight: 400; + color: #007aff; + } + } + + .tagthree { + display: flex; + align-items: center; + overflow: hidden; + padding-left: 10px; + width: 100px; + height: 32px; + background: rgba(255, 0, 0, 0.1); + border-radius: 10px; + color: #ff0000; + } + + .auth-cont { + margin-left: 16px; + font-size: 26px; + font-family: Microsoft YaHei, Microsoft YaHei-Bold; + font-weight: 700; + color: #ababab; + } + + .auth-contone { + margin-left: 16px; + font-size: 26px; + font-family: Microsoft YaHei, Microsoft YaHei-Bold; + font-weight: 700; + color: #3c3c3c; + } + } + } +} diff --git a/src/pages/user copy/index.tsx b/src/pages/user copy/index.tsx new file mode 100644 index 0000000..e45bc45 --- /dev/null +++ b/src/pages/user copy/index.tsx @@ -0,0 +1,366 @@ +import { Button, Image, Navigator, Text, View } from '@tarojs/components' +import Taro, { useDidShow, useShareAppMessage } from '@tarojs/taro' +import { memo, useEffect, useMemo, useState } from 'react' +import classnames from 'classnames' +import styles from './index.module.scss' +import { useSelector } from '@/reducers/hooks' +import { alert, goLink } from '@/common/common' +import useLogin from '@/use/useLogin' +import { BASE_URL } from '@/common/constant' +import { userassets, userorderStatistics } from '@/api/mine' +import { formatImgUrl, formatPriceDiv } from '@/common/fotmat' +import { GetAdminUserInfoApi } from '@/api/user' + +// 提示弹窗 +const Modal = (props: any) => { + const { data } = props + const [modalShow, setModalShow] = useState(true) + const handleouter = () => {} + return ( + <> + {modalShow && ( + + e.stopPropagation()}> + 首次登录提醒 + + To: 万丰园纺织科技 + + 尊敬的老朋友,欢迎你使用小程序商城;由于您是我们长期合作的伙伴,你的组织已自动为你生成,关联后可查看历史订单哟。 + + 信息错误请联系客服 + + + + setModalShow(false)}>我知道 + + + + )} + + ) +} +const ModalWithMemo = memo(Modal) + +// 头部 | 订单 +const Header = (props: any) => { + const { data } = props + console.log(props, 'propsprops') + const menu = [ + { text: '待配布', icon: 'icon-daipeibu', url: '/pages/order/orderList/index?status=0' }, + { text: '待付款', icon: 'icon-daifukuan', url: '/pages/order/orderList/index?status=1' }, + { text: '待发货', icon: 'icon-daifahuo', url: '/pages/order/orderList/index?status=2' }, + { text: '待收货', icon: 'icon-yifahuo', url: '/pages/order/orderList/index?status=3' }, + { text: '退款/售后', icon: 'icon-a-tuikuanshouhou', url: '/pages/salesAfter/salesAfterList/index' }, + ] + const { getPhoneNumber } = useLogin() + const mGetPhoneNumber = (ev) => { + if (ev.detail?.code) { + getPhoneNumber(ev.detail.code) + } + else { + alert.none('绑定失败!') + } + } + const navTo = () => { + Taro.navigateTo({ + // url: '/pages/certification/index', + url: '/pages/userEdit/index', + }) + } + + return ( + + + + + + + + + + {/* {state.data.user_name} */} + {data?.user_name} + + + {data?.phone + ? ( + data?.phone?.replace(data?.phone?.substring(3, 7), '****') + ) + : ( + + )} + + + + + + + + + + + + {(data?.authentication_status == 0 || data?.authentication_status == 1) && data?.order_access_status == 3 && ( + navTo()}> + + 未认证 + {data?.company_name || '暂未加入或注册组织'} + + + + )} + {data?.authentication_status == 3 && data?.order_access_status == 3 && ( + navTo()}> + + 认证失败 + {data?.company_name || '暂未加入或注册组织'} + + + + )} + {data?.authentication_status == 2 && data?.order_access_status == 3 && ( + navTo()}> + + 认证中 + {data?.company_name || '暂未加入或注册组织'} + + + + )} + {data?.authentication_status == 4 && data?.order_access_status == 3 && ( + navTo()}> + + + + + + 已认证 + + {data?.company_name} + + + + )} + {/* + + 1 + {data?.authentication_status==1&&"未认证"} + {data?.authentication_status==2&&"认证中"} + {data?.authentication_status==3&&"认证不通过"} + {data?.authentication_status==4&&"已认证"} + + {data?.authentication_status==1&&认证通过后,解锁更多权限 } + {data?.authentication_status==2&&1-3个工作日,审核完成 } + {data?.authentication_status==3&&重新认证 } + {data?.authentication_status==4&&认证通过,可以下单啦 } + */} + {/* + {data?.authentication_status==1&&"暂未加入或注册组织"} + {data?.authentication_status==2&&data?.company_name} + {data?.authentication_status==3&&data?.company_name} + {data?.authentication_status==4&&data?.company_name} + */} + + + + 订单 + goLink('/pages/order/orderList/index')}> + 全部 + + + + {menu.map((item, index) => { + return ( + + + {item.text} + {index == 0 && props.MenuData.data.wait_match !== 0 && ( + + {props.MenuData.data.wait_match > 99 ? '99+' : props.MenuData.data.wait_match} + + )} + {index == 1 && props.MenuData.data.wait_pay !== 0 && ( + + {props.MenuData.data.wait_pay > 99 ? '99+' : props.MenuData.data.wait_pay} + + )} + {index == 2 && props.MenuData.data.wait_shipped !== 0 && ( + + {props.MenuData.data.wait_shipped > 99 ? '99+' : props.MenuData.data.wait_shipped} + + )} + {index == 3 && props.MenuData.data.already_shipped !== 0 && ( + + {props.MenuData.data.already_shipped > 99 ? '99+' : props.MenuData.data.already_shipped} + + )} + {index == 4 && props.MenuData.data.after_return !== 0 && ( + + {props.MenuData.data.after_return > 99 ? '99+' : props.MenuData.data.after_return} + + )} + + ) + })} + + + + + ) +} +const HeaderWithMemo = memo(Header) +// 我的资产 +const Assets = (props: any) => { + return ( + <> + {(props?.userInfo?.order_access_status == 3 && ( + + 我的资产 + + + + ¥ + {formatPriceDiv(props.data.data.wallet_money || 0, 100, true)} + {/* {props.wallet_money || 0} */} + + 预存款 + + {/* + + {props.data.data.coupon_count || 0} + + + 优惠券 + */} + props.checkShow()}> + + ¥ + {formatPriceDiv(props.data.data.credit_line || 0, 100, true)} + {/* .-00 */} + + 授信额度 + + + + )) || } + + ) +} + +// 功能 +const Main = () => { + const menu = [ + { text: '我的客服', icon: 'icon-wodekefu', type: 'customer', label: '(0757) 8270 6695' }, + { text: '地址管理', icon: 'icon-daohang', url: '/pages/addressManager/index', type: 'url' }, + { text: '码单管理', icon: 'icon-a-yuanmadanmadanguanli', url: '/pages/weightList/index', type: 'url' }, + { text: '我的收藏', icon: 'icon-shoucang', url: '/pages/collection/index', type: 'url' }, + { text: '颜色对比', icon: 'icon-yanseduibi', url: '/pages/sampleComparison/index', type: 'url' }, + // { text: "分享推广", icon: "icon-fenxiang" }, + { text: '邀请码', icon: 'icon-yaoqingma', url: '/pages/bindSalesman/index', type: 'url' }, + ] + const navigation = (item) => { + if (item.type === 'url') { goLink(item.url) } + } + return ( + + + {menu.map((item, index) => { + return ( + navigation(item)} key={index} className={styles['card-main-list-content-item']}> + + + {item.text} + + {item.label} + + + + {item.type === 'customer' && } + + ) + })} + + + ) +} +const MainWithMemo = memo(Main) +const User = () => { + // 用户信息 + const { getSelfUserInfo, getAdminUserInfo } = useLogin() + const { adminUserInfo } = useSelector(state => state.userInfo) + + const [current_version, setCurrent_version] = useState(CURRENT_VERSION) + const [current_githash, setCurrent_githash] = useState(CURRENT_GITHASH) + const [current_env, setCurrent_env] = useState(CURRENT_ENV) + + const handleAuth = async() => { + console.log('授权面版') + if (adminUserInfo?.is_authorize_name) { return false } + getSelfUserInfo() + .then() + .catch(() => { + alert.none('授权失败,请授权后再使用') + }) + } + const { fetchData: Apiassets, state } = userassets() + const { fetchData: ApigetTotal, state: stateData } = userorderStatistics() + + useDidShow(() => { + ApigetTotal() + getAdminUserInfo() + Apiassets() + }) + + // 临时注释 + // const checkGo = async () => { + // if (adminUserInfo?.authentication_status !== 4) { + // let res = await Taro.showModal({ + // title: '提示', + // content: '你暂未开通授信,目前仅支持线下申请,开通后可使用账期采购。', + // cancelText: '稍后认证', + // confirmText: '联系客服', + // }) + // if (res.confirm) { + // Taro.showModal({ + // content: '联系电话:0757-8270 6695', + // cancelText: '取消', + // confirmText: '拨打', + // success: function (res) { + // if (res.confirm) { + // Taro.makePhoneCall({ + // phoneNumber: '(0757)82706695', + // }) + // } + // }, + // }) + // } + // } else { + // Taro.navigateTo({ + // url: '/pages/creditLine/index', + // }) + // } + // } + const checkGo = async() => { + Taro.navigateTo({ + url: '/pages/creditLine/index', + }) + } + + return ( + + + checkGo()} userInfo={adminUserInfo} /> + + {/* {(adminUserInfo as any)?.authentication_status==1&&} */} + {/* 测试暂时添加 */} + {current_version} + {current_env === 'development' && {BASE_URL}} + {!adminUserInfo?.is_authorize_name && } + + ) +} +export default User diff --git a/src/pages/user/index.config.ts b/src/pages/user/index.config.ts index 96b0f9a..49669fc 100644 --- a/src/pages/user/index.config.ts +++ b/src/pages/user/index.config.ts @@ -1,5 +1,6 @@ export default { - navigationBarTitleText: '我的', - navigationStyle: 'custom', - enableShareAppMessage: true, + navigationBarTitleText: '', + navigationBarBackgroundColor: '#EFF3FF', + backgroundColorTop: '#EFF3FF', + enablePullDownRefresh: true, } diff --git a/src/pages/user/index.module.scss b/src/pages/user/index.module.scss index ffe17de..2a22afe 100644 --- a/src/pages/user/index.module.scss +++ b/src/pages/user/index.module.scss @@ -1,565 +1,15 @@ -.main { - background-color: #f8f8f8; - min-height: 100vh; - display: flex; - flex-direction: column; - position: relative; - - .header { - background: #68b4ff; - background-size: cover; - height: 560px; - position: relative; - - .card-main { - margin-top: 10px; - } - } - - .auth-suspension { - position: fixed; - left: 0; - top: 0; - z-index: 1; - width: 100vw; - height: 100vh; - inset: 0; - } - - .header-card { - position: absolute; - left: 50%; - bottom: -18%; - transform: translateX(-50%); - } - - .crad { - width: 702px; - background: rgba(255, 255, 255, 0.95); - border-radius: 20px; - padding: 30px; - box-sizing: border-box; - box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.05); - } - - .card-info { - display: flex; - justify-content: space-between; - position: absolute; - top: -15%; - left: 0; - right: 0; - width: 702px; - padding: 0 30px; - box-sizing: border-box; - } - - .arcd-info-left { - display: flex; - align-items: flex-end; - } - - .arcd-info-left-portrait { - width: 170px; - height: 170px; - background: rgba(0, 0, 0, 0); - border: 4px solid #ffffff; - border-radius: 50%; - overflow: hidden; - } - - .arcd-info-left-portrait image { +.user_main { + .user_main__header { + height: 315px; width: 100%; - height: 100%; - object-fit: cover; - } - - .arcd-info-left-desc { - margin-left: 24px; - } - - .arcd-info-left-nickname { - font-size: 44px; - font-weight: 700; - color: #000000; - display: flex; - align-items: center; - } - - .arcd-info-left-phone { - font-size: 24px; - font-weight: 400; - color: #707070; - } - - .arcd-info-left-phone button { - padding: 0 10px; - height: 42px; - background: #ffffff; - border: 2px solid #cde5ff; - border-radius: 20px; - font-size: 22px; - font-weight: 400; - color: #007aff; - display: flex; - align-items: center; - justify-content: center; - } - - .card-info-right { - font-size: 26px; - display: flex; - align-items: flex-end; - } - - .setup-icon { + background-color: #eff3ff; position: relative; - padding-bottom: 10px; - } - - .icon-wrapper { - font-size: 60px; - } - - .icon-point { - width: 8px; - height: 8px; - border-radius: 50%; - background: #ff0000; - position: absolute; - right: 0; - top: 0; - } - - .card-main { - margin: 20px auto 0; - } - - .card-main-title { - display: flex; - justify-content: space-between; - align-items: center; - border-bottom: 2px solid #dddddd; - padding: 0 5px 15px; - box-sizing: border-box; - .card_main_title_order { - flex: 1; - font-size: 28px; - font-weight: 700; - } - .order_more { - display: flex; - justify-content: flex-end; - align-items: center; - font-size: 25px; - color: #707070; - text { - width: auto; - } - } - } - - .card-main-title text { - font-size: 22px; - font-weight: 400; - color: #ababab; - display: inline-block; - text-align: right; - width: 150px; - } - - .card-main-title-content { - display: grid; - grid-template-columns: repeat(5, 1fr); - } - - .card-main-title-content-item { - font-size: 24px; - font-weight: 400; - color: #3c3c3c; - text-align: center; - margin-top: 30px; - position: relative; - } - - .card-main-title-content-item Text { - font-size: 56px; - color: #3c3c3c; - } - - .card-main-title-content-item-badge { - padding: 0 10px; - height: 32px; - background: #007aff; - border: 2px solid #ffffff; - border-radius: 32px; - box-sizing: border-box; - overflow: hidden; - font-size: 18px; - font-weight: 700; - color: #ffffff; - display: flex; - align-items: center; - justify-content: center; - position: absolute; - top: -10px; - right: 0; - } - - .assets-title { - font-size: 28px; - font-weight: 700; - color: #3c3c3c; - margin-bottom: 20px; - } - - .assets-content { - display: grid; - grid-template-columns: repeat(2, 1fr); - } - - .assets-content > view, - .assets-content > navigator { - text-align: center; - } - - .assets-content-item-top { - color: #007aff; - font-weight: 400; - } - - .assets-content-item-top-before { - font-size: 20px; - } - - .assets-content-item-top-content { - font-size: 36px; - } - - .assets-content-item-top-after { - font-size: 20px; - } - - .assets-content-item-tips { - font-size: 24px; - font-weight: 400; - color: #707070; - } - - .main-card { - margin: 131px auto 0; - } - - .card-feature { - margin-bottom: 50px; - } - - .card-main-list-content-item { - display: flex; - align-items: center; - justify-content: space-between; - height: 90px; - position: relative; - } - - .card-main-list-content-item-left { - font-size: 26px; - font-weight: 400; - text-align: left; - color: #707070; - display: flex; - align-items: center; - min-width: 260px; - } - .card-main-list-content-item .label { - width: 100%; - text-align: right; - padding-right: 10px; - font-size: 26px; - } - .card-main-list-content-item-left text { - margin-right: 35px; - font-size: 56px; - color: #707070; - } - - .card-main-list-content-item-right text { - font-size: 30px; - } - .card-main-list-content-item .customer { - position: absolute; - opacity: 0; - width: 100%; - height: 100%; - } - - .auth { - margin-top: 115px; - } - - .auth-top { - display: flex; - align-items: center; - justify-content: space-between; - } - - .auth-status { - padding: 0 10px; - height: 30px; - background: #dddddd; - border-radius: 10px 4px 0px 0px; - display: flex; - align-items: center; - justify-content: center; - font-size: 18px; - font-weight: 400; - color: #707070; - } - - .auth-status, - .auth-status-ongoing { - color: #ee7500; - background-color: #ffe6ce; - } - - .auth-status, - .auth-status-adopt { - color: #007aff; - background-color: #cde5ff; - } - - .auth-tips { - font-size: 18px; - font-weight: 400; - color: #007aff; - text-align: right; - } - - .auth-tips, - .auth-tips-adopt { - color: #ababab; - } - - .auth-tips text { - font-size: 17px; - } - - .auth-company { - height: 70px; - width: 100%; - background: #f6f6f6; - border: 2px solid #f0f0f0; - border-radius: 0px 10px 10px 10px; - font-size: 26px; - font-weight: 700; - color: #707070; - display: flex; - align-items: center; - justify-content: center; - } - - .auth-company, - .auth-company-adopt { - background: #ecf5ff; - border: 2px solid #cde5ff; - } - - .tips-modal { - background: rgba(0, 0, 0, 0.6); - position: fixed; - inset: 0; - display: flex; - justify-content: center; - align-items: center; - z-index: 2; - } - - .tips-modal-content { - width: 598px; - background: #ffffff; - border-radius: 10px; - animation: enlargeK 0.2s linear; - overflow: hidden; - } - - @keyframes enlargeK { - 0% { - transform: scale(0); - } - - 100% { - transform: scale(1); - } - } - - .tips-modal-title { - font-size: 32px; - font-weight: 700; - text-align: center; - color: #000000; - margin-bottom: 58px; - padding-top: 48px; - } - - .tips-modal-letter { - font-size: 26px; - font-weight: 400; - color: #707070; - padding: 0 30px; - line-height: 50px; - } - - .tips-modal-letter-text { - text-indent: 60px; - } - - .tips-modal-letter-beginn { - font-size: 28px; - font-weight: 400; - color: #000000; - margin-bottom: 25px; - } - - .tips-modal-letter-end { - font-size: 26px; - font-weight: 400; - text-align: right; - margin-top: 61px; - } - - .tips-modal-button { - display: flex; - border-top: 1px solid #dddddd; - margin-top: 45px; - } - - .tips-modal-button button, - .tips-modal-button view { - display: flex; - align-items: center; - justify-content: center; - width: 50%; - height: 90px; - background-color: white; - } - - .tips-modal-button button { - font-size: 26px; - font-weight: 400; - color: #707070; - border-radius: 0; - border-right: 1px solid #dddddd; - } - - .tips-modal-button button::after { - border: 0; - border-radius: 0; - } - - .tips-modal-button view { - font-size: 26px; - font-weight: 400; - color: #007aff; - } - - .auth-box { - width: 614px; - height: 70px; - background: #f6f6f6; - border-radius: 10px; - display: flex; - align-items: center; - justify-content: space-between; - padding-left: 18px; - padding-right: 16px; - - .auth-left-box { - display: flex; - align-items: center; - - .auth-tag { - width: 86px; - height: 34px; - background: #dddddd; - border-radius: 10px; - font-size: 22px; - font-family: Microsoft YaHei, Microsoft YaHei-Regular; - font-weight: 400; - text-align: center; - color: #707070; - text-align: center; - line-height: 34px; - margin-right: 28px; - } - - .auth-tagone { - width: 86px; - height: 34px; - background: #ffe6ce; - border-radius: 10px; - font-size: 22px; - font-family: Microsoft YaHei, Microsoft YaHei-Regular; - font-weight: 400; - text-align: center; - color: #707070; - text-align: center; - line-height: 34px; - margin-right: 28px; - } - - .auth-tagtwo { - display: flex; - align-items: center; - overflow: hidden; - padding-left: 10px; - width: 100px; - height: 32px; - background: #cde5ff; - border-radius: 10px; - - .iconFont-color { - display: flex; - align-items: center; - font-size: 30px; - margin-right: 3px; - color: #007aff; - } - - .auth-font { - font-size: 20px; - font-family: Microsoft YaHei, Microsoft YaHei-Regular; - font-weight: 400; - color: #007aff; - } - } - - .tagthree { - display: flex; - align-items: center; - overflow: hidden; - padding-left: 10px; - width: 100px; - height: 32px; - background: rgba(255, 0, 0, 0.1); - border-radius: 10px; - color: #ff0000; - } - - .auth-cont { - margin-left: 16px; - font-size: 26px; - font-family: Microsoft YaHei, Microsoft YaHei-Bold; - font-weight: 700; - color: #ababab; - } - - .auth-contone { - margin-left: 16px; - font-size: 26px; - font-family: Microsoft YaHei, Microsoft YaHei-Bold; - font-weight: 700; - color: #3c3c3c; - } + image { + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; } } } diff --git a/src/pages/user/index.tsx b/src/pages/user/index.tsx index ca19a8e..c2cf159 100644 --- a/src/pages/user/index.tsx +++ b/src/pages/user/index.tsx @@ -1,366 +1,16 @@ -import { Button, Image, Navigator, Text, View } from '@tarojs/components' -import Taro, { useDidShow, useShareAppMessage } from '@tarojs/taro' -import { memo, useEffect, useMemo, useState } from 'react' +import { Image, View } from '@tarojs/components' import classnames from 'classnames' import styles from './index.module.scss' -import { useSelector } from '@/reducers/hooks' -import { alert, goLink } from '@/common/common' -import useLogin from '@/use/useLogin' -import { BASE_URL } from '@/common/constant' -import { userassets, userorderStatistics } from '@/api/mine' -import { formatImgUrl, formatPriceDiv } from '@/common/fotmat' -import { GetAdminUserInfoApi } from '@/api/user' +import namedPng from '@/styles/image/user_header.png' +import LabAndImg from '@/components/LabAndImg' -// 提示弹窗 -const Modal = (props: any) => { - const { data } = props - const [modalShow, setModalShow] = useState(true) - const handleouter = () => {} - return ( - <> - {modalShow && ( - - e.stopPropagation()}> - 首次登录提醒 - - To: 万丰园纺织科技 - - 尊敬的老朋友,欢迎你使用小程序商城;由于您是我们长期合作的伙伴,你的组织已自动为你生成,关联后可查看历史订单哟。 - - 信息错误请联系客服 - - - - setModalShow(false)}>我知道 - - - - )} - - ) -} -const ModalWithMemo = memo(Modal) - -// 头部 | 订单 -const Header = (props: any) => { - const { data } = props - console.log(props, 'propsprops') - const menu = [ - { text: '待配布', icon: 'icon-daipeibu', url: '/pages/order/orderList/index?status=0' }, - { text: '待付款', icon: 'icon-daifukuan', url: '/pages/order/orderList/index?status=1' }, - { text: '待发货', icon: 'icon-daifahuo', url: '/pages/order/orderList/index?status=2' }, - { text: '待收货', icon: 'icon-yifahuo', url: '/pages/order/orderList/index?status=3' }, - { text: '退款/售后', icon: 'icon-a-tuikuanshouhou', url: '/pages/salesAfter/salesAfterList/index' }, - ] - const { getPhoneNumber } = useLogin() - const mGetPhoneNumber = (ev) => { - if (ev.detail?.code) { - getPhoneNumber(ev.detail.code) - } - else { - alert.none('绑定失败!') - } - } - const navTo = () => { - Taro.navigateTo({ - // url: '/pages/certification/index', - url: '/pages/userEdit/index', - }) - } - - return ( - - - - - - - - - - {/* {state.data.user_name} */} - {data?.user_name} - - - {data?.phone - ? ( - data?.phone?.replace(data?.phone?.substring(3, 7), '****') - ) - : ( - - )} - - - - - - - - - - - - {(data?.authentication_status == 0 || data?.authentication_status == 1) && data?.order_access_status == 3 && ( - navTo()}> - - 未认证 - {data?.company_name || '暂未加入或注册组织'} - - - - )} - {data?.authentication_status == 3 && data?.order_access_status == 3 && ( - navTo()}> - - 认证失败 - {data?.company_name || '暂未加入或注册组织'} - - - - )} - {data?.authentication_status == 2 && data?.order_access_status == 3 && ( - navTo()}> - - 认证中 - {data?.company_name || '暂未加入或注册组织'} - - - - )} - {data?.authentication_status == 4 && data?.order_access_status == 3 && ( - navTo()}> - - - - - - 已认证 - - {data?.company_name} - - - - )} - {/* - - 1 - {data?.authentication_status==1&&"未认证"} - {data?.authentication_status==2&&"认证中"} - {data?.authentication_status==3&&"认证不通过"} - {data?.authentication_status==4&&"已认证"} - - {data?.authentication_status==1&&认证通过后,解锁更多权限 } - {data?.authentication_status==2&&1-3个工作日,审核完成 } - {data?.authentication_status==3&&重新认证 } - {data?.authentication_status==4&&认证通过,可以下单啦 } - */} - {/* - {data?.authentication_status==1&&"暂未加入或注册组织"} - {data?.authentication_status==2&&data?.company_name} - {data?.authentication_status==3&&data?.company_name} - {data?.authentication_status==4&&data?.company_name} - */} - - - - 订单 - goLink('/pages/order/orderList/index')}> - 全部 - - - - {menu.map((item, index) => { - return ( - - - {item.text} - {index == 0 && props.MenuData.data.wait_match !== 0 && ( - - {props.MenuData.data.wait_match > 99 ? '99+' : props.MenuData.data.wait_match} - - )} - {index == 1 && props.MenuData.data.wait_pay !== 0 && ( - - {props.MenuData.data.wait_pay > 99 ? '99+' : props.MenuData.data.wait_pay} - - )} - {index == 2 && props.MenuData.data.wait_shipped !== 0 && ( - - {props.MenuData.data.wait_shipped > 99 ? '99+' : props.MenuData.data.wait_shipped} - - )} - {index == 3 && props.MenuData.data.already_shipped !== 0 && ( - - {props.MenuData.data.already_shipped > 99 ? '99+' : props.MenuData.data.already_shipped} - - )} - {index == 4 && props.MenuData.data.after_return !== 0 && ( - - {props.MenuData.data.after_return > 99 ? '99+' : props.MenuData.data.after_return} - - )} - - ) - })} - - +export default () => { + return + + + + - ) + } -const HeaderWithMemo = memo(Header) -// 我的资产 -const Assets = (props: any) => { - return ( - <> - {(props?.userInfo?.order_access_status == 3 && ( - - 我的资产 - - - - ¥ - {formatPriceDiv(props.data.data.wallet_money || 0, 100, true)} - {/* {props.wallet_money || 0} */} - - 预存款 - - {/* - - {props.data.data.coupon_count || 0} - - - 优惠券 - */} - props.checkShow()}> - - ¥ - {formatPriceDiv(props.data.data.credit_line || 0, 100, true)} - {/* .-00 */} - - 授信额度 - - - - )) || } - - ) -} - -// 功能 -const Main = () => { - const menu = [ - { text: '我的客服', icon: 'icon-wodekefu', type: 'customer', label: '(0757) 8270 6695' }, - { text: '地址管理', icon: 'icon-daohang', url: '/pages/addressManager/index', type: 'url' }, - { text: '码单管理', icon: 'icon-a-yuanmadanmadanguanli', url: '/pages/weightList/index', type: 'url' }, - { text: '我的收藏', icon: 'icon-shoucang', url: '/pages/collection/index', type: 'url' }, - { text: '颜色对比', icon: 'icon-yanseduibi', url: '/pages/sampleComparison/index', type: 'url' }, - // { text: "分享推广", icon: "icon-fenxiang" }, - { text: '邀请码', icon: 'icon-yaoqingma', url: '/pages/inviteCode/index', type: 'url' }, - ] - const navigation = (item) => { - if (item.type === 'url') { goLink(item.url) } - } - return ( - - - {menu.map((item, index) => { - return ( - navigation(item)} key={index} className={styles['card-main-list-content-item']}> - - - {item.text} - - {item.label} - - - - {item.type === 'customer' && } - - ) - })} - - - ) -} -const MainWithMemo = memo(Main) -const User = () => { - // 用户信息 - const { getSelfUserInfo, getAdminUserInfo } = useLogin() - const { adminUserInfo } = useSelector(state => state.userInfo) - - const [current_version, setCurrent_version] = useState(CURRENT_VERSION) - const [current_githash, setCurrent_githash] = useState(CURRENT_GITHASH) - const [current_env, setCurrent_env] = useState(CURRENT_ENV) - - const handleAuth = async() => { - console.log('授权面版') - if (adminUserInfo?.is_authorize_name) { return false } - getSelfUserInfo() - .then() - .catch(() => { - alert.none('授权失败,请授权后再使用') - }) - } - const { fetchData: Apiassets, state } = userassets() - const { fetchData: ApigetTotal, state: stateData } = userorderStatistics() - - useDidShow(() => { - ApigetTotal() - getAdminUserInfo() - Apiassets() - }) - - // 临时注释 - // const checkGo = async () => { - // if (adminUserInfo?.authentication_status !== 4) { - // let res = await Taro.showModal({ - // title: '提示', - // content: '你暂未开通授信,目前仅支持线下申请,开通后可使用账期采购。', - // cancelText: '稍后认证', - // confirmText: '联系客服', - // }) - // if (res.confirm) { - // Taro.showModal({ - // content: '联系电话:0757-8270 6695', - // cancelText: '取消', - // confirmText: '拨打', - // success: function (res) { - // if (res.confirm) { - // Taro.makePhoneCall({ - // phoneNumber: '(0757)82706695', - // }) - // } - // }, - // }) - // } - // } else { - // Taro.navigateTo({ - // url: '/pages/creditLine/index', - // }) - // } - // } - const checkGo = async() => { - Taro.navigateTo({ - url: '/pages/creditLine/index', - }) - } - - return ( - - - checkGo()} userInfo={adminUserInfo} /> - - {/* {(adminUserInfo as any)?.authentication_status==1&&} */} - {/* 测试暂时添加 */} - {current_version} - {current_env === 'development' && {BASE_URL}} - {!adminUserInfo?.is_authorize_name && } - - ) -} -export default User diff --git a/src/styles/image/user_header.png b/src/styles/image/user_header.png new file mode 100644 index 0000000..088f7ea Binary files /dev/null and b/src/styles/image/user_header.png differ