jiaoyi-uni2/奥莱优品/components/kfService/complaint.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 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>
				</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>
				</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){
			uni.navigateTo({
				url:"/pages/complaint/form?name="+name+"&order="+this.orderSn
			})
		}
	}
}
</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>