<template>
|
<!--
|
作者：luoyiming
|
时间：2019-10-26
|
描述：商品管理-商品编辑-基础信息
|
-->
|
<div class="basic-setting-content pl16 pr16">
|
<!--基本信息-->
|
<div class="common-form">基本信息</div>
|
<el-form-item label="会员卡名称：" :rules="[{ required: true, message: '请填写会员卡名称' }]" prop="model.card_name">
|
<el-input v-model="form.model.card_name" class="max-w460"></el-input>
|
</el-form-item>
|
<el-form-item label="卡片类型：" prop="model.is_default">
|
<el-radio-group v-model="form.model.is_default">
|
<el-radio :label="0">默认</el-radio>
|
<el-radio :label="1">自定义</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="卡片样式：" prop="model.card_style" v-if="form.model.is_default==0">
|
<div class="d-s-c f-w maxwidth-530">
|
<div v-for="(item,index) in form.image" class="card-el-row">
|
<div class="img" @click="chooseCardType(item.name)">
|
<img :class="item.name == form.model.card_style?'card active':'card'" :src="item.url" width="111" height="61" />
|
</div>
|
</div>
|
</div>
|
</el-form-item>
|
<el-form-item label="卡片样式：" prop="card_style" v-if="form.model.is_default==1">
|
<div class="d-s-c f-w maxwidth-530">
|
<div class="img" @click="openUpload()">
|
<img v-img-url="form.model.default_style" width="111" height="61" />
|
</div>
|
</div>
|
</el-form-item>
|
<el-form-item label="排序：" :rules="[{ required: true, message: '请填写排序' }]" prop="model.sort">
|
<el-input v-model="form.model.sort" class="max-w460"></el-input>
|
</el-form-item>
|
<el-form-item label="会员权益：">
|
<el-radio-group v-model="form.model.is_discount">
|
<el-radio :label="0">无折扣</el-radio>
|
<el-radio :label="1">有折扣</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="折扣：" :rules="[{ required: true, message: '请填写折扣' }]" prop="model.discount"
|
v-if="form.model.is_discount==1">
|
<el-input v-model="form.model.discount" class="max-w460"></el-input>
|
</el-form-item>
|
<el-form-item label="开卡赠送：">
|
<el-checkbox v-model="form.model.open_points" :true-label="1" :false-label='0'> 积分</el-checkbox>
|
<el-checkbox v-model="form.model.open_coupon" :true-label="1" :false-label='0'> 优惠券</el-checkbox>
|
<el-checkbox v-model="form.model.open_money" :true-label="1" :false-label='0'> 余额</el-checkbox>
|
<el-checkbox v-model="form.model.open_product" :true-label="1" :false-label='0'> 券商品</el-checkbox>
|
</el-form-item>
|
|
|
<el-form-item label="积分：" :rules="[{ required: true, message: '请填写积分数量' }]" prop="model.open_points_num"
|
v-if="form.model.open_points">
|
<el-input v-model="form.model.open_points_num" class="max-w460"></el-input>
|
</el-form-item>
|
<el-form-item label="余额：" :rules="[{ required: true, message: '请填写余额数量' }]" prop="model.open_money_num"
|
v-if="form.model.open_money">
|
<el-input v-model="form.model.open_money_num" class="max-w460"></el-input>
|
</el-form-item>
|
<el-form-item label="优惠券：" :rules="[{ required: true, message: '请填写优惠券' }]" prop="model.open_coupons"
|
v-if="form.model.open_coupon">
|
<div class="d-s-c">
|
<div style="width: 460px;border: 1px solid #dedede;min-height: 32px;"><span
|
v-for="(item,index) in form.model.open_coupons" :key="index">{{item.name+';'}}</span></div>
|
<el-button type="primary" @click="addCoupon()">添加优惠券</el-button>
|
</div>
|
</el-form-item>
|
<el-form-item label="" v-if="form.model.open_coupon">
|
<el-table :data="form.model.open_coupons" style="width: 60%">
|
<el-table-column prop="name" label="券名称">
|
</el-table-column>
|
<el-table-column prop="number" label="每人领取数量" :rules="[{required: true,message: ' '}]">
|
<template slot-scope="scope">
|
<el-input type="number" v-model="scope.row.number" placeholder="">
|
</el-input>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" prop="address">
|
<template slot-scope="scope">
|
<el-button type="text" size="small" @click='delcoupon(scope.row)'> 删除 </el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-form-item>
|
|
<el-form-item label="券商品：" :rules="[{ required: true, message: '请选择券商品' }]" prop="model.open_product"
|
v-if="form.model.open_product">
|
<div class="d-s-c">
|
<div style="width: 460px;border: 1px solid #dedede;min-height: 32px;"><span
|
v-for="(item,index) in form.model.open_products" :key="index">{{item.product_name+';'}}</span></div>
|
<el-button type="primary" @click="addProduct()">添加券商品</el-button>
|
</div>
|
</el-form-item>
|
<el-form-item label="" v-if="form.model.open_product">
|
<el-table :data="form.model.open_products" style="width: 60%">
|
<el-table-column prop="product_name" label="券商品名称">
|
</el-table-column>
|
<el-table-column label="操作" prop="address">
|
<template slot-scope="scope">
|
<el-button type="text" size="small" @click='delproduct(scope.row)'> 删除 </el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-form-item>
|
|
<!--上传图片组件-->
|
<Upload v-if="isupload" :isupload="isupload" :type="type" @returnImgs="returnImgsFunc">上传图片</Upload>
|
<!--选择优惠券-->
|
<GetCoupon v-if="open_add" :open_add="open_add" @closeDialog="closeCouponDialogFunc($event)">选择优惠券弹出层</GetCoupon>
|
<!--选择商品-->
|
<Product :isproduct="isproduct" is_virtual="2" is_supplier="true" @closeDialog="closeProductDialogFunc($event)">产品列表弹出层</Product>
|
</div>
|
</template>
|
|
<script>
|
import Upload from '@/components/file/Upload';
|
import draggable from 'vuedraggable';
|
import GetCoupon from '@/components/coupon/GetCoupon';
|
import Product from '@/components/product/Product';
|
export default {
|
components: {
|
Upload,
|
draggable,
|
GetCoupon,
|
Product
|
},
|
data() {
|
return {
|
isupload: false,
|
open_add: false,
|
isproduct: false,
|
excludeIds:[],
|
};
|
},
|
inject: ['form'],
|
created() {
|
|
},
|
methods: {
|
chooseCardType(e) {
|
this.form.model.card_style = e;
|
},
|
/*添加优惠券*/
|
addCoupon() {
|
if(this.form.model.open_coupons.length>=15){
|
this.$message.error('您已经选择了十五张优惠券，若要更换请删除其他优惠券！');
|
return
|
}
|
|
this.open_add = true;
|
},
|
/*关闭优惠券*/
|
closeCouponDialogFunc(e) {
|
let self = this;
|
self.open_add = e.openDialog;
|
if (e.type == 'success') {
|
let params = {
|
coupon_id: e.params.coupon_id,
|
name: e.params.name,
|
number: 1,
|
color:e.params.color,
|
discount:e.params.discount,
|
reduce_price:e.params.reduce_price,
|
coupon_type:e.params.coupon_type,
|
min_price:e.params.min_price,
|
}
|
self.form.model.open_coupons.push(params);
|
}
|
},
|
delcoupon(item) {
|
let self = this;
|
let n = self.form.model.open_coupons.indexOf(item);
|
self.form.model.open_coupons.splice(n, 1);
|
},
|
|
/*添加券商品*/
|
addProduct() {
|
this.isproduct = true;
|
},
|
/*关闭券商品*/
|
closeProductDialogFunc(e) {
|
let self = this;
|
self.isproduct = e.openDialog;
|
if (e.type == 'success') {
|
let params = {
|
product_id: e.params.product_id,
|
product_name: e.params.product_name,
|
}
|
self.form.model.open_products.push(params);
|
}
|
},
|
delproduct(item) {
|
let self = this;
|
let n = self.form.model.open_products.indexOf(item);
|
self.form.model.open_products.splice(n, 1);
|
},
|
/*上传*/
|
openUpload(e) {
|
this.type = e;
|
this.isupload = true;
|
},
|
/*获取图片*/
|
returnImgsFunc(e) {
|
if (e != null && e.length > 0) {
|
this.form.model.default_style = e[0].file_path;
|
}
|
this.isupload = false;
|
},
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
.edit_container {
|
font-family: 'Avenir', Helvetica, Arial, sans-serif;
|
-webkit-font-smoothing: antialiased;
|
-moz-osx-font-smoothing: grayscale;
|
text-align: center;
|
line-height: 20px;
|
color: #2c3e50;
|
}
|
|
.ql-editor {
|
height: 400px;
|
}
|
|
.draggable-list {
|
display: flex;
|
justify-content: flex-start;
|
flex-wrap: wrap;
|
}
|
|
.draggable-list .wrapper>span {
|
display: flex;
|
justify-content: flex-start;
|
flex-wrap: wrap;
|
}
|
|
.draggable-list .item {
|
position: relative;
|
width: 110px;
|
height: 110px;
|
margin-top: 10px;
|
margin-right: 10px;
|
border-radius: 8px;
|
overflow: hidden;
|
border: 1px solid #dddddd;
|
}
|
|
.draggable-list .delete-btn {
|
position: absolute;
|
top: 0;
|
right: 0;
|
width: 16px;
|
height: 16px;
|
background: red;
|
line-height: 16px;
|
font-size: 16px;
|
color: #ffffff;
|
display: none;
|
}
|
|
.draggable-list .item:hover .delete-btn {
|
display: block;
|
}
|
|
.draggable-list .item img {
|
position: absolute;
|
top: 50%;
|
left: 50%;
|
-webkit-transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
max-height: 100%;
|
max-width: 100%;
|
}
|
|
.draggable-list .img-select {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border: 1px dashed #dddddd;
|
font-size: 30px;
|
}
|
|
.draggable-list .img-select i {
|
color: #409eff;
|
}
|
|
.card-el-row {
|
margin-bottom: 20px;
|
margin-right: 20px;
|
}
|
|
.maxwidth-530 {
|
max-width: 530px;
|
}
|
|
.card {
|
border-radius: 4px;
|
}
|
|
.active.card {
|
border: 2px solid #4aa3f7;
|
}
|
</style>
|
