|
|
@@ -2,32 +2,85 @@
|
|
|
<mobile-frame>
|
|
|
<view class="main">
|
|
|
<view class="one">
|
|
|
+ <input type="text" v-model="searchInfo.name" @blur="toInput" placeholder="搜索商品名称">
|
|
|
+ </view>
|
|
|
+ <view class="two">
|
|
|
<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="toPage">
|
|
|
<view class="list-scroll-view">
|
|
|
- <view class="list" v-for="(item, index) in list" :key="index" @tap="toView(item)">
|
|
|
- <image class="image"
|
|
|
- :src="item.file&&item.file.length>0?item.file[0].url:''" mode="">
|
|
|
- </image>
|
|
|
- <view class="name">
|
|
|
- {{item.name||'暂无'}}
|
|
|
- </view>
|
|
|
- <view class="money">
|
|
|
- <text>¥</text>
|
|
|
- <text>{{item.sell_money}}</text>
|
|
|
+ <view class="two_1">
|
|
|
+ <view :class="['list',condActive==index?'activeList':'']" v-for="(item,index) in condList"
|
|
|
+ :key="index" @tap="toCond(index,item)">
|
|
|
+ <view class="name" v-if="index!=4">
|
|
|
+ {{item.name}}
|
|
|
+ </view>
|
|
|
+ <view v-if="index==4" class="icon4">
|
|
|
+ <view class="icon_1">
|
|
|
+ <text :class="['iconfont',item.shangActive]"
|
|
|
+ v-if="condActive==index&&shang=='1'"></text>
|
|
|
+ <text :class="['iconfont',item.shang]" v-else></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-else class="icon">
|
|
|
+ <view class="icon_1">
|
|
|
+ <text :class="['iconfont',item.shangActive]"
|
|
|
+ v-if="condActive==index&&shang=='1'"></text>
|
|
|
+ <text :class="['iconfont',item.shang]" v-else></text>
|
|
|
+ </view>
|
|
|
+ <view class="icon_1">
|
|
|
+ <text :class="['iconfont', item.xiaActive]"
|
|
|
+ v-if="condActive==index&&xia=='-1'"></text>
|
|
|
+ <text :class="['iconfont', item.xia]" v-else></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view class="other">
|
|
|
- <view class="other_1">
|
|
|
- {{item.view_num||0}}人浏览
|
|
|
+ </view>
|
|
|
+ <view class="two_2" v-if="type=='gongge'">
|
|
|
+ <view class="list" v-for="(item, index) in list" :key="index" @tap="toView(item)">
|
|
|
+ <image class="image" :src="item.file&&item.file.length>0?item.file[0].url:''" mode="">
|
|
|
+ </image>
|
|
|
+ <view class="name">
|
|
|
+ {{item.name||'暂无'}}
|
|
|
</view>
|
|
|
- <view class="other_2">
|
|
|
- <text @tap.stop="toDel(item)" class="iconfont icon-del"></text>
|
|
|
+ <view class="money">
|
|
|
+ <text>¥</text>
|
|
|
+ <text>{{item.sell_money}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="other">
|
|
|
+ <view class="other_1">
|
|
|
+ {{item.view_num||0}}人浏览
|
|
|
+ </view>
|
|
|
+ <view class="other_2">
|
|
|
+ <text @tap.stop="toDel(item)" class="iconfont icon-del"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="two_3" v-else>
|
|
|
+ <view class="list_1" v-for="(item, index) in list" :key="index" @tap="toView(item)">
|
|
|
+ <image class="image" :src="item.file&&item.file.length>0?item.file[0].url:''" mode="">
|
|
|
+ </image>
|
|
|
+ <view class="list_1_1">
|
|
|
+ <view class="name">
|
|
|
+ {{item.name||'暂无'}}
|
|
|
+ </view>
|
|
|
+ <view class="money">
|
|
|
+ <text>￥</text>
|
|
|
+ <text>{{item.sell_money}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="other">
|
|
|
+ <view class="other_1">
|
|
|
+ {{item.view_num||0}}人浏览
|
|
|
+ </view>
|
|
|
+ <view class="other_2">
|
|
|
+ <text @tap.stop="toDel(item)" class="iconfont icon-del"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
</view>
|
|
|
-
|
|
|
</view>
|
|
|
</mobile-frame>
|
|
|
</template>
|
|
|
@@ -36,12 +89,47 @@
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
+ searchInfo: {},
|
|
|
user: {},
|
|
|
list: [],
|
|
|
total: 0,
|
|
|
skip: 0,
|
|
|
- limit: 5,
|
|
|
- page: 0
|
|
|
+ limit: 6,
|
|
|
+ page: 0,
|
|
|
+ condActive: 0,
|
|
|
+ shang: '',
|
|
|
+ xia: '',
|
|
|
+ condList: [ // 筛选
|
|
|
+ {
|
|
|
+ name: '默认',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '收藏时间',
|
|
|
+ shang: 'icon-shangjiantou',
|
|
|
+ shangActive: 'icon-shangjiantou-copy',
|
|
|
+ xia: 'icon-xiajiantou',
|
|
|
+ xiaActive: 'icon-xiajiantou-copy'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '价格',
|
|
|
+ shang: 'icon-shangjiantou',
|
|
|
+ shangActive: 'icon-shangjiantou-copy',
|
|
|
+ xia: 'icon-xiajiantou',
|
|
|
+ xiaActive: 'icon-xiajiantou-copy'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '浏览量',
|
|
|
+ shang: 'icon-shangjiantou',
|
|
|
+ shangActive: 'icon-shangjiantou-copy',
|
|
|
+ xia: 'icon-xiajiantou',
|
|
|
+ xiaActive: 'icon-xiajiantou-copy'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ shang: 'icon-shitugonggeListBox',
|
|
|
+ shangActive: 'icon-shitugonggeListBox',
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ type: 'gongge',
|
|
|
};
|
|
|
},
|
|
|
onShow: function() {
|
|
|
@@ -49,6 +137,13 @@
|
|
|
that.watchLogin()
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 输入框
|
|
|
+ toInput(e) {
|
|
|
+ const that = this;
|
|
|
+ if (e.detail.value) that.$set(that.searchInfo, `name`, e.detail.value);
|
|
|
+ that.clearPage();
|
|
|
+ that.search();
|
|
|
+ },
|
|
|
// 详细信息
|
|
|
toView(e) {
|
|
|
const that = this;
|
|
|
@@ -87,6 +182,51 @@
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
+ // 筛选
|
|
|
+ toCond(index, e) {
|
|
|
+ const that = this;
|
|
|
+ let condActive = that.condActive;
|
|
|
+ that.$set(that, `condActive`, index);
|
|
|
+ if (condActive != index && that.xia == '') {
|
|
|
+ that.$set(that, `shang`, '0');
|
|
|
+ that.$set(that, `xia`, '-1');
|
|
|
+ } else if (condActive == index && that.xia == '-1') {
|
|
|
+ that.$set(that, `shang`, '1');
|
|
|
+ that.$set(that, `xia`, '0');
|
|
|
+ } else if (condActive == index && that.shang == '1') {
|
|
|
+ that.$set(that, `shang`, '0');
|
|
|
+ that.$set(that, `xia`, '-1');
|
|
|
+ } else if (condActive = index && that.shang == '1') {
|
|
|
+ that.$set(that, `shang`, '0');
|
|
|
+ that.$set(that, `xia`, '-1');
|
|
|
+ }
|
|
|
+ let value;
|
|
|
+ if (index != 0) {
|
|
|
+ value = that.shang == '0' ? that.xia : that.shang;
|
|
|
+ } else {
|
|
|
+ that.$set(that, `searchInfo`, {})
|
|
|
+ }
|
|
|
+ if (index == 1) {
|
|
|
+ that.$set(that, `searchInfo`, {})
|
|
|
+ that.$set(that.searchInfo, `createdAt`, value);
|
|
|
+ } else if (index == 2) {
|
|
|
+ that.$set(that, `searchInfo`, {})
|
|
|
+ that.$set(that.searchInfo, `sell_money`, value);
|
|
|
+ } else if (index == 3) {
|
|
|
+ that.$set(that, `searchInfo`, {})
|
|
|
+ that.$set(that.searchInfo, `view_num`, value);
|
|
|
+ } else if (index == 4) {
|
|
|
+ if (e.shang == 'icon-liebiaoxingshi') {
|
|
|
+ that.$set(e, `shang`, 'icon-shitugonggeListBox');
|
|
|
+ that.$set(that, `type`, 'gongge');
|
|
|
+ } else {
|
|
|
+ that.$set(e, `shang`, 'icon-liebiaoxingshi');
|
|
|
+ that.$set(that, `type`, 'list');
|
|
|
+ }
|
|
|
+ }
|
|
|
+ that.clearPage();
|
|
|
+ that.search();
|
|
|
+ },
|
|
|
// 监听用户是否登录
|
|
|
watchLogin() {
|
|
|
const that = this;
|
|
|
@@ -113,7 +253,8 @@
|
|
|
limit: that.limit
|
|
|
}
|
|
|
const res = await that.$api(`/storeGoods/userView`, 'GET', {
|
|
|
- ...info
|
|
|
+ ...info,
|
|
|
+ ...that.searchInfo
|
|
|
})
|
|
|
if (res.errcode == '0') {
|
|
|
let list = [...that.list, ...res.data];
|
|
|
@@ -146,7 +287,7 @@
|
|
|
const that = this;
|
|
|
that.$set(that, `list`, [])
|
|
|
that.$set(that, `skip`, 0)
|
|
|
- that.$set(that, `limit`, 5)
|
|
|
+ that.$set(that, `limit`, 6)
|
|
|
that.$set(that, `page`, 0)
|
|
|
}
|
|
|
}
|
|
|
@@ -161,45 +302,170 @@
|
|
|
height: 100vh;
|
|
|
|
|
|
.one {
|
|
|
- padding: 2vw 0 0 0;
|
|
|
+ border-bottom: 1px solid var(--f85Color);
|
|
|
+ padding: 2vw;
|
|
|
|
|
|
- .list {
|
|
|
- width: 42vw;
|
|
|
- border: 1px solid var(--f1Color);
|
|
|
- margin: 2vw 2vw 0 2vw;
|
|
|
+ input {
|
|
|
padding: 2vw;
|
|
|
+ background-color: var(--f1Color);
|
|
|
+ font-size: var(--font14Size);
|
|
|
border-radius: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .two {
|
|
|
+ position: relative;
|
|
|
+ flex-grow: 1;
|
|
|
+ padding: 2vw 0 0 0;
|
|
|
+
|
|
|
+ .two_1 {
|
|
|
+ background-color: var(--fffColor);
|
|
|
+ padding: 2vw;
|
|
|
+ display: flex;
|
|
|
+ width: 100vw;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-around;
|
|
|
+
|
|
|
+ .list {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ position: relative;
|
|
|
+ top: -5px;
|
|
|
+ left: 2px;
|
|
|
+
|
|
|
+ .icon_1 {
|
|
|
+ height: 10px;
|
|
|
+
|
|
|
+ .iconfont {
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon4 {
|
|
|
+ .icon_1 {
|
|
|
+ .iconfont {
|
|
|
+ font-size: 17px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .activeList {
|
|
|
+ .name {
|
|
|
+ color: #ff0000;
|
|
|
+ }
|
|
|
|
|
|
- .image {
|
|
|
- width: 100%;
|
|
|
- height: 40vw;
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ .two_2 {
|
|
|
+ width: 100vw;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
|
|
|
- .name {
|
|
|
- font-size: var(--font16Size);
|
|
|
- margin: 0 0 1vw 0;
|
|
|
+ .list {
|
|
|
+ width: 42vw;
|
|
|
+ border: 1px solid var(--f1Color);
|
|
|
+ margin: 2vw 2vw 0 2vw;
|
|
|
+ padding: 2vw;
|
|
|
+ border-radius: 5px;
|
|
|
+
|
|
|
+ .image {
|
|
|
+ width: 100%;
|
|
|
+ height: 40vw;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: var(--font16Size);
|
|
|
+ margin: 0 0 1vw 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .money {
|
|
|
+ color: var(--fFB1Color);
|
|
|
+ font-size: var(--font14Size);
|
|
|
+ margin: 0 0 1vw 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .other {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .other_1 {
|
|
|
+ font-size: var(--font14Size);
|
|
|
+ color: var(--f85Color);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .money {
|
|
|
- color: var(--fFB1Color);
|
|
|
- font-size: var(--font14Size);
|
|
|
- margin: 0 0 1vw 0;
|
|
|
+ .list:nth-child(2n) {
|
|
|
+ margin: 2vw 0 0 0;
|
|
|
}
|
|
|
+ }
|
|
|
+
|
|
|
+ .two_3 {
|
|
|
+ width: 100vw;
|
|
|
|
|
|
- .other {
|
|
|
+ .list_1 {
|
|
|
display: flex;
|
|
|
flex-direction: row;
|
|
|
justify-content: space-between;
|
|
|
+ width: 91vw;
|
|
|
+ border: 1px solid var(--f1Color);
|
|
|
+ margin: 2vw 2vw 0 2vw;
|
|
|
+ padding: 2vw;
|
|
|
+ border-radius: 5px;
|
|
|
|
|
|
- .other_1 {
|
|
|
- font-size: var(--font14Size);
|
|
|
- color: var(--f85Color);
|
|
|
+ .image {
|
|
|
+ width: 25vw;
|
|
|
+ height: 25vw;
|
|
|
+ border-radius: 5px;
|
|
|
+ margin: 0 2vw 0 0;
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
|
|
|
- .list:nth-child(2n) {
|
|
|
- margin: 2vw 0 0 0;
|
|
|
+ .list_1_1 {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ flex-grow: 1;
|
|
|
+ padding: 2vw 0;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: var(--font16Size);
|
|
|
+ margin: 0 0 1vw 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .money {
|
|
|
+ color: var(--fFB1Color);
|
|
|
+ font-size: var(--font14Size);
|
|
|
+ margin: 0 0 1vw 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .other {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ .name {
|
|
|
+ font-size: var(--font16Size);
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .other_1 {
|
|
|
+ font-size: var(--font14Size);
|
|
|
+ color: var(--f85Color);
|
|
|
+
|
|
|
+ text {
|
|
|
+ font-weight: bold;
|
|
|
+ padding: 0 2vw;
|
|
|
+ color: var(--ff0Color);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -210,11 +476,10 @@
|
|
|
left: 0;
|
|
|
right: 0;
|
|
|
bottom: 0;
|
|
|
-
|
|
|
+
|
|
|
.list-scroll-view {
|
|
|
display: flex;
|
|
|
- flex-direction: row;
|
|
|
- flex-wrap: wrap;
|
|
|
+ flex-direction: column;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
