jufubao-base 1.0.268 → 1.0.269-beta1

package/src/components/JfbBasePoster/JfbBasePoster.vue

@@ -39,62 +39,100 @@
               <image :src="item.image_url" mode="widthFix" ></image>
             </view>
           </view>
-          <view
-            v-else
-            class="jfb-base-poster__one carousel"
-            :style="{
-              width: getOneWidth + 'rpx',
-              height: getOneHeight + 'rpx',
-              borderRadius: (posterType === '1' ? radius: 0) + 'rpx',
-            }"
-          >
-            <xd-swiper-dot
-              :style="{width: getOneWidth + 'rpx', height: getOneHeight + 'rpx'}"
-              v-if="pageSwiperShow"
-              :current="current"
-              :info="info"
-              field="content_name"
-              :mode="mode"
-              :dots-styles="dotStyleData"
-            >
-              <!--#ifdef MP-WEIXIN-->
-              <swiper
-                class="swiper xd-swiper-content"
+          <template v-else>
+            <view v-if="nearbyMargin === 'Y'">
+              <xd-swiper-dot
                 :style="{width: getOneWidth + 'rpx', height: getOneHeight + 'rpx'}"
-                :indicator-dots="false"
-                :autoplay="carouselTime>0"
-                :interval="carouselTime"
-                :duration="500"
+                v-if="pageSwiperShow"
                 :current="current"
-                circular
-                @animationfinish="handleAnimationfinish"
-                @change="handleChange"
+                :info="info"
+                field="content_name"
+                :mode="mode"
+                :dots-styles="dotStyleData"
               >
-                <swiper-item v-for="(item,index) in info" :key="index" @click.stop="handleClick(item,index)">
-                  <image :style="{width: getOneWidth + 'rpx', height: getOneHeight + 'rpx'}" :src="item['image_url']" mode="widthFix"></image>
-                </swiper-item>
-              </swiper>
-              <!--#endif-->
-              <!--#ifdef H5-->
-              <xd-swiper
-                :indicator-dots="false"
-                :list="info"
+                <swiper
+                  v-if="nearbyMargin === 'Y'"
+                  class="swiper xd-swiper-content"
+                  :style="{width: getOneWidth + 'rpx', height: getOneHeight + 'rpx'}"
+                  :indicator-dots="false"
+                  :autoplay="carouselTime>0"
+                  :interval="carouselTime"
+                  :duration="500"
+                  :current="current"
+                  circular
+                  :previous-margin="nearbyMarginWidth"
+                  :next-margin="nearbyMarginWidth"
+                  @animationfinish="handleAnimationfinish"
+                  @change="handleChange"
+                >
+                  <swiper-item v-for="(item,index) in info" :key="index" @click.stop="handleClick(item,index)">
+                    <image class="swiper_img" :class="{current: current==index}"
+                      style="width: 100%;height: 100%;"
+                      :style="{borderRadius: radius + 'rpx'}"
+                      :src="item['image_url']"
+                    ></image>
+                  </swiper-item>
+                </swiper>
+              </xd-swiper-dot>
+
+            </view>
+            <view
+              v-else
+              class="jfb-base-poster__one carousel"
+              :style="{
+                width: getOneWidth + 'rpx',
+                height: getOneHeight + 'rpx',
+                borderRadius: (posterType === '1' ? radius: 0) + 'rpx',
+              }"
+            >
+              <xd-swiper-dot
+                :style="{width: getOneWidth + 'rpx', height: getOneHeight + 'rpx'}"
+                v-if="pageSwiperShow"
                 :current="current"
-                :width=" getOneWidth + 'rpx'"
-                :height="getOneHeight + 'rpx'"
-                :interval="carouselTime"
-                @onClickItem="handleClick"
-                @change="handleChange"
-                @animationfinish="handleAnimationfinish"
+                :info="info"
+                field="content_name"
+                :mode="mode"
+                :dots-styles="dotStyleData"
               >
