|
|
@@ -4,10 +4,13 @@
|
|
|
<div class="tabs-wrap">充值</div>
|
|
|
</block>
|
|
|
<block v-else>
|
|
|
- <app-tabs :tabs="tabs" :currentTab="tabIndex" :isFixed="true" :borderLeft="true" @change="tabChange" itemWidth="50%" />
|
|
|
+ <div class="tabs-wrap">付款</div>
|
|
|
</block>
|
|
|
+ <!-- <block v-else>
|
|
|
+ <app-tabs :tabs="tabs" :currentTab="tabIndex" :isFixed="true" :borderLeft="true" @change="tabChange" itemWidth="50%" />
|
|
|
+ </block>-->
|
|
|
<!-- 直接付款 -->
|
|
|
- <block v-if="tabIndex == 0">
|
|
|
+ <!-- <block v-if="tabIndex == 0">
|
|
|
<div class="pay-wrap" v-if="!$util.isEmpty(orderShop)">
|
|
|
<div class="logo-wrap">
|
|
|
<div class="logo-img">
|
|
|
@@ -21,7 +24,6 @@
|
|
|
<span>账户余额 ¥</span>
|
|
|
<span class="app-size-30">{{ shopUser.userAsset.balance }}</span>
|
|
|
</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="isWxBrowser()" @click="wexinPayFn">微信支付</button>
|
|
|
@@ -29,45 +31,50 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </block>
|
|
|
+ </block>-->
|
|
|
<!-- 我要配送 -->
|
|
|
- <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 class="app-size-30">{{ orderShop.merchant.merchantName }}</div>
|
|
|
+ <!-- <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 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 != '0.00'">
|
|
|
- <span>账户余额 ¥</span>
|
|
|
- <span class="app-size-30">{{ shopUser.userAsset.balance }}</span>
|
|
|
- </div>
|
|
|
+ <div class="app-size-30">{{ orderShop.merchant.merchantName }}</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 != '0.00'">
|
|
|
+ <span>账户余额 ¥</span>
|
|
|
+ <span class="app-size-30">{{ shopUser.userAsset.balance }}</span>
|
|
|
</div>
|
|
|
+ </div>
|
|
|
+ <button class="button-com red" @click="tabIndex = tabIndex == 0 ? 1 : 0">{{ tabIndex == 0 ? '我要配送' : '无需配送' }}</button>
|
|
|
+ <block v-if="tabIndex == 1">
|
|
|
<app-delivery-module ref="appDelivery" />
|
|
|
- <!-- 可选优惠 -->
|
|
|
- <div class="module-com discount-wrap" v-if="!$util.isEmpty(shopUser) && shopUser.userAsset.member && shopUser.userAsset.getCouponNum">
|
|
|
- <div class="module-tit">可选优惠</div>
|
|
|
- <div class="module-det">
|
|
|
- <app-coupon-sel ref="couponSel" :price="amount" :discountArr="['member', 'coupon']" />
|
|
|
- </div>
|
|
|
+ </block>
|
|
|
+ <!-- 可选优惠 -->
|
|
|
+ <div class="module-com discount-wrap" v-if="!$util.isEmpty(shopUser) && shopUser.userAsset.member && shopUser.userAsset.getCouponNum">
|
|
|
+ <div class="module-tit">可选优惠</div>
|
|
|
+ <div class="module-det">
|
|
|
+ <app-coupon-sel ref="couponSel" :price="amount" :discountArr="['member', 'coupon']" />
|
|
|
</div>
|
|
|
+ </div>
|
|
|
|
|
|
- <!-- 匿名派送 -->
|
|
|
+ <!-- 匿名派送 -->
|
|
|
+ <block v-if="tabIndex == 1">
|
|
|
<div class="none-name-delivery flex-center">
|
|
|
<checkbox class="ljd-checkbox" @change="anonymityChange"></checkbox>
|
|
|
<span class="none-name-text">匿名派送</span>
|
|
|
</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="isWxBrowser()" @click="wexinPayFn">微信支付</button>
|
|
|
- <button class="button-com red" v-else @click="aliPayFn">支付宝支付</button>
|
|
|
- </div>
|
|
|
+ </block>
|
|
|
+ <!-- 按钮 -->
|
|
|
+ <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="isWxBrowser()" @click="wexinPayFn">微信支付</button>
|
|
|
+ <button class="button-com red" v-else @click="aliPayFn">支付宝支付</button>
|
|
|
</div>
|
|
|
- </block>
|
|
|
+ </div>
|
|
|
+ <!-- </block> -->
|
|
|
<!-- <button @click="_pay">提交</button> -->
|
|
|
<!-- 支付密码弹窗 -->
|
|
|
<modal-module :show="passwordModal" @cancel="modalCancel" @click="passwordModalClick" :maskClosable="false" title="支付密码" padding="30rpx 30rpx">
|
|
|
@@ -88,205 +95,204 @@
|
|
|
</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 { getMiniAppUrl } from '@/utils/common'
|
|
|
-import wexinPay from '@/utils/pay/wxPay'
|
|
|
-import ModalModule from '@/components/plugin/modal'
|
|
|
-import AppCouponSel from '@/components/app-coupon-sel'
|
|
|
-import { isLogin } from '@/utils/util'
|
|
|
-import { isWxBrowser } from '@/utils/common'
|
|
|
-// api
|
|
|
-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
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- constant: this.$constant,
|
|
|
- inpFocus: false,
|
|
|
- // tab
|
|
|
- tabIndex: 0,
|
|
|
- tabs: [
|
|
|
- {
|
|
|
- name: '直接付款'
|
|
|
+ import { mapGetters } from 'vuex'
|
|
|
+ import AppTabs from '@/components/plugin/tabs'
|
|
|
+ import PayInputModule from './components/pay-input'
|
|
|
+ import AppDeliveryModule from '@/components/app-delivery'
|
|
|
+ // import { getMiniAppUrl } from '@/utils/common'
|
|
|
+ import wexinPay from '@/utils/pay/wxPay'
|
|
|
+ import ModalModule from '@/components/plugin/modal'
|
|
|
+ import AppCouponSel from '@/components/app-coupon-sel'
|
|
|
+ import { isLogin } from '@/utils/util'
|
|
|
+ import { isWxBrowser } from '@/utils/common'
|
|
|
+ // api
|
|
|
+ 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
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ constant: this.$constant,
|
|
|
+ inpFocus: false,
|
|
|
+ // tab
|
|
|
+ tabIndex: 0,
|
|
|
+ tabs: [
|
|
|
+ {
|
|
|
+ name: '直接付款'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '我要配送'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ // 初始form
|
|
|
+ amount: '',
|
|
|
+ form: {
|
|
|
+ payWay: 0 // 0微信 1支付宝 2余额
|
|
|
},
|
|
|
- {
|
|
|
- name: '我要配送'
|
|
|
+ // 支付相关 ============
|
|
|
+ aliPayHtml: '',
|
|
|
+ passwordModal: false,
|
|
|
+ modalForm: {
|
|
|
+ payPassword: ''
|
|
|
+ },
|
|
|
+ appendFrm: {
|
|
|
+ anonymity: '0', // 是否匿名 0不 1要
|
|
|
+ sendDistance: '', // 配送距离，根据腾讯js进行计算
|
|
|
+ // goodsId: '', // 【商城下单特有字段】商品id
|
|
|
+ // goodsStyleId: '', // 【商城下单特有字段】商品款式id
|
|
|
+ // goodsNum: '', // 【商城下单特有字段】商品数量
|
|
|
+ // couponId: '0', // 优惠券id，默认0没有使用优惠券
|
|
|
+ receiveLat: '', // 收花人纬度
|
|
|
+ receiveLong: '' // 收花人经度
|
|
|
}
|
|
|
- ],
|
|
|
- // 初始form
|
|
|
- amount: '',
|
|
|
- form: {
|
|
|
- payWay: 0 // 0微信 1支付宝 2余额
|
|
|
- },
|
|
|
- // 支付相关 ============
|
|
|
- aliPayHtml: '',
|
|
|
- passwordModal: false,
|
|
|
- modalForm: {
|
|
|
- payPassword: ''
|
|
|
- },
|
|
|
- appendFrm: {
|
|
|
- anonymity: '0', // 是否匿名 0不 1要
|
|
|
- sendDistance: '', // 配送距离，根据腾讯js进行计算
|
|
|
- // goodsId: '', // 【商城下单特有字段】商品id
|
|
|
- // goodsStyleId: '', // 【商城下单特有字段】商品款式id
|
|
|
- // goodsNum: '', // 【商城下单特有字段】商品数量
|
|
|
- // couponId: '0', // 优惠券id，默认0没有使用优惠券
|
|
|
- receiveLat: '', // 收花人纬度
|
|
|
- receiveLong: '' // 收花人经度
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapGetters({ orderShop: 'getOrderShop' }),
|
|
|
- ...mapGetters({ shopUser: 'getShopUser' })
|
|
|
- },
|
|
|
- onLoad(option) {
|
|
|
- // this.option = this.$util.isEmpty(option) || {
|
|
|
- // account: 12358,
|
|
|
- // shopId: 15680
|
|
|
- // }
|
|
|
- this.specialInit()
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- },
|
|
|
- methods: {
|
|
|
- isWxBrowser: isWxBrowser,
|
|
|
- specialInit() {
|
|
|
- // this.$util.getCheckLogin().then(res => {})
|
|
|
- if (this.option.pageType) {
|
|
|
- this.tabIndex = parseInt(this.option.pageType)
|
|
|
- }
|
|
|
- getOrderShop().then(res => {
|
|
|
- this.inpFocus = true
|
|
|
- })
|
|
|
- if (isLogin()) {
|
|
|
- getShopUser()
|
|
|
}
|
|
|
},
|
|
|
- _pay() {
|
|
|
- if (!this.amount) {
|
|
|
- this.$msg('请先输入金额！')
|
|
|
- return false
|
|
|
- }
|
|
|
- let params = {}
|
|
|
- let host = null
|
|
|
- if (this.option.pageStatus == 'recharge') {
|
|
|
- params = {
|
|
|
- amount: this.amount
|
|
|
+ computed: {
|
|
|
+ ...mapGetters({ orderShop: 'getOrderShop' }),
|
|
|
+ ...mapGetters({ shopUser: 'getShopUser' })
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ // this.option = this.$util.isEmpty(option) || {
|
|
|
+ // account: 12358,
|
|
|
+ // shopId: 15680
|
|
|
+ // }
|
|
|
+ this.specialInit()
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+ methods: {
|
|
|
+ isWxBrowser: isWxBrowser,
|
|
|
+ specialInit() {
|
|
|
+ // this.$util.getCheckLogin().then(res => {})
|
|
|
+ if (this.option.pageType) {
|
|
|
+ this.tabIndex = parseInt(this.option.pageType)
|
|
|
}
|
|
|
- host = recharge
|
|
|
- } else {
|
|
|
- params = {
|
|
|
- needSend: this.tabIndex == 0 ? '0' : '1',
|
|
|
- prePrice: this.amount,
|
|
|
- payWay: this.form.payWay
|
|
|
- // sourceType: 1,
|
|
|
- // shopId: 15680
|
|
|
+ getOrderShop().then(res => {
|
|
|
+ this.inpFocus = true
|
|
|
+ })
|
|
|
+ if (isLogin()) {
|
|
|
+ getShopUser()
|
|
|
}
|
|
|
- if (this.tabIndex == 1) {
|
|
|
- let deliveryForm = this.$refs.appDelivery.form ? this.$refs.appDelivery.form : {}
|
|
|
- let deliveryRegion = this.$refs.appDelivery.region ? this.$refs.appDelivery.region : {}
|
|
|
+ },
|
|
|
+ _pay() {
|
|
|
+ if (!this.amount) {
|
|
|
+ this.$msg('请先输入金额！')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ let params = {}
|
|
|
+ let host = null
|
|
|
+ if (this.option.pageStatus == 'recharge') {
|
|
|
params = {
|
|
|
- ...params,
|
|
|
- ...deliveryForm,
|
|
|
- ...deliveryRegion
|
|
|
+ amount: this.amount
|
|
|
}
|
|
|
+ host = recharge
|
|
|
+ } else {
|
|
|
+ params = {
|
|
|
+ needSend: this.tabIndex == 0 ? '0' : '1',
|
|
|
+ prePrice: this.amount,
|
|
|
+ payWay: this.form.payWay
|
|
|
+ // sourceType: 1,
|
|
|
+ // shopId: 15680
|
|
|
+ }
|
|
|
+ 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
|
|
|
+ }
|
|
|
+ }
|
|
|
+ host = fastPay
|
|
|
}
|
|
|
- host = fastPay
|
|
|
- }
|
|
|
- host(params).then(res => {
|
|
|
- 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()
|
|
|
- })
|
|
|
- // location.href = res.data
|
|
|
- }
|
|
|
- // window.location.href = res.data.pay_button.mweb_url
|
|
|
- })
|
|
|
- },
|
|
|
- // 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()
|
|
|
- },
|
|
|
- // 余额支付
|
|
|
- balancePayFn() {
|
|
|
- this.form.payWay = 2
|
|
|
- this.passwordModal = true
|
|
|
- },
|
|
|
- passwordModalClick(e) {
|
|
|
- if (e.index === 0) {
|
|
|
- this.modalCancel()
|
|
|
- } else {
|
|
|
+ host(params).then(res => {
|
|
|
+ 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()
|
|
|
+ })
|
|
|
+ // location.href = res.data
|
|
|
+ }
|
|
|
+ // window.location.href = res.data.pay_button.mweb_url
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 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()
|
|
|
- }
|
|
|
- },
|
|
|
- modalCancel() {
|
|
|
- this.passwordModal = false
|
|
|
- this.modalForm.payPassword = ''
|
|
|
- },
|
|
|
- // 支付成功
|
|
|
- paySuccess() {
|
|
|
- // alert('支付成功!')
|
|
|
- this.$util.pageTo({
|
|
|
- url: '/pages/callback/index',
|
|
|
- type: 2,
|
|
|
- query: {
|
|
|
- pagestatus: 3,
|
|
|
- ...this.params
|
|
|
- // orderSn: this.option.orderSn,
|
|
|
- // payDiscountPrice: res.data.discountAmount
|
|
|
+ },
|
|
|
+ // 微信支付
|
|
|
+ wexinPayFn() {
|
|
|
+ this.form.payWay = 0
|
|
|
+ this._pay()
|
|
|
+ },
|
|
|
+ // 余额支付
|
|
|
+ balancePayFn() {
|
|
|
+ this.form.payWay = 2
|
|
|
+ this.passwordModal = true
|
|
|
+ },
|
|
|
+ passwordModalClick(e) {
|
|
|
+ if (e.index === 0) {
|
|
|
+ this.modalCancel()
|
|
|
+ } else {
|
|
|
+ this._pay()
|
|
|
}
|
|
|
- })
|
|
|
- },
|
|
|
- payFail() {
|
|
|
- alert('支付失败!')
|
|
|
+ },
|
|
|
+ modalCancel() {
|
|
|
+ this.passwordModal = false
|
|
|
+ this.modalForm.payPassword = ''
|
|
|
+ },
|
|
|
+ // 支付成功
|
|
|
+ paySuccess() {
|
|
|
+ // alert('支付成功!')
|
|
|
+ this.$util.pageTo({
|
|
|
+ url: '/pages/callback/index',
|
|
|
+ type: 2,
|
|
|
+ query: {
|
|
|
+ pagestatus: 3,
|
|
|
+ ...this.params
|
|
|
+ // orderSn: this.option.orderSn,
|
|
|
+ // payDiscountPrice: res.data.discountAmount
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ payFail() {
|
|
|
+ alert('支付失败!')
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
.app-content {
|
|
|
- min-height: 0;
|
|
|
+ // min-height: 0;
|
|
|
padding-top: 100px;
|
|
|
// padding-bottom: 120px;
|
|
|
}
|
|
|
@@ -382,8 +388,10 @@ export default {
|
|
|
}
|
|
|
// 匿名派送
|
|
|
.none-name-delivery {
|
|
|
- padding-left: 30px;
|
|
|
- margin-top: 40px;
|
|
|
+ // padding-left: 30px;
|
|
|
+ padding: 26px 30px;
|
|
|
+ // margin-top: 40px;
|
|
|
+ background-color: #fff;
|
|
|
.none-name-text {
|
|
|
margin-left: 14px;
|
|
|
color: $fontColor2;
|
lalala