改造排行榜
This commit is contained in:
唐明明
22
apis/interfaces/pin.js
Normal file
22
apis/interfaces/pin.js
Normal file
@@ -0,0 +1,22 @@
|
||||
/**
|
||||
* Web-zdx
|
||||
* moduleName: 拼团相关接口
|
||||
*/
|
||||
|
||||
import {
|
||||
request
|
||||
} from '../index'
|
||||
|
||||
|
||||
|
||||
// 拼团列表
|
||||
const pinList = (data) => {
|
||||
return request({
|
||||
url: 'mall/goods/collages',
|
||||
data:data
|
||||
})
|
||||
}
|
||||
|
||||
export {
|
||||
pinList
|
||||
}
|
||||
@@ -24,8 +24,24 @@ const week = () => {
|
||||
})
|
||||
}
|
||||
|
||||
// 会员推荐帮
|
||||
|
||||
const total = () => {
|
||||
return request({
|
||||
url: 'user/rank/total'
|
||||
})
|
||||
}
|
||||
|
||||
// 用户推荐榜
|
||||
const totaluser = () => {
|
||||
return request({
|
||||
url: 'user/rank/totaluser'
|
||||
})
|
||||
}
|
||||
|
||||
export {
|
||||
week_mul,
|
||||
week,
|
||||
total,
|
||||
totaluser
|
||||
}
|
||||
|
||||
133
components/pin-goods-item/index.vue
Normal file
133
components/pin-goods-item/index.vue
Normal file
@@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<view class="goods-item">
|
||||
<image
|
||||
src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202003%2F18%2F20200318231340_shbab.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1662167784&t=893e1b78d1563aa0a9a65f4d14f21643"
|
||||
mode="aspectFill" class="goods-cover" />
|
||||
<view class="goods-info">
|
||||
<view class="_title">北欧抱枕靠垫沙发垫办公室腰靠等功能弃权</view>
|
||||
<view class="_des">金凯来京东店 </view>
|
||||
<view class="_pin">
|
||||
<view class="_has">
|
||||
<image src="/static/book/fire.png" mode="widthFix" class="fire" /> 已拼1件
|
||||
</view>
|
||||
<view class="tuan">2人团</view>
|
||||
</view>
|
||||
<view class="price">
|
||||
<view class="money"> ￥160.00 </view>
|
||||
<view class="now-pin" @click="goPin(90)">马上拼团</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: {},
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
goPin(id) {
|
||||
this.$emit('goPin',id)
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.goods-item {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
box-sizing: border-box;
|
||||
background-color: white;
|
||||
border-radius: 10rpx;
|
||||
padding: $padding;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
.goods-cover {
|
||||
width: 160rpx;
|
||||
height: 160rpx;
|
||||
border-radius: 10rpx;
|
||||
}
|
||||
|
||||
.goods-info {
|
||||
width: calc(100% - 160rpx - 30rpx);
|
||||
padding-left: $padding;
|
||||
|
||||
._title {
|
||||
overflow: hidden;
|
||||
font-size: 30rpx;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
._des {
|
||||
font-size: 28rpx;
|
||||
padding: 6rpx 0;
|
||||
color: #4f300a;
|
||||
}
|
||||
|
||||
._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;
|
||||
}
|
||||
}
|
||||
|
||||
.price {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding-top: 20rpx;
|
||||
|
||||
.money {
|
||||
font-size: 34rpx;
|
||||
font-weight: 600;
|
||||
color: #d81e06;
|
||||
}
|
||||
|
||||
.now-pin {
|
||||
background-color: $main-color;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
padding: 6rpx 20rpx;
|
||||
border-radius: 20rpx;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1138
pages.json
1138
pages.json
File diff suppressed because it is too large
Load Diff
@@ -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
125
pages/group-book/index.vue
Normal 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>
|
||||
@@ -387,7 +387,6 @@
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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()
|
||||
|
||||
@@ -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 ? '修改' : '设置'}}支付密码
|
||||
|
||||
BIN
static/book/333.png
Normal file
BIN
static/book/333.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 231 KiB |
BIN
static/book/fire.png
Normal file
BIN
static/book/fire.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
static/book/pin.png
Normal file
BIN
static/book/pin.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 215 KiB |
File diff suppressed because one or more lines are too long
12417
unpackage/dist/dev/app-plus/app-service.js
vendored
12417
unpackage/dist/dev/app-plus/app-service.js
vendored
File diff suppressed because one or more lines are too long
5059
unpackage/dist/dev/app-plus/app-view.js
vendored
5059
unpackage/dist/dev/app-plus/app-view.js
vendored
File diff suppressed because one or more lines are too long
2
unpackage/dist/dev/app-plus/manifest.json
vendored
2
unpackage/dist/dev/app-plus/manifest.json
vendored
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user