UI 调整

components/page-component/app-goods-detail/app-name.vue

@@ -23,9 +23,8 @@
 	.name {
 		background-color: #ffffff;
 		overflow: hidden;
-        width: 702upx;
-        margin: 24upx 24upx 0 24upx;
-        border-radius: 15upx 15upx 0 0;
+        width: 100%;
+		padding: 20upx;
 	}
 	
 	.text {

components/page-component/goods/bd-info.vue

@@ -49,17 +49,17 @@
         <view class="bd-tags">
             <div class="bd-tag-group">
                 <view class="bd-tag">
-                    <image :src="root+'/web/statics/img/app/common/icon-zheng.png'"></image>
+                    <image src="../../../static/image/icon/icon-zheng.png"></image>
                     <text>正品保证</text>
                 </view>
                 <view class="bd-tag">
-                    <image :src="root+'/web/statics/img/app/common/icon-tui.png'"></image>
+                    <image src="../../../static/image/icon/icon-tui.png" style="width: 34rpx;"></image>
                     <text>退换无忧</text>
                 </view>
             </div>
             <block v-if="isShowShare" >
                 <view class="bd-tag bd-tag-share" @click="shareClick" style="margin-right: 0;background-color:#F84469;">
-                    <image :src="root+'/web/statics/img/app/common/icon-share1.png'"></image>
+                    <image src="../../../static/image/icon/icon-share1.png"></image>
                     <text style="background-color:#F84469;color: #fff;">分享商品</text>
                 </view>
             </block>
@@ -314,8 +314,8 @@
         margin-right: 10px;
     }
     .bd-tags .bd-tag image{
-        width: 40rpx;
-        height: 40rpx;
+        width: 32rpx;
+        height: 32rpx;
     }
     .bd-tags .bd-tag text{
         background: #FED2D5;
@@ -332,7 +332,6 @@
         padding: 5rpx 10rpx;
     }
     .bd-tag-share image{
-        zoom: .7;
         margin-right: -10rpx;
     }
     .bd-tag-share text{

components/page-component/goods/u-attr.vue

@@ -63,6 +63,7 @@
                         v-if="is_show_left && (goods.type === 'goods' || is_must_left)"
                         class="box-grow-1"
                         :class="cartClass"
+                        style="color: #ffffff;"
                         @click="leftSubmit">
                         <slot name="left_slot"></slot>
                         <template v-if="!$slots.left_slot">{{leftText}}</template>

pages/share/level/level.vue

@@ -2,9 +2,10 @@
     <view class="app-layout">
         <app-layout>
             <view class="app-level" :style="bg" v-if="list">
-                <view class="title" v-if="list.length > 0">
+                <!--<view class="title" v-if="list.length > 0">
                     {{list.length > 1 ? (list.length == 2 ? '两' : '三') + '者满足其一即可升级' : '满足以下条件即可升级'}}
-                </view>
+                </view>-->
+                <view class="title">等级说明</view>
                 <view class="list">
                     <block v-for="(item, index) in list" :key="index">
                         <view class="item dir-left-nowrap">
@@ -16,15 +17,15 @@
                                 <text>{{item.condition}}</text>
                                 人
                             </view>
-                            <view class="content box-grow-1" v-else-if="item.condition_type == 2">累计佣金达到
+                            <view class="content box-grow-1" v-else-if="item.condition_type == 2">当月业绩累计
                                 <text class="price">{{item.condition}}</text>
                             </view>
-                            <view class="content box-grow-1" v-else-if="item.condition_type == 3">已提现佣金达到
+                           <!-- <view class="content box-grow-1" v-else-if="item.condition_type == 3">已提现佣金达到
                                 <text class="price">{{item.condition}}</text>
                             </view>
                             <view class="content box-grow-1" v-else-if="item.condition_type == 4">累计消费金额达到
                                 <text class="price">{{item.condition}}</text>
-                            </view>
+                            </view>-->
                             <view class="box-grow-0 dir-left-nowrap cross-center right" @click="ruleClick(item)">
                                 <view class="box-grow-0">等级说明</view>
                                 <image class="box-grow-0 arrow-right" src="/static/image/icon/arrow-right.png"></image>
@@ -32,9 +33,9 @@
                         </view>
                     </block>
                 </view>
-                <view class="level-btn" @click="levelUp" v-if="list.length > 0">
+                <!--<view class="level-btn" @click="levelUp" v-if="list.length > 0">
                     立即升级
-                </view>
+                </view>-->
                 <view class="dialog dir-left-nowrap main-center cross-center" v-if="dialog.show">
                     <view class="content dir-top-nowrap cross-center" :style="dialogBg">
                         <view class="dialog-title">{{dialog.condition_text}}</view>

plugins/advance/components/detail-ad.vue

@@ -1,20 +1,26 @@
 <template>
 	<view class="detail-ad dir-left-nowrap main-between" :class="theme === 'a' ? 'default' : theme + '-m-back ' + theme">
-		<view class="text dir-left-nowrap main-between cross-center" style="margin-left: 24rpx;">
-			<text class="title">预售</text>
-			<text class="count">已抢{{sales}}件</text>
+		<view class="app-title">
+			<text class="icon-text">限时预售</text>
+			<view class="price">
+				<view class="current">
+					￥{{detail.price_min === detail.price_max?detail.price_min:`${detail.price_min}~${detail.price_max}`}}
+					<text>历史最低</text>
+				</view>
+				<view class="original">￥{{detail.original_price}}</view>
+			</view>
 		</view>
-		<view class="count-down dir-top-nowrap" style="background-color: #FAC4D1;padding-left: 24rpx;">
-			<text class="advance-title" style="color: #F95C87;">距定金截止</text>
-			<view class="dir-left-nowrap main-center cross-center">
-				<view class="num">{{d}}</view>
-				<view class="word">天</view>
-				<view class="num">{{h}}</view>
-				<view class="word">时</view>
-				<view class="num">{{m}}</view>
-				<view class="word">分</view>
-				<view class="num">{{s}}</view>
-				<view class="word">秒</view>
+		<view class="app-content dir-top-nowrap" style="background-color: #FAC4D1;padding-left: 24rpx;">
+			<text class="app-text" style="color: #F95C87;">距离结束仅剩</text>
+			<view class="app-time cross-center main-around">
+				<text class="app-num app-right" v-if="day > 0">{{d}}</text>
+				<text style="color: #FF3A67;" v-if="day > 0">天</text>
+				<text class="app-num app-right">{{h}}</text>
+				<text style="color: #FF3A67;">时</text>
+				<text class="app-num app-right">{{m}}</text>
+				<text style="color: #FF3A67;">分</text>
+				<text class="app-num app-right">{{s}}</text>
+				<text style="color: #FF3A67;">秒</text>
 			</view>
 		</view>
 	</view>
@@ -54,66 +60,121 @@
                     return 0;
                 }
             },
