483 lines
11 KiB
Vue
483 lines
11 KiB
Vue
<template>
|
||
<view class="whole">
|
||
<view class="tips" :style="{color: Color}">此投诉为本小程序自有投诉渠道，非微信官方投诉渠道</view>
|
||
<view class="oneBox">
|
||
<view class="row">
|
||
<view class="span">补充描述<text>*</text></view>
|
||
<view class="pad20">
|
||
<up-textarea v-model="desc" count placeholder="补充描述" style="font-size: 28rpx;" :height="70" :maxlength="500"></up-textarea>
|
||
</view>
|
||
</view>
|
||
<view class="row">
|
||
<view class="span">联系电话<text>*</text></view>
|
||
<view class="pad20">
|
||
<input class="input" type="text" v-model="mobile" placeholder="请输入您的联系方式" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="orderBox row" v-if="type == 1">
|
||
<view class="span">相关订单</view>
|
||
<view class="cont flex" @click="showOrder = true">
|
||
<view v-if="order_sn">
|
||
<view class="tit">{{order_sn}}</view>
|
||
<text>{{goods_name}}</text>
|
||
</view>
|
||
<view class="tit" v-else>请选择订单</view>
|
||
<up-icon name="arrow-right" />
|
||
</view>
|
||
</view>
|
||
|
||
<view class="row">
|
||
<view class="span">图片凭证（选填）</view>
|
||
<view class="upImg">
|
||
<view class="hasimg" v-for="(item, index) in imgList" :key="index">
|
||
<image :src="item" class="img" mode="aspectFill"></image>
|
||
<view class="icon flexc" @click="delUpImg(item, index)"><up-icon name="close" color="#fff" size="12" /></view>
|
||
</view>
|
||
<view class="plus flexc" @click="uploadImg()">
|
||
<up-icon name="camera-fill" color="#9D9D9D" size="24" />
|
||
<text>上传凭证</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="btmbox flexc" @click="commitSubmit()">提交</view>
|
||
</view>
|
||
|
||
|
||
<up-popup :show="showOrder" mode="bottom" :round="10" @close="showOrder = false">
|
||
<view class="itemBox">
|
||
<view class="title">我的订单</view>
|
||
<scroll-view scroll-y="true" class="content" @scrolltolower="scorllBottom">
|
||
<view class="item" v-for="item in orderList" :key="item.id" @click="selectOrder(item)">
|
||
<view class="one flex">
|
||
<view class="no">{{item.order_sn}}</view>
|
||
<text>{{statusObj[item.status]}}</text>
|
||
</view>
|
||
<view class="two" v-for="it in item.items" :key="it.id">
|
||
<image :src="it.pic_url + '?x-oss-process=image/format,webp'" :webp="true" mode="aspectFill"></image>
|
||
<view class="cont">
|
||
<view class="tit">{{it.goods_name}}<view class="sku">{{it.sku_name}}</view></view>
|
||
<view class="btm flex">
|
||
<view class="price">￥{{it.price}}</view>
|
||
<text>×{{it.number}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="noMore" v-if="orderList.length && page >= lastPage && !loading">— 没有更多了 —</view>
|
||
<view v-if="!orderList.length && !loading">
|
||
<up-empty mode="order" icon="https://ct-upimg.yx090.com/g.ii090/images/sprite/empty/order.png" text="暂无订单"></up-empty>
|
||
</view>
|
||
<view v-if="loading" class="loadbox">
|
||
<up-loading-icon text="加载中..." textSize="14"></up-loading-icon>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</up-popup>
|
||
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { reactive, toRefs } from 'vue'
|
||
import { get, post } from '@/api/request.js'
|
||
import { showToast } from '@/components/common.js'
|
||
import { Style } from '@/utils/list.js'
|
||
import API from '/api/index'
|
||
|
||
export default {
|
||
setup() {
|
||
const data = reactive({
|
||
reason: '',
|
||
mobile: '',
|
||
desc: '',
|
||
imgList: [],
|
||
Color: uni.getStorageSync('theme_color'),
|
||
bgColor: Style[uni.getStorageSync('theme_index') * 1].bgColor,
|
||
showPrivacy: false,
|
||
order_id: 0,
|
||
order_sn: 0,
|
||
goods_name: '',
|
||
showOrder: false,
|
||
page: 1,
|
||
lastPage: 0,
|
||
orderList: [],
|
||
loading: false,
|
||
statusObj: {
|
||
'0': '待付款',
|
||
'1': '待发货',
|
||
'2': '处理中',
|
||
'3': '待收货',
|
||
'7': '已完成',
|
||
'6': '退款成功',
|
||
'8': '关闭订单',
|
||
'9': '取消订单'
|
||
},
|
||
type: 0
|
||
})
|
||
|
||
function changeDesc(e) {
|
||
data.desc = e.detail
|
||
}
|
||
|
||
// 上传图片
|
||
async function uploadImg() {
|
||
if(data.imgList.length === 5) {
|
||
showToast('最多只能添加5张图片喔')
|
||
return false
|
||
}
|
||
data.onDialog = true
|
||
uni.chooseImage({
|
||
success(res) {
|
||
const tempFilePaths = res.tempFilePaths
|
||
uni.showLoading({
|
||
title: '正在上传...',
|
||
mask: true
|
||
})
|
||
uni.uploadFile({
|
||
url: API.url + '/api/v1/upload',
|
||
filePath: tempFilePaths[0],
|
||
name: 'file',
|
||
header: {
|
||
Authorization: uni.getStorageSync('token') || '',
|
||
accept: 'application/json',
|
||
appid: API.appId
|
||
},
|
||
success(req) {
|
||
const imgUrl = JSON.parse(req.data).data.link
|
||
data.imgList.push(imgUrl)
|
||
uni.hideLoading()
|
||
data.onDialog = false
|
||
},
|
||
fail() {
|
||
uni.hideLoading()
|
||
data.onDialog = false
|
||
}
|
||
})
|
||
},
|
||
fail() {
|
||
data.onDialog = false
|
||
}
|
||
})
|
||
}
|
||
|
||
// 删除图片
|
||
function delUpImg(item, index) {
|
||
data.imgList.splice(index, 1)
|
||
}
|
||
|
||
// 确认提交
|
||
const commitSubmit = async () => {
|
||
if(!data.mobile) {
|
||
return showToast('请填写联系方式')
|
||
}
|
||
if(!data.desc) {
|
||
return showToast('请输入补充描述')
|
||
}
|
||
if(data.type == 1 && !data.order_id) {
|
||
return showToast('商品问题的投诉需选择相应订单')
|
||
}
|
||
uni.showLoading({
|
||
mask: true,
|
||
title: '正在提交'
|
||
})
|
||
let param = {
|
||
complain_type: data.type,
|
||
order_id: data.order_id,
|
||
complain_reason: data.reason,
|
||
contact_phone: data.mobile,
|
||
added_desc: data.desc,
|
||
images: data.imgList
|
||
}
|
||
if(data.type != 1) {
|
||
param.order_id = ''
|
||
}
|
||
post('/api/v1/feedback', param).then(res => {
|
||
uni.hideLoading()
|
||
uni.showToast({
|
||
title: '提交成功',
|
||
icon: 'success',
|
||
duration: 1000,
|
||
mask: true,
|
||
success() {
|
||
setTimeout(() => {
|
||
uni.navigateBack({delta: 1})
|
||
}, 1000)
|
||
}
|
||
})
|
||
}).catch(() => {
|
||
uni.hideLoading()
|
||
})
|
||
}
|
||
|
||
function getPhone() {
|
||
get('/api/v1/address/default').then(res => {
|
||
if(!Array.isArray(res.data)) {
|
||
data.mobile = res.data.mobile
|
||
}
|
||
})
|
||
}
|
||
|
||
function getOrderList() {
|
||
data.loading = true
|
||
get('/api/v1/order', {page: data.page, pageSize: 20, status: ''}).then(res => {
|
||
data.orderList = data.orderList.concat(res.data)
|
||
data.lastPage = res.meta.last_page
|
||
data.loading = false
|
||
}).catch(() => {
|
||
data.loading = false
|
||
})
|
||
}
|
||
|
||
function getOrderInfo() {
|
||
get('/api/v1/order/' + data.order_id).then(res => {
|
||
data.order_sn = res.data.order_sn
|
||
data.goods_name = res.data.items && res.data.items[0].goods_name
|
||
})
|
||
}
|
||
|
||
function scorllBottom() {
|
||
if (data.page < data.lastPage) {
|
||
data.page++
|
||
getOrderList()
|
||
}
|
||
}
|
||
|
||
function selectOrder(item) {
|
||
data.order_id = item.id
|
||
data.order_sn = item.order_sn
|
||
data.goods_name = item.items[0].goods_name
|
||
data.showOrder = false
|
||
}
|
||
|
||
return {
|
||
...toRefs(data),
|
||
changeDesc,
|
||
commitSubmit,
|
||
uploadImg,
|
||
delUpImg,
|
||
getPhone,
|
||
scorllBottom,
|
||
getOrderList,
|
||
selectOrder,
|
||
getOrderInfo
|
||
}
|
||
},
|
||
async onLoad(options) {
|
||
this.order_id = (options.order_id || 0) * 1
|
||
this.type = (options.type || 0) * 1
|
||
// await this.$onLaunched
|
||
this.getPhone()
|
||
if(this.type == 1) {
|
||
this.getOrderList()
|
||
if(this.order_id * 1) {
|
||
this.getOrderInfo()
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
|
||
<style lang="scss" scoped>
|
||
.whole {
|
||
background-color: #F5F5F5;
|
||
position: relative;
|
||
padding-bottom: 140rpx;
|
||
.pad20{
|
||
padding: 20rpx 0;
|
||
box-sizing: border-box;
|
||
}
|
||
.oneBox{
|
||
.row{
|
||
padding: 0 24rpx;
|
||
font-size: 28rpx;
|
||
background-color: #fff;
|
||
margin-bottom: 20rpx;
|
||
.span{
|
||
line-height: 80rpx;
|
||
font-weight: 600;
|
||
font-size: 30rpx;
|
||
position: relative;
|
||
&::after{
|
||
position: absolute;
|
||
border-bottom: 1px solid #f4f4f4;
|
||
width: calc(100% + 40rpx);
|
||
left: -20rpx;
|
||
bottom: 0;
|
||
content: '';
|
||
}
|
||
text{
|
||
font-size: 24rpx;
|
||
color: #f00;
|
||
}
|
||
}
|
||
.input{
|
||
width: 100%;
|
||
height: 64rpx;
|
||
}
|
||
.upImg{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
width: 100%;
|
||
padding: 24rpx 0;
|
||
.hasimg{
|
||
width: 130rpx;
|
||
height: 130rpx;
|
||
margin-right: 30rpx;
|
||
margin-bottom: 30rpx;
|
||
position: relative;
|
||
.img{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.icon{
|
||
position: absolute;
|
||
top: -18rpx;
|
||
right: -18rpx;
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
background: rgba(0, 0, 0, 0.6);
|
||
border-radius: 50%;
|
||
z-index: 10;
|
||
}
|
||
}
|
||
.plus{
|
||
width: 140rpx;
|
||
height: 140rpx;
|
||
flex-direction: column;
|
||
border: 1px dashed #707070;
|
||
box-sizing: border-box;
|
||
border-radius: 6rpx;
|
||
text{
|
||
font-size: 24rpx;
|
||
color: #9D9D9D;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.tips{
|
||
position: sticky;
|
||
top: 0;
|
||
width: 100%;
|
||
margin-bottom: 24rpx;
|
||
background: v-bind('bgColor');
|
||
font-size: 26rpx;
|
||
padding: 14rpx 0;
|
||
text-align: center;
|
||
z-index: 10;
|
||
}
|
||
.orderBox{
|
||
.cont{
|
||
padding: 18rpx 0;
|
||
.tit{
|
||
padding: 8rpx 0;
|
||
}
|
||
text{
|
||
font-size: 26rpx;
|
||
color: #9D9D9D;
|
||
}
|
||
}
|
||
}
|
||
|
||
.btmbox{
|
||
width: 94%;
|
||
height: 80rpx;
|
||
color: #fff;
|
||
background: v-bind('Color');
|
||
border-radius: 10rpx;
|
||
font-size: 30rpx;
|
||
position: fixed;
|
||
bottom: 30rpx;
|
||
left: 3%;
|
||
}
|
||
.flexc{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.flex{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
.itemBox{
|
||
.title{
|
||
font-size: 30rpx;
|
||
font-weight: 600;
|
||
text-align: center;
|
||
line-height: 80rpx;
|
||
}
|
||
.content{
|
||
height: calc(80vh - 80rpx);
|
||
overflow: auto;
|
||
padding: 1rpx 20rpx 20rpx;
|
||
box-sizing: border-box;
|
||
background-color: #f2f2f2;
|
||
}
|
||
.item{
|
||
margin-top: 20rpx;
|
||
box-sizing: border-box;
|
||
font-size: 28rpx;
|
||
background: #fff;
|
||
padding: 0 20rpx;
|
||
border-radius: 10rpx;
|
||
.one{
|
||
line-height: 70rpx;
|
||
border-bottom: 1px solid #e8e8e8;
|
||
text{
|
||
color: #9D9D9D;
|
||
}
|
||
}
|
||
.two{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 20rpx 0;
|
||
border-bottom: 1px solid #f7f7f7;
|
||
.cont{
|
||
width: calc(100% - 180rpx);
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
.tit{
|
||
.sku{
|
||
font-size: 26rpx;
|
||
color: #888;
|
||
}
|
||
}
|
||
.btm{
|
||
.price{
|
||
font-size: 30rpx;
|
||
}
|
||
text{
|
||
font-size: 24rpx;
|
||
color: #9D9D9D;
|
||
}
|
||
}
|
||
}
|
||
image{
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
}
|
||
}
|
||
}
|
||
.noMore{
|
||
text-align: center;
|
||
font-size: 24rpx;
|
||
color: #999;
|
||
margin: auto;
|
||
padding: 30rpx 0;
|
||
width: 100%;
|
||
}
|
||
.loadbox{
|
||
padding: 30rpx 0;
|
||
text-align: center;
|
||
color: #666;
|
||
}
|
||
}
|
||
</style>
|