怎么设置点击按钮改变小程序页面的背景颜色

wxml:

<view class="container log-list" style="background-color:{{pageBackgroundColor}}">
  <view>
    <view class="top-title">直销部日报标准： </view>

    <!--日期选择  -->
    <view class="section date-select">
      <picker mode="date" value="{{date}}" start="2017-06-05" end="2019-06-05" bindchange="bindDateChange">
        <view class="picker">

.

.

.

<view >更换背景颜色</view>
  <view class='bg-tab'>
    <view class='color-tab color-tab1' bindtap="changeColorhui" hover-class="none">灰色</view>
    <view class='color-tab color-tab2' bindtap="changeColorlanhui" hover-class="none">蓝灰</view>
    <view class='color-tab color-tab3' bindtap="changeColordalan" hover-class="none">大蓝</view>
    <view class='color-tab color-tab4' bindtap="changeColorqianlv" hover-class="none">浅绿</view>
    <view class='color-tab color-tab5' bindtap="changeColorzise" hover-class="none">紫色</view>
    <view class='color-tab color-tab6' bindtap="changeColoryouyahui" hover-class="none">优雅灰</view>
    <view class='color-tab color-tab7' bindtap="changeColorbai" hover-class="none">白色</view>
  </view>

js:

Page({
  // data: {
  //   logs: []
  // },
  // onLoad: function () {
  //   this.setData({
  //     logs: (wx.getStorageSync('logs') || []).map(log => {
  //       return util.formatTime(new Date(log))
  //     })
  //   })
  // }
  data: {
    primarySize: 'default',
    height: 20,
    focus: false,
    pageBackgroundColor: '#fff',
    pageBackgroundColorbai: '#fff',
    pageBackgroundColorhui: '#ECECEC',
    pageBackgroundColorlanhui: '#ECDBFF',
    pageBackgroundColordalan: '#AFB9FF',
    pageBackgroundColorqianlv: '#D5F6D6',
    pageBackgroundColorzise: '#F49BF6',
    pageBackgroundColoryouyahui: '#C9CBC5',

// 改为灰色
  changeColorhui: function () {
    var bgColor = this.data.pageBackgroundColorhui;
    // 设置背景颜色数据
    this.setData({
      pageBackgroundColor: bgColor
    });
  },
  // 改为蓝灰
  changeColorlanhui: function () {
    var bgColor = this.data.pageBackgroundColorlanhui;
    // 设置背景颜色数据
    this.setData({
      pageBackgroundColor: bgColor
    });
  },
  // 改为大蓝
  changeColordalan: function () {
    var bgColor = this.data.pageBackgroundColordalan;
    // 设置背景颜色数据
    this.setData({
      pageBackgroundColor: bgColor
    });
  },
  // 改为浅绿
  changeColorqianlv: function () {
    var bgColor = this.data.pageBackgroundColorqianlv;
    // 设置背景颜色数据
    this.setData({
      pageBackgroundColor: bgColor
    });
  },
  // 改为紫色
  changeColorzise: function () {
    var bgColor = this.data.pageBackgroundColorzise;
    // 设置背景颜色数据
    this.setData({
      pageBackgroundColor: bgColor
    });
  },
  // 改为优雅灰
  changeColoryouyahui: function () {
    var bgColor = this.data.pageBackgroundColoryouyahui;
    // 设置背景颜色数据
    this.setData({
      pageBackgroundColor: bgColor
    });
  },
  // 改为白色
  changeColorbai: function () {
    var bgColor = this.data.pageBackgroundColorbai;
    // 设置背景颜色数据
    this.setData({
      pageBackgroundColor: bgColor
    });
  }