<!--
 * @Author: lvy lvy
 * @Date: 2023-05-11 00:31:45
 * @LastEditors: lvy lvy
 * @LastEditTime: 2023-06-02 19:05:46
 * @FilePath: /redmall-uniapp/pages/user/Fruit/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<style scoped>
.item {
  overflow: hidden;
  margin-bottom: 10px;
  position: relative;
  color: #333;
  border-radius: 16rpx 16rpx 16rpx 16rpx;
}

.box {
  background: #fff;
  border-radius: 5px;
}

.item .dot-left,
.item .dot-right {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #f5f5f5;
  position: absolute;
  z-index: 999;
}

.item .dot-left {
  bottom: -6px;
  left: -6px;
}

.item .fruit_status {
  position: absolute;
  top: 30rpx;
  right: 120rpx;
  color: #dd0d1f;
}

.item .dot-right {
  bottom: -6px;
  right: -6px;
}

.item .page-group {
  position: absolute;
  top: 10px;
  left: -2px;
  width: 100%;
  max-width: 120px;
}

.item .page-group .fold-page {
  display: block;
  width: 2px;
  height: 5px;
  background: #db0113;
  transform: skewY(-40deg);
  position: absolute;
  top: -10px;
  left: 0;
  z-index: 0;
}

.justify-between {
  justify-content: space-between;
}

