feat:亲情卡样式修改

components/pay/pay.vue

@@ -18,11 +18,11 @@
 							<u-icon name="/static/me/familyCard_icon.png" color="#38db38" size="36"></u-icon>
 							<view class="payName flex-col justify-center">
 								<text>亲情卡支付</text>
-								<text class="balance">{{loveCard.presentUserName + loveCard.presentUserNo}}赠送的亲情卡</text>
-								<text class="balance">余额{{loveCard.totalBalance}}</text>
-<!--								<view class="select">-->
-<!--									<uni-data-select class="uni-data-select"  :clear="false" v-model="loveCardId" :localdata="loveCardList" @change="change"></uni-data-select>-->
-<!--								</view>-->
+<!--								<text class="balance">{{loveCard.presentUserName + loveCard.presentUserNo}}赠送的亲情卡</text>-->
+<!--								<text class="balance">余额{{loveCard.totalBalance}}</text>-->
+								<view class="select">
+									<uni-data-select class="uni-data-select"  :clear="false" v-model="loveCardId" :localdata="loveCardList" @change="change"></uni-data-select>
+								</view>
 							</view>
 						</view>
 						<view class="flex-col justify-center">
@@ -164,8 +164,8 @@
 				curServiceTab: 2,
 				userInfo: {},
 				password: '',
-				loveCard:{}
-
+				loveCardId:'',
+				loveCardList:[],
 			};
 		},
 		created(){
@@ -343,17 +343,16 @@
 			//查询我的亲情卡
 			getMyReceiveList(){
 				this.$api.getMyReceiveList().then(res=>{
-					this.loveCard = res.data.data[0]
-					// if (this.loveCardList){
-					// 	this.loveCardId = res.data.data[0].id
-					// 	res.data.data.forEach(item=>{
-					// 		let tempItem = {
-					// 			value:item.id,
-					// 			text:item.presentUserName + item.presentUserNo + '亲情卡'
-					// 		}
-					// 		this.loveCardList.push(tempItem)
-					// 	})
-					// }
+					if (this.loveCardList){
+						this.loveCardId = res.data.data[0].id
+						res.data.data.forEach(item=>{
+							let tempItem = {
+								value:item.id,
+								text:item.presentUserName + item.presentUserNo + '亲情卡,余额：'+item.totalBalance
+							}
+							this.loveCardList.push(tempItem)
+						})
+					}
 				})
 			}
 		}

main.js

@@ -13,6 +13,7 @@ import uView from "uview-ui";
 const baseUrl = env.baseUrl;
 Vue.use(uView);
 Vue.config.productionTip = false
+Vue.prototype.$phonePattern = '^1[3-9][0-9]\\d{8}$';
 Vue.prototype.$baseUrl = baseUrl;
 Vue.prototype.$api = api;
 App.mpType = 'app'

myPages/familyCard/giveFamilyCard/giveFamilyCard.vue

@@ -1,14 +1,14 @@
 <template>
   <view class="box">
-    <u--form labelPosition="top" :model="userInfo" ref="form1">
-      <u-form-item labelWidth="auto" labelAlign="right" label="被赠送会员编号" prop="phone">
-        <u-input prefixIconStyle="font-size: 22px;color: #000000" v-model="userInfo.memberNo" placeholder="请输入被赠送会员编号" border="bottom">
+    <u--form labelPosition="top" :model="form" :rules="rules" ref="uForm">
+      <u-form-item labelWidth="auto"  label="被赠送会员编号" prop="memberNo">
+        <u-input  v-model="form.memberNo" placeholder="请输入被赠送会员编号" border="bottom">
           <u-text text="Vip." color="#000000" slot="prefix" margin="0 3px 0 0" type="tips"></u-text>
         </u-input>
       </u-form-item>
-      <u-form-item labelWidth="auto" labelAlign="right" label="被赠送会员手机号" prop="smsCode" width="120">
-        <u--input v-model="userInfo.memberPhone" placeholder="请输入被赠送会员手机号" border="bottom"
-        ></u--input>
+      <u-form-item labelWidth="auto"  label="被赠送会员手机号" prop="memberPhone">
+        <u-input v-model="form.memberPhone" placeholder="请输入被赠送会员手机号" border="bottom"
+        ></u-input>
       </u-form-item>
     </u--form>
     <view class="op-btn-wrap">
@@ -18,6 +18,11 @@
         </text>
       </view>
 
+      <view class="h-btn1" @click="handleGive">
+        <text>确定
+          <text class="presentCount" v-if="count !== null">(剩余可赠送{{count}}次)</text>
+        </text>
+      </view>
 
     </view>
   </view>
