| | |
| | | <template> |
| | | <view class="cart"> |
| | | <u-swipe-action> |
| | | <u-swipe-action-item :options="options" v-for="(item, index) in list" :name="index" :key="index"> |
| | | <u-swipe-action-item :options="options" v-for="(item, index) in list" :name="index" :key="index" @click="deleRow"> |
| | | <view class="cart-item"> |
| | | <view class="cart-item-check"> |
| | | <view class="cart-item-check" @click="select(item)"> |
| | | <image src="/static/icon/ic_agree@2x.png" mode="widthFix" v-if="!item.active"></image> |
| | | <image src="/static/icon/cart_ic_sel@2x.png" mode="widthFix" v-else></image> |
| | | </view> |
| | |
| | | <text>{{item.price[0]}}</text> |
| | | <text>.{{item.price[1]}}</text> |
| | | </view> |
| | | <u-number-box v-model="item.num"></u-number-box> |
| | | <u-number-box v-model="item.num" @change="changeNum(index)"></u-number-box> |
| | | </view> |
| | | </view> |
| | | </view> |
| | |
| | | </u-swipe-action> |
| | | <view class="footer"> |
| | | <view class="edit"> |
| | | <view class="edit-left"> |
| | | <image src="/static/icon/ic_agree@2x.png" mode="widthFix"></image> |
| | | <view class="edit-left" @click="quanxuan"> |
| | | <image src="/static/icon/cart_ic_sel@2x.png" mode="widthFix" v-if="selectAll"></image> |
| | | <image src="/static/icon/ic_agree@2x.png" mode="widthFix" v-else></image> |
| | | <text>全选</text> |
| | | </view> |
| | | <view class="edit-right"> |
| | | <view class="edit-right-label">合计:</view> |
| | | <view class="edit-right-price"> |
| | | <text>499</text> |
| | | <text>.00</text> |
| | | <text>{{totalPrice[0]}}</text> |
| | | <text>.{{totalPrice[1]}}</text> |
| | | </view> |
| | | <view class="edit-right-btn">结算</view> |
| | | </view> |
| | |
| | | </template> |
| | | |
| | | <script> |
| | | import { mapState } from 'vuex' |
| | | export default { |
| | | computed: { |
| | | ...mapState(['userInfo']), |
| | | totalPrice() { |
| | | let price = 0 |
| | | this.list.forEach((item, index) => { |
| | | if (item.active) { |
| | | price += Number(item.price[0] + '.' +item.price[1]) |
| | | } |
| | | }) |
| | | return price.toFixed(2).split('.') |
| | | }, |
| | | // 全选 |
| | | selectAll() { |
| | | let open = true |
| | | if (this.list.length > 0) { |
| | | this.list.forEach(item => { |
| | | if (!item.active) { |
| | | open = false |
| | | } |
| | | }) |
| | | return open; |
| | | } else { |
| | | return false; |
| | | } |
| | | } |
| | | }, |
| | | data() { |
| | | return { |
| | | value: 1, |
| | |
| | | this.getList() |
| | | }, |
| | | methods: { |
| | | // 全选 |
| | | quanxuan() { |
| | | this.list.forEach((item) => { |
| | | item.active = true |
| | | }) |
| | | }, |
| | | // 单选 |
| | | select(item) { |
| | | item.active = !item.active |
| | | }, |
| | | // 更新商品数量 |
| | | changeNum(index) { |
| | | this.$u.api.updateNum({ |
| | | id: this.list[index].shopCartId, |
| | | memberId: this.userInfo.id, |
| | | num: this.list[index].num |
| | | }) |
| | | }, |
| | | deleRow(e) { |
| | | this.$u.api.deleteBatch({ ids: this.list[e.name].shopCartId }) |
| | | .then(res => { |
| | | if (res.code === 200) { |
| | | this.list.splice(e.name, 1) |
| | | } |
| | | }) |
| | | }, |
| | | getList() { |
| | | if (!this.next) return; |
| | | this.$u.api.shopCartPage({ |
| | |
| | | model: {} |
| | | }).then(res => { |
| | | if (res.code === 200) { |
| | | console.log(res) |
| | | res.data.records.forEach(item => { |
| | | item.price = item.price.toFixed(2).split('.') |
| | | item.active = false |
| | |
| | | |
| | | .bottom-price { |
| | | display: flex; |
| | | align-items: center; |
| | | align-items: baseline; |
| | | justify-content: space-between; |
| | | |
| | | text { |