Merge branch 'master' of http://git.cc-lotus.info/pointToNetwork/point-app

pagesMy/order/service.vue

@@ -1,28 +1,296 @@
 <template>
 	<mobile-frame>
-		选择售后
+		<view class="main">
+			<view class="one">
+				<view class="list">
+					<view class="list_1">
+						<text>退款商品</text>
+					</view>
+					<view class="list_2">
+						<view class="l">
+							<image class="image" :src="form.url&&form.url.length>0?form.url[0].url:''" mode=""></image>
+						</view>
+						<view class="c">
+							<view class="name">
+								{{form.name}}
+							</view>
+						</view>
+						<view class="r">
+							<view class="price">
+								¥{{form.price}}
+							</view>
+							<view class="num">
+								×{{form.buy_num}}
+							</view>
+						</view>
+					</view>
+				</view>
+			</view>
+			<view class="two">
+				<uni-forms ref="form" :modelValue="form" :rules="rules" label-width="auto">
+					<uni-forms-item label="售后类型" name="type">
+						<picker class="picker" mode="selector" :range="typeList" @change="typeChange" range-key="label">
+							<view>{{form.type_name||'请选择'}}</view>
+						</picker>
+					</uni-forms-item>
+					<uni-forms-item label="申请理由" name="reason">
+						<picker class="picker" mode="selector" :range="reasonList" @change="reasonChange"
+							range-key="label">
+							<view>{{form.reason_name||'请选择'}}</view>
+						</picker>
+					</uni-forms-item>
+					<uni-forms-item v-if="form.type=='1'" label="维护快递单号" name="phone">
+						<uni-easyinput type="text" v-model="form.phone" placeholder="请输入维护快递单号" />
+					</uni-forms-item>
+					<uni-forms-item label="附件" name="icon">
+						<upload :list="icon" name="icon" :count="1" @uplSuc="uplSuc" @uplDel="uplDel"></upload>
+					</uni-forms-item>
+				</uni-forms>
+				<view class="btn">
+					<button type="primary" size="mini" @click="onSubmit('form')">提交保存</button>
+				</view>
+			</view>
+		</view>
 	</mobile-frame>
 </template>
 
 <script>
