更新

hdApp/src/pagesPurchase/open.vue

@@ -1,98 +1,134 @@
 <template>
-  <div class="app-content">
-    <div>
-      <form>
-        <div class="module-com input-line-wrap" style="padding:20upx 26upx 0upx 26upx;font-size:32upx;">
-          您正在开启关闭零售店所需的完整功能，包括商城、订单管理、客户管理和财务管理等。
-        </div>
-        <div class="confirm-btn">
-          <button class="admin-button-com big blue" @click="beginChangeCg(0)"> 开启 </button>
-          <button class="admin-button-com big default" style="margin-top:30upx;" @click="beginChangeCg(1)"> 关闭 </button>
-        </div>
-      </form>
-    </div>
-  </div>
+  <view class="app-content">
+    <view v-if="loaded" class="open-page">
+      <block v-if="onlyCg == 1">
+        <view class="video-wrap">
+          <video
+            class="open-video"
+            :src="videoUrl"
+            object-fit="contain"
+            controls
+            show-center-play-btn
+          ></video>
+        </view>
+        <view class="tip-text">开通零售商城前，请先观看上面视频</view>
+        <view class="confirm-btn">
+          <button class="admin-button-com big blue" @click="beginChangeCg(0)">开启</button>
+        </view>
+      </block>
+      <block v-else>
+        <view class="tip-text tip-text--close">如需要停用零售商城，请点击关闭</view>
+        <view class="confirm-btn">
+          <button class="admin-button-com big default" @click="beginChangeCg(1)">关闭</button>
+        </view>
+      </block>
+    </view>
+  </view>
 </template>
+
 <script>
-import { changeOnlyCg } from "@/api/shop";
-import { openPfFn } from "@/api/apply";
+import { mapGetters } from "vuex";
+import { changeOnlyCg, getDetail } from "@/api/shop";
+
 export default {
   name: "open",
   data() {
     return {
+      constant: this.$constant,
+      loaded: false,
+      onlyCg: 1,
+      videoUrl: ""
     };
   },
+  computed: {
+    ...mapGetters({ loginInfo: "getLoginInfo" })
+  },
+  onLoad() {
+    this.videoUrl = `${this.constant.imgUrl}/open_shop.mp4`;
+    this.loadShopDetail();
+  },
   methods: {
-    init(){
-
-    },
-    applyPfShop(){
-        uni.showLoading({mask:false})
-        openPfFn().then(res=>{
-          uni.hideLoading()
-          if(res.code == 1){
-            this.$msg(res.msg)
-          }
-        })
+    loadShopDetail() {
+      const shopId =
+        uni.getStorageSync("shopId") ||
+        (this.loginInfo.admin && this.loginInfo.admin.currentShopId) ||
+        (this.loginInfo.shopId || 0);
+      getDetail({ shopId }).then(res => {
+        if (res.code == 1 && res.data && res.data.info) {
+          this.onlyCg = Number(res.data.info.onlyCg);
+        }
+        this.loaded = true;
+      }).catch(() => {
+        this.loaded = true;
+      });
     },
-    beginChangeCg(num){
-      let that = this
-      let title = num == 0 ? '开启' :'关闭' 
-      that.$util.confirmModal({content:'确认'+title+'？',okText:'确认'},() => {
-        that.confirmRecover(num)
-      })
+    beginChangeCg(num) {
+      const title = num == 0 ? "开启" : "关闭";
+      this.$util.confirmModal({ content: "确认" + title + "？", okText: "确认" }, () => {
+        this.confirmRecover(num);
+      });
     },
-    confirmRecover(num){
-      let that = this
-      changeOnlyCg({onlyCg:num}).then(res=>{
-        if(res.code == 1){
-
-          that.$store.commit("setLoginInfo", {})
-          that.$store.commit("setMyShopInfo", {})
-          that.$store.commit("setDictionariesInfo", {})
+    confirmRecover(num) {
+      changeOnlyCg({ onlyCg: num }).then(res => {
+        if (res.code == 1) {
+          this.$store.commit("setLoginInfo", {});
+          this.$store.commit("setMyShopInfo", {});
+          this.$store.commit("setDictionariesInfo", {});
 
           // #ifdef APP-PLUS
-          plus.runtime.restart()
+          plus.runtime.restart();
           // #endif
           // #ifdef MP-WEIXIN
-          that.pageTo({url:'/admin/home/workbench',type:3})
+          this.pageTo({ url: "/admin/home/workbench", type: 3 });
           // #endif
         }
-      })
+      });
     }
   }
 };
 </script>
+
 <style lang="scss" scoped>
 .app-content {
-  min-height: calc(100vh - 20upx);
-  padding-top: 20upx;
+  min-height: 100vh;
+  padding: 20upx 20upx 60upx;
+  box-sizing: border-box;
+  background: #f5f7f6;
 }
-.prompt-text {
-  color: $fontColor3;
-  padding-left: 30upx;
-  margin-bottom: 30upx;
+
+.open-page {
+  width: 100%;
 }
-.module-com {
-  margin-bottom: 20upx;
-  .member-wrap {
-    .member-det {
-      font-size: 24upx;
-      margin-left: 20upx;
-    }
-  }
-  .remark-wrap {
-    align-items: flex-start;
-    .remark {
-      height: 240upx;
-    }
-  }
+
+.video-wrap {
+  margin: 0 auto 10upx;
+  text-align: center;
+}
+
+.open-video {
+  width: 700upx;
+  height: 1100upx;
+}
+
+.tip-text {
+  margin-top: 32upx;
+  padding: 0 8upx;
+  color: #333;
+  font-size: 32upx;
+  line-height: 48upx;
+  text-align: center;
 }
+
+.tip-text--close {
+  margin-top: 120upx;
+}
+
 .confirm-btn {
-  width: calc(100% - 60upx);
-  margin: 60upx 30upx 20upx;
-  .admin-button-com {
-    width: 100%;
-  }
+  width: 100%;
+  margin-top: 48upx;
+}
+
+.confirm-btn .admin-button-com {
+  width: 100%;
 }
-</style>
+</style>