Commit 42375342ffbc9bf4657145d8205f17080b7529de
1 parent
55420a8a96
Exists in
master
解决冲突
Showing
1 changed file
with
1 additions
and
8 deletions
Show diff stats
src/pages/cart/cart.vue
| 1 | <template> | 1 | <template> |
| 2 | <view class="content"> | 2 | <view class="content"> |
| 3 | <block v-if="cartList.length==0"> | 3 | <block v-if="cartList.length==0"> |
| 4 | 4 | ||
| 5 | </block> | 5 | </block> |
| 6 | <block v-else> | 6 | <block v-else> |
| 7 | <view class="card"> | 7 | <view class="card"> |
| 8 | <view class="cardHeader"> | 8 | <view class="cardHeader"> |
| 9 | <view | 9 | <view |
| 10 | v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'" | 10 | v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'" |
| 11 | @tap="pChange(pIsoPen)" | 11 | @tap="pChange(pIsoPen)" |
| 12 | > | 12 | > |
| 13 | <span class="correct"></span> | 13 | <span class="correct"></span> |
| 14 | </view> | 14 | </view> |
| 15 | <image | 15 | <image |
| 16 | src="../../static/store.png" | 16 | src="../../static/store.png" |
| 17 | mode="aspectFill" | 17 | mode="aspectFill" |
| 18 | ></image> | 18 | ></image> |
| 19 | <text>非常戴镜</text> | 19 | <text>非常戴镜</text> |
| 20 | </view> | 20 | </view> |
| 21 | <view | 21 | <view |
| 22 | class="cardBody" | 22 | class="cardBody" |
| 23 | v-for="(item,index) in cartList" | 23 | v-for="(item,index) in cartList" |
| 24 | :key="item.cart_id" | 24 | :key="item.cart_id" |
| 25 | @longpress="delCart(item.cart_id,index)" | 25 | @longpress="delCart(item.cart_id,index)" |
| 26 | > | 26 | > |
| 27 | <view | 27 | <view |
| 28 | v-bind:class="childIsOpen[index]? 'partentChecked':'partentCheck'" | 28 | v-bind:class="childIsOpen[index]? 'partentChecked':'partentCheck'" |
| 29 | @tap="Change(childIsOpen[index],index)" | 29 | @tap="Change(childIsOpen[index],index)" |
| 30 | > | 30 | > |
| 31 | <span class="correct"></span> | 31 | <span class="correct"></span> |
| 32 | </view> | 32 | </view> |
| 33 | <view class="imageWrap"> | 33 | <view class="imageWrap"> |
| 34 | <image | 34 | <image |
| 35 | :src="item.img_index_url" | 35 | :src="item.img_index_url" |
| 36 | mode="aspectFit" | 36 | mode="aspectFit" |
| 37 | style="width: 188rpx;height: 168rpx;" | 37 | style="width: 188rpx;height: 168rpx;" |
| 38 | ></image> | 38 | ></image> |
| 39 | </view> | 39 | </view> |
| 40 | <view class="goodInfo"> | 40 | <view class="goodInfo"> |
| 41 | <!-- <view class="imageWrap"> | 41 | <!-- <view class="imageWrap"> |
| 42 | <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image> | 42 | <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image> |
| 43 | </view> --> | 43 | </view> --> |
| 44 | <view class="infoRight"> | 44 | <view class="infoRight"> |
| 45 | <view | 45 | <view |
| 46 | class="goodName" | 46 | class="goodName" |
| 47 | @tap="toGoods(item.pid,item.sk_id)" | 47 | @tap="toGoods(item.pid,item.sk_id)" |
| 48 | >{{item.p_name}}</view> | 48 | >{{item.p_name}}</view> |
| 49 | <!-- <view class="describ"> --> | 49 | <!-- <view class="describ"> --> |
| 50 | <uni-collapse accordion="true"> | 50 | <uni-collapse accordion="true"> |
| 51 | <uni-collapse-item | 51 | <uni-collapse-item |
| 52 | showAnimation='true' | 52 | showAnimation='true' |
| 53 | :title="item.tag.prod_tag_fun[0].label+'/'+item.tag.prod_tag_fun[1].label+'/'+item.tag.prod_tag_fun[2].label+'...' || '暂无'" | 53 | :title="item.tag.prod_tag_fun[0].label+'/'+item.tag.prod_tag_fun[1].label+'/'+item.tag.prod_tag_fun[2].label+'...' || '暂无'" |
| 54 | > | 54 | > |
| 55 | <text class="describ"> | 55 | <text class="describ"> |
| 56 | <block | 56 | <block |
| 57 | v-for="tag in item.tag.prod_tag_fun" | 57 | v-for="tag in item.tag.prod_tag_fun" |
| 58 | :key="tag.value" | 58 | :key="tag.value" |
| 59 | > | 59 | > |
| 60 | {{tag.label+` `}} | 60 | {{tag.label+` `}} |
| 61 | </block> | 61 | </block> |
| 62 | </text> | 62 | </text> |
| 63 | <!-- <text> | 63 | <!-- <text> |
| 64 | <block v-for="tag in item.tag.prod_tag_style" :key="tag.value"> | 64 | <block v-for="tag in item.tag.prod_tag_style" :key="tag.value"> |
| 65 | {{tag.label+` `}} | 65 | {{tag.label+` `}} |
| 66 | </block> | 66 | </block> |
| 67 | </text> --> | 67 | </text> --> |
| 68 | </uni-collapse-item> | 68 | </uni-collapse-item> |
| 69 | </uni-collapse> | 69 | </uni-collapse> |
| 70 | <!-- <view v-bind:class="collapseList[index]? 'icon':'iconed'"></view> --> | 70 | <!-- <view v-bind:class="collapseList[index]? 'icon':'iconed'"></view> --> |
| 71 | <!-- </view> --> | 71 | <!-- </view> --> |
| 72 | <view class="priceBox"> | 72 | <view class="priceBox"> |
| 73 | <view class="price">¥{{item.nowPrice*item.num}}</view> | 73 | <view class="price">¥{{item.nowPrice*item.num}}</view> |
| 74 | <text class="maxCount">(限购{{maxCount}}副)</text> | 74 | <text class="maxCount">(限购{{maxCount}}副)</text> |
| 75 | <view class="counter"> | 75 | <view class="counter"> |
| 76 | <view | 76 | <view |
| 77 | class="btn" | 77 | class="btn" |
| 78 | disabled="this.addDisabled" | 78 | disabled="this.addDisabled" |
| 79 | type="default" | 79 | type="default" |
| 80 | @tap="counter(index,false,item)" | 80 | @tap="counter(index,false,item)" |
| 81 | >-</view> | 81 | >-</view> |
| 82 | <text>{{item.num}}</text> | 82 | <text>{{item.num}}</text> |
| 83 | <view | 83 | <view |
| 84 | class="btn" | 84 | class="btn" |
| 85 | disabled="this.desDisabled" | 85 | disabled="this.desDisabled" |
| 86 | type="default" | 86 | type="default" |
| 87 | @tap="counter(index,true,item)" | 87 | @tap="counter(index,true,item)" |
| 88 | >+</view> | 88 | >+</view> |
| 89 | </view> | 89 | </view> |
| 90 | </view> | 90 | </view> |
| 91 | </view> | 91 | </view> |
| 92 | </view> | 92 | </view> |
| 93 | </view> | 93 | </view> |
| 94 | </view> | 94 | </view> |
| 95 | </block> | 95 | </block> |
| 96 | <view class="footer"> | 96 | <view class="footer"> |
| 97 | <view class="footerLeft">实付金额:<text>¥{{totalPrice}}</text></view> | 97 | <view class="footerLeft">实付金额:<text>¥{{totalPrice}}</text></view> |
| 98 | <view class="footerRight"> | 98 | <view class="footerRight"> |
| 99 | <navigator | 99 | <navigator |
| 100 | url="/pages/confirmOrder/confirmOrder" | 100 | url="/pages/confirmOrder/confirmOrder" |
| 101 | hover-class="navigator-hover" | 101 | hover-class="navigator-hover" |
| 102 | > | 102 | > |
| 103 | <view class="paybtn">立即结算</view> | 103 | <view class="paybtn">立即结算</view> |
| 104 | </navigator> | 104 | </navigator> |
| 105 | </view> | 105 | </view> |
| 106 | </view> | 106 | </view> |
| 107 | 107 | ||
| 108 | </view> | 108 | </view> |
| 109 | </template> | 109 | </template> |
| 110 | 110 | ||
| 111 | <script> | 111 | <script> |
| 112 | import UniCollapse from '@/components/UniCollapse/UniCollapse.vue' | 112 | import UniCollapse from '@/components/UniCollapse/UniCollapse.vue' |
| 113 | import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue' | 113 | import UniCollapseItem from '@/components/UniCollapseItem/UniCollapseItem.vue' |
| 114 | import store from '@/store' | 114 | import store from '@/store' |
| 115 | 115 | ||
| 116 | export default { | 116 | export default { |
| 117 | components: { UniCollapse, UniCollapseItem }, | 117 | components: { UniCollapse, UniCollapseItem }, |
| 118 | data() { | 118 | data() { |
| 119 | return { | 119 | return { |
| 120 | totalPrice: 0, | 120 | totalPrice: 0, |
| 121 | pIsoPen: false, | 121 | pIsoPen: false, |
| 122 | // childIsOpen:[], | 122 | // childIsOpen:[], |
| 123 | maxCount: 20, | 123 | maxCount: 20, |
| 124 | } | 124 | } |
| 125 | }, | 125 | }, |
| 126 | computed: { | 126 | computed: { |
| 127 | 127 | ||
| 128 | cartList() { | 128 | cartList() { |
| 129 | // console.log('cart-list', this.$store.state.cart.cartList); | 129 | // console.log('cart-list', this.$store.state.cart.cartList); |
| 130 | return this.$store.state.cart.cartList | 130 | return this.$store.state.cart.cartList |
| 131 | }, | 131 | }, |
| 132 | childIsOpen() { | 132 | childIsOpen() { |
| 133 | const temp = [] | 133 | const temp = [] |
| 134 | temp.length = this.$store.state.cart.cartList.length | 134 | temp.length = this.$store.state.cart.cartList.length |
| 135 | for (let i = 0; i < temp.length; i++) { | 135 | for (let i = 0; i < temp.length; i++) { |
| 136 | temp[i] = false | 136 | temp[i] = false |
| 137 | } | 137 | } |
| 138 | console.log('this.childisOPne===>', temp) | 138 | console.log('this.childisOPne===>', temp) |
| 139 | return temp | 139 | return temp |
| 140 | }, | 140 | }, |
| 141 | }, | 141 | }, |
| 142 | onLoad: function() { | 142 | onLoad: function() { |
| 143 | // store.dispatch('cart/addCart', { | 143 | // store.dispatch('cart/addCart', { |
| 144 | // uid: this.$store.state.user.userInfo.uid, | 144 | // uid: this.$store.state.user.userInfo.uid, |
| 145 | // openid: this.$store.state.user.userInfo.openid, | 145 | // openid: this.$store.state.user.userInfo.openid, |
| 146 | // mp_id: 7, | 146 | // mp_id: 7, |
| 147 | // sk_id: 7, | 147 | // sk_id: 7, |
| 148 | // num: 1, | 148 | // num: 1, |
| 149 | // pid: 8, | 149 | // pid: 8, |
| 150 | // price: 128, | 150 | // price: 128, |
| 151 | // checkedSKU:{}, | 151 | // checkedSKU:{}, |
| 152 | // }) | 152 | // }) |
| 153 | store.dispatch('cart/getCartList', { | 153 | store.dispatch('cart/getCartList', { |
| 154 | uid: this.$store.state.user.userInfo.uid, // 用户id | 154 | uid: this.$store.state.user.userInfo.uid, // 用户id |
| 155 | }) | 155 | }) |
| 156 | }, | 156 | }, |
| 157 | |||
| 158 | methods: { | 157 | methods: { |
| 159 | toGoods(id, sk_id) { | 158 | toGoods(id, sk_id) { |
| 160 | console.log('cart-list', this.$store.state.cart.cartList) | 159 | console.log('cart-list', this.$store.state.cart.cartList) |
| 161 | console.log('---', '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id) | 160 | console.log('---', '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id) |
| 162 | uni.navigateTo({ | 161 | uni.navigateTo({ |
| 163 | url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id, | 162 | url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id, |
| 164 | success: res => {}, | 163 | success: res => {}, |
| 165 | fail: () => {}, | 164 | fail: () => {}, |
| 166 | complete: () => {}, | 165 | complete: () => {}, |
| 167 | }) | 166 | }) |
| 168 | }, | 167 | }, |
| 169 | |||
| 170 | counter(index, isadd, item) { | 168 | counter(index, isadd, item) { |
| 171 | // console.log('===>>counter ===>num',num) | 169 | // console.log('===>>counter ===>num',num) |
| 172 | // console.log('===>>counter ===>isadd',isadd) | 170 | // console.log('===>>counter ===>isadd',isadd) |
| 173 | console.log('item=====>', item) | 171 | console.log('item=====>', item) |
| 174 | console.log('num=====>', item.num) | 172 | console.log('num=====>', item.num) |
| 175 | const nums = parseInt(item.num) | 173 | const nums = parseInt(item.num) |
| 176 | if (isadd) { | 174 | if (isadd) { |
| 177 | if (nums >= this.maxCount) { | 175 | if (nums >= this.maxCount) { |
| 178 | this.addDisabled = true | 176 | this.addDisabled = true |
| 179 | } else { | 177 | } else { |
| 180 | this.addDisabled = true | 178 | this.addDisabled = true |
| 181 | // 修改num | 179 | // 修改num |
| 182 | if (this.childIsOpen[index]) { | 180 | if (this.childIsOpen[index]) { |
| 183 | this.totalPrice = this.totalPrice + this.$store.state.cart.cartList[index].nowPrice | 181 | this.totalPrice = this.totalPrice + this.$store.state.cart.cartList[index].nowPrice |
| 184 | } | 182 | } |
| 185 | store.dispatch('cart/modiCart', { | 183 | store.dispatch('cart/modiCart', { |
| 186 | uid: this.$store.state.user.userInfo.uid, | 184 | uid: this.$store.state.user.userInfo.uid, |
| 187 | openid: this.$store.state.user.userInfo.openid, | 185 | openid: this.$store.state.user.userInfo.openid, |
| 188 | mp_id: item.mp_id, | 186 | mp_id: item.mp_id, |
| 189 | sk_id: item.sk_id, | 187 | sk_id: item.sk_id, |
| 190 | price: item.nowPrice, | 188 | price: item.nowPrice, |
| 191 | pid: item.pid, | 189 | pid: item.pid, |
| 192 | num: nums + 1, | 190 | num: nums + 1, |
| 193 | cart_id: item.cart_id, | 191 | cart_id: item.cart_id, |
| 194 | args: { | 192 | args: { |
| 195 | index: index, | 193 | index: index, |
| 196 | isadd: isadd, | 194 | isadd: isadd, |
| 197 | }, | 195 | }, |
| 198 | }) | 196 | }) |
| 199 | this.addDisabled = false | 197 | this.addDisabled = false |
| 200 | } | 198 | } |
| 201 | } else { | 199 | } else { |
| 202 | if (nums <= 1) { | 200 | if (nums <= 1) { |
| 203 | this.desDisabled = true | 201 | this.desDisabled = true |
| 204 | } else { | 202 | } else { |
| 205 | this.desDisabled = false | 203 | this.desDisabled = false |
| 206 | // post 请求修改相关参数 | 204 | // post 请求修改相关参数 |
| 207 | if (this.childIsOpen[index]) { | 205 | if (this.childIsOpen[index]) { |
| 208 | this.totalPrice = this.totalPrice - this.$store.state.cart.cartList[index].nowPrice | 206 | this.totalPrice = this.totalPrice - this.$store.state.cart.cartList[index].nowPrice |
| 209 | } | 207 | } |
| 210 | store.dispatch('cart/modiCart', { | 208 | store.dispatch('cart/modiCart', { |
| 211 | uid: this.$store.state.user.userInfo.uid, | 209 | uid: this.$store.state.user.userInfo.uid, |
| 212 | openid: this.$store.state.user.userInfo.openid, | 210 | openid: this.$store.state.user.userInfo.openid, |
| 213 | mp_id: item.mp_id, | 211 | mp_id: item.mp_id, |
| 214 | sk_id: item.sk_id, | 212 | sk_id: item.sk_id, |
| 215 | price: item.nowPrice, | 213 | price: item.nowPrice, |
| 216 | pid: item.pid, | 214 | pid: item.pid, |
| 217 | num: nums - 1, | 215 | num: nums - 1, |
| 218 | cart_id: item.cart_id, | 216 | cart_id: item.cart_id, |
| 219 | args: { | 217 | args: { |
| 220 | index: index, | 218 | index: index, |
| 221 | isadd: isadd, | 219 | isadd: isadd, |
| 222 | }, | 220 | }, |
| 223 | }) | 221 | }) |
| 224 | this.desDisabled = true | 222 | this.desDisabled = true |
| 225 | } | 223 | } |
| 226 | } | 224 | } |
| 227 | // store.dispatch('cart/getCartList', { | 225 | // store.dispatch('cart/getCartList', { |
| 228 | // uid: this.$store.state.user.userInfo.uid // 用户id | 226 | // uid: this.$store.state.user.userInfo.uid // 用户id |
| 229 | // }) | 227 | // }) |
| 230 | }, | 228 | }, |
| 231 | Change(isopen, indexC) { | 229 | Change(isopen, indexC) { |
| 232 | // console.log('lalla===>',isopen) | 230 | // console.log('lalla===>',isopen) |
| 233 | this.childIsOpen[indexC] = !isopen | 231 | this.childIsOpen[indexC] = !isopen |
| 234 | if (!isopen) { | 232 | if (!isopen) { |
| 235 | this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice) | 233 | this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice) |
| 236 | } else { | 234 | } else { |
| 237 | this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice) | 235 | this.totalPrice = this.totalPrice - (this.$store.state.cart.cartList[indexC].num * this.$store.state.cart.cartList[indexC].nowPrice) |
| 238 | } | 236 | } |
| 239 | let m = true | 237 | let m = true |
| 240 | for (let i = 0; i < this.childIsOpen.length; i++) { | 238 | for (let i = 0; i < this.childIsOpen.length; i++) { |
| 241 | m = m & this.childIsOpen[i] | 239 | m = m & this.childIsOpen[i] |
| 242 | } | 240 | } |
| 243 | if (m == 1) { | 241 | if (m === 1) { |
| 244 | this.pIsoPen = true | 242 | this.pIsoPen = true |
| 245 | } else { | 243 | } else { |
| 246 | this.pIsoPen = false | 244 | this.pIsoPen = false |
| 247 | } | 245 | } |
| 248 | }, | 246 | }, |
| 249 | pChange(isopen) { | 247 | pChange(isopen) { |
| 250 | this.pIsoPen = !isopen | 248 | this.pIsoPen = !isopen |
| 251 | for (let i = 0; i < this.childIsOpen.length; i++) { | 249 | for (let i = 0; i < this.childIsOpen.length; i++) { |
| 252 | this.childIsOpen[i] = !isopen | 250 | this.childIsOpen[i] = !isopen |
| 253 | } | 251 | } |
| 254 | if (this.pIsoPen) { | 252 | if (this.pIsoPen) { |
| 255 | // 计算总价逻辑 | 253 | // 计算总价逻辑 |
| 256 | if (this.childIsOpen.length !== 0) { | 254 | if (this.childIsOpen.length !== 0) { |
| 257 | for (let i = 0; i < this.childIsOpen.length; i++) { | 255 | for (let i = 0; i < this.childIsOpen.length; i++) { |
| 258 | if (this.childIsOpen[i]) { | 256 | if (this.childIsOpen[i]) { |
| 259 | this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[i].num * this.$store.state.cart.cartList[i].nowPrice) | 257 | this.totalPrice = this.totalPrice + (this.$store.state.cart.cartList[i].num * this.$store.state.cart.cartList[i].nowPrice) |
| 260 | } | 258 | } |
| 261 | } | 259 | } |
| 262 | } | 260 | } |
| 263 | } else { | 261 | } else { |
| 264 | this.totalPrice = 0 | 262 | this.totalPrice = 0 |
| 265 | } | 263 | } |
| 266 | }, | 264 | }, |
| 267 | delCart(cart_id, index) { | 265 | delCart(cart_id, index) { |
| 268 | // console.log('userInfo',this.$store.state.user.userInfo) | 266 | // console.log('userInfo',this.$store.state.user.userInfo) |
| 269 | cart_id = parseInt(cart_id) | 267 | cart_id = parseInt(cart_id) |
| 270 | // console.log('delcart------>cart_id',cart_id) | 268 | // console.log('delcart------>cart_id',cart_id) |
| 271 | // console.log('cartlist====>delcart',this.$store.state.cart.cartList) | 269 | // console.log('cartlist====>delcart',this.$store.state.cart.cartList) |
| 272 | // console.log('delcart======>index',index) | 270 | // console.log('delcart======>index',index) |
| 273 | const uid = this.$store.state.user.userInfo.uid | 271 | const uid = this.$store.state.user.userInfo.uid |
| 274 | const openid = this.$store.state.user.userInfo.openid | 272 | const openid = this.$store.state.user.userInfo.openid |
| 275 | uni.showModal({ | 273 | uni.showModal({ |
| 276 | title: '是否删除该商品', | 274 | title: '是否删除该商品', |
| 277 | // content: '是否删除该商品', | 275 | // content: '是否删除该商品', |
| 278 | success: function (res) { | 276 | success: function (res) { |
| 279 | if (res.confirm) { | 277 | if (res.confirm) { |
| 280 | // this.$store.state.cart.cartList.splice(index,1) | 278 | // this.$store.state.cart.cartList.splice(index,1) |
| 281 | store.dispatch('cart/delCart', { | 279 | store.dispatch('cart/delCart', { |
| 282 | uid: uid, | 280 | uid: uid, |
| 283 | openid: openid, | 281 | openid: openid, |
| 284 | cart_id: cart_id, // 要修改的购物车id | 282 | cart_id: cart_id, // 要修改的购物车id |
| 285 | arg: index, // 由于action 传参是能接收两参数,因此将index放入对象 | 283 | arg: index, // 由于action 传参是能接收两参数,因此将index放入对象 |
| 286 | }) | 284 | }) |
| 287 | console.log('用户点击确定') | 285 | console.log('用户点击确定') |
| 288 | } | 286 | } |
| 289 | }, | 287 | }, |
| 290 | }) | 288 | }) |
| 291 | }, | 289 | }, |
| 292 | }, | 290 | }, |
| 293 | } | 291 | } |
| 294 | </script> | 292 | </script> |
| 295 | 293 | ||
| 296 | <style lang="scss"> | 294 | <style lang="scss"> |
| 297 | .content { | 295 | .content { |
| 298 | min-height: 100vh; | 296 | min-height: 100vh; |
| 299 | background-color: #f2f2f2; | 297 | background-color: #f2f2f2; |
| 300 | display: flex; | 298 | display: flex; |
| 301 | flex-direction: column; | 299 | flex-direction: column; |
| 302 | align-items: center; | 300 | align-items: center; |
| 303 | justify-content: space-between; | 301 | justify-content: space-between; |
| 304 | padding: 20rpx 40rpx; | 302 | padding: 20rpx 40rpx; |
| 305 | box-sizing: border-box; | 303 | box-sizing: border-box; |
| 306 | 304 | ||
| 307 | .partentCheck { | 305 | .partentCheck { |
| 308 | width: 16px; | 306 | width: 16px; |
| 309 | height: 16px; | 307 | height: 16px; |
| 310 | border-radius: 22px; | 308 | border-radius: 22px; |
| 311 | border: 1px solid #cfcfcf; | 309 | border: 1px solid #cfcfcf; |
| 312 | background-color: #ffffff; | 310 | background-color: #ffffff; |
| 313 | margin: 6px; | 311 | margin: 6px; |
| 314 | } | 312 | } |
| 315 | .partentChecked { | 313 | .partentChecked { |
| 316 | width: 18px; | 314 | width: 18px; |
| 317 | height: 18px; | 315 | height: 18px; |
| 318 | border-radius: 22px; | 316 | border-radius: 22px; |
| 319 | background-color: #ff6b4a; | 317 | background-color: #ff6b4a; |
| 320 | margin: 6px; | 318 | margin: 6px; |
| 321 | .correct { | 319 | .correct { |
| 322 | display: inline-block; | 320 | display: inline-block; |
| 323 | position: relative; | 321 | position: relative; |
| 324 | width: 10rpx; | 322 | width: 10rpx; |
| 325 | height: 2rpx; | 323 | height: 2rpx; |
| 326 | background: #ffffff; | 324 | background: #ffffff; |
| 327 | line-height: 0; | 325 | line-height: 0; |
| 328 | font-size: 0; | 326 | font-size: 0; |
| 329 | position: relative; | 327 | position: relative; |
| 330 | top: -7px; | 328 | top: -7px; |
| 331 | left: 4px; | 329 | left: 4px; |
| 332 | -webkit-transform: rotate(45deg); | 330 | -webkit-transform: rotate(45deg); |
| 333 | } | 331 | } |
| 334 | .correct:after { | 332 | .correct:after { |
| 335 | content: "/"; | 333 | content: "/"; |
| 336 | display: block; | 334 | display: block; |
| 337 | width: 16rpx; | 335 | width: 16rpx; |
| 338 | height: 2rpx; | 336 | height: 2rpx; |
| 339 | background: #ffffff; | 337 | background: #ffffff; |
| 340 | -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%); | 338 | -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%); |
| 341 | } | 339 | } |
| 342 | } | 340 | } |
| 343 | 341 | ||
| 344 | .card { | 342 | .card { |
| 345 | background-color: #ffffff; | 343 | background-color: #ffffff; |
| 346 | border-radius: 16rpx; | 344 | border-radius: 16rpx; |
| 347 | box-sizing: border-box; | 345 | box-sizing: border-box; |
| 348 | padding: 36rpx 36rpx 36rpx 18rpx; | 346 | padding: 36rpx 36rpx 36rpx 18rpx; |
| 349 | display: flex; | 347 | display: flex; |
| 350 | flex-direction: column; | 348 | flex-direction: column; |
| 351 | align-items: center; | 349 | align-items: center; |
| 352 | justify-content: space-between; | 350 | justify-content: space-between; |
| 353 | margin-bottom: 180rpx; | 351 | margin-bottom: 180rpx; |
| 354 | .cardHeader { | 352 | .cardHeader { |
| 355 | width: 100%; | 353 | width: 100%; |
| 356 | height: 36rpx; | 354 | height: 36rpx; |
| 357 | display: flex; | 355 | display: flex; |
| 358 | align-items: center; | 356 | align-items: center; |
| 359 | justify-content: flex-start; | 357 | justify-content: flex-start; |
| 360 | margin-bottom: 20rpx; | 358 | margin-bottom: 20rpx; |
| 361 | image { | 359 | image { |
| 362 | height: 32rpx; | 360 | height: 32rpx; |
| 363 | width: 32rpx; | 361 | width: 32rpx; |
| 364 | padding-left: 6px; | 362 | padding-left: 6px; |
| 365 | padding-right: 10px; | 363 | padding-right: 10px; |
| 366 | } | 364 | } |
| 367 | text { | 365 | text { |
| 368 | // font-family: PingFangSC-Regular; | 366 | // font-family: PingFangSC-Regular; |
| 369 | font-size: 14px; | 367 | font-size: 14px; |
| 370 | color: #333333; | 368 | color: #333333; |
| 371 | letter-spacing: -0.26px; | 369 | letter-spacing: -0.26px; |
| 372 | } | 370 | } |
| 373 | } | 371 | } |
| 374 | .cardBody { | 372 | .cardBody { |
| 375 | width: 100%; | 373 | width: 100%; |
| 376 | min-height: 300rpx; | 374 | min-height: 300rpx; |
| 377 | display: flex; | 375 | display: flex; |
| 378 | align-items: center; | 376 | align-items: center; |
| 379 | justify-content: space-between; | 377 | justify-content: space-between; |
| 380 | .goodInfo { | 378 | .goodInfo { |
| 381 | width: 390rpx; | 379 | width: 390rpx; |
| 382 | display: flex; | 380 | display: flex; |
| 383 | flex-direction: row; | 381 | flex-direction: row; |
| 384 | justify-content: flex-start; | 382 | justify-content: flex-start; |
| 385 | padding-left: 6px; | 383 | padding-left: 6px; |
| 386 | 384 | ||
| 387 | .imageWrap { | 385 | .imageWrap { |
| 388 | height: 188rpx; | 386 | height: 188rpx; |
| 389 | width: 188rpx; | 387 | width: 188rpx; |
| 390 | margin-right: 28rpx; | 388 | margin-right: 28rpx; |
| 391 | 389 | ||
| 392 | image { | 390 | image { |
| 393 | border-radius: 4px; | 391 | border-radius: 4px; |
| 394 | height: 188rpx; | 392 | height: 188rpx; |
| 395 | width: 188rpx; | 393 | width: 188rpx; |
| 396 | } | 394 | } |
| 397 | } | 395 | } |
| 398 | .infoRight { | 396 | .infoRight { |
| 399 | display: flex; | 397 | display: flex; |
| 400 | flex-direction: column; | 398 | flex-direction: column; |
| 401 | align-items: flex-start; | 399 | align-items: flex-start; |
| 402 | justify-content: space-between; | 400 | justify-content: space-between; |
| 403 | min-height: 240rpx; | 401 | min-height: 240rpx; |
| 404 | .goodName { | 402 | .goodName { |
| 405 | display: -webkit-box; | 403 | display: -webkit-box; |
| 406 | -webkit-box-orient: vertical; | 404 | -webkit-box-orient: vertical; |
| 407 | -webkit-line-clamp: 2; | 405 | -webkit-line-clamp: 2; |
| 408 | text-align: justify; | 406 | text-align: justify; |
| 409 | overflow: hidden; | 407 | overflow: hidden; |
| 410 | font-size: 28rpx; | 408 | font-size: 28rpx; |
| 411 | color: #333333; | 409 | color: #333333; |
| 412 | } | 410 | } |
| 413 | .describ { | 411 | .describ { |
| 414 | width: 100%; | 412 | width: 100%; |
| 415 | // min-height: 80rpx; | 413 | // min-height: 80rpx; |
| 416 | // box-sizing: border-box; | 414 | // box-sizing: border-box; |
| 417 | // padding: 10rpx; | 415 | // padding: 10rpx; |
| 418 | font-size: 20rpx; | 416 | font-size: 20rpx; |
| 419 | letter-spacing: -0.23px; | 417 | letter-spacing: -0.23px; |
| 420 | text-align: justify; | 418 | text-align: justify; |
| 421 | color: #999999; | 419 | color: #999999; |
| 422 | // background: #F9F9F9; | 420 | // background: #F9F9F9; |
| 423 | // display: flex; | 421 | // display: flex; |
| 424 | // justify-content: center; | 422 | // justify-content: center; |
| 425 | // align-items: center; | 423 | // align-items: center; |
| 426 | // text{ | 424 | // text{ |
| 427 | // text-overflow: -o-ellipsis-lastline; | 425 | // text-overflow: -o-ellipsis-lastline; |
| 428 | // overflow: hidden; | 426 | // overflow: hidden; |
| 429 | // text-overflow: ellipsis; | 427 | // text-overflow: ellipsis; |
| 430 | // display: -webkit-box; | 428 | // display: -webkit-box; |
| 431 | // -webkit-line-clamp: 2; | 429 | // -webkit-line-clamp: 2; |
| 432 | // line-clamp: 2; | 430 | // line-clamp: 2; |
| 433 | // -webkit-box-orient: vertical; | 431 | // -webkit-box-orient: vertical; |
| 434 | // } | 432 | // } |
| 435 | // .icon { | 433 | // .icon { |
| 436 | // width: 0; | 434 | // width: 0; |
| 437 | // height: 0; | 435 | // height: 0; |
| 438 | // border-left: 5px transparent; | 436 | // border-left: 5px transparent; |
| 439 | // border-right: 5px transparent; | 437 | // border-right: 5px transparent; |
| 440 | // border-top: 5px #979797; | 438 | // border-top: 5px #979797; |
| 441 | // border-bottom: 0 transparent; | 439 | // border-bottom: 0 transparent; |
| 442 | // border-style: solid; | 440 | // border-style: solid; |
| 443 | // position: relative; | 441 | // position: relative; |
| 444 | // margin-left: 10px; | 442 | // margin-left: 10px; |
| 445 | // // transform: scaleY(-1); | 443 | // // transform: scaleY(-1); |
| 446 | // } | 444 | // } |
| 447 | // .icon::after{ | 445 | // .icon::after{ |
| 448 | // content: ''; | 446 | // content: ''; |
| 449 | // position: absolute; | 447 | // position: absolute; |
| 450 | // top: -6.5px; | 448 | // top: -6.5px; |
| 451 | // left: -5px; | 449 | // left: -5px; |
| 452 | // border-left: 5px transparent; | 450 | // border-left: 5px transparent; |
| 453 | // border-right: 5px transparent; | 451 | // border-right: 5px transparent; |
| 454 | // border-top: 5px #FFFFFF; | 452 | // border-top: 5px #FFFFFF; |
| 455 | // border-bottom: 0 transparent; | 453 | // border-bottom: 0 transparent; |
| 456 | // border-style: solid; | 454 | // border-style: solid; |
| 457 | // } | 455 | // } |
| 458 | } | 456 | } |
| 459 | .priceBox { | 457 | .priceBox { |
| 460 | display: flex; | 458 | display: flex; |
| 461 | justify-content: space-between; | 459 | justify-content: space-between; |
| 462 | align-items: center; | 460 | align-items: center; |
| 463 | // margin-top: 26px; | 461 | // margin-top: 26px; |
| 464 | width: 100%; | 462 | width: 100%; |
| 465 | font-size: 14px; | 463 | font-size: 14px; |
| 466 | color: #999999; | 464 | color: #999999; |
| 467 | .maxCount { | 465 | .maxCount { |
| 468 | color: #999999; | 466 | color: #999999; |
| 469 | font-size: 24rpx; | 467 | font-size: 24rpx; |
| 470 | } | 468 | } |
| 471 | .price { | 469 | .price { |
| 472 | color: #ff6b4a; | 470 | color: #ff6b4a; |
| 473 | font-size: 28rpx; | 471 | font-size: 28rpx; |
| 474 | } | 472 | } |
| 475 | .counter { | 473 | .counter { |
| 476 | display: flex; | 474 | display: flex; |
| 477 | flex-direction: row; | 475 | flex-direction: row; |
| 478 | justify-content: space-between; | 476 | justify-content: space-between; |
| 479 | align-items: center; | 477 | align-items: center; |
| 480 | font-size: 28rpx; | 478 | font-size: 28rpx; |
| 481 | color: #333333; | 479 | color: #333333; |
| 482 | width: 122rpx; | 480 | width: 122rpx; |
| 483 | .btn { | 481 | .btn { |
| 484 | display: flex; | 482 | display: flex; |
| 485 | justify-content: center; | 483 | justify-content: center; |
| 486 | line-height: 32rpx; | 484 | line-height: 32rpx; |
| 487 | height: 32rpx; | 485 | height: 32rpx; |
| 488 | width: 32rpx; | 486 | width: 32rpx; |
| 489 | background-color: #f2f2f2; | 487 | background-color: #f2f2f2; |
| 490 | color: #cfcfcf; | 488 | color: #cfcfcf; |
| 491 | } | 489 | } |
| 492 | } | 490 | } |
| 493 | } | 491 | } |
| 494 | } | 492 | } |
| 495 | } | 493 | } |
| 496 | } | 494 | } |
| 497 | } | 495 | } |
| 498 | |||
| 499 | <<<<<<< HEAD | ||
| 500 | .footer { | 496 | .footer { |
| 501 | position: fixed; | 497 | position: fixed; |
| 502 | left: 0; | 498 | left: 0; |
| 503 | bottom: 0px; | 499 | bottom: 0px; |
| 504 | height: 112rpx; | 500 | height: 112rpx; |
| 505 | width: 100%; | 501 | width: 100%; |
| 506 | background-color: #ffffff; | 502 | background-color: #ffffff; |
| 507 | font-size: 16px; | 503 | font-size: 16px; |
| 508 | display: flex; | 504 | display: flex; |
| 509 | justify-content: space-between; | 505 | justify-content: space-between; |
| 510 | align-items: center; | 506 | align-items: center; |
| 511 | .footerLeft { | 507 | .footerLeft { |
| 512 | display: flex; | 508 | display: flex; |
| 513 | justify-content: center; | 509 | justify-content: center; |
| 514 | align-items: center; | 510 | align-items: center; |
| 515 | width: 50%; | 511 | width: 50%; |
| 516 | color: #333333; | 512 | color: #333333; |
| 517 | text { | 513 | text { |
| 518 | color: #ff6b4a; | 514 | color: #ff6b4a; |
| 519 | } | 515 | } |
| 520 | } | 516 | } |
| 521 | .footerRight { | 517 | .footerRight { |
| 522 | display: flex; | 518 | display: flex; |
| 523 | justify-content: flex-end; | 519 | justify-content: flex-end; |
| 524 | align-items: center; | 520 | align-items: center; |
| 525 | width: 50%; | 521 | width: 50%; |
| 526 | margin-right: 26rpx; | 522 | margin-right: 26rpx; |
| 527 | .paybtn { | 523 | .paybtn { |
| 528 | display: flex; | 524 | display: flex; |
| 529 | justify-content: center; | 525 | justify-content: center; |
| 530 | align-items: center; | 526 | align-items: center; |
| 531 | background: #ff6b4a; | 527 | background: #ff6b4a; |
| 532 | border-radius: 20px; | 528 | border-radius: 20px; |
| 533 | border-radius: 20px; | 529 | border-radius: 20px; |
| 534 | color: #ffffff; | 530 | color: #ffffff; |
| 535 | width: 204rpx; | 531 | width: 204rpx; |
| 536 | height: 80rpx; | 532 | height: 80rpx; |
| 537 | } | 533 | } |
| 538 | } | 534 | } |
| 539 | } | 535 | } |
| 540 | } | 536 | } |
| 541 | </style> | 537 | </style> |
| 542 | ======= | ||
| 543 | </style> | ||
| 544 | >>>>>>> cb58acb8c1540674edb1dd7cba23e4f04df66c19 | ||
| 545 | 538 |