```

feat(i18n): 添加订单确认相关国际化文本

- 添加订单确认提示、支付方式、订单信息、立即支付等英文翻译
- 添加订单确认提示、支付方式、订单信息、立即支付等中文翻译
- 添加订单确认页面路由配置
- 添加订单确认页面国际化文本

style(workflow): 调整工作流添加页面样式

- 将工作流添加页面的内边距从20px调整为10px
- 更新圆角样式从4px调整为8px
- 添加支付方式选择样式

docs(router): 添加订单确认页面路由

- 新增订单确认页面路由配置
- 添加路由元信息标题
```

src/locales/en.js

@@ -28,6 +28,10 @@ export default {
     genxinyu: 'Updated at',
     cancel: 'Cancel',
     confirm: 'Confirm',
+    orderConfirmTip: 'Please pay within 30 minutes, or the order will be automatically cancelled',
+    payWay: 'Pay Way',
+    orderInfo: 'Order Info',
+    payNow: 'Pay Now',
   },
   login: {
     smsLogin: 'SMS Login',
@@ -48,6 +52,7 @@ export default {
     gongzuoliu_trade_add: 'Publish Workflow Demand',
     WorkflowDetail: 'Workflow Detail',
     learning_system: 'Learning System',
+    orderConfirm: 'Order Confirm',
 
 
 

src/locales/zh-CN.js

@@ -29,6 +29,10 @@ export default {
     genxinyu: '更新于',
     cancel: '取消',
     confirm: '确定',
+    orderConfirmTip: '请在30分钟内完成支付，否则订单会被自动取消',
+    payWay: '支付方式',
+    orderInfo: '订单信息',
+    payNow: '立即支付',
   },
   login: {
     smsLogin: '短信登录',
@@ -49,6 +53,7 @@ export default {
     gongzuoliu_trade_add: '发布工作流需求',
     WorkflowDetail: '工作流详情',
     learning_system: '学习教程系统',
+    orderConfirm: '确认订单',
 
 
 

src/pages/WorkflowAdd.vue

@@ -274,7 +274,7 @@ const getCategoryListTreeFn = () => {
     background: #EAF0FF;
     border-radius: 8px 8px 8px 8px;
     border: 1px solid transparent;
-    padding: 20px 16px;
+    padding: 10px 16px;
     &.active{
       background: #EAF0FF;
       border-color: $primary-color;

src/pages/order/orderConfirm.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="orderConfirm container-height">
+    <Breadcrumb />
+    <div class="gap10">
+      <div class="font_size24 bold">{{$t('route.orderConfirm')}}</div>
+      <span class="font_size16 color_price">{{$t('common.orderConfirmTip')}}</span>
+    </div>
+    <!-- 订单信息 -->
+    <div class="border_radius_8 padding16 bg_color_fff box_shadow_card">
+      <div class="gap10">
+        <div class="line_vertical"></div>
+        <div class="font_size20 bold">{{$t('common.orderInfo')}}</div>
+      </div>
+      <div class="border border_radius_8 mt10">
+        <div class="flex-between order_table padding16">
+          <div class="flex_2 flex-center font_size18">订单信息</div>
+          <div class="flex_1 flex-center font_size18">米币</div>
+          <div class="flex_1 flex-center font_size18">有效期</div>
+          <div class="flex_1 flex-center font_size18">价格</div>
+        </div>
+        <div>
+          <div class="flex-between padding16">
+            <div class="flex_2 flex-center font_size18">
+              <div class="flex-between">
+                <img src="" alt="" style="width: 160px; height: 90px;" class="bg_color_f5">
+                <div class="ml10">
+                  <div class="font_size16 bold">UI界面设计教程</div>
+                  <el-button type="primary" size="mini" plain class="mt5">技能标签</el-button>
+                </div>
+              </div>
+            </div>
+            <div class="flex_1 flex-center font_size18">
+              2999
+            </div>
+            <div class="flex_1 flex-center font_size18">
+              永久
+            </div>
+            <div class="flex_1 flex-center font_size18 color_price">
+             ￥23
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="border_radius_8 padding16 bg_color_fff box_shadow_card mt20">
+      <div class="gap10">
+        <div class="line_vertical"></div>
+        <div class="font_size20 bold">{{$t('common.payWay')}}</div>
+      </div>
+      <div class="gap10 mt20">
+        <div class="gap10 cursor-pointer" @click="payType = 1">
+          <div class="checkType" :class="{'active': payType === 1}"></div>
+          <div class="font_size16">个人支付</div>
+        </div>
+        <div class="gap10 cursor-pointer" @click="payType = 2">
+          <div class="checkType" :class="{'active': payType === 2}"></div>
+          <div class="font_size16">对公支付</div>
+        </div>
+      </div>
+      <div class="mt20">
+        <div class="gap10">
+          <div class="payway flex_1 gap5" :class="{'active': payWay === 1}" @click="payWay = 1">
+            <div class="checkType"></div>
+            <img :src="zhifubaoIcon" alt="" style="width: 40px; height: 40px;">
+            <div class="font_size16">支付宝支付</div>
+          </div>
+          <div class="payway flex_1 gap5" @click="payWay = 2">
+            <div class="checkType" :class="{'active': payWay === 2}"></div>
+            <img :src="weixinIcon" alt="" style="width: 40px; height: 40px;">
+            <div class="font_size16">微信支付</div>
+          </div>
+          <div class="payway flex_1 gap5" @click="payWay = 3">
+            <div class="checkType" :class="{'active': payWay === 3}"></div>
+            <img :src="yinlianIcon" alt="" style="width: 40px; height: 40px;">
+            <div class="font_size16">银联支付</div>
+          </div>
+          <div class="payway flex_1 gap5" @click="payWay = 4">
+            <div class="checkType" :class="{'active': payWay === 4}"></div>
+            <img :src="paypalIcon" alt="" style="width: 40px; height: 40px;">
+            <div class="font_size16">PayPal支付</div>
+          </div>
+        </div>
+        <div class="mt20">
+          <div class="bold font_size18">米币</div>
+          <div class="gap10 mt10">
+            <div class="checkType"></div>
+            <div class="font_size16">可用米币 <span class="color_price bold">2999</span></div>
+            <div class="font_size16 color_price">(抵扣￥1.00)</div>
+          </div>
+        </div>
+      </div>
+      <div class="mt20 flex-center-between" style="width: 300px;">
+        <div class="font_size18">总价：</div>
+        <div class="font_size16 bold">￥239.2</div>
+      </div>
+      <div class="mt20 flex-center-between" style="width: 300px;">
+        <div class="font_size18">需付金额：</div>
+        <div class="font_size24 bold color_price">￥239.2</div>
+      </div>
+      <div style="display: inline-block;" class="mt20">
+        <div class="gap5 gradient border_radius_4 cursor-pointer zhifu">
+          <img :src="qianbaoIcon" alt="" style="width:13px;height:15px">
+          <div>{{$t('common.payNow')}}</div>
+        </div>
+      </div>
+      <div class="mt20 font_size14">录播和体验课课程属于虚拟商品，购买后无特殊原因，不支持退款</div>
+      <div class="mt20 gap10 cursor-pointer" @click="agreement = !agreement">
+        <div class="checkType" :class="{'active': agreement}"></div>
+        我已阅读并同意 <span class="color_theme bold">《AI学习论坛服务协议》</span> 和 <span class="color_theme bold">《AI学习论坛知识产权保护协议》</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import zhifubaoIcon from '@/assets/imgs/pay/zhifubao.png'
+import weixinIcon from '@/assets/imgs/pay/weixin.png'
+import yinlianIcon from '@/assets/imgs/pay/yinlian.png'
+import paypalIcon from '@/assets/imgs/pay/paypal.png'
+import qianbaoIcon from '@/assets/imgs/pay/qianbao.png'
+
+
+
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
+import DGTMessage from '@/utils/message'
+//获取参数
+const route = useRoute()
+const query = route.query;
+const id = ref(query.id || '');
+
+//
+// 支付方式
+const payType = ref(1);//支付类型 1：个人支付 2：对公支付
+const payWay = ref(1);//支付方式 1：支付宝支付 2：对公支付
+// 协议
+const agreement = ref(false);//是否同意协议
+
+
+
+</script>
+<style scoped lang="scss">
+.orderConfirm{
+  .order_table{
+    background-color: #F5F7FA ;
+  }
+  .payway{
+    padding: 20px 16px;
+    background-color: #F5F7FA ;
+    border-radius: 8px;
+    cursor: pointer;
+    &.active{
+      background-color: #EAF0FF;
+      .checkType{
+        border:4px solid $primary-color;
+      }
+    }
+  }
+  .zhifu{
+    padding: 10px 20px;
+    color: #ffffff;
+    border-radius: 10px;
+  }
+}
+</style>
+
+

src/router/index.js

@@ -101,6 +101,19 @@ const routes = [
       },
     ]
   },
+  {
+    path: '/order-confirm',
+    name: 'OrderConfirmHome',
+    component: () => import('@/pages/order/orderConfirm.vue'),
+    meta: { title: 'route.orderConfirm' }
+  },
+
+
+
+
+
+
+  // 一下是demon内容
   {
     path: '/course/:id',
     name: 'CourseDetail2',

src/styles/index.scss

@@ -522,7 +522,7 @@ wx-image{
 	border-radius: 4px;
 }
 .border_radius_8{
-	border-radius: 4px;
+	border-radius: 8px;
 }
 .border_radius_10{
 	border-radius: 10px;
@@ -712,4 +712,16 @@ wx-image{
 			font-weight: 600;
 		}
 	}
+}
+//支付方式
+.checkType{
+	width: 14px;
+	height: 14px;
+	border:2px solid #DCDFE6;
+	border-radius: 50%;
+	background-color: #ffffff;
+	&.active{
+		// border-color: $primary-color;
+		border:4px solid $primary-color;
+	}
 }