From 8ebca1e661944139be4fc1e5811bb6165767bf4f Mon Sep 17 00:00:00 2001 From: czm <2192718639@qq.com> Date: Tue, 19 Apr 2022 18:43:24 +0800 Subject: [PATCH] =?UTF-8?q?=E7=A1=AE=E8=AE=A4=E8=AE=A2=E5=8D=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app.config.ts | 2 +- .../estimatedAmount/index.module.scss | 23 ++ .../components/estimatedAmount/index.tsx | 17 ++ src/pages/order/index.config.ts | 3 + src/pages/order/index.module.scss | 207 ++++++++++++++++++ src/pages/order/index.tsx | 107 +++++++++ 6 files changed, 358 insertions(+), 1 deletion(-) create mode 100644 src/pages/order/components/estimatedAmount/index.module.scss create mode 100644 src/pages/order/components/estimatedAmount/index.tsx create mode 100644 src/pages/order/index.config.ts create mode 100644 src/pages/order/index.module.scss create mode 100644 src/pages/order/index.tsx diff --git a/src/app.config.ts b/src/app.config.ts index 525469c..1f73284 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -87,7 +87,7 @@ export default { ] }, { - root: "pages/weightListAdd", + root: "pages/order", pages: [ "index" ] diff --git a/src/pages/order/components/estimatedAmount/index.module.scss b/src/pages/order/components/estimatedAmount/index.module.scss new file mode 100644 index 0000000..f12d646 --- /dev/null +++ b/src/pages/order/components/estimatedAmount/index.module.scss @@ -0,0 +1,23 @@ +.order_price{ + font-weight: 700; + display: flex; + align-items: center; + .order_price_text{ + font-size: $font_size_medium; + margin-right: 10px; + } + .order_price_num{ + text{ + &:nth-child(1) { + font-size: $font_size_min; + } + &:nth-child(2) { + font-size: $font_size_big; + } + &:nth-child(3) { + font-size: $font_size_medium; + } + } + } + +} \ No newline at end of file diff --git a/src/pages/order/components/estimatedAmount/index.tsx b/src/pages/order/components/estimatedAmount/index.tsx new file mode 100644 index 0000000..27d63f1 --- /dev/null +++ b/src/pages/order/components/estimatedAmount/index.tsx @@ -0,0 +1,17 @@ +import { Text, View } from "@tarojs/components" +import styles from './index.module.scss' +type Param = { + style?: Object +} +export default ({style}:Param) => { + return ( + + 预估金额 + + ¥ + 6,001 + .00 + + + ) +} \ No newline at end of file diff --git a/src/pages/order/index.config.ts b/src/pages/order/index.config.ts new file mode 100644 index 0000000..b0cb522 --- /dev/null +++ b/src/pages/order/index.config.ts @@ -0,0 +1,3 @@ +export default { + navigationBarTitleText: '确认订单' +} diff --git a/src/pages/order/index.module.scss b/src/pages/order/index.module.scss new file mode 100644 index 0000000..84a37bd --- /dev/null +++ b/src/pages/order/index.module.scss @@ -0,0 +1,207 @@ +.order_main{ + min-height: 100%; + background-color:$color_bg_one; + padding: 20px; + padding-bottom: 190px; + box-sizing: border-box; + .order_title{ + display: flex; + align-items: center; + padding: 20px 30px; + box-sizing: border-box; + background-color: #fff; + height: 116px; + border-radius: 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_address{ + height: 178px; + background: #ffffff; + border-radius: 20px; + display: flex; + align-items: center; + padding: 30px; + box-sizing: border-box; + margin-top: 20px; + .order_address_icon{ + font-size: 60px; + } + .order_address_text{ + flex: 1; + font-size: $font_size; + font-weight: 700; + margin-left: 30px; + } + .order_address_more_icon{ + color: $color_font_three; + font-size: $font_size; + } + } + .orders_list_con{ + margin-top: 20px; + background-color: #fff; + border-radius: 20px; + padding: 20px; + } + .order_list{ + &:nth-child(n+2) { + margin-top: 30px; + } + .order_list_title{ + display: flex; + align-items: center; + .tag{ + font-size: $font_size_min; + background-color: #CDE5FF; + padding: 5px 10px; + border-radius: 6px; + color: $color_main; + } + .title{ + font-weight: 700; + font-size: $font_size; + margin-left: 20px; + flex:1; + } + .num{ + color: $color_font_two; + font-size: $font_size_min; + } + } + } + .order_list_scroll{ + margin-top: 30px; + + .order_list_item { + display: flex; + &:nth-child(2) { + margin-top: 30px; + } + .order_list_item_img{ + width: 126px; + height: 126px; + border-radius: 20px; + background-color: red; + } + .order_list_item_con{ + display: flex; + width: 100%; + flex:1; + border-bottom: 1px solid #f0f0f0; + height: 150px; + padding-top: 20px; + box-sizing: border-box; + } + .order_list_item_des{ + flex:1; + box-sizing: border-box; + padding-left: 30px; + .order_list_item_title{ + font-weight: 700; + font-size: $font_size; + margin-bottom: 15px; + } + .order_list_item_price{ + font-size: 26px; + color: $color_font_three; + } + } + .order_list_item_count{ + .count_num{ + color: $color_main; + font-size: $font_size; + margin-bottom: 15px; + font-weight: 400; + text{ + font-size: $font_size_min; + } + } + .count_price { + font-size: $font_size; + font-weight: 700; + text{ + font-size: $font_size_min; + } + } + } + } + } + .order_estimated_amount{ + display: flex; + align-items: flex-end; + flex-direction: column; + padding: 30px 0; + .order_price_des{ + font-size: $font_size_medium; + color: $color_font_two; + } + } + .order_desc{ + display: flex; + align-items: center; + background-color: #fff; + padding: 0 30px; + height: 116px; + border-radius: 20px; + margin-top: 20px; + .order_desc_con{ + flex:1; + font-size: $font_size; + font-weight: 700; + } + .order_desc_text{ + font-size: $font_size_medium; + color: $color_font_two; + margin-right: 10px; + } + .miconfont{ + font-size: 20px; + color: $color_font_two; + } + } + .submit_order{ + display: flex; + position: fixed; + bottom: 0; + left: 0; + justify-content: space-between; + width: 100%; + height: 175px; + align-items: center; + background-color: #fff; + box-shadow: 6px 0px 12px 0px rgba(0,0,0,0.16); + padding: 20px 50px; + box-sizing: border-box; + padding-bottom: constant(safe-area-inset-bottom); + padding-bottom: env(safe-area-inset-bottom); + .order_btn { + width: 250px; + height: 90px; + opacity: 0.6; + background: linear-gradient(38deg,#007aff, #4fa6ff 100%, #68b4ff 100%); + border-radius: 46px; + display: flex; + justify-content: center; + align-items: center; + color: #fff; + } + } + +} \ No newline at end of file diff --git a/src/pages/order/index.tsx b/src/pages/order/index.tsx new file mode 100644 index 0000000..7dc2644 --- /dev/null +++ b/src/pages/order/index.tsx @@ -0,0 +1,107 @@ +import { Text, View } from "@tarojs/components" +import classnames from "classnames"; +import EstimatedAmount from "./components/estimatedAmount"; +import styles from './index.module.scss' + + export default () => { + return ( + + + 收货方式 + 物流 + 上门自提 + + + + 请选择收货地址及信息 + + + + + + 大货 + 0770# 21S单面平纹(食毛) + 共3种 + + + + + + + 1# 薄荷绿 + ¥40/kg + + + ×1 + ¥1,000.5 + + + + + + + + 1# 薄荷绿 + ¥40/kg + + + ×1 + ¥1,000.5 + + + + + + + + 大货 + 0770# 21S单面平纹(食毛) + 共3种 + + + + + + + 1# 薄荷绿 + ¥40/kg + + + ×1 + ¥1,000.5 + + + + + + + + 1# 薄荷绿 + ¥40/kg + + + ×1 + ¥1,000.5 + + + + + + + + (按照25kg/条, 预估金额) + + + + 订单备注 + 点击填写 + + + + + 提交订单 + + + + ) + } \ No newline at end of file