jjx-web/pages/user/components/setting.vue

<template>
		<el-card class="box-card">
      <div slot="header" class="clearfix" style="text-align: center">
        <span style="font-size: 20px;line-height: 2em;">消息推送设置</span>
        <div style="color: #999999">我们将针对您的选择，为您精准推送询价信息</div>
			</div>
      <el-row class="setting-list" :gutter="50">
        <el-col span="12" v-for="(item,index) in settingList" :key="index">
          <div class="item">
            <div class="title">
              <el-badge is-dot class="badge"></el-badge>
              {{ item.title }}
            </div>
            <div class="btn">
              <el-switch
                  v-model="item.status">
              </el-switch>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <div class="form">
        <div class="form-title">
          * 请选择产品：
        </div>
        <el-form ref="form" :model="form" label-position="left" label-width="120px">
          <el-form-item label="螺纹钢、高线">
            <el-checkbox-group v-model="group1" size="small">
              <el-checkbox label="螺纹钢" border></el-checkbox>
              <el-checkbox label="盘螺" border></el-checkbox>
              <el-checkbox label="盘圆" border></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="钢材">
            <el-checkbox-group v-model="group1" size="small">
              <el-checkbox label="螺纹钢" border></el-checkbox>
              <el-checkbox label="盘螺" border></el-checkbox>
              <el-checkbox label="盘圆" border></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="钢版">
            <el-checkbox-group v-model="group1" size="small">
              <el-checkbox label="螺纹钢" border></el-checkbox>
              <el-checkbox label="盘螺" border></el-checkbox>
              <el-checkbox label="盘圆" border></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="型材">
            <el-checkbox-group v-model="group1" size="small">
              <el-checkbox label="螺纹钢" border></el-checkbox>
              <el-checkbox label="盘螺" border></el-checkbox>
              <el-checkbox label="盘圆" border></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="配件、耗材">
            <el-checkbox-group v-model="group1" size="small">
              <el-checkbox label="螺纹钢" border></el-checkbox>
              <el-checkbox label="盘螺" border></el-checkbox>
              <el-checkbox label="盘圆" border></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="二手钢材、设备">
            <el-checkbox-group v-model="group1" size="small">
              <el-checkbox label="螺纹钢" border></el-checkbox>
              <el-checkbox label="盘螺" border></el-checkbox>
              <el-checkbox label="盘圆" border></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </div>
      <el-divider></el-divider>
      <div class="form">
        <div class="form-title">
          * 请选择服务地区：
        </div>
        <el-form ref="form" :model="form" label-position="left" label-width="120px">
            广西-南宁
        </el-form>
      </div>
      <el-divider></el-divider>
      <el-button type="danger" round>保存设置</el-button>
		</el-card>
</template>

<script>
	let that;
	const originalForms = {sort: 0, enable: true}
	// import { VueCropper }  from 'vue-cropper'
	export default {
		components: {
			// VueCropper
		},
		data() {
			return {
        settingList: [
          {
            id: 1,
            title: '金融服务',
            status: true
          },
          {
            id: 2,
            title: '金融服务',
            status: true
          },
          {
            id: 3,
            title: '找合作信息推送服务',
            status: true
          },
          {
            id: 4,
            title: '找加工信息推送服务',
            status: false
          },
          {
            id: 5,
            title: '旧货信息交易推送服务',
            status: true
          },
          {
            id: 6,
            title: '询价单和选项推送服务',
            status: false
          }
        ],
        form: {},
        group1: []
			}
		},
		created() {
			that = this
		},
		methods: {

		}
	}
</script>

<style lang="less">
.setting-list{
  .item{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 5px auto;
    .title{
      display: flex;
      align-items: center;
      .badge{
        display: flex;
        align-items: center;
        padding: 0 5px;
      }
    }
  }
}
.form-title{
  color: #bf2b28;
  font-size: 16px;
  font-weight: 500;
  line-height: 2em;
  margin-bottom: 10px;
}
.form{
  padding: 10px;
}
</style>