等级卡背景颜色的优化

yvan.ni
1 parent 1df16535
Showing 6 changed files with 63 additions and 13 deletions
packageE/pages/user/cardinfo/cardinfo.js
packageE/pages/user/cardinfo/cardinfo.wxml
packageE/pages/user/cardinfo/cardinfo.wxss
pages/user/plus/plus.js
pages/user/plus/plus.wxml
pages/user/plus/plus.wxss
@@ -65,11 +65,14 @@ Page({
     //-----------等级卡说明-------------------
     getApp().request.promiseGet("/api/weshop/storeconfig/get/" + os.stoid, {
     }).then(res => {
-      var is_cardrule = res.data.data.cardrules;
-      w.wxParse("content", "html", ut.format_content(is_cardrule), ee, 6);
-      ee.setData({
-        is_card_rule: is_cardrule
-      });
+         var is_cardrule = res.data.data.cardrules;
+         var switch_list = res.data.data.switch_list;
+         var swi_arr = JSON.parse(switch_list);
+          w.wxParse("content", "html", ut.format_content(is_cardrule), ee, 6);
+          ee.setData({
+              is_card_rule: is_cardrule,
+              plus_bg_color: swi_arr.plus_bg_color,
+          });
     })
  
     //----------------------------获取最大的卡类-----------------------
@@ -4,9 +4,13 @@
    <view> 
   <image class="Member_bk" src="{{url}}/miniapp/images/plus/page_bk.png"></image>
 </view>
- <view class="Opening_bk">
-      <image src="{{url}}/miniapp/images/plus/card_bk.png"></image>
-    </view>
+<view class="Opening_bk">
+<!--      <image src="{{url}}/miniapp/images/plus/card_bk.png"></image>-->
+     <view class="rect">
+         <!-- 根据后台来定义一下背景颜色 -->
+         <view class="before" style="{{plus_bg_color?'background-color:'+plus_bg_color:''}}"></view>
+     </view>
+ </view>
  
         <view class="MemberPlus rel"style="background-image:url('{{user_card.CardImg}}');background-size: 100% 100%;background-repead:no-repead;">
  
@@ -220,7 +220,7 @@ align-items:center;
 .fs36{
   font-size: 36rpx; 
 }
-.Opening_bk image {
+.Opening_bk{
   position: absolute;
  
   width: 100%;
@@ -238,4 +238,24 @@ align-items:center;
   border-top-left-radius: 55rpx;  border-bottom-left-radius:55rpx;  }
  .content  .card_list .list .card_name{ max-width: 230rpx}
  
- .price_show .thr{color: #999; text-decoration:line-through }
 \ No newline at end of file
+ .price_show .thr{color: #999; text-decoration:line-through }
+
+
+ /* 定义矩形 */
+ .rect {
+   width: 100%;
+   height: 300rpx;
+   position: relative; /* 要设置位置是因为要设置扇形遮罩的位置 */
+   overflow: hidden;
+ }
+
+ /* 定义扇形遮罩 */
+ .rect .before {
+   width: 140%;
+   height: 300rpx;
+   background-color: #f0ba94;
+   position: absolute; /* 要用绝对定位 */
+   left: -20%;
+   top: -2rpx;
+   border-radius: 0 0 50% 50%; /* 只要顶部两个角是圆弧就好了 */
+ }
 \ No newline at end of file
@@ -111,7 +111,8 @@ Page({
         that.setData({
           is_card_rule: is_cardrule,
           isyaoqingma: parseInt(swi_arr.isyaoqingma),
-          is_salesman: parseInt(swi_arr.is_staffno)
+          is_salesman: parseInt(swi_arr.is_staffno),
+          plus_bg_color: swi_arr.plus_bg_color,
         });
       }
     });
@@ -10,7 +10,10 @@
     <block wx:if="{{is_plusCard}}">
       <view class="Opening_plus">
         <view class="Opening_bk">
-          <image src="{{url}}/miniapp/images/plus/card_bk.png"></image>
+<!--          <image src="{{url}}/miniapp/images/plus/card_bk.png"></image>-->
+           <view class="rect">
+              <view class="before" style="{{plus_bg_color?'background-color:'+plus_bg_color:''}}"></view>
+           </view>
         </view>
         <view class="swiper">
           <!-- 未开通会员swiper-item -->
@@ -58,7 +58,7 @@ page {
   width: 50%;
   text-align: center;
 }
-.Opening_bk image {
+.Opening_bk{
   position: absolute;
   z-index: 2;
   width: 100%;
@@ -404,4 +404,23 @@ margin-top: 10rpx;
  
 swiper-item{
   overflow: visible;
+}
+
+/* 定义矩形 */
+.rect {
+  width: 100%;
+  height: 300rpx;
+  position: relative; /* 要设置位置是因为要设置扇形遮罩的位置 */
+  overflow: hidden;
+}
+
+/* 定义扇形遮罩 */
+.rect .before {
+  width: 140%;
+  height: 300rpx;
+  background-color: #f0ba94;
+  position: absolute; /* 要用绝对定位 */
+  left: -20%;
+  top: -2rpx;
+  border-radius: 0 0 50% 50%; /* 只要顶部两个角是圆弧就好了 */
 }
 \ No newline at end of file