|
|
@@ -42,10 +42,12 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
- <el-button type="primary" size="small">从图库选择</el-button>
|
|
|
+ <el-button type="primary" size="small" @click="imgStoreModal = true"
|
|
|
+ >从图库选择</el-button
|
|
|
+ >
|
|
|
</div>
|
|
|
<el-dialog :visible.sync="dialogVisible">
|
|
|
- <img width="100%" :src="dialogImageUrl" alt="" />
|
|
|
+ <img width="100%" :src="dialogImageUrl" alt />
|
|
|
</el-dialog>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="活动形式">
|
|
|
@@ -54,7 +56,31 @@
|
|
|
</el-form-item>
|
|
|
<el-form-item label="节假日自动涨价">
|
|
|
<el-checkbox-group v-model="ruleForm.type">
|
|
|
- <el-checkbox label="需要" name="type"></el-checkbox>
|
|
|
+ <el-checkbox label="需要" name="type">
|
|
|
+ <span>需要</span>
|
|
|
+ </el-checkbox>
|
|
|
+ <el-popover
|
|
|
+ placement="top"
|
|
|
+ width="100"
|
|
|
+ trigger="hover"
|
|
|
+ v-model="autoPricePopover"
|
|
|
+ >
|
|
|
+ <p>特定节日商品会自动进行涨价 无需手动调价</p>
|
|
|
+ <div style="text-align: right; margin: 0">
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="primary"
|
|
|
+ @click="autoPricePopover = false"
|
|
|
+ >涨价设置</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-question"
|
|
|
+ slot="reference"
|
|
|
+ ></el-button>
|
|
|
+ <!-- <el-button slot="reference">删除</el-button> -->
|
|
|
+ </el-popover>
|
|
|
</el-checkbox-group>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="配送方式">
|
|
|
@@ -66,8 +92,27 @@
|
|
|
<el-radio-group v-model="ruleForm.resource">
|
|
|
<el-radio label="按距离收费">
|
|
|
<span>按距离收费</span>
|
|
|
- <i class="el-icon-question"></i>
|
|
|
</el-radio>
|
|
|
+ <el-popover
|
|
|
+ placement="top"
|
|
|
+ width="100"
|
|
|
+ trigger="hover"
|
|
|
+ v-model="chargePopover"
|
|
|
+ >
|
|
|
+ <p>5公里内免运费，超过5公里每增加1公里运费增加2元</p>
|
|
|
+ <div style="text-align: right; margin: 0">
|
|
|
+ <el-button size="mini" type="primary" @click="chargePopover = false"
|
|
|
+ >修改</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-question"
|
|
|
+ slot="reference"
|
|
|
+ class="question-btn"
|
|
|
+ ></el-button>
|
|
|
+ <!-- <el-button slot="reference">删除</el-button> -->
|
|
|
+ </el-popover>
|
|
|
<el-radio label="免运费"></el-radio>
|
|
|
</el-radio-group>
|
|
|
</el-form-item>
|
|
|
@@ -77,6 +122,57 @@
|
|
|
</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">
|
|
|
+ <div>全部图片</div>
|
|
|
+ <el-select v-model="imgStoreVal" size="small" placeholder="请选择">
|
|
|
+ <el-option
|
|
|
+ v-for="item in imgStoreOpt"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ <div class="img-store-wrap">
|
|
|
+ <el-checkbox-group v-model="imgStoreArr" class="list-store">
|
|
|
+ <div
|
|
|
+ class="list-checkbox"
|
|
|
+ v-for="(item, index) in 10"
|
|
|
+ :label="index"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <el-checkbox>
|
|
|
+ <div class="list-img">
|
|
|
+ <img
|
|
|
+ src="https://pic.qqtn.com/up/2019-11/2019110209212070747.jpg"
|
|
|
+ alt="图库图片"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </el-checkbox>
|
|
|
+ </div>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ <el-pagination
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page.sync="currentPage"
|
|
|
+ :page-size="100"
|
|
|
+ layout="total, prev, pager, next"
|
|
|
+ :total="1000"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button size="small" @click="imgStoreModal = false">取 消</el-button>
|
|
|
+ <el-button type="primary" size="small" @click="imgStoreModal = false"
|
|
|
+ >确 定</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -103,7 +199,18 @@ export default {
|
|
|
},
|
|
|
// 图片
|
|
|
dialogImageUrl: '',
|
|
|
- dialogVisible: false
|
|
|
+ dialogVisible: false,
|
|
|
+ // 需要自动涨价
|
|
|
+ autoPricePopover: false,
|
|
|
+ // 距离收费
|
|
|
+ chargePopover: false,
|
|
|
+ // 从图库中选择
|
|
|
+ imgStoreModal: true,
|
|
|
+ imgStoreVal: '',
|
|
|
+ // 图库弹窗选项
|
|
|
+ imgStoreOpt: [],
|
|
|
+ imgStoreArr: [],
|
|
|
+ currentPage: 1
|
|
|
};
|
|
|
},
|
|
|
methods: {
|
|
|
@@ -131,6 +238,12 @@ export default {
|
|
|
// 编辑器
|
|
|
editor(ref) {
|
|
|
console.log(ref);
|
|
|
+ },
|
|
|
+ handleSizeChange(val) {
|
|
|
+ console.log(`每页 ${val} 条`);
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ console.log(`当前页: ${val}`);
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
@@ -139,10 +252,38 @@ export default {
|
|
|
<style lang="scss" scoped>
|
|
|
.form-wrap {
|
|
|
// width: 60%;
|
|
|
+ .question-btn {
|
|
|
+ position: relative;
|
|
|
+ right: 26px;
|
|
|
+ }
|
|
|
}
|
|
|
.cl-editor-quill {
|
|
|
/deep/ .editor {
|
|
|
height: 300px;
|
|
|
}
|
|
|
}
|
|
|
+.store-modal-content {
|
|
|
+ .select-wrap {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .img-store-wrap {
|
|
|
+ .list-store {
|
|
|
+ @include disFlex(center, flex-start);
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .list-checkbox {
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ /deep/.el-checkbox__input {
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ right: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-img {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
lalala