123456

components/recycle.vue

@@ -5,7 +5,7 @@
 			<view class="recycle_head">提示</view>
 			<view class="recycle_price center">
 				<text>￥{{ recycleMessage.amount }}</text>
-				<text>回收金币</text>
+				<text>退款金币</text>
 			</view>
 			<scroll-view class="scrolllist" scroll-y="true">
 				<view class="recycle_ul">
@@ -19,7 +19,7 @@
 				</view>
 			</scroll-view>
 
-			<view class="recycle_txt">回收规则：平台统一回收折扣10，回收金币直接放【我的】 - 【余额】</view>
+			<view class="recycle_txt">退款规则：平台统一回收折扣10，回收金币直接放【我的】 - 【余额】</view>
 			<view class="sure" @click="$refs.recycle.close()">确定</view>
 		</view>
 	</uni-popup>

http/api.js

@@ -6,6 +6,7 @@ const resetpwd = (data) => url.post('/api/user/resetpwd', data);
 const agreement = (data) => url.post('/api/common/agreement', data);
 // 提幣開關
 const checkSwitch = (data) => url.get('/api/index/checkSwitch', data);
+const checkSwitch2 = (data) => url.get('/api/index/checkSwitch2', data);
 // 首页接口
 const getPayKey = (data) => url.post('/api/wechat/getPayKey', data);
 const sumuv = (data) => url.post('/api/index/sumUv', {});
@@ -114,6 +115,7 @@ const boximages = (data) => url.post('/api/index/boximages', data)
 const setShai = (data) => url.post('/api/index/setShai', data)
 export default {
 	checkSwitch, //提幣開關
+	checkSwitch2, //提幣開關
 	sumuv, //统计uv
 	getVgoods, //假数据
 	lunbobox, //最新开盒轮播

manifest.json

@@ -2,8 +2,8 @@
     "name" : "潮盲岛",
     "appid" : "__UNI__ED94684",
     "description" : "",
-    "versionName" : "1.0.3",
-    "versionCode" : 103,
+    "versionName" : "1.0.6",
+    "versionCode" : 106,
     "transformPx" : false,
     /* 5+App特有相关 */
     "app-plus" : {

pages.json

@@ -10,6 +10,89 @@
 			}
 
 		},
