|
|
@@ -0,0 +1,361 @@
|
|
|
+<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="padding-left:10upx;">
|
|
|
+ <button class="admin-button-com middle blue" style="margin-right:6upx;" @click="addGoods()">新增绿植</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" @click="edit(goodsItem.id)">
|
|
|
+ <view class="img-blo">
|
|
|
+
|
|
|
+ <view v-if="goodsItem.status == 0" class="sold-out">
|
|
|
+ <view class="sold-out-xj">已下架</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <img :src="goodsItem.smallCover" mode="aspectFit" />
|
|
|
+ </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; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width:350upx;">{{ goodsItem.name||'' }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="operate-wrap" style="margin-bottom:15upx;">
|
|
|
+ <view class="goods-price" style="font-size:23upx;">￥{{ goodsItem.price?parseFloat(goodsItem.price):0 }}</view>
|
|
|
+ </view>
|
|
|
+ <view class="operate-wrap">
|
|
|
+ <view style="font-size:23upx;">
|
|
|
+ <text>库存</text> <text style="font-weight:bold;margin-left:8upx;">{{goodsItem.stock}}</text>
|
|
|
+ <text style="margin-left:18upx;color:#CCCCCC;">已售 {{ goodsItem.actualSold }}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="goods-list-bottom flex-center-between">
|
|
|
+ <text @click.stop="moreToDo(goodsItem)">更多</text>
|
|
|
+ <text @click.stop="getSaleRecord">销售记录</text>
|
|
|
+ <text @click.stop="getStockChange(goodsItem)">库存明细</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </block>
|
|
|
+ <block v-else>
|
|
|
+ <app-wrapper-empty title="暂无商品" :is-empty="$util.isEmpty(list.data)" />
|
|
|
+ </block>
|
|
|
+ </scroll-view>
|
|
|
+ </block>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!--选择支数 -->
|
|
|
+ <uni-popup ref="selectFlowerNumRef" background-color="#fff" type="center" :animation="false">
|
|
|
+ <view style="display:flex;padding:20upx;height:25vh;justify-content: space-between;align-items:center;flex-wrap:wrap;">
|
|
|
+
|
|
|
+ <text v-for="(item, index) in flowerNumList" :key="index" @click="selectFlowerNum(item.num)"
|
|
|
+ style="margin-left:25upx;border:1upx solid #999999;width:100upx;height:100upx;border-radius:20upx;justify-content:center;align-items:center;display:flex;">
|
|
|
+ {{item.name}}
|
|
|
+ </text>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </uni-popup>
|
|
|
+
|
|
|
+ </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 {categoryListInfo,getCategoryToGoods,print} from "@/api/goods"
|
|
|
+import { list } from "@/mixins"
|
|
|
+export default {
|
|
|
+ name: "list",
|
|
|
+ components: {
|
|
|
+ OperateModule,
|
|
|
+ AppWrapperEmpty,
|
|
|
+ ModalModule,
|
|
|
+ AppSearchModule
|
|
|
+ },
|
|
|
+ mixins: [list],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tabbar: [],
|
|
|
+ height: 0,
|
|
|
+ currentTab: 0,
|
|
|
+ scrollTop: 0,
|
|
|
+ catId: "",
|
|
|
+ delModal: false,
|
|
|
+ operateData: {},
|
|
|
+ operateShow: false,
|
|
|
+ operateIndex: null,
|
|
|
+ operateTop: 0,
|
|
|
+ autoLoad:false,
|
|
|
+ flowerNum:0,
|
|
|
+ flowerNumList:[{num:6,name:6},{num:9,name:9},{num:11,name:11},{num:19,name:19},{num:33,name:33},{num:52,name:52},{num:66,name:66},{num:99,name:99},{num:0,name:'取消'}],
|
|
|
+ py:''
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ },
|
|
|
+ onLoad: function() {
|
|
|
+ this.getCategoryData()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init(){
|
|
|
+
|
|
|
+ },
|
|
|
+ moreToDo(item){
|
|
|
+ let that=this;
|
|
|
+ let doList = ['打1个标签', '打2个标签','打5个标签', '打10个标签','设置为散花']
|
|
|
+ let doNum = [1,2,5,10,20]
|
|
|
+ uni.showActionSheet({
|
|
|
+ itemList: doList,
|
|
|
+ success: function (respond) {
|
|
|
+ let index = respond.tapIndex
|
|
|
+ if(index == 4){
|
|
|
+ that.$msg('开发中')
|
|
|
+ return
|
|
|
+ }
|
|
|
+ let currentNum = Number(doNum[index])
|
|
|
+ print({id:item.id,num:currentNum}).then(res=>{
|
|
|
+ if(res.code == 1){
|
|
|
+ that.$msg(res.msg)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ searchFn(){
|
|
|
+
|
|
|
+ },
|
|
|
+ selectFlowerNumFn(){
|
|
|
+ this.$refs.selectFlowerNumRef.open('top')
|
|
|
+ },
|
|
|
+ selectFlowerNum(num){
|
|
|
+ this.$refs.selectFlowerNumRef.close()
|
|
|
+ this.flowerNum = num
|
|
|
+ this.resetList();
|
|
|
+ this.getGoodsList();
|
|
|
+ },
|
|
|
+ getSaleRecord(){
|
|
|
+ this.$msg('开发中')
|
|
|
+ },
|
|
|
+ getStockChange(item){
|
|
|
+ this.$util.pageTo({url: "/admin/goods/stockChange?id="+item.id+'&name='+item.name})
|
|
|
+ },
|
|
|
+ goBottom(){
|
|
|
+ if (!this.list.finished) {
|
|
|
+ this.getGoodsList().then((res) => {
|
|
|
+ uni.stopPullDownRefresh();
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ uni.stopPullDownRefresh();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ addGoods(){
|
|
|
+ this.$util.pageTo({url:"/admin/goods/plantCg"})
|
|
|
+ },
|
|
|
+ cgPlant(){
|
|
|
+ this.$util.pageTo({url:"/admin/goods/plant"})
|
|
|
+ },
|
|
|
+ edit(id){
|
|
|
+ this.$util.pageTo({ url: "/admin/goods/detail", query: { id: id } })
|
|
|
+ },
|
|
|
+ getCategoryData() {
|
|
|
+ categoryListInfo({flower:0}).then(res => {
|
|
|
+ this.tabbar = res.data;
|
|
|
+ if(this.tabbar && this.tabbar[0] && this.tabbar[0].id){
|
|
|
+ this.catId = this.tabbar[0].id
|
|
|
+ this.getGoodsList()
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getGoodsList() {
|
|
|
+ return getCategoryToGoods({ status:'', page: this.list.page, catId:this.catId,flowerNum:this.flowerNum }).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.catId = item.id;
|
|
|
+ this.resetList();
|
|
|
+ this.getGoodsList();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</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;
|
|
|
+ padding-bottom:120upx;
|
|
|
+ .tab-bar-item {
|
|
|
+ width: 200upx;
|
|
|
+ height: 100upx;
|
|
|
+ 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:100vh;
|
|
|
+ position: fixed;
|
|
|
+ padding-left:220upx;
|
|
|
+ padding-bottom:120upx;
|
|
|
+ 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:9upx 25upx 9upx 25upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .img-blo {
|
|
|
+ width: 130upx;
|
|
|
+ height: 130upx;
|
|
|
+ margin-right: 20upx;
|
|
|
+ & > img {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sold-out{
|
|
|
+ z-index:10;
|
|
|
+ width:130upx;
|
|
|
+ height:130upx;
|
|
|
+ background-color:black;
|
|
|
+ position:absolute;
|
|
|
+ top:0;
|
|
|
+ left:0;
|
|
|
+ opacity: 0.5;
|
|
|
+ color:white;
|
|
|
+ text-align:center;
|
|
|
+ .sold-out-xj{
|
|
|
+ line-height:130upx;
|
|
|
+ font-size:24upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .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 {
|
|
|
+ display: flex;
|
|
|
+ padding: 22upx 20upx 22upx 13upx;
|
|
|
+ .search-bar {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
shish