jiaoyi-uni2/奥莱优品/components/kfService/refund.vue

<template>
	<uni-popup ref="servicePop" type="bottom" border-radius="10px 10px 0 0" background-color="#f1f1f1">
		<view class="ts-body">
			<view class="ts-title">
				退款原因
				<view class="right" @click="orderTs(2)"><image src="/static/image/close.png"></image></view>
			</view>
			<view class="ts-content">
				<view class="ts-list">
					<view class="ts-sub-title">个人原因</view>
					<view class="ts-item-body">
						<view class="ts-item" @click="toTs('买多了/买错了')">买多了/买错了<image src="/static/image/right-black.png"></image></view>
						<view class="ts-item" @click="toTs('计划有变，暂时不需要了')">计划有变，暂时不需要了<image src="/static/image/right-black.png"></image></view>
						<view class="ts-item" @click="toTs('没看清使用规则，要用时才发现限制')">没看清使用规则，要用时才发现限制<image src="/static/image/right-black.png"></image></view>
					</view>
				</view>
				<view class="ts-list">
					<view class="ts-sub-title">商家原因</view>
					<view class="ts-item-body">
						<view class="ts-item" @click="toTs('电话/发消息联系不上商家')">电话/发消息联系不上商家<image src="/static/image/right-black.png"></image></view>
						<view class="ts-item" @click="toTs('商品缺货/无货')">商品缺货/无货<image src="/static/image/right-black.png"></image></view>
						<view class="ts-item" @click="toTs('商家营业但不接待')">商家营业但不接待<image src="/static/image/right-black.png"></image></view>
						<view class="ts-item" @click="toTs('商家停业/装修/转让')">商家停业/装修/转让<image src="/static/image/right-black.png"></image></view>
						<view class="ts-item" @click="toTs('需加价/购买其他商品才能使用')">需加价/购买其他商品才能使用<image src="/static/image/right-black.png"></image></view>
						<view class="ts-item" @click="toTs('商家要求改用其他方式/平台付款')">商家要求改用其他方式/平台付款<image src="/static/image/right-black.png"></image></view>
						<view class="ts-item" @click="toTs('预约不到合适的时间')">预约不到合适的时间<image src="/static/image/right-black.png"></image></view>
						<view class="ts-item" @click="toTs('商品涉及假冒品牌')">商品涉及假冒品牌<image src="/static/image/right-black.png"></image></view>
					</view>
				</view>
				<view class="ts-list">
					<view class="ts-sub-title">其他原因</view>
					<view class="ts-item-body">
						<view class="ts-item" @click="toTs('排队太久')">排队太久<image src="/static/image/right-black.png"></image></view>
						<view class="ts-item" @click="toTs('其他平台/方式购买更优惠')">其他平台/方式购买更优惠<image src="/static/image/right-black.png"></image></view>
						<view class="ts-item" @click="toTs('朋友/网上评价不好')">朋友/网上评价不好<image src="/static/image/right-black.png"></image></view>
						<view class="ts-item" @click="toTs('可用的门店距离太远')">可用的门店距离太远<image src="/static/image/right-black.png"></image></view>
						<view class="ts-item" @click="toTs('担心安全问题(疫情、天气等)')">担心安全问题(疫情、天气等)<image src="/static/image/right-black.png"></image></view>
						<view class="ts-item" @click="toTs('其他')">其他<image src="/static/image/right-black.png"></image></view>
					</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
export default {
	data() {
		return {
			orderSn:0
		}
	},
	methods: {
		orderTs(type){
			if (type == 1) {
				this.$refs.servicePop.open()
			} else {
				this.$refs.servicePop.close()
			}
		},
		open(data) {
			this.orderSn = data;
			this.$nextTick(()=>{
				this.$refs.servicePop.open()
			})
		},
		toTs(name){
			this.$emit("success",name)
			this.$refs.servicePop.close()
		}
	}
}
</script>

<style>
.ts-body .ts-title{display: flex;align-items: center;justify-content: space-between;font-size: 28upx;padding: 20upx;}
.ts-body .ts-title image{width: 40upx;height: 40upx;}
.ts-body .ts-content{height: 60vh;overflow: auto;padding: 20upx;}
.ts-body .ts-list{margin-bottom: 20upx;}
.ts-body .ts-list .ts-sub-title{line-height: 32upx;color: #666;font-size: 24upx;margin-bottom: 20upx;}
.ts-body .ts-list .ts-item-body{background-color: #fff;border-radius: 10upx;padding: 20upx;}
.ts-body .ts-list .ts-item-body .ts-item{font-size: 28upx;color: #333;display: flex;align-items: center;justify-content: space-between;border-bottom: 2upx solid #f8f8f8;padding: 20upx 0;}
.ts-body .ts-list .ts-item-body .ts-item:last-child{border-bottom: 0;}
.ts-body .ts-list .ts-item-body .ts-item image{width: 40upx;height: 40upx;}
</style>