申请退款页面

App.vue

@@ -120,6 +120,7 @@
 	@import '@/common/styles/theme.css';
 	@import '@/common/styles/common.css';
 	@import '@/common/styles/main.css';
+	@import "@/common/styles/icon.css";
 	
 	//底部按钮
 	.btn-bottom {

pages.json

@@ -47,6 +47,12 @@
 				"navigationBarTitleText": "订单详情"
 			}
 		},
+		{
+			"path": "pages/order/apply_refund",
+			"style": {
+				"navigationBarTitleText": "申请退款"
+			}
+		},
 		{
 			"path": "pages/order/unpay_details",
 			"style": {

pages/order/apply_refund.vue

@@ -0,0 +1,244 @@
+<template>
+	<view>
+		<view class="lf-bg-white lf-p-t-30 lf-p-b-30 lf-p-l-32 lf-p-r-32">
+			<view class="lf-row-between">
+				<image src="../../static/logo.png" mode="aspectFill" style="width: 240rpx; height: 240rpx;border-radius: 20rpx;"></image>
+				<view class="flex-sub padding-left-sm">
+					<view class="bref-box lf-font-32 lf-color-333 lf-line-2" style="height: 88rpx;line-height: 44rpx;">
+						南澳站·潮玩旅游胜地 身处亚热带风情/玩转南澳
+					</view>
+					<view class="flex lf-m-t-25 align-center text-center">
+						<text class="block lf-color-gray lf-font-24" style="line-height: 40rpx;">数量</text>
+						<text class="lf-m-l-10 lf-color-gray lf-font-24">x 1</text>
+					</view>
+					
+					<view class="flex align-center text-center lf-m-t-25">
+						<lf-price :price="599.00" /> 
+						<view class="lf-m-l-20 lf-line-through lf-color-gray">
+							599.00
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<self-line/>
+		<view class="bg-white">
+			<view class="cu-bar padding-lr">
+				<text class="lf-color-555 lf-font-28">可退金额</text>
+				<text class="text-price lf-font-36 lf-color-price">549.00</text>
+			</view>
+			
+			<view class="cu-bar padding-lr solid-bottom flex justify-between align-center text-center">
+				<text class="lf-color-555 lf-font-28">订单编号</text>
+				<view>
+					<text class="margin-right lf-font-28 text-black1">2368492461046128742764</text>
+					<!-- <text class="text-orange lf-font-28" @click="copy(2368492461046128742764)">复制</text> -->
+				</view>
+			</view>
+		</view>
+		
+		<self-line/>
+		<view class="bg-white lf-m-b-6">
+			<view class="lf-p-t-30 lf-p-l-32 lf-p-b-36">
+				<view class="lf-font-28 lf-color-black">退款说明</view>
+				<input type="text" value="" placeholder="请输入退款说明" class="solid-bottom lf-m-t-30" />
+			</view>
+		</view>
+		
+		<view class="cu-form-group">
+			<view class="grid col-4 grid-square flex-sub">
+				<view style="width: 212rpx;height: 212rpx;border-radius: 10rpx;" class="bg-img" v-for="(item,index) in img_list" :key="index" @tap="showImg(index)" :data-url="img_list[index]">
+				 <image :src="img_list[index]" mode="aspectFill"></image>
+					<view class="cu-tag bg-red" @tap.stop="DelImg(index)" :data-index="index">
+						<text class='cuIcon-close'></text>
+					</view>
+				</view>
+				<view style="width: 212rpx;height: 212rpx;border-radius: 10rpx;" class="solids" @tap="ChooseImage" v-if="img_list.length<3">
+					<text class='cuIcon-cameraadd'></text>
+				</view>
+			</view>
+		</view>
+		
+		
+		
+		<view class="btn-bottom solid-top1" style="bottom: 60rpx;">
+			<view class="padding-lr-lg">
+				<button class="cu-btn block lf-bg-blue lg round" @tap="subimitApply()">
+					<text class="text-df text-white">确认申请</text>
+				</button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				hostImg: '',
+				img_list: [], // 反馈问题图片
+			}
+		},
+		methods: {
+			checkImgInfo(tempFilePath, suc){
+				uni.getImageInfo({
+					src: tempFilePath,
+					success (res) {
+						let type = res.type;
+						console.log('checkImgInfo...', type);
+						if(type == 'png' || type == 'jpeg' || type == 'jpg'){
+							suc && suc(true);
+						} else {
+							suc && suc(false);
+						}
+					},
+					fail(err) {
+						suc && suc(false);
+					}
+				})
+			},
+			// 选择图片
+			ChooseImage(e) {
+				let that = this;
+				uni.chooseImage({
+					count: 1,
+					sizeType: ['original'], // 可以指定是原图original还是压缩图compressed ，默认二者都有
+					sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
+					success: res => {
+						that.hostImg = res.tempFilePaths[0];
+						let tempFile = res.tempFiles.shift();
+						let tempFilePath = res.tempFilePaths.shift();
+						that.checkImgInfo(tempFilePath, (res) => {
+							// 过滤不是图片不是png、jpeg 格式
+							if(res){
+								if(tempFile.size > 10000000){
+									uni.showModal({
+										title: '',
+										content: '您选择的图片过大：'+ (tempFile.size / 1024000).toFixed(2) +"M，请点击确定重新上传",
+										success: res2 => {
+											if(res2.confirm){
+												uni.chooseImage({
+													count: 1,
+													sizeType: ['compressed'],
+													sourceType: ['album', 'camera'],
+													success: (res3) => {
+														let tempFilePath = res3.tempFilePaths.shift();
+														that.is_wx_reduce = true;
+														that.img_list.push(tempFilePath);
+													}
+												})
+											}
+										}
+									})
+								} else{
+									that.img_list.push(tempFilePath);
+								}
+							} else {
+								uni.showModal({
+									title: '',
+									content: '选择的图片须为jpg、jpeg或png格式',
+									showCancel: false,
+									confirmColor: '#1697EE'
+								})
+							}
+						});
+					}
+				});
+			},
+			
+			// 上传图片到服务器
+			upload(url){
+				let that = this;
+				let uploads = [];
+				// 商品banner图上传
+				if (that.img_list.length > 0) {
+					for (let i = 0; i < that.img_list.length; i++) {
+						let upload_img = new Promise((resolve, reject) => {
+							that.uploadFile(that.img_list[i], (res) => {
+								resolve(res);
+							}, (err) => {
+								reject(err);
+							});	
+						})
+						uploads.push(upload_img);
+					}
+				}
+				if(uploads.length == 0) {
+					that.realSubmitInfo([]);
+					return
+				}
+				Promise.all(uploads).then((result) => {
+					console.log('图片上传...', result)
+					let img_url_list = [];
+					if(result.length > 0){
+						img_url_list = JSON.stringify(result);
+					}
+					if(img_url_list) {
+						that.realSubmitInfo(img_url_list);
+					}
+					
+					
+				}).catch(err => {
+					console.log(err)
+					that.is_publish = false; // 恢复提交按钮
+					uni.showModal({
+						title: '',
+						content: '图片上传失败，请重新提交',
+						confirmColor: '#1697EE'
+					})
+				})
+			},
+			// 预览图片
+			showImg(index) {
+				this.$u.throttle(() => {
+					let goods_banner = this.img_list || [];
+					let banners = goods_banner.map(item => item);
+					uni.previewImage({
+						urls: banners,
+						current: index
+					})
+				}, 200);
+			},
+			
+			// 删除图片
+			DelImg(index) {
+				uni.showModal({
+					title: '提示',
+					content: '即将取消上传这张图片，请确认？',
+					success: e => {
+						if (!e.confirm) return;
+						this.img_list.splice(index, 1);
+					}
+				});
+			},
+			// 点击复制
+			copy(text) {
+				uni.setClipboardData({
+					data: text
+				});
+			},
+		}
+	}
+</script>
+
+<style>
+	.btn{
+		margin: 0;
+		padding: 0;
+		width: 212rpx;
+		height: 82rpx;
+		background-color: #1998FE;
+		color: #FFFFFF;
+		line-height: 80rpx;
+		font-size: 32rpx;
+		border-radius: 41rpx;
+	}
+	.bref-box {
+		text-overflow: -o-ellipsis-lastline;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+	}
+</style>

pages/user/user.vue

@@ -155,6 +155,20 @@
 				     },
 				    ]
 			}
+		},
+		methods: {
+			addRandomData() {
+				for(let i = 0; i < 10; i++) {
+					let index = this.$u.random(0, this.list.length - 1);
+					// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
+					let item = JSON.parse(JSON.stringify(this.list[index]))
+					item.id = this.$u.guid();
+					this.list.push(item);
+				}
+			},
+		},
+		onLoad() {
+			this.addRandomData()
 		}
 	}
 </script>