feat：v1.4前端更新
This commit is contained in:
超凡
@@ -1,338 +1,352 @@
|
||||
<template>
|
||||
<view>
|
||||
<block v-if="bargain.length>0">
|
||||
<div class="bargain-record pad30" ref="container">
|
||||
<div class="item borRadius14" v-for="(item, index) in bargain" :key="index">
|
||||
<div class="picTxt acea-row row-between-wrapper">
|
||||
<div class="pictrue">
|
||||
<image :src="item.image" />
|
||||
</div>
|
||||
<div class="text acea-row row-column-around">
|
||||
<div class="line1" style="width: 100%;">{{ item.title }}</div>
|
||||
<count-down :justify-left="'justify-content:left'" :bgColor="bgColor" :is-day="true" :tip-text="'倒计时 '" :day-text="'天'"
|
||||
:hour-text="' 时 '" :minute-text="' 分 '"
|
||||
:second-text="' 秒 '" :datatime="item.stopTime/1000" v-if="item.status === 1"></count-down>
|
||||
<div class="successTxt font-color-red" v-else-if="item.status === 3">砍价成功</div>
|
||||
<div class="endTxt" v-else>活动已结束</div>
|
||||
<div class="money">
|
||||
已砍至<span class="symbol font-color-red">￥</span><span class="num font-color-red">{{ item.surplusPrice }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom acea-row row-between-wrapper">
|
||||
<div class="purple" v-if="item.status === 1">活动进行中</div>
|
||||
<div class="success" v-else-if="item.status === 3">砍价成功</div>
|
||||
<div class="end" v-else>活动已结束</div>
|
||||
<div class="acea-row row-middle row-right">
|
||||
<div class="bnt bg-color-red" v-if="item.status === 3 && !item.isOrder" @click="goConfirm(item)">
|
||||
去付款
|
||||
</div>
|
||||
<div class="bnt bg-color-red" v-if="item.status === 3 && !item.isDel && item.isOrder && !item.isPay" @click="goPay(item.surplusPrice,item.orderNo)">
|
||||
立即付款
|
||||
</div>
|
||||
<div class="bnt bg-color-red" v-if="item.status === 1" @click="goDetail(item.id)">
|
||||
继续砍价
|
||||
</div>
|
||||
<div class="bnt bg-color-red" v-if="item.status === 2" @click="goList">重开一个</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Loading :loaded="status" :loading="loadingList"></Loading>
|
||||
</div>
|
||||
</block>
|
||||
<block v-if="bargain.length == 0">
|
||||
<emptyPage title="暂无砍价记录～"></emptyPage>
|
||||
</block>
|
||||
<home></home>
|
||||
<payment :payMode='payMode' :pay_close="pay_close" @onChangeFun='onChangeFun' :order_id="pay_order_id" :totalPrice='totalPrice'></payment>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import CountDown from "@/components/countDown";
|
||||
import emptyPage from '@/components/emptyPage.vue'
|
||||
import {
|
||||
getBargainUserList,
|
||||
getBargainUserCancel
|
||||
} from "@/api/activity";
|
||||
import Loading from "@/components/Loading";
|
||||
import home from '@/components/home';
|
||||
import payment from '@/components/payment';
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
export default {
|
||||
name: "BargainRecord",
|
||||
components: {
|
||||
CountDown,
|
||||
Loading,
|
||||
emptyPage,
|
||||
home,
|
||||
payment
|
||||
},
|
||||
props: {},
|
||||
computed: mapGetters(['isLogin', 'userInfo', 'uid']),
|
||||
data: function() {
|
||||
return {
|
||||
bgColor:{
|
||||
'bgColor': '',
|
||||
'Color': '#E93323',
|
||||
'width': '40rpx',
|
||||
'timeTxtwidth': '28rpx',
|
||||
'isDay': false
|
||||
},
|
||||
bargain: [],
|
||||
status: false, //砍价列表是否获取完成 false 未完成 true 完成
|
||||
loadingList: false, //当前接口是否请求完成 false 完成 true 未完成
|
||||
page: 1, //页码
|
||||
limit: 20, //数量
|
||||
payMode: [{
|
||||
name: "微信支付",
|
||||
icon: "icon-weixinzhifu",
|
||||
value: 'weixin',
|
||||
title: '微信快捷支付'
|
||||
},
|
||||
{
|
||||
name: "余额支付",
|
||||
icon: "icon-yuezhifu",
|
||||
value: 'yue',
|
||||
title: '可用余额:',
|
||||
number: 0
|
||||
}
|
||||
],
|
||||
pay_close: false,
|
||||
pay_order_id: '',
|
||||
totalPrice: '0'
|
||||
};
|
||||
},
|
||||
onLoad: function() {
|
||||
this.getBargainUserList();
|
||||
// this.$scroll(this.$refs.container, () => {
|
||||
// !this.loadingList && this.getBargainUserList();
|
||||
// });
|
||||
},
|
||||
onShow() {
|
||||
if (this.isLogin) {
|
||||
this.payMode[1].number = this.userInfo.nowMoney;
|
||||
this.$set(this, 'payMode', this.payMode);
|
||||
} else {
|
||||
toLogin();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 打开支付组件
|
||||
*
|
||||
*/
|
||||
goPay(pay_price, order_id) {
|
||||
this.$set(this, 'pay_close', true);
|
||||
this.$set(this, 'pay_order_id', order_id);
|
||||
this.$set(this, 'totalPrice', pay_price);
|
||||
},
|
||||
/**
|
||||
* 事件回调
|
||||
*
|
||||
*/
|
||||
onChangeFun: function(e) {
|
||||
let opt = e;
|
||||
let action = opt.action || null;
|
||||
let value = opt.value != undefined ? opt.value : null;
|
||||
(action && this[action]) && this[action](value);
|
||||
},
|
||||
/**
|
||||
* 关闭支付组件
|
||||
*
|
||||
*/
|
||||
payClose: function() {
|
||||
this.pay_close = false;
|
||||
},
|
||||
/**
|
||||
* 支付成功回调
|
||||
*
|
||||
*/
|
||||
pay_complete: function() {
|
||||
this.status = false;
|
||||
this.page = 1;
|
||||
this.$set(this, 'bargain', []);
|
||||
this.$set(this, 'pay_close', false);
|
||||
this.getBargainUserList();
|
||||
},
|
||||
/**
|
||||
* 支付失败回调
|
||||
*
|
||||
*/
|
||||
pay_fail: function() {
|
||||
this.pay_close = false;
|
||||
},
|
||||
goConfirm: function(item) { //立即支付
|
||||
if (this.isLogin === false) {
|
||||
toLogin();
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: `/pages/activity/goods_bargain_details/index?id=${item.id}&startBargainUid=${this.uid}&storeBargainId=${item.bargainUserId}`
|
||||
})
|
||||
}
|
||||
},
|
||||
goDetail: function(id) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/activity/goods_bargain_details/index?id=${id}&startBargainUid=${this.uid}`
|
||||
})
|
||||
},
|
||||
// 砍价列表
|
||||
goList: function() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/activity/goods_bargain/index'
|
||||
})
|
||||
},
|
||||
getBargainUserList: function() {
|
||||
var that = this;
|
||||
if (that.loadingList) return;
|
||||
if (that.status) return;
|
||||
getBargainUserList({
|
||||
page: that.page,
|
||||
limit: that.limit
|
||||
})
|
||||
.then(res => {
|
||||
that.status = res.data.list.length < that.limit;
|
||||
that.bargain.push.apply(that.bargain, res.data.list);
|
||||
that.page++;
|
||||
that.loadingList = false;
|
||||
})
|
||||
.catch(res => {
|
||||
that.$dialog.error(res);
|
||||
});
|
||||
},
|
||||
getBargainUserCancel: function(bargainId) {
|
||||
var that = this;
|
||||
getBargainUserCancel({
|
||||
bargainId: bargainId
|
||||
})
|
||||
.then(res => {
|
||||
that.status = false;
|
||||
that.loadingList = false;
|
||||
that.page = 1;
|
||||
that.bargain = [];
|
||||
that.getBargainUserList();
|
||||
that.$util.Tips({
|
||||
title: res
|
||||
})
|
||||
})
|
||||
.catch(res => {
|
||||
that.$util.Tips({
|
||||
title: res
|
||||
})
|
||||
});
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
this.getBargainUserList();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
/*砍价记录*/
|
||||
.bargain-record .item .picTxt .text .time {
|
||||
height: 36rpx;
|
||||
line-height: 36rpx;
|
||||
.styleAll {
|
||||
color: #fc4141;
|
||||
font-size:24rpx;
|
||||
}
|
||||
}
|
||||
.bargain-record .item .picTxt .text .time .red {
|
||||
color: #999;
|
||||
font-size:24rpx;
|
||||
}
|
||||
.bargain-record .item {
|
||||
background-color: #fff;
|
||||
margin-top: 15rpx;
|
||||
padding: 30rpx 24rpx 0 24rpx;
|
||||
}
|
||||
|
||||
.bargain-record .item .picTxt {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.bargain-record .item .picTxt .pictrue {
|
||||
width: 150upx;
|
||||
height: 150upx;
|
||||
}
|
||||
|
||||
.bargain-record .item .picTxt .pictrue image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 6upx;
|
||||
}
|
||||
|
||||
.bargain-record .item .picTxt .text {
|
||||
width: 470rpx;
|
||||
font-size: 30upx;
|
||||
color: #333333;
|
||||
height: 160rpx;
|
||||
}
|
||||
|
||||
.bargain-record .item .picTxt .text .time {
|
||||
font-size: 24upx;
|
||||
color: #868686;
|
||||
justify-content: left !important;
|
||||
}
|
||||
|
||||
.bargain-record .item .picTxt .text .successTxt{
|
||||
font-size:24rpx;
|
||||
}
|
||||
|
||||
.bargain-record .item .picTxt .text .endTxt{
|
||||
font-size:24rpx;
|
||||
color: #999;
|
||||
}
|
||||
.bargain-record .item .picTxt .text .money {
|
||||
font-size: 24upx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.bargain-record .item .picTxt .text .money .num {
|
||||
font-size: 32upx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.bargain-record .item .picTxt .text .money .symbol {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.bargain-record .item .bottom {
|
||||
height: 100upx;
|
||||
font-size: 27upx;
|
||||
}
|
||||
|
||||
.bargain-record .item .bottom .purple {
|
||||
color: #f78513;
|
||||
}
|
||||
|
||||
.bargain-record .item .bottom .end {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.bargain-record .item .bottom .success {
|
||||
color: $theme-color;
|
||||
}
|
||||
|
||||
.bargain-record .item .bottom .bnt {
|
||||
font-size: 27upx;
|
||||
color: #fff;
|
||||
width: 176upx;
|
||||
height: 60upx;
|
||||
border-radius: 32upx;
|
||||
text-align: center;
|
||||
line-height: 60upx;
|
||||
}
|
||||
|
||||
.bargain-record .item .bottom .bnt.cancel {
|
||||
color: #aaa;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.bargain-record .item .bottom .bnt~.bnt {
|
||||
margin-left: 18upx;
|
||||
}
|
||||
</style>
|
||||
<template>
|
||||
<view :data-theme="theme">
|
||||
<block v-if="bargain.length>0">
|
||||
<div class="bargain-record" ref="container">
|
||||
<div class="item borRadius14" v-for="(item, index) in bargain" :key="index">
|
||||
<div class="picTxt acea-row row-between-wrapper">
|
||||
<div class="pictrue">
|
||||
<image :src="item.image" />
|
||||
</div>
|
||||
<div class="text acea-row row-column-around">
|
||||
<div class="line1" style="width: 100%;">{{ item.title }}</div>
|
||||
<count-down :justify-left="'justify-content:left'" :bgColor="bgColor" :is-day="true" :tip-text="'倒计时 '" :day-text="'天'"
|
||||
:hour-text="' 时 '" :minute-text="' 分 '"
|
||||
:second-text="' 秒 '" :datatime="item.stopTime/1000" v-if="item.status === 1"></count-down>
|
||||
<div class="successTxt font_color" v-else-if="item.status === 3 && item.isDel === false">砍价成功</div>
|
||||
<div class="successTxt " v-else-if="item.status === 3 && item.isDel === true && item.isPay === false">砍价失败</div>
|
||||
<div class="endTxt" v-else>活动已结束</div>
|
||||
<div class="money">
|
||||
已砍至<span class="symbol font_color">￥</span><span class="num font_color">{{ item.surplusPrice }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom acea-row row-between-wrapper">
|
||||
<div class="purple" v-if="item.status === 1">活动进行中</div>
|
||||
<div class="success" v-else-if="item.status === 3 && item.isDel === false">砍价成功</div>
|
||||
<div class="end" v-else-if="item.status === 3 && item.isDel === true && item.isPay === false">砍价失败</div>
|
||||
<div class="end" v-else>活动已结束</div>
|
||||
<div class="acea-row row-middle row-right">
|
||||
<div class="bnt bg_color" v-if="item.status === 3 && !item.isOrder" @click="goConfirm(item)">
|
||||
去付款
|
||||
</div>
|
||||
<div class="bnt bg_color" v-if="item.status === 3 && !item.isDel && item.isOrder && !item.isPay" @click="goPay(item.surplusPrice,item.orderNo)">
|
||||
立即付款
|
||||
</div>
|
||||
<div class="bnt bg_color" v-if="item.status === 1" @click="goDetail(item.id)">
|
||||
继续砍价
|
||||
</div>
|
||||
<div class="bnt bg_color" v-if="item.status === 2" @click="goList">重开一个</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Loading :loaded="status" :loading="loadingList"></Loading>
|
||||
</div>
|
||||
</block>
|
||||
<block v-if="bargain.length == 0">
|
||||
<emptyPage title="暂无砍价记录～"></emptyPage>
|
||||
</block>
|
||||
<payment :pay_close="pay_close" @onChangeFun='onChangeFun' :order_id="pay_order_id" :totalPrice='totalPrice'></payment>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import CountDown from "@/components/countDown";
|
||||
import emptyPage from '@/components/emptyPage.vue'
|
||||
import {
|
||||
getBargainUserList,
|
||||
getBargainUserCancel
|
||||
} from "@/api/activity";
|
||||
import Loading from "@/components/Loading";
|
||||
import payment from '@/components/payment';
|
||||
import {mapGetters} from "vuex";
|
||||
import {setThemeColor} from '@/utils/setTheme.js'
|
||||
import animationType from '@/utils/animationType.js'
|
||||
let app = getApp();
|
||||
export default {
|
||||
name: "BargainRecord",
|
||||
components: {
|
||||
CountDown,
|
||||
Loading,
|
||||
emptyPage,
|
||||
payment
|
||||
},
|
||||
props: {},
|
||||
computed: mapGetters(['isLogin', 'userInfo', 'uid']),
|
||||
data: function() {
|
||||
return {
|
||||
bgColor:{
|
||||
'bgColor': '',
|
||||
'Color': '#E93323',
|
||||
'width': '40rpx',
|
||||
'timeTxtwidth': '28rpx',
|
||||
'isDay': false
|
||||
},
|
||||
bargain: [],
|
||||
status: false, //砍价列表是否获取完成 false 未完成 true 完成
|
||||
loadingList: false, //当前接口是否请求完成 false 完成 true 未完成
|
||||
page: 1, //页码
|
||||
limit: 20, //数量
|
||||
payMode: [{
|
||||
name: "微信支付",
|
||||
icon: "icon-weixinzhifu",
|
||||
value: 'weixin',
|
||||
title: '微信快捷支付'
|
||||
},
|
||||
{
|
||||
name: "余额支付",
|
||||
icon: "icon-yuezhifu",
|
||||
value: 'yue',
|
||||
title: '可用余额:',
|
||||
number: 0
|
||||
}
|
||||
],
|
||||
pay_close: false,
|
||||
pay_order_id: '',
|
||||
totalPrice: '0',
|
||||
theme:app.globalData.theme
|
||||
};
|
||||
},
|
||||
onShow() {
|
||||
if (this.isLogin) {
|
||||
this.payMode[1].number = this.userInfo.nowMoney;
|
||||
this.$set(this, 'payMode', this.payMode);
|
||||
this.getBargainUserList();
|
||||
this.bgColor.Color = setThemeColor();
|
||||
} else {
|
||||
toLogin();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 打开支付组件
|
||||
*
|
||||
*/
|
||||
goPay(pay_price, order_id) {
|
||||
this.$set(this, 'pay_close', true);
|
||||
this.$set(this, 'pay_order_id', order_id);
|
||||
this.$set(this, 'totalPrice', pay_price);
|
||||
},
|
||||
/**
|
||||
* 事件回调
|
||||
*
|
||||
*/
|
||||
onChangeFun: function(e) {
|
||||
let opt = e;
|
||||
let action = opt.action || null;
|
||||
let value = opt.value != undefined ? opt.value : null;
|
||||
(action && this[action]) && this[action](value);
|
||||
},
|
||||
/**
|
||||
* 关闭支付组件
|
||||
*
|
||||
*/
|
||||
payClose: function() {
|
||||
this.pay_close = false;
|
||||
},
|
||||
/**
|
||||
* 支付成功回调
|
||||
*
|
||||
*/
|
||||
pay_complete: function() {
|
||||
this.status = false;
|
||||
this.page = 1;
|
||||
this.$set(this, 'bargain', []);
|
||||
this.$set(this, 'pay_close', false);
|
||||
this.getBargainUserList();
|
||||
},
|
||||
/**
|
||||
* 支付失败回调
|
||||
*
|
||||
*/
|
||||
pay_fail: function() {
|
||||
this.pay_close = false;
|
||||
},
|
||||
goConfirm: function(item) { //立即支付
|
||||
if (this.isLogin === false) {
|
||||
toLogin();
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
animationType: animationType.type,
|
||||
animationDuration: animationType.duration,
|
||||
url: `/pages/activity/goods_bargain_details/index?id=${item.id}&startBargainUid=${this.uid}&storeBargainId=${item.bargainUserId}`
|
||||
})
|
||||
}
|
||||
},
|
||||
goDetail: function(id) {
|
||||
uni.navigateTo({
|
||||
animationType: animationType.type,
|
||||
animationDuration: animationType.duration,
|
||||
url: `/pages/activity/goods_bargain_details/index?id=${id}&startBargainUid=${this.uid}`
|
||||
})
|
||||
},
|
||||
// 砍价列表
|
||||
goList: function() {
|
||||
uni.navigateTo({
|
||||
animationType: animationType.type,
|
||||
animationDuration: animationType.duration,
|
||||
url: '/pages/activity/goods_bargain/index'
|
||||
})
|
||||
},
|
||||
getBargainUserList: function() {
|
||||
var that = this;
|
||||
if (that.loadingList) return;
|
||||
if (that.status) return;
|
||||
getBargainUserList({
|
||||
page: that.page,
|
||||
limit: that.limit
|
||||
})
|
||||
.then(res => {
|
||||
that.status = res.data.list.length < that.limit;
|
||||
that.bargain.push.apply(that.bargain, res.data.list);
|
||||
that.page++;
|
||||
that.loadingList = false;
|
||||
})
|
||||
.catch(res => {
|
||||
that.$dialog.error(res);
|
||||
});
|
||||
},
|
||||
getBargainUserCancel: function(bargainId) {
|
||||
var that = this;
|
||||
getBargainUserCancel({
|
||||
bargainId: bargainId
|
||||
})
|
||||
.then(res => {
|
||||
that.status = false;
|
||||
that.loadingList = false;
|
||||
that.page = 1;
|
||||
that.bargain = [];
|
||||
that.getBargainUserList();
|
||||
that.$util.Tips({
|
||||
title: res
|
||||
})
|
||||
})
|
||||
.catch(res => {
|
||||
that.$util.Tips({
|
||||
title: res
|
||||
})
|
||||
});
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
this.getBargainUserList();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="scss">
|
||||
page {
|
||||
@include main_bg_color(theme);
|
||||
height: 100vh;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
/*砍价记录*/
|
||||
.bargain-record{
|
||||
padding: 0 30rpx 15rpx;
|
||||
}
|
||||
.bargain-record .item .picTxt .text .time {
|
||||
height: 36rpx;
|
||||
line-height: 36rpx;
|
||||
.styleAll {
|
||||
color: #fc4141;
|
||||
font-size:24rpx;
|
||||
}
|
||||
}
|
||||
.bargain-record .item .picTxt .text .time .red {
|
||||
color: #999;
|
||||
font-size:24rpx;
|
||||
}
|
||||
.bargain-record .item {
|
||||
background-color: #fff;
|
||||
margin-top: 15rpx;
|
||||
padding: 30rpx 24rpx 0 24rpx;
|
||||
}
|
||||
|
||||
.bargain-record .item .picTxt {
|
||||
border-bottom: 1px solid #f0f0f0;
|
||||
padding-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.bargain-record .item .picTxt .pictrue {
|
||||
width: 150upx;
|
||||
height: 150upx;
|
||||
}
|
||||
|
||||
.bargain-record .item .picTxt .pictrue image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 6upx;
|
||||
}
|
||||
|
||||
.bargain-record .item .picTxt .text {
|
||||
width: 470rpx;
|
||||
font-size: 30upx;
|
||||
color: #333333;
|
||||
height: 160rpx;
|
||||
}
|
||||
|
||||
.bargain-record .item .picTxt .text .time {
|
||||
font-size: 24upx;
|
||||
color: #868686;
|
||||
justify-content: left !important;
|
||||
}
|
||||
|
||||
.bargain-record .item .picTxt .text .successTxt{
|
||||
font-size:24rpx;
|
||||
}
|
||||
|
||||
.bargain-record .item .picTxt .text .endTxt{
|
||||
font-size:24rpx;
|
||||
color: #999;
|
||||
}
|
||||
.bargain-record .item .picTxt .text .money {
|
||||
font-size: 24upx;
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.bargain-record .item .picTxt .text .money .num {
|
||||
font-size: 32upx;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.bargain-record .item .picTxt .text .money .symbol {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.bargain-record .item .bottom {
|
||||
height: 100upx;
|
||||
font-size: 27upx;
|
||||
}
|
||||
|
||||
.bargain-record .item .bottom .purple {
|
||||
color: #f78513;
|
||||
}
|
||||
|
||||
.bargain-record .item .bottom .end {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.bargain-record .item .bottom .success {
|
||||
color: $theme-color;
|
||||
}
|
||||
|
||||
.bargain-record .item .bottom .bnt {
|
||||
font-size: 27upx;
|
||||
color: #fff;
|
||||
width: 176upx;
|
||||
height: 60upx;
|
||||
border-radius: 32upx;
|
||||
text-align: center;
|
||||
line-height: 60upx;
|
||||
}
|
||||
.bg_color{
|
||||
@include main_bg_color(theme);
|
||||
}
|
||||
.font_color{
|
||||
@include price_color(theme);
|
||||
}
|
||||
.bargain-record .item .bottom .bnt.cancel {
|
||||
color: #aaa;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.bargain-record .item .bottom .bnt~.bnt {
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@@ -1,13 +1,14 @@
|
||||
<template>
|
||||
<div :data-theme="theme">
|
||||
<div class="group-con">
|
||||
<div class="header acea-row row-between-wrapper">
|
||||
<div class="pictrue"><img :src="storeCombination.image" /></div>
|
||||
<div class="pictrue"><image :src="storeCombination.image" /></div>
|
||||
<div class="text">
|
||||
<div class="line1" v-text="storeCombination.title"></div>
|
||||
<div class="money">
|
||||
<div class="money font_price">
|
||||
￥
|
||||
<span class="num" v-text="storeCombination.price || 0"></span>
|
||||
<span class="team cart-color">{{storeCombination.people +'人拼'}}</span>
|
||||
<span class="team cart-color">{{storeCombination.people?storeCombination.people:0 }}人拼</span>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="pinkBool === -1" class="iconfont icon-pintuanshibai"></div>
|
||||
@@ -30,14 +31,15 @@
|
||||
<div class="list acea-row row-middle"
|
||||
:class="[pinkBool === 1 || pinkBool === -1 ? 'result' : '', iShidden ? 'on' : '']">
|
||||
<div class="pinkT">
|
||||
<div class="pictrue"><img :src="pinkT.avatar" /></div>
|
||||
<div class="pictrue"><image :src="pinkT.avatar" /></div>
|
||||
<div class="chief">团长</div>
|
||||
</div>
|
||||
<block v-if="pinkAll.length > 0">
|
||||
<div class="pictrue" v-for="(item, index) in pinkAll" :key="index"><img :src="item.avatar" /></div>
|
||||
<div class="pictrue" v-for="(item, index) in pinkAll" :key="index"><image :src="item.avatar" /></div>
|
||||
</block>
|
||||
<div class="pictrue" v-for="index in count" :key="index"><img class="img-none"
|
||||
src="/static/images/vacancy.png" /></div>
|
||||
<div class="pictrue" v-for="index in count" :key="index">
|
||||
<image class="img-none" :src="urlDomain+'crmebimage/perset/activityImg/vacancy.png'" />
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="(pinkBool === 1 || pinkBool === -1) && count > 9" class="lookAll acea-row row-center-wrapper"
|
||||
@click="lookAll">
|
||||
@@ -80,20 +82,33 @@
|
||||
<div class="list acea-row row-middle">
|
||||
<div class="item" v-for="(item, index) in storeCombinationHost" :key="index" @click="goDetail(item.id)">
|
||||
<div class="pictrue">
|
||||
<img :src="item.image" />
|
||||
<image :src="item.image" />
|
||||
<div class="team" v-text="item.people + '人团'"></div>
|
||||
</div>
|
||||
<div class="name line1" v-text="item.title"></div>
|
||||
<div class="money font-color-red" v-text="'￥' + item.price"></div>
|
||||
<div class="money font_price" v-text="'￥' + item.price"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<product-window :attr="attr" :limitNum="1" :iSbnt="1" @myevent="onMyEvent" @ChangeAttr="ChangeAttr"
|
||||
<product-window :attr="attr" :onceNum="onceNum" :limitNum="1" :iSbnt="1" @myevent="onMyEvent" @ChangeAttr="ChangeAttr"
|
||||
@ChangeCartNum="ChangeCartNum" @iptCartNum="iptCartNum" @attrVal="attrVal" @goCat="goPay"></product-window>
|
||||
<!-- 分享按钮 -->
|
||||
<view class="generate-posters acea-row row-middle" :class="posters ? 'on' : ''">
|
||||
<!-- #ifdef APP-PLUS -->
|
||||
<view class="item" @click="appShare('WXSceneSession')">
|
||||
<view class="iconfont icon-weixin3"></view>
|
||||
<view class="">微信好友</view>
|
||||
</view>
|
||||
<view class="item" @click="appShare('WXSenceTimeline')">
|
||||
<view class="iconfont icon-pengyouquan"></view>
|
||||
<view class="">微信朋友圈</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
<view class="mask" v-if="posters || canvasStatus" @click="listenerActionClose"></view>
|
||||
<!-- 发送给朋友图片 -->
|
||||
<view class="share-box" v-if="H5ShareBox">
|
||||
<image src="/static/images/share-info.png" @click="H5ShareBox = false"></image>
|
||||
<image :src="urlDomain+'crmebimage/perset/staticImg/share-info.png'" @click="H5ShareBox = false"></image>
|
||||
</view>
|
||||
<!-- 海报展示 -->
|
||||
<view class='poster-pop' v-if="canvasStatus">
|
||||
@@ -111,17 +126,16 @@
|
||||
<canvas canvas-id="qrcode" :style="{width: `${qrcodeSize}px`, height: `${qrcodeSize}px`}"
|
||||
style="opacity: 0;" />
|
||||
</view>
|
||||
|
||||
<!-- #ifdef MP -->
|
||||
<!-- <authorize @onLoadFun="onLoadFun" :isAuto="isAuto" :isShowAuth="isShowAuth" @authColse="authColse"></authorize> -->
|
||||
<!-- #endif -->
|
||||
<home></home>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import CountDown from '@/components/countDown';
|
||||
import ProductWindow from '@/components/productWindow';
|
||||
import uQRCode from '@/js_sdk/Sansnn-uQRCode/uqrcode.js';
|
||||
import {
|
||||
tokenIsExistApi
|
||||
} from '@/api/api.js';
|
||||
import {
|
||||
imageBase64
|
||||
} from "@/api/public";
|
||||
@@ -139,25 +153,26 @@
|
||||
import {
|
||||
postCartAdd
|
||||
} from '@/api/store';
|
||||
// #ifdef MP
|
||||
import authorize from '@/components/Authorize';
|
||||
// #ifdef APP-PLUS
|
||||
import {
|
||||
HTTP_H5_URL
|
||||
} from '@/config/app.js';
|
||||
// #endif
|
||||
import home from '@/components/home';
|
||||
const NAME = 'GroupRule';
|
||||
import {
|
||||
silenceBindingSpread
|
||||
} from "@/utils";
|
||||
const app = getApp();
|
||||
export default {
|
||||
name: NAME,
|
||||
components: {
|
||||
CountDown,
|
||||
ProductWindow,
|
||||
home,
|
||||
// #ifdef MP
|
||||
authorize
|
||||
// #endif
|
||||
ProductWindow
|
||||
},
|
||||
props: {},
|
||||
data: function() {
|
||||
return {
|
||||
urlDomain: this.$Cache.get("imgHost"),
|
||||
bgColor: {
|
||||
'bgColor': '#333333',
|
||||
'Color': '#fff',
|
||||
@@ -171,7 +186,7 @@
|
||||
userBool: 0, //判断当前用户是否在团内|0=未在,1=在
|
||||
pinkAll: [], //团员
|
||||
pinkT: [], //团长信息
|
||||
storeCombination: {}, //拼团产品
|
||||
storeCombination: null, //拼团产品
|
||||
storeCombinationHost: [], //拼团推荐
|
||||
pinkId: 0,
|
||||
count: 0, //拼团剩余人数
|
||||
@@ -210,20 +225,23 @@
|
||||
PromotionCode: '', //二维码
|
||||
canvasStatus: false,
|
||||
imgTop: '', //商品图base64位
|
||||
imagePath: '' // 海报图片
|
||||
imagePath: '', // 海报图片
|
||||
theme:app.globalData.theme,
|
||||
vacancyPic: require('../static/vacancy.png'),
|
||||
tokenIsExist: app.globalData.tokenIsExist ,//登录是否失效
|
||||
openPages: '' //分享链接
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
userData: {
|
||||
isLogin: {
|
||||
handler: function(newV, oldV) {
|
||||
if (newV) {
|
||||
this.userInfo = newV;
|
||||
app.globalData.openPages = '/pages/activity/goods_combination_status/index?id=' + this.pinkId +
|
||||
"&spread=" + this.uid;
|
||||
this.getCombinationPink();
|
||||
if(parseInt(app.globalData.spread)>0)silenceBindingSpread()
|
||||
}
|
||||
},
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: mapGetters({
|
||||
'isLogin': 'isLogin',
|
||||
@@ -231,21 +249,40 @@
|
||||
'uid': 'uid'
|
||||
}),
|
||||
onLoad(options) {
|
||||
var that = this;
|
||||
that.pinkId = options.id;
|
||||
if (that.isLogin == false) {
|
||||
toLogin();
|
||||
} else {
|
||||
this.loadend = false;
|
||||
this.loading = false;
|
||||
this.combinationMore();
|
||||
this.$set(this,'theme',this.$Cache.get('theme'));
|
||||
this.pinkId = options.id;
|
||||
if(options.spread) app.globalData.spread = options.spread;
|
||||
switch (this.theme) {
|
||||
case 'theme1':
|
||||
this.posterbackgd = require('../images/bargain_post1.png') // 因为跨域不能使用网络图片，
|
||||
break;
|
||||
case 'theme2':
|
||||
this.posterbackgd = require('../images/bargain_post2.png')
|
||||
break;
|
||||
case 'theme3':
|
||||
this.posterbackgd = require('../images/bargain_post3.png')
|
||||
break;
|
||||
case 'theme4':
|
||||
this.posterbackgd = require('../images/bargain_post4.png')
|
||||
break;
|
||||
case 'theme5':
|
||||
this.posterbackgd = require('../images/bargain_post5.png')
|
||||
break;
|
||||
}
|
||||
if (this.isLogin) {
|
||||
this.timestamp = (new Date()).getTime();
|
||||
this.getCombinationPink();
|
||||
if(parseInt(app.globalData.spread)>0)silenceBindingSpread()
|
||||
}else{
|
||||
this.$Cache.set('login_back_url',
|
||||
`/pages/activity/goods_combination_status/index?id=${options.id}&spread=${app.globalData.spread?app.globalData.spread:0}`
|
||||
);
|
||||
toLogin();
|
||||
}
|
||||
},
|
||||
onShow() {},
|
||||
mounted: function() {
|
||||
this.combinationMore();
|
||||
},
|
||||
// link: window.location.protocol + '//' + window.location.host +
|
||||
// '/pages/activity/goods_combination_status/index?id=' + that.pinkId + "&spread=" + this.uid,
|
||||
//#ifdef MP
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
@@ -254,12 +291,53 @@
|
||||
let that = this;
|
||||
return {
|
||||
title: '您的好友' + that.userInfo.nickname + '邀请您参团' + that.storeCombination.title,
|
||||
path: app.globalData.openPages,
|
||||
path: that.openPages,
|
||||
imageUrl: that.storeCombination.image
|
||||
};
|
||||
},
|
||||
//#endif
|
||||
methods: {
|
||||
//校验token是否有效,true为有效，false为无效
|
||||
getTokenIsExist() {
|
||||
//校验token是否有效,true为有效，false为无效
|
||||
this.$LoginAuth.getTokenIsExist().then(data => {
|
||||
this.combinationMore();
|
||||
if (data) {
|
||||
this.timestamp = (new Date()).getTime();
|
||||
this.getCombinationPink();
|
||||
silenceBindingSpread()
|
||||
}else{
|
||||
toLogin();
|
||||
}
|
||||
});
|
||||
},
|
||||
// app分享
|
||||
// #ifdef APP-PLUS
|
||||
appShare(scene) {
|
||||
let that = this
|
||||
let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
|
||||
let curRoute = routes[routes.length - 1].$page.fullPath // 获取当前页面路由，也就是最后一个打开的页面路由
|
||||
uni.share({
|
||||
provider: "weixin",
|
||||
scene: scene,
|
||||
type: 0,
|
||||
href: `${HTTP_H5_URL}${curRoute}`,
|
||||
title: '您的好友' + that.userInfo.nickname + '邀请您参团' + that.storeCombination.title,
|
||||
imageUrl: that.storeCombination.image,
|
||||
success: function(res) {
|
||||
that.posters = false;
|
||||
},
|
||||
fail: function(err) {
|
||||
uni.showToast({
|
||||
title: '分享失败',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
})
|
||||
that.posters = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// #endif
|
||||
// 分享关闭
|
||||
listenerActionClose: function() {
|
||||
this.posters = false;
|
||||
@@ -293,16 +371,6 @@
|
||||
});
|
||||
});
|
||||
},
|
||||
// 授权关闭
|
||||
authColse: function(e) {
|
||||
this.isShowAuth = e;
|
||||
},
|
||||
// 授权后回调
|
||||
onLoadFun: function(e) {
|
||||
this.userInfo = e;
|
||||
app.globalData.openPages = '/pages/activity/goods_combination_status/index?id=' + this.pinkId;
|
||||
this.getCombinationPink();
|
||||
},
|
||||
/**
|
||||
* 购物车手动填写
|
||||
*
|
||||
@@ -364,9 +432,13 @@
|
||||
}
|
||||
},
|
||||
ChangeCartNum: function(res) {
|
||||
//changeValue:是否 加|减
|
||||
//获取当前变动属性
|
||||
let productSelect = this.productValue[this.attrValue];
|
||||
if (this.onceNum === productSelect.cart_num) {
|
||||
return this.$util.Tips({
|
||||
title: `该商品每次限购${this.onceNum}${this.storeCombination.unitName}`
|
||||
});
|
||||
}
|
||||
if (this.cart_num) {
|
||||
productSelect.cart_num = this.cart_num;
|
||||
this.attr.productSelect.cart_num = this.cart_num;
|
||||
@@ -534,11 +606,15 @@
|
||||
});
|
||||
}
|
||||
//#endif
|
||||
|
||||
//#ifdef APP-PLUS
|
||||
this.posters = true;
|
||||
//#endif
|
||||
},
|
||||
goOrder: function() {
|
||||
var that = this;
|
||||
uni.navigateTo({
|
||||
url: '/pages/order_details/index?order_id=' + that.currentPinkOrder
|
||||
url: '/pages/order/order_details/index?order_id=' + that.currentPinkOrder
|
||||
});
|
||||
},
|
||||
//拼团列表
|
||||
@@ -588,6 +664,8 @@
|
||||
var that = this;
|
||||
getCombinationPink(that.pinkId)
|
||||
.then(res => {
|
||||
that.openPages = '/pages/activity/goods_combination_status/index?id=' + that.pinkId +
|
||||
"&spread=" + that.uid;
|
||||
let storeCombination = res.data.storeCombination;
|
||||
res.data.pinkT.stop_time = parseInt(res.data.pinkT.stopTime);
|
||||
that.$set(that, 'storeCombination', storeCombination);
|
||||
@@ -639,7 +717,7 @@
|
||||
'onMenuShareTimeline'
|
||||
], configTimeline)
|
||||
.then(res => {
|
||||
console.log(res);
|
||||
|
||||
})
|
||||
.catch(res => {
|
||||
if (res.is_ready) {
|
||||
@@ -679,6 +757,37 @@
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.generate-posters {
|
||||
width: 100%;
|
||||
height: 170rpx;
|
||||
background-color: #fff;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: 300;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
|
||||
border-top: 1rpx solid #eee;
|
||||
}
|
||||
|
||||
.generate-posters.on {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.generate-posters .item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.generate-posters .item .iconfont {
|
||||
font-size: 80rpx;
|
||||
color: #5eae72;
|
||||
}
|
||||
|
||||
.generate-posters .item .iconfont.icon-haibao {
|
||||
color: #5391f1;
|
||||
}
|
||||
.pinkT {
|
||||
position: relative;
|
||||
|
||||
@@ -686,7 +795,7 @@
|
||||
position: absolute;
|
||||
width: 72rpx;
|
||||
height: 30rpx;
|
||||
background-color: #E93323;
|
||||
@include main_bg_color(theme);
|
||||
border-radius: 15rpx;
|
||||
font-size: 20rpx;
|
||||
line-height: 30rpx;
|
||||
@@ -696,7 +805,9 @@
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.bg-color-red{
|
||||
@include main_bg_color(theme);
|
||||
}
|
||||
.canvas {
|
||||
position: fixed;
|
||||
opacity: 0;
|
||||
@@ -745,11 +856,11 @@
|
||||
|
||||
/*开团*/
|
||||
.group-con .header {
|
||||
width: 100%;
|
||||
height: 186rpx;
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #f5f5f5;
|
||||
padding: 0 30rpx;
|
||||
margin: 20rpx 30rpx 0;
|
||||
border-radius: 14rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -766,7 +877,7 @@
|
||||
height: 140rpx;
|
||||
}
|
||||
|
||||
.group-con .header .pictrue img {
|
||||
.group-con .header .pictrue image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 6rpx;
|
||||
@@ -795,16 +906,20 @@
|
||||
font-size: 20rpx;
|
||||
vertical-align: 4rpx;
|
||||
margin-left: 15rpx;
|
||||
@include main_color(theme);
|
||||
@include coupons_border_color(theme);
|
||||
}
|
||||
|
||||
.group-con .wrapper {
|
||||
background-color: #fff;
|
||||
margin-top: 20rpx;
|
||||
padding: 2rpx 0 35rpx 0;
|
||||
margin: 20rpx 30rpx 0;
|
||||
border-radius: 14rpx;
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.group-con .wrapper .title {
|
||||
margin-top: 30rpx;
|
||||
padding-top: 30rpx;
|
||||
}
|
||||
|
||||
.group-con .wrapper .title .line {
|
||||
@@ -866,14 +981,14 @@
|
||||
margin: 0 0 29rpx 35rpx;
|
||||
}
|
||||
|
||||
.group-con .wrapper .list .pictrue img {
|
||||
.group-con .wrapper .list .pictrue image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
border: 2rpx solid #e93323;
|
||||
@include coupons_border_color(theme);
|
||||
}
|
||||
|
||||
.group-con .wrapper .list .pictrue img.img-none {
|
||||
.group-con .wrapper .list .pictrue image.img-none {
|
||||
border: none;
|
||||
}
|
||||
|
||||
@@ -897,6 +1012,7 @@
|
||||
line-height: 86rpx;
|
||||
color: #fff;
|
||||
margin: 21rpx auto 0 auto;
|
||||
|
||||
}
|
||||
|
||||
.group-con .wrapper .cancel,
|
||||
@@ -905,6 +1021,7 @@
|
||||
font-size: 24rpx;
|
||||
color: #282828;
|
||||
padding-top: 30rpx;
|
||||
padding-bottom:30rpx;
|
||||
}
|
||||
|
||||
.group-con .wrapper .cancel .iconfont {
|
||||
@@ -922,7 +1039,8 @@
|
||||
|
||||
.group-con .group-recommend {
|
||||
background-color: #fff;
|
||||
margin-top: 25rpx;
|
||||
margin: 20rpx 30rpx 0;
|
||||
border-radius: 14rpx;
|
||||
}
|
||||
|
||||
.group-con .group-recommend .title {
|
||||
@@ -948,17 +1066,17 @@
|
||||
}
|
||||
|
||||
.group-con .group-recommend .list .item {
|
||||
width: 210rpx;
|
||||
width: 190rpx;
|
||||
margin: 0 0 25rpx 30rpx;
|
||||
}
|
||||
|
||||
.group-con .group-recommend .list .item .pictrue {
|
||||
width: 100%;
|
||||
height: 210rpx;
|
||||
height: 190rpx;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.group-con .group-recommend .list .item .pictrue img {
|
||||
.group-con .group-recommend .list .item .pictrue image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 10rpx;
|
||||
@@ -975,9 +1093,7 @@
|
||||
border-radius: 0 18rpx 18rpx 0;
|
||||
font-size: 20rpx;
|
||||
color: #fff;
|
||||
background-image: linear-gradient(to right, #fb5445 0%, #e93323 100%);
|
||||
background-image: -webkit-linear-gradient(to right, #fb5445 0%, #e93323 100%);
|
||||
background-image: -moz-linear-gradient(to right, #fb5445 0%, #e93323 100%);
|
||||
@include main_bg_color(theme);
|
||||
}
|
||||
|
||||
.group-con .group-recommend .list .item .name {
|
||||
@@ -1004,4 +1120,7 @@
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.font_price{
|
||||
@include price_color(theme);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,70 +1,74 @@
|
||||
<template>
|
||||
<div>
|
||||
<view class='flash-sale'>
|
||||
<!-- #ifdef H5 -->
|
||||
<view class='iconfont icon-xiangzuo' @tap='goBack' :style="'top:'+ (navH/2) +'rpx'" v-if="returnShow"></view>
|
||||
<!-- #endif -->
|
||||
<view class="saleBox"></view>
|
||||
<view class="header" v-if="dataList.length">
|
||||
<swiper indicator-dots="true" autoplay="true" :circular="circular" interval="3000" duration="1500"
|
||||
indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">
|
||||
<block v-for="(items,index) in dataList[active].slide" :key="index">
|
||||
<swiper-item class="borRadius14">
|
||||
<image :src="items.sattDir" class="slide-image borRadius14" lazy-load></image>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
|
||||
</view>
|
||||
<view class="seckillList acea-row row-between-wrapper">
|
||||
<view class="priceTag">
|
||||
<image src="/static/images/priceTag.png"></image>
|
||||
</view>
|
||||
<view class='timeLsit'>
|
||||
<scroll-view class="scroll-view_x" scroll-x scroll-with-animation :scroll-left="scrollLeft"
|
||||
style="width:auto;overflow:hidden;">
|
||||
<block v-for="(item,index) in dataList" :key='index'>
|
||||
<view @tap='settimeList(item,index)' class='item' :class="active == index?'on':''">
|
||||
<view class='time'>{{item.time.split(',')[0]}}</view>
|
||||
<view class="state">{{item.statusName}}</view>
|
||||
</view>
|
||||
<view :data-theme="theme">
|
||||
<skeleton :show="showSkeleton" :isNodes="isNodes" ref="skeleton" loading="chiaroscuro" selector="skeleton"
|
||||
bgcolor="#FFF"></skeleton>
|
||||
<view class="skeleton" :style="{visibility: showSkeleton ? 'hidden' : 'visible'}">
|
||||
<view class="combinationBj"></view>
|
||||
<view class='flash-sale'>
|
||||
<!-- #ifdef H5 -->
|
||||
<view class='iconfont icon-xiangzuo' @tap='goBack' :style="'top:'+ (navH/2) +'rpx'" v-if="returnShow"></view>
|
||||
<!-- #endif -->
|
||||
<view class="saleBox"></view>
|
||||
<view class="header skeleton-rect" v-if="dataList.length">
|
||||
<swiper indicator-dots="true" autoplay="true" :circular="circular" interval="3000" duration="1500"
|
||||
indicator-color="rgba(255,255,255,0.6)" indicator-active-color="#fff">
|
||||
<block v-for="(items,index) in dataList[active].slide" :key="index">
|
||||
<swiper-item class="borRadius14">
|
||||
<image :src="items.sattDir" class="slide-image borRadius14" lazy-load></image>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</scroll-view>
|
||||
</swiper>
|
||||
|
||||
</view>
|
||||
<view class="seckillList acea-row row-between-wrapper">
|
||||
<view class="priceTag skeleton-rect">
|
||||
<image :src="urlDomain+'crmebimage/perset/staticImg/priceTag.png'"></image>
|
||||
</view>
|
||||
<view class='timeLsit'>
|
||||
<scroll-view class="scroll-view_x" scroll-x scroll-with-animation :scroll-left="scrollLeft"
|
||||
style="width:auto;overflow:hidden;">
|
||||
<block v-for="(item,index) in dataList" :key='index'>
|
||||
<view @tap='settimeList(item,index)' class='item' :class="active == index?'on':''">
|
||||
<view class='time'>{{item.time.split(',')[0]}}</view>
|
||||
<view class="state">{{item.statusName}}</view>
|
||||
</view>
|
||||
</block>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='list pad30' v-if='seckillList.length>0'>
|
||||
<block v-for="(item,index) in seckillList" :key='index'>
|
||||
<view class='item acea-row row-between-wrapper' @tap='goDetails(item)'>
|
||||
<view class='pictrue skeleton-rect'>
|
||||
<image :src='item.image'></image>
|
||||
</view>
|
||||
<view class='text acea-row row-column-around'>
|
||||
<view class='name line1 skeleton-rect'>{{item.title}}</view>
|
||||
<view class='money skeleton-rect'><text class="font_color">￥</text>
|
||||
<text class='num font_color'>{{item.price}}</text>
|
||||
<text class="y_money">￥{{item.otPrice}}</text>
|
||||
</view>
|
||||
<view class="limit skeleton-rect">限量 <text class="limitPrice">{{item.quota}} {{item.unitName}}</text>
|
||||
</view>
|
||||
<view class="progress skeleton-rect">
|
||||
<view class='bg-reds' :style="'width:'+item.percent+'%;'"></view>
|
||||
<view class='piece'>已抢{{item.percent}}%</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='grab bg_color' v-if="status == 2">马上抢</view>
|
||||
<view class='grab bg_color' v-else-if="status == 1">未开始</view>
|
||||
<view class='grab bg-color-hui' v-else>已结束</view>
|
||||
</view>
|
||||
</block>
|
||||
</view>
|
||||
</view>
|
||||
<view class='list pad30' v-if='seckillList.length>0'>
|
||||
<block v-for="(item,index) in seckillList" :key='index'>
|
||||
<view class='item acea-row row-between-wrapper' @tap='goDetails(item)'>
|
||||
<view class='pictrue'>
|
||||
<image :src='item.image'></image>
|
||||
</view>
|
||||
<view class='text acea-row row-column-around'>
|
||||
<view class='name line1'>{{item.title}}</view>
|
||||
<view class='money'><text class="font-color">￥</text>
|
||||
<text class='num font-color'>{{item.price}}</text>
|
||||
<text class="y_money">￥{{item.otPrice}}</text>
|
||||
</view>
|
||||
<view class="limit">限量 <text class="limitPrice">{{item.quota}} {{item.unitName}}</text>
|
||||
</view>
|
||||
<view class="progress">
|
||||
<view class='bg-reds' :style="'width:'+item.percent+'%;'"></view>
|
||||
<view class='piece'>已抢{{item.percent}}%</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='grab bg-color' v-if="status == 2">马上抢</view>
|
||||
<view class='grab bg-color' v-else-if="status == 1">未开始</view>
|
||||
<view class='grab bg-color-hui' v-else>已结束</view>
|
||||
</view>
|
||||
</block>
|
||||
<view class='noCommodity' v-if="seckillList.length == 0 && (page != 1 || active== 0)">
|
||||
<view class='pictrue'>
|
||||
<image :src="urlDomain+'crmebimage/perset/staticImg/noShopper.png'"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='noCommodity' v-if="seckillList.length == 0 && (page != 1 || active== 0)">
|
||||
<view class='pictrue'>
|
||||
<image src='../../../static/images/noShopper.png'></image>
|
||||
</view>
|
||||
</view>
|
||||
<home></home>
|
||||
</div>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -72,14 +76,14 @@
|
||||
getSeckillHeaderApi,
|
||||
getSeckillList
|
||||
} from '../../../api/activity.js';
|
||||
import home from '@/components/home/index.vue';
|
||||
import animationType from '@/utils/animationType.js'
|
||||
let app = getApp();
|
||||
export default {
|
||||
components: {
|
||||
home
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
urlDomain: this.$Cache.get("imgHost"),
|
||||
showSkeleton: true, //骨架屏显示隐藏
|
||||
isNodes: 0, //控制什么时候开始抓取元素节点,只要数值改变就重新抓取
|
||||
circular: true,
|
||||
autoplay: true,
|
||||
interval: 500,
|
||||
@@ -94,16 +98,21 @@
|
||||
countDownMinute: "00",
|
||||
countDownSecond: "00",
|
||||
page: 1,
|
||||
limit: 4,
|
||||
limit: 10,
|
||||
loading: false,
|
||||
loadend: false,
|
||||
pageloading: false,
|
||||
dataList: [],
|
||||
returnShow: true,
|
||||
navH: ''
|
||||
navH: '',
|
||||
theme:app.globalData.theme
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
let that = this;
|
||||
setTimeout(() => {
|
||||
this.isNodes++;
|
||||
}, 500);
|
||||
var pages = getCurrentPages();
|
||||
this.returnShow = pages.length===1?false:true;
|
||||
// #ifdef H5
|
||||
@@ -117,13 +126,22 @@
|
||||
},
|
||||
getSeckillConfig: function() {
|
||||
let that = this;
|
||||
//if(that.showSkeleton) that.dataList = [{slide:''}]
|
||||
that.seckillList = [{image:'',otPrice:'',percent:'',price:'',title:''}];
|
||||
getSeckillHeaderApi().then(res => {
|
||||
if(res.data == ''){
|
||||
this.$util.Tips({
|
||||
title: '暂无秒杀活动'
|
||||
}, {
|
||||
url: '/pages/index/index'
|
||||
});
|
||||
return;
|
||||
}
|
||||
that.seckillList = [];
|
||||
res.data.map(item => {
|
||||
item.slide = JSON.parse(item.slide)
|
||||
})
|
||||
that.dataList = res.data;
|
||||
that.getSeckillList();
|
||||
that.seckillList = [];
|
||||
that.page = 1;
|
||||
that.status = that.dataList[that.active].status;
|
||||
that.getSeckillList();
|
||||
@@ -138,48 +156,76 @@
|
||||
};
|
||||
if (that.loadend) return;
|
||||
if (that.pageloading) return;
|
||||
this.pageloading = true
|
||||
that.pageloading = true
|
||||
getSeckillList(that.dataList[that.active].id, data).then(res => {
|
||||
// that.seckillList = [];
|
||||
var seckillList = res.data.list;
|
||||
var loadend = seckillList.length < that.limit;
|
||||
that.seckillList = that.seckillList.concat(seckillList);
|
||||
that.page++;
|
||||
that.seckillList = that.seckillList.concat(seckillList),
|
||||
that.page = that.page;
|
||||
that.page = that.page;
|
||||
that.pageloading = false;
|
||||
that.loadend = loadend;
|
||||
// #ifdef H5
|
||||
that.setShare();
|
||||
// #endif
|
||||
setTimeout(() => {
|
||||
that.showSkeleton = false
|
||||
}, 1000)
|
||||
}).catch(err => {
|
||||
that.pageloading = false
|
||||
});
|
||||
},
|
||||
settimeList: function(item, index) {
|
||||
var that = this;
|
||||
this.active = index
|
||||
if (that.interval) {
|
||||
clearInterval(that.interval);
|
||||
that.interval = null
|
||||
if(index !== this.active){
|
||||
var that = this;
|
||||
this.active = index
|
||||
if (that.interval) {
|
||||
clearInterval(that.interval);
|
||||
that.interval = null
|
||||
}
|
||||
that.interval = 0,
|
||||
that.countDownHour = "00";
|
||||
that.countDownMinute = "00";
|
||||
that.countDownSecond = "00";
|
||||
that.status = that.dataList[that.active].status;
|
||||
that.loadend = false;
|
||||
that.page = 1;
|
||||
that.seckillList = [];
|
||||
// wxh.time(e.currentTarget.dataset.stop, that);
|
||||
that.getSeckillList();
|
||||
}
|
||||
that.interval = 0,
|
||||
that.countDownHour = "00";
|
||||
that.countDownMinute = "00";
|
||||
that.countDownSecond = "00";
|
||||
that.status = that.dataList[that.active].status;
|
||||
that.loadend = false;
|
||||
that.page = 1;
|
||||
that.seckillList = [];
|
||||
// wxh.time(e.currentTarget.dataset.stop, that);
|
||||
that.getSeckillList();
|
||||
},
|
||||
goDetails(item) {
|
||||
uni.navigateTo({
|
||||
animationType: animationType.type, animationDuration: animationType.duration,
|
||||
url: '/pages/activity/goods_seckill_details/index?id=' + item.id
|
||||
})
|
||||
}
|
||||
},
|
||||
setShare: function() {
|
||||
this.$wechat.isWeixin() &&
|
||||
this.$wechat.wechatEvevt([
|
||||
"updateAppMessageShareData",
|
||||
"updateTimelineShareData",
|
||||
"onMenuShareAppMessage",
|
||||
"onMenuShareTimeline"
|
||||
], {
|
||||
desc: this.seckillList[0].title,
|
||||
title: this.seckillList[0].title,
|
||||
link: location.href,
|
||||
imgUrl:this.seckillList[0].image
|
||||
}).then(res => {
|
||||
}).catch(err => {
|
||||
console.log(err);
|
||||
});
|
||||
},
|
||||
},
|
||||
/**
|
||||
* 页面上拉触底事件的处理函数
|
||||
*/
|
||||
onReachBottom: function() {
|
||||
this.getSeckillList();
|
||||
var that = this;
|
||||
that.getSeckillList();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -258,7 +304,7 @@
|
||||
}
|
||||
|
||||
.flash-sale .timeLsit .item.on .time {
|
||||
color: $theme-color;
|
||||
@include main_color(theme);
|
||||
}
|
||||
|
||||
.flash-sale .timeLsit .item.on .state {
|
||||
@@ -266,8 +312,7 @@
|
||||
line-height: 30rpx;
|
||||
border-radius: 15rpx;
|
||||
width: 128rpx;
|
||||
/* padding: 0 12rpx; */
|
||||
background: linear-gradient(90deg, rgba(252, 25, 75, 1) 0%, rgba(252, 60, 32, 1) 100%);
|
||||
@include main_bg_color(theme);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@@ -329,7 +374,7 @@
|
||||
|
||||
.flash-sale .list .item .text .money {
|
||||
font-size: 30rpx;
|
||||
color: $theme-color;
|
||||
@include price_color(theme);
|
||||
}
|
||||
|
||||
.flash-sale .list .item .text .money .num {
|
||||
@@ -368,7 +413,7 @@
|
||||
width: 0;
|
||||
height: 100%;
|
||||
transition: width 0.6s ease;
|
||||
background: linear-gradient(90deg, rgba(233, 51, 35, 1) 0%, rgba(255, 137, 51, 1) 100%);
|
||||
@include second-gradient(theme);
|
||||
}
|
||||
|
||||
.flash-sale .list .item .text .progress .piece {
|
||||
@@ -393,14 +438,16 @@
|
||||
bottom: 30rpx;
|
||||
background: #bbbbbb;
|
||||
}
|
||||
|
||||
.bg_color{
|
||||
@include main_bg_color(theme);
|
||||
}
|
||||
.flash-sale .saleBox {
|
||||
width: 100%;
|
||||
height: 298rpx;
|
||||
/* #ifdef MP */
|
||||
height: 300rpx;
|
||||
/* #endif */
|
||||
background: rgba(233, 51, 35, 1);
|
||||
@include main_bg_color(theme);
|
||||
border-radius: 0 0 50rpx 50rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because one or more lines are too long
BIN
app/pages/activity/images/bargain_post1.png
Normal file
BIN
app/pages/activity/images/bargain_post1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
app/pages/activity/images/bargain_post2.png
Normal file
BIN
app/pages/activity/images/bargain_post2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
app/pages/activity/images/bargain_post3.png
Normal file
BIN
app/pages/activity/images/bargain_post3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
BIN
app/pages/activity/images/bargain_post4.png
Normal file
BIN
app/pages/activity/images/bargain_post4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
BIN
app/pages/activity/images/bargain_post5.png
Normal file
BIN
app/pages/activity/images/bargain_post5.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
app/pages/activity/images/n1.png
Normal file
BIN
app/pages/activity/images/n1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
BIN
app/pages/activity/images/n2.png
Normal file
BIN
app/pages/activity/images/n2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
app/pages/activity/images/n3.png
Normal file
BIN
app/pages/activity/images/n3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
@@ -33,7 +33,7 @@
|
||||
from:'',
|
||||
storeCombination: {},
|
||||
qrcodeSize: 600,
|
||||
posterbackgd: '/static/images/canbj.png',
|
||||
posterbackgd: `${this.$Cache.get("imgHost")}crmebimage/perset/staticImg/canbj.png`,
|
||||
PromotionCode: '',//二维码
|
||||
canvasStatus: false,
|
||||
imgTop: '' //商品图base64位
|
||||
|
||||
264
app/pages/activity/promotionList/index.vue
Normal file
264
app/pages/activity/promotionList/index.vue
Normal file
@@ -0,0 +1,264 @@
|
||||
<template>
|
||||
<div class="quality-recommend" :data-theme="theme">
|
||||
<view class="saleBox" v-if="typeInfo.pic"></view>
|
||||
<view class="header skeleton-rect" v-if="typeInfo.pic">
|
||||
<view class="borRadius14">
|
||||
<image :src="typeInfo.pic" class="slide-image borRadius14" lazy-load></image>
|
||||
</view>
|
||||
</view>
|
||||
<div class="title acea-row row-center-wrapper">
|
||||
<div class="line"></div>
|
||||
<div class="name">
|
||||
<span class="iconfont icon-jingpintuijian" ></span> {{typeInfo.name}}
|
||||
</div>
|
||||
<div class="line"></div>
|
||||
</div>
|
||||
<view class="wrapper">
|
||||
<view class="list">
|
||||
<view class="item acea-row row-middle" v-for="(item,index) in tempArr" :key="index" @click="toDetail(item.id)">
|
||||
<view class="img_box">
|
||||
<image class="pictrue" :src="item.image"></image>
|
||||
<view :style="{ backgroundImage: `url(${item.activityStyle})` }" class="border-picture"></view>
|
||||
</view>
|
||||
<view class="ml_11 flex-column justify-between">
|
||||
<view class="goods_name">{{item.storeName}}</view>
|
||||
<view class="price flex justify-between">
|
||||
<view>
|
||||
<text class="price_bdg">￥</text>{{item.price}}
|
||||
<text class="otPrice">￥{{item.otPrice}}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='loadingicon acea-row row-center-wrapper' v-if="goodScroll">
|
||||
<text class='loading iconfont icon-jiazai' :hidden='loading==false'></text>
|
||||
</view>
|
||||
<view class="txt-bar" v-if="tempArr.length > 0">我也是有底线的~</view>
|
||||
<emptyPage title="暂无数据~" v-if="tempArr.length == 0"></emptyPage>
|
||||
</view>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import emptyPage from '@/components/emptyPage.vue';
|
||||
import GoodList from '@/components/goodList/index';
|
||||
import {getGroomList} from '@/api/store';
|
||||
import {goPage} from '@/libs/order.js';
|
||||
import {productRank} from '@/api/api.js'
|
||||
import Loading from '@/components/Loading/index.vue';
|
||||
import animationType from '@/utils/animationType.js'
|
||||
let app = getApp()
|
||||
export default {
|
||||
name: 'HotNewGoods',
|
||||
components: {
|
||||
GoodList,
|
||||
emptyPage,
|
||||
Loading
|
||||
},
|
||||
data: function() {
|
||||
return {
|
||||
circular:true,
|
||||
theme:app.globalData.theme,
|
||||
typeInfo:{},
|
||||
loading:false,
|
||||
params: { //精品推荐分页
|
||||
page: 1,
|
||||
limit: 10,
|
||||
},
|
||||
loading: false,
|
||||
goodScroll: true, //精品推荐开关
|
||||
tempArr:[],
|
||||
};
|
||||
},
|
||||
onLoad: function(e) {
|
||||
this.typeInfo = e;
|
||||
uni.setNavigationBarTitle({
|
||||
title: this.typeInfo.name
|
||||
});
|
||||
if(this.typeInfo.name == '商品排行'){
|
||||
this.getProductRank();
|
||||
}else{
|
||||
this.getGroomList();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getGroomList() {
|
||||
this.loading = true
|
||||
if (!this.goodScroll) return
|
||||
getGroomList(this.typeInfo.type, this.params).then(({data}) => {
|
||||
this.goodScroll = data.list.length >= this.params.limit
|
||||
this.loading = false
|
||||
this.params.page++
|
||||
this.tempArr = this.tempArr.concat(data.list)
|
||||
})
|
||||
},
|
||||
getProductRank(){
|
||||
productRank().then(res=>{
|
||||
this.tempArr = res.data;
|
||||
})
|
||||
},
|
||||
toDetail(id){
|
||||
uni.navigateTo({
|
||||
animationType: animationType.type,
|
||||
animationDuration: animationType.duration,
|
||||
url:'/pages/goods/goods_details/index?id=' + id
|
||||
})
|
||||
}
|
||||
},
|
||||
onReachBottom() {
|
||||
if (this.params.page != 1) {
|
||||
this.getGroomList();
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
/deep/ .quality-recommend {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.saleBox{
|
||||
width: 100%;
|
||||
height: 298rpx;
|
||||
/* #ifdef MP */
|
||||
height: 300rpx;
|
||||
/* #endif */
|
||||
@include main_bg_color(theme);
|
||||
border-radius: 0 0 50rpx 50rpx;
|
||||
}
|
||||
.quality-recommend .header {
|
||||
width: 710rpx;
|
||||
height: 330rpx;
|
||||
margin: -276rpx auto 0 auto;
|
||||
border-radius: 14rpx;
|
||||
overflow: hidden;
|
||||
.slide-image{
|
||||
height: 330rpx !important;
|
||||
border-radius: 14rpx;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.quality-recommend .header image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 14rpx;
|
||||
overflow: hidden;
|
||||
img{
|
||||
border-radius: 14rpx;
|
||||
}
|
||||
}
|
||||
.quality-recommend {
|
||||
.wrapper {
|
||||
// background: #fff;
|
||||
.list {
|
||||
width: 690rpx;
|
||||
border-radius: 20rpx;
|
||||
background-color: #fff;
|
||||
margin: 0rpx auto 0 auto;
|
||||
padding: 20rpx 20rpx 30rpx;
|
||||
box-sizing: border-box;
|
||||
.item {
|
||||
background: #fff;
|
||||
margin-top: 26rpx;
|
||||
.img_box{
|
||||
width: 180rpx;
|
||||
height: 180rpx;
|
||||
background: #F3F3F3;
|
||||
position: relative;
|
||||
.pictrue{
|
||||
width:100%;
|
||||
height:100%;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
.rank_bdg{
|
||||
width: 100%;
|
||||
height: 46rpx;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
line-height: 46rpx;
|
||||
}
|
||||
}
|
||||
.ml_11{
|
||||
margin-left: 22rpx;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 20rpx;
|
||||
}
|
||||
.goods_name{
|
||||
width: 420rpx;
|
||||
height: 80rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
line-height: 40rpx;
|
||||
overflow: hidden;
|
||||
text-overflow:ellipsis;
|
||||
white-space: wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
height: 120rpx;
|
||||
font-size: 32rpx;
|
||||
color: #282828;
|
||||
background-color: #f5f5f5;
|
||||
|
||||
.name {
|
||||
margin: 0 20rpx;
|
||||
|
||||
.iconfont {
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 230rpx;
|
||||
height: 2rpx;
|
||||
background-color: #e9e9e9;
|
||||
}
|
||||
}
|
||||
}
|
||||
.price{
|
||||
margin-top: 60rpx;
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
@include price_color(theme);
|
||||
.price_bdg{
|
||||
font-size: 26rpx;
|
||||
}
|
||||
.otPrice{
|
||||
font-size: 24rpx;
|
||||
color: #999999;
|
||||
font-weight: 400;
|
||||
padding-left: 12rpx;
|
||||
text-decoration: line-through;
|
||||
}
|
||||
.cart_icon{
|
||||
width: 48rpx;
|
||||
height: 48rpx;
|
||||
border-radius: 50%;
|
||||
@include main_bg_color(theme);
|
||||
text-align: center;
|
||||
line-height: 40rpx;
|
||||
.iconfont{
|
||||
font-size: 28rpx;
|
||||
font-weight: 400;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.txt-bar {
|
||||
padding: 20rpx 0;
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
color: #666;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
</style>
|
||||
403
app/pages/activity/small_page/index.vue
Normal file
403
app/pages/activity/small_page/index.vue
Normal file
@@ -0,0 +1,403 @@
|
||||
<template>
|
||||
<view id="home" :style="[pageStyle]" class="smallBox" :data-theme="theme">
|
||||
<!-- 组合组件 -->
|
||||
<homeComb v-if="showHomeComb" :bgInfo="bgInfo" :dataConfig="homeCombData" @changeTab="changeTab" :isScrolled="isScrolled" :isSmallPage="isSmallPage"
|
||||
:navIndex="navIndex"></homeComb>
|
||||
<!-- 顶部搜索框 -->
|
||||
<headerSearch :isSmallPage="isSmallPage" v-if="showHeaderSerch" :dataConfig="headerSerchCombData"></headerSearch>
|
||||
<!-- 分类导航 -->
|
||||
<cateNav v-if="showCateNav" :dataConfig="cateNavData" @changeTab="changeTab"></cateNav>
|
||||
<view v-if="navIndex === 0">
|
||||
<block v-for="(item, index) in styleConfig" :key="index">
|
||||
<!-- 新闻简报 -->
|
||||
<news v-if="item.name == 'news'&&!item.isHide" :dataConfig="item"></news>
|
||||
<!-- menu -->
|
||||
<menus v-if="item.name == 'menus'&&!item.isHide" :dataConfig="item"></menus>
|
||||
<!-- 文章列表 -->
|
||||
<articleList v-if="item.name == 'homeArticle'&&!item.isHide" :dataConfig="item"></articleList>
|
||||
<!-- 秒杀 -->
|
||||
<seckill-data v-if="item.name == 'seckill'&&!item.isHide" :dataConfig="item"></seckill-data>
|
||||
<!-- 优惠券 -->
|
||||
<coupon v-if="item.name == 'homeCoupons'&&!item.isHide" :dataConfig="item"></coupon>
|
||||
<!-- 图片魔方 -->
|
||||
<pictureCube v-if="item.name == 'pictureCube'&&!item.isHide" :dataConfig="item"></pictureCube>
|
||||
<!-- 热区 -->
|
||||
<hotSpot v-if="item.name == 'homeHotspot'&&!item.isHide" :dataConfig="item"></hotSpot>
|
||||
<!-- 轮播图 -->
|
||||
<swiperBg v-if="item.name == 'swiperBg'&&!item.isHide" :dataConfig="item"></swiperBg>
|
||||
<!-- 视频 -->
|
||||
<shortVideo v-if="item.name == 'video'&&!item.isHide" :dataConfig="item"></shortVideo>
|
||||
<!-- 辅助线 -->
|
||||
<guide v-if="item.name == 'guide'&&!item.isHide" :dataConfig="item"></guide>
|
||||
<!-- 富文本-->
|
||||
<rich-text-editor v-if="item.name == 'richTextEditor'&&!item.isHide" :dataConfig="item"></rich-text-editor>
|
||||
<!-- 辅助空白-->
|
||||
<blank-page v-if="item.name == 'blankPage'&&!item.isHide" :dataConfig="item"></blank-page>
|
||||
<!-- 标题 -->
|
||||
<home-title v-if="item.name == 'titles'&&!item.isHide" :dataConfig="item"></home-title>
|
||||
<!-- 拼团 -->
|
||||
<group v-if="item.name == 'group'&&!item.isHide" :dataConfig="item"></group>
|
||||
<!-- 砍价 -->
|
||||
<bargain v-if="item.name == 'bargain'&&!item.isHide" :dataConfig="item"></bargain>
|
||||
<!-- 商品列表 -->
|
||||
<goodList v-if="item.name == 'goodList'&&!item.isHide" :dataConfig="item" @detail="goDetail"></goodList>
|
||||
<!-- 选项卡商品列表-->
|
||||
<homeTab v-if="item.name == 'homeTab'&&!item.isHide" :dataConfig="item" @detail="goDetail"></homeTab>
|
||||
<!-- 底部导航-->
|
||||
<page-footer v-if="item.name == 'footer'&&!item.isHide" :dataConfig="item" :isSmallPage="isSmallPage"></page-footer>
|
||||
</block>
|
||||
</view>
|
||||
<!-- 分类页-->
|
||||
<view class="productList" v-if="navIndex > 0 && sortList.length>0">
|
||||
<view class="sort acea-row" :class="sortList.length ? '' : 'no_pad'"
|
||||
:style="{ marginTop: sortMarTop + 'px' }">
|
||||
<navigator hover-class="none"
|
||||
:url="'/pages/goods/goods_list/index?cid=' + item.id + '&title=' + item.name" class="item"
|
||||
v-for="(item, index) in sortList" :key="index" v-if="index<9">
|
||||
<view class="pictrue">
|
||||
<!-- <easy-loadimage :image-src="item.icon" class='slide-image skeleton-rect'>
|
||||
</easy-loadimage> -->
|
||||
<image :src="item.extra" class='slide-image tui-skeleton-rect'></image>
|
||||
</view>
|
||||
<view class="text">{{ item.name }}</view>
|
||||
</navigator>
|
||||
<view class="item" @click="bindMore()" v-if="sortList.length >= 9">
|
||||
<view class="pictrues acea-row row-center-wrapper">
|
||||
<text class="iconfont icon-gengduo2"></text>
|
||||
</view>
|
||||
<view class="text">更多</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 推荐商品，分类商品列表-->
|
||||
<recommend v-if="categoryId>0" ref="recommendIndex" :categoryId='categoryId' :isShowTitle="isShowTitle"
|
||||
@getRecommendLength="getRecommendLength"></recommend>
|
||||
<view class='noCommodity' v-if="isNoCommodity&& navIndex > 0">
|
||||
<view class='pictrue'>
|
||||
<image :src="urlDomain+'crmebimage/presets/noShopper.png'"></image>
|
||||
</view>
|
||||
<text class="text-ccc">暂无商品</text>
|
||||
</view>
|
||||
<!-- <view v-if="bottomNavigationIsCustom" class="footerBottom"></view> -->
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
pagediyInfoApi,
|
||||
getCategoryTwo
|
||||
} from '@/api/api.js';
|
||||
import {
|
||||
mapGetters
|
||||
} from "vuex";
|
||||
import tuiSkeleton from '@/components/base/tui-skeleton.vue';
|
||||
import homeComb from '@/components/homeIndex/homeComb';
|
||||
import seckillData from "@/components/homeIndex/seckill.vue";
|
||||
import coupon from "@/components/homeIndex/coupon.vue";
|
||||
import menus from "@/components/homeIndex/menus.vue";
|
||||
import pictureCube from '@/components/homeIndex/pictureCube'
|
||||
import news from '@/components/homeIndex/news'
|
||||
import goodList from '@/components/homeIndex/goodList'
|
||||
import guide from '@/components/homeIndex/guide';
|
||||
import articleList from '@/components/homeIndex/articleList'
|
||||
import swiperBg from '@/components/homeIndex/swiperBg'
|
||||
import headerSearch from '@/components/homeIndex/headerSearch';
|
||||
import cateNav from '@/components/homeIndex/cateNav';
|
||||
import richTextEditor from '@/components/homeIndex/richTextEditor';
|
||||
import shortVideo from '@/components/homeIndex/video';
|
||||
import homeTab from '@/components/homeIndex/homeTab';
|
||||
import blankPage from '@/components/homeIndex/blankPage';
|
||||
import homeTitle from '@/components/homeIndex/title';
|
||||
import pageFooter from '@/components/homeIndex/pageFoot';
|
||||
import recommend from "@/components/base/recommend.vue";
|
||||
import group from "@/components/homeIndex/group.vue";
|
||||
import hotSpot from '@/components/homeIndex/hotSpot.vue';
|
||||
import bargain from "@/components/homeIndex/bargain.vue";
|
||||
import {
|
||||
goProductDetail
|
||||
} from "../../../libs/order";
|
||||
let app = getApp();
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
urlDomain: this.$Cache.get("imgHost"),
|
||||
theme: app.globalData.theme,
|
||||
isSmallPage: true, //是否是微页面，true是，false不是
|
||||
styleConfig: [],
|
||||
bgColor: '',
|
||||
bgPic: '',
|
||||
bgTabVal: '',
|
||||
isFixed: true,
|
||||
storeHeight: 0,
|
||||
smallPage: false,
|
||||
homeCombData: {},
|
||||
headerSerchCombData: {},
|
||||
sortList: [],
|
||||
sortMarTop: 0,
|
||||
showCateNav: false, //是否显示分类导航组件
|
||||
cateNavData: {}, //分类导航组件数据
|
||||
navIndex: 0,
|
||||
pageStyle: null,
|
||||
cateNavActive: 0,
|
||||
categoryId: 0, //分类id
|
||||
diyId: 0, //diyid
|
||||
isNoCommodity: false,
|
||||
showHomeComb: false,
|
||||
showHeaderSerch: false,
|
||||
domOffsetTop: 50,
|
||||
isScrolled: false,
|
||||
bgInfo:{
|
||||
colorPicker:'#f5f5f5',
|
||||
isBgColor:1,
|
||||
},
|
||||
}
|
||||
},
|
||||
components: {
|
||||
homeComb,
|
||||
tuiSkeleton,
|
||||
seckillData,
|
||||
coupon,
|
||||
menus,
|
||||
pictureCube,
|
||||
news,
|
||||
goodList,
|
||||
articleList,
|
||||
swiperBg,
|
||||
headerSearch,
|
||||
cateNav,
|
||||
guide,
|
||||
richTextEditor,
|
||||
shortVideo,
|
||||
homeTab,
|
||||
blankPage,
|
||||
homeTitle,
|
||||
pageFooter,
|
||||
recommend,
|
||||
group,
|
||||
hotSpot,
|
||||
bargain
|
||||
},
|
||||
computed: mapGetters(['bottomNavigationIsCustom']),
|
||||
onLoad(options) {
|
||||
if (options.scene) {
|
||||
let value = this.$util.getUrlParams(decodeURIComponent(options.scene));
|
||||
if (value.id) this.diyId = Number(value.id);
|
||||
}
|
||||
if (options.id) {
|
||||
this.diyId = Number(options.id);
|
||||
}
|
||||
this.diyData(this.diyId)
|
||||
},
|
||||
// 滚动监听
|
||||
onPageScroll(e) {
|
||||
// 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
|
||||
uni.$emit('scroll');
|
||||
if (e.scrollTop > this.domOffsetTop) {
|
||||
this.isScrolled = true;
|
||||
}
|
||||
if (e.scrollTop < this.domOffsetTop) {
|
||||
this.$nextTick(() => {
|
||||
this.isScrolled = false;
|
||||
});
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
diyData(id) {
|
||||
let that = this;
|
||||
that.styleConfig = [];
|
||||
uni.showLoading({
|
||||
title: '加载中...'
|
||||
});
|
||||
pagediyInfoApi(id).then(res => {
|
||||
uni.setNavigationBarTitle({
|
||||
title: res.data.title
|
||||
});
|
||||
uni.setNavigationBarColor({
|
||||
//必须要16进制小写
|
||||
frontColor: res.data.titleColor,
|
||||
backgroundColor: res.data.titleBgColor.toString().toLowerCase(),
|
||||
})
|
||||
let data = res.data;
|
||||
this.bgInfo.isBgColor=data.isBgColor
|
||||
this.bgInfo.colorPicker=data.colorPicker
|
||||
that.styleConfig = that.$util.objToArr(res.data.value);
|
||||
uni.hideLoading();
|
||||
that.styleConfig.forEach((item) => {
|
||||
if (item.name == 'tabNav'&&!item.isHide) {
|
||||
this.showCateNav = true;
|
||||
this.cateNavData = item;
|
||||
}
|
||||
if (item.name === 'homeComb'&&!item.isHide) {
|
||||
that.showHomeComb = true
|
||||
that.homeCombData = item;
|
||||
}
|
||||
if (item.name === 'headerSerch'&&!item.isHide) {
|
||||
that.showHeaderSerch = true
|
||||
that.headerSerchCombData = item;
|
||||
}
|
||||
});
|
||||
this.pageStyle = {
|
||||
'background-color': data.isBgColor === 1 ? res.data.colorPicker : '',
|
||||
'background-image': data.isBgPic === 1 ? `url(${res.data.bgPic})` : '',
|
||||
'background-repeat': res.data.bgTabVal === 1 ? 'repeat-y' : 'no-repeat',
|
||||
'background-size': res.data.bgTabVal === 2 ? 'cover' : 'contain'
|
||||
};
|
||||
setTimeout(() => {
|
||||
this.isNodes++;
|
||||
}, 100);
|
||||
}).catch(err => {
|
||||
return that.$util.Tips({
|
||||
title: err
|
||||
});
|
||||
uni.hideLoading();
|
||||
})
|
||||
},
|
||||
getRecommendLength(e) {
|
||||
this.isNoCommodity = e == 0 ? true : false;
|
||||
},
|
||||
// 分类切换点击
|
||||
changeTab(index, item) {
|
||||
//type=0微页面，1分类，2首页
|
||||
this.cateNavActive = index;
|
||||
if (item.type == 1) {
|
||||
this.navIndex = 1;
|
||||
if (!item.val) {
|
||||
this.sortList = [];
|
||||
this.categoryId = 0;
|
||||
this.$util.Tips({
|
||||
title: "请在平台端选择商品分类！确保加载商品分类数据。"
|
||||
});
|
||||
return;
|
||||
} else {
|
||||
getCategoryTwo(item.val).then(res => {
|
||||
this.sortList = res.data;
|
||||
// #ifdef H5
|
||||
self.sortMarTop = 10;
|
||||
// #endif
|
||||
});
|
||||
this.categoryId = item.val;
|
||||
this.isShowTitle = false;
|
||||
}
|
||||
} else if (item.type == 0) {
|
||||
this.navIndex = 0;
|
||||
this.isShowTitle = true;
|
||||
this.categoryId = 0;
|
||||
if (!item.val) {
|
||||
return this.$util.Tips({
|
||||
title: "请在平台端选择微页面链接！确保加载微页面数据。"
|
||||
});
|
||||
} else {
|
||||
this.styleConfig = [];
|
||||
this.diyData(item.val, true);
|
||||
}
|
||||
} else {
|
||||
this.categoryId = 0;
|
||||
this.navIndex = 0;
|
||||
this.styleConfig = [];
|
||||
this.diyData(this.diyId, false);
|
||||
}
|
||||
},
|
||||
// 去商品详情页
|
||||
goDetail(item) {
|
||||
goProductDetail(item.id, 0, '')
|
||||
},
|
||||
bindMore(){
|
||||
uni.switchTab({
|
||||
url: `/pages/goods_cate/goods_cate`
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.smallBox {
|
||||
padding-bottom: calc(130rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
|
||||
padding-bottom: calc(130rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
|
||||
}
|
||||
|
||||
.productList {
|
||||
background-color: #F5F5F5;
|
||||
margin-top: 20rpx;
|
||||
|
||||
.sort {
|
||||
width: 710rpx;
|
||||
max-height: 380rpx;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
border-radius: 16rpx;
|
||||
padding: 0rpx 0rpx 20rpx 0rpx !important;
|
||||
flex-wrap: wrap;
|
||||
margin: 25rpx auto 0 auto;
|
||||
|
||||
&.no_pad {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.item {
|
||||
width: 20%;
|
||||
margin-top: 20rpx;
|
||||
text-align: center;
|
||||
|
||||
.pictrues {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
background: #F5F5F5;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.pictrue {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
background: #F5F5F5;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.slide-image {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/deep/ .easy-loadimage,
|
||||
uni-image,
|
||||
.easy-loadimage {
|
||||
width: 90rpx;
|
||||
height: 90rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.text {
|
||||
color: #272727;
|
||||
font-size: 24rpx;
|
||||
margin-top: 10rpx;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.productList .list.on {
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #f6f6f6;
|
||||
}
|
||||
|
||||
.productList .list .item {
|
||||
width: 345rpx;
|
||||
margin-top: 20rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 10rpx;
|
||||
|
||||
.name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
.name_text {
|
||||
display: inline-block;
|
||||
max-width: 200rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
BIN
app/pages/activity/static/vacancy.png
Normal file
BIN
app/pages/activity/static/vacancy.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 174 B |
Binary file not shown.
|
Before Width: | Height: | Size: 686 B |
Binary file not shown.
|
Before Width: | Height: | Size: 929 B |
Binary file not shown.
|
Before Width: | Height: | Size: 145 B |
Binary file not shown.
|
Before Width: | Height: | Size: 662 B |
Reference in New Issue
Block a user