Procházet zdrojové kódy

新增盲票销售订单列表、详情(未完)

hwb0 před 3 roky
rodič
revize
f244019f3b

+ 144 - 3
src/views/order/userTicket/detail.vue

@@ -1,13 +1,154 @@
 <template>
-  <div></div>
+  <div class="app-container">
+    <!-- 订单信息 -->
+    <div class="info">
+      <div class="info-title">订单信息</div>
+      <div class="info-item">
+        <div class="info-item-content">
+          <div class="info-item-content-one">
+            <div class="title">订单编号:</div>
+            <div class="txt">{{ info.orderId }}</div>
+          </div>
+          <div class="info-item-content-one">
+            <div class="title">订单类型:</div>
+            <div class="txt">经销商订单</div>
+          </div>
+        </div>
+        <div class="info-item-content">
+          <div class="info-item-content-one">
+            <div class="title">下单时间:</div>
+            <div class="txt">{{ parseTime(info.createdTime) }}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 买家信息 -->
+    <div class="info">
+      <div class="info-title">买家信息</div>
+      <div class="info-item">
+        <div class="info-item-content">
+          <div class="info-item-content-one">
+            <div class="title">用户昵称:</div>
+            <div class="txt">{{ info.orderId }}</div>
+          </div>
+          <div class="info-item-content-one">
+            <div class="title">手机号:</div>
+            <div class="txt">1258745155</div>
+          </div>
+          <div class="info-item-content-one">
+            <div class="title">上级渠道商:</div>
+            <div class="txt">测试</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 兑奖状态 -->
+    <div class="info">
+      <div class="info-title">兑奖状态</div>
+      <div class="info-item">
+        <div class="info-item-content">
+          <div class="info-item-content-one">
+            <div class="title">兑奖状态:</div>
+            <div class="txt">已兑奖</div>
+          </div>
+          <div class="info-item-content-one">
+            <div class="title">奖级:</div>
+            <div class="txt">奖品一</div>
+          </div>
+        </div>
+        <div class="info-item-content">
+          <div class="info-item-content-one">
+            <div class="title">奖品名称:</div>
+            <div class="txt">奖品名称11</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 盲票信息 -->
+    <div class="info">
+      <div class="info-title">盲票信息</div>
+      <div class="info-item">
+        <div class="info-item-content">
+          <div class="info-item-content-one">
+            <div class="title">盲票序列号:</div>
+            <div class="txt">4851555-85-555</div>
+          </div>
+          <div class="info-item-content-one">
+            <div class="title">盲票售价:</div>
+            <div class="txt">{{ 10 }}元</div>
+          </div>
+          <div class="info-item-content-one">
+            <div class="title">支付金额:</div>
+            <div class="txt">{{ 10 }}元</div>
+          </div>
+        </div>
+        <div class="info-item-content">
+          <div class="info-item-content-one">
+            <div class="title">盲票组名称:</div>
+            <div class="txt">盲票名称11</div>
+          </div>
+          <div class="info-item-content-one">
+            <div class="title">盲票类型:</div>
+            <div class="txt">线上盲票</div>
+          </div>
+          <div class="info-item-content-one">
+            <div class="title">佣金系数:</div>
+            <div class="txt">100%</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
 export default {
+  name: "UserTicketDetail",
   data() {
-    return {};
+    return {
+      info: {}
+    };
   },
   methods: {},
 };
 </script>
-<style>
+<style lang="scss" scoped>
+.info {
+  margin-bottom: 10px;
+  &-title {
+    font-size: 14px;
+    margin-bottom: 10px;
+    font-weight: bold;
+  }
+  &-item {
+    padding-left: 50px;
+    &-content {
+      display: flex;
+
+      &-one {
+        display: flex;
+        margin-bottom: 10px;
+
+        .title {
+          width: 100px;
+        }
+
+        .edit-express {
+          color: #409eff;
+          cursor: pointer;
+        }
+
+        .txt {
+          width: 200px;
+        }
+      }
+    }
+  }
+}
+.flex {
+  display: flex;
+  align-items: center;
+  .txt {
+    margin-left: 20px;
+  }
+}
 </style>

+ 298 - 5
src/views/order/userTicket/index.vue

@@ -1,15 +1,308 @@
 <template>
