修改广告列表逻辑

src/views/advertise/advertiseList.vue

@@ -105,37 +105,30 @@
                         </div>
                     </el-form-item>
                     <el-form-item label="持续时间:" prop="">
-                        <el-col :span="11">
-                            <!-- <el-date-picker v-model="ruleForm.startTime" type="datetime" placeholder="选择日期时间">
-                            </el-date-picker> -->
-                            <el-date-picker 
-                                v-model="ruleForm.startTime" 
-                                type="datetime" 
-                                placeholder="选择日期时间"
-                                format="yyyy-MM-dd HH:00:00"
-                                value-format="yyyy-MM-dd HH:00:00"
-                                :picker-options="startTimeOptions">
+                        <el-date-picker v-model="ruleForm.time" type="datetimerange" range-separator="至"
+                            start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd HH:00:00"
+                            value-format="yyyy-MM-dd HH:00:00" :picker-options="startTimeOptions"
+                            @change="changeStartTime">
+                        </el-date-picker>
+                        <!-- <el-col :span="11">
+                            <el-date-picker v-model="ruleForm.startTime" type="datetime" placeholder="选择日期时间"
+                                format="yyyy-MM-dd HH:00:00" value-format="yyyy-MM-dd HH:00:00"
+                                :picker-options="startTimeOptions" @change="changeStartTime">
                             </el-date-picker>
                         </el-col>
                         <el-col :span="2" class="zhi">
                             至
                         </el-col>
                         <el-col :span="11">
-                            <!-- <el-date-picker v-model="ruleForm.endTime" type="datetime" placeholder="选择日期时间">
-                            </el-date-picker> -->
-                            <el-date-picker 
-                                v-model="ruleForm.endTime" 
-                                type="datetime" 
-                                placeholder="选择日期时间"
-                                format="yyyy-MM-dd HH:00:00"
-                                value-format="yyyy-MM-dd HH:00:00"
+                            <el-date-picker v-model="ruleForm.endTime" type="datetime" placeholder="选择日期时间"
+                                format="yyyy-MM-dd HH:00:00" value-format="yyyy-MM-dd HH:00:00"
                                 :picker-options="endTimeOptions">
                             </el-date-picker>
-                        </el-col>
+                        </el-col> -->
                     </el-form-item>
                     <el-form-item label="广告尺寸:" prop="">
-                        <el-radio v-model="ruleForm.radio" label="1">1200x90px</el-radio>
-                        <el-radio v-model="ruleForm.radio" label="2">420x560px</el-radio>
+                        <el-radio v-model="ruleForm.radio" disabled label="1">1200x90px</el-radio>
+                        <el-radio v-model="ruleForm.radio" disabled label="2">420x560px</el-radio>
                     </el-form-item>
 
                     <el-form-item label="价格:" prop="price">
@@ -164,7 +157,7 @@
                         <span class="example" @click="goGraph">查看示例图</span>
                         <div>
                             <el-button disabled v-for="item in ruleForm.adPlace" class="el_btnList">{{ item
-                                }}</el-button>
+                            }}</el-button>
                         </div>
                     </el-form-item>
                 </div>
@@ -177,7 +170,7 @@
         <!-- 弹出框 编辑 end----------------------------------------------------------->
 
         <!-- 弹出框 广告位示例图 start----------------------------------------------------------->
-        <el-dialog title="审核状态" :visible.sync="dialogVisible" width="50%" top="25vh">
+        <el-dialog title="广告位示例图" :visible.sync="dialogVisible" width="50%" top="25vh">
             <ul class="graph">
                 <li>
                     <h3>首页:</h3>
