diff --git a/package-lock.json b/package-lock.json index e148df4..fc777e3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,11 +10,12 @@ "dependencies": { "@babel/runtime": "^7.7.7", "@tarojs/components": "3.3.10", - "@tarojs/plugin-framework-react": "^3.4.11", + "@tarojs/plugin-framework-react": "^3.4.12", "@tarojs/react": "3.3.10", "@tarojs/runtime": "3.3.10", "@tarojs/taro": "3.3.10", "big.js": "^6.1.1", + "dayjs": "^1.11.3", "qs": "^6.10.3", "react": "^17.0.0", "react-dom": "^17.0.0", @@ -3314,33 +3315,33 @@ } }, "node_modules/@tarojs/plugin-framework-react": { - "version": "3.4.11", - "resolved": "https://registry.npmmirror.com/@tarojs/plugin-framework-react/-/plugin-framework-react-3.4.11.tgz", - "integrity": "sha512-eurnK1trU8JMkBlk3Mr0eKgLfiEF7dtkctnioyMgcuTfBIuI0TDXECidlhtSp5vJ2DkncuH1d+3abEgx8Nc8rw==", + "version": "3.4.12", + "resolved": "https://registry.npmmirror.com/@tarojs/plugin-framework-react/-/plugin-framework-react-3.4.12.tgz", + "integrity": "sha512-kc03rvuotgQ2q7gYM9rjy7IV1tjT4ZcbdfdVs2e7olpdXcY9d4x1OqF3vYy+FT/f6WXgf/xs7cBa8Btw3J44iQ==", "dependencies": { "@pmmmwh/react-refresh-webpack-plugin": "0.4.3", "@prefresh/webpack": "^3.2.3", - "@tarojs/runtime": "3.4.11", - "@tarojs/shared": "3.4.11", + "@tarojs/runtime": "3.4.12", + "@tarojs/shared": "3.4.12", "acorn": "^8.0.4", "acorn-walk": "^8.0.0" } }, "node_modules/@tarojs/plugin-framework-react/node_modules/@tarojs/runtime": { - "version": "3.4.11", - "resolved": "https://registry.npmmirror.com/@tarojs/runtime/-/runtime-3.4.11.tgz", - "integrity": "sha512-vcr0Uo+K0rKR8LjXaFfqx9yYReejcvJ0HV6xly8KQxhP2Y4xmZrrhpeIYaOg97xqqtgKV+ama9NSgXa/kOeoBg==", + "version": "3.4.12", + "resolved": "https://registry.npmmirror.com/@tarojs/runtime/-/runtime-3.4.12.tgz", + "integrity": "sha512-4bQIXoiMRQa0xzma4nm4MAmLpPtcZLOalmW/X8WtPjAVqENZ8o3FE2lZMHjhv62HhvyHf+XZWWk/V+VzAhjcGQ==", "dependencies": { - "@tarojs/shared": "3.4.11", + "@tarojs/shared": "3.4.12", "inversify": "5.1.1", "lodash-es": "4.17.15", "reflect-metadata": "^0.1.13" } }, "node_modules/@tarojs/plugin-framework-react/node_modules/@tarojs/shared": { - "version": "3.4.11", - "resolved": "https://registry.npmmirror.com/@tarojs/shared/-/shared-3.4.11.tgz", - "integrity": "sha512-fQ/XccyLQYBPmynIiW8lOm3xXX40uV3TnZZIPuiwGgpApurVabSRlCa5HBeoI3qnTH92tHJon86ojOduaLHVPQ==" + "version": "3.4.12", + "resolved": "https://registry.npmmirror.com/@tarojs/shared/-/shared-3.4.12.tgz", + "integrity": "sha512-ELpEOA7Uzr5rQujfSmVS+ugTO22ZP8j3vi2AfrwJKg7zit1kZcBnDUIsN6+3Es3Vnp1oXsyQobWrgn30xYt2Ug==" }, "node_modules/@tarojs/plugin-framework-react/node_modules/acorn": { "version": "8.7.1", @@ -7585,6 +7586,11 @@ "whatwg-url": "^7.0.0" } }, + "node_modules/dayjs": { + "version": "1.11.3", + "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.3.tgz", + "integrity": "sha512-xxwlswWOlGhzgQ4TKzASQkUhqERI3egRNqgV4ScR8wlANA/A9tZ7miXa44vTTKEq5l7vWoL5G57bG3zA+Kow0A==" + }, "node_modules/debug": { "version": "2.6.9", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", @@ -15250,9 +15256,9 @@ "license": "MIT" }, "node_modules/preact": { - "version": "10.7.3", - "resolved": "https://registry.npmmirror.com/preact/-/preact-10.7.3.tgz", - "integrity": "sha512-giqJXP8VbtA1tyGa3f1n9wiN7PrHtONrDyE3T+ifjr/tTkg+2N4d/6sjC9WyJKv8wM7rOYDveqy5ZoFmYlwo4w==", + "version": "10.8.2", + "resolved": "https://registry.npmmirror.com/preact/-/preact-10.8.2.tgz", + "integrity": "sha512-AKGt0BsDSiAYzVS78jZ9qRwuorY2CoSZtf1iOC6gLb/3QyZt+fLT09aYJBjRc/BEcRc4j+j3ggERMdNE43i1LQ==", "peer": true }, "node_modules/prelude-ls": { @@ -18592,7 +18598,7 @@ }, "node_modules/tarojs": { "version": "2.1.1", - "resolved": "https://registry.npmmirror.com/tarojs/-/tarojs-2.1.1.tgz", + "resolved": "https://registry.npmjs.org/tarojs/-/tarojs-2.1.1.tgz", "integrity": "sha512-5wJ2fuiA6Fk/9zr76ZPrsJAe6UXI66gHbtwOWaxjrJZetRurfxDZUUw6wkSZB/ZxAhVhWlv9PMuNc7DlB+rtsA==" }, "node_modules/terser": { @@ -23048,33 +23054,33 @@ } }, "@tarojs/plugin-framework-react": { - "version": "3.4.11", - "resolved": "https://registry.npmmirror.com/@tarojs/plugin-framework-react/-/plugin-framework-react-3.4.11.tgz", - "integrity": "sha512-eurnK1trU8JMkBlk3Mr0eKgLfiEF7dtkctnioyMgcuTfBIuI0TDXECidlhtSp5vJ2DkncuH1d+3abEgx8Nc8rw==", + "version": "3.4.12", + "resolved": "https://registry.npmmirror.com/@tarojs/plugin-framework-react/-/plugin-framework-react-3.4.12.tgz", + "integrity": "sha512-kc03rvuotgQ2q7gYM9rjy7IV1tjT4ZcbdfdVs2e7olpdXcY9d4x1OqF3vYy+FT/f6WXgf/xs7cBa8Btw3J44iQ==", "requires": { "@pmmmwh/react-refresh-webpack-plugin": "0.4.3", "@prefresh/webpack": "^3.2.3", - "@tarojs/runtime": "3.4.11", - "@tarojs/shared": "3.4.11", + "@tarojs/runtime": "3.4.12", + "@tarojs/shared": "3.4.12", "acorn": "^8.0.4", "acorn-walk": "^8.0.0" }, "dependencies": { "@tarojs/runtime": { - "version": "3.4.11", - "resolved": "https://registry.npmmirror.com/@tarojs/runtime/-/runtime-3.4.11.tgz", - "integrity": "sha512-vcr0Uo+K0rKR8LjXaFfqx9yYReejcvJ0HV6xly8KQxhP2Y4xmZrrhpeIYaOg97xqqtgKV+ama9NSgXa/kOeoBg==", + "version": "3.4.12", + "resolved": "https://registry.npmmirror.com/@tarojs/runtime/-/runtime-3.4.12.tgz", + "integrity": "sha512-4bQIXoiMRQa0xzma4nm4MAmLpPtcZLOalmW/X8WtPjAVqENZ8o3FE2lZMHjhv62HhvyHf+XZWWk/V+VzAhjcGQ==", "requires": { - "@tarojs/shared": "3.4.11", + "@tarojs/shared": "3.4.12", "inversify": "5.1.1", "lodash-es": "4.17.15", "reflect-metadata": "^0.1.13" } }, "@tarojs/shared": { - "version": "3.4.11", - "resolved": "https://registry.npmmirror.com/@tarojs/shared/-/shared-3.4.11.tgz", - "integrity": "sha512-fQ/XccyLQYBPmynIiW8lOm3xXX40uV3TnZZIPuiwGgpApurVabSRlCa5HBeoI3qnTH92tHJon86ojOduaLHVPQ==" + "version": "3.4.12", + "resolved": "https://registry.npmmirror.com/@tarojs/shared/-/shared-3.4.12.tgz", + "integrity": "sha512-ELpEOA7Uzr5rQujfSmVS+ugTO22ZP8j3vi2AfrwJKg7zit1kZcBnDUIsN6+3Es3Vnp1oXsyQobWrgn30xYt2Ug==" }, "acorn": { "version": "8.7.1", @@ -26201,6 +26207,11 @@ "whatwg-url": "^7.0.0" } }, + "dayjs": { + "version": "1.11.3", + "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.3.tgz", + "integrity": "sha512-xxwlswWOlGhzgQ4TKzASQkUhqERI3egRNqgV4ScR8wlANA/A9tZ7miXa44vTTKEq5l7vWoL5G57bG3zA+Kow0A==" + }, "debug": { "version": "2.6.9", "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz", @@ -31757,9 +31768,9 @@ "dev": true }, "preact": { - "version": "10.7.3", - "resolved": "https://registry.npmmirror.com/preact/-/preact-10.7.3.tgz", - "integrity": "sha512-giqJXP8VbtA1tyGa3f1n9wiN7PrHtONrDyE3T+ifjr/tTkg+2N4d/6sjC9WyJKv8wM7rOYDveqy5ZoFmYlwo4w==", + "version": "10.8.2", + "resolved": "https://registry.npmmirror.com/preact/-/preact-10.8.2.tgz", + "integrity": "sha512-AKGt0BsDSiAYzVS78jZ9qRwuorY2CoSZtf1iOC6gLb/3QyZt+fLT09aYJBjRc/BEcRc4j+j3ggERMdNE43i1LQ==", "peer": true }, "prelude-ls": { @@ -34188,7 +34199,7 @@ }, "tarojs": { "version": "2.1.1", - "resolved": "https://registry.npmmirror.com/tarojs/-/tarojs-2.1.1.tgz", + "resolved": "https://registry.npmjs.org/tarojs/-/tarojs-2.1.1.tgz", "integrity": "sha512-5wJ2fuiA6Fk/9zr76ZPrsJAe6UXI66gHbtwOWaxjrJZetRurfxDZUUw6wkSZB/ZxAhVhWlv9PMuNc7DlB+rtsA==" }, "terser": { diff --git a/package.json b/package.json index 69776ec..ca0a4c3 100644 --- a/package.json +++ b/package.json @@ -37,11 +37,12 @@ "dependencies": { "@babel/runtime": "^7.7.7", "@tarojs/components": "3.3.10", - "@tarojs/plugin-framework-react": "^3.4.11", + "@tarojs/plugin-framework-react": "^3.4.12", "@tarojs/react": "3.3.10", "@tarojs/runtime": "3.3.10", "@tarojs/taro": "3.3.10", "big.js": "^6.1.1", + "dayjs": "^1.11.3", "qs": "^6.10.3", "react": "^17.0.0", "react-dom": "^17.0.0", diff --git a/project.config.json b/project.config.json index 1275668..aab17ff 100644 --- a/project.config.json +++ b/project.config.json @@ -23,14 +23,14 @@ "useStaticServer": true, "showES6CompileOption": false, "checkInvalidKey": true, + "compileHotReLoad": true, "babelSetting": { "ignore": [], "disablePlugins": [], "outputPath": "" }, "disableUseStrict": false, - "useCompilerPlugins": false, - "minifyWXML": true + "useCompilerPlugins": false }, "compileType": "miniprogram", "libVersion": "2.24.5", 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/api/certification.ts b/src/api/certification.ts new file mode 100644 index 0000000..02e6d60 --- /dev/null +++ b/src/api/certification.ts @@ -0,0 +1,34 @@ +import { useRequest } from "@/use/useHttp" + +/** + * 企业认证信息获取 + * @returns + */ + export const certificationDetailApi = () => { + return useRequest({ + url: `/v1/mall/company/authentication`, + method: "get", + }) +} + +/** + * 企业认证信息提交 + * @returns + */ + export const certificationSaveApi = () => { + return useRequest({ + url: `/v1/mall/company/authentication`, + method: "put", + }) +} + +/** + * 企业认证类型枚举列表 + * @returns + */ + export const certificationTypeListApi = () => { + return useRequest({ + url: `/v1/mall/enum/companyAuthenticationType`, + method: "get", + }) +} \ No newline at end of file diff --git a/src/api/company.ts b/src/api/company.ts index 8b72c6d..799464b 100644 --- a/src/api/company.ts +++ b/src/api/company.ts @@ -21,36 +21,3 @@ import { useRequest } from "@/use/useHttp" method: "put", }) } - -/** - * 地址详情 - * @returns - */ - export const addressDetailApi = () => { - return useRequest({ - url: `/v1/mall/address`, - method: "get", - }) -} - -/** - * 地址编辑 - * @returns - */ - export const addressEditApi = () => { - return useRequest({ - url: `/v1/mall/address`, - method: "put", - }) -} - -/** - * 地址删除 - * @returns - */ - export const addressDeleteApi = () => { - return useRequest({ - url: `/v1/mall/address`, - method: "delete", - }) -} diff --git a/src/api/material.ts b/src/api/material.ts index a777a95..11b6553 100644 --- a/src/api/material.ts +++ b/src/api/material.ts @@ -55,3 +55,14 @@ export const GetLabProductApi = () => { method: "get", }) } + +/** + * 收藏面料 + * @returns +*/ +// export const GetProductDetailApi = () => { +// return useRequest({ +// url: `/v1/mall/product`, +// method: "get", +// }) +// } diff --git a/src/api/mine.ts b/src/api/mine.ts new file mode 100644 index 0000000..aa0ae5a --- /dev/null +++ b/src/api/mine.ts @@ -0,0 +1,12 @@ +import { useRequest } from "@/use/useHttp" + +/** + * 获取用户资产 + * @returns +*/ +export const userassets = () => { + return useRequest({ + url: `/v1/mall/user/assets`, + method: "get", + }) +} diff --git a/src/api/order.ts b/src/api/order.ts index f723f47..26c175c 100644 --- a/src/api/order.ts +++ b/src/api/order.ts @@ -84,9 +84,19 @@ export const SaleOrderApi = () => { /** * 作废销售单 */ - export const CancelOrderApi = () => { +export const CancelOrderApi = () => { return useRequest({ url: `/v1/mall/saleOrder/cancel`, method: "put", }) +} + +/** + * 确认收货 + */ +export const ReceiveOrderApi = () => { + return useRequest({ + url: `/v1/mall/saleOrder/receive`, + method: "put", + }) } \ No newline at end of file diff --git a/src/api/orderPay.ts b/src/api/orderPay.ts index 99ba9d9..2b49a18 100644 --- a/src/api/orderPay.ts +++ b/src/api/orderPay.ts @@ -1,7 +1,7 @@ import { useRequest } from "@/use/useHttp" /** - * 获取订单支付方式信息 + * 获取应收单订单支付方式信息 */ export const GetOrderPayApi = () => { return useRequest({ @@ -11,11 +11,31 @@ import { useRequest } from "@/use/useHttp" } /** - * 订单支付提交 + * 应收单订单支付提交 */ export const SubmitOrderPayApi = () => { return useRequest({ url: `/v1/mall/orderPayment/orderPaymentSubmission`, method: "put", }) +} + +/** + * 获取预付单支付方式信息 + */ + export const GetPrepayOrderPayApi = () => { + return useRequest({ + url: `/v1/mall/orderPayment/preCollectOrder/orderPaymentMethodInfo`, + method: "get", + }) +} + +/** + * 预付单订单支付提交 + */ + export const SubmitPrepayOrderPayApi = () => { + return useRequest({ + url: `/v1/mall/orderPayment/preCollectOrder/orderPaymentSubmission`, + method: "put", + }) } \ No newline at end of file diff --git a/src/api/salesAfterOrder.ts b/src/api/salesAfterOrder.ts new file mode 100644 index 0000000..1755ce0 --- /dev/null +++ b/src/api/salesAfterOrder.ts @@ -0,0 +1,62 @@ +import { useRequest } from "@/use/useHttp" + +/** + * 售后订单列表 + */ +export const GetSaleOrderListApi = () => { + return useRequest({ + url: `/v1/mall/returnApplyOrder/list`, + method: "get", + }) +} + +/** + * 申请售后订单 + */ + export const ReturnApplyOrderApi = () => { + return useRequest({ + url: `/v1/mall/returnApplyOrder`, + method: "post", + }) +} + +/** + * 取消退货 + */ + export const ReturnApplyOrderCancelApi = () => { + return useRequest({ + url: `/v1/mall/returnApplyOrder/cancel`, + method: "post", + }) +} + +/** + * 售后订单详情 + */ + export const SaleOrderOrderDetailApi = () => { + return useRequest({ + url: `/v1/mall/returnApplyOrder`, + method: "get", + }) +} + +/** + * 物流上传 + */ + export const ReturnApplyLogisticsApi = () => { + return useRequest({ + url: `/v1/mall/returnApplyOrder/upload`, + method: "put", + }) +} + + +/** + * 售后货物状况 + */ + export const ReturnGoodsStatusApi = () => { + return useRequest({ + url: `/v1/mall/enum/return/goodsStatus`, + method: "get", + }) +} diff --git a/src/api/shopCart.ts b/src/api/shopCart.ts index 87e0d32..291ab60 100644 --- a/src/api/shopCart.ts +++ b/src/api/shopCart.ts @@ -31,4 +31,15 @@ export const DelShoppingCartApi = () => { url: `/v1/mall/shoppingCart/productColor`, method: "delete", }) +} + +/** + * 修改购物车数量 + * @returns +*/ +export const UpdateShoppingCartApi = () => { + return useRequest({ + url: `/v1/mall/shoppingCart/productColor`, + method: "put", + }) } \ No newline at end of file diff --git a/src/api/user.ts b/src/api/user.ts index 283f55c..7d7c97f 100644 --- a/src/api/user.ts +++ b/src/api/user.ts @@ -39,3 +39,33 @@ import { useRequest } from "@/use/useHttp" method: "put", }) } + +/** + * 公司类型|企业类型 下拉列表 + */ + export const companyTypeApi = () => { + return useRequest({ + url: `/v1/mall/enum/purchaserType`, + method: "get", + }) +} + +/** + * 头像更改 + */ + export const portraitUpdateApi = () => { + return useRequest({ + url: `/v1/mall/user/avatar`, + method: "put", + }) +} + +/** + * 绑定公司 + */ + export const BindingCompanyApi = () => { + return useRequest({ + url: `/v1/mall/user/binding/company`, + method: "put", + }) +} \ No newline at end of file diff --git a/src/app.config.ts b/src/app.config.ts index 8f5d3e2..e735150 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -96,7 +96,8 @@ export default { root: "pages/order", pages: [ "index", - "comfirm" + "comfirm", + "cutOrder/index", ] }, { @@ -166,11 +167,16 @@ export default { ] }, { - root: "pages/sampleComparison", + root: "pages/applyAfterSales", pages: [ "index", ] }, - + { + root: "pages/collection", + pages: [ + "index", + ] + } ] } diff --git a/src/common/constant.js b/src/common/constant.js index b3c4852..6fca6ae 100644 --- a/src/common/constant.js +++ b/src/common/constant.js @@ -21,7 +21,6 @@ export const UPLOAD_CDN_URL = `https://v0.api.upyun.com/` // cdn export const IMG_CND_Prefix = CURRENT_ENV.includes('development')? "https://test.cdn.zzfzyc.com":"https://cdn.zzfzyc.com" - // 上传图片视频 export const CDN_UPLOAD_IMG = `${UPLOAD_CDN_URL || ''}`; diff --git a/src/common/enum.ts b/src/common/enum.ts index 00a8ec1..cdcdf7a 100644 --- a/src/common/enum.ts +++ b/src/common/enum.ts @@ -1,10 +1,12 @@ //订单状态枚举 export const ORDER_STATUS = { + SaleorderstatusWaitingPrePayment : {value:10, label:'预付款'}, // 预付款 SaleOrderStatusBooking : {value:0, label:'待接单'}, // 待接单 SaleOrderStatusArranging : {value:1, label:'配布中'}, // 配布中 SaleOrderStatusArranged : {value:2, label:'已配布'}, // 已配布 SaleOrderStatusWaitingPayment : {value:7, label:'待付款'}, // 待付款 + SaleOrderStatusTaking: {value: 11, label:'提货中'}, //提货中 SaleOrderStatusWaitingDelivery : {value:3, label:'待发货'}, // 待发货 SaleOrderStatusWaitingReceipt : {value:8, label:'待收货'}, // 待收货 SaleOrderStatusAlreadyReceipt : {value:9, label:'已收货'}, // 已收货 @@ -15,27 +17,36 @@ export const ORDER_STATUS = { //售后单状态枚举 export const AFTER_ORDER_STATUS = { - SaleOrderStatusBooking : {value:0, label:'申请中'}, - SaleOrderStatusArranging : {value:1, label:'退货中'}, - SaleOrderStatusArranged : {value:2, label:'待验布'}, - SaleOrderStatusWaitingPayment : {value:7, label:'退款中'}, - SaleOrderStatusWaitingDelivery : {value:3, label:'已退款'}, - SaleOrderStatusWaitingReceipt : {value:8, label:'已取消'}, - SaleOrderStatusAlreadyReceipt : {value:9, label:'已拒绝'}, + ReturnStageApplying : {value:0, label:'申请中'}, // 申请中 + ReturnStageWaitCheck : {value:1, label:'退货中'}, // 退货中 + ReturnStageChecked : {value:2, label:'待验布'}, // 待验布 + ReturnStageReturned : {value:3, label:'已退款'}, // 已退款 + ReturnStageCancel : {value:4, label:'已取消'}, // 已取消 + ReturnStageQualityCheckPendingRefund : {value:5, label:'待退款'}, // 待退款-质检 + ReturnStageServiceOrderPendingRefund : {value:6, label:'待退款'}, // 待退款 + ReturnStageRejected : {value:7, label:'已拒绝'}, // 已拒绝 } //支付方式 export const PAYMENT_METHOD = { PaymentMethodPreDeposit: {value:1, label:'预存款'}, PaymentMethodAccountPeriod : {value:2, label:'账期'}, - PaymentMethodofflineRemittance: {value:3, label:'线下汇款'}, - PaymentMethodScanCodeToPay: {value:4, label:'扫码支付'}, - PaymentMethodCashOnDelivery: {value:5, label:'货到付款'}, + PaymentMethodofflineRemittance: {value:0, label:'线下汇款'}, + PaymentMethodScanCodeToPay: {value:3, label:'扫码支付'}, + PaymentMethodCashOnDelivery: {value:4, label:'货到付款'}, } -export type PAYMENT_METHOD_PARAM = 1|2|3|4|5 +export type PAYMENT_METHOD_PARAM = 0|1|2|3|4 + + +//订单类型 +export const SALE_MODE = { + SaLeModeBulk: {value:0, label:'大货'}, + SaleModeLengthCut: {value:1, label:'剪版'}, + SaLeModeWeightCut: {value:2, label:'散剪'}, +} //分享场景枚举 export const SHARE_SCENE = { ShareDetail: {value:1, label:'详情分享'}, SharePage : {value:2, label:'页面分享'}, -} \ No newline at end of file +} diff --git a/src/common/fotmat.js b/src/common/fotmat.js index 2176a51..09b2d01 100644 --- a/src/common/fotmat.js +++ b/src/common/fotmat.js @@ -142,5 +142,22 @@ export const toDecimal2 = (x) => { * @returns */ export const formatImgUrl = (url, suffix="!w200") => { - return url?IMG_CND_Prefix + url + suffix:'https://cdn.zzfzyc.com/mall/no_img.png' -} \ No newline at end of file + return url?IMG_CND_Prefix + url + suffix:IMG_CND_Prefix +'/mall/no_img.png' +} + +/** + * + * @param {纹理图} imgurl + * @param {rgb} rgb + * @param {} suffix + * @returns 1 有纹理图，2 有rgb 3默认图 + */ +export const isLabImage = (imgurl, rgb, suffix="!w200") => { + if(imgurl) { + return {status:1, value: IMG_CND_Prefix+'/'+imgurl+suffix} + } else if(rgb.r != 0 || rgb.g != 0 || rgb.b != 0) { + return {status:2, value: rgb} + } else { + return {status:3, value: IMG_CND_Prefix+'/mall/no_img.png'} + } +} diff --git a/src/common/uploadImage.js b/src/common/uploadImage.js deleted file mode 100644 index 6a6cf8a..0000000 --- a/src/common/uploadImage.js +++ /dev/null @@ -1,150 +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 - }) - }) - }) -} - -const taroChooseImg = () => { - Taro.chooseImage({ - count: 1, - sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有 - sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 - success: (res) => { - console.log('res:', res) - Taro.chooseMessageFile({ - count: 1, - - }) - }, - fail: (err) => { - console.log('图片选择失败：', err) - } - }) -} - -export default uploadCDNImg \ No newline at end of file diff --git a/src/components/AddressList/index.scss b/src/components/AddressList/index.scss index 8c6198c..1224a8e 100644 --- a/src/components/AddressList/index.scss +++ b/src/components/AddressList/index.scss @@ -89,7 +89,7 @@ font-weight: 400; color: #ffffff; display: flex;align-items: center;justify-content: center; - position: absolute;bottom: 4%;left: 50%; + position: absolute;bottom: 100px;left: 50%; transform: translateX(-50%); } .address-no-data{ diff --git a/src/components/AddressList/index.tsx b/src/components/AddressList/index.tsx index b2066a0..7f71e93 100644 --- a/src/components/AddressList/index.tsx +++ b/src/components/AddressList/index.tsx @@ -93,7 +93,7 @@ const AddressList = memo((props:Params)=>{ {item.name} { item.is_default?默认: - {item.phone.replace(item.phone.substring(4,7), "****")} + {item.phone.replace(item.phone.substring(3,7), "****")} } @@ -102,7 +102,7 @@ const AddressList = memo((props:Params)=>{ {/* {item.address_detail} */} { - item.is_default&&{item.phone.replace(item.phone.substring(4,7), "****")} + item.is_default&&{item.phone.replace(item.phone.substring(3,7), "****")} } e.stopPropagation()} url={`/pages/addressAdd/index?type=edit&id=${item.id}`} hoverClass="none" className="address-edit"> diff --git a/src/components/FromListCertification/index.scss b/src/components/FromListCertification/index.scss index fc0ed5a..b2e4f71 100644 --- a/src/components/FromListCertification/index.scss +++ b/src/components/FromListCertification/index.scss @@ -9,9 +9,9 @@ font-size: 28px; font-weight: 400; color: #000000; - margin-top: 20px; - width: 150px; + width: 200px; border-right: 1px solid #F0F0F0; + display: flex;align-items: center; } .From-list-certification-label-required::before{ content: "*"; @@ -19,12 +19,12 @@ font-size: 28px; } .From-list-certification-right{ - width: 506px; + min-width: 100px; + flex: 1; font-size: 26px; font-weight: 400; } .From-list-certification-right-meet{ - width: 506px; min-height: 45px; border-radius: 20px; box-sizing: border-box; @@ -69,6 +69,8 @@ } .From-list-certification-right-placeholder{ color: #ababab; + text-overflow: ellipsis;overflow: hidden;white-space: nowrap; + width: 100%; } .From-list-certification-right-enter .icon-a-moreback{ font-size: 28px; diff --git a/src/components/FromListCertification/index.tsx b/src/components/FromListCertification/index.tsx index 3017860..333fdc6 100644 --- a/src/components/FromListCertification/index.tsx +++ b/src/components/FromListCertification/index.tsx @@ -14,12 +14,13 @@ interface ListParams{ style?: object, //整行样式 labelStyle?: object, // label样式 contentStyle?: object, - required?: boolean + required?: boolean, + showIcon?: boolean, // 是否显示右边的箭头，type=select } // 表单列表 const FromList = memo((props:ListParams)=>{ - const {type="input",value="",style={},labelStyle={},contentStyle={},required=false} = props; + const {type="input",value="",style={},labelStyle={},contentStyle={},required=false,showIcon=true} = props; return ( @@ -44,7 +45,9 @@ const FromList = memo((props:ListParams)=>{ {props.placeholder} } - + + {showIcon&&} + } diff --git a/src/components/InfiniteScrollPaging/index.tsx b/src/components/InfiniteScrollPaging/index.tsx index 8db82b0..dc20d57 100644 --- a/src/components/InfiniteScrollPaging/index.tsx +++ b/src/components/InfiniteScrollPaging/index.tsx @@ -2,7 +2,7 @@ import InfiniteScroll from "@/components/infiniteScroll" import { ReactNode, useEffect, useMemo, useRef, useState } from "react" import { dataLoadingStatus, getFilterData } from "@/common/util"; -import { isEmptyObject } from "@/common/common"; +import { alert, isEmptyObject } from "@/common/common"; interface Params{ children?: ReactNode, @@ -36,9 +36,9 @@ export default (props: Params)=>{ page: tRefreshDataRef.page, size: tRefreshDataRef.size, }); - // 返回数据 - props.change&&props.change(result); if(result.success){ + // 返回数据 + props.change&&props.change(result); if(result.data.total<=0){ setRefreshData({ ...tRefreshDataRef, @@ -59,6 +59,7 @@ export default (props: Params)=>{ }) } }else{ + alert.none(result.msg); setRefreshData({ ...tRefreshDataRef, refreshStatus: false, 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/afterOrderBtns/index copy.tsx b/src/components/afterOrderBtns/index copy.tsx new file mode 100644 index 0000000..d695e16 --- /dev/null +++ b/src/components/afterOrderBtns/index copy.tsx @@ -0,0 +1,202 @@ +import { CancelOrderApi, ReceiveOrderApi } from "@/api/order" +import { alert } from "@/common/common" +import { ORDER_STATUS, SALE_MODE } from "@/common/enum" +import { ScrollView, Text, View } from "@tarojs/components" +import Taro from "@tarojs/taro" +import { useCallback, useRef, memo, useState, useEffect, useMemo } from "react" +import styles from './index.module.scss' + +type Param = { + orderInfo: { + status: number, //订单状态 + orderId: number, //订单id + actual_amount: number, //实付金额 + wait_pay_amount: number, //待付金额 + sale_mode: number //订单类型 + }|null, + onClick?: (val: number) => void //点击后触发的事件，返回订单状态 +} + +export default memo(({orderInfo, onClick}:Param) => { + //订单状态枚举 + const { + SaleOrderStatusBooking, + SaleOrderStatusArranging, + SaleOrderStatusArranged, + SaleOrderStatusWaitingDelivery, + SaleOrderStatusComplete, + SaleOrderStatusRefund, + SaleOrderStatusWaitingPayment, + SaleOrderStatusWaitingReceipt, + SaleOrderStatusAlreadyReceipt, + SaleorderstatusWaitingPrePayment + } = ORDER_STATUS + + //订单类型 + const { + SaLeModeBulk, + SaleModeLengthCut, + SaLeModeWeightCut, + } = SALE_MODE + + //订单按钮按订单状态归类, value是该订单状态，可能该按钮会出现 + const orderBtnsList = useRef([ + { + id: 1, + value: [SaleOrderStatusBooking.value, + SaleOrderStatusArranging.value, + SaleOrderStatusArranged.value, + SaleOrderStatusWaitingPayment.value, + SaleOrderStatusWaitingDelivery.value], //取消订单按钮对应： 待接单，配布中，已配布, 待付款， 待发货 + label: '取消订单' + }, + { + id: 2, + value: [SaleorderstatusWaitingPrePayment.value, SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value], //去付款按钮对应：待付款， 待发货, 待收货, 已收货, 已完成 + label: '去付款' + }, + { + id: 3, + value: [SaleOrderStatusWaitingDelivery.value], //申请退款按钮对应： 待发货 + label: '申请退款' + }, + { + id: 4, + value: [SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value], //取消订单按钮对应： 待收货, 已收货, 已完成, 已退款 + label: '查看物流' + }, + { + id: 5, + value: [SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusRefund.value], //申请退货按钮对应： 待收货, 已收货, 已退款 + label: '申请退货' + }, + { + id: 6, + value: [SaleOrderStatusWaitingReceipt.value], //确认收货按钮对应： 待收货 + label: '确认收货' + }, + { + id: 7, + value: [SaleOrderStatusWaitingReceipt.value,SaleOrderStatusAlreadyReceipt.value,SaleOrderStatusComplete.value,SaleOrderStatusRefund.value], //再次购买按钮对应： 待收货，已收货，已完成, 已退款 + label: '再次购买' + }, + { + id: 8, + value: [SaleOrderStatusBooking.value], //按钮对应： 待接单 + label: '退款' + }, + ]) + + + //判断是否显示该按钮 + const orderBtnsShow = (item) => { + if(orderInfo) { + if(item.id == 1) { + //取消订单按钮 + return( orderInfo.actual_amount == 0 && item.value.includes(orderInfo.status)) //在待发货之前没有付过款 + } else if (item.id == 2) { + //去付款按钮 + return( orderInfo.wait_pay_amount != 0 && item.value.includes(orderInfo.status)) //只要没有付完款就显示 + } else if(item.id == 3 ) { + //申请退款, 只有大货才有 + return (orderInfo.sale_mode == SaLeModeBulk.value && orderInfo.actual_amount != 0 && item.value.includes(orderInfo.status)) //大货在待发货付过款 + } else if( item.id == 8) { + //退款按钮（直接退款不用申请）, 只有散剪和剪板有 + return (orderInfo.sale_mode != SaLeModeBulk.value && orderInfo.actual_amount != 0 && item.value.includes(orderInfo.status)) //散剪和剪板在待接单时付过款 + } + else { + //其他按钮 + return item.value.includes(orderInfo.status) + } + } + } + + //显示的按钮数组 + const orderBtnsShowList: {id: number, value: any, label: string}[] = useMemo(() => { + return orderBtnsList.current.filter(item => { + return orderBtnsShow(item) + }) + }, [orderInfo]) + + + + //点击按钮操作 + const submitBtns = (val, index) => { + (val == 1)&&cancelOrder(); //取消订单按钮 + (val == 2)&&onClick?.(2); //去付款按钮 + (val == 6)&&receiveOrder(); //确认收货 + + } + + //取消订单 + const {fetchData: cancelFetchData} = CancelOrderApi() + const cancelOrder = () => { + Taro.showModal({ + title: '要取消该订单吗？', + success: async function (res) { + if (res.confirm) { + let res = await cancelFetchData({id: orderInfo?.orderId}) + if(res.success) { + alert.success('取消成功') + onClick?.(1) + } else { + alert.none(res.msg) + } + } else if (res.cancel) { + console.log('用户点击取消') + } + } + }) + } + + //确认订单 + const {fetchData: receiveOrderFetchData} = ReceiveOrderApi() + const receiveOrder = async () => { + console.log('123456') + Taro.showModal({ + title: '确定收货？', + success: async function (res) { + if (res.confirm) { + let res = await receiveOrderFetchData({sale_order_id: orderInfo?.orderId}) + if(res.success){ + onClick?.(6) + alert.success('收货成功') + } else { + alert.error('收货失败') + } + } else if (res.cancel) { + console.log('用户点击取消') + } + } + }) + } + + //显示更多按钮 + const [showMore, setShowMore] = useState(false) + const styleTop = useMemo(() => { + return {top:`-${(orderBtnsShowList.length - 3)*70 + 10}rpx`, left: `-${10}rpx`} + }, [orderBtnsShowList]) + + return ( + + {(orderBtnsShowList.length > 3)&& + setShowMore(true)}>更多 + {showMore&& + + {orderBtnsShowList.map((item, index) => { + return ((index >= 3) && submitBtns(item.id, index)}>{item.label}) + })} + + setShowMore(false)}> + } + } + + + {orderBtnsShowList.map((item, index) => + (index < 3)&& submitBtns(item.id, index)}>{item.label} + )} + + + + ) +}) \ No newline at end of file diff --git a/src/components/afterOrderBtns/index.module.scss b/src/components/afterOrderBtns/index.module.scss new file mode 100644 index 0000000..252b22e --- /dev/null +++ b/src/components/afterOrderBtns/index.module.scss @@ -0,0 +1,87 @@ +.btns_list{ + width: 100%; + // margin-top: 30px; + display: flex; + align-content: center; + .more{ + font-size: 28px; + width: 143px; + display: flex; + align-items: center; + color: $color_font_two; + padding-left: 20px; + position: relative; + + .more_list{ + position: absolute; + background-color: #fff; + width: 226px; + box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.06); + border-radius: 10px; + padding: 0 20px; + box-sizing: border-box; + z-index:999; + &::before{ + z-index: 1; + position: absolute; + bottom: -7px; + left: 50px; + width: 15px; + height: 15px; + content: " "; + transform: rotate(45deg); + background: #fff; + box-sizing: border-box; + box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1); + } + .more_item{ + font-size: 28px; + height: 70px; + line-height: 70px; + text-align: center; + &:nth-last-child(n+2) { + border-bottom: 1PX solid #F0F0F0; + } + } + } + .more_bg{ + position:fixed; + width: 100vw; + height: 100vh; + top: 0; + left: 0; + } + } + .scroll{ + white-space: nowrap; + width: 100%; + } + .list_scroll{ + white-space: nowrap; + width: 100%; + text-align: right; + } + .btns_item{ + padding: 0 15px; + width: 130px; + 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; + } + &:nth-last-child(1) { + border: 2px solid $color_main; + color: $color_main; + } + + } + .end_btn{ + border: 2px solid $color_main; + color: $color_main; + } +} \ No newline at end of file diff --git a/src/components/afterOrderBtns/index.tsx b/src/components/afterOrderBtns/index.tsx new file mode 100644 index 0000000..6750838 --- /dev/null +++ b/src/components/afterOrderBtns/index.tsx @@ -0,0 +1,193 @@ +import { CancelOrderApi, ReceiveOrderApi } from "@/api/order" +import { alert } from "@/common/common" +import { AFTER_ORDER_STATUS, ORDER_STATUS, SALE_MODE } from "@/common/enum" +import {Text, View } from "@tarojs/components" +import Taro from "@tarojs/taro" +import {useRef, memo, useState, useMemo } from "react" +import classnames from "classnames"; +import styles from './index.module.scss' +import { ReturnApplyOrderCancelApi } from "@/api/salesAfterOrder" + +type Param = { + orderInfo: { + stage: number, //售后状态 + orderId: number, //订单id + sale_mode: number //订单类型 + type: number //1退货，2退款 + }, + onClick?: (val: number) => void //点击后触发的事件，返回订单状态 +} + +export default memo(({orderInfo, onClick}:Param) => { + //售后订单状态 + const { + ReturnStageApplying, + ReturnStageWaitCheck, + ReturnStageChecked, + ReturnStageReturned, + ReturnStageCancel, + ReturnStageQualityCheckPendingRefund, + ReturnStageServiceOrderPendingRefund, + ReturnStageRejected + } = AFTER_ORDER_STATUS + + //订单类型 + const { + SaLeModeBulk, + SaleModeLengthCut, + SaLeModeWeightCut, + } = SALE_MODE + + //售后按钮按售后状态归类, value是该订单状态，可能该按钮会出现 + const orderBtnsList = useRef([ + { + id: 1, + value: [ReturnStageApplying.value, ReturnStageWaitCheck.value], + label: '取消退货' + }, + { + id: 2, + value: [ReturnStageWaitCheck.value], + label: '退货物流' + }, + { + id: 3, + value: [ReturnStageChecked.value, ReturnStageQualityCheckPendingRefund.value], + label: '查看物流' + }, + { + id: 4, + value: [ReturnStageQualityCheckPendingRefund.value, ReturnStageServiceOrderPendingRefund.value, ReturnStageReturned.value], + label: '质检结果' + }, + { + id: 5, + value: [ReturnStageServiceOrderPendingRefund.value, ReturnStageReturned.value], + label: '退货码单' + }, + { + id: 6, + value: [ReturnStageApplying.value, ReturnStageServiceOrderPendingRefund.value], + label: '取消退款' + }, + { + id: 7, + value: [ReturnStageServiceOrderPendingRefund.value, ReturnStageReturned.value], + label: '退款码单' + }, + { + id: 8, + value: [], + label: '申请记录' + }, + ]) + + + //判断是否显示该按钮 + const orderBtnsShow = (item) => { + if(!orderInfo) return false + + if(item.id == 1) { + //取消退货 + return (orderInfo.type == 1)&&item.value.includes(orderInfo.stage) + } else if (item.id == 6) { + //取消退款 + return (orderInfo.type == 2)&&item.value.includes(orderInfo.stage) + } else { + return item.value.includes(orderInfo.stage) + } + + } + + //显示的按钮数组 + const orderBtnsShowList: {id: number, value: any, label: string}[] = useMemo(() => { + return orderBtnsList.current.filter(item => { + return orderBtnsShow(item) + }) + }, [orderInfo]) + + + + //点击按钮操作 + const submitBtns = (val, index) => { + if (val == 1) { + cancelOrder() + } else if (val == 6) { + receiveOrder() + } else { + onClick?.(val) + } + } + + //取消退货 + const {fetchData: returnApplyOrderCancelFetchData} = ReturnApplyOrderCancelApi() + const cancelOrder = () => { + Taro.showModal({ + title: '要取消退货吗？', + success: async function (res) { + if (res.confirm) { + let res = await returnApplyOrderCancelFetchData({id: orderInfo?.orderId}) + if(res.success) { + alert.success('取消成功') + onClick?.(1) + } else { + alert.none(res.msg) + } + } else if (res.cancel) { + console.log('用户点击取消') + } + } + }) + } + + //确认订单 + const {fetchData: receiveOrderFetchData} = ReceiveOrderApi() + const receiveOrder = async () => { + console.log('123456') + Taro.showModal({ + title: '确定收货？', + success: async function (res) { + if (res.confirm) { + let res = await receiveOrderFetchData({sale_order_id: orderInfo?.orderId}) + if(res.success){ + onClick?.(6) + alert.success('收货成功') + } else { + alert.error('收货失败') + } + } else if (res.cancel) { + console.log('用户点击取消') + } + } + }) + } + + //显示更多按钮 + const [showMore, setShowMore] = useState(false) + const styleTop = useMemo(() => { + return {top:`-${(orderBtnsShowList.length - 3)*70 + 10}rpx`, left: `-${10}rpx`} + }, [orderBtnsShowList]) + + return ( + + {(orderBtnsShowList.length > 3)&& + setShowMore(true)}>更多 + {showMore&& + + {orderBtnsShowList.map((item, index) => { + return ((index >= 3) && submitBtns(item.id, index)}>{item.label}) + })} + + setShowMore(false)}> + } + } + + + {orderBtnsShowList.map((item, index) => + (index < 3)&& submitBtns(item.id, index)}>{item.label} + )} + + + + ) +}) \ No newline at end of file diff --git a/src/components/counter/index.module.scss b/src/components/counter/index.module.scss index fe96cca..2748cef 100644 --- a/src/components/counter/index.module.scss +++ b/src/components/counter/index.module.scss @@ -4,19 +4,25 @@ align-items: center; justify-content: space-between; width: 100%; - .reduce, .plus{ - font-size: $font_size_big; + .plus{ color: $color_main; width: 46px; height: 46px; - display: flex; - align-items: center; - justify-content:center; + text-align: center; + line-height: 43px; font-size: 50px; background-color: $color_main; color: #fff; border-radius: 8px; } + .reduce { + font-size: 50px; + width: 46px; + height: 46px; + text-align: center; + line-height: 43px; + color:#007AFF; + } .input{ display: flex; align-items: flex-end; @@ -25,10 +31,13 @@ box-sizing: border-box; width: 106px; border-radius: 10px; + input{ + font-size: $font_size_medium; + text-align: right; + padding-right: 10px; + } } - input{ - font-size: $font_size_medium; - } + .unit{ font-size: $font_size_min; color: $color_font_two; diff --git a/src/components/counter/index.tsx b/src/components/counter/index.tsx index d7f632d..9ff7d87 100644 --- a/src/components/counter/index.tsx +++ b/src/components/counter/index.tsx @@ -11,12 +11,14 @@ type params = { onChange?:(val:number) => void, onBlue?:(val:number) => void, //失去焦点触发 onClickBtn?:(val:number) => void, - unit?: string + unit?: string, + disable?: true|false, //是否禁用 } -export default ({minNum = 0, maxNum = 100, step=1, digits = 0, defaultNum = 0, onChange, onBlue, onClickBtn, unit = ''}: params) => { +export default ({minNum = 0, maxNum = 10000, step=1, digits = 0, defaultNum = 0, onChange, onBlue, onClickBtn, unit = '', disable = false}: params) => { const [value, setValue] = useState({count:defaultNum}) const onPlus = () => { + if(disable) return false let {count} = value let num_res = Big(count).add(step).toNumber() num_res = num_res >= maxNum?maxNum:num_res @@ -26,9 +28,10 @@ export default ({minNum = 0, maxNum = 100, step=1, digits = 0, defaultNum = 0, o onClickBtn?.(parseFloat(num_res)) } const minus = () => { + if(disable) return false let {count} = value let num_res = Big(count).minus(step).toNumber() - num_res = num_res < minNum?0:num_res + num_res = num_res < minNum?minNum:num_res setValue({...value, count:num_res}) onChange?.(parseFloat(num_res)) onClickBtn?.(parseFloat(num_res)) @@ -102,6 +105,7 @@ export default ({minNum = 0, maxNum = 100, step=1, digits = 0, defaultNum = 0, o onInput={onInputEven} onBlur={onBluerEven} type='digit' + disabled={disable} /> {unit} diff --git a/src/components/counter/index1.module.scss b/src/components/counter/index1.module.scss new file mode 100644 index 0000000..fe96cca --- /dev/null +++ b/src/components/counter/index1.module.scss @@ -0,0 +1,37 @@ + +.main{ + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + .reduce, .plus{ + font-size: $font_size_big; + color: $color_main; + width: 46px; + height: 46px; + display: flex; + align-items: center; + justify-content:center; + font-size: 50px; + background-color: $color_main; + color: #fff; + border-radius: 8px; + } + .input{ + display: flex; + align-items: flex-end; + background-color: #fff; + padding: 5px 10px; + box-sizing: border-box; + width: 106px; + border-radius: 10px; + } + input{ + font-size: $font_size_medium; + } + .unit{ + font-size: $font_size_min; + color: $color_font_two; + } + +} \ No newline at end of file diff --git a/src/components/counter/index1.tsx b/src/components/counter/index1.tsx new file mode 100644 index 0000000..d7f632d --- /dev/null +++ b/src/components/counter/index1.tsx @@ -0,0 +1,111 @@ +import { Input, View } from "@tarojs/components" +import { useEffect, useMemo, useRef, useState } from "react" +import Big from 'big.js' +import styles from "./index.module.scss" +type params = { + minNum?: number, //最小值 + maxNum?: number, //最大值 + step?: number, //步长 + defaultNum?: number, //默认值 + digits?: number //多少位小数 + onChange?:(val:number) => void, + onBlue?:(val:number) => void, //失去焦点触发 + onClickBtn?:(val:number) => void, + unit?: string +} +export default ({minNum = 0, maxNum = 100, step=1, digits = 0, defaultNum = 0, onChange, onBlue, onClickBtn, unit = ''}: params) => { + const [value, setValue] = useState({count:defaultNum}) + + const onPlus = () => { + let {count} = value + let num_res = Big(count).add(step).toNumber() + num_res = num_res >= maxNum?maxNum:num_res + num_res = formatDigits(num_res) + setValue({...value, count:num_res}) + onChange?.(parseFloat(num_res)) + onClickBtn?.(parseFloat(num_res)) + } + const minus = () => { + let {count} = value + let num_res = Big(count).minus(step).toNumber() + num_res = num_res < minNum?0:num_res + setValue({...value, count:num_res}) + onChange?.(parseFloat(num_res)) + onClickBtn?.(parseFloat(num_res)) + } + + //保留小数 + const formatDigits = (num) => { + num = num + '' + if(num.includes('.')&&digits > 0) { + console.log('num::',num.includes('.')) + let res = num.split('.') + let last_num = res[1].substr(0, digits) + return res[0] + '.' + last_num + } + return parseFloat(num) + } + + //检查数据 + const checkData = (val) => { + let num = parseFloat(val) + if(num > maxNum) return maxNum + if(num < minNum) return minNum + return val + } + + + const onInputEven = (e) => { + let res = e.detail.value + if(res === '') { + setValue({...value, count:minNum}) + onChange?.(minNum) + } + else if(!isNaN(Number(res))) { + let count = formatDigits(res) + count = checkData(count) + setValue({...value, count}) + onChange?.(parseFloat(count as string)) + } else { + let num = parseFloat(res) + if(!isNaN(num)) { + let count = formatDigits(num) + count = checkData(count) + setValue({...value, count}) + onChange?.(count as number) + } else { + setValue({...value, count:defaultNum}) + onChange?.(defaultNum) + } + + } + } + + const onBluerEven = () => { + let num = parseFloat(value.count) + if(!isNaN(num)) { + let count = formatDigits(num) + count = checkData(count) + setValue({...value, count}) + onBlue?.(count as number) + } else { + setValue({...value, count:defaultNum}) + onBlue?.(defaultNum) + } + } + return ( + + minus()}>- + + + {unit} + + onPlus()}>+ + + ) +} \ 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 copy.tsx b/src/components/orderBtns/index copy.tsx new file mode 100644 index 0000000..d695e16 --- /dev/null +++ b/src/components/orderBtns/index copy.tsx @@ -0,0 +1,202 @@ +import { CancelOrderApi, ReceiveOrderApi } from "@/api/order" +import { alert } from "@/common/common" +import { ORDER_STATUS, SALE_MODE } from "@/common/enum" +import { ScrollView, Text, View } from "@tarojs/components" +import Taro from "@tarojs/taro" +import { useCallback, useRef, memo, useState, useEffect, useMemo } from "react" +import styles from './index.module.scss' + +type Param = { + orderInfo: { + status: number, //订单状态 + orderId: number, //订单id + actual_amount: number, //实付金额 + wait_pay_amount: number, //待付金额 + sale_mode: number //订单类型 + }|null, + onClick?: (val: number) => void //点击后触发的事件，返回订单状态 +} + +export default memo(({orderInfo, onClick}:Param) => { + //订单状态枚举 + const { + SaleOrderStatusBooking, + SaleOrderStatusArranging, + SaleOrderStatusArranged, + SaleOrderStatusWaitingDelivery, + SaleOrderStatusComplete, + SaleOrderStatusRefund, + SaleOrderStatusWaitingPayment, + SaleOrderStatusWaitingReceipt, + SaleOrderStatusAlreadyReceipt, + SaleorderstatusWaitingPrePayment + } = ORDER_STATUS + + //订单类型 + const { + SaLeModeBulk, + SaleModeLengthCut, + SaLeModeWeightCut, + } = SALE_MODE + + //订单按钮按订单状态归类, value是该订单状态，可能该按钮会出现 + const orderBtnsList = useRef([ + { + id: 1, + value: [SaleOrderStatusBooking.value, + SaleOrderStatusArranging.value, + SaleOrderStatusArranged.value, + SaleOrderStatusWaitingPayment.value, + SaleOrderStatusWaitingDelivery.value], //取消订单按钮对应： 待接单，配布中，已配布, 待付款， 待发货 + label: '取消订单' + }, + { + id: 2, + value: [SaleorderstatusWaitingPrePayment.value, SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value], //去付款按钮对应：待付款， 待发货, 待收货, 已收货, 已完成 + label: '去付款' + }, + { + id: 3, + value: [SaleOrderStatusWaitingDelivery.value], //申请退款按钮对应： 待发货 + label: '申请退款' + }, + { + id: 4, + value: [SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value], //取消订单按钮对应： 待收货, 已收货, 已完成, 已退款 + label: '查看物流' + }, + { + id: 5, + value: [SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusRefund.value], //申请退货按钮对应： 待收货, 已收货, 已退款 + label: '申请退货' + }, + { + id: 6, + value: [SaleOrderStatusWaitingReceipt.value], //确认收货按钮对应： 待收货 + label: '确认收货' + }, + { + id: 7, + value: [SaleOrderStatusWaitingReceipt.value,SaleOrderStatusAlreadyReceipt.value,SaleOrderStatusComplete.value,SaleOrderStatusRefund.value], //再次购买按钮对应： 待收货，已收货，已完成, 已退款 + label: '再次购买' + }, + { + id: 8, + value: [SaleOrderStatusBooking.value], //按钮对应： 待接单 + label: '退款' + }, + ]) + + + //判断是否显示该按钮 + const orderBtnsShow = (item) => { + if(orderInfo) { + if(item.id == 1) { + //取消订单按钮 + return( orderInfo.actual_amount == 0 && item.value.includes(orderInfo.status)) //在待发货之前没有付过款 + } else if (item.id == 2) { + //去付款按钮 + return( orderInfo.wait_pay_amount != 0 && item.value.includes(orderInfo.status)) //只要没有付完款就显示 + } else if(item.id == 3 ) { + //申请退款, 只有大货才有 + return (orderInfo.sale_mode == SaLeModeBulk.value && orderInfo.actual_amount != 0 && item.value.includes(orderInfo.status)) //大货在待发货付过款 + } else if( item.id == 8) { + //退款按钮（直接退款不用申请）, 只有散剪和剪板有 + return (orderInfo.sale_mode != SaLeModeBulk.value && orderInfo.actual_amount != 0 && item.value.includes(orderInfo.status)) //散剪和剪板在待接单时付过款 + } + else { + //其他按钮 + return item.value.includes(orderInfo.status) + } + } + } + + //显示的按钮数组 + const orderBtnsShowList: {id: number, value: any, label: string}[] = useMemo(() => { + return orderBtnsList.current.filter(item => { + return orderBtnsShow(item) + }) + }, [orderInfo]) + + + + //点击按钮操作 + const submitBtns = (val, index) => { + (val == 1)&&cancelOrder(); //取消订单按钮 + (val == 2)&&onClick?.(2); //去付款按钮 + (val == 6)&&receiveOrder(); //确认收货 + + } + + //取消订单 + const {fetchData: cancelFetchData} = CancelOrderApi() + const cancelOrder = () => { + Taro.showModal({ + title: '要取消该订单吗？', + success: async function (res) { + if (res.confirm) { + let res = await cancelFetchData({id: orderInfo?.orderId}) + if(res.success) { + alert.success('取消成功') + onClick?.(1) + } else { + alert.none(res.msg) + } + } else if (res.cancel) { + console.log('用户点击取消') + } + } + }) + } + + //确认订单 + const {fetchData: receiveOrderFetchData} = ReceiveOrderApi() + const receiveOrder = async () => { + console.log('123456') + Taro.showModal({ + title: '确定收货？', + success: async function (res) { + if (res.confirm) { + let res = await receiveOrderFetchData({sale_order_id: orderInfo?.orderId}) + if(res.success){ + onClick?.(6) + alert.success('收货成功') + } else { + alert.error('收货失败') + } + } else if (res.cancel) { + console.log('用户点击取消') + } + } + }) + } + + //显示更多按钮 + const [showMore, setShowMore] = useState(false) + const styleTop = useMemo(() => { + return {top:`-${(orderBtnsShowList.length - 3)*70 + 10}rpx`, left: `-${10}rpx`} + }, [orderBtnsShowList]) + + return ( + + {(orderBtnsShowList.length > 3)&& + setShowMore(true)}>更多 + {showMore&& + + {orderBtnsShowList.map((item, index) => { + return ((index >= 3) && submitBtns(item.id, index)}>{item.label}) + })} + + setShowMore(false)}> + } + } + + + {orderBtnsShowList.map((item, index) => + (index < 3)&& submitBtns(item.id, index)}>{item.label} + )} + + + + ) +}) \ No newline at end of file diff --git a/src/components/orderBtns/index.module.scss b/src/components/orderBtns/index.module.scss index a8f7963..252b22e 100644 --- a/src/components/orderBtns/index.module.scss +++ b/src/components/orderBtns/index.module.scss @@ -1,19 +1,84 @@ .btns_list{ - display: flex; - justify-content: flex-end; + width: 100%; // margin-top: 30px; + display: flex; + align-content: center; + .more{ + font-size: 28px; + width: 143px; + display: flex; + align-items: center; + color: $color_font_two; + padding-left: 20px; + position: relative; + + .more_list{ + position: absolute; + background-color: #fff; + width: 226px; + box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.06); + border-radius: 10px; + padding: 0 20px; + box-sizing: border-box; + z-index:999; + &::before{ + z-index: 1; + position: absolute; + bottom: -7px; + left: 50px; + width: 15px; + height: 15px; + content: " "; + transform: rotate(45deg); + background: #fff; + box-sizing: border-box; + box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1); + } + .more_item{ + font-size: 28px; + height: 70px; + line-height: 70px; + text-align: center; + &:nth-last-child(n+2) { + border-bottom: 1PX solid #F0F0F0; + } + } + } + .more_bg{ + position:fixed; + width: 100vw; + height: 100vh; + top: 0; + left: 0; + } + } + .scroll{ + white-space: nowrap; + width: 100%; + } + .list_scroll{ + white-space: nowrap; + width: 100%; + text-align: right; + } .btns_item{ - width: 152px; - height: 72px; + padding: 0 15px; + width: 130px; border: 2px solid #dddddd; border-radius: 38px; text-align: center; - line-height: 72px; + line-height: 60px; font-size: $font_size; color: $color_font_three; + display:inline-block; &:nth-child(n+2) { margin-left: 32px; } + &:nth-last-child(1) { + border: 2px solid $color_main; + color: $color_main; + } + } .end_btn{ border: 2px solid $color_main; diff --git a/src/components/orderBtns/index.tsx b/src/components/orderBtns/index.tsx index f098520..871f2a2 100644 --- a/src/components/orderBtns/index.tsx +++ b/src/components/orderBtns/index.tsx @@ -1,10 +1,12 @@ -import { CancelOrderApi } from "@/api/order" -import { alert } from "@/common/common" -import { ORDER_STATUS } from "@/common/enum" -import { View } from "@tarojs/components" +import { CancelOrderApi, ReceiveOrderApi } from "@/api/order" +import { alert, goLink } from "@/common/common" +import { ORDER_STATUS, SALE_MODE } from "@/common/enum" +import {Text, View } from "@tarojs/components" import Taro from "@tarojs/taro" -import { useCallback, useRef, memo } from "react" +import {useRef, memo, useState, useMemo } from "react" +import classnames from "classnames"; import styles from './index.module.scss' +import { AddShoppingCartApi } from "@/api/shopCart" type Param = { orderInfo: { @@ -12,84 +14,128 @@ type Param = { orderId: number, //订单id actual_amount: number, //实付金额 wait_pay_amount: number, //待付金额 + sale_mode: number //订单类型 }|null, onClick?: (val: number) => void //点击后触发的事件，返回订单状态 } -// export const OrderBtnsemus = [{id:1, label:'取消订单'},{id:2, label:'去付款'},{id:3, label:'申请退款'},{id:4, label:'查看物流'}, {id:5, label:'申请退货'}, {id:6, label:'确认收货'}, {id:7, label:'再次购买'}] export default memo(({orderInfo, onClick}:Param) => { + //订单状态枚举 const { - SaleOrderStatusBooking, - SaleOrderStatusArranging, - SaleOrderStatusArranged, - SaleOrderStatusWaitingDelivery, - SaleOrderStatusComplete, - SaleOrderStatusCancel, - SaleOrderStatusRefund, - SaleOrderStatusWaitingPayment, - SaleOrderStatusWaitingReceipt, - SaleOrderStatusAlreadyReceipt - } = ORDER_STATUS - //订单按钮按订单状态归类 + SaleOrderStatusBooking, + SaleOrderStatusArranging, + SaleOrderStatusArranged, + SaleOrderStatusWaitingDelivery, + SaleOrderStatusComplete, + SaleOrderStatusRefund, + SaleOrderStatusWaitingPayment, + SaleOrderStatusWaitingReceipt, + SaleOrderStatusAlreadyReceipt, + SaleorderstatusWaitingPrePayment, + SaleOrderStatusTaking + } = ORDER_STATUS + + //订单类型 + const { + SaLeModeBulk, + SaleModeLengthCut, + SaLeModeWeightCut, + } = SALE_MODE + + //订单按钮按订单状态归类, value是该订单状态，可能该按钮会出现 const orderBtnsList = useRef([ + { id: 1, - value: [SaleOrderStatusBooking.value, SaleOrderStatusArranging.value, SaleOrderStatusArranged.value, SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value], //取消订单按钮对应： 待接单，配布中，已配布, 待付款， 待发货 + value: [SaleOrderStatusBooking.value, + SaleOrderStatusArranging.value, + SaleOrderStatusArranged.value, + SaleOrderStatusWaitingPayment.value, + SaleOrderStatusWaitingDelivery.value], //取消订单按钮对应： 待接单，配布中，已配布, 待付款， 待发货 label: '取消订单' }, - { - id: 2, - value: [SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value], //去付款按钮对应：待付款， 待发货, 待收货, 已收货, 已完成 - label: '去付款' - }, { id: 3, - value: [SaleOrderStatusWaitingDelivery.value], //取消订单按钮对应： 待发货 + value: [SaleOrderStatusWaitingDelivery.value, SaleOrderStatusTaking.value], //申请退款按钮对应： 待发货, 提货中 label: '申请退款' }, - { - id: 4, - value: [SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value], //取消订单按钮对应： 待收货, 已收货, 已完成, 已退款 - label: '查看物流' - }, + // { + // id: 4, + // value: [SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value], //取消订单按钮对应： 待收货, 已收货, 已完成, 已退款 + // label: '查看物流' + // }, { id: 5, - value: [SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusRefund.value], //取消订单按钮对应： 待收货, 已收货, 已退款 + value: [SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusRefund.value], //申请退货按钮对应：已收货, 已退款 label: '申请退货' }, { id: 6, - value: [SaleOrderStatusWaitingReceipt.value], //取消订单按钮对应： 待收货 + value: [SaleOrderStatusWaitingReceipt.value], //确认收货按钮对应： 待收货 label: '确认收货' }, { id: 7, - value: [SaleOrderStatusWaitingReceipt.value,SaleOrderStatusAlreadyReceipt.value,SaleOrderStatusComplete.value,SaleOrderStatusRefund.value], //取消订单按钮对应： 待收货，已收货，已完成, 已退款 + value: [SaleOrderStatusWaitingReceipt.value,SaleOrderStatusAlreadyReceipt.value,SaleOrderStatusComplete.value,SaleOrderStatusRefund.value], //再次购买按钮对应： 待收货，已收货，已完成, 已退款 label: '再次购买' - } + }, + { + id: 8, + value: [SaleOrderStatusBooking.value], //按钮对应： 待接单 + label: '退款' + }, + { + id: 2, + value: [SaleOrderStatusTaking.value, SaleorderstatusWaitingPrePayment.value, SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value], //去付款按钮对应：待付款， 待发货, 待收货, 已收货, 已完成 + label: '去付款' + }, ]) + + //判断是否显示该按钮 - const orderBtnsShow = useCallback((item) => { + const orderBtnsShow = (item) => { if(orderInfo) { if(item.id == 1) { //取消订单按钮 - return( orderInfo.actual_amount == 0 && item.value.includes(orderInfo.status)) //在代发货之前没有付过款 + return( orderInfo.actual_amount == 0 && item.value.includes(orderInfo.status)) //在待发货之前没有付过款 } else if (item.id == 2) { //去付款按钮 return( orderInfo.wait_pay_amount != 0 && item.value.includes(orderInfo.status)) //只要没有付完款就显示 - } else if(item.id == 3) { - //申请退款 - return (orderInfo.actual_amount != 0 && item.value.includes(orderInfo.status)) //在代发货之前付过款 + } else if(item.id == 3 ) { + //申请退款, 只有大货才有 + return (orderInfo.sale_mode == SaLeModeBulk.value && orderInfo.actual_amount != 0 && item.value.includes(orderInfo.status)) //大货在待发货付过款 + } else if( item.id == 8) { + //退款按钮（直接退款不用申请）, 只有散剪和剪板有 + return (orderInfo.sale_mode != SaLeModeBulk.value && orderInfo.actual_amount != 0 && item.value.includes(orderInfo.status)) //散剪和剪板在待接单时付过款 + } else if (item.id == 7) { + return true //再次购买按钮一直存在 } else { + //其他按钮 return item.value.includes(orderInfo.status) } } - },[orderInfo]) + } + + //显示的按钮数组 + const orderBtnsShowList: {id: number, value: any, label: string}[] = useMemo(() => { + return orderBtnsList.current.filter(item => { + return orderBtnsShow(item) + }) + }, [orderInfo]) + + //点击按钮操作 - const submitBtns = (val) => { - (val == 1)&&cancelOrder(); //取消订单按钮 - (val == 2)&&onClick?.(val); //去付款按钮 + const submitBtns = (val, index) => { + if (val == 1) { + cancelOrder() + } else if (val == 6) { + receiveOrder() + } else if(val == 5) { + goLink('/pages/applyAfterSales/index',{id:orderInfo?.orderId}) + } else { + onClick?.(val) + } } //取消订单 @@ -113,11 +159,55 @@ export default memo(({orderInfo, onClick}:Param) => { }) } + //确认订单 + const {fetchData: receiveOrderFetchData} = ReceiveOrderApi() + const receiveOrder = async () => { + console.log('123456') + Taro.showModal({ + title: '确定收货？', + success: async function (res) { + if (res.confirm) { + let res = await receiveOrderFetchData({sale_order_id: orderInfo?.orderId}) + if(res.success){ + onClick?.(6) + alert.success('收货成功') + } else { + alert.error('收货失败') + } + } else if (res.cancel) { + console.log('用户点击取消') + } + } + }) + } + + + //显示更多按钮 + const [showMore, setShowMore] = useState(false) + const styleTop = useMemo(() => { + return {top:`-${(orderBtnsShowList.length - 3)*70 + 10}rpx`, left: `-${10}rpx`} + }, [orderBtnsShowList]) + return ( - {orderBtnsList.current.map((item) => - orderBtnsShow(item)&& submitBtns(item.id)}>{item.label} - )} + {(orderBtnsShowList.length > 3)&& + setShowMore(true)}>更多 + {showMore&& + + {orderBtnsShowList.map((item, index) => { + return ((index >= 3) && submitBtns(item.id, index)}>{item.label}) + })} + + setShowMore(false)}> + } + } + + + {orderBtnsShowList.map((item, index) => + (index < 3)&& submitBtns(item.id, index)}>{item.label} + )} + + ) }) \ No newline at end of file diff --git a/src/components/popup/index.tsx b/src/components/popup/index.tsx index 227f12e..75030cf 100644 --- a/src/components/popup/index.tsx +++ b/src/components/popup/index.tsx @@ -62,7 +62,7 @@ export default memo(( } - {children} + {show&&children} diff --git a/src/components/product/index.module.scss b/src/components/product/index.module.scss index 6543b25..35f7693 100644 --- a/src/components/product/index.module.scss +++ b/src/components/product/index.module.scss @@ -25,7 +25,7 @@ border-radius: 10px; } .num{ - padding: 5px 10px; + padding: 5px 10px 5px 20px; font-size: $font_size_min; position: absolute; right:0; @@ -51,7 +51,7 @@ .tag_list{ display: flex; margin-top: 16px; - .tag{ + .tag, .tag_g{ padding: 3px 10px; background-color: #CDE5FF; font-size: $font_size_min; @@ -61,6 +61,10 @@ margin-left: 10px; } } + .tag_g{ + background-color: #FFE6CE; + color: #EE7500; + } } .introduce{ font-size: $font_size_medium; diff --git a/src/components/product/index.tsx b/src/components/product/index.tsx index 7a14628..c6b900d 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,14 +15,14 @@ export default ({desStatus = true, productList = []}:Params) => { {productList?.map(item => { return goLink(`/pages/details/index?id=${item.id}`)}> - + {item.product_color_count}色 {formatHashTag(item.code, '')} {item.name} {item.width} - {item.weight_density} + {item.weight_density} {item.component} {desStatus&&{item.describe}} diff --git a/src/components/search/index.tsx b/src/components/search/index.tsx index 9c2191b..294aec5 100644 --- a/src/components/search/index.tsx +++ b/src/components/search/index.tsx @@ -71,12 +71,12 @@ export default memo(forwardRef(({ {showIcon&&} - onInputEven(e)}> + onInputEven(e)}> {!!inputCon&& clearInput()} styleObj={{width: '20rpx', height:'20rpx', backgroundColor:'#fff', border:'0'}}/> } - {showBtn&& onSearch()}>{btnTitle}} + {showBtn&&{btnTitle}} ) diff --git a/src/components/shopCart/index.module.scss b/src/components/shopCart/index.module.scss index 633b89e..dcccd27 100644 --- a/src/components/shopCart/index.module.scss +++ b/src/components/shopCart/index.module.scss @@ -17,6 +17,11 @@ margin-right: 10px; } } + .count_all{ + font-size: 22px; + color: #ABABAB; + padding: 30px 20px; + } .search{ display: flex; justify-content: space-between; @@ -104,6 +109,15 @@ flex-direction: column; justify-content: space-between; align-items: flex-end; + .btn_count{ + width: 235px; + height: 64px; + background-color: #ECF5FF; + border-radius: 40px 0px 16px 0px; + padding: 0 20px; + display: flex; + align-items: center; + } .price{ font-size: $font_size; font-weight: 700; @@ -150,6 +164,7 @@ justify-content: center; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); + z-index: 999; .buy_con{ width: 702px; height: 95px; @@ -175,7 +190,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 +199,6 @@ .price_forecast{ font-size: $font_size_min; color: $color_font_two; - margin-top: 10px; } } .goPay{ diff --git a/src/components/shopCart/index.tsx b/src/components/shopCart/index.tsx index 8eb3d75..905ef9d 100644 --- a/src/components/shopCart/index.tsx +++ b/src/components/shopCart/index.tsx @@ -8,10 +8,11 @@ import styles from "./index.module.scss" import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import Taro from "@tarojs/taro"; import { alert, goLink } from "@/common/common"; -import {GetShoppingCartApi, DelShoppingCartApi} from "@/api/shopCart" +import {GetShoppingCartApi, DelShoppingCartApi, UpdateShoppingCartApi} from "@/api/shopCart" import { formatHashTag, formatImgUrl, formatPriceDiv } from "@/common/fotmat"; import { setParam } from "@/common/system"; import { debounce } from "@/common/util"; +import Counter from "../counter"; type param = { show?: true|false, @@ -19,11 +20,9 @@ type param = { } export default ({show = false, onClose}: param) => { const selectList = [ - // {value:-1, title:'不限', unit:'', eunit:''}, - {value:0, title:'大货', unit:'件', eunit:'kg'}, - {value:1,title:'剪板', unit:'米', eunit:'m'}, - {value:2,title:'散剪', unit:'米', eunit:'kg'}, - + {value:0, title:'大货', unit:'条', eunit:'kg', step:1, digits:0, minNum:1, maxNum:100000, defaultNum:1}, + {value:1,title:'剪板', unit:'米', eunit:'m', step:1, digits:2, minNum:0.5, maxNum:9.99, defaultNum:1}, + {value:2,title:'散剪', unit:'米', eunit:'kg', step:1, digits:2, minNum:5, maxNum:100000, defaultNum:10}, ] const [selectIndex, setSelectIndex] = useState(0) @@ -53,7 +52,6 @@ export default ({show = false, onClose}: param) => { const [loading, setLoading] = useState(false) const {fetchData} = GetShoppingCartApi() const getShoppingCart = async () => { - setLoading(true) const {data} = await fetchData() let color_list = data.color_list||[] initList(color_list) @@ -65,6 +63,7 @@ export default ({show = false, onClose}: param) => { const initList = (color_list) => { color_list?.map(item => { if(selectIndex == item.sale_mode) item.select = true + item.count = formatCount(item) }) } @@ -74,6 +73,7 @@ export default ({show = false, onClose}: param) => { setList([]) setSelectIndex(0) } else { + setLoading(true) getShoppingCart() } }, [show]) @@ -117,8 +117,6 @@ export default ({show = false, onClose}: param) => { if(item.select) select_count++ } }) - console.log('list_count::',list_count) - console.log('select_count::',select_count) setSelectStatus(select_count == list_count) } @@ -138,11 +136,13 @@ export default ({show = false, onClose}: param) => { //删除购物车内容 const {fetchData:delShopFetchData} = DelShoppingCartApi() const delSelect = () => { + getSelectId() + if(selectIds.current.length <= 0) return alert.none('请选择要删除的面料!') Taro.showModal({ content: '删除所选商品？', success: async function (res) { if (res.confirm) { - getSelectId() + const res = await delShopFetchData({id:selectIds.current}) if(res.success) { getShoppingCart() @@ -182,17 +182,33 @@ export default ({show = false, onClose}: param) => { //格式化数量 const formatCount = useCallback((item) => { - return item.sale_mode == 0? item.roll + '件': (item.length/100) + 'm' + console.log('item:::',item) + return item.sale_mode == 0? item.roll : (item.length/100) }, []) - //预估金额 + //格式化单位 + const formatUnit = useCallback((item) => { + return item.sale_mode == 0? '条':'米' + }, []) + + //预估金额和总条数 const estimatePrice = useMemo(() => { - let count = 0 + let estimate_amount = 0 + let product_list = new Set() //面料 + let color_count = 0 //颜色数量 + let all_count = 0 //总数量 list.map(item => { - if(item.select) count += item.estimate_amount + if(item.select) { + estimate_amount += item.estimate_amount + product_list.add(item.product_id) + color_count++ + all_count += item.sale_mode == 0?item.roll: (item.length) + } }) - return Number(formatPriceDiv(count)) + let all_count_text = selectIndex == 0?all_count + '条': (all_count/100) + '米' + return {price: Number(formatPriceDiv(estimate_amount)).toFixed(2), countText: `已选${product_list.size}种面料，${color_count}个颜色，共${all_count_text}`, color_count} },[list]) + //去结算 const orderDetail = debounce(() => { @@ -201,11 +217,25 @@ export default ({show = false, onClose}: param) => { alert.error('请选择面料') } else { let ids = selectIds.current.join('-') - setParam({ids, sale_mode:selectIndex}) + setParam({ids, sale_mode:selectIndex}) //临时存储 closePopup() goLink('/pages/order/comfirm') } }, 500) + + //计数组件-当后端修改完成才修改前端显示 + const {fetchData: fetchDataUpdateShoppingCart} = UpdateShoppingCartApi() + const [UpdateShoppingCartLoading, setUpdateShoppingCartLoading] = useState(false) + const getInputValue = debounce(async (num, item) => { + let roll = item.sale_mode == 0?parseFloat(num):0 + let length = item.sale_mode != 0?(parseFloat(num)*100):0 + setUpdateShoppingCartLoading(() => true) + let res = await fetchDataUpdateShoppingCart({id: item.id, roll, length}) + setUpdateShoppingCartLoading(() => false) + if(res.success) { + getShoppingCart() + } + }, 300) return ( @@ -218,6 +248,7 @@ export default ({show = false, onClose}: param) => { 删除所选 + {estimatePrice.countText} {selectList.map((item) => { return selectProduct(item.value)} className={classnames(styles.search_item, (selectIndex==item.value)&&styles.search_item_select)}>{item.title} @@ -242,7 +273,20 @@ export default ({show = false, onClose}: param) => { ￥{formatPirce(item.sale_price)}/{selectList[selectIndex].eunit} - ×{formatCount(item)} + {/* ×{formatCount(item)}{selectList[selectIndex].unit} */} + + getInputValue(e, item)} + defaultNum={item.count} + step={selectList[selectIndex].step} + digits={selectList[selectIndex].digits} + onClickBtn={(e) => getInputValue(e, item)} + unit={formatUnit(item)} + minNum={selectList[selectIndex].minNum} + maxNum={selectList[selectIndex].maxNum} + disable={UpdateShoppingCartLoading} + /> + })} @@ -260,11 +304,11 @@ export default ({show = false, onClose}: param) => { - ￥{estimatePrice} + ￥{estimatePrice.price} 预估金额 orderDetail()}> - 去结算 + 去结算({estimatePrice.color_count}) diff --git a/src/components/sideBar/index.module.scss b/src/components/sideBar/index.module.scss index c6bdb76..7329301 100644 --- a/src/components/sideBar/index.module.scss +++ b/src/components/sideBar/index.module.scss @@ -29,8 +29,9 @@ } .sideBar_select_title_select{ - background-color: $color_bg_one; - color: $color_font_one; + background-color: #007AFF; + color: #fff; + border-radius: 0px 14px 14px 0px; } } .sideBar_con{ diff --git a/src/components/sideBar/index.tsx b/src/components/sideBar/index.tsx index 78ceec0..d601151 100644 --- a/src/components/sideBar/index.tsx +++ b/src/components/sideBar/index.tsx @@ -104,7 +104,6 @@ export default memo(({list = [], ) }) } - selfOnScrolltolower?.()} refresherTriggered={refresherTriggered} refresherEnabled={true} selfOnRefresherRefresh={() => selfOnRefresherRefresh?.()}> diff --git a/src/components/textareaEnhance/index.module.scss b/src/components/textareaEnhance/index.module.scss new file mode 100644 index 0000000..3defd51 --- /dev/null +++ b/src/components/textareaEnhance/index.module.scss @@ -0,0 +1,36 @@ +.other_desc{ + // padding: 0 20px; + box-sizing: border-box; + .title{ + font-size: $font_size; + font-weight: 700; + } + .textarea{ + position: relative; + height: 165.4px; + .descDataNum{ + position: absolute; + right: 10px; + bottom: 10px; + font-size: 22px; + color: #ABABAB; + } + } + .textarea_con, .textarea_con_pretend{ + background-color: #f3f3f3; + border: 2px solid #e6e6e6; + border-radius: 10px; + width: 100%; + font-size: 25px; + height: 165.4px; + padding: 20px 20px 30px 20px; + box-sizing: border-box; + margin-top: 20px; + } + .textarea_con_pretend{ + color: $color_font_two; + } + .textarea_con_pretend_ed{ + color: #000; + } +} \ No newline at end of file diff --git a/src/components/textareaEnhance/index.tsx b/src/components/textareaEnhance/index.tsx new file mode 100644 index 0000000..4c6eb69 --- /dev/null +++ b/src/components/textareaEnhance/index.tsx @@ -0,0 +1,43 @@ +import {Textarea, View } from "@tarojs/components"; +import { memo, useMemo, useState } from "react"; +import styles from './index.module.scss' +import classnames from "classnames"; + +//其他说明 +type Param = { + title?: string, + onChange?: (val: string) => void, + placeholder?: string +} +export default memo(({onChange, title = '', placeholder = '请输入'}:Param) => { + const [descData, setDescData] = useState({ + number: 0, + value: '', + count: 200, + show: false + }) + const getDesc = (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}) + onChange?.(res) + } + + const toggleShowRealTextarea = (show) => { + setDescData({...descData, show:show}) + } + return ( + + {title} + + {descData.show&&|| + toggleShowRealTextarea(true)}>{descData.value||placeholder} + } + {descData.number +'/'+ descData.count} + + + ) +}) diff --git a/src/components/uploadImage/index.module.scss b/src/components/uploadImage/index.module.scss new file mode 100644 index 0000000..c977074 --- /dev/null +++ b/src/components/uploadImage/index.module.scss @@ -0,0 +1,55 @@ +.image_main{ + display: flex; + align-items: center; + flex-wrap: wrap; + .uploadImg{ + width: 202px; + height: 150px; + background: #f0f0f0; + border: 2px dashed #cccccc; + border-radius: 10px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + position: relative; + margin: 0 0 20px 20px; + position: relative; + .miconfont{ + font-size: 50px; + } + .uploadText{ + font-size: 26px; + color: $color_font_three; + } + + + } + .ImgItem{ + width: 202px; + height: 150px; + background: #f0f0f0; + margin-left: 20px; + margin-bottom: 20px; + position: relative; + border-radius: 10px; + image{ + width: 100%; + height: 100%; + border-radius: 10px; + } + .miconfont_close{ + width: 43px; + height: 43px; + background-color: #ccc; + border-radius: 50%; + position: absolute; + right: -10px; + top: -10px; + text-align: center; + line-height: 43px; + color: #fff; + font-size: 30px; + } + } +} \ No newline at end of file diff --git a/src/components/uploadImage/index.tsx b/src/components/uploadImage/index.tsx new file mode 100644 index 0000000..8a144be --- /dev/null +++ b/src/components/uploadImage/index.tsx @@ -0,0 +1,59 @@ +import Taro, { FC } from "@tarojs/taro" +import { memo, useEffect, useState } from "react" +import useUploadCDNImg from "@/use/useUploadImage"; +import { Image, Text, View } from "@tarojs/components"; +import { formatImgUrl } from "@/common/fotmat"; +import classnames from "classnames"; +import styles from './index.module.scss' + +//图片列表 +type ImageParam = { + onChange?:(val: string[]) => void +} +const PictureItem:FC = memo(({onChange}) => { + const {getWxPhoto} = useUploadCDNImg() + const [imageList, setImageLise] = useState([]) + //上传图片 + const uploadImage = async () => { + let res:any = await getWxPhoto('after-sale') + if(res.code == 200) { + setImageLise([...imageList, res.url]) + } + } + //删除图片 + const delImage = (index) => { + imageList.splice(index,1) + setImageLise(() => [...imageList]) + } + //监听上传的图片变化 + useEffect(() => { + onChange?.(imageList||[]) + }, [imageList]) + + //预览图片 + const showImage = () => { + let list = imageList.map(item => { + return formatImgUrl(item) + }) + Taro.previewImage({ + current: list[0], // 当前显示 + urls: list // 需要预览的图片http链接列表 + }) + } + + return ( + + {imageList.map((item, index) => + + + delImage(index)} className={classnames(styles.miconfont_close, 'iconfont icon-qingkong')}> + )} + + + 上传照片 + + + ) +}) + +export default PictureItem \ No newline at end of file diff --git a/src/pages/addressAdd/index.tsx b/src/pages/addressAdd/index.tsx index fbc2b16..cf9ac26 100644 --- a/src/pages/addressAdd/index.tsx +++ b/src/pages/addressAdd/index.tsx @@ -55,9 +55,9 @@ export default ()=>{ const rules = { name: [{ message: "请输入正确收货人姓名", - validator: (value:any, rule:any)=>{ // 自定义验证，返回true表示匹配到了(错误) - return value.length>5; - } + // validator: (value:any, rule:any)=>{ // 自定义验证，返回true表示匹配到了(错误) + // return value.length>5; + // } }], phone: [{ message: "请输入正确的电话号码", regex: /^1[3|5|6|9|2|8|7]\d{9}$/ diff --git a/src/pages/applyAfterSales/components/kindList/index.module.scss b/src/pages/applyAfterSales/components/kindList/index.module.scss new file mode 100644 index 0000000..bc49015 --- /dev/null +++ b/src/pages/applyAfterSales/components/kindList/index.module.scss @@ -0,0 +1,64 @@ +.apply_after_sales_list{ + padding: 0 20px; + .apply_after_sales_item{ + margin-bottom: 50px; + .apply_after_sales_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; + } + } + .color_list { + .color_item{ + display: flex; + align-items: center; + margin: 30px 0; + } + .image{ + width: 70px; + height: 70px; + image{ + width: 100%; + height: 100%; + border-radius: 50%; + } + } + .name_and_number{ + padding-left: 30px; + flex:1; + text{ + &:nth-child(1) { + font-weight: 700; + font-size: $font_size; + } + &:nth-child(2) { + color: $color_font_two; + font-size: $font_size; + margin-left: 20px; + } + } + } + .btn_count{ + width: 216px; + height: 64px; + background-color: #ECF5FF; + border-radius: 40px 0px 16px 0px; + padding: 0 20px; + display: flex; + align-items: center; + } + } + } + +} diff --git a/src/pages/applyAfterSales/components/kindList/index.tsx b/src/pages/applyAfterSales/components/kindList/index.tsx new file mode 100644 index 0000000..3a26d92 --- /dev/null +++ b/src/pages/applyAfterSales/components/kindList/index.tsx @@ -0,0 +1,71 @@ +import { formatHashTag, formatImgUrl } from "@/common/fotmat"; +import Counter from "@/components/counter"; +import MCheckbox from "@/components/checkbox"; +import { Image, Text, View } from "@tarojs/components"; +import { FC, memo, useCallback } from "react"; +import styles from './index.module.scss' + +type OrderParam = { + list?: any[], + sale_mode?: number, + sale_mode_name?: string, + unit?: string, + total_colors?: number, + total_fabrics?: number, + total_number?: number, + status?: number, //订单状态 +} + +type Param = { + order: OrderParam, + onNumChange?: (val:any) => void + onSelectChange?: (val: {color_id:number, length: number, status: true|false}) => void +} + +const kindeList:FC = memo(({order, onNumChange, onSelectChange}) => { + //对应数量 + const formatCount = useCallback((item) => { + return (order?.sale_mode == 0? item.roll : Number(item.length / 100)) + order?.unit + }, [order]) + + //计步器失返回值 + const getCounterChange = useCallback((colorItem) => { + return (number) => { + onNumChange?.({number, color_id: colorItem.id}) + } + }, []) + + //checkbox选中回调 + const selectCallBack = (colorItem) => { + console.log('colorItem::',colorItem) + onSelectChange?.({color_id:colorItem.id, length:colorItem.length, status: true}) + } + + //checkbox关闭回调 + const colseCallBack = (colorItem) => { + onSelectChange?.({color_id:colorItem.id, length:colorItem.length, status: false}) + } + + return ( + + {order?.list?.map(item => + + {order.sale_mode_name} + {formatHashTag(item.code, item.name)} + + + {item.product_colors.map(colorItem => + + {colorItem.code + ' ' + colorItem.name}x {formatCount(colorItem)} + {(order.sale_mode == 0)&& + + || + selectCallBack(colorItem)} onClose={() => colseCallBack(colorItem)}/>} + )} + + )} + + ) +}) + +export default kindeList \ No newline at end of file diff --git a/src/pages/applyAfterSales/components/otherReason/index.module.scss b/src/pages/applyAfterSales/components/otherReason/index.module.scss new file mode 100644 index 0000000..e2d1b1b --- /dev/null +++ b/src/pages/applyAfterSales/components/otherReason/index.module.scss @@ -0,0 +1,36 @@ +.other_desc{ + padding: 0 20px; + box-sizing: border-box; + .title{ + font-size: $font_size; + font-weight: 700; + } + .textarea{ + position: relative; + height: 165.4px; + .descDataNum{ + position: absolute; + right: 10px; + bottom: 10px; + font-size: 22px; + color: #ABABAB; + } + } + .textarea_con, .textarea_con_pretend{ + background-color: #f3f3f3; + border: 2px solid #e6e6e6; + border-radius: 10px; + width: 100%; + font-size: 25px; + height: 165.4px; + padding: 20px 20px 30px 20px; + box-sizing: border-box; + margin-top: 20px; + } + .textarea_con_pretend{ + color: $color_font_two; + } + .textarea_con_pretend_ed{ + color: #000; + } +} \ No newline at end of file diff --git a/src/pages/applyAfterSales/components/otherReason/index.tsx b/src/pages/applyAfterSales/components/otherReason/index.tsx new file mode 100644 index 0000000..5059f75 --- /dev/null +++ b/src/pages/applyAfterSales/components/otherReason/index.tsx @@ -0,0 +1,41 @@ +import {Textarea, View } from "@tarojs/components"; +import { memo, useMemo, useState } from "react"; +import styles from './index.module.scss' +import classnames from "classnames"; + +//其他说明 +type Param = { + onChange: (val: string) => void +} +export default memo(({onChange}:Param) => { + const [descData, setDescData] = useState({ + number: 0, + value: '', + count: 200, + show: false + }) + const getDesc = (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}) + onChange?.(res) + } + + const toggleShowRealTextarea = (show) => { + setDescData({...descData, show:show}) + } + return ( + + 其他说明 + + {descData.show&&|| + toggleShowRealTextarea(true)}>{descData.value||'一般情况下选填，当退货说明=“其它问题”时，必填'} + } + {descData.number +'/'+ descData.count} + + + ) +}) diff --git a/src/pages/applyAfterSales/components/reasonPopup/index.module.scss b/src/pages/applyAfterSales/components/reasonPopup/index.module.scss new file mode 100644 index 0000000..eba26cd --- /dev/null +++ b/src/pages/applyAfterSales/components/reasonPopup/index.module.scss @@ -0,0 +1,27 @@ +.reason_return_con{ + height: 50vh; + .reason_title{ + padding: 10px 20px 0 20px; + height: 60px; + border-bottom: 1PX solid #F3F3F3; + box-sizing: border-box; + Text{ + font-size: 26px; + border-bottom: 3px solid #000; + padding: 10px; + font-weight: 400; + } + + } + .reason_scroll{ + height: calc(100% - 70px); + .reason_list{ + font-size: 26px; + padding: 30px 20px 0 20px; + color: #707070; + .reason_item{ + margin-bottom: 36px; + } + } + } +} \ No newline at end of file diff --git a/src/pages/applyAfterSales/components/reasonPopup/index.tsx b/src/pages/applyAfterSales/components/reasonPopup/index.tsx new file mode 100644 index 0000000..6b1f1ef --- /dev/null +++ b/src/pages/applyAfterSales/components/reasonPopup/index.tsx @@ -0,0 +1,27 @@ +import Popup from "@/components/popup"; +import { ScrollView, Text, View } from "@tarojs/components"; +import { memo, useMemo } from "react"; +import styles from './index.module.scss' + +//原因选择 +type ReasonInfoParam = { + show?: boolean, + onClose?: () => void, + title?: string, + list?: {id:number, name:string}[] +} +export default memo(({show = false, onClose, title = '', list= []}: ReasonInfoParam) => { + + return ( + + + {title} + + + {list.map(item => {item.name} )} + + + + + ) +}) \ No newline at end of file diff --git a/src/pages/applyAfterSales/index.config.ts b/src/pages/applyAfterSales/index.config.ts new file mode 100644 index 0000000..a7a7e32 --- /dev/null +++ b/src/pages/applyAfterSales/index.config.ts @@ -0,0 +1,4 @@ +export default { + navigationBarTitleText: '申请售后', + enableShareAppMessage: true, +} diff --git a/src/pages/applyAfterSales/index.module.scss b/src/pages/applyAfterSales/index.module.scss new file mode 100644 index 0000000..6e11a17 --- /dev/null +++ b/src/pages/applyAfterSales/index.module.scss @@ -0,0 +1,107 @@ + +.apply_after_sales_main{ + .apply_after_sales_head{ + font-size: 30px; + text-align: center; + padding: 20px 0; + font-weight: 700; + } + .kind_number{ + width: 100%; + padding: 20px; + box-sizing: border-box; + border-bottom: 1PX solid #f3f3f3; + text{ + background-color: #F6F6F6; + border-radius: 10px; + font-size: $font_size_medium; + padding: 5px 0; + text-align: center; + width: 100%; + display: block; + color: $color_font_three; + } + } + .apply_after_sales_con{ + .scroll{ + height: calc(100% - 170px); + } + .scroll_con{ + padding: 20px 0 150px 0; + } + .returnSaleInput{ + margin: 0 20px; + padding-top: 30px; + border-top: 1px solid #F6F6F6; + .returnSaleInput_item{ + display: flex; + align-items: center; + padding-bottom: 30px; + flex-wrap: wrap; + .title{ + font-size: $font_size; + font-weight: 700; + width: 119px; + } + .select{ + flex:1; + height: 60px; + border: 2px solid #e6e6e6; + border-radius: 10px; + margin-left: 20px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + font-size: 26px; + color: $color_font_two; + .miconfont{ + font-size: 30px; + } + } + .upload_image{ + flex:1; + } + } + } + + } + + + .btns_con{ + width: 100%; + position: fixed; + bottom:0; + padding: 0 20px; + box-sizing: border-box; + padding-bottom: constant(safe-area-inset-bottom); + padding-bottom: env(safe-area-inset-bottom); + .btns_two{ + display: flex; + height: 82px; + // border: 1PX solid #007aff; + font-size: $font_size_big; + border-radius: 40px; + margin-bottom: 20px; + .rest_btn{ + flex:1; + border: 1PX solid #007aff; + border-radius: 40px 0 0 40px; + text-align: center; + line-height: 82px; + color: $color_main; + background-color: #fff; + + } + .verify_btn{ + flex:1; + border-radius: 0 40px 40px 0; + background: #007aff; + text-align: center; + line-height: 82px; + color: #fff; + } + } + } +} + diff --git a/src/pages/applyAfterSales/index.tsx b/src/pages/applyAfterSales/index.tsx new file mode 100644 index 0000000..9698934 --- /dev/null +++ b/src/pages/applyAfterSales/index.tsx @@ -0,0 +1,211 @@ +import { Image, ScrollView, Text, View } from "@tarojs/components"; +import { FC, memo, useCallback, useEffect, useMemo, useRef, useState } from "react"; +import classnames from "classnames"; +import styles from './index.module.scss' +import ReasonPopup from "./components/reasonPopup"; +import OtherReason from "./components/otherReason"; +import { useDidShow, useRouter } from "@tarojs/taro"; +import { GetSaleOrderDetailApi } from "@/api/order"; +import KindList from "./components/kindList" +import { ReturnApplyOrderApi, ReturnGoodsStatusApi } from "@/api/salesAfterOrder"; +import { alert, goLink } from "@/common/common"; +import UploadImage from "@/components/uploadImage" +import TextareaEnhance from "@/components/textareaEnhance"; + +type ReasonParam = 1|2|3 //1 退货原因 2 货物状况 3 退货说明 +export default () => { + + useDidShow(() => { + getSaleOrderPreView() + }) + + const router = useRouter() + const orderId = useRef(Number(router.params.id)) + + //需要提交的数据 + const [submitData, setSubmitData] = useState({ + fabric_piece_accessory_url: [], + goods_status: 0, + reason_describe: '', + return_explain: 0, + return_reason: 1, + roll: 0, + roll_list: [], + sale_order_id: orderId.current + }) + + //获取订单数据 + const [orderDetail, setOrderDetail] = useState() //获取到的原始数据 + const {fetchData: getOrderFetchData} = GetSaleOrderDetailApi() + const getSaleOrderPreView = async () => { + if(orderId.current) { + let res = await getOrderFetchData({id: orderId.current}) + setOrderDetail(res.data) + } + } + + //监听获取到的数据 + useEffect(() => { + if(orderDetail) { + formatData() + } + }, [orderDetail]) + + //格式化数据格式 + const [formatDetailOrder, setFormatDetailOrder] = useState() //格式化后的数据 + const formatData = () => { + setFormatDetailOrder({ + 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, //订单状态 + + }) + } + + //数据总量 + const dataCount = useMemo(() => { + if(formatDetailOrder) { + return `${formatDetailOrder.total_fabrics}种面料，${formatDetailOrder.total_colors}种颜色，共${formatDetailOrder.total_number}条` + } + }, [formatDetailOrder]) + + + //退货选择弹窗 + const [showReason, setShowReason] = useState<{show:true|false, title: string}>({show:false, title: ''}) + const closeReason = useCallback(() => setShowReason({...showReason, show:false}), []) + const onShowReason = (status) => { + setShowReason({...showReason, show:true}) + } + + //面料数据 + let roll_list = useRef({}) + + //大货时获取计步器数据 + const getNumChange = useCallback((val) => { + if(parseInt(val.number) > 0) { + roll_list.current[val.color_id] = {product_color_id: val.color_id, product_roll: val.number} + } else { + delete roll_list.current[val.color_id] + } + + let count = 0 + Object.values(roll_list.current).map((item: any) => { + count += item.product_roll + }) + setSubmitData((e) => ({...e, roll_list:Object.values(roll_list.current), roll: count})) + }, []) + + //散剪和剪板 + const getSelectChange = useCallback((val) => { + console.log('val::', val) + if(val.status) { + roll_list.current[val.color_id] = {product_color_id: val.color_id, product_roll: val.length} + } else { + delete roll_list.current[val.color_id] + } + let count = 0 + Object.values(roll_list.current).map((item: any) => { + count += item.product_roll + }) + setSubmitData((e) => ({...e, roll_list:Object.values(roll_list.current), roll: count})) + }, []) + + //获取图片列表 + const getImageList = useCallback((list) => { + setSubmitData((e) => ({...e, fabric_piece_accessory_url:list})) + }, []) + + //其他说明 + const getOtherReason = useCallback((val) => { + setSubmitData((e) => ({...e, reason_describe: val})) + }, []) + + //提交数据 + const {fetchData: fetchDataReturnApply} = ReturnApplyOrderApi() + const onSubmitData = async () => { + if(submitData.roll_list.length <= 0) return alert.error('请选择退货颜色') + let res = await fetchDataReturnApply(submitData) + if(res.success) { + alert.success('申请成功') + goLink('/pages/salesAfterList/index',{}, 'reLaunch') + } else { + alert.error('申请失败') + } + console.log('提交：：',submitData) + } + + //底部按钮 + const onSubmit = (val) => { + if(val == 2) { + onSubmitData() + } + } + + const [returnGoodsInfo, setReturnGoodsInfo] = useState<{title:string, list: any[]}>({title:'', list:[]}) + //售后货物状况 + const {fetchData: fetchDataGoodsStatus} = ReturnGoodsStatusApi() + const getReturnGoodsStatus = async () => { + let res = await fetchDataGoodsStatus() + setReturnGoodsInfo((e) => ({...e, title: '售后货物状况', list:res.data?.list||[]})) + } + useEffect(() => { + getReturnGoodsStatus() + }, []) + + return ( + + + {dataCount} + + + + + + 退货原因 + onShowReason(1)}> + 请选择 + + + + + 货物状况 + onShowReason(2)}> + 请选择 + + + + + 退货说明 + onShowReason(3)}> + 请选择 + + + + + 拍照上传 + + + + + + + + + + + + + + onSubmit(1)}>取消 + onSubmit(2)}>确认 + + + + + ) +} \ No newline at end of file diff --git a/src/pages/certification/components/SelectEnterpriseType.scss b/src/pages/certification/components/SelectEnterpriseType.scss new file mode 100644 index 0000000..f18cf81 --- /dev/null +++ b/src/pages/certification/components/SelectEnterpriseType.scss @@ -0,0 +1,22 @@ +.select-enterprise-type{ + .select-enterprise-type-btn{ + color: #ABABAB; + font-size: 28px; + padding: 20px; + display: flex;justify-content: space-between; + border-bottom: 1rpx solid #eaeaea; + } + .select-enterprise-type-content{ + padding: 0 20px; + padding-bottom: 120px; + } + .select-enterprise-type-content view{ + padding: 20px 0; + font-size: 28px; + display: flex;justify-content: space-between; + } + .select-enterprise-type-content view text:last-child{ + color: #007AFF; + font-size: 35px; + } +} \ No newline at end of file diff --git a/src/pages/certification/components/SelectEnterpriseType.tsx b/src/pages/certification/components/SelectEnterpriseType.tsx new file mode 100644 index 0000000..acf9598 --- /dev/null +++ b/src/pages/certification/components/SelectEnterpriseType.tsx @@ -0,0 +1,56 @@ +import { Text, View } from "@tarojs/components" +import Popup from "@/components/popup"; +import "./SelectEnterpriseType.scss" +import { forwardRef, useEffect, useImperativeHandle, useState } from "react"; +import {certificationTypeListApi} from "@/api/certification" + +interface Params{ + confirm?: (selected:any)=>void, // 确定 +} + +export default forwardRef((props: Params, ref)=>{ + const [modalShow, setModalShow] = useState(false) + // 获取认证信息 + const {fetchData, state} = certificationTypeListApi(); + useEffect(()=>{ + fetchData(); + }, []) + const [selected, setSelected] = useState({}); + // 确定 + const handleSelect = (item)=>{ + setSelected(item); + } + // 设置弹窗是否显示 + const setShow = (ev)=>{ + setModalShow(ev); + } + useImperativeHandle(ref,()=>({ + setShow + })) + // 确定 + const handleConfirm = ()=>{ + props.confirm&&props.confirm(selected); + setModalShow(false); + } + + return ( + + setModalShow(false)}> + + setModalShow(false)}>取消 + 确定 + + + { + state.data?.list?.map((item,index)=>{ + return handleSelect(item)} key={index}> + {item.name} + {item.id==(selected as any).id?:} + + }) + } + + + + ) +}) diff --git a/src/pages/certification/index.scss b/src/pages/certification/index.scss index 441d16b..a6c7bcf 100644 --- a/src/pages/certification/index.scss +++ b/src/pages/certification/index.scss @@ -16,6 +16,7 @@ margin-left: 30px; padding-top: 40px; color: #000000; + padding-bottom: 20px; // border-top: 18px solid #F0F0F0; } .certification-upload{ @@ -38,6 +39,10 @@ .certification-upload-no{ display: flex;flex-direction: column;align-items: center; } + .certification-upload image{ + position: absolute;width: 100%;height: 100%; + object-fit: cover;border-radius: 30px; + } .certification-upload-no-icon{ width: 104px; height: 104px; @@ -56,10 +61,11 @@ } .certification-button{ position: absolute;bottom: -10px;left: -10px;right: -10px; - background-color: #858A8F; + background-color: rgba(0,0,0,0.65); display: flex; height: 86px; border-radius: 0 0 30px 30px; + z-index: 1; } .certification-button view{ flex: 1; @@ -79,6 +85,7 @@ position: fixed;bottom: 0;left: 0;right: 0; width: 100%; display: flex;align-items: center;justify-content: center; + z-index: 2; } .certification-footer-button{ width: 696px; @@ -90,12 +97,16 @@ box-sizing: border-box; overflow: hidden; } - .certification-footer-button view{ + .certification-footer-button view,.certification-footer-button navigator{ flex: 1; display: flex;align-items: center;justify-content: center; font-size: 32px; font-weight: 400; color: #007aff; + border: 0;border-radius: none; + } + .certification-footer-button navigator::after{ + border: 0;border-radius: none; } .certification-footer-button view:last-child{ color: white; diff --git a/src/pages/certification/index.tsx b/src/pages/certification/index.tsx index 0d0767d..43d5463 100644 --- a/src/pages/certification/index.tsx +++ b/src/pages/certification/index.tsx @@ -1,133 +1,196 @@ import FromListCertification from "@/components/FromListCertification" -import { Button, Input, Text, Textarea, View } from "@tarojs/components" +import { Button, Image, Input, NavigationBar, Navigator, Text, Textarea, View } from "@tarojs/components" import Taro, { setNavigationBarTitle, useRouter } from "@tarojs/taro" -import {weightAddApi, weightDetailApi,weightEditApi} from "@/api/weightList" -import { useEffect, useState } from "react" +import { certificationSaveApi, certificationDetailApi } from "@/api/certification" +import { useEffect, useRef, useState } from "react" import { alert, retrieval } from "@/common/common" import "./index.scss" +import useUploadCDNImg from "@/use/useUploadImage"; import Message from "@/components/Message" +import { IMG_CND_Prefix } from "@/common/constant"; +import SelectEnterpriseType from "./components/SelectEnterpriseType" +import { useSelector } from "@/reducers/hooks"; +import useLogin from "@/use/useLogin"; -export default ()=>{ - const {type,id} = useRouter().params; - useEffect(()=>{ - if(type=="add"){ - setNavigationBarTitle({title:"添加码单信息"}) - }else{ - initalFormData(); - setNavigationBarTitle({title:"修改码单信息"}) - } - },[]); - // 获取编辑码单信息 - const {fetchData: getFromData} = weightDetailApi() - const initalFormData = async ()=>{ - const detail = await getFromData({id}); +export default () => { + const { getAdminUserInfo } = useLogin(); + const { adminUserInfo } = useSelector(state => state.userInfo); + useEffect(() => { + initalFormData(); + }, []); + // 获取认证信息 + const { fetchData: getFromData } = certificationDetailApi() + const initalFormData = async () => { + const detail = await getFromData(); setFormData({ - title: detail.data.title, - purchaser_name: detail.data.purchaser_name, - phone: detail.data.phone, - is_default: detail.data.is_default, - id: detail.data.id, - }) + ...detail.data ?? {}, + legal_person_identity_url: detail?.data?.legal_person_identity_url ?? [], + // business_license_url: "https://test.cdn.zzfzyc.com/mall/827082e888860dd9da10f0fbb0ac3cf023081456.png" + } as any) } // 保存 const [formData, setFormData] = useState({ - title: "", - purchaser_name: "", - phone: "", - is_default: false, - id: 0 - }) + authentication_type: 0, + authentication_type_name: "", + business_license_url: "", + legal_person: "", + legal_person_identity: "", + businessLicense: '', + legal_person_identity_url: [], + name: "" + }); const rules = { - title: [{ - message: "请输入抬头" + authentication_type: [{ + message: "请选择认证类型" }], - purchaser_name: [{ - message: "请输入客户名称" + name: [{ + message: "请输入企业名称" + }], + business_license_url: [{ + message: "请上传营业执照" + }], + legal_person: [{ + message: "请输入法人名称" + }], + legal_person_identity: [{ + message: "请输入正确法人身份证", + regex: /^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/ + }], + legal_person_identity_url: [{ + message: "请上传法人身份证", + validator: (value: any, rule: any) => { + if (!value[0] || !value[1]) { + return true; + } + return false; + } }], - phone: [{ - message: "请输入正确的电话号码", regex: /^1[3|5|6|9|2|8|7]\d{9}$/ - }] } - const {fetchData} = weightAddApi() - const {fetchData: editFetch} = weightEditApi() - const handleSave = ()=>{ - retrieval(formData, rules).then(async ()=>{ - const result = type=="add"?await fetchData({ - title: formData.title, - purchaser_name: formData.purchaser_name, - phone: formData.phone, - is_default: formData.is_default, - }):await editFetch({ - title: formData.title, - purchaser_name: formData.purchaser_name, - phone: formData.phone, - is_default: formData.is_default, - id: formData.id - }); - if(result.success){ - Taro.eventCenter.trigger("weightList:refresh"); + const { fetchData } = certificationSaveApi() + const handleSave = () => { + retrieval(formData, rules).then(async () => { + const result = await fetchData({ ...formData, authentication_type: 2 }) + if (result.success) { + // Taro.eventCenter.trigger("weightList:refresh"); + getAdminUserInfo(); Taro.navigateBack(); alert.success("保存成功"); - }else{ + } else { alert.error(result.msg); } - }).catch((message)=>{ + }).catch((message) => { alert.none(message) }) } // 监听表单完善 const [hozon, setHozon] = useState(false); - useEffect(()=>{ - if(retrieval){ - retrieval(formData).then(()=>setHozon(true)).catch(()=>setHozon(false)) + useEffect(() => { + if (retrieval) { + retrieval(formData).then(() => setHozon(true)).catch(() => setHozon(false)) } - },[formData]) + }, [formData]) + // 选择类型弹窗显示 + const selectTypeRef = useRef(null) + const handleSelectTypeModalShow = () => { + (selectTypeRef.current as any).setShow(true) + } + // 选择类型确定 + const handleSelectTypeConfirm = (item) => { + setFormData({ + ...formData, + authentication_type: item.id, + authentication_type_name: item.name + }); + } + // 上传图片 + const { getWxPhoto } = useUploadCDNImg(); + const handleUploadImage = async (text: any) => { + let result = await getWxPhoto('mall'); + if (text == "business_license_url") { + formData.business_license_url = IMG_CND_Prefix + (result as any).url; + } else { + formData.legal_person_identity_url[text] = IMG_CND_Prefix + (result as any).url as never; + } + setFormData({ ...formData }); + } + // 查看图片 + const handleViewImage = (event, url) => { + event.stopPropagation(); + Taro.previewImage({ + current: url, + urls: [url] + }) + } return ( - + {(adminUserInfo as any)?.authentication_status == 3 && } 企业认证 - setFormData({...formData,title:ev.detail.value})} - value={formData["title"]} label="认证类型" placeholder="企业认证"/> - setFormData({...formData,title:ev.detail.value})} value={formData["title"]} label="企业名称" placeholder="请输入营业执照上的企业名称" required/> - setFormData({...formData,title:ev.detail.value})} value={formData["title"]} label="企业营业" placeholder="注册号、统一社会信用代码、组织机构代码" required/> - - {/* 营业执照正面 - - 查看证件 - 重新上传 - */} - - + - 上传营业执照下面 - + {/* */} + + setFormData({ ...formData, name: ev.detail.value })} value={formData["name"]} label="企业名称" placeholder="请输入营业执照上的企业名称" required /> + {/* */} + setFormData({ ...formData, businessLicense: ev.detail.value })} value={formData["businessLicense"]} style={{ border: "0" }} label="企业营业执照" placeholder="注册号、统一社会信用代码、组织机构代码" required /> + handleUploadImage("business_license_url")} className="certification-upload"> + {(formData as any)?.business_license_url ? + <> + 营业执照正面 + + handleViewImage(e, (formData as any)?.business_license_url)}>查看证件 + 重新上传 + + + : + + + + 上传营业执照正面 + + } 法人认证 - setFormData({...formData,title:ev.detail.value})} value={formData["title"]} label="法人代表" placeholder="填写法人名称" required/> - setFormData({...formData,title:ev.detail.value})} value={formData["title"]} label="法人身份" placeholder="填写法人代表身份证号" required/> - - 身份证正面 - - 查看证件 - 重新上传 - + setFormData({ ...formData, legal_person: ev.detail.value })} value={formData["legal_person"]} label="法人代表" placeholder="填写法人名称" required /> + setFormData({ ...formData, legal_person_identity: ev.detail.value })} value={formData["legal_person_identity"]} label="法人身份" placeholder="填写法人代表身份证号" required /> + handleUploadImage(0)} className="certification-upload"> + {(formData as any)?.legal_person_identity_url[0] ? + <> + 营业执照正面 + + handleViewImage(e, (formData as any)?.legal_person_identity_url[0])}>查看证件 + 重新上传 + + + : + + + + 上传身份证正面 + + } - - 身份证反面 - - 查看证件 - 重新上传 - + handleUploadImage(1)} className="certification-upload"> + {(formData as any)?.legal_person_identity_url[1] ? + <> + 营业执照正面 + + handleViewImage(e, (formData as any)?.legal_person_identity_url[1])}>查看证件 + 重新上传 + + + : + + + + 上传身份证正面 + + } - 取消 - 提交 + 取消 + {[3, 4].includes((adminUserInfo as any)?.authentication_status) ? "重新认证" : "提交"} diff --git a/src/pages/collection/index.config.ts b/src/pages/collection/index.config.ts new file mode 100644 index 0000000..a316ea6 --- /dev/null +++ b/src/pages/collection/index.config.ts @@ -0,0 +1,4 @@ +export default { + navigationBarTitleText: '我的收藏', + enableShareAppMessage: true, +} diff --git a/src/pages/collection/index.module.scss b/src/pages/collection/index.module.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/collection/index.tsx b/src/pages/collection/index.tsx new file mode 100644 index 0000000..67a9d9f --- /dev/null +++ b/src/pages/collection/index.tsx @@ -0,0 +1,12 @@ +import Search from "@/components/search" +import { View } from "@tarojs/components" +import styles from './index.module.scss' +export default () => { + return ( + + + console.log(e)} placeholder="请输入面料关键词" placeIcon="out" showBtn={true} /> + + + ) + } \ No newline at end of file diff --git a/src/pages/creditLine/index.scss b/src/pages/creditLine/index.scss index 29a272e..79772fc 100644 --- a/src/pages/creditLine/index.scss +++ b/src/pages/creditLine/index.scss @@ -5,22 +5,6 @@ width: 238px; height: 238px; } - - .credit-line-tips{ - width: 100%; - height: 66px; - background: #FFE6CE; - border: 2px solid #ffe6ce; - padding: 0 30px; - display: flex;align-items: center; - font-size: 24px; - font-weight: 400; - color: #EE7500; - } - .credit-line-tips text{ - margin-right: 10px; - font-size: 30px; - } .credit-line-card{ width: 702px; background: #ffffff; diff --git a/src/pages/creditLine/index.tsx b/src/pages/creditLine/index.tsx index 5468d50..6a9d4e9 100644 --- a/src/pages/creditLine/index.tsx +++ b/src/pages/creditLine/index.tsx @@ -7,6 +7,7 @@ import {creditInfoApi} from "@/api/creditLine" import "./index.scss" import { useSelector } from "@/reducers/hooks"; import { formatDateTime, formatPriceDiv } from "@/common/fotmat" +import Message from "@/components/Message" export default ()=>{ @@ -41,7 +42,8 @@ export default ()=>{ const credit_quota_used_line = convertPrice(formatPriceDiv(result.data.credit_quota_used_line)); const credit_quota_line = convertPrice(formatPriceDiv(result.data.credit_quota_line)); const credit_quota_available_line = convertPrice(formatPriceDiv(result.data.credit_quota_available_line)); - const progress = ((credit_quota_available_line[0]??0) / (credit_quota_line[0]??0) * 100).toFixed(0); + const progress = credit_quota_available_line[0]==0&&credit_quota_line[0]==0?100:((credit_quota_available_line[0]??0) / (credit_quota_line[0]??0) * 100).toFixed(0); + switch(Number(result.data.quota_status)){ case 0://暂未开通 @@ -120,9 +122,7 @@ export default ()=>{ return ( - - 暂不支持线上申请授权，请联系平台客服。 - + diff --git a/src/pages/creditUsed/index.tsx b/src/pages/creditUsed/index.tsx index 8858ad9..11cdbd8 100644 --- a/src/pages/creditUsed/index.tsx +++ b/src/pages/creditUsed/index.tsx @@ -4,7 +4,7 @@ import Taro, { useReady } from "@tarojs/taro" import { useCallback, useEffect, useMemo, useRef, useState } from "react" import {creditListApi} from "@/api/creditLine" import "./index.scss" -import { formatDateTime } from "@/common/fotmat" +import { formatDateTime, formatPriceDiv, toDecimal2 } from "@/common/fotmat" import { dataLoadingStatus, getFilterData } from "@/common/util"; export default ()=>{ @@ -30,7 +30,9 @@ export default ()=>{ 下单 - 0?'green':item.amount<0?'red':''}`}>{item.amount.toLocaleString()} + 0?'green':item.amount<0?'red':''}`}> + {item.trans_type==2?"-":"+"}{toDecimal2(formatPriceDiv(item.amount)).toLocaleString()} + {formatDateTime(item.order_pay_time)} diff --git a/src/pages/depositBeforehand/index.scss b/src/pages/depositBeforehand/index.scss index d782d46..157ea4f 100644 --- a/src/pages/depositBeforehand/index.scss +++ b/src/pages/depositBeforehand/index.scss @@ -3,22 +3,6 @@ background-color: #f3f3f3; display: flex; flex-direction: column; - .deposit-beforehand-tips{ - width: 100%; - height: 66px; - background: #FFE6CE; - border: 2px solid #ffe6ce; - padding: 0 30px; - display: flex;align-items: center; - font-size: 24px; - font-weight: 400; - color: #EE7500; - margin: 0; - } - .deposit-beforehand-tips text{ - margin-right: 10px; - font-size: 30px; - } .deposit-beforehand-card{ width: 702px; diff --git a/src/pages/depositBeforehand/index.tsx b/src/pages/depositBeforehand/index.tsx index c904f4c..9636d30 100644 --- a/src/pages/depositBeforehand/index.tsx +++ b/src/pages/depositBeforehand/index.tsx @@ -6,6 +6,7 @@ import { depositInfoApi } from "@/api/deposit" import { useEffect } from "react"; import { formatPriceDiv, toDecimal2 } from "@/common/fotmat"; import { setClipboardData } from "@tarojs/taro"; +import Message from "@/components/Message"; export default ()=>{ const {fetchData, state} = depositInfoApi(); @@ -23,9 +24,7 @@ export default ()=>{ return ( - - 汇款成功后，1-5分钟自动到账。 - + 余额 (元) diff --git a/src/pages/depositList/index.scss b/src/pages/depositList/index.scss index 825cef8..f58398d 100644 --- a/src/pages/depositList/index.scss +++ b/src/pages/depositList/index.scss @@ -18,11 +18,12 @@ .credit-used-list-price{ font-size: 28px; font-weight: 400; - margin-bottom: 20px; } .credit-used-list-right{ display: flex;align-items: center; - text-align: right; + } + .credit-used-list-right-price view{ + display: flex;align-items: center; } .credit-used-list-right text{ font-size: 30px; @@ -36,6 +37,7 @@ .credit-used-list-orderno{ font-size: 20px; font-weight: 400; + margin-top: 20px; color: #ababab; } .green{ diff --git a/src/pages/depositList/index.tsx b/src/pages/depositList/index.tsx index c741086..eb9077c 100644 --- a/src/pages/depositList/index.tsx +++ b/src/pages/depositList/index.tsx @@ -36,11 +36,11 @@ export default ()=>{ - - 0?'red':'green'}`}> - {(item as any).amount_received_this_time>0&&"+"}{formatPriceDiv((item as any).amount_received_this_time)} + + + {[1,2,3].includes((item as any).type as never)?"+":"-"}{formatPriceDiv((item as any).amount_received_this_time)} - 处理中 + {/* 处理中 */} diff --git a/src/pages/details/components/counter/index.module.scss b/src/pages/details/components/counter/index.module.scss index fe96cca..2748cef 100644 --- a/src/pages/details/components/counter/index.module.scss +++ b/src/pages/details/components/counter/index.module.scss @@ -4,19 +4,25 @@ align-items: center; justify-content: space-between; width: 100%; - .reduce, .plus{ - font-size: $font_size_big; + .plus{ color: $color_main; width: 46px; height: 46px; - display: flex; - align-items: center; - justify-content:center; + text-align: center; + line-height: 43px; font-size: 50px; background-color: $color_main; color: #fff; border-radius: 8px; } + .reduce { + font-size: 50px; + width: 46px; + height: 46px; + text-align: center; + line-height: 43px; + color:#007AFF; + } .input{ display: flex; align-items: flex-end; @@ -25,10 +31,13 @@ box-sizing: border-box; width: 106px; border-radius: 10px; + input{ + font-size: $font_size_medium; + text-align: right; + padding-right: 10px; + } } - input{ - font-size: $font_size_medium; - } + .unit{ font-size: $font_size_min; color: $color_font_two; diff --git a/src/pages/details/components/orderCount/index.module.scss b/src/pages/details/components/orderCount/index.module.scss index 8c745e2..705cf29 100644 --- a/src/pages/details/components/orderCount/index.module.scss +++ b/src/pages/details/components/orderCount/index.module.scss @@ -72,6 +72,9 @@ padding-bottom:151px; } .color_con{ + .virtual_list{ + padding-bottom: 300px; + } .item { display: flex; justify-content: space-between; @@ -81,12 +84,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..d06a1c4 100644 --- a/src/pages/details/components/orderCount/index.tsx +++ b/src/pages/details/components/orderCount/index.tsx @@ -15,6 +15,8 @@ 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"; +import VirtualList from '@tarojs/components/virtual-list' @@ -48,21 +50,14 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param) //获取面料颜色列表 const {fetchData:colorFetchData, state: colorState} = GetColorList() const [list, setList] = useState([]) - const [loading, setLoading] = useState(false) const condition = useRef({physical_warehouse:adminUserInfo?.physical_warehouse, sale_mode:selectIndex, product_id:0, code_or_name:null}) const getColorList = async () => { - setLoading(() => true) - console.log('数据:::',getFilterData(condition.current)) let {data} = await colorFetchData(getFilterData(condition.current)) let lists = initList(data.list) setList(() => [...lists]) - setLoading(() => false) } const [showPopup, setShowPopup] = useState(false) - useEffect(() => { - console.log('colorState::',colorState) - }, [colorState]) //显示获取 useEffect(() => { @@ -123,11 +118,14 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param) //计数组件 const getInputValue = (num, item) => { - item.count = parseFloat(num) - if(num == 0) item.show = false - setList([...list]) - console.log(num) + item.count = parseFloat(num) + if(num == 0) item.show = false + setList([...list]) + console.log(num) + } + + const onAdd = (item) => { item.show = true item.count = selectList[selectIndex].defaultNum @@ -153,7 +151,6 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param) }) return false } - if(selectCount.sumCount == 0) { Taro.showToast({ icon:'none', @@ -161,6 +158,7 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param) }) return false } + const state = await addFetchData({ "sale_mode": selectIndex, color_list: selectCount.color_list @@ -198,10 +196,44 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param) return ¥{price} /{selectList[selectIndex].eunit} }, [selectIndex]) + //虚拟滚动 + const Rows = memo(({id, index, style, data}:any) => { + let item = data[index] + return ( + <> + {item&& + + + + + {formatHashTag(item.code, item.name)} + + {formatPrice(item)} + + + + {!item.show&& onAdd(item)}>添加 + || + getInputValue(e, item)} + defaultNum={item.count} + step={selectList[selectIndex].step} + digits={selectList[selectIndex].digits} + onClickBtn={(e) => getInputValue(e, item)} + unit={selectList[selectIndex].unit} + minNum={selectList[selectIndex].minNum} + maxNum={selectList[selectIndex].maxNum} + /> + } + + || + } + + ) + }) return ( - closePopup()} > {title} @@ -227,39 +259,53 @@ export default memo(({show = false, onClose, title = '', productId = 0}: param) {(list.length <= 0 && colorState.loading)&&} {(list.length > 0&& !colorState.loading)&& - - - - {list.map(item => { - return - - - - - {formatHashTag(item.code, item.name)} - - {formatPrice(item)} - - - - {!item.show&& onAdd(item)}>添加 - || - getInputValue(e, item)} - defaultNum={item.count} - step={selectList[selectIndex].step} - digits={selectList[selectIndex].digits} - onClickBtn={(e) => getInputValue(e, item)} - unit={selectList[selectIndex].unit} - minNum={selectList[selectIndex].minNum} - maxNum={selectList[selectIndex].maxNum} - /> - } - - - })} - - } + // + // + // {list.map(item => { + // return + // + // + // + // + // {formatHashTag(item.code, item.name)} + // + // {formatPrice(item)} + // + // + // + // {!item.show&& onAdd(item)}>添加 + // || + // getInputValue(e, item)} + // defaultNum={item.count} + // step={selectList[selectIndex].step} + // digits={selectList[selectIndex].digits} + // onClickBtn={(e) => getInputValue(e, item)} + // unit={selectList[selectIndex].unit} + // minNum={selectList[selectIndex].minNum} + // maxNum={selectList[selectIndex].maxNum} + // /> + // } + // + // + // })} + // + // } + + + {Rows} + + + } + {(list.length <= 0 && !colorState.loading)&&暂无此商品} @@ -273,4 +319,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..3d289d7 100644 --- a/src/pages/details/index.tsx +++ b/src/pages/details/index.tsx @@ -14,6 +14,8 @@ 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'; +import { alert } from '@/common/common'; type item = {title:string, img:string, url:string, id:number} @@ -78,9 +80,10 @@ export default (props:Params) => { const [showCart, setShowCart] = useState(false) const [showOrderCount, setShowOrderCount] = useState(false) - const html = ` - - ` + // const html = ` + // + // ` + const html = `` //弹窗提示 const [colorInfo, setColorInfo] = useState() @@ -113,17 +116,21 @@ export default (props:Params) => { setSortCode({... userObj.sort_code, shareShortDetail: {title: productName as string, code: resDetail.md5_key, img:''}}) } - //开始下单 - const placeOrder = async (e:any) => { - try { - await getPhoneNumber(e.detail.code) - } catch(msg) { - Taro.showToast({ - icon:"none", - title: msg - }) - return false - } + //授权手机号和下单 + const placeOrder = async (status = 'to_phone',e:any = {}) => { + if(!productInfo.id) return false + if(status == 'to_phone') { + if(!e.detail.code) return alert.error('请授权手机号') + try { + await getPhoneNumber(e.detail.code) + } catch(msg) { + Taro.showToast({ + icon:"none", + title: msg + }) + return false + } + } setShowOrderCount(true) } @@ -162,12 +169,12 @@ export default (props:Params) => { - 色号 (10) + 色号 ({productInfo?.product_color_list?.length}) {productInfo?.product_color_list?.map(item => { return getColorItem(item)}> - + {item.code} @@ -183,11 +190,11 @@ export default (props:Params) => { 购物车 { - !userInfo.adminUserInfo?.is_authorize_phone&& - + (!userInfo.adminUserInfo?.is_authorize_phone)&& + 开始下单 - || placeOrder(e)}>开始下单 + || placeOrder('to_order')}>开始下单 } diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx index 1bde8b9..9912444 100644 --- a/src/pages/index/index.tsx +++ b/src/pages/index/index.tsx @@ -1,4 +1,4 @@ -import {View} from '@tarojs/components' +import { View } from '@tarojs/components' import Banner from '@/components/banner' import Search from '@/components/search' import SideBar from '@/components/sideBar' @@ -6,16 +6,17 @@ import Product from '@/components/product' import MoveBtn from '@/components/moveBtn' import ShopCart from '@/components/shopCart' import { goLink } from '@/common/common' -import styles from './index.module.scss' +import styles from './index.module.scss' import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react' -import Taro, { Events, useDidShow, usePullDownRefresh} from '@tarojs/taro' -import {GetProductKindListApi, GetProductListApi} from '@/api/material' +import { useSelector } from "@/reducers/hooks"; +import Taro, { Events, useDidShow, usePullDownRefresh } from '@tarojs/taro' +import { GetProductKindListApi, GetProductListApi } from '@/api/material' import useLogin from '@/use/useLogin' import { dataLoadingStatus } from '@/common/util' export default () => { - const {checkLogin} = useLogin() + const { checkLogin } = useLogin() useDidShow(async () => { await checkLogin() }) @@ -25,32 +26,33 @@ export default () => { }, []) //获取面料种类 - const [kindData, setKindData] = useState({list:[], defaultId:0}) - const {fetchData} = GetProductKindListApi() + const [kindData, setKindData] = useState({ list: [], defaultId: 0 }) + const { fetchData } = GetProductKindListApi() const categoryList = async () => { const res = await fetchData() - if(res.data?.list) { - setKindData({...kindData, list:res.data.list, defaultId: res.data.list[0].id}) - setFiltrate({...filtrate, product_kind_id:res.data.list[0].id}) + if (res.data?.list) { + setKindData({ ...kindData, list: res.data.list, defaultId: res.data.list[0].id }) + setFiltrate({ ...filtrate, product_kind_id: res.data.list[0].id }) } - + } //获取面料列表 - const [productData, setProductData] = useState({list:[], total:0}) + const [productData, setProductData] = useState({ list: [], total: 0 }) const [hasMore, setHasMore] = useState(true) - const [filtrate, setFiltrate] = useState({product_kind_id:0, size: 5,page: 1}) - const pageNum = useRef({size:filtrate.size, page:filtrate.page}) - const {fetchData: productFetchData, state: productState} = GetProductListApi() + const [filtrate, setFiltrate] = useState({ product_kind_id: 0, size: 5, page: 1 }) + const pageNum = useRef({ size: filtrate.size, page: filtrate.page }) + const { fetchData: productFetchData, state: productState } = GetProductListApi() //获取数据方法 const getProductList = async () => { - const {data,total} = await productFetchData(filtrate) - setProductData({...productData,list:data.list,total}) + const { data, total } = await productFetchData(filtrate) + setProductData({ ...productData, list: data.list, total }) setRefresherTriggeredStatus(() => false) } //监听查询条件 useEffect(() => { - if(filtrate.product_kind_id) + + if (filtrate.product_kind_id) getProductList() }, [filtrate]) @@ -58,30 +60,30 @@ export default () => { //点击面料类型 const getProductKindId = useCallback((e) => { pageNum.current.page = 1 - setProductData({list:[], total:0}) - setFiltrate((list) => ({...list, size:5, product_kind_id:e.id})) + setProductData({ list: [], total: 0 }) + setFiltrate((list) => ({ ...list, size: 5, product_kind_id: e.id })) // setHasMore(true) }, []) //上拉加载数据 const getScrolltolower = useCallback(() => { - if(productData.list.length >= productData.total) { + if (productData.list.length >= productData.total) { setHasMore(false) } else { pageNum.current.page++ const newSize = pageNum.current.size * pageNum.current.page - setFiltrate((e) => ({...e, size:newSize})) + setFiltrate((e) => ({ ...e, size: newSize })) } }, [productData]) const [showShopCart, setShowShopCart] = useState(false) - + //列表下拉刷新 const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false) const getRefresherRefresh = async () => { pageNum.current.page = 1 - setFiltrate({...filtrate, size:5}) + setFiltrate({ ...filtrate, size: 5 }) setHasMore(true) setRefresherTriggeredStatus(true) } @@ -95,26 +97,85 @@ export default () => { //数据加载状态 const statusMore = useMemo(() => { - return dataLoadingStatus({list:productData.list, total: productData.total, status: productState.loading}) + return dataLoadingStatus({ list: productData.list, total: productData.total, status: productState.loading }) }, [productData, productState.loading]) - + + useEffect(() => { + getShow() + }, []) + // const [time, setShow] = useState(false) + //拿状态存储的东西判断 + const { adminUserInfo } = useSelector(state => state.userInfo); + const getShow = () => { + if (adminUserInfo?.authentication_status === 0 || adminUserInfo?.authentication_status === 1 || adminUserInfo?.authentication_status === 2 || adminUserInfo?.authentication_status === 3) { + //倒计时弹出去认证 + const countTime: any = 60 + //获取倒计时的变量 + var time = parseInt(countTime); + const countDown = setInterval(() => { + if (time == 0) { + Taro.showModal({ + title: '提示', + content: '你还未认证,认证后解锁更多功能', + cancelText: '稍后认证', + confirmText: '去认证', + success: function (res) { + if (res.confirm) { + Taro.navigateTo({ url: '/pages/certification/index' }) + } else if (res.cancel) { + console.log('用户点击取消') + } + } + }) + //清除定时器 + clearInterval(countDown); + } else { + time--; + } + }, 1000) + } + } + + //检查认证是否认证 + const checkShow = () => { + if (adminUserInfo.authentication_status === 0 || adminUserInfo.authentication_status === 1 || adminUserInfo.authentication_status === 2 || adminUserInfo.authentication_status === 3) { + Taro.showModal({ + title: '提示', + content: '你还未认证,认证后解锁更多功能', + cancelText: '稍后认证', + confirmText: '去认证', + success: function (res) { + if (res.confirm) { + Taro.navigateTo({ url: '/pages/certification/index' }) + } else if (res.cancel) { + console.log('用户点击取消') + } + } + }) + } else { + setShowShopCart(!showShopCart) + } + + } + + return ( - setShowShopCart(!showShopCart)}> + checkShow()}> - + 我的收藏 goLink('/pages/searchList/search')}> - + - getRefresherRefresh()}> - - + getRefresherRefresh()}> + + - setShowShopCart(false)}/> + setShowShopCart(false)} /> ) diff --git a/src/pages/order/comfirm.module.scss b/src/pages/order/comfirm.module.scss index 2858dec..a33eb0c 100644 --- a/src/pages/order/comfirm.module.scss +++ b/src/pages/order/comfirm.module.scss @@ -80,6 +80,9 @@ box-sizing: border-box; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); + .submit_order_number{ + padding: 20px 0; + } .order_btn { width: 250px; height: 90px; diff --git a/src/pages/order/comfirm.tsx b/src/pages/order/comfirm.tsx index e8a8a45..52371dc 100644 --- a/src/pages/order/comfirm.tsx +++ b/src/pages/order/comfirm.tsx @@ -1,15 +1,12 @@ 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 { View } from "@tarojs/components" +import Taro, { useDidShow, usePullDownRefresh} 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 AddressInfo from "./components/addressInfo"; 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"; @@ -17,9 +14,9 @@ import useLogin from "@/use/useLogin"; import { alert, goLink } from "@/common/common"; import ShipmentMode from "../editOrder/components/shipmentMode"; import SubmitOrderBtn from "./components/submitOrderBtn"; +import AddressInfoDetail from "./components/addressInfoDetail"; export default () => { - const {checkLogin} = useLogin() const [showDesc, setShowDesc] = useState(false) //下单信息 @@ -57,8 +54,7 @@ import SubmitOrderBtn from "./components/submitOrderBtn"; if(preViewOrder) { formatData() getDataList() - //当有默认地址时设置默认地址id - preViewOrder.default_address&&setSubmitOrderData((val) => ({...val, address_id:preViewOrder.default_address.id})) + setSubmitOrderData((val) => ({...val, address_id:preViewOrder.default_address.id, shipment_mode:preViewOrder.shipment_mode||2})) } }, [preViewOrder]) @@ -73,7 +69,9 @@ import SubmitOrderBtn from "./components/submitOrderBtn"; total_number: preViewOrder.total_number, //总数量 total_fabrics: preViewOrder.total_fabrics, //面料数量 unit: preViewOrder.sale_mode == 0?'条':'m', //单位 - list: preViewOrder.product_list + list: preViewOrder.product_list, + total_should_collect_money: preViewOrder.total_should_collect_money, //应收金额 + total_sale_price: preViewOrder.total_sale_price //合计金额 }) } const formatPreViewOrderMemo = useMemo(() => { @@ -83,18 +81,16 @@ import SubmitOrderBtn from "./components/submitOrderBtn"; //格式化初始地址 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 { + 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, + shipment_mode: address?.shipment_mode } - return null }, [preViewOrder]) //获取提交格式数据列表 @@ -125,24 +121,29 @@ import SubmitOrderBtn from "./components/submitOrderBtn"; //提交按钮是否可用 const btnStatus = useMemo(() => { - if( submitOrderData?.list?.length == 0 || !submitOrderData?.shipment_mode || (submitOrderData?.shipment_mode == 2 && !submitOrderData?.address_id)) { - return false - } else { - return true - } + return submitOrderData?.shipment_mode == 1 || (submitOrderData?.shipment_mode == 2 && submitOrderData?.address_id) }, [submitOrderData]) + //数量格式 + const numText = useMemo(() => { + if(formatPreViewOrder) { + let total_number = formatPreViewOrder?.sale_mode == 0?formatPreViewOrder?.total_number:(formatPreViewOrder?.total_number/100) + return `${formatPreViewOrder?.total_fabrics}种面料，${formatPreViewOrder?.total_colors}种颜色，共${total_number}${formatPreViewOrder?.unit}` + } + }, [formatPreViewOrder]) + //提交订单 const {fetchData: saleOrderFetchData} = SaleOrderApi() const submitOrderEven = () => { - if(!submitOrderData?.address_id) { - alert.error('请选择地址') - return false - } if(!submitOrderData?.shipment_mode) { alert.error('请选择收货方式') return false } + if(!submitOrderData?.address_id&&submitOrderData?.shipment_mode == 2) { + alert.error('请选择地址') + return false + } + Taro.showModal({ title: '确定提交？', success: async function (res) { @@ -159,10 +160,14 @@ import SubmitOrderBtn from "./components/submitOrderBtn"; } }) } + + //页面下拉刷新 + usePullDownRefresh(() => { + getSaleOrderPreView() + }) return ( - - getAddress(e)} defaultValue={defaultAddress}/> + setShowDesc(true)}> 订单备注 @@ -174,8 +179,8 @@ import SubmitOrderBtn from "./components/submitOrderBtn"; - - {`${formatPreViewOrder?.total_fabrics}种面料，${formatPreViewOrder?.total_colors}种颜色，共${formatPreViewOrder?.total_number + formatPreViewOrder?.unit}`} + + {numText} submitOrderEven()}>提交订单 diff --git a/src/pages/order/components/addressInfoDetail/index copy.tsx b/src/pages/order/components/addressInfoDetail/index copy.tsx new file mode 100644 index 0000000..1fffafe --- /dev/null +++ b/src/pages/order/components/addressInfoDetail/index copy.tsx @@ -0,0 +1,163 @@ +import { EditSaleOrderAddressApi, EditSaleOrderShipmentModeApi } from "@/api/order"; +import { alert } from "@/common/common"; +import { ORDER_STATUS } from "@/common/enum"; +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, 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禁用后只用于展示 + onChangeShipmentMode?: (val: number) => void, //返回收货方式 + status?: 1|2, //1确认订单时使用， 2订单流程 + orderInfo?: { + orderId: number //订单id + shipment_mode: 1|2, //1自提 2物流 + status: number //订单状态 + } +} + +export default memo(forwardRef(({onSelect, onChangeShipmentMode, defaultValue = null, orderInfo, status = 2}: 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 && !logisticsShow) + setShowAddressList(() => true) + } + + useEffect(() => { + if(orderInfo) + setReceivingStatus(() => orderInfo.shipment_mode||2) + }, [orderInfo]) + + //把内部方法提供给外部 + useImperativeHandle(ref, () => ({ + changeShow + })) + + //收货方法,1:自提，2物流 + const [receivingStatus, setReceivingStatus] = useState(2) + const {fetchData: shipmentModeFetchData} = EditSaleOrderShipmentModeApi() + const onReceivingStatus = (value, e) => { + e.stopPropagation() + changeReceivingStatus(value) + } + const changeReceivingStatus = debounce(async (value) => { + if(!orderInfo) return false + if(status == 1) { + onChangeShipmentMode?.(value) + setReceivingStatus(value) + return false + } + alert.loading('正在修改') + const res = await shipmentModeFetchData({id: orderInfo.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) => { + if(!orderInfo) return false + if(status == 1) { + setShowAddressList(() => false) + setAddressId(value.id) + setUserInfo(() => value) + return false + } + alert.loading('正在修改') + const res = await addressFetchData({id: orderInfo.orderId, address_id: value.id}) + if(res.success) { + alert.success('地址修改成功') + onSelect?.(value) + setShowAddressList(() => false) + setAddressId(value.id) + setUserInfo(() => value) + } else { + alert.none(res.msg) + } + } + + //订单状态 + const { + SaleOrderStatusWaitingReceipt, + SaleOrderStatusAlreadyReceipt, + SaleOrderStatusComplete, + SaleOrderStatusRefund, + SaleOrderStatusCancel + } = ORDER_STATUS + + //根据订单状态判断是否显示物流 + const logisticsShowList = [SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value] + const logisticsShow = useMemo(() => { + return logisticsShowList.includes(orderInfo?.status as number) + }, [orderInfo]) + + return ( + + changeShow()}> + + + + {formatAddress} + {(receivingStatus == 2 && !logisticsShow)&&} + + + {userInfo?.name} + {userInfo?.phone} + + + {!logisticsShow&& + + onReceivingStatus(1,e)}>自提 + onReceivingStatus(2,e)}>物流 + + + || + + 查看物流 + } + + setShowAddressList(false)}> + + 请选择收货地址 + + + + + + + ) +})) \ No newline at end of file diff --git a/src/pages/order/components/addressInfoDetail/index.module.scss b/src/pages/order/components/addressInfoDetail/index.module.scss index 68e6171..cf039ce 100644 --- a/src/pages/order/components/addressInfoDetail/index.module.scss +++ b/src/pages/order/components/addressInfoDetail/index.module.scss @@ -1,5 +1,4 @@ .order_address{ - height: 178px; background: #ffffff; border-radius: 20px; display: flex; @@ -26,16 +25,23 @@ .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; + padding-top: 10px; + } + .address_text{ + word-break:break-all; + + } + .address_text_no{ + font-weight: 700; + padding-left: 20px; } } .order_address_text_name{ - + margin-top: 30px; align-items: center; text{ &:nth-child(1) { @@ -88,6 +94,21 @@ } } + .logisticsBtn{ + width: 152px; + height: 72px; + background: #ffffff; + border: 2px solid #dddddd; + border-radius: 38px; + position: absolute; + bottom: 10px; + right: 10px; + z-index: 999; + font-size: 28px; + color: #707070; + text-align: center; + line-height: 72px; + } .order_address_text_no{ flex: 1; font-size: $font_size; @@ -101,12 +122,17 @@ } .order_address_list { - height: 900px; + 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/order/components/addressInfoDetail/index.tsx b/src/pages/order/components/addressInfoDetail/index.tsx index d58b12b..f7194be 100644 --- a/src/pages/order/components/addressInfoDetail/index.tsx +++ b/src/pages/order/components/addressInfoDetail/index.tsx @@ -1,11 +1,12 @@ import { EditSaleOrderAddressApi, EditSaleOrderShipmentModeApi } from "@/api/order"; import { alert } from "@/common/common"; +import { ORDER_STATUS } from "@/common/enum"; 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 { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useState } from "react"; import styles from './index.module.scss' export type AddressInfoParam = { @@ -18,37 +19,48 @@ export type AddressInfoParam = { phone: string, } type Param = { - onSelect?: (val:any) => void, //选择 - defaultValue?: AddressInfoParam|null, //默认值 + onSelect?: (val:any) => void, //选择地址 disabled?: false|true, //true禁用后只用于展示 - shipment_mode?: 1|2, //1自提 2物流 onChangeShipmentMode?: (val: number) => void, //返回收货方式 - orderId?: number //订单id + onLogistics?: () => void, //查看物流 + status?: 1|2, //1确认订单时使用， 2订单流程 + orderInfo?: { + id?: number //订单id + shipment_mode?: 1|2, //1自提 2物流 + status?: number //订单状态 + province_name: string, + city_name: string, + district_name: string, + address_detail: string + } } -export default memo(forwardRef(({onSelect, onChangeShipmentMode, defaultValue = null, orderId = 0, shipment_mode = 1}: Param, ref) => { - const [showAddressList, setShowAddressList] = useState(false) - +export default memo(forwardRef(({onSelect, onChangeShipmentMode, orderInfo, status = 2, disabled = false, onLogistics}: Param, ref) => { + + const [addressInfo, setAddressInfo] = useState() useEffect(() => { - setUserInfo(() => defaultValue) - }, [defaultValue]) + if(orderInfo) { + setReceivingStatus(() => orderInfo.shipment_mode||2) + setAddressInfo(() => orderInfo) + } + }, [orderInfo]) - const [userInfo, setUserInfo] = useState() //地址格式 const formatAddress = useMemo(() => { - if(userInfo) - return userInfo.province_name + userInfo.city_name + userInfo.district_name + userInfo.address_detail - }, [userInfo]) + if(addressInfo?.province_name) { + return addressInfo.province_name + addressInfo.city_name + addressInfo.district_name + addressInfo.address_detail + } else { + return '' + } + }, [addressInfo]) + //打开地址列表 + const [showAddressList, setShowAddressList] = useState(false) const changeShow = () => { - if(receivingStatus == 2) + if(receivingStatus == 2 && !logisticsShow) setShowAddressList(() => true) } - - useEffect(() => { - setReceivingStatus(() => shipment_mode) - }, [shipment_mode]) //把内部方法提供给外部 useImperativeHandle(ref, () => ({ @@ -56,15 +68,21 @@ export default memo(forwardRef(({onSelect, onChangeShipmentMode, defaultValue = })) //收货方法,1:自提，2物流 - const [receivingStatus, setReceivingStatus] = useState(1) + const [receivingStatus, setReceivingStatus] = useState(2) const {fetchData: shipmentModeFetchData} = EditSaleOrderShipmentModeApi() const onReceivingStatus = (value, e) => { e.stopPropagation() changeReceivingStatus(value) } const changeReceivingStatus = debounce(async (value) => { + if(!orderInfo) return false + if(status == 1) { + onChangeShipmentMode?.(value) + setReceivingStatus(value) + return false + } alert.loading('正在修改') - const res = await shipmentModeFetchData({id: orderId, shipment_mode:value}) + const res = await shipmentModeFetchData({id: orderInfo.id, shipment_mode:value}) if(res.success) { alert.success('收货方式修改成功') onChangeShipmentMode?.(value) @@ -75,48 +93,79 @@ export default memo(forwardRef(({onSelect, onChangeShipmentMode, defaultValue = }, 10) //修改地址 + const [addressId, setAddressId] = useState(0) const {fetchData: addressFetchData} = EditSaleOrderAddressApi() const getAddress = async (value) => { + if(!orderInfo) return false + if(status == 1) { + setShowAddressList(() => false) + setAddressId(value.id) + setAddressInfo(() => value) + onSelect?.(value) + return false + } alert.loading('正在修改') - const res = await addressFetchData({id: orderId, address_id: value.id}) + const res = await addressFetchData({id: orderInfo.id, address_id: value.id}) if(res.success) { alert.success('地址修改成功') onSelect?.(value) setShowAddressList(() => false) - setUserInfo(() => value) + setAddressId(value.id) + setAddressInfo(() => value) } else { alert.none(res.msg) } } + //订单状态 + const { + SaleOrderStatusWaitingReceipt, + SaleOrderStatusAlreadyReceipt, + SaleOrderStatusComplete, + SaleOrderStatusRefund, + SaleOrderStatusCancel, + } = ORDER_STATUS + + + //根据订单状态判断是否显示物流 + const logisticsShowList = [SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value] + const logisticsShow = useMemo(() => { + console.log('aa:',orderInfo?.status) + return logisticsShowList.includes(orderInfo?.status as number) + }, [orderInfo]) + return ( changeShow()}> - {formatAddress} - {(receivingStatus == 2)&&} + {formatAddress||'请选择收货地址及信息'} + {(receivingStatus == 2 && !logisticsShow)&&} - {userInfo?.name} - {userInfo?.phone} + {addressInfo?.name} + {addressInfo?.phone} - + {!logisticsShow&& onReceivingStatus(1,e)}>自提 onReceivingStatus(2,e)}>物流 - + || + + 查看物流 + } setShowAddressList(false)}> 请选择收货地址 - + + + - ) diff --git a/src/pages/order/components/applyAfterSales/index.module.scss b/src/pages/order/components/applyAfterSales/index.module.scss deleted file mode 100644 index 22a31e0..0000000 --- a/src/pages/order/components/applyAfterSales/index.module.scss +++ /dev/null @@ -1,176 +0,0 @@ - -.apply_after_sales_main{ - .apply_after_sales_head{ - font-size: 30px; - text-align: center; - padding: 20px 0; - font-weight: 700; - } - .kind_number{ - width: 100%; - padding: 20px; - box-sizing: border-box; - text{ - background-color: #F6F6F6; - border-radius: 10px; - font-size: $font_size_medium; - padding: 5px 0; - text-align: center; - width: 100%; - display: block; - color: $color_font_three; - } - } - .apply_after_sales_con{ - height: 80vh; - .scroll{ - height: calc(100% - 80px); - } - .returnSaleInput{ - margin: 0 20px; - padding-top: 30px; - border-top: 1px solid #F6F6F6; - .returnSaleInput_item{ - display: flex; - align-items: center; - padding-bottom: 20px; - .title{ - font-size: $font_size; - font-weight: 700; - } - .select{ - flex:1; - height: 60px; - border: 2px solid #e6e6e6; - border-radius: 10px; - margin-left: 20px; - display: flex; - align-items: center; - justify-content: space-between; - padding: 0 20px; - font-size: 26px; - color: $color_font_two; - .miconfont{ - font-size: 30px; - } - } - - .uploadImg{ - width: 202px; - height: 150px; - background: #f0f0f0; - border: 2px dashed #cccccc; - margin-left: 20px; - border-radius: 10px; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - position: relative; - .miconfont{ - font-size: 50px; - } - .uploadText{ - font-size: 26px; - color: $color_font_three; - } - - } - } - } - .other_desc{ - padding: 0 20px; - box-sizing: border-box; - .title{ - font-size: $font_size; - font-weight: 700; - } - .uploadImg{ - position: relative; - .descDataNum{ - position: absolute; - right: 10px; - bottom: 10px; - font-size: 22px; - color: #ABABAB; - } - } - Textarea{ - background-color: #f3f3f3; - border: 2px solid #e6e6e6; - border-radius: 10px; - width: 100%; - font-size: 25px; - height: 165.4px; - padding: 20px 20px 30px 20px; - box-sizing: border-box; - margin-top: 20px; - } - } - } - .apply_after_sales_list{ - padding: 0 20px; - .apply_after_sales_item{ - margin-bottom: 30px; - .apply_after_sales_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; - } - } - .color_list { - .color_item{ - display: flex; - align-items: center; - margin: 20px 0; - } - .image{ - width: 70px; - height: 70px; - image{ - width: 100%; - height: 100%; - border-radius: 50%; - } - } - .name_and_number{ - padding-left: 30px; - flex:1; - text{ - &:nth-child(1) { - font-weight: 700; - font-size: $font_size; - } - &:nth-child(2) { - color: $color_font_two; - font-size: $font_size; - margin-left: 20px; - } - } - } - .btn_count{ - width: 235px; - height: 64px; - background-color: #ECF5FF; - border-radius: 40px 0px 16px 0px; - padding: 0 20px; - display: flex; - align-items: center; - } - } - } - - } -} - diff --git a/src/pages/order/components/applyAfterSales/index.tsx b/src/pages/order/components/applyAfterSales/index.tsx deleted file mode 100644 index 735e476..0000000 --- a/src/pages/order/components/applyAfterSales/index.tsx +++ /dev/null @@ -1,108 +0,0 @@ -import { Image, ScrollView, Text, Textarea, View } from "@tarojs/components"; -import { memo, useState } from "react"; -import classnames from "classnames"; -import styles from './index.module.scss' -import Popup from "@/components/popup"; -import { formatImgUrl } from "@/common/fotmat"; -import Counter from "@/components/counter"; - -export default memo(() => { - const [showDesc, setShowDesc] = useState(true) - return ( - - setShowDesc(false)} > - - 申请退货 - 2种面料，3种颜色，共6条 - - - - - 大货 - 0770# 21S单面平纹(食毛) - - - - - 1# 薄荷绿x1 - - - - - - - 1# 薄荷绿x1 - - - - - - - - - 大货 - 0770# 21S单面平纹(食毛) - - - - - 1# 薄荷绿x1 - - - - - - - 1# 薄荷绿x1 - - - - - - - - - - 退货原因 - - 请选择 - - - - - 货物状况 - - 请选择 - - - - - 退货说明 - - 请选择 - - - - - 拍照上传 - - - 上传照片 - - - - - - 其他说明 - - - 0/100 - - - - - - - - ) -}) \ No newline at end of file diff --git a/src/pages/order/components/applyRefund/index.module.scss b/src/pages/order/components/applyRefund/index.module.scss new file mode 100644 index 0000000..ec17129 --- /dev/null +++ b/src/pages/order/components/applyRefund/index.module.scss @@ -0,0 +1,66 @@ + +.apply_after_sales_con{ + padding: 20px; + .returnSaleInput_item{ + display: flex; + align-items: center; + padding-bottom: 50px; + flex-wrap: wrap; + .title{ + font-size: $font_size; + font-weight: 700; + width: 119px; + } + .select{ + flex:1; + height: 60px; + border: 2px solid #e6e6e6; + border-radius: 10px; + margin-left: 20px; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 20px; + font-size: 26px; + color: $color_font_two; + .miconfont{ + font-size: 30px; + } + } + .upload_image{ + flex:1; + } + } + .btns_con{ + width: 100%; + bottom:0; + box-sizing: border-box; + margin-top: 50px; + .btns_two{ + display: flex; + height: 82px; + // border: 1PX solid #007aff; + font-size: $font_size_big; + border-radius: 40px; + margin-bottom: 20px; + .rest_btn{ + flex:1; + border: 1PX solid #007aff; + border-radius: 40px 0 0 40px; + text-align: center; + line-height: 82px; + color: $color_main; + background-color: #fff; + + } + .verify_btn{ + flex:1; + border-radius: 0 40px 40px 0; + background: #007aff; + text-align: center; + line-height: 82px; + color: #fff; + } + } + } +} \ No newline at end of file diff --git a/src/pages/order/components/applyRefund/index.tsx b/src/pages/order/components/applyRefund/index.tsx new file mode 100644 index 0000000..481d03f --- /dev/null +++ b/src/pages/order/components/applyRefund/index.tsx @@ -0,0 +1,57 @@ +import Popup from "@/components/popup"; +import TextareaEnhance from "@/components/textareaEnhance"; +import { ScrollView, Text, View } from "@tarojs/components"; +import { memo, useCallback, useState } from "react"; +import ReasonPopup from "../reasonPopup"; +import styles from './index.module.scss' +import classnames from "classnames"; + +type Param = { + show?: true|false, + onClose?: () => void +} +export default memo(({show, onClose}:Param) => { + + + const getOtherReason = useCallback(() => { + + }, []) + + const onSubmit = (val) => { + + } + + //显示说明 + const [showReason, setShowReason] = useState(false) + const closeReason = useCallback(() => { + setShowReason(false) + }, []) + + const onShowReason = () => { + setShowReason(true) + } + + return ( + <> + + + + 退款说明 + onShowReason()}> + 请选择 + + + + + + + onSubmit(1)}>取消 + onSubmit(2)}>确认 + + + + + + + ) +}) \ No newline at end of file diff --git a/src/pages/order/components/kindList/index copy.tsx b/src/pages/order/components/kindList/index copy.tsx new file mode 100644 index 0000000..8247927 --- /dev/null +++ b/src/pages/order/components/kindList/index copy.tsx @@ -0,0 +1,190 @@ +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) { + let total_number = order?.sale_mode == 0?order?.total_number:(order?.total_number/100) + return `${order?.total_fabrics}种面料，${order?.total_colors}种颜色，共${total_number}${order?.unit}` + } + }, [order]) + + const { + SaleOrderStatusBooking, // 待接单 + SaleOrderStatusArranging, // 配布中 + SaleOrderStatusArranged, // 已配布 + SaleOrderStatusWaitingPayment, // 待付款 + SaleOrderStatusWaitingDelivery, // 待发货 + SaleOrderStatusWaitingReceipt, // 待收货 + SaleOrderStatusAlreadyReceipt, // 已收货 + SaleOrderStatusComplete, // 已完成 + SaleOrderStatusRefund, // 已退款 + SaleOrderStatusCancel, // 已取消 + SaleorderstatusWaitingPrePayment // 预付款 + } = ORDER_STATUS + + //金额列表枚举 + const priceList = [ + { + id:1, + value:[SaleorderstatusWaitingPrePayment.value, SaleOrderStatusBooking.value, SaleOrderStatusArranging.value, ], + label:'预估金额', + field: 'estimate_amount' + }, + { + id:2, + value:[SaleorderstatusWaitingPrePayment.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]) + + //金额展示剪板 + const cutPriceConDom = useMemo(() => { + if(!order) return + return + }, [order]) + + const showPriceAll = useMemo(() => { + if(order?.sale_mode == 1) { + return cutPriceConDom //剪板 + } else { + return priceConDom //大货 + } + }, [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()} + + + + })} + + + }) + } + + {showPriceAll} + + + + ) +}) \ No newline at end of file diff --git a/src/pages/order/components/kindList/index.module.scss b/src/pages/order/components/kindList/index.module.scss index be8f53f..2c4b957 100644 --- a/src/pages/order/components/kindList/index.module.scss +++ b/src/pages/order/components/kindList/index.module.scss @@ -40,14 +40,13 @@ .order_list_item { display: flex; - &:nth-child(2) { + &:nth-child(n + 2) { margin-top: 30px; } .order_list_item_img{ width: 126px; height: 126px; border-radius: 20px; - background-color: red; } .order_list_item_con{ display: flex; @@ -67,9 +66,14 @@ font-size: $font_size; margin-bottom: 15px; } - .order_list_item_price{ + .order_list_item_price, .order_list_item_price_dg{ font-size: 26px; color: $color_font_three; + display: flex; + align-items: center; + Text{ + padding-left: 13px; + } } } .order_list_item_count{ diff --git a/src/pages/order/components/kindList/index.tsx b/src/pages/order/components/kindList/index.tsx index e93be35..185a3b9 100644 --- a/src/pages/order/components/kindList/index.tsx +++ b/src/pages/order/components/kindList/index.tsx @@ -1,6 +1,7 @@ import { ORDER_STATUS } from "@/common/enum" -import { formatHashTag, formatPriceDiv } from "@/common/fotmat" -import { View } from "@tarojs/components" +import { formatHashTag, formatPriceDiv, formatWeightDiv } from "@/common/fotmat" +import LabAndImg from "@/components/LabAndImg" +import { Text, View } from "@tarojs/components" import { memo, useCallback, useMemo } from "react" import EstimatedAmount from "../estimatedAmount" import styles from './index.module.scss' @@ -15,7 +16,7 @@ type OrderParam = { total_fabrics: number, total_number: number, status: number, //订单状态 - total_sale_price: number, //销售金额 + total_sale_price: number, //合计金额 total_should_collect_money: number, //应收金额 total_weight_error_discount: number, //空差优惠 the_previous_status: number, //取消订单时的订单状态 @@ -23,7 +24,7 @@ type OrderParam = { } type Param = { - order: OrderParam, + order: OrderParam, comfirm?: boolean //是否是确认订单页面使用 } @@ -39,8 +40,10 @@ export default memo(({order, comfirm = false}:Param) => { //数量格式 const numText = useMemo(() => { - if(order) - return `${order?.total_fabrics}种面料，${order?.total_colors}种颜色，共${order?.total_number}${order?.unit}` + if(order) { + let total_number = order?.sale_mode == 0?order?.total_number:(order?.total_number/100) + return `${order?.total_fabrics}种面料，${order?.total_colors}种颜色，共${total_number}${order?.unit}` + } }, [order]) const { @@ -54,19 +57,21 @@ export default memo(({order, comfirm = false}:Param) => { SaleOrderStatusComplete, // 已完成 SaleOrderStatusRefund, // 已退款 SaleOrderStatusCancel, // 已取消 + SaleorderstatusWaitingPrePayment, // 预付款 + SaleOrderStatusTaking //提货 } = ORDER_STATUS //金额列表枚举 const priceList = [ { id:1, - value:[SaleOrderStatusBooking.value, SaleOrderStatusArranging.value], + value:[SaleorderstatusWaitingPrePayment.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], + value:[SaleOrderStatusTaking.value, SaleOrderStatusArranged.value, SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value], label:'合计金额', field: 'total_sale_price' }, @@ -84,45 +89,60 @@ export default memo(({order, comfirm = false}:Param) => { }, { id:5, - value:[SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value], + value:[SaleOrderStatusTaking.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 showPrice = (item) => { + if (item.id == 2) { + //合计金额 (剪板特殊请情况) + return (item.value.includes(order.status)|| order.sale_mode == 1) + } else if (item.id == 3) { + //空差优惠只有大货才有 + return (item.value.includes(order.status) && order.sale_mode == 1 ) + } else { + return (item.value.includes(order.status) && order.sale_mode != 1 ) + } + + } + //订单流程金额展示 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)&&} - }) - } - - ) - } + return ( + <> + { + priceList.map(item => { + return <>{showPrice(item)&&} + }) + } + + ) + }, [order]) + + //确认订单金额展示 + const comfirmPriceConDom = useMemo(() => { + if(!order) return + let item = order.sale_mode == 1?priceList[1]:priceList[0] + return + }, [order]) + + //金额展示 + const showPriceConDom = useMemo(() => { + return comfirm?comfirmPriceConDom:priceConDom + }, [order]) + + + //散剪大约重量 + const aboutWeight = useCallback((weight) => { + if(order.sale_mode == 2 ) { + let showWeight = [SaleorderstatusWaitingPrePayment.value, SaleOrderStatusBooking.value, SaleOrderStatusArranging.value].includes(order.status) + return showWeight?; ≈{formatWeightDiv(weight)}kg:<> + } + return <> }, [order]) return ( @@ -140,11 +160,17 @@ export default memo(({order, comfirm = false}:Param) => { {item?.product_colors?.map(colorItem => { return - + + + {colorItem.code + ' ' + colorItem.name} - ¥{standardPrice(colorItem.sale_price)} + + ¥{standardPrice(colorItem.sale_price)} + {aboutWeight(colorItem.estimate_weight)} + + ×{formatCount(colorItem)}{order.unit} @@ -158,7 +184,7 @@ export default memo(({order, comfirm = false}:Param) => { }) } - {priceConDom} + {showPriceConDom} diff --git a/src/pages/order/components/orderState/index.module.scss b/src/pages/order/components/orderState/index.module.scss index 90dbcbb..0cc33d6 100644 --- a/src/pages/order/components/orderState/index.module.scss +++ b/src/pages/order/components/orderState/index.module.scss @@ -15,7 +15,6 @@ } .order_status_item{ position: relative; - padding-left: 50px; &:nth-last-child(n+2) { padding-bottom: 30px; } @@ -44,6 +43,7 @@ .order_status_content{ display: flex; align-items: center; + padding: 0 30px; .order_status_title{ color: $color_font_two; font-size: $font_size; @@ -75,6 +75,24 @@ .order_status_des_select{ color: $color_font_one; } + .pay_time{ + height: 56px; + background: #f6f6f6; + border-radius: 20px; + color: #3C3C3C; + font-size: 24px; + display: flex; + align-items: center; + justify-content: center; + font-weight: 700; + margin-top: 20px; + text{ + font-size: 28px; + color: $color_main; + padding: 0 10px; + + } + } } .more{ width: 100%; @@ -102,4 +120,20 @@ top: -10px; right: -10px; } + .refresh{ + position: absolute; + top: 23px; + right: 20px; + display: flex; + color: #707070; + display: flex; + align-items: center; + + .mconfont{ + font-size: 30px; + } + .refresh_text{ + font-size: 23px; + } + } } \ No newline at end of file diff --git a/src/pages/order/components/orderState/index.tsx b/src/pages/order/components/orderState/index.tsx index 18ac43d..b08861d 100644 --- a/src/pages/order/components/orderState/index.tsx +++ b/src/pages/order/components/orderState/index.tsx @@ -1,42 +1,59 @@ import { Image, Text, View } from "@tarojs/components" -import { memo, useMemo, useState } from "react" +import { memo, useEffect, useMemo, useRef, 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"; +import { ORDER_STATUS, PAYMENT_METHOD, PAYMENT_METHOD_PARAM } from "@/common/enum"; +import * as dayjs from 'dayjs' - - -type Param = { - list: { - status: string, - time: string, - tag: string, - desc: string - }[], - payment_method: 0|PAYMENT_METHOD_PARAM, - +type List = { + status: string, + time: string, + tag: string, + desc: string, + expire_time: string } -//支付方式枚举 -const { - PaymentMethodAccountPeriod, - PaymentMethodCashOnDelivery, -} = PAYMENT_METHOD +type Param = { + onRefresh?: () => void, + orderInfo?: { + logistics_details:List[], //订单状态列表 + payment_method: 0|PAYMENT_METHOD_PARAM, //支付方式 + status: number, //订单状态 + } +} -export default memo(({list = [], payment_method = 0}:Param) => { + + +export default memo(({orderInfo = {logistics_details: [],payment_method: 0, status: 0}, onRefresh}:Param) => { const [showMore, setShowMore] = useState(false) const changeMore = () => { setShowMore(() => !showMore) } const dataList = useMemo(() => { - return list.reverse() - }, [list]) + return orderInfo.logistics_details?orderInfo?.logistics_details.reverse():[] + }, [orderInfo.logistics_details]) + //订单状态枚举 + const {SaleorderstatusWaitingPrePayment} = ORDER_STATUS + + //支付方式枚举 + const { + PaymentMethodAccountPeriod, + PaymentMethodCashOnDelivery, + } = PAYMENT_METHOD + + //获取预付款最后时间 + const endTime = useMemo(() => { + if(orderInfo.status == SaleorderstatusWaitingPrePayment.value && orderInfo.logistics_details.length > 0) { + return orderInfo.logistics_details[0].expire_time + } + return '' + }, [orderInfo]) return ( <> - {(dataList.length > 0)&& + {(dataList?.length > 0)&& {dataList.map((item, index) => {(dataList.length > 1)&&} @@ -44,9 +61,9 @@ export default memo(({list = [], payment_method = 0}:Param) => { {item.status} {formatDateTime(item.time)} - {/* {item.tag} */} {item.desc} + {(orderInfo.status == SaleorderstatusWaitingPrePayment.value)&&} )} {(dataList.length > 2) && changeMore()}> @@ -54,10 +71,62 @@ export default memo(({list = [], payment_method = 0}:Param) => { } - {(payment_method == PaymentMethodCashOnDelivery.value)&&} - {(payment_method == PaymentMethodAccountPeriod.value)&&} + {(orderInfo.payment_method == PaymentMethodCashOnDelivery.value)&&} + {(orderInfo.payment_method == PaymentMethodAccountPeriod.value)&&} + {(orderInfo.status == SaleorderstatusWaitingPrePayment.value)&& + + 刷新 + } } ) -}) \ No newline at end of file +}) + +//倒计时 +const CountDown = ({endTime = '', onFinish}:{endTime:string, onFinish?:() => void}) => { + const [showTime, setShowTime] = useState('') + const timeObj:any = useRef() + useEffect(() => { + if(endTime) { + clearInterval(timeObj.current) + timeObj.current = setInterval(() => { + count_down() + }, 1000) + } + return () => { + clearInterval(timeObj.current) + } + }, [endTime]) + const count_down = () => { + var startData = dayjs(); + var endDate = dayjs(endTime); + if(startData >= endDate) { + clearInterval(timeObj.current) + onFinish?.() + setShowTime(() => '00:00:00') + return false + } + var _dd = endDate.diff(startData,'day'); + var _hh = endDate.diff(startData,'hour'); + var _mm = endDate.diff(startData,'minute'); + var _ss = endDate.diff(startData,'second'); + // 转换 + var hh = _hh - (_dd*24); + var mm = _mm - (_hh*60); + var ss = _ss - (_mm*60); + // 格式化 + var DD = ('00'+_dd).slice(-2); + var HH = ('00'+hh).slice(-2); + var MM = ('00'+mm).slice(-2); + var SS = ('00'+ss).slice(-2); + setShowTime(() => ` ${HH}:${MM}:${SS}`) + } + return ( + <> + + 剩{showTime||'--:--:--'}支付关闭，订单自动取消 + + + ) +} \ No newline at end of file diff --git a/src/pages/order/components/payment/index.module.scss b/src/pages/order/components/payment/index.module.scss index 340b0ed..0f16e80 100644 --- a/src/pages/order/components/payment/index.module.scss +++ b/src/pages/order/components/payment/index.module.scss @@ -35,9 +35,9 @@ $top:190px; 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)); + // 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: ''; diff --git a/src/pages/order/components/payment/index.tsx b/src/pages/order/components/payment/index.tsx index 86d4306..303b62f 100644 --- a/src/pages/order/components/payment/index.tsx +++ b/src/pages/order/components/payment/index.tsx @@ -8,26 +8,34 @@ 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 { GetOrderPayApi, SubmitOrderPayApi, GetPrepayOrderPayApi, SubmitPrepayOrderPayApi } from "@/api/orderPay"; import { formatPriceDiv } from "@/common/fotmat"; import {alert} from "@/common/common" -import { PAYMENT_METHOD, PAYMENT_METHOD_PARAM } from "@/common/enum"; +import { ORDER_STATUS, PAYMENT_METHOD, PAYMENT_METHOD_PARAM } from "@/common/enum"; type Param = { show?: true|false, onClose?: () => void, onSubmitSuccess?: () => void, //支付成功 - orderInfo?: OrderInfo + orderInfo?: OrderInfo, } type OrderInfo = { - orderId: number, //应付单id - payment_method: 0|PAYMENT_METHOD_PARAM //支付方式 + should_collect_order_id?: number, //应付单id + pre_collect_order_id?: number, //预付单id + status?: number, //订单状态 + payment_method?: 0|PAYMENT_METHOD_PARAM //支付方式 + sale_mode?: number //订单类型 0：大货 1剪板 2散剪 } type PayStatus = 1|2|3|4|5|null //1:预存款， 2:账期，3：线下汇款， 4：扫码支付, 5:货到付款 export default memo(({show = false, onClose, orderInfo, onSubmitSuccess}:Param) => { + //支付方式枚举 + const {PaymentMethodPreDeposit, PaymentMethodAccountPeriod, PaymentMethodCashOnDelivery} = PAYMENT_METHOD + //订单状态枚举 + const {SaleorderstatusWaitingPrePayment} = ORDER_STATUS + //提交参数 const [submitData, setSubmitData] = useState<{id:number, payment_method: PayStatus}>({ id:0, @@ -38,7 +46,7 @@ export default memo(({show = false, onClose, orderInfo, onSubmitSuccess}:Param) const [offlinePayShow, setofflinePayShow] = useState(false) const onShowOfflinePay = () => { setofflinePayShow(true) - onClose?.() + // onClose?.() } //扫码支付 @@ -51,13 +59,22 @@ export default memo(({show = false, onClose, orderInfo, onSubmitSuccess}:Param) //获取支付方式数据 const [payInfo, setPayInfo] = useState() const {fetchData: orderFetchData} = GetOrderPayApi() + const {fetchData: prepayOrderFetchData} = GetPrepayOrderPayApi() const getOrderPay = async () => { - let {data} = await orderFetchData({id: orderInfo?.orderId}) - setPayInfo(() => data) + if(orderInfo&&orderInfo.should_collect_order_id) { + //有应收单id时用应收单获取数据 + let {data} = await orderFetchData({id: orderInfo?.should_collect_order_id}) + setPayInfo(() => data) + } else { + //用预付单id获取支付信息 + let {data} = await prepayOrderFetchData({id: orderInfo?.pre_collect_order_id}) + setPayInfo(() => data) + } } useEffect(() => { - if(show&&orderInfo?.orderId) { - setSubmitData((val) => ({...val, id:orderInfo.orderId})) + if(show&&orderInfo&&(orderInfo?.should_collect_order_id||orderInfo?.pre_collect_order_id)) { + let id = orderInfo.should_collect_order_id||orderInfo.pre_collect_order_id + setSubmitData((val) => ({...val, id:id as number})) getOrderPay() } }, [show, orderInfo]) @@ -73,14 +90,20 @@ export default memo(({show = false, onClose, orderInfo, onSubmitSuccess}:Param) } //提交支付 - const {fetchData: submitFetchData} = SubmitOrderPayApi() + const {fetchData: submitFetchData} = SubmitOrderPayApi() //应收单提交 + const {fetchData: submitPrepayOrderFetchData} = SubmitPrepayOrderPayApi() //预付单提交 const submitPay = async () => { if(submitData.payment_method === null) { alert.error('请选择支付方式') return false } alert.loading('正在支付') - let res = await submitFetchData(submitData) + let res:any = null + if(orderInfo?.should_collect_order_id) { + res = await submitFetchData(submitData) + } else { + res = await submitPrepayOrderFetchData(submitData) + } if(res.success) { alert.success('支付成功') onSubmitSuccess?.() @@ -97,6 +120,20 @@ export default memo(({show = false, onClose, orderInfo, onSubmitSuccess}:Param) ) }, [payInfo]) + //是否显示七天账期 + const show_account_payment = useMemo(() => { + console.log('orderInfo?.status::',orderInfo) + //剪板合散剪不显示 + if(orderInfo?.sale_mode != 0) return false + //支付方式是账期支付,不显示 + if(orderInfo?.payment_method == PaymentMethodAccountPeriod.value) return false + //支付方式是货到付款,不显示 + if(orderInfo?.payment_method == PaymentMethodCashOnDelivery.value) return false + //订单状态是预付款,不显示 + if(orderInfo?.status == SaleorderstatusWaitingPrePayment.value) return false + return true + }, [orderInfo]) + //账期 const account_peyment = useMemo(() => { const price = payInfo?.should_collect_money - payInfo?.amount_paid @@ -105,8 +142,9 @@ export default memo(({show = false, onClose, orderInfo, onSubmitSuccess}:Param) ) }, [payInfo]) - //支付方式枚举 - const {PaymentMethodPreDeposit, PaymentMethodAccountPeriod} = PAYMENT_METHOD + //选择改变 + const changeSelect = () => { + } return ( @@ -133,7 +171,7 @@ export default memo(({show = false, onClose, orderInfo, onSubmitSuccess}:Param) - + @@ -143,13 +181,12 @@ export default memo(({show = false, onClose, orderInfo, onSubmitSuccess}:Param) advanceSelectData(PaymentMethodPreDeposit.value)} onClose={() => advanceSelectData(null)}/> - {(orderInfo?.payment_method != PaymentMethodAccountPeriod.value)&& + {show_account_payment&& {payInfo?.account_period}天账期 - {/* 可用额度 ¥{formatPriceDiv(payInfo?.account_period_credit_available_line)} */} {account_peyment} periodSelectData(PaymentMethodAccountPeriod.value)} onClose={() => periodSelectData(null)}/> diff --git a/src/pages/order/components/reasonPopup/index.module.scss b/src/pages/order/components/reasonPopup/index.module.scss new file mode 100644 index 0000000..eba26cd --- /dev/null +++ b/src/pages/order/components/reasonPopup/index.module.scss @@ -0,0 +1,27 @@ +.reason_return_con{ + height: 50vh; + .reason_title{ + padding: 10px 20px 0 20px; + height: 60px; + border-bottom: 1PX solid #F3F3F3; + box-sizing: border-box; + Text{ + font-size: 26px; + border-bottom: 3px solid #000; + padding: 10px; + font-weight: 400; + } + + } + .reason_scroll{ + height: calc(100% - 70px); + .reason_list{ + font-size: 26px; + padding: 30px 20px 0 20px; + color: #707070; + .reason_item{ + margin-bottom: 36px; + } + } + } +} \ No newline at end of file diff --git a/src/pages/order/components/reasonPopup/index.tsx b/src/pages/order/components/reasonPopup/index.tsx new file mode 100644 index 0000000..1230787 --- /dev/null +++ b/src/pages/order/components/reasonPopup/index.tsx @@ -0,0 +1,37 @@ +import Popup from "@/components/popup"; +import { ScrollView, Text, View } from "@tarojs/components"; +import { memo, useMemo } from "react"; +import styles from './index.module.scss' + +//原因选择 +type ReasonInfoParam = { + show?: boolean, + onClose?: () => void, +} +export default memo(({show = false, onClose}: ReasonInfoParam) => { + return ( + + + 退款说明 + + + 完好无损带原标签 + 完好无损带原标签 + 完好无损带原标签 + 完好无损带原标签 + 完好无损带原标签 + 完好无损带原标签 + 完好无损带原标签 + 完好无损带原标签 + 完好无损带原标签 + 完好无损带原标签 + 完好无损带原标签 + 完好无损带原标签 + 完好无损带原标签 + 完好无损带原标签 + + + + + ) +}) \ No newline at end of file diff --git a/src/pages/order/components/remark/index.tsx b/src/pages/order/components/remark/index.tsx index 14d981b..11d870f 100644 --- a/src/pages/order/components/remark/index.tsx +++ b/src/pages/order/components/remark/index.tsx @@ -1,20 +1,25 @@ import Popup from "@/components/popup" import { Textarea, View } from "@tarojs/components" -import { useCallback, useState } from "react" +import { useCallback, useEffect, useState } from "react" import styles from './index.module.scss' type Param = { onBlur?: (val:any) => void onSave?: (val: string) => void + defaultValue?: string } -export default ({onBlur, onSave}:Param) => { +export default ({onBlur, onSave, defaultValue = ''}:Param) => { const [descData, setDescData] = useState({ number: 0, value: '', count: 200 }) - const getDesc = useCallback((e) => { - let value = e.detail.value + + useEffect(() => { + getDesc(defaultValue) + }, [defaultValue]) + + const getDesc = useCallback((value) => { let res = value if(value.length > descData.count) { res = value.slice(0, descData.count) @@ -29,7 +34,7 @@ export default ({onBlur, onSave}:Param) => { 编辑备注 - + {descData.number}/{descData.count} setSave()}>保存 diff --git a/src/pages/order/components/submitOrderBtn/index.module.scss b/src/pages/order/components/submitOrderBtn/index.module.scss index c5ac9ed..7330951 100644 --- a/src/pages/order/components/submitOrderBtn/index.module.scss +++ b/src/pages/order/components/submitOrderBtn/index.module.scss @@ -1,11 +1,9 @@ .order_price{ display: flex; align-items: center; - justify-content: space-between; + // 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; @@ -41,7 +39,7 @@ } } .emphasis{ - font-weight: 700; + // font-weight: 700; } .order_price_num{ color: $color_main; @@ -51,7 +49,7 @@ font-size: $font_size_min; } &:nth-child(2) { - font-size: 26px; + font-size: 44px; } &:nth-child(3) { font-size: $font_size_medium; @@ -61,7 +59,7 @@ .emphasis_num{ text{ &:nth-child(2) { - font-size: $font_size_big; + font-size: 44px; } } } diff --git a/src/pages/order/components/submitOrderBtn/index.tsx b/src/pages/order/components/submitOrderBtn/index.tsx index db9b432..5e083c3 100644 --- a/src/pages/order/components/submitOrderBtn/index.tsx +++ b/src/pages/order/components/submitOrderBtn/index.tsx @@ -4,10 +4,12 @@ import {formatKbPrice} from '@/common/common' import classnames from "classnames"; import styles from './index.module.scss' type Param = { - style?: Object, - number?: number + style?: Object, + number?: number, //数量 + priceTitle: string //描述 + } -export default memo(({style, number = 0}:Param) => { +export default memo(({style, number = 0, priceTitle = ''}:Param) => { const priceDom = useCallback(() => { let res = number.toFixed(2).split('.') let int_num = parseInt(res[0]) + '' @@ -24,11 +26,7 @@ export default memo(({style, number = 0}:Param) => { <> - 应付金额 - - - {/* 123123123121212312312312312 */} - + {priceTitle}： {priceDom()} diff --git a/src/pages/order/cutOrder/index.config.ts b/src/pages/order/cutOrder/index.config.ts new file mode 100644 index 0000000..030cb10 --- /dev/null +++ b/src/pages/order/cutOrder/index.config.ts @@ -0,0 +1,6 @@ +export default { + navigationBarTitleText: '订单详情', + enablePullDownRefresh: true, + backgroundTextStyle: 'dark', + enableShareAppMessage: true, +} diff --git a/src/pages/order/cutOrder/index.module.scss b/src/pages/order/cutOrder/index.module.scss new file mode 100644 index 0000000..87ea5e5 --- /dev/null +++ b/src/pages/order/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/order/cutOrder/index.tsx b/src/pages/order/cutOrder/index.tsx new file mode 100644 index 0000000..c1b1bee --- /dev/null +++ b/src/pages/order/cutOrder/index.tsx @@ -0,0 +1,228 @@ +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 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/order/index.module.scss b/src/pages/order/index.module.scss index a032fbe..55096de 100644 --- a/src/pages/order/index.module.scss +++ b/src/pages/order/index.module.scss @@ -62,21 +62,15 @@ color: $color_font_two; } } - .submit_order{ - display: flex; + .submit_order_con{ position: fixed; bottom: 0; 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); 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; diff --git a/src/pages/order/index.tsx b/src/pages/order/index.tsx index 3c0304f..fae2191 100644 --- a/src/pages/order/index.tsx +++ b/src/pages/order/index.tsx @@ -4,19 +4,20 @@ import { CancelOrderApi } from "@/api/order"; import { GetOrderPayApi } from "@/api/orderPay"; +import { AddShoppingCartApi } from "@/api/shopCart"; import { alert, goLink } from "@/common/common"; import { ORDER_STATUS } from "@/common/enum"; -import { formatDateTime, formatPriceDiv } from "@/common/fotmat"; +import { formatDateTime, formatImgUrl, formatPriceDiv } from "@/common/fotmat"; import OrderBtns from "@/components/orderBtns"; import Popup from "@/components/popup"; import SearchInput from "@/components/searchInput"; +import ShopCart from "@/components/shopCart"; 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 ApplyAfterSales from "./components/applyAfterSales"; +import ApplyRefund from "./components/applyRefund"; import KindList from "./components/kindList"; import OrderState from "./components/orderState"; import Payment from "./components/payment"; @@ -40,7 +41,8 @@ import styles from './index.module.scss' setOrderDetail(res.data) setOrderRemark(res.data.remark) } - Taro.stopPullDownRefresh() + Taro.stopPullDownRefresh() + Taro.hideToast() } //监听获取到的数据 @@ -87,16 +89,19 @@ import styles from './index.module.scss' }) } - //格式化初始地址 + //初始地址数据 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 + phone: orderDetail?.target_user_phone, + shipment_mode: orderDetail?.shipment_mode, + id: orderDetail?.id, + sale_mode: orderDetail?.sale_mode, + status: orderDetail?.status } }, [orderDetail]) @@ -116,18 +121,17 @@ import styles from './index.module.scss' 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 addressInfoDetailData = useMemo(() => { + return {orderId:orderDetail?.id, shipment_mode:orderDetail?.shipment_mode, status: orderDetail?.status} + }, [orderDetail]) + //打开地址修改 const addressRef = useRef(null) @@ -143,15 +147,20 @@ import styles from './index.module.scss' //获取底部按钮点击, 获取按钮状态 const orderStateClick = useCallback((val) => { - console.log('val::', val) - if(val == 1) { + console.log('123456789',val) + if(val == 1 || val == 6) { //取消订单 getSaleOrderPreView() - } - if(val == 2) { + }else if(val == 2) { //待付款 toPay() + } else if(val == 3) { + setRefundShow(true) + } else if(val == 7) { + //再购 + addShopCart() } + }, [orderDetail]) //页面下拉刷新 @@ -178,22 +187,73 @@ import styles from './index.module.scss' settle_mode: orderDetail?.settle_mode, actual_amount: orderDetail?.actual_amount, //实付金额 wait_pay_amount: orderDetail?.wait_pay_amount, //待付金额 + sale_mode: orderDetail?.sale_mode, //订单类型 } }, [orderDetail]) //订单状态枚举 const {SaleOrderStatusCancel} = ORDER_STATUS + //刷新页面 + const refresh = useCallback(() => { + alert.loading('刷新中') + getSaleOrderPreView() + }, [orderDetail]) + + //退款申请 + const [refundShow, setRefundShow] = useState(false) + const applyRefundClose = useCallback(() => { + setRefundShow(false) + }, []) + + //查看物流 + const getLogistics = useCallback(() => { + const list = orderDetail?.delivery_appendix_url.map(item => { + return formatImgUrl(item) + }) + Taro.previewImage({ + current: list[0], // 当前显示 + urls: list // 需要预览的图片http链接列表 + }) + }, [orderDetail]) + //添加购物车 + const [showCart, setShowCart] = useState(false) + const {fetchData:addFetchData} = AddShoppingCartApi() + const addShopCart = async () => { + let color_list:{product_color_id: number, roll?: number, length?: number}[] = [] + orderDetail?.product_list.map(pitem => { + pitem?.product_colors.map(citem => { + if(orderDetail?.sale_mode == 0) { + return color_list.push({product_color_id: citem.id, roll: citem.roll}) + } else { + return color_list.push({product_color_id: citem.id, length: citem.length}) + } + }) + }) + const state = await addFetchData({ + sale_mode: orderDetail?.sale_mode, + color_list + }) + if(state.success) { + Taro.showToast({ + title:'已加入购物车' + }) + setShowCart(true) + } else { + Taro.showToast({ + icon:'none', + title: state.msg + }) + } + + } return ( - {/* - - */} - - - + + + @@ -219,14 +279,16 @@ import styles from './index.module.scss' } - {(orderDetail?.status != SaleOrderStatusCancel.value)&& + {(orderDetail?.status != SaleOrderStatusCancel.value)&& + } - setShowDesc(false)} > - getRemark(e)}/> + setShowDesc(false)}> + getRemark(e)} defaultValue={orderDetail?.remark}/> - - {/* */} + + + setShowCart(false)}/> ) diff --git a/src/pages/orderList/components/order/index.module.scss b/src/pages/orderList/components/order/index.module.scss index 85e1123..63a4e0a 100644 --- a/src/pages/orderList/components/order/index.module.scss +++ b/src/pages/orderList/components/order/index.module.scss @@ -42,6 +42,9 @@ border-radius: 0px 20px 0px 20px; } } + .product_con{ + margin-bottom: 20px; + } .product_title{ display: flex; align-items: center; diff --git a/src/pages/orderList/components/order/index.tsx b/src/pages/orderList/components/order/index.tsx index 7bff925..466bc5e 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 //待付金额 @@ -51,6 +55,7 @@ export default memo(({value, onClickBtn}: Param) => { orderId: value?.id, actual_amount: value?.actual_amount, //实付金额 wait_pay_amount: value?.wait_pay_amount, //待付金额 + sale_mode: value?.sale_mode, //订单类型 } }, [value]) @@ -75,7 +80,7 @@ export default memo(({value, onClickBtn}: Param) => { - + {value?.product_list[0].product_colors[0].code} @@ -99,7 +104,6 @@ export default memo(({value, onClickBtn}: Param) => { {`${value?.total_fabrics}种面料，${value?.total_colors}种颜色，共${value?.total_number}条`} - ) }) diff --git a/src/pages/orderList/index.tsx b/src/pages/orderList/index.tsx index dee8c57..982f9d2 100644 --- a/src/pages/orderList/index.tsx +++ b/src/pages/orderList/index.tsx @@ -12,6 +12,8 @@ import { dataLoadingStatus, getFilterData } from "@/common/util" import OrderStatusList from "./components/orderStatusList" import Payment from "../order/components/payment" import { ORDER_STATUS } from "@/common/enum" +import { AddShoppingCartApi } from "@/api/shopCart" +import ShopCart from "@/components/shopCart" export default () => { const {checkLogin} = useLogin() @@ -96,10 +98,21 @@ export default () => { //监听点击的按钮 const clickOrderBtn = useCallback(({status, orderInfo}) => { - if(status == 2) { + if(status == 1 || status == 6) { + getOrderList() + } else if(status == 2) { //去支付 - setPayOrderInfo({orderId:orderInfo.should_collect_order_id, payment_method:orderInfo.payment_method}) + console.log('orderInfo::',orderInfo) + setPayOrderInfo({ + should_collect_order_id: orderInfo.should_collect_order_id,//应付单id + pre_collect_order_id: orderInfo.pre_collect_order_id, //预付单id + status: orderInfo.status, //订单状态 + payment_method: orderInfo.payment_method //支付方式 + }) toPay() + } else if (status == 7) { + //购买 + addShopCart(orderInfo) } }, [orderData]) @@ -120,6 +133,38 @@ export default () => { closePayShow() }, []) + //添加购物车 + const [showCart, setShowCart] = useState(false) + const {fetchData:addFetchData} = AddShoppingCartApi() + const addShopCart = async (item) => { + let color_list:{product_color_id: number, roll?: number, length?: number}[] = [] + item?.product_list.map(pitem => { + pitem?.product_colors.map(citem => { + if(item?.sale_mode == 0) { + return color_list.push({product_color_id: citem.id, roll: citem.roll}) + } else { + return color_list.push({product_color_id: citem.id, length: citem.length}) + } + }) + }) + const state = await addFetchData({ + sale_mode: item?.sale_mode, + color_list + }) + if(state.success) { + Taro.showToast({ + title:'已加入购物车' + }) + setShowCart(true) + } else { + Taro.showToast({ + icon:'none', + title: state.msg + }) + } + + } + return ( @@ -128,12 +173,13 @@ export default () => { - + {orderData?.list.map(item => { return })} + setShowCart(false)}/> ) diff --git a/src/pages/salesAfter/components/addressInfoDetail/index.module.scss b/src/pages/salesAfter/components/addressInfoDetail/index.module.scss index 68e6171..82159da 100644 --- a/src/pages/salesAfter/components/addressInfoDetail/index.module.scss +++ b/src/pages/salesAfter/components/addressInfoDetail/index.module.scss @@ -1,12 +1,31 @@ +.address_main{ + margin-top: 20px; +} + +.address_title_tag{ + font-size: 24px; + color: #EE7500; + background: rgba(255,230,206,0.36); + border-radius: 20px 20px 0px 0px; + height: 56px; + display: flex; + align-items: center; + position: relative; + z-index: 999; + .miconfont { + font-size: 30px; + padding: 0 20px; + } +} + .order_address{ height: 178px; background: #ffffff; - border-radius: 20px; + border-radius: 0 0 20px 20px; display: flex; align-items: center; padding: 30px; box-sizing: border-box; - margin-top: 20px; position: relative; .order_address_icon{ font-size: 50px; @@ -26,87 +45,46 @@ .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; } + .address_text{ + word-break:break-all; + font-size: 28px; + font-weight: 700; + } } .order_address_text_name{ - + color: #707070; align-items: center; + display: flex; + margin-top: 20px; text{ &:nth-child(1) { - color: #000; - font-weight: 700; - font-size: $color_font_one; + font-size: $font_size_medium; margin-right: 40px; } &:nth-child(2) { - color: $color_font_one; + flex:1; font-size: $font_size_medium; } } } } .updateBtn{ - width:200px; - font-size: $font_size_min; - background-color: #F0F0F0; - height: 64px; - border-radius: 24px; + width:152px; + font-size: 28px; + height: 60px; 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; - } + border: 2px solid #dddddd; + border-radius: 36px; + text-align: center; + line-height: 60px; } - .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/salesAfter/components/addressInfoDetail/index.tsx b/src/pages/salesAfter/components/addressInfoDetail/index.tsx index 7290ae6..db4d5f3 100644 --- a/src/pages/salesAfter/components/addressInfoDetail/index.tsx +++ b/src/pages/salesAfter/components/addressInfoDetail/index.tsx @@ -1,122 +1,69 @@ -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 { AFTER_ORDER_STATUS } from "@/common/enum"; import { Text, View } from "@tarojs/components" import classnames from "classnames"; -import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useState } from "react"; +import {memo, useMemo} 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 +type Param = { + return_address?:string, + return_phone?: string, + onLogistics?: (val: number) => void, + stage?: number } +export default memo(({return_address = '', return_phone = '', onLogistics, stage}:Param) => { + const { + ReturnStageApplying, + ReturnStageWaitCheck, + ReturnStageChecked, + ReturnStageReturned, + ReturnStageCancel, + ReturnStageQualityCheckPendingRefund, + ReturnStageServiceOrderPendingRefund, + ReturnStageRejected + } = AFTER_ORDER_STATUS -export default memo(forwardRef(({onSelect, onChangeShipmentMode, defaultValue = null, orderId = 0, shipment_mode = 1}: Param, ref) => { - const [showAddressList, setShowAddressList] = useState(false) + //是否显示地址 + const showAddress = useMemo(() => { + return stage != ReturnStageApplying.value + }, [stage]) - useEffect(() => { - setUserInfo(() => defaultValue) - }, [defaultValue]) + //上传物流 + const upLogistics = useMemo(() => { + return stage == ReturnStageWaitCheck.value + }, [stage]) - const [userInfo, setUserInfo] = useState() + //查看物流 + const showLogistics = useMemo(() => { + return (stage == ReturnStageChecked.value || stage == ReturnStageQualityCheckPendingRefund.value) + }, [stage]) - //地址格式 - 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 {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) - setUserInfo(() => value) - } else { - alert.none(res.msg) - } - } return ( - - changeShow()}> - - - - {formatAddress} - {(receivingStatus == 2)&&} - - - {userInfo?.name} - {userInfo?.phone} + <> + {showAddress&& + + + 请按以下退货地址寄回货物并提供退货物流信息 + + + + + + {return_address} + + + 管理员 + {return_phone} + {upLogistics&& onLogistics?.(1)}> + 上传物流 + } + {showLogistics&& onLogistics?.(2)}> + 查看物流 + } + - - - onReceivingStatus(1,e)}>自提 - onReceivingStatus(2,e)}>物流 - - - - - setShowAddressList(false)}> - - 请选择收货地址 - - - - + } + ) -})) \ No newline at end of file +}) \ No newline at end of file diff --git a/src/pages/salesAfter/components/applyRecord/index.module.scss b/src/pages/salesAfter/components/applyRecord/index.module.scss new file mode 100644 index 0000000..ad1916d --- /dev/null +++ b/src/pages/salesAfter/components/applyRecord/index.module.scss @@ -0,0 +1,146 @@ +.apply_record_scroll{ + height: 70vh; +} +.apply_record_main{ + margin-top: 20px; + padding: 0 30px; + .kind_number{ + width: 100%; + padding: 20px; + box-sizing: border-box; + text{ + background-color: #F6F6F6; + border-radius: 10px; + font-size: $font_size_medium; + padding: 5px 0; + text-align: center; + width: 100%; + display: block; + color: $color_font_three; + } + } + .orders_list_con{ + + background-color: #fff; + border-radius: 20px; + padding: 20px; + .orders_return_title{ + font-size: 28px; + font-weight: 700; + padding-bottom: 20px; + } + .order_list{ + &:nth-child(n+2) { + margin-top: 45px; + } + .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_total{ + padding-top: 30px; + display: flex; + justify-content: space-between; + text{ + &:nth-child(1) { + font-size: 28px; + font-weight: 700; + } + &:nth-child(2) { + font-size: 32px; + font-weight: 700; + color: #007AFF; + } + } + } + .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/salesAfter/components/applyRecord/index.tsx b/src/pages/salesAfter/components/applyRecord/index.tsx new file mode 100644 index 0000000..2d48da6 --- /dev/null +++ b/src/pages/salesAfter/components/applyRecord/index.tsx @@ -0,0 +1,124 @@ +import { SaleOrderOrderDetailApi } from "@/api/salesAfterOrder"; +import { formatHashTag, formatPriceDiv } from "@/common/fotmat"; +import LabAndImg from "@/components/LabAndImg"; +import Popup from "@/components/popup"; +import { ScrollView, Text, View } from "@tarojs/components"; +import { memo, useCallback, useEffect, useMemo, useState } from "react"; +import styles from './index.module.scss' + +type Param = { + show?: true|false, + onClose?: () => void, + onSubmit?: () => void, + id?: number +} +export default memo(({show, onClose, onSubmit, id}:Param) => { + useEffect(() => { + if(show && id) getSaleOrderPreView() + }, [show, id]) + + //获取订单详情 + const [orderDetail, setOrderDetail] = useState() //获取到的原始数据 + const {fetchData: saleOrderOrderDetailData} = SaleOrderOrderDetailApi() + const getSaleOrderPreView = async () => { + if(id) { + let res = await saleOrderOrderDetailData({id: id}) + setOrderDetail(res.data) + } + Taro.stopPullDownRefresh() + } + //格式化数据格式 + 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, + stage: orderDetail.stage, //订单状态 + type: orderDetail.type, //退货or退款 + 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, //取消订单时的订单状态 + }) + } + + //监听获取到的数据 + useEffect(() => { + if(orderDetail) + formatData() + }, [orderDetail]) + + //对应数量 + const formatCount = useCallback((item) => { + return formatDetailOrder?.sale_mode == 0? item.roll : Number(item.length / 100) + }, [formatDetailOrder]) + //对应单价 + const standardPrice = useCallback(price => { + return formatPriceDiv(price).toLocaleString() + '/' + (formatDetailOrder?.sale_mode == 1?'m':'kg') + }, [formatDetailOrder]) + //数量格式 + const numText = useMemo(() => { + if(formatDetailOrder) + return `${formatDetailOrder?.total_fabrics}种面料，${formatDetailOrder?.total_colors}种颜色，共${formatDetailOrder?.total_number}${formatDetailOrder?.unit}` + }, [formatDetailOrder]) + + //整理颜色 + const labAndRgbAndUrl = useCallback((item) => { + return {lab:{...item?.lab}, rgb:{...item?.rgb}, texturl_url: item?.texturl_url} + }, []) + + return ( + <> + + {formatDetailOrder&& + {numText} + + + { + formatDetailOrder?.list?.map(item => { + return + + {formatDetailOrder.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)}{formatDetailOrder.unit} + ¥{formatPriceDiv(colorItem.estimate_amount).toLocaleString()} + + + + })} + + + }) + } + + 申请条数 + ×{orderDetail?.total_number} + + + + } + + + ) +}) \ No newline at end of file diff --git a/src/pages/salesAfter/components/kindList/index.module.scss b/src/pages/salesAfter/components/kindList/index.module.scss index be8f53f..de1171e 100644 --- a/src/pages/salesAfter/components/kindList/index.module.scss +++ b/src/pages/salesAfter/components/kindList/index.module.scss @@ -1,14 +1,17 @@ -.orders_list_title{ - padding: 20px 20px 10px 20px; - color: $color_font_two; - font-size: $font_size_medium; +.kindsList_main{ + margin-top: 20px; } .orders_list_con{ background-color: #fff; border-radius: 20px; padding: 20px; + .orders_return_title{ + font-size: 28px; + font-weight: 700; + padding-bottom: 20px; + } .order_list{ &:nth-child(n+2) { margin-top: 30px; @@ -47,7 +50,6 @@ width: 126px; height: 126px; border-radius: 20px; - background-color: red; } .order_list_item_con{ display: flex; @@ -96,6 +98,21 @@ } } } + .order_total{ + padding-top: 20px; + display: flex; + justify-content: space-between; + text{ + &:nth-child(1) { + font-size: 28px; + font-weight: 700; + } + &:nth-child(2) { + font-size: 24px; + font-weight: 700; + } + } + } .order_estimated_amount{ display: flex; align-items: flex-end; diff --git a/src/pages/salesAfter/components/kindList/index.tsx b/src/pages/salesAfter/components/kindList/index.tsx index e93be35..2cc8d3a 100644 --- a/src/pages/salesAfter/components/kindList/index.tsx +++ b/src/pages/salesAfter/components/kindList/index.tsx @@ -1,6 +1,7 @@ import { ORDER_STATUS } from "@/common/enum" import { formatHashTag, formatPriceDiv } from "@/common/fotmat" -import { View } from "@tarojs/components" +import LabAndImg from "@/components/LabAndImg" +import { Text, View } from "@tarojs/components" import { memo, useCallback, useMemo } from "react" import EstimatedAmount from "../estimatedAmount" import styles from './index.module.scss' @@ -14,7 +15,8 @@ type OrderParam = { total_colors: number, total_fabrics: number, total_number: number, - status: number, //订单状态 + stage: number, //订单状态 + type: 1|2, //1退货， 2退款 total_sale_price: number, //销售金额 total_should_collect_money: number, //应收金额 total_weight_error_discount: number, //空差优惠 @@ -43,48 +45,60 @@ export default memo(({order, comfirm = false}:Param) => { 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 { + // SaleOrderStatusBooking, // 待接单 + // SaleOrderStatusArranging, // 配布中 + // SaleOrderStatusArranged, // 已配布 + // SaleOrderStatusWaitingPayment, // 待付款 + // SaleOrderStatusWaitingDelivery, // 待发货 + // SaleOrderStatusWaitingReceipt, // 待收货 + // SaleOrderStatusAlreadyReceipt, // 已收货 + // SaleOrderStatusComplete, // 已完成 + // SaleOrderStatusRefund, // 已退款 + // SaleOrderStatusCancel, // 已取消 + // } = ORDER_STATUS //金额列表枚举 const priceList = [ { id:1, - value:[SaleOrderStatusBooking.value, SaleOrderStatusArranging.value], - label:'预估金额', + 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:'合计金额', + value:[], + label:'扣款金额', field: 'total_sale_price' }, { id:3, - value:[SaleOrderStatusWaitingPayment.value, SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value], - label:'空差优惠', + value:[], + label:'其他扣款', field: 'total_weight_error_discount' }, { id:4, - value:[ SaleOrderStatusWaitingPayment.value], - label:'应付金额', + value:[], + label:'应退金额', field: 'total_should_collect_money' }, { id:5, - value:[SaleOrderStatusWaitingDelivery.value, SaleOrderStatusWaitingReceipt.value, SaleOrderStatusAlreadyReceipt.value, SaleOrderStatusComplete.value, SaleOrderStatusRefund.value, SaleOrderStatusCancel.value], + value:[], + label:'退款金额', + field: 'total_should_collect_money' + }, + { + id:6, + value:[], + label:'退款去向', + field: 'actual_amount' + }, + { + id:7, + value:[], label:'实付金额', field: 'actual_amount' } @@ -97,38 +111,26 @@ export default memo(({order, comfirm = false}:Param) => { 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)&&} - }) - } - - ) - } + return ( + <> + { + priceList.map(item => { + return <>{showPrice(item, order?.stage)&&} + }) + } + + ) }, [order]) + + //整理颜色 + const labAndRgbAndUrl = useCallback((item) => { + return {lab:{...item?.lab}, rgb:{...item?.rgb}, texturl_url: item?.texturl_url} + }, []) return ( - <> - {numText} + + {order?.type == 1?'退货信息':'退款信息'} { order?.list?.map(item => { return @@ -140,7 +142,9 @@ export default memo(({order, comfirm = false}:Param) => { {item?.product_colors?.map(colorItem => { return - + + + {colorItem.code + ' ' + colorItem.name} @@ -157,10 +161,11 @@ export default memo(({order, comfirm = false}:Param) => { }) } + 合计{numText} {priceConDom} - + ) }) \ No newline at end of file diff --git a/src/pages/salesAfter/components/orderState copy/index.module.scss b/src/pages/salesAfter/components/orderState copy/index.module.scss deleted file mode 100644 index 78bda44..0000000 --- a/src/pages/salesAfter/components/orderState copy/index.module.scss +++ /dev/null @@ -1,18 +0,0 @@ -.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/salesAfter/components/orderState copy/index.tsx b/src/pages/salesAfter/components/orderState copy/index.tsx deleted file mode 100644 index 58fec4d..0000000 --- a/src/pages/salesAfter/components/orderState copy/index.tsx +++ /dev/null @@ -1,14 +0,0 @@ -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/salesAfter/components/orderState/index.module.scss b/src/pages/salesAfter/components/orderState/index.module.scss index 90dbcbb..0cc33d6 100644 --- a/src/pages/salesAfter/components/orderState/index.module.scss +++ b/src/pages/salesAfter/components/orderState/index.module.scss @@ -15,7 +15,6 @@ } .order_status_item{ position: relative; - padding-left: 50px; &:nth-last-child(n+2) { padding-bottom: 30px; } @@ -44,6 +43,7 @@ .order_status_content{ display: flex; align-items: center; + padding: 0 30px; .order_status_title{ color: $color_font_two; font-size: $font_size; @@ -75,6 +75,24 @@ .order_status_des_select{ color: $color_font_one; } + .pay_time{ + height: 56px; + background: #f6f6f6; + border-radius: 20px; + color: #3C3C3C; + font-size: 24px; + display: flex; + align-items: center; + justify-content: center; + font-weight: 700; + margin-top: 20px; + text{ + font-size: 28px; + color: $color_main; + padding: 0 10px; + + } + } } .more{ width: 100%; @@ -102,4 +120,20 @@ top: -10px; right: -10px; } + .refresh{ + position: absolute; + top: 23px; + right: 20px; + display: flex; + color: #707070; + display: flex; + align-items: center; + + .mconfont{ + font-size: 30px; + } + .refresh_text{ + font-size: 23px; + } + } } \ No newline at end of file diff --git a/src/pages/salesAfter/components/orderState/index.tsx b/src/pages/salesAfter/components/orderState/index.tsx index 82ed17f..b08861d 100644 --- a/src/pages/salesAfter/components/orderState/index.tsx +++ b/src/pages/salesAfter/components/orderState/index.tsx @@ -1,42 +1,59 @@ import { Image, Text, View } from "@tarojs/components" -import { memo, useMemo, useState } from "react" +import { memo, useEffect, useMemo, useRef, 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"; +import { ORDER_STATUS, PAYMENT_METHOD, PAYMENT_METHOD_PARAM } from "@/common/enum"; +import * as dayjs from 'dayjs' - - -type Param = { - list: { - status: string, - time: string, - tag: string, - desc: string - }[], - payment_method: 0|PAYMENT_METHOD_PARAM, - +type List = { + status: string, + time: string, + tag: string, + desc: string, + expire_time: string } -//支付方式枚举 -const { - PaymentMethodAccountPeriod, - PaymentMethodCashOnDelivery, -} = PAYMENT_METHOD +type Param = { + onRefresh?: () => void, + orderInfo?: { + logistics_details:List[], //订单状态列表 + payment_method: 0|PAYMENT_METHOD_PARAM, //支付方式 + status: number, //订单状态 + } +} -export default memo(({list = [], payment_method = 0}:Param) => { + + +export default memo(({orderInfo = {logistics_details: [],payment_method: 0, status: 0}, onRefresh}:Param) => { const [showMore, setShowMore] = useState(false) const changeMore = () => { setShowMore(() => !showMore) } const dataList = useMemo(() => { - return list.reverse() - }, [list]) + return orderInfo.logistics_details?orderInfo?.logistics_details.reverse():[] + }, [orderInfo.logistics_details]) + //订单状态枚举 + const {SaleorderstatusWaitingPrePayment} = ORDER_STATUS + + //支付方式枚举 + const { + PaymentMethodAccountPeriod, + PaymentMethodCashOnDelivery, + } = PAYMENT_METHOD + + //获取预付款最后时间 + const endTime = useMemo(() => { + if(orderInfo.status == SaleorderstatusWaitingPrePayment.value && orderInfo.logistics_details.length > 0) { + return orderInfo.logistics_details[0].expire_time + } + return '' + }, [orderInfo]) return ( <> - {(dataList.length > 0)&& + {(dataList?.length > 0)&& {dataList.map((item, index) => {(dataList.length > 1)&&} @@ -44,9 +61,9 @@ export default memo(({list = [], payment_method = 0}:Param) => { {item.status} {formatDateTime(item.time)} - {/* {item.tag} */} {item.desc} + {(orderInfo.status == SaleorderstatusWaitingPrePayment.value)&&} )} {(dataList.length > 2) && changeMore()}> @@ -54,10 +71,62 @@ export default memo(({list = [], payment_method = 0}:Param) => { } - {(payment_method == PaymentMethodAccountPeriod.value)&&} - {(payment_method == PaymentMethodCashOnDelivery.value)&&} + {(orderInfo.payment_method == PaymentMethodCashOnDelivery.value)&&} + {(orderInfo.payment_method == PaymentMethodAccountPeriod.value)&&} + {(orderInfo.status == SaleorderstatusWaitingPrePayment.value)&& + + 刷新 + } } ) -}) \ No newline at end of file +}) + +//倒计时 +const CountDown = ({endTime = '', onFinish}:{endTime:string, onFinish?:() => void}) => { + const [showTime, setShowTime] = useState('') + const timeObj:any = useRef() + useEffect(() => { + if(endTime) { + clearInterval(timeObj.current) + timeObj.current = setInterval(() => { + count_down() + }, 1000) + } + return () => { + clearInterval(timeObj.current) + } + }, [endTime]) + const count_down = () => { + var startData = dayjs(); + var endDate = dayjs(endTime); + if(startData >= endDate) { + clearInterval(timeObj.current) + onFinish?.() + setShowTime(() => '00:00:00') + return false + } + var _dd = endDate.diff(startData,'day'); + var _hh = endDate.diff(startData,'hour'); + var _mm = endDate.diff(startData,'minute'); + var _ss = endDate.diff(startData,'second'); + // 转换 + var hh = _hh - (_dd*24); + var mm = _mm - (_hh*60); + var ss = _ss - (_mm*60); + // 格式化 + var DD = ('00'+_dd).slice(-2); + var HH = ('00'+hh).slice(-2); + var MM = ('00'+mm).slice(-2); + var SS = ('00'+ss).slice(-2); + setShowTime(() => ` ${HH}:${MM}:${SS}`) + } + return ( + <> + + 剩{showTime||'--:--:--'}支付关闭，订单自动取消 + + + ) +} \ No newline at end of file diff --git a/src/pages/salesAfter/components/returnLogistics/index.module.scss b/src/pages/salesAfter/components/returnLogistics/index.module.scss new file mode 100644 index 0000000..1a22287 --- /dev/null +++ b/src/pages/salesAfter/components/returnLogistics/index.module.scss @@ -0,0 +1,35 @@ + +.logistics_main{ + padding: 20px 30px; + box-sizing: border-box; + .logistics_image{ + display: flex; + .title_desc{ + font-size: 28px; + font-weight: 700; + padding-top: 50px; + box-sizing: border-box; + } + .upload_image{ + flex:1; + } + } + .logistics_desc{ + margin-top: 50px; + } + .btns_two{ + display: flex; + height: 82px; + font-size: $font_size_big; + border-radius: 40px; + margin-top: 50px; + .verify_btn{ + flex:1; + border-radius: 40px; + background: #007aff; + text-align: center; + line-height: 82px; + color: #fff; + } + } +} diff --git a/src/pages/salesAfter/components/returnLogistics/index.tsx b/src/pages/salesAfter/components/returnLogistics/index.tsx new file mode 100644 index 0000000..3d6b19f --- /dev/null +++ b/src/pages/salesAfter/components/returnLogistics/index.tsx @@ -0,0 +1,70 @@ +import Popup from "@/components/popup"; +import { Text, View } from "@tarojs/components"; +import { memo, useCallback, useEffect, useRef, useState } from "react"; +import UploadImage from "@/components/uploadImage" +import styles from './index.module.scss' +import TextareaEnhance from "@/components/textareaEnhance"; +import { ReturnApplyLogisticsApi } from "@/api/salesAfterOrder"; +import { alert } from "@/common/common"; + +type Param = { + show?: true|false, + onClose?: () => void, + onSubmit?: () => void, + id?: number //订单id +} +export default memo(({show = false, onClose, onSubmit, id = 0}: Param) => { + //需要提交的数据 + const submitData = useRef({ + accessory_url: [], + remark: '', + id: 0 + }) + useEffect(() => { + if(id) submitData.current.id = id + }, [id]) + + //获取图片列表 + const getImageList = useCallback((list) => { + submitData.current.accessory_url = list + }, []) + + //备注 + const getOtherReason = useCallback((val) => { + submitData.current.remark = val + }, []) + + //确定 + const {fetchData} = ReturnApplyLogisticsApi() + const onSubmitEven = async () => { + if(!id) return alert.error('参数有误') + if(submitData.current.accessory_url.length <= 0) return alert.error('请上传附件') + let res = await fetchData(submitData.current) + if(res.success) { + alert.success('上传成功') + } else { + alert.error('上传失败') + } + } + + return ( + <> + + + + 上传附件： + + + + + + + + + onSubmitEven()}>保存 + + + + + ) +}) \ No newline at end of file diff --git a/src/pages/salesAfter/index.tsx b/src/pages/salesAfter/index.tsx index aff512d..2796f66 100644 --- a/src/pages/salesAfter/index.tsx +++ b/src/pages/salesAfter/index.tsx @@ -3,18 +3,23 @@ import { EditSaleOrderRemarkApi, } from "@/api/order"; import { GetOrderPayApi } from "@/api/orderPay"; +import { SaleOrderOrderDetailApi } from "@/api/salesAfterOrder"; import { alert, goLink } from "@/common/common"; import { ORDER_STATUS } from "@/common/enum"; import { formatDateTime, formatImgUrl, formatPriceDiv } from "@/common/fotmat"; +import AfterOrderBtns from "@/components/afterOrderBtns"; import OrderBtns from "@/components/orderBtns"; import SearchInput from "@/components/searchInput"; import { Image, Text, Textarea, View } from "@tarojs/components" import Taro, {useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro"; import classnames from "classnames"; import { useCallback, useEffect, useMemo, useRef, useState, memo } from "react"; +import AddressInfoDetail from "./components/addressInfoDetail"; +import ApplyRecord from "./components/applyRecord"; import ContentBox from "./components/contentBox"; import KindList from "./components/kindList"; import OrderState from "./components/orderState"; +import ReturnLogistics from "./components/returnLogistics"; import styles from './index.module.scss' export default () => { @@ -27,10 +32,10 @@ import styles from './index.module.scss' //获取订单详情 const [orderDetail, setOrderDetail] = useState() //获取到的原始数据 - const {fetchData: getOrderFetchData} = GetSaleOrderDetailApi() + const {fetchData: saleOrderOrderDetailData} = SaleOrderOrderDetailApi() const getSaleOrderPreView = async () => { if(orderId.current) { - let res = await getOrderFetchData({id: orderId.current}) + let res = await saleOrderOrderDetailData({id: orderId.current}) setOrderDetail(res.data) } Taro.stopPullDownRefresh() @@ -54,7 +59,8 @@ import styles from './index.module.scss' total_fabrics: orderDetail.total_fabrics, //面料数量 unit: orderDetail.sale_mode == 0?'条':'m', //单位 list: orderDetail.product_list, - status: orderDetail.status, //订单状态 + stage: orderDetail.stage, //订单状态 + type: orderDetail.type, //退货or退款 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, //空差优惠 @@ -69,13 +75,7 @@ import styles from './index.module.scss' //获取底部按钮点击, 获取按钮状态 const orderStateClick = useCallback((val) => { - if(val == 1) { - //取消订单 - getSaleOrderPreView() - } - if(val == 2) { - - } + }, [orderDetail]) //页面下拉刷新 @@ -87,34 +87,61 @@ import styles from './index.module.scss' //按钮所需数据 const orderInfo = useMemo(() => { return { - status: orderDetail?.status, //订单状态 + stage: orderDetail?.stage, //售后订单状态 orderId: orderDetail?.id, settle_mode: orderDetail?.settle_mode, - actual_amount: orderDetail?.actual_amount, //实付金额 - wait_pay_amount: orderDetail?.wait_pay_amount, //待付金额 + type: orderDetail?.type, //退货or退款 + sale_mode: orderDetail?.sale_model, //订单类型 } }, [orderDetail]) //订单状态枚举 const {SaleOrderStatusCancel} = ORDER_STATUS + //物流显示 + const [logisticsShow, setLogisticsShow] = useState(false) + const onShowLogistics = useCallback((val) => { + if(val == 1) { + setLogisticsShow(true) + } else { + const list = orderDetail?.fabric_piece_accessory_url.map(item => { + return formatImgUrl(item) + }) + Taro.previewImage({ + current: list[0], // 当前显示 + urls: list // 需要预览的图片http链接列表 + }) + } + }, [orderDetail]) + const onCloseLogistics = useCallback(() => setLogisticsShow(false), []) + //物流成功上传 + const logisticsSuccess = useCallback(() => { + getSaleOrderPreView() + }, []) + + //显示生气记录 + const [applyRecord, setApplyRecord] = useState(false) + return ( - + + - + {(orderDetail?.status != SaleOrderStatusCancel.value)&& - + } - + + + setApplyRecord(false)}/> ) } - const OrderDes = memo(({val = ''}:{val?:string}) => { + const OrderDes = memo(({orderInfo}:{orderInfo?:any}) => { //复制功能 - const clipboardData = () => { + const clipboardData = (val) => { Taro.setClipboardData({ data: val, success: function (res) { @@ -130,58 +157,57 @@ import styles from './index.module.scss' 订单信息 - RA-LY-2204240002 - clipboardData()}>复制 + {orderInfo?.return_order_no} + clipboardData(orderInfo?.return_order_no)}>复制 - XS-LY-2204210002 - clipboardData()}>复制 + {orderInfo?.order_no} + clipboardData(orderInfo?.order_no)}>复制 - - 其他问题 + + {orderInfo?.return_reason_name} + + + {orderInfo?.return_explain_name} - 板布疵点太多 + {orderInfo?.return_remark} + + + {orderInfo?.goods_status_name} - 2022-04-24 08:32:39 + {formatDateTime(orderInfo?.apply_time)} ) }) - const AfterSalePricture = memo(() => { + const AfterSalePricture = memo(({urls = []}:{urls: string[]}) => { + + const showList = useMemo(() => { + let res = urls.map(item => { + return formatImgUrl(item) + }) + return res + }, [urls]) + //预览图片 const showImage = () => { Taro.previewImage({ - current: formatImgUrl(''), // 当前显示 - urls: [formatImgUrl('')] // 需要预览的图片http链接列表 + current: showList[0], // 当前显示 + urls: showList // 需要预览的图片http链接列表 }) } return ( - - - - - - - - - - - - - - - - - - + {urls?.map(item=> + + )} ) diff --git a/src/pages/salesAfterList/components/order/index.module.scss b/src/pages/salesAfterList/components/order/index.module.scss index ece7c61..2582b83 100644 --- a/src/pages/salesAfterList/components/order/index.module.scss +++ b/src/pages/salesAfterList/components/order/index.module.scss @@ -14,6 +14,8 @@ font-weight: 700; margin-left: 15px; font-size: $font_size; + width: 100px; + @include common_ellipsis(); } image{ width: 70px; @@ -26,7 +28,7 @@ font-size: $font_size_medium; color: $color_font_one; text-align: right; - padding-right: 30px; + padding-right: 10px; display: flex; justify-content: flex-end; align-items: center; @@ -69,23 +71,22 @@ .image{ width: 126px; height: 126px; - background: #e5ad3a; - border-radius: 20px 20px 0px 0px; + border-radius: 20px ; position: relative; image{ width: 100%; height: 100%; - border-radius: 20px 20px 0px 0px; + border-radius: 20px ; } .color_num { background: rgba(0,0,0, 0.5); - border-radius: 50px 0px 0px 0px; + border-radius: 36px 0px 20px 0px; font-size: $font_size_min; color: #fff; position: absolute; right:0; bottom:0; - padding: 5px 10px; + padding: 5px 10px 5px 15px; box-sizing: border-box; } } @@ -123,7 +124,7 @@ display: flex; background-color: #F6F6F6; padding: 20px; - margin-top: 20px; + margin: 20px 0; align-items: center; font-size: $font_size_medium; border-radius: 10px; diff --git a/src/pages/salesAfterList/components/order/index.tsx b/src/pages/salesAfterList/components/order/index.tsx index 30cf95b..7dd2ac9 100644 --- a/src/pages/salesAfterList/components/order/index.tsx +++ b/src/pages/salesAfterList/components/order/index.tsx @@ -1,6 +1,7 @@ import { goLink } from "@/common/common"; import { formatHashTag, formatImgUrl, formatPriceDiv } from "@/common/fotmat"; -import OrderBtns from "@/components/orderBtns"; +import AfterOrderBtns from "@/components/afterOrderBtns"; +import LabAndImg from "@/components/LabAndImg"; import { useSelector } from "@/reducers/hooks"; import { Image, Text, View } from "@tarojs/components" import classnames from "classnames"; @@ -11,20 +12,21 @@ import styles from './index.module.scss' type Param = { value: { order_no: string, + return_order_no: string, sale_mode: number, sale_mode_name: string, - status_name: string, + stage_name: string, shipment_mode_name: string, product_list: any[], total_fabrics: number, total_colors: number, total_number: number, - status: 0, + stage: 0, id: number, - payment_method: number, //支付方式 - actual_amount: number, //实付金额 - wait_pay_amount: number //待付金额 - should_collect_order_id: number //应付单id + lab: {l:number, a:number, b:number}, + rgb: {r:number, g:number, b:number}, + texturl_url: string, + type: number //1 退货 2退款 }, onClickBtn?: (val:{status:number, orderInfo:Param['value']}) => void } @@ -47,13 +49,18 @@ export default memo(({value, onClickBtn}: Param) => { //按钮所需数据 const orderInfo = useMemo(() => { return { - status: value?.status, //订单状态 + stage: value?.stage, //订单状态 orderId: value?.id, - actual_amount: value?.actual_amount, //实付金额 - wait_pay_amount: value?.wait_pay_amount, //待付金额 + sale_mode: value?.sale_mode, //订单类型 + type: value?.type //退货or退款 } }, [value]) + //整理颜色 + const labAndRgbAndUrl = useMemo(() => { + return {lab:{...value?.lab}, rgb:{...value?.rgb}, texturl_url: value?.texturl_url} + }, [value]) + return ( goLink('/pages/salesAfter/index', {id: value?.id})}> @@ -62,21 +69,21 @@ export default memo(({value, onClickBtn}: Param) => { {userInfo?.adminUserInfo?.user_name} - 订单号：{value?.order_no} + 售后单号：{value?.return_order_no} - + goLink('/pages/salesAfter/index', {id: value?.id})}> {value?.sale_mode_name} {formatHashTag(value?.product_list[0].code, value?.product_list[0].name)} - {value?.status_name} + {value?.stage_name} - - {value?.product_list[0].product_colors[0].code} + + {value?.product_list[0].product_colors[0].code} {value?.product_list[0].product_colors.map((itemColor, index) => { @@ -98,11 +105,11 @@ export default memo(({value, onClickBtn}: Param) => { {`${value?.total_fabrics}种面料，${value?.total_colors}种颜色，共${value?.total_number}条`} - 已申请退款 - 订单号：LY2278204399678 + {value?.type == 1?'已申请退货':'已申请退款'} + 订单号：{value?.order_no} - + ) }) diff --git a/src/pages/salesAfterList/components/orderStatusTag/index.tsx b/src/pages/salesAfterList/components/orderStatusTag/index.tsx index 5664c7c..1a794dc 100644 --- a/src/pages/salesAfterList/components/orderStatusTag/index.tsx +++ b/src/pages/salesAfterList/components/orderStatusTag/index.tsx @@ -5,14 +5,14 @@ import styles from './index.module.scss' type Param = { - status?: 0|1|2 //0默认不处理, 1退款，2退货 + status?: 0|1|2 //0默认不处理, 1退货，2退款 } export default memo(({status = 0}:Param) => { return ( <> - {(status !== 0)&& + {(status !== 0)&& - { status == 1?'退款':'退货'} + { status == 1?'退货':'退款'} } ) diff --git a/src/pages/salesAfterList/components/returnLogistics/index.module.scss b/src/pages/salesAfterList/components/returnLogistics/index.module.scss new file mode 100644 index 0000000..1a22287 --- /dev/null +++ b/src/pages/salesAfterList/components/returnLogistics/index.module.scss @@ -0,0 +1,35 @@ + +.logistics_main{ + padding: 20px 30px; + box-sizing: border-box; + .logistics_image{ + display: flex; + .title_desc{ + font-size: 28px; + font-weight: 700; + padding-top: 50px; + box-sizing: border-box; + } + .upload_image{ + flex:1; + } + } + .logistics_desc{ + margin-top: 50px; + } + .btns_two{ + display: flex; + height: 82px; + font-size: $font_size_big; + border-radius: 40px; + margin-top: 50px; + .verify_btn{ + flex:1; + border-radius: 40px; + background: #007aff; + text-align: center; + line-height: 82px; + color: #fff; + } + } +} diff --git a/src/pages/salesAfterList/components/returnLogistics/index.tsx b/src/pages/salesAfterList/components/returnLogistics/index.tsx new file mode 100644 index 0000000..3d6b19f --- /dev/null +++ b/src/pages/salesAfterList/components/returnLogistics/index.tsx @@ -0,0 +1,70 @@ +import Popup from "@/components/popup"; +import { Text, View } from "@tarojs/components"; +import { memo, useCallback, useEffect, useRef, useState } from "react"; +import UploadImage from "@/components/uploadImage" +import styles from './index.module.scss' +import TextareaEnhance from "@/components/textareaEnhance"; +import { ReturnApplyLogisticsApi } from "@/api/salesAfterOrder"; +import { alert } from "@/common/common"; + +type Param = { + show?: true|false, + onClose?: () => void, + onSubmit?: () => void, + id?: number //订单id +} +export default memo(({show = false, onClose, onSubmit, id = 0}: Param) => { + //需要提交的数据 + const submitData = useRef({ + accessory_url: [], + remark: '', + id: 0 + }) + useEffect(() => { + if(id) submitData.current.id = id + }, [id]) + + //获取图片列表 + const getImageList = useCallback((list) => { + submitData.current.accessory_url = list + }, []) + + //备注 + const getOtherReason = useCallback((val) => { + submitData.current.remark = val + }, []) + + //确定 + const {fetchData} = ReturnApplyLogisticsApi() + const onSubmitEven = async () => { + if(!id) return alert.error('参数有误') + if(submitData.current.accessory_url.length <= 0) return alert.error('请上传附件') + let res = await fetchData(submitData.current) + if(res.success) { + alert.success('上传成功') + } else { + alert.error('上传失败') + } + } + + return ( + <> + + + + 上传附件： + + + + + + + + + onSubmitEven()}>保存 + + + + + ) +}) \ No newline at end of file diff --git a/src/pages/salesAfterList/index.tsx b/src/pages/salesAfterList/index.tsx index f5c59c7..9c4f25e 100644 --- a/src/pages/salesAfterList/index.tsx +++ b/src/pages/salesAfterList/index.tsx @@ -12,6 +12,8 @@ import { dataLoadingStatus, getFilterData } from "@/common/util" import OrderStatusList from "./components/orderStatusList" import Payment from "../order/components/payment" import { AFTER_ORDER_STATUS } from "@/common/enum" +import { GetSaleOrderListApi } from "@/api/salesAfterOrder" +import ReturnLogistics from "./components/returnLogistics" export default () => { const {checkLogin} = useLogin() @@ -40,7 +42,7 @@ export default () => { }, []) //获取订单列表 - const {fetchData: listFetchData, state:orderState} = GetOrderListApi() + const {fetchData: listFetchData, state:orderState} = GetSaleOrderListApi() const [orderData, setOrderData] = useState<{list:any[], total:number}>({list:[], total:0}) const getOrderList = async () => { let res = await listFetchData(getFilterData(searchField)) @@ -96,28 +98,14 @@ export default () => { //监听点击的按钮 const clickOrderBtn = useCallback(({status, orderInfo}) => { if(status == 2) { - //去支付 - setPayOrderInfo({orderId:orderInfo.should_collect_order_id, payment_method:orderInfo.payment_method}) - toPay() + //退货物流 + } }, [orderData]) - - //去付款 - const [payOrderInfo, setPayOrderInfo] = useState() - const [payMentShow, setPayMentShow] = useState(false) - const toPay = () => { - setPayMentShow(true) - } - //关闭支付弹窗 - const closePayShow = useCallback(() => { - setPayMentShow(() => false) - }, []) - //支付成功 - const onPaySuccess = useCallback(() => { - getOrderList() - closePayShow() - }, []) + //物流显示 + const [logisticsShow, setLogisticsShow] = useState(false) + const onCloseLogistics = useCallback(() => setLogisticsShow(false), []) return ( @@ -132,8 +120,8 @@ export default () => { return })} + - ) } 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 f7d31db..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,11 +103,12 @@ export default () => { }, [colorState.deviceLab]) const goLinkPage = (item) => { - goLink('/pages/details/index',{id:item.id}) + goLink('/pages/details/index',{id:item.product_id}) } //获取筛选条件 const getFiltr = (e) => { + setMaterialList(() => ({list:[], total:0})) const {data} = e setSearchField({ ...searchField, @@ -123,7 +124,6 @@ export default () => { //筛选条件格式化 const [selectList , setSelectList] = useState() const formatSelectList = (val = {data:{}, field:{}}) => { - console.log('data123::',val.data) let data:ListProps[] = [] for(let key in val.data) { if(key !== 'seriesId'&& val.data[key] != '') { @@ -186,7 +186,7 @@ export default () => { {materialList.list.map(item => { return goLinkPage(item)}> - + {(item.product_color_code)}# diff --git a/src/pages/searchList/search.module.scss b/src/pages/searchList/search.module.scss index 2e4ede6..f31b47a 100644 --- a/src/pages/searchList/search.module.scss +++ b/src/pages/searchList/search.module.scss @@ -1,11 +1,17 @@ .main{ + position: relative; .search{ display: flex; justify-content: space-between; padding: 20px; padding-bottom: 50px; } - + .up_search{ + color: $color_main; + font-size: $font_size; + position: absolute; + right: 20px; + } .hot { padding: 0 20px; .hot_header { @@ -18,10 +24,9 @@ color: $color_font_one; font-weight: 700; } - .hot_header_up{ - color: $color_main; - } + } + .list{ display: flex; font-size: $font_size_medium; diff --git a/src/pages/searchList/search.tsx b/src/pages/searchList/search.tsx index 7505bcd..dd80f20 100644 --- a/src/pages/searchList/search.tsx +++ b/src/pages/searchList/search.tsx @@ -69,18 +69,18 @@ export default () => { searchEvent(e)}/> - + goLink('/pages/searchList/hightSearchList')}>高级搜索 + {searchData?.hotField.length > 0 && 热门面料 - goLink('/pages/searchList/searchList')}>高级搜索 - {searchData?.hotField?.map((item, index) => { + {searchData.hotField.map((item, index) => { return searchEvent(item.search_key, false)}>{item.search_key} })} - - + } + {searchData?.historyField.length > 0 && 历史搜索 @@ -88,7 +88,7 @@ export default () => { {searchData?.historyField?.map((item, index) => searchEvent(item.search_key, false)}>{item.search_key})} - + } ) } 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 7acb9fe..53e50f4 100644 --- a/src/pages/searchList/searchList.tsx +++ b/src/pages/searchList/searchList.tsx @@ -8,13 +8,12 @@ import SelectData, {ListProps} from "./components/selectData"; import { goLink } from "@/common/common"; import styles from './searchList.module.scss' import { useCallback, useEffect, useMemo, useRef, useState } from "react"; -import useManualPullDownRefresh from "@/use/useManualPullDownRefresh"; import {GetProductListApi} from "@/api/material" import Taro, { useDidShow, usePullDownRefresh, useRouter } from "@tarojs/taro"; import { formatHashTag, formatImgUrl } from "@/common/fotmat"; import { dataLoadingStatus, getFilterData } from "@/common/util"; -import LoadingCard from "@/components/loadingCard"; import useLogin from "@/use/useLogin"; +import LabAndImg from "@/components/LabAndImg"; export default () => { const {checkLogin} = useLogin() @@ -95,6 +94,7 @@ export default () => { //获取筛选条件 const getFiltr = (e) => { pageNum.current.page = 1 + setMaterialList(() => ({list:[], total:0})) const {data} = e setSearchField({ ...searchField, @@ -110,14 +110,12 @@ export default () => { //筛选条件格式化 const [selectList , setSelectList] = useState() const formatSelectList = (val = {data:{}, field:{}}) => { - console.log('data123::',val.data) let data:ListProps[] = [] for(let key in val.data) { if(key !== 'seriesId'&& val.data[key] != '') { data.push({title:val.field[key], value:val.data[key]}) } } - console.log('data::',data) setSelectList([...data]) } @@ -156,15 +154,15 @@ export default () => { 搜索结果 ({materialList.total}条记录) getScrolltolower()} - selfOnScroll={(e) => onscroll(e)} + selfonScrollToLower={getScrolltolower} + selfOnScroll={onscroll} statusMore={statusMore} > {materialList.list.map(item => { return goLinkPage(item)}> - + {(item.product_color_count)}色 diff --git a/src/pages/user/index.module.scss b/src/pages/user/index.module.scss index 464844d..bb82b69 100644 --- a/src/pages/user/index.module.scss +++ b/src/pages/user/index.module.scss @@ -1,68 +1,94 @@ -.main{ +.main { background-color: #F8F8F8; min-height: 100vh; display: flex; flex-direction: column; - .header{ + position: relative; + + .header { background: #68b4ff; background-size: cover; height: 560px; position: relative; - .card-main{ + + .card-main { margin-top: 10px; } } - .header-card{ - position: absolute;left: 50%;bottom: -18%; + + .auth-suspension { + position: absolute; + z-index: 1; + inset: 0; + } + + .header-card { + position: absolute; + left: 50%; + bottom: -18%; transform: translateX(-50%); } - .crad{ - width: 702px; - background: rgba(255,255,255,0.95); - border-radius: 20px; - padding: 30px; - box-sizing: border-box; - box-shadow: 0px 6px 12px 0px rgba(0,0,0,0.05); + + .crad { + width: 702px; + background: rgba(255, 255, 255, 0.95); + border-radius: 20px; + padding: 30px; + box-sizing: border-box; + box-shadow: 0px 6px 12px 0px rgba(0, 0, 0, 0.05); } - .card-info{ - display: flex;justify-content: space-between; - position: absolute;top: -15%;left: 0;right: 0; - width: 702px; - padding: 0 30px; - box-sizing: border-box; + + .card-info { + display: flex; + justify-content: space-between; + position: absolute; + top: -15%; + left: 0; + right: 0; + width: 702px; + padding: 0 30px; + box-sizing: border-box; } - .arcd-info-left{ - display: flex;align-items: flex-end; + + .arcd-info-left { + display: flex; + align-items: flex-end; } - .arcd-info-left-portrait{ - width: 170px; - height: 170px; - background: rgba(0,0,0,0.00); - border: 4px solid #ffffff; - border-radius: 50%; - overflow: hidden; + + .arcd-info-left-portrait { + width: 170px; + height: 170px; + background: rgba(0, 0, 0, 0.00); + border: 4px solid #ffffff; + border-radius: 50%; + overflow: hidden; } - .arcd-info-left-portrait image{ - width: 100%; - height: 100%; - object-fit: cover; + + .arcd-info-left-portrait image { + width: 100%; + height: 100%; + object-fit: cover; } - .arcd-info-left-desc{ - margin-left: 24px; + + .arcd-info-left-desc { + margin-left: 24px; } - .arcd-info-left-nickname{ - font-size: 44px; - font-weight: 700; - color: #000000; - display: flex; - align-items: center; + + .arcd-info-left-nickname { + font-size: 44px; + font-weight: 700; + color: #000000; + display: flex; + align-items: center; } - .arcd-info-left-phone{ + + .arcd-info-left-phone { font-size: 24px; font-weight: 400; color: #707070; } - .arcd-info-left-phone button{ + + .arcd-info-left-phone button { padding: 0 10px; height: 42px; background: #ffffff; @@ -71,39 +97,50 @@ font-size: 22px; font-weight: 400; color: #007aff; - display: flex;align-items: center;justify-content: center; + display: flex; + align-items: center; + justify-content: center; } - .card-info-right{ - font-size: 26px; - display: flex;align-items: flex-end; + + .card-info-right { + font-size: 26px; + display: flex; + align-items: flex-end; } - .setup-icon{ + + .setup-icon { position: relative; padding-bottom: 10px; } - .icon-wrapper{ + + .icon-wrapper { font-size: 60px; } - .icon-point{ + + .icon-point { width: 8px; height: 8px; border-radius: 50%; background: #ff0000; position: absolute; - right: 0;top: 0; + right: 0; + top: 0; } - .card-main{ + .card-main { margin: 20px auto 0; } - .card-main-title{ - display: flex;justify-content: space-between; - align-items: center; - border-bottom: 2px solid #dddddd; - padding: 0 5px 15px; - box-sizing: border-box; + + .card-main-title { + display: flex; + justify-content: space-between; + align-items: center; + border-bottom: 2px solid #dddddd; + padding: 0 5px 15px; + box-sizing: border-box; } - .card-main-title text{ + + .card-main-title text { font-size: 22px; font-weight: 400; color: #ababab; @@ -111,23 +148,27 @@ text-align: right; width: 150px; } - .card-main-title-content{ - display: grid; - grid-template-columns: repeat(5,1fr); + + .card-main-title-content { + display: grid; + grid-template-columns: repeat(5, 1fr); } - .card-main-title-content-item{ - font-size: 24px; - font-weight: 400; - color: #3c3c3c; - text-align: center; - margin-top: 30px; - position: relative; + + .card-main-title-content-item { + font-size: 24px; + font-weight: 400; + color: #3c3c3c; + text-align: center; + margin-top: 30px; + position: relative; } - .card-main-title-content-item Text{ + + .card-main-title-content-item Text { font-size: 56px; color: #3C3C3C; } - .card-main-title-content-item-badge{ + + .card-main-title-content-item-badge { padding: 0 10px; height: 32px; background: #007aff; @@ -138,96 +179,140 @@ font-size: 18px; font-weight: 700; color: #ffffff; - display: flex;align-items: center;justify-content: center; - position: absolute;top: -10px;right: 0; + display: flex; + align-items: center; + justify-content: center; + position: absolute; + top: -10px; + right: 0; } - .assets-title{ + .assets-title { font-size: 28px; font-weight: 700; color: #3c3c3c; margin-bottom: 20px; } - .assets-content{ + + .assets-content { display: grid; - grid-template-columns: repeat(3,1fr); + grid-template-columns: repeat(3, 1fr); } - .assets-content>view,.assets-content>navigator{ + + .assets-content>view, + .assets-content>navigator { text-align: center; } - .assets-content-item-top{ + + .assets-content-item-top { color: #007aff; font-weight: 400; } - .assets-content-item-top-before{ + + .assets-content-item-top-before { font-size: 20px; } - .assets-content-item-top-content{ + + .assets-content-item-top-content { font-size: 36px; } - .assets-content-item-top-after{ + + .assets-content-item-top-after { font-size: 20px; } - .assets-content-item-tips{ + + .assets-content-item-tips { font-size: 24px; font-weight: 400; color: #707070; } - .main-card{ + .main-card { margin: 131px auto 0; } - .card-feature{ + + .card-feature { margin-bottom: 50px; } - .card-main-list-content-item{ - display: flex;align-items: center; + + .card-main-list-content-item { + display: flex; + align-items: center; justify-content: space-between; height: 90px; } - .card-main-list-content-item-left{ + + .card-main-list-content-item-left { font-size: 26px; font-weight: 400; text-align: left; color: #707070; - display: flex;align-items: center; + display: flex; + align-items: center; } - .card-main-list-content-item-left text{ + + .card-main-list-content-item-left text { margin-right: 35px; font-size: 56px; color: #707070; } - .card-main-list-content-item-right text{ + + .card-main-list-content-item-right text { font-size: 30px; } - .auth{ + .auth { margin-top: 115px; } - .auth-top{ - display: flex;align-items: center;justify-content: space-between; + + .auth-top { + display: flex; + align-items: center; + justify-content: space-between; } - .auth-status{ + + .auth-status { padding: 0 10px; height: 30px; background: #dddddd; border-radius: 10px 4px 0px 0px; - display: flex;align-items: center;justify-content: center; + display: flex; + align-items: center; + justify-content: center; font-size: 18px; font-weight: 400; color: #707070; } - .auth-tips{ + + .auth-status, + .auth-status-ongoing { + color: #EE7500; + background-color: #FFE6CE; + } + + .auth-status, + .auth-status-adopt { + color: #007AFF; + background-color: #CDE5FF; + } + + .auth-tips { font-size: 18px; font-weight: 400; color: #007aff; - width: 150px; text-align: right; } - .auth-tips text{ + + .auth-tips, + .auth-tips-adopt { + color: #ABABAB; + } + + .auth-tips text { font-size: 17px; } - .auth-company{ + + .auth-company { height: 70px; width: 100%; background: #f6f6f6; @@ -236,30 +321,46 @@ font-size: 26px; font-weight: 700; color: #707070; - display: flex;align-items: center;justify-content: center; + display: flex; + align-items: center; + justify-content: center; } - .modal{ - background: rgba(0,0,0,0.6); - position: fixed;inset: 0; - display: flex;justify-content: center;align-items: center; + .auth-company, + .auth-company-adopt { + background: #ecf5ff; + border: 2px solid #cde5ff; } - .modal-content{ + + .tips-modal { + background: rgba(0, 0, 0, 0.6); + position: fixed; + inset: 0; + display: flex; + justify-content: center; + align-items: center; + z-index: 2; + } + + .tips-modal-content { width: 598px; background: #ffffff; border-radius: 10px; animation: enlargeK 0.2s linear; overflow: hidden; } + @keyframes enlargeK { - 0%{ + 0% { transform: scale(0); } - 100%{ + + 100% { transform: scale(1); } } - .modal-title{ + + .tips-modal-title { font-size: 32px; font-weight: 700; text-align: center; @@ -267,53 +368,166 @@ margin-bottom: 58px; padding-top: 48px; } - .modal-letter{ + + .tips-modal-letter { font-size: 26px; font-weight: 400; color: #707070; padding: 0 30px; line-height: 50px; } - .modal-letter-text{ + + .tips-modal-letter-text { text-indent: 60px; } - .modal-letter-beginn{ + + .tips-modal-letter-beginn { font-size: 28px; font-weight: 400; color: #000000; margin-bottom: 25px; } - .modal-letter-end{ + + .tips-modal-letter-end { font-size: 26px; font-weight: 400; text-align: right; margin-top: 61px; } - .modal-button{ + + .tips-modal-button { display: flex; border-top: 1px solid #DDDDDD; margin-top: 45px; } - .modal-button button, .modal-button view{ - display: flex;align-items: center;justify-content: center; + + .tips-modal-button button, + .tips-modal-button view { + display: flex; + align-items: center; + justify-content: center; width: 50%; height: 90px; background-color: white; } - .modal-button button{ + + .tips-modal-button button { font-size: 26px; font-weight: 400; color: #707070; border-radius: 0; border-right: 1px solid #DDDDDD; } - .modal-button button::after{ + + .tips-modal-button button::after { border: 0; border-radius: 0; } - .modal-button view{ + + .tips-modal-button view { font-size: 26px; font-weight: 400; color: #007aff; } + + .auth-box { + width: 614px; + height: 70px; + background: #f6f6f6; + border-radius: 10px; + display: flex; + align-items: center; + justify-content: space-between; + padding-left: 18px; + padding-right: 16px; + + .auth-left-box { + display: flex; + align-items: center; + + .auth-tag { + width: 86px; + height: 34px; + background: #dddddd; + border-radius: 10px; + font-size: 22px; + font-family: Microsoft YaHei, Microsoft YaHei-Regular; + font-weight: 400; + text-align: center; + color: #707070; + text-align: center; + line-height: 34px; + margin-right: 28px; + } + + .auth-tagone { + width: 86px; + height: 34px; + background: #ffe6ce; + border-radius: 10px; + font-size: 22px; + font-family: Microsoft YaHei, Microsoft YaHei-Regular; + font-weight: 400; + text-align: center; + color: #707070; + text-align: center; + line-height: 34px; + margin-right: 28px; + } + + .auth-tagtwo { + display: flex; + align-items: center; + overflow: hidden; + padding-left: 10px; + width: 100px; + height: 32px; + background: #cde5ff; + border-radius: 10px; + + .iconFont-color { + display: flex; + align-items: center; + font-size: 30px; + margin-right: 3px; + color: #007aff; + } + + .auth-font { + font-size: 20px; + font-family: Microsoft YaHei, Microsoft YaHei-Regular; + font-weight: 400; + color: #007aff; + } + } + + .tagthree { + display: flex; + align-items: center; + overflow: hidden; + padding-left: 10px; + width: 100px; + height: 32px; + background: rgba(255, 0, 0, 0.10); + border-radius: 10px; + color: #ff0000; + } + + .auth-cont { + margin-left: 16px; + font-size: 26px; + font-family: Microsoft YaHei, Microsoft YaHei-Bold; + font-weight: 700; + color: #ababab; + } + + .auth-contone { + margin-left: 16px; + font-size: 26px; + font-family: Microsoft YaHei, Microsoft YaHei-Bold; + font-weight: 700; + color: #3c3c3c; + } + } + } } \ No newline at end of file diff --git a/src/pages/user/index.tsx b/src/pages/user/index.tsx index ba0cc9b..7709a0c 100644 --- a/src/pages/user/index.tsx +++ b/src/pages/user/index.tsx @@ -3,79 +3,89 @@ import { memo, useEffect, useState } from "react" import styles from './index.module.scss' import classnames from "classnames"; import { useSelector } from "@/reducers/hooks"; -import { GetAdminUserInfoApi } from "@/api/user"; import { alert, goLink } from "@/common/common"; - - +import useLogin from '@/use/useLogin' +import { BASE_URL } from '@/common/constant' +import Taro from "@tarojs/taro"; +import { userassets } from "@/api/mine" +import { formatPriceDiv } from "@/common/fotmat" export default () => { // 用户信息 - const { fetchData, state } = GetAdminUserInfoApi(); - const {adminUserInfo, userInfo} = useSelector(state => state.userInfo); - const [mUserInfo, setMUserInfo] = useState({ - phone: "" - }); - const getData = ()=>{ - fetchData(); + const { getSelfUserInfo } = useLogin(); + const { adminUserInfo } = useSelector(state => state.userInfo); + useEffect(() => { + getSelfUserInfo().then().catch(() => { + alert.none("授权失败，请授权后再使用"); + }); + }, []); + const handleAuth = async () => { + getSelfUserInfo().then().catch(() => { + alert.none("授权失败，请授权后再使用"); + }); } - useEffect(()=>{ - setMUserInfo({ - ...mUserInfo, - // phone: userInfo?.phone?.replace(userInfo?.phone?.substring(3,7), "****") as string - }) - getData(); - },[]); - + const { fetchData, state } = userassets() + useEffect(() => { + fetchData(); + }, []) return ( -
- +
+
- + {/* {(adminUserInfo as any)?.authentication_status==1&&} */} + {/* 测试暂时添加 */} + {BASE_URL} + {!adminUserInfo.is_authorize_name && } ) } -const Modal = memo((props:any)=>{ - const {data} = props; - const handleouter = ()=>{ - console.log(222); - +// 提示弹窗 +const Modal = memo((props: any) => { + const { data } = props; + const [modalShow, setModalShow] = useState(true); + const handleouter = () => { } - return( + return ( <> - {!data?.is_authorize_phone&& - - e.stopPropagation()}> - 首次登录提醒 - - To: 万丰园纺织科技 - 尊敬的老朋友，欢迎你使用小程序商城；由于您是我们长期合作的伙伴，你的组织已自动为你生成，关联后可查看历史订单哟。 - 信息错误请联系客服 + {modalShow && + + e.stopPropagation()}> + 首次登录提醒 + + To: 万丰园纺织科技 + 尊敬的老朋友，欢迎你使用小程序商城；由于您是我们长期合作的伙伴，你的组织已自动为你生成，关联后可查看历史订单哟。 + 信息错误请联系客服 + + + + setModalShow(false)}>我知道 + + - - - 我知道 - - - - } + } ) }) // 头部 | 订单 -const Header = memo((props:any) => { - const {data, userInfo} = props; - let menu = [{ text: "待配布", icon: "icon-daipeibu" }, { text: "待付款", icon: "icon-daifukuan" }, - { text: "待发货", icon: "icon-daifahuo" }, { text: "已发货", icon: "icon-yifahuo" }, - { text: "退款/售后", icon: "icon-a-tuikuanshouhou" }]; - const getPhoneNumber = (ev)=>{ - console.log(ev); - if(ev.detail?.code){ - }else{ - alert.none("取消了授权"); +const Header = memo((props: any) => { + const { data } = props; + let menu = [{ text: "待配布", icon: "icon-daipeibu", url: "/pages/orderList/index" }, { text: "待付款", icon: "icon-daifukuan", url: "/pages/orderList/index" }, + { text: "待发货", icon: "icon-daifahuo", url: "/pages/orderList/index" }, { text: "已发货", icon: "icon-yifahuo", url: "/pages/orderList/index" }, + { text: "退款/售后", icon: "icon-a-tuikuanshouhou", url: "/pages/orderList/index" }]; + const { getPhoneNumber } = useLogin(); + const mGetPhoneNumber = (ev) => { + if (ev.detail?.code) { + getPhoneNumber(ev.detail.code); + } else { + alert.none("绑定失败!"); } } - + const navTo = () => { + Taro.navigateTo({ + url: '/pages/certification/index' + }) + } return ( @@ -90,7 +100,7 @@ const Header = memo((props:any) => { {data?.user_name} - {userInfo?.phone||} + {data?.phone ? data?.phone?.replace(data?.phone?.substring(3, 7), "****") : } @@ -106,16 +116,80 @@ const Header = memo((props:any) => { - - - 1 - 认证不通过 + {(data?.authentication_status == 0 || data?.authentication_status == 1) && + navTo()}> + + + 未认证 + + + 暂未加入或注册组织 + + + - 重新认证 - - - 佛山市带生纺织品有限公司 - + } + {(data?.authentication_status == 3) && + navTo()}> + + + 认证失败 + + + 暂未加入或注册组织 + + + + + } + {data?.authentication_status == 2 && + navTo()}> + + + 认证中 + + + {data?.company_name || '暂未加入或注册组织'} + + + + + } + {data?.authentication_status == 4 && + navTo()}> + + + + + + 已认证 + + + {data?.company_name} + + + + + } + {/* + + 1 + {data?.authentication_status==1&&"未认证"} + {data?.authentication_status==2&&"认证中"} + {data?.authentication_status==3&&"认证不通过"} + {data?.authentication_status==4&&"已认证"} + + {data?.authentication_status==1&&认证通过后，解锁更多权限 } + {data?.authentication_status==2&&1-3个工作日，审核完成 } + {data?.authentication_status==3&&重新认证 } + {data?.authentication_status==4&&认证通过，可以下单啦 } + */} + {/* + {data?.authentication_status==1&&"暂未加入或注册组织"} + {data?.authentication_status==2&&data?.company_name} + {data?.authentication_status==3&&data?.company_name} + {data?.authentication_status==4&&data?.company_name} + */} @@ -126,24 +200,23 @@ const Header = memo((props:any) => { { menu.map((item, index) => { return ( - + {item.text} - {index==2?"99+":10} - + {index == 2 ? "99+" : 10} + ) }) } - ) }) - // 我的资产 -const Assets = () => { +const Assets = (props: any) => { + console.log(props, 'propsprops') return ( 我的资产 @@ -151,14 +224,14 @@ const Assets = () => { ¥ - 0 - .20 + {formatPriceDiv(props.data.data.wallet_money || 0)} + {/* {props.wallet_money || 0} */} 预存款 - 4 + {props.data.data.coupon_count || 0} 张 优惠券 @@ -166,8 +239,8 @@ const Assets = () => { ¥ - 99999 - .-00 + {formatPriceDiv(props.data.data.credit_line || 0)} + {/* .-00 */} 授信额度 diff --git a/src/pages/userEdit/components/ModifyModal.scss b/src/pages/userEdit/components/ModifyModal.scss new file mode 100644 index 0000000..fe370e9 --- /dev/null +++ b/src/pages/userEdit/components/ModifyModal.scss @@ -0,0 +1,76 @@ + .modify-ickname-content { + margin: 0 auto; + width: 658px; + padding-bottom: 50px; + + .modify-ickname-input { + width: 658px; + height: 182px; + background: #f3f3f3; + border: 2px solid #e6e6e6; + border-radius: 10px; + padding: 15px; + box-sizing: border-box; + font-size: 22px; + font-weight: 400; + color: #ababab; + display: flex; + flex-direction: column; + align-items: flex-end; + } + + .modify-ickname-input textarea { + width: 100%; + height: 80%; + font-size: 26px; + font-weight: 400; + color: #3c3c3c; + } + + .modify-ickname-tips { + font-size: 22px; + font-weight: 400; + color: #ababab; + margin-top: 30px; + } + + .modify-ickname-operation { + width: 658px; + height: 82px; + background: #ffffff; + border: 2px solid #cde5ff; + border-radius: 40px; + display: flex; + overflow: hidden; + margin-top: 105px; + display: flex; + } + + .modify-ickname-operation button { + height: 100%; + width: 50%; + font-size: 32px; + font-weight: 400; + color: #007aff; + background-color: white; + border: none; + outline: none; + padding: 0; + border-radius: 0; + } + + .modify-ickname-operation button::after, + .user-edit-logout::after { + border-radius: 0; + border: none; + } + + .modify-ickname-operation .modify-ickname-operation-save { + background: #007aff; + color: #ffffff; + } + + .modify-ickname-operation button::after { + border-radius: 0; + } + } \ No newline at end of file diff --git a/src/pages/userEdit/components/ModifyModal.tsx b/src/pages/userEdit/components/ModifyModal.tsx new file mode 100644 index 0000000..22c9db5 --- /dev/null +++ b/src/pages/userEdit/components/ModifyModal.tsx @@ -0,0 +1,49 @@ + +import { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useState } from "react" +import Popup from "@/components/popup"; +import { Button, Image, Text, Textarea, View } from "@tarojs/components" +import "./ModifyModal.scss" + +interface Params{ + title?: string, + save: (value: any)=>void, // 确定保存 +} +export default memo(forwardRef((props:any,ref)=>{ + const {title="修改昵称"} = props; + const [value, setValue] = useState(""); + useEffect(()=>{ + setValue(props.value); + },[props.value]) + // popup输入长度 + const handleTextareaInput = (ev:any)=>{ + setValue(ev.detail.value.slice(0,20)); + } + // 重置 + const handleTextareaReset = ()=>{ + setValue(""); + } + const [textareaBottom, setTextareaBottom] = useState(0); + const handleBlur = ()=>{ + setTextareaBottom(0); + } + const handleFocus = (ev)=>{ + setTextareaBottom(ev.detail.height); + } + const [modalShow,setModalShow] = useState(false); + useImperativeHandle(ref, ()=>({setModalShow})) + return ( + setModalShow(false)} title={title} show={modalShow}> + + +