|
|
@@ -1,507 +1,527 @@
|
|
|
<template>
|
|
|
- <div class="app-content" @click="operateBottomShow = false">
|
|
|
- <app-tabs
|
|
|
- :tabs="tabs"
|
|
|
- :isFixed="true"
|
|
|
- :currentTab="tabIndex"
|
|
|
- @change="change"
|
|
|
- itemWidth="50%" />
|
|
|
- <!-- 中间 -->
|
|
|
- <div class="app-middle">
|
|
|
- <scroll-view scroll-y scroll-with-animation class="tab-view" :scroll-top="scrollTop" :style="{height:height+'px'}">
|
|
|
- <div v-for="(item,index) in tabbar" :key="index" class="tab-bar-item" :class="[currentTab==index ? 'active' : '']" :data-current="index" @tap.stop="swichNav($event ,item)">
|
|
|
- <text>{{item.categoryName || '暂无'}}</text>
|
|
|
- </div>
|
|
|
- </scroll-view>
|
|
|
- <block v-for="(item,index) in tabbar" :key="index">
|
|
|
- <scroll-view scroll-y class="right-box" :style="{height:height+'px'}" v-if="currentTab==index">
|
|
|
- <!--内容部分 start -->
|
|
|
- <block v-if="!$util.isEmpty(list.data)">
|
|
|
- <div class="page-view">
|
|
|
- <div class="goods-list" v-for="(item, index) in list.data" :key="index">
|
|
|
- <div class="goods-list-top">
|
|
|
- <div class="img-blo">
|
|
|
- <img :src="item.imgList[0].middle" alt="商品图" mode="center" />
|
|
|
- </div>
|
|
|
- <div class="goods-det">
|
|
|
- <div class="goods-det-top">
|
|
|
- <div class="goods-name">{{ item.goodsName }}</div>
|
|
|
- <!-- <div class="goods-sales">已售{{ item.sold }}</div> -->
|
|
|
- <!-- <div class="goods-sales">{{ item.categoryName }}</div> -->
|
|
|
- </div>
|
|
|
- <div class="operate-wrap">
|
|
|
- <div class="goods-price">￥{{ item.price }}</div>
|
|
|
- <div class="operate-icon-wrap" @click="operateFn(item, index)">
|
|
|
- <div class="operate-icon">
|
|
|
- <i class="iconfont" :class="[ index == operateIndex ? 'iconcaozuojihuo' : 'iconcaozuo']"></i>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="goods-list-bottom flex-center-between">
|
|
|
- <div>已售: {{ item.sold }}</div>
|
|
|
- <div>销量: {{ item.stock }}</div>
|
|
|
- <div>浏览: {{ item.viewNum }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 操作 -->
|
|
|
- <operate-module
|
|
|
- @clickFn="operateList"
|
|
|
- v-if="operateShow"
|
|
|
- :top="operateTop"
|
|
|
- :right="30"
|
|
|
- :btnData="btnData" />
|
|
|
- </block>
|
|
|
- <block v-else>
|
|
|
- <app-wrapper-empty
|
|
|
- title="暂无数据"
|
|
|
- :is-empty="$util.isEmpty(list.data)" />
|
|
|
- </block>
|
|
|
- <!--内容部分 end -->
|
|
|
- </scroll-view>
|
|
|
- </block>
|
|
|
- </div>
|
|
|
- <!-- 底部 -->
|
|
|
- <div class="app-footer">
|
|
|
- <div class="btn-list other-btn" @click.stop="changeOperateShowFn">
|
|
|
- <i class="iconfont iconxiala" :class="[operateBottomShow ? 'animate-open' : 'animate-close']"></i>
|
|
|
- <span>其他设置</span>
|
|
|
- </div>
|
|
|
- <div class="btn-list">
|
|
|
- <button class="admin-button-com default" @click="pageTo('/admin/goodsManage/category')">分类管理</button>
|
|
|
- </div>
|
|
|
- <div class="btn-list">
|
|
|
- <button class="admin-button-com blue" @click="pageTo('/admin/goodsManage/add')">新增商品</button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 操作弹窗 -->
|
|
|
- <operate-line-module
|
|
|
- v-if="operateBottomShow"
|
|
|
- :btnData="btnBottomData"
|
|
|
- @clickFn="operateLine"
|
|
|
- :bottom="120"
|
|
|
- :right="528" />
|
|
|
- <!-- 删除提示 -->
|
|
|
- <modal-module
|
|
|
- :show="delModal"
|
|
|
- :maskClosable="false"
|
|
|
- @cancel="modalCancel"
|
|
|
- @click="delModalClick"
|
|
|
- content="确定删除该商品吗？"
|
|
|
- color="#333"
|
|
|
- :size="32"
|
|
|
- padding="30rpx 30rpx">
|
|
|
- </modal-module>
|
|
|
- </div>
|
|
|
+ <div class="app-content" @click="operateBottomShow = false">
|
|
|
+ <app-tabs :tabs="tabs" :isFixed="true" :currentTab="tabIndex" @change="change" itemWidth="50%" />
|
|
|
+ <!-- 中间 -->
|
|
|
+ <div class="app-middle">
|
|
|
+ <scroll-view
|
|
|
+ scroll-y
|
|
|
+ scroll-with-animation
|
|
|
+ class="tab-view"
|
|
|
+ :scroll-top="scrollTop"
|
|
|
+ :style="{height:height+'px'}"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-for="(item,index) in tabbar"
|
|
|
+ :key="index"
|
|
|
+ class="tab-bar-item"
|
|
|
+ :class="[currentTab==index ? 'active' : '']"
|
|
|
+ :data-current="index"
|
|
|
+ @tap.stop="swichNav($event ,item)"
|
|
|
+ >
|
|
|
+ <text>{{item.categoryName || '暂无'}}</text>
|
|
|
+ </div>
|
|
|
+ </scroll-view>
|
|
|
+ <block v-for="(item,index) in tabbar" :key="index">
|
|
|
+ <scroll-view
|
|
|
+ scroll-y
|
|
|
+ class="right-box"
|
|
|
+ :style="{height:height+'px'}"
|
|
|
+ v-if="currentTab==index"
|
|
|
+ >
|
|
|
+ <!--内容部分 start -->
|
|
|
+ <block v-if="!$util.isEmpty(list.data)">
|
|
|
+ <div class="page-view">
|
|
|
+ <div class="goods-list" v-for="(item, index) in list.data" :key="index">
|
|
|
+ <div class="goods-list-top">
|
|
|
+ <div class="img-blo">
|
|
|
+ <img :src="item.smallImgList[0]" alt="商品图" mode="heightFix" style="height:130rpx;" />
|
|
|
+ </div>
|
|
|
+ <div class="goods-det">
|
|
|
+ <div class="goods-det-top">
|
|
|
+ <div class="goods-name">{{ item.goodsName }}</div>
|
|
|
+ <!-- <div class="goods-sales">已售{{ item.sold }}</div> -->
|
|
|
+ <!-- <div class="goods-sales">{{ item.categoryName }}</div> -->
|
|
|
+ </div>
|
|
|
+ <div class="operate-wrap">
|
|
|
+ <div class="goods-price">￥{{ item.price }}</div>
|
|
|
+ <div class="operate-icon-wrap" @click="operateFn(item, index)">
|
|
|
+ <div class="operate-icon">
|
|
|
+ <i
|
|
|
+ class="iconfont"
|
|
|
+ :class="[ index == operateIndex ? 'iconcaozuojihuo' : 'iconcaozuo']"
|
|
|
+ style="font-size:38rpx;"
|
|
|
+ ></i>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="goods-list-bottom flex-center-between">
|
|
|
+ <div>已售: {{ item.sold }}</div>
|
|
|
+ <div>库存: {{ item.stock == -1 ? '充足' : item.stock }}</div>
|
|
|
+ <div>浏览: {{ item.viewNum }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 操作 -->
|
|
|
+ <operate-module
|
|
|
+ @clickFn="operateList"
|
|
|
+ v-if="operateShow"
|
|
|
+ :top="operateTop"
|
|
|
+ :right="30"
|
|
|
+ :btnData="btnData"
|
|
|
+ />
|
|
|
+ </block>
|
|
|
+ <block v-else>
|
|
|
+ <app-wrapper-empty title="暂无数据" :is-empty="$util.isEmpty(list.data)" />
|
|
|
+ </block>
|
|
|
+ <!--内容部分 end -->
|
|
|
+ </scroll-view>
|
|
|
+ </block>
|
|
|
+ </div>
|
|
|
+ <!-- 底部 -->
|
|
|
+ <div class="app-footer">
|
|
|
+ <div class="btn-list other-btn" @click.stop="changeOperateShowFn">
|
|
|
+ <i
|
|
|
+ class="iconfont iconxiala"
|
|
|
+ :class="[operateBottomShow ? 'animate-open' : 'animate-close']"
|
|
|
+ ></i>
|
|
|
+ <span>其他设置</span>
|
|
|
+ </div>
|
|
|
+ <div class="btn-list">
|
|
|
+ <button class="admin-button-com default" @click="pageTo('/admin/goodsManage/category')">分类管理</button>
|
|
|
+ </div>
|
|
|
+ <div class="btn-list">
|
|
|
+ <button class="admin-button-com blue" @click="pageTo('/admin/goodsManage/add')">新增商品</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 操作弹窗 -->
|
|
|
+ <operate-line-module
|
|
|
+ v-if="operateBottomShow"
|
|
|
+ :btnData="btnBottomData"
|
|
|
+ @clickFn="operateLine"
|
|
|
+ :bottom="120"
|
|
|
+ :right="528"
|
|
|
+ />
|
|
|
+ <!-- 删除提示 -->
|
|
|
+ <modal-module
|
|
|
+ :show="delModal"
|
|
|
+ :maskClosable="false"
|
|
|
+ @cancel="modalCancel"
|
|
|
+ @click="delModalClick"
|
|
|
+ content="确定删除该商品吗？"
|
|
|
+ color="#333"
|
|
|
+ :size="32"
|
|
|
+ padding="30rpx 30rpx"
|
|
|
+ ></modal-module>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import AppTabs from '@/components/plugin/tabs'
|
|
|
- import OperateModule from '@/admin/home/components/module/operate'
|
|
|
- import OperateLineModule from '@/admin/home/components/module/operate-line'
|
|
|
- import AppWrapperEmpty from '@/components/app-wrapper-empty'
|
|
|
- import ModalModule from '@/components/plugin/modal'
|
|
|
- // api
|
|
|
- import { categoryListB, getCategoryGoodsB, delB, changeStatusB } from '@/api/goods'
|
|
|
- import { list } from '@/mixins'
|
|
|
- export default {
|
|
|
- name: 'goods-manage-list',
|
|
|
- components: {
|
|
|
- AppTabs,
|
|
|
- OperateLineModule,
|
|
|
- OperateModule,
|
|
|
- AppWrapperEmpty,
|
|
|
- ModalModule
|
|
|
- },
|
|
|
- mixins: [list],
|
|
|
- data() {
|
|
|
- return {
|
|
|
- // tabs
|
|
|
- tabIndex: 0,
|
|
|
- tabs: [
|
|
|
- {
|
|
|
- name: '出售中'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '已下架'
|
|
|
- }
|
|
|
- ],
|
|
|
- // 中间
|
|
|
- tabbar: [],
|
|
|
- height: 0, // scroll-view高度
|
|
|
- currentTab: 0, // 预设当前项的值
|
|
|
- scrollTop: 0, // tab标题的滚动条位置
|
|
|
- form: {
|
|
|
- categoryId: ''
|
|
|
- },
|
|
|
- // 删除弹窗
|
|
|
- delModal: false,
|
|
|
- // 操作菜单
|
|
|
- operateData: {},
|
|
|
- operateShow: false,
|
|
|
- operateIndex: null,
|
|
|
- operateTop: 0,
|
|
|
- // 底部操作
|
|
|
- operateBottomShow: false,
|
|
|
- btnBottomData: [
|
|
|
- // {
|
|
|
- // name: '图库管理',
|
|
|
- // click: () => this.$util.pageTo('/admin/goodsManage/img-store')
|
|
|
- // },
|
|
|
- {
|
|
|
- name: '运费设置',
|
|
|
- click: () => this.$util.pageTo('/admin/goodsManage/freight')
|
|
|
- },
|
|
|
- {
|
|
|
- name: '通用简介',
|
|
|
- click: () => {
|
|
|
- console.log(780)
|
|
|
- // alert('请在电脑端进行设置!')
|
|
|
- this.$msg('请在电脑端进行设置!')
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- name: '自动涨价',
|
|
|
- click: () => this.$util.pageTo('/admin/goodsManage/price-increase')
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- btnData() {
|
|
|
- return [
|
|
|
- // {
|
|
|
- // text: '置顶',
|
|
|
- // icon: 'iconzhiding',
|
|
|
- // click: () => {
|
|
|
- // this.delModal = true
|
|
|
- // }
|
|
|
- // },
|
|
|
- {
|
|
|
- text: '编辑',
|
|
|
- icon: 'iconbianji',
|
|
|
- click: function() {
|
|
|
- this.$util.pageTo({
|
|
|
- url: '/admin/goodsManage/add',
|
|
|
- query: {
|
|
|
- type: this.tabIndex,
|
|
|
- id: this.operateData.id
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- text: this.operateData.status == 1 ? '下架' : '上架',
|
|
|
- icon: this.operateData.status == 1 ? 'iconxiajia' : 'iconqiyong',
|
|
|
- click: () => {
|
|
|
- this.changeStatusFn()
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- text: '删除',
|
|
|
- icon: 'iconshanchu1',
|
|
|
- click: () => {
|
|
|
- this.delModal = true
|
|
|
- }
|
|
|
- }
|
|
|
- // {
|
|
|
- // text: '分享',
|
|
|
- // icon: 'iconfenxiang1',
|
|
|
- // click: () => {
|
|
|
- // this.$msg('功能开发中。。。')
|
|
|
- // }
|
|
|
- // }
|
|
|
- ]
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad: function() {
|
|
|
- if (this.$util.isLogin()) {
|
|
|
- setTimeout(() => {
|
|
|
- uni.getSystemInfo({
|
|
|
- success: res => {
|
|
|
- this.height = res.windowHeight - 90
|
|
|
- this.sInit()
|
|
|
- }
|
|
|
- })
|
|
|
- }, 50)
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- operateLine(index){
|
|
|
- if(index === 0){
|
|
|
- this.$util.pageTo('/admin/goodsManage/freight')
|
|
|
- }else if(index ===1 ){
|
|
|
- this.$msg('请在电脑端进行设置!')
|
|
|
- }else if(index ===2 ){
|
|
|
- this.$util.pageTo('/admin/goodsManage/price-increase')
|
|
|
- }
|
|
|
- },
|
|
|
- operateList(index){
|
|
|
- if(index === 0){
|
|
|
- this.$util.pageTo({
|
|
|
- url: '/admin/goodsManage/add',
|
|
|
- query: {
|
|
|
- type: this.tabIndex,
|
|
|
- id: this.operateData.id
|
|
|
- }
|
|
|
- })
|
|
|
- }else if(index === 1){
|
|
|
- this.changeStatusFn()
|
|
|
- }else if(index === 2){
|
|
|
- this.delModal = true
|
|
|
- }
|
|
|
- },
|
|
|
- async sInit() {
|
|
|
- this._getClass()
|
|
|
- this._list()
|
|
|
- },
|
|
|
- // 分类
|
|
|
- _getClass() {
|
|
|
- categoryListB().then(res => {
|
|
|
- this.tabbar = res.data
|
|
|
- })
|
|
|
- },
|
|
|
- // 列表
|
|
|
- _list() {
|
|
|
- return getCategoryGoodsB({
|
|
|
- status: this.tabIndex == 0 ? 1 : 0,
|
|
|
- ...this.form
|
|
|
- }).then(res => {
|
|
|
- this.completes(res)
|
|
|
- })
|
|
|
- },
|
|
|
- // tabs
|
|
|
- change(e) {
|
|
|
- if (this.tabIndex == e.index) {
|
|
|
- return false
|
|
|
- } else {
|
|
|
- this.tabIndex = e.index
|
|
|
- this.operateCloseFn()
|
|
|
- this.resetList()
|
|
|
- this._list()
|
|
|
- }
|
|
|
- },
|
|
|
- // 操作按钮
|
|
|
- operateFn(item, index) {
|
|
|
- if (this.operateIndex == index) {
|
|
|
- this.operateCloseFn()
|
|
|
- } else {
|
|
|
- this.operateData = item
|
|
|
- this.operateData.index = index
|
|
|
- this.operateIndex = index
|
|
|
- this.operateTop = (index + 1) * 224 - 20
|
|
|
- this.operateShow = true
|
|
|
- }
|
|
|
- },
|
|
|
- // 关闭操作按钮
|
|
|
- operateCloseFn() {
|
|
|
- this.operateData = {}
|
|
|
- this.operateIndex = null
|
|
|
- this.operateShow = false
|
|
|
- },
|
|
|
- // 点击标题切换当前页时改变样式
|
|
|
- swichNav(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()
|
|
|
- // this.checkCor()
|
|
|
- }
|
|
|
- },
|
|
|
- // 判断当前滚动超过一屏时，设置tab标题滚动条。
|
|
|
- checkCor() {
|
|
|
- let that = this
|
|
|
- // 这里计算按照实际情况进行修改，动态数据要进行动态分析
|
|
|
- // 思路：窗体高度/单个分类高度 200rpx 转px计算 =>得到一屏幕所显示的个数，结合后台传回分类总数进行计算
|
|
|
- // 数据很多可以多次if判断然后进行滚动距离计算即可
|
|
|
- if (that.currentTab > 7) {
|
|
|
- that.scrollTop = 500
|
|
|
- } else {
|
|
|
- that.scrollTop = 0
|
|
|
- }
|
|
|
- },
|
|
|
- // operate
|
|
|
- // operateCancle() {
|
|
|
- // this.operateData = {}
|
|
|
- // this.operateIndex = null
|
|
|
- // this.operateShow = false
|
|
|
- // },
|
|
|
- changeOperateShowFn() {
|
|
|
- this.operateBottomShow = !this.operateBottomShow
|
|
|
- },
|
|
|
- changeStatusFn() {
|
|
|
- let status = this.operateData.status == 1 ? 0 : 1
|
|
|
- changeStatusB({
|
|
|
- id: this.operateData.id,
|
|
|
- status: status
|
|
|
- }).then(res => {
|
|
|
- this.list.data[this.operateIndex].status = status
|
|
|
- this.operateCloseFn()
|
|
|
- this.$msg('操作成功!')
|
|
|
- })
|
|
|
- },
|
|
|
- // delModal
|
|
|
- modalCancel() {
|
|
|
- this.delModal = false
|
|
|
- },
|
|
|
- delModalClick(e) {
|
|
|
- if (e.index === 0) {
|
|
|
- this.modalCancel()
|
|
|
- } else {
|
|
|
- delB({ id: this.operateData.id }).then(res => {
|
|
|
- this.modalCancel()
|
|
|
- this.operateCloseFn()
|
|
|
- this.$msg('删除成功!')
|
|
|
- this.resetList()
|
|
|
- this._list()
|
|
|
- })
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+import AppTabs from "@/components/plugin/tabs";
|
|
|
+import OperateModule from "@/admin/home/components/module/operate";
|
|
|
+import OperateLineModule from "@/admin/home/components/module/operate-line";
|
|
|
+import AppWrapperEmpty from "@/components/app-wrapper-empty";
|
|
|
+import ModalModule from "@/components/plugin/modal";
|
|
|
+// api
|
|
|
+import {
|
|
|
+ categoryListB,
|
|
|
+ getCategoryGoodsB,
|
|
|
+ delB,
|
|
|
+ changeStatusB
|
|
|
+} from "@/api/goods";
|
|
|
+import { list } from "@/mixins";
|
|
|
+export default {
|
|
|
+ name: "goods-manage-list",
|
|
|
+ components: {
|
|
|
+ AppTabs,
|
|
|
+ OperateLineModule,
|
|
|
+ OperateModule,
|
|
|
+ AppWrapperEmpty,
|
|
|
+ ModalModule
|
|
|
+ },
|
|
|
+ mixins: [list],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // tabs
|
|
|
+ tabIndex: 0,
|
|
|
+ tabs: [
|
|
|
+ {
|
|
|
+ name: "出售中"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "已下架"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ // 中间
|
|
|
+ tabbar: [],
|
|
|
+ height: 0, // scroll-view高度
|
|
|
+ currentTab: 0, // 预设当前项的值
|
|
|
+ scrollTop: 0, // tab标题的滚动条位置
|
|
|
+ form: {
|
|
|
+ categoryId: ""
|
|
|
+ },
|
|
|
+ // 删除弹窗
|
|
|
+ delModal: false,
|
|
|
+ // 操作菜单
|
|
|
+ operateData: {},
|
|
|
+ operateShow: false,
|
|
|
+ operateIndex: null,
|
|
|
+ operateTop: 0,
|
|
|
+ // 底部操作
|
|
|
+ operateBottomShow: false,
|
|
|
+ btnBottomData: [
|
|
|
+ {
|
|
|
+ name: "运费设置",
|
|
|
+ click: () => this.$util.pageTo("/admin/goodsManage/freight")
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "简要说明",
|
|
|
+ click: () => {
|
|
|
+ console.log(780);
|
|
|
+ this.$msg("请在电脑端进行修改!");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "自动涨价",
|
|
|
+ click: () => this.$util.pageTo("/admin/goodsManage/price-increase")
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ btnData() {
|
|
|
+ return [
|
|
|
+ // {
|
|
|
+ // text: '置顶',
|
|
|
+ // icon: 'iconzhiding',
|
|
|
+ // click: () => {
|
|
|
+ // this.delModal = true
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ text: "编辑",
|
|
|
+ icon: "iconbianji",
|
|
|
+ click: function() {
|
|
|
+ this.$util.pageTo({
|
|
|
+ url: "/admin/goodsManage/add",
|
|
|
+ query: {
|
|
|
+ type: this.tabIndex,
|
|
|
+ id: this.operateData.id
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: this.operateData.status == 1 ? "下架" : "上架",
|
|
|
+ icon: this.operateData.status == 1 ? "iconxiajia" : "iconqiyong",
|
|
|
+ click: () => {
|
|
|
+ this.changeStatusFn();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ text: "删除",
|
|
|
+ icon: "iconshanchu1",
|
|
|
+ click: () => {
|
|
|
+ this.delModal = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // {
|
|
|
+ // text: "分享",
|
|
|
+ // icon: "iconfenxiang1",
|
|
|
+ // click: () => {
|
|
|
+ // this.$msg("功能开发中...");
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ ];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad: function() {
|
|
|
+ if (this.$util.isLogin()) {
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.getSystemInfo({
|
|
|
+ success: res => {
|
|
|
+ this.height = res.windowHeight - 90;
|
|
|
+ this.sInit();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }, 50);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ operateLine(index) {
|
|
|
+ if (index === 0) {
|
|
|
+ this.$util.pageTo("/admin/goodsManage/freight");
|
|
|
+ } else if (index === 1) {
|
|
|
+ this.$msg("请在电脑端进行设置!");
|
|
|
+ } else if (index === 2) {
|
|
|
+ this.$util.pageTo("/admin/goodsManage/price-increase");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ operateList(index) {
|
|
|
+ if (index === 0) {
|
|
|
+ this.$util.pageTo({
|
|
|
+ url: "/admin/goodsManage/add",
|
|
|
+ query: {
|
|
|
+ type: this.tabIndex,
|
|
|
+ id: this.operateData.id
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else if (index === 1) {
|
|
|
+ this.changeStatusFn();
|
|
|
+ } else if (index === 2) {
|
|
|
+ this.delModal = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ async sInit() {
|
|
|
+ this._getClass();
|
|
|
+ this._list();
|
|
|
+ },
|
|
|
+ // 分类
|
|
|
+ _getClass() {
|
|
|
+ categoryListB().then(res => {
|
|
|
+ this.tabbar = res.data;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 列表
|
|
|
+ _list() {
|
|
|
+ return getCategoryGoodsB({
|
|
|
+ status: this.tabIndex == 0 ? 1 : 0,
|
|
|
+ ...this.form
|
|
|
+ }).then(res => {
|
|
|
+ this.completes(res);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // tabs
|
|
|
+ change(e) {
|
|
|
+ if (this.tabIndex == e.index) {
|
|
|
+ return false;
|
|
|
+ } else {
|
|
|
+ this.tabIndex = e.index;
|
|
|
+ this.operateCloseFn();
|
|
|
+ this.resetList();
|
|
|
+ this._list();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 操作按钮
|
|
|
+ operateFn(item, index) {
|
|
|
+ if (this.operateIndex == index) {
|
|
|
+ this.operateCloseFn();
|
|
|
+ } else {
|
|
|
+ this.operateData = item;
|
|
|
+ this.operateData.index = index;
|
|
|
+ this.operateIndex = index;
|
|
|
+ this.operateTop = (index + 1) * 224 - 20;
|
|
|
+ this.operateShow = true;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 关闭操作按钮
|
|
|
+ operateCloseFn() {
|
|
|
+ this.operateData = {};
|
|
|
+ this.operateIndex = null;
|
|
|
+ this.operateShow = false;
|
|
|
+ },
|
|
|
+ // 点击标题切换当前页时改变样式
|
|
|
+ swichNav(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();
|
|
|
+ // this.checkCor()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 判断当前滚动超过一屏时，设置tab标题滚动条。
|
|
|
+ checkCor() {
|
|
|
+ let that = this;
|
|
|
+ // 这里计算按照实际情况进行修改，动态数据要进行动态分析
|
|
|
+ // 思路：窗体高度/单个分类高度 200rpx 转px计算 =>得到一屏幕所显示的个数，结合后台传回分类总数进行计算
|
|
|
+ // 数据很多可以多次if判断然后进行滚动距离计算即可
|
|
|
+ if (that.currentTab > 7) {
|
|
|
+ that.scrollTop = 500;
|
|
|
+ } else {
|
|
|
+ that.scrollTop = 0;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // operate
|
|
|
+ // operateCancle() {
|
|
|
+ // this.operateData = {}
|
|
|
+ // this.operateIndex = null
|
|
|
+ // this.operateShow = false
|
|
|
+ // },
|
|
|
+ changeOperateShowFn() {
|
|
|
+ this.operateBottomShow = !this.operateBottomShow;
|
|
|
+ },
|
|
|
+ changeStatusFn() {
|
|
|
+ let status = this.operateData.status == 1 ? 0 : 1;
|
|
|
+ changeStatusB({
|
|
|
+ id: this.operateData.id,
|
|
|
+ status: status
|
|
|
+ }).then(res => {
|
|
|
+ this.list.data[this.operateIndex].status = status;
|
|
|
+ this.operateCloseFn();
|
|
|
+ this.$msg("操作成功!");
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // delModal
|
|
|
+ modalCancel() {
|
|
|
+ this.delModal = false;
|
|
|
+ },
|
|
|
+ delModalClick(e) {
|
|
|
+ if (e.index === 0) {
|
|
|
+ this.modalCancel();
|
|
|
+ } else {
|
|
|
+ delB({ id: this.operateData.id }).then(res => {
|
|
|
+ this.modalCancel();
|
|
|
+ this.operateCloseFn();
|
|
|
+ this.$msg("删除成功!");
|
|
|
+ this.resetList();
|
|
|
+ this._list();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
- .app-content {
|
|
|
- min-height: calc(100vh - 80px);
|
|
|
- padding-top: 80px;
|
|
|
- background-color: #fff;
|
|
|
- // padding-bottom: 100px;
|
|
|
- }
|
|
|
+.app-content {
|
|
|
+ min-height: calc(100vh - 80px);
|
|
|
+ padding-top: 80px;
|
|
|
+ background-color: #fff;
|
|
|
+ // padding-bottom: 100px;
|
|
|
+}
|
|
|
|
|
|
- page {
|
|
|
- background: #fff;
|
|
|
- }
|
|
|
+page {
|
|
|
+ background: #fff;
|
|
|
+}
|
|
|
|
|
|
- /* 左侧导航布局 start*/
|
|
|
+/* 左侧导航布局 start*/
|
|
|
|
|
|
- /* 隐藏scroll-view滚动条*/
|
|
|
+/* 隐藏scroll-view滚动条*/
|
|
|
|
|
|
- ::-webkit-scrollbar {
|
|
|
- width: 0;
|
|
|
- height: 0;
|
|
|
- color: transparent;
|
|
|
- }
|
|
|
+::-webkit-scrollbar {
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ color: transparent;
|
|
|
+}
|
|
|
|
|
|
- .tab-view {
|
|
|
- /* height: 100%; */
|
|
|
- width: 200upx;
|
|
|
- position: fixed;
|
|
|
- left: 0;
|
|
|
- z-index: 10;
|
|
|
- background-color: #f0f2f6;
|
|
|
+.tab-view {
|
|
|
+ /* height: 100%; */
|
|
|
+ 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;
|
|
|
- }
|
|
|
+ .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: 26px;
|
|
|
- background: #fff;
|
|
|
- }
|
|
|
+ .active {
|
|
|
+ position: relative;
|
|
|
+ color: $mainColor;
|
|
|
+ font-size: 26px;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
|
|
|
- .active::before {
|
|
|
- content: '';
|
|
|
- position: absolute;
|
|
|
- border-left: 8upx solid $mainColor;
|
|
|
- height: 100%;
|
|
|
- left: 0;
|
|
|
- }
|
|
|
- }
|
|
|
+ .active::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ border-left: 8upx solid $mainColor;
|
|
|
+ height: 100%;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
- /* 左侧导航布局 end*/
|
|
|
+/* 左侧导航布局 end*/
|
|
|
|
|
|
- .right-box {
|
|
|
- width: 100%;
|
|
|
- position: fixed;
|
|
|
- padding-left: 220upx;
|
|
|
- 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: 40px 0;
|
|
|
- .goods-list-top {
|
|
|
- position: relative;
|
|
|
- @include disFlex(flex-start, flex-start);
|
|
|
- }
|
|
|
- .goods-list-bottom {
|
|
|
- width: 74%;
|
|
|
- margin-top: 16px;
|
|
|
- color: $fontColor2;
|
|
|
- }
|
|
|
- .img-blo {
|
|
|
- width: 130px;
|
|
|
- height: 130px;
|
|
|
- margin-right: 20px;
|
|
|
- }
|
|
|
- .goods-det {
|
|
|
- width: calc(100% - 150px);
|
|
|
- // padding-top: 18px;
|
|
|
- font-size: 28px;
|
|
|
- .operate-wrap {
|
|
|
- @include disFlex(flex-end, space-between);
|
|
|
- }
|
|
|
- .operate-icon-wrap {
|
|
|
- left: -20px;
|
|
|
- }
|
|
|
- .goods-name {
|
|
|
- margin-bottom: 10px;
|
|
|
- }
|
|
|
- .goods-sales {
|
|
|
- color: $fontColor3;
|
|
|
- font-size: 24px;
|
|
|
- }
|
|
|
- .goods-price {
|
|
|
- margin-top: 50px;
|
|
|
- color: #ff2842;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- // 底部
|
|
|
- .app-footer {
|
|
|
- justify-content: space-between;
|
|
|
- .btn-list {
|
|
|
- width: 33.33%;
|
|
|
- border-left: 1px solid $borderColor;
|
|
|
- &:first-child {
|
|
|
- border-left: 0;
|
|
|
- }
|
|
|
- .admin-button-com {
|
|
|
- width: 160px;
|
|
|
- padding-top: 16px;
|
|
|
- padding-bottom: 16px;
|
|
|
- }
|
|
|
- }
|
|
|
- .other-btn {
|
|
|
- color: $fontColor2;
|
|
|
- .iconfont {
|
|
|
- font-size: 24px;
|
|
|
- color: $fontColor3;
|
|
|
- transform: scale(0.4);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+.right-box {
|
|
|
+ width: 100%;
|
|
|
+ position: fixed;
|
|
|
+ padding-left: 220upx;
|
|
|
+ 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: 40px 0;
|
|
|
+ .goods-list-top {
|
|
|
+ position: relative;
|
|
|
+ @include disFlex(flex-start, flex-start);
|
|
|
+ }
|
|
|
+ .goods-list-bottom {
|
|
|
+ width: 74%;
|
|
|
+ margin-top: 16px;
|
|
|
+ color: $fontColor2;
|
|
|
+ }
|
|
|
+ .img-blo {
|
|
|
+ width: 130px;
|
|
|
+ height: 130px;
|
|
|
+ margin-right: 20px;
|
|
|
+ }
|
|
|
+ .goods-det {
|
|
|
+ width: calc(100% - 150px);
|
|
|
+ // padding-top: 18px;
|
|
|
+ font-size: 28px;
|
|
|
+ .operate-wrap {
|
|
|
+ @include disFlex(flex-end, space-between);
|
|
|
+ }
|
|
|
+ .operate-icon-wrap {
|
|
|
+ left: -20px;
|
|
|
+ }
|
|
|
+ .goods-name {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .goods-sales {
|
|
|
+ color: $fontColor3;
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+ .goods-price {
|
|
|
+ margin-top: 50px;
|
|
|
+ color: #ff2842;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+// 底部
|
|
|
+.app-footer {
|
|
|
+ justify-content: space-between;
|
|
|
+ .btn-list {
|
|
|
+ width: 33.33%;
|
|
|
+ border-left: 1px solid $borderColor;
|
|
|
+ &:first-child {
|
|
|
+ border-left: 0;
|
|
|
+ }
|
|
|
+ .admin-button-com {
|
|
|
+ width: 160px;
|
|
|
+ padding-top: 16px;
|
|
|
+ padding-bottom: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .other-btn {
|
|
|
+ color: $fontColor2;
|
|
|
+ .iconfont {
|
|
|
+ font-size: 24px;
|
|
|
+ color: $fontColor3;
|
|
|
+ transform: scale(0.4);
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
shish