订单

src/api/path.js

@@ -60,6 +60,10 @@ const AJAXPATH = {
   'chapterList':{
     'path':'/master/chapter'
   },
+  //查找用户  
+  'getUser':{
+    'path':'/master/user/'
+  },
 }
 
 export default AJAXPATH

src/components/upload-video-fast.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="avatar-uploader">
+     
+    <a-spin :spinning="loading"  >
+      <a-upload
+      name="file"
+      :data="upData"
+      list-type="picture-card"
+      :show-upload-list="false"
+      action="https://upload-z1.qiniup.com"
+      :before-upload="beforeAvatarUpload"
+      @change="imgSuccess"
+    >
+      <video v-if="props.imgUrl" :src="props.imgUrl" alt="avatar" ></video>
+      <div v-else>
+        <div class="ant-upload-text">{{ title }}</div>
+      </div>
+    </a-upload>
+     </a-spin>
+
+  </div>
+</template>
+
+<script setup>
+import { getQiniuToken } from "@/api";
+import moment from "moment";
+import { ref, watch, computed, nextTick } from "vue";
+import { message } from "ant-design-vue";
+const props = defineProps({
+  imgUrl: {
+    default: "",
+  },
+  path: {
+    default: "cms/photo",
+  },
+  title: {
+    default: "点击上传",
+  },
+  accept: {
+    default: "",
+  },
+  height: {
+    default: "118px",
+  },
+  width: {
+    default: "118px",
+  },
+});
+
+const emit = defineEmits(["imgSuccess"]);
+const upData = ref({
+  // uploadToken 七牛
+  key: "",
+  token: "",
+});
+const fname = ref(`${moment().format("YYYYMMDD")}`);
+const img = ref("");
+const loading = ref(false);
+const qiniuData = ref([]);
+const created = async () => {
+  uploadToken();
+};
+// 获取七牛token
+const uploadToken = async () => {
+  console.log("获取七牛token");
+  const { code, data, msg } = await getQiniuToken();
+  if (code === 0) {
+    upData.value.token = data.data;
+    qiniuData.value = data;
+  } else {
+    message.error(msg);
+  }
+};
+const imgSuccess = async (res, file) => {
+  // 检查图片是否违规
+  // const data = await photo.check(`https://s1.361cv.com/${res.key}`)
+  // if (data.status === 0 && data.errMsg) {
+  //   this.uploadError(data.errMsg)
+  //   return
+  // }
+  setTimeout(() => {
+    img.value = `${qiniuData.value.endpoint}${upData.value.key}?imageslim`;
+
+    emit("imgSuccess", img.value, file);
+    console.log(img.value, qiniuData.value, "imgUrl");
+    loading.value=false
+  }, 1500);
+};
+const beforeAvatarUpload = async (file) => {
+  console.log(file, "file");
+  await uploadToken();
+  const isLt2M = file.size / 1024 / 1024 <= 1000;
+  if (!isLt2M) {
+    message.error("上传视频大小不能超过 1000MB!");
+    return false;
+  }
+  loading.value=true
+  let mimeType = file.name.split(".").pop();
+  upData.value.key = `${qiniuData.value.prefix}img/${getToday()}.${mimeType}`;
+  return isLt2M;
+};
+// 获取文件路径
+const getToday = () => {
+  let today = new Date();
+  let date1 = moment(today).format("YYYYMMDD");
+  let date2 = Date.now();
+  // 获取6位随机数
+  let code = "";
+  while (code[0] == "0" || code == "") {
+    for (let i = 0; i < 1; i++) {
+      let random = parseInt(Math.random() * 1000000);
+      code = code + random;
+    }
+  }
+  return `${date1}/${date2 + code}`;
+};
+const uploadError = (errMsg) => {
+  // this.uploadToken()
+  message.error(errMsg || "上传失败，请重新尝试~");
+};
+</script>
+
+<style lang="scss">
+.avatar-uploader {
+  width: 118px;
+  height: 118px;
+}
+
+.avatar-uploader .el-upload {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  cursor: pointer;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+
+.avatar-uploader {
+  line-height: 0;
+}
+
+.avatar-uploader .el-upload:hover {
+  border-color: #409eff;
+}
+
+.avatar-uploader-icon {
+  font-size: 28px;
+  color: #8c939d;
+  width: 85px;
+  height: 85px;
+  line-height: 85px;
+  text-align: center;
+  border: 1px dotted #dcdfe6;
+}
+
+.avatar {
+  width: 85px;
+  height: 85px;
+  display: block;
+}
+
+.diaLogImg {
+  width: 100%;
+  height: 100%;
+  background-color: #f5f6f7;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  .add {
+    width: 28px;
+    height: 28px;
+    margin: 5px;
+    font-size: 18px;
+    background-color: #3490ff;
+    border-radius: 100%;
+    text-align: center;
+    line-height: 28px;
+    color: #fff;
+  }
+
+  .title {
+    font-size: 12px;
+    font-weight: 400;
+    color: #666;
+    line-height: 17px;
+  }
+
+  .mini-title {
+    font-size: 10px;
+    font-weight: 400;
+    color: #999;
+    line-height: 16px;
+  }
+}
+
+.ant-upload-text {
+  margin-top: 20px;
+}
+</style>

