add 商品结算测试

xuxueyang

2024-08-12 f837b731f571bb53cee99f9bc22a6f74855f3e6c

 sub_pages/supplier/flower-manage/flower-manage.vue

@@ -1,428 +1,472 @@
<template>
   <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" style="flex:5"></view>
         <view @click.stop="clickButton('delete')" class="button button-search-delete" style="margin-top: -1rpx;"></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.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-item">
                           <view class="label">状态</view>
                           <view class="value">{{item.statusStr || '-'}}</view>

                        </view>
                        <view class="each-item">
                           <view class="label">颜色</view>
                           <view class="value">{{item.color || '-'}}</view>

                        </view>
                        <view class="each-item">
                           <view class="label">规格</view>
                           <view class="value">{{item.unit || '-'}}</view>

                        </view>
                        <view class="each-item">
                           <view class="label">库存</view>
                           <view class="value">{{item.stock || 0}}</view>

                        </view>
                        <view class="each-item">
                           <view class="label">销量</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>
               </view>
               <view class="line-gray">

               </view>
               <view class="buttons">
                  <view class="button" @click.stop="toDetail(item)">编辑</view>

                  <view class="button" @click.stop="buttonStatus(item,'off')"
                     v-if="item.status=='UP'||item.status=='up'">下架</view>
                  <view class="button" @click.stop="buttonStatus(item,'up')"
                     v-if="item.status=='OFF'||item.status=='off'||item.status=='FORCE_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>
      </view>

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

      <uni-popup ref="popup_input" type="bottom" :mask-click="false">
         <view class="component-popup_input white w-fit" style="padding-bottom: 0rpx;padding: 0px;">
            <view class="p20" style="padding-bottom: 10rpx;">
               <view class="title" v-if="currentInputKey=='price'">
                  修改价格
               </view>
               <view class="title" v-if="currentInputKey=='stock'">
                  修改库存
               </view>

               <!-- 输入框-->
               <view class="flex w-fit ">

                  <u-input v-model="content" :placeholder="inputplaceholder" type="digit"
                     style="max-width: 390rpx;background-color: #F2F2F2;" v-if="currentInputKey=='price'" />
                  <view v-if="currentInputKey=='price'" class="m-l-10" style="line-height: 78rpx;">元</view>

                  <u-input v-model="content" :placeholder="inputplaceholder" type="number"
                     style="max-width: 390rpx;background-color: #F2F2F2;" v-if="currentInputKey=='stock'" />
               </view>
            </view>
            <!-- 提交按钮 -->
            <view class="line-gray" style="margin-bottom: 0px;"></view>
            <view class="flex  flex-wrap-normal">
               <u-button type="default" class="w-fit  flex1 " text="取消"
                  @click="()=>{$refs.popup_input.close()}"></u-button>
               <view class="component-line-vert"></view>
               <u-button type="default" class="w-fit flex1 topic-font" t text="确定" @click="submitValue"></u-button>
            </view>
         </view>
      </uni-popup>
   </view>
</template>

<script>
   export default {
      data() {
         return {
            type: 'all',
            query: {
               type: ''
            },
            content: '',
            currentInputDto: {},
            currentInputKey: '',
            inputplaceholder: '',
         }
      },
      onShow(){
         if (this.sign['flower']) {
            this.$store.dispatch('sign_clear', 'flower');
            this.refreshList()
         }
      },
      async onLoad(options) {
         this.type = options.type || 'all'
         var title = ''
         //todo 根据type切换查询条件
         if (this.type === 'delete') {
            this.listApi = '/api/supplier/flower/list/rc'
            title = '商品管理-已删除'
         } else {

            this.listApi = '/api/supplier/flower/list'
            this.query.status = ''
            if (this.type === 'inpass') {
               this.query.status = 'PENDING'
               title = '商品管理-待审核'
            }
            if (this.type === 'in') {
               this.query.status = 'UP'
               title = '商品管理-已上架'
            }
            if (this.type === 'unpass') {
               this.query.status = 'DRAFT,OFF,FORCE_OFF'
               title = '商品管理-仓库中'
            }
            if (this.type === 'rejectpass') {
               this.query.status = 'REJECT'
               title = '商品管理-未审核通过'
            }
         }
         if (title) {
            uni.setNavigationBarTitle({
               title: title
            })
         }
         await this.$store.dispatch('sign_clear', 'flower');
         this.getList()
      },
      onReachBottom() {
         this.page.current += 1
         this.getMore()
      },
      async onPullDownRefresh() {
         this.page.current = 1
         await this.getList()
         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: '/sub_pages/supplier/flower-manage/flower-add?id=' + item.id
            })
         },
         toDetailAdd(item) {
            uni.navigateTo({
               url: '/sub_pages/supplier/flower-manage/flower-add?copyId=' + item.id
            })
         },
         clickButton(type) {
            if (type == 'add') {
               //添加页面
               uni.navigateTo({
                  url: '/sub_pages/supplier/flower-manage/flower-add'
               })
            } else {
               uni.navigateTo({
                  url: '/sub_pages/supplier/flower-manage/flower-manage?type=' + type
               })
            }
         },
      }
   }
