feat(client): 新增申请弹窗，封装组件

src/PageMine/applyRefund/index.vue

@@ -0,0 +1,12 @@
+<template>
+  <view>
+    <page-navbar bgColor="#fff" title="申请退款" />
+  </view>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+</style>

src/PageMine/orderDetail/index.vue

@@ -33,7 +33,7 @@
 
       <view class='order-item-bottom-box'>
         <view class='refund-box'>
-          <view class='refund-btn'>申请退款</view>
+          <view class='refund-btn' @click="handleApply">申请退款</view>
         </view>
         <view class='rqcode-box'>
           <view class='rqcode-img'>
@@ -83,6 +83,7 @@
           <view class='item-right'>1.订单核销码有效期60天，过期后自动退款； 2.未使用/未到期前随时可退，款项沿付款方式原路退回，订单使用后不可退款</view>
       </view>
     </view>
+    <popup-confirm :show="show" confirmText="继续退款" :text="text" @close="handleClose" @confirm="handleConfirm"></popup-confirm>
   </view>
 </template>
 
@@ -91,19 +92,21 @@ export default {
   data() {
     return {
       init_list: {},
+      show: false,
+      text: '线上价交易有保障，线下支付需谨慎。车旅程可以保障服务过程中车险车辆受损、服务商量纠纷等问题时，车旅程客服可快速介入，保障您的资产安全；是您听信了商家的导线下支付，一旦发生服务纠纷，车旅程将无法保证您的权益',
     };
   },
   onLoad(option) {
-    this.init_list = option.orderList;
+    // this.init_list = option.orderList;
   },
   computed: {
-    allPrice() {
-      let price = 0;
-      this.init_list.goodsInfo.map(rs => {
-        price += rs.goodsPrice;
-      });
-      return price.toFixed(2);
-    },
+    // allPrice() {
+    //   let price = 0;
+    //   this.init_list.goodsInfo.map(rs => {
+    //     price += rs.goodsPrice;
+    //   });
+    //   return price.toFixed(2);
+    // },
   },
   methods: {
     // 点击跳转到预约
@@ -112,6 +115,17 @@ export default {
         url: '/PageMine/orderReserve/index',
       });
     },
+    handleApply() {
+      this.show = true;
+    },
+    handleConfirm() {
+      uni.navigateTo({
+        url: '/PageMine/applyRefund/index',
+      });
+    },
+    handleClose(data) {
+      this.show = data;
+    },
   },
 };
 </script>

src/components/popup-confirm/popup-confirm.vue

@@ -1,106 +1,89 @@
 <template>
-  <view class="popup-confirm">
-    <u-popup
-      :show="show"
-      :round="10"
-      mode="center"
-      @close="close"
-      :customStyle="popupCustomStyle"
-      :closeOnClickOverlay="false"
-    >
-      <view class="main flex align-center">
-        <base-img class="u-m-r-10" :src="iconSrc" width="24px" height="24px"></base-imgae>
-        <view class="text u-font-16 text-title">{{ text }}</view>
+  <u-popup :show="show" mode="center" :round="10" :customStyle="popupCustomStyle">
+    <view class="popup-confirm">
+      <view class="f-s-34 text-bold text-333 text-center u-m-b-32">提示</view>
+      <view class="popup-content">{{ text }}</view>
+      <view class="fl-flex popup-bottom">
+        <view class="popup-btn popup-btn1" @click="confirm">{{ confirmText }}</view>
+        <view class="popup-btn popup-btn2" @click="close">{{ cancelText }}</view>
       </view>
-      <view class="footer flex justify-end">
-        <view class="flex">
-          <u-button class="u-m-r-16" :customStyle="closeCustomStyle" @click="close()"
-            >取消</u-button
-          >
-          <u-button type="primary" :customStyle="confirmCustomStyle" @click="confirm()">{{
-            confirmText
-          }}</u-button>
-        </view>
-      </view>
-    </u-popup>
-    <!-- 		<popup-confirm :show.sync="showLogout" @confirm="handleLogoutConfirm" text="确认退出登录吗？" confirm-text="确认退出"></popup-confirm>
- -->
-  </view>
+    </view>
+  </u-popup>
 </template>
+
 <script>
 export default {
-  name: 'popup-confirm',
   props: {
     show: {
       type: Boolean,
       default: false,
     },
-    text: {
-      type: String,
-      default: '',
-    },
     width: {
       type: String,
-      default: '380px',
+      default: '550rpx',
     },
     confirmText: {
       type: String,
       default: '确认',
     },
-    type: {
+    cancelText: {
       type: String,
-      default: 'warning',
+      default: '取消',
+    },
+    text: {
+      type: String,
+      default: '内容',
     },
-  },
-  data() {
-    return {};
   },
   computed: {
-    iconSrc() {
-      return `/static/components/popup-confirm/${this.type}.svg`;
-    },
     popupCustomStyle() {
       return {
         width: this.width,
-      };
-    },
-    closeCustomStyle() {
-      return {
-        width: '60px',
-        height: '36px',
-        border: 'none',
-        color: '#1E252B',
-        background: '#eff2f4',
-      };
-    },
-    confirmCustomStyle() {
-      return {
-        width: '88px',
-        height: '36px',
-        background: '#2196F3',
+        padding: '24rpx',
       };
     },
   },
   methods: {
-    close() {
-      this.$emit('update:show', false);
-      this.$emit('close');
-    },
     confirm() {
       this.$emit('confirm');
     },
+    close() {
+      this.$emit('close', false);
+    },
   },
 };
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .popup-confirm {
-  .main {
-    padding: 24px;
+  position: relative;
+  .popup-content {
+    color: #333;
+    font-size: 30rpx;
+    line-height: 40rpx;
+    margin-bottom: 50rpx;
+    text-align: justify;
   }
-
-  .footer {
-    padding: 0 20px 20px;
+  .popup-bottom {
+    width: 109.5%;
+    position: absolute;
+    left: -24rpx;
+    bottom: -89rpx;
+    font-size: 32rpx;
+    color: #333;
+    .popup-btn {
+      width: calc(109.5% / 2);
+      height: 112rpx;
+      line-height: 112rpx;
+      text-align: center;
+    }
+    .popup-btn1 {
+      border-top: 2rpx solid #e7e6e4;
+      border-right: 2rpx solid #e7e6e4;
+    }
+    .popup-btn2 {
+      border-top: 2rpx solid #e7e6e4;
+    }
   }
 }
 </style>

src/pages.json

@@ -190,6 +190,12 @@
             "navigationStyle": "custom"
           }
         },
+        {
+          "path": "applyRefund/index",
+          "style": {
+            "navigationStyle": "custom"
+          }
+        },
         {
           "path": "gotoEvaluate/index",
           "style": {