gupiao_weixin_uniapp/pages/trade/trade.vue

<template>
  <view class="trade">
    <view class="head">
      <view class="head_left">
        <view class="head_date">
          <image
            src="../../static/home_left.png"
            class="date_icon"
            mode="scaleToFill"
            @tap="beforeDay(date)"
          />
          <input
            type="text"
            v-model="date"
            disabled
            class="ipt_date"
            @tap="selectDate"
          />
          <image
            src="../../static/home_right.png"
            class="date_icon"
            mode="scaleToFill"
            @tap="afterDay(date)"
          />
        </view>
        <view class="select_days" @tap="RangeSelect">
          <view>{{ timeRange }}</view>
          <image
            src="../../static/jiangxu_false.png"
            class="select_days_icon"
            mode="scaleToFill"
          />
        </view>
      </view>
      <image
        @tap="selectSift"
        src="../../static/home_sift.png"
        class="head_icon"
        mode="scaleToFill"
      />
    </view>
    <view class="table_head">
      <view class="table_head_left">
        <view class="table_head_name">名称/时间</view>
        <view class="table_head_clinchMoney">成交价</view>
        <view class="table_head_clinchNum">成交量</view>
      </view>
      <view>类别/金额</view>
    </view>
    <view class="table_center">
      <view v-if="list.length > 0">
        <view
          class="table_main"
          v-for="(item, index) in list"
          :key="index"
          @tap="toDetail(item.id)"
        >
          <view class="table_left">
            <view class="table_name_date">
              <view class="table_name">{{ item.securityName }}</view>
              <view class="table_date">{{ item.transactionDate }}</view>
            </view>
            <view class="table_clinchMoney">
              {{ item.transactionPrice }}
            </view>
            <view class="table_clinchNum">
              {{ item.volume }}
            </view>
          </view>
          <view class="table_type_money">
            <view>{{ item.securityType }}</view>
            <view class="table_money">{{ item.transactionAmount }}</view>
          </view>
        </view>
      </view>
      <view v-else>
        <u-empty
          mode="data"
          icon="http://cdn.uviewui.com/uview/empty/data.png"
          marginTop="50"
        >
        </u-empty>
      </view>
    </view>
    <view class="add_icon_box" @tap="addInfo">
      <u-icon name="plus" color="#ffffff" size="28"></u-icon>
    </view>
    <!-- 筛选弹出层 -->
    <u-popup :show="showSift" mode="top">
      <view class="sift_show_type">
        <view>交易类型</view>
        <view class="show_trade_type">
          <view
            class="trade_type"
            :class="{ trade_type1: isSecurities }"
            @tap="isSecurities = true"
          >
            证券买入
          </view>
          <view
            class="trade_type"
            :class="{ trade_type1: !isSecurities }"
            @tap="isSecurities = false"
          >
            证券卖出
          </view>
        </view>
      </view>
      <view class="sift_show_date">
        <view style="font-weight: bold">时间段</view>
        <view class="show_date_range">
          <u-input
            placeholder="请选择开始日期"
            disabled
            border="surround"
            v-model="startTime"
            inputAlign="center"
            fontSize="12"
            disabledColor="#ffffff"
            @tap="selectStartTime"
          ></u-input>
          <u-icon name="minus" size="12" style="padding: 0 16rpx"></u-icon>
          <u-input
            disabled
            placeholder="请选择截至日期"
            disabledColor="#ffffff"
            border="surround"
            v-model="endTime"
            inputAlign="center"
            fontSize="12"
            @tap="selectEndTime"
          ></u-input>
        </view>
      </view>
      <view class="show_securities_code">
        <view style="font-weight: bold">证券代码</view>
        <view class="securities_code">
          <u-input
            placeholder="请输入证券代码"
            border="surround"
            v-model="securitiesCode"
            fontSize="12"
          ></u-input>
        </view>
      </view>
      <view class="show_btn_box">
        <view class="btn show_cancel" @tap="cancelShowSift">取消</view>
        <view class="btn show_confirm" @tap="confirmShowSift">确定</view>
      </view>
    </u-popup>
    <!-- 筛选/开始时间选择 -->
    <u-datetime-picker
      :show="startTimeShow"
      v-model="date"
      mode="date"
      cancelColor="#EC7C00"
      confirmColor="#EC7C00"
      @cancel="startTimeShow = false"
      @confirm="confirmStartTime"
    ></u-datetime-picker>
    <!-- 筛选/结束时间选择 -->
    <u-datetime-picker
      :show="endTimeShow"
      v-model="date"
      mode="date"
      :minDate="minDate"
      cancelColor="#EC7C00"
      confirmColor="#EC7C00"
      @cancel="endTimeShow = false"
      @confirm="confirmEndTime"
    ></u-datetime-picker>
    <!-- 录入信息弹出层 -->
    <u-popup :show="showInput" mode="bottom">
      <view class="show_input_list" @tap="toInfo"> 录入信息 </view>
      <view class="show_input_list" @tap="daoru"> 导入信息 </view>
      <view
        class="show_input_list"
        style="background-color: #f6f6f6"
        @tap="cancelInput"
      >
        取消
      </view>
    </u-popup>
    <!-- 时间段选择 -->
    <u-picker
      :show="timeRangeShow"
      :columns="columns"
      cancelColor="#EC7C00"
      confirmColor="#EC7C00"
      @cancel="cancelRange"
      @confirm="confirmRange"
    ></u-picker>
    <!-- 选择时间 -->
    <u-datetime-picker
      :show="dateShow"
      v-model="date"
      mode="date"
      cancelColor="#EC7C00"
      confirmColor="#EC7C00"
      @cancel="cancelDate"
      @confirm="confirmDate"
    ></u-datetime-picker>
  </view>