-                <template slot-scope="{ item, index}">
-                  <image :src="item['image_url']" mode="widthFix"></image>
-                </template>
-              </xd-swiper>
-              <!--#endif-->
-            </xd-swiper-dot>
-            <view v-if="isPreview" class="carousel-mask"></view>
-          </view>
+                <!--#ifdef MP-WEIXIN-->
+                <swiper
+                  class="swiper xd-swiper-content"
+                  :style="{width: getOneWidth + 'rpx', height: getOneHeight + 'rpx'}"
+                  :indicator-dots="false"
+                  :autoplay="carouselTime>0"
+                  :interval="carouselTime"
+                  :duration="500"
+                  :current="current"
+                  circular
+                  @animationfinish="handleAnimationfinish"
+                  @change="handleChange"
+                >
+                  <swiper-item v-for="(item,index) in info" :key="index" @click.stop="handleClick(item,index)">
+                    <image :style="{width: getOneWidth + 'rpx', height: getOneHeight + 'rpx'}" :src="item['image_url']" mode="widthFix"></image>
+                  </swiper-item>
+                </swiper>
+                <!--#endif-->
+                <!--#ifdef H5-->
+                <xd-swiper
+                  :indicator-dots="false"
+                  :list="info"
+                  :current="current"
+                  :width=" getOneWidth + 'rpx'"
+                  :height="getOneHeight + 'rpx'"
+                  :interval="carouselTime"
+                  @onClickItem="handleClick"
+                  @change="handleChange"
+                  @animationfinish="handleAnimationfinish"
+                >
+                  <template slot-scope="{ item, index}">
+                    <image :src="item['image_url']" mode="widthFix"></image>
+                  </template>
+                </xd-swiper>
+                <!--#endif-->
+              </xd-swiper-dot>
+              <view v-if="isPreview" class="carousel-mask"></view>
+            </view>
+          </template>
         </template>
         <!--一分屏-->
         <!--多分屏-->
@@ -142,7 +180,8 @@
     mixins: [componentsMixins,extsMixins,JfbBasePosterMixin,posterMixins],
     data() {
       return {
-        selfMask: false,
+        //hideMask: true,
+        //selfMask: false,
         pageSwiperShow:false,
         params: {},
 
@@ -150,6 +189,7 @@
         mode:'round', //default 、round 、nav 、dot, indexes
         current: 0,
 				poster: null,
+        nearbyMargin: "N",
         posterPosition: null,
         posterType: '1',//分屏模式
 				showType: '', //广告显示方式
@@ -189,6 +229,9 @@
         })
         return image
       },
+      nearbyMarginWidth(){
+        return this.nearbyMargin === 'Y' ? '80rpx': '0';
+      },
       getOneWidth(){
         let margin = this.checkValue(this.mS.left, 0) +  this.checkValue(this.mS.right, 0);
         let padding = this.checkValue(this.bgImagePadding.left, 20) +  this.checkValue(this.bgImagePadding.right, 20);
@@ -512,6 +555,7 @@
         this.carouselTime = Number(getContainerPropsValue(container, 'content.carouselTime', 5)) * 1000;
         this.useNumber = getContainerPropsValue(container, 'content.number', 1);
         this.bgColor = getContainerPropsValue(container, 'content.bgColor', 'rgba(0,0,0,0)')
+        this.nearbyMargin = getContainerPropsValue(container, 'content.nearbyMargin', 'N');
 
         if(this.poster.size) {
           this.width = this.poster.size.width;
@@ -609,6 +653,14 @@
         display: flex;
       }
 
+      .swiper_img{
+        transform: scale(0.95);
+        transition: all 0.5s;
+        &.current{
+          transform: scale(1);
+        }
+      }
+
     }
 		&__one.notCarousel {
 			position: relative;

package/src/components/JfbBaseUserInfo/Attr.js

@@ -47,6 +47,86 @@ export default {
           {label: '普通用户样式', value: 'N'},
         ]
       },
