youngee_b_api/pages/test/button.vue

<template>
  <view class="button-container" style="margin-top: 200rpx;">
    <button class="button" @click="handleClick">
      <view class="button-left">
        <text class="button-text">免费领</text>
      </view>
      <view class="button-right">
        <text class="button-remain">样品剩余{{ remain }}个</text>
      </view>
      <image src="https://horastar.obs.cn-east-3.myhuaweicloud.com/youngee/talent_upload/button_flash.png" class="button-icon"></image>
    </button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      remain: 100 // 这是一个示例数值，你可以通过接口获取并动态更新这个值
    };
  },
  methods: {
    handleClick() {
      // 处理按钮点击事件
      console.log('按钮被点击了');
      // 在这里添加点击后的逻辑，例如跳转页面或发送请求
      uni.showToast({
        title: '按钮被点击了',
        icon: 'none'
      });
    }
  },
  mounted() {
    // 示例请求，你需要根据实际接口地址和返回数据结构进行修改
    uni.request({
      url: 'https://your-api-endpoint.com/get-remaining-samples',
      success: (res) => {
        this.remain = res.data.remain; // 假设接口返回的数据结构中有remain字段
      },
      fail: (err) => {
        console.error(err);
      }
    });
  }
};
</script>

<style>
.button-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

.button {
  display: flex;
  align-items: center;
  border-radius: 20px;
  padding: 5px;
  border: none; /* 使 button 边框消失 */
  background-color: transparent; /* 背景透明 */
  position: relative; /* 相对定位以便图标定位 */
}

.button-left {
  display: flex;
  align-items: center;
  background-color: #ff4d4d;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  padding: 10px 15px;
}

.button-right {
  display: flex;
  align-items: center;
  background-color: #ffe8d8;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
  padding: 10px 15px;
}

.button-text {
  color: white;
  font-weight: bold;
}

.button-icon {
  width: 100rpx;
  height: 180rpx;
  position: absolute;
  top: 50%;
  left: 38%;
  transform: translate(-50%, -50%);
  z-index: 10; /* 确保图标在最上层 */
}

.button-remain {
  color: #a9a9a9;
}
</style>