From 7454d7924b6260d3f9212c31b620e957c58d0b4e Mon Sep 17 00:00:00 2001
From: wuhui_zzw <1760308791@qq.com>
Date: Sun, 14 Jan 2024 19:00:13 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=EF=BC=9A=E5=85=91=E6=8D=A2?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=20=E6=B7=BB=E5=8A=A0=EF=BC=9A=E5=85=91?=
 =?UTF-8?q?=E6=8D=A2=E8=AE=B0=E5=BD=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/exchange.js                               |  16 +
 pages.json                                    |  14 +-
 pages/users/online_payment/exchange/index.vue | 668 ++++++++++++++++++
 .../users/online_payment/exchange/record.vue  |  87 +++
 4 files changed, 783 insertions(+), 2 deletions(-)
 create mode 100644 pages/users/online_payment/exchange/index.vue
 create mode 100644 pages/users/online_payment/exchange/record.vue

diff --git a/api/exchange.js b/api/exchange.js
index b73eab2..cbe4cde 100644
--- a/api/exchange.js
+++ b/api/exchange.js
@@ -7,3 +7,19 @@ export function searchMer(data) {
 export function onlinePayment(data) {
 	return request.get("onlinePayment/createOrder",data);
 }
+// 提货处理 - 获取用户信息
+export function pointUserInfo() {
+	return request.get("exchange/userHold");
+}
+// 提货处理 - 获取提货点信息
+export function pointList(data) {
+	return request.get("exchange/pointList",data);
+}
+// 提货处理 - 提货处理
+export function confirmExchange(data) {
+	return request.get("exchange/exchangeHandle",data);
+}
+// 提货处理 - 提货记录
+export function exchangeRecord(data) {
+	return request.get("exchange/exchangeRecord",data);
+}
diff --git a/pages.json b/pages.json
index 1c0b563..4e31a82 100644
--- a/pages.json
+++ b/pages.json
@@ -527,12 +527,22 @@
 					"style": {
 						"navigationBarTitleText": "在线买单"
 					}
+				},
+				{
+					"path": "online_payment/exchange/index",
+					"style": {
+						"navigationBarTitleText": "商品兑换"
+					}
+				},
+				{
+					"path": "online_payment/exchange/record",
+					"style": {
+						"navigationBarTitleText": "兑换记录"
+					}
 				}
 
 
 
