1

src/pages/editOrder/components/shipmentMode/index.module.scss

@@ -0,0 +1,33 @@
+
+    .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_status_selected{
+            color: $color_main;
+            border: 1px solid $color_main;
+        }
+    }

src/pages/editOrder/components/shipmentMode/index.tsx

@@ -0,0 +1,28 @@
+import { Text, View } from "@tarojs/components"
+import styles  from './index.module.scss'
+import classnames from "classnames";
+import { memo, useRef, useState } from "react";
+
+type Param = {
+    onSelect?:(val:number) => void
+}
+export default memo(({onSelect}: Param) => {
+    //收货方法 1:自提，2：物流
+    const shipmentMode = useRef([
+        {value:1, label:'上门自提', selected:false},
+        {value:2, label:'物流', selected:false}
+    ]) 
+    const [selectValue, setSelectValue] = useState()
+    const selectShipmentMode = (value) => {
+        setSelectValue(() => value)
+        onSelect?.(value)
+    }
+    return (
+        <View className={styles.order_title}>
+          <Text>收货方式</Text>
+          {shipmentMode.current.map(item => {
+              return <View className={classnames(styles.order_status, (selectValue == item.value)&&styles.order_status_selected)} onClick={() => selectShipmentMode(item.value)}>{item.label}</View>
+          })}              
+      </View>
+    )
+})

src/pages/editOrder/index.config.ts

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

src/pages/editOrder/index.module.scss

@@ -0,0 +1,86 @@
+.order_edit_main{
+    min-height: 100%;
+    background-color:$color_bg_one;
+    padding-top: 20px;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    .title_msg{
+        display: flex;
+        align-items: center;
+        padding: 20px;
+        background-color: #fff;
+        margin: 0 20px;
+        border-radius: 20px;
+        .miconfont{
+            font-size: 50px;
+            color: $color_main;
+        }
+        .title_msg_con{
+            font-size: 23px;
+            display: flex;
+            flex-direction: column;
+            margin-left: 30px;
+            text{
+                &:nth-child(1) {
+                    color: $color_main;
+                }
+                &:nth-child(2) {
+                    color: $color_font_three;
+                }
+            }
+        }
+    }
+
+    .shipmentMode_con{
+        margin: 0 20px;
+    }
+    .old_address{
+        display: flex;
+        flex-direction: column;
+        padding: 30px 20px 60px 20px;
+        box-sizing: border-box;
+        .old_address_text{
+            font-weight: 700;
+            &:nth-of-type(1) {
+                padding-bottom: 30px;
+                font-size: $font_size_big;
+            }
+            &:nth-of-type(2) {
+                padding-bottom: 30px;
+                font-size: $font_size;
+            }
+        }
+        .userInfo{
+            display: flex;
+            font-size: $font_size;
+            color: $color_font_three;
+            align-items: center;
+            .userInfo_text{
+                font-size: $font_size;
+                &:nth-child(2) {
+                   padding-left: 20px;
+                }
+            }
+            
+        }
+    }
+    .select_address_con{
+        flex:1;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        background-color: #fff;
+        border-radius: 30px 30px 0px 0px;
+        .title{
+            font-size: $font_size;
+            font-weight: 700;
+            margin-top: 30px;
+        }
+        .address_list{
+            flex:1;
+            height: 0;
+            margin-top: 50px;
+        }
+    }
+}

src/pages/editOrder/index.tsx

@@ -0,0 +1,47 @@
+import { Text, View } from "@tarojs/components"
+import styles  from './index.module.scss'
+import classnames from "classnames";
+import { useCallback, useRef, useState } from "react";
+import ShipmentMode from "./components/shipmentMode";
+import AddressList from "@/components/AddressList";
+export default () => {
+  //提交的数据
+  const [submitData, setSubmitData] = useState({
+    address_id:0,
+    id:0,
+    shipment_mode: 0
+  })
+
+  //获取收货方法
+  const getShipmentMode = useCallback((num) => {
+    setSubmitData((val) => ({...val, shipment_mode:num}))
+  }, [])
+  return (
+    <View className={styles.order_edit_main}>
+      <View className={classnames(styles.title_msg)}>
+        <Text className={classnames(styles.miconfont, 'iconfont icon-tick-pressed')}></Text>
+        <View className={styles.title_msg_con}>
+          <Text>修改收货地址可能会影响发货时效</Text>
+          <Text>若商品已发货，则不能修改</Text>
+        </View>
+      </View>
+      <View className={styles.shipmentMode_con}>
+        <ShipmentMode onSelect={getShipmentMode}/>
+      </View>
+      <View className={styles.old_address}>
+        <Text className={styles.old_address_text}>原地址:</Text>
+        <Text className={styles.old_address_text}>广东省 佛山市 禅城区 张槎街道 清风路1988号麦兜的大 大仓库</Text>
+        <View className={styles.userInfo}>
+          <Text className={styles.userInfo_text}>陈先生</Text>
+          <Text className={styles.userInfo_text}>1818877790</Text>
+        </View>
+      </View>
+      <View className={styles.select_address_con}>
+        <View className={styles.title}>重新选择收货地址</View>
+        <View className={styles.address_list}>
+          <AddressList focusBorderEnabled={true} addButtonEnabled={false}/>
+        </View>
+      </View>
+    </View>
+  )
+}