diff --git a/src/api/addressManager.ts b/src/api/addressManager.ts index 376ba04..ffa3dcd 100644 --- a/src/api/addressManager.ts +++ b/src/api/addressManager.ts @@ -32,3 +32,25 @@ import { useRequest } from "@/use/useHttp" method: "get", }) } + +/** + * 地址编辑 + * @returns + */ + export const addressEditApi = () => { + return useRequest({ + url: `/v1/mall/address`, + method: "put", + }) +} + +/** + * 地址删除 + * @returns + */ + export const addressDeleteApi = () => { + return useRequest({ + url: `/v1/mall/address`, + method: "delete", + }) +} diff --git a/src/api/subjectMaterial.ts b/src/api/subjectMaterial.ts new file mode 100644 index 0000000..78a9cd1 --- /dev/null +++ b/src/api/subjectMaterial.ts @@ -0,0 +1,13 @@ +import { useRequest } from "@/use/useHttp" + +/** + * 获取专题列表 + * @returns +*/ +export const GetSubjectList = () => { + return useRequest({ + url: `/v1/mall/subject/list`, + method: "get", + }) +} + diff --git a/src/app.config.ts b/src/app.config.ts index 441af6a..dd04399 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -98,6 +98,12 @@ export default { "index", "comfirm" ] + }, + { + root: "pages/editOrder", + pages: [ + "index", + ] } ] } diff --git a/src/common/constant.js b/src/common/constant.js index 7bab9fc..0e939bb 100644 --- a/src/common/constant.js +++ b/src/common/constant.js @@ -8,7 +8,7 @@ export const BASE_URL = `http://192.168.1.30:40001/lymarket` // 发 // 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.165:40001/lymarket` // 王霞 +// export const BASE_URL = `http://192.168.1.4:40001/lymarket` // 王霞 // export const BASE_URL = `http://192.168.1.224:50002/lymarket` // 添 // CDN diff --git a/src/components/AddressList/index.scss b/src/components/AddressList/index.scss index 6089a65..5f8cd5b 100644 --- a/src/components/AddressList/index.scss +++ b/src/components/AddressList/index.scss @@ -22,6 +22,9 @@ border: 1px solid #68b4ff; box-shadow: 0px 0px 10px 0px rgba(0,122,255,0.27); } + .address-list:first-child{ + margin-top: 0; + } .address-list:last-child{ margin-bottom: 300px; } diff --git a/src/components/AddressList/index.tsx b/src/components/AddressList/index.tsx index 4290452..ae48293 100644 --- a/src/components/AddressList/index.tsx +++ b/src/components/AddressList/index.tsx @@ -2,34 +2,81 @@ import { Button, Navigator, ScrollView, Text, View } from "@tarojs/components" import { memo, useEffect, useState } from "react" import "./index.scss" -import {addressListApi} from "@/api/addressManager" -import { useDidShow } from "@tarojs/taro" +import {addressListApi,addressDeleteApi} from "@/api/addressManager" +import { alert } from "@/common/common" +import Taro, { showModal } from "@tarojs/taro" interface Params{ refresherEnabled?: boolean,//是否开启刷新 onSelect?: (item:any,index:number)=>void,//列表选择 - + addButtonEnabled?: boolean, //是否显示添加按钮 + focusBorderEnabled?: boolean, //焦点显示蓝色边框 + id?: number, //默认选择值 } // 地址列表 const AddressList = memo((props:Params)=>{ + const {addButtonEnabled=true,focusBorderEnabled=false} = props; const {fetchData, state} = addressListApi() // 获取数据 - const getData = ()=>{ - fetchData(); + const getData = async ()=>{ + const result = await fetchData(); + if(props.id){ + setFocusId(props.id as any); + }else{ + result.data.list?.every(item=>{ + if(item.is_default){ + setFocusId(item.id); + return false; + } + return true; + }) + } } useEffect(()=>{ getData(); + // 监听刷新 + Taro.eventCenter.on("addressList:refresh", getData); + return ()=>{ + Taro.eventCenter.off("addressList:refresh", getData); + } },[]) - // 处理刷新 const [refreshState, setRefreshState] = useState(false); const handleRefresh = async ()=>{ setRefreshState(true); - await fetchData(); + await getData(); setRefreshState(false); } const data = Array.from({length:15}); + // 焦点 + const [focusId, setFocusId] = useState(); + // 列表选择 + const handleSelect = (item: any, index: number)=>{ + props.onSelect&&props.onSelect(item,index); + if(focusBorderEnabled){ + setFocusId(item?.id); + } + } + // 删除地址 + const {fetchData: deleteFetch} = addressDeleteApi() + const handleDelete = (item:any)=>{ + showModal(({ + title: "提示", + content: "是否删除地址？", + async success(ev){ + if(ev.confirm){ + const result = await deleteFetch({id:item.id}); + if(result.success){ + alert.success("删除成功"); + getData(); + }else{ + alert.success(result.msg); + } + } + } + })) + } return ( @@ -40,7 +87,7 @@ const AddressList = memo((props:Params)=>{ // data.length>0? // data.map((item,index)=>{ return( - props.onSelect&&props.onSelect(item,index)} className={`address-list ${item.is_default&&'address-active'}`}> + handleDelete(item)} onClick={()=>handleSelect(item,index)} className={`address-list ${focusId==item.id&&'address-active'}`}> {item.name} { @@ -53,7 +100,7 @@ const AddressList = memo((props:Params)=>{ {/* **省**市**区**街道****仓库 */} {item.province_name+item.city_name+item.district_name} {item.address_detail} { - item.is_default&&{item.phone} + item.is_default&&{item.phone.replace(item.phone.substring(3,7), "****")} } @@ -63,7 +110,7 @@ const AddressList = memo((props:Params)=>{ ); }): - 暂未添加地址 + addButtonEnabled&&暂未添加地址 } 添加收货地址 diff --git a/src/components/searchInput/index.tsx b/src/components/searchInput/index.tsx index 35d507c..4be58c4 100644 --- a/src/components/searchInput/index.tsx +++ b/src/components/searchInput/index.tsx @@ -33,7 +33,6 @@ export default memo((props: Params) => { } return {} }, [showBorder]) - console.log('searchInput::') return ( {showTitle&&{title}} diff --git a/src/pages/addressAdd/index.tsx b/src/pages/addressAdd/index.tsx index 2cbc3a4..0399a4d 100644 --- a/src/pages/addressAdd/index.tsx +++ b/src/pages/addressAdd/index.tsx @@ -6,7 +6,7 @@ import { Button, Input, Text, Textarea, View } from "@tarojs/components" import Taro, { setNavigationBarTitle, useRouter } from "@tarojs/taro" import { useEffect, useState } from "react" import "./index.scss" -import {addressAddApi, addressDetailApi} from "@/api/addressManager" +import {addressAddApi, addressDetailApi,addressEditApi} from "@/api/addressManager" export default ()=>{ const [showSiteModal, setShowSiteModal] = useState(false); @@ -15,7 +15,7 @@ export default ()=>{ if(type=="add"){ setNavigationBarTitle({title:"新增收货地址"}) }else{ - // initalFormData(); + initalFormData(); setNavigationBarTitle({title:"编辑收货地址"}) } },[]) @@ -23,19 +23,24 @@ export default ()=>{ const {fetchData: getFromData} = addressDetailApi() const initalFormData = async ()=>{ const detail = await getFromData({id}); - const siteArray = [] - // setFormData({ - // name: detail.data.name, - // phone: detail.data.phone, - // site: detail.data., - // siteArray: [], - // district_id: detail.data.district_id, - // address_detail: detail.data.address_detail, - // is_default: false - // }) + const { province_id,province_name,city_id,city_name,district_id,district_name } = detail.data; + const siteArray = [{id: province_id, name: province_name}]; + city_id&&siteArray.push({id: city_id, name: city_name}); + district_id&&siteArray.push({id: district_id, name: district_name}); + setFormData({ + name: detail.data.name, + phone: detail.data.phone, + site: siteArray.map(item=>item.name).join(" "), + siteArray: siteArray as any, + district_id: detail.data.district_id, + address_detail: detail.data.address_detail, + is_default: detail.data.is_default, + id: detail.data.id, + }) } - const {fetchData, state} = addressAddApi() + const {fetchData} = addressAddApi() + const {fetchData: editFetch} = addressEditApi() // 保存 const [formData, setFormData] = useState({ name: "", @@ -44,7 +49,8 @@ export default ()=>{ siteArray: [], district_id:"", address_detail: "", - is_default: false + is_default: false, + id: 0 }) const rules = { name: [{ @@ -62,20 +68,27 @@ export default ()=>{ } const handleSave = ()=>{ retrieval(formData, rules).then(async ()=>{ - const result = await fetchData({ + const result = type=="add"?await fetchData({ name: formData.name, phone:formData.phone, - site:formData.site, district_id:formData.district_id, address_detail: formData.address_detail, is_default: formData.is_default + }):await editFetch({ + name: formData.name, + phone:formData.phone, + district_id:formData.district_id, + address_detail: formData.address_detail, + is_default: formData.is_default, + id: formData.id }); if(result.success){ - alert.success("保存成功") + Taro.eventCenter.trigger("addressList:refresh"); + Taro.navigateBack(); + alert.success("保存成功"); }else{ alert.error(result.msg); } - // Taro.navigateBack(); }).catch((message)=>{ alert.none(message) }) @@ -89,8 +102,6 @@ export default ()=>{ },[formData]) // 设置选择地址 const handleSetSite = (ev:any)=>{ - console.log(ev); - if(ev.length>=3){ setFormData({ ...formData, @@ -122,7 +133,7 @@ export default ()=>{ -
setShowSiteModal(false)} show={showSiteModal}/> +
setShowSiteModal(false)} show={showSiteModal}/> ) } diff --git a/src/pages/classList/index.tsx b/src/pages/classList/index.tsx index bb497cc..302ce6a 100644 --- a/src/pages/classList/index.tsx +++ b/src/pages/classList/index.tsx @@ -3,12 +3,12 @@ import classnames from "classnames"; import Search from '@/components/search' import Product from '@/components/product' import InfiniteScroll from '@/components/infiniteScroll' -import Popup from "@/components/popup"; import styles from './index.module.scss' -import { useState } from "react"; +import { useEffect, useState } from "react"; import Filter from "./components/filter"; -import Tabs from "@/components/tabs"; import SortBtn from "@/components/sortBtn"; +import SelectData from "../searchList/components/selectData"; +import {GetSubjectList} from '@/api/subjectMaterial' export default () => { const [showPopup, setShowPopup] = useState(false) @@ -23,6 +23,19 @@ export default () => { {title: '系列', value:9}, {title: '系列', value:10}, ]) + + useEffect(() => { + getSubjectList() + }, []) + + //获取专题 + const [list, setList] = useState([]) + const {fetchData} = GetSubjectList() + const getSubjectList = async () => { + let res = await fetchData() + console.log('res::', res) + } + return ( @@ -40,7 +53,7 @@ export default () => { - + diff --git a/src/pages/editOrder/components/shipmentMode/index.module.scss b/src/pages/editOrder/components/shipmentMode/index.module.scss new file mode 100644 index 0000000..5f818f9 --- /dev/null +++ b/src/pages/editOrder/components/shipmentMode/index.module.scss @@ -0,0 +1,33 @@ + + .order_title{ + display: flex; + align-items: center; + padding: 20px 30px; + box-sizing: border-box; + background-color: #fff; + height: 116px; + border-radius: 20px; + margin-top: 20px; + text{ + flex:1; + font-size: $font_size; + font-weight: 700; + } + .order_status{ + background-color: #F0F0F0; + width: 148px; + height: 55px; + color: $color_font_three; + text-align: center; + line-height: 55px; + font-size: $font_size_medium; + border-radius: 30px; + &:nth-last-child(1) { + margin-left: 20px; + } + } + .order_status_selected{ + color: $color_main; + border: 1px solid $color_main; + } + } \ No newline at end of file diff --git a/src/pages/editOrder/components/shipmentMode/index.tsx b/src/pages/editOrder/components/shipmentMode/index.tsx new file mode 100644 index 0000000..235591c --- /dev/null +++ b/src/pages/editOrder/components/shipmentMode/index.tsx @@ -0,0 +1,28 @@ +import { Text, View } from "@tarojs/components" +import styles from './index.module.scss' +import classnames from "classnames"; +import { memo, useRef, useState } from "react"; + +type Param = { + onSelect?:(val:number) => void +} +export default memo(({onSelect}: Param) => { + //收货方法 1:自提，2：物流 + const shipmentMode = useRef([ + {value:1, label:'上门自提', selected:false}, + {value:2, label:'物流', selected:false} + ]) + const [selectValue, setSelectValue] = useState() + const selectShipmentMode = (value) => { + setSelectValue(() => value) + onSelect?.(value) + } + return ( + + 收货方式 + {shipmentMode.current.map(item => { + return selectShipmentMode(item.value)}>{item.label} + })} + + ) +}) \ No newline at end of file diff --git a/src/pages/editOrder/index.config.ts b/src/pages/editOrder/index.config.ts new file mode 100644 index 0000000..1f88149 --- /dev/null +++ b/src/pages/editOrder/index.config.ts @@ -0,0 +1,5 @@ +export default { + navigationBarTitleText: '电子商城', + enablePullDownRefresh: true, + backgroundTextStyle: 'dark' +} diff --git a/src/pages/editOrder/index.module.scss b/src/pages/editOrder/index.module.scss new file mode 100644 index 0000000..e1ccdaa --- /dev/null +++ b/src/pages/editOrder/index.module.scss @@ -0,0 +1,86 @@ +.order_edit_main{ + min-height: 100%; + background-color:$color_bg_one; + padding-top: 20px; + display: flex; + flex-direction: column; + box-sizing: border-box; + .title_msg{ + display: flex; + align-items: center; + padding: 20px; + background-color: #fff; + margin: 0 20px; + border-radius: 20px; + .miconfont{ + font-size: 50px; + color: $color_main; + } + .title_msg_con{ + font-size: 23px; + display: flex; + flex-direction: column; + margin-left: 30px; + text{ + &:nth-child(1) { + color: $color_main; + } + &:nth-child(2) { + color: $color_font_three; + } + } + } + } + + .shipmentMode_con{ + margin: 0 20px; + } + .old_address{ + display: flex; + flex-direction: column; + padding: 30px 20px 60px 20px; + box-sizing: border-box; + .old_address_text{ + font-weight: 700; + &:nth-of-type(1) { + padding-bottom: 30px; + font-size: $font_size_big; + } + &:nth-of-type(2) { + padding-bottom: 30px; + font-size: $font_size; + } + } + .userInfo{ + display: flex; + font-size: $font_size; + color: $color_font_three; + align-items: center; + .userInfo_text{ + font-size: $font_size; + &:nth-child(2) { + padding-left: 20px; + } + } + + } + } + .select_address_con{ + flex:1; + display: flex; + flex-direction: column; + align-items: center; + background-color: #fff; + border-radius: 30px 30px 0px 0px; + .title{ + font-size: $font_size; + font-weight: 700; + margin-top: 30px; + } + .address_list{ + flex:1; + height: 0; + margin-top: 50px; + } + } +} \ No newline at end of file diff --git a/src/pages/editOrder/index.tsx b/src/pages/editOrder/index.tsx new file mode 100644 index 0000000..3f89bfb --- /dev/null +++ b/src/pages/editOrder/index.tsx @@ -0,0 +1,47 @@ +import { Text, View } from "@tarojs/components" +import styles from './index.module.scss' +import classnames from "classnames"; +import { useCallback, useRef, useState } from "react"; +import ShipmentMode from "./components/shipmentMode"; +import AddressList from "@/components/AddressList"; +export default () => { + //提交的数据 + const [submitData, setSubmitData] = useState({ + address_id:0, + id:0, + shipment_mode: 0 + }) + + //获取收货方法 + const getShipmentMode = useCallback((num) => { + setSubmitData((val) => ({...val, shipment_mode:num})) + }, []) + return ( + + + + + 修改收货地址可能会影响发货时效 + 若商品已发货，则不能修改 + + + + + + + 原地址: + 广东省 佛山市 禅城区 张槎街道 清风路1988号麦兜的大 大仓库 + + 陈先生 + 1818877790 + + + + 重新选择收货地址 + + + + + + ) +} \ No newline at end of file diff --git a/src/pages/index/index.config.ts b/src/pages/index/index.config.ts index 1f88149..a025a3d 100644 --- a/src/pages/index/index.config.ts +++ b/src/pages/index/index.config.ts @@ -1,5 +1,3 @@ export default { - navigationBarTitleText: '电子商城', - enablePullDownRefresh: true, - backgroundTextStyle: 'dark' + navigationBarTitleText: '修改地址', } diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx index 3a54772..8926571 100644 --- a/src/pages/index/index.tsx +++ b/src/pages/index/index.tsx @@ -9,11 +9,8 @@ import { goLink } from '@/common/common' import styles from './index.module.scss' import { useEffect, useRef, useState } from 'react' import Taro, { Events, useDidShow, usePullDownRefresh, useRouter } from '@tarojs/taro' -import useManualPullDownRefresh from '@/use/useManualPullDownRefresh' - import {GetProductKindListApi, GetProductListApi} from '@/api/material' import useLogin from '@/use/useLogin' -import LoadingCard from '@/components/loadingCard' export default () => { diff --git a/src/pages/order/comfirm.module.scss b/src/pages/order/comfirm.module.scss index c915acd..2858dec 100644 --- a/src/pages/order/comfirm.module.scss +++ b/src/pages/order/comfirm.module.scss @@ -41,10 +41,11 @@ display: flex; align-items: center; background-color: #fff; - padding: 0 20px; - height: 116px; + padding: 20px; + min-height: 116px; border-radius: 20px; margin-top: 20px; + box-sizing: border-box; .order_desc_con{ width: 150px; font-size: $font_size; diff --git a/src/pages/order/comfirm.tsx b/src/pages/order/comfirm.tsx index e92fabd..015ad57 100644 --- a/src/pages/order/comfirm.tsx +++ b/src/pages/order/comfirm.tsx @@ -15,6 +15,7 @@ import styles from './comfirm.module.scss' import { getParam } from "@/common/system"; import useLogin from "@/use/useLogin"; import { alert, goLink } from "@/common/common"; +import ShipmentMode from "../editOrder/components/shipmentMode"; export default () => { const {checkLogin} = useLogin() @@ -121,14 +122,9 @@ import { alert, goLink } from "@/common/common"; setSubmitOrderData((val) => ({...val, address_id:e.id})) } - //收货方法 1:自提，2：物流 - const shipmentMode = useRef([ - {value:1, label:'上门自提', selected:false}, - {value:2, label:'物流', selected:false} - ]) - const selectShipmentMode = (value) => { + const selectShipmentMode = useCallback((value) => { setSubmitOrderData((val) => ({...val, shipment_mode:value})) - } + }, []) //获取备注 const getRemark = useCallback((e) => { @@ -171,12 +167,7 @@ import { alert, goLink } from "@/common/common"; } return ( - - 收货方式 - {shipmentMode.current.map(item => { - return selectShipmentMode(item.value)}>{item.label} - })} - + getAddress(e)} defaultValue={defaultAddress}/> setShowDesc(true)}> diff --git a/src/pages/order/components/addressInfo/index.module.scss b/src/pages/order/components/addressInfo/index.module.scss index abdae24..4e9ea21 100644 --- a/src/pages/order/components/addressInfo/index.module.scss +++ b/src/pages/order/components/addressInfo/index.module.scss @@ -8,7 +8,7 @@ box-sizing: border-box; margin-top: 20px; .order_address_icon{ - font-size: 60px; + font-size: 76px; color: $color_main; } .order_address_text_con{ @@ -16,21 +16,37 @@ padding: 0 30px; box-sizing: border-box; .order_address_text_title{ - font-size: $font_size; - font-weight: 700; + font-size: $font_size_medium; + margin-top: 10px; @include common_ellipsis; } .order_address_text_name{ - margin-top: 20px; - color: $color_font_three; - font-size: $font_size_medium; + + align-items: center; text{ &:nth-child(1) { + color: #000; + font-weight: 700; + font-size: $color_font_one; margin-right: 40px; } + &:nth-child(2) { + color: $color_font_one; + font-size: $font_size_medium; + } } } } + .updateBtn{ + font-size: $font_size_medium; + color: $color_font_three; + width: 96px; + height: 52px; + border: 2px solid #dddddd; + border-radius: 28px; + text-align: center; + line-height: 52px; + } .order_address_text_no{ flex: 1; font-size: $font_size; diff --git a/src/pages/order/components/addressInfo/index.tsx b/src/pages/order/components/addressInfo/index.tsx index 7000053..e8c5276 100644 --- a/src/pages/order/components/addressInfo/index.tsx +++ b/src/pages/order/components/addressInfo/index.tsx @@ -15,11 +15,12 @@ export type AddressInfoParam = { phone: string } type Param = { - onSelect?: (val:any) => void, - defaultValue?: AddressInfoParam|null + onSelect?: (val:any) => void, //选择 + defaultValue?: AddressInfoParam|null //默认值 + disabled?: false|true //true禁用后只用于展示 } -export default memo(({onSelect, defaultValue = null}: Param) => { +export default memo(({onSelect, defaultValue = null, disabled = false}: Param) => { const [showAddressList, setShowAddressList] = useState(false) useEffect(() => { @@ -36,31 +37,40 @@ export default memo(({onSelect, defaultValue = null}: Param) => { //地址格式 const formatAddress = useMemo(() => { - if(userInfo) { - console.log('userInfo::',userInfo) + if(userInfo) return userInfo.province_name + userInfo.city_name + userInfo.district_name + userInfo.address_detail - } }, [userInfo]) + + const changeShow = () => { + if(!disabled) + setShowAddressList(() => true) + } return ( - setShowAddressList(true)}> + changeShow()}> - {!userInfo&&请选择收货地址及信息|| - - {formatAddress} - - {userInfo?.name} - {userInfo?.phone} + {!userInfo&& + <> + 请选择收货地址及信息 + + + ||<> + + + {userInfo?.name} + {userInfo?.phone} + + {formatAddress} - } - + 修改 + } - setShowAddressList(false)}> + {!disabled&& setShowAddressList(false)}> 请选择收货地址 getAddress(item)}/> - + } ) }) \ No newline at end of file diff --git a/src/pages/order/components/estimatedAmount/index.module.scss b/src/pages/order/components/estimatedAmount/index.module.scss index f12d646..c5ac9ed 100644 --- a/src/pages/order/components/estimatedAmount/index.module.scss +++ b/src/pages/order/components/estimatedAmount/index.module.scss @@ -1,23 +1,69 @@ .order_price{ - font-weight: 700; display: flex; align-items: center; + justify-content: space-between; + width: 100%; + &:nth-last-child(n+2) { + margin-bottom: 30px; + } .order_price_text{ font-size: $font_size_medium; - margin-right: 10px; + // margin-right: 10px; + display: flex; + .iconfont_msg{ + position: relative; + } + .miconfont{ + font-size: 30px; + font-weight: normal; + } + .message{ + position: absolute; + top: -50px; + background: #A8B3BD; + z-index: 9; + min-height: 50px; + border-radius: 10px; + padding: 10px; + box-sizing: border-box; + &::before{ + z-index: 1; + position: absolute; + bottom: -7px; + left: 10px; + width: 15px; + height: 15px; + content: " "; + transform: rotate(45deg); + background: #A8B3BD; + box-sizing: border-box; + } + } + } + .emphasis{ + font-weight: 700; } .order_price_num{ + color: $color_main; + font-weight: 700; text{ &:nth-child(1) { font-size: $font_size_min; } &:nth-child(2) { - font-size: $font_size_big; + font-size: 26px; } &:nth-child(3) { font-size: $font_size_medium; } } } + .emphasis_num{ + text{ + &:nth-child(2) { + font-size: $font_size_big; + } + } + } } \ No newline at end of file diff --git a/src/pages/order/components/estimatedAmount/index.tsx b/src/pages/order/components/estimatedAmount/index.tsx index 70f76c6..804e095 100644 --- a/src/pages/order/components/estimatedAmount/index.tsx +++ b/src/pages/order/components/estimatedAmount/index.tsx @@ -1,12 +1,13 @@ import { Text, View } from "@tarojs/components" -import { useCallback, useEffect, useMemo } from "react" +import { memo, useCallback, useEffect, useMemo } from "react" import {formatKbPrice} from '@/common/common' +import classnames from "classnames"; import styles from './index.module.scss' type Param = { style?: Object, number?: number } -export default ({style, number = 0}:Param) => { +export default memo(({style, number = 0}:Param) => { const priceDom = useCallback(() => { let res = number.toFixed(2).split('.') let int_num = parseInt(res[0]) + '' @@ -20,11 +21,43 @@ export default ({style, number = 0}:Param) => { ) }, [number]) return ( - - 预估金额 - - {priceDom()} + <> + + + 合计金额 + + + {/* 123123123121212312312312312 */} + + + + {priceDom()} + - + + + 空差优惠 + + + {/* 123123123121212312312312312 */} + + + + {priceDom()} + + + + + 应付金额 + + + {/* 123123123121212312312312312 */} + + + + {priceDom()} + + + ) -} \ No newline at end of file +}) \ No newline at end of file diff --git a/src/pages/order/components/kindList/index.tsx b/src/pages/order/components/kindList/index.tsx index 130f837..7dc81eb 100644 --- a/src/pages/order/components/kindList/index.tsx +++ b/src/pages/order/components/kindList/index.tsx @@ -65,7 +65,6 @@ export default memo(({value}:{value:OrderParam|null}) => { } - {/* （按照25kg/条, 预估金额） */} diff --git a/src/pages/order/components/orderState/index.module.scss b/src/pages/order/components/orderState/index.module.scss index e32d18e..1b67b56 100644 --- a/src/pages/order/components/orderState/index.module.scss +++ b/src/pages/order/components/orderState/index.module.scss @@ -30,10 +30,10 @@ background-color: $color_main; } .order_status_line{ - border-left: 4px solid $color_main; + border-left: 2px solid $color_main; height: 100%; top: 10px; - left: 10px; + left: 13px; position: absolute; z-index: 1; } diff --git a/src/pages/order/components/orderState/index.tsx b/src/pages/order/components/orderState/index.tsx index 3095e2b..d121e7e 100644 --- a/src/pages/order/components/orderState/index.tsx +++ b/src/pages/order/components/orderState/index.tsx @@ -1,8 +1,7 @@ -import { Text, View } from "@tarojs/components" +import { Image, Text, View } from "@tarojs/components" import { memo, useState } from "react" import styles from './index.module.scss' import classnames from "classnames"; - type Param = { title: string, time: string, @@ -37,6 +36,9 @@ export default memo(({list = []}:{list?:Param[]}) => { {showMore&&'收起物流详情'||'点击查看更多物流详情'} } + + + ) }) \ No newline at end of file diff --git a/src/pages/order/components/shipmentMode/index.module.scss b/src/pages/order/components/shipmentMode/index.module.scss new file mode 100644 index 0000000..5f818f9 --- /dev/null +++ b/src/pages/order/components/shipmentMode/index.module.scss @@ -0,0 +1,33 @@ + + .order_title{ + display: flex; + align-items: center; + padding: 20px 30px; + box-sizing: border-box; + background-color: #fff; + height: 116px; + border-radius: 20px; + margin-top: 20px; + text{ + flex:1; + font-size: $font_size; + font-weight: 700; + } + .order_status{ + background-color: #F0F0F0; + width: 148px; + height: 55px; + color: $color_font_three; + text-align: center; + line-height: 55px; + font-size: $font_size_medium; + border-radius: 30px; + &:nth-last-child(1) { + margin-left: 20px; + } + } + .order_status_selected{ + color: $color_main; + border: 1px solid $color_main; + } + } \ No newline at end of file diff --git a/src/pages/order/components/shipmentMode/index.tsx b/src/pages/order/components/shipmentMode/index.tsx new file mode 100644 index 0000000..235591c --- /dev/null +++ b/src/pages/order/components/shipmentMode/index.tsx @@ -0,0 +1,28 @@ +import { Text, View } from "@tarojs/components" +import styles from './index.module.scss' +import classnames from "classnames"; +import { memo, useRef, useState } from "react"; + +type Param = { + onSelect?:(val:number) => void +} +export default memo(({onSelect}: Param) => { + //收货方法 1:自提，2：物流 + const shipmentMode = useRef([ + {value:1, label:'上门自提', selected:false}, + {value:2, label:'物流', selected:false} + ]) + const [selectValue, setSelectValue] = useState() + const selectShipmentMode = (value) => { + setSelectValue(() => value) + onSelect?.(value) + } + return ( + + 收货方式 + {shipmentMode.current.map(item => { + return selectShipmentMode(item.value)}>{item.label} + })} + + ) +}) \ No newline at end of file diff --git a/src/pages/order/components/weightMemo/index.module.scss b/src/pages/order/components/weightMemo/index.module.scss new file mode 100644 index 0000000..3c74511 --- /dev/null +++ b/src/pages/order/components/weightMemo/index.module.scss @@ -0,0 +1,39 @@ + +.weight_memo{ + background-color: #fff; + border-radius: 20px; + padding: 0 20px; + .weight_memo_item{ + display: flex; + justify-content: space-between; + height: 130px; + &:nth-child(1) { + border-bottom: 1px solid #f3f3f3; + } + .title, .desc{ + display: flex; + align-items: center; + } + .title { + font-size: $font_size; + font-weight: 700; + } + .desc{ + color: $color_font_two; + font-size: $font_size_medium; + } + .miconfont_check, .miconfont_custom{ + font-size: 37px; + color: $color_main; + font-weight: normal; + padding-right: 10px; + } + .miconfont_custom{ + color:#FFC300; + } + .miconfont_more{ + font-size: 30px; + padding-left: 10px; + } + } +} \ No newline at end of file diff --git a/src/pages/order/components/weightMemo/index.tsx b/src/pages/order/components/weightMemo/index.tsx new file mode 100644 index 0000000..7cbfd13 --- /dev/null +++ b/src/pages/order/components/weightMemo/index.tsx @@ -0,0 +1,36 @@ +import Popup from "@/components/popup" +import { Text, Textarea, View } from "@tarojs/components" +import { memo, useCallback, useState } from "react" +import styles from './index.module.scss' +import classnames from "classnames"; + +type Param = { + onCheck?: () => void + onCustom?: () => void +} +export default memo(({onCheck, onCustom}:Param) => { + return ( + + onCheck?.()}> + + + 陆盈纺织 + + + 查看原码单 + + + + onCustom?.()}> + + + 我的码单 + + + 自定义 + + + + + ) +}) \ No newline at end of file diff --git a/src/pages/order/index.module.scss b/src/pages/order/index.module.scss index d6246e0..bc7da0e 100644 --- a/src/pages/order/index.module.scss +++ b/src/pages/order/index.module.scss @@ -37,19 +37,24 @@ display: flex; align-items: center; background-color: #fff; - padding: 0 20px; - height: 116px; + padding: 20px; + min-height: 116px; border-radius: 20px; margin-top: 20px; + box-sizing: border-box; .order_desc_con{ - flex:1; + width: 150px; font-size: $font_size; font-weight: 700; } - .order_desc_text{ + .order_desc_text, .order_desc_text_hint{ font-size: $font_size_medium; color: $color_font_two; margin-right: 10px; + flex:1; + } + .order_desc_text_hint{ + text-align: right; } .miconfont{ font-size: 20px; @@ -61,7 +66,7 @@ position: fixed; bottom: 0; left: 0; - justify-content: space-between; + justify-content: flex-end; width: 100%; height: 175px; align-items: center; @@ -74,13 +79,12 @@ .order_btn { width: 250px; height: 90px; - opacity: 0.6; - background: linear-gradient(38deg,#007aff, #4fa6ff 100%, #68b4ff 100%); + border: 2px solid #dddddd; border-radius: 46px; display: flex; justify-content: center; align-items: center; - color: #fff; + color: $color_font_three; } .order_number_desc{ font-size: $font_size_medium; @@ -115,4 +119,8 @@ } } + .weight_memo_con{ + margin-bottom: 20px; + } + } \ No newline at end of file diff --git a/src/pages/order/index.tsx b/src/pages/order/index.tsx index ee6ba53..2d743a0 100644 --- a/src/pages/order/index.tsx +++ b/src/pages/order/index.tsx @@ -1,4 +1,5 @@ import { GetSaleOrderDetailApi } from "@/api/order"; +import { goLink } from "@/common/common"; import { formatDateTime, formatPriceDiv } from "@/common/fotmat"; import Popup from "@/components/popup"; import SearchInput from "@/components/searchInput"; @@ -7,10 +8,10 @@ import Taro, { useRouter } from "@tarojs/taro"; import classnames from "classnames"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import AddressInfo from "./components/addressInfo"; -import EstimatedAmount from "./components/estimatedAmount"; import KindList from "./components/kindList"; import OrderState from "./components/orderState"; import Remark from "./components/remark"; +import WeightMemo from "./components/weightMemo"; import styles from './index.module.scss' export default () => { @@ -58,7 +59,7 @@ import styles from './index.module.scss' if (orderDetail.sale_mode == 1 || orderDetail.sale_mode == 2) num_count = Number(num_count / 100); setFormatDetailOrder({ estimate_amount: orderDetail.estimate_amount, //预估金额 - estimate_weight: orderDetail.estimate_weight, + estimate_weight: orderDetail.estimate_weight, sale_mode: orderDetail.sale_mode, sale_mode_name: orderDetail.sale_mode_name, colo_count: orderDetail.color_list.length, //颜色数量 @@ -76,7 +77,7 @@ import styles from './index.module.scss' //复制功能 const clipboardData = () => { Taro.setClipboardData({ - data: '123123121321', + data: orderDetail?.order_no||'', success: function (res) { Taro.showToast({ icon: 'none', @@ -110,12 +111,20 @@ import styles from './index.module.scss' setShowDesc(() => false) }, []) + //修改地址 + const changeAddress = useCallback(() => { + goLink('/pages/editOrder/index', {id: router.params.id}) + }, [router.params]) return ( + + + - + changeAddress()}> + + - 订单信息 @@ -127,6 +136,9 @@ import styles from './index.module.scss' {formatDateTime(orderDetail?.create_time)} + + {formatDateTime(orderDetail?.create_time)} + setShowDesc(true)}> 订单备注 @@ -137,7 +149,6 @@ import styles from './index.module.scss' - 取消订单 setShowDesc(false)} > diff --git a/src/styles/download (2)/font_2987621_l1qavt5630a/demo.css b/src/styles/download (2)/font_2987621_l1qavt5630a/demo.css deleted file mode 100644 index a67054a..0000000 --- a/src/styles/download (2)/font_2987621_l1qavt5630a/demo.css +++ /dev/null @@ -1,539 +0,0 @@ -/* Logo 字体 */ -@font-face { - font-family: "iconfont logo"; - src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834'); - src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'), - url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'), - url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'), - url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg'); -} - -.logo { - font-family: "iconfont logo"; - font-size: 160px; - font-style: normal; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -/* tabs */ -.nav-tabs { - position: relative; -} - -.nav-tabs .nav-more { - position: absolute; - right: 0; - bottom: 0; - height: 42px; - line-height: 42px; - color: #666; -} - -#tabs { - border-bottom: 1px solid #eee; -} - -#tabs li { - cursor: pointer; - width: 100px; - height: 40px; - line-height: 40px; - text-align: center; - font-size: 16px; - border-bottom: 2px solid transparent; - position: relative; - z-index: 1; - margin-bottom: -1px; - color: #666; -} - - -#tabs .active { - border-bottom-color: #f00; - color: #222; -} - -.tab-container .content { - display: none; -} - -/* 页面布局 */ -.main { - padding: 30px 100px; - width: 960px; - margin: 0 auto; -} - -.main .logo { - color: #333; - text-align: left; - margin-bottom: 30px; - line-height: 1; - height: 110px; - margin-top: -50px; - overflow: hidden; - *zoom: 1; -} - -.main .logo a { - font-size: 160px; - color: #333; -} - -.helps { - margin-top: 40px; -} - -.helps pre { - padding: 20px; - margin: 10px 0; - border: solid 1px #e7e1cd; - background-color: #fffdef; - overflow: auto; -} - -.icon_lists { - width: 100% !important; - overflow: hidden; - *zoom: 1; -} - -.icon_lists li { - width: 100px; - margin-bottom: 10px; - margin-right: 20px; - text-align: center; - list-style: none !important; - cursor: default; -} - -.icon_lists li .code-name { - line-height: 1.2; -} - -.icon_lists .icon { - display: block; - height: 100px; - line-height: 100px; - font-size: 42px; - margin: 10px auto; - color: #333; - -webkit-transition: font-size 0.25s linear, width 0.25s linear; - -moz-transition: font-size 0.25s linear, width 0.25s linear; - transition: font-size 0.25s linear, width 0.25s linear; -} - -.icon_lists .icon:hover { - font-size: 100px; -} - -.icon_lists .svg-icon { - /* 通过设置 font-size 来改变图标大小 */ - width: 1em; - /* 图标和文字相邻时，垂直对齐 */ - vertical-align: -0.15em; - /* 通过设置 color 来改变 SVG 的颜色/fill */ - fill: currentColor; - /* path 和 stroke 溢出 viewBox 部分在 IE 下会显示 - normalize.css 中也包含这行 */ - overflow: hidden; -} - -.icon_lists li .name, -.icon_lists li .code-name { - color: #666; -} - -/* markdown 样式 */ -.markdown { - color: #666; - font-size: 14px; - line-height: 1.8; -} - -.highlight { - line-height: 1.5; -} - -.markdown img { - vertical-align: middle; - max-width: 100%; -} - -.markdown h1 { - color: #404040; - font-weight: 500; - line-height: 40px; - margin-bottom: 24px; -} - -.markdown h2, -.markdown h3, -.markdown h4, -.markdown h5, -.markdown h6 { - color: #404040; - margin: 1.6em 0 0.6em 0; - font-weight: 500; - clear: both; -} - -.markdown h1 { - font-size: 28px; -} - -.markdown h2 { - font-size: 22px; -} - -.markdown h3 { - font-size: 16px; -} - -.markdown h4 { - font-size: 14px; -} - -.markdown h5 { - font-size: 12px; -} - -.markdown h6 { - font-size: 12px; -} - -.markdown hr { - height: 1px; - border: 0; - background: #e9e9e9; - margin: 16px 0; - clear: both; -} - -.markdown p { - margin: 1em 0; -} - -.markdown>p, -.markdown>blockquote, -.markdown>.highlight, -.markdown>ol, -.markdown>ul { - width: 80%; -} - -.markdown ul>li { - list-style: circle; -} - -.markdown>ul li, -.markdown blockquote ul>li { - margin-left: 20px; - padding-left: 4px; -} - -.markdown>ul li p, -.markdown>ol li p { - margin: 0.6em 0; -} - -.markdown ol>li { - list-style: decimal; -} - -.markdown>ol li, -.markdown blockquote ol>li { - margin-left: 20px; - padding-left: 4px; -} - -.markdown code { - margin: 0 3px; - padding: 0 5px; - background: #eee; - border-radius: 3px; -} - -.markdown strong, -.markdown b { - font-weight: 600; -} - -.markdown>table { - border-collapse: collapse; - border-spacing: 0px; - empty-cells: show; - border: 1px solid #e9e9e9; - width: 95%; - margin-bottom: 24px; -} - -.markdown>table th { - white-space: nowrap; - color: #333; - font-weight: 600; -} - -.markdown>table th, -.markdown>table td { - border: 1px solid #e9e9e9; - padding: 8px 16px; - text-align: left; -} - -.markdown>table th { - background: #F7F7F7; -} - -.markdown blockquote { - font-size: 90%; - color: #999; - border-left: 4px solid #e9e9e9; - padding-left: 0.8em; - margin: 1em 0; -} - -.markdown blockquote p { - margin: 0; -} - -.markdown .anchor { - opacity: 0; - transition: opacity 0.3s ease; - margin-left: 8px; -} - -.markdown .waiting { - color: #ccc; -} - -.markdown h1:hover .anchor, -.markdown h2:hover .anchor, -.markdown h3:hover .anchor, -.markdown h4:hover .anchor, -.markdown h5:hover .anchor, -.markdown h6:hover .anchor { - opacity: 1; - display: inline-block; -} - -.markdown>br, -.markdown>p>br { - clear: both; -} - - -.hljs { - display: block; - background: white; - padding: 0.5em; - color: #333333; - overflow-x: auto; -} - -.hljs-comment, -.hljs-meta { - color: #969896; -} - -.hljs-string, -.hljs-variable, -.hljs-template-variable, -.hljs-strong, -.hljs-emphasis, -.hljs-quote { - color: #df5000; -} - -.hljs-keyword, -.hljs-selector-tag, -.hljs-type { - color: #a71d5d; -} - -.hljs-literal, -.hljs-symbol, -.hljs-bullet, -.hljs-attribute { - color: #0086b3; -} - -.hljs-section, -.hljs-name { - color: #63a35c; -} - -.hljs-tag { - color: #333333; -} - -.hljs-title, -.hljs-attr, -.hljs-selector-id, -.hljs-selector-class, -.hljs-selector-attr, -.hljs-selector-pseudo { - color: #795da3; -} - -.hljs-addition { - color: #55a532; - background-color: #eaffea; -} - -.hljs-deletion { - color: #bd2c00; - background-color: #ffecec; -} - -.hljs-link { - text-decoration: underline; -} - -/* 代码高亮 */ -/* PrismJS 1.15.0 -https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ -/** - * prism.js default theme for JavaScript, CSS and HTML - * Based on dabblet (http://dabblet.com) - * @author Lea Verou - */ -code[class*="language-"], -pre[class*="language-"] { - color: black; - background: none; - text-shadow: 0 1px white; - font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; - text-align: left; - white-space: pre; - word-spacing: normal; - word-break: normal; - word-wrap: normal; - line-height: 1.5; - - -moz-tab-size: 4; - -o-tab-size: 4; - tab-size: 4; - - -webkit-hyphens: none; - -moz-hyphens: none; - -ms-hyphens: none; - hyphens: none; -} - -pre[class*="language-"]::-moz-selection, -pre[class*="language-"] ::-moz-selection, -code[class*="language-"]::-moz-selection, -code[class*="language-"] ::-moz-selection { - text-shadow: none; - background: #b3d4fc; -} - -pre[class*="language-"]::selection, -pre[class*="language-"] ::selection, -code[class*="language-"]::selection, -code[class*="language-"] ::selection { - text-shadow: none; - background: #b3d4fc; -} - -@media print { - - code[class*="language-"], - pre[class*="language-"] { - text-shadow: none; - } -} - -/* Code blocks */ -pre[class*="language-"] { - padding: 1em; - margin: .5em 0; - overflow: auto; -} - -:not(pre)>code[class*="language-"], -pre[class*="language-"] { - background: #f5f2f0; -} - -/* Inline code */ -:not(pre)>code[class*="language-"] { - padding: .1em; - border-radius: .3em; - white-space: normal; -} - -.token.comment, -.token.prolog, -.token.doctype, -.token.cdata { - color: slategray; -} - -.token.punctuation { - color: #999; -} - -.namespace { - opacity: .7; -} - -.token.property, -.token.tag, -.token.boolean, -.token.number, -.token.constant, -.token.symbol, -.token.deleted { - color: #905; -} - -.token.selector, -.token.attr-name, -.token.string, -.token.char, -.token.builtin, -.token.inserted { - color: #690; -} - -.token.operator, -.token.entity, -.token.url, -.language-css .token.string, -.style .token.string { - color: #9a6e3a; - background: hsla(0, 0%, 100%, .5); -} - -.token.atrule, -.token.attr-value, -.token.keyword { - color: #07a; -} - -.token.function, -.token.class-name { - color: #DD4A68; -} - -.token.regex, -.token.important, -.token.variable { - color: #e90; -} - -.token.important, -.token.bold { - font-weight: bold; -} - -.token.italic { - font-style: italic; -} - -.token.entity { - cursor: help; -} diff --git a/src/styles/download (2)/font_2987621_l1qavt5630a/demo_index.html b/src/styles/download (2)/font_2987621_l1qavt5630a/demo_index.html deleted file mode 100644 index 5debfad..0000000 --- a/src/styles/download (2)/font_2987621_l1qavt5630a/demo_index.html +++ /dev/null @@ -1,901 +0,0 @@ - - - - - iconfont Demo - - - - - - - - - - - - - -
-

