xuxueyang
2024-07-26 799b6a04bbc0a56972c5be392518c9da6308e6e0
sub_pages/customer/trade/list.vue
@@ -1,420 +1,444 @@
<template>
  <!-- 列表页面 -->
  <view class="trade-list">
    <view class="category-detail flex">
      <view class="flex1 info">
        <view class="title flex">
          <view>牛油果泡泡</view>
          <view>
            <image src="../../../static/common/icon-kf.png" class="icon-kf m-l-15 img100"></image>
   <!-- 列表页面 -->
   <view class="trade-list">
      <view class="category-detail flex" v-if="query.category">
         <view class="flex1 info">
            <view class="title flex">
               <view>{{categoryInfo.name||'-'}}</view>
               <view>
                  <image src="../../../static/common/icon-kf.png" class="icon-kf m-l-15 img100"></image>
          </view>
        </view>
        <view class="desc">
          规格:10支/扎
        </view>
        <view class="desc">
          估重:1.3kg/扎
        </view>
        <view class="desc">
          包袋:棉袋
        </view>
      </view>
      <view class="info-price">
        <view class="title">当日均价</view>
        <view class="price">19.66</view>
        <view class="flex desc">
          <view class="m-l-a m-r-5">+0.76</view>
          <view class="m-r-a m-l-5">+4.02%</view>
        </view>
      </view>
    </view>
    <view class="" style="min-height: calc(100vh - 260rpx);">
      <no-data v-if="!list||list.length===0" style="width: 100%;"></no-data>
      <view v-else>
        <!-- 查询条件 -->
        <view class="component-filter-container">
          <view class="flex1" @click.stop="order_show=true">
            {{ this.query.columnStr || '排序' }}
            <image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>
          </view>
          <view class="flex1" @click.stop="level_show=true">
            {{ this.query.levelStr || '级别' }}
            <image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"
            ></image>
          </view>
               </view>
            </view>
            <view class="desc">
               规格:{{categoryInfo.unit}}
            </view>
            <view class="desc">
               颜色:{{categoryInfo.color}}
            </view>
         <!--    <view class="desc">
               包袋:棉袋
            </view> -->
         </view>
         <view class="info-price">
            <view class="title">当日均价</view>
            <view class="price">19.66</view>
            <view class="flex desc">
               <view class="m-l-a m-r-5">+0.76</view>
               <view class="m-r-a m-l-5">+4.02%</view>
            </view>
         </view>
      </view>
      <view class="" style="min-height: calc(100vh - 260rpx);">
         <no-data v-if="!list||list.length===0" style="width: 100%;"></no-data>
         <view v-else>
            <!-- 查询条件 -->
            <view class="component-filter-container">
               <view class="flex1" @click.stop="order_show=true">
                  {{ this.query.columnStr || '排序' }}
                  <image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>
               </view>
               <view class="flex1" @click.stop="level_show=true">
                  {{ this.query.levelStr || '级别' }}
                  <image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>
               </view>
          <!--               <view class="flex1">-->
          <!--                  好卖家<image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>-->
          <!--               </view>-->
          <!--               <view class="flex1">-->
          <!--                  颜色<image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>-->
          <!--               </view>-->
          <view class="flex1" @click="showSelectParams" v-if="query.category">
            筛选
            <image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>
          </view>
        </view>
      </view>
               <!--               <view class="flex1">-->
               <!--                  好卖家<image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>-->
               <!--               </view>-->
               <!--               <view class="flex1">-->
               <!--                  颜色<image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>-->
               <!--               </view>-->
               <view class="flex1" @click="showSelectParams" v-if="query.category">
                  筛选
                  <image src="../../../static/common/icon-arrow-down.png" class="icon-arrow-down"></image>
               </view>
            </view>
         </view>
      <view class="component-shop-item flex" v-for="(item,index) of list" :key="index"
      >
        <view class="img" @click.stop="toDetail(item)">
          <image class="img img100"
                 src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/ff/fff3027bd0a146478fd1f0aae816a028%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20240710224139.png">
          </image>
          <view class="level">
            A级
          </view>
        </view>
         <view class="component-shop-item flex" v-for="(item,index) of list" :key="index">
            <view class="img" @click.stop="toDetail(item)">
               <image class="img img100"
                  src="https://hmy-flower.oss-cn-shanghai.aliyuncs.com/ff/fff3027bd0a146478fd1f0aae816a028%E5%BE%AE%E4%BF%A1%E6%88%AA%E5%9B%BE_20240710224139.png">
               </image>
               <view class="level">
                  {{levelStr||''}}
               </view>
            </view>
        <view class="m-l-12 info-container flex1">
          <view @click.stop="toDetail(item)">
            <view class="title">
              橙色芭比
              <view class="price">
                ¥6.60/扎
              </view>
            </view>
            <view class="shop-name">
              牛油果泡泡·白色
            </view>
            <view class="other-info flex">
              <view class="m-r-15">
                已售:7
              </view>
              <view class="m-r-15">
                剩余:13
              </view>
              <view class="m-r-15">
                1支/扎
              </view>
            </view>
          </view>
          <view class="bottom-buttons  flex">
            <view class="m-l-12 info-container flex1">
               <view @click.stop="toDetail(item)">
                  <view class="title">
                     {{item.name||'-'}}
                     <view class="price">
                        ¥{{item.price||0}}元/扎
                     </view>
                  </view>
                  <view class="shop-name">
                     {{item.supplierName}}
                  </view>
                  <view class="other-info flex">
                     <view class="m-r-15">
                        已售:{{item.sales}}
                     </view>
                     <view class="m-r-15">
                        剩余:{{item.stock}}
                     </view>
                     <view class="m-r-15">
                        {{item.unit}}
                     </view>
                  </view>
               </view>
               <view class="bottom-buttons  flex">
            <view class="icons flex">
              <uni-icons v-if="item.shopnum&&item.shopnum>=1" type="minus" size="32"
                         @click.stop="addnum(item,-1)"></uni-icons>
              <view class="curnums" v-if="item.shopnum&&item.shopnum>=1">{{ item.shopnum }}</view>
              <uni-icons v-if="!item.shopnum||item.shopnum<=99" type="plus-filled" size="32"
                         @click.stop="addnum(item,1)"></uni-icons>
            </view>
          </view>
        </view>
      </view>
                  <view class="icons flex">
                     <uni-icons v-if="item.shopnum&&item.shopnum>=1" type="minus" size="32"
                        @click.stop="addnum(item,-1)"></uni-icons>
                     <view class="curnums" v-if="item.shopnum&&item.shopnum>=1">{{ item.shopnum }}</view>
                     <uni-icons v-if="!item.shopnum||item.shopnum<=99" type="plus-filled" size="32"
                        @click.stop="addnum(item,1)"></uni-icons>
                  </view>
               </view>
            </view>
         </view>
      <view class="icon-shop" v-if="list&&list.length>0" @click="goto('/sub_pages/customer/shopping/shopping',true)">
        <!-- 购物图标 -->
        <!-- 如果有购买的东西,就要附带数字了 -->
        <view v-if="shoptotal>0" class="number">
          {{ shoptotal }}
        </view>
      </view>
    </view>
         <view class="icon-shop" v-if="list&&list.length>0"
            @click="goto('/sub_pages/customer/shopping/shopping',true)">
            <!-- 购物图标 -->
            <!-- 如果有购买的东西,就要附带数字了 -->
            <view v-if="shoptotal>0" class="number">
               {{ shoptotal }}
            </view>
         </view>
      </view>
    <!-- 判断是否到底了,自动吧 -->
    <footer-msg :more="page.total>0&&page.total>page.current*page.size"></footer-msg>
      <!-- 判断是否到底了,自动吧 -->
      <footer-msg :more="page.total>0&&page.total>page.current*page.size"></footer-msg>
    <u-picker :show="level_show" @confirm="select_level" keyName="label" :columns="level_columns"
              @cancel="level_show=false"></u-picker>
    <u-picker :show="order_show" @confirm="select_order" keyName="label" :columns="order_columns"
              @cancel="order_show=false"></u-picker>
      <u-picker :show="level_show" @confirm="select_level" keyName="label" :columns="level_columns"
         @cancel="level_show=false"></u-picker>
      <u-picker :show="order_show" @confirm="select_order" keyName="label" :columns="order_columns"
         @cancel="order_show=false"></u-picker>
    <uni-popup ref="popup_param" type="bottom">
      <view class="component-popup_input_all" v-if="params">
        <view class="text-center m-b-40" style="font-size: 48rpx;font-weight: 600;">商品参数设置</view>
        <!-- 输入框-->
        <view v-for="(item,i) in params" :key="i" class="m-t-20">
          <view class="title topic-font" style="font-size: 40rpx;font-weight: 600;">{{ item.name }}</view>
          <view class="m-t-12 flex value-items">
            <view class="value-item" @click="updateValue(item,each)" :class="[item.value===each?'cur':'']"
                  v-for="(each, j) in item.values" :key="j">
              {{ each || '-' }}
            </view>
          </view>
        </view>
        <view class="button-space"></view>
        <view class="button-space"></view>
        <view class="button-green" style="background-color: #fff;bottom: 160rpx;color: #000"
              @click="closeParamPopAndQuery">
          查询
        </view>
      <uni-popup ref="popup_param" type="bottom">
         <view class="component-popup_input_all" v-if="params">
            <view class="text-center m-b-40" style="font-size: 48rpx;font-weight: 600;">商品参数设置</view>
            <!-- 输入框-->
            <view v-for="(item,i) in params" :key="i" class="m-t-20">
               <view class="title topic-font" style="font-size: 40rpx;font-weight: 600;">{{ item.name }}</view>
               <view class="m-t-12 flex value-items">
                  <view class="value-item" @click="updateValue(item,each)" :class="[item.value===each?'cur':'']"
                     v-for="(each, j) in item.values" :key="j">
                     {{ each || '-' }}
                  </view>
               </view>
            </view>
            <view class="button-space"></view>
            <view class="button-space"></view>
            <view class="button-green" style="background-color: #fff;bottom: 160rpx;color: #000"
               @click="closeParamPopAndQuery">
               查询
            </view>
        <view class="button-green" @click="closeParamPop">关闭</view>
      </view>
    </uni-popup>
            <view class="button-green" @click="closeParamPop">关闭</view>
         </view>
      </uni-popup>
  </view>
   </view>
