商品管理

xuxy

2024-06-25 8af3db52a632968206ca2bc7f9bd6b4662350232

 pages/farmer/flower-manage/flower-manage.vue

@@ -1,6 +1,73 @@
<template>
   <view>
		
   <view class="flow-manage">
      <view class="top-buttons" v-if="type==='all'">
         <view @click.stop="clickButton('add')" class="button button-add"></view>
         <view @click.stop="clickButton('in')" class="button button-search-in"></view>
         <view @click.stop="clickButton('unpass')" class="button button-search-unpass"></view>
         <view @click.stop="clickButton('inpass')" class="button button-search-inpass"></view>
         <view @click.stop="clickButton('delete')" class="button button-search-delete"></view>

      </view>

      <view class="p15" style="min-height: calc(100vh - 160rpx);">
         <no-data v-if="!list||list.length==0" style="width: 100%;"></no-data>
         <view v-for="(item,index) in list" :key="index" class="m-b-24 flow-manage-list">
            <view class="flow-manage-list-item">
               <view class="flex">
                  <image class="flower-img img100 m-r-6" :src="item.img" @click="previewImg(item.img)"></image>
                  <view>
                     <view class="flex">
                        <view class="title">{{item.title}}<span class="level">A级别</span></view>
                        <view class="t-red m-l-a m-r-0">
                           ￥20.00/扎
                        </view>
                     </view>
                     <view class="each-list">
                        <view class="each-item">
                           <view class="label">分类</view>
                           <view class="value">卡罗拉</view>

                        </view>
                        <view class="each-item">
                           <view class="label">颜色</view>
                           <view class="value">红色</view>

                        </view>
                        <view class="each-item">
                           <view class="label">规格</view>
                           <view class="value">20支/扎</view>

                        </view>
                        <view class="each-item">
                           <view class="label">库存</view>
                           <view class="value">10</view>

                        </view>
                        <view class="each-item">
                           <view class="label">销量</view>
                           <view class="value">10</view>
                        </view>
                     </view>
                  </view>
               </view>
               <view class="line-gray">

               </view>
               <view class="buttons">
                  <view class="button" @click.stop="toDetailAdd(item)">复制</view>
                  <view class="button" @click.stop="buttonDelete(item)">删除</view>
                  <view class="button" @click.stop="buttonStatus(item,'off')" v-if="item.status=='UP'">下架</view>
                  <view class="button" @click.stop="buttonStatus(item,'up')" v-if="item.status=='OFF'">上架</view>
                  <view class="button" @click.stop="toDetail(item)">编辑</view>
                  <view class="button" @click.stop="changeValue(item,'price')">价格</view>
                  <view class="button" @click.stop="changeValue(item,'stock')">库存</view>
               </view>
            </view>
         </view>
      </view>

      <!-- 判断是否到底了，自动吧 -->
      <footer-msg :more="page.total>0&&page.total>page.current*page.size"></footer-msg>
   </view>
</template>