- - -

-
-
    -
  • Unicode
    • -
  • Font class
    • -
  • Symbol
    • -
- - 查看项目 - -
-
-
-
    - -
  • - -
    导航
    -
    &#xe664;
    -
    • - -
  • - -
    删除
    -
    &#xe663;
    -
    • - -
  • - -
    已发货
    -
    &#xe65b;
    -
    • - -
  • - -
    待配布
    -
    &#xe662;
    -
    • - -
  • - -
    邀请团队
    -
    &#xe65a;
    -
    • - -
  • - -
    退款、售后
    -
    &#xe65c;
    -
    • - -
  • - -
    待付款
    -
    &#xe65d;
    -
    • - -
  • - -
    设置
    -
    &#xe65e;
    -
    • - -
  • - -
    颜色对比
    -
    &#xe65f;
    -
    • - -
  • - -
    待发货
    -
    &#xe660;
    -
    • - -
  • - -
    包裹
    -
    &#xe661;
    -
    • - -
  • - -
    tick-pressed
    -
    &#xe652;
    -
    • - -
  • - -
    我的-pressed
    -
    &#xe655;
    -
    • - -
  • - -
    分类-pressed
    -
    &#xe656;
    -
    • - -
  • - -
    搜索
    -
    &#xe647;
    -
    • - -
  • - -
    分享
    -
    &#xe648;
    -
    • - -
  • - -
    筛选
    -
    &#xe649;
    -
    • - -
  • - -
    购物车
    -
    &#xe64a;
    -
    • - -
  • - -
    清空
    -
    &#xe64c;
    -
    • - -
  • - -
    加
    -
    &#xe64d;
    -
    • - -
  • - -
    减
    -
    &#xe64e;
    -
    • - -
  • - -
    收藏-pressed
    -
    &#xe64f;
    -
    • - -
  • - -
    收藏
    -
    &#xe650;
    -
    • - -
  • - -
    phone
    -
    &#xe651;
    -
    • - -
  • - -
    tick
    -
    &#xe653;
    -
    • - -
  • - -
    more,back
    -
    &#xe654;
    -
    • - -
  • - -
    分类
    -
    &#xe657;
    -
    • - -
  • - -
    编辑
    -
    &#xe658;
    -
    • - -
  • - -
    我的
    -
    &#xe659;
    -
    • - -
  • - -
    排序,升序
    -
    &#xea4c;
    -
    • - -
  • - -
    排序,降序
    -
    &#xea4d;
    -
    • - -
