17513365663
/
test


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
							<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
        <title>菩提阁</title>
        <link rel="icon" href="../images/favico.ico">
        <!--不同屏幕尺寸根字体设置-->
        <script src="../js/base.js"></script>
        <!--element-ui的样式-->
        <link rel="stylesheet" href="../../backend/plugins/element-ui/index.css" />
        <!--引入vant样式-->
        <link rel="stylesheet" href="../styles/vant.min.css"/>
        <!-- 引入样式  -->
        <link rel="stylesheet" href="../styles/index.css" />
        <!--本页面内容的样式-->
        <link rel="stylesheet" href="../styles/add-order.css" />
    </head>
    <body>
        <div id="add_order" class="app">
            <div class="divHead">
                <div class="divTitle">
                    <i class="el-icon-arrow-left" @click="goBack"></i>菩提阁
                </div>
            </div>
            <div class="divContent">
                <div class="divAddress">
                    <div @click="toAddressPage">                    
                        <div class="address">{{address.detail}}</div>
                        <div class="name">
                            <span>{{address.consignee}}{{address.sex === '1' ? '先生':'女士'}}</span>
                            <span>{{address.phone}}</span>
                        </div>
                        <i class="el-icon-arrow-right"></i>
                    </div>
                    <div class="divSplit"></div>
                    <div class="divFinishTime">预计{{finishTime}}送达</div>
                </div>
                <div class="order">
                    <div class="title">订单明细</div>
                    <div class="divSplit"></div>
                    <div class="itemList">
                        <div class="item" v-for="(item,index) in cartData" :key="index">
                            <el-image :src="imgPathConvert(item.image)">
                                <div slot="error" class="image-slot">
                                    <img src="../images/noImg.png"/>
                                </div>
                            </el-image>
                            <div class="desc">
                                <div class="name">{{item.name}}</div>
                                <div class="numPrice">
                                    <span class="num">x{{item.number}}</span>
                                    <div class="price">
                                        <span class="spanMoney">￥</span>{{item.amount}}</div>
                                    </div>
                                </div>
                            </div>
                    </div>
                </div>
                <div class="note">
                    <div class="title">备注</div>
                    <van-field

                        v-model="note"

                        rows="2"

                        autosize

                        type="textarea"

                        maxlength="50"

                        placeholder="请输入您需要备注的信息"

                        show-word-limit

                    />
                </div>
            </div>
            <div class="divCart">
                <div :class="{imgCartActive: cartData && cartData.length > 0, imgCart:!cartData || cartData.length<1}"></div>
                <div :class="{divGoodsNum:1===1, moreGoods:cartData && cartData.length > 99}" v-if="cartData && cartData.length > 0">{{ goodsNum }}</div>
                <div class="divNum">
                    <span>￥</span>
                    <span>{{goodsPrice}}</span>
                </div>
                <div class="divPrice"></div>
                <div :class="{btnSubmitActive: cartData && cartData.length > 0, btnSubmit:!cartData || cartData.length<1}" @click="goToPaySuccess">去支付</div>
              </div>
        </div>
        <!-- 开发环境版本，包含了有帮助的命令行警告 -->
        <script src="../../backend/plugins/vue/vue.js"></script>
        <!-- 引入组件库 -->
        <script src="../../backend/plugins/element-ui/index.js"></script>
        <!-- 引入vant样式 -->
        <script src="../js/vant.min.js"></script>
        <script src="../api/address.js"></script>
        <!-- 引入axios -->
        <script src="../../backend/plugins/axios/axios.min.js"></script>
        <script src="../js/request.js"></script>
        <script src="../js/common.js"></script>
        <script src="../api/main.js"></script>
        <script src="../api/order.js"></script>
        <script>

            new Vue({

                el:"#add_order",

                data(){

                    return {

                        address:{

                            phone:'',//手机号

                            consignee:'',//姓名

                            detail:'',//详细地址

                            sex:'1',

                            id:undefined

                        },

                        finishTime:'',//送达时间

                        cartData:[],

                        note:''//备注信息

                    }

                },

                computed:{

                    goodsNum(){

                        let num = 0

                        this.cartData.forEach(item=>{

                            num += item.number 

                        })

                        if(num <99){

                            return num

                        }else{

                            return '99+'

                        }

                    },

                    goodsPrice(){

                    let price = 0

                    this.cartData.forEach(item=>{

                        price += (item.number * item.amount)

                    })

                    return price

                    }

                },

                created(){

                    this.initData()

                },

                mounted(){},

                methods:{

                    goBack(){

                        history.go(-1)

                    },

                    initData(){

                        //获取默认的地址

                        this.defaultAddress()

                        //获取购物车的商品

                        this.getCartData()

                    },

                    //获取默认地址

                    async defaultAddress(){

                        const res = await  getDefaultAddressApi()

                        if(res.code === 1){

                           this.address = res.data

                           this.getFinishTime()

                        }else{

                            window.requestAnimationFrame(()=>{

                                window.location.href = '/front/page/address-edit.html'

                            })

                        }

                    },

                    //获取送达时间

                    getFinishTime(){

                        let now = new Date()

                        let hour = now.getHours() +1

                        let minute = now.getMinutes()

                        if(hour.toString().length <2){

                            hour = '0' + hour

                        }

                        if(minute.toString().length <2){

                            minute = '0' + minute

                        }

                        this.finishTime = hour + ':' + minute

                    },

                    toAddressPage(){

                        window.requestAnimationFrame(()=>{

                            window.location.href = '/front/page/address.html'

                        })

                    },

                    //获取购物车数据

                    async getCartData(){

                        const res = await cartListApi({})

                        if(res.code === 1){

                            this.cartData = res.data

                        }else{

                            this.$notify({ type:'warning', message:res.msg});

                        }

                    },

                    async goToPaySuccess(){

                        const params = {

                            remark:this.note,

                            payMethod:1,

                            addressBookId:this.address.id

                        }

                        const res = await addOrderApi(params)

                        if(res.code === 1){

                            window.requestAnimationFrame(()=>{

                                window.location.replace('/front/page/pay-success.html')

                            })

                        }else{

                            this.$notify({ type:'warning', message:res.msg});

                        }

                    },

                    //网络图片路径转换

                    imgPathConvert(path){

                        return imgPath(path)

                    },

                }

            })

            </script>
        </body>
    </html>