创建盲票新增关联商品、创建商品新增只在首页显示的类型

src/views/business/ticket/components/AwardForm.vue

@@ -0,0 +1,144 @@
+<template>
+  <div>
+    <div class="prize">
+      <div class="prize-top">
+        <div>关联商品列表</div>
+      </div>
+      <div class="prize-table">
+        <el-table :data="goodsList" class="el-table">
+          <el-table-column label="商品图片">
+            <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" >
+            <template slot-scope="{ row }">
+              <div v-if="row.prizeType == 'coin' && row.value >= 0">盲豆 x{{ row.value }}</div>
+              <div v-else>{{ row.title }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="商品类型">
+            <template slot-scope="scope">
+              <div v-if="scope.row.prizeType == 'goods'">商品</div>
+              <div v-if="scope.row.prizeType == 'coupon'">券</div>
+              <div v-if="scope.row.prizeType == 'coupon_pkg'">券包</div>
+              <div v-if="scope.row.prizeType == 'coin'">盲豆</div>
+            </template>
+          </el-table-column>
+          <el-table-column label="商品价格">
+            <template slot-scope="scope">
+              <div v-if="scope.row.prizeType == 'goods'">￥{{ $numberFormat(scope.row.value) }}</div>
+              <span v-else>--</span>
+            </template>
+          </el-table-column>
+          <el-table-column label="商品成本">
+            <template slot-scope="scope">
+              <div v-if="scope.row.prizeType == 'goods'">￥{{ $numberFormat(scope.row.cost) }}</div>
+              <span v-else>--</span>
+            </template>
+          </el-table-column>
+
+          <el-table-column label="操作" align="center">
+            <template slot-scope="scope">
+              <el-button
+                size="mini"
+                type="text"
+                @click="handleDel()"
+              >删除</el-button
+              >
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="prize-btn">
+          <el-button type="primary" :disabled="goodsList.length > 0" size="small" @click="goodsCommand('goods', 0)">
+            添加商品
+          </el-button>
+<!--        <el-dropdown @command="goodsCommand($event, index)">-->
+<!--          <el-button type="primary" size="small">-->
+<!--            添加奖品<i class="el-icon-arrow-down el-icon&#45;&#45;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="coupon_pkg">券包</el-dropdown-item>-->
+<!--            <el-dropdown-item command="coin">盲豆</el-dropdown-item>-->
+<!--          </el-dropdown-menu>-->
+<!--        </el-dropdown>-->
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "AwardForm",
+  props: {
+    value: {
+      type: Array,
+      default: () => []
+    },
+    id: {
+      type: [String,Number],
+      default: false,
+    },
+  }, data() {
+    return {
+      boxId: this.$route.query.id,
+      awardsLabelList: [],//关联奖级列表
+      prizeIndex: 0, // 奖级下标
+      // 奖级列表
+      goodsList: [],
+      ticketType: '',
+    };
+  },
+  created() {
+  },
+  methods: {
+    // 添加奖品
+    add(item) {
+      this.goodsList = item;
+      this.$emit('input', this.goodsList)
+      this.$emit('close')
+    },
+
+    // 选择奖品种类
+    goodsCommand(e, index) {
+      this.$emit('goodsCommand', e)
+    },
+
+    // 奖级商品删除
+    handleDel(index, item) {
+      this.goodsList = []
+      this.$emit('input', this.goodsList)
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.prize {
+  width: 100%;
+  margin-bottom: 50px;
+  background: #f9f9f9;
+  border: 1px solid #bbbbbb;
+  font-size: 14px;
+  &-top {
+    padding: 10px 20px;
+    margin-bottom: 10px;
+
+    border-bottom: 1px solid #bbbbbb;
+    div {
+      line-height: 36px;
+    }
+  }
+  &-btn {
+    border-top: 1px solid #bbbbbb;
+    padding: 10px;
+  }
+}
+</style>

src/views/business/ticket/components/GoodsAddForm.vue

@@ -0,0 +1,237 @@
+<template>
+  <div>
+    <el-dialog
+      title="添加实物奖品"
+      width="1000px"
+      :visible.sync="dialogVisible"
+      :before-close="close"
+    >
+      <div class="dialog-search">
+        <div style="margin:0 0 10px 20px">商品名称：</div>
+        <el-input
+          v-model="goodsTitle"
+          placeholder="请输入商品名称"
+          clearable
+          size="small"
+          style="width: 220px" @clear="pageParams.pageNum = 1;getGoodsList()"
+          @keyup.enter.native="pageParams.pageNum = 1;getGoodsList()"
+        />
+        <div style="margin-left: 20px">商品价格：</div>
+        <el-input type="number" style="width: 220px" v-model="queryParams.minValue" @clear="pageParams.pageNum = 1;getGoodsList()"
+                  placeholder="最低价格" clearable @keyup.enter.native="pageParams.pageNum = 1;getGoodsList()"/>
+        <div style="width: 20px;text-align: center">-</div>
+        <el-input type="number" style="width: 220px" v-model="queryParams.maxValue" @clear="pageParams.pageNum = 1;getGoodsList()"
+                  placeholder="最高价格" clearable @keyup.enter.native="pageParams.pageNum = 1;getGoodsList()"/>
+        <br>
+        <div style="margin:0 0 10px 20px">盲豆兑换数量：</div>
+        <el-input type="number" style="width: 220px" v-model="queryParams.minExchange" @clear="pageParams.pageNum = 1;getGoodsList()"
+                  placeholder="最低盲豆数量" clearable @keyup.enter.native="pageParams.pageNum = 1;getGoodsList()"/>
+        <div style="width: 20px;text-align: center">-</div>
+        <el-input type="number" style="width: 220px" v-model="queryParams.maxExchange" @clear="pageParams.pageNum = 1;getGoodsList()"
+                  placeholder="最高盲豆数量" clearable @keyup.enter.native="pageParams.pageNum = 1;getGoodsList()"/>
+        <br>
+        <div style="margin:0 0 10px 20px">商品成本：</div>
+        <el-input type="number" style="width: 220px" v-model="queryParams.minCost" @clear="pageParams.pageNum = 1;getGoodsList()"
+                  placeholder="最低成本" clearable @keyup.enter.native="pageParams.pageNum = 1;getGoodsList()"/>
+        <div style="width: 20px;text-align: center">-</div>
+        <el-input type="number" style="width: 220px" v-model="queryParams.maxCost" @clear="pageParams.pageNum = 1;getGoodsList()"
+                  placeholder="最高成本" clearable @keyup.enter.native="pageParams.pageNum = 1;getGoodsList()"/>
+
+        <div class="ge"></div>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="pageParams.pageNum = 1;getGoodsList()"
+        >查询
+        </el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery()">重置</el-button>
+      </div>
+      <el-table
+        v-loading="loading"
+        :data="goodsList"
+        row-key="goodsId"
+        @selection-change="handleSelectionGoods"
+        class="el-table"
+      >
+        <el-table-column
+          type="selection"
+          width="55"
+          align="center"
+          fixed="left"
+          :reserve-selection="true"
+        />
+        <el-table-column label="商品ID" prop="goodsId"/>
+        <el-table-column label="商品图片">
+          <template slot-scope="{ row }">
+            <div v-if="row.picUrl">
+              <el-image
+                style="width: 100px; height: 100px"
+                :src="row.picUrl.split(',')[0]"
+                :preview-src-list="row.picUrl.split(',')"
+              >
+              </el-image>
+            </div>
+            <p v-else>-</p>
+          </template>
+        </el-table-column>
+        <el-table-column label="商品名称" prop="title" min-width="85"/>
+
+        <el-table-column label="商品价格" min-width="85">
+          <template slot-scope="scope">
+            <div>￥{{ $numberFormat(scope.row.value) }}</div>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="盲豆兑换数量" prop="exchangePrice" min-width="85"/>
+
+        <el-table-column label="商品成本" min-width="85">
+          <template slot-scope="scope">
+            <div>￥{{ $numberFormat(scope.row.cost) }}</div>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="是否支持兑换" prop="exchangeShow" min-width="85">
+          <template slot-scope="scope">
+            <div>{{scope.row.exchangeShow == 1 ? '支持兑换':'不支持兑换' }}</div>
+          </template>
+        </el-table-column>
+
+        <el-table-column label="商品库存" prop="quantity" width="80"/>
+      </el-table>
+      <div style="width: 700px;"></div>
+      <pagination
+        v-show="goodsTotal > 0"
+        :total="goodsTotal"
+        :page.sync="pageParams.pageNum"
+        :limit.sync="pageParams.pageSize"
+        @pagination="getGoodsList"
+      />
+      <div class="dialog-btn">
+        <div style="width: 20px;"></div>
+        <el-button size="small" @click="close"> 取 消</el-button>
+        <div style="width: 20px;"></div>
+        <el-button type="primary" size="small" @click="confirmGoods">
+          确 认
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import {publicFileGetUrl} from "@/api/common";
+import {getGoodsList} from "@/api/business/goods";
+import {accMul} from '@/utils/util'
+import log from "../../../monitor/job/log";
+
+export default {
+  name: "GoodsAddForm",
+  props: {
+    dialogVisible: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      loading: false,
+      goodsTitle: "", // 商品名称
+      queryParams: {},
+
+      goodsList: [], // 商品列表
+      goodsTotal: 0, // 商品总数
+      selectGoodsList: [], // 选中商品
+      pageParams: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+    };
+  },
+  created() {
+    this.getGoodsList();
+  },
+  methods: {
+    // 商品列表
+    getGoodsList() {
+      this.loading = true;
+
+      getGoodsList(
+        "pageNum=" + this.pageParams.pageNum + "&pageSize=" + this.pageParams.pageSize + "&", {
+          title: this.goodsTitle,
+          status: "on",
+          exchangeShow: 2,
+          minValue: this.queryParams.minValue ? accMul(this.queryParams.minValue, 100) : this.queryParams.minValue,
+          maxValue: this.queryParams.maxValue ? accMul(this.queryParams.maxValue, 100) : this.queryParams.maxValue,
+          minExchange:this.queryParams.minExchange,
+          maxExchange:this.queryParams.maxExchange,
+          minCost: this.queryParams.minCost ? accMul(this.queryParams.minCost, 100) : this.queryParams.minCost,
+          maxCost: this.queryParams.maxCost ? accMul(this.queryParams.maxCost, 100) : this.queryParams.maxCost,
+        }
+      ).then((res) => {
+        this.goodsList = res.rows.map((item) => {
+          return {
+            ...item,
+            picUrl: publicFileGetUrl + item.picUrl.split(",")[0],
+          };
+        });
+        this.goodsTotal = res.total;
+        this.loading = false;
+      });
+    },
+    //重置
+    resetQuery(){
+      this.goodsTitle = ''
+      this.queryParams = {}
+      this.pageParams.pageNum = 1
+      this.getGoodsList();
+    },
+
+    // 选中商品
+    handleSelectionGoods(e) {
+      this.selectGoodsList = e.map((item) => {
+        return {
+          prizeType: "goods",
+          refId: item.goodsId,
+          picUrl: item.picUrl,
+          title: item.title,
+          value: item.value,
+          cost: item.cost
+        };
+      });
+    },
+
+    // 确认选中商品
+    confirmGoods() {
+      if(!this.selectGoodsList.length) {
+        this.msgInfo('请选择商品')
+        return
+      }
+      if(this.selectGoodsList.length > 1) {
+        this.msgInfo('只能选择一个商品')
+        return
+      }
+      this.$emit("confirmGoodsForm", this.selectGoodsList);
+    },
+
+    close() {
+      this.$emit("close");
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+div {
+  display: inline-block;
+}
+.dialog-search {
+  //display: flex;
+  line-height: 32px;
+  margin-bottom: 20px;
+
+  .ge {
+    width: 20px;
+  }
+}
+
+</style>

src/views/business/ticket/create.vue

@@ -156,9 +156,13 @@
           <div class="tip" v-if="form.type == 'offline'">注：盲票只对所选渠道下的门店可见</div>
         </el-form>
       </div>
-      <div class="base-info-title" >奖级设置</div>
-      <!-- 奖级设置 -->
+      <!--  关联商品设置 -->
+      <div class="base-info-title"  v-if="form.type != 'offline'">商品设置（购买即可提货）</div>
 
+      <award-form ref="awardFrom" @close="close" v-model="goodsList" :id="ids"  @goodsCommand="goodsCommand"  v-if="form.type != 'offline'"></award-form>
+
+      <!-- 奖级设置 -->
+      <div class="base-info-title" >奖级设置</div>
       <!-- 奖级列表 -->
       <awards-list ref="awards" :id="ids" v-model="awardsList" @handleCommand="handleCommand" @close="close" />
       <!-- 保存 -->
@@ -179,6 +183,8 @@
     <coupon-pkg-add :dialog-visible="couponPkgTableVisible" @close="close" @confirmCouponPkg="confirmCouponPkg" v-if="couponPkgTableVisible" />
     <!-- 添加盲豆 -->
     <coin-add :dialog-visible="coinTableVisible" @close="close" @confirmCoin="confirmCoin" v-if="coinTableVisible" />
+    <!-- 添加商品 -->
+    <goods-add-form :dialog-visible="goodsVisibleForm" @close="close" @confirmGoodsForm="confirmGoodsForm" v-if="goodsVisibleForm" ></goods-add-form>
   </div>
 </template>
 <script>
@@ -193,6 +199,8 @@ import GoodsAdd from "./components/GoodsAdd"
 import CouponAdd from "./components/CouponAdd"
 import CouponPkgAdd from "./components/CouponPkgAdd"
 import CoinAdd from "./components/CoinAdd"
+import AwardForm from "./components/AwardForm"
+import GoodsAddForm from "./components/GoodsAddForm"
 export default {
   name: "TicketCreate",
   mixins: [CustomFieldsMixin],
@@ -202,7 +210,9 @@ export default {
     CouponAdd,
     CouponPkgAdd,
     CoinAdd,
-    Upload
+    Upload,
+    AwardForm,
+    GoodsAddForm
   },
   data() {
     return {
@@ -317,6 +327,8 @@ export default {
 
       // 奖级列表
       awardsList: [],
+      //关联商品列表
+      goodsList: [],
       goodsTableVisible: false, // 添加商品弹框
       couponTitle: "", // 券名称
       couponTableVisible: false, // 添加卡券弹框
@@ -326,6 +338,7 @@ export default {
         pageNum: 1,
         pageSize: 10,
       },
+      goodsVisibleForm: false, //添加关联商品弹框
     };
   },
   computed: {
@@ -349,7 +362,7 @@ export default {
         boxId: this.id
       }
       ticketBoxDetail(data).then(res => {
-        const { awardsList, type, title, picUrl, facePrice, salePrice, prePrice, quantity, originPrice, pkgUnit, pkgSalePrice, saleCommRate, saleChannelType, channelList } = res.data
+        const { awardsList, goodsList, type, title, picUrl, facePrice, salePrice, prePrice, quantity, originPrice, pkgUnit, pkgSalePrice, saleCommRate, saleChannelType, channelList } = res.data
         this.form = {
           disabled:true,
           title, picUrl, quantity, pkgUnit, saleCommRate, saleChannelType,
@@ -375,6 +388,17 @@ export default {
           })
           this.awardsList = awardsList
         }
+        if(goodsList){
+          goodsList.forEach((item) => {
+              (item.picUrl = publicFileGetUrl + item.picUrl.split(',')[0]),
+              // (item.prizeType = JSON.parse(item.prizeType).value);
+              (item.prizeType = 'goods');
+          });
+          this.$nextTick(() => {
+            this.$refs.awardFrom.add(goodsList)
+          })
+          // this.goodsList = goodsList
+        }
       })
     }
   },
@@ -472,6 +496,11 @@ export default {
             }
           }
 
+          if (this.form.type != "offline" && this.goodsList.length < 1) {
+            this.$message.error("关联商品不能为空");
+            return
+          }
+
           let data = {
             ...this.form,
             facePrice: accMul(this.form.facePrice, 100),
@@ -480,6 +509,7 @@ export default {
             pkgSalePrice: accMul(this.form.pkgSalePrice, 100),
             originPrice: accMul(this.form.originPrice, 100),
             awardsList: filterArr2,
+            goodsList: this.goodsList
           };
 
           if (this.id){
@@ -520,6 +550,7 @@ export default {
       this.couponTableVisible = false;
       this.couponPkgTableVisible = false;
       this.coinTableVisible = false;
+      this.goodsVisibleForm = false;
     },
 
     changeType(e) {
@@ -538,7 +569,9 @@ export default {
         this.coinTableVisible = true;
       }
     },
-
+    goodsCommand() {
+      this.goodsVisibleForm = true;
+    },
     // 确认选中商品
     confirmGoods(arr) {
       this.$refs.awards.add(1, arr)
@@ -559,6 +592,11 @@ export default {
       this.$refs.awards.add(2, obj)
     },
 
+    //选中的关联商品
+    confirmGoodsForm(arr) {
+      this.$refs.awardFrom.add(arr)
+    },
+
     // 取消
     back() {
       this.$store.dispatch("tagsView/delView", this.$route);

src/views/business/ticket/detail.vue

@@ -60,6 +60,57 @@
           <span v-else>{{ info.channelTitle }}</span>
         </el-form-item>
       </el-form>
+      <div class="base-info-title" v-if="goodsList.length > 0">商品设置（购买即可提货）</div>
+      <!-- 关联商品设置-->
+      <el-row :gutter="10" v-if="goodsList.length > 0">
+        <el-col :span="20" :offset="2">
+          <div class="prize">
+            <div class="prize-toptwo">
+              <div>关联商品列表</div>
+            </div>
+            <div class="prize-table">
+              <el-table :data="goodsList" class="el-table">
+                <el-table-column label="商品图片">
+                  <template slot-scope="{ row }">
+                    <el-image
+                      style="width: 70px; height: 70px"
+                      :src="row.picUrl"
+                      :preview-src-list="[row.picUrl]"
+                    >
+                    </el-image>
+                  </template>
+                </el-table-column>
+                <el-table-column label="商品名称" prop="title">
+                  <template slot-scope="{ row }">
+                    <div v-if="row.prizeType == 'coin'">盲豆 x{{ row.value }}</div>
+                    <div v-else>{{ row.title }}</div>
+                  </template>
+                </el-table-column>
+                <el-table-column label="商品类型" align="center">
+                  <template slot-scope="{ row }">
+                    <div v-if="row.prizeType == 'goods'">商品</div>
+                    <div v-if="row.prizeType == 'coupon'">券</div>
+                    <div v-if="row.prizeType == 'coupon_pkg'">券包</div>
+                    <div v-if="row.prizeType == 'coin'">盲豆</div>
+                  </template>
+                </el-table-column>
+                <el-table-column label="商品价格">
+                  <template slot-scope="{ row }">
+                    <div v-if="row.prizeType == 'goods'">￥{{ $numberFormat(row.value) }}</div>
+                    <span v-else>--</span>
+                  </template>
+                </el-table-column>
+                <el-table-column label="商品成本">
+                  <template slot-scope="{ row }">
+                    <div v-if="row.prizeType == 'goods'">￥{{ $numberFormat(row.cost) }}</div>
+                    <span v-else>--</span>
+                  </template>
+                </el-table-column>
+              </el-table>
+            </div>
+          </div>
+        </el-col>
+      </el-row>
       <div class="base-info-title">奖级设置</div>
       <!-- 奖级设置 -->
       <el-row :gutter="10">
@@ -143,6 +194,17 @@ export default {
       info: {},
       // 奖品
       awardsList: [],
+      //商品
+      goodsList:[{
+        picUrl: '',//商品图片
+        title: '',//商品名称
+        prizeType: {
+          value: '',//商品类型
+          tape: '',
+        },
+        value: '',//价格
+        cost: '',//成本
+      },]
     };
   },
   created() {
@@ -175,7 +237,13 @@ export default {
                   (ele.prizeType = JSON.parse(ele.prizeType));
               });
             });
+            data.goodsList.forEach(item=>{
+              (item.picUrl = publicFileGetUrl + item.picUrl.split(',')[0]),
+                // (item.prizeType = JSON.parse(item.prizeType).value);
+                (item.prizeType = 'goods');
+            })
             this.awardsList = data.awardsList;
+            this.goodsList = data.goodsList;
           }
         })
         .catch(() => {
@@ -213,6 +281,17 @@ export default {
   background: #f9f9f9;
   border: 1px solid #bbbbbb;
   font-size: 14px;
+  &-toptwo {
+    padding: 10px 20px;
+    margin-bottom: 10px;
+    //display: flex;
+    //align-content: center;
+    //justify-content: space-around;
+    border-bottom: 1px solid #bbbbbb;
+    div {
+      line-height: 36px;
+    }
+  }
   &-top {
     padding: 10px 20px;
     margin-bottom: 10px;