feat:亲情卡页面样式调整

common/js/env.js

@@ -5,8 +5,8 @@
 /** 测试环境 */
 // let baseUrl = `https://jje.admin.xinyuekj.com.cn/test-api`
 /** 开发环境*/
-// let baseUrl = `http://65i1sxopd9qp.ngrok.xiaomiqiu123.top`
-let baseUrl = `http://47.108.114.127:10888`
+let baseUrl = `http://65i1sxopd9qp.ngrok.xiaomiqiu123.top`
+// let baseUrl = `http://47.108.114.127:10888`
 
 
 

myPages/familyCard/index.scss

@@ -1,11 +1,12 @@
 .box {
   padding: 32rpx 24rpx;
+  position: relative;
 }
 
 .Card {
   border-radius: 20px;
   background-size: 100% 100%;
-  height: 268rpx;
+  height: 188rpx;
   padding: 24rpx;
   display: flex;
   flex-direction: column;
@@ -22,7 +23,18 @@
 }
 
 .Lines {
-  position: absolute;
-  right: 40rpx;
-  bottom: 26rpx;
+  display: flex;
+  justify-content: space-between;
+
+}
+.bottonStyle{
+  position: fixed;
+  bottom: 5%;
+  left: 20%;
+}
+.buttonStyle{
+  background-color: #ffe05c;
+  color: #6b6b71;
+  //width: 50%;
+
 }

myPages/familyCard/index.vue

@@ -1,39 +1,68 @@
 <template>
   <view class="box">
-    <text v-if="gotList.length>0" style="margin-bottom: 24rpx">我收到的亲情卡</text>
-
-    <view class="getCard Card" v-for="item in gotList" @click="jumpToDetail(item)">
-      <view style="display: flex;align-items: center">
-        <u-avatar :src="item.url || '/static/me/ud4.png'"></u-avatar>
-        <text style="margin:0 10rpx;color:#FFFFFF ">{{ item.presentUserName }}{{ item.presentUserNo }}送的亲情卡</text>
+    <view v-if="giveList.length>0 || gotList.length > 0 ">
+      <view  style="margin: 32rpx 0;">
+        <text v-if="giveList.length>0" >我收到的亲情卡</text>
+      </view>
+      <view class="getCard Card" v-for="item in gotList" @click="jumpToDetail(item)">
+        <view style="display: flex;align-items: center">
+          <u-avatar :src="item.url || '/static/me/ud4.png'"></u-avatar>
+          <text style="margin:0 10rpx;color:#FFFFFF ">{{ item.presentUserName }}{{ item.presentUserNo }}送的亲情卡</text>
+        </view>
+        <view class="Lines">
+          <view style="float: contour;margin:0 10rpx;color:#FFFFFF;text-align: center">
+            <text >可用额度</text>
+            <view style="font-size: 48rpx;font-weight: bold">{{ item.totalBalance || 0 }}</view>
+          </view>
+          <view style="float: contour;margin:0 10rpx;color:#FFFFFF;text-align: center">
+            <text >已用额度</text>
+            <view style="font-size: 48rpx;font-weight: bold">{{ item.amount || 0 }}</view>
+          </view>
+        </view>
       </view>
-      <view class="Lines">
-        <text style="float: right;margin:0 10rpx;color:#FFFFFF ">已用额度</text>
-        <view style="font-size: 48rpx;font-weight: bold;color: #FFFFFF;text-align: center">{{ item.amount || 0 }}</view>
+      <view  style="margin: 32rpx 0;">
+        <text v-if="giveList.length>0" >我赠送的亲情卡</text>
+      </view>
+      <view class="postCard Card" v-for="item in giveList" @click="jumpToDetail(item)">
+        <view style="display: flex;align-items: center">
+          <u-avatar :src="item.url || '/static/me/ud4.png'"></u-avatar>
+          <text style="margin:0 10rpx;">{{ item.userName }}{{ item.userNo }}</text>
+        </view>
+        <view class="Lines">
+          <view style="text-align: center">
+            <text >可用额度</text>
+            <view style="font-size: 48rpx;font-weight: bold;text-align: center">{{ item.totalBalance || 0 }}</view>
+          </view>
+          <view>
+            <text >已用额度</text>
+            <view style="font-size: 48rpx;font-weight: bold;text-align: center">{{ item.amount || 0 }}</view>
+          </view>
+        </view>
       </view>
     </view>
+    <view  v-if="giveList.length == 0 && gotList.length == 0 " style="text-align: center" >
+      <image style="transform: scale(0.5)" src="../../static/logo.png" ></image>
+      <h1 style="font-size: 28px;margin: 15px">亲情卡</h1>
+      <p>让支付更简单</p>
+      <p style="color: #b4b4b4">暂无亲情卡</p>
 