-
-

Unicode 引用

-
- -

Unicode 是字体在网页端最原始的应用方式，特点是：

-
    -
  • 支持按字体的方式去动态调整图标大小，颜色等等。
    • -
  • 默认情况下不支持多色，直接添加多色图标会自动去色。
    • -
-
-

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

-
-

Unicode 使用步骤如下：

-

第一步：拷贝项目下面生成的 @font-face

-
@font-face {
-  font-family: 'iconfont';
-  src: url('iconfont.woff2?t=1652427368246') format('woff2'),
-       url('iconfont.woff?t=1652427368246') format('woff'),
-       url('iconfont.ttf?t=1652427368246') format('truetype');
-}
-
-

第二步：定义使用 iconfont 的样式

-
.iconfont {
-  font-family: "iconfont" !important;
-  font-size: 16px;
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-

第三步：挑选相应图标并获取字体编码，应用于页面

-
-<span class="iconfont">&#x33;</span>
-
-
-

"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

-
-
-
-
-
    - -
  • - -
    - 导航 -
    -
    .icon-daohang -
    -
    • - -
  • - -
    - 删除 -
    -
    .icon-shanchu -
    -
    • - -
  • - -
    - 已发货 -
    -
    .icon-yifahuo -
    -
    • - -
  • - -
    - 待配布 -
    -
    .icon-daipeibu -
    -
    • - -
  • - -
    - 邀请团队 -
    -
    .icon-yaoqingtuandui -
    -
    • - -
  • - -
    - 退款、售后 -
    -
    .icon-a-tuikuanshouhou -
    -
    • - -
  • - -
    - 待付款 -
    -
    .icon-daifukuan -
    -
    • - -
  • - -
    - 设置 -
    -
    .icon-shezhi -
    -
    • - -
  • - -
    - 颜色对比 -
    -
    .icon-yanseduibi -
    -
    • - -
  • - -
    - 待发货 -
    -
    .icon-daifahuo -
    -
    • - -
  • - -
    - 包裹 -
    -
    .icon-baoguo -
    -
    • - -
  • - -
    - tick-pressed -
    -
    .icon-tick-pressed -
    -
    • - -
  • - -
    - 我的-pressed -
    -
    .icon-wode-pressed -
    -
    • - -
  • - -
    - 分类-pressed -
    -
    .icon-fenlei-pressed -
    -
    • - -
  • - -
    - 搜索 -
    -
    .icon-sousuo -
    -
    • - -
  • - -
    - 分享 -
    -
    .icon-fenxiang -
    -
    • - -
  • - -
    - 筛选 -
    -
    .icon-shaixuan -
    -
    • - -
  • - -
    - 购物车 -
    -
    .icon-gouwuche -
    -
    • - -
  • - -
    - 清空 -
    -
    .icon-qingkong -
    -
    • - -
  • - -
    - 加 -
    -
    .icon-jia -
    -
    • - -
  • - -
    - 减 -
    -
    .icon-jian -
    -
    • - -
  • - -
    - 收藏-pressed -
    -
    .icon-shoucang-pressed -
    -
    • - -
  • - -
    - 收藏 -
    -
    .icon-shoucang -
    -
    • - -
  • - -
    - phone -
    -
    .icon-phone -
    -
    • - -
  • - -
    - tick -
    -
    .icon-tick -
    -
    • - -
  • - -
    - more,back -
    -
    .icon-a-moreback -
    -
    • - -
  • - -
    - 分类 -
    -
    .icon-fenlei -
    -
    • - -
  • - -
    - 编辑 -
    -
    .icon-bianji -
    -
    • - -
  • - -
    - 我的 -
    -
    .icon-wode -
    -
    • - -
  • - -
    - 排序,升序 -
    -
    .icon-sort-up-full -
    -
    • - -
  • - -
    - 排序,降序 -
    -
    .icon-sort-down-full -
    -
    • - -
-
-

font-class 引用

-
- -

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

-

与 Unicode 使用方式相比，具有如下特点：

-
    -
  • 相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
    • -
  • 因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。
    • -
-

使用步骤如下：

-

第一步：引入项目下面生成的 fontclass 代码：

-
<link rel="stylesheet" href="./iconfont.css">
-
-

第二步：挑选相应图标并获取类名，应用于页面：

-
<span class="iconfont icon-xxx"></span>
-
-
-

" - iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。

-
-
-
-
-
    - -
  • - -
    导航
    -
    #icon-daohang
    -
    • - -
  • - -
    删除
    -
    #icon-shanchu
    -
    • - -
  • - -
    已发货
    -
    #icon-yifahuo
    -
    • - -
  • - -
    待配布
    -
    #icon-daipeibu
    -
    • - -
  • - -
    邀请团队
    -
    #icon-yaoqingtuandui
    -
    • - -
  • - -
    退款、售后
    -
    #icon-a-tuikuanshouhou
    -
    • - -
  • - -
    待付款
    -
    #icon-daifukuan
    -
    • - -
  • - -
    设置
    -
    #icon-shezhi
    -
    • - -
  • - -
    颜色对比
    -
    #icon-yanseduibi
    -
    • - -
  • - -
    待发货
    -
    #icon-daifahuo
    -
    • - -
  • - -
    包裹
    -
    #icon-baoguo
    -
    • - -
  • - -
    tick-pressed
    -
    #icon-tick-pressed
    -
    • - -
  • - -
    我的-pressed
    -
    #icon-wode-pressed
    -
    • - -
  • - -
    分类-pressed
    -
    #icon-fenlei-pressed
    -
    • - -
  • - -
    搜索
    -
    #icon-sousuo
    -
    • - -
  • - -
    分享
    -
    #icon-fenxiang
    -
    • - -
  • - -
    筛选
    -
    #icon-shaixuan
    -
    • - -
  • - -
    购物车
    -
    #icon-gouwuche
    -
    • - -
  • - -
    清空
    -
    #icon-qingkong
    -
    • - -
  • - -
    加
    -
    #icon-jia
    -
    • - -
  • - -
    减
    -
    #icon-jian
    -
    • - -
  • - -
    收藏-pressed
    -
    #icon-shoucang-pressed
    -
    • - -
  • - -
    收藏
    -
    #icon-shoucang
    -
    • - -
  • - -
    phone
    -
    #icon-phone
    -
    • - -
  • - -
    tick
    -
    #icon-tick
    -
    • - -
  • - -
    more,back
    -
    #icon-a-moreback
    -
    • - -
  • - -
    分类
    -
    #icon-fenlei
    -
    • - -
  • - -
    编辑
    -
    #icon-bianji
    -
    • - -
  • - -
    我的
    -
    #icon-wode
    -
    • - -
  • - -
    排序,升序
    -
    #icon-sort-up-full
    -
    • - -
  • - -
    排序,降序
    -
    #icon-sort-down-full
    -
    • - -
-
-

Symbol 引用

-
- -

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章 - 这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

-
    -
  • 支持多色图标了，不再受单色限制。
    • -
  • 通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
    • -
  • 兼容性较差，支持 IE9+，及现代浏览器。
    • -
  • 浏览器渲染 SVG 的性能一般，还不如 png。
    • -
-

使用步骤如下：

-

第一步：引入项目下面生成的 symbol 代码：

-
<script src="./iconfont.js"></script>
-
-

第二步：加入通用 CSS 代码（引入一次就行）：

-
<style>
-.icon {
-  width: 1em;
-  height: 1em;
-  vertical-align: -0.15em;
-  fill: currentColor;
-  overflow: hidden;
-}
-</style>
-
-

第三步：挑选相应图标并获取类名，应用于页面：

-
<svg class="icon" aria-hidden="true">
-  <use xlink:href="#icon-xxx"></use>
-</svg>
-
-
-
- -
-
- - - diff --git a/src/styles/download (2)/font_2987621_l1qavt5630a/iconfont.css b/src/styles/download (2)/font_2987621_l1qavt5630a/iconfont.css deleted file mode 100644 index b3cfe6f..0000000 --- a/src/styles/download (2)/font_2987621_l1qavt5630a/iconfont.css +++ /dev/null @@ -1,139 +0,0 @@ -@font-face { - font-family: "iconfont"; /* Project id 2987621 */ - src: url('iconfont.woff2?t=1652427368246') format('woff2'), - url('iconfont.woff?t=1652427368246') format('woff'), - url('iconfont.ttf?t=1652427368246') format('truetype'); -} - -.iconfont { - font-family: "iconfont" !important; - font-size: 16px; - font-style: normal; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; -} - -.icon-daohang:before { - content: "\e664"; -} - -.icon-shanchu:before { - content: "\e663"; -} - -.icon-yifahuo:before { - content: "\e65b"; -} - -.icon-daipeibu:before { - content: "\e662"; -} - -.icon-yaoqingtuandui:before { - content: "\e65a"; -} - -.icon-a-tuikuanshouhou:before { - content: "\e65c"; -} - -.icon-daifukuan:before { - content: "\e65d"; -} - -.icon-shezhi:before { - content: "\e65e"; -} - -.icon-yanseduibi:before { - content: "\e65f"; -} - -.icon-daifahuo:before { - content: "\e660"; -} - -.icon-baoguo:before { - content: "\e661"; -} - -.icon-tick-pressed:before { - content: "\e652"; -} - -.icon-wode-pressed:before { - content: "\e655"; -} - -.icon-fenlei-pressed:before { - content: "\e656"; -} - -.icon-sousuo:before { - content: "\e647"; -} - -.icon-fenxiang:before { - content: "\e648"; -} - -.icon-shaixuan:before { - content: "\e649"; -} - -.icon-gouwuche:before { - content: "\e64a"; -} - -.icon-qingkong:before { - content: "\e64c"; -} - -.icon-jia:before { - content: "\e64d"; -} - -.icon-jian:before { - content: "\e64e"; -} - -.icon-shoucang-pressed:before { - content: "\e64f"; -} - -.icon-shoucang:before { - content: "\e650"; -} - -.icon-phone:before { - content: "\e651"; -} - -.icon-tick:before { - content: "\e653"; -} - -.icon-a-moreback:before { - content: "\e654"; -} - -.icon-fenlei:before { - content: "\e657"; -} - -.icon-bianji:before { - content: "\e658"; -} - -.icon-wode:before { - content: "\e659"; -} - -.icon-sort-up-full:before { - content: "\ea4c"; -} - -.icon-sort-down-full:before { - content: "\ea4d"; -} - diff --git a/src/styles/download (2)/font_2987621_l1qavt5630a/iconfont.js b/src/styles/download (2)/font_2987621_l1qavt5630a/iconfont.js deleted file mode 100644 index 043dece..0000000 --- a/src/styles/download (2)/font_2987621_l1qavt5630a/iconfont.js +++ /dev/null @@ -1 +0,0 @@ -!function(a){var t,h,l,o,i,e='',d=(d=document.getElementsByTagName("script"))[d.length-1].getAttribute("data-injectcss"),p=function(a,t){t.parentNode.insertBefore(a,t)};if(d&&!a.__iconfont__svg__cssinject__){a.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(a){console&&console.log(a)}}function z(){i||(i=!0,l())}function n(){try{o.documentElement.doScroll("left")}catch(a){return void setTimeout(n,50)}z()}t=function(){var a,t=document.createElement("div");t.innerHTML=e,e=null,(t=t.getElementsByTagName("svg")[0])&&(t.setAttribute("aria-hidden","true"),t.style.position="absolute",t.style.width=0,t.style.height=0,t.style.overflow="hidden",t=t,(a=document.body).firstChild?p(t,a.firstChild):a.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(h=function(){document.removeEventListener("DOMContentLoaded",h,!1),t()},document.addEventListener("DOMContentLoaded",h,!1)):document.attachEvent&&(l=t,o=a.document,i=!1,n(),o.onreadystatechange=function(){"complete"==o.readyState&&(o.onreadystatechange=null,z())})}(window); \ No newline at end of file diff --git a/src/styles/download (2)/font_2987621_l1qavt5630a/iconfont.json b/src/styles/download (2)/font_2987621_l1qavt5630a/iconfont.json deleted file mode 100644 index b949949..0000000 --- a/src/styles/download (2)/font_2987621_l1qavt5630a/iconfont.json +++ /dev/null @@ -1,226 +0,0 @@ -{ - "id": "2987621", - "name": "电子商城", - "font_family": "iconfont", - "css_prefix_text": "icon-", - "description": "", - "glyphs": [ - { - "icon_id": "29692046", - "name": "导航", - "font_class": "daohang", - "unicode": "e664", - "unicode_decimal": 58980 - }, - { - "icon_id": "29588731", - "name": "删除", - "font_class": "shanchu", - "unicode": "e663", - "unicode_decimal": 58979 - }, - { - "icon_id": "29349174", - "name": "已发货", - "font_class": "yifahuo", - "unicode": "e65b", - "unicode_decimal": 58971 - }, - { - "icon_id": "29349143", - "name": "待配布", - "font_class": "daipeibu", - "unicode": "e662", - "unicode_decimal": 58978 - }, - { - "icon_id": "29346808", - "name": "邀请团队", - "font_class": "yaoqingtuandui", - "unicode": "e65a", - "unicode_decimal": 58970 - }, - { - "icon_id": "29346810", - "name": "退款、售后", - "font_class": "a-tuikuanshouhou", - "unicode": "e65c", - "unicode_decimal": 58972 - }, - { - "icon_id": "29346811", - "name": "待付款", - "font_class": "daifukuan", - "unicode": "e65d", - "unicode_decimal": 58973 - }, - { - "icon_id": "29346812", - "name": "设置", - "font_class": "shezhi", - "unicode": "e65e", - "unicode_decimal": 58974 - }, - { - "icon_id": "29346813", - "name": "颜色对比", - "font_class": "yanseduibi", - "unicode": "e65f", - "unicode_decimal": 58975 - }, - { - "icon_id": "29346814", - "name": "待发货", - "font_class": "daifahuo", - "unicode": "e660", - "unicode_decimal": 58976 - }, - { - "icon_id": "29346815", - "name": "包裹", - "font_class": "baoguo", - "unicode": "e661", - "unicode_decimal": 58977 - }, - { - "icon_id": "29240262", - "name": "tick-pressed", - "font_class": "tick-pressed", - "unicode": "e652", - "unicode_decimal": 58962 - }, - { - "icon_id": "29240263", - "name": "我的-pressed", - "font_class": "wode-pressed", - "unicode": "e655", - "unicode_decimal": 58965 - }, - { - "icon_id": "29240264", - "name": "分类-pressed", - "font_class": "fenlei-pressed", - "unicode": "e656", - "unicode_decimal": 58966 - }, - { - "icon_id": "29240057", - "name": "搜索", - "font_class": "sousuo", - "unicode": "e647", - "unicode_decimal": 58951 - }, - { - "icon_id": "29240058", - "name": "分享", - "font_class": "fenxiang", - "unicode": "e648", - "unicode_decimal": 58952 - }, - { - "icon_id": "29240059", - "name": "筛选", - "font_class": "shaixuan", - "unicode": "e649", - "unicode_decimal": 58953 - }, - { - "icon_id": "29240060", - "name": "购物车", - "font_class": "gouwuche", - "unicode": "e64a", - "unicode_decimal": 58954 - }, - { - "icon_id": "29240062", - "name": "清空", - "font_class": "qingkong", - "unicode": "e64c", - "unicode_decimal": 58956 - }, - { - "icon_id": "29240063", - "name": "加", - "font_class": "jia", - "unicode": "e64d", - "unicode_decimal": 58957 - }, - { - "icon_id": "29240064", - "name": "减", - "font_class": "jian", - "unicode": "e64e", - "unicode_decimal": 58958 - }, - { - "icon_id": "29240065", - "name": "收藏-pressed", - "font_class": "shoucang-pressed", - "unicode": "e64f", - "unicode_decimal": 58959 - }, - { - "icon_id": "29240066", - "name": "收藏", - "font_class": "shoucang", - "unicode": "e650", - "unicode_decimal": 58960 - }, - { - "icon_id": "29240067", - "name": "phone", - "font_class": "phone", - "unicode": "e651", - "unicode_decimal": 58961 - }, - { - "icon_id": "29240069", - "name": "tick", - "font_class": "tick", - "unicode": "e653", - "unicode_decimal": 58963 - }, - { - "icon_id": "29240070", - "name": "more,back", - "font_class": "a-moreback", - "unicode": "e654", - "unicode_decimal": 58964 - }, - { - "icon_id": "29240073", - "name": "分类", - "font_class": "fenlei", - "unicode": "e657", - "unicode_decimal": 58967 - }, - { - "icon_id": "29240074", - "name": "编辑", - "font_class": "bianji", - "unicode": "e658", - "unicode_decimal": 58968 - }, - { - "icon_id": "29240075", - "name": "我的", - "font_class": "wode", - "unicode": "e659", - "unicode_decimal": 58969 - }, - { - "icon_id": "18174913", - "name": "排序,升序", - "font_class": "sort-up-full", - "unicode": "ea4c", - "unicode_decimal": 59980 - }, - { - "icon_id": "18174920", - "name": "排序,降序", - "font_class": "sort-down-full", - "unicode": "ea4d", - "unicode_decimal": 59981 - } - ] -} diff --git a/src/styles/download (2)/font_2987621_l1qavt5630a/iconfont.ttf b/src/styles/download (2)/font_2987621_l1qavt5630a/iconfont.ttf deleted file mode 100644 index 13d9375..0000000 Binary files a/src/styles/download (2)/font_2987621_l1qavt5630a/iconfont.ttf and /dev/null differ diff --git a/src/styles/download (2)/font_2987621_l1qavt5630a/iconfont.woff b/src/styles/download (2)/font_2987621_l1qavt5630a/iconfont.woff deleted file mode 100644 index 4bbadc2..0000000 Binary files a/src/styles/download (2)/font_2987621_l1qavt5630a/iconfont.woff and /dev/null differ diff --git a/src/styles/download (2)/font_2987621_l1qavt5630a/iconfont.woff2 b/src/styles/download (2)/font_2987621_l1qavt5630a/iconfont.woff2 deleted file mode 100644 index 20b6fdf..0000000 Binary files a/src/styles/download (2)/font_2987621_l1qavt5630a/iconfont.woff2 and /dev/null differ diff --git a/src/styles/iconfont.scss b/src/styles/iconfont.scss index 5eb33fc..246e5e5 100644 --- a/src/styles/iconfont.scss +++ b/src/styles/iconfont.scss @@ -1,6 +1,6 @@ @font-face { font-family: "iconfont"; /* Project id 2987621 */ - src: url('iconfont.ttf?t=1652427368246') format('truetype'); + src: url('iconfont.ttf?t=1652868058352') format('truetype'); } .iconfont { @@ -11,6 +11,22 @@ -moz-osx-font-smoothing: grayscale; } +.icon-zhuyi:before { + content: "\e668"; +} + +.icon-zhushi:before { + content: "\e667"; +} + +.icon-zidingyimadan:before { + content: "\e665"; +} + +.icon-a-yuanmadanmadanguanli:before { + content: "\e666"; +} + .icon-daohang:before { content: "\e664"; } diff --git a/src/styles/iconfont.ttf b/src/styles/iconfont.ttf index 13d9375..7167c2a 100644 Binary files a/src/styles/iconfont.ttf and b/src/styles/iconfont.ttf differ diff --git a/src/styles/image/hdfk.png b/src/styles/image/hdfk.png new file mode 100644 index 0000000..ce2400f Binary files /dev/null and b/src/styles/image/hdfk.png differ diff --git a/src/styles/image/seven.png b/src/styles/image/seven.png new file mode 100644 index 0000000..2d6691b Binary files /dev/null and b/src/styles/image/seven.png differ