278 lines
6.6 KiB
Vue
278 lines
6.6 KiB
Vue
<template>
|
|
<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption" :down="upDown">
|
|
<u-navbar id="navbar" :border-bottom="false" :background="{ background: 'rgba(256,256,256, 0)'}"
|
|
:back-bg="'rgba(0, 0, 0, 0.2)'" back-icon-color="rgba(256, 256, 256, 1)" :immersive="true">
|
|
</u-navbar>
|
|
<view class="content">
|
|
<view class="head" :style="[background]"></view>
|
|
<view class="bg">
|
|
<view class="time">
|
|
<view class="flex" v-if="isEnd">
|
|
<u-image :src="aliOSS + '/activity/panic_buying/djs.png'" width="40rpx" height="40rpx"></u-image>
|
|
<text class="m-l-10">
|
|
距结束
|
|
</text>
|
|
<u-count-down class="m-l-10 down" separator="zh" :timestamp="getCancelTime()"
|
|
:separator-size="26" :font-size="26" color="#FF2C3C" separator-color="#FF2C3C"
|
|
bg-color="#FFEEC2" @end="refresh"></u-count-down>
|
|
</view>
|
|
<view class="bold lg" v-else>
|
|
活动已结束
|
|
</view>
|
|
</view>
|
|
<view class="rule">
|
|
<view class="rule-txt flex line-1" v-if="config && config.rule" @click="showModel = true">
|
|
<view class="txt-gray m-r-10">规则</view>
|
|
<view class="line-1">{{config.rule}}</view>
|
|
</view>
|
|
<view class="rule-txt flex line-1" v-if="config && config.service">
|
|
<view class="txt-gray m-r-10">服务</view>
|
|
<view class="item m-r-10" v-for="(item, index) in config.service">{{item}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="list">
|
|
<view class="item flex" v-for="(item, index) in list" :key="index" @click="toPage(item.goods_id, item.activity_sn)">
|
|
<u-image class="img" :src="item.goods_image" width="240rpx" height="240rpx" border-radius="10rpx"></u-image>
|
|
<view class="info m-l-20">
|
|
<view class="line-2 xl bold goods-name">{{item.goods_name}}</view>
|
|
<view class="panic-btn m-t-20">
|
|
<view class="left sm text-center bold">￥{{item.goods_min_price}}</view>
|
|
<view class="right">
|
|
<view class="xl m-t-10 bold">￥{{item.activity_price}}</view>
|
|
<view class="sm">抢购价</view>
|
|
<u-image class="flash" :src="aliOSS + '/activity/panic_buying/flash.png'" width="60rpx" height="60rpx"></u-image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<u-modal v-model="showModel" :mask-close-able="true">
|
|
<view class="bold p-l-20">商品活动规则</view>
|
|
<view class="p-20">
|
|
<u-parse :html="config.rule"></u-parse>
|
|
</view>
|
|
</u-modal>
|
|
</view>
|
|
</mescroll-body>
|
|
</template>
|
|
|
|
<script>
|
|
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins";
|
|
import {getPanic} from '@/api/shop.js'
|
|
export default {
|
|
mixins: [MescrollMixin],
|
|
data() {
|
|
return {
|
|
upOption: {
|
|
empty: {
|
|
icon: 'https://zjeloong.oss-cn-hangzhou.aliyuncs.com/uniapp/order_null.png',
|
|
tip: '暂无记录', // 提示
|
|
},
|
|
textColor: '#ccc'
|
|
},
|
|
upDown: {
|
|
bgColor: '#fff'
|
|
},
|
|
storeState: 1,
|
|
list: [],
|
|
cancelTime: 1727169974,
|
|
showModel: false,
|
|
rule: '',
|
|
config: [],
|
|
isEnd: true
|
|
}
|
|
},
|
|
methods: {
|
|
getCancelTime() {
|
|
if (this.config && this.config.end_time) {
|
|
return this.config.end_time - Date.now() / 1000
|
|
}
|
|
},
|
|
|
|
async downCallback(page) {
|
|
this.mescroll.resetUpScroll();
|
|
},
|
|
|
|
upCallback(page) {
|
|
console.log('time', new Date().getTime())
|
|
let pageNum = page.num;
|
|
let pageSize = page.size;
|
|
getPanic({
|
|
type: this.type,
|
|
goods_id: this.id,
|
|
page_no: pageNum,
|
|
page_size: pageSize
|
|
}).then(res => {
|
|
if (res.code == 1) {
|
|
let curPageData = res.data.lists;
|
|
let curPageLen = curPageData.length;
|
|
let hasNext = !!res.data.more;
|
|
this.config = res.data.config
|
|
if (Date.now() / 1000 > this.config.end_time) {
|
|
this.isEnd = false
|
|
}
|
|
if (page.num == 1) this.list = [];
|
|
this.list = this.list.concat(curPageData);
|
|
this.rule = res.data.rule;
|
|
this.mescroll.endSuccess(curPageLen, hasNext);
|
|
}
|
|
})
|
|
},
|
|
|
|
toPage(goods_id, activity_sn){
|
|
this.$Router.push({
|
|
path: '/pages/goods_details/goods_details',
|
|
query: {
|
|
id: goods_id,
|
|
activity_sn,
|
|
act_id: 1
|
|
}
|
|
})
|
|
}
|
|
},
|
|
computed: {
|
|
background() {
|
|
const timestamp = Date.now();
|
|
return {'background-image': `url(https://zjeloong.oss-cn-hangzhou.aliyuncs.com/activity/panic_buying/panic_bg.jpg?t=${timestamp})`}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
page {
|
|
background: #c22921;
|
|
}
|
|
.content {
|
|
padding-bottom: 20rpx;
|
|
}
|
|
|
|
.head {
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
min-height: 800rpx;
|
|
max-height: 800rpx;
|
|
}
|
|
|
|
.rule {
|
|
color: #fff;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.time {
|
|
text-align: center;
|
|
background-image: linear-gradient(45deg, #FF60A8 0%, #FF3C6A 99%, #FF0001 100%);
|
|
}
|
|
|
|
.list {
|
|
margin: 0 20rpx;
|
|
background-color: #fff;
|
|
border-radius: 10rpx;
|
|
padding: 20rpx;
|
|
|
|
.item {
|
|
width: 100%;
|
|
margin-bottom: 20rpx;
|
|
|
|
.info {
|
|
width: calc(100% - 240rpx);
|
|
|
|
.goods-name {
|
|
height: 90rpx;
|
|
}
|
|
|
|
.panic-btn {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.left {
|
|
width: 30%;
|
|
background-color: #feece3; background-image: linear-gradient(90deg, #feece3 0%, #ffeede 100%);
|
|
height: 100rpx;
|
|
line-height: 100rpx;
|
|
color: #A77227;
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.right {
|
|
color: #fff;
|
|
width: 70%;
|
|
background-color: #e04670; background-image: linear-gradient(106deg, #e04670 18%, #fd0a1c 100%);
|
|
border-top-right-radius: 40rpx;
|
|
border-bottom-right-radius: 40rpx;
|
|
height: 100rpx;
|
|
text-align: center;
|
|
position: relative;
|
|
|
|
view {
|
|
margin-left: -20rpx;
|
|
}
|
|
|
|
.flash {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
right: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.upwrap-nodata {
|
|
color: #fff
|
|
}
|
|
|
|
.rule-box {
|
|
border-radius: 10rpx;
|
|
}
|
|
|
|
.bg {
|
|
position: relative;
|
|
|
|
.time {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
background: linear-gradient(to right, #fdd9c7, #f8b980);
|
|
height: 120rpx;
|
|
margin: 20rpx 20rpx 0;
|
|
border-radius: 20rpx;
|
|
padding: 20rpx 20rpx 0;
|
|
color: #FF2C3C;
|
|
}
|
|
|
|
.down {
|
|
margin-top: 4rpx;
|
|
}
|
|
|
|
.rule {
|
|
margin: -40rpx 20rpx 20rpx;
|
|
border-radius: 20rpx;
|
|
background-color: #fff;
|
|
|
|
.txt-gray {
|
|
color: #838383;
|
|
}
|
|
|
|
.rule-txt {
|
|
color: #000;
|
|
padding: 10rpx 20rpx;
|
|
}
|
|
|
|
.item {
|
|
border: 1px solid #FF2C3C;
|
|
font-size: 24rpx;
|
|
border-radius: 10rpx;
|
|
padding: 2rpx 10rpx;
|
|
background-color: #F9F4F3;
|
|
color: #FF2C3C;
|
|
}
|
|
}
|
|
}
|
|
|
|
</style> |