style(client):优化提交订单样式

.prettierrc.js

@@ -1,5 +1,5 @@
 module.exports = {
-  printWidth: 100,
+  printWidth: 90,
   tabWidth: 2,
   semi: true,
   singleQuote: true,

src/PageMine/myWallet/index.vue

@@ -8,7 +8,7 @@
     <view class="wallet-main">
       <view class="wallet-card">
         <view class="fl-flex-item wallet-secure">
-          <view class="f-s-32 text-333 text-bold">*烊的钱包</view>
+          <view class="fl-text-title">*烊的钱包</view>
           <view class="fl-flex">
             <u--image src="/static/pageMine/secure.png" width="32rpx" height="32rpx"></u--image>
             <view class="f-s-24 text-33 u-m-l-4">安全保障中</view>

src/components/base-button/base-button.vue

@@ -41,13 +41,18 @@ export default {
         return {};
       },
     },
+    fontSize: {
+      type: String,
+      default: '',
+    },
   },
   computed: {
     customStyleOut() {
-      let { height, borderRadius } = this;
+      let { height, borderRadius, fontSize } = this;
       return {
         height,
         borderRadius,
+        fontSize,
         ...this.buttonStyle,
       };
     },
@@ -61,7 +66,3 @@ export default {
 };
 </script>
 
-<style lang="scss" scoped>
-.base-button {
-}
-</style>

src/components/purchase-notes/purchase-notes.vue

@@ -0,0 +1,53 @@
+<template>
+  <view class="purchase-notes">
+    <base-card padding="24rpx" marginBottom="24rpx">
+      <view class="fl-text-title u-m-b-32"> 购买须知 </view>
+      <view v-for="(item, index) in list" :key="index" class="fl-flex u-m-b-16">
+        <view class="purchase-title">{{ item.title }}</view>
+        <view class="purchase-value">{{ item.value }}</view>
+      </view>
+    </base-card>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'purchase-notes',
+  data() {
+    return {
+      list: [
+        {
+          title: '开发票',
+          value: '到店后由商家开具',
+        },
+        {
+          title: '退款时限',
+          value: '订单核销码有效期60天，过期后自动退  款。未使用/未到期前随时可退',
+        },
+        {
+          title: '使用说明',
+          value:
+            '商品/服务信息和预订服务由门店提传，为了更好保障您的权益，建议您使用线上支付，以便门店店与您产严生纠纷时能更好协助解决纠纷',
+        },
+      ],
+    };
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.purchase-notes {
+  .purchase-title {
+    width: 140rpx;
+    font-size: 26rpx;
+    color: #333;
+    line-height: 40rpx;
+  }
+  .purchase-value {
+    width: calc(100% - 140rpx);
+    font-size: 24rpx;
+    color: #999;
+    line-height: 40rpx;
+  }
+}
+</style>

src/design/common.css

@@ -129,4 +129,14 @@
 
 .bg-primary {
   background-color: #215ebe;
+}
+
+.text-through {
+  text-decoration: line-through
+}
+
+.fl-text-title {
+  font-size: 32rpx;
+  color: #333333;
+  font-weight: bold;
 }

src/pages.json

@@ -94,7 +94,7 @@
         {
           "path": "settleOrder/index",
           "style": {
-            "navigationBarTitleText": "结算订单"
+            "navigationStyle": "custom"
           }
         },
         {

src/pagesHome/settleOrder/index copy.vue

@@ -0,0 +1,604 @@
+<template>
+  <view class="container">
+    <view class="address-box">
+      <view class="address-left">
+        <view class="left-top">
+          <u-icon name="map" color="#000" size="18" bold></u-icon>
+          <view class="top-name"> 阿娟 18285564342 </view>
+        </view>
+        <view class="left-bottom">地址：贵州省贵阳市观山湖区高新区</view>
+      </view>
+      <view class="address-right">
+        <u-icon name="arrow-right" color="#000" size="14" bold></u-icon>
+      </view>
+    </view>
+
+    <view class="content-box">
+      <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 of init_list.cartItems" :key="item.goodsId">
+          <view class="item-left">
+            <image class="left-img" src="@/static/QR57a.jpg"></image>
+            <view class="left-text">
+              <view class="text-name">{{ item.goodsName }}</view>
+              <view class="text-number">×{{ item.quantity }}</view>
+              <view class="price-box">
+                <view class="price-box-left">
+                  <p class="price">￥{{ item.price }}</p>
+                  <span class="false-price"
+                    >￥{{ item.originalPrice ? item.originalPrice : 0 }}</span
+                  >
+                </view>
+                <view class="price-box-right">
+                  <u-number-box
+                    v-model="item.quantity"
+                    @change="valChange(item, $event)"
+                  ></u-number-box>
+                </view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <view class="message-box">
+        <view class="title"> 服务流程 </view>
+        <view class="process-box">
+          <view class="process-item" v-for="(itme, index) of 4" :key="index">
+            <view class="item-box">
+              <view class="item-top"></view>
+              <view class="item-bottom">线上开单</view>
+            </view>
+            <view class="gap-box" v-if="index != 3">
+              <u-gap height="1" bgColor="#C1D1FF"></u-gap>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <view class="message-box">
+        <view class="message-item">
+          <view class="item-left"> 订单总价 </view>
+          <view class="flex-end red-color" style="align-items: center">
+            <p style="margin-right: 20rpx; font-size: 36rpx; font-weight: bold">
+              ￥{{ orderParams.price.toFixed(2) }}
+            </p>
+            <p style="text-decoration: line-through; font-style: italic">
+              ( 已优惠￥{{ orderParams.discountPrice.toFixed(2) }} )
+            </p>
+          </view>
+        </view>
+      </view>
+
+      <view class="message-box">
+        <view class="message-item">
+          <view class="item-left"> 支付方式 </view>
+          <view class="item-right flex-end">
+            <span>在线支付</span>
+            <image class="right-img" src="@/static/order/ic_order_weixin.png"></image>
+          </view>
+        </view>
+      </view>
+
+      <view class="message-box">
+        <view class="message-name"> 购买须知 </view>
+        <view class="message-text">
+          <view class="text-item">
+            <view class="text-left">开发票</view>
+            <view class="text-right">到店后由商家开具</view>
+          </view>
+          <view class="text-item">
+            <view class="text-left">退款时限</view>
+            <view class="text-right"
+              >订单核销码有效期60天，过期后自动退款未使用/未到期前随时可退</view
+            >
+          </view>
+          <view class="text-item">
+            <view class="text-left">退款时限</view>
+            <view class="text-right"
+              >商品/服务信息和预订服务由门店提传，为了更好保障您的权益，建议您使用线上支付，以便门店店与您产严生纠纷时能更好协助解决纠纷。</view
+            >
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <view class="btn-box">
+      <view class="btn" @click="handlerSettleBtn"> 结算 </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import { generateOrder, getCartList, editGoodsNumb } from '@/api/client/business.js';
+import { successfulPayment } from '@/api/client/order.js';
+
+export default {
+  data() {
+    return {
+      coupon_show: false,
+      coupon_list: [],
+      init_list: {
+        cartItems: [],
+        merchantDTO: [],
+      },
+      phoneNumber: null, // 订购电话
+      goodsRemark: '', // 备注
+      merchantId: null,
+    };
+  },
+  mounted() {
+    this.handlerInitList();
+  },
+  onLoad(option) {
+    this.merchantId = option.ids;
+  },
+  computed: {
+    orderParams() {
+      let price = 0;
+      let originalPrice = 0;
+      let discountPrice = 0;
+      if (this.init_list.cartItems) {
+        this.init_list.cartItems.map(rs => {
+          price += Number(rs.price.toFixed(2) * rs.quantity);
+          originalPrice += Number(rs.originalPrice.toFixed(2) * rs.quantity);
+        });
+        discountPrice = originalPrice - price;
+      }
+      return {
+        price,
+        discountPrice,
+      };
+    },
+  },
+  methods: {
+    // 初始化列表接口
+    handlerInitList() {
+      getCartList(this.merchantId).then(res => {
+        this.init_list.cartItems = res.data.cartItems;
+        this.init_list.merchantDTO = res.data.merchantDTO;
+      });
+    },
+
+    // 结算按钮
+    handlerSettleBtn() {
+      let params = {
+        payType: '2',
+        cartIds: [],
+        merchantId: this.init_list.merchantDTO.id,
+      };
+      this.init_list.cartItems.map(rs => {
+        params.cartIds.push(rs.goodsId);
+      });
+      generateOrder(params).then(res => {
+        if (res.code === 'OK') {
+          this.handlerCallOrderBack(res.data.order.id);
+        } else {
+          uni.showToast({
+            title: res.msg,
+          });
+          return;
+        }
+      });
+    },
+    // 支付回调
+    handlerCallOrderBack(id) {
+      successfulPayment(id, {
+        payType: 2,
+      }).then(res => {
+        if (res.code == 'OK') {
+          uni.navigateTo({
+            url: '/pagesHome/settleStatus/index',
+          });
+        } else {
+          uni.showToast({
+            title: res.message,
+            icon: 'none',
+          });
+          return;
+        }
+      });
+    },
+
+    close() {
+      this.coupon_show = false;
+    },
+    // 点击展示优惠券pop
+    openCouponshow() {
+      this.coupon_show = true;
+    },
+    // 选择优惠券 点击确定按钮
+    handlerSelectCoupon() {
+      this.coupon_show = false;
+    },
+    valChange(item, e) {
+      editGoodsNumb(item.id, {
+        quantity: e.value,
+      }).then(res => {
+        console.log('@@@2res', res);
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.container {
+  background: linear-gradient(to bottom, #bacff5, #f2f4fa, #fff);
+  padding: 24rpx 32rpx 150rpx;
+  font-size: 28rpx;
+
+  .address-box {
+    border-radius: 16rpx;
+    background-color: #fff;
+    padding: 32rpx;
+    margin-bottom: 24rpx;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-shadow: 5px 5px 5px rgb(0, 0, 0, 0.1);
+    .address-left {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-around;
+      .left-top {
+        display: flex;
+        .top-name {
+          color: #333333;
+          font-weight: bold;
+          margin-left: 12rpx;
+        }
+      }
+      .left-bottom {
+        color: #999999;
+        font-size: 24rpx;
+        margin-top: 8rpx;
+      }
+    }
+  }
+  .content-box {
+    .message-box {
+      padding: 24rpx;
+      border-radius: 16rpx;
+      background-color: #fff;
+      margin-bottom: 20rpx;
+      box-shadow: 5px 5px 5px rgb(0, 0, 0, 0.1);
+
+      .message-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .item-left {
+          font-size: 32rpx;
+          font-weight: bold;
+        }
+
+        .item-right {
+          width: 60%;
+          align-items: center;
+
+          .right-img {
+            width: 50rpx;
+            height: 50rpx;
+            margin-left: 20rpx;
+          }
+        }
+      }
+
+      .couon-box {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        .coupon-left {
+          display: flex;
+          align-items: center;
+          font-size: 30rpx;
+
+          .img {
+            width: 50rpx;
+            height: 50rpx;
+            margin-right: 20rpx;
+          }
+        }
+
+        .coupon-right {
+          display: flex;
+          align-items: center;
+        }
+      }
+
+      .goods-title {
+        font-size: 32rpx;
+        color: #333333;
+        font-weight: bold;
+      }
+
+      .goods-item {
+        margin-bottom: 30rpx;
+        display: flex;
+        align-items: center;
+        width: 100%;
+
+        .item-left {
+          display: flex;
+
+          .left-img {
+            width: 160rpx;
+            height: 160rpx;
+            border-radius: 10rpx;
+          }
+
+          .left-text {
+            display: flex;
+            flex-direction: column;
+            justify-content: space-around;
+            margin-left: 20rpx;
+            width: 452rpx;
+
+            .text-name {
+              font-weight: bold;
+              font-size: 30rpx;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              color: #333333;
+            }
+
+            .price-box {
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              width: 100%;
+
+              .price-box-left {
+                display: flex;
+                align-items: center;
+
+                .price {
+                  font-size: 32rpx;
+                  font-weight: bold;
+                  margin-right: 20rpx;
+                  color: #333333;
+                }
+
+                .false-price {
+                  color: #999999;
+                  text-decoration: line-through;
+                  font-size: 24rpx;
+                }
+              }
+
+              .price-box-right {
+              }
+            }
+          }
+        }
+      }
+
+      .message-name {
+        font-size: 32rpx;
+        font-weight: bold;
+      }
+
+      .message-text {
+        margin-top: 20rpx;
+
+        .text-item {
+          display: flex;
+          margin-bottom: 18rpx;
+          width: 100%;
+
+          .text-left {
+            color: #333333;
+            font-size: 26rpx;
+            width: 18%;
+          }
+
+          .text-right {
+            color: #999999;
+            font-size: 24rpx;
+            margin-left: 16rpx;
+            width: 80%;
+            display: flex;
+            text-align: left;
+          }
+        }
+      }
+    }
+
+    .title {
+      font-size: 32rpx;
+      color: #333333;
+      font-weight: bold;
+    }
+
+    .process-box {
+      display: flex;
+      justify-content: space-around;
+      margin-top: 24rpx;
+
+      .process-item {
+        display: flex;
+
+        .item-box {
+          text-align: center;
+
+          .item-top {
+            width: 80rpx;
+            height: 80rpx;
+            background: linear-gradient(180deg, #e0e6ff 0%, #ffffff 100%);
+            border-radius: 50%;
+            margin: 0 auto;
+          }
+
+          .item-bottom {
+            color: #333333;
+            margin-top: 16rpx;
+          }
+        }
+
+        .gap-box {
+          width: 56rpx;
+          margin-top: 25%;
+        }
+      }
+    }
+  }
+}
+
+.flex-end {
+  display: flex;
+  justify-content: flex-end;
+}
+
+::v-deep .u-border {
+  border-style: none !important;
+}
+
+.pop-box {
+  height: 850rpx;
+  background-color: #f4f4f4;
+  position: relative;
+
+  .pop-title {
+    font-weight: bold;
+    font-size: 36rpx;
+    text-align: center;
+    padding: 20rpx;
+    background: linear-gradient(to bottom, #fff, #fff, #f4f4f4);
+  }
+
+  .pop-coupon-box {
+    max-height: 650rpx;
+    overflow-y: scroll;
+  }
+
+  .pop-item {
+    padding: 20rpx;
+    margin-bottom: 10rpx;
+
+    .item-box {
+      padding: 20rpx;
+      border-radius: 20rpx 20rpx 0 0;
+      background-color: #fff;
+      display: flex;
+      align-items: center;
+      box-shadow: 0rpx 7rpx 20rpx 10rpx rgba(0, 0, 0, 0.1);
+      background-image: radial-gradient(
+          circle at left bottom,
+          #f4f4f4,
+          #f4f4f4 40rpx,
+          transparent 16rpx
+        ),
+        radial-gradient(circle at right bottom, #f4f4f4, #f4f4f4 55rpx, transparent 16rpx),
+        radial-gradient(circle at right top, #f4f4f4, #f4f4f4 35rpx, transparent 16rpx);
+
+      .item-left {
+        display: flex;
+        width: 70%;
+
+        .img-box,
+        .left-img {
+          width: 160rpx;
+          height: 160rpx;
+          border-radius: 20rpx;
+        }
+
+        .left-text {
+          margin-left: 20rpx;
+
+          .text-title {
+            font-size: 34rpx;
+            width: 350rpx;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            color: #000;
+          }
+
+          .text {
+            font-size: 26rpx;
+            color: #666666;
+            margin-top: 10rpx;
+          }
+        }
+      }
+
+      .item-right {
+        text-align: center;
+        width: 30%;
+
+        .price {
+          font-size: 56rpx;
+
+          .price-symbol {
+            font-size: 24rpx;
+          }
+        }
+
+        .text {
+          color: #656565;
+          margin-top: 20rpx;
+        }
+      }
+    }
+
+    .item-bottom {
+      padding: 20rpx 50rpx 20rpx 30rpx;
+      background-color: #fff;
+      border-radius: 0 0 20rpx 20rpx;
+      box-shadow: 0rpx 10rpx 15rpx 0rpx rgba(0, 0, 0, 0.1);
+      background-image: radial-gradient(
+          circle at left top,
+          #f4f4f4,
+          #f4f4f4 40rpx,
+          transparent 16rpx
+        ),
+        radial-gradient(circle at right top, #f4f4f4, #f4f4f4 55rpx, transparent 16rpx);
+      border-top: 1px dashed #f4f4f4;
+      color: #b1b4b9;
+      font-size: 26rpx;
+      font-style: oblique;
+      text-indent: 32.4px;
+    }
+  }
+
+  .pop-bottom {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+
+    .coupon-btn {
+      width: 100%;
+      background-color: #ffde21 !important;
+      color: #000;
+      font-size: 28rpx;
+      // height:80rpx;
+      // line-height: 80rpx;
+      border-radius: 20rpx;
+    }
+  }
+}
+
+.btn-box {
+  width: 100%;
+  position: fixed;
+  bottom: 5%;
+
+  .btn {
+    width: calc(100% - 60rpx);
+    background: linear-gradient(to right, #1d4350, #a43931);
+    color: #fff;
+    border-radius: 40rpx;
+    text-align: center;
+    font-size: 32rpx;
+    padding: 20rpx;
+    box-sizing: border-box;
+  }
+}
+</style>

src/pagesHome/settleOrder/index.vue

@@ -1,111 +1,123 @@
 <template>
-  <view class="container">
-    <view class="address-box">
-      <view class="address-left">
-        <view class="left-top">
-          <u-icon name="map" color="#000" size="18" bold></u-icon>
-          <view class="top-name"> 阿娟 18285564342 </view>
+  <view class="settle-order">
+    <page-navbar bgColor="#fff" title="提交订单"></page-navbar>
+    <view class="settle-order-main">
+      <base-card padding="32rpx" marginBottom="24rpx">
+        <view class="fl-flex-item">
+          <view>
+            <view class="fl-flex u-m-b-16">
+              <u-icon name="map" color="#333" size="18" bold></u-icon>
+              <view class="f-s-28 text-333 u-m-l-8"> 阿娟 18285564342 </view>
+            </view>
+            <view class="f-s-24 text-999">地址：贵州省贵阳市观山湖区高新区</view>
+          </view>
+          <u-icon
+            name="arrow-right"
+            color="#000"
+            size="14"
+            bold
+            @click="$Router.push('/PageMine/address/index')"
+          ></u-icon>
         </view>
-        <view class="left-bottom">地址：贵州省贵阳市观山湖区高新区</view>
-      </view>
-      <view class="address-right">
-        <u-icon name="arrow-right" color="#000" size="14" bold></u-icon>
-      </view>
-    </view>
-
-    <view class="content-box">
-      <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 of init_list.cartItems" :key="item.goodsId">
-          <view class="item-left">
-            <image class="left-img" src="@/static/QR57a.jpg"></image>
-            <view class="left-text">
-              <view class="text-name">{{ item.goodsName }}</view>
-              <view class="text-number">×{{ item.quantity }}</view>
-              <view class="price-box">
-                <view class="price-box-left">
-                  <p class="price">￥{{ item.price }}</p>
-                  <span class="false-price"
-                    >￥{{ item.originalPrice ? item.originalPrice : 0 }}</span
-                  >
-                </view>
-                <view class="price-box-right">
-                  <u-number-box
-                    v-model="item.quantity"
-                    @change="valChange(item, $event)"
-                  ></u-number-box>
-                </view>
+      </base-card>
+      <base-card padding="24rpx" marginBottom="24rpx">
+        <view class="fl-text-title u-m-b-32"> {{ init_list.merchantDTO.name }} </view>
+
+        <view
+          class="fl-flex u-m-b-24"
+          v-for="item of init_list.cartItems"
+          :key="item.goodsId"
+        >
+          <base-img
+            src="/static/img.jpg"
+            width="160rpx"
+            height="160rpx"
+            borderRadius="16rpx"
+          ></base-img>
+          <view class="u-m-l-24" style="flex: 1">
+            <view class="f-s-28 text-333 u-m-b-8">{{ item.goodsName }}</view>
+            <view class="f-s-24 text-333 u-m-b-38">×{{ item.quantity }}</view>
+            <view class="fl-flex-item">
+              <view>
+                <text class="f-s-28 text-333 text-bold">￥{{ item.price }}</text>
+                <text class="f-s-24 text-999 text-through">
+                  ￥{{ item.originalPrice ? item.originalPrice : 0 }}
+                </text>
               </view>
+              <u-number-box v-model="item.quantity" @change="valChange(item, $event)" />
             </view>
           </view>
         </view>
-      </view>
-
-      <view class="message-box">
-        <view class="title"> 服务流程 </view>
-        <view class="process-box">
-          <view class="process-item" v-for="(itme, index) of 4" :key="index">
-            <view class="item-box">
-              <view class="item-top"></view>
-              <view class="item-bottom">线上开单</view>
+        <view class="fl-flex fl-align-center">
+          <view class="f-s-28 text-333">订单备注</view>
+          <u--input placeholder="请输入内容" border="surround" v-model="value"></u--input>
+        </view>
+      </base-card>
+
+      <base-card padding="24rpx" marginBottom="24rpx">
+        <view class="fl-text-title u-m-b-32"> 服务流程 </view>
+        <view class="fl-flex-item">
+          <view class="fl-flex" v-for="(item, index) of submitList" :key="index">
+            <view class="direction">
+              <u--image
+                :src="`/static/pagesHome/${item.img}.png`"
+                width="80rpx"
+                height="80rpx"
+              ></u--image>
+              <view class="text-333 u-m-t-16">{{ item.name }}</view>
             </view>
-            <view class="gap-box" v-if="index != 3">
+            <view style="width: 56rpx; margin-top: 25%" v-if="index != 3">
               <u-gap height="1" bgColor="#C1D1FF"></u-gap>
             </view>
           </view>
         </view>
-      </view>
-
-      <view class="message-box">
-        <view class="message-item">
-          <view class="item-left"> 订单总价 </view>
-          <view class="flex-end red-color" style="align-items: center">
-            <p style="margin-right: 20rpx; font-size: 36rpx; font-weight: bold">
-              ￥{{ orderParams.price.toFixed(2) }}
-            </p>
-            <p style="text-decoration: line-through; font-style: italic">
-              ( 已优惠￥{{ orderParams.discountPrice.toFixed(2) }} )
-            </p>
+      </base-card>
+
+      <base-card padding="24rpx" marginBottom="24rpx">
+        <view class="fl-text-title u-m-b-32"> 订单总价 </view>
+        <view class="fl-flex u-m-b-12" style="color: #ff412e">
+          <view class="u-m-r-20 f-s-36 text-bold"
+            >￥{{ orderParams.price.toFixed(2) }}</view
+          >
+          <view class="f-s-30 fl-align-center text-through">
+            ( 已优惠￥{{ orderParams.discountPrice.toFixed(2) }} )
           </view>
         </view>
-      </view>
-
-      <view class="message-box">
-        <view class="message-item">
-          <view class="item-left"> 支付方式 </view>
-          <view class="item-right flex-end">
-            <span>在线支付</span>
-            <image class="right-img" src="@/static/order/ic_order_weixin.png"></image>
+      </base-card>
+
+      <base-card padding="24rpx" marginBottom="24rpx">
+        <view class="fl-text-title u-m-b-32"> 支付方式 </view>
+        <view class="fl-flex-item">
+          <view class="fl-flex fl-align-center">
+            <u--image
+              src="/static/pagesHome/order_weixin.png"
+              width="40rpx"
+              height="40rpx"
+            ></u--image>
+            <view class="f-s-26 text-333 u-m-l-8">微信在线支付</view>
           </view>
+          <u--image src="/static/pagesHome/select.png" width="32rpx" height="32rpx" />
         </view>
-      </view>
+      </base-card>
 
-      <view class="message-box">
-        <view class="message-name"> 购买须知 </view>
-        <view class="message-text">
-          <view class="text-item">
-            <view class="text-left">开发票</view>
-            <view class="text-right">到店后由商家开具</view>
-          </view>
-          <view class="text-item">
-            <view class="text-left">退款时限</view>
-            <view class="text-right"
-              >订单核销码有效期60天，过期后自动退款未使用/未到期前随时可退</view
-            >
-          </view>
-          <view class="text-item">
-            <view class="text-left">退款时限</view>
-            <view class="text-right"
-              >商品/服务信息和预订服务由门店提传，为了更好保障您的权益，建议您使用线上支付，以便门店店与您产严生纠纷时能更好协助解决纠纷。</view
-            >
-          </view>
-        </view>
+      <view style="margin-bottom: 200rpx">
+        <purchase-notes></purchase-notes>
       </view>
     </view>
 
-    <view class="btn-box">
-      <view class="btn" @click="handlerSettleBtn"> 结算 </view>
+    <view class="settleOrder-bottom fl-flex-item">
+      <view class="fl-flex fl-align-center">
+        <view class="f-s-28 text-333 u-m-r-10">应付</view>
+        <view style="color: #eb3636" class="f-s-36 text-bold">
+          <text class="f-s-24">￥</text>
+          300.00
+        </view>
+      </view>
+      <base-button
+        text="立即支付"
+        :buttonStyle="buttonStyle"
+        @click="handlerSettleBtn"
+      ></base-button>
     </view>
   </view>
 </template>
@@ -126,6 +138,24 @@ export default {
       phoneNumber: null, // 订购电话
       goodsRemark: '', // 备注
       merchantId: null,
+      submitList: [
+        {
+          img: 'submit-step1',
+          name: '线上支付',
+        },
+        {
+          img: 'submit-step2',
+          name: '预约时间',
+        },
+        {
+          img: 'submit-step3',
+          name: '到店核销',
+        },
+        {
+          img: 'submit-step4',
+          name: '完成离店',
+        },
+      ],
     };
   },
   mounted() {
@@ -151,6 +181,12 @@ export default {
         discountPrice,
       };
     },
+    buttonStyle() {
+      return {
+        width: '318rpx',
+        fontSize: '28rpx',
+      };
+    },
   },
   methods: {
     // 初始化列表接口
@@ -204,10 +240,7 @@ export default {
     close() {
       this.coupon_show = false;
     },
-    // 点击展示优惠券pop
-    openCouponshow() {
-      this.coupon_show = true;
-    },
+
     // 选择优惠券 点击确定按钮
     handlerSelectCoupon() {
       this.coupon_show = false;
@@ -224,381 +257,20 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.container {
-  background: linear-gradient(to bottom, #bacff5, #f2f4fa, #fff);
-  padding: 24rpx 32rpx 150rpx;
-  font-size: 28rpx;
-
-  .address-box {
-    border-radius: 16rpx;
-    background-color: #fff;
-    padding: 32rpx;
-    margin-bottom: 24rpx;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    box-shadow: 5px 5px 5px rgb(0, 0, 0, 0.1);
-    .address-left {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-around;
-      .left-top {
-        display: flex;
-        .top-name {
-          color: #333333;
-          font-weight: bold;
-          margin-left: 12rpx;
-        }
-      }
-      .left-bottom {
-        color: #999999;
-        font-size: 24rpx;
-        margin-top: 8rpx;
-      }
-    }
-  }
-  .content-box {
-    .message-box {
-      padding: 24rpx;
-      border-radius: 16rpx;
-      background-color: #fff;
-      margin-bottom: 20rpx;
-      box-shadow: 5px 5px 5px rgb(0, 0, 0, 0.1);
-
-      .message-item {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        .item-left {
-          font-size: 32rpx;
-          font-weight: bold;
-        }
-
-        .item-right {
-          width: 60%;
-          align-items: center;
-
-          .right-img {
-            width: 50rpx;
-            height: 50rpx;
-            margin-left: 20rpx;
-          }
-        }
-      }
-
-      .couon-box {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-
-        .coupon-left {
-          display: flex;
-          align-items: center;
-          font-size: 30rpx;
-
-          .img {
-            width: 50rpx;
-            height: 50rpx;
-            margin-right: 20rpx;
-          }
-        }
-
-        .coupon-right {
-          display: flex;
-          align-items: center;
-        }
-      }
-
-      .goods-title {
-        font-size: 32rpx;
-        color: #333333;
-        font-weight: bold;
-      }
-
-      .goods-item {
-        margin-bottom: 30rpx;
-        display: flex;
-        align-items: center;
-        width: 100%;
-
-        .item-left {
-          display: flex;
-
-          .left-img {
-            width: 160rpx;
-            height: 160rpx;
-            border-radius: 10rpx;
-          }
-
-          .left-text {
-            display: flex;
-            flex-direction: column;
-            justify-content: space-around;
-            margin-left: 20rpx;
-            width: 452rpx;
-
-            .text-name {
-              font-weight: bold;
-              font-size: 30rpx;
-              white-space: nowrap;
-              overflow: hidden;
-              text-overflow: ellipsis;
-              color: #333333;
-            }
-
-            .price-box {
-              display: flex;
-              justify-content: space-between;
-              align-items: center;
-              width: 100%;
-
-              .price-box-left {
-                display: flex;
-                align-items: center;
-
-                .price {
-                  font-size: 32rpx;
-                  font-weight: bold;
-                  margin-right: 20rpx;
-                  color: #333333;
-                }
-
-                .false-price {
-                  color: #999999;
-                  text-decoration: line-through;
-                  font-size: 24rpx;
-                }
-              }
-
-              .price-box-right {
-              }
-            }
-          }
-        }
-      }
-
-      .message-name {
-        font-size: 32rpx;
-        font-weight: bold;
-      }
-
-      .message-text {
-        margin-top: 20rpx;
-
-        .text-item {
-          display: flex;
-          margin-bottom: 18rpx;
-          width: 100%;
-
-          .text-left {
-            color: #333333;
-            font-size: 26rpx;
-            width: 18%;
-          }
-
-          .text-right {
-            color: #999999;
-            font-size: 24rpx;
-            margin-left: 16rpx;
-            width: 80%;
-            display: flex;
-            text-align: left;
-          }
-        }
-      }
-    }
-
-    .title {
-      font-size: 32rpx;
-      color: #333333;
-      font-weight: bold;
-    }
-
-    .process-box {
-      display: flex;
-      justify-content: space-around;
-      margin-top: 24rpx;
-
-      .process-item {
-        display: flex;
-
-        .item-box {
-          text-align: center;
-
-          .item-top {
-            width: 80rpx;
-            height: 80rpx;
-            background: linear-gradient(180deg, #e0e6ff 0%, #ffffff 100%);
-            border-radius: 50%;
-            margin: 0 auto;
-          }
-
-          .item-bottom {
-            color: #333333;
-            margin-top: 16rpx;
-          }
-        }
-
-        .gap-box {
-          width: 56rpx;
-          margin-top: 25%;
-        }
-      }
-    }
-  }
-}
-
-.flex-end {
-  display: flex;
-  justify-content: flex-end;
+.settle-order-main {
+  padding: 24rpx 32rpx;
 }
 
 ::v-deep .u-border {
   border-style: none !important;
 }
-
-.pop-box {
-  height: 850rpx;
-  background-color: #f4f4f4;
-  position: relative;
-
-  .pop-title {
-    font-weight: bold;
-    font-size: 36rpx;
-    text-align: center;
-    padding: 20rpx;
-    background: linear-gradient(to bottom, #fff, #fff, #f4f4f4);
-  }
-
-  .pop-coupon-box {
-    max-height: 650rpx;
-    overflow-y: scroll;
-  }
-
-  .pop-item {
-    padding: 20rpx;
-    margin-bottom: 10rpx;
-
-    .item-box {
-      padding: 20rpx;
-      border-radius: 20rpx 20rpx 0 0;
-      background-color: #fff;
-      display: flex;
-      align-items: center;
-      box-shadow: 0rpx 7rpx 20rpx 10rpx rgba(0, 0, 0, 0.1);
-      background-image: radial-gradient(
-          circle at left bottom,
-          #f4f4f4,
-          #f4f4f4 40rpx,
-          transparent 16rpx
-        ),
-        radial-gradient(circle at right bottom, #f4f4f4, #f4f4f4 55rpx, transparent 16rpx),
-        radial-gradient(circle at right top, #f4f4f4, #f4f4f4 35rpx, transparent 16rpx);
-
-      .item-left {
-        display: flex;
-        width: 70%;
-
-        .img-box,
-        .left-img {
-          width: 160rpx;
-          height: 160rpx;
-          border-radius: 20rpx;
-        }
-
-        .left-text {
-          margin-left: 20rpx;
-
-          .text-title {
-            font-size: 34rpx;
-            width: 350rpx;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-            color: #000;
-          }
-
-          .text {
-            font-size: 26rpx;
-            color: #666666;
-            margin-top: 10rpx;
-          }
-        }
-      }
-
-      .item-right {
-        text-align: center;
-        width: 30%;
-
-        .price {
-          font-size: 56rpx;
-
-          .price-symbol {
-            font-size: 24rpx;
-          }
-        }
-
-        .text {
-          color: #656565;
-          margin-top: 20rpx;
-        }
-      }
-    }
-
-    .item-bottom {
-      padding: 20rpx 50rpx 20rpx 30rpx;
-      background-color: #fff;
-      border-radius: 0 0 20rpx 20rpx;
-      box-shadow: 0rpx 10rpx 15rpx 0rpx rgba(0, 0, 0, 0.1);
-      background-image: radial-gradient(
-          circle at left top,
-          #f4f4f4,
-          #f4f4f4 40rpx,
-          transparent 16rpx
-        ),
-        radial-gradient(circle at right top, #f4f4f4, #f4f4f4 55rpx, transparent 16rpx);
-      border-top: 1px dashed #f4f4f4;
-      color: #b1b4b9;
-      font-size: 26rpx;
-      font-style: oblique;
-      text-indent: 32.4px;
-    }
-  }
-
-  .pop-bottom {
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-
-    .coupon-btn {
-      width: 100%;
-      background-color: #ffde21 !important;
-      color: #000;
-      font-size: 28rpx;
-      // height:80rpx;
-      // line-height: 80rpx;
-      border-radius: 20rpx;
-    }
-  }
-}
-
-.btn-box {
+.settleOrder-bottom {
   width: 100%;
+  height: 160rpx;
+  bottom: 0;
   position: fixed;
-  bottom: 5%;
-
-  .btn {
-    width: calc(100% - 60rpx);
-    background: linear-gradient(to right, #1d4350, #a43931);
-    color: #fff;
-    border-radius: 40rpx;
-    text-align: center;
-    font-size: 32rpx;
-    padding: 20rpx;
-    box-sizing: border-box;
-  }
+  background-color: #fff;
+  box-sizing: border-box;
+  padding: 32rpx 60rpx 80rpx 32rpx;
 }
 </style>