8-30

.hbuilderx/launch.json

@@ -2,10 +2,15 @@
   // launchtype项可配置值为local或remote, local代表前端连本地云函数，remote代表前端连云端云函数
     "version": "0.0",
     "configurations": [{
-            "type": "uniCloud",
-            "default": {
-                "launchtype": "remote"
-            }
-        }
+     	"default" : 
+     	{
+     		"launchtype" : "remote"
+     	},
+     	"h5" : 
+     	{
+     		"launchtype" : "remote"
+     	},
+     	"type" : "uniCloud"
+     }
     ]
 }

api/index.js

@@ -0,0 +1,51 @@
+import request from '@/utils/request'
+
+// 促销商品
+export function groom4(data) {
+	return request({
+		url: '/api/groom/list/4',
+		method: 'get',
+		data
+	});
+}
+// 精品推荐
+export function groom1(data) {
+	return request({
+		url: '/api/groom/list/1',
+		method: 'get',
+		data
+	});
+}
+// 新品首发
+export function groom3(data) {
+	return request({
+		url: '/api/groom/list/3',
+		method: 'get',
+		data
+	});
+}
+
+// 获取首页信息
+export function loadIndexs(data) {
+	return request({
+		url: '/api/index',
+		method: 'get',
+		data
+	});
+}
+//获取文章列表
+export function article(data,id) {
+	return request({
+		url: '/api/article/list/' + id,
+		method: 'get',
+		data
+	});
+}
+//获取文章详情
+export function details(data,id) {
+        return request({
+                url: '/api/article/details/'+id,
+                method: 'GET',
+                data
+        });
+}

api/login.js

@@ -0,0 +1,57 @@
+import request from '@/utils/request'
+
+// 登录
+export function login(data) {
+	return request({
+		url: '/api/login',
+		method: 'post',
+		data
+	});
+}
+// 注册
+export function register(data) {
+	return request({
+		url: '/api/register',
+		method: 'post',
+		data
+	});
+}
+// 验证码
+export function verify(data) {
+	// type=register为注册
+	// type=login为登录
+	return request({
+		url: '/api/register/verify',
+		method: 'post',
+		data
+	});
+}
+
+// 获取用户信息
+export function getUserInfo(data) {
+	return request({
+		url: '/api/userinfo',
+		method: 'get',
+		data
+	});
+}
+
+// 短信登录
+export function loginMobile(data) {
+	return request({
+		url: '/api/login/mobile',
+		method: 'post',
+		data
+	});
+}
+// #ifdef APP-PLUS
+// 微信授权登录
+export function loginWx(data) {
+	return request({
+		url: '/api/wechat/appauth',
+		method: 'get',
+		data
+	});
+}
+// #endif
+

api/order.js

@@ -0,0 +1,146 @@
+import request from '@/utils/request'
+import {upFilse} from '@/utils/request'
+// 订单确认
+export function confirm(data) {
+	return request({
+		url: '/api/order/confirm',
+		method: 'post',
+		data
+	});
+}
+//获取可使用优惠券
+export function couponsOrder(data,price) {
+	return request({
+		url: '/api/coupons/order/'+price,
+		method: 'get',
+		data
+	});
+}
+//获取优惠券列表
+export function getCouponsList(data,types) {
+	//优惠券状态 0全部 1未使用 2已使用
+	return request({
+		url: '/api/coupons/user/'+types,
+		method: 'get',
+		data
+	});
+}
+//提交评论
+export function order_comment(data) {
+	return request({
+		url: '/api/order/comment',
+		method: 'post',
+		data
+	});
+}
+//订单产品信息
+export function product(data) {
+	return request({
+		url: '/api/order/product',
+		method: 'post',
+		data
+	});
+}
+// 快递查询
+export function express_query(data) {
+	return request({
+		url: '/api/order/express_query',
+		method: 'get',
+		data
+	});
+}
+//上传图片
+export function upload(data) {
+	return upFilse({
+		url: '/api/upload/image',
+		method: 'post',
+		data
+	});
+}
+// 订单列表
+export function orderList(data) {
+	return request({
+		url: '/api/order/list',
+		method: 'get',
+		data
+	});
+}
+// 订单详细
+export function orderDetail(data,orderid) {
+	return request({
+		url: '/api/order/detail/'+orderid,
+		method: 'get',
+		data
+	});
+}
+
+// 取消订单
+export function orderCancel(data) {
+	return request({
+		url: '/api/order/cancel',
+		method: 'post',
+		data
+	});
+}
+
+// 删除订单
+export function orderDel(data) {
+	return request({
+		url: '/api/order/del',
+		method: 'get',
+		data
+	});
+}
+// 申请退款
+export function refund(data) {
+	return request({
+		url: '/api/order/refund/verify',
+		method: 'post',
+		data
+	});
+}
+// 退款理由列表
+export function refundReason(data) {
+	return request({
+		url: '/api/order/refund/reason',
+		method: 'get',
+		data
+	});
+}
+
+// 确认收货
+export function orderTake(data) {
+	return request({
+		url: '/api/order/take',
+		method: 'post',
+		data
+	});
+}
+
+// 订单支付
+export function orderPay(data) {
+	return request({
+		url: '/api/order/pay',
+		method: 'post',
+		data
+	});
+}
+
+// 创建订单
+export function createOrderkey(data,key) {
+	return request({
+		url: '/api/order/create/'+key,
+		method: 'post',
+		data
+	});
+}
+
+// 统计订单金额
+export function computedOrderkey(data) {
+	return request({
+		url: '/api/order/computed/'+data.orderkey,
+		method: 'post',
+		data
+	});
+}
+

api/product.js

@@ -0,0 +1,186 @@
+import request from '@/utils/request'
+
+// 获取商品列表
+export function getProducts(data) {
+	// 	{
+	// 参数名称	是否必须	示例	备注
+	// sid			否			二级分类编号
+	// cid			否			一级分类编号（！）
+	// keyword		否			搜索
+	// priceOrder	否			价格排序
+	// salesOrder	否			销量排序
+	// news			否			是否新品
+	// page			否			分页参数起始值
+	// limit		否			分页数步长值
+	// }
+	return request({
+		url: '/api/products',
+		method: 'get',
+		data
+	});
+}
+// 获取商品详情
+export function goodsDetail(data, id) {
+	return request({
+		url: '/api/product/detail/' + id,
+		method: 'get',
+		data
+	});
+}
+
+// 砍价列表
+export function getBargainList(data) {
+	return request({
+		url: '/api/bargain/list',
+		method: 'get',
+		data
+	});
+}
+// 加入购物车
+export function cartAdd(data) {
+	return request({
+		url: '/api/cart/add',
+		method: 'post',
+		data
+	});
+}
+
+// 收藏商品
+export function collectAdd(data) {
+	return request({
+		url: '/api/collect/add',
+		method: 'post',
+		data
+	});
+}
+
+// 取消收藏商品
+export function collectDel(data) {
+	return request({
+		url: '/api/collect/del',
+		method: 'post',
+		data
+	});
+}
+
+// 获取搜搜关键字
+export function searchKeyword(data) {
+	return request({
+		url: '/api/search/keyword',
+		method: 'get',
+		data
+	});
+}
+
+// 获取热门分类信息
+export function groomList(data,type) {
+	// 获取产品类型 1 精品推荐 2 热门榜单 3首发新品 4促销单品
+	return request({
+		url: '/api/groom/list/'+type,
+		method: 'get',
+		data
+	});
+}
+
+
+// 获取秒杀商品详细
+export function seckillGoods(data,id) {
+	return request({
+		url: '/api/seckill/detail/'+id,
+		method: 'get',
+		data
+	});
+}
+
+// 获取拼团商品详细
+export function groupGoods(data,id) {
+	return request({
+		url: '/api/combination/detail/'+id,
+		method: 'get',
+		data
+	});
+}
+
+
+// 获取商品分类
+export function getCategoryList(data) {
+	return request({
+		url: '/api/category',
+		method: 'get',
+		data
+	});
+}
+
+
+// 获取拼团列表
+export function getCombinationList(data) {
+	return request({
+		url: '/api/combination/list',
+		method: 'get',
+		data
+	});
+}
+
+//取消拼团
+export function getCombinationLisRemove(data,id) {
+	return request({
+		url: '/api/combination/remove'+id,
+		method: 'get',
+		data
+	});
+}
+
+//拼团开团页面数据
+export function getCombinationLisPink(data,id) {
+	return request({
+		url: '/api/combination/pink/'+id,
+		method: 'get',
+		data
+	});
+}
+
+// 获取拼团海报
+export function getCombinationPoster(data) {
+	return request({
+		url: '/api/combination/poster',
+		method: 'post',
+		data
+	});
+}
+
+
+// 获取秒杀分类
+export function getSeckillClass(data) {
+	return request({
+		url: '/api/seckill/index',
+		method: 'get',
+		data
+	});
+}
+// 获取秒杀列表
+export function getSeckillList(data,id) {
+	return request({
+		url: '/api/seckill/list/'+id,
+		method: 'get',
+		data
+	});
+}
+
+
+// 产品评价数量和好评度
+export function reply_config(data,id) {
+	return request({
+		url: '/api/reply/config/'+id,
+		method: 'get',
+		data
+	});
+}
+// 获取产品评论
+export function reply_list(data,id) {
+	return request({
+		url: '/api/reply/list/'+id,
+		method: 'get',
+		data
+	});
+}
+

api/set.js

@@ -0,0 +1,71 @@
+import request from '@/utils/request'
+
+// 修改用户信息
+export function userEdit(data) {
+	return request({
+		url: '/api/user/edit',
+		method: 'post',
+		data
+	});
+}
+
+//退出登录
+export function logout(data) {
+	return request({
+		url: '/api/logout',
+		method: 'get',
+		data
+	});
+}
+//修改密码
+export function registerReset(data) {
+	return request({
+		url: '/api/register/reset',
+		method: 'post',
+		data
+	});
+}
+
+//绑定手机
+export function binding(data) {
+	return request({
+		url: '/api/binding',
+		method: 'post',
+		data
+	});
+}
+// #ifdef APP-PLUS
+//苹果生成账户
+export function applelogin(data) {
+	return request({
+		url: '/api/applelogin',
+		method: 'post',
+		data
+	});
+}
+// #endif
+
+
+//获取省市区
+export function getAddressArea(data) {
+	return request({
+		url: '/api/area',
+		method: 'get',
+		data
+	});
+}
+//获取村镇
+export function getAddressCity(data,id) {
+	return request({
+		url: '/api/village/'+id,
+		method: 'get',
+		data
+	});
+}
+export function getAddressDetail(data,id) {
+	return request({
+		url: '/api/address/detail/'+id,
+		method: 'get',
+		data
+	});
+}

api/user.js

@@ -0,0 +1,174 @@
+import request from '@/utils/request'
+import { upFilse } from '@/utils/request';
+
+// 订单统计信息
+export function orderData(data) {
+	return request({
+		url: '/api/order/data',
+		method: 'get',
+		data
+	});
+}
+
+// 获取用户信息
+export function getUserInfo(data) {
+	return request({
+		url: '/api/userinfo',
+		method: 'get',
+		data
+	});
+}
+
+// 用户分享图
+export function spreadBanner(data) {
+	return request({
+		url: '/api/spread/banner',
+		method: 'get',
+		data
+	});
+}
+
+// 获取地址列表
+export function getAddressList(data) {
+	return request({
+		url: '/api/address/list',
+		method: 'get',
+		data
+	});
+}
+// 修改地址
+export function addressEdit(data) {
+	return request({
+		url: '/api/address/edit',
+		method: 'post',
+		data
+	});
+}
+// 删除地址
+export function addressDel(data) {
+	return request({
+		url: '/api/address/del',
+		method: 'post',
+		data
+	});
+}
+// 设为默认地址
+export function setAddressDefault(data) {
+	return request({
+		url: '/api/address/default/set',
+		method: 'post',
+		data
+	});
+}
+// 购物车列表
+export function getCartList(data) {
+	return request({
+		url: '/api/cart/list',
+		method: 'get',
+		data
+	});
+}
+
+// 修改购物车数量
+export function getCartNum(data) {
+	return request({
+		url: '/api/cart/num',
+		method: 'post',
+		data
+	});
+}
+//删除购物车
+export function cartDel(data) {
+	return request({
+		url: '/api/cart/del',
+		method: 'post',
+		data
+	});
+}
+//获取收藏夹列表
+export function getcollectList(data) {
+	return request({
+		url: '/api/collect/user',
+		method: 'get',
+		data
+	});
+}
+// 取消收藏
+export function delcollect(data) {
+	return request({
+		url: '/api/collect/del',
+		method: 'post',
+		data
+	});
+}
+
+//上传图片
+export function upload(data){
+	return upFilse({
+		url:'/api/upload/image',
+		method:'post',
+		data
+	})
+}
+
+//用户修改信息
+export function edit(data) {
+	return request({
+		url: '/api/user/edit',
+		method: 'post',
+		data
+	});
+}
+
+// 推广的人数
+export function getSpreadPeople(data){
+	return request({
+		url:'/api/spread/people',
+		method:'post',
+		data
+	})
+}
+//我的会员
+export function getMyTvillage(data){
+	return request({
+		url:'/api/mytvillage',
+		method:'get',
+		data
+	})
+}
+
+//推广佣金/提现总和 
+//3=佣金,4=提现
+export function getSpreadCount(data,type) {
+	return request({
+		url:'/api/spread/count/'+type,
+		method:'get',
+		data
+	})
+}
+//我的实体店
+export function getMyStore(data) {
+	return request({
+		url:'/api/mystore',
+		method:'get',
+		data
+	})
+}
+
+//申请会员 店长
+export function enter(data) {
+	return request({
+		url:'/api/enter',
+		method:'post',
+		data
+	})
+}
+
+//编辑门店
+export function editStore(data) {
+	return request({
+		url:'/api/store_edit',
+		method:'post',
+		data
+	})
+}

pages.json

@@ -1,3 +1,4 @@
+<<<<<<< HEAD
 {
 	"pages": [{
 			"path": "pages/index/index",
@@ -114,30 +115,274 @@
 								}
 							}
 						}
+=======
+{
+	"pages": [{
+			"path": "pages/index/index",
+			"style": {
+				"enablePullDownRefresh": true,
+
+				"navigationStyle": "custom",
+
+
+				// "app-plus": {
+				// 	"titleNView": {
+				// 		"type": "transparent",
+				// 		"searchInput": {
+				// 			"backgroundColor": "rgba(231, 231, 231,.7)",
+				// 			"borderRadius": "16px",
+				// 			"placeholder": "请输入关键字",
+				// 			"disabled": true,
+				// 			"placeholderColor": "#606266",
+				// 			"align": "left"
+				// 		}
+				// 	}
+				// },
+
+				"navigationBarTitleText": "商城首页"
+			}
 		},
 		{
-			"path": "pages/user/transfer",
+			"path": "pages/category/category",
 			"style": {
-				"navigationBarTitleText": "佣金转账",
-				"navigationBarBackgroundColor":"#FFFFFF",
-				"navigationBarTextStyle":"black"	
+				// #ifdef APP-PLUS
+				"navigationStyle": "custom",
+				// #endif
+				// #ifndef MP
+				"app-plus": {
+					"bounce": "none",
+					"titleNView": {
+						"searchInput": {
+							"backgroundColor": "rgba(231, 231, 231,.7)",
+							"borderRadius": "16px",
+							"placeholder": "商品搜索",
+							"disabled": true,
+							"placeholderColor": "#606266",
+							"align": "left"
+						}
+					}
+				},
+				// #endif
+				"navigationBarTitleText": "分类",
+				"navigationBarBackgroundColor": "#FFFFFF"
 			}
+		}, {
+			"path": "pages/cart/cart",
+			"style": {
+				"navigationBarTitleText": "购物车",
+				"navigationBarBackgroundColor": "#FFFFFF",
+				"navigationBarTextStyle": "black"
+			}
+>>>>>>> 4c6639bcd76c747d3f8c6a4ff42da6c240281c59
 		},
 		{
-			"path": "pages/user/submit",
+			"path": "pages/user/user",
 			"style": {
-				"navigationBarTitleText": "提交成功",
-				"navigationBarBackgroundColor":"#FFFFFF",
-				"navigationBarTextStyle":"black"
+				"navigationBarTitleText": "个人中心"
 			}
 		},
 		{
-			"path": "pages/user/withdraw",
+			"path": "pages/user/jiedian",
 			"style": {
-				"navigationBarTitleText": "提现",
-				"navigationBarBackgroundColor":"#FFFFFF",
-				"navigationBarTextStyle":"black"
+				"navigationBarTitleText": "我的接点",
+				"navigationBarBackgroundColor": "#FFFFFF",
+				"navigationBarTextStyle": "black"
+			}
+		},
+		{
+			"path": "pages/user/accounts"
+		}
+		],
+		"pages": [{
+				"path": "pages/index/index",
+				"style": {
+					"enablePullDownRefresh": true,
+					// #ifdef MP
+					"navigationStyle": "custom",
+					// #endif
+					// #ifndef MP
+					"app-plus": {
+						"titleNView": {
+							"type": "transparent",
+							"searchInput": {
+								"backgroundColor": "rgba(231, 231, 231,.7)",
+								"borderRadius": "16px",
+								"placeholder": "请输入关键字",
+								"disabled": true,
+								"placeholderColor": "#606266",
+								"align": "left"
+							}
+						}
+					},
+					// #endif
+					"navigationBarTitleText": "商城首页"
+				}
+			},
+			{
+				"path": "pages/category/category",
+				"style": {
+					// #ifdef APP-PLUS
+					"navigationStyle": "custom",
+					// #endif
+					// #ifndef MP
+					"app-plus": {
+						"bounce": "none",
+						"titleNView": {
+							"searchInput": {
+								"backgroundColor": "rgba(231, 231, 231,.7)",
+								"borderRadius": "16px",
+								"placeholder": "商品搜索",
+								"disabled": true,
+								"placeholderColor": "#606266",
+								"align": "left"
+							}
+						}
+					},
+					// #endif
+					"navigationBarTitleText": "分类",
+					"navigationBarBackgroundColor": "#FFFFFF"
+				}
+			},
+			{
+				"path": "pages/product/product",
+				"style": {
+					"navigationBarTitleText": "详情展示",
+					"app-plus": {
+						"titleNView": {
+							"type": "transparent"
+						}
+					}
+				}
+			},
+			{
+				"path": "pages/cart/cart",
+				"style": {
+					"navigationBarTitleText": "购物车",
+					"navigationBarBackgroundColor": "#fff",
+					"navigationBarTextStyle": "black"
+
+				}
+			},
+			{
+				"path": "pages/user/user",
+				"style": {
+					"navigationBarTitleText": "个人中心",
+					"navigationStyle": "custom"
+				}
+			},
+			{
+				"path": "pages/user/accounts",
+				"style": {
+					"navigationBarTitleText": "我的佣金"
+				}
+			},
+			{
+				"path": "pages/user/transfer",
+				"style": {
+					"navigationBarTitleText": "佣金转账"
+				}
+			},
+			{
+				"path": "pages/user/submit",
+				"style": {
+					"navigationBarTitleText": "提交成功"
+				}
+			},
+			{
+				"path": "pages/user/withdraw",
+				"style": {
+					"navigationBarTitleText": "提现"
+				}
+			},
+			{
+				"path": "pages/story/story",
+				"style": {
+					"navigationBarTitleText": "品牌故事",
+					"navigationBarBackgroundColor": "#fff",
+					"navigationBarTextStyle": "black"
+
+				}
+			},
+			{
+				"path": "pages/story/storyDetail",
+				"style": {
+					// "navigationBarTitleText": "品牌故事",
+					"navigationStyle": "custom"
+				}
+			},
+			{
+				"path": "pages/order/order",
+				"style": {
+					"navigationBarTitleText": "我的订单",
+					"app-plus": {
+						"bounce": "none"
+					}
+				}
+			},
+			{
+				"path": "pages/order/expressInfo",
+				"style": {
+					"navigationBarTitleText": "快递详情"
+				}
+			},
+			{
+				"path": "pages/order/orderDetail",
+				"style": {
+					"navigationBarTitleText": "订单详情",
+					"app-plus": {
+						"bounce": "none"
+					}
+				}
+			},
+			{
+				"path": "pages/order/evaluate",
+				"style": {
+					"navigationBarTitleText": "评论"
+				}
+			},
+			{
+				"path": "pages/order/orderRefund",
+				"style": {
+					"navigationBarTitleText": "申请退款"
+				}
+			},
+			{
+				"path": "pages/order/createOrder",
+				"style": {
+					"navigationBarTitleText": "创建订单"
+				}
+			},
+			{
+				"path": "pages/set/address",
+				"style": {
+					"navigationBarTitleText": "收货地址"
+				}
+			},
+			{
+				"path": "pages/set/addressManage",
+				"style": {
+					"navigationBarTitleText": ""
+				}
+			},
+			{
+				"path": "pages/set/phone",
+				"style": {
+					"navigationBarTitleText": "实名认证"
+				}
+			},
+			{
+				"path": "pages/set/password",
+				"style": {
+					"navigationBarTitleText": "修改密码"
+				}
+			},
+			{
+				"path": "pages/set/userinfo",
+				"style": {
+					"navigationBarTitleText": "修改资料"
+				}
 			}
+<<<<<<< HEAD
 		},
 		{
 			"path": "pages/user/refer",
@@ -192,5 +437,44 @@
 				"text": "我的"
 			}
 		]
+=======
+		],
+		"tabBar": {
+			"color": "#C0C4CC",
+			"selectedColor": "#3F7C1F",
+			"borderStyle": "black",
+			"backgroundColor": "#ffffff",
+			"list": [{
+					"pagePath": "pages/index/index",
+					"iconPath": "static/tabBar/tab-home.png",
+					"selectedIconPath": "static/tabBar/tab-home-current.png",
+					"text": "首页"
+				},
+				{
+					"pagePath": "pages/category/category",
+					"iconPath": "static/tabBar/tab-cate.png",
+					"selectedIconPath": "static/tabBar/tab-cate-current.png",
+					"text": "分类"
+				},
+				{
+					"pagePath": "pages/story/story",
+					"iconPath": "static/tabBar/tab-cart.png",
+					"selectedIconPath": "static/tabBar/tab-cart-current.png",
+					"text": "品牌故事"
+				},
+				{
+					"pagePath": "pages/cart/cart",
+					"iconPath": "static/tabBar/tab-cart.png",
+					"selectedIconPath": "static/tabBar/tab-cart-current.png",
+					"text": "购物车"
+				},
+				{
+					"pagePath": "pages/user/user",
+					"iconPath": "static/tabBar/tab-my.png",
+					"selectedIconPath": "static/tabBar/tab-my-current.png",
+					"text": "我的"
+				}
+			]
+		}
+>>>>>>> 4c6639bcd76c747d3f8c6a4ff42da6c240281c59
 	}
-}

pages/category/category.vue

@@ -18,7 +18,7 @@
 </template>
 
 <script>
