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

✨ feat(ID1000800浮窗提示客户经理电话完成):

Browse Source
This commit is contained in:
czm 2022-12-12 16:09:31 +08:00
parent 09d8d8f1ca
commit d7ef14a1a9
14 changed files with 515 additions and 308 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/common/constant.ts
View File

@ -5,12 +5,12 @@ export const BASE_URL = CURRENT_BASE_URL
// 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 = `https://pre.zzfzyc.com/lymarket` // 预发布
// export const BASE_URL = 'https://pre.zzfzyc.com/lymarket' // 预发布
// export const BASE_URL = `http://192.168.1.9:40001/lymarket` // 发
// export const BASE_URL = `http://192.168.1.9:50005/lymarket` // 发
// export const BASE_URL = `http://192.168.1.30:50001/lymarket` // 发
// export const BASE_URL = `https://dev.zzfzyc.com/lymarket` // 开发环境
// export const BASE_URL = `https://www.zzfzyc.com/lymarket` // 正式环境
// export const BASE_URL = 'https://www.zzfzyc.com/lymarket' // 正式环境
// export const BASE_URL = `http://192.168.1.5:40001/lymarket` // 王霞
// export const BASE_URL = 'http://192.168.1.7:50002/lymarket' // 添
// export const BASE_URL = 'http://192.168.1.28:50002/lymarket' // 婷

9
src/components/iconfont/iconfont.tsx
View File

