Browse Source

style(client): 优化支付成功界面

yizhiyang 1 year ago
parent
commit
b2c3f11228

+ 2 - 2
src/pages.json

@@ -104,9 +104,9 @@
           }
         },
         {
-          "path": "settleStatus/index",
+          "path": "paySuccess/index",
           "style": {
-            "navigationBarTitleText": "结算状态"
+            "navigationStyle": "custom"
           }
         },
         {

+ 9 - 3
src/pagesHome/marketer/index.vue

@@ -60,7 +60,9 @@
         <view class="info-item" style="border: none">
           <view class="item-left">
             <view class="address"> {{ merchant.address }} </view>
-            <view class="distance"> 距离您{{ (merchant.distance / 1000).toFixed(2) }}km </view>
+            <view class="distance">
+              距离您{{ (merchant.distance / 1000).toFixed(2) }}km
+            </view>
           </view>
           <view class="item-right">
             <view class="info-map">
@@ -80,7 +82,7 @@
             <view class="f-s-28 u-m-r-16">优惠</view>
             <view class="f-s-24 text-999"> 您有{{ coupons.length }}张购物券可领取 </view>
           </view>
-          <view class="fl-flex" @click="openPopup">
+          <view class="fl-flex" @click="openPopup" style="color: #ed4444">
             <view class="f-s-24 u-m-r-6">去领取</view>
             <u-icon name="arrow-right" size="13" color="#ED4444" />
           </view>
@@ -91,7 +93,11 @@
       <!-- 服务列表 -->
       <view>
         <u-tabs :list="categoryList" @change="handlerChangeTab"></u-tabs>
-        <view class="fl-flex u-m-t-20 service-list" :key="index" v-for="(item, index) of goods">
+        <view
+          class="fl-flex u-m-t-20 service-list"
+          :key="index"
+          v-for="(item, index) of goods"
+        >
           <base-img
             :src="!Boolean(item.logo) ? '/static/img.jpg' : item.logo"
             width="192rpx"

+ 0 - 0
src/pagesHome/settleStatus/index.vue → src/pagesHome/paySuccess/index copy.vue


+ 83 - 0
src/pagesHome/paySuccess/index.vue

@@ -0,0 +1,83 @@
+<template>
+  <view class="pay-success">
+    <page-navbar bgColor="#fff" title="支付成功"></page-navbar>
+    <view class="direction">
+      <u--image
+        src="/static/pagesHome/payment-success.png"
+        width="332rpx"
+        height="132rpx"
+      ></u--image>
+      <view class="success">支付成功</view>
+    </view>
+    <view class="fl-flex fl-justify-center">
+      <base-button
+        text="查看订单"
+        :buttonStyle="buttonStyleOrder"
+        @click="handlerSkipBtn(2)"
+      ></base-button>
+      <base-button
+        text="返回首页"
+        :buttonStyle="buttonStyleHome"
+        @click="handlerSkipBtn(1)"
+      ></base-button>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'pay-success',
+  data() {
+    return {};
+  },
+  methods: {
+    handlerSkipBtn(e) {
+      switch (e) {
+        case 1:
+          uni.switchTab({
+            url: '/pages/home/index',
+          });
+          break;
+        case 2:
+          uni.switchTab({
+            url: '/pages/mine/index',
+          });
+          break;
+      }
+    },
+  },
+  computed: {
+    buttonStyleOrder() {
+      return {
+        width: '184rpx',
+        height: '64rpx',
+        background: '#F7F7F7',
+        color: '#0c1223',
+        border: 'none',
+      };
+    },
+    buttonStyleHome() {
+      return {
+        width: '184rpx',
+        height: '64rpx',
+        marginLeft: '43rpx',
+      };
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.pay-success {
+  height: 100vh;
+  padding: 56rpx 32rpx;
+  background-color: #fff;
+  .success {
+    font-size: 36rpx;
+    color: #0c1223;
+    font-weight: bold;
+    margin-top: 16rpx;
+    margin-bottom: 78rpx;
+  }
+}
+</style>

+ 0 - 1
src/pagesHome/popularNearby/index.vue

@@ -2,7 +2,6 @@
   <view class="recommend-hot">
     <page-navbar :hasBack="true" bgColor="#fff" :title="getTitle"></page-navbar>
     <base-list :list="listData" @click="handlerRouterSkip"></base-list>
-    <!-- <load-more :status="loadmoreStatus" color="#ccc"></load-more> -->
   </view>
 </template>
 

+ 1 - 1
src/pagesHome/settleOrder/index copy.vue

@@ -189,7 +189,7 @@ export default {
       }).then(res => {
         if (res.code == 'OK') {
           uni.navigateTo({
-            url: '/pagesHome/settleStatus/index',
+            url: '/pagesHome/paySuccess/index',
           });
         } else {
           uni.showToast({

+ 1 - 1
src/pagesHome/settleOrder/index.vue

@@ -225,7 +225,7 @@ export default {
       }).then(res => {
         if (res.code == 'OK') {
           uni.navigateTo({
-            url: '/pagesHome/settleStatus/index',
+            url: '/pagesHome/paySuccess/index',
           });
         } else {
           uni.showToast({

+ 13 - 4
src/pagesHome/settleOrder/settleOrder - 副本.vue

@@ -31,7 +31,11 @@
       <view class="message-box">
         <view class="goods-title"> {{ init_list.merchantDTO.name }} </view>
         <u-line margin="20rpx 0"></u-line>
-        <view class="goods-item" v-for="(item, index) of init_list.cartItems" :key="item.goodsId">
+        <view
+          class="goods-item"
+          v-for="(item, index) of init_list.cartItems"
+          :key="item.goodsId"
+        >
           <view class="item-left">
             <image class="left-img" src="@/static/QR57a.jpg"></image>
             <view class="left-text">
@@ -41,12 +45,17 @@
                 <p class="price red-color">
                   <span style="font-size: 24rpx">¥</span>{{ item.price }}
                 </p>
-                <span class="false-price">¥{{ item.originalPrice ? item.originalPrice : 0 }}</span>
+                <span class="false-price"
+                  >¥{{ item.originalPrice ? item.originalPrice : 0 }}</span
+                >
               </view>
             </view>
           </view>
           <view class="item-right">
-            <u-number-box v-model="item.quantity" @change="valChange(item, $event)"></u-number-box>
+            <u-number-box
+              v-model="item.quantity"
+              @change="valChange(item, $event)"
+            ></u-number-box>
           </view>
         </view>
       </view>
@@ -244,7 +253,7 @@ export default {
       }).then(res => {
         if (res.code == 'OK') {
           uni.navigateTo({
-            url: '/pagesHome/settleStatus/index',
+            url: '/pagesHome/paySuccess/index',
           });
         } else {
           uni.showToast({

BIN
src/static/pagesHome/payment-success.png