pull/7/head
parent
72472034f9
commit
ac634dfaf8
10 changed files with 732 additions and 39 deletions
@ -0,0 +1,172 @@ |
||||
<!-- 多列选择器 --> |
||||
<template> |
||||
<picker mode="multiSelector" @columnchange="handleColumnChange" @change="pickerChange" :value="multiIndex" :range="multiArray" :range-key="rangekey"> |
||||
<view class="uni-input space-between" hover-class="hover-color"> |
||||
<slot name="before"></slot> |
||||
<text class="input-content ellipsis" :class="name?'':'color-placeholder'">{{name?name:placeholder}}</text> |
||||
<slot name="after"></slot> |
||||
</view> |
||||
</picker> |
||||
</template> |
||||
<script> |
||||
export default { |
||||
props: { |
||||
value: { default: ''}, // 必须要使用value |
||||
list: {type: Array, default: [] }, |
||||
rangekey: { default: 'name' }, // 对应name取值 |
||||
childkey: { default: 'children' }, // 子集 |
||||
code: { default: 'code' }, // 对应value取值 |
||||
pidkey: { default: 'pid' }, // 对应父id取值 |
||||
placeholder: { default: '请选择' }, |
||||
emitPath: { default: false, type: Boolean }, // 是否子父级关联 ，是的时候返回的是逗号分隔的父子code |
||||
level: { default: 3, type: Number } // 列数 2或者3 |
||||
}, |
||||
data() { |
||||
return { |
||||
multiArray: [[],], |
||||
multiIndex: [0, 0, 0], |
||||
name: "", |
||||
} |
||||
}, |
||||
methods: { |
||||
handleColumnChange(e) { |
||||
|
||||
let columnindex = e.detail.value; // 拖动列索引 |
||||
switch (e.detail.column) { |
||||
case 0: //拖动第1列 |
||||
|
||||
// 第二级 |
||||
let arr1 = this.multiArray[0]; |
||||
this.multiArray[1] = arr1[columnindex][this.childkey]||[]; |
||||
|
||||
if(this.level === 3) { |
||||
// 第三级 |
||||
let arr2 = this.multiArray[1]; |
||||
this.multiArray[2] = arr2[0][this.childkey]||[]; |
||||
} |
||||
|
||||
this.multiIndex.splice(0, 1, columnindex) |
||||
this.multiIndex.splice(1, 1, 0) |
||||
this.multiIndex.splice(2, 1, 0) |
||||
break |
||||
case 1: //拖动第2列 |
||||
if (this.level === 3) { |
||||
// 第三级 |
||||
let arr3 = this.multiArray[1]; |
||||
this.multiArray[2] = arr3[columnindex][this.childkey]||[]; |
||||
} |
||||
|
||||
this.multiIndex.splice(1, 1, columnindex) |
||||
this.multiIndex.splice(2, 1, 0) |
||||
break |
||||
} |
||||
|
||||
}, |
||||
// |
||||
pickerChange(e) { |
||||
let multiIndex = e.detail.value; |
||||
if(this.emitPath) { |
||||
let codeArr = [], nameArr = []; |
||||
for(let i = 0; i < multiIndex.length; i++ ) { |
||||
if(this.multiArray[i] && this.multiArray[i][multiIndex[i]]) { |
||||
codeArr.push(this.multiArray[i][multiIndex[i]][this.code]); |
||||
nameArr.push(this.multiArray[i][multiIndex[i]][this.rangekey]); |
||||
} |
||||
} |
||||
let code = codeArr.join(','); |
||||
this.name = nameArr.join('/'); |
||||
console.log('code1',code); |
||||
this.$emit('input', code) |
||||
}else { |
||||
|
||||
let curArr = this.multiArray[2], code=''; |
||||
if(curArr && curArr.length) { |
||||
code = curArr[multiIndex[2]][this.code]; |
||||
this.name = curArr[multiIndex[2]][this.rangekey]; |
||||
}else { |
||||
curArr = this.multiArray[1] |
||||
code = curArr[multiIndex[1]][this.code]; |
||||
this.name = curArr[multiIndex[1]][this.rangekey]; |
||||
} |
||||
|
||||
console.log('code2',code); |
||||
this.$emit('input', code) |
||||
} |
||||
}, |
||||
// 初始化级联数据 |
||||
dataInit() { |
||||
// 第一级 |
||||
this.multiArray[0] = this.list; |
||||
// 第二级 |
||||
let arr1 = this.multiArray[0]; |
||||
this.multiArray.push(arr1[this.multiIndex[0]][this.childkey]||[]); |
||||
if(this.level === 3) { |
||||
// 第三级 |
||||
let arr2 = this.multiArray[1]; |
||||
this.multiArray.push(arr2[this.multiIndex[1]][this.childkey]||[]); |
||||
|
||||
} |
||||
}, |
||||
curDataFind (data, code) { |
||||
let result; |
||||
if (!data) { |
||||
data = this.list; |
||||
} |
||||
for (var i = 0; i < data.length; i++) { |
||||
let item = data[i] |
||||
if (result) { |
||||
return result; |
||||
} |
||||
if (Number(item[this.code]) === code) { |
||||
result = item; |
||||
break; |
||||
} else if (item[this.childkey] && item[this.childkey].length > 0) { |
||||
result = this.curDataFind(item[this.childkey], code); |
||||
} |
||||
} |
||||
return result; |
||||
}, |
||||
initName() { |
||||
if(this.list.length && this.value) { |
||||
if(this.emitPath) { |
||||
let nameArr = [], codeArr = this.value.split(','); |
||||
for(let i = 0; i < codeArr.length; i++ ) { |
||||
codeArr[i] = codeArr[i] - 0; |
||||
} |
||||
for(let i = 0; i < codeArr.length; i++ ) { |
||||
let item = this.curDataFind(this.list, codeArr[i]); |
||||
nameArr.push(item[this.rangekey]); |
||||
} |
||||
this.name = nameArr.join('/'); |
||||
} else { |
||||
let item = this.curDataFind(this.list, this.value); |
||||
this.name = item[this.rangekey]; |
||||
} |
||||
}else { |
||||
this.name = ''; |
||||
} |
||||
} |
||||
}, |
||||
watch: { |
||||
list: { |
||||
immediate: true, |
||||
handler(val) { |
||||
console.log(val) |
||||
this.dataInit(); |
||||
this.initName(); |
||||
} |
||||
}, |
||||
value: { |
||||
// immediate: true, |
||||
handler(val) { |
||||
console.log(val) |
||||
this.initName(); |
||||
} |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,281 @@ |
||||
<template> |
||||
<view class="container"> |
||||
<cu-custom class="main-totextbar bg-main-oil" :isBack="true" bgColor="bg-main-oil"> |
||||
<block slot="backText">返回</block> |
||||
<block slot="content">新增商品</block> |
||||
</cu-custom> |
||||
<view id="chooseType" :class="currentBoxId == 'chooseType' ? 'show' : 'hidden'"> |
||||
<uni-forms ref="productForm" :modelValue="productDate" label-width="200rpx"> |
||||
<uni-forms-item label="商品分类:" name="name"> |
||||
<mulpicker |
||||
v-model="productDate.demandRegion" |
||||
:list="productList" |
||||
rangekey="name" |
||||
code="id" |
||||
pidkey="pid" |
||||
childkey="city" |
||||
:emitPath="true" |
||||
:level="2" |
||||
:placeholder="'选择商品分类'" |
||||
/> |
||||
<uni-icons color="#666666" type="right" size="22" style="position: absolute;right: 0;top: 10rpx;"></uni-icons> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="商品名称:" name="age"> |
||||
<input type="text" v-model="productDate.age" placeholder="请输入" /> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="关键词:" name="age"> |
||||
<input type="text" v-model="productDate.age" placeholder="请输入" /> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="商品品牌:" name="age"> |
||||
<input type="text" v-model="productDate.age" placeholder="请输入" /> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="商品售价:" name="age"> |
||||
<input type="text" v-model="productDate.age" placeholder="请输入" /> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="商品上架:" name="age"> |
||||
<switch color="#FE0606" checked style="transform:scale(0.7)" /> |
||||
</uni-forms-item> |
||||
<uni-forms-item label="商品推荐:" name="age"> |
||||
<view class='checkbox-con'> |
||||
<radio-group @change="checkboxChange"> |
||||
<label :class="item.checked?'checkbox checked':'checkbox'" @click="checkbox(index)" v-for="(item, index) in radioItem" :key="item.value"> |
||||
<checkbox :value="item.value" :checked="item.checked"/>{{item.name}} |
||||
</label> |
||||
</radio-group> |
||||
</view> |
||||
</uni-forms-item> |
||||
</uni-forms> |
||||
<view class="buttons"> |
||||
<view @click="closed">取消</view> |
||||
<view id="next" @click="changeBox">下一步</view> |
||||
</view> |
||||
</view> |
||||
|
||||
|
||||
<view id="instruction" :class="currentBoxId == 'instruction' ? 'show' : 'hidden'"> |
||||
<productAddStep2 /> |
||||
<view class="buttons"> |
||||
<view id="previous" @click="changeBox">上一步</view> |
||||
<view @click="addCompleted">完成</view> |
||||
</view> |
||||
</view> |
||||
|
||||
|
||||
|
||||
|
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
import serve from '@/api/packageIntegral/orderList.js' |
||||
import mulpicker from '@/packageIntegral/components/mulpicker.vue' |
||||
import productAddStep2 from '@/packageIntegral/productAddition/productAddStep2.vue' |
||||
export default { |
||||
components: { |
||||
mulpicker, |
||||
productAddStep2 |
||||
}, |
||||
data() { |
||||
return { |
||||
currentBoxId: 'instruction', //当前显示的view的id |
||||
isBoxShow: false, |
||||
productDate:{}, |
||||
productList:[{ |
||||
"name": "北京市", |
||||
'id':'0', |
||||
"city": [{ |
||||
'name':"东城区", |
||||
'id':'1', |
||||
},{ |
||||
'name':"西城区", |
||||
'id':'2', |
||||
},{ |
||||
'name':"崇文区", |
||||
'id':'3', |
||||
},{ |
||||
'name':"宣武区", |
||||
'id':'4', |
||||
},{ |
||||
'name':"朝阳区", |
||||
'id':'5', |
||||
} |
||||
] |
||||
}], |
||||
radioItem:[{ |
||||
name: '新品', |
||||
checked: true |
||||
}, { |
||||
name: '推荐', |
||||
checked: false |
||||
}] |
||||
} |
||||
}, |
||||
|
||||
onLoad(options) { |
||||
// this.get(options.orderId) |
||||
}, |
||||
methods: { |
||||
checkbox (e) { |
||||
console.log(e) |
||||
var index = e;//获取当前点击的下标 |
||||
var checkboxArr = this.radioItem;//选项集合 |
||||
if (checkboxArr[index].checked) return;//如果点击的当前已选中则返回 |
||||
checkboxArr.forEach(item => { |
||||
item.checked = false |
||||
}) |
||||
checkboxArr[index].checked = true;//改变当前选中的checked值 |
||||
// this.setData({ |
||||
// checkboxArr: checkboxArr |
||||
// }); |
||||
|
||||
}, |
||||
checkboxChange (e) { |
||||
var checkValue = e.detail.value; |
||||
// this.setData({ |
||||
// checkValue: checkValue |
||||
// }); |
||||
}, |
||||
changeBox(e){ |
||||
let currentFlag = e.currentTarget.id; |
||||
switch(currentFlag){ |
||||
case 'next': |
||||
this.currentBoxId = 'instruction' |
||||
break; |
||||
case 'previous': |
||||
this.currentBoxId = 'chooseType' |
||||
break; |
||||
default: |
||||
this.currentBoxId = 'viewInstruction' |
||||
break; |
||||
} |
||||
}, |
||||
picker2(e){ |
||||
console.log(e.detail.value) |
||||
this.productDate.value = e.detail.value |
||||
}, |
||||
closed(){ |
||||
uni.navigateTo({ |
||||
url: '/pages/index/index' |
||||
}) |
||||
}, |
||||
addCompleted(){ |
||||
|
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
|
||||
.fadeBox{ |
||||
width: 100%; |
||||
margin-bottom: 20rpx; |
||||
} |
||||
#chooseType{ |
||||
padding: 30rpx; |
||||
|
||||
mulpicker{ |
||||
height: 72rpx; |
||||
line-height: 72rpx; |
||||
} |
||||
/deep/ .uni-forms{ |
||||
width: 100%; |
||||
} |
||||
/deep/ .uni-forms-item{ |
||||
width: 100%; |
||||
} |
||||
|
||||
/deep/ .uni-forms-item__label{ |
||||
color: #333 !important; |
||||
font-size: 30rpx; |
||||
font-weight: 700; |
||||
} |
||||
/deep/ .uni-forms-item__content{ |
||||
width: 100%; |
||||
input{ |
||||
height: 72rpx; |
||||
line-height: 72rpx; |
||||
} |
||||
} |
||||
|
||||
switch{ |
||||
margin-top: 9rpx; |
||||
} |
||||
switch::before{ |
||||
content: ''; |
||||
} |
||||
switch::after{ |
||||
content: ''; |
||||
} |
||||
} |
||||
.checkbox-con{ |
||||
margin-top: 40rpx; |
||||
text-align: center; |
||||
position: relative; |
||||
} |
||||
.checkbox{ |
||||
width: 180rpx; |
||||
height: 76rpx; |
||||
line-height: 76rpx; |
||||
font-size: 30rpx; |
||||
color: #666666; |
||||
border: 1rpx solid #B6B6B6; |
||||
border-radius: 5rpx; |
||||
display: inline-block; |
||||
margin: 0 10rpx 20rpx 0; |
||||
position: absolute; |
||||
top: 50rpx; |
||||
&:nth-of-type(1){ |
||||
left: -190rpx; |
||||
} |
||||
&:nth-of-type(2){ |
||||
left: 50rpx; |
||||
} |
||||
} |
||||
|
||||
.checked{ |
||||
color: #FFFFFF; |
||||
background: #FE0606; |
||||
border: 1rpx solid #FE0606; |
||||
} |
||||
.checkbox checkbox{ |
||||
display: none |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
.buttons { |
||||
width: 100%; |
||||
display: flex; |
||||
justify-content: space-evenly; |
||||
margin-top: 180rpx; |
||||
|
||||
>view { |
||||
width: 250rpx; |
||||
height: 76rpx; |
||||
text-align: center; |
||||
line-height: 76rpx; |
||||
border-radius: 10rpx; |
||||
font-size: 28rpx; |
||||
|
||||
&:nth-of-type(1) { |
||||
background: #FFFFFF; |
||||
border: 1rpx solid #B6B6B6; |
||||
color: #333; |
||||
} |
||||
|
||||
&:nth-of-type(2) { |
||||
background: #FE0505; |
||||
color: #fff; |
||||
} |
||||
} |
||||
} |
||||
.show{ |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
} |
||||
.hidden{ |
||||
display: none; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,55 @@ |
||||
<template> |
||||
<view class="container"> |
||||
|
||||
<view class="body"> |
||||
<view class="bodyContent"> |
||||
<view class="bodyLabel">属性类型：</view> |
||||
<view class="bodyItem"> |
||||
<uni-data-select |
||||
v-model="value" |
||||
:localdata="range" |
||||
@change="change" |
||||
></uni-data-select> |
||||
</view> |
||||
</view> |
||||
</view> |
||||
|
||||
</view> |
||||
</template> |
||||
|
||||
<script> |
||||
export default{ |
||||
data(){ |
||||
return{ |
||||
value: 1, |
||||
range: [ |
||||
{ value: 0, text: "篮球" }, |
||||
{ value: 1, text: "足球" }, |
||||
{ value: 2, text: "游泳" }, |
||||
], |
||||
} |
||||
}, |
||||
methods:{ |
||||
change(e) { |
||||
console.log("e:", e); |
||||
}, |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.container{ |
||||
.body{ |
||||
padding: 30rpx; |
||||
} |
||||
} |
||||
.bodyContent{ |
||||
position: relative; |
||||
// padding-left:150rpx; |
||||
.bodyLabel{ |
||||
display: inline-block; |
||||
width: 150rpx; |
||||
} |
||||
} |
||||
|
||||
</style> |
||||
Loading…
Reference in new issue