</template>

<script>
  import config from '@/config'
  export default {
    data() {
      return {
        // 时间选择
        dateShow: false,
        date: '',
        // 时间段选择
        timeRangeShow: false,
        timeRange: '近7天',
        columns: [['近7天', '近30天']],
        // 录入信息弹出层
        showInput: false,
        // 筛选弹出层
        showSift: false,
        // 证券买入or证券卖出
        isSecurities: true,
        // 筛选/开始时间
        startTime: '',
        // 选择开始时间
        startTimeShow: false,
        // 选择截至时间
        endTimeShow: false,
        // 选择截至时间最小值
        minDate: null,
        // 筛选/截至时间
        endTime: '',
        // 证券代码
        securitiesCode: '',
        list: [],
        pagenum: 1,
        last_page: null,
      }
    },
    onLoad(options) {
      this.date = this.getTime(Date.parse(new Date()))
    },
    onShow() {
      this.rending()
    },
    onReachBottom() {
      if (this.pagenum < this.last_page) {
        this.getnewGoods()
      }
    },
    methods: {
      daoru() {
        let that = this
        wx.chooseMessageFile({
          count: 1, //限制选择的文件数量
          type: 'file', //非图片和视频的文件,不选默认为all
          //type:'video',//视频
          //type:'image',//图片
          success(res) {
            console.log(res)
            res.tempFiles.forEach((item, index) => {
              let str = item.path
              let i = str.indexOf('.')
              let result = str.substr(i + 1, str.length)
              console.log(result)
              if (result == 'xlsx' || result == 'xls') {
                uni.uploadFile({
                  url: config.server + '/import/transactionRecord',
                  filePath: item.path,
                  name: 'file',
                  // header: {
                  //   "X-Token": "Bearer " + store.state.app.token,
                  // },
                  // formData: {
                  //   month: that.date,
                  // },
                  success: uploadFileRes => {
                    that.rending()
                    that.showInput = false
                    uni.showTabBar({})
                    uni.showToast({
                      title: '导入成功',
                      icon: 'none',
                    })
                  },
                  fail: err => {
                    console.log(err)
                  },
                })
              } else {
                uni.showToast({
                  title: '暂只支持excel文件',
                  icon: 'none',
                })
              }
            })
          },
        })
      },
      rending() {
        this.$api
          .post('/transaction/findPage', {
            endTime: this.endTime,
            keyWord: this.securitiesCode,
            num: '',
            pageModel: {
              pageNo: this.pagenum,
              pageSize: 20,
              sortField: '',
              sortWay: '',
            },
            startTime: this.startTime,
            transactionCategory: this.isSecurities ? '证券买入' : '证券卖出',
            transactionDate: this.date,
          })
          .then(r => {
            if (r) {
              this.list = r.list
              this.last_page = r.totalPage
              console.log(r)
            }
          })
          .catch(fall => {
            console.log(fall)
          })
      },
      rending1() {
        this.$api
          .post('/transaction/findPage', {
            endTime: this.endTime,
            keyWord: this.securitiesCode,
            num: '',
            pageModel: {
              pageNo: this.pagenum,
              pageSize: 20,
              sortField: '',
              sortWay: '',
            },
            startTime: this.startTime,
            transactionCategory: this.isSecurities ? '证券买入' : '证券卖出',
            transactionDate: this.endTime ? this.date : '',
          })
          .then(r => {
            if (r) {
              this.list = [...this.list, ...r.list]
              this.last_page = r.totalPage
              console.log(r)
            }
          })
          .catch(fall => {
            console.log(fall)
          })
      },
      // 格式化时间戳
      getTime(date) {
        let time = new Date(date)
        let y = time.getFullYear()
        let m = time.getMonth() + 1
        let d = time.getDate()
        let h = time.getHours()
        let mm = time.getMinutes()
        let s = time.getSeconds()
        if (s < 10) {
          s = '0' + s
        }
        if (h < 10) {
          h = '0' + h
        }
        if (mm < 10) {
          mm = '0' + mm
        }
        if (m < 10) {
          m = '0' + m
        }
        if (d < 10) {
          d = '0' + d
        }
        return `${y}-${m}-${d}`
      },
      // 打开时间选择器
      selectDate() {
        this.dateShow = true
        uni.hideTabBar({})
      },
      // 关闭时间选择器
      cancelDate() {
        this.dateShow = false
        uni.showTabBar({})
      },
      // 确认当前选中时间
      confirmDate(e) {
        this.pagenum = 1
        this.$nextTick(() => {
          this.date = this.getTime(e.value)

          this.rending()
        })
        this.dateShow = false
        uni.showTabBar({})
      },
      // 打开筛选弹出层
      selectSift() {
        uni.hideTabBar({})
        this.showSift = true
      },
      // 关闭筛选弹出层
      cancelShowSift() {
        this.startTimeShow = false
        this.endTimeShow = false
        uni.showTabBar({})
        this.showSift = false
      },
      // 确定筛选
      confirmShowSift() {
        this.pagenum = 1
        this.$api
          .post('/transaction/findPage', {
            endTime: this.endTime,
            keyWord: this.securitiesCode,
            num: '',
            pageModel: {
              pageNo: this.pagenum,
              pageSize: 20,
              sortField: '',
              sortWay: '',
            },
            startTime: this.startTime,
            transactionCategory: this.isSecurities ? '证券买入' : '证券卖出',
            transactionDate: '',
          })
          .then(r => {
            if (r) {
              this.list = r.list
              uni.showTabBar({})
              this.showSift = false
              console.log(r)
            }
          })
          .catch(fall => {
            console.log(fall)
          })
      },
      // 确定开始时间
      confirmStartTime(e) {
        this.$nextTick(() => {
          this.minDate = new Date(e.value).getTime()
          console.log(this.minDate)
          this.startTime = this.getTime(e.value)
        })

        this.startTimeShow = false
      },
      // 确定截至时间
      confirmEndTime(e) {
        this.$nextTick(() => {
          this.endTime = this.getTime(e.value)
        })
        this.endTimeShow = false
      },
      // 选择开始时间
      selectStartTime() {
        if (!this.endTimeShow) {
          this.startTimeShow = true
        }
      },
      // 选择截至时间
      selectEndTime() {
        if (this.startTime) {
          if (!this.startTimeShow) {
            this.endTimeShow = true
          }
        } else {
          uni.showToast({
            title: '请先选择开始时间',
            icon: 'none',
          })
        }
      },
      // 打开录入信息弹出层
      addInfo() {
        uni.hideTabBar({})
        this.showInput = true
      },
      // 关闭录入信息弹出层
      cancelInput() {
        this.showInput = false
        uni.showTabBar({})
      },
      // 打开时间段选择
      RangeSelect() {
        uni.hideTabBar({})
        this.timeRangeShow = true
      },
      // 确定时间段选择
      confirmRange(e) {
        this.timeRange = e.value[0]
        this.$api
          .post('/transaction/findPage', {
            endTime: '',
            keyWord: '',
            num: this.timeRange == '近7天' ? 7 : 30,
            pageModel: {
              pageNo: 1,
              pageSize: 20,
              sortField: '',
              sortWay: '',
            },
            startTime: '',
            transactionCategory: '',
            transactionDate: '',
          })
          .then(r => {
            if (r) {
              this.list = r.list
              console.log(r)
            }
          })
          .catch(fall => {
            console.log(fall)
          })
        this.timeRangeShow = false
        uni.showTabBar({})
      },
      // 取消时间段选择
      cancelRange() {
        this.timeRangeShow = false
        uni.showTabBar({})
      },
      // 前往交易详情
      toDetail(id) {
        uni.navigateTo({
          url: `/pages/trade/tradeDateil?id=${id}`,
        })
      },
      // 前往录入信息
      toInfo() {
        this.showInput = false
        uni.showTabBar({})
        uni.navigateTo({
          url: '/pages/trade/tradeInfo',
        })
      },
      // 前一日
      beforeDay(date) {
        this.pagenum = 1
        this.endTime = ''
        this.startTime = ''
        this.date = this.getTime(new Date(date).getTime() - 24 * 60 * 60 * 1000)
        this.rending()
      },
      // 后一日
      afterDay(date) {
        this.pagenum = 1
        this.endTime = ''
        this.startTime = ''
        this.date = this.getTime(new Date(date).getTime() + 24 * 60 * 60 * 1000)
        this.rending()
      },
      getnewGoods() {
        this.pagenum = this.pagenum + 1
        // 1.展示loading效果
        uni.showLoading({
          title: '数据加载中...',
        })
        // 2.开启节流阀
        this.isLoading = true
        // 3.发起网络请求
        this.rending1()
        // 无论成功与否都会调用该方法
        // 4.隐藏loading效果
        uni.hideLoading()
        // 5.关闭节流阀
        this.isLoading = false
      },
    },
  }
