|
@@ -0,0 +1,502 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container" style="width: 800px;margin: 0 auto;">
|
|
|
+ <el-form ref="bannerForm" :model="form" label-width="100px">
|
|
|
+ <el-form-item label="活动类型:" prop="acType" :rules="rules.acType">
|
|
|
+ <el-select v-model="form.acType" placeholder="请选择">
|
|
|
+ <el-option label="商品列表" :value="1" />
|
|
|
+ <el-option label="宣传图(一张)" :value="2" />
|
|
|
+ <el-option label="宣传图(多张)" :value="3" />
|
|
|
+ </el-select>
|
|
|
+ <el-button v-if="form.acType === 3" type="primary" icon="el-icon-plus" :disabled="disabled" style="margin-left: 10px;" @click="handleAddList">新增宣传图</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="主题:" prop="name" :rules="rules.name">
|
|
|
+ <el-input v-model="form.name" placeholder="请输入活动主题" style="width: 200px;" />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="状态:" prop="status" :rules="rules.status">
|
|
|
+ <el-select v-model="form.status" placeholder="请选择">
|
|
|
+ <el-option label="上线" :value="1" />
|
|
|
+ <el-option label="下线" :value="0" />
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <template v-if="form.acType === 1">
|
|
|
+ <!-- 商品列表 -->
|
|
|
+ <el-form-item label="商品信息" :prop="productList" :rules="rules.productList">
|
|
|
+ <el-button type="primary" icon="el-icon-sort" size="mini" :disabled="disabled3(form.productList)" @click="handleOnInputBlur">一键排序</el-button>
|
|
|
+ <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleDialogVisible">添加商品</el-button>
|
|
|
+ <el-checkbox-group v-show="false" v-model="form.productList" />
|
|
|
+ <el-table v-show="form.productList && form.productList.length>0" :data="form.productList" border>
|
|
|
+ <el-table-column property="mainImage" label="商品图片" align="center" width="80">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-popover
|
|
|
+ placement="top-start"
|
|
|
+ title=""
|
|
|
+ width="180"
|
|
|
+ trigger="hover"
|
|
|
+ >
|
|
|
+ <img :src="row.mainImage" alt="" style="width:150px;height:150px;">
|
|
|
+ <img slot="reference" :src="row.mainImage" alt="" style="width:30px;height:30px;">
|
|
|
+ </el-popover>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column property="name" label="商品名称" align="center" />
|
|
|
+ <el-table-column prop="validFlag" label="商品状态" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <el-tag :type="row.validFlag | statusFilter">{{ row.validFlag*1 === 1 ? '已上架' : '已下架' }}</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="排序" align="center" width="100">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <el-input v-model="row.sort" maxlength="4" minlength="1" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button type="text" @click="handleDeletePros(scope.$index)">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-form-item>
|
|
|
+ </template>
|
|
|
+ <template v-if="form.acType === 2 || form.acType === 3">
|
|
|
+ <div v-for="(activ,index) in form.activityList" :key="index" class="form-cell">
|
|
|
+ <el-form-item label="宣传图:" prop="banner" :rules="rules.banner">
|
|
|
+ <div class="form-el-upload">
|
|
|
+ <el-upload
|
|
|
+ class="avatar-uploader"
|
|
|
+ :action="actionUrl"
|
|
|
+ :headers="getToken"
|
|
|
+ :show-file-list="false"
|
|
|
+ :on-success="handleSuccess"
|
|
|
+ :before-upload="beforeUpload"
|
|
|
+ >
|
|
|
+ <div v-loading="loadImgLoading" class="avatar">
|
|
|
+ <img v-if="form.banner" :src="form.banner" @error="reloadImage" @load="loadSucess">
|
|
|
+ <i v-else class="el-icon-plus avatar-uploader-icon" />
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ <!-- 商品列表 -->
|
|
|
+ <el-form-item label="商品信息" :prop="`activityList.${index}.productList`" :rules="rules.productList">
|
|
|
+ <el-button type="primary" icon="el-icon-sort" size="mini" :disabled="disabled3(activ.productList)" @click="handleOnInputBlur">一键排序</el-button>
|
|
|
+ <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleDialogVisible">添加商品</el-button>
|
|
|
+ <el-checkbox-group v-show="false" v-model="activ.productList" />
|
|
|
+ <el-table v-show="activ.productList && activ.productList.length>0" :data="activ.productList" border>
|
|
|
+ <el-table-column property="mainImage" label="商品图片" align="center" width="80">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <el-popover
|
|
|
+ placement="top-start"
|
|
|
+ title=""
|
|
|
+ width="180"
|
|
|
+ trigger="hover"
|
|
|
+ >
|
|
|
+ <img :src="row.mainImage" alt="" style="width:150px;height:150px;">
|
|
|
+ <img slot="reference" :src="row.mainImage" alt="" style="width:30px;height:30px;">
|
|
|
+ </el-popover>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column property="name" label="商品名称" align="center" />
|
|
|
+ <el-table-column prop="validFlag" label="商品状态" align="center" width="150">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <el-tag :type="row.validFlag | statusFilter">{{ row.validFlag*1 === 1 ? '已上架' : '已下架' }}</el-tag>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="排序" align="center" width="100">
|
|
|
+ <template slot-scope="{row}">
|
|
|
+ <el-input v-model="row.sort" maxlength="4" minlength="1" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button type="text" @click="handleDeletePros(scope.$index)">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-form-item>
|
|
|
+ <el-button class="delete_label" :disabled="disabled1" icon="el-icon-delete" size="mini" type="danger" @click="handleDelete(index)">删除</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-form>
|
|
|
+ <div class="el-dialog__footer" style="text-align: center;">
|
|
|
+ <el-button type="primary" @click="onSubmit('bannerForm')">保存</el-button>
|
|
|
+ </div>
|
|
|
+ <!-- 商品弹框 -->
|
|
|
+ <good-dialog v-if="dialogVisible" ref="goodDialog" @cancel="handleGoodCancel" @confirm="handleGoodConfirm" />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getClubList, createOperator, updateStatus } from '@/api/club'
|
|
|
+import goodDialog from './components/good-multi-dialog'
|
|
|
+const defaultForm = () => {
|
|
|
+ return {
|
|
|
+ banner: 'https://img1.baidu.com/it/u=1016138010,1907110459&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
|
|
|
+ productList: []
|
|
|
+ }
|
|
|
+}
|
|
|
+export default {
|
|
|
+ name: 'BannerEdit',
|
|
|
+ components: { goodDialog },
|
|
|
+ filters: {
|
|
|
+ statusFilter(status) {
|
|
|
+ const statusMap = {
|
|
|
+ 1: 'success',
|
|
|
+ 0: 'warning'
|
|
|
+ }
|
|
|
+ return statusMap[status]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ form: {
|
|
|
+ acType: 1,
|
|
|
+ name: '',
|
|
|
+ banner: 'https://img1.baidu.com/it/u=1016138010,1907110459&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
|
|
|
+ sort: 0,
|
|
|
+ status: 1,
|
|
|
+ actId: '',
|
|
|
+ productList: [],
|
|
|
+ activityList: [
|
|
|
+ {
|
|
|
+ banner: 'https://img1.baidu.com/it/u=1016138010,1907110459&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
|
|
|
+ productList: []
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ productData: [
|
|
|
+ {
|
|
|
+ mainImage: 'https://img1.baidu.com/it/u=1016138010,1907110459&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
|
|
|
+ productName: 'Twinkle 水婴肌 美白 补水 紧致 无创水光',
|
|
|
+ shopName: '雅光博睿医药科技(广东)有限公司',
|
|
|
+ unit: '20ML',
|
|
|
+ costPrice: '50000.00',
|
|
|
+ price: '50000.00',
|
|
|
+ addTime: '2023-04-14 14:45:39',
|
|
|
+ validFlag: 1
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ formParams: {
|
|
|
+ id: '',
|
|
|
+ month: '',
|
|
|
+ endMonth: '',
|
|
|
+ status: '',
|
|
|
+ configure: 1, // 专属优惠券配置 1是、0否
|
|
|
+ coupons: []
|
|
|
+ },
|
|
|
+ editType: 'add',
|
|
|
+ // 商品列表
|
|
|
+ dialogVisible: false,
|
|
|
+ loadImgLoading: false,
|
|
|
+ rules: {
|
|
|
+ acType: [{ required: true, message: '请选择活动类型', trigger: 'blur' }],
|
|
|
+ name: [{ required: true, message: '请填写轮播主题', trigger: 'blur' }],
|
|
|
+ banner: [{ required: true, message: '请上传轮播图', trigger: 'blur' }],
|
|
|
+ productList: [{ required: true, type: 'array', message: '请添加商品', trigger: ['change'] }],
|
|
|
+ sort: [{ required: true, message: '排序值不能为空', trigger: 'blur' }],
|
|
|
+ status: [{ required: true, message: '请选择状态', trigger: 'blur' }]
|
|
|
+ },
|
|
|
+ delFlag: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ disabled() {
|
|
|
+ return this.form.activityList.length === 10
|
|
|
+ },
|
|
|
+ disabled1() {
|
|
|
+ return this.form.activityList.length === 1
|
|
|
+ },
|
|
|
+ getToken() {
|
|
|
+ return {
|
|
|
+ 'token': this.$store.getters.token
|
|
|
+ }
|
|
|
+ },
|
|
|
+ actionUrl() {
|
|
|
+ return process.env.VUE_APP_BASE_API + '/formData/MultiPictareaddData'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.editType = this.$route.query.type || 'edit'
|
|
|
+ console.log('editType', this.editType)
|
|
|
+ // this.initForm(this.editType)
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initForm(type) {
|
|
|
+ if (type === 'add') {
|
|
|
+ console.log('add')
|
|
|
+ this.svipCoupon(type, 1, 0)
|
|
|
+ } else {
|
|
|
+ console.log('edit')
|
|
|
+ this.svipCoupon(type, 0, this.$route.query.id)
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async svipCoupon(type, configure, id) {
|
|
|
+ const res = await svipCoupon({ id: id, configure: configure })
|
|
|
+ const data = res.data.svipcouponForm
|
|
|
+ this.formParams = { ...this.formParams, ...data }
|
|
|
+ if (data.coupons.length > 0) {
|
|
|
+ this.delFlag = true
|
|
|
+ this.form.formList = data.coupons.map((el) => {
|
|
|
+ el = { ...el, ...this.defaultShop }
|
|
|
+ if (el.shop) {
|
|
|
+ el.shopData.push(el.shop)
|
|
|
+ }
|
|
|
+ return el
|
|
|
+ })
|
|
|
+ console.log('formList', this.form.formList)
|
|
|
+ } else {
|
|
|
+ for (let i = 0; i <= 2; i++) {
|
|
|
+ this.form.formList.push(defaultForm())
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 显示选择商品弹窗
|
|
|
+ handleDialogVisible() {
|
|
|
+ this.dialogVisible = true
|
|
|
+ },
|
|
|
+ handleGoodDialogVisible(index) {
|
|
|
+ // 显示选择商品弹窗
|
|
|
+ this.addIndex = index
|
|
|
+ this.dialogGoodVisible = true
|
|
|
+ },
|
|
|
+ deleteShop() {
|
|
|
+ // 清除供应商
|
|
|
+ this.form.productId = ''
|
|
|
+ this.productData = []
|
|
|
+ },
|
|
|
+ handleGoodConfirm(data) {
|
|
|
+ // 确认选择商品
|
|
|
+ const from = this.form.formList[this.addIndex]
|
|
|
+ from.associateList.push(data)
|
|
|
+ console.log('from', this.form.formList)
|
|
|
+ this.handleGoodCancel()
|
|
|
+ },
|
|
|
+ handleDeletePros(index) {
|
|
|
+ // 删除商品
|
|
|
+ this.$confirm('确定删除吗?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ this.from.productList.splice(index, 1)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onSubmit(formName) {
|
|
|
+ this.$refs[formName].validate(valid => {
|
|
|
+ if (valid) {
|
|
|
+ this.handleFormParams()
|
|
|
+ this.$confirm('是否提交数据', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ console.log('formParams', this.formParams)
|
|
|
+ if (this.editType === 'add') {
|
|
|
+ this.formParams.configure = 1
|
|
|
+ } else {
|
|
|
+ this.formParams.configure = 0
|
|
|
+ }
|
|
|
+ this.saveVipCoupon(this.formParams)
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleFormParams() {
|
|
|
+ // 处理参数
|
|
|
+ this.formParams.coupons = this.form.formList.map((el) => {
|
|
|
+ if (el.associateList && el.associateList.length > 0) {
|
|
|
+ el.associateList = el.associateList.map((pro) => {
|
|
|
+ return {
|
|
|
+ sort: pro.sort,
|
|
|
+ pcStatus: pro.pcStatus,
|
|
|
+ appletsStatus: pro.appletsStatus,
|
|
|
+ name: pro.name,
|
|
|
+ shopName: pro.shopName,
|
|
|
+ mainImage: pro.mainImage,
|
|
|
+ productId: pro.productId
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ return el
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async saveVipCoupon(params) {
|
|
|
+ // 保存超级会员优惠券
|
|
|
+ await saveVipCoupon(params)
|
|
|
+ this.$message.success('保存成功')
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$router.push({ path: '/member/coupon/list' })
|
|
|
+ }, 1000)
|
|
|
+ },
|
|
|
+ // 取消选择商品
|
|
|
+ handleGoodCancel() {
|
|
|
+ this.dialogVisible = false
|
|
|
+ this.$refs.goodDialog.visible = false
|
|
|
+ },
|
|
|
+ handleAddList() {
|
|
|
+ // 新增宣传图
|
|
|
+ this.form.activityList.push(defaultForm())
|
|
|
+ },
|
|
|
+ handleDelete(index) {
|
|
|
+ // 删除单挑优惠券
|
|
|
+ this.$confirm('确定删除此条吗?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ if (this.delFlag) {
|
|
|
+ this.delCoupon(item.id, index)
|
|
|
+ } else {
|
|
|
+ this.form.activityList.splice(index, 1)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ async delCoupon(id, index) {
|
|
|
+ // 保存超级会员优惠券
|
|
|
+ if (id) {
|
|
|
+ try {
|
|
|
+ await delCoupon(id)
|
|
|
+ } catch (error) {
|
|
|
+ console.log(error)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.form.formList.splice(index, 1)
|
|
|
+ },
|
|
|
+ handleOnInputBlur(formItem) {
|
|
|
+ // 商品排序
|
|
|
+ this.form.productList.sort(this.sortByEnent('sort'))
|
|
|
+ },
|
|
|
+ sortByEnent(i) {
|
|
|
+ // 排序
|
|
|
+ return function(a, b) {
|
|
|
+ return a[i] - b[i] // a[i] - b[i]为正序,倒叙为 b[i] - a[i]
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handlePcStatusChange(row) {
|
|
|
+ // PC状态开启关闭
|
|
|
+ console.log('row', row)
|
|
|
+ if (row.pcStatus === '0') {
|
|
|
+ row.pcStatus = '1'
|
|
|
+ } else {
|
|
|
+ row.pcStatus = '0'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleAppStatusChange(row) {
|
|
|
+ // 小程序状态开启关闭
|
|
|
+ if (row.appletsStatus === '0') {
|
|
|
+ row.appletsStatus = '1'
|
|
|
+ } else {
|
|
|
+ row.appletsStatus = '0'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ disabled3(array) {
|
|
|
+ if (array && array.length >= 2) {
|
|
|
+ return false
|
|
|
+ } else {
|
|
|
+ return true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 上传图标事件
|
|
|
+ handleSuccess(response, file) {
|
|
|
+ this.loadImgLoading = true
|
|
|
+ this.$nextTick(() => {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.temp.classifyImage = response.data
|
|
|
+ }, 1000 * 2)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 对上传图片的大小、格式进行限制
|
|
|
+ beforeUpload(file) {
|
|
|
+ const isJPG = file.type === 'image/jpeg'
|
|
|
+ const isJPG2 = file.type === 'image/jpg'
|
|
|
+ const isPNG = file.type === 'image/png'
|
|
|
+ const isLt5M = file.size / 1024 / 1024 < 5
|
|
|
+ if (!isJPG && !isJPG2 && !isPNG) {
|
|
|
+ this.$message.error('只支持jpg或png格式图片')
|
|
|
+ }
|
|
|
+ if (!isLt5M) {
|
|
|
+ this.$message.error('请上传5MB以内的图片!')
|
|
|
+ }
|
|
|
+ return (isJPG || isJPG2 || isPNG) && isLt5M
|
|
|
+ },
|
|
|
+ reloadImage() {
|
|
|
+ this.loadImgLoading = true
|
|
|
+ setTimeout(() => {
|
|
|
+ this.temp.classifyImage = this.temp.classifyImage.split('?')[0] + '?r=' + Math.floor(Math.random() * 1000)
|
|
|
+ }, 1000 * 2)
|
|
|
+ },
|
|
|
+ loadSucess() {
|
|
|
+ this.loadImgLoading = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style>
|
|
|
+.avatar-uploader .el-upload {
|
|
|
+ border: 1px dashed #d9d9d9;
|
|
|
+ border-radius: 6px;
|
|
|
+ cursor: pointer;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .avatar-uploader .el-upload:hover {
|
|
|
+ border-color: #409EFF;
|
|
|
+ }
|
|
|
+ .avatar-uploader-icon {
|
|
|
+ font-size: 28px;
|
|
|
+ color: #8c939d;
|
|
|
+ width: 148px;
|
|
|
+ height: 148px;
|
|
|
+ line-height: 148px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .avatar {
|
|
|
+ width: 148px;
|
|
|
+ height: 148px;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .avatar img {
|
|
|
+ width: 148px;
|
|
|
+ height: 148px;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .el-form-item__label{
|
|
|
+ text-align: right !important;
|
|
|
+ }
|
|
|
+ .form-el-upload{
|
|
|
+ width: 150px;
|
|
|
+ }
|
|
|
+ .el-upload__tip{
|
|
|
+ line-height: 20px;
|
|
|
+ color: red;
|
|
|
+ text-align: left;
|
|
|
+ position: absolute;
|
|
|
+ right: -50%;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+ .span_tip{
|
|
|
+ font-size: 12px;
|
|
|
+ color: red;
|
|
|
+ margin-left: 5px;
|
|
|
+ }
|
|
|
+ .filter-item-temp{
|
|
|
+ width: 100px;
|
|
|
+ }
|
|
|
+ .form-cell{
|
|
|
+ border: 1px solid #e1e1e1;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);
|
|
|
+ padding: 20px;
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+ .delete_label{
|
|
|
+ position: absolute;
|
|
|
+ right: 2%;
|
|
|
+ top: 20px;
|
|
|
+ }
|
|
|
+</style>
|