初始化项目
This commit is contained in:
@@ -0,0 +1,264 @@
|
||||
<template>
|
||||
<div>
|
||||
<a-form-item
|
||||
label="优惠券"
|
||||
:labelCol="labelCol"
|
||||
:wrapperCol="wrapperCol"
|
||||
>
|
||||
<!-- 添加按钮 -->
|
||||
<div class="sku-batch">
|
||||
<a-button @click="handleAddCoupon">添加优惠券</a-button>
|
||||
</div>
|
||||
|
||||
<!-- 优惠券列表 -->
|
||||
<a-table
|
||||
class="sku-list"
|
||||
:columns="columns"
|
||||
:dataSource="multiCouponData"
|
||||
:scroll="{ x: true }"
|
||||
:pagination="false"
|
||||
bordered
|
||||
rowKey="row_id"
|
||||
>
|
||||
<!-- 选择优惠券 -->
|
||||
<template slot="coupon_id" slot-scope="text, item">
|
||||
<a-select
|
||||
v-model="item.coupon_id"
|
||||
placeholder="请选择优惠券"
|
||||
style="width: 100%"
|
||||
@change="emitChange"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="(sub_item, index) in couponList"
|
||||
:key="index"
|
||||
:value="sub_item.coupon_id"
|
||||
>
|
||||
{{ sub_item.name }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</template>
|
||||
|
||||
<!-- 发送数量 -->
|
||||
<template slot="send_num" slot-scope="text, item">
|
||||
<a-input-number
|
||||
v-model="item.send_num"
|
||||
size="small"
|
||||
:min="0"
|
||||
:precision="0"
|
||||
@change="emitChange"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- 删除操作 -->
|
||||
<template slot="action" slot-scope="text, item">
|
||||
<a @click="handleDelete(item)">删除</a>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PropTypes from 'ant-design-vue/es/_util/vue-types'
|
||||
|
||||
// 表格表头
|
||||
const columns = [
|
||||
{
|
||||
title: '优惠券',
|
||||
dataIndex: 'coupon_id',
|
||||
width: 120,
|
||||
scopedSlots: { customRender: 'coupon_id' }
|
||||
},
|
||||
{
|
||||
title: '数量',
|
||||
dataIndex: 'send_num',
|
||||
width: 120,
|
||||
scopedSlots: { customRender: 'send_num' }
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
width: '150px',
|
||||
scopedSlots: { customRender: 'action' }
|
||||
}
|
||||
]
|
||||
|
||||
export default {
|
||||
props: {
|
||||
couponList: PropTypes.any,
|
||||
defaultCouponList: PropTypes.array.def([]),
|
||||
isCouponLocked: PropTypes.bool.def(false)
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
columns,
|
||||
labelCol: { span: 3 },
|
||||
wrapperCol: { span: 21 },
|
||||
multiCouponData: []
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
defaultCouponList (val) {
|
||||
if (val.length) {
|
||||
this.getData()
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
getData () {
|
||||
this.multiCouponData = this.defaultCouponList.map((item, index) => ({
|
||||
...item,
|
||||
row_id: item.row_id || Date.now() + index
|
||||
}))
|
||||
this.emitChange()
|
||||
},
|
||||
handleAddCoupon () {
|
||||
this.multiCouponData.push({
|
||||
coupon_id: null,
|
||||
send_num: 1,
|
||||
row_id: Date.now()
|
||||
})
|
||||
this.emitChange()
|
||||
},
|
||||
handleDelete (record) {
|
||||
this.multiCouponData = this.multiCouponData.filter(item => item !== record)
|
||||
this.emitChange()
|
||||
},
|
||||
emitChange () {
|
||||
this.$emit('change', this.multiCouponData)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
// 商品多规格
|
||||
.spec-group {
|
||||
width: 895px;
|
||||
margin-bottom: 15px;
|
||||
line-height: normal;
|
||||
|
||||
.ant-input {
|
||||
height: 28px;
|
||||
padding: 4px 11px;
|
||||
font-size: @font-size-base;
|
||||
line-height: 1.5;
|
||||
|
||||
&::placeholder {
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
}
|
||||
|
||||
.form-item-help {
|
||||
line-height: 36px;
|
||||
}
|
||||
|
||||
.spec-group-item {
|
||||
background: #f4f5f9;
|
||||
padding: 7px 12px;
|
||||
line-height: 28px;
|
||||
|
||||
.group-item-input {
|
||||
float: left;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.group-item-delete {
|
||||
font-size: 12px;
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.spec-value {
|
||||
background: #fbfbfb;
|
||||
padding: 8px 35px;
|
||||
|
||||
.spec-value-add,
|
||||
.spec-value-item {
|
||||
float: left;
|
||||
margin-bottom: 6px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
.spec-value-add {
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
|
||||
a {
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.spec-value-item {
|
||||
position: relative;
|
||||
margin-right: 20px;
|
||||
|
||||
.value-item-input {
|
||||
width: 186px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.icon-close {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-close {
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: -8px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
color: #7d7d7d;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 添加规格按钮
|
||||
.spec-group-add-btn {
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
|
||||
// 批量设置sku
|
||||
.sku-batch {
|
||||
line-height: 40px;
|
||||
margin-bottom: 12px;
|
||||
.title {
|
||||
line-height: 28px;
|
||||
margin-right: 15px;
|
||||
font-size: @font-size-base;
|
||||
}
|
||||
/deep/.ant-input,
|
||||
/deep/.ant-input-number {
|
||||
width: 120px;
|
||||
margin-right: 15px;
|
||||
}
|
||||
/deep/.ant-input {
|
||||
width: 140px;
|
||||
}
|
||||
}
|
||||
|
||||
// sku列表
|
||||
.sku-list {
|
||||
width: 895px;
|
||||
/deep/.ant-table-thead > tr > th,
|
||||
/deep/.ant-table-tbody > tr > td {
|
||||
white-space: nowrap;
|
||||
}
|
||||
/deep/.ant-table-tbody > tr > td {
|
||||
padding: 12px 18px;
|
||||
}
|
||||
|
||||
/deep/.ant-input-sm,
|
||||
/deep/.ant-input-number-sm {
|
||||
height: 28px;
|
||||
}
|
||||
/deep/.ant-input-number-sm input {
|
||||
height: 26px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user