jufubao-base 1.0.306 → 1.0.307-beta1

package/src/components/JfbBaseCodeOpenVip/Mock.js

@@ -8,6 +8,8 @@ module.exports = {
   
   removeCodeFilmAddress:{},
   
-  addCodeFilmcart:{},
+  addCodeFilmcart: {},
+  getOpenBaseUserInfo: { "user_name": "", "user_code": "Uf4zx6EPfV", "nickname": "未来～", "real_name": "", "head_url": "https:\/\/thirdwx.qlogo.cn\/mmopen\/vi_32\/Q0j4TwGTfTJsajZzh53IB56crRSdmKvRbjT4V1Ha8v5uCOkASbWS0GibgLeic8OKBzAwUyBa3vZGhjwmd6RfpG9g\/132", "province_code": "", "city_code": "", "province_name": "", "city_name": "", "sex": "", "sex_name": "未知", "birthday_date": "", "phone_number": "13611111111", "show_user_name": "未来～", "user_level": "", "vip_expire_time": 1745026677, "request_id": "250e5709e6c95066" },
+
   
 }

package/src/components/JfbBaseConsumpCode/JfbBaseConsumpCode.vue

@@ -197,6 +197,13 @@
         </view>
       </view>
     </view>
+    <CusVipOpenDialog
+      v-if="is_vip==='N'"
+      :bgImg="openVipBgImg"
+      :btnBgImg="openVipBtnBgImg"
+      @onOpen="handleToOpen"
+      @onClose="handleCloseOpenVip"
+    ></CusVipOpenDialog>
   </view>
 </template>
 
@@ -217,7 +224,7 @@
   import componentsMixins from "@/mixins/componentsMixins";
   import extsMixins from "@/mixins/extsMixins";
   import { mapState } from 'vuex';
