商品详情

components/lxc-count/lxc-count.vue

@@ -1,176 +0,0 @@
-<template>
-	<view class="count-box" :class="status ? 'count-box-light' : 'count-box-gray'">
-		<view class="count-less count-pub" :class="[myValue <= min ? 'light' : 'gray']" @tap.stop="less"  @longpress='longpressLess' @touchend="handletouchend">-</view>
-		<view class="count-add count-pub" :class="[myValue >= max ? 'light' : 'gray']" @tap.stop="add" @longpress='longpressAdd' @touchend="handletouchend">+</view>
-		<input type="number" v-model="myValue" @focus="onFocus" @blur="onBlue" class="count-input"/>
-	</view>
-</template>
-
-<script>
-	export default {
-		data(){
-			return{
-				myValue: 0,
-				status: false,
-				timer: null
-			}
-		},
-		props: {
-			// 计数器中的值
-			value: {
-				type: Number,
-				default: 0
-			},
-			max: {
-				type: Number,
-				default: 10000
-			},
-			min: {
-				type: Number,
-				default: 0
-			},
-			// 点击当前数据的索引
-			index: {
-				type: Number
-			},
-			delayed: {
-				type: Number,
-				default: 200
-			}
-		},
-		created() {
-			this.myValue = this.value
-		},
-		watch:{
-			value(val) {
-				this.myValue = val
-			}
-		},
-		methods: {
-			onBlue() {
-				if(+this.myValue >= this.max) {
-					this.myValue = this.max
-					this.status = false
-				}else if(+this.myValue <= this.min) {
-					this.myValue = this.min
-					this.status = false
-				}else {
-					this.status = true
-					this.myValue = +this.myValue
-				}
-				if(!isNaN(this.myValue)) {
-					this.$emit('handleCount', this.myValue, this.index)
-				}else {
-					this.$emit('handleCount', 0, this.index)
-				}
-				
-			},
-			onFocus() {
-				this.status = true
-			},
-			add() {
-				this.addPublick()
-			},
-			addPublick() {
-				if(this.myValue >= this.max) {
-					this.status = false
-					this.myValue = this.max
-					clearInterval(this.timer)
-				}else {
-					this.status = true
-					this.myValue ++
-				}
-				this.$emit('handleCount', this.myValue, this.index)
-			},
-			longpressAdd() {
-				this.timer = setInterval(() => {
-					this.addPublick()
-				}, this.delayed)
-			},
-			less() {
-				this.lessPublick()
-			},
-			lessPublick() {
-				if(this.myValue <= this.min) {
-					clearInterval(this.timer)
-					this.status = false
-					this.myValue = this.min
-				}else {
-					this.status = true
-					this.myValue --
-				}
-				this.$emit('handleCount', this.myValue, this.index)
-			},
-			longpressLess() {
-				this.timer = setInterval(() => {
-					this.lessPublick()
-				}, this.delayed)
-			},
-			handletouchend() {
-				clearInterval(this.timer)
-			}
-		}
-	}
-</script>
-<style>
-	.gray{
-		background: #eef3f9;
-		color: #555555;
-	}
-	.light{
-		background: #f5f7fa;
-		color: #C8C7CC;
-	}
-	.count-box{
-		position: relative;
-		width: 220rpx;
-		height: 60rpx;
-		border-radius: 5px;
-		z-index: 1;
-		transition: all .3s;
-	}
-	.count-box-light{
-		border: 1px solid #C8C7CC;
-	}
-	.count-box-gray{
-		border: 1px solid #e4e4e4;
-	}
-	.count-pub{
-		position: absolute;
-		top: 50%;
-		transform: translate(0, -50%);
-		width: 60rpx;
-		height: 100%;
-		text-align: center;
-		font-size: 20px;
-	}
-	.count-less{
-		left: 0;
-		line-height: 26px;
-		border-right: 1px solid #C8C7CC;
-		background-color: #e4e4e4;
-		border-top-left-radius:4px;
-		border-bottom-left-radius:4px;
-	}
-	.count-add{
-		right: 0;
-		line-height: 26px;
-		border-left: 1px solid #C8C7CC;
-		background-color: #e4e4e4;
-		border-top-right-radius:4px;
-		border-bottom-right-radius:4px;
-	}
-	.count-input{
-		width: 110rpx;
-		height: 100%;
-		position: absolute;
-		top: 0;
-		left: 50%;
-		transform: translate(-50%, 0);
-		padding: 6rpx 10rpx;
-		box-sizing: border-box;
-		color: #808080;
-		font-size: 26rpx;
-		text-align: center;
-	}
-</style>

pagesHome/order/detail.vue

@@ -1,86 +1,90 @@
 <template>
 	<mobile-frame>
