常见功能实现

1、支付成功之后的话，我们后台的话有一个邮箱，会发一份指定的邮件到他客户的邮箱

前后端分离实现发送邮件

<template>
  <div class="con">
    <div>发送邮件</div>
    <input
      type="email"
      name=""
      id=""
      placeholder="接受邮件"
      v-model="receiver"
      style="margin: 20px 0"
    />
    <br />
    <!-- 利用正则校验邮箱格式 -->
    <button @click="testReg">确认发送</button>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      receiver: "",//收件人邮箱
    };
  },
  methods: {
    //将收件人的邮箱发送到后端
    send() {
      console.log("确认发送");
      this.axios
        .get("http://127.0.0.1:8000/sendemail/test/", {
          params: { receiver: this.receiver },
        })
        .then(() => {
          console.log("成功");
        })
        .catch((error) => {
          console.log(error);
        });
    },
    testReg() {
      const reg = new RegExp(
        "^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\\.[a-zA-Z0-9_-]+)+$"
      );
      console.log(reg);
      if (reg.test(this.receiver)) {
        this.send(); //对接后端的函数
        alert("发送成功");
      } else {
        alert("邮箱格式不正确");
      }
    },
  },
};
</script>
<style scoped>
.con {
  width: 200px;
  height: 200px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: flex;
  flex-direction: column;
}
</style>

1、主题颜色切换

// 1.新建文件夹 
 mobileTheme.scss:root {    
// 主题色   
 --mobile-theme-color: #1E87F0； 
// 主题背景色   
 --mobile-theme-background-color: $F4F5FA；}
// 2.在index.scss中引入@import './mobileTheme.scss' 
// 3.在mian.js中引入全局公共样式
import "./assets/styles/index.scss" 
// 4.拿到后端返回来的数据
const setMobileThemeData=(themeData)=> {    
    doucument.documentElement.style.setProperty("--mobile-theme-color"，themeData.colour) 
//colour是后端返回来   
 // 主题背景色    
doucument.documentElement.style.setProperty("--mobile-theme-background-color"，themeData.cardIconColorOne)}
// 5.在css中哪里需要用样式就直接使用
.mobile-box {    
background: var(--mobile-theme-color);
}