From 14c61d02f764e46a3c90a81b9c18f496f5843e66 Mon Sep 17 00:00:00 2001
From: Wik-T <812952667@qq.com>
Date: Fri, 27 May 2022 12:01:15 +0800
Subject: [PATCH] =?UTF-8?q?1.=E4=BF=AE=E6=94=B9=E8=AF=9D=E8=B4=B9=E7=A7=AF?=
 =?UTF-8?q?=E5=88=86=E6=8A=B5=E6=89=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 App.vue                                       |  16 +-
 Utils/Api.js                                  |   8 +-
 components/cj-slider/cj-slider.vue            | 372 ++++++++++++++++++
 pages/goods/refuel-confirm/refuel-confirm.vue |   2 +-
 subPages/recharge-centre/recharge-centre.vue  |  23 +-
 .../unionComfirmation/unionComfirmation.vue   | 371 +++++++++++------
 6 files changed, 643 insertions(+), 149 deletions(-)
 create mode 100644 components/cj-slider/cj-slider.vue

diff --git a/App.vue b/App.vue
index 48a6792..1fbcc6f 100644
--- a/App.vue
+++ b/App.vue
@@ -5,15 +5,15 @@
 			// brestUrl: 'http://192.168.3.4:9302/brest',
 			// imgUrl: 'https://192.168.3.4:9301/filesystem/',
 			//正式
-			url: 'https://hsg.dctpay.com/crest',
-			imgUrl: 'https://hsg.dctpay.com/filesystem/',
-			brestUrl : 'https://hsg.dctpay.com/brest',
-			imageWxImg:'https://hsg.dctpay.com/filesystem/wxApplets/',
+			// url: 'https://hsg.dctpay.com/crest',
+			// imgUrl: 'https://hsg.dctpay.com/filesystem/',
+			// brestUrl : 'https://hsg.dctpay.com/brest',
+			// imageWxImg:'https://hsg.dctpay.com/filesystem/wxApplets/',
 			//测试
-			// url: 'https://hsgcs.dctpay.com/crest',
-			// brestUrl : 'https://hsgcs.dctpay.com/brest',
-			// imgUrl: 'https://hsgcs.dctpay.com/filesystem/',
-			// imageWxImg:'https://hsgcs.dctpay.com/filesystem/wxApplets/',
+			url: 'https://hsgcs.dctpay.com/crest',
+			brestUrl : 'https://hsgcs.dctpay.com/brest',
+			imgUrl: 'https://hsgcs.dctpay.com/filesystem/',
+			imageWxImg:'https://hsgcs.dctpay.com/filesystem/wxApplets/',
 			userInfo: "",
 			brestUserInfo : '',
 			openId: '',