-
-
 			]
 		},
 		{
diff --git a/pages/users/online_payment/exchange/index.vue b/pages/users/online_payment/exchange/index.vue
new file mode 100644
index 0000000..a0ff41d
--- /dev/null
+++ b/pages/users/online_payment/exchange/index.vue
@@ -0,0 +1,668 @@
+<template>
+	<view :style="viewColor">
+    <!--具体内容-->
+		<view class='content-box'>
+      <!-- 顶部内容 -->
+      <view class="top">
+        <view class="left">
+          <view class="name">提货点：{{ point_info.title || '请选择提货点' }}</view>
+          <view class="change-btn" @click="showPointPopup">{{ point_info.id > 0 ? '选择' : '切换' }}</view>
+        </view>
+        <view class="right" @click="goMenuPage('/pages/users/online_payment/exchange/record')">兑换记录</view>
+      </view>
+      <view class="top" v-if="point_info.id > 0">
+        <view class="left">
+          <view class="name">操作员：{{ (staff_info.nickname || staff_info.real_name || staff_info.uid) || '请选择操作员' }}</view>
+          <view class="change-btn" @click="showStaffPopup" v-if="Object.values(staff_list).length > 1">
+            {{ staff_info.uid > 0 ? '选择' : '切换' }}
+          </view>
+        </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.total_money" type='number' step="0.01" placeholder="0.00" />
+          </view>
+          <view class="info-box">
+            <view class="info-title">剩余额度</view>
+            <view class="info-value">{{ pointUserInfo.available }}</view>
+          </view>
+          <view class="info-box">
+            <view class="info-title">剩余积分</view>
+            <view class="info-value">{{ pointUserInfo.available_integral }}</view>
+          </view>
+          <view class="info-box" v-if="pay_info.use_integral > 0">
+            <view class="info-title">使用积分</view>
+            <view class="info-value">{{ pay_info.use_integral }}</view>
+          </view>
+          <view class="info-box" v-if="pay_info.diff_money > 0">
+            <view class="info-title">差价</view>
+            <view class="info-value">{{ pay_info.diff_money }}</view>
+          </view>
+          <view class="info-box" v-if="pay_info.diff_money_pay > 0">
+            <view class="info-title">应补现金</view>
+            <view class="info-value">{{ pay_info.diff_money_pay }}</view>
+          </view>
+        </view>
+      </view>
+      <!--提交按钮-->
+      <view class="pay-btn" v-if="pay_info.total_money > 0 && point_info.id > 0 && staff_info.uid > 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="selectedPoint" type="center">
+      <view class="point-content">
+        <view class="search-content">
+          <input class="money-input" v-model="point_search.address" type='text' placeholder="提货点名称/提货点地址" />
+          <view class="search-btn" @click="getPointList">搜索</view>
+          <view class="close-btn" @click="pointClosePopup">取消</view>
+        </view>
+        <view class="point-list">
+          <view class="point-box" v-for="(item,index) in point_list" :key="index">
+            <view class="left">
+              <!--<image class="image" :src="item.point_avatar || '/static/images/f.png'"></image>-->
+              <view class="point-info">
+                <view class="point-name">{{ item.title }}</view>
+                <view class="point-address">{{ item.address }}</view>
+              </view>
+            </view>
+            <view class="selected-btn" @click="selectedPoint(item)">选中</view>
+          </view>
+        </view>
+      </view>
+    </uni-popup>
+    <!--操作员选择-->
+    <uni-popup ref="selectedStaff" type="center">
+      <view class="point-content">
+        <view class="point-list">
+          <view class="point-box" v-for="(item,index) in staff_list" :key="index">
+            <view class="left">
+              <image class="image" :src="item.avatar || '/static/images/f.png'"></image>
+              <view class="point-info">
+                <view class="point-name">{{ item.nickname || item.real_name }}</view>
+                <view class="point-address">UID：{{ item.uid }}</view>
+              </view>
+            </view>
+            <view class="selected-btn" @click="selectedStaff(item)">选中</view>
+          </view>
+        </view>
+      </view>
+    </uni-popup>
+
+	</view>
+</template>
+
+<script>
+
+import { pointList,pointUserInfo,confirmExchange } from '@/api/exchange.js';
+import {mapGetters} from "vuex";
+import authorize from '@/components/Authorize';
+import emptyPage from '@/components/emptyPage.vue';
+import spread from "@/libs/spread";
+
+const app = getApp();
+export default {
+  components: {
+    authorize,
+    emptyPage,
+  },
+  data() {
+    return {
+      // 登录相关
+      isAuto: false, //没有授权的不会自动授权
+      isShowAuth: false,//是否隐藏授权
+      pointUserInfo: {},
+      // 商户相关
+      point_info:{},
+      point_list: {},
+      point_search: {
+        address: '',
+        uid: '',
+      },
+      // 操作员
+      staff_info:{},
+      staff_list: {},
+      // 提交信息
+      pay_info: {
+        total_money: 0.00,
+        use_integral: 0.00,
+        diff_money: 0.00,
+        diff_money_pay: 0.00,
+      },
+
+    };
+  },
+  computed: {
+    ...mapGetters(['isLogin', 'userInfo', 'viewColor'])
+  },
+  onLoad(options) {
+    // 判断：是否登录
+    if (!this.isLogin) {
+      // 未登录  授权登录
+      this.isAuto = true;
+      this.isShowAuth = true
+    }else{
+      // 已登录  获取信息
+      this.init();
+    }
+    // 关系处理
+    if(options.spread) spread(options.spread, this.isLogin)
+  },
+  onReachBottom: function () {},
+  watch: {
+    'pay_info.total_money': {
+      handler(val) {
+        let totalMoney = this.pay_info.total_money.toFixed(2);
+        console.log('总价值', totalMoney)
+        // 判断额度是否足够
+        if(Number(totalMoney) > Number(this.pointUserInfo.available)){
+          this.$util.Tips({
+            title: '总价值不能超过剩余额度'
+          });
+          this.pay_info.total_money = 0;
+          return false;
+        }
+        // 计算使用的相关信息
+        if(Number(totalMoney) > Number(this.pointUserInfo.available_integral)){
+          // 积分不足
+          this.pay_info.use_integral = Number(this.pointUserInfo.available_integral);
+          this.pay_info.diff_money = (Number(totalMoney) - Number(this.pay_info.use_integral)).toFixed(2);
+          this.pay_info.diff_money_pay = (Number(this.pay_info.diff_money) * Number(this.pointUserInfo.diff_rate) / 100).toFixed(2);
+        }else{
+          // 积分充足
+          this.pay_info.use_integral = Number(totalMoney);
+          this.pay_info.diff_money_pay = this.pay_info.diff_money = 0;
+        }
+      },
+      deep: false
+    }
+  },
+  methods: {
+    // 授权回调
+    onLoadFun() {
+      if(this.isLogin){
+        this.isShowAuth = false;
+        this.init();
+      }
+    },
+    // 授权关闭
+    authColse(e) {
+      this.isShowAuth = e
+    },
+    // 授权成功 获取用户信息
+    init () {
+      let _this = this;
+      // 获取用户信息
+      this.getUserInfo();
+      // 提货点选择初始化
+      let pointId = _this.point_info.id || 0;
+      if(pointId <= 0) _this.showPointPopup();
+    },
+    // 获取用户持有信息
+    getUserInfo(){
+      let _this = this;
+      pointUserInfo()
+          .then(res => {
+            _this.pointUserInfo = res.data || {};
+          })
+          .catch(err => {
+            this.$util.Tips({
+              title: err
+            });
+          });
+    },
+    // 提货点选择 - 显示弹框
+    showPointPopup(){
+      this.$refs.selectedPoint.open('center');
+      if(Object.keys(this.point_list).length <= 0) this.getPointList();
+    },
+    // 提货点选择 - 隐藏弹框
+    pointClosePopup(){
+      this.$refs.selectedPoint.close();
+    },
+    // 提货点选择 - 获取列表
+    getPointList(){
+      let _this = this;
+      pointList(this.point_search)
+          .then(res => {
+            _this.point_list = res.data || {};
+          })
+          .catch(err => {
+            this.$util.Tips({
+              title: err
+            });
+          });
+    },
+    // 提货点选择 - 选中
+    selectedPoint(item){
+      this.staff_info = this.$options.data().staff_info;
+      this.staff_list = Object.values(item.user_list);
+      this.point_info = item;
+      this.pointClosePopup();
+      // 判断：是否需要选择操作员
+      if(Object.values(this.staff_list).length > 1){
+        // 存在多个 需要选中
+        this.showStaffPopup();
+      }else{
+        // 存在单个 默认选中
+        this.staff_info = this.staff_list[0];
+      }
+    },
+    // 操作员选择 - 显示弹框
+    showStaffPopup(){
+      this.$refs.selectedStaff.open('center');
+    },
+    // 操作员选择 - 隐藏弹框
+    staffClosePopup(){
+      this.$refs.selectedStaff.close();
+    },
+    // 操作员选择 - 选中
+    selectedStaff(item){
+      this.staff_info = item;
+      this.staffClosePopup();
+    },
+    // 确认付款
+    confirmPayment(){
+      let _this = this;
+      let payInfo = Object.assign({},_this.pay_info);
+      payInfo.point_id = this.point_info.id;
+      payInfo.staff_uid = this.staff_info.uid;
+
+      uni.showLoading({
+        title: '处理中...',
+        mask: true
+      });
+      confirmExchange(payInfo)
+          .then(res => {
+            uni.hideLoading();
+            this.$util.Tips({
+              title: '操作成功！',
+              icon: 'success'
+            },{tab:1,url:'/pages/user/index'});
+          })
+          .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;
+        }
+      }
+      .info-box{
+        width: 100%;
+        height: 60rpx;
+        display: inline-flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        justify-content: space-between;
+        align-items: center;
+        .info-title{
+          font-size: 30rpx;
+          font-weight: bold;
+        }
+        .info-value{
+          font-size: 30rpx;
+        }
+      }
+    }
+  }
+  // 支付方式
+  .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;
+  }
+}
+.point-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;
+    }
+  }
+  .point-list{
+    overflow: auto;
+    height: calc(100% - 60rpx);
+    .point-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;
+        }
+        .point-info{
+          width: calc(100% - 90rpx);
+          .point-name{
+            height: 50rpx;
+            line-height: 50rpx;
+            font-size: 30rpx;
+            width: 100%;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+          .point-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;
+      }
+    }
+    .point-box:not(:last-child){
+      border: 2rpx solid #f6f6f6;
+    }
+  }
+}
+</style>
diff --git a/pages/users/online_payment/exchange/record.vue b/pages/users/online_payment/exchange/record.vue
new file mode 100644
index 0000000..a7d1244
--- /dev/null
+++ b/pages/users/online_payment/exchange/record.vue
@@ -0,0 +1,87 @@
+<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="title">{{ item.total_money }}</view>
+         <view class="time">{{ item.create_time }}</view>
+       </view>
+     </view>
+      <emptyPage v-else title="暂无记录～"></emptyPage>
+		</view>
+	</view>
+</template>
+
+<script>
+import { exchangeRecord } 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.exchangeRecord();
+  },
+  methods: {
+    // 提货记录
+    getPointList() {
+      let _this = this;
+      exchangeRecord({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: column;
+  flex-wrap: nowrap;
+  justify-content: center;
+  align-items: flex-start;
+  .title{
+    font-size: 30rpx;
+    font-weight: bold;
+  }
+  .time{
+    font-size: 26rpx;
+    color: #C1C1C1;
+  }
+}
+
+</style>