<template>
<view class="box">
<view class="topbox">
<view class="sstop">
<image src="../../static/timg/icon_search@2x.png" mode="" class="sstopimg"></image>
<input type="text" v-model="name" placeholder="请输入商品名称" class="sstopInput" @confirm="ssList">
<image src="../../static/img/icon_close.png" mode="" @click="empty" v-if="inputChShow" class="inputCh"></image>
</view>
<scroll-view scroll-x="true" class="scroll-Y" >
<view class="classificationBox">
<view class="classification" v-for="(item,index) in categoryList" @click="topClick(index,item)">
<view class="classificationName" :class="{classificationNameActive:topIndex==index}">{{item.name}}</view>
<view class="classificationHx" v-if="topIndex==index"></view>
</view>
</view>
</scroll-view>
</view>
<view style="height: 180rpx;"></view>
<view class="paixuBox">
<view class="paixuLine" @click="defaultpx" :class="{pxActive:defaultpxActive}">
默认排序
</view>
<view class="paixuLine" @click="xlPx(1)">
<view :class="{pxActive:salessort}">销量</view>
<view class="paixuLineTbBox">
<view class="paixuLineTbtop" >
<image v-if="salessorts" src="../../static/timg/icon_arrow_up_pre@2x.png" mode="" class="paixuLineTbtopIcon paixuLineTbtopIcons"></image>
<image v-else src="../../static/timg/icon_arrow_up_def@2x.png" mode="" class="paixuLineTbtopIcon paixuLineTbtopIcons"></image>
</view>
<view class="paixuLineTbtop">
<image v-if="salessortx" src="../../static/timg/icon_arrow_pre@2x.png" mode="" class="paixuLineTbtopIcon paixuLineTbtopIconx"></image>
<image v-else src="../../static/timg/icon_arrow_def@2x.png" mode="" class="paixuLineTbtopIcon paixuLineTbtopIconx"></image>
</view>
</view>
</view>
<view class="paixuLine" @click="jgpx(1)">
<view :class="{pxActive:pricesort}">价格</view>
<view class="paixuLineTbBox">
<view class="paixuLineTbtop" >
<image v-if="pricesorts" src="../../static/timg/icon_arrow_up_pre@2x.png" mode="" class="paixuLineTbtopIcon paixuLineTbtopIcons"></image>
<image v-else src="../../static/timg/icon_arrow_up_def@2x.png" mode="" class="paixuLineTbtopIcon paixuLineTbtopIcons"></image>
</view>
<view class="paixuLineTbtop">
<image v-if="pricesortx" src="../../static/timg/icon_arrow_pre@2x.png" mode="" class="paixuLineTbtopIcon paixuLineTbtopIconx"></image>
<image v-else src="../../static/timg/icon_arrow_def@2x.png" mode="" class="paixuLineTbtopIcon paixuLineTbtopIconx"></image>
</view>
</view>
</view>
</view>
<scroll-view scroll-Y="true" class="scroll-Y goodsSw" >
<view class="goodsBox">
<view class="hotGoodsLine" v-for="(item,index) in list" @click="goDetail(item)">
<view>
<image :src="item.url" v-if="item.url" mode="" @error="defImg()" class="hotGoodsLineImg"></image>
<image v-else src="../../static/timg/noimg.png" mode="" class="hotGoodsLineImg"></image>
</view>
<view class="hotGoodsLineRIght">
<view class="goodsName">{{item.name}}</view>
<view class="timeTbox" v-if="item.goodsDownTime">
<view class="timeK" style="margin-left: 0;">{{item.shengyuD}}</view>
<view class="timeviewTxt" > 天</view>
<view class="timeK">{{item.shengyuH}}</view>
<view class="timeviewTxt"> 时</view>
<view class="timeK">{{item.shengyuM}}</view>
<view class="timeviewTxt" > 分 后结束抢购</view>
</view>
<view class="hotGoodsLineRIghtBottom">
<view class="goodsPrice">
<view class="goodsPrice1">{{item.saleLabel}}</view>
<view class="goodsPrice2">￥</view>
<view class="goodsPrice3">{{item.salePrice?item.salePrice:item.scribingPrice}}
<span v-if="item.categoryIds=='7B97D114-C419-42B2-9C1E-0B4CA284CDA0'">万</span>
</view>
<view class="goodsPrice4" v-if="item.showLabel&&item.scribingPrice">
<span v-if="item.showLabel.indexOf('1')!=-1">￥{{item.scribingPrice}}</span>
</view>
</view>
<view class="Sold" >
<view v-if="item.showLabel&&item.showLabel.indexOf('3')!=-1">
已售 {{item.saleQty>0?item.saleQty:0}}
</view>
</view>
</view>
</view>
</view>
<nodata v-if="list.length==0"></nodata>
</view>
</scroll-view>
<!-- 手机号授权 -->
<view class="authorizBox" v-if="authorizShow" @click="authorizShow=false">
<view class="authorizCont" @click.stop="">
<view class="authorizName">{{wxOpenData.miniAppName}}</view>
<view class="authorizMs">您好，欢迎访问本店，授权手机号登录能获取我们最新的促销活动哦~</view>
<button class="authorizContbutton" type="default" open-type="getPhoneNumber" @getphonenumber="decryptPhoneNumber">授权</button>
</view>
<view style="text-align: center;padding-top: 56rpx;">
<image src="../../static/timg/icon_guanbi@2x.png" mode="" class="authorizCloseImg"></image>
</view>
</view>
</view>
</template>
<script>
import nodata from '../../components/nodata/nodata.vue'
export default {
components: {
nodata
},
data() {
return {
userInfo:'',
salessort:false,
salessorts:false,
salessortx:false,
pricesort:false,
pricesorts:false,
pricesortx:false,
topIndex:0,
categoryList:'',
page:1,
limit:10,
name:'',
categoryID:'',
order:'',
orderBy:'',
list:[],
defaultImg: require("../../static/timg/noimg.png"),
defaultpxActive:false,
authorizShow:false,
code:'',
wxOpenData:'',
shopcategoryID:'',
inputChShow:false,
ext:'',
}
},
watch:{
name(val){
console.log(val)
if(val){
this.inputChShow=true
}
},
},
onLoad(opt) {
console.log(getApp().globalData.shopcategoryID)
//this.userInfo = uni.getStorageSync("userInfo");
this.shopcategoryID=getApp().globalData.shopcategoryID;
if(this.shopcategoryID){
this.categoryID=this.shopcategoryID
}
this.userInfo=this.$store.state.userInfo;
this.wxOpenData=this.$store.state.wxOpenData;
this.ext=this.$common.getExtStoreId();
this.getcategoryList();
this.getlistOpenGoodsPage();
/* uni.getLocation({
type: 'gcj02',
success: function(res) {
console.log(res)
},
fail(err) {
console.log(err)
}
}); */
},
onShow() {
var shopcategoryID = uni.getStorageSync("shopcategoryID")
if(shopcategoryID){
uni.removeStorageSync('shopcategoryID');
if(this.categoryList){
this.categoryList.forEach((item,index)=>{
//console.log(item.id)
if(item.id==shopcategoryID){
this.topIndex=index
}
})
this.categoryID=shopcategoryID;
this.list=[];
this.page=1;
this.getlistOpenGoodsPage()
}
}
},
methods: {
empty(){
console.log("情况")
this.name='';
this.inputChShow=false;
},
decryptPhoneNumber: function(e) {
console.log(e);
this.code=e.detail.code
this.wxPhoneLogin()
this.authorizShow=false;
},
wxPhoneLogin(){
var that=this;
this.$http('miniApp2/sys/wxPhoneLogin', {
appId:'wx33053a645546ec31',
unionId:'EEADACCD-8A19-499D-8AD7-6975D2C93243',
code:this.code,
openId:this.wxOpenData.openid
},'POST').then(res => {
var data = res.data;
if(data.loginInfo){
this.userInfo=data.loginInfo.openUser;
this.wxOpenData=data.loginInfo;
this.$store.commit('mutationswxOpenData', data.loginInfo)
this.$store.commit('mutationsuserInfo', this.userInfo)
this.topIndex=1;
this.list=[];
this.page=1;
this.getlistOpenGoodsPage()
}
})
},
xlPx(num){
this.salessort=true;
this.defaultpxActive=false;
this.pricesort=false;
this.pricesort=false;
this.pricesorts=false;
this.pricesortx=false;
if(this.salessorts){
num=2
}
if(num==1){
this.salessorts=true;
this.salessortx=false;
this.orderBy='asc';
}else{
this.salessorts=false;
this.salessortx=true;
this.orderBy='desc';
}
this.order='SaleQty';
this.list=[];
this.page=1;
this.getlistOpenGoodsPage()
},
jgpx(type){
this.salessort=false;
this.defaultpxActive=false;
this.pricesort=true;
this.salessort=false;
this.salessorts=false;
this.salessortx=false;
if(this.pricesorts){
type=2
}
if(type==1){
this.pricesorts=true;
this.pricesortx=false;
this.orderBy='asc';
}else{
this.pricesorts=false;
this.pricesortx=true;
this.orderBy='desc';
}
this.order='SalePrice';
this.list=[];
this.page=1;
this.getlistOpenGoodsPage()
},
defaultpx(){
this.defaultpxActive=true;
this.order='';
this.orderBy='';
this.salessort=false;
this.salessorts=false;
this.salessortx=false;
this.pricesort=false;
this.pricesorts=false;
this.pricesortx=false;
//this.topIndex=0;
this.list=[];
this.page=1;
this.getlistOpenGoodsPage()
},
defImg(event){
// console.log(event)
/* let img = event.srcElement;
img.src = this.defaultImg;
img.onerror = null; //防止闪图 */
},
topClick(index,item){
this.topIndex=index;
this.list=[];
this.page=1;
this.categoryID=item.id;
this.getlistOpenGoodsPage()
},
ssList(){
this.topIndex=1;
this.list=[];
this.page=1;
this.getlistOpenGoodsPage()
},
goDetail(item){
// if(!this.userInfo){
// this.authorizShow=true;
// }else{
// }
uni.navigateTo({
url:'goodsDetail?id='+item.id
})
},
getcategoryList(){
this.$http('openMall/categoryList', {
unionId:this.ext.unionId
},'GET').then(res => {
this.categoryList=res.data;
var obj={
id:'',
name:'全部'
}
this.categoryList.unshift(obj);
if(this.shopcategoryID){
//console.log(this.shopcategoryID)
this.categoryList.forEach((item,index)=>{
//console.log(item.id)
if(item.id==this.shopcategoryID){
this.topIndex=index
}
})
}
})
},
getlistOpenGoodsPage(){
uni.showLoading({ title: '加载中'});
var that=this;
this.$http('openMall/listOpenGoodsPage', {
page:this.page,
limit:this.limit,
name:this.name,
categoryID:this.categoryID,
orderBy:this.order,
order:this.orderBy,
unionId:this.ext.unionId
},'GET').then(res => {
uni.hideLoading();
res.data.Items.forEach(item=>{
if(item.goodsDownTime){
item.shengyuM=''
item.shengyuD=''
item.shengyuH=''
//console.log(item)
//that.clock(item)
let _this = this
let today = new Date() // 当前时间
let h = today.getHours()
let m = today.getMinutes()
let s = today.getSeconds()
let stopTime = new Date(item.goodsDownTime.replace(/-/g, '/')) // 结束时间
if (Number(new Date(item.goodsDownTime).getTime()) < Number(new Date().getTime())) {
this.activityEnd = true
return
}
let stopH = stopTime.getHours()
let stopM = stopTime.getMinutes()
let stopS = stopTime.getSeconds()
let shenyu = stopTime.getTime() - today.getTime() // 倒计时毫秒数
let shengyuD = parseInt(shenyu / (60 * 60 * 24 * 1000)) // 转换为天
let D = parseInt(shenyu) - parseInt(shengyuD * 60 * 60 * 24 * 1000)// 除去天的毫秒数
let shengyuH = parseInt(D / (60 * 60 * 1000)) // 除去天的毫秒数转换成小时
let H = D - shengyuH * 60 * 60 * 1000 // 除去天、小时的毫秒数
let shengyuM = parseInt(H / (60 * 1000)) // 除去天的毫秒数转换成分钟
let M = H - shengyuM * 60 * 1000// 除去天、小时、分的毫秒数
let S = parseInt((shenyu - shengyuD * 60 * 60 * 24 * 1000 - shengyuH * 60 * 60 * 1000 - shengyuM * 60 * 1000) / 1000)// 除去天、小时、分的毫秒数转化为秒
item.shengyuM=shengyuM;
item.shengyuD=shengyuD;
item.shengyuH=shengyuH;
}
})
var data=res.data.Items;
this.list=this.list.concat(data);
console.log(this.list)
})
},
clock(item){
console.log(item)
if(!item){
return false;
}
let _this = this
let today = new Date() // 当前时间
let h = today.getHours()
let m = today.getMinutes()
let s = today.getSeconds()
let stopTime = new Date(item.goodsDownTime.replace(/-/g, '/')) // 结束时间
if (Number(new Date(item.goodsDownTime).getTime()) < Number(new Date().getTime())) {
this.activityEnd = true
return
}
let stopH = stopTime.getHours()
let stopM = stopTime.getMinutes()
let stopS = stopTime.getSeconds()
let shenyu = stopTime.getTime() - today.getTime() // 倒计时毫秒数
let shengyuD = parseInt(shenyu / (60 * 60 * 24 * 1000)) // 转换为天
let D = parseInt(shenyu) - parseInt(shengyuD * 60 * 60 * 24 * 1000)// 除去天的毫秒数
let shengyuH = parseInt(D / (60 * 60 * 1000)) // 除去天的毫秒数转换成小时
let H = D - shengyuH * 60 * 60 * 1000 // 除去天、小时的毫秒数
let shengyuM = parseInt(H / (60 * 1000)) // 除去天的毫秒数转换成分钟
let M = H - shengyuM * 60 * 1000// 除去天、小时、分的毫秒数
let S = parseInt((shenyu - shengyuD * 60 * 60 * 24 * 1000 - shengyuH * 60 * 60 * 1000 - shengyuM * 60 * 1000) / 1000)// 除去天、小时、分的毫秒数转化为秒
this.shengyuM=shengyuM;
this.shengyuD=shengyuD;
this.shengyuH=shengyuH;
setTimeout(_this.clock, 500)
},
},
onReachBottom(){
this.page++;
this.getlistOpenGoodsPage()
//console.log("shanglas")
},
onPullDownRefresh(){
this.list=[];
this.page=1;
this.getlistOpenGoodsPage();
setTimeout(() => {
uni.stopPullDownRefresh(); // 关闭下拉刷新
}, 2000);
}
}
</script>
<style scoped lang="less">
.timeTbox{
height: 60rpx;
display: flex;
padding-top: 15rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #764D49;
}
.timeviewTxt{
line-height: 41rpx;
padding-top: 10rpx;
}
.timeDivTxt{
line-height: 60rpx;
padding: 0 10rpx;
}
.timeK{
height: 41rpx;
line-height: 41rpx;
color: #FFFFFF;
width: 41rpx;
text-align: center;
background: #F03B3B;
border-radius: 6rpx;
margin-top: 9rpx;
margin-left: 10rpx;
margin-right: 10rpx;
}
.hotGoodsLineRIghtBottom{
display: flex;
justify-content: space-between;
width: 470rpx;
}
.topbox{
position: fixed;
width: 750rpx;
top: -1rpx;
left: 0;
z-index: 11;
}
.inputCh{
width:40rpx;
height: 40rpx;
position: absolute;
right: 40rpx;
top: 40rpx;
z-index: 11;
}
.pxActive{
color: #FF0000 !important;
}
.paixuLineTbtopIcon{
width: 16rpx;
height: 8rpx;
display: block;
padding-left: 10rpx;
}
.paixuLineTbtopIconx{
padding-bottom:24rpx;
}
.paixuLineTbtopIcons{
padding-top: 8rpx;
}
.paixuLineTbBox{
display: flex;
flex-direction: column;
justify-content: space-between;
}
.box{
background: #F4F5F7;
min-height: 100vh;
}
.sstopInput{
width: 626rpx;
height: 72rpx;
background: #F4F5F7;
border-radius: 36rpx;
line-height: 72rpx;
font-size: 28rpx;
padding-left: 76rpx;
}
.sstop{
position: relative;
padding-top: 24rpx;
padding-left: 24rpx;
background: #ffffff;
}
.sstopimg{
width: 40rpx;
height: 40rpx;
position: absolute;
left: 44rpx;
top: 40rpx;
}
.scroll-Y{
background: #ffffff;
width: 750rpx;
}
.goodsBox{
min-height: calc(100vh - 280rpx);
}
.classificationBox{
display: flex;
padding-bottom: 12rpx;
}
.classificationName{
white-space: nowrap;
font-size: 28rpx;
color: #3C3C3C;
line-height: 40rpx;
padding:24rpx 24rpx 8rpx 24rpx;
font-weight: 400;
}
.classificationNameActive{
font-weight: 500 !important;
color: #FF0000 ;
}
.classificationHx{
width: 40rpx;
height: 4rpx;
background: #FF0000;
margin: 0 auto;
}
.paixuBox{
width: 750rpx;
height: 72rpx;
background: #FFFFFF;
margin-top: 20rpx;
display: flex;
justify-content: space-around;
border-bottom: 1px solid #EEEEEE;
}
.paixuLine{
line-height: 37rpx;font-size: 26rpx;color: #666666;padding-top: 18rpx;
display: flex;
}
.hotGoodsLine{
margin-top: 30rpx;
padding:0rpx 20rpx;
background: #FFFFFF;
border-radius: 16rpx;
display: flex;
}
.hotGoodsLineImg{
width: 208rpx;
height: 194rpx;
border-radius: 16rpx;
border: 1px solid #EEEEEE;
display: block;
}
.goodsName{
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 40rpx;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
}
.hotGoodsLineRIght{
padding-left: 24rpx;
}
.goodsPrice{
display: flex;
padding-top: 10rpx;
}
.goodsPrice1{
font-size: 24rpx;
font-weight: 400;
color: #FF0000;
padding-top: 8rpx;
}
.goodsPrice2{
font-size: 22rpx;
font-weight: 400;
color: #FF0000;
padding-top: 10rpx;
}
.goodsPrice3{
font-size: 32rpx;
font-weight: 500;
color: #FF0000;
}
.goodsPrice4{
font-size: 24rpx;
font-weight: 400;
color: #999999;
padding-top: 8rpx;
text-decoration:line-through;
padding-left: 10rpx;
}
.Sold{
font-weight: 400;
color: #999999;
font-size: 24rpx;
padding-top: 20rpx;
line-height: 30rpx;
height: 30rpx;
}
.authorizBox{
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
}
.authorizCont{
margin-top: 30vh;
width: 564rpx;
height: 408rpx;
background: #FFFFFF;
border-radius: 24rpx;
margin-left: 93rpx;
position: relative;
}
.authorizCloseImg{
width: 62rpx;
height: 62rpx;
}
.sqLogoBox{
width: 180rpx;
height: 180rpx;
background: #FFFFFF;
border-radius: 90rpx;
text-align: center;
position: absolute;
top: -50rpx;
left: 192rpx;
}
.authorizName{
color: #333333;
line-height: 42rpx;
font-size: 30rpx;
text-align: center;
padding-top: 58rpx;
}
.authorizMs{
color: #999999;
line-height: 36rpx;
font-size: 26rpx;
width: 452rpx;
padding-top: 24rpx;
text-align: center;
margin-left: 56rpx;
}
.authorizContbutton{
width: 422rpx;
height: 88rpx;
background: #D53533;
border-radius: 44rpx;
line-height: 88rpx;
text-align: center;
font-size:30rpx;
color: #FFFFFF;
margin-top: 62rpx;
margin-left:71rpx;
}
</style>