</template>
<script>
import http from "../../../plugins/http";
   import http from "../../../plugins/http";
export default {
  data() {
    return {
      query: {
        name:'',
        category: '',
        zoneId: '',
        levelStr: '',
        level: '',
        column: '',
        params: [],
        columnStr: '',
      },
      params: [],
   export default {
      data() {
         return {
            query: {
               name: '',
               category: '',
               zoneId: '',
               levelStr: '',
               level: '',
               column: '',
               params: [],
               columnStr: '',
            },
            categoryInfo: {},
            params: [],
      shoptotal: 0,
      list: [],
      level_show: false,
      level_columns: [[]],
            shoptotal: 0,
            list: [],
            level_show: false,
            level_columns: [
               []
            ],
      order_show: false,
      order_columns: [[]]
    }
  },
  async onLoad(options) {
    // this.list = [{},{}]
    console.log('options', options)
    this.query.category = options.categoryId || ''
    this.query.zoneId = options.zoneId || ''
    this.query.name = options.name || ''
    this.listApi = '/api/customer/flower/list'
    this.getList('post')
    this.$http.request('get', '/api/code/value', {
      params: {
        type: 'FLOWER_LEVEL'
      }
    }).then(res => {
      var data = res.data
      this.level_columns = [data || []]
      this.columns_levels[0].unshift({
        label: '全部',
        value: ''
      })
    })
    this.$http.request('get', '/api/code/value', {
      params: {
        type: 'FLOWER_ORDER_BY'
      }
    }).then(res => {
      var data = res.data
      this.order_columns = [data || []]
      this.order_columns[0].unshift({
        label: '默认',
        value: ''
      })
    })
            order_show: false,
            order_columns: [
               []
            ]
         }
      },
      async onLoad(options) {
         // this.list = [{},{}]
         console.log('options', options)
         this.query.category = options.categoryId || ''
         this.query.zoneId = options.zoneId || ''
         this.query.name = options.name || ''
         this.listApi = '/api/customer/flower/list'
         this.getList('post')
         this.$http.request('get', '/api/code/value', {
            params: {
               type: 'FLOWER_LEVEL'
            }
         }).then(res => {
            var data = res.data
            this.level_columns = [data || []]
            this.columns_levels[0].unshift({
               label: '全部',
               value: ''
            })
         })
         this.$http.request('get', '/api/code/value', {
            params: {
               type: 'FLOWER_ORDER_BY'
            }
         }).then(res => {
            var data = res.data
            this.order_columns = [data || []]
            this.order_columns[0].unshift({
               label: '默认',
               value: ''
            })
         })
         if (this.query.category) {
            await this.getDetail()
         }
    // await this.getList('post')
    // this.
  },
  onReachBottom() {
    this.page.current += 1
    this.getMore('post')
  },
  async onPullDownRefresh() {
    this.page.current = 1
    await this.getList('post')
    uni.stopPullDownRefresh()
  },
  methods: {
    updateValue(item, value) {
      item.value = value
      this.$set(item, 'value', value)
      this.$forceUpdate()
    },
    closeParamPop() {
      this.$refs.popup_param.close()
    },
    closeParamPopAndQuery() {
      this.$refs.popup_param.close()
      //设置参数
      this.dto.params = []
      for (var params of this.params) {
        if (params.value) {
          this.dto.params.push({
            id: params.id,
            value: params.value
          })
        }
      }
      this.refreshList('post')
    },
    async showSelectParams() {
      //得有分类才有参数
      this.$message.showLoading()
      const res = await this.$http.request('get', '/api/supplier/flower/params', {
        params: {
          categoryId: this.dto.category
        }
      })
      this.$message.hideLoading()
      if (res.code === 0) {
        // this.columns_params = res.data || []
        this.dto.params = res.data || []
        this.$refs.popup_param.open()
      }
         // await this.getList('post')
         // this.
      },
      onReachBottom() {
         this.page.current += 1
         this.getMore('post')
      },
      async onPullDownRefresh() {
         this.page.current = 1
         await this.getList('post')
         uni.stopPullDownRefresh()
      },
      methods: {
         async getDetail() {
            this.$message.showLoading()
            //获取到分类的详情信息
            const {
               code,
               data
            } = await this.$http.request('get', '/api/customer/flower/category/tree/view', {
               params: {
                  id: this.query.category
               }
            })
            this.$message.hideLoading()
            if (code == 0) {
               this.categoryInfo = data || {}
            }
         },
         updateValue(item, value) {
            item.value = value
            this.$set(item, 'value', value)
            this.$forceUpdate()
         },
         closeParamPop() {
            this.$refs.popup_param.close()
         },
         closeParamPopAndQuery() {
            this.$refs.popup_param.close()
            //设置参数
            this.dto.params = []
            for (var params of this.params) {
               if (params.value) {
                  this.dto.params.push({
                     id: params.id,
                     value: params.value
                  })
               }
            }
            this.refreshList('post')
         },
         async showSelectParams() {
            //得有分类才有参数
            this.$message.showLoading()
            const res = await this.$http.request('get', '/api/supplier/flower/params', {
               params: {
                  categoryId: this.query.category
               }
            })
            this.$message.hideLoading()
            if (res.code === 0) {
               // this.columns_params = res.data || []
               this.params = res.data || []
               this.$refs.popup_param.open()
            }
    },
    select_level(e) {
      this.level_show = false
      this.query.levelStr = e.value[0].label
      this.query.level = e.value[0].value
      this.refreshList('post')
         },
         select_level(e) {
            this.level_show = false
            this.query.levelStr = e.value[0].label
            this.query.level = e.value[0].value
            this.refreshList('post')
    },
    select_order(e) {
      this.order_show = false
      this.query.columnStr = e.value[0].label
      this.query.column = e.value[0].value
      this.refreshList('post')
         },
         select_order(e) {
            this.order_show = false
            this.query.columnStr = e.value[0].label
            this.query.column = e.value[0].value
            this.refreshList('post')
    },
    toDetail(item) {
      uni.navigateTo({
        url: `/sub_pages/customer/trade/detail?id=${item.id}`
      })
    },
    // mulnum(item) {
    //   if (item.shopnum > 0) {
    //     item.shopnum -= 1
    //   }
    //   this.shoptotal -= 1
    //   this.$forceUpdate()
    //
    // },
    async addnum(item, addnum) {
      if (!this.currentInfo.id) {
        await this.$message.confirm('请前往登录')
        uni.navigateTo({
          url: '/pages/user/supplier-user'
        })
        return
      }
      if (!item.shopnum) {
        item.shopnum = 0
      }
      if (item.shopnum + addnum >= 0) {
         },
         toDetail(item) {
            uni.navigateTo({
               url: `/sub_pages/customer/trade/detail?id=${item.id}`
            })
         },
         // mulnum(item) {
         //   if (item.shopnum > 0) {
         //     item.shopnum -= 1
         //   }
         //   this.shoptotal -= 1
         //   this.$forceUpdate()
         //
         // },
         async addnum(item, addnum) {
            if (!this.currentInfo.id) {
               await this.$message.confirm('请前往登录')
               uni.navigateTo({
                  url: '/pages/user/supplier-user'
               })
               return
            }
            if (!item.shopnum) {
               item.shopnum = 0
            }
            if (item.shopnum + addnum >= 0) {
      } else {
        return
      }
      this.$message.showLoading()
      const {code} = await http.request('post', '/api/customer/flower/cart/change-num', {
            data: {
              id: item.id,
              num: addnum
            }
          }
      )
      this.$message.hideLoading()
      if (code === 0) {
        item.shopnum += addnum
      }
      this.$forceUpdate()
    },
  }
}
            } else {
               return
            }
            this.$message.showLoading()
            const {
               code
            } = await http.request('post', '/api/customer/flower/cart/change-num', {
               data: {
                  id: item.id,
                  num: addnum
               }
            })
            this.$message.hideLoading()
            if (code === 0) {
               item.shopnum += addnum
            }
            this.$forceUpdate()
         },
      }
   }
