xuan/TestRestructureWechatLymarketDist
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

商城测试版v7

Browse Source
This commit is contained in:
cheng
2022-07-21 20:38:52 +08:00
parent 2b4017274a
commit c646bac0a4
21 changed files with 235 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/LabAndImg/index.tsx
+29 -19
View File
@@ -1,9 +1,10 @@
import { formatImgUrl } from "@/common/fotmat";
import { formatImgUrl, formatRemoveHashTag } from "@/common/fotmat";
import Preview from "@/pages/details/components/preview";
import { Image, View } from "@tarojs/components";
import { memo, useMemo, useState } from "react";
import { memo, useCallback, useEffect, useMemo, useState } from "react";
import styles from './index.module.scss'
import Taro from "@tarojs/taro";
import LabAndImgShow from "../LabAndImgShow";
//该组件宽高为100%需调整外层元素宽高
type Param = {
@@ -11,10 +12,14 @@ type Param = {
texture_url?: string, //纹理图路径
lab?: {l:number, a:number, b:number}, //lab
rgb?: {r:number, g:number, b:number} //rgb
title?: string
},
checkStatus: false|true
showStatus?: true|false,
onClick?: (val: Param['value']) => void
}
export default memo(({value, checkStatus = false}:Param) => {
export default memo(({value, onClick, showStatus = false}:Param) => {
const [imgs, setImgs] = useState<string[]>([])
//lab是否都是0
const rgbStyle = useMemo(() => {
if(value?.lab&&(value.lab.l||value.lab.a||value.lab.b)) {
@@ -24,27 +29,32 @@ export default memo(({value, checkStatus = false}:Param) => {
}
}, [value])
const [showPreview, setShowPreview] = useState(false)
const onClickShow = () => {
setShowPreview(() => true)
}
useEffect(() => {
if(value?.texture_url) {
let res = value.texture_url.split(',').map(item => {
return formatImgUrl(item)
})
setImgs(() => res)
}
}, [value])
const onShowImage = () => {
if(!checkStatus) return false
Taro.previewImage({
current: formatImgUrl(value?.texture_url, '!w800'), // 当前显示
urls: [formatImgUrl(value?.texture_url, '!w800')] // 需要预览的图片http链接列表
})
const [labAndImgShow, setLabAndImgShow] = useState(false)
const closeLabAndImgShow = useCallback(() => {
setLabAndImgShow(false)
}, [])
const onShowLabAndImg = () => {
if(!showStatus) return false
setLabAndImgShow(true)
}
return (
<>
<View className={styles.labAndImg_main}>
{value?.texture_url&&<Image mode="aspectFill" onClick={() => onShowImage()} src={formatImgUrl(value?.texture_url)}></Image>}
{(!value?.texture_url&&rgbStyle)&&<View className={styles.boxColor} onClick={() => onClickShow()} style={{...rgbStyle}}></View>}
{(!value?.texture_url&&!rgbStyle)&&<Image mode="aspectFill" src={formatImgUrl('')}></Image>}
<View className={styles.labAndImg_main} onClick={() => onShowLabAndImg()}>
{imgs?.length > 0&&<Image mode="aspectFill" src={imgs[0]}></Image>}
{(!imgs?.length&&rgbStyle)&&<View className={styles.boxColor} style={{...rgbStyle}}></View>}
{(!imgs?.length&&!rgbStyle)&&<Image mode="aspectFill" src={formatImgUrl('')}></Image>}
</View>
<Preview value={rgbStyle} show={showPreview} onClose={() => setShowPreview(false)}/>
<LabAndImgShow value={value} show={labAndImgShow} onClose={closeLabAndImgShow}/>
</>
)
})
src/components/LabAndImgShow/index.module.scss
+45
View File
@@ -0,0 +1,45 @@
.main{
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
background-color: rgba(0,0,0, 0.8);
display: flex;
justify-content: center;
align-items: flex-start;
z-index: 9999;
.con{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
height: 60vh;
margin-top: 100px;
padding: 20px;
box-sizing: border-box;
.rgb{
width: 600px;
height: 600px;
border-radius: 20px;
}
image{
width:100%;
border-radius: 10px;
}
.name {
width: 488px;
height: 72px;
color: #fff;
text-align: center;
font-size: 26px;
border-radius: 20px;
line-height: 72px;
margin-top: 10px;
background-color: rgba(0,0,0, 0.5);
padding: 0 10px;
@include common_ellipsis(1);
}
}
}
src/components/LabAndImgShow/index.tsx
+65
View File
@@ -0,0 +1,65 @@
import { formatImgUrl } from "@/common/fotmat"
import { View } from "@tarojs/components"
import { useEffect, useMemo, useState } from "react"
import styles from './index.module.scss'
import Taro from '@tarojs/taro'
export type colorParams = {
value?: {
texture_url?: string, //纹理图路径
lab?: {l:number, a:number, b:number}, //lab
rgb?: {r:number, g:number, b:number} //rgb
title?: string //标题
},
show?: false|true
onClose?: () => void,
showNumber?: number, //图片显示张数，0不限制
}
export default ({value, show = false, onClose, showNumber = 1}: colorParams) => {
useEffect(() => {
if(show&&rgbStyle) setLabShow(() => true)
if(show&&value?.texture_url) onShowImage()
if(!show) setLabShow(() => false)
}, [show])
//显示颜色
const [labShow, setLabShow] = useState(false)
//lab是否都是0
const rgbStyle = useMemo(() => {
if(value?.lab&&(value.lab.l||value.lab.a||value.lab.b)) {
return {'backgroundColor':`rgb(${value.rgb?.r} ${value.rgb?.g} ${value.rgb?.b})`}
} else {
return null
}
}, [value])
//显示图片
const onShowImage = () => {
onClose?.()
let res: string[] = []
if(value?.texture_url) {
res = value?.texture_url?.split(',').map(item => {
return formatImgUrl(item)
})
}
let n_res = showNumber == 0? res : res?.splice(0, showNumber)
Taro.previewImage({
current: n_res[0],
urls: n_res
})
}
return (
<>
{labShow&&<View className={styles.main} catch-move="true" onClick={() => onClose?.()}>
<View className={styles.con}>
<View className={styles.rgb} style={rgbStyle!}></View>
<View className={styles.name}>{value?.title}</View>
</View>
</View>}
</>
)
}
src/components/address/index.module.scss
-1
View File
@@ -4,7 +4,6 @@
.address_title{
display: flex;
justify-content: space-between;
color:$color_font_two;
font-size: $font_size;
padding: 20px;
padding-bottom: 0;
src/components/address/index.tsx
+12 -15
View File
@@ -12,6 +12,7 @@ type DefaultValueParm = {name: string, id:string|number, level?: number|string}
type Params = {
addressOnSelect?: (val:DefaultValueParm[]) => void,
addressOnChange?: (val:DefaultValueParm[]) => void,
addressOnClose?: () => void,
show?: true|false,
defaultValue?:DefaultValueParm[]
@@ -31,6 +32,7 @@ type AddresParam = {
export default memo(({
addressOnSelect,
addressOnChange,
addressOnClose,
show = false,
defaultValue = [],
@@ -84,7 +86,14 @@ export default memo(({
setSelectArr([selectArr[0], selectArr[1], {name:item.name, id:item.id, level:item.level}])
getDomDes('#address_tab_2')
}
}
//地址数据
useEffect(() => {
if(selectArr && selectArr.length > 0)
addressOnChange?.(selectArr)
}, [selectArr])
//选中标题
const onSelectIndex = (index) => {
@@ -148,20 +157,8 @@ export default memo(({
//确定按钮
const submitSelect = () => {
if(selectStatus) {
if(confirmBtnStatus || selectArr.length == 3) {
addressOnClose?.()
addressOnSelect?.(selectArr)
} else {
alert.error("请选择完整地址");
}
} else {
addressOnClose?.()
addressOnSelect?.(selectArr)
}
addressOnClose?.()
addressOnSelect?.(selectArr)
}
//获取省市区宽度
@@ -188,7 +185,7 @@ export default memo(({
return (
<>
<Drawer showTitle={false} show={show} onClose={() => addressOnClose?.()}>
<Drawer showTitle={false} show={show} onClose={submitSelect}>
<View className={styles.address_main}>
<View className={styles.address_title}>
<View onClick={() => addressOnClose?.()}>取消</View>
src/components/afterOrderBtns/index.tsx
+7
View File
@@ -65,6 +65,13 @@ export default memo(({orderInfo, onClick, fixedBottom = true}:Param) => {
return false
}
},
{
id: 5,
label: '上传物流',
validatarFunc: (orderInfo) => {
return orderInfo?.stage == ReturnStageWaitCheck.value
}
},
{
id: 6,
label: '取消退款',
src/components/product/index.tsx
+1 -2
View File
@@ -13,8 +13,7 @@ type Params = {
export default ({desStatus = true, productList = []}:Params) => {
const labAndImgObj = useCallback((item) => {
const img = item?item.texture_url.split(',')[0]:''
return {lab:item.lab,rgb:item.rgb,texture_url:img}
return {lab:item.lab,rgb:item.rgb,texture_url:item.texture_url}
}, [productList])
return (
<View className={styles.products_list}>
src/components/shopCart/index.tsx
+3 -1
View File
@@ -16,6 +16,8 @@ import Counter from "../counter";
import { ApplyOrderAccessApi, GetAdminUserInfoApi, SubscriptionMessageApi } from "@/api/user";
import useCommonData from "@/use/useCommonData";
import BindSalesmanPopup from "../bindSalesmanPopup";
import LabAndImgShow from "../LabAndImgShow";
import LabAndImg from "../LabAndImg";
type param = {
show?: true|false,
@@ -298,7 +300,7 @@ export default ({show = false, onClose, intoStatus='shop'}: param) => {
<MCheckbox disabled={selectIndex!=-1&&selectIndex!=item.sale_mode} status={!!checkboxData[item.id]} onSelect={() => selectCallBack(item)} onClose={() => colseCallBack(item)}/>
</View>
<View className={styles.img}>
<Image mode="aspectFill" src={formatImgUrl(item.texture_url)}/>
<LabAndImg value={{lab:item.lab,rgb:item.rgb,texture_url:item.texture_url, title:item.product_color_code}}/>
</View>
<View className={styles.product_item_name}>
<View className={styles.product_item_name_header}>