封装图片组件
This commit is contained in:
parent
8197140027
commit
38a3b348bd
13
src/api/cdn.ts
Normal file
13
src/api/cdn.ts
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import { useRequest } from "@/use/useHttp"
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取cdn 签名/密钥
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export const GetSignApi = () => {
|
||||||
|
return useRequest({
|
||||||
|
url: `/v1/mall/cdn/token`,
|
||||||
|
method: "get"
|
||||||
|
})
|
||||||
|
}
|
||||||
@ -1,132 +0,0 @@
|
|||||||
import Taro from '@tarojs/taro';
|
|
||||||
import { GET_UPLOAD_SIGN, CDN_UPLOAD_IMG, UPLOAD_CDN_URL } from './constant'
|
|
||||||
|
|
||||||
import { GetSignApi } from '@/api/cdn'
|
|
||||||
|
|
||||||
|
|
||||||
const { fetchData: GetSign, success, data: resData, msg, code } = GetSignApi()
|
|
||||||
|
|
||||||
|
|
||||||
// 上传图片 获取auth，Policy
|
|
||||||
/*
|
|
||||||
scene 场景值，区分上传文件的根路径
|
|
||||||
type 类型值，区分上传业务bucket
|
|
||||||
*/
|
|
||||||
const getSecret = (scene, type) => {
|
|
||||||
return new Promise(async (resolve, reject) => {
|
|
||||||
|
|
||||||
const SAVE_PATH = `/${scene}/{filemd5}{day}{hour}{min}{sec}{.suffix}`;
|
|
||||||
|
|
||||||
|
|
||||||
let params = {
|
|
||||||
'method': 'post',
|
|
||||||
'save_key': SAVE_PATH
|
|
||||||
}
|
|
||||||
|
|
||||||
// 获取签名
|
|
||||||
await GetSign(params)
|
|
||||||
if (success.value) {
|
|
||||||
// console.log('返回签名',resData.value);
|
|
||||||
resolve(resData.value)
|
|
||||||
} else {
|
|
||||||
reject({
|
|
||||||
code: code.value || '9999',
|
|
||||||
msg: msg.value
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const getFileType = (name) => {
|
|
||||||
if (!name) return false;
|
|
||||||
var imgType = ["gif", "jpeg", "jpg", "bmp", "png"];
|
|
||||||
var videoType = ["avi", "wmv", "mkv", "mp4", "mov", "rm", "3gp", "flv", "mpg", "rmvb", "quicktime"];
|
|
||||||
|
|
||||||
if (RegExp("\.?(" + imgType.join("|") + ")$", "i").test(name.toLowerCase())) {
|
|
||||||
return 'image';
|
|
||||||
} else if (RegExp("\.(" + videoType.join("|") + ")$", "i").test(name.toLowerCase())) {
|
|
||||||
return 'video';
|
|
||||||
} else {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const upYunbucket = (type) => {
|
|
||||||
var bucket = ""
|
|
||||||
switch (type) {
|
|
||||||
case "product":
|
|
||||||
bucket = "testzzfzyc"
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
return bucket
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/**
|
|
||||||
*
|
|
||||||
* @param {*} file 传入文件
|
|
||||||
* @param {String} secene 传入 'product'
|
|
||||||
* @param {String} type 传入 'product'
|
|
||||||
* @returns
|
|
||||||
*/
|
|
||||||
const uploadCDNImg = (file, secene, type) => {
|
|
||||||
// var file = event.target.files[0];
|
|
||||||
// var filetype = file.type
|
|
||||||
let filetype = file.tempFilePath
|
|
||||||
|
|
||||||
if (!getFileType(filetype)) {
|
|
||||||
Taro.showToast({
|
|
||||||
title: "上传文件类型错误",
|
|
||||||
icon: "none",
|
|
||||||
duration: 3800
|
|
||||||
})
|
|
||||||
return false
|
|
||||||
}
|
|
||||||
return new Promise((resolve, reject, race) => {
|
|
||||||
getSecret(secene, type)
|
|
||||||
.then(result => {
|
|
||||||
|
|
||||||
console.log('bucket', result.bucket);
|
|
||||||
var formdata = {
|
|
||||||
'authorization': result.authorization,
|
|
||||||
'policy': result.policy,
|
|
||||||
// "file": file.tempFilePath,
|
|
||||||
}
|
|
||||||
|
|
||||||
const uploadTask = Taro.uploadFile({
|
|
||||||
url: `${UPLOAD_CDN_URL}${result.bucket}`,
|
|
||||||
formData: formdata,
|
|
||||||
filePath: file.tempFilePath,
|
|
||||||
name: 'file',
|
|
||||||
success: res => {
|
|
||||||
resolve(JSON.parse(`${res.data}`))
|
|
||||||
},
|
|
||||||
fail: err => {
|
|
||||||
console.log(err)
|
|
||||||
reject(err)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
uploadTask.progress(res => {
|
|
||||||
console.log('上传进度', res.progress);
|
|
||||||
if (res.progress < 100) {
|
|
||||||
Taro.showLoading({
|
|
||||||
title: '上传中...'
|
|
||||||
})
|
|
||||||
} else {
|
|
||||||
Taro.hideLoading()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
})
|
|
||||||
.catch(result => {
|
|
||||||
reject(result)
|
|
||||||
Taro.showToast({
|
|
||||||
title: "获取密钥失败！",
|
|
||||||
icon: "none",
|
|
||||||
duration: 3800
|
|
||||||
})
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
export default uploadCDNImg
|
|
||||||
17
src/components/LabAndImg/index.module.scss
Normal file
17
src/components/LabAndImg/index.module.scss
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
|
||||||
|
.labAndImg_main{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
.boxColor{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 20px;
|
||||||
|
border:1PX solid #818181;
|
||||||
|
}
|
||||||
|
image{
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
30
src/components/LabAndImg/index.tsx
Normal file
30
src/components/LabAndImg/index.tsx
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
import { formatImgUrl } from "@/common/fotmat";
|
||||||
|
import { Image, View } from "@tarojs/components";
|
||||||
|
import { memo, useMemo } from "react";
|
||||||
|
import styles from './index.module.scss'
|
||||||
|
|
||||||
|
//该组件宽高为100%需调整外层元素宽高
|
||||||
|
type Param = {
|
||||||
|
value?: {
|
||||||
|
texture_url?: string, //纹理图路径
|
||||||
|
lab?: {l:number, a:number, b:number}, //lab
|
||||||
|
rgb?: {r:number, g:number, b:number} //rgb
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default memo(({value}:Param) => {
|
||||||
|
//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])
|
||||||
|
return (
|
||||||
|
<View className={styles.labAndImg_main}>
|
||||||
|
{value?.texture_url&&<Image mode="aspectFill" src={formatImgUrl(value?.texture_url)}></Image>}
|
||||||
|
{(!value?.texture_url&&rgbStyle)&&<View className={styles.boxColor} style={{...rgbStyle}}></View>}
|
||||||
|
{(!value?.texture_url&&!rgbStyle)&&<Image mode="aspectFill" src={formatImgUrl('')}></Image>}
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
})
|
||||||
@ -29,7 +29,7 @@ export default ({children = null, onClick}:param) => {
|
|||||||
return (
|
return (
|
||||||
<MovableArea className={styles.movableItem}>
|
<MovableArea className={styles.movableItem}>
|
||||||
{children}
|
{children}
|
||||||
{showMoveBtn&&<MovableView onClick={onClick} className={styles.moveBtn} direction="all" inertia={true} x="750rpx" y={screenHeight+'rpx'} onTouchEnd={(e) => dragEnd(e)}>
|
{showMoveBtn&&<MovableView onClick={onClick} className={styles.moveBtn} direction="all" inertia={true} x="630rpx" y={screenHeight+'rpx'} onTouchEnd={(e) => dragEnd(e)}>
|
||||||
<View className={classnames('iconfont','icon-gouwuche', styles.shop_icon) } ></View>
|
<View className={classnames('iconfont','icon-gouwuche', styles.shop_icon) } ></View>
|
||||||
</MovableView>}
|
</MovableView>}
|
||||||
</MovableArea>
|
</MovableArea>
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
.btns_list{
|
.btns_list{
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
|
width: 100%;
|
||||||
// margin-top: 30px;
|
// margin-top: 30px;
|
||||||
.scroll{
|
.scroll{
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
@ -9,18 +10,18 @@
|
|||||||
.list_scroll{
|
.list_scroll{
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: flex;
|
text-align: right;
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
}
|
||||||
.btns_item{
|
.btns_item{
|
||||||
padding: 0 10px;
|
padding: 0 15px;
|
||||||
height: 60px;
|
width: 100px;
|
||||||
border: 2px solid #dddddd;
|
border: 2px solid #dddddd;
|
||||||
border-radius: 38px;
|
border-radius: 38px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 60px;
|
line-height: 60px;
|
||||||
font-size: $font_size;
|
font-size: $font_size;
|
||||||
color: $color_font_three;
|
color: $color_font_three;
|
||||||
|
display:inline-block;
|
||||||
&:nth-child(n+2) {
|
&:nth-child(n+2) {
|
||||||
margin-left: 32px;
|
margin-left: 32px;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -158,7 +158,7 @@ export default memo(({orderInfo, onClick}:Param) => {
|
|||||||
<View className={styles.list_scroll}>
|
<View className={styles.list_scroll}>
|
||||||
{orderBtnsList.current.map((item, index) =>
|
{orderBtnsList.current.map((item, index) =>
|
||||||
orderBtnsShow(item)&&<View key={item.id} className={styles.btns_item} onClick={() => submitBtns(item.id, index)}>{item.label}</View>
|
orderBtnsShow(item)&&<View key={item.id} className={styles.btns_item} onClick={() => submitBtns(item.id, index)}>{item.label}</View>
|
||||||
// <View key={item.id} id={`orderBtns_${item.id}`} className={styles.btns_item} onClick={() => submitBtns(item.id, index)}>{item.label}</View>
|
// <View key={item.id} className={styles.btns_item} onClick={() => submitBtns(item.id, index)}>{item.label}</View>
|
||||||
)}
|
)}
|
||||||
</View>
|
</View>
|
||||||
</ScrollView>
|
</ScrollView>
|
||||||
|
|||||||
@ -3,6 +3,7 @@ import Taro from "@tarojs/taro"
|
|||||||
import { goLink } from "@/common/common"
|
import { goLink } from "@/common/common"
|
||||||
import styles from './index.module.scss'
|
import styles from './index.module.scss'
|
||||||
import { formatHashTag, formatImgUrl } from "@/common/fotmat"
|
import { formatHashTag, formatImgUrl } from "@/common/fotmat"
|
||||||
|
import LabAndImg from "../LabAndImg"
|
||||||
|
|
||||||
type Params = {
|
type Params = {
|
||||||
desStatus?: true|false,
|
desStatus?: true|false,
|
||||||
@ -14,7 +15,7 @@ export default ({desStatus = true, productList = []}:Params) => {
|
|||||||
{productList?.map(item => {
|
{productList?.map(item => {
|
||||||
return <View className={styles.products_item} onClick={() => goLink(`/pages/details/index?id=${item.id}`)}>
|
return <View className={styles.products_item} onClick={() => goLink(`/pages/details/index?id=${item.id}`)}>
|
||||||
<View className={styles.item_img}>
|
<View className={styles.item_img}>
|
||||||
<Image src={formatImgUrl(item.texture_url)}/>
|
<LabAndImg value={{lab:item.lab,rgb:item.rgb,texture_url:item.texture_url}}/>
|
||||||
<View className={styles.num}>{item.product_color_count}色</View>
|
<View className={styles.num}>{item.product_color_count}色</View>
|
||||||
</View>
|
</View>
|
||||||
<View className={styles.item_con}>
|
<View className={styles.item_con}>
|
||||||
|
|||||||
@ -7,7 +7,7 @@ import Counter from "@/components/counter";
|
|||||||
import ReasonPopup from "./components/reasonPopup";
|
import ReasonPopup from "./components/reasonPopup";
|
||||||
import OtherReason from "./components/otherReason";
|
import OtherReason from "./components/otherReason";
|
||||||
import Taro from "@tarojs/taro";
|
import Taro from "@tarojs/taro";
|
||||||
import uploadCDNImg from "@/common/uploadImage";
|
import useUploadCDNImg from "@/use/useUploadImage";
|
||||||
|
|
||||||
type ReasonParam = 1|2|3 //1 退货原因 2 货物状况 3 退货说明
|
type ReasonParam = 1|2|3 //1 退货原因 2 货物状况 3 退货说明
|
||||||
export default () => {
|
export default () => {
|
||||||
@ -123,6 +123,7 @@ export default () => {
|
|||||||
|
|
||||||
//图片列表
|
//图片列表
|
||||||
const PictureItem = memo(() => {
|
const PictureItem = memo(() => {
|
||||||
|
const {uploadCDNImg} = useUploadCDNImg()
|
||||||
|
|
||||||
//图片
|
//图片
|
||||||
const uploadImage = () => {
|
const uploadImage = () => {
|
||||||
@ -131,10 +132,8 @@ const PictureItem = memo(() => {
|
|||||||
sizeType: ['original', 'compressed'],
|
sizeType: ['original', 'compressed'],
|
||||||
sourceType: ['album', 'camera'],
|
sourceType: ['album', 'camera'],
|
||||||
success: function (res) {
|
success: function (res) {
|
||||||
// var tempFilePaths = res.tempFilePaths
|
|
||||||
const file = res.tempFiles[0]
|
const file = res.tempFiles[0]
|
||||||
console.log('res:::',res.tempFiles[0])
|
uploadCDNImg(file, 'product', 'product')
|
||||||
// uploadCDNImg(file, 'product', 'product')
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|||||||
4
src/pages/cutOrder/comfirm.config.ts
Normal file
4
src/pages/cutOrder/comfirm.config.ts
Normal file
@ -0,0 +1,4 @@
|
|||||||
|
export default {
|
||||||
|
navigationBarTitleText: '确认订单',
|
||||||
|
enableShareAppMessage: true,
|
||||||
|
}
|
||||||
130
src/pages/cutOrder/comfirm.module.scss
Normal file
130
src/pages/cutOrder/comfirm.module.scss
Normal file
@ -0,0 +1,130 @@
|
|||||||
|
.order_main{
|
||||||
|
min-height: 100%;
|
||||||
|
background-color:$color_bg_one;
|
||||||
|
padding: 20px;
|
||||||
|
padding-bottom: 190px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.order_title{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20px 30px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #fff;
|
||||||
|
height: 116px;
|
||||||
|
border-radius: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
text{
|
||||||
|
flex:1;
|
||||||
|
font-size: $font_size;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.order_status{
|
||||||
|
background-color: #F0F0F0;
|
||||||
|
width: 148px;
|
||||||
|
height: 55px;
|
||||||
|
color: $color_font_three;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 55px;
|
||||||
|
font-size: $font_size_medium;
|
||||||
|
border-radius: 30px;
|
||||||
|
&:nth-last-child(1) {
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.order_status_selected{
|
||||||
|
color: $color_main;
|
||||||
|
border: 1px solid $color_main;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.order_desc{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
min-height: 116px;
|
||||||
|
border-radius: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.order_desc_con{
|
||||||
|
width: 150px;
|
||||||
|
font-size: $font_size;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.order_desc_text, .order_desc_text_hint{
|
||||||
|
font-size: $font_size_medium;
|
||||||
|
color: $color_font_two;
|
||||||
|
margin-right: 10px;
|
||||||
|
flex:1;
|
||||||
|
}
|
||||||
|
.order_desc_text_hint{
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.miconfont{
|
||||||
|
font-size: 20px;
|
||||||
|
color: $color_font_two;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.submit_order{
|
||||||
|
display: flex;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
height: 175px;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 6px 0px 12px 0px rgba(0,0,0,0.16);
|
||||||
|
padding: 20px 50px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-bottom: constant(safe-area-inset-bottom);
|
||||||
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
|
.order_btn {
|
||||||
|
width: 250px;
|
||||||
|
height: 90px;
|
||||||
|
opacity: 0.6;
|
||||||
|
background: linear-gradient(38deg,#007aff, #4fa6ff 100%, #68b4ff 100%);
|
||||||
|
border-radius: 46px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.ok_order_btn {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
.order_number_desc{
|
||||||
|
font-size: $font_size_medium;
|
||||||
|
color: $color_font_two;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.order_info{
|
||||||
|
background-color: #fff;
|
||||||
|
margin-top: 20px;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 20px;
|
||||||
|
.order_info_title{
|
||||||
|
font-size: $font_size;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
}
|
||||||
|
.order_num{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
.order_num_btn{
|
||||||
|
font-size: $font_size_medium;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border: 2px solid #007cf7;
|
||||||
|
border-radius: 10px;
|
||||||
|
color: $color_main;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
text{
|
||||||
|
font-size: $font_size;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
188
src/pages/cutOrder/comfirm.tsx
Normal file
188
src/pages/cutOrder/comfirm.tsx
Normal file
@ -0,0 +1,188 @@
|
|||||||
|
import { SaleOrderPreViewApi, SaleOrderApi } from "@/api/order";
|
||||||
|
import { formatPriceDiv } from "@/common/fotmat";
|
||||||
|
import Popup from "@/components/popup";
|
||||||
|
import SearchInput from "@/components/searchInput";
|
||||||
|
import { Text, Textarea, View } from "@tarojs/components"
|
||||||
|
import Taro, { useDidShow, useRouter } from "@tarojs/taro";
|
||||||
|
import classnames from "classnames";
|
||||||
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||||
|
import AddressInfo,{AddressInfoParam} from "./components/addressInfo";
|
||||||
|
import EstimatedAmount from "./components/estimatedAmount";
|
||||||
|
import KindList from "./components/kindList";
|
||||||
|
import OrderState from "./components/orderState";
|
||||||
|
import Remark from "./components/remark";
|
||||||
|
import styles from './comfirm.module.scss'
|
||||||
|
import { getParam } from "@/common/system";
|
||||||
|
import useLogin from "@/use/useLogin";
|
||||||
|
import { alert, goLink } from "@/common/common";
|
||||||
|
import ShipmentMode from "../editOrder/components/shipmentMode";
|
||||||
|
import SubmitOrderBtn from "./components/submitOrderBtn";
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
const {checkLogin} = useLogin()
|
||||||
|
|
||||||
|
const [showDesc, setShowDesc] = useState(false)
|
||||||
|
//下单信息
|
||||||
|
type OrderParams = {address_id?: number, remark?: string, sale_mode?: number, shipment_mode?: number, list?: any[]}
|
||||||
|
const [submitOrderData, setSubmitOrderData] = useState<OrderParams>()
|
||||||
|
|
||||||
|
//获取购物车传过来的id
|
||||||
|
type orderPreParam = {shopping_cart_product_color_list:{shopping_cart_product_color_id:number}[], sale_mode:number}
|
||||||
|
const param = getParam()
|
||||||
|
const idsAndSaleModel = useRef<orderPreParam>({shopping_cart_product_color_list:[], sale_mode:0})
|
||||||
|
useDidShow(async () => {
|
||||||
|
idsAndSaleModel.current = {shopping_cart_product_color_list:[], sale_mode:0} //初始化
|
||||||
|
idsAndSaleModel.current.sale_mode = Number(param?.sale_mode)
|
||||||
|
param?.ids?.split('-')?.map(item => {
|
||||||
|
return idsAndSaleModel.current.shopping_cart_product_color_list?.push({
|
||||||
|
shopping_cart_product_color_id: Number(item)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
getSaleOrderPreView()
|
||||||
|
setSubmitOrderData((val) => ({...val, sale_mode:param?.sale_mode}))
|
||||||
|
})
|
||||||
|
|
||||||
|
//获取销售预览订单
|
||||||
|
const [preViewOrder, setPreViewOrder] = useState<any>() //获取到的原始数据
|
||||||
|
const {fetchData} = SaleOrderPreViewApi()
|
||||||
|
const getSaleOrderPreView = async () => {
|
||||||
|
if(idsAndSaleModel.current.shopping_cart_product_color_list?.length > 0) {
|
||||||
|
let res = await fetchData(idsAndSaleModel.current)
|
||||||
|
setPreViewOrder(res.data)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//监听获取到的数据
|
||||||
|
useEffect(() => {
|
||||||
|
if(preViewOrder) {
|
||||||
|
formatData()
|
||||||
|
getDataList()
|
||||||
|
//当有默认地址时设置默认地址id
|
||||||
|
preViewOrder.default_address&&setSubmitOrderData((val) => ({...val, address_id:preViewOrder.default_address.id}))
|
||||||
|
}
|
||||||
|
}, [preViewOrder])
|
||||||
|
|
||||||
|
//格式化数据格式
|
||||||
|
const [formatPreViewOrder, setFormatPreViewOrder] = useState<any>() //格式化后的数据
|
||||||
|
const formatData = () => {
|
||||||
|
setFormatPreViewOrder({
|
||||||
|
estimate_amount: preViewOrder.estimate_amount, //预估金额
|
||||||
|
sale_mode: preViewOrder.sale_mode,
|
||||||
|
sale_mode_name: preViewOrder.sale_mode_name,
|
||||||
|
total_colors: preViewOrder.total_colors, //总颜色数量
|
||||||
|
total_number: preViewOrder.total_number, //总数量
|
||||||
|
total_fabrics: preViewOrder.total_fabrics, //面料数量
|
||||||
|
unit: preViewOrder.sale_mode == 0?'条':'m', //单位
|
||||||
|
list: preViewOrder.product_list
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const formatPreViewOrderMemo = useMemo(() => {
|
||||||
|
return formatPreViewOrder
|
||||||
|
}, [formatPreViewOrder])
|
||||||
|
|
||||||
|
//格式化初始地址
|
||||||
|
const defaultAddress = useMemo(() => {
|
||||||
|
const address = preViewOrder?.default_address
|
||||||
|
if(address) {
|
||||||
|
return {
|
||||||
|
province_name: address.province_name,
|
||||||
|
city_name: address.city_name,
|
||||||
|
district_name: address.district_name,
|
||||||
|
address_detail: address.address_detail,
|
||||||
|
id: address.id,
|
||||||
|
name: address.name,
|
||||||
|
phone: address.phone
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null
|
||||||
|
}, [preViewOrder])
|
||||||
|
|
||||||
|
//获取提交格式数据列表
|
||||||
|
const getDataList = () => {
|
||||||
|
let list:{shopping_cart_product_color_id:number}[] = []
|
||||||
|
preViewOrder.product_list?.map(item => {
|
||||||
|
item.product_colors?.map(colorItem => {
|
||||||
|
list.push({shopping_cart_product_color_id:colorItem.id})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
setSubmitOrderData((val) => ({...val, list}))
|
||||||
|
}
|
||||||
|
|
||||||
|
//获取地址
|
||||||
|
const getAddress = (e) => {
|
||||||
|
setSubmitOrderData((val) => ({...val, address_id:e.id}))
|
||||||
|
}
|
||||||
|
|
||||||
|
const selectShipmentMode = useCallback((value) => {
|
||||||
|
setSubmitOrderData((val) => ({...val, shipment_mode:value}))
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
//获取备注
|
||||||
|
const getRemark = useCallback((e) => {
|
||||||
|
setSubmitOrderData((val) => ({...val, remark:e}))
|
||||||
|
setShowDesc(() => false)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
//提交按钮是否可用
|
||||||
|
const btnStatus = useMemo(() => {
|
||||||
|
if( submitOrderData?.list?.length == 0 || !submitOrderData?.shipment_mode || (submitOrderData?.shipment_mode == 2 && !submitOrderData?.address_id)) {
|
||||||
|
return false
|
||||||
|
} else {
|
||||||
|
return true
|
||||||
|
}
|
||||||
|
}, [submitOrderData])
|
||||||
|
|
||||||
|
//提交订单
|
||||||
|
const {fetchData: saleOrderFetchData} = SaleOrderApi()
|
||||||
|
const submitOrderEven = () => {
|
||||||
|
if(!submitOrderData?.address_id) {
|
||||||
|
alert.error('请选择地址')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
if(!submitOrderData?.shipment_mode) {
|
||||||
|
alert.error('请选择收货方式')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
Taro.showModal({
|
||||||
|
title: '确定提交？',
|
||||||
|
success: async function (res) {
|
||||||
|
if (res.confirm) {
|
||||||
|
const res = await saleOrderFetchData(submitOrderData)
|
||||||
|
if(res.success) {
|
||||||
|
goLink('/pages/order/index',{id: res.data.id}, 'redirectTo')
|
||||||
|
} else {
|
||||||
|
alert.none(res.msg)
|
||||||
|
}
|
||||||
|
} else if (res.cancel) {
|
||||||
|
console.log('用户点击取消')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<View className={styles.order_main}>
|
||||||
|
<ShipmentMode onSelect={selectShipmentMode}/>
|
||||||
|
<AddressInfo onSelect={(e) => getAddress(e)} defaultValue={defaultAddress}/>
|
||||||
|
<KindList order={formatPreViewOrderMemo} comfirm={true}/>
|
||||||
|
<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={formatPriceDiv(formatPreViewOrder?.estimate_amount)}/>
|
||||||
|
<View className={styles.order_number_desc}>{`${formatPreViewOrder?.total_fabrics}种面料，${formatPreViewOrder?.total_colors}种颜色，共${formatPreViewOrder?.total_number + formatPreViewOrder?.unit}`}</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 onSave={(e) => getRemark(e)}/>
|
||||||
|
</Popup>
|
||||||
|
<View className="common_safe_area_y"></View>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
71
src/pages/cutOrder/components/addressInfo/index.module.scss
Normal file
71
src/pages/cutOrder/components/addressInfo/index.module.scss
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
.order_address{
|
||||||
|
height: 178px;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 30px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-top: 20px;
|
||||||
|
.order_address_icon{
|
||||||
|
font-size: 76px;
|
||||||
|
color: $color_main;
|
||||||
|
}
|
||||||
|
.order_address_text_con{
|
||||||
|
flex:1;
|
||||||
|
padding: 0 30px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.order_address_text_title{
|
||||||
|
font-size: $font_size_medium;
|
||||||
|
margin-top: 10px;
|
||||||
|
@include common_ellipsis;
|
||||||
|
}
|
||||||
|
.order_address_text_name{
|
||||||
|
|
||||||
|
align-items: center;
|
||||||
|
text{
|
||||||
|
&:nth-child(1) {
|
||||||
|
color: #000;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: $color_font_one;
|
||||||
|
margin-right: 40px;
|
||||||
|
}
|
||||||
|
&:nth-child(2) {
|
||||||
|
color: $color_font_one;
|
||||||
|
font-size: $font_size_medium;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.updateBtn{
|
||||||
|
font-size: $font_size_medium;
|
||||||
|
color: $color_font_three;
|
||||||
|
width: 96px;
|
||||||
|
height: 52px;
|
||||||
|
border: 2px solid #dddddd;
|
||||||
|
border-radius: 28px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 52px;
|
||||||
|
}
|
||||||
|
.order_address_text_no{
|
||||||
|
flex: 1;
|
||||||
|
font-size: $font_size;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-left: 30px;
|
||||||
|
}
|
||||||
|
.order_address_more_icon{
|
||||||
|
color: $color_font_three;
|
||||||
|
font-size: $font_size;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.order_address_list {
|
||||||
|
height: 900px;
|
||||||
|
.order_address_title{
|
||||||
|
font-size: $font_size;
|
||||||
|
font-weight: 700;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
padding: 20px 0 30px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
76
src/pages/cutOrder/components/addressInfo/index.tsx
Normal file
76
src/pages/cutOrder/components/addressInfo/index.tsx
Normal file
@ -0,0 +1,76 @@
|
|||||||
|
import AddressList from "@/components/AddressList";
|
||||||
|
import Popup from "@/components/popup";
|
||||||
|
import { Text, View } from "@tarojs/components"
|
||||||
|
import classnames from "classnames";
|
||||||
|
import { memo, useCallback, useEffect, useMemo, useState } from "react";
|
||||||
|
import styles from './index.module.scss'
|
||||||
|
|
||||||
|
export type AddressInfoParam = {
|
||||||
|
province_name: string,
|
||||||
|
city_name: string,
|
||||||
|
district_name: string,
|
||||||
|
address_detail: string,
|
||||||
|
id?: number,
|
||||||
|
name: string,
|
||||||
|
phone: string
|
||||||
|
}
|
||||||
|
type Param = {
|
||||||
|
onSelect?: (val:any) => void, //选择
|
||||||
|
defaultValue?: AddressInfoParam|null //默认值
|
||||||
|
disabled?: false|true //true禁用后只用于展示
|
||||||
|
}
|
||||||
|
|
||||||
|
export default memo(({onSelect, defaultValue = null, disabled = false}: Param) => {
|
||||||
|
const [showAddressList, setShowAddressList] = useState(false)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setUserInfo(() => defaultValue)
|
||||||
|
}, [defaultValue])
|
||||||
|
|
||||||
|
//选择地址
|
||||||
|
const [userInfo, setUserInfo] = useState<any>()
|
||||||
|
const getAddress = useCallback((val) => {
|
||||||
|
setShowAddressList(() => false)
|
||||||
|
setUserInfo(() => val)
|
||||||
|
onSelect?.(val)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
//地址格式
|
||||||
|
const formatAddress = useMemo(() => {
|
||||||
|
if(userInfo)
|
||||||
|
return userInfo.province_name + userInfo.city_name + userInfo.district_name + userInfo.address_detail
|
||||||
|
}, [userInfo])
|
||||||
|
|
||||||
|
const changeShow = () => {
|
||||||
|
if(!disabled)
|
||||||
|
setShowAddressList(() => true)
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<View>
|
||||||
|
<View className={styles.order_address} onClick={() => changeShow()}>
|
||||||
|
<View className={classnames(styles.order_address_icon, 'iconfont icon-daohang')}></View>
|
||||||
|
{!userInfo&&
|
||||||
|
<>
|
||||||
|
<View className={styles.order_address_text_no}>请选择收货地址及信息</View>
|
||||||
|
<View className={classnames(styles.order_address_more_icon, 'iconfont icon-a-moreback')}></View>
|
||||||
|
</>
|
||||||
|
||<>
|
||||||
|
<View className={styles.order_address_text_con}>
|
||||||
|
<View className={styles.order_address_text_name}>
|
||||||
|
<Text>{userInfo?.name}</Text>
|
||||||
|
<Text>{userInfo?.phone}</Text>
|
||||||
|
</View>
|
||||||
|
<View className={styles.order_address_text_title}>{formatAddress}</View>
|
||||||
|
</View>
|
||||||
|
<View className={styles.updateBtn}>修改</View>
|
||||||
|
</>}
|
||||||
|
</View>
|
||||||
|
{!disabled&&<Popup show={showAddressList} showTitle={false} onClose={() => setShowAddressList(false)}>
|
||||||
|
<View className={styles.order_address_list}>
|
||||||
|
<View className={styles.order_address_title}>请选择收货地址</View>
|
||||||
|
<AddressList onSelect={(item) => getAddress(item)}/>
|
||||||
|
</View>
|
||||||
|
</Popup>}
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
})
|
||||||
@ -0,0 +1,117 @@
|
|||||||
|
.order_address{
|
||||||
|
height: 178px;
|
||||||
|
background: #ffffff;
|
||||||
|
border-radius: 20px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 30px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-top: 20px;
|
||||||
|
position: relative;
|
||||||
|
.order_address_icon{
|
||||||
|
font-size: 50px;
|
||||||
|
color: $color_main;
|
||||||
|
position: absolute;
|
||||||
|
top: 35px;
|
||||||
|
left: 20px;
|
||||||
|
}
|
||||||
|
.order_address_text_con{
|
||||||
|
flex:1;
|
||||||
|
padding-left: 50px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
.order_address_text_title{
|
||||||
|
font-size: $font_size_medium;
|
||||||
|
margin-top: 10px;
|
||||||
|
@include common_ellipsis;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
.moreIconfont{
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.order_address_text_name{
|
||||||
|
|
||||||
|
align-items: center;
|
||||||
|
text{
|
||||||
|
&:nth-child(1) {
|
||||||
|
color: #000;
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: $color_font_one;
|
||||||
|
margin-right: 40px;
|
||||||
|
}
|
||||||
|
&:nth-child(2) {
|
||||||
|
color: $color_font_one;
|
||||||
|
font-size: $font_size_medium;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.updateBtn{
|
||||||
|
width:200px;
|
||||||
|
font-size: $font_size_min;
|
||||||
|
background-color: #F0F0F0;
|
||||||
|
height: 64px;
|
||||||
|
border-radius: 24px;
|
||||||
|
color: $color_font_two;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 10px;
|
||||||
|
right: 10px;
|
||||||
|
z-index: 999;
|
||||||
|
.updateBtn_list{
|
||||||
|
position: absolute;
|
||||||
|
display: flex;
|
||||||
|
z-index: 5;
|
||||||
|
width: 100%;
|
||||||
|
.updateBtn_item_select{
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.updateBtn_item{
|
||||||
|
flex:1;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 64px;
|
||||||
|
}
|
||||||
|
.updateBtn_select{
|
||||||
|
color: #fff;
|
||||||
|
background-color: $color_main;
|
||||||
|
border-radius: 24px;
|
||||||
|
position: absolute;
|
||||||
|
width: 100px;
|
||||||
|
height: 61px;
|
||||||
|
z-index: 1;
|
||||||
|
transition: all 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.order_address_text_no{
|
||||||
|
flex: 1;
|
||||||
|
font-size: $font_size;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-left: 30px;
|
||||||
|
}
|
||||||
|
.order_address_more_icon{
|
||||||
|
color: $color_font_three;
|
||||||
|
font-size: $font_size;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.order_address_list {
|
||||||
|
height:80vh;
|
||||||
|
.order_address_title{
|
||||||
|
font-size: $font_size;
|
||||||
|
font-weight: 700;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
padding: 20px 0 30px 0;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
.addressList_con{
|
||||||
|
padding-bottom: 20px;
|
||||||
|
height: calc(100% - 160px);
|
||||||
|
}
|
||||||
|
}
|
||||||
126
src/pages/cutOrder/components/addressInfoDetail/index.tsx
Normal file
126
src/pages/cutOrder/components/addressInfoDetail/index.tsx
Normal file
@ -0,0 +1,126 @@
|
|||||||
|
import { EditSaleOrderAddressApi, EditSaleOrderShipmentModeApi } from "@/api/order";
|
||||||
|
import { alert } from "@/common/common";
|
||||||
|
import { debounce } from "@/common/util";
|
||||||
|
import AddressList from "@/components/AddressList";
|
||||||
|
import Popup from "@/components/popup";
|
||||||
|
import { Text, View } from "@tarojs/components"
|
||||||
|
import classnames from "classnames";
|
||||||
|
import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useState } from "react";
|
||||||
|
import styles from './index.module.scss'
|
||||||
|
|
||||||
|
export type AddressInfoParam = {
|
||||||
|
province_name: string,
|
||||||
|
city_name: string,
|
||||||
|
district_name: string,
|
||||||
|
address_detail: string,
|
||||||
|
id?: number,
|
||||||
|
name: string,
|
||||||
|
phone: string,
|
||||||
|
}
|
||||||
|
type Param = {
|
||||||
|
onSelect?: (val:any) => void, //选择
|
||||||
|
defaultValue?: AddressInfoParam|null, //默认值
|
||||||
|
disabled?: false|true, //true禁用后只用于展示
|
||||||
|
shipment_mode?: 1|2, //1自提 2物流
|
||||||
|
onChangeShipmentMode?: (val: number) => void, //返回收货方式
|
||||||
|
orderId?: number //订单id
|
||||||
|
}
|
||||||
|
|
||||||
|
export default memo(forwardRef(({onSelect, onChangeShipmentMode, defaultValue = null, orderId = 0, shipment_mode = 1}: Param, ref) => {
|
||||||
|
const [showAddressList, setShowAddressList] = useState(false)
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setUserInfo(() => defaultValue)
|
||||||
|
}, [defaultValue])
|
||||||
|
|
||||||
|
const [userInfo, setUserInfo] = useState<any>()
|
||||||
|
|
||||||
|
//地址格式
|
||||||
|
const formatAddress = useMemo(() => {
|
||||||
|
if(userInfo)
|
||||||
|
return userInfo.province_name + userInfo.city_name + userInfo.district_name + userInfo.address_detail
|
||||||
|
}, [userInfo])
|
||||||
|
|
||||||
|
const changeShow = () => {
|
||||||
|
if(receivingStatus == 2)
|
||||||
|
setShowAddressList(() => true)
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setReceivingStatus(() => shipment_mode)
|
||||||
|
}, [shipment_mode])
|
||||||
|
|
||||||
|
//把内部方法提供给外部
|
||||||
|
useImperativeHandle(ref, () => ({
|
||||||
|
changeShow
|
||||||
|
}))
|
||||||
|
|
||||||
|
//收货方法,1:自提，2物流
|
||||||
|
const [receivingStatus, setReceivingStatus] = useState(1)
|
||||||
|
const {fetchData: shipmentModeFetchData} = EditSaleOrderShipmentModeApi()
|
||||||
|
const onReceivingStatus = (value, e) => {
|
||||||
|
e.stopPropagation()
|
||||||
|
changeReceivingStatus(value)
|
||||||
|
}
|
||||||
|
const changeReceivingStatus = debounce(async (value) => {
|
||||||
|
alert.loading('正在修改')
|
||||||
|
const res = await shipmentModeFetchData({id: orderId, shipment_mode:value})
|
||||||
|
if(res.success) {
|
||||||
|
alert.success('收货方式修改成功')
|
||||||
|
onChangeShipmentMode?.(value)
|
||||||
|
setReceivingStatus(value)
|
||||||
|
} else {
|
||||||
|
alert.none(res.msg)
|
||||||
|
}
|
||||||
|
}, 10)
|
||||||
|
|
||||||
|
//修改地址
|
||||||
|
const [addressId, setAddressId] = useState(0)
|
||||||
|
const {fetchData: addressFetchData} = EditSaleOrderAddressApi()
|
||||||
|
const getAddress = async (value) => {
|
||||||
|
alert.loading('正在修改')
|
||||||
|
const res = await addressFetchData({id: orderId, address_id: value.id})
|
||||||
|
if(res.success) {
|
||||||
|
alert.success('地址修改成功')
|
||||||
|
onSelect?.(value)
|
||||||
|
setShowAddressList(() => false)
|
||||||
|
setAddressId(value.id)
|
||||||
|
setUserInfo(() => value)
|
||||||
|
} else {
|
||||||
|
alert.none(res.msg)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View>
|
||||||
|
<View className={styles.order_address} onClick={() => changeShow()}>
|
||||||
|
<View className={classnames(styles.order_address_icon, 'iconfont', receivingStatus == 2?'icon-daohang':'icon-fahuo')}></View>
|
||||||
|
<View className={styles.order_address_text_con}>
|
||||||
|
<View className={styles.order_address_text_title}>
|
||||||
|
<Text>{formatAddress}</Text>
|
||||||
|
{(receivingStatus == 2)&&<Text className={classnames(styles.moreIconfont,'iconfont icon-a-moreback')}></Text>}
|
||||||
|
</View>
|
||||||
|
<View className={styles.order_address_text_name}>
|
||||||
|
<Text>{userInfo?.name}</Text>
|
||||||
|
<Text>{userInfo?.phone}</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View className={styles.updateBtn}>
|
||||||
|
<View className={styles.updateBtn_list}>
|
||||||
|
<View className={classnames(styles.updateBtn_item, receivingStatus==1&&styles.updateBtn_item_select)} onClick={(e) => onReceivingStatus(1,e)}>自提</View>
|
||||||
|
<View className={classnames(styles.updateBtn_item, receivingStatus==2&&styles.updateBtn_item_select)} onClick={(e) => onReceivingStatus(2,e)}>物流</View>
|
||||||
|
</View>
|
||||||
|
<View style={{transform: receivingStatus==1?'translateX(0)':'translateX(100%)'}} className={classnames(styles.updateBtn_select)}></View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<Popup show={showAddressList} showTitle={false} onClose={() => setShowAddressList(false)}>
|
||||||
|
<View className={styles.order_address_list}>
|
||||||
|
<View className={styles.order_address_title}>请选择收货地址</View>
|
||||||
|
<View className={styles.addressList_con}>
|
||||||
|
<AddressList onSelect={getAddress} id={addressId}/>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</Popup>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}))
|
||||||
35
src/pages/cutOrder/components/amountShow/index.module.scss
Normal file
35
src/pages/cutOrder/components/amountShow/index.module.scss
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
.order_price_num{
|
||||||
|
color: $color_main;
|
||||||
|
font-weight: 700;
|
||||||
|
text{
|
||||||
|
&:nth-child(1) {
|
||||||
|
font-size: $font_size_min;
|
||||||
|
}
|
||||||
|
&:nth-child(2) {
|
||||||
|
font-size: $font_size;
|
||||||
|
}
|
||||||
|
&:nth-child(3) {
|
||||||
|
font-size: $font_size_medium;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.emphasis_num{
|
||||||
|
.price_text{
|
||||||
|
&:nth-child(2) {
|
||||||
|
font-size: $font_size_big;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.emphasis_num_big{
|
||||||
|
.price_text{
|
||||||
|
&:nth-child(1) {
|
||||||
|
font-size: $font_size_big;
|
||||||
|
}
|
||||||
|
&:nth-child(2) {
|
||||||
|
font-size: 60px;
|
||||||
|
}
|
||||||
|
&:nth-child(1) {
|
||||||
|
font-size: $font_size_big;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
28
src/pages/cutOrder/components/amountShow/index.tsx
Normal file
28
src/pages/cutOrder/components/amountShow/index.tsx
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
import { Text, View } from "@tarojs/components";
|
||||||
|
import { memo, useCallback } from "react";
|
||||||
|
import styles from './index.module.scss'
|
||||||
|
import classnames from "classnames";
|
||||||
|
|
||||||
|
type Param = {
|
||||||
|
number: number, //数字
|
||||||
|
status: 0|1|2 //0 小型，1中型，2大
|
||||||
|
}
|
||||||
|
export default memo(({number = 0, status = 1}:Param) => {
|
||||||
|
const priceDom = useCallback(() => {
|
||||||
|
let res = number.toFixed(2).split('.')
|
||||||
|
let int_num = parseInt(res[0]) + ''
|
||||||
|
let decimals_num = res[1]
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Text className={styles.price_text}>¥</Text>
|
||||||
|
<Text className={styles.price_text}>{Number(int_num).toLocaleString()}</Text>
|
||||||
|
<Text className={styles.price_text}>.{decimals_num}</Text>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}, [number])
|
||||||
|
return (
|
||||||
|
<View className={classnames(styles.order_price_num, status==1&&styles.emphasis_num, status==2&&styles.emphasis_num_big)} >
|
||||||
|
{priceDom()}
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
})
|
||||||
@ -0,0 +1,70 @@
|
|||||||
|
.order_price{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
&:nth-last-child(n+2) {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
.order_price_text{
|
||||||
|
font-size: $font_size_medium;
|
||||||
|
// margin-right: 10px;
|
||||||
|
display: flex;
|
||||||
|
.iconfont_msg{
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.miconfont{
|
||||||
|
font-size: 26px;
|
||||||
|
font-weight: normal;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
.message{
|
||||||
|
position: absolute;
|
||||||
|
top: -50px;
|
||||||
|
background: #A8B3BD;
|
||||||
|
z-index: 9;
|
||||||
|
min-height: 50px;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
&::before{
|
||||||
|
z-index: 1;
|
||||||
|
position: absolute;
|
||||||
|
bottom: -7px;
|
||||||
|
left: 10px;
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
content: " ";
|
||||||
|
transform: rotate(45deg);
|
||||||
|
background: #A8B3BD;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.emphasis{
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.order_price_num{
|
||||||
|
color: $color_main;
|
||||||
|
font-weight: 700;
|
||||||
|
text{
|
||||||
|
&:nth-child(1) {
|
||||||
|
font-size: $font_size_min;
|
||||||
|
}
|
||||||
|
&:nth-child(2) {
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
&:nth-child(3) {
|
||||||
|
font-size: $font_size_medium;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.emphasis_num{
|
||||||
|
text{
|
||||||
|
&:nth-child(2) {
|
||||||
|
font-size: $font_size_big;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
29
src/pages/cutOrder/components/estimatedAmount/index.tsx
Normal file
29
src/pages/cutOrder/components/estimatedAmount/index.tsx
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import { Text, View } from "@tarojs/components"
|
||||||
|
import { memo, useCallback, useEffect, useMemo } from "react"
|
||||||
|
import {formatKbPrice} from '@/common/common'
|
||||||
|
import classnames from "classnames";
|
||||||
|
import styles from './index.module.scss'
|
||||||
|
import AmountShow from "../amountShow";
|
||||||
|
type Param = {
|
||||||
|
style?: Object,
|
||||||
|
number?: number,
|
||||||
|
title?: string,
|
||||||
|
titleStatus?: true|false, //true 标题加大加深
|
||||||
|
numberStatus?: 0|1|2, //数字尺寸
|
||||||
|
}
|
||||||
|
export default memo(({style, number = 0, titleStatus = true, title = '', numberStatus = 1}:Param) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<View className={styles.order_price}>
|
||||||
|
<View className={classnames(styles.order_price_text, titleStatus&&styles.emphasis)}>
|
||||||
|
<Text>{title}</Text>
|
||||||
|
<View className={styles.iconfont_msg}>
|
||||||
|
<Text className={classnames(styles.miconfont, 'iconfont icon-zhushi')}></Text>
|
||||||
|
{/* <View className={classnames(styles.message)}>123123123121212312312312312</View> */}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<AmountShow status={numberStatus} number={number}/>
|
||||||
|
</View>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
})
|
||||||
108
src/pages/cutOrder/components/kindList/index.module.scss
Normal file
108
src/pages/cutOrder/components/kindList/index.module.scss
Normal file
@ -0,0 +1,108 @@
|
|||||||
|
|
||||||
|
.orders_list_title{
|
||||||
|
padding: 20px 20px 10px 20px;
|
||||||
|
color: $color_font_two;
|
||||||
|
font-size: $font_size_medium;
|
||||||
|
}
|
||||||
|
.orders_list_con{
|
||||||
|
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 20px;
|
||||||
|
.order_list{
|
||||||
|
&:nth-child(n+2) {
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
.order_list_title{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.tag{
|
||||||
|
font-size: $font_size_min;
|
||||||
|
background-color: #CDE5FF;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 6px;
|
||||||
|
color: $color_main;
|
||||||
|
}
|
||||||
|
.title{
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: $font_size;
|
||||||
|
margin-left: 20px;
|
||||||
|
flex:1;
|
||||||
|
}
|
||||||
|
.num{
|
||||||
|
color: $color_font_two;
|
||||||
|
font-size: $font_size_min;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.order_list_scroll{
|
||||||
|
margin-top: 30px;
|
||||||
|
|
||||||
|
.order_list_item {
|
||||||
|
display: flex;
|
||||||
|
&:nth-child(2) {
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
.order_list_item_img{
|
||||||
|
width: 126px;
|
||||||
|
height: 126px;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
.order_list_item_con{
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
flex:1;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
height: 150px;
|
||||||
|
padding-top: 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.order_list_item_des{
|
||||||
|
flex:1;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-left: 30px;
|
||||||
|
.order_list_item_title{
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: $font_size;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
.order_list_item_price{
|
||||||
|
font-size: 26px;
|
||||||
|
color: $color_font_three;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.order_list_item_count{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-end;
|
||||||
|
.count_num{
|
||||||
|
color: $color_main;
|
||||||
|
font-size: $font_size;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
font-weight: 400;
|
||||||
|
text{
|
||||||
|
font-size: $font_size_min;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.count_price {
|
||||||
|
font-size: $font_size;
|
||||||
|
font-weight: 700;
|
||||||
|
text{
|
||||||
|
font-size: $font_size_min;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.order_estimated_amount{
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 30px 0;
|
||||||
|
.order_price_des{
|
||||||
|
font-size: $font_size_medium;
|
||||||
|
color: $color_font_two;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
169
src/pages/cutOrder/components/kindList/index.tsx
Normal file
169
src/pages/cutOrder/components/kindList/index.tsx
Normal file
@ -0,0 +1,169 @@
|
|||||||
|
import { ORDER_STATUS } from "@/common/enum"
|
||||||
|
import { formatHashTag, formatPriceDiv } from "@/common/fotmat"
|
||||||
|
import LabAndImg from "@/components/LabAndImg"
|
||||||
|
import { View } from "@tarojs/components"
|
||||||
|
import { memo, useCallback, useMemo } from "react"
|
||||||
|
import EstimatedAmount from "../estimatedAmount"
|
||||||
|
import styles from './index.module.scss'
|
||||||
|
|
||||||
|
type OrderParam = {
|
||||||
|
estimate_amount: number, //预估金额
|
||||||
|
list: any[],
|
||||||
|
sale_mode: number,
|
||||||
|
sale_mode_name: string,
|
||||||
|
unit: string,
|
||||||
|
total_colors: number,
|
||||||
|
total_fabrics: number,
|
||||||
|
total_number: number,
|
||||||
|
status: number, //订单状态
|
||||||
|
total_sale_price: number, //销售金额
|
||||||
|
total_should_collect_money: number, //应收金额
|
||||||
|
total_weight_error_discount: number, //空差优惠
|
||||||
|
the_previous_status: number, //取消订单时的订单状态
|
||||||
|
actual_amount: number //实付金额
|
||||||
|
}
|
||||||
|
|
||||||
|
type Param = {
|
||||||
|
order: OrderParam,
|
||||||
|
comfirm?: boolean //是否是确认订单页面使用
|
||||||
|
}
|
||||||
|
|
||||||
|
export default memo(({order, comfirm = false}:Param) => {
|
||||||
|
//对应数量
|
||||||
|
const formatCount = useCallback((item) => {
|
||||||
|
return order?.sale_mode == 0? item.roll : Number(item.length / 100)
|
||||||
|
}, [order])
|
||||||
|
//对应单价
|
||||||
|
const standardPrice = useCallback(price => {
|
||||||
|
return formatPriceDiv(price).toLocaleString() + '/' + (order?.sale_mode == 1?'m':'kg')
|
||||||
|
}, [order])
|
||||||
|
|
||||||
|
//数量格式
|
||||||
|
const numText = useMemo(() => {
|
||||||
|
if(order)
|
||||||
|
return `${order?.total_fabrics}种面料，${order?.total_colors}种颜色，共${order?.total_number}${order?.unit}`
|
||||||
|
}, [order])
|
||||||
|
|
||||||
|
const {
|
||||||
|
SaleOrderStatusBooking, // 待接单
|
||||||
|
SaleOrderStatusArranging, // 配布中
|
||||||
|
SaleOrderStatusArranged, // 已配布
|
||||||
|
SaleOrderStatusWaitingPayment, // 待付款
|
||||||
|
SaleOrderStatusWaitingDelivery, // 待发货
|
||||||
|
SaleOrderStatusWaitingReceipt, // 待收货
|
||||||
|
SaleOrderStatusAlreadyReceipt, // 已收货
|
||||||
|
SaleOrderStatusComplete, // 已完成
|
||||||
|
SaleOrderStatusRefund, // 已退款
|
||||||
|
SaleOrderStatusCancel, // 已取消
|
||||||
|
} = ORDER_STATUS
|
||||||
|
|
||||||
|
//金额列表枚举
|
||||||
|
const priceList = [
|
||||||
|
{
|
||||||
|
id:1,
|
||||||
|
value:[SaleOrderStatusBooking.value, SaleOrderStatusArranging.value],
|
||||||
|
label:'预估金额',
|
||||||
|
field: 'estimate_amount'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:2,
|
||||||
|
value:[SaleOrderStatusArranged.value, SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value],
|
||||||
|
label:'合计金额',
|
||||||
|
field: 'total_sale_price'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:3,
|
||||||
|
value:[SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value],
|
||||||
|
label:'空差优惠',
|
||||||
|
field: 'total_weight_error_discount'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:4,
|
||||||
|
value:[ SaleOrderStatusWaitingPayment.value],
|
||||||
|
label:'应付金额',
|
||||||
|
field: 'total_should_collect_money'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id:5,
|
||||||
|
value:[SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value],
|
||||||
|
label:'实付金额',
|
||||||
|
field: 'actual_amount'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
//是否显示价格
|
||||||
|
const showPrice = useCallback((priceInfo, status) => {
|
||||||
|
return priceInfo.value.includes(status)
|
||||||
|
}, [order])
|
||||||
|
|
||||||
|
const priceConDom = useMemo(() => {
|
||||||
|
if(!order) return
|
||||||
|
//确认订单
|
||||||
|
if(comfirm == true) {
|
||||||
|
return <EstimatedAmount number={formatPriceDiv(order.estimate_amount)} title="预估金额" />
|
||||||
|
}
|
||||||
|
//订单为取消订单状态
|
||||||
|
if(order?.status == SaleOrderStatusCancel.value) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{
|
||||||
|
priceList.map(item => {
|
||||||
|
return <>{showPrice(item, order?.the_previous_status)&&<EstimatedAmount key={item.id} number={formatPriceDiv(order[item.field])} title={item.label} />}</>
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
} else {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{
|
||||||
|
priceList.map(item => {
|
||||||
|
return <>{showPrice(item, order?.status)&&<EstimatedAmount key={item.id} number={formatPriceDiv(order[item.field])} title={item.label} />}</>
|
||||||
|
})
|
||||||
|
}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}, [order])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<View className={styles.orders_list_title}>{numText}</View>
|
||||||
|
<View className={styles.orders_list_con}>
|
||||||
|
{
|
||||||
|
order?.list?.map(item => {
|
||||||
|
return <View key={item.product_code} className={styles.order_list}>
|
||||||
|
<View className={styles.order_list_title}>
|
||||||
|
<View className={styles.tag}>{order.sale_mode_name}</View>
|
||||||
|
<View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
|
||||||
|
<View className={styles.num}>共{item?.product_colors.length}种</View>
|
||||||
|
</View>
|
||||||
|
<View className={styles.order_list_scroll}>
|
||||||
|
{item?.product_colors?.map(colorItem => {
|
||||||
|
return <View key={colorItem.id} className={styles.order_list_item}>
|
||||||
|
<View className={styles.order_list_item_img}>
|
||||||
|
<LabAndImg value={{lab:item.lab,rgb:item.rgb,texture_url:item.texture_url}}/>
|
||||||
|
</View>
|
||||||
|
<View className={styles.order_list_item_con}>
|
||||||
|
<View className={styles.order_list_item_des}>
|
||||||
|
<View className={styles.order_list_item_title}>{colorItem.code + ' ' + colorItem.name}</View>
|
||||||
|
<View className={styles.order_list_item_price}>¥{standardPrice(colorItem.sale_price)}</View>
|
||||||
|
</View>
|
||||||
|
<View className={styles.order_list_item_count}>
|
||||||
|
<View className={styles.count_num}>×{formatCount(colorItem)}<text>{order.unit}</text></View>
|
||||||
|
<View className={styles.count_price}><text>¥</text>{formatPriceDiv(colorItem.estimate_amount).toLocaleString()}</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
})}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
})
|
||||||
|
}
|
||||||
|
<View className={styles.order_estimated_amount}>
|
||||||
|
{priceConDom}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
})
|
||||||
46
src/pages/cutOrder/components/offlinePay/index.module.scss
Normal file
46
src/pages/cutOrder/components/offlinePay/index.module.scss
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
$top:170px;
|
||||||
|
.offlinePay_main{
|
||||||
|
.offlinePay_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;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.offlinePay_list{
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 60px 0;
|
||||||
|
.offlinePay_con_text{
|
||||||
|
font-size: $font_size;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
52
src/pages/cutOrder/components/offlinePay/index.tsx
Normal file
52
src/pages/cutOrder/components/offlinePay/index.tsx
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
import { Text, View } from "@tarojs/components";
|
||||||
|
import { memo } from "react";
|
||||||
|
import AmountShow from "../amountShow";
|
||||||
|
import classnames from "classnames";
|
||||||
|
import styles from './index.module.scss'
|
||||||
|
|
||||||
|
import MCheckbox from "@/components/checkbox";
|
||||||
|
import Popup from "@/components/popup";
|
||||||
|
import SearchInput from "@/components/searchInput";
|
||||||
|
import Taro from "@tarojs/taro";
|
||||||
|
|
||||||
|
type Param = {
|
||||||
|
show?: true|false,
|
||||||
|
onClose?: () => void
|
||||||
|
}
|
||||||
|
export default memo(({show = true, onClose}:Param) => {
|
||||||
|
//复制功能
|
||||||
|
const clipboardData = () => {
|
||||||
|
Taro.setClipboardData({
|
||||||
|
data: '开户名称:佛山市浩川盛世科技有限公司; 开户银行:招商银行汾江支行; 转账汇款账号:62062342120001221231212',
|
||||||
|
success: function (res) {
|
||||||
|
Taro.showToast({
|
||||||
|
icon: 'none',
|
||||||
|
title: '复制成功'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<View className={styles.offlinePay_main}>
|
||||||
|
<Popup show={show} showTitle={false} onClose={onClose} >
|
||||||
|
<View className={styles.offlinePay_con}>
|
||||||
|
<View className={classnames('iconfont icon-a-moreback', styles.miconfont_title)} onClick={onClose}></View>
|
||||||
|
<View className={styles.title}>线下汇款</View>
|
||||||
|
<View className={styles.offlinePay_list}>
|
||||||
|
<SearchInput showBorder={false} title='开户名称' titleStyle={{fontSize:'23rpx'}}>
|
||||||
|
<Text className={styles.offlinePay_con_text}>佛山市浩川盛世科技有限公司</Text>
|
||||||
|
</SearchInput>
|
||||||
|
<SearchInput showBorder={false} title='开户银行' titleStyle={{fontSize:'23rpx'}}>
|
||||||
|
<Text className={styles.offlinePay_con_text}>招商银行汾江支行</Text>
|
||||||
|
</SearchInput>
|
||||||
|
<SearchInput showBorder={false} title='转账汇款账号' titleStyle={{fontSize:'23rpx'}}>
|
||||||
|
<Text className={styles.offlinePay_con_text}>62062342120001221231212</Text>
|
||||||
|
</SearchInput>
|
||||||
|
</View>
|
||||||
|
<View className={styles.btns} onClick={clipboardData}>复制信息</View>
|
||||||
|
</View>
|
||||||
|
</Popup>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
)
|
||||||
|
})
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
.order_flow_state{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 30px;
|
||||||
|
height: 116px;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 20px;
|
||||||
|
.order_flow_state_text{
|
||||||
|
color: $color_main;
|
||||||
|
font-size:$font_size;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.order_flow_state_desc{
|
||||||
|
color: $color_font_three;
|
||||||
|
font-size: $font_size_medium;
|
||||||
|
margin-left: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
14
src/pages/cutOrder/components/orderState copy/index.tsx
Normal file
14
src/pages/cutOrder/components/orderState copy/index.tsx
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import { View } from "@tarojs/components"
|
||||||
|
import styles from './index.module.scss'
|
||||||
|
|
||||||
|
export default ({
|
||||||
|
state = '',
|
||||||
|
desc = ''
|
||||||
|
}) => {
|
||||||
|
return (
|
||||||
|
<View className={styles.order_flow_state}>
|
||||||
|
<View className={styles.order_flow_state_text}>{state}</View>
|
||||||
|
<View className={styles.order_flow_state_desc}>{desc}</View>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
105
src/pages/cutOrder/components/orderState/index.module.scss
Normal file
105
src/pages/cutOrder/components/orderState/index.module.scss
Normal file
@ -0,0 +1,105 @@
|
|||||||
|
.order_flow_state{
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 20px;
|
||||||
|
box-sizing:border-box;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
.order_status_list{
|
||||||
|
max-height: 250px;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
.order_status_list_show {
|
||||||
|
max-height: 1000px !important;
|
||||||
|
}
|
||||||
|
.order_status_item{
|
||||||
|
position: relative;
|
||||||
|
padding-left: 50px;
|
||||||
|
&:nth-last-child(n+2) {
|
||||||
|
padding-bottom: 30px;
|
||||||
|
}
|
||||||
|
.order_status_tail_end, .order_status_tail{
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
border: 2px solid $color_main;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
position:absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 10px;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.order_status_tail_end{
|
||||||
|
background-color: $color_main;
|
||||||
|
}
|
||||||
|
.order_status_line{
|
||||||
|
border-left: 2px solid $color_main;
|
||||||
|
height: 100%;
|
||||||
|
top: 10px;
|
||||||
|
left: 9px;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.order_status_content{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.order_status_title{
|
||||||
|
color: $color_font_two;
|
||||||
|
font-size: $font_size;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.order_status_time{
|
||||||
|
color: $color_font_two;
|
||||||
|
font-size: $font_size_medium;
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
.order_status_tag{
|
||||||
|
font-size: $font_size_min;
|
||||||
|
background: #F0F0F0;
|
||||||
|
border-radius: 6px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
color: $color_font_two;
|
||||||
|
}
|
||||||
|
.order_status_select{
|
||||||
|
color: $color_main;
|
||||||
|
}
|
||||||
|
.order_status_tag_select{
|
||||||
|
color: $color_main;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.order_status_des{
|
||||||
|
color: $color_font_two;
|
||||||
|
font-size: $font_size_medium;
|
||||||
|
}
|
||||||
|
.order_status_des_select{
|
||||||
|
color: $color_font_one;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.more{
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: $font_size_min;
|
||||||
|
color: $color_font_one;
|
||||||
|
padding-top: 20px;
|
||||||
|
.miconfonts{
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 25px;
|
||||||
|
transform:rotate(90deg);
|
||||||
|
}
|
||||||
|
.open_miconfonts{
|
||||||
|
transform:rotate(-90deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.image_tag{
|
||||||
|
width: 140px;
|
||||||
|
height: 144px;
|
||||||
|
.image{
|
||||||
|
width: 140px;
|
||||||
|
height: 144px;
|
||||||
|
}
|
||||||
|
position: absolute;
|
||||||
|
top: -10px;
|
||||||
|
right: -10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
63
src/pages/cutOrder/components/orderState/index.tsx
Normal file
63
src/pages/cutOrder/components/orderState/index.tsx
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
import { Image, Text, View } from "@tarojs/components"
|
||||||
|
import { memo, useMemo, useState } from "react"
|
||||||
|
import styles from './index.module.scss'
|
||||||
|
import classnames from "classnames";
|
||||||
|
import { formatDateTime, formatImgUrl } from "@/common/fotmat";
|
||||||
|
import { PAYMENT_METHOD, PAYMENT_METHOD_PARAM } from "@/common/enum";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
type Param = {
|
||||||
|
list: {
|
||||||
|
status: string,
|
||||||
|
time: string,
|
||||||
|
tag: string,
|
||||||
|
desc: string
|
||||||
|
}[],
|
||||||
|
payment_method: 0|PAYMENT_METHOD_PARAM,
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
//支付方式枚举
|
||||||
|
const {
|
||||||
|
PaymentMethodAccountPeriod,
|
||||||
|
PaymentMethodCashOnDelivery,
|
||||||
|
} = PAYMENT_METHOD
|
||||||
|
|
||||||
|
export default memo(({list = [], payment_method = 0}:Param) => {
|
||||||
|
|
||||||
|
const [showMore, setShowMore] = useState(false)
|
||||||
|
const changeMore = () => {
|
||||||
|
setShowMore(() => !showMore)
|
||||||
|
}
|
||||||
|
const dataList = useMemo(() => {
|
||||||
|
return list.reverse()
|
||||||
|
}, [list])
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{(dataList.length > 0)&&<View className={styles.order_flow_state}>
|
||||||
|
<View className={classnames(styles.order_status_list, showMore&&styles.order_status_list_show)}>
|
||||||
|
{dataList.map((item, index) => <View className={styles.order_status_item}>
|
||||||
|
{(dataList.length > 1)&&<View className={classnames(styles.order_status_tail, (index == 0)&&styles.order_status_tail_end)}></View>}
|
||||||
|
{(dataList.length != (index + 1))&&<View className={styles.order_status_line}></View>}
|
||||||
|
<View className={styles.order_status_content}>
|
||||||
|
<View className={classnames(styles.order_status_title, (index == 0)&&styles.order_status_select)}>{item.status}</View>
|
||||||
|
<View className={classnames(styles.order_status_time, (index == 0)&&styles.order_status_select)}>{formatDateTime(item.time)}</View>
|
||||||
|
{/* <View className={classnames(styles.order_status_tag, (index == 0)&&styles.order_status_tag_select)}>{item.tag}</View> */}
|
||||||
|
</View>
|
||||||
|
<Text className={classnames(styles.order_status_des, (index == 0)&&styles.order_status_des_select)}>{item.desc}</Text>
|
||||||
|
</View>)}
|
||||||
|
</View>
|
||||||
|
{(dataList.length > 2) && <View className={styles.more} onClick={() => changeMore()}>
|
||||||
|
<Text>{showMore&&'收起详情'||'点击查看详情'}</Text>
|
||||||
|
<Text className={classnames('iconfont icon-a-moreback', styles.miconfonts, showMore&&styles.open_miconfonts)}></Text>
|
||||||
|
</View>}
|
||||||
|
<View className={styles.image_tag}>
|
||||||
|
{(payment_method == PaymentMethodCashOnDelivery.value)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status.png')} className={styles.image}/>}
|
||||||
|
{(payment_method == PaymentMethodAccountPeriod.value)&&<Image mode="aspectFit" src={formatImgUrl('/mall/order_pay_status_7day.png')} className={styles.image}/>}
|
||||||
|
</View>
|
||||||
|
</View>}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
})
|
||||||
126
src/pages/cutOrder/components/payment/index.module.scss
Normal file
126
src/pages/cutOrder/components/payment/index.module.scss
Normal file
@ -0,0 +1,126 @@
|
|||||||
|
$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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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% - 100px);
|
||||||
|
left:0;
|
||||||
|
right: 0;
|
||||||
|
margin: auto;
|
||||||
|
|
||||||
|
}
|
||||||
|
.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: #FFC300;
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
185
src/pages/cutOrder/components/payment/index.tsx
Normal file
185
src/pages/cutOrder/components/payment/index.tsx
Normal file
@ -0,0 +1,185 @@
|
|||||||
|
import { Text, View } from "@tarojs/components";
|
||||||
|
import { memo, useCallback, useEffect, useMemo, useState } from "react";
|
||||||
|
import AmountShow from "../amountShow";
|
||||||
|
import classnames from "classnames";
|
||||||
|
import styles from './index.module.scss'
|
||||||
|
|
||||||
|
import MCheckbox from "@/components/checkbox";
|
||||||
|
import Popup from "@/components/popup";
|
||||||
|
import OfflinePay from "../offlinePay";
|
||||||
|
import ScanPay from "../scanPay";
|
||||||
|
import { GetOrderPayApi, SubmitOrderPayApi } from "@/api/orderPay";
|
||||||
|
import { formatPriceDiv } from "@/common/fotmat";
|
||||||
|
import {alert} from "@/common/common"
|
||||||
|
import { PAYMENT_METHOD, PAYMENT_METHOD_PARAM } from "@/common/enum";
|
||||||
|
|
||||||
|
type Param = {
|
||||||
|
show?: true|false,
|
||||||
|
onClose?: () => void,
|
||||||
|
onSubmitSuccess?: () => void, //支付成功
|
||||||
|
orderInfo?: OrderInfo
|
||||||
|
}
|
||||||
|
|
||||||
|
type OrderInfo = {
|
||||||
|
orderId: number, //应付单id
|
||||||
|
payment_method: 0|PAYMENT_METHOD_PARAM //支付方式
|
||||||
|
}
|
||||||
|
|
||||||
|
type PayStatus = 1|2|3|4|5|null //1:预存款， 2:账期，3：线下汇款， 4：扫码支付, 5:货到付款
|
||||||
|
export default memo(({show = false, onClose, orderInfo, onSubmitSuccess}:Param) => {
|
||||||
|
|
||||||
|
//提交参数
|
||||||
|
const [submitData, setSubmitData] = useState<{id:number, payment_method: PayStatus}>({
|
||||||
|
id:0,
|
||||||
|
payment_method: null
|
||||||
|
})
|
||||||
|
|
||||||
|
//线下付款
|
||||||
|
const [offlinePayShow, setofflinePayShow] = useState(false)
|
||||||
|
const onShowOfflinePay = () => {
|
||||||
|
setofflinePayShow(true)
|
||||||
|
onClose?.()
|
||||||
|
}
|
||||||
|
|
||||||
|
//扫码支付
|
||||||
|
const [scanPayShow, setScanPayShow] = useState(false)
|
||||||
|
const onShowScanPay = () => {
|
||||||
|
setScanPayShow(true)
|
||||||
|
onClose?.()
|
||||||
|
}
|
||||||
|
|
||||||
|
//获取支付方式数据
|
||||||
|
const [payInfo, setPayInfo] = useState<any>()
|
||||||
|
const {fetchData: orderFetchData} = GetOrderPayApi()
|
||||||
|
const getOrderPay = async () => {
|
||||||
|
let {data} = await orderFetchData({id: orderInfo?.orderId})
|
||||||
|
setPayInfo(() => data)
|
||||||
|
}
|
||||||
|
useEffect(() => {
|
||||||
|
if(show&&orderInfo?.orderId) {
|
||||||
|
setSubmitData((val) => ({...val, id:orderInfo.orderId}))
|
||||||
|
getOrderPay()
|
||||||
|
}
|
||||||
|
}, [show, orderInfo])
|
||||||
|
|
||||||
|
//预存款选择
|
||||||
|
const advanceSelectData = useCallback((val) => {
|
||||||
|
setSubmitData((e) => ({...e, payment_method:val}))
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
//账期选择
|
||||||
|
const periodSelectData = (val) => {
|
||||||
|
setSubmitData((e) => ({...e, payment_method:val}))
|
||||||
|
}
|
||||||
|
|
||||||
|
//提交支付
|
||||||
|
const {fetchData: submitFetchData} = SubmitOrderPayApi()
|
||||||
|
const submitPay = async () => {
|
||||||
|
if(submitData.payment_method === null) {
|
||||||
|
alert.error('请选择支付方式')
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
alert.loading('正在支付')
|
||||||
|
let res = await submitFetchData(submitData)
|
||||||
|
if(res.success) {
|
||||||
|
alert.success('支付成功')
|
||||||
|
onSubmitSuccess?.()
|
||||||
|
} else {
|
||||||
|
alert.none(res.msg)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//预付款
|
||||||
|
const advance_payment = useMemo(() => {
|
||||||
|
const price = payInfo?.should_collect_money - payInfo?.amount_paid
|
||||||
|
return (
|
||||||
|
<View className={styles.payment_list_item_left_price}>{(payInfo?.advance_deposit_balance < price)&&'余额不足，' }剩余 ¥{formatPriceDiv(payInfo?.advance_deposit_balance)}</View>
|
||||||
|
)
|
||||||
|
}, [payInfo])
|
||||||
|
|
||||||
|
//账期
|
||||||
|
const account_peyment = useMemo(() => {
|
||||||
|
const price = payInfo?.should_collect_money - payInfo?.amount_paid
|
||||||
|
return (
|
||||||
|
<View className={styles.payment_list_item_left_price}>{(payInfo?.account_period_credit_available_line < price)&&'额度不足, '}剩余 ¥{formatPriceDiv(payInfo?.account_period_credit_available_line)}</View>
|
||||||
|
)
|
||||||
|
}, [payInfo])
|
||||||
|
|
||||||
|
//支付方式枚举
|
||||||
|
const {PaymentMethodPreDeposit, PaymentMethodAccountPeriod} = PAYMENT_METHOD
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View className={styles.payment_main}>
|
||||||
|
<Popup show={show} showTitle={false} onClose={onClose} >
|
||||||
|
<View className={styles.payment_con}>
|
||||||
|
<View className={classnames('iconfont icon-a-moreback', styles.miconfont_title)} onClick={onClose}></View>
|
||||||
|
<View className={styles.title}>订单支付</View>
|
||||||
|
<View className={styles.amount}>
|
||||||
|
<AmountShow status={2} number={formatPriceDiv(payInfo?.should_collect_money - payInfo?.amount_paid)}/>
|
||||||
|
</View>
|
||||||
|
<View className={styles.payment_list}>
|
||||||
|
<View className={styles.payment_list_top_border}></View>
|
||||||
|
<View className={styles.payment_list_title}>
|
||||||
|
{/* <Text>向商家发起支付</Text> */}
|
||||||
|
<View className={styles.payment_list_title_price}>
|
||||||
|
<View className={styles.payment_list_title_price_item}>
|
||||||
|
<Text>订单金额</Text>
|
||||||
|
<Text>¥{formatPriceDiv(payInfo?.should_collect_money)}</Text>
|
||||||
|
</View>
|
||||||
|
<View className={styles.payment_list_title_price_item}>
|
||||||
|
<Text>已付金额</Text>
|
||||||
|
<Text>¥{formatPriceDiv(payInfo?.amount_paid)}</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View className={styles.payment_list_con}>
|
||||||
|
<View className={styles.payment_list_item}>
|
||||||
|
<View className={styles.payment_list_item_left}>
|
||||||
|
<View className={styles.payment_list_item_left_name}>
|
||||||
|
<View className={classnames('iconfont icon-a-tuikuanshouhou', styles.miconfont)}></View>
|
||||||
|
<View className={styles.payment_list_item_left_text}>预存款</View>
|
||||||
|
</View>
|
||||||
|
{advance_payment}
|
||||||
|
</View>
|
||||||
|
<MCheckbox status={submitData.payment_method == PaymentMethodPreDeposit.value} onSelect={() => advanceSelectData(PaymentMethodPreDeposit.value)} onClose={() => advanceSelectData(null)}/>
|
||||||
|
</View>
|
||||||
|
{(orderInfo?.payment_method != PaymentMethodAccountPeriod.value)&&<View className={styles.payment_list_item}>
|
||||||
|
<View className={styles.payment_list_item_left}>
|
||||||
|
<View className={styles.payment_list_item_left_name}>
|
||||||
|
<View className={classnames('iconfont icon-a-tuikuanshouhou', styles.miconfont)}></View>
|
||||||
|
<View className={styles.payment_list_item_left_text}>{payInfo?.account_period}天账期</View>
|
||||||
|
</View>
|
||||||
|
{/* <View className={styles.payment_list_item_left_price}>可用额度 ¥{formatPriceDiv(payInfo?.account_period_credit_available_line)}</View> */}
|
||||||
|
{account_peyment}
|
||||||
|
</View>
|
||||||
|
<MCheckbox status={submitData.payment_method == PaymentMethodAccountPeriod.value} onSelect={() => periodSelectData(PaymentMethodAccountPeriod.value)} onClose={() => periodSelectData(null)}/>
|
||||||
|
</View>}
|
||||||
|
<View className={styles.payment_list_item} onClick={onShowOfflinePay}>
|
||||||
|
<View className={styles.payment_list_item_left}>
|
||||||
|
<View className={styles.payment_list_item_left_name}>
|
||||||
|
<View className={classnames('iconfont icon-a-tuikuanshouhou', styles.miconfont)}></View>
|
||||||
|
<View className={styles.payment_list_item_left_text}>线下汇款</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View className={classnames('iconfont icon-a-moreback', styles.miconfont_more)}></View>
|
||||||
|
</View>
|
||||||
|
<View className={styles.payment_list_item} onClick={onShowScanPay}>
|
||||||
|
<View className={styles.payment_list_item_left}>
|
||||||
|
<View className={styles.payment_list_item_left_name}>
|
||||||
|
<View className={classnames('iconfont icon-a-tuikuanshouhou', styles.miconfont)}></View>
|
||||||
|
<View className={styles.payment_list_item_left_text}>扫码支付</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View className={classnames('iconfont icon-a-moreback', styles.miconfont_more)}></View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View className={styles.btns} onClick={submitPay}>确认交易</View>
|
||||||
|
</View>
|
||||||
|
</Popup>
|
||||||
|
<OfflinePay show={offlinePayShow} onClose={() => setofflinePayShow(false)}/>
|
||||||
|
<ScanPay show={scanPayShow} onClose={() => setScanPayShow(false)}/>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
)
|
||||||
|
})
|
||||||
48
src/pages/cutOrder/components/remark/index.module.scss
Normal file
48
src/pages/cutOrder/components/remark/index.module.scss
Normal file
@ -0,0 +1,48 @@
|
|||||||
|
.order_popup{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20px 0;
|
||||||
|
.order_popup_title{
|
||||||
|
color: $font_size_big;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #000000;
|
||||||
|
padding-bottom: 20px;
|
||||||
|
}
|
||||||
|
.order_popup_input{
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 25px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-top: 43px;
|
||||||
|
position: relative;
|
||||||
|
.descDataNum{
|
||||||
|
position: absolute;
|
||||||
|
right: 40px;
|
||||||
|
bottom: 10px;
|
||||||
|
height: 39px;
|
||||||
|
font-size: $font_size_medium;
|
||||||
|
color: $color_font_two;
|
||||||
|
}
|
||||||
|
textarea{
|
||||||
|
background-color: #f3f3f3;
|
||||||
|
border-radius: 10px;
|
||||||
|
width: 100%;
|
||||||
|
height: 313px;
|
||||||
|
padding: 20px;
|
||||||
|
padding-bottom: 50px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-size: $font_size;
|
||||||
|
border: 2px solid #e6e6e6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.order_save_address{
|
||||||
|
height: 82px;
|
||||||
|
background: #007aff;
|
||||||
|
border-radius: 40px;
|
||||||
|
width: 668px;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 82px;
|
||||||
|
color: #fff;
|
||||||
|
margin-top: 60px;
|
||||||
|
}
|
||||||
|
}
|
||||||
38
src/pages/cutOrder/components/remark/index.tsx
Normal file
38
src/pages/cutOrder/components/remark/index.tsx
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
import Popup from "@/components/popup"
|
||||||
|
import { Textarea, View } from "@tarojs/components"
|
||||||
|
import { useCallback, useState } from "react"
|
||||||
|
import styles from './index.module.scss'
|
||||||
|
|
||||||
|
type Param = {
|
||||||
|
onBlur?: (val:any) => void
|
||||||
|
onSave?: (val: string) => void
|
||||||
|
}
|
||||||
|
export default ({onBlur, onSave}:Param) => {
|
||||||
|
const [descData, setDescData] = useState({
|
||||||
|
number: 0,
|
||||||
|
value: '',
|
||||||
|
count: 200
|
||||||
|
})
|
||||||
|
const getDesc = useCallback((e) => {
|
||||||
|
let value = e.detail.value
|
||||||
|
let res = value
|
||||||
|
if(value.length > descData.count) {
|
||||||
|
res = value.slice(0, descData.count)
|
||||||
|
}
|
||||||
|
setDescData({...descData, number:res.length, value: res})
|
||||||
|
},[])
|
||||||
|
|
||||||
|
const setSave = () => {
|
||||||
|
onSave?.(descData.value)
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<View className={styles.order_popup}>
|
||||||
|
<View className={styles.order_popup_title}>编辑备注</View>
|
||||||
|
<View className={styles.order_popup_input}>
|
||||||
|
<Textarea placeholder="请添加备注" maxlength={descData.count} cursorSpacing={100} onInput={(e) => getDesc(e)} onBlur={(e) => onBlur?.(e)}></Textarea>
|
||||||
|
<View className={styles.descDataNum}>{descData.number}/{descData.count}</View>
|
||||||
|
</View>
|
||||||
|
<View className={styles.order_save_address} onClick={() => setSave()}>保存</View>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
54
src/pages/cutOrder/components/scanPay/index.module.scss
Normal file
54
src/pages/cutOrder/components/scanPay/index.module.scss
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
$top:170px;
|
||||||
|
.scanPay_main{
|
||||||
|
.scanPay_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;
|
||||||
|
}
|
||||||
|
.desc{
|
||||||
|
font-size: $font_size_min;
|
||||||
|
color: $color_main;
|
||||||
|
text-align: center;
|
||||||
|
padding: 10px 0;
|
||||||
|
.miconfont{
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.scanPay_list{
|
||||||
|
border-radius: 10px;
|
||||||
|
height: 900px;
|
||||||
|
image{
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
161
src/pages/cutOrder/components/scanPay/index.tsx
Normal file
161
src/pages/cutOrder/components/scanPay/index.tsx
Normal file
@ -0,0 +1,161 @@
|
|||||||
|
import { Image, ScrollView, Text, View } from "@tarojs/components";
|
||||||
|
import { memo, useEffect, useRef, useState } from "react";
|
||||||
|
import classnames from "classnames";
|
||||||
|
import styles from './index.module.scss'
|
||||||
|
import Popup from "@/components/popup";
|
||||||
|
import Taro from "@tarojs/taro";
|
||||||
|
import { alert } from "@/common/common";
|
||||||
|
import { formatImgUrl } from "@/common/fotmat";
|
||||||
|
import useCheckAuthorize from "@/use/useCheckAuthorize";
|
||||||
|
import { GetPayCode } from "@/api/onlinePay";
|
||||||
|
import LoadingCard from "@/components/loadingCard";
|
||||||
|
|
||||||
|
|
||||||
|
type Param = {
|
||||||
|
show?: true|false,
|
||||||
|
onClose?: () => void
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
type Item = {
|
||||||
|
product_code: string,
|
||||||
|
product_name: string,
|
||||||
|
product_color_code: string,
|
||||||
|
product_color_name: string,
|
||||||
|
num: string,
|
||||||
|
weight: string,
|
||||||
|
sale_price: string,
|
||||||
|
total_price: string
|
||||||
|
}
|
||||||
|
type CodeParam = {
|
||||||
|
title: string,
|
||||||
|
company: string,
|
||||||
|
order_type: string,
|
||||||
|
sale_user: string,
|
||||||
|
order_created_time: string,
|
||||||
|
order_no: string,
|
||||||
|
department: string,
|
||||||
|
shipment_mode: string,
|
||||||
|
target_user_name: string,
|
||||||
|
target_address: string,
|
||||||
|
target_description: string,
|
||||||
|
pay_account: string,
|
||||||
|
bank_account_name: string,
|
||||||
|
bank_name: string,
|
||||||
|
pay_type: string,
|
||||||
|
client: string,
|
||||||
|
phone: string,
|
||||||
|
order_total_length: string,
|
||||||
|
order_total_price: string,
|
||||||
|
qrcode: string,
|
||||||
|
order_total_weight: string,
|
||||||
|
list: Item[]
|
||||||
|
}
|
||||||
|
export default memo(({show = true, onClose}:Param) => {
|
||||||
|
|
||||||
|
//获取支付二维码
|
||||||
|
const [payCodeImage, setPayCodeImage] = useState<string>('')
|
||||||
|
const fileData = useRef({
|
||||||
|
filePath: '',
|
||||||
|
base64: ''
|
||||||
|
})
|
||||||
|
const {fetchData, state} = GetPayCode()
|
||||||
|
const getCore = async () => {
|
||||||
|
let res = await fetchData({
|
||||||
|
title: "面料销售电子确认单",
|
||||||
|
company: "什么什么公司123",
|
||||||
|
order_type: "散剪",
|
||||||
|
sale_user: "小崔",
|
||||||
|
order_created_time:"2022/02/01 12:32:13",
|
||||||
|
order_no:"XS-211005888",
|
||||||
|
department:"嘻嘻嘻",
|
||||||
|
shipment_mode:"自提",
|
||||||
|
target_user_name:"大崔",
|
||||||
|
target_address:"阿斯顿发斯蒂芬",
|
||||||
|
target_description:"无",
|
||||||
|
pay_account:"1234567890123450001",
|
||||||
|
bank_account_name:"佛山市浩川长盛科技有限公司",
|
||||||
|
bank_name:"招商银行佛山分行禅城支行",
|
||||||
|
pay_type:"现结",
|
||||||
|
client:"客户名称",
|
||||||
|
phone:"15818085802",
|
||||||
|
order_total_length:"12",
|
||||||
|
order_total_price:"63000",
|
||||||
|
qrcode:"https://www.zzfzyc.com/checkorder/XS-211005888",
|
||||||
|
order_total_weight:"300.00",
|
||||||
|
list: [{product_code:'5215',product_name:'26S双纱亲水滑爽棉',product_color_code:'053',product_color_name:'洋红',num:'4',weight:'123.23',sale_price:'43',total_price:'4510.7'}]
|
||||||
|
})
|
||||||
|
const base64 = res.data.base64
|
||||||
|
setPayCodeImage(() => base64)
|
||||||
|
const time = new Date().valueOf()
|
||||||
|
const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64) || [];
|
||||||
|
let filePath = Taro.env.USER_DATA_PATH + '/img' + time +'.'+ format
|
||||||
|
fileData.current.filePath = filePath
|
||||||
|
fileData.current.base64 = bodyData
|
||||||
|
const save = Taro.getFileSystemManager()
|
||||||
|
save.writeFile({
|
||||||
|
filePath: fileData.current.filePath,
|
||||||
|
data: fileData.current.base64,
|
||||||
|
encoding: 'base64',
|
||||||
|
})
|
||||||
|
|
||||||
|
}
|
||||||
|
useEffect(() => {
|
||||||
|
if(show)
|
||||||
|
getCore()
|
||||||
|
}, [show])
|
||||||
|
|
||||||
|
//检查是否开启保存图片权限
|
||||||
|
const {check} = useCheckAuthorize({scope:'scope.writePhotosAlbum', msg:'您没授权，无法保存图片'})
|
||||||
|
const saveImageCheck = async () => {
|
||||||
|
const res = await check()
|
||||||
|
res&&saveImage()
|
||||||
|
}
|
||||||
|
|
||||||
|
//保存图片
|
||||||
|
const saveImage = () => {
|
||||||
|
alert.loading('正在保存图片')
|
||||||
|
Taro.saveImageToPhotosAlbum({
|
||||||
|
filePath: fileData.current.filePath,
|
||||||
|
success: function (res) {
|
||||||
|
alert.success('图片保存成功')
|
||||||
|
},
|
||||||
|
fail: function (err) {
|
||||||
|
console.log('err::', err)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//预览图片
|
||||||
|
const showImage = () => {
|
||||||
|
console.log('fileData.current.filePath::', fileData.current.filePath)
|
||||||
|
Taro.previewImage({
|
||||||
|
current: fileData.current.filePath, // 当前显示
|
||||||
|
urls: [fileData.current.filePath] // 需要预览的图片http链接列表
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//复制功能
|
||||||
|
return (
|
||||||
|
<View className={styles.scanPay_main}>
|
||||||
|
<Popup show={show} showTitle={false} onClose={onClose}>
|
||||||
|
<View className={styles.scanPay_con}>
|
||||||
|
<View className={classnames('iconfont icon-a-moreback', styles.miconfont_title)} onClick={onClose}></View>
|
||||||
|
<View className={styles.title}>扫码支付</View>
|
||||||
|
<View className={styles.desc}>
|
||||||
|
<Text className={classnames(styles.miconfont, 'iconfont, icon-zhuyi')}></Text>
|
||||||
|
扫码支付成功后，自动更新状态
|
||||||
|
</View>
|
||||||
|
<View className={styles.scanPay_list}>
|
||||||
|
{(state.loading)&&<LoadingCard/>||
|
||||||
|
<ScrollView scrollY className={styles.scanPay_list}>
|
||||||
|
<Image mode="widthFix" src={payCodeImage} onClick={showImage}></Image>
|
||||||
|
</ScrollView>}
|
||||||
|
</View>
|
||||||
|
<View className={styles.btns} onClick={saveImageCheck}>保存电子确认单</View>
|
||||||
|
</View>
|
||||||
|
</Popup>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
)
|
||||||
|
})
|
||||||
33
src/pages/cutOrder/components/shipmentMode/index.module.scss
Normal file
33
src/pages/cutOrder/components/shipmentMode/index.module.scss
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
|
||||||
|
.order_title{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20px 30px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #fff;
|
||||||
|
height: 116px;
|
||||||
|
border-radius: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
text{
|
||||||
|
flex:1;
|
||||||
|
font-size: $font_size;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.order_status{
|
||||||
|
background-color: #F0F0F0;
|
||||||
|
width: 148px;
|
||||||
|
height: 55px;
|
||||||
|
color: $color_font_three;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 55px;
|
||||||
|
font-size: $font_size_medium;
|
||||||
|
border-radius: 30px;
|
||||||
|
&:nth-last-child(1) {
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.order_status_selected{
|
||||||
|
color: $color_main;
|
||||||
|
border: 1px solid $color_main;
|
||||||
|
}
|
||||||
|
}
|
||||||
28
src/pages/cutOrder/components/shipmentMode/index.tsx
Normal file
28
src/pages/cutOrder/components/shipmentMode/index.tsx
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
import { Text, View } from "@tarojs/components"
|
||||||
|
import styles from './index.module.scss'
|
||||||
|
import classnames from "classnames";
|
||||||
|
import { memo, useRef, useState } from "react";
|
||||||
|
|
||||||
|
type Param = {
|
||||||
|
onSelect?:(val:number) => void
|
||||||
|
}
|
||||||
|
export default memo(({onSelect}: Param) => {
|
||||||
|
//收货方法 1:自提，2：物流
|
||||||
|
const shipmentMode = useRef([
|
||||||
|
{value:1, label:'上门自提', selected:false},
|
||||||
|
{value:2, label:'物流', selected:false}
|
||||||
|
])
|
||||||
|
const [selectValue, setSelectValue] = useState()
|
||||||
|
const selectShipmentMode = (value) => {
|
||||||
|
setSelectValue(() => value)
|
||||||
|
onSelect?.(value)
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<View className={styles.order_title}>
|
||||||
|
<Text>收货方式</Text>
|
||||||
|
{shipmentMode.current.map(item => {
|
||||||
|
return <View className={classnames(styles.order_status, (selectValue == item.value)&&styles.order_status_selected)} onClick={() => selectShipmentMode(item.value)}>{item.label}</View>
|
||||||
|
})}
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
})
|
||||||
@ -0,0 +1,69 @@
|
|||||||
|
.order_price{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
&:nth-last-child(n+2) {
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
.order_price_text{
|
||||||
|
font-size: $font_size_medium;
|
||||||
|
// margin-right: 10px;
|
||||||
|
display: flex;
|
||||||
|
.iconfont_msg{
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.miconfont{
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
.message{
|
||||||
|
position: absolute;
|
||||||
|
top: -50px;
|
||||||
|
background: #A8B3BD;
|
||||||
|
z-index: 9;
|
||||||
|
min-height: 50px;
|
||||||
|
border-radius: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
&::before{
|
||||||
|
z-index: 1;
|
||||||
|
position: absolute;
|
||||||
|
bottom: -7px;
|
||||||
|
left: 10px;
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
content: " ";
|
||||||
|
transform: rotate(45deg);
|
||||||
|
background: #A8B3BD;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.emphasis{
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.order_price_num{
|
||||||
|
color: $color_main;
|
||||||
|
font-weight: 700;
|
||||||
|
text{
|
||||||
|
&:nth-child(1) {
|
||||||
|
font-size: $font_size_min;
|
||||||
|
}
|
||||||
|
&:nth-child(2) {
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
&:nth-child(3) {
|
||||||
|
font-size: $font_size_medium;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.emphasis_num{
|
||||||
|
text{
|
||||||
|
&:nth-child(2) {
|
||||||
|
font-size: $font_size_big;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
40
src/pages/cutOrder/components/submitOrderBtn/index.tsx
Normal file
40
src/pages/cutOrder/components/submitOrderBtn/index.tsx
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
import { Text, View } from "@tarojs/components"
|
||||||
|
import { memo, useCallback, useEffect, useMemo } from "react"
|
||||||
|
import {formatKbPrice} from '@/common/common'
|
||||||
|
import classnames from "classnames";
|
||||||
|
import styles from './index.module.scss'
|
||||||
|
type Param = {
|
||||||
|
style?: Object,
|
||||||
|
number?: number
|
||||||
|
}
|
||||||
|
export default memo(({style, number = 0}:Param) => {
|
||||||
|
const priceDom = useCallback(() => {
|
||||||
|
let res = number.toFixed(2).split('.')
|
||||||
|
let int_num = parseInt(res[0]) + ''
|
||||||
|
let decimals_num = res[1]
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Text>¥</Text>
|
||||||
|
<Text>{Number(int_num).toLocaleString()}</Text>
|
||||||
|
<Text>.{decimals_num}</Text>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}, [number])
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<View className={styles.order_price}>
|
||||||
|
<View className={classnames(styles.order_price_text, styles.emphasis)}>
|
||||||
|
<Text>预估金额</Text>
|
||||||
|
<View className={styles.iconfont_msg}>
|
||||||
|
<Text className={classnames(styles.miconfont, 'iconfont icon-a-tuikuanshouhou')}></Text>
|
||||||
|
{/* <View className={classnames(styles.message)}>123123123121212312312312312</View> */}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View className={classnames(styles.order_price_num, styles.emphasis_num)} style={style}>
|
||||||
|
{priceDom()}
|
||||||
|
</View>
|
||||||
|
|
||||||
|
</View>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
})
|
||||||
39
src/pages/cutOrder/components/weightMemo/index.module.scss
Normal file
39
src/pages/cutOrder/components/weightMemo/index.module.scss
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
|
||||||
|
.weight_memo{
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 0 20px;
|
||||||
|
.weight_memo_item{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 130px;
|
||||||
|
&:nth-child(1) {
|
||||||
|
border-bottom: 1px solid #f3f3f3;
|
||||||
|
}
|
||||||
|
.title, .desc{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
font-size: $font_size;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.desc{
|
||||||
|
color: $color_font_two;
|
||||||
|
font-size: $font_size_medium;
|
||||||
|
}
|
||||||
|
.miconfont_check, .miconfont_custom{
|
||||||
|
font-size: 37px;
|
||||||
|
color: $color_main;
|
||||||
|
font-weight: normal;
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
.miconfont_custom{
|
||||||
|
color:#FFC300;
|
||||||
|
}
|
||||||
|
.miconfont_more{
|
||||||
|
font-size: 30px;
|
||||||
|
padding-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
36
src/pages/cutOrder/components/weightMemo/index.tsx
Normal file
36
src/pages/cutOrder/components/weightMemo/index.tsx
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
import Popup from "@/components/popup"
|
||||||
|
import { Text, Textarea, View } from "@tarojs/components"
|
||||||
|
import { memo, useCallback, useState } from "react"
|
||||||
|
import styles from './index.module.scss'
|
||||||
|
import classnames from "classnames";
|
||||||
|
|
||||||
|
type Param = {
|
||||||
|
onCheck?: () => void
|
||||||
|
onCustom?: () => void
|
||||||
|
}
|
||||||
|
export default memo(({onCheck, onCustom}:Param) => {
|
||||||
|
return (
|
||||||
|
<View className={styles.weight_memo}>
|
||||||
|
<View className={styles.weight_memo_item} onClick={() => onCheck?.()}>
|
||||||
|
<View className={styles.title}>
|
||||||
|
<Text className={classnames("iconfont icon-a-yuanmadanmadanguanli", styles.miconfont_check)}></Text>
|
||||||
|
<Text>陆盈纺织</Text>
|
||||||
|
</View>
|
||||||
|
<View className={styles.desc}>
|
||||||
|
<Text>查看原码单</Text>
|
||||||
|
<Text className={classnames("iconfont icon-a-moreback", styles.miconfont_more)}></Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
<View className={styles.weight_memo_item} onClick={() => onCustom?.()}>
|
||||||
|
<View className={styles.title}>
|
||||||
|
<Text className={classnames("iconfont icon-a-yuanmadanmadanguanli", styles.miconfont_custom)}></Text>
|
||||||
|
<Text>我的码单</Text>
|
||||||
|
</View>
|
||||||
|
<View className={styles.desc}>
|
||||||
|
<Text>自定义</Text>
|
||||||
|
<Text className={classnames("iconfont icon-a-moreback", styles.miconfont_more)}></Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
})
|
||||||
6
src/pages/cutOrder/index.config.ts
Normal file
6
src/pages/cutOrder/index.config.ts
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
export default {
|
||||||
|
navigationBarTitleText: '订单详情',
|
||||||
|
enablePullDownRefresh: true,
|
||||||
|
backgroundTextStyle: 'dark',
|
||||||
|
enableShareAppMessage: true,
|
||||||
|
}
|
||||||
133
src/pages/cutOrder/index.module.scss
Normal file
133
src/pages/cutOrder/index.module.scss
Normal file
@ -0,0 +1,133 @@
|
|||||||
|
.order_main{
|
||||||
|
min-height: 100%;
|
||||||
|
background-color:$color_bg_one;
|
||||||
|
padding: 20px;
|
||||||
|
padding-bottom: 190px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.order_title{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 20px 30px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #fff;
|
||||||
|
height: 116px;
|
||||||
|
border-radius: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
text{
|
||||||
|
flex:1;
|
||||||
|
font-size: $font_size;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.order_status{
|
||||||
|
background-color: #F0F0F0;
|
||||||
|
width: 148px;
|
||||||
|
height: 55px;
|
||||||
|
color: $color_font_three;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 55px;
|
||||||
|
font-size: $font_size_medium;
|
||||||
|
border-radius: 30px;
|
||||||
|
&:nth-last-child(1) {
|
||||||
|
margin-left: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.order_desc{
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 20px;
|
||||||
|
min-height: 116px;
|
||||||
|
border-radius: 20px;
|
||||||
|
margin-top: 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.order_desc_con{
|
||||||
|
width: 150px;
|
||||||
|
font-size: $font_size;
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.order_desc_text, .order_desc_text_hint{
|
||||||
|
font-size: $font_size_medium;
|
||||||
|
color: $color_font_two;
|
||||||
|
margin-right: 10px;
|
||||||
|
flex:1;
|
||||||
|
word-break:break-all;
|
||||||
|
}
|
||||||
|
.order_desc_text_hint{
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.miconfont{
|
||||||
|
font-size: 20px;
|
||||||
|
color: $color_font_two;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.submit_order{
|
||||||
|
display: flex;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
justify-content: flex-end;
|
||||||
|
width: 100%;
|
||||||
|
align-items: center;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 6px 0px 12px 0px rgba(0,0,0,0.16);
|
||||||
|
padding: 20px 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-bottom: constant(safe-area-inset-bottom);
|
||||||
|
padding-bottom: env(safe-area-inset-bottom);
|
||||||
|
.order_btn {
|
||||||
|
width: 152px;
|
||||||
|
height: 72px;
|
||||||
|
border: 2px solid #dddddd;
|
||||||
|
border-radius: 46px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: $color_font_three;
|
||||||
|
&:nth-child(n+2) {
|
||||||
|
margin-left: 34px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.order_btn_select{
|
||||||
|
color: $color_main;
|
||||||
|
border: 2px solid $color_main;
|
||||||
|
}
|
||||||
|
.order_number_desc{
|
||||||
|
font-size: $font_size_medium;
|
||||||
|
color: $color_font_two;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.order_info{
|
||||||
|
background-color: #fff;
|
||||||
|
margin-top: 20px;
|
||||||
|
border-radius: 20px;
|
||||||
|
padding: 20px;
|
||||||
|
.order_info_title{
|
||||||
|
font-size: $font_size;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
}
|
||||||
|
.order_num{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
.order_num_btn{
|
||||||
|
font-size: $font_size_medium;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border: 2px solid #007cf7;
|
||||||
|
border-radius: 10px;
|
||||||
|
color: $color_main;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
text{
|
||||||
|
font-size: $font_size;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.weight_memo_con{
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
229
src/pages/cutOrder/index.tsx
Normal file
229
src/pages/cutOrder/index.tsx
Normal file
@ -0,0 +1,229 @@
|
|||||||
|
import {
|
||||||
|
GetSaleOrderDetailApi,
|
||||||
|
EditSaleOrderRemarkApi,
|
||||||
|
CancelOrderApi
|
||||||
|
} from "@/api/order";
|
||||||
|
import { GetOrderPayApi } from "@/api/orderPay";
|
||||||
|
import { alert, goLink } from "@/common/common";
|
||||||
|
import { ORDER_STATUS } from "@/common/enum";
|
||||||
|
import { formatDateTime, formatPriceDiv } from "@/common/fotmat";
|
||||||
|
import OrderBtns from "@/components/orderBtns";
|
||||||
|
import Popup from "@/components/popup";
|
||||||
|
import SearchInput from "@/components/searchInput";
|
||||||
|
import { Text, Textarea, View } from "@tarojs/components"
|
||||||
|
import Taro, { useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro";
|
||||||
|
import classnames from "classnames";
|
||||||
|
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||||
|
import order from "../orderList/components/order";
|
||||||
|
import AddressInfoDetail from "./components/addressInfoDetail";
|
||||||
|
import KindList from "./components/kindList";
|
||||||
|
import OrderState from "./components/orderState";
|
||||||
|
import Payment from "./components/payment";
|
||||||
|
import Remark from "./components/remark";
|
||||||
|
import styles from './index.module.scss'
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
const [showDesc, setShowDesc] = useState(false)
|
||||||
|
const router = useRouter()
|
||||||
|
const orderId = useRef<number>(Number(router.params.id))
|
||||||
|
useDidShow(() => {
|
||||||
|
getSaleOrderPreView()
|
||||||
|
})
|
||||||
|
|
||||||
|
//获取订单详情
|
||||||
|
const [orderDetail, setOrderDetail] = useState<any>() //获取到的原始数据
|
||||||
|
const {fetchData: getOrderFetchData} = GetSaleOrderDetailApi()
|
||||||
|
const getSaleOrderPreView = async () => {
|
||||||
|
if(orderId.current) {
|
||||||
|
let res = await getOrderFetchData({id: orderId.current})
|
||||||
|
setOrderDetail(res.data)
|
||||||
|
setOrderRemark(res.data.remark)
|
||||||
|
}
|
||||||
|
Taro.stopPullDownRefresh()
|
||||||
|
}
|
||||||
|
|
||||||
|
//监听获取到的数据
|
||||||
|
useEffect(() => {
|
||||||
|
if(orderDetail)
|
||||||
|
formatData()
|
||||||
|
}, [orderDetail])
|
||||||
|
|
||||||
|
//格式化数据格式
|
||||||
|
const [formatDetailOrder, setFormatDetailOrder] = useState<any>() //格式化后的数据
|
||||||
|
const formatData = () => {
|
||||||
|
setFormatDetailOrder({
|
||||||
|
estimate_amount: orderDetail.estimate_amount, //预估金额
|
||||||
|
sale_mode: orderDetail.sale_mode,
|
||||||
|
sale_mode_name: orderDetail.sale_mode_name,
|
||||||
|
total_colors: orderDetail.total_colors, //总颜色数量
|
||||||
|
total_number: orderDetail.total_number, //总数量
|
||||||
|
total_fabrics: orderDetail.total_fabrics, //面料数量
|
||||||
|
unit: orderDetail.sale_mode == 0?'条':'m', //单位
|
||||||
|
list: orderDetail.product_list,
|
||||||
|
status: orderDetail.status, //订单状态
|
||||||
|
total_sale_price: orderDetail.total_sale_price, //销售金额
|
||||||
|
total_should_collect_money: orderDetail.total_should_collect_money, //应收金额
|
||||||
|
total_weight_error_discount: orderDetail.total_weight_error_discount, //空差优惠
|
||||||
|
actual_amount: orderDetail.actual_amount, //实付金额
|
||||||
|
the_previous_status: orderDetail.the_previous_status, //取消订单时的订单状态
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const formatPreViewOrderMemo = useMemo(() => {
|
||||||
|
return formatDetailOrder
|
||||||
|
}, [formatDetailOrder])
|
||||||
|
|
||||||
|
//复制功能
|
||||||
|
const clipboardData = () => {
|
||||||
|
Taro.setClipboardData({
|
||||||
|
data: orderDetail?.order_no||'',
|
||||||
|
success: function (res) {
|
||||||
|
Taro.showToast({
|
||||||
|
icon: 'none',
|
||||||
|
title: '复制成功'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
//格式化初始地址
|
||||||
|
const defaultAddress = useMemo(() => {
|
||||||
|
return {
|
||||||
|
province_name: orderDetail?.province_name,
|
||||||
|
city_name: orderDetail?.city_name,
|
||||||
|
district_name: orderDetail?.district_name,
|
||||||
|
address_detail: orderDetail?.address_detail,
|
||||||
|
// id: address.id,
|
||||||
|
name: orderDetail?.target_user_name,
|
||||||
|
phone: orderDetail?.target_user_phone
|
||||||
|
}
|
||||||
|
|
||||||
|
}, [orderDetail])
|
||||||
|
|
||||||
|
//订单备注
|
||||||
|
const {fetchData: remarkFetchData} = EditSaleOrderRemarkApi()
|
||||||
|
const [orderRemark, setOrderRemark] = useState('')
|
||||||
|
const getRemark = useCallback(async (e) => {
|
||||||
|
setOrderRemark(() => e)
|
||||||
|
let res = await remarkFetchData({remark:e, id: orderId.current})
|
||||||
|
if(res.success) {
|
||||||
|
getSaleOrderPreView()
|
||||||
|
alert.success('提交成功')
|
||||||
|
} else {
|
||||||
|
alert.error(res.msg)
|
||||||
|
}
|
||||||
|
setShowDesc(() => false)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
//支付所需数据
|
||||||
|
const payOrderInfo = useMemo(() => {
|
||||||
|
if(orderDetail)
|
||||||
|
return {orderId: orderDetail.should_collect_order_id, payment_method:orderDetail.payment_method }
|
||||||
|
}, [orderDetail])
|
||||||
|
|
||||||
|
//去付款
|
||||||
|
const [payMentShow, setPayMentShow] = useState(false)
|
||||||
|
const toPay = () => {
|
||||||
|
setPayMentShow(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
//打开地址修改
|
||||||
|
const addressRef = useRef<any>(null)
|
||||||
|
|
||||||
|
//修改收货方式
|
||||||
|
const getShipmentMode = useCallback(() => {
|
||||||
|
getSaleOrderPreView()
|
||||||
|
}, [orderDetail])
|
||||||
|
|
||||||
|
//修改地址
|
||||||
|
const getAddress = useCallback(() => {
|
||||||
|
getSaleOrderPreView()
|
||||||
|
}, [orderDetail])
|
||||||
|
|
||||||
|
//获取底部按钮点击, 获取按钮状态
|
||||||
|
const orderStateClick = useCallback((val) => {
|
||||||
|
if(val == 1 || val == 6) {
|
||||||
|
//取消订单
|
||||||
|
getSaleOrderPreView()
|
||||||
|
}else if(val == 2) {
|
||||||
|
//待付款
|
||||||
|
toPay()
|
||||||
|
}
|
||||||
|
}, [orderDetail])
|
||||||
|
|
||||||
|
//页面下拉刷新
|
||||||
|
usePullDownRefresh(() => {
|
||||||
|
getSaleOrderPreView()
|
||||||
|
})
|
||||||
|
|
||||||
|
//支付成功
|
||||||
|
const onPaySuccess = useCallback(() => {
|
||||||
|
getSaleOrderPreView()
|
||||||
|
closePayShow()
|
||||||
|
}, [orderDetail])
|
||||||
|
|
||||||
|
//关闭支付弹窗
|
||||||
|
const closePayShow = useCallback(() => {
|
||||||
|
setPayMentShow(() => false)
|
||||||
|
}, [orderDetail])
|
||||||
|
|
||||||
|
//按钮所需数据
|
||||||
|
const orderInfo = useMemo(() => {
|
||||||
|
return {
|
||||||
|
status: orderDetail?.status, //订单状态
|
||||||
|
orderId: orderDetail?.id,
|
||||||
|
settle_mode: orderDetail?.settle_mode,
|
||||||
|
actual_amount: orderDetail?.actual_amount, //实付金额
|
||||||
|
wait_pay_amount: orderDetail?.wait_pay_amount, //待付金额
|
||||||
|
}
|
||||||
|
}, [orderDetail])
|
||||||
|
|
||||||
|
//订单状态枚举
|
||||||
|
const {SaleOrderStatusCancel} = ORDER_STATUS
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View className={styles.order_main}>
|
||||||
|
{/* <View className={styles.weight_memo_con}>
|
||||||
|
<WeightMemo/>
|
||||||
|
</View> */}
|
||||||
|
<OrderState list={orderDetail?.logistics_details} payment_method={orderDetail?.payment_method}/>
|
||||||
|
<View >
|
||||||
|
<AddressInfoDetail orderId={orderDetail?.id} onSelect={getAddress} onChangeShipmentMode={getShipmentMode} ref={addressRef} defaultValue={defaultAddress} shipment_mode={orderDetail?.shipment_mode}/>
|
||||||
|
</View>
|
||||||
|
<KindList order={formatPreViewOrderMemo}/>
|
||||||
|
<View className={styles.order_info} >
|
||||||
|
<View className={styles.order_info_title}>订单信息</View>
|
||||||
|
<SearchInput showBorder={false} title='单号' height={50}>
|
||||||
|
<View className={styles.order_num}>
|
||||||
|
<Text>{orderDetail?.order_no}</Text>
|
||||||
|
<View className={styles.order_num_btn} onClick={() => clipboardData()}>复制</View>
|
||||||
|
</View>
|
||||||
|
</SearchInput>
|
||||||
|
<SearchInput showBorder={false} title='下单时间' height={50}>
|
||||||
|
<Text>{formatDateTime(orderDetail?.create_time)}</Text>
|
||||||
|
</SearchInput>
|
||||||
|
<SearchInput showBorder={false} title='付款时间' height={50}>
|
||||||
|
<Text>{formatDateTime(orderDetail?.create_time)}</Text>
|
||||||
|
</SearchInput>
|
||||||
|
</View>
|
||||||
|
<View className={styles.order_desc} onClick={() => setShowDesc(true)}>
|
||||||
|
<View className={styles.order_desc_con}>订单备注</View>
|
||||||
|
{
|
||||||
|
orderRemark&&<View className={styles.order_desc_text}>{orderDetail?.remark}</View>||
|
||||||
|
<View className={styles.order_desc_text_hint}>填写备注</View>
|
||||||
|
}
|
||||||
|
<View className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></View>
|
||||||
|
</View>
|
||||||
|
{(orderDetail?.status != SaleOrderStatusCancel.value)&&<View className={styles.submit_order}>
|
||||||
|
<OrderBtns orderInfo={orderInfo} onClick={orderStateClick}/>
|
||||||
|
</View> }
|
||||||
|
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >
|
||||||
|
<Remark onSave={(e) => getRemark(e)}/>
|
||||||
|
</Popup>
|
||||||
|
<Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderInfo={payOrderInfo} />
|
||||||
|
<View className="common_safe_area_y"></View>
|
||||||
|
</View>
|
||||||
|
)
|
||||||
|
}
|
||||||
@ -1,9 +0,0 @@
|
|||||||
import { memo } from "react";
|
|
||||||
|
|
||||||
export default memo(() => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
})
|
|
||||||
@ -81,12 +81,7 @@
|
|||||||
width: 156.5px;
|
width: 156.5px;
|
||||||
height: 156.5px;
|
height: 156.5px;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
background-color: red;
|
|
||||||
image{
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
border-radius: 20px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.item_con{
|
.item_con{
|
||||||
flex:1;
|
flex:1;
|
||||||
|
|||||||
@ -15,6 +15,7 @@ import Taro, { useRouter } from "@tarojs/taro";
|
|||||||
import UseLogin from "@/use/useLogin"
|
import UseLogin from "@/use/useLogin"
|
||||||
import { formatHashTag, formatPriceDiv } from "@/common/fotmat";
|
import { formatHashTag, formatPriceDiv } from "@/common/fotmat";
|
||||||
import { debounce, getFilterData } from "@/common/util";
|
import { debounce, getFilterData } from "@/common/util";
|
||||||
|
import LabAndImg from "@/components/LabAndImg";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -144,15 +145,15 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
|
|||||||
const {getSelfUserInfo} = UseLogin()
|
const {getSelfUserInfo} = UseLogin()
|
||||||
const {fetchData:addFetchData} = AddShoppingCartApi()
|
const {fetchData:addFetchData} = AddShoppingCartApi()
|
||||||
const addShopCart = async () => {
|
const addShopCart = async () => {
|
||||||
try {
|
// try {
|
||||||
await getSelfUserInfo()
|
// await getSelfUserInfo()
|
||||||
} catch(msg) {
|
// } catch(msg) {
|
||||||
Taro.showToast({
|
// Taro.showToast({
|
||||||
icon:'none',
|
// icon:'none',
|
||||||
title:'授权失败，请求完善授权'
|
// title:'授权失败，请求完善授权'
|
||||||
})
|
// })
|
||||||
return false
|
// return false
|
||||||
}
|
// }
|
||||||
|
|
||||||
if(selectCount.sumCount == 0) {
|
if(selectCount.sumCount == 0) {
|
||||||
Taro.showToast({
|
Taro.showToast({
|
||||||
@ -233,7 +234,7 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
|
|||||||
{list.map(item => {
|
{list.map(item => {
|
||||||
return <View className={styles.item} key={item.id}>
|
return <View className={styles.item} key={item.id}>
|
||||||
<View className={styles.item_color}>
|
<View className={styles.item_color}>
|
||||||
<Image src={item.texture_url}/>
|
<LabAndImg value={{lab:item.lab,rgb:item.rgb,texture_url:item.texture_url}}/>
|
||||||
</View>
|
</View>
|
||||||
<View className={styles.item_con}>
|
<View className={styles.item_con}>
|
||||||
<View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
|
<View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
|
||||||
@ -274,3 +275,4 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param)
|
|||||||
</View>
|
</View>
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@ -14,6 +14,7 @@ import useLogin from '@/use/useLogin';
|
|||||||
import { AnalysisShortCodeApi, BindShortCodeApi, GetShortCodeApi } from '@/api/share';
|
import { AnalysisShortCodeApi, BindShortCodeApi, GetShortCodeApi } from '@/api/share';
|
||||||
import { SHARE_SCENE } from '@/common/enum';
|
import { SHARE_SCENE } from '@/common/enum';
|
||||||
import useUserInfo from '@/use/useUserInfo';
|
import useUserInfo from '@/use/useUserInfo';
|
||||||
|
import LabAndImg from '@/components/LabAndImg';
|
||||||
|
|
||||||
type item = {title:string, img:string, url:string, id:number}
|
type item = {title:string, img:string, url:string, id:number}
|
||||||
|
|
||||||
@ -167,7 +168,7 @@ export default (props:Params) => {
|
|||||||
{productInfo?.product_color_list?.map(item => {
|
{productInfo?.product_color_list?.map(item => {
|
||||||
return <View className={styles.item} onClick={() => getColorItem(item)}>
|
return <View className={styles.item} onClick={() => getColorItem(item)}>
|
||||||
<View className={styles.item_color}>
|
<View className={styles.item_color}>
|
||||||
<Image src={formatImgUrl(item.texture_url)}></Image>
|
<LabAndImg value={{lab:item.lab,rgb:item.rgb,texture_url:item.texture_url}}/>
|
||||||
</View>
|
</View>
|
||||||
<View className={styles.item_name}>{item.code}</View>
|
<View className={styles.item_name}>{item.code}</View>
|
||||||
</View>
|
</View>
|
||||||
|
|||||||
@ -47,7 +47,6 @@
|
|||||||
width: 126px;
|
width: 126px;
|
||||||
height: 126px;
|
height: 126px;
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
background-color: red;
|
|
||||||
}
|
}
|
||||||
.order_list_item_con{
|
.order_list_item_con{
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
import { ORDER_STATUS } from "@/common/enum"
|
import { ORDER_STATUS } from "@/common/enum"
|
||||||
import { formatHashTag, formatPriceDiv } from "@/common/fotmat"
|
import { formatHashTag, formatPriceDiv } from "@/common/fotmat"
|
||||||
|
import LabAndImg from "@/components/LabAndImg"
|
||||||
import { View } from "@tarojs/components"
|
import { View } from "@tarojs/components"
|
||||||
import { memo, useCallback, useMemo } from "react"
|
import { memo, useCallback, useMemo } from "react"
|
||||||
import EstimatedAmount from "../estimatedAmount"
|
import EstimatedAmount from "../estimatedAmount"
|
||||||
@ -140,7 +141,9 @@ export default memo(({order, comfirm = false}:Param) => {
|
|||||||
<View className={styles.order_list_scroll}>
|
<View className={styles.order_list_scroll}>
|
||||||
{item?.product_colors?.map(colorItem => {
|
{item?.product_colors?.map(colorItem => {
|
||||||
return <View key={colorItem.id} className={styles.order_list_item}>
|
return <View key={colorItem.id} className={styles.order_list_item}>
|
||||||
<View className={styles.order_list_item_img}></View>
|
<View className={styles.order_list_item_img}>
|
||||||
|
<LabAndImg value={{lab:item.lab,rgb:item.rgb,texture_url:item.texture_url}}/>
|
||||||
|
</View>
|
||||||
<View className={styles.order_list_item_con}>
|
<View className={styles.order_list_item_con}>
|
||||||
<View className={styles.order_list_item_des}>
|
<View className={styles.order_list_item_des}>
|
||||||
<View className={styles.order_list_item_title}>{colorItem.code + ' ' + colorItem.name}</View>
|
<View className={styles.order_list_item_title}>{colorItem.code + ' ' + colorItem.name}</View>
|
||||||
|
|||||||
@ -24,7 +24,7 @@ export default memo(({style, number = 0}:Param) => {
|
|||||||
<>
|
<>
|
||||||
<View className={styles.order_price}>
|
<View className={styles.order_price}>
|
||||||
<View className={classnames(styles.order_price_text, styles.emphasis)}>
|
<View className={classnames(styles.order_price_text, styles.emphasis)}>
|
||||||
<Text>应付金额</Text>
|
<Text>预估金额</Text>
|
||||||
<View className={styles.iconfont_msg}>
|
<View className={styles.iconfont_msg}>
|
||||||
<Text className={classnames(styles.miconfont, 'iconfont icon-a-tuikuanshouhou')}></Text>
|
<Text className={classnames(styles.miconfont, 'iconfont icon-a-tuikuanshouhou')}></Text>
|
||||||
{/* <View className={classnames(styles.message)}>123123123121212312312312312</View> */}
|
{/* <View className={classnames(styles.message)}>123123123121212312312312312</View> */}
|
||||||
|
|||||||
@ -1,5 +1,6 @@
|
|||||||
import { goLink } from "@/common/common";
|
import { goLink } from "@/common/common";
|
||||||
import { formatHashTag, formatImgUrl, formatPriceDiv } from "@/common/fotmat";
|
import { formatHashTag, formatImgUrl, formatPriceDiv } from "@/common/fotmat";
|
||||||
|
import LabAndImg from "@/components/LabAndImg";
|
||||||
import OrderBtns from "@/components/orderBtns";
|
import OrderBtns from "@/components/orderBtns";
|
||||||
import Payment from "@/pages/order/components/payment";
|
import Payment from "@/pages/order/components/payment";
|
||||||
import { useSelector } from "@/reducers/hooks";
|
import { useSelector } from "@/reducers/hooks";
|
||||||
@ -21,6 +22,9 @@ type Param = {
|
|||||||
total_number: number,
|
total_number: number,
|
||||||
status: 0,
|
status: 0,
|
||||||
id: number,
|
id: number,
|
||||||
|
lab: any,
|
||||||
|
rgb: any,
|
||||||
|
texture_url: string,
|
||||||
payment_method: number, //支付方式
|
payment_method: number, //支付方式
|
||||||
actual_amount: number, //实付金额
|
actual_amount: number, //实付金额
|
||||||
wait_pay_amount: number //待付金额
|
wait_pay_amount: number //待付金额
|
||||||
@ -75,7 +79,7 @@ export default memo(({value, onClickBtn}: Param) => {
|
|||||||
</View>
|
</View>
|
||||||
<View className={styles.product_list}>
|
<View className={styles.product_list}>
|
||||||
<View className={styles.image}>
|
<View className={styles.image}>
|
||||||
<Image src={formatImgUrl(value?.product_list[0].product_colors[0].texture_url)}/>
|
<LabAndImg value={{lab:value.lab,rgb:value.rgb,texture_url:value.texture_url}}/>
|
||||||
<View className={styles.color_num}>{value?.product_list[0].product_colors[0].code}</View>
|
<View className={styles.color_num}>{value?.product_list[0].product_colors[0].code}</View>
|
||||||
</View>
|
</View>
|
||||||
<View className={styles.color_list}>
|
<View className={styles.color_list}>
|
||||||
|
|||||||
@ -165,7 +165,6 @@
|
|||||||
.product_img{
|
.product_img{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 224px;
|
height: 224px;
|
||||||
background: #e5ad3a;
|
|
||||||
border-radius: 20px 20px 0px 0px;
|
border-radius: 20px 20px 0px 0px;
|
||||||
position: relative;
|
position: relative;
|
||||||
image{
|
image{
|
||||||
|
|||||||
@ -17,6 +17,7 @@ import LoadingCard from "@/components/loadingCard";
|
|||||||
import useLogin from "@/use/useLogin";
|
import useLogin from "@/use/useLogin";
|
||||||
import { goLink } from "@/common/common";
|
import { goLink } from "@/common/common";
|
||||||
import SelectData, {ListProps} from "./components/selectData";
|
import SelectData, {ListProps} from "./components/selectData";
|
||||||
|
import LabAndImg from "@/components/LabAndImg";
|
||||||
|
|
||||||
export default () => {
|
export default () => {
|
||||||
const {checkLogin} = useLogin()
|
const {checkLogin} = useLogin()
|
||||||
@ -95,7 +96,6 @@ export default () => {
|
|||||||
const [blueToothColor, setBlueToothColor] = useState('')
|
const [blueToothColor, setBlueToothColor] = useState('')
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if(colorState.deviceLab) {
|
if(colorState.deviceLab) {
|
||||||
console.log('颜色：',colorState.deviceLab)
|
|
||||||
const rgb = toRgb([colorState.deviceLab.L, colorState.deviceLab.a, colorState.deviceLab.b])
|
const rgb = toRgb([colorState.deviceLab.L, colorState.deviceLab.a, colorState.deviceLab.b])
|
||||||
setBlueToothColor(`rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`)
|
setBlueToothColor(`rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`)
|
||||||
setSearchField({...searchField, l:rgb[0], a:rgb[1], b:rgb[2], size:10})
|
setSearchField({...searchField, l:rgb[0], a:rgb[1], b:rgb[2], size:10})
|
||||||
@ -103,7 +103,7 @@ export default () => {
|
|||||||
}, [colorState.deviceLab])
|
}, [colorState.deviceLab])
|
||||||
|
|
||||||
const goLinkPage = (item) => {
|
const goLinkPage = (item) => {
|
||||||
goLink('/pages/details/index',{id:item.id})
|
goLink('/pages/details/index',{id:item.product_id})
|
||||||
}
|
}
|
||||||
|
|
||||||
//获取筛选条件
|
//获取筛选条件
|
||||||
@ -186,7 +186,7 @@ export default () => {
|
|||||||
{materialList.list.map(item => {
|
{materialList.list.map(item => {
|
||||||
return <View key={item.id} className={styles.product_item} onClick={() => goLinkPage(item)}>
|
return <View key={item.id} className={styles.product_item} onClick={() => goLinkPage(item)}>
|
||||||
<View className={styles.product_img}>
|
<View className={styles.product_img}>
|
||||||
<Image mode="aspectFill" src={formatImgUrl(item.texture_url)}></Image>
|
<LabAndImg value={{lab:item.lab,rgb:item.rgb,texture_url:item.texture_url}}/>
|
||||||
<View className={styles.color_num}>{(item.product_color_code)}#</View>
|
<View className={styles.color_num}>{(item.product_color_code)}#</View>
|
||||||
</View>
|
</View>
|
||||||
<View className={styles.product_info}>
|
<View className={styles.product_info}>
|
||||||
|
|||||||
@ -148,7 +148,6 @@
|
|||||||
.product_img{
|
.product_img{
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 224px;
|
height: 224px;
|
||||||
background: #e5ad3a;
|
|
||||||
border-radius: 20px 20px 0px 0px;
|
border-radius: 20px 20px 0px 0px;
|
||||||
position: relative;
|
position: relative;
|
||||||
image{
|
image{
|
||||||
|
|||||||
@ -13,6 +13,7 @@ import Taro, { useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro";
|
|||||||
import { formatHashTag, formatImgUrl } from "@/common/fotmat";
|
import { formatHashTag, formatImgUrl } from "@/common/fotmat";
|
||||||
import { dataLoadingStatus, getFilterData } from "@/common/util";
|
import { dataLoadingStatus, getFilterData } from "@/common/util";
|
||||||
import useLogin from "@/use/useLogin";
|
import useLogin from "@/use/useLogin";
|
||||||
|
import LabAndImg from "@/components/LabAndImg";
|
||||||
|
|
||||||
export default () => {
|
export default () => {
|
||||||
const {checkLogin} = useLogin()
|
const {checkLogin} = useLogin()
|
||||||
@ -161,7 +162,7 @@ export default () => {
|
|||||||
{materialList.list.map(item => {
|
{materialList.list.map(item => {
|
||||||
return <View key={item.id} className={styles.product_item} onClick={() => goLinkPage(item)}>
|
return <View key={item.id} className={styles.product_item} onClick={() => goLinkPage(item)}>
|
||||||
<View className={styles.product_img}>
|
<View className={styles.product_img}>
|
||||||
<Image mode="aspectFill" src={formatImgUrl(item.texture_url)}></Image>
|
<LabAndImg value={{lab:item.lab,rgb:item.rgb,texture_url:item.texture_url}}/>
|
||||||
<View className={styles.color_num}>{(item.product_color_count)}色</View>
|
<View className={styles.color_num}>{(item.product_color_count)}色</View>
|
||||||
</View>
|
</View>
|
||||||
<View className={styles.product_info}>
|
<View className={styles.product_info}>
|
||||||
|
|||||||
121
src/use/useUploadImage.ts
Normal file
121
src/use/useUploadImage.ts
Normal file
@ -0,0 +1,121 @@
|
|||||||
|
import Taro from '@tarojs/taro';
|
||||||
|
import {UPLOAD_CDN_URL } from '@/common/constant'
|
||||||
|
import { GetSignApi } from '@/api/cdn'
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
export default () => {
|
||||||
|
|
||||||
|
const { fetchData: GetSign, state} = GetSignApi()
|
||||||
|
|
||||||
|
// 上传图片 获取auth，Policy
|
||||||
|
/*
|
||||||
|
scene 场景值，区分上传文件的根路径
|
||||||
|
type 类型值，区分上传业务bucket
|
||||||
|
*/
|
||||||
|
const getSecret = (scene, type) => {
|
||||||
|
return new Promise(async (resolve, reject) => {
|
||||||
|
|
||||||
|
const SAVE_PATH = `/${scene}/{filemd5}{day}{hour}{min}{sec}{.suffix}`;
|
||||||
|
|
||||||
|
let params = {
|
||||||
|
'method': 'post',
|
||||||
|
'save_key': SAVE_PATH
|
||||||
|
}
|
||||||
|
// 获取签名
|
||||||
|
let res = await GetSign(params)
|
||||||
|
if (res.success) {
|
||||||
|
resolve(res.data)
|
||||||
|
} else {
|
||||||
|
reject({
|
||||||
|
code: res.code || '9999',
|
||||||
|
msg: res.msg
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
}
|
||||||
|
const getFileType = (name) => {
|
||||||
|
if (!name) return false;
|
||||||
|
var imgType = ["gif", "jpeg", "jpg", "bmp", "png"];
|
||||||
|
var videoType = ["avi", "wmv", "mkv", "mp4", "mov", "rm", "3gp", "flv", "mpg", "rmvb", "quicktime"];
|
||||||
|
|
||||||
|
if (RegExp("\.?(" + imgType.join("|") + ")$", "i").test(name.toLowerCase())) {
|
||||||
|
return 'image';
|
||||||
|
} else if (RegExp("\.(" + videoType.join("|") + ")$", "i").test(name.toLowerCase())) {
|
||||||
|
return 'video';
|
||||||
|
} else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param {*} file 传入文件
|
||||||
|
* @param {String} secene 传入 'product'
|
||||||
|
* @param {String} type 传入 'product'
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
const uploadCDNImg = (file, secene, type) => {
|
||||||
|
let filetype = file.path
|
||||||
|
console.log('filetype::',filetype)
|
||||||
|
if (!getFileType(filetype)) {
|
||||||
|
Taro.showToast({
|
||||||
|
title: "上传文件类型错误",
|
||||||
|
icon: "none",
|
||||||
|
duration: 3800
|
||||||
|
})
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
getSecret(secene, type)
|
||||||
|
.then(result => {
|
||||||
|
let res:any = result
|
||||||
|
console.log('bucket', res.bucket);
|
||||||
|
var formdata = {
|
||||||
|
'authorization': res.authorization,
|
||||||
|
'policy': res.policy,
|
||||||
|
}
|
||||||
|
|
||||||
|
const uploadTask = Taro.uploadFile({
|
||||||
|
url: `${UPLOAD_CDN_URL}${res.bucket}`,
|
||||||
|
formData: formdata,
|
||||||
|
filePath: file.path,
|
||||||
|
name: 'file',
|
||||||
|
success: res => {
|
||||||
|
resolve(JSON.parse(`${res.data}`))
|
||||||
|
},
|
||||||
|
fail: err => {
|
||||||
|
console.log(err)
|
||||||
|
reject(err)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
uploadTask.progress(res => {
|
||||||
|
console.log('上传进度', res.progress);
|
||||||
|
if (res.progress < 100) {
|
||||||
|
Taro.showLoading({
|
||||||
|
title: '上传中...'
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
Taro.hideLoading()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
.catch(result => {
|
||||||
|
reject(result)
|
||||||
|
Taro.showToast({
|
||||||
|
title: "获取密钥失败！",
|
||||||
|
icon: "none",
|
||||||
|
duration: 3800
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
uploadCDNImg
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user