src/views/curriculum/order.vue

@@ -6,6 +6,18 @@
         <!-- 页面搜索 -->
         <div>
           <a-form :model="searchData" layout="inline" >
+            <div class="search_nav">
+              <a-form-item label="课程名">
+                <a-input v-model="searchData.title"></a-input>
+              </a-form-item>
+              <a-form-item label="用户名">
+                <a-input v-model="searchData.uname"></a-input>
+              </a-form-item>
+              <a-form-item>
+                <a-button type="primary" @click="search">搜索</a-button>
+                <a-button @click="reset">清空</a-button>
+              </a-form-item>
+            </div>
             <a-form-item>
               <a-button type="primary" @click="add">开通课程</a-button>
             </a-form-item>
@@ -54,29 +66,33 @@
         <!-- 新增--编辑弹窗 -->
         <a-modal   v-model:visible="addPop" :title="addData.id ? '编辑订单' :'新增订单'" @ok="submit" okText="确定" cancelText="取消"  >
           <a-form :model="addData"  :labelCol="{ style: 'width:120px' }"  ref="formRef" :rules="rules">
-            <a-form-item label="订单名称" name="name">
+            <a-form-item label="手机号" name="phoneNumber">
             <!-- 订单名称 -->
-              <a-input class="tasktype"  placeholder="请输入名称" v-model:value="addData.name"></a-input>
+              <a-input class="tasktype"  placeholder="请输入手机号" v-model:value="addData.phoneNumber" @pressEnter="searchUser">
+                <template #addonAfter >
+                  <a-tooltip title="search">
+                    <a-button type="text" size="small" @click="searchUser">
+                      {{ '搜索' }}
+                    </a-button>
+                  </a-tooltip>
+                </template>
+              </a-input>
+            </a-form-item>
+            <a-form-item label="用户姓名">
+              <a-input class="tasktype" disabled placeholder="请输入手机号查找用户"  v-model:value="addData.userName"/>
+            </a-form-item>
+            <a-form-item label="课程" name="curr">
+              <a-select
+                v-model:value="addData.cid"
+                :options="currOptions"
+              ></a-select>
+            </a-form-item>
+            <a-form-item label="渠道" name="source">
+              <a-select
+                v-model:value="addData.channel"
+                :options="sourceOptions"
+              ></a-select>
             </a-form-item>
-            <!-- <a-form-item label="链接地址" name="href"> -->
-            <!-- 门店地址 -->
-              <!-- <a-input class="tasktype" placeholder="请输入链接地址" v-model:value="addData.href"></a-input>
-            </a-form-item> -->
-            <!-- <a-form-item label="上传图片" name="img">
-              <ul class="upImg">
-                    
-                    <li class="img_icon" v-if="addData.coverimg">
-                      <CloseCircleTwoTone class="icon_del"  @click="delAdCover()"/>
-                      <img :src="addData.coverimg" >
-                    </li>
-                      <li class="upload" v-else >
-                        <uploadImg path="cms/admin/img"
-                          class="upload-img"
-                          @imgSuccess="(url) => adCoverSuccess(url)" :imgUrl="addData.img" />
-                      </li>
-                    <li class="warn">*请上传尺寸1440px*520px,png或jpeg格式的图片</li>
-                </ul>
-            </a-form-item> -->
           </a-form>
         </a-modal>
       </div>
@@ -93,13 +109,13 @@ import { curriculAJAXREQUEST } from "@/api";
 import AJAXPATH from "@/api/path";
 
 import { message } from 'ant-design-vue'
