|
|
@@ -6,35 +6,234 @@
|
|
|
</config>
|
|
|
<template>
|
|
|
<div class="container">
|
|
|
- <div class="top">
|
|
|
- <div class="txe1">福袋总数量</div>
|
|
|
- <div class="txe2">当前0个福袋</div>
|
|
|
+ <div v-if="Flag">
|
|
|
+ <div class="top">
|
|
|
+ <div class="txt1">福袋总数量</div>
|
|
|
+ <div class="txt2">当前{{ cardList.length }}个福袋</div>
|
|
|
+ </div>
|
|
|
+ <div class="border"></div>
|
|
|
+ <div v-if="cardList.length > 0">
|
|
|
+ <div v-for="(item, index) in cardList" :key="index">
|
|
|
+ <div class="con">
|
|
|
+ <div class="con-l">
|
|
|
+ <img src="../native/svgs/icon_fenxiang.svg" alt="" />
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ </div>
|
|
|
+ <p>x{{ item.num }}</p>
|
|
|
+ </div>
|
|
|
+ <div class="bor"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="add" @click="Flag = false">
|
|
|
+ <img src="../native/tabbar/icon_shangchuan@3x.png" alt="" />
|
|
|
+ <p>点击添加</p>
|
|
|
+ </div>
|
|
|
+ <div class="bottom">
|
|
|
+ <van-button type="primary" block @click="add">完成</van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-else>
|
|
|
+ <van-cell-group :border="false" class="form">
|
|
|
+ <van-field
|
|
|
+ label="福袋名称"
|
|
|
+ type="digit"
|
|
|
+ :value="form.name"
|
|
|
+ @input="form.name = $event.detail"
|
|
|
+ placeholder="请输入福袋名称"
|
|
|
+ >
|
|
|
+ </van-field>
|
|
|
+ <van-field
|
|
|
+ label="数量(个)"
|
|
|
+ type="number"
|
|
|
+ :value="form.boxesCount"
|
|
|
+ @input="form.boxesCount = $event.detail"
|
|
|
+ placeholder="请输入数量"
|
|
|
+ >
|
|
|
+ </van-field>
|
|
|
+ </van-cell-group>
|
|
|
+ <div class="tit">福袋细节图</div>
|
|
|
+ <van-uploader :file-list="images" :after-read="afterRead" @delete="deleteImg" />
|
|
|
+ <div class="bottom">
|
|
|
+ <van-button type="primary" block @click="Flag = true">完成</van-button>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="border"></div>
|
|
|
- <div @click="add">点击添加</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
- addressList: []
|
|
|
+ cardList: [
|
|
|
+ {
|
|
|
+ name: '宝可梦',
|
|
|
+ num: 2,
|
|
|
+ id: 1
|
|
|
+ }
|
|
|
+ // {
|
|
|
+ // name: '皮卡丘',
|
|
|
+ // num: 3,
|
|
|
+ // id: 2
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // name: '小火龙',
|
|
|
+ // num: 1,
|
|
|
+ // id: 3
|
|
|
+ // }
|
|
|
+ ],
|
|
|
+ Flag: true,
|
|
|
+ form: { name: '', boxesCount: '' },
|
|
|
+ images: [],
|
|
|
+ imagesList: [],
|
|
|
+ imageUrls: []
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
- add() {}
|
|
|
+ add() {
|
|
|
+ this.navigateTo('/pages/store/productEdit?num=' + this.cardList.length);
|
|
|
+ },
|
|
|
+ afterRead(file) {
|
|
|
+ this.showLoading();
|
|
|
+ this.$http
|
|
|
+ .uploadFile(file.path)
|
|
|
+ .then(res => {
|
|
|
+ this.hideLoading();
|
|
|
+ this.imagesList.push({ ...file, url: res });
|
|
|
+ this.images = [...this.imagesList];
|
|
|
+ this.imageUrls.push(res);
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ this.hideLoading();
|
|
|
+ wx.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: e.error
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ deleteImg(e) {
|
|
|
+ let list = [...this.images];
|
|
|
+ list.splice(e.detail.index, 1);
|
|
|
+ this.images = list;
|
|
|
+ this.imageUrls = list.map(item => {
|
|
|
+ return item.url;
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
.container {
|
|
|
- padding: 0 20px;
|
|
|
+ /deep/ .van-uploader {
|
|
|
+ padding-left: 20px;
|
|
|
+ }
|
|
|
+ /deep/.form {
|
|
|
+ position: relative;
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
.top {
|
|
|
.flex();
|
|
|
justify-content: space-between;
|
|
|
+ padding: 0 20px;
|
|
|
+ margin-top: 23px;
|
|
|
+ .txt1 {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .txt2 {
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #aaabad;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
}
|
|
|
.border {
|
|
|
- border: 1px solid #ccc;
|
|
|
+ width: 375px;
|
|
|
+ height: 5px;
|
|
|
+ background: #f5f7fa;
|
|
|
+ margin: 23px 0 20px 0;
|
|
|
+ }
|
|
|
+ .con {
|
|
|
+ .flex();
|
|
|
+ padding: 0 20px;
|
|
|
+ justify-content: space-between;
|
|
|
+ img {
|
|
|
+ width: 62px;
|
|
|
+ height: 90px;
|
|
|
+ border-radius: 6px;
|
|
|
+ padding-right: 10px;
|
|
|
+ }
|
|
|
+ .con-l {
|
|
|
+ .flex();
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .bor {
|
|
|
+ height: 1px;
|
|
|
+ background: #f5f7fa;
|
|
|
+ margin: 20px 20px 0 20px;
|
|
|
+ }
|
|
|
+ .add {
|
|
|
+ text-align: center;
|
|
|
+ img {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ margin-top: 30px;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #ff6c00;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tit {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 24px;
|
|
|
+ margin: 23px 0 18px 20px;
|
|
|
+ }
|
|
|
+ .bottom {
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ padding: 6px 43px;
|
|
|
+ background-color: #fff;
|
|
|
+ .bottom(6px);
|
|
|
}
|
|
|
}
|
|
|
</style>
|
xuqiang
