颜色值计算

注意，该功能已经下架。

下架原因：该功能用量少。

实现原理：换算 16 进制格式和整型格式，然后按规定格式拼接。例如将#FFB6C1 转换为 255,182,193。

wxml 文件

<view class="page">
  <view class="weui-form">
    <view class="weui-form__text-area">
      <h2 class="weui-form__title">颜色值转换</h2>
      <view class="weui-form__desc">可将颜色值从RGB颜色值转换为16进制颜色值，或16进制颜色值转换为RGB颜色值。</view>
    </view>
    <form>
      <view class="weui-form__control-area">
        <view class="weui-cells__group weui-cells__group_form">
          <view class="weui-cells__title">表单</view>
          <view class="weui-cells">
            <view class="weui-cell weui-cell_active">
              <view class="weui-cell__hd">
                <label class="weui-label">RGB颜色值</label>
              </view>
              <view class="weui-cell__bd">
                <input class="weui-input" placeholder="例如255,182,193" placeholder-class="weui-input__placeholder" name="c1" bindblur="getC1"/>
              </view>
            </view>
            <view class="weui-cell weui-cell_active ">
              <view class="weui-cell__hd">
                <label class="weui-label">16进制颜色值</label>
              </view>
              <view class="weui-cell__bd">
                <input class="weui-input" placeholder="例如#FFB6C1" placeholder-class="weui-input__placeholder" name="c2" bindblur="getC2" />
              </view>
            </view>
            <view class="weui-cell weui-cell_active">
              <view class="weui-cell__hd">
                <label class="weui-label">结果</label>
              </view>
              <view class="weui-cell__bd">
                {{result}}
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="weui-form__opr-area">
        <button class="weui-btn weui-btn_primary" aria-role="button" bindtap="c1Convert">RGB转16进制</button>
        <button class="weui-btn weui-btn_primary" aria-role="button" bindtap="c2Convert">16进制转RGB</button>
        <button class="weui-btn weui-btn_default" aria-role="button" bindtap="doCopy">复制到剪切板</button>
      </view>
    </form>
  </view>
</view>

wxss 文件

无

js 文件

const utils = require("../../utils/utils.js");
const ohttp = require("../../utils/ostrichHttp");

Page({
  data: {
    c1: '',
    c2: '',
    result: '',
  },

  getC1(e) {
    const that = this;
    let obj = e.detail.value
    that.setData({
      c1: obj
    })
  },
  getC2(e) {
    const that = this;
    let obj = e.detail.value
    that.setData({
      c2: obj
    })
  },
  // rgb2hex
  c1Convert() {
    const that = this;
    if (utils.isEmpty(that.data.c1)) {
      // 弹窗错误
      wx.showToast({
        title: '颜色值为空',
      })
      return
    }

    const colorArr = utils.str2arr(that.data.c1);
    if (colorArr.length != 3) {
      wx.showToast({
        title: '颜色值格式错',
      })
      return
    }

    that.doColorConvert(1, that.data.c1)

  },
  // hex2rgb
  c2Convert() {
    const that = this;
    if (utils.isEmpty(that.data.c2)) {
      // 弹窗错误
      wx.showToast({
        title: '颜色值为空',
      })
      return
    }

    if (!utils.hasChar(that.data.c2, "#")) {
      wx.showToast({
        title: '颜色值格式错误',
      })
      return
    }

    if (that.data.c2.length != 7) {
      wx.showToast({
        title: '颜色值长度错误',
      })
      return
    }

    that.doColorConvert(2, that.data.c2)
  },

  doColorConvert: function (vtype, data) {
    const that = this;
    wx.showLoading({
      title: '计算中...',
      mask: true,
    })
    let params = {
      vtype: vtype,
      data: data,
    }
    ohttp.httpPost('/colorConvert', params).then((res) => {
      if (res.data.code == 1) {
        const rdata = res.data.data;
        that.setData({
          result: rdata,
        })
        wx.hideLoading({
          success: (res) => { },
        })
        wx.showToast({
          title: '计算成功',
        })

      } else {
        wx.hideLoading({
          success: (res) => { },
        })
        wx.showToast({
          title: '请稍后再试',
        })
      }
    }).catch((err) => {
      console.log(err);
      wx.hideLoading({
        success: (res) => { },
      })
      wx.showToast({
        title: '网络异常',
      })
    })
  },

  doCopy: function () {
    const that = this;
    if (that.data.result == '') {
      // 弹窗错误
      wx.showToast({
        title: '没有内容',
      })
      return
    }
    wx.setClipboardData({
      data: that.data.result,
      success(res) {
        wx.getClipboardData({
          success(res) {
            wx.showToast({
              title: '复制成功',
            })
          }
        })
      }
    })
  },
})