gupiao_weixin_uniapp/pages/home/market/marketDetail.vue

<template>
  <view class="trend_detail">
    <view class="private_table_head">
      <view class="private_table_head_left">
        <view class="private_head_name">股票名称</view>
        <view class="private_head_price">价格</view>
        <view class="private_head_gains">涨幅</view>
      </view>
      <view class="private_table_head_right">
        <view>{{ currentBelong }}</view>
        <!-- <image
          src="../../../static/jiangxu_false.png"
          class="private_screening_icon"
          mode="scaleToFill"
        /> -->
      </view>
    </view>
    <view class="private_table_list" v-for="(item, index) in list" :key="index">
      <view class="private_table_list_left">
        <view class="table_list_name">
          <view>{{ item.name }}</view>
          <view class="table_list_code">{{ item.code }}</view>
        </view>
        <view class="table_list_price" :style="{ color: item.color }">
          {{ item.price }}
        </view>
        <view class="table_list_gains" :style="{ color: item.color }">
          {{ item.gains }}
        </view>
      </view>
      <view>{{ item.suoshu }}</view>
    </view>
    <u-picker
      :show="showPrivateBelong"
      :columns="columnsBelong"
      cancelColor="#EC7C00"
      confirmColor="#EC7C00"
      @cancel="cancelPrivateBelong"
      @confirm="confirmPrivateBelong"
    ></u-picker>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        list: [
          {
            name: '长城汽车',
            code: '601633',
            price: '33.21',
            gains: '10%',
            suoshu: '电子设备制造',
            color: '#D9001B',
          },
          {
            name: '长城汽车',
            code: '601633',
            price: '33.21',
            gains: '10%',
            suoshu: '电子设备制造',
            color: '#D9001B',
          },
          {
            name: '长城汽车',
            code: '601633',
            price: '33.21',
            gains: '10%',
            suoshu: '电子设备制造',
            color: '#D9001B',
          },
          {
            name: '长城汽车',
            code: '601633',
            price: '33.21',
            gains: '10%',
            suoshu: '电子设备制造',
            color: '#D9001B',
          },
          {
            name: '长城汽车',
            code: '601633',
            price: '33.21',
            gains: '10%',
            suoshu: '电子设备制造',
            color: '#D9001B',
          },
          {
            name: '长城汽车',
            code: '601633',
            price: '33.21',
            gains: '10%',
            suoshu: '电子设备制造',
            color: '#D9001B',
          },
          {
            name: '长城汽车',
            code: '601633',
            price: '33.21',
            gains: '10%',
            suoshu: '电子设备制造',
            color: '#D9001B',
          },
          {
            name: '长城汽车',
            code: '601633',
            price: '33.21',
            gains: '10%',
            suoshu: '电子设备制造',
            color: '#D9001B',
          },
          {
            name: '长城汽车',
            code: '601633',
            price: '33.21',
            gains: '10%',
            suoshu: '电子设备制造',
            color: '#D9001B',
          },
          {
            name: '长城汽车',
            code: '601633',
            price: '33.21',
            gains: '10%',
            suoshu: '电子设备制造',
            color: '#D9001B',
          },
          {
            name: '长城汽车',
            code: '601633',
            price: '33.21',
            gains: '10%',
            suoshu: '电子设备制造',
            color: '#D9001B',
          },
        ],
        // 个股所属板块
        showPrivateBelong: false,
        currentBelong: '所属板块',
        columnsBelong: [['所属板块', '成交量']],
      }
    },
    onLoad(options) {
      uni.setNavigationBarTitle({
        title: options.name,
      })
    },
    methods: {
      // 打开个股所属模块弹出层
      privateBelong() {
        uni.hideTabBar({})
        this.showPrivateBelong = true
      },
      // 取消个股所属模块弹出层
      cancelPrivateBelong() {
        this.showPrivateBelong = false
        uni.showTabBar({})
      },
      // 确认个股所属模块
      confirmPrivateBelong(e) {
        this.currentBelong = e.value[0]
        this.showPrivateBelong = false
        uni.showTabBar({})
      },
    },
  }
</script>

<style lang="scss" scoped>
  .private_table_head {
    display: flex;
    align-items: center;
    font-size: 24rpx;
    font-weight: bold;
    background-color: #fff9f3;
    padding: 20rpx 24rpx;
    justify-content: space-between;
    .private_table_head_right {
      display: flex;
      align-items: center;
    }
    .private_table_head_left {
      display: flex;
      align-items: center;
      .private_head_name {
        width: 200rpx;
      }
      .private_head_price {
        width: 150rpx;
        text-align: center;
      }
      .private_head_gains {
        width: 150rpx;
        text-align: center;
      }
    }
  }
  .private_table_list {
    padding: 24rpx 24rpx;
    border-bottom: 2rpx solid #f6f6f6;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28rpx;
    .private_table_list_left {
      display: flex;
      align-items: center;
      .table_list_name {
        width: 200rpx;
      }
      .table_list_code {
        margin-top: 10rpx;
        font-size: 24rpx;
        color: #999999;
      }
      .table_list_price {
        width: 150rpx;
        text-align: center;
      }
      .table_list_gains {
        width: 150rpx;
        text-align: center;
      }
    }
  }
  .private_screening_icon {
    width: 18rpx;
    height: 10rpx;
    margin-left: 24rpx;
  }
</style>