Browse Source

产品列表

xhj 2 năm trước cách đây
mục cha
commit
1365efdcbc

+ 37 - 0
components/product_footer/index.css

@@ -0,0 +1,37 @@
+.tab{line-height: 100rpx;font-size: 30rpx;color: #999;text-align: center;}
+.tab .li{width: 50%;position: relative;}
+.tab .li::before{content: '';display: block;width: 2rpx;height: 27rpx;background: #d0cfcf;position: absolute;left: 0;top: 50%;transform: translateY(-50%);}
+.tab .li:first-child::before{display: none;}
+.tab .li.active{color: #222;font-weight: bold;}
+.tabcon{overflow: hidden;}
+/* .details{padding: 0 30rpx;} */
+.det-text{/* padding: 0 30rpx; */word-break: break-all;}
+.details .rich-img{width: 100%;}
+.details .img{width: 100%;}
+.canshu{margin: 0 20rpx 30rpx;border: 2rpx solid #e5e5e5;}
+.canshu .li{border-bottom: 2rpx solid #e5e5e5;font-size: 28rpx;color: #666;}
+.canshu .li:last-child{border-bottom: none;}
+.canshu .li .label{width: 190rpx;padding: 20rpx 25rpx;}
+.canshu .li .view{padding: 20rpx 25rpx;border-left: 2rpx solid #e5e5e5;}
+.fen{border-bottom: 20rpx solid #f6f6f6;padding: 30rpx 0;}
+.zong{font-size: 22rpx;color: #6B6B6B;text-align: center;width: 273rpx;border-right: 2rpx solid #e9e9e9;height: 178rpx;}
+.zong .text{display: block;font-size: 80rpx;color: #FF6000;}
+.xing{padding: 40rpx 0 0 65rpx;font-size: 24rpx;color: #6B6B6B;}
+.ping{align-items: center;line-height: 30rpx;margin-bottom: 35rpx;}
+.ping .view{margin-right: 20rpx;}
+.ping .image{width: 23rpx;height: 23rpx;margin: 0 3rpx;}
+.ping .text{color: #FF6000;margin-left: 20rpx;}
+.pltab{flex-wrap: wrap;padding: 30rpx 0 20rpx 30rpx;border-bottom: 2rpx solid #eee;}
+.pltab .li{height: 52rpx;line-height: 52rpx;border-radius: 28rpx;border: 2rpx solid #bbb;font-size: 28rpx;color: #333;padding: 0 20rpx;margin-right: 20rpx;}
+.pltab .li.active{background: #FE0419;color: #fff;border-color: #FE0419;}
+.plcon{padding: 0 30rpx;}
+.plcon .li{padding: 30rpx 0 40rpx;border-bottom: 2rpx solid #eee;overflow: hidden;}
+.plcon .li:last-child{border-bottom: none;}
+.plcon .li .flex{overflow: hidden;}
+.pinglun{word-wrap: break-word;}
+.plimg{margin-top: 30rpx;}
+.plimg image{width: 148rpx;height: 148rpx;margin-right: 30rpx;}
+.plimg image:nth-child(3n){margin-right: 0;}
+.user{width: 68rpx;height: 68rpx;border-radius: 50%;margin-right: 15rpx;}
+.show{display: block;}
+.hide{display: none;}

+ 369 - 0
components/product_footer/index.vue

@@ -0,0 +1,369 @@
+<template>
+	<view class="detail mt20 bgfff">
+		<view class="tab dflex">
+			<!-- <view :class="'li ' + (currentTab == 0 ? 'active' : '')" data-current="0" @tap="tab">图文详情</view>
+			<view :class="'li ' + (currentTab == 1 ? 'active' : '')" data-current="1" @tap="tab" v-if=""
+				v-if="config.is_hide_product_parameter != 1">产品说明</view>
+			<view :class="'li ' + (currentTab == 2 ? 'active' : '')" data-current="2" @tap="tab"
+				v-if="isOpenComments == 1">买家评价</view> -->
+		</view>
+		<view :class="currentTab == 0 ? 'show' : 'hide'">
+			<view class="tabcon details det-text">
+				<!-- <rich-text :nodes="detail"></rich-text> -->
+
+				<mp-html :content="detail" :lazy-load="true" @imgtap="choose"></mp-html>
+			</view>
+			<!-- 		<view class="tabcon details">
+			<block v-for="(item, index) in imgs" :key="index">
+					<image class="img" :src="item + '?x-oss-process=style/w750-auto'" mode="widthFix" @tap="chooseImg" :data-src="item"></image>
+			</block>
+		</view> -->
+			<block v-if="diyNodes || diyImgs.length > 0">
+				<view class="tabcon details">
+					<rich-text :nodes="diyNodes" @tap="richImg"></rich-text>
+				</view>
+				<view class="tabcon details">
+					<block v-for="(item, index) in diyImgs" :key="index">
+						<image class="img" :src="item + '?x-oss-process=style/w750-auto'" mode="widthFix"
+							@tap="chooseImg1" :data-src="item"></image>
+					</block>
+				</view>
+			</block>
+		</view>
+		<view :class="[currentTab == 1? 'show' : 'hide','tabcon']">
+			<view class="canshu" v-if="params.length > 0">
+				<view v-for="(item, index) in params" :key="index" class="li dflex">
+					<label class="label">{{item.name}}</label>
+					<view class="view flex">{{item.value}}</view>
+				</view>
+			</view>
+			<view class="nodata" v-else>
+				<image :src="picUrlss+'empty.png'"></image>
+				<text>暂无记录~</text>
+			</view>
+		</view>
+		<view :class="[currentTab == 2 ? 'show' : 'hide','tabcon']">
+			<view class="fen dflex">
+				<view class="zong"><text class="text">{{overallRating}}</text>综合评分</view>
+				<view class="xing flex">
+					<view class="ping dflex">
+						<view class="view">服务态度</view>
+						<image v-for="(item, index) in [1,2,3,4,5]" :key="index" class="image"
+							:src="score.serviceAttitude >= item ? '/static/pages/images/star_h.png' : '/static/pages/images/star.png'">
+						</image>
+						<text class="text">{{score.serviceAttitude}}分</text>
+					</view>
+					<view class="ping dflex">
+						<view class="view">商品评分</view>
+						<image v-for="(item, index) in [1,2,3,4,5]" :key="index" class="image"
+							:src="score.productRating >= item ? '/static/pages/images/star_h.png' : '/static/pages/images/star.png'">
+						</image>
+						<text class="text">{{score.productRating}}分</text>
+					</view>
+				</view>
+			</view>
+			<view class="pltab dflex">
+				<view :class="'li ' + (scoreTab == 0 ? 'active' : '')" @tap="scoreTabFun" data-current="0">
+					全部({{score.ratingAll}})</view>
+				<view :class="'li ' + (scoreTab == 3 ? 'active' : '')" @tap="scoreTabFun" data-current="3">
+					好评({{score.ratingGood}})</view>
+				<view :class="'li ' + (scoreTab == 2 ? 'active' : '')" @tap="scoreTabFun" data-current="2">
+					中评({{score.ratingMedium}})</view>
+				<view :class="'li ' + (scoreTab == 1 ? 'active' : '')" @tap="scoreTabFun" data-current="1">
+					差评({{score.ratingBad}})</view>
+			</view>
+			<view class="plcon">
+				<block v-if="scoreList.length > 0">
+					<view v-for="(item, index) in scoreList" :key="index" class="li dflex">
+						<image :src="item.avatar" mode="aspectFit" class="user"></image>
+						<view class="flex">
+							<view class="name dflex">{{item.nickName.replace(/^(.).*(.)$/,"$1***$2")}}<text class="time">{{item.createDate}}</text>
+							</view>
+							<view class="pinglun">{{item.evaluateText ? item.evaluateText : '此用户没有填写评价。'}}</view>
+							<view class="plimg dflex" v-if="item.buyShow.length > 0">
+								<image v-for="(it, index2) in item.buyShow" :key="index2" :src="it" mode="aspectFit"
+									@tap="previewImg" :data-src="it" :data-list="item.buyShow"></image>
+							</view>
+							<!-- <view class="huifu">商家回复:感谢您对我们的支持,我们更加用心的服务好每一位客户!</view> -->
+						</view>
+					</view>
+				</block>
+				<view class="nodata" v-else>
+					<image :src="picUrlss+'empty_dd.png'"></image>
+					<text>商品还没有人评价</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	const req = require("../../utils/request");
+	import mpHtml from "../mp-html/components/mp-html/mp-html";
+	export default {
+		components: {
+			mpHtml
+		},
+		data() {
+			return {
+				picUrlss: req.public.picUrls,
+				currentTab: 0,
+				params: [],
+				scoreList: [],
+				isLoad: true,
+				scoreTab: 0,
+				overallRating: '0' //综合评分
+					,
+				diyImgs: "",
+				diyNodes: "",
+				score: "",
+				isOpenComments: "",
+				config: {}
+			};
+		},
+		props: {
+			detail: String,
+			proId: String,
+			imgs: Array,
+			form: {
+				type: Object,
+				default: () => ({})
+			}
+		},
+		watch: {
+			'proId': function(oldValue, newValue) {
+				// console.log(oldValue, newValue);
+			},
+		},
+		options: {
+			addGlobalClass: true
+		},
+
+		mounted() {
+			// console.log(this.detail,"7899879")
+			let that = this;
+			that.isOpenCommentsFun();
+			// that.loadParams();
+			// that.joinFootprint();
+
+			if (req.getStorage('productDiy')) {
+				//富文本图片放大
+				var diyNodes = req.getStorage('productDiy');
+
+				if (diyNodes) {
+					if (diyNodes.indexOf("src") >= 0) {
+						//正则匹配所有图片路径
+						var diyImgs = [];
+						diyNodes = diyNodes.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function(match, capture) {
+							diyImgs.push(capture);
+							that.setData({
+								diyImgs: diyImgs
+							});
+							return '';
+						});
+					}
+				} // console.log(diyNodes,this.data.imgs,this.data.diyImgs)
+
+				// console.log(this.detail,"================");
+				that.setData({
+					diyNodes: diyNodes
+				});
+			}
+			this.config = JSON.parse(req.getStorage('configRes'));
+		},
+
+		methods: {
+			choose: function() {
+				// console.log(123);
+				let freshen = false;
+				this.$emit('freshen', {
+					detail: freshen
+				});
+			},
+			tab(event) {
+				const tabIndex = event.currentTarget.dataset.current;
+				if (this.currentTab === tabIndex) return false;
+				this.setData({
+					currentTab: tabIndex
+				});
+				this.$emit('showTab', {
+					detail: tabIndex
+				});
+			},
+
+			joinFootprint() {
+				req.postRequest('/api/footprint', {
+					bindId: this.proId,
+					type: 1
+				}, () => {}, true);
+			},
+
+			loadParams() {
+				let _ts = this;
+
+				req.getRequest('/api/product/params', {
+					id: this.proId
+				}, data => {
+					_ts.setData({
+						params: data
+					});
+				});
+			},
+
+			loadScore(scoreType, from) {
+				//买家评价
+				let _ts = this;
+
+				// console.log(this.isLoad, scoreType,this.form);
+
+				// if (scoreType) {
+				//   this.isLoad = true; // this.setData({['form.page']:1})
+				// }
+
+				if (!this.isLoad) return false;
+				this.isLoad = false;
+				let userInfo = req.getStorage('userInfo');
+				let form
+				if (from) {
+					form = from;
+				} else {
+					form = _ts.form;
+				}
+				form.bindId = _ts.proId; // form.uid = userInfo.id;
+
+				form.type = scoreType;
+				req.getRequest('/api/sysScore/getList', form, res => {
+					if (res.list && res.list.length == 10) _ts.isLoad = true;
+					if (_ts.form.page > 1) res.list = _ts.scoreList.concat(res.list);
+					res.list.map(item => {
+						if (typeof item.buyShow != 'object') {
+							if (!item.buyShow) {
+								item.buyShow = [];
+							} else {
+								item.buyShow = item.buyShow.split(',');
+							}
+						} // item.buyShow = !item.buyShow ? [] : item.buyShow.split(',');
+
+
+						return item;
+					});
+
+					_ts.setData({
+						scoreList: res.list
+					});
+
+					// console.log('评价列表', _ts.scoreList, _ts.isLoad);
+				});
+			},
+
+			loadScoreData() {
+				req.getRequest('/api/sysScore/statisticsScore', {
+					productId: this.proId
+				}, res => {
+					// console.log('评价统计', res);
+					res.serviceAttitude = res.serviceAttitude.toFixed(0) == 0 ? '5' : res.serviceAttitude.toFixed(
+						0);
+					res.productRating = res.productRating.toFixed(0) == 0 ? '5' : res.productRating.toFixed(0);
+					let overallRating = (Number(res.serviceAttitude) + Number(res.productRating)) / 2;
+					this.setData({
+						score: res,
+						overallRating: overallRating
+					});
+				});
+			},
+
+			scoreTabFun(event) {
+				this.form.page = 1
+				this.isLoad = true
+				let current = event.currentTarget.dataset.current;
+				this.setData({
+					scoreTab: current
+				});
+				this.$emit('scoreTab', {
+					detail: current
+				});
+				this.$emit('getForm', {
+					detail: this.form.page
+				});
+				this.loadScore(current);
+			},
+
+			chooseImg: function(e) {
+				//预览
+				var src = e.currentTarget.dataset.src;
+				let freshen = false;
+				this.$emit('freshen', {
+					detail: freshen
+				});
+				uni.previewImage({
+					current: src,
+					// 当前显示图片的http链接  
+					urls: this.imgs
+				});
+			},
+			chooseImg1: function(e) {
+				//预览
+				var src = e.currentTarget.dataset.src;
+				let freshen = false;
+				this.$emit('freshen', {
+					detail: freshen
+				});
+				uni.previewImage({
+					current: src,
+					// 当前显示图片的http链接  
+					urls: this.diyImgs
+				});
+			},
+			previewImg: function(e) {
+				//预览评论买家秀
+				var src = e.currentTarget.dataset.src;
+				let list = e.currentTarget.dataset.list;
+				let freshen = false;
+				this.$emit('freshen', {
+					detail: freshen
+				});
+				uni.previewImage({
+					current: src,
+					// 当前显示图片的http链接  
+					urls: list
+				});
+			},
+
+			isOpenCommentsFun() {
+				//是否开启评论
+				let that = this;
+
+				if (req.getStorage('configRes') && JSON.parse(req.getStorage('configRes')).is_open_comments) {
+					let isOpenCommentss = JSON.parse(req.getStorage('configRes')).is_open_comments;
+
+					if (isOpenCommentss == 1) {
+						that.loadScore(that.scoreType);
+						that.loadScoreData();
+					}
+
+					this.setData({
+						isOpenComments: isOpenCommentss
+					});
+				} else {
+					req.g('/api/other/config', res => {
+						let isOpenCommentss = res.is_open_comments;
+
+						if (isOpenCommentss == 1) {
+							that.loadScore(that.scoreType);
+							that.loadScoreData();
+						}
+
+						this.setData({
+							isOpenComments: isOpenCommentss
+						});
+						req.setStorage('configRes', JSON.stringify(res));
+					});
+				}
+			}
+
+		}
+	};
+</script>
+<style>
+	@import "./index.css";
+</style>

+ 1 - 1
mine/bindNumber/bindNumber.vue

@@ -1,6 +1,6 @@
 <template>
 	<view style="padding-top: 300rpx;">
-		<view v-if="userInfo&&userInfo.mobile" class="phone">{{userInfo.mobile.substring(0,3)}}****{{userInfo.mobile.substring(userInfo.mobile.length-4,3)}}</view>
+		<view v-if="userInfo&&userInfo.mobile" class="phone">{{userInfo.mobile.substring(0,3)}}****{{userInfo.mobile.substring(userInfo.mobile.length-4,userInfo.mobile.length)}}</view>
 		<view v-else class="phone">绑定工号</view>
 		
 		<view class="input-box" style="margin-bottom: 30rpx;">

+ 12 - 0
pages.json

@@ -142,6 +142,18 @@
 					"style": {
 						"navigationBarTitleText": "优惠券"
 					}
+				},
+				{
+					"path": "sort/sort",
+					"style": {
+						"navigationBarTitleText": "产品"
+					}
+				},
+				{
+					"path": "detail/detail",
+					"style": {
+						"navigationBarTitleText": "产品详情"
+					}
 				}
 			]
 		},

+ 322 - 0
product/detail/detail.css

@@ -0,0 +1,322 @@
+/* pages/detail/detail.wxss */
+.banner{overflow: hidden;position: relative;background: #fff;}
+.swiper,.swiper image{width: 100%;height: 750rpx;}
+.dots{position: absolute;left: 0;right: 0;bottom: 11rpx;align-items: center;justify-content: center;}
+.dot{background:var(--mina) ;width: 10rpx;height: 10rpx;border-radius: 5rpx;margin: 0 3rpx;}
+.dot.active{width: 30rpx;}
+.info{padding: 30rpx 0;}
+.infos{align-items: center;justify-content: space-between;padding: 0 30rpx;}
+.price{font-size: 28rpx;color: #FE0419;align-items: center;flex: 0.5;}
+.price text{font-size: 40rpx;color: #FE0419;font-weight: bold;}
+.price text.origin{font-weight: normal;font-size: 24rpx;color: #999;text-decoration: line-through;margin-left: 10rpx;}
+/* 积分产品 */
+.bot .btnfot{flex: 0.5;display: flex;justify-content: space-around;}
+.bot .btnbuy{flex: 0.5;display: flex;}
+.price text.money{font-size: 26rpx;color: #FE0419;}
+.hyprice{align-items: center;margin-left: 15rpx;}
+.hyprice text{font-size: 30rpx;color: #333;font-weight: bold;}
+.hytxt{position: relative;width: 78rpx;height: 25rpx;margin-left: 8rpx;}
+.hytxt image{display: block;width: 78rpx;height: 25rpx;position: absolute;z-index: 1;top: 0;left: 0;}
+.hytxt text{font-size: 18rpx;color: #FFD9AF;position: relative;z-index: 2;font-weight: normal;display: block;line-height: 25rpx;text-align: center;padding-left: 5rpx;}
+.share{font-size: 20rpx;color: #999;text-align: center;position: relative;flex: 0.1;}
+.share::after{content: '';display: block;width: 2rpx;height: 45rpx;background: #e7e7e7;position: absolute;top: 50%;transform: translateY(-50%);left: -9rpx;}
+.share image{width: 31rpx;height: 31rpx;margin: 0 auto 10rpx;}
+.title{font-size: 30rpx;color: #222;line-height: 40rpx;font-weight: bold;margin-top: 25rpx; padding: 0 0rpx;}
+.tag{width: 82rpx;height: 36rpx;display: inline-block;margin: 0 10rpx 0 0;position: relative;top: 7rpx;}
+.yushou{display: inline-block;border: 2rpx solid #FE0419;border-radius: 6rpx;font-size: 22rpx;color: #FE0419;height: 30rpx;line-height: 30rpx;padding: 0 10rpx;vertical-align: top;margin-right: 15rpx;margin-top: 5rpx;}
+.detinfo .item{padding: 30rpx;border-bottom: 1rpx solid #f6f6f6;}
+.detinfo .item:last-child{border-bottom: none;}
+.item label{display: block;width: 130rpx;font-size: 28rpx;color: #222;font-weight: bold;line-height: 40rpx; white-space: nowrap;}
+.pro-time label{width: auto;margin-right: 30rpx;}
+.quan .flex{align-items: center;}
+.quan text{display: block;background: #FDF5F3;padding: 0 13rpx;height: 40rpx;line-height: 40rpx;font-size: 24rpx;color: #FF5F08;margin: 0 10rpx 10rpx 0;white-space: nowrap;}
+.coupon-list{flex-wrap: wrap;}
+.ling{font-size: 24rpx;color: #FF5F08;align-items: center;}
+.ling image{width: 14rpx;height: 24rpx;margin-left: 11rpx;}
+.address{font-size: 28rpx;color: #333;line-height: 40rpx;}
+.huo{font-size: 24rpx;color: #666;line-height: 40rpx;}
+.huo text{color: #FE0419;margin-right: 46rpx;font-size: 24rpx;}
+.more{width: 36rpx;height: 10rpx;padding: 15rpx 0;}
+/* .user{width: 68rpx;height: 68rpx;border-radius: 50%;margin-right: 15rpx;} */
+.name{font-size: 28rpx;color: #666;line-height: 68rpx;justify-content: space-between;align-items: center;}
+.pinglun{font-size: 28rpx;color: #333;margin: 15rpx 0 0;line-height: 44rpx;}
+.huifu{background: #F2F2F2;border-radius: 6rpx;margin: 25rpx 0 0;line-height: 42rpx;padding: 20rpx 30rpx;position: relative;}
+.huifu::after{content: '';display: block;width: 0;height: 0;border: 9rpx solid transparent;border-bottom-color: #F2F2F2;border-top: none;position: absolute;top: -8rpx;left: 39rpx;}
+.show{display: block;}
+.hide{display: none;}
+
+.bot{height: 100rpx;align-items: center;}
+.botbtn{font-size: 28rpx;color: #fff;width: 95rpx !important;text-align: center;position: relative;background-color: var(--main);line-height: 100rpx;}
+.botbtn image{width: 40rpx;height: 34rpx;margin: 10rpx auto 5rpx;}
+.message{background: #DF1A14;height: 28rpx;line-height: 28rpx;font-size: 20rpx;color: #fff;text-align: center;border-radius: 15rpx;box-sizing: border-box;min-width: 21rpx;padding: 0 8rpx;position: absolute;top: 0;right: 25%;}
+.addcart{width: 206rpx;height: 76rpx;border: 2rpx solid #FD3C31;border-radius: 40rpx;text-align: center;line-height: 76rpx;font-size: 30rpx;color: #FD3A31;margin: 0 10rpx;}
+.gray{color: #999;border-color: #999;}
+.gmbtn{width: 210rpx;height: 80rpx;border-radius: 40rpx;text-align: center;line-height: 80rpx;font-size: 30rpx;color: #fff;}
+.integral{width: 430rpx;height: 80rpx;border-radius: 40rpx;text-align: center;line-height: 80rpx;font-size: 30rpx;color: #fff;}
+.xiajia{position: fixed;background: rgba(0,0,0,.6);left: 0;right: 0;bottom: 120rpx;height: 80rpx;line-height: 80rpx;font-size: 28rpx;color: #999999;text-align: center;z-index: 50;}
+
+
+.details image{width: 100%;}
+
+/* 小店相关 */
+.xiaodian{position: relative;height: 122rpx;padding: 0 26rpx 0 110rpx;align-items: center;margin: 35rpx 30rpx 0;}
+.xdbg{position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 1;}
+.shouyi{position: relative;z-index: 2;color: #fff;margin-right: 10rpx;}
+.shouyi view{font-size: 40rpx;font-weight: bold;margin-top: 8rpx;}
+.shouyi text{font-weight: normal;font-size: 24rpx;}
+.addshop{height: 62rpx;padding: 0 25rpx;border-radius: 31rpx;background:linear-gradient(115deg,rgba(255,78,78,1) 0%,rgba(220,21,21,1) 100%);text-align: center;line-height: 62rpx;font-size: 24rpx;color: #fff;position: relative;z-index: 2;}
+.fenxiang{height: 62rpx;padding: 0 25rpx;margin-left: 15rpx;border-radius: 31rpx;background:linear-gradient(115deg,rgba(255,78,78,1) 0%,rgba(220,21,21,1) 100%);text-align: center;line-height: 62rpx;font-size: 24rpx;color: #fff;position: relative;z-index: 2;}
+.goShop{height: 62rpx;padding: 0 25rpx;margin-left: 15rpx;border-radius: 31rpx;background:linear-gradient(115deg,rgba(255,78,78,1) 0%,rgba(220,21,21,1) 100%);text-align: center;line-height: 62rpx;font-size: 24rpx;color: #fff;position: relative;z-index: 2;}
+
+.suc{position: fixed;left: 50%;top: 50%;transform: translate(-50%,-50%);background: #fff;width: 536rpx;border-radius: 20rpx;z-index: 100;text-align: center;padding-bottom: 47rpx;}
+.tjcg1{width: 100%;height: 284rpx;}
+.tjcg{width: 195rpx;height: 38rpx;margin: 52rpx auto 15rpx;}
+.suc text{display: block;font-size: 24rpx;color: #333;}
+.shopcc{justify-content: center;}
+.shop{width:220rpx;height:80rpx;background:linear-gradient(123deg,rgba(255,130,130,1) 0%,rgba(220,21,21,1) 100%);font-size: 30rpx;color: #fff;line-height: 80rpx;border-radius: 40rpx;margin: 45rpx 15rpx 40rpx;}
+.share-btn{justify-content: space-between;padding: 0 54rpx;}
+.wxfriend,.wxposter{width: 196rpx !important;height: 76rpx !important;align-items: center;justify-content: center;font-size: 30rpx;color: #666;border: 2rpx solid #D8D8D8;border-radius: 40rpx !important;}
+.wxfriend image,.wxposter image{width: 31rpx;height: 31rpx;margin-right: 13rpx;}
+.suc-close{position: absolute;left: 50%;transform: translateX(-50%);bottom: -102rpx;width: 62rpx;height: 62rpx;}
+.sellStock{text-align: right; color: #999;flex: 0.3;}
+.sellStock text{ color:#222 ;}
+.protext{color: #999;margin-top: 15rpx;padding: 0 30rpx;/* overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2; */}
+.guarantee{border-top: 1rpx solid #f6f6f6;padding: 15rpx 0 0 0; margin-top: 15rpx;}
+.guarantee .cont{padding: 0 30rpx;flex-wrap: wrap;font-size: 26rpx;}
+.guarantee .cont .li{align-items: center;margin-right: 20rpx;
+  margin-bottom: 10rpx;}
+.guarantee .cont image{        width: 30rpx;
+  height: 30rpx;}
+.you{width: 12rpx;height: 20rpx;}
+/* 海外购 */
+.logistics{align-items: center;justify-content: space-around;margin-top: 40rpx;}
+.logistics view{color: #666666;}
+.logistics .lsicText{color: #238CF5;}
+.logistics .abroad{width: 46rpx;height: 46rpx;margin: 0 auto 20rpx;}
+
+/* 非会员 */
+.huiyuan{
+  margin: 34rpx 30rpx 0 30rpx;
+}
+.huiyuanjia{
+  padding: 20rpx;
+  background: #FFF4E8;
+  font-size: 28rpx;
+  color: #553420;
+  border-radius: 6rpx;
+  align-items: center;
+  justify-content: space-between;
+}
+.huiyuanimg{
+  width: 152rpx;
+  height: 30rpx;
+  margin-right:6rpx ;
+}
+.d-open{color: #FD3A31;border-radius: 5rpx;font-size: 24rpx;border: 1rpx solid #FD3A31;padding: 5rpx 10rpx;}
+.hymoney{
+  font-weight: bold;
+  color: #FD3A31;
+  margin-right: 6rpx;
+}
+.govipimg{
+  width: 28rpx;
+  height: 28rpx;
+}
+/* 会员 */
+.hyimg{
+height: 74rpx;
+width: 96rpx;
+position: absolute;
+left: -21rpx;
+top: -20rpx;
+}
+.hyjiage{
+  border-radius: 16rpx 6rpx 6rpx 0;
+  background: #FFFFFF;
+  box-shadow: 5rpx 5rpx 10rpx #FD3A31 ;
+  /* height: 32rpx; */
+  position: relative;
+  margin-left: 32rpx;
+  height: 32rpx;
+  font-size: 26rpx;
+  color: #FD3A31;
+  padding: 0 16rpx 0rpx 63rpx;
+}
+.huodong{
+  margin-bottom: 30rpx;
+}
+
+.acti{
+  justify-content: space-between;
+}
+.pro-sel{align-items: center;}
+.pro-sel .flex{text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
+.mrico{width: 16rpx;height: 27rpx;}
+
+/* 右侧首页悬浮 */
+.contact_index{background: #fff !important;color: #555;bottom: 360rpx !important;right: 30rpx !important;}
+.side-contact{position: fixed;bottom: 530rpx;right: 30rpx;background: var(--mina) !important;border-radius: 50% !important;width: 100rpx !important;height: 100rpx !important;box-shadow: 0 0 10rpx rgba(86, 86, 86, 0.36);font-size: 18rpx;color: #fff;z-index: 20;text-align: center;display: flex;flex-direction: column;align-items: center;justify-content: center;}
+.side-contact image{width: 40rpx;height: 40rpx;margin: 0 auto 5rpx;}
+
+/* 供应商 */
+.det-sup{overflow: hidden;}
+.det-sup .flex{overflow: hidden;}
+.det-sup .mrico{margin-left: 20rpx;}
+.sup-name{font-size: 28rpx;color: #333;}
+.sup-bri{font-size: 24rpx;color: #999;margin-top: 15rpx;padding-right: 35rpx;}
+
+.roll-notice{height: 60rpx;background: rgba(0,0,0,.55);border-radius: 30rpx;padding: 0 30rpx 0 15rpx;font-size: 24rpx;color: #fff;position: fixed;left: 35rpx;align-items: center;animation: spin 5s ease-in-out infinite;animation-fill-mode: forwards;z-index: 20;max-width: 435rpx;overflow: hidden;}
+.roll-notice .flex{overflow: hidden;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
+.roll-notice image{width: 40rpx;height: 40rpx;border-radius: 50%;margin-right: 11rpx;}
+@keyframes spin {
+		0% {
+			top: 305rpx;
+			opacity: 0;
+		}
+		25% {
+			top: 255rpx;
+			opacity: 1;
+		}
+		50% {
+			top: 255rpx;
+			opacity: 1;
+		}
+		75% {
+			top: 215rpx;
+			opacity: 0;
+		}
+		100%{
+			top: 215rpx;
+			opacity: 0;
+		}
+	}
+	
+	
+	
+	
+	.chat-fixed{
+		position: fixed;
+		bottom: 230rpx;
+		/* left:calc(100% - 130rpx); */
+		right: 30rpx;
+		z-index: 1;
+		/* transition:all 2s ease-in; */
+	}
+	.chat-box{
+		width: 100rpx;
+		height: 100rpx;
+		background-color: #fff;
+		border-radius: 100rpx;
+		position: relative;
+		padding: 8rpx;
+		box-sizing: border-box;
+		transition:all 0.5s cubic-bezier(0.5,0.8,1,1);
+	}
+	.chat-fixed-long{
+	}
+	.chat-fixed-long .chat-box{
+		width: 690rpx;
+	}
+	.chat-fixed-long .chat-lyl{
+		position: relative;
+	    transform: translateX(0);
+	    left: unset;
+	    right: unset;
+	    top: unset;
+	    bottom: unset;
+		width: 123rpx;
+		height: 56rpx;
+		line-height: 56rpx;
+		font-size: 28rpx;
+		border-radius: 28rpx;
+		margin-right: 20rpx;
+		opacity: 1;
+	}
+	.chat-lyl{
+		width: 123rpx;
+		background: var(--main);
+		text-align: center;
+		color: #fff;
+		opacity: 0;
+		transition:all 0.5s cubic-bezier(0.5,0.8,1,1);
+	}
+	.chat-box image{
+		width: 86rpx;
+		height: 86rpx;
+		margin: auto;
+		border-radius: 100%;
+	}
+	.chat-lyl2{
+		position: absolute;
+		bottom: -13rpx;
+		left: 50%;
+		transform: translateX(-50%);
+		width: 86rpx;
+		height: 32rpx;
+		line-height: 32rpx;
+		background: var(--main);
+		border-radius: 16rpx 16rpx 16rpx 16rpx;
+		text-align: center;
+		color: #fff;
+		font-size: 20rpx;
+		font-family: PingFang SC-Regular, PingFang SC;
+		font-weight: 400;
+		opacity: 1;
+	}
+	
+	/* 邀请码弹窗 */
+	.ceng2{position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(0,0,0,.5);z-index: 99;}
+	.code-pop{
+		position: fixed;
+		top:50%;
+		left:50%;
+		transform: translate(-50%,-50%);
+		width: 574rpx;
+		background: #FFFFFF;
+		border-radius: 20rpx 20rpx 20rpx 20rpx;
+		z-index: 100;
+	}
+	.code-text{
+		line-height: 41rpx;
+		color: #151515;
+		font-size: 28rpx;
+		margin: 51rpx 47rpx 50rpx;
+		text-align: center;
+	}
+	.code-content image{
+		width: 365rpx;
+		height: 365rpx;
+		margin: 50rpx auto 30rpx;
+	}
+	.code-btn{
+		padding: 25rpx;
+		text-align: center;
+		font-size: 28rpx;
+		color: #2A82FD;
+		border-top: 1px solid #E9E9E9;
+	}
+	
+	.pop-scroll{
+		max-height: 750rpx;
+		overflow: scroll;
+		padding: 30rpx;
+	}
+	.pop-scroll::-webkit-scrollbar {
+		display: none;
+	}
+	
+	.bottom-text{
+		font-size: 28rpx;
+		color: #999;
+		text-align: center;
+		line-height: 48rpx;
+		padding: 30rpx;
+	}
+	.tag{
+		padding: 4rpx 10rpx;
+		font-size: 24rpx;
+		color: #4b95f6;
+		background-color: #ecf0fd;
+		margin-right: 10rpx;
+		margin-top: 10rpx;
+	}

+ 406 - 0
product/detail/detail.vue

@@ -0,0 +1,406 @@
+<template>
+	<view v-if="allShow">
+		<!--pages/detail/detail.wxml-->
+		<view class="banner">
+			<swiper class="swiper" @change="swiperChange" :current="current" autoplay="true" circular="true"
+				duration="1000">
+				<block v-for="(item, index) in product.images" :key="index">
+					<swiper-item autoplay="true">
+						<image :src="item" mode="aspectFit"></image>
+					</swiper-item>
+				</block>
+			</swiper>
+			<view class="dots dflex">
+				<block v-for="(item, index) in product.images" :key="index">
+					<view :class="'dot ' + (index == swiperCurrent ? ' active' : '')" :data-current="index"
+						@tap="dotEvent"></view>
+				</block>
+			</view>
+		</view>
+		<view class="info bgfff">
+			<view class="infos dflex">
+				<view class="title">{{product.title?product.title:''}}</view>
+				<button class="share" open-type="share">
+					<image src="/static/pages/images/fxico.png"></image>分享
+				</button>
+			</view>
+			<view class="protext">
+				{{product.brandName ? product.brandName : ''}} {{product.brief ?  product.brief : ''}}
+			</view>
+		</view>
+
+		<view class="detinfo mt20 bgfff">
+			<view class="item pro-sel dflex" v-if="skuList.length>0">
+				<view class="tag" v-for="it,idx in skuList" :key="idx">{{JSON.parse(it.properties)[0].value}}</view>
+			</view>
+			<view class="item pro-sel dflex" v-if="product.label">
+				<label>标签</label>
+				<view class="flex">{{product.label}}</view>
+			</view>
+		</view>
+		<!--  商品详情等页面 -->
+		<product-footer ref="list" id="list" :detail="nodes" :imgs="imgs" :proId="product.id" :form="form"
+			@scoreTab="scoreTab" @showTab="showTab" v-if="product.id" @freshen="freshenFun" @getForm="getForm">
+		</product-footer>
+
+
+		<v-share :hide-toast="hideShare" :product="product" :code-url="codeUrl" @onFather="click"></v-share>
+
+
+		<view class="bottom-text" style="margin-top: 30rpx;" v-if="recommendCard.realName">
+			<view>{{config.CONFIG_COMPANY_NAME?config.CONFIG_COMPANY_NAME:'中国人寿保险股份有限公司'}}
+				{{recommendCard.realName}}向您推荐</view>
+			<view>电话: {{recommendCard.phone}}</view>
+		</view>
+		<view class="bottom-text" style="margin:0 30rpx 30rpx;border-top: 2rpx solid #e5e5e5;">
+			<view>{{config.CONFIG_COMPANY_NAME?config.CONFIG_COMPANY_NAME:'中国人寿保险股份有限公司'}} 版权所有</view>
+			<view v-if="config.CONFIG_COMPANY_EMAIL">{{config.CONFIG_COMPANY_EMAIL}}</view>
+			<view v-if="config.CONFIG_COMPANY_PHONE">客户服务专线:{{config.CONFIG_COMPANY_PHONE}}</view>
+			<view v-if="config.CONFIG_COMPANY_FILING_NUMBER">{{config.CONFIG_COMPANY_FILING_NUMBER}}</view>
+		</view>
+
+
+
+		<view class="placeholder-view" :style="'height:' + (bottomBlankHeight + 140) + 'rpx'"></view>
+		<view class="bot fixed bgfff dflex">
+			<view class="botbtn fflex" style="border-right: 1px solid #fff;" v-if="recommendCard.wechat"
+				@click="showCodePop()">
+				加微咨询
+			</view>
+			<view class="botbtn fflex" @click="callPhone(recommendCard.phone)" v-if="recommendCard.phone">
+				电话咨询
+			</view>
+		</view>
+		<view class="xiajia" v-if="product.state !=1">您来晚了,产品已经下架</view>
+
+
+		<view class="contact_index" @tap="goTop">
+			<image src="/static/pages/images/backtop.png"></image>顶部
+		</view>
+		<view :class="'chat-fixed '+(chatShow?'chat-fixed-long':'')"
+			v-if="recommendCard&&recommendCard.id&&userInfo.id!=recommendCard.userId">
+			<view class="chat-box ddflex" @click="jumpSingleChatRoom()">
+				<image :src="recommendCard.avatar?recommendCard.avatar:'../../static/pages/images/userimg.png'"></image>
+				<view v-if="chatShowText" class="fflex tover"
+					style="font-size: 24rpx;color: #333333;margin-left: 20rpx;">您好,我是{{recommendCard.realName}},欢迎访问我的微页
+				</view>
+				<view :class="'chat-lyl '+(!chatShowText?'chat-lyl2':'')">聊一聊</view>
+			</view>
+		</view>
+
+
+		<view class="ceng2" v-if="isShowCodePop" @click="isShowCodePop = false" @touchmove.stop.prevent="moveHandle">
+		</view>
+		<view :class="'code-pop ' +(about.greyTheme==1?'grayTheme':'')" v-if="isShowCodePop">
+			<view class="code-content" v-if="recommendCard.wechatCode">
+				<image :src="recommendCard.wechatCode?recommendCard.wechatCode:'/static/images/wxCode.jpg'"
+					show-menu-by-longpress="true"></image>
+				<view style="text-align: center;font-size: 24rpx;color: #999;margin-bottom: 50rpx;">长按识别微信二维码</view>
+			</view>
+			<view class="code-text" v-else>
+				<view>微信号</view>
+				<view>{{recommendCard.wechat}}</view>
+			</view>
+			<view class="code-btn" @click="copy(recommendCard.wechat)">
+				复制微信号
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	const app = getApp();
+	const req = require("../../utils/request.js");
+	const utils = require("../../utils/util.js");
+	var QQMapWX = require("../../utils/qqmap.js");
+	const route = require("../../utils/route");
+	const api = require("../../utils/api.js");
+	import productFooter from "../../components/product_footer/index";
+
+	export default {
+		data() {
+			return {
+				bottomBlankHeight: app.globalData.isIPhoneX ? 68 : 0,
+				swiperCurrent: 0,
+				bannerUrls: [],
+				isShow: false,
+				pro: {},
+				isCart: false,
+				timer: [],
+				hideShare: true,
+				codeUrl: '',
+				form: {
+					page: 1,
+					limit: 10
+				},
+				freshen: true,
+				//是否更新页面
+				isActive: false,
+				current: "",
+				query: "",
+				userInfo: "",
+				shopId: "",
+				params: "",
+				product: "",
+				nodes: "",
+				imgs: [],
+				tabe: "",
+				load: false,
+				address: {},
+				index: "",
+				popup: "",
+				tabIndex: "",
+				switch: true,
+				about: {},
+				allShow: false,
+				isVideoScene: false, //立即购买是否需要登录
+				isShowUpdate: false, //是否显示更新信息弹窗
+				isUpdateInfo: false, //更新用户信息
+				isUpdateMobile: false, //绑定手机号
+
+				recommendCard: {},
+				chatShow: true,
+				chatShowText: true,
+
+				isShowCodePop: false,
+
+				config: {},
+				skuList:[]
+			};
+		},
+
+		components: {
+			productFooter,
+		},
+		props: {},
+		onLoad: async function(options) {
+			let that = this;
+			this.query = options;
+			this.setData({
+				query: options
+			});
+
+			if (options.scene) {
+				this.scene = options.scene;
+			}
+			this.getConfig()
+			await req.silenceLogin();
+		},
+		onShow: async function() {
+			await req.silenceLogin();
+			this.userInfo = req.getStorage('userInfo')
+			if (this.scene) {
+				this.query.id = this.scene
+			}
+			this.loadProudct()
+			// await this.browsRecound(this.query.id);
+			QQMapWX.initMap();
+			req.getLocation(res => {
+				const to = {
+					latitude: res.latitude,
+					longitude: res.longitude
+				};
+				QQMapWX.reverseGeocoder(to, resp => {});
+				this.getRecommendCard(to)
+			});
+		},
+		onShareAppMessage: function(options) {
+			let merchantId = '';
+			let path = 'id=' + this.query.id
+			let userInfo = req.getStorage('userInfo');
+			if (!userInfo.id) {} else {
+				path += '&userId=' + userInfo.id;
+			}
+			let url = '/product/detail/detail?' + path;
+			return {
+				title: this.product.title,
+				imageUrl: this.product.pic,
+				path: url
+			};
+		},
+		// onShareTimeline() {
+		// 	let merchantId = '';
+		// 	let path = 'id=' + this.query.id
+		// 	let userInfo = req.getStorage('userInfo');
+		// 	if (!userInfo.id) {} else {
+		// 		path += '&userId=' + userInfo.id;
+		// 	}
+		// 	let url = '/product/detail/detail?' + path;
+		// 	return {
+		// 		title: this.product.title,
+		// 		query: path,
+		// 		imageUrl: this.product.images[0]
+		// 	};
+		// },
+
+		onReachBottom() {},
+
+		methods: {
+			getConfig() {
+				req.getRequest('/api/other/config', {}, data => {
+					req.setStorage('configRes', JSON.stringify(data));
+					this.config = data;
+				})
+			},
+			click(e) {
+				// console.log(e,"7899")
+				this.hideShare = e
+			},
+
+			/**
+			 * 轮播切换
+			 */
+			swiperChange({
+				detail
+			}) {
+				if (this.current == 0 && this.swiperCurrent > 1) {
+					//卡死时,重置current为正确索引
+					this.setData({
+						current: this.swiperCurrent
+					});
+				} else {
+					//正常轮转时,记录正确页码索引
+					this.setData({
+						swiperCurrent: detail.current
+					});
+				}
+			},
+
+			dotEvent(e) {
+				this.setData({
+					current: e.currentTarget.dataset.current
+				});
+			},
+
+			// 获取推荐销售
+			getRecommendCard(loction) {
+				let params = loction
+				if (req.getStorage("shareId")) {
+					params.shareSaleNo = req.getStorage("shareId")
+				}
+				req.getRequest('/api/visiting/card/recommendCardInfo', params, res => {
+					this.recommendCard = res
+					console.log('获取推荐销售》》》》》', res);
+					setTimeout(() => {
+						this.chatShow = false
+						setTimeout(() => {
+							this.chatShowText = false
+						}, 450)
+					}, 2000)
+				})
+			},
+
+			loadProudct() {
+				let that = this;
+				that.setData({
+					bannerUrls: [],
+					product: '',
+					nodes: ''
+				});
+				let form = {
+					id: this.query.id
+				};
+				let isShowLoading = false;
+				this.allShow = false
+				if (!isShowLoading) {
+					req.loadIng('加载中');
+					isShowLoading = true;
+				}
+
+				req.getRequest('/api/v1/product/detail', form, data => {
+					//富文本图片放大
+					var nodes = data.detail;
+					let tabe = [];
+					that.setData({
+						bannerUrls: data.images,
+						product: data,
+						nodes: nodes,
+						tabe: tabe,
+						load: true,
+						allShow: true
+					});
+					this.loadProductSku()
+					if (isShowLoading) {
+						uni.hideLoading();
+						isShowLoading = false;
+					}
+
+				});
+			},
+			loadProductSku() {
+				let _ts = this;
+				let from = {
+					id : this.product.id
+				}
+				return new Promise((resolve, reject) => {
+					req.getRequest(
+						'/api/v1/product/sku',
+						from,
+						res => {
+							this.skuList = res
+							resolve();
+						},
+						true
+					);
+				});
+			},
+			goTop(e) {
+				// 一键回到顶部
+				if (uni.pageScrollTo) {
+					uni.pageScrollTo({
+						scrollTop: 0
+					});
+				} else {
+					uni.showModal({
+						title: '提示',
+						content: '当前微信版本过低,无法使用该功能,请升级到最新微信版本后重试。'
+					});
+				}
+			},
+
+			jumpUrl(url) {
+				uni.navigateTo({
+					url: url
+				})
+			},
+			closeUpdate() {
+				this.isShowUpdate = false
+				this.isUpdateInfo = false;
+				this.isUpdateMobile = false;
+			},
+
+			showCodePop() {
+				this.isShowCodePop = true
+				req.saveBehaviorNew(this.recommendCard.id, 1, 18)
+			},
+			// 拨打电话
+			callPhone(val) {
+				if (!val) return false
+				uni.makePhoneCall({
+					phoneNumber: val
+				});
+			},
+			copy(val) {
+				this.isShowCodePop = false
+				uni.setClipboardData({
+					data: val,
+					complete() {
+						req.msg('复制成功')
+					}
+				})
+			},
+
+			jumpSingleChatRoom() {
+				if (this.recommendCard) {
+					req.jumpSingleChatRoom(this.recommendCard.userId, this.recommendCard.avatar, this.recommendCard
+						.realName);
+					req.saveBehaviorNew(this.recommendCard.id, 1, 14)
+				}
+
+			}
+		}
+	};
+</script>
+<style>
+	@import "./detail.css";
+</style>

+ 184 - 0
product/sort/sort.css

@@ -0,0 +1,184 @@
+/* pages/sort/sort.wxss */
+page {
+	background: #fff;
+}
+
+.search-box {
+	background: #fff;
+	padding: 0 30rpx 30rpx;
+	height: 70rpx;
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	z-index: 50;
+}
+
+.search {
+	background: #f7f7f7;
+	border-radius: 35rpx;
+	justify-content: center;
+	font-size: 28rpx;
+	color: #999;
+	height: 70rpx;
+	padding: 0 30rpx;
+}
+
+.search image {
+	width: 30rpx;
+	height: 30rpx;
+	margin-right: 20rpx;
+}
+
+.tab {
+	padding: 30rpx;
+	white-space: nowrap;
+	-webkit-overflow-scrolling: touch;
+	background: #F0F0F0;
+	box-sizing: border-box;
+	position: fixed;
+	top: 70rpx;
+	left: 0;
+	right: 0rpx;
+	z-index: 50;
+	background-color: #fff;
+	font-size: 30rpx;
+}
+
+.tab .li {
+	display: inline-block;
+	padding-right: 40rpx;
+	line-height: 80rpx;
+}
+
+.tab .li:last-child {
+	margin-right: 0;
+}
+
+.tab .li.active {
+	color: var(--main) !important;
+	font-size: 32rpx;
+}
+
+.sort {
+	padding: 29rpx 0 0 20rpx;
+	box-sizing: border-box;
+}
+
+
+.sort .li {
+	border-bottom: 2rpx solid #eee;
+	padding-bottom: 39rpx;
+	margin-bottom: 39rpx;
+	overflow: hidden;
+	padding-right: 20rpx;
+}
+
+.sort .li:last-child {
+	margin-bottom: 0;
+}
+
+.sort .li .flex {
+	overflow: hidden;
+}
+
+.proimgs {
+	width: 160rpx;
+	height: 160rpx;
+	border-radius: 10rpx;
+	position: relative;
+	margin-right: 18rpx;
+	border: 2rpx solid #E5E5E5;
+}
+
+.proimg {
+	box-sizing: border-box;
+	width: 100%;
+	height: 100%;
+	border-radius: 10rpx;
+}
+
+.shouqing {
+	width: 100%;
+	height: 100%;
+	border-radius: 10rpx;
+	position: absolute;
+	top: 0;
+	left: 0;
+}
+
+.proname {
+	font-size: 28rpx;
+	color: #333;
+	/* text-overflow: ellipsis;
+	white-space: nowrap; */
+	line-height: 36rp;
+	height: 76rpx;
+	overflow: hidden;
+}
+
+.pronames {
+	font-size: 24rpx;
+	color: #999;
+	margin-top: 5rpx;
+}
+
+.endtime {
+	display: inline-block;
+	height: 32rpx;
+	line-height: 32rpx;
+	border: 2rpx solid #FE0419;
+	border-radius: 6rpx;
+	padding: 0 8rpx;
+	font-size: 24rpx;
+	color: #FE0419;
+	margin: 15rpx 0 65rpx;
+}
+
+.operate {
+	justify-content: space-between;
+	align-items: flex-start;
+	margin-top: 10rpx;
+}
+
+.price {
+	font-size: 24rpx;
+	align-items: center;
+	display: flex;
+	flex-wrap: nowrap;
+	margin-top: 10rpx;
+}
+
+.price text {
+	font-size: 24rpx;
+	color: #FE0419;
+}
+
+.add-cart image {
+	width: 12rpx;
+	height: 24rpx;
+	margin-top: 14rpx;
+	margin-left: 20rpx;
+}
+
+.nums {
+	align-items: center;
+}
+
+.num {
+	font-size: 30rpx;
+	width: 50rpx;
+	text-align: center;
+	line-height: 42rpx;
+}
+.tag{
+	padding: 4rpx 10rpx;
+	font-size: 24rpx;
+	color: #4b95f6;
+	background-color: #ecf0fd;
+	margin-right: 10rpx;
+	margin-top: 10rpx;
+}
+::-webkit-scrollbar {
+	display: none;
+}

+ 165 - 0
product/sort/sort.vue

@@ -0,0 +1,165 @@
+<template>
+	<view>
+		<view class="search-box">
+			<view class="search ddflex" @click="search()">
+				<image src="../../static/images/ssico.png"></image>
+				<input class="fflex" placeholder="搜索产品名称或标签" v-model="searchVal" @input="search" @confirm="search"/>
+			</view>
+		</view>
+		<scroll-view scroll-X="true" class="tab">
+			<view :class="'li ' + (currents == -1 ? 'active' : '')" @tap="cateTabs(-1,'')" >全部</view>
+			<block v-for="(item, index) in cates" :key="index">
+				<view :class="'li ' + (currents == index ? 'active' : '')" @tap="cateTabs(index,item.id)">{{item.title}}</view>
+			</block>
+		</scroll-view>
+		<view style="height: 190rpx;"></view>
+		<view class="sort">
+			<block v-for="(item, index) in pageList" :key="index">
+				<view class="li dflex" @tap="toDetail(item.id)">
+					<view class="proimgs">
+						<image :src="item.pic" mode="aspectFill" class="proimg"
+							lazy-load="true"></image>
+						<image src="../../static/pages/images/shouqing.png" class="shouqing" v-if="item.stock < 1">
+						</image>
+					</view>
+					<view class="flex">
+						<view class="proname tovers" style="font-weight: bold;font-size: 32rpx;line-height: 38rpx;">{{item.title}}</view>
+						<view class="pronames tovers">
+							{{item.brief?item.brief:''}}
+						</view>
+						<view class="operate dflex">
+							<view class="ddflex fflex">
+								<block v-if="item.label">
+									<view class="tag" v-for="it,idx in item.label.split(',')" :key="idx">{{it}}</view>
+								</block>
+							</view>
+							<!-- <view class="price">
+								已售:<text>{{item.salePrice}}件</text>
+							</view> -->
+							<!-- <view class="add-cart">
+								<image src="../static/product/image/you.png">
+								</image>
+							</view> -->
+						</view>
+					</view>
+				</view>
+			</block>
+			<view class="nodata nosp bgfff" v-if="show">
+				<image :src="picUrlss+'empty_sp.png'"></image>
+				<text>暂无产品</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	// pages/sort/sort.js
+	//获取应用实例
+	const app = getApp();
+	const req = require("../../utils/request.js");
+	let scrollDdirection = 0; // 用来计算滚动的方向
+
+	export default {
+		data() {
+			return {
+				picUrlss: req.public.picUrls,
+				cates: [],//产品一级分类列表
+				currents: -1,
+				page: 1,
+				limit:10,
+				isload: false,
+				isUpdate: false // 是否更新消息
+					,
+				pageList: [],
+				cateid: '',
+				searchVal:''
+			};
+		},
+
+		components: {},
+		props: {},
+		onLoad: async function(options) {
+			this.category();
+		},
+
+		onShow() {
+			this.setData({
+				isUpdate: !this.isUpdate
+			});
+		},
+
+		onReachBottom() {
+			this.page++;
+			if (this.currents > -1) {
+				this.getList(this.cateid);
+			} else {
+				this.getList(this.id);
+			}
+		},
+
+		methods: {
+
+			category() {
+				//产品分类
+				let that = this;
+				// console.log(id, dataName, listId);
+				let from = {
+					page: 1,
+					size: 1000
+				};
+				req.getRequest('/api/v1/category/list', from, res => {
+					this.cates = res
+					this.getList();
+				});
+			},
+			cateTabs(index,id) {
+				if(this.currents == index) return false
+				this.setData({
+					currents: index,
+					page: 1,
+					cateid: id
+				});
+				this.getList();
+			},
+
+			getList() {
+				// console.log("====================")
+				//产品列表
+				let that = this;
+				let from = {
+					page: that.page,
+					limit: that.limit,
+					categoryId: that.cateid
+				};
+				if(this.searchVal) from.searchTitle = this.searchVal
+				req.getRequest('/api/v1/product/list', from, res => {
+					if(that.page==1) that.pageList = []
+					if (res && res.length >= that.limit) that.isLoad = true;
+					if (that.page > 1) res = that.pageList.concat(res);
+					if (res.length <= 0) {
+						that.setData({
+							show: true
+						})
+					} else {
+						that.setData({
+							show: false
+						})
+					}
+					that.setData({
+						pageList: res
+					});
+				});
+			},
+			toDetail(id) {
+				app.globalData.openPage("product/detail/detail?id=" + id);
+			},
+			search() {
+				this.page = 1
+				this.getList();
+			}
+		}
+	};
+</script>
+<style>
+	@import "./sort.css";
+</style>