|
|
@@ -0,0 +1,299 @@
|
|
|
+<template>
|
|
|
+ <view class="app-content">
|
|
|
+
|
|
|
+ <view class="input-wrap" >
|
|
|
+ <view class="search-bar">
|
|
|
+ <app-search-module v-model="py" placeholder="输入英文字母搜索" @input="searchFn" />
|
|
|
+ </view>
|
|
|
+ <view style="float:right">
|
|
|
+ <button class="admin-button-com middle blue" @click="newCg()">新品类</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="app-middle">
|
|
|
+ <scroll-view scroll-y scroll-with-animation class="tab-view" :scroll-top="scrollTop">
|
|
|
+ <view v-for="(item,index) in tabbar" :key="index" class="tab-bar-item" :class="[currentTab==index ? 'active' : '']" :data-current="index" @tap.stop="swichTab($event ,item)" >
|
|
|
+ <text>{{item.categoryName || ''}}</text>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ <block v-for="(item,index) in tabbar" :key="index">
|
|
|
+ <scroll-view scroll-y class="right-box" v-if="currentTab==index" @scrolltolower="goBottom">
|
|
|
+ <block v-if="!$util.isEmpty(list.data)">
|
|
|
+ <view class="page-view">
|
|
|
+ <view class="goods-list" v-for="(goodsItem, idx) in list.data" :key="idx">
|
|
|
+
|
|
|
+ <view class="goods-list-top">
|
|
|
+ <view class="img-blo">
|
|
|
+ <image :src="goodsItem.smallImgList[0]" mode="aspectFit" ></image>
|
|
|
+ </view>
|
|
|
+ <view class="goods-det">
|
|
|
+ <view class="goods-det-top" style="margin-bottom:4upx;">
|
|
|
+ <view class="goods-name" style="font-size:29upx;font-weight:bold;">{{ goodsItem.name }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="operate-wrap" style="margin-bottom:15upx;">
|
|
|
+ <view class="goods-price" style="font-size:23upx;">60</view>
|
|
|
+ <view style="float:right;display:inlin-block;padding-right:10upx;color:#666666;">
|
|
|
+ <text>-</text>
|
|
|
+ <text style="width:80upx;display:inline-block;"></text>
|
|
|
+ <text>+</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="operate-wrap">
|
|
|
+ <view style="font-size:23upx;color:#666666;">
|
|
|
+ <text>库存</text> <text style="font-weight:bold;margin-left:8upx;">{{goodsItem.stock}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </block>
|
|
|
+ <block v-else>
|
|
|
+ <app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
|
|
|
+ </block>
|
|
|
+ </scroll-view>
|
|
|
+ </block>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import AppSearchModule from "@/components/module/app-search";
|
|
|
+import OperateModule from "@/admin/home/components/module/operate";
|
|
|
+import AppWrapperEmpty from "@/components/app-wrapper-empty";
|
|
|
+import ModalModule from "@/components/plugin/modal";
|
|
|
+import {categoryListB,getCategoryGoodsB,delB,changeStatusB} from "@/api/goods";
|
|
|
+import { list } from "@/mixins";
|
|
|
+export default {
|
|
|
+ name: "plant",
|
|
|
+ components: {
|
|
|
+ OperateModule,
|
|
|
+ AppWrapperEmpty,
|
|
|
+ ModalModule,
|
|
|
+ AppSearchModule
|
|
|
+ },
|
|
|
+ mixins: [list],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tabbar: [],
|
|
|
+ height: 0,
|
|
|
+ currentTab: 0,
|
|
|
+ scrollTop: 0,
|
|
|
+ form: {
|
|
|
+ categoryId: ""
|
|
|
+ },
|
|
|
+ delModal: false,
|
|
|
+ operateData: {},
|
|
|
+ operateShow: false,
|
|
|
+ operateIndex: null,
|
|
|
+ operateTop: 0
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ },
|
|
|
+ onLoad: function() {
|
|
|
+ if (this.$util.isLogin()) {
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.getSystemInfo({
|
|
|
+ success: res => {
|
|
|
+ this.height = res.windowHeight - 90;
|
|
|
+ this.sInit();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }, 50);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ goBottom(){
|
|
|
+ if (!this.list.finished) {
|
|
|
+ this._list().then((res) => {
|
|
|
+ uni.stopPullDownRefresh();
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ uni.stopPullDownRefresh();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ newCg(){
|
|
|
+ //this.$util.pageTo({url:"/admin/goodsManage/plant",type:2})
|
|
|
+ },
|
|
|
+ async sInit() {
|
|
|
+ this._getClass();
|
|
|
+ this._list();
|
|
|
+ },
|
|
|
+ _getClass() {
|
|
|
+ categoryListB().then(res => {
|
|
|
+ this.tabbar = res.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ _list() {
|
|
|
+ return getCategoryGoodsB({
|
|
|
+ status: 1,
|
|
|
+ page: this.list.page,
|
|
|
+ ...this.form
|
|
|
+ }).then(res => {
|
|
|
+ this.completes(res);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ swichTab(e, item) {
|
|
|
+ let cur = e.currentTarget.dataset.current;
|
|
|
+ if (this.currentTab == cur) {
|
|
|
+ return false;
|
|
|
+ } else {
|
|
|
+ this.currentTab = cur;
|
|
|
+ this.form.categoryId = item.id;
|
|
|
+ this.resetList();
|
|
|
+ this._list();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ changeStatus(item) {
|
|
|
+ let status = item.status == 0 ? 1 : 0
|
|
|
+ changeStatusB({id: item.id,status: status}).then(res => {
|
|
|
+ if(res.code == 1){
|
|
|
+ this.$msg("修改成功")
|
|
|
+ item.status = status
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.app-content {
|
|
|
+ min-height: calc(100vh - 80upx);
|
|
|
+ background-color: #fff;
|
|
|
+}
|
|
|
+page {
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
+::-webkit-scrollbar {
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ color: transparent;
|
|
|
+}
|
|
|
+.tab-view {
|
|
|
+ height: 100vh;
|
|
|
+ width: 200upx;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ z-index: 10;
|
|
|
+ background-color: #f0f2f6;
|
|
|
+ .tab-bar-item {
|
|
|
+ width: 200upx;
|
|
|
+ height: 110upx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 26upx;
|
|
|
+ color: #444;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ position: relative;
|
|
|
+ color: $mainColor;
|
|
|
+ font-size: 26upx;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+ .active::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ border-left: 8upx solid $mainColor;
|
|
|
+ height: 100%;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+.right-box {
|
|
|
+ width: 100%;
|
|
|
+ height:1260upx;
|
|
|
+ position: fixed;
|
|
|
+ padding-left: 220upx;
|
|
|
+ padding-bottom:30upx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ left: 0;
|
|
|
+ .page-view {
|
|
|
+ width: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-bottom: env(safe-area-inset-bottom);
|
|
|
+ .goods-list {
|
|
|
+ margin: 40upx 0;
|
|
|
+ .goods-list-top {
|
|
|
+ position: relative;
|
|
|
+ @include disFlex(flex-start, flex-start);
|
|
|
+ }
|
|
|
+ .goods-list-bottom {
|
|
|
+ width: 96%;
|
|
|
+ margin-top: 16upx;
|
|
|
+ color: #bebebe;
|
|
|
+ text{
|
|
|
+ border:1px solid rgb(218, 216, 216);
|
|
|
+ border-radius: 20upx;
|
|
|
+ font-size:22upx;
|
|
|
+ padding:6upx 25upx 6upx 25upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .img-blo {
|
|
|
+ width: 130upx;
|
|
|
+ height: 130upx;
|
|
|
+ margin-right: 20upx;
|
|
|
+ & > image {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .goods-det {
|
|
|
+ width: calc(100% - 150upx);
|
|
|
+ font-size: 28upx;
|
|
|
+ .operate-wrap {
|
|
|
+ @include disFlex(flex-end, space-between);
|
|
|
+ }
|
|
|
+ .operate-icon-wrap {
|
|
|
+ left: -20upx;
|
|
|
+ }
|
|
|
+ .goods-name {
|
|
|
+ margin-bottom: 10upx;
|
|
|
+ }
|
|
|
+ .goods-sales {
|
|
|
+ color: $fontColor3;
|
|
|
+ font-size: 24upx;
|
|
|
+ }
|
|
|
+ .goods-price {
|
|
|
+ color: #ff2842;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.app-footer {
|
|
|
+ justify-content: space-between;
|
|
|
+ .btn-list {
|
|
|
+ width: 100%;
|
|
|
+ &:first-child {
|
|
|
+ border-left: 0;
|
|
|
+ }
|
|
|
+ .admin-button-com {
|
|
|
+ width: 160upx;
|
|
|
+ padding-top: 16upx;
|
|
|
+ padding-bottom: 16upx;
|
|
|
+ float:right;
|
|
|
+ margin-right:30upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .other-btn {
|
|
|
+ color: $fontColor2;
|
|
|
+ .iconfont {
|
|
|
+ font-size: 24upx;
|
|
|
+ color: $fontColor3;
|
|
|
+ transform: scale(0.4);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.input-wrap {
|
|
|
+ padding: 22upx 20upx 22upx 30upx;
|
|
|
+ .search-bar {
|
|
|
+ display:inline-block;
|
|
|
+ width:560upx;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
shish