@@ -292,6 +285,7 @@ export default {
                 ad_url: '', //广告网址
                 adImg: '', //广告图
                 radio: '',//广告尺寸
+                time: [], //持续时间
                 startTime: '', //开始时间
                 endTime: '',   //结束时间
                 price: '',  //价格
@@ -585,7 +579,8 @@ export default {
             let data = new FormData()
             data.append('id', this.activeid)
             data.append('price', total.toFixed(2))
-
+            data.append('sttime', this.ruleForm.startTime)
+            data.append('edtime', this.ruleForm.endTime)
             editOrderAdmin(data).then(data => {
                 console.log(data);
                 if (data.code == 200) {
@@ -598,16 +593,147 @@ export default {
                 }
                 if (data.code == 0) {
                     this.$message({
-                        message: data.message + ',需要保留两位小数',
+                        message: data.message,// + ',需要保留两位小数',
                         type: 'error'
                     })
                 }
             })
         },
+        //获取天数
+        getDays() {
+            let total = this.ruleForm.price * this.ruleForm.days * this.ruleForm.num
+            let data = new FormData()
+            data.append('id', this.activeid)
+            data.append('price', total.toFixed(2))
+            data.append('sttime', this.ruleForm.startTime)
+            data.append('edtime', this.ruleForm.endTime)
+            editOrderAdmin(data).then(data => {
+                console.log(data);
+                // if (data.code == 200) {
+                //     // this.dialogTableVisible = false
+                //     this.$message({
+                //         message: '修改成功',
+                //         type: 'success'
+                //     })
+                //     this.getData()
+                // }
+                // if (data.code == 0) {
+                //     this.$message({
+                //         message: data.message,// + ',需要保留两位小数',
+                //         type: 'error'
+                //     })
+                // }
+            })
+        },
         //取消添加或编辑
         cancelForm() {
             this.dialogTableVisible = false
         },
+        // 时间选择器相关方法
+        changeStartTime(val) {
+            console.log('1111111111111111111', val);
+
+            // 先格式化传入的时间，选择的时间为下一个整数小时 0 分 0 秒
+            let time1 = new Date(new Date(val[0]).setMinutes(0, 0, 0) + 60 * 60 * 1000).getTime();
+            let time2 = new Date(new Date(val[1]).setMinutes(0, 0, 0) + 60 * 60 * 1000).getTime();
+            // 同样的道理，获取当前时间的下一个整数小时 0 分 0 秒
+            let currentTimestamp = new Date(new Date().setMinutes(0, 0, 0) + 60 * 60 * 1000).getTime();
+
+            if (time1 < currentTimestamp) {
+                this.$message.error('时间选择错误，已为您自动重设！');
+                // 第一步，将时间戳转换为本地时间
+                let localTime = new Date(currentTimestamp).toLocaleString('zh-CN', {
+                    year: 'numeric',
+                    month: '2-digit',
+                    day: '2-digit',
+                    hour: '2-digit',
+                    minute: '2-digit',
+                    second: '2-digit'
+                }).replace(/\//g, '-');
+                // 第二步，将当前时间加 24 小时
+                let twoHoursLocalTime = new Date(currentTimestamp + 24 * 60 * 60 * 1000).toLocaleString('zh-CN', {
+                    year: 'numeric',
+                    month: '2-digit',
+                    day: '2-digit',
+                    hour: '2-digit',
+                    minute: '2-digit',
+                    second: '2-digit'
+                }).replace(/\//g, '-');
+
+                // 第三步，将当前时间赋值给 ruleForm.time[0]
+
+                this.ruleForm.time[0] = localTime;
+                this.ruleForm.time[1] = twoHoursLocalTime;
+                this.ruleForm.startTime = localTime;
+                this.ruleForm.endTime = twoHoursLocalTime;
+
+                const time1 = new Date(this.ruleForm.endTime);
+                const time2 = new Date(this.ruleForm.startTime);
+                const diff = time1.getTime() - time2.getTime();
+                this.ruleForm.days = diff / (1000 * 60 * 60 * 24);
+
+
+            } else {
+                // 第二种情况，传入的时间戳大于当前时间
+                // 但是时间间隔小于 24 小时
+                if (time2 - time1 < 24 * 60 * 60 * 1000) {
+                    this.$message.error('广告持续时间不得低于 24 小时，已为您自动重设！');
+                    // 第一步，将时间戳转换为本地时间
+                    let localTime = new Date(currentTimestamp).toLocaleString('zh-CN', {
+                        year: 'numeric',
+                        month: '2-digit',
+                        day: '2-digit',
+                        hour: '2-digit',
+                        minute: '2-digit',
+                        second: '2-digit'
+                    }).replace(/\//g, '-');
+                    // 第二步，将当前时间加 24 小时
+                    let twoHoursLocalTime = new Date(currentTimestamp + 24 * 60 * 60 * 1000).toLocaleString('zh-CN', {
+                        year: 'numeric',
+                        month: '2-digit',
+                        day: '2-digit',
+                        hour: '2-digit',
+                        minute: '2-digit',
+                        second: '2-digit'
+                    }).replace(/\//g, '-');
+
+
+                    // 第三步，将当前时间赋值给 ruleForm.time[0]
+                    this.ruleForm.time[0] = localTime;
+                    this.ruleForm.time[1] = twoHoursLocalTime;
+                    this.ruleForm.startTime = localTime;
+                    this.ruleForm.endTime = twoHoursLocalTime;
+
+                    const time1 = new Date(this.ruleForm.endTime);
+                    const time2 = new Date(this.ruleForm.startTime);
+                    const diff = time1.getTime() - time2.getTime();
+                    this.ruleForm.days = diff / (1000 * 60 * 60 * 24);
+
+                } else {
+                    // 第三种情况，用户时间选择正确，无需操作
+                    this.ruleForm.startTime = val[0];
+                    this.ruleForm.endTime = val[1];
+
+                    const time1 = new Date(this.ruleForm.endTime);
+                    const time2 = new Date(this.ruleForm.startTime);
+                    const diff = time1.getTime() - time2.getTime();
+                    this.ruleForm.days = diff / (1000 * 60 * 60 * 24);
+
+                }
+            }
+
+            // 第四种情况，使广告立即生效，请注释上面的 if 直接使用下面这一段
+            // this.ruleForm.startTime = val[0];
+            // this.ruleForm.endTime = val[1];
+            // // 获取广告尺寸
+            // this.getAdSize();
+            // // 创建购物车
+            // axios.post("/order/addShoppingCart").then(response => {
+            //   // console.log("创建购物车", response.data);
+            //   this.shopCode = response.data;
+            //   console.log('shopCode', this.shopCode);
+            // });
+        },
     },
     mounted() {
         this.getData()
@@ -828,6 +954,10 @@ export default {
     ::v-deep .el-button+.el-button {
         margin-left: 0px;
     }
+
+    ::v-deep .el-range-editor.el-input__inner {
+        width: 100%;
+    }
 }
 
 // 弹出层按钮