|
@@ -0,0 +1,175 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <div class="base-info">
|
|
|
+ <div class="base-info-title">基础信息</div>
|
|
|
+ <el-form label-width="100px">
|
|
|
+ <el-form-item label="盲票类型:">
|
|
|
+ <span :class="loading ? 'el-icon-loading' : ''"></span>
|
|
|
+ {{ info && info.type && info.type.desc }}
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="盲票组名称:">
|
|
|
+ <span :class="loading ? 'el-icon-loading' : ''"></span>
|
|
|
+ {{ info && info.title }}
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="图片:">
|
|
|
+ <el-image
|
|
|
+ style="width: 110px; height: 150px"
|
|
|
+ :src="info && info.picUrl"
|
|
|
+ :preview-src-list="[info && info.picUrl]"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="面值:">
|
|
|
+ <span :class="loading ? 'el-icon-loading' : ''"></span>
|
|
|
+ {{ info && info.facePrice && $numberFormat(info.facePrice) }}元
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="售价:">
|
|
|
+ <span :class="loading ? 'el-icon-loading' : ''"></span>
|
|
|
+ {{ info && info.salePrice && $numberFormat(info.salePrice) }}元
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="盲票总数:">
|
|
|
+ <span :class="loading ? 'el-icon-loading' : ''"></span>
|
|
|
+ {{ info && info.quantity }}张
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="每包张数:">
|
|
|
+ <span :class="loading ? 'el-icon-loading' : ''"></span>
|
|
|
+ {{ info && info.pkgUnit }}张
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="采购单价:" v-if="info.type == 'offline'">
|
|
|
+ <span :class="loading ? 'el-icon-loading' : ''"></span>
|
|
|
+ {{ info && info.pkgSalePrice && $numberFormat(info.pkgSalePrice) }}元
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="佣金系数:">
|
|
|
+ <span :class="loading ? 'el-icon-loading' : ''"></span>
|
|
|
+ {{ info && info.saleCommRate }}%
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="序列号:">
|
|
|
+ <span :class="loading ? 'el-icon-loading' : ''"></span>
|
|
|
+ {{ info && info.boxNo }}
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <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="奖品图片">
|
|
|
+ <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" />
|
|
|
+ <el-table-column label="奖品类型" align="center">
|
|
|
+ <template slot-scope="{ row }">
|
|
|
+ <div v-if="row.prizeType.value == 'goods'">商品</div>
|
|
|
+ <div v-if="row.prizeType.value == 'coupon'">券</div>
|
|
|
+ <div v-if="row.prizeType.value == 'coin'">盲豆</div>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { publicFileGetUrl } from "@/api/common";
|
|
|
+import { ticketBoxDetail } from "@/api/business/ticket";
|
|
|
+export default {
|
|
|
+ components: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ loading: false,
|
|
|
+ // 盲票组ID
|
|
|
+ boxId: "",
|
|
|
+ // 盲票组详情
|
|
|
+ info: {},
|
|
|
+ // 奖品
|
|
|
+ awardsList: [],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.boxId = this.$route.query.id;
|
|
|
+ this.getDetail();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 获取详情
|
|
|
+ getDetail() {
|
|
|
+ this.loading = true;
|
|
|
+ ticketBoxDetail({ boxId: this.boxId })
|
|
|
+ .then((res) => {
|
|
|
+ this.loading = false;
|
|
|
+ console.log("res", res);
|
|
|
+ if (res.code == 0) {
|
|
|
+ let data = res.data;
|
|
|
+ this.info = {
|
|
|
+ ...data,
|
|
|
+ type: JSON.parse(data.type),
|
|
|
+ picUrl: publicFileGetUrl + data.picUrl,
|
|
|
+ };
|
|
|
+ data.awardsList.forEach((item) => {
|
|
|
+ item.prizeList.forEach((ele) => {
|
|
|
+ (ele.picUrl = publicFileGetUrl + ele.picUrl.split(',')[0]),
|
|
|
+ (ele.prizeType = JSON.parse(ele.prizeType));
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.awardsList = data.awardsList;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|