-    <view  style="display: flex;justify-content:space-between;margin: 32rpx 0;">
-      <text>我赠送的亲情卡</text>
-      <view style="color: #FFAF36;transform: translateY(-10rpx)" @click="jumpToGive">
-        <image style="width: 40rpx;height: 40rpx;transform: translateY(10rpx)"
-               src="/static/familyCard/icon-give.png"></image>
-        <text>
+    </view>
+    <view class="bottonStyle">
+      <view class="agreement-content">
+        <u-icon v-if="choose" name="/static/order/isCheck.png" color="#2979ff" size="20" @click="changeChoose"></u-icon>
+        <u-icon v-else name="/static/order/notCheck.png" color="#01a520" size="20" @click="changeChoose"></u-icon>
+        <view class="agreement">
+          <text>我已阅读并同意</text>
+          <text @click="gotoAgreement('1','会员须知')" class="text-color">使用说明</text>
+        </view>
+      </view>
+      <button class="buttonStyle" @click="jumpToGive" >
+        <text style="font-size: 18px;" >
           赠送亲情卡
         </text>
-      </view>
+      </button>
     </view>
 
-    <view class="postCard Card" v-for="item in giveList" @click="jumpToDetail(item.id)">
-      <view style="display: flex;align-items: center">
-        <u-avatar :src="item.url || '/static/me/ud4.png'"></u-avatar>
-        <text style="margin:0 10rpx;">{{ item.userName }}{{ item.userNo }}</text>
-      </view>
-      <view class="Lines">
-        <text style="float: right;margin:0 10rpx;">已用额度</text>
-        <view style="font-size: 48rpx;font-weight: bold;text-align: center">{{ item.amount || 0 }}</view>
-      </view>
-    </view>
   </view>
 </template>
 
@@ -42,12 +71,11 @@ export default {
   name: "index",
   data() {
     return {
+
+      choose:false,
       giveList: [],
       gotList: []
     }
-  },
-  onLoad() {
-
   },
   onShow() {
     this.getGiveList()
@@ -59,11 +87,28 @@ export default {
     uni.stopPullDownRefresh()
   },
   methods: {
-    jumpToGive() {
+    changeChoose(){
+      this.choose =!this.choose
+    },
+    // 去协议页面
+    gotoAgreement(type, name) {
       uni.navigateTo({
-        url: '/myPages/familyCard/giveFamilyCard/giveFamilyCard'
+        url: '/myPages/TermsOfService/index?name=' + name + '&type=' + type,
       })
     },
+    jumpToGive() {
+      if(!this.choose){
+        uni.showToast({
+          icon: 'none',
+          duration: 3000,
+          title: '请勾选使用说明'
+        });
+      }else {
+        uni.navigateTo({
+          url: '/myPages/familyCard/giveFamilyCard/giveFamilyCard'
+        })
+      }
+    },
     jumpToDetail(item) {
       uni.navigateTo({
         url: '/myPages/familyCard/unbindFamilyCard/unbindFamilyCard?data=' + JSON.stringify(item)
@@ -93,6 +138,7 @@ export default {
         this.giveList = res.data.data
         this.getImgUrlByOssId(this.giveList, 1)
       })
+
     },
     getGotList() {
       this.$api.getMyReceiveList().then((res) => {
@@ -102,11 +148,22 @@ export default {
     }
   }
 }
-
-
 </script>
 
-<style scoped>
+<style scoped >
 @import "/myPages/familyCard/index.scss";
-
+.agreement-content {
+  margin: 18px;
+  display: flex;
+  color: #999999;
+  align-items: center;
+}
+.text-color {
+  color: #032574;
+}
+.agreement {
+  color: rgb(96, 98, 102);
+  padding: 0 20rpx;
+  font-size: 30rpx;
+}
 </style>

myPages/familyCard/unbindFamilyCard/unbindFamilyCard.vue

@@ -62,10 +62,10 @@ export default {
   methods: {
     openUnbindpopup() {
       this.$refs.unbindpopup.open()
-
     },
     //解除绑定
     untieCard() {
+      console.log(this.data)
       this.$api.untieCard({
         cardId: this.data.id
       }).then((res) => {

pages/login/login.vue

@@ -47,8 +47,8 @@
 			<view class="login-form">
 				<!--        <text style="color: red;font-size: 22rpx  ">*此账号密码可进行交易使用，请保存好您的隐私。</text>-->
 				<view class="agreement-content">
-					<u-icon v-if="choose" name="checkmark-circle-fill" color="#2979ff" size="20" @click="changeChoose"></u-icon>
-					<u-icon v-else name="/static/order/ud9.png" color="#FFE05C" size="20" @click="changeChoose"></u-icon>
+					<u-icon v-if="choose" name="/static/order/isCheck.png" color="#2979ff" size="20" @click="changeChoose"></u-icon>
+					<u-icon v-else name="/static/order/notCheck.png" color="#FFE05C" size="20" @click="changeChoose"></u-icon>
 					<view class="agreement">
 						<text>允许我们在必要的场景下合理使用你的相关信息，请阅读并同意</text>
 						<text @click="gotoAgreement('1','会员须知')" class="text-color">《会员须知》、</text>
@@ -291,7 +291,7 @@
 			.agreement {
 				color: rgb(96, 98, 102);
 				padding-left: 1px;
-				font-size: 23rpx;
+				font-size: 28rpx;
 
 				.text-color {
 					color: red;