account.vue 以及continuePay.vue 通过action 里面的ajax后去支付
Posted MR崔
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了account.vue 以及continuePay.vue 通过action 里面的ajax后去支付相关的知识，希望对你有一定的参考价值。
continuePay.vue
<template> <div id="detailOrder"> <flexbox orient="vertical" :gutter="0"> <flexbox-item> <div class="flex-demo"> <div class="detailHeader"> <span class="goOrder" @click="goOrderDetail(‘/detail‘)"> <icon name="detailback" :scale="3"></icon> </span> <span>选择支付方式</span> </div> </div> </flexbox-item> <flexbox-item> <div class="choose_box"> <div class="my_card" @click="selectWechat"> <flexbox :gutter="0"> <flexbox-item :span="2" class="card_icon"> <p class="middle_icon"><icon name="wechatPay" scale="3"></icon></p> </flexbox-item> <flexbox-item :span="8"> <p>微信支付</p> </flexbox-item> <flexbox-item :span="2"> <p class="middle_icon" v-if="wechatCircle"><x-icon type="ios-circle-outline" size="26"></x-icon></p> <p class="middle_icon" v-if="wechatCheck"><x-icon type="ios-checkmark-outline" size="26"></x-icon></p> </flexbox-item> </flexbox> </div> <div class="my_card" @click="selectMyCard" > <flexbox :gutter="0"> <flexbox-item :span="2" class="card_icon"> <p class="middle_icon"><icon name="cardPay" scale="3"></icon></p> </flexbox-item> <flexbox-item :span="8"> <p :class="{disableCard:cardInfo.length==‘0‘}">消费卡</p> </flexbox-item> <flexbox-item :span="2"> <p class="middle_icon" v-if="cardCircle"><x-icon type="ios-circle-outline" size="26"></x-icon></p> <p class="middle_icon" v-if="cardCheck"><x-icon type="ios-checkmark-outline" size="26"></x-icon></p> </flexbox-item> </flexbox> </div> <div class="blank_box"></div> </div> <popup v-model="chooseThisCard" position="bottom" max-height="50%"> <h4 class="card_title">请选择卡片</h4> <div v-for="(item,index) in cardInfo" class="card_item" @click="cardSelected(index,item)"> <flexbox :gutter="0"> <flexbox-item :span="2"> <div class="card_one_item"> <icon name="cardPay" scale="3"></icon> </div> </flexbox-item> <flexbox-item :span="8"> <p>{{item.name}} <span>（{{item.card_code}}）</span></p> </flexbox-item> <flexbox-item :span="2"> <p class="selected" v-if="showIcon(index)"><x-icon type="ios-checkmark-outline" size="30"></x-icon></p> <p v-if="otherCard(index)"><x-icon type="ios-circle-outline" size="30"></x-icon></p> </flexbox-item> </flexbox> </div> </popup> </flexbox-item> <flexbox-item> <div class="flex-demo menu-bottom" > <flexbox :gutter="0" class="bottom_order"> <flexbox-item :span="9"> <div class="money_box"> 合计：<span class="order_money">￥</span> </div> </flexbox-item> <flexbox-item :span="3"> <div class="payOrder" @click="payOrder">去支付</div> </flexbox-item> </flexbox> </div> </flexbox-item> </flexbox> </div> </template> <script> import { mapGetters } from ‘vuex‘ import {Flexbox, FlexboxItem,Popup } from ‘vux‘ export default { data() { return { wechatCheck:true, wechatCircle:false, cardCheck:false, cardCircle:true, chooseThisCard:false, currentItem:‘‘, } }, computed: { ...mapGetters([ ‘orderNo‘, "cardInfo", ]), }, created(){ console.log(this.orderNo) console.log(this.cardInfo) if(!this.cardInfo){ this.$store.dispatch(‘getCardInfo‘) } }, methods:{ payOrder(){ }, getCardInfo(){ this.$http.get(‘/shop/api/get-wx-user-customer‘,{ params:{ customerId:_global.customerId } }).then((response) => { if(response.data.status){ this.cardInfo=response.data.data; this.$store.commit(‘saveMyCard‘,this.cardInfo); }else{ this.$store.commit(‘saveMyCard‘,{}); } }).catch((error)=>{ this.$vux.toast.show({ text: "网络异常", type: ‘cancel‘ }) }) }, goOrderDetail(path){ this.$router.push({path:path}) }, /**选择微信&&消费卡的function */ selectMyCard(){ if(this.cardInfo.length==‘0‘){ this.$vux.toast.show({ text: "没有消费卡", type: ‘cancel‘ }) return } this.chooseThisCard=true; }, selectWechat(){ this.wechatCheck=true; this.wechatCircle=false; this.cardCheck=false; this.cardCircle=true; this.cardIndex=‘‘; this.payType=1; }, /** 选择消费卡的function */ cardSelected(index,item){ this.wechatCheck=false; this.wechatCircle=true; this.cardIndex=index; this.chooseThisCard=false; this.cardCheck=true; this.cardCircle=false; this.currentItem=item; this.payType=2; }, showIcon(index){ if(index === this.cardIndex){ return true }else { return false; } }, otherCard(index){ if(index === this.cardIndex){ return false }else { return true; } }, }, components: { Flexbox, FlexboxItem,Popup }, } </script> <style lang="less"> #detailOrder{ .detailHeader{ height: 45px; text-align: center; position: relative; font-size: 18px; line-height: 45px; border-bottom: 3px solid #ccc; .goOrder{ position: absolute; left: 20px; top: 6px; } } .choose_box{ height: 105px; .disableCard{ color: #c0c1c2; } .middle_icon{ margin:12px 0 6px 0; } .card_icon{ text-align: center; } .my_card{ background: #fff; border-top: 1px solid #F2F2F2; } } .menu-bottom{ position: fixed; width: 100%; bottom: 0; .bottom_order{ line-height: 60px; height: 60px; box-sizing: border-box; font-size:18px; background: #fff; .money_box{ margin-left: 10px; height:60px; } .order_money{ color:#EB3D3D; font-size: 22px; } .payOrder{ text-align: center; background:#0c6; color:#fff; } } } } </style>
account.vue
<template> <div> <flexbox orient="vertical" :gutter="0"> <flexbox-item> <div class="flex-demo"> <div> <div class="meal_box"> <flexbox :gutter="0" class="select_title" v-if="self_mention==1&&delivery==1"> <flexbox-item :span="6"> <button @click="selfMeal" class="selfMeal" :class="{selectSelf:addressType==1}" :disabled="self_mention==0">自助取餐</button> </flexbox-item> <flexbox-item :span="6"> <button @click="deliveryMeal" class="deliveryMeal" :class="{selectDelivery:addressType==2}" :disabled="delivery==0">送货上门</button> </flexbox-item> </flexbox> <flexbox :gutter="0" class="selfDetail" v-if="addressType==1"> <flexbox-item :span="1"> <icon name="address" scale="2"></icon> </flexbox-item> <flexbox-item :span="10"> <div> <p>{{storeName.name}}</p> <div class="detailAddress">地址：{{storeName.address}}<span class="my_remark">{{storeName.address_detail}}</span></div> </div> </flexbox-item> </flexbox> <flexbox :gutter="0" class="deliveryDetail" v-if="addressType==2" @click.native="selectAddress"> <flexbox-item :span="1"> <icon name="address" scale="2"></icon> </flexbox-item> <flexbox-item :span="10"> <div v-if="addressItem"> <p><span class="my_remark">收货人：{{addressItem.name}}</span></p> <p><span class="my_remark">手机号：{{addressItem.phone}}</span></p> <div class="detailAddress"> <span class="my_remark"> 收货地址：{{addressItem.address}}{{addressItem.address_detail}} </span> </div> </div> <div v-else="!addressItem"> 请选择地址 </div> </flexbox-item> <flexbox-item :span="1"> <icon name="rightIcon" scale="3"></icon> </flexbox-item> </flexbox> </div> </div> </div> </flexbox-item> <flexbox-item> <scroller lock-x height="-295px"> <div class=""> <div v-for="list of shopCart.items"> <shopcart-item :good=item v-for="item of list"></shopcart-item> </div> </div> </scroller> </flexbox-item> <flexbox-item> <div class="choose_box"> <div class="my_card" @click="selectWechat"> <flexbox :gutter="0"> <flexbox-item :span="2" class="card_icon"> <p class="middle_icon"><icon name="wechatPay" scale="3"></icon></p> </flexbox-item> <flexbox-item :span="8"> <p>微信支付</p> </flexbox-item> <flexbox-item :span="2"> <p class="middle_icon" v-if="wechatCircle"><x-icon type="ios-circle-outline" size="26"></x-icon></p> <p class="middle_icon" v-if="wechatCheck"><x-icon type="ios-checkmark-outline" size="26"></x-icon></p> </flexbox-item> </flexbox> </div> <div class="my_card" @click="selectMyCard"> <flexbox :gutter="0"> <flexbox-item :span="2" class="card_icon"> <p class="middle_icon"><icon name="cardPay" scale="3"></icon></p> </flexbox-item> <flexbox-item :span="8"> <p>消费卡</p> </flexbox-item> <flexbox-item :span="2"> <p class="middle_icon" v-if="cardCircle"><x-icon type="ios-circle-outline" size="26"></x-icon></p> <p class="middle_icon" v-if="cardCheck"><x-icon type="ios-checkmark-outline" size="26"></x-icon></p> </flexbox-item> </flexbox> </div> <div class="blank_box"></div> </div> <popup v-model="chooseThisCard" position="bottom" max-height="50%"> <h4 class="card_title">请选择卡片</h4> <div v-for="(item,index) in cardInfo" class="card_item" @click="cardSelected(index,item)"> <flexbox :gutter="0"> <flexbox-item :span="2"> <div class="card_one_item"> <icon name="cardPay" scale="3"></icon> </div> </flexbox-item> <flexbox-item :span="8"> <p>{{item.name}} <span>（{{item.card_code}}）</span></p> </flexbox-item> <flexbox-item :span="2"> <p class="selected" v-if="showIcon(index)"><x-icon type="ios-checkmark-outline" size="30"></x-icon></p> <p v-if="otherCard(index)"><x-icon type="ios-circle-outline" size="30"></x-icon></p> </flexbox-item> </flexbox> </div> </popup> </flexbox-item> <flexbox-item> <div class="flex-demo menu-bottom" > <flexbox :gutter="0" class="bottom_order"> <flexbox-item :span="9"> <div class="money_box"> 合计：<span class="order_money">￥{{shopCart.totalMoney}}</span> </div> </flexbox-item> <flexbox-item :span="3"> <div class="payOrder" @click="payOrder">去支付</div> </flexbox-item> </flexbox> </div> </flexbox-item> </flexbox> </div> </template> <script> import { mapGetters } from ‘vuex‘ import {Shopcart,ShopcartItem} from "../shopcart" import { Cell, Group,Popup,Flexbox, FlexboxItem, Scroller,XButton,XHeader,Selector} from ‘vux‘ export default { data() { return { wechatCheck:true, wechatCircle:false, cardCheck:false, cardCircle:true, chooseThisCard:false, orderNo:‘‘, addressItem:‘‘, payType:1, } }, computed: { ...mapGetters([ ‘shopCart‘, "cardInfo", "storeName", "addressType", "delivery", "self_mention", ]), }, created(){ this.getStorage() this.wechatConfig() this.getDefaultAddress() if(!this.cardInfo){ this.$store.dispatch(‘getCardInfo‘) } if(!_global.customerId){ let $this=this setTimeout(()=>{ this.$vux.toast.show({ text: "新用户请绑定手机号", type:‘cancel‘, onHide(){ $this.$router.push({path:"/binding"}) } },1000) }) } }, methods: { getStorage(){ let cartStorage = JSON.parse(window.sessionStorage.getItem(‘shopCart‘)) let storeStorage = JSON.parse(window.sessionStorage.getItem(‘storeName‘)) let deliveryStorage = JSON.parse(window.sessionStorage.getItem(‘delivery‘)) let selfStorage = JSON.parse(window.sessionStorage.getItem(‘self_mention‘)) let addressTypeStorage = JSON.parse(window.sessionStorage.getItem(‘addressType‘)) if(cartStorage){ this.$store.commit("saveShopCart",cartStorage) } if(storeStorage){ this.$store.commit("storageStore",storeStorage) } if(deliveryStorage){ this.$store.commit("delivery",deliveryStorage) } if(selfStorage){ this.$store.commit("selfMention",selfStorage) } if(addressTypeStorage){ this.$store.commit("saveAddressType",addressTypeStorage) } }, getDefaultAddress(){ this.$http.get(‘/shop/api/get-default-address‘,{ params:{ customerId:_global.customerId } }).then((response) => { if(response.data.status){ this.addressItem=response.data.data this.$store.commit("saveAddressItem",this.addressItem) } }).catch((error)=>{ this.$vux.toast.show({ text: "网络异常", type: ‘cancel‘ }) }) }, // getCardInfo(){ // this.$http.get(‘/shop/api/get-wx-user-customer‘,{ // params:{ // customerId:_global.customerId // } // }).then((response) => { // if(response.data.status){ // this.cardInfo=response.data.data; // this.$store.commit(‘saveMyCard‘,this.cardInfo); // }else{ // this.$store.commit(‘saveMyCard‘,{}); // } // }).catch((error)=>{ // this.$vux.toast.show({ // text: "网络异常", // type: ‘cancel‘ // }) // }) // }, selfMeal(){ this.$store.commit(‘saveAddressType‘,1); }, deliveryMeal(){ this.$store.commit(‘saveAddressType‘,2); }, selectAddress(){ this.$router.push({ name: ‘addressList‘, params: {clickStatus: 1}}) }, /**选择微信&&消费卡的function */ selectMyCard(){ this.chooseThisCard=true; }, selectWechat(){ this.wechatCheck=true; this.wechatCircle=false; this.cardCheck=false; this.cardCircle=true; this.cardIndex=‘‘; this.payType=1; }, /** 选择消费卡的function */ cardSelected(index,item){ this.wechatCheck=false; this.wechatCircle=true; this.cardIndex=index; this.chooseThisCard=false; this.cardCheck=true; this.cardCircle=false; this.currentItem=item; this.payType=2; }, showIcon(index){ if(index === this.cardIndex){ return true }else { return false; } }, otherCard(index){ if(index === this.cardIndex){ return false }else { return true; } }, /** 下面是跟支付有关的function*/ wechatConfig() { let urls = location.href.split(‘#‘)[0] let postData={ url:urls, mallId:_global.mallId } this.$http.post(‘/shop/api/js-sdk-config‘, postData).then((response) => { if (response.status === 200 && response.data.status === 1) { this.$wechat.config(JSON.parse(response.data.data)) } else { this.$vux.toast.show({ text: ‘微信参数错误‘, type: ‘cancel‘ }) } }).catch(() => { this.$vux.toast.show({ text: "网络异常", type: ‘cancel‘ }) }) }, validate(){ if(!this.addressItem&&this.addressType==‘2‘){ return { code : ‘error‘, msg: ‘请选择收货地址‘} } if(!this.storeName&&this.addressType==‘1‘){ return { code : ‘error‘, msg: ‘请选择收货地址‘} } return {code :‘success‘} }, payOrder(){ let validResult=this.validate() if(validResult.code ===‘error‘){ this.$vux.toast.show({ text: validResult.msg, type: ‘cancel‘ }) return false } if(this.shopCart.num ==0 ){ let self=this this.$vux.toast.show({ text: "你还没有购买商品", type: ‘cancel‘, time:"1000", onHide(){ self.$router.push({path:‘/‘}) } }) return } var postAddress if(this.addressType==1){ postAddress=this.storeName }else{ postAddress=this.addressItem } let orderInfo={ shopCart:this.shopCart, address:postAddress.id, mallId:_global.mallId, customerId:_global.customerId, type:this.addressType, } this.$http.post(‘/shop/api/create-order‘,orderInfo).then((response) => { if(response.data.status){ this.orderNo=response.data.data if(this.payType==2){ this.cardPay() }else{ this.getWxApi() } }else{ this.$vux.toast.show({ text: response.data.message, type:‘cancel‘ }) } }).catch((error)=>{ this.$vux.toast.show({ text: "网络异常", type: ‘cancel‘ }) }) }, cardPay(){ let postCard={ type:1, orderNo:this.orderNo, cardCode:this.currentItem.card_code, customerId:_global.customerId, totalAmount:this.shopCart.totalMoney, } this.$http.post(‘/shop/api/pay-order‘,postCard).then((response) => { if(response.data.status){ this.$store.dispatch("emptyCart") this.$store.commit("saveItemIndex",‘2‘) // this.$store.commit("savePayType",‘2‘) let $this=this this.$vux.toast.show({ text: ‘支付成功‘, type: ‘success‘, onHide(){ $this.$router.push({path:‘/orderList‘}) } }) }else{ this.$vux.toast.show({ text: response.data.message, }) } }).catch((error)=>{ this.$vux.toast.show({ text: "网络异常", type:‘cancel‘ }) }) }, wechatPay(config) { let $this= this this.$wechat.chooseWXPay({ timestamp: config.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符 nonceStr: config.nonceStr, // 支付签名随机串，不长于 32 位 package: config.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***） signType: config.signType, // 签名方式，默认为‘SHA1‘，使用新版支付需传入‘MD5‘ paySign: config.paySign, // 支付签名 appId:config.appId, success: function (response) { // 支付成功后的回调函数 $this.$store.dispatch("emptyCart") $this.$store.commit("saveItemIndex",‘2‘) // $this.$store.commit("savePayType",‘1‘) $this.$vux.toast.show({ text: ‘支付成功‘, type: ‘success‘, onHide(){ $this.$router.push({path:‘/orderList‘}) } }) }, cancel: function (re) { $this.$vux.toast.show({ text: ‘支付已取消‘, type: ‘cancel‘ }) } }); }, getWxApi(){ this.$http.post(‘/shop/api/wx-pay‘,{orderNo:this.orderNo}).then((response) => { if(response.data.status){ this.wechatPay(response.data.data) }else{ this.$vux.toast.show({ text: response.data.message, type:‘cancel‘ }) } }).catch((error)=>{ this.$vux.toast.show({ text: "网络异常", type:‘cancel‘ }) }) }, }, components: { Group, Cell, Flexbox, FlexboxItem, Scroller, XHeader, Popup, XButton, Selector, Shopcart,ShopcartItem }, } </script> <style lang="less"> body,html{ background: #F2F2F2; font-size: 14px; } .bottom_order{ line-height: 60px; height: 60px; box-sizing: border-box; font-size:18px; background: #fff; .money_box{ margin-left: 10px; height:60px; } .order_money{ color:#EB3D3D; font-size: 22px; } .payOrder{ text-align: center; background:#0c6; color:#fff; } } .my_remark{ display: inline-block; padding-left:10px; } .meal_box{ padding: 5px 10px; height:120px; background: #fff; } .selfDetail{ margin-top: 15px; .detailAddress{ color: #999; } } .deliveryDetail{ margin-top: 15px; .detailAddress{ color: #999; } } .select_title{ text-align: center; button{ padding: 2px 10px; min-width: 120px; text-align: center; line-height: 30px; display: inline-block; border: 1px solid #E4E4E4; color: #A1A1A1; background: #fff; } .selectSelf{ background: #EB3D3D; color: #fff; border:none; } .selectDelivery{ background: #EB3D3D; color: #fff; border:none; } .selfMeal{ float: right; } .deliveryMeal{ float: left; } } .vux-x-icon { fill: #09BB07; } .choose_box{ height: 105px; .middle_icon{ margin:12px 0 6px 0; } .card_icon{ text-align: center; } .my_card{ background: #fff; border-top: 1px solid #F2F2F2; } } .card_title{ line-height: 40px; text-align: center; background:#fff; font-weight:300; } .card_item{ background: #fff; border:1px solid #f2f2f2; padding:5px 10px; .card_one_item{ margin-top: 8px; } } </style>
store/index.js
import Vue from ‘vue‘ import Vuex from ‘vuex‘ import Axios from ‘../service/axios‘ Vue.use(Vuex) export default new Vuex.Store({ state: { shopCart:{ items:{}, totalMoney:0, num:0, }, detailProList:{}, showShopcart:false, showDetailFood:false, storeName:{}, delivery:‘‘, self_mention:‘‘, order_no:‘‘, userInfo:‘‘, cardInfo:‘‘, addressList:‘‘, ifAddNewAddress:false, getCurrentMoney (money){ let money1 = money * 100; let intMoney1 = parseInt(money1); let diff = money1 - intMoney1; let exit=String(diff).indexOf(‘e‘) let decDiff = parseInt(diff * 10); console.log(decDiff) if (decDiff > 5&&exit==‘-1‘) { intMoney1 += 1; } return intMoney1/100; }, addressType:‘1‘, itemIndex:‘‘, // payType:‘‘, cartStyle:‘1‘, }, getters: { shopCart:state=>{ return state.shopCart }, cartStyle:state=>{ return state.cartStyle }, // payType:state=>{ // return state.payType // }, addressType:state=>{ return state.addressType }, allAddressList:state=>{ return state.addressList }, ifAddNewAddress:state=>{ return state.ifAddNewAddress }, cardInfo:state=>{ return state.cardInfo }, userInfo:state=>{ return state.userInfo }, detailProList:state=>{ return state.detailProList }, showShopcart:state=>{ return state.showShopcart }, showDetailFood:state=>{ return state.showDetailFood }, storeName:state=>{ return state.storeName }, orderNo:state=>{ return state.order_no }, delivery:state=>{ return state.delivery }, self_mention:state=>{ return state.self_mention }, }, mutations: { saveItemIndex(state,itemIndex){ state.itemIndex=itemIndex }, controlCartStyle(state,cartStyle){ state.cartStyle=cartStyle }, saveShopCart(state,shopCart){ state.shopCart=shopCart }, // savePayType(state,payType){ // state.payType=payType // }, saveAddressType(state,type){ state.addressType=type window.sessionStorage.setItem(‘addressType‘,JSON.stringify(state.addressType)); }, saveUserInfo(state,userInfo){ state.userInfo=userInfo; }, selfMention(state,item){ state.self_mention=item window.sessionStorage.setItem(‘self_mention‘,JSON.stringify(state.self_mention)); }, delivery(state,item){ state.delivery=item window.sessionStorage.setItem(‘delivery‘,JSON.stringify(state.delivery)); }, saveMyCard(state,cardInfo){ state.cardInfo=cardInfo }, saveOrderNo(state,order_no){ state.order_no=order_no }, addShopCart(state,item){ let cart =state.shopCart if(cart.items[item.date] === undefined){ cart.items[item.date]=[] } let isExist=false for(let i in cart.items[item.date]){ if(cart.items[item.date][i].id==item.id){ cart.items[item.date][i].num +=1; isExist=true; break; } } if(!isExist){ item.num=1 cart.items[item.date].push(item) } cart.num +=1; cart.totalMoney +=Number(item.price); cart.totalMoney=state.getCurrentMoney(cart.totalMoney); window.sessionStorage.setItem(‘shopCart‘,JSON.stringify(cart)); }, saveAddressList(state,addressList){ state.addressList=addressList state.ifAddNewAddress=false }, ifAddNewAddress(state,ifAddNewAddress){ state.ifAddNewAddress=ifAddNewAddress }, minusShopCart(state,item){ if(item.num==0){ return } item.num -=1; let cart=state.shopCart cart.num -=1; cart.totalMoney -=Number(item.price); cart.totalMoney=state.getCurrentMoney(cart.totalMoney); if(item.num==0){ var deleteShopCart=cart.items[item.date]; for(var j=0;j<deleteShopCart.length;j++){ if(item.id==deleteShopCart[j].id){ deleteShopCart.splice(j,1); } } } if(cart.num==0){ state.showShopcart=false } window.sessionStorage.setItem(‘shopCart‘,JSON.stringify(cart)); }, deleteShopCart(state,item){ let cart=state.shopCart cart.num -=item.num cart.totalMoney -=(item.num*item.price) cart.totalMoney=state.getCurrentMoney(cart.totalMoney); /** item.number = 0 是为了清空商品详情里面number */ item.num=0 var deleteShopCart=cart.items[item.date]; for(var j=0;j<deleteShopCart.length;j++){ if(item.id==deleteShopCart[j].id){ deleteShopCart.splice(j,1); } } if(cart.num==0){ state.showShopcart=false } window.sessionStorage.setItem(‘shopCart‘,JSON.stringify(cart)); }, emptyShopCart(state){ state.shopCart={ items:{}, totalMoney:0, num:0, } state.detailProList.num=0 state.showShopcart=false window.sessionStorage.setItem(‘shopCart‘,JSON.stringify(state.shopCart)); }, detailProList(state,item){ state.detailProList=item }, showShopcart(state){ state.showShopcart=!state.showShopcart }, showDetail(state){ state.showDetailFood=!state.showDetailFood }, storageStore(state,item){ state.storeName=item window.sessionStorage.setItem(‘storeName‘,JSON.stringify(state.storeName)); }, }, actions: { addCart({commit},item){ commit("addShopCart",item) }, minusCart({commit},item){ commit("minusShopCart",item) }, deleteCart({commit},item){ commit("deleteShopCart",item) }, emptyCart({commit}){ commit("emptyShopCart") }, watchDetail({commit},item){ commit("detailProList",item) }, storageStore({commit},item){ commit("storageStore",item) }, showCart({commit}){ commit("showShopcart") }, showDetailFood({commit}){ commit("showDetail") }, getCardInfo({commit}){ Axios.get(‘/shop/api/get-wx-user-customer‘,{ params:{ customerId:_global.customerId } }).then((response) => { if(response.data.status){ console.log(11111) commit(‘saveMyCard‘,response.data.data); } }) } } })
以上是关于account.vue 以及continuePay.vue 通过action 里面的ajax后去支付的主要内容，如果未能解决你的问题，请参考以下文章