update

mobile-code/src/components/app-swiper.vue

@@ -1,16 +1,21 @@
 <template>
 	<div class="swiper-wrap" :style="{'width': widthFn,'height': heightFn}">
-		<swiper :indicator-dots="true" :autoplay="true" :interval="5000" :duration="150" class="tui-banner-swiper" :circular="true" indicator-color="#969696" indicator-active-color="#F04545">
+		<swiper :indicator-dots="!tagShow" :autoplay="autoplay" :interval="5000" :duration="150" class="tui-banner-swiper" :circular="true" indicator-color="#969696" indicator-active-color="#F04545" @change="bannerChange">
 			<swiper-item v-for="(item, index) in data" :key="index" @tap.stop="detail">
 				<img src="./../static/images/swiper.png" class="tui-slide-image" mode="center" />
 			</swiper-item>
 		</swiper>
+		<app-tag v-if="tagShow" type="translucent" shape="circleLeft" size="small">{{index + 1}}/{{data.length}}</app-tag>
 	</div>
 </template>
 
 <script>
+import appTag from '@/components/module/app-tag.vue'
 export default {
 	name: 'app-swiper',
+	components: {
+		appTag
+	},
 	props: {
 		data: {
 			type: Array,
@@ -18,6 +23,17 @@ export default {
 				return [1, 2]
 			}
 		},
+		// 是否显示右下角tag
+		tagShow: {
+			type: Boolean,
+			default: false
+		},
+		// 是否自动播放
+		autoplay: {
+			type: Boolean,
+			default: true
+		},
+		// 宽度
 		width: {
 			type: Object,
 			default: () => {
@@ -27,6 +43,7 @@ export default {
 				}
 			}
 		},
+		// 高度
 		height: {
 			type: Object,
 			default: () => {
@@ -38,7 +55,9 @@ export default {
 		}
 	},
 	data() {
-		return {}
+		return {
+			index: 0
+		}
 	},
 	computed: {
 		widthFn() {
@@ -57,6 +76,9 @@ export default {
 		}
 	},
 	methods: {
+		bannerChange: function(e) {
+			this.index = e.detail.current
+		},
 		detail(data) {
 			this.$emit('detail', data)
 		}
@@ -66,6 +88,7 @@ export default {
 
 <style lang="scss" scoped>
 .swiper-wrap {
+	position: relative;
 	height: 480px;
 	.tui-banner-swiper {
 		height: 100%;
@@ -96,6 +119,13 @@ export default {
 	}
 
 	/* #endif */
+	// tag
+	.tui-tag-class {
+		position: absolute;
+		color: #fff;
+		bottom: 30rpx;
+		right: 0;
+	}
 }
 
 </style>

mobile-code/src/components/module/app-tag.vue

@@ -0,0 +1,329 @@
+<template>
+	<view class="tui-tag-class" :class="[size?'tui-tag-'+size:'tui-tag',getClassName(shape,plain),getTypeClass(type,plain)]"
+	 @tap="handleClick" v-if="visible">
+		<slot></slot>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'tuiTag',
+	props: {
+		type: {
+			type: String,
+			default: 'primary'
+		},
+		// '', small
+		size: {
+			type: String,
+			default: ''
+		},
+		// circle, square，circleLeft，circleRight
+		shape: {
+			type: String,
+			default: 'square'
+		},
+		// 是否空心
+		plain: {
+			type: Boolean,
+			default: false
+		},
+		// 是否可见
+		visible: {
+			type: Boolean,
+			default: true
+		}
+	},
+	methods: {
+		handleClick() {
+			this.$emit('click')
+		},
+		getTypeClass: function(type, plain) {
+			return plain ? 'tui-' + type + '-outline' : 'tui-' + type
+		},
+		getClassName: function(shape, plain) {
+			// circle, square，circleLeft，circleRight
+			var className = plain ? 'tui-tag-outline ' : ''
+			if (shape != 'square') {
+				if (shape == 'circle') {
+					className = className + (plain ? 'tui-tag-outline-fillet' : 'tui-tag-fillet')
+				} else if (shape == 'circleLeft') {
+					className = className + 'tui-tag-fillet-left'
+				} else if (shape == 'circleRight') {
+					className = className + 'tui-tag-fillet-right'
+				}
+			}
+			return className
+		}
+	}
+}
+</script>
+
+<style scoped>
+/* color start*/
+
+.tui-primary {
+  background: #5677fc !important;
+  color: #fff;
+}
+
+.tui-light-primary {
+  background: #5c8dff !important;
+  color: #fff;
+}
+
+.tui-dark-primary {
+  background: #4a67d6 !important;
+  color: #fff;
+}
+
+.tui-dLight-primary {
+  background: #4e77d9 !important;
+  color: #fff;
+}
+
+.tui-danger {
+  background: #ed3f14 !important;
+  color: #fff;
+}
+
+.tui-red {
+  background: #ff201f !important;
+  color: #fff;
+}
+
+.tui-warning {
+  background: #ff7900 !important;
+  color: #fff;
+}
+
+.tui-green {
+  background: #19be6b !important;
+  color: #fff;
+}
+
+.tui-high-green {
+  background: #52dcae !important;
+  color: #52dcae;
+}
+
+.tui-black {
+  background: #000 !important;
+  color: #fff;
+}
+
+.tui-white {
+  background: #fff !important;
+  color: #333 !important;
+}
+
+.tui-translucent {
+  background: rgba(0, 0, 0, 0.7);
+}
+
+.tui-light-black {
+  background: #333 !important;
+}
+
+.tui-gray {
+  background: #ededed !important;
+}
+
+.tui-phcolor-gray {
+  background: #ccc !important;
+}
+
+.tui-divider-gray {
+  background: #eaeef1 !important;
+}
+
+.tui-btn-gray {
+  background: #ededed !important;
+  color: #999 !important;
+}
+
+.tui-hover-gray {
+  background: #f7f7f9 !important;
+}
+
+.tui-bg-gray {
+  background: #fafafa !important;
+}
+
+.tui-light-blue {
+  background: #ecf6fd;
+  color: #4dabeb !important;
+}
+
+.tui-light-brownish {
+  background: #fcebef;
+  color: #8a5966 !important;
+}
+
+.tui-light-orange {
+  background: #fef5eb;
+  color: #faa851 !important;
+}
+
+.tui-light-green {
+  background: #e8f6e8;
+  color: #44cf85 !important;
+}
+
+.tui-primary-outline::after {
+  border: 1px solid #5677fc !important;
+}
+
+.tui-primary-outline {
+  color: #5677fc !important;
+  background: none;
+}
+
+.tui-danger-outline {
+  color: #ed3f14 !important;
+  background: none;
+}
+
+.tui-danger-outline::after {
+  border: 1px solid #ed3f14 !important;
+}
+
+.tui-red-outline {
+  color: #ff201f !important;
+  background: none;
+}
+
+.tui-red-outline::after {
+  border: 1px solid #ff201f !important;
+}
+
+.tui-warning-outline {
+  color: #ff7900 !important;
+  background: none;
+}
+
+.tui-warning-outline::after {
+  border: 1px solid #ff7900 !important;
+}
+
+.tui-green-outline {
+  color: #44cf85 !important;
+  background: none;
+}
+
+.tui-green-outline::after {
+  border: 1px solid #44cf85 !important;
+}
+
+.tui-high-green-outline {
+  color: #52dcae !important;
+  background: none;
+}
+
+.tui-high-green-outline::after {
+  border: 1px solid #52dcae !important;
+}
+
+.tui-gray-outline {
+  color: #999 !important;
+  background: none;
+}
+
+.tui-gray-outline::after {
+  border: 1px solid #ccc !important;
+}
+
+.tui-black-outline {
+  color: #333 !important;
+  background: none;
+}
+
+.tui-black-outline::after {
+  border: 1px solid #333 !important;
+}
+
+.tui-white-outline {
+  color: #fff !important;
+  background: none;
+}
+
+.tui-white-outline::after {
+  border: 1px solid #fff !important;
+}
+
+/* color end*/
+
+/* tag start*/
+
+.tui-tag {
+  padding: 16upx 26upx 18px;
+  font-size: 28upx;
+  border-radius: 6upx;
+  /* display: inline-block;
+  vertical-align: middle; */
+  line-height: 28upx;
+}
+
+.tui-tag-small {
+  padding: 8upx 16upx 10px;
+  font-size: 24upx;
+  border-radius: 6upx;
+  /* display: inline-block;
+  vertical-align: middle; */
+  line-height: 24upx;
+}
+
+.tui-tag-outline {
+  position: relative;
+  background: none;
+  color: #5677fc;
+}
+
+.tui-tag-outline::after {
+  content: "";
+  position: absolute;
+  width: 200%;
+  height: 200%;
+  -webkit-transform-origin: 0 0;
+  transform-origin: 0 0;
+  -webkit-transform: scale(0.5, 0.5);
+  transform: scale(0.5, 0.5);
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  left: 0;
+  top: 0;
+  border-radius: 80upx;
+  border: 1px solid #5677fc;
+}
+
+.tui-tag-fillet {
+  border-radius: 50upx;
+}
+
+.tui-white.tui-tag-fillet::after {
+  border-radius: 80upx;
+}
+
+.tui-tag-outline-fillet::after {
+  border-radius: 80upx;
+}
+
+.tui-tag-fillet-left {
+  border-radius: 50upx 0 0 50upx;
+}
+
+.tui-tag-fillet-right {
+  border-radius: 0 50upx 50upx 0;
+}
+
+.tui-tag-fillet-left.tui-tag-outline::after {
+  border-radius: 100upx 0 0 100upx;
+}
+
+.tui-tag-fillet-right.tui-tag-outline::after {
+  border-radius: 0 100upx 100upx 0;
+}
+
+/* tag end*/
+
+</style>

mobile-code/src/components/module/app-trademark.vue

@@ -1,8 +1,8 @@
 <template>
 	<!-- 商标组件 -->
 	<div class="app-trademark">
-		<div>
-			<img src alt mode="widthFix" />
+		<div class="img-wrap">
+			<img src='../../static/images/common/trademark.png' alt mode="widthFix" />
 		</div>
 	</div>
 </template>
@@ -14,4 +14,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.app-trademark {
+	width: 100%;
+	padding: 40px 0;
+	@include direction(center, center);
+	background-color: $backColor;
+	.img-wrap {
+		width: 138px;
+	}
+}
 </style>

mobile-code/src/manifest.json

@@ -49,8 +49,7 @@
                         "^/api": ""
                     }
                 }
-            },
-            "open": true
+            }
         },
         "sdkConfigs" : {
             "maps" : {

mobile-code/src/pages/goods/components/buy-foot.vue

@@ -0,0 +1,50 @@
+<template>
+	<div class="app-footer">
+        <div class="btn-left">
+            <div class="btn-wrap">
+                <i class="iconfont iconxiaoxi"></i>
+                <div class="btn-text">客服</div>
+            </div>
+            <div class="btn-wrap">
+                <i class="iconfont icondianpu"></i>
+                <div class="btn-text">店铺</div>
+            </div>
+        </div>
+        <div class="btn-right">
+            <div class="button-com success">立即购买</div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style lang="scss" scoped>
+.app-footer {
+    @include direction(center, space-between);
+    .btn-left {
+        @include direction(center, space-evenly);
+        width: 36%;
+        .iconfont {
+            font-size: 44px;
+        }
+        .btn-text {
+            font-size: 24px;
+            font-weight: 200;
+            transform: scale(0.9);
+        }
+    }
+    .btn-right {
+        width: 62%;
+        @include direction(center, center);
+        .button-com {
+            width: calc(90% - 30px);
+            height: 50px;
+            line-height: 50px;
+            font-size: 32px;
+            font-weight: 400;
+        }
+    }
+}
+</style>

mobile-code/src/pages/goods/detail.vue

@@ -1,12 +1,62 @@
 <template>
 	<div class="app-content">
-
+		<app-swiper :height="{type: 'number',val: 750}" :tagShow="true" />
+		<!-- 商品简介 -->
+		<div class="shop-intro">
+			<div class="app-price app-bold">
+				<text>￥</text>
+				<text class="app-size-34">49</text>
+				<text>.00</text>
+			</div>
+			<div class="tui-pro-titbox">
+				<div class="tui-pro-title app-size-32">谈判官明星同款耳坠韩国气质简约显脸瘦的耳环女百搭个性长款耳钉 个性水滴耳环【A2】</div>
+				<button open-type="share" class="tui-share-btn tui-share-position">
+					<app-tag type="gray" tui-tag-class="tui-tag-share tui-size" shape="circleLeft" size="small">
+						<div class="tui-icon tui-icon-partake" style="color:#999; font-size:15px"></div>
+						<!-- <tui-icon name="partake" color="#999" size="15"></tui-icon> -->
+						<text class="tui-share-text tui-gray">分享</text>
+					</app-tag>
+				</button>
+			</div>
+			<div class="shop-express app-font-color-3">
+				<div>快递：0.00</div>
+				<div>月销2000</div>
+				<div>浙江杭州</div>
+			</div>
+		</div>
+		<!-- 商品简介 -->
+		<!-- 商品详情 -->
+		<div class="module-wrap shop-detail">
+			<div class="module-tit app-size-30">商品详情</div>
+			<div class="module-det">
+				<img src="../../static/images/swiper.png" alt="" mode="widthFix" />
+			</div>
+		</div>
+		<!-- 商品详情 -->
+		<!-- 简要说明 -->
+		<div class="module-wrap shop-desc">
+			<div class="module-tit app-size-30">商品详情</div>
+			<div class="module-det">配送及费用： 除部分较偏地区，市区内一般免收配送费。市外配送费： 30元~100元不等。因鲜花的特殊性，需由专人配送费用高 于一般快递。 签收事宜： 通常情况下，我们由专人送到收花人手上，确保本人签收。 但特殊情况除外：比如收花人不在、不方便签收或者门卫 不让进等原因，我们将征求收花人意见或结合实际情况处 理。</div>
+		</div>
+		<!-- 简要说明 -->
+		<app-trademark />
+		<buy-foot />
 	</div>
 </template>
 
 <script>
+import AppSwiper from '@/components/app-swiper'
+import appTag from '@/components/module/app-tag.vue'
+import AppTrademark from '@/components/module/app-trademark'
+import buyFoot from './components/buy-foot.vue'
 export default {
 	name: 'goods-detail',
+	components: {
+		AppSwiper,
+		appTag,
+		AppTrademark,
+		buyFoot
+	},
 	data() {
 		return {}
 	},
@@ -15,4 +65,52 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.app-content {
+	padding-bottom: 120px;
+	// 公共模块
+	.module-wrap {
+		margin-top: 20px;
+		background-color: #fff;
+		.module-tit {
+			padding: 14px 30px;
+			border-bottom: 1px solid $borderColor;
+		}
+		.module-det {
+			color: $fontColor2;
+		}
+	}
+	// 公共模块
+	.shop-intro {
+		background: #fff;
+		padding: 30px 0 30px 30px;
+		.tui-pro-titbox {
+			margin: 30px 0 20px;
+			@include direction(center, space-between);
+			.tui-pro-title {
+				width: 80%;
+			}
+			.tui-share-btn {
+				display: block;
+				background: none;
+				margin: 0;
+				padding: 0;
+				border-radius: 0;
+				.tui-share-text {
+					padding-left: 4px;
+					color: $fontColor3;
+				}
+			}
+		}
+		.shop-express {
+			padding-right: 30px;
+			@include direction(center, space-between);
+		}
+	}
+	.shop-desc {
+		.module-det {
+			padding: 24px;
+			line-height: 48px;
+		}
+	}
+}
 </style>

mobile-code/src/static/css/base.scss

@@ -1,9 +1,9 @@
 /**
-*全局变量
+*全局公共样式
 */
 .app-content {
     // line-height: 1;
-    background-color: #f5f5f5;
+    background-color: $backColor;
     min-height: 100vh;
 }
 .gray_txt {
@@ -135,3 +135,62 @@
     flex: 1;
     /* NEW, Spec - Opera 12.1, Firefox 20+ */
 }
+
+// ===================    定义的全局字体普通样式 ========================
+
+.app-padding {
+	padding: 0 30px;
+}
+
+.app-font-color-2 {
+    color: $fontColor2;
+}
+
+.app-font-color-3 {
+    color: $fontColor3;
+}
+
+// 金额
+.app-price {
+	color: $mainColor;
+}
+
+.app-bold {
+	font-weight: bold;
+}
+
+.app-size-24 {
+	font-size: 24px;
+}
+
+.app-size-26 {
+	font-size: 26px;
+}
+
+.app-size-28 {
+	font-size: 28px;
+}
+
+.app-size-30 {
+	font-size: 30px;
+}
+
+.app-size-32 {
+	font-size: 32px;
+}
+
+.app-size-34 {
+	font-size: 34px;
+}
+
+.app-size-36 {
+	font-size: 36px;
+}
+
+.app-size-38 {
+	font-size: 38px;
+}
+
+.app-size-40 {
+	font-size: 40px;
+}

mobile-code/src/static/css/common.scss

@@ -26,7 +26,7 @@ page, body {
 .App_gray{
 	// line-height: 1;
 	min-height: 100vh;
-	background-color: #f5f5f5;
+	background-color: $backColor;
 }
 .App_row {
 	display: flex;
@@ -42,19 +42,6 @@ page, body {
     box-sizing: border-box;
 }
 
-footer {
-    width: 100%;
-    // max-width: 750px;
-    min-width: 320px;
-    height: 100px;
-    position: fixed;
-    text-align: center;
-    bottom: 0;
-    background: #fff;
-    box-shadow: -1px -1px 10px #cccccc; /*no*/
-	z-index: 100;
-}
-
 // 按钮公共样式
 .button-com {
 	display: inline-block;
@@ -110,23 +97,6 @@ footer {
 	line-height: 1.3;
 }
 
-/* 修改vant输入框样式 */
-.van-field__body {
-	padding-left: 20px;
-	height: 100%;
-}
-
-.van-field__control {
-	height: 100%;
-}
-.van-field__control::placeholder {
-	font-size: 34px;
-	font-weight: normal;
-	font-stretch: normal;
-	letter-spacing: 0.7px;
-	color: #cccccc;
-}
-
 /* 黑色蒙版 */
 .black_mask {
 	position: fixed;
@@ -145,27 +115,6 @@ footer {
 	}
 }
 
-// 弹窗关闭按钮
-.closemask {
-    position: absolute;
-    width: 30px;
-    height: 30px;
-    right: 39px;
-    top: 39px;
-}
-
- // 公共底部样式
-.pub_footer {
-			width: 100%;
-			height: 100px;
-			position: fixed;
-			text-align: center;
-			bottom: 0;
-			background: white;
-			box-shadow: -1px -1px 5px #cccccc;
-			z-index: 100;
-		}
-
 .app-footer {
     width: 100%;
     max-width: 750px; /*no*/
@@ -175,12 +124,10 @@ footer {
     text-align: center;
     bottom: 0;
     background: white;
-    box-shadow: -1px -1px 1px #cccccc; /*no*/
+    box-shadow: -4px -4px 6px #eee; /*no*/
     z-index: 100;
     font-size: 32px;
-    color: #3a1b04;
-    line-height: 90px;
-    background: #ffd11a;
+    // line-height: 90px;
     display: flex;
     justify-content: center;
     align-items: center;
@@ -191,6 +138,7 @@ footer {
         margin-right: 20px;
     }
   }
+
 .noMore{
 	color: #969799;
 	font-size: 24upx;
@@ -231,42 +179,6 @@ li{
 // }
 
 
-/* 分享按钮的公共样式 */
-
-.go_share {
-	width: 60upx;
-	height: 60upx;
-	position: fixed;
-	right: 5%;
-	top: 35upx;
-	opacity: 0.7;
-	float: right;
-	z-index: 99;
-}
-
-.go_share img {
-	width: 60upx;
-	height: 60upx;
-	float: right;
-}
-/*返回按钮的公共样式*/
-
-.returnback {
-	width: 60upx;
-	height: 60upx;
-	position: fixed;
-	left: 5%;
-	top: 35upx;
-	opacity: .7;
-	float: left;
-	z-index: 1;
-}
-
-.returnback img {
-	width: 60upx;
-	height: 60upx;
-	float: left;
-}
 .includecontent p img{
 	width: 100%;
 	height: auto;

mobile-code/src/static/css/reset.scss

@@ -43,7 +43,13 @@ uni-picker .uni-picker-item {
 // 修改image的图片样式
 image {
 	width: 100%;
-	// height: auto;
+	height: auto;
+}
+
+img {
+	width: 100%;
+	height: auto;
+	display: inline-block;
 }
 
 .datetime-picker{
@@ -63,3 +69,7 @@ image {
 	}
 
 }
+
+uni-button::after{
+	border: none;
+}

mobile-code/src/static/iconfont/iconfont.css

@@ -1,13 +1,12 @@
-
 @font-face {
   font-family: 'iconfont';  /* project id 1525256 */
-  src: url('https://at.alicdn.com/t/font_1525256_17ihf8xhl06.eot');
-  src: url('https://at.alicdn.com/t/font_1525256_17ihf8xhl06.eot?#iefix') format('embedded-opentype'),
-  url('https://at.alicdn.com/t/font_1525256_17ihf8xhl06.woff2') format('woff2'),
-  url('https://at.alicdn.com/t/font_1525256_17ihf8xhl06.woff') format('woff'),
-  url('https://at.alicdn.com/t/font_1525256_17ihf8xhl06.ttf') format('truetype'),
-  url('https://at.alicdn.com/t/font_1525256_17ihf8xhl06.svg#iconfont') format('svg');
-}
+  src: url('https://at.alicdn.com/t/font_1525256_qav13ygth5g.eot');
+  src: url('https://at.alicdn.com/t/font_1525256_qav13ygth5g.eot?#iefix') format('embedded-opentype'),
+  url('https://at.alicdn.com/t/font_1525256_qav13ygth5g.woff2') format('woff2'),
+  url('https://at.alicdn.com/t/font_1525256_qav13ygth5g.woff') format('woff'),
+  url('https://at.alicdn.com/t/font_1525256_qav13ygth5g.ttf') format('truetype'),
+  url('https://at.alicdn.com/t/font_1525256_qav13ygth5g.svg#iconfont') format('svg');
+}  
 
 .iconfont {
   font-family: "iconfont" !important;
@@ -65,3 +64,31 @@
   content: "\e73e";
 }
 
+.icondianhua:before {
+  content: "\e73f";
+}
+
+.iconditu:before {
+  content: "\e740";
+}
+
+.iconxiaoxi:before {
+  content: "\e741";
+}
+
+.icondianpu:before {
+  content: "\e742";
+}
+
+.iconfenxiang:before {
+  content: "\e743";
+}
+
+.iconxuanzhong:before {
+  content: "\e744";
+}
+
+.iconweixuanzhong:before {
+  content: "\e745";
+}
+

mobile-code/src/uni.scss

@@ -24,9 +24,9 @@ $fontColor3: #999999;
 $fontColor4: #bbbbbb;
 $fontColor5: #cccccc;
 // 边框
-$borderColor: #DDDDDD;
+$borderColor: #eee;
 // 背景色
-$backColorMain: #f5f5f5;
+$backColor: #f5f5f5;
 
 // minxin
 @mixin disFlexCen(){