<template> <div> <flexbox orient="vertical" :gutter="0"> <flexbox-item> <div class="flex-demo"> <div> <div class="meal_box"> <flexbox :gutter="0" class="select_title"> <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‘, "storeCardInfo", "storeName", "addressType", "delivery", "self_mention", ]), }, created(){ this.getStorage() this.wechatConfig() this.getDefaultAddress() if(!this.storeCardInfo){ this.getCardInfo() }else{ this.cardInfo=this.storeCardInfo } 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 } }).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.wechatCheck=false; this.wechatCircle=true; this.chooseThisCard=true; }, selectWechat(){ this.wechatCheck=true; this.wechatCircle=false; this.cardCheck=false; this.cardCircle=true; this.payType=1; }, /** 选择消费卡的function */ cardSelected(index,item){ 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.shopCart.num ==0 ){ return { code : ‘error‘, msg: ‘您还没有购买商品~‘} } 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 } 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>