Commit 6111092e894ad2e4dd850b0b9b6a6d4f49149e8c
1 parent
843fce64ee
Exists in
master
update cart
Showing
5 changed files
with
216 additions
and
36 deletions
Show diff stats
src/pages.json
| 1 | 1 | { |
| 2 | 2 | "pages": [ |
| 3 | 3 | { |
| 4 | + "path": "pages/cart/cart", | |
| 5 | + "style": { | |
| 6 | + "navigationBarTitleText": "购物车" | |
| 7 | + } | |
| 8 | + }, | |
| 9 | + { | |
| 4 | 10 | "path": "pages/index/index", |
| 5 | 11 | "style": { |
| 6 | 12 | "navigationBarTitleText": "商城一览" |
| ... | ... | @@ -47,12 +53,6 @@ |
| 47 | 53 | "navigationBarTitleText": "确认订单"} |
| 48 | 54 | }, |
| 49 | 55 | { |
| 50 | - "path": "pages/cart/cart", | |
| 51 | - "style": { | |
| 52 | - "navigationBarTitleText": "购物车" | |
| 53 | - } | |
| 54 | - }, | |
| 55 | - { | |
| 56 | 56 | "path": "pages/user/user", |
| 57 | 57 | "style": { |
| 58 | 58 | "navigationBarTitleText": "我的" |
| ... | ... | @@ -65,7 +65,7 @@ |
| 65 | 65 | "path": "pages/refundment/refundment" |
| 66 | 66 | }, |
| 67 | 67 | { |
| 68 | - "path": "pages/Predelivery/Predelivery" | |
| 68 | + "path": "pages/predelivery/predelivery" | |
| 69 | 69 | }, |
| 70 | 70 | { |
| 71 | 71 | "path": "pages/customerService/customerService" | ... | ... |
src/pages/addArddess/addArddess.vue
src/pages/cart/cart.vue
| 1 | 1 | <template> |
| 2 | 2 | <view class="content"> |
| 3 | - <image class="logo" src="/static/logo.png"></image> | |
| 4 | - <view class="text-area"> | |
| 5 | - <text class="title">{{title}}</text> | |
| 3 | + <checkbox-group name=""> | |
| 4 | + <label> | |
| 5 | + <view class="card"> | |
| 6 | + <view class="cardHeader"> | |
| 7 | + <checkbox color="#FF6B4A" :value="totalPrice" style="transform:scale(0.7)"/> | |
| 8 | + <image src="../../static/customerService-btn.png" mode="aspectFill"></image> | |
| 9 | + <text>非常戴镜</text> | |
| 10 | + </view> | |
| 11 | + <view class="cardBody"> | |
| 12 | + <checkbox color="#FF6B4A" :value="totalPrice" style="transform:scale(0.7)" /> | |
| 13 | + <view class="goodInfo"> | |
| 14 | + <view class="imageWrap"> | |
| 15 | + <image src="../../static/img/detail/d1.png" mode="aspectFill" style="width: 188rpx;height: 168rpx;"></image> | |
| 16 | + </view> | |
| 17 | + <view class="infoRight"> | |
| 18 | + <text class="goodName">商品名称商品名称商品名称名称名称商品名称名商品名称名</text> | |
| 19 | + <view class="describ"><text>支持7天无理由退货 顺丰发货支持7天无理由退货 顺丰发货支持7天无理由退货 顺丰发货</text> | |
| 20 | + <!-- <text class="icon">></text> --> | |
| 21 | + </view> | |
| 22 | + <view class="priceBox"> | |
| 23 | + <view class="price">￥198</view> | |
| 24 | + <text>(限购{{maxCount}}副)</text> | |
| 25 | + <view class="counter"> | |
| 26 | + <view class="btn" disabled="this.addDisabled" type="default" @click="counter(false)">-</view> | |
| 27 | + <text>{{count}}</text> | |
| 28 | + <view class="btn" disabled="this.desDisabled" type="default" @click="counter(true)">+</view> | |
| 29 | + </view> | |
| 30 | + </view> | |
| 31 | + </view> | |
| 32 | + </view> | |
| 33 | + </view> | |
| 34 | + </view> | |
| 35 | + </label> | |
| 36 | + </checkbox-group> | |
| 37 | + | |
| 38 | + | |
| 39 | + <view class="footer"> | |
| 40 | + <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view> | |
| 41 | + <view class="footerRight"> | |
| 42 | + <view class="paybtn">立即支付</view> | |
| 43 | + </view> | |
| 6 | 44 | </view> |
| 7 | 45 | </view> |
| 8 | 46 | </template> |
| ... | ... | @@ -11,42 +49,184 @@ |
| 11 | 49 | export default { |
| 12 | 50 | data() { |
| 13 | 51 | return { |
| 14 | - title: 'Hello' | |
| 52 | + totalPrice: 360, | |
| 53 | + count:1, | |
| 54 | + maxCount:20, | |
| 15 | 55 | } |
| 16 | 56 | }, |
| 17 | 57 | onLoad() { |
| 18 | 58 | |
| 19 | 59 | }, |
| 20 | 60 | methods: { |
| 21 | - | |
| 61 | + counter(isadd){ | |
| 62 | + if(isadd){ | |
| 63 | + this.count >= this.maxCount? this.addDisabled = true:this.count++; | |
| 64 | + }else{ | |
| 65 | + this.count <= 1? this.desDisabled = true:this.count--; | |
| 66 | + } | |
| 67 | + }, | |
| 22 | 68 | } |
| 23 | 69 | } |
| 24 | 70 | </script> |
| 25 | 71 | |
| 26 | -<style> | |
| 72 | +<style lang="scss"> | |
| 27 | 73 | .content { |
| 74 | + min-height: 100vh; | |
| 75 | + background-color: #F7F6F6; | |
| 28 | 76 | display: flex; |
| 29 | 77 | flex-direction: column; |
| 30 | 78 | align-items: center; |
| 31 | - justify-content: center; | |
| 32 | - } | |
| 33 | - | |
| 34 | - .logo { | |
| 35 | - height: 200rpx; | |
| 36 | - width: 200rpx; | |
| 37 | - margin-top: 200rpx; | |
| 38 | - margin-left: auto; | |
| 39 | - margin-right: auto; | |
| 40 | - margin-bottom: 50rpx; | |
| 41 | - } | |
| 42 | - | |
| 43 | - .text-area { | |
| 44 | - display: flex; | |
| 45 | - justify-content: center; | |
| 46 | - } | |
| 47 | - | |
| 48 | - .title { | |
| 49 | - font-size: 36rpx; | |
| 50 | - color: #8f8f94; | |
| 79 | + justify-content: space-between; | |
| 80 | + padding: 20rpx 40rpx; | |
| 81 | + box-sizing: border-box; | |
| 82 | + | |
| 83 | + .card{ | |
| 84 | + background-color: #FFFFFF; | |
| 85 | + border-radius: 16rpx; | |
| 86 | + box-sizing: border-box; | |
| 87 | + padding: 36rpx 36rpx 36rpx 18rpx; | |
| 88 | + display: flex; | |
| 89 | + flex-direction: column; | |
| 90 | + align-items: center; | |
| 91 | + justify-content: space-between; | |
| 92 | + .cardHeader{ | |
| 93 | + width: 100%; | |
| 94 | + height: 36rpx; | |
| 95 | + display: flex; | |
| 96 | + align-items: center; | |
| 97 | + justify-content: flex-start; | |
| 98 | + image{ | |
| 99 | + height: 32rpx; | |
| 100 | + width: 32rpx; | |
| 101 | + } | |
| 102 | + } | |
| 103 | + .cardBody{ | |
| 104 | + width: 100%; | |
| 105 | + height: 300rpx; | |
| 106 | + display: flex; | |
| 107 | + align-items: center; | |
| 108 | + justify-content: space-between; | |
| 109 | + .goodInfo{ | |
| 110 | + width: 95%; | |
| 111 | + display: flex; | |
| 112 | + flex-direction: row; | |
| 113 | + justify-content: flex-start; | |
| 114 | + .imageWrap{ | |
| 115 | + height: 188rpx; | |
| 116 | + width: 188rpx; | |
| 117 | + margin-right: 28rpx; | |
| 118 | + image{ | |
| 119 | + height: 188rpx; | |
| 120 | + width: 188rpx; | |
| 121 | + } | |
| 122 | + } | |
| 123 | + .infoRight{ | |
| 124 | + display: flex; | |
| 125 | + flex-direction: column; | |
| 126 | + align-items: flex-start; | |
| 127 | + justify-content: space-between; | |
| 128 | + height: 220rpx; | |
| 129 | + .goodName{ | |
| 130 | + font-size: 28rpx; | |
| 131 | + color: #333333; | |
| 132 | + } | |
| 133 | + .describ{ | |
| 134 | + width: 100%; | |
| 135 | + height: 80rpx; | |
| 136 | + box-sizing: border-box; | |
| 137 | + padding: 10rpx; | |
| 138 | + font-size: 20rpx; | |
| 139 | + color: #999999; | |
| 140 | + background: #F2F2F2; | |
| 141 | + text{ | |
| 142 | + text-overflow: -o-ellipsis-lastline; | |
| 143 | + overflow: hidden; | |
| 144 | + text-overflow: ellipsis; | |
| 145 | + display: -webkit-box; | |
| 146 | + -webkit-line-clamp: 2; | |
| 147 | + line-clamp: 2; | |
| 148 | + -webkit-box-orient: vertical; | |
| 149 | + } | |
| 150 | + // .icon{ | |
| 151 | + // transform: rotate(90deg); | |
| 152 | + // } | |
| 153 | + } | |
| 154 | + .priceBox{ | |
| 155 | + display: flex; | |
| 156 | + justify-content: space-between; | |
| 157 | + align-items: center; | |
| 158 | + width: 100%; | |
| 159 | + font-size: 14px; | |
| 160 | + color: #999999; | |
| 161 | + .price{ | |
| 162 | + color: #FF6B4A; | |
| 163 | + font-size: 28rpx; | |
| 164 | + } | |
| 165 | + .counter{ | |
| 166 | + display: flex; | |
| 167 | + flex-direction: row; | |
| 168 | + justify-content: space-between; | |
| 169 | + align-items: center; | |
| 170 | + font-size: 28rpx; | |
| 171 | + color: #333333; | |
| 172 | + width: 122rpx; | |
| 173 | + .btn{ | |
| 174 | + display: flex; | |
| 175 | + justify-content: center; | |
| 176 | + line-height: 32rpx; | |
| 177 | + height: 32rpx; | |
| 178 | + width: 32rpx; | |
| 179 | + background-color: #F2F2F2; | |
| 180 | + color: #CFCFCF; | |
| 181 | + } | |
| 182 | + } | |
| 183 | + } | |
| 184 | + } | |
| 185 | + } | |
| 186 | + } | |
| 187 | + } | |
| 188 | + | |
| 189 | + .footer{ | |
| 190 | + position: fixed; | |
| 191 | + left: 0; | |
| 192 | + bottom: 0; | |
| 193 | + height: 112rpx; | |
| 194 | + width: 100%; | |
| 195 | + background-color: #FFFFFF; | |
| 196 | + font-size: 16px; | |
| 197 | + display: flex; | |
| 198 | + justify-content: space-between; | |
| 199 | + align-items: center; | |
| 200 | + .footerLeft{ | |
| 201 | + display: flex; | |
| 202 | + justify-content: center; | |
| 203 | + align-items: center; | |
| 204 | + width: 50%; | |
| 205 | + color: #333333; | |
| 206 | + text{ | |
| 207 | + color: #FF6B4A; | |
| 208 | + } | |
| 209 | + } | |
| 210 | + .footerRight{ | |
| 211 | + display: flex; | |
| 212 | + justify-content: flex-end; | |
| 213 | + align-items: center; | |
| 214 | + width: 50%; | |
| 215 | + margin-right: 26rpx; | |
| 216 | + .paybtn{ | |
| 217 | + display: flex; | |
| 218 | + justify-content: center; | |
| 219 | + align-items: center; | |
| 220 | + background: #FF6B4A; | |
| 221 | + border-radius: 20px; | |
| 222 | + border-radius: 20px; | |
| 223 | + color: #FFFFFF; | |
| 224 | + width: 204rpx; | |
| 225 | + height: 80rpx; | |
| 226 | + } | |
| 227 | + } | |
| 228 | + | |
| 229 | + } | |
| 51 | 230 | } |
| 231 | + | |
| 52 | 232 | </style> | ... | ... |
src/pages/index/index.vue
| ... | ... | @@ -77,7 +77,7 @@ |
| 77 | 77 | </template> |
| 78 | 78 | |
| 79 | 79 | <script> |
| 80 | -import UniDrawer from "../../components/uni-drawer/uni-drawer.vue"; | |
| 80 | +import UniDrawer from "../../components/Uni-drawer/Uni-drawer.vue"; | |
| 81 | 81 | import Card from "../../components/Card/Card.vue"; |
| 82 | 82 | import HMfilterDropdown from "../../components/HM-filterDropdown/HM-filterDropdown.vue"; |
| 83 | 83 | import data from "@/common/data.js"; //筛选菜单数据 | ... | ... |
src/pages/myOrder/myOrder.vue