|
|
@@ -5,7 +5,7 @@
|
|
|
}
|
|
|
</config>
|
|
|
<template>
|
|
|
- <div class="apply">
|
|
|
+ <div class="addorder">
|
|
|
<van-cell-group :border="false">
|
|
|
<van-field
|
|
|
label="卡牌名称"
|
|
|
@@ -39,11 +39,54 @@
|
|
|
</van-field>
|
|
|
</van-cell-group>
|
|
|
|
|
|
- <van-field label="卡牌细节图" :border="false"> </van-field>
|
|
|
- <div class="btn-list">
|
|
|
- <van-button :color="$colors.prim" :disabled="!canSubmit" block @click="submit">确认上架</van-button>
|
|
|
+ <!-- <van-field label="卡牌细节图" :border="false"> </van-field> -->
|
|
|
+ <div class="box-con">
|
|
|
+ <div class="label">卡牌细节图</div>
|
|
|
+ <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 + 1 }}组</div>
|
|
|
+ <div class="card-list">
|
|
|
+ <div
|
|
|
+ v-for="(item, itemIndex) in card"
|
|
|
+ :key="item.id"
|
|
|
+ class="card-item"
|
|
|
+ :class="{
|
|
|
+ used: !canChoose(item),
|
|
|
+ active: nowChoose.includes(item.id)
|
|
|
+ }"
|
|
|
+ @click="choose(item.id, !canChoose(item))"
|
|
|
+ >
|
|
|
+ {{ itemIndex + 1 }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
|
|
|
+ <div class="btn-list">
|
|
|
+ <van-button :color="$colors.prim" :disabled="!canSubmit" block @click="submit2">确认上架</van-button>
|
|
|
+ </div>
|
|
|
+ <!-- <card-case
|
|
|
+ ref="cardCase"
|
|
|
+ :chooseIds.sync="chooseIds"
|
|
|
+ :detailsList="detailsList"
|
|
|
+ :cardCaseInfo="cardCaseInfo"
|
|
|
+ @buy="purchase"
|
|
|
+ ></card-case> -->
|
|
|
<van-action-sheet
|
|
|
:show="show"
|
|
|
description="卡牌名称"
|
|
|
@@ -60,6 +103,7 @@
|
|
|
<script>
|
|
|
export default {
|
|
|
name: 'apply',
|
|
|
+
|
|
|
data() {
|
|
|
return {
|
|
|
name: '',
|
|
|
@@ -67,6 +111,9 @@ export default {
|
|
|
price: '',
|
|
|
sale: '',
|
|
|
show: false,
|
|
|
+ cardCaseInfo: {},
|
|
|
+ chooseIds: [],
|
|
|
+ nowChoose: [],
|
|
|
actions: [
|
|
|
{
|
|
|
name: '决斗者筑包-古代守护着'
|
|
|
@@ -83,21 +130,95 @@ export default {
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
- canSubmit() {
|
|
|
- if (this.name && this.price) {
|
|
|
- return true;
|
|
|
- } else {
|
|
|
- return false;
|
|
|
- }
|
|
|
+ cardList() {
|
|
|
+ let boxMap = { ...this.detailsList };
|
|
|
+ return Object.keys(boxMap).map(item => {
|
|
|
+ return boxMap[item];
|
|
|
+ });
|
|
|
+ },
|
|
|
+ allCards() {
|
|
|
+ return [...this.cardList].flat();
|
|
|
}
|
|
|
},
|
|
|
+ // computed: {
|
|
|
+ // canSubmit() {
|
|
|
+ // if (this.name && this.price) {
|
|
|
+ // return true;
|
|
|
+ // } else {
|
|
|
+ // return false;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // },
|
|
|
created() {},
|
|
|
methods: {
|
|
|
+ canChoose(info) {
|
|
|
+ let status = ['WAIT', 'PROGRESS'];
|
|
|
+ return status.includes(info.caseStatus) && !info.userId;
|
|
|
+ },
|
|
|
+ init(type) {
|
|
|
+ this.nowChoose = [...this.chooseIds];
|
|
|
+ this.show = true;
|
|
|
+ this.buy = type === 'buy';
|
|
|
+ },
|
|
|
+ choose(id, used = false) {
|
|
|
+ if (used) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let list = [...this.nowChoose];
|
|
|
+ if (list.includes(id)) {
|
|
|
+ list.splice(list.indexOf(id), 1);
|
|
|
+ } else {
|
|
|
+ list.push(id);
|
|
|
+ }
|
|
|
+ this.nowChoose = list;
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ if (this.nowChoose.length === 0) {
|
|
|
+ this.toast('请选择卡牌');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let caseId = this.cardCaseInfo.cardCaseId;
|
|
|
+ let boxIds = this.nowChoose.join(',');
|
|
|
+ this.$http
|
|
|
+ .get('/orderInfo/checkBox', {
|
|
|
+ caseId,
|
|
|
+ boxIds
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ let checkResult = false;
|
|
|
+ checkResult = res;
|
|
|
+ if (!checkResult) {
|
|
|
+ wx.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '该卡箱需要两个卡包组选择数量一样',
|
|
|
+ duration: 4000
|
|
|
+ });
|
|
|
+ return Promise.reject('提示');
|
|
|
+ } else {
|
|
|
+ return Promise.resolve();
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ this.$emit('update:chooseIds', this.nowChoose);
|
|
|
+ this.show = false;
|
|
|
+ if (this.buy) {
|
|
|
+ this.$emit('buy');
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ if (e.error) {
|
|
|
+ wx.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: e.error
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
select(action) {
|
|
|
this.name = action.detail.name;
|
|
|
this.show = false;
|
|
|
},
|
|
|
- submit() {
|
|
|
+ submit2() {
|
|
|
if (!this.name) {
|
|
|
wx.showToast({
|
|
|
icon: 'none',
|
|
|
@@ -126,27 +247,6 @@ export default {
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
-.box {
|
|
|
- margin: 30px 53px;
|
|
|
- .box-size {
|
|
|
- width: 154px;
|
|
|
- font-size: 14px;
|
|
|
- font-weight: bold;
|
|
|
- color: #000000;
|
|
|
- line-height: 20px;
|
|
|
- margin: 20px 0 15px 0;
|
|
|
- }
|
|
|
- .box-butm {
|
|
|
- .flex();
|
|
|
- p {
|
|
|
- font-size: 13px;
|
|
|
- }
|
|
|
- span {
|
|
|
- font-size: 13px;
|
|
|
- color: red;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
/deep/ .van-cell {
|
|
|
--cell-vertical-padding: 23px;
|
|
|
--cell-horizontal-padding: 20px;
|
|
|
@@ -169,6 +269,124 @@ export default {
|
|
|
left: 100px !important;
|
|
|
}
|
|
|
}
|
|
|
+.addorder {
|
|
|
+ .box-con {
|
|
|
+ // margin: 23px 0 0 20px;
|
|
|
+ .label {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 24px;
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ .box {
|
|
|
+ max-height: 70vh;
|
|
|
+ min-height: 50vh;
|
|
|
+ padding: 0 20px 0;
|
|
|
+ .flex-col();
|
|
|
+ padding-bottom: 6px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ flex-grow: 1;
|
|
|
+ overflow: auto;
|
|
|
+ padding: 0 0 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .top {
|
|
|
+ .flex();
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 20px 0;
|
|
|
+ flex-shrink: 0;
|
|
|
+
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right {
|
|
|
+ .flex();
|
|
|
+ .tool-item {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 24px;
|
|
|
+ .flex();
|
|
|
+ margin-left: 30px;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: '';
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 4px;
|
|
|
+ border: 1px solid #f5f7fa;
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.used {
|
|
|
+ &::before {
|
|
|
+ background-color: #939599;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .card + .card {
|
|
|
+ margin-top: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-title {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #939599;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .card {
|
|
|
+ background-color: @bg;
|
|
|
+ padding: 12px 16px;
|
|
|
+ border-radius: 8px;
|
|
|
+ .card-list {
|
|
|
+ .flex();
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .card-item {
|
|
|
+ width: 42px;
|
|
|
+ height: 42px;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 8px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: center;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 42px;
|
|
|
+ margin-top: 10px;
|
|
|
+ &.used {
|
|
|
+ background-color: #939599;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ &.active {
|
|
|
+ background-color: @prim;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ opacity: 0.8;
|
|
|
+ }
|
|
|
+
|
|
|
+ &:nth-child(6n + 1) {
|
|
|
+ margin-left: 0 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .card-item + .card-item {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
.van-cell {
|
|
|
line-height: 40px;
|
|
|
}
|
xuqiang