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

102
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="{
'goods-seckill-btn-gray': nowHour < list[currIndex].timeLine,
}"
>
<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
>已售{{
(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
? Math.ceil(
(item.salesNum / (item.quantity + item.salesNum)) * 100
)
: 100
"
/>
<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
? Math.ceil(
(item.salesNum / (item.quantity + item.salesNum)) * 100
)
: 100
" />
</div>
<div class="goods-show-seller">
<span>{{ item.storeName }}</span>
@ -101,7 +77,7 @@
<script>
import { seckillByDay } from "@/api/promotion";
export default {
data() {
data () {
return {
list: [], // 秒杀时段列表
goodsList: [], // 商品列表
@ -112,19 +88,19 @@ export default {
nowHour: new Date().getHours(), // 当前小时数
};
},
beforeDestroy() {
beforeDestroy () {
// 销毁前清除定时器
clearInterval(this.interval);
},
watch: {
currIndex(val) {
currIndex (val) {
clearInterval(this.interval);
this.interval = null;
this.nowHour = new Date().getHours();
this.countDown(val);
this.goodsList = this.list[val].seckillGoodsList;
},
diffSeconds(val) {
diffSeconds (val) {
const hours = Math.floor(val / 3600);
// 当前秒数 / 60，向下取整
// 获取到所有分钟数 3600 / 60 = 60分钟
@ -138,7 +114,7 @@ export default {
clearInterval(this.interval);
this.interval = null;
}
function filteTime(time) {
function filteTime (time) {
if (time < 10) {
return "0" + time;
} else {
@ -148,7 +124,7 @@ export default {
},
},
methods: {
getListByDay() {
getListByDay () {
// 当天秒杀活动
seckillByDay().then((res) => {
if (res.success) {
@ -158,7 +134,7 @@ export default {
}
});
},
goGoodsDetail(skuId, goodsId) {
goGoodsDetail (skuId, goodsId) {
// 跳转商品详情
let routeUrl = this.$router.resolve({
path: "/goodsDetail",
@ -166,7 +142,7 @@ export default {
});
window.open(routeUrl.href, "_blank");
},
countDown(currIndex) {
countDown (currIndex) {
// 倒计时
// 0点时间戳
let zeroTime = new Date(new Date().toLocaleDateString()).getTime();
@ -191,13 +167,14 @@ export default {
}, 1000);
},
},
mounted() {
mounted () {
this.getListByDay();
},
};
</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) {
>div:nth-child(1) {
font-size: 20px;
}
> div:nth-child(2) {
>div:nth-child(2) {
font-size: 14px;
margin-left: 10px;
}
}
}
.goods-show-info1 {
width: 290px;
padding: 6px;
@ -267,15 +254,18 @@ 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;
background-color: #111fff;
}
</style>

270
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') &&
JSON.parse(Cookies.get('userInfoSeller')).selfOperated
"
v-model="form.pointFlag"
>送积分</Checkbox
>
<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>
</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>
@ -270,7 +120,7 @@ export default {
components: {
skuSelect,
},
data() {
data () {
const checkPrice = (rule, value, callback) => {
if (!value && value !== 0) {
return callback(new Error("面额不能为空"));
@ -369,29 +219,31 @@ export default {
},
],
options: {
disabledDate(date) {
disabledDate (date) {
return date && date.valueOf() < Date.now() - 86400000;
},
},
};
},
async mounted() {
async mounted () {
if (this.id) {
this.getDetail();
this.columns.shift()
this.columns.pop()
}
await this.getCouponList();
await this.getGiftList();
},
methods: {
// 关闭当前页面
closeCurrentPage() {
closeCurrentPage () {
this.$store.commit("removeTag", "full-cut-detail");
localStorage.storeOpenedList = JSON.stringify(
this.$store.state.app.storeOpenedList
);
this.$router.go(-1);
},
openSkuList() {
openSkuList () {
// 显示商品选择器
this.$refs.skuSelect.open("goods");
let data = JSON.parse(JSON.stringify(this.form.promotionGoodsList));
@ -400,7 +252,7 @@ export default {
});
this.$refs.skuSelect.goodsData = data;
},
getDetail() {
getDetail () {
// 获取活动详情
getFullDiscountById(this.id).then((res) => {
console.log(res);
@ -422,7 +274,7 @@ export default {
});
},
/** 保存 */
handleSubmit() {
handleSubmit () {
this.$refs.form.validate((valid) => {
if (valid) {
const params = JSON.parse(JSON.stringify(this.form));
@ -486,11 +338,11 @@ export default {
});
},
changeSelect(e) {
changeSelect (e) {
// 已选商品批量选择
this.selectedGoods = e;
},
delSelectGoods() {
delSelectGoods () {
// 多选删除商品
if (this.selectedGoods.length <= 0) {
this.$Message.warning("您还未选择要删除的数据");
@ -512,11 +364,11 @@ export default {
},
});
},
delGoods(index) {
delGoods (index) {
// 删除商品
this.form.promotionGoodsList.splice(index, 1);
},
selectedGoodsData(item) {
selectedGoodsData (item) {
// 回显已选商品
let list = [];
item.forEach((e) => {
@ -532,7 +384,7 @@ export default {
});
this.form.promotionGoodsList = list;
},
getCouponList(query) {
getCouponList (query) {
// 优惠券列表
let params = {
pageSize: 10,
@ -549,7 +401,7 @@ export default {
}
});
},
getGiftList(query) {
getGiftList (query) {
// 赠品列表
let params = {
pageSize: 10,
@ -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;
}

61
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>
@ -66,9 +49,9 @@ import { seckillList } from "@/api/promotion";
export default {
name: "seckill",
components: {},
data() {
data () {
return {
selectDate:[],
selectDate: [],
loading: true, // 表单加载状态
searchForm: {
// 搜索框初始化对象
@ -141,27 +124,27 @@ export default {
},
methods: {
// 初始化数据
init() {
init () {
this.getDataList();
},
// 分页 改变页码
changePage(v) {
changePage (v) {
this.searchForm.pageNumber = v;
this.getDataList();
},
// 分页 改变页数
changePageSize(v) {
changePageSize (v) {
this.searchForm.pageSize = v;
this.getDataList();
},
// 搜索
handleSearch() {
handleSearch () {
this.searchForm.pageNumber = 1;
this.searchForm.pageSize = 10;
this.getDataList();
},
// 重置
handleReset() {
handleReset () {
this.searchForm = {};
this.selectDate = "";
this.searchForm.pageNumber = 1;
@ -169,11 +152,11 @@ export default {
this.getDataList();
},
// 管理
manage(row) {
manage (row) {
this.$router.push({ name: "seckill-goods", query: { id: row.id } });
},
// 获取列表数据
getDataList() {
getDataList () {
this.loading = true;
if (this.selectDate && this.selectDate[0] && this.selectDate[1]) {
this.searchForm.startTime = this.selectDate[0].getTime();
@ -191,11 +174,11 @@ export default {
}
});
},
unixDate(time) {
unixDate (time) {
// 处理报名截止时间
return this.$options.filters.unixToDate(new Date(time) / 1000);
},
unixHours(item) {
unixHours (item) {
// 处理小时场次
let hourArr = item.split(",");
for (let i = 0; i < hourArr.length; i++) {
@ -204,16 +187,16 @@ export default {
return hourArr;
},
},
mounted() {
mounted () {
this.init();
},
// 页面缓存处理，从该页面离开时，修改KeepAlive为false，保证进入该页面是刷新
beforeRouteLeave(to, from, next) {
beforeRouteLeave (to, from, next) {
from.meta.keepAlive = false
next()
}
};
</script>
<style lang="scss" scoped>
@import "@/styles/table-common.scss";
</style>