diff --git a/src/pages/mall/subs/components/payment-dialog.vue b/src/pages/mall/subs/components/payment-dialog.vue
new file mode 100644
index 0000000..d137249
--- /dev/null
+++ b/src/pages/mall/subs/components/payment-dialog.vue
@@ -0,0 +1,109 @@
+<template>
+  <uni-popup type='bottom' ref='popupRef' :mask-click='false' @touchmove.stop.prevent=''>
+    <view class='popup-content c-flex-column'>
+      <view class='c-flex-row'>
+        <image :src='assetsUrl("ic_back.png")' @click.stop='close()' />
+        <text>选择支付方式</text>
+      </view>
+
+      <view class='c-flex-row' @click.stop='doPayment(PAYMENT_TYPE_WECHAT)'>
+        <image :src='assetsUrl("ic_wechat.png")' />
+        <text>微信支付</text>
+        <image :src='assetsUrl(currentType===PAYMENT_TYPE_WECHAT?"ic_checkbox_active.png":"ic_checkbox_normal.png")' />
+      </view>
+      <view class='divider' style='margin: 40rpx 0' />
+      <view class='c-flex-row' @click.stop='doPayment(PAYMENT_TYPE_BALANCE)'>
+        <image :src='assetsUrl("ic_balance.png")' />
+        <text>余额（剩余￥100）</text>
+        <image :src='assetsUrl(currentType===PAYMENT_TYPE_BALANCE?"ic_checkbox_active.png":"ic_checkbox_normal.png")' />
+      </view>
+    </view>
+  </uni-popup>
+</template>
+
+<script lang='ts' setup>
+import { assetsUrl } from '@/utils/assets';
+
+const popupRef = ref();
+const PAYMENT_TYPE_WECHAT = 0;
+const PAYMENT_TYPE_BALANCE = 1;
+const currentType = ref(PAYMENT_TYPE_WECHAT);
+
+const emits = defineEmits(['change']);
+const show = () => {
+  popupRef.value.open();
+};
+
+const close = () => {
+  popupRef.value.close();
+};
+
+const doPayment = (paymentType: number) => {
+  emits('change', paymentType);
+  currentType.value = paymentType;
+  switch (paymentType) {
+    case PAYMENT_TYPE_WECHAT:
+      console.log('PAYMENT_TYPE_WECHAT');
+      break;
+    case PAYMENT_TYPE_BALANCE:
+      console.log('PAYMENT_TYPE_BALANCE');
+      break;
+  }
+  close();
+};
+
+defineExpose({
+  show
+});
+</script>
+
+<style lang='scss' scoped>
+.popup-content {
+  background: #FFFFFF;
+  border-radius: 20rpx 20rpx 0 0;
+  padding: 38rpx 45rpx 140rpx 45rpx;
+
+  view:nth-of-type(1) {
+    display: flex;
+    margin-bottom: 70rpx;
+    position: relative;
+
+    image {
+      width: 35rpx;
+      height: 35rpx;
+      align-self: flex-start;
+    }
+
+    text {
+      font-weight: bold;
+      font-size: 30rpx;
+      color: #333333;
+      position: absolute;
+      left: 0;
+      right: 0;
+      text-align: center;
+    }
+  }
+
+  view:nth-of-type(n+2) {
+    image:nth-of-type(1) {
+      width: 47rpx;
+      height: 47rpx;
+    }
+
+    text {
+      align-self: center;
+      flex: 1;
+      font-weight: 400;
+      font-size: 30rpx;
+      color: #333333;
+      margin-left: 23rpx;
+    }
+
+    image:nth-of-type(2) {
+      width: 35rpx;
+      height: 35rpx;
+    }
+  }
+}
+</style>
diff --git a/src/pages/mall/subs/order/order-confirm.vue b/src/pages/mall/subs/order/order-confirm.vue
index 498450a..685f3f2 100644
--- a/src/pages/mall/subs/order/order-confirm.vue
+++ b/src/pages/mall/subs/order/order-confirm.vue
@@ -81,9 +81,9 @@
       </view>
     </view>
 
-    <view class='payment-way c-flex-row'>
+    <view class='payment-way c-flex-row' @click.stop='changePayment'>
       <text>支付方式</text>
