售后申请页面完成

src/api/order.ts

@@ -84,9 +84,19 @@ export const SaleOrderApi = () => {
 /**
  * 作废销售单
  */
- export const CancelOrderApi = () => {
+export const CancelOrderApi = () => {
     return useRequest({
         url: `/v1/mall/saleOrder/cancel`,
         method: "put",
     })
 }
+
+/**
+ * 确认收货
+ */
+export const ReceiveOrderApi = () => {
+    return useRequest({
+        url: `/v1/mall/saleOrder/receive`,
+        method: "put",
+    })
+}

src/app.config.ts

@@ -158,6 +158,12 @@ export default {
       pages: [
         "index",
       ]
+    },
+    {
+      root: "pages/applyAfterSales",
+      pages: [
+        "index",
+      ]
     }
   ]
 }

src/common/uploadImage.js

@@ -129,22 +129,4 @@ const uploadCDNImg = (file, secene, type) => {
     })
 }
 
-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

src/components/orderBtns/index.tsx

@@ -1,7 +1,7 @@
-import { CancelOrderApi } from "@/api/order"
+import { CancelOrderApi, ReceiveOrderApi } from "@/api/order"
 import { alert } from "@/common/common"
 import { ORDER_STATUS } from "@/common/enum"
-import { View } from "@tarojs/components"
+import { ScrollView, View } from "@tarojs/components"
 import Taro from "@tarojs/taro"
 import { useCallback, useRef, memo } from "react"
 import styles  from './index.module.scss'
@@ -24,7 +24,6 @@ export default memo(({orderInfo, onClick}:Param) => {
             SaleOrderStatusArranged,
             SaleOrderStatusWaitingDelivery,
             SaleOrderStatusComplete,
-            SaleOrderStatusCancel,
             SaleOrderStatusRefund,
             SaleOrderStatusWaitingPayment,
             SaleOrderStatusWaitingReceipt,
@@ -90,6 +89,7 @@ export default memo(({orderInfo, onClick}:Param) => {
     const submitBtns = (val) => {
         (val == 1)&&cancelOrder(); //取消订单按钮
         (val == 2)&&onClick?.(val); //去付款按钮
+        (val == 6)&&receiveOrder(); //确认收货
     }
 
     //取消订单
@@ -113,11 +113,37 @@ export default memo(({orderInfo, onClick}:Param) => {
           })
     }
 
+    //确认订单
+    const {fetchData:  receiveOrderFetchData} = ReceiveOrderApi()
+    const receiveOrder = async () => {
+        console.log('123456')
+        Taro.showModal({
+            title: '确定收货？',
+            success: async function (res) {
+              if (res.confirm) {
+                let res = await receiveOrderFetchData({sale_order_id: orderInfo?.orderId})
+                if(res.success){
+                    onClick?.(6)
+                    alert.success('收货成功')
+                } else {
+                    alert.error('收货失败')
+                }
+              } else if (res.cancel) {
+                console.log('用户点击取消')
+              }
+            }
+        })
+       
+    }
+
     return (
         <View className={styles.btns_list}>
-            {orderBtnsList.current.map((item) => 
+            <ScrollView scrollX >
-                orderBtnsShow(item)&&<View key={item.id} className={styles.btns_item} onClick={() => submitBtns(item.id)}>{item.label}</View>
+                {orderBtnsList.current.map((item) => 
-            )}
+                    orderBtnsShow(item)&&<View key={item.id} className={styles.btns_item} onClick={() => submitBtns(item.id)}>{item.label}</View>
+                )}
+            </ScrollView>
+            
         </View>
     )
 })

src/components/shopCart/index.tsx

@@ -117,8 +117,6 @@ export default ({show = false, onClose}: param) => {
                 if(item.select) select_count++
             }
         })
-        console.log('list_count::',list_count)
-        console.log('select_count::',select_count)
         setSelectStatus(select_count == list_count)
     }
 

src/pages/applyAfterSales/components/otherReason/index.module.scss

