update upload

frontend/src/api.ts

@@ -81,8 +81,9 @@ export const api = {
   async uploadPlot(token: string, video_data: VideoCreate, file: File) {
     const formData = new FormData();
     formData.append("title", video_data.title)
-    formData.append("anchor_id", video_data.anchor_id.toString())
-    formData.append("lang_id", video_data.lang_id.toString())
+    formData.append("anchor_id", video_data.anchor_id)
+    formData.append("style", video_data.style)
+    formData.append("lang", video_data.lang)
     formData.append("upload_file", file)
     return axios.post<VideoUploaded>(`${apiUrl}/api/v1/videos/`, formData, authHeaders(token));
   },
@@ -146,4 +147,7 @@ export const api = {
   async YTViewsTestPayment(user_data: YTViewsUserData) {
     return axios.post<string>(`${apiUrl}/api/v1/payment/ytviews-ecpay-test-payment`, user_data);
   },
+  async getYTViewsList() {
+    return axios.get(`${apiUrl}/api/v1/payment/ytviews-list-all`);
+  },
 };

frontend/src/interfaces/index.ts

@@ -51,8 +51,9 @@ export interface Video {
 
 export interface VideoCreate {
   title: string;
-  anchor_id: number;
-  lang_id: number;
+  anchor_id: string;
+  style: string;
+  lang: string;
 }
 
 export interface VideoUploaded {

frontend/src/language/en.json

@@ -65,5 +65,6 @@
     "passwordMailSent": "Password recovery email sent",
     "acceptZipMessage": "Video processing takes about 5-10 minutes, please be patient",
     "ytViews": "YouTube Views",
-    "contactUs": "Contact Us"
+    "contactUs": "Contact Us",
+    "orderDetails": "Order Details"
 }

frontend/src/language/zh.json

@@ -65,5 +65,6 @@
     "passwordMailSent": "重置密碼電子郵件已傳送",
     "acceptZipMessage": "影片處理需要約 5-10 分鐘，敬請耐心等候",
     "ytViews": "網紅加速器",
-    "contactUs": "聯絡我們"
+    "contactUs": "聯絡我們",
+    "orderDetails": "訂單明細"
 }

frontend/src/views/main/Upload.vue

@@ -18,6 +18,8 @@ const zipFiles = ref();
 const Form = ref();
 let anchor = ref(0);
 let templateId = ref(0);
+let selectAnchor = ref("angela");
+let selectTemplate = ref("");
 
 // props
 let dialog = reactive({
@@ -28,132 +30,40 @@ let dialog = reactive({
 
 const anchorList = reactive([
   {
-    anchor_id: 0,
-    language_id: 1,
+    anchor_id: "angela",
     name: "Angela",
   },
   {
-    anchor_id: 1,
-    language_id: 1,
-    name: "半身主播-1",
-  },
-  {
-    anchor_id: 2,
-    language_id: 1,
-    name: "半身主播-2",
-  },
-  {
-    anchor_id: 3,
-    language_id: 1,
-    name: "半身主播-3",
-  },
-  {
-    anchor_id: 4,
-    language_id: 1,
-    name: "半身主播-4",
-  },
-  {
-    anchor_id: 5,
-    language_id: 1,
-    name: "半身主播-5",
-  },
-  {
-    anchor_id: 6,
-    language_id: 1,
-    name: "半身主播-6",
-  },
-  {
-    anchor_id: 7,
-    language_id: 1,
-    name: "半身主播-7",
-  },
-  {
-    anchor_id: 8,
-    language_id: 1,
-    name: "半身主播-8",
-  },
-  {
-    anchor_id: 9,
-    language_id: 1,
-    name: "半身主播-9",
-  },
-  {
-    anchor_id: 10,
-    language_id: 1,
-    name: "半身主播-10",
-  },
-  {
-    anchor_id: 11,
-    language_id: 1,
-    name: "半身主播-11",
-  },
-  {
-    anchor_id: 12,
-    language_id: 1,
-    name: "半身主播-12",
-  },
-  {
-    anchor_id: 13,
-    language_id: 1,
-    name: "半身主播-13",
-  },
-  {
-    anchor_id: 14,
-    language_id: 1,
-    name: "半身主播-14",
-  },
-  {
-    anchor_id: 15,
-    language_id: 1,
-    name: "半身主播-15",
-  },
-  {
-    anchor_id: 16,
-    language_id: 1,
-    name: "半身主播-16",
-  },
-  {
-    anchor_id: 17,
-    language_id: 1,
+    anchor_id: "peggy",
     name: "Peggy",
   },
   {
-    anchor_id: 18,
-    language_id: 1,
+    anchor_id: "jocelyn",
     name: "Jocelyn",
   },
   {
-    anchor_id: 19,
-    language_id: 1,
+    anchor_id: "summer",
     name: "Summer",
   },
 ]);
 
 const templateList = reactive([
   {
-    template_id: 0,
+    template_id: "style1",
     img: "鏡面-01",
   },
   {
-    template_id: 1,
+    template_id: "style2",
     img: "鏡面-02",
   },
   {
-    template_id: 2,
+    template_id: "style3",
     img: "鏡面-03",
   },
   {
-    template_id: 3,
+    template_id: "style4",
     img: "鏡面-04",
   },
-  {
-    template_id: 4,
-    img: "鏡面-05",
-  },
-  {
-    template_id: 5,
-    img: "鏡面-06",
-  },
 ]);
 
 let anchorLang = ref("中文");
@@ -164,7 +74,7 @@ let items = reactive([
 
 // 取得圖片路徑
 const getImageUrl = (imgFolder: string, name: string) => {
-  return new URL(`../../assets/img/${imgFolder}/${name}.webp`, import.meta.url)
+  return new URL(`../../assets/img/${imgFolder}/${name}.png`, import.meta.url)
     .href;
 };
 
@@ -176,6 +86,14 @@ watch(dialog, (newVal, oldVal) => {
   }
 });
 
+watch(anchor, (newVal) => {
+  selectAnchor.value = anchorList[newVal].anchor_id;
+});
+
+watch(templateId, (newVal) => {
+  selectTemplate.value = templateList[newVal].template_id;
+});
+
 async function Submit() {
   WS.send("subscribe");
   await (Form as any).value.validate();
@@ -184,22 +102,28 @@ async function Submit() {
 
     const video_data: VideoCreate = {
       title: title.value,
-      anchor_id: anchor.value,
-      lang_id: 0,
+      anchor_id: selectAnchor.value,
+      style: selectTemplate.value,
+      lang: "zh",
     };
+    
+    const ret: VideoUploaded = await mainStore.uploadPlot(
+      video_data,
+      zipFiles.value[0]
+    );
 
-    const ret:VideoUploaded = await mainStore.uploadPlot(video_data, zipFiles.value[0]);
     if (ret.accepted) {
       dialog.msg = t("acceptZipMessage");
       dialog.state = "success";
       dialog.show = true;
-    }
-    else {
+    } else {
       dialog.msg = ret.error_message!;
       dialog.state = "error";
       dialog.show = true;
     }
+
     valid.value = true;
+
     // (Form as any).value.reset();
   }
 }
@@ -252,20 +176,17 @@ async function Submit() {
                           dark
                           @click="toggle"
                           :title="n.name"
-                          :disabled="n.anchor_id !== 0"
                         >
                           <v-scroll-y-transition>
-                            <div v-if="n.anchor_id !== 0" class="img-disabled">
+                            <!-- <div v-if="n.anchor_id !== 0" class="img-disabled">
                               <img
                                 :src="getImageUrl('anchor', n.name)"
                                 alt=""
                               />
                               <p>Coming Soon</p>
-                            </div>
-
+                            </div> -->
                             <img
-                              v-else
-                              :src="getImageUrl('anchor', n.name)"
+                              :src="getImageUrl('anchor', n.anchor_id)"
                               alt=""
                             />
                           </v-scroll-y-transition>
@@ -292,7 +213,6 @@ async function Submit() {
                     v-for="n in templateList"
                     :key="n.template_id"
                     v-slot="{ isSelected, toggle, selectedClass }"
-                    :disabled="n.template_id !== 0"
                   >
                     <v-card
                       color="grey-lighten-1"
@@ -305,11 +225,11 @@ async function Submit() {
                       >
                         <v-icon icon="done" color="white" />
                       </span>
-                      <div :class="{ 'img-disabled': n.template_id !== 0 }">
+                      <img :src="getImageUrl('template', n.img)" alt="" />
+                      <!-- <div :class="{ 'img-disabled': n.template_id !== 0 }">
                         <img :src="getImageUrl('template', n.img)" alt="" />
                         <p v-if="n.template_id !== 0">Coming Soon</p>
-                      </div>
-                      <!-- <img :src="getImageUrl('template', n.img)" alt="" /> -->
+                      </div> -->
                     </v-card>
                   </v-slide-group-item>
                 </v-slide-group>
@@ -550,4 +470,4 @@ async function Submit() {
 .v-card--disabled > :not(.v-card__loader) {
   opacity: 1 !important;
 }
-</style>
+</style>