From 1d4298a1413e056074d3e9ae246de003cdea8219 Mon Sep 17 00:00:00 2001
From: wuhui_zzw <1760308791@qq.com>
Date: Tue, 26 Mar 2024 17:10:13 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=EF=BC=9A=E5=9C=A8=E7=BA=BF?=
 =?UTF-8?q?=E4=B9=B0=E5=8D=95=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/exchange.js                               |  13 +
 pages.json                                    |  15 +-
 pages/users/online_payment/payment/index.vue  | 865 ++++++++++++++++++
 pages/users/online_payment/payment/record.vue | 127 +++
 4 files changed, 1019 insertions(+), 1 deletion(-)
 create mode 100644 api/exchange.js
 create mode 100644 pages/users/online_payment/payment/index.vue
 create mode 100644 pages/users/online_payment/payment/record.vue

diff --git a/api/exchange.js b/api/exchange.js
new file mode 100644
index 0000000..96a033b
--- /dev/null
+++ b/api/exchange.js
@@ -0,0 +1,13 @@
+import request from "@/utils/request.js";
+// 在线买单 - 获取门店列表
+export function searchMer(data) {
+	return request.get("onlinePayment/searchMerList",data);
+}
+// 在线买单 - 发起支付
+export function onlinePayment(data) {
+	return request.get("onlinePayment/createOrder",data);
+}
+// 在线买单 - 买单记录
+export function onlinePaymentRecord(data) {
+	return request.get("onlinePayment/record",data);
+}
diff --git a/pages.json b/pages.json
index 0effc20..94623b5 100644
--- a/pages.json
+++ b/pages.json
@@ -514,12 +514,25 @@
 					"style": {
 						"navigationBarTitleText": "订单详情"
 					}
-				}, {
+				},
+				{
 					"path": "privacy/index",
 					"style": {
 						"navigationBarTitleText": "",
 						"enablePullDownRefresh": false
 					}
+				},
+				{
+					"path": "online_payment/payment/index",
+					"style": {
+						"navigationBarTitleText": "在线买单"
+					}
+				},
+				{
+					"path": "online_payment/payment/record",
+					"style": {
+						"navigationBarTitleText": "消费记录"
+					}
 				}
 			]
 		},