-import { CloseCircleTwoTone,CloseCircleOutlined } from '@ant-design/icons-vue';
-
+import { CloseCircleTwoTone,SearchOutlined,CloseCircleOutlined } from '@ant-design/icons-vue';
 
 export default defineComponent({
   components: {
     uploadImg,
-    CloseCircleTwoTone
+    CloseCircleTwoTone,
+    SearchOutlined
   },
   setup() {
     // 路由
@@ -144,7 +160,60 @@ export default defineComponent({
         mokeDataList.value =  JSON.parse(JSON.stringify(dataList.value))
       }
     }
-   //新增数据
+   
+    const searchUser = async()=>{
+        const { code, data} = await curriculAJAXREQUEST({
+          path: AJAXPATH.getUser.path,
+          method: 'get',
+          data:{
+            phoneNumber: addData.value.phoneNumber
+          }
+        });
+        if(code == 0&&data.length==1){
+          console.log(data)
+          addData.value.uid = data[0].id
+          addData.value.userName = data[0].nickName
+        }else{
+           message.error('没有搜索到此用户！');
+        }
+    }
+    const currOptions = ref({})
+    const getCurrOptions = async() =>{ 
+      const { code, data } = await curriculAJAXREQUEST({
+        path: AJAXPATH.courseList.path,
+        method: "get",
+        data: {},
+      });
+      if(code == 0){
+        console.log(data)
+        let op = []
+        data.map(item=>{
+          op.push({value:item.id,label:item.title})
+        })
+        currOptions.value = op
+      }else{
+        message.error('获取课程列表失败，请刷新页面！');
+      }
+    }
+    const sourceOptions = ref({})
+    const getSourceOptions = async() =>{ 
+      const { code, data } = await curriculAJAXREQUEST({
+        path: AJAXPATH.channelList.path,
+        method: "get",
+        data: {},
+      });
+      if(code == 0){
+        console.log(data)
+        let op = []
+        data.map(item=>{
+          op.push({value:item.id,label:item.name})
+        })
+        sourceOptions.value = op
+      } else {
+        message.error('获取渠道列表失败，请刷新页面！');
+      }
+    }
+    //新增数据
     const add = () =>{
       // 将addData置空
       addData.value = {}
@@ -189,7 +258,7 @@ export default defineComponent({
       getData()
     }
        // 上传图片
-    const addimg = ref({})
+    // const addimg = ref({})
     // const imgData = ref()
   
     const adCoverSuccess = (imgUrl)=>{
@@ -229,7 +298,7 @@ export default defineComponent({
         const { code} = await curriculAJAXREQUEST({
           path: AJAXPATH.orderList.path,
           method: 'POST',
-          data: addData.value,
+          data: {...addData.value,price:'0',payAt:"0"},
         });
         if(code == 0){
         //  if(!status){
@@ -276,6 +345,8 @@ export default defineComponent({
     //页面加载
     onMounted(() =>{
       getData()
+      getCurrOptions()
+      getSourceOptions()
     })
 
     return{
@@ -315,6 +386,8 @@ export default defineComponent({
           },
         ],
       searchData,
+      currOptions,
+      sourceOptions,
       addData,
       addPop,
       dataList,
@@ -329,6 +402,9 @@ export default defineComponent({
       delSubmit,
       adCoverSuccess,
       delAdCover,
+      searchUser,
+      getCurrOptions,
+      getSourceOptions,
     }
   },
 

src/views/curriculum/video.vue

@@ -77,7 +77,6 @@
               </a-form-item>
               <a-form-item label="上传图片" name="img">
                 <ul class="upImg">
-                      
                       <li class="img_icon" v-if="addData.coverimg">
                         <CloseCircleTwoTone class="icon_del"  @click="delAdCover()"/>
                         <img :src="addData.coverimg" >
@@ -90,6 +89,15 @@
                       <li class="warn">*请上传尺寸295px*170px,png格式的图片</li>
                   </ul>
               </a-form-item>
+                <a-form-item>
+                    <uploadVideo
+                    class="diaLogVideo"
+                    :imgUrl="`${addData.file ? `${addData.file}` : ''}`"
+                    @handleAvatarSuccess="uploadVideoSuccess"
+                    @uploading="uploading"
+                    ref="uploadVideo"
+                    ></uploadVideo>
+                </a-form-item>
             </a-form>
           </a-modal>
         </div>
@@ -101,6 +109,7 @@
   import { defineComponent,onMounted,ref } from 'vue'
   
   import uploadImg from "../../components/upload-img.vue";
+  import uploadVideo from "../../components/upload-video-fast.vue";
   // import {getempower,updateempower,addempower,delempower, shop_train} from '@/api'
   import { curriculAJAXREQUEST } from "@/api";
   import AJAXPATH from "@/api/path";
@@ -112,7 +121,8 @@
   export default defineComponent({
     components: {
       uploadImg,
-      CloseCircleTwoTone
+      CloseCircleTwoTone,
+      uploadVideo
     },
     setup() {
         const router = useRouter()
@@ -325,6 +335,22 @@
             console.log( "排序");
           }
       };
+      // 视频上传中
+    const uploading = (percent, file) => {
+      this.videoUpLoading = true;
+      this.videoUploadPercent = percent;
+      if (!this.uploadFile) {
+        this.uploadFile = file;
+      }
+    };
+    // 视频上传成功
+    const uploadVideoSuccess = (url) => {
+      this.$set(this.addData, "file", url);
+      // console.log(this.addData);
+      // // 删除进度条提示
+      // this.videoUpLoading = false
+      // this.videoUploadPercent = 0
+    };
       //页面加载
       const projectId = ref(null);
       onMounted(() =>{
@@ -396,7 +422,9 @@
         switchChange,
         adCoverSuccess,
         delAdCover,
-        rowDrop
+        rowDrop,
+        uploadVideoSuccess,
+        uploading
   
       }
     },