订单详情

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>

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>