yunyubang-web/src/views/productService/welfare.vue

<template>
  <div style="padding:0 20px;">
    <div ref="lxHeader">
      <lx-header icon="md-apps" text="福利包" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
        <div slot="content"></div>
        <slot>
          <div>
            <Input style="width: 200px; margin-right: 10px" placeholder="关键字搜索" />
            <Button type="primary">查询</Button>
            <Button type="primary" style="margin-left: 10px">新增</Button>
          </div>
        </slot>
      </lx-header>
    </div>

    <xy-table :list="list" :table-item="table">
      <template v-slot:btns>
        <el-table-column fixed="right" label="操作" width="310" header-align="center">
          <template slot-scope="scope">
            <Button icon="ios-basket" type="primary" style="margin-left: 10px;" size="small" @click="isShowCombine = true">产品组合</Button>
            <Button icon="ios-trash-outline" type="primary" style="margin-left: 10px;" size="small" ghost>删除</Button>
            <el-switch
              style="margin-left: 10px;"
              :value="scope.row.state_name == '已上架' ? true : false"
              active-color="#BF617C"
              inactive-color="#E5E5E5"
              :active-text="scope.row.state_name == '已上架' ? '已上架' : '已下架'"
              @change="stateChange(scope.row)">
            </el-switch>
          </template>
        </el-table-column>
      </template>
    </xy-table>

    <div style="display: flex;justify-content: flex-end;">
      <Page :total="5" show-elevator />
    </div>

    <productCombine :is-show.sync="isShowCombine"></productCombine>
  </div>
</template>