-		<scroll-view class="scrollView" scroll-with-animation :scroll-into-view="topItem" scroll-y="true"
-			@scroll="handleScroll">
-			<view class="main" id="top">
-				<view class="onemain">
-					<scroll-view scroll-y="true" class="scroll-view">
-						<view class="list-scroll-view">
-							<view class="one">
-								<swiper class="swiper" circular :indicator-dots="true" indicator-color="#ffffff"
-									indicator-active-color="#FB1438" :autoplay="true" :interval="3000" :duration="1000">
-									<swiper-item class="list" v-for="(item,index) in bannerList" :key="index">
-										<image class="image" :src="item.url" mode=""></image>
-									</swiper-item>
-								</swiper>
-							</view>
-							<view class="two">
-								<view class="two_1">
-									<view class="money_1">
-										<text>¥</text>
-										<text>{{info.sell_money}}</text>
-									</view>
-									<view class="money_2">
-										<text>¥</text>
-										<text>{{info.flow_money}}</text>
-									</view>
+		<view class="main">
+			<view class="onemain">
+				<scroll-view scroll-y="true" class="scroll-view" scroll-with-animation :scroll-into-view="topItem"
+					@scroll="handleScroll">
+					<view class="list-scroll-view" id="top">
+						<view class="one">
+							<swiper class="swiper" circular :indicator-dots="true" indicator-color="#ffffff"
+								indicator-active-color="#FB1438" :autoplay="true" :interval="3000" :duration="1000">
+								<swiper-item class="list" v-for="(item,index) in bannerList" :key="index">
+									<image class="image" :src="item.url" mode=""></image>
+								</swiper-item>
+							</swiper>
+						</view>
+						<view class="two">
+							<view class="two_1">
+								<view class="money_1">
+									<text>¥</text>
+									<text>{{info.sell_money}}</text>
 								</view>
-								<view class="two_2">{{info.name}}</view>
-								<view class="two_3">{{info.shot_brief}}</view>
-								<view class="two_4">
-									<text>运费{{info.freight}}元</text>
-									<text>{{info.send_time}}内发货</text>
+								<view class="money_2">
+									<text>¥</text>
+									<text>{{info.flow_money}}</text>
 								</view>
 							</view>
-							<view class="thr">
-								<view class="thr_1" @click="toChoose">
-									<view class="title">选择规格</view>
-									<text class="iconfont icon-dayufuhao"></text>
-								</view>
-								<view class="thr_1">
-									<view class="title">商品评价({{info.comment||0}})</view>
-									<text class="iconfont icon-dayufuhao"></text>
-								</view>
+							<view class="two_2">{{info.name}}</view>
+							<view class="two_3">{{info.shot_brief}}</view>
+							<view class="two_4">
+								<text>运费{{info.freight}}元</text>
+								<text>{{info.send_time}}内发货</text>
 							</view>
-							<view class="four">
-								<view class="four_1">
-									<image class="image" :src="shop.file"></image>
-									<view class="other">
-										<view class="name">{{shop.name}}</view>
-										<view class="other_1"><text>宝贝数</text>{{shop.num}}</view>
-									</view>
-								</view>
-								<view class="four_2">
-									<view class="grade">商品：<text>{{shop.grade||'5.00'}}</text></view>|
-									<view class="grade">发货：<text>{{shop.grade||'5.00'}}</text></view>|
-									<view class="grade">服务：<text>{{shop.grade||'5.00'}}</text></view>
-								</view>
-								<view class="four_2">
-									<view class="btn">进入店铺</view>
-									<view class="btn">关注</view>
-								</view>
+						</view>
+						<view class="thr">
+							<view class="thr_1" @click="toChoose">
+								<view class="title">选择规格</view>
+								<text class="iconfont icon-dayufuhao"></text>
+							</view>
+							<view class="thr_1">
+								<view class="title">商品评价({{info.comment||0}})</view>
+								<text class="iconfont icon-dayufuhao"></text>
 							</view>
-							<view class="five">
-								<view class="five_1">{{info.brief}}</view>
-								<view class="five_2" v-for="(item,index) in bannerList" :key="index">
-									<image class="image" :src="item.url"></image>
+						</view>
+						<view class="four">
+							<view class="four_1">
+								<image class="image" :src="shop.file"></image>
+								<view class="other">
+									<view class="name">{{shop.name}}</view>
+									<view class="other_1"><text>宝贝数</text>{{shop.num}}</view>
 								</view>
 							</view>
+							<view class="four_2">
+								<view class="grade">商品：<text>{{shop.grade||'5.00'}}</text></view>|
+								<view class="grade">发货：<text>{{shop.grade||'5.00'}}</text></view>|
+								<view class="grade">服务：<text>{{shop.grade||'5.00'}}</text></view>
+							</view>
+							<view class="four_2">
+								<view class="btn">进入店铺</view>
+								<view class="btn">关注</view>
+							</view>
 						</view>
-					</scroll-view>
-				</view>
-				<view class="foot">
-					<uni-goods-nav :options="options" :button-group="buttonGroup" @click="onClick"
-						@buttonClick="buttonClick" />
-				</view>
+						<view class="five">
+							<view class="five_1">{{info.brief}}</view>
+							<view class="five_2" v-for="(item,index) in bannerList" :key="index">
+								<image class="image" :src="item.url"></image>
+							</view>
+						</view>
+					</view>
+				</scroll-view>
+			</view>
+			<view class="foot">
+				<uni-goods-nav :options="options" :button-group="buttonGroup" @click="onClick"
+					@buttonClick="buttonClick" />
 			</view>
