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