秒杀增加card,满额详情不展示操作列

master
2023-04-23 10:23:32 +08:00
parent 87b3cbe344
commit 9181befdf9
3 changed files with 130 additions and 303 deletions

View File

@ -6,12 +6,7 @@
<div class="promotion-decorate">限时秒杀</div> <div class="promotion-decorate">限时秒杀</div>
<ul class="time-line"> <ul class="time-line">
<template v-for="(time, index) in list"> <template v-for="(time, index) in list">
<li <li v-if="index < 5" @click="currIndex = index" :key="index" :class="{ currTimeline: currIndex === index }">
v-if="index < 5"
@click="currIndex = index"
:key="index"
:class="{ currTimeline: currIndex === index }"
>
<div>{{ time.timeLine + ":00" }}</div> <div>{{ time.timeLine + ":00" }}</div>
<div v-if="currIndex === index"> <div v-if="currIndex === index">
<p>{{ nowHour >= time.timeLine ? "秒杀中" : "即将开始" }}</p> <p>{{ nowHour >= time.timeLine ? "秒杀中" : "即将开始" }}</p>
@ -30,13 +25,8 @@
<!-- 秒杀商品列表 --> <!-- 秒杀商品列表 -->
<div class="goods-list"> <div class="goods-list">
<empty v-if="goodsList.length === 0" /> <empty v-if="goodsList.length === 0" />
<div <div v-else class="goods-show-info1" v-for="(item, index) in goodsList" :key="index"
v-else @click="goGoodsDetail(item.skuId, item.goodsId)">
class="goods-show-info1"
v-for="(item, index) in goodsList"
:key="index"
@click="goGoodsDetail(item.skuId, item.goodsId)"
>
<div class="goods-show-img"> <div class="goods-show-img">
<img width="200" height="200" :src="item.goodsImage" /> <img width="200" height="200" :src="item.goodsImage" />
</div> </div>
@ -53,42 +43,28 @@
<div class="goods-show-detail"> <div class="goods-show-detail">
<span>{{ item.goodsName }}</span> <span>{{ item.goodsName }}</span>
</div> </div>
<div <div class="goods-seckill-btn" :class="{
class="goods-seckill-btn"
:class="{
'goods-seckill-btn-gray': nowHour < list[currIndex].timeLine, 'goods-seckill-btn-gray': nowHour < list[currIndex].timeLine,
}" }">
>
{{ nowHour >= list[currIndex].timeLine ? "立即抢购" : "即将开始" }} {{ nowHour >= list[currIndex].timeLine ? "立即抢购" : "即将开始" }}
</div> </div>
<div <div v-if="nowHour >= list[currIndex].timeLine && item.quantity <= item.salesNum"
v-if="nowHour >= list[currIndex].timeLine && item.quantity <= item.salesNum" class="goods-seckill-btn goods-seckill-btn-gray">
class="goods-seckill-btn goods-seckill-btn-gray"
>
已售罄 已售罄
</div> </div>
<div v-if="nowHour >= list[currIndex].timeLine" class="goods-show-num1"> <div v-if="nowHour >= list[currIndex].timeLine" class="goods-show-num1">
<span <span>已售{{
>已售{{
(item.quantity && item.quantity > 0 (item.quantity && item.quantity > 0
? Math.ceil( ? Math.ceil(
(item.salesNum / (item.quantity + item.salesNum)) * 100 (item.salesNum / (item.quantity + item.salesNum)) * 100
) )
: 100) + "%" : 100) + "%"
}}</span }}</span><Progress hide-info stroke-color="#df0021" style="width: 110px" class="ml_10" :percent="item.quantity && item.quantity > 0
><Progress
hide-info
stroke-color="#df0021"
style="width: 110px"
class="ml_10"
:percent="
item.quantity && item.quantity > 0
? Math.ceil( ? Math.ceil(
(item.salesNum / (item.quantity + item.salesNum)) * 100 (item.salesNum / (item.quantity + item.salesNum)) * 100
) )
: 100 : 100
" " />
/>
</div> </div>
<div class="goods-show-seller"> <div class="goods-show-seller">
<span>{{ item.storeName }}</span> <span>{{ item.storeName }}</span>
@ -198,6 +174,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "../../assets/styles/goodsList.scss"; @import "../../assets/styles/goodsList.scss";
.goods-seckill-btn { .goods-seckill-btn {
position: absolute; position: absolute;
right: 0; right: 0;
@ -212,19 +189,23 @@ export default {
margin-bottom: 1px; margin-bottom: 1px;
margin-right: 1px; margin-right: 1px;
} }
.goods-seckill-btn-gray { .goods-seckill-btn-gray {
background-color: #666; background-color: #666;
} }
.promotion-decorate::before, .promotion-decorate::before,
.promotion-decorate::after { .promotion-decorate::after {
background-image: url("/src/assets/images/sprite@2x.png"); background-image: url("/src/assets/images/sprite@2x.png");
} }
.time-line { .time-line {
width: 1200px; width: 1200px;
height: 60px; height: 60px;
margin: 0 auto; margin: 0 auto;
background-color: #fff; background-color: #fff;
display: flex; display: flex;
li { li {
padding: 0 30px; padding: 0 30px;
font-size: 16px; font-size: 16px;
@ -233,9 +214,11 @@ export default {
height: 100%; height: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
&:hover { &:hover {
cursor: pointer; cursor: pointer;
} }
.not-curr { .not-curr {
border: 1px solid #999; border: 1px solid #999;
border-radius: 20px; border-radius: 20px;
@ -245,18 +228,22 @@ export default {
font-weight: normal; font-weight: normal;
} }
} }
.currTimeline { .currTimeline {
background-color: $theme_color; background-color: $theme_color;
color: #fff; color: #fff;
>div:nth-child(1) { >div:nth-child(1) {
font-size: 20px; font-size: 20px;
} }
>div:nth-child(2) { >div:nth-child(2) {
font-size: 14px; font-size: 14px;
margin-left: 10px; margin-left: 10px;
} }
} }
} }
.goods-show-info1 { .goods-show-info1 {
width: 290px; width: 290px;
padding: 6px; padding: 6px;
@ -267,14 +254,17 @@ export default {
cursor: pointer; cursor: pointer;
background-color: #fff; background-color: #fff;
} }
.goods-show-info1:hover { .goods-show-info1:hover {
border: 1px solid #ccc; border: 1px solid #ccc;
box-shadow: 0px 0px 15px #ccc; box-shadow: 0px 0px 15px #ccc;
} }
.goods-show-img { .goods-show-img {
display: flex; display: flex;
justify-content: center; justify-content: center;
} }
.ivu-progress-success .ivu-progress-bg { .ivu-progress-success .ivu-progress-bg {
background-color: #111fff; background-color: #111fff;
} }

View File

@ -6,251 +6,101 @@
<h4>基本信息</h4> <h4>基本信息</h4>
<div class="form-item-view"> <div class="form-item-view">
<FormItem label="活动名称" prop="promotionName"> <FormItem label="活动名称" prop="promotionName">
<Input <Input type="text" v-model="form.promotionName" :disabled="form.promotionStatus != 'NEW'" placeholder="活动名称"
type="text" clearable style="width: 280px" />
v-model="form.promotionName"
:disabled="form.promotionStatus != 'NEW'"
placeholder="活动名称"
clearable
style="width: 280px"
/>
</FormItem> </FormItem>
<FormItem label="活动时间" prop="rangeTime"> <FormItem label="活动时间" prop="rangeTime">
<DatePicker <DatePicker type="datetimerange" v-model="form.rangeTime" :disabled="form.promotionStatus != 'NEW'"
type="datetimerange" format="yyyy-MM-dd HH:mm:ss" placeholder="请选择" :options="options" style="width: 280px">
v-model="form.rangeTime"
:disabled="form.promotionStatus != 'NEW'"
format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择"
:options="options"
style="width: 280px"
>
</DatePicker> </DatePicker>
</FormItem> </FormItem>
<FormItem label="活动描述" prop="description"> <FormItem label="活动描述" prop="description">
<Input <Input v-model="form.description" :disabled="form.promotionStatus != 'NEW'" type="textarea" :rows="4"
v-model="form.description" clearable style="width: 280px" />
:disabled="form.promotionStatus != 'NEW'"
type="textarea"
:rows="4"
clearable
style="width: 280px"
/>
</FormItem> </FormItem>
</div> </div>
<h4>优惠设置</h4> <h4>优惠设置</h4>
<div class="form-item-view"> <div class="form-item-view">
<FormItem label="优惠门槛" prop="fullMoney"> <FormItem label="优惠门槛" prop="fullMoney">
<Input <Input type="text" v-model="form.fullMoney" :disabled="form.promotionStatus != 'NEW'" placeholder="优惠门槛"
type="text" clearable style="width: 280px" />
v-model="form.fullMoney"
:disabled="form.promotionStatus != 'NEW'"
placeholder="优惠门槛"
clearable
style="width: 280px"
/>
<span class="describe">消费达到当前金额可以参与优惠</span> <span class="describe">消费达到当前金额可以参与优惠</span>
</FormItem> </FormItem>
<FormItem label="优惠方式"> <FormItem label="优惠方式">
<RadioGroup <RadioGroup type="button" button-style="solid" v-model="form.discountType">
type="button" <Radio :disabled="form.promotionStatus != 'NEW'" label="fullMinusFlag">减现金</Radio>
button-style="solid" <Radio :disabled="form.promotionStatus != 'NEW'" label="fullRateFlag">打折</Radio>
v-model="form.discountType"
>
<Radio
:disabled="form.promotionStatus != 'NEW'"
label="fullMinusFlag"
>减现金</Radio
>
<Radio
:disabled="form.promotionStatus != 'NEW'"
label="fullRateFlag"
>打折</Radio
>
</RadioGroup> </RadioGroup>
</FormItem> </FormItem>
<FormItem <FormItem v-if="form.discountType == 'fullMinusFlag'" label="优惠金额" prop="fullMinus">
v-if="form.discountType == 'fullMinusFlag'" <Input :disabled="form.promotionStatus != 'NEW'" type="text" v-model="form.fullMinus" placeholder="优惠金额"
label="优惠金额" clearable style="width: 280px" />
prop="fullMinus"
>
<Input
:disabled="form.promotionStatus != 'NEW'"
type="text"
v-model="form.fullMinus"
placeholder="优惠金额"
clearable
style="width: 280px"
/>
</FormItem> </FormItem>
<FormItem <FormItem v-if="form.discountType == 'fullRateFlag'" label="优惠折扣" prop="fullRate">
v-if="form.discountType == 'fullRateFlag'" <Input :disabled="form.promotionStatus != 'NEW'" type="text" v-model="form.fullRate" placeholder="优惠折扣"
label="优惠折扣" clearable style="width: 280px" />
prop="fullRate"
>
<Input
:disabled="form.promotionStatus != 'NEW'"
type="text"
v-model="form.fullRate"
placeholder="优惠折扣"
clearable
style="width: 280px"
/>
<span class="describe">优惠折扣为0-10之间数字可有一位小数</span> <span class="describe">优惠折扣为0-10之间数字可有一位小数</span>
</FormItem> </FormItem>
<FormItem label="额外赠送"> <FormItem label="额外赠送">
<Checkbox <Checkbox :disabled="form.promotionStatus != 'NEW'" v-model="form.freeFreightFlag"></Checkbox>
:disabled="form.promotionStatus != 'NEW'" <Checkbox :disabled="form.promotionStatus != 'NEW'" v-model="form.couponFlag"></Checkbox>
v-model="form.freeFreightFlag" <Checkbox :disabled="form.promotionStatus != 'NEW'" v-model="form.giftFlag"></Checkbox>
>免邮费</Checkbox <Checkbox :disabled="form.promotionStatus != 'NEW'" v-if="Cookies.get('userInfoSeller') &&
>
<Checkbox
:disabled="form.promotionStatus != 'NEW'"
v-model="form.couponFlag"
>送优惠券</Checkbox
>
<Checkbox
:disabled="form.promotionStatus != 'NEW'"
v-model="form.giftFlag"
>送赠品</Checkbox
>
<Checkbox
:disabled="form.promotionStatus != 'NEW'"
v-if="
Cookies.get('userInfoSeller') &&
JSON.parse(Cookies.get('userInfoSeller')).selfOperated JSON.parse(Cookies.get('userInfoSeller')).selfOperated
" " v-model="form.pointFlag">送积分</Checkbox>
v-model="form.pointFlag"
>送积分</Checkbox
>
</FormItem> </FormItem>
<FormItem v-if="form.couponFlag" label="赠送优惠券" prop="couponId"> <FormItem v-if="form.couponFlag" label="赠送优惠券" prop="couponId">
<Select <Select v-model="form.couponId" :disabled="form.promotionStatus != 'NEW'" filterable
v-model="form.couponId" :remote-method="getCouponList" placeholder="输入优惠券名称搜索" :loading="couponLoading" style="width: 280px">
:disabled="form.promotionStatus != 'NEW'" <Option v-for="item in couponList" :value="item.id" :key="item.id">{{ item.couponName }}</Option>
filterable
:remote-method="getCouponList"
placeholder="输入优惠券名称搜索"
:loading="couponLoading"
style="width: 280px"
>
<Option
v-for="item in couponList"
:value="item.id"
:key="item.id"
>{{ item.couponName }}</Option
>
</Select> </Select>
</FormItem> </FormItem>
<FormItem v-if="form.giftFlag" label="赠品" prop="giftId"> <FormItem v-if="form.giftFlag" label="赠品" prop="giftId">
<Select <Select :disabled="form.promotionStatus != 'NEW'" v-model="form.giftId" filterable
:disabled="form.promotionStatus != 'NEW'" :remote-method="getGiftList" placeholder="输入赠品名称搜索" :loading="giftLoading" style="width: 280px">
v-model="form.giftId" <Option v-for="item in giftList" :value="item.id" :key="item.id">
filterable
:remote-method="getGiftList"
placeholder="输入赠品名称搜索"
:loading="giftLoading"
style="width: 280px"
>
<Option
v-for="item in giftList"
:value="item.id"
:key="item.id"
>
{{ item.goodsName }} {{ item.goodsName }}
</Option </Option>
>
</Select> </Select>
</FormItem> </FormItem>
<FormItem v-if="form.pointFlag" label="赠积分" prop="point"> <FormItem v-if="form.pointFlag" label="赠积分" prop="point">
<InputNumber <InputNumber :min="0" :disabled="form.promotionStatus != 'NEW'" v-model="form.point" type="number"
:min="0" style="width: 280px" />
:disabled="form.promotionStatus != 'NEW'"
v-model="form.point"
type="number"
style="width: 280px"
/>
</FormItem> </FormItem>
<FormItem label="使用范围" prop="scopeType"> <FormItem label="使用范围" prop="scopeType">
<RadioGroup <RadioGroup type="button" button-style="solid" v-model="form.scopeType">
type="button" <Radio :disabled="form.promotionStatus != 'NEW'" label="ALL">全品类</Radio>
button-style="solid" <Radio :disabled="form.promotionStatus != 'NEW'" label="PORTION_GOODS">指定商品</Radio>
v-model="form.scopeType"
>
<Radio :disabled="form.promotionStatus != 'NEW'" label="ALL"
>全品类</Radio
>
<Radio
:disabled="form.promotionStatus != 'NEW'"
label="PORTION_GOODS"
>指定商品</Radio
>
</RadioGroup> </RadioGroup>
</FormItem> </FormItem>
<FormItem <FormItem style="width: 100%" v-if="form.scopeType == 'PORTION_GOODS'">
style="width: 100%" <div style="display: flex; margin-bottom: 10px" v-if="form.promotionStatus == 'NEW'">
v-if="form.scopeType == 'PORTION_GOODS'"
>
<div
style="display: flex; margin-bottom: 10px"
v-if="form.promotionStatus == 'NEW'"
>
<Button type="primary" @click="openSkuList"></Button> <Button type="primary" @click="openSkuList"></Button>
<Button <Button type="error" ghost style="margin-left: 10px" @click="delSelectGoods"></Button>
type="error"
ghost
style="margin-left: 10px"
@click="delSelectGoods"
>批量删除</Button
>
</div> </div>
<Table <Table border :columns="columns" :data="form.promotionGoodsList" @on-selection-change="changeSelect">
border
:columns="columns"
:data="form.promotionGoodsList"
@on-selection-change="changeSelect"
>
<template slot-scope="{ row }" slot="QRCode"> <template slot-scope="{ row }" slot="QRCode">
<img <img :src="row.QRCode || '../../../assets/lili.png'" width="50px" height="50px" alt="" />
:src="row.QRCode || '../../../assets/lili.png'"
width="50px"
height="50px"
alt=""
/>
</template> </template>
<template slot-scope="{ index }" slot="action"> <template slot-scope="{ index }" slot="action">
<Button <Button type="error" :disabled="form.promotionStatus != 'NEW' && !!id" size="small" ghost
type="error" @click="delGoods(index)">删除</Button>
:disabled="form.promotionStatus != 'NEW' && !!id"
size="small"
ghost
@click="delGoods(index)"
>删除</Button
>
</template> </template>
</Table> </Table>
</FormItem> </FormItem>
<div> <div>
<Button type="text" @click="closeCurrentPage"></Button> <Button type="text" @click="closeCurrentPage"></Button>
<Button <Button type="primary" :disabled="form.promotionStatus != 'NEW' && !!id" :loading="submitLoading"
type="primary" @click="handleSubmit">提交</Button>
:disabled="form.promotionStatus != 'NEW' && !!id"
:loading="submitLoading"
@click="handleSubmit"
>提交</Button
>
</div> </div>
</div> </div>
</div> </div>
</Form> </Form>
</Card> </Card>
<sku-select <sku-select ref="skuSelect" @selectedGoodsData="selectedGoodsData"></sku-select>
ref="skuSelect"
@selectedGoodsData="selectedGoodsData"
></sku-select>
</div> </div>
</template> </template>
@ -378,6 +228,8 @@ export default {
async mounted () { async mounted () {
if (this.id) { if (this.id) {
this.getDetail(); this.getDetail();
this.columns.shift()
this.columns.pop()
} }
await this.getCouponList(); await this.getCouponList();
await this.getGiftList(); await this.getGiftList();
@ -583,11 +435,13 @@ h4 {
line-height: 40px; line-height: 40px;
text-align: left; text-align: left;
} }
.describe { .describe {
font-size: 12px; font-size: 12px;
margin-left: 10px; margin-left: 10px;
color: #999; color: #999;
} }
.ivu-form-item { .ivu-form-item {
margin-bottom: 24px !important; margin-bottom: 24px !important;
} }

View File

@ -14,20 +14,14 @@
</Select> </Select>
</Form-item> </Form-item>
<Form-item label="活动时间"> <Form-item label="活动时间">
<DatePicker v-model="selectDate" type="daterange" clearable placeholder="选择起始时间" style="width: 200px"></DatePicker> <DatePicker v-model="selectDate" type="daterange" clearable placeholder="选择起始时间" style="width: 200px">
</DatePicker>
</Form-item> </Form-item>
<Button @click="handleSearch" type="primary" class="search-btn">搜索</Button> <Button @click="handleSearch" type="primary" class="search-btn">搜索</Button>
<Button @click="handleReset" class="ml_10">重置</Button> <Button @click="handleReset" class="ml_10">重置</Button>
</Form> </Form>
<Table <Table :loading="loading" border :columns="columns" :data="data" ref="table" class="mt_10">
:loading="loading"
border
:columns="columns"
:data="data"
ref="table"
class="mt_10"
>
<template slot-scope="{ row }" slot="applyEndTime"> <template slot-scope="{ row }" slot="applyEndTime">
{{ unixDate(row.applyEndTime) }} {{ unixDate(row.applyEndTime) }}
</template> </template>
@ -37,25 +31,14 @@
}}</Tag> }}</Tag>
</template> </template>
<template slot-scope="{ row }" slot="action"> <template slot-scope="{ row }" slot="action">
<Button <Button v-if="row.promotionStatus === 'NEW'" type="primary" size="small" @click="manage(row)"></Button>
v-if="row.promotionStatus === 'NEW'" <Button v-else type="info" size="small" @click="manage(row)"></Button>
type="primary"
size="small"
@click="manage(row)"
>管理</Button
>
<Button
v-else
type="info"
size="small"
@click="manage(row)"
>查看</Button
>
</template> </template>
</Table> </Table>
<Row type="flex" justify="end" class="mt_10"> <Row type="flex" justify="end" class="mt_10">
<Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]" <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage"
size="small" show-total show-elevator show-sizer></Page> @on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]" size="small" show-total show-elevator
show-sizer></Page>
</Row> </Row>
</Card> </Card>
</div> </div>
@ -215,5 +198,5 @@ export default {
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "@/styles/table-common.scss";
</style> </style>