代码提交
This commit is contained in:
黄少君
@ -1,144 +1,251 @@
|
||||
<template>
|
||||
<uv-popup
|
||||
ref="popupRef"
|
||||
mode="bottom"
|
||||
:style="{ height: '50%' }"
|
||||
round="round"
|
||||
<Popup
|
||||
ref="popupRef"
|
||||
:showCloseable="false"
|
||||
@close="emit('close')"
|
||||
>
|
||||
<view
|
||||
class="goodAttrSelect"
|
||||
v-if="storeInfo"
|
||||
class="goodAttrSelect"
|
||||
>
|
||||
<view class="goodAttrSelect-goods">
|
||||
<goods
|
||||
list
|
||||
min
|
||||
:storeName="storeInfo.storeName"
|
||||
:price="storeInfo.price"
|
||||
surplus="200"
|
||||
:data="storeInfo"
|
||||
/>
|
||||
<view
|
||||
class="goodAttrSelect-goods"
|
||||
v-if="curAttr"
|
||||
>
|
||||
<uv-image
|
||||
class="attr-image"
|
||||
:src="curAttr.image || detailData.storeInfo.image"
|
||||
width="150rpx"
|
||||
height="150rpx"
|
||||
></uv-image>
|
||||
<view class="attr-info">
|
||||
<view class="name">
|
||||
{{ storeInfo.storeName }}
|
||||
</view>
|
||||
<view class="attr-info-bottom">
|
||||
<view class="price">¥{{ curAttr.price }}</view>
|
||||
<view class="stock">库存：{{ curAttr.stock }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<div class="line"></div>
|
||||
<view class="goodAttrSelect-attr row">
|
||||
<view
|
||||
class="goodAttrSelect-attr row"
|
||||
v-if="curAttr"
|
||||
>
|
||||
<view class="goodAttrSelect-attr-title">
|
||||
数量
|
||||
</view>
|
||||
<view class="goodAttrSelect-attr-content">
|
||||
<uv-number-box
|
||||
v-model="storeNum"
|
||||
min="1"
|
||||
/>
|
||||
<!-- cart number -->
|
||||
<view
|
||||
class="cart-num flex flex-ai__center flex-jc__sb"
|
||||
@click.stop=""
|
||||
>
|
||||
<view
|
||||
class="button"
|
||||
@click="handleCartNumberChange(curAttr,'minus')"
|
||||
>
|
||||
<uv-icon
|
||||
name="minus"
|
||||
color="#333"
|
||||
size="12"
|
||||
></uv-icon>
|
||||
</view>
|
||||
<view class="input">
|
||||
<input
|
||||
type="number"
|
||||
inputmode="numeric"
|
||||
v-model="storeNum"
|
||||
@blur="(e)=>handleCartNumberInputChange(e,curAttr)"
|
||||
>
|
||||
</view>
|
||||
<view
|
||||
class="button"
|
||||
@click="handleCartNumberChange(curAttr,'plus')"
|
||||
>
|
||||
<uv-icon
|
||||
name="plus"
|
||||
color="#333"
|
||||
size="12"
|
||||
></uv-icon>
|
||||
</view>
|
||||
</view>
|
||||
<!-- <uv-number-box
|
||||
v-model="storeNum"
|
||||
min="1"
|
||||
:max="curAttr.stock"
|
||||
></uv-number-box>-->
|
||||
</view>
|
||||
</view>
|
||||
<div class="line"></div>
|
||||
|
||||
<view
|
||||
class="goodAttrSelect-attr"
|
||||
v-for="(item, index) in productAttr"
|
||||
:key="index"
|
||||
class="goodAttrSelect-attr"
|
||||
v-for="(item, index) in productAttr"
|
||||
:key="index"
|
||||
>
|
||||
<view class="goodAttrSelect-attr-title">
|
||||
{{ item.attrName }}
|
||||
</view>
|
||||
<view class="goodAttrSelect-attr-content">
|
||||
<space>
|
||||
<space wrap="warp">
|
||||
<view
|
||||
:class="{ attr: true, check: select[item.attrName] == attr.attr }"
|
||||
v-for="(attr, attrIndex) in item.attrValue"
|
||||
:key="attrIndex"
|
||||
@tap="handleSelectAttr(item.attrName, attr)"
|
||||
>{{ attr.attr }}</view>
|
||||
:class="{ attr: true, check: selectedAttr[index] === attr }"
|
||||
v-for="(attr, attrIndex) in item.attrValueArr"
|
||||
:key="attrIndex"
|
||||
@tap="handleSelectAttr(index, attr)"
|
||||
>{{ attr }}
|
||||
</view>
|
||||
</space>
|
||||
</view>
|
||||
</view>
|
||||
<view class="goodAttrSelect-action">
|
||||
<uv-button
|
||||
round
|
||||
block
|
||||
type="primary"
|
||||
@tap="handleSubmit"
|
||||
round
|
||||
block
|
||||
type="primary"
|
||||
@tap="handleSubmit"
|
||||
>
|
||||
确定
|
||||
</uv-button>
|
||||
</view>
|
||||
</view>
|
||||
</uv-popup>
|
||||
</Popup>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, watch } from 'vue';
|
||||
import { getProductDetail, getProductAddCollect, getProductDelCollect } from '@/api/product'
|
||||
import { ref, unref } from 'vue';
|
||||
import { getProductDetail } from '@/api/product'
|
||||
import { useInterface } from "@/hooks/useInterface";
|
||||
import Popup from '@/components/Popup/index.vue';
|
||||
|
||||
const props = defineProps(["id"])
|
||||
|
||||
const emit = defineEmits(['onSelect', 'submit'])
|
||||
const emit = defineEmits(['onSelect', 'submit', 'close'])
|
||||
|
||||
const popupRef = ref()
|
||||
const select = ref({})
|
||||
const selectedAttr = ref([])
|
||||
const visible = ref(false)
|
||||
const detailData = ref(null)
|
||||
const storeInfo = ref(null)
|
||||
const productAttr = ref(null)
|
||||
const productValue = ref(null)
|
||||
const storeNum = ref(1)
|
||||
const curAttr = ref(null)
|
||||
const defaultSelectAttrStr = ref(undefined)
|
||||
|
||||
const selectAttrPanel = ref(false)
|
||||
|
||||
const handleGetDetail = async (id) => {
|
||||
|
||||
const detail = await getProductDetail(id)
|
||||
if (detail) {
|
||||
detailData.value = detail
|
||||
storeInfo.value = detail.storeInfo
|
||||
productAttr.value = detail.productAttr
|
||||
productValue.value = detail.productValue
|
||||
let attr = {}
|
||||
detail.productAttr.forEach(item => {
|
||||
attr[item.attrName] = ''
|
||||
})
|
||||
select.value = attr
|
||||
if (!defaultSelectAttrStr.value) {
|
||||
// 设置默认选中
|
||||
let attr = []
|
||||
detail.productAttr.forEach((item, i) => {
|
||||
attr[i] = item.attrValueArr[0]
|
||||
})
|
||||
selectedAttr.value = attr
|
||||
let selectedAttrStr = selectedAttr.value.join(',')
|
||||
curAttr.value = productValue.value[selectedAttrStr]
|
||||
} else {
|
||||
selectedAttr.value = unref(defaultSelectAttrStr).split(',')
|
||||
curAttr.value = productValue.value[defaultSelectAttrStr.value]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const handleSelectAttr = (attr, value) => {
|
||||
select.value[attr] = value.attr
|
||||
const handleSelectAttr = (index, attr) => {
|
||||
selectedAttr.value[index] = attr
|
||||
let selectedAttrStr = selectedAttr.value.join(',')
|
||||
curAttr.value = productValue.value[selectedAttrStr]
|
||||
}
|
||||
|
||||
const handleSubmit = () => {
|
||||
// let value = []
|
||||
// productAttr.value.map(item => {
|
||||
// value.push(selectedAttr.value[item.attrName] || '')
|
||||
// })
|
||||
|
||||
|
||||
let value = []
|
||||
productAttr.value.map(item => {
|
||||
value.push(select.value[item.attrName] || '')
|
||||
})
|
||||
|
||||
if (value.includes('')) {
|
||||
uni.showToast({
|
||||
title: '请选择规格',
|
||||
icon: 'none',
|
||||
duration: 2000,
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
|
||||
|
||||
emit('select', {
|
||||
store: productValue.value[value.toString()],
|
||||
// if (value.includes('')) {
|
||||
// uni.showToast({
|
||||
// title: '请选择规格',
|
||||
// icon: 'none',
|
||||
// duration: 2000,
|
||||
// })
|
||||
// return
|
||||
// }
|
||||
let selectedAttrStr = selectedAttr.value.join(',')
|
||||
emit('submit', {
|
||||
store: productValue.value[selectedAttrStr],
|
||||
num: storeNum.value
|
||||
})
|
||||
emit('select', {
|
||||
store: productValue.value[selectedAttrStr],
|
||||
num: storeNum.value
|
||||
})
|
||||
emit('onSelect', {
|
||||
store: productValue.value[selectedAttrStr],
|
||||
num: storeNum.value
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
const open = () => {
|
||||
popupRef.value.open()
|
||||
const {toast} = useInterface()
|
||||
|
||||
/**
|
||||
* 用户手动输入改变数量
|
||||
* @param e
|
||||
* @param item
|
||||
* @returns {*}
|
||||
*/
|
||||
function handleCartNumberInputChange(e, item) {
|
||||
const value = Number(e.detail.value)
|
||||
if (value <= 0) {
|
||||
storeNum.value = 1
|
||||
toast({title: '至少选一件哦~'})
|
||||
}
|
||||
if (value > item.stock) {
|
||||
storeNum.value = item.stock
|
||||
toast({title: '超出库存啦~'})
|
||||
}
|
||||
storeNum.value = value
|
||||
}
|
||||
|
||||
/**
|
||||
* 用户点击购物车+-改变数量
|
||||
* @param item
|
||||
* @param type
|
||||
* @returns {*}
|
||||
*/
|
||||
function handleCartNumberChange(item, type = 'plus') {
|
||||
if (type === 'plus') {
|
||||
// +
|
||||
if (storeNum.value + 1 > item.stock) return toast({title: '超出库存啦~'})
|
||||
storeNum.value += 1
|
||||
} else {
|
||||
// -
|
||||
if (storeNum.value - 1 <= 0) return toast({title: '至少选一件哦~'})
|
||||
storeNum.value -= 1
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const open = (cartNum = 1, selectAttrStr = undefined) => {
|
||||
defaultSelectAttrStr.value = selectAttrStr
|
||||
storeNum.value = cartNum
|
||||
handleGetDetail(props.id)
|
||||
popupRef.value.show()
|
||||
}
|
||||
|
||||
const close = () => {
|
||||
popupRef.value.close()
|
||||
emit('close')
|
||||
}
|
||||
|
||||
|
||||
@ -148,12 +255,47 @@ defineExpose({
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
<style lang="scss">
|
||||
.goodAttrSelect {
|
||||
height: 100%;
|
||||
|
||||
&-goods {
|
||||
padding: 20rpx 20rpx;
|
||||
padding: 40rpx 30rpx;
|
||||
display: flex;
|
||||
|
||||
.attr-image {
|
||||
|
||||
}
|
||||
|
||||
.attr-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin-left: 30rpx;
|
||||
.name {
|
||||
font-size: 28rpx;
|
||||
line-height: 40rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
&-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.price {
|
||||
font-size: 30rpx;
|
||||
line-height: 42rpx;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.stock {
|
||||
font-size: 24rpx;
|
||||
line-height: 42rpx;
|
||||
color: #666666;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-action {
|
||||
@ -178,7 +320,8 @@ defineExpose({
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
&-content {}
|
||||
&-content {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -191,13 +334,49 @@ defineExpose({
|
||||
height: 68rpx;
|
||||
border: 1rpx solid #333333;
|
||||
padding: 0 20rpx;
|
||||
line-height: 68rpx;
|
||||
|
||||
font-size: 28rpx;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
&.check {
|
||||
background: #333333;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.cart-num {
|
||||
font-size: 24rpx;
|
||||
|
||||
.input {
|
||||
width: 120rpx;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
font-size: 32rpx;
|
||||
width: 34rpx;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 5rpx;
|
||||
border: 2rpx solid #cccccc;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all .3s;
|
||||
|
||||
&:active {
|
||||
scale: 1.2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user