</script>

<style lang="scss" scoped>
  .head {
    padding: 24rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .head_left {
      display: flex;
      align-items: center;
      .head_date {
        padding: 16rpx 32rpx;
        border-radius: 8rpx;
        border: 2rpx solid #ec7c00;
        display: flex;
        align-items: center;
        .ipt_date {
          color: #ec7c00;
          width: 180rpx;
          font-size: 24rpx;
          text-align: center;
        }
        .date_icon {
          width: 24rpx;
          height: 24rpx;
        }
      }
      .select_days {
        margin-left: 40rpx;
        padding: 16rpx 32rpx;
        border-radius: 8rpx;
        border: 2rpx solid #999999;
        font-size: 24rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .select_days_icon {
          margin-left: 40rpx;
          width: 18rpx;
          height: 10rpx;
        }
      }
    }
    .head_icon {
      height: 40rpx;
      width: 40rpx;
    }
  }
  .sift_show_type {
    font-size: 28rpx;
    font-weight: bold;
    padding: 16rpx 24rpx;
  }
  .show_trade_type {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    .trade_type {
      padding: 12rpx 40rpx;
      border: 2rpx solid #999999;
      border-radius: 8rpx;
      margin-right: 40rpx;
      font-size: 24rpx;
      color: #999999;
      font-weight: 500;
      margin-top: 16rpx;
    }
    .trade_type1 {
      border-color: #ec7c00;
      color: #ec7c00;
      background-color: #fffcf9;
    }
  }
  .sift_show_date {
    padding: 24rpx;
    font-size: 28rpx;
    .show_date_range {
      margin-top: 16rpx;
      display: flex;
      align-items: center;
    }
  }
  /deep/.u-icon--right {
    padding: 0 16rpx !important;
  }
  .show_securities_code {
    padding: 0 24rpx;
    font-size: 28rpx;
    .securities_code {
      margin-top: 16rpx;
      margin-bottom: 80rpx;
    }
  }
  .show_btn_box {
    height: 88rpx;
    display: flex;
    align-items: center;
    .btn {
      width: 374rpx;
      height: 88rpx;
      line-height: 88rpx;
      text-align: center;
      font-size: 28rpx;
    }
    .show_cancel {
      border-top: 2rpx solid #f6f6f6;
    }
    .show_confirm {
      width: 378rpx;
      background-color: #ec7c00;
      color: white;
    }
  }
  .table_head {
    padding: 20rpx 24rpx;
    background-color: #fff9f3;
    display: flex;
    align-items: center;
    // justify-content: space-between;
    font-size: 24rpx;
    font-weight: bold;
    justify-content: space-between;
    .table_head_left {
      display: flex;
      align-items: center;
      .table_head_name {
        width: 200rpx;
      }
      .table_head_clinchMoney {
        width: 170rpx;
        text-align: center;
      }
      .table_head_clinchNum {
        width: 170rpx;
        text-align: center;
      }
    }
  }
  .table_center {
    padding: 0 24rpx;
    .table_main {
      padding: 24rpx 0;
      font-size: 28rpx;
      padding-bottom: 2rpx solid #f6f6f6;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .table_left {
        display: flex;
        align-items: center;
      }
      .table_name_date {
        .table_date {
          font-size: 24rpx;
          color: #999999;
          margin-top: 10rpx;
        }
      }
      .table_name {
        width: 200rpx;
      }
      .table_type_money {
        text-align: center;
        .table_money {
          margin-top: 10rpx;
          font-size: 24rpx;
          color: #999999;
        }
      }
      .table_clinchMoney {
        width: 170rpx;
        text-align: center;
      }
      .table_clinchNum {
        width: 170rpx;
        text-align: center;
      }
    }
  }
  .add_icon_box {
    width: 104rpx;
    height: 104rpx;
    background: linear-gradient(132deg, #ffb564 0%, #ec7c00 100%);
    position: fixed;
    border-radius: 104rpx;
    bottom: 56rpx;
    right: 24rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .show_input_list {
    padding: 40rpx 0rpx;
    border-bottom: 2rpx solid #f6f6f6;
    text-align: center;
    font-size: 28rpx;
  }
</style>