diff --git a/Utils/Api.js b/Utils/Api.js
index aef1d22..d0a5378 100644
--- a/Utils/Api.js
+++ b/Utils/Api.js
@@ -430,8 +430,12 @@ export const oilCardPay = params => {
 }
 //话费充值查询
 export const getListOutRechargePrice = params => {
-	return POST('GET', `${base}/outRechargePrice/getListOutRechargePrice`, params).then(res => res.data);
-}
+	return POST('GET', `${base}/outRechargePrice/getRechargePriceByList`, params).then(res => res.data);
+}
+//查询话费详情
+export const findById = params => {
+	return POST('GET', `${base}/outRechargePrice/findById`, params).then(res => res.data);
+}
 //提交订单
 export const orderToUNionPay = params => {
 	return POST('POST', `${base}/outRechargeOrder/orderToPay`, params).then(res => res.data);
diff --git a/components/cj-slider/cj-slider.vue b/components/cj-slider/cj-slider.vue
new file mode 100644
index 0000000..e0b13f6
--- /dev/null
+++ b/components/cj-slider/cj-slider.vue
@@ -0,0 +1,372 @@
+<template>
+  <view class="cj-slider" @mousemove="onSliMouseMove" @mouseup="onSliMouseUp">
+    <view class="mouse-move" :style="{height: moveHeight + 'rpx'}"></view>
+    <view class="cj-slider__line" :class="[disabled ? 'cj-slider--disabled' : '']" :style="{
+		backgroundColor: inactiveColor,
+    height: height + 'rpx'
+	}" style="border-radius: 8px;" ></view>
+    <view class="cj-slider__gap" :style="[
+				barStyle,
+				{
+					height: height + 'rpx',
+					backgroundColor: activeColor
+				}
+			]" style="border-radius: 8px;">
+     <!-- <view class="cj-slider__button-wrap" @mousedown="onMouseDown(1, $event)" @mousemove="onMouseMove($event)"
+        @mouseleave="onMouseLeave(1)" @mouseup="onMouseUp(1)" @touchstart="onTouchStart(1, $event)"
+        @touchmove="onTouchMove(1, $event)" @touchend="onTouchEnd(1)" @touchcancel="onTouchEnd">
+        <slot v-if="$slots.default  || $slots.$default" />
+        <view v-else class="cj-slider__button" :style="[blockStyle, {
+					height: blockWidth + 'rpx',
+					width: blockWidth + 'rpx',
+					backgroundColor: blockColor
+				}]"></view>
+      </view> -->
+      <view class="cj-slider__button-wrap2" @mousedown="onMouseDown(2, $event)" @mousemove="onMouseMove($event)"
+        @mouseleave="onMouseLeave(2)" @mouseup="onMouseUp(2)" @touchstart="onTouchStart(2, $event)"
+        @touchmove="onTouchMove(2, $event)" @touchend="onTouchEnd(2)" @touchcancel="onTouchEnd">
+        <slot v-if="$slots.default  || $slots.$default" />
+        <view v-else class="cj-slider__button" :style="[blockStyle, {
+      				height: blockWidth + 'rpx',
+      				width: blockWidth + 'rpx',
+      				backgroundColor: blockColor
+      			}]"></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+  /**
+   * slider 滑块选择器
+   * @property {Number | String} value 滑块默认值（默认[最小值,最大值]）
+   * @property {Number | String} min 最小值（默认0）
+   * @property {Number | String} max 最大值（默认100）
+   * @property {Number | String} step 步长（默认1）
+   * @property {Number | String} blockWidth 滑块宽度，高等于宽（30）
+   * @property {Number | String} height 滑块条高度，单位rpx（默认6）
+   * @property {String} inactiveColor 底部条背景颜色（默认#c0c4cc）
+   * @property {String} activeColor 底部选择部分的背景颜色（默认#2979ff）
+   * @property {String} blockColor 滑块颜色（默认#ffffff）
+   * @property {Object} blockStyle 给滑块自定义样式，对象形式
+   * @property {Boolean} disabled 是否禁用滑块(默认为false)
+   * @property {Number | String} moveHeight 鼠标离开滑块仍可滑动的区域高度，单位rpx(默认100)
+   * @event {Function} start 滑动触发
+   * @event {Function} moving 正在滑动中
+   * @event {Function} end 滑动结束
+   * @example <cj-slider v-model="value" />
+   */
+  export default {
+    name: 'cj-slider',
+    props: {
+      // 当前进度百分比值
+      value: {
+        type: Array,
+        default: []
+      },
+      // 是否禁用滑块
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      // 滑块宽度，高等于宽，单位rpx
+      blockWidth: {
+        type: [Number, String],
+        default: 30
+      },
+      // 最小值
+      min: {
+        type: [Number, String],
+        default: 0
+      },
+      // 最大值
+      max: {
+        type: [Number, String],
+        default: 100
+      },
+      // 步进值
+      step: {
+        type: [Number, String],
+        default: 1
+      },
+      // 滑块条高度，单位rpx
+      height: {
+        type: [Number, String],
+        default: 20
+      },
+      // 进度条的激活部分颜色
+      activeColor: {
+        type: String,
+        default: '#f3b43f'
+      },
+      // 进度条的背景颜色
+      inactiveColor: {
+        type: String,
+        default: '#f5f6f4'
+      },
+      // 滑块的背景颜色
+      blockColor: {
+        type: String,
+        default: '#ffffff'
+      },
+      // 用户对滑块的自定义颜色
+      blockStyle: {
+        type: Object,
+        default () {
+          return {};
+        }
+      },
+      // 鼠标可离开滑块后仍能滑动的范围高度
+      moveHeight: {
+        type: [Number, String],
+        default: '60'
+      }
+    },
+    data() {
+      return {
+        mouseLeave: false, // 鼠标移出了滑块
+        mouseType: 1, // 1 左滑块 2 右滑块
+        mouseDown: false, // 鼠标按下
+        startX: 0,
+        status: 'end',
+        newValue: 0,
+        distanceX: 0,
+        startValue: 0,
+        barStyle: {},
+        sliderRect: {
+          left: 0,
+          width: 0
+        }
+      };
+    },
+    created() {
+      // 如果不是长度为2的数组,默认值为[最小值, 最大值]
+      if (Object.prototype.toString.call(this.value) == '[object Array]' && this.value.length === 2) {
+        this.updateValue(this.value[0], this.value[1], false);
+      } else {
+        this.$emit('input', Array(this.min, this.max))
+      }
+    },
+    mounted() {
+      // 获取滑块条的尺寸信息
+      this.$uGetRect('.cj-slider').then(rect => {
+        this.sliderRect = rect;
+      });
+    },
+    methods: {
+      onTouchStart(type, event) {
+        if (this.disabled) return;
+        this.startX = 0;
+        // 触摸点集
+        let touches = event.touches[0];
+        // 触摸点到屏幕左边的距离
+        this.startX = touches.clientX;
+        // 此处的this.value虽为props值，但是通过$emit('input')进行了修改
+        this.startValue = type === 1 ? this.format(this.value[0]) : this.format(this.value[1]);
+        // 标示当前的状态为开始触摸滑动
+        this.status = 'start';
+      },
+      onMouseDown(type, event) {
+        if (this.disabled) return;
+        this.mouseDown = true;
+        this.mouseType = type
+        this.startX = event.clientX || 0;
+        this.startValue = type === 1 ? this.format(this.value[0]) : this.format(this.value[1]);
+        this.status = 'start';
+      },
+      onTouchMove(type, event) {
+        if (this.disabled) return;
+        // 连续触摸的过程会一直触发本方法，但只有手指触发且移动了才被认为是拖动了，才发出事件
+        // 触摸后第一次移动已经将status设置为moving状态，故触摸第二次移动不会触发本事件
+        if (this.status == 'start') this.$emit('start');
+        let touches = event.touches[0]
+        // 滑块的左边不一定跟屏幕左边接壤，所以需要减去最外层父元素的左边值
+        this.distanceX = touches.clientX - this.sliderRect.left
+        // 获得移动距离对整个滑块的百分比值，此为带有多位小数的值，不能用此更新视图
+        // 否则造成通信阻塞，需要每改变一个step值时修改一次视图
+        this.newValue = (this.distanceX / this.sliderRect.width) * (this.max - this.min) + this.min
+        this.status = 'moving'
+        // 发出moving事件
+        this.$emit('moving');
+        if (type === 1) {
+          this.updateValue(this.newValue, this.format(this.value[1]), true);
+        } else {
+          this.updateValue(this.format(this.value[0]), this.newValue, true);
+        }
+      },
+      onMouseMove(event) {
+        if (!this.mouseDown) return;
+        if (this.disabled) return;
+        if (this.status == 'start') this.$emit('start');
+        // 滑块的左边不一定跟屏幕左边接壤，所以需要减去最外层父元素的左边值
+        this.distanceX = event.clientX - this.sliderRect.left
+        // 获得移动距离对整个滑块的百分比值，此为带有多位小数的值，不能用此更新视图
+        // 否则造成通信阻塞，需要每改变一个step值时修改一次视图
+        this.newValue = (this.distanceX / this.sliderRect.width) * (this.max - this.min) + this.min
+        this.status = 'moving'
+        // 发出moving事件
+        this.$emit('moving');
+        if (this.mouseType === 1) {
+          this.updateValue(this.newValue, this.format(this.value[1]), true);
+        } else {
+          this.updateValue(this.format(this.value[0]), this.newValue, true);
+        }
+      },
+      onMouseLeave(type) {
+        this.mouseLeave = true
+      },
+      onTouchEnd(type) {
+        if (this.disabled) return;
+        if (this.status === 'moving') {
+          if (type === 1) {
+            this.updateValue(this.newValue, this.format(this.value[1]), true);
+          } else {
+            this.updateValue(this.format(this.value[0]), this.newValue, true);
+          }
+          this.$emit('end');
+        }
+        this.status = 'end';
+      },
+      onMouseUp(type) {
+        this.mouseDown = false;
+        this.mouseLeave = false;
+        if (this.disabled) return;
+        if (this.status === 'moving') {
+          if (type === 1) {
+            this.updateValue(this.newValue, this.format(this.value[1]), true);
+          } else {
+            this.updateValue(this.format(this.value[0]), this.newValue, true);
+          }
+          this.$emit('end');
+        }
+        this.status = 'end';
+      },
+      onSliMouseUp() {
+        // 鼠标在滑块范围内松开
+        this.mouseDown = false;
+        this.mouseLeave = false;
+      },
+      onSliMouseMove(e) {
+        // 监听整个滑动内的鼠标移动，因为PC端只能监听到小滑块内的移动，移动过快鼠标移出了小滑块则移动失败。
+        if (!this.mouseDown) return;
+        if (!this.mouseLeave) return;
+        this.onMouseMove(e)
+      },
+      updateValue(value, value2, drag) {
+        // 去掉小数部分，同时也是对step步进的处理
+        const widthB1 = this.format(value)
+        const widthB2 = this.format(value2)
+        const widthB1B = Math.round((widthB1 - this.min) * 100 / (this.max - this.min))
+        const widthB2B = Math.round((widthB2 - this.min) * 100 / (this.max - this.min))
+        // 不允许滑动的值超过max最大值，百分比也不能超过100
+        if (widthB1 > widthB2 || widthB2 > this.max || widthB2B > 100) return;
+        // 设置移动的百分比值
+        let barStyle = {
+          width: widthB2B - widthB1B + '%',
+          left: widthB1B + '%',
+        };
+        // 移动期间无需过渡动画
+        if (drag == true) {
+          barStyle.transition = 'none';
+        } else {
+          // 非移动期间，删掉对过渡为空的声明，让css中的声明起效
+          delete barStyle.transition;
+        }
+        // 修改value值，这里使用change改变，使用input H5桌面端会卡死，
+        this.$emit('input', Array(widthB1, widthB2));
+        this.barStyle = barStyle;
+      },
+      format(value) {
+        // 将小数变成整数，为了减少对视图的更新，造成视图层与逻辑层的阻塞
+        return Math.round(Math.max(this.min, Math.min(value, this.max)) / this.step) * this.step;
+      },
+      onClick(event) {
+        if (this.disabled) return;
+        // 直接点击滑块的情况，计算方式与onTouchMove方法相同
+        const widthB1 = this.value[0]
+        const widthB2 = this.value[1]
+        const value = this.format(((event.detail.x - this.sliderRect.left) / this.sliderRect.width) * (this.max - this
+            .min) +
+          this.min);
+        if (value < widthB1 || (value - widthB1) <= (widthB2 - value)) {
+          // 点击位置在左滑块的左边 || 点击位置在中间，且靠近左滑块 => 移动左滑块到该位置
+          this.updateValue(value, widthB2, false)
+        } else {
+          // 点击位置在右滑块的右边 || 点击位置在中间，且靠近右滑块 => 移动右滑块到该位置
+          this.updateValue(widthB1, value, false)
+        }
+      },
+      $uGetRect(selector, all) {
+        // $uGetRect为uView自带的节点查询简化方法
+        return new Promise(resolve => {
+          uni.createSelectorQuery().
+          in(this)[all ? 'selectAll' : 'select'](selector)
+            .boundingClientRect(rect => {
+              if (all && Array.isArray(rect) && rect.length) {
+                resolve(rect)
+              }
+              if (!all && rect) {
+                resolve(rect)
+              }
+            })
+            .exec()
+        })
+      },
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  .cj-slider {
+    position: relative;
+    // background-color: #ebedf0;
+
+    &__line {
+      position: absolute;
+      width: 100%;
+      background-color: #ebedf0;
+    }
+
+    &__gap {
+      position: relative;
+      // 动画有bug，暂时取消
+      // transition: width 0.2s;
+      background-color: #1989fa;
+    }
+
+    &__button {
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+      background-color: #fff;
+      cursor: pointer;
+    }
+
+    &__button-wrap {
+      position: absolute;
+      top: 50%;
+      left: 0;
+      transform: translate3d(-50%, -50%, 0);
+    }
+
+    &__button-wrap2 {
+      position: absolute;
+      top: 50%;
+      right: 0;
+      transform: translate3d(50%, -50%, 0);
+    }
+  }
+
+  .cj-slider--disabled {
+    opacity: 0.5;
+  }
+
+  .mouse-move {
+    position: fixed;
+    left: 0;
+    right: 0;
+    transform: translateY(-50%);
+    opacity: 0;
+  }
+</style>
diff --git a/pages/goods/refuel-confirm/refuel-confirm.vue b/pages/goods/refuel-confirm/refuel-confirm.vue
index 4835493..173edce 100644
--- a/pages/goods/refuel-confirm/refuel-confirm.vue
+++ b/pages/goods/refuel-confirm/refuel-confirm.vue
@@ -144,7 +144,7 @@
 
 		<view class="width100 mart15 fcor333 font16 fontwig6 paddleft10">重要说明</view>
 		<view class="width95 paddleft10 font14 fcor999	 mart5">1.<text
-				class="fcor089 fontwig6">请先加油后下单</text>,即您到站后,与工作人员确认油号,抢号后再付款。</view>
+				class="fcor089 fontwig6">请先加油后下单</text>,即您到站后,与工作人员确认油号,枪号后再付款。</view>
 		<view class="width95 paddleft10 font14 fcor999  mart5">
 			2.请勿先付款后加油,若您已下单付款。请于24小时内到加油站完成加油;若您48小时内未完成加油,请及时发起退单;逾期退单可能会退单失败。</view>
 		<view class="height80 width100"></view>
diff --git a/subPages/recharge-centre/recharge-centre.vue b/subPages/recharge-centre/recharge-centre.vue
index df3f9c8..c91fd87 100644
--- a/subPages/recharge-centre/recharge-centre.vue
+++ b/subPages/recharge-centre/recharge-centre.vue
@@ -20,8 +20,8 @@
 		<view class="list">
 			<view class="box" :class="{'on':item.id == inputAmountId}" v-for="(item,index) in amountList" :key="index"
 				@click="select(item)">
-				<view class="heTitle">{{item.price}}元</view>
-				<view class="font13 fcoreb5 fontwig6" v-if="item.status != 2 && item.discount != 100">{{item.discount}} 折</view>
+				<view class="heTitle">{{item.rechargePrice}}元</view>
+				<view class="font13 fcoreb5 fontwig6" v-if="item.status != 2">{{item.payPrice}}元</view>
 				<view class="font13 fcor999" v-if="item.status == 2">已售空</view>
 			</view>
 		</view>
@@ -135,7 +135,6 @@
 				inputAmount: '',
 				inputPhone: '',
 				amoutType: '',
-				codesVlues: '',
 				amountList: [],
 				price: '',
 				amoutstatus: '',
@@ -204,8 +203,8 @@
 		},
 		methods: {
 			select(amoutinfos) {
-				this.inputAmount = amoutinfos.realPrice;
-				this.price = amoutinfos.price;
+				this.inputAmount = amoutinfos.payPrice;
+				this.price = amoutinfos.rechargePrice;
 				this.inputAmountId = amoutinfos.id;
 				this.amoutstatus = amoutinfos.status;
 			},
@@ -239,9 +238,9 @@
 				showType = 1;
 				// #endif
 				let params = {
-					type: item,
+					operatorType: item,
 					regionId: app.globalData.cityId,
-					showType: showType,
+					platformId: showType,
 					rechargeType: this.swiperCurrent
 				}
 				getListOutRechargePrice(params).then(res => {
@@ -291,14 +290,6 @@
 					});
 					return false;
 				}
-				// let params = {
-				// 	"orderPrice": this.inputAmount,
-				// 	"payPrice": this.inputAmount,
-				// 	"rechargeContent": this.inputPhone,
-				// 	"rechargeModel": this.amoutType,
-				// 	"agentKey": this.codesVlues,
-				// 	"objectId": this.inputAmountId,
-				// }
 				uni.showToast({
 					title: '提交订单...',
 					icon: 'none',
@@ -307,7 +298,7 @@
 						uni.navigateTo({
 							url: '../unionComfirmation/unionComfirmation?orderPrice=' + that.price +
 								'&payPrice=' + that.inputAmount + '&rechargeContent=' + that.inputPhone +
-								'&rechargeModel=' + that.amoutType + '&agentKey=' + that.codesVlues +
+								'&rechargeModel=' + that.amoutType +
 								'&objectId=' + that.inputAmountId + '&rechargeType=' + that.swiperCurrent
 						})
 					}
diff --git a/subPages/unionComfirmation/unionComfirmation.vue b/subPages/unionComfirmation/unionComfirmation.vue
index e394b41..75c7823 100644
--- a/subPages/unionComfirmation/unionComfirmation.vue
+++ b/subPages/unionComfirmation/unionComfirmation.vue
@@ -46,38 +46,65 @@
 		</view>
 
 		<view class="width94 comorder mart10">
-			<view class="height50 width100 backcorfff">
-				<view class="width50 flleft fcor333 fontwig6 font16" style="padding-left: 4%;">
-					支付方式
+			<!-- 	<view class="fotct paddtop20 fcor666 font14 fontspec" style="margin-left: 30%;">抵扣金额 : ¥{{priceValue[1] / 10 /10}}
+			</view> -->
+			<view class="width92 alijusstart paddtop20">
+				<view class="width30 fcor333 fontwig6 font16">
+					积分抵扣
+				</view>
+				<view class="cj-slider">
+					<view class="flleft fotct font14 fcor666" style="width: 15%;">0</view>
+					<cj-slider style="width: 60%; float:left;" v-model="priceValue" :min="0" :max="availIntegal"
+						:step="1" :blockWidth="40" @start="blockStart" @moving="blockMoving" @end="blockEnd" />
+					<view class="flright fotrt font14 fcor666" style="width: 25%;">{{availIntegal}}</view>
 				</view>
 			</view>
-			<view class="width94 line1 mart5 marb5"></view>
-			<view class="height50 width100 backcorfff" @tap="paytype='jinbi'">
+			<view class="width94 line1 mart15 marb5"></view>
+			<view class="height50 width100 backcorfff">
 				<view class="width70 flleft fcor333 fontwig6 font16 text1" style="padding-left: 4%;">
-					积分支付<text class="font14 fcor666 margle">可用积分: {{user.gold}}</text>
+					抵扣金额
 				</view>
 				<view class="width20 flright fotrt paddtright10 font15 fontwig6 fcor666 alijun"
 					style="align-items: center;">
-					<radio :checked="paytype=='jinbi'" color="#0083f5" />
+					¥{{priceValue[1] / 100}}
 				</view>
 			</view>
 			<view class="width94 line1 mart5 marb5"></view>
-			<view class="height50 width100 backcorfff" @tap="paytype='weixin'">
+			<view class="height50 width100 backcorfff">
 				<view class="width50 flleft fcor333 fontwig6 font16" style="padding-left: 4%;">
-					微信支付
-				</view>
-				<view class="width40 flright fotrt paddtright10 font15 fontwig6 fcor666 alijun"
-					style="align-items: center;">
-					<radio :checked="paytype=='weixin'" color="#0083f5" />
+					支付方式
 				</view>
 			</view>
-			<view class="height50 width100 backcorfff" @tap="paytype='gonghuika'">
-				<view class="width70 flleft fcor333 fontwig6 font16 text1" style="padding-left: 4%;">
-					汇联通工会卡<text class="font14 fcor666 margle">可用余额: {{tongCardPrice}}元</text>
+			<view class="width100" v-for="(item,index) in paytypeList" :key="index">
+				<!-- <view class="width94 line1 mart5 marb5"></view>
+				<view class="height50 width100 backcorfff" @tap="paytype='jinbi'">
+					<view class="width70 flleft fcor333 fontwig6 font16 text1" style="padding-left: 4%;">
+						积分支付<text class="font14 fcor666 margle">可用积分: {{user.gold}}</text>
+					</view>
+					<view class="width20 flright fotrt paddtright10 font15 fontwig6 fcor666 alijun"
+						style="align-items: center;">
+						<radio :checked="paytype=='jinbi'" color="#0083f5" />
+					</view>
+				</view> -->
+				<view class="width94 line1 mart5 marb5" v-if="item == 2"></view>
+				<view class="height50 width100 backcorfff" @tap="paytype='2'" v-if="item == 2">
+					<view class="width50 flleft fcor666 fontwig6 font16" style="padding-left: 4%;">
+						微信支付
+					</view>
+					<view class="width40 flright fotrt paddtright10 font15 fontwig6 fcor666 alijun"
+						style="align-items: center;" v-if="isUse">
+						<radio :checked="paytype=='2'" color="#0083f5" />
+					</view>
 				</view>
-				<view class="width20 flright fotrt paddtright10 font15 fontwig6 fcor666 alijun"
-					style="align-items: center;">
-					<radio :checked="paytype=='gonghuika'" @click="changeRiado()" color="#0083f5" />
+				<view class="width94 line1 mart5 marb5" v-if="item == 3"></view>
+				<view class="height50 width100 backcorfff" @tap="paytype='3'" v-if="item == 3">
+					<view class="width70 flleft fcor666 fontwig6 font16 text1" style="padding-left: 4%;">
+						汇联通工会卡<text class="font14 fcor666 margle">可用余额: {{tongCardPrice}}元</text>
+					</view>
+					<view class="width20 flright fotrt paddtright10 font15 fontwig6 fcor666 alijun"
+						style="align-items: center;" v-if="isUse">
+						<radio :checked="paytype=='3'" @click="changeRiado()" color="#0083f5" />
+					</view>
 				</view>
 			</view>
 		</view>
@@ -85,12 +112,13 @@
 		<view class="width100 height60"></view>
 		<view class="footer">
 			<view class="settlement">
-				<view class="sum">实付:<view class="money" v-if="paytype == 'weixin' || paytype == 'gonghuika' ">
+				<!-- v-if="paytype == '2' || paytype == '3' " -->
+				<view class="sum">实付:<view class="money">
 						￥{{payPrice}}</view>
-					<view class="money aliitem" v-else>
+					<!-- <view class="money aliitem" v-else>
 						<image style="width: 15px;height: 15px;vertical-align: sub;" src="../../static/img/jfx.png">
 						</image>{{payPrice*100}}
-					</view>
+					</view> -->
 				</view>
 				<!-- #ifdef MP -->
 				<button class="btn" open-type="getPhoneNumber" v-if="user == null"
@@ -136,9 +164,11 @@
 		hltUnionCardPayUnion,
 		getHuiLianTongCardBalance,
 		loginByPhone,
-		getUserOrderPreList
+		getUserOrderPreList,
+		findById
 	} from '../../Utils/Api.js';
 	import wybPopup from '../../components/wyb-popup/wyb-popup.vue';
+	import cjSlider from '../../components/cj-slider/cj-slider.vue';
 	import ssPaymentPassword from '../../components/sanshui-payment-password';
 	let app = getApp();
 	// #ifdef H5
@@ -147,29 +177,20 @@
 	export default {
 		components: {
 			wybPopup,
+			cjSlider,
 			ssPaymentPassword
 		},
 		data() {
 			return {
-				buylist: [], //订单列表
-				goodsPrice: 0.0, //商品合计价格
-				sumPrice: 0.0, //用户付款价格
-				freight: 12.00, //运费
-				note: '', //备注
-				int: 1200, //抵扣积分
-				deduction: 0, //抵扣价格
-				couponId: '',
-				couponList: [],
-				UserNormalDiscountList: [],
-				imageUrl: app.globalData.imgUrl,
-				imagewxUrl: app.globalData.imageWxImg,
+				imageUrl: app.globalData.imgUrl,
+				imagewxUrl: app.globalData.imageWxImg,
 				imgadres1: 'arrive_time_img.jpeg',
 				deductionPrice: '0.00',
 				paytheprice: '',
 				radioStatus: true,
 				memDiscountId: '',
 				user: '',
-				paytype: 'weixin',
+				paytype: '',
 				PaymentPassword: '',
 				orderId: '',
 				jumpType: '',
@@ -181,10 +202,15 @@
 				saveprice: 0,
 				rechargeContent: '',
 				rechargeModel: '',
-				agentKey: '',
 				objectId: '',
 				OrderPreList: [],
-				reType: '' //充值类型
+				reType: '', //充值类型
+				rechargeDes: '', // 话费详情
+				paytypeList: [], //支付方式
+				priceValue: [0, 0], // 积分可以指定默认值
+				availIntegal: '', // 可用积分
+				isUse: true, // 是否禁用状态
+				isIntegral: false //是否使用积分
 
 			};
 		},
@@ -194,15 +220,15 @@
 			this.saveprice = options.payPrice;
 			this.rechargeContent = options.rechargeContent;
 			this.rechargeModel = options.rechargeModel;
-			this.agentKey = options.agentKey;
 			this.objectId = options.objectId;
 			this.reType = options.rechargeType;
 		},
 		onShow() {
 			let that = this;
-			that.paytype = 'weixin';
+			// that.paytype = '2';
 			that.user = app.globalData.userInfo;
 			that.findUser();
+			that.findById();
 			// #ifdef MP
 			that.getUserOrderPreList();
 			// #endif
@@ -211,6 +237,45 @@
 
 		},
 		methods: {
+			//查询详情
+			findById() {
+				uni.showLoading({
+					title: '加载中'
+				})
+				let showType;
+				// #ifdef H5
+				showType = 2;
+				// #endif
+				// #ifdef MP
+				showType = 1;
+				// #endif
+				let datas = {
+					platformId: showType,
+					id: this.objectId
+				}
+				findById(datas).then(res => {
+					if (res.return_code == '000000') {
+						uni.hideLoading();
+						this.rechargeDes = res.return_data;
+						this.paytypeList = res.return_data.productPayTypeString.split(',');
+						this.paytypeList = this.paytypeList.slice(0, this.paytypeList.length - 1);
+						if (res.return_data.integralDiscount == 100) {
+							let payprice = parseFloat(res.return_data.payPrice * 100).toFixed(0);
+							if (payprice > this.user.gold) {
+								// this.priceValue[1] = this.user.gold;
+								this.availIntegal = this.user.gold;
+							} else {
+								// this.priceValue[1] = payprice;
+								this.availIntegal = payprice;
+							}
+						} else {
+							let payprice1 = parseFloat(res.return_data.payPrice * 100).toFixed(0);
+							// this.priceValue[1] = payprice1;
+							this.availIntegal = payprice1;
+						}
+					}
+				});
+			},
 			//查询积分
 			findUser() {
 				let params;
@@ -266,26 +331,65 @@
 					this.memDiscountId = '';
 					this.payPrice = this.saveprice;
 					this.deductionPrice = '0.00';
+					// this.priceValue[1] = parseFloat(this.saveprice * 100).toFixed(0);
+					this.availIntegal = parseFloat(this.saveprice * 100).toFixed(0);
+					this.priceCaluc(this.saveprice);
+
 				} else { // 否则进行选中赋值
 					this.memDiscountId = item.id;
 					if (item.discountType == 1) {
 						//满减价格
 						this.deductionPrice = item.discountPrice;
-						this.payPrice = this.paytheprice - this.deductionPrice;
-
+						let oldprice = this.paytheprice - this.deductionPrice;
+						this.availIntegal = parseFloat(oldprice * 100).toFixed(0);
+						// this.priceValue[1] = parseFloat(this.payPrice * 100).toFixed(0);
+						this.priceCaluc(oldprice);
 					} else if (item.discountType == 2) {
 						//抵扣价格
 						this.deductionPrice = item.discountPrice;
-						this.payPrice = this.paytheprice - this.deductionPrice;
+						let oldprice = this.paytheprice - this.deductionPrice;
+						this.availIntegal = parseFloat(oldprice * 100).toFixed(0);
+						// this.priceValue[1] = parseFloat(this.payPrice * 100).toFixed(0);
+						this.priceCaluc(oldprice);
 					} else if (item.discountType == 3) {
 						// 打折
 						this.deductionPrice = parseFloat(this.paytheprice - (this.paytheprice * item.discountPrice))
 							.toFixed(2);
-						this.payPrice = parseFloat(this.paytheprice * item.discountPrice).toFixed(2)
+						let oldprice = parseFloat(this.paytheprice * item.discountPrice).toFixed(2);
+						this.availIntegal = parseFloat(oldprice * 100).toFixed(0);
+						// this.priceValue[1] = parseFloat(this.payPrice * 100).toFixed(0);
+						this.priceCaluc(oldprice);
 					}
 				}
 				this.$refs.popup.hide();
 			},
+			//计算价格
+			priceCaluc(item) {
+				console.log('======' + item);
+				if (this.rechargeDes.integralDiscount == 100) {
+					let payprice = parseFloat(item * 100).toFixed(0);
+					if (payprice > this.user.gold) {
+						// this.priceValue[1] = this.user.gold;
+						this.availIntegal = this.user.gold;
+						if (this.isIntegral) {
+							this.payPrice = (parseFloat(this.availIntegal / 100).toFixed(0)) - (this.priceValue[1] / 100);
+						}else{
+							this.payPrice = parseFloat(this.availIntegal / 100).toFixed(0);
+						}
+						// this.payPrice = parseFloat(this.availIntegal / 100).toFixed(0);
+						// console.log('=====' + this.payPrice);
+					} else {
+						// this.priceValue[1] = payprice;
+						this.availIntegal = payprice;
+						this.payPrice = parseFloat(this.availIntegal / 100).toFixed(0);
+					}
+				} else {
+					let payprice1 = parseFloat(item * 100).toFixed(0);
+					// this.priceValue[1] = payprice1;
+					this.availIntegal = payprice1;
+					this.payPrice = item - parseFloat(this.availIntegal / 100).toFixed(0);
+				}
+			},
 			// 微信获取手机号
 			loginByPhone(PhoneNumber) {
 				if (PhoneNumber.detail.iv == undefined) {
@@ -321,7 +425,7 @@
 					}
 				});
 			},
