jufubao-base 1.0.312 → 1.0.314

package/src/components/JfbBaseCodeOpenVip/JfbBaseCodeOpenVip.vue

@@ -2,36 +2,142 @@
   <view
     class="jfb-base-code-open-vip"
     @click="handleEditxSelect"
-    :class="{ editx : isEditx && active }"
+    :class="{ editx: isEditx && active }"
   >
     <!--#ifdef H5-->
     <view
       class="jfb-base-code-open-vip__edit"
-      :class="{ editx : isEditx && active }"
+      :class="{ editx: isEditx && active }"
       v-if="isEditx && active"
     >
-      <view class="jfb-base-code-open-vip__edit-icon" @click="delEdit">删除</view>
+      <view class="jfb-base-code-open-vip__edit-icon" @click="delEdit"
+        >删除</view
+      >
     </view>
     <!-- #endif -->
     <view class="jfb-base-code-open-vip__body" :style="[bodyStyle]">
-      <view v-if="step === 1" class="vip_panel">
-        <view class="combo_section">
+      <!-- 用户信息 -->
+      <view class="u_header" :style="[userStyle]">
+        <view class="u_avatar">
+          <image :src="uInfo.head_url" mode="aspectFill"></image>
+        </view>
+        <view class="u_info">
+          <view class="u_info-top">
+            <view class="vip_name">{{ uInfo.show_user_name }}</view>
+            <view v-if="isVip" class="vip_level plus">PLUS会员</view>
+            <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-if="isVip" style="color: #666666"
+              >到期时间：{{ vip_expire_time }}</view
+            >
+            <view v-else style="color: #666666">您暂未开通PLUS会员</view>
+          </view>
+        </view>
+      </view>
+      <!-- plus会员权益 -->
+      <view class="vip_info">
+        <view
+          class="vip_box"
+          :style="{
+            backgroundImage: `url(${bannerBgImg})`,
+          }"
+        ></view>
+      </view>
+      <view class="code">
+        <view class="code_input_wrap">
+          <view class="code_input_item">
+            <input v-model="card_number" class="input" placeholder="请输入票券号" />
+            <XdFontIcon
+              @click="handleScan"
+              class="icon"
+              size="32"
+              color="#BFA07C"
+              icon="iconsaoma"
+            ></XdFontIcon>
+          </view>
+          <view class="code_input_item">
+            <input v-model="card_password" class="input" placeholder="请输入密码" />
+          </view>
+          <view class="code_info" v-if="vipInfo&&openStatus!==false">
+            <view class="code_info_item">
+              <view class="code_info_item_label">套餐名称：</view>
+              <view class="code_info_item_value">{{
+                vipInfo.product_name
+              }}</view>
+            </view>
+            <view class="code_info_item">
+              <view class="code_info_item_label">套餐期限：</view>
+              <view class="code_info_item_value">{{
+                vipInfo.life_cycle_label
+              }}</view>
+            </view>
+            <view class="code_info_item">
+              <view class="code_info_item_label">套餐金额：</view>
+              <view class="code_info_item_value">
+                <XdUnit
+                  fontSize="28"
+                  :iocnSize="0.28"
+                  colorNew="#915714"
+                  :isOld="false"
+                  :price="vipInfo.sale_price"
+                ></XdUnit>
+              </view>
+            </view>
+            <view class="code_info_item">
+              <view class="code_info_item_label">平台优惠：</view>
+              <view class="code_info_item_value">
+                <text>-</text>
+                <XdUnit
+                  fontSize="28"
+                  :iocnSize="0.28"
+                  colorNew="#915714"
+                  :isOld="false"
+                  :price="100"
+                ></XdUnit>
+              </view>
+            </view>
+          </view>
+          <XdButton
+            v-if="vipInfo"
+            fontSize="26"
+            type="primary"
+            color="#F3D2A6"
+            bgColor="#1D1E1D"
+            @click="createVipOrder"
+            >0元开通</XdButton
+          >
+          <XdButton
+            v-else
+            fontSize="26"
+            type="primary"
+            color="#F3D2A6"
+            bgColor="#1D1E1D"
+            @click="searchCode"
+            >立即验证</XdButton
+          >
+        </view>
+        <view v-if="ruleImg" class="rule_box">
+          <image :src="ruleImg" mode="widthFix" />
+        </view>
+        <!-- <view class="combo_section">
           <view class="code_input_wrap">
             <input class="code_input" v-model="exchange_code" placeholder="请输入兑换码"></input>
           </view>
