users/pages/order/offlinepay/index.vue

<template>
	<view>
		<view class="top-main-box">
			<view v-if="merch.shop_name">
				<!-- @click="go2MerchIndex(merchid)" -->
				<navigator class="fukuan-top">
					<view>
						<view class="fukuan-title">付款给[{{ merch.shop_name }}]</view>
					</view>
					<image style="border-radius:12rpx;" :src="merch.door_photo"
						@error="this.merch.door_photo = 'http://yuledui.oss-cn-qingdao.aliyuncs.com/' + merch.door_photo">
					</image>
				</navigator>
				<view class="fui-cell-group fukuan-jin-e">
					<view class="top-money-remark">
						<text>金额</text>
						<!-- <text @click="showRemarkClick" class="reamrk-btn">备注</text> -->
					</view>
					<view class="fui-cell" @click="toggleKeyboard(1)">
						<view class="fui-cell-labelf">¥</view>
						<view class="fui-cell-remark noremark"
							style="margin-left:25rpx;text-align:left;font-size:58rpx;">
							<text v-if="!list.realprice" :style="'opacity:' + mockInputFocusText + ';'">|</text>
							<text v-if="list.realprice" class="fui-input textl" id="price">{{ list.realprice ?
							list.realprice : '' }}</text>
							<text v-else style="opacity:0.5;">在此输入金额</text>
						</view>
					</view>
					<view class="remark-money"><input v-if="showRemarkInput" @input="listChange" class="fui-input textl"
							id="remark" placeholder="请输入备注" type="text" /></view>
				</view>
			</view>
			<!-- /储值卡抵扣 -->
			<!-- 金豆赠送活动抵扣 -->
			<view class="fui-cell-group">
				<block>
					<view class="fui-cell" v-if="credit1_hot_rang.toFixed(2)>0">
						<view class="fui-cell-info" style="color:#666;flex:inherit;margin-right:15rpx;">
							{{ list.realprice }}元赠送{{ credit1_hot_rang|limitDecimal }}金豆
						</view>
						<view class="flex">
							<view class="" style="font-size:30rpx;color:red">
								可抵扣约{{ credit1_hot_rang*0.15|limitDecimal }}元
							</view>
						</view>
					</view>
				</block>

			</view>
			<!-- /金豆赠送活动抵扣 -->
			<!-- 金豆抵扣 -->
			<view class="fui-cell-group" v-if="!hideCreditDeduct&&(use_max_credit_money.toFixed(2)>0)">
				<view class="fui-cell" style="flex-wrap:wrap;" v-if="list.realprice">
					<block v-if="bean > 0">
						<block v-if="ismobile">
							<view class="flex">
								<view>
									<checkbox-group @change="useCreditCheckBox" style="transform: scale(0.75);">
										<checkbox color="#ed6d00" :checked="use_deductprice"></checkbox>
									</checkbox-group>
								</view>
								<view style="font-size:30rpx;color:red">
									本次消费可用金豆抵扣约{{use_max_credit_money|limitDecimal}}元
								</view>
							</view>
						</block>
					</block>
					<text class="text tip-txt" v-else>暂无可抵扣金豆</text>
				</view>
			</view>
			<!-- /金豆抵扣 -->

			<view class="fui-cell-group">
				<!-- 满减 -->
				<view class="fui-cell " v-if="list.realprice>list.money_sub&&list.money_sub!=0">
					<view v-if="list.money_sub > 0" class="fui-cell-info credit-title-txt">
						本次随机立减:
						<text style="color:#1aac19;">{{ list.money_sub|limitDecimal }}元</text>
						<text class="tip-txt hide"><text style="margin-left:5rpx">(消费越多 优惠越多)</text></text>
					</view>
				</view>

				<navigator class="fui-cell " openType="navigate">

					<view class="fui-cell-info credit-title-txt">
						金豆余额:
						<text style="color:#FF9933;">{{ bean }}豆</text>
						<text @click="showMiniCreditdeductTips" class="icox icox-bangzhuzhongxin"
							style="margin-left: 5rpx;"></text>
						<view class="tip-txt"><text class="hide">(消费所得金豆可用于抵扣现金)</text>
						</view>
					</view>
				</navigator>

				<navigator target="miniProgram" :app-id="merch.third_company_credit_miniappid" path="/pages/index/index"
					class="fui-cell"
					v-if="merch.third_company_credit_order == 'yes' && merch.third_company_credit_miniappid">
					<image style="width: 90rpx;height: 90rpx;" v-if="merch.third_company_credit_merchlogo != ''"
						class="icon" :src="merch.third_company_credit_merchlogo"></image>

					<view class="fui-cell-info credit-title-txt">
						<view class="text">
							<text>{{ merch.third_company_credit_miniappid_click_tips }}</text>
						</view>
					</view>
				</navigator>

				<!-- <view v-if="list.realprice > 0" class="fui-cell " openType="navigate">
					<view class="fui-cell-info credit-title-txt">
						最终应付:
						<text class="realprice">{{ list.needpay }}元</text>
						<view class="tip-txt hide"><text>(所得金豆可以再次抵现)</text></view>
					</view>
				</view> -->
			</view>
		</view>
		<!-- 数字人民币显示 -->
		<!-- <button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" class="mini-btn" v-if="ismobile">授权手机号</button> -->
		<!-- <button @click="useEcnyPay" class="e-cny-button" v-if="merch.e_cny_qrurl_psbc">点我使用数字人民币支付</button> -->

		<!-- /数字人民币 -->
		<view class="yuledui-biaoyu">
			<text>要省钱 就用</text>
			<text class="yld-txt">余乐兑</text>
			<text class="shangbiao-txt">®</text>
		</view>
		<button open-type="getPhoneNumber" v-if="!isMobeil" @getphonenumber="onGetPhoneNumber">授权并获取手机号</button>
		<view style="text-align:center;"> <!-- 隐藏键盘按钮 -->
			<img @click="toggleKeyboard" class="hide-btn"
				src="http://yuledui.oss-cn-qingdao.aliyuncs.com/wx_miniapp/order/offlinepay/down-hide.png" />
		</view>
		<view :class="showKeyBoard ? '' : 'hide'" class="bottom-key">
			<cwx-keyboard v-if="option.cashierid && option.cashierid != '' && option.total > 0" ref="clearMoney"
				@confirmEvent="submitFun" :hideInputNumber="true" :btn-color='btnColor' title="点我付款"></cwx-keyboard>
			<cwx-keyboard v-else ref="clearMoney" @oninputBind="onMoneyInput" @confirmEvent="submitFun"
				:money.sync="list.realprice" :btn-color='btnColor' title="付款"></cwx-keyboard>

		</view>
	</view>
