From 12e70ce8ae092795848ac4d35caac2e0fb201852 Mon Sep 17 00:00:00 2001 From: czm <2192718639@qq.com> Date: Wed, 23 Nov 2022 21:03:24 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=88=20perf(=E5=AE=A2=E6=9C=8D=E5=92=A8?= =?UTF-8?q?=E8=AF=A2=E5=AE=8C=E6=88=90):?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/constant.js | 4 +- .../components/swiper/index.module.scss | 53 ++-- src/pages/details/index.module.scss | 38 ++- src/pages/details/index.tsx | 35 ++- src/pages/user/index.tsx | 11 +- src/pages/userEdit/index.tsx | 279 ++++++++++-------- src/styles/iconfont.scss | 78 +---- 7 files changed, 240 insertions(+), 258 deletions(-) diff --git a/src/common/constant.js b/src/common/constant.js index c2f3a40..08f3a2c 100644 --- a/src/common/constant.js +++ b/src/common/constant.js @@ -1,4 +1,4 @@ -// export const BASE_URL = CURRENT_BASE_URL +export const BASE_URL = CURRENT_BASE_URL // export const BASE_URL = `http://192.168.0.75:50001/lymarket` // export const BASE_URL = `http://192.168.0.89:50001/lymarket` // export const BASE_URL = `http://10.0.0.5:50001/lymarket` @@ -12,7 +12,7 @@ // export const BASE_URL = `https://dev.zzfzyc.com/lymarket` // 开发环境 // export const BASE_URL = `https://www.zzfzyc.com/lymarket` // 正式环境 // export const BASE_URL = `http://192.168.1.5:40001/lymarket` // 王霞 -export const BASE_URL = `http://192.168.1.7:50002/lymarket` // 添 +// export const BASE_URL = `http://192.168.1.7:50002/lymarket` // 添 // export const BASE_URL = `http://192.168.1.22:50002/lymarket` // 婷 // export const BASE_URL = `http://192.168.1.42:50002/lymarket` // 杰 diff --git a/src/pages/details/components/swiper/index.module.scss b/src/pages/details/components/swiper/index.module.scss index f65584e..926728e 100644 --- a/src/pages/details/components/swiper/index.module.scss +++ b/src/pages/details/components/swiper/index.module.scss @@ -1,28 +1,29 @@ -.swiper{ - height: 450px; +.swiper { + height: 450px; + width: 100%; + position: relative; + .swiper_item { + height: 100%; width: 100%; - position: relative; - .swiper_item{ - height: 100%; - width: 100%; + } + .image_item { + width: 100%; + height: 100%; + image { + width: 100%; + height: 100%; + display: block; + border-radius: 20px 20px 0 0; } - .image_item{ - width: 100%; - height: 100%; - image{ - width: 100%; - height: 100%; - display: block; - } - } - .page{ - font-size: $font_size_min; - padding: 5px 20px; - background-color: rgba(0,0,0,0.3); - color: #fff; - border-radius: 50px; - position: absolute; - bottom: 20px; - right: 20px; - } -} \ No newline at end of file + } + .page { + font-size: $font_size_min; + padding: 5px 20px; + background-color: rgba(0, 0, 0, 0.3); + color: #fff; + border-radius: 50px; + position: absolute; + bottom: 20px; + right: 20px; + } +} diff --git a/src/pages/details/index.module.scss b/src/pages/details/index.module.scss index e6a2f8c..4e511b5 100644 --- a/src/pages/details/index.module.scss +++ b/src/pages/details/index.module.scss @@ -3,11 +3,12 @@ background-color: $color_bg_one; padding: 20px 20px 100px 20px; .product_header { - padding: 0 20px; + padding: 20px 20px 0 20px; display: flex; - align-items: center; height: 163.57px; background-color: #fff; + box-sizing: border-box; + border-radius: 20px; .title { flex: 1; .name { @@ -30,8 +31,9 @@ text-align: center; color: $color_font_three; position: relative; + margin-left: 10px; .text { - margin-top: 10px; + margin-top: 5px; font-size: $font_size_medium; } } @@ -45,6 +47,7 @@ } .miconfont { font-size: 45px; + color: #333333; } .collected { color: #ffc300; @@ -57,7 +60,7 @@ border-radius: 16px; .title { font-size: $font_size; - font-weight: 700; + font-weight: 500; color: $color_font_one; margin-bottom: 20px; } @@ -88,7 +91,10 @@ padding: 30px 20px 0; color: $color_font_one; font-size: $font_size_medium; + border-radius: 20px; .title { + color: rgba(0, 0, 0, 0.8); + font-weight: 500; } .list { margin-top: 30px; @@ -147,7 +153,10 @@ background-color: #fff; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); - + .icon_btn { + display: flex; + padding: 0 20px 0 50px; + } .buy_cart { width: 150px; color: $color_font_three; @@ -155,9 +164,11 @@ position: relative; .text { font-size: $font_size_min; + color: #333333; } .miconfont { font-size: 50px; + color: #333333; } .product_num { position: absolute; @@ -176,11 +187,13 @@ } .customer_service { text-align: center; + position: relative; .miconfont { font-size: 50px; } .text { font-size: $font_size_min; + color: #333333; } } .buy_btn { @@ -193,12 +206,15 @@ font-size: $font_size; color: #fff; position: relative; - .phoneBtn { - background-color: rgba(0, 0, 0, 0); - position: absolute; - width: 100%; - height: 100%; - } } } + .wxBtn { + // background-color: rgba(0, 0, 0, 0); + opacity: 0; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + } } diff --git a/src/pages/details/index.tsx b/src/pages/details/index.tsx index 2b00307..537a5e1 100644 --- a/src/pages/details/index.tsx +++ b/src/pages/details/index.tsx @@ -92,6 +92,12 @@ export default (props: Params) => { // ` const html = `` + const shareImg = useMemo(() => { + let data = productInfo.texture_url ? productInfo.texture_url.toString().split(',') : [] + let str = data.length > 0 ? data[0] : '/mall/share_img_01.png' + return formatImgUrl(str, '!w400') + }, [productInfo]) + const { setSortCode, userInfo: userObj } = useUserInfo() //详情页获取分享短码 const { ShareDetail } = SHARE_SCENE @@ -102,7 +108,7 @@ export default (props: Params) => { type: ShareDetail.value, product_id: parseInt(params.id), }) - const img = formatImgUrl(productInfo.texture_url || '/mall/share_img_01.png', '!w400') + const img = formatImgUrl(shareImg, '!w400') setSortCode({ ...userObj.sort_code, shareShortDetail: { title: productName as string, code: resDetail.md5_key, img: img } }) } @@ -177,20 +183,20 @@ export default (props: Params) => { {productInfo.code && {productName}} {productInfo.describe} - - - 分享 - - 收藏 + + + 分享 + + 商品参数 @@ -237,10 +243,19 @@ export default (props: Params) => { - + - 客服 + + 客服 + + setShowCart(true)}> @@ -251,7 +266,7 @@ export default (props: Params) => { {(!userInfo.adminUserInfo?.is_authorize_phone && ( - + 选购商品 )) || ( diff --git a/src/pages/user/index.tsx b/src/pages/user/index.tsx index f9fa34d..3ceaa50 100644 --- a/src/pages/user/index.tsx +++ b/src/pages/user/index.tsx @@ -341,16 +341,7 @@ const Main = memo(() => { - {item.type === 'customer' && ( - - )} + {item.type === 'customer' && } ) })} diff --git a/src/pages/userEdit/index.tsx b/src/pages/userEdit/index.tsx index 55a84d5..5a45875 100644 --- a/src/pages/userEdit/index.tsx +++ b/src/pages/userEdit/index.tsx @@ -1,158 +1,161 @@ - -import { alert, goLink, isEmptyObject, retrieval } from "@/common/common"; -import Popup from "@/components/popup"; -import { Button, Image, Picker, Text, Textarea, View } from "@tarojs/components" -import Taro, { chooseMedia } from "@tarojs/taro"; -import { realNameUpdateApi, companyTypeApi, portraitUpdateApi } from "@/api/user"; -import { companyDetailApi, companyUpdateApi } from "@/api/company" -import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react" -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 { alert, goLink, isEmptyObject, retrieval } from '@/common/common' +import Popup from '@/components/popup' +import { Button, Image, Picker, Text, Textarea, View } from '@tarojs/components' +import Taro, { chooseMedia } from '@tarojs/taro' +import { realNameUpdateApi, companyTypeApi, portraitUpdateApi } from '@/api/user' +import { companyDetailApi, companyUpdateApi } from '@/api/company' +import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react' +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); + const { getPhoneNumber, getAdminUserInfo } = useLogin() + const { adminUserInfo } = useSelector((state) => state.userInfo) // 用户信息 useEffect(() => { setFormData({ ...formData, - ...adminUserInfo as any, - }); - }, [adminUserInfo]); + ...(adminUserInfo as any), + }) + }, [adminUserInfo]) useEffect(() => { setFormData({ - ...adminUserInfo as any, - company_type_index: 0 - }); - getCompanyTypeData(); + ...(adminUserInfo as any), + company_type_index: 0, + }) + getCompanyTypeData() }, []) // 表单数据 - const [formData, setFormData] = useState(adminUserInfo); + const [formData, setFormData] = useState(adminUserInfo) // 昵称修改保存 - const { fetchData: realNameUpdateFetch } = realNameUpdateApi(); + const { fetchData: realNameUpdateFetch } = realNameUpdateApi() const rules = { - text: [{ - message: "请输入" - }] + text: [ + { + message: '请输入', + }, + ], } - const { fetchData: saveFetch } = companyUpdateApi(); - const { fetchData: getCompanyFetch } = companyDetailApi(); + 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); - }) + 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); + goLink(url) } // 肖像编辑 - const { fetchData: portraitUpdateFetch } = portraitUpdateApi(); - const { getWxPhoto } = useUploadCDNImg(); + const { fetchData: portraitUpdateFetch } = portraitUpdateApi() + const { getWxPhoto } = useUploadCDNImg() const handleSelectRortrait = () => { Taro.showModal({ - title: "提示", - content: "是否确定更改头像？", + title: '提示', + content: '是否确定更改头像？', showCancel: true, async success(ev) { if (ev.confirm) { - let result = await getWxPhoto('mall'); + let result = await getWxPhoto('mall') const portraitUpdateResult = await portraitUpdateFetch({ - avatar_url: IMG_CND_Prefix + (result as any).url - }); + avatar_url: IMG_CND_Prefix + (result as any).url, + }) if (portraitUpdateResult.success) { - getAdminUserInfo(); - alert.success("保存成功"); + getAdminUserInfo() + alert.success('保存成功') } else { - alert.none(portraitUpdateResult.msg); + alert.none(portraitUpdateResult.msg) } } - } + }, }) } const mGetPhoneNumber = (ev) => { if (ev.detail?.code) { - getPhoneNumber(ev.detail.code); + getPhoneNumber(ev.detail.code) } else { - alert.none("绑定失败!"); + alert.none('绑定失败!') } } - const ModifyIcknameEl = useRef(null); - const ModifyCompanyNameEl = useRef(null); + const ModifyIcknameEl = useRef(null) + const ModifyCompanyNameEl = useRef(null) // 获取企业类型 - const { fetchData: companyTypeFetch, state: companyTypeData } = companyTypeApi(); + const { fetchData: companyTypeFetch, state: companyTypeData } = companyTypeApi() const getCompanyTypeData = async () => { - const reuslt = await companyTypeFetch(); + 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; + ...(adminUserInfo as any), + company_type_index: index, + }) + return false } - return true; + return true }) } } // 修改企业类型 const handleCompanyType = async (ev) => { - const { value } = ev.detail; - const item = companyTypeData.data.list && companyTypeData.data.list[value]; + 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(); + if (item.id == 0) return alert.error('请选择类型') + const params = await getCompanyFetch() const result = await saveFetch({ ...params.data, - purchaser_type: item.id - }); + purchaser_type: item.id, + }) if (result.success) { - getAdminUserInfo(); - alert.success("保存成功") + getAdminUserInfo() + alert.success('保存成功') } else { - alert.none(result.msg); + alert.none(result.msg) } } } - const {removeToken, removeSessionKey, removeUserInfo} = useUserInfo() + const { removeToken, removeSessionKey, removeUserInfo } = useUserInfo() const outLogin = () => { removeToken() removeSessionKey() removeUserInfo() - goLink('/pages/index/index',{}, 'switchTab') + goLink('/pages/index/index', {}, 'switchTab') } const comanyTypeDataFormat = useMemo(() => { - if(companyTypeData.data.list) { - return companyTypeData.data.list?.map(item => { - if(item.id == 0) item.name = '--请选择类型--' + if (companyTypeData.data.list) { + return companyTypeData.data.list?.map((item) => { + if (item.id == 0) item.name = '--请选择类型--' return item }) } else { @@ -161,42 +164,69 @@ export default () => { }, [companyTypeData]) return ( - - + + 点击编辑头像 - - 个人资料 - (ModifyIcknameEl.current as any).setModalShow(true)} data={(formData as any)?.user_name} label="昵称" placeholder="请输入" icon="" /> - - {((formData as any)?.phone) ? - {(formData as any)?.phone} - 已绑定 - : - - } + + + 个人资料 + + (ModifyIcknameEl.current as any).setModalShow(true)} + data={(formData as any)?.user_name} + label='昵称' + placeholder='请输入' + icon='' + /> + + {(formData as any)?.phone ? ( + + {(formData as any)?.phone} + 已绑定 + + ) : ( + + )} - - 组织资料 - (ModifyCompanyNameEl.current as any).setModalShow(true)} data={(formData as any)?.company_name} label="组织名称" placeholder="待绑定" icon="" /> - + + + 组织资料 + + (ModifyCompanyNameEl.current as any).setModalShow(true)} + data={(formData as any)?.company_name} + label='组织名称' + placeholder='待绑定' + icon='' + /> + {/* {formData?.purchaser_type_name} - - - - {(formData as any)?.authentication_status == 4 ? "已认证" : "未认证"} + */} + + + {(formData as any)?.authentication_status == 4 ? '已认证' : '未认证'} - + - + - handleTextareaSave(value, "Ickname")} /> - handleTextareaSave(value, "companyName")} /> + handleTextareaSave(value, 'Ickname')} /> + handleTextareaSave(value, 'companyName')} + /> ) } @@ -204,22 +234,11 @@ export default () => { // 列表 const UserEditList = memo((props: any) => { return ( - - - {props.label} - - - - { - props.children ? props.children : - props.data ? props.data : - {props.placeholder} - } - - { - !props.useIcon && - - } + + {props.label} + + {props.children ? props.children : props.data ? props.data : {props.placeholder}} + {!props.useIcon && } ) diff --git a/src/styles/iconfont.scss b/src/styles/iconfont.scss index 4d28a88..e23a729 100644 --- a/src/styles/iconfont.scss +++ b/src/styles/iconfont.scss @@ -267,9 +267,9 @@ content: '\e62f'; } -.icon-daifahuo:before { - content: '\e629'; -} +// .icon-daifahuo:before { +// content: '\e629'; +// } .icon-daishouhuo:before { content: '\e62a'; @@ -279,70 +279,10 @@ content: '\e62b'; } -.icon-daipeibu:before { - content: '\e62c'; -} +// .icon-daipeibu:before { +// content: '\e62c'; +// } -.icon-daifukuan:before { - content: '\e62d'; -} - -.icon-shezhi:before { - content: '\e630'; -} - -.icon-tishi:before { - content: '\e631'; -} - -.icon-erweima:before { - content: '\e632'; -} - -.icon-dianjishoucang:before { - content: '\e633'; -} - -.icon-gouwuche:before { - content: '\e634'; -} - -.icon-shoucangchenggong:before { - content: '\e635'; -} - -.icon-fenxiangshangpin:before { - content: '\e636'; -} - -.icon-kefu:before { - content: '\e637'; -} - -.icon-xinzenganniu:before { - content: '\e62e'; -} - -.icon-jianshaoanniu:before { - content: '\e62f'; -} - -.icon-daifahuo:before { - content: '\e629'; -} - -.icon-daishouhuo:before { - content: '\e62a'; -} - -.icon-tuikuan-shouhou:before { - content: '\e62b'; -} - -.icon-daipeibu:before { - content: '\e62c'; -} - -.icon-daifukuan:before { - content: '\e62d'; -} +// .icon-daifukuan:before { +// content: '\e62d'; +// }