-			toPay() {
+			toPay() {
 				let that = this;
 				if (that.paytype == '') {
 					uni.showToast({
@@ -330,66 +434,60 @@
 						duration: 2000
 					})
 					return;
-				}
-				// #ifdef H5
-				uni.showLoading({
-					title: '提交订单中...'
-				})
-				let params = {
-					"memDiscountId": that.memDiscountId,
-					"orderPrice": that.orderPrice,
-					"payPrice": that.payPrice,
-					"rechargeContent": that.rechargeContent,
-					"rechargeModel": that.rechargeModel,
-					"agentKey": that.agentKey,
-					"objectId": that.objectId,
-					"identificationCode": app.globalData.identificationCode
-				}
-				addOrderPay(params).then(res => {
-					if (res.return_code == '000000') {
-						uni.hideLoading();
-						that.orderId = res.return_data.id;
-						let params = {
-							"orderId": res.return_data.id,
-							"openId": app.globalData.openId,
-							"openIdType": 2
-						}
-						that.orderToUNionPay(params);
-					} else {
-						uni.hideLoading();
-						uni.showToast({
-							title: res.return_msg,
-							icon: 'none',
-							duration: 2000
-						});
-					}
-				})
-				// #endif
+				}
+				// #ifdef H5
+				uni.showLoading({
+					title: '提交订单中...'
+				})
+				let params = {
+					"memDiscountId": that.memDiscountId,
+					"rechargeContent": that.rechargeContent,
+					"goodsId": that.objectId,
+					"integralNum": '',
+					"password": ''
+				}
+				addOrderPay(params).then(res => {
+					if (res.return_code == '000000') {
+						uni.hideLoading();
+						that.orderId = res.return_data.id;
+						let params = {
+							"orderId": res.return_data.id,
+							"openId": app.globalData.openId,
+							"openIdType": 2
+						}
+						that.orderToUNionPay(params);
+					} else {
+						uni.hideLoading();
+						uni.showToast({
+							title: res.return_msg,
+							icon: 'none',
+							duration: 2000
+						});
+					}
+				})
+				// #endif
 				// #ifdef MP
 				uni.requestSubscribeMessage({
 					tmplIds: ['ZO6kC3oJv0zj9QzL0htsF-mM9vAElcgPZEcUGglxsoU'],
-					success(res) {
+					success(res) {
 						uni.showLoading({
 							title: '提交订单中...'
 						})
 						let params = {
 							"memDiscountId": that.memDiscountId,
-							"orderPrice": that.orderPrice,
-							"payPrice": that.payPrice,
 							"rechargeContent": that.rechargeContent,
-							"rechargeModel": that.rechargeModel,
-							"agentKey": that.agentKey,
-							"objectId": that.objectId,
-							"identificationCode": app.globalData.identificationCode
+							"goodsId": that.objectId,
+							"integralNum": '',
+							"password": ''
 						}
 						addOrderPay(params).then(res => {
 							if (res.return_code == '000000') {
 								uni.hideLoading();
 								that.orderId = res.return_data.id;
-								let params = {
-									"orderId": res.return_data.id,
-									"openId": app.globalData.openId
-								}
+								let params = {
+									"orderId": res.return_data.id,
+									"openId": app.globalData.openId
+								}
 								that.orderToUNionPay(params);
 							} else {
 								uni.hideLoading();
@@ -401,9 +499,8 @@
 							}
 						})
 					},
-					fail(res) {
-					},
-				})
+					fail(res) {},
+				})
 				// #endif
 			},
 			//获取选择支付方式
