<template>
  <div class="box">
    <div class="content">
      <div class="container">
        <h1>积分商城</h1>
        <hr />
        <el-row :gutter="20">
          <el-col :span="6" v-for="(item,index) in list" :key="index">
            <div class="grid-content ">
              <img src="item.goodPic" alt="" />
              <h2>{{item.goodName}}</h2>
              <h5>{{ item.goodDescription }}</h5>
              <el-button type="primary" @click="gmshop(item.id)">兑换</el-button>
            </div>
            </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
  
  <script>
import { apiServe } from "@/api/api";
export default {
  name: "WenhuaWebuiZhiShi",

  data() {
    return {
      list: [],
      imageUrl: "",
      cdata: {},
    };
  },

  mounted() {
    this.cdata.token = localStorage.getItem("token");
    let token = localStorage.getItem("token");
    console.log(token);
    if (!token) {
      if (!token) {
        this.$confirm("您还未登录，是否前去登录?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            // 跳转登录
            this.$router.push("/login");
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消",
            });
            this.$router.push("/");
          });
      }
    }
    this.searchUser();
  },

  methods: {
    searchUser() {
      apiServe.shoplist(this.cdata).then((res) => {
        console.log(res);
        this.list = res.data.data;
      });
    },
    gmshop(id){
      this.$confirm("是否购买此商品?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 跳转登录
          apiServe.shop(id).then((res) => {
           console.log(res);
           this.$message({
            type:'success',
            message: '兑换成功',
          });
        });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
      
    }
  },
};
</script>
  
<style scoped lang="less">
.box::v-deep {
  height: 100%;
  //   background-color: #ccc;
  padding: 50px 60px 30px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;

  .content {
    width: 90%;
    // height: 300px;
    // background-color: #ffffff;
    padding: 30px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 5px;
  }

  .container {
    width: 100%;
    .el-row {
      margin-top: 50px;
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    .el-col {
      border-radius: 4px;
    }
    .grid-content {
      text-align: center;
      height: auto;
      border-radius: 4px;
      min-height: 36px;
      border: 1px solid #ccc;
      position: relative;
      margin-bottom: 10px;
      img{
        width: 90%;
        display: block;
        margin: 10px 0;
        margin-left: 20px;
      }
      button{
        margin-top: 10px;
        margin-bottom: 10px;
      }
    }
    .row-bg {
      padding: 10px 0;
    }
  }
}
</style>