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

Merge branch 'dev' of http://git.online.zzfzyc.com/mp/EShop into dev

Browse Source
This commit is contained in:
li tong bao 2022-05-11 14:16:32 +08:00
commit 72338bc637
94 changed files with 6491 additions and 324 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

212
package-lock.json generated
View File

@ -16,12 +16,17 @@
"big.js": "^6.1.1",
"qs": "^6.10.3",
"react": "^17.0.0",
"react-dom": "^17.0.0"
"react-dom": "^17.0.0",
"react-redux": "^8.0.1",
"redux": "^4.2.0",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.4.1"
},
"devDependencies": {
"@babel/core": "^7.8.0",
"@tarojs/mini-runner": "3.3.10",
"@tarojs/webpack-runner": "3.3.10",
"@types/qs": "^6.9.7",
"@types/react": "^17.0.2",
"@types/webpack-env": "^1.13.6",
"@typescript-eslint/eslint-plugin": "^4.15.1",
@ -3915,6 +3920,15 @@
"@types/node": "*"
}
},
"node_modules/@types/hoist-non-react-statics": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
"integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
"dependencies": {
"@types/react": "*",
"hoist-non-react-statics": "^3.3.0"
}
},
"node_modules/@types/json-schema": {
"version": "7.0.11",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@ -3978,14 +3992,18 @@
"version": "15.7.4",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
"integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==",
"dev": true,
"license": "MIT"
},
"node_modules/@types/qs": {
"version": "6.9.7",
"resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
"integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==",
"dev": true
},
"node_modules/@types/react": {
"version": "17.0.43",
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.43.tgz",
"integrity": "sha512-8Q+LNpdxf057brvPu1lMtC5Vn7J119xrP1aq4qiaefNioQUYANF/CYeK4NsKorSZyUGJ66g0IM+4bbjwx45o2A==",
"dev": true,
"license": "MIT",
"dependencies": {
"@types/prop-types": "*",
@ -4007,9 +4025,13 @@
"version": "0.16.2",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
"dev": true,
"license": "MIT"
},
"node_modules/@types/use-sync-external-store": {
"version": "0.0.3",
"resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
"integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
},
"node_modules/@types/webpack-env": {
"version": "1.16.3",
"resolved": "https://registry.npmjs.org/@types/webpack-env/-/webpack-env-1.16.3.tgz",
@ -7507,7 +7529,6 @@
"version": "3.0.11",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz",
"integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==",
"dev": true,
"license": "MIT"
},
"node_modules/cuint": {
@ -7623,6 +7644,11 @@
"node": ">=0.10"
}
},
"node_modules/deep-diff": {
"version": "0.3.8",
"resolved": "https://registry.npmjs.org/deep-diff/-/deep-diff-0.3.8.tgz",
"integrity": "sha1-wB3mPvsO7JeYgB1Ax+Da4ltYLIQ="
},
"node_modules/deep-equal": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
@ -10324,6 +10350,14 @@
"minimalistic-crypto-utils": "^1.0.1"
}
},
"node_modules/hoist-non-react-statics": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
"dependencies": {
"react-is": "^16.7.0"
}
},
"node_modules/hosted-git-info": {
"version": "2.8.9",
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
@ -15759,7 +15793,6 @@
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
"dev": true,
"license": "MIT"
},
"node_modules/react-reconciler": {
@ -15779,6 +15812,49 @@
"react": "^17.0.1"
}
},
"node_modules/react-redux": {
"version": "8.0.1",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.1.tgz",
"integrity": "sha512-LMZMsPY4DYdZfLJgd7i79n5Kps5N9XVLCJJeWAaPYTV+Eah2zTuBjTxKtNEbjiyitbq80/eIkm55CYSLqAub3w==",
"dependencies": {
"@babel/runtime": "^7.12.1",
"@types/hoist-non-react-statics": "^3.3.1",
"@types/use-sync-external-store": "^0.0.3",
"hoist-non-react-statics": "^3.3.2",
"react-is": "^18.0.0",
"use-sync-external-store": "^1.0.0"
},
"peerDependencies": {
"@types/react": "^16.8 || ^17.0 || ^18.0",
"@types/react-dom": "^16.8 || ^17.0 || ^18.0",
"react": "^16.8 || ^17.0 || ^18.0",
"react-dom": "^16.8 || ^17.0 || ^18.0",
"react-native": ">=0.59",
"redux": "^4"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"@types/react-dom": {
"optional": true
},
"react-dom": {
"optional": true
},
"react-native": {
"optional": true
},
"redux": {
"optional": true
}
}
},
"node_modules/react-redux/node_modules/react-is": {
"version": "18.0.0",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.0.0.tgz",
"integrity": "sha512-yUcBYdBBbo3QiPsgYDcfQcIkGZHfxOaoE6HLSnr1sPzMhdyxusbfKOSUbSd/ocGi32dxcj366PsTj+5oggeKKw=="
},
"node_modules/react-refresh": {
"version": "0.9.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.9.0.tgz",
@ -15898,6 +15974,30 @@
"node": ">=4"
}
},
"node_modules/redux": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/redux/-/redux-4.2.0.tgz",
"integrity": "sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==",
"dependencies": {
"@babel/runtime": "^7.9.2"
}
},
"node_modules/redux-logger": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/redux-logger/-/redux-logger-3.0.6.tgz",
"integrity": "sha1-91VZZvMJjzyIYExEnPC69XeCdL8=",
"dependencies": {
"deep-diff": "^0.3.5"
}
},
"node_modules/redux-thunk": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz",
"integrity": "sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==",
"peerDependencies": {
"redux": "^4"
}
},
"node_modules/reflect-metadata": {
"version": "0.1.13",
"resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.13.tgz",
@ -19807,6 +19907,14 @@
"node": ">=0.10.0"
}
},
"node_modules/use-sync-external-store": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.0.0.tgz",
"integrity": "sha512-AFVsxg5GkFg8GDcxnl+Z0lMAz9rE8DGJCc28qnBuQF7lac57B5smLcT37aXpXIIPz75rW4g3eXHPjhHwdGskOw==",
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0-rc"
}
},
"node_modules/util": {
"version": "0.11.1",
"resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",
@ -23660,6 +23768,15 @@
"@types/node": "*"
}
},
"@types/hoist-non-react-statics": {
"version": "3.3.1",
"resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz",
"integrity": "sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==",
"requires": {
"@types/react": "*",
"hoist-non-react-statics": "^3.3.0"
}
},
"@types/json-schema": {
"version": "7.0.11",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@ -23714,14 +23831,18 @@
"@types/prop-types": {
"version": "15.7.4",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
"integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==",
"integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
},
"@types/qs": {
"version": "6.9.7",
"resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
"integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==",
"dev": true
},
"@types/react": {
"version": "17.0.43",
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.43.tgz",
"integrity": "sha512-8Q+LNpdxf057brvPu1lMtC5Vn7J119xrP1aq4qiaefNioQUYANF/CYeK4NsKorSZyUGJ66g0IM+4bbjwx45o2A==",
"dev": true,
"requires": {
"@types/prop-types": "*",
"@types/scheduler": "*",
@ -23740,8 +23861,12 @@
"@types/scheduler": {
"version": "0.16.2",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
"dev": true
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
},
"@types/use-sync-external-store": {
"version": "0.0.3",
"resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz",
"integrity": "sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA=="
},
"@types/webpack-env": {
"version": "1.16.3",
@ -26291,8 +26416,7 @@
"csstype": {
"version": "3.0.11",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.11.tgz",
"integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==",
"dev": true
"integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw=="
},
"cuint": {
"version": "0.2.2",
@ -26383,6 +26507,11 @@
"resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
"integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
},
"deep-diff": {
"version": "0.3.8",
"resolved": "https://registry.npmjs.org/deep-diff/-/deep-diff-0.3.8.tgz",
"integrity": "sha1-wB3mPvsO7JeYgB1Ax+Da4ltYLIQ="
},
"deep-equal": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
@ -28374,6 +28503,14 @@
"minimalistic-crypto-utils": "^1.0.1"
}
},
"hoist-non-react-statics": {
"version": "3.3.2",
"resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
"integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
"requires": {
"react-is": "^16.7.0"
}
},
"hosted-git-info": {
"version": "2.8.9",
"resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
@ -32314,8 +32451,7 @@
"react-is": {
"version": "16.13.1",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
"dev": true
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
},
"react-reconciler": {
"version": "0.26.1",
@ -32327,6 +32463,26 @@
"scheduler": "^0.20.1"
}
},
"react-redux": {
"version": "8.0.1",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-8.0.1.tgz",
"integrity": "sha512-LMZMsPY4DYdZfLJgd7i79n5Kps5N9XVLCJJeWAaPYTV+Eah2zTuBjTxKtNEbjiyitbq80/eIkm55CYSLqAub3w==",
"requires": {
"@babel/runtime": "^7.12.1",
"@types/hoist-non-react-statics": "^3.3.1",
"@types/use-sync-external-store": "^0.0.3",
"hoist-non-react-statics": "^3.3.2",
"react-is": "^18.0.0",
"use-sync-external-store": "^1.0.0"
},
"dependencies": {
"react-is": {
"version": "18.0.0",
"resolved": "https://registry.npmjs.org/react-is/-/react-is-18.0.0.tgz",
"integrity": "sha512-yUcBYdBBbo3QiPsgYDcfQcIkGZHfxOaoE6HLSnr1sPzMhdyxusbfKOSUbSd/ocGi32dxcj366PsTj+5oggeKKw=="
}
}
},
"react-refresh": {
"version": "0.9.0",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.9.0.tgz",
@ -32422,6 +32578,28 @@
"strip-indent": "^2.0.0"
}
},
"redux": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/redux/-/redux-4.2.0.tgz",
"integrity": "sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==",
"requires": {
"@babel/runtime": "^7.9.2"
}
},
"redux-logger": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/redux-logger/-/redux-logger-3.0.6.tgz",
"integrity": "sha1-91VZZvMJjzyIYExEnPC69XeCdL8=",
"requires": {
"deep-diff": "^0.3.5"
}
},
"redux-thunk": {
"version": "2.4.1",
"resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.4.1.tgz",
"integrity": "sha512-OOYGNY5Jy2TWvTL1KgAlVy6dcx3siPJ1wTq741EPyUKfn6W6nChdICjZwCd0p8AZBs5kWpZlbkXW2nE/zjUa+Q==",
"requires": {}
},
"reflect-metadata": {
"version": "0.1.13",
"resolved": "https://registry.npmjs.org/reflect-metadata/-/reflect-metadata-0.1.13.tgz",
@ -35261,6 +35439,12 @@
"integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==",
"dev": true
},
"use-sync-external-store": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.0.0.tgz",
"integrity": "sha512-AFVsxg5GkFg8GDcxnl+Z0lMAz9rE8DGJCc28qnBuQF7lac57B5smLcT37aXpXIIPz75rW4g3eXHPjhHwdGskOw==",
"requires": {}
},
"util": {
"version": "0.11.1",
"resolved": "https://registry.npmjs.org/util/-/util-0.11.1.tgz",

7
package.json
View File

@ -43,12 +43,17 @@
"big.js": "^6.1.1",
"qs": "^6.10.3",
"react": "^17.0.0",
"react-dom": "^17.0.0"
"react-dom": "^17.0.0",
"react-redux": "^8.0.1",
"redux": "^4.2.0",
"redux-logger": "^3.0.6",
"redux-thunk": "^2.4.1"
},
"devDependencies": {
"@babel/core": "^7.8.0",
"@tarojs/mini-runner": "3.3.10",
"@tarojs/webpack-runner": "3.3.10",
"@types/qs": "^6.9.7",
"@types/react": "^17.0.2",
"@types/webpack-env": "^1.13.6",
"@typescript-eslint/eslint-plugin": "^4.15.1",

12
src/api/banner.ts Normal file
View File

@ -0,0 +1,12 @@
import { useRequest } from "@/use/useHttp"
/**
* 获取轮播图列表
* @returns
*/
export const GetBannerList = () => {
return useRequest({
url: `/v1/mall/carouselBanner/list`,
method: "get",
})
}

12
src/api/login.ts Normal file
View File

@ -0,0 +1,12 @@
import { useRequest } from "@/use/useHttp"
/**
* 登录
* @returns
*/
export const LoginApi = () => {
return useRequest({
url: `/v1/mall/login`,
method: "post",
})
}

47
src/api/material.ts Normal file
View File

@ -0,0 +1,47 @@
import { useRequest } from "@/use/useHttp"
/**
* 获取面料分类列表
* @returns
*/
export const GetCategoryList = () => {
return useRequest({
url: `/v1/mall/category/list`,
method: "get",
})
}
/**
* 获取面料种类列表
* @returns
*/
export const GetProductKindListApi = () => {
return useRequest({
url: `/v1/mall/product/kind/list`,
method: "get",
})
}
/**
* 获取面料列表
* @returns
*/
export const GetProductListApi = () => {
return useRequest({
url: `/v1/mall/product/list`,
method: "get",
})
}
/**
* 获取面料详情
* @returns
*/
export const GetProductDetailApi = () => {
return useRequest({
url: `/v1/mall/product`,
method: "get",
})
}

12
src/api/materialColor.ts Normal file
View File

@ -0,0 +1,12 @@
import { useRequest } from "@/use/useHttp"
/**
* 获取面料颜色列表
* @returns
*/
export const GetColorList = () => {
return useRequest({
url: `/v1/mall/product/color/list`,
method: "get",
})
}

12
src/api/shopCart.ts Normal file
View File

@ -0,0 +1,12 @@
import { useRequest } from "@/use/useHttp"
/**
* 获取购物车列表
* @returns
*/
export const GetShoppingCartApi = () => {
return useRequest({
url: `/v1/mall/shoppingCart/productColor`,
method: "get",
})
}

31
src/api/user.ts Normal file
View File

@ -0,0 +1,31 @@
import { useRequest } from "@/use/useHttp"
/**
* 解密用户微信信息
*/
export const GetWxUserInfoApi = () => {
return useRequest({
url: `/v1/mall/user/decrypt`,
method: "post",
})
}
/**
* 获取后台返回的用户信息
*/
export const GetSelfUserInfoApi = () => {
return useRequest({
url: `/v1/mall/user/info`,
method: "get",
})
}
/**
* 获取后台返回的用户手机号码信息
*/
export const GetPhoneNumberApi = () => {
return useRequest({
url: `/v1/mall/user/phoneNumber`,
method: "post",
})
}

8
src/app.config.ts
View File

@ -1,7 +1,7 @@
export default {
pages: [
'pages/index/index',
'pages/user/index'
'pages/user/index',
],
window: {
backgroundTextStyle: 'light',
@ -51,7 +51,9 @@ export default {
{
root: "pages/searchList",
pages: [
"index"
"searchList",
"hightSearchList",
"search"
]
},
{
@ -85,7 +87,7 @@ export default {
]
},
{
root: "pages/weightListAdd",
root: "pages/order",
pages: [
"index"
]

29
src/app.tsx
View File

@ -1,13 +1,32 @@
import { MovableArea, View } from '@tarojs/components'
import { Component } from 'react'
import ContextBlueTooth from "@/use/contextBlueTooth"
import { Provider } from 'react-redux'
import configStore from './store'
import './app.scss'
const store = configStore()
class App extends Component {
const App = ({ children }) => {
componentDidMount () {}
componentDidShow () {}
componentDidHide () {}
componentDidCatchError () {}
// this.props.children 是将要会渲染的页面
render () {
return (
<>
{children}
</>
<ContextBlueTooth>
<Provider store={store}>
{this.props.children}
</Provider>
</ContextBlueTooth>
)
}
}
export default App

86
src/common/bluetooth/color/colorDiff.js Normal file
View File

@ -0,0 +1,86 @@
module.exports = function(lab1, lab2){
var rgb2labArray1 = lab1;
var rgb2labArray2 = lab2;
var l1 = rgb2labArray1[0];
var a1 = rgb2labArray1[1];
var b1 = rgb2labArray1[2];
var l2 = rgb2labArray2[0];
var a2 = rgb2labArray2[1];
var b2 = rgb2labArray2[2];
var avg_lp = (l1 + l2) / 2;
var c1 = Math.sqrt(Math.pow(a1, 2) + Math.pow(b1, 2));
var c2 = Math.sqrt(Math.pow(a2, 2) + Math.pow(b2, 2));
var avg_c = (c1 + c2) / 2;
var g = (1- Math.sqrt(Math.pow(avg_c, 7) / (Math.pow(avg_c, 7) + Math.pow(25, 7)))) / 2;
var a1p = a1 * (1 + g);
var a2p = a2 * (1 + g);
var c1p = Math.sqrt(Math.pow(a1p, 2) + Math.pow(b1, 2));
var c2p = Math.sqrt(Math.pow(a2p, 2) + Math.pow(b2, 2));
var avg_cp = (c1p + c2p) / 2;
var h1p = rad2deg(Math.atan2(b1, a1p));
if(h1p < 0){
h1p = h1p + 360;
}
var h2p = rad2deg(Math.atan2(b2, a2p));
if(h2p < 0){
h2p = h2p + 360;
}
var avg_hp = Math.abs(h1p - h2p) > 180 ? (h1p + h2p + 360) / 2 : (h1p + h1p) / 2;
var t = 1 - 0.17 * Math.cos(deg2rad(avg_hp - 30)) + 0.24 * Math.cos(deg2rad(2 * avg_hp)) + 0.32 * Math.cos(deg2rad(3 * avg_hp + 6)) - 0.2 * Math.cos(deg2rad(4 * avg_hp - 63))
var delta_hp = h2p - h1p;
if(Math.abs(delta_hp) > 180){
if (h2p <= h1p) {
delta_hp += 360;
}
else {
delta_hp -= 360;
}
}
var delta_lp = l2 - l1;
var delta_cp = c2p - c1p;
delta_hp = 2 * Math.sqrt(c1p * c2p) * Math.sin(deg2rad(delta_hp) / 2);
var s_l = 1 + ((0.015 * Math.pow(avg_lp - 50, 2)) / Math.sqrt(20 + Math.pow(avg_lp - 50, 2)));
var s_c = 1 + 0.045 * avg_cp
var s_h = 1 + 0.015 * avg_cp * t;
var delta_ro = 30 * Math.exp( - (Math.pow((avg_hp - 275) / 25, 2)));
var r_c = 2 * Math.sqrt(Math.pow(avg_cp, 7) / (Math.pow(avg_cp, 7) + Math.pow(25, 7)));
var r_t = -r_c * Math.sin(2 * deg2rad(delta_ro));
var kl = 1, kc =1, kh = 1;
var delta_e = Math.sqrt(Math.pow(delta_lp / (kl * s_l), 2) + Math.pow(delta_cp / (kc * s_c), 2) + Math.pow(delta_hp / (kh * s_h), 2) + r_t * (delta_cp / (kc * s_c)) * (delta_hp / (kh * s_h)))
return delta_e
function rad2deg(rad){
return 360 * rad / (2 * Math.PI);
}
function deg2rad(deg){
return (2 * Math.PI * deg) / 360;
}
}

13
src/common/bluetooth/color/colorSpace.js Normal file
View File

@ -0,0 +1,13 @@
import LabCom from './lab'
import XyzCom from './xyz'
import ColorDiff from './colorDiff'
export const toRgb = (lab) => {
let xyz = LabCom.xyz(lab)
return XyzCom.rgb(xyz)
}
export const Ediff = (lab1, lab2) => {
return ColorDiff(lab1, lab2)
}

54
src/common/bluetooth/color/lab.js Normal file
View File

@ -0,0 +1,54 @@
var xyz = require('./xyz');
module.exports = {
name: 'lab',
min: [0,-100,-100],
max: [100,100,100],
channel: ['lightness', 'a', 'b'],
alias: ['LAB', 'cielab'],
xyz: function(lab) {
var l = lab[0],
a = lab[1],
b = lab[2],
x, y, z, y2;
if (l <= 8) {
y = (l * 100) / 903.3;
y2 = (7.787 * (y / 100)) + (16 / 116);
} else {
y = 100 * Math.pow((l + 16) / 116, 3);
y2 = Math.pow(y / 100, 1/3);
}
x = x / 95.047 <= 0.008856 ? x = (95.047 * ((a / 500) + y2 - (16 / 116))) / 7.787 : 95.047 * Math.pow((a / 500) + y2, 3);
z = z / 108.883 <= 0.008859 ? z = (108.883 * (y2 - (b / 200) - (16 / 116))) / 7.787 : 108.883 * Math.pow(y2 - (b / 200), 3);
return [x, y, z];
}
};
//extend xyz
xyz.lab = function(xyz){
var x = xyz[0],
y = xyz[1],
z = xyz[2],
l, a, b;
x /= 95.047;
y /= 100;
z /= 108.883;
x = x > 0.008856 ? Math.pow(x, 1/3) : (7.787 * x) + (16 / 116);
y = y > 0.008856 ? Math.pow(y, 1/3) : (7.787 * y) + (16 / 116);
z = z > 0.008856 ? Math.pow(z, 1/3) : (7.787 * z) + (16 / 116);
l = (116 * y) - 16;
a = 500 * (x - y);
b = 200 * (y - z);
return [l, a, b];
};

9
src/common/bluetooth/color/rgb.js Normal file
View File

@ -0,0 +1,9 @@
module.exports = {
name: 'rgb',
min: [0,0,0],
max: [255,255,255],
channel: ['red', 'green', 'blue'],
alias: ['RGB']
};

138
src/common/bluetooth/color/xyz.js Normal file
View File

@ -0,0 +1,138 @@
var rgb = require('./rgb');
var xyz = {
name: 'xyz',
min: [0,0,0],
channel: ['X','Y','Z'],
alias: ['XYZ', 'ciexyz', 'cie1931']
};
/**
* Whitepoint reference values with observer/illuminant
*
* http://en.wikipedia.org/wiki/Standard_illuminant
*/
xyz.whitepoint = {
//1931 2°
2: {
//incadescent
A:[109.85, 100, 35.585],
// B:[],
C: [98.074, 100, 118.232],
D50: [96.422, 100, 82.521],
D55: [95.682, 100, 92.149],
//daylight
D65: [95.045592705167, 100, 108.9057750759878],
D75: [94.972, 100, 122.638],
//flourescent
// F1: [],
F2: [99.187, 100, 67.395],
// F3: [],
// F4: [],
// F5: [],
// F6:[],
F7: [95.044, 100, 108.755],
// F8: [],
// F9: [],
// F10: [],
F11: [100.966, 100, 64.370],
// F12: [],
E: [100,100,100]
},
//1964 10°
10: {
//incadescent
A:[111.144, 100, 35.200],
C: [97.285, 100, 116.145],
D50: [96.720, 100, 81.427],
D55: [95.799, 100, 90.926],
//daylight
D65: [94.811, 100, 107.304],
D75: [94.416, 100, 120.641],
//flourescent
F2: [103.280, 100, 69.026],
F7: [95.792, 100, 107.687],
F11: [103.866, 100, 65.627],
E: [100,100,100]
}
};
/**
* Top values are the whitepoint’s top values, default are D65
*/
xyz.max = xyz.whitepoint[2].D65;
/**
* Transform xyz to rgb
*
* @param {Array} xyz Array of xyz values
*
* @return {Array} RGB values
*/
xyz.rgb = function (_xyz, white) {
//FIXME: make sure we have to divide like this. Probably we have to replace matrix as well then
white = white || xyz.whitepoint[2].E;
var x = _xyz[0] / white[0],
y = _xyz[1] / white[1],
z = _xyz[2] / white[2],
r, g, b;
// assume sRGB
// http://www.brucelindbloom.com/index.html?Eqn_RGB_XYZ_Matrix.html
r = (x * 3.240969941904521) + (y * -1.537383177570093) + (z * -0.498610760293);
g = (x * -0.96924363628087) + (y * 1.87596750150772) + (z * 0.041555057407175);
b = (x * 0.055630079696993) + (y * -0.20397695888897) + (z * 1.056971514242878);
r = r > 0.0031308 ? ((1.055 * Math.pow(r, 1.0 / 2.4)) - 0.055)
: r = (r * 12.92);
g = g > 0.0031308 ? ((1.055 * Math.pow(g, 1.0 / 2.4)) - 0.055)
: g = (g * 12.92);
b = b > 0.0031308 ? ((1.055 * Math.pow(b, 1.0 / 2.4)) - 0.055)
: b = (b * 12.92);
r = Math.min(Math.max(0, r), 1);
g = Math.min(Math.max(0, g), 1);
b = Math.min(Math.max(0, b), 1);
return [r * 255, g * 255, b * 255];
}
/**
* RGB to XYZ
*
* @param {Array} rgb RGB channels
*
* @return {Array} XYZ channels
*/
rgb.xyz = function(rgb, white) {
var r = rgb[0] / 255,
g = rgb[1] / 255,
b = rgb[2] / 255;
// assume sRGB
r = r > 0.04045 ? Math.pow(((r + 0.055) / 1.055), 2.4) : (r / 12.92);
g = g > 0.04045 ? Math.pow(((g + 0.055) / 1.055), 2.4) : (g / 12.92);
b = b > 0.04045 ? Math.pow(((b + 0.055) / 1.055), 2.4) : (b / 12.92);
var x = (r * 0.41239079926595) + (g * 0.35758433938387) + (b * 0.18048078840183);
var y = (r * 0.21263900587151) + (g * 0.71516867876775) + (b * 0.072192315360733);
var z = (r * 0.019330818715591) + (g * 0.11919477979462) + (b * 0.95053215224966);
white = white || xyz.whitepoint[2].E;
return [x * white[0], y * white[1], z * white[2]];
};
module.exports = xyz;

146
src/common/bluetooth/command.js Normal file
View File

@ -0,0 +1,146 @@
import { uint32ToUint8Array, uint8ArrayToHex } from "./utils";
export class Command {
// 测量序号
static measureId = 1;
// 命令完整响应的长度
responseSize = 0;
// 命令发送的数据
content = new Uint8Array(0);
// 命令响应的数据
response = new Uint8Array(0);
// 等待响应的超时时间
timeout = 3000;
// 发送的数据是否需要生成和校验值
needSign = true;
/**
* @param {Uint8Array|ArrayBuffer|number[]} content
* @param {number} responseSize
* @param {number} timeout
* @param {boolean} needSign
*/
constructor(content, responseSize, timeout = 3000, needSign = true) {
if (content instanceof Uint8Array) {
this.content = content;
} else {
this.content = new Uint8Array(content);
}
this.responseSize = responseSize;
if (typeof timeout === 'number' && timeout >= 0) {
this.timeout = timeout;
}
this.needSign = needSign;
}
/**
* 返回一个 ArrayBuffer 数组, 用于发送
* @returns {ArrayBuffer[]}
*/
get data() {
if (this.content.length === 0) throw new Error('正文内容不能为空');
const data = [];
const b = new Uint8Array(this.content.buffer);
if (this.needSign) {
b[b.length - 1] = Command.getSign(b);
}
for (let i = 0; i < b.length; i += 20) {
data.push(b.slice(i, i + 20).buffer);
}
return data;
}
/** 是否接收完成 */
get isComplete() {
return this.response.length >= this.responseSize;
}
/** 是否有效 */
get isValid() {
return Command.getSign(this.response) === this.response[this.response.length - 1];
}
/**
* 填充响应数组
* @param {ArrayBuffer} buffer
*/
fillResponse(buffer) {
this.response = new Uint8Array([...this.response, ...(new Uint8Array(buffer))]);
}
/**
* 获取和校验值
* @param {ArrayBuffer|Uint8Array} buffer
*/
static getSign(buffer) {
const _b = buffer instanceof Uint8Array ? buffer : new Uint8Array(buffer);
let sum = 0;
_b.slice(0, _b.length - 1).forEach(i => sum += i);
return new Uint8Array([sum])[0];
}
// 唤醒命令
static WakeUp = new Command([0xf0], 0, 0, false);
/**
* 获取测量命令
* @param {number} mode
*/
static measure(mode = 0) {
Command.measureId += 1;
const measureId = uint32ToUint8Array(Command.measureId);
return new Command([0xbb, 1, mode, ...measureId, 0, 0xff, 0], 10, 1500);
}
/**
* 获取测量数据 (Lab)
* @param {number} mode
*/
static getLab(mode = 0) {
return new Command([0xbb, 3, mode, 0, 0, 0, 0, 0, 0xff, 0], 20, 1500);
}
/**
* 获取测量数据 (RGB)
* @param {number} mode
*/
static getRGB(mode = 0) {
return new Command([0xbb, 4, mode, 0, 0, 0, 0, 0, 0xff, 0], 20, 1500);
}
/**
* 获取测量的光谱数据
* @param {number} mode
*/
static getSpectral(mode = 0) {
return new Command([0xbb, 2, 0x10 + mode, 0, 0, 0 ,0 ,0, 0xff, 0], 200, 5000);
}
/**
* 白校准
* @param {number} check 是否判断校准成功 1 判断 0 不判断
*/
static whiteCalibrate(check = 1) {
return new Command([0xbb, 0x11, check, 0, 0, 0, 0, 0, 0xff, 0], 10, 1500);
}
/**
* 黑校准
* @param {number} check 是否判断校准成功
*/
static blackCalibrate(check = 1) {
return new Command([0xbb, 0x10, check, 0, 0, 0, 0, 0, 0xff, 0], 10, 1500);
}
/** 获取校准状态 */
static GetCalibrationInf = new Command([0xbb, 0x1e, 0, 0, 0, 0, 0, 0, 0xff, 0], 20, 1500);
static GetDeviceInf = new Command([0xbb, 0x12, 0x01, 0, 0, 0, 0, 0, 0xff, 0], 200, 5000);
}

70
src/common/bluetooth/utils.js Normal file
View File

@ -0,0 +1,70 @@
/**
* Uint32 转 Uint8 数组
* @param {number} n
*/
export function uint32ToUint8Array(n) {
return new Uint8Array(new Uint32Array([n]).buffer);
}
/**
* Uint8 数组 转 Float32
* @param {Uint8Array} raw
*/
export function uint8ArrayToFloat32(raw) {
return new Float32Array(raw.buffer)[0];
}
/**
* Uint8 数组 转 Uint16
* @param {Uint8Array} raw
*/
export function uint8ArrayToUint16(raw) {
return new Uint16Array(raw.buffer)[0];
}
/**
* Uint8 数组转 Uint32
* @param {Uint8Array} raw
* @returns
*/
export function uint8ArrayToUnit32(raw) {
return new Uint32Array(raw.buffer)[0];
}
/**
* 等待指定时长
* @param {number} duration
*/
export function waitFor(duration) {
return new Promise(resolve => {
setTimeout(resolve, duration);
});
}
/**
* uint8 数组转 hex 字符串
* @param {Uint8Array} raw
*/
export function uint8ArrayToHex(raw) {
const s = [];
raw.forEach(i => {
const b = i.toString(16);
s.push(b.length > 1 ? b : `0${b}`);
});
return s.join(' ');
}
// 二进制转字符串(ascii)
export function bufferToString(buffer) {
let str = "";
for (let code of buffer) {
if (code === 0) break;
str += utf82string(code);
}
return str;
}

17
src/common/client.js Normal file
View File

@ -0,0 +1,17 @@
import Taro from "@tarojs/taro";
/**
* 设置 客户 本地存储
* @param {Object} clientInfo
*/
export const setClient = (clientInfo) => {
Taro.setStorageSync('client', clientInfo)
}
/**
* 返回 客户 本地存储
*/
export const getClient = () => {
Taro.getStorageSync('client') || null
}

13
src/common/common.ts
View File

@ -87,3 +87,16 @@ export const retrieval = (data: any, message: string="请填写完信息", rules
resolve(null);
})
}
// 金额千位分割符
export const formatKbPrice = (number: string) => {
const ret = Array.from(number).reverse().reduce((result: string[],next,i,arr) => {
if((i+1)%3 === 0 && (i+1) !== arr.length) {
result.push(next,',')
return result;
}
result.push(next);
return result;
},[])
return ret.reverse().join('');
}

27
src/common/constant.js Normal file
View File

@ -0,0 +1,27 @@
// export const BASE_URL = CURRENT_ENV.includes('development') ? `https://test.zzfzyc.com/lymarket` : `https://www.zzfzyc.com/lymarket`
// export const BASE_URL = `http://192.168.0.75:50001/lymarket`
// export const BASE_URL = `http://192.168.0.89:50001/lymarket`
// export const BASE_URL = `http://10.0.0.5:50001/lymarket`
// export const BASE_URL = `http://192.168.0.89:40001/lymarket`
// export const BASE_URL = `http://192.168.1.165:40001/lymarket` // 王霞
// export const BASE_URL = `https://test.zzfzyc.com/lymarket` // 测试环境
// export const BASE_URL = `http://192.168.1.30:40001/lymarket` // 发
// export const BASE_URL = `https://dev.zzfzyc.com/lymarket` // 开发环境
// export const BASE_URL = `https://www.zzfzyc.com/lymarket` // 正式环境
// export const BASE_URL = `http://192.168.1.165:40001/lymarket` // 王霞
export const BASE_URL = `http://192.168.1.224:50001/lymarket` // 添
// CDN
// 生成密钥
export const GET_UPLOAD_SIGN = `/upyun/getsign` // 请求签名 url
export const UPLOAD_CDN_URL = `https://v0.api.upyun.com/`
// 前缀
export const IMG_CND_Prefix = "http://test.cdn.zzfzyc.com/"
// 上传图片视频
export const CDN_UPLOAD_IMG = `${UPLOAD_CDN_URL || ''}`;
//appid
export const WX_APPID = 'wx68d92d7cbf0b6963'

135
src/common/fotmat.js Normal file
View File

@ -0,0 +1,135 @@
/**
* 移除井号
* @param {String} val code 编码
* @returns
*/
export const formatRemoveHashTag = (val = "") => {
// console.log('移除标签',val,val.endsWith("#"));
return val.endsWith("#") ? val.replace("#", "") : val;
};
/**
* 格式化编码+名称显示方式
* @param {String} code 编码
* @param {String} name 名称
* @param {*} mode 模式 both:code + 名称 name: 仅显示名称
* @returns
*/
export const formatHashTag = (code = "", name = "", mode = "both") => {
if (mode == 'both') {
return `${formatRemoveHashTag(code)}# ${name}`
} else if (mode == 'name') {
return `${name}`
}
}
const Digit = 10 * 10
/**
* 重量 进退位 单位
*/
export const weightDigit = 1000
/**
* 除以
* @param {*} val
* @param {*} digit
* @returns
*/
export const formatPriceDiv = (val, digit = Digit) => {
return strip(Number(val / digit)) || 0
}
/**
* 乘以
* @param {*} val
* @param {*} digit
* @returns
*/
export const formatPriceMul = (val, digit = Digit) => {
return strip(Number(val * digit)) || 0
}
/**
* 格式化重量单位 (乘以)
* @param {Number} val
* @returns
*/
export const formatWeightMul = (val, digit = weightDigit) => {
return strip(Number(val * digit)) || 0
}
/**
* 格式化重量单位 (除以)
* @param {*} val
*/
export const formatWeightDiv = (val, digit = weightDigit) => {
return strip(Number(val / digit)) || 0
}
export const formatDateTime = (val, fmt = "YYYY-MM-DD HH:mm:ss") => {
if (val) {
let time = new Date(val)
let Y = time.getFullYear()
let M = time.getMonth() + 1
let d = time.getDate()
let h = time.getHours()
let m = time.getMinutes()
let s = time.getSeconds()
fmt = fmt.replace('YYYY', Y).replace('MM', M.toString().padStart(2, '0')).replace('DD', d.toString().padStart(2, '0')).replace('HH', h.toString().padStart(2, '0')).replace('mm', m.toString().padStart(2, '0')).replace('ss', s.toString().padStart(2, '0'))
// fmt = fmt.replace('MM', M)
// fmt = fmt.replace('DD', d)
// fmt = fmt.replace('HH', h)
// fmt = fmt.replace('mm', m)
// fmt = fmt.replace('ss', s)
return fmt
} else {
return val
}
}
/**
* 精度
* @param {*} num
* @param {*} precision
* @returns
*/
export const strip = (num, precision = 12) => {
return +parseFloat(num.toPrecision(precision));
}
/**
* 转换金额单位
* @param {*} num 金额 / 数值
* @param {*} digit 转换单位
* @returns
*/
export const formatMillionYuan = (num, digit = 10000) => {
return num / digit > 1 ? { num: toDecimal2(num / digit), million: true } : { num, million: false }
}
/**
* 数值保留两位小数
* @param {*} x
* @returns
*/
export const toDecimal2 = (x) => {
var f = parseFloat(x);
if (isNaN(f)) {
return 0;
}
f = f + "";
let index = f.lastIndexOf('.');
if (index >= 0) {
let decimal = f.substring(index + 1);
if (decimal.length == 1) {
f = f.substring(0, index + 1) + decimal + "0";
} else {
f = f.substring(0, index + 1) + decimal.substring(0, 2);
}
}
return f;
}

34
src/common/system.js Normal file
View File

@ -0,0 +1,34 @@
import Taro from "@tarojs/taro";
/**
* 设置 系统 本地存储
* @param {Object} systemInfo
*/
export const setSystem = (systemInfo) => {
Taro.setStorageSync('system', JSON.stringify(systemInfo))
}
/**
* 返回 系统 本地存储
*/
export const getSystem = () => {
const result = Taro.getStorageSync('system')
return result ? JSON.parse(result) : null
}
/**
* 设置 小程序 本地存储
* @param {Object} systemInfo
*/
export const setAccountInfo = (systemInfo) => {
Taro.setStorageSync('accountInfo', JSON.stringify(systemInfo))
}
/**
* 返回 系统 本地存储
*/
export const getAccountInfo = () => {
const result = Taro.getStorageSync('accountInfo')
return result ? JSON.parse(result) : null
}

150
src/common/uploadImage.js Normal file
View File

@ -0,0 +1,150 @@
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

36
src/common/user.js Normal file
View File

@ -0,0 +1,36 @@
import Taro from "@tarojs/taro";
import { useStore } from "vuex";
import { computed } from "@vue/runtime-core";
/**
*
* @param {String} token
*/
export const setToken = (token) => {
Taro.setStorageSync('token', token)
}
/**
*
* @param {Object} userinfo
*/
export const setUserInfo = (userinfo) => {
Taro.setStorageSync('userInfo', userinfo)
}
/**
* 检查登录
*/
export const checkLogin = () => {
const store = useStore()
const token = computed(() => store.state.token)
console.log('checklogin token', token);
// 本地调试屏蔽
if (token == '') {
Taro.redirectTo({
url: '/pages/login/index',
})
}
}

93
src/common/util.js Normal file
View File

@ -0,0 +1,93 @@
/**
* 防抖
* @param {*} fn
* @param {*} delay
* @returns
*/
export const debounce = (fn, delay) => {
let timer = null;
return (...param) => {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
fn(...param);
}, delay);
};
}
/**
* 节流
* @param {*} fn
* @param {*} delay
* @returns
*/
export const throttle = (fn, delay) => {
let pre = 0;
return (...params) => {
let now = new Date().getTime();
console.log('相差:',now-pre)
if (now - pre > delay) {
fn(...params);
pre = now;
}
};
}
/**
* 批量过滤对象值为空的属性
* @param {Object} val 需要过滤的对象
* @param {Array} arr 排除过滤的属性
* @returns
*/
export const getFilterData = (val = {}, arr = []) => {
let res = {}
for(let key in val) {
if(val[key]!=undefined&&val[key]!=null&&(!arr.includes(key))){
if(val[key] instanceof Number){
if(!isNaN(val[key])) {
res[key] = val[key]
}
}else{
res[key] = val[key]
}
}
}
return res
}
/**
* 对象深拷贝
* @param {*} object
* @returns
*/
export const copyObject = (object)=>{
if(object.constructor==Object){
let keys = Object.keys(object);
let newObject = {};
keys.map(key=>{
newObject[key]= copyObject(object[key]);
})
return newObject;
}else if(object.constructor==Array){
return object.map(item=>{
return copyObject(item);
})
}else{
return object;
}
}
/**
*
* @param {*} suffix
* !w80
!w100
!w160
!w200
!w400
!w800
!wh400
!w600
*/
export const screenshot = (url, suffix="!w200")=>{
return url+suffix;
}

0
src/components/swiper/index.module.scss → src/components/banner/index.module.scss
View File

51
src/components/banner/index.tsx Normal file
View File

@ -0,0 +1,51 @@
import { Image, Swiper, SwiperItem, View } from "@tarojs/components"
import { goLink } from "@/common/common"
import {GetBannerList} from "@/api/banner"
import styles from './index.module.scss'
import { useEffect, useState } from "react"
type item = {title:string, img:string, url:string, id:number}
type params = {
list?: item[]
swiperOnClick?: (val: item) => void,
style?: Object
}
export default (props:params) => {
let {swiperOnClick, style = {}} = props
const [list, setList] = useState<any[]>([])
const {fetchData, state} = GetBannerList()
useEffect(() => {
getData()
}, [])
const getData = async () => {
const res = await fetchData()
setList(res.data.list)
}
return (
<View className={styles.swiper_con} style={style}>
<Swiper
className={styles.xswiper}
indicatorColor='#ccc'
indicatorActiveColor='#fff'
circular
indicatorDots
autoplay>
{
list?.map(item => {
return <SwiperItem key={item.id}>
<View className={styles.image_item} onClick={() => goLink(item.link)}>
<Image mode="aspectFill" src={item.prev_view_url}></Image>
</View>
</SwiperItem>
})
}
</Swiper>
</View>
)
}

90
src/components/bluetooth/LinkBlueTooth.tsx Normal file
View File

@ -0,0 +1,90 @@
import { View } from "@tarojs/components";
import { memo, useEffect, useMemo, useState } from "react";
import Taro from "@tarojs/taro";
import {useBluetooth} from "@/use/contextBlueTooth"
import SearchInput from "@/components/searchInput";
import Popup from "@/components/bluetooth/Popup"
import classnames from "classnames";
import styles from "./css/linkBlueTooth.module.scss"
export default memo(() => {
const {state, init, startScan, connect, disconnect} = useBluetooth()
useEffect(() => {
init()
}, [])
const [linkStatus, setLinkStatus] = useState(1)
useEffect(() => {
if(!state.available) {
setLinkStatus(1)
} else if(state.available&&state.connected?.name) {
setLinkStatus(3)
} else {
setLinkStatus(2)
}
console.log('aaa:::',state.connected)
}, [state.available, state.connected])
const linkName = useMemo(() => {
return state.connected?.localName||''
}, [state.connected])
//链接设备
const onLinkListen = (item) => {
if(!state.connected&&!state.connecting)
connect(item)
}
const [popupShow, setPopupShow] = useState(false)
//显示设备列表
const onFindDevice = () => {
if(linkStatus == 1) {
Taro.showToast({
title:'请打开蓝牙',
icon:'none'
})
} else {
setPopupShow(true)
onFindEven()
}
}
const onFindEven = () => {
if(!state.discovering&&!state.connected&&!state.connecting)
startScan()
}
//断开链接
const onDisconnect = () => {
disconnect()
setPopupShow(false)
}
return (
<>
<View className={styles.main}>
<SearchInput title="蓝牙设备" showIcon={true}>
<View className={styles.bluetooth_link} onClick={onFindDevice}>
<View className={classnames(styles.link_status, linkStatus == 3 &&styles.link_statused, linkStatus == 2&&styles.link_statused_no)}></View>
{
linkStatus == 1&&<View className={classnames(styles.link_name, styles.link_name_no)}>请开启蓝牙</View>||
linkStatus == 2&&<View className={classnames(styles.link_name,styles.link_name_no_link) }>未连接设备</View>||
linkStatus == 3&&<View className={classnames(styles.link_name)}>{linkName}</View>
}
</View>
</SearchInput>
<Popup
state={state}
show={popupShow}
onClose={() => setPopupShow(false)}
onLink={item => onLinkListen(item)}
onOff={onDisconnect}
onFind={onFindEven}
/>
</View>
</>
);
})

73
src/components/bluetooth/Popup.tsx Normal file
View File

@ -0,0 +1,73 @@
import { ScrollView, View } from "@tarojs/components"
import { memo, useEffect, useState } from "react"
import Loading from "@/components/loading"
import style from "./css/popup.module.scss"
interface params {
state: any,
show: Boolean,
onClose: (Boolean) => void,
onLink: (any) => void,
children?: React.ReactNode
onOff: () => void,
onFind: () => void,
}
export default memo(({state, show=false, onClose, onLink, onOff, onFind}:params) => {
const [popupShow, setPopupShow] = useState(show)
useEffect(() => {
setPopupShow(show)
}, [show])
const onCloseListener = () => {
onClose(false)
}
return (
<>
{
popupShow&&<View className={style.popup}>
<View className={style.content}>
<View className={style.title}>搜索设备</View>
<View className={style.list}>
<ScrollView scrollY className={style.scroll}>
{
(state.devices&&state.devices.length > 0)&&state?.devices.map(item => {
return (
<View className={style.item} onClick={() => onLink(item)}>
<View>{item.name}</View>
{
(!state.connecting&&!state.connected)&&<View >链接</View>||
(state.connecting&&item.deviceId == state.connecting.deviceId)&&<View className={style.link_ing}>正在链接...</View>||
(state.connected&&item.deviceId == state.connected.deviceId)&&<View className={style.link_success}>链接成功</View>
}
</View>
)
})||
<View className={style.noDevice}>
{
(!state.discovering)&& <>
<View>暂无设备,请按以下条件检查</View>
<View className={style.n_item}>1.请确保取色仪处于激活状态</View>
<View className={style.n_item}>2.请确保取色仪没有链接其他设备</View>
<View className={style.n_item}>3.请打开手机定位</View>
</>||
<View>设备搜索中</View>
}
</View>
}
</ScrollView>
</View>
{
state.connected&&<View className={`${style.footer} ${style.footer_off}`} onClick={onOff}>断开链接</View>||
(!state.connected&&state.discovering)&&<View className={`${style.footer} ${style.finding}`}>搜索中<Loading width={30} color='orange'/></View>||
<View className={style.footer} onClick={onFind}>重新搜索</View>
}
</View>
<View className={style.mask} onClick={onCloseListener}></View>
</View>
}
</>
)
})

30
src/components/bluetooth/css/linkBlueTooth.module.scss Normal file
View File

@ -0,0 +1,30 @@
.main{
.bluetooth_link{
display: flex;
align-items: center;
.link_status{
width: 12px;
height: 12px;
background: #f02409;
border-radius: 50%;
}
.link_statused{
background: #07C160;
}
.link_statused_no{
background: #f0ec09;
}
.link_name{
font-size: $font_size;
margin-left: 20px;
}
.link_name_no{
color: #f02409;
}
.link_name_no_link{
color: #f0ec09;
}
}
}

90
src/components/bluetooth/css/popup.module.scss Normal file
View File

@ -0,0 +1,90 @@
.popup{
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
.mask{
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
position: fixed;
top:0;
left:0;
z-index: 9;
}
.content{
z-index: 99;
background-color: #fff;
width: 75vw;
height: 600px;
position: fixed;
top: 50%;
left: 50%;
border-radius: 20px;
transform: translateX(-50%) translateY(-50%);
display: flex;
flex-direction: column;
font-size: 28px;
.title{
text-align: center;
margin: 20px;
}
.list{
height: 480px;
padding: 0 20px;
.scroll{
height: 100%;
}
.item{
margin-bottom: 20px;
display: flex;
justify-content: space-between;
border-bottom: 1px dashed #ccc;
padding: 15px 0;
color: #3b3b3b;
@mixin link{
font-size: 25px;
}
.link_success{
@include link;
color: green;
}
.link_ing {
color: orange;
}
}
.noDevice{
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #a8a8a8;
.n_item{
width: 100%;
text-align: left;
margin-top: 20px;
padding: 0 30px;
box-sizing: border-box;
}
}
}
.footer{
text-align: center;
padding: 20px 0;
background-color: #f1f1f1;
border-radius: 0 0 10px 10px;
display: flex;
justify-content: center;
align-items: center;
}
.finding{
color: orange;
}
.footer_off{
color: red;
}
}
}

1
src/components/infiniteScroll/index.module.scss
View File

@ -1,6 +1,7 @@
.scroll_main{
height: 100%;
.infinite_scroll{
font-size: $font_size_medium;
color: $color_font_two;

14
src/components/infiniteScroll/index.tsx
View File

@ -7,6 +7,7 @@ type Params = {
styleObj?: Object,
selfonScrollToLower?: () => void,
hasMore?: false|true,
moreStatus?: false|true,
children?: ReactNode,
lowerThresholdNum?: number,
selfOnScrollToUpper?:() => void
@ -17,7 +18,7 @@ type Params = {
selfOnRefresherAbort?: () => void
paddingBottom?: number,
refresherTriggered?: true|false,
refresherEnabled?: true|false
refresherEnabled?: true|false,
}
export default memo(({
styleObj,
@ -33,7 +34,8 @@ export default memo(({
lowerThresholdNum = 5,
paddingBottom = 0,
refresherTriggered = false,
refresherEnabled = false
refresherEnabled = false,
moreStatus = true
}: Params) => {
const scrollToLower = () => {
selfonScrollToLower?.()
@ -73,16 +75,16 @@ export default memo(({
onRefresherRefresh = {() => refresherRefresh()}
onRefresherRestore = {() => refresherRestore()}
onRefresherAbort = {() => refresherAbort()}
refresherBackground ='#ccc'
refresherBackground ='#F8F8F8'
>
<View style={{paddingBottom:paddingBottom + 'rpx'}}>
{children}
<View className={style.infinite_scroll}>
{moreStatus&&<View className={style.infinite_scroll}>
{
hasMore&&<View className={style.loading_more}>加载中<DotLoading/></View>||
<View>没有更多了</View>
<View>没有更多数据了</View>
}
</View>
</View>}
</View>
<View className="common_safe_area_y"></View>

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

@ -12,6 +12,7 @@
display: flex;
justify-content: center;
align-items: center;
z-index:999;
.shop_icon{
font-size: 50px;
color: $color_main;

26
src/components/product/index.tsx
View File

@ -3,27 +3,27 @@ import Taro from "@tarojs/taro"
import { goLink } from "@/common/common"
import styles from './index.module.scss'
type params = {
desStatus?: true|false
type Params = {
desStatus?: true|false,
productList?: any[]
}
export default ({desStatus = true}: params) => {
export default ({desStatus = true, productList = []}:Params) => {
return (
<View className={styles.products_list}>
{new Array(10).fill('').map(item => {
return <View className={styles.products_item} onClick={() => goLink('/pages/details/index?id=1')}>
{productList?.map(item => {
return <View className={styles.products_item} onClick={() => goLink(`/pages/details/index?id=${item.id}`)}>
<View className={styles.item_img}>
<Image src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp01%2F1ZZQ214233446-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651827249&t=b2fc2a3672dc8ced9e0f37ce7e2ff901"/>
<View className={styles.num}>230色</View>
<Image src={item.texture_url}/>
<View className={styles.num}>{item.product_color_count}色</View>
</View>
<View className={styles.item_con}>
<View className={styles.title}><text>0770#</text>21S单面平纹(食毛)</View>
<View className={styles.title}><text>{item.code}#</text>{item.name}</View>
<View className={styles.tag_list}>
<View className={styles.tag}>160cm</View>
<View className={styles.tag}>110g</View>
<View className={styles.tag}>{item.width}</View>
<View className={styles.tag}>{item.weight_density}</View>
</View>
<View className={styles.introduce}>67.6%棉24%涤纶6.4%氨纶</View>
{desStatus&&<View className={styles.des}>产品描述产品描述产品描述产品描述产品描述</View>}
<View className={styles.introduce}>{item.component}</View>
{desStatus&&<View className={styles.des}>{item.describe}</View>}
</View>
</View>
})}

3
src/components/search/index.module.scss
View File

@ -20,6 +20,7 @@
border-radius: 50px;
padding: 0 60px;
box-sizing: border-box;
z-index:0;
&::-webkit-input-placeholder { /* WebKit browsers */
color: #999;
font-size: 16px;
@ -55,7 +56,7 @@
position: absolute;
left: 10px;
margin-right: 0;
z-index: 10;
}
.icon_out{
margin-right: 10px;

25
src/components/search/index.tsx
View File

@ -2,7 +2,8 @@ import { Input, View } from "@tarojs/components";
import styles from "./index.module.scss"
import CloseBtn from "@/components/closeBtn"
import classnames from "classnames";
import { memo, useEffect, useState } from "react";
import { debounce } from "@/common/util";
import { memo, useEffect, useRef, useState } from "react";
type Params = {
clickOnSearch?: (val: string) => void
@ -14,7 +15,8 @@ type Params = {
style?: Object,
showBtn?: false|true,
btnStyle?: Object,
btnTitle?: string
btnTitle?: string,
debounceTime?: number //防抖时间，不设默认为零
}
export default memo(({
@ -24,17 +26,21 @@ export default memo(({
placeholder = '输入搜索内容',
showIcon = true,
showBtn = false,
style = {},
btnStyle = {},
placeIcon = 'inner',
btnTitle = '搜索'
btnTitle = '搜索',
debounceTime = 0
}:Params) => {
const [inputCon , setInputCon] = useState('')
const debounceTimeRef = useRef(0)
useEffect(() => {
debounceTimeRef.current = debounceTime
}, [debounceTime])
const onInputEven = (e) => {
const value = e.detail.value
setInputCon(value)
changeOnSearch?.(value)
changeData(value)
}
const clearInput = () => {
@ -42,13 +48,18 @@ export default memo(({
changeOnSearch?.('')
}
const changeData = debounce((value) => {
setInputCon(value)
changeOnSearch?.(value)
}, debounceTimeRef.current)
const onSearch = () => {
clickOnSearch?.(inputCon)
}
return (
<>
<View className={styles.search_main} onClick={() => onSearch()} style={style}>
<View className={styles.search_main} onClick={() => clickOnSearch?.(inputCon)}>
<View className={styles.search_con}>
{showIcon&&<View className={classnames('iconfont', 'icon-sousuo', styles.icon_a_sousuo1_self, placeIcon=='inner'?styles.icon_inner:styles.icon_out)}></View>}
<Input placeholderStyle='color:#ABABAB; font-size:26rpx' className={classnames(placeIcon=='out'&&styles.input_out)} disabled={disabled} value={inputCon} placeholder={placeholder} onInput={(e) => onInputEven(e)}></Input>

37
src/components/searchInput/index.module.scss Normal file
View File

@ -0,0 +1,37 @@
.searchInput_main{
display: flex;
align-items: center;
min-height: 62px;
padding: 10px 0;
border-bottom: 1px solid #F0F0F0;
.searchInput_title {
width: 150px;
min-height: 50px;
font-size: 28px;
border-right: 1px solid #F0F0F0;
color: $color_font_two;
margin-right: 20px;
padding-left: 20px;
display: flex;
align-items: center;
// &::before{
// content: "";
// height: 50px;
// width: 1px;
// background-color: #F0F0F0;
// }
}
.searchInput_con{
flex:1;
width: 100%;
input{
font-size: 26px;
}
}
.icon_more_self{
font-size: 28px;
color: $color_font_two;
}
}

48
src/components/searchInput/index.tsx Normal file
View File

@ -0,0 +1,48 @@
import { Input, View } from "@tarojs/components";
import { memo, ReactHTMLElement, ReactNode, useDebugValue, useMemo } from "react";
import styles from './index.module.scss';
type Params = {
showIcon?: false|true,
disabled?: false|true,
placeholder?: string,
title?: string,
showTitle?: false|true,
showBorder?: false|true,
changeOnInput?: (string) => void,
clickOnInput?: () => void,
children?: ReactNode
}
export default memo((props: Params) => {
let {
showTitle = true,
title = '标题',
showIcon = false,
disabled = false,
placeholder = '请输入',
showBorder = true,
changeOnInput,
clickOnInput
} = props
let stylen = useMemo(() => {
if(!showBorder) {
return { borderBottom: 0 }
}
return {}
}, [showBorder])
console.log('searchInput::')
return (
<View className={styles.searchInput_main} style={stylen}>
{showTitle&&<View className={styles.searchInput_title}>{title}</View>}
<View className={styles.searchInput_con}>
{!props.children&&<Input disabled={disabled} placeholder={placeholder} onClick={() => clickOnInput?.()} onInput={(e) => changeOnInput?.(e.detail.value)}/>
||<View>{props.children}</View>
}
</View>
{showIcon&&<View className={`iconfont icon-jiantou ${styles.icon_more_self}`}></View>}
</View>
)
})

32
src/components/shopCart/index.tsx
View File

@ -7,6 +7,8 @@ import InfiniteScroll from "@/components/infiniteScroll";
import styles from "./index.module.scss"
import { useEffect, useState } from "react";
import Taro from "@tarojs/taro";
import { goLink } from "@/common/common";
import {GetShoppingCartApi} from "@/api/shopCart"
type param = {
show?: true|false,
@ -19,21 +21,21 @@ export default ({show = false, onClose}: param) => {
setSelectIndex(index)
}
//获取数据
const [list, setList] = useState<any[]>([])
const [loading, setLoading] = useState(false)
const {fetchData} = GetShoppingCartApi()
const getShoppingCart = async () => {
setLoading(true)
const {data} = await fetchData()
setList(data)
setLoading(false)
}
useEffect(() => {
if(!show) return
let lists:any[] = []
for(let i = 0; i < 20; i++) {
lists = [...lists, {
title:`${i}#薄荷绿`,
subtitle: '0770# 21S单面平纹(食毛)',
tag: '剪板',
select: i%2?true: false
}]
}
setList([...lists])
getShoppingCart()
}, [show])
useEffect(() => {
@ -92,6 +94,8 @@ export default ({show = false, onClose}: param) => {
})
}
return (
<View className={styles.shop_cart_main}>
<Popup showTitle={false} show={showPopup} onClose={() => closePopup()}>
@ -111,7 +115,7 @@ export default ({show = false, onClose}: param) => {
</View>
<View className={styles.con}>
{loading&&<LoadingCard/>}
{!loading&&list.length > 0&&<InfiniteScroll selfonScrollToLower={() => {console.log('触底了')}} paddingBottom={100}>
{!loading&&list.length > 0&&<InfiniteScroll refresherTriggered={true} refresherEnabled={true} selfonScrollToLower={() => {console.log('触底了')}} paddingBottom={100}>
<View className={styles.product_list}>
{list.map((item, index) => {
return <View key={index} className={styles.product_item}>
@ -123,7 +127,7 @@ export default ({show = false, onClose}: param) => {
</View>
<View className={styles.des}>
<View className={styles.title}>{item.title}</View>
<View className={styles.subtitle}>0770# 21S单面平纹(食毛)</View>
<View className={styles.subtitle}>07703# 21S单面平纹(食毛)</View>
<View className={styles.tag}>剪板</View>
</View>
<View className={styles.count}>
@ -134,7 +138,7 @@ export default ({show = false, onClose}: param) => {
})}
</View>
</InfiniteScroll>}
{!loading&&list.length > 0&&<View className={styles.empty}>
{!loading&&list.length == 0 &&<View className={styles.empty}>
<View className={styles.title}>暂未选择商品</View>
<View className={styles.btn}>去选购</View>
</View>}
@ -149,7 +153,7 @@ export default ({show = false, onClose}: param) => {
<View className={styles.price_real}><text>￥</text>200</View>
<View className={styles.price_forecast}>预估金额</View>
</View>
<View className={styles.goPay}>
<View className={styles.goPay} onClick={() => goLink('/pages/order/index')}>
去结算
</View>
</View>

57
src/components/sideBar/index.tsx
View File

@ -1,42 +1,57 @@
import { ScrollView, View } from "@tarojs/components"
import { memo, ReactNode, useRef, useState } from "react"
import { memo, ReactNode, useEffect, useRef, useState } from "react"
import styles from "./index.module.scss"
import classnames from "classnames";
import Taro, { useReady } from "@tarojs/taro";
import InfiniteScroll from "../infiniteScroll";
type ListProps = {
title: string,
value: number
}
type Params = {
list?: ListProps[],
list?: any[],
defaultValue?: number|string,
children?: ReactNode,
height?: string,
heightItem?: number,
sideBarOnClick?: (ListProps) => void
sideBarOnClick?: (val:any) => void,
refresherTriggered?: true|false,
selfOnRefresherRefresh?: () => void
selfOnScrolltolower?: () => void,
hasMore?: true|false
}
export default memo(({list = [], defaultValue = 0, height='100vh', sideBarOnClick, children, heightItem = 100}: Params) => {
export default memo(({list = [],
defaultValue = 0,
height='100vh',
sideBarOnClick,
children,
heightItem = 100,
refresherTriggered = false,
selfOnRefresherRefresh,
selfOnScrolltolower,
hasMore = true
}: Params) => {
let num_half = useRef(0)
const [selected, setSelected] = useState(defaultValue)
const [tabId, setTabId] = useState('')
useEffect(() => {
setSelected(defaultValue)
}, [defaultValue])
const init = () => {
const index = list?.findIndex(item => {
return item.value == defaultValue
return item.id == defaultValue
})
if(index !== -1) {
computeSelectTab(index)
}
}
const clickEvent = ({item, index}: {item:ListProps, index:number}) => {
setSelected(item.value)
const clickEvent = ({item, index}: {item, index:number}) => {
setSelected(item.id)
sideBarOnClick?.(item)
computeSelectTab(index)
}
@ -44,9 +59,10 @@ export default memo(({list = [], defaultValue = 0, height='100vh', sideBarOnClic
const computeSelectTab = (index) => {
if((index + 1) > num_half.current) {
let num = index + 1 - num_half.current
setTabId(list[num].value.toString())
setTabId(list[num].id.toString())
} else {
setTabId(list[0].value.toString())
setTabId(list[0].id.toString())
}
}
@ -65,10 +81,7 @@ export default memo(({list = [], defaultValue = 0, height='100vh', sideBarOnClic
})
})
//触底事件
const onScrolltolower = () => {
console.log('触底了')
}
return (
<>
@ -78,14 +91,14 @@ export default memo(({list = [], defaultValue = 0, height='100vh', sideBarOnClic
list?.map((item, index) => {
return(
<View
className={classnames(styles.sideBar_select_title, {[styles.sideBar_select_title_select]:(selected == item.value)})}
className={classnames(styles.sideBar_select_title, {[styles.sideBar_select_title_select]:(selected == item.id)})}
onClick={() => clickEvent({item, index})}
id={`tab_${item.value}`}
key={item.value}
id={`tab_${item.id}`}
key={item.id}
style={{height:heightItem+'rpx'}}
>
<View className={styles.title_con}>
{item.title}
{item.name}
</View>
</View>
)
@ -94,7 +107,7 @@ export default memo(({list = [], defaultValue = 0, height='100vh', sideBarOnClic
<View className="common_safe_area_y"></View>
</ScrollView>
<View className={styles.sideBar_con}>
<InfiniteScroll selfonScrollToLower={() => onScrolltolower()}>
<InfiniteScroll hasMore={hasMore} selfonScrollToLower={() => selfOnScrolltolower?.()} refresherTriggered={refresherTriggered} refresherEnabled={true} selfOnRefresherRefresh={() => selfOnRefresherRefresh?.()}>
{children}
</InfiniteScroll>
</View>

52
src/components/swiper/index.tsx
View File

@ -1,52 +0,0 @@
import { Image, Swiper, SwiperItem, View } from "@tarojs/components"
import { goLink } from "@/common/common"
import Taro from "@tarojs/taro"
import styles from './index.module.scss'
type item = {title:string, img:string, url:string, id:number}
type params = {
list?: item[]
swiperOnClick?: (val: item) => void,
style?: Object
}
export default (props:params) => {
let {list = [], swiperOnClick, style = {}} = props
list = [
{
title:'数据',
img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d',
url:'',
id:1
},
{
title:'数据',
img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d',
url:'',
id:2
}
]
return (
<View className={styles.swiper_con} style={style}>
<Swiper
className={styles.xswiper}
indicatorColor='#ccc'
indicatorActiveColor='#fff'
circular
indicatorDots
autoplay>
{
list.map(item => {
return <SwiperItem key={item.id}>
<View className={styles.image_item} onClick={() => goLink(`/pages/classList/index?id=${item.id}`)}>
<Image mode="aspectFill" src={item.img}></Image>
</View>
</SwiperItem>
})
}
</Swiper>
</View>
)
}

24
src/components/tabs/index.module.scss
View File

@ -1,20 +1,28 @@
.tabs_main{
display: flex;
width: 100%;
.tabs_scroll{
width: 100%;
display: flex;
white-space: nowrap;
border-bottom: 1px solid $color_font_two;
border-top: 1px solid $color_font_two;
height: 102px;
::-webkit-scrollbar {
display:none;
width:0;
height:0;
color:transparent;
}
.tabs_item{
flex:1;
display: inline-block;
padding: 10px 20px;
height: 100%;
box-sizing: border-box;
position: relative;
font-size: 24rpx;
background-color: #F0F0F0;
border-radius: 24rpx;
min-width: 126rpx;
height: 46.93rpx;
text-align: center;
line-height: 46.93rpx;
color: #707070;
margin-right: 20px;
.tabs_item_con{
height: 100%;
display: flex;

7
src/components/tabs/index.tsx
View File

@ -13,10 +13,12 @@ type Params = {
list?: ListProps[],
defaultValue?: number|string,
children?: ReactNode,
tabsOnClick?: (ListProps) => void
tabsOnClick?: (ListProps) => void,
style?:Object,
}
export default memo(({list = [], defaultValue = 0, tabsOnClick}: Params) => {
export default memo(({list = [], defaultValue = 0, tabsOnClick, style={}}: Params) => {
const [selected, setSelected] = useState(defaultValue)
const [tabId, setTabId] = useState('')
@ -47,7 +49,6 @@ export default memo(({list = [], defaultValue = 0, tabsOnClick}: Params) => {
return (
<View key={item.value} id={`tabs_${item.value}`} className={styles.tabs_item} onClick={() => clickEvent({item,index})}>
<View className={classnames(styles.tabs_item_con, {[styles.tabs_item_select]:selected == item.value})}>{item.title}</View>
{(selected == item.value) && <View className={styles.tabs_index}></View>}
</View>
)
})

6
src/constants/userInfo.ts Normal file
View File

@ -0,0 +1,6 @@
export const SET_USERINFO = 'setUserInfo'
export const SET_TOKEN = 'setToken'
export const SET_SESSIONKEY = 'setSessionkey'
export const CLEAR_TOKEN = 'clearToken'
export const CLEAR_SESSIONKEY = 'clearSessionkey'
export const CLEAR_USERINFO = 'clearUserInfo'

15
src/pages/classList/index.module.scss
View File

@ -15,6 +15,8 @@
color: $color_font_three;
.text_one{
color: $color_main;
display: flex;
align-items: center;
}
.text_two{
position: relative;
@ -33,20 +35,11 @@
}
}
}
.filter_btn{
.filter_btns{
display: flex;
justify-content: space-between;
padding: 20px;
view{
font-size: $font_size_medium;
background-color: #F0F0F0;
border-radius: 24px;
width: 126px;
height: 46.93px;
text-align: center;
line-height: 46.93px;
color: $color_font_three;
}
.selected{
background-color: #ecf5ff;
border: 2px solid #cde5ff;

25
src/pages/classList/index.tsx
View File

@ -7,9 +7,22 @@ import Popup from "@/components/popup";
import styles from './index.module.scss'
import { useState } from "react";
import Filter from "./components/filter";
import Tabs from "@/components/tabs";
import SortBtn from "@/components/sortBtn";
export default () => {
const [showPopup, setShowPopup] = useState(false)
const [selectList, setSelectList] = useState([
{title: '系列', value:1},
{title: '系列', value:2},
{title: '系列', value:3},
{title: '系列', value:4},
{title: '系列', value:6},
{title: '系列', value:7},
{title: '系列', value:8},
{title: '系列', value:9},
{title: '系列', value:10},
])
return (
<View className={styles.main}>
<View className={styles.search}>
@ -17,17 +30,17 @@ export default () => {
</View>
<View className={styles.filter}>
<View className={styles.filter_all}>
<View className={styles.text_one}>综合</View>
<View className={styles.text_one}>
<Text>综合</Text>
<SortBtn status="top"/>
</View>
<View className={styles.text_two} onClick={() => setShowPopup(true)}>
<Text>筛选</Text>
<Text className={classnames('iconfont icon-bianji_bianji', styles.miconfont)}></Text>
</View>
</View>
<View className={styles.filter_btn}>
<View>系列</View>
<View>幅宽</View>
<View>克重</View>
<View className={styles.selected}>成分</View>
<View className={styles.filter_btns}>
<Tabs list={selectList} style={{}}/>
</View>
</View>
<View className={styles.list}>

13
src/pages/details/components/counter/index.tsx
View File

@ -3,18 +3,19 @@ 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,
minNum?: number, //最小值
maxNum?: number, //最大值
step?: number, //步长
defaultNum?: number, //默认值
digits?: number //多少位小数
onChange?:(val:number) => void,
onBlue?:(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<any>({count:defaultNum})
const onPlus = () => {
let {count} = value
let num_res = Big(count).add(step).toNumber()
@ -27,7 +28,7 @@ export default ({minNum = 0, maxNum = 100, step=1, digits = 0, defaultNum = 0, o
const minus = () => {
let {count} = value
let num_res = Big(count).minus(step).toNumber()
num_res = num_res <= minNum?minNum:num_res
num_res = num_res < minNum?0:num_res
setValue({...value, count:num_res})
onChange?.(parseFloat(num_res))
onClickBtn?.(parseFloat(num_res))

6
src/pages/details/components/orderCount/index.module.scss
View File

@ -102,6 +102,12 @@
font-size: $font_size;
color: $color_main;
}
.priceText{
font-size: $font_size_big;
Text{
font-size: $font_size_min;
}
}
}
.btn_con{
display: flex;

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

@ -1,4 +1,4 @@
import {Image, ScrollView, View } from "@tarojs/components"
import {Image, ScrollView, View, Text } from "@tarojs/components"
import Popup from "@/components/popup"
import LoadingCard from "@/components/loadingCard";
import Search from "@/components/search";
@ -7,62 +7,65 @@ import Counter from "../counter";
import Big from 'big.js'
import classnames from "classnames";
import styles from "./index.module.scss"
import { memo, useEffect, useState } from "react";
import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
import {GetColorList} from "@/api/materialColor"
import { useRouter } from "@tarojs/taro";
import UseLogin from "@/use/useLogin"
import { formatHashTag, formatMillionYuan } from "@/common/fotmat";
import { getFilterData } from "@/common/util";
type param = {
show?: true|false,
onClose?: () => void
onClose?: () => void,
title?: string,
productId?: number
}
export default memo(({show = false, onClose}: param) => {
export default memo(({show = false, onClose, title = '', productId = 0}: param) => {
const selectList = [
{step:1, digits:2, title:'剪板', unit:'米'},
{step:1, digits:2, title:'散剪', unit:'米'},
{step:1, digits:0, title:'大货', unit:'件'}
{id: 0, step:1, digits:0, maxNum:100000, defaultNum:1, title:'大货', unit:'件', eunit:'kg'},
{id: 1, step:1, digits:2, maxNum:9.99, defaultNum:1, title:'剪板', unit:'米', eunit:'m'},
{id: 2, step:1, digits:2, minNum:10, maxNum:100000, defaultNum:10, title:'散剪', unit:'米', eunit:'kg'},
]
const [selectIndex, setSelectIndex] = useState(0)
const selectProduct = (index:number) => {
setSelectIndex(index)
}
//获取面料颜色列表
const {fetchData:colorFetchData} = GetColorList()
const [list, setList] = useState<any[]>([])
const [loading, setLoading] = useState(false)
console.log('执行执行')
useEffect(() => {
if(!show) return
let lists:any[] = []
for(let i = 0; i < 20; i++) {
lists = [...lists, {
title:`${i}#薄荷绿`,
subtitle: '0770# 21S单面平纹(食毛)',
tag: '剪板',
count:0,
show: false,
}]
const condition = useRef({physical_warehouse:1, 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))
setList([...data.list])
setLoading(() => false)
}
setList([...lists])
const [showPopup, setShowPopup] = useState(false)
//显示获取
useEffect(() => {
if(show) {
condition.current.product_id = productId
getColorList()
}
setShowPopup(show)
}, [show])
//卸载清空
useEffect(() => {
return () => {
setList([])
}
}, [])
const [showPopup, setShowPopup] = useState(false)
useEffect(() => {
setShowPopup(show)
}, [show])
//popup关闭
const closePopup = () => {
onClose?.()
setShowPopup(false)
}
//计算总数量和总米/件数
const [selectCount, setSelectCount] = useState({
sumCount: 0,
@ -88,8 +91,9 @@ export default memo(({show = false, onClose}: param) => {
}
const onAdd = (item) => {
item.show = true
item.count = item.count == 0?1:item.count
setList([...list])
item.count = selectList[selectIndex].defaultNum
console.log('aa:::',item.count)
setList((list) => [...list])
}
//搜索显示与隐藏
@ -98,12 +102,47 @@ export default memo(({show = false, onClose}: param) => {
setSearchShow(true)
}
//添加购物车
const {getSelfUserInfo} = UseLogin()
const addShopCart = () => {
getSelfUserInfo()
}
//显示金额
const priceFormat = useCallback((item) => {
let price = 0
if(selectIndex == 0) {
price = formatMillionYuan(item.bulk_price, 100).num
} else if(selectIndex == 1) {
price = formatMillionYuan(item.length_cut_price, 100).num
} else {
price = formatMillionYuan(item.weight_cut_price, 100).num
}
return <View className={styles.priceText}><Text>¥</Text>{Number(price) }<Text>{' /' + selectList[selectIndex].eunit}</Text></View>
}, [list, selectIndex])
//重置数据
useEffect(() => {
const newList = list.map(item => {
item.count = 0
item.show = false
return item
})
setList([...newList])
}, [selectIndex])
//筛选数据
const searchInput = (e) => {
condition.current.code_or_name = e
getColorList()
}
return (
<View className={styles.shop_cart_main}>
<Popup showTitle={false} show={showPopup} onClose={() => closePopup()}>
<View className={styles.popup_con}>
<View className={styles.header}>0770# 21S单面平纹(食毛)</View>
<View className={styles.header}>{title}</View>
<View className={styles.search}>
<View className={styles.search_title}>下单类型:</View>
<View className={styles.search_list}>
@ -114,25 +153,26 @@ export default memo(({show = false, onClose}: param) => {
</View>
{searchShow&&<View className={styles.colorFind}>
<View className={styles.search}>
<Search placeIcon="out" />
<Search placeIcon="out" changeOnSearch={(e) => searchInput(e)} debounceTime={400}/>
</View>
<View className={styles.text} onClick={() => setSearchShow(false)}>取消</View>
</View>}
<View className={styles.colorNum}>
<View className={styles.title}>颜色分类 (13)</View>
<View className={classnames('iconfont icon-sousuo', styles.miconfont)} onClick={() => changeSearchShow()}></View>
<View className={styles.title}>颜色分类 (13) {list.length}</View>
{!searchShow&&<View className={classnames('iconfont icon-sousuo', styles.miconfont)} onClick={() => changeSearchShow()}></View>}
</View>
<View className={styles.product_color_con}>
{list.length > 0&&<InfiniteScroll>
{list.length > 0&&<InfiniteScroll moreStatus={false}>
<View className={styles.color_con}>
{list.map(item => {
return <View className={styles.item}>
<View className={styles.item_color}>
<Image src='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d'/>
<Image src={item.texture_url}/>
</View>
<View className={styles.item_con}>
<View className={styles.title}>{item.title}</View>
<View className={styles.num}>¥25.5/m</View>
<View className={styles.title}>{formatHashTag(item.code, item.name)}</View>
<View className={styles.num}>{priceFormat(item)}</View>
</View>
<View className={styles.btn_con}>
{!item.show&&<View className={styles.btn} onClick={() => onAdd(item)}>添加</View>
@ -144,6 +184,8 @@ export default memo(({show = false, onClose}: param) => {
digits={selectList[selectIndex].digits}
onClickBtn={(e) => getInputValue(e, item)}
unit={selectList[selectIndex].unit}
minNum={selectList[selectIndex].minNum}
maxNum={selectList[selectIndex].maxNum}
/>
</View>}
</View>
@ -156,7 +198,7 @@ export default memo(({show = false, onClose}: param) => {
<View className={styles.buy_btn}>
<View className={styles.buy_btn_con}>
<View className={styles.count}>当前已选{selectCount.kindCount}种，共{selectCount.sumCount}{selectList[selectIndex].unit}</View>
<View className={classnames(styles.add_cart, selectCount.kindCount&&styles.select_add_cart)}>加入购物车</View>
<View className={classnames(styles.add_cart, selectCount.kindCount&&styles.select_add_cart)} onClick={() => addShopCart()}>加入购物车</View>
</View>
</View>
</View>

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

@ -30,7 +30,7 @@
margin-top: 10px;
background-color: rgba(0,0,0, 0.5);
padding: 0 10px;
@include common_ellipsis
@include common_ellipsis(1);
}
}
}

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

@ -1,5 +1,5 @@
import { Image, Swiper, SwiperItem, View } from "@tarojs/components"
import { useMemo, useState } from "react"
import { useMemo, useRef, useState } from "react"
import styles from './index.module.scss'
type item = {title:string, img:string, url:string, id:number}
@ -10,6 +10,7 @@ type params = {
export default ({list = []}: params) => {
const [pageIndex, setPageIndex] = useState(1)
const pageRef = useRef<any>(null)
const pageCount = useMemo(() => {
return list.length
@ -17,8 +18,10 @@ export default ({list = []}: params) => {
const swiperChange = (e) => {
setPageIndex(e.detail.current + 1)
pageRef.current.innerHTML = 2
}
return (
<View className={styles.swiper}>
<Swiper className={styles.swiper_item} circular={true} onAnimationFinish={(e) => swiperChange(e)}>
@ -30,7 +33,7 @@ export default ({list = []}: params) => {
</SwiperItem>
})}
</Swiper>
<View className={styles.page}>{pageIndex+'/'+pageCount}</View>
<View className={styles.page} ref={pageRef}>{pageIndex+'/'+pageCount}</View>
</View>
)
}

4
src/pages/details/index.config.ts
View File

@ -1,3 +1,5 @@
export default {
navigationBarTitleText: '详情'
navigationBarTitleText: '详情',
enablePullDownRefresh: true,
backgroundTextStyle: 'dark'
}

18
src/pages/details/index.module.scss
View File

@ -28,11 +28,20 @@
font-size: $font_size_min;
text-align: center;
color: $color_font_three;
position: relative;
.text{
margin-top: 10px;
font-size: $font_size_medium;
}
}
.shareBtn {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
}
.miconfont{
font-size: 36px;
}
@ -53,9 +62,16 @@
.con{
display: grid;
grid-template-columns: 260px auto;
grid-template-rows: 50px 50px;
font-size: $font_size_medium;
color: $color_font_three;
.des_text{
display: flex;
margin-bottom: 16px;
text{
flex:1;
@include common_ellipsis(1);
}
}
}
}
.product_color{

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

@ -1,13 +1,20 @@
import { Image, RichText, Swiper, SwiperItem, View } from '@tarojs/components'
import Taro from '@tarojs/taro';
import { Button, Image, RichText, ScrollView, Swiper, SwiperItem, Text, View } from '@tarojs/components'
import Taro, { useDidShow, useRouter, useShareAppMessage } from '@tarojs/taro';
import classnames from "classnames";
import DesSwiper from './components/swiper';
import OrderCount from './components/orderCount';
import ShopCart from '@/components/shopCart';
import Preview,{colorItem} from './components/preview';
import styles from './index.module.scss'
import { useMemo, useState } from 'react';
import { useEffect, useMemo, useState } from 'react';
import {formatHashTag} from '@/common/fotmat'
import useManualPullDownRefresh from '@/use/useManualPullDownRefresh';
import { goLink } from '@/common/common';
import useUserInfo from '@/use/useUserInfo';
import {GetProductDetailApi} from '@/api/material'
import useLogin from '@/use/useLogin';
type item = {title:string, img:string, url:string, id:number}
type params = {
@ -16,6 +23,28 @@ type params = {
style?: Object
}
export default (props:params) => {
const {checkLogin} = useLogin()
useDidShow(() => {
checkLogin()
})
const router = useRouter()
//获取数据
const [productInfo, setProductInfo] = useState<any>({})
const {fetchData} = GetProductDetailApi()
useEffect(() => {
getProductDetail()
}, [])
const getProductDetail = async () => {
let {data} = await fetchData({id: router.params.id})
setProductInfo(data)
}
//面料名称
const productName = useMemo(() => {
return formatHashTag(productInfo.code, productInfo.name)
},[productInfo])
const list = [
{
@ -34,39 +63,20 @@ export default (props:params) => {
const [showCart, setShowCart] = useState(false)
const [showOrderCount, setShowOrderCount] = useState(false)
// const showCartmemo = useMemo(() => {
// return showCart
// },[showCart])
const html = `<h1>这里是详情</h1>
<div style="font-size:13px">你好啊啊</div>
<img style="width:100%" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic24.nipic.com%2F20121021%2F10910884_100200815001_2.jpg&refer=http%3A%2F%2Fpic24.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652257920&t=9353dda34f18ae2fe6803f3da35954bb">
`
const colorList = [
{
title:'#1',
img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d',
url:'',
id:1
},
{
title:'#1',
img:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d',
url:'',
id:1
},
]
const [colorInfo, setColorInfo] = useState<colorItem>()
const [showPreview, setShowPreview] = useState(false)
const getColorItem = (item) => {
setColorInfo({
title: item.title,
img: item.img,
title: item.code,
img: item.texture_url,
})
setShowPreview(true)
}
@ -80,41 +90,58 @@ export default (props:params) => {
duration: 2000
})
}
useShareAppMessage(res => {
if (res.from === 'button') {
// 来自页面内转发按钮
console.log(res.target)
}
return {
title: '自定义转发标题',
path: '/pages/details/index?id=10',
imageUrl: list[0].img
}
})
return (
<View className={styles.main}>
<DesSwiper list={list}/>
<View className={styles.product_header}>
<View className={styles.title}>
<View className={styles.name}>0770# 21S单面平纹(食毛)</View>
<View className={styles.des}>面料描述，疯狂描述。。。</View>
<View className={styles.name}>{productName}</View>
<View className={styles.des}>{productInfo.describe}</View>
</View>
<View className={styles.share}>
<View className={classnames('iconfont icon-fenxiang', styles.miconfont)}></View>
<View className={styles.text}>分享</View>
<Button open-type="share" className={styles.shareBtn}></Button>
</View>
<View className={styles.collect}>
<View className={classnames('iconfont icon-shoucang', styles.miconfont, collectStatus&&styles.collected)} onClick={() => changeCollect()}></View>
<View className={styles.text}>收藏</View>
</View>
</View>
<View className={styles.des_data}>
<View className={styles.title}>详情参数</View>
<View className={styles.con}>
<View>编号:0770</View>
<View>幅宽:160cm</View>
<View>克重:160g</View>
<View>成分:67.6%棉24%涤纶6.4%氨纶%氨纶</View>
<View className={styles.des_text}>编号：<Text>{productInfo.code}</Text></View>
<View className={styles.des_text}>幅宽：<Text>{productInfo.width}</Text></View>
<View className={styles.des_text}>克重：<Text>{productInfo.weight_density}</Text></View>
<View className={styles.des_text}>成分：<Text>{productInfo.component}</Text></View>
</View>
</View>
<View className={styles.product_color}>
<View className={styles.title}>色号 (10)</View>
<View className={styles.list}>
{colorList.map(item => {
{productInfo?.product_color_list?.map(item => {
return <View className={styles.item} onClick={() => getColorItem(item)}>
<View className={styles.item_color}>
<Image src={item.img}></Image>
<Image src={item.texture_url}></Image>
</View>
<View className={styles.item_name}>{item.title}</View>
<View className={styles.item_name}>{item.code}</View>
</View>
})}
</View>
@ -129,7 +156,7 @@ export default (props:params) => {
</View>
<View className={styles.buy_btn} onClick={() => setShowOrderCount(true)}>开始下单</View>
</View>
<OrderCount show={showOrderCount} onClose={() => setShowOrderCount(false)}/>
<OrderCount show={showOrderCount} onClose={() => setShowOrderCount(false)} title={productName} productId={productInfo.id}/>
<ShopCart show={showCart} onClose={() => setShowCart(false)}/>
<Preview value={colorInfo} show={showPreview} onClose={() => setShowPreview(false)}/>
<View className='common_safe_area_y'></View>

4
src/pages/index/index.config.ts
View File

@ -1,3 +1,5 @@
export default {
navigationBarTitleText: '电子商城'
navigationBarTitleText: '电子商城',
enablePullDownRefresh: true,
backgroundTextStyle: 'dark'
}

3
src/pages/index/index.module.scss
View File

@ -20,6 +20,9 @@
text-align: center;
line-height: 44px;
}
.search_input{
width: 300px;
}
}
.products{
flex:1;

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

@ -1,51 +1,113 @@
import {View} from '@tarojs/components'
import Swiper from '@/components/swiper'
import Banner from '@/components/banner'
import Search from '@/components/search'
import SideBar from '@/components/sideBar'
import Product from '@/components/product'
import MoveBtn from '@/components/moveBtn'
import ShopCart from '@/components/shopCart'
import styles from './index.module.scss'
import { goLink } from '@/common/common'
import { useState } from 'react'
import Taro from '@tarojs/taro'
import styles from './index.module.scss'
import { useEffect, useRef, useState } from 'react'
import Taro, { Events, useDidShow, usePullDownRefresh, useRouter } from '@tarojs/taro'
import useManualPullDownRefresh from '@/use/useManualPullDownRefresh'
import {GetProductKindListApi, GetProductListApi} from '@/api/material'
import useLogin from '@/use/useLogin'
export default () => {
const tabs_list = [
{title:'平纹系列', value: 1},
{title:'平纹系列', value: 2},
{title:'平纹系列', value: 3},
{title:'平纹系列', value: 4},
{title:'平纹系列', value: 5},
{title:'平纹系列', value: 6},
{title:'平纹系列', value: 7},
{title:'平纹系列', value: 8},
{title:'平纹系列', value: 9},
{title:'平纹系列', value: 10},
{title:'平纹系列', value: 11},
{title:'平纹系列', value: 12},
{title:'平纹系列', value: 13},
{title:'平纹系列', value: 14},
{title:'平纹系列', value: 15},
{title:'平纹系列', value: 16},
{title:'平纹系列', value: 17},
]
const {checkLogin} = useLogin()
useDidShow(async () => {
await checkLogin()
})
useEffect(() => {
categoryList()
}, [])
//获取面料种类
const [kindData, setKindData] = useState<any>({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})
}
}
//获取面料列表
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(1)
const {fetchData: productFetchData, state: productState} = GetProductListApi()
//获取数据方法
const getProductList = async () => {
const {data,total} = await productFetchData(filtrate)
setProductData({...productData,list:data.list,total})
setRefresherTriggeredStatus(() => false)
}
//监听查询条件
useEffect(() => {
if(filtrate.product_kind_id)
getProductList()
}, [filtrate])
//点击面料类型
const getProductKindId = async (e) => {
pageNum.current = 1
setFiltrate({...filtrate, size:5, product_kind_id:e.id})
setHasMore(true)
}
//上拉加载数据
const getScrolltolower = () => {
if(productData.list.length >= productData.total) {
setHasMore(false)
} else {
pageNum.current++
const newSize = filtrate.size * pageNum.current
setFiltrate({...filtrate, size:newSize})
}
}
const [showShopCart, setShowShopCart] = useState(false)
//列表下拉刷新
const [refresherTriggeredStatus, setRefresherTriggeredStatus] = useState(false)
const getRefresherRefresh = async () => {
pageNum.current = 1
setFiltrate({...filtrate, size:5})
setHasMore(true)
setRefresherTriggeredStatus(true)
}
//页面下拉刷新
// const res = useManualPullDownRefresh()
usePullDownRefresh(() => {
console.log('123')
})
return (
<MoveBtn onClick={() => setShowShopCart(!showShopCart)}>
<View className={styles.main}>
<Swiper/>
<Banner/>
<View className={styles.search}>
<View className={styles.search_collect}>我的收藏</View>
<View className={styles.search_input}>
<Search disabled={true} style={{width: '263rpx'}} clickOnSearch={() => goLink('/pages/search/index')}/>
<Search disabled={true} style={{width: '263rpx'}} clickOnSearch={() => goLink('/pages/searchList/search')}/>
</View>
</View>
<View className={styles.products}>
<SideBar list={tabs_list} height="100%" heightItem={150}>
<Product/>
<SideBar list={kindData.list} height="100%" defaultValue={kindData.defaultId} hasMore={hasMore} selfOnScrolltolower={() => getScrolltolower()} sideBarOnClick={(e) => getProductKindId(e)} heightItem={150} refresherTriggered={refresherTriggeredStatus} selfOnRefresherRefresh={() => getRefresherRefresh()}>
<Product productList={productData.list}/>
</SideBar>
</View>
<View className='common_safe_area_y'></View>

54
src/pages/order/components/addressInfo/index.module.scss Normal file
View File

@ -0,0 +1,54 @@
.order_address{
height: 178px;
background: #ffffff;
border-radius: 20px;
display: flex;
align-items: center;
padding: 30px;
box-sizing: border-box;
margin-top: 20px;
.order_address_icon{
font-size: 60px;
}
.order_address_text_con{
flex:1;
padding: 0 30px;
box-sizing: border-box;
.order_address_text_title{
font-size: $font_size;
font-weight: 700;
@include common_ellipsis;
}
.order_address_text_name{
margin-top: 20px;
color: $color_font_three;
font-size: $font_size_medium;
text{
&:nth-child(1) {
margin-right: 40px;
}
}
}
}
.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;
}
}

32
src/pages/order/components/addressInfo/index.tsx Normal file
View File

@ -0,0 +1,32 @@
import AddressList from "@/components/AddressList";
import Popup from "@/components/popup";
import { Text, View } from "@tarojs/components"
import classnames from "classnames";
import { useState } from "react";
import styles from './index.module.scss'
export default () => {
const [showAddressList, setShowAddressList] = useState(false)
return (
<View>
<View className={styles.order_address} onClick={() => setShowAddressList(true)}>
<View className={classnames(styles.order_address_icon, 'iconfont icon-shaixuan')}></View>
{/* <View className={styles.order_address_text_no}>请选择收货地址及信息</View> */}
<View className={styles.order_address_text_con}>
<View className={styles.order_address_text_title}>**省**市**区**街道****仓库**省**市**区**街道****仓库</View>
<View className={styles.order_address_text_name}>
<Text>陈先生</Text>
<Text>1818877790</Text>
</View>
</View>
<View className={classnames(styles.order_address_more_icon, 'iconfont icon-jiantou')}></View>
</View>
<Popup show={showAddressList} showTitle={false} onClose={() => setShowAddressList(false)}>
<View className={styles.order_address_list}>
<View className={styles.order_address_title}>选择收货地址</View>
<AddressList onSelect={(item, index) => console.log(index, item)}/>
</View>
</Popup>
</View>
)
}

23
src/pages/order/components/estimatedAmount/index.module.scss Normal file
View File

@ -0,0 +1,23 @@
.order_price{
font-weight: 700;
display: flex;
align-items: center;
.order_price_text{
font-size: $font_size_medium;
margin-right: 10px;
}
.order_price_num{
text{
&:nth-child(1) {
font-size: $font_size_min;
}
&:nth-child(2) {
font-size: $font_size_big;
}
&:nth-child(3) {
font-size: $font_size_medium;
}
}
}
}

33
src/pages/order/components/estimatedAmount/index.tsx Normal file
View File

@ -0,0 +1,33 @@
import { Text, View } from "@tarojs/components"
import { useCallback, useEffect, useMemo } from "react"
import {formatKbPrice} from '@/common/common'
import styles from './index.module.scss'
type Param = {
style?: Object,
number?: number
}
export default ({style, number = 0}:Param) => {
const priceDom = useCallback(() => {
let res = number.toFixed(2).split('.')
let int_num = parseInt(res[0]) + ''
let decimals_num = res[1]
return (
<>
<Text>¥</Text>
<Text>{formatPrice(int_num)}</Text>
<Text>.{decimals_num}</Text>
</>
)
}, [number])
const formatPrice = useCallback((number: string) => {
return formatKbPrice(number)
}, [])
return (
<View className={styles.order_price}>
<Text className={styles.order_price_text}>预估金额</Text>
<View className={styles.order_price_num} style={style}>
{priceDom()}
</View>
</View>
)
}

100
src/pages/order/components/kindList/index.module.scss Normal file
View File

@ -0,0 +1,100 @@
.orders_list_con{
margin-top: 20px;
background-color: #fff;
border-radius: 20px;
padding: 20px;
.order_list{
&:nth-child(n+2) {
margin-top: 30px;
}
.order_list_title{
display: flex;
align-items: center;
.tag{
font-size: $font_size_min;
background-color: #CDE5FF;
padding: 5px 10px;
border-radius: 6px;
color: $color_main;
}
.title{
font-weight: 700;
font-size: $font_size;
margin-left: 20px;
flex:1;
}
.num{
color: $color_font_two;
font-size: $font_size_min;
}
}
}
.order_list_scroll{
margin-top: 30px;
.order_list_item {
display: flex;
&:nth-child(2) {
margin-top: 30px;
}
.order_list_item_img{
width: 126px;
height: 126px;
border-radius: 20px;
background-color: red;
}
.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{
.count_num{
color: $color_main;
font-size: $font_size;
margin-bottom: 15px;
font-weight: 400;
text{
font-size: $font_size_min;
}
}
.count_price {
font-size: $font_size;
font-weight: 700;
text{
font-size: $font_size_min;
}
}
}
}
}
.order_estimated_amount{
display: flex;
align-items: flex-end;
flex-direction: column;
padding: 30px 0;
.order_price_des{
font-size: $font_size_medium;
color: $color_font_two;
}
}
}

88
src/pages/order/components/kindList/index.tsx Normal file
View File

@ -0,0 +1,88 @@
import { View } from "@tarojs/components"
import { useState } from "react"
import EstimatedAmount from "../estimatedAmount"
import styles from './index.module.scss'
export default () => {
const [price, setPrice] = useState(123000.33)
return (
<>
<View className={styles.orders_list_con}>
<View className={styles.order_list}>
<View className={styles.order_list_title}>
<View className={styles.tag}>大货</View>
<View className={styles.title}>0770# 21S单面平纹(食毛)</View>
<View className={styles.num}>共3种</View>
</View>
<View className={styles.order_list_scroll}>
<View className={styles.order_list_item}>
<View className={styles.order_list_item_img}></View>
<View className={styles.order_list_item_con}>
<View className={styles.order_list_item_des}>
<View className={styles.order_list_item_title}>1# 薄荷绿</View>
<View className={styles.order_list_item_price}>¥40/kg</View>
</View>
<View className={styles.order_list_item_count}>
<View className={styles.count_num}>×1<text>条</text></View>
<View className={styles.count_price}><text>¥</text>1,000.5</View>
</View>
</View>
</View>
<View className={styles.order_list_item}>
<View className={styles.order_list_item_img}></View>
<View className={styles.order_list_item_con}>
<View className={styles.order_list_item_des}>
<View className={styles.order_list_item_title}>1# 薄荷绿</View>
<View className={styles.order_list_item_price}>¥40/kg</View>
</View>
<View className={styles.order_list_item_count}>
<View className={styles.count_num}>×1<text>条</text></View>
<View className={styles.count_price}><text>¥</text>1,000.5</View>
</View>
</View>
</View>
</View>
</View>
<View className={styles.order_list}>
<View className={styles.order_list_title}>
<View className={styles.tag}>大货</View>
<View className={styles.title}>0770# 21S单面平纹(食毛)</View>
<View className={styles.num}>共3种</View>
</View>
<View className={styles.order_list_scroll}>
<View className={styles.order_list_item}>
<View className={styles.order_list_item_img}></View>
<View className={styles.order_list_item_con}>
<View className={styles.order_list_item_des}>
<View className={styles.order_list_item_title}>1# 薄荷绿</View>
<View className={styles.order_list_item_price}>¥40/kg</View>
</View>
<View className={styles.order_list_item_count}>
<View className={styles.count_num}>×1<text>条</text></View>
<View className={styles.count_price}><text>¥</text>1,000.5</View>
</View>
</View>
</View>
<View className={styles.order_list_item}>
<View className={styles.order_list_item_img}></View>
<View className={styles.order_list_item_con}>
<View className={styles.order_list_item_des}>
<View className={styles.order_list_item_title}>1# 薄荷绿</View>
<View className={styles.order_list_item_price}>¥40/kg</View>
</View>
<View className={styles.order_list_item_count}>
<View className={styles.count_num}>×1<text>条</text></View>
<View className={styles.count_price}><text>¥</text>1,000.5</View>
</View>
</View>
</View>
</View>
</View>
<View className={styles.order_estimated_amount}>
<EstimatedAmount number={price}/>
<View className={styles.order_price_des}>（按照25kg/条, 预估金额）</View>
</View>
</View>
</>
)
}

18
src/pages/order/components/orderState/index.module.scss Normal file
View File

@ -0,0 +1,18 @@
.order_flow_state{
display: flex;
align-items: center;
padding: 0 30px;
height: 116px;
background-color: #fff;
border-radius: 20px;
.order_flow_state_text{
color: $color_main;
font-size:$font_size;
font-weight: 700;
}
.order_flow_state_desc{
color: $color_font_three;
font-size: $font_size_medium;
margin-left: 50px;
}
}

14
src/pages/order/components/orderState/index.tsx Normal file
View File

@ -0,0 +1,14 @@
import { View } from "@tarojs/components"
import styles from './index.module.scss'
export default ({
state = '',
desc = ''
}) => {
return (
<View className={styles.order_flow_state}>
<View className={styles.order_flow_state_text}>{state}</View>
<View className={styles.order_flow_state_desc}>{desc}</View>
</View>
)
}

48
src/pages/order/components/remark/index.module.scss Normal file
View File

@ -0,0 +1,48 @@
.order_popup{
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 0;
.order_popup_title{
color: $font_size_big;
font-weight: 700;
color: #000000;
padding-bottom: 20px;
}
.order_popup_input{
width: 100%;
padding: 0 25px;
box-sizing: border-box;
margin-top: 43px;
position: relative;
.descDataNum{
position: absolute;
right: 40px;
bottom: 10px;
height: 39px;
font-size: $font_size_medium;
color: $color_font_two;
}
textarea{
background-color: #f3f3f3;
border-radius: 10px;
width: 100%;
height: 313px;
padding: 20px;
padding-bottom: 50px;
box-sizing: border-box;
font-size: $font_size;
border: 2px solid #e6e6e6;
}
}
.order_save_address{
height: 82px;
background: #007aff;
border-radius: 40px;
width: 668px;
text-align: center;
line-height: 82px;
color: #fff;
margin-top: 60px;
}
}

38
src/pages/order/components/remark/index.tsx Normal file
View File

@ -0,0 +1,38 @@
import Popup from "@/components/popup"
import { Textarea, View } from "@tarojs/components"
import { useCallback, useState } from "react"
import styles from './index.module.scss'
type Param = {
onBlur?: (val:any) => void
onSave?: (val: string) => void
}
export default ({onBlur, onSave}:Param) => {
const [descData, setDescData] = useState({
number: 0,
value: '',
count: 200
})
const getDesc = useCallback((e) => {
let value = e.detail.value
let res = value
if(value.length > descData.count) {
res = value.slice(0, descData.count)
}
setDescData({...descData, number:res.length, value: res})
},[])
const setSave = () => {
onSave?.(descData.value)
}
return (
<View className={styles.order_popup}>
<View className={styles.order_popup_title}>添加备注</View>
<View className={styles.order_popup_input}>
<Textarea placeholder="请添加备注" maxlength={descData.count} cursorSpacing={100} onInput={(e) => getDesc(e)} onBlur={(e) => onBlur?.(e)}></Textarea>
<View className={styles.descDataNum}>{descData.number}/{descData.count}</View>
</View>
<View className={styles.order_save_address} onClick={() => setSave()}>保存</View>
</View>
)
}

3
src/pages/order/index.config.ts Normal file
View File

@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '确认订单'
}

118
src/pages/order/index.module.scss Normal file
View File

@ -0,0 +1,118 @@
.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: 0 20px;
height: 116px;
border-radius: 20px;
margin-top: 20px;
.order_desc_con{
flex:1;
font-size: $font_size;
font-weight: 700;
}
.order_desc_text{
font-size: $font_size_medium;
color: $color_font_two;
margin-right: 10px;
}
.miconfont{
font-size: 20px;
color: $color_font_two;
}
}
.submit_order{
display: flex;
position: fixed;
bottom: 0;
left: 0;
justify-content: space-between;
width: 100%;
height: 175px;
align-items: center;
background-color: #fff;
box-shadow: 6px 0px 12px 0px rgba(0,0,0,0.16);
padding: 20px 50px;
box-sizing: border-box;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
.order_btn {
width: 250px;
height: 90px;
opacity: 0.6;
background: linear-gradient(38deg,#007aff, #4fa6ff 100%, #68b4ff 100%);
border-radius: 46px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
}
.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;
}
}
}

68
src/pages/order/index.tsx Normal file
View File

@ -0,0 +1,68 @@
import Popup from "@/components/popup";
import SearchInput from "@/components/searchInput";
import { Text, Textarea, View } from "@tarojs/components"
import Taro from "@tarojs/taro";
import classnames from "classnames";
import { useCallback, useEffect, useState } from "react";
import AddressInfo from "./components/addressInfo";
import EstimatedAmount from "./components/estimatedAmount";
import KindList from "./components/kindList";
import OrderState from "./components/orderState";
import Remark from "./components/remark";
import styles from './index.module.scss'
export default () => {
const [price, setPrice] = useState(123000.33)
const [showDesc, setShowDesc] = useState(false)
const clipboardData = () => {
Taro.setClipboardData({
data: '123123121321',
success: function (res) {
Taro.showToast({
icon: 'none',
title: '复制成功'
})
}
})
}
return (
<View className={styles.order_main}>
<OrderState state="预约中" desc="客服已接单，等待仓库配布出单..."/>
<View className={styles.order_title}>
<Text>收货方式</Text>
<View className={styles.order_status}>物流</View>
<View className={styles.order_status}>上门自提</View>
</View>
<AddressInfo/>
<KindList/>
<View className={styles.order_desc} onClick={() => setShowDesc(true)}>
<View className={styles.order_desc_con}>订单备注</View>
<View className={styles.order_desc_text}>点击填写</View>
<View className={classnames(styles.miconfont, 'iconfont icon-jiantou')}></View>
</View>
<View className={styles.order_info} >
<View className={styles.order_info_title}>订单备注</View>
<SearchInput showBorder={false} title='单号'>
<View className={styles.order_num}>
<Text>13535359535</Text>
<View className={styles.order_num_btn} onClick={() => clipboardData()}>复制</View>
</View>
</SearchInput>
<SearchInput showBorder={false} title='下单时间'>
<Text>2022-4-5 10:11:55</Text>
</SearchInput>
</View>
<View className={styles.submit_order}>
<View className={styles.submit_order_number}>
<EstimatedAmount style={{color:'#007AFF'}} number={price}/>
<View className={styles.order_number_desc}>2种面料，6种颜色，共6条</View>
</View>
<View className={styles.order_btn}>提交订单</View>
</View>
<Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >
<Remark onSave={(e) => console.log(e)}/>
</Popup>
<View className="common_safe_area_y"></View>
</View>
)
}

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

@ -4,12 +4,13 @@ import Search from '@/components/search'
import { goLink } from '@/common/common';
import classnames from "classnames";
import styles from './index.module.scss'
import { useEffect } from 'react';
export default () => {
return (
<View className={styles.main}>
<View className={styles.search}>
<Search style={{width: '100%'}} placeholder="请输入面料关键词" placeIcon="out" showBtn={true} clickOnSearch={() => goLink('/pages/searchList/index')}/>
<Search style={{width: '100%'}} debounceTime={300} changeOnSearch={(e) => console.log(e)} placeholder="请输入面料关键词" placeIcon="out" showBtn={true} />
</View>
<View className={styles.hot}>
<View className={styles.hot_header}>

51
src/pages/searchList/components/selectData/index.module.scss Normal file
View File

@ -0,0 +1,51 @@
.tabs_main{
display: flex;
width: 100%;
.tabs_scroll{
width: 100%;
display: flex;
white-space: nowrap;
::-webkit-scrollbar {
display:none;
width:0;
height:0;
color:transparent;
}
.tabs_item{
flex:1;
display: inline-block;
font-size: 24rpx;
background-color: #ecf5ff;
border-radius: 24rpx;
min-width: 126rpx;
height: 46.93rpx;
text-align: center;
line-height: 46.93rpx;
color: #707070;
margin-right: 20px;
border: 2px solid #cde5ff;
.tabs_item_con{
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: $font_size_medium;
}
.tabs_index{
height: 5px;
width: 100%;
background-color:$color_main;
position:absolute;
bottom: 0;
left:0;
border-radius: 50px;
}
.tabs_item_select{
color: $color_main;
}
}
}
}

57
src/pages/searchList/components/selectData/index.tsx Normal file
View File

@ -0,0 +1,57 @@
import { ScrollView, View } from "@tarojs/components";
import { memo, useState, ReactNode, useEffect } from "react";
import classnames from "classnames";
import styles from './index.module.scss'
type ListProps = {
title: string,
value: number
}
type Params = {
list?: ListProps[],
defaultValue?: number|string,
children?: ReactNode,
tabsOnClick?: (ListProps) => void,
}
export default memo(({list = [], defaultValue = 0, tabsOnClick}: Params) => {
const [tabId, setTabId] = useState('')
useEffect(() => {
const index = list?.findIndex(item => {
return item.value == defaultValue
})
if(index !== -1) {
const num = index > 0?( index - 1) : 0
setTabId(list[num].value.toString())
}
}, [])
const clickEvent = ({item, index}: {item:ListProps, index:number}) => {
tabsOnClick?.(item)
setTabId(index.toString())
}
return (
<>
<View className={styles.tabs_main} id="tabs_main_ref">
<ScrollView className={styles.tabs_scroll} scrollX scrollWithAnimation={true} scrollIntoView={`tabs_${tabId}`}>
<View className={styles.tabs_scroll}>
{
list.map((item, index) => {
return (
<View key={index} id={`tabs_${index}`} className={styles.tabs_item} onClick={() => clickEvent({item,index})}>
<View className={classnames(styles.tabs_item_con)}>{item.title}</View>
</View>
)
})
}
</View>
</ScrollView>
</View>
</>
)
})

5
src/pages/searchList/hightSearchList.config.ts Normal file
View File

@ -0,0 +1,5 @@
export default {
navigationBarTitleText: '搜索',
enablePullDownRefresh: true,
backgroundTextStyle: 'dark'
}

216
src/pages/searchList/hightSearchList.module.scss Normal file
View File

@ -0,0 +1,216 @@
.main{
display: flex;
flex-direction: column;
height: 100vh;
background-color: $color_bg_one;
.search{
padding: 20px;
.SearchInput{
background-color: #fff;
padding: 10px 20px;
box-sizing: border-box;
border-radius: 10px;
}
.bluetooth_color{
.color_bock{
width: 100px;
height: 46px;
}
.color_bock_no{
font-size: $font_size_medium;
color: $color_font_three;
}
}
}
.filter{
.filter_all {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 130px;
font-size: $font_size_medium;
color: $color_font_three;
.text_zh, .text_sc{
color: $color_main;
display: flex;
align-items: center;
.sortIcon{
display: flex;
flex-direction: column;
position: relative;
.icon_one{
font-size: $font_size_medium;
position: absolute;
margin:auto;
top:0;
}
}
}
.text_ss{
position: relative;
.miconfont{
font-size: 20px;
margin-left: 5px;
}
&::before{
content: '';
width: 2px;
height: 32px;
background-color: #C2C2C2;
position: absolute;
top: 0;
left: -30px;
}
}
}
.filter_btn_con{
display: flex;
justify-content: space-between;
align-items: center;
height: 86px;
}
.filter_scroll{
flex:1;
width: 0;
::-webkit-scrollbar {
display:none;
width:0;
height:0;
color:transparent;
}
}
.filter_btn{
display: flex;
justify-content: space-between;
padding: 20px;
margin-right: 20px;
flex:1;
view{
font-size: $font_size_medium;
background-color: #F0F0F0;
border-radius: 24px;
min-width: 126px;
height: 46.93px;
text-align: center;
line-height: 46.93px;
color: $color_font_three;
&:nth-last-child(n+2) {
margin-right: 10px;
}
&:nth-last-child(1) {
margin-right: 30px;
}
}
.selected{
background-color: #ecf5ff;
border: 2px solid #cde5ff;
color: $color_main;
width: 122px;
height: 42.93px;
}
}
.filter_more{
font-size: $font_size_medium;
color: $color_font_three;
padding: 0 30px 0 20px;
position: relative;
height: 100%;
line-height: 86px;
&::before{
content: '';
opacity: 1;
width: 30px;
height: 100%;
position: absolute;
left: -15px;
background-image: linear-gradient(to right, rgba(248, 248, 248, 0.3), rgba(248, 248, 248, 1) 60% );
// z-index: 99;
}
.miconfont{
font-size: 27px;
}
}
}
.list{
flex:1;
display: flex;
flex-direction: column;
.list_num {
font-size: $font_size_min;
color:$color_font_two;
padding: 10px 38px;
}
.list_num_shadow {
box-shadow: 0px 5px 5px #ccc;
}
.scroll{
flex:1;
height:0;
padding-top: 3px;
}
.product_list{
padding: 38px;
display: grid;
grid-template-columns: 321px 321px;
justify-content: space-between;
.product_item{
width: 321px;
background-color: #fff;
border-radius: 20px;
margin-bottom: 20px;
.product_img{
width: 100%;
height: 224px;
background: #e5ad3a;
border-radius: 20px 20px 0px 0px;
position: relative;
image{
width: 100%;
height: 100%;
border-radius: 20px 20px 0px 0px;
}
.color_num {
background: rgba(0,0,0, 0.5);
border-radius: 0px 50px 0px 0px;
font-size: $font_size_min;
color: #fff;
position: absolute;
left:0;
bottom:0;
padding: 5px 20px;
box-sizing: border-box;
}
}
}
.product_info{
padding: 20px;
.title{
font-size: $font_size;
color: $color_font_three;
}
.tag_list{
display: flex;
margin-top: 16px;
.tag{
padding: 3px 10px;
background-color: #CDE5FF;
font-size: $font_size_min;
border-radius: 5px;
color: $color_main;
&:nth-child(2) {
margin-left: 10px;
}
}
}
.introduce{
font-size: $font_size_medium;
color: $color_font_two;
margin-top: 16px;
}
}
}
}
}

132
src/pages/searchList/hightSearchList.tsx Normal file
View File

@ -0,0 +1,132 @@
import { Image, ScrollView, Text, View } from "@tarojs/components"
import classnames from "classnames";
import Search from '@/components/search'
import Filter from "@/components/filter";
import InfiniteScroll from '@/components/infiniteScroll'
import SortBtn from "@/components/sortBtn";
import SearchInput from "@/components/searchInput";
import LinkBlueTooth from "@/components/bluetooth/LinkBlueTooth";
import {useBluetooth} from "@/use/contextBlueTooth"
import {toRgb} from '@/common/bluetooth/color/colorSpace'
import Tabs from "@/components/tabs";
import styles from './hightSearchList.module.scss'
import { useCallback, useEffect, useState } from "react";
import Taro, { useReady } from "@tarojs/taro";
import useManualPullDownRefresh from "@/use/useManualPullDownRefresh";
export default () => {
const [showFilter, setShowFilter] = useState(false)
const [selectList, setSelectList] = useState([
{title: '系列', value:1},
{title: '系列', value:2},
{title: '系列', value:3},
{title: '系列', value:4},
{title: '系列', value:5},
{title: '系列', value:5},
{title: '系列', value:5},
{title: '系列', value:5},
{title: '系列', value:5},
])
const [scrollStatus, setScrollStatus] = useState(false)
const onscroll = useCallback((e) => {
if(e.detail.scrollTop > 20) {
setScrollStatus(true)
} else {
setScrollStatus(false)
}
},[])
const {state, measureAndGetLab} = useBluetooth()
const getLab = () => {
if(state.connected) {
measureAndGetLab()
} else {
Taro.showToast({
title: '请链接设备',
icon: 'none'
})
}
}
const [blueToothColor, setBlueToothColor] = useState('')
useEffect(() => {
if(state.deviceLab) {
console.log('颜色：',state.deviceLab)
const rgb = toRgb([state.deviceLab.L, state.deviceLab.a, state.deviceLab.b])
setBlueToothColor(`rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`)
}
}, [state.deviceLab])
//页面下拉刷新
const res = useManualPullDownRefresh()
return (
<View className={styles.main}>
<View className={styles.search}>
<View className={styles.SearchInput}>
<LinkBlueTooth/>
<SearchInput title="提取颜色" showBorder={false}>
<View className={styles.bluetooth_color} onClick={() => getLab()}>
{blueToothColor&&<View className={classnames(styles.color_bock)} style={{background:blueToothColor}}></View>||
<View className={classnames(styles.color_bock_no)} >请取色</View>
}
</View>
</SearchInput>
</View>
</View>
<View className={styles.filter}>
<View className={styles.filter_all}>
<View className={styles.text_zh}>
<Text>综合</Text>
<SortBtn status="top"/>
</View>
<View className={styles.text_sc} >
<Text>收藏</Text>
<SortBtn status="top"/>
</View>
</View>
<View className={styles.filter_btn_con}>
<ScrollView scrollX className={styles.filter_scroll}>
<View className={styles.filter_btn}>
<View>系列</View>
<View>幅宽</View>
<View>克重</View>
<View>克重</View>
<View>克重</View>
<View className={styles.selected}>成分</View>
</View>
</ScrollView>
<View className={styles.filter_more} onClick={() => setShowFilter(true)}>
<Text>筛选</Text>
<Text className={classnames('iconfont icon-shaixuan', styles.miconfont)}></Text>
</View>
</View>
</View>
<View className={styles.list}>
<View className={classnames(styles.list_num, scrollStatus&&styles.list_num_shadow)}>搜索结果 (2条记录)</View>
<View className={styles.scroll}>
<InfiniteScroll
selfonScrollToLower={() => console.log('123123')}
selfOnScroll={(e) => onscroll(e)}
>
<View className={styles.product_list}>
{new Array(9).fill(' ').map(item => {
return <View className={styles.product_item}>
<View className={styles.product_img}>
<Image mode="aspectFill" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d"></Image>
<View className={styles.color_num}>25色</View>
</View>
<View className={styles.product_info}>
<View className={styles.title}>0770#21S精棉平纹</View>
<View className={styles.introduce}>平纹系列</View>
</View>
</View>
})}
</View>
</InfiniteScroll>
</View>
</View>
<Filter show={showFilter} onClose={() => setShowFilter(false)}/>
</View>
)
}

3
src/pages/searchList/index.config.ts
View File

@ -1,3 +0,0 @@
export default {
navigationBarTitleText: '搜索'
}

3
src/pages/searchList/search.config.ts Normal file
View File

@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '搜索',
}

72
src/pages/searchList/search.module.scss Normal file
View File

@ -0,0 +1,72 @@
.main{
.search{
display: flex;
justify-content: space-between;
padding: 20px;
padding-bottom: 50px;
}
.hot {
padding: 0 20px;
.hot_header {
width:100%;
display: flex;
justify-content: space-between;
font-size: $font_size_medium;
.hot_header_title {
font-size: $font_size;
color: $color_font_one;
font-weight: 700;
}
.hot_header_up{
color: $color_main;
}
}
.list{
display: flex;
font-size: $font_size_medium;
flex-wrap: wrap;
padding: 20px 0;
.item{
margin-right: 20px;
margin-bottom: 20px;
padding: 10px 20px;
background-color: #F0F0F0;
color: $color_font_three;
border-radius: 50px;
}
}
}
.history {
padding: 0 20px;
.history_header {
width:100%;
display: flex;
justify-content: space-between;
font-size: $font_size_medium;
.history_header_title {
font-size: $font_size;
color: $color_font_one;
font-weight: 700;
}
.miconfont{
font-size: 30px;
color: $color_font_three;
}
}
.list{
display: flex;
font-size: $font_size_medium;
flex-wrap: wrap;
padding: 20px 0;
.item{
margin-right: 20px;
margin-bottom: 20px;
padding: 10px 20px;
background-color: #F0F0F0;
color: $color_font_three;
border-radius: 50px;
}
}
}
}

44
src/pages/searchList/search.tsx Normal file
View File

@ -0,0 +1,44 @@
import { View } from '@tarojs/components'
import Search from '@/components/search'
import { goLink } from '@/common/common';
import classnames from "classnames";
import styles from './search.module.scss'
export default () => {
return (
<View className={styles.main}>
<View className={styles.search}>
<Search style={{width: '100%'}} placeholder="请输入面料关键词" placeIcon="out" showBtn={true} clickOnSearch={() => {}}/>
</View>
<View className={styles.hot}>
<View className={styles.hot_header}>
<View className={styles.hot_header_title}>热门面料</View>
<View className={styles.hot_header_up} onClick={() => goLink('/pages/searchList/searchList')}>高级搜索</View>
</View>
<View className={styles.list}>
<View className={styles.item}>9265</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>26s</View>
</View>
</View>
<View className={styles.history}>
<View className={styles.history_header}>
<View className={styles.history_header_title}>历史搜索</View>
<View className={classnames('iconfont icon-lajixiang', styles.miconfont)}></View>
</View>
<View className={styles.list}>
<View className={styles.item}>9265</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>全棉双卫衣</View>
<View className={styles.item}>26s</View>
</View>
</View>
</View>
)
}

5
src/pages/searchList/searchList.config.ts Normal file
View File

@ -0,0 +1,5 @@
export default {
navigationBarTitleText: '高级搜索',
enablePullDownRefresh: true,
backgroundTextStyle: 'dark'
}

18
src/pages/searchList/index.module.scss → src/pages/searchList/searchList.module.scss
View File

@ -57,6 +57,7 @@
.filter_scroll{
flex:1;
width: 0;
padding-left: 20px;
::-webkit-scrollbar {
display:none;
width:0;
@ -149,6 +150,23 @@
height: 224px;
background: #e5ad3a;
border-radius: 20px 20px 0px 0px;
position: relative;
image{
width: 100%;
height: 100%;
border-radius: 20px 20px 0px 0px;
}
.color_num {
background: rgba(0,0,0, 0.5);
border-radius: 50px 0px 0px 0px;
font-size: $font_size_min;
color: #fff;
position: absolute;
right:0;
bottom:0;
padding: 5px 20px;
box-sizing: border-box;
}
}
}
.product_info{

41
src/pages/searchList/index.tsx → src/pages/searchList/searchList.tsx
View File

@ -1,12 +1,14 @@
import { ScrollView, Text, View } from "@tarojs/components"
import { Image, ScrollView, Text, View } from "@tarojs/components"
import classnames from "classnames";
import Search from '@/components/search'
import Filter from "@/components/filter";
import InfiniteScroll from '@/components/infiniteScroll'
import SortBtn from "@/components/sortBtn";
import Tabs from "@/components/tabs";
import styles from './index.module.scss'
import SelectData from "./components/selectData";
import { goLink } from "@/common/common";
import styles from './searchList.module.scss'
import { useCallback, useState } from "react";
import useManualPullDownRefresh from "@/use/useManualPullDownRefresh";
export default () => {
const [showFilter, setShowFilter] = useState(false)
@ -15,11 +17,11 @@ export default () => {
{title: '系列', value:2},
{title: '系列', value:3},
{title: '系列', value:4},
{title: '系列', value:5},
{title: '系列', value:5},
{title: '系列', value:5},
{title: '系列', value:5},
{title: '系列', value:5},
{title: '系列', value:6},
{title: '系列', value:7},
{title: '系列', value:8},
{title: '系列', value:9},
{title: '系列', value:10},
])
const [scrollStatus, setScrollStatus] = useState(false)
const onscroll = useCallback((e) => {
@ -29,6 +31,9 @@ export default () => {
setScrollStatus(false)
}
},[])
//页面下拉刷新
const res = useManualPullDownRefresh()
return (
<View className={styles.main}>
<View className={styles.search}>
@ -44,28 +49,21 @@ export default () => {
<Text>收藏</Text>
<SortBtn status="top"/>
</View>
<View className={styles.text_ss} >
<View className={styles.text_ss} onClick={() => goLink('/pages/searchList/hightSearchList')}>
<Text>高级搜索</Text>
<Text className={classnames('iconfont icon-sousuo', styles.miconfont)}></Text>
</View>
</View>
<View className={styles.filter_btn_con}>
<ScrollView scrollX className={styles.filter_scroll}>
<View className={styles.filter_btn}>
<View>系列</View>
<View>幅宽</View>
<View>克重</View>
<View>克重</View>
<View>克重</View>
<View className={styles.selected}>成分</View>
<View className={styles.filter_scroll}>
<SelectData list={selectList}/>
</View>
</ScrollView>
<View className={styles.filter_more} onClick={() => setShowFilter(true)}>
<Text>筛选</Text>
<Text className={classnames('iconfont icon-shaixuan', styles.miconfont)}></Text>
</View>
</View>
</View>
<View className={styles.list}>
<View className={classnames(styles.list_num, scrollStatus&&styles.list_num_shadow)}>搜索结果 (2条记录)</View>
@ -77,7 +75,10 @@ export default () => {
<View className={styles.product_list}>
{new Array(9).fill(' ').map(item => {
return <View className={styles.product_item}>
<View className={styles.product_img}></View>
<View className={styles.product_img}>
<Image mode="aspectFill" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F811%2F021315104H2%2F150213104H2-3-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1651817947&t=5467a207f845ddfc7737d55934e6b26d"></Image>
<View className={styles.color_num}>25色</View>
</View>
<View className={styles.product_info}>
<View className={styles.title}>0770#21S精棉平纹</View>
<View className={styles.tag_list}>

6
src/reducers/index.ts Normal file
View File

@ -0,0 +1,6 @@
import { combineReducers } from 'redux'
import userInfo from './userInfo'
export default combineReducers({
userInfo
})

67
src/reducers/userInfo.ts Normal file
View File

@ -0,0 +1,67 @@
import Taro from '@tarojs/taro'
import {
SET_USERINFO,
SET_TOKEN,
SET_SESSIONKEY,
CLEAR_TOKEN,
CLEAR_USERINFO,
CLEAR_SESSIONKEY
} from '../constants/userInfo'
export type UserParam = {
nickName?:string,
phone?:string,
avatarUrl?:string,
city?: string,
country?: string,
province?: string,
gender?: number,
language?: string,
timestamp?: number
}
export type DataParam = {
token?: string
session_key?: string,
userInfo: UserParam
}
type Action = {
type?: string,
data?: DataParam
}
const INIT_USER = {
userInfo: Taro.getStorageSync('userInfo')?JSON.parse(Taro.getStorageSync('userInfo')):null,
token: Taro.getStorageSync('token')||'',
session_key: Taro.getStorageSync('session_key')||'',
}
export default function counter (state = INIT_USER, action: Action) {
const {type, data} = action
switch (type) {
case SET_USERINFO:
Taro.setStorageSync('userInfo',JSON.stringify(data?.userInfo))
return {...state,...data}
case SET_TOKEN:
Taro.setStorageSync('token',data?.token)
return {...state,...data}
case SET_SESSIONKEY:
Taro.setStorageSync('session_key',data?.session_key)
return {...state,...data}
case CLEAR_TOKEN:
Taro.removeStorageSync('token')
return {...state, token:''}
case CLEAR_SESSIONKEY:
Taro.removeStorageSync('session_key')
return {...state, session_key:''}
case CLEAR_USERINFO:
Taro.removeStorageSync('userInfo')
return {...state, userInfo: null}
default:
return state
}
}

27
src/store/index.ts Normal file
View File

@ -0,0 +1,27 @@
import { createStore, applyMiddleware, compose } from 'redux'
import thunkMiddleware from 'redux-thunk'
import rootReducer from '@/reducers'
const composeEnhancers =
typeof window === 'object' &&
(window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?
(window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
// Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
}) : compose
const middlewares = [
thunkMiddleware
]
if (process.env.NODE_ENV === 'development' && process.env.TARO_ENV !== 'quickapp') {
middlewares.push(require('redux-logger').createLogger())
}
const enhancer = composeEnhancers(
applyMiddleware(...middlewares),
)
export default function configStore () {
const store = createStore(rootReducer, enhancer)
return store
}

4
src/styles/common.scss
View File

@ -19,13 +19,15 @@ $font_size_min: 22px;
//省略号
@mixin common_ellipsis($params:1) {
overflow: hidden;
display: -webkit-box;
white-space:normal;
text-overflow:ellipsis;
word-break:break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp: $params;
text-overflow:ellipsis;
}

477
src/use/contextBlueTooth.tsx Normal file
View File

@ -0,0 +1,477 @@
import React, {useRef, useState } from "react"
import Taro from "@tarojs/taro";
import { Command } from "@/common/bluetooth/command";
import { uint8ArrayToFloat32, uint8ArrayToHex, waitFor } from "@/common/bluetooth/utils";
interface params {
init: () => void
state: Object,
startScan: () => void,
measureAndGetLab: () => any,
getAdapterState: () => void,
connect: (any) => void,
disconnect: () => void
}
const Context = React.createContext<params|unknown>(null)
interface stateStype {
listeners: any,
discovering: boolean,
available: boolean,
connected: any,
connecting: any,
serviceRule: any,
serviceId: any,
characteristicRule: any,
characteristicId: any,
/** 正在执行的命令 */
command: any,
responseResolve: any,
responseReject: any,
responseTimer: any,
/** 是否显示蓝牙调试信息 */
debug: any,
//搜索到的设备
devices: any,
//取色仪主动返回的数据
deviceLab: any
}
let stateObj: stateStype = {
/** 事件监听器 */
listeners: new Set(),
/** 正在扫描设备 */
discovering: false,
/** 蓝牙是否可用 */
available: true,
/** 当前连接的设备 */
connected: null,
/** 正在连接的设备 */
connecting: null,
serviceRule: /^0000FFE0/,
serviceId: null,
characteristicRule: /^0000FFE1/,
characteristicId: null,
/** 正在执行的命令 */
command: null,
responseResolve: null,
responseReject: null,
responseTimer: null,
/** 是否显示蓝牙调试信息 */
debug: true,
//搜索到的设备
devices: [],
//取色仪主动返回的数据
deviceLab: null
}
export default (props) => {
let refStatus = useRef(stateObj)
let [state, setState] = useState(refStatus.current)
const changeStatus = (obj:Object): void => {
refStatus.current = {...refStatus.current, ...obj}
setState({...refStatus.current})
}
const init = async () => {
try{
await openAdapter();
}catch(e) {
changeStatus({available:false})
}
// 绑定事件通知
Taro.onBluetoothAdapterStateChange(res => {
emit({ type: 'stateUpdate', detail: res });
});
Taro.onBLEConnectionStateChange(res => {
emit({ type: res.connected ? 'connected' : 'disconnect', detail: res });
});
Taro.onBLECharacteristicValueChange(({ value }) => notifySubscriber(value));
subscribe(async ev => {
if (ev.type === 'stateUpdate') {
// 蓝牙状态发生的变化
changeStatus({discovering:ev.detail.discovering, available:ev.detail.available})
} else if (ev.type === 'disconnect' && refStatus.current.connected && refStatus.current.connected.deviceId === ev.detail.deviceId) {
// 断开连接
changeStatus({
connected:null,
serviceId:null,
characteristicId:null,
deviceLab:null,
devices:[]
})
Taro.showToast({ icon: 'none', title: '蓝牙连接已断开' });
} else if (ev.type === 'connected' && refStatus.current.connecting) {
// 连接成功
changeStatus({connected: refStatus.current.connecting, connecting: null})
Taro.showToast({ title: '蓝牙已连接' });
} else if (ev.type === 'measure') {
//监听取色仪主动推送lab
await measureAndGetLab()
}
});
}
/** 打开蓝牙适配器 */
const openAdapter = () => {
return new Promise((resolve, reject) => {
Taro.openBluetoothAdapter({
success: resolve,
fail: reject
});
});
}
/**
* 推送事件
* @param {{type: string; data: any}} event
*/
const emit = (event) => {
refStatus.current.listeners.forEach(cb => {
cb && cb(event);
});
}
const subscribe = (cb) => {
if (cb) {
changeStatus({
listeners: refStatus.current.listeners.add(cb)
})
}
}
/**
* 获取蓝牙适配器状态
* @returns {Promise<{discovering: boolean; available: boolean}>}
*/
const getAdapterState = () => {
return new Promise((resolve, reject) => {
Taro.getBluetoothAdapterState({
success: resolve,
fail: reject
})
})
}
/**
* 启动设备扫描
* @param {(res: { devices: { name: string, deviceId: string, RSSI: number }[] }) => void} cb
* @param {number} duration
*/
const startScan = (duration = 30000) => {
console.log('开始寻找')
changeStatus({devices:[]})
Taro.onBluetoothDeviceFound(getDevices);
return new Promise((resolve, reject) => {
Taro.startBluetoothDevicesDiscovery({
allowDuplicatesKey: true,
success: resolve,
fail: reject
});
if (duration > 0) {
setTimeout(() => {
Taro.offBluetoothDeviceFound(getDevices);
Taro.stopBluetoothDevicesDiscovery();
console.log("停止搜索")
}, duration);
}
});
}
//获取搜索到的设备
const getDevices = (res) => {
res.devices.forEach(device => {
// 排除掉已搜索到的设备和名称不合法的设备, 将新发现的设备添加到列表中
if (/^CM/.test(device.name) && !refStatus.current.devices.find(i => i.deviceId === device.deviceId)) {
changeStatus({devices: [ ...refStatus.current.devices, device ]})
}
});
}
/**
* 连接设备
* @param {{ name: string, deviceId: string, RSSI: number }} device
*/
const connect = async (device) => {
try {
changeStatus({connecting: device})
console.log('connecting::', device)
await createConnection(device.deviceId);
await discoverService(device.deviceId);
await discoverCharacteristic(device.deviceId);
await notifyCharacteristicValueChange(device.deviceId);
} catch (e) {
changeStatus({connecting: null})
Taro.showToast({ icon: 'none', title: '蓝牙连接失败' });
throw e;
}
}
/** 断开当前连接的设备 */
const disconnect = async () => {
if (!refStatus.current.connected && !refStatus.current.connecting) return;
if (refStatus.current.connected) {
await closeConnection(refStatus.current.connected.deviceId);
resetCommand();
changeStatus({
connected: null,
serviceId: null,
characteristicId: null,
devices: [],
deviceLab: null
})
}
if (refStatus.current.connecting) {
await closeConnection(refStatus.current.connecting.deviceId);
changeStatus({connecting:null})
}
}
/** 创建 BLE 连接 */
function createConnection(deviceId) {
return new Promise((resolve, reject) => {
Taro.createBLEConnection({
deviceId,
timeout: 2000,
success: resolve,
fail: reject
});
});
}
/** 关闭 BLE 连接 */
function closeConnection(deviceId) {
return new Promise((resolve, reject) => {
Taro.closeBLEConnection({
deviceId,
success: resolve,
fail: reject
});
});
}
/** 搜索服务 */
function discoverService(deviceId) {
return new Promise((resolve, reject) => {
Taro.getBLEDeviceServices({
deviceId,
success: ({ services }) => {
const service = services.find(i => refStatus.current.serviceRule.test(i.uuid));
if (!service) {
reject(new Error('服务不可用'));
} else {
changeStatus({serviceId: service.uuid})
resolve(service);
}
},
fail: reject
});
});
}
/** 搜索特征 */
function discoverCharacteristic(deviceId) {
return new Promise((resolve, reject) => {
Taro.getBLEDeviceCharacteristics({
deviceId,
serviceId: refStatus.current.serviceId,
success: ({ characteristics }) => {
const characteristic = characteristics.find(i => refStatus.current.characteristicRule.test(i.uuid));
if (!characteristic) {
reject(new Error('特征不可用'));
} else {
changeStatus({characteristicId: characteristic.uuid})
resolve(characteristic);
}
},
fail: reject
})
});
}
/** 启动特征通知 */
function notifyCharacteristicValueChange(deviceId, stateParm = true) {
return new Promise((resolve, reject) => {
Taro.notifyBLECharacteristicValueChange({
deviceId,
serviceId: refStatus.current.serviceId,
characteristicId: refStatus.current.characteristicId,
state:stateParm,
success: resolve,
fail: reject
});
});
}
/**
* 通知订阅器
* @param {ArrayBuffer} buffer
*/
function notifySubscriber(buffer) {
if (refStatus.current.command) {
if (refStatus.current.debug) {
console.log(`[BLE RESP] ${uint8ArrayToHex(new Uint8Array(buffer))}`);
}
refStatus.current.command.fillResponse(buffer);
if (refStatus.current.command.isComplete) {
if (refStatus.current.command.isValid && refStatus.current.responseResolve) {
refStatus.current.responseResolve(refStatus.current.command.response);
} else if (!refStatus.current.command.isValid) {
refStatus.current.responseReject(new Error('无效数据'));
}
resetCommand();
}
} else {
const uint8Array = new Uint8Array(buffer);
if (uint8Array[0] === 0xbb && uint8Array[1] === 1 && uint8Array[3] === 0) {
const ev = { type: 'measure', detail: { mode: uint8Array[2] } };
emit(ev);
}
}
}
/**
* 发送命令
* @param {Command}} command
* @returns {Promise<Uint8Array>}
*/
function exec(command) {
return new Promise(async (resolve, reject) => {
if (refStatus.current.command) {
reject(new Error('正在执行其他命令'));
} else {
try {
refStatus.current.command = command;
const data = command.data;
for (let i = 0; i < data.length; i++) {
await sendData(data[i]);
}
if (command.responseSize <= 0) {
resolve(true);
resetCommand();
} else {
refStatus.current.responseReject = reject;
refStatus.current.responseResolve = resolve;
refStatus.current.responseTimer = setTimeout(() => {
reject(new Error('命令响应超时'));
resetCommand();
}, command.timeout);
}
} catch (e) {
reject(e);
}
}
});
}
/**
* 发送命令
* @param {ArrayBuffer} buffer
*/
function sendData(buffer) {
if (refStatus.current.debug) {
console.log(`[BLE SEND] ${uint8ArrayToHex(new Uint8Array(buffer))}`);
}
return new Promise((resolve, reject) => {
console.log('current:::',refStatus.current)
Taro.writeBLECharacteristicValue({
deviceId: refStatus.current.connected.deviceId,
serviceId: refStatus.current.serviceId,
characteristicId: refStatus.current.characteristicId,
value: buffer,
success: resolve,
fail: reject
})
});
}
function resetCommand() {
if (refStatus.current.responseTimer) {
clearTimeout(refStatus.current.responseTimer);
}
changeStatus({
command: null,
responseResolve: null,
responseReject: null,
responseTimer: null
})
}
/**
* 测量
* @param {number} mode
* @returns {Promise}
*/
async function measure (mode = 0) {
console.log('current1:::',Command.WakeUp)
await exec(Command.WakeUp);
console.log('current2:::',Command.WakeUp)
await waitFor(50);
console.log('current3:::',Command.WakeUp)
return await exec(Command.measure(mode));
}
/**
* 获取测量的 lab 值
* @param {number} mode
* @returns {Promise<{ L: number, a: number, b: number }>}
*/
async function getLab(mode = 0) {
await exec(Command.WakeUp);
await waitFor(50);
const data: any = await exec(Command.getLab(mode));
return {
L: uint8ArrayToFloat32(data.slice(5, 9)),
a: uint8ArrayToFloat32(data.slice(9, 13)),
b: uint8ArrayToFloat32(data.slice(13, 17)),
};
}
/**
* 测量并获取 lab 值
* @param {number} mode
* @returns {Promise<{L: number, a: number, b: number}>}
*/
async function measureAndGetLab(mode = 0) {
await measure(mode);
await waitFor(50);
const lab = await getLab(mode);
console.log('lab2::',lab)
changeStatus({deviceLab:lab})
return lab
}
return <Context.Provider children={props.children} value={{
init,
state,
startScan,
measureAndGetLab,
getAdapterState,
connect,
disconnect
}} />
}
export const useBluetooth = () => {
const res = React.useContext<any>(Context)
if(res) {
return {...res}
} else {
return {}
}
}

202
src/use/useHttp.ts Normal file
View File

@ -0,0 +1,202 @@
import Taro, { useRouter } from '@tarojs/taro'
import { useRef, useState } from 'react'
import {BASE_URL, WX_APPID} from '@/common/constant'
import useUserInfo from "./useUserInfo"
import qs from 'qs';
type Params = {
code: string|null
success: true|false
data: any,
msg: string,
loading: true|false,
error: any,
query: any,
filter: any,
sort: any,
total: number,
multiple: true|false, // 请求多次
count: number, // 第几次请求
token: string, // token
page?: number,
pageSize?: number
}
type option = {
url?: string,
method?: 'get'|'post'|'put'|'delete',
type?: string,
data?: any,
page?: number,
pageSize?: number,
pagination?: true|false
}
/**
* 返回状态信息，根据 http 状态错
* @param {Number} status
* @returns
*/
const showStatus = (status) => {
let message = ''
switch (status) {
case 400:
message = '请求错误(400)'
break
case 401:
message = '未授权，请重新登录(401)'
break
case 403:
message = '拒绝访问(403)'
break
case 404:
message = '请求出错(404)'
break
case 408:
message = '请求超时(408)'
break
case 500:
message = '服务器错误(500)'
break
case 501:
message = '服务未实现(501)'
break
case 502:
message = '网络错误(502)'
break
case 503:
message = '服务不可用(503)'
break
case 504:
message = '网络超时(504)'
break
case 505:
message = 'HTTP版本不受支持(505)'
break
default:
message = `连接出错(${status})!`
}
return `${message}，请检查网络或联系管理员！`
}
/**
* axios 请求状态封装，返回响应式数据 fetch(), loading, error, code, msg 等常用方法/状态
* @param {Object} options 对象
* @param {String} options.url 请求的URL
* @param {String} options.method 请求的方法
* @param {Object} options.data 请求的参数
* @returns {Object} 返回fetch(), loading, error, code, msg
*/
export const useRequest = (options:option = {
url: '/',
method: 'get',
type: 'json',
data: {},
page: 1,
pageSize: 24,
pagination: false, // 是否分页
}) => {
options.url = `${BASE_URL}${options.url}`
let params:Params = {
code: null, // 业务码
success: false, // 请求是否成功
data: {},
msg: '',
loading: false,
error: null,
query: {},
filter: null,
sort: '',
total: 0,
multiple: true, // 请求多次
count: 0, // 第几次请求
token: '', // token
}
const stateRef = useRef({...params})
const [state, setState] = useState({...stateRef.current})
const {removeToken, removeSessionKey} = useUserInfo()
const router = useRouter()
// 请求函数
const fetchData = async (sub_options?:any) => {
stateRef.current.loading = true
setState((e) => ({...e, loading:true}))
stateRef.current.query = {
...sub_options,
...options.pagination && {
page: stateRef.current.page,
size: stateRef.current.pageSize,
},
...stateRef.current.filter,
...stateRef.current.sort
}
try {
let token = Taro.getStorageSync('token')
const q = {
...options,
...{
header: {
"Platform": 6,
"Appid": WX_APPID,
"Authorization": token || stateRef.current.token,
}
},
...options.method?.toUpperCase() == 'GET' ? {
data: stateRef.current.query
} : {
data: options.type?.toUpperCase() == 'FORMDATA' ? qs.stringify(stateRef.current.query) : stateRef.current.query
}
}
const result = await Taro.request(q as any)
const { statusCode } = result
const {
code,
msg,
data
} = result.data
console.log(code, msg, data, statusCode);
if (statusCode === 200) {
stateRef.current.success = (code === 0 ? true : false)
stateRef.current.code = code
stateRef.current.msg = msg
stateRef.current.data = data
stateRef.current.total = data?.list ? data?.total : 0
}else{
if (statusCode === 401) {
removeToken()
removeSessionKey()
// remove
// Taro.reLaunch({
// url: router.path +'?' + qs.stringify(router.params)
// })
} else {
Taro.showToast({
title: `错误：${showStatus(statusCode)}`,
icon: 'none'
})
}
}
} catch (e) {
stateRef.current.success = false
stateRef.current.error = true
stateRef.current.msg = e.errMsg
}
stateRef.current.error = false
stateRef.current.loading = false
setState(() => stateRef.current)
return stateRef.current
}
return {
fetchData,
state,
}
}

126
src/use/useLogin.ts Normal file
View File

@ -0,0 +1,126 @@
import { useEffect, useState } from "react"
import { WX_APPID } from "@/common/constant"
import useUserInfo from "./useUserInfo"
import Taro, { useRouter } from "@tarojs/taro"
import { LoginApi } from "@/api/login"
import { GetWxUserInfoApi } from "@/api/user"
import qs from 'qs';
export default () => {
const {setToken, setSessionKey, setUserInfo, userInfo} = useUserInfo()
useEffect(() => {
console.log('userInfo::',userInfo.token)
}, [userInfo])
const router = useRouter()
//登录请求
const {fetchData} = LoginApi()
//微信登录
const wxLogin = () => {
return new Promise((reslove, reject) => {
Taro.login({
success: async (res) => {
if (res.code) {
const {data, success, msg} = await fetchData({js_code: res.code})
if(success) {
console.log('token::',data.token)
setToken(data.token)
setSessionKey(data.session_key)
reslove(data)
let params = router.params
delete params.$taroTimestamp
console.log('params::',params)
if(router.path === '/pages/index/index' || router.path === '/pages/user/index') {
Taro.reLaunch({
url: router.path +'?' + qs.stringify(params)
})
} else {
Taro.redirectTo({
url: router.path +'?' + qs.stringify(params)
})
}
} else {
Taro.showToast({
title:'登录失败',
icon:"none"
})
reject(msg)
}
} else {
console.log('登录失败！' + res.errMsg)
reject(res.errMsg)
}
},
fail: function(e) {
console.log('登录失败！::',e)
reject(e)
}
})
})
}
//登录加checkLogin检查
const checkLogin = () => {
return new Promise( async (reslove) => {
if(!userInfo.token) {
await wxLogin()
reslove(true)
} else {
Taro.checkSession({
success: async () => {
reslove(true)
},
fail: async () => {
await wxLogin()
reslove(true)
}
})
}
})
}
//获取用户头像等信息数据
const {fetchData: fetchDataUserInfo} = GetWxUserInfoApi()
const getSelfUserInfo = async () => {
return new Promise((reslove, reject) => {
if(!userInfo.userInfo) {
Taro.getUserProfile({
desc: '用于完善会员资料',
success: async (res) => {
if(!userInfo.session_key) {
await wxLogin()
}
const {data} = await fetchDataUserInfo({
session_key: userInfo.session_key,
raw_data: res.rawData,
signature: res.signature,
encrypted_data: res.encryptedData,
iv: res.iv
})
setUserInfo({...data})
reslove(data)
},
fail:(e) => {
reject(e)
}
})
} else {
reslove(true)
}
})
}
return {
checkLogin,
wxLogin,
getSelfUserInfo
}
}

24
src/use/useManualPullDownRefresh.ts Normal file
View File

@ -0,0 +1,24 @@
import Taro, { usePullDownRefresh } from "@tarojs/taro"
import { useCallback, useState } from "react"
type Arg = {[index:string]:any}
export default (fn?:(val:Arg) => any, arg?:Arg) => {
const [data, setData] = useState({})
usePullDownRefresh(() => {
getData()
})
const getData = useCallback(() => {
setTimeout(() => {
const res = fn?.({...arg})
setData((e) => ({...e, res}))
Taro.stopPullDownRefresh()
}, 1000)
}, [])
return {
getData,
data
}
}

41
src/use/useUserInfo.ts Normal file
View File

@ -0,0 +1,41 @@
import { useDispatch, useSelector } from 'react-redux'
import { CLEAR_SESSIONKEY, SET_USERINFO, SET_TOKEN, SET_SESSIONKEY, CLEAR_USERINFO, CLEAR_TOKEN} from '@/constants/userInfo'
import {DataParam, UserParam} from '@/reducers/userInfo'
export default () => {
const userInfo = useSelector((state:DataParam) => state.userInfo) as DataParam
const dispatch = useDispatch()
const setToken = (token: string) => {
dispatch({type:SET_TOKEN, data:{token}})
}
const setSessionKey = (sessionkey: string) => {
dispatch({type:SET_SESSIONKEY, data:{session_key: sessionkey}})
}
const setUserInfo = (userInfo: UserParam) => {
dispatch({type:SET_USERINFO, data:{userInfo}})
}
const removeUserInfo = () => {
dispatch({type:CLEAR_USERINFO})
}
const removeToken = () => {
dispatch({type:CLEAR_TOKEN})
}
const removeSessionKey = () => {
dispatch({type:CLEAR_SESSIONKEY})
}
return {
setToken,
setUserInfo,
setSessionKey,
removeUserInfo,
removeToken,
removeSessionKey,
userInfo, //响应式数据返回
}
}

2014
yarn.lock
View File

File diff suppressed because it is too large Load Diff