新增首页、分类页、优化在线客服组件、优化商品列表组件
parent
7b38c0de7b
commit
03711f6a13
8
App.vue
8
App.vue
|
|
@ -13,9 +13,11 @@
|
|||
//去除体验版和正式版的所有输出日志
|
||||
toolAll.tools.clearClog();
|
||||
// 查询状态栏的高度、并设置导航栏的高度
|
||||
this.statusBarH();
|
||||
// this.statusBarH();
|
||||
uni.setStorageSync('statusBar',uni.getSystemInfoSync().statusBarHeight);
|
||||
this.log(uni.getStorageSync('statusBar'),'App.vue第18行')
|
||||
// 查询视频是否开启
|
||||
toolAll.tools.isVedio();
|
||||
// toolAll.tools.isVedio();
|
||||
// 主题颜色
|
||||
// uni.request({
|
||||
// url: `${this.globalData.domainName}index/mini-program-setting`,
|
||||
|
|
@ -70,5 +72,5 @@
|
|||
@import url("./commons/animate.min.css");
|
||||
/* 动画样式 end */
|
||||
|
||||
page {background-color: rgba(244, 244, 244, 1);}
|
||||
page {background-color: rgba(255, 255, 255, 1);}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -30,12 +30,14 @@
|
|||
.home-quan-box image:last-child{width: 96rpx;height: 96rpx;margin-top: 56rpx;}
|
||||
.shopKf{position: fixed;right: 16rpx;bottom: 140rpx;z-index: 999;}
|
||||
/* 分类 */
|
||||
.catemo{color: #4D4D4D;padding: 20rpx 10rpx;text-align: center;margin-left: 10rpx;}
|
||||
.cateActive{background-color: #F5F5F5;border-radius: 10rpx 0rpx 0rpx 10rpx;padding: 20rpx 10rpx;text-align: center;margin-left: 10rpx;}
|
||||
.cate-tu-item{padding: 16rpx 20rpx;background-color: #DFDFDF;}
|
||||
.cate-box{position: fixed;top: 0;left: 0;bottom: 140rpx;background-color: #FFFFFF;}
|
||||
.list-min{min-height: 260rpx;}
|
||||
.cate-box .fon26 .mar-s20:first-child {margin-top: 50rpx;}
|
||||
.sort-box {background-color: #ececee;position: sticky;z-index: 6;}
|
||||
.screen-box{position: fixed;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,.5);z-index: 12;}
|
||||
.screen-box > view{background-color: #FFFFFF;margin-left: 200rpx; height: 100%;float: right;padding: 50rpx 30rpx;box-sizing: border-box;}
|
||||
.sort-price input {height: 50rpx;border: 2rpx solid #8c8c9b;}
|
||||
.screen-btn {position: absolute;bottom: 30rpx;right: 30rpx;left: 30rpx;}
|
||||
.screen-btn view {height: 80rpx;width: 229rpx;text-align: center;line-height: 80rpx;}
|
||||
.screen-btn view:first-child{border: 2rpx solid #8c8c9b;}
|
||||
.screen-btn view:last-child{border: 2rpx solid #000000;background-color: #000000;}
|
||||
/* 搜索 */
|
||||
.search-input-box{width: 100%;padding-bottom: 20rpx;}
|
||||
.tank-box{margin: 0 85rpx;}
|
||||
|
|
@ -337,6 +339,8 @@ swiper-item view:last-child .duan-xian{border-bottom: none;}
|
|||
.width55{width: 55%;}
|
||||
.width50{width: 50%;}
|
||||
.width48{width: 48%;}
|
||||
.width47{width: 47%;}
|
||||
.width46{width: 46%;}
|
||||
.width45{width: 45%;}
|
||||
.width33{width: 33%;}
|
||||
.width25{width: 25%;}
|
||||
|
|
@ -412,12 +416,16 @@ button:after{content: none!important;}
|
|||
.col7D{color: #7D7D7D;}
|
||||
.colB3{color: #B3B3B3;}
|
||||
.col5b{color: #5B5B5B;}
|
||||
.colpeili{color: #868695;}
|
||||
/* 字体位置 */
|
||||
.tc{text-align: center;}
|
||||
.tright{text-align: right;}
|
||||
|
||||
/* 行间距 */
|
||||
.linh40{line-height: 40rpx;}
|
||||
.linh50{line-height: 50rpx;}
|
||||
.linh60{line-height: 60rpx;}
|
||||
.linh70{line-height: 70rpx;}
|
||||
|
||||
/* 粗体 */
|
||||
.bold{font-weight: bold;}
|
||||
|
|
@ -428,6 +436,7 @@ button:after{content: none!important;}
|
|||
/* 背景颜色 */
|
||||
.pbackc{background-color: #3875F6;}
|
||||
.bacf{background-color: #FFFFFF;}
|
||||
.bac0{background-color: #000000;}
|
||||
.bcdb{background-color: #DBDBDB;}
|
||||
.bcf8{background: #F85050;}
|
||||
.bacf5{background: #F5F5F5;}
|
||||
|
|
@ -551,6 +560,8 @@ button:after{content: none!important;}
|
|||
.pad-x36{padding-bottom: 36rpx;}
|
||||
.pad-x40{padding-bottom: 40rpx;}
|
||||
.pad-x50{padding-bottom: 50rpx;}
|
||||
.pad-x120{padding-bottom: 120rpx;}
|
||||
.pad-x140{padding-bottom: 140rpx;}
|
||||
.pad-x160{padding-bottom: 160rpx;}
|
||||
.pad-x180{padding-bottom: 180rpx;}
|
||||
.pad-x260{padding-bottom: 260rpx;}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 3180711 */
|
||||
src: url('https://at.alicdn.com/t/font_3180711_ngoezww1u8.woff2?t=1644748713104') format('woff2'),
|
||||
url('https://at.alicdn.com/t/font_3180711_ngoezww1u8.woff?t=1644748713104') format('woff'),
|
||||
url('https://at.alicdn.com/t/font_3180711_ngoezww1u8.ttf?t=1644748713104') format('truetype');
|
||||
src: url('https://at.alicdn.com/t/font_3180711_dt5ycve1667.woff2?t=1644838459299') format('woff2'),
|
||||
url('https://at.alicdn.com/t/font_3180711_dt5ycve1667.woff?t=1644838459299') format('woff'),
|
||||
url('https://at.alicdn.com/t/font_3180711_dt5ycve1667.ttf?t=1644838459299') format('truetype');
|
||||
}
|
||||
|
||||
.icon {
|
||||
|
|
@ -13,6 +13,58 @@
|
|||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-customer-black:before {
|
||||
content: "\ec2e";
|
||||
}
|
||||
|
||||
.icon-customer:before {
|
||||
content: "\e628";
|
||||
}
|
||||
|
||||
.icon-check:before {
|
||||
content: "\e61e";
|
||||
}
|
||||
|
||||
.icon-del-white:before {
|
||||
content: "\e61f";
|
||||
}
|
||||
|
||||
.icon-screen:before {
|
||||
content: "\e60b";
|
||||
}
|
||||
|
||||
.icon-search:before {
|
||||
content: "\e653";
|
||||
}
|
||||
|
||||
.icon-caidan-mo:before {
|
||||
content: "\e73e";
|
||||
}
|
||||
|
||||
.icon-renwu-mo:before {
|
||||
content: "\e73f";
|
||||
}
|
||||
|
||||
.icon-shopp-cart:before {
|
||||
content: "\e73d";
|
||||
}
|
||||
|
||||
.icon-caidan-active:before {
|
||||
content: "\e608";
|
||||
}
|
||||
|
||||
.icon-renwu-acitve:before {
|
||||
content: "\e67c";
|
||||
}
|
||||
|
||||
.icon-home-mo:before {
|
||||
content: "\e673";
|
||||
}
|
||||
|
||||
.icon-home-active:before {
|
||||
content: "\e674";
|
||||
}
|
||||
|
||||
.icon-return:before {
|
||||
content: "\e600";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@
|
|||
background: isGradualChange ? `linear-gradient( to ${direction}, ${colorOne} 0%, ${colorTwo} 20%, ${colorThree} 80%, ${colorFour} 100%)` : `url(${backgroundImage}) ${backgroundColor} `,
|
||||
boxShadow: `-10rpx 0rpx 20rpx rgba( 0, 0, 0, ${boxShadowNum})`
|
||||
}">
|
||||
<!-- 后台动态改变的icon与标题 start -->
|
||||
<!-- tab-图标列表 -->
|
||||
<view class="item-box" :style="{marginBottom: marginBottomNum +'px'}">
|
||||
<view @tap="choosefoot(index)"
|
||||
|
|
@ -24,6 +25,7 @@
|
|||
:style="{width:100 / imgList.length +'%', color:newcurrent == index ? colorActive : colorMo}"
|
||||
v-for="(itemt,index) in titleList" :key="index">{{itemt}}</view>
|
||||
</view>
|
||||
<!-- 后台动态改变的icon图 end -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,127 @@
|
|||
<template>
|
||||
<view>
|
||||
<view class="swiper-item mar-x40" v-for="(item,index) in list" :key="index">
|
||||
<!-- 活动商品 start -->
|
||||
<h1 style="" class="fon36 bold">{{item.title}}</h1>
|
||||
<view class="colpeili fon26 mar-s20 mar-x40 clips1">{{item.content}}</view>
|
||||
<view class="posir">
|
||||
<image class="radius30" :src="item.mainImg" mode="aspectFill" style="height: 425rpx;width: 100%;"></image>
|
||||
<view v-if="item.isActivity" class="posia fon24 colf pad-zy10 pad-s10 pad-x20" style="background: url(/static/public/icon-time-limit.png) no-repeat;background-size: 100% 100%;top: 10rpx;right: 10rpx;">限时优惠</view>
|
||||
</view>
|
||||
<!-- 活动商品 end -->
|
||||
|
||||
<!-- 子商品 start -->
|
||||
<view class="disjbac fw">
|
||||
<view class="width47 mar-s50 posir" v-for="(childrenitem,childrenindex) in item.childrenList" :key="childrenindex">
|
||||
<image :src="childrenitem.childrenImg" mode="aspectFill" style="width: 100%;height: 312rpx;border-radius: 30rpx;"></image>
|
||||
<view class="clips2 fon30 col0 linh50" style="height: 100rpx;">{{childrenitem.childrenTitle}}</view>
|
||||
<view class="fon30 colpeili">￥{{childrenitem.childrenPrice}}</view>
|
||||
<view v-if="childrenitem.isActivity" class="posia fon24 colf pad-zy10 pad-s10 pad-x20" style="background: url(/static/public/icon-time-limit.png) no-repeat;background-size: 100% 100%;top: 10rpx;right: 10rpx;">限时优惠</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 子商品 end -->
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"list-one",
|
||||
props:{
|
||||
list:{
|
||||
type:Array,
|
||||
default:()=>{
|
||||
return [
|
||||
{
|
||||
title:'虎年快乐',
|
||||
content:'欢庆虎年，与所爱之人共燃盛典烟花',
|
||||
mainImg:'/static/public/member-head.png',
|
||||
isActivity:true,
|
||||
childrenList:[
|
||||
{
|
||||
childrenImg:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
||||
childrenTitle:'于亿年宝藏中臻选1的宝石级钻石每年开采数',
|
||||
childrenPrice:'2,000',
|
||||
isActivity:true,
|
||||
},
|
||||
{
|
||||
childrenImg:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
||||
childrenTitle:'于亿年宝藏中臻选1的宝石级钻石每年开采数于亿年宝藏中臻选1的宝石级钻石每年开采数',
|
||||
childrenPrice:'2,000',
|
||||
isActivity:false,
|
||||
},
|
||||
{
|
||||
childrenImg:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
||||
childrenTitle:'于亿年宝藏中臻选1的宝石级钻石每年开采数',
|
||||
childrenPrice:'2,000',
|
||||
isActivity:false,
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title:'虎年快乐',
|
||||
content:'欢庆虎年，与所爱之人共燃盛典烟花',
|
||||
mainImg:'/static/public/member-head.png',
|
||||
isActivity:true,
|
||||
childrenList:[
|
||||
{
|
||||
childrenImg:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
||||
childrenTitle:'于亿年宝藏中臻选1的宝石级钻石每年开采数',
|
||||
childrenPrice:'2,000',
|
||||
isActivity:true,
|
||||
},
|
||||
{
|
||||
childrenImg:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
||||
childrenTitle:'于亿年宝藏中臻选1的宝石级钻石每年开采数于亿年宝藏中臻选1的宝石级钻石每年开采数',
|
||||
childrenPrice:'2,000',
|
||||
isActivity:false,
|
||||
},
|
||||
{
|
||||
childrenImg:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
||||
childrenTitle:'于亿年宝藏中臻选1的宝石级钻石每年开采数',
|
||||
childrenPrice:'2,000',
|
||||
isActivity:false,
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title:'虎年快乐',
|
||||
content:'欢庆虎年，与所爱之人共燃盛典烟花',
|
||||
mainImg:'/static/public/member-head.png',
|
||||
isActivity:true,
|
||||
childrenList:[
|
||||
{
|
||||
childrenImg:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
||||
childrenTitle:'于亿年宝藏中臻选1的宝石级钻石每年开采数',
|
||||
childrenPrice:'2,000',
|
||||
isActivity:true,
|
||||
},
|
||||
{
|
||||
childrenImg:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
||||
childrenTitle:'于亿年宝藏中臻选1的宝石级钻石每年开采数于亿年宝藏中臻选1的宝石级钻石每年开采数',
|
||||
childrenPrice:'2,000',
|
||||
isActivity:false,
|
||||
},
|
||||
{
|
||||
childrenImg:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
||||
childrenTitle:'于亿年宝藏中臻选1的宝石级钻石每年开采数',
|
||||
childrenPrice:'2,000',
|
||||
isActivity:false,
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<template>
|
||||
<view class="disjbac fw">
|
||||
<view class="width47 mar-s50 posir" v-for="(item,index) in list" :key="index">
|
||||
<image :src="item.imgSrc" mode="aspectFill" style="width: 100%;height: 312rpx;border-radius: 30rpx;"></image>
|
||||
<view class="clips2 fon30 col0 linh50" style="height: 100rpx;">{{item.title}}</view>
|
||||
<view class="fon30 colpeili">￥{{item.price}}</view>
|
||||
<view v-if="item.isActivity" class="posia fon24 colf pad-zy10 pad-s10 pad-x20" style="background: url(/static/public/icon-time-limit.png) no-repeat;background-size: 100% 100%;top: 10rpx;right: 10rpx;">限时优惠</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:"list-two",
|
||||
props:{
|
||||
list:{
|
||||
type:Array,
|
||||
default:()=>{
|
||||
return [
|
||||
{
|
||||
imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
||||
title:'于亿年宝藏中臻选1的宝石级钻石每年开采数',
|
||||
price:'2,000',
|
||||
isActivity:true,
|
||||
},
|
||||
{
|
||||
imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
||||
title:'于亿年宝藏中臻选1的宝石级钻石每年开采数',
|
||||
price:'2,000',
|
||||
isActivity:false,
|
||||
},
|
||||
{
|
||||
imgSrc:'https://s6.jpg.cm/2022/02/14/L4oDhy.jpg',
|
||||
title:'于亿年宝藏中臻选1的宝石级钻石每年开采数',
|
||||
price:'2,000',
|
||||
isActivity:false,
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -1,9 +1,19 @@
|
|||
<template>
|
||||
<view>
|
||||
<view @tap="lianK" :style="{background:publicColor,right:nright+'rpx',bottom:nbottom+'rpx'}" :class="isSmall?'smallImg':''" class="fw posir" style="position: fixed;z-index: 2; width: 120rpx;height: 120rpx;border-radius: 100%;display: flex;justify-content: center;align-items: center;box-shadow: 0rpx 0rpx 20rpx rgba(0,0,0,.22);">
|
||||
<image class="posia" src="/static/public/btnKF.png" style="width: 50rpx;height: 50rpx;top: 20rpx;" mode=""></image>
|
||||
<view class="colf fon20 posia" style="bottom: 20rpx;">在线客服</view>
|
||||
<button class="fon24 posia" style="opacity: 0;top: 0;left: 0;right: 0;bottom: 0;" open-type="contact">客服</button>
|
||||
<view @tap="lianK"
|
||||
:style="{
|
||||
background: backgroundColor,
|
||||
right:nright+'rpx',
|
||||
bottom:nbottom+'rpx',
|
||||
boxShadow: `0rpx 0rpx 30rpx rgba(0,0,0,${shadowNum})`,
|
||||
borderRadius: radiusNum,
|
||||
width: widthHeight,
|
||||
height: widthHeight}"
|
||||
class="customer-box">
|
||||
<i class="icon" :class="['icon-customer','icon-customer-black'][iconNum]" style="font-size: 70rpx;"></i>
|
||||
<!-- <image class="posia" src="/static/public/btnKF.png" style="width: 50rpx;height: 50rpx;top: 20rpx;" mode=""></image> -->
|
||||
<view v-if="showText" class="fon20" style="margin-top: -20rpx;">在线客服</view>
|
||||
<button class="fon24 posia-op" open-type="contact"></button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
|
@ -12,9 +22,30 @@
|
|||
export default {
|
||||
name:"public-customer",
|
||||
props:{
|
||||
nright:{//距离右边多宽
|
||||
// 客服框框大小
|
||||
widthHeight:{
|
||||
type:String,
|
||||
default:'110rpx'
|
||||
},
|
||||
// 客服框背景色
|
||||
backgroundColor:{
|
||||
type:String,
|
||||
default:'#000000'
|
||||
},
|
||||
// 阴影大小0~1
|
||||
shadowNum:{
|
||||
type:Number,
|
||||
default:30
|
||||
default:0.55
|
||||
},
|
||||
// 圆角大小
|
||||
radiusNum:{
|
||||
type:String,
|
||||
default: '26rpx'
|
||||
},
|
||||
//距离右边多宽
|
||||
nright:{
|
||||
type:Number,
|
||||
default:20
|
||||
},
|
||||
nbottom:{//距离底部多高
|
||||
type:Number,
|
||||
|
|
@ -24,6 +55,16 @@
|
|||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
// 是否显示在线客服文本
|
||||
showText:{
|
||||
type:Boolean,
|
||||
default:true
|
||||
},
|
||||
// 客服图标选中
|
||||
iconNum:{
|
||||
type:Number,
|
||||
default:0
|
||||
},
|
||||
nid:{//内容id
|
||||
type:String,
|
||||
default:'0'
|
||||
|
|
@ -50,5 +91,10 @@
|
|||
</script>
|
||||
|
||||
<style>
|
||||
.smallImg{transform: scale(.8);margin-right: -10rpx;}
|
||||
.customer-box {
|
||||
position: fixed;z-index: 2;
|
||||
display: flex;justify-content: center;align-items: center;flex-wrap: wrap;
|
||||
box-sizing: border-box;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -6,20 +6,20 @@
|
|||
|
||||
<!-- 头部状态栏 start -->
|
||||
<view class="status-nav"
|
||||
:style="{background: backgroudColor,height: navBarHeight+'rpx'}">
|
||||
:style="{background: backgroudColor,height: navBarHeight+'px'}">
|
||||
<!-- 返回键 -->
|
||||
<view class="return-box" @tap="backEv" v-if="ifReturn"
|
||||
:style="{height: navBarHeight+'rpx'}">
|
||||
:style="{height: navBarHeight+'px'}">
|
||||
<i class="icon icon-return"
|
||||
:style="{color: returnColor}"></i>
|
||||
</view>
|
||||
<!-- 标题 -->
|
||||
<view class="tab-title" :class="['','clips1','clips2'][clipNumber]" v-if="ifTitle"
|
||||
<view class="tab-title" v-if="ifTitle"
|
||||
:style="{
|
||||
color: titleColor,
|
||||
textAlign: ifCenter ? 'center' : 'left',
|
||||
padding: ifCenter ? '0px' : '0px 38px'}">
|
||||
<text>{{navBarTitle}}</text>
|
||||
justifyContent: ifCenter ? 'center' : '',
|
||||
padding: ifCenter ? '0px' : `${ifReturn ? '0 38' : '0 15'}px`}">
|
||||
<view :class="['','clips1','clips2'][clipNumber]" :style="{maxWidth: ifCenter ? '360rpx' : '70%'}">{{navBarTitle}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 头部状态栏 end -->
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
// 默认导航栏高度
|
||||
navBarHeight: {
|
||||
type:Number,
|
||||
default:110
|
||||
default:50
|
||||
},
|
||||
//是否显示返回键
|
||||
ifReturn:{
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
//是否显示标题
|
||||
ifTitle:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
default:true
|
||||
},
|
||||
// 导航栏标题
|
||||
navBarTitle: {
|
||||
|
|
@ -73,7 +73,7 @@
|
|||
// 标题是否居中
|
||||
ifCenter: {
|
||||
type:Boolean,
|
||||
default: false
|
||||
default: true
|
||||
}
|
||||
},
|
||||
data(){
|
||||
|
|
@ -87,7 +87,6 @@
|
|||
query.select('.statusHNH').boundingClientRect((rect) => {
|
||||
uni.setStorageSync('statusHNH',rect.height)
|
||||
}).exec();
|
||||
this.log(getApp().globalData.appletName,'status-nav组件打印');
|
||||
|
||||
// 获取当前页面路径
|
||||
let pages = getCurrentPages();
|
||||
|
|
@ -125,7 +124,7 @@
|
|||
.tab-title{
|
||||
width: 100%;
|
||||
font-size: 36rpx;font-weight: bold;
|
||||
padding: 0rpx;
|
||||
display: flex;
|
||||
}
|
||||
.tab-title text{display: block;margin-top: -4rpx;}
|
||||
.tab-title view{margin-top: -4rpx;}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -7,14 +7,10 @@
|
|||
:class="['tab__item', {'tab__item--active': currentIndex === index}]"
|
||||
:style="{color: (currentIndex === index ? `${itemColor}`: '')}" id="tab_item"
|
||||
@click="select(item, index)">
|
||||
<view class="tab__item-title">
|
||||
<!-- 标题 -->
|
||||
<slot name="title" :title="item.title"></slot>
|
||||
</view>
|
||||
<!-- 标题 -->
|
||||
<view v-if="!showTitleSlot" class="tab__item-title">
|
||||
{{item.title}}
|
||||
</view>
|
||||
<view><slot name="title" :title="item.title"></slot></view>
|
||||
<!-- 标题 -->
|
||||
<view v-if="!showTitleSlot">{{item.title}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 下划线 -->
|
||||
|
|
@ -129,31 +125,27 @@
|
|||
.tabBlock {
|
||||
position: relative;
|
||||
background: #fff;
|
||||
|
||||
.tab {
|
||||
position: relative;
|
||||
display: flex;
|
||||
font-size: 28rpx;
|
||||
padding-bottom: 15rpx;
|
||||
white-space: nowrap;
|
||||
|
||||
&__item {
|
||||
flex: 1;
|
||||
// width: 30%;
|
||||
text-align: center;
|
||||
line-height: 90rpx;
|
||||
color: $uni-text-color;
|
||||
|
||||
color: #868695;
|
||||
&--active {
|
||||
color: $uni-color-primary;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin: 0 40rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab__line {
|
||||
display: block;
|
||||
height: 6rpx;
|
||||
|
|
@ -161,7 +153,7 @@
|
|||
bottom: 20rpx;
|
||||
left: 0;
|
||||
z-index: 1;
|
||||
border-radius: 3rpx;
|
||||
border-radius: 6rpx;
|
||||
position: relative;
|
||||
background: $uni-color-primary;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,160 +0,0 @@
|
|||
<template>
|
||||
<view>
|
||||
<view v-if="list.length==0" class="" style="display: flex;flex-direction: column;align-items: center;">
|
||||
<image src="/static/public/nothing.png" style="width: 474rpx;height: 273rpx;" mode="aspectFill"></image>
|
||||
<view class="fon24 col3" style="margin-bottom: 60rpx;">暂无内容</view>
|
||||
</view>
|
||||
<view class="list-container">
|
||||
<view id="wf-list" class="list" v-for="(list,listIndex) of viewList" :key="listIndex">
|
||||
<view @tap="goDetail(listIndex,index)" class="item" style="position: relative;" v-for="(item,index) of list.list" :key="index">
|
||||
<image style="border-radius: 30rpx;min-height: 260rpx;" @load="handleViewRender(listIndex,index)" @error="handleViewRender(listIndex,index)" :src="item.main_img" mode="widthFix"></image>
|
||||
<view style="position: absolute;top: 18rpx;right: 18rpx;z-index: 3;" @tap.stop="chooseLike(listIndex,index)">
|
||||
<!-- <image src="/static/public/like.png" style="width: 69rpx;height: 69rpx;border-radius: 100%;" mode=""></image> -->
|
||||
<!-- 不喜欢 -->
|
||||
<image v-if="item.is_collected!=1" style="width: 69rpx;height: 69rpx;border-radius: 100%;" src="/static/public/no-like.png"></image>
|
||||
<!-- 喜欢 -->
|
||||
<image v-if="item.is_collected==1" :class="item.is_collected==1?'bounceIn':'bounceOut'" style="width: 69rpx;height: 69rpx;border-radius: 100%;" class="animated" src="/static/public/like.png" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view style="position: absolute;z-index: 1;bottom: 8rpx;color: #FFFFFF;background: -webkit-linear-gradient(bottom,rgba(0,0,0,0.79),rgba(255,255,255,0));width: 100%;padding-top: 100rpx;border-bottom-left-radius: 30rpx;border-bottom-right-radius: 30rpx;">
|
||||
<view style="margin: 20rpx;font-size: 22rpx;line-height: 40rpx;">
|
||||
<view style="display: flex;align-items: center;font-size: 30rpx;">
|
||||
<view class="clips1 mar-y10">{{item.title}}</view>
|
||||
<text v-if="item.isVideo" :style="{fontSize:(nFon-2)+'px',marginLeft:nmarz+'px'}" style="border-radius: 5rpx;padding: 0 6rpx;text-align: center;" class="pbackc flexs fon30">视频</text>
|
||||
</view>
|
||||
<view class="clips1" style="opacity: .7;">{{item.content}}</view>
|
||||
<view style="display: flex;align-items: center;">
|
||||
<image :src="item.head_img" style="width: 28rpx;height: 28rpx;border-radius: 100%;" mode=""></image>
|
||||
<view class="mar-z10" style="opacity: .7;">{{item.name}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<image v-if="item.isVideo" :style="{width:nWidth+'rpx',height:nHeight+'rpx'}" class="posia" style="top: 50%;left: 50%;transform: translate(-50%,-50%);z-index: 3;" src="/static/public/video.png" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 弹框 -->
|
||||
<pu-po :isShowT="isShowT" :contentVal="pu_content" @comfirmev="comfirmev" @cancleev="cancleev"></pu-po>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props:{
|
||||
list:{
|
||||
type:Array, //实际请求获取的列表数据
|
||||
},
|
||||
nWidth:{
|
||||
type:String,
|
||||
default:'120'
|
||||
},
|
||||
nHeight:{
|
||||
type:String,
|
||||
default:'120'
|
||||
},
|
||||
nFon:{
|
||||
type:String,
|
||||
default:'15'
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
viewList:[{list:[]},{list:[]}], //展示到视图的列表数据
|
||||
everyNum:2,
|
||||
jieDuan:false,
|
||||
pu_content:'是否需要取消收藏？',
|
||||
isShowT:false,
|
||||
current:{}
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
list(oldVal,newVal){
|
||||
this.init()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
comfirmev(){
|
||||
// console.log('取消收藏成功');
|
||||
this.$emit('comfirmev',this.current)
|
||||
this.isShowT = false
|
||||
},
|
||||
cancleev(){
|
||||
// console.log('关闭弹框');
|
||||
this.isShowT = false
|
||||
},
|
||||
chooseLike(index,indext){//喜欢不喜欢事件
|
||||
// console.log('喜欢不喜欢：',index);
|
||||
if(this.jieDuan==false){
|
||||
let isAuth = this.$toolAll.tools.returnAuth()
|
||||
if(!isAuth){
|
||||
this.$emit('chooseLike',this.viewList[index].list[indext].id)
|
||||
this.current = this.viewList[index].list[indext].id
|
||||
if(this.viewList[index].list[indext].is_collected==1) {
|
||||
this.isShowT = true
|
||||
} else {
|
||||
let maiOjb = {
|
||||
e:3,//内容收藏
|
||||
c:this.viewList[index].list[indext].id,
|
||||
t:new Date().getTime()//当前时间戳
|
||||
}
|
||||
this.$toolAll.tools.maiDian(maiOjb)
|
||||
}
|
||||
} else this.jieDuan = true
|
||||
}
|
||||
},
|
||||
goDetail(index,indext){//查看详情
|
||||
if(this.jieDuan==false){
|
||||
let isAuth = this.$toolAll.tools.returnAuth()
|
||||
if(!isAuth){
|
||||
uni.navigateTo({
|
||||
// url:'/pagesB/problemDetail/problemDetail?isCate='+this.list[index].isCate
|
||||
url:'/pagesB/problemDetail/problemDetail?id='+this.viewList[index].list[indext].id+'&category_id='+this.viewList[index].list[indext].category_id
|
||||
})
|
||||
} else this.jieDuan = true
|
||||
}
|
||||
},
|
||||
init(){
|
||||
this.viewList = [{list:[]},{list:[]}];
|
||||
setTimeout(()=>{
|
||||
this.handleViewRender(0,0)
|
||||
},0)
|
||||
},
|
||||
handleViewRender(x,y){
|
||||
const index = this.viewList.reduce((total,current)=>total + current.list.length,0)
|
||||
if(index>this.list.length-1) {
|
||||
// 加载完成触发事件并返回加载过的图片数
|
||||
return
|
||||
};
|
||||
const query = uni.createSelectorQuery().in(this);
|
||||
let listFlag = 0;
|
||||
query.selectAll('#wf-list').boundingClientRect(data => {
|
||||
listFlag = data[0].bottom - data[1].bottom<=0?0:1;
|
||||
this.viewList[listFlag].list.push(this.list[index])
|
||||
}).exec()
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
if(this.list.length){
|
||||
this.init()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
.list-container
|
||||
display flex
|
||||
justify-content space-between
|
||||
align-items:flex-start
|
||||
padding-top 20rpx
|
||||
.list
|
||||
width calc(48%)
|
||||
display flex
|
||||
flex-direction column
|
||||
.item
|
||||
margin-bottom 30rpx
|
||||
image
|
||||
width 100%
|
||||
.desc
|
||||
padding 20rpx
|
||||
font-size 22rpx
|
||||
</style>
|
||||
|
|
@ -273,7 +273,6 @@ const tools = {
|
|||
}
|
||||
},
|
||||
loginEv(){//执行登录事件
|
||||
getApp().log('tools.js第275行打印')
|
||||
let that = this;
|
||||
uni.login({
|
||||
provider: 'weixin',
|
||||
|
|
@ -385,7 +384,6 @@ const tools = {
|
|||
return newTime;
|
||||
},
|
||||
isVedio(){//是否显示视频内容
|
||||
getApp().log(8)
|
||||
uni.request({
|
||||
url: `${getApp().globalData.domainName}index/base-config`,
|
||||
method: 'get',
|
||||
|
|
|
|||
88
main.js
88
main.js
|
|
@ -41,56 +41,56 @@ const {log} = console;
|
|||
Vue.prototype.log = log;
|
||||
|
||||
|
||||
// 动态获取手机电量栏，并设置状态栏高度
|
||||
Vue.prototype.statusBarH = function(){
|
||||
uni.getSystemInfo({
|
||||
success: (e) => {
|
||||
// 定义电量栏
|
||||
let statusBar = 0;
|
||||
// 定义状态栏
|
||||
let customBar = 0;
|
||||
// // 动态获取手机电量栏，并设置状态栏高度
|
||||
// Vue.prototype.statusBarH = function(){
|
||||
// uni.getSystemInfo({
|
||||
// success: (e) => {
|
||||
// // 定义电量栏
|
||||
// let statusBar = 0;
|
||||
// // 定义状态栏
|
||||
// let customBar = 0;
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
// app时执行
|
||||
// 设置电量栏高度
|
||||
Vue.prototype.statusBar = e.statusBarHeight;
|
||||
// 设置状态栏高度
|
||||
Vue.prototype.customBar = e.statusBarHeight + 45;
|
||||
// #endif
|
||||
// // #ifdef APP-PLUS
|
||||
// // app时执行
|
||||
// // 设置电量栏高度
|
||||
// Vue.prototype.statusBar = e.statusBarHeight;
|
||||
// // 设置状态栏高度
|
||||
// Vue.prototype.customBar = e.statusBarHeight + 45;
|
||||
// // #endif
|
||||
|
||||
// 网页
|
||||
// #ifdef H5
|
||||
statusBar = 0
|
||||
customBar = e.statusBarHeight + 45
|
||||
// #endif
|
||||
// // 网页
|
||||
// // #ifdef H5
|
||||
// statusBar = 0
|
||||
// customBar = e.statusBarHeight + 45
|
||||
// // #endif
|
||||
|
||||
// 小程序
|
||||
// #ifdef MP
|
||||
statusBar = e.statusBarHeight
|
||||
customBar = e.statusBarHeight + 45
|
||||
if (e.platform === 'android') {
|
||||
this.$store.commit('SET_SYSTEM_IOSANDROID', false)
|
||||
customBar = e.statusBarHeight + 50
|
||||
}
|
||||
// #endif
|
||||
// // 小程序
|
||||
// // #ifdef MP
|
||||
// statusBar = e.statusBarHeight
|
||||
// customBar = e.statusBarHeight + 45
|
||||
// if (e.platform === 'android') {
|
||||
// this.$store.commit('SET_SYSTEM_IOSANDROID', false)
|
||||
// customBar = e.statusBarHeight + 50
|
||||
// }
|
||||
// // #endif
|
||||
|
||||
// 微信小程序
|
||||
// #ifdef MP-WEIXIN
|
||||
statusBar = e.statusBarHeight;
|
||||
// @ts-ignore
|
||||
const custom = wx.getMenuButtonBoundingClientRect()
|
||||
customBar = custom.bottom + custom.top - e.statusBarHeight;
|
||||
// #endif
|
||||
// // 微信小程序
|
||||
// // #ifdef MP-WEIXIN
|
||||
// statusBar = e.statusBarHeight;
|
||||
// // @ts-ignore
|
||||
// const custom = wx.getMenuButtonBoundingClientRect()
|
||||
// customBar = custom.bottom + custom.top - e.statusBarHeight;
|
||||
// // #endif
|
||||
|
||||
// 这里你可以自己决定存放方式，建议放在store中，因为store是实时变化的
|
||||
uni.setStorageSync('statusBar',statusBar);
|
||||
uni.setStorageSync('customBar',customBar);
|
||||
// // 这里你可以自己决定存放方式，建议放在store中，因为store是实时变化的
|
||||
// uni.setStorageSync('statusBar',statusBar);
|
||||
// uni.setStorageSync('customBar',customBar);
|
||||
|
||||
// 全局配置域名
|
||||
uni.setStorageSync('hostapi',`https://hengmei.scdxtc.cn/api/`);
|
||||
}
|
||||
})
|
||||
}
|
||||
// // 全局配置域名
|
||||
// uni.setStorageSync('hostapi',`https://hengmei.scdxtc.cn/api/`);
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,158 +1,136 @@
|
|||
<template>
|
||||
<view>
|
||||
<!-- 状态栏 -->
|
||||
<status-nav :statusBack="false" :titleVal="'分类'" :statusTitle="true"></status-nav>
|
||||
<view class="disje mar-zy20" :style="{paddingTop: (statusHNH+10)+'px'}">
|
||||
<template v-if="cateList.length!=0">
|
||||
<view class="cate-box" :style="{paddingTop:statusHNH+'px'}" style="overflow: hidden;overflow-y: scroll;">
|
||||
<view class="fon26">
|
||||
<view class="mar-s20 flexs" :style="{color : ccurrent==indexc ? publicColor:''}"
|
||||
:class="ccurrent==indexc?'bold cateActive':'catemo'"
|
||||
v-for="(itemc,indexc) in cateList" :key="indexc"
|
||||
@tap="chooseCate(indexc)">{{itemc.title}}</view>
|
||||
<status-nav
|
||||
:ifTitle="true"
|
||||
:ifReturn="false"
|
||||
:ifCenter="true"
|
||||
:navBarTitle="'分类'"></status-nav>
|
||||
<view :style="{paddingTop: statusBarHeight+50+'px'}" class="pad-x140">
|
||||
<view class="pad30 sort-box" :style="{top: statusBarHeight+50+'px'}">
|
||||
<view class="col0 fon38 disjbac fon50">
|
||||
<view class="bold">分类筛选</view>
|
||||
<i @tap="clikScreenIcon" class="icon icon-screen" style="font-size: 50rpx;"></i>
|
||||
</view>
|
||||
<view v-if="chooseCateList.length" class="disac fw fon24">
|
||||
<view class="disac pad-sx10 pad-zy20 radius20 bac0 colf mar-y20 mar-s20"
|
||||
v-for="(item,index) in chooseCateList" :key="index"
|
||||
@tap="delCate(index)">
|
||||
{{item}}<i class="icon icon-del-white mar-z20" style="font-size: 20rpx;"></i>
|
||||
</view>
|
||||
</view>
|
||||
<view :style="{width:cateW+'px'}" class="flexs" style="height: 10px;"></view>
|
||||
<view v-show="isLoading" class="pad-x260" style="width: 74%;">
|
||||
<!-- 热门推荐 -->
|
||||
<template v-if="ccurrent==0">
|
||||
<!-- 自定义轮播 -->
|
||||
<swiper-pu :bannerList="bannerList" :isplay="isAutoPlay" :newHeight="'154'" :newRadius="'10'" :newBottom="'10'"></swiper-pu>
|
||||
<!-- 自定义二级分类 -->
|
||||
<view class="mar-x20 mar-s40">
|
||||
<cate-pu :newCurrent="newCurrent*1" :activeb="publicColor" @choosecateEv="chooseTwo" :newcateList="cateListTwo"></cate-pu>
|
||||
</view>
|
||||
<!-- 列表 -->
|
||||
<view class="pad-zy30">
|
||||
<list-two></list-two>
|
||||
</view>
|
||||
<!-- 筛选框 -->
|
||||
<view v-show="isScreen" @tap="isScreen=false" class="screen-box" :style="{top:statusBarHeight+50+'px'}">
|
||||
<view @tap.stop="isScreen=true" class="posir">
|
||||
<view class="fon24">筛选</view>
|
||||
<!-- 类型 -->
|
||||
<view v-for="(item,index) in screenList" :key="index">
|
||||
<view class="fon30 bold mar-sx20">{{item.mainTitle}}</view>
|
||||
<view class="disac fw fon24">
|
||||
<view class="disac pad-sx10 pad-zy20 radius20 mar-y20 mar-x20"
|
||||
:class="childitem.isCheck ? 'bac0 colf' : 'colpeili'"
|
||||
v-for="(childitem,childindex) in item.childrenList" :key="childindex"
|
||||
@tap.stop="chooseCate(index,childindex)">
|
||||
{{childitem.title}}<i v-if="childitem.isCheck" class="icon icon-check mar-z20" style="font-size: 30rpx;"></i>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 列表 -->
|
||||
<block v-if="!isHot">
|
||||
<view v-if="dataList.length!=0">
|
||||
<list-pu @chooseLike="chooseLike" @comfirmev="comfirmev" :nFon="'14'" :radiu="true" :nmarz="'6'" :nWidth="'90'" :nHeight="'90'" :list="dataList"></list-pu>
|
||||
</view>
|
||||
<view v-else style="padding-top: 150rpx;">
|
||||
<list-pu @chooseLike="chooseLike" @comfirmev="comfirmev" :list="dataList"></list-pu>
|
||||
</view>
|
||||
</block>
|
||||
<block v-else>
|
||||
<view v-if="dataShopList.length!=0" style="margin-top: -20rpx;">
|
||||
<view class="pad-sx20">
|
||||
<view style="width: 48.6%;float: left;">
|
||||
<view v-if="index1%2==0" v-for="(item1,index1) in dataShopList" :key="index1" class="bacf radius15 mar-x20 animated fadeIn posir" @tap="goPage(item1.id,index1)">
|
||||
<image :src="item1.imgSrc" mode="aspectFill" style="width: 100%;border-top-left-radius: 15rpx;border-top-right-radius: 15rpx;height: 325rpx;"></image>
|
||||
<view class="pad-zy20 pad-s10 pad-x30">
|
||||
<view class="fon28 bold col3 clips2">{{item1.title}}</view>
|
||||
<view class="disac fon20 mar-sx20" v-if="!item1.isIntegral">
|
||||
<view class="radius10 colf mar-y10" style="padding: 6rpx 10rpx;" :style="{background:publicColor}">{{item1.disease_name}}</view>
|
||||
<view class="radius10 colf" v-if="item1.isTuan" style="padding: 6rpx 10rpx;background: #F85050;">团购</view>
|
||||
<view class="radius10 colf" v-if="item1.isPing" style="padding: 6rpx 10rpx;background: #F85050;">拼团活动</view>
|
||||
<view class="radius10 colf" v-if="item1.isXian" style="padding: 6rpx 10rpx;background: #F85050;">限时促销</view>
|
||||
</view>
|
||||
<view class="disac">
|
||||
<view class="fon28 bold" style="color: #F85050;margin-right: 8rpx;">
|
||||
<view v-if="item1.isIntegral" class="mar-s20">
|
||||
<view>积分:{{item1.integral}}</view>
|
||||
<view class="disac mar-s20" v-if="item1.grade!=0">
|
||||
<image src="/static/public/huiy.png" style="width: 40rpx;height: 33rpx;" mode=""></image>
|
||||
<view class="fon24 col3 mar-z10">{{item1.level_text}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
<span v-if="item1.isPing">拼团价</span>
|
||||
<span v-if="item1.isXian">促销价</span>
|
||||
￥{{item1.zhePrice}}
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="item1.isXian || item1.isPing || item1.isTuan" class="fon24" style="text-decoration: line-through;color: #C7C7C7;">￥{{item1.yuanPrice}}</view>
|
||||
</view>
|
||||
<view v-if="item1.isPing" class="disjbac mar-s20">
|
||||
<view class="fon24 col80">已拼团{{item1.activity_group_num}}组</view>
|
||||
<view class="disac">
|
||||
<image v-for="(itemm,indexm) in item1.activity_group_cover" :key="indexm" :src="itemm" mode="" style="width: 40rpx;height: 40rpx;border-radius: 100%;margin-left: -20rpx;"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="item1.isXian || item1.isPing || item1.isTuan" class="fon24 col80 mar-s20">结束时间：{{item1.activity_end_at}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view style="width: 48.6%;float: right;">
|
||||
<view v-if="index1%2!=0" v-for="(item1,index1) in dataShopList" :key="index1" class="bacf radius15 mar-x20 animated fadeIn posir" @tap="goPage(item1.id,index1)">
|
||||
<image :src="item1.imgSrc" mode="aspectFill" style="width: 100%;border-top-left-radius: 15rpx;border-top-right-radius: 15rpx;height: 325rpx;"></image>
|
||||
<view class="pad-zy20 pad-s10 pad-x30">
|
||||
<view class="fon28 bold col3 clips2">{{item1.title}}</view>
|
||||
<view class="disac fon20 mar-sx20" v-if="!item1.isIntegral">
|
||||
<view class="radius10 colf mar-y10" style="padding: 6rpx 10rpx;" :style="{background:publicColor}">{{item1.disease_name}}</view>
|
||||
<view class="radius10 colf" v-if="item1.isTuan" style="padding: 6rpx 10rpx;background: #F85050;">团购</view>
|
||||
<view class="radius10 colf" v-if="item1.isPing" style="padding: 6rpx 10rpx;background: #F85050;">拼团活动</view>
|
||||
<view class="radius10 colf" v-if="item1.isXian" style="padding: 6rpx 10rpx;background: #F85050;">限时促销</view>
|
||||
</view>
|
||||
<view class="disac">
|
||||
<view class="fon28 bold" style="color: #F85050;margin-right: 8rpx;">
|
||||
<view v-if="item1.isIntegral" class="mar-s20">
|
||||
<view>积分:{{item1.integral}}</view>
|
||||
<view class="disac mar-s20" v-if="item1.grade!=0">
|
||||
<image src="/static/public/huiy.png" style="width: 40rpx;height: 33rpx;" mode=""></image>
|
||||
<view class="fon24 col3 mar-z10">{{item1.level_text}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else>
|
||||
<span v-if="item1.isPing">拼团价</span>
|
||||
<span v-if="item1.isXian">促销价</span>
|
||||
￥{{item1.zhePrice}}
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="item1.isTuan || item1.isPing || item1.isXian" class="fon24" style="text-decoration: line-through;color: #C7C7C7;">￥{{item1.yuanPrice}}</view>
|
||||
</view>
|
||||
<view v-if="item1.isPing" class="disjbac mar-s20">
|
||||
<view class="fon24 col80">已拼团{{item1.activity_group_num}}组</view>
|
||||
<view class="disac">
|
||||
<image v-for="(itemm,indexm) in item1.activity_group_cover" :key="indexm" :src="itemm" mode="" style="width: 40rpx;height: 40rpx;border-radius: 100%;margin-left: -20rpx;"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="item1.isXian || item1.isPing || item1.isTuan" class="fon24 col80 mar-s20">结束时间：{{item1.activity_end_at}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="disjcac fc" style="margin-top: 34%;">
|
||||
<image class="zanw-img" src="/static/public/nothing.png" mode="aspectFill"></image>
|
||||
<view class="fon24 col3">暂无内容</view>
|
||||
</view>
|
||||
</block>
|
||||
</template>
|
||||
<!-- 秃顶种植 -->
|
||||
<template v-if="ccurrent!=0">
|
||||
<view v-if="tuList.length!=0">
|
||||
<cate-tu :isDetail="true" :list="tuList"></cate-tu>
|
||||
</view>
|
||||
<!-- 价格 -->
|
||||
<view class="sort-price">
|
||||
<view class="fon30 bold mar-sx20">价格</view>
|
||||
<view class="disac fon24">
|
||||
<input class="radius20 pad-zy20" v-model="minPrice" type="number" placeholder="0" />
|
||||
<view class="mar-zy20">~</view>
|
||||
<input class="radius20 pad-zy20" v-model="maxPrice" type="number" placeholder="9999" />
|
||||
</view>
|
||||
<view v-else class="disjcac fc" style="margin-top: 60%;">
|
||||
<image class="zanw-img" src="/static/public/nothing.png" mode="aspectFill"></image>
|
||||
<view class="fon24 col3">暂无内容</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
<!-- 按钮 -->
|
||||
<view class="disjbac fon30 screen-btn">
|
||||
<view @tap.stop="isScreen=false" class="radius30 colpeili">取消</view>
|
||||
<view @tap.stop="defineEv" class="radius30 colf">确定</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 底部tab -->
|
||||
<foot-tab :titleList="titleList" :imgList="imgList" :newcurrent='1'></foot-tab>
|
||||
<!-- 全局客服 -->
|
||||
<public-customer :nbottom="320"></public-customer>
|
||||
<!-- 返回顶部 -->
|
||||
<!-- <back-top :showTop="showTop" @backTop="backTop"></back-top> -->
|
||||
<!-- 弹框授权 -->
|
||||
<auth-userInfo-mobile :optionObj="optionObj"></auth-userInfo-mobile>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import swiperPu from '@/components/swiper-pu.vue';
|
||||
import cateTu from '@/components/cate-items/cate-tu.vue';
|
||||
import listTwo from '@/components/list/list-two.vue';
|
||||
import {collectionEV,cancleCollectionEV,checkBanner} from '@/jsFile/publicAPI.js';
|
||||
export default {
|
||||
components:{
|
||||
swiperPu,
|
||||
cateTu
|
||||
cateTu,
|
||||
listTwo
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statusHNH:uni.getStorageSync('statusHNH'),
|
||||
statusBarHeight:uni.getSystemInfoSync().statusBarHeight,
|
||||
publicColor:uni.getStorageSync('publicColor'),
|
||||
chooseCateList:[],//选中的分类列表
|
||||
temporaryCate:[],//暂存分类数据
|
||||
isScreen:false,//是否隐藏筛选弹框
|
||||
// 筛选弹框内容
|
||||
screenList:[
|
||||
{
|
||||
mainTitle:'类型',
|
||||
childrenList:[
|
||||
{
|
||||
title:'全部',
|
||||
isCheck:true,
|
||||
},
|
||||
{
|
||||
title:'翡翠',
|
||||
isCheck:false,
|
||||
},
|
||||
{
|
||||
title:'白玉',
|
||||
isCheck:false,
|
||||
},
|
||||
{
|
||||
title:'彩宝',
|
||||
isCheck:false,
|
||||
},
|
||||
{
|
||||
title:'琥珀',
|
||||
isCheck:false,
|
||||
},
|
||||
{
|
||||
title:'其他',
|
||||
isCheck:false,
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
mainTitle:'活动',
|
||||
childrenList:[
|
||||
{
|
||||
title:'全部',
|
||||
isCheck:true,
|
||||
},
|
||||
{
|
||||
title:'折扣',
|
||||
isCheck:false,
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
minPrice:'',//最低价格
|
||||
maxPrice:'',//最高价格
|
||||
ccurrent:0,
|
||||
cateList:[],
|
||||
cateListTwo:[//二级分类
|
||||
|
|
@ -220,10 +198,6 @@
|
|||
this.checkSwi()
|
||||
},
|
||||
onShow() {
|
||||
this.$toolAll.tools.isLogin()
|
||||
// console.log(this.category_id);
|
||||
if(this.category_id!='') this.checkCate(this.category_id)//调用左侧列表点击事件
|
||||
this.isAutoPlay = true;
|
||||
this.$requst.post('index/mini-program-setting').then(res=>{
|
||||
// log('数据：',res);
|
||||
if(res.code==0){
|
||||
|
|
@ -266,6 +240,90 @@
|
|||
},error=>{})
|
||||
},
|
||||
methods: {
|
||||
// 点击筛选按钮图标
|
||||
clikScreenIcon(){
|
||||
this.isScreen = true;
|
||||
},
|
||||
// 分类选择事件
|
||||
chooseCate(mainIndex,childrenIndex){
|
||||
// 清除分类所有选中项
|
||||
this.screenList[mainIndex].childrenList.forEach((item,index)=>{
|
||||
item.isCheck = false;
|
||||
})
|
||||
// 将当前选择的类别下的数组置空
|
||||
this.temporaryCate[mainIndex] = [];
|
||||
// 设置当前选中项为true
|
||||
this.screenList[mainIndex].childrenList[childrenIndex].isCheck = true;
|
||||
// 向二维数组存储选中项
|
||||
this.screenList[mainIndex].childrenList.forEach((item,index)=>{
|
||||
if(item.isCheck){
|
||||
if(index!=0){
|
||||
this.temporaryCate[mainIndex].push(item.title);
|
||||
} else {
|
||||
this.temporaryCate.splice(mainIndex,1);
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
// 删除选中的分类列表
|
||||
delCate(index){
|
||||
this.chooseCateList.splice(index,1);
|
||||
// 清除选中
|
||||
this.screenList.forEach((item1,index1)=>{
|
||||
item1.childrenList.forEach((item2,index2)=>{
|
||||
if(index2!=0){
|
||||
this.screenList[index1].childrenList[index2].isCheck = false;
|
||||
}
|
||||
})
|
||||
})
|
||||
if(this.chooseCateList.length){
|
||||
this.chooseCateList.forEach((existItem,existIndex)=>{
|
||||
// 设置存在的选中状态
|
||||
this.screenList.forEach((item,mainIndex)=>{
|
||||
let nameIndex = item.childrenList.findIndex((childItem)=>{
|
||||
return childItem.title == existItem;
|
||||
})
|
||||
if(nameIndex!=-1){
|
||||
this.screenList[mainIndex].childrenList[nameIndex].isCheck = true;
|
||||
} else {
|
||||
this.screenList[mainIndex].childrenList[0].isCheck = true;
|
||||
}
|
||||
})
|
||||
// 变更暂存的分类数组
|
||||
this.temporaryCate.forEach((temporaryItem,temporaryIndex)=>{
|
||||
let newIndex = temporaryItem.findIndex(titem=>{
|
||||
return titem == existItem;
|
||||
})
|
||||
if(newIndex==-1){
|
||||
this.temporaryCate[temporaryIndex].splice(0,1);
|
||||
}
|
||||
})
|
||||
})
|
||||
} else {// 传递的分类数组长度为0
|
||||
this.screenList.forEach((item1,index1)=>{
|
||||
item1.childrenList.forEach((item2,index2)=>{
|
||||
if(index2==0){
|
||||
this.screenList[index1].childrenList[index2].isCheck = true;
|
||||
}
|
||||
})
|
||||
})
|
||||
this.temporaryCate = [];
|
||||
}
|
||||
},
|
||||
// 分类筛选确认事件
|
||||
defineEv(){
|
||||
this.log(this.temporaryCate)
|
||||
// 二维数组this.temporaryCate 降一维数组this.chooseCateList
|
||||
let newChoose = this.temporaryCate.join().split(',');
|
||||
// 置空选中的分类列表
|
||||
this.chooseCateList = [];
|
||||
newChoose.forEach(item=>{
|
||||
if(item!=''){
|
||||
this.chooseCateList.push(item);
|
||||
}
|
||||
})
|
||||
this.isScreen = false;
|
||||
},
|
||||
checkSwi(){
|
||||
checkBanner({position:'category-hot-banner'}).then(res=>{
|
||||
if(res.code==0){
|
||||
|
|
@ -282,7 +340,6 @@
|
|||
this.bannerList.push(banObj)
|
||||
})
|
||||
}
|
||||
//
|
||||
}
|
||||
})
|
||||
},
|
||||
|
|
@ -322,15 +379,6 @@
|
|||
}
|
||||
this.cateList.unshift(reObj)
|
||||
this.checkCate(this.category_id)//调用分类列表事件
|
||||
if(this.cateList.length!=0){
|
||||
setTimeout(()=>{
|
||||
const query = wx.createSelectorQuery()
|
||||
query.select('.cate-box').boundingClientRect((rect) => {
|
||||
// console.log('分类宽度：',rect.width);
|
||||
this.cateW = rect.width
|
||||
}).exec()
|
||||
},300)
|
||||
}
|
||||
setTimeout(()=>{this.isLoading = true},500)
|
||||
}
|
||||
},error=>{})
|
||||
|
|
@ -429,11 +477,6 @@
|
|||
}
|
||||
},error=>{})
|
||||
},
|
||||
chooseCate(index){//分类选中事件
|
||||
this.ccurrent = index
|
||||
this.checkData(this.cateList[index].id)
|
||||
// console.log('分类选中:',index);
|
||||
},
|
||||
chooseTwo(index){//二级分类选择
|
||||
this.newCurrent = index
|
||||
this.isZanw = true;
|
||||
|
|
|
|||
|
|
@ -3,19 +3,36 @@
|
|||
<!-- 状态栏 -->
|
||||
<status-nav
|
||||
:ifTitle="true"
|
||||
:ifReturn="true"></status-nav>
|
||||
<view :style="{paddingTop: statusBarHeight+110+'rpx'}">
|
||||
<view style="position: sticky;z-index: 10;" :style="{top: statusBarHeight+110+'rpx'}">
|
||||
<swiper-tab id="tab" :list="type" v-model="active" @input="clickTab" itemColor="#ff0000" lineColor="#ff0000">
|
||||
:ifReturn="false"
|
||||
:ifCenter="true"
|
||||
:navBarTitle="'首页'"></status-nav>
|
||||
<view :style="{paddingTop: statusBarHeight+50+'px'}">
|
||||
<view class="pad-sx20 pad-zy40">
|
||||
<!-- 搜索输入框 start -->
|
||||
<view class="radius30 disac pad-zy40 pad-sx20 mar-x40" style="background-color: #f2f1f7;">
|
||||
<image src="/static/constant/icon-search.png" mode="aspectFill" style="width: 60rpx;height: 60rpx;"></image>
|
||||
<input type="text" style="padding-left: 20rpx;" v-model="searchText" placeholder="搜索" placeholder-style="font-weight: bold;" />
|
||||
</view>
|
||||
<!-- 搜索输入框 end -->
|
||||
|
||||
<!-- 轮播图 start -->
|
||||
<swiper-pu :bannerList="bannerList" :isplay="isAutoPlay" :newHeight="'230'" :newRadius="'15'" :newBottom="'10'"></swiper-pu>
|
||||
<!-- 轮播图 end -->
|
||||
</view>
|
||||
<view style="position: sticky;z-index: 10;" :style="{top: statusBarHeight+50+'px'}">
|
||||
<swiper-tab id="tab" :list="type" v-model="active" @input="clickTab" itemColor="#000000" lineColor="#000000">
|
||||
<!-- 自定义tabs样式 -->
|
||||
<!-- <view slot="title">其其</view> -->
|
||||
</swiper-tab>
|
||||
</view>
|
||||
<swiper class="swiper-page" :style="{height:swiperHeight-(statusBarHeight+110)+'px'}" :current="current" @change="swiperChange">
|
||||
<swiper-item v-for="item in type">
|
||||
<view class="swiper-item">{{item.title}}</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<view class="pad-zy40">
|
||||
<swiper class="swiper-page mar-s40 pad-x140" :style="{height:swiperHeight-(statusBarHeight+50)+'px'}" :current="current" @change="swiperChange">
|
||||
<swiper-item v-for="item in type" :key="index" class="" style="overflow: hidden;overflow-y: scroll;">
|
||||
<!-- 列表数据 -->
|
||||
<list-one></list-one>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 底部tab -->
|
||||
<foot-tab :titleList="titleList" :imgList="imgList"></foot-tab>
|
||||
|
|
@ -25,29 +42,28 @@
|
|||
<script>
|
||||
import swiperTab from '@/components/swiper-tab/swiper-tab.vue'
|
||||
import swiperPu from '@/components/swiper-pu.vue';
|
||||
import wfallsFlow from '@/components/wfalls-flow'
|
||||
import listOne from '@/components/list/list-one.vue';
|
||||
import {collectionEV,cancleCollectionEV,checkBanner} from '@/jsFile/publicAPI.js';
|
||||
export default {
|
||||
components:{
|
||||
swiperPu,
|
||||
wfallsFlow
|
||||
swiperTab,
|
||||
listOne
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
statusBarHeight:uni.getSystemInfoSync().statusBarHeight,
|
||||
statusHNH:uni.getStorageSync('customBar'),
|
||||
type: [{
|
||||
title: '全部'
|
||||
title: '翡翠'
|
||||
}, {
|
||||
title: '待付款'
|
||||
title: '白玉'
|
||||
}, {
|
||||
title: '待发货'
|
||||
title: '彩宝'
|
||||
}, {
|
||||
title: '待收货'
|
||||
title: '琥珀'
|
||||
}, {
|
||||
title: '已完成'
|
||||
}, {
|
||||
title: '已取消'
|
||||
title: '其他'
|
||||
}],
|
||||
active: 0,
|
||||
current:0,
|
||||
|
|
@ -175,12 +191,12 @@
|
|||
} else if(options.invite_code!='' && options.invite_code!=undefined){
|
||||
this.loginEv(options);
|
||||
}
|
||||
const query = wx.createSelectorQuery()
|
||||
query.select('.statusHNH').boundingClientRect((rect) => {
|
||||
// log('状态栏+标题栏：',rect.height);
|
||||
uni.setStorageSync('statusHNH',rect.height)
|
||||
this.statusHNH = rect.height
|
||||
}).exec()
|
||||
// const query = wx.createSelectorQuery()
|
||||
// query.select('.statusHNH').boundingClientRect((rect) => {
|
||||
// // log('状态栏+标题栏：',rect.height);
|
||||
// uni.setStorageSync('statusHNH',rect.height)
|
||||
// this.statusHNH = rect.height
|
||||
// }).exec()
|
||||
this.checkBCate();
|
||||
this.checkKey();
|
||||
this.checkSwi();//查询轮播图
|
||||
|
|
|
|||
|
|
@ -405,7 +405,6 @@
|
|||
if(index==0) {
|
||||
this.orderList = this.zanList;
|
||||
} else if(index==3){
|
||||
console.log(1234);
|
||||
} else {
|
||||
this.orderList = this.zanList.filter(item=>{
|
||||
return item.orderStatus==index;
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 197 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.7 KiB |
Loading…
Reference in New Issue