|
|
@@ -13,16 +13,31 @@
|
|
|
<!--内容部分 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" @click="pageTo(`/pages/goods/detail?id=${item.id}`)">
|
|
|
- <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-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 class="goods-price">¥{{ item.price }}</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>
|
|
|
@@ -51,205 +66,251 @@
|
|
|
</div>
|
|
|
<!-- 操作弹窗 -->
|
|
|
<operate-line-module v-if="operateBottomShow" :btnData="btnBottomData" :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'
|
|
|
-// api
|
|
|
-import { categoryListB, getCategoryGoodsB } from '@/api/goods'
|
|
|
-import { list } from '@/mixins'
|
|
|
-export default {
|
|
|
- name: 'goods-manage-list',
|
|
|
- components: {
|
|
|
- AppTabs,
|
|
|
- OperateLineModule,
|
|
|
- OperateModule,
|
|
|
- AppWrapperEmpty
|
|
|
- },
|
|
|
- mixins: [list],
|
|
|
- data() {
|
|
|
- return {
|
|
|
- // tabs
|
|
|
- tabIndex: 0,
|
|
|
- tabs: [
|
|
|
- {
|
|
|
- name: '出售中'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '已下架'
|
|
|
- }
|
|
|
- ],
|
|
|
- // 中间
|
|
|
- tabbar: [],
|
|
|
- height: 0, // scroll-view高度
|
|
|
- currentTab: 0, // 预设当前项的值
|
|
|
- scrollTop: 0, // tab标题的滚动条位置
|
|
|
- form: {
|
|
|
- categoryId: ''
|
|
|
- },
|
|
|
- // 操作菜单
|
|
|
- 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: () => alert('请在电脑端进行设置!')
|
|
|
- },
|
|
|
- {
|
|
|
- name: '自动涨价',
|
|
|
- click: () => this.$util.pageTo('/admin/goodsManage/price-increase')
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- btnData() {
|
|
|
- return [
|
|
|
- {
|
|
|
- text: '置顶',
|
|
|
- icon: 'iconzhiding',
|
|
|
- click: () => {
|
|
|
- this.delModal = true
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- text: '编辑',
|
|
|
- icon: 'iconbianji',
|
|
|
- click: () => {
|
|
|
- this.$util.pageTo({
|
|
|
- url: '/admin/ad/add',
|
|
|
- query: {
|
|
|
- type: this.tabIndex,
|
|
|
- id: this.operateData.id
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- },
|
|
|
- {
|
|
|
- text: this.operateData.status == 1 ? '下架' : '启用',
|
|
|
- icon: this.operateData.status == 1 ? 'iconxiajia' : 'iconqiyong',
|
|
|
- click: () => {
|
|
|
- this.changeStatusFn()
|
|
|
+ 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: ''
|
|
|
},
|
|
|
- {
|
|
|
- text: '删除',
|
|
|
- icon: 'iconshanchu1',
|
|
|
- click: () => {
|
|
|
- this.delModal = true
|
|
|
+ // 删除弹窗
|
|
|
+ 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: () => alert('请在电脑端进行设置!')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '自动涨价',
|
|
|
+ click: () => this.$util.pageTo('/admin/goodsManage/price-increase')
|
|
|
}
|
|
|
- }
|
|
|
- ]
|
|
|
- }
|
|
|
- },
|
|
|
- onLoad: function() {
|
|
|
- if (this.$util.isLogin()) {
|
|
|
- setTimeout(() => {
|
|
|
- uni.getSystemInfo({
|
|
|
- success: res => {
|
|
|
- this.height = res.windowHeight - 90
|
|
|
- this.sInit()
|
|
|
- }
|
|
|
- })
|
|
|
- }, 50)
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- 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) * 214
|
|
|
- this.operateShow = true
|
|
|
+ computed: {
|
|
|
+ btnData() {
|
|
|
+ return [
|
|
|
+ // {
|
|
|
+ // text: '置顶',
|
|
|
+ // icon: 'iconzhiding',
|
|
|
+ // click: () => {
|
|
|
+ // this.delModal = true
|
|
|
+ // }
|
|
|
+ // },
|
|
|
+ {
|
|
|
+ text: '编辑',
|
|
|
+ icon: 'iconbianji',
|
|
|
+ click: () => {
|
|
|
+ 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('功能开发中。。。')
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ]
|
|
|
}
|
|
|
},
|
|
|
- // 关闭操作按钮
|
|
|
- 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()
|
|
|
+ onLoad: function() {
|
|
|
+ if (this.$util.isLogin()) {
|
|
|
+ setTimeout(() => {
|
|
|
+ uni.getSystemInfo({
|
|
|
+ success: res => {
|
|
|
+ this.height = res.windowHeight - 90
|
|
|
+ this.sInit()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }, 50)
|
|
|
}
|
|
|
},
|
|
|
- // 判断当前滚动超过一屏时,设置tab标题滚动条。
|
|
|
- checkCor() {
|
|
|
- let that = this
|
|
|
- // 这里计算按照实际情况进行修改,动态数据要进行动态分析
|
|
|
- // 思路:窗体高度/单个分类高度 200rpx 转px计算 =>得到一屏幕所显示的个数,结合后台传回分类总数进行计算
|
|
|
- // 数据很多可以多次if判断然后进行滚动距离计算即可
|
|
|
- if (that.currentTab > 7) {
|
|
|
- that.scrollTop = 500
|
|
|
- } else {
|
|
|
- that.scrollTop = 0
|
|
|
+ methods: {
|
|
|
+ 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()
|
|
|
+ })
|
|
|
+ }
|
|
|
}
|
|
|
- },
|
|
|
- // operate
|
|
|
- changeOperateShowFn() {
|
|
|
- this.operateBottomShow = !this.operateBottomShow
|
|
|
}
|
|
|
}
|
|
|
-}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -324,16 +385,31 @@ export default {
|
|
|
box-sizing: border-box;
|
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
|
.goods-list {
|
|
|
- @include disFlex(flex-start, flex-start);
|
|
|
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: 200px;
|
|
|
- height: 200px;
|
|
|
+ width: 130px;
|
|
|
+ height: 130px;
|
|
|
margin-right: 20px;
|
|
|
}
|
|
|
.goods-det {
|
|
|
- padding-top: 18px;
|
|
|
+ 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;
|
|
|
}
|
|
|
@@ -343,7 +419,7 @@ export default {
|
|
|
}
|
|
|
.goods-price {
|
|
|
margin-top: 50px;
|
|
|
- color: $mainColor;
|
|
|
+ color: #ff2842;
|
|
|
font-weight: bold;
|
|
|
}
|
|
|
}
|