上传文件至 'pages/me'

新填页面

pages/me/address.vue

@@ -0,0 +1,139 @@
+<template>
+	<view>
+		<view class="item" v-for="(res, index) in siteList" :key="res.id">
+			<view class="top">
+				<view class="name">{{ res.name }}</view>
+				<view class="phone">{{ res.phone }}</view>
+				<view class="tag">
+					<text v-for="(item, index) in res.tag" :key="index" :class="{red:item.tagText=='默认'}">{{ item.tagText }}</text>
+				</view>
+			</view>
+			<view class="bottom">
+				广东省深圳市宝安区 自由路66号
+				<u-icon name="edit-pen" :size="40" color="#999999"></u-icon>
+			</view>
+		</view>
+		<view class="addSite" @tap="toAddSite">
+			<view class="add">
+				<u-icon name="plus" color="#ffffff" class="icon" :size="30"></u-icon>新建收货地址
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			siteList: []
+		};
+	},
+	onLoad() {
+		this.getData();
+	},
+	methods: {
+		getData() {
+			this.siteList = [
+				{
+					id: 1,
+					name: '游X',
+					phone: '183****5523',
+					tag: [
+						{
+							tagText: '默认'
+						},
+						{
+							tagText: '家'
+						}
+					],
+					site: '广东省深圳市宝安区 自由路66号'
+				},
+				{
+					id: 2,
+					name: '李XX',
+					phone: '183****5555',
+					tag: [
+						{
+							tagText: '公司'
+						}
+					],
+					site: '广东省深圳市宝安区 翻身路xx号'
+				},
+				{
+					id: 3,
+					name: '王YY',
+					phone: '153****5555',
+					tag: [],
+					site: '广东省深圳市宝安区 平安路13号'
+				}
+			];
+		},
+		toAddSite(){
+			uni.navigateTo({
+			    url: '/pages/me/modify'
+			});
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.item {
+	padding: 40rpx 20rpx;
+	.top {
+		display: flex;
+		font-weight: bold;
+		font-size: 34rpx;
+		.phone {
+			margin-left: 60rpx;
+		}
+		.tag {
+			display: flex;
+			font-weight: normal;
+			align-items: center;
+			text {
+				display: block;
+				width: 60rpx;
+				height: 34rpx;
+				line-height: 34rpx;
+				color: #ffffff;
+				font-size: 20rpx;
+				border-radius: 6rpx;
+				text-align: center;
+				margin-left: 30rpx;
+				background-color:rgb(49, 145, 253);
+			}
+			.red{
+				background-color:red
+			}
+		}
+	}
+	.bottom {
+		display: flex;
+		margin-top: 20rpx;
+		font-size: 28rpx;
+		justify-content: space-between;
+		color: #999999;
+	}
+}
+.addSite {
+	display: flex;
+	justify-content: space-around;
+	width: 600rpx;
+	line-height: 100rpx;
+	position: absolute;
+	bottom: 30rpx;
+	left: 80rpx;
+	background-color: #0095FF;
+	border-radius: 60rpx;
+	font-size: 30rpx;
+	.add{
+		display: flex;
+		align-items: center;
+		color: #ffffff;
+		.icon{
+			margin-right: 10rpx;
+		}
+	}
+}
+</style>

pages/me/coupon.vue

@@ -0,0 +1,294 @@
+<template>
+	<view>
+		<u-tabs class="switch" :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
+		<view class="u-wrap">
+			<view class="jingdong">
+				<view class="left">
+					<view class="sum">
+						￥
+						<text class="num">100</text>
+					</view>
+					<view class="type">
+						<image class="logo" src="../../static/sailun/sailun_coupon.png" mode=""></image>
+					</view>
+				</view>
+				<view class="right">
+					<view class="top">
+						<view class="title">
+							<h3>100元优惠卷</h3>
+						</view>
+						<view class="bottom">
+							<view class="date u-line-1">2020.10.31到期</view>
+							<view class="immediate-use">可使用</view>
+						</view>
+						<view class="Subhead">
+						</view>
+					</view>
+					<view class="Subhead_s">
+						详细信息
+					</view>
+				</view>
+			</view>
+			<view class="eject">
+				<u-collapse style="width: 98.9%;">
+					<u-collapse-item>
+						<view class="pullout_a">
+							<view class="pullout">
+								<view>扫码门店：某某门店</view>
+								<view class="left">
+									<view>扫码胎号: 45616516165</view>
+									<view>扫码时间: 2020-3-10 8:10:34</view>
+								</view>
+								<view class="right">
+									<view>领劵订单: 2020031001000001</view>
+									<view>入库条码：A93989895393</view>
+								</view>
+							</view>
+						</view>
+					</u-collapse-item>
+				</u-collapse>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				list: [{
+					name: '未使用'
+				}, {
+					name: '已使用'
+				}, {
+					name: '已失效'
+				}],
+				current: 0,
+			}
+		},
+		methods: {
+			change(index) {
+				this.current = index;
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.u-wrap {
+		padding: 24rpx;
+		margin-top: -50rpx;
+	}
+	.switch{
+		margin-bottom: 20rpx;
+	}
+
+	.pullout_a {
+		background-color: #FFFFFF;
+		height: 110rpx;
+		border-radius: 10rpx;
+		margin-top: -5rpx;
+	}
+
+	.pullout {
+		width: 96%;
+		margin: 0 auto;
+		font-size: 22rpx;
+
+		.left {
+			float: left;
+		}
+
+		.right {
+			float: right;
+		}
+	}
+
+	.pullout>view:nth-child(1) {
+		margin-top: 0rpx;
+		color: #0096DF;
+	}
+	.pullout>view{
+		margin-top: 10rpx;
+	}
+
+	.eject {
+		margin-top: -70rpx;
+
+		.u-collapse-title {
+			margin-left: 100rpx;
+		}
+	}
+
+	.Subhead {
+		// background-color: #18B566;
+		margin-top: 70rpx;
+	}
+
+	.Subhead_s {
+		margin-top: 10rpx;
+	}
+
+	.meituan {
+		margin: 30rpx auto;
+		background-color: #ffffff;
+		width: 700rpx;
+		// border: 10rpx;
+		color: $u-type-warning;
+		font-size: 28rpx;
+
+		.content {
+			display: flex;
+			align-items: center;
+			padding: 80rpx 20rpx;
+			border: 10rpx;
+			background-color: #fff5f4;
+
+			.left {
+				.sum {
+					font-size: 32rpx;
+
+					.num {
+						font-size: 60rpx;
+						font-weight: bold;
+					}
+				}
+			}
+
+			.centre {
+				margin-left: 40rpx;
+
+				.title {
+					font-size: 32rpx;
+					font-weight: bold;
+					color: $u-main-color;
+					margin-bottom: 20rpx;
+				}
+			}
+
+			.right {
+				margin-left: 30rpx;
+
+				.immediate-use {
+					padding: 0 20rpx;
+					height: 50rpx;
+					border-radius: 25rpx;
+					line-height: 50rpx;
+					background-color: $u-type-warning !important;
+					color: #ffffff !important;
+					font-size: 24rpx;
+					border: none;
+					word-break: keep-all;
+				}
+			}
+		}
+	}
+
+	.jingdong {
+		margin-top: 20rpx;
+		width: 700rpx;
+		height: auto;
+		display: flex;
+
+		.left {
+			width: 250rpx;
+			padding: 0 30rpx;
+			background-image: url(../../static/sailun/coupon-background.png);
+			background-repeat: no-repeat;
+			background-size: 100% 100%;
+			text-align: center;
+			font-size: 28rpx;
+			color: #ffffff;
+
+			.sum {
+				margin-top: 50rpx;
+				font-weight: bold;
+				font-size: 32rpx;
+
+				.num {
+					font-size: 80rpx;
+				}
+			}
+
+			.type {
+				margin-bottom: 50rpx;
+				font-size: 24rpx;
+
+				.logo {
+					width: 100%;
+					height: 40rpx;
+				}
+			}
+		}
+
+		.right {
+			padding: 20rpx 20rpx 0;
+			width: 700rpx;
+			font-size: 28rpx;
+			border-bottom-right-radius: 10rpx;
+			border-top-right-radius: 10rpx;
+			background-color: #fff;
+
+			.top {
+				border-bottom: 2rpx dashed $u-border-color;
+
+				.title {
+					margin-right: 60rpx;
+					line-height: 40rpx;
+				}
+
+				.bottom {
+					display: flex;
+					margin-top: 20rpx;
+					align-items: center;
+					justify-content: space-between;
+					margin-bottom: 10rpx;
+
+					.date {
+						font-size: 20rpx;
+						flex: 1;
+					}
+
+					.immediate-use {
+						height: auto;
+						padding: 0 20rpx;
+						font-size: 24rpx;
+						border-radius: 40rpx;
+						line-height: 40rpx;
+						color: #3995FF;
+						border: 2px solid #3995FF;
+						margin-left: 130rpx;
+					}
+				}
+			}
+
+			.tips {
+				width: 100%;
+				line-height: 50rpx;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				font-size: 24rpx;
+
+				.transpond {
+					margin-right: 10rpx;
+				}
+
+				.explain {
+					display: flex;
+					align-items: center;
+				}
+
+				.particulars {
+					width: 30rpx;
+					height: 30rpx;
+					box-sizing: border-box;
+					padding-top: 8rpx;
+					border-radius: 50%;
+					background-color: $u-type-info-disabled;
+					text-align: center;
+				}
+			}
+		}
+	}
+</style>

pages/me/modify.vue

@@ -0,0 +1,165 @@
+<template>
+	<view class="wrap">
+		<view class="top">
+			<view class="item">
+				<view class="left">收货人</view>
+				<input type="text" placeholder-class="line" placeholder="请填写收货人姓名" />
+			</view>
+			<view class="item">
+				<view class="left">手机号码</view>
+				<input type="text" placeholder-class="line" placeholder="请填写收货人手机号" />
+			</view>
+			<view class="item" @tap="showRegionPicker">
+				<view class="left">所在地区</view>
+				<input disabled type="text" placeholder-class="line" placeholder="省市区县、乡镇等" />
+			</view>
+			<view class="item address">
+				<view class="left">详细地址</view>
+				<textarea type="text" placeholder-class="line" placeholder="街道、楼牌等" />
+			</view>
+		</view>
+		<view class="bottom">
+			<view class="tag">
+				<view class="left">标签</view>
+				<view class="right">
+					<text class="tags">家</text>
+					<text class="tags">公司</text>
+					<view class="tags plus"><u-icon size="22" name="plus"></u-icon></view>
+				</view>
+			</view>
+			<view class="default">
+				<view class="left">
+					<view class="set">设置默认地址</view>
+					<view class="tips">提醒：每次默认推荐该地址</view>
+				</view>
+				<view class="right"><switch color="#0095FF" @change="setDefault" /></view>
+			</view>
+		</view>
+		<u-picker mode="region" ref="uPicker" v-model="show" />
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			show: false
+		};
+	},
+	methods: {
+		setDefault() {},
+		showRegionPicker() {
+			this.show = true;
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+/deep/ .line {
+	color: $u-light-color;
+	font-size: 28rpx;
+}
+.wrap {
+	background-color: #f2f2f2;
+	.top {
+		background-color: #ffffff;
+		border-top: solid 2rpx $u-border-color;
+		padding: 22rpx;
+		.item {
+			display: flex;
+			font-size: 32rpx;
+			line-height: 100rpx;
+			align-items: center;
+			border-bottom: solid 2rpx $u-border-color;
+			.left {
+				width: 180rpx;
+			}
+			input {
+				text-align: left;
+			}
+		}
+		
+		.address {
+			padding: 20rpx 0;
+			textarea {
+				// width: 100%;
+				height: 150rpx;
+				background-color: #f7f7f7;
+				line-height: 60rpx;
+				margin: 40rpx auto;
+				padding: 20rpx;
+			}
+		}
+		.site-clipboard {
+			padding-right: 40rpx;
+			textarea {
+				// width: 100%;
+				height: 150rpx;
+				background-color: #f7f7f7;
+				line-height: 60rpx;
+				margin: 40rpx auto;
+				padding: 20rpx;
+			}
+			.clipboard {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				font-size: 26rpx;
+				color: $u-tips-color;
+				height: 80rpx;
+				.icon {
+					margin-top: 6rpx;
+					margin-left: 10rpx;
+				}
+			}
+		}
+	}
+	.bottom {
+		margin-top: 20rpx;
+		padding: 40rpx;
+		padding-right: 0;
+		background-color: #ffffff;
+		font-size: 28rpx;
+		.tag {
+			display: flex;
+			.left {
+				width: 160rpx;
+			}
+			.right {
+				display: flex;
+				flex-wrap: wrap;
+				.tags {
+					width: 140rpx;
+					padding: 16rpx 8rpx;
+					border: solid 2rpx $u-border-color;
+					text-align: center;
+					border-radius: 50rpx;
+					margin: 0 10rpx 20rpx;
+					display: flex;
+					font-size: 28rpx;
+					align-items: center;
+					justify-content: center;
+					color: $u-content-color;
+					line-height: 1;
+				}
+				.plus {
+					//padding: 10rpx 0;
+				}
+			}
+		}
+		.default {
+			margin-top: 50rpx;
+			display: flex;
+			justify-content: space-between;
+			border-bottom: solid 2rpx $u-border-color;
+			line-height: 64rpx;
+			.tips {
+				font-size: 24rpx;
+			}
+			.right {
+			}
+		}
+	}
+}
+</style>

pages/me/result.vue

@@ -0,0 +1,126 @@
+<template>
+	<view>
+		<view class="head">
+			<view class="tips">
+				<image src="../../../static/sailun/successful.png" mode=""></image>
+				<view>查询成功</view>
+			</view>
+			<view class="stripe"></view>
+			<view class="roll">
+				<view>232654561651</view>
+				<view>
+					<view></view>
+					<view></view>
+					<u-line color="#f4f4f4" border-style="dashed" :hair-line="true" length="94%" style="margin: 0 auto;padding-top: 30rpx;" />
+				</view>
+				<view class="Exhibition">
+					<view><text>轮胎胎号</text><text>232654561651</text></view>
+					<view><text>轮胎类型</text><text>扫码出库</text></view>
+					<view><text>轮胎品牌</text><text>赛轮轮胎</text></view>
+					<view><text>轮胎规格</text><text>12R22.5</text></view>
+					<view><text>创建时间</text><text>2020-02-22 10:22:23</text></view>
+				</view>
+			</view>
+			<u-button type="primary" shape="circle" class="button">继续查询</u-button>
+		</view>
+	</view>
+</template>
+
+<script>
+</script>
+
+<style lang="scss" scoped>
+	.button {
+		width: 90%;
+		margin-top: 200rpx;
+	}
+
+	.head {
+		width: 750rpx;
+		height: 440rpx;
+		background-color: #0095FF;
+
+		.stripe {
+			width: 650rpx;
+			height: 30rpx;
+			background: rgba(0, 0, 0, 0.2);
+			border-radius: 12rpx;
+			margin: 0 auto;
+			margin-top: 40rpx;
+		}
+
+		.roll>view:nth-child(1) {
+			font-size: 42rpx;
+			font-weight: bold;
+			color: #0192FD;
+			text-align: center;
+			margin-bottom: 50rpx;
+		}
+
+		.roll {
+			width: 600rpx;
+			height: auto;
+			background: #FFFFFF;
+			margin: 0 auto;
+			margin-top: -15rpx;
+			box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(101, 176, 249, 0.3);
+			border-bottom-left-radius: 10rpx;
+			border-bottom-right-radius: 10rpx;
+			padding-top: 50rpx;
+			padding-bottom: 40rpx;
+
+			view:nth-child(2) {
+				width: 100%;
+				height: auto;
+
+				view:nth-child(1),
+					{
+					width: 50rpx;
+					height: 50rpx;
+					background-color: #F4F4F4;
+					border-radius: 100%;
+					float: left;
+					margin-left: -30rpx;
+				}
+
+				view:nth-child(2) {
+					width: 50rpx;
+					height: 50rpx;
+					background-color: #F4F4F4;
+					border-radius: 100%;
+					float: right;
+					margin-right: -30rpx;
+				}
+			}
+		}
+
+		.tips {
+			text-align: center;
+
+			image {
+				margin-top: 60rpx;
+				width: 106rpx;
+				height: 112rpx;
+			}
+
+			view {
+				margin-top: 50rpx;
+				color: #FFFFFF;
+				font-size: 32rpx;
+				font-weight: bold;
+			}
+		}
+	}
+
+	.Exhibition {
+		width: 94%;
+		margin: 0 auto;
+		margin-top: 25rpx;
+	}
+	.Exhibition>view{
+		margin-bottom: 10rpx;
+	}
+	.Exhibition>view>text:nth-child(2) {
+		float: right;
+	}
+</style>

pages/me/suppliers.vue

@@ -0,0 +1,107 @@
+<template>
+	<view class="whole">
+		<view class="head">
+			<view class="behind">
+				<view class="content">
+					<view class="content_s">
+						<view class="title">
+							<view></view>
+							<h3>经销商基本信息</h3>
+						</view>
+						<view class="information">
+							<u-field style="margin-top: 5rpx;" v-model="mobile" label-width="10" icon="chat-fill" placeholder="暂无数据" disabled="disabled"></u-field>
+							<u-field style="margin-top: 5rpx;" v-model="code" label-width="10" icon="chat-fill" placeholder="暂无数据" disabled="disabled"></u-field>
+							<u-field style="margin-top: 5rpx;" v-model="code_s" label-width="10" icon="chat-fill" placeholder="暂无数据" disabled="disabled"></u-field>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="below">
+			<view class="content">
+				<view class="content_s">
+					<view class="title">
+						<view></view>
+						<h3>经销商基本信息</h3>
+					</view>
+					<view class="information_E">
+						<image src="../../static/sailun/anyu.png" mode=""></image>
+						<image src="../../static/sailun/heiqishi.png" mode=""></image>
+						<image src="../../static/sailun/anyu.png" mode=""></image>
+						<image src="../../static/sailun/heiqishi.png" mode=""></image>
+						<image src="../../static/sailun/anyu.png" mode=""></image>
+						<image src="../../static/sailun/heiqishi.png" mode=""></image>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+			data() {
+				return {
+					mobile: '经销商名称',
+					code: '张三',
+					code_s: '13412336446'
+				}
+			}
+		}
+</script>
+
+<style lang="scss" scoped>
+	.behind {
+		width: 750rpx;
+		// height: 462rpx;
+		height: auto;
+		background: url(../../static/sailun/behind.png) no-repeat;
+		background-size: 100% 100%;
+		background-repeat: no-repeat;
+		margin-top:-150rpx;
+		padding-top: 100px;
+	}
+	.below{
+		margin-top: 30rpx;
+	}
+	.content {
+		width: 667rpx;
+		height: auto;
+		background: #FFFFFF;
+		box-shadow: 0px 10px 40px 0px rgba(223, 223, 223, 0.51);
+		border-radius: 18px;
+		margin: 0 auto;
+		padding-top: 30rpx;
+		margin-top: -10rpx;
+		padding-bottom: 40rpx;
+
+		.content_s {
+			width: 92%;
+			// height: 330rpx;
+			height: auto;
+			margin: 0 auto;
+			margin-top: 10rpx;
+			.information{
+				margin-top: 10rpx;
+			}
+			.information_E{
+				image{
+					width: 48%;
+					height: 100rpx;
+				}
+			}
+			.title {
+				border-bottom: 1rpx solid #EBEBEB;
+				padding-bottom: 15rpx;
+				view {
+					width: 6px;
+					height: 20px;
+					background: #0292FD;
+					float: left;
+					margin-right: 10rpx;
+					margin-top: 5rpx;
+				}
+			}
+		}
+	}
+</style>