</script>

<style lang="scss" scoped>
   .flow-manage {
      .flow-manage-list {
         // padding: 20rpx 30rpx;
         padding: 22rpx 22rpx 20rpx 22rpx;
         background-color: #fff;

         .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;

               .button {
                  margin: 0 auto;
                  width: 98rpx;
                  line-height: 48rpx;
                  border-radius: 24rpx;
                  border: 2rpx solid #CECECE;
                  text-align: center;
                  font-size: 24rpx;
                  color: #666666;
                  line-height: 34rpx;
               }
            }

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

            .each-list {
               display: flex;
               flex-wrap: wrap;
               margin-top: 6rpx;

               .each-item {
                  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 {
                     content: ": "
                  }

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

      .top-buttons {
         display: flex;
         padding: 22rpx 42rpx;
         background-color: #fff;

         .button {
            // flex:1;
            margin: 0 auto;
            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;
            font-weight: 400;

         }

         .button:first-child {
            margin-left: 0rpx
         }

         .button:last-child {
            margin-right: 0rpx
         }

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

         }

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

         }

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

         }

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

         }

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

         }
      }
   }
<template>

   <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" style="flex:5"></view>

         <view @click.stop="clickButton('delete')" class="button button-search-delete" style="margin-top: -1rpx;">

         </view>



      </view>

      <view class="p15" style="min-height: calc(100vh - 500rpx);">

         <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 m-r-6">

                  <view class="img flower-img m-r-6">

                     <image class="flower-img img100 " :src="item.cover"

                        :class="[!item.stock?'component-stock-zero':'']" @click="previewImg(item.cover)">



                     </image>

                     <view class="status" :class="[!item.stock?'zero':'']" v-if="item.statusStr">

                        {{ item.statusStr}}

                     </view>

                  </view>



                  <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-item">

                           <view class="label">状态</view>

                           <view class="value">{{item.statusStr || '-'}}</view>



                        </view>

                        <view class="each-item">

                           <view class="label">颜色</view>

                           <view class="value">{{item.color || '-'}}</view>



                        </view>

                        <view class="each-item">

                           <view class="label">规格</view>

                           <view class="value">{{item.unit || '-'}}</view>



                        </view>

                        <view class="each-item">

                           <view class="label">库存</view>

                           <view class="value">{{item.stock || 0}}</view>



                        </view>

                        <view class="each-item">

                           <view class="label">销量</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>

               </view>

               <view class="line-gray">



               </view>

               <view class="buttons">

                  <view class="button" @click.stop="toDetail(item)">编辑</view>



                  <view class="button" @click.stop="buttonStatus(item,'off')"

                     v-if="item.status=='UP'||item.status=='up'">下架</view>

                  <view class="button" @click.stop="buttonStatus(item,'up')"

                     v-if="item.status=='OFF'||item.status=='off'||item.status=='FORCE_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>

      </view>



      <!-- 判断是否到底了，自动吧 -->

      <footer-msg :more="page.total>0&&page.total>page.current*page.size"></footer-msg>



      <uni-popup ref="popup_input" type="bottom" :mask-click="false">

         <view class="component-popup_input white w-fit" style="padding-bottom: 0rpx;padding: 0px;">

            <view class="p20" style="padding-bottom: 10rpx;">

               <view class="title" v-if="currentInputKey=='price'">

                  修改价格

               </view>

               <view class="title" v-if="currentInputKey=='stock'">

                  修改库存

               </view>



               <!-- 输入框-->

               <view class="flex w-fit ">



                  <u-input v-model="content" :placeholder="inputplaceholder" type="digit"

                     style="max-width: 390rpx;background-color: #F2F2F2;" v-if="currentInputKey=='price'" />

                  <view v-if="currentInputKey=='price'" class="m-l-10" style="line-height: 78rpx;">元</view>



                  <u-input v-model="content" :placeholder="inputplaceholder" type="number"

                     style="max-width: 390rpx;background-color: #F2F2F2;" v-if="currentInputKey=='stock'" />

               </view>

            </view>

            <!-- 提交按钮 -->

            <view class="line-gray" style="margin-bottom: 0px;"></view>

            <view class="flex  flex-wrap-normal">

               <u-button type="default" class="w-fit  flex1 " text="取消"

                  @click="()=>{$refs.popup_input.close()}"></u-button>

               <view class="component-line-vert"></view>

               <u-button type="default" class="w-fit flex1 topic-font" t text="确定" @click="submitValue"></u-button>

            </view>

         </view>

      </uni-popup>

   </view>

</template>



