gupiao_weixin_uniapp/pages/trade/tradeDateil.vue

<template>
  <view class="trade_dateil">
    <view class="securities_info">
      <view class="list">
        <view class="list_left">证券名称</view>
        <view>{{ data.securityName }}</view>
      </view>
      <view class="list">
        <view class="list_left">证券代码</view>
        <view>{{ data.securityCode }}</view>
      </view>
    </view>
    <view class="clinch_info">
      <view class="list">
        <view class="list_left">交易类别</view>
        <view>{{ data.securityType }}</view>
      </view>
      <view class="list">
        <view class="list_left">成交价格</view>
        <view>{{ data.transactionPrice }}</view>
      </view>
      <view class="list">
        <view class="list_left">成交数量</view>
        <view>{{ data.volume }}</view>
      </view>
      <view class="list">
        <view class="list_left">成交金额</view>
        <view>{{ data.transactionAmount }}</view>
      </view>
      <view class="list">
        <view class="list_left" style="margin-right: 140rpx">手续费</view>
        <view>{{ data.premium }}</view>
      </view>
      <view class="list">
        <view class="list_left">手续费率</view>
        <view>{{ data.premiumRatio }}%</view>
      </view>
      <view class="list">
        <view class="list_left">成交日期</view>
        <view>{{ data.transactionDate }}</view>
      </view>
      <view class="list">
        <view class="list_left">成交时间</view>
        <view>{{ data.transactionTime }}</view>
      </view>
    </view>
    <view class="footer">
      <button class="btn" @tap="del">删除</button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        data: {},
      }
    },
    onLoad(options) {
      this.rending(options.id)
    },
    methods: {
      rending(id) {
        this.$api
          .get('/transaction/getDetailById/' + id)
          .then(r => {
            if (r) {
              this.data = r
              console.log(r, '获取数据')
            }
          })
          .catch(fall => {
            console.log(fall)
          })
      },
      del() {
        this.$api
          .post('/transaction/delByIds', {
            ids: this.data.id,
          })
          .then(r => {
            if (r) {
              uni.showToast({
                title: '删除成功',
                icon: 'success',
                duration: 1000,
              })
              setTimeout(() => {
                uni.navigateBack({
                  delta: 1,
                })
              }, 1000)
            }
          })
          .catch(fall => {
            console.log(fall)
          })
        // delByIds
      },
    },
  }
</script>

<style lang="scss" scoped>
  .securities_info {
    padding: 32rpx 24rpx 0 24rpx;
    background-color: white;
    margin-top: 20rpx;
  }
  .list {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    padding-bottom: 32rpx;
    .list_left {
      color: #666666;
      margin-right: 112rpx;
    }
  }
  .clinch_info {
    padding: 32rpx 24rpx 0 24rpx;
    background-color: white;
    margin-top: 20rpx;
  }
  .footer {
    position: fixed;
    bottom: 64rpx;
    width: 702rpx;
    height: 88rpx;
    left: 24rpx;
  }
  .btn {
    border-radius: 44rpx;
    border: 2rpx solid #ec7c00;
    margin: 0;
    padding: 0;
    text-align: center;
    height: 88rpx;
    line-height: 88rpx;
    font-size: 28rpx;
    color: #ec7c00;
  }
  button::after {
    border: 0;
  }
</style>
<style lang="scss">
  page {
    background-color: #f7f7f7;
  }
</style>