Jelajahi Sumber

分享页面样式更新

liuyao 1 tahun lalu
induk
melakukan
2f91d0ba75

+ 4 - 1
package-basic-data/pages/share/share.js

@@ -1,6 +1,9 @@
 // package-basic-data/pages/share/share.js
+const Constants = require('@/utils/Constants.js'); 
+const mixins = require('@/mixins/index.js'); 
+const app = getApp()
 Page({
-
+    mixins: [mixins],
     /**
      * 页面的初始数据
      */

+ 2 - 1
package-basic-data/pages/share/share.json

@@ -1,3 +1,4 @@
 {
-    "usingComponents": {}
+    "usingComponents": {},
+    "navigationBarTitleText": "分享"
 }

+ 115 - 1
package-basic-data/pages/share/share.wxml

@@ -1,2 +1,116 @@
 <!--package-basic-data/pages/share/share.wxml-->
-<text>package-basic-data/pages/share/share.wxml</text>
+<!-- <text>package-basic-data/pages/share/share.wxml</text> -->
+<view class="content">
+  <view class="user-card">
+    <view class="user-card-info">
+      <view class="info-title">
+        <view class="cp-avatar">
+          <image fit="fill" src="{{imageUrl+'/order_billing_detail_01.png'}}"></image>
+        </view>
+        <view class="title-info">
+          <view class="cp-info">沈阳东科软件有限公司<view class="version-card">标准版</view>
+          </view>
+          <view class="user-info">张总经理 | 156 4055 6650</view>
+        </view>
+      </view>
+      <view class="info-item"></view>
+    </view>
+    <view class="integral-info">
+      <view class="integral-item">
+        <view class="item">
+          公司云币:<view class="number">10,000</view>个
+        </view>
+        <view class="item">
+          优惠券:<view class="number">1</view>张
+        </view>
+      </view>
+      <view class="rearmk-view">
+        <view class="title">云币说明:<span class="info">完成签到、分享、邀请可获得云币,云币可完全抵扣续费、购买授权、购买功能包等费用。<span style="color: #3F5CF4;text-decoration:underline;">查看云币具体规则;</span>完成助力可获得优惠券,优惠券有期限请注意使用</span></view>
+      </view>
+    </view>
+    <view class="user-card-backgorund">
+      <image class="scan-image" fit="fill" src="{{imageUrl+'/detail_sale_order.png'}}"></image>
+    </view>
+  </view>
+
+  <view class="activity-card">
+    <view class="activity-title">
+    分享不停歇
+    </view>
+    <view class="card-item">
+      <view class="integral-view">
+        <view class="number">1</view>
+        <view>云币</view>
+      </view>
+      <view class="title-view">
+        <view>分享好友,即得云币</view>
+      </view>
+      <view class="button-view">
+        <van-button customStyle="background-color: #EBC07F;border-radius:50rpx;color:#ffffff;">
+          <view style="display: flex;justify-content: center;align-content: center;justify-items: center;align-items: center;font-size: 25rpx;">立即分享
+            <view style="display: flex;justify-content: center;align-content: center;align-items:center;background: #ECD1A7;border-radius: 50%;width: 15px;height: 15px;margin-left: 10rpx;">
+              <van-icon name="arrow" />
+            </view>
+          </view>
+        </van-button>
+        <view class="remark">今日剩余3次</view>
+      </view>
+    </view>
+  </view>
+  <view class="activity-card">
+    <view class="card-item">
+      <view class="discount-view">
+        <view class="number">5</view>
+        <view>折</view>
+      </view>
+      <view class="title-view">
+        <view>好友助力,得优惠券,购买更便宜</view>
+      </view>
+      <view class="button-view">
+        <van-button customStyle="background-color: #EBC07F;border-radius:50rpx;color:#ffffff;">
+          <view style="display: flex;justify-content: center;align-content: center;justify-items: center;align-items: center;font-size: 25rpx;">立即助力
+            <view style="display: flex;justify-content: center;align-content: center;align-items:center;background: #ECD1A7;border-radius: 50%;width: 15px;height: 15px;margin-left: 10rpx;">
+              <van-icon name="arrow" />
+            </view>
+          </view>
+        </van-button>
+        <view class="remark">
+          <view class="time-view">
+            <view class="time">07</view>
+            <view class="time">59</view>
+            <view class="time">33</view>
+          </view>后失效
+        </view>
+      </view>
+    </view>
+  </view>
+
+  <view class="activity-card">
+    <view class="card-item">
+      <view class="integral-view">
+        <view class="number">100</view>
+        <view>云币</view>
+      </view>
+      <view class="title-view">
+        <view>邀请好友使用,互利共赢,一起得云币!</view>
+      </view>
+      <view class="button-view">
+        <van-button customStyle="background-color: #EBC07F;border-radius:50rpx;color:#ffffff;">
+          <view style="display: flex;justify-content: center;align-content: center;justify-items: center;align-items: center;font-size: 25rpx;">立即邀请
+            <view style="display: flex;justify-content: center;align-content: center;align-items:center;background: #ECD1A7;border-radius: 50%;width: 15px;height: 15px;margin-left: 10rpx;">
+              <van-icon name="arrow" />
+            </view>
+          </view>
+        </van-button>
+        <view class="remark">
+          <view class="time-view">
+            <view class="time">07</view>
+            <view class="time">59</view>
+            <view class="time">33</view>
+          </view>后失效
+        </view>
+      </view>
+    </view>
+  </view>
+
+</view>

+ 236 - 1
package-basic-data/pages/share/share.wxss

@@ -1 +1,236 @@
-/* package-basic-data/pages/share/share.wxss */
+/* package-basic-data/pages/share/share.wxss */
+page {
+  background: #F8F9FD;
+}
+.content{
+  padding: 20rpx 10px 0rpx 10px;
+}
+
+.user-card{
+  width: auto;
+  border: 1px solid #F3FBFF;
+  padding: 50rpx 35rpx 0rpx 35rpx;
+  border-radius: 30rpx;
+  background-color: #FFFF;
+  background: radial-gradient(65.52% 61.17% at 6.12% 18.49%, #CDD8FF 0%, #F3FAFF 100%);
+}
+
+.user-card-backgorund{
+  width: auto;
+  position: relative;
+  bottom: 0;
+}
+
+.user-card-backgorund .scan-image{
+  width: 200rpx;
+  height: 200rpx;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+}
+
+.user-card-info{
+  width: 100%;
+  display: flex;
+}
+
+.user-card-info .info-title{
+  width: 100%;
+  display: flex;
+}
+
+.user-card-info .title-info .cp-info{
+  display: flex;
+  font-size: 35rpx;
+  justify-content: center;
+  align-items: center;
+}
+
+.user-card-info .info-title .version-card{
+  font-weight: 500;
+  font-size: 20rpx;
+  height: 2vh;
+  align-items: center;
+  display: flex;
+  border-top-left-radius: 20rpx;
+  border-bottom-right-radius: 20rpx;
+  padding: 0rpx 10rpx;
+  justify-items: center;
+  margin-left: 15rpx;
+  background: linear-gradient(0deg, #CFC9C0, #CFC9C0),
+  conic-gradient(from 154.5deg at 29.17% -8.33%, #FFE8BA -0.56deg, rgba(255, 230, 165, 0) 0.26deg, rgba(227, 184, 73, 0.34) 17.37deg, rgba(240, 187, 253, 0.23) 347.83deg, rgba(186, 234, 255, 0.38) 353.78deg, #FFE8BA 359.44deg, rgba(255, 230, 165, 0) 360.26deg);
+}
+
+.user-card-info .info-title .version-card span{
+  color: #51370F;
+  box-shadow: 0px 0.56px 0px 0px #FFFB9E;
+}
+
+.cp-avatar image{
+  width: 80rpx;
+  height: 80rpx;
+}
+
+.title-info{
+  font-weight: bolder;
+  margin-left: 25rpx;
+}
+
+.title-info .user-info{
+  margin-top: 25rpx;
+}
+
+.integral-info{
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 20rpx;
+}
+
+.integral-item{
+  display: flex;
+  justify-content: space-between;
+  margin-top: 20rpx;
+}
+
+.integral-item .item{
+  display: flex;
+  color: #1B365D;
+  font-weight: 600;
+  font-size: 35rpx;
+  align-items: center;
+}
+
+.integral-item .number{
+  color: #FF7B1A;
+  font-size: 40rpx;
+  text-decoration-line:underline;
+}
+
+.integral-info .rearmk-view{
+  margin-top: 15rpx;
+  font-size: 25rpx;
+}
+
+.integral-info .rearmk-view .title{
+  font-weight: 600;
+  color: #1B365D;
+}
+
+.integral-info .rearmk-view .info{
+  color: #95A8CB;
+  margin-left: 15rpx;
+  font-weight: 500;
+}
+
+.activity-card{
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 30rpx;
+  padding: 20rpx;
+  box-shadow: 0px 10px 20px 0px #E1E5EE99;
+  border: 1px solid #CE9965;
+  box-shadow: 0px 10px 20px 0px #0000000D;
+  box-shadow: 0px -6px 20px 0px #0000000D;
+  background: radial-gradient(66.18% 65.3% at 6.12% 18.49%, #FFF9EC 0%, #FFFFFF 100%);
+  border-radius: 20rpx;
+}
+
+.activity-card .activity-title{
+  color: #A5814A;
+  font-weight: 600;
+  margin-bottom: 15rpx;
+}
+
+.activity-card .card-item{
+  display: flex;
+  width: 100%;
+  flex-direction: row;
+  justify-content: space-between;
+  border: 7rpx solid rgba(255, 111, 5, 0.4); 
+  border-radius: 20rpx;
+  align-content: center;
+  align-items: center;
+  justify-items: center;
+}
+
+.card-item .discount-view{
+  display: flex;
+  flex-direction: row;
+}
+
+.card-item .integral-view{
+  display: flex;
+  flex-direction: column;
+}
+
+.card-item .integral-view, .card-item .discount-view{
+  width: 20%;
+  height: 13vh;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  border-top-right-radius: 15rpx;
+  border-bottom-right-radius: 15rpx;
+  border-right: 1px dashed #95A8CB;
+}
+
+.card-item .discount-view .number,.card-item .integral-view .number{
+  color: #FF7B1A;
+  font-weight: 600;
+  font-size: 40rpx;
+}
+
+.card-item .button-view{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.activity-card .title-view{
+  width: 40%;
+  color: #1B365D;
+  font-weight: 600;
+}
+
+.activity-card .button-view{
+  width: 210rpx;
+  padding: 20rpx;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 10vh;
+  border-top-left-radius: 15rpx;
+  border-bottom-left-radius: 15rpx;
+  border-left: 1px dashed #95A8CB;
+}
+
+.activity-card .button-view .button-class{
+  border-radius: 20rpx;
+  background-color: wheat;
+}
+
+.activity-card .button-view .remark{
+  display: flex;
+  width: 100%;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  font-size: 25rpx;
+  margin-top: 15rpx;
+}
+
+.activity-card .button-view .remark .time-view{
+  display: flex;
+  width: 120rpx;
+  justify-content: space-around;
+  margin-right: 10rpx;
+  color: #ffffff;
+}
+.activity-card .button-view .remark .time-view .time{
+  background-color: #95A8CB;
+  padding: 5rpx;
+}

+ 14 - 1
project.private.config.json

@@ -5,5 +5,18 @@
         "preloadBackgroundData": false
     },
     "projectname": "iboss_wx_app",
-    "libVersion": "3.4.3"
+    "libVersion": "3.4.3",
+    "condition": {
+        "miniprogram": {
+            "list": [
+                {
+                    "name": "package-basic-data/pages/share/share",
+                    "pathName": "package-basic-data/pages/share/share",
+                    "query": "",
+                    "launchMode": "default",
+                    "scene": null
+                }
+            ]
+        }
+    }
 }