@@ -28,9 +33,30 @@ export default {
   name: "giveFamilyCard",
   data() {
     return {
-      userInfo: {},
-      giveUser: {},
-      count:null
+      form: {
+        memberNo:'',
+        memberPhone:''
+      },
+      count:null,
+      rules: {
+        'memberNo': {
+          type: 'string',
+          required: true,
+          min: 8,
+          max: 10,
+          message: '请输入6-18位密码',
+          trigger: ['blur', 'change']
+        },
+        'memberPhone': {
+          type: 'string',
+          required: true,
+          min: 11,
+          max: 11,
+          pattern:this.$phonePattern,
+          message: '请输入正确的电话号码',
+          trigger: ['blur', 'change']
+        },
+      }
     }
   },
   onShow(){
@@ -38,23 +64,26 @@ export default {
   },
   methods: {
     handleGive() {
-
       if (this.count == 0){
         uni.$u.toast('可赠送次数不足！')
         return
       }
+      this.$refs.uForm.validate().then(res=>{
+        let data={
+          memberNo:"Vip." + this.form.memberNo,
+          memberPhone:this.form.memberPhone
+        }
+        this.$api.giveFamilyCard(data).then((res) => {
+                  console.log(res)
+                  uni.showToast({
+                    duration: 2000,
+                    title: '赠送成功'
+                  });
+                  uni.navigateBack({delta : 1})
+                }
+        )
 
-      this.giveUser.memberNo = "Vip." + this.userInfo.memberNo
-      this.giveUser.memberPhone = this.userInfo.memberPhone
-      this.$api.giveFamilyCard(this.giveUser).then((res) => {
-            console.log(res)
-              uni.showToast({
-                duration: 2000,
-                title: '赠送成功'
-              });
-              uni.navigateBack({delta : 1})
-          }
-      )
+      })
     },
     presentCount(){
       this.$api.presentCount().then(res=>{
@@ -69,11 +98,20 @@ export default {
 .box {
   padding: 24rpx 32rpx;
 }
+.h-btn1 {
+  margin: 48rpx auto;
+  text-align: center;
+  width: 686rpx;
+  height: 84rpx;
+  background: #FFE05C;
+  border-radius: 50rpx;
+  line-height: 84rpx;
+}
 
 .h-btn {
   margin: 48rpx auto;
   text-align: center;
-  width: 80vw;
+  width: 343px;
   height: 42px;
   background: #FFE05C;
   border-radius: 27px;
@@ -81,9 +119,10 @@ export default {
 }
 .presentCount{
   font-size: 24rpx;
+  line-height: 84rpx;
   color: #666666;
 }
 /deep/ .u-text__value--tips{
-  color: red !important;
+  color: #333333 !important;
 }
 </style>

myPages/familyCard/index.scss

@@ -1,40 +1,140 @@
-.box {
-  padding: 32rpx 24rpx;
-  position: relative;
+.page{
+  padding: 0 32rpx;
+  background: #F7F7F7;
+  height: 100vh;
 }
-
-.Card {
-  border-radius: 20px;
-  background-size: 100% 100%;
-  height: 188rpx;
-  padding: 24rpx;
-  display: flex;
-  flex-direction: column;
+.scroll-y{
+  height: 80vh;
+  overflow: auto;
+}
+.bottom{
+  height: 20vh;
+}
+.loveCard{
+  width: 686rpx;
+  height: 284rpx;
+  background: #FFFFFF;
+  border-radius: 25rpx;
+  margin-top: 24rpx;
+  overflow: hidden;
   position: relative;
-  margin: 32rpx 24rpx;
 }
-
-.getCard {
-  background-image: url("/static/familyCard/getCard.png");
+.imgBack{
+  width: 100%;
+  height: 100%;
 }
-
-.postCard {
-  background-image: url("/static/familyCard/postCard.png");
+.loveCardMsg{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
 }
-
-.Lines {
-  display: flex;
-  justify-content: space-between;
-
+.avatar{
+  width: 96rpx;
+  height: 96rpx;
+  border-radius: 50rpx;
+  box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(255,224,92,0.1);
+  border: 2rpx solid #FFFFFF;
+  margin-top: 26rpx;
+  margin-left: 24rpx;
+}
+.name{
+  font-weight: 400;
+  font-size: 30rpx;
+  color: #333333;
+  line-height: 44rpx;
+  margin-left: 16rpx;
+  margin-top: 28rpx;
+}
+.vipNo{
+  font-weight: 400;
+  font-size: 26rpx;
+  color: #333333;
+  line-height: 40rpx;
+  margin-left: 16rpx;
+  margin-top: 8rpx;
+}
+.priceView{
+  text-align: center;
+  width: 50%;
+  margin-top: 10rpx;
 }
-.bottonStyle{
-  position: fixed;
-  bottom: 5%;
-  left: 20%;
+.priceTitle{
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 400;
+  font-size: 26rpx;
+  color: #666666;
+  line-height: 60rpx;
 }
-.buttonStyle{
-  background-color: #ffe05c;
-  color: #6b6b71;
-  //width: 50%;
+.priceSymbol{
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 400;
+  font-size: 24rpx;
+  color: #333333;
+  line-height: 44rpx;
+  margin-top: 8rpx;
+}
+.price{
+  font-family: DINAlternate, DINAlternate;
+  font-weight: bold;
+  font-size: 48rpx;
+  color: #333333;
+  line-height: 44rpx;
+  margin-top: 8rpx;
+}
+.nullIcon{
+  margin-top: 30rpx;
+  width: 120rpx;
+  height: 120rpx;
+}
+.nullMsg{
+  color: rgba(153, 153, 153, 1);
+  font-size: 24rpx;
+  line-height: 34rpx;
+  margin-top: 24rpx;
+}
+.title{
+  font-family: PingFangSC, PingFang SC;
+  font-weight: bold;
+  font-size: 28rpx;
+  color: #333333;
+  line-height: 44rpx;
+  margin-top: 24rpx;
+}
+.zsBtn{
+  width: 686rpx;
+  height: 84rpx;
+  background: #FFE05C;
+  border-radius: 54rpx;
 
+  font-weight: 400;
+  font-size: 28rpx;
+  color: #333333;
+  line-height: 84rpx;
+  margin-top: 24rpx;
+  text-align: center;
+}
+.agreementView{
+  margin-top: 30rpx;
+}
+.read{
+  font-weight: 400;
+  font-size: 24rpx;
+  color: #999999;
+  line-height: 40rpx;
+  margin-left: 8rpx;
+}
+.agreement{
+  font-weight: bold;
+  font-size: 24rpx;
+  color: #333333;
+  line-height: 40rpx;
+  margin-left: 4rpx;
+}
+.borderRight1{
+  border-left: 2rpx solid #FFFFFF;
+}
+.borderRight2{
+  border-left: 2rpx solid #FFE05C;
 }

myPages/familyCard/index.vue

@@ -1,169 +1,197 @@
 <template>
-  <view class="box">
-    <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  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 class="page">
+        <view class="scroll-y">
 
-    </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 class="title">
+                <text>我收到的亲情卡</text>
+            </view>
+
+            <view class="loveCard" v-if="gotList.length === 0">
+                <view class="flex-row justify-center">
+                    <image src="/static/me/zhanwu.png" class="nullIcon"></image>
+                </view>
+                <view class="flex-row justify-center nullMsg">
+                    <text>暂无收到的亲情卡</text>
+                </view>
+            </view>
+
+            <view v-else>
+                <view class="loveCard" v-for="(item,index) in gotList" :key="index" @click="jumpToDetail(item)">
+                    <image src="/static/familyCard/shoudaoLove.png" class="imgBack"></image>
+                    <view class="loveCardMsg">
+                        <view class="flex-row">
+                            <view>
+                                <image :src="item.url || '/static/me/ud4.png'" class="avatar"></image>
+                            </view>
+                            <view class="flex-col">
+                                <text class="name">{{item.presentUserName}}</text>
+                                <text class="vipNo">{{item.presentUserNo}}</text>
+                            </view>
+                        </view>
+                        <view class="flex-row justify-between">
+                            <view class="flex-col priceView">
+                                <text class="priceTitle">可用额度</text>
+                                <view>
+                                    <!--<text class="priceSymbol">￥</text>-->
+                                    <text class="price">{{item.totalBalance || 0}}</text>
+                                </view>
+                            </view>
+                            <view class="flex-col priceView borderRight1">
+                                <text class="priceTitle">已用额度</text>
+                                <view>
+                                    <!--<text class="priceSymbol">￥</text>-->
+                                    <text class="price">{{item.amount || 0}}</text>
+                                </view>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+            </view>
+
+            <view class="title">
+                <text>我赠送的亲情卡</text>
+            </view>
+
+            <view class="loveCard" v-if="giveList.length === 0">
+                <view class="flex-row justify-center">
+                    <image src="/static/me/zhanwu.png" class="nullIcon"></image>
+                </view>
+                <view class="flex-row justify-center nullMsg">
+                    <text>暂无赠送的亲情卡</text>
+                </view>
+            </view>
+
+            <view v-else>
+                <view class="loveCard" v-for="(item, index) in giveList" :key="index" @click="jumpToDetail(item)">
+                    <image src="/static/familyCard/zengsLove.png" class="imgBack"></image>
+                    <view class="loveCardMsg">
+                        <view class="flex-row">
+                            <view>
+                                <image :src="item.url || '/static/me/ud4.png'" class="avatar"></image>
+                            </view>
+                            <view class="flex-col">
+                                <text class="name">{{item.userName}}</text>
+                                <text class="vipNo">{{item.userNo}}</text>
+                            </view>
+                        </view>
+                        <view class="flex-row justify-between">
+                            <view class="flex-col priceView">
+                                <text class="priceTitle">可用额度</text>
+                                <view>
+                                    <!--<text class="priceSymbol">￥</text>-->
+                                    <text class="price">{{item.totalBalance || 0}}</text>
+                                </view>
+                            </view>
+                            <view class="flex-col priceView borderRight2">
+                                <text class="priceTitle">已用额度</text>
+                                <view>
+                                    <!--<text class="priceSymbol">￥</text>-->
+                                    <text class="price">{{item.amount || 0}}</text>
+                                </view>
+                            </view>
+                        </view>
+                    </view>
+                </view>
+
+            </view>
+
+        </view>
+        <view class="bottom">
+            <view class="flex-row justify-center agreementView">
+                <u-icon name="/static/me/o1.png" size="20" v-if="choose" @click="changeChoose"></u-icon>
+                <u-icon name="/static/me/o.png" size="20" v-else @click="changeChoose"></u-icon>
+                <text class="read">我已阅读并同意</text>
+                <text class="agreement" @click="gotoAgreement">使用说明</text>
+            </view>
+            <view class="zsBtn" @click="jumpToGive">赠送亲情卡</view>
         </view>
-      </view>
-      <button class="buttonStyle" @click="jumpToGive" >
-        <text style="font-size: 18px;" >
-          赠送亲情卡
-        </text>
-      </button>
     </view>
-
-  </view>
 </template>
 
 <script>
-export default {
-  name: "index",
-  data() {
-    return {
+    export default {
+        name: "index",
+        data() {
+            return {
 
-      choose:false,
-      giveList: [],
-      gotList: []
-    }
-  },
-  onShow() {
-    this.getGiveList()
-    this.getGotList()
-  },
-  onPullDownRefresh(){
-    this.getGiveList()
-    this.getGotList()
-    uni.stopPullDownRefresh()
-  },
-  methods: {
-    changeChoose(){
-      this.choose =!this.choose
-    },
-    // 去协议页面
-    gotoAgreement(type, name) {
-      uni.navigateTo({
-        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)
-      })
-    },
-    getImgUrlByOssId(list, number) {
-      if (list) {
-        list.forEach((e) => {
-          let data = null
-          if (number == 1) {
-            data = e.presentUserPhoto
+                choose: false,
+                giveList: [],
+                gotList: []
+            }
+        },
+        onShow() {
+            this.getGiveList()
+            this.getGotList()
+        },
+        onPullDownRefresh() {
+            this.getGiveList()
+            this.getGotList()
+            uni.stopPullDownRefresh()
+        },
+        methods: {
+            changeChoose() {
+                this.choose = !this.choose
+            },
+            // 去协议页面
+            gotoAgreement(type, name) {
+                uni.navigateTo({
+                    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)
+                })
+            },
+            getImgUrlByOssId(list, number) {
+                if (list) {
+                    list.forEach((e) => {
+                        let data = null
+                        if (number == 1) {
+                            data = e.presentUserPhoto
 
-          } else {
-            data = e.userPhoto
-          }
-          if (data) {
-            this.$api.getImage(data).then(res => {
-              e.url = res.data.data[0].url.replace(/^http:/, "https:")
-            });
-          }
-        })
-        this.$forceUpdate()
-      }
-    },
-    getGiveList() {
-      this.$api.getMyPresentList().then((res) => {
-        this.giveList = res.data.data
-        this.getImgUrlByOssId(this.giveList, 1)
-      })
+                        } else {
+                            data = e.userPhoto
+                        }
+                        if (data) {
+                            this.$api.getImage(data).then(res => {
+                                e.url = res.data.data[0].url.replace(/^http:/, "https:")
+                            });
+                        }
+                    })
+                    this.$forceUpdate()
+                }
+            },
+            getGiveList() {
+                this.$api.getMyPresentList().then((res) => {
+                    this.giveList = res.data.data
+                    this.getImgUrlByOssId(this.giveList, 1)
+                })
 
-    },
-    getGotList() {
-      this.$api.getMyReceiveList().then((res) => {
-        this.gotList = res.data.data
-        this.getImgUrlByOssId(this.giveList, 2)
-      })
+            },
+            getGotList() {
+                this.$api.getMyReceiveList().then((res) => {
+                    this.gotList = res.data.data
+                    this.getImgUrlByOssId(this.giveList, 2)
+                })
+            }
+        }
     }
-  }
-}
 </script>
 
-<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 scoped lang="scss">
+    @import "../familyCard/index.scss";
 </style>

myPages/setting/setting-telphone.vue

@@ -120,8 +120,8 @@ export default {
         phonenumber: [
           {
             required: true,
-            min: 10,
-            max: 12,
+            min: 11,
+            max: 11,
             message: '请输入11位电话号码',
             trigger: ['blur', 'change'],
           },