464 行
14 KiB
HTML
464 行
14 KiB
HTML
<link rel="stylesheet" href="__CDN__/assets/addons/shopro/libs/element/element.css">
|
|
<style>
|
|
#groupon-index {
|
|
background: #fff;
|
|
padding: 0 20px 30px;
|
|
font-size: 14px;
|
|
font-family: Source Han Sans SC;
|
|
font-weight: 500;
|
|
color: #666;
|
|
}
|
|
|
|
label {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.display-flex {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.cursor-pointer {
|
|
cursor: pointer;
|
|
color: #7536d0;
|
|
}
|
|
|
|
.groupon-title {
|
|
height: 50px;
|
|
justify-content: space-between;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.groupon-titles {
|
|
font-weight: 600;
|
|
color: #444;
|
|
}
|
|
|
|
.groupon-search {
|
|
width: 236px;
|
|
}
|
|
|
|
.select-con {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.select-item {
|
|
margin-right: 14px;
|
|
}
|
|
|
|
.el-input {
|
|
width: 236px;
|
|
}
|
|
|
|
.el-select .el-input__inner {
|
|
width: 152px;
|
|
}
|
|
|
|
.el-radio-button__orig-radio:checked+.el-radio-button__inner {
|
|
background-color: #7536d0;
|
|
border-color: #7536d0;
|
|
-webkit-box-shadow: -1px 0 0 0 #7536d0;
|
|
box-shadow: -1px 0 0 0 #7536d0;
|
|
}
|
|
|
|
.el-radio-button__inner:hover {
|
|
color: #666;
|
|
}
|
|
|
|
/* table */
|
|
|
|
.el-table,
|
|
.el-table thead {
|
|
color: #444;
|
|
}
|
|
|
|
.el-table,
|
|
.el-table thead .cell {
|
|
font-weight: 500;
|
|
|
|
}
|
|
|
|
.el-table th {
|
|
background: #F9F9F9;
|
|
padding: 5px 0;
|
|
}
|
|
|
|
.el-table th {
|
|
border-right: none;
|
|
}
|
|
|
|
.el-table_1_column_8.is-leaf,
|
|
.el-table_1_column_8,
|
|
.el-table_2_column_12.is-leaf,
|
|
.el-table_2_column_12,
|
|
.el-table_3_column_17.is-leaf,
|
|
.el-table_3_column_17 {
|
|
border-right: 1px solid #EBEEF5 !important;
|
|
}
|
|
|
|
.cell {
|
|
text-align: center;
|
|
}
|
|
|
|
.el-select .el-input {
|
|
width: 152px;
|
|
}
|
|
|
|
.team-img {
|
|
width: 30px;
|
|
height: 30px;
|
|
margin-right: 14px;
|
|
}
|
|
|
|
.goods-title {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
width: 294px;
|
|
text-align: left;
|
|
}
|
|
|
|
.teamer-avatar {
|
|
width: 34px;
|
|
height: 34px;
|
|
border-radius: 50%;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.teamer-avatar-num {
|
|
width: 34px;
|
|
height: 34px;
|
|
background: #A17BDF;
|
|
border-radius: 50%;
|
|
font-size: 14px;
|
|
line-height: 34px;
|
|
text-align: center;
|
|
color: #fff;
|
|
}
|
|
|
|
.el-pager li.active,
|
|
.el-pager li:hover {
|
|
color: #7536d0;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#groupon-detail {
|
|
font-size: 14px;
|
|
font-family: Source Han Sans SC;
|
|
color: #444;
|
|
}
|
|
|
|
.groupon-good {
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.good-item {
|
|
display: flex;
|
|
}
|
|
|
|
.good-item-img {
|
|
width: 50px;
|
|
height: 50px;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.goods-title-ellipsis {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
width: 320px;
|
|
}
|
|
|
|
.good-num {
|
|
color: #999;
|
|
text-align: left;
|
|
}
|
|
|
|
.team-img {
|
|
width: 36px;
|
|
height: 36px;
|
|
border-radius: 50%;
|
|
position: relative;
|
|
}
|
|
|
|
.refresh-btn {
|
|
font-size: 14px;
|
|
color: #999;
|
|
position: absolute;
|
|
left: 86px;
|
|
top: 22px;
|
|
}
|
|
|
|
.btn-box {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
}
|
|
|
|
.teamed-btn {
|
|
width: 110px;
|
|
height: 30px;
|
|
border: 1px solid #7943D2;
|
|
border-radius: 4px;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
color: #7943D2;
|
|
margin-right: 30px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.dismiss-btn {
|
|
width: 100px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
border: 1px solid #F57272;
|
|
border-radius: 4px;
|
|
color: #F57272;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.fictitious-define {
|
|
color: #7943D2;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.fictitious-cancel {
|
|
color: #F57272;
|
|
margin-left: 10px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.el-table th {
|
|
background: #F9F9F9;
|
|
padding: 5px 0;
|
|
}
|
|
|
|
.dialogDetail .el-table td {
|
|
border-right: none
|
|
}
|
|
|
|
.dialogDetail .el-dialog {
|
|
width: 800px;
|
|
}
|
|
|
|
/* el-dialog */
|
|
|
|
.el-radio-button__inner {
|
|
font-size: 12px;
|
|
padding: 9px 20px;
|
|
;
|
|
}
|
|
|
|
.el-input__inner {
|
|
font-size: 12px;
|
|
height: 32px;
|
|
line-height: 32px;
|
|
}
|
|
|
|
.el-input__icon {
|
|
line-height: 32px;
|
|
}
|
|
|
|
.margin-right-5 {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.el-dialog__title {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.el-dialog .el-input__inner {
|
|
height: 34px;
|
|
line-height: 34px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.el-form-item__label,
|
|
.el-radio__label,
|
|
.el-form-item__content,
|
|
.el-select-dropdown__item,
|
|
.el-table,
|
|
.el-dialog__body {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.el-form-item {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.el-table__fixed-right::before,
|
|
.el-table__fixed::before {
|
|
height: 0 !important;
|
|
}
|
|
|
|
.page-container {
|
|
justify-content: flex-end;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
[v-cloak] {
|
|
display: none;
|
|
}
|
|
</style>
|
|
<script src="__CDN__/assets/addons/shopro/libs/vue.js"></script>
|
|
<script src="__CDN__/assets/addons/shopro/libs/element/element.js"></script>
|
|
<script src="__CDN__/assets/addons/shopro/libs/moment.js"></script>
|
|
<div id="groupon-index" v-cloak>
|
|
<div class="groupon-title display-flex">
|
|
<div class="groupon-titles">拼团列表</div>
|
|
<div class="groupon-search">
|
|
<el-input placeholder="请输入关键字" suffix-icon="el-icon-search" v-model="searchKey"
|
|
@keyup.enter.native="callSearch(event)">
|
|
</el-input>
|
|
</div>
|
|
</div>
|
|
<div class="groupon-con">
|
|
<div class="select-con">
|
|
<div class="display-flex">
|
|
<el-select class="select-item" v-model="grouponName" placeholder="请选择" @change="selectChange">
|
|
<el-option v-for="item in grouponOptions" :key="item.value" :label="item.label" :value="item.value">
|
|
</el-option>
|
|
</el-select>
|
|
<el-radio-group v-model="statusType">
|
|
<el-radio-button label="all">全部</el-radio-button>
|
|
<el-radio-button label="ing">拼团中</el-radio-button>
|
|
<el-radio-button label="finish">已成团</el-radio-button>
|
|
<el-radio-button label="invalid">解散&退款</el-radio-button>
|
|
</el-radio-group>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<el-table :data="grouponData" border style="width: 100%" ref="grouponData">
|
|
<el-table-column prop="id" label="ID" width="80">
|
|
</el-table-column>
|
|
<el-table-column label="拼团商品信息" width="400">
|
|
<template slot-scope="scope">
|
|
<div class="display-flex">
|
|
<img class="team-img" :src="Fast.api.cdnurl(scope.row.goods_image)">
|
|
<div class="goods-title">{{scope.row.goods_title}}</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="createtime" label="开团时间" width="180">
|
|
<template slot-scope="scope">
|
|
<span>{{moment(scope.row.createtime*1000).format("YYYY-MM-DD HH:mm:ss")}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="user_nickname" label="团长" width="120">
|
|
<template slot-scope="scope">
|
|
<span>{{scope.row.user_nickname}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="user_avatar" label="参团人" width="420">
|
|
<template slot-scope="scope">
|
|
<div class="display-flex" style="justify-content: center;">
|
|
<img v-for="i in scope.row.arr" class="teamer-avatar" :src="Fast.api.cdnurl(i.user_avatar)">
|
|
<!-- <div v-if="scope.row.arr" class="teamer-avatar-num">10</div> -->
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="countDown" label="组团有效时间" width="180">
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.status=='ing'" style="color: #FF4732;">{{scope.row.countDown}}</span>
|
|
<span v-else>-</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="status_text" label="拼团状态" width="115">
|
|
</el-table-column>
|
|
<el-table-column prop="name" label="操作" min-width="100" fixed="right">
|
|
<template slot-scope="scope">
|
|
<span class="cursor-pointer" @click="goDetail(scope.row.id,scope.row)">查看详情</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
</div>
|
|
<div class="page-container display-flex">
|
|
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
|
|
:page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper"
|
|
:total="totalPage">
|
|
</el-pagination>
|
|
</div>
|
|
<div class="dialogDetail">
|
|
<el-dialog title="拼团详情" :visible.sync="dialogTeamDetail" width="800" :before-close="handleTeamDetailClose">
|
|
<div>
|
|
<div class="groupon-good">
|
|
<el-table :data="grouponGoodsData" style="width: 100%" border>
|
|
<el-table-column label="拼团商品">
|
|
<template slot-scope="scope">
|
|
<div class="good-item">
|
|
<img class="good-item-img" :src="Fast.api.cdnurl(scope.row.goods_image)">
|
|
<div>
|
|
<div class="goods-title-ellipsis">{{scope.row.goods_title}}</div>
|
|
<div class="good-num">数量：{{scope.row.current_num}}</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="createtime" label="开团时间" width="160">
|
|
<template slot-scope="scope">
|
|
<span>{{moment(scope.row.createtime*1000).format("YYYY-MM-DD HH:mm:ss")}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="num" label="成团人数" width="88">
|
|
</el-table-column>
|
|
<el-table-column prop="status_text" label="状态" width="86">
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="groupon-team">
|
|
<el-table :data="grouponTeamList" style="width: 100%" border>
|
|
<el-table-column prop="is_leader" label="身份" width="100">
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.is_leader">团长</span>
|
|
<span v-if="!scope.row.is_leader">团员</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="avatar" label="头像" width="110">
|
|
<template slot-scope="scope">
|
|
<img class="team-img" v-if="scope.row.user_avatar"
|
|
:src="Fast.api.cdnurl(scope.row.user_avatar)">
|
|
<i v-if="scope.row.is_define" class="el-icon-refresh refresh-btn"
|
|
@click="refreshTeamer(scope.$index)"></i>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="user_nickname" label="昵称" width="218">
|
|
</el-table-column>
|
|
<el-table-column prop="createtime" label="参团时间">
|
|
<template slot-scope="scope">
|
|
<span>{{moment(scope.row.createtime*1000).format("YYYY-MM-DD HH:mm:ss")}}</span>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="100">
|
|
<template slot-scope="scope">
|
|
<span v-if="scope.row.is_define" class="fictitious-define"
|
|
@click="defineTeamer(scope.$index,scope.row)">确定</span>
|
|
<span v-if="scope.row.is_define" class="fictitious-cancel"
|
|
@click="cancelTeamer(scope.$index)">取消</span>
|
|
<span v-if="!scope.row.is_define && scope.row.is_fictitious">虚拟</span>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<div class="btn-box"
|
|
v-if="(grouponGoodsData[0]?grouponGoodsData[0].num:null) > is_define_grouponTeamListLeng && (grouponGoodsData[0]?grouponGoodsData[0].status:null)=='ing'">
|
|
<div class="teamed-btn" @click="refreshTeamer(null)">添加虚拟人数</div>
|
|
<div class="dismiss-btn" @click="dismissTeam">解散&拼团</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- <span slot="footer" class="dialog-footer">
|
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
|
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
|
|
</span> -->
|
|
</el-dialog>
|
|
</div>
|
|
</div> |