xiaoe_mp_npm 1.0.39 → 1.0.40

package/miniprogram_dist/GoodsItem/index.js

@@ -23,7 +23,6 @@ import {
 } from "../common/utils/constants.js";
 
 const { utils, sensorLog } = require("live-mp-tools");
-
 const computedBehavior = require('miniprogram-computed').behavior
 
 const formatNum = (num) => {

package/miniprogram_dist/GoodsItem/index.json

@@ -1,6 +1,10 @@
-{
-  "component": true,
-  "usingComponents": {
-    "van-switch": "@vant/weapp/switch/index"
-  }
-}
+{
+  "component": true,
+  "usingComponents": {
+    "van-switch": "@vant/weapp/switch/index",
+    "level-member-bar": "/subpkg/npm-compoent/miniprogram_npm/xiaoe_mp_npm/LevelMemberBar/index"
+  },
+  "componentPlaceholder": {
+    "level-member-bar": "view"
+  }
+}

package/miniprogram_dist/GoodsItem/index.wxml

@@ -73,6 +73,9 @@
         </view>
       </view>
 
+      <!-- 等级会员-专属商品标识 -->
+      <level-member-bar good-data="{{ goodsItem }}" />
+
       <!-- 活动进度条 -->
       <view
         class="progress"

package/miniprogram_dist/LevelMemberBar/index.js

@@ -0,0 +1,45 @@
+import { formatMembershipNameStr, checkCanBuyMemberGood, showMemberGoodsDescModal } from './utils.js'
+
+Component({
+  behaviors: [require('miniprogram-computed').behavior],
+  properties: {
+    goodData: {
+      type: Object,
+      value: {},
+    },
+    userType: {
+      type: String,
+      value: 'student' // student or teacher
+    },
+  },
+  computed: {
+    // 是否显示等级会员-专属商品标识
+    visibleLevelMemberGoodsDesc(properties) {
+      const { have_constrain, ranks } = properties.goodData || {}
+
+      return Boolean(have_constrain && Array.isArray(ranks) && ranks.length)
+    },
+    // 等级会员-专属商品时，显示专属会员等级
+    levelMemberGoodsDesc(properties) {
+      return `仅${formatMembershipNameStr(properties.goodData?.ranks, '/')}可购买`
+    },
+  },
+  methods: {
+    /**
+     * @description 检查是否有购买该【等级会员专属商品】的权益
+     *
+     * @return {Boolean} 检查结果，true 有，false 没有
+     */
+    checkCanBuyMemberGood() {
+      const { goodData, userType } = this.properties
+      return checkCanBuyMemberGood({ goodData, userType })
+    },
+    /**
+     * @description 点击等级会员-专属商品标识文本，展示具体内容
+     */
+    showMemberGoodsDescModal() {
+      const { goodData, userType } = this.properties
+      showMemberGoodsDescModal({ goodData, userType })
+    },
+  },
+});

package/miniprogram_dist/LevelMemberBar/index.json

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

package/miniprogram_dist/LevelMemberBar/index.scss

@@ -0,0 +1,51 @@
+@import "../common/css/index.wxss";
+
+$deviceWidth: 750;
+@function vmin($rpx) {
+  @return #{$rpx * 100 / $deviceWidth}vmin;
+}
+
+@mixin level-member-goods {
+  display: inline-block;
+  max-width: vmin(230);
+  height: vmin(32);
+  padding: 0 vmin(8);
+  margin: vmin(8) 0;
+  line-height: vmin(32);
+  font-size: vmin(20);
+  font-weight: 500;
+  background-color: #FFF3EB;
+  color: #FF781F;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.level-member-goods {
+  @include level-member-goods;
+}
+
+// 竖屏pad
+@media screen and (min-width: 768px) and (orientation: portrait) {
+  $deviceWidth: 1536 !global;
+  .level-member-goods {
+    @include level-member-goods;
+  }
+}
+
+// PC 放大适配
+@media screen and (min-height: 630px) and (orientation: landscape) {
+  $deviceWidth: 1260 !global;
+
+  .level-member-goods {
+    @include level-member-goods;
+  }
+}
+
+// 横屏pad
+@media screen and (min-height: 768px) and (orientation: landscape) {
+  $deviceWidth: 1536 !global;
+  .level-member-goods {
+    @include level-member-goods;
+  }
+}

package/miniprogram_dist/LevelMemberBar/index.wxml

@@ -0,0 +1,3 @@
+<view wx:if="{{ visibleLevelMemberGoodsDesc }}" catchtap="showMemberGoodsDescModal">
+  <text class="level-member-goods">{{ levelMemberGoodsDesc }}</text>
+</view>

package/miniprogram_dist/LevelMemberBar/index.wxss

@@ -0,0 +1,66 @@
+.level-member-goods {
+  display: inline-block;
+  max-width: 30.66667vmin;
+  height: 4.26667vmin;
+  padding: 0 1.06667vmin;
+  margin: 1.06667vmin 0;
+  line-height: 4.26667vmin;
+  font-size: 2.66667vmin;
+  font-weight: 500;
+  background-color: #FFF3EB;
+  color: #FF781F;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+@media screen and (min-width: 768px) and (orientation: portrait) {
+  .level-member-goods {
+    display: inline-block;
+    max-width: 14.97396vmin;
+    height: 2.08333vmin;
+    padding: 0 0.52083vmin;
+    margin: 0.52083vmin 0;
+    line-height: 2.08333vmin;
+    font-size: 1.30208vmin;
+    font-weight: 500;
+    background-color: #FFF3EB;
+    color: #FF781F;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+@media screen and (min-height: 630px) and (orientation: landscape) {
+  .level-member-goods {
+    display: inline-block;
+    max-width: 18.25397vmin;
+    height: 2.53968vmin;
+    padding: 0 0.63492vmin;
+    margin: 0.63492vmin 0;
+    line-height: 2.53968vmin;
+    font-size: 1.5873vmin;
+    font-weight: 500;
+    background-color: #FFF3EB;
+    color: #FF781F;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}
+@media screen and (min-height: 768px) and (orientation: landscape) {
+  .level-member-goods {
+    display: inline-block;
+    max-width: 14.97396vmin;
+    height: 2.08333vmin;
+    padding: 0 0.52083vmin;
+    margin: 0.52083vmin 0;
+    line-height: 2.08333vmin;
+    font-size: 1.30208vmin;
+    font-weight: 500;
+    background-color: #FFF3EB;
+    color: #FF781F;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+}

package/miniprogram_dist/LevelMemberBar/utils.js

@@ -0,0 +1,75 @@
+import membershipStore from '../../../../../store/page/common/membership-store.js'
+import liveRoomStore from '../../../../../store/page/common/live-room-store.js'
+
+/**
+ * @description 获取 rank_id => membership 的映射
+ *
+ * @return {Object} 返回映射 Map
+ */
+export const getMembershipMap = () => {
+  return (membershipStore?.data || []).reduce((acc, membership) => {
+    acc[membership.rank_id] = membership
+    return acc
+  }, {})
+}
+
+/**
+ * @description 获取通过等级会员 ID 数组，返回对应字符串
+ * @param {Array} ranks 等级会员 ID 数组
+ * @param {String} symbolText 间隔符号文本
+ *
+ * @return {String} 返回对应格式字符串
+ */
+export const formatMembershipNameStr = (ranks, symbolText= '、') => {
+  const membershipMap = getMembershipMap()
+  return (ranks || []).map(rank_id => membershipMap[rank_id]?.rank_name).filter(Boolean).join(symbolText)
+}
+
+/**
+ * @description 检查是否有购买该【等级会员专属商品】的权益
+ * @param {Object} goodData 商品详情
+ * @param {String} userType 用户角色：student or teacher
+ *
+ * @return {Boolean} 检查结果，true 有，false 没有
+ */
+export const checkCanBuyMemberGood = ({ goodData, userType }) => {
+  // have_constrain 该商品是否开启了等级会员专属商品限制，true 开启，false 关闭
+  // ranks 该商品对应的等级会员专属商品等级列表
+  const { have_constrain, ranks } = goodData || {}
+  const { member_id } = liveRoomStore?.room?.userInfo?.level_member || {}
+
+  // 是专属商品，如果不是专属的会员，则提示
+  if (have_constrain && !ranks?.includes(member_id)) {
+    showMemberGoodsDescModal({ goodData, userType })
+    return false
+  }
+
+  return true
+}
+
+/**
+ * @description 点击等级会员-专属商品标识文本，展示具体内容
+ * @param {Object} goodData 商品详情
+ * @param {String} userType 用户角色：student or teacher
+ */
+export const showMemberGoodsDescModal = ({ goodData, userType }) => {
+  const isStudent = userType === 'student'
+
+  wx.showModal({
+    content: `该商品仅支持【${formatMembershipNameStr(goodData?.ranks)}】购买`,
+    confirmText: isStudent ? '查看权益' : '确认',
+    cancelText: '取消',
+    confirmColor: '#1472FF',
+    success: (res) => {
+      if (!isStudent || !res.confirm) return
+
+      const appId = liveRoomStore?.data?.room?.aliveInfo.app_id
+      const levelMembershipPageUrl = `https://${appId}.h5.xiaoeknow.com/p/t/v1/account-platform/h5_user/level-member/member`
+
+      // 学员 -> 点击查看权益 -> 跳转等级会员权益页面
+      wx.navigateTo({
+        url: `/pages/webviewContainer/index?path=${levelMembershipPageUrl}`,
+      })
+    }
+  })
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xiaoe_mp_npm",
-  "version": "1.0.39",
+  "version": "1.0.40",
   "description": "",
   "main": "miniprogram_dist/index.js",
   "scripts": {
@@ -75,4 +75,4 @@
     "miniprogram-computed": "4.2.1",
     "mp-plugins-info-collection": "1.1.4"
   }
-}
+}

package/src/GoodsItem/index.js

@@ -23,7 +23,6 @@ import {
 } from "../common/utils/constants.js";
 
 const { utils, sensorLog } = require("live-mp-tools");
-
 const computedBehavior = require('miniprogram-computed').behavior
 
 const formatNum = (num) => {

package/src/GoodsItem/index.json

@@ -1,6 +1,10 @@
-{
-  "component": true,
-  "usingComponents": {
-    "van-switch": "@vant/weapp/switch/index"
-  }
-}
+{
+  "component": true,
+  "usingComponents": {
+    "van-switch": "@vant/weapp/switch/index",
+    "level-member-bar": "/subpkg/npm-compoent/miniprogram_npm/xiaoe_mp_npm/LevelMemberBar/index"
+  },
+  "componentPlaceholder": {
+    "level-member-bar": "view"
+  }
+}

package/src/GoodsItem/index.wxml

@@ -73,6 +73,9 @@
         </view>
       </view>
 
+      <!-- 等级会员-专属商品标识 -->
+      <level-member-bar good-data="{{ goodsItem }}" />
+
       <!-- 活动进度条 -->
       <view
         class="progress"

package/src/LevelMemberBar/index.js

@@ -0,0 +1,45 @@
+import { formatMembershipNameStr, checkCanBuyMemberGood, showMemberGoodsDescModal } from './utils.js'
+
+Component({
+  behaviors: [require('miniprogram-computed').behavior],
+  properties: {
+    goodData: {
+      type: Object,
+      value: {},
+    },
+    userType: {
+      type: String,
+      value: 'student' // student or teacher
+    },
+  },
+  computed: {
+    // 是否显示等级会员-专属商品标识
+    visibleLevelMemberGoodsDesc(properties) {
+      const { have_constrain, ranks } = properties.goodData || {}
+
+      return Boolean(have_constrain && Array.isArray(ranks) && ranks.length)
+    },
+    // 等级会员-专属商品时，显示专属会员等级
+    levelMemberGoodsDesc(properties) {
+      return `仅${formatMembershipNameStr(properties.goodData?.ranks, '/')}可购买`
+    },
+  },
+  methods: {
+    /**
+     * @description 检查是否有购买该【等级会员专属商品】的权益
+     *
+     * @return {Boolean} 检查结果，true 有，false 没有
+     */
+    checkCanBuyMemberGood() {
+      const { goodData, userType } = this.properties
+      return checkCanBuyMemberGood({ goodData, userType })
+    },
+    /**
+     * @description 点击等级会员-专属商品标识文本，展示具体内容
+     */
+    showMemberGoodsDescModal() {
+      const { goodData, userType } = this.properties
+      showMemberGoodsDescModal({ goodData, userType })
+    },
+  },
+});

package/src/LevelMemberBar/index.json

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

package/src/LevelMemberBar/index.scss

@@ -0,0 +1,51 @@
+@import "../common/css/index.wxss";
+
+$deviceWidth: 750;
+@function vmin($rpx) {
+  @return #{$rpx * 100 / $deviceWidth}vmin;
+}
+
+@mixin level-member-goods {
+  display: inline-block;
+  max-width: vmin(230);
+  height: vmin(32);
+  padding: 0 vmin(8);
+  margin: vmin(8) 0;
+  line-height: vmin(32);
+  font-size: vmin(20);
+  font-weight: 500;
+  background-color: #FFF3EB;
+  color: #FF781F;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.level-member-goods {
+  @include level-member-goods;
+}
+
+// 竖屏pad
+@media screen and (min-width: 768px) and (orientation: portrait) {
+  $deviceWidth: 1536 !global;
+  .level-member-goods {
+    @include level-member-goods;
+  }
+}
+
+// PC 放大适配
+@media screen and (min-height: 630px) and (orientation: landscape) {
+  $deviceWidth: 1260 !global;
+
+  .level-member-goods {
+    @include level-member-goods;
+  }
+}
+
+// 横屏pad
+@media screen and (min-height: 768px) and (orientation: landscape) {
+  $deviceWidth: 1536 !global;
+  .level-member-goods {
+    @include level-member-goods;
+  }
+}

package/src/LevelMemberBar/index.wxml

@@ -0,0 +1,3 @@
+<view wx:if="{{ visibleLevelMemberGoodsDesc }}" catchtap="showMemberGoodsDescModal">
+  <text class="level-member-goods">{{ levelMemberGoodsDesc }}</text>
+</view>

package/src/LevelMemberBar/index.wxss

@@ -0,0 +1 @@
+.level-member-goods{display:inline-block;max-width:30.66667vmin;height:4.26667vmin;padding:0 1.06667vmin;margin:1.06667vmin 0;line-height:4.26667vmin;font-size:2.66667vmin;font-weight:500;background-color:#FFF3EB;color:#FF781F;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media screen and (min-width: 768px) and (orientation: portrait){.level-member-goods{display:inline-block;max-width:14.97396vmin;height:2.08333vmin;padding:0 .52083vmin;margin:.52083vmin 0;line-height:2.08333vmin;font-size:1.30208vmin;font-weight:500;background-color:#FFF3EB;color:#FF781F;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@media screen and (min-height: 630px) and (orientation: landscape){.level-member-goods{display:inline-block;max-width:18.25397vmin;height:2.53968vmin;padding:0 .63492vmin;margin:.63492vmin 0;line-height:2.53968vmin;font-size:1.5873vmin;font-weight:500;background-color:#FFF3EB;color:#FF781F;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}@media screen and (min-height: 768px) and (orientation: landscape){.level-member-goods{display:inline-block;max-width:14.97396vmin;height:2.08333vmin;padding:0 .52083vmin;margin:.52083vmin 0;line-height:2.08333vmin;font-size:1.30208vmin;font-weight:500;background-color:#FFF3EB;color:#FF781F;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}

package/src/LevelMemberBar/utils.js

@@ -0,0 +1,75 @@
+import membershipStore from '../../../../../store/page/common/membership-store.js'
+import liveRoomStore from '../../../../../store/page/common/live-room-store.js'
+
+/**
+ * @description 获取 rank_id => membership 的映射
+ *
+ * @return {Object} 返回映射 Map
+ */
+export const getMembershipMap = () => {
+  return (membershipStore?.data || []).reduce((acc, membership) => {
+    acc[membership.rank_id] = membership
+    return acc
+  }, {})
+}
+
+/**
+ * @description 获取通过等级会员 ID 数组，返回对应字符串
+ * @param {Array} ranks 等级会员 ID 数组
+ * @param {String} symbolText 间隔符号文本
+ *
+ * @return {String} 返回对应格式字符串
+ */
+export const formatMembershipNameStr = (ranks, symbolText= '、') => {
+  const membershipMap = getMembershipMap()
+  return (ranks || []).map(rank_id => membershipMap[rank_id]?.rank_name).filter(Boolean).join(symbolText)
+}
+
+/**
+ * @description 检查是否有购买该【等级会员专属商品】的权益
+ * @param {Object} goodData 商品详情
+ * @param {String} userType 用户角色：student or teacher
+ *
+ * @return {Boolean} 检查结果，true 有，false 没有
+ */
+export const checkCanBuyMemberGood = ({ goodData, userType }) => {
+  // have_constrain 该商品是否开启了等级会员专属商品限制，true 开启，false 关闭
+  // ranks 该商品对应的等级会员专属商品等级列表
+  const { have_constrain, ranks } = goodData || {}
+  const { member_id } = liveRoomStore?.room?.userInfo?.level_member || {}
+
+  // 是专属商品，如果不是专属的会员，则提示
+  if (have_constrain && !ranks?.includes(member_id)) {
+    showMemberGoodsDescModal({ goodData, userType })
+    return false
+  }
+
+  return true
+}
+
+/**
+ * @description 点击等级会员-专属商品标识文本，展示具体内容
+ * @param {Object} goodData 商品详情
+ * @param {String} userType 用户角色：student or teacher
+ */
+export const showMemberGoodsDescModal = ({ goodData, userType }) => {
+  const isStudent = userType === 'student'
+
+  wx.showModal({
+    content: `该商品仅支持【${formatMembershipNameStr(goodData?.ranks)}】购买`,
+    confirmText: isStudent ? '查看权益' : '确认',
+    cancelText: '取消',
+    confirmColor: '#1472FF',
+    success: (res) => {
+      if (!isStudent || !res.confirm) return
+
+      const appId = liveRoomStore?.data?.room?.aliveInfo.app_id
+      const levelMembershipPageUrl = `https://${appId}.h5.xiaoeknow.com/p/t/v1/account-platform/h5_user/level-member/member`
+
+      // 学员 -> 点击查看权益 -> 跳转等级会员权益页面
+      wx.navigateTo({
+        url: `/pages/webviewContainer/index?path=${levelMembershipPageUrl}`,
+      })
+    }
+  })
+}