-		</scroll-view>
+		</view>
 		<view class="collect">
-			<text v-if="collection==false" @click="toCollect('true')" class="iconfont icon-kongxin"></text>
-			<text v-if="collection==true" @click="toCollect('false')" class="iconfont icon-shixin"></text>
+			<text v-if="!collection" @click="toCollect('1')" class="iconfont icon-kongxin"></text>
+			<text v-else @click="toCollect('0')" class="iconfont icon-shixin"></text>
 		</view>
 		<view class="menu">
-			<text @click="menu" class="iconfont icon-gengduo"></text>
+			<text @click="toMenu" class="iconfont icon-gengduo"></text>
+		</view>
+		<view class="menu_1" v-if="menu">
+			<view class="title" v-for="(item,index) in barList" :key="index">
+				<image class="image" :src="item.normal"></image>
+				<view class="name">{{item.name}}</view>
+			</view>
 		</view>
 		<view class="backTop" v-if="isShow==true">
 			<text @click="backTop" class="iconfont icon-fanhuidingbu"></text>
@@ -109,8 +113,7 @@
 				<view class="thr">
 					<text>数量:</text>
 					<view class="count">
-						<lxc-count @handleCount="toCount" :value="info.specs.num" :delayed="100">
-						</lxc-count>
+						<uni-number-box v-model="info.specs.num" @change="toCount"></uni-number-box>
 					</view>
 				</view>
 				<view @click="toBuy" class="button">立即购买</view>
@@ -120,13 +123,40 @@
 </template>
 
 <script>
-	import lxcCount from '@/components/lxc-count/lxc-count.vue'
 	export default {
-		components: {
-			lxcCount
-		},
 		data() {
 			return {
+				barList: [{
+						name: '首页',
+						route: 'pages/home/index',
+						normal: require('@/static/shouye.png'),
+						active: require('@/static/shouye_1.png')
+					},
+					{
+						name: '微店',
+						route: 'pages/store/index',
+						normal: require('@/static/store.png'),
+						active: require('@/static/store_1.png')
+					},
+					{
+						name: '周边',
+						route: 'pages/week/index',
+						normal: require('@/static/week.png'),
+						active: require('@/static/week_1.png')
+					},
+					{
+						name: '购物车',
+						route: 'pages/market/index',
+						normal: require('@/static/market.png'),
+						active: require('@/static/market_1.png')
+					},
+					{
+						name: '我的',
+						route: 'pages/my/index',
+						normal: require('@/static/my.png'),
+						active: require('@/static/my_1.png')
+					},
+				],
 				options: [{
 						icon: 'shop',
 						text: '店铺',
@@ -191,7 +221,9 @@
 				isShow: false,
 				topItem: '',
 				// 收藏
-				collection: false
+				collection: false,
+				// 菜单显示
+				menu: false
 			};
 		},
 		onShow: function() {},
@@ -207,16 +239,39 @@
 			},
 			// 选择规格
 			toChoose() {
-				this.$refs.popup.open();
+				const that = this;
+				that.$refs.popup.open();
 			},
 			// 关闭弹框
 			toClose() {
-				this.$refs.popup.close()
+				const that = this;
+				that.$refs.popup.close()
 			},
 			// 计数器
 			toCount(e) {
 				console.log(e);
 			},
+			// 收藏
+			toCollect() {
+				const that = this;
+				that.collection = !that.collection;
+				if (that.collection == true) {
+					uni.showToast({
+						title: `收藏成功`,
+						icon: 'none'
+					})
+				} else {
+					uni.showToast({
+						title: `取消成功`,
+						icon: 'none'
+					})
+				}
+			},
+			// 菜单展开
+			toMenu() {
+				const that = this;
+				that.menu = !that.menu
+			},
 			// 立即购买
 			toBuy() {},
 			// 计算高度
@@ -449,7 +504,7 @@
 
 	.menu {
 		position: fixed;
-		bottom: 20vw;
+		bottom: 30vw;
 		right: 5vw;
 
 		text {
@@ -459,9 +514,33 @@
 		}
 	}
 
+	.menu_1 {
+		position: fixed;
+		bottom: 40vw;
+		right: 5vw;
+		background-color: var(--mainColor);
+		padding: 2vw;
+
+		.title {
+			display: flex;
+			padding: 2vw;
+			border-bottom: 0.1vw solid var(--fcColor);
+
+			.image {
+				width: 7vw;
+				height: 6vw;
+			}
+
+			.name {
+				margin: 0 0 0 1vw;
+			}
+
+		}
+	}
+
 	.backTop {
 		position: fixed;
-		bottom: 10vw;
+		bottom: 20vw;
 		right: 5vw;
 
 		text {