|
|
<template>
|
|
|
<!-- 弹出规格选项 -->
|
|
|
<view class="popup">
|
|
|
<view class="mask" @touchmove.stop.prevent="moveHandle" v-if="showModal" @tap="onhide"></view>
|
|
|
<view @touchmove.stop.prevent="moveHandle" :class="'sku ' + (showModal==true ? 'shows':'')" :style="{bottom: showModal == true ? bottoms+'upx': ''}">
|
|
|
<view class="sku_top">
|
|
|
<image :src="goods.url" class="top_img"></image>
|
|
|
<view class="sku_title">
|
|
|
{{goods.goodsName}}
|
|
|
</view>
|
|
|
<view class="moneys">
|
|
|
<!-- 这里的价格是选择完规格后计算的价格 -->
|
|
|
￥{{(Number(goods.price) * number).toFixed(2)}}
|
|
|
</view>
|
|
|
<view class="kucun">
|
|
|
<!-- 这里的价格是选择完规格后计算的库存 -->
|
|
|
库存: {{goods.stock || stock }}
|
|
|
</view>
|
|
|
</view>
|
|
|
<block v-if="goods._skus.length > 0">
|
|
|
<view v-for="(item, index) in goods._skus"
|
|
|
:key="index"
|
|
|
class="sku_list">
|
|
|
<view class="sku_name">
|
|
|
{{item.skuname}}
|
|
|
</view>
|
|
|
<view class="sku_tag">
|
|
|
<view v-for="(row, sIndex) in item.child"
|
|
|
:key="row.id"
|
|
|
class="tag_s"
|
|
|
:class="[currentArr['' + index] == row.id ? ' active' : '']"
|
|
|
@tap="setTag(item, index, sIndex, row)"
|
|
|
>
|
|
|
{{row.tagname}}
|
|
|
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</block>
|
|
|
<view class="number">
|
|
|
<view class="n_left">购买数量</view>
|
|
|
<view class="n_right">
|
|
|
<text class="jian" @tap="onChangeNum('reduce')">－</text>
|
|
|
<input :value="number" disabled type="number" maxlength="2" class="inputs"></input>
|
|
|
<text class="jia" @tap="onChangeNum('add')">＋</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="btn_box">
|
|
|
<view class="addcart_btn" :style="'background-color:' + colors" @tap="onsubmit('add')">加入购物车</view>
|
|
|
<view class="submit" :style="'background-color:' + colors" @tap="onsubmit('pay')">立即购买</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { setTabBarBadge } from'@/utils/util.js'
|
|
|
import {getCart, setCart ,resetCart, setGoodsData,getCartNumber, getToken} from '@/utils/auth.js'
|
|
|
import { addCart } from '@/api';
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
number: 1,
|
|
|
current: "",
|
|
|
currentArr: {}, //当前选中的规格数组
|
|
|
currentSku:{}, //选择后的规格详情
|
|
|
skulength: 0, //选择商品规格的长度
|
|
|
issku: false ,//判断当前商品是否存在规格
|
|
|
update: true,
|
|
|
nowList:{},
|
|
|
|
|
|
stock: 500
|
|
|
};
|
|
|
},
|
|
|
components: {},
|
|
|
props: {
|
|
|
colors: {
|
|
|
type: String
|
|
|
},
|
|
|
showModal: {
|
|
|
type: Boolean,
|
|
|
default: false
|
|
|
},
|
|
|
goods: {
|
|
|
type: Object
|
|
|
},
|
|
|
bottoms:{
|
|
|
type: String,
|
|
|
default: 0
|
|
|
}
|
|
|
},
|
|
|
computed:{
|
|
|
skuArr() {
|
|
|
return this.goods.skuArr;
|
|
|
}
|
|
|
},
|
|
|
watch:{
|
|
|
goods(newVal){//监听商品规格变化 来清空之前所选的规格
|
|
|
newVal._skus.forEach((v, index) => {
|
|
|
this.$set(this.currentArr, index, v.child[0].id)
|
|
|
})
|
|
|
this.number = 1 //初始数量
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
moveHandle(){
|
|
|
return
|
|
|
},
|
|
|
setTag(items, current, indexs,row) {
|
|
|
|
|
|
console.log(items, current, indexs,row)
|
|
|
//选择规格
|
|
|
let that = this
|
|
|
let item = items
|
|
|
let pid = items.sku_id
|
|
|
let isChecked = true; // 选中 or 取消选中
|
|
|
|
|
|
// const findIndex = this.currentArr.findIndex(v => v === row.id)
|
|
|
// if (findIndex > -1) {
|
|
|
// this.currentArr.splice(findIndex, 1, '');
|
|
|
// isChecked = false
|
|
|
|
|
|
// } else {
|
|
|
// this.$set(this.currentArr, current, row.id)
|
|
|
// }
|
|
|
// this.currentArr[current + ''] = row.id
|
|
|
this.$set(this.currentArr, current, row.id)
|
|
|
|
|
|
const chooseSkuId = Object.values(this.currentArr).filter(v => !!v);
|
|
|
|
|
|
let newSku = this.getAllSku() //获取符合条件的规格数据
|
|
|
|
|
|
that.skulength = chooseSkuId.length
|
|
|
|
|
|
if(chooseSkuId.length == that.nowList.sku.length && newSku.length){
|
|
|
//如果所有的规格类都被选中了 设置当前选中项商品的信息
|
|
|
that.currentSku = newSku[0]
|
|
|
that.issku = true //设定当前商品为规格商品 用于加入购物车时判断
|
|
|
}else{
|
|
|
that.currentSku = that.nowList;
|
|
|
}
|
|
|
// 每次点击选择或者取消之后都要刷新下选择状态 判断其他规格不符合条件的是否被选中
|
|
|
that.changeDisabled(isChecked,row.id, pid)
|
|
|
},
|
|
|
changeDisabled(isChecked=false,skuId=0, pid=0){ //改变禁用状态
|
|
|
let newSku = []
|
|
|
if (isChecked) {
|
|
|
for(let key of this.skuArr){ //遍历可用规格数组
|
|
|
if(key.stock <= 0){ //如果规格现有的库存小于等于0
|
|
|
continue
|
|
|
}
|
|
|
if(key.goods_sku_arr.indexOf(skuId.toString()) >= 0){ //如果当前选中的类中存在对应的规格
|
|
|
newSku.push(key)
|
|
|
}
|
|
|
}
|
|
|
}else{
|
|
|
newSku = this.getAllSku()
|
|
|
}
|
|
|
// 所有存在并且有库存未选择的规格项 的 子项 id
|
|
|
let noChooseSkuIds = [];
|
|
|
for (let price of newSku) {
|
|
|
noChooseSkuIds = noChooseSkuIds.concat(price.goods_sku_arr);
|
|
|
}
|
|
|
// 去重
|
|
|
noChooseSkuIds = Array.from(new Set(noChooseSkuIds));
|
|
|
|
|
|
if (isChecked) {
|
|
|
// 去除当前选中的规格项
|
|
|
let index = noChooseSkuIds.indexOf(skuId.toString());
|
|
|
noChooseSkuIds.splice(index, 1);
|
|
|
} else {
|
|
|
// 循环去除当前已选择的规格项
|
|
|
// this.currentArr.forEach(sku => {
|
|
|
// if (sku.toString() != '') {
|
|
|
// // sku 为空是反选 填充的
|
|
|
// let index = noChooseSkuIds.indexOf(sku.toString());
|
|
|
// if (index >= 0) {
|
|
|
// // sku 存在于 noChooseSkuIds
|
|
|
// noChooseSkuIds.splice(index, 1);
|
|
|
// }
|
|
|
// }
|
|
|
// });
|
|
|
}
|
|
|
|
|
|
// 当前已选择的规格大类
|
|
|
let chooseSkuKey = [];
|
|
|
if (!isChecked) {
|
|
|
// 当前已选择的规格大类
|
|
|
// this.currentArr.forEach((sku, key) => {
|
|
|
// if (sku != '') {
|
|
|
// // sku 为空是反选 填充的
|
|
|
// chooseSkuKey.push(key);
|
|
|
// }
|
|
|
// });
|
|
|
} else {
|
|
|
// 当前点击选择的规格大类
|
|
|
chooseSkuKey = [pid];
|
|
|
}
|
|
|
let skuid = this.currentArr[pid]
|
|
|
for(let i in this.nowList.sku){
|
|
|
// 当前点击的规格，或者取消选择时候 已选中的规格 不进行处理
|
|
|
for (var x in this.nowList.sku[i]['child']) {
|
|
|
// 如果当前规格项 id 不存在于有库存的规格项中，则禁用
|
|
|
if (chooseSkuKey.indexOf(this.nowList.sku[i]['sku_id']) >= 0) {
|
|
|
if(this.nowList.sku[i]['child'][x]['id'] == skuid){
|
|
|
continue
|
|
|
}else{
|
|
|
if(!isChecked){
|
|
|
this.nowList.sku[i]['child'][x]['disabled'] = false;
|
|
|
}
|
|
|
}
|
|
|
}else{
|
|
|
if (noChooseSkuIds.indexOf(this.nowList.sku[i]['child'][x]['id'].toString()) >= 0) {
|
|
|
this.nowList.sku[i]['child'][x]['disabled'] = false;
|
|
|
} else {
|
|
|
this.nowList.sku[i]['child'][x]['disabled'] = true;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
onhide() {
|
|
|
//隐藏规格对话框
|
|
|
this.$emit('onhide')
|
|
|
},
|
|
|
|
|
|
onChangeNum(type = 'reduce') {
|
|
|
if (type === 'add') {
|
|
|
if (this.number >= this.stock) {
|
|
|
return
|
|
|
}
|
|
|
this.number += 1
|
|
|
} else {
|
|
|
if (this.number <= 1) {
|
|
|
return;
|
|
|
}
|
|
|
this.number -= 1
|
|
|
}
|
|
|
|
|
|
},
|
|
|
onsubmit(value) {
|
|
|
// 此处应该判断是否登录 如果没登录 跳转到登录页
|
|
|
if(!getToken()){
|
|
|
uni.navigateTo({ //登录
|
|
|
url:'/pages/login/index1'
|
|
|
})
|
|
|
return
|
|
|
}
|
|
|
//提交购物车
|
|
|
if(Object.keys(this.currentArr).length != this.goods._skus.length){ //如果规格长度和所选规格长度不相等 提示
|
|
|
uni.showToast({
|
|
|
title: '请选择规格',
|
|
|
icon: 'none'
|
|
|
});
|
|
|
return
|
|
|
}
|
|
|
// addCart
|
|
|
const cartParams = {
|
|
|
"goodsId": 0,
|
|
|
"goodsName": "",
|
|
|
"goodsNo": 0,
|
|
|
"url": "",
|
|
|
"userId": "",
|
|
|
specs: ''
|
|
|
}
|
|
|
const data = this.goods
|
|
|
const selectedSku = []
|
|
|
Object.keys(this.currentArr).forEach(key => {
|
|
|
const item = this.currentArr[key]
|
|
|
if (item) {
|
|
|
const sku = this.goods._skus[key].child[item -1 ]
|
|
|
sku.number = sku.number ? sku.number + this.number : this.number
|
|
|
selectedSku.push(sku)
|
|
|
}
|
|
|
})
|
|
|
data._selectedSku = selectedSku
|
|
|
data.number = this.number
|
|
|
if(value == 'add'){ //如果是添加购物车
|
|
|
let colCart = getCart();
|
|
|
if(colCart.length){
|
|
|
const hasItem = colCart.some(v => v.id === data.id)
|
|
|
if (!hasItem) {
|
|
|
colCart.push(data)
|
|
|
} else {
|
|
|
for(let y = 0;y < colCart.length; y++){
|
|
|
const item = colCart[y]
|
|
|
if (data.id === item.id) {
|
|
|
item.number += this.number
|
|
|
item._selectedSku = selectedSku
|
|
|
break
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
} else {
|
|
|
colCart = [data]
|
|
|
}
|
|
|
resetCart(colCart)
|
|
|
|
|
|
// 存储商品数据
|
|
|
uni.showToast({
|
|
|
title: '加入购物车成功 !',
|
|
|
icon: 'none'
|
|
|
});
|
|
|
/**
|
|
|
* 模拟获取购物车的数量 getCart
|
|
|
*/
|
|
|
let cartNum = getCartNumber()
|
|
|
|
|
|
setTabBarBadge(cartNum)
|
|
|
}else{ //如果是购买商品
|
|
|
let goods = []
|
|
|
goods.push(data)
|
|
|
setGoodsData(goods) //存储商品信息和商品规格
|
|
|
uni.navigateTo({ //提交订单
|
|
|
url:'/pages/views/order/confirmOrder'
|
|
|
})
|
|
|
}
|
|
|
setTimeout(() => {
|
|
|
this.$emit('onhide')
|
|
|
}, 800);
|
|
|
},
|
|
|
// 处理规格多选情况下 符合条件的规格 并把不符合条件的规格禁用
|
|
|
getAllSku(){
|
|
|
let newSku = []
|
|
|
for(let key of this.skuArr){ //遍历可用规格数组
|
|
|
if(key.stock <= 0){ //如果规格现有的库存小于等于0
|
|
|
continue
|
|
|
}
|
|
|
var isOk = true
|
|
|
// this.currentArr.forEach((sku)=>{
|
|
|
// // sku 不为空，并且，这个 条 skuPrice 没有被选中,则排除
|
|
|
// if(sku.toString() !== '' && key.goods_sku_arr.indexOf(sku.toString()) < 0){
|
|
|
// isOk = false
|
|
|
// }
|
|
|
// })
|
|
|
if(isOk == true){
|
|
|
newSku.push(key)
|
|
|
}
|
|
|
}
|
|
|
return newSku
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|
|
|
.mask{
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
position: fixed;
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
background: #000;
|
|
|
z-index: 900;
|
|
|
opacity: 0.7;
|
|
|
}
|
|
|
.sku{
|
|
|
width: 100vw;
|
|
|
min-height: 30vh;
|
|
|
position: fixed;
|
|
|
bottom: -100%;
|
|
|
z-index: 910;
|
|
|
left: 0;
|
|
|
background-color: #ffffff;
|
|
|
padding: 20upx 4%;
|
|
|
border-top-left-radius: 10upx;
|
|
|
border-top-right-radius: 10upx;
|
|
|
border-bottom: 1upx solid #eee;
|
|
|
transition: all 0.3s;
|
|
|
}
|
|
|
.shows{
|
|
|
bottom: 0;
|
|
|
transition: all 0.3s;
|
|
|
}
|
|
|
.sku_top{
|
|
|
overflow: hidden;
|
|
|
margin-top: 20upx;
|
|
|
}
|
|
|
.sku_top .top_img{
|
|
|
height: 170upx;
|
|
|
width: 170upx;
|
|
|
float: left;
|
|
|
margin-right: 15upx;
|
|
|
border-radius: 8upx;
|
|
|
}
|
|
|
.sku_top .sku_title{
|
|
|
font-size: 30upx;
|
|
|
line-height: 35upx;
|
|
|
font-weight: bold;
|
|
|
overflow: hidden;
|
|
|
text-overflow: ellipsis;
|
|
|
display: -webkit-box;
|
|
|
-webkit-box-orient: vertical;
|
|
|
-webkit-line-clamp: 2;
|
|
|
}
|
|
|
.sku_top .moneys{
|
|
|
font-size: 30upx;
|
|
|
line-height: 40upx;
|
|
|
overflow: hidden;
|
|
|
margin-top: 20upx;
|
|
|
font-weight: bold;
|
|
|
color: $mycolor;
|
|
|
}
|
|
|
.sku_top .kucun{
|
|
|
font-size: 24upx;
|
|
|
color: #999;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
.sku_list{
|
|
|
margin-top: 20upx;
|
|
|
overflow: hidden;
|
|
|
margin-bottom: 40upx;
|
|
|
}
|
|
|
.sku_name{
|
|
|
font-size: 24upx;
|
|
|
color: #666;
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
.sku_tag{
|
|
|
overflow: hidden;
|
|
|
margin-top: 20upx;
|
|
|
}
|
|
|
.sku_tag .tag_s{
|
|
|
height: 60upx;
|
|
|
line-height: 60upx;
|
|
|
align-items: center;
|
|
|
padding: 0 20upx;
|
|
|
text-align: center;
|
|
|
font-size: 26upx;
|
|
|
color: #202020;
|
|
|
background-color: #F5F5F5;
|
|
|
border: 1upx solid #F5F5F5;
|
|
|
float: left;
|
|
|
border-radius: 40upx;
|
|
|
margin-right: 20upx;
|
|
|
transition: all 0.2s;
|
|
|
margin-bottom: 20upx;
|
|
|
font-weight: 500;
|
|
|
&::after{
|
|
|
border: none;
|
|
|
}
|
|
|
}
|
|
|
.sku_tag .tag_s.active {
|
|
|
color: rgb(57, 181, 74);
|
|
|
background: rgb(255, 255, 255);
|
|
|
border-color: rgb(57, 181, 74);
|
|
|
}
|
|
|
.number{
|
|
|
margin-top: 10upx;
|
|
|
border-top: 1upx solid #ccc;
|
|
|
width: 100%;
|
|
|
height: 80upx;
|
|
|
line-height: 80upx;
|
|
|
padding-top: 10upx;
|
|
|
}
|
|
|
.number .n_left{
|
|
|
float: left;
|
|
|
font-size: 28upx;
|
|
|
color: #333;
|
|
|
}
|
|
|
.number .n_right{
|
|
|
float: right;
|
|
|
height: 60upx;
|
|
|
width: 200upx;
|
|
|
background-color: #F5F5F5;
|
|
|
margin-top: 10upx;
|
|
|
border-radius: 5upx;
|
|
|
}
|
|
|
.n_right .jian,.jia{
|
|
|
width: 60upx;
|
|
|
height: 60upx;
|
|
|
text-align: center;
|
|
|
line-height: 60upx;
|
|
|
font-size: 42upx;
|
|
|
}
|
|
|
.jian{
|
|
|
float: left;
|
|
|
}
|
|
|
.jia{
|
|
|
float: right;
|
|
|
}
|
|
|
.jian:active{
|
|
|
background-color: #eee;
|
|
|
}
|
|
|
.jia:active{
|
|
|
background-color: #eee;
|
|
|
}
|
|
|
.n_right .inputs{
|
|
|
width: 76upx;
|
|
|
float: left;
|
|
|
text-align: center;
|
|
|
margin-top: 6upx;
|
|
|
}
|
|
|
.btn_box{
|
|
|
margin-top: 40upx;
|
|
|
}
|
|
|
.btn_box .addcart_btn, .submit{
|
|
|
width: 40vw;
|
|
|
height: 60upx;
|
|
|
line-height: 60upx;
|
|
|
border-radius: 42upx;
|
|
|
font-size: 26upx;
|
|
|
text-align: center;
|
|
|
color: #ffffff;
|
|
|
float: left;
|
|
|
margin-left: 30upx;
|
|
|
margin-bottom: 30upx;
|
|
|
}
|
|
|
.btn_box .addcart_btn:active{
|
|
|
opacity: 0.8;
|
|
|
}
|
|
|
.btn_box .submit:active{
|
|
|
opacity: 0.8;
|
|
|
}
|
|
|
.ondisabled{
|
|
|
background-color: #F9F9F9;
|
|
|
opacity: 0.5;
|
|
|
}
|
|
|
</style> |
