184 lines
4.3 KiB
Vue
184 lines
4.3 KiB
Vue
<template>
|
||
<view>
|
||
<u-popup v-model="showPop" mode="center" :border-radius="16" @close="close">
|
||
<view class="bg-white spec">
|
||
<view class="shop-title bold-600 u-padding-left-40 w-full">商品标题</view>
|
||
<scroll-view scroll-y="true" scroll-with-animation="true" style="height: 480rpx;">
|
||
<view class="u-m-l-40">
|
||
<view v-for="(item, index1) in specBck" :key="index1">
|
||
<view class="attr nr u-m-t-20 u-m-b-20">{{ item.name }}</view>
|
||
<view class="row wrap">
|
||
<view
|
||
v-for="(attr, index2) in item.spec_value" :key="index2"
|
||
@click="chooseSpec(item, index1, index2, attr)"
|
||
:class="item.spec_value[index2].is_select ? 'attr-list active' : 'attr-list'"
|
||
>
|
||
{{ attr.value }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<view class="mt20">
|
||
<view class="u-m-l-40 u-flex u-flex-wrap">已选规格：
|
||
<view v-for="(item, index) in selectedSpec" :key="index" class="current">
|
||
{{ item.name }}
|
||
</view>
|
||
</view>
|
||
<view class="row u-row-center mt20 u-p-b-20">
|
||
<view class="w-40 mr10">
|
||
<u-button @click="close" hover-class="none" :customStyle="{color: themeColor, border: '1px solid ' + themeColor, padding: '16rpx 0'}" :plain="true" :hair-line="false" shape="circle">取消</u-button>
|
||
</view>
|
||
<view class="w-40 ml10">
|
||
<u-button @click="confirm" hover-class="none" :customStyle="{backgroundColor: themeColor, color: '#fff', border: 'none', padding: '16rpx 0'}" :hair-line="false" shape="circle">确定</u-button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "shop-spec",
|
||
props: {
|
||
value: {
|
||
type: Boolean,
|
||
required: true
|
||
},
|
||
spec: {
|
||
type: [Array, Object],
|
||
default: () => [{}]
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
mobile: '',
|
||
specBck: [],
|
||
selectedSpec: [],
|
||
};
|
||
},
|
||
methods: {
|
||
// 关闭弹窗
|
||
close() {
|
||
this.showPop = false
|
||
this.$emit('close')
|
||
},
|
||
|
||
// 选择规格
|
||
chooseSpec(item, index1, index2, attr) {
|
||
if (item.name == '辣度') {
|
||
// 规格-单选
|
||
item.spec_value.map((i, k) => {
|
||
if(k === index2) {
|
||
if (item.spec_value[index2].is_select) {
|
||
this.$set(i, 'is_select', false)
|
||
this.selectedSpec = this.selectedSpec.filter(it => it.id !== item.spec_value[index2].id)
|
||
} else {
|
||
this.$set(i, 'is_select', true)
|
||
this.selectedSpec.push({
|
||
id: item.spec_value[index2].id,
|
||
name: item.spec_value[index2].value
|
||
})
|
||
}
|
||
} else {
|
||
this.$set(i, 'is_select', false)
|
||
this.selectedSpec.map((se, index) => {
|
||
if (se.id == i.id) {
|
||
this.selectedSpec.splice(index, 1)
|
||
}
|
||
})
|
||
}
|
||
})
|
||
} else {
|
||
// 规格-复选
|
||
if (item.spec_value[index2].is_select) {
|
||
this.$set(item.spec_value[index2], 'is_select', false)
|
||
this.selectedSpec = this.selectedSpec.filter(i => i.id !== item.spec_value[index2].id)
|
||
} else {
|
||
// 选中
|
||
this.$set(item.spec_value[index2], 'is_select', true)
|
||
this.selectedSpec.push({
|
||
id: item.spec_value[index2].id,
|
||
name: item.spec_value[index2].value
|
||
})
|
||
}
|
||
}
|
||
},
|
||
|
||
// 确认选择的规格
|
||
confirm() {
|
||
this.showPop = false
|
||
this.$emit('confirm', {
|
||
spec: this.selectedSpec
|
||
})
|
||
}
|
||
},
|
||
computed: {
|
||
showPop: {
|
||
get() {
|
||
return this.value
|
||
},
|
||
set(val) {
|
||
this.$emit('input', val)
|
||
}
|
||
}
|
||
},
|
||
watch: {
|
||
spec(val) {
|
||
// 创建副本
|
||
this.specBck = val
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss">
|
||
.spec {
|
||
width: 600rpx;
|
||
|
||
.shop-title {
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
font-size: 36rpx;
|
||
background-color: #FAFAFA;
|
||
}
|
||
|
||
.attr {
|
||
color: #212425;
|
||
}
|
||
|
||
.attr-list {
|
||
color: #37393B;
|
||
background-color: #F9F9F9;
|
||
margin: 0 10rpx 10rpx 0;
|
||
border-radius: 16rpx;
|
||
border: 2rpx solid #F6F6F7;
|
||
padding: 20rpx;
|
||
}
|
||
|
||
.active {
|
||
border: 2rpx solid #254062;
|
||
color: #254062;
|
||
}
|
||
|
||
.w-40 {
|
||
width: 40%;
|
||
}
|
||
|
||
.current:first-child {
|
||
margin-left: 0;
|
||
}
|
||
|
||
.current {
|
||
color: #212425;
|
||
background-color: #F9F9F9;
|
||
margin: 0 10rpx 10rpx 0;
|
||
border-radius: 16rpx;
|
||
border: 2rpx solid #F6F6F7;
|
||
padding: 20rpx;
|
||
}
|
||
}
|
||
</style> |