@@ -429,11 +526,11 @@
 				this.$refs.popup.show();
 			},
 			//获取订单数据
-			orderToUNionPay(item) {
+			orderToUNionPay(item) {
 				let that = this;
-				if (that.paytype == 'weixin') {
+				if (that.paytype == '2') {
 					orderToUNionPay(item).then(res => {
-						if (res.return_code == '000000') {
+						if (res.return_code == '000000') {
 							// #ifdef MP
 							uni.showLoading({
 								title: '支付中...'
@@ -478,30 +575,32 @@
 							})
 						}
 					})
-				} else if (that.paytype == 'jinbi') {
-					if (that.user.gold < that.payPrice * 100) {
-						uni.showToast({
-							icon: 'none',
-							title: '积分不足',
-							duration: 2000,
-							success() {
-								setTimeout(() => {
-									uni.navigateTo({
-										url: '../../pages/user/deposit/deposit'
-									})
-								}, 1000)
-							}
-						});
-						return;
-					}
-					if (!that.user.isSetPayPwd) {
-						uni.navigateTo({
-							url: '../../pages/login/updatePas/updatePas'
-						})
-						return;
-					}
-					that.$refs.paymentPassword.modalFun('show');
-				} else if (that.paytype == 'gonghuika') {
+				}
+				// else if (that.paytype == 'jinbi') {
+				// 	if (that.user.gold < that.payPrice * 100) {
+				// 		uni.showToast({
+				// 			icon: 'none',
+				// 			title: '积分不足',
+				// 			duration: 2000,
+				// 			success() {
+				// 				setTimeout(() => {
+				// 					uni.navigateTo({
+				// 						url: '../../pages/user/deposit/deposit'
+				// 					})
+				// 				}, 1000)
+				// 			}
+				// 		});
+				// 		return;
+				// 	}
+				// 	if (!that.user.isSetPayPwd) {
+				// 		uni.navigateTo({
+				// 			url: '../../pages/login/updatePas/updatePas'
+				// 		})
+				// 		return;
+				// 	}
+				// 	that.$refs.paymentPassword.modalFun('show');
+				// }
+				else if (that.paytype == '3') {
 					if (that.tongCardPrice < that.payPrice) {
 						uni.showToast({
 							icon: 'none',
@@ -616,7 +715,7 @@
 
 			},
 			payRequest: function(self) {
-				let that = this;
+				let that = this;
 				uni.showLoading({
 					title: '支付中...'
 				})
@@ -667,7 +766,29 @@
 					});
 				});
 			},
+			blockStart() {},
+			blockMoving() {
+				// console.log('正在滑动中')
+			},
+			blockEnd() {
+				console.log('=======' + this.priceValue[1]);
+				console.log('=======' + this.priceValue);
+
+				if (this.priceValue[1] > 0) {
+					this.isIntegral = true;
+				} else {
+					this.isIntegral = false;
+				}
+				this.payPrice = this.payPrice - parseFloat(this.priceValue[1] / 100).toFixed(0);
+				if (this.payPrice == 0) {
+					this.isUse = false;
+					this.paytype = '';
+				} else {
+					this.isUse = true;
 
+				}
+				// console.log('滑动结束')
+			}
 		}
 	}
 </script>
@@ -688,6 +809,12 @@
 		margin-top: 30rpx;
 	}
 
+	.cj-slider {
+		width: 100%;
+		align-items: center;
+		display: flex;
+	}
+
 	.goodsimg {
 		align-items: center;
 		display: flex;