Browse Source

commit -m 采美豆

zhengjinyi 4 years ago
parent
commit
5fa8bf65a2

+ 7 - 3
common/css/iconfont.scss

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 1519039 */
-  src: url('//at.alicdn.com/t/font_1519039_3c0oaod7ck2.woff2?t=1622427548260') format('woff2'),
-       url('//at.alicdn.com/t/font_1519039_3c0oaod7ck2.woff?t=1622427548260') format('woff'),
-       url('//at.alicdn.com/t/font_1519039_3c0oaod7ck2.ttf?t=1622427548260') format('truetype');
+  src: url('//at.alicdn.com/t/font_1519039_jpci2izhta9.woff2?t=1622614721342') format('woff2'),
+       url('//at.alicdn.com/t/font_1519039_jpci2izhta9.woff?t=1622614721342') format('woff'),
+       url('//at.alicdn.com/t/font_1519039_jpci2izhta9.ttf?t=1622614721342') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-zichan:before {
+  content: "\e72c";
+}
+
 .icon-daizhucejigou:before {
   content: "\e72b";
 }

+ 235 - 0
components/cm-module/activity/activityBean.vue

@@ -0,0 +1,235 @@
+<template>
+	<view>
+		<view class="tui-alert-class tui-alert-box" :class="[show?'tui-alert-show':'tui-alert-hide']"  @touchmove.stop.prevent="discard">
+			<view class="tui-alert-content" :style="{'background-image': 'url('+bgImagePath+')'}">
+				<view class="tui-alert-content-text">恭喜您获得采美豆</view>
+				<view class="tui-alert-content-bean">
+					<view class="tui-alert-main">
+						<image class="tui-alert-icon" src="https://static.caimei365.com/app/img/icon/bean-icon@2x.png" mode=""></image>
+						<view class="tui-alert-text">
+							<text class="icon-add">+</text>
+							<text class="icon-text">{{ beanNumber }}</text>
+						</view>
+					</view>
+				</view>
+				<view class="tui-alert-content-tips">
+					<view class="tips">采美豆可抵扣运费</view>
+				</view>
+			</view>
+			<text class="iconfont icon-2guanbi" @click.stop="handleClickCancel"></text>
+		</view>
+	</view> 
+</template>
+
+<script>
+	export default {
+		name:"tuiAlert",
+		props: {
+			//控制显示
+			show: {
+				type: Boolean,
+				default: false
+			},
+			//提示信息字体大小
+			size: {
+				type: Number,
+				default: 30
+			},
+			//提示信息字体颜色
+			color: {
+				type: String,
+				default: "#333"
+			},
+			//按钮字体颜色
+			btnColor: {
+				type: String,
+				default: "#EB0909"
+			},
+			btnText:{
+				type: String,
+				default: ""
+			},
+			beanType:{//根据类型设置背景图片
+				type: Number,
+				default: 1
+			},
+			beanNumber:{//采美豆显示数量
+				type:Number,
+				default:100
+			}
+		},
+		data() {
+			return{
+				bgImagePath:'https://static.caimei365.com/app/img/icon/bean-icon-2@2x.png',
+			}
+		},
+		created() {
+			this.handInitType(this.beanType)
+		},
+		methods: {
+			handInitType(type){
+				this.bgImagePath = `https://static.caimei365.com/app/img/icon/bean-icon-${type}@2x.png`
+				console.log(this.bgImagePath)
+			},
+			handleClick(e) {
+				console.log(e);
+				if (!this.show) return;
+				this.$emit('click',false);
+			},
+			handleClickCancel() {
+				this.$emit('cancel',false);
+			},
+			discard(){
+				//丢弃
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.tui-alert-box {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+		position: fixed;
+		left: 0;
+		top: 100%;
+		opacity: 0;
+		background: rgba(51,51,51,0.5);
+		z-index: 99999;
+	}
+	.tui-alert-show {
+		top: 0;
+		opacity: 1;
+		// animation:rundtop 0.5s;
+	}
+	.tui-alert-hide{
+		top: 100%;
+		opacity: 0;
+		// animation:rundbottom 0.5s;
+	}
+	.tui-alert-content{
+		width: 580rpx;
+		height: 790rpx;
+		position: absolute;
+		top: 0;
+		left: 0;
+		bottom: 0;
+		right: 0;
+		margin: auto;
+		box-sizing: border-box;
+		padding-top: 485rpx;
+		background-size: cover;
+		.tui-alert-content-text{
+			height: 118rpx;
+			line-height: 118rpx;
+			text-align: center;
+			width: 100%;
+			font-size: $font-size-36;
+			color: #333333;
+		}
+		.tui-alert-content-bean{
+			width: 100%;
+			height: 74rpx;
+			line-height: 74rpx;
+			box-sizing: border-box;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			.tui-alert-main{
+				.tui-alert-icon{
+					width: 94rpx;
+					height: 74rpx;
+					display: block;
+					float: left;
+				}
+				.tui-alert-text{
+					color: $color-system;
+					line-height: 74rpx;
+					float: left;
+					.icon-add{
+						font-size:40rpx;
+						margin:0 15rpx;
+					}
+					.icon-text{
+						font-weight: bold;
+						font-size:48rpx;
+					}
+				}
+			}
+		}
+		.tui-alert-content-tips{
+			width: 100%;
+			height: 36rpx;
+			line-height: 36rpx;
+			margin-top: 41rpx;
+			box-sizing: border-box;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			.tips{
+				width: 224rpx;
+				height: 36rpx;
+				background-color: rgba(226, 91, 28, 0.1);
+				border-radius: 18rpx;
+				line-height: 36rpx;
+				font-size: $font-size-24;
+				color: $color-system;
+				text-align: center;
+			}
+		}
+	}
+	.icon-2guanbi{
+		display: block;
+		width: 100rpx;
+		height: 100rpx;
+		line-height: 100rpx;
+		text-align: center;
+		color: #FFFFFF;
+		position: absolute;
+		bottom: 13%;
+		left: 50%;
+		font-size: 60rpx;
+		margin-left: -50rpx;
+	}
+	.tui-alert-mask-show {
+		visibility: visible;
+		opacity: 1;
+	}
+	.tui-alert-btn {
+		width: 100%;
+		height: 90rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background-color: #fff;
+		box-sizing: border-box;
+		position: relative;
+		font-size: 32rpx;
+		line-height: 32rpx;
+	}
+	.tui-alert-btn-hover {
+		background-color: #f7f7f7;
+	}
+	.tui-alert-btn::before {
+		width: 100%;
+		content: "";
+		position: absolute;
+		border-top: 1rpx solid #E0E0E0;
+		-webkit-transform: scaleY(0.5);
+		transform: scaleY(0.5);
+		left: 0;
+		top: 0;
+	}
+	@keyframes rundtop{
+		0%{top: 100%;opacity: 0;}
+		100%{top:0;opacity: 1;}
+	}
+	@keyframes rundbottom{
+		0%{top: 0;opacity: 1;}
+		100%{top:100%;opacity: 0;}
+	}
+</style>

+ 2 - 0
pages.json

@@ -5,6 +5,8 @@
 			"style": {
 				"navigationBarTitleText": "采美采购商城",
 				"enablePullDownRefresh":true,
+				"backgroundColor":"#E15616",
+				"backgroundTextStyle":"light",
 				"navigationStyle":"custom"
 			}
 		},{

+ 9 - 1
pages/tabBar/home/index.vue

@@ -20,6 +20,8 @@
 		<scroll-top :isScrollTop="isScrollTop" :bottom="50"></scroll-top>
 		<!-- 活动弹窗 -->
 		<!-- <activityAlert :show="isActivity" @click="handleClick" @cancel="handleCancelClick"></activityAlert> -->
+		<!-- 采美豆提示弹窗 -->
+		<activityBean :show="isActivityBean" :beanType="2"  @click="handleClick"  @cancel="handleBeanlClick"></activityBean>
 	</view>
 </template>
 
@@ -33,6 +35,7 @@
 	import pageSpecial from '@/components/cm-module/homeIndex/pageSpecial.vue'
 	import supplierList from '@/components/cm-module/homeIndex/supplierList.vue'
 	import activityAlert from '@/components/cm-module/activity/activity_01.vue'
+	import activityBean from '@/components/cm-module/activity/activityBean.vue'
 	import { mapState,mapMutations} from 'vuex';
 	export default {
 		components:{
@@ -43,7 +46,8 @@
 			pageFloor,
 			pageSpecial,
 			supplierList,
-			activityAlert
+			activityAlert,
+			activityBean
 		},
 		data() {
 			return {
@@ -74,6 +78,7 @@
 				isRequest:false,
 				isNavRequest:false,
 				isLiveRequest:false,
+				isActivityBean:true,
 			}
 		},
 		onLoad() {
@@ -179,6 +184,9 @@
 				uni.setStorageSync('lockTime',Date.now())
 				uni.setStorageSync('isActivityStatus',true)	
 			},
+			handleBeanlClick(){
+				this.isActivityBean = false
+			},
 			InitAuthorize(){ //是否已授权 
 				authorize.getSetting().then(res =>{
 					console.log('用户是否授权过',res)

+ 180 - 73
pages/tabBar/user/user.vue

@@ -6,12 +6,11 @@
 				<view class="header-main" v-if="hasLogin">
 					<view class="header-icon"><image :src="headpic == null? 'https://static.caimei365.com/app/img/icon/icon-club@3x.png' : headpic" mode=""></image></view>
 					<view class="header-text">
-						<view class="user-item">
+						<view class="user-item amount">
 							<text class="u-h1">{{name}}</text>
 							<text class="u-viptips" v-if="userIdentity == 2">{{userType}}</text>
 							<text class="u-tips" v-if="userIdentity == 4">{{userType}}</text>
 						</view>
-						<view class="user-item amount"><text class="u-p">账户余额:{{userMoney}}元</text></view>
 					</view>
 				</view>
 				<view class="header-main-none" v-else>
@@ -32,74 +31,97 @@
 						</view>
 					</view>
 				</view>
-				<!-- 订单 -->
-				<view class="user-order">
-					<view class="tab-title" @click="navigator('/pages/user/order/order-list?state=0')">
-						<text class="cell-tit">我的订单</text>
-						<text class="cell-more">全部订单</text>
-						<text class="iconfont icon-xiayibu"></text>
-					</view>
-					<view class="order-section">
-						<view class="order-item" @click="navigator('/pages/user/order/order-list?state=1')" hover-class="common-hover"  :hover-stay-time="50">
-							<view class="order-icon">
-								<image src="https://static.caimei365.com/app/img/icon/order5@3x.png" mode=""></image>
-								<text 	v-if="confirmedCount>0 && hasLogin" 
-										class="uni-badge uni-badge-error uni-small uni-badge--small icon-num" 
-										:class="[confirmedCount < 10 ? 'goleft':'']">
-										{{confirmedCount >= 99? '99+' : confirmedCount}}
-								</text>
+				<!-- 我的资产 -->
+				<view class="header-main-account" v-if="hasLogin">
+					<view class="main-account">
+						<view class="main-account-le">
+							<view class="main-account-icon">
+								<text class="iconfont icon-zichan"></text>
 							</view>
-							<text class="order-t">待确认</text>
+							<view class="main-account-text">我的资产</view>
 						</view>
-						<view class="order-item" @click="navigator('/pages/user/order/order-list?state=2')"  hover-class="common-hover" :hover-stay-time="50">
-							<view class="order-icon">
-								<image src="https://static.caimei365.com/app/img/icon/order1@3x.png" mode=""></image>
-								<text  v-if="paymentCount >0 && hasLogin" 
-									   class="uni-badge uni-badge-error uni-small uni-badge--small icon-num " 
-									   :class="[paymentCount < 10 ? 'goleft':'']">
-									   {{paymentCount >= 99? '99+' : paymentCount}}
-								</text>
+						<view class="main-account-ri">
+							<view class="main-account-ri-view">
+								<view class="main-account-icon">{{ userMoney }}</view>
+								<view class="main-account-text">账户余额</view>
 							</view>
-							<text class="order-t">待付款</text>
-						</view>
-						<view class="order-item" @click="navigator('/pages/user/order/order-list?state=3')" hover-class="common-hover"  :hover-stay-time="50">
-							<view class="order-icon">
-								<image src="https://static.caimei365.com/app/img/icon/order2@3x.png" mode=""></image>
-								<text   v-if="waitShipmentsCount >0 && hasLogin" 
-										class="uni-badge uni-badge-error uni-small uni-badge--small icon-num" 
-										:class="[waitShipmentsCount < 10 ? 'goleft':'']">
-										{{waitShipmentsCount >= 99? '99+' : waitShipmentsCount}}
-								</text>
+							<view class="main-account-ri-view">
+								<view class="main-account-icon">{{ userMoney }}</view>
+								<view class="main-account-text">采美豆</view>
 							</view>
-							<text class="order-t">待发货</text>
 						</view>
-						<view class="order-item" @click="navigator('/pages/user/order/order-list?state=4')" hover-class="common-hover"  :hover-stay-time="50">
-							<view class="order-icon">
-								<image src="https://static.caimei365.com/app/img/icon/order3@3x.png" mode=""></image>
-								<text 	v-if="shipmentsCount>0 && hasLogin" 
-										class="uni-badge uni-badge-error uni-small uni-badge--small icon-num" 
-										:class="[shipmentsCount < 10 ? 'goleft':'']">
-										{{shipmentsCount >= 99? '99+' : shipmentsCount}}
-								</text>
-							</view>
-							<text class="order-t">已发货</text>
+					</view>
+				</view>
+				<!-- 订单 -->
+				<view class="header-main-order" :style="{ marginTop: hasLogin ? '0rpx': '20rpx' }">
+					<view class="user-order">
+						<view class="tab-title" @click="navigator('/pages/user/order/order-list?state=0')">
+							<text class="cell-tit">我的订单</text>
+							<text class="cell-more">全部订单</text>
+							<text class="iconfont icon-xiayibu"></text>
 						</view>
-						<view class="order-item" @click="navigator('/pages/user/order/order-list?state=5')" hover-class="common-hover"  :hover-stay-time="50">
-							<view class="order-icon">
-								<image src="https://static.caimei365.com/app/img/icon/order4@3x.png" mode=""></image>
-								<text 	v-if="salesReturnCount >0 && hasLogin"
-										class="uni-badge uni-badge-error uni-small uni-badge--small icon-num" 
-										:class="[salesReturnCount < 10 ? 'goleft':'']">
-										{{salesReturnCount >= 99? '99+' : salesReturnCount}}
-								</text>
+						<view class="order-section">
+							<view class="order-item" @click="navigator('/pages/user/order/order-list?state=1')" hover-class="common-hover"  :hover-stay-time="50">
+								<view class="order-icon">
+									<image src="https://static.caimei365.com/app/img/icon/order5@3x.png" mode=""></image>
+									<text 	v-if="confirmedCount>0 && hasLogin" 
+											class="uni-badge uni-badge-error uni-small uni-badge--small icon-num" 
+											:class="[confirmedCount < 10 ? 'goleft':'']">
+											{{confirmedCount >= 99? '99+' : confirmedCount}}
+									</text>
+								</view>
+								<text class="order-t">待确认</text>
+							</view>
+							<view class="order-item" @click="navigator('/pages/user/order/order-list?state=2')"  hover-class="common-hover" :hover-stay-time="50">
+								<view class="order-icon">
+									<image src="https://static.caimei365.com/app/img/icon/order1@3x.png" mode=""></image>
+									<text  v-if="paymentCount >0 && hasLogin" 
+										   class="uni-badge uni-badge-error uni-small uni-badge--small icon-num " 
+										   :class="[paymentCount < 10 ? 'goleft':'']">
+										   {{paymentCount >= 99? '99+' : paymentCount}}
+									</text>
+								</view>
+								<text class="order-t">待付款</text>
+							</view>
+							<view class="order-item" @click="navigator('/pages/user/order/order-list?state=3')" hover-class="common-hover"  :hover-stay-time="50">
+								<view class="order-icon">
+									<image src="https://static.caimei365.com/app/img/icon/order2@3x.png" mode=""></image>
+									<text   v-if="waitShipmentsCount >0 && hasLogin" 
+											class="uni-badge uni-badge-error uni-small uni-badge--small icon-num" 
+											:class="[waitShipmentsCount < 10 ? 'goleft':'']">
+											{{waitShipmentsCount >= 99? '99+' : waitShipmentsCount}}
+									</text>
+								</view>
+								<text class="order-t">待发货</text>
+							</view>
+							<view class="order-item" @click="navigator('/pages/user/order/order-list?state=4')" hover-class="common-hover"  :hover-stay-time="50">
+								<view class="order-icon">
+									<image src="https://static.caimei365.com/app/img/icon/order3@3x.png" mode=""></image>
+									<text 	v-if="shipmentsCount>0 && hasLogin" 
+											class="uni-badge uni-badge-error uni-small uni-badge--small icon-num" 
+											:class="[shipmentsCount < 10 ? 'goleft':'']">
+											{{shipmentsCount >= 99? '99+' : shipmentsCount}}
+									</text>
+								</view>
+								<text class="order-t">已发货</text>
+							</view>
+							<view class="order-item" @click="navigator('/pages/user/order/order-list?state=5')" hover-class="common-hover"  :hover-stay-time="50">
+								<view class="order-icon">
+									<image src="https://static.caimei365.com/app/img/icon/order4@3x.png" mode=""></image>
+									<text 	v-if="salesReturnCount >0 && hasLogin"
+											class="uni-badge uni-badge-error uni-small uni-badge--small icon-num" 
+											:class="[salesReturnCount < 10 ? 'goleft':'']">
+											{{salesReturnCount >= 99? '99+' : salesReturnCount}}
+									</text>
+								</view>
+								<text class="order-t">退货/款</text>
 							</view>
-							<text class="order-t">退货/款</text>
 						</view>
 					</view>
 				</view>
 			</view>
 			<!-- 底部跳转 -->
-			<view class="foot-list">
+			<view class="foot-list" :style="{paddingTop: hasLogin ? '360rpx': '160rpx'}">
 			<!-- 	<view class="list-cell-avtiv" @click="navigator('/pages/user/coupon/coupon')">
 					<image src="http://static.caimei365.com/app/meibohui/app/activity-in.png" mode=""></image>
 				</view> -->
@@ -144,12 +166,16 @@
 				</view>	
 			</view>
 		</view>	
+		<!-- 普通机构升级弹窗 -->
 		<upgrade-alert v-if="isUpgradeAlert" :clubStatus="clubStatus" @unBindUpgrade="hanldUnBindUpgrade" @GoApply="hanldGoApply"></upgrade-alert>
+		<!-- 采美豆提示弹窗 -->
+		<activityBean :show="isActivityBean" :beanType="beanType"  @click="handleClick"  @cancel="handleCancelClick"></activityBean>
 	</view>
 </template>
 <script>
 	import uniBadge from '@/components/uni-badge/uni-badge.vue'
 	import upgradeAlert from '@/components/cm-module/modelAlert/upgradeAlert.vue'
+	import activityBean from '@/components/cm-module/activity/activityBean.vue'
 	import authorize from '@/common/config/authorize.js'
 	import { mapState,mapMutations } from 'vuex'
 	
@@ -157,7 +183,8 @@
 	export default{
 		components: {
 			uniBadge,
-			upgradeAlert
+			upgradeAlert,
+			activityBean
 		},
 		data() {
 			return{	
@@ -172,6 +199,8 @@
 				},
 				CustomBar:this.CustomBar,// 顶部导航栏高度
 				StatusBar: this.StatusBar,
+				beanType:1,
+				isActivityBean:true,
 				isCmcustom:false,
 				isUpgradeAlert:false,
 				bgImgUrl:'https://img.caimei365.com/group1/M00/03/B0/Cmis217Z_i6ASHobAAhl69yz3SM078.png',
@@ -393,8 +422,8 @@
 				height: 64rpx;
 				line-height: 64rpx;
 				&.amount{
-					height: 30rpx;
-					line-height: 30rpx;
+					height: 135rpx;
+					line-height: 135rpx;
 				}
 				.u-tips{
 					display: inline-block;
@@ -409,7 +438,7 @@
 					text-align: center;
 					color: #FFFFFF;
 					margin-left: 10rpx;
-					margin-top: 17rpx;
+					margin-top: 50rpx;
 				}
 				.u-viptips{
 					display: inline-block;
@@ -424,7 +453,7 @@
 					text-align: center;
 					color: #FFE600;
 					margin-left: 10rpx;
-					margin-top: 17rpx;
+					margin-top: 50rpx;
 				}
 				.u-h1{
 					width: 300rpx;
@@ -527,17 +556,96 @@
 			}
 		}
 	}
-	.user-order{
-		width: 654rpx;
+	.header-main-account{
+		width: 100%;
 		height: auto;
+		box-sizing: border-box;
+		padding:24rpx;
+		.main-account{
+			width: 100%;
+			height: 168rpx;
+			background-color: $bg-color;
+			border-radius: 20rpx;
+			box-sizing: border-box;
+			padding:24rpx 0;
+			.main-account-le{
+				width: 222rpx;
+				height: 100%;
+				position: relative;
+				float: left;
+				&::before{
+					content: '';
+					width: 2rpx;
+					height: 64rpx;
+					background-color: #c4c4c4;
+					position: absolute;
+					right: 0;
+					top: 30rpx;
+				}
+				.main-account-icon{
+					width: 100%;
+					height: 74rpx;
+					line-height: 74rpx;
+					text-align: center;
+					.icon-zichan{
+						font-size: 50rpx;
+						color: #f94b4b;
+					}
+				}
+				.main-account-text{
+					width: 100%;
+					height: 44rpx;
+					line-height: 44rpx;
+					font-size: $font-size-28;
+					text-align: center;
+					color: #333333;
+				}
+			}
+			.main-account-ri{
+				width: 480rpx;
+				height: 100%;
+				float: right;
+				.main-account-ri-view{
+					width: 50%;
+					height: 100%;
+					float: left;
+					.main-account-icon{
+						width: 100%;
+						height: 74rpx;
+						line-height: 74rpx;
+						text-align: center;
+						font-size: $font-size-32;
+						color: #f94b4b;
+						font-weight: bold;
+					}
+					.main-account-text{
+						width: 100%;
+						height: 44rpx;
+						line-height: 44rpx;
+						font-size: $font-size-28;
+						text-align: center;
+						color: #333333;
+					}
+				}
+			}
+		}
+	}
+	.header-main-order{
+		width: 100%;
+		height: auto;
+		box-sizing: border-box;
 		padding: 0 24rpx;
-		background-color: $bg-color;
-		margin-bottom: 24rpx;
-		position: absolute;
-		bottom: -170rpx;
-		left: 24rpx;
-		border-radius: 20rpx;
-	}	
+		margin-top: 26rpx;
+		.user-order{
+			width: 100%;
+			height: auto;
+			background-color: $bg-color;
+			margin-bottom: 24rpx;
+			border-radius: 20rpx;
+			box-sizing: border-box;
+			padding: 0 24rpx;
+		}	
+	}
 	.tab-title{
 		font-size: $font-size-28;
 		line-height: 80rpx;
@@ -611,7 +719,6 @@
 	.foot-list{
 		width: 702rpx;
 		padding: 0 24rpx;
-		padding-top: 160rpx;
 	}	
 	.list-cell-avtiv{
 		width: 702rpx;