-      <view>微信支付
+      <view>{{ paymentType === 0 ? '微信支付' : '余额' }}
         <image :src='assetsUrl("ic_arrow_right_gray.png")' />
       </view>
     </view>
@@ -91,16 +91,28 @@
     <view class='bottom-view c-flex-row'>
       <text>合计</text>
       <text>￥29.90</text>
-      <text>确认订单</text>
+      <text @click.stop='payment'>确认订单</text>
     </view>
   </view>
+  <payment-dialog ref='paymentDialogRef' @change='args => paymentType=args' />
 </template>
 
 <script lang='ts' setup>
-
 import { assetsUrl } from '@/utils/assets';
+import PaymentDialog from '../components/payment-dialog.vue';
 
+const paymentDialogRef = ref();
+const paymentType = ref(0);
 const tabIndex = ref(0);
+
+const changePayment = () => {
+  console.log(paymentDialogRef);
+  paymentDialogRef.value.show();
+};
+
+const payment = () => {
+
+};
 </script>
 
 <style lang='scss' scoped>
diff --git a/src/pages/mine/subs/order/components/order-item.vue b/src/pages/mine/subs/order/components/order-item.vue
index 039eec9..c88c17f 100644
--- a/src/pages/mine/subs/order/components/order-item.vue
+++ b/src/pages/mine/subs/order/components/order-item.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class='card-view'>
+  <view class='card-view' @click.stop='goPath("/pages/mine/subs/order/order-detail")'>
     <view class='goods-info-view c-flex-row'>
       <image class='goods-image' :src='assetsUrl("test_bg.png")' />
       <view class='c-flex-column' style='flex: 1;'>
@@ -36,6 +36,7 @@
 
 <script lang='ts' setup>
 import { assetsUrl } from '@/utils/assets';
