1
xuxy
2024-06-26 cfe746d8aa547505cce16fde5e95fb2851e6e7d3
pages/farmer/flower-manage/flower-manage.vue
@@ -2,10 +2,10 @@
   <view class="flow-manage">
      <view class="top-buttons" v-if="type==='all'">
         <view @click.stop="clickButton('add')" class="button button-add"></view>
         <view class="button button-search-in"></view>
         <view class="button button-search-unpass"></view>
         <view class="button button-search-inpass"></view>
         <view class="button button-search-delete"></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" style="flex:5"></view>
         <view @click.stop="clickButton('delete')" class="button button-search-delete"></view>
      </view>
@@ -14,38 +14,43 @@
         <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/扎
                  <image class="flower-img img100 m-r-6" :src="item.cover" @click="previewImg(item.cover)">
                  </image>
                  <view class="flex1">
                     <view class=" flex">
                        <view class="title">{{item.name}}<span class="level">{{item.levelStr}}</span></view>
                        <view class="m-l-a m-r-0">
                           {{item.categoryStr || '-'}}
                        </view>
                     </view>
                     <view class="each-list">
                     <view class="each-list m-t-12">
                        <view class="each-item">
                           <view class="label">分类</view>
                           <view class="value">卡罗拉</view>
                           <view class="label">状态</view>
                           <view class="value">{{item.statusStr || '-'}}</view>
                        </view>
                        <view class="each-item">
                           <view class="label">颜色</view>
                           <view class="value">红色</view>
                           <view class="value">{{item.color || '-'}}</view>
                        </view>
                        <view class="each-item">
                           <view class="label">规格</view>
                           <view class="value">20支/扎</view>
                           <view class="value">{{item.unit || '-'}}</view>
                        </view>
                        <view class="each-item">
                           <view class="label">库存</view>
                           <view class="value">10</view>
                           <view class="value">{{item.stock || 0}}</view>
                        </view>
                        <view class="each-item">
                           <view class="label">销量</view>
                           <view class="value">10</view>
                           <view class="value">{{item.sales || 0}}</view>
                        </view>
                        <view class="each-item">
                           <view class="label">价格</view>
                           <view class="value">{{item.price||'-'}}</view>
                        </view>
                     </view>
                  </view>
@@ -54,12 +59,16 @@
               </view>
               <view class="buttons">
                  <view class="button">复制</view>
                  <view class="button">删除</view>
                  <view class="button">下架</view>
                  <view class="button" @click.stop="toDetail(item)">编辑</view>
                  <view class="button">价格</view>
                  <view class="button">库存</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="openValue(item,'price')">价格</view>
                  <view class="button" @click.stop="openValue(item,'stock')">库存</view>
                  <view class="button" @click.stop="toDetailAdd(item)">复制</view>
                  <view class="button t-red" @click.stop="buttonDelete(item)">删除</view>
               </view>
            </view>
         </view>
@@ -67,6 +76,19 @@
      <!-- 判断是否到底了,自动吧 -->
      <footer-msg :more="page.total>0&&page.total>page.current*page.size"></footer-msg>
      <uni-popup ref="popup_input" type="bottom">
         <view class="component-popup_input">
            <!-- 输入框-->
            <u-input class="bg-white"  v-model="content" :placeholder="inputplaceholder" type="digit" v-if="currentInputKey=='price'"/>
            <u-input  class="bg-white"  v-model="content" :placeholder="inputplaceholder" type="number" v-if="currentInputKey=='stock'"/>
            <!-- 提交按钮 -->
            <view class="button-green" @click="submitValue">提交</view>
         </view>
      </uni-popup>
   </view>
</template>
@@ -77,13 +99,32 @@
            type: 'all',
            query: {
               type: ''
            }
            },
            content: '',
            currentInputDto: {},
            currentInputKey: '',
            inputplaceholder:'',
         }
      },
      onLoad(options) {
         this.type = options.type || 'all'
         //todo 根据type切换查询条件
         this.listApi = '/api/ua/announcement/list'
         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() {
@@ -96,9 +137,95 @@
         uni.stopPullDownRefresh()
      },
      methods: {
         async openValue(item, key) {
            this.content = item[key] || ''
            this.currentInputDto = item
            this.currentInputKey = key
            this.inputplaceholder = key=='price'&&'请输入价格(元)' || key=='stock'&&'请输入库存(整数)'  || '请输入'
            this.$refs.popup_input.open('top')
         },
         async submitValue() {
            let item = this.currentInputDto,
               key = this.currentInputKey
            const res = await this.$message.confirm(`确定修改此商品的${key==='price'&&'价格'|| key==='stock'&&'库存'}吗`, {
               editable: false
            })
            if (!this.content) {
               this.$message.showToast('输入不能为空')
               return
            }
            var value = ''
            if (key == 'price') {
               value = parseFloat(this.content).toFixed(2)
            } else {
               value = parseInt(this.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
                  this.$refs.popup_input.close()
               }
            }).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) {
@@ -120,11 +247,28 @@
<style lang="scss" scoped>
   .flow-manage {
      .flow-manage-list {
         margin: 20rpx 30rpx;
         // padding: 20rpx 30rpx;
         padding: 22rpx;
         background-color: #fff;
         .flow-manage-item {
         .flow-manage-list-item {
            margin-bottom: 20rpx;
            .title {
               font-weight: 600;
               font-size: 28rpx;
               color: #000000;
               line-height: 40rpx;
               .level {
                  font-weight: 400;
                  font-size: 28rpx;
                  color: #20613D;
                  line-height: 40rpx;
                  margin-left: 20rpx;
               }
            }
            .buttons {
               display: flex;
@@ -132,16 +276,18 @@
               .button {
                  margin: 0 auto;
                  width: 98rpx;
                  height: 48rpx;
                  line-height: 48rpx;
                  border-radius: 24rpx;
                  border: 2rpx solid #CECECE;
                  text-align: center;
               }
            }
            .flower-img {
               width: 128rpx;
               height: 118rpx;
               min-width: 128rpx;
               min-height: 118rpx;
            }
            .each-list {
@@ -152,11 +298,16 @@
                  min-width: 30%;
                  max-width: 40%;
                  text-align: center;
                  margin-left: 0rpx;
                  margin-right: auto;
                  display: flex;
                  .label {
                     font-weight: 400;
                     font-size: 24rpx;
                     color: #666666;
                     text-align: left;
                     padding-right: 10rpx;
                  }
                  .label::after {
@@ -171,16 +322,29 @@
      .top-buttons {
         display: flex;
         margin: 22rpx 42rpx;
         padding: 22rpx 42rpx;
         background-color: #fff;
         .button {
            // flex:1;
            margin: 0 auto;
            width: 96rpx;
            height: 130rpx;
            width: 90rpx;
            height: 146rpx;
            background-size: 100% 100%;
            text-align: center;
            // min-width: 90rpx;
            flex: 4;
            // max-width: 90rpx;
            margin-left:14rpx;
            margin-right:14rpx;
         }
         .button:first-child {
            margin-left: 0rpx
         }
         .button:last-child {
            margin-right: 0rpx
         }
         .button-add {
            background-image: url('@/static/images/farmer/flower/flower-mange-icon-add-flower.png');