-        </view>
-        <view class="combo_section">
-          <!-- <view class="desc_tit">文案描述</view> -->
-          <view class="desc_cont">
+        </view> -->
+        <!-- <view class="combo_section"> -->
+        <!-- <view class="desc_tit">文案描述</view> -->
+        <!-- <view class="desc_cont">
             <xd-content-xss :html="description"></xd-content-xss>
           </view>
-        </view>
-        <view class="fixed_bottom" :style="fixed_bottom">
+        </view> -->
+        <!-- <view class="fixed_bottom" :style="fixed_bottom">
           <xd-button type="primary" width="600rpx" @click="searchCode">查询</xd-button>
           <view class="plus_privacy">开通视为同意 <text @click.stop="handlePrivacy('privacy_service')">《共享PLUS会员用户协议》</text></view>
-        </view>
+        </view> -->
       </view>
-      <view v-else class="vip_panel">
+      <!-- <view v-else class="vip_panel">
         <view class="combo_section">
           <view class="combo_section-title">兑换码：{{ vipInfo.exchange_code }}</view>
           <xd-list-item label="套餐名称" paddingLR="40rpx">{{ vipInfo.product_name }}</xd-list-item>
@@ -42,210 +148,630 @@
           <xd-button type="primary" width="600rpx" @click="createVipOrder">立即兑换</xd-button>
           <view class="plus_privacy">开通视为同意 <text @click.stop="handlePrivacy('privacy_service')">《共享PLUS会员用户协议》</text></view>
         </view>
-      </view>
+      </view> -->
     </view>
+    <XdDailog
+      class="confirm-dialog"
+      title="提示"
+      :showClose="false"
+      :maskAutoClose="true"
+      :show.sync="showMessage"
+    >
+      <view style="color: #999999">
+        <XdContentXss :html="message"></XdContentXss>
+      </view>
+      <template slot="btn">
+        <view class="confirm-dialog__btn">
+          <XdButton
+            @click="handleCloseMessage"
+            type="primary"
+            size="small"
+            width="500rpx"
+            >确定</XdButton
+          >
+        </view>
+      </template>
+    </XdDailog>
   </view>
 </template>
 
 <script>
