修改html标签为uni标签,修改rem单位为rpx,修改提示及确认为uniapi,修改登录模块为uni接口,修改css入口为APP.vue,增加app端样式支持
This commit is contained in:
gaoxs
+144
-115
@@ -1,124 +1,153 @@
|
||||
<template>
|
||||
<div class="apply-return">
|
||||
<div class="goodsStyle acea-row row-between" v-for="cart in orderInfo.cartInfo" :key="cart.id">
|
||||
<div class="pictrue">
|
||||
<img :src="cart.productInfo.image" class="image" />
|
||||
</div>
|
||||
<div class="text acea-row row-between">
|
||||
<div class="name line2">{{ cart.productInfo.storeName }}</div>
|
||||
<div class="money">
|
||||
<div>
|
||||
￥{{
|
||||
<view class="apply-return">
|
||||
<view class="goodsStyle acea-row row-between" v-for="cart in orderInfo.cartInfo" :key="cart.id">
|
||||
<view class="pictrue">
|
||||
<image :src="cart.productInfo.image" class="image" />
|
||||
</view>
|
||||
<view class="text acea-row row-between">
|
||||
<view class="name line2">{{ cart.productInfo.storeName }}</view>
|
||||
<view class="money">
|
||||
<view>
|
||||
￥{{
|
||||
cart.productInfo.attrInfo
|
||||
? cart.productInfo.attrInfo.price
|
||||
: cart.productInfo.price
|
||||
}}
|
||||
</div>
|
||||
<div class="num">x{{ cart.cartNum }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list">
|
||||
<div class="item acea-row row-between-wrapper">
|
||||
<div>退货件数</div>
|
||||
<div class="num">{{ orderInfo.totalNum }}</div>
|
||||
</div>
|
||||
<div class="item acea-row row-between-wrapper">
|
||||
<div>退款金额</div>
|
||||
<div class="num">￥{{ orderInfo.payPrice }}</div>
|
||||
</div>
|
||||
<picker :value="reason" :range="reasonList" @change="changeReason">
|
||||
<div class="item acea-row row-between-wrapper">
|
||||
<div>退款原因</div>
|
||||
<div class="num">{{reason}}</div>
|
||||
<span class="iconfont icon-jiantou"></span>
|
||||
</div>
|
||||
</picker>
|
||||
<div class="item textarea acea-row row-between">
|
||||
<div>备注说明</div>
|
||||
<textarea placeholder="填写备注信息，100字以内" class="num" v-model="refund_reason_wap_explain"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="returnBnt bg-color-red" @click="submit">申请退款</div>
|
||||
</div>
|
||||
</view>
|
||||
<view class="num">x{{ cart.cartNum }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="item acea-row row-between-wrapper">
|
||||
<view>退货件数</view>
|
||||
<view class="num">{{ orderInfo.totalNum }}</view>
|
||||
</view>
|
||||
<view class="item acea-row row-between-wrapper">
|
||||
<view>退款金额</view>
|
||||
<view class="num">￥{{ orderInfo.payPrice }}</view>
|
||||
</view>
|
||||
<picker :value="reason" :range="reasonList" @change="changeReason">
|
||||
<view class="item acea-row row-between-wrapper">
|
||||
<view>退款原因</view>
|
||||
<view class="num">{{reason}}</view>
|
||||
<text class="iconfont icon-jiantou"></text>
|
||||
</view>
|
||||
</picker>
|
||||
<view class="item textarea acea-row row-between">
|
||||
<view>备注说明</view>
|
||||
<textarea placeholder="填写备注信息，100字以内" class="num" v-model="refund_reason_wap_explain"></textarea>
|
||||
</view>
|
||||
</view>
|
||||
<view class="returnBnt bg-color-red" @click="submit">申请退款</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { orderDetail, getRefundReason, postOrderRefund } from "@/api/order";
|
||||
import { trim } from "@/utils";
|
||||
import { VUE_APP_API_URL } from "@/config";
|
||||
import {
|
||||
orderDetail,
|
||||
getRefundReason,
|
||||
postOrderRefund
|
||||
} from "@/api/order";
|
||||
import {
|
||||
trim
|
||||
} from "@/utils";
|
||||
import {
|
||||
VUE_APP_API_URL
|
||||
} from "@/config";
|
||||
|
||||
export default {
|
||||
name: "goodsReturn",
|
||||
components: {
|
||||
// VueCoreImageUpload
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
url: `${VUE_APP_API_URL}/upload/image`,
|
||||
headers: {
|
||||
Authorization: "Bearer " + this.$store.state.token
|
||||
},
|
||||
id: 0,
|
||||
orderInfo: {},
|
||||
reasonList: [],
|
||||
reason: "",
|
||||
refund_reason_wap_explain: "",
|
||||
refund_reason_wap_img: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
changeReason(e) {
|
||||
this.reason = this.reasonList[e.mp.detail.value];
|
||||
},
|
||||
imageuploaded(res) {
|
||||
if (res.status !== 200)
|
||||
return this.$dialog.error(res.msg || "上传图片失败");
|
||||
this.refund_reason_wap_img.push(res.data.url);
|
||||
},
|
||||
getOrderDetail() {
|
||||
orderDetail(this.id)
|
||||
.then(res => {
|
||||
this.orderInfo = res.data;
|
||||
})
|
||||
.catch(err => {
|
||||
this.$dialog.error(err.response.data.msg || "获取订单失败");
|
||||
});
|
||||
},
|
||||
getRefundReason() {
|
||||
getRefundReason().then(res => {
|
||||
this.reasonList = res.data;
|
||||
});
|
||||
},
|
||||
submit() {
|
||||
const refund_reason_wap_explain = trim(this.refund_reason_wap_explain),
|
||||
text = this.reason;
|
||||
if (!text) return this.$dialog.toast({ mes: "请选择退款原因" });
|
||||
postOrderRefund({
|
||||
text,
|
||||
uni: this.orderInfo.orderId,
|
||||
refund_reason_wap_img: this.refund_reason_wap_img.join(","),
|
||||
refund_reason_wap_explain
|
||||
})
|
||||
.then(res => {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: "success",
|
||||
duration: 2000
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.$yrouter.back();
|
||||
}, 1500);
|
||||
})
|
||||
.catch(err => {
|
||||
this.$dialog.error(err.msg||err.response.data.msg);
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.id = this.$yroute.query.id || 0;
|
||||
this.getOrderDetail();
|
||||
this.getRefundReason();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
export default {
|
||||
name: "goodsReturn",
|
||||
components: {
|
||||
// VueCoreImageUpload
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
url: `${VUE_APP_API_URL}/upload/image`,
|
||||
headers: {
|
||||
Authorization: "Bearer " + this.$store.state.token
|
||||
},
|
||||
id: 0,
|
||||
orderInfo: {},
|
||||
reasonList: [],
|
||||
reason: "",
|
||||
refund_reason_wap_explain: "",
|
||||
refund_reason_wap_img: []
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
changeReason(e) {
|
||||
this.reason = this.reasonList[e.mp.detail.value];
|
||||
},
|
||||
imageuploaded(res) {
|
||||
if (res.status !== 200) {
|
||||
uni.showToast({
|
||||
title: err.msg || err.response.data.msg,
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
return
|
||||
}
|
||||
this.refund_reason_wap_img.push(res.data.url);
|
||||
},
|
||||
getOrderDetail() {
|
||||
orderDetail(this.id)
|
||||
.then(res => {
|
||||
this.orderInfo = res.data;
|
||||
})
|
||||
.catch(err => {
|
||||
uni.showToast({
|
||||
title: err.msg || err.response.data.msg,
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
});
|
||||
},
|
||||
getRefundReason() {
|
||||
getRefundReason().then(res => {
|
||||
this.reasonList = res.data;
|
||||
});
|
||||
},
|
||||
submit() {
|
||||
const refund_reason_wap_explain = trim(this.refund_reason_wap_explain),
|
||||
text = this.reason;
|
||||
if (!text) {
|
||||
uni.showToast({
|
||||
title: "请选择退款原因",
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
return
|
||||
}
|
||||
postOrderRefund({
|
||||
text,
|
||||
uni: this.orderInfo.orderId,
|
||||
refund_reason_wap_img: this.refund_reason_wap_img.join(","),
|
||||
refund_reason_wap_explain
|
||||
})
|
||||
.then(res => {
|
||||
uni.showToast({
|
||||
title: res.msg,
|
||||
icon: "success",
|
||||
duration: 2000
|
||||
});
|
||||
setTimeout(() => {
|
||||
this.$yrouter.back();
|
||||
}, 1500);
|
||||
})
|
||||
.catch(err => {
|
||||
uni.showToast({
|
||||
title: err.msg || err.response.data.msg,
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.id = this.$yroute.query.id || 0;
|
||||
this.getOrderDetail();
|
||||
this.getRefundReason();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user