-
+  import CusVipOpenDialog from "@/components/CusVipOpenDialog/CusVipOpenDialog"
   export default {
     //#ifdef MP-WEIXIN
     options: { styleIsolation: 'shared' },
@@ -229,7 +236,8 @@
       XdButton,
       XdDownDrawer,
       ShopList,
-      XdDeductSort
+      XdDeductSort,
+      CusVipOpenDialog
     },
     mixins: [
       componentsMixins, extsMixins, JfbBaseConsumpCodeMixin, QPMixin, JHDMixin, shopListMixin
@@ -286,7 +294,8 @@
         QPIconType: "",
         QPIcon: "",
         QPImg: "",
-
+        openVipBtnBgImg: "",
+        openVipBgImg: "",
       }
     },
     watch: {
@@ -321,6 +330,9 @@
     created() {
       this.isPreview = this.$configProject['isPreview']
       this.is_vip = this.getTokenForKey('user_level') && this.getTokenForKey('user_level') === 'VIP' ? 'Y' : 'N'
+      if (this.$configProject['isPreview']) {
+        this.is_vip='Y'
+      }
       this.init(this.container);
       // #ifdef H5
       if (!this.$configProject.isPreview && (isWechat() || isWechatTools())) {
@@ -405,7 +417,12 @@
         this.QPIconType = gCPVal(container, 'QPIconType', "icon");
         this.QPIcon = gCPVal(container, 'QPIcon', 'iconerweima');
         this.QPImg = getServiceUrl(gCPVal(container, 'QPImg', {url: ""}).url);
-
+        this.openVipBgImg = getServiceUrl(
+          getContainerPropsValue(container, "content.openVipBgImg", { url: "" }).url,
+        );
+        this.openVipBtnBgImg = getServiceUrl(
+          getContainerPropsValue(container, "content.openVipBtnBgImg", { url: "" }).url
+        );
         console.log("this.scanImg", this.scanImg);
       },
       handleConsumeType(consumeType){
@@ -528,6 +545,9 @@
         if (this.statusTimer) clearTimeout(this.statusTimer);
         if (this.orderTimer) clearTimeout(this.orderTimer);
       },
+      handleCloseOpenVip() {
+        this.$xdUniHelper.navigateBack()
+      },
 
       onJfbUnload(options) {
         console.log('event.onJfbUnload', options)

package/src/components/JfbBaseConsumpCode/cusAttr/advanced.js

@@ -68,7 +68,7 @@ export default (data)=>{
       className: 'input100',
     },
     {
-      label: '选取城市:',
+      label: '选取城市',
       ele: 'xd-select-pages-path',
       valueKey: 'cityPath',
       placeholder: '请选择选取城市跳转页面',

package/src/components/JfbBaseConsumpCode/cusAttr/style.js

@@ -89,6 +89,48 @@ export default function (data={},gValue={},gColor={},oldData) {
       maxlen: 100,
       labelInline: true,
     },
-    {ele: 'group_end'},
+    { ele: 'group_end' },
+    {
+      label: "开通PLUS背景图",
+      ele: 'xd-upload',
+      valueKey: "openVipBgImg",
+      groupKey: "style",
+      labelInline: true,
+      value: data.openVipBgImg || {},
+      defaultValue: data.openVipBgImg || null,
+      slot: true,
+      oneWidth: 355,
+      oneHeight: 355,
+      elinputClassName: 'input40',
+      tipsformet: '上传文件格式：@imageType@，不超过@size@MB.建议宽度为<span style="color:red">710px</span>，高度为<span style="color:red">710px</span>',
+      type: ['jpg', 'png', 'jpeg'],
+      styleType: 'one',
+      uploadType: 'aliyun',
+      size: 5,
+      action: 'action',
+      sort: true,
+      maxlen: 100,
+    },
+    {
+      label: "开通PLUS按钮背景图",
+      ele: 'xd-upload',
+      valueKey: "openVipBtnBgImg",
+      groupKey: "style",
+      labelInline: true,
+      value: data.openVipBtnBgImg || {},
+      defaultValue: data.openVipBtnBgImg || null,
+      slot: true,
+      oneWidth: 223,
+      oneHeight: 44,
+      elinputClassName: 'input40',
+      tipsformet: '上传文件格式：@imageType@，不超过@size@MB.建议宽度为<span style="color:red">446px</span>，宽度为<span style="color:red">88px</span>',
+      type: ['jpg', 'png', 'jpeg'],
+      styleType: 'one',
+      uploadType: 'aliyun',
+      size: 5,
+      action: 'action',
+      sort: true,
+      maxlen: 100,
+    },
   ].filter(i=>i)
 }

package/src/components/JfbBaseOpenVip/Attr.js

@@ -243,6 +243,56 @@ export default {
         inline: false,
         notice: '',
       },
+      {
+        label: "用户信息背景颜色:",
+        ele: "xd-color",
+        valueKey: "userBgColor",
+        value: data.userBgColor || null,
+        groupKey: "style",
+      },
+      {
+        label: "用户信息背景图",
+        ele: 'xd-upload',
+        valueKey: "userBgImg",
+        groupKey: "content",
+        value: data.userBgImg || {},
+        defaultValue: data.userBgImg || null,
+        slot: true,
+        oneWidth: 355,
+        oneHeight: 84,
+        elinputClassName: 'input40',
+        tipsformet: '上传文件格式：@imageType@，不超过@size@MB.建议宽度为<span style="color:red">710px</span>,高度<span style="color:red">196px</span>',
+        type: ['jpg', 'png', 'jpeg'],
+        styleType: 'one',
+        uploadType: 'aliyun',
+        size: 5,
+        action: 'action',
+        sort: true,
+        maxlen: 100,
+      },
+      {
+        label: "激活码开通",
+        ele: 'xd-upload',
+        valueKey: "codeImg",
+        groupKey: "content",
+        value: data.codeImg || {},
+        defaultValue: data.codeImg || null,
+        slot: true,
+        oneWidth: 355,
+        oneHeight: 100,
+        elinputClassName: 'input40',
+        tipsformet: '上传文件格式：@imageType@，不超过@size@MB.建议宽度为<span style="color:red">710px</span>,高度<span style="color:red">200px</span>',
+        type: ['jpg', 'png', 'jpeg'],
+        styleType: 'one',
+        uploadType: 'aliyun',
+        size: 5,
+        action: 'action',
+        sort: true,
+        maxlen: 100,
+        rules: [
+          { required: true, message: '请添加背景图', trigger: 'change' },
+        ],
+      },
       {
         label: "PLUS会员banner背景图",
         ele: 'xd-upload',
@@ -252,9 +302,9 @@ export default {
         defaultValue: data.bannerBgImg || null,
         slot: true,
         oneWidth: 355,
-        oneHeight: 92,
+        oneHeight: 170,
         elinputClassName: 'input40',
-        tipsformet: '上传文件格式：@imageType@，不超过@size@MB.建议宽度为<span style="color:red">710px</span>,高度<span style="color:red">184px</span>',
+        tipsformet: '上传文件格式：@imageType@，不超过@size@MB.建议宽度为<span style="color:red">710px</span>,高度<span style="color:red">340px</span>',
         type: ['jpg', 'png', 'jpeg'],
         styleType: 'one',
         uploadType: 'aliyun',

package/src/components/JfbBaseOpenVip/JfbBaseOpenVip.vue

@@ -15,7 +15,7 @@
     <!-- #endif -->
     <view class="jfb-base-open-vip__body" :style="[bodyStyle]">
       <!-- 用户信息 -->
-      <view class="u_header">
+      <view class="u_header" :style="[userStyle]">
         <view class="u_avatar">
           <image :src="uInfo.head_url" mode="aspectFill"></image>
         </view>
@@ -26,11 +26,12 @@
             <view v-else class="vip_level">普通用户</view>
           </view>
           <view class="u_sub">
-            <view v-if="isVip" style="color:#999999;" @click="handleToDetail">已省{{ $xdUniHelper.divisionFloatNumber(save_amount, 100) }}</view>
-            <view v-else style="color:#333333;">{{ uInfo.phone_number }}</view>
+            <!-- <view v-if="isVip" style="color:#999999;" @click="handleToDetail">已省{{ $xdUniHelper.divisionFloatNumber(save_amount, 100) }}</view> -->
+            <view v-if="isVip" style="color:#666666;">到期时间：{{ vip_expire_time }}</view>
+            <view v-else style="color:#666666;">您暂未开通PLUS会员</view>
           </view>
         </view>
-        <view v-if="isVip" class="buy_btn" @click="showDrawer=true">立即续费</view>
+        <!-- <view v-if="isVip" class="buy_btn" @click="showDrawer=true">立即续费</view> -->
         <!-- <view v-else class="buy_btn" @click="showDrawer=true">立即开通</view> -->
       </view>
 
@@ -39,17 +40,28 @@
         <view class="vip_box" :style="{
           backgroundImage: `url(${bannerBgImg})`,
         }">
-          <view class="vip_box-left">
+          <!-- <view class="vip_box-left">
             <view class="vip_box-title">PLUS会员</view>
             <view v-if="isVip">有效期至：{{ vip_expire_time }}</view>
             <view v-else>开通享受更多权益</view>
-          </view>
+          </view> -->
           <!-- <view class="vip_logo">
             <image :src="siteLogo" mode="aspectFill"></image>
           </view> -->
         </view>
       </view>
-      <view>
+        <xd-vip-list :list="showVipCardList"
+          @handlePrivacy="handlePrivacy"
+          @toVipDetail="toVipDetail"
+          :mainColor="mainColor"
+        ></xd-vip-list>
+        <view>
+        <view v-if="showExchangeCode==='Y'" @click="toVipDetail(-1)" class="vip_code_info">
+          <view class="vip_code_box" :style="{
+            backgroundImage: `url(${codeImg})`,
+          }">
+          </view>
+        </view>
         <image :src="specialImage" mode="widthFix" style="width: 100%;"></image>
         <!--
         <view class="vip_banner">
@@ -74,22 +86,17 @@
           </view>
         </view> -->
       </view>
-      <view :style="{height: '342rpx'}"></view>
-      <view :style="prod_bottom">
-        <xd-vip-list v-if="!isVip" :list="showVipCardList"
-          @handlePrivacy="handlePrivacy"
-          @toVipDetail="toVipDetail"
-        ></xd-vip-list>
-      </view>
+      <!-- <view :style="{height: '342rpx'}"></view> -->
+      <!-- <view :style="prod_bottom"> -->
+      <!-- </view> -->
 
-      <xd-down-drawer :show.sync="showDrawer" height="480rpx">
+      <!-- <xd-down-drawer :show.sync="showDrawer" height="480rpx">
         <view class="drawer_title">立即续费</view>
         <xd-vip-list :list="showVipCardList"
           @handlePrivacy="handlePrivacy"
           @toVipDetail="toVipDetail"
         ></xd-vip-list>
-      </xd-down-drawer>
-
+      </xd-down-drawer> -->
     </view>
   </view>
 </template>
@@ -99,6 +106,7 @@
   import XdButton from "@/components/XdButton/XdButton";
   import XdVipList from "./XdVipList.vue";
   import XdDownDrawer from "@/components/XdDownDrawer/XdDownDrawer.vue"
+  import XdDailog from "@/components/XdDailog/XdDailog";
   import { jfbRootExec } from "@/utils/xd.event";
   import JfbBaseOpenVipMixin from "./JfbBaseOpenVipMixin";
   import { getContainerPropsValue } from "@/utils/xd.base";
@@ -112,7 +120,8 @@
       XdFontIcon,
       XdButton,
       XdVipList,
-      XdDownDrawer
+      XdDownDrawer,
+      XdDailog
     },
     mixins: [
       componentsMixins, extsMixins, JfbBaseOpenVipMixin
@@ -140,6 +149,9 @@
         showExchangeCode: "",
         exchangeCodePath: "",
         moneyDetailPath: "",
+        userBgImg: '',
+        userBgColor: '',
+        codeImg: '',
       }
     },
     computed: {
@@ -153,11 +165,20 @@
         return this.uInfo.user_level === 'VIP';
       },
       showVipCardList(){
-        return this.showExchangeCode === 'Y' ? [this.exchangeCodeVip, ...this.vipCardList] : [...this.vipCardList]
+        // return this.showExchangeCode === 'Y' ? [this.exchangeCodeVip, ...this.vipCardList] : [...this.vipCardList]
+        return [...this.vipCardList]
       },
       prod_bottom() {
         return this.fixedStyle({height: 0, zIndex: 111});
       },
