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.
 
 
 
 
 
 

2832 lines
70 KiB

<script>
import {
defaultRequest,
defaultRequest2,
defaultRequest4
} from '../../api/index.js'
import {
tarbar
} from '../../tarbar/index.vue'
const app = getApp();
export default {
data() {
return {
// interval: null,
// frameIndex: 0,
// frames: [],
html: '<video :autoplay="true" :enable-progress-gesture="true" muted="" style="width: 100%;" :src="item.goods_video" :mobilenet-hint-type="1" class="video_play" :http-cache="true" loop object-fit="contain" :direction="0" :show-mute-btn="true" @touchstart="touchStart" @touchend="touchEnd" @pause="VideoPuse()"></video>',
video: true,
// register 自定义登录字段
register: -1,
// 小广告按钮
isRegister: true,
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: 375,
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()
}, 100)
},
// 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;
// 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++;
// }, 10);
},
mounted() {
this.getimgheight()
this.getimgheight1()
this.getimgheight2()
this.checkNetwork()
console.log(this.open_img)
if (this.open_img) {
setTimeout(() => {
this.getCountdownTime()
}, 100)
} 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: {
// onPlay() {
// this.frames = this.$refs.videoContext.getFrames()
// this.interval = setInterval(() => {
// this.frameIndex++
// if (this.frameIndex >= this.frames.length) {
// this.frameIndex = 0
// }
// }, 100)
// },
// onPause() {
// clearInterval(this.interval)
// },
// onTimeUpdate() {
// this.frameIndex = Math.floor(this.$refs.videoContext.currentTime * 10)
// },
isVideo() {
this.video = true
},
// 侧滑
/**
* 触摸开始
* @param {Object} e
*/
touchStart(e) {
if (e.touches.length == 1) {
//设置触摸起始点水平方向位置
this.startX = e.touches[0].clientX;
}
},
/**
* 触摸结束
* @param {Object} e
*/
touchEnd(e) {
if (e.changedTouches.length == 1) {
//手指移动结束后水平位置
var endX = e.changedTouches[0].clientX;
let diff = endX - this.startX;
if (Math.abs(diff) > 20) {
if (diff > 0) {
//console.log("左滑...");
} else {
//console.log("右滑...");
}
}
}
},
// 视频停止
VideoPuse() {
this.video = false
},
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",
});
},
Register() {
let that = this
that.isRegister = false
},
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 == 'HOMEAD') {
item.blocks.map(item1 => {
console.log(item1);
console.log(res);
console.log('HOMEAD==================================');
// console.log(this.Swiper_H)
if (res.error != 0) {
uni.navigateTo({
url: '../login/index'
})
}
})
}
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 resu = res.data.message_list
// let resus = Array.from(resu)
// res.data.data.message_list = resus
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'
}
let that = this
defaultRequest(data).then(res => {
console.log(res,'用户信息')
if (res.error == -1) {
uni.setStorageSync('isLogin', 0)
let that = this
that.isRegister = true
} else if (res.error == 0) {
uni.setStorageSync('isLogin', 1)
let that = this
that.isRegister = false
}
that.register = res.error
console.log(that.register);
})
},
// 小广告判断登录
registers() {
let data = {
_action: 'getinfo'
}
defaultRequest(data).then(res => {
console.log(res,'用户信息')
if (res.error == -1) {
uni.navigateTo({
url: '../login/index'
})
let that = this
that.isRegister = true
} else if (res.error == 0) {
uni.navigateTo({
url: '../index/index2'
})
let that = this
that.isRegister = false
}
})
},
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.goods_video)
this.bestlist.push({
goods_video: item.goods_video,
block_pic: item.goods_img,
block_title3: 'US$' + item.shop_price,
block_name: item.short_name,
goodid: item.id
})
// const canvas = uni.createCanvasContext('videoCanvas')
// canvas.width = 400
// canvas.height = 300
// setInterval(() => {
// const frame = item.goods_video.currentTime * item.goods_video.frameRate
// canvas.drawImage(item.goods_video, 0, 0, canvas.width, canvas.height)
// canvas.draw()
// }, 500 / item.goods_video.frameRate)
// let frames = item.goods_video.split(';');
// let i = 0;
// let interval = setInterval(() => {
// if (i < frames.length) {
// console.log(frames[i]);
// i++;
// } else {
// clearInterval(interval);
// }
// }, 1000);
// console.log(frames);
})
//////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':'',height:Swiper_Hb +'rpx'}">
<image :src="item1.block_pic" mode="" @click="imgTo(item1)"></image>
</view>
</swiper-item>
</swiper>
</view>
<!-- HOMEAD -->
<!-- :class="isRegister == true ? 'isRegister-active' : 'isRegister-default'" -->
<view v-if="isRegister == true" style="position: fixed; width: 100%; bottom: 9.4%; opacity: 1;z-index: 1;">
<view ref="register" v-if="register == -1">
<view class="HOMEAD" v-if="item.zone_code=='HOMEAD' && item.zone_status=='NORMAL'" style="position: relative;">
<!-- class="discount page_padding" -->
<image :src="item.blocks[0].block_pic" style="width: 92%;display: flex;justify-content: center;align-items: center;margin: 0 auto;object-fit: cover;"
:style="{height:(item.zone_code=='HOMEAD')?item.zone_column+'rpx':''}" mode=""
@click="registers"></image>
<image style="position: absolute;width: 20px;height: 20px;top: 7px;right: 20px;" mode=" " @click="Register" src="../../static/img/close2.png"></image>
</view>
</view>
</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">
<block v-if="item.goods_video">
<view style="position: relative; height: 225px;" >
<video x-webkit-airplay="allow" x5-video-player-type="h5" :autoplay="true" :enable-progress-gesture="true" muted="" style="width: 100%;"
:mobilenet-hint-type="1" class="video_play" :http-cache="true" loop
object-fit="contain" :direction="0" :src="item.goods_video" :show-mute-btn="true"
@touchstart="touchStart" @touchend="touchEnd" @pause="VideoPuse()">
</video>
<!-- <video-context ref="videoContext" :src="item.goods_video" @play="onPlay" @pause="onPause" @timeupdate="onTimeUpdate"></video-context> -->
</view>
<view class="play_icon" v-show="!video" @click="isVideo"></view>
</block>
<image v-else :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">
<block v-if="item1.goods_video">
<view style="position: relative; height: 225px;">
<video x-webkit-airplay="allow" x5-video-player-type="h5" :autoplay="true" :enable-progress-gesture="true" muted="" style="width: 100%;"
:mobilenet-hint-type="1" class="video_play" :http-cache="true" @pause="VideoPuse()" loop
object-fit="contain" :direction="0" :src="item1.goods_video" :show-mute-btn="true"
@touchstart="touchStart" @touchend="touchEnd">
</video>
</view>
<view class="play_icon" v-show="!video" @click="isVideo"></view>
</block>
<image v-else :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>
uni-video {
position: absolute !important;
height: 225px !important;
}
.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;
}
.video_play {
z-index: 0;
position: relative;
}
.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;
// margin: 20rpx 0 !important;
// position: fixed;
padding-top: 8px;
padding-bottom: 0px;
// padding-top: 15px;
// 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%;
// }
// }
.isRegister-active {
display: block;
}
.isRegister-default {
display: none;
}
</style>