@@ -0,0 +1,36 @@
+.other_desc{
+    padding: 0 20px;
+    box-sizing: border-box;
+    .title{
+        font-size: $font_size;
+        font-weight: 700;
+    }
+    .textarea{
+        position: relative;
+        height: 165.4px;
+        .descDataNum{
+            position: absolute;
+            right: 10px;
+            bottom: 10px;
+            font-size: 22px;
+            color: #ABABAB;
+        }
+    }
+    .textarea_con, .textarea_con_pretend{
+        background-color: #f3f3f3;
+        border: 2px solid #e6e6e6;
+        border-radius: 10px;
+        width: 100%;
+        font-size: 25px;
+        height: 165.4px;
+        padding: 20px 20px 30px 20px;
+        box-sizing: border-box;
+        margin-top: 20px;
+    }
+    .textarea_con_pretend{
+        color: $color_font_two;
+    }
+    .textarea_con_pretend_ed{
+        color: #000;
+    }
+}

src/pages/applyAfterSales/components/otherReason/index.tsx

@@ -0,0 +1,37 @@
+import {Textarea, View } from "@tarojs/components";
+import { memo, useMemo, useState } from "react";
+import styles  from './index.module.scss'
+import classnames from "classnames";
+
+//其他说明
+export default memo(() => {
+    const [descData, setDescData] = useState({
+        number: 0,
+        value: '',
+        count: 200,
+        show: false
+    })
+    const getDesc = (e) => {
+        let value = e.detail.value
+        let res = value
+        if(value.length > descData.count) {
+            res = value.slice(0, descData.count)
+        }
+        setDescData({...descData, number:res.length, value: res})
+    }
+
+    const toggleShowRealTextarea = (show) => {
+        setDescData({...descData, show:show})
+    }
+    return (
+        <View className={styles.other_desc}>
+            <View className={styles.title}>其他说明</View>
+            <View className={styles.textarea}>
+                {descData.show&&<Textarea autoFocus value={descData.value} onBlur={() => toggleShowRealTextarea(false)} className={styles.textarea_con} cursorSpacing={100} maxlength={descData.count} onInput={(e) => getDesc(e)}></Textarea>||
+                    <View className={classnames(styles.textarea_con_pretend, descData.value&&styles.textarea_con_pretend_ed)} onClick={() => toggleShowRealTextarea(true)}>{descData.value||'一般情况下选填，当退货说明=“其它问题”时，必填'}</View>
+                }
+                <View className={styles.descDataNum}>{descData.number +'/'+ descData.count}</View>
+            </View>
+        </View>
+    )
+})

src/pages/applyAfterSales/components/reasonPopup/index.module.scss

@@ -0,0 +1,27 @@
+.reason_return_con{
+    height: 50vh;
+    .reason_title{
+        padding: 10px 20px 0 20px;
+        height: 60px;
+        border-bottom: 1PX solid #F3F3F3;
+        box-sizing: border-box;
+        Text{
+            font-size: 26px;
+            border-bottom: 3px solid #000;
+            padding: 10px;
+            font-weight: 400;
+        }
+        
+    }
+    .reason_scroll{
+        height: calc(100% - 70px);
+        .reason_list{
+            font-size: 26px;
+            padding: 30px 20px 0 20px;
+            color: #707070;
+            .reason_item{
+                margin-bottom: 36px;
+            }
+        }
+    }
+}

src/pages/applyAfterSales/components/reasonPopup/index.tsx

