|
|
@@ -0,0 +1,485 @@
|
|
|
+<config>
|
|
|
+{
|
|
|
+ "navigationBarTitleText": "管理商品",
|
|
|
+ "navigationBarBackgroundColor": "#ffffff",
|
|
|
+}
|
|
|
+</config>
|
|
|
+<template>
|
|
|
+ <div class="addorder">
|
|
|
+ <van-cell-group :border="false">
|
|
|
+ <van-field
|
|
|
+ label="卡牌名称"
|
|
|
+ :value="form.name"
|
|
|
+ placeholder="请输入卡牌名称"
|
|
|
+ is-link
|
|
|
+ readonly
|
|
|
+ @click="show = true"
|
|
|
+ >
|
|
|
+ </van-field>
|
|
|
+ <van-field
|
|
|
+ label="卡牌售价"
|
|
|
+ :value="form.price"
|
|
|
+ @input="form.price = $event.detail"
|
|
|
+ placeholder="请输入金额"
|
|
|
+ >
|
|
|
+ </van-field>
|
|
|
+ <van-field
|
|
|
+ label="拼箱结束"
|
|
|
+ is-link
|
|
|
+ :value="form.dates"
|
|
|
+ placeholder="请输入结束日期"
|
|
|
+ @click="newShow = true"
|
|
|
+ >
|
|
|
+ </van-field>
|
|
|
+ <van-field
|
|
|
+ label="拼箱人数"
|
|
|
+ :value="form.num"
|
|
|
+ @input="form.num = $event.detail"
|
|
|
+ placeholder="请输入参加人数"
|
|
|
+ >
|
|
|
+ </van-field>
|
|
|
+ <van-field
|
|
|
+ label="邮费"
|
|
|
+ :value="form.postage"
|
|
|
+ @input="form.postage = $event.detail"
|
|
|
+ placeholder="默认邮费10元"
|
|
|
+ >
|
|
|
+ </van-field>
|
|
|
+ </van-cell-group>
|
|
|
+ <div class="box-con">
|
|
|
+ <div class="label">卡牌细节图</div>
|
|
|
+ <van-uploader :file-list="fileList" :after-read="afterRead" />
|
|
|
+ <div></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 }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="label">卡牌详情描述</div>
|
|
|
+ <van-field
|
|
|
+ :value="form.message"
|
|
|
+ @input="message = $event.detail"
|
|
|
+ :border="false"
|
|
|
+ rows="1"
|
|
|
+ autosize
|
|
|
+ type="textarea"
|
|
|
+ placeholder="卡牌详情描述"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="btn-list">
|
|
|
+ <div @click="submit">确认上架</div>
|
|
|
+ </div>
|
|
|
+ <van-action-sheet
|
|
|
+ :show="show"
|
|
|
+ description="卡牌名称"
|
|
|
+ cancel-text="取消"
|
|
|
+ :actions="actions"
|
|
|
+ @click-overlay="cancel"
|
|
|
+ @select="select"
|
|
|
+ @cancel="cancel"
|
|
|
+ >
|
|
|
+ </van-action-sheet>
|
|
|
+
|
|
|
+ <van-popup :show="newShow" position="bottom" @close="onClose">
|
|
|
+ <van-datetime-picker
|
|
|
+ type="datetime"
|
|
|
+ :value="currentDate"
|
|
|
+ @confirm="onConfirm"
|
|
|
+ @cancel="onCancel"
|
|
|
+ :min-date="minDate"
|
|
|
+ :max-date="maxDate"
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ <slot></slot>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'addorder',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ form: {
|
|
|
+ name: '',
|
|
|
+ num: '',
|
|
|
+ postage: 10,
|
|
|
+ price: '',
|
|
|
+ dates: '',
|
|
|
+ message: ''
|
|
|
+ },
|
|
|
+ show: false,
|
|
|
+ newShow: false,
|
|
|
+ cardCaseInfo: {},
|
|
|
+ chooseIds: [],
|
|
|
+ nowChoose: [],
|
|
|
+ closeFlag: false,
|
|
|
+ detailsList: [],
|
|
|
+ cardList: [{ A: 'A' }, { B: 'B' }, { C: 'C' }],
|
|
|
+ actions: [],
|
|
|
+ minDate: new Date(new Date().getFullYear() - 1, 10, 1).getTime(),
|
|
|
+ maxDate: new Date(new Date().getFullYear() + 2, 10, 1).getTime(),
|
|
|
+ currentDate: new Date().getTime()
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ watch: {
|
|
|
+ show: {
|
|
|
+ handler: function(newVal) {
|
|
|
+ if (newVal) {
|
|
|
+ this.cardInit();
|
|
|
+ this.closeFlag = false;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad() {
|
|
|
+ this.cartBox();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ cardInit() {
|
|
|
+ this.showLoading();
|
|
|
+ this.$http
|
|
|
+ .post(
|
|
|
+ '/series/all',
|
|
|
+ { query: { del: false }, page: 0, size: 1000 },
|
|
|
+ {
|
|
|
+ header: {
|
|
|
+ 'Content-Type': 'application/json'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ )
|
|
|
+ .then(res => {
|
|
|
+ this.hideLoading();
|
|
|
+ this.actions = res.content;
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ this.hideLoading();
|
|
|
+ wx.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: e.error
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ timeFormat(date, fmt) {
|
|
|
+ var o = {
|
|
|
+ 'M+': date.getMonth() + 1, //月份
|
|
|
+ 'd+': date.getDate(), //日
|
|
|
+ 'h+': date.getHours(), //小时
|
|
|
+ 'm+': date.getMinutes(), //分
|
|
|
+ 's+': date.getSeconds() //秒
|
|
|
+ };
|
|
|
+ if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length));
|
|
|
+ for (var k in o)
|
|
|
+ if (new RegExp('(' + k + ')').test(fmt))
|
|
|
+ fmt = fmt.replace(
|
|
|
+ RegExp.$1,
|
|
|
+ RegExp.$1.length == 1 ? o[k] : ('00' + o[k]).substr(('' + o[k]).length)
|
|
|
+ );
|
|
|
+ return fmt;
|
|
|
+ },
|
|
|
+ // 时间确认按钮
|
|
|
+ onConfirm(event) {
|
|
|
+ this.currentDate = event.detail;
|
|
|
+ var timeValue = this.timeFormat(new Date(event.detail), 'yyyy-MM-dd hh:mm');
|
|
|
+ this.form.dates = timeValue;
|
|
|
+ this.newShow = false;
|
|
|
+ },
|
|
|
+ // 时间取消按钮
|
|
|
+ onCancel() {
|
|
|
+ this.newShow = false;
|
|
|
+ },
|
|
|
+ // 遮罩层显示与隐藏
|
|
|
+ onClose() {
|
|
|
+ this.newShow = false;
|
|
|
+ },
|
|
|
+ // 卡牌名称取消按钮
|
|
|
+ cancel() {
|
|
|
+ this.show = false;
|
|
|
+ },
|
|
|
+ canChoose(info) {
|
|
|
+ let status = ['WAIT', 'PROGRESS'];
|
|
|
+ return status.includes(info.caseStatus) && !this.sold;
|
|
|
+ },
|
|
|
+ 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;
|
|
|
+ },
|
|
|
+ select(e) {
|
|
|
+ if (this.closeFlag) {
|
|
|
+ this.form.name = e.detail.name;
|
|
|
+ this.show = false;
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let data = {
|
|
|
+ seriesId: e.detail.id
|
|
|
+ };
|
|
|
+ this.showLoading();
|
|
|
+ this.$http
|
|
|
+ .post(
|
|
|
+ 'collection/all',
|
|
|
+ { query: data, page: 0, size: 1000 },
|
|
|
+ {
|
|
|
+ header: {
|
|
|
+ 'Content-Type': 'application/json'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ )
|
|
|
+ .then(res => {
|
|
|
+ this.hideLoading();
|
|
|
+ this.actions = res.content;
|
|
|
+ this.closeFlag = true;
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ this.hideLoading();
|
|
|
+ wx.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: e.error
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ cartBox() {
|
|
|
+ // this.$http.post('/cardCase/genNew').then(res => {
|
|
|
+ // console.log(res);
|
|
|
+ // });
|
|
|
+ this.$http.get('cardCase/getCardCase', { id: 2767 }).then(res => {
|
|
|
+ console.log(res);
|
|
|
+ this.form = {
|
|
|
+ price: res.boxPrice,
|
|
|
+ dates: res.startTime,
|
|
|
+ message: res.description,
|
|
|
+ num: res.boxesCount
|
|
|
+ };
|
|
|
+ });
|
|
|
+ },
|
|
|
+ submit() {
|
|
|
+ if (!this.form.name) {
|
|
|
+ wx.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '卡牌名称不能为空'
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.form.price) {
|
|
|
+ wx.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '价格不能为空'
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.form.dates) {
|
|
|
+ wx.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '结束时间不能为空'
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ wx.showToast({
|
|
|
+ title: '提交成功'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+/deep/ .van-uploader {
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+/deep/ .van-cell {
|
|
|
+ --cell-vertical-padding: 23px;
|
|
|
+ --cell-horizontal-padding: 20px;
|
|
|
+ --field-label-color: #000000;
|
|
|
+ --cell-text-color: #000;
|
|
|
+ .van-field__label,
|
|
|
+ .van-cell__title {
|
|
|
+ font-weight: bold;
|
|
|
+ width: 70px;
|
|
|
+ max-width: 70px !important;
|
|
|
+ min-width: 70px !important;
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-right: 10px !important;
|
|
|
+ }
|
|
|
+ .van-cell__value {
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ left: 100px !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+.addorder {
|
|
|
+ padding-bottom: 90px;
|
|
|
+ .box-con {
|
|
|
+ margin: 23px 0 0 20px;
|
|
|
+ .label {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ margin-left: -3px;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .box {
|
|
|
+ max-height: 70vh;
|
|
|
+ min-height: 50vh;
|
|
|
+ padding-right: 20px;
|
|
|
+ .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;
|
|
|
+}
|
|
|
+.btn-list {
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ bottom: 0;
|
|
|
+ background: #ffffff;
|
|
|
+ padding-left: 43px;
|
|
|
+ .bottom();
|
|
|
+ div {
|
|
|
+ width: 290px;
|
|
|
+ height: 48px;
|
|
|
+ background: #ff6c00;
|
|
|
+ border-radius: 12px;
|
|
|
+ line-height: 48px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
xuqiang