vue

vue/vue高阶/4.归纳.md

@@ -72,4 +72,19 @@ modules：模块化vueX
 3.Mint https://mint-ui.github.io/#!/zh-cn
 PC端
 1.iView https://www.iviewui.com/
-2.Element https://element.eleme.cn/#/zh-CN/component/installation
+2.Element https://element.eleme.cn/#/zh-CN/component/installation
+
+作业：
+1.修改表单组件样式：label字体红色  input背景黄色
+2.实现倒三角
+3.场景题
+模拟数据 （5-10条即可）
+实现一个用户查询列表页面
+可以通过用户名称 用户id来搜索用户信息 并在表格中实现 支持翻页 
+使用组件
+4.实现一个函数，可以实现这样的功能：
+在一定的时间间隔内发送一次请求不成功，则继续发送请求，
+如果发送请求次数到了指定次数还不成功，才会进入catch函数
+如：retryGet(url,retries,inteval).then().catch()
+发送请求以get()表示即可
+5.实现两栏布局，左侧定宽100px，右侧自适应（至少两种）

vue/vue高阶/project3/src/views/My.vue

@@ -1,39 +1,226 @@
 <template>
   <div class="my">
-    我的
+    <!-- 我的
     <h1>
       {{list}}
-    </h1>
+    </h1> -->
     <!-- axios -->
     <!--
     
       Promise().then().catch()
       response => res
      http://jr.edu.koobietech.com/showAddresses get -->
+    <el-carousel height="150px">
+      <el-carousel-item v-for="item in arr" :key="item.id">
+        <img :src="item.urls" />
+      </el-carousel-item>
+    </el-carousel>
+    <br /><br />
+    <el-form
+      :model="ruleForm"
+      :rules="rules"
+      ref="ruleForm"
+      label-width="100px"
+      class="demo-ruleForm"
+    >
+      <el-form-item label="活动名称" prop="name">
+        <el-input v-model="ruleForm.name"></el-input>
+      </el-form-item>
+      <el-form-item label="活动区域" prop="region">
+        <el-select v-model="ruleForm.region" placeholder="请选择活动区域">
+          <el-option label="区域一" value="shanghai"></el-option>
+          <el-option label="区域二" value="beijing"></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="活动时间" required>
+        <el-col :span="11">
+          <el-form-item prop="date1">
+            <el-date-picker
+              type="date"
+              placeholder="选择日期"
+              v-model="ruleForm.date1"
+              style="width: 100%"
+            ></el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-col class="line" :span="2">-</el-col>
+        <el-col :span="11">
+          <el-form-item prop="date2">
+            <el-time-picker
+              placeholder="选择时间"
+              v-model="ruleForm.date2"
+              style="width: 100%"
+            ></el-time-picker>
+          </el-form-item>
+        </el-col>
+      </el-form-item>
+      <el-form-item label="即时配送" prop="delivery">
+        <el-switch v-model="ruleForm.delivery"></el-switch>
+      </el-form-item>
+      <el-form-item label="活动性质" prop="type">
+        <el-checkbox-group v-model="ruleForm.type">
+          <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
+          <el-checkbox label="地推活动" name="type"></el-checkbox>
+          <el-checkbox label="线下主题活动" name="type"></el-checkbox>
+          <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+      <el-form-item label="特殊资源" prop="resource">
+        <el-radio-group v-model="ruleForm.resource">
+          <el-radio label="线上品牌商赞助"></el-radio>
+          <el-radio label="线下场地免费"></el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <el-form-item label="活动形式" prop="desc">
+        <el-input type="textarea" v-model="ruleForm.desc"></el-input>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm('ruleForm')"
+          >立即创建</el-button
+        >
+        <el-button @click="resetForm('ruleForm')">重置</el-button>
+      </el-form-item>
+    </el-form>
   </div>
 </template>
 
 <script>
 import axios from "axios";
+// http://shop-api.edu.koobietech.com/indexImgs
 export default {
   data() {
     return {
-      list:""
-    }
+      list: "",
+      arr: [
+        {
+          id: 1,
+          urls: "https://pic.52112.com/180420/180420_32/J9xjxe1jIg_small.jpg",
+          desc: "风景",
+        },
+        {
+          id: 12,
+          urls: "https://pic2.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",
+          desc: "风景",
+        },
+        {
+          id: 123,
+          urls: "https://desk-fd.zol-img.com.cn/t_s960x600c5/g5/M00/02/04/ChMkJ1bKyEyIMaKUAAhskHwWGqUAALIAAM2KsIACGyo249.jpg",
+          desc: "风景",
+        },
+      ],
+      ruleForm: {
+        name: "",
+        region: "",
+        date1: "",
+        date2: "",
+        delivery: false,
+        type: [],
+        resource: "",
+        desc: "",
+      },
+      rules: {
+        name: [
+          { required: true, message: "请输入活动名称1", trigger: "blur" },
+          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
+        ],
+        region: [
+          { required: true, message: "请选择活动区域", trigger: "change" },
+        ],
+        date1: [
+          {
+            type: "date",
+            required: true,
+            message: "请选择日期",
+            trigger: "change",
+          },
+        ],
+        date2: [
+          {
+            type: "date",
+            required: true,
+            message: "请选择时间",
+            trigger: "change",
+          },
+        ],
+        type: [
+          {
+            type: "array",
+            required: true,
+            message: "请至少选择一个活动性质",
+            trigger: "change",
+          },
+        ],
+        resource: [
+          { required: true, message: "请选择活动资源", trigger: "change" },
+        ],
+        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }],
+      },
+    };
   },
   created() {
-    console.log(this.$route, "我的");
-    axios
-      .get("http://localhost:1234/test")
-      .then((res) => {
-        this.list = res.data;
-        console.log(data, "成功");
-      })
-      .catch((err) => {
-        console.log(err, "失败");
+    // 1.修改组件样式
+    // 2.倒三角形
+    console.log(this.arr[0], "1");
+    // console.log(JSON.stringify(this.arr[0]), "2");
+    // let obj = "{'id':1,'names':'你好'}"
+    // axios
+    //   .get("http://localhost:1234/test")
+    //   .then((res) => {
+    //     this.list = res.data;
+    //     console.log(data, "成功");
+    //   })
+    //   .catch((err) => {
+    //     console.log(err, "失败");
+    //   });
+    // this.init();
+  },
+  methods: {
+    init() {
+      axios
+        .get("http://shop-api.edu.koobietech.com/front/home/books")
+        .then((res) => {
+          console.log(res, "res");
+        })
+        .catch((err) => {
+          console.log(err, "err");
+        });
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          alert("submit!");
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
       });
+    },
+    resetForm(formName) {
+      this.$refs[formName].resetFields();
+    },
   },
 };
 </script>
 
-<style></style>
+<style scoped>
+/* 
+  深度穿透
+  v-deep
+  ::v-deep
+*/
+.el-carousel__item h3 {
+  color: #475669;
+  font-size: 14px;
+  opacity: 0.75;
+  line-height: 150px;
+  margin: 0;
+}
+
+.el-carousel__item:nth-child(2n) {
+  background-color: #99a9bf;
+}
+
+.el-carousel__item:nth-child(2n + 1) {
+  background-color: #d3dce6;
+}
+</style>