|
|
@@ -0,0 +1,981 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <h3 style="margin-bottom: 30px">{{isEdit ? '编辑':'添加'}}团购活动</h3>
|
|
|
+
|
|
|
+ <div class="form-contaner">
|
|
|
+ <el-form ref="mainForm" :model="mainForm" :rules="mainFormRules" label-width="100px">
|
|
|
+ <el-form-item label="活动名称：" prop="name">
|
|
|
+ <el-input v-model="mainForm.name" placeholder="请填写活动名称" style="width: 400px;"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="活动时间：" prop="date">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="mainForm.date"
|
|
|
+ type="daterange"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ style="width: 400px;"
|
|
|
+ range-separator="至"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ <el-upload
|
|
|
+ class="avatar-uploader"
|
|
|
+ style="height: 0"
|
|
|
+ :action="baseURL + 'common/upload'"
|
|
|
+ :headers="myHeaders"
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-success="uploadSuccess"
|
|
|
+ :before-upload="beforeUpload">
|
|
|
+ </el-upload>
|
|
|
+ <el-form-item label="活动图：" prop="imgUrl">
|
|
|
+ <div class="images">
|
|
|
+ <div class="main-img">
|
|
|
+ <div class="img" v-if="img1_url" @mouseover="img1_hover = true;" @mouseout="img1_hover = false;">
|
|
|
+ <el-image ref="img1" :src="img1_url" :preview-src-list="[img1_url]" style="width: 120px; height: 120px" fit="contain"></el-image>
|
|
|
+ <div class="mask" v-show="img1_hover">
|
|
|
+ <i class="el-icon-zoom-in" @click="previewImage('img1')"></i>
|
|
|
+ <i class="el-icon-upload2" @click="uploadImage('img1')"></i>
|
|
|
+ <i class="el-icon-delete" @click="deleteImage('img1')"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="add" v-else @click="uploadImage('img1')">
|
|
|
+ <i class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="海报图：" prop="imgUrl">
|
|
|
+ <div class="images">
|
|
|
+ <div class="main-img">
|
|
|
+ <div class="img" v-if="img2_url" @mouseover="img2_hover = true;" @mouseout="img2_hover = false;">
|
|
|
+ <el-image ref="img2" :src="img2_url" :preview-src-list="[img2_url]" style="width: 120px; height: 120px" fit="contain"></el-image>
|
|
|
+ <div class="mask" v-show="img2_hover">
|
|
|
+ <i class="el-icon-zoom-in" @click="previewImage('img2')"></i>
|
|
|
+ <i class="el-icon-upload2" @click="uploadImage('img2')"></i>
|
|
|
+ <i class="el-icon-delete" @click="deleteImage('img2')"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="add" v-else @click="uploadImage('img2')">
|
|
|
+ <i class="el-icon-plus avatar-uploader-icon"></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="活动状态：" prop="status">
|
|
|
+ <el-radio-group v-model="mainForm.status">
|
|
|
+ <el-radio :label="true">启用</el-radio>
|
|
|
+ <el-radio :label="false">不启用</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="备注：" prop="remark">
|
|
|
+ <el-input type="textarea" v-model="mainForm.remark" :autosize="{ minRows: 4, maxRows: 8}" placeholder="请填写备注" style="width: 400px;"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="mymain-container">
|
|
|
+ <div class="btn-group">
|
|
|
+ <el-button size="small" type="primary" @click="addMember">选择团长</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="table">
|
|
|
+ <el-table :data="memberList" element-loading-text="Loading" border fit highlight-current-row stripe max-height="300px">
|
|
|
+ <el-table-column align="center" label="头像" prop="avatar">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-image style="width: 40px; height: 40px; border-radius: 50%;" :src="scope.row.avatar" :preview-src-list="[scope.row.avatar]" fit="cover"></el-image>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column align="center" label="团长名称" prop="nickName"></el-table-column>
|
|
|
+ <el-table-column align="center" label="手机号码" prop="mobile"></el-table-column>
|
|
|
+
|
|
|
+ <el-table-column align="center" label="操作">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-popconfirm title="确定删除吗？" @onConfirm="deleteMember(scope.$index)" >
|
|
|
+ <el-button slot="reference" type="text">删除</el-button>
|
|
|
+ </el-popconfirm>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <div class="btn-group">
|
|
|
+ <el-button size="small" type="primary" @click="addGoods">选择商品</el-button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="diy-table">
|
|
|
+ <div class="table-head clearfix">
|
|
|
+ <div class="item goods">商品名称</div>
|
|
|
+ <div class="item sort">排序</div>
|
|
|
+ <div class="right">
|
|
|
+ <div class="item name">规格</div>
|
|
|
+ <div class="item input">划线价格</div>
|
|
|
+ <div class="item input">统一拼团价</div>
|
|
|
+ <div class="item input">统一团长分佣</div>
|
|
|
+ <div class="item input">库存</div>
|
|
|
+ <div class="item input">销量</div>
|
|
|
+ <div class="item opera">操作</div>
|
|
|
+ </div>
|
|
|
+ <div class="blank"></div>
|
|
|
+ </div>
|
|
|
+ <div class="goods-item" v-for="(item, index) in goodsList" :key="index">
|
|
|
+ <div class="goods-info">
|
|
|
+ <img :src="item.goodsImgSrc" alt="">
|
|
|
+ {{item.goodsName}}
|
|
|
+ </div>
|
|
|
+ <div class="sort">
|
|
|
+ <el-input type="number" size="small" v-model="item.sortNum"></el-input>
|
|
|
+ </div>
|
|
|
+ <div class="spec-list">
|
|
|
+ <div class="spec-item" v-for="(it, idx) in item.specs" :key="idx">
|
|
|
+ <div class="col name">{{it.goodsSpecName}}-{{it.goodsSpecValue}}</div>
|
|
|
+ <div class="col input"><el-input type="number" size="small" v-model="it.orgGoodsPrice"></el-input></div>
|
|
|
+ <div class="col input"><el-input type="number" size="small" v-model="it.comGroupPrice"></el-input></div>
|
|
|
+ <div class="col input"><el-input type="number" size="small" v-model="it.comShareAmount"></el-input></div>
|
|
|
+ <div class="col input"><el-input type="number" size="small" v-model="it.stock"></el-input></div>
|
|
|
+ <div class="col input"><el-input type="number" size="small" v-model="it.salesNum"></el-input></div>
|
|
|
+ <div class="col btn"><el-button type="text" @click="toSetHead(it.promotionGroupSpecId)">团长设置</el-button></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="operation">
|
|
|
+ <el-button type="text" style="color: #f56c6c" @click="deleteGoods(index)">删除</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="empty-text" v-if="goodsList.length < 1">暂无数据</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="page-footer">
|
|
|
+ <div class="footer" :class="classObj">
|
|
|
+ <el-button type="primary" @click="submitMainForm" :loading="formLoading">{{ formLoading ? '保存中 ...' : '保 存' }}</el-button>
|
|
|
+ <el-button @click="goBack">关 闭</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 选择商品 -->
|
|
|
+ <el-dialog title="选择商品" :visible.sync="addGoodsVisible" :show-close="false" width="60%" :close-on-click-modal="false">
|
|
|
+ <div class="dialog-container clearfix">
|
|
|
+ <div class="left fl">
|
|
|
+ <div class="item" @click="changeClassify('')">全部分类</div>
|
|
|
+ <div class="group" v-for="(item, index) in classifyList" :key="index">
|
|
|
+ <div class="item" @click="toggleOpen(index)">
|
|
|
+ <i :class="item.isOpen ? 'el-icon-caret-bottom':'el-icon-caret-right'"></i> {{item.name}}
|
|
|
+ </div>
|
|
|
+ <div class="child" v-if="item.isOpen">
|
|
|
+ <div class="item" v-for="(childItem, childIndex) in item.children" :key="childIndex" @click="changeClassify(childItem.categoryId)">{{childItem.name}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div class="right fl">
|
|
|
+ <div class="search">
|
|
|
+ <el-input placeholder="请输入商品名称进行搜索" v-model="keyword" class="input-with-select" clearable size="small" style="width: 250px">
|
|
|
+ <el-button slot="append" icon="el-icon-search" size="small" @click="getGoodsListByScreen"></el-button>
|
|
|
+ </el-input>
|
|
|
+ </div>
|
|
|
+ <div class="table" style="margin: 10px 0 20px;">
|
|
|
+ <el-table
|
|
|
+ v-loading="table_listLoading"
|
|
|
+ :data="table_dataList"
|
|
|
+ element-loading-text="Loading"
|
|
|
+ tooltip-effect="dark"
|
|
|
+ style="width: 100%"
|
|
|
+ max-height="270"
|
|
|
+ @selection-change="handleChooseGoods">
|
|
|
+ <el-table-column align="center" type="selection" :selectable='checkboxSelect' width="45"></el-table-column>
|
|
|
+ <el-table-column align="center" prop="goodsName" label="商品名称" min-width="200" show-overflow-tooltip></el-table-column>
|
|
|
+ <el-table-column align="center" prop="goodsPrice" label="价格" width="80"></el-table-column>
|
|
|
+ <el-table-column align="center" prop="stockNum" label="库存" width="80"></el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div class="pagination clearfix">
|
|
|
+ <div class="fr">
|
|
|
+ <el-pagination
|
|
|
+ @current-change="handleTableCurrentChange"
|
|
|
+ :current-page="table_currentPage"
|
|
|
+ :page-size="table_pageSize"
|
|
|
+ background
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :total="table_listTotal">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="submitAddGoods">保 存</el-button>
|
|
|
+ <el-button @click="cancelAddGoods">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 选择会员 -->
|
|
|
+ <el-dialog title="选择会员" :visible.sync="addMemberVisible" :show-close="false" width="65%" :close-on-click-modal="false">
|
|
|
+ <div class="dialog-container2 clearfix">
|
|
|
+ <el-form ref="screenForm" :model="member_screenForm" size="small" label-position="left">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :xs="24" :sm="12" :lg="7">
|
|
|
+ <el-form-item label="关键词" prop="keyword" label-width="55px">
|
|
|
+ <el-input v-model="member_screenForm.keyword" placeholder="请输入会员名称/电话"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="12" :lg="2" class="tr">
|
|
|
+ <el-button size="small" type="primary" @click="getMemberListByScreen">搜索</el-button>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ <div class="table memberTable" style="margin: 10px 0 20px;">
|
|
|
+ <el-table
|
|
|
+ v-loading="memberTable_listLoading"
|
|
|
+ :data="memberTable_dataList"
|
|
|
+ element-loading-text="Loading"
|
|
|
+ tooltip-effect="dark"
|
|
|
+ style="width: 100%"
|
|
|
+ max-height="360"
|
|
|
+ @selection-change="handleChooseMember">
|
|
|
+ <el-table-column align="center" type="selection" :selectable='checkboxSelect' width="45"></el-table-column>
|
|
|
+ <el-table-column align="center" prop="nickName" label="会员名称" min-width="150"></el-table-column>
|
|
|
+ <el-table-column align="center" prop="mobile" label="手机号码" min-width="100"></el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div class="pagination clearfix">
|
|
|
+ <div class="fr">
|
|
|
+ <el-pagination
|
|
|
+ @current-change="memberTableCurrentChange"
|
|
|
+ :current-page="memberTable_currentPage"
|
|
|
+ :page-size="memberTable_pageSize"
|
|
|
+ background
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :total="memberTable_listTotal">
|
|
|
+ </el-pagination>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button type="primary" @click="submitAddMember">保 存</el-button>
|
|
|
+ <el-button @click="cancelAddMember">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getToken } from '@/utils/auth'
|
|
|
+import { editActivity, addActivity, getClassifyList, getGoodsList, getActivityDetail, getMemberList } from '@/api/groupbuy'
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ baseURL: process.env.VUE_APP_BASE_API,
|
|
|
+ myHeaders: {'x-token': getToken()},
|
|
|
+ isEdit: false,
|
|
|
+ editId: '',
|
|
|
+ formLoading: false,
|
|
|
+ mainForm: {
|
|
|
+ name: '',
|
|
|
+ date: '',
|
|
|
+ remark: '',
|
|
|
+ status: true,
|
|
|
+ },
|
|
|
+ mainFormRules: {
|
|
|
+ name: [
|
|
|
+ { required: true, message: '请填写活动名称', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ date: [
|
|
|
+ { required: true, message: '请选择活动时间', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ },
|
|
|
+
|
|
|
+ uploadImageType: null,
|
|
|
+ img1_url: '',
|
|
|
+ img1_hover: false,
|
|
|
+ img2_url: '',
|
|
|
+ img2_hover: false,
|
|
|
+
|
|
|
+ goodsList: [], // 列表数据
|
|
|
+ addGoodsVisible: false,
|
|
|
+
|
|
|
+ classifyList: [],
|
|
|
+ classifyCurrent: '',
|
|
|
+ keyword: '',
|
|
|
+ table_dataList: null, // 列表数据
|
|
|
+ table_listLoading: true, // 列表加载loading
|
|
|
+ table_currentPage: 1, // 当前页码
|
|
|
+ table_pageSize: 10, // 每页数量
|
|
|
+ table_listTotal: 0, // 列表总数
|
|
|
+ table_chooseGoods: [], // table中 当前选择商品
|
|
|
+
|
|
|
+ saveDontBack: false,
|
|
|
+
|
|
|
+ memberList: [], // 会员数据
|
|
|
+ addMemberVisible: false,
|
|
|
+ member_screenForm: { // 筛选表单数据
|
|
|
+ keyword: '', // 名称
|
|
|
+ },
|
|
|
+ memberTable_dataList: null, // 列表数据
|
|
|
+ memberTable_listLoading: true, // 列表加载loading
|
|
|
+ memberTable_currentPage: 1, // 当前页码
|
|
|
+ memberTable_pageSize: 10, // 每页数量
|
|
|
+ memberTable_listTotal: 0, // 列表总数
|
|
|
+ memberTable_choose: [], // table中 当前选择会员
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ sidebar() {
|
|
|
+ return this.$store.state.app.sidebar
|
|
|
+ },
|
|
|
+ classObj() {
|
|
|
+ return {
|
|
|
+ hideSidebar: !this.sidebar.opened,
|
|
|
+ openSidebar: this.sidebar.opened
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ const { id } = this.$route.query;
|
|
|
+ this.isEdit = id ? true : false;
|
|
|
+ this.editId = id;
|
|
|
+
|
|
|
+ if(this.isEdit) {
|
|
|
+ this.getDetail(id);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ goBack() {
|
|
|
+ this.$router.go(-1)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取详情
|
|
|
+ getDetail(id) {
|
|
|
+ getActivityDetail({promotionGroupId: id}).then(res => {
|
|
|
+ this.mainForm = {
|
|
|
+ name: res.data.name,
|
|
|
+ date: [res.data.startTime.slice(0, 10), res.data.endTime.slice(0, 10)],
|
|
|
+ status: res.data.status,
|
|
|
+ remark: res.data.remark,
|
|
|
+ }
|
|
|
+ this.img1_url = res.data.imgUrl;
|
|
|
+ this.img2_url = res.data.posterImgUrl;
|
|
|
+ this.goodsList = res.data.goods;
|
|
|
+ this.memberList = res.data.promotionGroupUsers;
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取分类列表
|
|
|
+ getClassifyList() {
|
|
|
+ getClassifyList({categoryLevel: 1, status: true}).then(res => {
|
|
|
+ res.data.forEach(item => {
|
|
|
+ item.isOpen = false;
|
|
|
+ });
|
|
|
+ this.classifyList = res.data;
|
|
|
+ this.classifyCurrent = '';
|
|
|
+ this.getGoodsList();
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 展开/收起 分类
|
|
|
+ toggleOpen(index) {
|
|
|
+ this.classifyList[index].isOpen = !this.classifyList[index].isOpen;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 切换分类
|
|
|
+ changeClassify(cid) {
|
|
|
+ if(this.table_chooseGoods.length > 0) {
|
|
|
+ return this.$errorMsg('当前已选择商品，不可切换分类');
|
|
|
+ }
|
|
|
+ this.classifyCurrent = cid;
|
|
|
+ this.table_currentPage = 1;
|
|
|
+ this.getGoodsList();
|
|
|
+ },
|
|
|
+
|
|
|
+ // 搜索
|
|
|
+ getGoodsListByScreen() {
|
|
|
+ if(this.table_chooseGoods.length > 0) {
|
|
|
+ return this.$errorMsg('当前已选择商品，不可搜索');
|
|
|
+ }
|
|
|
+ this.table_currentPage = 1;
|
|
|
+ this.getGoodsList();
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取商品列表
|
|
|
+ getGoodsList() {
|
|
|
+ getGoodsList({
|
|
|
+ pageNum: this.table_currentPage,
|
|
|
+ pageSize: this.table_pageSize,
|
|
|
+ keyword: this.keyword,
|
|
|
+ categoryId: this.classifyCurrent,
|
|
|
+ }).then(res => {
|
|
|
+ let oldGoodsList = this.goodsList;
|
|
|
+ let newGoodsList = res.data.records;
|
|
|
+ for(let i = 0; i < oldGoodsList.length; i++) {
|
|
|
+ let oldItem = oldGoodsList[i]
|
|
|
+ for(let j = 0; j < newGoodsList.length; j++) {
|
|
|
+ let newItem = newGoodsList[j]
|
|
|
+ if(newItem.goodsId === oldItem.goodsId){
|
|
|
+ newGoodsList[j].selected = true;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ for(let j = 0; j < newGoodsList.length; j++) {
|
|
|
+ let newItem = newGoodsList[j]
|
|
|
+ if(newItem.promotionGroup === true){
|
|
|
+ newGoodsList[j].selected = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.table_dataList = newGoodsList;
|
|
|
+ this.table_listTotal = res.data.total;
|
|
|
+ this.table_listLoading = false;
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 查询重复值并禁选
|
|
|
+ checkboxSelect (row, rowIndex) {
|
|
|
+ if (row.selected) {
|
|
|
+ return false // 禁用
|
|
|
+ }else{
|
|
|
+ return true // 不禁用
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 更改列表当前页
|
|
|
+ handleTableCurrentChange(val) {
|
|
|
+ if(this.table_chooseGoods.length > 0) {
|
|
|
+ return this.$errorMsg('当前已选择商品，不可切换分页');
|
|
|
+ }
|
|
|
+ this.table_currentPage = val;
|
|
|
+ this.getGoodsList();
|
|
|
+ },
|
|
|
+
|
|
|
+ // table点击选择商品
|
|
|
+ handleChooseGoods(val) {
|
|
|
+ this.table_chooseGoods = val;
|
|
|
+ },
|
|
|
+
|
|
|
+ addGoods() {
|
|
|
+ this.addGoodsVisible = true;
|
|
|
+ this.getClassifyList();
|
|
|
+ },
|
|
|
+
|
|
|
+ // 取消 选择商品
|
|
|
+ cancelAddGoods(){
|
|
|
+ this.addGoodsVisible = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 提交 选择商品
|
|
|
+ submitAddGoods() {
|
|
|
+ let oldGoodsList = this.goodsList;
|
|
|
+ let newGoodsList = [];
|
|
|
+
|
|
|
+ this.table_chooseGoods.forEach(item => {
|
|
|
+ let obj = {
|
|
|
+ goodsId: item.goodsId,
|
|
|
+ goodsImgSrc: item.imgUrl,
|
|
|
+ goodsName: item.goodsName,
|
|
|
+ specs: []
|
|
|
+ }
|
|
|
+ item.goodsSpecs.forEach(it => {
|
|
|
+ let c_obj = {
|
|
|
+ goodsId: item.goodsId,
|
|
|
+ goodsSpecId: it.goodsSpecId,
|
|
|
+ goodsSpecName: it.name,
|
|
|
+ goodsSpecValue: it.specValue,
|
|
|
+ orgGoodsPrice: it.price,
|
|
|
+ comGroupPrice: '',
|
|
|
+ comShareAmount: '',
|
|
|
+ stock: it.stockNum,
|
|
|
+ salesNum: it.soldNum
|
|
|
+ }
|
|
|
+ obj.specs.push(c_obj);
|
|
|
+ })
|
|
|
+ newGoodsList.push(obj);
|
|
|
+ })
|
|
|
+ this.goodsList = oldGoodsList.concat(newGoodsList);
|
|
|
+ this.addGoodsVisible = false;
|
|
|
+ console.log(this.goodsList);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 删除商品
|
|
|
+ deleteGoods(index) {
|
|
|
+ this.goodsList.splice(index, 1);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取会员列表
|
|
|
+ getMemberList() {
|
|
|
+ getMemberList({
|
|
|
+ pageNum: this.memberTable_currentPage,
|
|
|
+ pageSize: this.memberTable_pageSize,
|
|
|
+ keyword: this.member_screenForm.keyword,
|
|
|
+ promotionGroupLeader: true,
|
|
|
+ }).then(res => {
|
|
|
+ let oldMemberList = this.memberList;
|
|
|
+ let newMemberList = res.data.records;
|
|
|
+ for(let i = 0; i < oldMemberList.length; i++) {
|
|
|
+ let oldItem = oldMemberList[i]
|
|
|
+ for(let j = 0; j < newMemberList.length; j++) {
|
|
|
+ let newItem = newMemberList[j]
|
|
|
+ if(newItem.userId === oldItem.userId){
|
|
|
+ newMemberList[j].selected = true;
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.memberTable_dataList = newMemberList;
|
|
|
+ this.memberTable_listTotal = res.data.total;
|
|
|
+ this.memberTable_listLoading = false;
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 选择会员 - 搜索
|
|
|
+ getMemberListByScreen() {
|
|
|
+ if(this.memberTable_choose.length > 0) {
|
|
|
+ return this.$errorMsg('当前已选择会员，不可搜索');
|
|
|
+ }
|
|
|
+ this.memberTable_currentPage = 1;
|
|
|
+ this.getMemberList();
|
|
|
+ },
|
|
|
+
|
|
|
+ // 更改列表当前页
|
|
|
+ memberTableCurrentChange(val) {
|
|
|
+ if(this.memberTable_choose.length > 0) {
|
|
|
+ return this.$errorMsg('当前已选择会员，不可切换分页');
|
|
|
+ }
|
|
|
+ this.memberTable_currentPage = val;
|
|
|
+ this.getMemberList();
|
|
|
+ },
|
|
|
+
|
|
|
+ // table点击选择会员
|
|
|
+ handleChooseMember(val) {
|
|
|
+ this.memberTable_choose = val;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 添加会员
|
|
|
+ addMember() {
|
|
|
+ this.addMemberVisible = true;
|
|
|
+
|
|
|
+ if(this.memberList.length > 0) {
|
|
|
+ this.member_screenForm.type = this.memberList[0].type;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.getMemberList();
|
|
|
+ },
|
|
|
+
|
|
|
+ // 删除会员
|
|
|
+ deleteMember(index) {
|
|
|
+ this.memberList.splice(index, 1);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 取消 选择会员
|
|
|
+ cancelAddMember(){
|
|
|
+ this.addMemberVisible = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 提交 选择会员
|
|
|
+ submitAddMember() {
|
|
|
+ // if(this.memberTable_choose.length > 1) {
|
|
|
+ // return this.$errorMsg('每次只能选择一个会员');
|
|
|
+ // }
|
|
|
+ let oldMemberList = this.memberList;
|
|
|
+ let newMemberList = this.memberTable_choose;
|
|
|
+ this.memberList = oldMemberList.concat(newMemberList);
|
|
|
+ this.addMemberVisible = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 提交表单
|
|
|
+ submitMainForm() {
|
|
|
+ if(!this.img1_url) {
|
|
|
+ return this.$errorMsg('请上传活动图');
|
|
|
+ }
|
|
|
+ if(this.memberList.length < 1) {
|
|
|
+ return this.$warningNotify('至少选择一个团长');
|
|
|
+ }
|
|
|
+ if(this.goodsList.length < 1) {
|
|
|
+ return this.$warningNotify('至少选择一个商品');
|
|
|
+ }
|
|
|
+
|
|
|
+ for(let i=0; i<this.goodsList.length; i++) {
|
|
|
+ for(let j=0; j<this.goodsList[i].specs.length; j++) {
|
|
|
+ if(this.goodsList[i].specs[j].orgGoodsPrice === '') {
|
|
|
+ this.formLoading = false;
|
|
|
+ this.$errorMsg('划线价格不能为空');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if(this.goodsList[i].specs[j].comGroupPrice === '') {
|
|
|
+ this.formLoading = false;
|
|
|
+ this.$errorMsg('统一团购价不能为空');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if(this.goodsList[i].specs[j].comShareAmount === '') {
|
|
|
+ this.formLoading = false;
|
|
|
+ this.$errorMsg('统一分佣金额不能为空');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if(this.goodsList[i].specs[j].stock === '') {
|
|
|
+ this.formLoading = false;
|
|
|
+ this.$errorMsg('库存不能为空');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if(this.goodsList[i].specs[j].salesNum === '') {
|
|
|
+ this.formLoading = false;
|
|
|
+ this.$errorMsg('销量不能为空');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ this.$refs.mainForm.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.formLoading = true;
|
|
|
+
|
|
|
+ let params = {
|
|
|
+ name: this.mainForm.name,
|
|
|
+ startTime: this.mainForm.date[0] + ' 00:00:00',
|
|
|
+ endTime: this.mainForm.date[1] + ' 23:59:59',
|
|
|
+ remark: this.mainForm.remark,
|
|
|
+ imgUrl: this.img1_url,
|
|
|
+ posterImgUrl: this.img2_url,
|
|
|
+ status: this.mainForm.status,
|
|
|
+ goods: this.goodsList,
|
|
|
+ promotionGroupUsers: this.memberList,
|
|
|
+ }
|
|
|
+ params = this.$deleteEmptyObj(params);
|
|
|
+
|
|
|
+ if(this.isEdit) {
|
|
|
+ params.promotionGroupId = this.editId;
|
|
|
+ editActivity(params).then(res => {
|
|
|
+ this.formLoading = false;
|
|
|
+ this.$successMsg('编辑成功');
|
|
|
+ setTimeout(()=>{
|
|
|
+ this.goBack();
|
|
|
+ }, 1000)
|
|
|
+ }).catch(err => {
|
|
|
+ this.formLoading = false;
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ addActivity(params).then(res => {
|
|
|
+ this.formLoading = false;
|
|
|
+ this.$successMsg('添加成功');
|
|
|
+ if(!this.saveDontBack) {
|
|
|
+ setTimeout(()=>{
|
|
|
+ this.goBack();
|
|
|
+ }, 1000)
|
|
|
+ }else {
|
|
|
+ this.$router.go(-1);
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$router.push({
|
|
|
+ name:"groupbuy_add",
|
|
|
+ query: {
|
|
|
+ id: res.data
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.editId = res.data;
|
|
|
+ this.getDetail(res.data);
|
|
|
+ }, 100)
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ this.saveDontBack = false;
|
|
|
+ this.formLoading = false;
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }else {
|
|
|
+ this.$warningNotify('请先完善信息');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 去设置团长
|
|
|
+ toSetHead(id) {
|
|
|
+ if(!this.editId) {
|
|
|
+ this.saveDontBack = true;
|
|
|
+ return this.$errorMsg('请先保存该活动');
|
|
|
+ }
|
|
|
+ this.$router.push({
|
|
|
+ name:"groupbuy_set",
|
|
|
+ query: {
|
|
|
+ id
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ uploadImage(type) {
|
|
|
+ this.uploadImageType = type;
|
|
|
+ document.querySelector('.avatar-uploader input').click();
|
|
|
+ },
|
|
|
+
|
|
|
+ // 上传图片
|
|
|
+ uploadSuccess(res, file) {
|
|
|
+ this[this.uploadImageType + '_url'] = res.data.url;
|
|
|
+ },
|
|
|
+
|
|
|
+ beforeUpload(file) {
|
|
|
+ const fileSuffix = file.name.substring(file.name.lastIndexOf(".") + 1);
|
|
|
+ const whiteList = ['jpg', 'jpeg', 'png'];
|
|
|
+ if (whiteList.indexOf(fileSuffix) === -1) {
|
|
|
+ this.$errorMsg('只支持上传jpg/jpeg/png文件!');
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 预览图片
|
|
|
+ previewImage(type) {
|
|
|
+ this.$refs[type].showViewer = true;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 删除图片
|
|
|
+ deleteImage(type) {
|
|
|
+ this[this.uploadImageType + '_url'] = '';
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .diy-table {
|
|
|
+ overflow-x: scroll;
|
|
|
+ border-left: 1px solid #f5f5f5;
|
|
|
+ margin-top: 20px;
|
|
|
+ width: 100%;
|
|
|
+ // min-width: 1185px;
|
|
|
+ max-width: 100%;
|
|
|
+ .table-head {
|
|
|
+ display: flex;
|
|
|
+ .item {
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ float: left;
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 14px;
|
|
|
+ background: #f5f5f5;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ float: left;
|
|
|
+ width: 74%;
|
|
|
+ min-width: 1000px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ height: 40px;
|
|
|
+ }
|
|
|
+ .goods {
|
|
|
+ width: 15%;
|
|
|
+ min-width: 170px;
|
|
|
+ }
|
|
|
+ .sort {
|
|
|
+ width: 5%;
|
|
|
+ min-width: 80px;
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ width: 15%;
|
|
|
+ min-width: 150px;
|
|
|
+ }
|
|
|
+ .input {
|
|
|
+ width: 15%;
|
|
|
+ min-width: 150px;
|
|
|
+ }
|
|
|
+ .opera {
|
|
|
+ width: 10%;
|
|
|
+ min-width: 80px;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ .blank {
|
|
|
+ background: #f5f5f5;
|
|
|
+ width: 6%;
|
|
|
+ min-width: 90px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .goods-item {
|
|
|
+ display: flex;
|
|
|
+ align-content: center;
|
|
|
+ .goods-info {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 15%;
|
|
|
+ min-width: 170px;
|
|
|
+ padding: 0 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1px solid #f5f5f5;
|
|
|
+ border-right: 1px solid #f5f5f5;
|
|
|
+ font-size: 14px;
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 40px;
|
|
|
+ height: 40px;
|
|
|
+ margin-right: 10px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sort {
|
|
|
+ width: 5%;
|
|
|
+ min-width: 80px;
|
|
|
+ border-bottom: 1px solid #f5f5f5;
|
|
|
+ border-right: 1px solid #f5f5f5;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+ .spec-list {
|
|
|
+ width: 74%;
|
|
|
+ min-width: 1000px;
|
|
|
+ border-bottom: 1px solid #f5f5f5;
|
|
|
+ border-right: 1px solid #f5f5f5;
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+ .spec-item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1px solid #f5f5f5;
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+ .col {
|
|
|
+ flex-shrink: 0;
|
|
|
+ height: 50px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 0 10px;
|
|
|
+ border-right: 1px solid #f5f5f5;
|
|
|
+ &:last-child {
|
|
|
+ border-right: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ width: 15%;
|
|
|
+ min-width: 150px;
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .input {
|
|
|
+ width: 15%;
|
|
|
+ min-width: 150px;
|
|
|
+ }
|
|
|
+ .btn {
|
|
|
+ width: 10%;
|
|
|
+ min-width: 80px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .operation {
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 6%;
|
|
|
+ min-width: 90px;
|
|
|
+ padding: 0 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border-bottom: 1px solid #f5f5f5;
|
|
|
+ border-right: 1px solid #f5f5f5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .empty-text {
|
|
|
+ line-height: 60px;
|
|
|
+ text-align: center;
|
|
|
+ color: #909399;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .dialog-container {
|
|
|
+ .left {
|
|
|
+ width: 140px;
|
|
|
+ height: 350px;
|
|
|
+ overflow-y: scroll;
|
|
|
+ .group {
|
|
|
+ margin-top: 10px;
|
|
|
+ }
|
|
|
+ .child {
|
|
|
+ margin-top: 5px;
|
|
|
+ .item {
|
|
|
+ padding-left: 18px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item {
|
|
|
+ cursor: pointer;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right {
|
|
|
+ width: calc(100% - 140px);
|
|
|
+ height: 350px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-left: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .images {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .main-img {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ width: 120px;
|
|
|
+ margin-right: 20px;
|
|
|
+ .img {
|
|
|
+ border: 1px dashed #eaeaea;
|
|
|
+ border-radius: 5px;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ .el-image {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .mask {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 120px;
|
|
|
+ height: 120px;
|
|
|
+ background: rgba($color: #000000, $alpha: 0.3);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ i {
|
|
|
+ font-size: 20px;
|
|
|
+ color: #ffffff;
|
|
|
+ cursor: pointer;
|
|
|
+ margin: 0 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .add {
|
|
|
+ width: 120px;
|
|
|
+ height: 120px;
|
|
|
+ border: 1px dashed #eaeaea;
|
|
|
+ border-radius: 5px;
|
|
|
+ cursor: pointer;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ i {
|
|
|
+ font-size: 30px;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tmp-img {
|
|
|
+ position: relative;
|
|
|
+ .tmp {
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ line-height: 20px;
|
|
|
+ padding: 0 8px;
|
|
|
+ background: #f66460;
|
|
|
+ border-radius: 0 0 10px 0;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
linwenxin