|
|
|
@ -2,7 +2,7 @@ |
|
|
|
<div> |
|
|
|
<div class="search flex flex-mean bg-fff m-bot10 flex-center2"> |
|
|
|
<div class="date"> |
|
|
|
<div :class="{ 'date-input': true, 'flex': true, 'flex-center2': true, 'gray': currentDate }" |
|
|
|
<div :class="{ 'date-input': true, 'flex': true, 'flex-center2': true, 'gray': !currentDate }" |
|
|
|
@click="showDate = true"> |
|
|
|
{{ currentDate ? currentDate : '请选择日期' }} |
|
|
|
</div> |
|
|
|
@ -11,6 +11,19 @@ |
|
|
|
<van-search v-model="searchKey" placeholder="请输入品种" background="#ffffff" shape="round" /> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="collect m-bot10"> |
|
|
|
<div class="title flex flex-center2 "> |
|
|
|
<img src="@/assets/images/icons/collect.png" alt=""> |
|
|
|
<span>收藏品种</span> |
|
|
|
<img src="@/assets/images/icons/add.png" @click="handelClickAddCollect" class="m-right15" alt=""> |
|
|
|
<img src="@/assets/images/icons/del.png" alt="" @click="handelClickDelCollect"> |
|
|
|
</div> |
|
|
|
<div class="tags"> |
|
|
|
<van-tag color="#dbdbdb" size="large" round text-color="#000000" plain :closeable="closeable" |
|
|
|
v-for="(item, index) in collectList" :key="index" @close="handelClickClose(item)">{{ item |
|
|
|
}}</van-tag> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="card m-top10 list"> |
|
|
|
<div class="title"> |
|
|
|
<span class=""><img src="@/assets/images/icons/date-blue.png" alt="" |
|
|
|
@ -39,6 +52,9 @@ |
|
|
|
<van-datetime-picker @confirm="handelCLickConfirmDate" @cancel="showDate = false" v-model="currentDate" |
|
|
|
type="date" title="选择年月日" /> |
|
|
|
</van-popup> |
|
|
|
<van-popup v-model="showAdd" position="bottom" :style="{ height: '40%' }"> |
|
|
|
<van-checkbox v-model="checked" shape="square" v-for="(item,index) in collectList" :key="index">{{item}}</van-checkbox> |
|
|
|
</van-popup> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -48,7 +64,7 @@ export default { |
|
|
|
return { |
|
|
|
searchKey: null, |
|
|
|
showDate: false, |
|
|
|
currentDate: new Date(), |
|
|
|
currentDate: null, |
|
|
|
priceList: [ |
|
|
|
{ |
|
|
|
name: '哇啊哇擦哇啊哇擦哇啊哇擦哇啊哇擦', |
|
|
|
@ -106,7 +122,11 @@ export default { |
|
|
|
price: 100, |
|
|
|
old: '1.1' |
|
|
|
}, |
|
|
|
] |
|
|
|
], |
|
|
|
collectList: ['白菜', '白菜', '白菜', '白菜', '白菜', '白菜', '豆角', '西红柿', '西红柿', '黄瓜', '茄子', '洋葱', '彩椒'], |
|
|
|
closeable: false, |
|
|
|
showAdd:false, |
|
|
|
checked:[] |
|
|
|
}; |
|
|
|
}, |
|
|
|
created() { |
|
|
|
@ -134,9 +154,18 @@ export default { |
|
|
|
} |
|
|
|
}, 1000); |
|
|
|
}, |
|
|
|
handelCLickConfirmDate() { |
|
|
|
handelCLickConfirmDate(val) { |
|
|
|
this.currentDate = this.$dayjs(val).format('YYYY-MM-DD'); |
|
|
|
this.showDate = false; |
|
|
|
}, |
|
|
|
handelClickClose(val) { |
|
|
|
console.log(val); |
|
|
|
}, |
|
|
|
handelClickAddCollect(){ |
|
|
|
this.showAdd = true; |
|
|
|
}, |
|
|
|
handelClickDelCollect() { |
|
|
|
this.closeable = true; |
|
|
|
} |
|
|
|
}, |
|
|
|
components: {}, |
|
|
|
@ -161,6 +190,9 @@ export default { |
|
|
|
border-radius: 17px; |
|
|
|
width: 100%; |
|
|
|
position: relative; |
|
|
|
padding: 0 10px; |
|
|
|
box-sizing: border-box; |
|
|
|
font-size: 14px; |
|
|
|
|
|
|
|
&::after { |
|
|
|
content: ''; |
|
|
|
@ -224,4 +256,31 @@ export default { |
|
|
|
width: calc(100% - 20px); |
|
|
|
margin: 0 auto; |
|
|
|
} |
|
|
|
|
|
|
|
.collect { |
|
|
|
background-color: #ffffff; |
|
|
|
width: 100%; |
|
|
|
font-family: pingfang-bold; |
|
|
|
font-size: 17px; |
|
|
|
padding: 15px 0 15px 10px; |
|
|
|
box-sizing: border-box; |
|
|
|
|
|
|
|
img { |
|
|
|
width: 20px; |
|
|
|
height: 20px; |
|
|
|
} |
|
|
|
|
|
|
|
span { |
|
|
|
margin: 0 16px 0 6px; |
|
|
|
} |
|
|
|
|
|
|
|
.tags { |
|
|
|
margin-top: 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
:deep(.van-tag) { |
|
|
|
font-family: none; |
|
|
|
margin-top: 8px !important; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
