改造排行榜

This commit is contained in:
唐明明
2022-08-05 12:04:11 +08:00
18 changed files with 12513 additions and 7039 deletions

View File

@@ -41,10 +41,10 @@
<u-popup :show="dtShow" mode="bottom" @close="dtShow = false " :round="10">
<view class="dt-type">
<view class="dt-item" @click="dtSelect('wbt')">
<!-- <view class="dt-item" @click="dtSelect('wbt')">
<image src="/static/icon/pay_wbt.png" mode="widthFix" />
文版通充值
</view>
</view> -->
<view class="dt-item" @click="dtSelect('wchat')">
<image src="/static/icon/pay_wechat.png" mode="widthFix" />
微信充值
@@ -88,6 +88,7 @@
switch(type){
case 'wchat':
this.onTransfer('AccountRecharge');
this.dtShow = false;
break;
case 'wbt':
wbtCheck().then(res=>{

125
pages/group-book/index.vue Normal file
View File

@@ -0,0 +1,125 @@
<template>
<view class="groupBook">
<view class="top">
<view class="title">爆款推荐</view>
<view>省钱省心限时拼</view>
</view>
<!-- 有数据 -->
<scroll-view scroll-y="true" class="scroll" @scrolltolower='scrolltolower' v-if="lists.length>0">
<block v-for="(item,index) in lists" :key="index">
<pinGoodsItem :item="item" @goPin="goPin" />
</block>
</scroll-view>
<!-- 没数据 -->
<scroll-view scroll-y="true" class="scroll" v-else>
<view class="vertical pages-empty" style="padding-top: 200rpx;">
<u-empty
icon="http://cdn.uviewui.com/uview/empty/list.png"
textColor="#999"
text="暂无任何拼单商品~"
/>
</view>
</scroll-view>
</view>
</template>
<script>
import pinGoodsItem from '@/components/pin-goods-item/index.vue'
import {
pinList
} from '@/apis/interfaces/pin.js'
export default {
components: {
pinGoodsItem
},
data() {
return {
lists: [],
page: 1,
has_more: true,
};
},
onLoad() {
this.getList()
},
methods: {
getList() {
pinList({
page: this.page
}).then(res => {
this.lists = this.lists.concat(res.data)
this.has_more = res.page.has_more
}).catch(err => {
uni.showToast({
title: err.message,
icon: "none",
mask: true
})
})
},
// 触底获取更多~
scrolltolower() {
if (this.has_more) {
this.page = this.page + 1
this.getList()
}else{
uni.showToast({
title:'没有更多~',
icon:'none'
})
}
},
// 马上拼团
goPin(id) {
console.log('fule gopin....')
uni.navigateTo({
url:'/pages/store/goods?id='+id
})
}
}
}
</script>
<style lang="scss">
.groupBook {
width: 100%;
min-height: 100vh;
position: relative;
background: $window-color;
box-sizing: border-box;
position: relative;
.top {
position: absolute;
top: 0;
left: 0;
font-size: $title-size - 2;
color: #fff;
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: $padding;
box-sizing: border-box;
background: linear-gradient(to bottom, #22aa98, rgba(255, 255, 255, 0));
padding-bottom: 40vh;
z-index: 1;
.title {
font-size: 40rpx;
font-weight: bold;
}
}
.scroll {
height: 100vh;
position: relative;
padding: $padding * 4 $padding $padding $padding;
box-sizing: border-box;
z-index: 2;
}
}
</style>

View File

@@ -387,7 +387,6 @@
icon: 'none'
})
}
}
}
</script>

View File

