✨ feat(ID1000875):商品立即购买功能体验优化

src/api/shopCart.ts

@@ -22,6 +22,17 @@ export const AddShoppingCartApi = () => {
   })
 }
 
+/**
+ *  立即购买
+ * @returns
+ */
+export const MallsaleOrderadd = () => {
+  return useRequest({
+    url: '/v1/mall/saleOrder/add',
+    method: 'post',
+  })
+}
+
 /**
  *  批量删除购物车面料颜色
  * @returns
@@ -76,3 +87,14 @@ export const GetScrewProductApi = () => {
     method: 'get',
   })
 }
+
+/**
+ *  销售单预览v2
+ * @returns
+ */
+export const SaleOrderpreView = () => {
+  return useRequest({
+    url: '/v2/mall/saleOrder/preView',
+    method: 'put',
+  })
+}

src/app.config.ts

@@ -108,6 +108,7 @@ export default {
       pages: [
         'index',
         'comfirm',
+        'speedComfirm',
         'orderList/index',
       ],
     },

src/common/constant.ts

@@ -1,4 +1,4 @@
-// export const BASE_URL = CURRENT_BASE_URL
+export const BASE_URL = CURRENT_BASE_URL
 // 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`
@@ -13,7 +13,7 @@
 // export const BASE_URL = 'https://www.zzfzyc.com/lymarket' // 正式环境
 // export const BASE_URL = `http://192.168.1.5:40001/lymarket` // 王霞
 // export const BASE_URL = 'http://192.168.1.7:50002/lymarket' // 添
-export const BASE_URL = 'http://192.168.1.28:50001/lymarket' // 婷
+// export const BASE_URL = 'http://192.168.1.28:50001/lymarket' // 婷
 // export const BASE_URL = 'http://192.168.1.42:50002/lymarket' //  杰
 
 // CDN

src/pages/details/components/orderCount/index.module.scss

@@ -231,7 +231,7 @@
       height: 151px;
     }
     .add_cart {
-      width: 260px;
+      width: 200px;
       height: 90px;
       font-size: $font_size_big;
       text-align: center;

src/pages/details/components/orderCount/index.tsx

@@ -12,7 +12,7 @@ import Search from '@/components/search'
 import Counter from '@/components/counter'
 import { useSelector } from '@/reducers/hooks'
 import { GetColorList } from '@/api/materialColor'
-import { AddShoppingCartApi } from '@/api/shopCart'
+import { AddShoppingCartApi, MallsaleOrderadd } from '@/api/shopCart'
 import UseLogin from '@/use/useLogin'
 import { formatHashTag, formatPriceDiv, formatWeightDiv } from '@/common/fotmat'
 import { getFilterData } from '@/common/util'
@@ -110,7 +110,7 @@ const OrderCount = ({ show = false, onClose, title = '', productId = 0, is_first
       if (item.count > 0) {
         sumCount = Big(sumCount).add(item.count).toNumber()
         kindCount++
-        color_list_info = selectIndex == 0 ? { product_color_id: item.id, roll: item.count } : { product_color_id: item.id, length: item.count * 100 }
+        color_list_info = selectIndex == 0 ? { product_color_id: item.id, roll: item.count, sale_price: formatPriceDiv(item.bulk_price) } : { product_color_id: item.id, length: item.count * 100, sale_price: selectIndex == 1 ? formatPriceDiv(item.length_cut_price) : formatPriceDiv(item.weight_cut_price) }
         color_list.push(color_list_info)
       }
     })
@@ -195,6 +195,29 @@ const OrderCount = ({ show = false, onClose, title = '', productId = 0, is_first
       })
     }
   }
