商品规格设置 - 完善商品信息，提升用户体验
<template>
<view class='flex-col page'>
<view class='flex-row justify-between group'>
<text class='font_1'>设置规格</text>
<text class='font_2 text'>规格类型排序</text>
</view>
<view class='flex-col section space-y-18'>
<view class='flex-row justify-between items-center group_2'>
<view class='flex-row items-center space-x-8'>
<text class='font_3'>款式</text>
<image class='shrink-0 image'
src='https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/640728685a7e3f031012ae38/648fe0ea54fe0000116a1654/16871508408832332958.png' />
<text class='font_4 text_2'>添加图片</text>
</view>
<view class='flex-row space-x-6'>
<text class='font_2'>排序</text>
<text class='font_2'>删除</text>
</view>
</view>
<view class='flex-col space-y-8'>
<view class='flex-row items-center space-x-8' v-for='(item, index) in inputs' :key='index'>
<image class='shrink-0 image_2'
src='https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/640728685a7e3f031012ae38/648fe0ea54fe0000116a1654/16871508408942998222.png' />
<input placeholder='请输入参数名' v-model='item.name' class='flex-auto section_2'
@confirm='addInput(index)' />
<image class='shrink-0 image_3'
src='https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/640728685a7e3f031012ae38/648fe0ea54fe0000116a1654/16871508408965531102.png' />
</view>
<pre><code> </view>
</view>
<view class='flex-col section space-y-18' v-for='(item, index) in adds' :key='index'>
<view class='flex-row justify-between items-center group_2'>
<view class='flex-row items-center space-x-8'>
<text class='font_3'>{{item.name}}</text>
<image class='shrink-0 image'
src='https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/640728685a7e3f031012ae38/648fe0ea54fe0000116a1654/16871508408832332958.png' />
<text class='font_4 text_2'>添加图片</text>
</view>
<view class='flex-row space-x-6'>
<text class='font_2'>排序</text>
<text class='font_2'>删除</text>
</view>
</view>
<view class='flex-col space-y-8'>
<view class='flex-row items-center space-x-8' v-for='(info, inx) in inputs[item.index].values'
:key='inx'>
<image class='shrink-0 image_2'
src='https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/640728685a7e3f031012ae38/648fe0ea54fe0000116a1654/16871508408942998222.png' />
<input placeholder='请输入参数名' v-model='info.name' class='flex-auto section_2'
@confirm='addInputt(item.index,inx)' />
<image class='shrink-0 image_3'
src='https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/640728685a7e3f031012ae38/648fe0ea54fe0000116a1654/16871508408965531102.png' />
</view>
</view>
</view>
<view class='flex-row justify-between group_3 view'>
<text class='font_1'>设置价格与库存</text>
<text class='font_2 text_3'>批量设置</text>
</view>
<view class='flex-col group_4'>
<view class='flex-col section_3'>
<view class='flex-row group_3 space-x-12'>
<text class='font_3'>套餐一</text>
<text class='font_3'>套餐二</text>
<text class='font_3'>套餐二</text>
</view>
<view class='flex-col list'>
<view class='flex-col list-item' v-for='(brand, index) in inputs[0].values' :key='index'>
<view class='flex-col'>
<view class='flex-row justify-between items-center group_5'>
<view class='flex-row items-center space-x-8'>
<image class='shrink-0 image_4'
src='https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/640728685a7e3f031012ae38/648fe0ea54fe0000116a1654/16871508408990824311.png' />
<text class='font_4'>{{brand.name}}</text>
</view>
<view class='flex-row items-center'>
<text class='font_5'>待设置</text>
<image class='shrink-0 image_5'
src='https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/640728685a7e3f031012ae38/648fe0ea54fe0000116a1654/16871508409002854272.png' />
</view>
</view>
<view class='flex-row justify-between items-center section_5'>
<text class='font_4'>单价：1525.20</text>
<text class='font_4'>库存数：356</text>
</view>
</view>
</view>
</view>
<view class='flex-col group_9 space-y-137'>
<view class='flex-col justify-start items-center button'><text class='font_6'>确定</text></view>
<view class='flex-col group_10 space-y-14'>
<view class='flex-col justify-start items-center image-wrapper'>
<image class='image_6'
src='https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/640728685a7e3f031012ae38/648fe0ea54fe0000116a1654/16871508408899544527.png' />
</view>
<text class='self-center font_4'>套餐一</text>
</view>
</view>
<view class='flex-col section_6'>
<view class='flex-row items-center group_11 space-x-12'>
<view class='group_12'>
<text class='font_7'>拼单价</text>
<text class='font_8'>*</text>
</view>
<view class='flex-auto section_7'></view>
</view>
<view class='flex-col justify-start items-start text-wrapper'>
<text class='font_3 text_4'>系统将根据拼单价自动计算出单买价和参考价</text>
</view>
<view class='flex-row items-center group_13 space-x-12'>
<view class='flex-col items-center shrink-0 space-y-28'>
<view class='group_15'>
<text class='font_7'>库存数</text>
<text class='font_8'>*</text>
</view>
<view class='group_16'>
<text class='font_7'>商品码</text>
<text class='font_8'>*</text>
</view>
</view>
<view class='flex-col flex-auto group_14 space-y-8'>
<view class='section_8'></view>
<view class='section_8'></view>
</view>
</view>
</view>
</view>
<view class='flex-col justify-start items-center self-center button_2'><text class='font_6'>确定</text></view>
</view>
</code></pre>
</template>
<script>
export default {
components: {},
data() {
return {
list_K4owPVR4: [null, null, null],
inputs: [{
name: '',
values: [{
name: '',
values: [],
price: ''
}],
price: ''
}],
adds: [],
};
},
methods: {
addInput(index) {
console.log(index)
if (index === this.inputs.length - 1) {
this.inputs.push({
name: '',
values: [{
name: '',
values: [],
price: ''
}],
price: ''
})
this.adds.push({
index: index,
name: this.inputs[index].name
})
}
},
addInputt(id,index) {
if (index === this.inputs[id].values.length - 1) {
this.inputs[id].values.push({ name: '', values: [], price: '' })
//this.endadds.push({ value: this.inputss[index].value})
}
},
}
};
</script>
原文地址: https://www.cveoy.top/t/topic/oLm0 著作权归作者所有。请勿转载和采集!