+		{
+			"path": "pages/money/pay",
+			"style": {
+				"navigationBarTitleText": "支付"
+			}
+		},
+		{
+			"path": "pages/money/paySuccess",
+			"style": {
+				"navigationBarTitleText": "支付成功"
+			}
+		},
+		{
+			"path": "pages/money/wallet",
+			"style": {
+				"navigationBarTitleText": "我的钱包",
+				"app-plus": {
+					"titleNView": {
+						"type": "transparent"
+					}
+				}
+			}
+		},
+		{
+			"path": "pages/money/account",
+			"style": {
+				"navigationBarTitleText": "提现账号"
+			}
+		},
+		{
+			"path": "pages/money/withdrawal",
+			"style": {
+				"navigationBarTitleText": "提现"
+			}
+		},
+		{
+			"path": "pages/money/recharge",
+			"style": {
+				"navigationBarTitleText": "充值"
+			}
+		},
+		{
+			"path": "pages/order/order",
+			"style": {
+				"navigationBarTitleText": "我的订单",
+				"app-plus": {
+					"bounce": "none"
+				}
+			}
+		},
+		{
+			"path": "pages/order/expressInfo",
+			"style": {
+				"navigationBarTitleText": "快递详情"
+			}
+		},
+		{
+			"path": "pages/order/orderDetail",
+			"style": {
+				"navigationBarTitleText": "订单详情",
+				"app-plus": {
+					"bounce": "none"
+				}
+			}
+		},
+		{
+			"path": "pages/order/evaluate",
+			"style": {
+				"navigationBarTitleText": "评论"
+			}
+		},
+		{
+			"path": "pages/order/orderRefund",
+			"style": {
+				"navigationBarTitleText": "申请退款"
+			}
+		},
+		{
+			"path": "pages/order/createOrder",
+			"style": {
+				"navigationBarTitleText": "创建订单"
+			}
+		},
 		{
 			"path": "pages/index/index",
 			"style": {
@@ -437,7 +520,7 @@
 	"tabBar": {
 		"backgroundColor": "#FFFFFF",
 		"color": "#333333",
-		"selectedColor": "#1030ff",
+		"selectedColor": "#fe3b3b",
 		"list": [{
 				"iconPath": "static/image/tabbar/shouyeweixuanzhong@2x.png",
 				"selectedIconPath": "static/image/tabbar/shouyexuanzhong@2x.png",

pages/index/more.vue

@@ -25,29 +25,29 @@
 				<text>{{ item.name }}</text>
 			</view>
 		</view>
-		<view class="home_recommend_ul flex">
-			<view class="home_recommend_li" v-for="(item, index) in boxList" :key="index" @click="goMessage(item, 0)">
-				<view class="home_recommend_li_img">
-					<view class="home_recommend_li_img_top flex">
-						<view class="home_recommend_li_img_box"><image :src="item.image" mode="aspectFill"></image></view>
+		<view class="main flex">
+			<view class="main-item" v-for="(item, index) in boxList" :key="index" @click="goMessage(item, 0)">
+				<view class="main-item-icon">
+					<view class="main-item-icon-box flex">
+						<view class="main-item-icon-box-bg"><image :src="item.image" mode="aspectFill"></image></view>
 					</view>
 				</view>
-				<view class="home_recommend_li_main">
-					<view class="home_recommend_li_name">{{ item.box_name }}</view>
-					<view class="home_recommend_li_glod flex">
+				<view class="main-item-info">
+					<view class="main-item-name">{{ item.box_name }}</view>
+					<view class="main-item-glod-box flex">
 						<image src="https://www.chaomangdao.com/image/home/gold.png" mode=""></image>
-						<view class="home_recommend_li_glod_font">{{ item.coin_price }}金币</view>
+						<view class="main-item-price">{{ item.coin_price }}金币</view>
 					</view>
-					<view class="home_recommend_li_price">
-						<view class="home_recommend_li_price_icon">
-							<view class="home_recommend_li_price_icon_bg"><image src="https://www.chaomangdao.com/image/home/bdbz.png" mode=""></image></view>
-							<view class="home_recommend_li_price_icon_font">保底必中</view>
+					<view class="main-item-money">
+						<view class="main-item-money-box">
+							<view class="main-item-money-box-bg"><image src="https://www.chaomangdao.com/image/home/bdbz.png" mode=""></image></view>
+							<view class="main-item-money-box-font">保底必中</view>
 						</view>
-						<view class="home_recommend_li_price_font">{{ item.price_min }}元~{{ item.price_max }}元</view>
+						<view class="main-item-money_font">{{ item.price_min }}元~{{ item.price_max }}元</view>
 					</view>
-					<view class="home_recommend_shop">
-						<view class="home_recommend_li_img_right" v-if="item.right.length != 0">
-							<view class="home_recommend_li_img_bot"><image :src="items" mode="aspectFill" v-for="(items, index) in item.bot" :key="index"></image></view>
+					<view class="main-item-shop">
+						<view class="main-item-icon-right" v-if="item.right.length != 0">
+							<view class="main-item-icon-bot"><image :src="items" mode="aspectFill" v-for="(items, index) in item.bot" :key="index"></image></view>
 							<image :src="items" mode="aspectFill" v-for="(items, index) in item.right" :key="index"></image>
 						</view>
 						<text>共{{ item.goods_num }}款商品</text>
@@ -368,10 +368,10 @@ page {
 		}
 	}
 }
-.home_recommend_ul {
+.main {
 	flex-wrap: wrap;
 	padding: 0 28rpx;
-	.home_recommend_li {
+	.main-item {
 		width: 700rpx;
 		background: #ffffff;
 		border-radius: 15rpx;
@@ -382,10 +382,10 @@ page {
 		border-radius: 10rpx;
 		display: flex;
 		align-items: center;
-		.home_recommend_li_img {
+		.main-item-icon {
 			width: 190rpx;
 			height: 190rpx;
-			.home_recommend_li_img_box {
+			.main-item-icon-box-bg {
 				image {
 					width: 190rpx;
 					height: 190rpx;
@@ -393,10 +393,10 @@ page {
 				}
 			}
 		}
-		.home_recommend_li_main {
+		.main-item-info {
 			padding-left: 10rpx;
 		}
-		.home_recommend_li_price {
+		.main-item-money {
 			padding: 0 8rpx 0 0;
 			margin: 10rpx 0 0;
 			background: #fff1eb;
@@ -404,12 +404,12 @@ page {
 			align-items: center;
 			border-top-right-radius: 14rpx;
 			border-bottom-right-radius: 14rpx;
-			.home_recommend_li_price_icon {
+			.main-item-money-box {
 				position: relative;
 				width: 124rpx;
 				height: 32rpx;
 				padding-left: 36rpx;
-				.home_recommend_li_price_icon_bg {
+				.main-item-money-box-bg {
 					position: absolute;
 					top: 0;
 					left: 0;
@@ -421,7 +421,7 @@ page {
 						height: 100%;
 					}
 				}
-				.home_recommend_li_price_icon_font {
+				.main-item-money-box-font {
 					position: relative;
 					z-index: 2;
 					font-size: 18rpx;
@@ -431,7 +431,7 @@ page {
 					line-height: 32rpx;
 				}
 			}
-			.home_recommend_li_price_font {
+			.main-item-money_font {
 				font-size: 24rpx;
 				font-family: PingFang SC;
 				font-weight: bold;
@@ -439,7 +439,7 @@ page {
 				line-height: 32rpx;
 			}
 		}
-		.home_recommend_li_name {
+		.main-item-name {
 			font-family: PingFang SC;
 			font-weight: bold;
 			color: #333333;
@@ -449,7 +449,7 @@ page {
 			-webkit-line-clamp: 2;
 			overflow: hidden;
 		}
-		.home_recommend_li_glod {
+		.main-item-glod-box {
 			justify-content: flex-start;
 			align-items: center;
 			margin-top: 22rpx;
@@ -457,7 +457,7 @@ page {
 				width: 32rpx;
 				height: 32rpx;
 			}
-			.home_recommend_li_glod_font {
+			.main-item-price {
 				font-size: 24rpx;
 				font-family: PingFang SC;
 				font-weight: bold;
@@ -467,7 +467,7 @@ page {
 		}
 	}
 }
-.home_recommend_shop {
+.main-item-shop {
 	margin-top: 10rpx;
 	display: flex;
 	align-items: flex-end;
@@ -478,7 +478,7 @@ page {
 		color: #999999;
 	}
 }
-.home_recommend_li_img_right {
+.main-item-icon-right {
 	display: flex;
 	align-items: center;
 	image {
@@ -492,7 +492,7 @@ page {
 			margin-right: 0;
 		}
 	}
-	.home_recommend_li_img_bot {
+	.main-item-icon-bot {
 		display: flex;
 		align-items: center;
 		image {

pages/me/order-details.vue

@@ -17,9 +17,7 @@
 			<view class="apply_main_name">订单信息</view>
 			<view class="apply_main_ul">
 				<view class="apply_main_li flexs">
-					<view class="apply_main_li_img">
-						<image :src="details.goods_image" mode="aspectFill"></image>
-					</view>
+					<view class="apply_main_li_img"><image :src="details.goods_image" mode="aspectFill"></image></view>
 					<view class="apply_main_li_main flex">
 						<view class="apply_main_li_name">{{ details.goods_name }}</view>
 						<view class="apply_main_li_time">开箱日期：{{ details.box_open_time }}</view>
@@ -39,7 +37,7 @@
 		</view>
 		<view class="apply_order apply_order_number">
 			<view class="apply_order_li flex">
-				<text>订单号：{{  details.delivery_order_no}}</text>
+				<text>订单号：{{ details.delivery_order_no }}</text>
 			</view>
 			<view class="apply_order_li flex">
 				<text>下单时间：{{ details.delivery_apply_time }}</text>
@@ -60,55 +58,68 @@
 			</view>
 		</view>
 		<button class="apply_btn" hover-class="hover-view" v-if="details.status == 'unreceived'" @click="affirm">确认收货</button>
+		<button class="apply_btn" hover-class="hover-view" v-if="details.status == 'unreceived' && canTi == 1" @click="affirm1">申请退货</button>
 	</view>
 </template>
 
 <script>
-	export default {
-		data() {
-			return {
-				id:'',//订单ID
-				details:{},//详情
-			};
+export default {
+	data() {
+		return {
+			id: '', //订单ID
+			details: {}, //详情
+			canTi: ''
+		};
+	},
+	methods: {
+		//查看物流
+		lookLogistics() {
+			uni.navigateTo({ url: '/pages/me/logistics' });
 		},
-		methods:{
-			//查看物流
-			lookLogistics () {
-				uni.navigateTo({url:'/pages/me/logistics'})
-			},
-			//获取订单详情
-			getDetail () {
-				this.$api.deliveryOrderDetail({delivery_order_id:this.id}).then(res=>{
-					if (res.code === 1) {
-						this.details = res.data
-					}
-				})
-			},
-			//确认收货
-			affirm () {
-				uni.showModal({
-					content: '是否确认收货？',
-					success:  (res) => {
-						if (res.confirm) {
-							this.$api.confirmReceipt({delivery_order_id:this.id}).then(res=>{
-								if (res.code === 1) {
-									uni.showToast({title:res.msg})
-									setTimeout(()=>{
-										uni.navigateBack()
-									},800)
-								}
-							})
-						}
+		//获取订单详情
+		getDetail() {
+			this.$api.deliveryOrderDetail({ delivery_order_id: this.id }).then(res => {
+				if (res.code === 1) {
+					this.details = res.data;
+				}
+			});
+		},
+		//确认收货
+		affirm() {
+			uni.showModal({
+				content: '是否确认收货？',
+				success: res => {
+					if (res.confirm) {
+						this.$api.confirmReceipt({ delivery_order_id: this.id }).then(res => {
+							if (res.code === 1) {
+								uni.showToast({ title: res.msg });
+								setTimeout(() => {
+									uni.navigateBack();
+								}, 800);
+							}
+						});
 					}
-				});
-				
-			}
+				}
+			});
 		},
-		onLoad ({id}) {
-			this.id = id
-			this.getDetail()
+		affirm1() {
+			uni.showModal({
+				content: '申请退货成功，请耐心等待审核。',
+				success: res => {
+					if (res.confirm) {
+					}
+				}
+			});
 		}
+	},
+	onLoad({ id }) {
+		this.id = id;
+		this.getDetail();
+		this.$api.checkSwitch2().then(({ data }) => {
+			this.canTi = data;
+		});
 	}
+};
 </script>
 
 <style lang="scss">
@@ -122,7 +133,7 @@
 	.apply_head_ipt {
 		padding: 30rpx;
 		border-radius: 10rpx;
-		background: #FFFFFF;
+		background: #ffffff;
 		input {
 			font-size: 28rpx;
 		}
@@ -152,80 +163,79 @@
 	font-size: 28rpx;
 	font-weight: bold;
 	padding: 30rpx 0 20rpx 0;
-	
 }
 .apply_main_li {
-		padding: 30rpx;
-		background: #FFFFFF;
-		border-radius: 20rpx;
-		.apply_main_li_img {
-			width: 168rpx;
-			height: 168rpx;
-			image {
-				border-radius: 10rpx;
-			}
-			margin-right: 20rpx;
-		}
-		.apply_main_li_main {
-			height: 168rpx;
-			align-items: flex-start;
-			flex-direction: column;
-			justify-content: space-around;
-		}
-		.apply_main_li_name {
-			font-size: 28rpx;
-			line-height: 36rpx;
-		}
-		.apply_main_li_time {
-			color: #999999;
+	padding: 30rpx;
+	background: #ffffff;
+	border-radius: 20rpx;
+	.apply_main_li_img {
+		width: 168rpx;
+		height: 168rpx;
+		image {
+			border-radius: 10rpx;
 		}
+		margin-right: 20rpx;
 	}
-	.apply_order {
-		padding: 0 30rpx 0 20rpx ;
-		border-radius: 10rpx;
-		background: #FFFFFF;
-		margin-top: 20rpx;
-		.apply_order_li {
-			padding: 30rpx 0;
-			text {
-				font-size: 26rpx;
-				&:last-child {
-					color: #999999;
-				}
-			}
-			.red {
-				color: #CF271B !important;
-			}
-		}
+	.apply_main_li_main {
+		height: 168rpx;
+		align-items: flex-start;
+		flex-direction: column;
+		justify-content: space-around;
+	}
+	.apply_main_li_name {
+		font-size: 28rpx;
+		line-height: 36rpx;
+	}
+	.apply_main_li_time {
+		color: #999999;
 	}
-	.apply_order_number {
-		padding: 30rpx 20rpx;
-		.apply_order_li {
-			padding: 0;
-			margin-bottom: 30rpx;
+}
+.apply_order {
+	padding: 0 30rpx 0 20rpx;
+	border-radius: 10rpx;
+	background: #ffffff;
+	margin-top: 20rpx;
+	.apply_order_li {
+		padding: 30rpx 0;
+		text {
+			font-size: 26rpx;
 			&:last-child {
-				margin-bottom: 0;
-			}
-			.logistics {
-				width: 130rpx;
-				height: 44rpx;
-				text-align: center;
-				line-height: 44rpx;
-				color: #FFFFFF !important;
-				font-size: 24rpx;
-				background: #F6AF32;
-				border-radius: 22rpx;
+				color: #999999;
 			}
 		}
+		.red {
+			color: #cf271b !important;
+		}
 	}
-	.apply_btn {
-		color: #333333;
-		font-size: 30rpx;
-		font-weight: bold;
-		height: 98rpx;
-		margin-top: 45rpx;
-		background: #FFFFFF;
-		box-shadow: 0rpx 0rpx 121rpx 0rpx rgba(63, 52, 2, 0.12);
-		border-radius: 10rpx;
+}
+.apply_order_number {
+	padding: 30rpx 20rpx;
+	.apply_order_li {
+		padding: 0;
+		margin-bottom: 30rpx;
+		&:last-child {
+			margin-bottom: 0;
+		}
+		.logistics {
+			width: 130rpx;
+			height: 44rpx;
+			text-align: center;
+			line-height: 44rpx;
+			color: #ffffff !important;
+			font-size: 24rpx;
+			background: #f6af32;
+			border-radius: 22rpx;
+		}
 	}
+}
+.apply_btn {
+	color: #333333;
+	font-size: 30rpx;
+	font-weight: bold;
+	height: 98rpx;
+	margin-top: 45rpx;
+	background: #ffffff;
+	box-shadow: 0rpx 0rpx 121rpx 0rpx rgba(63, 52, 2, 0.12);
+	border-radius: 10rpx;
+}
 </style>

pages/me/wallet.vue

@@ -119,7 +119,7 @@ export default {
 			font-size: 30rpx;
 		}
 		.blue {
-			color: #327cf6;
+			color: #fe3b3b;
 		}
 	}
 }

pages/money/account.vue

@@ -0,0 +1,221 @@
+<template>
+	<view class="content">
+		<view class="navbar">
+			<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
+		</view>
+
+		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
+			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
+				<view class="row b-b">
+					<text class="tit">姓名</text>
+					<input class="input" v-model="tabItem.orderList.name" type="text" placeholder="提款人姓名" placeholder-class="placeholder" />
+				</view>
+				<view class="row b-b">
+					<text class="tit">{{ tabIndex == 0 ? '账号' : '银行卡号' }}</text>
+					<input class="input" v-model="tabItem.orderList.code" type="text" placeholder="请输入账号" placeholder-class="placeholder" />
+				</view>
+				<view class="row b-b" v-if="tabIndex == 1">
+					<text class="tit">所属银行</text>
+					<input class="input" v-model="tabItem.orderList.bankName" type="text" placeholder="请输入账号" placeholder-class="placeholder" />
+				</view>
+			</swiper-item>
+		</swiper>
+
+		<button class="add-btn up" @click="confirm">提交申请</button>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			tabCurrentIndex: 0,
+			navList: [
+				{
+					state: 0,
+					text: '支付宝',
+					loadingType: 'more',
+					orderList: {
+						name: '',
+						code: '',
+						id: ''
+					}
+				},
+				{
+					state: 1,
+					text: '银行卡',
+					loadingType: 'more',
+					orderList: {
+						name: '',
+						code: '',
+						bankName: '',
+						id: ''
+					}
+				}
+			]
+		};
+	},
+
+	onLoad(options) {
+		this.tabCurrentIndex = +options.state || 0;
+		this.loadAli();
+		this.loadBank();
+	},
+
+	methods: {
+		//加载数据
+		loadAli(source) {
+			aliInfo({}).then(({ data }) => {
+				let order = this.navList[0].orderList;
+				this.$set(order, 'name', data.fullname);
+				this.$set(order, 'code', data.alino);
+				this.$set(order, 'id', data.id);
+			});
+		},
+		loadBank() {
+			bankInfo({}).then(({ data }) => {
+				let order = this.navList[1].orderList;
+				this.$set(order, 'name', data.fullname);
+				this.$set(order, 'code', data.bankno);
+				this.$set(order, 'bankName', data.bank);
+				this.$set(order, 'id', data.id);
+			});
+		},
+		//swiper 切换
+		changeTab(e) {
+			this.tabCurrentIndex = e.target.current;
+		},
+		//顶部tab点击
+		tabClick(index) {
+			this.tabCurrentIndex = index;
+		},
+		// 提交保存
+		confirm() {
+			let obj = this;
+			let arr = obj.navList[obj.tabCurrentIndex].orderList;
+			if (obj.tabCurrentIndex == 1) {
+				obj.setBankInfo({
+					fullname: arr.name,
+					bank: arr.bankName,
+					bankno: arr.code,
+					id: arr.id
+				});
+			}
+			if (obj.tabCurrentIndex == 0) {
+				obj.setAliInfo({
+					fullname: arr.name,
+					alino: arr.code,
+					id: arr.id
+				});
+			}
+		},
+		/* 保存银行卡详细 */
+		setBankInfo(obj) {
+			setBankInfo(obj)
+				.then(e => {
+					uni.showToast({
+						title: '修改成功',
+						duration: 2000,
+						position: 'top'
+					});
+					this.$api.prePage().dataUp();
+					setTimeout(() => {
+						uni.navigateBack();
+					}, 1500);
+				})
+				.catch(e => {
+					console.log(e);
+				});
+		},
+		// 修改支付宝信息
+		setAliInfo(obj) {
+			setAliInfo(obj)
+				.then(e => {
+					uni.showToast({
+						title: '修改成功',
+						duration: 2000,
+						position: 'top'
+					});
+					this.$api.prePage().dataUp();
+					setTimeout(() => {
+						uni.navigateBack();
+					}, 1500);
+				})
+				.catch(e => {
+					console.log(e);
+				});
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+.row {
+	display: flex;
+	align-items: center;
+	position: relative;
+	padding: 0 30rpx;
+	height: 110rpx;
+	background: #fff;
+	.tit {
+		flex-shrink: 0;
+		width: 120rpx;
+		font-size: 30rpx;
+	}
+	.input {
+		flex: 1;
+		font-size: 30rpx;
+	}
+	.iconlocation {
+		font-size: 36rpx;
+	}
+}
+page,
+.content {
+	height: 100%;
+}
+
+.swiper-box {
+	height: 750rpx;
+}
+
+.navbar {
+	display: flex;
+	height: 40px;
+	padding: 0 5px;
+	background: #fff;
+	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
+	position: relative;
+	z-index: 10;
+	.nav-item {
+		flex: 1;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 100%;
+		font-size: 15px;
+		position: relative;
+		&.current {
+			content: '';
+			position: absolute;
+			left: 50%;
+			bottom: 0;
+			transform: translateX(-50%);
+			width: 44px;
+			height: 0;
+		}
+	}
+}
+
+.add-btn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 690rpx;
+	height: 80rpx;
+	margin: 0 auto;
+	margin-top: 30rpx;
+	border-radius: 10rpx;
+	// box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
+}
+</style>

pages/money/pay.vue

@@ -0,0 +1,410 @@
+<template>
+	<view class="app">
+		<view class="price-box">
+			<text>支付金额</text>
+			<text class="price">{{ money }}</text>
+		</view>
+		<view class="pay-type-list">
+			<!-- v-if="ispg == 'android'" -->
+			<view class="type-item b-b" @click="changePayType(1)">
+				<text class="icon iconfont iconweixin"></text>
+				<view class="con">
+					<text class="tit">微信支付</text>
+					<text>推荐使用微信支付</text>
+				</view>
+				<label class="radio"><radio value="" color="#5dbc7c" :checked="payType == 1"></radio></label>
+			</view>
+			<!-- <view class="type-item b-b" @click="changePayType(2)">
+				<text class="icon iconfont iconzhifubao"></text>
+				<view class="con"><text class="tit">支付宝支付</text></view>
+				<label class="radio"><radio value="" color="#5dbc7c" :checked="payType == 2"></radio></label>
+			</view> -->
+			<!-- <view class="type-item" @click="changePayType(3)">
+				<text class="icon iconfont iconyue"></text>
+				<view class="con">
+					<text class="tit">余额支付</text>
+					<text>可用余额 ¥{{ now_money }}</text>
+				</view>
+				<label class="radio"><radio value="" color="#5dbc7c" :checked="payType == 3"></radio></label>
+			</view> -->
+		</view>
+		<text class="mix-btn" :class="{ clickbg: payLoding }" @click="!payLoding ? confirm() : ''">确认支付</text>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			payType: 1, //支付类型
+			payName: 'weixin',
+			orderInfo: {},
+			money: 0.0, //订单金额
+			now_money: 0.0, //余额
+			orderKey: '',
+			orderId: '', //保存订单id
+			payLoding: false, //判断是否支付中
+			type: '', //判断是否从订单中进入
+			// #ifdef H5
+			froms: '', //保存h5中数据来源对象
+			// #endif
+			pinkid: '', //保存拼团商品id
+			ispg: '' //是否是苹果
+		};
+	},
+	onLoad(options) {
+		console.log(options, 'options');
+		this.ispg = uni.getSystemInfoSync().platform;
+		console.log(this.ispg);
+		if (options.type == 1) {
+			this.type = 1;
+			this.orderId = options.ordid;
+			this.money = options.money;
+		} else {
+			this.orderKey = options.key;
+			let prepage = this.$api.prePage();
+			computedOrderkey({
+				orderkey: this.orderKey,
+				couponId: prepage.couponChecked.id, //优惠券编号
+				addressId: prepage.addressData.id, //地址编号
+				useIntegral: prepage.checkedPoints ? 1 : 0
+			}).then(({ data }) => {
+				// 获取支付金额
+				this.money = data.result.pay_price;
+			});
+		}
+		// 保存pinkid
+		if (options.pinkid) {
+			this.pinkid = options.pinkid;
+		}
+		// 载入余额
+		balance({}).then(({ data }) => {
+			// 获取余额
+			this.now_money = data.now_money;
+		});
+	},
+	methods: {
+		//选择支付方式
+		changePayType(type) {
+			this.payType = type;
+			if (this.payType == 1) {
+				this.payName = 'weixin';
+			}
+			if (this.payType == 2) {
+				this.payName = 'ali';
+			}
+			if (this.payType == 3) {
+				this.payName = 'yue';
+			}
+		},
+		// 支付金额
+		orderMoneyPay() {
+			let obj = this;
+			orderPay({
+				uni: obj.orderId,
+				// #ifdef H5
+				from: obj.froms ? 'weixin' : 'H5', //来源
+				// #endif
+				// #ifdef MP-WEIXIN
+				from: 'routine', //来源
+				// #endif
+				// #ifdef APP-PLUS
+				from: 'app', //来源
+				// #endif
+				paytype: obj.payName //支付类型  weixin-微信 yue-余额
+			})
+				.then(e => {
+					// 判断是否为余额支付
+					if (obj.payName == 'yue' && e.data.status == 'SUCCESS') {
+						if (e.status == 200) {
+							obj.paySuccessTo();
+						} else {
+							obj.$api.msg(msg);
+						}
+					}
+					//#ifndef APP-PLUS
+					if (obj.payName == 'weixin' || obj.payName == 'routine') {
+						let da = e.data.result.jsConfig;
+						console.log(da, '支付打印');
+						let data = {
+							// #ifdef H5
+							timestamp: da.timestamp,
+							// #endif
+							// #ifdef MP
+							timeStamp: da.timestamp,
+							// #endif
+							nonceStr: da.nonceStr,
+							package: da.package,
+							signType: da.signType,
+							paySign: da.paySign,
+							success: function(res) {
+								obj.paySuccessTo();
+							},
+							fail: () => {
+								uni.navigateTo({
+									url: '/pages/order/order?state=0'
+								});
+							}
+						};
+						// #ifdef H5
+						if (obj.payName == 'weixin') {
+							obj.weichatObj.chooseWXPay(data);
+						}
+						// #endif
+						// #ifdef MP-WEIXIN
+						if (obj.payName == 'routine') {
+							wx.requestPayment(data);
+						}
+						// #endif
+					}
+					// #endif
+					//#ifdef APP-PLUS
+					if (obj.payName == 'weixin' || obj.payName == 'routine') {
+						let da = e.data.result.jsConfig;
+						console.log('--da--', da);
+						let data = {
+							appid: da.appid,
+							noncestr: da.noncestr,
+							package: da.package,
+							partnerid: da.partnerid,
+							prepayid: da.prepayid,
+							timestamp: da.timestamp,
+							sign: da.sign
+						};
+						console.log('--data--', data);
+						uni.requestPayment({
+							provider: 'wxpay',
+							orderInfo: data,
+							success(res) {
+								console.log(res);
+								uni.showToast({
+									title: '支付成功',
+									duration: 2000
+								});
+								obj.paySuccessTo();
+							},
+							fail(res) {
+								console.log(res, '失败');
+							}
+						});
+					}
+					if (obj.payName == 'ali') {
+						const url = e.data.result.jsConfig;
+						console.log(url, 'url');
+						uni.requestPayment({
+							provider: 'alipay',
+							orderInfo: url,
+							success: res => {
+								console.log(res);
+								uni.showToast({
+									title: '支付成功',
+									duration: 2000
+								});
+								obj.paySuccessTo();
+							},
+							fail: e => {
+								console.log(e);
+							},
+							complete: () => {}
+						});
+						obj.payLoding = false;
+					}
+					//#endif
+					uni.hideLoading();
+					obj.payLoding = false;
+				})
+				.catch(e => {
+					// 支付完成
+					uni.hideLoading();
+					obj.payLoding = false;
+					console.log(e);
+				});
+		},
+		// 支付成功跳转
+		paySuccessTo() {
+			uni.hideLoading();
+			uni.redirectTo({
+				url: '/pages/money/paySuccess?orderid=' + this.orderId
+			});
+		},
+		//确认支付
+		confirm: async function() {
+			let obj = this;
+
+			// 判断是否余额不足
+			if (obj.payName == 'yue' && +obj.now_money < obj.money) {
+				uni.showModal({
+					title: '提示',
+					content: '账户余额不足！',
+					showCancel: false,
+					success: res => {},
+					fail: () => {},
+					complete: () => {}
+				});
+				return;
+			}
+			uni.showLoading({
+				title: '支付中',
+				mask: true
+			});
+			// 支付中
+			obj.payLoding = true;
+			// #ifdef H5
+			// 获取当前是否为微信浏览器
+			obj.froms = uni.getStorageSync('weichatBrowser') || '';
+			// #endif
+			// 判断是否为未支付订单中跳转进入
+			if (obj.type != 1) {
+				// 初次生成订单
+				obj.firstCreateOrder();
+			} else {
+				// 已经生成订单未支付
+				obj.orderMoneyPay();
+			}
+		},
+		// 初次订单创建
+		firstCreateOrder() {
+			let obj = this;
+			// 获取下单页面数据
+			let prepage = obj.$api.prePage();
+
+			let data = {
+				real_name: prepage.addressData.real_name, //联系人名称
+				phone: prepage.addressData.phone, //联系人号码
+				couponId: prepage.couponChecked.id, //优惠券编号
+				addressId: prepage.addressData.id, //支付地址id
+				useIntegral: prepage.checkedPoints ? 1 : 0, //是否积分抵扣1为是0为否
+				payType: obj.payName, //支付类型  weixin-微信 yue-余额
+				mark: prepage.desc, //备注
+				// #ifdef H5
+				from: obj.froms ? 'weixin' : 'H5', //来源
+				// #endif
+				// #ifdef MP-WEIXIN
+				from: 'routine', //来源
+				// #endif
+				// #ifdef APP-PLUS
+				from: 'app', //来源
+				// #endif
+				shipping_type: 1 //提货方式 1 快递 2自提
+			};
+			// 判断是否拼团商品
+			if (obj.pinkid) {
+				data.pinkId = obj.pinkid;
+			}
+			// 生成订单
+			createOrderkey(data, obj.orderKey)
+				.then(({ data, status, msg }) => {
+					console.log(status);
+					// 判断是否支付失败
+					if (data.status == 'ORDER_EXIST') {
+						uni.showModal({
+							title: '提示',
+							content: msg,
+							showCancel: false
+						});
+						uni.hideLoading();
+						obj.payLoding = false;
+						return;
+					}
+					// 保存订单号
+					obj.orderId = data.result.orderId;
+					// 判断是否为余额支付
+					if (obj.payName == 'yue') {
+						if (status == 200) {
+							obj.paySuccessTo();
+						} else {
+							obj.$api.msg(msg);
+						}
+					} else {
+						// 立即支付
+						obj.orderMoneyPay();
+					}
+				})
+				.catch(e => {
+					uni.hideLoading();
+					obj.payLoding = false;
+					console.log(e, '123456789');
+				});
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+.app {
+	width: 100%;
+}
+
+.price-box {
+	background-color: #fff;
+	height: 265upx;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	font-size: 28upx;
+	color: #909399;
+
+	.price {
+		font-size: 50upx;
+		color: #303133;
+		margin-top: 12upx;
+		&:before {
+			content: '￥';
+			font-size: 40upx;
+		}
+	}
+}
+
+.pay-type-list {
+	margin-top: 20upx;
+	background-color: #fff;
+	padding-left: 60upx;
+	.type-item {
+		height: 120upx;
+		padding: 20upx 0;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding-right: 60upx;
+		font-size: 30upx;
+		position: relative;
+	}
+
+	.icon {
+		width: 100upx;
+		font-size: 52upx;
+	}
+	.iconyue {
+		color: #fe8e2e;
+	}
+	.iconweixin {
+		color: #36cb59;
+	}
+	.iconzhifubao {
+		color: #01aaef;
+	}
+	.tit {
+		margin-bottom: 4upx;
+	}
+	.con {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+	}
+}
+.mix-btn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 630upx;
+	height: 80upx;
+	margin: 80upx auto 30upx;
+	color: #fff;
+	border-radius: 10upx;
+	/* box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4); */
+}
+
+.clickbg {
+}
+</style>

pages/money/paySuccess.vue

@@ -0,0 +1,82 @@
+<template>
+	<view class="content">
+		<text class="tit">订单支付成功</text>
+		<view class="btn-group">
+			<navigator url="/pages/order/order?state=1" open-type="redirect" class="mix-btn">查看订单</navigator>
+			<navigator url="/pages/index/index" open-type="switchTab" class="mix-btn hollow">返回首页</navigator>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			type: 2 //1为兑换支付成功2为预购成功
+		};
+	},
+	onLoad(opt) {
+		// 保存订单号
+		// 	if ('type' in opt) {
+		// 		this.type = opt.type;
+		// 	}
+		// 	if (this.type == 1) {
+		// 		uni.setNavigationBarTitle({
+		// 			title: '兑换成功'
+		// 		});
+		// 	}
+		// 	if (this.type == 2) {
+		// 		uni.setNavigationBarTitle({
+		// 			title: '预约成功'
+		// 		});
+		// 	}
+	},
+	methods: {}
+};
+</script>
+
+<style lang="scss">
+.content {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+.success-icon {
+	margin-top: 100rpx;
+	width: 302rpx;
+	height: 320rpx;
+}
+.tit {
+	margin-top: 40rpx;
+	font-size: 32rpx;
+	font-family: PingFang SC;
+	font-weight: bold;
+	color: #333333;
+}
+.btn-group {
+	padding-top: 130rpx;
+	display: flex;
+	justify-content: flex-start;
+}
+.mix-btn {
+	margin-top: 30upx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 301rpx;
+	height: 78rpx;
+	background: #08d29b;
+	border-radius: 10rpx;
+	font-size: 30rpx;
+	font-family: PingFang SC;
+	font-weight: 500;
+	color: #ffffff;
+	&.hollow {
+		margin-left: 36rpx;
+		background: #fff;
+		color: #08d29b;
+		border: 1px solid #08d29b;
+	}
+}
+</style>

pages/money/recharge.vue

@@ -0,0 +1,462 @@
+<template>
+	<view class="content">
+		<view class="top_box">
+			<text class="yue-tit">当前余额：</text>
+			<text class="yue-num">￥{{ now_money | parseFloatNum }}</text>
+		</view>
+
+		<view class="line_box"></view>
+
+		<view class="cz_box">
+			<view class="cz_wrap">
+				<text class="cz_tit">￥</text>
+				<input class="cz_input" type="number" v-model="money" @focus="changeNum()" placeholder="请输入充值金额" placeholder-class="placeholder" />
+			</view>
+			<view class="zc_list_box">
+				<view class="zc_list_price" :class="{ seletPrice: seletNum == item.price }" @click="seletChange(item, index)" v-for="(item, index) in list" :key="index">
+					{{ item.price | parseFloatNum }}元
+				</view>
+			</view>
+		</view>
+		<!-- <view class="line_box"></view> -->
+
+		<!-- <view class="row-box">
+			<view class="title">充值金额</view>
+			<view class="row">
+				<text class="tit">￥</text>
+				<input class="input" type="number" v-model="money" placeholder="请输入充值金额" placeholder-class="placeholder" />
+			</view>
+		</view> -->
+
+		<!-- <view class="rechar-box">
+			<view class="rechar-title">注意事项</view>
+			<view class="rechar-text" v-for="(item, index) in zhuyi" :key="index">
+				<text>{{ index + 1 }}.{{item}}</text>
+			</view>
+		</view> -->
+		<view class="line_box"></view>
+		<view class="cz-type">
+			<view class="type-left">
+				<view class="icon iconfont iconweixin"></view>
+				<view class="tit">微信充值</view>
+			</view>
+			<view class="right"><radio value="weixin" color=" #EB001C" :checked="type == 'weixin'" /></view>
+		</view>
+		<button class="add-btn up" :class="{ 'active-bg': payLoding }" @click="!payLoding ? confirm() : ''">立即充值</button>
+	</view>
+</template>
+
+<script>
+export default {
+	filters: {
+		getMoneyStyle,
+		// 去处小数点后的0
+		parseFloatNum(clock) {
+			return parseFloat(clock);
+		}
+	},
+	data() {
+		return {
+			type: 'weixin',
+			money: '', //充值金额
+			payLoding: false ,//是否加载中
+			list: [
+				'300',
+				'200',
+				'150',
+				'100',
+				'50'
+			],
+			now_money:'',
+			seletNum: '300',	// 选中
+			zhuyi: [],
+			quota: '',	// 送的钱
+			typeText: 0,	// 0-微信 1-佣金
+		};
+	},
+	onLoad(options) {
+		this.loadData();
+	},
+	computed: {
+		// #ifdef H5
+		...mapState(['weichatObj', 'userInfo'])
+		// #endif
+		// #ifdef MP
+		...mapState(['userInfo'])
+		// #endif
+	},
+	methods: {
+		// 跳转
+		navTo(url) {
+			uni.navigateTo({
+				url: url
+			});
+		},
+		changeNum() {
+			this.seletNum = this.money = '';
+			console.log(this.seletNum, this.money);
+		},
+		seletChange(item, index) {
+			this.seletNum = item.price;
+			this.seletMoney = item.price;
+			this.money = item.price
+		},
+		// 切换选中对象
+		tabRadio(e) {
+			this.type = e.detail.value;
+			if ( e.detail.value == 'weixin' ) {
+				this.typeText = 0
+			} else {
+				this.typeText = 1
+			}
+		},
+		// 充值金额
+		rechargeXuan(item) {
+			this.money = item.price;
+			this.quota = item.quota;
+		},
+
+		loadData() {
+			moneyChong({}).then(({data}) =>{
+				console.log(data,"123456789");
+				this.list = data.recharge_quota;
+			});
+			userBalance({}).then(({ data }) => {
+				this.now_money = data.now_money;
+			});
+		},
+
+		// 提交
+		confirm() {
+			let obj = this;
+			obj.payLoding = true;
+			if( !obj.money ) {
+				obj.$api.msg('请输入金额');
+				obj.payLoding = false;
+				return;
+			}
+			// #ifdef H5
+			rechargeWechat({
+				price: this.money,
+				from: this.type ,
+			}).then(e => {
+					let da = e.data.data;
+					obj.weichatObj.chooseWXPay({
+						timestamp: da.timestamp,
+						nonceStr: da.nonceStr,
+						package: da.package,
+						signType: da.signType,
+						paySign: da.paySign,
+						success: function(res) {
+							uni.showToast({
+								title: '充值成功',
+								duration: 2000,
+								position: 'top',
+								success: function(res) {
+									uni.navigateBack()
+								}
+							});
+						}
+					});
+					obj.payLoding = false;
+				})
+				.catch(e => {
+					obj.payLoding = false;
+					console.log(e);
+				});
+			// #endif
+			// #ifdef MP
+			rechargeRoutine({ price: this.money})
+				.then(e => {
+					let da = e.data;
+						wx.requestPayment({
+								timeStamp: da.timestamp,
+								nonceStr: da.nonceStr,
+								package: da.package,
+								signType: da.signType,
+								paySign: da.paySign,
+								success: function(res) {
+									uni.showToast({
+										title: '充值成功',
+										duration: 2000,
+										position: 'top',
+										success: function(res) {
+											uni.navigateBack()
+										}
+									});
+								},
+
+							})
+
+					obj.payLoding = false;
+				})
+				.catch(e => {
+					obj.payLoding = false;
+					console.log(e);
+				});
+			// #endif
+		},
+	}
+};
+</script>
+
+<style lang="scss">
+page {
+	height: 100%;
+	background: #ffffff;
+}
+.top_box {
+	padding: 20rpx 26rpx 20rpx 47rpx;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	.yue-tit {
+		font-size: 28rpx;
+		font-family: PingFang SC;
+		font-weight: 500;
+		color: #333333;
+	}
+	.yue-num {
+		font-size: 30rpx;
+		font-family: PingFang SC;
+		font-weight: bold;
+		color: #ff6f0f;
+	}
+}
+
+.line_box {
+	width: 100%;
+	height: 20rpx;
+	background: #f8f8f8;
+}
+.cz_box {
+	padding: 40rpx 20rpx 20rpx;
+	.cz_wrap {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding-bottom: 20rpx;
+		border-bottom: 1px solid #e6e6e6;
+		.cz_tit {
+			font-size: 32rpx;
+			font-family: PingFang SC;
+			font-weight: 500;
+		}
+		.cz_input {
+			text-align: right;
+			font-size: 32rpx;
+			font-family: PingFang SC;
+			font-weight: 500;
+			// color: #BFBFBF;
+		}
+	}
+	.zc_list_box {
+		display: flex;
+		flex-wrap: wrap;
+		.zc_list_price {
+			width: 202rpx;
+			height: 60rpx;
+			background: #f0f0f0;
+			border-radius: 8rpx;
+			margin-top: 36rpx;
+			margin-right: 50rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			&:nth-child(3n) {
+				margin-right: 0;
+			}
+		}
+		.seletPrice {
+			background: linear-gradient(143.2747deg, #ff6a00, #ee0979);
+			color: #ffffff;
+		}
+	}
+}
+.recha-box {
+	padding: 50rpx 30rpx 0;
+	display: flex;
+	flex-wrap: wrap;
+	.recha-frame {
+		width: 210rpx;
+		height: 181rpx;
+		border: 1px solid #dbdede;
+		border-radius: 20rpx;
+		display: flex;
+		align-items: center;
+		flex-direction: column;
+		justify-content: center;
+		margin-right: 30rpx;
+		margin-bottom: 30rpx;
+		&:nth-child(3n) {
+			margin-right: 0;
+		}
+		.recha-top {
+			display: flex;
+			align-items: center;
+			.recha-img {
+				width: 64rpx;
+				height: 62rpx;
+			}
+			.recha-tit {
+				margin-left: 10rpx;
+				font-size: 36rpx;
+				font-family: PingFang SC;
+				font-weight: bold;
+				color: #333333;
+			}
+		}
+		.recha-song {
+			margin-top: 20rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #ff9900;
+		}
+	}
+	.select-frame {
+		border: 1px solid #ef041f;
+	}
+}
+
+.rechar-box {
+	padding: 30rpx 20rpx 0;
+	.rechar-title {
+		font-size: 32rpx;
+		font-family: PingFang SC;
+		font-weight: bold;
+		color: #333333;
+		margin-bottom: 10rpx;
+	}
+	.rechar-text {
+		font-size: 28rpx;
+		font-family: PingFang SC;
+		font-weight: bold;
+		color: #333333;
+	}
+}
+.cz-type {
+	margin-top: 22rpx;
+	display: flex;
+	justify-content: space-between;
+	padding: 32rpx;
+	align-items: center;
+	.type-left {
+		display: flex;
+		align-items: center;
+		.icon {
+			height: 38rpx;
+			image {
+				width: 48rpx;
+				height: 38rpx;
+			}
+		}
+		.iconweixin {
+			color: #36cb59;
+		}
+		.tit {
+			margin-left: 12rpx;
+			font-size: 30rpx;
+			color: #333333;
+		}
+	}
+	.type-right {
+		image {
+			width: 36rpx;
+			height: 36rpx;
+		}
+	}
+}
+.add-btn {
+	&.modified {
+	}
+	&.up {
+		color: #f21f5d;
+	}
+	margin-top: 100rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 604rpx;
+	height: 90rpx;
+	border: 2rpx solid #f21f5d;
+	border-radius: 10rpx;
+	font-size: 36rpx;
+	font-family: PingFang SC;
+	font-weight: 500;
+	color: #f21f5d;
+	line-height: 90rpx;
+	text-align: center;
+}
+.row-box {
+	margin-top: 30rpx;
+	padding: 20rpx 30rpx;
+	background: #fff;
+	.title {
+	}
+	.row {
+		display: flex;
+		align-items: center;
+		position: relative;
+		height: 80rpx;
+		.tit {
+			flex-shrink: 0;
+			width: 40rpx;
+			font-size: 30rpx;
+		}
+		.input {
+			flex: 1;
+			font-size: 30rpx;
+		}
+		.iconlocation {
+			font-size: 36rpx;
+		}
+
+		.buttom {
+		}
+	}
+}
+.list {
+	padding-left: 30rpx;
+	margin-top: 30rpx;
+	background-color: #ffffff;
+	.box {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		height: 120rpx;
+		padding-right: 25rpx;
+		.icon {
+			font-size: 48rpx;
+			padding-right: 20rpx;
+			display: flex;
+		}
+		.yongjing {
+			width: 48rpx;
+			height: 48rpx;
+		}
+		.iconweixin1 {
+			color: #18bf16;
+		}
+		.iconzhifubao {
+			color: #08aaec;
+		}
+		.title-box {
+			flex-grow: 1;
+			text-align: left;
+			.title {
+			}
+			.node {
+			}
+		}
+	}
+}
+/deep/ .uni-radio-input {
+	width: 45rpx;
+	height: 45rpx;
+}
+
+.active-bg {
+	background: linear-gradient(143.2747deg, #ff6a00, #ee0979) !important;
+	color: #ffffff !important;
+}
+</style>

pages/money/wallet.vue

@@ -0,0 +1,411 @@
+<template>
+	<view class="content">
+		<view class="content-money">
+			<view class="status_bar"><!-- 这里是状态栏 --></view>
+			<view class="body-title"><view class="header">我的余额</view></view>
+			<view class="money-box">
+				<view class="money">{{ money | getMoneyStyle }}</view>
+				<view>我的余额</view>
+			</view>
+			<view class="moneybtn-box">
+				<!-- <view class="money-btn" @click="navto('/pages/money/recharge')">
+					充值
+				</view> -->
+				<view class="money-btn" @click="navto('/pages/money/withdmoenys?type=yue')">转账</view>
+			</view>
+		</view>
+		<view class="info-box flex">
+			<view class="info-item">
+				<view class="info-font">累计收入</view>
+				<view class="info-num">{{ recharge }}</view>
+			</view>
+			<view class="shu"></view>
+			<view class="info-item">
+				<view class="info-font">累计支出</view>
+				<view class="info-num">{{ orderStatusSum }}</view>
+			</view>
+		</view>
+		<view class="navbar">
+			<view v-for="(item, index) in navList" :key="index" class="nav-item" :class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
+		</view>
+		<swiper :current="tabCurrentIndex" :style="{ height: height }" class="swiper-box" duration="300" @change="changeTab">
+			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
+				<scroll-view scroll-y="true" class="list-scroll-content" @scrolltolower="loadData">
+					<!-- 空白页 -->
+					<empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>
+
+					<!-- 订单列表 -->
+					<view>
+						<view class="order-item flex" v-for="(item, index) in tabItem.orderList" :key="index">
+							<view class="title-box">
+								<view class="title">
+									<text>{{ item.title }}</text>
+								</view>
+								<view class="time">
+									<text>{{ item.add_time }}</text>
+								</view>
+							</view>
+							<view class="money">
+								<view>{{ (item.pm == 0 ? '-' : '+') + item.number }}</view>
+								<view v-if="item.status == 0" class="status">待发放</view>
+							</view>
+						</view>
+					</view>
+					<uni-load-more :status="tabItem.loadingType" v-if="!(tabItem.orderList.length == 0 && tabItem.loaded)"></uni-load-more>
+				</scroll-view>
+			</swiper-item>
+		</swiper>
+	</view>
+</template>
+
+<script>
+export default {
+	filters: {
+		getMoneyStyle
+	},
+	onReady(res) {
+		var _this = this;
+		uni.getSystemInfo({
+			success: resu => {
+				const query = uni.createSelectorQuery();
+				query.select('.swiper-box').boundingClientRect();
+				query.exec(function(res) {
+					_this.height = resu.windowHeight - res[0].top + 'px';
+					console.log('打印页面的剩余高度', _this.height);
+				});
+			},
+			fail: res => {}
+		});
+	},
+	data() {
+		return {
+			height: '',
+			// 头部图高度
+			maxheight: '',
+			tabCurrentIndex: 0,
+			orderStatusSum: 0,
+			recharge: 0,
+			navList: [
+				// {
+				// 	state: 0,
+				// 	text: '全部',
+				// 	loadingType: 'more',
+				// 	orderList: [],
+				// 	page: 1, //当前页数
+				// 	limit: 10 //每次信息条数
+				// },
+				{
+					state: 1,
+					text: '支出',
+					loadingType: 'more',
+					orderList: [],
+					page: 1, //当前页数
+					limit: 10 //每次信息条数
+				},
+				{
+					state: 2,
+					text: '收入',
+					loadingType: 'more',
+					orderList: [],
+					page: 1, //当前页数
+					limit: 10 //每次信息条数
+				}
+			],
+			money: ''
+		};
+	},
+	onLoad(options) {},
+	onShow() {
+		this.loadData();
+		// 获取用户余额
+		userBalance({}).then(({ data }) => {
+			this.money = data.now_money;
+		});
+	},
+	methods: {
+		// 页面跳转
+		navto(e) {
+			uni.navigateTo({
+				url: e
+			});
+		},
+		//获取收入支出信息
+		async loadData(source) {
+			let obj = this;
+			//这里是将订单挂载到tab列表下
+			let index = this.tabCurrentIndex;
+			let navItem = this.navList[index];
+			let state = navItem.state;
+			if (source === 'tabChange' && navItem.loaded === true) {
+				//tab切换只有第一次需要加载数据
+				return;
+			}
+			if (navItem.loadingType === 'loading') {
+				//防止重复加载
+				return;
+			}
+			// 修改当前对象状态为加载中
+			navItem.loadingType = 'loading';
+
+			spreadCommission(
+				{
+					page: navItem.page,
+					limit: navItem.limit
+				},
+				state
+			)
+				.then(({ data }) => {
+					// console.log(data[0],'1');
+					// console.log(JSON.stringify(data),'2')
+
+					// obj.recharge = data.income;
+					// obj.orderStatusSum = data.expend;
+					if (data[0].list.length > 0) {
+						console.log(data[0].list, 'data.list[0]');
+						navItem.orderList = navItem.orderList.concat(data[0].list);
+						console.log(navItem.orderList, 'navItem.orderList');
+						navItem.page++;
+					} else {
+						navItem.loadingType = 'noMore';
+						console.log('还有税局2');
+					}
+					if (navItem.limit == data[0].list.length) {
+						console.log(navItem.limit == data[0].list.length, '还有税局');
+						//判断是否还有数据， 有改为 more， 没有改为noMore
+						navItem.loadingType = 'more';
+						return;
+					} else {
+						//判断是否还有数据， 有改为 more， 没有改为noMore
+						navItem.loadingType = 'noMore';
+					}
+					uni.hideLoading();
+					this.$set(navItem, 'loaded', true);
+				})
+				.catch(e => {
+					console.log(e);
+				});
+		},
+
+		//swiper 切换
+		changeTab(e) {
+			this.tabCurrentIndex = e.target.current;
+			this.loadData('tabChange');
+		},
+		//顶部tab点击
+		tabClick(index) {
+			this.tabCurrentIndex = index;
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+page {
+	background: #f1f1f1;
+	height: 100%;
+}
+.status_bar {
+	height: var(--status-bar-height);
+	width: 100%;
+}
+.content-money {
+	position: relative;
+	height: 480rpx;
+	.content-bg {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		width: 750rpx;
+		height: 480rpx;
+		image {
+			width: 100%;
+			height: 100%;
+		}
+	}
+	.body-title {
+		height: 80rpx;
+		text-align: center;
+		font-size: 35rpx;
+		position: relative;
+		.header {
+			position: absolute;
+			left: 0;
+			top: 0;
+			width: 100%;
+			font-size: 36rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #fffeff;
+			height: 80rpx;
+			font-size: 36rpx;
+			font-weight: 700;
+			z-index: 9;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+		.goback-box {
+			position: absolute;
+			left: 18rpx;
+			top: 0;
+			height: 80rpx;
+			display: flex;
+			align-items: center;
+		}
+
+		.goback {
+			z-index: 100;
+			width: 34rpx;
+			height: 34rpx;
+		}
+	}
+}
+.info-box {
+	width: 670rpx;
+	height: 186rpx;
+	background: #ffffff;
+	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
+	border-radius: 20rpx;
+	margin: -100rpx auto 0;
+	position: relative;
+	z-index: 2;
+	.info-item {
+		width: 50%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		line-height: 1;
+		.info-font {
+			font-size: 30rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #999999;
+		}
+		.info-num {
+			margin-top: 30rpx;
+			font-size: 30rpx;
+			font-family: PingFang SC;
+			font-weight: bold;
+			color: #181818;
+		}
+	}
+	.shu {
+		width: 2rpx;
+		height: 74rpx;
+		background: #dcdfe6;
+	}
+}
+.money-box {
+	position: relative;
+	z-index: 2;
+	padding-top: 70rpx;
+	color: #ffffff;
+	text-align: center;
+	.money {
+		font-size: 72rpx;
+		font-family: PingFang SC;
+		font-weight: bold;
+		color: #ffffff;
+	}
+	.text {
+		font-size: 30rpx;
+	}
+}
+.moneybtn-box {
+	display: flex;
+	justify-content: space-between;
+	position: relative;
+	z-index: 2;
+	color: #ffffff;
+	padding: 20rpx 50rpx;
+	font-size: 30rpx;
+	margin-top: -40rpx;
+	font-family: PingFang SC;
+	font-weight: bold;
+	color: #ffffff;
+}
+
+.navbar {
+	margin-top: 20rpx;
+	display: flex;
+	height: 88rpx;
+	padding: 0 5px;
+	background: #fff;
+	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
+	position: relative;
+	z-index: 10;
+	.nav-item {
+		flex: 1;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 100%;
+		font-size: 15px;
+		color: #999999;
+		position: relative;
+		&.current {
+			color: #000;
+			&:after {
+				content: '';
+				position: absolute;
+				left: 50%;
+				bottom: 0;
+				transform: translateX(-50%);
+				width: 44px;
+				height: 0;
+				border-bottom: 2px solid #fe5b38;
+			}
+		}
+	}
+}
+//列表
+.swiper-box {
+	.order-item:last-child {
+		margin-bottom: 60rpx;
+	}
+	.order-item {
+		padding: 20rpx 30rpx;
+		line-height: 1.5;
+		.title-box {
+			.title {
+			}
+			.time {
+			}
+		}
+		.money {
+			color: #fd5b23;
+			text-align: right;
+			.status {
+			}
+		}
+	}
+}
+.list-scroll-content {
+	background: #ffffff;
+	height: 100%;
+}
+.content {
+	height: 100%;
+	.empty-content {
+		background-color: #ffffff;
+	}
+}
+.btn-box {
+	width: 674rpx;
+	height: 88rpx;
+	background: linear-gradient(0deg, #2e58ff, #32c6ff);
+	border-radius: 44rpx;
+	font-size: 36rpx;
+	font-family: PingFang SC;
+	font-weight: 500;
+	color: #ffffff;
+	text-align: center;
+	line-height: 88rpx;
+	position: fixed;
+	bottom: 48rpx;
+	left: 0;
+	right: 0;
+	margin: 0 auto;
+}
+</style>

pages/money/withdmoenys.vue

@@ -0,0 +1,319 @@
+<template>
+	<view class="content">
+		<view class="content-money">
+			<view class="flex" v-if="type == 'xl'">
+				<view class="buttom">
+					<view class="icon">{{ userInfo.business_integral | getMoneyStyle }}</view>
+					<text class="text">可用能量金豆</text>
+				</view>
+			</view>
+			<view class="flex" v-if="type == 'yue'">
+				<view class="buttom">
+					<view class="icon">{{ userInfo.now_money | getMoneyStyle }}</view>
+					<text class="text">可用余额</text>
+				</view>
+			</view>
+			<!-- <view class="flex" v-if="type == 'cash'">
+				<view class="buttom">
+					<view class="icon">{{ userInfo.cash | getMoneyStyle }}</view>
+					<text class="text">可用现金</text>
+				</view>
+			</view> -->
+		</view>
+		<view class="row-box">
+			<view class="title">收款人ID</view>
+			<view class="row"><input class="input" type="number" v-model="card" placeholder="请输入收款人ID" placeholder-class="placeholder" /></view>
+		</view>
+		<view class="row-box">
+			<view class="title">转账金额</view>
+			<view class="row">
+				<!-- <text class="tit">￥</text> -->
+				<input class="input" type="number" v-model="withdrawal" placeholder="转入金额" placeholder-class="placeholder" />
+				<view class="buttom" v-if="type == 'xl'" @click="withdrawal = userInfo.business_integral">全部转账</view>
+				<view class="buttom" v-if="type == 'yue'" @click="withdrawal = userInfo.now_money">全部转账</view>
+				<view class="buttom" v-if="type == 'cash'" @click="withdrawal = userInfo.cash">全部转账</view>
+			</view>
+		</view>
+		<!-- <view class="tip" v-if="withdrawal != 0 && type == 'xl'">实际转入{{ realmoney }}响亮积分,{{ gy }}响亮积分流入公益池</view> -->
+
+		<button class="add-btn up" :class="{ action: loding }" @click="!loding ? confirm() : ''">提交申请</button>
+	</view>
+</template>
+
+<script>
+import { getMoneyStyle } from '@/utils/rocessor.js';
+import { getUserInfo, transfer, yuetransfer, cashtransfer, yueXhg } from '@/api/user.js';
+import { mapMutations, mapState } from 'vuex';
+export default {
+	filters: {
+		getMoneyStyle
+	},
+	data() {
+		return {
+			money: '0.00', //可提现金额
+			withdrawal: '', //提现金额
+			password: '', //支付密码
+			card: '', //转账卡号
+			name: '',
+			// #ifdef H5
+			weichatBsrowser: false,
+			// #endif
+			loding: false,
+			type: 'xl'
+		};
+	},
+	onLoad(options) {
+		// #ifdef H5
+		this.weichatBsrowser = uni.getStorageSync('weichatBrowser');
+		// #endif
+		this.dataUp();
+		if (options.type) {
+			this.type = options.type;
+			console.log(this.type);
+		}
+	},
+	computed: {
+		...mapState('user', ['userInfo']),
+		realmoney() {
+			return (this.withdrawal * 0.9).toFixed(2) * 1;
+		},
+		gy() {
+			return (this.withdrawal * 0.08).toFixed(2) * 1;
+		}
+	},
+	methods: {
+		...mapMutations('user', ['setUserInfo', 'login']),
+		// 更新数据
+		dataUp() {
+			let obj = this;
+			getUserInfo({})
+				.then(e => {
+					obj.login();
+					// 保存返回用户数据
+					obj.setUserInfo(e.data);
+				})
+				.catch(e => {
+					console.log(e);
+				});
+		},
+		// 切换选中对象
+		// tabRadio(e) {
+		// 	this.type = e.detail.value;
+		// },
+		// 提交
+		confirm() {
+			let obj = this;
+			obj.loding = true;
+			if (obj.withdrawal == 0) {
+				obj.loding = false;
+				uni.showModal({
+					title: '提示',
+					content: '转账金额不能为0'
+				});
+				return;
+			}
+			if (obj.card == obj.userInfo.phone) {
+				obj.loding = false;
+				uni.showModal({
+					title: '提示',
+					content: '不要输入自己的用户账号'
+				});
+			} else {
+				console.log(obj.type, 'type');
+				if (obj.type == 'xl') {
+					yueXhg({
+						phone: obj.card, //编号
+						money: obj.withdrawal, //金额
+						type: 2
+					})
+						.then(e => {
+							console.log('输入了');
+							// 允许按钮点击
+							obj.loding = false;
+							// 初始化提现金额
+							obj.withdrawal = '';
+							uni.showToast({
+								title: '提交成功',
+								duration: 2000,
+								position: 'top'
+							});
+							obj.dataUp();
+						})
+						.catch(e => {
+							obj.$api.msg(e.msg);
+							obj.loding = false;
+							console.log();
+						});
+				}
+				if (obj.type == 'yue') {
+					yueXhg({
+						phone: obj.card, //编号
+						money: obj.withdrawal, //金额
+						type: 1
+					})
+						.then(e => {
+							console.log('输入了');
+							// 允许按钮点击
+							obj.loding = false;
+							// 初始化提现金额
+							obj.withdrawal = '';
+							uni.showToast({
+								title: '提交成功',
+								duration: 2000,
+								position: 'top'
+							});
+							obj.dataUp();
+						})
+						.catch(e => {
+							obj.$api.msg(e.msg);
+							obj.loding = false;
+							console.log();
+						});
+				}
+				// if (obj.type == 'cash') {
+				// 	cashtransfer(data)
+				// 		.then(e => {
+				// 			// 允许按钮点击
+				// 			obj.loding = false;
+				// 			// 初始化提现金额
+				// 			obj.withdrawal = '';
+				// 			uni.showToast({
+				// 				title: '提交成功',
+				// 				duration: 2000,
+				// 				position: 'top'
+				// 			});
+				// 			obj.dataUp();
+				// 		})
+				// 		.catch(e => {
+				// 			obj.$api.msg(e.msg);
+				// 			obj.loding = false;
+				// 			console.log();
+				// 		});
+				// }
+			}
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+page {
+	height: 100%;
+}
+.content-money {
+	padding: 30rpx 0;
+	background: #ffffff;
+}
+
+.item {
+	background-color: #ffffff;
+}
+.flex {
+	background-color: #ffffff;
+	text-align: center;
+	margin: 0 30rpx;
+	justify-content: center;
+	.buttom {
+		width: 50%;
+	}
+	.interval {
+		width: 2px;
+		height: 60rpx;
+		background-color: #eeeeee;
+	}
+	.icon {
+		background-size: 100%;
+		font-size: 42rpx;
+		font-weight: bold;
+		background-repeat: no-repeat;
+		background-position: center;
+	}
+	.text {
+	}
+}
+
+.row-box {
+	margin-top: 30rpx;
+	padding: 20rpx 30rpx;
+	background: #fff;
+	.title {
+	}
+	.row {
+		display: flex;
+		align-items: center;
+		position: relative;
+		height: 80rpx;
+		.tit {
+			flex-shrink: 0;
+			width: 40rpx;
+			font-size: 30rpx;
+		}
+		.input {
+			flex: 1;
+			font-size: 30rpx;
+		}
+		.iconlocation {
+			font-size: 36rpx;
+		}
+
+		.buttom {
+			color: #f21f5d;
+		}
+	}
+}
+.add-btn {
+	width: 520rpx;
+	height: 80rpx;
+	border: 2rpx solid #f21f5d;
+	border-radius: 40rpx;
+	margin: 140rpx auto;
+	font-family: PingFang SC;
+	font-weight: bold;
+	color: #f21f5d;
+}
+.name {
+	background: #fff;
+	padding: 30rpx;
+}
+.list {
+	padding-left: 30rpx;
+	margin-top: 30rpx;
+	background-color: #ffffff;
+	.box {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		height: 120rpx;
+		.icon {
+			font-size: 48rpx;
+			padding-right: 20rpx;
+			.icon-img {
+				height: 50rpx;
+				width: 50rpx;
+			}
+		}
+		.iconweixin1 {
+			color: #18bf16;
+		}
+		.iconzhifubao {
+			color: #08aaec;
+		}
+		.title-box {
+			flex-grow: 1;
+			text-align: left;
+			.title {
+			}
+			.node {
+			}
+		}
+	}
+}
+.tip {
+	padding: 20rpx;
+	color: #ff0000;
+}
+/deep/ .uni-radio-input {
+	width: 45rpx;
+	height: 45rpx;
+}
+</style>

pages/money/withdrawal.vue

@@ -0,0 +1,413 @@
+<template>
+	<view class="content">
+		<!-- <uni-notice-bar single="true" text="实际到账98%"></uni-notice-bar> -->
+		<view class="content-money">
+			<view class="flex " style="width: 750rpx;justify-content: space-around;margin-left: 0;">
+				<view class="buttom">
+					<view class="icon">{{ money | getMoneyStyle }}</view>
+					<text class="text">可提现{{ showType }}</text>
+				</view>
+			</view>
+		</view>
+
+		<view class="row-box">
+			<view class="title">提现金额</view>
+			<view class="row">
+				<text class="tit">￥</text>
+				<input class="input" type="number" v-model="withdrawal" placeholder="请输入提现金额" placeholder-class="placeholder" />
+				<view class="buttom" @click="withdrawal = money">全部提现</view>
+			</view>
+			<view class="tip" v-if="withdrawal != 0">提现手续费{{ (withdrawal * 0.05 + 5).toFixed(6) * 1 }},可用阳光抵扣，当前阳光数量{{ userInfo.purple_integral }}</view>
+		</view>
+		<!-- #ifndef MP-WEIXIN -->
+		<view class="list">
+			<radio-group @change="tabRadio">
+				<!-- <label>
+					<view class="box">
+						<view class="icon iconfont iconweixin1"></view>
+						<view class="title-box">
+							<view class="title"><text>提现至微信</text></view>
+						</view>
+						<view class="right"><radio value="weixin" color="#5dbc7c" :checked="type == 'weixin'" /></view>
+					</view>
+				</label> -->
+				<label>
+					<view class="box">
+						<view class="icon iconfont iconzhifubao"></view>
+						<view class="title-box">
+							<view class="title">
+								<text v-if="aliData.fullname">提现至支付宝</text>
+								<text v-else>请创建支付宝账号</text>
+							</view>
+							<view class="node">
+								<text v-if="aliData.fullname">真实姓名({{ aliData.fullname }})</text>
+							</view>
+						</view>
+						<view class="right"><radio value="alipay" color="#ff0060" :checked="type == 'alipay'" /></view>
+					</view>
+				</label>
+				<label>
+					<view class="box">
+						<view class="icon iconfont"><image class="icon-img" src="/static/icon/i8.png" mode="aspectFit"></image></view>
+						<view class="title-box">
+							<view class="title">
+								<text v-if="bankData.bankno">{{ bankData.bank + ' ' + bankData.bankno }}</text>
+								<text v-else>请创建银行账号</text>
+							</view>
+							<view class="node">
+								<text v-if="bankData.fullname">真实姓名({{ bankData.fullname }})</text>
+							</view>
+						</view>
+						<view class="right"><radio value="bank" color="#ff0060" :checked="type == 'bank'" /></view>
+					</view>
+				</label>
+			</radio-group>
+		</view>
+		<!-- #endif -->
+		<view class="row b-b" v-if="type == 'alipay'">
+			<text class="tit">支付宝账号</text>
+			<input class="input" type="text" v-model="alipay_code" placeholder="请输入支付宝账号" placeholder-class="placeholder" />
+		</view>
+		<view class="row b-b" v-if="type == 'alipay'">
+			<text class="tit">支付宝姓名</text>
+			<input class="input" type="text" v-model="alipay_name" placeholder="请输入支付宝姓名" placeholder-class="placeholder" />
+		</view>
+		<view class="row b-b" v-if="type == 'bank'">
+			<text class="tit">银行卡号</text>
+			<input class="input" type="text" v-model="bank_code" placeholder="请输入银行卡号" placeholder-class="placeholder" />
+		</view>
+		<view class="row b-b" v-if="type == 'bank'">
+			<text class="tit">姓名</text>
+			<input class="input" type="text" v-model="bank_people" placeholder="请输入银行卡姓名" placeholder-class="placeholder" />
+		</view>
+		<view class="row b-b" v-if="type == 'bank'">
+			<text class="tit">所属银行</text>
+			<input class="input" type="text" v-model="bank_name" placeholder="请输入所属银行" placeholder-class="placeholder" />
+		</view>
+		<button class="add-btn up" @click="confirm" :class="{ loading: load }">提交申请</button>
+		<!-- <button class="add-btn modified" v-if="!weichatBsrowser" @click="navTo('/pages/money/account')">账号管理</button> -->
+	</view>
+</template>
+
+<script>
+export default {
+	filters: {
+		getMoneyStyle
+	},
+	computed: {
+		...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
+	},
+	data() {
+		return {
+			load: true,
+			showType: '',
+			from: '',
+			type: 'alipay', //提现方式
+			money: '0.00', //可提现金额
+			freeze: '0.0', //冻结金额
+			withdrawal: '', //提现金额
+			minPrice: '', //最少提现金额
+			aliData: {},
+			bankData: {},
+			alipay_code: '',
+			alipay_name: '',
+			bank_code: '',
+			bank_people: '',
+			bank_name: '',
+			// #ifdef H5
+			weichatBsrowser: false
+			// #endif
+		};
+	},
+	onLoad(options) {
+		// #ifdef H5
+		this.weichatBsrowser = uni.getStorageSync('weichatBrowser');
+		// #endif
+		if (options.type) {
+			this.from = options.type;
+			if (this.from == 'purple') {
+				this.showType = '肥料';
+			}
+			if (this.from == 'shop') {
+				this.showType = '商家积分';
+			}
+		}
+		//加载提现信息
+		this.loadData();
+		// // 加载提款账号信息
+		// this.loadAli();
+		// this.loadBank();
+	},
+	methods: {
+		...mapMutations('user', ['setUserInfo', 'setOrderInfo']),
+		// 加载余额信息
+		async loadData() {
+			let obj = this;
+			aliInfo().then(e => {
+				console.log(e, 'eeee');
+				obj.alipay_code = e.data.zfb.payment;
+				obj.alipay_name = e.data.zfb.name;
+				obj.alipay_phone = e.data.zfb.phone;
+				obj.bank_code = e.data.bank.payment;
+				obj.bank_people = e.data.bank.name;
+				obj.bank_name = e.data.bank.bank;
+			});
+			getUserInfo({})
+				.then(({ data }) => {
+					console.log(data);
+					this.setUserInfo(data);
+					if (obj.from == 'purple') {
+						obj.money = data.white_integral;
+					}
+					if (obj.from == 'shop') {
+						obj.money = data.business_integral;
+					}
+					obj.load = false;
+				})
+				.catch(e => {
+					console.log(e);
+				});
+		},
+		// 跳转
+		navTo(url) {
+			uni.navigateTo({
+				url: url
+			});
+		},
+		// 切换选中对象
+		tabRadio(e) {
+			this.type = e.detail.value;
+		},
+		// 提交
+		confirm() {
+			if (this.load) {
+				return;
+			}
+			let data = {
+				extract_type: this.type, //bank -银行卡 alipay-支付宝 weixin-微信
+				money: this.withdrawal, //金额
+				type: this.from == 'purple' ? 1 : 2 //0佣金1余额  1紫积分 2商家积分
+			};
+			if (this.withdrawal % 100 != 0) {
+				uni.showToast({
+					title: '提现金额为100的倍数',
+					duration: 2000,
+					mask: false,
+					icon: 'none'
+				});
+				return;
+			}
+			if (this.withdrawal < this.minPrice) {
+				uni.showToast({
+					title: '提现金额不可少于' + this.minPrice,
+					duration: 2000,
+					mask: false,
+					icon: 'none'
+				});
+				return;
+			}
+			if (this.type == 'alipay') {
+				console.log('alipay');
+				data.name = this.alipay_name;
+				data.alipay_code = this.alipay_code;
+			}
+			if (this.type == 'bank') {
+				data.name = this.bank_people;
+				data.bankname = this.bank_name;
+				data.cardnum = this.bank_code;
+			}
+			let zfbData = {
+				type: 2,
+				payment: this.alipay_code,
+				name: this.alipay_name
+			};
+			let bankData = {
+				type: 3,
+				payment: this.bank_code,
+				name: this.bank_people,
+				bank: this.bank_name
+			};
+			let scdata = '';
+			if (this.type == 'bank') {
+				scdata = bankData;
+			}
+			if (this.type == 'alipay') {
+				scdata = zfbData;
+			}
+			this.load = true;
+			getMoneyType(scdata)
+				.then(e => {
+					console.log(e, 'eeeeee');
+					this.$api.prePage().dataUp();
+				})
+				.catch(e => {
+					console.log(e);
+				});
+			extractCash(data)
+				.then(e => {
+					this.loadData();
+					uni.showToast({
+						title: '提交成功',
+						duration: 2000,
+						position: 'top'
+					});
+				})
+				.catch(e => {
+					this.load = false;
+					console.log();
+				});
+		}
+	}
+};
+</script>
+
+<style lang="scss">
+page {
+	height: 100%;
+}
+
+.content-money {
+	padding: 30rpx 0;
+	background: #ffffff;
+}
+
+.flex {
+	background-color: #ffffff;
+	text-align: center;
+	margin: 0 30rpx;
+
+	.buttom {
+		width: 50%;
+	}
+
+	.interval {
+		width: 2px;
+		height: 60rpx;
+		background-color: #eeeeee;
+	}
+
+	.icon {
+		background-size: 100%;
+		font-size: 42rpx;
+		font-weight: bold;
+		background-repeat: no-repeat;
+		background-position: center;
+	}
+}
+
+.row-box {
+	margin-top: 30rpx;
+	padding: 20rpx 30rpx;
+	background: #fff;
+
+	.row {
+		display: flex;
+		align-items: center;
+		position: relative;
+		height: 80rpx;
+
+		.tit {
+			flex-shrink: 0;
+			width: 40rpx;
+			font-size: 30rpx;
+		}
+
+		.input {
+			flex: 1;
+			font-size: 30rpx;
+		}
+
+		.iconlocation {
+			font-size: 36rpx;
+		}
+
+		.buttom {
+			color: #ff0060;
+		}
+	}
+}
+
+.add-btn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 690rpx;
+	height: 80rpx;
+	margin: 0 auto;
+	margin-top: 30rpx;
+	border-radius: 10rpx;
+	// box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
+	&.modified {
+		color: #ffffff;
+	}
+
+	&.up {
+		color: #fff;
+	}
+}
+
+.list {
+	padding-left: 30rpx;
+	margin-top: 30rpx;
+	background-color: #ffffff;
+
+	.box {
+		display: flex;
+		align-items: center;
+		width: 100%;
+		height: 120rpx;
+
+		.icon {
+			font-size: 48rpx;
+			padding-right: 20rpx;
+
+			.icon-img {
+				height: 50rpx;
+				width: 50rpx;
+			}
+		}
+
+		.iconweixin1 {
+			color: #18bf16;
+		}
+
+		.iconzhifubao {
+			color: #08aaec;
+		}
+
+		.title-box {
+			flex-grow: 1;
+			text-align: left;
+		}
+	}
+}
+
+/deep/ .uni-radio-input {
+	width: 45rpx;
+	height: 45rpx;
+}
+
+.row {
+	display: flex;
+	align-items: center;
+	position: relative;
+	padding: 0 30upx;
+	height: 110upx;
+	background: #fff;
+
+	.tit {
+		flex-shrink: 0;
+		width: 250upx;
+		font-size: 30upx;
+	}
+
+	.input {
+		flex: 1;
+		font-size: 30upx;
+	}
+
+	.iconlocation {
+		font-size: 36upx;
+	}
+}
+</style>

pages/order/evaluate.vue

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

pages/order/expressInfo.vue

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

pages/order/order.vue

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

pages/order/orderRefund.vue

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

pages/tabbar/box.vue

@@ -1,37 +1,37 @@
 <template>
 	<view class="box">
-		<view class="box_head flexs">
+		<view class="box-head flexs">
 			<!-- 修改 in 2 改成 in 3 标题名调用titleName方法 -->
-			<view class="box_head_li center" @click="changeIndex(index)" v-for="(item, index) in 3" :class="{ active: index == i }" :key="index">{{ titleName(index) }}</view>
+			<view class="box-head-item center" @click="changeIndex(index)" v-for="(item, index) in 3" :class="{ active: index == i }" :key="index">{{ titleName(index) }}</view>
 		</view>
 		<!-- 修改 -->
 		<view class="box_ul">
 			<!-- 待提货 已回列表 -->
 			<template v-if="i < 2">
-				<view class="box_ul_li" v-for="(item, index) in boxList" :key="index" @click="change(item)">
-					<image class="an" v-if="i == 0" :src="item.flag ? '/static/image/publice/xuanzhong1@2x.png' : '/static/image/me/weixuanzhong@2x.png'" mode=""></image>
-					<view class="box_ul_li_img"><image :src="item.goods_image" mode="aspectFill"></image></view>
-					<view class="box_ul_li_main">
-						<view class="box_ul_li_name">
+				<view class="main" v-for="(item, index) in boxList" :key="index" @click="change(item)">
+					<image class="main-icon" v-if="i == 0" :src="item.flag ? '/static/image/publice/xuanzhong1@2x.png' : '/static/image/me/weixuanzhong@2x.png'" mode=""></image>
+					<view class="main-img"><image :src="item.goods_image" mode="aspectFill"></image></view>
+					<view class="main-main">
+						<view class="main-name">
 							<!-- 修改 -->
 							<text>{{ item.goods_name }}</text>
 						</view>
-						<view class="box_ul_li_price">
-							<view class="khj">
+						<view class="main-price">
+							<view class="kh-price">
 								开盒价：
 								<text>{{ item.box_coin_price }}金币</text>
 							</view>
-							<view class="xsj">
+							<view class="xs-price">
 								销售价：
 								<text>{{ item.goods_coin_price }}金币</text>
 							</view>
-							<view class="hsj">
-								回收价：
+							<view class="tk-price">
+								退款价：
 								<text>{{ item.goods_hui_price }}金币</text>
 							</view>
 						</view>
 					</view>
-					<view class="box_ul_li_time flex">
+					<view class="main_time flex">
 						<!-- 修改 -->
 						<view>时间：{{ item.time }}</view>
 						<!-- 新增 -->
@@ -41,18 +41,18 @@
 			</template>
 			<!-- 新增 转赠列表 -->
 			<template v-else>
-				<view class="box_ul_li flexs" v-for="(item, index) in donationList" :key="'donation-' + index" @click="item.flag = !item.flag">
-					<view class="box_ul_li_img"><image :src="item.zzimage" mode="aspectFill"></image></view>
-					<view class="box_ul_li_main">
-						<view class="box_ul_li_name">
+				<view class="main flexs" v-for="(item, index) in donationList" :key="'donation-' + index" @click="item.flag = !item.flag">
+					<view class="main-img"><image :src="item.zzimage" mode="aspectFill"></image></view>
+					<view class="main-main">
+						<view class="main-name">
 							<!-- 修改 -->
 							<text>{{ item.boxgoods }}</text>
 						</view>
-						<view class="box_ul_li_price flex">
-							<view class="box_ul_li_time">时间：{{ item.zhuanztime }}</view>
+						<view class="main-price flex">
+							<view class="main_time">时间：{{ item.zhuanztime }}</view>
 							<text style="text-align: right;">已转赠</text>
 						</view>
-						<view class="box_ul_li_time">受赠人：{{ item.szuser }}</view>
+						<view class="main_time">受赠人：{{ item.szuser }}</view>
 					</view>
 				</view>
 			</template>
@@ -63,7 +63,7 @@
 				<text>全选({{ totalNumber }})</text>
 			</view>
 			<view class="box_footer_ul flexs">
-				<view class="box_footer_li center" v-for="(items, index) in 2" :key="index" @click="apply(index)">{{ index == 0 ? '一键回收' : '申请发货' }}</view>
+				<view class="btn-box-item center" v-for="(items, index) in 2" :key="index" @click="apply(index)">{{ index == 0 ? '一键退款' : '申请发货' }}</view>
 			</view>
 		</view>
 		<!-- 新增 转赠窗口 -->
@@ -72,9 +72,9 @@
 				<view class="title">请输入您转赠人的手机号</view>
 				<view class="input-container"><input v-model="donationPhone" type="number" placeholder="请输入转赠人注册手机号" /></view>
 				<view class="tip">注：一旦转赠成功不可退货，请谨慎操作</view>
-				<view class="donation-btns">
-					<view class="box_footer_li center" @click="$refs.donation.close()">取消</view>
-					<view class="box_footer_li center" @click="donation()">确定</view>
+				<view class="btn-box">
+					<view class="btn-box-item center" @click="$refs.donation.close()">取消</view>
+					<view class="btn-box-item center" @click="donation()">确定</view>
 				</view>
 			</view>
 		</uni-popup>
@@ -125,14 +125,14 @@ export default {
 				case 0:
 					return '待提货';
 				case 1:
-					return '已回收';
+					return '已退款';
 				case 2:
 					return '已转赠';
 			}
 		},
 		//申请发货
 		apply(index) {
-			if (!this.boxList.some(item => item.flag)) return uni.showToast({ title: '请勾选要' + (index == 0 ? '回收' : '发货') + '的商品', icon: 'none' });
+			if (!this.boxList.some(item => item.flag)) return uni.showToast({ title: '请勾选要' + (index == 0 ? '退款' : '发货') + '的商品', icon: 'none' });
 			let ids = [];
 			this.boxList.forEach(item => {
 				if (item.flag) {
@@ -143,8 +143,8 @@ export default {
 				uni.showModal({
 					cancelText: '取消',
 					confirmText: '确认',
-					title: '一键回收',
-					content: '是否确认一键回收？',
+					title: '一键退款',
+					content: '是否确认一键退款？',
 					success: res => {
 						if (res.confirm) {
 							this.$api.exchange({ record_ids: ids.join(',') }).then(res => {
@@ -249,14 +249,14 @@ export default {
 </script>
 
 <style lang="scss">
-.an {
+.main-icon {
 	height: 25px;
 	width: 25px;
 	float: left;
 	position: relative;
 	top: 42px;
 }
-.box_head {
+.box-head {
 	position: sticky;
 	top: 88rpx;
 	/* #ifndef H5 */
@@ -266,7 +266,7 @@ export default {
 	background: #fafafa;
 	z-index: 2021;
 	width: 100%;
-	.box_head_li {
+	.box-head-item {
 		flex: 1;
 		font-size: 30rpx;
 		height: 90rpx;
@@ -274,17 +274,17 @@ export default {
 	}
 	.active {
 		border-radius: 100rpx;
-		color: #69a8f8;
+		color: #fe3b3b;
 	}
 }
 .box_ul {
 	padding: 0 30rpx 98rpx 30rpx;
-	.box_ul_li {
+	.main {
 		padding: 15rpx;
 		margin-bottom: 20rpx;
 		background: #ffffff;
 		border-radius: 20rpx;
-		.box_ul_li_img {
+		.main-img {
 			width: 30%;
 			float: left;
 			image {
@@ -294,11 +294,11 @@ export default {
 			}
 			margin-right: 20rpx;
 		}
-		.box_ul_li_main {
+		.main-main {
 			flex: 1;
 		}
 		//修改
-		.box_ul_li_name {
+		.main-name {
 			font-size: 28rpx;
 			display: flex;
 			overflow: hidden;
@@ -310,9 +310,9 @@ export default {
 				font-weight: bold;
 			}
 		}
-		.box_ul_li_price {
+		.main-price {
 			text {
-				color: #66a6ff;
+				color: #fe3b3b;
 				font-size: 28rpx;
 				font-weight: 600;
 			}
@@ -322,21 +322,21 @@ export default {
 			}
 			margin: 15rpx 0;
 		}
-		.box_ul_li_price .hsj,
-		.khj,
-		.xsj {
+		.main-price .tk-price,
+		.kh-price,
+		.xs-price {
 			display: block;
 			margin: 10rpx 0;
 			uni-text {
 				float: right;
 			}
 		}
-		.box_ul_li_price .hsj {
+		.main-price .tk-price {
 			uni-text {
 				color: #000000;
 			}
 		}
-		.box_ul_li_time {
+		.main_time {
 			color: #999999;
 			font-size: 22rpx;
 			align-items: center;
@@ -350,7 +350,7 @@ export default {
 				float: right;
 			}
 			.item-btn {
-				background-image: linear-gradient(0deg, rgb(137, 247, 254) 0%, rgb(102, 166, 255) 100%);
+				background-image: linear-gradient(0deg, #ff97c5 0%, #fe3b3b 100%);
 				color: #ffffff;
 				border-radius: 19px;
 				font-size: 28rpx;
@@ -384,7 +384,7 @@ export default {
 			font-size: 28rpx;
 		}
 	}
-	.box_footer_li {
+	.btn-box-item {
 		color: #ffffff;
 		width: 200rpx;
 		height: 70rpx;
@@ -395,10 +395,10 @@ export default {
 			// background-image: -moz-linear-gradient( 60deg, rgb(255,200,222) 0%, rgb(255,103,164) 100%);
 			// background-image: -webkit-linear-gradient( 60deg, rgb(255,200,222) 0%, rgb(255,103,164) 100%);
 			// background-image: -ms-linear-gradient( 60deg, rgb(255,200,222) 0%, rgb(255,103,164) 100%);
-			background-color: rgb(255, 103, 164);
+			background-image: linear-gradient(0deg, #b0f7b9 0%, #42f16b 100%);
 		}
 		&:last-child {
-			background-color: rgb(102, 166, 255);
+			background-image: linear-gradient(0deg, #ff97c5 0%, #fe3b3b 100%);
 			// background-image: -moz-linear-gradient( 0deg, rgb(137,247,254) 0%, rgb(102,166,255) 100%);
 			// background-image: -webkit-linear-gradient( 0deg, rgb(137,247,254) 0%, rgb(102,166,255) 100%);
 			// background-image: -ms-linear-gradient( 0deg, rgb(137,247,254) 0%, rgb(102,166,255) 100%);
@@ -431,7 +431,7 @@ export default {
 		text-align: center;
 		margin-bottom: 30rpx;
 	}
-	.donation-btns {
+	.btn-box {
 		display: flex;
 		gap: 30rpx;
 		view {

pages/tabbar/index.vue

@@ -4,8 +4,8 @@
 		<!-- <view v-if="isWeiXin" class="shadow">
 			<image src="/static/image/tabbar/weixinShadow.png" mode="aspectFit"></image>
 		</view> -->
-		<view class="top">
-			<view class="title">
+		<view class="main-top">
+			<view class="main-title">
 				<!-- <view class="play-explain" @tap="$refs.regulation.open()">
 					<image class="small-img" src="/static/image/new_home/ckgz.png" mode="widthFix"></image>
 					<text>查看规则</text>
@@ -15,38 +15,38 @@
 					<text>买家须知</text>
 				</view> -->
 
-				<view class="kf" @click="zxkf()"><image class="small-img" src="https://www.chaomangdao.com/image/new_home/kf.png" mode="widthFix"></image></view>
+				<view class="service" @click="zxkf()"><image class="main-left-icon" src="https://www.chaomangdao.com/image/new_home/kf.png" mode="widthFix"></image></view>
 			</view>
-			<view class="left-cd">
+			<view class="main-left">
 				<!-- <view class="details_title_mp3" @click="changePlay">
 					<image :class="['bjtb', isPlay && 'run']" :src="isPlay ? '/static/image/home/bofang@2x.png' : '/static/image/home/guanbiyinyue@2x.png'" mode="widthFix"></image>
 				</view> -->
-				<view class="oval1" @click="toMyBox()">
-					<image class="small-img" src="../../static/image/new_home/tbxg.png" mode="widthFix"></image>
+				<view class="main-left-icon" @click="toMyBox()">
+					<image class="main-left-icon-bg" src="../../static/image/new_home/tbxg.png" mode="widthFix"></image>
 					<!-- <span>物品盒柜</span> -->
 				</view>
-				<view class="right" @click="wfashuiming()">
-					<image class="small-img" src="../../static/image/new_home/wfsm.png" mode="widthFix"></image>
+				<view class="main-left-right" @click="wfashuiming()">
+					<image class="main-left-icon" src="../../static/image/new_home/wfsm.png" mode="widthFix"></image>
 					<!-- <span>玩法说明</span> -->
 				</view>
 			</view>
 			<lunbobox></lunbobox>
-			<view class="loop-container">
+			<view class="banner">
 				<!-- 图片轮播主区域 -->
-				<view class="loop-image-main">
-					<view class="box-image-bj"><image src="../../static/image/new_home/box-images-bj.png" mode=""></image></view>
+				<view class="banner-main">
+					<view class="banner-main-bg"><image src="../../static/image/new_home/box-images-bj.png" mode=""></image></view>
 					<prize-flying v-if="currBox" :box-id="currBox.box_id"></prize-flying>
 					<!-- 图片轮播 -->
-					<image class="arrow arrow-left" src="../../static/image/new_home/arrow-left.png" mode="widthFix" @click="prev"></image>
-					<image class="arrow arrow-right" src="../../static/image/new_home/arrow-right.png" mode="widthFix" @click="next"></image>
-					<view class="loop-image-warapper">
-						<swiper class="swiper" circular :current="loopData.current" @change="loopItemChange($event.detail.current)">
+					<image class="banner-item banner-item-left" src="../../static/image/new_home/arrow-left.png" mode="widthFix" @click="prev"></image>
+					<image class="banner-item banner-item-right" src="../../static/image/new_home/arrow-right.png" mode="widthFix" @click="next"></image>
+					<view class="banner-item-main">
+						<swiper class="banner-swper" circular :current="loopData.current" @change="loopItemChange($event.detail.current)">
 							<template v-for="(item, index) in loopData.list">
 								<swiper-item :key="index">
-									<view :class="['image-box']">
+									<view :class="['banner-image-box']">
 										<template>
 											<image
-												:class="['box-banner']"
+												:class="['banner-banner']"
 												:src="
 													item.box_banner_images[0].indexOf('http') == -1
 														? 'https://www.chaomangdao.com' + item.box_banner_images[0]
@@ -66,7 +66,7 @@
 						<image src="/h5/static/image/new_home/dizhuo.png" mode="heightFix"></image>
 					</view> -->
 					<!-- 手指 -->
-					<view class="finger"><image src="../../static/image/new_home/sz.png" mode="heightFix"></image></view>
+					<view class="fingerAnimation"><image src="../../static/image/new_home/sz.png" mode="heightFix"></image></view>
 					<!-- 盲盒奖品 -->
 					<!-- <view class="prize" @click="goCurrMessage()">
 						<image src="/h5/static/image/new_home/mhjp.png" mode="heightFix"></image>
@@ -76,25 +76,10 @@
 				<view class="price-container">
 					<text class="price">￥{{ price }}.00元/个</text>
 				</view>
-				<!-- 文字轮播 -->
-				<!-- <view class="loop-label-warapper">
-					<swiper class="swiper" :indicator-dots="true" :previous-margin="loopData.margin" :next-margin="loopData.margin" 
-						 :current="loopData.current" @change="loopItemChange($event.detail.current)">
-						<template v-for="(item, index) in loopData.list">
-							<swiper-item :key="index" :class="[loopData.current == index && 'label-active']">
-								<view :class="['label-box']" @click="loopItemChange(index)">
-									<view :class="['loop-label']">
-										<text>{{item.box_name}}</text>
-									</view>
-								</view>
-							</swiper-item>
-						</template>
-					</swiper>
-				</view> -->
 				<!-- 图片文字轮播 -->
-				<view class="loop-label-warapper">
+				<view class="fontbanner">
 					<swiper
-						class="swiper"
+						class="fontbanner-swiper"
 						circular
 						:indicator-dots="true"
 						:previous-margin="loopData.margin"
@@ -104,12 +89,12 @@
 					>
 						<template v-for="(item, index) in loopData.list">
 							<swiper-item :key="index" :class="[loopData.current == index && 'label-active']">
-								<view :class="['label-box']" @click="loopItemChange(index)">
-									<view :class="['loop-image-label']">
+								<view :class="['fontbanner-box']" @click="loopItemChange(index)">
+									<view :class="['fontbanner-bg-box']">
 										<image
 											:src="item.box_foot_images.indexOf('http') == -1 ? 'https://www.chaomangdao.com' + item.box_foot_images : item.box_foot_images"
 											mode="aspectFit"
-											class="loop-image-label-img"
+											class="fontbanner-bg-box-img"
 										></image>
 										<text>{{ item.box_name }}</text>
 									</view>
@@ -124,7 +109,7 @@
 		<view class="bottom">
 			<view>
 				<!-- 下方按钮区 -->
-				<view class="button-container">
+				<view class="btn">
 					<view class="side-btn" @click="haveTry()"><image src="/static/image/new_home/swmhan.png" mode="widthFix"></image></view>
 					<view class="center-btn" @click="selectNum()">
 						<image src="/static/image/new_home/khan.png" mode="widthFix"></image>
@@ -151,16 +136,16 @@
 				</view>
 			</view> -->
 		</view>
-		<uni-popup ref="num-popup" type="bottom" :mask-click="false">
-			<view class="num-popup">
+		<uni-popup ref="choose-number" type="bottom" :mask-click="false">
+			<view class="choose-number">
 				<view class="popup-close" @click="closeNumPopup"><image src="https://www.chaomangdao.com/image/home/guanbi@2x.png" mode=""></image></view>
-				<view class="num-button-group">
+				<view class="number-item">
 					<view class="num-button" @click="createOder(1)">
 						<image src="../../static/image/new_home/btn-1.png" mode="widthFix"></image>
 						<text>一发入魂</text>
 					</view>
 				</view>
-				<view class="num-button-group">
+				<view class="number-item">
 					<view class="num-button" @click="createOder(5)">
 						<image src="../../static/image/new_home/btn-3.png" mode="widthFix"></image>
 						<text>五连绝世</text>
@@ -179,18 +164,18 @@
 		</uni-popup>
 		<uni-popup ref="regulation" :mask-click="false">
 			<view class="regulation">
-				<view class="regulation_close" @click="$refs.regulation.close()"><image src="https://www.chaomangdao.com/image/home/guanbi@2x.png" mode=""></image></view>
-				<view class="regulation_name">玩法规则</view>
-				<view class="regulation_main">
+				<view class="regulation-close" @click="$refs.regulation.close()"><image src="https://www.chaomangdao.com/image/home/guanbi@2x.png" mode=""></image></view>
+				<view class="regulation-name">玩法规则</view>
+				<view class="regulation-main">
 					<scroll-view scroll-y="true" class="scroll-view"><u-parse :content="message"></u-parse></scroll-view>
 				</view>
 			</view>
 		</uni-popup>
 		<uni-popup ref="regulation_1" :mask-click="false">
 			<view class="regulation_1">
-				<view class="regulation_close" @click="$refs.regulation_1.close()"><image src="https://www.chaomangdao.com/image/home/guanbi@2x.png" mode=""></image></view>
-				<view class="regulation_name">买家须知</view>
-				<view class="regulation_main">
+				<view class="regulation-close" @click="$refs.regulation_1.close()"><image src="https://www.chaomangdao.com/image/home/guanbi@2x.png" mode=""></image></view>
+				<view class="regulation-name">买家须知</view>
+				<view class="regulation-main">
 					<scroll-view scroll-y="true" class="scroll-view"><u-parse :content="mjxz"></u-parse></scroll-view>
 				</view>
 			</view>
@@ -428,7 +413,7 @@ export default {
 			this.xh = true;
 			this.type = 0;
 			this.boxNum = 1;
-			this.$refs['num-popup'].open();
+			this.$refs['choose-number'].open();
 		},
 		//创建订单
 		createOder(num) {
@@ -438,7 +423,7 @@ export default {
 		//创建订单成功或者试玩返回结果
 		closeNumPopup() {
 			//关闭数量弹窗
-			this.$refs['num-popup'].close();
+			this.$refs['choose-number'].close();
 		},
 		//展示结果
 		showResult(result) {
@@ -528,23 +513,23 @@ function isWeiXin() {
 /deep/ .uni-swiper-dots {
 	display: none;
 }
-.left-cd {
+.main-left {
 	display: flex;
 	align-items: center;
 	z-index: 99;
 	position: absolute;
 	top: 1vh;
 	right: 40rpx;
-	.oval span,
-	.oval1 span,
-	.right span {
+	.oval,
+	.main-left-icon,
+	.main-left-right {
 		text-align: center;
 		display: block;
 		color: #ffffff;
 		margin: 10rpx;
 	}
 }
-.oval1 {
+.main-left-icon {
 	margin: 20rpx;
 }
 uni-page-body {
@@ -558,14 +543,14 @@ uni-page-body {
 	background: #ffffff;
 	border-radius: 20rpx;
 	position: relative;
-	.regulation_close {
+	.regulation-close {
 		position: absolute;
 		width: 44rpx;
 		height: 44rpx;
 		top: 30rpx;
 		right: 30rpx;
 	}
-	.regulation_name {
+	.regulation-name {
 		padding: 40rpx 0;
 		text-align: center;
 		font-size: 30rpx;
@@ -606,7 +591,7 @@ uni-page-body {
 		width: 40rpx;
 	}
 }
-.kf {
+.service {
 	position: absolute;
 	box-shadow: 0px 4rpx 6rpx 2rpx #5ca6c8;
 	background-color: #fff;
@@ -664,51 +649,51 @@ page {
 		flex-direction: column;
 	}
 
-	.top {
+	.main-top {
 		flex: 0.6;
-		.loop-container {
+		.banner {
 			background: url(https://www.chaomangdao.com/image/hzbj.gif);
-			.loop-image-main {
+			.banner-main {
 				margin-bottom: 20rpx;
 				position: relative;
 				// height: 452rpx;
 				height: 600rpx;
 				margin-top: 300rpx;
-				.arrow {
+				.banner-item {
 					width: 60rpx;
 					position: absolute;
 					top: 50%;
 					transform: translateY(-20%);
 					z-index: 99;
-					&.arrow-left {
+					&.banner-item-left {
 						left: 80rpx;
 					}
-					&.arrow-right {
+					&.banner-item-right {
 						right: 80rpx;
 					}
 				}
 
-				.loop-image-warapper {
+				.banner-item-main {
 					position: absolute;
 					height: 100%;
 					width: 100%;
-					.swiper {
+					.banner-swper {
 						height: 100%;
 					}
-					.image-box {
+					.banner-image-box {
 						display: flex;
 						justify-content: center;
 						height: 100%;
-						.box-banner {
+						.banner-banner {
 							height: 70%;
 						}
-						.box-banner-0 {
+						.banner-banner-0 {
 							width: 118px;
 							height: 60%;
 							position: absolute;
 							bottom: 0;
 						}
-						.box-banner-1 {
+						.banner-banner-1 {
 							position: absolute;
 							top: 60px;
 							height: 50%;
@@ -724,7 +709,7 @@ page {
 						margin: 0 auto;
 					}
 				}
-				.finger {
+				.fingerAnimation {
 					position: absolute;
 					z-index: 21;
 					height: 140rpx;
@@ -739,17 +724,17 @@ page {
 					z-index: 22;
 				}
 			}
-			.loop-label-warapper {
+			.fontbanner {
 				height: 260rpx;
 				margin-top: 18rpx;
-				.label-box {
+				.fontbanner-box {
 					height: 100%;
 					display: flex;
 					align-items: center;
 					justify-content: center;
 					box-shadow: 3px 0px 0px 3px #45bfff;
 				}
-				.swiper {
+				.fontbanner-swiper {
 					// background: url(https://www.chaomangdao.com/image/text-bj.png);
 					// background-size: 100% 100%;
 					height: 260rpx;
@@ -773,7 +758,7 @@ page {
 						color: #94a9ee;
 					}
 				}
-				.loop-image-label {
+				.fontbanner-bg-box {
 					transition: 0.3s;
 					background: linear-gradient(white, 80%, lightgrey);
 					padding: 2px;
@@ -782,7 +767,7 @@ page {
 					// height: 247rpx;
 					width: 210rpx;
 					text-align: center;
-					// .loop-image-label-img {
+					// .fontbanner-bg-box-img {
 					// 	height: 185rpx;
 					// }
 					image {
@@ -804,7 +789,7 @@ page {
 							color: #7494fe;
 						}
 					}
-					.loop-image-label {
+					.fontbanner-bg-box {
 						border: 2px solid #45bfff;
 					}
 				}
@@ -817,7 +802,7 @@ page {
 	.bottom {
 		margin-top: 20rpx;
 		flex: 0.4;
-		.button-container {
+		.btn {
 			flex: 1;
 			margin-top: 20rpx;
 			display: flex;
@@ -885,12 +870,12 @@ page {
 		}
 	}
 }
-.small-img {
+.main-left-icon {
 	width: 80rpx;
 	margin: 0 auto;
 }
 //选择数量弹窗
-.num-popup {
+.choose-number {
 	background: #ffffff;
 	border-radius: 10px 10px 0px 0px;
 	padding: 50px 25px 90px 25px;
@@ -901,7 +886,7 @@ page {
 		height: 44rpx;
 		position: absolute;
 	}
-	.num-button-group {
+	.number-item {
 		display: flex;
 		justify-content: center;
 		gap: 50rpx;
@@ -988,7 +973,7 @@ page {
 		transform: rotate(360deg);
 	}
 }
-.loop-image-warapper {
+.banner-item-main {
 	animation: updown 2s infinite;
 	-webkit-animation: updown 2s infinite;
 }
@@ -1003,7 +988,7 @@ page {
 		transform: scale(0.7);
 	}
 }
-.finger {
+.fingerAnimation {
 	animation: rotates 2.8s infinite;
 	-webkit-animation: rotates 2.8s infinite;
 }
@@ -1019,7 +1004,7 @@ page {
 		height: 480rpx !important;
 	}
 }
-.box-image-bj {
+.banner-main-bg {
 	// background: url(../../static/image/new_home/box-images-bj.png);
 	background-size: 100% 100%;
 	height: 500rpx;

pages/tabbar/me.vue

@@ -1,78 +1,60 @@
 <template>
-	<view class="me">
+	<view class="contant">
 		<!-- S 头部 -->
-		<view class="grxxtb">
+		<view class="top">
 			<view class="vheight"></view>
 			<!-- 用户 -->
-			<view class="grxxtb-top">
-				<view class="me_head flexs" @click="goSet">
-					<view class="txbj"><image :src="info.avatar" mode="aspectFill"></image></view>
+			<view class="userBox">
+				<view class="user-main flexs" @click="goSet">
+					<view class="user-avatar"><image :src="info.avatar" mode="aspectFill"></image></view>
 					<text>{{ info.nickname }}</text>
 				</view>
-				<view class="ts" @click="zxkf()">
+				<view class="user-ts" @click="zxkf()">
 					<image src="../../static/image/tabbar/ts.png"></image>
-					<view class="ts-font">投诉</view>
+					<view class="user-ts-font">投诉</view>
 				</view>
 			</view>
-			<view class="grxxtb-bottom">
-				<view class="grxxtb-bottom-item" @click="goWallet">
-					<view class="grxxtb-bottom-item-bg"><image src="../../static/image/tabbar/jinbi.png" mode=""></image></view>
-					<view class="grxxtb-bottom-item-font">金币</view>
-					<view class="grxxtb-bottom-item-font">{{ info.coin || 0 }}</view>
+			<view class="userMoney">
+				<view class="userMoney-item" @click="goWallet">
+					<view class="userMoney-item-bg"><image src="../../static/image/tabbar/jinbi.png" mode=""></image></view>
+					<view class="userMoney-item-font">金币</view>
+					<view class="userMoney-item-font">{{ info.coin || 0 }}</view>
 				</view>
-				<view class="grxxtb-bottom-item" @click="goYue">
-					<view class="grxxtb-bottom-item-bg"><image src="../../static/image/tabbar/yuee.png" mode=""></image></view>
-					<view class="grxxtb-bottom-item-font">余额</view>
-					<view class="grxxtb-bottom-item-font">{{ info.money || 0 }}</view>
+				<view class="userMoney-item" @click="goYue">
+					<view class="userMoney-item-bg"><image src="../../static/image/tabbar/yuee.png" mode=""></image></view>
+					<view class="userMoney-item-font">余额</view>
+					<view class="userMoney-item-font">{{ info.money || 0 }}</view>
 				</view>
-				<view class="grxxtb-bottom-item" @click="toMyBox()">
-					<view class="grxxtb-bottom-item-bg"><image src="../../static/image/tabbar/baobei.png" mode=""></image></view>
-					<view class="grxxtb-bottom-item-font">宝贝数</view>
-					<view class="grxxtb-bottom-item-font">{{ bbs }}</view>
+				<view class="userMoney-item" @click="toMyBox()">
+					<view class="userMoney-item-bg"><image src="../../static/image/tabbar/baobei.png" mode=""></image></view>
+					<view class="userMoney-item-font">宝贝数</view>
+					<view class="userMoney-item-font">{{ bbs }}</view>
 				</view>
 			</view>
 		</view>
 		<!-- E 头部-->
 		<!-- 中间 -->
-		<view class="me_main">
-			<view class="me_main_head">
-				<view class="me_main_box">
-					<view class="me_main_box_order flex">
-						<view class="me_main_box_order_txt">我的订单</view>
-						<view class="me_main_box_order_go flexs" @click="order(0)">
+		<view class="order">
+			<view class="order-main">
+				<view class="order-box">
+					<view class="order-box-title flex">
+						<view class="order-box-title-font">我的订单</view>
+						<view class="order-box-title-icon flexs" @click="order(0)">
 							<text>全部订单</text>
 							<image src="/static/image/publice/jinruer@2x.png" mode=""></image>
 						</view>
 					</view>
-					<view class="me_main_head_ul flex">
-						<view class="me_main_head_li center" v-for="(item, index) in orderList" :key="index" @click="order(index)">
+					<view class="order-info flex">
+						<view class="order-info-item center" v-for="(item, index) in orderList" :key="index" @click="order(index)">
 							<image :src="item.image" mode=""></image>
 							<text>{{ item.name }}</text>
 						</view>
 					</view>
 				</view>
 			</view>
-			<!-- <view class="me_main_con">
-				<view class="me_main_con_head">
-					钱包
-					<view class="txmx" @click="txmx">提现明细>></view>
-				</view>
-
-				<view class="me_main_con_gold flex">
-					<view class="me_main_con_gold_l flexs" @click="goWallet">
-						<text>金币：</text>
-						<text>{{ info.coin || 0 }}</text>
-					</view>
-					<view class="me_main_con_gold_l">
-						<text>余额：</text>
-						<text>{{ info.money || 0 }}</text>
-					</view>
-					<view class="me_main_con_gold_btn center" @click="recharge">充值</view>
-				</view>
-			</view> -->
-			<view class="me_main_footer">
-				<view class="me_main_footer_li center" v-for="(item, index) in footerList" :key="index" @click="changeFooter(item)">
-					<view class="me_main_footer_img">
+			<view class="tool">
+				<view class="tool-box center" v-for="(item, index) in footerList" :key="index" @click="changeFooter(item)">
+					<view class="tool-box-item">
 						<image :src="item.image" mode=""></image>
 						<text>{{ item.name }}</text>
 					</view>
@@ -240,7 +222,7 @@ export default {
 .vheigh {
 	height: var(--status-bar-height);
 }
-.ts {
+.user-ts {
 	padding-right: 27rpx;
 	position: relative;
 	z-index: 22;
@@ -251,7 +233,7 @@ export default {
 		width: 42rpx;
 		height: 48rpx;
 	}
-	.ts-font {
+	.user-ts-font {
 		margin-top: 16rpx;
 		font-size: 25rpx;
 		font-family: PingFang SC;
@@ -259,27 +241,27 @@ export default {
 		color: #fafafa;
 	}
 }
-.grxxtb {
+.top {
 	width: 750rpx;
 	height: 456rpx;
-	background: url(https://www.chaomangdao.com/image/xxbj.jpg);
+	background: url(https://www.chaomangdao.com/image/xxbj.png);
 	background-size: 100%;
-	.grxxtb-top {
+	.userBox {
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
 	}
-	.grxxtb-bottom {
+	.userMoney {
 		padding: 0 27rpx;
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
-		.grxxtb-bottom-item {
+		.userMoney-item {
 			width: 225rpx;
 			height: 145rpx;
 			position: relative;
 			padding: 20rpx 16rpx;
-			.grxxtb-bottom-item-bg {
+			.userMoney-item-bg {
 				position: absolute;
 				top: 0;
 				left: 0;
@@ -291,7 +273,7 @@ export default {
 					height: 100%;
 				}
 			}
-			.grxxtb-bottom-item-font {
+			.userMoney-item-font {
 				position: relative;
 				z-index: 2;
 				font-size: 24rpx;
@@ -302,7 +284,7 @@ export default {
 		}
 	}
 }
-.me_head {
+.user-main {
 	image {
 		width: 100rpx;
 		height: 100rpx;
@@ -318,23 +300,23 @@ export default {
 		margin-left: 26rpx;
 	}
 }
-.me_head .txbj {
+.user-main .user-avatar {
 	width: 180rpx;
 	height: 180rpx;
 }
-.me_main {
+.order {
 	margin-top: 30rpx;
 	padding: 0 30rpx;
 	padding-bottom: 48rpx;
-	.me_main_head {
+	.order-main {
 		padding: 0 24rpx;
 		margin-bottom: 20rpx;
 		background: #ffffff;
 		box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(51, 51, 51, 0.1);
 		border-radius: 20rpx;
-		.me_main_head_nav {
+		.order-main_nav {
 			border-bottom: 2rpx solid #f7f7f7;
-			.me_main_head_nav_li {
+			.order-main_nav_li {
 				width: 50%;
 				height: 86rpx;
 				image {
@@ -349,17 +331,17 @@ export default {
 				}
 			}
 		}
-		.me_main_box {
+		.order-box {
 			padding: 0 14rpx 30rpx 14rpx;
-			.me_main_box_order {
+			.order-box-title {
 				padding: 30rpx 0 35rpx 0;
 			}
-			.me_main_box_order_txt {
+			.order-box-title-font {
 				color: #010101;
 				font-size: 28rpx;
 				font-weight: bold;
 			}
-			.me_main_box_order_go {
+			.order-box-title-icon {
 				image {
 					width: 22rpx;
 					height: 22rpx;
@@ -370,8 +352,8 @@ export default {
 					font-size: 22rpx;
 				}
 			}
-			.me_main_head_ul {
-				.me_main_head_li {
+			.order-info {
+				.order-info-item {
 					flex-direction: column;
 					image {
 						width: 44rpx;
@@ -386,22 +368,22 @@ export default {
 			}
 		}
 	}
-	.me_main_con {
+	.order_con {
 		background: #ffffff;
 		padding: 0 30rpx;
 		margin-bottom: 2rpx;
 		box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(51, 51, 51, 0.1);
 		border-radius: 20rpx;
-		.me_main_con_head {
+		.order_con_head {
 			padding: 30rpx 0;
 			color: #010101;
 			font-size: 28rpx;
 			font-weight: bold;
 		}
-		.me_main_con_gold {
+		.order_con_gold {
 			padding: 22rpx 0 26rpx 0;
 			border-top: 2rpx solid #f7f7f7;
-			.me_main_con_gold_l {
+			.order_con_gold_l {
 				text {
 					color: #010101;
 					font-size: 28rpx;
@@ -410,7 +392,7 @@ export default {
 					}
 				}
 			}
-			.me_main_con_gold_btn {
+			.order_con_gold_btn {
 				width: 100rpx;
 				height: 44rpx;
 				color: #ffffff;
@@ -419,14 +401,14 @@ export default {
 			}
 		}
 	}
-	.me_main_footer {
+	.tool {
 		width: 692rpx;
 		background: #ffffff;
 		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
 		border-radius: 10rpx;
 		margin: 20rpx auto 0;
 	}
-	.me_main_footer_li {
+	.tool-box {
 		width: calc(100% / 4);
 		float: left;
 		text-align: center;
@@ -434,7 +416,7 @@ export default {
 		margin-bottom: 2rpx;
 		background: #ffffff;
 		border-radius: 20rpx;
-		.me_main_footer_img {
+		.tool-box-item {
 			image {
 				width: 50rpx;
 				height: 50rpx;
@@ -448,7 +430,7 @@ export default {
 				display: block;
 			}
 		}
-		.me_main_footer_li_go {
+		.tool-box_go {
 			width: 22rpx;
 			height: 22rpx;
 		}

pages/tabbar/shai.vue

@@ -1,25 +1,25 @@
 <template>
-	<view class="box">
+	<view class="main">
 		<view v-if="canTi == 1">
-			<view class="box_ul">
-				<view class="box_ul_li " v-for="(item, index) in boxList" :key="index" @click="item.flag = !item.flag">
-					<view class="s-bt flex">
-						<view class="s-tx"><image :src="item.box_tx" mode="aspectFill"></image></view>
-						<view class="s-mc">{{ item.box_mc }}</view>
-						<!-- <view class="s-sj">{{ item.box_sj}}</view> -->
-						<view class="s-sj">{{ item.box_sj }}</view>
+			<view class="main-box">
+				<view class="main-item " v-for="(item, index) in mainList" :key="index" @click="item.flag = !item.flag">
+					<view class="main-userinfo flex">
+						<view class="main-avatar"><image :src="item.main_tx" mode="aspectFill"></image></view>
+						<view class="main-name">{{ item.main_mc }}</view>
+						<!-- <view class="main-font">{{ item.main_sj}}</view> -->
+						<view class="main-font">{{ item.main_sj }}</view>
 						<view class="s-qc"></view>
 					</view>
-					<view class="s-zw">{{ item.box_zw }}</view>
-					<view class="s-img-list ">
-						<view class="s-img-box" v-for="(item2, index) in item.box_img" :key="index" @click="item.flag = !item.flag">
+					<view class="main-info">{{ item.main_zw }}</view>
+					<view class="main-image-box ">
+						<view class="main-image-item" v-for="(item2, index) in item.main_img" :key="index" @click="item.flag = !item.flag">
 							<image :src="item2" mode="aspectFill" @click="lookImg(item2)"></image>
 						</view>
 						<view class="s-qc"></view>
 					</view>
 				</view>
 			</view>
-			<div class="shai-btn" @click="shaitu()"><image src="/static/image/new_home/shaitu.png" mode="widthFix"></image></div>
+			<div class="main-btn" @click="shaitu()"><image src="/static/image/new_home/shaitu.png" mode="widthFix"></image></div>
 		</view>
 		<view class="jjqd" v-else>敬请期待</view>
 	</view>
@@ -35,11 +35,11 @@ export default {
 			isAll: false, //
 			pages: null, //
 			totalNumber: 0, //总数量
-			boxList: [] //盒子列表
+			mainList: [] //盒子列表
 		};
 	},
 	watch: {
-		boxList: {
+		mainList: {
 			handler(val) {
 				let totalNumber = 0;
 
@@ -78,7 +78,7 @@ export default {
 						item.flag = false;
 					});
 					this.pages = res.data.last_page;
-					this.boxList = this.page == 1 ? res.data.data : [...this.boxList, ...res.data.data];
+					this.mainList = this.page == 1 ? res.data.data : [...this.mainList, ...res.data.data];
 				}
 			});
 			this.$api.checkSwitch().then(({ data }) => {
@@ -112,7 +112,7 @@ export default {
 </script>
 
 <style lang="scss">
-.shai-btn {
+.main-btn {
 	position: fixed;
 	bottom: 70px;
 	right: 10px;
@@ -122,10 +122,10 @@ export default {
 	border-radius: 50%;
 }
 
-.s-bt {
+.main-userinfo {
 	display: block;
 }
-.s-tx {
+.main-avatar {
 	height: 80rpx;
 	width: 80rpx;
 	float: left;
@@ -134,13 +134,13 @@ export default {
 	}
 }
 
-.s-mc {
+.main-name {
 	float: left;
 	line-height: 80rpx;
 	padding-left: 30rpx;
 	font-size: 26rpx;
 }
-.s-sj {
+.main-font {
 	float: right;
 	line-height: 80rpx;
 	padding-right: 10rpx;
@@ -150,9 +150,9 @@ export default {
 	clear: both;
 }
 
-.s-zw {
+.main-info {
 	padding: 20rpx 0;
-	-webkit-box-pack: justify;
+	-webkit-main-pack: justify;
 	-webkit-justify-content: space-between;
 	justify-content: space-between;
 	color: var(--mainColor);
@@ -161,7 +161,7 @@ export default {
 	line-height: 1.6;
 }
 
-.s-img-box {
+.main-image-item {
 	float: left;
 
 	image {
@@ -176,14 +176,14 @@ export default {
 	}
 }
 
-.box_head {
+.main_head {
 	position: sticky;
 	top: 88rpx;
 	left: 0;
 	background: #fafafa;
 	z-index: 2021;
 	width: 100%;
-	.box_head_li {
+	.main_head_li {
 		flex: 1;
 		font-size: 30rpx;
 		height: 90rpx;
@@ -193,14 +193,14 @@ export default {
 		color: #f6af32;
 	}
 }
-.box_ul {
+.main-box {
 	padding: 0 30rpx 98rpx 30rpx;
-	.box_ul_li {
+	.main-item {
 		padding: 30rpx;
 		margin-bottom: 20rpx;
 		background: #ffffff;
 		border-radius: 20rpx;
-		.box_ul_li_img {
+		.main-item_img {
 			image {
 				width: 168rpx;
 				height: 168rpx;
@@ -208,17 +208,17 @@ export default {
 			}
 			margin-right: 20rpx;
 		}
-		.box_ul_li_main {
+		.main-item_main {
 			flex: 1;
 		}
-		.box_ul_li_name {
+		.main-item_name {
 			font-size: 28rpx;
-			display: -webkit-box;
-			-webkit-box-orient: vertical;
+			display: -webkit-main;
+			-webkit-main-orient: vertical;
 			-webkit-line-clamp: 2;
 			overflow: hidden;
 		}
-		.box_ul_li_price {
+		.main-item_price {
 			text {
 				color: #cf271b;
 				font-size: 28rpx;
@@ -229,13 +229,13 @@ export default {
 			}
 			margin: 15rpx 0;
 		}
-		.box_ul_li_time {
+		.main-item_time {
 			color: #999999;
 			font-size: 22rpx;
 		}
 	}
 }
-.box_footer {
+.main_footer {
 	height: 98rpx;
 	z-index: 20;
 	position: fixed;
@@ -243,7 +243,7 @@ export default {
 	width: 100%;
 	padding: 0 30rpx;
 	background: #ffffff;
-	.box_footer_all {
+	.main_footer_all {
 		image {
 			width: 44rpx;
 			height: 44rpx;
@@ -254,7 +254,7 @@ export default {
 			font-size: 28rpx;
 		}
 	}
-	.box_footer_li {
+	.main_footer_li {
 		color: #ffffff;
 		width: 220rpx;
 		height: 78rpx;