|
|
@@ -34,29 +34,46 @@
|
|
|
<van-dropdown-menu>
|
|
|
<van-dropdown-item
|
|
|
title-class="van-icon van-icon-arrow"
|
|
|
- :value="value1"
|
|
|
- :options="option1"
|
|
|
+ :value="caseStatus"
|
|
|
+ :options="dropCaseStatusList"
|
|
|
+ @change="changeStatus"
|
|
|
/>
|
|
|
</van-dropdown-menu>
|
|
|
</div>
|
|
|
<div class="col-3">
|
|
|
- <sort-item v-model="sort" name="price">价格</sort-item>
|
|
|
+ <sort-item v-model="sort" @input="getData" name="boxPrice">价格</sort-item>
|
|
|
</div>
|
|
|
<div class="col-3">
|
|
|
- <sort-item v-model="sort" name="createAt">最新</sort-item>
|
|
|
+ <sort-item v-model="sort" @input="getData" name="id">最新</sort-item>
|
|
|
</div>
|
|
|
</div>
|
|
|
</van-sticky>
|
|
|
<div class="list-content">
|
|
|
<div class="procuct" v-for="(item, index) in list" :key="index">
|
|
|
- <product-info-mine :info="item"></product-info-mine>
|
|
|
+ <van-icon color="#C8C9CC" class="check" name="circle" size="18px" />
|
|
|
+ <product-info :info="item" :isMine="isMineShop" :showBtn="isManage"></product-info>
|
|
|
</div>
|
|
|
+
|
|
|
+ <van-empty
|
|
|
+ v-if="empty"
|
|
|
+ image="https://ticket-exchange.oss-cn-hangzhou.aliyuncs.com/wechat/kong_png_wukabao.png"
|
|
|
+ description="暂无卡包信息哦～"
|
|
|
+ >
|
|
|
+ </van-empty>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="bottom">
|
|
|
- <button-bg type="warning" openType="share">分享店铺 </button-bg>
|
|
|
- <button-bg type="prim" isRight>管理商品</button-bg>
|
|
|
+ <block v-if="isManage">
|
|
|
+ <button-bg type="warning" openType="share">新增商品 </button-bg>
|
|
|
+ <button-bg type="prim" isRight v-if="chooseIds.length > 0">删除</button-bg>
|
|
|
+ <button-bg type="prim" isRight v-else @click="isManage = false">完成</button-bg>
|
|
|
+ </block>
|
|
|
+ <block v-else>
|
|
|
+ <button-bg type="warning" openType="share">分享店铺 </button-bg>
|
|
|
+ <button-bg type="prim" isRight v-if="isMineShop" @click="isManage = true">管理商品</button-bg>
|
|
|
+ <button-bg type="prim" isRight v-else @click="wait">联系他</button-bg>
|
|
|
+ </block>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -65,22 +82,16 @@
|
|
|
import { mapState } from 'vuex';
|
|
|
import ButtonBg from '../../components/ButtonBg.vue';
|
|
|
import NavHeader from '../../components/NavHeader.vue';
|
|
|
-import ProductInfoMine from '../../components/ProductInfoMine.vue';
|
|
|
+import ProductInfo from '../../components/ProductInfo.vue';
|
|
|
import SortItem from '../../components/SortItem.vue';
|
|
|
import store from '../../mixins/store';
|
|
|
+import cardPage from '../../mixins/cardPage';
|
|
|
export default {
|
|
|
- components: { ButtonBg, SortItem, NavHeader, ProductInfoMine },
|
|
|
- mixins: [store],
|
|
|
+ components: { ButtonBg, SortItem, NavHeader, ProductInfo },
|
|
|
+ mixins: [store, cardPage],
|
|
|
data() {
|
|
|
return {
|
|
|
- option1: [{ text: '全部商品', value: 0 }, { text: '新款商品', value: 1 }, { text: '活动商品', value: 2 }],
|
|
|
- option2: [
|
|
|
- { text: '默认排序', value: 'a' },
|
|
|
- { text: '好评排序', value: 'b' },
|
|
|
- { text: '销量排序', value: 'c' }
|
|
|
- ],
|
|
|
- value1: 0,
|
|
|
- value2: 'a',
|
|
|
+ caseStatus: '',
|
|
|
sort: '',
|
|
|
page: 0,
|
|
|
loading: false,
|
|
|
@@ -88,11 +99,27 @@ export default {
|
|
|
empty: false,
|
|
|
finish: false,
|
|
|
isMineShop: false,
|
|
|
- offsetTop: 0
|
|
|
+ offsetTop: 0,
|
|
|
+ isManage: false,
|
|
|
+ chooseIds: []
|
|
|
};
|
|
|
},
|
|
|
computed: {
|
|
|
- ...mapState(['systemInfo', 'userStoreInfo'])
|
|
|
+ ...mapState(['systemInfo', 'userStoreInfo']),
|
|
|
+ dropCaseStatusList() {
|
|
|
+ let list = [...this.caseStatusList];
|
|
|
+ list = list.map(item => {
|
|
|
+ return {
|
|
|
+ value: item.value,
|
|
|
+ text: item.label
|
|
|
+ };
|
|
|
+ });
|
|
|
+ let first = {
|
|
|
+ value: '',
|
|
|
+ text: '全部商品'
|
|
|
+ };
|
|
|
+ return [first, ...list];
|
|
|
+ }
|
|
|
},
|
|
|
onShow() {
|
|
|
if (this.isLogin) {
|
|
|
@@ -105,7 +132,9 @@ export default {
|
|
|
this.getStore().then(res => {
|
|
|
this.storeInfo = res;
|
|
|
this.getData();
|
|
|
- this.offsetTop = this.systemInfo.statusBarHeight + 44;
|
|
|
+ setTimeout(() => {
|
|
|
+ this.offsetTop = this.systemInfo.statusBarHeight + 44;
|
|
|
+ }, 1000);
|
|
|
});
|
|
|
},
|
|
|
getStore() {
|
|
|
@@ -133,19 +162,27 @@ export default {
|
|
|
getStoreById(id) {
|
|
|
return this.$http.get('/store/get/' + id);
|
|
|
},
|
|
|
+ changeStatus(value) {
|
|
|
+ console.log(value);
|
|
|
+ this.caseStatus = value.detail;
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
getData() {
|
|
|
- console.log(this.storeInfo.id);
|
|
|
+ this.empty = false;
|
|
|
let data = {
|
|
|
- page: this.page,
|
|
|
- size: 20
|
|
|
+ storeId: this.storeInfo.id,
|
|
|
+ caseStatus: this.caseStatus
|
|
|
};
|
|
|
if (this.sort) {
|
|
|
- data.sort = this.sort;
|
|
|
+ data.sortStr = this.sort;
|
|
|
}
|
|
|
- this.$http.postJson('/collection/all', data).then(res => {
|
|
|
- this.empty = res.empty;
|
|
|
- this.finish = res.last;
|
|
|
- this.list = [...this.list, ...res.content];
|
|
|
+ this.showLoading();
|
|
|
+ this.$http.post('/store/findStoreCases', data).then(res => {
|
|
|
+ this.list = res.caseInfo;
|
|
|
+ if (res.caseInfo.length == 0) {
|
|
|
+ this.empty = true;
|
|
|
+ }
|
|
|
+ this.hideLoading();
|
|
|
});
|
|
|
},
|
|
|
goNext() {
|
|
|
@@ -270,5 +307,15 @@ export default {
|
|
|
|
|
|
.procuct {
|
|
|
padding: 20px 25px;
|
|
|
+
|
|
|
+ .flex();
|
|
|
+
|
|
|
+ .product-card {
|
|
|
+ flex-grow: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .check {
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
panhui
