feat: 个人分享页面、视频分享页面;

pages.json

@@ -39,6 +39,18 @@
 			{
 				"path": "record/articleSharing"
 			},
+			{
+				"path": "sharing/personal"
+			},
+			{
+				"path": "sharing/video"
+			},
+			{
+				"path": "sharing/group"
+			},
+			{
+				"path": "sharing/article"
+			},
 			{
 				"path": "mine/setting"
 			},

pages/index/center.vue

@@ -143,10 +143,10 @@
 	import userShopCommission from '@/components/userShop/userShopCommission.vue'
 	
 	const URL_MAPPING = { // state -> url
-		'-1': '/pages_order/record/personalSharing',
-		'1': '/pages_order/record/videoSharing',
-		'2': '/pages_order/record/groupSharing',
-		'3': '/pages_order/record/articleSharing',
+		'-1': '/pages_order/sharing/personal',
+		'0': '/pages_order/sharing/video',
+		'1': '/pages_order/sharing/group',
+		'2': '/pages_order/sharing/article',
 	}
 
 	export default {
@@ -196,6 +196,17 @@
 						createTime: '2025年2月1日',
 						state: 1,
 					},
+					{
+						id: '003',
+						imageUrl: '../../static/image/center/temp.png',
+						times: 10,
+						qrCode: null,
+						title: '裂变星轻松获客',
+						description: '如此好用的赚钱项目，赶快加入吧！',
+						auditStatus: 2,
+						createTime: '2025年2月1日',
+						state: 2,
+					},
 				]
 			}
 		},

pages/index/record.vue

@@ -97,9 +97,9 @@
 
 	const URL_MAPPING = { // state -> url
 		'-1': '/pages_order/record/personalSharing',
-		'1': '/pages_order/record/videoSharing',
-		'2': '/pages_order/record/groupSharing',
-		'3': '/pages_order/record/articleSharing',
+		'0': '/pages_order/record/videoSharing',
+		'1': '/pages_order/record/groupSharing',
+		'2': '/pages_order/record/articleSharing',
 	}
 
 	export default {

pages_order/record/personalSharing.vue

@@ -29,6 +29,33 @@
             </view>
           </uv-form-item>
         </view>
+        <!-- todo: 选择头像 -->
+        <view class="form-item">
+          <uv-form-item label="选择头像" prop="imageUrl">
+            <view class="form-item-content">
+              <formUpload v-model="form.avatarUrl">
+                <template v-slot="{ value }">
+                  <view class="flex" style="min-width: 116rpx; height: 45rpx;">
+                    <image 
+                      :src="value" 
+                      mode="aspectFill" 
+                      style="width: 68rpx; height: 68rpx;"
+                      radius="14rpx"
+                    />
+                    <uv-icon style="margin-left: 20rpx" name="arrow-right" color="#000000" size="28rpx"></uv-icon>
+                  </view>
+                </template>
+              </formUpload>
+            </view>
+          </uv-form-item>
+        </view>
+        <view class="form-item">
+          <uv-form-item label="昵称" labelWidth="105rpx" prop="nickName">
+            <view class="form-item-content">
+              <formInput v-model="form.nickName" placeholder="请输入你的群名称" width="540rpx"></formInput>
+            </view>
+          </uv-form-item>
+        </view>
         <view class="form-item">
           <uv-form-item label="选择封面图" prop="imageUrl">
             <view class="form-item-content">
@@ -115,6 +142,8 @@
         auditStatus: null,
         form: {
           id: null,
+          avatarUrl: null,
+          nickName: null,
           imageUrl: null,
           times: 10,
           qrCode: null,

pages_order/sharing/article.vue

@@ -0,0 +1,18 @@
+<template>
+  <view>
+		<navbar leftClick @leftClick="$utils.navigateBack" />
+
+  </view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+</style>

pages_order/sharing/group.vue

@@ -0,0 +1,18 @@
+<template>
+  <view>
+		<navbar leftClick @leftClick="$utils.navigateBack" />
+
+  </view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+</style>

pages_order/sharing/personal.vue

@@ -0,0 +1,174 @@
+<template>
+  <view class="page">
+		<navbar leftClick @leftClick="$utils.navigateBack" />
+
+    <view class="content">
+      <image class="avatar" :src="detail.avatarUrl"></image>
+      <text class="nick-name">{{ detail.nickName }}</text>
+
+      <template v-if="isLocked">
+        <button class="btn" type="success" @click="openPopup">添加</button>
+      </template>
+      <template v-else>
+        <image class="qr" :src="detail.qrCode"></image>
+      </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>
+  </view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+        detail: {
+          id: null,
+          avatarUrl: null,
+          nickName: null,
+          imageUrl: null,
+          times: 10,
+          qrCode: null,
+          description: null,
+        },
+        isLocked: true,
+      }
+    },
+    onLoad(option) {
+      console.log('--option', 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
+
+      return o
+    },
+    methods: {
+      async fetchSharingDetail(id) {
+        // todo: init data by id
+
+        this.detail = {
+          id: '001',
+          avatarUrl: '../static/temp-avator.png',
+          nickName: '裂变星官方指导客服',
+          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: -1,
+        }
+      },
+      openPopup() {
+        this.$refs.popup.open();
+      },
+      closePopup() {
+        this.$refs.popup.close();
+      },
+    },
+  }
+</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, .qr {
+  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;
+}
+
+.qr {
+  width: 350rpx;
+  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

@@ -0,0 +1,87 @@
+<template>
+  <view>
+		<navbar leftClick @leftClick="$utils.navigateBack" />
+
+    <view class="content">
+      <video 
+        :src="detail.videoUrl" 
+        autoplay
+        @timeupdate="onTimeupdate"
+      ></video>
+    </view>
+  </view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+        detail: {
+          id: null,
+          title: null,
+          videoUrl: null,
+          times: 10,
+          qrCode: null,
+          description: null,
+        },
+        isLocked: true,
+      }
+    },
+    onLoad(option) {
+      console.log('--option', 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
+
+      return o
+    },
+    methods: {
+      async fetchSharingDetail(id) {
+        // todo: init data by id
+
+        this.detail = {
+          id: '001',
+          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',
+          times: 10,
+          qrCode: '../static/temp-qrcode.png',
+          title: '裂变星轻松获客',
+          description: '如此好用的赚钱项目，赶快加入吧！',
+          auditStatus: 2,
+          createTime: '2025年2月1日',
+          state: -1,
+        }
+      },
+      onTimeupdate(e) {
+        console.log('--onTimeupdate', e)
+      },
+      openPopup() {
+        this.$refs.popup.open();
+      },
+      closePopup() {
+        this.$refs.popup.close();
+      },
+    },
+  }
+</script>
+
+<style scoped lang="scss">
+</style>