|
|
@@ -1,44 +1,58 @@
|
|
|
<template>
|
|
|
- <van-popup :show="show" round position="bottom" @close="show = false">
|
|
|
- <div class="box">
|
|
|
- <div class="top">
|
|
|
- <span>选择卡包</span>
|
|
|
- <div class="right">
|
|
|
- <div class="tool-item">
|
|
|
- 可选
|
|
|
- </div>
|
|
|
- <div class="tool-item used">
|
|
|
- 已售
|
|
|
- </div>
|
|
|
+ <div class="case">
|
|
|
+ <van-cell :border="false" class="bottom-show" @click="init" is-link>
|
|
|
+ <div slot="title">
|
|
|
+ <div class="text1" v-if="chooseIds.length > 0">
|
|
|
+ 已选<span>{{ chooseIds.length }}</span
|
|
|
+ >包，共<span>{{ money }}</span
|
|
|
+ >元，邮费0元
|
|
|
</div>
|
|
|
+ <div v-else>请选择卡包</div>
|
|
|
</div>
|
|
|
+ </van-cell>
|
|
|
+ <van-popup :show="show" round position="bottom" @close="show = false">
|
|
|
+ <div class="box">
|
|
|
+ <div class="top">
|
|
|
+ <span>选择卡包</span>
|
|
|
+ <div class="right">
|
|
|
+ <div class="tool-item">
|
|
|
+ 可选
|
|
|
+ </div>
|
|
|
+ <div class="tool-item used">
|
|
|
+ 已售
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="content">
|
|
|
- <div class="card" v-for="(card, index) in cardList" :key="index">
|
|
|
- <div class="card-title">卡包{{ index }}</div>
|
|
|
- <div class="card-list">
|
|
|
- <div
|
|
|
- v-for="item in card"
|
|
|
- :key="item.id"
|
|
|
- class="card-item"
|
|
|
- :class="{
|
|
|
- used: item.caseStatus !== 'WAIT' || item.userId,
|
|
|
- active: chooseIds.includes(item.id)
|
|
|
- }"
|
|
|
- @click="choose(item.id)"
|
|
|
- >
|
|
|
- {{ item.boxCode }}
|
|
|
+ <div class="content">
|
|
|
+ <div class="card" v-for="(card, index) in cardList" :key="index">
|
|
|
+ <div class="card-title">卡包{{ getNumStr(index + 1) }}</div>
|
|
|
+ <div class="card-list">
|
|
|
+ <div
|
|
|
+ v-for="(item, itemIndex) in card"
|
|
|
+ :key="item.id"
|
|
|
+ class="card-item"
|
|
|
+ :class="{
|
|
|
+ used: item.caseStatus !== 'WAIT' || item.userId,
|
|
|
+ active: nowChoose.includes(item.id)
|
|
|
+ }"
|
|
|
+ @click="choose(item.id, item.caseStatus !== 'WAIT' || item.userId)"
|
|
|
+ >
|
|
|
+ {{ getChart(itemIndex) }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
|
|
|
- <div class="van-btn">
|
|
|
- <span class="van-cat">已选{{ chooseIds.length }}包，共{{ money }}元，邮费10元</span>
|
|
|
- <div class="van-buy" type="primary" @click="confirm">确认购买</div>
|
|
|
+ <div class="bottom">
|
|
|
+ <span class="text">已选{{ nowChoose.length }}包，共{{ money }}元，邮费0元</span>
|
|
|
+ <van-button size="medium" @click="submit" class="submit" :radius="0" type="primary"
|
|
|
+ >确认购买</van-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </van-popup>
|
|
|
+ </van-popup>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
@@ -62,12 +76,6 @@ export default {
|
|
|
default: () => {
|
|
|
return [];
|
|
|
}
|
|
|
- },
|
|
|
- name: {
|
|
|
- type: Array,
|
|
|
- default: () => {
|
|
|
- return [];
|
|
|
- }
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
@@ -81,8 +89,9 @@ export default {
|
|
|
return [...this.cardList].flat();
|
|
|
},
|
|
|
money() {
|
|
|
+ let choose = this.show ? this.nowChoose : this.chooseIds;
|
|
|
let list = [...this.allCards].filter(item => {
|
|
|
- return [...this.chooseIds].includes(item.id);
|
|
|
+ return [...choose].includes(item.id);
|
|
|
});
|
|
|
|
|
|
return list.reduce((prev, cur) => {
|
|
|
@@ -93,19 +102,20 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
show: false,
|
|
|
- list: []
|
|
|
+ nowChoose: []
|
|
|
};
|
|
|
},
|
|
|
- mounted() {
|
|
|
- setTimeout(() => {
|
|
|
- console.log(this.detailsList);
|
|
|
- console.log(this.cardList);
|
|
|
- }, 2000);
|
|
|
- },
|
|
|
methods: {
|
|
|
- choose(id) {
|
|
|
+ init() {
|
|
|
+ this.nowChoose = [...this.chooseIds];
|
|
|
+ this.show = true;
|
|
|
+ },
|
|
|
+ choose(id, used = false) {
|
|
|
+ if (used) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
console.log(id);
|
|
|
- let list = [...this.chooseIds];
|
|
|
+ let list = [...this.nowChoose];
|
|
|
if (list.includes(id)) {
|
|
|
list.splice(list.indexOf(id), 1);
|
|
|
} else if (list.length < 6) {
|
|
|
@@ -113,56 +123,48 @@ export default {
|
|
|
} else {
|
|
|
this.toast('最多选择六张');
|
|
|
}
|
|
|
-
|
|
|
- console.log(list);
|
|
|
- this.$emit('update:chooseIds', list);
|
|
|
+ this.nowChoose = list;
|
|
|
},
|
|
|
- confirm() {
|
|
|
- this.$emit('update:name', `已选${this.chooseIds.length}包，共${this.money}元，邮费10元`);
|
|
|
+ submit() {
|
|
|
+ this.$emit('update:chooseIds', this.nowChoose);
|
|
|
this.show = false;
|
|
|
+ },
|
|
|
+ getChart(index) {
|
|
|
+ const list = ['A', 'B', 'C', 'D', 'E', 'F'];
|
|
|
+ return list[index];
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
+/deep/ .van-cell {
|
|
|
+ --cell-horizontal-padding: 0px;
|
|
|
+ --cell-vertical-padding: 22px;
|
|
|
+
|
|
|
+ .van-cell__title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 28px;
|
|
|
+
|
|
|
+ span {
|
|
|
+ color: @prim;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
.box {
|
|
|
max-height: 70vh;
|
|
|
min-height: 50vh;
|
|
|
|
|
|
padding: 0 20px 0;
|
|
|
.flex-col();
|
|
|
- .van-btn {
|
|
|
- display: flex;
|
|
|
- .van-cat {
|
|
|
- width: 237px;
|
|
|
- height: 48px;
|
|
|
- background: #ff6c00;
|
|
|
- opacity: 0.7;
|
|
|
- border-radius: 12px 0px 0px 12px;
|
|
|
- font-size: 13px;
|
|
|
- font-weight: 500;
|
|
|
- color: #ffffff;
|
|
|
- text-align: center;
|
|
|
- line-height: 48px;
|
|
|
- }
|
|
|
- .van-buy {
|
|
|
- width: 98px;
|
|
|
- height: 48px;
|
|
|
- background: #ff6c00;
|
|
|
- border-radius: 0px 12px 12px 0px;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 400;
|
|
|
- color: #ffffff;
|
|
|
- text-align: center;
|
|
|
- line-height: 48px;
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
.content {
|
|
|
flex-grow: 1;
|
|
|
overflow: auto;
|
|
|
+ padding: 0 0 12px;
|
|
|
}
|
|
|
|
|
|
.top {
|
|
|
@@ -206,24 +208,22 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+.card + .card {
|
|
|
+ margin-top: 12px;
|
|
|
+}
|
|
|
|
|
|
+.card-title {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #939599;
|
|
|
+ line-height: 24px;
|
|
|
+}
|
|
|
+.card-list {
|
|
|
+ margin: 5px;
|
|
|
+}
|
|
|
.card {
|
|
|
- width: 335px;
|
|
|
- height: 100px;
|
|
|
- background: #f5f7fa;
|
|
|
+ background-color: @bg;
|
|
|
+ padding: 12px 16px;
|
|
|
border-radius: 8px;
|
|
|
- margin: 10px 0;
|
|
|
- .card-title {
|
|
|
- height: 24px;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: 400;
|
|
|
- color: #939599;
|
|
|
- line-height: 24px;
|
|
|
- padding: 12px 0 6px 16px;
|
|
|
- }
|
|
|
- .card-list {
|
|
|
- margin-left: 16px;
|
|
|
- }
|
|
|
.card-list {
|
|
|
.flex();
|
|
|
|
|
|
@@ -258,4 +258,31 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+.bottom {
|
|
|
+ padding: 6px 0;
|
|
|
+ border-radius: 12px;
|
|
|
+ overflow: hidden;
|
|
|
+ .flex();
|
|
|
+ .text {
|
|
|
+ padding: 0 16px;
|
|
|
+ flex-grow: 1;
|
|
|
+ font-size: 13px;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 48px;
|
|
|
+ height: 48px;
|
|
|
+ background-color: lighten(@prim, 10);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+/deep/ .submit {
|
|
|
+ .van-button {
|
|
|
+ height: 48px;
|
|
|
+ border-radius: 0px;
|
|
|
+ min-width: 98px;
|
|
|
+ max-width: 98px;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
panhui