|
@@ -1,236 +1,236 @@
|
|
|
-import { useState } from "react";
|
|
|
-import { Image, Label, View } from "@tarojs/components";
|
|
|
-import Taro, { FC, pxTransform, useRouter } from "@tarojs/taro";
|
|
|
-import { AtButton, AtInput, AtTextarea } from "taro-ui";
|
|
|
-import { Rules } from "async-validator";
|
|
|
-import BgImg from "../../images/feedback@2x-min.png";
|
|
|
-import { handleValidate } from "../../../utils";
|
|
|
-import { redeemApi } from "../../../api";
|
|
|
-import CertImg from "../../images/cert@2x-min.jpg";
|
|
|
-import { CertLayout } from "../../components/CertLayout";
|
|
|
-import { FooterProtocol } from "../../../components/FooterProtocol";
|
|
|
-import { formatDate } from "@dage/utils";
|
|
|
-import "./index.scss";
|
|
|
-import "../feedback/index.scss";
|
|
|
-
|
|
|
-const DEFAULT_PARAMS = {
|
|
|
- name: "",
|
|
|
- phone: "",
|
|
|
- description: "",
|
|
|
-};
|
|
|
-
|
|
|
-const OrderPage: FC = () => {
|
|
|
- const router = useRouter();
|
|
|
- /**
|
|
|
- * 是否证书
|
|
|
- */
|
|
|
- const isCert = Number(router.params.id) === 1;
|
|
|
- const remainder = Number(router.params.point) - Number(router.params.score);
|
|
|
- const [params, setParams] = useState({ ...DEFAULT_PARAMS });
|
|
|
- const [loading, setLoading] = useState(false);
|
|
|
- const [showCert, setShowCert] = useState(false);
|
|
|
- const [checked, setChecked] = useState(false);
|
|
|
-
|
|
|
- const formRules: Rules = isCert
|
|
|
- ? {
|
|
|
- name: [{ required: true, message: "请输入称呼" }],
|
|
|
- }
|
|
|
- : {
|
|
|
- name: [{ required: true, message: "请输入称呼" }],
|
|
|
- phone: [{ required: true, message: "请输入联系方式" }],
|
|
|
- description: [{ required: true, message: "请输入地址及留言" }],
|
|
|
- };
|
|
|
-
|
|
|
- const handleSubmit = async (event, readProtocol = false) => {
|
|
|
- if (!(await handleValidate(params, formRules))) return;
|
|
|
-
|
|
|
- if (!checked && !readProtocol) {
|
|
|
- Taro.showModal({
|
|
|
- title: "提示",
|
|
|
- content: "是否已阅读并同意《用户服务协议》及《个人信息保护政策》",
|
|
|
- confirmText: "同意",
|
|
|
- success: (res) => {
|
|
|
- if (res.confirm) {
|
|
|
- setChecked(true);
|
|
|
- handleSubmit(undefined, true);
|
|
|
- }
|
|
|
- },
|
|
|
- });
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- Taro.showModal({
|
|
|
- title: "提示",
|
|
|
- content: "确认是否捐赠",
|
|
|
- async success(res) {
|
|
|
- if (res.cancel) return;
|
|
|
-
|
|
|
- try {
|
|
|
- setLoading(true);
|
|
|
- await redeemApi({
|
|
|
- ...params,
|
|
|
- prizeId: router.params.id,
|
|
|
- score: -Number(router.params.score),
|
|
|
- });
|
|
|
-
|
|
|
- if (isCert) {
|
|
|
- setShowCert(true);
|
|
|
- } else {
|
|
|
- Taro.showToast({
|
|
|
- title: "提交成功,工作人员会与您及时联系",
|
|
|
- icon: "none",
|
|
|
- duration: 3000,
|
|
|
- });
|
|
|
-
|
|
|
- setTimeout(() => {
|
|
|
- Taro.navigateBack();
|
|
|
- }, 3000);
|
|
|
- }
|
|
|
- } finally {
|
|
|
- setLoading(false);
|
|
|
- }
|
|
|
- },
|
|
|
- });
|
|
|
- };
|
|
|
-
|
|
|
- const limitLength = (val: string, maxLength: number) => {
|
|
|
- let len = 0;
|
|
|
- for (let i = 0; i < val.length; i++) {
|
|
|
- if (/[\u4e00-\u9fa5]/.test(val[i])) {
|
|
|
- len += 2;
|
|
|
- } else {
|
|
|
- len++;
|
|
|
- }
|
|
|
-
|
|
|
- if (len > maxLength) {
|
|
|
- return val.substring(0, maxLength);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- return val;
|
|
|
- };
|
|
|
-
|
|
|
- return (
|
|
|
- <View className="feedback-page">
|
|
|
- <View className="feedback order">
|
|
|
- <View className="feedback-main">
|
|
|
- <View className="feedback-main__form">
|
|
|
- <Label className="feedback__label">您的称呼</Label>
|
|
|
- <AtInput
|
|
|
- name="name"
|
|
|
- className="feedback__input"
|
|
|
- placeholder="请输入内容,5字以内"
|
|
|
- value={params.name}
|
|
|
- onChange={(val) =>
|
|
|
- setParams({
|
|
|
- ...params,
|
|
|
- name: limitLength(val as string, 5),
|
|
|
- })
|
|
|
- }
|
|
|
- />
|
|
|
-
|
|
|
- {isCert ? (
|
|
|
- <>
|
|
|
- <Label className="feedback__label">效果示意</Label>
|
|
|
- <Image
|
|
|
- src={CertImg}
|
|
|
- mode="widthFix"
|
|
|
- style={{
|
|
|
- margin: `${pxTransform(38)} -${pxTransform(
|
|
|
- 20
|
|
|
- )} ${pxTransform(60)}`,
|
|
|
- width: `calc(100% + ${pxTransform(40)})`,
|
|
|
- }}
|
|
|
- />
|
|
|
- </>
|
|
|
- ) : (
|
|
|
- <>
|
|
|
- <Label className="feedback__label">联系方式</Label>
|
|
|
- <AtInput
|
|
|
- name="phone"
|
|
|
- type="phone"
|
|
|
- maxLength={20}
|
|
|
- className="feedback__input"
|
|
|
- placeholder="请输入内容,20字以内"
|
|
|
- value={params.phone}
|
|
|
- onChange={(val) =>
|
|
|
- setParams({
|
|
|
- ...params,
|
|
|
- phone: val as string,
|
|
|
- })
|
|
|
- }
|
|
|
- />
|
|
|
-
|
|
|
- <Label className="feedback__label">地址及留言</Label>
|
|
|
- <AtTextarea
|
|
|
- className="feedback__input textarea"
|
|
|
- maxLength={50}
|
|
|
- placeholder="请输入省市区街道,50字以内"
|
|
|
- value={params.description}
|
|
|
- onChange={(val) =>
|
|
|
- setParams({
|
|
|
- ...params,
|
|
|
- description: val.trim(),
|
|
|
- })
|
|
|
- }
|
|
|
- />
|
|
|
- </>
|
|
|
- )}
|
|
|
- </View>
|
|
|
-
|
|
|
- <View className="feedback-main__form">
|
|
|
- <View className="order__line">
|
|
|
- <View className="order__line__label size38 bold">您的爱心</View>
|
|
|
- <View className="order__line__num size38 bold">
|
|
|
- {router.params.point}
|
|
|
- </View>
|
|
|
- </View>
|
|
|
-
|
|
|
- <View className="order__line">
|
|
|
- <View className="order__line__label">捐赠</View>
|
|
|
- <View className="order__line__num red">
|
|
|
- {router.params.score}
|
|
|
- </View>
|
|
|
- </View>
|
|
|
-
|
|
|
- <View className="order__line">
|
|
|
- <View className="order__line__label bold">结余</View>
|
|
|
- <View className="order__line__num green">{remainder}</View>
|
|
|
- </View>
|
|
|
-
|
|
|
- <View className="toolbar">
|
|
|
- <AtButton
|
|
|
- className="toolbar__btn cancel"
|
|
|
- onClick={() => Taro.navigateBack()}
|
|
|
- >
|
|
|
- 取消
|
|
|
- </AtButton>
|
|
|
- <AtButton
|
|
|
- className="toolbar__btn submit"
|
|
|
- loading={loading}
|
|
|
- onClick={handleSubmit}
|
|
|
- >
|
|
|
- 捐赠
|
|
|
- </AtButton>
|
|
|
- </View>
|
|
|
- </View>
|
|
|
-
|
|
|
- <FooterProtocol checked={checked} setChecked={setChecked} />
|
|
|
- </View>
|
|
|
-
|
|
|
- <Image src={BgImg} className="feedback__bg" mode="widthFix" />
|
|
|
- </View>
|
|
|
-
|
|
|
- <CertLayout
|
|
|
- name={params.name}
|
|
|
- date={formatDate(new Date(), "YYYY年MM月DD日")}
|
|
|
- isOpened={showCert}
|
|
|
- onClose={() => {
|
|
|
- Taro.navigateBack();
|
|
|
- }}
|
|
|
- />
|
|
|
- </View>
|
|
|
- );
|
|
|
-};
|
|
|
-
|
|
|
-export default OrderPage;
|
|
|
+import { useState } from "react";
|
|
|
+import { Image, Label, View } from "@tarojs/components";
|
|
|
+import Taro, { FC, pxTransform, useRouter } from "@tarojs/taro";
|
|
|
+import { AtButton, AtInput, AtTextarea } from "taro-ui";
|
|
|
+import { Rules } from "async-validator";
|
|
|
+import BgImg from "../../images/feedback@2x-min.png";
|
|
|
+import { handleValidate } from "../../../utils";
|
|
|
+import { redeemApi } from "../../../api";
|
|
|
+import CertImg from "../../images/cert@2x-min.jpg";
|
|
|
+import { CertLayout } from "../../components/CertLayout";
|
|
|
+import { FooterProtocol } from "../../../components/FooterProtocol";
|
|
|
+import { formatDate } from "@dage/utils";
|
|
|
+import "./index.scss";
|
|
|
+import "../feedback/index.scss";
|
|
|
+
|
|
|
+const DEFAULT_PARAMS = {
|
|
|
+ name: "",
|
|
|
+ phone: "",
|
|
|
+ description: "",
|
|
|
+};
|
|
|
+
|
|
|
+const OrderPage: FC = () => {
|
|
|
+ const router = useRouter();
|
|
|
+ /**
|
|
|
+ * 是否证书
|
|
|
+ */
|
|
|
+ const isCert = Number(router.params.id) === 1;
|
|
|
+ const remainder = Number(router.params.point) - Number(router.params.score);
|
|
|
+ const [params, setParams] = useState({ ...DEFAULT_PARAMS });
|
|
|
+ const [loading, setLoading] = useState(false);
|
|
|
+ const [showCert, setShowCert] = useState(false);
|
|
|
+ const [checked, setChecked] = useState(false);
|
|
|
+
|
|
|
+ const formRules: Rules = isCert
|
|
|
+ ? {
|
|
|
+ name: [{ required: true, message: "请输入称呼" }],
|
|
|
+ }
|
|
|
+ : {
|
|
|
+ name: [{ required: true, message: "请输入称呼" }],
|
|
|
+ phone: [{ required: true, message: "请输入联系方式" }],
|
|
|
+ description: [{ required: true, message: "请输入地址及留言" }],
|
|
|
+ };
|
|
|
+
|
|
|
+ const handleSubmit = async (event, readProtocol = false) => {
|
|
|
+ if (!(await handleValidate(params, formRules))) return;
|
|
|
+
|
|
|
+ if (!checked && !readProtocol) {
|
|
|
+ Taro.showModal({
|
|
|
+ title: "提示",
|
|
|
+ content: "是否已阅读并同意《用户服务协议》及《个人信息保护政策》",
|
|
|
+ confirmText: "同意",
|
|
|
+ success: (res) => {
|
|
|
+ if (res.confirm) {
|
|
|
+ setChecked(true);
|
|
|
+ handleSubmit(undefined, true);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ Taro.showModal({
|
|
|
+ title: "提示",
|
|
|
+ content: "确认是否捐赠",
|
|
|
+ async success(res) {
|
|
|
+ if (res.cancel) return;
|
|
|
+
|
|
|
+ try {
|
|
|
+ setLoading(true);
|
|
|
+ await redeemApi({
|
|
|
+ ...params,
|
|
|
+ prizeId: router.params.id,
|
|
|
+ score: -Number(router.params.score),
|
|
|
+ });
|
|
|
+
|
|
|
+ if (isCert) {
|
|
|
+ setShowCert(true);
|
|
|
+ } else {
|
|
|
+ Taro.showToast({
|
|
|
+ title: "提交成功,工作人员会与您及时联系",
|
|
|
+ icon: "none",
|
|
|
+ duration: 3000,
|
|
|
+ });
|
|
|
+
|
|
|
+ setTimeout(() => {
|
|
|
+ Taro.navigateBack();
|
|
|
+ }, 3000);
|
|
|
+ }
|
|
|
+ } finally {
|
|
|
+ setLoading(false);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ });
|
|
|
+ };
|
|
|
+
|
|
|
+ const limitLength = (val: string, maxLength: number) => {
|
|
|
+ let len = 0;
|
|
|
+ for (let i = 0; i < val.length; i++) {
|
|
|
+ if (/[\u4e00-\u9fa5]/.test(val[i])) {
|
|
|
+ len += 2;
|
|
|
+ } else {
|
|
|
+ len++;
|
|
|
+ }
|
|
|
+
|
|
|
+ if (len > maxLength) {
|
|
|
+ return val.substring(0, maxLength);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return val;
|
|
|
+ };
|
|
|
+
|
|
|
+ return (
|
|
|
+ <View className="feedback-page">
|
|
|
+ <View className="feedback order">
|
|
|
+ <View className="feedback-main">
|
|
|
+ <View className="feedback-main__form">
|
|
|
+ <Label className="feedback__label">您的称呼</Label>
|
|
|
+ <AtInput
|
|
|
+ name="name"
|
|
|
+ className="feedback__input"
|
|
|
+ placeholder="请输入内容,5字以内"
|
|
|
+ value={params.name}
|
|
|
+ onChange={(val) =>
|
|
|
+ setParams({
|
|
|
+ ...params,
|
|
|
+ name: limitLength(val as string, 5),
|
|
|
+ })
|
|
|
+ }
|
|
|
+ />
|
|
|
+
|
|
|
+ {isCert ? (
|
|
|
+ <>
|
|
|
+ <Label className="feedback__label">效果示意</Label>
|
|
|
+ <Image
|
|
|
+ src={CertImg}
|
|
|
+ mode="widthFix"
|
|
|
+ style={{
|
|
|
+ margin: `${pxTransform(38)} -${pxTransform(
|
|
|
+ 20
|
|
|
+ )} ${pxTransform(60)}`,
|
|
|
+ width: `calc(100% + ${pxTransform(40)})`,
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </>
|
|
|
+ ) : (
|
|
|
+ <>
|
|
|
+ <Label className="feedback__label">联系方式</Label>
|
|
|
+ <AtInput
|
|
|
+ name="phone"
|
|
|
+ type="phone"
|
|
|
+ maxLength={20}
|
|
|
+ className="feedback__input"
|
|
|
+ placeholder="请输入内容,20字以内"
|
|
|
+ value={params.phone}
|
|
|
+ onChange={(val) =>
|
|
|
+ setParams({
|
|
|
+ ...params,
|
|
|
+ phone: val as string,
|
|
|
+ })
|
|
|
+ }
|
|
|
+ />
|
|
|
+
|
|
|
+ <Label className="feedback__label">地址及留言</Label>
|
|
|
+ <AtTextarea
|
|
|
+ className="feedback__input textarea"
|
|
|
+ maxLength={50}
|
|
|
+ placeholder="请输入省市区街道,50字以内"
|
|
|
+ value={params.description}
|
|
|
+ onChange={(val) =>
|
|
|
+ setParams({
|
|
|
+ ...params,
|
|
|
+ description: val.trim(),
|
|
|
+ })
|
|
|
+ }
|
|
|
+ />
|
|
|
+ </>
|
|
|
+ )}
|
|
|
+ </View>
|
|
|
+
|
|
|
+ <View className="feedback-main__form">
|
|
|
+ <View className="order__line">
|
|
|
+ <View className="order__line__label size38 bold">您的爱心</View>
|
|
|
+ <View className="order__line__num size38 bold">
|
|
|
+ {router.params.point}
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+
|
|
|
+ <View className="order__line">
|
|
|
+ <View className="order__line__label">扣减</View>
|
|
|
+ <View className="order__line__num red">
|
|
|
+ {router.params.score}
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+
|
|
|
+ <View className="order__line">
|
|
|
+ <View className="order__line__label bold">结余</View>
|
|
|
+ <View className="order__line__num green">{remainder}</View>
|
|
|
+ </View>
|
|
|
+
|
|
|
+ <View className="toolbar">
|
|
|
+ <AtButton
|
|
|
+ className="toolbar__btn cancel"
|
|
|
+ onClick={() => Taro.navigateBack()}
|
|
|
+ >
|
|
|
+ 取消
|
|
|
+ </AtButton>
|
|
|
+ <AtButton
|
|
|
+ className="toolbar__btn submit"
|
|
|
+ loading={loading}
|
|
|
+ onClick={handleSubmit}
|
|
|
+ >
|
|
|
+ 兑换
|
|
|
+ </AtButton>
|
|
|
+ </View>
|
|
|
+ </View>
|
|
|
+
|
|
|
+ <FooterProtocol checked={checked} setChecked={setChecked} />
|
|
|
+ </View>
|
|
|
+
|
|
|
+ <Image src={BgImg} className="feedback__bg" mode="widthFix" />
|
|
|
+ </View>
|
|
|
+
|
|
|
+ <CertLayout
|
|
|
+ name={params.name}
|
|
|
+ date={formatDate(new Date(), "YYYY年MM月DD日")}
|
|
|
+ isOpened={showCert}
|
|
|
+ onClose={() => {
|
|
|
+ Taro.navigateBack();
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </View>
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+export default OrderPage;
|