页面修改

src/components/WebSet/WebSiteAbout.vue

+<style>
+  .WebSiteAbout .WebSiteTopdiv {
+    /* text-align: right; */
+    margin: 10px 0;
+    width: 1080px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+</style>
 <template>
-  <!--關於我們(关于我们)-->
+  <!--关于我们-->
   <div class="WebSiteAbout">
-    关于我们
+    <div class="WebSiteTopdiv">
+      关于我们版面設定
+      <el-button type="primary" size="small" @click="saveData()">保存</el-button>
+    </div>
+    <div>
+      <WebSiteEdit ref="WebSiteEdit" :templateData="postMsg.HomeDataList"
+        v-on:getNewTemplateData="getNewTemplateData">
+      </WebSiteEdit>
+    </div>
   </div>
 </template>
 <script>
+  import WebSiteEdit from "../WebSet/WebSiteEdit.vue"
   export default {
     data() {
       return {
-        obj: {}
+        postMsg: {
+          Id: 0,
+          AboutDataList: [],
+        }
       };
     },
     mounted() {
       this.getData();
     },
+    components: {
+      WebSiteEdit
+    },
     methods: {
       //获取配置
       getData() {
-
+        this.apipost(
+          "ws_get_GetHomeAboutTrip", {},
+          res => {
+            if (res.data.resultCode == 1) {
+              var tempData = res.data.data;
+              if (tempData) {
+                if (tempData.Id) {
+                  this.postMsg.Id = tempData.Id;
+                }
+                if (tempData.AboutDataList && tempData.AboutDataList.length > 0) {
+                  this.postMsg.AboutDataList = tempData.AboutDataList;
+                }
+              }
+              this.$refs.WebSiteEdit.initData(this.postMsg.AboutDataList);
+              console.log("this.postMsg", this.postMsg);
+            } else {
+              this.Error(res.data.message);
+            }
+          },
+          err => {}
+        );
+      },
+      //保存数据
+      saveData() {
+        this.apipost(
+          "ws_post_SetAboutData", this.postMsg,
+          res => {
+            if (res.data.resultCode == 1) {
+              this.getData();
+              this.Success(res.data.message);
+            } else {
+              this.Error(res.data.message);
+            }
+          },
+          err => {}
+        );
+      },
+      //获取模板数据
+      getNewTemplateData(templateDataList) {
+        this.postMsg.AboutDataList = templateDataList;
       }
     }
   }

src/components/WebSet/WebSiteIndex.vue

 <style>
-  .WebSiteTopdiv {
+  .WebSiteIndex .WebSiteTopdiv {
     /* text-align: right; */
     margin: 10px 0;
     width: 1080px;

src/components/WebSet/WebSiteTrip.vue

 <template>
   <!--行程內容頁(行程内容页)-->
   <div class="WebSiteTrip">
-    行程内容页
+    <table>
+      <tbody>
+        <tr>
+          <td>
+            行程內容頁 功能開關
+          </td>
+        </tr>
+      </tbody>
+      <tbody>
+        <tr>
+          <td>
+            行程頁背版
+            <el-radio v-model="postMsg.IsShowBgImg" :label="1">開啟</el-radio>
+            <el-radio v-model="postMsg.IsShowBgImg" :label="0">關閉</el-radio>
+          </td>
+        </tr>
+        <tr v-if="postMsg.IsShowBgImg==1">
+          <td>
+            <img :src="DefaultBgImg" style="width:100px;height:60px;" />
+          </td>
+        </tr>
+      </tbody>
+      <tbody>
+        <tr>
+          <td>
+            動態橫幅
+            <el-select v-model="postMsg.TripBottonStyle">
+              <el-option v-for="(item,index) in TripBottonStyleArray" :key="index" :label="item.Name" :value="item.Id">
+              </el-option>
+            </el-select>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <img v-if="getBottonStyleImg()" :src="getBottonStyleImg()" style="width:100px;height:60px;" />
+          </td>
+        </tr>
+      </tbody>
+
+      <tbody>
+        <tr>
+          <td>
+            行程內容頁 版面順序調整
+          </td>
+        </tr>
+      </tbody>
+      <tbody>
+        <tr>
+          <td>
+            標題
+            <img :src="DefaultTitleImg" style="width:100px;height:60px;" />
+          </td>
+        </tr>
+      </tbody>
+      <tbody>
+        <tr>
+          <td>
+            行程資訊(無設定團位時則不顯示)
+            <el-select v-model="postMsg.TripListStyle">
+              <el-option v-for="(item,index) in TripListStyleArray" :key="index" :label="item.Name" :value="item.Id">
+              </el-option>
+            </el-select>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <img v-if="getListStyleImg()" :src="getListStyleImg()" style="width:100px;height:60px;" />
+          </td>
+        </tr>
+      </tbody>
+      <tbody>
+        <tr>
+          <td>
+            每日行程(無設定團位時則不顯示)
+            <el-radio v-model="postMsg.TripDayIsOpen" :label="1">展開</el-radio>
+            <el-radio v-model="postMsg.TripDayIsOpen" :label="0">收合</el-radio>
+            <br />
+            <el-select v-model="postMsg.TripDayStyle">
+              <el-option v-for="(item,index) in TripDayStyleArray" :key="index" :label="item.Name" :value="item.Id">
+              </el-option>
+            </el-select>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <img v-if="getDayStyleImg()" :src="getDayStyleImg()" style="width:100px;height:60px;" />
+          </td>
+        </tr>
+      </tbody>
+
+      <tbody>
+        <tr>
+          <td>
+            行程特色
+            <el-radio v-model="postMsg.TripFeatureIsOpen" :label="1">展開</el-radio>
+            <el-radio v-model="postMsg.TripFeatureIsOpen" :label="0">收合</el-radio>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <img :src="DefaultFeatureImg" style="width:100px;height:60px;" />
+          </td>
+        </tr>
+      </tbody>
+
+       <tbody>
+        <tr>
+          <td>
+            注意事項
+            <el-radio v-model="postMsg.NoticeItemIsOpen" :label="1">展開</el-radio>
+            <el-radio v-model="postMsg.NoticeItemIsOpen" :label="0">收合</el-radio>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <img :src="DefaultNoticeImg" style="width:100px;height:60px;" />
+          </td>
+        </tr>
+      </tbody>
+
+       <tbody>
+        <tr>
+          <td>
+            立即預訂
+            <span class="tip">(有設定團位時則不顯示)</span>
+          </td>
+        </tr>
+        <tr>
+          <td>
+            <img :src="DefaultOrderImg" style="width:100px;height:60px;" />
+          </td>
+        </tr>
+      </tbody>
+    </table>
   </div>
 </template>
 <script>
   export default {
     data() {
       return {
-        obj: {}
+        DefaultBgImg: "http://imgfile.oytour.com/static/websiteimg/scene_cover.jpg", //默认背景图片
+        DefaultTitleImg: "http://imgfile.oytour.com/static/websiteimg/topic1.png", //默认行程标题图片
+        DefaultFeatureImg: "http://imgfile.oytour.com/static/websiteimg/feature1.png", //默认行程特色图片
+        DefaultNoticeImg: "http://imgfile.oytour.com/static/websiteimg/note1.png", //默认注意事项图片
+        DefaultOrderImg: "http://imgfile.oytour.com/static/websiteimg/order1.png", //默认订单图片
+        //颜色
+        TripBottonStyleArray: [{
+            Id: 1,
+            Name: "顏色：溫暖",
+            Img: "http://imgfile.oytour.com/static/websiteimg/anchor_orange.jpg"
+          },
+          {
+            Id: 2,
+            Name: "顏色：海洋",
+            Img: "http://imgfile.oytour.com/static/websiteimg/anchor_blue.jpg"
+          },
+          {
+            Id: 3,
+            Name: "顏色：自然",
+            Img: "http://imgfile.oytour.com/static/websiteimg/anchor_green.jpg"
+          },
+          {
+            Id: 4,
+            Name: "顏色：神秘",
+            Img: "http://imgfile.oytour.com/static/websiteimg/anchor_dark.jpg"
+          },
+          {
+            Id: 5,
+            Name: "顏色：青檸",
+            Img: "http://imgfile.oytour.com/static/websiteimg/anchor_yellow.jpg"
+          },
+        ],
+        //行程列表
+        TripListStyleArray: [{
+            Id: 1,
+            Name: "行程資訊：月曆",
+            Img: "http://imgfile.oytour.com/static/websiteimg/info1.png"
+          },
+          {
+            Id: 2,
+            Name: "行程資訊：列表",
+            Img: "http://imgfile.oytour.com/static/websiteimg/info2.png"
+          },
+        ],
+        //每日行程
+        TripDayStyleArray: [{
+            Id: 1,
+            Name: "每日行程：版本1",
+            Img: "http://imgfile.oytour.com/static/websiteimg/daily1.png"
+          },
+          {
+            Id: 2,
+            Name: "每日行程：版本2",
+            Img: "http://imgfile.oytour.com/static/websiteimg/daily2.png"
+          },
+        ],
+        postMsg: {
+          Id: 0,
+          IsShowBgImg: 1, //是否显示背景图【行程頁背版0-关闭，1-开启】
+          TripBottonStyle: 1, //动态样式【動態橫幅】【0-無，1-顏色：溫暖，2-顏色：海洋，3-顏色：自然，4-顏色：神秘，5-顏色：青檸】
+          TripListStyle: 1, //行程列表样式【0-行程資訊：月曆，1-行程資訊：列表】
+          TripDayIsOpen: 1, //每日行程【0-收起，1-展开】
+          TripDayStyle: 1, //每日行程样式【1-每日行程：版本1，2-每日行程：版本2】
+          TripFeatureIsOpen: 1, //行程特色【0-收起，1-展开】
+          NoticeItemIsOpen:1,//注意事项【0-收起，1-展开】
+          AboutDataList: [],
+        }
       };
     },
     mounted() {
       this.getData();
     },
     methods: {
+      //获取按钮样式图片
+      getBottonStyleImg() {
+        var str = "";
+        var bottomStyleItem = this.TripBottonStyleArray.find(member => {
+          return member.Id == this.postMsg.TripBottonStyle;
+        });
+        if (bottomStyleItem) {
+          str = bottomStyleItem.Img
+        }
+        return str;
+      },
+      //获取行程列表样式图片
+      getListStyleImg() {
+        var str = "";
+        var listStyleItem = this.TripListStyleArray.find(member => {
+          return member.Id == this.postMsg.TripListStyle;
+        });
+        if (listStyleItem) {
+          str = listStyleItem.Img
+        }
+        return str;
+      },
+      //每日行程图片
+      getDayStyleImg() {
+        var str = "";
+        var dayStyleItem = this.TripDayStyleArray.find(member => {
+          return member.Id == this.postMsg.TripDayStyle;
+        });
+        if (dayStyleItem) {
+          str = dayStyleItem.Img
+        }
+        return str;
+      },
       //获取配置
       getData() {
-
+        this.apipost(
+          "ws_get_GetHomeAboutTrip", {},
+          res => {
+            if (res.data.resultCode == 1) {
+              var tempData = res.data.data;
+              console.log("tempData", tempData);
+              if (tempData) {
+                if (tempData.Id) {
+                  this.postMsg.Id = tempData.Id;
+                }
+                if (tempData.AboutDataList && tempData.AboutDataList.length > 0) {
+                  this.postMsg.AboutDataList = tempData.AboutDataList;
+                }
               }
+            } else {
+              this.Error(res.data.message);
+            }
+          },
+          err => {}
+        );
+      },
+      //保存数据
+      saveData() {
+        this.apipost(
+          "ws_post_SetTripData", this.postMsg,
+          res => {
+            if (res.data.resultCode == 1) {
+              this.getData();
+              this.Success(res.data.message);
+            } else {
+              this.Error(res.data.message);
+            }
+          },
+          err => {}
+        );
+      },
     }
   }