fix

src/pages/PayOrder/index.jsx

@@ -1,73 +1,291 @@
-import Taro from '@tarojs/taro'
-import Star from '@/components/Star/Star.jsx'
-import pay from '@/assets/icons/housemantj/pay.png'
-import msTip from '@/assets/icons/housemantj/foodtip.png'
-import wz from '@/assets/icons/housemantj/location.png'
-import hongxin from '@/assets/icons/housemantj/已收藏.png'
-import baixin from '@/assets/icons/housemantj/收藏.png'
-import './style.less'
-import useSave from "@/utils/hooks/useSave"
-import {getShopDetail,getShopcity} from '@/services/home'
-import { useState, useEffect } from 'react'
-
-
-
-//套餐卡片
-export default (props) => {
-  const { item } = props
-  const [isSaved, toggleSave] = useSave(item.isSaved,'shop_package', item.packageId)
-  const [city,setCity]=useState({})
-  const [detail,setDetail]=useState({})
+import withLayout from "@/layouts";
+import image from "@/assets/icons/ProCard/8kb.jpg";
+import { useState, useEffect } from "react";
+import { Button, Checkbox, Input } from "@tarojs/components";
+
+import food from "@/assets/icons/ProCard/food.png";
+import ProCard_hot from "@/assets/icons/ProCard/ProCard_hot.png";
+import CustomNav from "@/components/CustomNav";
+import OrderMolded from "@/components/OrderMolded";
+import Popup from "@/components/Popup";
+
+import "./style.less";
+import Taro, { useDidShow } from "@tarojs/taro";
+import { getShopPackageDetail } from "@/services/home";
+import { saveOrder, getOrderSub, payOrder } from "@/services/payOrder";
+import formatTime from "@/utils/formatTime";
+
+export default withLayout((props) => {
+  const { router, person } = props;
+  const { packageId, orderId } = props.router.params;
+
+  const [payInfo,setPayInfo] = useState()
+
+  const [showDialog, setShowDialog] = useState(false);
+  // 是否已阅读协议
+  const [agreement, setAgreement] = useState(false);
+  // 总价 totalPrice
+  const [totalPrice, setTotalPrice] = useState({});
+  const [list, setList] = useState([]);
+
+  const [BuyNumber, setBuyNumber] = useState(1);
+  const [detail, setDetail] = useState({});
+
+  const [DisabledBool, setDisabledBool] = useState(false);
+
+  const ShowMoldeOn = (e) => {
+    if (packageId) {
+      setBuyNumber(e.amount || 1);
+      setDetail(e);
+      setShowDialog(true);
+    }
+  };
+  const ButtonCancel = () => {
+    setShowDialog(false);
+  };
+  const ButtonOK = (e) => {
+    setList(
+      list.map((x) =>
+        x.packageId == detail.packageId ? { ...x, amount: BuyNumber } : x
+      )
+    );
+    setShowDialog(false);
+  };
+
+  const NumberAdd = () => {
+    setBuyNumber(BuyNumber + 1);
+    console.log(BuyNumber);
+  };
+
+  const NumberCut = () => {
+    if (DisabledBool) return;
+    setBuyNumber(BuyNumber - 1);
+    console.log(BuyNumber);
+  };
+
+  const onInput = (e) => {
+    let values = e.detail.value;
+    setBuyNumber(values - 0);
+  };
+
+  const requestPayment = (params) =>{
+    console.log(params,'requestPayment')
+    Taro.requestPayment({
+      ...params,
+      package: params.packageValue,
+      success: () => {
+        console.log("success");
+        setPayInfo()
+        Taro.showToast({
+          title: "支付成功",
+          icon: "none",
+          duration: 2000,
+        });
+      },
+      fail: (e) => {
+        console.log(e, "fail");
+        Taro.showToast({
+          title: "支付失败",
+          icon: "none",
+          duration: 2000,
+        });
+      },
+    });
+  }
+
+  const onShowPay = (e) => {
+    if (agreement) {
+      if(payInfo){
+        requestPayment(payInfo)
+        return
+      }
+      if (packageId) {
+        saveOrder(
+          list.map((x) => {
+            return {
+              amount: x.amount || 1,
+              itemId: x.packageId,
+              price: x.actualPrice,
+            };
+          })
+        ).then((res) => {
+          setPayInfo(res)
+          requestPayment(res)
+        });
+      }
+      if (orderId) {
+        payOrder(orderId).then((res) => {
+          setPayInfo(res)
+          requestPayment(res)
+        });
+      }
+    } else {
+      Taro.showToast({
+        title: "请勾选《平台用户服务协议》",
+        icon: "none",
+        duration: 2000,
+      });
+    }
+  };
 
   useEffect(() => {
-  getShopDetail(item.shopId).then((res)=>{
-    setDetail(res)
-    getShopcity(res.cityId).then((res2)=>{
-      setCity(res2)
-    })
-  })
-}, [])
-const star=parseFloat(((detail.sweetScore+detail.environmentScore+detail.serviceScore)/3).toFixed(1)); 
+    if (packageId) {
+      getShopPackageDetail(packageId).then((res) => {
+        setList([res]);
+      });
+    }
+    if (orderId) {
+      getOrderSub({ pageNum: 1, pageSize: 999, orderId }).then((res) => {
+        setList(res.records);
+      });
+    }
+  }, [packageId, orderId]);
+
+  useEffect(() => {
+    if (BuyNumber < 2) {
+      setDisabledBool(true);
+    } else {
+      setDisabledBool(false);
+    }
+  }, [BuyNumber]);
+
+  useEffect(() => {
+    let total = {
+      cashback: 0,
+      actualPrice: 0,
+      standardPrice: 0,
+    };
+    list.map((x) => {
+      total.cashback += x.cashback * (x.amount || 1);
+      total.actualPrice += (x.actualPrice || x.unitPrice) * (x.amount || 1);
+      total.standardPrice += x.standardPrice * (x.amount || 1);
+    });
+    setTotalPrice(total);
+  }, [list]);
 
   return (
-      <view className='foodCard'>
-        <view className='fCleft'>
-          <view className='backMoney'>
-            返现￥{item.cashback/100}
+    <view class="container">
+      <CustomNav title="订单" />
+      <Popup show={showDialog} maskClosable={false}>
+        <OrderMolded />
+        <view className="item-center-Number">
+          <view
+            className="buy-num-minus"
+            disabled={DisabledBool}
+            onClick={NumberCut}
+          >
+            -
           </view>
-          <view className='appraise'>
-            <Star star={star} />
-            <text className='storezf'>{star}</text>
+          <Input
+            className="buy-num-input"
+            type="number"
+            min="1"
+            onInput={onInput}
+            value={BuyNumber}
+          />
+          <view className="buy-num-add" onClick={NumberAdd}>
+            +
           </view>
-          <view>
-            <view className='contentImg'>
-              <image src={item.poster} className='img1'></image>
-              <image src={msTip} className='mstip'></image>
-            </view>
-            <view className='neirong'>
-              <view className='textword'>{(item.description).toString().length>25?(item.description).substring(0, 25)+'...':(item.description)}</view>
-              <view className='jiage'>
-                <text className='rmb' >￥&nbsp;&nbsp;</text>
-                <text className='p1'><text className='price' >{item.actualPrice/100}</text>元&nbsp;&nbsp;</text>
-                <text className='p2'>门市价<text className='oldprice' >{item.standardPrice/100}</text>元</text>
-              </view>
-              <view className='address'>
-                <image className='dw' src={wz} />
-                <text className='wz'>{city.areaPName}/{city.areaName}</text>
-                <view style={{display:'inline-block'}} onClick={toggleSave}>
-                <image className='star' src={isSaved>0?hongxin:baixin}></image>
-                <text className='collection'>{isSaved>0?'已收藏':'加入收藏'}</text>
+        </view>
+        <view className="buy-button-box">
+          <button className="button-Cancel" onClick={ButtonCancel}>
+            取消
+          </button>
+          <button className="button-OK" onClick={ButtonOK}>
+            确定
+          </button>
+        </view>
+      </Popup>
+      <view class="coupon-list">
+        {list?.map((item) => {
+          return (
+            <view class="wrapper">
+              <view class="left-complete-one">
+                <image className="left-image-1" src={ProCard_hot}></image>
+                <view className="left-viewText">
+                  返现￥{(item.cashback || 0) / 100}
+                </view>
+                <view className="title-image">
+                  <image
+                    className="image-1"
+                    mode="scaleToFill"
+                    src={item.poster}
+                  ></image>
+                  <image className="image-2" src={food}></image>
+                </view>
+                <view className="title-content">
+                  <view className="Pro-title">
+                    <view className="title-text">{item.description}</view>
+                  </view>
+                  <text className="title-money">
+                    ￥{(item.actualPrice || item.unitPrice || 0) / 100}元
+                    <text className="title-money-2">
+                      门市价{(item.standardPrice || 0) / 100}元
+                    </text>
+                  </text>
+                  <view className="title-time">
+                    有效期：{formatTime(item.startTime, "yyyy/MM/dd")}-
+                    {formatTime(item.endTime, "yyyy/MM/dd")}
+                  </view>
+                </view>
               </view>
+              <view
+                class="right-complete-two"
+                onClick={() => ShowMoldeOn(item)}
+              >
+                <view className="right-content">
+                  <view className="right-number">×{item.amount || 1}</view>
+                  <view className="right-title">数量</view>
+                </view>
               </view>
             </view>
+          );
+        })}
+      </view>
+      <view className="view-button">
+        <view className="Card-number-box">
+          <view className="Card-number">
+            <text style="left:29px;position: absolute; padding-top:20px">
+              手机号码:
+            </text>
+            <text style="right:29px;position: absolute;padding-top:20px">
+              {person.phone}
+            </text>
+          </view>
+          <view className="Card-user">
+            <Checkbox
+              style="padding-left:20px; position: relative; top:24px;"
+              value="agreement"
+              checked={agreement}
+              onClick={() => {
+                setAgreement(!agreement);
+              }}
+            >
+              我已阅读知晓并同意
+              <text style="color:#274190;text-decoration:underline;font-weight:400">
+                《平台用户服务协议》
+              </text>
+            </Checkbox>
           </view>
         </view>
-        <view className='fCright' onClick={()=>{Taro.navigateTo({ url: `/pages/PayOrder/index?packageId=${item.packageId}` });}}>
-          <image src={pay} />
-          <view>支付</view>
+        <view className="button-box-button-box">
+          <view className="button-text-image">
+            <text className="button-text-money-hot">
+              返现￥{(totalPrice?.cashback || 0) / 100}
+            </text>
+            <image className="button-image" src={ProCard_hot}>
+              123123
+            </image>
+            <view className="button-text-money">
+              门店市面价：{(totalPrice?.standardPrice || 0) / 100}元
+            </view>
+          </view>
+          <Button className="button-box-one" onClick={() => onShowPay()}>
+            ￥{(totalPrice?.actualPrice || 0) / 100}元
+            <text className="button-text-one">支付订单</text>
+          </Button>
         </view>
-        <view className='columnLine'></view>
       </view>
-    
-  )
-}
+    </view>
+  );
+});