1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>购物车</title>
6 <style>
7 .content{
8 height: 500px;
9 margin: 50px 30px;
10 border: 1px solid #e3e3e3;
11 border-top: 2px solid #0078E7;
12 }
13 h3{
14 color: #0078E7;
15 padding-left: 20px;
16 }
17 .title{
18 height: 50px;
19 border-bottom: 1px solid #e3e3e3;
20 background: #f7f7f7;
21 text-align: center;
22 }
23 td{
24 text-align: center;
25 }
26 td div{
27 display: inline-block;
28 }
29 .wid200{
30 width: 168px;
31 text-align: center;
32 /* background: yellow; */
33 }
34 .goods-logo{
35 display: inline-block;
36 height: 100px;
37 width: 100px;
38 border: 1px solid #ccc;
39 }
40 .goods-logo img{
41 display: inline-block;
42 height: 100%;
43 width: 100%;
44 }
45 .goods-instr{
46 font-size: 12px;
47 text-align: left;
48 padding-left: 0.625rem;
49 }
50 .goods-countout{
51 border: 1px solid #f7f7f7;
52 }
53 .goods-countout span{
54 display: inline-block;
55 width: 40px;
56 height: 1.875rem;
57 text-align: center;
58 }
59 .goods-count{
60 background: #f7f7f7;
61 }
62 .footer{
63 width: 100%;
64 height: 50px;
65 line-height: 50px;
66 }
67 .footer div{
68 display: inline-block;
69 text-align: center;
70 }
71 .delete-all{
72 width: 6.25rem;
73 height: 100%;
74 padding-left: 20px;
75 }
76 .going-buy{
77 margin-left: 20px;
78 }
79 .goods-price{
80 float: right;
81 }
82 .orange{
83 color: #ff7700;
84 }
85 .out-buy{
86 float: right;
87 width: 100px;
88 background: #ff7700;
89 font-size: 18px;
90 margin-left: 25px;
91 }
92 .active{
93 background: #ff7700;
94 }
95 .delect:hover{
96 height: 50px;
97 line-height: 50px;
98 display: inline-block;
99 background: #ff7700;
100 padding-left: 10px;
101 padding-right: 10px;
102 }
103 .checke{
104 display: inline-block;
105 height: 1.25rem;
106 width: 1.25rem;
107 border: 1px solid #ff7700;
108 border-radius: 50%;
109 margin-right: 6px;
110 vertical-align: middle;
111 }
112
113 </style>
114 </head>
115 <body>
116 <div class="content" id="app1">
117 <h3>购物清单</h3>
118 <table style="width:100%;">
119 <tr class="title">
120 <td class="wid200"><a class="checke" :class="{active:allchekdflag}" @click="allcheck"></a><span>全选</span></td>
121 <td style="width: 400px;">商品</td>
122 <td class="wid200">数量</td>
123 <td class="wid200">单价（元）</td>
124 <td class="wid200">金额（元）</td>
125 <td class="wid200">操作</td>
126 </tr>
127 </table>
128 <!-- 商品购买详情 -->
129 <div >
130 <table style="width:100%;">
131 <tr v-for="(item,index) in productList">
132 <td><a @click="checkfun(index)" class="checke" :class="{active:item.checkedflag}"></a></td>
133 <td style="width: 400px;">
134 <div class="goods-logo">
135 <img class v-bind:src="item.pro_img">
136 </div>
137 <div class="goods-instr">
138 <p>{{item.pro_name}}</p>
139 <p>{{item.pro_place}}</p>
140 <p>{{item.pro_purity}}|{{item.pro_min}}</p>
141 <p>配送仓储：{{item.pro_depot}}</p>
142 </div>
143 </td>
144 <td class="wid200">
145 <div class="goods-countout">
146 <span class="down goods-count" @click="item.pro_num>0?item.pro_num--:0" :class="{'active':curIndex===index+'0'}">-</span>
147 <span class="count">{{item.pro_num}}</span>
148 <span class="up goods-count" @click="item.pro_num++" :class="{'active':curIndex===index+'1'}"> + </span>
149 </div>
150 </td>
151 <td class="wid200 orange">￥<span>{{item.pro_price}}</span></td>
152 <td class="wid200 orange">￥<span>{{item.pro_price*item.pro_num}}</span></td>
153 <td class="wid200"><span class="delect" @click="delect(index)">删除</span></td>
154 </tr></table>
155 </div>
156 <!-- 结算 -->
157 <div class="footer goods-count">
158 <div class="delete-all delect" @click="deleteActive"><span>删除所选产品</span></div>
159 <div class="going-buy"><span>继续购物</span></div>
160 <div class="out-buy">去结算</div>
161 <div class="goods-price">
162 <span class="orange">{{getTotle.totleCount}}</span>件商品总计（不含运费）：￥
163 <span class="orange">{{getTotle.totlePrice}}</span>
164 </div>
165
166 </div>
167 </div>
168 <script src="vue.js"></script>
169 <script>
170 new Vue({
171 el:"#app1",
172 data:{
173 productList:[{
174 'pro_name':'【斯文】甘油|丙三醇1',//产品名称
175 'pro_brand':'skc',//产品品牌
176 'pro_place':'韩国',//产地
177 'pro_purity':'99.7%',//规格
178 'pro_min':'215千克',//最小起订量
179 'pro_depot':'上海沧海仓库',//所在仓库
180 'pro_num':3,//数量
181 'pro_img':'../build/logo.png',//图片
182 'pro_price':800//单价
183 },{
184 'pro_name':'【斯文】甘油|丙三醇2',//产品名称
185 'pro_brand':'skc',//产品品牌
186 'pro_place':'韩国',//产地
187 'pro_purity':'99.7%',//规格
188 'pro_min':'215千克',//最小起订量
189 'pro_depot':'上海沧海仓库',//所在仓库
190 'pro_num':1,//数量
191 'pro_img':'../build/logo.png',//图片
192 'pro_price':800//单价
193 }],
194 curIndex:'',
195 checkedflag:false,
196 allchekdflag:false,
197 },
198 methods:{
199 // countDown(index){//数量减少
200 // this.curIndex=index+'0';
201 // var num = this.productList[index].pro_num;
202 // if(num>0){
203 // this.productList[index].pro_num = this.productList[index].pro_num-1;
204 // if(this.productList[index].pro_num==0){
205 // this.curIndex='';
206 // }
207 // console.log(this.childTotal);
208 // this.childTotal = this.productList[index].pro_num*this.productList[index].pro_price;
209 // }else{
210 // this.curIndex='';
211 // }
212 // },
213 // countUp(index){//数量增加
214 // this.curIndex=index+'1';
215 // var num = this.productList[index].pro_num;
216 // this.productList[index].pro_num = this.productList[index].pro_num+1;
217 // },
218 delect(index){
219 // 删除指定列表
220 this.productList.splice(index,1);
221 },
222 deleteActive(){//删除已选择列表
223 var productList = this.productList;
224 if(this.allchekdflag){
225 this.productList=[];
226 this.allchekdflag = false;
227 }else{
228 this.productList = productList.filter(function(value){
229 return !value.checkedflag;
230 });
231 }
232 },
233 checkfun(index){//单选
234 // Vue.set实时更新视图数据
235 Vue.set(this.productList[index],'checkedflag',!this.productList[index].checkedflag);
236 if(!this.productList[index].checkedflag){
237 this.allchekdflag =false;
238 }
239 },
240 allcheck(){//全选
241 this.allchekdflag = !this.allchekdflag;
242 for(var i=0;i<this.productList.length;i++){
243 Vue.set(this.productList[i],'checkedflag',this.allchekdflag)
244 // this.productList[i].checkedflag = this.allchekdflag;
245 }
246 }
247 },
248 computed:{
249 getTotle(){ //对下面两个写法的简单写法
250 var totlePrice = 0,productList = this.productList;
251 var _productList = this.productList.filter(function(value){
252 return value.checkedflag;
253 })
254 for(var i=0;i<_productList.length;i++){
255 totlePrice+=_productList[i].pro_num*_productList[i].pro_price;
256 }
257 return {'totlePrice':totlePrice,'totleCount':_productList.length};
258 },
259 // total(){//总价格
260 // var allcount = 0,productList = this.productList;
261 // var _productList = this.productList.filter(function(value){
262 // return value.checkedflag;
263 // })
264 // for(var i=0;i<_productList.length;i++){
265 // allcount+=_productList[i].pro_num*_productList[i].pro_price;
266 // }
267 // return allcount;
268 // },
269 // buyscounts(){//购买的总数
270 // var count=0,productList = this.productList;
271 // for(var i=0;i<productList.length;i++){
272 // productList[i].checkedflag&&count++;
273 // }
274 // return count;
275 // }
276 }
277 })
278 </script>
279 </body>
280 </html>
![]()
浙公网安备 33010602011771号