This commit is contained in:
li tong bao 2022-05-11 14:39:57 +08:00
commit 45e50a6a79
39 changed files with 2491 additions and 340 deletions

12
src/api/addressList.ts Normal file
View File

@ -0,0 +1,12 @@
import { useRequest } from "@/use/useHttp"
/**
*
*/
export const GetAddressListApi = () => {
return useRequest({
url: `/v1/mall/district/list`,
method: "get",
})
}

11
src/api/order.ts Normal file
View File

@ -0,0 +1,11 @@
import { useRequest } from "@/use/useHttp"
/**
*
*/
export const SaleOrderApi = () => {
return useRequest({
url: `/v1/mall/saleOrder`,
method: "post",
})
}

View File

@ -10,3 +10,25 @@ export const GetShoppingCartApi = () => {
method: "get",
})
}
/**
*
* @returns
*/
export const AddShoppingCartApi = () => {
return useRequest({
url: `/v1/mall/shoppingCart/productColor/list`,
method: "post",
})
}
/**
*
* @returns
*/
export const DelShoppingCartApi = () => {
return useRequest({
url: `/v1/mall/shoppingCart/productColor`,
method: "delete",
})
}

View File

@ -13,7 +13,7 @@ import { useRequest } from "@/use/useHttp"
/**
*
*/
export const GetSelfUserInfoApi = () => {
export const GetAdminUserInfoApi = () => {
return useRequest({
url: `/v1/mall/user/info`,
method: "get",

32
src/app copy.tsx Normal file
View File

@ -0,0 +1,32 @@
import { Component } from 'react'
import ContextBlueTooth from "@/use/contextBlueTooth"
import { Provider } from 'react-redux'
import configStore from './store'
import './app.scss'
const store = configStore()
class App extends Component {
componentDidMount () {}
componentDidShow () {}
componentDidHide () {}
componentDidCatchError () {}
// this.props.children 是将要会渲染的页面
render () {
return (
<ContextBlueTooth>
<Provider store={store}>
{this.props.children}
</Provider>
</ContextBlueTooth>
)
}
}
export default App

View File

@ -1,4 +1,4 @@
import { Component } from 'react'
import { FC } from 'react'
import ContextBlueTooth from "@/use/contextBlueTooth"
import { Provider } from 'react-redux'
import configStore from './store'
@ -6,27 +6,14 @@ import configStore from './store'
import './app.scss'
const store = configStore()
class App extends Component {
componentDidMount () {}
componentDidShow () {}
componentDidHide () {}
componentDidCatchError () {}
// this.props.children 是将要会渲染的页面
render () {
return (
const App:FC = ({children}) => {
return (
<ContextBlueTooth>
<Provider store={store}>
{this.props.children}
{children}
</Provider>
</ContextBlueTooth>
)
}
)
}
export default App

View File

@ -5,11 +5,11 @@
// export const BASE_URL = `http://192.168.0.89:40001/lymarket`
// export const BASE_URL = `http://192.168.1.165:40001/lymarket` // 王霞
// export const BASE_URL = `https://test.zzfzyc.com/lymarket` // 测试环境
// export const BASE_URL = `http://192.168.1.30:40001/lymarket` // 发
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.224:50001/lymarket` // 添
// export const BASE_URL = `http://192.168.1.224:50002/lymarket` // 添
// CDN
// 生成密钥
@ -17,7 +17,7 @@ export const GET_UPLOAD_SIGN = `/upyun/getsign` // 请求签名 url
export const UPLOAD_CDN_URL = `https://v0.api.upyun.com/`
// 前缀
export const IMG_CND_Prefix = "http://test.cdn.zzfzyc.com/"
export const IMG_CND_Prefix = "http://test.cdn.zzfzyc.com"
// 上传图片视频

View File

@ -1,3 +1,5 @@
import { IMG_CND_Prefix } from "./constant";
/**
* 移除井号
* @param {String} val code 编码
@ -133,3 +135,12 @@ export const toDecimal2 = (x) => {
}
return f;
}
/**
* 格式化图片路径
* @param {*} url
* @returns
*/
export const formatImgUrl = (url) => {
return IMG_CND_Prefix + url
}

View File

@ -42,7 +42,7 @@ export const throttle = (fn, delay) => {
export const getFilterData = (val = {}, arr = []) => {
let res = {}
for(let key in val) {
if(val[key]!=undefined&&val[key]!=null&&(!arr.includes(key))){
if(val[key]!==undefined&&val[key]!==null&&val[key]!==''&&(!arr.includes(key))){
if(val[key] instanceof Number){
if(!isNaN(val[key])) {
res[key] = val[key]

View File

@ -4,6 +4,8 @@ import Drawer from "@/components/popup";
import styles from "./index.module.scss"
import classnames from "classnames";
import Taro from "@tarojs/taro";
import { GetAddressListApi } from "@/api/addressList";
type Params = {
addressOnSelect?: ({}:{name: string, id:string|number}) => void,
@ -15,90 +17,47 @@ export default memo(({
addressOnSelect,
addressOnClose,
show = false
}: Params) => {
const list1 = [
{
name:'广东1',
id:1
},
{
name:'广东2',
id:2
},
{
name:'广东3',
id:3
},
{
name:'广东4',
id:4
},
{
name:'广东5',
id:5
},
{
name:'广东6',
id:6
}
]
const list2 = [
{
name:'佛山1佛山1佛山1佛山1佛山1',
id:7
},
{
name:'佛山2',
id:8
},
{
name:'佛山3',
id:9
},
{
name:'佛山4',
id:10
},
{
name:'佛山5',
id:11
},
{
name:'佛山6',
id:12
}
]
//获取地址
const {fetchData} = GetAddressListApi()
useEffect(() => {
getAddressList()
setList(provinceList)
}, [])
const list3 = [
{
name:'禅城区1',
id:13
},
{
name:'禅城区2',
id:14
},
{
name:'禅城区3',
id:15
},
{
name:'禅城区4',
id:16
},
{
name:'禅城区5',
id:17
},
{
name:'禅城区6',
id:18
const condition = useRef({parent_id:1})
const getAddressList = async () => {
let res = await fetchData(condition.current)
const lists = res.data.list||[]
if(selectIndex == 0) {
setProvinceList(lists)
} else if(selectIndex == 1) {
setCityList(lists)
} else {
setAreaList(lists)
}
]
setList(lists)
}
const [list, setList] = useState(list1)
type AddresParam = {
ad_code?: string,
id?: number,
level?: number,
level_name?: string,
name?: string,
parent_id?: number
}
//省
const [provinceList, setProvinceList] = useState<AddresParam[]>([])
//市
const [cityList, setCityList] = useState<AddresParam[]>([])
//区
const [areaList, setAreaList] = useState<AddresParam[]>([])
const [list, setList] = useState<AddresParam[]>([])
const [selectIndex, setSelectIndex] = useState(0) //0 省, 1 市2 区
const [selectId, setSelectId] = useState(0) //选中的id
const [selectArr, setSelectArr] = useState<any>([]) //选中的省市区
@ -132,8 +91,7 @@ export default memo(({
useEffect(() => {
if(selectIndex == 0) {
setList(list1)
// getDomDes('#address_tab_0')
setList(provinceList)
} else if (selectIndex == 1) {
getCity()
} else {
@ -142,27 +100,22 @@ export default memo(({
}, [selectIndex])
//获取市
const getCity = () => {
setTimeout(() => {
if(list2.length > 0) {
setSelectIndex(1)
setList(() => { return list2 })
setCityStatus(true)
getDomDes('#address_tab_1')
} else {
setCityStatus(false)
}
},10)
const getCity = async () => {
await getAddressList()
if(cityList.length > 0) {
setSelectIndex(1)
setCityStatus(true)
getDomDes('#address_tab_1')
} else {
setCityStatus(false)
}
}
//获取区
const area = () => {
// setAreaStatus(false)
setTimeout(() => {
if(list3.length > 0) {
if(areaList.length > 0) {
setSelectIndex(2)
setList(() => { return list3 })
setAreaStatus(true)
getDomDes('#address_tab_2')
} else {

View File

@ -1,6 +1,6 @@
.checkbox_main{
width: 60px;
height: 60px;
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
@ -13,14 +13,18 @@
text-align: center;
line-height: 40px;
}
.no_checkbox_item{
border:0;
background-color: #DDDDDD;
}
.checkbox_item_select{
background-color: $color_main;
border: 0;
color: #fff;
width: 44px;
height: 44px;
width: 40px;
height: 40px;
text-align: center;
line-height: 44px;
line-height: 40px;
.miconfont{
font-size: 26px;
}

View File

@ -4,13 +4,15 @@ import { useEffect, useState } from "react";
import styles from "./index.module.scss"
type params = {
onSelect?: () => void,
onClose?: () => void,
status?: false|true
onSelect?: () => void, //选择触发
onClose?: () => void, //取消触发
status?: false|true //是否选中
disabled?: false|true //是否禁用
}
export default ({onSelect, onClose, status = false}: params) => {
export default ({onSelect, onClose, status = false, disabled = false}: params) => {
const [selected, SetSelected] = useState(false)
const onSelectEven = () => {
if(disabled) return false
let res = !selected
if(res) {
onSelect?.()
@ -25,8 +27,8 @@ export default ({onSelect, onClose, status = false}: params) => {
return (
<>
<View className={styles.checkbox_main} onClick={() => onSelectEven()}>
<View className={classnames(styles.checkbox_item, selected&&styles.checkbox_item_select)}>
{selected&&<View className={classnames('iconfont', 'icon-tick_gou', styles.miconfont)}></View>}
<View className={classnames(styles.checkbox_item, disabled&&styles.no_checkbox_item, selected&&styles.checkbox_item_select)}>
{selected&&<View className={classnames('iconfont', 'icon-tick', styles.miconfont)}></View>}
</View>
</View>
</>

View File

@ -9,4 +9,8 @@
display: flex;
justify-content: center;
align-items: center;
.icon_a_btn{
font-size: 30px;
margin-top: 3px;
}
}

View File

@ -1,4 +1,4 @@
import { View } from "@tarojs/components"
import { View, Text } from "@tarojs/components"
import { memo } from "react"
import style from "./index.module.scss"
@ -11,8 +11,10 @@ export default memo(({onClose, styleObj = {}}:Params) => {
return (
<View
style={styleObj}
className={`iconfont icon-cuo ${style.icon_a_cuowuwrong_self}`}
className={style.icon_a_cuowuwrong_self}
onClick={onClose}
></View>
>
<Text className={`iconfont icon-qingkong ${style.icon_a_btn}`}></Text>
</View>
)
})

View File

@ -1,18 +1,19 @@
import { View } from "@tarojs/components";
import style from "./index.module.scss"
import classnames from "classnames";
import { memo, ReactNode, useMemo } from "react";
import { memo, ReactNode, useEffect, useMemo, useRef } from "react";
import CloseBtnIcon from "@/components/closeBtn"
export interface Params {
title?: string,
show?: false|true,
showTitle?: false|true,
onClose?:() => void,
children?: ReactNode,
IconButton?: ReactNode,
showIconButton?: false|true,
position?: 'bottom'|'top'|'right'
title?: string, //标题
show?: false|true, //显示显示弹窗
showTitle?: false|true, //是否显示标题
onClose?:() => void, //关闭事件
children?: ReactNode, //插槽内容
// IconButton?: ReactNode, //
showIconButton?: false|true, //是否显示关闭按钮
position?: 'bottom'|'top'|'right', //弹出位置
animationEnd?: () => void //弹出动画结束
}
export default memo((
{
@ -22,9 +23,26 @@ export default memo((
onClose,
showIconButton = false,
children,
position = 'bottom'
position = 'bottom',
animationEnd
}:Params) => {
const animationTime = useRef<any>(null)
useEffect(() => {
if(show) {
animationTime.current = setTimeout(() => {
animationEnd?.()
}, 260)
} else {
clearTimeout(animationTime.current)
}
}, [show])
useEffect(() => {
return () => {
clearTimeout(animationTime.current)
}
}, [])
return (
<>

View File

@ -3,7 +3,7 @@ import styles from "./index.module.scss"
import CloseBtn from "@/components/closeBtn"
import classnames from "classnames";
import { debounce } from "@/common/util";
import { memo, useEffect, useRef, useState } from "react";
import { forwardRef, memo, useEffect, useImperativeHandle, useRef, useState } from "react";
type Params = {
clickOnSearch?: (val: string) => void
@ -19,7 +19,7 @@ type Params = {
debounceTime?: number //防抖时间,不设默认为零
}
export default memo(({
export default forwardRef(({
clickOnSearch,
changeOnSearch,
disabled = false,
@ -29,8 +29,8 @@ export default memo(({
btnStyle = {},
placeIcon = 'inner',
btnTitle = '搜索',
debounceTime = 0
}:Params) => {
debounceTime = 0,
}:Params, ref) => {
const [inputCon , setInputCon] = useState('')
const debounceTimeRef = useRef(0)
@ -43,6 +43,10 @@ export default memo(({
changeData(value)
}
useImperativeHandle(ref, () => ({
clearInput
}))
const clearInput = () => {
setInputCon('')
changeOnSearch?.('')

View File

@ -41,7 +41,7 @@
}
.con{
padding:30px;
padding-bottom: 0;
padding-bottom: 100px;
box-sizing: border-box;
flex:1;
height: 0;
@ -54,12 +54,11 @@
display: flex;
justify-content: space-between;
&:nth-child(n+2) {
margin-top: 30px;
margin-top: 37px;
}
.checkbox{
display: flex;
align-items: center;
}
.img{
width: 126px;
@ -77,9 +76,12 @@
flex-direction: column;
justify-content: space-between;
margin-left: 20px;
padding-right: 10px;
box-sizing: border-box;
.title{
font-size: $font_size;
color: $color_font_one;
@include common_ellipsis;
}
.subtitle{
color: $color_font_two;
@ -97,10 +99,14 @@
}
}
}
.no_product_item_select{
opacity: 0.3;
}
.count{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
.price{
font-size: $font_size;
font-weight: 700;

View File

@ -5,22 +5,47 @@ import MCheckbox from "@/components/checkbox";
import LoadingCard from "@/components/loadingCard";
import InfiniteScroll from "@/components/infiniteScroll";
import styles from "./index.module.scss"
import { useEffect, useState } from "react";
import { useCallback, useEffect, useRef, useState } from "react";
import Taro from "@tarojs/taro";
import { goLink } from "@/common/common";
import {GetShoppingCartApi} from "@/api/shopCart"
import {GetShoppingCartApi, DelShoppingCartApi} from "@/api/shopCart"
import { formatHashTag, formatImgUrl, formatMillionYuan } from "@/common/fotmat";
type param = {
show?: true|false,
onClose?: () => void
}
export default ({show = false, onClose}: param) => {
const selectList = ['不限', '剪板', '散剪', '大货']
const [selectIndex, setSelectIndex] = useState(0)
const selectList = [
{value:-1, title:'不限', unit:'', eunit:''},
{value:0, title:'大货', unit:'件', eunit:'kg'},
{value:1,title:'剪板', unit:'米', eunit:'m'},
{value:2,title:'散剪', unit:'米', eunit:'kg'},
]
const [selectIndex, setSelectIndex] = useState(-1)
const selectProduct = (index:number) => {
setSelectIndex(index)
}
useEffect(() => {
resetList()
setSelectStatus(true)
}, [selectIndex])
//重置勾选数据
const resetList = () => {
list?.map(item => {
if(selectIndex == item.sale_mode || selectIndex == -1) {
item.select = true
} else {
item.select = false
}
})
setList([...list])
}
//获取数据
const [list, setList] = useState<any[]>([])
const [loading, setLoading] = useState(false)
@ -28,14 +53,29 @@ export default ({show = false, onClose}: param) => {
const getShoppingCart = async () => {
setLoading(true)
const {data} = await fetchData()
setList(data)
let color_list = data.color_list||[]
initList(color_list)
setList(color_list)
setLoading(false)
}
//初始化全部数据
const initList = (color_list) => {
if(selectIndex == -1) {
color_list?.map(item => {
item.select = true
})
}
}
//显示是展示数据
useEffect(() => {
if(!show) return
getShoppingCart()
if(!show) {
setList([])
setSelectIndex(-1)
} else {
getShoppingCart()
}
}, [show])
useEffect(() => {
@ -49,11 +89,12 @@ export default ({show = false, onClose}: param) => {
setShowPopup(show)
}, [show])
//全选反选
const [selectStatus, setSelectStatus] = useState(false)
const selectAll = () => {
list.map(item => {
item.select = !selectStatus
if(selectIndex == item.sale_mode || selectIndex == -1)
item.select = !selectStatus
})
setSelectStatus(!selectStatus)
setList([...list])
@ -62,12 +103,29 @@ export default ({show = false, onClose}: param) => {
//checkbox选中回调
const selectCallBack = (item) => {
item.select = true
checkSelect()
setList([...list])
}
//checkbox选中判断是否全部选中全部选中后是全选否则反选
const checkSelect = () => {
let list_count = 0
let select_count = 0
list?.map(item => {
if(selectIndex == -1 || selectIndex == item.sale_mode) {
list_count ++
if(item.select) select_count++
}
})
console.log('list_count::',list_count)
console.log('select_count::',select_count)
setSelectStatus(select_count == list_count)
}
//checkbox关闭回调
const colseCallBack = (item) => {
item.select = false
checkSelect()
setList([...list])
}
@ -77,16 +135,28 @@ export default ({show = false, onClose}: param) => {
setShowPopup(false)
}
//删除购物车内容
const {fetchData:delShopFetchData} = DelShoppingCartApi()
const delSelect = () => {
Taro.showModal({
content: '删除所选商品?',
success: function (res) {
success: async function (res) {
if (res.confirm) {
Taro.showToast({
title: '成功',
icon: 'success',
duration: 2000
})
getSelectId()
const res = await delShopFetchData({id:selectIds.current})
if(res.success) {
getShoppingCart()
Taro.showToast({
title: '成功',
icon: 'success',
})
} else {
Taro.showToast({
title: res.msg,
icon: 'none',
})
}
} else if (res.cancel) {
console.log('用户点击取消')
}
@ -94,11 +164,30 @@ export default ({show = false, onClose}: param) => {
})
}
//获取面料选中的id
const selectIds = useRef<number[]>([])
const getSelectId = () => {
list?.map(item => {
if(selectIndex == -1 || selectIndex == item.sale_mode) {
item.select&&selectIds.current.push(item.id)
}
})
}
//格式化金额
const formatPirce = useCallback((price) => {
const {num} = formatMillionYuan(price, 100)
return Number(num)
}, [])
//格式化数量
const formatCount = useCallback((item) => {
return item.sale_mode == 0? item.roll + '件': item.length + 'm'
}, [])
return (
<View className={styles.shop_cart_main}>
<Popup showTitle={false} show={showPopup} onClose={() => closePopup()}>
<Popup showTitle={false} show={showPopup} onClose={() => closePopup()} >
<View className={styles.popup_con}>
<View className={styles.header}>
<View onClick={selectAll}>{!selectStatus?'全选':'反选'}</View>
@ -108,37 +197,36 @@ export default ({show = false, onClose}: param) => {
</View>
</View>
<View className={styles.search}>
{selectList.map((item, index) => {
return <View key={index} onClick={() => selectProduct(index)} className={classnames(styles.search_item, (selectIndex==index)&&styles.search_item_select)}>{item}</View>
{selectList.map((item) => {
return <View key={item.value} onClick={() => selectProduct(item.value)} className={classnames(styles.search_item, (selectIndex==item.value)&&styles.search_item_select)}>{item.title}</View>
})}
</View>
<View className={styles.con}>
{loading&&<LoadingCard/>}
{!loading&&list.length > 0&&<InfiniteScroll refresherTriggered={true} refresherEnabled={true} selfonScrollToLower={() => {console.log('触底了')}} paddingBottom={100}>
{!loading&&list?.length > 0&&<InfiniteScroll refresherTriggered={true} refresherEnabled={true} moreStatus={false} >
<View className={styles.product_list}>
{list.map((item, index) => {
return <View key={index} className={styles.product_item}>
{list?.map((item, index) => {
return <View key={index} className={classnames(styles.product_item, (selectIndex!=-1&&selectIndex!= item.sale_mode)&&styles.no_product_item_select)}>
<View className={styles.checkbox}>
<MCheckbox status={item.select} onSelect={() => selectCallBack(item)} onClose={() => colseCallBack(item)}/>
<MCheckbox disabled={selectIndex!=-1&&selectIndex!=item.sale_mode} status={item.select} onSelect={() => selectCallBack(item)} onClose={() => colseCallBack(item)}/>
</View>
<View className={styles.img}>
<Image src="https://bpic.588ku.com//back_origin_min_pic/22/01/11/aa3da17bab9a6556564028e4f1d77874.jpg!/fw/750/quality/99/unsharp/true/compress/true"/>
<Image mode="aspectFill" src={formatImgUrl(item.texture_url)}/>
</View>
<View className={styles.des}>
<View className={styles.title}>{item.title}</View>
<View className={styles.subtitle}>07703# 21S单面平纹()</View>
<View className={styles.tag}></View>
<View className={styles.title}>{formatHashTag(item.product_code, item.product_name)}</View>
<View className={styles.subtitle}>{item.product_color_code +' ' + item.product_color_name}</View>
<View className={styles.tag}>{item.sale_mode_name}</View>
</View>
<View className={styles.count}>
<View className={styles.price}><text></text>40.5<text>/kg</text></View>
<View className={styles.long}>×12m</View>
<View className={styles.price}><text></text>{formatPirce(item.sale_price)}<text>/kg</text></View>
<View className={styles.long}>×{formatCount(item)}</View>
</View>
</View>
})}
</View>
</InfiniteScroll>}
{!loading&&list.length == 0 &&<View className={styles.empty}>
{!loading&&list?.length == 0 &&<View className={styles.empty}>
<View className={styles.title}></View>
<View className={styles.btn}></View>
</View>}

View File

@ -1,6 +1,8 @@
export const SET_USERINFO = 'setUserInfo'
export const SET_ADMINUSERINFO = 'setAdminUserInfo'
export const SET_TOKEN = 'setToken'
export const SET_SESSIONKEY = 'setSessionkey'
export const CLEAR_TOKEN = 'clearToken'
export const CLEAR_SESSIONKEY = 'clearSessionkey'
export const CLEAR_USERINFO = 'clearUserInfo'
export const CLEAR_ADMINUSERINFO = 'clearAdminUserInfo'

View File

@ -1,4 +1,4 @@
import {Image, ScrollView, View, Text } from "@tarojs/components"
import {Image, ScrollView, View, Text, CustomWrapper } from "@tarojs/components"
import Popup from "@/components/popup"
import LoadingCard from "@/components/loadingCard";
import Search from "@/components/search";
@ -8,12 +8,16 @@ import Big from 'big.js'
import classnames from "classnames";
import styles from "./index.module.scss"
import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useSelector } from "@/reducers/hooks"
import {GetColorList} from "@/api/materialColor"
import { useRouter } from "@tarojs/taro";
import {AddShoppingCartApi} from "@/api/shopCart"
import Taro, { useRouter } from "@tarojs/taro";
import UseLogin from "@/use/useLogin"
import { formatHashTag, formatMillionYuan } from "@/common/fotmat";
import { getFilterData } from "@/common/util";
type param = {
show?: true|false,
onClose?: () => void,
@ -21,39 +25,69 @@ type param = {
productId?: number
}
export default memo(({show = false, onClose, title = '', productId = 0}: param) => {
const selectList = [
{id: 0, step:1, digits:0, maxNum:100000, defaultNum:1, title:'大货', unit:'件', eunit:'kg'},
{id: 1, step:1, digits:2, maxNum:9.99, defaultNum:1, title:'剪板', unit:'米', eunit:'m'},
{id: 2, step:1, digits:2, minNum:10, maxNum:100000, defaultNum:10, title:'散剪', unit:'米', eunit:'kg'},
]
const {adminUserInfo} = useSelector(state => state.userInfo)
const [selectList, setSelectList] = useState([
{id: 0, step:1, digits:0, maxNum:100000, defaultNum:1, title:'大货', unit:'件', eunit:'kg', priceField:'bulk_price'},
{id: 1, step:1, digits:2, maxNum:9.99, defaultNum:1, title:'剪板', unit:'米', eunit:'m', priceField:'length_cut_price'},
{id: 2, step:1, digits:2, minNum:10, maxNum:100000, defaultNum:10, title:'散剪', unit:'米', eunit:'kg', priceField:'weight_cut_price'},
])
const [selectIndex, setSelectIndex] = useState(0)
const selectProduct = (index:number) => {
setSelectIndex(index)
setSelectIndex(() => index)
}
//重置数据
useEffect(() => {
const newList = initList(list)
setList([...newList])
condition.current.code_or_name = null
setSearchShow(false)
}, [selectIndex])
//获取面料颜色列表
const {fetchData:colorFetchData} = GetColorList()
const {fetchData:colorFetchData, state: colorState} = GetColorList()
const [list, setList] = useState<any[]>([])
const [loading, setLoading] = useState(false)
const condition = useRef({physical_warehouse:1, sale_mode:selectIndex, product_id:0, code_or_name:null})
const condition = useRef({physical_warehouse:adminUserInfo?.physical_warehouse, sale_mode:selectIndex, product_id:0, code_or_name:null})
const getColorList = async () => {
setLoading(() => true)
console.log('数据:::',getFilterData(condition.current))
let {data} = await colorFetchData(getFilterData(condition.current))
setList([...data.list])
let lists = initList(data.list)
setList([...lists])
setLoading(() => false)
}
const [showPopup, setShowPopup] = useState(false)
useEffect(() => {
console.log('colorState::',colorState)
}, [colorState])
//显示获取
useEffect(() => {
if(show) {
setSelectIndex(0)
condition.current.code_or_name = null
setSearchShow(false)
condition.current.product_id = productId
getColorList()
}
setShowPopup(show)
}, [show])
//卸载清空
//初始化列表数据
const initList = useCallback((list) => {
const newList = list.map(item => {
item.count = 0
item.show = false
return item
})
return newList
}, [])
//卸载数据
useEffect(() => {
return () => {
setList([])
@ -64,22 +98,28 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
const closePopup = () => {
onClose?.()
setShowPopup(false)
setList([])
}
//计算总数量和总米/件数
const [selectCount, setSelectCount] = useState({
const [selectCount, setSelectCount] = useState<{sumCount:number, kindCount:number, color_list:any[]}>({
sumCount: 0,
kindCount: 0
kindCount: 0,
color_list: []
})
useEffect(() => {
let sumCount = 0, kindCount = 0
let sumCount = 0, kindCount = 0, color_list:any[] = []
let color_list_info = {}
list.map(item => {
if(item.count > 0) {
sumCount = Big(sumCount).add(item.count).toNumber()
kindCount ++
color_list_info = selectIndex == 0? {product_color_id:item.id, roll:item.count}:{product_color_id:item.id, length:item.count}
color_list.push(color_list_info)
}
})
setSelectCount({sumCount, kindCount})
setSelectCount({...selectCount, sumCount, kindCount, color_list})
}, [list])
//计数组件
@ -92,7 +132,6 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
const onAdd = (item) => {
item.show = true
item.count = selectList[selectIndex].defaultNum
console.log('aa:::',item.count)
setList((list) => [...list])
}
@ -104,32 +143,42 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
//添加购物车
const {getSelfUserInfo} = UseLogin()
const addShopCart = () => {
getSelfUserInfo()
}
//显示金额
const priceFormat = useCallback((item) => {
let price = 0
if(selectIndex == 0) {
price = formatMillionYuan(item.bulk_price, 100).num
} else if(selectIndex == 1) {
price = formatMillionYuan(item.length_cut_price, 100).num
} else {
price = formatMillionYuan(item.weight_cut_price, 100).num
const {fetchData:addFetchData} = AddShoppingCartApi()
const addShopCart = async () => {
try {
await getSelfUserInfo()
} catch(msg) {
Taro.showToast({
icon:'none',
title:msg
})
return false
}
return <View className={styles.priceText}><Text>¥</Text>{Number(price) }<Text>{' /' + selectList[selectIndex].eunit}</Text></View>
}, [list, selectIndex])
//重置数据
useEffect(() => {
const newList = list.map(item => {
item.count = 0
item.show = false
return item
if(selectCount.sumCount == 0) {
Taro.showToast({
icon:'none',
title:'请选择面料颜色!'
})
return false
}
const state = await addFetchData({
"sale_mode": selectIndex,
color_list: selectCount.color_list
})
setList([...newList])
}, [selectIndex])
if(state.success) {
Taro.showToast({
title:'添加成功'
})
onClose?.()
} else {
Taro.showToast({
icon:'none',
title: state.msg
})
}
}
//筛选数据
const searchInput = (e) => {
@ -137,10 +186,24 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
getColorList()
}
//清空搜索内容
const searchRef = useRef<any>(null)
const clearSearch = () => {
searchRef.current.clearInput()
setSearchShow(false)
}
//格式化金额
const formatPrice = useCallback((item) => {
const price = Number(formatMillionYuan(item[selectList[selectIndex].priceField], 100).num)
return <View className={styles.priceText}><Text>¥</Text>{price}<Text> /{selectList[selectIndex].eunit}</Text></View>
}, [selectIndex])
return (
<View className={styles.shop_cart_main}>
<Popup showTitle={false} show={showPopup} onClose={() => closePopup()}>
<Popup showTitle={false} show={showPopup} onClose={() => closePopup()} >
<View className={styles.popup_con}>
<View className={styles.header}>{title}</View>
<View className={styles.search}>
@ -153,47 +216,52 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
</View>
{searchShow&&<View className={styles.colorFind}>
<View className={styles.search}>
<Search placeIcon="out" changeOnSearch={(e) => searchInput(e)} debounceTime={400}/>
<Search placeIcon="out" ref={searchRef} changeOnSearch={(e) => searchInput(e)} debounceTime={400}/>
</View>
<View className={styles.text} onClick={() => setSearchShow(false)}></View>
<View className={styles.text} onClick={() => clearSearch()}></View>
</View>}
<View className={styles.colorNum}>
<View className={styles.title}> (13) {list.length}</View>
<View className={styles.title}> ({list.length})</View>
{!searchShow&&<View className={classnames('iconfont icon-sousuo', styles.miconfont)} onClick={() => changeSearchShow()}></View>}
</View>
<View className={styles.product_color_con}>
{list.length > 0&&<InfiniteScroll moreStatus={false}>
<View className={styles.color_con}>
{list.map(item => {
return <View className={styles.item}>
<View className={styles.item_color}>
<Image src={item.texture_url}/>
{(list.length <= 0 && colorState.loading)&&<LoadingCard/>}
{(list.length > 0&& !colorState.loading)&&
<InfiniteScroll moreStatus={false}>
<View className={styles.color_con}>
{list.map(item => {
return <View className={styles.item} key={item.id}>
<View className={styles.item_color}>
<Image src={item.texture_url}/>
</View>
<View className={styles.item_con}>
<View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
<View className={styles.num}>
{formatPrice(item)}
</View>
</View>
<View className={styles.btn_con}>
{!item.show&&<View className={styles.btn} onClick={() => onAdd(item)}></View>
||<View className={styles.btn_count}>
<Counter
onBlue={(e) => getInputValue(e, item)}
defaultNum={item.count}
step={selectList[selectIndex].step}
digits={selectList[selectIndex].digits}
onClickBtn={(e) => getInputValue(e, item)}
unit={selectList[selectIndex].unit}
minNum={selectList[selectIndex].minNum}
maxNum={selectList[selectIndex].maxNum}
/>
</View>}
</View>
</View>
<View className={styles.item_con}>
<View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
<View className={styles.num}>{priceFormat(item)}</View>
</View>
<View className={styles.btn_con}>
{!item.show&&<View className={styles.btn} onClick={() => onAdd(item)}></View>
||<View className={styles.btn_count}>
<Counter
onBlue={(e) => getInputValue(e, item)}
defaultNum={item.count}
step={selectList[selectIndex].step}
digits={selectList[selectIndex].digits}
onClickBtn={(e) => getInputValue(e, item)}
unit={selectList[selectIndex].unit}
minNum={selectList[selectIndex].minNum}
maxNum={selectList[selectIndex].maxNum}
/>
</View>}
</View>
</View>
})}
</View>
</InfiniteScroll>||
<View className={styles.noData}></View>}
})}
</View>
</InfiniteScroll>}
{(list.length <= 0 && !colorState.loading)&&<View className={styles.noData}></View>}
</View>
<View className={styles.buy_btn}>
<View className={styles.buy_btn_con}>

View File

@ -1,3 +1,4 @@
import { formatImgUrl } from "@/common/fotmat"
import { Image, Swiper, SwiperItem, View } from "@tarojs/components"
import { useMemo, useRef, useState } from "react"
import styles from './index.module.scss'
@ -18,7 +19,6 @@ export default ({list = []}: params) => {
const swiperChange = (e) => {
setPageIndex(e.detail.current + 1)
pageRef.current.innerHTML = 2
}
@ -28,7 +28,7 @@ export default ({list = []}: params) => {
{list.map((item) => {
return <SwiperItem key={item.id}>
<View className={styles.image_item} >
<Image mode="aspectFill" src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d'></Image>
<Image mode="aspectFill" src={formatImgUrl(item)}></Image>
</View>
</SwiperItem>
})}

View File

@ -145,7 +145,13 @@
background-color: $color_main;
font-size: $font_size;
color: #fff;
position: relative;
.phoneBtn{
background-color: rgba(0, 0, 0, 0);
position: absolute;
width: 100%;
height: 100%;
}
}
}
}

View File

@ -1,6 +1,6 @@
import { Button, Image, RichText, ScrollView, Swiper, SwiperItem, Text, View } from '@tarojs/components'
import Taro, { useDidShow, useRouter, useShareAppMessage } from '@tarojs/taro';
import { Button, CustomWrapper, Image, RichText, ScrollView, Swiper, SwiperItem, Text, View } from '@tarojs/components'
import Taro, { useDidShow, usePullDownRefresh, useRouter, useShareAppMessage } from '@tarojs/taro';
import classnames from "classnames";
import DesSwiper from './components/swiper';
import OrderCount from './components/orderCount';
@ -23,7 +23,8 @@ type params = {
style?: Object
}
export default (props:params) => {
const {checkLogin} = useLogin()
const {checkLogin, getPhoneNumber, userInfo} = useLogin()
useDidShow(() => {
checkLogin()
})
@ -39,6 +40,7 @@ export default (props:params) => {
const getProductDetail = async () => {
let {data} = await fetchData({id: router.params.id})
setProductInfo(data)
Taro.stopPullDownRefresh()
}
//面料名称
@ -46,27 +48,11 @@ export default (props:params) => {
return formatHashTag(productInfo.code, productInfo.name)
},[productInfo])
const list = [
{
title:'数据',
img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d',
url:'',
id:1
},
{
title:'数据',
img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d',
url:'',
id:2
}
]
const [showCart, setShowCart] = useState(false)
const [showOrderCount, setShowOrderCount] = useState(false)
const html = `<h1>这里是详情</h1>
<div style="font-size:13px"></div>
const html = `
<img style="width:100%" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic24.nipic.com%2F20121021%2F10910884_100200815001_2.jpg&refer=http%3A%2F%2Fpic24.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652257920&t=9353dda34f18ae2fe6803f3da35954bb">
`
@ -99,14 +85,36 @@ export default (props:params) => {
return {
title: '自定义转发标题',
path: '/pages/details/index?id=10',
imageUrl: list[0].img
imageUrl: ''
}
})
//开始下单
const placeOrder = async (e:any) => {
try {
await getPhoneNumber(e.detail.code)
} catch(msg) {
Taro.showToast({
icon:"none",
title: msg
})
return false
}
setShowOrderCount(true)
}
//页面下拉刷新
usePullDownRefresh(() => {
getProductDetail()
})
return (
<View className={styles.main}>
<DesSwiper list={list}/>
<DesSwiper list={productInfo.texture_url||[]}/>
<View className={styles.product_header}>
<View className={styles.title}>
<View className={styles.name}>{productName}</View>
@ -154,9 +162,17 @@ export default (props:params) => {
<View className={classnames('iconfont icon-gouwuche', styles.miconfont)}></View>
<View className={styles.text}></View>
</View>
<View className={styles.buy_btn} onClick={() => setShowOrderCount(true)}></View>
{
!userInfo.adminUserInfo?.is_authorize_phone&&<View className={styles.buy_btn} >
<Button className={styles.phoneBtn} open-type="getPhoneNumber" onGetPhoneNumber={(e) => placeOrder(e)}></Button>
</View>
|| <View className={styles.buy_btn} onClick={(e) => placeOrder(e)}></View>
}
</View>
<OrderCount show={showOrderCount} onClose={() => setShowOrderCount(false)} title={productName} productId={productInfo.id}/>
<CustomWrapper>
<OrderCount show={showOrderCount} onClose={() => setShowOrderCount(false)} title={productName} productId={productInfo.id}/>
</CustomWrapper>
<ShopCart show={showCart} onClose={() => setShowCart(false)}/>
<Preview value={colorInfo} show={showPreview} onClose={() => setShowPreview(false)}/>
<View className='common_safe_area_y'></View>

8
src/reducers/hooks.ts Normal file
View File

@ -0,0 +1,8 @@
//该方法纯粹只是个Ts类型定义文件
import { useSelector as useReduxSelector, TypedUseSelectorHook } from 'react-redux';
import { DataParam } from './userInfo';
type Params = {
userInfo: DataParam
}
export const useSelector: TypedUseSelectorHook<Params> = useReduxSelector;

View File

@ -2,11 +2,13 @@
import Taro from '@tarojs/taro'
import {
SET_USERINFO,
SET_ADMINUSERINFO,
SET_TOKEN,
SET_SESSIONKEY,
CLEAR_TOKEN,
CLEAR_USERINFO,
CLEAR_SESSIONKEY
CLEAR_SESSIONKEY,
CLEAR_ADMINUSERINFO,
} from '../constants/userInfo'
export type UserParam = {
@ -18,13 +20,30 @@ export type UserParam = {
province?: string,
gender?: number,
language?: string,
timestamp?: number
timestamp?: number,
physical_warehouse?: number,
physical_warehouse_name?: string,
}
export type UserAdminParam = {
avatar_url?: string,
open_id?: string,
physical_warehouse?: number,
physical_warehouse_name?: string,
union_id?: string,
user_code?: string,
user_id?: number,
user_name?: string,
wechat_user_open_id?: number
is_authorize_name?: false|true,
is_authorize_phone?: false|true
}
export type DataParam = {
token?: string
session_key?: string,
userInfo: UserParam
userInfo: UserParam,
adminUserInfo: UserAdminParam
}
type Action = {
@ -36,6 +55,7 @@ type Action = {
const INIT_USER = {
userInfo: Taro.getStorageSync('userInfo')?JSON.parse(Taro.getStorageSync('userInfo')):null,
adminUserInfo: Taro.getStorageSync('adminUserInfo')?JSON.parse(Taro.getStorageSync('adminUserInfo')):null,
token: Taro.getStorageSync('token')||'',
session_key: Taro.getStorageSync('session_key')||'',
}
@ -43,25 +63,31 @@ const INIT_USER = {
export default function counter (state = INIT_USER, action: Action) {
const {type, data} = action
switch (type) {
case SET_USERINFO:
Taro.setStorageSync('userInfo',JSON.stringify(data?.userInfo))
return {...state,...data}
case SET_TOKEN:
Taro.setStorageSync('token',data?.token)
return {...state,...data}
case SET_SESSIONKEY:
Taro.setStorageSync('session_key',data?.session_key)
return {...state,...data}
case CLEAR_TOKEN:
Taro.removeStorageSync('token')
return {...state, token:''}
case CLEAR_SESSIONKEY:
Taro.removeStorageSync('session_key')
return {...state, session_key:''}
case CLEAR_USERINFO:
Taro.removeStorageSync('userInfo')
return {...state, userInfo: null}
default:
return state
case SET_USERINFO:
Taro.setStorageSync('userInfo',JSON.stringify(data?.userInfo))
return {...state,...data}
case SET_ADMINUSERINFO:
Taro.setStorageSync('adminUserInfo',JSON.stringify(data?.adminUserInfo))
return {...state,...data}
case SET_TOKEN:
Taro.setStorageSync('token',data?.token)
return {...state,...data}
case SET_SESSIONKEY:
Taro.setStorageSync('session_key',data?.session_key)
return {...state,...data}
case CLEAR_TOKEN:
Taro.removeStorageSync('token')
return {...state, token:''}
case CLEAR_SESSIONKEY:
Taro.removeStorageSync('session_key')
return {...state, session_key:''}
case CLEAR_USERINFO:
Taro.removeStorageSync('userInfo')
return {...state, userInfo: null}
case CLEAR_ADMINUSERINFO:
Taro.removeStorageSync('adminUserInfo')
return {...state, adminUserInfo: null}
default:
return state
}
}

View File

@ -0,0 +1,89 @@
@font-face {
font-family: "iconfont"; /* Project id 2987621 */
src:
url('iconfont.ttf?t=1650013104232') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.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";
}

BIN
src/styles/bak/iconfont.ttf Normal file

Binary file not shown.

View File

@ -0,0 +1,539 @@
/* 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;
}

View File

@ -0,0 +1,855 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>iconfont Demo</title>
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
<link rel="stylesheet" href="demo.css">
<link rel="stylesheet" href="iconfont.css">
<script src="iconfont.js"></script>
<!-- jQuery -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
<!-- 代码高亮 -->
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
<style>
.main .logo {
margin-top: 0;
height: auto;
}
.main .logo a {
display: flex;
align-items: center;
}
.main .logo .sub-title {
margin-left: 0.5em;
font-size: 22px;
color: #fff;
background: linear-gradient(-45deg, #3967FF, #B500FE);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
</head>
<body>
<div class="main">
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
</a></h1>
<div class="nav-tabs">
<ul id="tabs" class="dib-box">
<li class="dib active"><span>Unicode</span></li>
<li class="dib"><span>Font class</span></li>
<li class="dib"><span>Symbol</span></li>
</ul>
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=2987621" target="_blank" class="nav-more">查看项目</a>
</div>
<div class="tab-container">
<div class="content unicode" style="display: block;">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont">&#xe65b;</span>
<div class="name">已发货</div>
<div class="code-name">&amp;#xe65b;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe662;</span>
<div class="name">待配布</div>
<div class="code-name">&amp;#xe662;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe65a;</span>
<div class="name">邀请团队</div>
<div class="code-name">&amp;#xe65a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe65c;</span>
<div class="name">退款、售后</div>
<div class="code-name">&amp;#xe65c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe65d;</span>
<div class="name">待付款</div>
<div class="code-name">&amp;#xe65d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe65e;</span>
<div class="name">设置</div>
<div class="code-name">&amp;#xe65e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe65f;</span>
<div class="name">颜色对比</div>
<div class="code-name">&amp;#xe65f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe660;</span>
<div class="name">待发货</div>
<div class="code-name">&amp;#xe660;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe661;</span>
<div class="name">包裹</div>
<div class="code-name">&amp;#xe661;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe652;</span>
<div class="name">tick-pressed</div>
<div class="code-name">&amp;#xe652;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe655;</span>
<div class="name">我的-pressed</div>
<div class="code-name">&amp;#xe655;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe656;</span>
<div class="name">分类-pressed</div>
<div class="code-name">&amp;#xe656;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe647;</span>
<div class="name">搜索</div>
<div class="code-name">&amp;#xe647;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe648;</span>
<div class="name">分享</div>
<div class="code-name">&amp;#xe648;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe649;</span>
<div class="name">筛选</div>
<div class="code-name">&amp;#xe649;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe64a;</span>
<div class="name">购物车</div>
<div class="code-name">&amp;#xe64a;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe64c;</span>
<div class="name">清空</div>
<div class="code-name">&amp;#xe64c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe64d;</span>
<div class="name"></div>
<div class="code-name">&amp;#xe64d;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe64e;</span>
<div class="name"></div>
<div class="code-name">&amp;#xe64e;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe64f;</span>
<div class="name">收藏-pressed</div>
<div class="code-name">&amp;#xe64f;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe650;</span>
<div class="name">收藏</div>
<div class="code-name">&amp;#xe650;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe651;</span>
<div class="name">phone</div>
<div class="code-name">&amp;#xe651;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe653;</span>
<div class="name">tick</div>
<div class="code-name">&amp;#xe653;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe654;</span>
<div class="name">more,back</div>
<div class="code-name">&amp;#xe654;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe657;</span>
<div class="name">分类</div>
<div class="code-name">&amp;#xe657;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe658;</span>
<div class="name">编辑</div>
<div class="code-name">&amp;#xe658;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xe659;</span>
<div class="name">我的</div>
<div class="code-name">&amp;#xe659;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xea4c;</span>
<div class="name">排序,升序</div>
<div class="code-name">&amp;#xea4c;</div>
</li>
<li class="dib">
<span class="icon iconfont">&#xea4d;</span>
<div class="name">排序,降序</div>
<div class="code-name">&amp;#xea4d;</div>
</li>
</ul>
<div class="article markdown">
<h2 id="unicode-">Unicode 引用</h2>
<hr>
<p>Unicode 是字体在网页端最原始的应用方式,特点是:</p>
<ul>
<li>支持按字体的方式去动态调整图标大小,颜色等等。</li>
<li>默认情况下不支持多色,直接添加多色图标会自动去色。</li>
</ul>
<blockquote>
<p>注意:新版 iconfont 支持两种方式引用多色图标SVG symbol 引用方式和彩色字体图标模式。(使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。)</p>
</blockquote>
<p>Unicode 使用步骤如下:</p>
<h3 id="-font-face">第一步:拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1652068398646') format('woff2'),
url('iconfont.woff?t=1652068398646') format('woff'),
url('iconfont.ttf?t=1652068398646') format('truetype');
}
</code></pre>
<h3 id="-iconfont-">第二步:定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</code></pre>
<h3 id="-">第三步:挑选相应图标并获取字体编码,应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content font-class">
<ul class="icon_lists dib-box">
<li class="dib">
<span class="icon iconfont icon-yifahuo"></span>
<div class="name">
已发货
</div>
<div class="code-name">.icon-yifahuo
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-daipeibu"></span>
<div class="name">
待配布
</div>
<div class="code-name">.icon-daipeibu
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yaoqingtuandui"></span>
<div class="name">
邀请团队
</div>
<div class="code-name">.icon-yaoqingtuandui
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-a-tuikuanshouhou"></span>
<div class="name">
退款、售后
</div>
<div class="code-name">.icon-a-tuikuanshouhou
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-daifukuan"></span>
<div class="name">
待付款
</div>
<div class="code-name">.icon-daifukuan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shezhi"></span>
<div class="name">
设置
</div>
<div class="code-name">.icon-shezhi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-yanseduibi"></span>
<div class="name">
颜色对比
</div>
<div class="code-name">.icon-yanseduibi
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-daifahuo"></span>
<div class="name">
待发货
</div>
<div class="code-name">.icon-daifahuo
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-baoguo"></span>
<div class="name">
包裹
</div>
<div class="code-name">.icon-baoguo
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tick-pressed"></span>
<div class="name">
tick-pressed
</div>
<div class="code-name">.icon-tick-pressed
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-wode-pressed"></span>
<div class="name">
我的-pressed
</div>
<div class="code-name">.icon-wode-pressed
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fenlei-pressed"></span>
<div class="name">
分类-pressed
</div>
<div class="code-name">.icon-fenlei-pressed
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-sousuo"></span>
<div class="name">
搜索
</div>
<div class="code-name">.icon-sousuo
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fenxiang"></span>
<div class="name">
分享
</div>
<div class="code-name">.icon-fenxiang
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shaixuan"></span>
<div class="name">
筛选
</div>
<div class="code-name">.icon-shaixuan
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-gouwuche"></span>
<div class="name">
购物车
</div>
<div class="code-name">.icon-gouwuche
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-qingkong"></span>
<div class="name">
清空
</div>
<div class="code-name">.icon-qingkong
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jia"></span>
<div class="name">
</div>
<div class="code-name">.icon-jia
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-jian"></span>
<div class="name">
</div>
<div class="code-name">.icon-jian
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shoucang-pressed"></span>
<div class="name">
收藏-pressed
</div>
<div class="code-name">.icon-shoucang-pressed
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-shoucang"></span>
<div class="name">
收藏
</div>
<div class="code-name">.icon-shoucang
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-phone"></span>
<div class="name">
phone
</div>
<div class="code-name">.icon-phone
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-tick"></span>
<div class="name">
tick
</div>
<div class="code-name">.icon-tick
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-a-moreback"></span>
<div class="name">
more,back
</div>
<div class="code-name">.icon-a-moreback
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-fenlei"></span>
<div class="name">
分类
</div>
<div class="code-name">.icon-fenlei
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-bianji"></span>
<div class="name">
编辑
</div>
<div class="code-name">.icon-bianji
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-wode"></span>
<div class="name">
我的
</div>
<div class="code-name">.icon-wode
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-sort-up-full"></span>
<div class="name">
排序,升序
</div>
<div class="code-name">.icon-sort-up-full
</div>
</li>
<li class="dib">
<span class="icon iconfont icon-sort-down-full"></span>
<div class="name">
排序,降序
</div>
<div class="code-name">.icon-sort-down-full
</div>
</li>
</ul>
<div class="article markdown">
<h2 id="font-class-">font-class 引用</h2>
<hr>
<p>font-class 是 Unicode 使用方式的一种变种,主要是解决 Unicode 书写不直观,语意不明确的问题。</p>
<p>与 Unicode 使用方式相比,具有如下特点:</p>
<ul>
<li>相比于 Unicode 语意明确,书写更直观。可以很容易分辨这个 icon 是什么。</li>
<li>因为使用 class 来定义图标,所以当要替换图标时,只需要修改 class 里面的 Unicode 引用。</li>
</ul>
<p>使用步骤如下:</p>
<h3 id="-fontclass-">第一步:引入项目下面生成的 fontclass 代码:</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
<h3 id="-">第二步:挑选相应图标并获取类名,应用于页面:</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
<blockquote>
<p>"
iconfont" 是你项目下的 font-family。可以通过编辑项目查看默认是 "iconfont"。</p>
</blockquote>
</div>
</div>
<div class="content symbol">
<ul class="icon_lists dib-box">
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yifahuo"></use>
</svg>
<div class="name">已发货</div>
<div class="code-name">#icon-yifahuo</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-daipeibu"></use>
</svg>
<div class="name">待配布</div>
<div class="code-name">#icon-daipeibu</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yaoqingtuandui"></use>
</svg>
<div class="name">邀请团队</div>
<div class="code-name">#icon-yaoqingtuandui</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-a-tuikuanshouhou"></use>
</svg>
<div class="name">退款、售后</div>
<div class="code-name">#icon-a-tuikuanshouhou</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-daifukuan"></use>
</svg>
<div class="name">待付款</div>
<div class="code-name">#icon-daifukuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shezhi"></use>
</svg>
<div class="name">设置</div>
<div class="code-name">#icon-shezhi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-yanseduibi"></use>
</svg>
<div class="name">颜色对比</div>
<div class="code-name">#icon-yanseduibi</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-daifahuo"></use>
</svg>
<div class="name">待发货</div>
<div class="code-name">#icon-daifahuo</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-baoguo"></use>
</svg>
<div class="name">包裹</div>
<div class="code-name">#icon-baoguo</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tick-pressed"></use>
</svg>
<div class="name">tick-pressed</div>
<div class="code-name">#icon-tick-pressed</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-wode-pressed"></use>
</svg>
<div class="name">我的-pressed</div>
<div class="code-name">#icon-wode-pressed</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fenlei-pressed"></use>
</svg>
<div class="name">分类-pressed</div>
<div class="code-name">#icon-fenlei-pressed</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-sousuo"></use>
</svg>
<div class="name">搜索</div>
<div class="code-name">#icon-sousuo</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fenxiang"></use>
</svg>
<div class="name">分享</div>
<div class="code-name">#icon-fenxiang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shaixuan"></use>
</svg>
<div class="name">筛选</div>
<div class="code-name">#icon-shaixuan</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-gouwuche"></use>
</svg>
<div class="name">购物车</div>
<div class="code-name">#icon-gouwuche</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-qingkong"></use>
</svg>
<div class="name">清空</div>
<div class="code-name">#icon-qingkong</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jia"></use>
</svg>
<div class="name"></div>
<div class="code-name">#icon-jia</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-jian"></use>
</svg>
<div class="name"></div>
<div class="code-name">#icon-jian</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shoucang-pressed"></use>
</svg>
<div class="name">收藏-pressed</div>
<div class="code-name">#icon-shoucang-pressed</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-shoucang"></use>
</svg>
<div class="name">收藏</div>
<div class="code-name">#icon-shoucang</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-phone"></use>
</svg>
<div class="name">phone</div>
<div class="code-name">#icon-phone</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-tick"></use>
</svg>
<div class="name">tick</div>
<div class="code-name">#icon-tick</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-a-moreback"></use>
</svg>
<div class="name">more,back</div>
<div class="code-name">#icon-a-moreback</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-fenlei"></use>
</svg>
<div class="name">分类</div>
<div class="code-name">#icon-fenlei</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-bianji"></use>
</svg>
<div class="name">编辑</div>
<div class="code-name">#icon-bianji</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-wode"></use>
</svg>
<div class="name">我的</div>
<div class="code-name">#icon-wode</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-sort-up-full"></use>
</svg>
<div class="name">排序,升序</div>
<div class="code-name">#icon-sort-up-full</div>
</li>
<li class="dib">
<svg class="icon svg-icon" aria-hidden="true">
<use xlink:href="#icon-sort-down-full"></use>
</svg>
<div class="name">排序,降序</div>
<div class="code-name">#icon-sort-down-full</div>
</li>
</ul>
<div class="article markdown">
<h2 id="symbol-">Symbol 引用</h2>
<hr>
<p>这是一种全新的使用方式,应该说这才是未来的主流,也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
这种用法其实是做了一个 SVG 的集合,与另外两种相比具有如下特点:</p>
<ul>
<li>支持多色图标了,不再受单色限制。</li>
<li>通过一些技巧,支持像字体那样,通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
<li>兼容性较差,支持 IE9+,及现代浏览器。</li>
<li>浏览器渲染 SVG 的性能一般,还不如 png。</li>
</ul>
<p>使用步骤如下:</p>
<h3 id="-symbol-">第一步:引入项目下面生成的 symbol 代码:</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
<h3 id="-css-">第二步:加入通用 CSS 代码(引入一次就行):</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
width: 1em;
height: 1em;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
&lt;/style&gt;
</code></pre>
<h3 id="-">第三步:挑选相应图标并获取类名,应用于页面:</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
&lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('.tab-container .content:first').show()
$('#tabs li').click(function (e) {
var tabContent = $('.tab-container .content')
var index = $(this).index()
if ($(this).hasClass('active')) {
return
} else {
$('#tabs li').removeClass('active')
$(this).addClass('active')
tabContent.hide().eq(index).fadeIn()
}
})
})
</script>
</body>
</html>

View File

@ -0,0 +1,131 @@
@font-face {
font-family: "iconfont"; /* Project id 2987621 */
src: url('iconfont.woff2?t=1652068398646') format('woff2'),
url('iconfont.woff?t=1652068398646') format('woff'),
url('iconfont.ttf?t=1652068398646') format('truetype');
}
.iconfont {
font-family: "iconfont" !important;
font-size: 16px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.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";
}

File diff suppressed because one or more lines are too long

View File

@ -0,0 +1,212 @@
{
"id": "2987621",
"name": "电子商城",
"font_family": "iconfont",
"css_prefix_text": "icon-",
"description": "",
"glyphs": [
{
"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
}
]
}

View File

@ -1,7 +1,6 @@
@font-face {
font-family: "iconfont"; /* Project id 2987621 */
src:
url('iconfont.ttf?t=1650013104232') format('truetype');
src:url('iconfont.ttf?t=1652068398646') format('truetype');
}
.iconfont {

View File

@ -3,11 +3,11 @@ import { WX_APPID } from "@/common/constant"
import useUserInfo from "./useUserInfo"
import Taro, { useRouter } from "@tarojs/taro"
import { LoginApi } from "@/api/login"
import { GetWxUserInfoApi } from "@/api/user"
import { GetWxUserInfoApi, GetAdminUserInfoApi, GetPhoneNumberApi } from "@/api/user"
import qs from 'qs';
export default () => {
const {setToken, setSessionKey, setUserInfo, userInfo} = useUserInfo()
const {setToken, setSessionKey, setUserInfo, setAdminUserInfo, userInfo} = useUserInfo()
useEffect(() => {
console.log('userInfo::',userInfo.token)
@ -16,6 +16,7 @@ export default () => {
const router = useRouter()
//登录请求
const {fetchData} = LoginApi()
//微信登录
const wxLogin = () => {
return new Promise((reslove, reject) => {
@ -40,6 +41,9 @@ export default () => {
url: router.path +'?' + qs.stringify(params)
})
}
getAdminUserInfo()
//todo 删除本地授权用户信息,获取最新授权信息
} else {
Taro.showToast({
@ -62,6 +66,12 @@ export default () => {
}
//获取用户信息
const {fetchData: useFetchData} = GetAdminUserInfoApi()
const getAdminUserInfo = async () => {
let res = await useFetchData()
setAdminUserInfo(res.data)
}
//登录加checkLogin检查
const checkLogin = () => {
@ -89,38 +99,66 @@ export default () => {
const {fetchData: fetchDataUserInfo} = GetWxUserInfoApi()
const getSelfUserInfo = async () => {
return new Promise((reslove, reject) => {
if(!userInfo.userInfo) {
Taro.getUserProfile({
desc: '用于完善会员资料',
success: async (res) => {
if(!userInfo.session_key) {
await wxLogin()
}
const {data} = await fetchDataUserInfo({
session_key: userInfo.session_key,
raw_data: res.rawData,
signature: res.signature,
encrypted_data: res.encryptedData,
iv: res.iv
})
setUserInfo({...data})
reslove(data)
},
fail:(e) => {
reject(e)
}
})
} else {
if(userInfo.adminUserInfo?.is_authorize_name) {
reslove(true)
return true
}
Taro.getUserProfile({
desc: '用于完善会员资料',
success: async (res) => {
if(!userInfo.session_key) {
await wxLogin()
}
const user_res = await fetchDataUserInfo({
session_key: userInfo.session_key,
raw_data: res.rawData,
signature: res.signature,
encrypted_data: res.encryptedData,
iv: res.iv
})
if(user_res.success) {
setUserInfo({...user_res.data})
reslove(user_res.data)
getAdminUserInfo()
} else {
reject(user_res.msg)
}
},
fail:(e) => {
reject(e)
}
})
})
}
//获取手机号码
const {fetchData: fetchDataUserPhone} = GetPhoneNumberApi()
const getPhoneNumber = (code) =>{
return new Promise( async (reslove, reject) => {
if(userInfo.adminUserInfo?.is_authorize_phone) {
reslove(true)
return true
}
const res = await fetchDataUserPhone({code})
if(res.success) {
setUserInfo({...userInfo.userInfo, phone:res.data.phone_number})
getAdminUserInfo()
reslove(res.data)
} else {
reject(res.msg)
}
})
}
return {
checkLogin,
wxLogin,
getSelfUserInfo
getSelfUserInfo,
getPhoneNumber,
userInfo
}
}

View File

@ -1,6 +1,6 @@
import { useDispatch, useSelector } from 'react-redux'
import { CLEAR_SESSIONKEY, SET_USERINFO, SET_TOKEN, SET_SESSIONKEY, CLEAR_USERINFO, CLEAR_TOKEN} from '@/constants/userInfo'
import {DataParam, UserParam} from '@/reducers/userInfo'
import { CLEAR_SESSIONKEY, SET_USERINFO, SET_TOKEN, SET_SESSIONKEY, CLEAR_USERINFO, CLEAR_TOKEN, SET_ADMINUSERINFO} from '@/constants/userInfo'
import {DataParam, UserParam, UserAdminParam} from '@/reducers/userInfo'
export default () => {
const userInfo = useSelector((state:DataParam) => state.userInfo) as DataParam
const dispatch = useDispatch()
@ -17,6 +17,10 @@ export default () => {
dispatch({type:SET_USERINFO, data:{userInfo}})
}
const setAdminUserInfo = (adminUserInfo: UserAdminParam) => {
dispatch({type:SET_ADMINUSERINFO, data:{adminUserInfo}})
}
const removeUserInfo = () => {
dispatch({type:CLEAR_USERINFO})
}
@ -32,6 +36,7 @@ export default () => {
return {
setToken,
setUserInfo,
setAdminUserInfo,
setSessionKey,
removeUserInfo,
removeToken,