zhuce
/
lilishop-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

master
程 2023-04-23 10:23:32 +08:00
parent 87b3cbe344
commit 9181befdf9
3 changed files with 130 additions and 303 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
buyer/src/pages/promotion/seckill.vue
View File

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

242
seller/src/views/promotion/full-discount/full-discount-add.vue
View File

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

35
seller/src/views/promotion/seckill/seckill.vue
View File

@ -14,20 +14,14 @@
</Select>
</Form-item>
<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>
<Button @click="handleSearch" type="primary" class="search-btn">搜索</Button>
<Button @click="handleReset" class="ml_10">重置</Button>
</Form>
<Table
:loading="loading"
border
:columns="columns"
:data="data"
ref="table"
class="mt_10"
>
<Table :loading="loading" border :columns="columns" :data="data" ref="table" class="mt_10">
<template slot-scope="{ row }" slot="applyEndTime">
{{ unixDate(row.applyEndTime) }}
</template>
@ -37,25 +31,14 @@
}}</Tag>
</template>
<template slot-scope="{ row }" slot="action">
<Button
v-if="row.promotionStatus === 'NEW'"
type="primary"
size="small"
@click="manage(row)"
>管理</Button
>
<Button
v-else
type="info"
size="small"
@click="manage(row)"
>查看</Button
>
<Button v-if="row.promotionStatus === 'NEW'" type="primary" size="small" @click="manage(row)">管理</Button>
<Button v-else type="info" size="small" @click="manage(row)">查看</Button>
</template>
</Table>
<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]"
size="small" show-total show-elevator show-sizer></Page>
<Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage"
@on-page-size-change="changePageSize" :page-size-opts="[10, 20, 50]" size="small" show-total show-elevator
show-sizer></Page>
</Row>
</Card>
</div>
@ -215,5 +198,5 @@ export default {
};
</script>
<style lang="scss" scoped>
@import "@/styles/table-common.scss";
</style>