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