|
|
@@ -1,518 +1,460 @@
|
|
|
<template>
|
|
|
- <div class="app-content pay-wrap">
|
|
|
- <div class="delivery-wrap" v-if="!$util.isEmpty(orderShop)">
|
|
|
- <div class="shop-logo-wrap" v-if="!$util.isEmpty(orderShop)">
|
|
|
- <div class="logo-img">
|
|
|
- <img :src="orderShop.merchant.smallLogoUrl | default_img" alt mode="widthFix" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="module-com pay-input-wrap">
|
|
|
- <pay-input-module
|
|
|
- :focus="inpFocus"
|
|
|
- :num="amount"
|
|
|
- @focusFn="focusFn"
|
|
|
- @blurFn="blurFn"
|
|
|
- @clickKey="clickKeyFn"
|
|
|
- />
|
|
|
- <div
|
|
|
- class="balance"
|
|
|
- v-if="!$util.isEmpty(shopUser) && shopUser.userAsset.balance && shopUser.userAsset.balance != '0.00'"
|
|
|
- >
|
|
|
- <span>账户余额 ¥</span>
|
|
|
- <span class="app-size-30">{{ shopUser.userAsset.balance }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 查看更多 -->
|
|
|
- <div class="view-more">
|
|
|
- <div class="view-more-text">以下选填</div>
|
|
|
- </div>
|
|
|
- <!-- 查看更多 -->
|
|
|
- <block v-if="tabIndex == 1">
|
|
|
- <app-delivery-module ref="appDelivery" :anonymity="0" />
|
|
|
- </block>
|
|
|
- <!-- 可选优惠 -->
|
|
|
- <div class="module-com discount-wrap" v-if="!$util.isEmpty(discountArr)">
|
|
|
- <div class="module-tit">可选优惠</div>
|
|
|
- <div class="module-det">
|
|
|
- <app-coupon-sel ref="couponSel" :price="amount" :discountArr="['member', 'coupon']" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 按钮 -->
|
|
|
- <div class="btn-wrap">
|
|
|
- <button
|
|
|
- v-if="!$util.isEmpty(shopUser) && shopUser.userAsset.balance && shopUser.userAsset.balance != '0.00'"
|
|
|
- class="button-com red"
|
|
|
- @click="balancePayFn"
|
|
|
- >余额支付</button>
|
|
|
- <template v-if="isWxBrowser()">
|
|
|
- <button class="button-com green" @click="wexinPayFn">微信支付</button>
|
|
|
- <button class="button-com red" @click="showShare = true">支付宝支付</button>
|
|
|
- </template>
|
|
|
- <template v-else-if="isWxMiniapp()">
|
|
|
- <button class="button-com green" @click="wexinPayFn">微信支付</button>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <button class="button-com green" @click="wexinPayFn">微信支付</button>
|
|
|
- <button class="button-com red" @click="aliPayFn">支付宝支付</button>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 支付密码弹窗 -->
|
|
|
- <modal-module
|
|
|
- :show="passwordModal"
|
|
|
- @cancel="modalCancel"
|
|
|
- @click="passwordModalClick"
|
|
|
- :maskClosable="false"
|
|
|
- title="支付密码"
|
|
|
- padding="30rpx 30rpx"
|
|
|
- >
|
|
|
- <template v-slot:content>
|
|
|
- <div class="app-modal-input-wrap">
|
|
|
- <div class="inp-list-line">
|
|
|
- <div class="line-input">
|
|
|
- <input
|
|
|
- type="password"
|
|
|
- v-model="modalForm.payPassword"
|
|
|
- :adjust-position="false"
|
|
|
- class="inp-input"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </modal-module>
|
|
|
- <!-- 阿里支付 -->
|
|
|
- <div class="al-pay" v-html="aliPayHtml" ref="alipayWap"></div>
|
|
|
- <!-- 未设置支付密码弹窗 -->
|
|
|
- <alert-module
|
|
|
- :show="setPassModal"
|
|
|
- btnText="去设置"
|
|
|
- btnColor="#FF2842"
|
|
|
- padding="66rpx 24rpx 66rpx 24rpx"
|
|
|
- @click="hideAlert"
|
|
|
- >
|
|
|
- <div class="go-login-module">
|
|
|
- <div>请先设置支付密码！</div>
|
|
|
- </div>
|
|
|
- </alert-module>
|
|
|
- <app-share-mask :show="showShare" @click="hideShare" text="打开浏览器支付" />
|
|
|
- </div>
|
|
|
+ <div class="app-content pay-wrap">
|
|
|
+ <!-- 我要配送 -->
|
|
|
+ <!-- <block v-else> -->
|
|
|
+ <div class="delivery-wrap" v-if="!$util.isEmpty(orderShop)">
|
|
|
+ <div class="shop-logo-wrap" v-if="!$util.isEmpty(orderShop)">
|
|
|
+ <div class="logo-img">
|
|
|
+ <img :src="orderShop.merchant.smallLogoUrl | default_img" alt mode="widthFix" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="module-com pay-input-wrap">
|
|
|
+ <pay-input-module :focus="inpFocus" :num="amount" @focusFn="focusFn" @blurFn="blurFn" @clickKey="clickKeyFn" />
|
|
|
+ <div class="balance" v-if="!$util.isEmpty(shopUser) && shopUser.userAsset.balance && shopUser.userAsset.balance != '0.00'">
|
|
|
+ <span>账户余额 ¥</span>
|
|
|
+ <span class="app-size-30">{{ shopUser.userAsset.balance }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 查看更多 -->
|
|
|
+ <div class="view-more" :class="{'open' : tabIndex == 1}" @click="tabIndex = tabIndex == 0 ? 1 : 0">
|
|
|
+ <button type="primary" size="mini" plain="true">{{ tabIndex == 0 ? '点我填写收花人' : '收起' }}</button>
|
|
|
+ </div>
|
|
|
+ <!-- 查看更多 -->
|
|
|
+ <block v-if="tabIndex == 1">
|
|
|
+ <app-delivery-module ref="appDelivery" :anonymous="true" />
|
|
|
+ </block>
|
|
|
+ <!-- 可选优惠 -->
|
|
|
+ <div class="module-com discount-wrap" v-if="!$util.isEmpty(discountArr)">
|
|
|
+ <div class="module-tit">可选优惠</div>
|
|
|
+ <div class="module-det">
|
|
|
+ <app-coupon-sel ref="couponSel" :price="amount" :discountArr="['member', 'coupon']" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 按钮 -->
|
|
|
+ <div class="btn-wrap">
|
|
|
+ <button v-if="!$util.isEmpty(shopUser) && shopUser.userAsset.balance && shopUser.userAsset.balance != '0.00'" class="button-com red" @click="balancePayFn">余额支付</button>
|
|
|
+ <button class="button-com green" v-if="isWxMiniapp()" @click="wexinPayFn">微信支付</button>
|
|
|
+ <button class="button-com red" v-else @click="aliPayFn">支付宝支付</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- </block> -->
|
|
|
+ <!-- 支付密码弹窗 -->
|
|
|
+ <modal-module :show="passwordModal" @cancel="modalCancel" @click="passwordModalClick" :maskClosable="false" title="支付密码" padding="30rpx 30rpx">
|
|
|
+ <template v-slot:content>
|
|
|
+ <div class="app-modal-input-wrap">
|
|
|
+ <div class="inp-list-line">
|
|
|
+ <!-- <div class="line-label">支付密码</div> -->
|
|
|
+ <div class="line-input">
|
|
|
+ <input type="password" v-model="modalForm.payPassword" :adjust-position="false" class="inp-input" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </modal-module>
|
|
|
+ <!-- 阿里支付 -->
|
|
|
+ <div class="al-pay" v-html="aliPayHtml" ref="alipayWap"></div>
|
|
|
+ <!-- 未设置支付密码弹窗 -->
|
|
|
+ <alert-module :show="setPassModal" btnText="去设置" btnColor="#FF2842" padding="66rpx 24rpx 66rpx 24rpx" @click="hideAlert">
|
|
|
+ <div class="go-login-module">
|
|
|
+ <div>暂未设置密码，去设置密码！</div>
|
|
|
+ </div>
|
|
|
+ </alert-module>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { mapGetters } from "vuex";
|
|
|
-import AppTabs from "@/components/plugin/tabs";
|
|
|
-import PayInputModule from "./components/pay-input";
|
|
|
-import AppDeliveryModule from "@/components/app-delivery";
|
|
|
-import wexinPay from "@/utils/pay/wxPay";
|
|
|
-import ModalModule from "@/components/plugin/modal";
|
|
|
-import AppCouponSel from "@/components/app-coupon-sel";
|
|
|
-import AlertModule from "@/components/plugin/alert";
|
|
|
-import AppShareMask from "@/components/module/app-share-mask";
|
|
|
-import { isLogin } from "@/utils/util";
|
|
|
-import { isWxBrowser, isWxMiniapp } from "@/utils/common";
|
|
|
-import { share } from "@/mixins";
|
|
|
-import { fastPay } from "@/api/pay";
|
|
|
-import { recharge } from "@/api/member";
|
|
|
-import { getShopUser } from "@/utils/auth";
|
|
|
-import { getOrderShop } from "@/utils/config";
|
|
|
-export default {
|
|
|
- name: "pay",
|
|
|
- components: {
|
|
|
- AppTabs,
|
|
|
- PayInputModule,
|
|
|
- AppDeliveryModule,
|
|
|
- ModalModule,
|
|
|
- AppCouponSel,
|
|
|
- AlertModule,
|
|
|
- AppShareMask
|
|
|
- },
|
|
|
- mixins: [share],
|
|
|
- data() {
|
|
|
- return {
|
|
|
- constant: this.$constant,
|
|
|
- inpFocus: false,
|
|
|
- // tab
|
|
|
- tabIndex: 1,
|
|
|
- tabs: [
|
|
|
- {
|
|
|
- name: "直接付款"
|
|
|
- },
|
|
|
- {
|
|
|
- name: "我要配送"
|
|
|
- }
|
|
|
- ],
|
|
|
- // 初始form
|
|
|
- amount: "",
|
|
|
- form: {
|
|
|
- payWay: 0 // 0微信 1支付宝 2余额
|
|
|
- },
|
|
|
- // 支付相关 ============
|
|
|
- aliPayHtml: "",
|
|
|
- passwordModal: false,
|
|
|
- modalForm: {
|
|
|
- payPassword: ""
|
|
|
- },
|
|
|
- appendFrm: {
|
|
|
- sendDistance: "", // 配送距离，根据腾讯js进行计算
|
|
|
- receiveLat: "", // 收花人纬度
|
|
|
- receiveLong: "" // 收花人经度
|
|
|
- },
|
|
|
- payCallData: null,
|
|
|
- // 优惠折扣
|
|
|
- discountArr: false,
|
|
|
- // 未设置密码
|
|
|
- setPassModal: false,
|
|
|
- showShare:false
|
|
|
- };
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapGetters({ orderShop: "getOrderShop" }),
|
|
|
- ...mapGetters({ shopUser: "getShopUser" })
|
|
|
- },
|
|
|
- onLoad(option) {
|
|
|
- this.specialInit();
|
|
|
- },
|
|
|
- mounted() {},
|
|
|
- methods: {
|
|
|
- isWxBrowser: isWxBrowser,
|
|
|
- isWxMiniapp: isWxMiniapp,
|
|
|
- specialInit() {
|
|
|
- // #ifdef H5
|
|
|
- // 微信二次分享
|
|
|
- let href = window.location.href;
|
|
|
- if (href.indexOf("from=singlemessage") > 0) {
|
|
|
- location.href = `${
|
|
|
- this.$constant.formal
|
|
|
- }/#/pages/pay/index${this.$util.parse(this.option)}`;
|
|
|
- return false;
|
|
|
- }
|
|
|
- // #endif
|
|
|
- if (this.option.pageType) {
|
|
|
- this.tabIndex = parseInt(this.option.pageType);
|
|
|
- }
|
|
|
- getOrderShop().then(res => {
|
|
|
- this.inpFocus = true;
|
|
|
- uni.setNavigationBarTitle({
|
|
|
- title: `您正在向【${res.shop.name}】付款`
|
|
|
- });
|
|
|
- //没有登陆不取优惠
|
|
|
- if (isLogin()) {
|
|
|
- this.$refs.couponSel._getUserDiscount().then(discountData => {
|
|
|
- this.discountArr = discountData;
|
|
|
- });
|
|
|
- }
|
|
|
- });
|
|
|
- if (isLogin()) {
|
|
|
- getShopUser(true).then(res => {
|
|
|
- // 设置分享
|
|
|
- let shareParams = {
|
|
|
- // #ifdef H5
|
|
|
- title: "点我付款",
|
|
|
- desc: "享随机优惠，最高20元",
|
|
|
- imgUrl: `${this.$constant.imgUrl}/retail/pay/wxSharePay.jpg`,
|
|
|
- pagePath: `${this.$constant.formal}/#/pages/pay/index?account=${res.merchantId}&store=0&sourceType=3&fromType=2`,
|
|
|
- // #endif
|
|
|
- // #ifndef H5
|
|
|
- title: "",
|
|
|
- desc: "享随机优惠，最高20元",
|
|
|
- imgUrl: `${this.$constant.imgUrl}/retail/pay/wxPay.png`,
|
|
|
- pagePath: `/pages/pay/index?account=${res.merchantId}&store=0&sourceType=3&fromType=2`
|
|
|
- // #endif
|
|
|
- };
|
|
|
- this.jweixinFn(shareParams);
|
|
|
- });
|
|
|
- }
|
|
|
- },
|
|
|
- _pay() {
|
|
|
- if (!this.amount) {
|
|
|
- this.$msg("请先输入金额！");
|
|
|
- return false;
|
|
|
- }
|
|
|
- let params = {};
|
|
|
- let host = null;
|
|
|
- if (this.option.pageStatus == "recharge") {
|
|
|
- params = {
|
|
|
- amount: this.amount
|
|
|
- };
|
|
|
- host = recharge;
|
|
|
- } else {
|
|
|
- params = {
|
|
|
- needSend: this.tabIndex == 0 ? "0" : "1",
|
|
|
- prePrice: this.amount,
|
|
|
- payWay: this.form.payWay,
|
|
|
- payPassword: this.modalForm.payPassword
|
|
|
- };
|
|
|
- if (this.tabIndex == 1) {
|
|
|
- let deliveryForm = this.$refs.appDelivery.form
|
|
|
- ? this.$refs.appDelivery.form
|
|
|
- : {};
|
|
|
- let deliveryRegion = this.$refs.appDelivery.region
|
|
|
- ? this.$refs.appDelivery.region
|
|
|
- : {};
|
|
|
- params = {
|
|
|
- ...params,
|
|
|
- ...deliveryForm,
|
|
|
- ...deliveryRegion
|
|
|
- };
|
|
|
- }
|
|
|
- if (this.option.store) {
|
|
|
- params.store = this.option.store;
|
|
|
- }
|
|
|
- if (this.option.sourceType) {
|
|
|
- params.sourceType = this.option.sourceType;
|
|
|
- }
|
|
|
- if (!this.$util.isEmpty(this.discountArr)) {
|
|
|
- params.couponId = this.$refs.couponSel.couponId;
|
|
|
- }
|
|
|
- host = fastPay;
|
|
|
- }
|
|
|
- host(params).then(res => {
|
|
|
- this.payCallData = res.data;
|
|
|
- //错误返回判断
|
|
|
- if (res.code == 0) {
|
|
|
- this.$msg(res.msg);
|
|
|
- return false;
|
|
|
- }
|
|
|
+ import { mapGetters } from 'vuex'
|
|
|
+ import AppTabs from '@/components/plugin/tabs'
|
|
|
+ import PayInputModule from './components/pay-input'
|
|
|
+ import AppDeliveryModule from '@/components/app-delivery'
|
|
|
+ import wexinPay from '@/utils/pay/wxPay'
|
|
|
+ import ModalModule from '@/components/plugin/modal'
|
|
|
+ import AppCouponSel from '@/components/app-coupon-sel'
|
|
|
+ import AlertModule from '@/components/plugin/alert'
|
|
|
+ import { isLogin } from '@/utils/util'
|
|
|
+ import { isWxMiniapp } from '@/utils/common'
|
|
|
+ import { share } from '@/mixins'
|
|
|
+ import { fastPay } from '@/api/pay'
|
|
|
+ import { recharge } from '@/api/member'
|
|
|
+ import { getShopUser } from '@/utils/auth'
|
|
|
+ import { getOrderShop } from '@/utils/config'
|
|
|
+ export default {
|
|
|
+ name: 'pay',
|
|
|
+ components: {
|
|
|
+ AppTabs,
|
|
|
+ PayInputModule,
|
|
|
+ AppDeliveryModule,
|
|
|
+ ModalModule,
|
|
|
+ AppCouponSel,
|
|
|
+ AlertModule
|
|
|
+ },
|
|
|
+ mixins: [share],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ constant: this.$constant,
|
|
|
+ inpFocus: false,
|
|
|
+ // tab
|
|
|
+ tabIndex: 0,
|
|
|
+ tabs: [
|
|
|
+ {
|
|
|
+ name: '直接付款'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '我要配送'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ // 初始form
|
|
|
+ amount: '',
|
|
|
+ form: {
|
|
|
+ payWay: 0 // 0微信 1支付宝 2余额
|
|
|
+ },
|
|
|
+ aliPayHtml: '',
|
|
|
+ passwordModal: false,
|
|
|
+ modalForm: {
|
|
|
+ payPassword: ''
|
|
|
+ },
|
|
|
+ appendFrm: {
|
|
|
+ sendDistance: '', // 配送距离，根据腾讯js进行计算
|
|
|
+ receiveLat: '', // 收花人纬度
|
|
|
+ receiveLong: '' // 收花人经度
|
|
|
+ },
|
|
|
+ payCallData: null,
|
|
|
+ // 优惠折扣
|
|
|
+ discountArr: false,
|
|
|
+ // 未设置密码
|
|
|
+ setPassModal: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapGetters({ orderShop: 'getOrderShop' }),
|
|
|
+ ...mapGetters({ shopUser: 'getShopUser' })
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ this.specialInit()
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+ methods: {
|
|
|
+ isWxMiniapp(){
|
|
|
+ return isWxMiniapp()
|
|
|
+ },
|
|
|
+ specialInit() {
|
|
|
+ // #ifdef H5
|
|
|
+ // 微信二次分享
|
|
|
+ let href = window.location.href
|
|
|
+ if (href.indexOf('from=singlemessage') > 0) {
|
|
|
+ location.href = `${this.$constant.formal}/#/pages/pay/index${this.$util.parse(this.option)}`
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ // #endif
|
|
|
+ if (this.option.pageType) {
|
|
|
+ this.tabIndex = parseInt(this.option.pageType)
|
|
|
+ }
|
|
|
+ getOrderShop().then(res => {
|
|
|
+ this.inpFocus = true
|
|
|
+ uni.setNavigationBarTitle({
|
|
|
+ title: `您正在向【${res.shop.merchantName}】付款`
|
|
|
+ })
|
|
|
|
|
|
- if (this.form.payWay == 0) {
|
|
|
- wexinPay(res.data, this.paySuccess, this.payFail);
|
|
|
- } else if (this.form.payWay == 1) {
|
|
|
- this.aliPayHtml = res;
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$refs.alipayWap.children[0].submit();
|
|
|
- });
|
|
|
- } else {
|
|
|
- this.paySuccess();
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- // tab切换
|
|
|
- tabChange(e) {
|
|
|
- this.tabIndex = e.index;
|
|
|
- this.inpFocus = true;
|
|
|
- },
|
|
|
- // 点击输入框
|
|
|
- focusFn() {
|
|
|
- this.inpFocus = true;
|
|
|
- },
|
|
|
- // 失焦
|
|
|
- blurFn() {
|
|
|
- this.inpFocus = false;
|
|
|
- },
|
|
|
- // 点击键盘
|
|
|
- clickKeyFn(val) {
|
|
|
- this.amount = val;
|
|
|
- },
|
|
|
- // 支付宝支付
|
|
|
- aliPayFn() {
|
|
|
- this.form.payWay = 1;
|
|
|
- this._pay();
|
|
|
- },
|
|
|
- // 微信支付
|
|
|
- wexinPayFn() {
|
|
|
- this.form.payWay = 0;
|
|
|
- this._pay();
|
|
|
- },
|
|
|
- // 暂未设置密码
|
|
|
- hideAlert() {
|
|
|
- this.$util.pageTo("/pages/user/password");
|
|
|
- },
|
|
|
- // 余额支付
|
|
|
- balancePayFn() {
|
|
|
- if (!this.$util.isEmpty(this.shopUser) && this.shopUser.hasPayPwd == 0) {
|
|
|
- this.setPassModal = true;
|
|
|
- } else {
|
|
|
- this.form.payWay = 2;
|
|
|
- this.passwordModal = true;
|
|
|
- }
|
|
|
- },
|
|
|
- passwordModalClick(e) {
|
|
|
- if (e.index === 0) {
|
|
|
- this.modalCancel();
|
|
|
- } else {
|
|
|
- this._pay();
|
|
|
- }
|
|
|
- },
|
|
|
- modalCancel() {
|
|
|
- this.passwordModal = false;
|
|
|
- this.modalForm.payPassword = "";
|
|
|
- },
|
|
|
- // 支付成功
|
|
|
- paySuccess() {
|
|
|
- // alert('支付成功!')
|
|
|
- this.$util.pageTo({
|
|
|
- url: "/pages/callback/index",
|
|
|
- type: 2,
|
|
|
- query: {
|
|
|
- pageStatus: 3,
|
|
|
- id: this.payCallData.orderId,
|
|
|
- ...this.params
|
|
|
- }
|
|
|
- });
|
|
|
- },
|
|
|
- payFail() {
|
|
|
- alert("支付失败!");
|
|
|
- },
|
|
|
- changeDelivery() {
|
|
|
- this.tabIndex = this.tabIndex == 0 ? 1 : 0;
|
|
|
- if (this.tabIndex === 1) {
|
|
|
- this.inpFocus = false;
|
|
|
- }
|
|
|
- },
|
|
|
- hideShare() {
|
|
|
- this.showShare = false;
|
|
|
- }
|
|
|
- }
|
|
|
-};
|
|
|
+ this.$refs.couponSel._getUserDiscount().then(status => {
|
|
|
+ this.discountArr = status
|
|
|
+ })
|
|
|
+ })
|
|
|
+ if (isLogin()) {
|
|
|
+ getShopUser(true).then(res => {
|
|
|
+ console.log('shopUser', res)
|
|
|
+ // 设置分享
|
|
|
+ let shareParams = {
|
|
|
+ title: `点我付款`, // 分享标题
|
|
|
+ desc: '享随机优惠，最高20元', // 分享内容
|
|
|
+ imgUrl: `${this.$constant.imgUrl}/retail/pay.jpg`,
|
|
|
+ // #ifdef H5
|
|
|
+ pagePath: `${this.$constant.formal}/#/pages/pay/index?account=${res.merchantId}&store=0&sourceType=3`,
|
|
|
+ // #endif
|
|
|
+ // #ifndef H5
|
|
|
+ pagePath: `/pages/pay/index?account=${res.merchantId}&store=0&sourceType=3`
|
|
|
+ // #endif
|
|
|
+ }
|
|
|
+ this.jweixinFn(shareParams)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ _pay() {
|
|
|
+ if (!this.amount) {
|
|
|
+ this.$msg('请先输入金额！')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ let params = {}
|
|
|
+ let host = null
|
|
|
+ if (this.option.pageStatus == 'recharge') {
|
|
|
+ params = {
|
|
|
+ amount: this.amount
|
|
|
+ }
|
|
|
+ host = recharge
|
|
|
+ } else {
|
|
|
+ params = {
|
|
|
+ needSend: this.tabIndex == 0 ? '0' : '1',
|
|
|
+ prePrice: this.amount,
|
|
|
+ payWay: this.form.payWay,
|
|
|
+ payPassword:this.modalForm.payPassword
|
|
|
+ }
|
|
|
+ if (this.tabIndex == 1) {
|
|
|
+ let deliveryForm = this.$refs.appDelivery.form ? this.$refs.appDelivery.form : {}
|
|
|
+ let deliveryRegion = this.$refs.appDelivery.region ? this.$refs.appDelivery.region : {}
|
|
|
+ params = {
|
|
|
+ ...params,
|
|
|
+ ...deliveryForm,
|
|
|
+ ...deliveryRegion
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (this.option.store) {
|
|
|
+ params.store = this.option.store
|
|
|
+ }
|
|
|
+ if (this.option.sourceType) {
|
|
|
+ params.sourceType = this.option.sourceType
|
|
|
+ }
|
|
|
+ if (!this.$util.isEmpty(this.discountArr)) {
|
|
|
+ params.couponId = this.$refs.couponSel.couponId
|
|
|
+ }
|
|
|
+ host = fastPay
|
|
|
+ }
|
|
|
+ host(params).then(res => {
|
|
|
+ this.payCallData = res.data
|
|
|
+ //错误返回判断
|
|
|
+ if(res.code == 0){
|
|
|
+ this.$msg(res.msg)
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ if (this.form.payWay == 0) {
|
|
|
+ wexinPay(res.data, this.paySuccess, this.payFail)
|
|
|
+ } else if (this.form.payWay == 1) {
|
|
|
+ this.aliPayHtml = res
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.alipayWap.children[0].submit()
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.paySuccess()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // tab切换
|
|
|
+ tabChange(e) {
|
|
|
+ this.tabIndex = e.index
|
|
|
+ this.inpFocus = true
|
|
|
+ },
|
|
|
+ // 点击输入框
|
|
|
+ focusFn() {
|
|
|
+ this.inpFocus = true
|
|
|
+ },
|
|
|
+ // 失焦
|
|
|
+ blurFn() {
|
|
|
+ this.inpFocus = false
|
|
|
+ },
|
|
|
+ // 点击键盘
|
|
|
+ clickKeyFn(val) {
|
|
|
+ this.amount = val
|
|
|
+ },
|
|
|
+ // 支付宝支付
|
|
|
+ aliPayFn() {
|
|
|
+ this.form.payWay = 1
|
|
|
+ this._pay()
|
|
|
+ },
|
|
|
+ // 微信支付
|
|
|
+ wexinPayFn() {
|
|
|
+ this.form.payWay = 0
|
|
|
+ this._pay()
|
|
|
+ },
|
|
|
+ // 暂未设置密码
|
|
|
+ hideAlert() {
|
|
|
+ this.$util.pageTo('/pages/user/password')
|
|
|
+ },
|
|
|
+ // 余额支付
|
|
|
+ balancePayFn() {
|
|
|
+ if (!this.$util.isEmpty(this.shopUser) && this.shopUser.hasPayPwd == 0) {
|
|
|
+ this.setPassModal = true
|
|
|
+ } else {
|
|
|
+ this.form.payWay = 2
|
|
|
+ this.passwordModal = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ passwordModalClick(e) {
|
|
|
+ if (e.index === 0) {
|
|
|
+ this.modalCancel()
|
|
|
+ } else {
|
|
|
+ this._pay()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ modalCancel() {
|
|
|
+ this.passwordModal = false
|
|
|
+ this.modalForm.payPassword = ''
|
|
|
+ },
|
|
|
+ // 支付成功
|
|
|
+ paySuccess() {
|
|
|
+ this.$util.pageTo({
|
|
|
+ url: '/pages/callback/index',
|
|
|
+ type: 2,
|
|
|
+ query: {
|
|
|
+ pageStatus: 3,
|
|
|
+ orderSn:this.payCallData.orderSn,
|
|
|
+ totalPrice:this.payCallData.totalPrice,
|
|
|
+ id: this.payCallData.orderId,
|
|
|
+ ...this.params
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ payFail() {
|
|
|
+ alert('支付失败!')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
-.app-content {
|
|
|
- min-height: calc(100vh - 20px);
|
|
|
- padding-top: 20px;
|
|
|
-}
|
|
|
-.tabs-wrap {
|
|
|
- position: fixed;
|
|
|
- top: 0;
|
|
|
- width: 100%;
|
|
|
- height: 80px;
|
|
|
- line-height: 80px;
|
|
|
- text-align: center;
|
|
|
- background-color: #fff;
|
|
|
- font-size: 30px;
|
|
|
- box-shadow: 4px 4px 10px #eee;
|
|
|
-}
|
|
|
+ .app-content {
|
|
|
+ min-height: calc(100vh - 20px);
|
|
|
+ padding-top: 20px;
|
|
|
+ }
|
|
|
+ .tabs-wrap {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 80px;
|
|
|
+ line-height: 80px;
|
|
|
+ text-align: center;
|
|
|
+ background-color: #fff;
|
|
|
+ font-size: 30px;
|
|
|
+ box-shadow: 4px 4px 10px #eee;
|
|
|
+ }
|
|
|
|
|
|
-.pay-wrap {
|
|
|
- .logo-wrap {
|
|
|
- padding-top: 70px;
|
|
|
- padding-bottom: 60px;
|
|
|
- text-align: center;
|
|
|
- .logo-img {
|
|
|
- width: 120px;
|
|
|
- margin: 0 auto 20px;
|
|
|
- border-radius: 50%;
|
|
|
- img {
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .pay-input-wrap {
|
|
|
- background-color: #fff;
|
|
|
- border-top-left-radius: 20px;
|
|
|
- border-top-right-radius: 20px;
|
|
|
- padding: 50px 80px 28px;
|
|
|
- margin-bottom: 0 !important;
|
|
|
- .balance {
|
|
|
- margin-top: 30px;
|
|
|
- color: $fontColor2;
|
|
|
- }
|
|
|
- .btn-wrap {
|
|
|
- width: 100%;
|
|
|
- margin-top: 64px;
|
|
|
- .button-com {
|
|
|
- display: block;
|
|
|
- margin-bottom: 20px;
|
|
|
- padding-top: 30px;
|
|
|
- padding-bottom: 30px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ .pay-wrap {
|
|
|
+ .logo-wrap {
|
|
|
+ padding-top: 70px;
|
|
|
+ padding-bottom: 60px;
|
|
|
+ text-align: center;
|
|
|
+ .logo-img {
|
|
|
+ width: 120px;
|
|
|
+ margin: 0 auto 20px;
|
|
|
+ border-radius: 50%;
|
|
|
+ img {
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pay-input-wrap {
|
|
|
+ background-color: #fff;
|
|
|
+ border-top-left-radius: 20px;
|
|
|
+ border-top-right-radius: 20px;
|
|
|
+ padding: 50px 80px 28px;
|
|
|
+ margin-bottom: 0 !important;
|
|
|
+ .balance {
|
|
|
+ margin-top: 30px;
|
|
|
+ color: $fontColor2;
|
|
|
+ }
|
|
|
+ .btn-wrap {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 64px;
|
|
|
+ .button-com {
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ padding-top: 30px;
|
|
|
+ padding-bottom: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
-// 我要配送
|
|
|
-.delivery-wrap {
|
|
|
- .module-com {
|
|
|
- margin-bottom: 20px;
|
|
|
- background-color: #fff;
|
|
|
- .module-tit {
|
|
|
- padding: 20px 18px;
|
|
|
- font-size: 28px;
|
|
|
- font-weight: 600;
|
|
|
- border-bottom: 1px solid $borderColor;
|
|
|
- }
|
|
|
- .module-det {
|
|
|
- padding: 0 30px;
|
|
|
- }
|
|
|
- }
|
|
|
- // 金额
|
|
|
- .pay-input-wrap {
|
|
|
- padding: 50px 36px 38px;
|
|
|
- .balance {
|
|
|
- margin-top: 30px;
|
|
|
- color: $fontColor2;
|
|
|
- }
|
|
|
- }
|
|
|
- .shop-logo-wrap {
|
|
|
- padding-bottom: 20px;
|
|
|
- @include disFlex(center, center);
|
|
|
- .logo-img {
|
|
|
- width: 120px;
|
|
|
- border-radius: 50%;
|
|
|
- margin: 10px auto;
|
|
|
- // margin-right: 20px;
|
|
|
- img {
|
|
|
- border-radius: 50%;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- // 可选优惠
|
|
|
- .discount-wrap {
|
|
|
- .module-det {
|
|
|
- padding-top: 20px;
|
|
|
- padding-bottom: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
- // 匿名派送
|
|
|
- .none-name-delivery {
|
|
|
- // padding-left: 30px;
|
|
|
- padding: 26px 30px;
|
|
|
- // margin-top: 40px;
|
|
|
- margin-bottom: 20px;
|
|
|
- background-color: #fff;
|
|
|
- .none-name-text {
|
|
|
- margin-left: 14px;
|
|
|
- color: $fontColor2;
|
|
|
- }
|
|
|
- }
|
|
|
- // 按钮
|
|
|
- .btn-wrap {
|
|
|
- width: calc(100% - 60px);
|
|
|
- margin: 64px auto 0;
|
|
|
- padding-bottom: 20px;
|
|
|
- .button-com {
|
|
|
- display: block;
|
|
|
- margin-bottom: 20px;
|
|
|
- padding-top: 30px;
|
|
|
- padding-bottom: 30px;
|
|
|
- &:last-child {
|
|
|
- margin-bottom: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ // 我要配送
|
|
|
+ .delivery-wrap {
|
|
|
+ .module-com {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ background-color: #fff;
|
|
|
+ .module-tit {
|
|
|
+ padding: 20px 18px;
|
|
|
+ font-size: 28px;
|
|
|
+ font-weight: 600;
|
|
|
+ border-bottom: 1px solid $borderColor;
|
|
|
+ }
|
|
|
+ .module-det {
|
|
|
+ padding: 0 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 金额
|
|
|
+ .pay-input-wrap {
|
|
|
+ padding: 50px 36px 38px;
|
|
|
+ .balance {
|
|
|
+ margin-top: 30px;
|
|
|
+ color: $fontColor2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .shop-logo-wrap {
|
|
|
+ padding-bottom: 20px;
|
|
|
+ @include disFlex(center, center);
|
|
|
+ .logo-img {
|
|
|
+ width: 120px;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin: 10px auto;
|
|
|
+ // margin-right: 20px;
|
|
|
+ img {
|
|
|
+ border-radius: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 可选优惠
|
|
|
+ .discount-wrap {
|
|
|
+ .module-det {
|
|
|
+ padding-top: 20px;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 匿名派送
|
|
|
+ .none-name-delivery {
|
|
|
+ // padding-left: 30px;
|
|
|
+ padding: 26px 30px;
|
|
|
+ // margin-top: 40px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ background-color: #fff;
|
|
|
+ .none-name-text {
|
|
|
+ margin-left: 14px;
|
|
|
+ color: $fontColor2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 按钮
|
|
|
+ .btn-wrap {
|
|
|
+ width: calc(100% - 60px);
|
|
|
+ margin: 64px auto 0;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ .button-com {
|
|
|
+ display: block;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ padding-top: 30px;
|
|
|
+ padding-bottom: 30px;
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- // 查看更多
|
|
|
- .view-more {
|
|
|
- width: 100%;
|
|
|
- padding-bottom: 20px;
|
|
|
- margin-bottom: 20px;
|
|
|
- font-size: 28px;
|
|
|
- @include disFlex(center, center);
|
|
|
- background-color: #fff;
|
|
|
- color: #cccccc;
|
|
|
- .view-more-text {
|
|
|
- margin-left: 0px;
|
|
|
- }
|
|
|
- i {
|
|
|
- font-size: 30px;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
- &.open {
|
|
|
- i {
|
|
|
- transform: rotate(180deg);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
+ // 查看更多
|
|
|
+ .view-more {
|
|
|
+ width: 100%;
|
|
|
+ // padding-top: 10px;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ font-size: 28px;
|
|
|
+ @include disFlex(center, center);
|
|
|
+ background-color: #fff;
|
|
|
+ color: #3385ff;
|
|
|
+ .view-more-text {
|
|
|
+ margin-right: 14px;
|
|
|
+ }
|
|
|
+ i {
|
|
|
+ font-size: 30px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ &.open {
|
|
|
+ i {
|
|
|
+ transform: rotate(180deg);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
</style>
|
jiangfeng