+import { goPath } from '@/utils';
 
 defineProps({
   item: Object
diff --git a/src/pages/mine/subs/order/order-detail.vue b/src/pages/mine/subs/order/order-detail.vue
index f45039f..f812268 100644
--- a/src/pages/mine/subs/order/order-detail.vue
+++ b/src/pages/mine/subs/order/order-detail.vue
@@ -1,11 +1,346 @@
 <template>
+  <view class='content'>
+    <view class='countdown c-flex-row'>
+      <image :src='assetsUrl("ic_order.png")' />
+      <view class='c-flex-column'>
+        <text>
+          待支付
+        </text>
+        <view class='c-flex-row'>
+          <image :src='assetsUrl("ic_time.png")' />
+          <text>支付剩余时间
+            <text style='color: #F32B2B'>05:23</text>
+          </text>
+        </view>
+      </view>
+    </view>
+    <view class='address-view c-flex-column'>
+      <view class='user-info c-flex-row'>
+        <text>默认</text>
+        <text>黄先生</text>
+        <text>155****6532</text>
+        <view style='flex: 1' />
+        <text style='color: #5B96FB'>复制</text>
+      </view>
 
+      <view class='addr c-flex-row'>
+        <image :src='assetsUrl("ic_location.png")' />
+        <text>湖南省 长沙市 详细地址详细地址详细地址</text>
+      </view>
+      <image class='dashed-line' :src='assetsUrl("ic_address_dashed_line.png")' />
+    </view>
+
+    <view class='goods-info-view c-flex-column'>
+      <view class='c-flex-row'>
+        <image class='goods-image' :src='assetsUrl("test_bg.png")' />
+        <view class='c-flex-column' style='flex: 1;'>
+          <view class='c-flex-row'>
+            <text class='goods-name'>女童夏装套装洋气装短袖阔腿裤子夏装套装</text>
+          </view>
+          <text style='color: #999999;margin-top: 30rpx'>
+            2356235654
+          </text>
+          <view class='bottom-view c-flex-row'>
+            <text>
+              紫色，120cm x1
+            </text>
+            <text>23.20</text>
+          </view>
+        </view>
+      </view>
+      <view class='divider' />
+
+      <view class='remark-view c-flex-row'>
+        <text style='flex: 1'>备注</text>
+        <text>无备注</text>
+      </view>
+    </view>
+
+    <view class='card-view'>
+      <view class='c-flex-row'>
+        <text class='card-view-title'>商品总价</text>
+        <text class='card-view-value'>￥29.90</text>
+      </view>
+      <view class='c-flex-row'>
+        <text class='card-view-title'>运费</text>
+        <text class='card-view-value'>￥8</text>
+      </view>
+      <view class='c-flex-row'>
+        <text class='card-view-title'>优惠券
+          <text style='font-size: 22rpx;color: #F32B2B;'>已选最大优惠</text>
+        </text>
+        <text class='card-view-value' style='color: #F32B2B;margin: 0'>-￥20
+        </text>
+      </view>
+      <view class='divider' />
+      <view class='c-flex-row'>
+        <view style='flex: 1' />
+        <view class='c-flex-row'>
+          <text class='card-view-value'>共1件商品 合计：
+            <text style='font-size: 34rpx;color:#F32B2B'>¥29.90</text>
+          </text>
+        </view>
+      </view>
+    </view>
+
+    <view class='order-no c-flex-column'>
+      <text>订单编号：1524625555555
+        <text style='color: #5B96FB;margin-left: 10rpx'>复制</text>
+      </text>
+      <text>下单时间：2022-02-22 12：22：55</text>
+    </view>
+
+    <view class='bottom-action-view c-flex-row'>
+      <text @click.stop='cancel'>取消订单</text>
+      <text @click.stop='payment'>立即支付</text>
+    </view>
+  </view>
 </template>
 
 <script lang='ts' setup>
+import { assetsUrl } from '@/utils/assets';
 
+const cancel = () => {
+};
+const payment = () => {
+
+};
 </script>
 
 <style lang='scss' scoped>
+.content {
+  padding: 20rpx 30rpx;
+}
 
+.countdown {
+  padding: 10rpx 30rpx 30rpx 30rpx;
+
+  image:nth-of-type(1) {
+    width: 60rpx;
+    height: 74rpx;
+  }
+
+  view:not(.c-flex-row):nth-of-type(1) {
+    margin-left: 23rpx;
+
+    text:nth-of-type(1) {
+      font-weight: bold;
+      font-size: 36rpx;
+      color: #333333;
+    }
+
+    view:nth-of-type(1) {
+      margin-top: 5rpx;
+
+      image {
+        width: 30rpx;
+        height: 30rpx;
+      }
+
+      text {
+        font-weight: 400;
+        font-size: 26rpx;
+        color: #333333;
+        margin-left: 8rpx;
+      }
+    }
+  }
+}
+
+.address-view {
+  padding-top: 38rpx;
+  background: #FFFFFF;
+
+  .user-info {
+    margin-left: 20rpx;
+    margin-right: 20rpx;
+
+    text:nth-of-type(1) {
+      padding: 2rpx 10rpx;
+      font-size: 24rpx;
+      color: #F32B2B;
+      border-radius: 5rpx;
+      border: 1rpx solid #F32B2B;
+      margin-right: 12rpx;
+    }
+
+    text:nth-of-type(n+2) {
+      font-weight: bold;
+      font-size: 30rpx;
+      color: #333333;
+      margin-left: 10rpx;
+    }
+
+    image {
+      width: 8rpx;
+      height: 16rpx;
+    }
+  }
+
+  .addr {
+    margin-top: 15rpx;
+    margin-left: 20rpx;
+
+    image {
+      width: 30rpx;
+      height: 37rpx;
+    }
+
+    text {
+      font-weight: 400;
+      font-size: 26rpx;
+      color: #999999;
+      margin-left: 16rpx;
+    }
+  }
+
+  .dashed-line {
+    width: 100%;
+    height: 8rpx;
+    margin-top: 37rpx;
+  }
+}
+
+.goods-info-view {
+  display: flex;
+  position: relative;
+  background: #FFFFFF;
+  margin-top: 20rpx;
+  border-radius: 10rpx;
+  padding: 30rpx 20rpx;
+
+  .goods-image {
+    width: 180rpx;
+    height: 180rpx;
+    border-radius: 10rpx;
+    margin-right: 20rpx;
+  }
+
+  .goods-name {
+    font-size: 30rpx;
+    font-weight: 400;
+    -webkit-line-clamp: 2;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    margin-right: 20rpx;
+    color: #333333;
+    flex: 1;
+  }
+
+  .bottom-view {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 10rpx;
+
+    text:nth-of-type(1) {
+      font-size: 26rpx;
+      font-weight: 400;
+      flex: 1;
+      color: #999999;
+    }
+
+    text:nth-of-type(2) {
+      font-weight: bold;
+      font-size: 36rpx;
+      color: #333333;
+    }
+
+    text:nth-of-type(2):before {
+      content: '￥';
+    }
+
+    text:nth-of-type(3) {
+      font-size: 34rpx;
+      color: #333333;
+      font-weight: bold;
+    }
+  }
+
+  .divider {
+    margin: 30rpx 0;
+  }
+
+  .remark-view {
+    text {
+      font-weight: 400;
+      font-size: 28rpx;
+      color: #333333;
+    }
+  }
+}
+
+.card-view {
+  margin-top: 20rpx;
+  padding: 0 25rpx 0 23rpx;
+
+  view:not(.divider):nth-of-type(n+1) {
+    margin: 20rpx 0;
+
+    .card-view-title {
+      font-weight: 400;
+      font-size: 30rpx;
+      color: #333333;
+      flex: 1;
+    }
+
+    .card-view-value {
+      font-weight: 400;
+      font-size: 26rpx;
+      color: #333333;
+
+      image {
+        width: 8rpx;
+        height: 16rpx;
+        margin-left: 16rpx;
+      }
+    }
+  }
+}
+
+.order-no {
+  background: #FFFFFF;
+  border-radius: 10rpx;
+  padding: 22rpx 23rpx;
+  margin-top: 20rpx;
+  margin-bottom: 200rpx;
+
+  text:nth-of-type(n+1) {
+    font-weight: 400;
+    font-size: 26rpx;
+    color: #333333;
+  }
+
+  text:nth-of-type(1) {
+    margin-bottom: 12rpx;
+  }
+}
+
+.bottom-action-view {
+  background: #FFFFFF;
+  position: fixed;
+  justify-content: flex-end;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 12rpx 30rpx 78rpx 30rpx;
+
+  text:nth-of-type(1) {
+    font-weight: 400;
+    font-size: 30rpx;
+    color: #333333;
+    border-radius: 34rpx;
+    padding: 17rpx 45rpx;
+    border: 1rpx solid #707070;
+    margin-right: 20rpx;
+  }
+
+  text:nth-of-type(2) {
+    padding: 17rpx 45rpx;
+    border-radius: 43rpx;
+    border: 1rpx solid #F32B2B;
+    font-weight: bold;
+    font-size: 30rpx;
+    color: #F32B2B;
+  }
+}
 </style>
diff --git a/src/static/images/ic_back.png b/src/static/images/ic_back.png
new file mode 100644
index 0000000..2ab340b
Binary files /dev/null and b/src/static/images/ic_back.png differ
diff --git a/src/static/images/ic_balance.png b/src/static/images/ic_balance.png
new file mode 100644
index 0000000..baafe98
Binary files /dev/null and b/src/static/images/ic_balance.png differ
diff --git a/src/static/images/ic_order.png b/src/static/images/ic_order.png
new file mode 100644
index 0000000..ceb7352
Binary files /dev/null and b/src/static/images/ic_order.png differ
diff --git a/src/static/images/ic_wechat.png b/src/static/images/ic_wechat.png
new file mode 100644
index 0000000..a721748
Binary files /dev/null and b/src/static/images/ic_wechat.png differ
diff --git a/src/store/modules/user/index.ts b/src/store/modules/user/index.ts
index e02aa42..52618a1 100644
--- a/src/store/modules/user/index.ts
+++ b/src/store/modules/user/index.ts
@@ -68,7 +68,8 @@ const useUserStore = defineStore('user', {
                 ...wechatUserInfo.userInfo,
                 encryptedData: wechatUserInfo?.encryptedData,
                 rawData: JSON.parse(wechatUserInfo?.rawData),
-                signature: wechatUserInfo?.signature
+                signature: wechatUserInfo?.signature,
+                iv: wechatUserInfo.iv
               };
 
               const res = await login({