+      data['is_plus_site']==='Y'&&{
+        label: "PLUS会员用户盒子背景图片:",
+        ele: 'xd-upload',
+        valueKey: 'plusBgImg',
+        value: data.plusBgImg || null, //v-model
+        defaultValue: data.plusBgImg || null, //默认图片对象
+        groupKey: "content",
+        slot: true, //按钮是否使用slot
+        oneWidth: 445/2, //单个图片显示宽度
+        oneHeight: 225/2, //单个图片显示高度
+        elinputClassName: 'input40',
+        tipsformet: '上传文件格式：@imageType@，不超过@size@MB.',
+        type: ['jpg', 'png', 'jpeg'],
+        styleType: 'one', //其值：one=>单文件上传 auth=>证件正反面上传 list=>多文件上传
+        uploadType: 'aliyun', //''=>API服务上传  qiniu=>七牛云OSS上传  aliyun=> 阿里云OSS上传
+        size: 5, //5M
+        action: 'aliyun',
+        sort: true, //当上传图片列表时候，是否启用排序
+        maxlen: 100, //当上传图片列表时候，最大数量数量
+      },
+      data['is_plus_site']==='Y'&&{
+        label: "PLUS会员页面背景图片:",
+        ele: 'xd-upload',
+        valueKey: 'plusPageBgImg',
+        value: data.plusPageBgImg || null, //v-model
+        defaultValue: data.plusPageBgImg || null, //默认图片对象
+        groupKey: "content",
+        slot: true, //按钮是否使用slot
+        oneWidth: 445/2, //单个图片显示宽度
+        oneHeight: 225/2, //单个图片显示高度
+        elinputClassName: 'input40',
+        tipsformet: '上传文件格式：@imageType@，不超过@size@MB.',
+        type: ['jpg', 'png', 'jpeg'],
+        styleType: 'one', //其值：one=>单文件上传 auth=>证件正反面上传 list=>多文件上传
+        uploadType: 'aliyun', //''=>API服务上传  qiniu=>七牛云OSS上传  aliyun=> 阿里云OSS上传
+        size: 5, //5M
+        action: 'aliyun',
+        sort: true, //当上传图片列表时候，是否启用排序
+        maxlen: 100, //当上传图片列表时候，最大数量数量
+      },
+      data['is_plus_site']==='Y'&&{
+        label: "PLUS普通用户盒子背景图片:",
+        ele: 'xd-upload',
+        valueKey: 'normalBgImg',
+        value: data.normalBgImg || null, //v-model
+        defaultValue: data.normalBgImg || null, //默认图片对象
+        groupKey: "content",
+        slot: true, //按钮是否使用slot
+        oneWidth: 445/2, //单个图片显示宽度
+        oneHeight: 225/2, //单个图片显示高度
+        elinputClassName: 'input40',
+        tipsformet: '上传格式:@imageType@不超过@size@MB.',
+        type: ['jpg', 'png', 'jpeg'],
+        styleType: 'one', //其值：one=>单文件上传 auth=>证件正反面上传 list=>多文件上传
+        uploadType: 'aliyun', //''=>API服务上传  qiniu=>七牛云OSS上传  aliyun=> 阿里云OSS上传
+        size: 5, //5M
+        action: 'aliyun',
+        sort: true, //当上传图片列表时候，是否启用排序
+        maxlen: 100, //当上传图片列表
+      },
+      data['is_plus_site']==='Y'&&{
+        label: "PLUS普通用户页面背景图片:",
+        ele: 'xd-upload',
+        valueKey: 'normalPageBgImg',
+        value: data.normalPageBgImg || null, //v-model
+        defaultValue: data.normalPageBgImg || null, //默认图片对象
+        groupKey: "content",
+        slot: true, //按钮是否使用slot
+        oneWidth: 445/2, //单个图片显示宽度
+        oneHeight: 225/2, //单个图片显示高度
+        elinputClassName: 'input40',
+        tipsformet: '上传格式:@imageType@不超过@size@MB.',
+        type: ['jpg', 'png', 'jpeg'],
+        styleType: 'one', //其值：one=>单文件上传 auth=>证件正反面上传 list=>多文件上传
+        uploadType: 'aliyun', //''=>API服务上传  qiniu=>七牛云OSS上传  aliyun=> 阿里云OSS上传
+        size: 5, //5M
+        action: 'aliyun',
+        sort: true, //当上传图片列表时候，是否启用排序
+        maxlen: 100, //当上传图片列表
+      },
       data['is_plus_site']==='N'&&{
         label: '内容排版:',
         ele: 'xd-radio',

package/src/components/JfbBaseUserInfo/JfbBaseUserInfo.vue

@@ -24,7 +24,15 @@
                   <view v-if="is_vip==='Y'"><text>PLUS</text>会员</view>
                   <view v-else>普通用户</view>
                 </view>
-                <view>{{userInfo.phone_number}}</view>
+                <view>
+                  <view v-if="is_vip==='Y'">
+                    <text style="color:#D19E6B;">已省</text><text style="color: #FEE9CC;">￥30.00</text>
+                  </view>
+                  <view v-else>
+                    <text style="color:#CCCCCC;">开通会员预计可省</text>
+                    <text style="color:#FFFFFF;">￥49.00</text>
+                  </view>
+                </view>
               </view>
             </view>
             <view @click="handleToCode" class="jfb-base-user-info__body-plus-header-right">
@@ -33,11 +41,20 @@
           </view>
           <view :style="[boxPlusStyleCompBottom]" :class="is_vip==='Y'?'is_vip_bottom':'is_normal_bottom'"
             class="jfb-base-user-info__body-plus-header-bottom">
-            <view v-if="is_vip==='Y'">点击查看更多会员权益</view>
-            <view v-else>开通 <span :style="{color:mainColor}">PLUS会员</span>享受更多内容</view>
-            <view v-if="is_vip==='Y'" @click="handleToView">立即查看</view>
-            <view v-else @click="handleToOpen">立即开通</view>
+            <view class="_left">
+              <view v-if="is_vip==='Y'">有效期至：2025年10月01日</view>
+              <view v-else></view>
+            </view>
+            <view class="_right">
+              <view v-if="is_vip==='Y'" @click="handleToView">
+                <!-- 立即续费 -->
+              </view>
+              <view v-else @click="handleToOpen">
+                <!-- 立即开通 -->
+              </view>
+            </view>
           </view>
+          <view class="market_data"></view>
         </view>
       </view>
       <view v-else>
@@ -161,20 +178,21 @@
           padding: this.getMarginAndPadding(this.padding, 0),
           boxShadow: shadow,
           border: border,
+          backgroundImage: this.is_vip === 'Y' ?  `url(${this.plusBgImg})` : `url(${this.normalBgImg})`,
         }
       },
 
       boxPlusStyleCompTop() {
         return {
           borderRadius: `${this.radius + 'rpx'} ${this.radius + 'rpx'} 0 0`,
-          background: this.is_vip === 'Y' ? this.plusTopBackgroundColor : this.normalTopBackgroundColor
+          // background: this.is_vip === 'Y' ? this.plusTopBackgroundColor : this.normalTopBackgroundColor
         }
       },
 
       boxPlusStyleCompBottom() {
         return {
           borderRadius: `0 0 ${this.radius + 'rpx'} ${this.radius + 'rpx'}`,
-          background: this.is_vip === 'Y' ? this.plusBottomBackgroundColor : this.normalBottomBackgroundColor
+          // background: this.is_vip === 'Y' ? this.plusBottomBackgroundColor : this.normalBottomBackgroundColor
         }
       },
 