-  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
-  import XdListItem from "@/components/CusListItem/CusListItem"
-  import XdButton from "@/components/XdButton/XdButton";
-  import XdContentXss from "@/components/XdContentXss/XdContentXss"
-  import { jfbRootExec } from "@/utils/xd.event";
-  import JfbBaseCodeOpenVipMixin from "./JfbBaseCodeOpenVipMixin";
-  import { getContainerPropsValue } from "@/utils/xd.base";
-  import componentsMixins from "@/mixins/componentsMixins";
-  import extsMixins from "@/mixins/extsMixins";
-  export default {
-    name: "JfbBaseCodeOpenVip",
-    components: {
-      XdFontIcon,
-      XdListItem,
-      XdButton,
-      XdContentXss
-    },
-    mixins: [
-      componentsMixins, extsMixins, JfbBaseCodeOpenVipMixin
-    ],
-    data() {
-      return {
-        closeMask: true,
-        xnamespace: "",
+import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+import XdListItem from "@/components/CusListItem/CusListItem";
+import XdButton from "@/components/XdButton/XdButton";
+import XdContentXss from "@/components/XdContentXss/XdContentXss";
+import XdUnit from "@/components/XdUnit/XdUnit";
+import XdDailog from "@/components/XdDailog/XdDailog";
+import { jfbRootExec } from "@/utils/xd.event";
+import JfbBaseCodeOpenVipMixin from "./JfbBaseCodeOpenVipMixin";
+import { getContainerPropsValue } from "@/utils/xd.base";
+import componentsMixins from "@/mixins/componentsMixins";
+import extsMixins from "@/mixins/extsMixins";
+import getServiceUrl from "@/common/getServiceUrl";
+import { mapState, mapActions } from "vuex";
 
-        exchange_code: "",
-        createStatus: false,
-        step: 1,
-        vipInfo: {},
+export default {
+  name: "JfbBaseCodeOpenVip",
+  components: {
+    XdFontIcon,
+    XdListItem,
+    XdButton,
+    XdContentXss,
+    XdUnit,
+    XdDailog,
+  },
+  mixins: [componentsMixins, extsMixins, JfbBaseCodeOpenVipMixin],
+  data() {
+    return {
+      closeMask: true,
+      xnamespace: "",
 
-        description: "",
-        vipSuccessPath: "",
-        payPath: "",
-      }
+      exchange_code: "",
+      createStatus: false,
+      vipInfo: null,
+
+      description: "",
+      vipSuccessPath: "",
+      // payPath: "",
+      uInfo: {},
+      vip_expire_time: "",
+      userBgImg: "",
+      userBgColor: "",
+      bannerBgImg: "",
+      ruleImg: "",
+      showMessage: false,
+      message: "",
+      main_order_id: "",
+      openStatus: '',
+      card_number: '',
+      card_password: '',
+      card_qrcode: ''
+    };
+  },
+  computed: {
+    ...mapState({
+      jwxSDK: (state) => state.jwxSDK,
+      jfbAuthorize: (state) => state.jfbAuthorize,
+    }),
+    bodyStyle() {
+      return {
+        minHeight: this.layoutInfo.bodyMinHeightRpx + "rpx",
+        "--main-color": this.mainColor,
+      };
     },
-    computed: {
-      bodyStyle(){
-        return {
-          minHeight: this.layoutInfo.bodyMinHeightRpx + 'rpx',
-          '--main-color': this.mainColor,
-        }
-      },
-      fixed_bottom() {
-        return this.fixedStyle({ height: 36, zIndex: 111})
-      },
+    fixed_bottom() {
+      return this.fixedStyle({ height: 36, zIndex: 111 });
+    },
+    userStyle() {
+      return {
+        backgroundImage: `url(${this.userBgImg})`,
+        backgroundColor: this.userBgColor,
+        backgroundRepeat: "no-repeat",
+        backgroundSize: "100% 100%",
+      };
+    },
+    isVip() {
+      return this.uInfo.user_level === "VIP";
+    },
+  },
+  watch: {
+    container(value, oldValue) {
+      if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
+      if (this.$configProject["isPreview"]) this.init(value);
     },
-    watch: {
-      container(value, oldValue) {
-        if (JSON.stringify(value) === JSON.stringify(oldValue)) return;
-        if (this.$configProject['isPreview']) this.init(value)
-      },
+  },
+  created() {
+    this.init(this.container);
+  },
+  methods: {
+    onJfbLoad(options) {
+      if (options["ecode"]) {
+        this.exchange_code = options["ecode"];
+        this.searchCode();
+      }
+      this.p_getBaseUserInfo();
+    },
+    p_getBaseUserInfo() {
+      jfbRootExec("getOpenBaseUserInfo", {
+        vm: this,
+        data: {},
+      }).then((res) => {
+        res = res || {};
+        if (res["head_url"])
+          res["head_url"] = getServiceUrl(res["head_url"], "size2");
+        this.uInfo = res;
+        this.vip_expire_time = this.$xdUniHelper.getDate(
+          res.vip_expire_time * 1000
+        ).fullDate;
+      });
     },
-    created() {
-      this.init(this.container);
 
+    /**
+     * @description 监听事件变化
+     * @param container {object} 业务组件对象自己
+     */
+    init(container) {
+      this.description = getContainerPropsValue(
+        container,
+        "content.description",
+        ""
+      );
+      this.vipSuccessPath = getContainerPropsValue(
+        container,
+        "content.vipSuccessPath",
+        { value: "" }
+      ).value;
+      // this.payPath = getContainerPropsValue(container, "content.payPath", {
+      //   value: "",
+      // }).value;
+      this.userBgImg = getServiceUrl(
+        getContainerPropsValue(container, "content.userBgImg", { url: "" }).url
+      );
+      this.userBgColor = getContainerPropsValue(
+        container,
+        "content.userBgColor",
+        "#FFFFFF"
+      );
+      this.bannerBgImg = getServiceUrl(
+        getContainerPropsValue(container, "content.bannerBgImg", { url: "" })
+          .url
+      );
+      this.ruleImg = getServiceUrl(
+        getContainerPropsValue(container, "content.ruleImg", { url: "" }).url
+      );
     },
-    methods: {
-      onJfbLoad(options) {
-        if(options['ecode']) {
-          this.exchange_code = options['ecode'];
-          this.searchCode();
+
+    /**
+     * @description 扫码绑定
+     */
+    handleScan() {
+      console.log('scanscan');
+      try {
+        //#ifdef H5
+        if (this.jwxSDK !== null) {
+          this.jwxSDK.scanQRCode({
+            needResult: 1,
+            scanType: ["qrCode"],
+            success: (res) => {
+              this.card_qrcode = res.resultStr;
+              this.searchCode();
+            },
+            fail: (error) => {
+              if (typeof error === "string") error = { error: error };
+              if (window["jwxJfbSDKParams"])
+                error = Object.assign(error, window["jwxJfbSDKParams"]);
+              this.$xdLog.setARMSError(error);
+            },
+          });
         }
-      },
-
-      /**
-       * @description 监听事件变化
-       * @param container {object} 业务组件对象自己
-       */
-      init(container) {
-        this.description = getContainerPropsValue(container, 'content.description', "");
-        this.vipSuccessPath = getContainerPropsValue(container, 'content.vipSuccessPath', {value: ""}).value;
-        this.payPath = getContainerPropsValue(container, 'content.payPath', {value: ""}).value;
-      },
-
-      handlePrivacy(code){
-        let params = `page_id=${this.pageAttr["page_id"]}`;
-        params = `${params}&container_id=${this.containerId}${code}`;
-        this.$xdUniHelper.navigateTo({
-          url: `/pages/content/content?${params}`
-        })
-      },
-
-      searchCode(){
-        if(!this.exchange_code) return;
-        this.$xdShowLoading({});
-        jfbRootExec("getExchangeCode", {
-          vm: this,
-          data: {
-            exchange_code: this.exchange_code
-          }
-        }).then(res => {
+        //#endif
+        //#ifdef MP-WEIXIN
+        uni.scanCode({
+          scanType: ["qrCode"],
+          success: (res) => {
+            this.card_qrcode = res.result;
+            console.log(JSON.stringify(res),'二维码成功');
+            this.searchCode()
+          },
+          fail: (error) => {
+            this.$xdLog.setARMSError(error);
+          },
+        });
+        //#endif
+      } catch (err) {
+        console.log(err,'err');
+        
+        this.$xdLog.setARMSError(err);
+      }
+    },
+
+    handlePrivacy(code) {
+      let params = `page_id=${this.pageAttr["page_id"]}`;
+      params = `${params}&container_id=${this.containerId}${code}`;
+      this.$xdUniHelper.navigateTo({
+        url: `/pages/content/content?${params}`,
+      });
+    },
+
+    searchCode() {
+      if (!this.card_number && !this.card_password && !this.card_qrcode) return;
+      console.log('可以扫码');
+      
+      let data = {};
+      if (this.card_number) data.card_number = this.card_number;
+      if (this.card_password) data.card_password = this.card_password;
+      if (this.card_qrcode) data.card_qrcode = this.card_qrcode;
+      console.log(data,'data');
+      
+      this.$xdShowLoading({});
+      jfbRootExec("getExchangeCode", {
+        vm: this,
+        data: data,
+      })
+        .then((res) => {
           this.$xdHideLoading();
-          this.step = 2;
+          this.openStatus = res.status;
+          this.message = res.alert_message;
+          if (res.alert_message) {
+            this.showMessage = true;
+            return
+          }
           this.vipInfo = res;
-        }).catch(e=>{
-          this.$xdHideLoading();
         })
-      },
-
-      createVipOrder(){
-        if(this.createStatus) return
-        this.createStatus = true;
-        this.$xdShowLoading({});
-        jfbRootExec("createVipOrder", {
-          vm: this,
-          data: {
-            business_code: this.xnamespace,
-            product_id: this.vipInfo.product_id,
-            notify_provider_id: this.projectAttr.notify_provider_id,
-            need_pay_price: 0,
-            selected_card_list_json: this.vipInfo.selected_card_list_json
+        .catch((e) => {
+          console.log(e,'扫码失败');
+          this.$xdHideLoading();
+        });
+     
+    },
+
+    createVipOrder() {
+      if (this.createStatus) return;
+      this.createStatus = true;
+      this.$xdShowLoading({});
+      jfbRootExec("createVipOrder", {
+        vm: this,
+        data: {
+          business_code: this.xnamespace,
+          notify_provider_id: this.projectAttr.notify_provider_id,
+          need_pay_price: 0,
+          card_number: this.card_number,
+          card_password: this.card_password,
+          card_qrcode: this.card_qrcode,
+        },
+      })
+        .then((res) => {
+          this.createStatus = false;
+          this.openStatus = res.status;
+          this.main_order_id = res.main_order_id
+          if (res.alert_message) {
+            this.message = res.alert_message;
+            this.showMessage = true;
+            this.$xdHideLoading();
+            return
           }
+          this.$xdHideLoading();
+          // if (res.need_pay_price > 0) {
+          //   this.$xdUniHelper.redirectTo({
+          //     url:
+          //       this.payPath +
+          //       `?order_id=${res.pay_order_id}&main_order_id=${res.main_order_id}`,
+          //   });
+          // } else {
+          //   this.$xdUniHelper.redirectTo({
+          //     url: this.vipSuccessPath + `?order_id=${res.main_order_id}`,
+          //   });
+          // }
         })
-          .then(res => {
-            this.createStatus = false;
-            this.$xdHideLoading();
-            if(res.need_pay_price > 0){
-              this.$xdUniHelper.redirectTo({
-                url: this.payPath + `?order_id=${res.pay_order_id}&main_order_id=${res.main_order_id}`
-              })
-            }
-            else{
-              this.$xdUniHelper.redirectTo({
-                url: this.vipSuccessPath + `?order_id=${res.main_order_id}`
-              })
-            }
-          })
-          .catch(err=>{
-            this.createStatus = false;
-            this.$xdHideLoading();
-          })
-      },
+        .catch((err) => {
+          this.createStatus = false;
+          this.$xdHideLoading();
+        });
+    },
+    handleCloseMessage() {
+      this.showMessage = false;
+      if (!this.openStatus) {
+        return;
+      }
+      this.$xdUniHelper.redirectTo({
+        url: this.vipSuccessPath + `?order_id=${this.main_order_id}`,
+      });
     }
-  }
-
+  },
+};
 </script>
 
 <style scoped lang="less">
-  @import "./JfbBaseCodeOpenVipLess.less";
+@import "./JfbBaseCodeOpenVipLess.less";
 
-  .jfb-base-code-open-vip {
-    &__body{
-      .combo_section{
-        border-radius: 24rpx;
+.jfb-base-code-open-vip {
+  &__body {
+    .u_header {
+      display: flex;
+      align-items: center;
+      padding: 24rpx 40rpx;
+      margin-bottom: 20rpx;
+
+      .u_avatar {
+        width: 120rpx;
+        height: 120rpx;
+        border-radius: 120rpx;
+        margin-right: 24rpx;
         overflow: hidden;
-        margin: 20rpx;
-        background-color: #FFFFFF;
-        &-title{
-          height: 72rpx;
-          line-height: 72rpx;
-          text-align: center;
-          background: linear-gradient(90deg, #FCD083 0%, #FFDEAD 100%);
+        image {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      .u_info {
+        flex: 1;
+        &-top {
+          display: flex;
+          align-items: center;
+          .vip_name {
+            font-size: 28rpx;
+            color: #333333;
+          }
+          .vip_level {
+            padding: 4rpx 16rpx;
+            border-radius: 24rpx;
+            font-size: 24rpx;
+            background-color: #ffe6c4;
+            color: #615850;
+            margin-left: 8rpx;
+            &.plus {
+              background: linear-gradient(180deg, #615243 0%, #2d2824 100%);
+              color: #ffefd7;
+            }
+          }
+        }
+        .u_sub {
+          margin-top: 24rpx;
+          font-size: 24rpx;
+        }
+      }
+      .buy_btn {
+        width: 146rpx;
+        height: 60rpx;
+        background-color: var(--main-color);
+        color: #fff;
+        border-radius: 60rpx;
+        line-height: 60rpx;
+        text-align: center;
+        font-size: 24rpx;
+      }
+    }
+    .code {
+      padding: 24rpx;
+      background: #fff;
+      &_input_wrap {
+        background: linear-gradient(
+            180deg,
+            rgba(251, 233, 208, 1) 0%,
+            rgba(246, 217, 183, 1) 100%
+          ),
+          linear-gradient(
+            180deg,
+            rgba(248, 223, 193, 1) 0%,
+            rgba(232, 186, 133, 1) 100%
+          );
+        border-radius: 32rpx;
+        padding: 48rpx 64rpx;
+      }
+      &_input_item {
+        margin-bottom: 24rpx;
+        position: relative;
+        .icon {
+          position: absolute;
+          right: 28rpx;
+          top: 50%;
+          transform: translate(0, -50%);
+          z-index: 3000;
+        }
+        & > .input {
+          background: #fff3e6;
+          border: 2rpx solid #bfa07c;
+          border-radius: 12rpx;
+          padding: 16rpx 24rpx;
           font-size: 28rpx;
-          color: #915714;
-          font-weight: 500;
         }
-        ::v-deep .my-list_value{
-          color: #999999;
+        & > .input ::v-deep .uni-input-placeholder {
+          color: #bfa07c !important;
         }
-        .desc_tit{
-          height: 72rpx;
-          line-height: 72rpx;
-          text-align: center;
+      }
+      &_info {
+        background: #fff3e6;
+        border-radius: 16rpx;
+        padding: 16rpx;
+        margin-bottom: 40rpx;
+        font-size: 28rpx;
+        &_item {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          margin-bottom: 16rpx;
+          &_label {
+            color: #bfa07c;
+          }
+          &_value {
+            color: #915714;
+            display: flex;
+            align-items: center;
+          }
         }
-        .desc_cont{
-          padding: 24rpx;
+        &_item:last-child {
+          margin-bottom: 0;
         }
-        .code_input_wrap{
-          width: 100%;
-          padding: 36rpx;
-          box-sizing: border-box;
+      }
+    }
+    .rule_box {
+      width: 710rpx;
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+    }
+    .vip_info {
+      // padding: 20rpx;
+      margin-bottom: 20rpx;
+      background: #fff;
+      .vip_box {
+        width: 710rpx;
+        height: 340rpx;
+        margin: auto;
+        border-radius: 32rpx;
+        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;
+
+        &-left {
+          font-size: 24rpx;
+          font-weight: 400;
+          color: #ffffff;
+          display: flex;
+          align-self: stretch;
+          flex-direction: column;
+          justify-content: space-between;
         }
-        .code_input{
-          width: 100%;
-          height: 90rpx;
-          background-color: #FAFAFA;
-          box-sizing: border-box;
-          padding: 0 36rpx;
-          border-radius: 16rpx;
+        &-title {
+          font-size: 32rpx;
+          font-weight: bold;
+        }
+        .vip_logo {
+          width: 104rpx;
+          height: 104rpx;
+          image {
+            width: 100%;
+            height: 100%;
+          }
         }
       }
-      .fixed_bottom{
-        position: fixed;
-        bottom: 0;
-        left: 0;
+
+      .vip_banner {
+        display: flex;
+        padding: 16rpx;
+        margin: 20rpx 0;
+        justify-content: space-around;
+        .banner_item {
+          display: flex;
+          align-items: center;
+          flex-direction: column;
+          .banner_img {
+            width: 108rpx;
+            height: 108rpx;
+            border-radius: 108rpx;
+            // background-color: #EBB963;
+          }
+          .banner_text {
+            color: #333333;
+            font-size: 24rpx;
+            font-weight: 500;
+            margin-top: 16rpx;
+          }
+        }
+      }
+
+      .vip_good {
+        background-color: #ffffff;
+        border-radius: 24rpx;
+        overflow: hidden;
+        &-title {
+          height: 110rpx;
+          line-height: 110rpx;
+          font-size: 36rpx;
+          font-weight: 500;
+          text-align: center;
+          color: #000000;
+          border-bottom: 1px solid #fafafa;
+          position: relative;
+          .line {
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+            width: 280rpx;
+            height: 1px;
+            background-color: #000000;
+          }
+          ._text {
+            position: relative;
+            z-index: 10;
+            background-color: #fff;
+            padding: 0 24rpx;
+          }
+        }
+        .good_item {
+          padding: 32rpx 46rpx;
+          border-bottom: 1px solid #fafafa;
+          &:last-child {
+            border-bottom: none;
+          }
+          .good_title {
+            display: flex;
+            align-items: center;
+            font-size: 28rpx;
+            font-weight: 500;
+            color: #666666;
+
+            &-tag {
+              padding: 8rpx 16rpx;
+              border-radius: 8rpx;
+              font-size: 22rpx;
+              line-height: 1;
+              background: linear-gradient(90deg, #fcd083 0%, #ffdead 100%);
+              color: #915714;
+              margin-right: 16rpx;
+            }
+          }
+          .good_cont {
+            font-size: 28rpx;
+            color: #bbbbbb;
+            font-size: 400;
+            margin-top: 16rpx;
+          }
+        }
+      }
+    }
+    .combo_section {
+      border-radius: 24rpx;
+      overflow: hidden;
+      margin: 20rpx;
+      background-color: #ffffff;
+      &-title {
+        height: 72rpx;
+        line-height: 72rpx;
+        text-align: center;
+        background: linear-gradient(90deg, #fcd083 0%, #ffdead 100%);
+        font-size: 28rpx;
+        color: #915714;
+        font-weight: 500;
+      }
+      ::v-deep .my-list_value {
+        color: #999999;
+      }
+      .desc_tit {
+        height: 72rpx;
+        line-height: 72rpx;
+        text-align: center;
+      }
+      .desc_cont {
+        padding: 24rpx;
+      }
+      .code_input_wrap {
         width: 100%;
         padding: 36rpx;
         box-sizing: border-box;
-        background-color: #FFFFFF;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        .plus_privacy{
-          font-size: 22rpx;
-          color: #999;
-          margin-top: 16rpx;
-        }
+      }
+      .code_input {
+        width: 100%;
+        height: 90rpx;
+        background-color: #fafafa;
+        box-sizing: border-box;
+        padding: 0 36rpx;
+        border-radius: 16rpx;
+      }
+    }
+    .fixed_bottom {
+      position: fixed;
+      bottom: 0;
+      left: 0;
+      width: 100%;
+      padding: 36rpx;
+      box-sizing: border-box;
+      background-color: #ffffff;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      .plus_privacy {
+        font-size: 22rpx;
+        color: #999;
+        margin-top: 16rpx;
       }
     }
   }
+}
 </style>