@@ -0,0 +1,44 @@
+import Popup from "@/components/popup";
+import { ScrollView, Text, View } from "@tarojs/components";
+import { memo, useMemo } from "react";
+import styles  from './index.module.scss'
+
+type ReasonParam = 1|2|3 //1 退货原因 2 货物状况 3 退货说明
+//原因选择
+type ReasonInfoParam = {
+    show?: boolean,
+    onClose?: () => void,
+    status: ReasonParam
+}
+export default memo(({show = false, onClose, status}: ReasonInfoParam) => {
+    const title = useMemo(() => {
+        if(status == 1) return '退货原因'
+        if(status == 2) return '货物状况'
+        if(status == 3) return '退货说明'
+    },[status])
+    return (
+        <Popup showIconButton={false} show={show} title="申请退货" onClose={onClose} >
+            <View className={styles.reason_return_con}>
+                <View className={styles.reason_title}><Text>{title}</Text></View>
+                <ScrollView scrollY className={styles.reason_scroll}>
+                    <View className={styles.reason_list}>
+                        <View className={styles.reason_item}>完好无损带原标签</View>
+                        <View className={styles.reason_item}>完好无损带原标签</View>
+                        <View className={styles.reason_item}>完好无损带原标签</View>
+                        <View className={styles.reason_item}>完好无损带原标签</View>
+                        <View className={styles.reason_item}>完好无损带原标签</View>
+                        <View className={styles.reason_item}>完好无损带原标签</View>
+                        <View className={styles.reason_item}>完好无损带原标签</View>
+                        <View className={styles.reason_item}>完好无损带原标签</View>
+                        <View className={styles.reason_item}>完好无损带原标签</View>
+                        <View className={styles.reason_item}>完好无损带原标签</View>
+                        <View className={styles.reason_item}>完好无损带原标签</View>
+                        <View className={styles.reason_item}>完好无损带原标签</View>
+                        <View className={styles.reason_item}>完好无损带原标签</View>
+                        <View className={styles.reason_item}>完好无损带原标签</View>
+                    </View>
+                </ScrollView>
+            </View>
+        </Popup>
+    )
+})

src/pages/applyAfterSales/index.config.ts

@@ -0,0 +1,4 @@
+export default {
+  navigationBarTitleText: '申请售后',
+  enableShareAppMessage: true,
+}

src/pages/applyAfterSales/index.module.scss

@@ -10,6 +10,7 @@
         width: 100%;
         padding:  20px;
         box-sizing: border-box;
+        border-bottom: 1PX solid #f3f3f3;
         text{
             background-color: #F6F6F6;
             border-radius: 10px;
@@ -22,10 +23,12 @@
         }
     }
     .apply_after_sales_con{
-        height: 80vh;
         .scroll{
             height: calc(100% - 170px);
         }
+        .scroll_con{
+            padding: 20px 0 150px 0;
+        }
         .returnSaleInput{
             margin: 0 20px;
             padding-top: 30px;
@@ -109,36 +112,7 @@
                 }
             }
         }
-        .other_desc{
+        
-            padding: 0 20px;
-            box-sizing: border-box;
-            .title{
-                font-size: $font_size;
-                font-weight: 700;
-            }
-            .textarea{
-                position: relative;
-                height: 165.4px;
-                .descDataNum{
-                    position: absolute;
-                    right: 10px;
-                    bottom: 10px;
-                    font-size: 22px;
-                    color: #ABABAB;
-                }
-            }
-            Textarea{
-                background-color: #f3f3f3;
-                border: 2px solid #e6e6e6;
-                border-radius: 10px;
-                width: 100%;
-                font-size: 25px;
-                height: 165.4px;
-                padding: 20px 20px 30px 20px;
-                box-sizing: border-box;
-                margin-top: 20px;
-            }
-        }
     }
     .apply_after_sales_list{
         padding: 0 20px;
@@ -205,22 +179,40 @@
         
     }
 
