day05

src/api/address.js

@@ -9,5 +9,6 @@ export const updateAddr = (data) => put("/p/address/updateAddr", data)
 
 export const listByPid = (data) => get("/p/area/listByPid", data)
 
+export const defaultAddr = (data, bodyData) => put(`/p/address/defaultAddr/${data}`, bodyData)
 
 export const deleteAddr = (data, bodyData) => deleted(`/p/address/deleteAddr/${data}`, bodyData)

src/api/pay.js

@@ -0,0 +1,3 @@
+import { post  } from "@/utils/request";
+
+export const payment = (data) => post("/p/order/pay", data)

src/api/prodinfo.js

@@ -10,4 +10,6 @@ export const confirm = (data) => post("/p/order/confirm", data)
 
 export const isCollection = (data) => get("/p/user/collection/isCollection", data)
 
+export const addOrCancel = (data) => post("/p/user/collection/addOrCancel", data)
+
 export const submit = (data) => post("/p/order/submit", data)

src/api/shopcart.js

@@ -1,4 +1,4 @@
-import { post, get } from "@/utils/request"
+import { post, get, deleted } from "@/utils/request"
 
 export const shopCartInfo = (data) => post("/p/shopCart/info", data)
 
@@ -6,4 +6,6 @@ export const prodCount = () => get("/p/shopCart/prodCount")
 
 export const totalPay = (data) => post("/p/shopCart/totalPay", data)
 
-export const changeItem = (data) => post("/p/shopCart/changeItem", data)
+export const changeItem = (data) => post("/p/shopCart/changeItem", data)
+
+export const deleteItem = (data) => deleted("/p/shopCart/deleteItem", data)

src/api/user.js

@@ -13,3 +13,5 @@ import {post, get} from '../utils/request'
 export const login = (data)=> post("/login", data)
 
 export const register = (data) => post("/user/register", data)
+
+export const orderCount = (data) => get("/p/myOrder/orderCount", data)

src/main.js

@@ -5,12 +5,14 @@ import store from './store'
 Vue.config.productionTip = false
 
 import {
-  Image as VanImage, Form, Field, Search, CheckboxGroup, GoodsActionIcon,
+  Image as VanImage, Form, Field, Search, CheckboxGroup, GoodsActionIcon, ContactCard,
   Swipe, Grid, GridItem, NoticeBar, Checkbox, Col, Cell, GoodsActionButton, NavBar,
   Button, Tabbar, TabbarItem, SwipeItem, Tag, Row, CellGroup, GoodsAction, AddressEdit,
-  TreeSelect, Card, Empty, SubmitBar, Stepper, Divider, Icon, ActionSheet, AddressList
+  TreeSelect, Card, Empty, SubmitBar, Stepper, Divider, Icon, ActionSheet, AddressList, CouponCell
 } from 'vant';
 
+Vue.use(CouponCell);
+Vue.use(ContactCard);
 Vue.use(NavBar);
 Vue.use(AddressEdit);
 Vue.use(AddressList);

src/router/index.js

@@ -9,6 +9,7 @@ import ShopCart from '../views/ShopCart.vue'
 import Layout from '../components/Layout.vue'
 import Prodinfo from '../views/ProdInfo.vue'
 import AddressList from '../views/AddressList.vue'
+import SubmitOrderInfo from '../views/SubmitOrderInfo.vue'
 
 Vue.use(VueRouter)
 
@@ -57,6 +58,11 @@ const routes = [
     path: '/addressList',
     name: 'addressList',
     component: AddressList
+  },
+  {  
+    path: '/submitinfo',
+    name: 'submitinfo',
+    component: SubmitOrderInfo
   }
 ]
 

src/utils/request.js

