<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, user-scalable=no">
<title>vue购物车商品订单详情页面代码</title>
<!--css类引用-->
<link rel="stylesheet" href="plugins/bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="plugins/layui/css/layui.css" />
<link rel="stylesheet" href="plugins/awesome/css/font-awesome.min.css" />
<link rel="stylesheet" href="plugins/eleme-ui/index.css" />
<link rel="stylesheet" href="css/CivilMilitaryIntegration/public.css" />
<link rel="stylesheet" href="css/CivilMilitaryIntegration/ShoppingCartAdress.css" />
</head>
<body><script src="/demos/googlegg.js"></script>
<!--toper 公用-->
<!--主要内容-->
<div class="row" id="myVue" v-cloak>
<div class="col-lg-10 col-lg-offset-1" ><br>
<div class="contenter">
<ul>
<li>
<el-row>
<span class="addAddressCons">收货人信息</span>
<span class="addAddress" @click="AddressShowClick">新增收货地址</span>
</el-row>
<div class="scolleShow" >
<el-row class="consignee" v-for="(items,index) in filterAddress" >
<div v-on:mouseout="MouseOutList(items)" v-on:mouseleave="MouseOverList(items)">
<el-col :span='4'>
<div class="consigneeList consigneeListWidth" :class="{'consigneeListClick':items.addressDefult}" @click="currentIndexClick(items,index)">
<span v-text="items.name"></span>
<span v-text="items.city"></span>
<div v-show="items.addressDefult">
<div class="arrow-right"></div>
<i class="fa fa-check" aria-hidden="true"></i>
</div>
</div>
</el-col>
<el-col class='rightAddress' :span='20' :class='{BackColor:items.addressIsShow}'>
<span v-text="items.name"></span>
<span v-text="items.city"></span>
<span v-text="items.area"></span>
<span v-text="items.minarea"></span>
<span v-text="items.phone"></span>
<span v-if='items.isShowDefult' class="addressDefultClass">默认地址</span>
<span v-if='items.addressIsShow' class='edmitAddre' >
<span class='edmitSpan' @click="defultAddress(items)">设为默认地址</span>
<span class='edmitSpan' @click="emitAddress(items,index)">编辑</spa>
</span>
<span v-if='!items.isShowDefult' @click="deleAddressAlert(index)" class='edmitSpan edmitSpan-delete' >删除</span>
</el-col>
<div class="clearfix"></div>
</div>
</el-row>
</div>
<el-dialog
title="新增收货地址"
:visible.sync="newAddressShow"
width="30%"
>
<el-form ref="form" :model="form" label-width="80px">
<el-form-item label="收货人" >
<el-input v-model="form.name" placeholder="请输入内容"></el-input>
</el-form-item>
<el-form-item label="所在地区" >
<el-input v-model="form.city" placeholder="请输入内容"></el-input>
</el-form-item>
<el-form-item label="详细地址" >
<el-input v-model="form.minarea" placeholder="请输入内容"></el-input>
</el-form-item>
<el-form-item label="手机号码" >
<el-input v-model="form.phone" placeholder="请输入内容"></el-input>
</el-form-item>
<el-form-item>
<el-checkbox-group v-model="form.isShowDefult">
<el-checkbox label="设为默认地址" name="type">设为默认地址</el-checkbox>
</el-checkbox-group>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false" type='danger'>取 消</el-button>
<el-button type="primary" @click="saveNewAdress(edmitType)">保存</el-button>
</span>
</el-dialog>
<div v-if='!moreAddressData.length == 0' class="muchAddress">
<span @click="moreAddress">更多地址
<transition name="fade" mode="out-in">
<i key='up' v-if='isTranShow' class="fa fa-angle-double-down" ></i>
<i key='down' v-else class="fa fa-angle-double-up" ></i>
</transition>
</span>
</div>
<div v-if='moreAddressData.length == 0' class="noAddress" >
<span>您还没有收货地址，请增加新的收货地址！</span>
</div>
</li>
<li>
<span class="addAddressCons">支付方式</span>
<div class="consignee">
<span class="consigneeList" v-for="(paymentDatas,index) in paymentdatas" :class="{'consigneeListClick':paymentIndex == index}" @click="paymentIndex=index">
<span v-text="paymentDatas.name"></span>
<div v-show="paymentIndex == index">
<div class="arrow-right"></div>
<i class="fa fa-check" aria-hidden="true"></i>
</div>
</span>
</div>
</li>
<li>
<span class="addAddressCons">送货清单</span>
<span class="addAddress"><a href="ShoppingCart.html">返回修改购物车</a></span>
<div class="row deliverymode">
<div class="col-lg-3 deliverymodeLeft">
<p>配送方式：</p>
<div v-for="(deliverymodeDatas,index) in deliverymodedatas" >
<span class="consigneeList" @click="deliverymodeIndex=index" :class="{'consigneeListClick':deliverymodeIndex == index}">
<span v-text="deliverymodeDatas.type" ></span>
<div v-show="deliverymodeIndex == index">
<div class="arrow-right"></div>
<i class="fa fa-check" aria-hidden="true"></i>
</div>
</span>
<p class="deliverymodeLeftTit" v-text="deliverymodeDatas.name"></p>
</div>
</div>
<div class="col-lg-9 deliverymodeRight" >
<div class="layui-form">
<table class="layui-table">
<tr>
<td>
<span class="goodName">
<img class="goodImg" src="img/CivilMilitaryIntegration/CooperationZone/panner0.jpg" />
</span>
<span class="goodName goodsName">
<h2 class="goodname"></h2>
<p class="goodGary">
<span>供应商：</span>
<span>美国</span>
</p>
<p class="goodGary">
<span>发货地：</span>
<span>中国</span>
</p>
</span>
</td>
<td class="goodPrice">￥344534.00</td>
<td class="goodNum">1</td>
</tr>
<tr>
<td>
<span class="goodName">
<img class="goodImg" src="img/CivilMilitaryIntegration/CooperationZone/panner0.jpg" />
</span>
<span class="goodName goodsName">
<h2 class="goodname"></h2>
<p class="goodGary">
<span>供应商：</span>
<span>美国</span>
</p>
<p class="goodGary">
<span>发货地：</span>
<span>中国</span>
</p>
</span>
</td>
<td class="goodPrice">￥344534.00</td>
<td class="goodNum">1</td>
</tr>
</table>
</div>
</div>
</div>
</li>
<li>
<span class="addAddressCons">发票信息</span>
<div class="consignee">
<span class="consigneeList" v-for="(invoiceDatas,index) in invoicedatas" :class="{'consigneeListClick':invoiceIndex == index}" @click="invoiceIndex=index">
<span v-text="invoiceDatas.name"></span>
<div v-show="invoiceIndex == index">
<div class="arrow-right"></div>
<i class="fa fa-check" aria-hidden="true"></i>
</div>
</span>
</div>
<div class="consignee" v-if="invoiceIndex > 0">
<span class="CompanyInformation">增值税普通发票</span>
<span class="CompanyInformation">北京科技公司</span>
<span class="CompanyInformation">货物详细</span>
vue购物车商品订单详情页面代码
版权申诉
5星 · 超过95%的资源 77 浏览量
2020-06-10
08:51:34
上传
评论 2
收藏 654KB ZIP 举报 
vue购物车商品订单详情页面代码.zip （16个子文件） 
index.html 10KB
img CivilMilitaryIntegration CooperationZone 
panner0.jpg 22KB js CivilMilitaryIntegration 
ShoppingCart.js 16KB plugins bootstrap bootstrap.min.css 107KB bootstrap.min.js 31KB vue vue.js 269KB awesome fonts fontawesome-webfont.woff2 75KB fontawesome-webfont.eot 162KB fontawesome-webfont.woff 96KB fontawesome-webfont.ttf 162KB css font-awesome.min.css 30KB jquery jquery.min.js 82KB eleme-ui index.css 132KB index.js 404KB layui css layui.css 50KB css CivilMilitaryIntegration ShoppingCartAdress.css 6KB资源评论
@周生生2023-06-09资源内容总结的很到位，内容详实，很受用，学到了~
