修改样式

App.vue

@@ -12,12 +12,14 @@
 </script>
 
 <style lang="scss">
+	// 公共css
 	@import url("common.scss");
-	/*每个页面公共css */
+	
 	body{
 		background-color: #f7f7f7;
 		font-size: 30rpx;
 	}
+	
 	.page{
 		padding-top: var(--window-top);
 	}

api/api.js

@@ -48,9 +48,9 @@ export function api(key, data, callback, loadingTitle) {
 	//必须登录
 	if (req.auth) {
 		if (!uni.getStorageSync('token')) {
-			utils.toLogin()
-			console.error('需要登录')
-			return
+			// utils.toLogin()
+			// console.error('需要登录')
+			// return
 		}
 	}
 	

api/http.js

@@ -25,24 +25,23 @@ function http(uri, data, callback, method = 'GET', showLoading, title) {
 				uni.hideLoading();
 			}
 			
-			if(res.statusCode == 401 || 
-			res.data.message == '操作失败，token非法无效!' || 
-			res.data.message == '操作失败，用户不存在!'){
-				uni.removeStorageSync('token')
-				console.error('登录过期');
-				utils.toLogin()
-			}
-			
-			if(res.statusCode == 200 && res.data.code != 200
-			&& res.data.code != 902){
-				uni.showToast({
-					mask: true,
-					duration: 1000,
-					title: res.data.message,
-					icon:'none'
-				});
-			}
+			// if(res.statusCode == 401 || 
+			// res.data.message == '操作失败，token非法无效!' || 
+			// res.data.message == '操作失败，用户不存在!'){
+			// 	uni.removeStorageSync('token')
+			// 	console.error('登录过期');
+			// 	utils.toLogin()
+			// }
 			
+			// if(res.statusCode == 200 && res.data.code != 200
+			// && res.data.code != 902){
+			// 	uni.showToast({
+			// 		mask: true,
+			// 		duration: 1000,
+			// 		title: res.data.message,
+			// 		icon:'none'
+			// 	});
+			// }
 			callback(res.data)
 		},
 		

components/base/tabbar.vue

@@ -1,19 +1,14 @@
 <template>
-	<view class="">
-		<view class="tabbar-box"></view>
+	<view class="tabbar-box">
 		<view class="tabbar">
-			<view
-			 :class="{item : true, active : select == item.key}"
-			 v-for="(item, index) in list"
-			 :key="index"
-			 v-if="!item.isNotShop || !userShop"
-			 @click="toPath(item, index)">
-				<view class="icon">
+			<view :class="{ 'tabbar-active' : select == item.key}" v-for="(item, index) in list" :key="index"
+				v-if="!item.isNotShop || !userShop" @click="toPath(item, index)" class="tabbar-item">
+				<view class="tabbar-icon">
 					<image :src="select == item.key ? 
 					item.selectedIconPath : 
-					item.iconPath" class="icon-image" mode=""></image>
+					item.iconPath" class="tabbar-icon-image" mode="aspectFill"></image>
 				</view>
-				<view class="title">
+				<view class="tabbar-title">
 					{{ item.title }}
 				</view>
 			</view>
@@ -22,64 +17,51 @@
 </template>
 
 <script>
