支付页面 account。vue

最新推荐文章于 2024-04-18 19:44:04 发布
最新推荐文章于 2024-04-18 19:44:04 发布
阅读量211 收藏
点赞数
文章标签： javascript json ViewUI
原文链接：http://www.cnblogs.com/MR-cui/p/8919103.html
版权 
<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>

 

转载于:https://www.cnblogs.com/MR-cui/p/8919103.html

asd2014916
关注
Vue的H5页面唤起支付宝支付功能
10-17
这样用户的浏览器就会自动跳转到支付宝的支付页面，并由用户完成支付操作。 4. 支付完成后的回调处理：支付完成后，支付宝会根据后端接口中指定的returnUrl回调页面。后端需要处理支付宝返回的支付结果通知，并进行...
Vue3电商项目实战-结算&支付 4【08-支付-支付页面-基础布局、10-支付-支付页面-信息展示、11-支付-支付流程】
m0_52896752的博客
03-13 1983
Vue3电商项目实战-结算&支付 4【08-支付-支付页面-基础布局、10-支付-支付页面-信息展示、11-支付-支付流程】
支付界面的vue前端实现
qq_47875931的博客
08-08 4932
支付界面vue的前端实现
黑马程序员前端 Vue3 小兔鲜电商项目——（十一）支付页
赵士杰——成功并非一蹴而就，而是在持之以恒的努力中逐渐实现。
06-26 1871
黑马程序员前端 Vue3 小兔鲜电商项目——（十一）支付页
vue3项目（十）---支付
m0_61368323的博客
05-15 1873
支付模块-渲染基础数据。
vue-支付模块集成实现一套代码实现兼容pc/h5 -- 微信/支付宝--支付
weixin_45408578的博客
01-04 1296
场景： 在手机浏览器中打开微信支付，支付宝支付，在网页版浏览器打开支付实现方法，一套代码实现兼容
Vue仿支付宝支付功能
12-29
先给大家上个效果图：   ... 确认支付 <span>{{password}}</span> <input class=psd-input type=password readonly v-for=(value,index) in passwordGroup :key=index :value=value.valu
Vue3.0配置多页面应用
03-17
在配置Vue3.0的多页面应用时，我们通常会涉及到以下几个关键文件： 1. **vue.config.js**：这是Vue CLI自定义配置文件，用于扩展默认配置。在多页面应用中，我们需要在此配置`pages`对象，列出所有的入口文件，例如...
VUE页面demo
12-25
在"VUE页面demo"项目中，结合Vue.js和Element UI，你可以找到40个实际的页面示例，这些示例涵盖了常见的Web应用功能，如登录、注册、表格、表单、按钮、导航、弹窗、时间日期选择器等。这对于Vue.js初学者来说，是一...
前端vue制作的h5页面接入微信支付流程(jsapi方式)
qq_39143010的博客
11-29 7132
公众号商户号备案域名配置应用先参考支付指引接入准备基本步骤1、在商户号关联公众号2、在商户号配置支付授权目录（支付目录+回调目录）3、在公众号配置网页授权域名。
vue实现H5支付（微信，支付宝）
热门推荐
努力奔跑的小不点
02-23 2万+
vue实现H5支付（微信，支付宝）
Vue.js入门(六)
仰望星空
11-18 242
目录 第一章 webpack中url-loader的使用 1.1 用url-loader读取图片 1.2 用url-loader处理字体文件 第二章 webpack和npm中几个问题的说明 第三章 webpack中babel的配置 3.1 关于babel的基本配置 3.1.1 安装对应的包   3.1.2 书写对应的配置规则 3.1.3 新建.babelrc文件来 并进行配置 ...
Vue项目流程7，交易页面，提交订单，支付页面，利用element UI 以及 QRCode 完成微信支付，弹出框按钮的相关工作，个人中心以及子路由我的订单
qq_49080239的博客
09-02 3515
此时需要使用到定时器，当用户没有支付即服务器返回的是未支付成功，此时需要一直向服务器发送请求，直到支付完成或是取消支付。4、二维码生成之后需要知道成功或失败，如果支付成功就路由跳转如果支付失败弹出提示信息，所以此时需要向服务器发请求。React(Vue):antd[PC端]----antd-mobile[移动端]2、点击提交订单时，还需要向服务器发起一次请求并将支付的信息传递给服务器。Vue:ElementUI[PC端]----vant[移动端]（3）路由跳转时派发action，即交易页面挂载完毕。
vue中调起支付
weixin_45628827的博客
03-14 1934
最近项目中涉及到支付，h5中的微信支付，支付宝支付，微信内部的支付； 1.h5中的支付宝支付 h5中的支付宝支付后端会返回支付宝支付url或者form代码段，一般情况会返回form代码段，支付宝第三方支付会返回url，打开支付宝url,或者提供容器，打开form，跳转支付页面； // 订单支付支付宝 let href = window.location.host; href =window.location.protocol +"//" + href +"/landingPage/getGiftV3
微信支付-vue 实现微信支付-前端篇
王佳楠的专栏
12-18 7588
微信支付系列文章 微信支付-java后端实现 微信支付-vue 前端实现 vue demo: 下载地址文章底部 技术栈 vue vue-cli weixin-js-sdk (微信jsSdk) 微信支付术语 微信jsSdk需要提前初始化完成 初始化加密参数需要通过后端计算后返回给前端 初始化url为在微信支付配置的前端url. (产品中心 => 开发配置 => JSAPI支付...
vue3前端实现微信支付
bxp447215774的博客
03-24 4436
(2) 在Vue3的mounted生命周期中，调用getWxPaySign方法获取微信支付SDK的签名。(3) 在resolve回调函数中调用wxPay方法发起微信支付。(1) 在页面中定义支付金额、用户id等相关参数。
vue-手机支付页面
hjy170314的博客
05-19 1170
手机自定义支付页面,不调用手机自带键盘,自定义键盘 html部分 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"> <
支付方式模块代码示例
最新发布
weixin_44389618的博客
04-18 297
效果展示![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/f397db6e59244b27abcc4d80d58fce6e.png =pic_center)以上是完整的代码示例，下面是代码解析。
Vue2项目实战：尚品汇（四）注册登录页面、提交订单和支付页面
DogEgg_001的博客
10-17 842
图片懒加载是指在网页中，当用户滚动页面时才加载图片的一种技术。相对于传统的图片加载方式，懒加载可以减少初始页面的加载时间，提高网站的响应速度。使用插件vue-lazyload实现图片懒加载下载插件：
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值