diff --git a/pages/users/online_payment/payment/index.vue b/pages/users/online_payment/payment/index.vue
new file mode 100644
index 0000000..637c158
--- /dev/null
+++ b/pages/users/online_payment/payment/index.vue
@@ -0,0 +1,865 @@
+<template>
+	<view :style="viewColor">
+    <!--具体内容-->
+		<view class='content-box'>
+      <!--顶部内容-->
+      <view class="top">
+        <view class="left">
+          <image class="image" :src="mer_info.mer_avatar || '/static/images/f.png'"></image>
+          <view class="name" @click="merShowPopup">{{ mer_info.mer_name || '请选择门店' }}</view>
+          <view class="change-btn" @click="merShowPopup" v-if="mer_info.mer_id > 0 && default_mer_id <= 0">切换</view>
+        </view>
+        <view class="right" @click="goMenuPage('/pages/users/online_payment/payment/record')">消费记录</view>
+      </view>
+      <!--买单金额-->
+      <view class="money">
+        <view class="top-bg-line"></view>
+        <view class="money-box">
+          <view class="title">买单金额</view>
+          <view class="input-box">
+            <view class="unit">¥</view>
+            <input class="money-input" v-model.number="pay_info.money" type='number' step="0.01" placeholder="0.00" />
+          </view>
+        </view>
+      </view>
+      <!--支付方式-->
+      <view class="pay-type">
+        <view class="box-title">支付方式</view>
+        <view class="box-content">
+          <radio-group name="pay_type" @change="changePayType">
+            <view class="pay-label" v-for="(item,index) in pay_list" :key="index" v-if="item.payStatus==1">
+              <label>
+                <view class="pay-item">
+                  <view class="left">
+                    <view :class="['iconfont','animated',item.icon]"></view>
+                    <view class="pay-item-info">
+                      <view class="pay-name">{{ item.name }}</view>
+                      <view class='tip'>
+                        {{item.title}}
+                        <block v-if="item.value == 'balance'">{{now_money}}</block>
+                        <block v-if="item.value == 'legumes_integral'">{{now_legumes_integral}}</block>
+                      </view>
+                    </view>
+                  </view>
+                  <view class="right">
+                    <radio :value="item.value" :checked="item.value == pay_info.pay_type ? true : false" />
+                  </view>
+                </view>
+              </label>
+            </view>
+          </radio-group>
+        </view>
+      </view>
+      <!--支付按钮-->
+      <view class="pay-btn" v-if="mer_info.mer_id > 0 && pay_info.money > 0" @click="confirmPayment">确认支付</view>
+      <view class="pay-btn not-btn" v-else>确认支付</view>
+		</view>
+    <!--授权登录-->
+    <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize>
+    <!--店铺选择-->
+    <uni-popup ref="selectedMer" type="center">
+      <view class="mer-content">
+        <view class="search-content">
+          <input class="money-input" v-model="mer_search.search_text" type='text' placeholder="商户名称/商户地址" />
+          <view class="search-btn" @click="getMerList">搜索</view>
+          <view class="close-btn" @click="merClosePopup">取消</view>
+        </view>
+        <view class="mer-list">
+          <view class="mer-box" v-for="(item,index) in mer_list" :key="index">
+            <view class="left">
+              <image class="image" :src="item.mer_avatar || '/static/images/f.png'"></image>
+              <view class="mer-info">
+                <view class="mer-name">{{ item.mer_name }}</view>
+                <view class="mer-address">{{ item.mer_address }}</view>
+              </view>
+            </view>
+            <view class="selected-btn" @click="selectedMer(item)">选中</view>
+          </view>
+        </view>
+      </view>
+    </uni-popup>
+
+
+	</view>
+</template>
+
+<script>
+
+import {onlinePayment, searchMer} from '@/api/exchange.js';
+import {mapGetters} from "vuex";
+import authorize from '@/components/Authorize';
+import emptyPage from '@/components/emptyPage.vue';
+import spread from "@/libs/spread";
+import {getUserInfo} from "@/api/user";
+
+const app = getApp();
+export default {
+  components: {
+    authorize,
+    emptyPage,
+  },
+  data() {
+    return {
+      // 登录相关
+      isAuto: false, //没有授权的不会自动授权
+      isShowAuth: false,//是否隐藏授权
+      // 商户相关
+      mer_info:{},
+      mer_list: {},
+      mer_search: {
+        mer_id: 0,
+        search_text: '',
+      },
+      // 买单相关
+      pay_info: {
+        money: 0.00,// 买单金额
+        pay_type: 'weixin',
+        // #ifdef H5
+        return_url: 'http://' + window.location.host + '/pages/users/order_list/index',
+        // #endif
+      },
+      default_mer_id: 0,
+      //支付方式
+      pay_list: [
+        {
+          "name": "微信支付",
+          "icon": "icon-weixin2",
+          value: 'weixin',
+          title: '微信快捷支付',
+          payStatus: 1,
+        },
+        {
+          name: "支付宝支付",
+          icon: "icon-icon34",
+          // #ifdef H5 || APP-PLUS
+          value: 'alipay',
+          // #endif
+          // #ifdef MP
+          value: 'alipayQr',
+          // #endif
+          title: '支付宝支付',
+          payStatus: this.$store.getters.globalData.alipay_open
+        },
+        {
+          "name": "余额支付",
+          "icon": "icon-icon-test",
+          value: 'balance',
+          title: '可用余额:',
+          payStatus: this.$store.getters.globalData.yue_pay_status,
+        },
+        {
+          "name": "线下支付",
+          "icon": "icon-yinhangqia",
+          value: 'offline',
+          title: '线下支付',
+          payStatus: 2,
+        },
+        {
+          "name": "积分支付",
+          "icon": "icon-jifen",
+          value: 'legumes_integral',
+          title: '可用积分:',
+          payStatus: 1,
+        },
+      ],
+      now_money: 0,
+      now_legumes_integral: 0,
+
+    };
+  },
+  computed: {
+    ...mapGetters(['isLogin', 'userInfo', 'viewColor'])
+  },
+  onLoad(options) {
+    // 二维码参数接收
+    if(options.scene){
+      // console.log("接收参数 - 未转义",options.scene)
+      var scene = this.$util.getUrlParams(decodeURIComponent(options.scene));
+      // console.log("接收参数 - 转义后",scene)
+      this.default_mer_id = scene.mer_id || 0;
+      this.mer_search.mer_id = scene.mer_id || 0;
+    }
+    // 判断：是否登录
+    if (!this.isLogin) {
+      // 未登录  授权登录
+      this.isAuto = true;
+      this.isShowAuth = true
+    }else{
+      // 已登录  获取信息
+      this.init();
+    }
+    // 关系处理
+    if(options.spread) spread(options.spread, this.isLogin)
+  },
+  onReachBottom: function () {},
+  methods: {
+    // 授权回调
+    onLoadFun() {
+      if(this.isLogin){
+        this.isShowAuth = false;
+        this.init();
+      }
+    },
+    // 授权关闭
+    authColse(e) {
+      this.isShowAuth = e
+    },
+    // 授权成功 获取用户信息
+    init () {
+      let _this = this;
+      // 门店选择初始化
+      let merId = _this.mer_info.mer_id || 0;
+      if(merId <= 0) _this.merShowPopup();
+      // 获取用户信息
+      getUserInfo().then(res => {
+        _this.now_money = res.data.now_money || 0;
+        _this.now_legumes_integral = res.data.legumes_integral || 0;
+      });
+    },
+    // 门店选择 - 显示弹框
+    merShowPopup(){
+      this.$refs.selectedMer.open('center');
+      if(Object.keys(this.mer_list).length <= 0) this.getMerList();
+    },
+    // 门店选择 - 隐藏弹框
+    merClosePopup(){
+      this.$refs.selectedMer.close();
+    },
+    // 门店选择 - 获取门店列表
+    getMerList(){
+      let _this = this;
+      searchMer(this.mer_search)
+          .then(res => {
+            _this.mer_list = res.data || {};
+            // 判断：是否存在默认商户  存在则使用默认商户，且不可变更
+            if(Number(_this.default_mer_id) > 0 && Object.values(_this.mer_list).length === 1){
+              this.selectedMer(_this.mer_list[0]);
+            }
+          })
+          .catch(err => {
+            this.$util.Tips({
+              title: err
+            });
+          });
+    },
+    // 门店选择 - 门店选中
+    selectedMer(item){
+      this.mer_info = item;
+      this.merClosePopup();
+    },
+    // 修改支付方式
+    changePayType(e){
+      this.pay_info.pay_type = e.detail.value || e.target.value;
+    },
+    // 确认付款
+    confirmPayment(){
+      let _this = this;
+      let payInfo = Object.assign({},_this.pay_info);
+      payInfo.mer_id = _this.mer_info.mer_id;
+      console.log('支付类型',payInfo.pay_type)
+      if (payInfo.pay_type == 'weixin') {
+        // #ifdef H5
+        payInfo.pay_type = _this.$wechat.isWeixin() ? 'weixin' : 'h5'
+        // #endif
+        // #ifdef MP
+        payInfo.pay_type = 'routine'
+        // #endif
+        // #ifdef APP-PLUS
+        payInfo.pay_type = 'weixin'
+        // #endif
+      }
+      // 支付方式为积分  判断积分是否充足
+      if(payInfo.pay_type == 'legumes_integral' && this.now_legumes_integral < this.pay_info.money){
+        uni.showToast({
+          title: '积分不足',
+          icon: 'none'
+        })
+        return false;
+      }
+
+
+      uni.showLoading({
+        title: '订单处理中...',
+        mask: true
+      });
+      onlinePayment(payInfo)
+          .then(res => {
+            let status = res.data.status,
+                orderId = res.data.result.order_id,
+                callback_key = res.data.result.pay_key,
+                jsConfig = res.data.result.config,
+                // goPages = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=' + res.message;
+                goPages = '/pages/users/online_payment/payment/record';
+            _this.orderPay = true;
+            uni.hideLoading();
+            switch (status) {
+              case 'ORDER_EXIST':
+              case 'EXTEND_ORDER':
+              case 'PAY_ERROR':
+              case 'error':
+                return _this.$util.Tips({
+                  title: res.message
+                }, {
+                  tab: 5,
+                  url: goPages
+                });
+                break;
+              case 'success':
+                return _this.$util.Tips({
+                  title: res.message,
+                  icon: 'success'
+                }, {
+                  tab: 5,
+                  url: goPages
+                });
+                break;
+              case 'alipay':
+              case "alipayQr":
+                uni.navigateTo({
+                  url: '/pages/order_pay_back/index?keyCode=' + callback_key + '&url=' +
+                      jsConfig
+                })
+                return;
+                break;
+                // #ifndef MP
+              case "wechat":
+              case "weixin":
+              case "weixinApp":
+                jsConfig.timeStamp = jsConfig.timestamp;
+                // #ifndef APP-PLUS
+                this.$wechat.pay(jsConfig).then(res => {
+                  return _this.$util.Tips({
+                    title: res.message,
+                    icon: 'success'
+                  }, {
+                    tab: 4,
+                    url: goPages
+                  });
+                }).catch(res => {
+                  if (res.errMsg == 'chooseWXPay:cancel') return _this.$util.Tips({
+                    title: '取消支付'
+                  }, {
+                    tab: 5,
+                    url: goPages + '&status=0'
+                  });
+                })
+                // #endif
+                // #ifdef APP-PLUS
+                let mp_pay_name=''
+                if(uni.requestOrderPayment){
+                  mp_pay_name='requestOrderPayment'
+                }else{
+                  mp_pay_name='requestPayment'
+                }
+                uni[mp_pay_name]({
+                  provider: 'wxpay',
+                  orderInfo: jsConfig,
+                  success: (e) => {
+                    // let url = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=支付成功';
+                    let url = '/pages/users/online_payment/payment/record';
+                    return _this.$util.Tips({
+                      title: '支付成功',
+                      icon: 'success'
+                    }, {
+                      tab: 4,
+                      url: url
+                    });
+                  },
+                  fail: (e) => {
+                    // let url = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=取消支付';
+                    let url = '/pages/users/online_payment/payment/record';
+                    return _this.$util.Tips({
+                      title: '取消支付',
+                    }, {
+                      tab: 4,
+                      url: url
+                    });
+                  },
+                  complete: () => {
+                    // let url = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=取消支付';
+                    let url = '/pages/users/online_payment/payment/record';
+
+                    return _this.$util.Tips({
+                      title: '',
+                    }, {
+                      tab: 4,
+                      url: url
+                    });
+                  },
+                });
+                // #endif
+                break;
+                // #endif
+                // #ifdef MP
+              case "routine":
+                jsConfig.timeStamp = jsConfig.timestamp;
+                _this.toPay = true;
+                let mp_pay_name=''
+                if(uni.requestOrderPayment){
+                  mp_pay_name='requestOrderPayment'
+                }else{
+                  mp_pay_name='requestPayment'
+                }
+                uni[mp_pay_name]({
+                  ...jsConfig,
+                  success: function(res) {
+                    uni.hideLoading();
+                    return _this.$util.Tips({
+                      title: '支付成功',
+                      icon: 'success'
+                    }, {
+                      tab: 5,
+                      url: goPages
+                    });
+                  },
+                  fail: function(e) {
+                    // let pages = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=取消支付'
+                    let url = '/pages/users/online_payment/payment/record';
+
+                    return _this.$util.Tips({
+                      title: '取消支付'
+                    }, {
+                      tab: 5,
+                      url: pages + '&status=0'
+                    });
+                  },
+                })
+                break;
+                // #endif
+              case "balance":
+                //余额
+                return _this.$util.Tips({
+                  title: res.msg
+                }, {
+                  tab: 5,
+                  url: goPages + '&status=1'
+                });
+                break;
+                // #ifdef H5
+              case 'h5':
+                let host = window.location.protocol + "//" + window.location.host;
+                // let url = `${host}/pages/order_pay_status/index?order_id=${orderId}&msg=${res.message}`
+                  let url = `${host}/pages/users/online_payment/payment/record`;
+                let eUrl = encodeURIComponent(url)
+                let jsurl = jsConfig.mweb_url || jsConfig.h5_url
+                let locations = `${jsurl}&redirect_url=${eUrl}`
+                setTimeout(() => {
+                  location.href = locations;
+                }, 100);
+                break;
+                // #endif
+                // #ifdef APP-PLUS
+              case 'alipayApp':
+                uni.requestPayment({
+                  provider: 'alipay',
+                  orderInfo: jsConfig,
+                  success: (e) => {
+                    return _this.$util.Tips({
+                      title: '支付成功',
+                      icon: 'success'
+                    }, {
+                      tab: 5,
+                      url: goPages
+                    });
+                  },
+                  fail: (e) => {
+                    // let pages = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=支付失败'
+                    let pages = '/pages/users/online_payment/payment/record';
+
+                    return _this.$util.Tips({
+                      title: '支付失败'
+                    }, {
+                      tab: 5,
+                      url: pages
+                    });
+                  },
+                  complete: () => {
+                    uni.hideLoading();
+                    // let pages = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=取消支付'
+                    let pages = '/pages/users/online_payment/payment/record';
+                    return _this.$util.Tips({
+                      title: ''
+                    }, {
+                      tab: 5,
+                      url: pages
+                    });
+                  },
+                });
+                break;
+                // #endif
+              default:
+                // let pages = '/pages/order_pay_status/index?order_id=' + orderId + '&msg=取消支付'
+                let pages = '/pages/users/online_payment/payment/record';
+                return _this.$util.Tips({
+                  title: '取消支付'
+                }, {
+                  tab: 5,
+                  url: pages + '&status=0'
+                });
+            }
+          })
+          .catch(err => {
+            uni.hideLoading();
+            this.$util.Tips({
+              title: err
+            });
+          });
+    },
+    // 跳转
+    goMenuPage(url) {
+      console.log(url)
+      if (this.isLogin) {
+        uni.navigateTo({
+          url
+        })
+      } else {
+        this.openAuto()
+      }
+    },
+
+  },
+  // #ifdef MP
+  // 分享给好友
+  onShareAppMessage () {
+    let pages = getCurrentPages();
+    let page = pages[pages.length - 1]
+    let shareData = {
+      title: '在线买单',
+      path: page.$page.fullPath || '/' + page.route,
+    };
+    // 判断：用户是否登录  已经登录则添加分享人信息，未登录则正常分享
+    if (this.isLogin) shareData.path = shareData.path + '?spread=' + this.uid;
+    // 返回最终的分享配置信息
+    return shareData
+  },
+  // 分享到朋友圈
+  onShareTimeline() {
+    let shareData = {
+      title: '在线买单',
+      query: {},
+    };
+    // 判断：用户是否登录  已经登录则添加分享人信息，未登录则正常分享
+    if (this.isLogin) shareData.query.spread = this.uid;
+    // 返回最终的分享配置信息
+    return shareData
+  },
+  // #endif
+}
+</script>
+
+<style scoped lang="scss">
+.content-box{
+  width: 100vw;
+  min-height: 100vh;
+  background-color: orange;
+  padding: 20rpx;
+  background: linear-gradient(to bottom, #1b79ff, #f6f6f6) no-repeat;
+  background-size: 100% 300rpx;
+  background-color: #f6f6f6;
+
+  // 公共内容
+  .box-title{
+    margin: 30rpx 0;
+    height: 50rpx;
+    line-height: 50rpx;
+    font-size: 28rpx;
+    padding-left: 20rpx;
+    font-weight: bold;
+    position: relative;
+  }
+  .box-title:after{
+    content: "";
+    position: absolute;
+    left: 0;
+    top: calc((50rpx - 30rpx) / 2);
+    width: 10rpx;
+    height: 30rpx;
+    background: #1777ff;
+  }
+  // 顶部内容
+  .top{
+    width: 100%;
+    height: 90rpx;
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    align-items: center;
+
+    .left{
+      width: calc(100% - 150rpx);
+      display: inline-flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      justify-content: flex-start;
+      align-items: center;
+      .image{
+        width: 70rpx;
+        height: 70rpx;
+        border-radius: 50%;
+        margin-right: 15rpx;
+      }
+      .name{
+        max-width: calc(100% - (70rpx + 15rpx + 80rpx + 15rpx));
+        font-size: 30rpx;
+        font-weight: bold;
+        color: #FFFFFF;
+      }
+      .change-btn{
+        width: 80rpx;
+        height: 40rpx;
+        text-align: center;
+        font-size: 24rpx;
+        border-radius: 40rpx;
+        display: inline-flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        justify-content: center;
+        align-items: center;
+        background-color: #409eff;
+        color: #fff;
+        margin-left: 15rpx;
+      }
+    }
+    .right{
+      width: 140rpx;
+      height: 46rpx;
+      line-height: 44rpx;
+      border-radius: 45rpx;
+      text-align: center;
+      font-size: 26rpx;
+      border: 2rpx solid #ffffff;
+      color: #FFFFFF;
+    }
+  }
+  // 买单金额
+  .money{
+    position: relative;
+    padding: 15rpx;
+    .top-bg-line{
+      width: 100%;
+      background-color: #1256ad;
+      height: 20rpx;
+      border-radius: 50rpx;
+      position: absolute;
+      left: 0;
+      top: 0;
+    }
+    .money-box{
+      background: #FFFFFF;
+      position: relative;
+      width: 100%;
+      top: -5rpx;
+      border-radius: 15rpx;
+      padding: 20rpx;
+      box-shadow: 0px 3px 5px 0px #ececec;
+      .title{
+        height: 60rpx;
+        line-height: 60rpx;
+        font-size: 26rpx;
+        font-weight: bold;
+      }
+      .input-box{
+        height: 70rpx;
+        display: inline-flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        justify-content: flex-start;
+        align-items: flex-end;
+        font-size: 50rpx;
+        font-weight: bold;
+        margin: 20rpx 0 30rpx 0;
+      }
+      .unit{
+        margin-right: 15rpx;
+      }
+      .money-input{
+        height: 70rpx;
+      }
+    }
+  }
+  // 支付方式
+  .pay-type{
+
+    .box-content{
+      .pay-label:not(:last-child){
+        margin-bottom: 20rpx;
+      }
+      .pay-item{
+        height: 120rpx;
+        padding: 20rpx;
+        width: 100%;
+        border: 2rpx solid #d9dce4;
+        border-radius: 15rpx;
+        display: inline-flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: center;
+        justify-content: space-around;
+        .left{
+          width: calc(100% - 80rpx);
+          display: inline-flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          align-items: center;
+          justify-content: flex-start;
+          .animated{
+            width: 44rpx;
+            height: 44rpx;
+            border-radius: 50%;
+            text-align: center;
+            line-height: 44rpx;
+            background-color: #fe960f;
+            color: #fff;
+            font-size: 30rpx;
+            margin-right: 15rpx;
+          }
+          .icon-weixin2 {
+            background-color: #41b035;
+          }
+          .icon-icon34 {
+            background-color: #4295D5;
+          }
+          .pay-item-info{
+            .pay-name{
+              text-align: left;
+              border-right: 1px solid #eee;
+              justify-content: left;
+            }
+            .tip{
+              text-align: left;
+              font-size: 26rpx;
+              color: #aaa;
+            }
+          }
+        }
+        .right{
+          width: 80rpx;
+          display: inline-flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          align-items: center;
+          justify-content: flex-end;
+        }
+      }
+    }
+  }
+  // 确认支付
+  .pay-btn{
+    width: calc(100% - (20rpx * 2));
+    background: #1777ff;
+    color: #FFFFFF;
+    border-radius: 15rpx;
+    font-size: 30rpx;
+    text-align: center;
+    height: 70rpx;
+    line-height: 70rpx;
+    position: absolute;
+    left: 20rpx;
+    bottom: 150rpx;
+  }
+  .not-btn{
+    background-color: #909399;
+    color: #fff;
+  }
+}
+.mer-content{
+  background: #FFFFFF;
+  width: 90vw!important;
+  height: 90vh!important;
+  padding: 15rpx;
+  border-radius: 20rpx;
+
+  .search-content{
+    width: 100%;
+    height: 60rpx;
+    line-height: 60rpx;
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-items: center;
+    justify-content: flex-start;
+    .money-input{
+      width: calc(100% - (100rpx * 2)) !important;
+      height: 60rpx;
+      line-height: 60rpx;
+    }
+    .search-btn{
+      width: 100rpx;
+      text-align: center;
+      font-size: 28rpx;
+      background-color: #409eff;
+      color: #fff;
+    }
+    .close-btn{
+      width: 100rpx;
+      text-align: center;
+      font-size: 28rpx;
+      background-color: #f56c6c;
+      color: #fff;
+    }
+  }
+  .mer-list{
+    overflow: auto;
+    height: calc(100% - 60rpx);
+    .mer-box{
+      display: inline-flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      align-items: center;
+      justify-content: space-between;
+      padding: 20rpx 0;
+      width: 100%;
+      .left{
+        width: calc(100% - 110rpx);
+        display: inline-flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-items: center;
+        justify-content: flex-start;
+        .image{
+          width: 70rpx;
+          height: 70rpx;
+          border-radius: 50%;
+          margin-right: 15rpx;
+        }
+        .mer-info{
+          width: calc(100% - 90rpx);
+          .mer-name{
+            height: 50rpx;
+            line-height: 50rpx;
+            font-size: 30rpx;
+            width: 100%;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+          .mer-address{
+            height: 40rpx;
+            line-height: 40rpx;
+            font-size: 26rpx;
+            color: #cccccc;
+            width: 100%;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+      }
+      .selected-btn{
+        width: 100rpx;
+        height: 50rpx;
+        line-height: 50rpx;
+        text-align: center;
+        font-size: 28rpx;
+        background-color: #67c23a;
+        color: #fff;
+        border-radius: 50rpx;
+      }
+    }
+    .mer-box:not(:last-child){
+      border: 2rpx solid #f6f6f6;
+    }
+  }
+}
+</style>
diff --git a/pages/users/online_payment/payment/record.vue b/pages/users/online_payment/payment/record.vue
new file mode 100644
index 0000000..ffc1a40
--- /dev/null
+++ b/pages/users/online_payment/payment/record.vue
@@ -0,0 +1,127 @@
+<template>
+	<view :style="viewColor">
+    <view class='content-box'>
+     <view v-if="Object.values(list).length > 0" class="content-list">
+       <view class="list-box" v-for="(item,index) in list" :key="index">
+         <view class="left">
+           <view class="title">
+             {{ item.mer_name }}
+             <view :class="['status',(item.status == 3 ? 'status-success' : 'status-error' )]">
+               {{ item.status == 3 ? '已完成' : '已失效' }}
+             </view>
+           </view>
+           <view class="time">{{ item.create_time }}</view>
+         </view>
+         <view class="right">-{{ item.pay_price }}</view>
+       </view>
+     </view>
+      <emptyPage v-else title="暂无记录～"></emptyPage>
+		</view>
+	</view>
+</template>
+
+<script>
+import { onlinePaymentRecord } from '@/api/exchange.js';
+import {mapGetters} from "vuex";
+import emptyPage from '@/components/emptyPage.vue';
+
+const app = getApp();
+export default {
+  components: {
+    emptyPage,
+  },
+  data() {
+    return {
+      list: [],
+      page: 1,
+      total_page: 1,
+
+    };
+  },
+  computed: {
+    ...mapGetters(['isLogin', 'userInfo', 'viewColor'])
+  },
+  onLoad(options) {
+    this.getPointList();
+  },
+  onReachBottom: function () {
+    this.getPointList();
+  },
+  methods: {
+    // 提货记录
+    getPointList() {
+      let _this = this;
+      onlinePaymentRecord({page: _this.page})
+          .then(res => {
+            let list = res.data.list || {};
+            if (Object.values(list).length > 0) {
+              _this.list = _this.$util.SplitArray(list, _this.list);
+              _this.$set(_this, 'list', _this.list);
+              _this.page++;
+            }
+          })
+          .catch(err => {
+            this.$util.Tips({
+              title: err
+            });
+          });
+    },
+
+
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.list-box{
+  width: 100%;
+  padding: 20rpx;
+  height: 120rpx;
+  display: inline-flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: center;
+  .left{
+    display: inline-flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    justify-content: center;
+    align-items: flex-start;
+    .title{
+      font-size: 30rpx;
+      font-weight: bold;
+      display: inline-flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      justify-content: flex-start;
+      align-items: center;
+      .status{
+        font-size: 24rpx;
+        font-weight: initial;
+        margin-left: 20rpx;
+        height: 35rpx;
+        line-height: 35rpx;
+        padding: 0 15rpx;
+        border-radius: 50rpx;
+      }
+      .status-success{
+        background-color: #13ce66;
+        color: #fff;
+      }
+      .status-error{
+        background-color: #ff4949;
+        color: #fff;
+      }
+    }
+    .time{
+      font-size: 26rpx;
+      color: #C1C1C1;
+    }
+  }
+  .right{
+    font-size: 40rpx;
+    color: #ff4949;
+  }
+}
+</style>