|
|
@@ -0,0 +1,550 @@
|
|
|
+<template>
|
|
|
+ <div class="el-container-md">
|
|
|
+
|
|
|
+ <div class="selection-toolbar">
|
|
|
+ <el-checkbox :indeterminate="isIndeterminate" v-model="allChecked" @change="toggleSelectAll">
|
|
|
+ {{ multipleSelection.length > 0 ? `已选 ${multipleSelection.length} 条` : '选中本页' }}
|
|
|
+ </el-checkbox>
|
|
|
+<!-- <el-button plain size="mini" @click="handleShelf">上架</el-button>-->
|
|
|
+<!-- <el-button plain size="mini" @click="handleUnshelf">下架</el-button>-->
|
|
|
+ <el-button plain size="mini" @click="handleDeleteSelected">删除</el-button>
|
|
|
+ <el-button plain type="mini" icon="el-icon-plus" @click="handleAddLiveCoupon">添加优惠券</el-button>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ ref="couponTable"
|
|
|
+ :data="couponLiveList"
|
|
|
+ style="width: 100%"
|
|
|
+ v-loading="loading"
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
+ >
|
|
|
+ <el-table-column type="selection" width="55"></el-table-column>
|
|
|
+ <!-- 题干列：显示试题的主要内容 -->
|
|
|
+ <el-table-column
|
|
|
+ prop="couponId"
|
|
|
+ label="优惠券id"
|
|
|
+ show-overflow-tooltip
|
|
|
+ ></el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ prop="title"
|
|
|
+ label="优惠券名称"
|
|
|
+ ></el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ prop="couponPrice"
|
|
|
+ label="优惠券价格"
|
|
|
+ ></el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ prop="useMinPrice"
|
|
|
+ label="优惠券使用最低价格"
|
|
|
+ ></el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ prop="couponTime"
|
|
|
+ label="优惠券有效时间"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="productName"
|
|
|
+ label="绑定直播商品"
|
|
|
+ ></el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ prop="isShow"
|
|
|
+ label="显示状态"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-switch
|
|
|
+ v-model="scope.row.isShow == 1"
|
|
|
+ @click.native.capture.prevent="handleSwitchClick(scope.row)"
|
|
|
+ active-color="#13ce66"
|
|
|
+ inactive-color="#ff4949">
|
|
|
+ </el-switch>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 操作列：包含编辑和删除按钮 -->
|
|
|
+ <el-table-column
|
|
|
+ label="操作"
|
|
|
+ width="180"
|
|
|
+ fixed="right"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ style="color: #0fae11;"
|
|
|
+ @click="handleCouponBind(scope.row)"
|
|
|
+ >绑定商品</el-button>
|
|
|
+ <el-button
|
|
|
+ type="text"
|
|
|
+ size="small"
|
|
|
+ style="color: #F56C6C;"
|
|
|
+ @click="handleCouponDelete(scope.row)"
|
|
|
+ >删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <!-- 分页组件：用于分页展示试题列表 -->
|
|
|
+ <pagination
|
|
|
+ v-show="couponLiveTotal > 0"
|
|
|
+ :total="couponLiveTotal"
|
|
|
+ :page.sync="couponParams.pageNum"
|
|
|
+ :limit.sync="couponParams.pageSize"
|
|
|
+ @pagination="getLiveCouponList"
|
|
|
+ style="margin-top: 20px;"
|
|
|
+ />
|
|
|
+
|
|
|
+ <!-- 添加优惠券弹窗 -->
|
|
|
+ <el-dialog
|
|
|
+ title="添加优惠券"
|
|
|
+ :visible.sync="couponDialogVisible"
|
|
|
+ width="800px"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :close-on-press-escape="false"
|
|
|
+ >
|
|
|
+ <div class="dialog-content">
|
|
|
+ <div style="text-align: right; margin-bottom: 20px;">
|
|
|
+ <el-input
|
|
|
+ v-model="searchTitle"
|
|
|
+ placeholder="请输入优惠券名称"
|
|
|
+ style="width: 300px;"
|
|
|
+ @input="handleCouponSearch"
|
|
|
+ ></el-input>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <el-table
|
|
|
+ :data="couponList"
|
|
|
+ style="width: 100%"
|
|
|
+ v-loading="couponLoading"
|
|
|
+ @selection-change="handleCouponChange"
|
|
|
+ @row-click="handleCouponRowClick"
|
|
|
+ row-key="id"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ type="selection"
|
|
|
+ width="55"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="title"
|
|
|
+ label="优惠券名称"
|
|
|
+ class-name="clickable-column"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="couponPrice"
|
|
|
+ label="优惠券价格"
|
|
|
+ class-name="clickable-column"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="useMinPrice"
|
|
|
+ label="优惠券使用最低价格"
|
|
|
+ class-name="clickable-column"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ prop="couponTime"
|
|
|
+ label="优惠券有效时间"
|
|
|
+ class-name="clickable-column"
|
|
|
+ ></el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <pagination
|
|
|
+ v-show="couponTotal > 0"
|
|
|
+ :total="couponTotal"
|
|
|
+ :page.sync="queryCouponParams.pageNum"
|
|
|
+ :limit.sync="queryCouponParams.pageSize"
|
|
|
+ @pagination="getCouponLists"
|
|
|
+ style="margin-top: 20px;"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <div style="display: flex; justify-content: space-between; align-items: center;">
|
|
|
+ <span class="selected-count">当前已选择 <span style="color: #00BFFF; font-style: italic;">{{ selectedCoupon.length }}</span> 优惠券</span>
|
|
|
+ <div>
|
|
|
+ <el-button @click="couponDialogVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="confirmAddCoupon">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+
|
|
|
+ <el-dialog
|
|
|
+ title="绑定商品"
|
|
|
+ :visible.sync="goodsDialogVisible"
|
|
|
+ width="400px"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :close-on-press-escape="false"
|
|
|
+ >
|
|
|
+ <el-form :model="goodsForm" ref="goodsForm" :rules="salesRules">
|
|
|
+ <!-- 新增商品下拉选择 -->
|
|
|
+ <el-form-item label="选择商品" prop="goodsId">
|
|
|
+ <el-select
|
|
|
+ v-model="goodsForm.goodsId"
|
|
|
+ placeholder="请选择商品"
|
|
|
+ style="width: 100%;"
|
|
|
+ @change="handleGoodsChange"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="goods in goodsList"
|
|
|
+ :key="goods.goodsId"
|
|
|
+ :label="goods.productName"
|
|
|
+ :value="goods.goodsId"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="goodsDialogVisible = false">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="confirmGoodChange">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {
|
|
|
+ listLiveCoupon,
|
|
|
+ addLiveCoupon,
|
|
|
+ handleIsShowChange,
|
|
|
+ handleDeleteSelected,
|
|
|
+ delLiveCoupon,
|
|
|
+ updateLiveCouponBind,
|
|
|
+ listCoupon
|
|
|
+} from "@/api/live/liveCoupon";
|
|
|
+import { listLiveGoods} from "@/api/live/liveGoods";
|
|
|
+
|
|
|
+
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ liveId: '',
|
|
|
+ loading: true,
|
|
|
+ searchTitle: '',
|
|
|
+ queryCouponParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ couponName: '',
|
|
|
+ liveId: null,
|
|
|
+ },
|
|
|
+ couponLiveList: [],
|
|
|
+ couponLiveTotal: 0,
|
|
|
+ couponParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ liveId: null
|
|
|
+ },
|
|
|
+ couponList: [],
|
|
|
+ couponTotal: 0,
|
|
|
+ selectedCoupon: [],
|
|
|
+ couponLoading: false,
|
|
|
+ couponDialogVisible: false,
|
|
|
+ multipleSelection: [],
|
|
|
+ allChecked: false,
|
|
|
+ isIndeterminate: false,
|
|
|
+ socket: null,
|
|
|
+ stockDialogVisible: false,
|
|
|
+ goodsDialogVisible: false,
|
|
|
+ goodsList: [],
|
|
|
+ stockForm: {
|
|
|
+ goodsId: '',
|
|
|
+ stock: 0,
|
|
|
+ productId: 0,
|
|
|
+ },
|
|
|
+ goodsForm: {
|
|
|
+ goodsId: '',
|
|
|
+ sales: 0,
|
|
|
+ productId: 0,
|
|
|
+ },
|
|
|
+ stockRules: {
|
|
|
+ stock: [
|
|
|
+ { required: true, message: '请输入库存数量', trigger: 'blur' },
|
|
|
+ { type: 'number', min: 0, message: '库存数量不能小于0', trigger: 'blur' }
|
|
|
+ ]
|
|
|
+ },
|
|
|
+ salesRules: {
|
|
|
+ sales: [
|
|
|
+ { required: true, message: '请输入销量数量', trigger: 'blur' },
|
|
|
+ { type: 'number', min: 0, message: '库存数量不能小于0', trigger: 'blur' }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ '$route.query': {
|
|
|
+ handler(newQuery) {
|
|
|
+ if (this.$route.params.liveId) {
|
|
|
+ this.liveId = this.$route.params.liveId;
|
|
|
+ }else {
|
|
|
+ this.liveId = this.$route.query.liveId;
|
|
|
+ }
|
|
|
+ this.couponParams.liveId = this.liveId
|
|
|
+ if(this.liveId == null) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.getLiveCouponList();
|
|
|
+ this.socket = this.$store.state.liveWs[this.liveId]
|
|
|
+ },
|
|
|
+ // 初始化时立即执行一次
|
|
|
+ immediate: true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // if (this.$route.params.liveId) {
|
|
|
+ // this.liveId = this.$route.params.liveId;
|
|
|
+ // }else {
|
|
|
+ // this.liveId = this.$route.query.liveId;
|
|
|
+ // }
|
|
|
+ // this.goodsParams.liveId = this.liveId
|
|
|
+ // this.getLiveGoodsList();
|
|
|
+ // this.socket = this.$store.state.liveWs[this.liveId]
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleGoodsChange(row){
|
|
|
+
|
|
|
+ },
|
|
|
+ getLiveGoodsList() {
|
|
|
+ listLiveGoods({"liveId":this.liveId,"pageNum":1,"pageSize":50}).then(response => {
|
|
|
+ this.goodsList = response.rows
|
|
|
+ this.goodsDialogVisible = true;
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleRouteChange(to, from) {
|
|
|
+ // 处理路由变化逻辑
|
|
|
+ console.log('路由变化:', from.path, '->', to.path);
|
|
|
+ },
|
|
|
+ handleSwitchClick(row) {
|
|
|
+ // 1. 获取「即将切换到的目标状态」（当前状态取反）
|
|
|
+ const targetStatus = !row.isShow
|
|
|
+ const couponList = row.id;
|
|
|
+ if (this.socket == null) {
|
|
|
+ this.$message.error("请从直播间开启展示状态！");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ handleIsShowChange({"couponId":couponList,"isShow":targetStatus,"liveId":this.liveId}).then(res=>{
|
|
|
+ if(res.code == 200){
|
|
|
+ row.isShow = targetStatus
|
|
|
+ if (res.msg == "目前仅支持单一优惠券推送") {
|
|
|
+ this.$message.error(res.msg)
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ const msg = {
|
|
|
+ cmd: 'coupon',
|
|
|
+ data: {"liveId":this.liveId,"couponIssueId":row.id,"status":targetStatus ? 1 : 0,"goodsId":row.goodsId,"couponName":row.title,
|
|
|
+ "couponPrice":row.couponPrice,"useMinPrice":row.useMinPrice, "couponTime":row.couponTime}
|
|
|
+ }
|
|
|
+ this.socket.send(JSON.stringify(msg));
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ handleDeleteSelected(){
|
|
|
+ if (this.multipleSelection.length > 0) {
|
|
|
+ const goodsList = this.getSelectedList();
|
|
|
+ handleDeleteSelected({"couponIds":goodsList,"liveId":this.liveId}).then(res=>{
|
|
|
+ this.dealResult(res)
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$message.info("请选择被删除的优惠券！")
|
|
|
+ }
|
|
|
+ },
|
|
|
+ dealResult(res){
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.getLiveCouponList();
|
|
|
+ this.$refs.couponTable.clearSelection();
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.msg);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getSelectedList(){
|
|
|
+ var couponList = []
|
|
|
+ this.multipleSelection.forEach(item => {
|
|
|
+ couponList.push(item.id);
|
|
|
+ })
|
|
|
+ return couponList;
|
|
|
+ },
|
|
|
+ // 全选或取消全选
|
|
|
+ toggleSelectAll(val) {
|
|
|
+ this.checked = val; // 更新 checkbox 的状态
|
|
|
+ if (val) {
|
|
|
+ // 如果 checkbox 被选中，则全选
|
|
|
+ this.toggleSelection(this.couponLiveList);
|
|
|
+ } else {
|
|
|
+ // 如果 checkbox 被取消选中，则取消全选
|
|
|
+ this.toggleSelection();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ toggleSelection(rows) {
|
|
|
+ if (rows && !this.isIndeterminate) {
|
|
|
+ rows.forEach(row => {
|
|
|
+ this.$refs.couponTable.toggleRowSelection(row);
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$refs.couponTable.clearSelection();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 多选框选中数据
|
|
|
+ handleSelectionChange(val) {
|
|
|
+ this.multipleSelection = val;
|
|
|
+ // 根据选择项的数量更新 checkbox 的状态
|
|
|
+ this.allChecked = val.length === this.couponLiveList.length;
|
|
|
+ this.isIndeterminate = val.length > 0 && val.length < this.couponLiveList.length;
|
|
|
+ },
|
|
|
+
|
|
|
+ getLiveCouponList() {
|
|
|
+ this.loading = true
|
|
|
+ listLiveCoupon(this.couponParams).then(response => {
|
|
|
+ this.couponLiveList = response.rows
|
|
|
+ this.couponLiveTotal = response.total
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // // 添加确认修改库存方法
|
|
|
+ // goodsDialogVisible() {
|
|
|
+ // this.$refs.couponForm.validate((valid) => {
|
|
|
+ // if (valid) {
|
|
|
+ // updateLiveCouponBind({
|
|
|
+ // goodsId: this.goodsForm.goodsId,
|
|
|
+ // couponId: this.goodsForm.sales,
|
|
|
+ // productId: this.goodsForm.productId
|
|
|
+ // }).then(response => {
|
|
|
+ // if (response.code === 200) {
|
|
|
+ // this.$message.success('销量修改成功');
|
|
|
+ // this.salesDialogVisible = false;
|
|
|
+ // this.getLiveCouponList(); // 重新获取列表数据
|
|
|
+ // } else {
|
|
|
+ // this.$message.error(response.msg || '销量修改失败');
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ // },
|
|
|
+ /** 处理行点击事件 */
|
|
|
+ handleCouponRowClick(row, column) {
|
|
|
+ // 如果点击的是复选框列，不进行处理
|
|
|
+ if (column.type === 'selection') {
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ // 获取表格实例
|
|
|
+ const table = this.$refs.couponTable[0]
|
|
|
+ if (!table) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ // 判断当前行是否已经被选中
|
|
|
+ const isSelected = this.selectedCoupon.some(item => item.id === row.id)
|
|
|
+
|
|
|
+ // 切换选中状态
|
|
|
+ table.toggleRowSelection(row, !isSelected)
|
|
|
+ },
|
|
|
+ getCouponLists() {
|
|
|
+ this.queryCouponParams.liveId = this.liveId
|
|
|
+ listCoupon(this.queryCouponParams).then(response => {
|
|
|
+ this.couponList = response.rows
|
|
|
+ this.couponTotal = response.total
|
|
|
+ this.loading = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleAddLiveCoupon(){
|
|
|
+ this.couponDialogVisible = true;
|
|
|
+ this.getCouponLists()
|
|
|
+ },
|
|
|
+ handleCouponSearch(){
|
|
|
+ this.queryCouponParams.pageNum = 1
|
|
|
+ this.queryCouponParams.couponName = this.searchTitle
|
|
|
+ this.getCouponLists()
|
|
|
+ },
|
|
|
+ handleCouponChange(coupon) {
|
|
|
+ this.selectedCoupon = coupon
|
|
|
+ },
|
|
|
+ confirmAddCoupon(){
|
|
|
+ if (this.selectedCoupon.length === 0) {
|
|
|
+ this.$message({
|
|
|
+ message: '请选择要添加的优惠券',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ addLiveCoupon({
|
|
|
+ liveId: this.liveId,
|
|
|
+ couponIds: this.selectedCoupon.map(item => item.id).join(',')
|
|
|
+ }).then(response => {
|
|
|
+ if (response.code !== 200) {
|
|
|
+ this.$message({
|
|
|
+ message: response.msg,
|
|
|
+ type: 'warning'
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.couponDialogVisible = false;
|
|
|
+ this.getLiveCouponList()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleCouponDelete(row){
|
|
|
+ var couponList = []
|
|
|
+ couponList.push(row.id);
|
|
|
+ delLiveCoupon({"couponIds":couponList,"liveId":this.liveId}).then(response => {
|
|
|
+ this.getLiveCouponList()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleCouponBind(row){
|
|
|
+ this.goodsForm.couponId = row.id;
|
|
|
+ this.goodsForm.goodsId = row.goodsId;
|
|
|
+ this.getLiveGoodsList()
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ handleGoodStock(row){
|
|
|
+ this.stockForm.goodsId = row.goodsId;
|
|
|
+ this.stockForm.stock = row.stock;
|
|
|
+ this.stockForm.productId = row.productId;
|
|
|
+ this.stockDialogVisible = true;
|
|
|
+ },
|
|
|
+ // 绑定商品
|
|
|
+ confirmGoodChange() {
|
|
|
+ this.$refs.goodsForm.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ updateLiveCouponBind({
|
|
|
+ goodsId: this.goodsForm.goodsId,
|
|
|
+ couponId: this.goodsForm.couponId,
|
|
|
+ liveId: this.liveId
|
|
|
+ }).then(response => {
|
|
|
+ if (response.code === 200) {
|
|
|
+ this.$message.success('商品修改成功');
|
|
|
+ this.goodsDialogVisible = false;
|
|
|
+ this.getLiveCouponList(); // 重新获取列表数据
|
|
|
+ } else {
|
|
|
+ this.$message.error(response.msg || '商品修改失败');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.selection-toolbar {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ padding-left: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.selection-toolbar .el-checkbox {
|
|
|
+ margin-right: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+/* 调整 checkbox 内部输入框的对齐 */
|
|
|
+.selection-toolbar .el-checkbox .el-checkbox__inner {
|
|
|
+ top: 8px; /* 根据实际需求调整 */
|
|
|
+}
|
|
|
+</style>
|
