|
|
@@ -1,138 +1,261 @@
|
|
|
-<!-- 申请退款 -->
|
|
|
-<template>
|
|
|
- <view class="wrap">
|
|
|
-
|
|
|
- <view class="item">
|
|
|
- <view class="item-top">
|
|
|
- <text>限源预售</text>
|
|
|
- </view>
|
|
|
- <view class="item-content">
|
|
|
- <image src="../../../static/img-4.png" class="product-img" mode="aspectFill"></image>
|
|
|
- <view class="item-content-sidebar">
|
|
|
- <view class="product-item-row-between">
|
|
|
- <view class="product-item-name">
|
|
|
- 冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器
|
|
|
- </view>
|
|
|
- <view class="row-end">
|
|
|
- <text class="product-item-price">￥394.00</text>
|
|
|
- <text class="product-item-num">x <text>1</text></text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="product-item-tag">
|
|
|
- <text>一盒15g*20袋</text>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="box">
|
|
|
- <view class="box-label">
|
|
|
- 退款信息
|
|
|
- </view>
|
|
|
- <view class="refund-list">
|
|
|
- <view class="refund-item">
|
|
|
- <view class="row-between">
|
|
|
- <text class="row-name">货物状态</text>
|
|
|
- <view class="select-row">
|
|
|
- 请选择
|
|
|
- <image src="../../../static/back-icon2.png" class="back-icon" mode="widthFix"></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="refund-item">
|
|
|
- <view class="row-between">
|
|
|
- <text class="row-name">退款原因</text>
|
|
|
- <view class="select-row">
|
|
|
- 请选择
|
|
|
- <image src="../../../static/back-icon2.png" class="back-icon" mode="widthFix"></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view class="refund-item">
|
|
|
- <view class="row-between">
|
|
|
- <text class="row-name">退款金额</text>
|
|
|
- <text class="refund-price">￥980.00</text>
|
|
|
- </view>
|
|
|
- <view class="refund-msg">
|
|
|
- 不可修改,最多￥980.00，含发货邮费￥0.00，其中包含积分
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="upload-box">
|
|
|
- <view class="upload-box-label">
|
|
|
- 上传凭证<text>（最多3张照片）</text>
|
|
|
- </view>
|
|
|
- <view class="img-container">
|
|
|
- <view class="note-image-box">
|
|
|
- <view class="note-image-item" v-for="(item,index) in imageLists" :key="index">
|
|
|
- <view class="close-icon" @click="del(index)">
|
|
|
- <image src="../../../static/del-img.png" mode=""></image>
|
|
|
- </view>
|
|
|
- <view class="image-box" @click="previewImg(index)">
|
|
|
- <image :src="item.url" class="img" mode="aspectFill"></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- <view v-if="imageLists.length < 9" class="note-image-item" @click="addImage">
|
|
|
- <image src="../../../static/add-3.png" class="add-img" mode="aspectFill"></image>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="footer">
|
|
|
- <button type="default" class="active">提交</button>
|
|
|
- </view>
|
|
|
-
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
- export default {
|
|
|
- data() {
|
|
|
- return {
|
|
|
- imageLists: [], //存放图片数组
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- //删除图片
|
|
|
- del(index) {
|
|
|
- this.imageLists.splice(index, 1)
|
|
|
- },
|
|
|
- //添加图片
|
|
|
- addImage() {
|
|
|
- const count = 9 - this.imageLists.length
|
|
|
- uni.chooseImage({
|
|
|
- count: count,
|
|
|
- success: res => {
|
|
|
- let tempfilepaths = res.tempFilePaths
|
|
|
- tempfilepaths.forEach((item, index) => {
|
|
|
- // 处理h5多选的情况
|
|
|
- if (index < count) {
|
|
|
- this.imageLists.push({
|
|
|
- url: item
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- },
|
|
|
- //查看图片
|
|
|
- previewImg(index){
|
|
|
- let urls = []
|
|
|
- for(let i = 0;i < this.imageLists.length;i++){
|
|
|
- urls.push(this.imageLists[i].url)
|
|
|
- }
|
|
|
- uni.previewImage({
|
|
|
- current:index,
|
|
|
- urls:urls,
|
|
|
- })
|
|
|
- },
|
|
|
- }
|
|
|
- }
|
|
|
-</script>
|
|
|
-
|
|
|
+<!-- 申请退款 -->
|
|
|
+<template>
|
|
|
+ <view class="wrap">
|
|
|
+
|
|
|
+ <view class="item">
|
|
|
+ <view class="item-top">
|
|
|
+ <text>限源预售</text>
|
|
|
+ </view>
|
|
|
+ <view class="item-content">
|
|
|
+ <image src="../../../static/img-4.png" class="product-img" mode="aspectFill"></image>
|
|
|
+ <view class="item-content-sidebar">
|
|
|
+ <view class="product-item-row-between">
|
|
|
+ <view class="product-item-name">
|
|
|
+ 冻干柠檬片 蜂蜜柠檬茶 保留鲜度96% 美白神器
|
|
|
+ </view>
|
|
|
+ <view class="row-end">
|
|
|
+ <text class="product-item-price">￥394.00</text>
|
|
|
+ <text class="product-item-num">x <text>1</text></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="product-item-tag">
|
|
|
+ <text>一盒15g*20袋</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="box">
|
|
|
+ <view class="box-label">
|
|
|
+ 退款信息
|
|
|
+ </view>
|
|
|
+ <view class="refund-list">
|
|
|
+ <view class="refund-item">
|
|
|
+ <view class="row-between" @tap="showCargoStatus">
|
|
|
+ <text class="row-name">货物状态</text>
|
|
|
+ <view class="select-row">
|
|
|
+ 请选择
|
|
|
+ <image src="../../../static/back-icon2.png" class="back-icon" mode="widthFix"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="refund-item">
|
|
|
+ <view class="row-between" @tap="showRefundReason">
|
|
|
+ <text class="row-name">退款原因</text>
|
|
|
+ <view class="select-row">
|
|
|
+ 请选择
|
|
|
+ <image src="../../../static/back-icon2.png" class="back-icon" mode="widthFix"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="refund-item">
|
|
|
+ <view class="row-between">
|
|
|
+ <text class="row-name">退款金额</text>
|
|
|
+ <text class="refund-price">￥980.00</text>
|
|
|
+ </view>
|
|
|
+ <view class="refund-msg">
|
|
|
+ 不可修改,最多￥980.00，含发货邮费￥0.00，其中包含积分
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="upload-box">
|
|
|
+ <view class="upload-box-label">
|
|
|
+ 上传凭证<text>（最多3张照片）</text>
|
|
|
+ </view>
|
|
|
+ <view class="img-container">
|
|
|
+ <view class="note-image-box">
|
|
|
+ <view class="note-image-item" v-for="(item,index) in imageLists" :key="index">
|
|
|
+ <view class="close-icon" @click="del(index)">
|
|
|
+ <image src="../../../static/close-2.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="image-box" @click="previewImg(index)">
|
|
|
+ <image :src="item.url" class="img" mode="aspectFill"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="imageLists.length < 9" class="note-image-item" @click="addImage">
|
|
|
+ <image src="../../../static/add-3.png" class="add-img" mode="aspectFill"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="footer">
|
|
|
+ <button type="default" class="active">提交</button>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 货物状态-弹窗 -->
|
|
|
+ <view v-show="isShowCargoStatus">
|
|
|
+ <view class="mask" @tap="closeCargoStatus"></view>
|
|
|
+ <view class="window">
|
|
|
+ <view class="window-label">
|
|
|
+ 货物状态
|
|
|
+ </view>
|
|
|
+ <scroll-view scroll-y="true" class="window-select-box">
|
|
|
+ <view class="radio-wrap">
|
|
|
+ <view class="radio-row" v-for="(item, index) in list" :key="index" @click="choseItem(item.id)">
|
|
|
+ <view class="leftsidebar">
|
|
|
+ <text>{{item.name}}</text>
|
|
|
+ </view>
|
|
|
+ <image class="circle-img"
|
|
|
+ :src="id == item.id ? '../../../static/circle-active.png' : '../../../static/circle.png'"
|
|
|
+ mode="" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ <view class="window-bottom">
|
|
|
+ <button type="default">确定</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 货物状态-弹窗 -->
|
|
|
+
|
|
|
+ <!-- 退款原因-弹窗 -->
|
|
|
+ <view v-show="isShowRefundReason">
|
|
|
+ <view class="mask" @tap="closeRefundReason"></view>
|
|
|
+ <view class="window">
|
|
|
+ <view class="window-label">
|
|
|
+ 退款原因
|
|
|
+ </view>
|
|
|
+ <scroll-view scroll-y="true" class="window-select-box">
|
|
|
+ <view class="radio-wrap">
|
|
|
+ <view class="radio-row" v-for="(item, index) in reasonList" :key="index"
|
|
|
+ @click="selectItem(item.isActive)">
|
|
|
+ <view class="leftsidebar">
|
|
|
+ <text>{{item.name}}</text>
|
|
|
+ </view>
|
|
|
+ <image class="circle-img"
|
|
|
+ :src="isActive == item.isActive ? '../../../static/circle-active.png' : '../../../static/circle.png'"
|
|
|
+ mode="" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+ <view class="window-bottom">
|
|
|
+ <button type="default">确定</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 退款原因-弹窗 -->
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ imageLists: [], //存放图片数组
|
|
|
+
|
|
|
+ //货物状态-弹窗
|
|
|
+ isShowCargoStatus: false,
|
|
|
+
|
|
|
+ //货物状态列表-单选
|
|
|
+ list: [{
|
|
|
+ id: 1,
|
|
|
+ name: '未收到货',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ name: '已收到货',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ id: 1, //单选 初始化第一个高亮
|
|
|
+
|
|
|
+ //退款原因-弹窗
|
|
|
+ isShowRefundReason: true,
|
|
|
+
|
|
|
+
|
|
|
+ reasonList: [{
|
|
|
+ isActive: 1,
|
|
|
+ name: '不喜欢/不想要',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ isActive: 2,
|
|
|
+ name: '空包裹',
|
|
|
+ }, {
|
|
|
+ isActive: 3,
|
|
|
+ name: '快递/物流一直未送达',
|
|
|
+ }, {
|
|
|
+ isActive: 4,
|
|
|
+ name: '快递/物流无跟踪记录',
|
|
|
+ }, {
|
|
|
+ isActive: 5,
|
|
|
+ name: '货物破损已拒签',
|
|
|
+ }, {
|
|
|
+ isActive: 6,
|
|
|
+ name: '其他',
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ isActive: 1, //单选 初始化第一个高亮
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ //删除图片
|
|
|
+ del(index) {
|
|
|
+ this.imageLists.splice(index, 1)
|
|
|
+ },
|
|
|
+ //添加图片
|
|
|
+ addImage() {
|
|
|
+ const count = 9 - this.imageLists.length
|
|
|
+ uni.chooseImage({
|
|
|
+ count: count,
|
|
|
+ success: res => {
|
|
|
+ let tempfilepaths = res.tempFilePaths
|
|
|
+ tempfilepaths.forEach((item, index) => {
|
|
|
+ // 处理h5多选的情况
|
|
|
+ if (index < count) {
|
|
|
+ this.imageLists.push({
|
|
|
+ url: item
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //查看图片
|
|
|
+ previewImg(index) {
|
|
|
+ let urls = []
|
|
|
+ for (let i = 0; i < this.imageLists.length; i++) {
|
|
|
+ urls.push(this.imageLists[i].url)
|
|
|
+ }
|
|
|
+ uni.previewImage({
|
|
|
+ current: index,
|
|
|
+ urls: urls,
|
|
|
+ })
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 货物状态-弹窗
|
|
|
+ */
|
|
|
+ showCargoStatus() {
|
|
|
+ this.isShowCargoStatus = true;
|
|
|
+ },
|
|
|
+ closeCargoStatus() {
|
|
|
+ this.isShowCargoStatus = false;
|
|
|
+ },
|
|
|
+ //单选-选择货物状态
|
|
|
+ choseItem: function(index) {
|
|
|
+ this.id = index;
|
|
|
+ },
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 退款原因-弹窗
|
|
|
+ */
|
|
|
+ showRefundReason() {
|
|
|
+ this.isShowRefundReason = true;
|
|
|
+ },
|
|
|
+ closeRefundReason() {
|
|
|
+ this.isShowRefundReason = false;
|
|
|
+ },
|
|
|
+ //单选-选择退款原因
|
|
|
+ selectItem: function(index) {
|
|
|
+ this.isActive = index;
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
<style scoped lang="scss">
|
|
|
@import "./apply-for-refund.css";
|
|
|
</style>
|