+  const handShopBuy = async() => {
+    try {
+      await getSelfUserInfo()
+    }
+    catch (msg) {
+      Taro.showToast({
+        icon: 'none',
+        title: '授权失败，请求完善授权',
+      })
+      return false
+    }
+    if (selectCount.sumCount == 0) {
+      Taro.showToast({
+        icon: 'none',
+        title: '请选择面料颜色!',
+      })
+      return false
+    }
+    Taro.navigateTo({
+      url: `/pages/order/speedComfirm?sale_mode=${Number(selectIndex)}&buyList=${JSON.stringify(selectCount.color_list)}`,
+    })
+    console.log(selectIndex, ':selectIndex', selectCount.color_list, ':selectCount.color_list', recommendStatus, ':recommendStatus')
+  }
 
   // 筛选数据
   const searchInput = useCallback((e) => {
@@ -423,6 +446,9 @@ const OrderCount = ({ show = false, onClose, title = '', productId = 0, is_first
               <View className={classnames(styles.add_cart, selectCount.kindCount && styles.select_add_cart)} onClick={() => addShopCart()}>
                 加入购物车
               </View>
+              <View className={classnames(styles.add_cart, selectCount.kindCount && styles.select_add_cart)} onClick={() => handShopBuy()}>
+                立即购买
+              </View>
             </View>
           </View>
         </View>

src/pages/order/speedComfirm.config.ts

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

src/pages/order/speedComfirm.tsx

@@ -0,0 +1,253 @@
+import { View } from '@tarojs/components'
+import Taro, { useDidShow, usePullDownRefresh, useRouter } from '@tarojs/taro'
+import classnames from 'classnames'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import KindList from './components/kindList'
+import Remark from './components/remark'
+import styles from './comfirm.module.scss'
+import SubmitOrderBtn from './components/submitOrderBtn'
+import AddressInfoDetail from './components/addressInfoDetail'
+import { getParam } from '@/common/system'
+import { alert, goLink } from '@/common/common'
+import Popup from '@/components/popup'
+import { formatPriceDiv } from '@/common/fotmat'
+import { SaleOrderApi, SaleOrderPreViewApi } from '@/api/order'
+import { SubscriptionMessageApi } from '@/api/user'
+import { SUBSCRIPTION_MESSAGE_SCENE } from '@/common/enum'
+import { UseSubscriptionMessage } from '@/use/useCommon'
+import { throttle } from '@/common/util'
+import MoveBtn from '@/components/moveBtn'
+import { MallsaleOrderadd, SaleOrderpreView } from '@/api/shopCart'
+
+const SpeedComfirm = () => {
+  const router = useRouter()
+
+  const [showDesc, setShowDesc] = useState(false)
+  // 下单信息
+  interface OrderParams { address_id?: number; remark?: string; sale_mode?: number; shipment_mode?: number; list?: any[] }
+  const [submitOrderData, setSubmitOrderData] = useState<OrderParams>()
+
+  // 获取购物车传过来的id
+  interface orderPreParam {
+    // shopping_cart_product_color_list: { shopping_cart_product_color_id: number }[]
+    sale_order_product_color_list: any[]
+    sale_mode: number
+  }
+  const param = getParam()
+  const idsAndSaleModel = useRef<orderPreParam>({ sale_order_product_color_list: [], sale_mode: 0 })
+  // 获取销售预览订单
+  const [preViewOrder, setPreViewOrder] = useState<any>() // 获取到的原始数据
+  const { fetchData } = SaleOrderpreView()
+  const getSaleOrderPreView = async() => {
+    if (idsAndSaleModel.current.sale_order_product_color_list?.length > 0) {
+      const arr: any[] = []
+      idsAndSaleModel.current.sale_order_product_color_list.forEach((item: any) => {
+        arr.push({
+          length: item?.length || 0,
+          roll: item.roll,
+          // sale_price: item.sale_price,
+          product_color_id: item.product_color_id,
+        })
+      })
+      const query = {
+        sale_mode: idsAndSaleModel.current.sale_mode,
+        sale_order_product_color_list: arr,
+      }
+      const res = await fetchData(query)
+      setPreViewOrder(res.data)
+    }
+  }
+  useDidShow(async() => {
+    idsAndSaleModel.current = { sale_order_product_color_list: [], sale_mode: 0 } // 初始化
+    idsAndSaleModel.current.sale_mode = Number(router.params?.sale_mode)
+    // param?.ids?.split('-')?.map((item) => {
+    //   return idsAndSaleModel.current.shopping_cart_product_color_list?.push({
+    //     shopping_cart_product_color_id: Number(item),
+    //   })
+    // })
+    idsAndSaleModel.current.sale_order_product_color_list = JSON.parse(router?.params?.buyList as string)
+    getSaleOrderPreView()
+    setSubmitOrderData(val => ({ ...val, sale_mode: param?.sale_mode }))
+  })
+
+  // 格式化数据格式
+  const [formatPreViewOrder, setFormatPreViewOrder] = useState<any>() // 格式化后的数据
+  const formatData = () => {
+    setFormatPreViewOrder({
+      estimate_amount: preViewOrder.estimate_amount, // 预估金额
+      sale_mode: preViewOrder.sale_mode,
+      sale_mode_name: preViewOrder.sale_mode_name,
+      total_colors: preViewOrder.total_colors, // 总颜色数量
+      total_number: preViewOrder.total_number, // 总数量
+      total_fabrics: preViewOrder.total_fabrics, // 面料数量
+      unit: preViewOrder.sale_mode == 0 ? '条' : 'm', // 单位
+      list: preViewOrder.product_list,
+      total_should_collect_money: preViewOrder.total_should_collect_money, // 应收金额
+      total_sale_price: preViewOrder.total_sale_price, // 合计金额
+    })
+  }
+  const formatPreViewOrderMemo = useMemo(() => {
+    return formatPreViewOrder
+  }, [formatPreViewOrder])
+
+  // 格式化初始地址
+  const defaultAddress = useMemo(() => {
+    const address = preViewOrder?.default_address
+    return {
+      province_name: address?.province_name,
+      city_name: address?.city_name,
+      district_name: address?.district_name,
+      address_detail: address?.address_detail,
+      id: address?.id,
+      target_user_name: address?.name,
+      target_user_phone: address?.phone,
+      shipment_mode: address?.shipment_mode,
+      take_goods_address: preViewOrder?.take_goods_address,
+      take_goods_phone: preViewOrder?.take_goods_phone,
+    }
+  }, [preViewOrder])
+
+  // 获取提交格式数据列表
+  const getDataList = () => {
+    const list: any [] = []
+    preViewOrder.product_list?.forEach((item) => {
+      item.product_colors?.forEach((colorItem) => {
+        list.push({ product_color_id: colorItem.id, sale_price: colorItem.sale_price, roll: colorItem.roll, length: colorItem.length })
+      })
+    })
+    setSubmitOrderData(val => ({ ...val, list }))
+  }
+
+  // 获取地址
+  const getAddress = (e) => {
+    setSubmitOrderData(val => ({ ...val, address_id: e.id }))
+  }
+
+  const selectShipmentMode = useCallback((value) => {
+    setSubmitOrderData(val => ({ ...val, shipment_mode: value }))
+  }, [])
+
+  // 获取备注
+  const getRemark = useCallback((e) => {
+    setSubmitOrderData(val => ({ ...val, remark: e }))
+    setShowDesc(() => false)
+  }, [])
+
+  // 提交按钮是否可用
+  const btnStatus = useMemo(() => {
+    return submitOrderData?.shipment_mode == 1 || (submitOrderData?.shipment_mode == 2 && submitOrderData?.address_id)
+  }, [submitOrderData])
+
+  // 数量格式
+  const numText = useMemo(() => {
+    if (formatPreViewOrder) {
+      const total_number = formatPreViewOrder?.sale_mode == 0 ? formatPreViewOrder?.total_number : formatPreViewOrder?.total_number / 100
+      return `${formatPreViewOrder?.total_fabrics} 种面料，${formatPreViewOrder?.total_colors} 种颜色，共 ${total_number} ${formatPreViewOrder?.unit}`
+    }
+  }, [formatPreViewOrder])
+
+  // 订阅消息
+  const { SubmitOrder } = SUBSCRIPTION_MESSAGE_SCENE
+  const { openSubscriptionMessage } = UseSubscriptionMessage()
+
+  // 提交订单
+  // const { fetchData: saleOrderFetchData } = SaleOrderApi()
+  const { fetchData: buyFetch } = MallsaleOrderadd()
+  const submitOrderEven = throttle(async() => {
+    if (!submitOrderData?.shipment_mode) {
+      alert.error('请选择收货方式')
+      return false
+    }
+    if (!submitOrderData?.address_id && submitOrderData?.shipment_mode == 2) {
+      alert.error('请选择地址')
+      return false
+    }
+    const showModalRes = await Taro.showModal({
+      title: '确定提交订单?',
+      content: `发货方式为${submitOrderData?.shipment_mode == 1 ? '自提' : '物流'}`,
+      confirmText: '确定',
+      cancelText: '取消',
+    })
+    if (showModalRes.confirm) {
+      await openSubscriptionMessage({ scenes: SubmitOrder.value })
+      Taro.showLoading({
+        title: '订单提交中...',
+        mask: true,
+      })
+      const query = {
+        sale_mode: Number(router.params.sale_mode),
+        shipment_mode: submitOrderData.shipment_mode,
+        address_id: submitOrderData.address_id,
+        remark: submitOrderData?.remark || '',
+        sale_order_product_color_list: submitOrderData?.list,
+      }
+      console.log(submitOrderData, 'submitOrderData')
+      console.log(query, 'queryquery')
+      const res = await buyFetch(query)
+      Taro.hideLoading()
+      if (res.success) {
+        goLink('/pages/order/index', { id: res.data.id }, 'redirectTo')
+      }
+      else {
+        alert.none(res.msg)
+      }
+    }
+  }, 800)
+
+  // 页面下拉刷新
+  usePullDownRefresh(() => {
+    getSaleOrderPreView()
+  })
+  // 监听获取到的数据
+  useEffect(() => {
+    if (preViewOrder) {
+      formatData()
+      getDataList()
+      setSubmitOrderData(val => ({
+        ...val,
+        address_id: preViewOrder.default_address.id,
+        shipment_mode: preViewOrder.shipment_mode || 2,
+      }))
+    }
+  }, [preViewOrder])
+  return (
+    <MoveBtn showList={['customer']}>
+      <View className={styles.order_main}>
+        {
+          preViewOrder?.notice !== '' && <View className={styles.topBox}>
+            <View className={styles.flexBox}>
+              <View className={styles.gan}>!</View>
+              <View className={styles.ganFont}>{preViewOrder?.notice}</View>
+            </View>
+          </View>
+        }
+        <AddressInfoDetail orderInfo={defaultAddress} onSelect={getAddress} onChangeShipmentMode={selectShipmentMode} status={1} />
+        <KindList order={formatPreViewOrderMemo} comfirm />
+        <View className={styles.order_desc} onClick={() => setShowDesc(true)}>
+          <View className={styles.order_desc_con}>订单备注</View>
+          {(submitOrderData?.remark && <View className={styles.order_desc_text}>{submitOrderData?.remark}</View>) || <View className={styles.order_desc_text_hint}>填写备注</View>}
+          <View className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></View>
+        </View>
+        <View className={styles.submit_order}>
+          <View className={styles.submit_order_number}>
+            <SubmitOrderBtn
+              style={{ color: '#007AFF' }}
+              number={(preViewOrder?.sale_mode == 1 ? formatPreViewOrder?.total_should_collect_money : formatPreViewOrder?.estimate_amount) / 100}
+              priceTitle={preViewOrder?.sale_mode == 1 ? '合计金额' : '预估金额'}
+            />
+            <View className={styles.order_number_desc}>{numText}</View>
+          </View>
+          <View className={classnames(styles.order_btn, btnStatus && styles.ok_order_btn)} onClick={() => submitOrderEven()}>
+          提交订单
+          </View>
+        </View>
+        <Popup show={showDesc} showTitle={false} onClose={() => setShowDesc(false)}>
+          <Remark defaultValue={submitOrderData?.remark} onSave={e => getRemark(e)} />
+        </Popup>
+        <View className="common_safe_area_y"></View>
+      </View>
+    </MoveBtn>
+  )
+}
+
+export default SpeedComfirm