</script>
<style lang="scss">
.trade-list {
  padding: 24rpx 30rpx;
   .trade-list {
      padding: 24rpx 30rpx;
  .category-detail {
    padding: 22rpx 38rpx;
    margin-bottom: 10rpx;
    background-color: #E1F0E7;
    border-radius: 8rpx;
      .category-detail {
         padding: 22rpx 38rpx;
         margin-bottom: 10rpx;
         background-color: #E1F0E7;
         border-radius: 8rpx;
    .info {
      .title {
        font-weight: 600;
        font-size: 36rpx;
        color: #000000;
        line-height: 50rpx;
      }
         .info {
            .title {
               font-weight: 600;
               font-size: 36rpx;
               color: #000000;
               line-height: 50rpx;
            }
      .icon-kf {
        width: 44rpx;
        height: 44rpx;
      }
            .icon-kf {
               width: 44rpx;
               height: 44rpx;
            }
      .desc {
        font-weight: 400;
        font-size: 24rpx;
        color: #666666;
        line-height: 34rpx;
        margin-top: 8rpx;
      }
    }
            .desc {
               font-weight: 400;
               font-size: 24rpx;
               color: #666666;
               line-height: 34rpx;
               margin-top: 8rpx;
            }
         }
    .info-price {
      padding: 22rpx;
      text-align: center;
      background: #FFFFFF;
      border-radius: 8rpx;
      min-width: 260rpx;
         .info-price {
            padding: 22rpx;
            text-align: center;
            background: #FFFFFF;
            border-radius: 8rpx;
            min-width: 260rpx;
      .title {
        font-weight: 400;
        font-size: 24rpx;
        color: #000000;
        line-height: 34rpx;
      }
            .title {
               font-weight: 400;
               font-size: 24rpx;
               color: #000000;
               line-height: 34rpx;
            }
      .price {
        font-weight: 600;
        font-size: 32rpx;
        color: #BF0000;
        line-height: 44rpx;
        margin-top: 12rpx;
      }
            .price {
               font-weight: 600;
               font-size: 32rpx;
               color: #BF0000;
               line-height: 44rpx;
               margin-top: 12rpx;
            }
      .desc {
        font-weight: 400;
        font-size: 24rpx;
        color: #666666;
        line-height: 34rpx;
        margin-top: 12rpx;
      }
    }
  }
            .desc {
               font-weight: 400;
               font-size: 24rpx;
               color: #666666;
               line-height: 34rpx;
               margin-top: 12rpx;
            }
         }
      }
  .icon-shop {
    position: absolute;
    position: fixed;
      .icon-shop {
         position: absolute;
         position: fixed;
    background-image: url('../../../static/images/customer/gwc.png');
    width: 140rpx;
    height: 140rpx;
    // box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0, 0, 0, 0.16);
    border-radius: 50%;
    right: 40rpx;
    bottom: 300rpx;
    background-size: 100% 100%;
         background-image: url('../../../static/images/customer/gwc.png');
         width: 140rpx;
         height: 140rpx;
         // box-shadow: 0rpx 4rpx 22rpx 0rpx rgba(0, 0, 0, 0.16);
         border-radius: 50%;
         right: 40rpx;
         bottom: 300rpx;
         background-size: 100% 100%;
    .number {
      width: 30rpx;
      height: 30rpx;
      background: #F20000;
      line-height: 30rpx;
      text-align: center;
      position: absolute;
      right: 14rpx;
      top: 14rpx;
      color: #FFFFFF;
      border-radius: 50%;
      font-size: 24rpx;
    }
         .number {
            width: 30rpx;
            height: 30rpx;
            background: #F20000;
            line-height: 30rpx;
            text-align: center;
            position: absolute;
            right: 14rpx;
            top: 14rpx;
            color: #FFFFFF;
            border-radius: 50%;
            font-size: 24rpx;
         }
  }
      }
}
   }
</style>