You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
2650 lines
64 KiB
2650 lines
64 KiB
<script>
|
|
import {
|
|
defaultRequest,
|
|
defaultRequest2,
|
|
defaultRequest4
|
|
} from '../../api/index.js'
|
|
import {
|
|
tarbar
|
|
} from '../../tarbar/index.vue'
|
|
const app = getApp();
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
typee: '',
|
|
mycurrent: 0,
|
|
isScrollShow: false,
|
|
scroll_active: 0,
|
|
scrollList: [
|
|
// {text:'DOPE'},{text:'VIDEO'},{text:'MEN'},{text:'KIDS'},{text:'PETS'},{text:'MEN'},{text:'PETS'},{text:'MEN'},
|
|
],
|
|
current: 0,
|
|
currentAttr: 0,
|
|
list: [{
|
|
image: 'https://via.placeholder.com/200x500.png/ff0000',
|
|
title: 'Adidas Yeezy Boost 350 DazzlingBlue Black',
|
|
desc: 'US$314.00'
|
|
},
|
|
{
|
|
image: 'https://via.placeholder.com/200x200.png/2878ff',
|
|
title: 'Adidas Yeezy Boost 350 DazzlingBlue Black',
|
|
desc: 'US$314.00'
|
|
}
|
|
],
|
|
indexDate: {},
|
|
info: [],
|
|
banner: {},
|
|
cat_list: [],
|
|
sum: 0,
|
|
mesNum: 0,
|
|
skillList: [],
|
|
backButtonPress: 0,
|
|
catQuery: {
|
|
_action: 'getgoods',
|
|
page_index: 1,
|
|
page_size: 30,
|
|
// type:'best'
|
|
gid: ''
|
|
},
|
|
bestlist: [],
|
|
// 初始化左右盒子
|
|
leftList: [],
|
|
rightList: [],
|
|
// 初始化左右盒子高度
|
|
leftH: 0,
|
|
rightH: 0,
|
|
isbest: 0,
|
|
popImg: '',
|
|
countdownTime: 10,
|
|
countdownTime2: 8,
|
|
popUrl: '',
|
|
myMes: {
|
|
_action: 'getmessagelist',
|
|
type: 1,
|
|
// importance:'',
|
|
// label:'',
|
|
page_index: 1,
|
|
page_size: 100
|
|
},
|
|
Swiper_H: 826,
|
|
Swiper_Hb: 0,
|
|
open_img: [],
|
|
indicatorDots: true,
|
|
autoplay: true,
|
|
interval: 2000,
|
|
duration: 500,
|
|
hotheight: 0,
|
|
num: 0,
|
|
bootom: 0,
|
|
hot_index: 0,
|
|
clientX: '',
|
|
clientY: '',
|
|
isCart: false,
|
|
goodsDate: {
|
|
comment_summary: [{
|
|
comment_summary: '',
|
|
commentlabel: ""
|
|
}],
|
|
gallery_list: [{
|
|
content: ''
|
|
}],
|
|
|
|
},
|
|
query: {
|
|
_action: 'getgoodsdetail',
|
|
goods_id: ''
|
|
},
|
|
// 添加到购物车请求参数
|
|
cartQuery: {
|
|
_action: 'addtocart',
|
|
goods_id: '',
|
|
goods_parent_id: 0,
|
|
goods_number: 1,
|
|
goods_attr_id: '',
|
|
goods_is_package: 0
|
|
},
|
|
//选择规格的数组
|
|
goods_attr_list: [],
|
|
tarbar: [{
|
|
src: '../../static/icon/home4.png',
|
|
name: 'Home',
|
|
url: '../index/index'
|
|
},
|
|
{
|
|
src: '../../static/img/Category.png',
|
|
name: 'Category',
|
|
url: '../category/index'
|
|
},
|
|
{
|
|
src: '../../static/img/min.png',
|
|
url: '../index/index2',
|
|
name: ''
|
|
},
|
|
{
|
|
src: '../../static/img/Cart.png',
|
|
name: 'Cart',
|
|
url: '../shippingCart/index'
|
|
},
|
|
{
|
|
src: '../../static/img/Account.png',
|
|
name: 'Account',
|
|
url: '../account/index'
|
|
},
|
|
],
|
|
list2: [{
|
|
src: '../../static/icon/home4.png'
|
|
},
|
|
{
|
|
src: '../../static/img/Category1.png'
|
|
},
|
|
{
|
|
src: ''
|
|
},
|
|
{
|
|
src: '../../static/img/cart1.png'
|
|
},
|
|
{
|
|
src: '../../static/img/Account1.png'
|
|
}
|
|
],
|
|
}
|
|
},
|
|
onPullDownRefresh() {
|
|
setTimeout(() => {
|
|
this.getList()
|
|
uni.stopPullDownRefresh()
|
|
|
|
}, 2000)
|
|
},
|
|
// onReady() {
|
|
// 轮询判断
|
|
// typee = 2 有网络
|
|
//判断是否有网络(尝试解决IOS白屏)
|
|
// let that = this;
|
|
// let s = 0;
|
|
// let time = setInterval(()=>{
|
|
// console.log('6666')
|
|
// uni.getNetworkType({
|
|
// success:(res)=>{
|
|
// console.log(res.networkType,s);
|
|
// if(res.networkType !== 'none'){
|
|
// that.typee = 2;
|
|
// clearInterval(time);
|
|
// console.log('清楚网络..')
|
|
// }
|
|
// }
|
|
// })
|
|
// s++;
|
|
// },1000);
|
|
/* uni.getNetworkType({
|
|
success: function(res) {
|
|
console.log(res.networkType);
|
|
//网络类型 wifi、2g、3g、4g、ethernet、unknown、none
|
|
setTimeout(function() {
|
|
if (res.networkType === "none") {
|
|
that.typee = 1;
|
|
console.log("当前无网络", that.typee);
|
|
uni.showToast({
|
|
title: '网络不佳,请重新打开........',
|
|
duration: 20000
|
|
});
|
|
} else {
|
|
that.typee = 2
|
|
console.log("有网络", that.typee);
|
|
uni.showToast({
|
|
title: '网络不佳,请重新打开........',
|
|
duration: 2000
|
|
});
|
|
}
|
|
}, 3000)
|
|
}
|
|
}); */
|
|
// },
|
|
onLoad() {
|
|
let that = this;
|
|
let s = 0;
|
|
// if (res.networkType == 'none') {
|
|
// that.typee = 1;
|
|
// uni.showToast({
|
|
// title: 'Please connect to the network',
|
|
// icon: 'exception',
|
|
// duration: 850
|
|
// });
|
|
// }
|
|
let time = setInterval(() => {
|
|
uni.getNetworkType({
|
|
success: (res) => {
|
|
console.log(res.networkType, s);
|
|
if (res.networkType == 'none') {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: 'Please connect to the network',
|
|
duration: 3000,
|
|
})
|
|
} else if (res.networkType !== 'none') {
|
|
that.typee = 2;
|
|
clearInterval(time);
|
|
let home = 'HOME'
|
|
this.getIndex(home)
|
|
this.isLogin = uni.getStorageSync('isLogin')
|
|
// //////console.info(this.curEndTime)
|
|
this.getList()
|
|
this.getMes()
|
|
this.getPullMes()
|
|
this.getInfo()
|
|
this.checkNetwork()
|
|
if (this.countdownTime2 != 0) {
|
|
uni.hideTabBar()
|
|
} else if (this.countdownTime2 == 0 || !this.popImg) {
|
|
//uni.showTabBar()
|
|
uni.setTabBarStyle({
|
|
backgroundColor: "#fff",
|
|
borderStyle: "black",
|
|
// selectedColor: "#999",
|
|
// color: "#999",
|
|
});
|
|
}
|
|
}
|
|
}
|
|
})
|
|
s++;
|
|
}, 5000);
|
|
},
|
|
|
|
mounted() {
|
|
this.getimgheight()
|
|
this.getimgheight1()
|
|
this.getimgheight2()
|
|
this.checkNetwork()
|
|
console.log(this.open_img)
|
|
if (this.open_img) {
|
|
setTimeout(() => {
|
|
this.getCountdownTime()
|
|
}, 2000)
|
|
} else if (!this.open_img) {
|
|
this.countdownTime2 = 0
|
|
}
|
|
},
|
|
|
|
|
|
created() {
|
|
this.getPullMes()
|
|
this.getimgheight()
|
|
this.getimgheight2()
|
|
this.checkNetwork()
|
|
},
|
|
onShow() {
|
|
this.isLogin = uni.getStorageSync('isLogin')
|
|
// console.log(this.isLogin)
|
|
uni.hideTabBar()
|
|
this.checkNetwork()
|
|
this.getList()
|
|
this.getMes()
|
|
this.sum = 0
|
|
},
|
|
computed: {
|
|
//当天结束时间
|
|
curEndTime() {
|
|
const endtime = new Date(new Date().setHours(23, 59, 59, 999)).getTime()
|
|
// 获取当前时间
|
|
const nowtime = (new Date()).getTime();
|
|
var date3 = nowtime - endtime; //时间差的毫秒数
|
|
date3 = Math.abs(date3)
|
|
return date3;
|
|
}
|
|
},
|
|
filters: {
|
|
hours(timestamp) {
|
|
var leave1 = timestamp % (24 * 3600 * 1000) //计算天数后剩余的毫秒数
|
|
var hours = Math.floor(leave1 / (3600 * 1000))
|
|
return hours
|
|
},
|
|
minutes(timestamp) {
|
|
var leave2 = (timestamp % (24 * 3600 * 1000)) % (3600 * 1000) //计算小时数后剩余的毫秒数
|
|
var minutes = Math.floor(leave2 / (60 * 1000))
|
|
return minutes
|
|
},
|
|
seconds(timestamp) {
|
|
var leave3 = ((timestamp % (24 * 3600 * 1000)) % (3600 * 1000)) % (60 * 1000) //计算分钟数后剩余的毫秒数
|
|
var seconds = Math.round(leave3 / 1000)
|
|
return seconds
|
|
},
|
|
|
|
|
|
},
|
|
watch: {},
|
|
onBackPress(options) {
|
|
this.backButtonPress++;
|
|
if (this.backButtonPress > 1) {
|
|
plus.runtime.quit();
|
|
} else {
|
|
plus.nativeUI.toast('Click again to exit');
|
|
}
|
|
setTimeout(function() {
|
|
this.backButtonPress = 0;
|
|
}, 1000);
|
|
return true;
|
|
|
|
},
|
|
methods: {
|
|
checkNetwork() {
|
|
uni.getNetworkType({
|
|
complete: function(res) {
|
|
// console.log(res.networkType)
|
|
if (res.networkType == 'none') {
|
|
setTimeout(() => {
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: 'Please connect to the network',
|
|
duration: 3000,
|
|
})
|
|
}, 200)
|
|
// return false
|
|
}
|
|
}
|
|
});
|
|
},
|
|
handlechange(e) {
|
|
this.mycurrent = e.detail.current
|
|
},
|
|
|
|
change(e) {
|
|
this.index = e
|
|
let tarbar = this.tarbar
|
|
// uni.showTabBar()
|
|
// for(let i =0; i<this.tarbar.length;i++){
|
|
// if(e==i){
|
|
// this.tarbar[e].src = this.list2[e].src
|
|
// }else{
|
|
// this.tarbar = tarbar
|
|
// this.tarbar[i].src = tarbar[i].src
|
|
// }
|
|
// }
|
|
if (e !== 2) {
|
|
uni.switchTab({
|
|
url: this.tarbar[e].url
|
|
})
|
|
} else {
|
|
uni.navigateTo({
|
|
url: this.tarbar[e].url
|
|
})
|
|
}
|
|
},
|
|
open() {
|
|
this.$refs.popup.open('center')
|
|
},
|
|
close() {
|
|
this.$refs.popup.close()
|
|
uni.setTabBarStyle({
|
|
backgroundColor: "#fff",
|
|
borderStyle: "black",
|
|
// selectedColor: "#999",
|
|
// color: "#999",
|
|
});
|
|
|
|
},
|
|
openClose() {
|
|
// console.log(11)
|
|
this.countdownTime2 = 0
|
|
//uni.showTabBar()
|
|
uni.setTabBarStyle({
|
|
backgroundColor: "#fff",
|
|
borderStyle: "black",
|
|
// selectedColor: "#999",
|
|
// color: "#999",
|
|
});
|
|
uni.switchTab({
|
|
url: '../index/index'
|
|
})
|
|
//uni.showTabBar()
|
|
},
|
|
onReachBottom(e) {
|
|
// console.log(111)
|
|
this.bootom = 1
|
|
},
|
|
getimgheight1(item) {
|
|
// const that = this
|
|
var height = 0
|
|
// 获取图片宽高
|
|
uni.getImageInfo({
|
|
src: item,
|
|
success: (image) => {
|
|
|
|
// this.Swiper_H = 0
|
|
height = image.height
|
|
this.hotheight = height
|
|
// 计算图片渲染高度
|
|
let showH = (50 * image.height) / image.width
|
|
// console.log(Swiper_H)
|
|
}
|
|
})
|
|
return this.hotheight
|
|
},
|
|
//获取广告
|
|
getPullMes() {
|
|
let data = {
|
|
_action: 'getpagedata',
|
|
pagecode: '001-STARTPAGE'
|
|
}
|
|
defaultRequest(data).then(res => {
|
|
////console.log('1',res)
|
|
let img
|
|
let url
|
|
if (res.error == 0) {
|
|
// console.log(res.data.zones)
|
|
if (res.data.zones) {
|
|
res.data.zones.map(item => {
|
|
if (item.zone_code == "KAIPIN") {
|
|
|
|
if (item.blocks) {
|
|
img = item.blocks
|
|
url = item.blocks[0].block_link
|
|
this.open_img = img
|
|
console.log(this.open_img.length, '0000')
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
this.open_img = []
|
|
this.countdownTime2 = 0
|
|
}
|
|
|
|
// this.popUrl = url
|
|
}
|
|
})
|
|
let data2 = {
|
|
_action: 'getpagedata',
|
|
pagecode: 'HOMEPOPUPADS'
|
|
}
|
|
defaultRequest(data2).then(res => {
|
|
////console.log('2',res)
|
|
if (res.error == 0 && res.data.zones) {
|
|
res.data.zones.map(item => {
|
|
if (item.zone_code == 'HOMEPOPUP') {
|
|
this.popImg = item.zone_icon
|
|
this.popUrl = item.zone_more_link
|
|
this.open()
|
|
// console.log(this.popImg,item.zone_code)
|
|
}
|
|
})
|
|
}
|
|
|
|
|
|
})
|
|
let data3 = {
|
|
_action: 'get_splash_ad',
|
|
appcode: 'DOPE+',
|
|
VERS: '1.0.0'
|
|
}
|
|
defaultRequest(data3).then(res => {
|
|
////console.log(res)
|
|
})
|
|
},
|
|
//5秒倒计时
|
|
getCountdownTime() {
|
|
uni.hideTabBar();
|
|
uni.setTabBarStyle({
|
|
backgroundColor: "#ccc",
|
|
borderStyle: "black",
|
|
});
|
|
// this.countdownTime = 10
|
|
// let timer = setInterval(() => {
|
|
// this.countdownTime--;
|
|
// if (this.countdownTime < 1) {
|
|
// clearInterval(timer)
|
|
// this.countdownTime = 0
|
|
// }
|
|
// }, 1000)
|
|
let timer2 = setInterval(() => {
|
|
// uni.hideTabBar();
|
|
this.countdownTime2--;
|
|
|
|
console.log(this.countdownTime2)
|
|
if (this.countdownTime2 < 0) {
|
|
clearInterval(timer2)
|
|
this.countdownTime2 = 0
|
|
}
|
|
|
|
if (this.countdownTime2 == 0) {
|
|
//uni.showTabBar()
|
|
uni.setTabBarStyle({
|
|
backgroundColor: "#fff",
|
|
borderStyle: "black",
|
|
// selectedColor: "#999",
|
|
// color: "#999",
|
|
});
|
|
clearInterval(timer2)
|
|
}
|
|
}, 1000)
|
|
|
|
|
|
},
|
|
//gaogaoye 跳转
|
|
popImgto() {
|
|
const i = this.popUrl.indexOf('?')
|
|
const url = this.popUrl.substring(i)
|
|
////console.log(url)
|
|
if (this.popUrl.includes('dope.dope://?goodslist=1')) {
|
|
|
|
////console.log(url)
|
|
uni.navigateTo({
|
|
url: '/pages/category/productList' + url + '&tag=1'
|
|
})
|
|
} else {
|
|
uni.navigateTo({
|
|
url: '../productDetails/index' + url + '&img=1'
|
|
})
|
|
}
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
// 获取首页数据配置
|
|
getIndex(code) {
|
|
|
|
let data = {
|
|
_action: 'getpagedata',
|
|
pagecode: ''
|
|
}
|
|
data.pagecode = code
|
|
defaultRequest(data).then(res => {
|
|
|
|
if (res.error == 0) {
|
|
this.indexDate = res.data
|
|
console.log(this.indexDate, '首页配置')
|
|
this.len = 0
|
|
let height = 0
|
|
this.indexDate.zones.map(item => {
|
|
item.blocks.map(item1 => {
|
|
// console.log(item.zone_code, item + '11111111111111')
|
|
uni.getImageInfo({
|
|
src: item1.block_pic,
|
|
success: (image) => {
|
|
// console.log(image)
|
|
// let showH = (500 * image.height) / image.width
|
|
let showH = (image.height) / 2
|
|
height = image.height
|
|
item1.height = showH
|
|
// item1.image = image
|
|
// console.log(height)
|
|
}
|
|
})
|
|
|
|
|
|
})
|
|
if (item.zone_code == 'ICON') {
|
|
item.content = ''
|
|
this.info.push(item)
|
|
this.len = item.blocks.length
|
|
// this.len+= this.info.blocks.length
|
|
//console.log(this.info,'info')
|
|
}
|
|
if (item.zone_code == 'BANNER') {
|
|
item.blocks.map(item1 => {
|
|
this.getimgheight(item1.block_pic)
|
|
// console.log(this.Swiper_H)
|
|
})
|
|
}
|
|
if (item.zone_code == 'BANNER1') {
|
|
item.blocks.map(item1 => {
|
|
this.getimgheight2(item1.block_pic)
|
|
// console.log(this.Swiper_H)
|
|
})
|
|
}
|
|
if (item.zone_code == 'HONLIST3') {
|
|
item.blocks.map(item1 => {
|
|
// console.log('HONLIST3',item1)
|
|
})
|
|
}
|
|
if (item.zone_code == 'HONLIST2') {
|
|
item.blocks.map(item1 => {
|
|
// console.log('HONLIST2',item1)
|
|
})
|
|
}
|
|
if (this.info.length > 1) {
|
|
for (let i = 0; i < this.info.length; i++) {
|
|
if (this.info[i].blocks.length > this.len) {
|
|
this.len = this.info[i].blocks.length
|
|
}
|
|
}
|
|
}
|
|
if (item.zone_code == 'LIST1') {
|
|
console.log(item.zone_more_link)
|
|
const i = item.zone_more_link.indexOf('gid=')
|
|
// console.log(i)
|
|
const ids = item.zone_more_link.substring(i + 4, item
|
|
.zone_more_link
|
|
.length)
|
|
// console.log(ids)
|
|
// this.bestlist.push(item.blocks)
|
|
// //////console.log(this.bestlist,'精品')
|
|
this.isbest = 1
|
|
this.catQuery.gid = ''
|
|
this.catQuery.gid = ids
|
|
this.getCatList()
|
|
item.blocks.map(item1 => {
|
|
this.bestlist.push(item1)
|
|
|
|
})
|
|
console.log(this.bestlist, '精品')
|
|
}
|
|
|
|
})
|
|
}
|
|
})
|
|
defaultRequest({
|
|
_action: 'getpagedata',
|
|
pagecode: 'HOMECLASS'
|
|
}).then(res => {
|
|
// //////console.log(res)
|
|
if (res.error == 0) {
|
|
this.scrollList = res.data.zones
|
|
}
|
|
})
|
|
|
|
// 获取tarbar中间
|
|
let data2 = {
|
|
_action: 'getpagedata',
|
|
pagecode: 'HOMESALEICON '
|
|
}
|
|
defaultRequest(data2).then(res => {
|
|
console.log(res)
|
|
let url
|
|
if (res.error == 0) {
|
|
if (res.data.page_code == 'HOMESALEICON') {
|
|
let src =
|
|
'https://www.dopeplus.com/images/mapp_customized/202211/1667961215280331818.png'
|
|
if (src == res.data.zones[0].blocks[0].block_pic) {
|
|
this.tarbar[2].src = '../../static/img/min.png'
|
|
} else {
|
|
src = res.data.zones[0].blocks[0].block_pic
|
|
// this.tabar[2].src=src
|
|
this.tarbar[2].src = res.data.zones[0].blocks[0].block_pic
|
|
uni.setStorageSync('midButton', src)
|
|
}
|
|
}
|
|
}
|
|
});
|
|
},
|
|
// 获取商品详情数据
|
|
getDate(item) {
|
|
uni.showLoading({
|
|
title: 'loading'
|
|
})
|
|
setTimeout(() => {
|
|
uni.hideLoading()
|
|
this.isCart = true
|
|
uni.hideTabBar()
|
|
}, 1500)
|
|
console.log(item)
|
|
if (item.goodid) {
|
|
this.query.goods_id = item.goodid
|
|
this.cartQuery.goods_id = item.goodid
|
|
} else if (item.block_link) {
|
|
const i = item.block_link.indexOf('=')
|
|
this.query.goods_id = item.block_link.substring(i + 1, item.block_link.length)
|
|
this.cartQuery.goods_id = item.block_link.substring(i + 1, item.block_link.length)
|
|
}
|
|
console.log(this.query.goods_id)
|
|
// this.info = []
|
|
this.goods_attr_list = []
|
|
|
|
defaultRequest(this.query).then(res => {
|
|
if (res.error == 0) {
|
|
console.log(res.data)
|
|
this.goodsDate = res.data
|
|
this.shop_price = this.goodsDate.shop_price
|
|
this.goodsDate.gallery_list.map(item => {
|
|
item.content = ''
|
|
this.info.push(item.img_url)
|
|
|
|
})
|
|
|
|
if (this.goodsDate.attr_list) {
|
|
console.log(this.goodsDate.attr_list)
|
|
this.Is_attr = this.goodsDate.attr_list.length
|
|
if (this.Is_attr > 0) {
|
|
let Size_list
|
|
let Attr_list
|
|
|
|
|
|
this.goodsDate.attr_list.map(item => {
|
|
|
|
// if(item.attr_name){
|
|
// this.sizenum=item.goods_attrs.length
|
|
// }
|
|
// if(item.attr_name=="Color"){
|
|
// this.colorNum=item.goods_attrs.length
|
|
// console.log(this.colorNum)
|
|
// Attr_list = item.goods_attrs
|
|
// let i = 0
|
|
// Attr_list.map( item =>{
|
|
// this.Attr_list +=item.attr_value + '、'
|
|
// i++
|
|
// })
|
|
// this.Attr_list= this.Attr_list.substring(0, this.Attr_list.length-1)
|
|
// console.log(i)
|
|
// this.max = i
|
|
// }
|
|
// else if(item.attr_name=="Size"){
|
|
// Size_list = item.goods_attrs
|
|
// console.log(this.sizenum)
|
|
// Size_list.map( item =>{
|
|
// this.Size_list +=item.attr_value + ' '
|
|
// })
|
|
// this.Size_list= this.Size_list.substring(0, this.Size_list.length-1)
|
|
// }
|
|
let data = {
|
|
name: item.attr_name,
|
|
goods_attr_id: '',
|
|
attr_id: item.attr_id,
|
|
list: item.goods_attrs
|
|
}
|
|
this.goods_attr_list.push(data)
|
|
console.log(this.goods_attr_list)
|
|
let list = []
|
|
|
|
this.goods_attr_list.map(item => {
|
|
item.list.map(item1 => {
|
|
if (!item1.attr_img) {
|
|
this.tag = 1
|
|
|
|
}
|
|
|
|
})
|
|
})
|
|
// console.log(list)
|
|
// this.noImgtype = list
|
|
})
|
|
}
|
|
} else {
|
|
this.goods_attr_list = []
|
|
this.Is_attr = 0
|
|
}
|
|
|
|
// this.catQuery.cat=res.data.cat_id
|
|
}
|
|
})
|
|
},
|
|
CloseCart() {
|
|
this.isCart = false
|
|
//uni.showTabBar()
|
|
},
|
|
// 选择规格
|
|
selectAttr(attr_id, goods_attr_id, index1, attr_price) {
|
|
this.currentAttr = index1
|
|
let sum = this.goodsDate.shop_price
|
|
if (attr_price) {
|
|
sum = parseInt(sum) + parseInt(attr_price)
|
|
console.log(sum)
|
|
|
|
}
|
|
this.shop_price = sum
|
|
let data = {
|
|
attr_id: attr_id,
|
|
goods_attr_id: goods_attr_id
|
|
}
|
|
if (this.goods_attr_list.length == 0) {
|
|
this.goods_attr_list.push(data)
|
|
} else {
|
|
// 判断是否有新的规格加入
|
|
let isNew = false
|
|
for (let i in this.goods_attr_list) {
|
|
let item = this.goods_attr_list[i]
|
|
if (item.attr_id == attr_id) {
|
|
if (item.goods_attr_id == goods_attr_id) {
|
|
this.goods_attr_list[i].goods_attr_id = ''
|
|
} else {
|
|
this.goods_attr_list[i].goods_attr_id = goods_attr_id
|
|
}
|
|
isNew = false
|
|
break
|
|
} else {
|
|
isNew = true
|
|
}
|
|
}
|
|
if (isNew) {
|
|
this.goods_attr_list.splice(index, 0, data)
|
|
}
|
|
}
|
|
},
|
|
// 添加到购物车
|
|
addCart() {
|
|
if (this.Is_attr > 0) {
|
|
let goods_attr_id = ''
|
|
this.goods_attr_list.map(item => {
|
|
if (item.goods_attr_id != '') {
|
|
goods_attr_id += item.goods_attr_id + ','
|
|
}
|
|
|
|
})
|
|
let isall = 1
|
|
this.goods_attr_list.map(item => {
|
|
//console.log(item.goods_attr_id)
|
|
if (item.goods_attr_id == '') {
|
|
isall = 0
|
|
}
|
|
})
|
|
|
|
if (isall == 0) {
|
|
uni.showToast({
|
|
title: 'Please select the product specification',
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
return
|
|
}
|
|
|
|
this.cartQuery.goods_attr_id = goods_attr_id.substring(0, goods_attr_id.lastIndexOf(','));
|
|
}
|
|
console.log(this.cartQuery)
|
|
if (this.isLogin == 1) {
|
|
defaultRequest2(this.cartQuery).then(res => {
|
|
if (res.error == 0) {
|
|
this.isCart = false
|
|
|
|
this.cartQuery.goods_attr_id = ''
|
|
if (res.data[0].success) {
|
|
setTimeout(() => {
|
|
uni.showToast({
|
|
title: 'Successfully added',
|
|
icon: 'none',
|
|
duration: 2000
|
|
})
|
|
}, 500)
|
|
|
|
}
|
|
//uni.showTabBar()
|
|
this.getList()
|
|
}
|
|
})
|
|
} else if (this.isLogin == 0) {
|
|
uni.navigateTo({
|
|
url: '../login/index'
|
|
})
|
|
}
|
|
|
|
},
|
|
clickImg(index, e) {
|
|
console.log(e)
|
|
let list = []
|
|
if (e) {
|
|
if (typeof(e) === 'object') {
|
|
|
|
for (let i in e) {
|
|
|
|
console.log(e[i].afile)
|
|
list.push(e[i].afile)
|
|
console.log(list)
|
|
}
|
|
} else {
|
|
e.map(item => {
|
|
list.push(item.attr_img)
|
|
})
|
|
}
|
|
|
|
|
|
wx.previewImage({
|
|
urls: list, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
|
|
current: index, // 当前显示图片的http链接，默认是第一个
|
|
indicator: 'number',
|
|
success: function(res) {},
|
|
fail: function(res) {},
|
|
complete: function(res) {},
|
|
})
|
|
} else {
|
|
wx.previewImage({
|
|
urls: this.info, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
|
|
current: index, // 当前显示图片的http链接，默认是第一个
|
|
indicator: 'number',
|
|
success: function(res) {},
|
|
fail: function(res) {},
|
|
complete: function(res) {},
|
|
})
|
|
}
|
|
},
|
|
Iswish() {
|
|
const i = uni.getStorageSync('isLogin')
|
|
if (i == 1) {
|
|
uni.navigateTo({
|
|
url: '../account/wishlist'
|
|
})
|
|
} else {
|
|
uni.navigateTo({
|
|
url: '../login/index'
|
|
})
|
|
}
|
|
},
|
|
getMes() {
|
|
|
|
defaultRequest(this.myMes).then(res => {
|
|
// console.log(res.data.message_list)
|
|
let i = 0
|
|
if (res.error == 0) {
|
|
let list = res.data.message_list
|
|
list.map(item => {
|
|
// console.log(item)
|
|
if (item.unread == 1) {
|
|
i++
|
|
}
|
|
})
|
|
this.mesNum = i
|
|
console.log(this.mesNum)
|
|
}
|
|
|
|
// ////console.log(sum)
|
|
|
|
})
|
|
},
|
|
gotoSearch() {
|
|
uni.navigateTo({
|
|
url: './search'
|
|
})
|
|
},
|
|
goDetails(id) {
|
|
uni.navigateTo({
|
|
url: '/pages/productDetails/index?goodid=' + id
|
|
})
|
|
},
|
|
|
|
getList() {
|
|
|
|
|
|
let data = {
|
|
_action: 'getcartgoods'
|
|
}
|
|
defaultRequest(data).then(res => {
|
|
// //////console.info(res.data.goods_list.length,'//////')
|
|
if (res.error == 0) {
|
|
this.sum = res.data.goods_list.length
|
|
}
|
|
})
|
|
|
|
let query = {
|
|
_action: 'getgoods',
|
|
type: 'promote',
|
|
order_type: 0,
|
|
page_size: 50,
|
|
page_index: 0
|
|
}
|
|
|
|
defaultRequest(query).then(res => {
|
|
if (res.error == 0) {
|
|
let skillList = []
|
|
this.skillList = res.data
|
|
// for(let i =0;i<3;i++){
|
|
// var _num = Math.floor(Math.random()*res.data.length)
|
|
// var mm = res.data[_num]
|
|
// skillList.push(mm)
|
|
// this.skillList = skillList
|
|
|
|
// }
|
|
}
|
|
})
|
|
},
|
|
|
|
// 指定范围内，指定个数，无重复的随机整数
|
|
getRandomNumber(n, min, max) {
|
|
let arr = [];
|
|
for (let i = 0; i < n; i++) {
|
|
arr[i] = parseInt(Math.random() * (max - min + 1) + min);
|
|
}
|
|
for (let i = 0; i < n; i++) {
|
|
for (let j = i + 1; j < n; j++) {
|
|
if (arr[i] === arr[j]) {
|
|
this.getRandomNumber(n, min, max);
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
return arr
|
|
},
|
|
|
|
//获取用户是否登录
|
|
getInfo() {
|
|
let data = {
|
|
_action: 'getinfo'
|
|
}
|
|
defaultRequest(data).then(res => {
|
|
////console.log(res,'用户信息')
|
|
if (res.error == -1) {
|
|
uni.setStorageSync('isLogin', 0)
|
|
} else if (res.error == 0) {
|
|
uni.setStorageSync('isLogin', 1)
|
|
}
|
|
})
|
|
},
|
|
|
|
getimgheight(item) {
|
|
const that = this
|
|
|
|
// 获取图片宽高
|
|
uni.getImageInfo({
|
|
src: item,
|
|
success: (image) => {
|
|
// //console.log(image)
|
|
// this.Swiper_H = 0
|
|
this.Swiper_H = image.height
|
|
// 计算图片渲染高度
|
|
let showH = (50 * image.height) / image.width
|
|
// //console.log(showH)
|
|
return this.Swiper_H
|
|
}
|
|
})
|
|
|
|
},
|
|
getimgheight2(item) {
|
|
const that = this
|
|
|
|
// 获取图片宽高
|
|
uni.getImageInfo({
|
|
src: item,
|
|
success: (image) => {
|
|
// //console.log(image)
|
|
// this.Swiper_H = 0
|
|
this.Swiper_Hb = image.height
|
|
// 计算图片渲染高度
|
|
let showH = (50 * image.height) / image.width
|
|
// //console.log(showH)
|
|
return this.Swiper_Hb
|
|
}
|
|
})
|
|
|
|
},
|
|
|
|
// 获取的推荐商品数据
|
|
getCatList(type) {
|
|
if (this.isbest == 1) {
|
|
defaultRequest4(this.catQuery).then(res => {
|
|
//////console.info(res,'最好的')
|
|
if (res.error == 0) {
|
|
if (res.data) {
|
|
|
|
res.data.map(item => {
|
|
//console.log(item)
|
|
this.bestlist.push({
|
|
block_pic: item.goods_img,
|
|
block_title3: 'US$' + item.shop_price,
|
|
block_name: item.short_name,
|
|
goodid: item.id
|
|
})
|
|
})
|
|
//////console.log(this.bestlist,'合并')
|
|
const that = this
|
|
this.bestlist.forEach(res => {
|
|
// 获取图片宽高
|
|
uni.getImageInfo({
|
|
src: res.block_pic,
|
|
success: (image) => {
|
|
// //////console.log(res.block_pic)
|
|
// 计算图片渲染高度
|
|
let showH = (50 * image.height) / image
|
|
.width
|
|
// 判断左右盒子高度
|
|
if (that.leftH <= that.rightH) {
|
|
that.leftList.push(res)
|
|
that.leftH += showH
|
|
} else {
|
|
that.rightList.push(res)
|
|
that.rightH += showH
|
|
}
|
|
}
|
|
})
|
|
})
|
|
}
|
|
}
|
|
})
|
|
}
|
|
},
|
|
|
|
|
|
gotoSkillpage(e) {
|
|
uni.navigateTo({
|
|
// url:"../productDetails/index?goods_id="+e.id
|
|
url: './flashSale'
|
|
})
|
|
},
|
|
|
|
scrollChange(item, index) {
|
|
this.info = []
|
|
// this.isbest = 0
|
|
this.leftList = []
|
|
this.rightList = []
|
|
this.bestlist = []
|
|
////console.log(this.bestlist)
|
|
this.scroll_active = index
|
|
let code = item.zone_code
|
|
this.getIndex(code)
|
|
// this.getCatList()
|
|
},
|
|
start(e) {
|
|
// console.log(e)
|
|
this.hot_index = e
|
|
return this.hot_index
|
|
// this.clientX=e.changedTouches[0].clientX;
|
|
// this.clientY=e.changedTouches[0].clientY;
|
|
},
|
|
|
|
end(e) {
|
|
// console.log(e)
|
|
this.hot_index = e
|
|
return this.hot_index
|
|
// const subX=e.changedTouches[0].clientX-this.clientX;
|
|
// const subY=e.changedTouches[0].clientY - this.clientY;
|
|
// if(subY>50 || subY<-50){
|
|
// console.log('上下滑')
|
|
// }else{
|
|
// if(subX>50){
|
|
// console.log('右滑')
|
|
// }else if(subX<-50){
|
|
// console.log('左滑')
|
|
// }else{
|
|
// console.log('无效')
|
|
// }
|
|
// }
|
|
},
|
|
scrollhot(e) {
|
|
// console.log(e)
|
|
// let i = e.scrollLeft/200
|
|
// this.hot_index = i
|
|
// console.log('滚动了',this.hot_index)
|
|
// this.start(this.hot_index)
|
|
// this.end(this.hot_index)
|
|
},
|
|
|
|
gridSwiper(e) {
|
|
this.current = e.detail.current
|
|
},
|
|
//轮播图跳转 // 热卖跳转
|
|
imgTo(item) {
|
|
//console.log(item,'item')
|
|
////console.log(item.block_link.includes('dope.youhui'))
|
|
let goodid
|
|
|
|
if (item.goodid) {
|
|
|
|
uni.navigateTo({
|
|
url: '../productDetails/index?goodid=' + item.goodid
|
|
})
|
|
} else if (item.block_link) {
|
|
const i = item.block_link.indexOf('?')
|
|
goodid = item.block_link.substring(i);
|
|
//////console.log(item.block_link)
|
|
if (item.block_link.includes('goodslist')) {
|
|
uni.navigateTo({
|
|
url: '../category/productList' + goodid + '&tag=1'
|
|
})
|
|
} else if (item.block_link.includes('goodid')) {
|
|
uni.navigateTo({
|
|
url: '../productDetails/index' + goodid + '&img=1'
|
|
})
|
|
} else if (item.block_link.includes('dope.youhui')) {
|
|
uni.navigateTo({
|
|
url: './pickUpCentre'
|
|
})
|
|
}
|
|
}
|
|
this.countdownTime2 = 0
|
|
},
|
|
Hotgoto(item1) {
|
|
const i = item1[0].block_link.indexOf('?')
|
|
////console.log(item1)
|
|
const url = item1[0].block_link.substring(i)
|
|
if (url.includes('goodslist')) {
|
|
uni.navigateTo({
|
|
url: '../category/productList' + url + '&tag=1'
|
|
})
|
|
} else {
|
|
uni.navigateTo({
|
|
url: '../productDetails/index' + url + '&img=1'
|
|
})
|
|
}
|
|
}
|
|
},
|
|
onPageScroll(res) {
|
|
// console.log(res)
|
|
if (res.scrollTop > 40) {
|
|
this.isScrollShow = true
|
|
} else if (res.scrollTop < 40) {
|
|
this.isScrollShow = false
|
|
|
|
}
|
|
},
|
|
|
|
|
|
|
|
}
|
|
</script>
|
|
<template>
|
|
|
|
<view v-if="typee == 2" class="body" :class="isScrollShow?'body_pad':''">
|
|
<!-- 进入页面部分 -->
|
|
<view v-show="!open_img || countdownTime2==0">
|
|
<!-- 头部导航栏 -->
|
|
<view class="navigation ">
|
|
<view class="status_bar"></view>
|
|
<view style="background-color:black">
|
|
<view class="page_margin uni-bg-black">
|
|
<view class="navigation_title" :class="isScrollShow?'isScrollShow':'' ">
|
|
<template v-if="!isScrollShow ">
|
|
<navigator url="/pages/account/message" class="order_info_item">
|
|
<uni-badge :text="mesNum" type="error" absolute="rightTop">
|
|
<image src="../../static/img/msg_white.png" mode=""></image>
|
|
</uni-badge>
|
|
</navigator>
|
|
<image src="/static/img/dope plus_white.png" mode="" class="index_logo"></image>
|
|
</template>
|
|
<view class="navigation_title_right" :class="isScrollShow?'navigation_title_padding':'' ">
|
|
<navigator>
|
|
<image src="../../static/img/like_white.png" mode="" @click="Iswish()"></image>
|
|
</navigator>
|
|
<navigator url="/pages/shippingCart/index" open-type="switchTab">
|
|
<uni-badge :text="sum" type="error" absolute="rightTop">
|
|
<image src="../../static/img/shop_cart1.png" mode=""></image>
|
|
</uni-badge>
|
|
</navigator>
|
|
</view>
|
|
</view>
|
|
<navigator>
|
|
<view v-if="isScrollShow " :class="isScrollShow?'isScrollShow3':'' ">
|
|
<image src="/static/icon/home_white.png" mode=""></image>
|
|
</view>
|
|
<view class="navigation_seach" :class="isScrollShow?'isScrollShow1':'' "
|
|
@click="gotoSearch()">
|
|
<image src="../../static/img/seach.png" mode=""></image>
|
|
<text>search</text>
|
|
</view>
|
|
</navigator>
|
|
</view>
|
|
</view>
|
|
<!-- <view class="navigation_scroll " :class="isScrollShow?'isScrollShow2':'' ">
|
|
<scroll-view class="scroll-view_H" scroll-x="true" :show-scrollbar="false">
|
|
<view :class="scroll_active==index?'scroll_active':''" v-for="(item,index) in scrollList" @click="scrollChange(item,index)" :key="item.zone_name">{{item.zone_name}}</view>
|
|
</scroll-view>
|
|
</view> -->
|
|
</view>
|
|
<view class="navigation_scroll " :class="isScrollShow?'isScrollShow2':'' ">
|
|
<scroll-view class="scroll-view_H" scroll-x="true" :show-scrollbar="true">
|
|
<view :class="scroll_active==index?'scroll_active':''" v-for="(item,index) in scrollList"
|
|
@click="scrollChange(item,index)" :key="item.zone_name">{{item.zone_name}}</view>
|
|
</scroll-view>
|
|
</view>
|
|
<view style="max-width: 100%" v-for="(item,index) in indexDate.zones" :key="item.zone_id">
|
|
<!-- 轮播图 -->
|
|
<view class="uni-margin-wrap page_padding_left1" style="padding-left: 0; padding-right: 0;"
|
|
v-if="item.zone_code=='BANNER' && item.zone_status=='NORMAL'">
|
|
<swiper class="swiper" circular :indicator-dots="true" :autoplay="true"
|
|
style="height: 455px; display: block !important;" :style="{ height:Swiper_H +'rpx'}">
|
|
<swiper-item v-for="(item1,index1) in item.blocks" :key="item1.block_id">
|
|
<view class="swiper-item " v-if="item1.block_status=='NORMAL'"
|
|
:style="{width:(item.zone_code=='BANNER')?item.zone_colum+'rpx':'',heigth:'auto'}">
|
|
<image :src="item1.block_pic" mode="" @click="imgTo(item1)"></image>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<!-- 宫格 -->
|
|
<uni-swiper-dot :info="info" :current="current" field="content" mode="default"
|
|
v-if="item.zone_code=='ICON' && item.zone_status=='NORMAL' && item.zone_code!=indexDate.zones[index-1].zone_code">
|
|
<swiper class="grid_swiper " :style="{height:(len > 4?380+'rpx':190+'rpx')}" @change="gridSwiper">
|
|
<swiper-item v-for="(item1,index1) in info" :key="item1.zone_id">
|
|
<view class="grid_content">
|
|
<view class="grid_item" v-for="(item2, index2) in item1.blocks" :key="item2.block_id">
|
|
<template v-if="item2.block_status=='NORMAL'">
|
|
<view class="grid_item_img">
|
|
<image :src="item2.block_pic" mode="" @click="imgTo(item2)"></image>
|
|
</view>
|
|
<text>{{item2.block_title}}</text>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</uni-swiper-dot>
|
|
<!-- ONEPIC -->
|
|
<view class="ONEPIC" v-if="item.zone_code=='ONEPIC' && item.zone_status=='NORMAL'">
|
|
<!-- class="discount page_padding" -->
|
|
<image :src="item.blocks[0].block_pic"
|
|
:style="{height:(item.zone_code=='ONEPIC')?item.zone_column+'rpx':''}" mode=""
|
|
@click="imgTo(item.blocks[0])"></image>
|
|
</view>
|
|
<!-- 轮播图 BANNER1 -->
|
|
<view class="uni-margin-wrap page_padding_left1" style="padding-left: 0; padding-right: 0;"
|
|
v-if="item.zone_code=='BANNER1' && item.zone_status=='NORMAL'">
|
|
<swiper class="swiper" circular :indicator-dots="true" :autoplay="true"
|
|
style="display: block !important;" :style="{ height:Swiper_Hb +'rpx'}">
|
|
<swiper-item v-for="(item1,index1) in item.blocks" :key="item1.block_id">
|
|
<view class="swiper-item " v-if="item1.block_status=='NORMAL'"
|
|
:style="{width:(item.zone_code=='BANNER1')?item.zone_colum+'rpx':'',heigth:'auto'}">
|
|
<image :src="item1.block_pic" mode="" @click="imgTo(item1)"></image>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<!-- TWOPIC -->
|
|
<view class="TWOPIC" v-if="item.zone_code=='TWOPIC' && item.zone_status=='NORMAL'">
|
|
<image :src="item1.block_pic" :style="{height:(item.zone_code=='TWOPIC')?item.zone_column+'rpx':''}"
|
|
@click="imgTo(item1)" mode="" v-for="(item1,index1) in item.blocks" :key="item1.block_id">
|
|
</image>
|
|
</view>
|
|
<!-- THREEPIC -->
|
|
<view class="THREEPIC" v-if="item.zone_code=='THREEPIC' && item.zone_status=='NORMAL'">
|
|
<image :src="item1.block_pic"
|
|
:style="{height:(item.zone_code=='THREEPIC')?item.zone_column+'rpx':''}" @click="imgTo(item1)"
|
|
mode="" v-for="(item1,index1) in item.blocks" :key="item1.block_id"></image>
|
|
</view>
|
|
<!-- FOURPIC -->
|
|
<view class="FOURPIC" v-if="item.zone_code=='FOURPIC' && item.zone_status=='NORMAL'">
|
|
<image :src="item1.block_pic"
|
|
:style="{height:(item.zone_code=='FOURPIC')?item.zone_column+'rpx':''}" mode=""
|
|
@click="imgTo(item1)" v-for="(item1,index1) in item.blocks" :key="item1.block_id"></image>
|
|
</view>
|
|
<!-- FIVEPIC -->
|
|
<view class="FIVEPIC" v-if="item.zone_code=='FIVEPIC' && item.zone_status=='NORMAL'">
|
|
<image :src="item1.block_pic"
|
|
:style="{height:(item.zone_code=='FIVEPIC')?item.zone_column+'rpx':''}" mode=""
|
|
@click="imgTo(item1)" v-for="(item1,index1) in item.blocks" :key="item1.block_id"></image>
|
|
</view>
|
|
<!-- SIXPIC -->
|
|
<view class="SIXPIC" v-if="item.zone_code=='SIXPIC' && item.zone_status=='NORMAL'">
|
|
<image :src="item1.block_pic" :style="{height:(item.zone_code=='SIXPIC')?item.zone_column+'rpx':''}"
|
|
mode="" @click="imgTo(item1)" v-for="(item1,index1) in item.blocks" :key="item1.block_id">
|
|
</image>
|
|
</view>
|
|
<!-- 标题 -->
|
|
<navigator url="/pages/index/flashSale" v-if="item.zone_code=='SPIKE1' && item.zone_status=='NORMAL'">
|
|
<view class="index_title page_padding">
|
|
<text>Flash Sale</text>
|
|
<view class="title_right">
|
|
<uni-countdown :showDay="false" :hour="curEndTime |hours" :minute="curEndTime|minutes"
|
|
:second="curEndTime|seconds" color="#FFF" background-color="rgb(178 34 52)" />
|
|
<image src="../../static/icon/right_white.png" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</navigator>
|
|
<!-- SPIKE 1 -->
|
|
<scroll-view class="spike1 page_padding" scroll-x="true" :show-scrollbar="false"
|
|
v-if="item.zone_code=='SPIKE1' && item.zone_status=='NORMAL'">
|
|
<view class="spike1_item" v-for="(item1,index1) in skillList" :key="item1.goods_id">
|
|
<view class="item_img" @click="gotoSkillpage(item1)">
|
|
<image :src="item1.goods_img" mode=""
|
|
:style="{height:(item.zone_code=='SPIKE1')?item.zone_column+'rpx':'',width:200+'rpx'}">
|
|
</image>
|
|
</view>
|
|
<view class="spike1_item_bottom padding_left">
|
|
<text>US${{item1.promote_price}}</text>
|
|
<view class="spike1_item_text">US${{item1.shop_price}}</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<!-- 标题 -->
|
|
<view class="index_title page_padding" v-if="item.zone_code=='TITLE' && item.zone_status=='NORMAL'">
|
|
<text>{{item.blocks[0].block_title}}</text>
|
|
<view class="title_right">
|
|
<image src="../../static/icon/right_white.png" mode="" @click="Hotgoto(item.blocks)"></image>
|
|
</view>
|
|
</view>
|
|
<!-- HOT SELLS 1 -->
|
|
<view class="hotSells1 page_padding"
|
|
v-if="item.zone_code=='GOODSTWO1' || item.zone_code=='GOODSTHREE1'">
|
|
<template v-if="item.zone_code=='GOODSTWO1' && item.zone_status=='NORMAL'">
|
|
<view class="hotSells1_item" v-for="(item1,index1) in item.blocks" :key="item1.block_id">
|
|
<view class="hotSells1_item_img">
|
|
<image :src="item1.block_pic"
|
|
:style="{height:(item.zone_code=='GOODSTWO1')?item.zone_column+'rpx':''}" mode=""
|
|
@click="imgTo(item1)"></image>
|
|
</view>
|
|
<text>{{item1.block_title}}</text>
|
|
</view>
|
|
</template>
|
|
<template v-if="item.zone_code=='GOODSTHREE1' && item.zone_status=='NORMAL'">
|
|
<view class="hotSells2_item" v-for="(item1,index1) in item.blocks" :key="item1.block_id">
|
|
<view class="hotSells2_item_img">
|
|
<image :src="item1.block_pic"
|
|
:style="{height:(item.zone_code=='GOODSTHREE1')?item.zone_column+'rpx':''}" mode=""
|
|
@click="imgTo(item1)"></image>
|
|
</view>
|
|
<text>{{item1.block_title}}</text>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
<!-- 标题 -->
|
|
<!-- <view class="index_title page_padding">
|
|
<text>Hot Selle</text>
|
|
<view class="title_right">
|
|
<image src="../../static/img/right.png" mode=""></image>
|
|
</view>
|
|
</view> -->
|
|
<!-- HOT SELLS 2 -->
|
|
<scroll-view class="spike1 page_padding" scroll-x="true" @change="handlechange" :show-scrollbar="false"
|
|
:indicator-dots="true" :circular="true" :interval="3000" :duration="1000"
|
|
v-if="item.zone_code=='HONLIST2' && item.zone_status=='NORMAL'" :current="mycurrent">
|
|
<view class="spike1_item padding_honlist2" v-for="(item1,index1) in item.blocks"
|
|
:key="item1.block_id">
|
|
<view :class="['swiper-item',index==mycurrent ? 'active' : '']">
|
|
<image :src="item1.block_pic" mode=""
|
|
:style="{width:(item.zone_code=='HONLIST2')?420+'rpx':'',height:item.zone_column+'rpx'}"
|
|
@click="imgTo(item1)"></image>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<!-- class="item_img"> -->
|
|
<!-- 标题 -->
|
|
<!-- <view class="index_title page_padding">
|
|
<text>Hot Selle</text>
|
|
<view class="title_right">
|
|
<image src="../../static/img/right.png" mode=""></image>
|
|
</view>
|
|
</view> -->
|
|
<!-- HOT SELLS 3 -->
|
|
<scroll-view class="spike1 page_padding" scroll-x="true" :show-scrollbar="false"
|
|
v-if="item.zone_code=='HONLIST3' && item.zone_status=='NORMAL'" @scroll="scrollhot">
|
|
<view class="spike1_item" v-for="(item1,index1) in item.blocks" :key="item1.block_id">
|
|
<view class="item_img "
|
|
:style="{width:(item.zone_code=='HONLIST3')?280+'rpx':'',height:item.zone_column +'rpx'}">
|
|
<image :src="item1.block_pic" mode="" @click="imgTo(item1)"></image>
|
|
<a :href="item1.block_link"></a>
|
|
</view>
|
|
<view class="spike1_item_bottom">
|
|
<text>{{item1.block_title}}</text>
|
|
<view class="spike1_item_text1">{{item1.block_title2}}</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
<!-- HOT SELLS 1 -->
|
|
<!-- <scroll-view class="spike1 page_padding" scroll-x="true" :show-scrollbar="false"
|
|
v-if="item.zone_code=='HONLIST1' && item.zone_status=='NORMAL'" @scroll="scrollhot">
|
|
<view class="spike1_item" style="padding-right: 0;" v-for="(item1,index1) in item.blocks"
|
|
:key="item1.block_id" @touchstart="start(index1)" @touchend="end(index1)">
|
|
<view class="item_img "
|
|
:style="{width:(item.zone_code=='HONLIST1')?350+'rpx':'',height:item.zone_column +'rpx'}"
|
|
:class="hot_index == index1?'hotmaxW':'hotmaxmin'">
|
|
<image :src="item1.block_pic" mode="" @click="imgTo(item1)"></image>
|
|
</view> -->
|
|
<!-- <view class="spike1_item_bottom" >
|
|
<text>{{item1.block_title}}</text>
|
|
<view class="spike1_item_text1">{{item1.block_title2}}</view>
|
|
</view> -->
|
|
<!-- </view>
|
|
</scroll-view> -->
|
|
<!-- 测试1 -->
|
|
<scroll-view class="spike1 page_padding" scroll-x="true" @change="handlechange" :show-scrollbar="false"
|
|
:indicator-dots="true" :circular="true" :interval="3000" :duration="1000"
|
|
v-if="item.zone_code=='HONLIST1' && item.zone_status=='NORMAL'" :current="mycurrent">
|
|
<swiper style="height: 600rpx;" previous-margin="140rpx" next-margin="140rpx" @change="handlechange" :current="mycurrent"
|
|
:indicator-dots="false" :circular="true" :interval="3000" :duration="1000">
|
|
<swiper-item v-for="item1,index1 in item.blocks" :key="item1.block_id">
|
|
<view :class="['swiper-items',index1==mycurrent ? 'active' : '']">
|
|
<image :src="item1.block_pic" mode=""
|
|
:style="{width:(item.zone_code=='HONLIST1')?420+'rpx':'',height:'100%'}"
|
|
@click="imgTo(item1)"></image>
|
|
</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
<!-- </view> -->
|
|
</scroll-view>
|
|
<!-- GOODSTHREE 2 -->
|
|
<!-- <view class="goodsthree2">
|
|
<view class="goodsthree2_item" v-for="(item,index) in 3" :key="index"></view>
|
|
</view> -->
|
|
<!-- 轮播图 -->
|
|
<!-- <view class="uni-margin-wrap">
|
|
<swiper class="swiper" circular :indicator-dots="true" :autoplay="true" >
|
|
<swiper-item>
|
|
<view class="swiper-item uni-bg-red">A</view>
|
|
</swiper-item>
|
|
<swiper-item>
|
|
<view class="swiper-item uni-bg-green">B</view>
|
|
</swiper-item>
|
|
<swiper-item>
|
|
<view class="swiper-item uni-bg-blue">C</view>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view> -->
|
|
<!-- SPIKE 1 -->
|
|
<!-- <scroll-view class="spike1 page_padding_left" scroll-x="true" :show-scrollbar="false">
|
|
<view class="spike1_item" v-for="(item,index) in 8" :key="index">
|
|
<view class="spike1_item_img"></view>
|
|
<view class="spike1_item_bottom1">
|
|
<view class="spike1_item_text">Adidas Yeezy Boost 350 DazzlingBlue Black</view>
|
|
<text>US$314.00</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view> -->
|
|
</view>
|
|
<!-- 瀑布流标题 -->
|
|
<!-- <view class="index_title1" v-if="bestlist.length>0">PRODUCTS FRO YOU</view> -->
|
|
<!-- <view class="waterfall" v-if="bestlist.length>0" >
|
|
<custom-waterfalls-flow :value="bestlist" imageKey="block_pic"@imageClick="imgTo(bestlist)">
|
|
<template v-slot:default="item2">
|
|
<view class="item" @click="imgTo(item2)">
|
|
<view class="title">{{item2.block_title}}</view>
|
|
<view >{{item2.block_title2}}</view>
|
|
<view class="desc">{{item2.block_title3}}</view>
|
|
</view>
|
|
</template>
|
|
</custom-waterfalls-flow>
|
|
</view>
|
|
-->
|
|
<view class="container" v-if="bestlist.length>0">
|
|
<view class="left">
|
|
<view v-for="(item,index) in leftList" :key="index">
|
|
<image :src="item.block_pic" alt="" mode="widthFix" @click="imgTo(item)"
|
|
:class="item.block_title==0&&!item.block_title2&&!item.block_name&&!item.block_title3?'img_border':''">
|
|
</image>
|
|
<view class="item" v-if="item.block_title!=0">
|
|
<view class="title" v-if="item.block_title!=0">{{item.block_title}}</view>
|
|
<view class="title">{{item.block_title2}}</view>
|
|
<view class="title1" v-if="item.block_name">{{item.block_name}}</view>
|
|
<view class="desc">
|
|
<view>{{item.block_title3}}</view>
|
|
<view class="desc_img">
|
|
<image src="../../static/icon/cat_white.png" @click="getDate(item)"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="right">
|
|
<view v-for="(item1,index1) in rightList" :key="index1">
|
|
<image :src="item1.block_pic" alt="" mode="widthFix" @click="imgTo(item1)"
|
|
:class="item1.block_title==0&&!item1.block_title2&&!item1.block_name&&!item1.block_title3?'img_border':''">
|
|
</image>
|
|
<view class="item" v-if="item1.block_title!=0">
|
|
<view class="title" v-if="item1.block_title!=0">{{item1.block_title}}</view>
|
|
<view class="title">{{item1.block_title2}}</view>
|
|
<view class="title1" v-if="item1.block_name">{{item1.block_name}}</view>
|
|
<view class="desc">
|
|
<view>{{item1.block_title3}}</view>
|
|
<view class="desc_img">
|
|
<image src="../../static/icon/cat_white.png" @click="getDate(item1)"></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- //购物车 -->
|
|
<view class="addCard" v-show="isCart">
|
|
<image src="/static/img/close1.png" mode="" class="addCard_close" @click="CloseCart()"></image>
|
|
<scroll-view class="spike1 " scroll-x="true" :show-scrollbar="false">
|
|
<image :src="item.img_url" mode="" class="addCard_scroll img_border"
|
|
v-for="(item,index) in goodsDate.gallery_list" :key="index" @click="clickImg(index)"></image>
|
|
</scroll-view>
|
|
<scroll-view class="addCard_body" scroll-y="true">
|
|
<view>{{goodsDate.goods_name}} </view>
|
|
<view class="addCard_price">US${{goodsDate.is_promote==0? shop_price :goodsDate.promote_price}}
|
|
</view>
|
|
<view v-for="(item,index) in goods_attr_list" :key="item.attr_id">
|
|
<view>{{item.name}}</view>
|
|
<view class="color_select variations_select_size">
|
|
<view class="color_select_item" v-for="(item1,index1) in item.list" :key="item1.attr_value"
|
|
:class="goods_attr_list[index].goods_attr_id==item1.goods_attr_id?'active_color':''"
|
|
@click="selectAttr(item.attr_id,item1.goods_attr_id,index1,item1.attr_price)">
|
|
<view class="color_select_item_zoom">
|
|
<image src="/static/icon/big2.png" @click="clickImg(index1)" mode=""
|
|
v-if="item1.attr_img!=''"></image>
|
|
</view>
|
|
<image :src="item1.attr_img" mode="" v-if="item1.attr_img!=''"></image>
|
|
<view class="color_select_item_bottom" v-if="item1.attr_img!=''">【{{ item1.attr_value}}】
|
|
</view>
|
|
<view class="color_select_item_bottom" v-if="!item1.attr_img">{{ item1.attr_value}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="quantity">
|
|
<text>Quantity</text>
|
|
<uni-number-box background="#FFFFFF" v-model="cartQuery.goods_number" :min="1"></uni-number-box>
|
|
</view>
|
|
</scroll-view>
|
|
<button @click="addCart">ADD TO CART</button>
|
|
</view>
|
|
<view class="mask" @click="isCart=false" v-show="isCart"></view>
|
|
<!-- //弹窗广告 -->
|
|
<view v-show="popImg">
|
|
<!-- <button @click="open">打开弹窗</button> -->
|
|
<uni-popup ref="popup" :mask-click="false">
|
|
<view class="Popup">
|
|
<view class="popup_close">
|
|
<image mode=" " @click="close" src="../../static/img/close2.png"></image>
|
|
</view>
|
|
<view class="popup_img">
|
|
<!-- <view class="popup_text"><text>{{countdownTime }}s跳过</text></view> -->
|
|
<image :src="popImg" mode=" " @click="popImgto"></image>
|
|
</view>
|
|
</view>
|
|
<!-- <button @click="close">关闭</button> -->
|
|
</uni-popup>
|
|
</view>
|
|
</view>
|
|
<!-- 启动页广告 -->
|
|
<view class="open_bg" ref="imgRef" v-show="countdownTime2>0?true:false">
|
|
<!-- <view class="open_text"><text @click="countdownTime2 =0">{{ countdownTime2 }}s skip</text></view> -->
|
|
<swiper class="open_bgimg" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
|
|
:interval="interval" :duration="duration">
|
|
<swiper-item v-for="(item,index) in open_img" :key="item.block_pic">
|
|
<view class="open_text">
|
|
<text style="padding: 100px 15px;" @click="openClose()"
|
|
v-if="countdownTime2 >0||countdownTime2 ==0">{{ countdownTime2 }}sskip</text>
|
|
</view>
|
|
<image :src="item.block_pic" mode="" @click="imgTo(item)"></image>
|
|
</swiper-item>
|
|
</swiper>
|
|
</view>
|
|
<view class="bootom_last" v-if="bootom == 1">-THE END-</view>
|
|
<view class="tarbar">
|
|
<view @click="change(index)" v-for="(item,index) in tarbar" :key="item.name"
|
|
:class="index==2?'img_m':'tarbar_img'" :style="{color:index==0?'#000':''}">
|
|
<image :src="item.src"></image>
|
|
<view>{{ item.name}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
|
|
<style>
|
|
page {
|
|
height: 100vh;
|
|
}
|
|
</style>
|
|
<style lang="scss" scoped>
|
|
.swiper-items {
|
|
border-radius: 30rpx;
|
|
overflow: hidden;
|
|
// 像这种多张轮播图同时出现在一屏的情况下就不要指定width了，不然你会发现previous-margin和 next-margin会出现想不到的效果
|
|
// 如果想要设置宽每一张轮播图的宽度，只需要设置previous-margin和next-margin就可以了，想要设置高度直接改下面的height就可以了
|
|
// width: 450rpx;
|
|
height: 100%;
|
|
transform: scale(0.8);
|
|
transition: all 0.5s ease;
|
|
text-align: center;
|
|
transition: all 0.5s ease-in-out;
|
|
|
|
&.active {
|
|
transform: scale(1);
|
|
}
|
|
|
|
/deep/ .uni-swiper-dots {
|
|
display: none !important;
|
|
}
|
|
uni-swiper .uni-swiper-dots {
|
|
display: none !important;
|
|
z-index: -1 !important;
|
|
}
|
|
/deep/ .uni-swiper .uni-swiper-dots-horizontal {
|
|
display: none !important;
|
|
}
|
|
uni-swiper .uni-swiper-dot {
|
|
z-index: -1 !important;
|
|
display: none !important;
|
|
}
|
|
|
|
}
|
|
|
|
page {
|
|
background-color: white;
|
|
position: relative;
|
|
}
|
|
|
|
.display_none {
|
|
display: none;
|
|
}
|
|
|
|
@keyframes scaleDraw {
|
|
/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
|
|
|
|
0% {
|
|
|
|
transform: scale(1);
|
|
/*开始为原始大小*/
|
|
|
|
}
|
|
|
|
25% {
|
|
|
|
transform: scale(1.1);
|
|
/*放大1.1倍*/
|
|
|
|
}
|
|
|
|
50% {
|
|
|
|
transform: scale(1);
|
|
|
|
}
|
|
|
|
75% {
|
|
|
|
transform: scale(1.1);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.bootom_last {
|
|
// height: 300rpx;
|
|
height: 200rpx;
|
|
width: 100%;
|
|
color: #fff;
|
|
background-color: #000;
|
|
margin-bottom: 200rpx;
|
|
font-size: 25rpx;
|
|
padding-bottom: 40rpx;
|
|
line-height: 300rpx;
|
|
text-align: center;
|
|
line-height: 115rpx;
|
|
}
|
|
|
|
.ONEPIC {
|
|
width: 100%;
|
|
height: 100%;
|
|
margin: -12rpx 0;
|
|
|
|
image {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
&:nth-last-child() {
|
|
margin-bottom: 10rpx;
|
|
}
|
|
}
|
|
|
|
.TWOPIC {
|
|
width: 100%;
|
|
display: flex;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.THREEPIC {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.FOURPIC {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.FIVEPIC {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.SIXPIC {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.body {
|
|
padding-top: 190.33rpx;
|
|
background-color: #000000;
|
|
|
|
}
|
|
|
|
.body_pad {
|
|
padding-top: 147.33rpx;
|
|
background-color: #000000;
|
|
}
|
|
|
|
.status_bar {
|
|
background-color: #000000;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
}
|
|
|
|
.index_logo {
|
|
width: 270.33rpx !important;
|
|
height: 50rpx !important;
|
|
margin-left: 50rpx;
|
|
}
|
|
|
|
.isScrollShow {
|
|
float: right;
|
|
|
|
|
|
|
|
}
|
|
|
|
.isScrollShow1 {
|
|
float: left;
|
|
margin-top: 30rpx;
|
|
|
|
width: 65% !important;
|
|
}
|
|
|
|
.isScrollShow2 {
|
|
float: left;
|
|
position: fixed;
|
|
background-color: #000;
|
|
z-index: 99;
|
|
background: rgba(0, 0, 0, 0.7) !important;
|
|
// margin-top: -150rpx;
|
|
}
|
|
|
|
.isScrollShow3 {
|
|
float: left;
|
|
width: 60rpx;
|
|
height: 64rpx;
|
|
margin-top: 30rpx;
|
|
|
|
margin-right: 25rpx;
|
|
|
|
image {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.page_padding {
|
|
padding-left: 26.37rpx;
|
|
padding-right: 26.67rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 10rpx;
|
|
}
|
|
|
|
.page_margin {
|
|
margin-left: 26.37rpx;
|
|
margin-right: 26.67rpx;
|
|
margin-bottom: 10rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 10rpx;
|
|
background-color: #000000;
|
|
}
|
|
|
|
.page_padding_left {
|
|
padding-left: 10.67rpx;
|
|
padding-right: 10.67rpx;
|
|
}
|
|
|
|
.page_padding_left1 {
|
|
padding-left: 5.67rpx;
|
|
padding-right: 5.67rpx;
|
|
// padding-top: 90rpx;
|
|
}
|
|
|
|
.navigation {
|
|
/* display: flex; */
|
|
background-color: #000000;
|
|
position: fixed;
|
|
top: 0;
|
|
z-index: 100;
|
|
// opacity: 0.8;
|
|
// height: 260rpx;
|
|
width: 100%;
|
|
|
|
.navigation_title {
|
|
display: flex;
|
|
padding: 16rpx 0;
|
|
align-items: center;
|
|
// background-color:#000000;
|
|
justify-content: space-between;
|
|
|
|
image {
|
|
width: 44rpx;
|
|
height: 44rpx;
|
|
}
|
|
|
|
text {
|
|
font-family: Source Han Sans CN;
|
|
font-weight: 800;
|
|
font-style: italic;
|
|
font-size: 42.67rpx;
|
|
|
|
}
|
|
|
|
.navigation_title_padding {
|
|
margin-top: 25rpx !important;
|
|
padding: 0 !important;
|
|
|
|
}
|
|
|
|
.navigation_title_right {
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
>uni-navigator:first-child {
|
|
margin-right: 32.67rpx;
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.navigation_seach {
|
|
width: 100%;
|
|
background-color: #F5F6FA;
|
|
border-radius: 35rpx;
|
|
height: 62rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
color: #8F9094;
|
|
// color:#fff;
|
|
font-size: 26.67rpx;
|
|
padding-left: 22rpx;
|
|
box-sizing: border-box;
|
|
|
|
image {
|
|
width: 29.33rpx;
|
|
height: 29.33rpx;
|
|
margin-right: 22rpx;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.navigation_scroll {
|
|
// margin-top: -80rpx;
|
|
// padding-top: 10rpx;
|
|
padding-top: 15px;
|
|
// margin: 20rpx 0 !important;
|
|
// position: fixed;
|
|
padding-bottom: 10rpx;
|
|
background-color: #000;
|
|
z-index: 99;
|
|
background: rgba(0, 0, 0, 0.7) !important;
|
|
// padding-right: 13rpx;
|
|
padding-left: 24rpx;
|
|
padding-right: 24rpx;
|
|
|
|
.scroll-view_H {
|
|
white-space: nowrap;
|
|
justify-content: space-between;
|
|
font-size: 26.67rpx;
|
|
// color: #484848;
|
|
color: #fff;
|
|
width: 100%;
|
|
|
|
// display: flex;
|
|
// height: 100rpx;
|
|
// ::-webkit-scrollbar {
|
|
// width: 0;
|
|
// height: 0;
|
|
// background-color: #000;
|
|
// }
|
|
view {
|
|
margin-left: 46.67rpx;
|
|
display: inline-block;
|
|
font-weight: 600;
|
|
padding: 12.67rpx 0;
|
|
}
|
|
|
|
view:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.scroll_active {
|
|
font-size: 34rpx;
|
|
font-weight: bold;
|
|
border-bottom: 2.67rpx solid rgba(255, 255, 255, .5);
|
|
}
|
|
}
|
|
}
|
|
|
|
.uni-margin-wrap {
|
|
width: 100%;
|
|
height: 100%;
|
|
// margin-top: 45.33rpx;
|
|
// margin-top: 10rpx;
|
|
margin-bottom: 45.33rpx;
|
|
|
|
.swiper {
|
|
|
|
// height: 650.33rpx;
|
|
// width: 720rpx;
|
|
// height: 100%;
|
|
/deep/ .uni-swiper {
|
|
height: auto;
|
|
}
|
|
|
|
.swiper-item {
|
|
display: block;
|
|
// width: 720rpx;
|
|
height: 100%;
|
|
|
|
|
|
// line-height: 373.33rpx;
|
|
text-align: center;
|
|
color: white;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.uni-bg-red {
|
|
background-color: red;
|
|
}
|
|
|
|
.uni-bg-green {
|
|
background-color: green;
|
|
}
|
|
|
|
.uni-bg-blue {
|
|
background-color: blue;
|
|
}
|
|
}
|
|
}
|
|
|
|
.grid_swiper {
|
|
|
|
// height: 380rpx;
|
|
// margin: 0 10rpx 0 10rpx;
|
|
.grid_content {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.grid_item {
|
|
// width: 97.33rpx;
|
|
display: flex;
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
// color: #1B1B1B;
|
|
color: #fff;
|
|
font-size: 24rpx;
|
|
// margin-right: 6rpx;
|
|
margin-bottom: 13.33rpx;
|
|
font-weight: 500;
|
|
background-color: #000000;
|
|
padding-right: 10rpx;
|
|
margin-left: 25.37rpx;
|
|
|
|
&:last-child() {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.grid_item_img {
|
|
width: 97.33rpx;
|
|
height: 97.33rpx;
|
|
margin-bottom: 6.67rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
// .grid_item:nth-child(n+4){
|
|
// margin-right: 0;
|
|
// }
|
|
}
|
|
}
|
|
|
|
.discount {
|
|
width: 100%;
|
|
height: 239.33rpx;
|
|
margin-bottom: 72.67rpx;
|
|
}
|
|
|
|
.index_title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
font-size: 32rpx;
|
|
// color: #161616;
|
|
color: #fff;
|
|
font-weight: bold;
|
|
margin-bottom: 23rpx;
|
|
margin-top: 37.37rpx;
|
|
|
|
.title_right {
|
|
display: flex;
|
|
align-items: center;
|
|
color: white;
|
|
|
|
image {
|
|
width: 22rpx;
|
|
height: 22rpx;
|
|
margin-left: 11.33rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.item_img {
|
|
width: 100%;
|
|
margin-left: 4rpx;
|
|
border-radius: 10rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 10rpx;
|
|
|
|
}
|
|
}
|
|
|
|
.spike1 {
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
padding-right: 16rpx;
|
|
padding-left: 16rpx;
|
|
margin-bottom: 47.67rpx;
|
|
|
|
::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.spike1_item {
|
|
// color: #191919;
|
|
color: #fff;
|
|
font-size: 26.67rpx;
|
|
// margin-right: 16.67rpx;
|
|
// width: 200rpx;
|
|
// margin-left: 16rpx;
|
|
padding-right: 20rpx;
|
|
display: inline-block;
|
|
font-weight: 500;
|
|
|
|
&:last-child {
|
|
margin-right: 37rpx;
|
|
}
|
|
|
|
.spike1_item_img {
|
|
width: 180rpx;
|
|
height: 180rpx;
|
|
background-color: #999999;
|
|
|
|
padding-right: 16rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
}
|
|
}
|
|
|
|
// .padding_honlist2{
|
|
// margin-right: 280rpx !important;
|
|
// }
|
|
.spike1_item_bottom {
|
|
padding-left: 9.33rpx;
|
|
margin-top: 7.67rpx;
|
|
|
|
.spike1_item_text {
|
|
// color: #9D9D9D;
|
|
color: #fff;
|
|
font-size: 21.33rpx;
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.spike1_item_text1 {
|
|
// color: #9D9D9D;
|
|
color: #fff;
|
|
font-size: 21.33rpx;
|
|
}
|
|
}
|
|
|
|
.spike1_item_bottom1 {
|
|
padding-left: 9.33rpx;
|
|
margin-top: 19.33rpx;
|
|
font-weight: bold;
|
|
|
|
.spike1_item_text {
|
|
// color: #000000;
|
|
color: #fff;
|
|
font-size: 16rpx;
|
|
font-weight: 400;
|
|
margin-bottom: 20.67rpx;
|
|
white-space: break-spaces;
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.spike1_item:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
|
|
.hotSells1 {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
// color: #000000;
|
|
color: #fff;
|
|
font-size: 28rpx;
|
|
font-weight: 400;
|
|
// margin-bottom: 149.33rpx;
|
|
margin-bottom: 44rpx;
|
|
|
|
.hotSells1_item {
|
|
width: 340rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.hotSells1_item_img {
|
|
width: 100%;
|
|
// // height: 266.67rpx;
|
|
// background-color: #999999;
|
|
margin-bottom: 5.33rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.hotSells2_item {
|
|
width: 224rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
// margin-top: 49.33rpx;
|
|
margin-top: 18.33rpx;
|
|
|
|
.hotSells2_item_img {
|
|
// width: 100%;
|
|
// height: 224rpx;
|
|
// background-color: #999999;
|
|
margin-bottom: 5.33rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.goodsthree2 {
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 29.33rpx;
|
|
|
|
.goodsthree2_item {
|
|
width: 242.67rpx;
|
|
height: 204.67rpx;
|
|
background-color: #999999;
|
|
}
|
|
}
|
|
|
|
.index_title1 {
|
|
text-align: center;
|
|
position: relative;
|
|
font-size: 29.33rpx;
|
|
font-weight: bold;
|
|
margin-top: 116rpx;
|
|
padding-bottom: 52rpx;
|
|
|
|
&:before {
|
|
content: '';
|
|
background-color: #000000;
|
|
height: 4rpx;
|
|
width: 53.33rpx;
|
|
position: absolute;
|
|
bottom: 13.33rpx;
|
|
left: 50%;
|
|
margin-left: -26.67rpx;
|
|
}
|
|
}
|
|
|
|
.waterfall {
|
|
background-color: #F8F7FB;
|
|
padding: 0 25.33rpx;
|
|
box-sizing: border-box;
|
|
padding-top: 52.67rpx;
|
|
|
|
.item {
|
|
padding: 0 16.67rpx;
|
|
// background-color: #ffaa7f;
|
|
padding-bottom: 36.67rpx;
|
|
|
|
.title {
|
|
font-size: 25.33rpx;
|
|
font-weight: 400;
|
|
// margin-top: 24.67rpx;
|
|
margin-top: 14.67rpx;
|
|
// margin-bottom: 32.67rpx;
|
|
}
|
|
|
|
.title1 {
|
|
font-size: 20.33rpx;
|
|
line-height: 40rpx;
|
|
height: 80rpx;
|
|
overflow: hidden;
|
|
// font-weight: 400;
|
|
// margin-top: 24.67rpx;
|
|
margin-top: 14.67rpx;
|
|
margin-bottom: 14.67rpx;
|
|
|
|
}
|
|
|
|
.desc {
|
|
font-size: 32rpx;
|
|
height: 50rpx !important;
|
|
font-weight: bold;
|
|
width: 200rpx;
|
|
background-color: #ffaaff !important;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding-right: 10rpx;
|
|
|
|
.desc_img {
|
|
height: 40rpx;
|
|
width: 40rpx;
|
|
background-color: #55ff7f;
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.padding_left {
|
|
margin-left: 17rpx;
|
|
}
|
|
|
|
.best_item {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
margin: 0 10rpx 0 10rpx;
|
|
|
|
// width: 80vw;
|
|
// height:400rpx ;
|
|
.best_one {
|
|
width: 45vw;
|
|
height: 400rpx;
|
|
margin: 10rpx;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
|
|
.best_img {
|
|
height: 360rpx;
|
|
width: 360rpx;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.best_text {
|
|
line-height: 40rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.container {
|
|
padding: 0 30rpx;
|
|
line-height: 34rpx;
|
|
font-size: 26rpx;
|
|
background-color: #000;
|
|
color: white;
|
|
|
|
// padding-bottom: 50rpx;
|
|
.uni-view {}
|
|
|
|
}
|
|
|
|
.item {
|
|
background-color: #1e1e1e;
|
|
padding: 12rpx 20rpx;
|
|
margin-top: -10rpx;
|
|
border-bottom-left-radius: 10rpx;
|
|
border-bottom-right-radius: 10rpx;
|
|
}
|
|
|
|
.title {
|
|
font-size: 25.33rpx;
|
|
line-height: 34rpx;
|
|
// font-weight: 200;
|
|
// margin-top: 24.67rpx;
|
|
color: #fff;
|
|
// margin-bottom: 10.67rpx;
|
|
}
|
|
|
|
.title1 {
|
|
font-size: 26rpx;
|
|
line-height: 32rpx;
|
|
height: 64rpx;
|
|
|
|
overflow: hidden;
|
|
// margin-top: 4.67rpx;
|
|
// margin-top: 4.67rpx;
|
|
margin-bottom: 10.67rpx;
|
|
// padding-left: 6rpx;
|
|
padding-right: 6rpx;
|
|
|
|
}
|
|
|
|
.desc {
|
|
font-size: 36rpx;
|
|
line-height: 34rpx;
|
|
font-weight: bold;
|
|
margin-bottom: 10.67rpx;
|
|
margin-top: 20.67rpx;
|
|
height: 50rpx;
|
|
font-weight: bold;
|
|
width: 40vw;
|
|
text-align: start;
|
|
// line-height: 50rpx;
|
|
// padding-top: 10rpx;
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding-right: 10rpx;
|
|
|
|
.desc_img {
|
|
height: 40rpx;
|
|
width: 40rpx;
|
|
|
|
// background-color: #ccc;
|
|
image {
|
|
// margin-top: -10rpx;
|
|
height: 100%;
|
|
width: 100%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
}
|
|
|
|
// padding-left: 6rpx;
|
|
padding-right: 6rpx;
|
|
color: #fff;
|
|
}
|
|
|
|
.right,
|
|
.left {
|
|
display: inline-block;
|
|
width: 49%;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.left {
|
|
margin-right: 2%;
|
|
}
|
|
|
|
.left image,
|
|
.right image {
|
|
width: 100%;
|
|
// margin-bottom: 8rpx;
|
|
margin-top: 16rpx;
|
|
border-top-left-radius: 10rpx;
|
|
border-top-right-radius: 10rpx;
|
|
// border-top: #8F9094 1rpx solid;
|
|
// border-right: #8F9094 1rpx solid;
|
|
// border-left: #8F9094 1rpx solid;
|
|
// border: #8F9094 0.5rpx solid;
|
|
}
|
|
|
|
.Popup {
|
|
height: 700rpx;
|
|
width: 400rpx;
|
|
|
|
|
|
.popup_close {
|
|
height: 50rpx;
|
|
width: 50rpx;
|
|
|
|
margin-left: 400rpx;
|
|
|
|
// background-color: #000000;
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.popup_img {
|
|
height: 600rpx;
|
|
width: 400rpx;
|
|
// margin-top: 10rpx;
|
|
// margin-left: 20rpx;
|
|
background-size: 100%;
|
|
padding: 0 !important;
|
|
|
|
background-repeat: no-repeat;
|
|
border-radius: 25rpx;
|
|
position: relative;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 25rpx;
|
|
|
|
}
|
|
|
|
.popup_text {
|
|
right: 0;
|
|
height: 30rpx;
|
|
width: 60rpx;
|
|
font-size: 20rpx;
|
|
margin-right: 10rpx;
|
|
margin-top: 10rpx;
|
|
background-color: #ccc;
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
line-height: 30rpx;
|
|
opacity: 0.5;
|
|
color: white;
|
|
text-align: center;
|
|
position: absolute;
|
|
z-index: 99;
|
|
border-radius: 5rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.open_bg {
|
|
background-color: #000000;
|
|
height: 100vh;
|
|
width: 100%;
|
|
top: 0;
|
|
color: white;
|
|
z-index: 9999999;
|
|
position: fixed;
|
|
// padding-top: 50rpx;
|
|
overflow: hidden;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-attachment: fixed;
|
|
|
|
.open_text {
|
|
right: 10%;
|
|
top: 8%;
|
|
height: 50rpx;
|
|
width: 120rpx;
|
|
font-size: 28rpx;
|
|
margin-right: 10rpx;
|
|
margin-top: 10rpx;
|
|
background-color: #ececec;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
line-height: 50rpx;
|
|
opacity: 0.5;
|
|
text-align: center;
|
|
position: absolute;
|
|
z-index: 10000;
|
|
border-radius: 5rpx;
|
|
}
|
|
|
|
.open_bgimg {
|
|
top: 0;
|
|
height: 100vh;
|
|
width: 100%;
|
|
position: relative;
|
|
color: white;
|
|
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
button {
|
|
width: 100%;
|
|
height: 73.33rpx;
|
|
line-height: 73.33rpx;
|
|
background-color: #191919;
|
|
color: white;
|
|
font-weight: bold;
|
|
font-size: 26.67rpx;
|
|
}
|
|
|
|
// .BANNER1 {
|
|
// width: 100%;
|
|
// height: 100%;
|
|
// margin: -6px 0;
|
|
// image {
|
|
// width: 100%;
|
|
// }
|
|
// }
|
|
|
|
</style>
|
|
|