@@ -8,15 +75,226 @@
   export default {
      data() {
         return {
				
            type: 'all',
            query: {
               type: ''
            }
         }
      },
      onLoad(options) {
         this.type = options.type || 'all'
         //todo 根据type切换查询条件
         if (this.type === 'delete') {
            this.listApi = '/api/supplier/flower/list/rc'

         } else {
            this.listApi = '/api/supplier/flower/list'
            this.query.status = ''
            if (this.type === 'inpass') {
               this.query.status = 'PENDING'
            }
            if (this.type === 'in') {
               this.query.status = 'UP'
            }
            if (this.type === 'unpass') {
               this.query.status = 'REJECT'
            }
         }
         this.getList()
      },
      onReachBottom() {
         this.page.current += 1
         this.getMore()
      },
      async onPullDownRefresh() {
         this.page.current = 1
         await this.getList()
         uni.stopPullDownRefresh()
      },
      methods: {
			
         async changeValue(item, key) {
            const res = await this.$message.confirm(`确定修改此商品的${key==='price'&&'价格'|| key==='stock'&&'库存'}吗`, {
               editable: true
            })
            if(!res.content){
               this.$message.showToast('输入不能为空')
               return
            }
            var value = ''
            if(key=='price'){
               value = parseFloat(res.content).toFixed(2)
            }else{
               value = parseInt(res.content)
            }
            if(isNaN(value)){
               this.$message.showToast('输入格式不正确')
               return
            }
            var dto = {
               id: item.id,
            }
            dto[key] = value


            this.$message.showLoading()
            this.$http.request('post', '/api/supplier/flower/list/' + key, {
               data: dto
            }).then(res => {
               if (res.code == 0) {
                  this.$message.showToast('操作成功')
                  item[key] = value
               }
            }).finally(() => {
               this.$message.hideLoading()
            })
         },
         async buttonStatus(item, status) {
            await this.$message.confirm(`确定${status==='off'?'下降':'上架'}此商品吗`)
            this.$message.showLoading()
            this.$http.request('get', '/api/supplier/flower/list/' + status, {
               params: {
                  id: item.id
               }
            }).then(res => {
               if (res.code == 0) {
                  this.$message.showToast('操作成功')
                  item.status = status
                  item.statusStr = (status == 'off' ? '下架' : '上架')
               }
            }).finally(() => {
               this.$message.hideLoading()
            })
         },
         async buttonDelete(item) {
            await this.$message.confirm('确定删除此商品吗')
            this.$message.showLoading()
            this.$http.request('get', '/api/supplier/flower/list/delete', {
               params: {
                  id: item.id
               }
            }).then(res => {
               if (res.code == 0) {
                  this.$message.showToast('删除成功')
                  this.refreshList()
               }
            }).finally(() => {
               this.$message.hideLoading()
            })
         },
         toDetail(item) {
            uni.navigateTo({
               url: '/pages/farmer/flower-manage/flower-add?id=' + item.id
            })
         },
         toDetailAdd(item) {
            uni.navigateTo({
               url: '/pages/farmer/flower-manage/flower-add?copyId=' + item.id
            })
         },
         clickButton(type) {
            if (type == 'add') {
               //添加页面
               uni.navigateTo({
                  url: '/pages/farmer/flower-manage/flower-add'
               })
            } else {
               uni.navigateTo({
                  url: '/pages/farmer/flower-manage/flower-manage?type=' + type
               })
            }
         },
      }
   }
</script>

<style>
<style lang="scss" scoped>
   .flow-manage {
      .flow-manage-list {
         margin: 20rpx 30rpx;
         padding: 22rpx;

</style>
         .flow-manage-item {
            margin-bottom: 20rpx;

            .buttons {
               display: flex;

               .button {
                  margin: 0 auto;
                  width: 98rpx;
                  height: 48rpx;
                  border-radius: 24rpx;
                  border: 2rpx solid #CECECE;
               }
            }

            .flower-img {
               width: 128rpx;
               height: 118rpx;

            }

            .each-list {
               display: flex;
               flex-wrap: wrap;

               .each-item {
                  min-width: 30%;
                  max-width: 40%;
                  text-align: center;

                  .label {
                     font-weight: 400;
                     font-size: 24rpx;
                     color: #666666;
                  }

                  .label::after {
                     content: ": "
                  }

                  .value {}
               }
            }
         }
      }

      .top-buttons {
         display: flex;
         margin: 22rpx 42rpx;

         .button {
            // flex:1;
            margin: 0 auto;
            width: 96rpx;
            height: 130rpx;
            background-size: 100% 100%;
         }

         .button-add {
            background-image: url('@/static/images/farmer/flower/flower-mange-icon-add-flower.png');

         }

         .button-search-in {
            background-image: url('@/static/images/farmer/flower/flower-mange-icon-flower-in.png');

         }

         .button-search-unpass {
            background-image: url('@/static/images/farmer/flower/flower-mange-icon-flower-unpass.png');

         }

         .button-search-inpass {
            background-image: url('@/static/images/farmer/flower/flower-mange-icon-flower-inpass.png');

         }

         .button-search-delete {
            background-image: url('@/static/images/farmer/flower/flower-mange-icon-flower-delete.png');

         }
      }
   }
</style>