groupon-wx/pages/order/orderAfterSales/orderAfterSales.vue

<template>
	<view>
		<view class="flex-col">

			<view class="myclient_list flex-col">
				<view class="flex-row justify-between">
					<view class="nl ">
						{{form.mainTitle}}
					</view>
					<view class="success_status ">{{form.orderStateDesc}}</view>
				</view>
				<view class="flex-col">

					<view class="phone">
						<image referrerpolicy="no-referrer" src="http://www.gzzzyd.com/groupon/home_slices/日期@2x.png" />
						<text>
							团购日期: {{form.grouponStartTime}} 至 {{form.grouponEndTime}}
						</text>
					</view>
					<view class="time">
						<image referrerpolicy="no-referrer"
							src="http://www.gzzzyd.com/groupon/home_slices/出厂编号-线@2x.png" />
						<text>
							订单编号: {{form.orderNo}}
						</text>
					</view>
				</view>
				<view class=" vgoodsNumber flex-row justify-center">
					<text>请选择退货的商品和数量</text>
				</view>
			</view>



			<view class="conter " :style="{'height':height}">
				<scroll-view :scroll-top="scrollTop" scroll-y="true" :style="{'height':height}">
					<view>
						<view class="all-products-body flex-row" v-for="(item,i) in form.goodsList" :key="i">

							<view class="flex-col  justify-center">
								<view v-if="item.isVGoods" class="image-view" @click="vGoods(item)">
									<image class="image" src="/static/images/v.png"></image>
								</view>
								<view v-else class="image-view @click=" @click="vGoods(item)">
									<image class="image" src="/static/images/o.png"></image>
								</view>
							</view>

							<view class="all-products-item flex-row  ">
								<image class="goodsImage " :src="item.goodsImage" mode="scaleToFill" />

								<view class="all-products-item-content flex-col">
									<view class="all-products-item-content-t ">
										{{item.goodsName}}
									</view>
									<view class="all-products-item-content-b flex-row justify-between ">
										<view class="flex-row">
											<text class="red">{{item.goodsPrice}}</text>
											<!-- <text class="line-thr">{{item.goodsName}}</text> -->
										</view>
										<view class=" number-box">
											<u-number-box :min=0 :max="formCopy.goodsList[i].goodsNum"
												v-model="item.goodsNum"> </u-number-box>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>

			<view class="bottom">
				<view class=" button-view flex-row  ">
					<text class="reason">退货原因：</text>
					<view class="input-view flex-col justify-center" @click="openRefundShow">
						<view>
							<u-input disabled placeholder="请选择退货原因" v-model="reason"></u-input>
						</view>
					</view>
				</view>

				<view class="button-view flex-col justify-center ">
					<u-button color="#B42A3E " @click="afterSalesSubmit">提交</u-button>
				</view>
			</view>
		</view>


		<u-popup :show="RefundShow" @close="RefundShow = false" @open="	">
			<view class="Refund_view">
				<view class="Refund_view_title">请选择退货/退款原因</view>
				<view class="">
					<scroll-view :scroll-top="scrollTop" scroll-y="true" :style="{'height':'400rpx'}">
						<u-radio-group v-model="reason" placement="column">
							<u-radio :customStyle="{marginBottom: '8px'}" v-for="(item, index) in reasonList"
								:key="index" :label="item.reason" :name="item.reason">
							</u-radio>
						</u-radio-group>

					</scroll-view>
				</view>
				<button class="Refund_view_btn" @click="RefundShow = false">
					确定
				</button>
			</view>

		</u-popup>

	</view>
</template>

<script>
	import {
		reasonList,
		afterSalesSubmit
	} from '@/api/groupon.js';
	import UInput from "../../../uni_modules/uview-ui/components/u-input/u-input";
	export default {
		components: {
			UInput
		},

		data() {
			return {

				reason: '',
				goodsIds: [],
				reasonList: [],
				form: {},
				formCopy: {},
				RefundShow: false,
				height: '',
			}
		},

		onLoad(e) {
			this.form = JSON.parse(decodeURIComponent(e.item));
			this.formCopy = JSON.parse(decodeURIComponent(e.item));
			console.log(this.form)
		},
		onShow() {
			let sysInfo = uni.getSystemInfoSync();
			this.height = sysInfo.windowHeight - (sysInfo.screenWidth / 750) * (500) + 'px';
			console.log(this.height)
		},
		methods: {
			afterSalesSubmit() {

				if (this.goodsIds.length <= 0) {
					uni.$u.toast('请选择商品')
					return
				}

				if (!this.reason) {
					uni.$u.toast('请选择原因')
					return
				}
				let flag = false
				let afterSalesGoods = []
				this.form.goodsList.forEach(item => {
					if (this.goodsIds.indexOf(item.id) !== -1) {
						if (!item.goodsNum) {
							uni.$u.toast('请选择商品数量')
							flag = true
						}
						afterSalesGoods.push(item)
					}
				})

				if (flag) {
					return;
				}

				let params = {
					reason: this.reason,
					orderId: this.form.orderId,
					afterSalesGoodsList: afterSalesGoods
				};
				afterSalesSubmit(params).then(res => {
					// uni.$u.toast(res.msg)
          uni.navigateBack();
				}).catch(err => {
					uni.$u.toast(err.msg)
				})
			},

			vGoods(item, index) {
				item.isVGoods = !item.isVGoods;
				this.$set(this.form.goodsList, index, item)
				if (this.goodsIds.indexOf(item.id) === -1) {
					this.goodsIds.push(item.id)
				} else {
					this.goodsIds = this.goodsIds.filter(iter => iter !== item.id)
				}
			},


			openRefundShow() {
				this.RefundShow = true
				reasonList().then(res => {
					this.reasonList = res.data
					console.log(this.reasonList)
				})
			},



		}
	}
</script>

<style lang="scss" scoped>
	@import "/static/css/common.css";
	@import './index.rpx.css';
</style>