更新
This commit is contained in:
281
packageIntegral/productAddition/index.vue
Normal file
281
packageIntegral/productAddition/index.vue
Normal file
@@ -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>
|
||||
Reference in New Issue
Block a user