wangmingchuan
/
yanzong_qianduan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

所有商品瀑布流及分类列表的改动

Browse Source
version/0412
fanfan 1 year ago
parent 50092595a3
commit a38d72c987
6 changed files with 1256 additions and 1247 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 827
      pages/activity/newPeople.vue
  2. 177
      pages/cart/index.vue
  3. 126
      pages/category/index.vue
  4. 173
      pages/goods/list.vue
  5. 113
      pages/index/index.vue
  6. 1087
      pages/user/vip/goods.vue

827
pages/activity/newPeople.vue
Unescape View File

@ -1,411 +1,408 @@
<template>
<view class="newpeople">
<view class="newpeople-navbar">
<u-navbar :title="title" title-color="#fff" back-icon-color="#fff" :border-bottom="false"
:background="background"></u-navbar>
</view>
<view class="newpeople-hd">
<view class="rule" @click="openRule()">规则</view>
</view>
<view class="newpeople-gift">
<view class="a">
<image :src="$picUrl+'/static/news/newPeople-bg1.png'"></image>
</view>
<scroll-view scroll-x class="b">
<view class="item" v-for="(item,index) in couList" :key="i">
<image :src="$picUrl+'/static/news/newPeople-bg2.png'"></image>
<view class="p" v-if="item.coupon_type==10">¥<text>{{item.reduce_price}}</text></view>
<view class="p" v-if="item.coupon_type==20">¥<text>{{item.discount}}</text>折</view>
<view class="l">满{{item.min_price}}可用</view>
<view class="btn" v-if="!item.is_receive" @click="getUseCoupons(item)">立即领取</view>
<view class="btn" v-else>已领取</view>
</view>
</scroll-view>
</view>
<view class="newpeople-bd" :isLoading="isLoading">
<view class="a">
<u-tabs :list="menuList" bg-color="#fafafa" inactive-color="#3C3C3C" active-color="#FF3C43"
:is-scroll="true" font-size="30" v-model="current" @change="onChosed"></u-tabs>
</view>
<view scroll-x class="b">
<view class="">
<view class="item" v-for="(item, index) in LeftList" :key="index" @click="goDetail(item.goods_id)">
<image :src="item.goods_image" mode="widthFix"></image>
<view class="title">
<text>自营</text>{{item.goods_name}}
</view>
<view class="price">
<view class="n">￥<text
style="margin-right: 6rpx;">{{item.goods_price_min?Number(item.goods_price_min):'0.00'}}</text>新人价
</view>
<view class="o">￥{{item.line_price_min?Number(item.line_price_min):'0.00'}}</view>
</view>
</view>
</view>
<view class="">
<view class="item" v-for="(item, index) in RightList" :key="index" @click="goDetail(item.goods_id)">
<image :src="item.goods_image" mode="widthFix"></image>
<view class="title">
<text>自营</text>{{item.goods_name}}
</view>
<view class="price">
<view class="n">￥<text
style="margin-right: 6rpx;">{{item.goods_price_min?Number(item.goods_price_min):'0.00'}}</text>新人价
</view>
<view class="o">￥{{item.line_price_min?Number(item.line_price_min):'0.00'}}</view>
</view>
</view>
</view>
</view>
</view>
<view class="newpeople-fd" @click="openPage()">
<image :src="$picUrl+'/static/toTop.png?=1'"></image>
</view>
</view>
</template>
<script>
import * as Api from '@/api/activity'
export default {
data() {
<template>
<view class="newpeople">
<view class="newpeople-navbar">
<u-navbar :title="title" title-color="#fff" back-icon-color="#fff" :border-bottom="false"
:background="background"></u-navbar>
</view>
<view class="newpeople-hd">
<view class="rule" @click="openRule()">规则</view>
</view>
<view class="newpeople-gift">
<view class="a">
<image :src="$picUrl+'/static/news/newPeople-bg1.png'"></image>
</view>
<scroll-view scroll-x class="b">
<view class="item" v-for="(item,index) in couList" :key="i">
<image :src="$picUrl+'/static/news/newPeople-bg2.png'"></image>
<view class="p" v-if="item.coupon_type==10">¥<text>{{item.reduce_price}}</text></view>
<view class="p" v-if="item.coupon_type==20">¥<text>{{item.discount}}</text>折</view>
<view class="l">满{{item.min_price}}可用</view>
<view class="btn" v-if="!item.is_receive" @click="getUseCoupons(item)">立即领取</view>
<view class="btn" v-else>已领取</view>
</view>
</scroll-view>
</view>
<view class="newpeople-bd" :isLoading="isLoading">
<view class="a">
<u-tabs :list="menuList" bg-color="#fafafa" inactive-color="#3C3C3C" active-color="#FF3C43"
:is-scroll="true" font-size="30" v-model="current" @change="onChosed"></u-tabs>
</view>
<view scroll-x class="b">
<u-waterfall v-model="goodList" ref="uWaterfall1">
<template v-slot:left="{leftList}">
<view class="item" v-for="(item, index) in leftList" :key="index"
@click="goDetail(item.goods_id)">
<image :src="item.goods_image" mode="widthFix"></image>
<view class="title">
<text>自营</text>{{item.goods_name}}
</view>
<view class="price">
<view class="n">￥<text
style="margin-right: 6rpx;">{{item.goods_price_min?Number(item.goods_price_min):'0.00'}}</text>新人价
</view>
<view class="o">￥{{item.line_price_min?Number(item.line_price_min):'0.00'}}</view>
</view>
</view>
</template>
<template v-slot:right="{rightList}">
<view class="item" v-for="(item, index) in rightList" :key="index"
@click="goDetail(item.goods_id)">
<image :src="item.goods_image" mode="widthFix"></image>
<view class="title">
<text>自营</text>{{item.goods_name}}
</view>
<view class="price">
<view class="n">￥<text
style="margin-right: 6rpx;">{{item.goods_price_min?Number(item.goods_price_min):'0.00'}}</text>新人价
</view>
<view class="o">￥{{item.line_price_min?Number(item.line_price_min):'0.00'}}</view>
</view>
</view>
</template>
</u-waterfall>
<u-empty text="暂无数据显示哦～" v-if="goodList.length==0" mode="list"></u-empty>
</view>
</view>
<view class="newpeople-fd" @click="openPage()">
<image :src="$picUrl+'/static/toTop.png?=1'"></image>
</view>
</view>
</template>
<script>
import * as Api from '@/api/activity'
export default {
data() {
return {
title: "新人首单礼",
current: 1,
isLoading: true,
background: {
background: 'url(https://www.royaum.com.cn/static/news/newPeople-bg.png) center top no-repeat',
backgroundSize: '100%',
},
goodList: [],
LeftList: [],
RightList: [],
menuList: [],
couList: []
}
},
/**
* 生命周期函数--监听页面显示
*/
onShow(options) {
this.getCoupons()
this.getListCharts()
},
methods: {
// 立即领取
async getUseCoupons(item) {
let {
status,
message,
data
} = await Api.receive({
couponId: item.coupon_id
});
if (status == 200) {
uni.showToast({
title: "领取成功"
})
this.getCoupons()
}
},
// 获取新人礼包劵
async getCoupons() {
let {
status,
message,
data
} = await Api.couponList();
if (status == 200) {
this.couList = data.list || []
}
},
// 根据分类查数据
getListgoodData(categoryId) {
let app = this;
this.LeftList = [];
this.RightList = []
let pamars = {
categoryId: categoryId,
}
Api.chartsGoodsList(pamars)
.then(result => {
if (result.data.data.length > 0) {
for (let i = 0; i < result.data.data.length; i++) {
result.data.data[i].goods_price_min = Number(result.data.data[i].goods_price_min);
result.data.data[i].line_price_min = Number(result.data.data[i].line_price_min)
if (i % 2 === 0) {
this.LeftList.push(result.data.data[i])
} else {
this.RightList.push(result.data.data[i])
}
}
app.goodList = result.data.data;
}
})
.finally(() => app.isLoading = false)
},
onChosed(index) {
let app = this;
app.current = index;
app.getListgoodData(index != 0 ? app.menuList[index].category_id : '')
},
openPage() {
uni.pageScrollTo({
scrollTop: 0
})
},
// 分类
async getListCharts() {
let app = this
let {
status,
message,
data
} = await Api.charts({
store_id: 10001
});
if (status == 200) {
let obj = {
name: '精选好物'
}
this.couList = data.list;
data.unshift(obj);
app.menuList = data;
app.getListgoodData()
}
},
goDetail(goods_id) {
uni.navigateTo({
url: '/pages/goods/detail?goodsId=' + goods_id
})
},
openRule() {
uni.navigateTo({
url: '/pages/activity/presaleRule?type=4'
})
},
}
}
</script>
<style lang="scss" scoped>
.newpeople {
background: url(https://www.royaum.com.cn/static/news/newPeople-bg.png) center top no-repeat;
background-size: 100% auto;
overflow: hidden;
&-hd {
height: 200rpx;
.rule {
right: 0;
top: 204rpx;
z-index: 2;
width: 100rpx;
height: 60rpx;
background-color: rgba(0, 0, 0, 0.3);
font-size: 24rpx;
font-weight: 400;
color: #FFFFFF;
line-height: 60rpx;
text-align: center;
position: absolute;
border-radius: 50rpx 0 0 50rpx;
}
}
&-gift {
width: 100%;
border-radius: 10rpx 10rpx 0 0;
background-color: #fff;
overflow: hidden;
.a {
width: 100%;
image {
width: 380rpx;
height: 58rpx;
margin-left: 60rpx;
margin-top: 20rpx;
}
}
.b {
padding: 20rpx;
overflow: hidden;
white-space: nowrap;
display: flex;
justify-content: space-between;
.item {
width: 210rpx;
height: 240rpx;
position: relative;
margin-left: 30rpx;
display: inline-block;
text-align: center;
&:first-child {
margin-left: 0;
}
image {
width: 100%;
height: 100%;
}
.p {
width: 100%;
font-size: 42rpx;
color: #FF343B;
height: 80rpx;
position: absolute;
left: 0;
top: 50rpx;
z-index: 2;
text {
font-size: 52rpx;
}
}
.l {
width: 100%;
font-size: 24rpx;
font-weight: 500;
color: #8C4D00;
height: 50rpx;
position: absolute;
left: 0;
top: 120rpx;
z-index: 2;
text {
font-size: 52rpx;
}
}
.btn {
width: 100%;
font-size: 24rpx;
font-weight: 500;
color: #8C4D00;
height: 50rpx;
position: absolute;
left: 0;
bottom: 2rpx;
z-index: 2;
text {
font-size: 52rpx;
}
}
}
}
}
&-bd {
padding: 0 22rpx;
overflow: hidden;
.a {
padding: 10rpx 0;
overflow: hidden;
}
.b {
overflow: hidden;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.item {
width: 346rpx;
background: #FFFFFF;
border-radius: 8rpx;
opacity: 1;
border: 1px solid #ECECEC;
padding: 10rpx 15rpx 25rpx 15rpx;
box-sizing: border-box;
margin-bottom: 20rpx;
&:nth-child(2n+1) {
margin-left: 0;
}
image {
width: 275rpx;
height: 275rpx;
display: block;
margin: 0 auto;
}
.title {
padding: 10rpx 0;
line-height: 40rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #1E1E1E;
// text-overflow: ellipsis;
// white-space: nowrap;
// overflow: hidden;
text {
background-color: #F34A40;
font-size: 24rpx;
padding: 0 10rpx;
height: 40rpx;
line-height: 40rpx;
text-align: center;
border-radius: 4rpx;
font-weight: 400;
color: #FFFFFF;
margin-right: 5rpx;
display: inline-block;
}
}
.price {
display: flex;
align-items: center;
white-space: nowrap;
.n {
display: flex;
align-items: baseline;
font-size: 11px;
font-weight: 500;
color: #F21A1C;
text {
font-size: 29rpx;
}
}
.o {
font-size: 12px;
color: #949494;
text-decoration: line-through;
}
}
.desc {
font-size: 10px;
font-weight: 400;
color: #949494;
white-space: nowrap;
margin-top: 10rpx;
}
}
}
}
&-fd {
title: "新人首单礼",
current: 1,
isLoading: true,
background: {
background: 'url(https://www.royaum.com.cn/static/news/newPeople-bg.png) center top no-repeat',
backgroundSize: '100%',
},
goodList: [],
menuList: [],
couList: []
}
},
/**
* 生命周期函数--监听页面显示
*/
onShow(options) {
this.getCoupons()
this.getListCharts()
},
methods: {
// 立即领取
async getUseCoupons(item) {
let {
status,
message,
data
} = await Api.receive({
couponId: item.coupon_id
});
if (status == 200) {
uni.showToast({
title: "领取成功"
})
this.getCoupons()
}
},
// 获取新人礼包劵
async getCoupons() {
let {
status,
message,
data
} = await Api.couponList();
if (status == 200) {
this.couList = data.list || []
}
},
// 根据分类查数据
getListgoodData(categoryId) {
let app = this;
this.LeftList = [];
this.RightList = []
let pamars = {
categoryId: categoryId,
}
Api.chartsGoodsList(pamars)
.then(result => {
if (result.data.data.length > 0) {
for (let i = 0; i < result.data.data.length; i++) {
result.data.data[i].goods_price_min = Number(result.data.data[i].goods_price_min);
result.data.data[i].line_price_min = Number(result.data.data[i].line_price_min)
}
app.goodList = result.data.data || [];
}
})
.finally(() => app.isLoading = false)
},
onChosed(index) {
let app = this;
app.current = index;
app.getListgoodData(index != 0 ? app.menuList[index].category_id : '')
},
openPage() {
uni.pageScrollTo({
scrollTop: 0
})
},
// 分类
async getListCharts() {
let app = this
let {
status,
message,
data
} = await Api.charts({
store_id: 10001
});
if (status == 200) {
let obj = {
name: '精选好物'
}
this.couList = data.list;
data.unshift(obj);
app.menuList = data;
app.getListgoodData()
}
},
goDetail(goods_id) {
uni.navigateTo({
url: '/pages/goods/detail?goodsId=' + goods_id
})
},
openRule() {
uni.navigateTo({
url: '/pages/activity/presaleRule?type=4'
})
},
}
}
</script>
<style lang="scss" scoped>
::v-deep .u-empty {
padding: 100rpx 0;
}
.newpeople {
background: url(https://www.royaum.com.cn/static/news/newPeople-bg.png) center top no-repeat;
background-size: 100% auto;
overflow: hidden;
&-hd {
height: 200rpx;
.rule {
right: 0;
top: 204rpx;
z-index: 2;
width: 100rpx;
height: 60rpx;
background-color: rgba(0, 0, 0, 0.3);
font-size: 24rpx;
font-weight: 400;
color: #FFFFFF;
line-height: 60rpx;
text-align: center;
position: absolute;
border-radius: 50rpx 0 0 50rpx;
}
}
&-gift {
width: 100%;
border-radius: 10rpx 10rpx 0 0;
background-color: #fff;
overflow: hidden;
.a {
width: 100%;
image {
width: 380rpx;
height: 58rpx;
margin-left: 60rpx;
margin-top: 20rpx;
}
}
.b {
padding: 20rpx;
overflow: hidden;
white-space: nowrap;
display: flex;
justify-content: space-between;
.item {
width: 210rpx;
height: 240rpx;
position: relative;
margin-left: 30rpx;
display: inline-block;
text-align: center;
&:first-child {
margin-left: 0;
}
image {
width: 100%;
height: 100%;
}
.p {
width: 100%;
font-size: 42rpx;
color: #FF343B;
height: 80rpx;
position: absolute;
left: 0;
top: 50rpx;
z-index: 2;
text {
font-size: 52rpx;
}
}
.l {
width: 100%;
font-size: 24rpx;
font-weight: 500;
color: #8C4D00;
height: 50rpx;
position: absolute;
left: 0;
top: 120rpx;
z-index: 2;
text {
font-size: 52rpx;
}
}
.btn {
width: 100%;
font-size: 24rpx;
font-weight: 500;
color: #8C4D00;
height: 50rpx;
position: absolute;
left: 0;
bottom: 2rpx;
z-index: 2;
text {
font-size: 52rpx;
}
}
}
}
}
&-bd {
padding: 0 22rpx;
overflow: hidden;
.a {
padding: 10rpx 0;
overflow: hidden;
}
.b {
overflow: hidden;
.item {
width: 346rpx;
background: #FFFFFF;
border-radius: 8rpx;
opacity: 1;
border: 1px solid #ECECEC;
padding: 10rpx 15rpx 25rpx 15rpx;
box-sizing: border-box;
margin-bottom: 20rpx;
&:nth-child(2n+1) {
margin-left: 0;
}
image {
width: 275rpx;
height: 275rpx !important;
display: block;
margin: 0 auto;
}
.title {
padding: 10rpx 0;
line-height: 40rpx;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400;
color: #1E1E1E;
// text-overflow: ellipsis;
// white-space: nowrap;
// overflow: hidden;
text {
background-color: #F34A40;
font-size: 24rpx;
padding: 0 10rpx;
height: 40rpx;
line-height: 40rpx;
text-align: center;
border-radius: 4rpx;
font-weight: 400;
color: #FFFFFF;
margin-right: 5rpx;
display: inline-block;
}
}
.price {
display: flex;
align-items: center;
white-space: nowrap;
.n {
display: flex;
align-items: baseline;
font-size: 11px;
font-weight: 500;
color: #F21A1C;
text {
font-size: 29rpx;
}
}
.o {
font-size: 12px;
color: #949494;
text-decoration: line-through;
}
}
.desc {
font-size: 10px;
font-weight: 400;
color: #949494;
white-space: nowrap;
margin-top: 10rpx;
}
}
}
}
&-fd {
position: fixed;
bottom: 120rpx;
right: 16rpx;
@ -416,12 +413,12 @@
z-index: 999;
display: flex;
align-items: center;
justify-content: center;
image {
width: 100%;
height: 100%;
}
}
}
justify-content: center;
image {
width: 100%;
height: 100%;
}
}
}
</style>

177
pages/cart/index.vue
Unescape View File

@ -40,11 +40,13 @@
<view class="item-foot">
<view class="goods-price">
<text class="unit">￥</text>
<text class="value">{{ item.goods.skuInfo.goods_price?Number(item.goods.skuInfo.goods_price):item.goods.skuInfo.goods_price }}</text>
<text
class="value">{{ item.goods.skuInfo.goods_price?Number(item.goods.skuInfo.goods_price):item.goods.skuInfo.goods_price }}</text>
</view>
<view class="stepper">
<u-number-box :min="1" class='countNumber' :modelValue="item.goods_num" :step="1" @change="onChangeStepper($event, item)" />
<u-number-box :min="1" class='countNumber' :modelValue="item.goods_num" :step="1"
@change="onChangeStepper($event, item)" />
</view>
</view>
</view>
@ -62,33 +64,61 @@
<!-- 商品推荐 -->
<view class="goodsRecommend-title">
<image :src="$picUrl+'/static/user/left.png'"></image>为您推荐<image :src="$picUrl+'/static/user/right.png'"></image>
<image :src="$picUrl+'/static/user/left.png'"></image>为您推荐<image :src="$picUrl+'/static/user/right.png'">
</image>
</view>
<view class="goodsRecommend">
<view class="goodsItem" v-for="(item,index) in goodsRecommend" @click="onTargetGoods(item.goods_id)" :key="index">
<view class="pic">
<image :src="item.goods_image" mode=""></image>
</view>
<view class="goodsInfo">
<view class="title">
<text v-if="item.selling_point" class="ziying">{{item.selling_point}}</text>
<text class="name">{{item.goods_name}}</text>
</view>
<view class="isExpress">
<text>包邮</text>
<u-waterfall v-model="goodsRecommend" ref="uWaterfall1">
<template v-slot:left="{leftList}">
<view class="goodsItem" v-for="(item,index) in leftList" @click="onTargetGoods(item.goods_id)"
:key="index">
<view class="pic">
<image :src="item.goods_image" mode=""></image>
</view>
<view class="goodsInfo">
<view class="title">
<text v-if="item.selling_point" class="ziying">{{item.selling_point}}</text>
<text class="name">{{item.goods_name}}</text>
</view>
<view class="isExpress">
<text>包邮</text>
</view>
<view class="price">
<text style="font-size: 20rpx;">￥</text>
<text style="font-weight: bold;font-size: 36rpx;">{{item.goods_price_min}}</text>
<text style="font-size: 20rpx;margin-left:10rpx;">到手价</text>
<text
style="color: #949494;font-size: 22rpx;text-decoration: line-through;">￥{{item.line_price_min}}</text>
</view>
</view>
</view>
<view class="price">
<text style="font-size: 20rpx;">￥</text>
<text style="font-weight: bold;font-size: 36rpx;">{{item.goods_price_min}}</text>
<text style="font-size: 20rpx;margin-left:10rpx;">到手价</text>
<text style="color: #949494;font-size: 22rpx;text-decoration: line-through;">￥{{item.line_price_min}}</text>
</template>
<template v-slot:right="{rightList}">
<view class="goodsItem" v-for="(item,index) in rightList" @click="onTargetGoods(item.goods_id)"
:key="index">
<view class="pic">
<image :src="item.goods_image" mode=""></image>
</view>
<view class="goodsInfo">
<view class="title">
<text v-if="item.selling_point" class="ziying">{{item.selling_point}}</text>
<text class="name">{{item.goods_name}}</text>
</view>
<view class="isExpress">
<text>包邮</text>
</view>
<view class="price">
<text style="font-size: 20rpx;">￥</text>
<text style="font-weight: bold;font-size: 36rpx;">{{item.goods_price_min}}</text>
<text style="font-size: 20rpx;margin-left:10rpx;">到手价</text>
<text
style="color: #949494;font-size: 22rpx;text-decoration: line-through;">￥{{item.line_price_min}}</text>
</view>
</view>
</view>
<!-- <view class="comment">
<text>{{item.goods_sales}}条评论</text>
<text style="margin-left:20rpx;">{{item.remaizhishu}}%好评率</text>
</view> -->
</view>
</view>
</template>
</u-waterfall>
<u-empty text="暂无数据显示哦～" v-if="goodsRecommend.length==0" mode="list"></u-empty>
</view>
<!-- 底部操作栏 -->
@ -145,7 +175,7 @@
},
data() {
return {
goodsRecommend:[],
goodsRecommend: [],
inArray,
// 正在加载
isLoading: true,
@ -198,8 +228,8 @@
// 获取推荐商品
Api.recommended().then(res => {
let arr = res.data.goodsList
if(arr && arr.length > 0){
arr.map(a=>{
if (arr && arr.length > 0) {
arr.map(a => {
a.goods_price_min = Number(a.goods_price_min)
a.goods_price_max = Number(a.goods_price_max)
a.line_price_min = Number(a.line_price_min)
@ -208,7 +238,7 @@
}
this.goodsRecommend = arr
})
},
// 计算合计金额 (根据选中的商品)
onCalcTotalPrice() {
@ -372,10 +402,14 @@
}
</style>
<style lang="scss" scoped>
::v-deep .u-empty {
padding: 100rpx 0;
}
.container {
padding-bottom: 120rpx;
}
.goodsRecommend-title{
.goodsRecommend-title {
padding: 20rpx 25rpx;
display: flex;
align-items: center;
@ -383,72 +417,75 @@
font-weight: 600;
color: #3B3B3B;
justify-content: center;
image{
image {
width: 30rpx;
height: 30rpx;
margin: 0 10rpx;
}
}
.goodsRecommend{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
padding:10rpx 25rpx 25rpx;
.goodsItem{
width: 340rpx;
.goodsRecommend {
overflow: hidden;
padding: 10rpx 25rpx 25rpx;
.goodsItem {
width: 338rpx;
border-radius: 8rpx;
overflow: hidden;
background-color: #ffffff;
margin-bottom:24rpx;
margin-bottom: 24rpx;
padding: 20rpx;
box-sizing: border-box;
.pic{
.pic {
width: 100%;
text-align: center;
image{
image {
// width:100%;
width:256rpx;
height:256rpx;
width: 256rpx;
height: 256rpx;
}
}
.goodsInfo{
.title{
.goodsInfo {
.title {
display: flex;
align-items: center;
margin-top:14rpx;
.ziying{
padding:4rpx 10rpx;
margin-top: 14rpx;
.ziying {
padding: 4rpx 10rpx;
background: #FF4438;
border-radius: 2px 2px 2px 2px;
opacity: 1;
font-size: 24rpx;
font-weight: 400;
color: #FFFFFF;
}
.name{
margin-left:6rpx;
.name {
margin-left: 6rpx;
font-size: 24rpx;
font-weight: 400;
color: #1E1E1E;
flex:1;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
flex: 1;
}
}
.isExpress{
.isExpress {
height: 30rpx;
display: flex;
align-items: center;
margin:10rpx 0;
text{
display:inline-block;
margin: 10rpx 0;
text {
display: inline-block;
width: 44rpx;
height:30rpx;
height: 30rpx;
line-height: 28rpx;
border: 1px solid #F21A1C;
border-radius: 2px 2px 2px 2px;
@ -459,23 +496,26 @@
font-weight: 400;
color: #F21A1C;
}
}
.price{
.price {
color: #F21A1C;
display: flex;
align-items: baseline;
}
.comment{
.comment {
margin-top: 6rpx;
font-size: 22rpx;
font-weight: 400;
color: #949494;
}
}
}
}
// 页面顶部
.head-info {
display: flex;
@ -580,6 +620,7 @@
vertical-align: bottom;
color: $main-bg;
flex: 1;
.unit {
font-size: 24rpx;
}

126
pages/category/index.vue
Unescape View File

@ -7,18 +7,16 @@
</view>
</view>
<view class="u-menu-wrap">
<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view" :scroll-top="scrollTop"
:scroll-into-view="itemId">
<scroll-view scroll-y scroll-with-animation class="u-tab-view menu-scroll-view">
<view v-for="(item,index) in tabbar" :key="index" class="u-tab-item"
:class="[current == index ? 'u-tab-item-active' : '']" @tap.stop="swichMenu(index)">
<text class="u-line-1">{{item.name}}</text>
</view>
</scroll-view>
<scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box"
@scroll="rightScroll">
<scroll-view :scroll-top="scrollRightTop" scroll-y scroll-with-animation class="right-box">
<view class="page-view">
<view class="class-item" :id="'item' + index" v-for="(item , index) in tabbar" :key="index">
<view class="item-box" v-for="(item1, index1) in item.children" :key="index1">
<view class="class-item">
<view class="item-box" v-for="(item1, index1) in tabbarList.children" :key="index1">
<view class="item-title">
<text>{{item1.name}}</text>
</view>
@ -43,18 +41,10 @@
export default {
data() {
return {
scrollTop: 0, //tab标题的滚动条位置
oldScrollTop: 0,
current: 0, // 预设当前项的值
menuHeight: 0, // 左边菜单的高度
menuItemHeight: 0, // 左边菜单item的高度
itemId: '', // 栏目右边scroll-view用于滚动的id
tabbar: [],
menuItemPos: [],
arr: [],
scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
timer: null, // 定时器
tabbarList: [],
scrollRightTop: 0,
}
},
onLoad() {
@ -78,17 +68,10 @@
},
// 点击左边的栏目切换
async swichMenu(index) {
console.log(index)
if (this.arr.length == 0) {
await this.getMenuItemTop();
}
if (index == this.current) return;
this.scrollRightTop = this.oldScrollTop;
this.$nextTick(function() {
this.current = index;
this.scrollRightTop = this.arr[index];
this.leftMenuStatus(index);
})
this.tabbarList = []
this.current = index;
this.tabbarList = this.tabbar[index];
this.getMenuItemTop()
},
getGoodsTypeList() {
const that = this;
@ -97,105 +80,25 @@
// is_hot: 0
})
.then(res => {
// 合并新数据
console.log(res, '分类数据')
that.tabbar = res.data.list;
that.tabbarList = res.data.list[0]
})
.catch(reject)
})
},
// 获取一个目标元素的高度
getElRect(elClass, dataVal) {
new Promise((resolve, reject) => {
const query = uni.createSelectorQuery().in(this);
query.select('.' + elClass).fields({
size: true
}, res => {
// 如果节点尚未生成，res值为null，循环调用执行
if (!res) {
setTimeout(() => {
this.getElRect(elClass);
}, 10);
return;
}
this[dataVal] = res.height;
resolve();
}).exec();
})
},
// 观测元素相交状态
async observer() {
this.tabbar.map((val, index) => {
let observer = uni.createIntersectionObserver(this);
// 检测右边scroll-view的id为itemxx的元素与right-box的相交状态
// 如果跟.right-box底部相交，就动态设置左边栏目的活动状态
observer.relativeTo('.right-box', {
top: 0
}).observe('#item' + index, res => {
if (res.intersectionRatio > 0) {
let id = res.id.substring(4);
this.leftMenuStatus(id);
}
})
})
},
// 设置左边菜单的滚动状态
async leftMenuStatus(index) {
// 如果为0，意味着尚未初始化
if (this.menuHeight == 0 || this.menuItemHeight == 0) {
await this.getElRect('menu-scroll-view', 'menuHeight');
await this.getElRect('u-tab-item', 'menuItemHeight');
}
// 将菜单活动item垂直居中
this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
this.current = index-1;
},
// 获取右边菜单每个item到顶部的距离
getMenuItemTop() {
new Promise(resolve => {
let selectorQuery = uni.createSelectorQuery();
selectorQuery.selectAll('.class-item').boundingClientRect((rects) => {
// 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
if (!rects.length) {
setTimeout(() => {
this.getMenuItemTop();
}, 10);
return;
}
rects.forEach((rect) => {
// 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
this.arr.push(rect.top - rects[0].top);
console.log(rects[0].top)
this.scrollRightTop = rects[0].top
resolve();
})
}).exec()
})
},
// 右边菜单滚动
async rightScroll(e) {
this.oldScrollTop = e.detail.scrollTop;
if (this.arr.length == 0) {
await this.getMenuItemTop();
}
if (this.timer) return;
if (!this.menuHeight) {
await this.getElRect('menu-scroll-view', 'menuHeight');
}
setTimeout(() => { // 节流
this.timer = null;
// scrollHeight为右边菜单垂直中点位置
let scrollHeight = e.detail.scrollTop;
for (let i = 0; i < this.arr.length; i++) {
let height1 = this.arr[i];
let height2 = this.arr[i + 1];
// 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
if (!height2 || scrollHeight >= height1 && scrollHeight < height2) {
this.leftMenuStatus(i+1);
return;
}
}
}, 10)
}
}
}
</script>
@ -276,12 +179,11 @@
}
.page-view {
padding: 0 16rpx 16rpx;
overflow: hidden;
}
.class-item {
margin-bottom: 12rpx;
margin-bottom: 30rpx;
background-color: #fff;
padding: 20rpx;
border-radius: 8rpx;

173
pages/goods/list.vue
Unescape View File

@ -57,76 +57,124 @@
<!-- 商品列表 -->
<view class="goods-list clearfix" :class="['column-' + (showView ? '1' : '2')]">
<view class="goods-item" v-for="(item, index) in list.data" :key="index"
@click="onTargetDetail(item.goods_id)">
<!-- 单列显示 -->
<view v-if="showView" class="dis-flex">
<!-- 商品图片 -->
<view class="goods-item-left">
<image class="image" :src="item.goods_image"></image>
</view>
<view class="goods-item-right">
<!-- 商品名称 -->
<view class="goods-name">
<text class="twoline-hide">{{ item.goods_name }}</text>
<view v-if="showView">
<view class="goods-item" v-for="(item, index) in list.data" :key="index"
@click="onTargetDetail(item.goods_id)">
<!-- 单列显示 -->
<view v-if="showView" class="dis-flex">
<!-- 商品图片 -->
<view class="goods-item-left">
<image class="image" :src="item.goods_image"></image>
</view>
<view class="goods-item-desc">
<!-- 商品卖点 -->
<view class="desc-selling-point dis-flex">
<text class="oneline-hide">{{ item.selling_point }}</text>
</view>
<!-- 商品销量 -->
<view class="desc-goods-sales dis-flex">
<text>已售{{ item.goods_sales }}件</text>
<view class="goods-item-right">
<!-- 商品名称 -->
<view class="goods-name">
<text class="twoline-hide">{{ item.goods_name }}</text>
</view>
<!-- 商品价格 -->
<view class="desc-footer">
<text
class="price-x">¥{{ item.goods_price_min>0?Number(item.goods_price_min):'' }}</text>
<text class="price-y col-9"
v-if="item.line_price_min > 0">¥{{ item.line_price_min>0?Number(item.line_price_min):'' }}</text>
<view class="goods-item-desc">
<!-- 商品卖点 -->
<view class="desc-selling-point dis-flex">
<text class="oneline-hide">{{ item.selling_point }}</text>
</view>
<!-- 商品销量 -->
<view class="desc-goods-sales dis-flex">
<text>已售{{ item.goods_sales }}件</text>
</view>
<!-- 商品价格 -->
<view class="desc-footer">
<text
class="price-x">¥{{ item.goods_price_min>0?Number(item.goods_price_min):'' }}</text>
<text class="price-y col-9"
v-if="item.line_price_min > 0">¥{{ item.line_price_min>0?Number(item.line_price_min):'' }}</text>
</view>
</view>
</view>
</view>
</view>
<!-- 多列显示 -->
<view v-else class="">
<!-- 商品图片 -->
<view class="goods-image">
<image class="image" mode="aspectFill" :src="item.goods_image"></image>
</view>
<view class="detail">
<!-- 商品名称 -->
<view class="goods-name">
<text class="twoline-hide">{{ item.goods_name }}</text>
</view>
<view class="shipping">
包邮
</view>
<view class="goodsInfo">
<view class="oneTip tip">
85英寸
</view>
<view class="twoTip tip">
量子电视
</view>
<view class="threeTip tip">
4K电视
</view>
<view v-else>
<u-waterfall v-model="list.data" ref="uWaterfall1">
<template v-slot:left="{leftList}">
<view class="goods-item" v-for="(item, index) in leftList" :key="index"
@click="onTargetDetail(item.goods_id)">
<!-- 多列显示 -->
<view class="">
<!-- 商品图片 -->
<view class="goods-image">
<image class="image" mode="aspectFill" :src="item.goods_image"></image>
</view>
<view class="detail">
<!-- 商品名称 -->
<view class="goods-name">
<text>{{ item.goods_name }}</text>
</view>
<view class="shipping">
包邮
</view>
<view class="goodsInfo">
<view class="oneTip tip">
85英寸
</view>
<view class="twoTip tip">
量子电视
</view>
<view class="threeTip tip">
4K电视
</view>
</view>
<!-- 商品价格 -->
<view class="detail-price oneline-hide">
<text
class="goods-price f-30 col-m">￥{{ item.goods_price_min>0?Number(item.goods_price_min):'' }}
<text class="delPrice">到手价</text></text>
<text v-if="item.line_price_min > 0"
class="line-price col-9 f-24">￥{{ item.line_price_min>0?Number(item.line_price_min):'' }}</text>
</view>
</view>
</view>
</view>
<!-- 商品价格 -->
<view class="detail-price oneline-hide">
<text
class="goods-price f-30 col-m">￥{{ item.goods_price_min>0?Number(item.goods_price_min):'' }}
<text class="delPrice">到手价</text></text>
<text v-if="item.line_price_min > 0"
class="line-price col-9 f-24">￥{{ item.line_price_min>0?Number(item.line_price_min):'' }}</text>
</template>
<template v-slot:right="{rightList}">
<view class="goods-item" v-for="(item, index) in rightList" :key="index"
@click="onTargetDetail(item.goods_id)">
<!-- 多列显示 -->
<view class="">
<!-- 商品图片 -->
<view class="goods-image">
<image class="image" mode="aspectFill" :src="item.goods_image"></image>
</view>
<view class="detail">
<!-- 商品名称 -->
<view class="goods-name">
<text>{{ item.goods_name }}</text>
</view>
<view class="shipping">
包邮
</view>
<!-- <view class="goodsInfo">
<view class="oneTip tip">
85英寸
</view>
<view class="twoTip tip">
量子电视
</view>
<view class="threeTip tip">
4K电视
</view>
</view> -->
<!-- 商品价格 -->
<view class="detail-price oneline-hide">
<text
class="goods-price f-30 col-m">￥{{ item.goods_price_min>0?Number(item.goods_price_min):'' }}
<text class="delPrice">到手价</text></text>
<text v-if="item.line_price_min > 0"
class="line-price col-9 f-24">￥{{ item.line_price_min>0?Number(item.line_price_min):'' }}</text>
</view>
</view>
</view>
</view>
<!-- <view class="evaluate">
200+条评论 99%好评率
</view> -->
</view>
</view>
</template>
</u-waterfall>
</view>
<u-empty text="暂无数据显示哦～" v-if="list.data.length==0" mode="list"></u-empty>
</view>
@ -538,7 +586,7 @@
// 平铺显示
.goods-list.column-2 {
.goods-item {
width: 50%;
// width: 50%;
}
}
@ -577,7 +625,6 @@
background: #fff;
.goods-name {
min-height: 68rpx;
line-height: 1.3;
white-space: normal;
color: #484848;

113
pages/index/index.vue
Unescape View File

@ -55,7 +55,8 @@
<text>{{item.text}}</text>
</view>
</view>
<view class="gridRows secondRows" :style="{'height': isToggle == false?catagoryList.length >0?'160rpx':'auto':'auto'}">
<view class="gridRows secondRows"
:style="{'height': isToggle == false?catagoryList.length >0?'160rpx':'auto':'auto'}">
<view class="gridItem" v-for="(item,index) in catagoryList" :key="index"
@click="goJump('/pages/goods/list?categoryId=' + item.category_id)">
<view class="imageC">
@ -85,7 +86,8 @@
</view>
<view class="left">
<text class="flag">¥</text>
<text class="num">{{couList.reduce_price?Number(couList.reduce_price):couList.reduce_price}}</text>
<text
class="num">{{couList.reduce_price?Number(couList.reduce_price):couList.reduce_price}}</text>
<view class="couponName">
<view>{{couList.name}}</view>
<view style="font-size: 20rpx;">领取后{{couList.expire_day}}天内有效</view>
@ -233,53 +235,59 @@
</view>
</view>
<view class="goodsRecommend">
<view class="">
<view class="goodsItem" v-for="(item,index) in LeftList" @click="goDetails(item)" :key="index">
<view class="pic">
<image :src="item.goods_image" mode="widthFix"></image>
</view>
<view class="goodsInfo">
<view class="title">
<text v-if="item.selling_point" class="ziying">{{item.selling_point}}</text>
<text class="name">{{item.goods_name}}</text>
</view>
<view class="isExpress">
<text>包邮</text>
<u-waterfall v-model="goodsRecommend" ref="uWaterfall1">
<template v-slot:left="{leftList}">
<view class="goodsItem" v-for="(item,index) in leftList" @click="goDetails(item)"
:key="index">
<view class="pic">
<image :src="item.goods_image" mode="widthFix"></image>
</view>
<view class="price">
<text style="font-size: 20rpx;">￥</text>
<text style="font-weight: bold;font-size: 36rpx;">{{item.goods_price_min}}</text>
<text style="font-size: 20rpx;margin-left:10rpx;">到手价</text>
<text
style="color: #949494;font-size: 22rpx;text-decoration: line-through;">￥{{item.line_price_min}}</text>
<view class="goodsInfo">
<view class="title">
<text v-if="item.selling_point" class="ziying">{{item.selling_point}}</text>
<text class="name">{{item.goods_name}}</text>
</view>
<view class="isExpress">
<text>包邮</text>
</view>
<view class="price">
<text style="font-size: 20rpx;">￥</text>
<text
style="font-weight: bold;font-size: 36rpx;">{{item.goods_price_min}}</text>
<text style="font-size: 20rpx;margin-left:10rpx;">到手价</text>
<text
style="color: #949494;font-size: 22rpx;text-decoration: line-through;">￥{{item.line_price_min}}</text>
</view>
</view>
</view>
</view>
</view>
<view class="">
<view class="goodsItem" v-for="(item,index) in RightList" @click="goDetails(item)" :key="index">
<view class="pic">
<image :src="item.goods_image" mode="widthFix"></image>
</view>
<view class="goodsInfo">
<view class="title">
<text v-if="item.selling_point" class="ziying">{{item.selling_point}}</text>
<text class="name">{{item.goods_name}}</text>
</view>
<view class="isExpress">
<text>包邮</text>
</template>
<template v-slot:right="{rightList}">
<view class="goodsItem" v-for="(item,index) in rightList" @click="goDetails(item)"
:key="index">
<view class="pic">
<image :src="item.goods_image" mode="widthFix"></image>
</view>
<view class="price">
<text style="font-size: 20rpx;">￥</text>
<text style="font-weight: bold;font-size: 36rpx;">{{item.goods_price_min}}</text>
<text style="font-size: 20rpx;margin-left:10rpx;">到手价</text>
<text
style="color: #949494;font-size: 22rpx;text-decoration: line-through;">￥{{item.line_price_min}}</text>
<view class="goodsInfo">
<view class="title">
<text v-if="item.selling_point" class="ziying">{{item.selling_point}}</text>
<text class="name">{{item.goods_name}}</text>
</view>
<view class="isExpress">
<text>包邮</text>
</view>
<view class="price">
<text style="font-size: 20rpx;">￥</text>
<text
style="font-weight: bold;font-size: 36rpx;">{{item.goods_price_min}}</text>
<text style="font-size: 20rpx;margin-left:10rpx;">到手价</text>
<text
style="color: #949494;font-size: 22rpx;text-decoration: line-through;">￥{{item.line_price_min}}</text>
</view>
</view>
</view>
</view>
</view>
</template>
</u-waterfall>
<u-empty text="暂无数据显示哦～" v-if="goodsRecommend.length==0" mode="list"></u-empty>
</view>
</view>
</view>
@ -545,8 +553,6 @@
seckillList: [],
xinpinList: [],
goodsRecommend: [],
LeftList: [],
RightList: [],
isToggle: false,
//第二
count: 4,
@ -686,7 +692,7 @@
uni.navigateTo({
url
})
} else{
} else {
uni.navigateTo({
url
})
@ -761,11 +767,6 @@
arr[i].goods_price_max = Number(arr[i].goods_price_max)
arr[i].line_price_min = Number(arr[i].line_price_min);
arr[i].line_price_max = Number(arr[i].line_price_max)
if (i % 2 === 0) {
this.LeftList.push(arr[i])
} else {
this.RightList.push(arr[i])
}
}
}
this.goodsRecommend = arr
@ -1065,14 +1066,16 @@
width: 100%;
overflow-x: auto;
overflow-y: hidden;
.tabItem {
margin-right: 30rpx;
margin-right: 30rpx;
position: relative;
display: inline-block;
display: inline-block;
font-size: 28rpx;
font-weight: 400;
padding: 0 20rpx;
color: #282828;
.flag {
position: absolute;
bottom: -13px;
@ -1677,9 +1680,7 @@
}
.goodsRecommend {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
overflow: hidden;
margin-top: 20rpx;
.goodsItem {

1087
pages/user/vip/goods.vue
View File

File diff suppressed because it is too large Load Diff
Write Preview
Loading…
Cancel
Save