2023-4-22

pages.json

@@ -32,7 +32,30 @@
 			}
 		}
 	],
-	"subPackages": [{
+	"subPackages": [
+		{
+			"root": "pages/shop",
+			"name": "shop",
+			"pages": [{
+					"path": "accessory",
+					"style": {
+						"navigationBarTitleText": "配件"
+					}
+				},
+				{
+					"path": "rent",
+					"style": {
+						"navigationBarTitleText": "租电"
+					}
+				},
+				{
+					"path": "attestation",
+					"style": {
+						"navigationBarTitleText": "身份认证"
+					}
+				}
+			]
+		},{
 		"root": "pages/user_home",
 		"name": "user",
 		"pages": [

pages/index/index.vue

@@ -14,7 +14,7 @@
 			<view class="rztit">
 				您尚未完成身份认证，前往认证>>
 			</view>
-			<view class="rzbtn">
+			<view class="rzbtn" @click="navTo('/pages/shop/attestation')">
 				立即认证
 			</view>
 		</view>
@@ -32,7 +32,7 @@
 					以租代购 方便省钱
 				</view>
 			</view>
-			<view class="gn-btn">
+			<view class="gn-btn" @click="navTo('/pages/shop/rent')">
 				立即租电
 			</view>
 		</view>
@@ -48,7 +48,7 @@
 					扫码租电
 				</view>
 			</view>
-			<view class="gn-btn">
+			<view class="gn-btn" @click="navTo('/pages/shop/accessory')">
 				立即购买
 			</view>
 		</view>
@@ -175,12 +175,23 @@
 			return shareObj;
 		},
 		// #endif
-		methods: {}
-			
-		
-			
-			
-
+		methods: {
+			navTo(url) {
+				if(url.indexOf('http') != -1 ) {
+					window.location.href = url
+				}else {
+					uni.navigateTo({
+						url,
+						fail() {
+							uni.switchTab({
+								url
+							})
+						}
+					})
+				}
+			},
+			
+		}
 	};
 </script>
 
@@ -353,7 +364,7 @@
 	}
 	.fjmd {
 		width: 708rpx;
-		height: 288rpx;
+		height: 233rpx;
 		margin: 20rpx auto;
 		image {
 			width: 100%;

pages/shop/accessory.vue

@@ -0,0 +1,183 @@
+<template>
+	<view class="content">
+		<empty v-if="loaded && goodList.length == 0"></empty>
+		<view class="good flex" v-for="item in goodList" @click="navTo('/pages/product/product?id=' + item.id)">
+			<view class="good-img">
+				<image :src="item.image" mode=""></image>
+			</view>
+			<view class="good-info flex">
+				<view class="good-name clamp2">
+					{{item.store_name}}
+				</view>
+				<view class="good-price">
+					<view class="old-price" v-if="item.ot_price*1 > item.price*1">
+						<text class="old-left">¥{{item.ot_price}}</text>
+						<image src="../../static/icon/down.png" mode="widthFix"></image>
+						<text class="old-right">直降{{item.ot_price*1 - item.price*1}}元</text>
+					</view>
+					<view class="new-price flex">
+						<view class="">
+							¥{{item.price}}
+						</view>
+						<view class="good-tip">
+							立即购买
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<uni-load-more :status="loadingType" v-if="!(loaded && goodList.length == 0)"></uni-load-more>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				goodList: [],
+				page: 1,
+				limit: 10,
+				loadingType: 'more',
+				loaded:false
+			}
+		},
+		onLoad() {
+
+		},
+		onShow() {
+
+		},
+		onReachBottom() {
+			this.getGoodList()
+		},
+		onReady() {
+
+		},
+		methods: {
+			navTo(url) {
+				if (url.indexOf('http') != -1) {
+					window.location.href = url
+				} else {
+					uni.navigateTo({
+						url,
+						fail() {
+							uni.switchTab({
+								url
+							})
+						}
+					})
+				}
+			},
+			getGoodList() {
+				let obj = this
+				if (obj.loadingType == 'loading' || obj.loadingType == 'noMore') {
+					return
+				}
+				obj.loadingType = 'loading'
+				getProducts({
+					page: obj.page,
+					limit: obj.limit
+				}).then(res => {
+					obj.goodList = obj.goodList.concat(res.data)
+					obj.page++
+					if (obj.limit == res.data.length) {
+						obj.loadingType = 'more'
+					} else {
+						obj.loadingType = 'noMore'
+					}
+					obj.loaded = true
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	.good {
+		width: 690rpx;
+		height: 276rpx;
+		background: #FFFFFF;
+		box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
+		border-radius: 10rpx;
+		margin: auto;
+		padding: 20rpx 15rpx;
+		margin-bottom: 20rpx;
+		&:last-of-type {
+			margin-bottom: 0rpx;
+		}
+		
+		.good-img {
+			flex-shrink: 0;
+			width: 236rpx;
+			height: 236rpx;
+			border-radius: 10rpx;
+			margin-right: 22rpx;
+		
+			image {
+				width: 236rpx;
+				height: 236rpx;
+				border-radius: 10rpx;
+			}
+		}
+		
+		.good-info {
+			flex-grow: 1;
+			height: 100%;
+			flex-direction: column;
+			justify-content: space-between;
+			align-items: flex-start;
+		
+			.good-name {
+				font-size: 32rpx;
+				font-weight: bold;
+				padding-top: 10rpx;
+				color: #333333;
+			}
+		
+			.good-price {
+				width: 100%;
+		
+				image {
+					width: 14rpx;
+					margin: 0 6rpx 0 10rpx;
+				}
+		
+				.old-price {
+					.old-left {
+						font-size: 26rpx;
+						font-weight: 500;
+						text-decoration: line-through;
+						color: #999999;
+					}
+		
+					.old-right {
+						font-size: 24rpx;
+						font-weight: bold;
+						color: #B59467;
+					}
+				}
+		
+				.new-price {
+					width: 100%;
+					font-size: 36rpx;
+					font-weight: bold;
+					color: #FF4C4C;
+					justify-content: space-between;
+		
+					.good-tip {
+						width: 137rpx;
+						height: 52rpx;
+						background: $base-color;
+						border-radius: 26rpx;
+						position: relative;
+						font-size: 26rpx;
+						font-weight: 500;
+						color: #FFFFFF;
+						line-height: 52rpx;
+						text-align: center;
+					}
+				}
+			}
+		}
+	}
+</style>

pages/shop/attestation.vue

@@ -0,0 +1,320 @@
+<template>
+	<view class="content">
+		<view class="yz-wrap">
+			<view class="top-wrap flex">
+				<view class="top-left">
+					选择套餐<text>*</text>
+				</view>
+			</view>
+			<view class="sr-wrap flex">
+				<view class="sr-tit">
+					姓名
+				</view>
+				<input type="text" class="sr-inp" placeholder="请输入姓名">
+			</view>
+			<view class="sr-wrap flex">
+				<view class="sr-tit">
+					手机号
+				</view>
+				<input type="text" class="sr-inp" placeholder="请输入手机号">
+			</view>
+			<view class="sr-wrap flex">
+				<view class="sr-tit">
+					验证码
+				</view>
+				<input type="text" class="sr-inp" placeholder="请输入验证码">
+				<view class="sr-btn">
+					点击获取
+				</view>
+			</view>
+		</view>
+		<view class="yz-wrap">
+			<view class="top-wrap flex">
+				<view class="top-left">
+					上传身份证照片<text>*</text>
+				</view>
+			</view>
+			<view class="sfz flex">
+				<!-- #ifdef H5 -->
+				<image class="" :src="sfzz||this.urlFile + '/static/img/sfzz.png'" mode="widthFix" @click="navCroper(664,414,'sfzz')"></image>
+				<!-- #endif -->
+				<!-- #ifndef H5 -->
+				<image class="" :src="sfzz||'/static/img/sfzz.png'" mode="widthFix" @click="navCroper(664,414,'sfzz')"></image>
+				<!-- #endif -->
+				<!-- #ifdef H5 -->
+				<image class="" :src="sfzf||this.urlFile + '/static/img/sfzf.png'" mode="widthFix" @click="navCroper(664,414,'sfzf')"></image>
+				<!-- #endif -->
+				<!-- #ifndef H5 -->
+				<image class="" :src="sfzf||'/static/img/sfzf.png'" mode="widthFix" @click="navCroper(664,414,'sfzf')"></image>
+				<!-- #endif -->
+				<view class="">
+					个人信息面
+				</view>
+				<view class="">
+					国徽面
+				</view>
+			</view>
+
+		</view>
+		<view class="yz-wrap">
+			<view class="sr-wrap flex">
+				<view class="sr-tit">
+					绑定邀请码
+				</view>
+				<input type="text" class="sr-inp" placeholder="请输入绑定邀请码(非必填)">
+			</view>
+		</view>
+		<view class="btm-btn">
+			提交认证
+		</view>
+	</view>
+</template>
+
+<script>
+	import {
+		mapState
+	} from "vuex"
+	export default {
+		data() {
+			return {
+				sfzz: '',
+				sfzf: ''
+			}
+		},
+		onLoad() {
+
+		},
+		onShow() {
+
+		},
+		computed: {
+			// #ifdef H5
+			...mapState(['urlFile']),
+			// #endif
+		},
+		onReachBottom() {
+
+		},
+		onReady() {
+
+		},
+		methods: {
+			upLoad(path) {
+				// #ifdef H5
+				console.log(path,'h5');
+				// #endif
+				uni.showLoading({
+					title: '图片上传中',
+					mask: true
+				});
+				return new Promise((resolve, error) => {
+					uni.uploadFile({
+						url: this.baseURL + '/api/upload/image', //仅为示例，非真实的接口地址
+						filePath: path,
+						name: 'file',
+						header: {
+							"Authori-zation": 'Bearer ' + uni.getStorageSync('token')
+						},
+						success: (uploadFileRes) => {
+							if ("string" === typeof uploadFileRes.data) {
+								resolve(JSON.parse(uploadFileRes.data).data)
+							} else {
+								resolve(uploadFileRes.data.data)
+							}
+						},
+						complete() {
+							uni.hideLoading()
+						}
+					});
+				})
+			},
+			chooseImage: function(index) {
+				const _this = this
+				return new Promise((ok, error) => {
+					// 从相册/相机选择
+					// 如需直接开相机或直接选相册，请只使用一个选项
+					const sourceType = index === 0 ? ['camera'] : ['album']
+					uni.chooseImage({
+						count: 1, //默认9
+						sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
+						sourceType: sourceType,
+						success: function(res) {
+							ok(res.tempFilePaths[0])
+						},
+						fail(e) {
+							uni.showModal({
+								title: '文件打开错误',
+								content: '请设置授权文件存储权限',
+								showCancel: false,
+							});
+							error(e)
+						}
+					});
+				})
+			
+			},
+			onImg(type) {
+				const _this = this
+				return new Promise((ok, erro) => {
+					// 判断是否需要选择
+					if(type==1){
+						uni.showActionSheet({
+							itemList: ['拍照', '选择一张照片'],
+							success: function(res) {
+								_this.chooseImage(res.tapIndex).then((url) => {
+									ok(url)
+								}).catch((res) => {
+									erro(res)
+								})
+							},
+							fail: function(res) {
+								erro(res)
+								console.log(res.errMsg);
+							}
+						});
+					}
+					// 判断是否只需要拍照
+					if(type==2){
+						_this.chooseImage(0).then((url) => {
+							ok(url)
+						}).catch((res) => {
+							erro(res)
+						})
+					}
+					
+					
+			
+				})
+			
+			},
+			// 图片裁切
+			/**
+			 * @param {Number} w 裁切宽度比例
+			 * @param {Number} h 裁切高度比例
+			 * @param {Number} mw 图片最小宽度
+			 * @param {Number} mh 图片最小高度
+			 * @param {String} url url修改
+			 */
+			navCroper(w, h, type) {
+				let that = this;
+				let tt = (type == 'upimg' ? 2 : 1)
+				this.onImg(tt).then((url) => {
+					uni.navigateTo({
+						url: `/pages/user_home/realName/cropper?width=${w}&height=${h}`,
+						events: {
+							uploadSuccess(res) {
+								that.upLoad(res).then((urldata) => {
+									that[type] = urldata.url;
+								})
+								// console.log(e, '接受数据');
+							}
+						},
+						success: function(res) {
+							console.log(res,'success');
+							// 通过eventChannel向被打开页面传送数据
+							res.eventChannel.emit('urlNext', {
+								url
+							})
+						}
+					})
+				})
+			},
+		}
+	}
+</script>
+
+<style lang="scss">
+	page {
+		padding-top: 1rpx;
+	}
+
+	.yz-wrap {
+		background-color: #fff;
+		margin: 20rpx 0;
+	}
+
+	.top-wrap {
+		justify-content: space-between;
+		padding: 0 25rpx;
+		font-size: 32rpx;
+		font-weight: bold;
+		color: #00001A;
+		height: 85rpx;
+
+		.top-left {
+			text {
+				color: #FF6B2E;
+				margin-left: 10rpx;
+			}
+		}
+
+		.top-right {
+			text {
+				font-size: 25rpx;
+				font-weight: 500;
+				color: #999999;
+			}
+
+			image {
+				height: 22rpx;
+				margin-left: 10rpx;
+			}
+		}
+	}
+
+	.sr-wrap {
+		border-top: #fafafa 1rpx solid;
+		font-size: 32rpx;
+		font-weight: 500;
+		width: 690rpx;
+		height: 114rpx;
+		line-height: 114rpx;
+		margin: auto;
+
+		.sr-tit {
+			width: 170rpx;
+			flex-shrink: 0;
+			color: #00001A;
+		}
+
+		.sr-inp {
+			flex-grow: 1;
+
+		}
+
+		.sr-btn {
+			color: #52C696;
+		}
+	}
+
+	.sfz {
+		padding: 30rpx;
+		justify-content: space-between;
+		flex-wrap: wrap;
+
+		image {
+			width: 332rpx;
+			height: 207rpx;
+		}
+
+		view {
+			width: 332rpx;
+			text-align: center;
+			font-size: 32rpx;
+			color: #5C5C5C;
+		}
+	}
+
+	.btm-btn {
+		width: 686rpx;
+		height: 86rpx;
+		background: linear-gradient(-38deg, #6CDBC3, #6DD6B8);
+		border-radius: 15rpx;
+		margin: 113rpx auto 0;
+		font-size: 36rpx;
+		font-weight: 500;
+		color: #FFFFFF;
+		text-align: center;
+		line-height: 86rpx;
+	}
+</style>

pages/shop/rent.vue

@@ -0,0 +1,253 @@
+<template>
+	<view class="content">
+		<!-- 套餐 -->
+		<view class="tc-wrap">
+			<view class="top-wrap flex">
+				<view class="top-left">
+					选择套餐
+				</view>
+			</view>
+			<view class="contet-list flex">
+				<view class="tc flex" v-for="(item,index) in 5" :class="{'action': selectTcIndex == index}" @click="choosTc(index,item)">
+					<view class="tc-time">
+						7天
+					</view>
+					<view class="tc-price">
+						79
+					</view>
+					<view class="tc-time-price">
+					<text>11</text>元/天
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="dy-wrap">
+			<view class="top-wrap flex">
+				<view class="top-left">
+					押金服务
+				</view>
+				<view class="top-right">
+					<text>押金规则</text>
+					<image src="../../static/icon/next1.png" mode="heightFix"></image>
+				</view>
+			</view>
+			<view class="contet-list flex">
+				<view class="tc flex dy">
+					<view class="tc-time">
+						<image src="../../static/icon/orderWx.png" mode="heightFix"></image>微信信用免押金
+					</view>
+					<view class="tc-time-price">
+					微信信用≥550分
+					</view>
+					<view class="tc-price">
+						77<text>￥88</text>
+					</view>
+				</view>
+				<view class="tc flex dy">
+					<view class="tc-time">
+						支付押金
+					</view>
+					<view class="tc-time-price">
+					元/天
+					</view>
+					<view class="tc-price">
+						77
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="dy-wrap">
+			<view class="top-wrap flex">
+				<view class="top-left">
+					使用说明
+				</view>
+			</view>
+			<view class="sysm">
+				1、套餐购买需在15分钟之内完成付款，超过15分系统自动取消订单
+				2、购买成功后，可至门店取货
+				3、商家超过30分钟未接单，自动退款
+				4、若未取车，可申请退款，套餐金额将全款退还至原支付账户，若已取车，暂不支持退款
+			</view>
+		</view>
+		<view class="ts">
+			
+		</view>
+		<view class="btm-btn flex">
+			<view class="pay-price">
+				总计费用：<text>548</text>
+			</view>
+			<view class="pay-btn">
+				立即支付
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				tcList: [],
+				selectTc: {},
+				selectTcIndex: 0,
+				
+			}
+		},
+		onLoad() {
+
+		},
+		onShow() {
+
+		},
+		onReachBottom() {
+
+		},
+		onReady() {
+
+		},
+		methods: {
+			choosTc(index,item) {
+				this.selectTcIndex = index
+				this.selectTc = item
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.content {
+		padding-top: 1rpx;
+	}
+	.dy-wrap, .tc-wrap {
+		width: 702rpx;
+		background: #FFFFFF;
+		border-radius: 15rpx;
+		// padding: 25rpx 25rpx 45rpx;
+		margin: 20rpx auto;
+		
+	}
+	.contet-list {
+		flex-wrap: wrap;
+		justify-content: space-between;
+		padding: 0 25rpx 45rpx;
+		.tc {
+			width: 315rpx;
+			height: 212rpx;
+			background: #FFFFFF;
+			border: 2px solid #E9E9E9;
+			border-radius: 10rpx;
+			margin-bottom: 20rpx;
+			flex-direction: column;
+			justify-content: center;
+			// align-items: center;
+			.tc-time {
+				font-size: 28rpx;
+				font-weight: bold;
+				color: #00001A;
+				display: flex;
+				align-items: center;
+				image {
+					height: 34rpx;
+					margin-right: 10rpx;
+				}
+			}
+			.tc-price {
+				font-size: 55rpx;
+				font-weight: bold;
+				color: #52C696;
+				padding: 4rpx 0;
+				&::before {
+					content: '￥';
+					font-size: 20rpx;
+					
+				}
+				text {
+					font-size: 22rpx;
+					font-weight: 500;
+					text-decoration: line-through;
+					color: #999999;
+				}
+			}
+			.tc-time-price {
+				font-size: 22rpx;
+				font-weight: 500;
+				color: #999999;
+				text {
+					font-weight: bold;
+				}
+			}
+		}
+		.dy {
+			height: 187rpx;
+		}
+		.action {
+			background: #F3FFFB;
+			border: 2px solid #5FCCA7;
+		}
+	}
+	.top-wrap {
+		justify-content: space-between;
+		padding: 0 25rpx;
+		font-size: 32rpx;
+		font-weight: bold;
+		color: #00001A;
+		height: 85rpx;
+		.top-left {
+			
+		}
+		.top-right {
+			text {
+				font-size: 25rpx;
+				font-weight: 500;
+				color: #999999;
+			}
+			image {
+				height: 22rpx;
+				margin-left: 10rpx;
+			}
+		}
+	}
+	.sysm {
+		padding: 34rpx;
+		font-size: 22rpx;
+		font-weight: 500;
+		color: #666666;
+	}
+	.ts {
+		height: 130rpx;
+	}
+	.btm-btn {
+		width: 750rpx;
+		height: 100rpx;
+		position: fixed;
+		bottom: 0;
+		background-color: #fff;
+		.pay-price {
+			padding-left: 33rpx;
+			flex-grow: 1;
+			font-size: 32rpx;
+			font-weight: 500;
+			color: #333333;
+			text {
+				font-size:48rpx;
+				font-weight: 500;
+				color: #FF6B2E;
+				&::before {
+					content: '￥';
+					font-size: 28rpx;
+				}
+			}
+		}
+		.pay-btn {
+			flex-shrink: 0;
+			width: 287rpx;
+			height: 98rpx;
+			background: linear-gradient(-38deg, #6CDBC3, #6DD6B8);
+			line-height: 100rpx;
+			text-align: center;
+			font-size: 34rpx;
+			font-weight: 500;
+			color: #FFFFFF;
+		}
+	}
+</style>