@@ -18,10 +18,10 @@ axiosRetry(axios, {
 
 const config = {
     headers: {
-        "Context-type": "application/json",
+        "Content-type": "application/json",
         "Accept": "application/json"
     },
-    baseURL : process.env.VUE_APP_URL
+    baseURL: process.env.VUE_APP_URL
 }
 
 const ajax = axios.create(config)
@@ -30,39 +30,43 @@ const ajax = axios.create(config)
  * 前后端基本都是 JWT鉴权
  * 所以我们需要在 发送请求的时候在 Header里携带 Token
  */
-ajax.interceptors.request.use(config=>{
+ajax.interceptors.request.use(config => {
     const token = sessionStorage.getItem("token")
-    if ( token ) {
+    if (token) {
         config.headers["Authorization"] = token
     }
     return config
-}, error=>{
-    return Promise.reject( error )
+}, error => {
+    return Promise.reject(error)
 })
 
 /**
  * 相应拦截器 返回页面数据
  * 把Ajax 其他的不相关的数据 过滤掉
  */
-ajax.interceptors.response.use(response=>{
+ajax.interceptors.response.use(response => {
     const data = response.data
-    if ( data.code === "00000" ) {
+    if (data.code === "00000") {
         return data.data
     }
-    if ( data.code === "A00004" ) {
+    if (data.code === "A00004") {
         Notify('请登录后操作!')
         window.$router.push("/login")
-        return Promise.reject( "当前页面需要登录!" ) 
+        return Promise.reject("当前页面需要登录!")
     }
-    Notify( data.msg )
-    return Promise.reject( "数据格式错误" )
+    Notify(data.msg)
+    return Promise.reject(data.msg)
 }, error => {
-    return Promise.reject( error )
+    return Promise.reject(error)
 })
 
-const post = ( url, data ) => ajax.post( url, data)
-const put = ( url, data ) => ajax.put( url, data)
-const get = ( url, data ) => ajax.get( url, {params: data} )
-const deleted = ( url, data ) => ajax.delete( url, data )
+const post = (url, data) => ajax.post(url, data)
+const put = (url, data) => ajax.put(url, data)
+const get = (url, data) => ajax.get(url, { params: data })
+const deleted = (url, data) => ajax.request({
+    url: url,
+    method: "delete",
+    data: data
+})
 
 export { post, get, put, deleted }

src/views/AddressList.vue

@@ -1,19 +1,24 @@
 <template>
     <div>
-
-        <van-nav-bar v-if="type === 'list'" title="添加列表" left-text="返回" left-arrow @click-left="$router.push('/me')" />
-        <van-address-list v-if="type === 'list'" v-model="chosenAddressId" :list="list" :disabled-list="disabledList"
-            disabled-text="以下地址超出配送范围" default-tag-text="默认" @add="onAdd" @edit="onEdit" />
+        <van-nav-bar v-if="type === 'list'" title="添加列表" left-text="返回" left-arrow @click-left="()=>{
+            const addrback = getAddrback()
+            if (addrback) {
+                $router.push(addrback)
+            } else {
+                $router.push('/me')
+            }
+        }" />
+        <van-address-list v-if="type === 'list'" @select="selectAddr" v-model="chosenAddressId" :list="list"
+            :disabled-list="disabledList" disabled-text="以下地址超出配送范围" default-tag-text="默认" @add="onAdd" @edit="onEdit" />
 
         <van-nav-bar v-if="type === 'edit'" title="添加地址" left-text="返回" left-arrow @click-left="onClickLeft" />
         <van-address-edit v-show="type === 'edit'" show-delete :address-info="addressInfo" :area-list="areaList"
             show-set-default @delete="onDelete" :area-columns-placeholder="['请选择', '请选择', '请选择']"
             @save="onSave"></van-address-edit>
-    
     </div>
 </template>
 <script>
-import { addressList, addAddr, listByPid, updateAddr, deleteAddr } from '../api/address'
+import { defaultAddr, addressList, addAddr, listByPid, updateAddr, deleteAddr } from '../api/address'
 import { areaList } from '@vant/area-data';
 export default {
     data() {
@@ -27,10 +32,31 @@ export default {
             addressInfo: {}
         }
     },
+    /**
+     * 路由钩子   hook 
+     * 用来获取进入当前页面的 path 路径
+     * 解决 从哪来 回哪去的 问题
+     * @param {} to 
+     * @param {*} from 
+     * @param {*} next 
+     */
+    beforeRouteEnter(to,from,next){
+        const path = from.path === '/' ? '/home' : from.path
+        sessionStorage.setItem('addrback', from.fullPath )
+        next()
+    },
     async created() {
         this.init()
     },
     methods: {
+        getAddrback(){
+            return sessionStorage.getItem( 'addrback' )
+        },
+        selectAddr(item, index) {
+            defaultAddr(item.addrId).then(r => {
+                this.init()
+            })
+        },
         async init() {
             const list = await addressList()
             list.map(result => {
@@ -47,8 +73,8 @@ export default {
             this.init()
             this.type = 'list'
         },
-        onDelete(data){
-            deleteAddr(data.id).then(()=>{
+        onDelete(data) {
+            deleteAddr(data.id).then(() => {
                 this.onClickLeft()
             })
         },
@@ -96,11 +122,11 @@ export default {
                                     }
                                     if (data.id) {
                                         postData.addrId = data.id
-                                        updateAddr(postData).then(()=>{
+                                        updateAddr(postData).then(() => {
                                             this.onClickLeft()
                                         })
                                     } else {
-                                        addAddr(postData).then(()=>{
+                                        addAddr(postData).then(() => {
                                             this.onClickLeft()
                                         })
                                     }

src/views/Me.vue

@@ -11,16 +11,16 @@
         <van-divider :style="{ borderColor: '#f7f8fa', margin: '.3rem' }" />
         <!-- 导航菜单 -->
         <div class="order">
-            <div class="my-order">我的订单</div>
+            <div class="my-order">我的订单 </div>
             <div class="order-all">查看全部</div>
         </div>
         <!-- 分割线 -->
         <van-divider :style="{ borderColor: '#f7f8fa', margin: '.1rem' }" />
         <van-grid :border="false">
-            <van-grid-item icon="balance-pay" text="待支付" />
-            <van-grid-item icon="logistics" text="代发货" />
-            <van-grid-item icon="records" text="待签收" />
-            <van-grid-item icon="sign" text="已完成" />
+            <van-grid-item icon="balance-pay" :badge="myInfo.unPay" text="待支付" />
+            <van-grid-item icon="logistics" :badge="myInfo.payed" text="代发货" />
+            <van-grid-item icon="records" :badge="myInfo.consignment" text="待签收" />
+            <van-grid-item icon="sign" :badge="myInfo.success" text="已完成" />
         </van-grid>
         <!-- 分割线 -->
         <van-divider :style="{ borderColor: '#f7f8fa', margin: '.4rem' }" />
@@ -46,9 +46,15 @@
     </div>
 </template>
 <script>
+import { orderCount } from '../api/user'
 export default {
     data() {
-        return {}
+        return {
+            myInfo: {}
+        }
+    },
+    async created(){
+        this.myInfo = await orderCount()
     },
     methods: {
         loginOut(){

src/views/ProdInfo.vue

@@ -16,7 +16,7 @@
                     {{ prodData.prodName }}
                 </van-col>
                 <van-col span="6" class="prod-title-icon">
-                    <div>
+                    <div @click="addOrCancel">
                         <van-icon v-if="!isCollection" name="like-o" size="20" />
                         <van-icon v-if="isCollection" style="color:red" name="like" size="20" />
                         <span> 收藏</span>
@@ -72,10 +72,9 @@
         <!-- 购物提示框 -->
         <van-action-sheet v-model="showDesc">
             <div style="height: 1rem;"></div>
-            <van-card :num="confirm.orderItem.prodCount" 
-                :price="defaultSku.price ? defaultSku.price : prodData.price" 
-                :desc="prodData.brief" :title="defaultSku.skuName ? defaultSku.skuName : prodData.prodName "
-                :thumb="defaultSku.pic ? defaultSku.pic : prodData.pic ">
+            <van-card :num="confirm.orderItem.prodCount" :price="defaultSku.price ? defaultSku.price : prodData.price"
+                :desc="prodData.brief" :title="defaultSku.skuName ? defaultSku.skuName : prodData.prodName"
+                :thumb="defaultSku.pic ? defaultSku.pic : prodData.pic">
                 <template #tags>
                 </template>
                 <template #footer>
@@ -97,9 +96,9 @@
 
                 <div class="shopcart-button">
                     <van-button class="left" :disabled="defaultSku.price ? false : true" type="danger"
-                    @click="shopcartAdd">加入购物车</van-button>
+                        @click="shopcartAdd">加入购物车</van-button>
                     <van-button class="right" :disabled="defaultSku.price ? false : true" type="danger"
-                    @click="buynow">立即购买</van-button>
+                        @click="buynow">立即购买</van-button>
                 </div>
             </div>
         </van-action-sheet>
@@ -123,7 +122,6 @@
             </div>
         </van-action-sheet>
         <van-goods-action>
-            <van-goods-action-icon icon="chat-o" text="客服" />
             <van-goods-action-icon icon="cart-o" @click="$router.push('/shopCart')" text="购物车" />
             <van-goods-action-icon icon="shop-o" text="店铺" />
             <van-goods-action-button type="danger" text="立即购买" @click="showDesc = true" />
@@ -132,10 +130,10 @@
     </div>
 </template>
 <script>
-import { prodInfo, prodCommData, isCollection, changeItem, confirm, submit } 
+import { prodInfo, prodCommData, isCollection, changeItem, confirm, addOrCancel }
     from '../api/prodinfo'
 import { formatHtml } from '../utils/util'
-import { Toast  } from 'vant'
+import { Toast } from 'vant'
 export default {
     data() {
         return {
@@ -157,7 +155,7 @@ export default {
             show: false,
             tags: {},
             confirm: {
-                basketIds: [],  
+                basketIds: [],
                 orderItem: {
                     prodId: 0,
                     skuId: 0,
@@ -179,45 +177,42 @@ export default {
             }
         }
     },
-    async created() {
-        const prod = await prodInfo({ prodId: this.$route.query.prodId })
-        this.skuList = prod.skuList
-        this.transport = prod.transport
-        prod.imgs = prod.imgs.split(",")
-        this.prodData = prod
-        this.commData = await prodCommData({ prodId: prod.prodId })
-        this.isCollection = await isCollection({ prodId: prod.prodId })
-        this.init(this.skuList)
+    created() {
+        this.loadData()
     },
     methods: {
-        buynow(){
+        async loadData() {
+            const prod = await prodInfo({ prodId: this.$route.query.prodId })
+            this.skuList = prod.skuList
+            this.transport = prod.transport
+            prod.imgs = prod.imgs.split(",")
+            this.prodData = prod
+            this.commData = await prodCommData({ prodId: prod.prodId })
+            this.isCollection = await isCollection({ prodId: prod.prodId })
+            this.init(this.skuList)
+        },
+        async addOrCancel() {
+            await addOrCancel(this.prodData.prodId)
+            this.isCollection = await isCollection({ prodId: this.prodData.prodId })
+        },
+        buynow() {
             this.confirm.orderItem.prodId = this.prodData.prodId
             this.confirm.orderItem.skuId = this.defaultSku.skuId
             this.confirm.orderItem.shopId = this.prodData.shopId
             this.confirm.orderItem.distributionCardNo = ""
-            confirm(this.confirm).then(r=>{
-                submit( {
-                    orderShopParam: [
-                    {
-                        shopId: this.prodData.shopId,
-                        remarks:""
-                    }
-                    ]
-                })
-            }).catch(e=>{
-                console.log(e)
-            })
+            sessionStorage.setItem("confirm", JSON.stringify(this.confirm) )
+            this.$router.push("/submitinfo")
         },
-        shopcartAdd(){
+        shopcartAdd() {
             this.shopcart.basketId = 0
             this.shopcart.prodId = this.prodData.prodId
             this.shopcart.skuId = this.defaultSku.skuId
             this.shopcart.shopId = this.prodData.shopId
             this.shopcart.count = this.confirm.orderItem.prodCount
-            changeItem(this.shopcart).then(r=>{
+            changeItem(this.shopcart).then(r => {
                 Toast("添加成功!")
                 this.showDesc = false
-            }).catch(e=>{
+            }).catch(e => {
                 console.log(e)
             })
         },
@@ -234,7 +229,7 @@ export default {
                 if (defaultArr.length === 0) {
                     defaultArr = propArr
                     this.defaultSku = sku[i]
-                    if ( sku.length === 1 ) return ;
+                    if (sku.length === 1) return;
                 }
                 for (let n = 0; n < propArr.length; n++) {
                     const valueStr = propArr[n];
@@ -276,16 +271,18 @@ export default {
 }
 </script>
 <style scoped lang="less">
-.shopcart-button{
-    .left{
+.shopcart-button {
+    .left {
         width: 50%;
         background-color: #595959;
         border: 1px solid #595959;
     }
+
     .right {
         width: 50%;
     }
 }
+
 .prop-selected {
     color: #FFF !important;
     background-color: red !important;
@@ -374,4 +371,5 @@ export default {
             padding-right: 1rem;
         }
     }
-}</style>
+}
+</style>

src/views/ShopCart.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="shop-cart">
-        <van-cell :title="defaultAddr === '' ? '默认收货地址' : defaultAddr " is-link to="/addressList" />
+        <van-cell :title="defaultAddr === '' ? '默认收货地址' : defaultAddr" is-link to="/addressList" />
         <div style="height: 1rem;"></div>
         <div class="cards-list">
             <van-checkbox-group v-model="basketIds" ref="checkboxGroup">
@@ -19,15 +19,15 @@
                                     <!-- <van-tag plain type="danger">标签</van-tag> -->
                                 </template>
                                 <template #footer>
-                                    <van-stepper :value="items.prodCount" async-change @change="(value)=>{
-                                        if ( items.prodCount === value ) {
-                                            return 
+                                    <van-stepper :value="items.prodCount" async-change @change="(value) => {
+                                        if (items.prodCount === value) {
+                                            return
                                         }
                                         let count = 1
-                                        if ( items.prodCount > value ) {
+                                        if (items.prodCount > value) {
                                             count = -1
                                         }
-                                        onStepperChange(items, count, ()=>{
+                                        onStepperChange(items, count, () => {
                                             items.prodCount = value
                                             basketClick()
                                         })
@@ -44,14 +44,15 @@
         <div style="height: 7rem;"></div>
         <van-submit-bar :price="totalMoney" button-text="提交订单" @submit="onSubmit">
             <van-checkbox v-model="checked" @click="allProdSelected">全选</van-checkbox>
-            <template #tip>
-                你的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址</span>
-            </template>
+            <a class="clear-cart" v-show="basketIds.length > 0" @click="clearCart">清空</a>
         </van-submit-bar>
     </div>
 </template>
 <script>
-import { shopCartInfo, totalPay, changeItem } from '@/api/shopcart'
+import {
+    shopCartInfo, totalPay,
+    changeItem, deleteItem
+} from '@/api/shopcart'
 import { addressList } from '../api/address'
 import emitter from '../utils/mitt'
 export default {
@@ -63,23 +64,86 @@ export default {
             basketIds: [],
             totalMoney: 0,
             addresslist: [],
-            defaultAddr: ""
+            defaultAddr: "",
+            defaultAddrId: 0,
+            confirm: {
+                basketIds: [],
+                orderItem: {
+                    prodId: 0,
+                    skuId: 0,
+                    prodCount: 1,
+                    shopId: 0,
+                    distributionCardNo: ""
+                },
+                addrId: 0,
+                userChangeCoupon: 0,
+                couponIds: []
+            }
         };
     },
-    async created() {
-        this.shopCartInfo = await shopCartInfo({});
-        this.addresslist  = await addressList();
-        for (const key in this.addresslist) {
-            if (Object.hasOwnProperty.call(this.addresslist, key)) {
-                if ( this.addresslist[key].commonAddr === 1 ) {
-                    const result = this.addresslist[key]
-                    this.defaultAddr = result.province + " " + result.city + " "
-                    + result.area + " " + result.addr
-                }
-            }
-        }
+    created() {
+        this.init()
     },
     methods: {
+        onSubmit() {
+            // 标准的 B 2 C 模式
+            // for ( let i = 0; i < this.shopCartInfo.length; i++ ) {
+            //     const shopCart = this.shopCartInfo[i].shopCartItemDiscounts
+            //     for ( let n = 0; n < shopCart.length; n++ ) {
+            //         const cart = shopCart[n].shopCartItems
+            //         for ( let j = 0 ; j < cart.length; j++ ) {
+            //             this.confirm.basketIds.push( cart[j].basketId )
+            //             this.confirm.orderItem =  {
+            //                         prodId: cart[j].prodId,
+            //                         skuId: cart[j].skuId,
+            //                         prodCount: cart[j].prodCount,
+            //                         shopId: cart[j].shopId,
+            //                         distributionCardNo: ""
+            //                     }
+            //             this.confirm.addrId = this.defaultAddrId
+            //         }
+            //     }
+            // }
+            for (let n = 0; n < this.basketIds; n++) {
+                const cart = this.shopCartInfo[0].shopCartItemDiscounts[0].shopCartItems
+                for (let j = 0; j < cart.length; j++) {
+                    if ( this.basketIds[n] !== cart[j].basketId ) {
+                        break;
+                    }
+                    this.confirm.basketIds.push(cart[j].basketId)
+                    this.confirm.orderItem = {
+                        prodId: cart[j].prodId,
+                        skuId: cart[j].skuId,
+                        prodCount: cart[j].prodCount,
+                        shopId: cart[j].shopId,
+                        distributionCardNo: ""
+                    }
+                    this.confirm.addrId = this.defaultAddrId
+                }
+            }
+            if ( this.basketIds.length <= 0 ) return ;
+            sessionStorage.setItem("confirm", JSON.stringify(this.confirm))
+            this.$router.push("/submitinfo")
+        },
+        async init() {
+            shopCartInfo({}).then(
+                r => {
+                    this.shopCartInfo = r
+                    this.basketClick()
+                }
+            )
+            this.addresslist = await addressList();
+            for (const key in this.addresslist) {
+                if (Object.hasOwnProperty.call(this.addresslist, key)) {
+                    if (this.addresslist[key].commonAddr === 1) {
+                        const result = this.addresslist[key]
+                        this.defaultAddrId = this.addresslist[key].addrId
+                        this.defaultAddr = result.province + " " + result.city + " "
+                            + result.area + " " + result.addr
+                    }
+                }
+            }
+        },
         onStepperChange(items, value, callback) {
             changeItem({
                 basketId: items.basketId,
@@ -100,9 +164,11 @@ export default {
             const result = await totalPay(this.basketIds);
             this.totalMoney = result.finalMoney * 100;
         },
-        onSubmit() {
-        },
-        onClickEditAddress() {
+        clearCart() {
+            deleteItem(this.basketIds).then(r => {
+                this.init()
+                emitter.emit("changeItem")
+            })
         }
     }
 }
@@ -112,6 +178,11 @@ export default {
     background-color: #fafafa;
     height: 100%;
 
+    .clear-cart {
+        margin-left: 1rem;
+        color: #333;
+    }
+
     .van-submit-bar {
         bottom: 3.2rem;
     }

src/views/SubmitOrderInfo.vue

@@ -0,0 +1,146 @@
+<template>
+    <div>
+        <van-nav-bar title="订单确认页面" left-text="返回" left-arrow @click-left="back" />
+
+        <van-contact-card type="edit"
+            :name="defaultAddr === '' ? '' : addresslist[0].receiver + ' ' + addresslist[0].mobile"
+            :tel="defaultAddr === '' ? '默认收货地址' : defaultAddr" @click="() => {
+                this.$router.push('/addressList')
+            }" />
+        <div style="height: 1rem; background-color: #fafafa;"></div>
+        <div style="height: 1rem;"></div>
+        <div v-for="shop in shopCartInfo.shopCartOrders" :key="shop.shopId">
+            <div v-for="items in shop.shopCartItemDiscounts[0].shopCartItems" :key="items.basketId">
+                <div>
+                    <span class="shop-name">{{ shop.shopName }}</span>
+                    <van-card :num="items.prodCount" :price="items.price" :desc="items.skuName" :title="items.prodName"
+                        :thumb="items.pic">
+                        <template #footer>
+                            <van-stepper :value="items.prodCount" disabled integer />
+                            <span class="goods-transfee">邮费: {{ shop.transfee }} 元</span>
+                        </template>
+                    </van-card>
+                </div>
+            </div>
+            <van-cell-group>
+                <van-field v-model="shop.remarks" label="订单备注" placeholder="请输入备注信息" />
+            </van-cell-group>
+        </div>
+        <van-coupon-cell :coupons="[]" />
+        <div style="height: 1rem; background-color: #fafafa;"></div>
+        <div class="prod-money">
+            <van-cell-group>
+                <van-cell title="总金额" :value="shopCartInfo.total">
+                    <template #default>
+                        <div> ￥{{ shopCartInfo.total }}</div>
+                    </template>
+                </van-cell>
+                <van-cell title="优惠金额" :value="shopCartInfo.orderReduce" />
+                <van-cell title="优惠金额" :value="shopCartInfo.orderReduce" />
+                <van-cell title="商品总数" :value="shopCartInfo.totalCount" />
+                <van-cell title="支付金额">
+                    <template #default>
+                        <div class="money-total-count">合计: ￥{{ shopCartInfo.actualTotal }}</div>
+                    </template>
+                </van-cell>
+            </van-cell-group>
+        </div>
+        <van-submit-bar :price="shopCartInfo.actualTotal * 100" button-text="提交订单" @submit="onSubmit" />
+    </div>
+</template>
+<script>
+import { Dialog } from 'vant';
+import { confirm, submit } from '../api/prodinfo'
+import { payment } from '../api/pay'
+import { addressList } from '../api/address'
+export default {
+    data() {
+        return {
+            defaultAddr: "",
+            shopCartInfo: [],
+            confirm: {},
+            addresslist: [],
+            submitData: {
+                orderShopParam: []
+            }
+        }
+    },
+    created() {
+        this.confirm = JSON.parse(sessionStorage.getItem("confirm"))
+        this.init()
+    },
+    beforeRouteEnter(to, from, next) {
+        const path = from.path
+        if (!(path === '/' || path === '/addressList'
+            || path === '/submitinfo')) {
+            sessionStorage.setItem('urlback', from.fullPath)
+        }
+        next()
+    },
+    methods: {
+        async onSubmit() {
+            const CartInfo = this.shopCartInfo.shopCartOrders
+            for (let i = 0; i < CartInfo.length; i++) {
+                this.submitData.orderShopParam.push({
+                    shopId: CartInfo[i].shopId,
+                    remarks: CartInfo[i].remarks
+                })
+            }
+            const result = await submit(this.submitData)
+            const payRes = await payment({
+                orderNumbers: result.orderNumbers,
+                payType: 1
+            })
+            Dialog.alert({
+                title: '支付成功',
+                message: '恭喜您支付已完成! ',
+            }).then(() => {
+                this.$router.push("/me")
+            });
+        },
+        back() {
+            this.$router.push(sessionStorage.getItem('urlback'))
+        },
+        async init() {
+            this.addresslist = await addressList();
+            for (const key in this.addresslist) {
+                if (Object.hasOwnProperty.call(this.addresslist, key)) {
+                    if (this.addresslist[key].commonAddr === 1) {
+                        this.confirm.addrId = this.addresslist[key].addrId
+                        const result = this.addresslist[key]
+                        this.defaultAddr = result.province + " " + result.city + " "
+                            + result.area + " " + result.addr
+                    }
+                }
+            }
+            const temp = await confirm(this.confirm)
+            temp.shopCartOrders.map(item => item.remarks = "")
+            this.shopCartInfo = temp
+        }
+    }
+}
+</script>
+<style scoped lang="less">
+.money-total-count {
+    color: red;
+}
+
+/deep/ .van-cell__title {
+    text-align: left;
+}
+
+.goods-transfee {
+    font-size: larger;
+    display: inline-block;
+    margin-top: 1rem;
+}
+
+.shop-name {
+    display: inline-block;
+    height: 2.5rem;
+    text-align: left;
+    width: 100%;
+    margin-top: 1rem;
+    font-weight: 600;
+    padding-left: 1rem;
+}</style>