|
|
- <template>
- <view class="page">
- <navbar title="购物车" leftClick @leftClick="$utils.navigateBack" />
-
- <view class="user">
- <uv-checkbox-group
- shape="circle"
- v-model="cartCheckboxValue">
-
- <uv-swipe-action>
- <view
- v-for="(item, index) in cartList"
- :key="index">
- <view style="margin-top: 20rpx;"></view>
- <uv-swipe-action-item
- :options="options"
- @click="delCart(item, index)">
- <view class="item">
- <view class="checkbox">
- <uv-checkbox
- :name="item.shopcar.id"
- activeColor="#FA5A0A"
- size="40rpx"
- icon-size="35rpx"
- ></uv-checkbox>
- </view>
-
- <image
- class="image"
- :src="item.wares.waresImage"
- mode=""></image>
-
- <view class="info">
- <view class="title">
- <view class="">
- {{ item.wares.waresTitle }}
- </view>
- <view class="">
- <uv-number-box v-model="item.shopcar.shopcarNumber"
- @change="e => valChange(item, e)"></uv-number-box>
- </view>
- </view>
- <!-- <view class="unit">
- 规格:{{ item.unit }}
- <uv-icon name="arrow-down"></uv-icon>
- </view> -->
- <view class="price">
- ¥<text>{{ item.wares.waresPrice }}</text>元
- </view>
- </view>
- </view>
- </uv-swipe-action-item>
- </view>
- </uv-swipe-action>
- </uv-checkbox-group>
-
- <cartAction/>
- </view>
-
- <tabber select="3" />
- </view>
- </template>
-
- <script>
- import cartAction from '../components/product/cartAction.vue'
- import { mapState } from 'vuex'
- export default {
- components: {
- cartAction
- },
- data() {
- return {
- options: [
- {
- text: '删除',
- style: {
- backgroundColor: '#FA5A0A'
- }
- },
- ],
- }
- },
- computed: {
- ...mapState(['cartList', 'cartCheckboxValue']),
- },
- onShow() {
- this.$store.commit('getCartList')
- },
- methods: {
- valChange(item, e){
- this.$api('updateShopcar', {
- id : item.shopcar.id,
- shopcarNumber : e.value,
- })
- },
- // 删除购物车
- delCart(item, index){
- this.$api('deleteShopcar', {
- shopcarId : item.shopcar.id
- }, res => {
- if(res.code == 200){
- this.$store.commit('getCartList')
- uni.showToast({
- title: '删除成功',
- });
- }
- })
- },
- }
- }
- </script>
-
- <style scoped lang="scss">
- .page {
- padding-bottom: 200rpx;
- /deep/ .uv-swipe-action{
- width: 100%;
- }
- }
-
- .user {
- .item{
- background-color: #fff;
- display: flex;
- padding: 30rpx;
- .checkbox{
- display: flex;
- justify-content: center;
- align-items: center;
- }
- .image{
- width: 200rpx;
- height: 200rpx;
- border-radius: 20rpx;
- }
- .info{
- flex: 1;
- .title{
- display: flex;
- padding: 10rpx 20rpx;
- justify-content: space-between;
-
- }
- .unit{
- font-size: 24rpx;
- padding: 10rpx 20rpx;
- color: #717171;
- display: flex;
- align-items: center;
- }
- .price{
- color: $uni-color;
- font-size: 28rpx;
- padding: 10rpx 20rpx;
- text{
- font-size: 36rpx;
- font-weight: 900;
- }
- }
- }
- }
-
- }
- </style>
|