<script>

   export default {

      data() {

         return {

            type: 'all',

            query: {

               type: ''

            },

            content: '',

            currentInputDto: {},

            currentInputKey: '',

            inputplaceholder: '',

         }

      },

      onShow() {

         if (this.sign['flower']) {

            this.$store.dispatch('sign_clear', 'flower');

            this.refreshList()

         }

      },

      async onLoad(options) {

         this.type = options.type || 'all'

         var title = ''

         this.page.size = 5

         //todo 根据type切换查询条件

         if (this.type === 'delete') {

            this.listApi = '/api/supplier/flower/list/rc'

            title = '商品管理-已删除'

         } else {



            this.listApi = '/api/supplier/flower/list'

            this.query.status = ''

            if (this.type === 'inpass') {

               this.query.status = 'PENDING'

               title = '商品管理-待审核'

            }

            if (this.type === 'in') {

               this.query.status = 'UP'

               title = '商品管理-已上架'

            }

            if (this.type === 'unpass') {

               this.query.status = 'DRAFT,OFF,FORCE_OFF'

               title = '商品管理-仓库中'

            }

            if (this.type === 'rejectpass') {

               this.query.status = 'REJECT'

               title = '商品管理-未审核通过'

            }

         }

         if (title) {

            uni.setNavigationBarTitle({

               title: title

            })

         }

         await this.$store.dispatch('sign_clear', 'flower');

         this.getList()

      },

      onReachBottom() {

         console.log('onReachBottom')

         this.getMore()

      },

      async onPullDownRefresh() {

         this.page.current = 1

         await this.getList()

         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

            }

            if (key == 'price') {

               if (value <= 0) {

                  this.$message.showToast('价格需要大于0')

                  return

               }

            } else {

               if (value < 0) {

                  this.$message.showToast('库存不能小于0')

                  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 => {

               this.$message.hideLoading()

               if (res.code == 0) {

                  this.$message.showToast('操作成功')

                  item.status = (status == 'off' ? 'OFF' : 'UP')

                  item.statusStr = (status == 'off' ? '下架' : '上架')

               }

            }).catch(e => {

               this.$message.hideLoading()

            }).finally(() => {})

         },

         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: '/sub_pages/supplier/flower-manage/flower-add?id=' + item.id

            })

         },

         toDetailAdd(item) {

            uni.navigateTo({

               url: '/sub_pages/supplier/flower-manage/flower-add?copyId=' + item.id

            })

         },

         clickButton(type) {

            if (type == 'add') {

               //添加页面

               uni.navigateTo({

                  url: '/sub_pages/supplier/flower-manage/flower-add'

               })

            } else {

               uni.navigateTo({

                  url: '/sub_pages/supplier/flower-manage/flower-manage?type=' + type

               })

            }

         },

      }

   }

</script>



<style lang="scss" scoped>

   .flow-manage {

      overflow-y: scroll;



      // min-height: ;

      .flow-manage-list {

         // padding: 20rpx 30rpx;

         padding: 22rpx 22rpx 20rpx 22rpx;

         background-color: #fff;



         .flow-manage-list-item {

            .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;



               .button {

                  margin: 0 auto;

                  width: 98rpx;

                  line-height: 48rpx;

                  border-radius: 24rpx;

                  border: 2rpx solid #CECECE;

                  text-align: center;

                  font-size: 24rpx;

                  color: #666666;

                  line-height: 34rpx;

               }

            }



            .flower-img {

               width: 128rpx;

               height: 118rpx;

               min-width: 128rpx;

               min-height: 118rpx;

               position: relative;



               .status {

                  position: absolute;

                  min-width: 66rpx;

                  height: 34rpx;

                  background: #20613D;

                  left: 0;

                  top: 0;

                  border-top-left-radius: 8rpx;

                  border-bottom-right-radius: 8rpx;

                  color: #FFFFFF;

                  line-height: 34rpx;

                  font-size: 22rpx;

                  text-align: center;

               }



               .status.zero {

                  // background: unset;

                  // font-size: 24rpx;



               }

            }



            .each-list {

               display: flex;

               flex-wrap: wrap;

               margin-top: 6rpx;



               .each-item {

                  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 {

                     content: ": "

                  }



                  .value {

                     font-weight: 400;

                     font-size: 24rpx;

                     color: #666666;

                  }

               }

            }

         }

      }



      .top-buttons {

         display: flex;

         padding: 22rpx 42rpx;

         background-color: #fff;



         .button {

            // flex:1;

            margin: 0 auto;

            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;

            font-weight: 400;



         }



         .button:first-child {

            margin-left: 0rpx

         }



         .button:last-child {

            margin-right: 0rpx

         }



         .button-add {

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



         }



         .button-search-in {

            background-image: url('@/static/images/supplier/flower/flower-mange-icon-flower-in.png');



         }



         .button-search-unpass {

            background-image: url('@/static/images/supplier/flower/flower-mange-icon-flower-unpass.png');



         }



         .button-search-inpass {

            background-image: url('@/static/images/supplier/flower/flower-mange-icon-flower-inpass.png');



         }



         .button-search-delete {

            background-image: url('@/static/images/supplier/flower/flower-mange-icon-flower-delete.png');



         }

      }

   }

</style>