|
@@ -10,52 +10,78 @@
|
10
|
10
|
</view>
|
11
|
11
|
</view>
|
12
|
12
|
<scroll-view scroll-y="true"
|
13
|
|
- :style="[{height:'calc(100vh - 64px - '+ topHeader+'px)'}]"
|
|
13
|
+ :style="[{height:'calc(100vh - 64px - 70px - '+ topHeader+'px)'}]"
|
14
|
14
|
class="scroll-main">
|
15
|
15
|
<view class="list">
|
16
|
|
- <view class="cu-card margin-bottom shadow" v-for="(item,index) in list" :key="index">
|
17
|
|
- <view class="cu-item">
|
18
|
|
- <view class="card-header flex justify-between solid-bottom">
|
19
|
|
- <view>{{item.student_name}}</view>
|
20
|
|
- <view>
|
21
|
|
- <text class="cuIcon-delete text-red" @tap="del(item,index)"></text>
|
22
|
|
- </view>
|
23
|
|
- </view>
|
24
|
|
- <view class="card flex">
|
25
|
|
- <view class="card-left">
|
26
|
|
- <img mode="scaleToFill" :src="item.image" alt="" class="card-image">
|
27
|
|
- </view>
|
28
|
|
- <view class="card-right flex-sub margin-left-sm">
|
29
|
|
- <view class="card-title">{{item.class_attend_name}}</view>
|
30
|
|
- <view class="text-price text-student text-xl margin-top-xs">{{item.price}}</view>
|
31
|
|
- <view class="card-item">
|
32
|
|
- <text class="card-label">机构:</text>
|
33
|
|
- <text class="card-text">{{item.agency_name||'-'}}</text>
|
|
16
|
+ <checkbox-group @change="checkChange">
|
|
17
|
+ <view class="cu-card margin-bottom shadow" v-for="(item,index) in list" :key="index">
|
|
18
|
+ <!-- <label class="cu-item"> -->
|
|
19
|
+ <label class="cu-item">
|
|
20
|
+ <view class="card-header flex justify-between solid-bottom">
|
|
21
|
+ <view>
|
|
22
|
+ <checkbox style="transform:scale(0.7)" :value="item.shopping_id" :checked="checkedIds.includes(item.shopping_id)"></checkbox>
|
|
23
|
+ <!-- <checkbox
|
|
24
|
+ style="transform:scale(0.7)"
|
|
25
|
+ :value="item.shopping_id" :checked="checked.includes(item.shopping_id)"></checkbox> -->
|
|
26
|
+ {{item.student_name}}
|
|
27
|
+ </view>
|
|
28
|
+ <view @tap.stop=''>
|
|
29
|
+ <text class="cuIcon-delete text-red" @tap="del(item,index)"></text>
|
|
30
|
+ </view>
|
34
|
31
|
</view>
|
35
|
|
- <view class="card-item margin-top-xs" v-if="item.cate_type===0">
|
36
|
|
- <text class="card-label">老师:</text>
|
37
|
|
- <text class="card-text">{{item.teacher_name||'-'}}</text>
|
|
32
|
+ <view class="card flex">
|
|
33
|
+ <view class="card-left">
|
|
34
|
+ <img mode="scaleToFill" :src="item.image" alt="" class="card-image">
|
|
35
|
+ </view>
|
|
36
|
+ <view class="card-right flex-sub margin-left-sm">
|
|
37
|
+ <view class="card-title">{{item.class_attend_name}}</view>
|
|
38
|
+ <view class="text-price text-student text-xl margin-top-xs">{{item.price}}</view>
|
|
39
|
+ <view class="card-item">
|
|
40
|
+ <text class="card-label">机构:</text>
|
|
41
|
+ <text class="card-text">{{item.agency_name||'-'}}</text>
|
|
42
|
+ </view>
|
|
43
|
+ <view class="card-item margin-top-xs" v-if="item.cate_type===0">
|
|
44
|
+ <text class="card-label">老师:</text>
|
|
45
|
+ <text class="card-text">{{item.teacher_name||'-'}}</text>
|
|
46
|
+ </view>
|
|
47
|
+ <view class="card-item margin-top-xs">
|
|
48
|
+ <text class="card-label">总共:</text>
|
|
49
|
+ <text class="card-text">{{item.class_total||'-'}}</text>
|
|
50
|
+ </view>
|
|
51
|
+ <view class="card-item margin-top-xs">
|
|
52
|
+ <text class="card-label">时间:</text>
|
|
53
|
+ <text class="card-text">{{item.week_limit||'-'}}</text>
|
|
54
|
+ </view>
|
|
55
|
+ </view>
|
38
|
56
|
</view>
|
39
|
|
- <view class="card-item margin-top-xs">
|
40
|
|
- <text class="card-label">总共:</text>
|
41
|
|
- <text class="card-text">{{item.class_total||'-'}}</text>
|
|
57
|
+ <view class="card-footer margin-top-xs" v-if="item.prop">
|
|
58
|
+ <view v-for="(tag,index) in item.prop" :key="index" class="cu-tag line-red">{{tag}}</view>
|
42
|
59
|
</view>
|
43
|
|
- <view class="card-item margin-top-xs">
|
44
|
|
- <text class="card-label">时间:</text>
|
45
|
|
- <text class="card-text">{{item.week_limit||'-'}}</text>
|
|
60
|
+ <view class="card-bottom margin-top-xs">
|
|
61
|
+ <!-- <button @tap="pay(item)" class="cu-btn round bg-student text-white">立即下单</button> -->
|
46
|
62
|
</view>
|
47
|
|
- </view>
|
48
|
|
- </view>
|
49
|
|
- <view class="card-footer margin-top-xs" v-if="item.prop">
|
50
|
|
- <view v-for="(tag,index) in item.prop" :key="index" class="cu-tag line-red">{{tag}}</view>
|
51
|
|
- </view>
|
52
|
|
- <view class="card-bottom margin-top-xs">
|
53
|
|
- <button @tap="pay(item)" class="cu-btn round bg-student text-white">立即下单</button>
|
54
|
|
- </view>
|
|
63
|
+ </label>
|
|
64
|
+ <!-- </label> -->
|
55
|
65
|
</view>
|
56
|
|
- </view>
|
|
66
|
+ </checkbox-group>
|
57
|
67
|
</view>
|
58
|
68
|
</scroll-view>
|
|
69
|
+ <view class="static flex shadow">
|
|
70
|
+ <view class="static-price">
|
|
71
|
+ <checkbox-group @change="chooseAll">
|
|
72
|
+ <label>
|
|
73
|
+ <checkbox :checked="checkAll" style="transform:scale(0.7);"/>全选
|
|
74
|
+ </label>
|
|
75
|
+ </checkbox-group>
|
|
76
|
+ </view>
|
|
77
|
+ <view class="static-choose text-ellipsis" v-if="checkedIds.length>0">
|
|
78
|
+ <text>已选:</text><text class="margin-right-xs">{{checkedIds.length}}</text>
|
|
79
|
+ <text>总价:</text><text class="text-price text-red">{{sum}}</text>
|
|
80
|
+ </view>
|
|
81
|
+ <view class="static-order flex align-center">
|
|
82
|
+ <button class="cu-btn round bg-student text-white margin-left-xs" @tap="pay">立即下单</button>
|
|
83
|
+ </view>
|
|
84
|
+ </view>
|
59
|
85
|
</view>
|
60
|
86
|
</template>
|
61
|
87
|
|
|
@@ -63,13 +89,19 @@
|
63
|
89
|
import { _shopList, _delShop, _createOrder } from '@/api/course'
|
64
|
90
|
import { mapGetters } from 'vuex'
|
65
|
91
|
import { deepClone } from '@/common/utils'
|
|
92
|
+import NP from 'number-precision'
|
66
|
93
|
import socket from '@/common/webSocket'
|
67
|
94
|
export default {
|
68
|
95
|
data() {
|
69
|
96
|
return {
|
70
|
97
|
title: '购物车',
|
71
|
98
|
topHeader: this.globalCustomBarHeight,
|
72
|
|
- list: []
|
|
99
|
+ list: [],
|
|
100
|
+ checkedIds: [], // 已选择
|
|
101
|
+ shoppingList: [], // 购物车列表
|
|
102
|
+ sum: 0,
|
|
103
|
+ all: [], // 全部
|
|
104
|
+ checkAll: false
|
73
|
105
|
}
|
74
|
106
|
},
|
75
|
107
|
computed: {
|
|
@@ -82,9 +114,25 @@ export default {
|
82
|
114
|
socket.initSocket()
|
83
|
115
|
},
|
84
|
116
|
methods: {
|
|
117
|
+ checkChange(e) {
|
|
118
|
+ this.checkedIds = e.detail.value.map(x => Number(x))
|
|
119
|
+ this.shoppingList = this.list.filter(item => this.checkedIds.includes(item.shopping_id))
|
|
120
|
+ this.sum_money()
|
|
121
|
+ },
|
|
122
|
+ chooseAll() {
|
|
123
|
+ this.checkAll = !this.checkAll
|
|
124
|
+ this.checkedIds = this.checkAll ? this.all : []
|
|
125
|
+ this.shoppingList = this.checkAll ? deepClone(this.list) : []
|
|
126
|
+ this.sum_money()
|
|
127
|
+ },
|
|
128
|
+ sum_money() {
|
|
129
|
+ const arr = this.shoppingList.map(item => item.price)
|
|
130
|
+ this.sum = arr.reduce((x, y) => NP.plus(x, y), 0)
|
|
131
|
+ },
|
85
|
132
|
get_list() {
|
86
|
133
|
_shopList().then(res => {
|
87
|
134
|
this.list = res.data
|
|
135
|
+ this.all = this.list.map(item => item.shopping_id)// 统计全部
|
88
|
136
|
const carts = this.list.map(item => item.class_attend_id)
|
89
|
137
|
this.$store.dispatch('setCarts', carts)// 刷新购物车
|
90
|
138
|
})
|
|
@@ -105,18 +153,22 @@ export default {
|
105
|
153
|
}
|
106
|
154
|
})
|
107
|
155
|
},
|
108
|
|
- pay(item) {
|
|
156
|
+ pay() {
|
|
157
|
+ if (!this.phone) {
|
|
158
|
+ return this.globalNavigateTo('bindPhone')
|
|
159
|
+ }
|
|
160
|
+ if (this.checkedIds.length < 1) {
|
|
161
|
+ uni.showToast({ title: '请先选择课程', icon: 'none', duration: 1000 })
|
|
162
|
+ return false
|
|
163
|
+ }
|
109
|
164
|
uni.showLoading({
|
110
|
165
|
mask: true,
|
111
|
166
|
title: '加载中...'
|
112
|
167
|
})
|
113
|
|
- const order = JSON.stringify([item])
|
|
168
|
+ const order = JSON.stringify(this.shoppingList)
|
114
|
169
|
let carts = deepClone(this.carts)
|
115
|
|
- const index = carts.indexOf(item.class_attend_id)
|
116
|
|
- carts = carts.splice(index, 1)
|
117
|
|
- if (!this.phone) {
|
118
|
|
- return this.globalNavigateTo('bindPhone')
|
119
|
|
- }
|
|
170
|
+ const shoppingCarts = this.shoppingList.map(item => item.class_attend_id)
|
|
171
|
+ carts = carts.filter(item => !shoppingCarts.includes(item))
|
120
|
172
|
_createOrder({ result: order, notShowLoading: true }).then(res => {
|
121
|
173
|
this.$store.dispatch('setCarts', carts)
|
122
|
174
|
setTimeout(() => {
|
|
@@ -168,4 +220,24 @@ export default {
|
168
|
220
|
.card-bottom{
|
169
|
221
|
text-align:right;
|
170
|
222
|
}
|
|
223
|
+.static{
|
|
224
|
+ position: fixed;
|
|
225
|
+ left: 0;
|
|
226
|
+ right: 0;
|
|
227
|
+ bottom: 0;
|
|
228
|
+ display: flex;
|
|
229
|
+ background: #fff;
|
|
230
|
+ height: 70px;
|
|
231
|
+ align-items: center;
|
|
232
|
+ padding: 0 0.8rem;
|
|
233
|
+ justify-content: space-between;
|
|
234
|
+ &-price{
|
|
235
|
+ font-size:14px;
|
|
236
|
+ }
|
|
237
|
+ &-choose{
|
|
238
|
+ color: #666;
|
|
239
|
+ width: calc(100vw - 240px);
|
|
240
|
+ }
|
|
241
|
+}
|
|
242
|
+
|
171
|
243
|
</style>
|