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

商城测试版v7

Browse Source
This commit is contained in:
czm 2022-07-21 20:38:52 +08:00
parent 2b4017274a
commit c646bac0a4
21 changed files with 235 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
src/components/LabAndImg/index.tsx
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}/>
</>
)
})

45
src/components/LabAndImgShow/index.module.scss Normal file
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);
}
}
}

65
src/components/LabAndImgShow/index.tsx Normal file
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>}
</>
)
}

1
src/components/address/index.module.scss
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;

27
src/components/address/index.tsx
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>

7
src/components/afterOrderBtns/index.tsx
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: '取消退款',

3
src/components/product/index.tsx
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}>

4
src/components/shopCart/index.tsx
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}>

6
src/pages/addressAdd/index.tsx
View File

@ -107,7 +107,7 @@ export default ()=>{
},[formData])
// 设置选择地址
const handleSetSite = (ev:any)=>{
if(ev.length>=3){
if(ev.length > 0){
setFormData({
...formData,
siteArray: ev,
@ -115,7 +115,7 @@ export default ()=>{
district_id: ev[ev.length-1]?.id
})
}else{
alert.error("请选择完整地址");
alert.error("请选择地址");
}
}
@ -138,7 +138,7 @@ export default ()=>{
<Button style={{"background": hozon?'#007aff':''}} hoverClass="none" className={`add-address-save`} onClick={handleSave}>
保存
</Button>
<Address addressOnSelect={handleSetSite} defaultValue={formData.siteArray} addressOnClose={()=>setShowSiteModal(false)} show={showSiteModal}/>
<Address addressOnChange={handleSetSite} defaultValue={formData.siteArray} addressOnClose={()=>setShowSiteModal(false)} show={showSiteModal}/>
</View>
)
}

6
src/pages/details/components/orderCount/index.tsx
View File

@ -13,11 +13,12 @@ import {GetColorList} from "@/api/materialColor"
import {AddShoppingCartApi} from "@/api/shopCart"
import Taro, { useRouter } from "@tarojs/taro";
import UseLogin from "@/use/useLogin"
import { formatHashTag, formatPriceDiv } from "@/common/fotmat";
import { formatHashTag, formatPriceDiv, formatRemoveHashTag } from "@/common/fotmat";
import { debounce, getFilterData } from "@/common/util";
import LabAndImg from "@/components/LabAndImg";
import VirtualList from '@tarojs/components/virtual-list'
import useCommonData from "@/use/useCommonData";
import LabAndImgShow from "@/components/LabAndImgShow";
@ -200,12 +201,11 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
//虚拟滚动
const Rows = useCallback(({id, index, style, data}:any) => {
let item = data[index]
console.log('123456')
return (
<>
{item&&<View className={styles.item} key={item.id}>
<View className={styles.item_color}>
<LabAndImg value={{lab:item.lab,rgb:item.rgb,texture_url:item.texture_url}}/>
<LabAndImg value={{lab:item.lab,rgb:item.rgb,texture_url:item.texture_url, title:item.code}} showStatus={false}/>
</View>
<View className={styles.item_con}>
<View className={styles.title}>{formatHashTag(item.code, item.name)}</View>

1
src/pages/details/components/preview/index.module.scss
View File

@ -8,6 +8,7 @@
display: flex;
justify-content: center;
align-items: flex-start;
z-index: 999;
.con{
display: flex;
justify-content: center;

30
src/pages/details/components/swiper/index.tsx
View File

@ -1,6 +1,7 @@
import { formatImgUrl } from "@/common/fotmat"
import { Image, Swiper, SwiperItem, View } from "@tarojs/components"
import { useMemo, useRef, useState } from "react"
import Taro from '@tarojs/taro'
import styles from './index.module.scss'
type item = {title:string, img:string, url:string, id:number}
@ -16,21 +17,32 @@ export default ({list = []}: params) => {
return list.length
},[list])
const formatImages = useMemo(() => {
return list?.map(item => formatImgUrl(item, '!w800'))
}, [list])
const swiperChange = (e) => {
setPageIndex(e.detail.current + 1)
}
const onShowImage = () => {
Taro.previewImage({
current: formatImages[0],
urls: formatImages
})
}
return (
<View className={styles.swiper}>
<Swiper className={styles.swiper_item} circular={true} onAnimationFinish={(e) => swiperChange(e)}>
{list?.map((item) => {
return <SwiperItem key={item.id}>
<View className={styles.image_item} >
<Image mode="aspectFill" src={formatImgUrl(item)}></Image>
</View>
</SwiperItem>
})}
</Swiper>
{list.length > 0 && <Swiper className={styles.swiper_item} circular={true} onAnimationFinish={(e) => swiperChange(e)}>
{list?.map((item) => {
return <SwiperItem >
<View className={styles.image_item} onClick={onShowImage}>
<Image mode="aspectFill" src={formatImgUrl(item, '!w400')}></Image>
</View>
</SwiperItem>
})}
</Swiper>}
{(list.length > 0)&&<View className={styles.page} ref={pageRef}>{pageIndex+'/'+pageCount}</View>}
</View>
)

19
src/pages/details/index.tsx
View File

@ -5,7 +5,6 @@ import classnames from "classnames";
import DesSwiper from './components/swiper';
import OrderCount from './components/orderCount';
import ShopCart from '@/components/shopCart';
import Preview,{colorItem} from './components/preview';
import styles from './index.module.scss'
import { useCallback, useEffect, useMemo, useState } from 'react';
import {formatHashTag} from '@/common/fotmat'
@ -20,6 +19,7 @@ import AddCollection from '@/components/addCollection';
import { AddFavoriteApi, DelFavoriteProductApi } from '@/api/favorite';
import useCommonData from '@/use/useCommonData';
import { IMG_CND_Prefix } from '@/common/constant';
import LabAndImgShow from '@/components/LabAndImgShow';
type item = {title:string, img:string, url:string, id:number}
@ -95,19 +95,6 @@ export default (props:Params) => {
// `
const html = ``
//弹窗提示
const [colorInfo, setColorInfo] = useState<colorItem>()
const [showPreview, setShowPreview] = useState(false)
const getColorItem = (item) => {
setColorInfo({
title: item.code,
texture_url: item.texture_url,
lab: item.lab,
rgb: item.rgb
})
setShowPreview(true)
}
const {setSortCode, userInfo : userObj } = useUserInfo()
//详情页获取分享短码
const {ShareDetail} = SHARE_SCENE
@ -209,9 +196,9 @@ export default (props:Params) => {
<View className={styles.title}>色号 ({productInfo?.product_color_list?.length})</View>
<View className={styles.list}>
{productInfo?.product_color_list?.map(item => {
return <View className={styles.item} onClick={() => getColorItem(item)}>
return <View key={item.id} className={styles.item}>
<View className={styles.item_color}>
<LabAndImg value={{lab:item.lab,rgb:item.rgb,texture_url:item.texture_url}}/>
<LabAndImg value={{lab:item.lab,rgb:item.rgb,texture_url:item.texture_url, title: item.code}} showStatus={true}/>
</View>
<View className={styles.item_name}>{item.code}</View>
</View>

3
src/pages/order/comfirm.tsx
View File

@ -151,7 +151,8 @@ import { throttle } from "@/common/util";
return false
}
let showModalRes = await Taro.showModal({
content: '确定提交订单?',
title: '确定提交订单?',
content: `发货方式为${submitOrderData?.shipment_mode == 1?'自提':'物流'}`,
confirmText: '确定',
cancelText: '取消',
})

6
src/pages/order/components/returnRecord/index.module.scss
View File

@ -1,10 +1,7 @@
.returnRecord_main{
height: 70vh;
.returnRecord_con{
padding: 0 20px;
}
.returnRecord_con{
padding-top: 20px;
padding: 20px;
}
.order_item{
background-color: #fff;
@ -12,6 +9,7 @@
padding: 20px;
box-sizing: border-box;
box-shadow: 0px 0px 12px 0px rgba(0,0,0,0.16);
margin-bottom: 20px;;
.header{
display: flex;
align-items: center;

11
src/pages/order/components/returnRecord/index.tsx
View File

@ -36,11 +36,10 @@ export default memo(({show, onClose, onSubmit, id}:Param) => {
const userInfo = useSelector(state => state.userInfo)
//获取订单列表
//获取售后订单列表
const {fetchData: listFetchData, state:orderState} = ReturnRecordApi()
const [orderData, setOrderData] = useState<{list:any[], total:number}>({list:[], total:0})
const getOrderList = async () => {
console.log('ida::', id)
let res = await listFetchData(getFilterData(searchField.current))
setOrderData({list: res.data.list, total: res.data.total})
}
@ -134,19 +133,19 @@ export default memo(({show, onClose, onSubmit, id}:Param) => {
<View className={styles.color_list}>
{item?.product_list?.[0].product_colors?.map((itemColor, index) => {
return (
(index <= 1)&&<View className={styles.color_item}>
(index <= 1)&&<View key={itemColor.id} className={styles.color_item}>
<View className={styles.color_title}>{formatHashTag(itemColor.code, itemColor.name)}</View>
<View className={styles.color_price}>{standardPrice(itemColor.sale_price, item.sale_mode)}</View>
<View className={styles.color_num}>×{formatCount(itemColor, itemColor.sale_mode)}</View>
<View className={styles.color_num}>×{formatCount(itemColor, item.sale_mode)}</View>
</View>
)
})
}
<View className={styles.color_item}>
{(item?.product_list?.[0].product_colors.length > 2) && <View className={styles.color_item}>
<View className={styles.color_more}>……</View>
<View className={styles.color_more}>……</View>
<View className={styles.color_more}>……</View>
</View>
</View>}
</View>
</View>
<View className={styles.color_count_num}>{numText(item)}</View>

5
src/pages/order/components/scanPay/index.tsx
View File

@ -74,7 +74,8 @@ export default memo(({show = true, onClose, company, orderInfo}:Param) => {
order_total_num: (orderInfo.total_number) + '',
qrcode:"", //跳转链接
order_total_weight: formatWeightDiv(orderInfo.total_estimate_weight).toString(), //订单布匹重量
list: lists
list: lists ,
show_qrcode: true //是否显示码单
}))
}
}, [orderInfo])
@ -171,7 +172,7 @@ export default memo(({show = true, onClose, company, orderInfo}:Param) => {
<View className={styles.scanPay_list}>
{(state.loading)&&<LoadingCard/>||
<ScrollView scrollY className={styles.scanPay_list}>
<Image mode="widthFix" src={payCodeImage} onClick={showImage}></Image>
<Image mode="widthFix" src={payCodeImage} showMenuByLongpress={true} onClick={showImage}></Image>
</ScrollView>}
</View>
<View className={styles.btns} onClick={saveImageCheck}>保存电子确认单</View>

13
src/pages/orderList/components/order/index.tsx
View File

@ -17,6 +17,7 @@ type Param = {
sale_mode: number,
sale_mode_name: string,
status_name: string,
shipment_mode: number,
shipment_mode_name: string,
product_list: any[],
total_fabrics: number,
@ -55,7 +56,7 @@ export default memo(({value, onClickBtn}: Param) => {
onClickBtn?.({status, orderInfo:value})
}, [value])
let {SaleOrderStatusTaking} = ORDER_STATUS
let {SaleOrderStatusTaking, SaleOrderStatusWaitingReceipt} = ORDER_STATUS
//订单状态
// const orderStatus = useCallback((item) => {
@ -76,6 +77,14 @@ export default memo(({value, onClickBtn}: Param) => {
return `${value?.total_fabrics} 种面料，${value?.total_colors} 种颜色，共 ${total_number_new}${value?.sale_mode == 0? ' 条':' 米'}`
}, [value])
//订单状态
const orderStatus = useMemo(() => {
if(value.status == SaleOrderStatusWaitingReceipt.value && value.shipment_mode == 1) {
return '待提货'
} else {
return value?.status_name
}
}, [value])
return (
<View className={styles.order_item}>
@ -90,7 +99,7 @@ export default memo(({value, onClickBtn}: Param) => {
<Text className={styles.order_no}>订单号：{value?.order_no}</Text>
<Text className={classnames(styles.miconfont, 'iconfont, icon-a-moreback')}></Text>
</View>
<View className={styles.product_status}>{value?.status_name}</View>
<View className={styles.product_status}>{orderStatus}</View>
</View>
</View>

3
src/pages/salesAfter/index.tsx
View File

@ -86,6 +86,8 @@ import styles from './index.module.scss'
} else if(val == 8) {
//申请记录
setApplyRecord(true)
} else if (val == 5) {
onShowLogistics(1)
}
}, [orderDetail])
@ -94,7 +96,6 @@ import styles from './index.module.scss'
getSaleOrderPreView()
})
//按钮所需数据
const orderInfo = useMemo(() => {
return {

11
src/pages/salesAfterList/components/order/index.module.scss
View File

@ -131,6 +131,17 @@
border-radius: 10px;
padding: 10px 22px;
margin-top: 20px;
display: flex;
justify-content: space-between;
.refund_amount{
font-size: 30rpx;
color: #007AFF;
text{
&:nth-child(1) {
font-size: 23px;
}
}
}
}
.order_number{
display: flex;

8
src/pages/salesAfterList/components/order/index.tsx
View File

@ -30,6 +30,7 @@ type Param = {
texturl_url: string,
type: number //2 退货 1 预收退款 3 销售
return_apply_order_id: number //退款申请单
refund_amount: number // 退款金额
},
onClickBtn?: (val:{status:number, orderInfo:Param['value']}) => void
}
@ -75,7 +76,7 @@ export default memo(({value, onClickBtn}: Param) => {
}, [value])
//售后单状态
const {ReturnStageQualityCheckPendingRefund, ReturnStageServiceOrderPendingRefund} = AFTER_ORDER_STATUS
const {ReturnStageQualityCheckPendingRefund, ReturnStageServiceOrderPendingRefund, ReturnStageReturned} = AFTER_ORDER_STATUS
const stage_name = useMemo(() => {
return [ReturnStageQualityCheckPendingRefund.value, ReturnStageServiceOrderPendingRefund.value].includes(value?.stage)?'待退款':value?.stage_name
}, [value])
@ -126,7 +127,10 @@ export default memo(({value, onClickBtn}: Param) => {
</View>}
</View>
</View>
<View className={styles.color_count_num}>{numText}</View>
<View className={styles.color_count_num}>
<Text>{numText}</Text>
{ReturnStageReturned.value == value?.stage && <Text className={styles.refund_amount}><Text>¥</Text>{formatPriceDiv(value?.refund_amount, 100, true)}</Text>}
</View>
<View className={styles.order_number}>
<Text>{value?.type == ReturnApplyOrderTypeReturnForRefund.value?'已申请退货':'已申请退款'}</Text>
<Text>订单号：{value?.order_no}</Text>