-// import { getCategoryList } from '@/api/product.js';
+import { getCategoryList } from '@/api/product.js';
 export default {
 	data() {
 		return {

pages/index/index.vue

@@ -1,1256 +1,442 @@
 <template>
 	<view class="container">
-		<!-- 小程序头部兼容 -->
-		<!-- #ifdef MP -->
-		<view class="input-box flex" @click="clickSearch">
-			<view class=" input-content flex">
-				<view class="iconfont iconsearch"></view>
-				<view class="input"><input type="text" disabled placeholder="搜索关键字"></view>
+		<view class="searchbackground">
+			<view class="backgroundimg">
+				<image src="../../static/image/background01.png" mode=""></image>
 			</view>
 		</view>
-		<view class="mp-height"></view>
-			<!-- #endif -->
-			<!-- 背景色区域 -->
-			<view class="bg-contain">
-				<image src="./contain.png" mode="scaleToFill">
-				</image>
-				<!-- 头部轮播 -->
-					<swiper class="carousel" autoplay="true" duration="400" interval="5000" @change="swiperChange">
-						<swiper-item v-for="(item,index) in carouselList" class="carousel-item" @click="bannerNavToUrl(item)">
-							<image src="./lunbo.png" mode="scaleToFill"></image>
-						</swiper-item>
-					</swiper>
-			</view>
-				<!-- 自定义swiper指示器 -->
-				<!-- <view class="swiper-dots">
-					<text class="num">{{ swiperCurrent + 1 }}</text>
-					<text class="sign">/</text>
-					<text class="num">{{ swiperLength }}</text>
-				</view> -->
-		<!-- 分类 -->
-		<view class="cate-section">
-			<view class="cate-item">
-				<image src="/static/icon/c3.png"></image>
-				<text>联盟礼包</text>
-			</view>
-			<navigator url="/pages/product/groupBooking/index">
-				<view class="cate-item">
-					<image src="/static/icon/c5.png"></image>
-					<text>超值拼团</text>
+		<view class="content flex">
+			<view class="input-box flex" @click="clickSearch">
+				<view class=" input-content flex">
+					<view class="iconfont iconsearch"></view>
+					<view class="input"><input type="text" disabled placeholder="请输入搜索内容" /></view>
 				</view>
-			</navigator>
-			<navigator url="/pages/product/seckill">
-				<view class="cate-item">
-					<image src="/static/icon/c7.png"></image>
-					<text>限时秒杀</text>
+			</view>
+			<swiper class="carousel" autoplay="true" :interval="5000" :duration="400">
+				<swiper-item @click="carouselList" class="carousel-item" v-for="(item,index) in carouselList"
+					:key="index">
+					<image :src="item.pic"></image>
+				</swiper-item <!-- 自定义swiper指示器 -->
+				<view class="swiper-dots">
 				</view>
-			</navigator>
-			<navigator url="/pages/index/sign">
-				<view class="cate-item">
-					<image src="/static/icon/c8.png"></image>
-					<text>每日签到</text>
+			</swiper>
+			<view class="customs">
+				<image src="../../static/image/baodan.png" mode=""></image>
+			</view>
+			<view class="customs-content">
+				<view class="backgroundimg1">
+					<image src="../../static/image/background02.png" mode=""></image>
 				</view>
-			</navigator>
-		</view>
-		
-		<view class="ad-1"><image src="/static/temp/ad1.jpg" mode="scaleToFill"></image></view>
-		<!-- 可领取优惠券 -->
-		<!-- <scroll-view class="coupon-box clamp" :scroll-x="true">
-			<view v-for="(item, index) in couponArray" :key="item.id" class="coupon-list">
-				<view class="row flex">
-					<view class="list-money flex">
-						<image :src="item.is_use ? '/static/img/img02.png' : '/static/img/img03.png'" mode="scaleToFill"></image>
-						<view class="list-money-text">
-							<view class="tit" :class="{ noAction: item.is_use }">
-								<text>{{ item.coupon_price }}</text>
-							</view>
-						</view>
+				<view class="box">
+					<view class="customs-img">
+						<image src="../../static/img/reduce.png" mode=""></image>
 					</view>
-					<view class="list-interval position-relative">
-						<view class="bottom"></view>
-						<view class="top"></view>
-					</view>
-					<view class="row_list_right">
-						<view class="right_top"><text class="right_title" :class="{ noAction: item.is_use }">满减券</text></view>
-						<view class="right_time">
-							<text>满{{ item.use_min_price }}使用</text>
-						</view>
-					</view>
-					<view class="right_use" :class="{ noAction: item.is_use }" @click="setCoupons(item)">
-						<text>{{ item.is_use ? '已领取' : '立即领取' }}</text>
-					</view>
-				</view>
-			</view>
-		</scroll-view> -->
-
-		<!-- 秒杀楼层 -->
-		<seckill></seckill>
-		<!-- 砍价 -->
-		<view class="hot-goods">
-			<view class="hot-headers flex-upDown-center">
-				<!-- <image class="img" src="../../static/img/img44.png"></image> -->
-				<view class="hot-title">超值砍价</view>
-				<view><view class="more" @click.stop="navTo('/pages/activity/goods_bargain/index')">更多</view></view>
-			</view>
-			<view class="hot-lists" v-for="(baritem, barindex) in bargainlist" :key="barindex" @click.stop="navToDetailPages(baritem)">
-				<view class="hot-produce">
-					<view class="produce-image"><image :src="baritem.image"></image></view>
-					<view class="produce-content">
-						<view class="produce-price1 ">
-							<view class="produce-name line2">{{ baritem.title }}</view>
-							<!-- <view class="produce-info">
-								已抢
-								<text style="color: #FF383E">{{ baritem.sales }}</text>
-								箱/仅剩
-								<text style="color:#FF383E">{{ baritem.stock }}</text>
-								箱
-							</view> -->
-							<view class="produce-center">
-								<view class="kanjia_word">
-									<view class="word-1">原价:￥{{ baritem.price }}</view>
-									<view class="word-2">
-										砍后价
-										<text style="font-size: 24rpx;">￥</text>
-										<text style="font-size: 36rpx;">{{ baritem.min_price }}</text>
-									</view>
-								</view>
-								<view
-									class="kanjia_button flex-center"
-									@tap.stop="openSubscribe('/pages/activity/goods_bargain_details/index?id=' + baritem.id + '&bargain=' + userInfo.uid)"
-								>
-									<view>查看详情</view>
-								</view>
+					<view class="customstext">
+						<view class="customstext1">
+							<view class="customstext-title">
+								竹胎酵素健康饮
+							</view>
+							<view class="customstext-product">
+								健康生态饮品纯植物无香精
 							</view>
 						</view>
-					</view>
-				</view>
-			</view>
-		</view>
-		<!-- 拼团楼层 -->
-
-		<view class="recommend flex">
-			<view class="recommend_list" @click="change(ls.id)" v-for="ls in recommend">
-				<view class="re_title" v-bind:class="{ active_color: ls.id == checkid }">{{ ls.re_title }}</view>
-				<view class="re_name" v-bind:class="{ active_color: ls.id == checkid }">{{ ls.re_name }}</view>
-				<image class="selected_icon" v-bind:class="{ active: ls.id == checkid }" src="/static/img/img04.png"></image>
-			</view>
-		</view>
-		<swiper id="list-box" @change="listChange" :style="{ height: swiperHeight + 'px' }" :current="checkid">
-			<swiper-item>
-				<!-- <scroll-view scroll-y="true" class="list-box-h"> -->
-				<view class="guess-section">
-					<view v-for="(item, index) in bastList" :key="index" class="guess-item" @click="navToDetailPage(item)">
-						<view class="image-wrapper"><image :src="item.image" mode="scaleToFill"></image></view>
-						<text class="title clamp margin-c-20">{{ item.store_name }}</text>
-						<view class="cmy-hr"></view>
-						<view class="price margin-c-20 flex">
-							<view>
-								<text class="font-size-sm ">￥</text>
-								{{ item.price }}
+						<view class="customsprice">
+							<view class="customsprice-left">
+								健康价:￥
 							</view>
-							<view class="font-size-sm">
-								<text class="font-color-gray">{{ item.sales }}人购买</text>
+							<view class="customsprice-between">
+								199
 							</view>
-						</view>
-					</view>
-				</view>
-				<!-- </scroll-view> -->
-			</swiper-item>
-			<swiper-item>
-				<scroll-view scroll-y="true" class="list-box-h">
-					<view class="guess-section">
-						<view v-for="(item, index) in goodsList" :key="index" class="guess-item" @click="navToDetailPage(item)">
-							<view class="image-wrapper"><image :src="item.image" mode="scaleToFill"></image></view>
-							<text class="title clamp margin-c-20">{{ item.store_name }}</text>
-							<view class="cmy-hr"></view>
-							<view class="price margin-c-20 flex">
-								<view>
-									<text class="font-size-sm ">￥</text>
-									{{ item.price }}
-								</view>
-								<view class="font-size-sm">
-									<text class="font-color-gray">{{ item.sales }}人购买</text>
-								</view>
+							<view class="customsprice-right">
+								立即复购
 							</view>
 						</view>
 					</view>
-				</scroll-view>
-			</swiper-item>
-			<swiper-item>
-				<scroll-view scroll-y="true">
-					<view class="guess-section">
-						<view v-for="(item, index) in bastBanner" :key="index" class="guess-item" @click="navToDetailPage(item)">
-							<navigator :url="item.link">
-								<view class="image-wrappe r"><image :src="item.image" mode="scaleToFill"></image></view>
-								<text class="title clamp margin-c-20">{{ item.store_name }}</text>
-								<view class="cmy-hr"></view>
-								<view class="price margin-c-20 flex">
-									<view>
-										<text class="font-size-sm ">￥</text>
-										{{ item.price }}
-									</view>
-									<view class="font-size-sm">
-										<text class="font-color-gray">库存{{ item.stock + item.unit_name }}</text>
-									</view>
-								</view>
-							</navigator>
-						</view>
-					</view>
-				</scroll-view>
-			</swiper-item>
-		</swiper>
-
-		<!-- 精品 商品 -->
-		<view class="f-header m-t">
-			<view class="f-left-icon"></view>
-			<view class="tit-box"><text class="tit">精品推荐</text></view>
-			<navigator url="/pages/product/classify?type=1"><text class="iconfont iconenter">更多</text></navigator>
-		</view>
-		<view class="guess-section">
-			<view v-for="(item, index) in bastList" :key="index" class="guess-item" @click="navToDetailPage(item)">
-				<view class="image-wrapper"><image :src="item.image" mode="scaleToFill"></image></view>
-				<text class="title clamp margin-c-20">{{ item.store_name }}</text>
-				<view class="cmy-hr"></view>
-				<view class="price margin-c-20 flex">
-					<view>
-						<text class="font-size-sm ">￥</text>
-						{{ item.price }}
-					</view>
-					<view class="font-size-sm">
-						<text class="font-color-gray">{{ item.sales }}人购买</text>
-					</view>
 				</view>
+				
 			</view>
-		</view>
-		<!-- 最新 商品 -->
-		<view class="f-header m-t">
-			<view class="f-left-icon"></view>
-			<view class="tit-box"><text class="tit">最新商品</text></view>
-			<navigator url="/pages/product/classify?type=3"><text class="iconfont iconenter">更多</text></navigator>
-		</view>
-		<view class="guess-section">
-			<view v-for="(item, index) in goodsList" :key="index" class="guess-item" @click="navToDetailPage(item)">
-				<view class="image-wrapper"><image :src="item.image" mode="scaleToFill"></image></view>
-				<text class="title clamp margin-c-20">{{ item.store_name }}</text>
-				<view class="cmy-hr"></view>
-				<view class="price margin-c-20 flex">
-					<view>
-						<text class="font-size-sm ">￥</text>
-						{{ item.price }}
-					</view>
-					<view class="font-size-sm">
-						<text class="font-color-gray">{{ item.sales }}人购买</text>
-					</view>
-				</view>
-			</view>
-		</view>
-		<!-- 促销 商品 -->
-		<view class="f-header m-t">
-			<view class="f-left-icon"></view>
-			<view class="tit-box"><text class="tit">促销商品</text></view>
-			<navigator url="/pages/product/classify?type=4"><text class="iconfont iconenter">更多</text></navigator>
-		</view>
-		<view class="guess-section">
-			<view v-for="(item, index) in bastBanner" :key="index" class="guess-item" @click="navToDetailPage(item)">
-				<view class="image-wrapper"><image :src="item.image" mode="scaleToFill"></image></view>
-				<text class="title clamp margin-c-20">{{ item.store_name }}</text>
-				<view class="cmy-hr"></view>
-				<view class="price margin-c-20 flex">
-					<view>
-						<text class="font-size-sm ">￥</text>
-						{{ item.price }}
-					</view>
-					<view class="font-size-sm">
-						<text class="font-color-gray">{{ item.sales }}人购买</text>
-					</view>
-				</view>
-			</view>
-		</view>
-		<!-- 会员升级专区 -->
-		<!-- <view class="f-header m-t">
-			<view class="f-left-icon"></view>
-			<view class="tit-box"><text class="tit">会员升级专区</text></view>
-			<text class="iconfont iconenter">更多</text>
-		</view> -->
-		<!-- <view class="uservip flex">
-			<image @error="onImageError('userServant', 0)" lazy-load :src="userServant[0].image" mode="aspectFill"></image>
-			<view class="detail">
-				<view class="title">满园春1999元会员升级礼包</view>
-				<view class="icon">自营</view>
-				<view class="flex price-box">
-					<view class="price">
-						<text class="font-size-sm">￥</text>
-						18888
-					</view>
-					<view class="text">115人购买</view>
-				</view>
+			
+			<view class="customs">
+				<image src="../../static/image/jifen.png" mode=""></image>
 			</view>
-		</view> -->
-
-		<!-- 精品推荐 -->
-		<!-- <view class="f-header m-t">
-			<view class="f-left-icon"></view>
-			<view class="tit-box"><text class="tit">精品推荐</text></view>
-			<text class="iconfont iconenter">更多</text>
-		</view> -->
-		<!-- <view class="guess-section">
-			<view v-for="(item, index) in goodsList" :key="index" class="guess-item" @click="navToDetailPage(item)">
-				<view class="image-wrapper"><image @error="onImageError('goodsList', index)" lazy-load :src="item.image" mode="aspectFill"></image></view>
-				<text class="title clamp margin-c-20">
-					<text class="icon">自营</text>
-					{{ item.title }}
-				</text>
-				<view class="hr"></view>
-				<view class="price margin-c-20 flex">
-					<view>
-						<text class="font-size-sm ">￥</text>
-						{{ item.price }}
+			<view class="jifen-content">
+				
+				
+				
+				<view class="jifen-box">
+					<view class="img">
+						<image src="../../static/image/jifen1.png" mode=""></image>
 					</view>
-					<view class="font-size-sm">
-						<view class='detail'>
-							<text class="icon">代理价</text>
-							<text></text>
+					<view class="jifen-list">
+						<view class="box-title">
+							<view class="top">
+								竹胎酵素健康饮
+							</view>
+							<view class="button">
+								健康生态饮品纯植物
+							</view>
 						</view>
-						<view class="detail">
-							<text class="font-color-yellow">会员价</text>
-							<text class="font-color-yellow">7.5折</text>
+						<view class="box-price">
+							<view class="pricebox">
+								<image src="../../static/image/search.png" mode=""></image>
+							</view>
+							<view class="price-left">
+								2690
+							</view>
+							<view class="price-right">
+								￥360
+							</view>
 						</view>
 					</view>
 				</view>
-				<view class="tip">兑换价￥44+44积分</view>
 			</view>
-		</view> -->
-		<view class="Mask" v-show="shareShow">
-			<image @click="share" src="http://shicai.liuniu946.com/static/img/shareimg4.png"></image>
-			<view class="Toshare" @click="Toshare"></view>
-			<view class="Tocancel" @click="Tocancel"></view>
+		</view>
+		<view class="fiexd">
+			<image src="../../static/image/background03.png" mode=""></image>
 		</view>
 	</view>
 </template>
-
 <script>
-import seckill from '../../components/seckill/seckill.vue';
-import { loadIndexs } from '@/api/index.js';
-import { getUserInfo } from '@/api/user.js';
-import { setCoupons } from '@/api/functionalUnit.js';
-import { getBargainList } from '@/api/product.js';
-import { interceptor } from '@/utils/loginUtils';
-import { mapState } from 'vuex';
+	// import seckill from '../../components/seckill/seckill.vue';
+	// import { loadIndexs } from '@/api/index.js';
+	// import { getUserInfo } from '@/api/user.js';
+	// import { setCoupons } from '@/api/functionalUnit.js';
+	// import { getBargainList } from '@/api/product.js';
+	// import { interceptor } from '@/utils/loginUtils';
+	import {
+		mapState
+	} from 'vuex';
+
+	export default {
+		components: {
 
-export default {
-	components: {
-		seckill
-	},
-	watch: {
-		//自适应swiper高度
-		checkid(newValue, oldValue) {
-			let obj = this;
-			if (newValue == 0) {
-				let bHeight = Math.ceil(obj.bastList.length / 2);
-				obj.swiperHeight = Math.ceil(obj.pageProportion * 520 * bHeight);
-			}
-			if (newValue == 1) {
-				let bHeight = Math.ceil(obj.goodsList.length / 2);
-				obj.swiperHeight = Math.ceil(obj.pageProportion * 520 * bHeight);
-			}
-			if (newValue == 2) {
-				let bHeight = Math.ceil(obj.bastBanner.length / 2);
-				obj.swiperHeight = Math.ceil(obj.pageProportion * 520 * bHeight);
-			}
 		},
-		// 初次加载页面高度时修改页面高度
-		bastList(newValue, oldValue) {
-			let obj = this;
-			let bHeight = Math.ceil(newValue.length / 2);
-			obj.$nextTick(function() {
-				uni.createSelectorQuery()
-					.select('#list-box')
-					.fields(
-						{
-							size: true
-						},
-						function(data) {
-							obj.pageProportion = data.width / 750;
-							obj.swiperHeight = Math.ceil(obj.pageProportion * 520 * bHeight);
-						}
-					)
-					.exec();
-			});
-		}
-	},
-	data() {
-		return {
-			shareShow: false, //分享海报
-			pageProportion: 0, //保存页面基于750宽度的比例
-			swiperHeight: 0,
-			checkid: 0,
-			titleNViewBackground: '',
-			swiperCurrent: 0,
-			swiperLength: 0,
-			bargainlist: [], //砍价商品
-			carouselList: [{},{},{}], //轮播列表
-			goodsList: [], //最新商品列表
-			bastList: [], //精品推荐列表
-			bastBanner: [], //促销商品列表
-			menusList: [], //头部菜单
-			page: 1,
-			limit: 5,
-			userServant: [
-				{
-					image: ''
+		watch: {
+			//自适应swiper高度
+			checkid(newValue, oldValue) {
+				let obj = this;
+				if (newValue == 0) {
+					let bHeight = Math.ceil(obj.bastList.length / 2);
+					obj.swiperHeight = Math.ceil(obj.pageProportion * 520 * bHeight);
 				}
-			], //用户推广服务
-			couponArray: [], //可领取优惠券
-			
-			recommend: [
-				{
-					id: 0,
-					re_title: '精选',
-					re_name: '为你推荐'
-				},
-				{
-					id: 1,
-					re_title: '最新',
-					re_name: '最新好货优选'
-				},
-				{
-					id: 2,
-					re_title: '便宜好货',
-					re_name: '90天便宜好货'
+				if (newValue == 1) {
+					let bHeight = Math.ceil(obj.goodsList.length / 2);
+					obj.swiperHeight = Math.ceil(obj.pageProportion * 520 * bHeight);
 				}
-			],
-			actTime: new Date()
-		};
-	},
-	computed: {
-		...mapState(['loginInterceptor']),
-		...mapState('user', ['hasLogin','userInfo'])
-	},
-	onLoad: function(option) {
-		// #ifndef MP
-		if (option.spread) {
-			// 存储其他邀请人
-			uni.setStorageSync('spread', option.spread);
-		}
-		// #endif
-		// #ifdef MP
-		if (option.scene) {
-			// 存储小程序邀请人
-			uni.setStorage({
-				key: 'spread_code',
-				data: option.scene
-			});
-		}
-		// #endif
-	},
-	onShow: function() {
-		// 判断是否强制登录
-		if (this.loginInterceptor && !this.hasLogin) {
-			// 登录拦截
-			interceptor();
-		}
-		this.loadData();
-		this.getBargainList();
-	},
-	//下拉刷新
-	onPullDownRefresh() {
-		this.loadData();
-	},
-	// #ifndef MP
-	// 监听导航栏输入框点击事件
-	onNavigationBarSearchInputClicked(e) {
-		//跳转到搜索页面
-		this.clickSearch();
-	},
-	//点击导航栏 buttons 时触发
-	onNavigationBarButtonTap(e) {
-		const index = e.index;
-		if (index === 0) {
-			this.$api.msg('点击了扫描');
-		} else if (index === 1) {
-			// #ifdef APP-PLUS
-			const pages = getCurrentPages();
-			const page = pages[pages.length - 1];
-			const currentWebview = page.$getAppWebview();
-			currentWebview.hideTitleNViewButtonRedDot({
-				index
-			});
-			// #endif
-			uni.navigateTo({
-				url: '/pages/user/notice'
-			});
-		}
-	},
-	// #endif
-	methods: {
-		//砍价商品推荐详情页
-		navToDetailPages(item) {
-			let id = item.product_id;
-			//let type = 2;
-		
-			uni.navigateTo({
-				url: '/pages/product/product?id=' + id
-			});
-		},
-		openSubscribe: function(e) {
-			let page = e;
-			// #ifndef MP
-			uni.navigateTo({
-				url: page
-			});
-			// #endif
-			// #ifdef MP
-			uni.showLoading({
-				title: '正在加载'
-			});
-			openBargainSubscribe()
-				.then(res => {
-					uni.hideLoading();
-					uni.navigateTo({
-						url: page
-					});
-				})
-				.catch(err => {
-					uni.hideLoading();
-				});
-			// #endif
-		},
-		getBargainList() {
-			let that = this;
-		
-			getBargainList({
-				page: that.page,
-				limit: that.limit
-			})
-				.then(function(res) {
-					that.$set(that, 'bargainlist', res.data.slice(0, 2));
-				})
-				.catch(res => {
-					console.log(res, 'getBargainList');
-				});
-		},
-		Mask() {
-			this.MaskShow = false;
-			this.shareShow = true;
-			uni.setStorage({
-				key: 'FirstEntry',
-				data: true,
-				success: function() {
-					console.log(uni.getStorageSync('FirstEntry'), 'Mask');
+				if (newValue == 2) {
+					let bHeight = Math.ceil(obj.bastBanner.length / 2);
+					obj.swiperHeight = Math.ceil(obj.pageProportion * 520 * bHeight);
 				}
-			});
-		},
-		Toshare() {
-			if (this.userInfo == '') {
-				getUserInfo({})
-					.then(({ data }) => {
-						this.setUserInfo(data);
-						this.userInfo = data;
-					})
-					.catch(e => {});
-			} else {
-				this.shareShow = false;
-				uni.navigateTo({
-					url: '/pages/user/shareQrCode?spread=' + this.userInfo.uid
+			},
+			// 初次加载页面高度时修改页面高度
+			bastList(newValue, oldValue) {
+				let obj = this;
+				let bHeight = Math.ceil(newValue.length / 2);
+				obj.$nextTick(function() {
+					uni.createSelectorQuery()
+						.select('#list-box')
+						.fields({
+								size: true
+							},
+							function(data) {
+								obj.pageProportion = data.width / 750;
+								obj.swiperHeight = Math.ceil(obj.pageProportion * 520 * bHeight);
+							}
+						)
+						.exec();
 				});
 			}
 		},
-		Tocancel() {
-			this.shareShow = false;
-		},
-		// 监听切换事件
-		listChange(e) {
-			this.checkid = e.detail.current;
-		},
-		// 點擊搜索框
-		clickSearch() {
-			uni.navigateTo({
-				url: '/pages/product/search'
-			});
-		},
-		// 点击触发领取优惠券
-		setCoupons(item) {
-			// 判断是否已经领取了优惠券
-			let obj = this;
-			uni.showModal({
-				title: '领取提示',
-				content: '是否领取优惠券',
-				success(e) {
-					if (e.confirm) {
-						setCoupons({ couponId: item.id }).then(e => {
-							item.is_use = true;
-							uni.showToast({
-								title: '领取成功',
-								type: 'top',
-								duration: 2000
-							});
-						});
+		data() {
+			return {
+				carouselList: [{
+						pic: '../../static/image/background02.png'
+					},
+					{
+						pic: '../../static/image/baodan.png'
 					}
-				}
-			});
-		},
-		//商品种类切换
-		change(item) {
-			let id = item;
-			this.checkid = id;
-			if (this.checkid == 1) {
-				// console.log(1);
-				this.detail = this.selected_detail;
-			} else if (this.checkid == 2) {
-				// console.log(2);
-				this.detail = this.new_product;
-			} else {
-				this.detail = this.cheap_good;
-			}
-		},
-		// 监听图片加载完成
-		onImageError(key, index) {
-			this[key][index].image = '/static/error/errorImage.jpg';
-		},
-		// 请求载入数据
-		async loadData() {loadIndexs({})
-				.then(({ data }) => {
-					let goods = data.info;
-					// this.carouselList = data.banner;
-					// this.swiperLength = this.carouselList.length;
-					this.menusList = data.menus;
-					this.goodsList = goods.firstList; //最新商品
-					this.bastList = goods.bastList; //精品推荐
-					this.bastBanner = data.benefit; //促销单品
-					this.$set(this, 'couponArray', data.couponList); //保存卡包券
+				], //轮播列表
+				page: 1,
+				limit: 5,
 
-					uni.stopPullDownRefresh();
-				})
-				.catch(e => {
-					uni.stopPullDownRefresh();
-				});
-			
-		},
-		//轮播图切换修改背景色
-		swiperChange(e) {
-			const index = e.detail.current;
-			this.swiperCurrent = index;
-			this.titleNViewBackground = this.carouselList[index].background;
-		},
-		//详情页
-		navToDetailPage(item) {
-			let id = item.id;
-			uni.navigateTo({
-				url: '/pages/product/product?id=' + id
-			});
+			};
 		},
+		methods: {
+			carouselList(item) {
 
-		// 轮播图跳转
-		bannerNavToUrl(item) {
-			// #ifdef H5
-			if (item.wap_url.indexOf('http') > 0) {
-				window.location.href = item.wap_url;
 			}
-			// #endif
-			//测试数据没有写id，用title代替
-			uni.navigateTo({
-				url: item.wap_url
-			});
 		}
+
 	}
-};
 </script>
 
-<style lang="scss">
-	.container {
+<style lang="scss" scoped>
+	page {
+		margin: 0;
+		padding: 0;
+		height: 100%;
+
 		background-color: #D4FDF9;
 	}
-.Mask {
-	width: 100%;
-	height: 100vh;
-	position: fixed;
-	z-index: 99999;
-	background-color: rgba(0, 0, 0, 0.7);
-	top: 0;
-	image {
-		width: 100%;
-		height: 100vh;
+
+	.container {
+		min-height: 100%;
+		height: auto;
 	}
-}
-// 热销商品
-	.hot-goods {
-		margin: 0 25rpx;
-		padding: 5rpx 25rpx 30rpx 25rpx;
-		background-color: #fff;
-		border-radius: 10rpx;
-		.hot-headers {
-			margin: 25rpx 0;
-			width: 100%;
-			display: flex;
-			.img {
-				width: 32rpx;
-				height: 32rpx;
-				margin-right: 10rpx;
+
+	.searchbackground {
+		position: relative;
+
+		.backgroundimg {
+			position: absolute;
+			width: 750rpx;
+
+			image {
+				width: 100%;
 			}
-			.hot-title {
-				font-size: 30rpx;
-				margin-right: 15rpx;
+		}
+	}
+
+	.fiexd {
+		position: fiexd;
+		bottom: 0;
+		width: 750rpx;
+		height: 750rpx;
+
+		image {
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	.content {
+		flex-direction: column;
+		justify-content: center;
+		height: 100%;
+
+		.input-box {
+			position: absolute;
+			left: 0;
+			top: 0;
+			margin: 66rpx 25rpx;
+			justify-content: center;
+			background: #FFFFFF;
+			box-shadow: 0rpx 1rpx 21rpx 0rpx rgba(255, 255, 255, 0.12);
+			border-radius: 35rpx;
+			width: 700rpx;
+			height: 70rpx;
+
+			.input {
+				font-size: 28rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #C4C4C4;
+				line-height: 38rpx;
 			}
-			.more {
-				line-height: 1;
-				padding: 5rpx 10rpx 5rpx 15rpx;
-				text-align: center;
-				font-size: 20rpx;
-				border-radius: 15rpx;
-				color: #ffffff;
-				background: linear-gradient(90deg, rgba(250, 52, 38, 1) 0%, rgba(249, 30, 83, 1) 100%);
+		}
+
+		.carousel {
+			margin-top: 165rpx;
+			width: 700rpx;
+			height: 370rpx;
+
+			.carousel-item {
 				image {
-					width: 20rpx;
-					height: 20rpx;
+					width: 100%;
+					height: 100%;
 				}
 			}
 		}
-		.hot-lists {
-			line-height: 1;
-			display: flex;
-			.hot-produce {
+
+		.customs {
+			margin-top: 20rpx;
+			width: 700rpx;
+			height: 180rpx;
+
+			image {
 				width: 100%;
-				height: 260rpx;
-				border-top: 1px solid #f0f0f0;
+				height: 100%;
+			}
+		}
+
+		.customs-content {
+			position: relative;
+			padding-top: 14rpx;
+
+			.backgroundimg1 {
+				width: 700rpx;
+				height: 300rpx;
+
+				image {
+					height: 100%;
+					width: 100%;
+				}
+			}
+
+			.box {
+				position: absolute;
+				margin-top: -250rpx;
+				padding: 0 38rpx;
 				display: flex;
-				padding-top: 28rpx;
-				.produce-image {
+				justify-content: space-between;
+				align-items: center;
+
+				.customs-img {
 					width: 200rpx;
 					height: 200rpx;
+
 					image {
-						width: 200rpx;
-						height: 200rpx;
-						border: 1px solid #f0f0f0;
+						width: 100%;
+						height: 100%;
 					}
 				}
-				.produce-content {
-					// flex-direction: column;
-					margin-left: 30rpx;
+
+				.customstext {
+					margin-left: 14rpx;
 					height: 200rpx;
-					position: relative;
-					width: calc(100% - 200rpx - 30rpx);
-					.produce-name {
-						font-size: 28rpx;
-						font-weight: bold;
-						line-height: 35rpx;
-						color: #343434;
-					}
-					.produce-info {
-						font-size: 20rpx;
-						margin-top: 25rpx;
+					display: flex;
+					flex-direction: column;
+					justify-content: space-around;
+
+					.customstext1 {
+						.customstext-title {
+							font-size: 34rpx;
+							font-family: PingFang SC;
+							font-weight: bold;
+							color: #3F7C1F;
+							line-height: 20rpx;
+						}
+
+						.customstext-product {
+							margin-top: 25rpx;
+							font-size: 26rpx;
+							font-family: PingFang SC;
+							font-weight: bold;
+							color: #ABD56F;
+							line-height: 20rpx;
+						}
 					}
-					.produce-price {
+
+					.customsprice {
 						display: flex;
-						align-items: flex-end;
-						color: #ff383e;
-						font-size: 24rpx;
-						margin-top: 70rpx;
-						font-weight: bold;
-						text {
-							font-size: 36rpx;
+						align-items: center;
+						justify-content: space-between;
+
+						.customsprice-left {
+							font-size: 28rpx;
+							font-family: PingFang SC;
+							font-weight: 500;
+							color: #FF0000;
+							line-height: 20rpx;
 						}
-						.produce-price-1 {
-							font-size: 22rpx;
+
+						.customsprice-between {
+							font-size: 42rpx;
+							font-family: PingFang SC;
 							font-weight: 500;
-							text-decoration: line-through;
-							color: rgba(170, 170, 170, 1);
-							margin-left: 20rpx;
+							color: #FF0000;
+							line-height: 20rpx;
 						}
-					}
-					.produce-price1 {
-						height: 100%;
-						letter-spacing: 3rpx;
-						color: #ff383e;
-						font-size: 24rpx;
-						font-weight: bold;
-						.produce-center {
-							width: 100%;
-							position: absolute;
-							bottom: 0;
+
+						.customsprice-right {
+							margin-left: 80rpx;
 							display: flex;
-							justify-content: space-between;
+							justify-content: center;
 							align-items: center;
-							.kanjia_word {
-								.word-1 {
-									font-size: 22rpx;
-									color: #666666;
-								}
-								.word-2 {
-									font-size: 28rpx;
-									color: #ff383e;
-									margin-top: 10rpx;
-								}
-							}
-							.kanjia_button {
-								height: 50rpx;
-								width: 150rpx;
-								border-radius: 25rpx;
-								font-size: 26rpx;
-								font-weight: 500;
-								color: #ff383e;
-								border: 1px solid rgba(255, 56, 62, 1);
-							}
+							width: 137rpx;
+							height: 52rpx;
+							background: #3F7C1F;
+							border-radius: 26rpx;
+							font-size: 26rpx;
+							font-family: PingFang SC;
+							font-weight: 400;
+							color: #FFFFFF;
 						}
 					}
 				}
 			}
 		}
-	}
-/* #ifdef MP */
-.mp-height {
-	height: 44px;
-}
-.input-box {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	padding: 25rpx;
-	background-color: #ffffff;
-	z-index: 999;
-	height: 44px;
-	.iconsearch {
-		font-size: 50rpx;
-	}
-	.input-content {
-		border-radius: 99rpx;
-		flex-grow: 1;
-		padding: 10rpx 30rpx;
-		background-color: rgba(231, 231, 231, 0.7);
-		.input {
-			flex-grow: 1;
-			input {
-				font-size: $font-lg;
-			}
-		}
-	}
-	.input-button {
-		padding-left: 20rpx;
-		font-size: $font-lg;
-		height: 100%;
-	}
-}
-page {
-	.cate-section {
-		position: relative;
-		z-index: 5;
-		border-radius: 16rpx 16rpx 0 0;
-		margin-top: -20rpx;
-	}
-}
-/* #endif */
-.bg-contain {
-	height: 460rpx;
-	width: 750rpx;
-	image {
-		width: 100%;
-		height: 100%;
-	}
-}
-page {
-	background: #f7f8f7;
-}
-.m-t {
-	margin-top: 16rpx;
-}
-/* 头部 轮播图 */
-.carousel-section {
-	position: relative;
-	padding-top: 10px;
-	overflow: hidden;
-
-	.titleNview-placing {
-		height: var(--status-bar-height);
-		padding-top: 44px;
-		box-sizing: content-box;
-	}
 
-	.titleNview-background {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 426rpx;
-		transition: 0.4s;
-	}
-	.carousel {
-		width: 100%;
-		height: 240rpx;
-		image {
+		.jifen-content {
+			
 			width: 700rpx;
-			height: 370rpx;
-		}
-		.carousel-item {
-			width: 100%;
-			height: 100%;
-			padding: 0 28rpx;
-			overflow: hidden;
-		}
-
-		image {
-			width: 100%;
-			height: 100%;
-			border-radius: $border-radius-sm;
-		}
-	}
-}
-.swiper-dots {
-	display: flex;
-	position: absolute;
-	left: 60rpx;
-	bottom: 15rpx;
-	width: 72rpx;
-	height: 36rpx;
-	background-size: 100% 100%;
-	.num {
-		width: 36rpx;
-		height: 36rpx;
-		border-radius: 50px;
-		font-size: 24rpx;
-		color: #fff;
-		text-align: center;
-		line-height: 36rpx;
-	}
-
-	.sign {
-		position: absolute;
-		top: 0;
-		left: 50%;
-		line-height: 36rpx;
-		font-size: 12rpx;
-		color: #fff;
-		transform: translateX(-50%);
-	}
-}
-/* 分类 */
-.cate-section {
-	display: flex;
-	justify-content: space-around;
-	align-items: center;
-	flex-wrap: wrap;
-	padding: 30rpx 22rpx;
-	.cate-item {
-		display: flex;
-		flex-direction: column;
-		align-items: center;
-		font-size: $font-sm + 2rpx;
-		color: $font-color-dark;
-	}
-	/* 原图标颜色太深,不想改图了,所以加了透明度 */
-	image {
-		width: 88rpx;
-		height: 88rpx;
-		margin-bottom: 14rpx;
-		border-radius: 50%;
-		opacity: 0.7;
-	}
-}
-// 中间广告图片
-.ad-1 {
-	width: 100%;
-	height: 210rpx;
-	padding: 10rpx 0;
-	background: #fff;
-	image {
-		width: 100%;
-		height: 100%;
-	}
-}
-/*公用边框样式*/
-%icon {
-	margin-right: 10rpx;
-	display: inline-block;
-	padding: 2rpx 10rpx;
-	border: 1rpx solid $color-yellow;
-	color: $color-yellow;
-	line-height: 1;
-	font-size: $font-base;
-	border-radius: 10rpx;
-}
-.f-header {
-	display: flex;
-	align-items: center;
-	height: 92rpx;
-	padding: 6rpx 30rpx 8rpx;
-	image {
-		flex-shrink: 0;
-		width: 80rpx;
-		height: 80rpx;
-		margin-right: 20rpx;
-	}
-	.tit-box {
-		@extend %font-title-box;
-	}
-	.tit {
-		@extend %font-title;
-	}
-	.iconenter {
-		font-size: $font-lg + 2rpx;
-		color: $font-color-light;
-	}
-	.f-left-icon {
-		@extend %f-left-icon;
-	}
-	.iconfont {
-		font-size: $font-sm - 2rpx;
-	}
-}
-// 会员升级礼包
-.uservip {
-	border-radius: $border-radius-sm;
-	background-color: white;
-	box-shadow: $box-shadow;
-	height: 300rpx;
-	margin: 0 30rpx;
-	image {
-		height: 100%;
-		width: 300rpx;
-	}
-	.detail {
-		position: relative;
-		padding: 20rpx;
-		height: 100%;
-		.icon {
-			@extend %icon;
-		}
-		.price-box {
-			position: absolute;
-			bottom: 20rpx;
-			width: calc(100% - 40rpx);
-			.price {
-				font-size: $font-lg + 2rpx;
-				font-weight: bold;
-				color: $font-color-base;
-			}
-			.text {
-				color: $color-gray;
-				font-size: $font-sm;
-			}
-		}
-		.title {
-			font-size: $font-lg;
-			font-weight: bold;
-		}
-	}
-}
+			display: flex;
 
-/* 猜你喜欢 */
-.guess-section {
-	display: flex;
-	flex-wrap: wrap;
-	padding: 0 30rpx;
-	.guess-item {
-		overflow: hidden;
-		display: flex;
-		flex-direction: column;
-		width: 48%;
-		margin-bottom: 4%;
-		border-radius: $border-radius-sm;
-		background-color: white;
-		box-shadow: $box-shadow;
-		&:nth-child(2n + 1) {
-			margin-right: 4%;
-		}
-	}
-	.image-wrapper {
-		width: 100%;
-		height: 330rpx;
-		border-radius: 3px;
-		overflow: hidden;
-		image {
-			width: 100%;
-			height: 100%;
-			opacity: 1;
-		}
-	}
-	.title {
-		font-size: $font-base;
-		color: $font-color-dark;
-		font-weight: bold;
-		line-height: 80rpx;
-	}
-	.price {
-		font-size: $font-lg;
-		color: $font-color-base;
-		font-weight: bold;
-		line-height: 1;
-		line-height: 80rpx;
-	}
+			flex-wrap: wrap;
+			justify-content: space-around;
 
-	.icon {
-		@extend %icon;
-	}
 
-	.detail {
-		line-height: 1;
-	}
-	.tip {
-		color: white;
-		background-color: $color-yellow;
-		line-height: 1.5;
-		font-size: $font-sm;
-		padding-left: 20rpx;
-	}
-}
+			.jifen-box {
+				margin: 20rpx 0;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+				width: 336rpx;
+				height: 512rpx;
+				background: #E6FCFA;
+				box-shadow: 0px 7px 10px 1px #8BAFAB;
+				.img {
+					margin-top: 20rpx;
+					height: 312rpx;
+					width: 312rpx;
+					image {
+						height: 100%;
+						width: 100%;
+					}
+				}
+				.jifen-list {
+					margin-left: -80rpx;
+					.box-title {
+						.top {
+							padding: 20rpx 0 10rpx 0;
+							font-size: 30rpx;
+							font-family: PingFang SC;
+							font-weight: bold;
+							color: #3F7C1F;
+							line-height: 35rpx;
+						}
 
-// 推荐
-.recommend {
-	width: 95%;
-	height: 155rpx;
-	margin: 0rpx auto;
-	padding-top: 30rpx;
-	font-size: 26rpx;
-	text-align: center;
-	color: #333333;
-	align-items: flex-start;
+						.button {
+							padding-bottom: 20rpx;
+							font-size: 26rpx;
+							font-family: PingFang SC;
+							font-weight: 500;
+							color: #3F7C1F;
+							line-height: 35rpx;
+							opacity: 0.8;
+						}
+					}
+					.box-price {
+						display: flex;
+						align-items: center;
+						.pricebox {
+							height: 25rpx;
+							width: 25rpx;
+							image {
+								height: 100%;
+								width: 100%;
+							}
+						}
 
-	.recommend_list {
-		width: 33%;
-	}
-	.re_title {
-		font-size: 32rpx;
-		font-weight: bold;
-	}
-	.re_name {
-		color: #999999;
-		padding-top: 10rpx;
-	}
-	.selected_icon {
-		width: 25rpx;
-		height: 10rpx;
-		margin: 0px auto;
-		display: none;
-		image {
-			width: 100%;
-			height: 100%;
-		}
-	}
-	.active {
-		display: block;
-	}
-	.active_color {
-		color: #dc4d46 !important;
-	}
-}
+						.price-left {
+							font-size: 36rpx;
+							font-family: PingFang SC;
+							font-weight: bold;
+							color: #FF0000;
+							line-height: 35rpx;
+						}
 
-// 列表
-.list-box-h {
-	height: 1550rpx;
-}
-// 优惠券
-.coupon-list {
-	display: inline-block;
-}
-.row {
-	border-radius: 15rpx;
-	margin: 25rpx;
-	height: 155rpx;
-	// width: 552rpx;
-	overflow: hidden;
-	background-color: #ffffff;
-	padding-right: 25rpx;
-	.list-interval {
-		border: 1px dashed $border-color-light;
-		height: 100%;
-		.top,
-		.bottom {
-			border-radius: 100rpx;
-			width: 30rpx;
-			height: 30rpx;
-			position: absolute;
-			background-color: $page-color-base;
-			right: -15rpx;
-		}
-		.top {
-			top: -18rpx;
-		}
-		.bottom {
-			bottom: -18rpx;
-		}
-	}
-	.list-money {
-		height: 100%;
-		min-width: 155rpx;
-		text-align: center;
-		image {
-			height: 100%;
-			width: 20rpx;
-		}
-		.list-money-text {
-			flex-grow: 1;
-			padding: 0 25rpx;
-			.tit {
-				text-align: center;
-				padding: 15rpx 0rpx;
-				font-size: 55rpx;
-				color: $color-red;
-				font-weight: bold;
-				&.noAction {
-					color: $font-color-light;
-				}
-			}
-			.price {
-				padding-bottom: 25rpx;
-				color: $font-color-light;
-			}
-		}
-	}
-	.row_list_right {
-		// flex-grow: 1;
-		min-width: 200rpx;
-		padding-left: 25rpx;
-		line-height: 1;
-		.right_time {
-			padding: 10rpx 0rpx;
-			color: $font-color-light;
-			font-size: $font-sm;
-		}
-		.right_top {
-			margin: 15rpx 0;
-			.right_name {
-				font-size: $font-base;
-				color: #bc253a;
-				font-weight: bold;
-			}
-			.right_title {
-				font-size: $font-base;
-				color: $font-base;
-				font-weight: bold;
-				&.noAction {
-					color: $font-color-light;
+						.price-right {
+							font-size: 26rpx;
+							font-family: PingFang SC;
+							font-weight: 500;
+							text-decoration: line-through;
+							color: #999999;
+							line-height: 35rpx;
+						}
+					}
 				}
 			}
 		}
 	}
-	.right_use {
-		margin: 15rpx 0;
-		padding: 10rpx;
-		width: 160rpx;
-		text-align: center;
-		color: #fff;
-		background-color: #bc253a;
-		border-radius: 50rpx;
-		font-size: $font-sm;
-		&.noAction {
-			background-color: $font-color-light;
-		}
-	}
-	.iconlocation {
-		font-size: 36rpx;
-		color: $font-color-light;
-	}
-}
-</style>
-=======
-<template>
-	<view class="">
-		1111
-	</view>
-</template>
-
-<script>
-</script>
-
-<style lang="scss">
 </style>
->>>>>>> 1062124a14605e6952753b8ba2e3f401c676404f

pages/order/evaluate.vue

@@ -0,0 +1,411 @@
+<template>
+	<view class="content">
+		<view class="order-item">
+			<view class="goods-box-single">
+				<image class="goods-img" :src="productInfo.image" mode="aspectFill"></image>
+				<view class="right position-relative">
+					<view class="flex">
+						<text class="title">{{ productInfo.store_name }}</text>
+						<view class="title-right">
+							<view class="price">{{ productInfo.price }}</view>
+							<view class="attr-box">x{{ list.cart_num }}</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view>
+				<view class="flex_item zhil">
+					<view>商品质量</view>
+					<view><uniRate text="1" size="20" margin="10" :value="rateValue1" @change="rateChange1"></uniRate></view>
+				</view>
+				<view class="flex_item zhil">
+					<view>服务态度</view>
+					<view><uniRate text="1" size="20" margin="10" :value="rateValue2" @change="rateChange2"></uniRate></view>
+				</view>
+				<view class="equity_box">
+					<view class="text-box uni-textarea">
+						<textarea placeholder-style="color:#999" :placeholder="placeholder" @blur="bindTextAreaBlur"></textarea>
+					</view>
+					<view class="">
+						<view class="add-img-box flex_item">
+							<view class="add-img-item" v-for="(item, index) in imgList" :key="index">
+								<image class="add-img" @click.stop="imgInfo(index)" :src="item.url" mode="aspectFill"></image>
+								<image class="add-img-del" @click.stop="delImg(index)" src="/static/img/delete.png"></image>
+							</view>
+							<view v-if="imgList.length < 9" class="add-img-item" @click.stop="scImg()">
+								<image class="add-img" src="/static/img/add.png"></image>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view @click.stop="submit" class="address-box submit-box"><text class="submit-btn">提交评论</text></view>
+	</view>
+</template>
+
+<script>
+import { product, upload, order_comment } from '@/api/order.js';
+import uniRate from '@/components/uni-rate/uni-rate.vue';
+export default {
+	components: {
+		uniRate
+	},
+	data() {
+		return {
+			list: '', //订单详情
+			productInfo: '',
+			text: '', //评论内容
+			placeholder: '商品满足你的期待么？说说你的想法，分享给想买的他们吧~',
+			imgList: [],
+			unique: '', //商品唯一标识码
+			cloudimgList: [],
+			rateValue1: '', //商品质量
+			rateValue2: '', //服务态度
+			imgCount: 6 //最多支持9张上传，可以修改
+		};
+	},
+	onLoad(option) {
+		this.unique = option.unique;
+		this.loadOrder();
+	},
+	onShow() {},
+	methods: {
+		//text
+		bindTextAreaBlur: function(e) {
+			this.text = e.detail.value;
+		},
+		//获取收入支出信息
+		async loadOrder() {
+			product({
+				unique: this.unique
+			}).then(e => {
+				this.list = e.data;
+				this.productInfo = e.data.productInfo;
+			});
+		},
+		//商品质量评分
+		rateChange1(val) {
+			this.rateValue1 = val.value;
+		},
+		//服务态度评分
+		rateChange2(val) {
+			this.rateValue2 = val.value;
+		},
+		//单张上传图片
+		scImg() {
+			let obj = this;
+			console.log(obj.imgCount, 11);
+			if (obj.imgCount == 0) {
+				uni.showToast({
+					title: '最多添加6张图片',
+					icon: 'none'
+				});
+				return;
+			}
+			upload({
+				file: ''
+			})
+				.then(e => {
+					console.log(e,'e')
+					obj.imgList = [...obj.imgList, ...e];
+					console.log(obj.imgList,'imgList')
+					obj.imgCount = 10 - obj.imgList.length;
+					console.log(obj.imgCount ,'imgCount ')
+				})
+				.catch(e => {});
+		},
+		//提交评论
+		submit(e) {
+			let obj = this;
+			if (obj.imgList.length < 1) {
+				uni.showToast({
+					title: '请添加图片',
+					icon: 'none'
+				});
+				return;
+			}
+			for (let i = 0; i < obj.imgList.length; i++) {
+				obj.cloudimgList.push(obj.imgList[i].url);
+			}
+			let arr = obj.cloudimgList.join(',');
+			uni.showLoading({
+				title: '提交中...',
+				mask: true
+			})
+			order_comment({
+				pics: arr,
+				comment: obj.text,
+				product_score: obj.rateValue1,
+				service_score: obj.rateValue2,
+				unique: obj.unique,
+				
+			})
+				.then(e => {
+					uni.hideLoading()
+					uni.navigateTo({
+						url: '/pages/order/order?state=4'
+					});
+				})
+				.catch(e => {
+					uni.hideLoading()
+					uni.navigateTo({
+						url: '/pages/order/order?state=4'
+					});
+				});
+		},
+		//点击图片显示大图
+		imgInfo(i) {
+			let tempList = [];
+			console.log(111);
+			this.imgList.forEach(e => {
+				tempList.push(e.url);
+			});
+			console.log(tempList);
+			//显示图片
+			uni.previewImage({
+				current: i,
+				loop: false,
+				urls: tempList,
+				indicator: 'default'
+			});
+		},
+		//删除图片
+		delImg(i) {
+			uni.showModal({
+				content: '确定删除这张吗',
+				success: res => {
+					if (res.confirm) {
+						this.imgList.splice(i, 1);
+						this.imgCount++;
+					} else if (res.cancel) {
+					}
+				}
+			});
+		},
+		// 页面跳转
+		navto(e) {
+			uni.navigateTo({
+				url: e
+			});
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+page {
+	background: #ffffff;
+	height: 100%;
+	.content {
+		background: #ffffff;
+		height: 100%;
+	}
+}
+/* 多条商品 */
+.order-item {
+	display: flex;
+	flex-direction: column;
+	padding: 0rpx 30rpx;
+	background: #fff;
+	margin-top: 20rpx;
+	/* 单条商品 */
+	.goods-box-single {
+		display: flex;
+		padding: 20rpx 0;
+		.goods-img {
+			display: block;
+			width: 120rpx;
+			height: 120rpx;
+		}
+		.right {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			padding: 0 30rpx 0 24rpx;
+			overflow: hidden;
+			height: 100%;
+			.title {
+				align-self: flex-start;
+				font-size: $font-base + 2rpx;
+				color: $font-color-dark;
+				height: 80rpx;
+				overflow:hidden; 
+				text-overflow:ellipsis;
+				display:-webkit-box; 
+				-webkit-box-orient:vertical;
+				-webkit-line-clamp:2; 
+			}
+			.title-right {
+				flex-shrink: 0;
+				text-align: right;
+				align-self: flex-start;
+			}
+			.attr-box {
+				font-size: $font-sm + 2rpx;
+				color: $font-color-light;
+			}
+			.price {
+				font-size: $font-base + 2rpx;
+				color: $font-color-dark;
+				&:before {
+					content: '￥';
+					font-size: $font-sm;
+					margin: 0 2rpx 0 8rpx;
+				}
+			}
+		}
+	}
+}
+.equity_box {
+	background-color: #fafafa;
+	border-radius: 10rpx;
+	padding: 25rpx 25rpx;
+	margin: 25rpx 0rpx;
+	.text-box {
+		height: 200rpx;
+		textarea {
+			font-size: 25rpx;
+			width: 100%;
+			height: 100%;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			display: -webkit-box;
+			-webkit-box-orient: vertical;
+			-webkit-line-clamp: 5;
+		}
+	}
+}
+.zhil {
+	font-size: 28rpx !important;
+	padding: 15rpx 15rpx;
+}
+.submit-box {
+	bottom: 0;
+	left: 0;
+	width: 750rpx;
+}
+.submit-btn {
+	margin-top: 10px;
+	display: inline-block;
+	width: 670rpx;
+	height: 96rpx;
+	line-height: 96rpx;
+	text-align: center;
+	background-color: #fd4040 !important;
+	opacity: 1;
+	border-radius: 32rpx;
+	border-width: 8rpx;
+	border-color: rgba(255, 255, 255, 1);
+	box-shadow: 0rpx 8rpx 12rpx rgba(0, 0, 0, 0.16);
+	border-radius: 56rpx;
+	font-size: 39rpx;
+	font-weight: bold;
+	color: rgba(255, 255, 255, 1);
+}
+.submit-btn-txt {
+	font-size: 39rpx;
+	font-weight: bold;
+	line-height: 47rpx;
+	color: rgba(255, 255, 255, 1);
+	opacity: 1;
+}
+.map-box {
+	width: 484rpx;
+	height: 256rpx;
+	border-width: 4rpx;
+	border-color: rgba(255, 255, 255, 1);
+	box-shadow: 0rpx 0rpx 24rpx rgba(0, 0, 0, 0.16);
+	/* border-radius: 12rpx; */
+	position: relative;
+}
+.map {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	width: 476rpx;
+	height: 250rpx;
+}
+.map-img {
+	position: absolute;
+	top: 90rpx;
+	left: 156rpx;
+	width: 230rpx;
+	height: 68rpx;
+	background-color: rgba(51, 51, 51, 0.64);
+	border-width: 1rpx;
+	border-color: rgba(0, 0, 0, 0);
+	border-radius: 34px;
+
+	font-size: 28rpx;
+	font-weight: bold;
+	line-height: 66rpx;
+	color: rgba(255, 255, 255, 1);
+	text-align: center;
+}
+.address-box {
+	padding: 15rpx 40rpx;
+	margin-bottom: 10px;
+}
+.label {
+	font-size: 36rpx;
+	font-weight: bold;
+	line-height: 50rpx;
+	color: #222222;
+}
+.label-img {
+	padding-left: 40rpx;
+}
+
+.add-img-box {
+	width: 100%;
+	flex-direction: row;
+	flex-wrap: wrap;
+	margin-top: 50rpx;
+}
+.add-img-item {
+	width: 180rpx;
+	height: 180rpx;
+	border-radius: 24rpx;
+	position: relative;
+	margin: 0rpx 20rpx;
+	margin-bottom: 25rpx;
+	.add-img {
+		width: 100%;
+		height: 100%;
+		border-radius: 24rpx;
+	}
+}
+.add-img-camera {
+	flex: 1;
+}
+.add-img-del {
+	position: absolute;
+	width: 40rpx;
+	height: 40rpx;
+	left: 155rpx;
+	bottom: 155rpx;
+	//background-color: rgba(238, 0, 0, 1);
+	border-radius: 20rpx;
+}
+.address-time {
+	width: 484rpx;
+	height: 88rpx;
+	background-color: rgba(245, 245, 245, 1);
+	opacity: 1;
+	border-radius: 24rpx;
+	text-align: center;
+
+	font-size: 35rpx;
+	font-weight: 500;
+	color: rgba(51, 51, 51, 1);
+}
+.line {
+	width: 750rpx;
+	height: 1px;
+	transform: scaleY(0.3);
+	background-color: rgba(0, 0, 0, 0.5);
+}
+</style>

pages/order/expressInfo.vue

@@ -0,0 +1,74 @@
+<template>
+	<view class="container">
+		<view class="express-box">
+			<view class="top-text">
+				<text class="top-com">{{expressList.com}}</text>
+				<text>{{ expressList.nu }}</text>
+			</view>
+			<view class="express-body">
+				<uni-steps :options="expressList.data" active-color="#007AFF" :active="active" direction="column"></uni-steps>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import { express_query } from '@/api/order.js';
+import uniSteps from '@/components/uni-steps/uni-steps.vue';
+export default {
+	components: {
+		uniSteps
+	},
+	data() {
+		return {
+			id: '',
+			expressList: [],
+			active: 0
+		}
+	},
+	onLoad(option) {
+		this.id = option.id
+	},
+	onShow() {
+		this.loadData()
+	},
+	methods: {
+		loadData() {
+			express_query({
+				id: this.id,
+			}).then(({data}) => {
+				this.expressList = data;
+				console.log(this.expressList)
+			})
+		}
+	}
+}
+</script>
+
+<style lang="scss">
+.container {
+	padding: 40rpx;
+	.express-box {
+		border-radius: $border-radius-sm;
+		.top-text {
+			width: 100%;
+			height: 60rpx;
+			background: #FFFFFF;
+			padding-left: 20rpx;
+			font-size: $font-base;
+			border-radius: $border-radius-sm;
+			display: flex;
+			align-items: center;
+			.top-com {
+				margin-right: 10rpx;
+			}
+		}
+		.express-body {
+			margin-top: 20rpx;
+			background: #FFFFFF;
+			border-radius: $border-radius-sm;
+			padding: 20rpx 10rpx 20rpx 0;
+		}
+	}
+}
+</style>

pages/order/order.vue

@@ -0,0 +1,675 @@
+<template>
+	<view class="content">
+		<view class="navbar">
+			<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
+		</view>
+		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
+			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
+				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
+					<!-- 空白页 -->
+					<empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>
+
+					<!-- 订单列表 -->
+					<view @click="goToOrderDetail(item)" v-for="(item, index) in tabItem.orderList" :key="index" class="order-item">
+						<view class="i-top b-b">
+							<text class="time">订单编号:{{ item.order_id }}</text>
+							<text class="state" :style="{ color: item.stateTipColor }">{{ item._status._title }}</text>
+							<text v-if="item.status === 4" class="del-btn iconfont icondelete" @click="deleteOrder(index)"></text>
+						</view>
+
+						<scroll-view v-if="item.cartInfo.length > 1" class="goods-box" scroll-x>
+							<view v-for="(goodsItem, goodsIndex) in item.cartInfo" :key="goodsIndex" class="goods-item">
+								<image class="goods-img" :src="goodsItem.productInfo.image" mode="aspectFill"></image>
+							</view>
+						</scroll-view>
+						<!-- <view v-if="item.cartInfo.length === 1" class="goods-box-single" v-for="(goodsItem, goodsIndex) in item.cartInfo" :key="goodsIndex">
+							<image class="goods-img" :src="goodsItem.productInfo.image" mode="aspectFill"></image>
+							<view class="right">
+								<text class="title clamp">{{ goodsItem.productInfo.store_name }}</text>
+								<text class="attr-box">{{ goodsItem.attrInfo ? goodsItem.attrInfo.suk : '' }} x {{ goodsItem.cart_num }}</text>
+								<text class="price">{{ moneyNum(goodsItem.productInfo.price)}}</text>
+							</view>
+						</view> -->
+						<view class="goods-box-single" v-for="(goodsItem, goodsIndex) in item.cartInfo" :key="goodsIndex">
+							<image class="goods-img" :src="goodsItem.productInfo.image" mode="scaleToFill"></image>
+							<view class="right">
+								<view class="flex-start" style="justify-content: space-between;">
+									<text class="title clamp">{{ goodsItem.productInfo.store_name }}</text>
+									<text class="price">{{ moneyNum(goodsItem.truePrice) }}</text>
+								</view>
+								<view class="row flex">
+									<text class="row_title">{{ goodsItem.productInfo.attrInfo ? goodsItem.productInfo.attrInfo.suk : '' }}</text>
+									<text class="attr-box"> x {{ goodsItem.cart_num }}</text>
+								</view>
+							</view>
+						</view>
+
+						<view class="price-box">
+							共
+							<text class="num">{{ item.cartInfo.length }}</text>
+							件商品 合计
+							<text class="price">{{ moneyNum(item.pay_price)}}</text>
+							（含邮费
+							<text class="price">{{ moneyNum(item.pay_postage)}}</text>
+							）
+						</view>
+						<view class="action-box b-t" v-if="item.status != 5">
+							<button v-if="item._status._title == '未支付'" class="action-btn" @click.stop="cancelOrder(item)">取消订单</button>
+							<button v-if="item._status._title == '未支付'" @click.stop="orderPay(item)" class="action-btn recom">付款</button>
+							<button v-if="item._status._title == '待评价'" class="action-btn">评价</button>
+							<button v-if="item._status._title == '待收货'" @click.stop="orderTake(item, index)" class="action-btn">确认收货</button>
+							<!-- <button v-if="item._status._title == '未发货'" class="action-btn" @click.stop="orderRefund(item)">申请退款</button> -->
+						</view>
+					</view>
+
+					<uni-load-more :status="tabItem.loadingType"></uni-load-more>
+				</scroll-view>
+			</swiper-item>
+		</swiper>
+	</view>
+</template>
+
+<script>
+import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
+import empty from '@/components/empty';
+import { orderList, orderCancel, orderDel, orderTake } from '@/api/order.js';
+export default {
+	components: {
+		uniLoadMore,
+		empty
+	},
+	data() {
+		return {
+			tabCurrentIndex: 0,
+			navList: [
+				{
+					state: 0,
+					text: '待付款',
+					loadingType: 'more',
+					orderList: [],
+					page: 1, //当前页数
+					limit: 10 //每次信息条数
+				},
+				{
+					state: 1,
+					text: '待发货',
+					loadingType: 'more',
+					orderList: [],
+					page: 1, //当前页数
+					limit: 10 //每次信息条数
+				},
+				{
+					state: 2,
+					text: '待收货',
+					loadingType: 'more',
+					orderList: [],
+					page: 1, //当前页数
+					limit: 10 //每次信息条数
+				},
+				{
+					state: 3,
+					text: '待评价',
+					loadingType: 'more',
+					orderList: [],
+					page: 1, //当前页数
+					limit: 10 //每次信息条数
+				},
+				{
+					state: 4,
+					text: '已完成',
+					loadingType: 'more',
+					orderList: [],
+					page: 1, //当前页数
+					limit: 10 //每次信息条数
+				}
+			]
+		};
+	},
+
+	onLoad(options) {
+		/**
+		 * 修复app端点击除全部订单外的按钮进入时不加载数据的问题
+		 * 替换onLoad下代码即可
+		 */
+		this.tabCurrentIndex = +options.state;
+		// #ifndef MP
+		this.loadData();
+		// #endif
+		// #ifdef MP
+		if (options.state == 0) {
+			this.loadData();
+		}
+		// #endif
+	},
+	// #ifdef APP-PLUS || H5
+	onBackPress(e){
+		uni.switchTab({
+			url: '/pages/user/user',
+		});
+		return true;
+	},
+	// #endif
+	methods: {
+		// 转换金额为数字
+		moneyNum(value){
+				return +value;
+		},
+		// 确认收货
+		orderTake(item, index) {
+			let obj = this;
+			uni.showModal({
+				title: '是否确认收货？',
+				success: () => {
+					orderTake({
+						uni: item.order_id
+					})
+						.then(e => {
+							obj.navList[obj.tabCurrentIndex].orderList.splice(index, 1);
+							uni.showToast({
+								title: '收货成功'
+							});
+						})
+						.catch(e => {
+							console.log(e);
+						});
+				}
+			});
+		},
+		//跳转到订单详情
+		goToOrderDetail(e) {
+			uni.navigateTo({
+				url: '/pages/order/orderDetail?id=' + e.order_id
+			});
+		},
+		// 申请退款
+		orderRefund(e) {
+			uni.navigateTo({
+				url: '/pages/order/orderRefund?id=' + e.order_id
+			});
+		},
+		// 订单支付
+		orderPay(e) {
+			uni.navigateTo({
+				url: '/pages/money/pay?type=1&ordid=' + e.order_id + '&money=' + e.pay_price
+			});
+		},
+		//获取订单列表
+		loadData(source) {
+			//这里是将订单挂载到tab列表下
+			let index = this.tabCurrentIndex;
+			let navItem = this.navList[index];
+			let state = navItem.state;
+			if (source === 'tabChange' && navItem.loaded === true) {
+				//tab切换只有第一次需要加载数据
+				return;
+			}
+			if (navItem.loadingType === 'loading') {
+				//防止重复加载
+				return;
+			}
+			if (navItem.loadingType === 'noMore') {
+				//防止重复加载
+				return;
+			}
+			// 修改当前对象状态为加载中
+			navItem.loadingType = 'loading';
+
+			orderList({
+				type: state,
+				page: navItem.page,
+				limit: navItem.limit
+			})
+				.then(({ data }) => {
+					let arr = data.map(e => {
+						let b = this.orderStateExp(e.status);
+						e.stateTip = b.stateTip;
+						e.stateTipColor = b.stateTipColor;
+						return e;
+					});
+					navItem.orderList = navItem.orderList.concat(arr);
+					// console.log(navItem.orderList);
+					navItem.page++;
+					if (navItem.limit == data.length) {
+						//判断是否还有数据， 有改为 more， 没有改为noMore
+						navItem.loadingType = 'more';
+						return;
+					} else {
+						//判断是否还有数据， 有改为 more， 没有改为noMore
+						navItem.loadingType = 'noMore';
+					}
+					uni.hideLoading();
+					this.$set(navItem, 'loaded', true);
+				})
+				.catch(e => {
+					console.log(e);
+				});
+		},
+
+		//swiper 切换
+		changeTab(e) {
+			this.tabCurrentIndex = e.target.current;
+			this.loadData('tabChange');
+		},
+		//顶部tab点击
+		tabClick(index) {
+			this.tabCurrentIndex = index;
+		},
+		//删除订单
+		deleteOrder(index) {
+			uni.showLoading({
+				title: '请稍后'
+			});
+			setTimeout(() => {
+				this.navList[this.tabCurrentIndex].orderList.splice(index, 1);
+				uni.hideLoading();
+			}, 600);
+		},
+		//取消订单
+		cancelOrder(item) {
+			uni.showModal({
+				title: '订单取消',
+				content: '是否取消订单？',
+				success: e => {
+					if (e.confirm) {
+						uni.showLoading({
+							title: '请稍后'
+						});
+						orderCancel({ id: item.order_id })
+							.then(e => {
+								uni.showToast({
+									title: '取消成功',
+									duration: 2000,
+									position: 'top'
+								});
+							})
+							.catch(e => {
+								console.log(e);
+							});
+						//取消订单后删除待付款中该项
+						let list = this.navList[this.tabCurrentIndex].orderList;
+						let index = list.findIndex(val => val.id === item.id);
+						index !== -1 && list.splice(index, 1);
+						uni.hideLoading();
+					}
+				}
+			});
+		},
+
+		//订单状态文字和颜色
+		orderStateExp(state) {
+			let stateTip = '',
+				stateTipColor = '#fa436a';
+			switch (+state) {
+				case 0:
+					stateTip = '待付款';
+					break;
+				case 1:
+					stateTip = '待发货';
+					break;
+				case 2:
+					stateTip = '待收货';
+					break;
+				case 3:
+					stateTip = '待评价';
+					break;
+				case 4:
+					stateTip = '已完成';
+					stateTipColor = '#909399';
+					break;
+				case 9:
+					stateTip = '订单已关闭';
+					stateTipColor = '#909399';
+					break;
+
+				//更多自定义
+			}
+			return { stateTip, stateTipColor };
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+page,
+.content {
+	background: $page-color-base;
+	height: 100%;
+}
+
+.swiper-box {
+	height: calc(100% - 40px);
+}
+.list-scroll-content {
+	height: 100%;
+}
+
+.navbar {
+	display: flex;
+	height: 40px;
+	padding: 0 5px;
+	background: #fff;
+	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
+	position: relative;
+	z-index: 10;
+	.nav-item {
+		flex: 1;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 100%;
+		font-size: 15px;
+		color: $font-color-dark;
+		position: relative;
+		&.current {
+			color: $base-color;
+			&:after {
+				content: '';
+				position: absolute;
+				left: 50%;
+				bottom: 0;
+				transform: translateX(-50%);
+				width: 44px;
+				height: 0;
+				border-bottom: 2px solid $base-color;
+			}
+		}
+	}
+}
+
+.uni-swiper-item {
+	height: auto;
+}
+.order-item {
+	display: flex;
+	flex-direction: column;
+	padding-left: 30rpx;
+	background: #fff;
+	margin-top: 16rpx;
+	.i-top {
+		display: flex;
+		align-items: center;
+		height: 80rpx;
+		padding-right: 30rpx;
+		font-size: $font-base;
+		color: $font-color-dark;
+		position: relative;
+		.time {
+			flex: 1;
+		}
+		.state {
+			color: $base-color;
+		}
+		.del-btn {
+			padding: 10rpx 0 10rpx 36rpx;
+			font-size: $font-lg;
+			color: $font-color-light;
+			position: relative;
+			&:after {
+				content: '';
+				width: 0;
+				height: 30rpx;
+				border-left: 1px solid $border-color-dark;
+				position: absolute;
+				left: 20rpx;
+				top: 50%;
+				transform: translateY(-50%);
+			}
+		}
+	}
+	/* 多条商品 */
+	.goods-box {
+		height: 160rpx;
+		padding: 20rpx 0;
+		white-space: nowrap;
+		.goods-item {
+			width: 120rpx;
+			height: 120rpx;
+			display: inline-block;
+			margin-right: 24rpx;
+		}
+		.goods-img {
+			display: block;
+			width: 100%;
+			height: 100%;
+		}
+	}
+	/* 单条商品 */
+	.goods-box-single {
+		display: flex;
+		padding: 20rpx 0;
+		.goods-img {
+			display: block;
+			width: 120rpx;
+			height: 120rpx;
+		}
+		.right {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			padding: 0 30rpx 0 24rpx;
+			overflow: hidden;
+			.row{
+				margin-top: 10rpx;
+			}
+			.row_title{
+				padding:5rpx 10rpx;
+				background-color: #dddddd;
+				border-radius: 10rpx;
+				font-size: 22rpx;
+				color: #ffffff;
+			}
+			.title {
+				font-size: $font-base + 2rpx;
+				color: $font-color-dark;
+				line-height: 1;
+				width: 80%;
+			}
+			.attr-box {
+				display: flex;
+				justify-content: flex-end;
+				font-size: $font-sm + 2rpx;
+				color: $font-color-light;
+			}
+			.price {
+				display: inline;
+				font-size: $font-base + 2rpx;
+				color: $font-color-dark;
+				&:before {
+					content: '￥';
+					font-size: $font-sm;
+					
+				}
+			}
+		}
+	}
+	.price-box {
+		display: flex;
+		justify-content: flex-end;
+		align-items: baseline;
+		padding: 20rpx 30rpx;
+		font-size: $font-sm + 2rpx;
+		color: $font-color-light;
+		.num {
+			margin: 0 8rpx;
+			color: $font-color-dark;
+		}
+		.price {
+			font-size: $font-lg;
+			color: $font-color-dark;
+			&:before {
+				content: '￥';
+				font-size: $font-sm;
+				margin: 0 2rpx 0 8rpx;
+			}
+		}
+	}
+	.action-box {
+		display: flex;
+		justify-content: flex-end;
+		align-items: center;
+		height: 100rpx;
+		position: relative;
+		padding-right: 30rpx;
+	}
+	.action-btn {
+		width: 160rpx;
+		height: 60rpx;
+		margin: 0;
+		margin-left: 24rpx;
+		padding: 0;
+		text-align: center;
+		line-height: 60rpx;
+		font-size: $font-sm + 2rpx;
+		color: $font-color-dark;
+		background: #fff;
+		border-radius: 100px;
+		&:after {
+			border-radius: 100px;
+		}
+		&.recom {
+			color: $base-color;
+			&:after {
+				border-color: $base-color;
+			}
+		}
+		&.evaluate {
+			color: $color-yellow;
+			&:after {
+				border-color: $color-yellow;
+			}
+		}
+	}
+}
+
+/* load-more */
+.uni-load-more {
+	display: flex;
+	flex-direction: row;
+	height: 80rpx;
+	align-items: center;
+	justify-content: center;
+}
+
+.uni-load-more__text {
+	font-size: 28rpx;
+	color: #999;
+}
+
+.uni-load-more__img {
+	height: 24px;
+	width: 24px;
+	margin-right: 10px;
+}
+
+.uni-load-more__img > view {
+	position: absolute;
+}
+
+.uni-load-more__img > view view {
+	width: 6px;
+	height: 2px;
+	border-top-left-radius: 1px;
+	border-bottom-left-radius: 1px;
+	background: #999;
+	position: absolute;
+	opacity: 0.2;
+	transform-origin: 50%;
+	animation: load 1.56s ease infinite;
+}
+
+.uni-load-more__img > view view:nth-child(1) {
+	transform: rotate(90deg);
+	top: 2px;
+	left: 9px;
+}
+
+.uni-load-more__img > view view:nth-child(2) {
+	transform: rotate(180deg);
+	top: 11px;
+	right: 0;
+}
+
+.uni-load-more__img > view view:nth-child(3) {
+	transform: rotate(270deg);
+	bottom: 2px;
+	left: 9px;
+}
+
+.uni-load-more__img > view view:nth-child(4) {
+	top: 11px;
+	left: 0;
+}
+
+.load1,
+.load2,
+.load3 {
+	height: 24px;
+	width: 24px;
+}
+
+.load2 {
+	transform: rotate(30deg);
+}
+
+.load3 {
+	transform: rotate(60deg);
+}
+
+.load1 view:nth-child(1) {
+	animation-delay: 0s;
+}
+
+.load2 view:nth-child(1) {
+	animation-delay: 0.13s;
+}
+
+.load3 view:nth-child(1) {
+	animation-delay: 0.26s;
+}
+
+.load1 view:nth-child(2) {
+	animation-delay: 0.39s;
+}
+
+.load2 view:nth-child(2) {
+	animation-delay: 0.52s;
+}
+
+.load3 view:nth-child(2) {
+	animation-delay: 0.65s;
+}
+
+.load1 view:nth-child(3) {
+	animation-delay: 0.78s;
+}
+
+.load2 view:nth-child(3) {
+	animation-delay: 0.91s;
+}
+
+.load3 view:nth-child(3) {
+	animation-delay: 1.04s;
+}
+
+.load1 view:nth-child(4) {
+	animation-delay: 1.17s;
+}
+
+.load2 view:nth-child(4) {
+	animation-delay: 1.3s;
+}
+
+.load3 view:nth-child(4) {
+	animation-delay: 1.43s;
+}
+
+@-webkit-keyframes load {
+	0% {
+		opacity: 1;
+	}
+
+	100% {
+		opacity: 0.2;
+	}
+}
+</style>

pages/order/orderRefund.vue

@@ -0,0 +1,246 @@
+<template>
+	<view class="content">
+		<view class="order-item">
+			<scroll-view v-if="listStyle == 1" class="goods-box" scroll-x>
+				<view v-for="(goodsItem, goodsIndex) in item.cartInfo" :key="goodsIndex" class="goods-item">
+					<image class="goods-img" :src="goodsItem.productInfo.image" mode="aspectFill"></image>
+				</view>
+			</scroll-view>
+			<view v-if="listStyle == 2" class="goods-box-single" v-for="(goodsItem, goodsIndex) in item.cartInfo" :key="goodsIndex">
+				<image class="goods-img" :src="goodsItem.productInfo.image" mode="aspectFill"></image>
+				<view class="right">
+					<text class="title clamp">{{ goodsItem.productInfo.store_name }}</text>
+					<text class="attr-box">{{ goodsItem.attrInfo ? goodsItem.attrInfo.suk : '' }} x {{ goodsItem.cart_num }}</text>
+					<text class="price">{{ goodsItem.productInfo.price }}</text>
+				</view>
+			</view>
+		</view>
+		<view class="orderDetial">
+			<view class="row b-b flex">
+				<text class="tit">订单总价</text>
+				<view class="input">￥{{ item.total_price }}</view>
+			</view>
+			<view class="row b-b flex">
+				<text class="tit">邮费</text>
+				<view class="input">{{ item.pay_postage > 0 ? '￥' +item.pay_postage : '免邮费' }}</view>
+			</view>
+			<view class="row b-b flex" v-if="item.coupon_id > 0">
+				<text class="tit">优惠券</text>
+				<view class="input">-￥{{ item.coupon_price }}</view>
+			</view>
+			<view class="row b-b flex" v-if="item.use_integral > 0">
+				<text class="tit">积分抵扣</text>
+				<view class="input">-￥{{ item.use_integral }}</view>
+			</view>
+			<view class="row b-b flex">
+				<text class="tit ">实付</text>
+				<view class="input payColor">￥{{ item.pay_price }}</view>
+			</view>
+		</view>
+		<view class="row b-b">
+			<text class="tit">退款理由</text>
+			<picker mode="selector" :range="value" @change="bindChange">
+				<view class="refund" v-if="refund">{{ refund || '请选择退款理由' }}</view>
+				<view class="noRefund" v-else>请选择退款理由</view>
+			</picker>
+		</view>
+		<view class="row b-b">
+			<text class="tit">备注说明</text>
+			<input class="input" type="text" v-model="reason" placeholder="请填写备注" placeholder-class="placeholder" />
+		</view>
+		<button class="add-btn" @click="confirm">提交</button>
+	</view>
+</template>
+
+<script>
+import { refund, refundReason, orderDetail } from '@/api/order.js';
+export default {
+	data() {
+		return {
+			refund: '', //退款理由
+			reason: '', //备注
+			value: ['1', '2', '3', '4', '5', '6', '7', '8', 9, 10, 11, 12, 13],
+			orderId: '',
+			item: {},
+			listStyle: 2
+		};
+	},
+	onLoad(option) {
+		this.orderId = option.id;
+		this.refundReason();
+		this.loadOrder();
+	},
+	methods: {
+		// 切换选中事件
+		bindChange(e) {
+			this.refund = this.value[e.detail.value];
+		},
+		// 加载退款理由
+		refundReason() {
+			refundReason({}).then(e => {
+				this.value = e.data;
+			});
+		},
+		loadOrder() {
+			orderDetail({}, this.orderId).then(e => {
+				this.item = e.data;
+			});
+		},
+		//提交
+		confirm() {
+			let obj = this;
+			if (!obj.refund) {
+				uni.showModal({
+					title: '错误',
+					content: '请填写退货理由',
+					showCancel: false
+				});
+				return false;
+			}
+			uni.showLoading({
+				title: '提交中...',
+				mask: true
+			})
+			refund({
+				text: obj.refund,
+				uni: obj.orderId,
+				refund_reason_wap_explain: obj.reason
+			}).then(function(e) {
+				uni.hideLoading()
+				uni.showToast({
+					title:'提交成功',
+					duration:1500
+				})
+			}).catch( err => {
+				uni.hideLoading()
+				console.log(err)
+			});
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+page {
+	background: $page-color-base;
+	padding-top: 16rpx;
+}
+.orderDetial {
+	.row {
+		.input {
+			text-align: right;
+		}
+	}
+}
+.row {
+	display: flex;
+	align-items: center;
+	position: relative;
+	padding: 0 30rpx;
+	height: 110rpx;
+	background: #fff;
+	.refund {
+		font-size: 30rpx;
+		color: $font-color-dark;
+		padding-left: 20rpx;
+	}
+	.noRefund {
+		font-size: 30rpx;
+		color: $font-color-light;
+		padding-left: 20rpx;
+	}
+	.tit {
+		flex-shrink: 0;
+		width: 120rpx;
+		font-size: 30rpx;
+		color: $font-color-dark;
+	}
+	.input {
+		flex: 1;
+		font-size: 30rpx;
+		color: $font-color-dark;
+		padding-left: 20rpx;
+		&.payColor {
+			color: $color-red;
+		}
+	}
+	.iconlocation {
+		font-size: 36rpx;
+		color: $font-color-light;
+	}
+}
+.add-btn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 690rpx;
+	height: 80rpx;
+	margin: 60rpx auto;
+	font-size: $font-lg;
+	color: #fff;
+	background-color: $base-color;
+	border-radius: 10rpx;
+	// box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
+}
+
+/* 多条商品 */
+.order-item {
+	display: flex;
+	flex-direction: column;
+	padding-left: 30rpx;
+	background: #fff;
+	margin-top: 16rpx;
+	.goods-box {
+		height: 160rpx;
+		padding: 20rpx 0;
+		white-space: nowrap;
+		.goods-item {
+			width: 120rpx;
+			height: 120rpx;
+			display: inline-block;
+			margin-right: 24rpx;
+		}
+		.goods-img {
+			display: block;
+			width: 100%;
+			height: 100%;
+		}
+	}
+	/* 单条商品 */
+	.goods-box-single {
+		display: flex;
+		padding: 20rpx 0;
+		.goods-img {
+			display: block;
+			width: 120rpx;
+			height: 120rpx;
+		}
+		.right {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			padding: 0 30rpx 0 24rpx;
+			overflow: hidden;
+			.title {
+				font-size: $font-base + 2rpx;
+				color: $font-color-dark;
+				line-height: 1;
+			}
+			.attr-box {
+				font-size: $font-sm + 2rpx;
+				color: $font-color-light;
+				padding: 10rpx 12rpx;
+			}
+			.price {
+				font-size: $font-base + 2rpx;
+				color: $font-color-dark;
+				&:before {
+					content: '￥';
+					font-size: $font-sm;
+					margin: 0 2rpx 0 8rpx;
+				}
+			}
+		}
+	}
+}
+</style>

pages/product/common/contentText.vue

@@ -0,0 +1,68 @@
+<template>
+	<view class="detail-desc">
+		<view class="d-header"><text>图文详情</text></view>
+		<rich-text class="detail-centent" :nodes="description"></rich-text>
+		<!-- 底部高度撑开 -->
+	</view>
+</template>
+
+<script>
+export default {
+	props: {
+		description: {
+			default: ''
+		},
+	},
+	data() {
+		return {
+			
+		};
+	},
+};
+</script>
+
+<style lang="scss">
+	/*  详情 */
+	.detail-desc {
+		margin-top: 14rpx;
+		background: #fff;
+		/deep/ img {
+			max-width: 100% !important;
+			display: inline !important;
+		}
+		/deep/ div {
+			max-width: 100% !important;
+		}
+		.d-header {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			height: 80rpx;
+			font-size: $font-base + 2rpx;
+			color: $font-color-dark;
+			position: relative;
+	
+			text {
+				padding: 0 20rpx;
+				background: #fff;
+				position: relative;
+				z-index: 1;
+			}
+			&:after {
+				position: absolute;
+				left: 50%;
+				top: 50%;
+				transform: translateX(-50%);
+				width: 300rpx;
+				height: 0;
+				content: '';
+				border-bottom: 1px solid #ccc;
+			}
+		}
+	}
+	/* 商品详情中限制图片大小 */
+	/deep/ .rich-img {
+		width: 100% !important;
+		height: auto;
+	}
+</style>

pages/product/common/discounts.vue

@@ -0,0 +1,139 @@
+<template>
+	<view class="c-list">
+		<view class="c-row b-b">
+			<text class="tit">配送</text>
+			<view class="bz-list con" v-if="!mark">立即下单 ，预计最快第二天8.30-9:30送达</view>
+			<view class="bz-list con reding" v-else>{{mark}}</view>
+		</view>
+		<view v-if="showCoupon" class="c-row b-b" @click="Getcoupon">
+			<text class="tit">优惠券</text>
+			<text class="con t-r red">领取优惠券</text>
+			<text class="iconfont iconenter"></text>
+		</view>
+		<view class="c-row b-b">
+			<text class="tit">简介</text>
+			<view class="bz-list con">
+				<text>{{ Info }}</text>
+				<!-- <text>{{ copy2 }}</text> -->
+
+			</view>
+			<view class="copy-btn" @click="copy">一键复制</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			showCoupon: {
+				type: Boolean,
+				default: false
+			},
+			mark: {
+				default: ''
+			},
+			Info: {
+				default: ''
+			},
+		},
+		data() {
+			return {
+				copy1: '食材质检 ·',
+				copy2: '无接触配送到门口'
+			};
+		},
+		methods: {
+			Getcoupon() {
+				this.$emit('clickCoupon')
+			},
+			copy() {
+				// let copyText = this.copy1 + ' ' + this.copy2;
+				console.log(this.Info)
+				uni.setClipboardData({
+					//去找上面的数据
+					data: this.Info,
+					success: function(res) {
+						uni.showToast({
+							title: '复制成功',
+						});
+					},
+					fail: function(res) {
+					}
+				});
+			}
+		}
+	};
+</script>
+
+<style lang="scss">
+	.c-list {
+		font-size: $font-sm + 2rpx;
+		color: $font-color-base;
+		background: #fff;
+
+		.title {
+			color: #333333;
+			font-size: 32rpx;
+			font-weight: bold;
+		}
+
+		.c-row {
+			display: flex;
+			align-items: center;
+			padding: 20rpx 30rpx;
+			position: relative;
+		}
+
+		.tit {
+			width: 140rpx;
+		}
+
+		.con {
+			flex: 1;
+			color: $font-color-dark;
+
+			.selected-text {
+				margin-right: 10rpx;
+			}
+		}
+
+		.reding {
+			color: #FF0815 !important;
+		}
+
+		.bz-list {
+			height: 40rpx;
+			font-size: $font-sm + 2rpx;
+			color: $font-color-dark;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+			
+			text {
+				display: inline-block;
+				margin-right: 30rpx;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+				width: 100%;
+			}
+		}
+
+		.copy-btn {
+			background-color: #F3F3F2;
+			padding: 8rpx 20rpx;
+			border-radius: 10rpx;
+			color: #040406;
+		}
+
+		.red {
+			color: #fb6d24;
+		}
+	}
+
+	/* 商品详情中限制图片大小 */
+	.rich-img {
+		width: 100% !important;
+		height: auto;
+	}
+</style>

pages/product/common/estimate.vue

@@ -0,0 +1,115 @@
+<template>
+	<view class="eva-section" @click="navTo">
+		<view class="e-header">
+			<text class="tit">评价</text>
+			<text>({{ list.replyCount }})</text>
+			<text class="tip">好评率 {{ list.replyChance }}%</text>
+			<text class="iconfont iconenter"></text>
+		</view>
+		<view class="eva-box">
+			<image class="portrait" :src="reply.avatar" mode="aspectFill"></image>
+			<view class="right">
+				<text class="name">{{ reply.nickname }}</text>
+				<text class="con">{{ reply.comment }}</text>
+				<view class="con_box">
+					<view class="con_image" v-for="item in reply.pics"><image :src="item"></image></view>
+				</view>
+				<view class="bot">
+					<text class="attr"></text>
+					<text class="stime">{{ reply.add_time }}</text>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	props: {
+		list: {
+			default: ''
+		},
+		reply: {
+			default: ''
+		},
+	},
+	data() {
+		return {
+		};
+	},
+	methods: {
+		navTo() {
+			this.$emit('navTo')
+		}
+	},
+};
+</script>
+
+<style lang="scss">
+/* 评价 */
+.eva-section {
+	display: flex;
+	flex-direction: column;
+	padding: 20rpx 30rpx;
+	background: #fff;
+	margin-top: 16rpx;
+	.e-header {
+		display: flex;
+		align-items: center;
+		height: 70rpx;
+		font-size: $font-sm + 2rpx;
+		color: $font-color-light;
+		.tit {
+			font-size: $font-base + 2rpx;
+			color: $font-color-dark;
+			margin-right: 4rpx;
+		}
+		.tip {
+			flex: 1;
+			text-align: right;
+		}
+		.iconenter {
+			margin-left: 10rpx;
+		}
+	}
+	.eva-box {
+		display: flex;
+		padding: 20rpx 0;
+		.portrait {
+			flex-shrink: 0;
+			width: 80rpx;
+			height: 80rpx;
+			border-radius: 100px;
+		}
+		.right {
+			flex: 1;
+			display: flex;
+			flex-direction: column;
+			font-size: $font-base;
+			color: $font-color-base;
+			padding-left: 26rpx;
+			.con {
+				font-size: $font-base;
+				color: $font-color-dark;
+				padding: 20rpx 0;
+			}
+			.bot {
+				display: flex;
+				justify-content: space-between;
+				font-size: $font-sm;
+				color: $font-color-light;
+			}
+		}
+	}
+	.con_image {
+		width: 130rpx;
+		height: 130rpx;
+		display: inline-block;
+		padding: 15rpx;
+		image {
+			width: 100%;
+			height: 100%;
+		}
+	}
+}
+</style>

pages/product/common/freshDetail.vue

@@ -0,0 +1,85 @@
+<template>
+	<view class="c-list" v-if="goodsObjact.net_quantity||goodsObjact.storage_condition||goodsObjact.expiration_date">
+		<view class="c-row title b-b">规格</view>
+		<view class="c-row b-b" v-if="goodsObjact.net_quantity">
+			<text class="tit">净含量</text>
+			<text class="con t-r">{{ goodsObjact.net_quantity }}</text>
+		</view>
+		<view class="c-row b-b" v-if="goodsObjact.storage_condition">
+			<text class="tit">保存条件</text>
+			<text class="con t-r">{{ goodsObjact.storage_condition }}</text>
+		</view>
+		<view class="c-row b-b" v-if="goodsObjact.expiration_date">
+			<text class="tit">保质期</text>
+			<text class="con t-r">{{ goodsObjact.expiration_date }}</text>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	props: {
+		goodsObjact: {
+			type: Object,
+			default: function () {
+				return {
+					
+				}
+			}
+		},
+	},
+	data() {
+		return {
+			
+		};
+	},
+};
+</script>
+
+<style lang="scss">
+.c-list {
+	font-size: $font-sm + 2rpx;
+	color: $font-color-base;
+	background: #fff;
+	.title {
+		color: #333333;
+		font-size: 32rpx;
+		font-weight: bold;
+	}
+	.c-row {
+		display: flex;
+		align-items: center;
+		padding: 20rpx 30rpx;
+		position: relative;
+	}
+	.tit {
+		width: 140rpx;
+	}
+	.con {
+		flex: 1;
+		color: $font-color-dark;
+		.selected-text {
+			margin-right: 10rpx;
+		}
+	}
+	.bz-list {
+		height: 40rpx;
+		font-size: $font-sm + 2rpx;
+		color: $font-color-dark;
+		text {
+			display: inline-block;
+			margin-right: 30rpx;
+		}
+	}
+	.con-list {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		color: $font-color-dark;
+		line-height: 40rpx;
+	}
+	.red {
+		color: #fb6d24;
+	}
+}
+</style>

pages/product/common/guessLike.vue

@@ -0,0 +1,120 @@
+<template>
+	<view class="guess-item">
+		<view class="guess">猜你喜欢</view>
+		<view class="guess-scroll flex_item" scroll-x>
+			<view class="scroll-list" v-for="ls in goodList" @click="navToDetailPage(ls)">
+				<view class="scoll-img"><image :src="ls.image"></image></view>
+				<view class="scoll-name ellipsis">{{ ls.store_name }}</view>
+				<view class="price-list flex">
+					<view class="tpl">
+						<view class="red-price">
+							¥
+							<text>{{ ls.price }}</text>
+						</view>
+						<view class="grey-price">¥{{ ls.ot_price }}</view>
+					</view>
+					<view class="img position-relative" @click.stop="Addcar(ls)">
+						<image src="/static/img/img13.png"></image>
+						<view class="corner" v-if="ls.cart_num > 0">
+							<text>{{ ls.cart_num }}</text>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	props: {
+		goodList: {
+			type: Array,
+			default: function () {
+				return []
+			}
+		},
+	},
+	methods: {
+		// 跳转到详情页
+		navToDetailPage(ls){
+			this.$emit('clickNavTo',ls)
+		},
+		// 加入购物车
+		Addcar(ls){
+			this.$emit('Addcar',ls)
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+//猜你喜欢
+.guess-item {
+	padding: 25rpx 25rpx;
+	background: #ffffff;
+	margin-bottom: 15rpx;
+	padding-bottom: 45rpx !important;
+	.guess {
+		color: #000000;
+		font-size: 35rpx;
+		font-weight: 500;
+		padding-bottom: 25rpx;
+	}
+	.guess-scroll {
+		width: 100%;
+		font-size: 24rpx;
+		overflow: hidden;
+		overflow-x: auto;
+		justify-content: flex-start;
+		.scroll-list {
+			border: 2rpx solid #f0f0f0;
+			border-radius: 25rpx;
+			margin-right: 15rpx;
+			.scoll-img {
+				width: 227rpx;
+				border-top-right-radius: 25rpx;
+				border-top-left-radius: 25rpx;
+				height: 227rpx;
+				overflow: hidden;
+				image {
+					width: 100%;
+					height: 100%;
+				}
+			}
+			.scoll-name {
+				height: 80rpx;
+				width: 227rpx;
+				font-size: 22rpx;
+				padding: 15rpx 15rpx;
+			}
+			.price-list {
+				padding: 25rpx 15rpx;
+				padding-right: 25rpx;
+				.tpl {
+					.red-price {
+						color: #f31d29;
+						text {
+							font-size: 35rpx !important;
+							font-weight: bold;
+						}
+					}
+					.grey-price {
+						text-decoration: line-through;
+						color: #999999;
+						font-size: 10px !important;
+					}
+				}
+				.img {
+					width: 45rpx;
+					height: 45rpx;
+					image {
+						width: 100%;
+						height: 100%;
+					}
+				}
+			}
+		}
+	}
+}
+</style>

pages/product/common/productBottom.vue

@@ -0,0 +1,216 @@
+<template>
+	<view class="page-bottom">
+		<!-- 	<navigator url="/pages/index/index" open-type="switchTab" class="p-b-btn">
+			<text class="iconfont iconhome"></text>
+			<text>首页</text>
+		</navigator>
+		<view class="p-b-btn" :class="{ active: goodsObjact.userCollect }" @click="toFavorite(goodsObjact)">
+			<text class="iconfont " :class="{ iconlike: !goodsObjact.userCollect, iconlikefill: goodsObjact.userCollect }"></text>
+			<text>收藏</text>
+		</view> -->
+		<!-- <view class="action-btn-group">
+			<button type="primary" class=" action-btn no-border add-cart-btn" @click="buy(2)">加入购物车</button>
+			<button type="primary" class=" action-btn no-border buy-now-btn" @click="buy(1)">立即购买</button>
+		</view> -->
+		<view class="btm-btn">
+			<view class="add-btn" @click="buy(2)" v-if="showAdd">加入购物车</view>
+			<view class="buy-btn" @click="buy(1)" :class="{'quck':!showAdd }">立即购买</view>
+		</view>
+	</view>
+</template>
+
+<script>
+import { collectAdd, collectDel } from '@/api/product.js';
+export default {
+	props: {
+		many: {
+			default: 9
+		},
+		goodsObjact: {
+			default: function() {
+				return {};
+			}
+		},
+		goodsid: {
+			default: ''
+		},
+		showAdd: {
+			default: true
+		}
+	},
+	data() {
+		return {};
+	},
+	methods: {
+		buy(type) {
+			this.$emit('specOPne', type);
+		},
+		//收藏
+		toFavorite(item) {
+			let obj = this;
+			item.userCollect = !item.userCollect;
+			if (!item.userCollect) {
+				collectDel({ id: obj.goodsid, category: 'product' }).then(function(e) {
+					uni.showToast({
+						title: '成功取消收藏',
+						type: 'top',
+						duration: 1500
+					});
+				});
+			} else {
+				collectAdd({ id: obj.goodsid, category: 'product' }).then(function(e) {
+					uni.showToast({
+						title: '成功加入收藏',
+						type: 'top',
+						duration: 1500
+					});
+				});
+			}
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+/* 底部操作菜单 */
+.page-bottom {
+	position: fixed;
+	bottom: 0rpx;
+	z-index: 95;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 750rpx;
+	height: 120rpx;
+	background-color: #ffffff;
+	/* box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.5);
+	border-radius: 16rpx; */
+	.p-b-btn {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		font-size: $font-sm;
+		color: $font-color-base;
+		width: 96rpx;
+		height: 80rpx;
+		.iconfont {
+			font-size: 40rpx;
+			line-height: 48rpx;
+			color: $font-color-light;
+		}
+		&.active,
+		&.active .iconfont {
+			color: $uni-color-primary;
+		}
+		.iconlikefill {
+			font-size: 46rpx;
+		}
+		image {
+			width: 56rpx;
+			height: 58rpx;
+		}
+	}
+	.action-btn-group {
+		display: flex;
+		height: 76rpx;
+		border-radius: 100px;
+		overflow: hidden;
+		margin-left: 20rpx;
+		position: relative;
+		&:after {
+			content: '';
+			position: absolute;
+			top: 50%;
+			right: 50%;
+			transform: translateY(-50%);
+			height: 28rpx;
+			width: 0;
+			border-right: 1px solid rgba(255, 255, 255, 0.5);
+		}
+		.action-btn {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			// width: 270rpx;
+			// height: 100%;
+			font-size: $font-base;
+			padding: 0;
+			border-radius: 0;
+			background: transparent;
+			width: 339rpx;
+			height: 90rpx;
+			&.buy-now-btn {
+				background-color: #303e49;
+			}
+			&.add-cart-btn {
+				background-color: #fff;
+				color: #ff4c4c;
+				border: #ff4c4c 1px solid;
+			}
+		}
+	}
+}
+.p-b-btn {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	font-size: $font-sm;
+	color: $font-color-base;
+	width: 96rpx;
+	height: 80rpx;
+	.iconfont {
+		font-size: 40rpx;
+		line-height: 48rpx;
+		color: $font-color-light;
+	}
+	&.active,
+	&.active .iconfont {
+		color: $uni-color-primary;
+	}
+	.icon-fenxiang2 {
+		font-size: 42rpx;
+		transform: translateY(-2rpx);
+	}
+	.iconlikefill {
+		font-size: 46rpx;
+	}
+}
+.btm-btn {
+	z-index: 2;
+	width: 750rpx;
+	height: 97rpx;
+	display: flex;
+	// justify-content: space-between;
+	position: fixed;
+	bottom: 0;
+	background-color: #fff;
+	text-align: center;
+	.add-btn {
+		text-align: center;
+		width: 375rpx;
+		height: 97rpx;
+		background: #FFB238;
+		font-size: 36rpx;
+		font-weight: 500;
+		color: #fff;
+		line-height: 97rpx;
+	}
+	.buy-btn {
+		text-align: center;
+		border: none;
+		width: 375rpx;
+		height: 97rpx;
+		background: #6EAB4E;
+		font-size: 36rpx;
+		font-weight: 500;
+		color: #fff;
+		line-height: 97rpx;
+		color: #fff;
+	}
+	.quck {
+		width: 691px;
+	}
+}
+</style>

pages/product/common/productContent.vue

@@ -0,0 +1,159 @@
+<template>
+	<view class="introduce-section">
+		
+		<!-- 分享 -->
+		<button open-type="share" class="shareDate" style="border: none;" @click="open">
+			<image class="share-img" src="../../../static/icon/share.png"></image>
+		</button>
+		<!-- 价格信息 -->
+		<view class="price-box">
+			<text class="price-tip">¥</text>
+			<view class="price">
+				{{ goodsObjact.price }}
+				<text class="m-price" v-if="goodsObjact.ot_price > goodsObjact.price">¥{{ goodsObjact.ot_price }}</text>
+			</view>
+		</view>
+		<!-- 商品名称 -->
+		<text class="title clamp2">{{ goodsObjact.store_name }}</text>
+	</view>
+</template>
+
+<script>
+export default {
+	props: {
+		goodsObjact: {
+			type: Object,
+			default: function() {
+				return {
+					percent:1
+				};
+			}
+		}
+	},
+	filters: {
+		parseIntTo(percent) {
+			percent = +percent * 100;
+			if (percent % 1 === 0) {
+				return percent;
+			} else {
+				percent = percent.toFixed(1);
+				return percent;
+			}
+		}
+	},
+	data() {
+		return {};
+	},
+	methods: {
+		open() {
+			this.$emit('callf')
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+/* 标题简介 */
+.introduce-section {
+	position: relative;
+	background: #fff;
+	padding: 35rpx 0rpx;
+	padding-left: 35rpx;
+	.title {
+		font-size: 32rpx;
+		color: $font-color-dark;
+		.tip-o {
+			color: #ff3334;
+			padding-left: 15rpx;
+		}
+	}
+	.shareDate {
+		position: absolute;
+		top: 25rpx;
+		right: 10rpx;
+		font-size: 26rpx;
+		color: #3d3f46;
+		border-radius: 15rpx;
+		background-color: #ffffff;
+		height: 60rpx;
+		line-height: 60rpx;
+		&::after {
+			border: none;
+		}
+	}
+	.share-img {
+		width: 30rpx;
+		height: 30rpx;
+		position: relative;
+		top: 5rpx;
+		left: 0;
+		margin-right: 10rpx;
+	}
+	.info {
+		color: #999999;
+		font-size: 26rpx;
+		padding-bottom: 15rpx;
+	}
+	.progress-box {
+		width: 260rpx;
+		position: relative;
+		margin-top: 15rpx;
+		line-height: 10px;
+		.number {
+			font-size: 17rpx;
+			position: absolute;
+			z-index: 999;
+			top: 3rpx;
+			left: 15rpx;
+			color: #ffffff;
+		}
+	}
+	.price-box {
+		display: flex;
+		align-items: baseline;
+		height: 64rpx;
+		padding: 10rpx 0;
+		font-size: 26rpx;
+		color: $uni-color-primary;
+	}
+	.price {
+		font-size: $font-lg + 6rpx;
+		.text {
+			padding-left: 5rpx;
+			color: #b0b0b0;
+			font-size: 22rpx !important;
+		}
+	}
+	.price-green {
+		color: #2dbd59;
+		font-size: 28rpx !important;
+		text {
+			background: #2dbd59;
+			color: #ffffff;
+			padding: 0rpx 10rpx;
+			border-radius: 5rpx;
+			font-size: 22rpx !important;
+			margin-left: 15rpx;
+		}
+	}
+	.m-price {
+		margin: 0 12rpx;
+		color: $font-color-light;
+		text-decoration: line-through;
+		margin-left: 25rpx;
+		font-size: 24rpx;
+	}
+}
+.share-wrapper {
+	width: 36rpx;
+	height: 36rpx;
+	position: absolute;
+	top: 27rpx;
+	right: 43rpx;
+	background-color: #fff;
+	image {
+		width: 100%;
+		height: 100%;
+	}
+}
+</style>

pages/product/common/topSwiper.vue

@@ -0,0 +1,98 @@
+<template>
+	<view class="carousel">
+		<swiper  :circular="true" duration="400" @change="swiperChange">
+			<swiper-item class="swiper-item" v-for="(item, index) in imgList" :key="index">
+				<view class="image-wrapper"><image :src="item" class="loaded" mode="scaleToFill"></image></view>
+			</swiper-item>
+		</swiper>
+		<view class="swiper-dots">
+			<text class="num">{{ swiperCurrent + 1 }}</text>
+			<text class="sign">/</text>
+			<text class="num">{{ imgList | num }}</text>
+		</view>
+	</view>
+	
+</template>
+
+<script>
+export default {
+	props: {
+		imgList: {
+			type: Array,
+			default: function () {
+				return []
+			}
+		},
+	},
+	data() {
+		return {
+			swiperCurrent: 0,
+			swiperLength: 0
+		};
+	},
+	filters: {
+		num(val) {
+			if(val){
+				
+				return val.length
+			}
+			return 0
+		}
+	},
+	methods: {
+		swiperChange(e) {
+			let index = e.detail.current;
+			this.swiperCurrent = index;
+			
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+.carousel {
+	/* #ifdef APP-PLUS */
+	padding-top: var(--status-bar-height);
+	/* #endif */
+	height: 520rpx;
+	position: relative;
+	swiper {
+		height: 100%;
+	}
+	.image-wrapper {
+		width: 100%;
+		height: 100%;
+	}
+	.swiper-item {
+		display: flex;
+		justify-content: center;
+		align-content: center;
+		height: 700rpx;
+		overflow: hidden;
+		image {
+			width: 100%;
+			height: 100%;
+		}
+	}
+}
+.swiper-dots {
+	position: absolute;
+	bottom: 30rpx;
+	right: 26rpx;
+	color: red;
+	background-color: red;
+	z-index: 99;
+	width: 88rpx;
+	height: 42rpx;
+	background: #000000;
+	opacity: 0.5;
+	border-radius: 21rpx;
+
+	font-size: 28rpx;
+	font-family: PingFang SC;
+	font-weight: 500;
+	color: #FFFFFF;
+	line-height: 42rpx;
+	text-align: center;
+}
+</style>

pages/product/product.vue

@@ -0,0 +1,770 @@
+<template>
+	<view class="container">
+		<!-- 轮播图 -->
+		<top-swiper :imgList="imgList"></top-swiper>
+		<!-- 标题 -->
+		<product-content :goodsObjact="goodsObjact" @callf="callf"></product-content>
+
+		<!-- 拼货时间及优惠 -->
+		<!-- <discounts @clickCoupon="Getcoupon" :Info="goodsObjact.store_info" :showCoupon="true"></discounts> -->
+		<!-- 猜你喜欢 -->
+		<!-- <guess-like @Addcar='Addcar' @clickNavTo='navToDetailPage' :goodList = 'good_list||[]'></guess-like> -->
+		<!-- 评价 -->
+		<estimate @navTo="navTo('/pages/product/reply?id=' + goodsid)" v-if="reply" :reply="reply" :list="list"></estimate>
+		<!-- 规格信息 -->
+		<fresh-detail :goodsObjact="goodsObjact"></fresh-detail>
+		<!-- 图文详情 -->
+		<content-text :description="description"></content-text>
+		<!-- 底部高度撑开 -->
+		<view class="contentBottomHeight"></view>
+		<!-- 底部操作菜单 -->
+		<product-bottom @buy="buy" :goodsObjact="goodsObjact" :goodsid="goodsid" @specOPne="specOPne" :showAdd="showAdd"></product-bottom>
+		<!-- 规格-模态层弹窗 -->
+		<view class="popup spec" :class="specClass" @touchmove.stop.prevent="stopPrevent" @click="toggleSpec">
+			<!-- 遮罩层 -->
+			<view class="mask"></view>
+			<view class="layer attr-content" @click.stop="stopPrevent">
+				<view class="a-t">
+					<image :src="actionImage"></image>
+					<view class="right">
+						<text class="name clamp">{{ goodsObjact.store_name }}</text>
+						<view class="price">
+							<text>¥</text>
+							{{ actionPrice * goodsNumber }}
+						</view>
+						<image src="../../static/icon/del.png" mode="" class="right-img" @click="close()"></image>
+					</view>
+				</view>
+				<view v-for="(item, index) in specList" :key="index" class="attr-list">
+					<text>选择{{ item.attr_name }}分类</text>
+					<view class="item-list">
+						<text
+							v-for="(childItem, childIndex) in item.attr_value"
+							:key="childIndex"
+							class="tit"
+							:class="{ selected: childItem.check }"
+							@click="selectSpec(childItem, item, index)"
+						>
+							{{ childItem.attr }}
+						</text>
+					</view>
+				</view>
+				<view class="mun-box">
+					<text>购买数量</text>
+					<view class="num">
+						<uni-number-box class="step" :isMin="true" :value="goodsNumber" :min="1" :max="goodsNumberMax" @eventChange="numberChange"></uni-number-box>
+					</view>
+				</view>
+				<button class="btn" @click.stop="buy" v-show="buys_show">完成</button>
+				<button class="btn" style="background-color: #999999;" v-show="buys_shows">售罄</button>
+			</view>
+		</view>
+		<view class="mask" v-if="show"><image @click="onTap" src="../../static/img/shareimg.png"></image></view>
+	</view>
+</template>
+
+<script>
+import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
+import { goodsDetail, cartAdd, seckillGoods } from '@/api/product.js';
+import { mapState } from 'vuex';
+import store from '@/store/index.js';
+import { saveUrl } from '@/utils/loginUtils.js';
+// #ifdef H5
+import { weixindata } from '@/utils/wxAuthorized';
+// #endif
+// 头部轮播图
+import topSwiper from './common/topSwiper.vue';
+// 标题
+import productContent from './common/productContent.vue';
+// 到货时间及优惠
+import discounts from './common/discounts.vue';
+// 规格信息
+import freshDetail from './common/freshDetail.vue';
+// 图文详情
+import contentText from './common/contentText.vue';
+// 底部按钮
+import productBottom from './common/productBottom.vue';
+// 猜你喜欢
+import guessLike from './common/guessLike.vue';
+// 评价
+import estimate from './common/estimate.vue';
+//增减数量
+import uniNumberBox from '@/components/uni-number-box.vue';
+export default {
+	components: {
+		guessLike,
+		topSwiper,
+		productContent,
+		discounts,
+		freshDetail,
+		contentText,
+		productBottom,
+		estimate,
+		uniNumberBox
+	},
+	data() {
+		return {
+			show: false,
+			showAdd: true,
+			isShare: false,
+			goodsStore: 0, //选中库存
+			specList: [],
+			buys_show: true,
+			buys_shows: false,
+			specSelected: [], //选中的分类
+			specClass: 'none', //显示隐藏弹窗
+			many: 1, //1是单规格  2是多规格
+			reply: '', //评论
+			list: '', //商品详情的数据
+			type: 1, //默认支付方式add为
+			goodsType: 0,
+			goodsNumber: 1, //购买数量
+			goodsid: '', //商品id
+			description: '', //商品描述
+			goodsObjact: {
+				percent: 1
+			}, //保存商品数据
+			//图片循环
+			imgList: [],
+			// 对比对象
+			actionPrice: 0, //默认选中商品价格
+			actionImage: '', //默认选中图片
+			good_list: '', //猜你喜欢列表
+			goodsNumberMax: 0, //最大可购买数量
+			// 倒计时数据保存
+			seckillObj: {
+				stopTime: 0, //结束时间
+				stop: false, //是否结束
+				stopTimeH: 0, //小时
+				stopTimeM: 0, //分钟
+				stopTimeS: 0, //秒钟
+				stopTimeD: 0, //天
+				upTime: 0 //更新组件内部组件用
+			},
+			// 拼团数据保存
+			pink: {
+				id: '', //拼团编号
+				uid: '', //用户编号
+				people: '', //拼团人数
+				price: '', //拼团价格
+				stop_time: '', //拼团结束时间
+				nickname: '', //团长昵称
+				avatar: '', //团长头像
+				count: '', //拼团剩余人数
+				h: '', //时
+				i: '', //分
+				s: '' //秒
+			},
+			userInfo: '',
+			is_drop: false, //是否上门安装
+			showDrop: false //商品是否具有安装属性
+		};
+	},
+	filters: {
+		parseIntTo(percent) {
+			percent = +percent * 100;
+			if (percent % 1 === 0) {
+				return percent;
+			} else {
+				percent = percent.toFixed(1);
+				return percent;
+			}
+		}
+	},
+	async onLoad(options) {
+		let obj = this;
+		obj.userInfo = uni.getStorageSync('userInfo');
+		//保存商品id
+		this.goodsid = options.id;
+		if (options.type) {
+			this.goodsType = options.type;
+		}
+		// 判断有无人邀请
+		if (options.spread) {
+			// 存储邀请人
+			uni.setStorageSync('spread', options.spread);
+		}
+		saveUrl();
+		this.goodsDetail();
+		// 注册邀请信息
+		// #ifdef H5
+		let bool = uni.getStorageSync('weichatBrowser') || '';
+		if (bool) {
+			weixindata();
+		}
+		// #endif
+	},
+	computed: {
+		...mapState(['weichatObj', 'baseURL', 'urlFile'])
+	},
+	// 分享
+	onShareAppMessage(options) {
+		// 设置菜单中的转发按钮触发转发事件时的转发内容
+		let pages = getCurrentPages(); //获取加载的页面
+		let currentPage = pages[pages.length - 1]; //获取当前页面的对象
+		let url = currentPage.route; //当前页面url
+		let item = currentPage.options; //如果要获取url中所带的参数可以查看options
+		let shareObj = {
+			title: this.goodsObjact.store_name + '   价格：' + this.goodsObjact.price, // 默认是小程序的名称(可以写slogan等)
+			path: url + '?id=' + item.id + '&spread=' + this.userInfo.uid, // 默认是当前页面，必须是以‘/’开头的完整路径
+			imageUrl: this.goodsObjact.image,
+			success: function(res) {
+				// 转发成功之后的回调
+				if (res.errMsg == 'shareAppMessage:ok') {
+				}
+			},
+			fail: function() {
+				// 转发失败之后的回调
+				if (res.errMsg == 'shareAppMessage:fail cancel') {
+					// 用户取消转发
+				} else if (res.errMsg == 'shareAppMessage:fail') {
+					// 转发失败，其中 detail message 为详细失败信息
+				}
+			}
+		};
+
+		return shareObj;
+	},
+	methods: {
+		//选择是否上门安装
+		dropClick(val) {
+			if (val == 1) {
+				this.is_drop = true;
+			} else {
+				this.is_drop = false;
+			}
+		},
+		//选择数量
+		numberChange(e) {
+			console.log(e);
+			this.goodsNumber = e.number;
+		},
+		close() {
+			this.specClass = 'none';
+		},
+		//选择规格
+		selectSpec(item, arr, ind) {
+			arr.attr_value.forEach(function(e) {
+				e.check = false;
+			});
+			item.check = true;
+			let obj = this;
+			obj.specSelected[ind] = item.attr;
+			let str = obj.specSelected.join(',');
+			// 获取当前选中的对象
+			if (obj.productValue[str]) {
+				obj.buys_show = true;
+				obj.buys_shows = false;
+				obj.actionPrice = obj.productValue[str].price;
+				obj.goodsNumberMax = obj.productValue[str].stock;
+				obj.actionImage = obj.productValue[str].image;
+				obj.uniqueId = obj.productValue[str].unique;
+				obj.goodsStore = obj.productValue[str].stock;
+			} else {
+				(obj.buys_show = false), (obj.buys_shows = true);
+			}
+			if (obj.goodsStore == 0) {
+				obj.buys_show = false;
+				obj.buys_shows = true;
+			}
+			obj.specSelected[ind] = item.attr;
+		},
+		// 打開彈窗
+		specOPne(type = 1) {
+			let obj = this;
+			obj.specClass = 'show';
+			obj.type = type;
+		},
+		//规格弹窗开关
+		toggleSpec(str) {
+			if (this.specClass === 'show') {
+				this.specClass = 'hide';
+				setTimeout(() => {
+					this.specClass = 'none';
+				}, 250);
+			} else if (this.specClass === 'none') {
+				this.specClass = 'show';
+			}
+			// 保存当前购买类型
+			this.type = str;
+		},
+		//领取优惠券
+		Getcoupon() {
+			uni.navigateTo({
+				url: '/pages/coupon/getcoupon'
+			});
+		},
+		//详情页
+		navToDetailPage(item) {
+			let id = item.id;
+			uni.navigateTo({
+				url: '/pages/product/product?id=' + id
+			});
+		},
+		// 跳转页面
+		navTo(url) {
+			uni.navigateTo({
+				url: '/pages/product/reply?id=' + this.goodsid
+			});
+		},
+		//加入购物车
+		Addcar(item) {
+			let obj = this;
+			cartAdd({
+				cartNum: '1', //商品数量
+				uniqueId: '', //商品标签
+				new: 0, //商品是否新增加到购物车1为不加入0为加入
+				mer_id: '',
+				productId: item.id //商品编号
+			})
+				.then(function(e) {
+					uni.showToast({
+						title: '成功加入购物车',
+						type: 'top',
+						duration: 500,
+						icon: 'none'
+					});
+
+					obj.goodsDetail();
+				})
+				.catch(e => {
+					console.log(e);
+				});
+		},
+		goodsDetail() {
+			let obj = this;
+			// 获取普通商品信息
+			if (obj.goodsType == 0) {
+				goodsDetail({}, this.goodsid).then(function({ data }) {
+						obj.list = data;
+						console.log(obj.list, '普通商品数据');
+						obj.good_list = data.good_list; //保存猜你喜欢列表
+						obj.reply = data.reply; //保存评论列表
+						let goods = data.storeInfo;
+						if (goods.is_drop == 1) {
+							obj.showAdd = false;
+							obj.showDrop = true;
+							obj.is_drop = true;
+						}
+						obj.goodsObjact = goods;
+						if (obj.goodsObjact.description != null) {
+							obj.description = obj.goodsObjact.description.replace(/\<img/gi, '<img class="rich-img"');
+						} //小程序商品详情图超出屏幕问题
+					obj.imgList = goods.slider_image; //保存轮播图
+					obj.specList = data.productAttr; //保存分类列表
+					if (Array.isArray(data.productValue) != true) {
+						console.log('开始处理数据');
+						obj.many = 2;
+						obj.specList = data.productAttr; //保存产品属性
+						obj.productValue = data.productValue; //保存属性值
+						obj.specSelected = []; //初始化默认选择对象
+						for (let i = 0; i < obj.specList.length; i++) {
+							console.log('数据处理');
+							// 设置默认数据
+							const ls = obj.specList[i].attr_value;
+							ls[0].check = true;
+							obj.specSelected.push(ls[0].attr);
+							// console.log('数据处理对象',ls);
+							// for (let s = 0; s < ls.length; s++) {
+							// 	console.log(s);
+							// 	console.log('数据处理对象2',ls[s]);
+							// 	if (ls[s].check) {
+							// 	}
+							// }
+						}
+						const str = obj.specSelected.join(','); //保存当前选中的默认对象
+						console.log(str, 'str');
+						// 设置默认值
+						obj.actionPrice = obj.productValue[str].price;
+						obj.goodsNumberMax = obj.productValue[str].stock;
+						obj.actionImage = obj.productValue[str].image;
+						obj.uniqueId = obj.productValue[str].unique;
+						obj.goodsStore = obj.productValue[str].stock;
+					} else {
+						obj.many = 1;
+						obj.productValue = data.productValue; //保存分类查询数据
+						obj.actionPrice = goods.price; //保存默认选中商品价格
+						obj.actionImage = goods.image_base; //保存默认选中商品图片
+						obj.goodsNumberMax = goods.stock; //保存默认选中最大可购买商品数量
+					}
+					obj.shopId = data.mer_id; //保存商店id
+					console.log('数据处理完毕');
+				});
+			}
+			// 获取秒杀商品信息
+			if (obj.goodsType == 1) {
+				obj.showAdd = false;
+				seckillGoods({}, this.goodsid).then(function({ data }) {
+					obj.list = data;
+					console.log(obj.list, '秒杀商品数据++++++++++');
+					obj.reply = data.reply; //保存评论列表
+					let goods = data.storeInfo;
+					if (goods.is_drop == 1) {
+						obj.showDrop = true;
+					}
+					obj.goodsNumberMax = goods.num;
+					console.log(obj.seckillObj, '数据');
+					obj.goodsObjact = goods;
+					if (obj.goodsObjact.description != null) {
+						obj.description = obj.goodsObjact.description.replace(/\<img/gi, '<img class="rich-img"');
+					} //小程序商品详情图超出屏幕问题
+					obj.imgList = goods.images; //保存轮播图
+					obj.specList = data.productAttr; //保存分类列表
+					if (Array.isArray(data.productValue) != true) {
+						console.log('多规格+++++++++++++');
+						obj.many = 2;
+						obj.specList = data.productAttr; //保存产品属性
+						obj.productValue = data.productValue; //保存属性值
+						obj.specSelected = []; //初始化默认选择对象
+						for (let i = 0; i < obj.specList.length; i++) {
+							// 设置默认数据
+							let attrValue = obj.specList[i].attr_value[0];
+							attrValue.check = true;
+							obj.specSelected.push(attrValue.attr);
+						}
+						let str = obj.specSelected.join(',');
+						console.log(str, 'str');
+						// 设置默认值
+						obj.actionPrice = obj.productValue[str].price;
+						// obj.goodsNumberMax = obj.productValue[str].quota;
+						// console.log(obj.goodsNumberMax,'obj.goodsNumberMax++++++++++++')
+						obj.actionImage = obj.productValue[str].image;
+						obj.uniqueId = obj.productValue[str].unique;
+						obj.goodsStore = obj.productValue[str].stock;
+					} else {
+						console.log('单规格+++++++++++++');
+						obj.many = 1;
+						obj.productValue = data.productValue; //保存分类查询数据
+						obj.actionPrice = goods.price; //保存默认选中商品价格
+						obj.actionImage = goods.image_base; //保存默认选中商品图片
+						// obj.goodsNumberMax = goods.quota; //保存默认选中最大可购买商品数量
+						console.log(obj.goodsNumberMax, 'obj.goodsNumberMax---------------');
+						obj.shopId = data.mer_id; //保存商店id
+					}
+				});
+			}
+		},
+		// 立即购买
+		buy() {
+			let obj = this;
+			// 创建传值对象
+			let data = {
+				cartNum: obj.goodsNumber, //商品数量
+				new: 1,
+				productId: obj.goodsid, //商品编号
+				uniqueId: obj.uniqueId,
+				is_drop: obj.is_drop ? 1 : 0
+			};
+
+			if (obj.type == 2) {
+				data.new = 0;
+			}
+			cartAdd(data)
+				.then(function(e) {
+					let da = e.data;
+					if (obj.type == 1) {
+						// 跳转到支付页
+						let a = obj.is_drop ? 1 : 0;
+						console.log(a);
+						uni.navigateTo({
+							url: '/pages/order/createOrder?id=' + da.cartId + '&isdrop=' + a
+						});
+					}
+					if (obj.type == 2) {
+						uni.showToast({
+							title: '成功加入购物车',
+							type: 'top',
+							duration: 2000,
+							icon: 'none'
+						});
+						obj.goodsDetail();
+					}
+					obj.toggleSpec();
+				})
+				.catch(e => {
+					console.log(e);
+				});
+		},
+		// 阻止触发上级事件
+		stopPrevent() {},
+		callf() {
+			console.log('dianj');
+			this.show = true;
+		},
+		onTap() {
+			console.log(this.callf);
+
+			if (!this.callf) return;
+			this.closess();
+		},
+		closess() {
+			this.show = false;
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+/*  弹出层 */
+.popup {
+	position: fixed;
+	left: 0;
+	top: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 99;
+	&.show {
+		display: block;
+
+		.mask {
+			animation: showPopup 0.2s linear both;
+		}
+
+		.layer {
+			animation: showLayer 0.2s linear both;
+		}
+	}
+
+	&.hide {
+		.mask {
+			animation: hidePopup 0.2s linear both;
+		}
+
+		.layer {
+			animation: hideLayer 0.2s linear both;
+		}
+	}
+
+	&.none {
+		display: none;
+	}
+
+	.mask {
+		position: fixed;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		z-index: 1;
+		background-color: rgba(0, 0, 0, 0.4);
+	}
+
+	.layer {
+		position: fixed;
+		z-index: 99;
+		bottom: 0;
+		width: 100%;
+		min-height: 20vh;
+		border-radius: 10rpx 10rpx 0 0;
+		background-color: #fff;
+
+		.btn {
+			height: 66rpx;
+			line-height: 66rpx;
+			border-radius: 100rpx;
+			background: $uni-color-primary;
+			font-size: $font-base + 2rpx;
+			color: #fff;
+			margin: 30rpx auto 20rpx;
+		}
+	}
+
+	@keyframes showPopup {
+		0% {
+			opacity: 0;
+		}
+
+		100% {
+			opacity: 1;
+		}
+	}
+
+	@keyframes hidePopup {
+		0% {
+			opacity: 1;
+		}
+
+		100% {
+			opacity: 0;
+		}
+	}
+
+	@keyframes showLayer {
+		0% {
+			transform: translateY(120%);
+		}
+
+		100% {
+			transform: translateY(0%);
+		}
+	}
+
+	@keyframes hideLayer {
+		0% {
+			transform: translateY(0);
+		}
+
+		100% {
+			transform: translateY(120%);
+		}
+	}
+}
+/* 规格选择弹窗 */
+.attr-content {
+	padding: 25rpx 30rpx;
+
+	.a-t {
+		display: flex;
+
+		image {
+			width: 170rpx;
+			height: 170rpx;
+			flex-shrink: 0;
+			border-radius: 8rpx;
+		}
+
+		.right {
+			display: flex;
+			flex-direction: column;
+			padding-left: 24rpx;
+			font-size: $font-sm + 2rpx;
+			color: $font-color-base;
+			line-height: 42rpx;
+			width: 75%;
+			position: relative;
+			.right-img {
+				width: 37rpx;
+				height: 37rpx;
+				position: absolute;
+				right: 0;
+				top: 20rpx;
+				// background-color: red;
+			}
+			.price {
+				position: absolute;
+				bottom: 0;
+				font-size: $font-lg;
+				color: $uni-color-primary;
+				margin: 10rpx 0rpx;
+				font-size: 60rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #ef041f;
+				text {
+					font-size: 30rpx;
+				}
+			}
+
+			.name {
+				width: 350rpx;
+				font-size: 32rpx;
+				color: $font-color-dark;
+				height: 50rpx;
+				overflow: hidden;
+				text-overflow: ellipsis;
+				white-space: nowrap;
+				display: block;
+				font-size: 30rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #1d2023;
+			}
+
+			.selected-text {
+				margin-right: 10rpx;
+			}
+		}
+	}
+
+	.attr-list {
+		display: flex;
+		flex-direction: column;
+		font-size: $font-base + 2rpx;
+		color: $font-color-base;
+		padding-top: 30rpx;
+		padding-left: 10rpx;
+	}
+
+	.item-list {
+		padding: 20rpx 0 0;
+		display: flex;
+		flex-wrap: wrap;
+
+		text {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			background: #eee;
+			margin-right: 20rpx;
+			margin-bottom: 20rpx;
+			border-radius: 10rpx;
+			min-width: 60rpx;
+			height: 60rpx;
+			padding: 0 20rpx;
+			font-size: $font-base;
+			color: $font-color-dark;
+		}
+
+		.selected {
+			background: #fceff1;
+			color: #f35768;
+			border: 1px solid #f35768;
+		}
+	}
+}
+
+//默认商品底部高度
+.goodsBottom {
+	height: 160rpx;
+}
+page {
+	background: #f0f0f0;
+}
+//秒杀、拼团底部高度
+.contentBottomHeight {
+	background-color: #f8f8f8;
+	height: 130rpx;
+}
+//默认商品底部高度
+.goodsBottom {
+	height: 160rpx;
+}
+/deep/ .iconenter {
+	font-size: $font-base + 2rpx;
+	color: #888;
+}
+/deep/ .con_image {
+	width: 130rpx;
+	height: 130rpx;
+	display: inline-block;
+	padding: 15rpx;
+	image {
+		width: 100%;
+		height: 100%;
+	}
+}
+/* 商品详情中限制图片大小 */
+/deep/ .rich-img {
+	width: 100% !important;
+	height: auto;
+}
+.mun-box {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.mask {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	z-index: 999;
+	background-color: rgba(0, 0, 0, 0.4);
+	image {
+		width: 100%;
+		height: 100%;
+		opacity: 0.8;
+	}
+}
+</style>

pages/set/address.vue

@@ -0,0 +1,208 @@
+<template>
+	<view class="content b-t">
+		<view class="list" v-for="(item, index) in addressList" :key="index" @click="checkAddress(item)">
+			<view class="wrapper">
+				<view class="address-box">
+					<text class="name">{{ item.real_name }}</text>
+					<text class="mobile">{{ item.phone }}</text>
+				</view>
+				<view class="u-box">
+					<text class="address">{{ item.province + item.city + item.district }} {{ item.detail }}</text>
+				</view>
+			</view>
+			<view class="buttom">
+				<view class="default-buttom" @click.stop="defaultUp(item,index)">
+					<view class="iconfont iconroundcheckfill checkbox" :class="{ checked: item.is_default == 1 }"></view>
+					<text class="text">设为默认地址</text>
+				</view>
+				<view class="operation">
+					<view @click.stop="addAddress('edit', item)">
+						<text class="iconfont iconedit"></text>
+						<text class="text">编辑</text>
+					</view>
+					<view class="blank"></view>
+					<view @click.stop="delAddress(item)">
+						<text class="iconfont icondelete"></text>
+						<text class="text">删除</text>
+					</view>
+				</view>
+			</view>
+		</view>
+		<button class="add-btn" @click="addAddress('add')">新增地址</button>
+	</view>
+</template>
+
+<script>
+import { getAddressList,setAddressDefault,addressDel } from '@/api/user.js';
+export default {
+	data() {
+		return {
+			source: 0,
+			addressList: []
+		};
+	},
+	onLoad(option) {
+		this.source = option.source||0
+		this.loadAddress();
+	},
+	methods: {
+		// 加载地址
+		loadAddress() {
+			getAddressList({
+				page: 1,
+				limit: 100
+			}).then(({ data }) => {
+				this.addressList = data;
+			});
+		},
+		// 设为默认地址
+		defaultUp(data,ind) {
+			this.addressList=this.addressList.map((e) => {
+				e.is_default=0
+				return e
+			})
+			this.addressList[ind].is_default=1
+			setAddressDefault({
+				id: data.id
+			}).then(({ data }) => {
+				this.loadAddress();
+			}).catch((e) => {
+				console.log(e);
+			});
+		},
+		//删除地址
+		delAddress(item) {
+			addressDel({
+				id:item.id
+			}).then(({data})=>{
+				this.$api.msg('删除成功')
+			})
+			let s = this.addressList.indexOf(item);
+			this.addressList.splice(s, 1);
+		},
+		//选择地址
+		checkAddress(item) {
+			if (this.source == 1) {
+				//this.$api.prePage()获取上一页实例，在App.vue定义
+				this.$api.prePage().addressData = item;
+				uni.navigateBack();
+			}
+		},
+		// 添加地址
+		addAddress(type, item) {
+			uni.navigateTo({
+				url: `/pages/set/addressManage?type=${type}&data=${JSON.stringify(item)}`
+			});
+		},
+		//添加或修改成功之后回调
+		refreshList() {
+			// 重新加载地址
+			this.loadAddress()
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+page {
+	padding-bottom: 120rpx;
+	padding-top: 20rpx;
+	background-color: $page-color-base;
+}
+.content {
+	position: relative;
+}
+.list {
+	align-items: center;
+	padding: 20rpx 30rpx;
+	background: #fff;
+	margin: 20rpx;
+	margin-top: 0;
+	.buttom {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding-top: 10rpx;
+		.checkbox {
+			font-size: 44rpx;
+			line-height: 1;
+			padding: 4rpx;
+			color: $font-color-disabled;
+			background: #fff;
+			border-radius: 50px;
+		}
+		.checkbox.checked {
+			color: $base-color;
+		}
+		.default-buttom {
+			display: flex;
+			align-items: center;
+		}
+		.operation {
+			display: flex;
+			align-items: center;
+			.blank {
+				width: 30rpx;
+			}
+		}
+		.text {
+			padding-left: 10rpx;
+			font-size: 24rpx;
+			color: #666666;
+		}
+	}
+}
+.wrapper {
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	border-bottom: 1px solid #f0f0f0;
+	padding-bottom: 20rpx;
+}
+.address-box {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	.address {
+		font-size: $font-base + 2rpx;
+		color: $font-color-dark;
+	}
+	.mobile {
+		font-size: $font-base;
+		color: rgba(51, 51, 51, 1);
+	}
+}
+.u-box {
+	font-size: $font-base;
+	color: $font-color-light;
+	margin-top: 16rpx;
+	.name {
+		margin-right: 30rpx;
+	}
+}
+.icon-bianji {
+	display: flex;
+	align-items: center;
+	height: 80rpx;
+	font-size: 40rpx;
+	color: $font-color-light;
+	padding-left: 30rpx;
+}
+
+.add-btn {
+	position: fixed;
+	left: 30rpx;
+	right: 30rpx;
+	bottom: 16rpx;
+	z-index: 95;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 690rpx;
+	height: 80rpx;
+	font-size: $font-lg;
+	color: #fff;
+	background-color: $base-color;
+	border-radius: 10rpx;
+}
+</style>

pages/set/addressManage.vue

@@ -0,0 +1,219 @@
+<template>
+	<view class="content">
+		<view class="row b-b">
+			<text class="tit">联系人</text>
+			<input class="input" type="text" v-model="addressData.name" placeholder="收货人姓名" placeholder-class="placeholder" />
+		</view>
+		<view class="row b-b">
+			<text class="tit">手机号</text>
+			<input class="input" type="number" v-model="addressData.mobile" placeholder="收货人手机号码" placeholder-class="placeholder" />
+		</view>
+		<view class="row b-b">
+			<text class="tit">地址</text>
+			<pickerAddress class="input" @change="onCityClick">{{addressDetail||'请选择地址'}}</pickerAddress>
+			<text class="iconfont iconlocation"></text>
+		</view>
+		<view class="row b-b">
+			<text class="tit">门牌号</text>
+			<input class="input" type="text" v-model="addressData.area" placeholder="楼号、门牌" placeholder-class="placeholder" />
+		</view>
+
+		<uni-list class="margin-t-20">
+			<uni-list-item
+				title="设为默认"
+				:switch-checked="addressData.default"
+				:show-switch="true"
+				:show-arrow="false"
+				switch-color="#5dbc7c"
+				@switchChange="switchChange"
+			></uni-list-item>
+		</uni-list>
+
+		<button class="add-btn" @click="confirm">提交</button>
+	</view>
+</template>
+
+<script>
+import uniList from '@/components/uni-list/uni-list.vue';
+import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
+import uniPopup from '@/components/uni-popup/uni-popup.vue';
+import  pickerAddress from '@/components/wangding-pickerAddress/wangding-pickerAddress.vue';
+import { addressEdit } from '@/api/user.js';
+export default {
+	components: {
+		uniList,
+		uniListItem,
+		pickerAddress,
+		uniPopup
+	},
+	data() {
+		return {
+			addressDetail: '',
+			addressData: {
+				name: '',
+				mobile: '',
+				address: {
+					province: '',
+					city: '',
+					district: ''
+				},
+				area: '',
+				default: false
+			}
+		};
+	},
+	onLoad(option) {
+		let title = '新增收货地址';
+		if (option.type === 'edit') {
+			title = '编辑收货地址';
+			let data = JSON.parse(option.data);
+			console.log(data);
+
+			this.addressData = {
+				name: data.real_name,
+				mobile: data.phone,
+				address: {
+					province: data.province,
+					city: data.city,
+					district: data.district
+				},
+				area: data.detail,
+				default: data.is_default == 1,
+				id: data.id
+			};
+			this.addressDetail = data.province + data.city + data.district;
+		}
+		this.manageType = option.type;
+		uni.setNavigationBarTitle({
+			title
+		});
+	},
+	methods: {
+		// 选中城市切换
+		onCityClick({data}) {
+			let address = this.addressData.address;
+			address.province = data[0];
+			address.city = data[1];
+			address.district = data[2];
+			this.addressDetail = data.join('');
+		},
+		//地图选择地址
+		chooseLocation() {
+			uni.chooseLocation({
+				success: data => {
+					console.log(data);
+					this.addressData.addressName = data.name;
+					this.addressData.address = data.name;
+				}
+			});
+		},
+		// 设置是否为默认地址
+		switchChange(e) {
+			this.addressData.default = e.value;
+		},
+		//提交
+		confirm() {
+			let obj = this;
+			let data = this.addressData;
+			if (!data.name) {
+				this.$api.msg('请填写收货人姓名');
+				return;
+			}
+			if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(data.mobile)) {
+				this.$api.msg('请输入正确的手机号码');
+				return;
+			}
+			if (!data.address) {
+				this.$api.msg('请在地图选择所在位置');
+				return;
+			}
+			if (!data.area) {
+				this.$api.msg('请填写门牌号信息');
+				return;
+			}
+
+			//this.$api.prePage()获取上一页实例，可直接调用上页所有数据和方法，在App.vue定义
+			addressEdit({
+				real_name: data.name,
+				phone: data.mobile,
+				address: {
+					province: data.address.province,
+					city: data.address.city,
+					district: data.address.district
+				},
+				detail: data.area,
+				is_default: data.default,
+				id: data.id||"",
+				type:1
+			}).then(function(e) {
+				obj.$api.prePage().refreshList();
+				uni.showToast({
+					title:'提交成功',
+					duration:2000
+				});
+				setTimeout(function() {
+					uni.navigateBack();
+				}, 800);
+			});
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+page {
+	background: $page-color-base;
+	padding-top: 16rpx;
+}
+
+.row {
+	display: flex;
+	align-items: center;
+	position: relative;
+	padding: 0 30rpx;
+	height: 110rpx;
+	background: #fff;
+
+	.tit {
+		flex-shrink: 0;
+		width: 120rpx;
+		font-size: 30rpx;
+		color: $font-color-dark;
+	}
+	.input {
+		flex: 1;
+		font-size: 30rpx;
+		color: $font-color-dark;
+	}
+	.iconlocation {
+		font-size: 36rpx;
+		color: $font-color-light;
+	}
+}
+.default-row {
+	margin-top: 16rpx;
+	.tit {
+		flex: 1;
+	}
+	switch {
+		transform: translateX(16rpx) scale(0.9);
+	}
+}
+.add-btn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 690rpx;
+	height: 80rpx;
+	margin: 60rpx auto;
+	font-size: $font-lg;
+	color: #fff;
+	background-color: $base-color;
+	border-radius: 10rpx;
+	// box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
+}
+
+.alert-box {
+	background-color: #ffffff;
+}
+</style>

pages/set/password.vue

@@ -0,0 +1,161 @@
+<template>
+	<view class="container">
+		<view class="row b-b">
+			<text class="tit">手机号</text>
+			<input class="input" v-model="account" type="text" placeholder="请填写手机号" placeholder-class="placeholder" />
+		</view>
+		<view class="row b-b">
+			<text class="tit">验证码</text>
+			<input class="input" v-model="captcha" type="text" placeholder="请填写验证码" placeholder-class="placeholder" />
+			<view class="code" @click="verification">{{ countDown == 0 ? '验证码' : countDown }}</view>
+		</view>
+		<view class="row b-b">
+			<text class="tit">新密码</text>
+			<input class="input" v-model="password" type="password" placeholder="请填写新密码" placeholder-class="placeholder" />
+		</view>
+		<button class="add-btn" :class="{'bg-gray':loding}" @click="loding?'':confirm()">提交</button>
+	</view>
+</template>
+
+<script>
+import { verify } from '@/api/login.js';
+import { mapState } from 'vuex';
+import { registerReset } from '@/api/set.js';
+export default {
+	data() {
+		return {
+			time: '', //保存倒计时对象
+			countDown: 0, //倒计时
+			account: '', //手机号
+			captcha: '', //验证码
+			password: '' ,//新密码
+			loding:false,//是否载入中
+		};
+	},
+	computed: {
+		...mapState(['userInfo'])
+	},
+	onLoad() {
+		if(this.userInfo.phone == null){
+			this.account = '';
+		}else{
+			this.account = this.userInfo.phone;
+			this.show = false;
+		}
+	},
+	watch: {
+		// 监听倒计时
+		countDown(i) {
+			if (i == 0) {
+				clearInterval(this.time);
+			}
+		}
+	},
+	methods: {
+		//发送验证码
+		verification() {
+			let obj = this;
+			if (this.account == '') {
+				this.$api.msg('请输入电话号码');
+				return;
+			}
+			if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(this.account)) {
+				this.$api.msg('请输入正确的手机号');
+				return;
+			}
+			// 判断是否在倒计时
+			if (obj.countDown > 0) {
+				return false;
+			} else {
+				obj.countDown = 60;
+				obj.time = setInterval(() => {
+					obj.countDown--;
+				}, 1000);
+				//调用验证码接口
+				verify({
+					phone: obj.account,
+					type: ''
+				})
+					.then(({ data }) => {})
+					.catch(err => {
+						console.log(err);
+					});
+			}
+		},
+		confirm(e) {
+			this.loding = true;
+			registerReset({
+				account: this.account,
+				captcha: this.captcha,
+				password: this.password,
+			})
+				.then(({ data }) => {
+					this.loding = false;
+					this.$api.msg('修改成功');
+				})
+				.catch(err => {
+					this.loding = false;
+					console.log(err);
+				});
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+page {
+	background: $page-color-base;
+}
+.container {
+	padding-top: 30rpx;
+}
+.row {
+	display: flex;
+	align-items: center;
+	position: relative;
+	padding: 0 30rpx;
+	height: 110rpx;
+	background: #fff;
+
+	.tit {
+		flex-shrink: 0;
+		width: 120rpx;
+		font-size: 30rpx;
+		color: $font-color-dark;
+	}
+	.input {
+		flex: 1;
+		font-size: 30rpx;
+		color: $font-color-dark;
+	}
+	.iconlocation {
+		font-size: 36rpx;
+		color: $font-color-light;
+	}
+}
+.add-btn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 690rpx;
+	height: 80rpx;
+	margin: 60rpx auto;
+	font-size: $font-lg;
+	color: #fff;
+	background-color: $base-color;
+	border-radius: 10rpx;
+	// box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
+}
+
+.bg-gray{
+	background-color: $color-gray;
+}
+.code {
+	color: #5dbc7c;
+	font-size: 23rpx;
+	border-left: 1px solid #eeeeee;
+	width: 150rpx;
+	flex-shrink: 0;
+	text-align: center;
+}
+</style>

pages/set/phone.vue

@@ -0,0 +1,161 @@
+<template>
+	<view class="container">
+		<view class="row b-b">
+			<text class="tit">手机号</text>
+			<input class="input" v-model="account" type="text" placeholder="请填写手机号" placeholder-class="placeholder" />
+		</view>
+		<view>
+			<view class="row b-b">
+				<text class="tit">验证码</text>
+				<input class="input" v-model="captcha" type="text" placeholder="请填写验证码" placeholder-class="placeholder" />
+				<view class="code" @click="verification">{{ countDown == 0 ? '验证码' : countDown }}</view>
+			</view>
+			<button class="add-btn" :class="{ 'bg-gray': loding }" @click="loding ? '' : confirm()">提交</button>
+		</view>
+	</view>
+</template>
+
+<script>
+import { verify } from '@/api/login.js';
+import { mapState } from 'vuex';
+import { registerReset, binding } from '@/api/set.js';
+export default {
+	data() {
+		return {
+			time: '', //保存倒计时对象
+			countDown: 0, //倒计时
+			account: '', //手机号
+			captcha: '', //验证码
+			password: '', //新密码
+			loding: false //是否载入中
+		};
+	},
+	watch: {
+		// 监听倒计时
+		countDown(i) {
+			if (i == 0) {
+				clearInterval(this.time);
+			}
+		}
+	},
+	computed: {
+		...mapState(['userInfo'])
+	},
+	onLoad() {
+		if (this.userInfo.phone == null) {
+			this.account = '';
+		} else {
+			this.account = this.userInfo.phone;
+			this.show = false;
+		}
+	},
+	methods: {
+		//发送验证码
+		verification() {
+			let obj = this;
+			if (this.account == '') {
+				this.$api.msg('请输入电话号码');
+				return;
+			}
+			if (!/(^1[3|4|5|7|8][0-9]{9}$)/.test(this.account)) {
+				this.$api.msg('请输入正确的手机号');
+				return;
+			}
+			// 判断是否在倒计时
+			if (obj.countDown > 0) {
+				return false;
+			} else {
+				obj.countDown = 60;
+				obj.time = setInterval(() => {
+					obj.countDown--;
+				}, 1000);
+				//调用验证码接口
+				verify({
+					phone: obj.account,
+					type: 'BDING_CODE'
+				})
+					.then(({ data }) => {})
+					.catch(err => {
+						console.log(err);
+					});
+			}
+		},
+		confirm(e) {
+			let obj = this;
+			obj.loding = true;
+			binding({
+				phone: obj.account,
+				captcha: obj.captcha
+			})
+				.then(({ data }) => {
+					obj.$api.msg('绑定成功！');
+					setTimeout(function() {
+						obj.loding = false;
+						uni.switchTab({
+							url: '/pages/user/user'
+						});
+					}, 1000);
+				})
+				.catch(err => {
+					obj.loding = false;
+					console.log(err);
+				});
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+page {
+	background: $page-color-base;
+}
+.row {
+	display: flex;
+	align-items: center;
+	position: relative;
+	padding: 0 30rpx;
+	height: 110rpx;
+	background: #fff;
+
+	.tit {
+		flex-shrink: 0;
+		width: 120rpx;
+		font-size: 30rpx;
+		color: $font-color-dark;
+	}
+	.input {
+		flex: 1;
+		font-size: 30rpx;
+		color: $font-color-dark;
+	}
+	.iconlocation {
+		font-size: 36rpx;
+		color: $font-color-light;
+	}
+}
+.add-btn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 690rpx;
+	height: 80rpx;
+	margin: 60rpx auto;
+	font-size: $font-lg;
+	color: #fff;
+	background-color: $base-color;
+	border-radius: 10rpx;
+	// box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
+}
+
+.bg-gray {
+	background-color: $color-gray;
+}
+.code {
+	color: #5dbc7c;
+	font-size: 23rpx;
+	border-left: 1px solid #eeeeee;
+	width: 150rpx;
+	flex-shrink: 0;
+	text-align: center;
+}
+</style>

pages/set/set.vue

@@ -0,0 +1,113 @@
+<template>
+	<view class="container">
+		<uni-list>
+		    <uni-list-item title="个人资料" @click="navTo('/pages/set/userinfo')" ></uni-list-item>
+			<uni-list-item title="修改密码" @click="navTo('/pages/set/password')" ></uni-list-item>
+		    <uni-list-item title="实名认证" @click="navTo('/pages/set/phone')" ></uni-list-item>
+		    <uni-list-item title="收货地址" @click="navTo('/pages/set/address')" ></uni-list-item>
+		</uni-list>
+		<uni-list class="margin-t-20">
+		    <uni-list-item title="消息推送" :switch-checked='true' :show-switch="true" :show-arrow="false" switch-color='#5dbc7c'  @switchChange='switchChange'> 
+			</uni-list-item>
+		</uni-list>
+		
+		<uni-list class="margin-t-20">
+		    <uni-list-item title="清除缓存" ></uni-list-item>
+		    <uni-list-item title="检查更新" >
+				<template slot="right">
+					当前版本 1.0.3
+				</template>
+			</uni-list-item>
+		</uni-list>
+		<view class="list-cell log-out-btn" @click="toLogout">
+			<text class="cell-tit">退出登录</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	import uniList from "@/components/uni-list/uni-list.vue"
+	import uniListItem from "@/components/uni-list-item/uni-list-item.vue"
+	import { logout } from '@/api/set.js';
+	import {  
+	    mapMutations  
+	} from 'vuex';
+	export default {
+		components: {
+			uniList,uniListItem
+		},
+		data() {
+			return {
+				
+			};
+		},
+		methods:{
+			...mapMutations('user',['logout']),
+			navTo(url){
+				uni.navigateTo({
+					url:url
+				})
+			},
+			//退出登录
+			toLogout(){
+				let obj = this;
+				uni.showModal({
+				    content: '确定要退出登录么',
+				    success: (e)=>{
+				    	if(e.confirm){
+							logout({}).then((e) => {
+								uni.navigateBack();
+							}).catch((e) => {
+								console.log(e);
+							})
+				    		obj.logout();
+				    	}
+				    }
+				});
+			},
+			//switch切换触发方法
+			switchChange(e){
+				console.log(e);
+				let statusTip = e.value ? '打开': '关闭';
+				this.$api.msg(`${statusTip}消息推送`);
+			},
+
+		}
+	}
+</script>
+
+<style lang='scss'>
+	page{
+		background: $page-color-base;
+	}
+	.list-cell{
+		display:flex;
+		align-items:baseline;
+		padding: 20rpx $page-row-spacing;
+		line-height:60rpx;
+		position:relative;
+		background: #fff;
+		justify-content: center;
+		&.log-out-btn{
+			margin-top: 40rpx;
+			.cell-tit{
+				color: $uni-color-primary;
+				text-align: center;
+				margin-right: 0;
+			}
+		}
+		.cell-tit{
+			flex: 1;
+			font-size: $font-base + 2rpx;
+			color: $font-color-dark;
+			margin-right:10rpx;
+		}
+		.cell-tip{
+			font-size: $font-base;
+			color: $font-color-light;
+		}
+		switch{
+			transform: translateX(16rpx) scale(.84);
+		}
+	}
+</style>

pages/set/userinfo.vue

@@ -0,0 +1,204 @@
+<template>
+<!-- 	<view class="container">
+		<uni-list>
+		    <uni-list-item title="个人资料" @click="navTo('/pages/set/userinfo')" ></uni-list-item>
+			<uni-list-item title="修改密码" @click="navTo('/pages/set/password')" ></uni-list-item>
+		    <uni-list-item title="实名认证" @click="navTo('/pages/set/phone')" ></uni-list-item>
+		    <uni-list-item title="收货地址" @click="navTo('/pages/set/address')" ></uni-list-item>
+		</uni-list>
+		<uni-list class="margin-t-20">
+		    <uni-list-item title="消息推送" :switch-checked='true' :show-switch="true" :show-arrow="false" switch-color='#5dbc7c'  @switchChange='switchChange'> 
+			</uni-list-item>
+		</uni-list>
+		
+		<uni-list class="margin-t-20">
+		    <uni-list-item title="清除缓存" ></uni-list-item>
+		    <uni-list-item title="检查更新" >
+				<template slot="right">
+					当前版本 1.0.3
+				</template>
+			</uni-list-item>
+		</uni-list>
+		<view class="list-cell log-out-btn" @click="toLogout">
+			<text class="cell-tit">退出登录</text>
+		</view>
+	</view> -->
+  <view class="container">
+  	<view class="row b-b flex jg">
+  		<text class="tit">头像</text>
+  		<image :src="userInfo.avatar" @click.stop="imgsub"></image>
+  	</view>
+  	<view class="row b-b flex">
+  		<text class="tit">昵称</text>
+  		<input class="input" v-model="userInfo.nickname" type="text" placeholder-class="placeholder" />
+  	</view>
+  	<view class="row b-b flex">
+  		<text class="tit">邀请码</text>
+  		<input class="input" v-model="userInfo.uid" type="text" disabled="true" placeholder-class="placeholder" style="color: #999;" />
+  	</view>
+  	<view class="row b-b flex" v-if="userInfo.account || userInfo.phone">
+  		<text class="tit">用户账号</text>
+  		<input class="input" v-model="userInfo.account || userInfo.phone" type="number" disabled="true" placeholder-class="placeholder" />
+  	</view>
+  	<view class="submit-box flex" >
+  		<view class="submit" @click="edit">确认修改</view>
+  		<view class="submit" @click="toLogout">退出登录</view>
+  	</view>
+  	
+  </view>
+</template>
+
+<script>
+  import uniList from '@/components/uni-list/uni-list.vue';
+  import uniListItem from '@/components/uni-list-item/uni-list-item.vue';
+  import { mapState, mapMutations } from 'vuex';
+  import { logout } from '@/api/set.js';
+
+  import {
+  		uploads,edit,upload
+  	} from '@/api/user.js';
+  export default {
+  	components: {
+  		uniList,
+  		uniListItem
+  	},
+  	data() {
+  		return {
+  			userInfo:{},
+			pics:[],
+  		};
+  	},
+  	onLoad() {
+		this.userInfo = uni.getStorageSync('userInfo') || '';
+		console.log(this.userInfo)
+  	},
+  	methods: {
+  		...mapMutations('user',['logout']),
+  		//退出登录
+  		toLogout() {
+  			let obj = this;
+  			uni.showModal({
+  				content: '确定要退出登录么',
+  				success: e => {
+  					if (e.confirm) {
+  						logout({}).then(e => {
+  							obj.logout();
+  							uni.navigateTo({
+  								url:'/pages/public/login'
+  							})
+  						})
+  						.catch(e => {
+  							console.log(e);
+  						});
+  					}
+  				}
+  			});
+  		},
+  		imgsub() {
+			let obj = this
+			upload({
+				filename: ''
+			}).then(res => {
+				console.log(res[0].url)
+				obj.userInfo.avatar = res[0].url
+			});
+  		},
+  		edit() {
+  			const that = this;
+			uni.showLoading({
+				title: '提交中...',
+				mask:true
+			})
+  			edit({
+  				avatar: this.userInfo.avatar,
+  				nickname: this.userInfo.nickname
+  			}).then( e =>{
+				uni.hideLoading()
+  				that.$api.msg('修改成功');
+  				setTimeout(()=> {
+  					uni.switchTab({
+  						url:'/pages/user/user'
+  					});
+  				}, 1000);
+  			}).catch(e =>{
+  				console.log(e);
+  				that.$api.msg('修改失败');
+  			})
+  		}
+  	}
+  };
+</script>
+
+<style lang='scss'>
+	/* page{
+		background: $page-color-base;
+	}
+	.list-cell{
+		display:flex;
+		align-items:baseline;
+		padding: 20rpx $page-row-spacing;
+		line-height:60rpx;
+		position:relative;
+		background: #fff;
+		justify-content: center;
+		&.log-out-btn{
+			margin-top: 40rpx;
+			.cell-tit{
+				color: $uni-color-primary;
+				text-align: center;
+				margin-right: 0;
+			}
+		}
+		.cell-tit{
+			flex: 1;
+			font-size: $font-base + 2rpx;
+			color: $font-color-dark;
+			margin-right:10rpx;
+		}
+		.cell-tip{
+			font-size: $font-base;
+			color: $font-color-light;
+		}
+		switch{
+			transform: translateX(16rpx) scale(.84);
+		}
+	} */
+  page {
+    background-color: #f3f3f3;
+  	min-height: 100%;
+  	.container{
+  		height: 100%;
+  		
+  	}
+  }
+  .row {
+    background-color: #fff;
+  	padding: 42rpx 25rpx;
+  	font-size: 30rpx;
+  	color: #333333;
+  	image{
+  		width: 80rpx;
+  		height: 80rpx;
+  		border-radius: 50%;
+  	}
+  	.input {
+  		text-align: right;
+  		color: #333333;
+  	}
+  }
+  .submit-box{
+  		 padding-top: 157rpx;
+  		.submit{
+  			margin: 40rpx auto;
+  			width: 560rpx;
+  			background-color: #ff4c4b;
+  			color: #FFFFFF;
+  			text-align: center;
+  			padding:26rpx 0rpx;
+  			border-radius: 50rpx;
+  		}
+  	}
+    .jg {
+      margin-bottom: 20rpx;
+    }
+</style>

pages/story/story.vue

@@ -1,8 +1,293 @@
 <template>
+	<view class="content">
+		<!-- 头部导航 -->
+		<view class="nav-bar flex">
+			<view class="nav-item" v-for="(item,index) in navList" :key="index"
+				:class="{'active': currentIndex == index}" @click="navClick(index)">
+				{{item.tit}}
+			</view>
+		</view>
+		<!-- 分类列表 -->
+		<swiper :duration="400" class="swiper-wrapper" :style="{'height': height}" :current="currentIndex" @change="swiperChange">
+			<swiper-item>
+				<scroll-view scroll-y="true" :style="{'height': height}" class="scroll-wrapper">
+					<view class="list" v-for="(item,index) in 100">
+						<template v-if="index == 0">
+							<view class="list-top-tit clamp2">竹胎酵素饮】正一健康竹胎酵素饮相关纪录片在浙江卫视热播</view>
+							<image src="" mode="" class="list-top-img"></image>
+							<view class="list-top-time">
+								更新时间:2019-12-06
+							</view>
+						</template>
+						<template v-else>
+							<view class="list-scend">
+								<image src="" mode="" class="list-img"></image>
+								<view class="list-info">
+									<view class="list-tit clamp">竹胎酵素饮】正一健康竹胎酵素饮相关纪录片在浙江卫视热播</view>
+									<view class="list-time">
+										更新时间:2019-12-06
+									</view>
+								</view>
+							</view>
+						</template>
+					</view>
+				</scroll-view>
+			</swiper-item>
+			<swiper-item>
+				<scroll-view scroll-y="true" :style="{'height': height}" class="scroll-wrapper">
+					<view class="list" v-for="(item,index) in 100">
+						<template v-if="index == 0">
+							<view class="list-top-tit clamp2">竹胎酵素饮】正一健康竹胎酵素饮相关纪录片在浙江卫视热播</view>
+							<image src="" mode="" class="list-top-img"></image>
+							<view class="list-top-time">
+								更新时间:2019-12-06
+							</view>
+						</template>
+						<template v-else>
+							<view class="list-scend">
+								<image src="" mode="" class="list-img"></image>
+								<view class="list-info">
+									<view class="list-tit clamp">竹胎酵素饮】正一健康竹胎酵素饮相关纪录片在浙江卫视热播</view>
+									<view class="list-time">
+										更新时间:2019-12-06
+									</view>
+								</view>
+							</view>
+						</template>
+					</view>
+				</scroll-view>
+			</swiper-item>
+			<swiper-item>
+				<scroll-view scroll-y="true" :style="{'height': height}" class="scroll-wrapper">
+					<view class="list" v-for="(item,index) in 100">
+						<template v-if="index == 0">
+							<view class="list-top-tit clamp2">竹胎酵素饮】正一健康竹胎酵素饮相关纪录片在浙江卫视热播</view>
+							<image src="" mode="" class="list-top-img"></image>
+							<view class="list-top-time">
+								更新时间:2019-12-06
+							</view>
+						</template>
+						<template v-else>
+							<view class="list-scend">
+								<image src="" mode="" class="list-img"></image>
+								<view class="list-info">
+									<view class="list-tit clamp">竹胎酵素饮】正一健康竹胎酵素饮相关纪录片在浙江卫视热播</view>
+									<view class="list-time">
+										更新时间:2019-12-06
+									</view>
+								</view>
+							</view>
+						</template>
+					</view>
+				</scroll-view>
+			</swiper-item>
+		</swiper>
+	</view>
 </template>
 
 <script>
+	export default {
+		components: {
+
+		},
+		onReady(res) {
+			var _this = this;
+			uni.getSystemInfo({
+				success: resu => {
+					const query = uni.createSelectorQuery();
+					query.select('.swiper-wrapper').boundingClientRect();
+					query.exec(function(res) {
+						console.log(res, 'ddddddddddddd');
+						_this.height = resu.windowHeight - res[0].top + 'px';
+						console.log('打印页面的剩余高度', _this.height);
+					});
+				},
+				fail: res => {}
+			});
+		},
+		data() {
+			return {
+				height: '', //swiper 高度
+				currentIndex: 0, //当前头部导航位置
+				navList: [{
+						cid: 1,
+						tit: '公司简介',
+						list: [],
+						page: 1,
+						limit: 10,
+						loadingType: 'more'
+					},
+					{
+						cid: 2,
+						tit: '产品简介',
+						list: [],
+						page: 1,
+						limit: 10,
+						loadingType: 'more'
+					},
+					{
+						cid: 1,
+						tit: '案例分享',
+						list: [],
+						page: 1,
+						limit: 10,
+						loadingType: 'more'
+					}
+				]
+			}
+		},
+		onLoad() {
+			this.getData()
+		},
+		methods: {
+			navClick(index) {
+				this.currentIndex = index
+			},
+			swiperChange(e) {
+				console.log(e,'swiperChange')
+				this.currentIndex = e.detail.current
+				this.getData('tabChange')
+			},
+			getData(source) {
+				let obj = this
+				let index = this.currentIndex;
+				let navItem = this.navList[index];
+				if (source === 'tabChange' && navItem.loaded === true) {
+					//tab切换只有第一次需要加载数据
+					return;
+				}
+				if (navItem.loadingType === 'loading') {
+					//防止重复加载
+					return;
+				}
+				if (navItem.loadingType === 'noMore') {
+					//防止重复加载
+					return;
+				}
+				navItem.loadingType = 'loading';
+				getCricleList({
+					page: navItem.page,
+					limit: navItem.limit
+				}).then(({data}) => {
+					console.log(res)
+					let list = data.list.map( item => {
+						return item
+					})
+					navItem.list = navItem.list.concat(list);
+					console.log(arr);
+					
+					if (navItem.limit == data.list.data.length) {
+						//判断是否还有数据， 有改为 more， 没有改为noMore
+						navItem.loadingType = 'more';
+						navItem.page++;
+					} else {
+						//判断是否还有数据， 有改为 more， 没有改为noMore
+						navItem.loadingType = 'noMore';
+					}
+					this.$set(navItem, 'loaded', true);
+					
+				})
+			}
+		}
+	}
 </script>
 
-<style>
+<style lang="scss" scoped>
+	page {
+		height: 100%;
+		background-color: #eee;
+		padding-top: 20rpx;
+	}
+
+	.content {
+		height: 100%;
+
+		background-color: #fff;
+
+		.nav-bar {
+			line-height: 86rpx;
+			font-size: 32rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #333333;
+			justify-content: space-around;
+			border-bottom: #E0E0E0 1px solid;
+
+			.active {
+				color: #3F7C1F;
+				border-bottom: 3rpx solid #3F7C1F;
+			}
+
+			.nav-item {
+				// flex-grow: 1;
+				text-align: center;
+			}
+		}
+	}
+
+	.swiper-wrapper {
+		background-color: #eee;
+	
+		.scroll-wrapper {
+				padding: 0 22rpx 0 23rpx;
+		}
+		.list {
+			padding: 18rpx 0;
+			border-bottom: 1px solid #E0E0E0;
+			.list-top-tit {
+				font-size: 32rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #333333;
+				line-height: 42rpx;
+			}
+
+			.list-top-img {
+				margin-top: 15rpx;
+				width: 705rpx;
+				height: 399rpx;
+				background-color: #999;
+			}
+
+			.list-top-time {
+				font-size: 26rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #999999;
+				line-height: 32rpx;
+			}
+			
+			.list-scend {
+				display: flex;
+				.list-img {
+					flex-shrink: 0;
+					background-color: #999;
+					width: 224rpx;
+					height: 160rpx;
+				}
+				.list-info {
+					padding:10rpx 0 19rpx 23rpx;
+					position: relative;
+					.list-tit {
+						width: 420rpx;
+						font-size: 32rpx;
+						font-family: PingFang SC;
+						font-weight: bold;
+						color: #333333;
+						line-height: 32px;
+					}
+					.list-time {
+						font-size: 28rpx;
+						font-family: PingFang SC;
+						font-weight: 500;
+						color: #666666;
+						line-height: 32rpx;
+						position: absolute;
+						bottom: 19rpx;
+					}
+				}
+				
+			}
+		}
+	}
 </style>

pages/story/storyDetail.vue

@@ -0,0 +1,111 @@
+<template>
+	<view class="content">
+		<view class="top">
+			<image src="" mode=""></image>
+		</view>
+		<view class="detail">
+			<view class="detail-top">
+				<view class="tit">
+					正一健康竹胎酵素饮正一健康竹胎酵素饮正
+				</view>
+				<view class="time">
+					更新时间:2019-12-06
+				</view>
+			</view>
+			<view class="jg">
+				
+			</view>
+			<view class="detail-content" v-html="content">
+				
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {article,details} from '@/api/index.js'
+	export default {
+		data() {
+			return {
+				content: '正一健康竹胎酵素饮正一健康竹胎酵素饮正正一健康竹胎酵素饮正一健康竹胎酵素饮正正一健康竹胎酵素饮正一健康竹胎酵素饮正正一健康竹胎酵素饮正一健康竹胎酵素饮正',
+				detail: {},
+			}
+			
+		},
+		onLoad(opt) {
+			if(opt.id) {
+				this.getDetail(opt.id)
+			}
+		},
+		methods: {
+			getDetail(id) {
+				let obj = this
+				details({},id).then( res => {
+					obj.content = res.data.content
+					obj.detail = res.data
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	page {
+		height: 100%;
+	}
+	.content {
+		background-color: #fff;
+		height: 100%;
+		.top {
+			width: 750rpx;
+			height: 668rpx;
+			image {
+				width: 100%;
+				height: 100%;
+				background-color: #999;
+			}
+		}
+		.detail {
+			position: relative;
+			top: -57rpx;
+			.jg {
+				width: 670rpx;
+				height: 2rpx;
+				background: #F5F5F5;
+				margin: auto;
+			}
+			.detail-top {
+				min-height: 190rpx;
+				padding: 57rpx 40rpx 40rpx;
+				background-color: #fff;
+				border-radius: 30rpx 30rpx 0 0;
+				.tit {
+					font-size: 48rpx;
+					font-family: PingFang SC;
+					font-weight: 500;
+					color: #333333;
+					line-height: 51rpx;
+				}
+				.time {
+					padding-top: 10rpx;
+					font-size: 26rpx;
+					font-family: PingFang SC;
+					font-weight: 500;
+					color: #999;
+					line-height: 51rpx;
+				}
+			}
+			.detail-content {
+				font-size: 28rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #333333;
+				line-height: 48rpx;
+				padding: 37rpx 40rpx;
+				* {
+					max-width: 100%;
+				}
+			}
+		}
+	}
+</style>

pages/user/jiedian.vue

@@ -0,0 +1,34 @@
+<template>
+	<view class="container">
+		<view class="jiedianbackground">
+			<image src="../../static/image/jiedian.png" mode=""></image>
+		</view>
+		
+	</view>
+</template>
+
+<script>
+	export default{
+		data(){
+			return{}
+		},
+		methods:{}
+	}
+</script>
+
+<style lang="scss">
+	page{
+		padding: 0;
+		margin: 0;
+		background-color: #FFFFFF;
+	}
+	.container{
+		height: 100%;
+	}
+	.jiedianbackground{
+		image{
+			width: 100%;
+			height: 100%;
+		}
+	}
+</style>

pages/user/user.vue

@@ -11,8 +11,8 @@
 					<image src="../../static/error/missing-face.png" mode=""></image>
 					<view class="info-box">
 						<view class="username">李丹丹</view>
-							<view class="phone">13911111111</view>
-						</view>
+						<view class="phone">13911111111</view>
+					</view>
 				</view>
 				<!-- 设置 -->
 				<view class="infor-right">
@@ -73,152 +73,202 @@
 				<view class="ul-btm">
 					<image src="../../static/img/img27.png" mode="scaleToFill"></image>
 					<view class="text">我的接点</view>
-						<image class="jiantou" src="../../static/img/img32.png" mode="scaleToFill"></image>
-					</view>
+					<image class="jiantou" src="../../static/img/img32.png" mode="scaleToFill"></image>
+				</view>
 				<view class="ul-btm">
 					<image src="../../static/img/img28.png" mode="scaleToFill"></image>
 					<view class="text">邀请海报</view>
 					<image class="jiantou" src="../../static/img/img32.png" mode="scaleToFill"></image>
-					</view>
+				</view>
 				<view class="ul-btm">
 					<image src="../../static/img/img29.png" mode="scaleToFill"></image>
 					<view class="text">会员注册</view>
 					<image class="jiantou" src="../../static/img/img32.png" mode="scaleToFill"></image>
-					</view>
+				</view>
 				<view class="ul-btm">
 					<image src="../../static/img/img30.png" mode="scaleToFill"></image>
 					<view class="text">收货地址</view>
 					<image class="jiantou" src="../../static/img/img32.png" mode="scaleToFill"></image>
-					</view>
+				</view>
 				<view class="ul-btm">
 					<image src="../../static/img/img31.png" mode="scaleToFill"></image>
 					<view class="text">联系客服</view>
 					<image class="jiantou" src="../../static/img/img32.png" mode="scaleToFill"></image>
-					</view>
+				</view>
 			</view>
 		</view>
-	</view>
-</template>
-
+	</view>
+</template>
+
 <script>
-export default {
-	data () {
-		return {}
-	},
-	methods: {
-		nav (url) {
-			uni.navigateTo({
-				url
-			})
+	export default {
+		data() {
+			return {}
+		},
+		methods: {
+			nav(url) {
+				uni.navigateTo({
+					url
+				})
+			}
 		}
 	}
-}
-</script>
-
+</script>
+
 <style lang="scss">
-.container {
-	background-color: #fff;
-}
-.user {
-	image {
+	.container {
+		background-color: #fff;
+	}
+
+	.user {
+		image {
 			width: 750rpx;
 			height: 480rpx;
 			position: relative;
-	}
-	.infor {
-		height: 126.5rpx;
-		width: 100%;
-		// background-color: pink;
-		display: flex;
-		position: absolute;
-		top: 0;
-		display: flex;
-		justify-content: space-around; // 水平平均分布
-		align-items: center;   // 垂直居中 
-		margin-top: 138rpx;
-		.infor-left {
-			width: 100%;
+		}
+
+		.infor {
 			height: 126.5rpx;
+			width: 100%;
+			// background-color: pink;
 			display: flex;
-			align-items: center;
-			padding-left: 23rpx;
-			image {
-				width: 126.5rpx;
+			position: absolute;
+			top: 0;
+			display: flex;
+			justify-content: space-around; // 水平平均分布
+			align-items: center; // 垂直居中 
+			margin-top: 138rpx;
+
+			.infor-left {
+				width: 100%;
 				height: 126.5rpx;
+				display: flex;
+				align-items: center;
+				padding-left: 23rpx;
+
+				image {
+					width: 126.5rpx;
+					height: 126.5rpx;
+				}
+
+				.info-box {
+					margin-left: 21rpx;
+				}
+
+				.username {
+					font-size: 34rpx;
+					font-family: PingFang SC;
+					font-weight: bold;
+					color: #3F7C1F;
+				}
+
+				.phone {
+					font-size: 26rpx;
+					font-family: PingFang SC;
+					font-weight: 500;
+					color: #3F7C1F;
+				}
 			}
-			.info-box{
-				margin-left: 21rpx;
-			}
-			.username {
-				font-size: 34rpx;
-				font-family: PingFang SC;
-				font-weight: bold;
-				color: #3F7C1F;
-			}
-			.phone {
-				font-size: 26rpx;
-				font-family: PingFang SC;
-				font-weight: 500;
-				color: #3F7C1F;
+
+			.infor-right {
+				width: 165rpx;
+				height: 64rpx;
+				background: #FFFFFF;
+				border-radius: 32px 0px 0px 32px;
+				display: flex;
+				align-items: center; // 垂直居中 
+				padding-left: 20rpx;
+
+				image {
+					width: 32rpx;
+					height: 31rpx;
+				}
+
+				.setting {
+					font-size: 28rpx;
+					font-family: PingFang SC;
+					font-weight: 500;
+					color: #3F7C1F;
+					padding-left: 10rpx;
+				}
 			}
 		}
-		.infor-right {
-			width: 165rpx;
-			height: 64rpx;
+
+		// 我的订单
+		.order-box {
+			width: 710rpx;
+			height: 221rpx;
 			background: #FFFFFF;
-			border-radius: 32px 0px 0px 32px;
-			display: flex;
-			align-items: center;   // 垂直居中 
-			padding-left: 20rpx;
-			image {
-				width: 32rpx;
-				height: 31rpx;
+			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(50, 50, 52, 0.06);
+			border-radius: 20rpx;
+			position: absolute;
+			top: 335rpx;
+			// display: flex;
+			// justify-content: center; // 水平居中
+			margin-left: 20rpx;
+
+			.my-order {
+				height: 73rpx;
+				width: 100%;
+				border-bottom: 2rpx solid #F5F5F5;
+				display: flex;
+				align-items: center;
+				justify-content: flex-start;
+
+				.order {
+					font-size: 30rpx;
+					font-family: PingFang SC;
+					font-weight: bold;
+					color: #333333;
+					margin-left: 36rpx;
+					margin-right: 520rpx;
+				}
+
+				image {
+					width: 12rpx;
+					height: 22rpx;
+				}
 			}
-			.setting {
-				font-size: 28rpx;
-				font-family: PingFang SC;
-				font-weight: 500;
-				color: #3F7C1F;
-				padding-left: 10rpx;
+
+			.order-section {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+
+				.order-item {
+					flex: 1;
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					justify-content: center;
+					margin-top: 30rpx;
+
+					image {
+						width: 42rpx;
+						height: 42rpx;
+					}
+
+					.text {
+						margin-top: 20rpx;
+						font-size: 24rpx;
+						color: #333333;
+					}
+				}
 			}
 		}
 	}
-	// 我的订单
-	.order-box {
-		width: 710rpx;
-		height: 221rpx;
-		background: #FFFFFF;
-		box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(50, 50, 52, 0.06);
-		border-radius: 20rpx;
-		position: absolute;
-		top: 335rpx;
-		// display: flex;
-		// justify-content: center; // 水平居中
-		margin-left: 20rpx;
-		.my-order {
-			height: 73rpx;
-			width: 100%;
-			border-bottom: 2rpx solid #F5F5F5;
-			display: flex;
-			align-items: center;
-			justify-content: flex-start;
-			.order {
-				font-size: 30rpx;
-				font-family: PingFang SC;
-				font-weight: bold;
-				color: #333333;
-				margin-left: 36rpx;
-				margin-right: 520rpx;
-			}
-			image {
-				width: 12rpx;
-				height: 22rpx;
-			}
-		}
+
+	.item-box {
+		padding-top: 80rpx;
+		height: 900rpx;
+
+		// background-color: #fff;
+		// background-color: pink;
 		.order-section {
 			display: flex;
 			align-items: center;
-			justify-content: space-between;
+			justify-content: space-between; // 水平平均分布
+
 			.order-item {
 				flex: 1;
 				display: flex;
@@ -226,71 +276,48 @@ export default {
 				align-items: center;
 				justify-content: center;
 				margin-top: 30rpx;
+
 				image {
-					width: 42rpx;
-					height: 42rpx;
+					width: 90rpx;
+					height: 90rpx;
 				}
+
 				.text {
-					margin-top: 20rpx;
-					font-size: 24rpx;
-					color: #333333;
+					margin-top: 10rpx;
+					font-size: 26rpx;
+					color: #3B3B3B;
 				}
 			}
 		}
 	}
-}
-.item-box {
-	padding-top: 80rpx;
-	height: 900rpx;
-	// background-color: #fff;
-	// background-color: pink;
-	.order-section {
-		display: flex;
-		align-items: center;
-		justify-content: space-between; // 水平平均分布
-		.order-item {
-			flex: 1;
+
+	.btm {
+		margin-top: 40rpx;
+		padding-bottom: 200rpx;
+		margin-left: 42rpx;
+
+		.ul-btm {
+			width: 100%;
+			height: 100rpx;
 			display: flex;
-			flex-direction: column;
-			align-items: center;
-			justify-content: center;
-			margin-top: 30rpx;
+			// justify-content: center; // 水平居中
+			align-items: center; // 水平居中
+
+			// justify-content: center; // 垂直居中
 			image {
-				width: 90rpx;
-				height: 90rpx;
+				width: 35rpx;
+				height: 35rpx;
 			}
+
 			.text {
-				margin-top: 10rpx;
-				font-size: 26rpx;
-				color: #3B3B3B;
+				margin-right: 468rpx;
+				margin-left: 30rpx;
+			}
+
+			.jiantou {
+				width: 16rpx;
+				height: 30rpx;
 			}
 		}
 	}
-}
-.btm {
-	margin-top: 40rpx;
-	padding-bottom: 200rpx;
-	margin-left: 42rpx;
-	.ul-btm {
-		width: 100%;
-		height: 100rpx;
-		display: flex;
-		// justify-content: center; // 水平居中
-		align-items: center; // 水平居中
-		// justify-content: center; // 垂直居中
-		image {
-			width: 35rpx;
-			height: 35rpx;
-		}
-		.text {
-			margin-right: 468rpx;
-			margin-left: 30rpx;
-		}
-		.jiantou {
-			width: 16rpx;
-			height: 30rpx;
-		}
-	}
-}
-
 </style>

uni.scss

@@ -4,7 +4,7 @@ $page-row-spacing: 30rpx;
 $page-color-base: #f8f8f8;//页面背景颜色
 $page-color-light: #f8f6fc;
 // 主题颜色
-$base-color: #5dbc7c;//项目颜色
+$base-color: #6EAB4E;//项目颜色
 $box-shadow-color:#5dbc7c;//阴影颜色
 $font-color:#5dbc7c;//字体颜色
 $font-color-spec: #5dbc7c;//可操作文字颜色