feat: 群分享、视频分享页面;

common.scss

@@ -1,4 +1,3 @@
-
 // 文字益处处理
 .text-ellipsis{
 	overflow:hidden; //超出的文本隐藏

components/base/navbar.vue

@@ -110,7 +110,7 @@
 	left: 0;
 	padding-top: calc(var(--status-bar-height) + 20rpx);
 	width: 100%;
-	height: 100rpx;
+	height: $navbar-height;
 	background-color: #fff;
 	display: flex;
 	justify-content: center;

pages/index/center.vue

@@ -197,7 +197,7 @@
 						state: 1,
 					},
 					{
-						id: '003',
+						id: '004',
 						imageUrl: '../../static/image/center/temp.png',
 						times: 10,
 						qrCode: null,

pages_order/components/popupQrCode.vue

@@ -0,0 +1,53 @@
+<template>
+  <uv-popup 
+    ref="popup"
+    :overlayOpacity="0.8"
+    mode="bottom"
+    round="20rpx"
+  >
+    <view class="flex qr-popup">
+      <text class="tips">长按识别二维码，了解更多内容！</text>
+      <image class="qr" :src="src"></image>
+    </view>
+  </uv-popup>
+</template>
+
+<script>
+	export default {
+    props: {
+      src: {
+        type: String,
+        default: null
+      }
+    },
+		data() {
+			return {
+      }
+    },
+    methods: {
+      open() {
+        this.$refs.popup.open();
+      },
+      close() {
+        this.$refs.popup.close();
+      },
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+.qr-popup {
+  flex-direction: column;
+
+  .tips {
+    margin-top: 75rpx;
+    color: #1B1B1B;
+    font-size: 32rpx;
+  }
+  .qr {
+    margin-top: 40rpx;
+    width: 350rpx;
+    height: 350rpx;
+  }
+}
+</style>

pages_order/components/popupUnlock.vue

@@ -0,0 +1,62 @@
+<template>
+  <uv-popup 
+    ref="popup"
+    :overlayOpacity="0.8"
+    :customStyle="{
+      backgroundColor: 'transparent',
+    }"
+  >
+    <view>
+      <image class="popup-bg" :src="src"></image>
+      <view class="flex popup-btns">
+        <button plain class="btn-simple" @click="close">
+          <image class="popup-btn" src="../static/sharing/cancel.png"></image>
+        </button>
+        <button plain class="btn-simple" open-type="share">
+          <image class="popup-btn" src="../static/sharing/forward.png"></image>
+        </button>
+      </view>
+    </view>
+  </uv-popup>
+</template>
+
+<script>
+	export default {
+    props: {
+      src: {
+        type: String,
+        default: null
+      }
+    },
+		data() {
+			return {
+      }
+    },
+    methods: {
+      open() {
+        this.$refs.popup.open();
+      },
+      close() {
+        this.$refs.popup.close();
+      },
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+.popup {
+  &-bg {
+    width: 578rpx; height: 317rpx;
+  }
+
+  &-btns {
+    justify-content: space-between; 
+    margin-top: 56rpx;
+  }
+
+  &-btn {
+    width: 265rpx; 
+    height: 84rpx;
+  }
+}
+</style>

pages_order/record/articleSharing.vue

@@ -204,6 +204,10 @@
           const description = (await this.getEditroContents())?.html
           // todo: decode?
 
+          console.log(description)
+
+          return
+
           const params = { ...this.form, description }
         
           // todo

pages_order/sharing/article.vue

@@ -1,18 +1,169 @@
 <template>
   <view>
-		<navbar leftClick @leftClick="$utils.navigateBack" />
+    <view class="content">
+      <view class="title">{{ detail.title || '' }}</view>
 
+      <view class="desc">{{ detail.publishTime ? `发布于${detail.publishTime}` : '' }}</view>
+
+        <editor id="editor" class="editor" 
+          :read-only="true"
+          @ready="onEditorReady"
+        ></editor>
+    </view>
+
+    <uv-overlay :show="true" :opacity="0">
+      <navbar leftClick @leftClick="$utils.navigateBack" />
+
+      <button class="btn" type="success" @click="openPopup">查看更多</button>
+  
+      <popupUnlock ref="popupUnlock" src="../static/sharing/unlock-article.png"></popupUnlock>
+   
+      <popupQrCode ref="popupQrCode" :src="detail.qrCode"></popupQrCode>
+   
+    </uv-overlay>
+    
   </view>
 </template>
 
 <script>
+  import popupUnlock from '../components/popupUnlock.vue'
+  import popupQrCode from '../components/popupQrCode.vue'
+
 	export default {
+    components: {
+      popupUnlock,
+      popupQrCode,
+    },
 		data() {
 			return {
+        detail: {
+          id: null,
+          groupName: null,
+          imageUrl: null,
+          times: null,
+          qrCode: null,
+          title: null,
+          description: null,
+          auditStatus: null,
+          createTime: null,
+          publishTime: null,
+          state: null,
+        },
+        isLocked: true,
+      }
+    },
+    async onLoad(option) {
+      const { id } = option
+      
+      await this.fetchSharingDetail(id)
+
+      this.initEditor(this.detail.description)
+    },
+    onShareAppMessage(res) {
+      const {
+        title,
+        imageUrl,
+      } = this.detail
+
+      // todo: check
+      let o = {
+        title : title,
+        imageUrl: imageUrl,
+        query: `id=${this.detail.id}`,
+      }
+
+      // todo: check callback? settimeout?
+
+      // todo: get times and check is unlocked
+
+      this.isLocked = false
+      
+      this.$refs.popupQrCode.open()
+
+      return o
+    },
+    methods: {
+      onEditorReady() {
+				uni.createSelectorQuery().select('#editor').context((res) => {
+					this.editorCtx = res.context
+				}).exec()
+			},
+      initEditor(html) {
+        if (!this.editorCtx) {
+          setTimeout(() => {
+            this.initEditor(html)
+          }, 200)
+
+          return
+        }
+
+        this.editorCtx.setContents({ html })
+      },
+      async fetchSharingDetail(id) {
+        // todo: init data by id
+
+        this.detail = {
+          id: '001',
+          groupName: '裂变星创业服务交流群',
+          imageUrl: 'http://gips3.baidu.com/it/u=70459541,3412285454&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280',
+          times: 10,
+          qrCode: '../static/temp-qrcode.png',
+          title: '裂变星轻松获客',
+          description: '<p>文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本</p><p><br></p><p>aaaaaaaaa</p><p><br></p><p><br></p><p>bbbbbbb</p><p>文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本</p><p>文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本</p><p>文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本</p><p>文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本</p><p><br></p><p>aaaaaaaaa</p><p><br></p><p><br></p><p>bbbbbbb</p><p>文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本</p><p>文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本</p><p>文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本内容文本</p>',
+          auditStatus: 2,
+          createTime: '2025年2月1日',
+          publishTime: '2024年11月13日 11:29',
+          state: 2,
+        }
+      },
+      openPopup() {
+        if (this.isLocked) {
+          this.$refs.popupUnlock.open();
+        } else {
+          this.$refs.popupQrCode.open()
+        }
       }
     }
   }
 </script>
 
 <style scoped lang="scss">
+.content {
+  padding: 40rpx 20rpx;
+  padding-top: calc(#{$navbar-height} + var(--status-bar-height) + 20rpx + 40rpx);
+}
+
+.title {
+  color: #474747;
+  font-size: 36rpx;
+  font-weight: 700;
+}
+
+.desc {
+  color: #A2A2A2;
+  font-size: 24rpx;
+  margin-top: 6rpx;
+}
+
+.editor {
+  margin-top: 22rpx;
+  height: 40vh;
+}
+
+.btn {
+  position: absolute;
+  width: calc(100% - 60rpx*2);
+  height: auto;
+  left: 60rpx;
+  bottom: 292rpx;
+
+  background-color: #07C160;
+  border: none;
+  color: #FFFFFF;
+  font-size: 28rpx;
+  line-height: 1;
+  border-radius: 45rpx;
+  padding: 25rpx 0;
+  box-sizing: border-box;
+}
 </style>

pages_order/sharing/group.vue

@@ -1,18 +1,154 @@
 <template>
-  <view>
+  <view class="page">
 		<navbar leftClick @leftClick="$utils.navigateBack" />
 
+    <view class="content">
+      <image class="avatar" :src="detail.imageUrl"></image>
+      <text class="nick-name">{{ detail.groupName }}</text>
+
+      <template v-if="isLocked">
+        <button class="btn" type="success" @click="openPopup">加入</button>
+      </template>
+      <view v-else class="group-info flex">
+        <text>扫一扫，加群主审核进群</text>
+        <image class="qr" :src="detail.qrCode"></image>
+      </view>
+    </view>
+
+    <popupUnlock ref="popupUnlock" src="../static/sharing/unlock-group.png"></popupUnlock>
+
   </view>
 </template>
 
 <script>
+  import popupUnlock from '../components/popupUnlock.vue'
+
 	export default {
+    components: {
+      popupUnlock,
+    },
 		data() {
 			return {
+        detail: {
+          id: null,
+          avatarUrl: null,
+          nickName: null,
+          imageUrl: null,
+          times: 10,
+          qrCode: null,
+          description: null,
+        },
+        isLocked: true,
+      }
+    },
+    onLoad(option) {
+      const { id } = option
+      
+      this.fetchSharingDetail(id)
+    },
+    onShareAppMessage(res) {
+      const {
+        description,
+        imageUrl,
+      } = this.detail
+
+      // todo: check
+      let o = {
+        title : description,
+        imageUrl: imageUrl,
+        // path: `/pages_order/sharing/personal?id=${this.detail.id}`
+        query: `id=${this.detail.id}`,
       }
-    }
+
+      // todo: check callback? settimeout?
+
+      // todo: get times and check is unlocked
+
+      this.isLocked = false
+
+      return o
+    },
+    methods: {
+      async fetchSharingDetail(id) {
+        // todo: init data by id
+
+        this.detail = {
+          id: '001',
+          groupName: '裂变星创业服务交流群',
+          imageUrl: 'http://gips3.baidu.com/it/u=70459541,3412285454&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280',
+          times: 10,
+          qrCode: '../static/temp-qrcode.png',
+          // title: '裂变星轻松获客',
+          description: '如此好用的赚钱项目，赶快加入吧！',
+          auditStatus: 2,
+          createTime: '2025年2月1日',
+          state: 2,
+        }
+      },
+      openPopup() {
+        this.$refs.popupUnlock.open();
+      },
+    },
   }
 </script>
 
 <style scoped lang="scss">
+.page {
+  position: relative;
+  height: 100vh;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.avatar {
+  width: 180rpx;
+  height: 180rpx;
+  margin-top: 127rpx;
+}
+
+.nick-name {
+  color: #1B1B1B;
+  font-size: 32rpx;
+  margin-top: 30rpx;
+}
+
+.btn, .group-info {
+  position: absolute;
+}
+
+.btn {
+  width: calc(100% - 60rpx*2);
+  height: auto;
+  left: 60rpx;
+  bottom: 292rpx;
+
+  background-color: #07C160;
+  border: none;
+  color: #FFFFFF;
+  font-size: 28rpx;
+  line-height: 1;
+  border-radius: 45rpx;
+  padding: 25rpx 0;
+  box-sizing: border-box;
+}
+
+.group-info {
+  bottom: 269rpx;
+
+  flex-direction: column;
+
+  color: #1B1B1B;
+  font-size: 32rpx;
+}
+
+.qr {
+  margin-top: 40rpx;
+
+  width: 350rpx;
+  height: 350rpx;
+}
 </style>

pages_order/sharing/personal.vue

@@ -14,30 +14,18 @@
       </template>
     </view>
 
-    <uv-popup 
-      ref="popup"
-      :overlayOpacity="0.8"
-      :customStyle="{
-        backgroundColor: 'transparent',
-      }"
-    >
-      <view>
-        <image class="popup-bg" src="../static/sharing/add-user.png"></image>
-        <view class="flex popup-btns">
-          <button plain class="btn-simple" @click="closePopup">
-            <image class="popup-btn" src="../static/sharing/cancel.png"></image>
-          </button>
-          <button plain class="btn-simple" open-type="share">
-            <image class="popup-btn" src="../static/sharing/forward.png"></image>
-          </button>
-        </view>
-      </view>
-    </uv-popup>
+    <popupUnlock ref="popupUnlock" src="../static/sharing/unlock-user.png"></popupUnlock>
+
   </view>
 </template>
 
 <script>
+  import popupUnlock from '../components/popupUnlock.vue'
+
 	export default {
+    components: {
+      popupUnlock,
+    },
 		data() {
 			return {
         detail: {
@@ -76,6 +64,8 @@
 
       // todo: get times and check is unlocked
 
+      this.isLocked = false
+
       return o
     },
     methods: {
@@ -97,10 +87,7 @@
         }
       },
       openPopup() {
-        this.$refs.popup.open();
-      },
-      closePopup() {
-        this.$refs.popup.close();
+        this.$refs.popupUnlock.open();
       },
     },
   }
@@ -155,20 +142,4 @@
   height: 350rpx;
   bottom: 269rpx;
 }
-
-.popup {
-  &-bg {
-    width: 578rpx; height: 317rpx;
-  }
-
-  &-btns {
-    justify-content: space-between; 
-    margin-top: 56rpx;
-  }
-
-  &-btn {
-    width: 265rpx; 
-    height: 84rpx;
-  }
-}
 </style>

pages_order/sharing/video.vue

@@ -1,19 +1,38 @@
 <template>
-  <view>
+  <view class="page">
 		<navbar leftClick @leftClick="$utils.navigateBack" />
 
     <view class="content">
-      <video 
+      <video class="video"
+        id="video"
         :src="detail.videoUrl" 
         autoplay
+        :show-fullscreen-btn="false"
         @timeupdate="onTimeupdate"
       ></video>
+      <view class="info">
+        <view class="author">{{ detail.author }}</view>
+        <view class="title">{{ detail.title }}</view>
+        <view class="desc">{{ detail.description }}</view>
+      </view>
     </view>
+
+    <popupUnlock ref="popupUnlock" src="../static/sharing/unlock-video.png"></popupUnlock>
+
+    <popupQrCode ref="popupQrCode" :src="detail.qrCode"></popupQrCode>
+
   </view>
 </template>
 
 <script>
+  import popupUnlock from '../components/popupUnlock.vue'
+  import popupQrCode from '../components/popupQrCode.vue'
+
 	export default {
+    components: {
+      popupUnlock,
+      popupQrCode,
+    },
 		data() {
 			return {
         detail: {
@@ -25,25 +44,32 @@
           description: null,
         },
         isLocked: true,
+        videoContext: null
       }
     },
-    onLoad(option) {
+    async onLoad(option) {
       console.log('--option', option)
       const { id } = option
       
-      this.fetchSharingDetail(id)
+      await this.fetchSharingDetail(id)
+
+      this.videoContext = uni.createVideoContext('video');
+      
+      console.log('--videoContext', this.videoContext)
+
+      // this.videoContext.requestFullScreen()
+
     },
     onShareAppMessage(res) {
       const {
-        description,
-        imageUrl,
+        title,
+        coverImageUrl,
       } = this.detail
 
       // todo: check
       let o = {
-        title : description,
-        imageUrl: imageUrl,
-        // path: `/pages_order/sharing/personal?id=${this.detail.id}`
+        title : title,
+        imageUrl: coverImageUrl,
         query: `id=${this.detail.id}`,
       }
 
@@ -51,6 +77,10 @@
 
       // todo: get times and check is unlocked
 
+      this.isLocked = false
+      
+      this.$refs.popupQrCode.open()
+
       return o
     },
     methods: {
@@ -59,29 +89,54 @@
 
         this.detail = {
           id: '001',
+          author: '@裂变星',
           coverImageUrl: 'http://gips3.baidu.com/it/u=70459541,3412285454&fm=3028&app=3028&f=JPEG&fmt=auto?w=960&h=1280',
-          videoUrl: '../static/temp-video.mp4',
+          videoUrl: 'http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400',
+          mins: 10,
           times: 10,
           qrCode: '../static/temp-qrcode.png',
-          title: '裂变星轻松获客',
-          description: '如此好用的赚钱项目，赶快加入吧！',
+          title: '20秒学会日赚1000+，全自动获客',
+          description: '裂变获客，轻松引流！',
           auditStatus: 2,
           createTime: '2025年2月1日',
-          state: -1,
+          state: 1,
         }
       },
       onTimeupdate(e) {
-        console.log('--onTimeupdate', e)
-      },
-      openPopup() {
-        this.$refs.popup.open();
-      },
-      closePopup() {
-        this.$refs.popup.close();
+        const { currentTime } = e.target
+
+        if (currentTime >= this.detail.mins) {
+          this.videoContext.pause()
+
+          if (this.isLocked) {
+            this.$refs.popupUnlock.open();
+          } else {
+            this.$refs.popupQrCode.open()
+          }
+        }
       },
     },
   }
 </script>
 
 <style scoped lang="scss">
+.video {
+  width: 100%;
+  height: calc(100vh - #{$navbar-height} - var(--status-bar-height) - 20rpx);
+}
+
+.info {
+  color: #FFFFFF;
+  font-size: 28rpx;
+
+  position: fixed;
+  left: 40rpx;
+  bottom: 100rpx;
+
+  .title {
+    font-size: 32rpx;
+    margin: 5rpx 0;
+  }
+}
+
 </style>

uni.scss

@@ -96,4 +96,6 @@ $uni-font-size-paragraph:15px;
 	color: $uni-color;
 	text-align: center;
 	font-size: 28rpx;
-}
+}
+
+$navbar-height: 100rpx;