@ -1,4 +1,3 @@
<<<<<<< HEAD
import React, { useState, useEffect, FC } from "react";
import { Block, View } from "@tarojs/components";
import "./iconfont.scss";
@ -25,7 +24,7 @@ function hex2rgb(hex) {
return "rgb(" + rgb.join(",") + ")";
}
export type IconNames = 'icon-rukou' | 'icon-renzhengchenggong' | 'icon-paixu' | 'icon-shaixuan' | 'icon-bodakehujingli' | 'icon-guanfangweixinkefu' | 'icon-tuijianbiaoqian' | 'icon-rukou' | 'icon-renzhengchenggong' | 'icon-wodekefu' | 'icon-yanseduibi' | 'icon-dizhiguanli' | 'icon-weixin' | 'icon-riqi' | 'icon-shuru' | 'icon-a-0tianzhangqi' | 'icon-huodaofukuan' | 'icon-huozhuziti' | 'icon-saomazhifu' | 'icon-xianxiahuikuan' | 'icon-yufukuan' | 'icon-xinzengshoucangjia' | 'icon-qingchusousuo' | 'icon-xuanzechenggong' | 'icon-gongnengtubiao-saomiao' | 'icon-bianjizidingyimadan' | 'icon-zidingyimadanyulan' | 'icon-yuanshimadanyulan' | 'icon-xiala' | 'icon-shangla' | 'icon-qingchuxinxi' | 'icon-sousuo' | 'icon-guanli' | 'icon-bianji' | 'icon-shoucangjia' | 'icon-shezhi' | 'icon-tishi' | 'icon-erweima' | 'icon-dianjishoucang' | 'icon-gouwuche' | 'icon-shoucangchenggong' | 'icon-fenxiangshangpin' | 'icon-kefu' | 'icon-xinzenganniu' | 'icon-jianshaoanniu' | 'icon-daifahuo2' | 'icon-daishouhuo2' | 'icon-tuikuan-shouhou' | 'icon-daipeibu2' | 'icon-daifukuan2';
export type IconNames = 'icon-dianhua' | 'icon-rukou' | 'icon-renzhengchenggong' | 'icon-paixu' | 'icon-shaixuan' | 'icon-bodakehujingli' | 'icon-guanfangweixinkefu' | 'icon-tuijianbiaoqian' | 'icon-rukou' | 'icon-renzhengchenggong' | 'icon-wodekefu' | 'icon-yanseduibi' | 'icon-dizhiguanli' | 'icon-weixin' | 'icon-riqi' | 'icon-shuru' | 'icon-a-0tianzhangqi' | 'icon-huodaofukuan' | 'icon-huozhuziti' | 'icon-saomazhifu' | 'icon-xianxiahuikuan' | 'icon-yufukuan' | 'icon-xinzengshoucangjia' | 'icon-qingchusousuo' | 'icon-xuanzechenggong' | 'icon-gongnengtubiao-saomiao' | 'icon-bianjizidingyimadan' | 'icon-zidingyimadanyulan' | 'icon-yuanshimadanyulan' | 'icon-xiala' | 'icon-shangla' | 'icon-qingchuxinxi' | 'icon-sousuo' | 'icon-guanli' | 'icon-bianji' | 'icon-shoucangjia' | 'icon-shezhi' | 'icon-tishi' | 'icon-erweima' | 'icon-dianjishoucang' | 'icon-gouwuche' | 'icon-shoucangchenggong' | 'icon-fenxiangshangpin' | 'icon-kefu' | 'icon-xinzenganniu' | 'icon-jianshaoanniu' | 'icon-daifahuo2' | 'icon-daishouhuo2' | 'icon-tuikuan-shouhou' | 'icon-daipeibu2' | 'icon-daifukuan2';
type PropsType = {
name: IconNames;
@ -83,7 +82,11 @@ const IconFont:FC<PropsType> = ({
className={classnames(icon, customClassName)}
/>
)} */}
{/* icon-paixu */}
{/* icon-dianhua */}
{ name === 'icon-dianhua' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M880.384 820.768c31.552-54.72 14.08-96.736-41.792-138.784-65.664-49.44-129.856-82.688-176-29.44 0 0-48.992 58.112-193.152-77.856-167.584-159.232-97.28-215.68-97.28-215.68 58.336-58.432 21.28-101.984-27.616-168-48.896-65.952-98.272-86.848-169.184-30.08C38.72 270.272 231.36 527.04 328.8 626.88c0 0 148.096 152.672 241.28 203.52l49.888 27.776c71.52 36.576 151.84 53.312 208.384 19.36 0 0 27.264-13.984 52.032-56.8z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(51,127,255)'}' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
{/* icon-paixu */}
>>>>>>> f0abc88 (✨ feat(ID1000800浮窗提示客户经理电话完成):)
{ name === 'icon-paixu' && (<View style={{backgroundImage: `url(${quot}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize}px' height='${svgSize}px'%3E%3Cpath d='M512 940l200-260H312zM512 84l200 260H312z' fill='${(isStr ? colors : colors?.[0]) || 'rgb(0,0,0)'}' opacity='.5' /%3E%3C/svg%3E${quot})`, width: `${svgSize}px`, height: `${svgSize}px`, ...customStyle}} className={classnames("icon", customClassName)} />) }
{/* icon-shaixuan */}

82
src/components/moveBtn/index.module.scss
View File

@ -1,34 +1,54 @@
.movableItem{
.movableItem {
width: 100%;
height: 100%;
}
.moveBtn {
width: 100px;
height: 100px;
border-radius: 50%;
border: 2px solid #cde5ff;
box-shadow: 0px 0px 20px 0px rgba(104, 180, 255, 0.7);
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
z-index: 999;
position: fixed;
image {
width: 100%;
height: 100%;
}
.shop_icon {
font-size: 70px;
color: $color_main;
}
.product_num {
position: absolute;
font-size: 23px;
background-color: red;
color: #fff;
height: 36px;
line-height: 36px;
padding: 0 6px;
border-radius: 72px;
min-width: 25px;
text-align: center;
top: 0;
right: 0;
}
.wxBtn {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
}
}
.no_bg_moveBtn {
box-shadow: none;
background-color: transparent;
border: none;
width: 130px;
height: 130px;
}
.moveBtn{
width: 100px;
height: 100px;
border-radius: 50%;
border: 2px solid #cde5ff;
box-shadow: 0px 0px 20px 0px rgba(104,180,255,0.70);
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
z-index:999;
.shop_icon{
font-size: 70px;
color: $color_main;
}
.product_num{
position: absolute;
font-size: 23px;
background-color: red;
color: #fff;
height: 36px;
line-height: 36px;
padding: 0 6px;
border-radius: 72px;
min-width: 25px;
text-align: center;
top: 0;
right: 0;
}
}

69
src/components/moveBtn/index.tsx
View File

@ -1,4 +1,4 @@
import { MovableArea, MovableView, View } from '@tarojs/components'
import { Button, Image, MovableArea, MovableView, View } from '@tarojs/components'
import Taro, { useDidShow, useReady, useRouter } from '@tarojs/taro'
import type { ReactElement } from 'react'
import { useEffect, useLayoutEffect, useRef, useState } from 'react'
@ -7,49 +7,96 @@ import styles from './index.module.scss'
import { GetShoppingCartApi } from '@/api/shopCart'
import useCommonData from '@/use/useCommonData'
import { useSelector } from '@/reducers/hooks'
import { alert } from '@/common/common'
import { formatImgUrl } from '@/common/fotmat'
type ShowStatus = 'shop'|'customer'|'order'
interface param {
children?: ReactElement | null
onClick?: () => void
showList?: ShowStatus[]
orderInfo?: any
}
const MoveBtn = ({ children = null, onClick }: param) => {
const MoveBtn = ({ children = null, onClick, showList = [], orderInfo }: param) => {
const userInfo = useSelector(state => state.userInfo)
// 获取购物车数据数量
const { getShopCount, commonData } = useCommonData()
const [screenHeight, setScreenHeight] = useState(0)
const [screenHeight, setScreenHeight] = useState<{ shop?: number; customer?: number; order?: number }>({
shop: 0,
customer: 0,
order: 0,
})
const [showMoveBtn, setShowMoveBtn] = useState(false)
const screenWidthRef = useRef(0)
useLayoutEffect(() => {
useEffect(() => {
const res = Taro.getSystemInfoSync()
if (res.screenHeight) {
const ratio = 750 / res.screenWidth
setScreenHeight(res.screenHeight * ratio - 460)
const num = res.screenHeight * ratio
setScreenHeight(() => ({ shop: num - 460, customer: num - 580, order: num - 700 }))
screenWidthRef.current = res.screenWidth / 2
}
setShowMoveBtn(true)
})
}, [])
useDidShow(() => {
getShopCount()
})
const dragEnd = (e) => {}
const onShow = (val: ShowStatus) => {
if (showList.length <= 0) { return true }
return showList.includes(val)
}
const onPhone = () => {
if (!userInfo?.adminUserInfo?.sale_user_phone) { return alert.error('手机号不能为空') }
Taro.makePhoneCall({
phoneNumber: userInfo?.adminUserInfo?.sale_user_phone,
})
}
return (
<MovableArea className={styles.movableItem}>
{children}
<MovableView
{onShow('shop') && <MovableView
onClick={onClick}
className={styles.moveBtn}
direction="all"
inertia
x="630rpx"
y={`${screenHeight}rpx`}
onTouchEnd={e => dragEnd(e)}
y={`${screenHeight.shop}rpx`}
>
<View className={classnames('iconfont', 'icon-gouwuche', styles.shop_icon)}></View>
{commonData.shopCount > 0 && <View className={styles.product_num}>{commonData.shopCount > 99 ? '99+' : commonData.shopCount}</View>}
</MovableView>
</MovableView>}
{onShow('order') && <MovableView
className={styles.moveBtn}
direction="all"
inertia
x="630rpx"
y={`${screenHeight.order}rpx`}
>
<View className={classnames('iconfont', 'icon-kefu', styles.shop_icon)}>
<Button
className={styles.wxBtn}
openType="contact"
sendMessageTitle={orderInfo?.order_no}
showMessageCard
sendMessagePath={`/pages/order/index?id=${orderInfo?.id}`}
></Button>
</View>
</MovableView>}
{onShow('customer') && <MovableView
className={classnames(styles.moveBtn, styles.no_bg_moveBtn)}
direction="all"
inertia
x="630rpx"
onClick={onPhone}
y={`${screenHeight.customer}rpx`}
>
<Image mode="aspectFit" src={formatImgUrl('/mall/float_button_customer_service.png')} />
</MovableView>}
</MovableArea>
)
}

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

@ -19,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 MoveBtn from '@/components/moveBtn'
interface item { title: string; img: string; url: string; id: number }

2
src/pages/index/index.tsx
View File

@ -95,7 +95,7 @@ const Index = () => {
categoryList()
}, [])
return (
<MoveBtn onClick={() => setShowShopCart(!showShopCart)}>
<MoveBtn showList={['shop']} onClick={() => setShowShopCart(!showShopCart)}>
<View className={styles.main}>
<View className={styles.header}>
<View className={styles.search}>

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

@ -16,6 +16,7 @@ import { SubscriptionMessageApi } from '@/api/user'
import { SUBSCRIPTION_MESSAGE_SCENE } from '@/common/enum'
import { UseSubscriptionMessage } from '@/use/useCommon'
import { throttle } from '@/common/util'
import MoveBtn from '@/components/moveBtn'
const Comfirm = () => {
const [showDesc, setShowDesc] = useState(false)
@ -177,32 +178,34 @@ const Comfirm = () => {
}
}, [preViewOrder])
return (
<View className={styles.order_main}>
<AddressInfoDetail orderInfo={defaultAddress} onSelect={getAddress} onChangeShipmentMode={selectShipmentMode} status={1} />
<KindList order={formatPreViewOrderMemo} comfirm />
<View className={styles.order_desc} onClick={() => setShowDesc(true)}>
<View className={styles.order_desc_con}>订单备注</View>
{(submitOrderData?.remark && <View className={styles.order_desc_text}>{submitOrderData?.remark}</View>) || <View className={styles.order_desc_text_hint}>填写备注</View>}
<View className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></View>
</View>
<View className={styles.submit_order}>
<View className={styles.submit_order_number}>
<SubmitOrderBtn
style={{ color: '#007AFF' }}
number={(preViewOrder?.sale_mode == 1 ? formatPreViewOrder?.total_should_collect_money : formatPreViewOrder?.estimate_amount) / 100}
priceTitle={preViewOrder?.sale_mode == 1 ? '合计金额' : '预估金额'}
/>
<View className={styles.order_number_desc}>{numText}</View>
<MoveBtn showList={['customer']}>
<View className={styles.order_main}>
<AddressInfoDetail orderInfo={defaultAddress} onSelect={getAddress} onChangeShipmentMode={selectShipmentMode} status={1} />
<KindList order={formatPreViewOrderMemo} comfirm />
<View className={styles.order_desc} onClick={() => setShowDesc(true)}>
<View className={styles.order_desc_con}>订单备注</View>
{(submitOrderData?.remark && <View className={styles.order_desc_text}>{submitOrderData?.remark}</View>) || <View className={styles.order_desc_text_hint}>填写备注</View>}
<View className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></View>
</View>
<View className={classnames(styles.order_btn, btnStatus && styles.ok_order_btn)} onClick={() => submitOrderEven()}>
<View className={styles.submit_order}>
<View className={styles.submit_order_number}>
<SubmitOrderBtn
style={{ color: '#007AFF' }}
number={(preViewOrder?.sale_mode == 1 ? formatPreViewOrder?.total_should_collect_money : formatPreViewOrder?.estimate_amount) / 100}
priceTitle={preViewOrder?.sale_mode == 1 ? '合计金额' : '预估金额'}
/>
<View className={styles.order_number_desc}>{numText}</View>
</View>
<View className={classnames(styles.order_btn, btnStatus && styles.ok_order_btn)} onClick={() => submitOrderEven()}>
提交订单
</View>
</View>
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)}>
<Remark defaultValue={submitOrderData?.remark} onSave={e => getRemark(e)} />
</Popup>
<View className="common_safe_area_y"></View>
</View>
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)}>
<Remark defaultValue={submitOrderData?.remark} onSave={e => getRemark(e)} />
</Popup>
<View className="common_safe_area_y"></View>
</View>
</MoveBtn>
)
}