-	import { mapGetters } from 'vuex'
+	import {
+		mapGetters
+	} from 'vuex'
 	export default {
-		name:"tabbar",
-		props : ['select'],
-		computed : {
+		name: "tabbar",
+		props: ['select'],
+		computed: {
 			...mapGetters(['userShop']),
 		},
 		data() {
 			return {
-				list : [
-					{
-						"selectedIconPath": "/static/image/tabbar/home-a.png",
+				list: [{
+						"selectedIconPath": "/static/image/tabbar/home-active.png",
 						"iconPath": "/static/image/tabbar/home.png",
 						"pagePath": "/pages/index/index",
 						"title": "首页",
-						key : 'home',
+						key: 'home',
 					},
-					// {
-					// 	"selectedIconPath": "/static/image/tabbar/member-a.png",
-					// 	"iconPath": "/static/image/tabbar/member.png",
-					// 	"pagePath": "/pages/index/member",
-					// 	"title": "会员",
-					// 	key : 'member',
-					// },
-					// {
-					// 	"selectedIconPath": "/static/image/tabbar/cart-a.png",
-					// 	"iconPath": "/static/image/tabbar/cart.png",
-					// 	"pagePath": "/pages/index/cart",
-					// 	"title": "购物车",
-					// 	key : 'cart',
-					// },
 					{
-						"selectedIconPath": "/static/image/tabbar/home-a.png",
-						"iconPath": "/static/image/tabbar/home.png",
+						"selectedIconPath": "/static/image/tabbar/product-list-active.png",
+						"iconPath": "/static/image/tabbar/product-list.png",
 						"pagePath": "/pages/index/category",
-						"title": "分类",
-						key : 'category',
+						"title": "商品列表",
+						key: 'category',
 					},
 					{
-						"selectedIconPath": "/static/image/tabbar/home-a.png",
-						"iconPath": "/static/image/tabbar/home.png",
+						"selectedIconPath": "/static/image/tabbar/order-active.png",
+						"iconPath": "/static/image/tabbar/order.png",
 						"pagePath": "/pages/index/order",
 						"title": "订单",
-						key : 'order',
+						key: 'order',
 					},
 					{
-						"selectedIconPath": "/static/image/tabbar/center-a.png",
-						"iconPath": "/static/image/tabbar/center.png",
+						"selectedIconPath": "/static/image/tabbar/user-center-active.png",
+						"iconPath": "/static/image/tabbar/user-center.png",
 						"pagePath": "/pages/index/center",
 						"title": "我的",
-						key : 'center',
+						key: 'center',
 					}
 				]
 			};
 		},
-		methods : {
-			toPath(item, index){
-				if(item.key == this.select){
+		methods: {
+			toPath(item, index) {
+				if (item.key == this.select) {
 					return
 				}
 				uni.reLaunch({
@@ -91,49 +73,55 @@
 </script>
 
 <style scoped lang="scss">
-.tabbar-box{
-	height: 120rpx;
-	padding-bottom: env(safe-area-inset-bottom);
-}
-.tabbar{
-	position: fixed;
-	width: 750rpx;
-	background-color: #fff;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	flex-direction: row;
-	height: 120rpx;
-	padding-bottom: env(safe-area-inset-bottom);
-	z-index: 999999;
-	bottom: 0;
-	left: 0;
-	color: #BCBCBC;
-	.item{
-		flex: 1;
-		display: flex;
-		flex-direction: column;
-		justify-content: center;
-		align-items: center;
-		.icon{
-			width: 54rpx;
-			height: 54rpx;
-			.icon-image{
-				width: 54rpx;
-				height: 54rpx;
+	.tabbar-box {
+		height: 120rpx;
+		padding-bottom: env(safe-area-inset-bottom);
+
+		.tabbar {
+			position: fixed;
+			width: 750rpx;
+			background-color: #fff;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			flex-direction: row;
+			height: 120rpx;
+			padding-bottom: env(safe-area-inset-bottom);
+			z-index: 999999;
+			bottom: 0;
+			left: 0;
+			color: #BCBCBC;
+
+			.tabbar-item {
+				flex: 1;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+
+				.tabbar-icon {
+					width: 54rpx;
+					height: 54rpx;
+
+					.tabbar-icon-image {
+						width: 54rpx;
+						height: 54rpx;
+					}
+				}
+
+				.tabbar-title {
+					overflow: hidden;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+					-o-text-overflow: ellipsis;
+					font-size: 23rpx;
+					line-height: 35rpx;
+				}
+			}
+
+			.tabbar-active {
+				color: $uni-color !important;
 			}
-		}
-		.title{
-			overflow: hidden;
-			white-space: nowrap;
-			text-overflow: ellipsis;
-			-o-text-overflow: ellipsis;
-			font-size: 23rpx;
-			line-height: 35rpx;
 		}
 	}
-}
-.active{
-	color: $uni-color !important;
-}
 </style>

components/couponPopup/couponPopup.vue

@@ -0,0 +1,133 @@
+<!-- 优惠券弹窗 -->
+<template>
+	<view class="couponPopup">
+		<uv-overlay :show="show" :z-index="999999">
+			<view class="couponPopup-wrapper">
+				<view class="main-container">
+					<view class="body">
+						<image src="@/pages_order/static/coupon/bg.png" mode="widthFix" class="coupon-bg"></image>
+						<image @click="closeCouponPopup" src="@/pages_order/static/coupon/close-btn.png" mode="widthFix"
+							class="close-btn">
+						</image>
+						<view class="coupon-money">
+							<text class="unit">￥</text>
+							<view class="money">
+								20
+							</view>
+						</view>
+						<image src="@/pages_order/static/coupon/register-success.png" mode="widthFix"
+							class="register-success"></image>
+						<view class="shopping">（购物即可抵扣！）</view>
+					</view>
+					<image src="@/pages_order/static/coupon/examine.png" mode="widthFix" class="examine"></image>
+				</view>
+			</view>
+		</uv-overlay>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "CouponPopup",
+		data() {
+			return {}
+		},
+		methods: {
+			//关闭新人优惠券活动
+			closeCouponPopup() {
+				this.show = false;
+			}
+		},
+		computed: {
+			show: {
+				get() {
+					return this.value;
+				},
+				set(newValue) {
+					this.$emit('input', newValue);
+				}
+			}
+		},
+		props: {
+			value: {
+				type: Boolean,
+				default: false
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.couponPopup {
+		.couponPopup-wrapper {
+			width: 100%;
+			height: 100vh;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+
+			.main-container {
+				.body {
+					position: relative;
+
+					.coupon-bg {}
+
+					.close-btn {
+						position: absolute;
+						right: 0;
+						top: 0;
+						width: 50rpx;
+						height: 50rpx;
+					}
+
+					.coupon-money {
+						display: flex;
+						justify-content: center;
+						align-items: flex-end;
+						position: absolute;
+						left: 50%;
+						top: 34%;
+						width: 40%;
+						color: #FF6733;
+						transform: translateX(-30%);
+						font-weight: bold;
+
+						.unit {
+							font-size: 40rpx;
+						}
+
+						.money {
+							font-size: 120rpx;
+							line-height: 120rpx;
+						}
+					}
+
+					.register-success {
+						position: absolute;
+						top: 7%;
+						left: 50%;
+						transform: translateX(-50%);
+						width: 80%;
+					}
+
+					.shopping {
+						position: absolute;
+						bottom: 5%;
+						left: 50%;
+						transform: translateX(-50%);
+						color: #FEF3DD;
+						text-align: center;
+						font-size: 40rpx;
+						width: 80%;
+					}
+				}
+
+				.examine {
+					display: block;
+					width: 70%;
+					margin: 20rpx auto;
+				}
+			}
+		}
+	}
+</style>

components/product/productItem.vue

@@ -70,6 +70,7 @@
 		display: flex;
 		box-sizing: border-box;
 		border-bottom: 1rpx solid #00000012;
+		background: white;
 
 		.item-image {
 			width: 140rpx;

components/user/productList.vue

@@ -1,133 +1,130 @@
 <template>
 	<view class="list">
-		<view class="item"
-		v-for="(item, index) in list"
-		@click="$utils.navigateTo('/pages_order/product/productDetail?id=' + item.id)"
-		:key="index">
-			<image 
-			class="image"
-			:src="item.image &&
+		<view class="item" v-for="(item, index) in list"
+			@click="$utils.navigateTo('/pages_order/product/productDetail?id=' + item.id)" :key="index">
+			<image class="image" :src="item.image &&
 			item.image.split(',')[0]" mode="aspectFill"></image>
-			<view class="info">
-				<view class="title">
+			<view class="product-info">
+				<view class="product-title">
 					{{ item.title }}
 				</view>
-				<view style="display: flex;align-items: flex-end;">
-					<view class="price">
-						<text>￥{{ item.price }}</text>/件
-					</view>
-					<view class="oldPrice">
-						<text>￥{{ item.oldPrice }}</text>/件
-					</view>
-				</view>
-				<!-- <view class="favorable">
-					<view class="t">
-						限时优惠
+
+				<view class="product-main">
+					<view class="sale-information">
+						<view style="display: flex;align-items: flex-end;">
+							<view class="price">
+								<text>￥{{ item.price }}</text>/件
+							</view>
+							<view class="oldPrice">
+								<text>￥{{ item.oldPrice }}</text>/件
+							</view>
+						</view>
+						<view class="num">
+							已售卖5000+件
+						</view>
 					</view>
-					<view class="p">
-						￥48
+
+					<view class="btn">
+						购买
 					</view>
-				</view> -->
-				<view class="num">
-					已售卖5000+件
 				</view>
 			</view>
-			<view class="btn">
-				购买
-				<!-- <uv-icon name="shopping-cart"
-				color="#fff"></uv-icon> -->
-			</view>
 		</view>
 	</view>
 </template>
 
 <script>
 	export default {
-		name:"productList",
-		props : {
-			list : {
-				default : []
+		name: "productList",
+		props: {
+			list: {
+				default: []
 			},
 		},
 		data() {
 			return {
-				
+
 			};
 		},
-		methods : {
-			
+		methods: {
+
 		},
 	}
 </script>
 
 <style scoped lang="scss">
-.list{
-	display: flex;
-	flex-wrap: wrap;
-	.item{
-		position: relative;
-		width: 300rpx;
-		padding: 20rpx;
-		// padding-bottom: 50rpx;
-		background-color: #fff;
-		border-radius: 20rpx;
-		margin-top: 20rpx;
-		&:nth-child(odd){
-			margin-right: 20rpx;
-		}
-		.image{
-			width: 300rpx;
-			height: 250rpx;
+	.list {
+		display: flex;
+		flex-wrap: wrap;
+
+		.item {
+			position: relative;
+			width: 345rpx;
+			padding: 20rpx;
+			box-sizing: border-box;
+			background-color: #fff;
 			border-radius: 20rpx;
-		}
-		.info{
-			font-size: 24rpx;
-			.title{
-				font-size: 28rpx;
-				overflow:hidden; //超出的文本隐藏
-				text-overflow:ellipsis; //溢出用省略号显示
-				white-space:nowrap; //溢出不换行
-			}
-			.price{
-				color: $uni-color;
-				margin-top: 6rpx;
-				text{
-					font-size: 30rpx;
-					font-weight: 900;
-				}
-			}
-			.oldPrice{
-				color: #888;
-				text-decoration: line-through;
+			margin-left: 20rpx;
+
+			.image {
+				width: 300rpx;
+				height: 250rpx;
+				border-radius: 20rpx;
 			}
-			.favorable{
-				display: flex;
-				background-image: url(/static/image/product/favorable.png);
-				background-size: 100% 100%;
-				width: fit-content;
-				padding: 5rpx 10rpx;
-				font-size: 18rpx;
-				margin-top: 6rpx;
-				.p{
-					color: #fff;
-					margin-left: 10rpx;
+
+			.product-info {
+				font-size: 24rpx;
+
+				.product-title {}
+
+				.product-main {
+					display: flex;
+
+					.sale-information {
+						width: 75%;
+
+						.title {
+							font-size: 28rpx;
+							overflow: hidden; //超出的文本隐藏
+							text-overflow: ellipsis; //溢出用省略号显示
+							white-space: nowrap; //溢出不换行
+						}
+
+						.price {
+							color: $uni-color;
+							margin-top: 6rpx;
+
+							text {
+								font-size: 30rpx;
+								font-weight: 900;
+							}
+						}
+
+						.oldPrice {
+							color: #888;
+							text-decoration: line-through;
+						}
+
+						.num {
+							margin-top: 6rpx;
+							font-size: 22rpx;
+							color: #888;
+						}
+					}
+
+					.btn {
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						border-radius: 10rpx;
+						font-size: 24rpx;
+						height: 60rpx;
+						width: 25%;
+						color: #fff;
+						background-color: $uni-color;
+					}
 				}
 			}
-			.num{
-				margin-top: 6rpx;
-				font-size: 22rpx;
-				color: #888;
-			}
-		}
-		.btn{
-			padding: 10rpx 20rpx;
-			border-radius: 10rpx;
-			font-size: 24rpx;
-			color: #fff;
-			margin-left: auto;
-			width: fit-content;
-			background-color: $uni-color;
 		}
 	}
-}
 </style>

manifest.json

@@ -52,7 +52,7 @@
     "quickapp" : {},
     /* 小程序特有相关 */
     "mp-weixin" : {
-        "appid" : "wx0839bc52e7849c13",
+        "appid" : "wxf7152f59d366236b",
         "setting" : {
             "urlCheck" : false
         },

package.json

@@ -15,6 +15,8 @@
   "license": "ISC",
   "dependencies": {
     "ali-oss": "^6.21.0",
-    "dayjs": "^1.11.12"
+    "dayjs": "^1.11.12",
+    "swiper": "^5.4.5",
+    "vue-awesome-swiper": "^4.1.0"
   }
 }

pages.json

@@ -48,7 +48,12 @@
 	},
 	"subPackages": [{
 		"root": "pages_order",
-		"pages": [
+		"pages": [{
+				"path": "mine/card"
+			},
+			{
+				"path": "mine/partner"
+			},
 			{
 				"path": "order/orderDetail",
 				"style": {
@@ -82,23 +87,17 @@
 			{
 				"path": "home/journalism"
 			},
-			{
-				"path": "mine/recommend",
-				"style": {
-					"enablePullDownRefresh": true
-				}
-			},
 			{
 				"path": "home/introduce"
 			},
 			{
-				"path" : "home/newsDetail"
+				"path": "home/newsDetail"
 			},
 			{
-				"path" : "order/createOrder"
+				"path": "order/createOrder"
 			},
 			{
-				"path" : "mine/balance"
+				"path": "mine/balance"
 			},
 			{
 				"path": "mine/commission"
@@ -120,12 +119,21 @@
 			},
 			{
 				"path": "home/addEnterprise"
+			},
+			{
+				"path": "mine/memberCenter"
+			},
+			{
+				"path": "mine/recruit"
+			},
+			{
+				"path": "mine/moreCommodity"
 			}
 		]
 	}],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
-		"navigationBarTitleText": "酒店桌布",
+		"navigationBarTitleText": "珠宝商城",
 		"navigationBarBackgroundColor": "#F8F8F8",
 		"backgroundColor": "#F8F8F8",
 		"navigationStyle": "custom"

pages/index/category.vue

@@ -1,37 +1,32 @@
 <template>
 	<view class="page">
+		<!-- 导航栏 -->
 		<navbar title="商品列表" leftClick @leftClick="$utils.navigateBack" />
 
+		<!-- 搜索栏 -->
 		<view class="search">
-			<uv-search 
-			placeholder="搜你喜欢的产品" 
-			bgColor="#fff" 
-			@search="getData"
-			@custom="getData"
-			v-model="queryParams.title"></uv-search>
+			<uv-search placeholder="搜你喜欢的产品" bgColor="#fff" @search="getData" @custom="getData"
+				v-model="queryParams.title"></uv-search>
 		</view>
 
+		<!-- 分类商品列表 -->
 		<view class="category">
-			<uv-vtabs 
-			:list="category"
-			keyName="title"
-			:barItemBadgeStyle="{right:'20px',top:'12px'}" 
-			@change="change">
+			<uv-vtabs :list="category" keyName="title" :barItemBadgeStyle="{right:'20px',top:'12px'}" @change="change">
 				<uv-vtabs-item>
+					<!-- <view class="list">
+						<productItem v-for="(item, index) in list" :key="index" :item="item"
+							titleWidth="350rpx"
+							@click="$utils.navigateTo('/pages_order/product/productDetail?id=' + item.id)" />
+					</view> -->
 					<view class="list">
-						<productItem
-						v-for="(item, index) in list"
-						:key="index"
-						:item="item"
-						width="350rpx"
-						titleWidth="350rpx"
-						@click="$utils.navigateTo('/pages_order/product/productDetail?id=' + item.id)"
-						/>
+						<productItem v-for="(item, index) in list" :key="index" :item="item" titleWidth="350rpx"
+							@click="$utils.navigateTo('/pages_order/mine/moreCommodity')" />
 					</view>
 				</uv-vtabs-item>
 			</uv-vtabs>
 		</view>
-		
+
+		<!-- tabbar -->
 		<tabber select="category" />
 
 	</view>
@@ -40,28 +35,32 @@
 <script>
 	import productItem from '@/components/product/productItem.vue';
 	import mixinsList from '@/mixins/list.js'
-	import { mapState } from 'vuex'
+	import {
+		mapState
+	} from 'vuex'
 	import tabber from '@/components/base/tabbar.vue'
 	export default {
-		mixins : [mixinsList],
+		mixins: [mixinsList],
 		components: {
 			productItem,
 			tabber,
 		},
 		data() {
 			return {
-				mixinsListApi : 'getClassShopPageList',
+				mixinsListApi: 'getClassShopPageList',
 			}
 		},
 		computed: {
 			...mapState(['category'])
 		},
-		onLoad({search}) {
-			if(search){
+		onLoad({
+			search
+		}) {
+			if (search) {
 				this.queryParams.title = search
 			}
 			this.$store.commit('getCategoryList')
-			if(this.category.length > 0){
+			if (this.category.length > 0) {
 				this.queryParams.classId = this.category[0].id
 			}
 		},
@@ -75,14 +74,16 @@
 </script>
 
 <style scoped lang="scss">
-	.page{
-		/deep/ .uv-vtabs{
+	.page {
+		/deep/ .uv-vtabs {
 			height: calc(100vh - 470rpx) !important;
 		}
-		/deep/ .uv-vtabs__bar{
+
+		/deep/ .uv-vtabs__bar {
 			height: calc(100vh - 470rpx) !important;
 		}
-		/deep/ .uv-vtabs__content{
+
+		/deep/ .uv-vtabs__content {
 			height: calc(100vh - 470rpx) !important;
 		}
 
@@ -102,13 +103,21 @@
 				border-radius: 30rpx;
 			}
 		}
+
+		&::v-deep .uv-vtabs__content {
+			background: transparent !important;
+		}
 	}
+
 	.category {
 		font-size: 30rpx;
 		color: #333;
-		.list{
+
+		.list {
 			margin: 0 auto;
+			padding: 0rpx 20rpx;
+			box-sizing: border-box;
 		}
-		
+
 	}
 </style>

pages/index/center.vue

@@ -3,153 +3,147 @@
 
 		<navbar title="个人中心" />
 
+		<!-- 头部 -->
 		<view class="head">
 			<view class="headImage">
-				<image :src="userInfo.headImage" mode="aspectFill"></image>
+				<image :src="userInfo.headImage" mode="widthFix"></image>
 			</view>
-			<view class="info">
-				<view class="name">
-					<view class="one">{{ userInfo.nickName }}</view>
-					<!-- <view class="two">黄金会员</view> -->
-					<view class="two">
-						<image :src="configList[vipImage[userInfo.isPay]]" mode="widthFix"></image>
+
+			<view class="user-info">
+				<view class="user-base-info">
+					<view class="user-base-top">
+						<view class="user-name">倾心.临时决定离开军队费时费力士大夫</view>
+						<view class="member-level">
+							<image src="@/static/image/center/diamond-min.png" mode="widthFix" class="level"></image>
+							<image v-if="false" src="@/static/image/center/gold-min.png" mode="widthFix" class="level">
+							</image>
+							<image v-if="false" src="@/static/image/center/sliver-min.png" mode="widthFix"
+								class="level">
+							</image>
+						</view>
+						<view class="user-tag">
+							合伙人
+						</view>
+					</view>
+
+					<view class="edit-user">
+						<image src="@/static/image/center/edit-icon.png" mode="widthFix" class="edit-icon"></image>
+						<view class="edit-btn">
+							修改资料
+						</view>
 					</view>
 				</view>
-				<view class="vip">
-					ID：{{ userInfo.id }}
-				</view>
-				<view class="tips">
-					注册时间：{{ userInfo.createTime }}
+
+				<view class="user-phone">
+					手机号:1820000000
 				</view>
 			</view>
-			<!-- <view class="setting">
-				<uv-icon name="setting" size="40rpx"></uv-icon>
-			</view> -->
 		</view>
 
+		<!-- 会员卡片 -->
 		<view class="earnings">
-			<view class="member"
-			v-if="userInfo.isPay"
-			@click="$utils.navigateTo('/pages/index/member')">
-				<view>会员等级：{{ vipType[userInfo.isPay] }}</view>
-				<view>查看权益></view>
-			</view>
-			<view class="deposit">
-				<view class="box"
-					@click="$utils.navigateTo('/pages_order/mine/balance')">
-					<view>
-						<view class="num">{{ riceInfo.income || 0 }}</view>
-						<view class="text">收益明细(元)</view>
+			<view v-if="index==1" v-for="(item,index) in memberList" :key="item.id" class="member-item">
+				<image :src="item.memberBg" mode="widthFix" class="member-image"></image>
+
+				<view class="member-info">
+					<view class="profile-photo">
+						<image src="@/pages_order/static/card/profilePhoto.png" mode="widthFix" class="pro-img"></image>
+						<view class="open-status">
+							已开通29天
+						</view>
 					</view>
-					<view class="boxs">收益明细</view>
-				</view>
-				
-				<!-- <view class="box">
-					<view
-					@click="$utils.navigateTo('/pages_order/mine/balance')">
-						<view class="num">{{ riceInfo.balance || 0 }}</view>
-						<view class="text">余额(元)</view>
+					<view class="open">
+						剩余一天到期
 					</view>
-					<view class="boxs"
-					@click="$utils.navigateTo('/pages_order/mine/recharge')">去充值</view>
-				</view> -->
-				
-				<view class="box"
-				@click="clickNo">
-					<view>
-						<view class="num">{{ riceInfo.balance || 0 }}</view>
-						<view class="text">余额(元)</view>
-					</view>
-					<view class="boxs"
-					>去充值</view>
-				</view>
-
-				<view class="box">
-					<view
-					@click="$utils.navigateTo('/pages_order/mine/commission')">
-						<view class="num" style="border: none;">{{ riceInfo.canWithdraw || 0 }}</view>
-						<view class="text">可提现(元)</view>
-					</view>
-					<view class="boxs"
-					@click="$utils.navigateTo('/pages_order/mine/withdraw')">去提现</view>
 				</view>
 			</view>
 		</view>
 
-		<view class="myOrder">
-			<view>我的订单</view>
-			<view
-			@click="$utils.navigateTo('/pages/index/order')">
-				查看全部>
+		<!-- 佣金数据 -->
+		<view class="brokerage-data">
+			<view class="brokerage">
+				<image src="@/static/image/center/brokerage.png" mode="widthFix" class="brokerage-img"></image>
+
+				<div class="main">
+					<div class="title">我的佣金</div>
+					<div class="money">￥240</div>
+				</div>
+			</view>
+
+			<view class="balance">
+				<image src="@/static/image/center/balance.png" mode="widthFix" class="balance-img"></image>
+
+				<div class="main">
+					<div class="title">我的余额</div>
+					<div class="money">￥1200</div>
+				</div>
 			</view>
 		</view>
 
-		<view class="order">
+		<!-- 我的服务 -->
+		<view class="myServer">
+			<view class="server-title">
+				我的服务
+			</view>
+
 			<view class="box">
-				<view class="boxs" 
-				@click="$utils.navigateTo('/pages/index/order?type=1')">
-					<image src="../../static/image/center/13.png" mode="aspectFill" />
-					<view>待付款</view>
+				<view class="boxs" @click="$utils.navigateTo('/pages/index/order?type=1')">
+					<image src="@/static/image/center/1.png" mode="widthFix" />
+					<view class="title">我的订单</view>
 				</view>
-				<view class="boxs"
-				@click="$utils.navigateTo('/pages/index/order?type=2')">
-					<image src="../../static/image/center/14.png" mode="aspectFill" />
-					<view>已付款</view>
+				<view class="boxs" @click="$utils.navigateTo('/pages/index/order?type=2')">
+					<image src="@/static/image/center/2.png" mode="widthFix" />
+					<view class="title">我的团队</view>
 				</view>
-				<view class="boxs"
-				@click="$utils.navigateTo('/pages/index/order?type=3')">
-					<image src="../../static/image/center/15.png" mode="aspectFill" />
-					<view>待发货</view>
+				<view class="boxs" @click="$utils.navigateTo('/pages/index/order?type=3')">
+					<image src="@/static/image/center/3.png" mode="widthFix" />
+					<view class="title">联系客服</view>
 				</view>
-				<view class="boxs"
-				@click="$utils.navigateTo('/pages/index/order?type=4')">
-					<image src="../../static/image/center/16.png" mode="aspectFill" />
-					<view>待收货</view>
-				</view>
-				<view class="boxs"
-				@click="$utils.navigateTo('/pages/index/order?type=5')">
-					<image src="../../static/image/center/17.png" mode="aspectFill" />
-					<view>已完成</view>
+				<view class="boxs" @click="$utils.navigateTo('/pages/index/order?type=4')">
+					<image src="@/static/image/center/4.png" mode="widthFix" />
+					<view class="title">邀请好友</view>
 				</view>
 			</view>
-		</view>
 
-		<!-- 酒店 -->
-		<view class="user">
-			<view class="line grid">
-				<view class="title">
-					常用功能
+			<view class="box">
+				<view class="boxs" @click="$utils.navigateTo('/pages/index/order?type=1')">
+					<image src="@/static/image/center/5.png" mode="widthFix" />
+					<view class="title">广告招商</view>
+				</view>
+				<view class="boxs" @click="$utils.navigateTo('/pages/index/order?type=2')">
+					<image src="@/static/image/center/6.png" mode="widthFix" />
+					<view class="title">会员权益</view>
+				</view>
+				<view class="boxs" @click="$utils.navigateTo('/pages/index/order?type=3')">
+					<image src="@/static/image/center/7.png" mode="widthFix" />
+					<view class="title">优惠券</view>
+				</view>
+				<view class="boxs" @click="$utils.navigateTo('/pages/index/order?type=4')">
+					<image src="@/static/image/center/8.png" mode="widthFix" />
+					<view class="title">帮助与反馈</view>
 				</view>
 			</view>
-			<view class="cell-bottom">
-				<uv-cell-group>
-					<uv-cell icon="grid" title="我的邀请码" 
-					@click="$utils.navigateTo('/pages_order/mine/promotion')"
-					:isLink="true" arrow-direction="right" />
-					
-					<uv-cell icon="account" title="我的推荐" :isLink="true" arrow-direction="right"
-						@click="$utils.navigateTo('/pages_order/mine/recommend')" />
-					
-					<uv-cell icon="kefu-ermai" title="联系客服" 
-					@click="$refs.customerServicePopup.open()"
-					:isLink="true" arrow-direction="right" />
-					
-					<uv-cell
-					title="我的地址" 
-					icon="list-dot"
-					:isLink="true" 
-					arrow-direction="right" 
-					@click="$utils.navigateTo('/pages_order/mine/address')">
-					</uv-cell>
-					
-					<uv-cell icon="reload" title="退出登录" :isLink="true" arrow-direction="right"
-					@click="$store.commit('logout')"/>
-				</uv-cell-group>
-			</view>
-
 		</view>
 
-		<customerServicePopup ref="customerServicePopup"/>
+		<!-- 广告 -->
+		<div v-if="showAdvertising" class="ad">
+			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="true" :interval="2000"
+				:duration="duration">
+				<swiper-item v-for="item in 10">
+					<view class="swiper-main">
+						<view @click="closeAdvertising" class="close">
+							<image src="@/static/image/center/close.png" mode="widthFix" class="close-img"></image>
+						</view>
+						<image src="@/static/image/center/ad.png" mode="widthFix" class="swiper-main-img"></image>
+						<div class="ad-tag">
+							<image src="@/static/image/center/ad-tag.png" mode="widthFix" class="ad-tag-img"></image>
+						</div>
+					</view>
+				</swiper-item>
+			</swiper>
+		</div>
+
+		<customerServicePopup ref="customerServicePopup" />
 
 		<tabber select="center" />
 	</view>
@@ -157,7 +151,9 @@
 
 <script>
 	import tabber from '@/components/base/tabbar.vue'
-	import { mapState } from 'vuex'
+	import {
+		mapState
+	} from 'vuex'
 	import customerServicePopup from '@/components/config/customerServicePopup.vue'
 	export default {
 		components: {
@@ -169,8 +165,22 @@
 		},
 		data() {
 			return {
-				vipType : ['普通会员', '黄金会员', '渠道商'],
-				vipImage : ['vip_vip', 'vip_user', 'vip_shop']
+				vipType: ['普通会员', '黄金会员', '渠道商'],
+				vipImage: ['vip_vip', 'vip_user', 'vip_shop'],
+				memberList: [{
+						id: 1,
+						memberBg: "/pages_order/static/card/diamond.png",
+					},
+					{
+						id: 2,
+						memberBg: "/pages_order/static/card/gold.png",
+					},
+					{
+						id: 3,
+						memberBg: "/pages_order/static/card/silver.png",
+					}
+				],
+				showAdvertising: true,
 			}
 		},
 		onShow() {
@@ -178,11 +188,16 @@
 			this.$store.commit('getRiceInfo')
 		},
 		methods: {
-			clickNo(){
+			clickNo() {
 				uni.showModal({
 					title: '暂未开放',
 				})
 			},
+
+			//关闭广告
+			closeAdvertising() {
+				this.showAdvertising = false;
+			}
 		}
 	}
 </script>
@@ -190,249 +205,262 @@
 <style scoped lang="scss">
 	.page {
 
-		.warp {
+		// 头部
+		.head {
 			display: flex;
 			align-items: center;
-			justify-content: center;
-			height: 100%;
-		}
+			padding: 110rpx 20rpx;
+			background: $uni-color;
+
+			.headImage {
+				width: 130rpx;
+				height: 130rpx;
+				background-image: url(/static/image/center/head-img.png);
+				background-size: 100%;
+				overflow: hidden;
+				border-radius: 50%;
+				margin-right: 40rpx;
+				
+				image {
+					width: 100%;
+					height: 100%;
+				}
+			}
 
-		.rect {
-			width: 600rpx;
-			height: 300rpx;
-			background-color: #fff;
-			border-radius: 20rpx;
-			overflow: hidden;
+			.user-info {
+				width: calc(100% - 130rpx);
 
-			.title {
-				padding: 10rpx 0 0 15rpx;
-				background-color: #fd5100;
-				color: #FFF;
-				text-align: left;
-				width: 100%;
-				height: 18%;
-				font-size: 36rpx;
-			}
+				.user-base-info {
+					display: flex;
+					flex-wrap: wrap;
+					justify-content: space-between;
+
+					.user-base-top {
+						width: 65%;
+						display: flex;
+						align-items: center;
+						flex-wrap: wrap;
+						color: white;
+
+						.user-name {
+							max-width: calc(100% - 240rpx);
+							white-space: nowrap;
+							text-overflow: ellipsis;
+							overflow: hidden;
+							font-size: 34rpx;
+						}
+
+						.member-level {
+							margin-left: 10rpx;
+
+							.level {
+								width: 120rpx;
+							}
+						}
+
+						.user-tag {
+							display: flex;
+							align-items: center;
+							justify-content: center;
+							background: #000;
+							width: 100rpx;
+							height: 40rpx;
+							border-radius: 20rpx;
+							font-size: 24rpx;
+							margin-left: 10rpx;
+						}
+					}
 
-			.center {
-				height: 40%;
-				display: flex;
-				justify-content: center;
-				align-items: center;
-				font-size: 36rpx;
-			}
+					.edit-user {
+						width: 35%;
+						display: flex;
+						align-items: center;
+						justify-content: flex-end;
 
-			.bottom {
-				display: flex;
-				justify-content: center;
-				gap: 50rpx;
+						.edit-icon {
+							width: 30rpx;
+						}
+
+						.edit-btn {
+							color: white;
+							margin-left: 10rpx;
+						}
+					}
+				}
+
+				.user-phone {
+					color: white;
+					font-size: 24rpx;
+				}
 			}
 		}
-	}
 
+		// 会员卡片
+		.earnings {
+			padding: 20rpx;
+			box-sizing: border-box;
+			margin-top: -20%;
+
+			.member-item {
+				position: relative;
 
+				.member-image {
+					width: 100%;
+				}
 
-	image {
-		width: 100%;
-		height: 100%;
-	}
+				.member-info {
+					position: absolute;
+					bottom: 30rpx;
+					left: 0rpx;
+					display: flex;
+					align-items: center;
+					padding: 0rpx 40rpx;
+					box-sizing: border-box;
+					width: 100%;
 
-	.head {
-		display: flex;
-		background-color: #fff;
-		padding: 40rpx 20rpx;
-		align-items: center;
-		position: relative;
-
-		.headImage {
-			width: 130rpx;
-			height: 130rpx;
-			background-image: url(/static/image/center/3.png);
-			background-size: 100% 100%;
-			overflow: hidden;
-			border-radius: 50%;
-			margin-right: 40rpx;
+					.profile-photo {
+						display: flex;
+						justify-content: center;
+						align-items: center;
+
+						.pro-img {
+							width: 60rpx;
+							height: 60rpx;
+						}
+
+						.open-status {
+							color: #F8A95F;
+							border: 1px solid #F8A95F;
+							border-radius: 30rpx;
+							padding: 7rpx 20rpx;
+							margin-left: 10rpx;
+						}
+					}
+
+					.open {
+						font-size: 26rpx;
+						margin-left: 20rpx;
+					}
+				}
+			}
 		}
 
-		.info {
-			font-size: 28rpx;
+		// 佣金数据
+		.brokerage-data {
+			padding: 20rpx;
+			background: white;
+			border-radius: 20rpx;
 			display: flex;
-			flex-direction: column;
-			gap: 10rpx;
-			.vip {
-				color: #909294;
-				font-size: 24rpx;
-			}
+			flex-wrap: wrap;
+			box-sizing: border-box;
+			margin: 0rpx 20rpx 20rpx 20rpx;
 
-			.name {
+			.brokerage,
+			.balance {
 				display: flex;
-				align-items: center;
-				
-				.one {
-					color: #343140;
-					font-size: 32rpx;
-					font-weight: 600;
-					margin-right: 20rpx;
+				flex-wrap: wrap;
+				width: 50%;
+
+				.brokerage-img,
+				.balance-img {
+					width: 50%;
 				}
 
-				.two {
+				.main {
 					display: flex;
-					align-items: center;
-					justify-content: center;
-					flex-shrink: 0;
-					// font-size: 24rpx;
-					// margin-left: 10rpx;
-					// padding: 3rpx 16rpx;
-					// border-radius: 18rpx;
-					// background-color: rgb(252, 213, 157);
-					image{
-						width: 120rpx;
+					flex-direction: column;
+					justify-content: space-around;
+					width: 50%;
+					box-sizing: border-box;
+					padding: 30rpx 0rpx;
+
+					.title {
+						font-size: 34rpx;
 					}
-				}
-			}
 
-			.tips {
-				font-size: 26rpx;
-				color: #ABABAB;
+					.money {
+						font-size: 40rpx;
+						color: #DC2828;
+						font-weight: bold;
+					}
+				}
 			}
 		}
-	}
 
-	.setting {
-		position: absolute;
-		right: 50rpx;
-		top: 50rpx;
-	}
+		// 我的服务
+		.myServer {
+			margin: 0rpx 20rpx 20rpx 20rpx;
+			background: white;
+			border-radius: 20rpx;
+			padding: 20rpx;
+			box-sizing: border-box;
 
-	.earnings {
-		width: 94%;
-		margin-left: 3%;
-		
-		.member {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-			width: 90%;
-			margin-left: 5%;
-			height: 80rpx;
-			font-size: 28rpx;
-			background-color: #000;
-			color: #F9CF93;
-			border-top-left-radius: 30rpx;
-			border-top-right-radius: 30rpx;
-			view {
-				margin: 0 20rpx;
+			.server-title {
+				margin-bottom: 20rpx;
+				font-size: 34rpx;
 			}
-		}
-
-		.deposit {
-			display: flex;
-			justify-content: space-around;
-			align-items: center;
-			height: 300rpx;
-			// margin-top: -20rpx;
-			background-color: rgb(163, 201, 80);
-			border-radius: 40rpx;
 
 			.box {
 				display: flex;
-				height: 80%;
-				padding: 0rpx 30rpx;
-				text-align: center;
-				flex-direction: column;
+				width: 100%;
 				justify-content: space-around;
-				color: #fff;
-				border-right: 2rpx dashed;
-				flex: 1;
-				.num {
-					font-size: 48rpx;
-					// border-right: 2rpx dashed;
-					width: 100%;
-					padding: 0 30rpx 0 0;
-				}
-
-				.text {
-					font-size: 20rpx;
-				}
+				margin-bottom: 20rpx;
 
 				.boxs {
-					font-size: 32rpx;
-					background-color: rgb(252, 213, 157);
-					padding: 14rpx 20rpx;
-					border-radius: 30rpx;
-					color: #aa5500;
-					font-weight: 600;
+					width: 25%;
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
+					align-items: center;
+
+					image {
+						width: 60rpx;
+						height: 60rpx;
+						display: block;
+						margin: 0rpx auto 10rpx auto;
+					}
 				}
 
+				&:last-child {
+					margin-bottom: 0rpx;
+				}
 			}
 		}
-	}
 
-	.myOrder {
-		display: flex;
-		width: 94%;
-		margin-left: 3%;
-		align-items: center;
-		justify-content: space-between;
-		padding: 20rpx 0;
+		// 广告
+		.ad {
+			margin: 0rpx 20rpx;
 
-		view:nth-child(1) {
-			font-weight: 600;
-			font-size: 32rpx;
-			border-left: 7rpx solid #A3D250;
+			.swiper {
+				.swiper-main {
+					position: relative;
 
-		}
-
-		view:nth-child(2) {
-			font-size: 28rpx;
-			color: #A3D250;
-
-		}
-
-		view {
-			padding: 0 20rpx;
-		}
-	}
+					.close {
+						position: absolute;
+						top: 20rpx;
+						right: 20rpx;
 
-	.order {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		width: 94%;
-		margin-left: 3%;
-		background-color: #fff;
-		border-radius: 16rpx;
-
-		.box {
-			display: flex;
-			width: 100%;
-			justify-content: space-around;
-			padding: 70rpx 0 90rpx;
-
-		}
-	}
+						.close-img {
+							width: 40rpx;
+							height: 40rpx;
+						}
+					}
 
-	.user {
+					.swiper-main-img {
+						width: 100%;
+					}
 
-		.grid {
-			flexan class="o">-span>direction: column;
-			font-size: 26rpx;
-			padding: 20rpx;
+					.ad-tag {
+						position: absolute;
+						left: 20rpx;
+						bottom: 20rpx;
 
-			.title {
-				font-weight: 600;
-				padding: 10rpx;
-				border-left: 6rpx solid #A3D250;
+						.ad-tag-img {
+							width: 100rpx;
+						}
+					}
+				}
 			}
 		}
-
-		.cell-bottom {
-			width: 96%;
-			margin-top: 20rpx;
-			margin-left: 2%;
-			background-color: #fff;
-			border-radius: 20rpx;
-
-		}
 	}
 </style>

pages/index/index.vue

@@ -1,71 +1,97 @@
 <template>
-	<view class="page">
-
-		<navbar />
-
-		<!-- <view class="bg-color"></view> -->
-
-		<view class="page-title">
-			<!-- {{ configList.index_title }} -->
-			<!-- <image src="/static/image/home/logo.png" 
-			style="width: 240rpx;"
-			mode="widthFix"></image> -->
-			
-			<!-- <image :src="configList.index_img"
-			style="width: 240rpx;"
-			mode="widthFix"></image> -->
+	<view class="home">
+
+		<view style="background-color: white;">
+			<!-- 导航栏 -->
+			<navbar />
+
+			<!-- 搜索栏 -->
+			<view class="search">
+				<uv-search placeholder="搜你喜欢的产品" bgColor="#fff" @custom="search" @search="search"
+					v-model="keyword"></uv-search>
+			</view>
+
+			<!-- 轮播图 -->
+			<view class="swipe">
+				<uv-swiper :list="bannerList" indicator height="320rpx" keyName="image"></uv-swiper>
+			</view>
+
+			<!-- 首页-分类菜单 -->
+			<view class="home-menu">
+				<uv-grid :border="false" :col="5">
+					<uv-grid-item v-for="(item,index) in baseList" :key="index" @click="toUrl(item.url)">
+						<image :src="item.image" mode="aspectFill"></image>
+						<text class="menu-text">{{item.title}}</text>
+					</uv-grid-item>
+				</uv-grid>
+			</view>
 		</view>
 
-		<view class="search">
-			<uv-search 
-			placeholder="搜你喜欢的产品" 
-			bgColor="#fff" 
-			@custom="search"
-			@search="search"
-			v-model="keyword"></uv-search>
+		<!-- 新人专享 -->
+		<view class="new-people">
+			<view class="new-perple-top">
+				<view class="new-perple-top-left">
+					<view class="title">
+						新人专享
+					</view>
+					<view class="descript">
+						领199元大礼包
+					</view>
+				</view>
+				<view class="new-perple-top-right">
+					<image src="@/static/image/home/view-more.png" mode="widthFix"></image>
+				</view>
+			</view>
+			<view class="new-perple-main">
+				<view class="red-packet">
+					<image src="@/static/image/home/red-packet.png" mode="widthFix"></image>
+				</view>
+				<view v-for="item in 4" :key="item" class="activity">
+					<image src="@/static/image/home/necklace.png" mode="widthFix"></image>
+					<image src="@/static/image/home/exclusive.png" mode="widthFix"></image>
+					<view class="product-price">
+						￥100
+					</view>
+				</view>
+			</view>
 		</view>
 
-		<view class="swipe">
-			<uv-swiper 
-			:list="bannerList" 
-			indicator height="320rpx" 
-			keyName="image"></uv-swiper>
+		<!-- 视频 -->
+		<view class="video-line">
+			<view class="line"></view>
+			视频
 		</view>
-
-		<!-- <view class="notice">
-			<uv-notice-bar fontSize="32rpx" 
-			@click="$utils.navigateTo('/pages_order/home/notice')"
-			:text="notice"></uv-notice-bar>
-		</view> -->
-
-		<view class="menu">
-			<uv-grid :border="false" :col="4" >
-				<uv-grid-item v-for="(item,index) in baseList" :key="index" 
-				@click="toUrl(item.url)">
-					<image :src="item.image" mode="aspectFill"></image>
-					<text class="menu-text">{{item.title}}</text>
-				</uv-grid-item>
-			</uv-grid>
-		</view>
-
-		<view class="map"
-		v-if="configList.qd_image">
-			<image :src="configList.qd_image" mode="widthFix" />
+		<view class="video-list">
+			<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
+				<view v-for="item in 10" class="video-item">
+					<video src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
+						@error="videoErrorCallback" :danmu-list="danmuList" controls class="product-video"></video>
+				</view>
+			</scroll-view>
 		</view>
 
-		<view class="label">
-			<text>推荐宝贝</text>
+		<!-- 推荐 -->
+		<view class="recommend">
+			<view class="recommend-title">推荐宝贝</view>
+			<view class="recommend-more">更多</view>
 		</view>
 
+		<!-- 商品列表 -->
 		<view style="position: 20rpx;">
-			<productList :list="list"/>
+			<productList :list="commonProductList" />
 		</view>
-		
+
+		<!-- 全局弹框 -->
 		<PrivacyAgreementPoup />
-		
-		<customerServicePopup ref="customerServicePopup"/>
 
+		<!-- 隐私政策、用户协议弹框 -->
+		<customerServicePopup ref="customerServicePopup" />
+
+		<!-- tabbar -->
 		<tabber select="home" />
+		
+		<!-- 优惠券弹窗 -->
+		<couponPopup v-model="showCouponPopup"></couponPopup>
 	</view>
 </template>
 
@@ -73,30 +99,34 @@
 	import PrivacyAgreementPoup from '@/components/config/PrivacyAgreementPoup.vue'
 	import Position from '@/utils/position.js'
 	import tabber from '@/components/base/tabbar.vue'
-	import { mapState } from 'vuex'
+	import couponPopup from "@/components/couponPopup/couponPopup.vue"
+	import {
+		mapState
+	} from 'vuex'
 	import customerServicePopup from '@/components/config/customerServicePopup.vue'
 	import productList from '@/components/user/productList.vue'
 	import mixinsList from '@/mixins/list.js'
 	export default {
-		mixins : [mixinsList],
+		mixins: [mixinsList],
 		components: {
 			tabber,
 			PrivacyAgreementPoup,
 			customerServicePopup,
 			productList,
+			couponPopup
 		},
 		data() {
 			return {
 				notice: '',
 				bannerList: [],
-				baseList: [
-				],
+				baseList: [],
 				productList: [],
 				keyword: '',
-				commonProductList : [],//常规产品
-				riceProductList : [],//体验产品
-				newList : [],//新闻列表
-				mixinsListApi : 'getClassShopPageList',
+				commonProductList: [], //常规产品
+				riceProductList: [], //体验产品
+				newList: [], //新闻列表
+				mixinsListApi: 'getClassShophomeList',
+				showCouponPopup : true
 			}
 		},
 		computed: {},
@@ -108,144 +138,121 @@
 		onShow() {
 			this.getBanner()
 			this.getRiceNoticeList()
-			// this.getRiceCommonProductList()
-			// this.getRiceProductList()
-			// this.getRiceNewsList()
 			this.getRiceIconList()
+			this.getRiceCommonProductList()
 		},
 		onPullDownRefresh() {
 			this.getBanner()
 			this.getRiceNoticeList()
-			// this.getRiceCommonProductList()
-			// this.getRiceProductList()
-			// this.getRiceNewsList()
 		},
 		methods: {
 			// 搜素
-			search(){
+			search() {
 				uni.navigateTo({
-					url: '/pages/index/category?search=' + this.keyword
+					url: '/homes/index/category?search=' + this.keyword
 				})
 				this.keyword = ''
 			},
+
 			// 获取轮播图
-			getBanner(){
+			getBanner() {
 				this.$api('getRiceBanner', res => {
-					if(res.code == 200){
+					if (res.code == 200) {
 						this.bannerList = res.result
 					}
 				})
 			},
+
 			// 获取公告
-			getRiceNoticeList(){
+			getRiceNoticeList() {
 				this.$api('getRiceNoticeList', res => {
-					if(res.code == 200){
+					if (res.code == 200) {
 						this.notice = res.result.title
 					}
 				})
 			},
+
 			// 获取常规产品
-			getRiceCommonProductList(){
+			getRiceCommonProductList() {
 				this.$api('getRiceCommonProductList', res => {
 					uni.stopPullDownRefresh()
-					if(res.code == 200){
+					if (res.code == 200) {
 						this.commonProductList = res.result
 					}
 				})
 			},
+
 			// 获取首页体验产品
-			getRiceProductList(){
+			getRiceProductList() {
 				this.$api('getRiceProductList', res => {
-					if(res.code == 200){
+					if (res.code == 200) {
 						this.riceProductList = res.result
 					}
 				})
 			},
+
 			// 获取首页新闻列表
-			getRiceNewsList(){
+			getRiceNewsList() {
 				this.$api('getRiceNewsList', res => {
-					if(res.code == 200){
+					if (res.code == 200) {
 						this.newList = res.result.records
 					}
 				})
 			},
-			// 获取首页跳转图标
-			getRiceIconList(){
+
+			// 获取首页菜单图标
+			getRiceIconList() {
 				this.$api('getRiceIconList', res => {
-					if(res.code == 200){
-						this.baseList = res.result
+					if (res.code == 200) {
+						this.baseList = res.result.slice(0, 5)
 					}
 				})
 			},
-			toUrl(url){
-				if(!url){
+
+			//跳转
+			toUrl(url) {
+				if (!url) {
 					uni.showToast({
 						title: '功能暂未开放'
 					})
 					return
 				}
-				
-				if(url == '::phone'){
+
+				if (url == '::phone') {
 					this.$refs.customerServicePopup.open()
 					return
 				}
-				
+
 				uni.navigateTo({
 					url
 				})
 			},
-			saveImage(image){
-				/* 获取图片的信息 */
-				uni.getImageInfo({
-					src: image,
-					success: function(image) {
-						/* 保存图片到手机相册 */
-						uni.saveImageToPhotosAlbum({
-							filePath: image.path,
-							success: function() {
-								uni.showModal({
-									title: '保存成功',
-									content: '图片已成功保存到相册',
-									showCancel: false
-								});
-							},
-							complete(res) {
-								console.log(res);
-							}
-						});
-					}
-				});
+
+			//视频播放错误
+			videoErrorCallback: function(e) {
+				uni.showModal({
+					content: e.target.errMsg,
+					showCancel: false
+				})
+			},
+
+			//左右滚动视频
+			scroll: function(e) {
+
 			},
 		},
 	}
 </script>
 
 <style scoped lang="scss">
-	.page {
-		position: relative;
-		.bg-color {
-			width: 100%;
-			position: absolute;
-			top: 0;
-			left: 0;
-			height: 550rpx;
-			background: linear-gradient(to bottom, #E3441A, #E3441A, #fff);
-		}
-
-		.page-title {
-			position: relative;
-			margin-left: 30rpx;
-			// margin-bottom: 30rpx;
-			font-size: 34rpx;
-			font-weight: 900;
-		}
+	.home {
 
+		// 搜索栏
 		.search {
-			position: relative;
-			background: #FFFFFF;
+			border: 1px solid #F0F0F0;
 			margin: 20rpx;
 			border-radius: 41rpx;
-			padding: 10rpx 20rpx;
+			padding: 10rpx 0rpx;
 			display: flex;
 			align-items: center;
 
@@ -257,19 +264,19 @@
 			}
 		}
 
+		// 轮播图
 		.swipe {
-			position: relative;
 			overflow: hidden;
 			border-radius: 20rpx;
 			margin: 20rpx;
 		}
 
-		.menu {
+		// 首页-分类菜单
+		.home-menu {
 			margin: 20rpx;
 			border-radius: 20rpx;
-			padding: 20rpx;
+			padding: 20rpx 0rpx;
 			background-color: #fff;
-			box-shadow: 0 0 10rpx 10rpx #00000009;
 
 			image {
 				width: 80rpx;
@@ -279,205 +286,130 @@
 
 			.menu-text {
 				font-size: 28rpx;
-				margin-bottom: 10rpx;
-				margin-top: 10rpx;
-			}
-		}
-
-		.notice {
-			margin: 0 20rpx;
-
-			/deep/ .uv-notice-bar {
-				background: linear-gradient(to right, #f9edc9, #dfedd6);
-				border-radius: 16rpx;
-			}
-
-			/deep/ .uv-notice {
-				padding: 14rpx 0;
-			}
-
-			/deep/ .uv-icon__icon {
-				font-size: 36rpx !important;
-				color: #000 !important;
+				margin: 10rpx 0rpx;
 			}
 		}
 
-		.map {
-			margin: 20rpx;
-			border-radius: 16rpx;
-
-			image {
-				width: 100%;
-			}
-		}
-		
-		.label{
-			margin: 20rpx 0;
-			padding: 30rpx;
-			background-color: #fff;
-			display: flex;
-			justify-content: space-between;
-			text{
-				font-weight: 900;
-			}
-			.more{
-				color: $uni-color;
-			}
-		}
-
-		.commodity {
-			display: flex;
-			justify-content: center;
-			align-items: center;
-			margin: 20rpx;
-			border-radius: 16rpx;
-			background-color: #fff;
+		// 新人专享
+		.new-people {
+			background: white;
+			padding: 20rpx;
+			margin-bottom: 20rpx;
 
-			.box {
-				width: 100%;
-				margin: 20rpx;
+			.new-perple-top {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				margin-bottom: 20rpx;
 
-				.top {
+				.new-perple-top-left {
 					display: flex;
-					border-left: 6rpx solid #A3D250;
 					align-items: center;
-					justify-content: space-between;
-
-					.top-text {
-						margin-left: 20rpx;
-
-						view:nth-child(1) {
-							font-size: 24rpx;
-							color: #474747;
-						}
+					color: #E7474C;
 
-						view:nth-child(2) {
-							font-size: 32rpx;
-							color: #A3D250;
-							font-weight: 600;
-						}
+					.title {
+						font-size: 40rpx;
+						font-weight: bold;
 					}
 
-					.top1 {
-						font-size: 26rpx;
-						color: #fff;
-						padding: 10rpx 30rpx;
-						background-color: #F6CD59;
-						border-radius: 30rpx;
+					.descript {
+						margin-left: 10rpx;
 					}
 				}
 
+				.new-perple-top-right {
+
+					image {
+						width: 80px;
+					}
+				}
 			}
 
-			.centre {
-				margin: 40rpx 20rpx;
+			.new-perple-main {
 				display: flex;
-				flex-direction: column;
-				align-items: center;
-				justify-content: center;
 
-				.boxs {
+				.red-packet {
 					display: flex;
-					width: 100%;
 					align-items: center;
 					justify-content: center;
-					margin-top: 20rpx;
-					background-color: #f9f9f9;
-					border-radius: 20rpx;
-					padding: 20rpx;
-
-					.images {
-						width: 180rpx;
-						height: 140rpx;
-						flex-shrink: 0;
-						border-radius: 8rpx;
-						overflow: hidden;
-
-						image {
-							width: 100%;
-							height: 100%;
-						}
-					}
-
-					.box-fone {
-						margin-left: 20rpx;
-						flex: 1;
-						view:nth-child(1) {
-							font-size: 36rpx;
-							color: #474747;
-						}
-
-						view:nth-child(2) {
-							margin-top: 10rpx;
-							font-size: 28rpx;
-							color: #A2A2A2;
-						}
-					}
+					width: 20%;
 
-					.box-text,
-					.box-img {
-						flex: 1;
-					}
-					
-					.box-img{
-						height: 220rpx;
-						image{
-							width: 100%;
-							height: 100%;
-						}
+					image {
+						width: 80%;
 					}
+				}
 
-					.box-text {
-						view:nth-child(1) {
-							font-size: 32rpx;
-							font-weight: 500;
-							margin-top: 30rpx;
-						}
-
-						view:nth-child(2) {
-							font-size: 28rpx;
-							color: #CCCCCC;
-							margin-bottom: 30rpx;
-						}
-
-						.text1 {
-							color: #f40;
-							font-size: 58rpx;
-						}
-
-						.text2 {
-							font-size: 28rpx;
-							color: #999;
-						}
-						
-						
-						.text3 {
-							color: #f40;
-							font-size: 28rpx;
-							text{
-								font-size: 30rpx;
-								font-weight: 900;
-							}
-						}
-						
-						.text4 {
-							font-size: 26rpx;
-							color: #999;
-						}
+				.activity {
+					display: flex;
+					flex-direction: column;
+					align-items: center;
+					justify-content: center;
+					width: 20%;
+					background: white;
+					border-radius: 10px;
 
+					image {
+						width: 80%;
 					}
 
-					.box-img {
+					.product-price {
+						color: $uni-color;
 
-						image {
-							height: 100%;
-							width: 100%;
-						}
 					}
 				}
+			}
+		}
 
+		// 视频
+		.video-line {
+			display: flex;
+			align-items: center;
+			padding: 20rpx;
+			background: white;
+			font-size: 34rpx;
+			.line {
+				height: 40rpx;
+				width: 10rpx;
+				background: $uni-color;
+				border-radius: 5rpx;
+				margin-right: 10rpx;
+			}
+		}
+		
+		.video-list {
+			.scroll-view_H {
+				white-space: nowrap;
+				width: 750rpx;
+
+				.video-item {
+					display: inline-block;
+					width: 35%;
+					border: 1px solid #ccc;
+
+					.product-video {
+						width: 100%;
+						height: 70px;
+					}
+				}
 			}
 		}
 
+		// 推荐
+		.recommend {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			background: white;
+			margin: 20rpx 0rpx;
+			padding: 20rpx;
+			
+			.recommend-title {
+				font-size: 36rpx;
+			}
+			
+			.recommend-more {
+				color: $uni-color;
+			}
+		}
 	}
 </style>

pages_order/auth/wxLogin.vue

@@ -7,8 +7,6 @@
 			欢迎使用{{ configList.logo_name }}
 		</view>
 		
-		<!-- 			v-if="checkboxValue.length == 0" -->
-		
 		<view class="btn mt"
 			@click="wxLogin">
 			<view class="icon">
@@ -19,20 +17,6 @@
 			</view>
 		</view>
 		
-		<!-- <button
-		class="btn mt"
-		v-else
-		open-type="getPhoneNumber" 
-		@getphonenumber="getPhoneNumber">
-			<view class="icon">
-				<image src="../static/auth/wx.png" mode=""></image>
-			</view>
-			<view 
-			style="font-size: 30rpx;">
-				微信授权登录
-			</view>
-		</button> -->
-		
 		<view class="btn b2"
 		@click="qux">
 			取消登录

pages_order/components/product/submit.vue

@@ -1,37 +1,21 @@
 <template>
 	<view class="submit">
-		<!-- <view class=""
-		@click="$emit('share')">
-			<uv-icon 
-			size="40rpx"
-			name="share-square"></uv-icon>
-			<view class="">
-				分享
+		<!-- 联系客服 -->
+		<view @click="$emit('service')" class="service-icon">
+			<image src="@/pages_order/static/productDetail/service.png" mode="widthFix" class="service-icon-img">
+			</image>
+			<view class="title">
+				客服
 			</view>
 		</view>
-		<view class=""
-		@click="$utils.navigateTo('/index/cart')">
-			<uv-icon 
-			size="40rpx"
-			name="shopping-cart"></uv-icon>
-			<view class="">
-				购物车
-			</view>
-		</view> -->
-		<!-- <view class="btn"
-		@click="$emit('submit')">
-			{{ submiitTitle }}
-		</view> -->
-		
-		<view class="submit-btn"
-		>
-			<view class="l"s
+
+		<view class="submit-btn">
+			<!-- <view class="l"s
 			v-if="detail.type == 2"
 			@click="$emit('addCart')">
 				加入购物车
-			</view>
-			<view class="r"
-			@click="$emit('submit')">
+			</view> -->
+			<view class="r" @click="$emit('submit')">
 				{{ submiitTitle }}
 			</view>
 		</view>
@@ -40,83 +24,86 @@
 
 <script>
 	export default {
-		name:"submit",
-		props : {
-			submiitTitle : {
-				default : '立即购买',
-				type : String,
+		name: "submit",
+		props: {
+			submiitTitle: {
+				default: '立即购买',
+				type: String,
 			},
-			detail : {
-				default : {}
+			detail: {
+				default: {}
 			},
 		},
 		data() {
 			return {
-				
+
 			}
 		},
 		methods: {
-			
+
 		}
 	}
 </script>
 
 <style lang="scss" scoped>
-.submit{
-	position: fixed;
-	bottom: 0;
-	left: 0;
-	width: 100vw;
-	background-color: #fff;
-	height: 100rpx;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	font-size: 24rpx;
-	// .btn{
-	// 	background: $uni-color;
-	// 	width: 600rpx;
-	// 	height: 80rpx;
-	// 	color: #fff;
-	// 	border-radius: 40rpx;
-	// 	font-size: 28rpx;
-	// }
-	// view{
-	// 	width: 100rpx;
-	// 	margin: 0 10rpx;
-	// 	display: flex;
-	// 	justify-content: center;
-	// 	align-items: center;
-	// 	flex-direction: column;
-	// }
-	
-	.submit-btn{
-		width: 600rpx;
-		height: 80rpx;
-		color: #fff;
-		border-radius: 40rpx;
-		font-size: 28rpx;
-		margin: 20rpx auto;
+	.submit {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		width: 100vw;
+		background-color: #fff;
+		height: 100rpx;
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		border: 1rpx solid $uni-color;
-		overflow: hidden;
-		.l{
-			flex: 1;
+		font-size: 24rpx;
+		padding: 0rpx 20rpx;
+		box-sizing: border-box;
+
+		// 联系客服
+		.service-icon {
 			display: flex;
+			flex-direction: column;
 			justify-content: center;
-			align-items: center;
-			color: $uni-color;
+
+			.service-icon-img {
+				width: 45rpx;
+				height: 45rpx;
+			}
+
+			.title {
+				font-size: 26rpx;
+			}
 		}
-		.r{
-			background: $uni-color;
-			flex: 1;
-			height: 100%;
+
+		.submit-btn {
+			width: calc(100% - 100rpx);
+			height: 80rpx;
+			color: #fff;
+			border-radius: 40rpx;
+			font-size: 28rpx;
+			margin: 20rpx auto;
 			display: flex;
 			justify-content: center;
 			align-items: center;
+			overflow: hidden;
+
+			.l {
+				flex: 1;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				color: $uni-color;
+			}
+
+			.r {
+				background: $uni-color;
+				flex: 1;
+				height: 100%;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
 		}
 	}
-}
-</style>
+</style>

pages_order/mine/card.vue

@@ -0,0 +1,141 @@
+<!-- 会员卡片页面 -->
+<template>
+	<view class="member-card">
+		<!-- 导航栏 -->
+		<navbar title="会员" leftClick @leftClick="$utils.navigateBack" />
+
+		<!-- 会员列表 -->
+		<view class="member-list">
+			<view v-for="item in memberList" :key="item.id" class="member-item">
+				<image :src="item.memberBg" mode="widthFix" class="member-image"></image>
+				<view class="member-info">
+					<view class="profile-photo">
+						<image src="@/pages_order/static/card/profilePhoto.png" mode="widthFix" class="pro-img"></image>
+						<view class="open-status">
+							暂未开通
+						</view>
+					</view>
+					<view class="open">
+						立即开通
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- 小会员列表 -->
+		<view class="member-list-min">
+			<image v-for="item in minMemberList" :key="item.id" :src="item.icon" mode="heightFix" class="member-icon"></image>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'MenberCard',
+		data() {
+			return {
+				memberList: [{
+						id: 1,
+						memberBg: "/pages_order/static/card/diamond.png",
+					},
+					{
+						id: 2,
+						memberBg: "/pages_order/static/card/gold.png",
+					},
+					{
+						id: 3,
+						memberBg: "/pages_order/static/card/silver.png",
+					}
+				],
+				minMemberList: [{
+						id: 1,
+						icon: "/pages_order/static/card/diamond-min.png",
+					},
+					{
+						id: 2,
+						icon: "/pages_order/static/card/gold-min.png",
+					},
+					{
+						id: 3,
+						icon: "/pages_order/static/card/sliver-min.png",
+					}
+				]
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.member-card {
+		background: white;
+		min-height: 100vh;
+
+		// 会员列表
+		.member-list {
+			padding: 20rpx;
+			box-sizing: border-box;
+
+			.member-item {
+				position: relative;
+
+				.member-image {
+					width: 100%;
+				}
+
+				.member-info {
+					position: absolute;
+					bottom: 30rpx;
+					left: 0rpx;
+					display: flex;
+					justify-content: space-between;
+					padding: 0rpx 40rpx;
+					box-sizing: border-box;
+					width: 100%;
+
+					.profile-photo {
+						display: flex;
+						justify-content: center;
+						align-items: center;
+
+						.pro-img {
+							width: 60rpx;
+							height: 60rpx;
+						}
+
+						.open-status {
+							color: #F8A95F;
+							border: 1px solid #F8A95F;
+							border-radius: 30rpx;
+							padding: 7rpx 20rpx;
+							margin-left: 10rpx;
+						}
+					}
+
+					.open {
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						background: #F8A95F;
+						color: white;
+						border-radius: 30rpx;
+						padding: 7rpx 20rpx;
+					}
+				}
+			}
+		}
+		
+		// 小会员列表
+		.member-list-min {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 0rpx 20rpx;
+			box-sizing: border-box;
+			margin: 20rpx 0rpx 0rpx 0rpx;
+			
+			.member-icon {
+				height: 80rpx;
+			}
+		}
+	}
+</style>

pages_order/mine/memberCenter.vue

@@ -0,0 +1,406 @@
+<!-- 会员中心页面 -->
+<template>
+	<view class="member-center">
+		<!-- 导航栏 -->
+		<navbar title="会员中心" leftClick @leftClick="$utils.navigateBack" />
+
+		<!-- 会员卡片 -->
+		<swiper :slides-per-view="3" :space-between="50" @swiper="onSwiper" @slideChange="onSlideChange">
+			<swiper-slide v-for="item in memberList" :key="item.id" class="member-item">
+				<image :src="item.memberBg" mode="widthFix" class="member-image"></image>
+				<view class="member-info">
+					<view class="profile-photo">
+						<image src="@/pages_order/static/card/profilePhoto.png" mode="widthFix" class="pro-img">
+						</image>
+						<view class="open-status">
+							暂未开通
+						</view>
+					</view>
+					<view class="open">
+						立即开通
+					</view>
+				</view>
+			</swiper-slide>
+		</swiper>
+
+		<!-- 充值套餐 -->
+		<view class="top-up-package">
+			<view class="title">
+				充值套餐
+			</view>
+			<view class="set-meal-list">
+				<view v-for="item in cardList" :key="item.id" :class="{'active-set-meal-item' : item.id == 1}"
+					class="set-meal-item">
+					<view class="card-tag">
+						限时折扣
+					</view>
+					<view class="card-title">{{ item.title }}</view>
+					<view class="money">
+						<text class="unit">￥</text>{{ item.money }}
+					</view>
+				</view>
+			</view>
+			<view class="member-descript">
+				（不同会员等级商品价格不一样，可以设置给与推荐人佣金。）
+			</view>
+		</view>
+
+		<!-- 会员权益 -->
+		<view class="member-equity-title">
+			<image src="@/pages_order/static/memberCenter/equity.png" mode="widthFix" class="eqyity-img"></image>
+		</view>
+		<view class="equity-card-list">
+			<view v-for="(item,index) in equityList" :key="item.id" class="equity-card">
+				<view class="equity-title">{{ item.title }}</view>
+				<view class="equity-descript-list">
+					<view class="equity-descript-icon">
+						<image :src="item.icon" mode="widthFix" class="equity-descript-img"></image>
+					</view>
+					<view v-for="(litem,lindex) in item.list" :key="lindex" class="equity-descript-item">
+						<view class="num">
+							{{ lindex + 1 }}
+						</view>
+						<view class="content">
+							{{ litem }}
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		Swiper,
+		SwiperSlide
+	} from 'vue-awesome-swiper'
+	import 'swiper/css/swiper.css'
+
+	export default {
+		name: "MemberCenter",
+		data() {
+			return {
+				memberList: [{
+						id: 1,
+						memberBg: "/pages_order/static/card/diamond.png",
+					},
+					{
+						id: 2,
+						memberBg: "/pages_order/static/card/gold.png",
+					},
+					{
+						id: 3,
+						memberBg: "/pages_order/static/card/silver.png",
+					}
+				],
+				list: [
+					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
+					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
+					'https://cdn.uviewui.com/uview/swiper/swiper1.png'
+				],
+				memberList: [{
+						id: 1,
+						memberBg: "/pages_order/static/card/diamond.png",
+					},
+					{
+						id: 2,
+						memberBg: "/pages_order/static/card/gold.png",
+					},
+					{
+						id: 3,
+						memberBg: "/pages_order/static/card/silver.png",
+					}
+				],
+				cardList: [{
+						id: 1,
+						title: "金卡",
+						money: "39"
+					},
+					{
+						id: 2,
+						title: "银卡",
+						money: "29"
+					},
+					{
+						id: 3,
+						title: "钻石卡",
+						money: "99"
+					}
+				],
+				equityList: [{
+						id: 1,
+						title: "权益1·专属推广码",
+						icon: "/pages_order/static/memberCenter/descript1.png",
+						list: [
+							"购买会员卡或者购物金额满500元！有专属推广码。",
+							"显示直推，间推人员信息及下单佣金明细。"
+						]
+					},
+					{
+						id: 2,
+						title: "权益2·直推奖励",
+						icon: "/pages_order/static/memberCenter/descript2.png",
+						list: [
+							"通过扫专属推广码进来的用户下单，享受30%的直推奖励！（比例可调）",
+							"显示直推，间推人员信息及下单佣金明细。"
+						]
+					},
+					{
+						id: 3,
+						title: "权益3·间推奖励",
+						icon: "/pages_order/static/memberCenter/descript1.png",
+						list: [
+							"下级发展的用户下单，享受20%的间推奖励！（比例可调）",
+						]
+					},
+					{
+						id: 4,
+						title: "权益4·会员等级奖励",
+						icon: "/pages_order/static/memberCenter/descript2.png",
+						list: [
+							"银，金，钻不同会员等级，同一个商品分佣比例不一样，等级越高，佣金比例越高！"
+						]
+					}
+				]
+			}
+		},
+		methods: {
+
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.member-center {
+
+		//会员卡片
+		.member-image {
+			width: 100%;
+		}
+
+		.member-info {
+			position: absolute;
+			bottom: 30rpx;
+			left: 0rpx;
+			display: flex;
+			justify-content: space-between;
+			padding: 0rpx 40rpx;
+			box-sizing: border-box;
+			width: 100%;
+
+			.profile-photo {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+
+				.pro-img {
+					width: 60rpx;
+					height: 60rpx;
+				}
+
+				.open-status {
+					color: #F8A95F;
+					border: 1px solid #F8A95F;
+					border-radius: 30rpx;
+					padding: 7rpx 20rpx;
+					margin-left: 10rpx;
+				}
+			}
+
+			.open {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				background: #F8A95F;
+				color: white;
+				border-radius: 30rpx;
+				padding: 7rpx 20rpx;
+			}
+		}
+
+		// 充值套餐
+		.top-up-package {
+			padding: 0rpx 20rpx;
+			box-sizing: border-box;
+
+			.title {
+				font-size: 36rpx;
+				font-weight: bold;
+				margin-top: 30rpx;
+			}
+
+			.set-meal-list {
+				display: flex;
+				flex-wrap: wrap;
+				margin-top: 20rpx;
+
+				.set-meal-item {
+					position: relative;
+					width: 30%;
+					margin-right: calc(9% / 2);
+					border-radius: 10rpx;
+					overflow: hidden;
+					box-sizing: border-box;
+					background: white;
+					margin-bottom: 20rpx;
+					padding: 40rpx;
+
+					&:nth-child(3n) {
+						margin-right: 0rpx;
+					}
+
+					.card-tag {
+						position: absolute;
+						left: 0;
+						top: 0;
+						background: #FF9633;
+						border-bottom-right-radius: 10rpx;
+						color: white;
+						padding: 5rpx 10rpx;
+						font-size: 20rpx;
+					}
+
+					.card-title {
+						text-align: center;
+						font-size: 38rpx;
+						font-weight: bold;
+					}
+
+					.money {
+						color: #FF9633;
+						font-size: 30rpx;
+						text-align: center;
+
+						.unit {}
+					}
+				}
+
+				.active-set-meal-item {
+					border: 2rpx solid #FF9633;
+					background: #FFF5EB;
+				}
+			}
+
+			.member-descript {
+				font-size: 24rpx;
+				color: #333333;
+				text-align: center;
+			}
+		}
+
+		// 会员权益
+		.member-equity-title {
+			margin: 30rpx 0rpx;
+			padding: 0rpx 20rpx;
+			box-sizing: border-box;
+
+			.eqyity-img {
+				width: 240rpx;
+			}
+		}
+
+		.equity-card-list {
+			padding: 0rpx 20rpx;
+			box-sizing: border-box;
+
+			.equity-card {
+				background: white;
+				border-radius: 10rpx;
+				margin-bottom: 40rpx;
+				padding: 20rpx;
+				box-sizing: border-box;
+
+				.equity-title {
+					color: #F18F09;
+					font-size: 28rpx;
+					font-weight: bold;
+				}
+
+				.equity-descript-list {
+					position: relative;
+
+					.equity-descript-icon {
+						.equity-descript-img {
+							width: 150rpx;
+						}
+					}
+
+					.equity-descript-item {
+						position: relative;
+						background: #FDF9EF;
+						border-radius: 10rpx;
+						border: 1px solid #F7C47B;
+						margin: 20rpx 0rpx;
+						padding: 20rpx;
+						box-sizing: border-box;
+						color: #BA7E2B;
+						font-size: 24rpx;
+
+						.num {
+							display: flex;
+							justify-content: center;
+							align-items: center;
+							position: absolute;
+							top: -15rpx;
+							left: -15rpx;
+							width: 30rpx;
+							height: 30rpx;
+							border-radius: 50%;
+							background: #F18F09;
+							border: 2px solid #F8CB8E;
+							box-sizing: border-box;
+							color: white;
+							font-size: 24rpx;
+						}
+					}
+				}
+
+				&:nth-child(1) {
+					.equity-descript-list {
+						display: flex;
+						justify-content: space-between;
+						flex-wrap: wrap;
+
+						.equity-descript-icon {
+							position: absolute;
+							bottom: 100%;
+							right: 0rpx;
+							z-index: 200;
+						}
+
+						.equity-descript-item {
+							width: 49%;
+						}
+					}
+				}
+
+				&:nth-child(2) {
+					.equity-descript-icon {
+						position: absolute;
+						bottom: -10%;
+						right: 0rpx;
+						z-index: 200;
+					}
+
+					.equity-descript-item {
+						&:nth-child(3) {
+							width: calc(100% - 160rpx);
+							margin-right: 10rpx;
+						}
+					}
+				}
+
+				&:nth-child(3),
+				&:nth-child(4) {
+					.equity-descript-icon {
+						position: absolute;
+						bottom: 100%;
+						right: 0rpx;
+						z-index: 200;
+					}
+				}
+			}
+		}
+	}
+</style>

pages_order/mine/moreCommodity.vue

@@ -0,0 +1,119 @@
+<!-- 更多商品 -->
+<template>
+	<view class="more-commodity">
+		<!-- 导航栏 -->
+		<navbar title="商品" leftClick @leftClick="$utils.navigateBack" />
+
+		<view class="more-commodity-header">
+			<!-- 搜索栏 -->
+			<view class="search">
+				<uv-search placeholder="搜你喜欢的产品" bgColor="#fff" @search="getData" @custom="getData"
+					v-model="queryParams.title"></uv-search>
+			</view>
+
+			<!-- 筛选过滤 -->
+			<view class="filtration">
+				<view v-for="(item,index) in filtrationList" :key="index"
+					:class="{ 'filtration-acitve-item' : activeFiltration == index }" @click="changeFiltration(index)"
+					class="filtration-item">
+					{{ item }}
+				</view>
+			</view>
+		</view>
+
+		<!-- 商品列表 -->
+		<view class="product-list">
+			<productList :list="commodiryList" />
+		</view>
+	</view>
+</template>
+
+<script>
+	import productList from '@/components/user/productList.vue'
+	export default {
+		name: "MoreCommodity",
+		components: {
+			productList
+		},
+		data() {
+			return {
+				filtrationList: ['综合', '销量', '价格', '上新'],
+				activeFiltration: 0,
+				commodiryList: []
+			}
+		},
+		onShow() {
+			this.getRiceCommonProductList();
+		},
+		methods: {
+			//修改过滤条件
+			changeFiltration(index) {
+				this.activeFiltration = index;
+				//重新获取数据逻辑
+
+			},
+
+			// 获取常规产品
+			getRiceCommonProductList() {
+				this.$api('getRiceCommonProductList', res => {
+					uni.stopPullDownRefresh()
+					if (res.code == 200) {
+						this.commodiryList = res.result
+					}
+				})
+			},
+
+			//搜索
+			getData() {
+
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.more-commodity {
+
+
+		.more-commodity-header {
+			background: white;
+			padding: 20rpx;
+
+			// 搜索栏
+			.search {
+				border: 1px solid #F0F0F0;
+				border-radius: 41rpx;
+				padding: 10rpx 20rpx;
+				display: flex;
+				align-items: center;
+
+				/deep/ .uv-search__action {
+					background-color: $uni-color;
+					color: #FFFFFF;
+					padding: 10rpx 20rpx;
+					border-radius: 30rpx;
+				}
+			}
+
+			// 筛选过滤
+			.filtration {
+				display: flex;
+				justify-content: space-between;
+				padding: 30rpx 20rpx;
+
+				.filtration-item {
+					font-size: 36rpx;
+				}
+
+				.filtration-acitve-item {
+					color: $uni-color;
+				}
+			}
+		}
+
+		// 商品列表
+		.product-list {
+			padding-top: 20rpx;
+		}
+	}
+</style>

pages_order/mine/partner.vue

@@ -0,0 +1,270 @@
+<!-- 合伙人页面 -->
+<template>
+	<view class="partner">
+		<!-- 导航栏 -->
+		<navbar title="合伙人" leftClick @leftClick="$utils.navigateBack" />
+
+		<!-- 合伙人信息 -->
+		<view class="partner-info-bg">
+			<view class="partner-info">
+				<view class="profile-photo">
+					<image src="@/pages_order/static/card/profilePhoto.png" mode="widthFix" class="pro-img"></image>
+				</view>
+
+				<view class="performance-information">
+					<view class="user-info-base">
+						<view class="username">18200000000</view>
+						<view class="user-tag">合伙人</view>
+					</view>
+
+					<view class="live-performance">
+						<view class="live-performance-money">
+							<view class="live-tag">
+								直推及间推业绩
+							</view>
+							<view class="money">
+								<text class="unit">￥</text>666
+							</view>
+						</view>
+						<view class="withdraw">
+							<view class="btn">
+								去提现
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<view class="tabs">
+			<uv-tabs :list="tabList" @click="click"></uv-tabs>
+		</view>
+
+		<!-- 佣金列表 -->
+		<view class="brokerage-list">
+			<view v-for="item in 10" :key="item" class="brokerage-item">
+				<view class="brokerage-user">
+					<image src="@/pages_order/static/card/profilePhoto.png" mode="widthFix" class="pro-img"></image>
+					<view class="name-time">
+						<view class="name">
+							用户138xxxxxxxx
+						</view>
+						<view class="time">
+							已加入平台120天
+						</view>
+					</view>
+				</view>
+
+				<view class="brokerage-money">
+					<view class="order-money">
+						下单量: <text>666</text>
+					</view>
+					<text>|</text>
+					<view class="money">
+						佣金:<text>666元</text>
+					</view>
+				</view>
+			</view>
+		</view>
+
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "Partner",
+		data() {
+			return {
+				tabList: [{
+						name: '直推用户'
+					},
+					{
+						name: '间推用户'
+					}
+				]
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.partner {
+
+		// 合伙人信息
+		.partner-info-bg {
+			background: $uni-color;
+			padding: 60rpx 0rpx;
+
+			.partner-info {
+				display: flex;
+				align-items: center;
+				background: white;
+				border-radius: 20rpx;
+				box-sizing: border-box;
+				padding: 20rpx;
+				width: 90%;
+				margin: 0rpx auto;
+
+				.profile-photo {
+					width: 25%;
+
+					.pro-img {
+						width: 100%;
+						aspect-ratio: 1, 1;
+					}
+				}
+
+				.performance-information {
+					width: 75%;
+					padding: 0rpx 20rpx;
+					box-sizing: border-box;
+
+					.user-info-base {
+						display: flex;
+						flex-wrap: wrap;
+						align-items: center;
+						border-bottom: 2px dashed $uni-color;
+						padding: 20rpx 0rpx;
+
+						.username {
+							font-size: 36rpx;
+						}
+
+						.user-tag {
+							background: black;
+							color: white;
+							margin-left: 20rpx;
+							border-radius: 20rpx;
+							padding: 3rpx 10rpx;
+							font-size: 28rpx;
+						}
+					}
+
+					.live-performance {
+						display: flex;
+						flex-wrap: wrap;
+						padding: 20rpx 0rpx;
+						box-sizing: border-box;
+
+						.live-performance-money {
+							width: 50%;
+
+							.live-tag {
+								display: flex;
+								align-items: center;
+								justify-content: center;
+								background: #F99F9F;
+								color: #DC2828;
+								border-radius: 40rpx;
+								font-weight: bold;
+								font-size: 28rpx;
+								padding: 10rpx 0rpx;
+							}
+
+							.money {
+								font-size: 45rpx;
+								color: $uni-color;
+								font-weight: bold;
+								
+								.unit {
+									font-size: 32rpx;
+								}
+							}
+						}
+
+						.withdraw {
+							display: flex;
+							flex-direction: column;
+							justify-content: center;
+							align-items: flex-end;
+							width: 50%;
+
+							.btn {
+								width: 90%;
+								display: flex;
+								align-items: center;
+								justify-content: center;
+								background: #DC2828;
+								color: white;
+								border-radius: 40rpx;
+								padding: 20rpx 0rpx;
+								font-weight: bold;
+								font-size: 32rpx;
+							}
+						}
+					}
+				}
+			}
+		}
+
+		.tabs {
+			background: white;
+		}
+
+		// 佣金列表
+		.brokerage-list {
+			padding: 0rpx 20rpx;
+
+			.brokerage-item {
+				display: flex;
+				align-items: center;
+				flex-wrap: wrap;
+				background: white;
+				margin: 20rpx 0rpx;
+				border-radius: 20rpx;
+				padding: 20rpx;
+				box-sizing: border-box;
+
+				.brokerage-user {
+					width: 50%;
+					display: flex;
+					align-items: center;
+					flex-wrap: wrap;
+
+					.pro-img {
+						width: 100rpx;
+						height: 100rpx;
+					}
+
+					.name-time {
+						width: calc(100% - 100rpx);
+						padding: 0rpx 20rpx;
+						box-sizing: border-box;
+						
+						.name {
+							font-size: 32rpx;
+							white-space: nowrap;
+							overflow: hidden;
+							text-overflow: ellipsis;
+						}
+						
+						.time {
+							color: #999999;
+							font-size: 26rpx;
+						}
+					}
+				}
+
+				.brokerage-money {
+					width: 50%;
+					display: flex;
+					flex-wrap: wrap;
+					justify-content: space-between;
+
+					.order-money {
+						text {
+							margin-left: 10rpx;
+						}
+					}
+
+					.money {
+						text {
+							color: #FEB814;
+							margin-left: 10rpx;
+						}
+					}
+				}
+			}
+		}
+	}
+</style>

pages_order/mine/recommend - 副本.vue

@@ -1,89 +0,0 @@
-<template>
-	<view class="page">
-		<navbar title="推广明细" leftClick @leftClick="$utils.navigateBack" />
-		<view class="top">
-			<view class="top-text">
-				<view>{{ total }}</view>
-				<view>直推人数</view>
-			</view>
-		</view>
-		<view class="cell">
-			<view class="cell-top">推广明细</view>
-			<view class="cell-box" 
-			:key="index"
-			v-for="(item,index) in list">
-				<uv-cell-group>
-					<uv-cell 
-					:title="item.nickName" 
-					:label="item.createTime" 
-					:center="true">
-						<template #value>
-							<text style="font-weight: 600; font-size: 28rpx;">
-								{{ vipType[item.isPay] }}
-							</text>
-						</template>
-					</uv-cell>
-				</uv-cell-group>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	import mixinsList from '@/mixins/list.js'
-	export default {
-		mixins : [mixinsList],
-		data() {
-			return {
-				mixinsListApi : 'getFansPageList',
-				vipType : ['普通会员', '黄金会员', '渠道商'],
-			}
-		},
-		onLoad(e) {},
-		methods: {
-
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	.page {
-		background-color: #F3F3F3;
-		height: 100vh;
-
-		.top {
-			display: flex;
-			height: 400rpx;
-			justify-content: center;
-			align-items: center;
-			color: #474747;
-
-			.top-text {
-				text-align: center;
-
-				view:nth-child(1) {
-					font-size: 78rpx;
-					font-weight: 600;
-				}
-
-				view:nth-child(2) {
-					font-size: 28rpx;
-				}
-			}
-		}
-
-		.cell {
-			margin: 20rpx;
-			background-color: #FFFFFF;
-			border-radius: 16rpx;
-
-
-			.cell-top {
-				padding: 40rpx 34rpx;
-				color: #474747;
-				font-size: 34rpx;
-				font-weight: 600;
-			}
-		}
-	}
-</style>

pages_order/mine/recommend.vue

@@ -1,162 +0,0 @@
-<template>
-	<view class="page">
-		<navbar title="推广明细" leftClick @leftClick="$utils.navigateBack" />
-		
-		<view class="search">
-			<uv-search 
-			placeholder="会员ID/昵称" 
-			bgColor="#fff" 
-			@search="getData"
-			@custom="getData"
-			v-model="queryParams.title"></uv-search>
-		</view>
-		
-		<view class="top">
-			<view class="top-text">
-				<view>{{ total }}</view>
-				<view>直推人数</view>
-			</view>
-		</view>
-		<view class="cell">
-			<!-- <view class="cell-top">推广明细</view> -->
-			<view class="cell-box" 
-			:key="index"
-			v-for="(item,index) in list">
-				<view class="headImage">
-					<image :src="item.headImage" mode="aspectFill"></image>
-				</view>
-				<view class="info">
-					<view
-					style="width: 300rpx;">
-						<text>昵称：</text>
-						{{ item.nickName }}
-					</view>
-					<view style="display: flex;align-items: center;"
-					@click="$utils.copyText(item.shareId)">
-						<text>上级ID：</text>
-						{{ item.shareId && item.shareId.substring(0, 8) }}...
-						<uv-icon name="empty-news" color="#aaa" size="40"></uv-icon>
-					</view>
-				</view>
-				<view class="info">
-					<view class="">
-						<text>级别：</text>
-						直属下级
-					</view>
-					<view class="">
-						<text>时间：</text>
-						{{ $dayjs(item.createTime).format('YYYY-MM-DD') }}
-					</view>
-				</view>
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	import mixinsList from '@/mixins/list.js'
-	export default {
-		mixins : [mixinsList],
-		data() {
-			return {
-				mixinsListApi : 'getFansPageList',
-				vipType : ['普通会员', '黄金会员', '渠道商'],
-			}
-		},
-		onLoad(e) {
-			// this.queryParams.xxx = id
-		},
-		methods: {
-
-		}
-	}
-</script>
-
-<style lang="scss" scoped>
-	.page {
-		background-color: #F3F3F3;
-		height: 100vh;
-		.search {
-			position: relative;
-			background: #FFFFFF;
-			margin: 20rpx;
-			border-radius: 41rpx;
-			padding: 10rpx 20rpx;
-			display: flex;
-			align-items: center;
-		
-			/deep/ .uv-search__action {
-				background-color: $uni-color;
-				color: #FFFFFF;
-				padding: 10rpx 20rpx;
-				border-radius: 30rpx;
-			}
-		}
-
-		.top {
-			display: flex;
-			height: 200rpx;
-			justify-content: center;
-			align-items: center;
-			color: #474747;
-
-			.top-text {
-				text-align: center;
-
-				view:nth-child(1) {
-					font-size: 78rpx;
-					font-weight: 600;
-				}
-
-				view:nth-child(2) {
-					font-size: 28rpx;
-				}
-			}
-		}
-
-		.cell {
-			.cell-box{
-				border-radius: 16rpx;
-				margin: 20rpx;
-				background-color: #FFFFFF;
-				padding: 20rpx;
-				display: flex;
-				align-items: center;
-				.headImage{
-					width: 120rpx;
-					height: 120rpx;
-					margin-right: 20rpx;
-					flex-shrink: 0;
-					image{
-						width: 100%;
-						height: 100%;
-						border-radius: 50%;
-					}
-				}
-				.info{
-					flex: 1;
-					font-size: 22rpx;
-					flex-shrink: 0;
-					view{
-						width: 240rpx;
-						overflow:hidden; //超出的文本隐藏
-						text-overflow:ellipsis; //溢出用省略号显示
-						white-space:nowrap; //溢出不换行
-					}
-					text{
-						font-weight: 900;
-						color: #474747;
-					}
-				}
-			}
-
-
-			.cell-top {
-				padding: 40rpx 34rpx;
-				color: #474747;
-				font-size: 34rpx;
-				font-weight: 600;
-			}
-		}
-	}
-</style>

pages_order/mine/recruit.vue

@@ -0,0 +1,177 @@
+<!-- 合伙人招募令页面 -->
+<template>
+	<view class="recruit">
+		<!-- 导航栏 -->
+		<navbar title="合伙人" leftClick @leftClick="$utils.navigateBack" />
+
+		<view class="b-relative" style="width: 710rpx;margin: 20rpx;">
+			<image src="@/pages_order/static/recruit/bg.png" style="width: 710rpx;height: 310rpx;"></image>
+		</view>
+
+		<view class="item-card">
+			<view class="item-line">
+				<view class="before"></view>
+				<view class="label">合伙人</view>
+			</view>
+			<view class="item-line">
+				<view class="label">您的姓名</view>
+				<input placeholder="请输入姓名" v-model="partnership.name" />
+			</view>
+			<view class="item-line">
+				<view class="label">联系方式</view>
+				<input placeholder="请输入联系方式" v-model="partnership.phone" />
+			</view>
+			<view class="item-line">
+				<view class="label">所在地区</view>
+				<input placeholder="请输入所在地区" v-model="partnership.city" />
+			</view>
+			<view class="item-line">
+				<view class="label">详细地址</view>
+				<textarea v-model="partnership.detailAddress" placeholder="请输入详细地址"></textarea>
+			</view>
+		</view>
+
+		<view class="b-fiexd">
+			<view @click="addOrUpdateMsgTer" class="button-submit">提交</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "Recruit",
+		data() {
+			return {
+				partnership: {
+					name: "",
+					phone: "",
+					city: "",
+					detailAddress: ""
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.recruit {
+
+		.item-card {
+			width: calc(710rpx - 40rpx);
+			height: auto;
+			background: #ffffff;
+			border-radius: 16rpx;
+
+			margin: 40rpx auto 20rpx;
+			padding: 40rpx 20rpx;
+		}
+
+		.item-line {
+			display: flex;
+			height: 60rpx;
+			font-size: 28rpx;
+			font-family: PingFang SC, PingFang SC-Bold;
+			font-weight: 700;
+			text-align: left;
+			color: #333333;
+			margin-bottom: 40rpx;
+
+			&:nth-child(1) {
+				margin-bottom: 0rpx;
+
+				.label {
+					font-size: 36rpx;
+				}
+			}
+
+			&:last-child {
+				margin-bottom: 0rpx;
+				height: auto;
+			}
+		}
+
+		.item-line .before {
+			content: "";
+			width: 8rpx;
+			height: 30rpx;
+			background: $uni-color;
+			border-radius: 4rpx;
+			margin-right: 10rpx;
+			margin-top: 15rpx;
+		}
+
+		.item-line .label {
+			display: flex;
+			align-items: center;
+			width: 152rpx;
+			height: 60rpx;
+		}
+
+		.item-line input,
+		.item-line textarea {
+			width: 90%;
+			height: 60rpx;
+			line-height: 60rpx;
+			background: #f5f5f5;
+			border-radius: 12rpx;
+
+			font-size: 24rpx;
+			font-family: PingFang SC, PingFang SC-Medium;
+			font-weight: 500;
+			text-align: left;
+			color: #939393;
+
+			padding: 0 20rpx;
+		}
+
+		.item-line textarea {
+			height: 120rpx;
+			padding: 10rpx;
+		}
+
+		.upload {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 200rpx;
+			height: 200rpx;
+			background: rgba(245, 245, 245, 0.82);
+			border: 2rpx dashed #99dcd0;
+			border-radius: 16rpx;
+
+			margin: 10rpx 12rpx;
+		}
+
+		.upload-img {
+			width: calc(100% - 4rpx);
+			height: calc(100% - 4rpx);
+			border: 2rpx dashed #ccc;
+			margin: 2rpx;
+		}
+
+		.b-fiexd {
+			position: fixed;
+			left: 0;
+			bottom: 0;
+			width: 100%;
+
+			.button-submit {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 596rpx;
+				height: 90rpx;
+				background: #E3441A;
+				border-radius: 46rpx;
+
+				margin: 20rpx auto;
+
+				font-size: 28rpx;
+				font-family: PingFang SC, PingFang SC-Regular;
+				font-weight: 400;
+				text-align: center;
+				color: #ffffff;
+			}
+		}
+	}
+</style>

pages_order/order/createOrder.vue

@@ -1,96 +1,111 @@
 <template>
 	<view class="page">
-		<navbar title="下单支付" leftClick @leftClick="$utils.navigateBack" />
+		<!-- 导航栏 -->
+		<navbar title="确认订单" leftClick @leftClick="$utils.navigateBack" />
+
+		<view class="bac"></view>
 
 		<view class="box">
-			<!-- 地址 -->
-			<view class="address" @click="openAddress">
-				<image src="../static/address/icon1.png" mode=""></image>
-				<view class="">
-					{{ address.name }}
-				</view>
-				<view class="">
-					{{ address.address }}
-				</view>
-				<view class="icon">
-					<uv-icon size="30rpx" name="arrow-right"></uv-icon>
+			<!-- 商品详情 -->
+			<view class="product-item">
+				<view class="img-box">
+					<image :src="projectDetail.image" mode="aspectFill"></image>
 				</view>
-			</view>
 
-			<view class="productList">
-				<view class="item"
-				:key="index"
-				v-for="(item, index) in productList">
-					<view class="item-image">
-						<image :src="item.image &&
-						item.image.split(',')[0]" 
-						mode="aspectFill"></image>
+				<view class="server-info">
+					<view class="server-title">MOMEIREN双面黑钻项链</view>
+
+					<view class="texture">
+						材质：S25银
+					</view>
+
+					<view class="stepper">
+						<uv-number-box button-size="60" v-model="value" @change="valChange"></uv-number-box>
 					</view>
 
-					<view class="info">
-						<view class="title">
-							{{ item.title }}
-						</view>
-						<view class="desc">
-							{{ item.sku }}
-						</view>
-						<view class="price-box">
-							<view class="">
-								<uv-number-box 
-								v-model="item.num"
-								v-if="[1, 2].includes(item.type)"
-								></uv-number-box>
-							</view>
-							
-							<!-- 会员价：普通商品并且是会员的时候显示 -->
-							<view class="price"
-							v-if="[2].includes(item.type) && [1].includes(userInfo.isPay)">
-								会员价￥{{ item.vipPrice }}
-							</view>
-							
-							<!-- 零售价、价格 -->
-							<view class="price"
-							v-else>
-								￥{{ item.price }}
-							</view>
-						</view>
+					<view class="sales-volume">
+						<view class="desc">已售出 666+ 单</view>
 					</view>
 				</view>
 			</view>
-			
-			<view class="submit-box">
-				<view class="peis">
-					<view class="">
-						配送方式
+
+			<!-- 地址 -->
+			<view class="cell-item">
+				<view class="cell-item-left">
+					<image src="@/pages_order/static/createOrder/address.png" mode="widthFix" class="cell-icon"></image>
+					<view class="user-name">李满和</view>
+					<view class="user-address">城南故事C3栋2802数据都是佛山佛挡杀佛</view>
+				</view>
+				<view class="cell-item-right">
+					<uv-icon name="arrow-right"></uv-icon>
+				</view>
+			</view>
+
+			<view class="cell-list">
+				<!-- 账户余额 -->
+				<view class="cell-item">
+					<view class="cell-item-left">
+						<image src="@/pages_order/static/createOrder/account.png" mode="widthFix" class="cell-icon">
+						</image>
+						<view class="user-name">账户余额</view>
+						<view class="descript">(余额: 300)</view>
 					</view>
-					<view class="">
-						商家自行配送
+					<view class="cell-item-right">
+
 					</view>
 				</view>
-				<view class="priceInfo">
-					<view class="">
-						付款金额
+
+				<!-- 微信支付 -->
+				<view class="cell-item">
+					<view class="cell-item-left">
+						<image src="@/pages_order/static/createOrder/wx.png" mode="widthFix" class="cell-icon">
+						</image>
+						<view class="user-name">微信支付</view>
+						<view class="descript"></view>
 					</view>
-					<view class="totalPrice">
-						￥{{ totalPrice }}
+					<view class="cell-item-right">
+						
 					</view>
 				</view>
-				<view class="remark">
-					<input type="text" 
-					placeholder="请输入备注"
-					v-model="remark"/>
-				</view>
 			</view>
-			
-			
-			<view class="uni-color-btn"
-			@click="submit">
-				确认下单
+
+			<!-- 优惠券 -->
+			<view class="cell-item">
+				<view class="cell-item-left">
+					<image src="@/pages_order/static/createOrder/coupon.png" mode="widthFix" class="cell-icon"></image>
+					<view class="user-name">优惠券</view>
+					<view class="descript">$20</view>
+				</view>
+				<view class="cell-item-right">
+					
+				</view>
 			</view>
-		</view>
 
+			<!-- 提示 -->
+			<view class="hint">
+				温馨提示，下单前请仔细查看下单需知
+			</view>
 
+			<!-- 用户协议 -->
+			<view class="agreement">
+				<radio @click="agreement = !agreement" :checked="agreement" />
+				本人已同意<text @click="configPopupShow = true">《用户使用协议》</text>
+			</view>
 
+			<!-- 下单 -->
+			<view class="submit">
+				<view class="price">
+					<view>
+						<text style="color: #000;">合计</text>
+						￥<text style="font-size: 18px;
+						font-weight: 600;">{{ count }}</text>元
+					</view>
+				</view>
+				<view class="btn" @click="submit">
+					立即支付
+				</view>
+			</view>
+		</view>
 
 		<!-- 地址选择 -->
 		<uv-popup ref="addressPopup" :round="30">
@@ -102,7 +117,10 @@
 
 <script>
 	import addressList from '../components/address/addressList.vue'
-	import { mapState } from 'vuex'
+	
+	import {
+		mapState
+	} from 'vuex'
 	export default {
 		components: {
 			addressList,
@@ -115,26 +133,26 @@
 					address: '',
 				},
 				addressTotal: 0,
-				remark : '',
-				num : 1,
+				remark: '',
+				num: 1,
+				agreement: true
 			}
 		},
-		computed : {
-			totalPrice(){
+		computed: {
+			totalPrice() {
 				let price = 0
-				
+
 				this.productList.forEach(n => {
-					
-					if([2].includes(n.type) &&
-					[1].includes(this.userInfo.isPay)){
+
+					if ([2].includes(n.type) && [1].includes(this.userInfo.isPay)) {
 						// 常规、普通商品的同时用户是会员就计算会员价
 						price += n.vipPrice * n.num
-					}else{
+					} else {
 						// 普通价格
 						price += n.price * n.num
 					}
 				})
-				
+
 				return Number(price).toFixed(2)
 			},
 			...mapState(['payOrderProduct', 'userInfo']),
@@ -175,88 +193,70 @@
 				this.address = e
 				this.$refs.addressPopup.close()
 			},
-			// 确认下单
-			// submit(){
-			// 	this.$api('createOrder', {
-			// 		productId : this.productList[0].id,
-			// 		num : 1,
-			// 	}, res => {
-			// 		if(res.code == 200){
-			// 			uni.showToast({
-			// 				title: '购买成功',
-			// 				icon: 'none'
-			// 			})
-						
-			// 			setInterval(uni.navigateTo, 1000, {
-			// 				url : '/pages/index/order'
-			// 			})
-			// 		}
-			// 	})
-			// },
-			submit(){
-				
+			submit() {
+
 				let addressId = this.address.id
-				
-				if(!addressId){
+
+				if (!addressId) {
 					uni.showToast({
 						title: '请选择地址',
 						icon: 'none'
 					})
 					return
 				}
-				
+
 				let data = {}
 				let api = ''
-				
-				
-				if(this.productList[0].shopId || this.productList[0].type == 2){//普通商品
-				
+
+
+				if (this.productList[0].shopId || this.productList[0].type == 2) { //普通商品
+
 					let list = []
 					this.productList.forEach(n => {
 						list.push({
-							num : n.num,
-							shopId : n.shopId || n.id,
+							num: n.num,
+							shopId: n.shopId || n.id,
 						})
 					})
 					data = {
 						addressId,
-						list : JSON.stringify(list),
+						list: JSON.stringify(list),
 					}
 					api = 'createSumOrder'
-					
+
 					this.deleteCart(this.productList.map(n => n.id).join(','))
-					
-				}else{//体验、常规商品
+
+				} else { //体验、常规商品
 					data = {
 						addressId,
-						num : this.productList[0].num,
-						shopId : this.productList[0].id,
+						num: this.productList[0].num,
+						shopId: this.productList[0].id,
 					}
 					api = 'createOrder'
 				}
-				
+
 				this.$api(api, data, res => {
-					if(res.code == 200){
+					if (res.code == 200) {
 						uni.requestPaymentWxPay(res)
-						.then(res => {
-							uni.showToast({
-								title: '下单成功',
-								icon: 'none'
-							})
-							
-							setTimeout(uni.redirectTo, 700, {
-								url: '/pages/index/order'
-							})
-						}).catch(n => {
-							setTimeout(uni.redirectTo, 700, {
-								url: '/pages/index/order'
+							.then(res => {
+								uni.showToast({
+									title: '下单成功',
+									icon: 'none'
+								})
+
+								setTimeout(uni.redirectTo, 700, {
+									url: '/pages/index/order'
+								})
+							}).catch(n => {
+								setTimeout(uni.redirectTo, 700, {
+									url: '/pages/index/order'
+								})
 							})
-						})
-					}else if(res.code == 902){
+					} else if (res.code == 902) {
 						uni.showModal({
 							title: res.message,
 							success(e) {
-								if(e.confirm){
+								if (e.confirm) {
 									uni.redirectTo({
 										url: '/pages/index/order'
 									})
@@ -265,10 +265,10 @@
 						})
 					}
 				})
-				
+
 			},
 			// 删除购物车
-			deleteCart(ids){
+			deleteCart(ids) {
 				this.$api('deleteCart', {
 					ids
 				})
@@ -279,127 +279,188 @@
 
 <style scoped lang="scss">
 	.page {
+
+		.bac {
+			width: 100%;
+			height: 100px;
+			background: $uni-color;
+		}
+
 		.box {
 			padding: 20rpx;
+			margin-top: -150rpx;
 
-			.address {
+			// 商品详情
+			.product-item {
 				display: flex;
-				padding: 20rpx;
-				background-color: #fff;
+				flex-wrap: wrap;
 				align-items: center;
-				border-radius: 20rpx;
-
-				image {
-					width: 60rpx;
-					height: 40rpx;
-					margin: 20rpx;
-				}
+				justify-content: space-between;
+				background: white;
+				border-radius: 15rpx;
+				box-sizing: border-box;
+				padding: 25rpx;
+				margin: 20rpx 0rpx;
 
-				view {
-					margin: 20rpx;
-					overflow: hidden; //超出的文本隐藏
-					text-overflow: ellipsis; //溢出用省略号显示
-					white-space: nowrap; //溢出不换行
-				}
+				.img-box {
+					width: 200rpx;
+					height: 200rpx;
+					background: #ccc;
+					border-radius: 10rpx;
+					overflow: hidden;
 
-				.icon {
-					margin-left: auto;
+					image {
+						width: 100%;
+						height: 100%;
+					}
 				}
-			}
 
-			.productList {
-				margin-top: 20rpx;
-				background-color: #fff;
-				border-radius: 20rpx;
-				.item {
+				.server-info {
+					width: calc(100% - 200rpx);
+					box-sizing: border-box;
 					padding: 10rpx 20rpx;
-					align-items: center;
-					margin-bottom: 20rpx;
 					display: flex;
-					width: 100%;
-					box-sizing: border-box;
-					.item-image {
-						width: 140rpx;
-						height: 140rpx;
-						flex-shrink: 0;
+					flex-direction: column;
+					justify-content: space-around;
 
-						image {
-							height: 100%;
-							width: 100%;
-							border-radius: 20rpx;
-						}
+					.server-title {
+						font-size: 34rpx;
 					}
 
-					.info {
-						padding: 20rpx;
-						color: #555;
-						flex: 1;
+					.texture {
+						color: #B8B8B8;
+						margin: 10rpx 0rpx;
+					}
 
-						.title {
-							font-size: 28rpx;
-							font-weight: 900;
-						}
+					.stepper {
+						margin-bottom: 10rpx;
 
-						.desc {
-							font-size: 22rpx;
-							color: #777;
-							margin-top: 10rpx;
+						&::v-deep .uv-number-box__input {
+							color: $uni-color !important;
 						}
+					}
 
-						.price-box {
-							display: flex;
-							justify-content: space-between;
-							color: #f40;
-							font-size: 30rpx;
-							font-weight: 900;
-							.price{
-								&>view:nth-child(2){
-									font-size: 22rpx;
-									color: #777;
-									text{
-										font-size: 26rpx;
-										font-weight: 900;
-									}
-								}
-							}
+					.sales-volume {
+						display: flex;
+						align-items: center;
+						color: #B8B8B8;
+						font-size: 26rpx;
+
+						image {
+							width: 25rpx;
+							height: 25rpx;
 						}
+
 					}
+
 				}
 			}
-			
-			.submit-box{
-				background-color: #fff;
-				padding: 20rpx;
+
+			//cell单元格(地址)
+			.cell-item {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				background: white;
 				border-radius: 20rpx;
-				&>view:nth-child(2){
-					margin-top: 20rpx;
-				}
-				&>view{
+				padding: 20rpx;
+				box-sizing: border-box;
+
+				.cell-item-left {
 					display: flex;
-					justify-content: space-between;
 					align-items: center;
-					font-size: 28rpx;
-					&>view:nth-child(1){
-						font-weight: 900;
+					width: 90%;
+
+					.cell-icon {
+						width: 40rpx;
+					}
+
+					.user-name,
+					.user-address {
+						white-space: nowrap;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						width: 150rpx;
+						padding-left: 20rpx;
+						box-sizing: border-box;
 					}
-					&>view:nth-child(2){
-						color: #999;
-						font-size: 24rpx;
+					
+					.descript {
+						color: #888888;
 					}
-					.totalPrice{
-						color: #f40 !important;
-						font-size: 34rpx !important;
-						font-weight: 900;
+
+					.user-address {
+						width: calc(100% - 230rpx);
 					}
 				}
-				.remark{
-					margin-top: 30rpx;
-					input{
-						background-color: #f3f3f3;
-						padding: 14rpx 20rpx;
-						border-radius: 20rpx;
-						flex: 1;
-					}
+
+				.cell-item-right {
+					width: 10%;
+					display: flex;
+					justify-content: flex-end;
+				}
+			}
+
+			.cell-list {
+				margin: 20rpx 0rpx;
+				border-radius: 20rpx;
+				overflow: hidden;
+
+				.cell-item {
+					border-radius: 0rpx;
+				}
+			}
+
+			// 提示
+			.hint {
+				font-size: 26rpx;
+				margin-top: 60rpx;
+				color: #BFBFBF;
+			}
+
+			// 用户协议
+			.agreement {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				padding: 10px 0;
+
+				.van-checkbox {
+					margin-right: 5rpx;
+				}
+
+				text {
+					color: $uni-color;
+				}
+			}
+			
+			// 下单
+			.submit {
+				position: fixed;
+				bottom: 0;
+				left: 0;
+				width: 100%;
+				height: 60px;
+				background-color: #fff;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+			
+				.price {
+					color: #F39637;
+					padding: 0 20px;
+				}
+			
+				.btn {
+					background: $uni-color;
+					color: white;
+					width: 120px;
+					height: 45px;
+					border-radius: 23px;
+					font-size: 16px;
+					display: flex;
+					justify-content: center;
+					align-items: center;
 				}
 			}
 		}

pages_order/product/productDetail.vue

@@ -1,65 +1,58 @@
 <template>
 	<view class="page">
-		<navbar
-		bgColor="transparent"
-		style="position: absolute;"
-		leftClick @leftClick="$utils.navigateBack" />
-		
+		<!-- 导航栏 -->
+		<navbar title="商品详情" leftClick @leftClick="$utils.navigateBack" />
+
 		<view class="swipe">
-			<uv-swiper 
-			:list="productDetail.image
-			&& productDetail.image.split(',')" 
-			indicator
-			height="520rpx"></uv-swiper>
+			<uv-swiper :list="productDetail.image
+			&& productDetail.image.split(',')" indicator height="520rpx"></uv-swiper>
 		</view>
-		
+
+		<!-- 商品标题 -->
 		<view class="info">
-			<view style="width: 440rpx;">
-				<view class="title">
-					{{ productDetail.title }}
-				</view>
-				<view class="desc">
-					{{ productDetail.sku }}
-				</view>
+			<view class="title">
+				{{ productDetail.title }}
 			</view>
-			<view class=""
-			v-if="[2].includes(productDetail.type)">
-				<view class="price">
-					会员价￥<text>{{ productDetail.vipPrice }}</text>
-				</view>
-				<view class="oldPrice">
-					零售价￥<text>{{ productDetail.price }}</text>
+		</view>
+
+		<!-- 服务 -->
+		<view class="server">
+			<view class="setver-main">
+				<view class="title">服务</view>
+				<view class="descript">
+					免费上门退·7天无理由退货·快递发货
 				</view>
 			</view>
-			
-			<view class=""
-			v-else>
-				<view class="price">
-					价格￥<text>{{ productDetail.price }}</text>
-				</view>
-				<view class="oldPrice">
-					原价￥<text>{{ productDetail.oldPrice }}</text>
+
+			<view class="server-arraw">
+				<uv-icon name="arrow-right"></uv-icon>
+			</view>
+		</view>
+
+		<!-- 参数 -->
+		<view class="params">
+			<view class="params-main">
+				<view class="title">参数</view>
+				<view class="descript">
+					品牌；适应人群
 				</view>
 			</view>
+
+			<view class="server-arraw">
+				<uv-icon name="arrow-right"></uv-icon>
+			</view>
+		</view>
+
+		<!-- 商品详情 -->
+		<view class="item-line">
+			<view class="before"></view>
+			<view class="label">商品详情</view>
 		</view>
-		
+
 		<uv-parse :content="productDetail.details"></uv-parse>
-		
+
 		<!-- 分享和购买按钮 -->
-		<submit 
-		@addCart="addCart"
-		@submit="submit"
-		:detail="productDetail"
-		/>
-		
-		<!-- <submit
-		@submit="$refs.submitUnitSelect.open()"
-		@share="share"/> -->
-		
-		<!-- 选择规格 -->
-		<!-- <submitUnitSelect 
-		:detail="productDetail"
-		ref="submitUnitSelect"/> -->
+		<submit @service="service" @submit="submit" :detail="productDetail" />
 	</view>
 </template>
 
@@ -67,17 +60,17 @@
 	import submit from '../components/product/submit.vue'
 	import submitUnitSelect from '../components/product/submitUnitSelect.vue'
 	export default {
-		components : {
+		components: {
 			submit,
 			submitUnitSelect
 		},
 		data() {
 			return {
-				productDetail : {
-					image : '',
-					details : '',
+				productDetail: {
+					image: '',
+					details: '',
 				},
-				id : 0,
+				id: 0,
 			}
 		},
 		onLoad(args) {
@@ -88,92 +81,117 @@
 		},
 		methods: {
 			// 分享商品
-			share(){
-				
+			share() {
+
 			},
 			// 立即下单
-			submit(){
-				
+			submit() {
 				this.$store.commit('setPayOrderProduct', [
 					this.productDetail
 				])
-				
+
 				this.$utils.navigateTo('/pages_order/order/createOrder')
 			},
 			// 获取商品
-			getRiceProductDetail(){
+			getRiceProductDetail() {
 				this.$api('getRiceProductDetail', {
-					id : this.id
+					id: this.id
 				}, res => {
-					if(res.code == 200){
+					if (res.code == 200) {
 						res.result.num = 1
 						this.productDetail = res.result
 					}
 				})
 			},
-			// 添加购物车
-			addCart(){
-				this.$api('addCart', {
-					shopId : this.id,
-					num : 1,
-				}, res => {
-					if(res.code == 200){
-						uni.showToast({
-							title: '加入购物车成功',
-							icon: 'none'
-						})
-					}
-				})
+			// 联系客服
+			service() {
+				console.log("联系客服")
+				// this.$api('service', {
+				// 	shopId: this.id,
+				// 	num: 1,
+				// }, res => {
+				// 	if (res.code == 200) {
+				// 		uni.showToast({
+				// 			title: '加入购物车成功',
+				// 			icon: 'none'
+				// 		})
+				// 	}
+				// })
 			},
 		}
 	}
 </script>
 
 <style scoped lang="scss">
-.page{
-	.swipe{
-		
-	}
-	.info{
-		padding: 30rpx;
-		background-color: #fff;
-		display: flex;
-		justify-content: space-between;
-		.title{
-			font-size: 34rpx;
-			font-weight: 900;
-		}
-		.price{
-			font-size: 34rpx;
-			color: $uni-color;
-			font-weight: 900;
-			text-align: right;
+	.page {
+		.swipe {}
+
+		// 商品标题
+		.info {
+			padding: 20rpx;
+			background-color: #fff;
+
+			.title {
+				font-size: 36rpx;
+				font-weight: 900;
+			}
 		}
-		.oldPrice{
-			font-size: 26rpx;
-			color: #999;
-			text-align: right;
-			// text-decoration: line-through;
-			margin-top: 14rpx;
+
+		// 服务 & 参数
+		.server,
+		.params {
+			background: white;
+			display: flex;
+			justify-content: space-between;
+			flex-wrap: wrap;
+			padding: 30rpx 20rpx;
+			box-sizing: border-box;
+
+			.setver-main,
+			.params-main {
+				display: flex;
+				flex-wrap: wrap;
+				width: 90%;
+				font-size: 32rpx;
+
+				.title {
+					color: #7C7C7C;
+					margin-right: 20rpx;
+				}
+			}
+
+			.server-arraw {
+				display: flex;
+				justify-content: flex-end;
+				text-align: right;
+			}
 		}
-		.desc{
-			font-size: 26rpx;
-			color: #777;
-			margin-top: 20rpx;
+
+		// 商品详情
+		.item-line {
+			display: flex;
+			background: white;
+			padding: 0rpx 20rpx;
+			box-sizing: border-box;
+			font-size: 34rpx;
+			padding: 30rpx 20rpx;
 		}
-	}
-	.info-unit{
-		margin-top: 20rpx;
-		padding: 30rpx;
-		background-color: #fff;
-		/deep/ text{
-			font-size: 26rpx;
+
+		.item-line .before {
+			content: "";
+			width: 8rpx;
+			height: 30rpx;
+			background: $uni-color;
+			border-radius: 4rpx;
+			margin-right: 10rpx;
+			margin-top: 15rpx;
 		}
-		/deep/ .text{
-			color: #7C7C7C;
-			margin-right: 20rpx;
-			font-size: 26rpx;
+
+		.item-line .label {
+			display: flex;
+			align-items: center;
+			width: 152rpx;
+			height: 60rpx;
 		}
 	}
-}
-</style>
+</style>

static/image/center/11.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1726157567630" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6220" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M513.536 628.6336c101.6832 0 280.8832 38.7072 310.8864 193.7408 77.5168-77.5168 124.928-185.9584 124.928-305.0496 0-241.152-194.6624-435.8144-435.8144-435.8144S77.7216 277.0944 77.7216 517.2224c0 119.0912 47.4112 227.6352 124.928 306.0736 30.0032-154.9312 209.2032-194.6624 310.8864-194.6624z m0-439.7056c112.3328 0 204.3904 91.0336 204.3904 204.3904 0 112.3328-91.0336 204.3904-204.3904 204.3904a203.776 203.776 0 0 1-204.3904-204.3904c0.1024-112.4352 92.0576-204.3904 204.3904-204.3904z m0 0" fill="#cdcdcd" p-id="6221"></path><path d="M515.4816 1006.8992c-65.8432 0-129.8432-12.9024-189.952-38.4-58.1632-24.576-110.2848-59.8016-155.136-104.5504A485.56032 485.56032 0 0 1 65.8432 708.8128c-25.6-60.2112-38.5024-124.1088-38.5024-189.952 0-65.8432 12.9024-129.8432 38.4-189.952 24.576-58.1632 59.8016-110.2848 104.5504-155.136 44.8512-44.8512 96.9728-79.9744 155.136-104.5504C385.6384 43.6224 449.536 30.72 515.4816 30.72c65.8432 0 129.8432 12.9024 189.952 38.4 58.1632 24.576 110.2848 59.8016 155.136 104.5504 44.8512 44.8512 79.9744 96.9728 104.5504 155.136C990.6176 389.0176 1003.52 452.9152 1003.52 518.8608c0 65.8432-12.9024 129.8432-38.4 189.952-24.576 58.1632-59.8016 110.2848-104.5504 155.136a485.56032 485.56032 0 0 1-155.136 104.5504 484.39296 484.39296 0 0 1-189.952 38.4z m0-936.8576c-60.6208 0-119.3984 11.8784-174.6944 35.2256a447.76448 447.76448 0 0 0-142.6432 96.1536A444.42624 444.42624 0 0 0 101.9904 344.064a446.70976 446.70976 0 0 0-35.2256 174.6944c0 60.6208 11.8784 119.3984 35.2256 174.6944 22.6304 53.4528 54.9888 101.4784 96.1536 142.6432 41.1648 41.2672 89.1904 73.6256 142.6432 96.1536 55.296 23.3472 114.0736 35.2256 174.6944 35.2256 60.6208 0 119.3984-11.8784 174.6944-35.2256 53.4528-22.6304 101.4784-54.9888 142.6432-96.1536 41.2672-41.1648 73.6256-89.1904 96.1536-142.6432 23.3472-55.296 35.2256-114.0736 35.2256-174.6944 0-60.6208-11.8784-119.3984-35.2256-174.6944a447.76448 447.76448 0 0 0-96.1536-142.6432 444.42624 444.42624 0 0 0-142.6432-96.1536 447.44704 447.44704 0 0 0-174.6944-35.2256z m0 0" fill="#cdcdcd" p-id="6222"></path></svg>

uni_modules/uni-scss/changelog.md

@@ -0,0 +1,8 @@
+## 1.0.3（2022-01-21）
+- 优化 组件示例
+## 1.0.2（2021-11-22）
+- 修复 / 符号在 vue 不同版本兼容问题引起的报错问题
+## 1.0.1（2021-11-22）
+- 修复 vue3中scss语法兼容问题
+## 1.0.0（2021-11-18）
+- init

uni_modules/uni-scss/index.scss

@@ -0,0 +1 @@
+@import './styles/index.scss';

uni_modules/uni-scss/package.json

@@ -0,0 +1,82 @@
+{
+  "id": "uni-scss",
+  "displayName": "uni-scss 辅助样式",
+  "version": "1.0.3",
+  "description": "uni-sass是uni-ui提供的一套全局样式 ，通过一些简单的类名和sass变量，实现简单的页面布局操作，比如颜色、边距、圆角等。",
+  "keywords": [
+    "uni-scss",
+    "uni-ui",
+    "辅助样式"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": "^3.1.0"
+  },
+  "dcloudext": {
+    "category": [
+        "JS SDK",
+        "通用 SDK"
+    ],
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui"
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "u"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "n",
+          "联盟": "n"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}

uni_modules/uni-scss/readme.md

@@ -0,0 +1,4 @@
+`uni-sass` 是 `uni-ui`提供的一套全局样式 ，通过一些简单的类名和`sass`变量，实现简单的页面布局操作，比如颜色、边距、圆角等。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-sass)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 

uni_modules/uni-scss/styles/index.scss

@@ -0,0 +1,7 @@
+@import './setting/_variables.scss';
+@import './setting/_border.scss';
+@import './setting/_color.scss';
+@import './setting/_space.scss';
+@import './setting/_radius.scss';
+@import './setting/_text.scss';
+@import './setting/_styles.scss';

uni_modules/uni-scss/styles/setting/_border.scss

@@ -0,0 +1,3 @@
+.uni-border {
+	border: 1px $uni-border-1 solid;
+}

uni_modules/uni-scss/styles/setting/_color.scss

@@ -0,0 +1,66 @@
+
+// TODO 暂时不需要 class ，需要用户使用变量实现 ，如果使用类名其实并不推荐
+// @mixin get-styles($k,$c) {
+// 	@if $k == size or $k == weight{
+// 		font-#{$k}:#{$c}
+// 	}@else{
+// 		#{$k}:#{$c}
+// 	}
+// }
+$uni-ui-color:(
+	// 主色
+	primary: $uni-primary,
+	primary-disable: $uni-primary-disable,
+	primary-light: $uni-primary-light,
+	// 辅助色
+	success: $uni-success,
+	success-disable: $uni-success-disable,
+	success-light: $uni-success-light,
+	warning: $uni-warning,
+	warning-disable: $uni-warning-disable,
+	warning-light: $uni-warning-light,
+	error: $uni-error,
+	error-disable: $uni-error-disable,
+	error-light: $uni-error-light,
+	info: $uni-info,
+	info-disable: $uni-info-disable,
+	info-light: $uni-info-light,
+	// 中性色
+	main-color: $uni-main-color,
+	base-color: $uni-base-color,
+	secondary-color: $uni-secondary-color,
+	extra-color: $uni-extra-color,
+	// 背景色
+	bg-color: $uni-bg-color,
+	// 边框颜色
+	border-1: $uni-border-1,
+	border-2: $uni-border-2,
+	border-3: $uni-border-3,
+	border-4: $uni-border-4,
+	// 黑色
+	black:$uni-black,
+	// 白色
+	white:$uni-white,
+	// 透明
+	transparent:$uni-transparent
+) !default;
+@each $key, $child in $uni-ui-color {
+	.uni-#{"" + $key} {
+		color: $child;
+	}
+	.uni-#{"" + $key}-bg {
+		background-color: $child;
+	}
+}
+.uni-shadow-sm {
+	box-shadow: $uni-shadow-sm;
+}
+.uni-shadow-base {
+	box-shadow: $uni-shadow-base;
+}
+.uni-shadow-lg {
+	box-shadow: $uni-shadow-lg;
+}
+.uni-mask {
+	background-color:$uni-mask;
+}

uni_modules/uni-scss/styles/setting/_radius.scss

@@ -0,0 +1,55 @@
+@mixin radius($r,$d:null ,$important: false){
+  $radius-value:map-get($uni-radius, $r) if($important, !important, null);
+  // Key exists within the $uni-radius variable
+  @if (map-has-key($uni-radius, $r) and  $d){
+		@if $d == t {
+				border-top-left-radius:$radius-value;
+				border-top-right-radius:$radius-value;
+		}@else if $d == r {
+				border-top-right-radius:$radius-value;
+				border-bottom-right-radius:$radius-value;
+		}@else if $d == b {
+				border-bottom-left-radius:$radius-value;
+				border-bottom-right-radius:$radius-value;
+		}@else if $d == l {
+				border-top-left-radius:$radius-value;
+				border-bottom-left-radius:$radius-value;
+		}@else if $d == tl {
+				border-top-left-radius:$radius-value;
+		}@else if $d == tr {
+				border-top-right-radius:$radius-value;
+		}@else if $d == br {
+				border-bottom-right-radius:$radius-value;
+		}@else if $d == bl {
+				border-bottom-left-radius:$radius-value;
+		}
+  }@else{
+		border-radius:$radius-value;
+  }
+}
+
+@each $key, $child in $uni-radius {
+	@if($key){
+		.uni-radius-#{"" + $key} {
+				@include radius($key)
+		}
+	}@else{
+		.uni-radius {
+				@include radius($key)
+		}
+	}
+}
+
+@each $direction in t, r, b, l,tl, tr, br, bl {
+	@each $key, $child in $uni-radius {
+		@if($key){
+			.uni-radius-#{"" + $direction}-#{"" + $key} {
+				@include radius($key,$direction,false)
+			}
+		}@else{
+			.uni-radius-#{$direction} {
+				@include radius($key,$direction,false)
+			}
+		}
+	}
+}

uni_modules/uni-scss/styles/setting/_space.scss

@@ -0,0 +1,56 @@
+
+@mixin fn($space,$direction,$size,$n) {
+	@if $n {
+		#{$space}-#{$direction}: #{$size*$uni-space-root}px
+	} @else {
+		 #{$space}-#{$direction}: #{-$size*$uni-space-root}px
+	}
+}
+@mixin get-styles($direction,$i,$space,$n){
+	@if $direction == t {
+		@include fn($space, top,$i,$n);
+	} 
+	@if $direction == r {
+		@include fn($space, right,$i,$n);
+	} 
+	@if $direction == b {
+		@include fn($space, bottom,$i,$n);
+	} 
+	@if $direction == l {
+	 @include fn($space, left,$i,$n);
+	} 
+	@if $direction == x {
+		@include fn($space, left,$i,$n);
+		@include fn($space, right,$i,$n);
+	} 
+	@if $direction == y {
+		@include fn($space, top,$i,$n);
+		@include fn($space, bottom,$i,$n);
+	} 
+	@if $direction == a {
+		@if $n {
+			#{$space}:#{$i*$uni-space-root}px;
+		} @else {
+			#{$space}:#{-$i*$uni-space-root}px;
+		}
+	} 
+}
+
+@each $orientation in m,p {
+	$space: margin;
+	@if $orientation == m {
+		$space: margin;
+	} @else {
+		$space: padding;
+	}
+	@for $i from 0 through 16 {
+		@each $direction in t, r, b, l, x, y, a {
+			.uni-#{$orientation}#{$direction}-#{$i} { 
+				@include  get-styles($direction,$i,$space,true);
+			} 
+			.uni-#{$orientation}#{$direction}-n#{$i} { 
+				@include  get-styles($direction,$i,$space,false);
+			}
+		}
+	}
+}