-    .reason_return_con{
+
-        .reason_title{
+    .btns_con{
-            padding: 10px 20px 0 20px;
+        width: 100%;
-            height: 60px;
+        position: fixed;
-            border-bottom: 1PX solid #F3F3F3;
+        bottom:0;
-            box-sizing: border-box;
+        padding: 0 20px;
-            Text{
+        box-sizing: border-box;
-                font-size: 26px;
+        padding-bottom: constant(safe-area-inset-bottom); 
-                border-bottom: 3px solid #000;
+        padding-bottom: env(safe-area-inset-bottom);
-                padding: 10px;
+        .btns_two{
-                font-weight: 400;
+            display: flex;
+            height: 82px;
+            // border: 1PX solid #007aff;
+            font-size: $font_size_big;
+            border-radius: 40px;
+            margin-bottom: 20px;
+            .rest_btn{
+                flex:1;
+                border: 1PX solid #007aff;
+                border-radius: 40px 0 0 40px;
+                text-align: center;
+                line-height: 82px;
+                color: $color_main;
+                background-color: #fff;
+                
+            }
+            .verify_btn{
+                flex:1;
+                border-radius: 0 40px 40px 0;
+                background: #007aff;
+                text-align: center;
+                line-height: 82px;
+                color: #fff;
             }
-            
-        }
-        .reason_scroll{
-            
         }
     }
 }

src/pages/applyAfterSales/index.tsx

@@ -1,33 +1,36 @@
 import { Image, ScrollView, Text, Textarea, View } from "@tarojs/components";
-import { memo, useCallback, useState } from "react";
+import { memo, useCallback, useMemo, useState } from "react";
 import classnames from "classnames";
 import styles  from './index.module.scss'
-import Popup from "@/components/popup";
 import { formatImgUrl } from "@/common/fotmat";
 import Counter from "@/components/counter";
+import ReasonPopup from "./components/reasonPopup";
+import OtherReason from "./components/otherReason";
+import Taro from "@tarojs/taro";
+import uploadCDNImg from "@/common/uploadImage";
 
-export default memo(() => {
+type ReasonParam = 1|2|3 //1 退货原因 2 货物状况 3 退货说明
+export default () => {
     const [showDesc, setShowDesc] = useState(true)
-    const [descData, setDescData] = useState({
+    
-        number: 0,
+    //退货选择弹窗
-        value: '',
+    const [showReason, setShowReason] = useState<{show:true|false, status:ReasonParam}>({show:false, status:1})
-        count: 200
+    const closeReason = useCallback(() => setShowReason({...showReason, show:false}), [])
-    })
+    const onShowReason = (status) => setShowReason({...showReason, status, show:true})
-    const getDesc = useCallback((e) => {
+
-        let value = e.detail.value
+    
-        let res = value
+
-        if(value.length > descData.count) {
+    //底部按钮
-            res = value.slice(0, descData.count)
+    const onSubmit = (val) => {
-        }
+
-        setDescData({...descData, number:res.length, value: res})
+    }
-    },[])
+
     return (
         <View className={styles.apply_after_sales_main}>
-            <Popup showIconButton={true} show={showDesc} showTitle={false} onClose={() => setShowDesc(false)} >
+            <View className={styles.apply_after_sales_con}>
-                <View className={styles.apply_after_sales_con}>
+                <View className={styles.kind_number}><Text>2种面料，3种颜色，共6条</Text></View>
-                    <View className={styles.apply_after_sales_head}>申请退货</View>
+                <ScrollView scrollY className={styles.scroll}>
-                    <View className={styles.kind_number}><Text>2种面料，3种颜色，共6条</Text></View>
+                    <View className={styles.scroll_con}>
-                    <ScrollView scrollY className={styles.scroll}>
                         <View className={styles.apply_after_sales_list}>
                             <View className={styles.apply_after_sales_item}>
                                 <View className={styles.apply_after_sales_title}>
@@ -77,21 +80,21 @@ export default memo(() => {
                         <View className={styles.returnSaleInput}>
                             <View className={styles.returnSaleInput_item}>
                                 <View className={styles.title}>退货原因</View>
-                                <View className={styles.select}>
+                                <View className={styles.select} onClick={() => onShowReason(1)}>
                                     <Text>请选择</Text>
                                     <Text className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></Text>
                                 </View>
                             </View>
                             <View className={styles.returnSaleInput_item}>
                                 <View className={styles.title}>货物状况</View>
-                                <View className={styles.select}>
+                                <View className={styles.select} onClick={() => onShowReason(2)}>
                                     <Text>请选择</Text>
                                     <Text className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></Text>
                                 </View>
                             </View>
                             <View className={styles.returnSaleInput_item}>
                                 <View className={styles.title}>退货说明</View>
-                                <View className={styles.select}>
+                                <View className={styles.select} onClick={() => onShowReason(3)}>
                                     <Text>请选择</Text>
                                     <Text className={classnames(styles.miconfont, 'iconfont icon-a-moreback')}></Text>
                                 </View>
@@ -99,61 +102,52 @@ export default memo(() => {
                             <View className={styles.returnSaleInput_item}>
                                 <View className={styles.title}>拍照上传</View>
                                 <PictureItem/>
-                                <View className={styles.uploadImg}>
-                                    <Text className={classnames(styles.miconfont, 'iconfont icon-saomazhifu')}></Text>
-                                    <Text className={styles.uploadText}>上传照片</Text>
-                                </View>
-                            </View>
                                 
-                        </View>
-                        <View className={styles.other_desc}>
-                            <View className={styles.title}>其他说明</View>
-                            <View className={styles.textarea}>
-                                <Textarea placeholder="一般情况下选填，当退货说明=“其它问题”时，必填" cursorSpacing={100} maxlength={descData.count} onInput={(e) => getDesc(e)}></Textarea>
-                                <View className={styles.descDataNum}>{descData.number +'/'+ descData.count}</View>
                             </View>
                         </View>
-                        <View className="common_safe_area_y"></View>
+                        <OtherReason/>
-                    </ScrollView>
+                    </View>
-                </View>
+                </ScrollView>
-            </Popup>
+                <View className="common_safe_area_y"></View>
-            <Popup showIconButton={false} show={showDesc} title="申请退货" onClose={() => setShowDesc(false)} >
+            </View>
-                <View className={styles.reason_return_con}>
+            <View  className={styles.btns_con}>
-                   <View className={styles.reason_title}><Text>货物状况</Text></View>
+                <View  className={styles.btns_two}>
-                   <ScrollView scrollY className={styles.reason_scroll}>
+                    <View  className={styles.rest_btn} onClick={() => onSubmit(1)}>取消</View>
-                        <View className={styles.reason_list}>
+                    <View  className={styles.verify_btn } onClick={() => onSubmit(2)}>确认</View>
-                            <View className={styles.reason_item}>完好无损带原标签</View>
+                </View >
-                            <View className={styles.reason_item}>完好无损带原标签</View>
+            </View >
-                            <View className={styles.reason_item}>完好无损带原标签</View>
+            <ReasonPopup show={showReason.show} onClose={closeReason} status={showReason.status}/>   
-                            <View className={styles.reason_item}>完好无损带原标签</View>
-                            <View className={styles.reason_item}>完好无损带原标签</View>
-                            <View className={styles.reason_item}>完好无损带原标签</View>
-                            <View className={styles.reason_item}>完好无损带原标签</View>
-                            <View className={styles.reason_item}>完好无损带原标签</View>
-                            <View className={styles.reason_item}>完好无损带原标签</View>
-                            <View className={styles.reason_item}>完好无损带原标签</View>
-                            <View className={styles.reason_item}>完好无损带原标签</View>
-                            <View className={styles.reason_item}>完好无损带原标签</View>
-                            <View className={styles.reason_item}>完好无损带原标签</View>
-                            <View className={styles.reason_item}>完好无损带原标签</View>
-                        </View>
-                   </ScrollView>
-                </View>
-            </Popup>
         </View>
     )
-})
+}
 
 //图片列表
 const PictureItem = memo(() => {
+    
+    //图片
+    const uploadImage = () => {
+        Taro.chooseImage({
+            count: 1, // 默认9
+            sizeType: ['original', 'compressed'], 
+            sourceType: ['album', 'camera'], 
+            success: function (res) {
+                // var tempFilePaths = res.tempFilePaths
+                const file = res.tempFiles[0]
+                console.log('res:::',res.tempFiles[0])
+                // uploadCDNImg(file, 'product', 'product')
+            }
+        })
+    }
     return (
         <>
             <View className={styles.ImgItem}>
                 <Image mode="aspectFill" src={formatImgUrl('')} ></Image>
-                <View className={classnames(styles.miconfont_close, 'iconfont icon-qingkong')}></View>
+                <View  className={classnames(styles.miconfont_close, 'iconfont icon-qingkong')}></View>
+            </View>
+            <View className={styles.uploadImg } onClick={uploadImage}>
+                <Text className={classnames(styles.miconfont, 'iconfont icon-saomazhifu')}></Text>
+                <Text className={styles.uploadText}>上传照片</Text>
             </View>
         </>
     )
 })
-
-//其他说明

src/pages/order/index.tsx

@@ -16,7 +16,6 @@ import classnames from "classnames";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import order from "../orderList/components/order";
 import AddressInfoDetail from "./components/addressInfoDetail";
-import ApplyAfterSales from "./components/applyAfterSales";
 import KindList from "./components/kindList";
 import OrderState from "./components/orderState";
 import Payment from "./components/payment";
@@ -226,7 +225,6 @@ import styles  from './index.module.scss'
                 <Remark onSave={(e) => getRemark(e)}/>
             </Popup>
             <Payment onSubmitSuccess={onPaySuccess} show={payMentShow} onClose={closePayShow} orderInfo={payOrderInfo} />
-            <ApplyAfterSales/>
             <View className="common_safe_area_y"></View>
         </View>
     )

src/pages/orderList/components/order/index.tsx

@@ -99,7 +99,6 @@ export default memo(({value, onClickBtn}: Param) => {
                 <View className={styles.color_count_num}>{`${value?.total_fabrics}种面料，${value?.total_colors}种颜色，共${value?.total_number}条`}</View>
             </View>
             <OrderBtns orderInfo={orderInfo} onClick={orderBtnsClick}/>
-            
         </View>
     )
 })

src/reducers/userInfo.ts

@@ -39,6 +39,7 @@ export type UserAdminParam = {
     wechat_user_open_id?: number
     is_authorize_name?: false|true,
     is_authorize_phone?: false|true,
+    phone?:string,
 }
 
 export type SortCodeParam = {

src/use/useLogin.ts

@@ -8,8 +8,6 @@ import { GetShortCodeApi } from "@/api/share"
 export default () => {
     const {setUserInfo, setAdminUserInfo, setSortCode, userInfo} = useUserInfo()
 
-    console.log('userInfo:::', userInfo)
-
     //登录请求 (调用这个就不能再useHttp中使用，当前这个hook, 否则会死循环内存溢出)
     // const {fetchData} = LoginApi()
 
@@ -26,9 +24,9 @@ export default () => {
 
     //获取用户信息
     const {fetchData: useFetchData} = GetAdminUserInfoApi()
-    const getAdminUserInfo = async () => {
+    const getAdminUserInfo = async (params = {}) => {
         let res = await useFetchData()
-        setAdminUserInfo(res.data)
+        setAdminUserInfo({...res.data, ...params})
         getShortCode(res.data.user_id)
     }
     
@@ -76,7 +74,7 @@ export default () => {
                     })
                     if(user_res.success) {
                         setUserInfo({...user_res.data})
-                        reslove(user_res.data)
+                       
                         getAdminUserInfo()
                     } else {
                         reject(user_res.msg)
@@ -94,7 +92,7 @@ export default () => {
 
     //获取手机号码
     const {fetchData: fetchDataUserPhone} = GetPhoneNumberApi()
-    const getPhoneNumber = (code) =>{
+    const getPhoneNumber = (code) => {
         return new Promise( async (reslove, reject) => {
             if(userInfo.adminUserInfo?.is_authorize_phone) {
                 reslove(true) 
@@ -103,7 +101,7 @@ export default () => {
             const res = await fetchDataUserPhone({code})
             if(res.success) {
                 setUserInfo({...userInfo.userInfo, phone:res.data.phone_number})
-                getAdminUserInfo()
+                getAdminUserInfo({phone:res.data.phone_number})
                 reslove(res.data)
             } else {
                 reject(res.msg)