267
src/pages/order/components/payment/index.module.scss
View File

@ -1,139 +1,136 @@
$top:190px;
.payment_main{
.payment_con{
padding: 20px;
background-color: #F6F6F6;
border-radius: 20px;
.miconfont_title{
transform: rotate(-180deg);
position: absolute;
left: 20px;
top: 27px;
font-size: 37px;
color: $color_font_three;
z-index: 99;
}
$top: 190px;
.payment_main {
.payment_con {
padding: 20px;
background-color: #f6f6f6;
border-radius: 20px;
.miconfont_title {
transform: rotate(-180deg);
position: absolute;
left: 20px;
top: 27px;
font-size: 37px;
color: $color_font_three;
z-index: 99;
}
.title{
font-size: $font_size_big;
color: #000000;
text-align: center;
font-weight: 700;
position: relative;
}
.amount{
text-align: center;
padding: 25px 0;
}
.playMode{
width: 100%;
padding-bottom: 20px;
font-size: 26px;
text-align: center;
color: #707070;
}
.payment_list{
background-color: #fff;
// box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.16);
min-height: 300px;
border-radius: 10px;
padding-bottom: 100px;
position: relative;
// background: radial-gradient(circle 20px at left $top, transparent 20px, #fff 20px + 3px) left 0px/60% no-repeat ,
// radial-gradient(circle 20px at right $top, transparent 20px, #fff 20px + 3px) right 0px/60% no-repeat;
// filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, .16));
position: relative;
&::before{
content: '';
position: absolute;
border-bottom: 3px dashed #ccc;
top: $top;
width: calc(100% - 50px);
left:0;
right: 0;
margin: auto;
}
.title {
font-size: $font_size_big;
color: #000000;
text-align: center;
font-weight: 700;
position: relative;
}
.amount {
text-align: center;
padding: 25px 0;
}
.playMode {
width: 100%;
padding-bottom: 20px;
font-size: 26px;
text-align: center;
color: #707070;
}
}
.payment_list_top_border{
height: 32px;
width: 100%;
background: linear-gradient(215deg,#cde5ff 2%, #cde5ff 2%, #68b4ff 72%);
border-radius: 10px 10px 0px 0px;
}
.payment_list_title{
text-align: center;
padding: 30px 0 50px 0;
font-size: $font_size;
color: $color_font_three;
.payment_list_title_price_item{
display: flex;
justify-content: space-between;
padding: 0 90px;
&:nth-child(1) {
margin-bottom: 15px;
}
}
text{
&:nth-child(2) {
color: $color_main;
}
}
}
.payment_list_con{
padding: 20px 30px 0 30px;
.payment_list_item{
display: flex;
justify-content: space-between;
align-items: center;
height: 123px;
&:nth-last-child(n+2) {
border-bottom: 2px solid #F3F3F3;
}
}
.payment_list_item_left{
display: flex;
flex-direction: column;
font-size: $font_size;
.payment_list_item_left_name{
display: flex;
align-items: center;
}
.miconfont{
font-size: 30px;
color: #007AFF;
padding-right: 10px;
}
.advance_payment{
color: #FFC300;
}
.account_period{
color: #07C160;
}
.payment_list_item_left_price{
font-size: $font_size_min;
color: $color_font_two;
padding-left: 35px;
padding-top: 5px;
}
}
.miconfont_more{
font-size: 20px;
}
}
.payment_list {
background-color: #fff;
// box-shadow: 2px 2px 6px 0px rgba(0,0,0,0.16);
min-height: 300px;
border-radius: 10px;
padding-bottom: 100px;
position: relative;
// background: radial-gradient(circle 20px at left $top, transparent 20px, #fff 20px + 3px) left 0px/60% no-repeat ,
// radial-gradient(circle 20px at right $top, transparent 20px, #fff 20px + 3px) right 0px/60% no-repeat;
// filter: drop-shadow(2px 2px 6px rgba(0, 0, 0, .16));
position: relative;
&::before {
content: '';
position: absolute;
border-bottom: 3px dashed #ccc;
top: $top;
width: calc(100% - 50px);
left: 0;
right: 0;
margin: auto;
}
.btns{
background: #007aff;
border-radius: 40px;
width: 668px;
height: 82px;
text-align: center;
line-height: 80px;
width: 100%;
color: #fff;
font-size: 32px;
margin-top: 30px;
.payment_list_top_border {
height: 32px;
width: 100%;
background: linear-gradient(215deg, #cde5ff 2%, #cde5ff 2%, #68b4ff 72%);
border-radius: 10px 10px 0px 0px;
}
}
.payment_list_title {
text-align: center;
padding: 30px 0 50px 0;
font-size: $font_size;
color: $color_font_three;
.payment_list_title_price_item {
display: flex;
justify-content: space-between;
padding: 0 90px;
&:nth-child(1) {
margin-bottom: 15px;
}
}
text {
&:nth-child(2) {
color: $color_main;
}
}
}
.payment_list_con {
padding: 20px 30px 0 30px;
.payment_list_item {
display: flex;
justify-content: space-between;
align-items: center;
height: 123px;
&:nth-last-child(n + 2) {
border-bottom: 2px solid #f3f3f3;
}
}
.payment_list_item_left {
display: flex;
flex-direction: column;
font-size: $font_size;
.payment_list_item_left_name {
display: flex;
align-items: center;
}
.miconfont {
font-size: 30px;
color: #007aff;
padding-right: 10px;
}
.advance_payment {
color: #ffc300;
}
.account_period {
color: #07c160;
}
.payment_list_item_left_price {
font-size: $font_size_min;
color: $color_font_two;
padding-left: 35px;
padding-top: 5px;
}
}
.miconfont_more {
font-size: 20px;
}
}
}
.btns {
background: #007aff;
border-radius: 40px;
width: 668px;
height: 82px;
text-align: center;
line-height: 80px;
width: 100%;
color: #fff;
font-size: 32px;
margin-top: 30px;
}
}

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

@ -24,6 +24,7 @@ import { alert, goLink } from '@/common/common'
import { SubscriptionMessageApi } from '@/api/user'
import { AddShoppingCartApi } from '@/api/shopCart'
import { EditSaleOrderRemarkApi, GetSaleOrderDetailApi } from '@/api/order'
import MoveBtn from '@/components/moveBtn'
const Order = () => {
useLogin()
@ -286,7 +287,7 @@ const Order = () => {
[orderDetail],
)
return (
<MovableAreaBtn orderInfo={orderDetail}>
<MoveBtn showList={['order', 'customer']}>
<View className={styles.order_main}>
{(orderDetail?.status != SaleorderstatusWaitingPrePayment.value && <OrderState orderInfo={orderDetail} />) || (
<AdvanceOrderState orderInfo={orderDetail} onRefresh={refresh} />
@ -343,7 +344,7 @@ const Order = () => {
<ReturnRecord show={returnRecordShow} onClose={closeReturnRecord} id={orderDetail?.id} />
<View className="common_safe_area_y"></View>
</View>
</MovableAreaBtn>
</MoveBtn>
)
}
export default Order

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

@ -16,6 +16,7 @@ import AfterOrderBtns from '@/components/afterOrderBtns'
import { formatDateTime, formatImgUrl } from '@/common/fotmat'
import { AFTER_ORDER_STATUS } from '@/common/enum'
import { SaleOrderOrderDetailApi } from '@/api/salesAfterOrder'
import MoveBtn from '@/components/moveBtn'
const OrderDes = ({ orderInfo }: { orderInfo?: any }) => {
// 复制功能
@ -31,6 +32,7 @@ const OrderDes = ({ orderInfo }: { orderInfo?: any }) => {
})
}
return (
<View className={styles.order_info}>
<View className={styles.order_info_title}>订单信息</View>
<SearchInput showBorder={false} title="售后单号" height="50rpx">
@ -140,7 +142,7 @@ const SalesAfter = () => {
}, [orderDetail])
// 售后订单状态枚举
const { } = AFTER_ORDER_STATUS
// const { } = AFTER_ORDER_STATUS
// 物流显示
const [logisticsShow, setLogisticsShow] = useState(false)
@ -187,26 +189,28 @@ const SalesAfter = () => {
if (orderDetail) { formatData() }
}, [orderDetail])
return (
<View className={styles.order_main}>
<OrderState orderInfo={orderDetail} />
<AddressInfoDetail orderInfo={orderDetail} onLogistics={onShowLogistics} />
<KindList order={formatPreViewOrderMemo} />
<OrderDesWithMemo orderInfo={orderDetail} />
<AfterOrderBtns orderInfo={orderInfo} onClick={orderStateClick} />
<AfterSalePrictureWithMemo urls={orderDetail?.fabric_piece_accessory_url} />
<ReturnLogistics
onlyRead={logistics}
images={orderDetail?.accessory_url}
descValue={orderDetail?.take_goods_remark}
show={logisticsShow}
id={orderDetail?.return_apply_order_id}
onClose={onCloseLogistics}
onSubmit={logisticsSuccess}
/>
<ApplyRecord show={applyRecord} id={orderDetail?.id} onClose={() => setApplyRecord(false)} />
<ReturnPayCheck orderInfo={orderDetail} show={returnCodeShow} onClose={() => setReturnCodeShow(false)} />
<View className="common_safe_area_y"></View>
</View>
<MoveBtn showList={['customer']}>
<View className={styles.order_main}>
<OrderState orderInfo={orderDetail} />
<AddressInfoDetail orderInfo={orderDetail} onLogistics={onShowLogistics} />
<KindList order={formatPreViewOrderMemo} />
<OrderDesWithMemo orderInfo={orderDetail} />
<AfterOrderBtns orderInfo={orderInfo} onClick={orderStateClick} />
<AfterSalePrictureWithMemo urls={orderDetail?.fabric_piece_accessory_url} />
<ReturnLogistics
onlyRead={logistics}
images={orderDetail?.accessory_url}
descValue={orderDetail?.take_goods_remark}
show={logisticsShow}
id={orderDetail?.return_apply_order_id}
onClose={onCloseLogistics}
onSubmit={logisticsSuccess}
/>
<ApplyRecord show={applyRecord} id={orderDetail?.id} onClose={() => setApplyRecord(false)} />
<ReturnPayCheck orderInfo={orderDetail} show={returnCodeShow} onClose={() => setReturnCodeShow(false)} />
<View className="common_safe_area_y"></View>
</View>
</MoveBtn>
)
}
export default SalesAfter

65
src/pages/user/components/customer/index.module.scss Normal file
View File

@ -0,0 +1,65 @@
.customer_service_list {
.customer_service_title {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 24px;
box-sizing: border-box;
text {
&:nth-child(1) {
font-size: 32px;
font-weight: 500;
color: #000000;
}
&:nth-child(2) {
font-size: 24px;
font-weight: 400;
color: rgba(0, 0, 0, 0.4);
}
}
}
.customer_service_con {
padding: 0 32px;
.customer_service_item {
display: flex;
align-items: center;
padding: 32px 40px;
box-sizing: border-box;
width: 686px;
height: 136px;
background: #ffffff;
box-shadow: 0px 0px 28px -3px rgba(0, 0, 0, 0.06);
border-radius: 16px;
margin-top: 16px;
position: relative;
button {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
}
.customer_service_item_con {
display: flex;
flex-direction: column;
flex: 1;
margin-left: 24px;
text {
&:nth-child(1) {
font-size: 28px;
}
&:nth-child(2) {
font-size: 24px;
color: rgba(0, 0, 0, 0.4);
}
}
}
.customer_service_item_icon {
transform: rotate(-90deg);
}
}
}
}

57
src/pages/user/components/customer/index.tsx Normal file
View File

@ -0,0 +1,57 @@
import { Button, Text, View } from '@tarojs/components'
import Taro from '@tarojs/taro'
import { useState } from 'react'
import styles from './index.module.scss'
import IconFont from '@/components/iconfont/iconfont'
import Popup from '@/components/popup'
import { useSelector } from '@/reducers/hooks'
import { alert } from '@/common/common'
interface Param {
onClose?: () => void
show: boolean
}
export default (props: Param) => {
const userInfo = useSelector(state => state.userInfo)
const makePhoneCall = () => {
if (!userInfo?.adminUserInfo?.sale_user_phone) { return alert.error('手机号不能为空') }
Taro.makePhoneCall({
phoneNumber: userInfo?.adminUserInfo?.sale_user_phone,
})
}
const onClose = () => {
props.onClose?.()
}
return <Popup show={props.show} showTitle={false} onClose={onClose}>
<View className={styles.customer_service_list}>
<View className={styles.customer_service_title}>
<Text>请选择您要的服务</Text>
<Text>我们根据选择为您提供服务</Text>
</View>
<View className={styles.customer_service_con}>
<View className={styles.customer_service_item}>
<IconFont name="icon-guanfangweixinkefu" size={60} />
<View className={styles.customer_service_item_con}>
<Text>官方微信客服</Text>
<Text>竭诚为您服务！</Text>
</View>
<View className={styles.customer_service_item_icon}>
<IconFont name="icon-xiala" />
</View>
<Button openType="contact" className={styles.customer} />
</View>
{userInfo?.adminUserInfo?.sale_user_id && <View onClick={makePhoneCall} className={styles.customer_service_item}>
<IconFont name="icon-bodakehujingli" size={60} />
<View className={styles.customer_service_item_con}>
<Text>客户经理</Text>
<Text>点击拨打{userInfo?.adminUserInfo?.sale_user_phone}</Text>
</View>
<View className={styles.customer_service_item_icon}>
<IconFont name="icon-xiala" />
</View>
</View>}
</View>
</View>
</Popup>
}

167
src/pages/user/index.tsx
View File

@ -1,17 +1,16 @@
import { Button, Image, Text, View } from '@tarojs/components'
import Taro, { useDidShow, usePullDownRefresh } from '@tarojs/taro'
import classnames from 'classnames'
import { useMemo } from 'react'
import { useMemo, useState } from 'react'
import styles from './index.module.scss'
import namedPng from '@/styles/image/user_header.png'
import price_bg from '@/styles/image/price_bg.png'
import LabAndImg from '@/components/LabAndImg'
import Customer from './components/customer'
import { useSelector } from '@/reducers/hooks'
import { alert, goLink } from '@/common/common'
import { formatImgUrl, formatPriceDiv } from '@/common/fotmat'
import { userassets, userorderStatistics } from '@/api/mine'
import useLogin from '@/use/useLogin'
import IconFont from '@/components/iconfont/iconfont'
import MoveBtn from '@/components/moveBtn'
export default () => {
const userInfo = useSelector(state => state.userInfo)
@ -25,6 +24,11 @@ export default () => {
Apiassets()
})
const [customer_service_show, set_customer_service_show] = useState(false)
const customerClose = () => {
set_customer_service_show(false)
}
const priceList = useMemo(() => {
console.log('priceState::', priceState.data)
return [
@ -53,12 +57,15 @@ export default () => {
{ label: '地址管理', icon: 'icon-dizhiguanli', callback: () => goLink('/pages/addressManager/index') },
{ label: '码单管理', icon: 'icon-yanseduibi', callback: () => goLink('/pages/weightList/index') },
{ label: '颜色对比', icon: 'icon-yanseduibi', callback: () => goLink('/pages/sampleComparison/index') },
{ label: '我的客服', icon: 'icon-wodekefu', text: '7x24小时服务', type: 'customer' },
{ label: '我的客服', icon: 'icon-wodekefu', text: '7x24小时服务', callback: () => (set_customer_service_show(true)) },
]
const mGetPhoneNumber = (ev) => {
const mGetPhoneNumber = async(ev) => {
if (ev.detail?.code) {
getPhoneNumber(ev.detail.code)
await getPhoneNumber(ev.detail.code)
await ApigetTotal()
await getAdminUserInfo()
await Apiassets()
}
else {
alert.none('绑定失败!')
@ -76,89 +83,91 @@ export default () => {
Taro.stopPullDownRefresh()
})
return <View className={styles.user_main}>
{!userInfo?.adminUserInfo?.phone && <Button className={styles.getPhoneButton} openType="getPhoneNumber" onGetPhoneNumber={mGetPhoneNumber}></Button>}
<View className={styles.user_main__header}>
<View className={styles.header_img_name}>
<View className={styles.header_img}>
<Image className={styles.header_img_src} mode="aspectFill" src={`${userInfo?.adminUserInfo?.avatar_url}`} />
</View>
<View className={styles.header_name}>
<Text>{userInfo?.adminUserInfo?.phone ? userInfo?.adminUserInfo?.user_name : '点击登录'}</Text>
<View className={styles['arcd-info-left-phone']}>
<View className={styles.header_title}> {userInfo?.adminUserInfo?.phone || 'Hi,欢迎来到陆盈商城'}</View>
return (
<View className={styles.user_main}>
{!userInfo?.adminUserInfo?.phone && <Button className={styles.getPhoneButton} openType="getPhoneNumber" onGetPhoneNumber={mGetPhoneNumber}></Button>}
<View className={styles.user_main__header}>
<View className={styles.header_img_name}>
<View className={styles.header_img}>
<Image className={styles.header_img_src} mode="aspectFill" src={`${userInfo?.adminUserInfo?.avatar_url}`} />
</View>
<View className={styles.header_name}>
<Text>{userInfo?.adminUserInfo?.phone ? userInfo?.adminUserInfo?.user_name : '点击登录'}</Text>
<View className={styles['arcd-info-left-phone']}>
<View className={styles.header_title}> {userInfo?.adminUserInfo?.phone || 'Hi,欢迎来到陆盈商城'}</View>
</View>
<View className={styles.header_picture} ><IconFont name="icon-renzhengchenggong" size={30} /><View className={styles.header_picture_name}>{userInfo?.adminUserInfo?.company_name}</View></View>
</View>
<View className={styles.header_setting} onClick={() => goLink('/pages/userEdit/index')}>
<IconFont name="icon-shezhi" size={50} />
</View>
<View className={styles.header_picture} ><IconFont name="icon-renzhengchenggong" size={30} /><View className={styles.header_picture_name}>{userInfo?.adminUserInfo?.company_name}</View></View>
</View>
<View className={styles.header_setting} onClick={() => goLink('/pages/userEdit/index')}>
<IconFont name="icon-shezhi" size={50} />
<View className={styles.header_count}>
<View className={styles.header_count__item} onClick={() => goLink('/pages/collection/index')}>
<Text>{userInfo?.adminUserInfo?.collection_quantity || 0}</Text>
<Text>商品收藏</Text>
</View>
<View className={styles.header_count__item} onClick={integral}>
<Text>0</Text>
<Text>活动积分</Text>
</View>
<View className={styles.header_count__item} onClick={() => goLink('/pages/bindSalesman/index')}>
<IconFont name="icon-erweima" size={50} />
<Text>邀请码</Text>
</View>
</View>
{userInfo?.adminUserInfo?.order_access_status == 3 && <View className={styles.price_count}>
<View className={styles.price_count_list}>
{priceList?.map((item, index) => {
return <View key={index} className={styles.list_item} >
<Text className={styles.list_item_title}>{item.label}</Text>
<View className={styles.list_item_number}><Text>¥</Text> {item.value}</View>
</View>
})}
<Image className={styles.price_bg} src={formatImgUrl('/mall/price_bg.png', '')} mode="aspectFit"></Image>
</View>
</View>}
<Image className={styles.header_bg} src={formatImgUrl('/mall/user_header_bg.png', '')} mode="aspectFit"></Image>
</View>
<View className={styles.header_count}>
<View className={styles.header_count__item} onClick={() => goLink('/pages/collection/index')}>
<Text>{userInfo?.adminUserInfo?.collection_quantity || 0}</Text>
<Text>商品收藏</Text>
<View className={styles.order_count}>
<View className={styles.order_count__title}>
<Text className={styles.title_text}>我的订单</Text>
<View className={styles.title__more} onClick={() => goLink('/pages/order/orderList/index')}>
<Text>全部订单</Text>
<View className={styles.title_more_icon}><IconFont name="icon-xiala" size={35} /></View>
</View>
</View>
<View className={styles.header_count__item} onClick={integral}>
<Text>0</Text>
<Text>活动积分</Text>
</View>
<View className={styles.header_count__item}>
<IconFont name="icon-erweima" size={50} />
<Text>邀请码</Text>
</View>
</View>
{userInfo?.adminUserInfo?.order_access_status == 3 && <View className={styles.price_count}>
<View className={styles.price_count_list}>
{priceList?.map((item, index) => {
return <View key={index} className={styles.list_item} >
<Text className={styles.list_item_title}>{item.label}</Text>
<View className={styles.list_item_number}><Text>¥</Text> {item.value}</View>
<View className={styles.order_count__list}>
{orderList?.map((item, index) => {
return <View key={index} className={styles.order_count__item} onClick={() => goLink(item.url)}>
<IconFont name={item.icon as any} size={70} />
<Text className={styles.item_img}>{item.label}</Text>
{!!item.number && <Text className={styles.order_number}>{item.number}</Text>}
</View>
})}
<Image className={styles.price_bg} src={formatImgUrl('/mall/price_bg.png', '')} mode="aspectFit"></Image>
</View>
</View>}
<Image className={styles.header_bg} src={formatImgUrl('/mall/user_header_bg.png', '')} mode="aspectFit"></Image>
</View>
<View className={styles.order_count}>
<View className={styles.order_count__title}>
<Text className={styles.title_text}>我的订单</Text>
<View className={styles.title__more} onClick={() => goLink('/pages/order/orderList/index')}>
<Text>全部订单</Text>
<View className={styles.title_more_icon}><IconFont name="icon-xiala" size={35} /></View>
</View>
</View>
<View className={styles.order_count__list}>
{orderList?.map((item, index) => {
return <View key={index} className={styles.order_count__item} onClick={() => goLink(item.url)}>
<IconFont name={item.icon as any} size={70} />
<Text className={styles.item_img}>{item.label}</Text>
{!!item.number && <Text className={styles.order_number}>{item.number}</Text>}
</View>
})}
</View>
</View>
</View>
<View className={styles.nav_list}>
<View className={styles.nav_list__title}>
<Text className={styles.title_text}>我的服务</Text>
</View>
<View className={styles.list_con}>
{menuList.map((item, index) => {
return <View key={index} className={styles.list_item} onClick={item?.callback}>
<IconFont name={item.icon as any} size={70} />
<View className={styles.list_item_con}>
<Text>{item.label}</Text>
<View className={styles.title_more_kf}>
<Text>{item.text}</Text>
<View className={styles.title_more_icon}><IconFont name="icon-xiala" size={40} /></View>
<View className={styles.nav_list}>
<View className={styles.nav_list__title}>
<Text className={styles.title_text}>我的服务</Text>
</View>
<View className={styles.list_con}>
{menuList.map((item, index) => {
return <View key={index} className={styles.list_item} onClick={item?.callback}>
<IconFont name={item.icon as any} size={70} />
<View className={styles.list_item_con}>
<Text>{item.label}</Text>
<View className={styles.title_more_kf}>
<Text>{item.text}</Text>
<View className={styles.title_more_icon}><IconFont name="icon-xiala" size={40} /></View>
</View>
</View>
</View>
{item.type == 'customer' && <Button openType="contact" className={styles.customer} />}
</View>
})}
})}
</View>
</View>
<Customer show={customer_service_show} onClose={customerClose} />
</View>
</View>
)
}

2
src/pages/userEdit/index.tsx
View File

@ -226,7 +226,7 @@ export default () => {
<View className="customer_service_phone">客服热线 {userInfo?.adminUserInfo?.sale_user_phone}</View>
</View>
<View className="customer_service_button" onClick={() => onPhone()}>
<IconFont name="icon-a-0tianzhangqi" />
<IconFont name="icon-dianhua" />
<Text>拨打</Text>
</View>
</View>}