+	import upload from '@/components/upload/index.vue';
 	export default {
+		components: {
+			upload
+		},
 		data() {
 			return {
-
+				id: '',
+				user: {},
+				form: {
+					shop: '官方自营店',
+					status: '3',
+					url: [{
+						name: "20220928155634.jpg",
+						uri: "/files/point/20220928155634.jpg",
+						url: "https://broadcast.waityou24.cn/files/point/20220928155634.jpg"
+					}],
+					name: '饮用水',
+					price: 58,
+					buy_num: 1,
+					market_num: 1,
+					money: 58
+				},
+				icon: [],
+				rules: {
+					type: {
+						rules: [{
+							required: true,
+							errorMessage: '请选择售后类型',
+						}]
+					},
+					reason: {
+						rules: [{
+							required: true,
+							errorMessage: '请选择申请理由',
+						}]
+					},
+				},
+				typeList: [],
+				reasonList: [],
 			};
 		},
-		onShow: function() {},
 		onLoad: async function(e) {
 			const that = this;
-			that.$set(that, `id`, e.id || '');
-			that.search();
+			that.$set(that, `id`, e && e.id || '');
+			// 查询其他信息
+			await that.searchOther();
+			// 监听用户登录
+			await that.watchLogin();
 		},
 		methods: {
-			search() {},
+			// 选择售后类型
+			typeChange(e) {
+				const that = this;
+				let data = that.typeList[e.detail.value];
+				if (data) {
+					that.$set(that.form, `type`, data.value);
+					that.$set(that.form, `type_name`, data.label);
+				}
+			},
+			// 选择申请理由
+			reasonChange(e) {
+				const that = this;
+				let data = that.reasonList[e.detail.value];
+				if (data) {
+					that.$set(that.form, `reason`, data.value);
+					that.$set(that.form, `reason_name`, data.label);
+				}
+			},
+			// 图片上传
+			uplSuc(e) {
+				const that = this;
+				that.$set(that, `${e.name}`, [...that[e.name], e.data]);
+			},
+			// 图片删除
+			uplDel(e) {
+				const that = this;
+				let data = that[e.name];
+				let arr = data.filter((i, index) => index != e.data.index);
+				that.$set(that, `${e.name}`, arr)
+			},
+			// 提交保存
+			onSubmit(ref) {
+				const that = this;
+				that.$refs[ref].validate().then(async params => {
+					params.icon = that.icon
+					// const arr = await that.$api(`/user/${that.form.id}`, 'POST', params);
+					// if (arr.errcode == '0') {
+					// 	uni.showToast({
+					// 		title: `维护信息成功`,
+					// 		icon: 'success',
+					// 	});
+					// 	that.back();
+					// } else {
+					// 	uni.showToast({
+					// 		title: arr.errmsg,
+					// 	})
+					// }
+				})
+			},
+			// 查询其他信息
+			async searchOther() {
+				const that = this;
+				let res;
+				res = await that.$api(`/dictData`, 'GET', {
+					code: "afterSale_type"
+				});
+				if (res.errcode == '0') {
+					that.$set(that, `typeList`, res.data)
+				}
+				res = await that.$api(`/dictData`, 'GET', {
+					code: "afterSale_reason"
+				});
+				if (res.errcode == '0') {
+					that.$set(that, `reasonList`, res.data)
+				}
+			},
+			// 监听用户是否登录
+			watchLogin() {
+				const that = this;
+				uni.getStorage({
+					key: 'token',
+					success: async function(res) {
+						let user = that.$jwt(res.data);
+						if (user) {
+							that.$set(that, `user`, user);
+							if (that.id) {
+								let arr = await that.$api(`/orderDetail/${that.id}`, 'GET')
+								if (arr.errcode == '0') {
+									that.$set(that, `form`, arr.data)
+								}
+							}
+						}
+					},
+					fail: function(err) {
+						uni.reLaunch({
+							url: '/pages/login/index'
+						})
+					}
+				})
+			},
 		}
 	}
 </script>
 
 <style lang="scss">
+	.main {
+		.one {
+			.list {
+				margin: 2vw;
+				padding: 2vw;
+				border-radius: 2vw;
+				border: 1px solid #3333;
+
+				.list_1 {
+					margin: 0 0 1vw 0;
+					display: flex;
+					flex-direction: row;
+					justify-content: space-between;
+					font-size: var(--font14Size);
+					font-weight: bold;
+				}
+
+				.list_2 {
+					margin: 0 0 1vw 0;
+					display: flex;
+
+					.l {
+						width: 20vw;
+
+						.image {
+							width: 100%;
+							height: 20vw;
+							border-radius: 5px;
+
+						}
+					}
+
+					.c {
+						width: 60vw;
+						padding: 0 2vw;
+					}
+
+					.r {
+						width: 15vw;
+						text-align: right;
+					}
+				}
+
+				.other {
+					margin: 0 0 2vw 0;
+					text-align: right;
+
+					text {
+						font-size: 14px;
 
+						padding: 0 0 0 2vw;
+					}
+				}
+
+				.btn {
+					text-align: right;
+					margin: 2vw 0 0 0;
+					border-top: 1px solid #f1fff1;
+
+					button {
+						margin: 2vw 0 0 2vw;
+					}
+				}
+			}
+		}
+
+		.two {
+			padding: 2vw;
+
+			.picker {
+				border: 1px solid #3333;
+				border-radius: 5px;
+				padding: 2vw;
+			}
+
+			.btn {
+				text-align: center;
+
+				button {
+					width: 30%;
+					font-size: 14px;
+					background-color: var(--f35BColor);
+				}
+			}
+		}
+	}
+
+	.uni-forms-item {
+		margin-bottom: 6vw !important;
+		display: flex;
+		flex-direction: row;
+	}
 </style>