|
|
@@ -0,0 +1,562 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <div class="base-info">
|
|
|
+ <div class="base-info-title">基础信息</div>
|
|
|
+ <!-- 基础信息 -->
|
|
|
+ <div class="base-info-form">
|
|
|
+ <el-form :model="form" :rules="rules" ref="form" label-width="100px">
|
|
|
+ <el-form-item label="盲票类型" prop="type">
|
|
|
+ <el-radio-group v-model="form.type" size="small">
|
|
|
+ <el-radio label="online">线上盲票</el-radio>
|
|
|
+ <el-radio label="offline">线下盲票</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="盲票组名称" prop="title">
|
|
|
+ <el-input
|
|
|
+ v-model="form.title"
|
|
|
+ style="width: 587px"
|
|
|
+ size="small"
|
|
|
+ placeholder="请输入盲票组名称"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="图片" prop="picUrl">
|
|
|
+ <image-upload
|
|
|
+ :limit="1"
|
|
|
+ :value="form.picUrl"
|
|
|
+ :file-size="50"
|
|
|
+ :is-public="true"
|
|
|
+ @input="pictureSelect"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <div class="tip">
|
|
|
+ 上传1张图片，支持jpg、png格式上传，建议使用尺寸800x800像素以上、大小不超过1M的正方形图片；
|
|
|
+ </div>
|
|
|
+ <el-form-item label="面值" prop="facePrice">
|
|
|
+ <el-input
|
|
|
+ v-model="form.facePrice"
|
|
|
+ style="width: 240px"
|
|
|
+ size="small"
|
|
|
+ placeholder="请输入面值"
|
|
|
+ >
|
|
|
+ <template slot="append">元</template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="售价" prop="salePrice">
|
|
|
+ <el-input
|
|
|
+ v-model="form.salePrice"
|
|
|
+ style="width: 240px"
|
|
|
+ size="small"
|
|
|
+ placeholder="请输入售价"
|
|
|
+ >
|
|
|
+ <template slot="append">元</template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="数量" prop="quantity">
|
|
|
+ <el-input
|
|
|
+ v-model="form.quantity"
|
|
|
+ style="width: 240px"
|
|
|
+ size="small"
|
|
|
+ placeholder="请输入数量"
|
|
|
+ >
|
|
|
+ <template slot="append">张</template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="每包张数"
|
|
|
+ prop="pkgUnit"
|
|
|
+ v-if="form.type == 'offline'"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="form.pkgUnit"
|
|
|
+ style="width: 240px"
|
|
|
+ size="small"
|
|
|
+ placeholder="请输入每包张数"
|
|
|
+ >
|
|
|
+ <template slot="append">张</template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item
|
|
|
+ label="采购单价"
|
|
|
+ prop="pkgSalePrice"
|
|
|
+ v-if="form.type == 'offline'"
|
|
|
+ >
|
|
|
+ <el-input
|
|
|
+ v-model="form.pkgSalePrice"
|
|
|
+ style="width: 240px"
|
|
|
+ size="small"
|
|
|
+ placeholder="请输入采购单价"
|
|
|
+ >
|
|
|
+ <template slot="append">元/包</template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="分佣基数" prop="saleCommRate">
|
|
|
+ <el-input
|
|
|
+ v-model="form.saleCommRate"
|
|
|
+ style="width: 240px"
|
|
|
+ size="small"
|
|
|
+ placeholder="请输入分佣基数"
|
|
|
+ >
|
|
|
+ <template slot="append">%</template>
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <div class="tip">
|
|
|
+ 例如：盲票面值10元，分佣基数90%，经销商佣金比例20%，那么每卖一张票，经销商佣金为10元*90%*20%=1.8元
|
|
|
+ </div>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ <div class="base-info-title">奖级设置</div>
|
|
|
+ <!-- 奖级设置 -->
|
|
|
+ <div class="prize" v-for="(item, index) in awardsList" :key="index">
|
|
|
+ <div class="prize-top">
|
|
|
+ <div>奖级名称：{{ item.name }}</div>
|
|
|
+ <div>奖级：{{ item.sort }}</div>
|
|
|
+ <div>奖级数量：{{ item.quantity }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="prize-table">
|
|
|
+ <el-table :data="item.prizeList" class="el-table">
|
|
|
+ <el-table-column label="奖品图片" prop="storeName">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-image
|
|
|
+ style="width: 70px; height: 70px"
|
|
|
+ :src="scope.row.picUrl"
|
|
|
+ :preview-src-list="[scope.row.picUrl]"
|
|
|
+ >
|
|
|
+ </el-image>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="奖品名称" prop="title" />
|
|
|
+ <el-table-column label="奖品类型" prop="storeName">
|
|
|
+ <template slot-scope="scope"> </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="奖品数量" prop="storeName">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-input-number
|
|
|
+ v-model="num"
|
|
|
+ controls-position="right"
|
|
|
+ @change="handleChange"
|
|
|
+ :min="1"
|
|
|
+ size="small"
|
|
|
+ ></el-input-number>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ @click="handleDel(scope.$index, item)"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div class="prize-btn">
|
|
|
+ <el-dropdown @command="handleCommand($event, index)">
|
|
|
+ <el-button type="primary" size="small">
|
|
|
+ 添加奖品<i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
+ </el-button>
|
|
|
+ <el-dropdown-menu slot="dropdown">
|
|
|
+ <el-dropdown-item command="goods">商品</el-dropdown-item>
|
|
|
+ <el-dropdown-item command="coupon">代金券</el-dropdown-item>
|
|
|
+ <el-dropdown-item command="coin">盲豆</el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 保存 -->
|
|
|
+ <div class="save-btn">
|
|
|
+ <el-button size="small"> 取 消 </el-button>
|
|
|
+ <div class="ge"></div>
|
|
|
+ <el-button type="primary" size="small" @click="submitForm">
|
|
|
+ 保 存
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 添加商品 -->
|
|
|
+ <el-dialog
|
|
|
+ title="添加实物奖品"
|
|
|
+ width="1000px"
|
|
|
+ :visible.sync="goodsTableVisible"
|
|
|
+ :before-close="close"
|
|
|
+ >
|
|
|
+ <div class="dialog-search">
|
|
|
+ <div>商品名称：</div>
|
|
|
+ <el-input
|
|
|
+ v-model="name"
|
|
|
+ placeholder="请输入盲票组名称"
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ style="width: 240px"
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ <div class="ge"></div>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-search"
|
|
|
+ size="mini"
|
|
|
+ @click="handleQuery"
|
|
|
+ >查询</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ v-loading="loading"
|
|
|
+ :data="goodsList"
|
|
|
+ @selection-change="handleSelectionGoods"
|
|
|
+ class="el-table"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ type="selection"
|
|
|
+ width="55"
|
|
|
+ align="center"
|
|
|
+ fixed="left"
|
|
|
+ />
|
|
|
+ <el-table-column label="商品ID" prop="goodsId" />
|
|
|
+ <el-table-column label="商品图片">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-image
|
|
|
+ style="width: 100px; height: 100px"
|
|
|
+ :src="scope.row.picUrl"
|
|
|
+ :preview-src-list="[scope.row.picUrl]"
|
|
|
+ >
|
|
|
+ </el-image>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="商品名称" prop="title" min-width="85" />
|
|
|
+
|
|
|
+ <el-table-column label="商品价格" min-width="85">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ ￥{{ $numberFormat(scope.row.exchangePrice) }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="商品库存" prop="quantity" width="80" />
|
|
|
+ </el-table>
|
|
|
+ <pagination
|
|
|
+ v-show="goodsTotal > 0"
|
|
|
+ :total="goodsTotal"
|
|
|
+ :page.sync="pageParams.pageNum"
|
|
|
+ :limit.sync="pageParams.pageSize"
|
|
|
+ @pagination="getGoodsList"
|
|
|
+ />
|
|
|
+ <div class="dialog-btn">
|
|
|
+ <el-button size="small" @click="close"> 取 消 </el-button>
|
|
|
+ <div class="ge"></div>
|
|
|
+ <el-button type="primary" size="small" @click="confirmGoods">
|
|
|
+ 确 认
|
|
|
+ </el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { getGoodsList } from "@/api/business/goods";
|
|
|
+import { publicFileGetUrl } from "@/api/common";
|
|
|
+export default {
|
|
|
+ name: "TicketCreate",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: false,
|
|
|
+ picture: [],
|
|
|
+ form: {
|
|
|
+ type: "online", //盲票类型
|
|
|
+ title: "", // 盲票名称
|
|
|
+ picUrl: [], // 图片
|
|
|
+ facePrice: "", // 面值
|
|
|
+ salePrice: "", // 售价
|
|
|
+ quantity: "", // 数量
|
|
|
+ pkgUnit: "", // 张数
|
|
|
+ pkgSalePrice: "", // 单价
|
|
|
+ saleCommRate: "", // 基数
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ type: [
|
|
|
+ { required: true, message: "请选择盲票类型", trigger: "change" },
|
|
|
+ ],
|
|
|
+ title: [
|
|
|
+ { required: true, message: "请输入盲票组名称", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ picUrl: [
|
|
|
+ {
|
|
|
+ type: "array",
|
|
|
+ required: true,
|
|
|
+ message: "请上传盲票图片",
|
|
|
+ trigger: "change",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ facePrice: [
|
|
|
+ { required: true, message: "请输入面值", trigger: "blur" },
|
|
|
+ {
|
|
|
+ pattern:
|
|
|
+ /^([1-9]\d*(\.\d{1,2})?|([0](\.([0][1-9]|[1-9]\d{0,1}))))$/,
|
|
|
+ message: "请输入合法的金额数字，最多两位小数",
|
|
|
+ trigger: ["blur", "change"],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ salePrice: [
|
|
|
+ { required: true, message: "请输入售价", trigger: "blur" },
|
|
|
+ {
|
|
|
+ pattern:
|
|
|
+ /^([1-9]\d*(\.\d{1,2})?|([0](\.([0][1-9]|[1-9]\d{0,1}))))$/,
|
|
|
+ message: "请输入合法的金额数字，最多两位小数",
|
|
|
+ trigger: ["blur", "change"],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ quantity: [
|
|
|
+ { required: true, message: "请输入数量", trigger: "blur" },
|
|
|
+ {
|
|
|
+ pattern: /^([1-9]\d*)$/,
|
|
|
+ message: "请输入合法的数字",
|
|
|
+ trigger: ["blur", "change"],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ pkgUnit: [
|
|
|
+ { required: true, message: "请输入每包张数", trigger: "blur" },
|
|
|
+ {
|
|
|
+ pattern: /^([1-9]\d*)$/,
|
|
|
+ message: "请输入合法的数字",
|
|
|
+ trigger: ["blur", "change"],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ pkgSalePrice: [
|
|
|
+ { required: true, message: "请输入采购单价", trigger: "blur" },
|
|
|
+ {
|
|
|
+ pattern:
|
|
|
+ /^([1-9]\d*(\.\d{1,2})?|([0](\.([0][1-9]|[1-9]\d{0,1}))))$/,
|
|
|
+ message: "请输入合法的金额数字，最多两位小数",
|
|
|
+ trigger: ["blur", "change"],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ saleCommRate: [
|
|
|
+ { required: true, message: "请输入分佣基数", trigger: "blur" },
|
|
|
+ {
|
|
|
+ pattern:
|
|
|
+ /^([1-9]\d*(\.\d{1,2})?|([0](\.([0][1-9]|[1-9]\d{0,1}))))$/,
|
|
|
+ message: "请输入合法的数字，最多两位小数",
|
|
|
+ trigger: ["blur", "change"],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ input: 0,
|
|
|
+ num: 1,
|
|
|
+ list: [],
|
|
|
+ // 奖级列表
|
|
|
+ awardsList: [
|
|
|
+ {
|
|
|
+ name: "至尊级",
|
|
|
+ sort: 1,
|
|
|
+ quantity: 0,
|
|
|
+ prizeList: [],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "尊享款",
|
|
|
+ sort: 2,
|
|
|
+ quantity: 0,
|
|
|
+ prizeList: [],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "稀有款",
|
|
|
+ sort: 3,
|
|
|
+ quantity: 0,
|
|
|
+ prizeList: [],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "隐藏款",
|
|
|
+ sort: 4,
|
|
|
+ quantity: 0,
|
|
|
+ prizeList: [],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "普通款",
|
|
|
+ sort: 5,
|
|
|
+ quantity: 0,
|
|
|
+ prizeList: [],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+
|
|
|
+ prizeIndex: null, // 奖级下标
|
|
|
+
|
|
|
+ goodsTableVisible: false, // 添加商品弹框
|
|
|
+ goodsList: [], // 商品列表
|
|
|
+ goodsTotal: 10, // 商品总数
|
|
|
+ selectGoodsList: [],
|
|
|
+
|
|
|
+ name: "",
|
|
|
+
|
|
|
+ pageParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 5,
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getGoodsList();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getGoodsList() {
|
|
|
+ this.loading = true;
|
|
|
+ getGoodsList(
|
|
|
+ "pageNum=" +
|
|
|
+ this.pageParams.pageNum +
|
|
|
+ "&pageSize=" +
|
|
|
+ this.pageParams.pageSize +
|
|
|
+ "&",
|
|
|
+ {}
|
|
|
+ ).then((res) => {
|
|
|
+ console.log(res);
|
|
|
+ this.goodsList = res.rows.map((item) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ picUrl: publicFileGetUrl + item.picUrl,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ this.goodsTotal = res.total;
|
|
|
+ this.loading = false;
|
|
|
+ console.log("this.goodsList", this.goodsList);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ confirm() {},
|
|
|
+ submitForm() {
|
|
|
+ this.awardsList.forEach(item => {
|
|
|
+ item.prizeList = item.prizeList.map(ele=>{
|
|
|
+ return {
|
|
|
+ ...ele,
|
|
|
+ refId: ele.goodsId,
|
|
|
+ prizeType: ele.prizeType,
|
|
|
+ }
|
|
|
+ })
|
|
|
+ });
|
|
|
+
|
|
|
+ console.log('this.awardsList', this.awardsList)
|
|
|
+ // this.$refs["form"].validate((valid) => {
|
|
|
+ // if (valid) {
|
|
|
+ // console.log(this.form);
|
|
|
+ // } else {
|
|
|
+ // console.log("error submit!!");
|
|
|
+ // return false;
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ },
|
|
|
+ resetForm(formName) {
|
|
|
+ this.$refs[formName].resetFields();
|
|
|
+ },
|
|
|
+
|
|
|
+ pictureSelect(data) {
|
|
|
+ this.form.picUrl = data;
|
|
|
+ },
|
|
|
+
|
|
|
+ handleChange() {},
|
|
|
+
|
|
|
+ // 奖级商品删除
|
|
|
+ handleDel(e, item) {
|
|
|
+ console.log(e);
|
|
|
+ console.log("item", item);
|
|
|
+ let list = item.prizeList
|
|
|
+ list.splice(0, 1)
|
|
|
+ console.log('list', list)
|
|
|
+ this.$set(item, 'prizeList', list)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 关闭弹框
|
|
|
+ close() {
|
|
|
+ this.goodsTableVisible = false;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 添加奖品种类
|
|
|
+ handleCommand(e, index) {
|
|
|
+ console.log("e", e);
|
|
|
+ console.log("index", index);
|
|
|
+ this.prizeIndex = index;
|
|
|
+ // this.$set(item, "prizeList", this.goodsList);
|
|
|
+ this.goodsTableVisible = true;
|
|
|
+ },
|
|
|
+
|
|
|
+ handleQuery() {},
|
|
|
+
|
|
|
+ // 选中商品
|
|
|
+ handleSelectionGoods(e) {
|
|
|
+ console.log("选中商品", e);
|
|
|
+ this.selectGoodsList = e;
|
|
|
+ this.selectGoodsList.forEach(item=>{
|
|
|
+ item.prizeType = 'goods'
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 确认选中商品
|
|
|
+ confirmGoods() {
|
|
|
+ this.awardsList[this.prizeIndex].prizeList = this.awardsList[
|
|
|
+ this.prizeIndex
|
|
|
+ ].prizeList.concat(this.selectGoodsList);
|
|
|
+ this.getGoodsList();
|
|
|
+ this.close();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ components: {},
|
|
|
+ mounted() {},
|
|
|
+ destroyed() {},
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.base-info-title {
|
|
|
+ padding: 10px;
|
|
|
+ border-bottom: 1px solid #eaeaea;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+.tip {
|
|
|
+ padding-left: 100px;
|
|
|
+ height: 32px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ color: #828282;
|
|
|
+ font-size: 14px;
|
|
|
+}
|
|
|
+.save-btn {
|
|
|
+ display: flex;
|
|
|
+ align-content: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-bottom: 100px;
|
|
|
+ .ge {
|
|
|
+ width: 100px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.prize {
|
|
|
+ width: 1000px;
|
|
|
+ margin-bottom: 50px;
|
|
|
+ background: #f9f9f9;
|
|
|
+ border: 1px solid #bbbbbb;
|
|
|
+ font-size: 14px;
|
|
|
+ &-top {
|
|
|
+ padding: 10px 20px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-content: center;
|
|
|
+ justify-content: space-around;
|
|
|
+ border-bottom: 1px solid #bbbbbb;
|
|
|
+ div {
|
|
|
+ line-height: 36px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-btn {
|
|
|
+ border-top: 1px solid #bbbbbb;
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-search {
|
|
|
+ display: flex;
|
|
|
+ line-height: 32px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ .ge {
|
|
|
+ width: 40px;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.dialog-btn {
|
|
|
+ display: flex;
|
|
|
+ align-content: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ padding: 40px 0 0;
|
|
|
+ .ge {
|
|
|
+ width: 40px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
hwb0