<script>
import productCombine from './components/productCombine'
export default {
  components:{
    productCombine
  },
  data() {
    return {
      isShowCombine:false,
      list:JSON.parse('{"total":2,"rows":[{"id":6,"name":"\u5b9d\u5b9d\u6811\u4e13\u4eab\u5927\u793c\u5305","price":"0.01","content":"\u5b9e\u7269\u793c\u54c1\uff0c\u4ea7\u5eb7\u4fee\u590d\uff0c\u8d85\u503c\u6444\u5f71\uff0c\u6e38\u6cf3\u6d17\u6fa1\uff0c\u65e9\u6559\u53ca\u533b\u9662\u914d\u5957\u4e00\u6761\u9f99\u670d\u52a1\u5957\u9910","state":"inactive","created_at":"2021-09-06T07:22:17.000000Z","updated_at":"2021-12-09T11:35:53.000000Z","deleted_at":null,"poster":"\\/ueditor\\/php\\/upload\\/image\\/20210910\\/1631241849267383.jpg","phone":"123456789","wechat":"987654321","items_count":6,"poster_url":"https:\\/\\/yunyubang2021.langye.net\\/ueditor\\/php\\/upload\\/image\\/20210910\\/1631241849267383.jpg","state_name":"\u5df2\u4e0b\u67b6","items":[{"id":14,"package_id":6,"product_type_id":26,"product_id":null,"original_price":null,"price":null,"commission":null,"sharing":null,"created_at":"2021-09-06T02:50:04.000000Z","updated_at":"2021-09-06T11:12:21.000000Z","deleted_at":null,"unit":"\u4e2a","num":2},{"id":15,"package_id":6,"product_type_id":8,"product_id":null,"original_price":null,"price":null,"commission":null,"sharing":null,"created_at":"2021-09-07T03:12:21.000000Z","updated_at":"2021-09-07T03:12:21.000000Z","deleted_at":null,"unit":null,"num":null},{"id":16,"package_id":6,"product_type_id":1,"product_id":null,"original_price":null,"price":null,"commission":null,"sharing":null,"created_at":"2021-09-07T03:12:21.000000Z","updated_at":"2021-09-07T03:12:21.000000Z","deleted_at":null,"unit":null,"num":null},{"id":17,"package_id":6,"product_type_id":17,"product_id":null,"original_price":null,"price":null,"commission":null,"sharing":null,"created_at":"2021-09-07T03:12:21.000000Z","updated_at":"2021-09-07T03:12:21.000000Z","deleted_at":null,"unit":null,"num":null},{"id":18,"package_id":6,"product_type_id":27,"product_id":null,"original_price":null,"price":null,"commission":null,"sharing":null,"created_at":"2021-09-07T03:12:21.000000Z","updated_at":"2021-09-07T03:12:21.000000Z","deleted_at":null,"unit":null,"num":null},{"id":19,"package_id":6,"product_type_id":25,"product_id":null,"original_price":null,"price":null,"commission":null,"sharing":null,"created_at":"2021-09-07T03:12:21.000000Z","updated_at":"2021-09-07T03:12:21.000000Z","deleted_at":null,"unit":null,"num":null}]},{"id":8,"name":"\u5582\u7231\u4e50\u5b55\u4e4b\u5b55\u5987\u7167","price":"0.00","content":"<section class=\\"_135editor\\" data-role=\\"paragraph\\"><section class=\\"_135editor\\" data-tools=\\"135\u7f16\u8f91\u5668\\" data-id=\\"88402\\"><section style=\\"padding: 2px 15px; border-top-color: rgb(160, 160, 160); border-bottom-color: rgb(160, 160, 160); border-top-width: 0.1em; border-bottom-width: 0.1em; border-top-style: solid; border-bottom-style: solid;\\"><section class=\\"_135editor\\" data-tools=\\"135\u7f16\u8f91\u5668\\" data-id=\\"98155\\"><section style=\\"margin: 10px auto; text-align: center;\\"><section class=\\"assistant\\" style=\\"margin: 0px auto; width: 120px; box-sizing: border-box;\\"><img title=\\"1638414377678859.png\\" alt=\\"image.png\\" src=\\"\\/ueditor\\/php\\/upload\\/image\\/20211202\\/1638414377678859.png\\"\\/><br\\/><\\/section><\\/section><\\/section><\\/section><\\/section><p style=\\"margin: 5px 0px; color: rgb(0, 0, 0); font-family: sans-serif; font-size: 16px; vertical-align: inherit;\\"><span style=\\"font-family: \u5fae\u8f6f\u96c5\u9ed1,;\\" microsoft=\\"\\"><\\/span><\\/p><section class=\\"_135editor\\" data-tools=\\"135\u7f16\u8f91\u5668\\" data-id=\\"98143\\"><section style=\\"margin: 10px auto;\\"><section style=\\"padding: 0px 15px 0px 0px; color: rgb(250, 108, 133); background-color: rgb(252, 222, 224);\\"><section style=\\"background-position: right bottom; color: rgb(250, 108, 133); background-image: none;\\" editor_styles=\\"\\" images=\\"\\" files=\\"\\" bdn.135editor.com=\\"\\"><section class=\\"135brush\\" style=\\"padding: 15px 0px 15px 15px; text-align: justify; line-height: 1.75em; letter-spacing: 1.5px; font-size: 14px;\\" data-autoskip=\\"1\\"><p style=\\"vertical-align: inherit;\\">\u201c\u
      table:[
        {
          prop:"name",
          label:'名称',
          width: 250
        },
        {
          prop:"items_count",
          label:'项目数量',
          width: 130
        },
        {
          prop:"price",
          label:"价格",
          width: 120,
          formatter:(cell,data,value,index)=>{
            return `${value}￥`
          }
        },
        {
          prop: 'state_name',
          label: '状态',
          width: 120,
          customFn:(row)=>{
            if(row.state_name == '已上架'){
              return <div style="color: green;text-align: center;">{row.state_name}</div>
            }else{
              return <div style="color: red;text-align: center;">{row.state_name}</div>
            }
          }
        }
      ]
    }
  },
  methods: {
    stateChange(row){
      row.state_name = row.state_name == '已上架' ? '已下架' : '已上架'
    }
  }

}
</script>

<style scoped lang="scss">
</style>