@@ -1,48 +1,53 @@
<template>
<view class="rank">
<view class="rank_top">
<view class="rank_top_left">
<image class="rank_title" src="../../static/rank/rank_txt.png" mode="widthFix" />
<view class="rank_sub_title" @click="toHelp">
共力家族 周会员推荐
<image src="/static/rank/help.png" mode="widthFix" />
</view>
<view class="rank_sub_title" @click="toHelp"> 共力家族 周会员邀请 <image src="/static/rank/help.png" mode="widthFix" /> </view>
</view>
<image class="rank_top_right" src="../../static/rank/rank.png" mode="widthFix" />
</view>
<view class="rank_type">
<view :class="['rank_type_item',type === '1'?'rank_type_item_active':'']" @click="changeType('1')"> 上周加成榜</view>
<view :class="['rank_type_item',type === '2'?'rank_type_item_active':'']" @click="changeType('2')">本周推荐榜</view>
</view>
<view class="rank_update_time" v-if="lists.length > 0">
<view class="title"> 加成{{type === '1'?'结束':'生效'}}倒计时 : </view>
<u-count-down :time="end_timestamp" format="DD:HH:mm:ss" autoStart millisecond @change="onChange">
</view>
<!-- @click="click" -->
<u-sticky bgColor="#34CE98">
<u-tabs
:list="tabs"
:scrollable="false"
lineColor="white"
:activeStyle="{color: 'white', fontWeight: 'bold', fontSize: '14px'}"
:inactiveStyle="{color: 'rgba(255,255,255,.6)', fontSize: '14px'}"
:itemStyle="{'height': '50px'}"
@click="onTabs"
></u-tabs>
</u-sticky>
<view class="rank_update_time" v-if="type != '3'&& type != '4'">
<view class="title"> 加成{{type === '1'?'结束':'生效'}}倒计时:</view>
<u-count-down
ref="countDown"
format="DD:HH:mm:ss"
:time="end_timestamp"
:autoStart="false"
@change="downTime"
>
<view class="time">
<view class="time__item">
<view class="time__item_no">{{ timeData.days }} </view>
<text class="time__item_no">{{ timeData.days > 9 ? timeData.days: '0' + timeData.days }} </text>
</view>
<view class="time__item">
<view class="time__item_no">{{ timeData.hours>9?timeData.hours:'0'+timeData.hours}}</view>
<text class="time__item_no">{{ timeData.hours > 9 ? timeData.hours : '0' + timeData.hours}}</text>
</view>
<view class="time__item">
<view class="time__item_no">{{ timeData.minutes>9?timeData.minutes:'0'+timeData.minutes}}</view>
<text class="time__item_no">{{ timeData.minutes > 9 ? timeData.minutes : '0' + timeData.minutes}}</text>
</view>
<view class="time__item">
<view class="time__item_no">{{ timeData.seconds>9?timeData.seconds:'0'+timeData.seconds}}</view>
<text class="time__item_no">{{ timeData.seconds > 9 ? timeData.seconds : '0' + timeData.seconds}}</text>
</view>
</view>
</u-count-down>
</view>
<view class="list">
<block v-if="lists.length>0">
<view class="list_item" v-for="(item,index) in lists" :keys='index'>
<view class="no">
<view class="no">
<image v-if="index < 3" class="image" :src="'/static/rank/rank-'+(index+1)+'.png'"
mode="widthFix" />
<view v-else class="txt"> {{index + 1}} </view>
@@ -55,15 +60,17 @@
</view>
<view class="tuijian">
<view class="num"> {{item.number}}</view>
<view class="title">推荐会员</view>
<view class="title">{{type === '4'?'邀请用户':'邀请会员'}}</view>
</view>
</view>
</view>
</block>
<block v-else>
<view class="vertical pages-empty">
<u-empty icon="http://cdn.uviewui.com/uview/empty/list.png" textColor="#999"
:text="type === '1'?'上周无加成数据':'当前暂无推荐数据'">
<u-empty
icon="http://cdn.uviewui.com/uview/empty/list.png"
textColor="#999"
:text="type === '1'?'上周无加成数据':'当前暂无邀请数据'">
</u-empty>
</view>
</block>
@@ -75,51 +82,78 @@
<script>
import {
week,
week_mul
week_mul,
total,
totaluser
} from '@/apis/interfaces/rank.js'
export default {
data() {
return {
end_timestamp: 0,
lists: [],
timeData: {},
type: "1", // 1 加成榜 2推荐榜
page_id: '',
lists : [],
timeData : {
days : 0,
hours : 0,
minutes : 0,
seconds : 0
},
type : '1', // 1加成榜 2邀请榜 3会员邀请 4用户邀请
page_id : '',
tabs : [
{name: '上周加成榜', type: '1'},
{name: '本周邀请榜', type: '2'},
{name: '会员邀请榜', type: '3'},
{name: '用户邀请榜', type: '4'},
],
}
},
onShow() {
this.getList();
},
methods: {
onChange(e) {
methods: {
onTabs(e){
console.log(e)
if(this.type == e.type){
return
}
if(this.$refs.countDown){
this.$refs.countDown.pause()
}
uni.showLoading({
title: '加载中...'
})
this.type = e.type
this.lists = []
this.getList()
},
downTime(e) {
this.timeData = e
},
changeType(type) {
if (this.type !== type) {
this.lists = [];
this.type = type;
uni.showLoading({})
this.getList();
}
},
},
toHelp() {
uni.navigateTo({
url: 'pages/vip/agreement?id=' + this.page_id
})
},
getList() {
let urlRequest = ''
if (this.type === '1') {
urlRequest = week_mul
} else {
} else if (this.type === '2') {
urlRequest = week
} else if (this.type === '4') {
urlRequest = totaluser
} else {
urlRequest = total
}
urlRequest().then(res => {
this.lists = res.rand;
this.page_id = res.page_id;
this.end_timestamp = res.end_timestamp * 1000;
this.lists = res.rand;
this.page_id = res.page_id;
this.end_timestamp = res.end_timestamp * 1000;
this.$nextTick(() => {
if(this.$refs.countDown){
this.$refs.countDown.start()
}
})
uni.hideLoading()
}).catch(err => {
uni.showToast({
@@ -129,7 +163,19 @@
})
})
}
}
},
onHide() {
try {
if(this.$refs.countDown){
this.$refs.countDown.pause()
}
} catch (err) {
uni.showToast({
title: err,
icon: 'none'
})
}
}
}
</script>
@@ -143,7 +189,7 @@
box-sizing: border-box;
background-color: #34CE98;
padding: 50rpx 30rpx 40rpx 30rpx;
border-bottom: solid 1rpx rgba($color: #fff, $alpha: 0.6);
.rank_top_left {
display: flex;
flex-direction: column;
@@ -177,44 +223,8 @@
.rank_top_right {
width: 280rpx;
}
}
.rank_type {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
background-color: #26b398;
.rank_type_item {
flex: 1;
text-align: center;
padding: 40rpx;
font-size: 32rpx;
font-weight: 400;
color: rgba($color: #fff, $alpha: 0.6);
}
.rank_type_item_active {
position: relative;
color: white;
&::after {
content: '';
border-bottom: 20rpx solid white;
border-right: 16rpx solid transparent;
border-left: 16rpx solid transparent;
position: absolute;
bottom: 0;
left: 50%;
margin-left: -20rpx;
}
}
}
}
.rank_update_time {
display: flex;
flex-direction: row;
@@ -222,57 +232,34 @@
justify-content: center;
box-sizing: border-box;
padding: 50rpx 30rpx;
width: 100%;
width: 100%;
border-bottom: 20rpx solid $window-color;
.title {
font-size: 28rpx;
font-weight: normal;
color: #34CE98;
}
.time {
padding-left: 20rpx;
flex: 1;
font-size: 28rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
color: #333;
.time__item {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
.time__item_no {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
box-sizing: border-box;
background-color: #34CE98;
color: white;
min-width: 50rpx;
min-height: 50rpx;
border-radius: 4rpx;
margin: 0 16rpx;
font-size: 36rpx;
font-weight: bold;
padding: 2rpx 10rpx;
}
}
}
}
color: #34CE98;
padding-right: 10rpx;
}
.time{
display: flex;
.time__item{
font-size: 28rpx;
color: #34CE98;
}
.time__item_no{
background: #34CE98;
border-radius: 5rpx;
color: white;
width: 50rpx;
display: inline-block;
text-align: center;
margin: 0 10rpx;
}
}
}
.list {
border-top: 30rpx solid #f9f9f9;
padding: 30rpx;
.list_item {
display: flex;
flex-direction: row;
@@ -328,7 +315,7 @@
.nickname {
font-size: 30rpx;
color: #333;
max-width: 200rpx;
max-width: 200rpx;
font-weight: bold;
overflow: hidden;
text-overflow: ellipsis;

View File

@@ -15,17 +15,47 @@
</view>
<!-- 详情 -->
<view class="main">
<view class="title">{{goods.name}}</view>
<view class="title"> {{goods.name}} </view>
<view class="sub-title">{{goods.description}}</view>
<view class="box-flex">
<view class="price">
{{goods.price.show}}<text>DT积分</text>
</view>
<view class="sales" v-if="goods.skus">库存量{{goods.skus[0].stock}}</view>
<view class="sales" v-if="goods.skus && !goods.is_active">库存量{{goods.skus[0].stock}}</view>
<view class="_pin" v-if="goods.is_active">
<view class="_has" v-if="goods.active.count>0">
<image src="/static/book/fire.png" mode="widthFix" class="fire" /> 已拼{{goods.active.count}}
</view>
<view class="tuan">{{goods.active.number}}人团</view>
</view>
</view>
<view class="unit" v-if="goods.skus && goods.skus[0].unit !== ''" @click="open()">
<span> 规格 : {{selectSkusValues.unit_text}}</span>
<uni-icons type="right" color="#cacaca" />
<view class="unit" v-if="goods.skus && goods.skus[0].unit !== '' && !goods.is_active" @click="open()">
<span>规格:{{selectSkusValues.unit_text}}</span>
<uni-icons type="right" color="#cacaca" />
</view>
<view class="is_active" v-if="goods.is_active && actives.length>0">
<view class="title" v-if="actives.length > 2">
这些人刚刚拼单成功可参与拼单
<span @click="getMorePin = true">查看更多
<uni-icons type="right" color="#cacaca" />
</span>
</view>
<view class="title" v-if="actives.length <= 2">
{{actives.length}}人正在拼单可参与拼单
</view>
<view class="content">
<block v-for="(item,index) in actives" :key="index">
<view class="content-item" v-if="index < 2">
<view class="info">
<u-avatar-group :urls="item.urls" size="34" gap="0.6" class="avatar-group" />
<view class="nickname"> {{item.name}}</view>
</view>
<view class="btn">去拼单</view>
</view>
</block>
</view>
</view>
<!-- 店铺信息 -->
@@ -50,7 +80,7 @@
<view class="imgs">
<block v-for="(item, index) in goods.content" :key="index">
<image :src="item" mode="widthFix"></image>
<image :src="item" mode="widthFix" />
</block>
</view>
</view>
@@ -61,6 +91,23 @@
</view>
<button type="default" hover-class="none" @click="buy">立即购买</button>
</view>
<!-- 更多拼单弹窗 -->
<u-popup :show="getMorePin" :round="10" mode="center" @close="close" :closeable='true' zIndex="1229930">
<view class="getPinTitle"> 可参与拼单 </view>
<scroll-view scroll-y="true" class="getPinList">
<view class="content">
<block v-for="(item,index) in actives" :key="index">
<view class="content-item">
<view class="info">
<u-avatar-group :urls="item.urls" size="34" gap="0.6" class="avatar-group" />
<view class="nickname"> {{item.name}}</view>
</view>
<view class="btn">去拼单</view>
</view>
</block>
</view>
</scroll-view>
</u-popup>
<!-- 多规格弹窗 -->
<u-popup :show="skuShow" :round="10" mode="bottom" @close="close" @open="open">
@@ -126,6 +173,111 @@
specselect: [],
selectSkusValues: {},
qty: 1,
actives: [{
urls: [
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/2.jpg'
],
name: "洛基洛基、张三张三张三张三张三张三"
},
{
urls: [
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg'
],
name: "卢比卢比、张三张三"
},
{
urls: [
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg'
],
name: "卢比卢比、张三张三"
},
{
urls: [
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg'
],
name: "卢比卢比、张三张三"
},
{
urls: [
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg'
],
name: "卢比卢比、张三张三"
},
{
urls: [
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg'
],
name: "卢比卢比、张三张三"
},
{
urls: [
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg'
],
name: "卢比卢比、张三张三"
},
{
urls: [
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg'
],
name: "卢比卢比、张三张三"
},
{
urls: [
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg'
],
name: "卢比卢比、张三张三"
},
{
urls: [
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg'
],
name: "卢比卢比、张三张三"
},
{
urls: [
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg'
],
name: "卢比卢比、张三张三"
},
{
urls: [
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg'
],
name: "卢比卢比、张三张三"
},
{
urls: [
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg',
'https://cdn.uviewui.com/uview/album/1.jpg'
],
name: "卢比卢比、张三张三"
}
],
getMorePin: false,
};
},
mounted() {
@@ -133,8 +285,9 @@
},
methods: {
getGoods() {
let id = this.$Route.query.id
// let id = 61;
// let id = this.$Route.query.id
// let id = 61; // 普通商品
let id = 90; // 拼团商品
goods(id).then(res => {
this.goods = res
this.specs = res.specs
@@ -151,6 +304,7 @@
},
close() {
this.skuShow = false
this.getMorePin = false
this.qty = 1;
// this.specselect = this.skus[0].unit.split('|')
// this.selectSkusValues = this.skus[0]
@@ -321,6 +475,12 @@
padding: $padding;
font-weight: bold;
font-size: $title-size + 14;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
box-sizing: border-box;
}
.sub-title {
@@ -350,19 +510,116 @@
font-size: $title-size-m;
color: $text-gray;
}
._pin {
font-size: 26rpx;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
color: $text-gray;
._has {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
color: #d81e06;
background-color: rgba($color: $text-price, $alpha: 0.1);
padding: 4rpx 10rpx;
border-radius: 30rpx;
image {
width: 24rpx;
height: 24rpx;
margin-right: 10rpx;
}
}
.tuan {
margin-left: $margin;
}
}
}
.unit {
padding: 30rpx;
font-size: $title-size;
color: #333;
border-top: solid 20rpx #f9f9f9;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
border-top: solid 20rpx #f9f9f9;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
}
.is_active {
border-top: solid 20rpx #f9f9f9;
.title {
font-size: 30rpx;
color: #333;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
border-bottom: solid 1rpx #f9f9f9;
span {
font-size: 26rpx;
color: #666;
font-weight: normal;
}
}
.content {
padding: 0 $padding;
.content-item {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
font-size: 28rpx;
padding-bottom: $padding - 10;
padding-top: $padding - 10;
border-bottom: solid 1rpx #f9f9f9;
.info {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
overflow: hidden;
.avatar-group {
margin-right: 30rpx;
}
.nickname {
width: 300rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.btn {
background-color: $main-color;
color: white;
padding: 6rpx 20rpx;
border-radius: 10rpx;
}
}
}
}
.imgs {
@@ -484,6 +741,74 @@
}
}
.getPinTitle {
text-align: center;
font-size: 30rpx;
color: #333333;
font-weight: bold;
padding: $padding - 10 0;
border-bottom: solid 1rpx #f9f9f9;
position: absolute;
top: 0;
width: 100%;
background-color: #fff !important;
border-radius: 20rpx 20rpx 0 0;
z-index: 1000000000000000;
}
.getPinList {
width: 80vw;
max-height: 60vh;
color: $text-color;
position: relative;
.content {
padding: 0 $padding;
padding-top: $padding * 3;
.content-item {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
font-size: 28rpx;
padding-bottom: $padding - 10;
padding-top: $padding - 10;
border-bottom: solid 1rpx #f9f9f9;
.info {
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
box-sizing: border-box;
overflow: hidden;
.avatar-group {
margin-right: 30rpx;
}
.nickname {
width: 240rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.btn {
background-color: $main-color;
color: white;
padding: 6rpx 20rpx;
border-radius: 10rpx;
}
}
}
}
// 规格弹窗
.skuView {
min-height: 30vh;

View File

@@ -4,7 +4,7 @@
<view class="swiper">
<view class="swiper-box">
<swiper autoplay @change="swiperCount = $event.detail.current">
<swiper-item v-for="(item, index) in banners" :key="index">
<swiper-item v-for="(item, index) in banners" :key="index" @click="goBook(item)">
<image :src="item.cover" mode="aspectFill"></image>
</swiper-item>
</swiper>
@@ -107,7 +107,16 @@
this.shops = res.shops
uni.stopPullDownRefresh()
})
}
},
goBook(item){
if(item.url){
if(item.url.openType === 'navigateTo'){
uni.navigateTo({
url:item.url.path
})
}
}
}
},
onPullDownRefresh() {
this.getMall()

View File

@@ -95,12 +95,11 @@
导出助记词
<uni-icons class="forward" type="forward" color="#999" />
</view>
<view class="btns-box-item" @click="onWbt">
<!-- <view class="btns-box-item" @click="onWbt">
<image class="icon" src="@/static/user/userIcon_02.png" mode="widthFix" />
文版通账号
<uni-icons class="forward" type="forward" color="#999" />
</view>
</view> -->
<view class="btns-box-item" @click="resetPassword">
<image class="icon" src="@/static/user/userIcon_13.png" mode="widthFix" />
{{hasPassword ? '修改' : '设置'}}支付密码