400 lines
13 KiB
JavaScript
400 lines
13 KiB
JavaScript
import {
|
|
getCartCount,
|
|
getProductCode,
|
|
getProductDetail,
|
|
postCartAdd,
|
|
getProductSkuBySelected
|
|
} from '@/api/store'
|
|
export default {
|
|
data() {
|
|
return {
|
|
isWenwan: 0,
|
|
qualifications: [],
|
|
source: '',
|
|
isOpen: false,
|
|
attrTxt: '',
|
|
attrValue: '',
|
|
id: null,
|
|
productValueArr: [],
|
|
attr: {
|
|
cartAttr: false,
|
|
cart_num: 1,
|
|
defaultSku: [],
|
|
defaultSkuIndex: [],
|
|
productAttr: [],
|
|
productSelect: {
|
|
cart_num: 1,
|
|
earnPoints: 0,
|
|
image: '',
|
|
otPrice: 0,
|
|
price: 0,
|
|
stock: 0,
|
|
store_name: '',
|
|
unique: ''
|
|
}
|
|
},
|
|
cart_num: 1,
|
|
CartCount: 0,
|
|
}
|
|
},
|
|
methods: {
|
|
// 获取购物车数量
|
|
getCartCount () {
|
|
const isLogin = this.isLogin
|
|
if (isLogin) {
|
|
getCartCount({
|
|
numType: 0
|
|
}).then(res => {
|
|
this.CartCount = res.data.count
|
|
this.$forceUpdate()
|
|
})
|
|
}
|
|
},
|
|
getSkuActiveStatus(selectedSku) {
|
|
getProductSkuBySelected({ id: this.id, selectedSku }).then(res => {
|
|
const { success, data } = res
|
|
if (success) {
|
|
for (const key in data) {
|
|
if (data[key]) {
|
|
this.attr.productAttr.map(item => {
|
|
if (item.attrName === key) {
|
|
item.attrValue.map(subItem => {
|
|
data[key].map(dataItem => {
|
|
if (dataItem.sku === subItem.attr) {
|
|
subItem.canUsed = dataItem.canUsed
|
|
}
|
|
})
|
|
})
|
|
}
|
|
})
|
|
}
|
|
}
|
|
console.log(this.$refs);
|
|
this.$refs.attrWindow.reRender(this.attr)
|
|
}
|
|
})
|
|
},
|
|
productCon() {
|
|
getProductDetail(this.id).then(res => {
|
|
const { data } = res
|
|
this.storeInfo = {...data.storeInfo}
|
|
if(data.storeInfo.stock === 0) {
|
|
uni.showToast({
|
|
title: "产品库存不足，请选择其他商品",
|
|
icon: "none",
|
|
duration: 5000
|
|
})
|
|
return
|
|
}
|
|
this.isWenwan = data.isWenwan
|
|
this.qualifications = data.qualifications || []
|
|
// 给 attr 赋值，将请求回来的规格赋值给 attr
|
|
if (this.source !== 'pre' && this.source !== 'day' && this.source !== 'kill' && this.source !== 'spe') {
|
|
// this.$set(this.attr, 'productAttr', data.productAttr)
|
|
this.attr.productAttr = data.productAttr || []
|
|
this.productValueArr = []
|
|
for (const key in data.productValue) {
|
|
this.productValueArr.push({
|
|
attrItemkey: key,
|
|
...data.productValue[key]
|
|
})
|
|
}
|
|
// 初始化认为所有的规格都是可以选的
|
|
this.attr.productAttr.map(item => {
|
|
item.attrValue.map(subItem => {
|
|
subItem.canUsed = true
|
|
})
|
|
})
|
|
}
|
|
this.attr.defaultSku = data.defaultSku
|
|
this.attr.defaultSkuIndex = data.defaultSkuIndex
|
|
this.DefaultSelect()
|
|
// 是否单一规格
|
|
const onlyOne = Object.keys(data.productValue).length === 1
|
|
|
|
if(onlyOne) {
|
|
this.handleOk(() => this.getCartCount())
|
|
return
|
|
}
|
|
this.attr.cartAttr = !this.isOpen ? true : false
|
|
})
|
|
},
|
|
getAttrItemData(attr) {
|
|
let result = {}
|
|
this.productValueArr.map(item => {
|
|
if (item.attrItemkey === attr) {
|
|
result = item
|
|
}
|
|
})
|
|
return result
|
|
},
|
|
// 默认选中属性
|
|
DefaultSelect() {
|
|
const productAttr = this.attr.productAttr
|
|
const productAttrLength = productAttr.length
|
|
this.attr.productAttr.map((item, index) => {
|
|
item.attrValue.map((subItem, subIndex) => {
|
|
if (this.attr.defaultSkuIndex[index] === subIndex) {
|
|
subItem.check = true
|
|
} else {
|
|
subItem.check = false
|
|
}
|
|
})
|
|
})
|
|
const skuKey = (this.attr.defaultSku || []).join(',')
|
|
if (!skuKey) {
|
|
return
|
|
}
|
|
const productSelect = this.getAttrItemData(skuKey)
|
|
this.attrValue = skuKey
|
|
this.attrTxt = '已选择'
|
|
if (productSelect && productAttrLength) {
|
|
// this.$set(
|
|
// this.attr.productSelect,
|
|
// 'store_name',
|
|
// this.storeInfo.storeName
|
|
// )
|
|
// this.$set(this.attr.productSelect, 'image', productSelect.image)
|
|
// this.$set(this.attr.productSelect, 'price', productSelect.price)
|
|
// this.$set(this.attr.productSelect, 'otPrice', productSelect.otPrice)
|
|
// this.$set(this.attr.productSelect, 'stock', productSelect.stock)
|
|
// this.$set(this.attr.productSelect, 'unique', productSelect.unique)
|
|
// this.$set(this.attr.productSelect, 'earnPoints', productSelect.earnPoints)
|
|
// this.$set(this.attr.productSelect, 'cart_num', 1)
|
|
// this.$set(this, 'attrValue', value.sort().join(',')) // 作废
|
|
// this.$set(this, 'attrValue', skuKey)
|
|
// this.$set(this, 'attrTxt', '已选择')
|
|
this.attr.productSelect = {
|
|
image: productSelect.image,
|
|
price: productSelect.price,
|
|
otPrice: productSelect.otPrice,
|
|
stock: productSelect.stock,
|
|
earnPoints: productSelect.earnPoints,
|
|
unique: productSelect.unique,
|
|
store_name: this.storeInfo.storeName,
|
|
cart_num: 1
|
|
}
|
|
|
|
this.getSkuActiveStatus(skuKey)
|
|
} else if (!productSelect && productAttrLength) {
|
|
// this.$set(
|
|
// this.attr.productSelect,
|
|
// 'store_name',
|
|
// this.storeInfo.storeName
|
|
// )
|
|
// this.$set(this.attr.productSelect, 'image', this.storeInfo.image)
|
|
// this.$set(this.attr.productSelect, 'price', this.storeInfo.price)
|
|
// this.$set(this.attr.productSelect, 'otPrice', this.storeInfo.otPrice)
|
|
// this.$set(this.attr.productSelect, 'stock', 0)
|
|
// this.$set(this.attr.productSelect, 'earnPoints', 0)
|
|
// this.$set(this.attr.productSelect, 'unique', '')
|
|
// this.$set(this.attr.productSelect, 'cart_num', 0)
|
|
// this.$set(this, 'attrValue', '')
|
|
// this.$set(this, 'attrTxt', '请选择')
|
|
this.attr.productSelect = {
|
|
image: this.storeInfo.image,
|
|
price: this.storeInfo.price,
|
|
otPrice: this.storeInfo.otPrice,
|
|
stock: 0,
|
|
earnPoints: 0,
|
|
unique: '',
|
|
store_name: this.storeInfo.storeName,
|
|
cart_num: 1
|
|
}
|
|
} else if (!productSelect && !productAttrLength) {
|
|
// this.$set(
|
|
// this.attr.productSelect,
|
|
// 'store_name',
|
|
// this.storeInfo.storeName
|
|
// )
|
|
// this.$set(this.attr.productSelect, 'image', this.storeInfo.image)
|
|
// this.$set(this.attr.productSelect, 'price', this.storeInfo.price)
|
|
// this.$set(this.attr.productSelect, 'otPrice', this.storeInfo.otPrice)
|
|
// this.$set(this.attr.productSelect, 'stock', this.storeInfo.stock)
|
|
// this.$set(this.attr.productSelect, 'earnPoints', 0)
|
|
// this.$set(
|
|
// this.attr.productSelect,
|
|
// 'unique',
|
|
// this.storeInfo.unique || ''
|
|
// )
|
|
// this.$set(this.attr.productSelect, 'cart_num', 1)
|
|
this.attr.productSelect = {
|
|
image: this.storeInfo.image,
|
|
price: this.storeInfo.price,
|
|
otPrice: this.storeInfo.otPrice,
|
|
stock: this.storeInfo.stock,
|
|
earnPoints: 0,
|
|
unique: this.storeInfo.unique || '',
|
|
store_name: this.storeInfo.storeName,
|
|
cart_num: 1
|
|
}
|
|
// this.$set(this, 'attrValue', '')
|
|
// this.$set(this, 'attrTxt', '请选择')
|
|
}
|
|
},
|
|
// 点击加入购物车按钮
|
|
addToCart(item, id = 'id') {
|
|
console.log(item, 'addToCart --------- item');
|
|
this.id = item[id]
|
|
|
|
this.$nextTick(() => {
|
|
this.productCon()
|
|
})// if(this.attr.cartAttr && !this.isOpen){
|
|
// return this.isOpen = true
|
|
// }
|
|
console.log(this.$refs.attrWindow, '--222--');
|
|
|
|
|
|
},
|
|
handleOk(cb) {
|
|
const productSelect = this.getAttrItemData(this.attrValue)
|
|
// 如果有属性,没有选择,提示用户选择
|
|
const hasNo = (this.attr.productAttr.length && productSelect === undefined && this.isOpen) || productSelect.stock === 0
|
|
if (hasNo) {
|
|
uni.showToast({
|
|
title: "产品库存不足，请选择其他商品",
|
|
icon: "none",
|
|
duration: 5000
|
|
})
|
|
return
|
|
}
|
|
const q = {
|
|
productId: this.id,
|
|
cartNum: this.attr.productSelect.cart_num,
|
|
new: 0,
|
|
uniqueId: this.attr.productSelect !== undefined ? this.attr.productSelect.unique : ''
|
|
}
|
|
postCartAdd(q).then(res => {
|
|
this.isOpen = false
|
|
this.attr.cartAttr = false
|
|
this.$set(this.attr.productSelect, 'cart_num', 1)
|
|
this.cart_num = 1
|
|
uni.showToast({
|
|
title: "添加购物车成功",
|
|
icon: "none",
|
|
duration: 2000
|
|
})
|
|
cb && cb()
|
|
})
|
|
},
|
|
ChangeCartNum(changeValue) {
|
|
if(changeValue === 0) return
|
|
// changeValue:是否 加|减
|
|
// 获取当前变动属性
|
|
const productSelect = this.getAttrItemData(this.attrValue)
|
|
// 如果没有属性,赋值给商品默认库存
|
|
if (productSelect === undefined && !this.attr.productAttr.length) {
|
|
productSelect = this.attr.productSelect
|
|
}
|
|
// 无属性值即库存为0；不存在加减
|
|
if (productSelect === undefined) return
|
|
let stock = productSelect.stock || 0
|
|
let num = this.attr.productSelect
|
|
if (changeValue) {
|
|
if(changeValue > 1) {
|
|
num.cart_num = changeValue
|
|
} else {
|
|
num.cart_num++
|
|
}
|
|
if (num.cart_num > stock) {
|
|
if(stock < 1) {
|
|
this.$set(this.attr.productSelect, 'cart_num', 1)
|
|
this.$set(this, 'cart_num', 1)
|
|
} else {
|
|
this.$set(this.attr.productSelect, 'cart_num', stock)
|
|
this.$set(this, 'cart_num', stock)
|
|
}
|
|
} else {
|
|
if (num.cart_num < 1) {
|
|
this.$set(this.attr.productSelect, 'cart_num', 1)
|
|
this.$set(this, 'cart_num', 1)
|
|
} else {
|
|
this.$set(this.attr.productSelect, 'cart_num', num.cart_num)
|
|
// this.$set(this, 'cart_num', num.cart_num)
|
|
}
|
|
}
|
|
} else {
|
|
num.cart_num--
|
|
if (num.cart_num < 1) {
|
|
this.$set(this.attr.productSelect, 'cart_num', 1)
|
|
this.$set(this, 'cart_num', 1)
|
|
} else {
|
|
this.$set(this.attr.productSelect, 'cart_num', num.cart_num)
|
|
this.$set(this, 'cart_num', num.cart_num)
|
|
}
|
|
}
|
|
},
|
|
// 关闭属性
|
|
changeattr(msg) {
|
|
// 修改了规格
|
|
this.attr.cartAttr = msg
|
|
this.$set(this.attr.productSelect, 'cart_num', 1)
|
|
this.$forceUpdate()
|
|
this.isOpen = false
|
|
},
|
|
// 打开属性插件
|
|
selecAttrTap() {
|
|
this.$set(this.attr.productSelect, 'cart_num', 1)
|
|
this.attr.cartAttr = true
|
|
this.isOpen = true
|
|
this.$forceUpdate()
|
|
},
|
|
ChangeAttr(res) {
|
|
const { index, subIndex, value } = res
|
|
// 修改了规格
|
|
const productSelect = this.getAttrItemData(value)
|
|
if (productSelect) {
|
|
this.attr.productAttr[index].attrValue.map((subItem, subIdx) => {
|
|
subItem.check= false
|
|
if (subIndex === subIdx) {
|
|
subItem.check = true
|
|
}
|
|
})
|
|
this.$set(this.attr.productSelect, 'image', productSelect.image)
|
|
this.$set(this.attr.productSelect, 'price', productSelect.price)
|
|
this.$set(this.attr.productSelect, 'otPrice', productSelect.otPrice)
|
|
this.$set(this.attr.productSelect, 'stock', productSelect.stock)
|
|
this.$set(this.attr.productSelect, 'unique', productSelect.unique)
|
|
this.$set(this.attr.productSelect, 'earnPoints', productSelect.earnPoints)
|
|
this.$set(this.attr.productSelect, 'cart_num', 1)
|
|
this.$set(this, 'attrValue', value)
|
|
this.$set(this, 'attrTxt', '已选择')
|
|
this.getSkuActiveStatus(value)
|
|
} else {
|
|
this.$set(this.attr.productSelect, 'image', this.storeInfo.image)
|
|
this.$set(this.attr.productSelect, 'price', this.storeInfo.price)
|
|
this.$set(this.attr.productSelect, 'otPrice', this.storeInfo.otPrice)
|
|
this.$set(this.attr.productSelect, 'stock', 0)
|
|
this.$set(this.attr.productSelect, 'unique', '')
|
|
this.$set(this.attr.productSelect, 'earnPoints', 0)
|
|
this.$set(this.attr.productSelect, 'cart_num', 0)
|
|
this.$set(this, 'attrValue', '')
|
|
this.$set(this, 'attrTxt', '请选择')
|
|
}
|
|
},
|
|
changeFun(opt) {
|
|
if (typeof opt !== 'object') opt = {}
|
|
let action = opt.action || ''
|
|
let value = opt.value === undefined ? '' : opt.value
|
|
this.cart_num = 1
|
|
this[action] && this[action](value)
|
|
},
|
|
// queryCartCount (isAnima) {
|
|
// const isLogin = this.isLogin
|
|
// if (isLogin) {
|
|
// getCartCount({
|
|
// numType: 0
|
|
// }).then(res => {
|
|
// this.CartCount = res.data.count
|
|
// //加入购物车后重置属性
|
|
// if (isAnima) {
|
|
// this.animated = true
|
|
// setTimeout(function () {
|
|
// this.animated = false
|
|
// }, 500)
|
|
// }
|
|
// })
|
|
// }
|
|
// },
|
|
}
|
|
} |