</template>

<script>
	import {
		ulogin,
		register,
		getShop,
		getmanager,
		pay,
		getReduction,
		zfbRegister
	} from '@/utils/api.js'
	var core = getApp().globalData.requirejs("core"),
		that
	import cwxKeyboard from '@/components/cwx-keyboard/cwx-keyboard'
	import {
		globalAgent
	} from 'http';
	// import intFn from './utils/intFn' //扫码相关

	export default {
		data() {
			return {
				openId: '',
				showKeyBoard: true,
				option: {},
				credit1_hot_rang: 0, //赠送金豆数量
				use_deductprice_hot: false,
				isMobeil: false, //是否已经注册过了
				merch: {}, //商户信息
				bean: 0, //金豆数量
				money_sub: 0, //随机立减
				hideCreditDeduct: false,
				mockInputFocusText: ' ',
				list: {
					realprice: 0.00, //原价
					needpay: 0.00, //需要支付
					credit: 0.00, //金豆奖励
					money_sub: 0.00, //随机立减
				},
				ismobile: true,
				activity_platform: 0,
				use_max_credit_money: 0.00, //金豆抵扣钱数
				money_ratio: 0, //金豆赠送比例
				bean_ratio: 0, //金豆抵扣比列
				isUsebean: false, //是否使用金豆抵扣
				btnColor: ''
			}
		},
		components: {
			cwxKeyboard
		},
		filters: {
			limitDecimal(val) {
				return parseFloat(val).toFixed(2);
			},
		},
		//二维码上只有shop_id
		onLoad: function(t) {
			that = this
			this.option = t
			// mockInputFocus()
			// this.getManage()
			// this.logins()
			// this.getMoney()
		},
		onShow: function() {
			// #ifdef MP-ALIPAY
			this.btnColor = '#1677ff'
			// #endif
			// #ifdef MP-WEIXIN
			this.btnColor = '#08c163'
			// #endif
			this.list = {
				realprice: 0.00, //原价
				needpay: 0.00, //需要支付
				credit: 0.00, //金豆奖励
				money_sub: 0.00, //随机立减
			}

			this.credit1_hot_rang = 0;
			this.bean = 0;
			this.money_sub = 0;
			this.activity_platform = 0;
			this.use_max_credit_money = 0;
			this.money_ratio = 0;
			this.bean_ratio = 0;
			mockInputFocus()
			this.getManage()
			this.logins()
			this.getMoney()
		},
		onHide: function() {
			that.submit = false;
			that.list = {};
			that.use_deductprice = false;
			uni.removeStorageSync('qr_scan_data');
			this.$refs.clearMoney._handleClearKey();
		},
		methods: {
			//注册
			onGetPhoneNumber(e) {
				console.log(e);
				let that = this
				// #ifdef MP-ALIPAY
				if (e.detail.errMsg === 'getPhoneNumber:ok') {
					// 用户授权成功
					zfbRegister({response: e.detail.encryptedData}).then(res=>{
						console.log(res);
						if(!res.code){
							uni.setStorageSync('phone', res.data.mobile)
							that.getShopmsg()
						}
					})
				} else {
					// 	// 用户未授权
					console.log('用户未授权获取手机号');
				}
				// #endif
				// #ifdef MP-WEIXIN
				register({
					code: e.detail.code,
					openId: uni.getStorageSync("openId")
				}).then(response => {
					that.getShopmsg()
				})
				// #endif

			},
			//登录
			logins() {
				let that = this
				uni.login({
					// #ifdef MP-ALIPAY
					provider: 'alipay', //使用微信登录
					// #endif
					// #ifdef MP-WEIXIN
					provider: 'weixin', //使用微信登录
					// #endif
					success: function(res) {
						console.log(res);
						// #ifdef MP-WEIXIN
						ulogin({
							jsCode: res.code
						}).then(r => {
							if (!r.code) {
								uni.setStorageSync('openId', r.data.openid)
								if (r.data.mobile == '') {
									this.isMobeil = false
								} else {
									this.isMobeil = true
									uni.setStorageSync('phone', r.data.mobile)
									uni.setStorageSync('bean', r.data.bean)
									that.getShopmsg()
								}
							}
						})
						//#endif
					}
				})
			},
			//获取商户信息
			getShopmsg() {
				getShop({
					shop_id: 'na2svl0blg0d5qt1qprt6f8200qurv11'
				}).then(res => {
					console.log(res);
					this.merch = res.data
					this.bean = uni.getStorageSync('bean')
					if (uni.getStorageSync('phone') != '') {
						this.isMobeil = true
					}
					console.log(this.bean);
				})
			},
			//获取商户抵扣 赠送比例
			getManage() {
				getmanager({
					shop_id: 'na2svl0blg0d5qt1qprt6f8200qurv11'
				}).then(res => {
					this.money_ratio = res.data.gift_rate / 100 //金豆赠送
					this.bean_ratio = res.data.deduction_ratio / 100 //金豆抵扣
					// this.money_sub = res.data.rand_reduction / 100 //随机立减
					uni.getStorageSync('money_ratio', this.money_ratio)
					uni.getStorageSync('bean_ratio', this.bean_ratio)
				})
			},
			onMoneyInput(e) {
				this.list.realprice = e
				this.credit1_hot_rang = e * this.money_ratio / 0.15 //赠送豆数
				if (e * this.bean_ratio / 0.15 > this.bean) {
					this.use_max_credit_money = this.bean * 0.15
				} else {
					this.use_max_credit_money = e * this.bean_ratio //抵扣豆数
				}
				// this.getMoney()
				// moneyChangeFn.changeEv(e, that)
			},
			//获取随机立减金额
			getMoney() {
				getReduction({
					shopId: 'na2svl0blg0d5qt1qprt6f8200qurv11'
				}).then(res => {
					console.log(res);
					this.list.money_sub = res.data.reduction / 100
				})
			},
			toggleKeyboard() {
				this.showKeyBoard = !this.showKeyBoard
			},
			//点击付款
			submitFun() {
				//this.list.money_sub 是元
				let subMoney = this.list.money_sub * 100 //分
				if (Number(this.list.realprice) - Number(this.list.money_sub) < 0.02) {
					subMoney = 0
				}
				const data = {
					shopId: 'na2svl0blg0d5qt1qprt6f8200qurv11', //商户ID
					price: this.list.realprice, //商品原价   元
					bean: this.isUsebean ? parseFloat(this.use_max_credit_money / 0.15).toFixed(2) : 0, //抵扣金豆
					openId: uni.getStorageSync('openId'), //微信OpenId 或者支付宝的唯一id
					channel: '1',
					reduction: subMoney
				}
				this.$u.route({
					url: '/pages/order/offlinepay/pay/index?val=' + JSON.stringify(data),
				})
			},
			// 是否使用金豆抵扣
			useCreditCheckBox(e) {
				if (e.detail.value.length) {
					this.isUsebean = true
				} else {
					this.isUsebean = false
				}
			},
		}
	};

	// 模拟光标
	function mockInputFocus() {

		setInterval(function() {
			if (that.mockInputFocusText == '0.1') {
				that.mockInputFocusText = '0.5'
			} else {
				that.mockInputFocusText = '0.1'
			}
		}, 1000)
	}
</script>
<style>
	@import './index.css';
</style>