.item .page-group .page {
  position: absolute;
  z-index: 1;
  display: block;
  width: 106rpx;
  top: -10px;
  height: 48rpx;

  padding: 0px;
  height: 20px;
  background: linear-gradient(135deg, #E76B5A 0%, #D64439 100%);
  border-radius: 16rpx 0rpx 30rpx 0rpx;
  color: #fff;
  text-align: center;
  font-size: 12px;
  overflow: hidden;
}

.item .content {
  width: 100%;
  height: 140px;
  background: linear-gradient(135deg, #F7978A 0%, #F05549 100%);

  border-bottom: 1px dotted #f5f5f5;
  position: relative;
  z-index: 2;
  color: #fff;
}

.item .footer {
  color: #333;
  font-size: 12px;
  padding: 5px 15px 10px 15px;
}

.footer-label {
  line-height: 24px;
}

.content-title {
  font-size: 48upx;
  font-weight: 600;
  padding-top: 85upx;
  padding-left: 45upx;
}

.content-button {
  font-size: 26upx;
  font-weight: 600;
  margin-top: 105upx;
  margin-right: 45upx;
  width: 140rpx;
  height: 56rpx;
  text-align: center;
  line-height: 56rpx;
  color: #F05549;
  font-size: 28upx;
  background: linear-gradient(90deg, #FFD5D1 0%, #FFFFFF 100%);
  border-radius: 40upx;
}

.content-button button {
  width: 140rpx;
  height: 56rpx;
  font-size: 28upx;
  background: linear-gradient(90deg, #FFD5D1 0%, #FFFFFF 100%);
  border-radius: 276rpx 276rpx 276rpx 276rpx;
}

.item .ribbon {
  width: 80px;
  height: 20px;
  background: #dd0d1f;
  position: absolute;
  right: -20px;
  top: 10px;
  transform: rotateZ(45deg);
  text-align: center;
  color: #fff;
  font-size: 12px;
}

.item .ribbon-success {
  position: absolute;
  right: 20px;
  top: 10px;
  text-align: center;
  color: #fff;
  font-size: 12px;

}

.item .ribbon-success image {
  width: 120upx;
  height: 120upx;
}

.ribbon-warning {
  width: 80px;
  height: 20px;
  background: #de8e16;
  position: absolute;
  right: -20px;
  top: 10px;
  transform: rotateZ(45deg);
  text-align: center;
  color: #fff;
  font-size: 12px;
}

.page {
  padding: 25upx;
}

.bg {
  background-size: 100% 100%
}

.gary {
  filter: grayscale(1);
}
</style>
<template>
  <view style="background: #f5f5f6;width: 100%;">

    <!-- <u-action-sheet :show="showCount" :actions="actions" title="请选择性别" description="如果选择保密会报错" @close="showCount = false"
      @select="countSelect">
    </u-action-sheet> -->
    <u-modal duration="100" @cancel="show = false" width="640rpx" confirmColor="#576B95" cancelColor="#000000"
      :closeOnClickOverlay="true" :showCancelButton="true" confirmText='确定' :show="show">

    </u-modal>
    <v-tabs :tabs="tabsList" lineHeight="6rpx" activeColor="#FA5151" lineColor="#FA5151" :bold="true" :scroll="false"
      fontSize="30rpx" v-model="current" @change="tabsChange"></v-tabs>
    <scroll-view  :style="{height: contentHeight + 'px'}" @scrolltolower="loadMore">
      <view class="page" v-if="dataList.length">
        <view class="item" :class="item.status != 0 ? 'gary' : ''" v-for="(item, index ) in dataList" :key="index">
          <view class="box">
            <view class="content">
              <view class="flex justify-between bg">
                <view class="content-title">
                  海南水果月卡
                  <view class="text-xs ">发放时间: {{ item.createTime }}</view>
                </view>
                <view class="content-button" @click="openModel(item)" v-if="item.status == 0">
                  立即使用
                </view>

                <div class="ribbon-success" v-if="item.status != 0">
                  <image src="@/static/images/yishiyong.png"></image>
                </div>

              </view>

              <view class="page-group flex">
                <i class="fold-page"></i>
                <span class="page">月卡</span>

              </view>
              <i class="dot-left"></i>
              <i class="dot-right"></i>
              <view class="fruit_status font26" v-if="tabsIndex == 1">
                <text v-if="item.shippingStatus == 0">待发货</text>
                <text v-if="item.shippingStatus == 1">已发货</text>
                <text v-if="item.shippingStatus == 2">已完成</text>
              </view>
            </view>
            <view class="footer">
              <!-- <view class="footer-label">使用说明</view>÷ -->
              <view class="flex justify-between ">
                <view>使用说明 </view>
                <view>全平台适用</view>
              </view>

            </view>
            <!-- <view class="ribb  on">已失效</view> -->
            <block v-if="tabsIndex == 1 && item.shippingStatus == 1">
              <view class="flex flex-align-center flex-space-end">
                <view>
                  <u-button @click="handlerExpress(item)">查看物流</u-button>
                </view>
                <view style="margin-left: 10rpx;">
                  <u-button @click="handlerConfirm(item)">确认收货</u-button>
                </view>
              </view>
            </block>
          </view>
        </view>
      </view>
	  <view v-else class="flex flex-center" :style="{height: contentHeight + 'px'}">
		  暂无记录
	  </view>
    </scroll-view>
  </view>
</template>
<script>
import {
  getFruitUnclaimedOrder
} from '@/api/system/user.js'
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import url from '@/common/http/url';
export default {
  mixins: [MescrollMixin], // 使用mixin
  data () {
    return {
      current: 0,
      onPageReset: true,
      showAdress: false,
      model: {
        addressId: null,
        count: 0,
        payPassword: '',
      },
      rules: {
        addressId: {
          type: 'string',
          required: true,
          message: '请选择收货地址',
          trigger: ['blur', 'change']
        },
        count: {
          type: 'string',
          required: true,
          message: '请选择领取数量',
          trigger: ['blur', 'change']
        },
        payPassword: {
          type: 'string',
          required: true,
          message: '请填写输入密码',
          trigger: ['blur', 'change']
        },
      },
      fruitLenght: 0,
      fruitId: null,
      isaddressStatus: false,
      addressList: [],
      show: false,
      dataList: [],
      tabsIndex: 0,
      query: {
        type: 1
      },
      tabsList: ['未使用', '已使用'],
      item: {},
	  isLoad: false,
	  contentHeight: 0,
	  dpi: uni.getStorageSync('dpi'),
	  sysTem: uni.getStorageSync('system')
    }
  },
  async mounted () {
	  this.contentHeight = this.sysTem.windowHeight - this.sysTem.statusBarHeight -170/this.dpi
    this.onPageReset = false
    this.$nextTick(async () => {
      this.onPageReset = true
      await Promise.all([
        this.$http("GET", 'address/list', { pageSize: 1, type: 1 }),
        this.$http("GET", 'fruit/orderDraw/enableCount')
      ]).then(res => {
        console.log(res)
        this.addressList = res[0].data.records.map(i => {
          return {
            name: i.addressDetails,
            id: i.id
          }
        })
        // this.addressList.push({
        //   name: '测试用户',
        //   id: '1'
        // })
        this.fruitLenght = res[1].data.enableCount
      })
	  this.upCallback({ num: 1, size: 10 })
    })


  },
  methods: {
    handlerConfirm (item) {
      uni.showModal({
        title: '提示',
        content: '是否确认收货？',
        cancelText: '取消',
        confirmText: '确定',
        success: (res) => {
          if (res.confirm) {
            this.$http("GET", url.fruit.confirmReceive + `/${item.id}`).then(({ code }) => {
              if (code == 200) {
                this.$msg('已确认收货');
                this.tabsChange(1)
              }
            })
          }
        }
      })
    },
    handlerExpress (item) {
      this.$navigateTo(`/pages/order/express/express?com=${item.companyCode}&num=${item.orderNumber}&name=${item.companyName}&phone=${item.deliveryPhone}`)
    },
    addressSelect (e) {
      console.log(e, '123')
      this.showAdress = false

    },
    async openModel (e) {
      uni.navigateTo({
        url: `/pages/user/Fruit/form?id=${e.id}`
      });
    },
    handlerTabsClick (e) {
      this.tabsIndex = e.index
      this.upCallback({ num: 1, size: 10 })
    },
    downCallback () {
      this.upCallback({ num: 1, size: 10 })
    },
    tabsChange (e) {
      console.log('e', e)
      this.tabsIndex = e;
	  this.dataList = []
      this.upCallback({ num: 1, size: 10 })
    },
    upCallback (page) {
      console.log(page, 'page')
      let params = {}
      params.pageNum = page.num // 页码, 默认从1开始
      params.pageSize = page.size // 页长, 默认每页10条
      params.status = this.tabsIndex // 类型
      this.$http("GET", 'fruit/orderDraw/unclaimedOrder', params).then(res => {
        let curPageData = res.data.records;
        console.log(curPageData, 'this.dataList')
        let curPageLen = curPageData.length;
        let totalPage = res.total
        let totalSize = res.total;
        if (page.num == 1) this.dataList = []; //如果是第一页需手动置空列表

        this.dataList = this.dataList.concat(curPageData); //追加新数据


      })
    },
  }
}
</script>