@@ -282,7 +300,12 @@
         normalTopBackgroundColor: '',
         normalBottomBackgroundColor: '',
         codePath: '',
-        profilePath: ''
+        profilePath: '',
+
+        plusBgImg: "",
+        plusPageBgImg: "",
+        normalBgImg: "",
+        normalPageBgImg: "",
       }
     },
     watch: {
@@ -403,6 +426,10 @@
         this.rightContentPadding = getContainerPropsValue(container, 'content.rightContentPadding', {});
         this.rightContentRadius = getContainerPropsValue(container, 'content.rightContentRadius', 0);
         //plus
+        this.plusBgImg = getServiceUrl(getContainerPropsValue(container, 'content.plusBgImg', { url: ""}).url);
+        this.plusPageBgImg = getServiceUrl(getContainerPropsValue(container, 'content.plusPageBgImg', { url: ""}).url);
+        this.normalBgImg = getServiceUrl(getContainerPropsValue(container, 'content.normalBgImg', { url: ""}).url);
+        this.normalPageBgImg = getServiceUrl(getContainerPropsValue(container, 'content.normalPageBgImg', { url: ""}).url);
         this.is_plus_site = getContainerPropsValue(container, 'content.is_plus_site', 'N');
         this.is_plus_preview = getContainerPropsValue(container, 'content.is_plus_preview', 'N');
         this.plusTopBackgroundColor = getContainerPropsValue(container, 'content.plusTopBackgroundColor', 'linear-gradient(270deg, rgba(250, 211, 140, 1) 0%, rgba(235, 185, 99, 1) 21.19%, rgba(232, 169, 66, 1) 100%)');
@@ -415,6 +442,14 @@
         this.profilePath = getContainerPropsValue(container, 'content.profilePath', { value: "" }).value;
         this.plusNickStyle = getContainerPropsValue(container, 'content.plusNickStyle', {});
         this.normalNickStyle = getContainerPropsValue(container, 'content.normalNickStyle', {});
+
+        if(this.is_plus_site === 'Y'){
+          let bg = this.is_vip === 'Y' ? this.plusPageBgImg : this.normalPageBgImg;
+          if(this.$configProject['isPreview']){
+            bg = this.is_plus_preview === 'Y' ? this.plusPageBgImg : this.normalPageBgImg;
+          }
+          this.$xdRoot.$emit("setLayoutPageBg", bg);
+        }
       },
       handleToPersonal(){
         this.$xdUniHelper.navigateTo({
@@ -529,13 +564,16 @@
       }
 
       &-plus-header {
+        background-size: 100% auto;
+        background-repeat: no-repeat;
+        background-position: 0% 0%;
         .is_normal_top {
           color: #333333;
 
           .jfb-base-user-info__body-plus-header-top-left-info-name {
             &>view:nth-child(2) {
-              color: #615850;
-              background: #FFE6C4;
+              color: #333333;
+              background: #F7E6FF;
             }
           }
         }
@@ -563,6 +601,8 @@
           display: flex;
           justify-content: space-between;
           padding: 40rpx;
+          height: 160rpx;
+          box-sizing: border-box;
 
           &-left {
             display: flex;
@@ -617,7 +657,27 @@
           font-size: 24rpx;
           display: flex;
           justify-content: space-between;
-          padding: 20rpx 40rpx;
+          height: 72rpx;
+          box-sizing: border-box;
+          ._left{
+            display: flex;
+            align-items: center;
+            flex: 1;
+            padding-left: 40rpx;
+            color: rgba(252, 247, 254, 0.8);
+          }
+          ._right{
+            height: 100%;
+            width: 200rpx;
+            & > view{
+              width: 100%;
+              height: 100%;
+            }
+          }
+        }
+
+        .market_data{
+          height: 140rpx;
         }
       }
     }