diff --git a/src/api/cdn.ts b/src/api/cdn.ts new file mode 100644 index 0000000..8289c45 --- /dev/null +++ b/src/api/cdn.ts @@ -0,0 +1,13 @@ +import { useRequest } from "@/use/useHttp" + + +/** + * 获取cdn 签名/密钥 + * @returns + */ + export const GetSignApi = () => { + return useRequest({ + url: `/v1/mall/cdn/token`, + method: "get" + }) +} diff --git a/src/common/uploadImage.js b/src/common/uploadImage.js deleted file mode 100644 index ae7724b..0000000 --- a/src/common/uploadImage.js +++ /dev/null @@ -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 \ No newline at end of file diff --git a/src/components/LabAndImg/index.module.scss b/src/components/LabAndImg/index.module.scss new file mode 100644 index 0000000..836ba5b --- /dev/null +++ b/src/components/LabAndImg/index.module.scss @@ -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; + } + +} diff --git a/src/components/LabAndImg/index.tsx b/src/components/LabAndImg/index.tsx new file mode 100644 index 0000000..842d0d9 --- /dev/null +++ b/src/components/LabAndImg/index.tsx @@ -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 ( + + {value?.texture_url&&} + {(!value?.texture_url&&rgbStyle)&&} + {(!value?.texture_url&&!rgbStyle)&&} + + ) +}) \ No newline at end of file diff --git a/src/components/moveBtn/index.tsx b/src/components/moveBtn/index.tsx index f7bac85..e30e888 100644 --- a/src/components/moveBtn/index.tsx +++ b/src/components/moveBtn/index.tsx @@ -29,7 +29,7 @@ export default ({children = null, onClick}:param) => { return ( {children} - {showMoveBtn&& dragEnd(e)}> + {showMoveBtn&& dragEnd(e)}> } diff --git a/src/components/orderBtns/index.module.scss b/src/components/orderBtns/index.module.scss index 49c2bc9..3444eb0 100644 --- a/src/components/orderBtns/index.module.scss +++ b/src/components/orderBtns/index.module.scss @@ -1,6 +1,7 @@ .btns_list{ display: flex; justify-content: flex-end; + width: 100%; // margin-top: 30px; .scroll{ white-space: nowrap; @@ -9,18 +10,18 @@ .list_scroll{ white-space: nowrap; width: 100%; - display: flex; - justify-content: flex-end; + text-align: right; } .btns_item{ - padding: 0 10px; - height: 60px; + padding: 0 15px; + width: 100px; border: 2px solid #dddddd; border-radius: 38px; text-align: center; line-height: 60px; font-size: $font_size; color: $color_font_three; + display:inline-block; &:nth-child(n+2) { margin-left: 32px; } diff --git a/src/components/orderBtns/index.tsx b/src/components/orderBtns/index.tsx index 91949ec..8720675 100644 --- a/src/components/orderBtns/index.tsx +++ b/src/components/orderBtns/index.tsx @@ -158,7 +158,7 @@ export default memo(({orderInfo, onClick}:Param) => { {orderBtnsList.current.map((item, index) => orderBtnsShow(item)&& submitBtns(item.id, index)}>{item.label} - // submitBtns(item.id, index)}>{item.label} + // submitBtns(item.id, index)}>{item.label} )} diff --git a/src/components/product/index.tsx b/src/components/product/index.tsx index 7a14628..0e849f8 100644 --- a/src/components/product/index.tsx +++ b/src/components/product/index.tsx @@ -3,6 +3,7 @@ import Taro from "@tarojs/taro" import { goLink } from "@/common/common" import styles from './index.module.scss' import { formatHashTag, formatImgUrl } from "@/common/fotmat" +import LabAndImg from "../LabAndImg" type Params = { desStatus?: true|false, @@ -14,7 +15,7 @@ export default ({desStatus = true, productList = []}:Params) => { {productList?.map(item => { return goLink(`/pages/details/index?id=${item.id}`)}> - + {item.product_color_count}色 diff --git a/src/components/shopCart/index.module.scss b/src/components/shopCart/index.module.scss index 633b89e..43de2c1 100644 --- a/src/components/shopCart/index.module.scss +++ b/src/components/shopCart/index.module.scss @@ -175,7 +175,7 @@ .price_con{ flex:1; .price_real{ - font-size: $font_size; + font-size: $font_size_big; color: #fff; text{ font-size: $font_size_min; @@ -184,7 +184,6 @@ .price_forecast{ font-size: $font_size_min; color: $color_font_two; - margin-top: 10px; } } .goPay{ diff --git a/src/pages/applyAfterSales/index.tsx b/src/pages/applyAfterSales/index.tsx index dec0ace..3beefd0 100644 --- a/src/pages/applyAfterSales/index.tsx +++ b/src/pages/applyAfterSales/index.tsx @@ -7,7 +7,7 @@ import Counter from "@/components/counter"; import ReasonPopup from "./components/reasonPopup"; import OtherReason from "./components/otherReason"; import Taro from "@tarojs/taro"; -import uploadCDNImg from "@/common/uploadImage"; +import useUploadCDNImg from "@/use/useUploadImage"; type ReasonParam = 1|2|3 //1 退货原因 2 货物状况 3 退货说明 export default () => { @@ -123,7 +123,8 @@ export default () => { //图片列表 const PictureItem = memo(() => { - + const {uploadCDNImg} = useUploadCDNImg() + //图片 const uploadImage = () => { Taro.chooseImage({ @@ -131,10 +132,8 @@ const PictureItem = memo(() => { sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success: function (res) { - // var tempFilePaths = res.tempFilePaths const file = res.tempFiles[0] - console.log('res:::',res.tempFiles[0]) - // uploadCDNImg(file, 'product', 'product') + uploadCDNImg(file, 'product', 'product') } }) } diff --git a/src/pages/cutOrder/comfirm.config.ts b/src/pages/cutOrder/comfirm.config.ts new file mode 100644 index 0000000..67ce23e --- /dev/null +++ b/src/pages/cutOrder/comfirm.config.ts @@ -0,0 +1,4 @@ +export default { + navigationBarTitleText: '确认订单', + enableShareAppMessage: true, +} diff --git a/src/pages/cutOrder/comfirm.module.scss b/src/pages/cutOrder/comfirm.module.scss new file mode 100644 index 0000000..2858dec --- /dev/null +++ b/src/pages/cutOrder/comfirm.module.scss @@ -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; + } + + } +} \ No newline at end of file diff --git a/src/pages/cutOrder/comfirm.tsx b/src/pages/cutOrder/comfirm.tsx new file mode 100644 index 0000000..e8a8a45 --- /dev/null +++ b/src/pages/cutOrder/comfirm.tsx @@ -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() + + //获取购物车传过来的id + type orderPreParam = {shopping_cart_product_color_list:{shopping_cart_product_color_id:number}[], sale_mode:number} + const param = getParam() + const idsAndSaleModel = useRef({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() //获取到的原始数据 + 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() //格式化后的数据 + 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 ( + + + getAddress(e)} defaultValue={defaultAddress}/> + + setShowDesc(true)}> + 订单备注 + { + submitOrderData?.remark&&{submitOrderData?.remark}|| + 填写备注 + } + + + + + + {`${formatPreViewOrder?.total_fabrics}种面料，${formatPreViewOrder?.total_colors}种颜色，共${formatPreViewOrder?.total_number + formatPreViewOrder?.unit}`} + + submitOrderEven()}>提交订单 + + setShowDesc(false)} > + getRemark(e)}/> + + + + ) + } diff --git a/src/pages/cutOrder/components/addressInfo/index.module.scss b/src/pages/cutOrder/components/addressInfo/index.module.scss new file mode 100644 index 0000000..4e9ea21 --- /dev/null +++ b/src/pages/cutOrder/components/addressInfo/index.module.scss @@ -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; + } +} \ No newline at end of file diff --git a/src/pages/cutOrder/components/addressInfo/index.tsx b/src/pages/cutOrder/components/addressInfo/index.tsx new file mode 100644 index 0000000..4225fea --- /dev/null +++ b/src/pages/cutOrder/components/addressInfo/index.tsx @@ -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() + 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 ( + + changeShow()}> + + {!userInfo&& + <> + 请选择收货地址及信息 + + + ||<> + + + {userInfo?.name} + {userInfo?.phone} + + {formatAddress} + + 修改 + } + + {!disabled&& setShowAddressList(false)}> + + 请选择收货地址 + getAddress(item)}/> + + } + + ) +}) \ No newline at end of file diff --git a/src/pages/cutOrder/components/addressInfoDetail/index.module.scss b/src/pages/cutOrder/components/addressInfoDetail/index.module.scss new file mode 100644 index 0000000..2d6c306 --- /dev/null +++ b/src/pages/cutOrder/components/addressInfoDetail/index.module.scss @@ -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); + } +} \ No newline at end of file diff --git a/src/pages/cutOrder/components/addressInfoDetail/index.tsx b/src/pages/cutOrder/components/addressInfoDetail/index.tsx new file mode 100644 index 0000000..bc915ed --- /dev/null +++ b/src/pages/cutOrder/components/addressInfoDetail/index.tsx @@ -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() + + //地址格式 + 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 ( + + changeShow()}> + + + + {formatAddress} + {(receivingStatus == 2)&&} + + + {userInfo?.name} + {userInfo?.phone} + + + + + onReceivingStatus(1,e)}>自提 + onReceivingStatus(2,e)}>物流 + + + + + setShowAddressList(false)}> + + 请选择收货地址 + + + + + + + ) +})) \ No newline at end of file diff --git a/src/pages/cutOrder/components/amountShow/index.module.scss b/src/pages/cutOrder/components/amountShow/index.module.scss new file mode 100644 index 0000000..647e203 --- /dev/null +++ b/src/pages/cutOrder/components/amountShow/index.module.scss @@ -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; + } + } +} \ No newline at end of file diff --git a/src/pages/cutOrder/components/amountShow/index.tsx b/src/pages/cutOrder/components/amountShow/index.tsx new file mode 100644 index 0000000..877f7df --- /dev/null +++ b/src/pages/cutOrder/components/amountShow/index.tsx @@ -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 ( + <> + ¥ + {Number(int_num).toLocaleString()} + .{decimals_num} + + ) + }, [number]) + return ( + + {priceDom()} + + ) +}) \ No newline at end of file diff --git a/src/pages/cutOrder/components/estimatedAmount/index.module.scss b/src/pages/cutOrder/components/estimatedAmount/index.module.scss new file mode 100644 index 0000000..4b4a958 --- /dev/null +++ b/src/pages/cutOrder/components/estimatedAmount/index.module.scss @@ -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; + } + } + } + +} \ No newline at end of file diff --git a/src/pages/cutOrder/components/estimatedAmount/index.tsx b/src/pages/cutOrder/components/estimatedAmount/index.tsx new file mode 100644 index 0000000..04bc49a --- /dev/null +++ b/src/pages/cutOrder/components/estimatedAmount/index.tsx @@ -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 ( + <> + + + {title} + + + {/* 123123123121212312312312312 */} + + + + + + ) +}) \ No newline at end of file diff --git a/src/pages/cutOrder/components/kindList/index.module.scss b/src/pages/cutOrder/components/kindList/index.module.scss new file mode 100644 index 0000000..2d9b040 --- /dev/null +++ b/src/pages/cutOrder/components/kindList/index.module.scss @@ -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; + } + } +} diff --git a/src/pages/cutOrder/components/kindList/index.tsx b/src/pages/cutOrder/components/kindList/index.tsx new file mode 100644 index 0000000..b2491f8 --- /dev/null +++ b/src/pages/cutOrder/components/kindList/index.tsx @@ -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 + } + //订单为取消订单状态 + if(order?.status == SaleOrderStatusCancel.value) { + return ( + <> + { + priceList.map(item => { + return <>{showPrice(item, order?.the_previous_status)&&} + }) + } + + ) + } else { + return ( + <> + { + priceList.map(item => { + return <>{showPrice(item, order?.status)&&} + }) + } + + ) + } + }, [order]) + + return ( + <> + {numText} + + { + order?.list?.map(item => { + return + + {order.sale_mode_name} + {formatHashTag(item.code, item.name)} + 共{item?.product_colors.length}种 + + + {item?.product_colors?.map(colorItem => { + return + + + + + + {colorItem.code + ' ' + colorItem.name} + ¥{standardPrice(colorItem.sale_price)} + + + ×{formatCount(colorItem)}{order.unit} + ¥{formatPriceDiv(colorItem.estimate_amount).toLocaleString()} + + + + })} + + + }) + } + + {priceConDom} + + + + ) +}) \ No newline at end of file diff --git a/src/pages/cutOrder/components/offlinePay/index.module.scss b/src/pages/cutOrder/components/offlinePay/index.module.scss new file mode 100644 index 0000000..f84e995 --- /dev/null +++ b/src/pages/cutOrder/components/offlinePay/index.module.scss @@ -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; + } +} \ No newline at end of file diff --git a/src/pages/cutOrder/components/offlinePay/index.tsx b/src/pages/cutOrder/components/offlinePay/index.tsx new file mode 100644 index 0000000..4022374 --- /dev/null +++ b/src/pages/cutOrder/components/offlinePay/index.tsx @@ -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 ( + + + + + 线下汇款 + + + 佛山市浩川盛世科技有限公司 + + + 招商银行汾江支行 + + + 62062342120001221231212 + + + 复制信息 + + + + + ) +}) \ No newline at end of file diff --git a/src/pages/cutOrder/components/orderState copy/index.module.scss b/src/pages/cutOrder/components/orderState copy/index.module.scss new file mode 100644 index 0000000..78bda44 --- /dev/null +++ b/src/pages/cutOrder/components/orderState copy/index.module.scss @@ -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; + } +} \ No newline at end of file diff --git a/src/pages/cutOrder/components/orderState copy/index.tsx b/src/pages/cutOrder/components/orderState copy/index.tsx new file mode 100644 index 0000000..58fec4d --- /dev/null +++ b/src/pages/cutOrder/components/orderState copy/index.tsx @@ -0,0 +1,14 @@ +import { View } from "@tarojs/components" +import styles from './index.module.scss' + +export default ({ + state = '', + desc = '' +}) => { + return ( + + {state} + {desc} + + ) +} \ No newline at end of file diff --git a/src/pages/cutOrder/components/orderState/index.module.scss b/src/pages/cutOrder/components/orderState/index.module.scss new file mode 100644 index 0000000..90dbcbb --- /dev/null +++ b/src/pages/cutOrder/components/orderState/index.module.scss @@ -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; + } +} \ No newline at end of file diff --git a/src/pages/cutOrder/components/orderState/index.tsx b/src/pages/cutOrder/components/orderState/index.tsx new file mode 100644 index 0000000..18ac43d --- /dev/null +++ b/src/pages/cutOrder/components/orderState/index.tsx @@ -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)&& + + {dataList.map((item, index) => + {(dataList.length > 1)&&} + {(dataList.length != (index + 1))&&} + + {item.status} + {formatDateTime(item.time)} + {/* {item.tag} */} + + {item.desc} + )} + + {(dataList.length > 2) && changeMore()}> + {showMore&&'收起详情'||'点击查看详情'} + + } + + {(payment_method == PaymentMethodCashOnDelivery.value)&&} + {(payment_method == PaymentMethodAccountPeriod.value)&&} + + } + + ) +}) \ No newline at end of file diff --git a/src/pages/cutOrder/components/payment/index.module.scss b/src/pages/cutOrder/components/payment/index.module.scss new file mode 100644 index 0000000..340b0ed --- /dev/null +++ b/src/pages/cutOrder/components/payment/index.module.scss @@ -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; + } +} \ No newline at end of file diff --git a/src/pages/cutOrder/components/payment/index.tsx b/src/pages/cutOrder/components/payment/index.tsx new file mode 100644 index 0000000..86d4306 --- /dev/null +++ b/src/pages/cutOrder/components/payment/index.tsx @@ -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() + 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 ( + {(payInfo?.advance_deposit_balance < price)&&'余额不足，' }剩余 ¥{formatPriceDiv(payInfo?.advance_deposit_balance)} + ) + }, [payInfo]) + + //账期 + const account_peyment = useMemo(() => { + const price = payInfo?.should_collect_money - payInfo?.amount_paid + return ( + {(payInfo?.account_period_credit_available_line < price)&&'额度不足, '}剩余 ¥{formatPriceDiv(payInfo?.account_period_credit_available_line)} + ) + }, [payInfo]) + + //支付方式枚举 + const {PaymentMethodPreDeposit, PaymentMethodAccountPeriod} = PAYMENT_METHOD + + return ( + + + + + 订单支付 + + + + + + + {/* 向商家发起支付 */} + + + 订单金额 + ¥{formatPriceDiv(payInfo?.should_collect_money)} + + + 已付金额 + ¥{formatPriceDiv(payInfo?.amount_paid)} + + + + + + + + + 预存款 + + {advance_payment} + + advanceSelectData(PaymentMethodPreDeposit.value)} onClose={() => advanceSelectData(null)}/> + + {(orderInfo?.payment_method != PaymentMethodAccountPeriod.value)&& + + + + {payInfo?.account_period}天账期 + + {/* 可用额度 ¥{formatPriceDiv(payInfo?.account_period_credit_available_line)} */} + {account_peyment} + + periodSelectData(PaymentMethodAccountPeriod.value)} onClose={() => periodSelectData(null)}/> + } + + + + + 线下汇款 + + + + + + + + + 扫码支付 + + + + + + + 确认交易 + + + setofflinePayShow(false)}/> + setScanPayShow(false)}/> + + + ) +}) \ No newline at end of file diff --git a/src/pages/cutOrder/components/remark/index.module.scss b/src/pages/cutOrder/components/remark/index.module.scss new file mode 100644 index 0000000..d624050 --- /dev/null +++ b/src/pages/cutOrder/components/remark/index.module.scss @@ -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; + } +} \ No newline at end of file diff --git a/src/pages/cutOrder/components/remark/index.tsx b/src/pages/cutOrder/components/remark/index.tsx new file mode 100644 index 0000000..14d981b --- /dev/null +++ b/src/pages/cutOrder/components/remark/index.tsx @@ -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 ( + + 编辑备注 + + + {descData.number}/{descData.count} + + setSave()}>保存 + + ) +} \ No newline at end of file diff --git a/src/pages/cutOrder/components/scanPay/index.module.scss b/src/pages/cutOrder/components/scanPay/index.module.scss new file mode 100644 index 0000000..dcb356d --- /dev/null +++ b/src/pages/cutOrder/components/scanPay/index.module.scss @@ -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; + } +} \ No newline at end of file diff --git a/src/pages/cutOrder/components/scanPay/index.tsx b/src/pages/cutOrder/components/scanPay/index.tsx new file mode 100644 index 0000000..d6fb06e --- /dev/null +++ b/src/pages/cutOrder/components/scanPay/index.tsx @@ -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('') + 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 ( + + + + + 扫码支付 + + + 扫码支付成功后，自动更新状态 + + + {(state.loading)&&|| + + + } + + 保存电子确认单 + + + + + ) +}) \ No newline at end of file diff --git a/src/pages/cutOrder/components/shipmentMode/index.module.scss b/src/pages/cutOrder/components/shipmentMode/index.module.scss new file mode 100644 index 0000000..5f818f9 --- /dev/null +++ b/src/pages/cutOrder/components/shipmentMode/index.module.scss @@ -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; + } + } \ No newline at end of file diff --git a/src/pages/cutOrder/components/shipmentMode/index.tsx b/src/pages/cutOrder/components/shipmentMode/index.tsx new file mode 100644 index 0000000..235591c --- /dev/null +++ b/src/pages/cutOrder/components/shipmentMode/index.tsx @@ -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 ( + + 收货方式 + {shipmentMode.current.map(item => { + return selectShipmentMode(item.value)}>{item.label} + })} + + ) +}) \ No newline at end of file diff --git a/src/pages/cutOrder/components/submitOrderBtn/index.module.scss b/src/pages/cutOrder/components/submitOrderBtn/index.module.scss new file mode 100644 index 0000000..c5ac9ed --- /dev/null +++ b/src/pages/cutOrder/components/submitOrderBtn/index.module.scss @@ -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; + } + } + } + +} \ No newline at end of file diff --git a/src/pages/cutOrder/components/submitOrderBtn/index.tsx b/src/pages/cutOrder/components/submitOrderBtn/index.tsx new file mode 100644 index 0000000..20ed202 --- /dev/null +++ b/src/pages/cutOrder/components/submitOrderBtn/index.tsx @@ -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 ( + <> + ¥ + {Number(int_num).toLocaleString()} + .{decimals_num} + + ) + }, [number]) + return ( + <> + + + 预估金额 + + + {/* 123123123121212312312312312 */} + + + + {priceDom()} + + + + + ) +}) \ No newline at end of file diff --git a/src/pages/cutOrder/components/weightMemo/index.module.scss b/src/pages/cutOrder/components/weightMemo/index.module.scss new file mode 100644 index 0000000..3c74511 --- /dev/null +++ b/src/pages/cutOrder/components/weightMemo/index.module.scss @@ -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; + } + } +} \ No newline at end of file diff --git a/src/pages/cutOrder/components/weightMemo/index.tsx b/src/pages/cutOrder/components/weightMemo/index.tsx new file mode 100644 index 0000000..7cbfd13 --- /dev/null +++ b/src/pages/cutOrder/components/weightMemo/index.tsx @@ -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 ( + + onCheck?.()}> + + + 陆盈纺织 + + + 查看原码单 + + + + onCustom?.()}> + + + 我的码单 + + + 自定义 + + + + + ) +}) \ No newline at end of file diff --git a/src/pages/cutOrder/index.config.ts b/src/pages/cutOrder/index.config.ts new file mode 100644 index 0000000..030cb10 --- /dev/null +++ b/src/pages/cutOrder/index.config.ts @@ -0,0 +1,6 @@ +export default { + navigationBarTitleText: '订单详情', + enablePullDownRefresh: true, + backgroundTextStyle: 'dark', + enableShareAppMessage: true, +} diff --git a/src/pages/cutOrder/index.module.scss b/src/pages/cutOrder/index.module.scss new file mode 100644 index 0000000..87ea5e5 --- /dev/null +++ b/src/pages/cutOrder/index.module.scss @@ -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; + } + +} \ No newline at end of file diff --git a/src/pages/cutOrder/index.tsx b/src/pages/cutOrder/index.tsx new file mode 100644 index 0000000..582f333 --- /dev/null +++ b/src/pages/cutOrder/index.tsx @@ -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(router.params.id)) + useDidShow(() => { + getSaleOrderPreView() + }) + + //获取订单详情 + const [orderDetail, setOrderDetail] = useState() //获取到的原始数据 + 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() //格式化后的数据 + 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(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 ( + + {/* + + */} + + + + + + + 订单信息 + + + {orderDetail?.order_no} + clipboardData()}>复制 + + + + {formatDateTime(orderDetail?.create_time)} + + + {formatDateTime(orderDetail?.create_time)} + + + setShowDesc(true)}> + 订单备注 + { + orderRemark&&{orderDetail?.remark}|| + 填写备注 + } + + + {(orderDetail?.status != SaleOrderStatusCancel.value)&& + + } + setShowDesc(false)} > + getRemark(e)}/> + + + + + ) + } diff --git a/src/pages/details/components/orderCount/index.module.scss b/src/pages/details/components/orderCount/index.module.scss index 8c745e2..c22118d 100644 --- a/src/pages/details/components/orderCount/index.module.scss +++ b/src/pages/details/components/orderCount/index.module.scss @@ -81,12 +81,7 @@ width: 156.5px; height: 156.5px; border-radius: 20px; - background-color: red; - image{ - width: 100%; - height: 100%; - border-radius: 20px; - } + } .item_con{ flex:1; diff --git a/src/pages/details/components/orderCount/index.tsx b/src/pages/details/components/orderCount/index.tsx index ea3340a..7b993bd 100644 --- a/src/pages/details/components/orderCount/index.tsx +++ b/src/pages/details/components/orderCount/index.tsx @@ -15,6 +15,7 @@ import Taro, { useRouter } from "@tarojs/taro"; import UseLogin from "@/use/useLogin" import { formatHashTag, formatPriceDiv } from "@/common/fotmat"; 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 {fetchData:addFetchData} = AddShoppingCartApi() const addShopCart = async () => { - try { - await getSelfUserInfo() - } catch(msg) { - Taro.showToast({ - icon:'none', - title:'授权失败，请求完善授权' - }) - return false - } + // try { + // await getSelfUserInfo() + // } catch(msg) { + // Taro.showToast({ + // icon:'none', + // title:'授权失败，请求完善授权' + // }) + // return false + // } if(selectCount.sumCount == 0) { Taro.showToast({ @@ -233,7 +234,7 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param) {list.map(item => { return - + {formatHashTag(item.code, item.name)} @@ -273,4 +274,5 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param) ) -}) \ No newline at end of file +}) + diff --git a/src/pages/details/index.tsx b/src/pages/details/index.tsx index a7e6341..34b704f 100644 --- a/src/pages/details/index.tsx +++ b/src/pages/details/index.tsx @@ -14,6 +14,7 @@ import useLogin from '@/use/useLogin'; import { AnalysisShortCodeApi, BindShortCodeApi, GetShortCodeApi } from '@/api/share'; import { SHARE_SCENE } from '@/common/enum'; import useUserInfo from '@/use/useUserInfo'; +import LabAndImg from '@/components/LabAndImg'; type item = {title:string, img:string, url:string, id:number} @@ -115,15 +116,15 @@ export default (props:Params) => { //开始下单 const placeOrder = async (e:any) => { - try { - await getPhoneNumber(e.detail.code) - } catch(msg) { - Taro.showToast({ - icon:"none", - title: msg - }) - return false - } + // try { + // await getPhoneNumber(e.detail.code) + // } catch(msg) { + // Taro.showToast({ + // icon:"none", + // title: msg + // }) + // return false + // } setShowOrderCount(true) } @@ -167,7 +168,7 @@ export default (props:Params) => { {productInfo?.product_color_list?.map(item => { return getColorItem(item)}> - + {item.code} @@ -183,11 +184,12 @@ export default (props:Params) => { 购物车 { - !userInfo.adminUserInfo?.is_authorize_phone&& - - 开始下单 - - || placeOrder(e)}>开始下单 + // !userInfo.adminUserInfo?.is_authorize_phone&& + // + // 开始下单 + // + // || placeOrder(e)}>开始下单 + placeOrder(e)}>开始下单 } diff --git a/src/pages/order/components/addressInfoDetail/index.tsx b/src/pages/order/components/addressInfoDetail/index.tsx index 305805d..bc915ed 100644 --- a/src/pages/order/components/addressInfoDetail/index.tsx +++ b/src/pages/order/components/addressInfoDetail/index.tsx @@ -75,6 +75,7 @@ export default memo(forwardRef(({onSelect, onChangeShipmentMode, defaultValue = }, 10) //修改地址 + const [addressId, setAddressId] = useState(0) const {fetchData: addressFetchData} = EditSaleOrderAddressApi() const getAddress = async (value) => { alert.loading('正在修改') @@ -83,6 +84,7 @@ export default memo(forwardRef(({onSelect, onChangeShipmentMode, defaultValue = alert.success('地址修改成功') onSelect?.(value) setShowAddressList(() => false) + setAddressId(value.id) setUserInfo(() => value) } else { alert.none(res.msg) @@ -115,7 +117,7 @@ export default memo(forwardRef(({onSelect, onChangeShipmentMode, defaultValue = 请选择收货地址 - + diff --git a/src/pages/order/components/kindList/index.module.scss b/src/pages/order/components/kindList/index.module.scss index be8f53f..2d9b040 100644 --- a/src/pages/order/components/kindList/index.module.scss +++ b/src/pages/order/components/kindList/index.module.scss @@ -47,7 +47,6 @@ width: 126px; height: 126px; border-radius: 20px; - background-color: red; } .order_list_item_con{ display: flex; diff --git a/src/pages/order/components/kindList/index.tsx b/src/pages/order/components/kindList/index.tsx index e93be35..b2491f8 100644 --- a/src/pages/order/components/kindList/index.tsx +++ b/src/pages/order/components/kindList/index.tsx @@ -1,5 +1,6 @@ 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" @@ -140,7 +141,9 @@ export default memo(({order, comfirm = false}:Param) => { {item?.product_colors?.map(colorItem => { return - + + + {colorItem.code + ' ' + colorItem.name} diff --git a/src/pages/order/components/submitOrderBtn/index.tsx b/src/pages/order/components/submitOrderBtn/index.tsx index db9b432..20ed202 100644 --- a/src/pages/order/components/submitOrderBtn/index.tsx +++ b/src/pages/order/components/submitOrderBtn/index.tsx @@ -24,7 +24,7 @@ export default memo(({style, number = 0}:Param) => { <> - 应付金额 + 预估金额 {/* 123123123121212312312312312 */} diff --git a/src/pages/order/index.module.scss b/src/pages/order/index.module.scss index a032fbe..87ea5e5 100644 --- a/src/pages/order/index.module.scss +++ b/src/pages/order/index.module.scss @@ -69,7 +69,6 @@ left: 0; justify-content: flex-end; width: 100%; - height: 175px; align-items: center; background-color: #fff; box-shadow: 6px 0px 12px 0px rgba(0,0,0,0.16); diff --git a/src/pages/orderList/components/order/index.tsx b/src/pages/orderList/components/order/index.tsx index a78b6f1..f96a49e 100644 --- a/src/pages/orderList/components/order/index.tsx +++ b/src/pages/orderList/components/order/index.tsx @@ -1,5 +1,6 @@ import { goLink } from "@/common/common"; import { formatHashTag, formatImgUrl, formatPriceDiv } from "@/common/fotmat"; +import LabAndImg from "@/components/LabAndImg"; import OrderBtns from "@/components/orderBtns"; import Payment from "@/pages/order/components/payment"; import { useSelector } from "@/reducers/hooks"; @@ -21,6 +22,9 @@ type Param = { total_number: number, status: 0, id: number, + lab: any, + rgb: any, + texture_url: string, payment_method: number, //支付方式 actual_amount: number, //实付金额 wait_pay_amount: number //待付金额 @@ -75,7 +79,7 @@ export default memo(({value, onClickBtn}: Param) => { - + {value?.product_list[0].product_colors[0].code} diff --git a/src/pages/searchList/hightSearchList.module.scss b/src/pages/searchList/hightSearchList.module.scss index c4e305b..a8f6bce 100644 --- a/src/pages/searchList/hightSearchList.module.scss +++ b/src/pages/searchList/hightSearchList.module.scss @@ -165,7 +165,6 @@ .product_img{ width: 100%; height: 224px; - background: #e5ad3a; border-radius: 20px 20px 0px 0px; position: relative; image{ diff --git a/src/pages/searchList/hightSearchList.tsx b/src/pages/searchList/hightSearchList.tsx index ffc8dcc..9496028 100644 --- a/src/pages/searchList/hightSearchList.tsx +++ b/src/pages/searchList/hightSearchList.tsx @@ -17,6 +17,7 @@ import LoadingCard from "@/components/loadingCard"; import useLogin from "@/use/useLogin"; import { goLink } from "@/common/common"; import SelectData, {ListProps} from "./components/selectData"; +import LabAndImg from "@/components/LabAndImg"; export default () => { const {checkLogin} = useLogin() @@ -95,7 +96,6 @@ export default () => { const [blueToothColor, setBlueToothColor] = useState('') useEffect(() => { if(colorState.deviceLab) { - console.log('颜色：',colorState.deviceLab) const rgb = toRgb([colorState.deviceLab.L, colorState.deviceLab.a, colorState.deviceLab.b]) setBlueToothColor(`rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`) setSearchField({...searchField, l:rgb[0], a:rgb[1], b:rgb[2], size:10}) @@ -103,7 +103,7 @@ export default () => { }, [colorState.deviceLab]) 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 => { return goLinkPage(item)}> - + {(item.product_color_code)}# diff --git a/src/pages/searchList/searchList.module.scss b/src/pages/searchList/searchList.module.scss index cb88783..0e4bb51 100644 --- a/src/pages/searchList/searchList.module.scss +++ b/src/pages/searchList/searchList.module.scss @@ -148,7 +148,6 @@ .product_img{ width: 100%; height: 224px; - background: #e5ad3a; border-radius: 20px 20px 0px 0px; position: relative; image{ diff --git a/src/pages/searchList/searchList.tsx b/src/pages/searchList/searchList.tsx index 5ae921c..53e50f4 100644 --- a/src/pages/searchList/searchList.tsx +++ b/src/pages/searchList/searchList.tsx @@ -13,6 +13,7 @@ import Taro, { useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro"; import { formatHashTag, formatImgUrl } from "@/common/fotmat"; import { dataLoadingStatus, getFilterData } from "@/common/util"; import useLogin from "@/use/useLogin"; +import LabAndImg from "@/components/LabAndImg"; export default () => { const {checkLogin} = useLogin() @@ -161,7 +162,7 @@ export default () => { {materialList.list.map(item => { return goLinkPage(item)}> - + {(item.product_color_count)}色 diff --git a/src/use/useUploadImage.ts b/src/use/useUploadImage.ts new file mode 100644 index 0000000..6e02d19 --- /dev/null +++ b/src/use/useUploadImage.ts @@ -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 + } + +}