parentNew/src/pages/class/shoppingCart.vue

<template>
  <view class="page">
		<cu-custom :isBack="true"></cu-custom>
		<view class="header" :style="[{top:topHeader + 'px'}]">
			<view class="header-title">
				<view class="header-title-main">
						<view class="margin-bottom-xs">{{title}}</view>
						<view class="point"></view>
				</view>
			</view>
		</view>
			<scroll-view  scroll-y="true"
			:style="[{height:'calc(100vh - 64px - '+ topHeader+'px)'}]"
			class="scroll-main">
				<view class="list">
					<view class="cu-card margin-bottom shadow" v-for="(item,index) in list" :key="index">
						<view class="cu-item">
							<view class="card-header flex justify-between solid-bottom">
								 <view>{{item.student_name}}</view>
								 <view>
									  <text class="cuIcon-delete text-red" @tap="del(item,index)"></text>
								 </view>
							</view>
							<view class="card flex">
								<view class="card-left">
									<img mode="scaleToFill" :src="item.image" alt="" class="card-image">
								</view>
								<view class="card-right flex-sub margin-left-sm">
									<view class="card-title">{{item.class_attend_name}}</view>
									<view class="text-price text-student text-xl margin-top-xs">{{item.price}}</view>
									<view class="card-item">
										 <text class="card-label">机构：</text>
										 <text class="card-text">{{item.agency_name||'-'}}</text>
									</view>
									<view class="card-item margin-top-xs" v-if="item.cate_type===0">
										 <text class="card-label">老师：</text>
										 <text class="card-text">{{item.teacher_name||'-'}}</text>
									</view>
									<view class="card-item margin-top-xs">
										 <text class="card-label">总共：</text>
										 <text class="card-text">{{item.class_total||'-'}}</text>
									</view>
									<view class="card-item margin-top-xs">
										 <text class="card-label">时间：</text>
										 <text class="card-text">{{item.week_limit||'-'}}</text>
									</view>
								</view>
							</view>
							<view class="card-footer margin-top-xs" v-if="item.prop">
								<view v-for="(tag,index) in item.prop" :key="index" class="cu-tag line-red">{{tag}}</view>
							</view>
							<view class="card-bottom margin-top-xs">
								<button @tap="pay(item)" class="cu-btn round bg-student text-white">立即下单</button>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
	</view>
</template>

<script>
import { _shopList, _delShop, _createOrder } from '@/api/course'
import { mapGetters } from 'vuex'
import { deepClone } from '@/common/utils'
import socket from '@/common/webSocket'
export default {
  data() {
    return {
      title: '购物车',
      topHeader: this.globalCustomBarHeight,
      list: []
    }
  },
  computed: {
    ...mapGetters([
      'carts', 'phone'
    ])
  },
  onLoad(option) {
    this.get_list()
    socket.initSocket()
  },
  methods: {
    get_list() {
      _shopList().then(res => {
        this.list = res.data
        const carts = this.list.map(item => Number(item.class_attend_id))
        this.$store.dispatch('setCarts', carts)// 刷新购物车
      })
    },
    del(item, index) {
      const _self = this
      uni.showModal({
        title: '提示',
        content: '确定要删除？',
        cancelText: '取消',
        confirmText: '确定',
        success: res => {
          if (res.confirm) {
            _delShop({ shopping_id: item.shopping_id, student_id: item.student_id }).then(res => {
              _self.get_list()
            })
          }
        }
      })
    },
    pay(item) {
      const order = JSON.stringify([item])
      let carts = deepClone(this.carts)
      const index = carts.indexOf(Number(item.class_attend_id))
      carts = carts.splice(index, 1)
      if (!this.phone) {
        return this.globalNavigateTo('bindPhone')
      }
      _createOrder({ result: order }).then(res => {
        this.socket.onMessage = message => {
          if (typeof message !== 'object') {
            return false
          }
          if (message.push_type !== 'order') {
            return false
          }
          if (message.code === 400) {
            uni.showToast({ title: message.msg, icon: 'none', duration: 2000 })
            return false
          }
          this.$store.dispatch('setCarts', carts)
          this.globalNavigateTo('order')
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '~@/common/css/mixin.scss';
.scroll-main{
	margin-top:64px;
	padding:20rpx;
}
.cu-card{
	.cu-item{
		margin-top:10rpx;
		padding:20rpx;
		margin:0;
	}
}
.card-header{
	padding-bottom:10px;
  @include title(10px,18px);
}
.card{
	&-title{
		font-size:16px;
	}
	&-image{
		width:35vw;
		height:35vw;
		border-radius:10rpx;
	}
	&-label{
		color:#999;
	}
	&-text{
		color:#333;
	}
}
.card-bottom{
	text-align:right;
}
</style>