-			theme: String
+			theme: String,
+			detail: Object,
 	    }
     }
 </script>
 
 <style scoped lang="scss">
-	.default {
-		background:linear-gradient(to right, #ff5527, #ff2755);
-	}
 	.detail-ad {
 		width: #{750rpx};
-		height: #{88rpx};
-		// padding: 0 #{24rpx};
-		.text {
-			color: #ffffff;
-			.title {
-				display: inline-block;
-				font-size: #{32rpx};
-				margin-right: #{12rpx};
-				height: #{88upx};
-				line-height: #{88upx};
+		height: #{100rpx};
+		position: relative;
+		display: flex;
+		.app-image {
+			width: #{750rpx};
+			height: #{100rpx};
+			background-repeat: no-repeat;
+			background-size: 100% 100%;
+		}
+		.app-title {
+			width: #{430rpx};
+			color: white;
+			font-size: #{22rpx};
+			display: flex;
+			align-items: center;
+			padding-left: 20rpx;
+			flex: 1;
+			position: relative;
+			overflow: hidden;
+			background: linear-gradient(to right, #FB3B62, #FF3E7A,#FF478D);
+			&:after{
+				content: '';
+				position: absolute;
+				width: 70rpx;
+				height: 70rpx;
+				bottom: 0;
+				right: 230rpx;
+				background: url("../../../plugins/miaosha/image/icon-clock.png") no-repeat;
+				transform: rotate(-45deg);
+				z-index: 0;
+				opacity: .85;
 			}
-			.count {
-				display: inline-block;
-				padding: #{5upx 16rpx};
-				border-radius: #{18rpx};
-				background-color: rgba(0,0,0,.2);
-				font-size: #{22rpx};
+			.icon-text{
+				background: #d73155;
+				width: 100rpx;
+				height: 85%;
+				font-size: 30rpx;
+				display: block;
+				border-radius: 10rpx;
+				text-align: center;
+				padding: 0 10rpx;
 			}
-		}
-		.count-down {
-			height: #{88rpx};
-			text-align: center;
-			.advance-title {
-				font-size: #{20rpx};
+			.price{
+				display: flex;
+				flex-direction: column;
 				color: #ffffff;
-				margin-top: #{5rpx};
-				margin-bottom: #{5rpx};
+				margin-left: 10rpx;
+				.current{
+					font-size: 36rpx;
+					text{
+						background: #d73155;
+						border-radius: 10rpx;
+						padding: 5rpx 10rpx;
+						margin-left: 10rpx;
+						font-size: 24rpx;
+					}
+				}
+				.original{
+					font-size: 22rpx;
+					text-decoration: line-through;
+				}
 			}
-			.num {
-				width:#{40rpx};
-				height: #{36rpx};
-				line-height: #{36rpx};
+		}
+		.app-content {
+			background: #FAC4D1;
+			position: absolute;
+			right: 0;
+			top: 0;
+			height: #{100rpx};
+			width: #{230rpx};
+			.app-text {
+				font-size: #{22rpx};
+				color: #ffffff;
 				text-align: center;
-				border-radius: #{4rpx};
-				font-size: #{24rpx};
-				// color: #353535;
-				color: #fff;
-				// background-color: #ffffff;
-				background-color: #FF3A67;
+				margin-top: #{6rpx};
 			}
-			.word {
-				width: #{35rpx};
-				height: #{36rpx};
-				line-height: #{36rpx};
-				text-align: center;
-				font-size: #{24rpx};
-				// color: #ffffff;
-				color: #FF3A67;
+			.over-text {
+				font-size: #{32rpx};
+				line-height: #{100rpx};
+				margin-top: 0;
+			}
+			.app-time {
+				color: white;
+				height: #{40rpx};
+				font-size: #{26rpx};
+				margin-top: #{6rpx};
+				.app-num {
+					display: inline-block;
+					width: #{44rpx};
+					height: #{40rpx};
+					line-height: #{40rpx};
+					// background-color:white;
+					background-color: #FF3A67;
+					border-radius: #{8rpx};
+					// color: #353535;
+					color: #fff;
+					text-align: center;
+				}
+				.app-right {
+					margin: 0 #{4rpx};
+				}
 			}
 		}
 	}
+
+	.default {
+		background:linear-gradient(to right, #ff5527, #ff2755);
+	}
 </style>

plugins/advance/components/detail-bottom-button.vue

@@ -11,23 +11,41 @@
 			</view>
 			<view class="but" @click="set_favorite(favorite)">
 				<app-form-id>
-					<view  class="but dir-top-nowrap main-left cross-center" >
+					<view  class="but dir-top-nowrap main-left cross-center border-left" >
 						<image class="icon" :src="favorite ? '/static/image/icon/icon-favorite-active.png' : '/static/image/icon/icon-favorite.png'"></image>
 						<text  class="text">收藏</text>
 					</view>
 				</app-form-id>
 			</view>
+			<view class="but" @click="kefu">
+				<app-form-id>
+					<view  class="but dir-top-nowrap main-left cross-center" >
+						<image class="icon"src="/static/image/icon/icon-kefu.png"></image>
+						<text  class="text">客服</text>
+					</view>
+				</app-form-id>
+			</view>
             <view class="buttons dir-left-nowrap" v-if="detail.goods_num == 0">
                 <view class="dir-top-nowrap main-center cross-center" style="background-color: #CDCDCD;color: #fff;width: 100%;">
                     <text>已售罄</text>
                 </view>
             </view>
 			<view v-else class="buttons dir-left-nowrap">
-				<view class="advance-title dir-top-nowrap main-center cross-center" :class="theme === 'b' || theme === 'a' || theme === 'f' ? theme+ '-s-back ' + 'text ' + theme : theme+ '-s-back ' + theme+ '-m-text ' + theme">
+				<view class="advance-title dir-top-nowrap main-center cross-center cart-btn"
+					  style="height: 80%;color: #ffffff;"
+					  :class="theme === 'b' || theme === 'a' || theme === 'f' ? theme+ '-s-back ' + 'text ' + theme : theme+ '-s-back ' + theme+ '-m-text ' + theme">
 					<text>预售截止</text>
-					<text>{{getDate(end_prepayment_at)}}</text>
+					<text style=" word-break: break-all;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 1;
+        overflow: hidden;
+        white-space: normal !important;">{{getDate(end_prepayment_at)}}</text>
 				</view>
-				<view class="pay" :class="theme+ '-m-back ' + theme" @click="set_active">
+				<view class="pay buy-btn"
+					  style="height: 80%;color: #ffffff;"
+					  :class="theme+ '-m-back ' + theme" @click="set_active">
 					<app-form-id>
 						<text>
 							支付定金
@@ -37,11 +55,15 @@
 			</view>
 		</view>
 		<view  v-if="!active" class="dir-left-nowrap">
-			<view class="title dir-top-nowrap main-center cross-center" :class="theme === 'b' || theme === 'a' || theme === 'f' ? theme+ '-s-back ' + 'text ' + theme : theme+ '-s-back ' + theme+ '-m-text ' + theme">
+			<view class="title dir-top-nowrap main-center cross-center cart-btn"
+				  style="height: 80%;color: #ffffff;"
+				  :class="theme === 'b' || theme === 'a' || theme === 'f' ? theme+ '-s-back ' + 'text ' + theme : theme+ '-s-back ' + theme+ '-m-text ' + theme">
 				<text>预售截止</text>
 				<text>{{getDate(end_prepayment_at)}}</text>
 			</view>
-			<view class="pay" :class="[theme+ '-m-back ' + theme, buttonDisabled ? 'dis-button' : '']" @click="pay">
+			<view class="pay buy-btn"
+				  style="height: 80%;color: #ffffff;"
+				  :class="[theme+ '-m-back ' + theme, buttonDisabled ? 'dis-button' : '']" @click="pay">
 				<text>
 					支付定金
 				</text>
@@ -114,6 +136,11 @@
                     })
                 }
             },
+			kefu(){
+				uni.navigateTo({
+					url: "/pages/web/web?url="+this.mall.setting.web_service_url
+				})
+			},
             route_jump() {
                 uni.navigateTo({
 	                url: `/pages/index/index`,
@@ -293,8 +320,8 @@
 			}
 			.pay {
 				width: 50%;
-				height: #{110rpx};
-				line-height: #{110rpx};
+				height: #{90rpx};
+				line-height: #{90rpx};
 				text-align: center;
 				color: #ffffff;
 				font-size: #{28rpx};
@@ -316,6 +343,35 @@
 		margin: 0;
 	}
 	.dis-button {
-		background-color: #dddddd;
+		/*background-color: #dddddd;*/
+	}
+	.cart-btn{
+		height: 90%;
+		border-top-left-radius: #{30rpx};
+		border-bottom-left-radius: #{30rpx};
+		position: relative;
+		transform: translateY(-50%);
+		top: 50%;
+		background: linear-gradient(to right, #A494F6,#BC8AE7,#E674B2);
+	}
+	.cart-btn:after{
+		content: "";
+		position: absolute;
+		right: 0;
+		height: 60%;
+		background: #ffffff;
+		width: 1px;
+		top: 50%;
+		transform: translateY(-50%);
+	}
+	.buy-btn{
+		height: 90%;
+		border-top-right-radius: #{30rpx};
+		border-bottom-right-radius: #{30rpx};
+		position: relative;
+		transform: translateY(-50%);
+		top: 50%;
+		background: linear-gradient(to right, #E674B2,#FE3666);
+		margin-right: 24rpx;
 	}
 </style>

plugins/advance/components/detail-price-share.vue

@@ -1,65 +1,25 @@
 <template>
     <view class="detail-price-share" :style="{paddingBottom: level_show !== 2 ? '20rpx' : 0}">
-        <view class="top dir-left-nowrap main-between">
-            <view class="price">
-                <view class="member-price" v-if="level_show == 1">
-                    <view class="member dir-left-nowrap cross-bottom" :class="theme">
-                        <text class="m-p" v-if="member_price_status === 0" :class="theme+'-m-text ' + theme">
-                            <text class="symbol">￥</text>
-                            {{group_min_member_price}}
-                        </text>
-                        <text class="m-p" v-if="member_price_status === 1" :class="theme+'-m-text ' + theme">
-                            <text class="symbol">￥</text>
-                            {{group_min_member_price}}-
-                            <text class="symbol"></text>
-                            {{group_max_member_price}}
-                        </text>
-                        <text class="logo" :class="theme+'-m-text ' + theme + ' ' + themeObject.backO"
-                              style="margin-bottom: 8upx;">会员价
-                        </text>
-                        <app-sup-vip :is_vip_card_user="is_vip_card_user" margin="0 0 8rpx 10rpx" v-if="discount"
-                                     :discount="discount"></app-sup-vip>
-                    </view>
-                    <view class="yushou">
-                        <text class="p" :class="theme+'-m-text ' + theme" v-if="status === 0">
-                            <text class="symbol">￥</text>
-                            {{price_min}}
-                        </text>
-                        <text class="p" :class="theme+'-m-text ' + theme" v-if="status === 1">
-                            <text class="symbol">￥</text>
-                            {{price_min}}-
-                            <text class="symbol"></text>
-                            {{price_max}}
-                        </text>
-                        <text class="p-t" :class="theme+'-m-text ' + theme">预售价</text>
-                        <text class="ori" v-if="isUnderlinePrice == 1">
-                            ￥{{original_price}}
-                        </text>
-                    </view>
-                </view>
-
-                <view v-if="level_show == 2 || level_show == 0" class="dir-left-nowrap cross-bottom">
-                    <text class="presale" :class="theme+'-m-text ' + theme" v-if="status === 0">
-                        <text class="symbol">￥</text>
-                        {{price_min}}
-                    </text>
-                    <text class="presale" :class="theme+'-m-text ' + theme" v-if="status === 1">
-                        <text class="symbol">￥</text>
-                        {{price_min}}-
-                        <text class="symbol"></text>
-                        {{price_max}}
-                    </text>
-                    <text style="margin-bottom: 8upx;" :class="theme+'-m-text ' + theme" class="title">预售价</text>
-                    <app-sup-vip :is_vip_card_user="is_vip_card_user" margin="0 0 8rpx 10rpx" v-if="discount"
-                                 :discount="discount"></app-sup-vip>
+        <view class="goods-name">
+            <view class="name">{{detail.name}}
+                <view v-if="detail.sales" class="bd-sales">销量{{detail.sales}}{{detail.unit}}</view>
+            </view>
+            <view class="subtitle" v-if="detail.subtitle">{{detail.subtitle}}</view>
+        </view>
+        <view class="bd-tags">
+            <div class="bd-tag-group">
+                <view class="bd-tag">
+                    <image src="../../../static/image/icon/icon-zheng.png"></image>
+                    <text>正品保证</text>
                 </view>
-                <view class="original-price" v-if="(level_show == 2 || level_show === 0) && isUnderlinePrice == 1">
-                    ￥{{original_price}}
+                <view class="bd-tag">
+                    <image src="../../../static/image/icon/icon-tui.png" style="width: 34rpx;"></image>
+                    <text>退换无忧</text>
                 </view>
-            </view>
-            <view class="share dir-top-nowrap main-between" @click="share_show">
-                <image src="/static/image/icon/icon-share.png"></image>
-                <text>分享</text>
+            </div>
+            <view class="bd-tag bd-tag-share" @click="share_show" style="background: #ff3366">
+                <image src="../../../static/image/icon/icon-share1.png"></image>
+                <text style="background-color:#F84469;color: #fff;">分享商品</text>
             </view>
         </view>
         <view class="bottom">
@@ -148,7 +108,8 @@
                     return false
                 },
             },
-            themeObject: Object
+            themeObject: Object,
+            detail: Object,
 
         },
         mounted() {
@@ -308,6 +269,22 @@
         width: 100%;
         padding: 20upx;
         margin-top: 16upx;
+        .goods-name{
+            .name{
+                font-size: 30upx;
+                color: #000000;
+                line-height: 42upx;
+                margin-top: 5upx;
+                font-weight: 600;
+            }
+            .subtitle{
+                margin-top: 23upx;
+                font-size: 24upx;
+                line-height: 34upx;
+                color: #999999;
+            }
+        }
+
         .presale {
             font-size: #{56rpx};
             margin-right: #{16rpx};
@@ -353,6 +330,58 @@
             }
         }
     }
+    .bd-sales {
+        color: #999999;
+        font-size: 30rpx;
+        float: right;
+    }
+    .bd-tags{
+        width: 100%;
+        display: flex;
+        margin-top: 24rpx;
+        justify-content: space-between;
+    }
+    .bd-tag-group{
+        flex: 1;
+        display: flex;
+    }
+    .bd-tags .bd-tag{
+        display: flex;
+        align-items: center;
+        margin-right: 10px;
+    }
+    .bd-tags .bd-tag image{
+        width: 32rpx;
+        height: 32rpx;
+    }
+    .bd-tags .bd-tag text{
+        background: #FED2D5;
+        color: #E73E67;
+        padding: 5rpx 10rpx;
+        border-radius: 10rpx;
+        font-size: 26rpx;
+        margin-left: 10rpx;
+    }
+    .bd-tag-share{
+        background: #FED2D5;
+        color: #E73E67;
+        border-radius: 10rpx;
+        padding: 5rpx 10rpx;
+    }
+    .bd-tag-share image{
+        margin-right: -10rpx;
+    }
+    .bd-tag-share text{
+        font-size: 30rpx;
+        margin-left: 0;
+    }
+    .bd-vip{
+        margin-top: 24rpx;
+    }
+    .bd-vip image{
+        height: 72rpx;
+        width: 100%;
+    }
 
     .member-price {
         .symbol {

plugins/advance/detail/detail.vue

@@ -22,6 +22,7 @@
                 v-bind:m="m"
                 v-bind:s="s"
                 v-bind:theme="getTheme"
+                v-bind:detail="detail"
             ></detail-ad>
             <!--商品价格-->
             <detail-price-share
@@ -45,19 +46,23 @@
                 v-bind:has-poster-nav="true"
                 v-bind:poster-config="poster_config + `&goods_id=` + detail.id"
                 v-bind:poster-generate="poster_generate + `&goods_id=` + detail.id"
+                v-bind:detail="detail"
             ></detail-price-share>
             <!-- 详情标题 -->
-            <app-name v-bind:name="detail.name"></app-name>
+            <!--<app-name v-bind:name="detail.name"></app-name>-->
             <view v-if="detail.subtitle" class="goods-subtitle">
                 <view class="t-omit-three">{{detail.subtitle}}</view>
             </view>
             <!--商品会员-->
 			<view class="join-member" v-if="detail.level_show === 2">
-				<app-join-member
+                <view class="bd-vip" @click="goToMember">
+                    <img :src="root+'/web/statics/img/app/common/vip.png'" alt="">
+                </view>
+				<!--<app-join-member
                     v-bind:member-min-price="`${detail.group_min_member_price}`"
                     v-bind:member-max-price="`${detail.group_min_member_price}`"
                     v-bind:price="`${detail.original_price}`"
-				></app-join-member>
+				></app-join-member>-->
 			</view>
             <!--超级会员卡-->
 			<view class="detail-vip" v-if="detail.vip_card_appoint.discount > 0">
@@ -214,6 +219,7 @@
                 poster_config: this.$api.advance.poster_config,
                 poster_generate: this.$api.advance.poster_generate,
                 titleBg:'rgba(255,255,255,0)',
+                root: this.$siteInfo.root,
             }
 	    },
         onPageScroll:function(e){
@@ -258,6 +264,11 @@
             clearInterval(this.end_time);
         },
 	    methods: {
+            goToMember(){
+                uni.navigateTo({
+                    url:'/pages/member/index/index'
+                })
+            },
             getMall(e) {
                 this.is_open = e.is_open;
             },
@@ -527,4 +538,11 @@
     .goods-margin {
         margin-top: 20upx;
     }
+    .bd-vip{
+        padding: 24rpx 0;
+    }
+    .bd-vip image{
+        height: 72rpx;
+        width: 100%;
+    }
 </style>