|
@@ -0,0 +1,461 @@
|
|
|
+<template>
|
|
|
+ <div class="form-submit">
|
|
|
+ <div class="i-layout-page-header">
|
|
|
+ <PageHeader class="product_tabs" hidden-breadcrumb>
|
|
|
+ <div slot="title">
|
|
|
+ <router-link :to="{ path: `${roterPre}/marketing/serve/index` }">
|
|
|
+ <div class="font-sm after-line">
|
|
|
+ <span class="iconfont iconfanhui"></span>
|
|
|
+ <span class="pl10">返回</span>
|
|
|
+ </div>
|
|
|
+ </router-link>
|
|
|
+ <span v-text="$route.params.id ? '编辑服务卡' : '添加服务卡'" class="mr20 ml16"></span>
|
|
|
+ </div>
|
|
|
+ </PageHeader>
|
|
|
+ </div>
|
|
|
+ <Card :bordered="false" dis-hover class="ivu-mt" >
|
|
|
+ <div v-for="(item,index) in formData" class="product-item">
|
|
|
+ <Button type="primary" class="submission" @click="delNewProject(index)" >删除</Button>
|
|
|
+ <Form :model="item" :label-width="150" >
|
|
|
+ <FormItem label="选择商品:" prop="product_id" required>
|
|
|
+ <div class="picBox" @click="changeGoods(item)">
|
|
|
+ <Button type="primary" v-if="!item.product_id">选择商品</Button>
|
|
|
+ <div class="" v-else>
|
|
|
+ {{item.product_name}}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="业绩值" required>
|
|
|
+ <Input v-model="item.performance_value" v-width="320" placeholder="请输入业绩值"></Input>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="手工费" required>
|
|
|
+ <InputNumber v-model="item.craft_price" v-width="320"></InputNumber>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="销售提成" required>
|
|
|
+ <InputNumber v-model="item.sales_commissions" v-width="320"></InputNumber>
|
|
|
+ </InputNumber>
|
|
|
+ </FormItem>
|
|
|
+ <FormItem label="库存量" required>
|
|
|
+ <InputNumber v-model="item.repertory" v-width="320"></InputNumber>
|
|
|
+ </InputNumber>
|
|
|
+ </FormItem>
|
|
|
+ </Form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </Card>
|
|
|
+ <!-- 选择商品-->
|
|
|
+ <Modal v-model="modals" title="商品列表" footerHide class="paymentFooter" scrollable width="900"
|
|
|
+ @on-cancel="cancel">
|
|
|
+ <goods-list ref="goodslist" :goodsType="1" v-if="modals" @getProductId="getProductId"></goods-list>
|
|
|
+ </Modal>
|
|
|
+ <div style="width: 500px; display: flex;justify-content: center;">
|
|
|
+ <Button type="primary" class="submission" @click="addNewProject" >添加新项目</Button>
|
|
|
+ <Button type="primary" class="submission" @click="save" :disabled="disabled">立即创建</Button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ mapState
|
|
|
+ } from "vuex";
|
|
|
+ import storeList from "@/components/storeList";
|
|
|
+ import goodsList from "@/components/goodsList/index";
|
|
|
+ import {
|
|
|
+ couponCategoryApi,
|
|
|
+ couponSaveApi,
|
|
|
+ couponDetailApi,
|
|
|
+ VipEditApi,
|
|
|
+ serveAddApi,
|
|
|
+ bindServe,
|
|
|
+ searchServe
|
|
|
+ } from "@/api/marketing";
|
|
|
+ import {
|
|
|
+ brandList
|
|
|
+ } from "@/api/product";
|
|
|
+ // import { formatDate } from '@/utils/validate';
|
|
|
+ import Setting from "@/setting";
|
|
|
+ export default {
|
|
|
+ name: "storeCouponCreate",
|
|
|
+ components: {
|
|
|
+ goodsList,
|
|
|
+ storeList
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ baseForm: {
|
|
|
+ product_name: '',
|
|
|
+ product_id: 0,
|
|
|
+ performance_value: 0,
|
|
|
+ craft_price: 0,
|
|
|
+ sales_commissions: 0,
|
|
|
+ repertory: 0
|
|
|
+ },//基础数据
|
|
|
+ modal_loading: false,
|
|
|
+ modals: false,
|
|
|
+ id: '',
|
|
|
+ roterPre: Setting.roterPre,
|
|
|
+ disabled: false,
|
|
|
+ storesList: [],
|
|
|
+ formData: [{
|
|
|
+ product_name: '',
|
|
|
+ product_id: 0,
|
|
|
+ performance_value: 0,
|
|
|
+ craft_price: 0,
|
|
|
+ sales_commissions: 0,
|
|
|
+ repertory: 0
|
|
|
+ }],
|
|
|
+ isMinPrice: 0,
|
|
|
+ isCouponTime: 1,
|
|
|
+ isReceiveTime: 0,
|
|
|
+ modals: false,
|
|
|
+ datetime1: [],
|
|
|
+ datetime2: [],
|
|
|
+ storeModals: false,
|
|
|
+ currentTab: '1',
|
|
|
+ current: {},
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ ...mapState("admin/layout", ["isMobile", "menuCollapse"]),
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ console.log(this.$route.query);
|
|
|
+ if (this.$route.query.id) {
|
|
|
+ this.id = this.$route.query.id
|
|
|
+ console.log(this.id,'this.id');
|
|
|
+ this.getCouponDetail();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getCouponDetail() {
|
|
|
+ // console.log();
|
|
|
+ searchServe(this.id).then(res => {
|
|
|
+ let arr = []
|
|
|
+ res.data.list.forEach(item => {
|
|
|
+ let data = {
|
|
|
+ product_name: item.store_name,
|
|
|
+ product_id: item.id,
|
|
|
+ performance_value: item.performance_value || 0,
|
|
|
+ craft_price: item.craft_price || 0,
|
|
|
+ sales_commissions: item.sales_commissions || 0,
|
|
|
+ repertory:item.repertory
|
|
|
+ }
|
|
|
+ arr.push(data)
|
|
|
+ })
|
|
|
+ this.formData = arr
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 选择商品
|
|
|
+ changeGoods(item) {
|
|
|
+ this.modals = true;
|
|
|
+ this.current = item
|
|
|
+ },
|
|
|
+ addNewProject() {
|
|
|
+ console.log('dddddddddddddddddd');
|
|
|
+ try{
|
|
|
+ this.formData.push({
|
|
|
+ product_name: '',
|
|
|
+ product_id: 0,
|
|
|
+ performance_value: 0,
|
|
|
+ craft_price: 0,
|
|
|
+ sales_commissions: 0,
|
|
|
+ repertory: 0
|
|
|
+ })
|
|
|
+ // this.formData.concat(this.baseForm)
|
|
|
+ console.log(this.formData);
|
|
|
+ }catch(e){
|
|
|
+ console.log(e);
|
|
|
+ //TODO handle the exception
|
|
|
+ }
|
|
|
+ },
|
|
|
+ delNewProject(index) {
|
|
|
+ this.formData.splice(index,1)
|
|
|
+ },
|
|
|
+ // 商品id
|
|
|
+ getProductId(row) {
|
|
|
+ console.log(row,'这个');
|
|
|
+ this.modal_loading = false;
|
|
|
+ this.modals = false;
|
|
|
+ setTimeout(() => {
|
|
|
+ this.current.product_id = row.id
|
|
|
+ this.current.product_name = row.store_name
|
|
|
+ // this.formData.image = row.image
|
|
|
+ }, 500);
|
|
|
+ },
|
|
|
+ downTab() {
|
|
|
+ if (!this.formData.card_name) {
|
|
|
+ return this.$Message.error("请输入服务卡名称");
|
|
|
+ }
|
|
|
+ if (!this.formData.card_price) {
|
|
|
+ return this.$Message.error("请输入售价");
|
|
|
+ }
|
|
|
+ if (!this.formData.repertory) {
|
|
|
+ return this.$Message.error("请输入库存");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 创建
|
|
|
+ save() {
|
|
|
+ // this.downTab();
|
|
|
+ // console.log('这');
|
|
|
+ console.log(this.id);
|
|
|
+ bindServe(this.id,this.formData)
|
|
|
+ .then((res) => {
|
|
|
+ this.disabled = true;
|
|
|
+ this.$Message.success(res.msg);
|
|
|
+ // setTimeout(() => {
|
|
|
+ // this.$router.push({
|
|
|
+ // path: this.roterPre + "/marketing/serve/index",
|
|
|
+ // });
|
|
|
+ // }, 1000);
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.$Message.error(err.msg);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 使用有效期--时间段
|
|
|
+ dateChange(time) {
|
|
|
+ this.formData.start_use_time = time[0];
|
|
|
+ this.formData.end_use_time = time[1];
|
|
|
+ },
|
|
|
+ // 限时
|
|
|
+ timeChange(time) {
|
|
|
+ this.formData.start_time = time[0];
|
|
|
+ this.formData.end_time = time[1];
|
|
|
+ },
|
|
|
+ //对象数组去重;
|
|
|
+ unique(arr) {
|
|
|
+ const res = new Map();
|
|
|
+ return arr.filter(
|
|
|
+ (arr) => !res.has(arr.product_id) && res.set(arr.product_id, 1)
|
|
|
+ );
|
|
|
+ },
|
|
|
+ // // 选择的商品
|
|
|
+ // getProductId(productList) {
|
|
|
+ // this.modals = false;
|
|
|
+ // this.productList = this.unique(this.productList.concat(productList));
|
|
|
+ // this.formData.product_id = "";
|
|
|
+ // this.productList.forEach((value) => {
|
|
|
+ // if (this.formData.product_id) {
|
|
|
+ // this.formData.product_id += `,${value.product_id}`;
|
|
|
+ // } else {
|
|
|
+ // this.formData.product_id += `${value.product_id}`;
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // },
|
|
|
+ cancel() {
|
|
|
+ this.modals = false;
|
|
|
+ },
|
|
|
+ // 删除商品
|
|
|
+ remove(productId) {
|
|
|
+ for (let index = 0; index < this.productList.length; index++) {
|
|
|
+ if (this.productList[index].product_id == productId) {
|
|
|
+ this.productList.splice(index, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.formData.product_id = "";
|
|
|
+ this.productList.forEach((value) => {
|
|
|
+ if (this.formData.product_id) {
|
|
|
+ this.formData.product_id += `,${value.product_id}`;
|
|
|
+ } else {
|
|
|
+ this.formData.product_id += `${value.product_id}`;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ cancel() {
|
|
|
+ this.modals = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="stylus">
|
|
|
+ .tips {
|
|
|
+ display: inline-bolck;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .imgPic {
|
|
|
+ .info {
|
|
|
+ width: 60%;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .pictrue {
|
|
|
+ height: 36px;
|
|
|
+ margin: 7px 3px 0 3px;
|
|
|
+
|
|
|
+ img {
|
|
|
+ height: 100%;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .productType {
|
|
|
+ width: 120px;
|
|
|
+ height: 60px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 3px;
|
|
|
+ border: 1px solid #E7E7E7;
|
|
|
+ float: left;
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 8px;
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
+ line-height: 23px;
|
|
|
+ margin-right: 12px;
|
|
|
+
|
|
|
+ &.on {
|
|
|
+ border-color: #1890FF;
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+
|
|
|
+ &.on {
|
|
|
+ color: #1890FF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .title {
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jiao {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ right: 0;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-bottom: 26px solid #1890FF;
|
|
|
+ border-left: 26px solid transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ position: absolute;
|
|
|
+ bottom: -3px;
|
|
|
+ right: 1px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .info {
|
|
|
+ color: #888;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ivu-input-wrapper {
|
|
|
+ width: 320px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ivu-input-number {
|
|
|
+ width: 160px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ivu-date-picker {
|
|
|
+ width: 320px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ivu-icon-ios-camera-outline {
|
|
|
+ width: 58px;
|
|
|
+ height: 58px;
|
|
|
+ border: 1px dotted rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(0, 0, 0, 0.02);
|
|
|
+ line-height: 58px;
|
|
|
+ cursor: pointer;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-list {
|
|
|
+ width: 58px;
|
|
|
+ height: 58px;
|
|
|
+ border: 1px dotted rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 4px;
|
|
|
+ margin-right: 15px;
|
|
|
+ display: inline-block;
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+
|
|
|
+ .upload-list img {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ivu-icon-ios-close-circle {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ transform: translate(50%, -50%);
|
|
|
+ }
|
|
|
+
|
|
|
+ .form-submit {
|
|
|
+ /deep/.ivu-card {
|
|
|
+ border-radius: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ margin-bottom: 79px;
|
|
|
+
|
|
|
+ .fixed-card {
|
|
|
+ position: fixed;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ left: 200px;
|
|
|
+ z-index: 99;
|
|
|
+ box-shadow: 0 -1px 2px rgb(240, 240, 240);
|
|
|
+
|
|
|
+ /deep/ .ivu-card-body {
|
|
|
+ padding: 15px 16px 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ivu-form-item {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/ .ivu-form-item-content {
|
|
|
+ margin-right: 124px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ivu-btn {
|
|
|
+ height: 36px;
|
|
|
+ padding: 0 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /deep/.vxe-tree-cell {
|
|
|
+ padding-left: 0 !important;
|
|
|
+ }
|
|
|
+ .upLoad {
|
|
|
+ width: 58px;
|
|
|
+ height: 58px;
|
|
|
+ line-height: 58px;
|
|
|
+ border: 1px dotted rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 4px;
|
|
|
+ background: rgba(0, 0, 0, 0.02);
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .product-item {
|
|
|
+ border: 1px solid #eee;
|
|
|
+ min-width: 300px;
|
|
|
+ padding: 20px
|
|
|
+ .submission {
|
|
|
+ // display: block;
|
|
|
+ margin-left: 500px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|