-  <div>
-      <el-button @click="$router.push({ name: 'UserTicketDetail' })">查看</el-button>
+  <div class="app-container">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      :inline="true"
+      v-show="showSearch"
+      label-width="90px"
+    >
+      <el-form-item label="盲票组名称" prop="title">
+        <el-input
+          v-model="queryParams.title"
+          placeholder="请输入盲票组名称"
+          clearable
+          size="small"
+          style="width: 240px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="盲票类型" prop="type">
+        <el-select
+          v-model="queryParams.type"
+          placeholder="请选择盲票类型"
+          style="width: 100%"
+          size="small"
+          filterable
+          clearable
+          @change="handleQuery"
+        >
+          <el-option label="线上盲票" :value="1"></el-option>
+          <el-option label="线下盲票" :value="2"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="盲票序列号" prop="sitoNo">
+        <el-input
+          v-model="queryParams.sitoNo"
+          placeholder="请输入盲票序列号"
+          clearable
+          size="small"
+          style="width: 240px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="用户手机号" prop="tel">
+        <el-input
+          v-model="queryParams.tel"
+          placeholder="请输入用户手机号"
+          clearable
+          size="small"
+          style="width: 240px"
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="下单时间">
+        <el-date-picker
+          v-model="tradeTimeArr"
+          type="datetimerange"
+          size="small"
+          value-format="timestamp"
+          range-separator="至"
+          start-placeholder="时间选择"
+          end-placeholder="时间选择"
+          @change="tardeTime"
+        >
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button
+          type="primary"
+          icon="el-icon-search"
+          size="mini"
+          @click="handleQuery"
+          >搜索</el-button
+        >
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
+          >重置</el-button
+        >
+      </el-form-item>
+    </el-form>
+
+    <!-- 导出、刷新 -->
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="infor"
+          plain
+          icon="el-icon-download"
+          size="small"
+          @click="handleExportDraw"
+          v-hasPermi="['order:deliver:export']"
+          >导出订单</el-button
+        >
+      </el-col>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
+    </el-row>
+    <!-- 订单状态 -->
+    <el-tabs type="card" v-model="state" @tab-click="handleClick">
+      <el-tab-pane label="全部" name="null"></el-tab-pane>
+      <el-tab-pane label="已兑换" name="1"></el-tab-pane>
+      <el-tab-pane label="待兑换" name="0"></el-tab-pane>
+    </el-tabs>
+
+    <!-- 列表 -->
+    <el-table ref="table" v-loading="loading" :data="list">
+      <el-table-column label="订单号" fixed="left" prop="orderId" min-width="80" />
+      <el-table-column label="下单时间" min-width="100">
+        <template slot-scope="{ row }">
+          <div></div>
+        </template>
+      </el-table-column>
+      <el-table-column label="盲票组名称" prop="pkgNum" min-width="95">
+        <template slot-scope="{ row }"> </template>
+      </el-table-column>
+      <el-table-column label="盲票类型" min-width="80">
+        <template slot-scope="{ row }"> </template>
+      </el-table-column>
+      <el-table-column label="盲票序列号" prop="channelName" min-width="95" />
+      <el-table-column label="盲票售价(元)" prop="parentName" min-width="95" />
+      <el-table-column label="支付金额(元)" min-width="95">
+        <template slot-scope="{ row }">
+          <div></div>
+        </template>
+      </el-table-column>
+      <el-table-column label="用户昵称/手机号" min-width="120">
+        <template slot-scope="{ row }">
+          <div></div>
+        </template>
+      </el-table-column>
+      <el-table-column label="兑换状态">
+        <template slot-scope="{ row }">
+          <div></div>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" fixed="right" align="center" width="80">
+        <template slot-scope="{ row }">
+          <div>
+            <el-button
+              v-hasPermi="['order:channel:query']"
+              type="text"
+              @click="$router.push({ name: 'UserTicketDetail' })"
+              >查看</el-button
+            >
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 分页 -->
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="pageParams.pageNum"
+      :limit.sync="pageParams.pageSize"
+      @pagination="getList"
+    />
   </div>
 </template>
 <script>
 export default {
+  name: "UserTicket",
   data() {
-    return {};
+    return {
+      loading: false,
+      showSearch: true,
+      // 筛选
+      queryParams: {
+        title: "",
+        type: "",
+        startTime: "",
+        endTime: "",
+        sitoNo: "",
+        tel: "",
+      },
+      // 分页
+      pageParams: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      // 总条数
+      total: 0,
+      list: [
+        {
+          orderId: 1
+        }
+      ],
+      // 下单时间
+      tradeTimeArr: [],
+      // 订单列表状态
+      state: "null",
+    };
+  },
+  methods: {
+    // 订单列表
+    getList() {
+      this.loading = true;
+      getOrderList(
+        "pageNum=" +
+          this.pageParams.pageNum +
+          "&pageSize=" +
+          this.pageParams.pageSize +
+          "&",
+        this.queryParams
+      )
+        .then((res) => {
+          this.loading = false;
+          if (res.code == 0) {
+            res.rows.forEach((item) => {
+              let items = item.items;
+              items.forEach((item) => {
+                let picUrlArr = item.picUrl.split(",");
+                item.picUrl = publicFileGetUrl + picUrlArr[0];
+              });
+              item.status = JSON.parse(item.status);
+            });
+            this.total = res.total;
+            this.list = res.rows;
+          }
+        })
+        .catch(() => {
+          this.loading = false;
+        });
+    },
+
+    //搜索
+    handleQuery() {
+      this.siteList = this.siteCopyList;
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+
+    // 重置
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.state = "null";
+      this.tradeTimeArr = [];
+      // this.getList();
+    },
+
+    // 选择下单时间
+    tardeTime(e) {
+      if (e) {
+        this.queryParams.startTime = e[0];
+        this.queryParams.endTime = e[1];
+        this.handleQuery();
+      } else {
+        this.queryParams.startTime = "";
+        this.queryParams.endTime = "";
+        this.handleQuery();
+      }
+    },
+
+    // 订单切换
+    handleClick(e) {
+      this.queryParams.status = Number(e.name);
+      this.getList();
+    },
+
+    // 查看详情
+    getDetail(row) {
+      this.$router.push({ name: "ChannelDetail", query: { id: row.orderId } });
+    },
+
+    // 点击发货
+    toGoods(row) {
+      this.goodsShow = true;
+      this.goodsInfo = row;
+      this.getBoxList(row);
+    },
+
+    // 关闭发货弹框
+    close() {
+      this.getList();
+    },
+
+    // 导出订单
+    handleExportDraw() {
+      this.$confirm("是否确认导出订单?", "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.vloading = this.$loading({
+            lock: true,
+            text: "正在导出订单.....",
+            background: "rgba(0, 0, 0, 0.7)",
+          });
+          return channelOrderExport(this.queryParams);
+        })
+        .then((response) => {
+          this.vloading.close();
+          this.download(response.msg);
+        })
+        .catch(() => {
+          this.vloading.close();
+        });
+    },
   },
-  methods: {},
 };
 </script>
-<style>
+<style lang="scss" scoped>
+::v-deep .el-tabs--border-card > .el-tabs__content {
+  padding: 0;
+}
 </style>