|
|
@@ -28,14 +28,7 @@
|
|
|
</el-form-item>
|
|
|
<el-form-item label="图片">
|
|
|
<div class="list-wrap">
|
|
|
- <el-upload
|
|
|
- action="https://jsonplaceholder.typicode.com/posts/"
|
|
|
- list-type="picture-card"
|
|
|
- :on-preview="handlePictureCardPreview"
|
|
|
- :on-remove="handleRemove"
|
|
|
- >
|
|
|
- <i class="el-icon-plus"></i>
|
|
|
- </el-upload>
|
|
|
+ <cl-upload v-model="ruleForm.goodsImg"></cl-upload>
|
|
|
<div>
|
|
|
<el-button type="primary" size="small">商品主图</el-button>
|
|
|
<el-button type="warning" size="small">删除</el-button>
|
|
|
@@ -122,7 +115,7 @@
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
- <!-- 弹窗 -->
|
|
|
+ <!-- 从图库选择 -->
|
|
|
<el-dialog title="从图库选择" :visible.sync="imgStoreModal" width="60%">
|
|
|
<div class="store-modal-content">
|
|
|
<div class="select-wrap flex-center-between">
|
|
|
@@ -173,6 +166,39 @@
|
|
|
>
|
|
|
</div>
|
|
|
</el-dialog>
|
|
|
+ <!-- 选择款式 -->
|
|
|
+ <el-dialog title="选择款式" :visible.sync="styleStoreModal" width="800px">
|
|
|
+ <div class="style-modal-content">
|
|
|
+ <el-form :inline="true" :model="styleForm" class="demo-form-inline">
|
|
|
+ <div class="flex-center-between" v-for="(item, index) in 4" :key="index">
|
|
|
+ <el-form-item label="款式名称">
|
|
|
+ <el-input
|
|
|
+ v-model="styleForm.styleName"
|
|
|
+ placeholder="款式名称"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="价格">
|
|
|
+ <el-input v-model="styleForm.price" placeholder="价格"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="图片" class="flex-center">
|
|
|
+ <cl-upload v-model="styleForm.goodsImg"></cl-upload>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button type="primary" size="small" @click="styleSubmit"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ <el-button type="primary" size="small" @click="styleFormAddFn">新增</el-button>
|
|
|
+ </div>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button size="small" @click="styleStoreModal = false">取 消</el-button>
|
|
|
+ <el-button type="primary" size="small" @click="styleStoreModal = false"
|
|
|
+ >确 定</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -189,7 +215,8 @@ export default {
|
|
|
delivery: false,
|
|
|
type: [],
|
|
|
resource: '',
|
|
|
- desc: ''
|
|
|
+ desc: '',
|
|
|
+ goodsImg: ''
|
|
|
},
|
|
|
rules: {
|
|
|
name: [
|
|
|
@@ -205,12 +232,18 @@ export default {
|
|
|
// 距离收费
|
|
|
chargePopover: false,
|
|
|
// 从图库中选择
|
|
|
- imgStoreModal: true,
|
|
|
+ imgStoreModal: false,
|
|
|
imgStoreVal: '',
|
|
|
- // 图库弹窗选项
|
|
|
imgStoreOpt: [],
|
|
|
imgStoreArr: [],
|
|
|
- currentPage: 1
|
|
|
+ currentPage: 1,
|
|
|
+ // 款式选择
|
|
|
+ styleStoreModal: true,
|
|
|
+ styleForm: {
|
|
|
+ styleName: '',
|
|
|
+ price: '',
|
|
|
+ img: ''
|
|
|
+ }
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -244,7 +277,9 @@ export default {
|
|
|
},
|
|
|
handleCurrentChange(val) {
|
|
|
console.log(`当前页: ${val}`);
|
|
|
- }
|
|
|
+ },
|
|
|
+ // 款式选择弹窗
|
|
|
+ styleSubmit() {}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
@@ -262,6 +297,7 @@ export default {
|
|
|
height: 300px;
|
|
|
}
|
|
|
}
|
|
|
+// 图库选择
|
|
|
.store-modal-content {
|
|
|
.select-wrap {
|
|
|
margin-bottom: 20px;
|
|
|
@@ -286,4 +322,11 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+// 风格选择
|
|
|
+.style-modal-content {
|
|
|
+ /deep/.upload-wrap {
|
|
|
+ width: 60px !important;
|
|
|
+ height: 60px !important;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
lalala