+      userStyle() {
+        return {
+          backgroundImage: `url(${this.userBgImg})`,
+          backgroundColor: this.userBgColor,
+          backgroundRepeat: 'no-repeat',
+          backgroundSize: '100% 100%',
+        }
+      }
     },
     watch: {
       container(value, oldValue) {
@@ -186,7 +207,10 @@
         this.specialImage = getServiceUrl(getContainerPropsValue(container, 'content.specialImage', {url: ""}).url);
         this.exchangeCodePath = getContainerPropsValue(container, 'content.exchangeCodePath', {value: ""}).value;
         this.showExchangeCode = getContainerPropsValue(container, 'content.showExchangeCode', '');
-        this.moneyDetailPath = getContainerPropsValue(container, 'content.moneyDetailPath', {value: ""}).value;
+        this.moneyDetailPath = getContainerPropsValue(container, 'content.moneyDetailPath', { value: "" }).value;
+        this.userBgImg = getServiceUrl(getContainerPropsValue(container, 'content.userBgImg', { url: "" }).url);
+        this.userBgColor = getContainerPropsValue(container, "content.userBgColor", "#FFFFFF");
+        this.codeImg = getServiceUrl(getContainerPropsValue(container, 'content.codeImg', {url: ""}).url);
       },
       p_getBaseUserInfo(){
         jfbRootExec("getOpenBaseUserInfo", {
@@ -274,7 +298,7 @@
         display: flex;
         align-items: center;
         padding: 24rpx 40rpx;
-        margin: 20rpx;
+        margin-bottom: 20rpx;
 
         .u_avatar{
           width: 120rpx;
@@ -326,13 +350,35 @@
         }
       }
 
+      .vip_code_info{
+        margin-bottom: 20rpx;
+        background: #fff;
+        .vip_code_box{
+          width: 710rpx;
+          height: 200rpx;
+          margin: auto;
+          border-radius: 60rpx;
+          background-color: #E8A841;
+          // background: linear-gradient(90deg, #E8A841 0%, #FAD48E 100%);
+          background-size: 100% 100%;
+          background-repeat: no-repeat;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 40rpx;
+          box-sizing: border-box;
+        }
+      }
+
       .vip_info{
         // padding: 20rpx;
+        margin-bottom: 20rpx;
+        background: #fff;
         .vip_box{
           width: 710rpx;
-          height: 184rpx;
+          height: 340rpx;
           margin: auto;
-          border-radius: 24rpx;
+          border-radius: 32rpx;
           background-color: #E8A841;
           // background: linear-gradient(90deg, #E8A841 0%, #FAD48E 100%);
           background-size: 100% 100%;
@@ -379,7 +425,7 @@
               width: 108rpx;
               height: 108rpx;
               border-radius: 108rpx;
-              background-color: #EBB963;
+              // background-color: #EBB963;
             }
             .banner_text{
               color: #333333;

package/src/components/JfbBaseOpenVip/Mock.js

@@ -2,6 +2,6 @@
 
 module.exports = {
   getOpenBaseUserInfo: {"user_name":"","user_code":"Uf4zx6EPfV","nickname":"未来～","real_name":"","head_url":"https:\/\/thirdwx.qlogo.cn\/mmopen\/vi_32\/Q0j4TwGTfTJsajZzh53IB56crRSdmKvRbjT4V1Ha8v5uCOkASbWS0GibgLeic8OKBzAwUyBa3vZGhjwmd6RfpG9g\/132","province_code":"","city_code":"","province_name":"","city_name":"","sex":"","sex_name":"未知","birthday_date":"","phone_number":"13611111111","show_user_name":"未来～","user_level":"","vip_expire_time":1745026677,"request_id":"250e5709e6c95066"},
-  getOpenVipList: {"total_size":3,"next_page_token":"","list":[{"vip_card_id":3,"product_id":60038520,"product_name":"体验卡","sale_price":200,"vip_card_icon":""},{"vip_card_id":2,"product_id":60038519,"product_name":"月卡","sale_price":2678,"vip_card_icon":""},{"vip_card_id":1,"product_id":60038515,"product_name":"测1","sale_price":20085,"vip_card_icon":""}],"request_id":"6b4aef5e06411d8a"},
+  getOpenVipList: {"total_size":3,"next_page_token":"","list":[{"vip_card_id":3,"product_id":60038520,"product_name":"体验卡","sale_price":200,"vip_card_icon":""},{"vip_card_id":2,"product_id":60038519,"product_name":"月卡","sale_price":2678,"vip_card_icon":""},{"vip_card_id":1,"product_id":60038515,"product_name":"测1","sale_price":9999,"vip_card_icon":""}],"request_id":"6b4aef5e06411d8a"},
   getVipMoneySaving: { "save_amount": 100 , "request_id": "6b4aef5e06411d8a" }
 }

package/src/components/JfbBaseOpenVip/XdVipList.vue

@@ -5,29 +5,60 @@
         v-for="item in uiList" :key="item.vip_card_id"
         @click="handleChoseVip(item.vip_card_id)"
       >
-        <view class="vip_name">{{ item.product_name}}</view>
-        <view class="vip_price">￥{{ $xdUniHelper.divisionFloatNumber(item.sale_price, 100) }}</view>
+        <view>
+          <view class="vip_name">{{ item.product_name}}</view>
+          <view class="vip_price"><text>￥</text>{{ $xdUniHelper.divisionFloatNumber(item.sale_price, 100) }}</view>
+        </view>
       </view>
     </view>
     <view class="vip_pay">
-      <view class="pay_btn" @click="toVipDetail">
+      <view class="pay_btn" @click="toVipDetail()">
         <template v-if="vip_card_id===-1">0元开通</template>
         <template v-else>
-          立即支付 ￥{{ $xdUniHelper.divisionFloatNumber(curVipCard.sale_price, 100) }} 
+          ￥{{ $xdUniHelper.divisionFloatNumber(curVipCard.sale_price, 100) }} 确认协议并开通
         </template>
       </view>
-      <view class="vip_tip">开通视为同意<text @click.stop="handlePrivacy('privacy_service')">《共享PLUS会员用户协议》</text></view>
+      <view class="vip_tip">
+        <checkbox-group @change="checkboxChange">
+          <label>
+            <view>
+              <checkbox 
+                :color="mainColor"
+                style="transform:scale(0.6)" 
+                :value="1"/>
+            </view>
+          </label>
+        </checkbox-group>
+        勾选同意<text @click.stop="handlePrivacy('privacy_service')">《共享PLUS会员用户协议》</text>
+      </view>
     </view>
+    <XdDailog 
+        class="confirm-dialog"
+        title="开通确认"
+        :showClose="false" 
+        :maskAutoClose="true" 
+        :show.sync="showConfirm">
+        <view style="color:#999999;font-size: 28rpx;">
+          我已阅读并同意<text @click.stop="handlePrivacy('privacy_service')">《PLUS会员服务协议》</text>
+        </view>
+        <template slot="btn">
+          <view class="confirm-dialog__btn" @click="showConfirm=false">
+            <XdButton @click="toVipDetail(1)" type="primary" size="small" width="500rpx">继续开通</XdButton>
+          </view>
+        </template>
+      </XdDailog>
   </view>
 </template>
 
 <script>
   import XdButton from "@/components/XdButton/XdButton.vue"
   import XdUnit from "@/components/XdUnit/XdUnit.vue"
+  import XdDailog from "@/components/XdDailog/XdDailog.vue"
   export default {
     components: {
       XdButton,
-      XdUnit
+      XdUnit,
+      XdDailog
     },
     props: {
       list: {
@@ -35,6 +66,10 @@
         default(){
           return []
         }
+      },
+      mainColor: {
+        type: String,
+        default: ''
       }
     },
     watch: {
@@ -51,7 +86,9 @@
     data(){
       return {
         uiList: [],
-        vip_card_id: ''
+        vip_card_id: '',
+        isAgree: [],
+        showConfirm: false
       }
     },
     methods: {
@@ -61,7 +98,17 @@
       handleChoseVip(vip_card_id){
         this.vip_card_id = vip_card_id
       },
-      toVipDetail(){
+      checkboxChange(e) {
+        this.isAgree = e.detail.value;
+      },
+      toVipDetail(isAgree) {
+        if (isAgree) {
+          this.isAgree= [isAgree]
+        }
+        if (this.isAgree.length === 0) {
+          this.showConfirm = true
+          return
+        }
         if(this.vip_card_id){
           this.$emit('toVipDetail', this.vip_card_id)
         }
@@ -77,18 +124,20 @@
       width: 100%;
       overflow: auto;
       white-space: nowrap;
-      padding: 32rpx 16rpx;
+      padding: 32rpx 24rpx;
       .vip_item{
-        display: inline-block;
-        width: 160rpx;
-        height: 112rpx;
-        border-radius: 24rpx;
+        display: inline-flex; /* 关键：inline-level 的 flex 容器 */
+        align-items: center;  /* 子元素垂直居中 */
+        justify-content: center; /* 可选：子元素水平居中 */
+        width: 220rpx;
+        height: 266rpx;
+        border-radius: 32rpx;
         text-align: center;
         color: #999999;
         border: 4rpx solid #EEEEEE;
         background-color: #EEEEEE;
         box-sizing: border-box;
-        margin: 0 16rpx;
+        margin-left: 20rpx;
         padding: 20rpx 0;
         line-height: 1;
         font-weight: 500;
@@ -98,16 +147,22 @@
           color: #AB6900;
         }
         .vip_name{
-          font-size: 24rpx;
-          margin-bottom: 12rpx;
+          font-size: 32rpx;
+          margin-bottom: 32rpx;
         }
         .vip_price{
-          font-size: 36rpx;
+          font-size: 60rpx;
+          &>text{
+            font-size: 24rpx;
+          }
         }
       }
+      .vip_item:first-child{
+        margin-left: 0;
+      }
     }
     .vip_pay{
-      padding: 24rpx 0 50rpx;
+      padding: 0 0 24rpx;
       .pay_btn{
         width: 600rpx;
         display: flex;
@@ -118,13 +173,24 @@
         color: #FFFFFF;
         margin: 0 auto;
         border-radius: 80rpx;
+        font-size: 32rpx;
       }
     }
     .vip_tip{
-      text-align: center;
       font-size: 22rpx;
       color: #999999;
       margin-top: 24rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
     }
+    .confirm-dialog ::v-deep .xd-dailog__body-title{
+        font-size: 32rpx;
+        color: #333;
+      }
+      .confirm-dialog__btn{
+        border-top: 2rpx dashed #E5E5E5;
+        padding-top: 28rpx;
+      }
   }
 </style>