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.
 
 
 
 
 
 

750 lines
17 KiB

<template>
<view>
<uni-nav-bar left-icon="left" :statusBar="true" title="Flash Sale" :fixed="true"
color="#fff" backgroundColor="#000000" @clickLeft="back" @clickRight="isDelete=!isDelete" :border="false"/>
<view class="body1">
<view class="countDown">
<text>Ends in</text>
<uni-countdown :showDay="false" :hour="curEndTime |hours" :minute="curEndTime|minutes" :second="curEndTime|seconds"
color="#FFFFFF" background-color="#910000" class="countDown_assembly" />
</view>
<view class="tips">
DopePlus selects commodities from time to time to carry
out special price activities.
</view>
<view class="tips1">The quantity of special price commodities is limited and will be sold out</view>
<view class="recommend">
<view class="recommend_content">
<view class="recommend_content_item" v-for="(item,index) in list " :key="index" >
<view class="recommend_content_item_image">
<image :src="item.goods_img" mode="" @click="goDetails(item.id)"></image>
</view>
<view class="recommend_content_item_name">{{item.name}}</view>
<view class="recommend_item_operation" >
<view>
<view class="recommend_content_item_pric">US${{item.promote_price?item.promote_price:item.shop_price}}</view>
<view class="recommend_content_item_pric1">US${{item.shop_price}}</view>
</view>
<image src="../../static/img/add_gray.png" @click="Cart(item)" ></image>
</view>
</view>
</view>
</view>
<view class="mask" @click="isCart=false" v-show="isCart"></view>
<view class="addCard" v-show="isCart">
<image src="/static/img/close1.png" mode="" class="addCard_close" @click="isCart=false"></image>
<scroll-view class="spike1 " scroll-x="true" :show-scrollbar="false" >
<image mode="" class="addCard_scroll" :src="item.img_url" @click="clickImg(index,gallery_list)" v-for="(item,index) in gallery_list" :key="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="select_size_item"
v-for="(item1,index1) in item.goods_attrs"
:key="item1.goods_attr_id"
:class="goods_attr_list[index].goods_attr_id==item1.goods_attr_id?'active_color':''"
@click="selectAttr(item.attr_id,item1.goods_attr_id,index)">
{{item1.attr_value}}
</view> -->
<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" v-if="item1.attr_img!=''">
<image src="/static/icon/big2.png" mode="" @click="clickImg(index1,item.list)"></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="#fff" v-model="cartQuery.goods_number" :min="1"></uni-number-box>
</view>
</scroll-view>
<!-- <view class="quantity">
<text>Quantity</text>
<uni-number-box background="#fff" v-model="cartQuery.goods_number" :min="1"></uni-number-box>
</view> -->
<button @click="addCart">ADD TO CART</button>
</view>
<view class="bootom_last" v-if="bootom == 1">-THE END-</view>
</view>
</view>
</template>
<script>
import {defaultRequest,defaultRequest2} from '../../api/index.js'
export default {
data() {
return {
list:[],
isCart:false,
query:{
_action:'getgoodsdetail',
goods_id:''
},
Is_attr:0,//是否有规格
goodsDate:{
comment_summary:[
{comment_summary:'',commentlabel: ""}
],
gallery_list:[
{content:''}
],
},
//选择规格的数组
goods_attr_list:[],
gallery_list:[],
catQuery:{
_action:'getgoods',
cat:'',
page_index:1,
page_size:10
},
// 添加到购物车请求参数
cartQuery:{
_action:'addtocart',
goods_id:'',
goods_parent_id:0,
goods_number:1,
goods_attr_id:'',
goods_is_package:0
},
isLogin:-1,
current:0,
shop_price:0,
bootom: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
}
},
methods:{
goDetails(id){
uni.navigateTo({
url:"../productDetails/index?goodid="+id
})
},
getList(){
let data ={_action:'getseckillgoods',gid:''}
let query={
_action:'getgoods',type:'promote',order_type:0,page_size:50,page_index:0
}
defaultRequest(query).then(res=>{
console.info(res,'p')
let gid_lists = ''
if(res.error==0){
this.list=res.data
}
})
},
onReachBottom(e){
console.log(e)
this.bootom = 1
console.log(this.bootom)
},
back(){
uni.navigateBack()
},
Cart(e){
uni.showLoading({
title:'loading'
})
this.goodsDate =[]
this.gallery_list = []
this.goods_attr_list =[]
this.query.goods_id = e.id
this.cartQuery.goods_id = e.id
defaultRequest(this.query).then(res=>{
if(res.error==0){
uni.hideLoading()
this.isCart = true
console.log(res)
this.goodsDate=res.data
this.shop_price = this.goodsDate.shop_price
this.gallery_list = res.data.gallery_list
if(this.goodsDate.attr_list){
this.Is_attr = this.goodsDate.attr_list[0].goods_attrs.length
this.goodsDate.attr_list.map(item=>{
if(item.attr_name=="Color"){
this.colorNum=item.goods_attrs.length
}
let data={name:item.attr_name,goods_attr_id:'',attr_id:item.attr_id,list:item.goods_attrs}
this.goods_attr_list.push(data)
})
}else{
this.goods_attr_list=[]
this.Is_attr = 0
}
this.catQuery.cat=res.data.cat_id
}
})
},
// 选择规格
selectAttr(attr_id,goods_attr_id,index,attr_price){
this.current = index
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(){
let isall = 1
if(this.Is_attr>0){
console.log(this.goods_attr_list,'规格')
let goods_attr_id =''
for(let i of this.goods_attr_list){
if(i.goods_attr_id!=''){
goods_attr_id+=i.goods_attr_id+','
}
}
// this.goods_attr_list.map(item=>{
// if(item.goods_attr_id!=''){
// goods_attr_id+=item.goods_attr_id+','
// }
// })
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'
})
return
}
this.cartQuery.goods_attr_id=goods_attr_id.substring(0,goods_attr_id.lastIndexOf(','));
// console.log(this.cartQuery,'yyy')
}
if(this.isLogin == 1){
defaultRequest2(this.cartQuery).then(res=>{
if(res.error==0){
if(res.data[0].success){
this.cartQuery.goods_attr_id = ''
uni.showToast({
title:'Successfully added',
icon:'none'
})
}
this.isCart = false
}
})
}
else if (this.isLogin == 0){
uni.navigateTo({
url:'../login/index'
})
}
},
// 点击预览图片
clickImg(index,list) {
let lists =[]
list.map( item =>{
if(item.img_url){
lists.push(item.img_url)
}
if(item.attr_img){
lists.push(item.attr_img)
}
})
wx.previewImage({
urls: lists, //需要预览的图片http链接列表,多张的时候,url直接写在后面就行了
current: index, // 当前显示图片的http链接,默认是第一个
indicator:'number',
success: function(res) {},
fail: function(res) {},
complete: function(res) {},
})
},
},
onPageScroll(e) {
// console.log( e.scrollTop)
// if(e.scrollTop>8){
// plus.navigator.setStatusBarStyle("light");
// }else{
// plus.navigator.setStatusBarStyle("dark");
// }
},
onLoad() {
this.getList()
this.isLogin = uni.getStorageSync('isLogin')
}
}
</script>
<style lang="scss" scoped>
page{
height: 100vh;
background-color: #000;
}
.uni-navbar{
font-size: 32rpx;
font-weight: bold;
}
.body1{
// border-top: 13.33rpx #F7F7F7 solid;
padding:0 26rpx;
padding-top: 54rpx;
padding-bottom: 54rpx;
background-color:#000;
// color: #fff !important;
.recommend{
padding: 0;
.recommend_item_operation{
padding-left: 20rpx;
padding-right: 20rpx;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10rpx;
.recommend_content_item_pric{
color: #ffaa00;
font-weight: bold;
font-size: 32rpx;
margin-top: 0;
font-family: cursive;
}
.recommend_content_item_pric1{
font-size: 24rpx;
color: #666666;
text-decoration: line-through;
}
image{
width: 48.67rpx;
height: 48.67rpx;
}
}
}
.recommend_content_item_name{
overflow : hidden;
color: #f1f1f1;
padding-left: 20rpx;
padding-top: 10rpx;
padding-right: 20rpx;
line-height: 34rpx;
font-size: 24rpx;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /* 限制在一个块元素显示的文本的行数 */
-webkit-box-orient: vertical; /* 垂直排列 */
word-break: break-all; /* 内容自动换行 */
}
.countDown{
display: flex;
align-items: center;
font-size: 41.33rpx;
justify-content: center;
margin-bottom: 34rpx;
color:#fff;
.countDown_assembly{
margin-left: 12.67rpx;
}
}
.tips{
width: 572.67rpx;
margin: 0 auto;
font-size: 24rpx;
margin-bottom: 14rpx;
text-align: center;
color: #fff;
}
.tips1{
font-size: 16rpx;
color: #d1d1d1;
margin-bottom: 30rpx;
text-align: center;
}
.addCard{
z-index: 999;
position: fixed;
bottom: 0;
left: 0;
background-color: white;
padding-left: 29.33rpx;
box-sizing: border-box;
padding-top: 77.67rpx;
width: 100%;
font-size: 30.67rpx;
font-weight: 400;
padding-bottom: 44.67rpx;
.addCard_close{
width: 21.33rpx;
height: 21.33rpx;
position: absolute;
right: 24.67rpx;
top: 18.67rpx;
}
.spike1{
margin-top: 0;
margin-bottom: 20rpx;
padding-bottom: 0;
border-bottom: none;
.addCard_scroll{
width: 286.67rpx;
height: 286.67rpx;
border-radius: 10rpx;
margin-left: 10.67rpx;
&:first-child{
margin-left: 0;
}
&:last-child{
margin-right: 15rpx;
}
}
}
.addCard_body{
padding-right: 31.33rpx;
min-height: 400rpx;
max-height: 60vh;
.addCard_price{
font-size: 44rpx;
font-weight: bold;
margin-top: 24.33rpx;
margin-bottom: 51.33rpx;
}
.color_select{
display: flex;
font-size: 16.67rpx;
color: #666666;
flex-wrap: wrap;
margin-bottom: 59.33rpx;
.color_select_item{
margin-top: 22rpx;
position: relative;
background-color: #F9F7FA;
border-radius: 6.67rpx;
margin-right: 12.67rpx;
width: 134.67rpx;
image{
width: 134.67rpx;
height: 133.33rpx;
border-radius: 6.67rpx 6.67rpx 0 0;
}
.color_select_item_zoom{
width: 20.33rpx;
height: 20.33rpx;
// background-color: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: 12.67rpx;
top: 9.33rpx;
z-index: 99;
image{
width: 100%;
height: 100%;
}
}
.color_select_item_bottom{
padding: 10rpx 0rpx;
font-size: 24rpx;
text-align: center;
}
}
.active_color{
color: #fff;
background-color: #000;
border: 1px solid #000000;
}
}
.variations_select_size{
margin-left: 0;
margin-top: 26.67rpx;
margin-bottom: 40.67rpx;
.select_size_item{
margin-bottom: 16.67rpx !important;
&:nth-child(4n+4){
margin-right: 0;
}
}
}
}
}
.quantity{
display: flex;
background-color: white;
align-items: center;
justify-content: space-between;
margin-bottom: 43.33rpx;
// margin-left: 10rpx;
.uni-numbox{
border: 1px solid #999999;
border-radius: 14rpx;
height: 42.67rpx;
margin-right: 33rpx;
/deep/ .uni-numbox__minus{
border-radius: 14rpx;
}
/deep/.uni-numbox__plus{
border-radius: 14rpx;
}
/deep/.uni-numbox__value{
border-left: 1px solid #999999;
border-right: 1px solid #999999;
height: 100%;
width: 63.33rpx;
font-size: 21.33rpx;
}
}
}
button{
width: 95%;
margin-left: 2rpx;
// margin-right: 18rpx;
height: 73.33rpx;
line-height: 73.33rpx;
background-color: #191919;
color: white;
font-weight: bold;
font-size: 26.67rpx;
}
.spike1{
white-space: nowrap;
width: 100%;
margin-top: 36.67rpx;
padding-bottom: 34rpx;
border-bottom: 1px solid #E2E2E2;
::-webkit-scrollbar {
width: 0;
height: 0;
background-color: transparent;
}
.spike1_item{
width: 410rpx;
background-color: #F6F6F6;
padding: 21.33rpx 24.67rpx;
margin-right: 19.33rpx;
font-size: 20rpx;
display: inline-block;
color: #737373;
&:last-child{
margin-right: 0;
}
view{
margin-bottom: 10rpx;
}
.spike1_item_title{
font-weight: bold;
.text_black{
color: black;
display: inline-block;
margin-left: 10rpx;
}
.text_red{
color: #B22234;
display: inline-block;
margin-left: 10rpx;
}
}
}
.spike1_item1{
color: #191919;
font-size: 29.33rpx;
margin-right: 16.67rpx;
width: 200rpx;
display: inline-block;
font-weight: bold;
.spike1_item_img{
width: 200rpx;
height: 200rpx;
background-color: #999999;
}
.spike1_item_bottom{
padding-left: 9.33rpx;
margin-top: 22.67rpx;
.spike1_item_text{
color: #9D9D9D;
font-size: 21.33rpx;
text-decoration: line-through;
}
.spike1_item_text1{
color: #9D9D9D;
font-size: 21.33rpx;
}
}
.spike1_item_bottom1{
padding-left: 9.33rpx;
margin-top: 19.33rpx;
font-weight: bold;
.spike1_item_text{
color: #000000;
font-size: 16rpx;
font-weight: 400;
margin-bottom: 20.67rpx;
white-space: break-spaces;
}
}
}
.spike1_item:last-child{
margin-right: 0;
}
}
.variations_select_size{
margin-left: 20.67rpx;
display: flex;
flex-wrap: wrap;
.select_size_item{
height: 97rpx;
width: 97rpx;
background-size: 100% 100%;
background-size:cover;
image{
height: 100%;
width: 100%;
}
// background-color: #F8F8F8;
// min-width: 121.33rpx;
// height: 54.67rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12.67rpx;
// color: #666666;
font-size: 24rpx;
margin-right: 18.67rpx;
// border: 1px solid #F8F8F8;
padding: 0 10rpx;
margin-bottom: 16.67rpx;
// &:nth-child(-n+2){
// margin-bottom: 16.67rpx;
// }
}
}
.mask {
position: fixed;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.5;
z-index: 998;
top: 0;
left: 0;
}
.bootom_last{
height: 200rpx;
width: 100%;
color: #fff;
background-color: #000;
font-size: 25rpx;
line-height: 200rpx;
text-align: center;
}
}
</style>