style: 动态配置图片

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
+}

components/popup/index.js

@@ -0,0 +1,14 @@
+import { VantComponent } from "../vant-ui/common/component";
+
+VantComponent({
+  props: {
+    sceneId: String | Number,
+    cdn_url: String,
+    bdPath: String,
+    time: Number,
+    recordTime: Number,
+    isVideo: Boolean,
+  },
+  data: {},
+  methods: {},
+});

components/popup/index.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

components/popup/index.wxml

@@ -0,0 +1,10 @@
+<view class="c-popup" style="background-image: url({{cdn_url}}/scenes/{{sceneId}}.jpg);">
+  <image class="c-popup__border" src="{{cdn_url+bdPath}}" />
+
+  <view wx:if="{{!isVideo}}" class="c-popup-alert">
+    <image src="./images/{{time}}.png" />
+    <text>将于{{time}}秒后拍摄</text>
+  </view>
+
+  <image wx:else class="c-popup__recording" src="{{cdn_url}}/images/recording.png" mode="widthFix" />
+</view>

components/popup/index.wxss

@@ -0,0 +1,60 @@
+.c-popup {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: no-repeat center / cover;
+  background-color: white;
+  animation: fadeIn 0.2s;
+  z-index: 9999;
+}
+
+.c-popup__border {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.c-popup-alert {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 30vh;
+  left: 50%;
+  width: 263rpx;
+  height: 263rpx;
+  background: rgba(183, 138, 45, 0.3);
+  box-shadow: 0px 7rpx 7rpx 0px rgba(0, 0, 0, 0.3);
+  border-radius: 7rpx;
+  font-size: 28rpx;
+  font-weight: bold;
+  color: white;
+  transform: translateX(-50%);
+}
+
+.c-popup-alert image {
+  margin-bottom: 25rpx;
+  width: 80rpx;
+  height: 80rpx;
+}
+
+.c-popup__recording {
+  position: absolute;
+  top: 80rpx;
+  left: 80rpx;
+  width: 188rpx;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}

config/config.json

@@ -0,0 +1,56 @@
+{
+  "title": "婚庆文化沉浸体验展",
+  "banner": {
+    "margin": "11rpx",
+    "btmShadow": true,
+    "border": {
+      "width": "28rpx",
+      "tp-lf": "/images/bd-top.png",
+      "tp-rf": "/images/bd-top.png",
+      "bt-lf": "/images/bd-bt-lf.png",
+      "bt-rf": "/images/bd-bt-lf.png"
+    },
+    "list": ["/banner/1.jpg", "/banner/2.jpg"]
+  },
+  "sceneTitleImg": {
+    "width": "173rpx",
+    "path": "/images/xzcj.png"
+  },
+  "recordTitleImg": {
+    "width": "173rpx",
+    "path": "/images/psjl.png"
+  },
+  "scenes": [
+    {
+      "id": "1",
+      "title": "场景一"
+    },
+    {
+      "id": "2",
+      "title": "场景二"
+    }
+  ],
+  "activeSceneBdImg": {
+    "width": "229rpx",
+    "height": "310rpx",
+    "path": "/images/scene-bd.png"
+  },
+  "records": {
+    "cardImgPath": "/images/record-bg@2x.png"
+  },
+  "rescan": {
+    "height": "140rpx",
+    "bg": "/images/rescan-bg.jpg",
+    "btnImg": "/images/rescan@2x.png",
+    "btnWidth": "281rpx",
+    "borderColor": "#d9d9d9"
+  },
+  "filterPath": "/images/filter.png",
+  "resourceImg": {
+    "style": "padding: 32rpx;width:calc(100% - 30rpx);",
+    "imgStyle": "position:relative;top:-4rpx;",
+    "bg": "/images/img-bd.png"
+  },
+  "timerBdImgPath": "/images/timer-bd.png",
+  "globalVar": "--record-title-color:rgba(0,0,0,0.6);--record-inner-color:rgba(0,0,0,0.6);--primary-color:#b78a2d;--text-color:rgba(0, 0, 0, 0.6);--text-tips-color:#898989;"
+}

config/index.js

@@ -1,13 +1,14 @@
-export const API_BASE_URL = "ws://120.24.252.95:14000";
-// export const API_BASE_URL = "ws://192.168.20.18:14000";
-// ws://192.168.20.18:14000
+export const API_BASE_URL = "wss://sxb-socket.4dkankan.com";
+// export const API_BASE_URL = "ws://192.168.0.76:14000";
+// ws://120.24.252.95:14000
 // wss://sxb-socket.4dkankan.com
 // 88888888
 export const VIDEO_BASE_URL = "https://houseoss.4dkankan.com/";
-export const CDN_URL = "https://culture.4dage.com/air_show/resource";
+export const CDN_URL =
+  "https://4d-tjw.oss-cn-shenzhen.aliyuncs.com/project/4dage-sxb";
 
 export let app = {
-  id: "13750062488",
+  id: "",
   longtime: null,
   websocket: null,
   is_connect_ok: null,

config/space.json

@@ -1,20 +0,0 @@
-{
-  "title": "太空启幕",
-  "scenes": [
-    {
-      "id": "1"
-    },
-    {
-      "id": "2"
-    },
-    {
-      "id": "14"
-    },
-    {
-      "id": "15"
-    },
-    {
-      "id": "16"
-    }
-  ]
-}

pages/index/index.js

@@ -10,21 +10,25 @@ let socket_io = require("../../utils/socket.io-mp.js");
 
 let timer = null;
 
-var g_app = getApp();
+let projectid = null;
 
-let TYPESTR = {
-  0: "media",
-  1: "pic",
-};
+let isLoading = false;
 
 import Router from "../../utils/routes";
 
 VueLikePage([], {
   data: {
-    cdn_url: CDN_URL,
+    cdn_url: "",
     isIphoneX: false,
     canTap: true,
     rndWord: randomWord(false, 8),
+    info: {
+      banner: {},
+      sceneTitleImg: {},
+      recordTitleImg: {},
+      rescan: {},
+      activeSceneBdImg: {},
+    },
     scenes: [],
     records: [],
     autoplay: true,
@@ -35,6 +39,8 @@ VueLikePage([], {
     daojishi: 0,
     isShot: false,
     isRecord: false,
+    isVideo: false,
+    popupVisible: false,
     recordjishi: 10,
     type: "",
     authorCode: "",
@@ -84,6 +90,7 @@ VueLikePage([], {
       timer = null;
 
       let record = {
+        projectid,
         type: this.data.type,
         id: this.data.currentScene,
         rdw: encodeURIComponent(this.data.authorCode),
@@ -165,6 +172,11 @@ VueLikePage([], {
 
     onLoad: function (options) {
       console.log("options: ", options);
+
+      if (options.machineid) {
+        app.id = options.machineid;
+      }
+
       this.getData(options.projectid);
 
       // 1、获取二维码传参
@@ -198,18 +210,36 @@ VueLikePage([], {
       // })
     },
 
-    getData(scene = "space") {
+    getData(prjId = "ZHS2305758-1") {
+      wx.showLoading({
+        title: "资源加载中",
+      });
+
+      this.setData({
+        cdn_url: CDN_URL + "/" + prjId,
+      });
+
       wx.request({
-        url: `${VIDEO_BASE_URL}project/4dage-sxb/config/${scene}.json`,
-        success: ({ data }) => {
-          this.setData({
-            scenes: data.scenes,
-          });
+        url:
+          `${VIDEO_BASE_URL}project/4dage-sxb/${prjId}/config.json?t=` +
+          new Date().getTime(),
+        success: ({ data: { scenes, title, ...rest } }) => {
+          this.setData(
+            {
+              scenes: scenes,
+              info: rest,
+            },
+            () => {
+              wx.hideLoading();
+            }
+          );
           wx.setNavigationBarTitle({
-            title: data.title,
+            title: title,
           });
         },
       });
+
+      projectid = prjId;
     },
 
     daojishiFn(key, time, fn = () => {}) {
@@ -234,11 +264,16 @@ VueLikePage([], {
     },
 
     shot: function (e) {
+      if (isLoading) return;
+
+      isLoading = true;
+
       app.checkOperationTimeout(true);
       let { id } = e.currentTarget.dataset;
 
       this.setData({
         type: id,
+        popupVisible: true,
       });
 
       // if (!app.sendCheck()) {
@@ -252,6 +287,7 @@ VueLikePage([], {
 
         this.setData({
           isShot: true,
+          isVideo: true,
         });
         setTimeout(() => {
           this.setData({
@@ -271,9 +307,13 @@ VueLikePage([], {
                 });
 
                 this.daojishiFn("recordjishi", this.data.recordjishi, () => {
+                  isLoading = false;
                   wx.showLoading({
                     title: "生成视频中...",
                   });
+                  this.setData({
+                    popupVisible: false,
+                  });
                   setTimeout(() => {
                     // 不发送switch
                     this.gotoWork();
@@ -295,6 +335,7 @@ VueLikePage([], {
 
         this.setData({
           isShot: true,
+          isVideo: false,
         });
 
         setTimeout(() => {
@@ -310,10 +351,14 @@ VueLikePage([], {
             // 为了同步机器的倒计时
             setTimeout(() => {
               this.daojishiFn("daojishi", this.data.daojishi, () => {
+                isLoading = false;
                 wx.showLoading({
                   title: "生成图片中...",
                   // mask: true,
                 });
+                this.setData({
+                  popupVisible: false,
+                });
                 setTimeout(() => {
                   // 不发送switch
                   this.gotoWork();

pages/index/index.json

@@ -1 +1,5 @@
-{}
+{
+  "usingComponents": {
+    "c-popup": "../../components/popup"
+  }
+}

pages/index/index.wxml

@@ -1,43 +1,48 @@
 <!--index.wxml-->
-<view class="container">
-  <image class="c_bg" src="{{cdn_url}}/images/bg.jpg" mode="scaleToFill" />
-  <view class="body">
-    <view class="swp">
-      <swiper class="swiper" indicator-dots="{{indicatorDots}}" bindchange="swiperChange" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
-        <block wx:for="{{scenes}}" wx:key="index">
-          <swiper-item>
-            <view class="swiper-item">
-              <image src="{{cdn_url}}/images/lunbo{{item.id}}.jpg" mode="aspectFill" />
-            </view>
+<view class="container" style="{{info.globalVar}}">
+  <view wx:if="{{info.globalVar}}" class="body" style="background-image:url({{cdn_url}}/images/bg.jpg);">
+    <view wx:if="{{info.banner.list.length}}" class="swp">
+      <block wx:if="{{info.banner.border}}">
+        <image style="width:{{info.banner.border.width}}" class="swp__bd top lf" src="{{cdn_url+info.banner.border['tp-lf']}}" mode="widthFix" />
+        <image style="width:{{info.banner.border.width}}" class="swp__bd top rt" src="{{cdn_url+info.banner.border['tp-rf']}}" mode="widthFix" />
+        <image style="width:{{info.banner.border.width}}" class="swp__bd bt lf" src="{{cdn_url+info.banner.border['bt-lf']}}" mode="widthFix" />
+        <image style="width:{{info.banner.border.width}}" class="swp__bd bt rt" src="{{cdn_url+info.banner.border['bt-rf']}}" mode="widthFix" />
+      </block>
+      <view wx:if="{{info.banner.btmShadow}}" class="swp__shadow" style="left:{{info.banner.border.width}};right:{{info.banner.border.width}}" />
+      <swiper class="swiper" bindchange="swiperChange" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
+        <block wx:for="{{info.banner.list || []}}" wx:key="index">
+          <swiper-item class="swiper-item">
+            <image src="{{cdn_url+item}}" mode="aspectFill" />
           </swiper-item>
         </block>
       </swiper>
-      <view class="dots">
-        <block wx:for="{{background}}" wx:key="index">
-          <image src="{{cdn_url}}/images/{{index == current ? 'dot_active.png' : 'dot_default.png'}}" mode="aspectFill" />
-        </block>
-      </view>
     </view>
 
     <view class="title">
-      <image src="{{cdn_url}}/images/xuanze_new.png" mode="widthFix" />
+      <image src="{{cdn_url + info.sceneTitleImg.path}}" style="width:{{info.sceneTitleImg.width}}" mode="widthFix" />
       <text>选择您喜欢的场景</text>
     </view>
 
     <view class="lunbo" style="pointer-events: {{isOtherZhanYong?'none':'auto'}};opacity:{{isOtherZhanYong?'0.6':'1'}}">
-      <block wx:for="{{scenes}}" wx:key="index">
-        <image bindtap="tapSelect" data-id="{{item.id}}" src="{{cdn_url}}/images/{{item.id}}{{item.id == currentScene ? '-active' : ''}}.png" mode="aspectFill" />
-      </block>
+      <view wx:for="{{scenes}}" wx:key="index" class="lunbo__item {{item.id == currentScene && 'active'}}">
+        <view wx:if="{{item.id == currentScene && info.activeSceneBdImg.path}}" class="lunbo__item__img" style="width: {{info.activeSceneBdImg.width}};height: {{info.activeSceneBdImg.height}}; background-image: url({{cdn_url+info.activeSceneBdImg.path}})">
+          <image bindtap="tapSelect" data-id="{{item.id}}" src="{{cdn_url}}/scenes/{{item.id}}.jpg" mode="aspectFill" />
+        </view>
+        <view wx:else class="lunbo__item__img">
+          <image bindtap="tapSelect" data-id="{{item.id}}" src="{{cdn_url}}/scenes/{{item.id}}.jpg" mode="aspectFill" />
+        </view>
+        <view class="lunbo__item__text">{{item.title}}</view>
+      </view>
     </view>
 
     <view class="title">
-      <image src="{{cdn_url}}/images/paishe_new.png" mode="widthFix" />
+      <image src="{{cdn_url + info.recordTitleImg.path}}" style="width:{{info.recordTitleImg.width}}" mode="widthFix" />
       <text>点击记录，下载拍摄结果，仅保留近15条内容</text>
     </view>
 
-    <view class="record" style="--paddingbtm: {{records.length<=0?'50rpx':'180rpx'}};">
+    <view class="record" style="margin-bottom: calc({{info.rescan.height}} + {{isOtherZhanYong ? '80rpx' : '20rpx'}});">
       <block wx:for="{{records}}" wx:key="index">
-        <view data-id="{{item.id}}" bindtap="gotoRecord">
+        <view data-id="{{item.id}}" bindtap="gotoRecord" style="background-image: url({{cdn_url+info.records.cardImgPath}})">
           <text>记录编号：{{item.id}}</text>
           <view>
             <text>场景名 | {{item.type=='1'?'拍照':'录像'}}</text>
@@ -46,50 +51,34 @@
         </view>
       </block>
       <view class="norecord" style="text-align: center;" wx:if="{{records.length<=0}}">
-        <view class="record-title">历史记录</view>
         <view class="norecord-text">暂无记录</view>
       </view>
     </view>
 
-
-    <view class="btn_paise" style="--bottom: {{isIphoneX?'10%':'4%'}};">
-      <block wx:if="{{!isOtherZhanYong}}">
+    <view wx:if="{{isOtherZhanYong}}" class="btn_paise_tips" style="bottom:{{info.rescan.height}}">其他游客使用中，请稍后重新扫码</view>
+    <view class="btn_paise" style="height:{{info.rescan.height}};background:url({{cdn_url+info.rescan.bg}}) no-repeat center / cover">
+      <view wx:if="{{!isOtherZhanYong}}" class="btn_paise__tools">
         <view class="paizhao">
-          <image bindtap="shot" data-id="1" src="{{cdn_url}}/images/paizhao_new.png" mode="widthFix" />
+          <image bindtap="shot" data-id="1" src="{{cdn_url}}/images/photo-btn.png" mode="widthFix" />
         </view>
+        <view class="btn_paise__border" style="background:{{info.rescan.borderColor}}" />
         <view class="luxiang">
-          <image bindtap="shot" data-id="0" src="{{cdn_url}}/images/luxiang_new.png" mode="widthFix" />
-        </view>
-      </block>
-
-      <view class="rescan" wx:else>
-        <text>其他游客使用中，请稍后重新扫码</text>
-        <view bindtap="scanCode">
-          <image src="{{cdn_url}}/images/chongxinsaoma.png" mode="widthFix" />
+          <image bindtap="shot" data-id="0" src="{{cdn_url}}/images/video-btn.png" mode="widthFix" />
         </view>
       </view>
-    </view>
-
-  </view>
-
-  <view class="shotting {{!isShot ? 'hidden' :''}}">
-    <image class="shot_bg" src="{{cdn_url}}/images/shotbg_{{currentScene}}.jpg" mode="aspectFill" />
 
-    <view class="{{!isRecord ? '' :'hidden'}}">
-      <view class="tips {{daojishi ? '' :'hidden'}}">
-        <view class="xiaolian">
-          <image src="{{cdn_url}}/images/{{daojishi||1}}s.png" mode="widthFix" />
-          <text>将于{{daojishi}}s后拍摄</text>
-        </view>
+      <view wx:else bindtap="scanCode" class="btn_paise__rescan">
+        <image src="{{cdn_url+info.rescan.btnImg}}" mode="widthFix" style="width:{{info.rescan.btnWidth}}" />
       </view>
     </view>
-
-    <view class="record {{(isRecord&&recordjishi) ? '' :'hidden'}}">
-      <image src="{{cdn_url}}/images/record.png" mode="widthFix" />
-      <text>录制中{{recordjishi? '（'+recordjishi+'s）':''}}…</text>
-    </view>
-
-
   </view>
 
+  <c-popup wx:if="{{popupVisible}}"
+    isVideo="{{isVideo}}"
+    sceneId="{{currentScene}}"
+    time="{{daojishi}}"
+    recordTime="{{recordjishi}}"
+    cdn_url="{{cdn_url}}"
+    bdPath="{{info.timerBdImgPath}}"
+  />
 </view>

pages/index/index.wxss

@@ -1,42 +1,66 @@
 /**index.wxss**/
-.container{
+.container {
   padding: 0;
 }
 
-.c_bg{
-  position: fixed;
-  left: 0;
-  top: 0;
-  height: 100%;
-  z-index: -1;
-  width: 100%;
-}
-
-.body{
-  width: 100%;
-  min-height: 100%;
+.body {
+  min-height: 100vh;
   overflow-y: auto;
+  background: no-repeat center / cover;
 }
 
-.swp{
+.swp {
   position: relative;
+  margin: 11rpx;
 }
-.swiper{
-  font-size: 0;
-  height: 30vh;
+.swp__shadow {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -10rpx;
+  height: 10rpx;
+  filter: blur(2px);
+  background-image: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0.6),
+    rgba(0, 0, 0, 0)
+  );
+}
+.swp__bd {
+  position: absolute;
+  z-index: 1;
 }
-
-.swiper-item{
-  width: 100%;
-  height: 100%;
+.swp__bd.top {
+  top: 0;
+}
+.swp__bd.bt {
+  bottom: 0;
+}
+.swp__bd.bt.lf {
+  left: 0;
+}
+.swp__bd.bt.rt {
+  right: 0;
+  transform: scaleX(-1);
+}
+.swp__bd.top.lf {
+  left: 0;
+  transform: scaleX(-1);
+}
+.swp__bd.top.rt {
+  right: 0;
+}
+.swiper {
+  font-size: 0;
+  height: 424rpx;
 }
 
-.swiper-item image{
+.swiper-item image {
   width: 100%;
   height: 100%;
 }
 
-.dots{
+.dots {
   position: absolute;
   bottom: 10px;
   transform: translateX(-50%);
@@ -45,174 +69,195 @@
   display: flex;
 }
 
-.dots >image{
+.dots > image {
   width: 30rpx;
   height: 30rpx;
   margin: 0 12rpx;
 }
 
-.body .title{
-  width: 90%;
-  margin: 20rpx 5% 30rpx;
+.body .title {
+  padding: 57rpx 47rpx 32rpx;
   display: flex;
   align-items: flex-end;
-  height: 80rpx;
 }
-.body .title image{
-  width: 22%;
-  height: 100%;
+.body .title image {
+  width: 173rpx;
 }
 
-.body .title text{
+.body .title text {
   display: inline-block;
-  color: #999999;
-  margin-left: 30rpx;
+  color: var(--text-tips-color);
+  margin-left: 16rpx;
   margin-bottom: -4rpx;
-  font-size: 24rpx;
+  font-size: 23rpx;
+  white-space: nowrap;
 }
 
-.body .lunbo{
+.body .lunbo {
   width: 100%;
-  display: inline-block;
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
+  padding-left: 30rpx;
   overflow-x: auto;
   white-space: nowrap;
+  box-sizing: border-box;
   /* justify-content: space-between;
   align-items: center;
   flex-wrap: wrap; */
 }
 
-.body .lunbo > image{
-  width: 28%;
-  height: 336rpx;
-  margin: 0 1%;
+.lunbo__item {
+  display: inline-block;
+  margin-right: 25rpx;
 }
 
-.body .record{
-  padding-bottom: var(--paddingbtm);
+.lunbo__item.active .lunbo__item__text {
+  color: var(--primary-color);
+  font-weight: bold;
+}
+.lunbo__item__text {
+  margin-top: 12rpx;
+  text-align: center;
+  font-size: 25rpx;
+  color: var(--text-color);
 }
 
-.body .record >view{
-  background-color: #fff;
-  width: 90%;
-  margin:  0 auto 28rpx;
-  padding: 20rpx;
-  box-shadow: 0 0 16rpx 2rpx rgba(0,0,0,0.1);
-  border-radius: 10rpx;
+.lunbo__item__img {
+  position: relative;
+  font-size: 0;
+}
+.lunbo__item.active .lunbo__item__img {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: no-repeat center / contain;
+}
+.lunbo__item.active .lunbo__item__img image {
+  position: relative;
+  top: -4rpx;
+}
+.lunbo__item__img image {
+  position: relative;
+  width: 190rpx;
+  height: 265rpx;
+  z-index: 1;
+}
+
+.body .record {
+  padding: 0 30rpx;
+}
+
+.body .record > view {
+  padding: 25rpx 35rpx 0;
+  height: 150rpx;
+  box-sizing: border-box;
+  color: var(--record-title-color);
+  font-size: 28rpx;
+  background: no-repeat center / contain;
   opacity: 1;
 }
 
-.body .record >view > text{
+.body .record > view > text {
   font-weight: bold;
-  font-size: 32rpx;
-  color: #666666;
 }
 
-.body .record >view > view{
-  color: #999999;
+.body .record > view > view {
+  color: var(--record-inner-color);
   margin-top: 20rpx;
   display: flex;
   justify-content: space-between;
-  align-items: flex-end;
-}
-.body .record >view > view>text{
-  font-size: 28rpx;
+  align-items: center;
 }
 
-.body .record >view > view>text:last-of-type{
-  font-size: 24rpx;
+.body .record > view > view > text:last-of-type {
+  font-size: 21rpx;
 }
 
-
-.body .record .norecord >view{
+.body .record .norecord > view {
   margin-top: 0;
 }
-.body .record .norecord > .record-title{
+.body .record .norecord > .record-title {
   color: #000;
   font-size: 30rpx;
   font-weight: bold;
 }
 
-.body .record .norecord > .norecord-text{
+.body .record .norecord > .norecord-text {
   text-align: center;
   width: 100%;
   display: inline-block;
   margin-top: 20rpx;
   font-size: 28rpx;
+  color: var(--text-tips-color);
 }
 
-.body .btn_paise{
+.btn_paise {
   position: fixed;
-  z-index: 99;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 100%;
-  /* bottom: var(--bottom); */
+  left: 0;
   bottom: 0;
+  width: 100%;
+  font-size: 0;
+  z-index: 99;
+}
+.btn_paise__tools {
   display: flex;
+  align-items: center;
   justify-content: space-between;
-  font-size: 0;
-  max-height: 180rpx;
+  height: inherit;
 }
 
-.body .btn_paise > view{
-  width: 50%;
-  text-align: center;
-  height: auto;
-  padding: 30rpx 0;
-  font-size: 0;
+.btn_paise__tools .paizhao,
+.btn_paise__tools .luxiang {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  height: 100%;
 }
-.body .btn_paise > .rescan{
-  width: 100%;
-  padding: 0;
-  background: #FFFFFF;
-  box-shadow: 0 -4rpx 4rpx 2rpx rgba(0,0,0,0.1);
+.btn_paise__tools > view image {
+  width: 281rpx;
+}
+
+.btn_paise__rescan {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: inherit;
 }
-.body .btn_paise > .rescan> text {
+
+.btn_paise_tips {
+  position: fixed;
+  left: 0;
+  right: 0;
   font-size: 28rpx;
   color: #999999;
   background-color: #fff;
   padding: 10rpx 0;
-  display: inline-block;
-  width: 100%;
-}
-.body .btn_paise > .rescan> view {
-  background-color: #FF8500;
-  width: 100%;
-  padding: 20rpx 0;
-}
-
-.body .btn_paise > .rescan> view > image{
-  width: 50%;
-}
-
-.body .btn_paise > view > image{
-  width: 50%;
-}
-
-.body .btn_paise .luxiang{
-  background-color: #00B3EC;
+  text-align: center;
+  box-shadow: 0 -6rpx 10rpx 0px rgba(0, 0, 0, 0.2);
 }
 
-.body .btn_paise .paizhao{
-  background-color: #FF8500;
+.btn_paise__tools .btn_paise__border {
+  width: 4rpx;
+  height: 89rpx;
+  background: #d9d9d9;
 }
 
-
-.shotting{
+.shotting {
   position: fixed;
   z-index: 999;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
-  
 }
-.shotting .shot_bg{
+.shotting .shot_bg {
   width: 100%;
   height: 100%;
 }
 
-.shotting .tips{
+.shotting .tips {
   position: absolute;
   top: 40%;
   left: 50%;
@@ -221,8 +266,7 @@
   width: 80%;
 }
 
-
-.shotting .record{
+.shotting .record {
   position: absolute;
   top: 30rpx;
   left: 30rpx;
@@ -233,39 +277,38 @@
   align-items: center;
 }
 
-.shotting .tips > image{
+.shotting .tips > image {
   width: 100%;
 }
 
-.shotting .record > image{
+.shotting .record > image {
   width: 50rpx;
   margin-right: 10rpx;
 }
 
-.shotting .tips .xiaolian{
+.shotting .tips .xiaolian {
   background: rgba(25, 25, 25, 0.75);
   border-radius: 20rpx;
   text-align: center;
   color: #fff;
   width: 80%;
-  margin:0 auto;
+  margin: 0 auto;
   padding: 10% 0;
 }
 
-.shotting .tips .xiaolian image{
+.shotting .tips .xiaolian image {
   width: 20%;
 }
 
-.shotting .tips .xiaolian text{
+.shotting .tips .xiaolian text {
   display: block;
   margin-top: 20rpx;
 }
 
-.shotcon{
+.shotcon {
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   position: absolute;
 }
-

pages/work/index.js

@@ -1,35 +1,31 @@
 // index.js
 // 获取应用实例
-import {
-  VueLikePage
-} from "../../utils/page";
-import {
-  CDN_URL,
-  API_BASE_URL,
-  VIDEO_BASE_URL,
-  app
-} from "../../config/index";
-
-
-var g_app = getApp();
+import { VueLikePage } from "../../utils/page";
+import { CDN_URL, API_BASE_URL, VIDEO_BASE_URL, app } from "../../config/index";
 
 VueLikePage([], {
   data: {
-    cdn_url: CDN_URL,
+    cdn_url: "",
     baseUrl: API_BASE_URL + "/",
     url_link: "",
     id: "1",
     type: "",
     loadCompele: false,
-    filePath: ''
+    filePath: "",
+    info: {
+      resourceImg: {},
+      banner: {},
+      sceneTitleImg: {},
+      recordTitleImg: {},
+      rescan: {},
+      activeSceneBdImg: {},
+    },
   },
   methods: {
     onLoad: function (options) {
-      let {
-        rdw,
-        id,
-        type
-      } = options;
+      let { rdw, id, type, projectid } = options;
+
+      this.getData(projectid);
 
       let link = "";
       if (type == "0") {
@@ -42,13 +38,14 @@ VueLikePage([], {
         url_link: link,
         id,
         type,
+        cdn_url: CDN_URL + "/" + projectid,
       });
 
-      this.downloadF(data => {
+      this.downloadF((data) => {
         this.setData({
-          filePath: data
-        })
-      })
+          filePath: data,
+        });
+      });
     },
     loadcompele() {
       this.setData({
@@ -73,23 +70,24 @@ VueLikePage([], {
         m_type = "video";
       }
 
-
       wx.downloadFile({
         url: link,
         success: (res) => {
-          if (res.statusCode == '404') {
+          if (res.statusCode == "404") {
             return app.showAlert("作品暂未生成，请稍后再试", () => {
-              wx.navigateBack()
+              wx.navigateBack();
             });
           }
           //判断是否为数组
           let typeType =
-            Object.prototype.toString.call(res.header["Content-Type"]) == "[object String]" ? res.header["Content-Type"] : res.header["Content-Type"][0];
-
+            Object.prototype.toString.call(res.header["Content-Type"]) ==
+            "[object String]"
+              ? res.header["Content-Type"]
+              : res.header["Content-Type"][0];
 
           //判断不是xml文件
           if (typeType.indexOf(m_type) > -1) {
-            cb(res.tempFilePath)
+            cb(res.tempFilePath);
           }
         },
         fail: () => {
@@ -122,10 +120,11 @@ VueLikePage([], {
             });
           },
           fail: (e) => {
-            if (!(e.errMsg.indexOf('cancel') > -1)) {
+            if (!(e.errMsg.indexOf("cancel") > -1)) {
               wx.showModal({
                 title: "提示",
-                content: "保存失败，请检查是否开启相册保存权限，可在「右上角」 - 「设置」里查看",
+                content:
+                  "保存失败，请检查是否开启相册保存权限，可在「右上角」 - 「设置」里查看",
                 showCancel: false,
               });
             }
@@ -135,7 +134,33 @@ VueLikePage([], {
           },
         });
       }
+    },
 
+    getData(prjId = "ZHS2305758-1") {
+      wx.showLoading({
+        title: "资源加载中",
+      });
+
+      this.setData({
+        cdn_url: CDN_URL + "/" + prjId,
+      });
+
+      wx.request({
+        url: `${VIDEO_BASE_URL}project/4dage-sxb/${prjId}/config.json`,
+        success: ({ data: { title, ...rest } }) => {
+          this.setData(
+            {
+              info: rest,
+            },
+            () => {
+              wx.hideLoading();
+            }
+          );
+          wx.setNavigationBarTitle({
+            title: title,
+          });
+        },
+      });
     },
   },
-});
+});

pages/work/index.wxml

@@ -1,14 +1,20 @@
-<view class='container'>
-  <image class="work_bg" src="{{cdn_url}}/images/shotbg_{{id}}.jpg" mode="aspectFill" />
+<view wx:if="{{info.globalVar}}" class='container'>
+  <image class="work_bg {{!info.filterPath && 'filter'}}" src="{{cdn_url}}/scenes/{{id}}.jpg" mode="aspectFill" />
+  <image class="work_bg_filter" wx:if="{{info.filterPath}}" src="{{cdn_url+info.filterPath}}" />
   <view class="w_body">
-    <view class="w_video" >
-      <video wx:if="{{type=='0'}}" style="opacity:{{loadCompele?1:0}}" bindloadedmetadata="loadcompele" src="{{url_link}}" loop autoplay controls="{{false}}" enable-progress-gesture="{{false}}"></video>
-      <image wx:else style="opacity:{{loadCompele?1:0}}" bindload="loadcompele" show-menu-by-longpress="true" src="{{url_link}}" mode="widthFix" />
+    <view class="w_video" style="background-image: url({{cdn_url+info.resourceImg.bg}});{{info.resourceImg.style}}">
+      <video wx:if="{{type=='0'}}" style="opacity:{{loadCompele?1:0}};{{info.resourceImg.imgStyle}}" bindloadedmetadata="loadcompele" src="{{url_link}}" loop autoplay controls="{{false}}" enable-progress-gesture="{{false}}"></video>
+      <image wx:else style="opacity:{{loadCompele?1:0}};{{info.resourceImg.imgStyle}}" bindload="loadcompele" show-menu-by-longpress="true" src="{{url_link}}" mode="widthFix" />
     </view>
-    <view class="w_btn">
-      <image bindtap="cancel" src="{{cdn_url}}/images/cancel.png" mode="widthFix" />
-      <image bindtap="saveAlbum" src="{{cdn_url}}/images/save.png" mode="widthFix" />
+
+    <view class="w_btn" style="height:{{info.rescan.height}};background:url({{cdn_url+info.rescan.bg}}) no-repeat center / cover">
+      <view bindtap="cancel">
+        <image src="{{cdn_url}}/images/cancel.png" mode="widthFix" />
+      </view>
+      <view class="btn_paise__border" style="background:{{info.rescan.borderColor}}" />
+      <view bindtap="saveAlbum">
+        <image src="{{cdn_url}}/images/save.png" mode="widthFix" />
+      </view>
     </view>
   </view>
 </view>
-  

pages/work/index.wxss

@@ -1,32 +1,34 @@
 /* pages/work/index.wxss */
-.w_body{
+.w_body {
   width: 100%;
   height: 100%;
 }
 
-.w_body > .work{
+.w_body > .work {
   width: 100%;
   height: 100%;
 }
 
-.w_video{
+.w_video {
   background: #fff;
   position: fixed;
   top: 40%;
   left: 50%;
-  transform: translate(-50%,-50%);
+  transform: translate(-50%, -50%);
   z-index: 9999;
-  padding: 16rpx;
   font-size: 0;
-  width: 90%;
+  width: calc(100% - 40rpx);
+  box-sizing: border-box;
+  background: no-repeat center / 100% 100%;
 }
 
-.w_video > video,.w_video > image{
+.w_video > video,
+.w_video > image {
   width: 100%;
 }
 
-
-.work_bg{
+.work_bg,
+.work_bg_filter {
   position: fixed;
   z-index: 999;
   top: 0;
@@ -35,8 +37,8 @@
   height: 100%;
 }
 
-.work_bg::after{
-  content: '';
+.work_bg.filter::after {
+  content: "";
   position: absolute;
   top: 0;
   left: 0;
@@ -45,18 +47,32 @@
   background: rgba(0, 0, 0, 0.7);
 }
 
+.work_bg_filter {
+  z-index: 1000;
+}
 
-.w_btn{
+.w_btn {
   position: fixed;
   z-index: 9999;
   left: 0;
-  bottom: 10%;
+  bottom: 0;
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-around;
 }
 
-.w_btn>image{
-  width: 40%;
-}
+.w_btn > view:not(:nth-child(2)) {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.w_btn image {
+  width: 281rpx;
+}
+.btn_paise__border {
+  width: 4rpx;
+  height: 89rpx;
+  background: #d9d9d9;
+}

project.private.config.json

@@ -9,7 +9,7 @@
         {
           "name": "pages/index/index",
           "pathName": "pages/index/index",
-          "query": "authorCode=12345678",
+          "query": "authorCode=12345678&projectId=ZHS2305758-1&machineid=309c23aeaf7a",
           "launchMode": "default",
           "scene": null
         },
@@ -28,7 +28,7 @@
         {
           "name": "pages/work/index",
           "pathName": "pages/work/index",
-          "query": "type=0&id=1&rdw=kHYlUzoX",
+          "query": "type=1&id=1&rdw=kHYlUzoX&projectid=ZHS2305758-1",
           "launchMode": "default",
           "scene": null
         }