208 lines
4.4 KiB
Vue
208 lines
4.4 KiB
Vue
<template>
|
|
<view>
|
|
<view class="header">
|
|
<view class="top-header">
|
|
<view class="search">
|
|
<view class="search-content acea-row row-middle">
|
|
<text class="iconfont icon-sousuo"></text>
|
|
<input v-model="where.keyword" confirm-type="search" placeholder="请输收货人手机号或订单号搜索" class="input"
|
|
@confirm="handleSearch" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="recom">
|
|
<view class="recom_bnt">
|
|
<rudon-rowMenuDotDotDot :localdata="options" @change="menuAction($event)">
|
|
{{this.recomname}}
|
|
</rudon-rowMenuDotDotDot>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="type_switch">
|
|
<view class="recom_mend">
|
|
推荐
|
|
</view>
|
|
</view>
|
|
<view class="type_switch">
|
|
<view class="recom_mend">
|
|
调货
|
|
</view>
|
|
</view>
|
|
<view class="type_switch">
|
|
<view class="recom_mend">
|
|
打折专区
|
|
</view>
|
|
</view>
|
|
<view class="list">
|
|
<view class="item">
|
|
<image class="shopimg" src="@/static/images/2-002.png" mode="widthFix"></image>
|
|
<view class="item_text">
|
|
<span>调货</span> 夹岸数范德萨范德萨衣服上的
|
|
</view>
|
|
<view class="item_prices">
|
|
啊沙发上
|
|
</view>
|
|
<view class="item_name">
|
|
<image class="avater" src="../user_grade/images/suozi.png" mode="widthFix"></image>
|
|
<view class="item_name_text">
|
|
啊沙发上
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { methods } from '../../../uni_modules/uview-ui/libs/mixin/mixin'
|
|
export default {
|
|
data() {
|
|
return {
|
|
where: {
|
|
page: 1,
|
|
limit: 10,
|
|
status: 20,
|
|
product_type: 98,
|
|
keyword: '',
|
|
},
|
|
options: [{
|
|
value: '0',
|
|
text: '推荐'
|
|
},
|
|
{
|
|
value: '1',
|
|
text: '调货'
|
|
},
|
|
{
|
|
value: '2',
|
|
text: '打折专区'
|
|
}
|
|
],
|
|
recomname: '',
|
|
}
|
|
},
|
|
methods: {
|
|
menuAction(action, rowId) {
|
|
console.log(action);
|
|
// 忽略初始化时的传入的空操作
|
|
if (action === '') {
|
|
this.recomname = this.options[0].text
|
|
} else {
|
|
this.recomname = this.options[action].text
|
|
}
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.header {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
|
|
.top-header {
|
|
z-index: 9999;
|
|
width: 80%;
|
|
background-color: #fff;
|
|
|
|
.search {
|
|
padding: 17rpx 30rpx;
|
|
|
|
.search-content {
|
|
width: 100%;
|
|
height: 60rpx;
|
|
padding: 0 30rpx;
|
|
border-radius: 30rpx;
|
|
background-color: #F5F5F5;
|
|
font-size: 26rpx;
|
|
}
|
|
|
|
.iconfont {
|
|
margin-right: 10rpx;
|
|
font-size: 26rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
.input-placeholder {
|
|
font-size: 26rpx;
|
|
color: #999999;
|
|
}
|
|
|
|
.input {
|
|
flex: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.recom {
|
|
width: 78px;
|
|
height: 34px;
|
|
text-align: center;
|
|
border-radius: 30px;
|
|
border: 1px solid #F84221;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.recom_bnt {}
|
|
}
|
|
}
|
|
|
|
.list {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
.item {
|
|
width: 45%;
|
|
margin: 9px;
|
|
|
|
.shopimg {
|
|
width: 100%;
|
|
}
|
|
|
|
.item_text {
|
|
width: 100%;
|
|
padding: 15px 10px 15px 10px;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
|
|
span {
|
|
height: 20px;
|
|
padding: 3px;
|
|
margin: 2px;
|
|
background: linear-gradient(180deg, #F98649 0%, #F34E45 100%);
|
|
border-radius: 4px 0px 4px 0px;
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
.item_prices {
|
|
font-size: 18px;
|
|
color: #F84221;
|
|
padding-left: 15px;
|
|
border-bottom: 1px solid #707070;
|
|
}
|
|
|
|
.item_name {
|
|
width: 100%;
|
|
height: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.avater {
|
|
margin: 5px;
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |