|
| 1 | +<template> |
| 2 | + <view> |
| 3 | + <view class="form-box"> |
| 4 | + <u--form ref="uForm" label-width="130rpx" :model="form"> |
| 5 | + <u-form-item label="售后类型" prop="type" required> |
| 6 | + <u-radio-group v-model="form.type" placement="row"> |
| 7 | + <u-radio :customStyle="{marginBottom: '8rpx', marginRight: '8rpx'}" label="仅退款" :name="0"> |
| 8 | + </u-radio> |
| 9 | + <u-radio :customStyle="{marginBottom: '8rpx', marginRight: '8rpx'}" label="退款退货" :name="1"> |
| 10 | + </u-radio> |
| 11 | + <u-radio :customStyle="{marginBottom: '8rpx', marginRight: '8rpx'}" label="换货" :name="2"> |
| 12 | + </u-radio> |
| 13 | + </u-radio-group> |
| 14 | + </u-form-item> |
| 15 | + <u-cell v-if="orderSet && orderSet.afterSaleAddress && (form.type == 1 || form.type == 2)" title="寄回地址" required :label="orderSet.afterSaleAddress" value="复制" isLink clickable @click="cp(orderSet.afterSaleAddress)"></u-cell> |
| 16 | + <u-form-item label="收货情况" prop="logisticsStatus" required> |
| 17 | + <u-radio-group v-model="form.logisticsStatus" placement="row"> |
| 18 | + <u-radio :customStyle="{marginBottom: '8rpx', marginRight: '8rpx'}" label="未收到货" :name="0"> |
| 19 | + </u-radio> |
| 20 | + <u-radio :customStyle="{marginBottom: '8rpx', marginRight: '8rpx'}" label="已收到货" :name="1"> |
| 21 | + </u-radio> |
| 22 | + </u-radio-group> |
| 23 | + </u-form-item> |
| 24 | + <u-form-item label="售后原因" prop="reason" required> |
| 25 | + <u-radio-group v-model="form.reason" placement="column"> |
| 26 | + <u-radio v-for="(item,index) in reasons" :customStyle="{marginBottom: '8rpx', marginRight: '8rpx'}" :label="item" :name="item"></u-radio> |
| 27 | + </u-radio-group> |
| 28 | + </u-form-item> |
| 29 | + <u-form-item label="备注" prop="remark"> |
| 30 | + <u--textarea v-model="form.remark" placeholder="请输入备注信息" ></u--textarea> |
| 31 | + </u-form-item> |
| 32 | + <u-form-item label="拍照上传"> |
| 33 | + <u-upload |
| 34 | + uploadText="添加照片" |
| 35 | + :fileList="pics" |
| 36 | + @afterRead="afterReadPic" |
| 37 | + @delete="deletePic" |
| 38 | + multiple |
| 39 | + ></u-upload> |
| 40 | + </u-form-item> |
| 41 | + </u--form> |
| 42 | + </view> |
| 43 | + <view class="submit"> |
| 44 | + <u-button type="success" @click="submit">保存</u-button> |
| 45 | + </view> |
| 46 | + </view> |
| 47 | +</template> |
| 48 | + |
| 49 | +<script> |
| 50 | + export default { |
| 51 | + data() { |
| 52 | + return { |
| 53 | + rules: { |
| 54 | + type: [{ |
| 55 | + type: 'number', |
| 56 | + required: true, |
| 57 | + message: '不能为空', |
| 58 | + // 可以单个或者同时写两个触发验证方式 |
| 59 | + trigger: ['change', 'blur'], |
| 60 | + }], |
| 61 | + logisticsStatus: [{ |
| 62 | + type: 'number', |
| 63 | + required: true, |
| 64 | + message: '不能为空', |
| 65 | + // 可以单个或者同时写两个触发验证方式 |
| 66 | + trigger: ['change', 'blur'], |
| 67 | + }], |
| 68 | + reason: [{ |
| 69 | + required: true, |
| 70 | + message: '不能为空', |
| 71 | + // 可以单个或者同时写两个触发验证方式 |
| 72 | + trigger: ['change', 'blur'], |
| 73 | + }], |
| 74 | + address: [{ |
| 75 | + required: true, |
| 76 | + message: '不能为空', |
| 77 | + // 可以单个或者同时写两个触发验证方式 |
| 78 | + trigger: ['change', 'blur'], |
| 79 | + }], |
| 80 | + }, |
| 81 | + form: { |
| 82 | + type: 0, |
| 83 | + logisticsStatus: 0, |
| 84 | + orderId: undefined, |
| 85 | + reason: undefined, |
| 86 | + remark: undefined, |
| 87 | + }, |
| 88 | + reasons: [ |
| 89 | + "不喜欢/不想要", |
| 90 | + "空包裹", |
| 91 | + "未按约定时间发货", |
| 92 | + "快递/物流一直未送达", |
| 93 | + "货物破损已拒签", |
| 94 | + "退运费", |
| 95 | + "规格尺寸与商品页面描述不符", |
| 96 | + "功能/效果不符", |
| 97 | + "质量问题", |
| 98 | + "少件/漏发", |
| 99 | + "包装/商品破损", |
| 100 | + "发票问题", |
| 101 | + ], |
| 102 | + pics: [], |
| 103 | + orderSet: undefined |
| 104 | + }; |
| 105 | + }, |
| 106 | + onReady() { |
| 107 | + this.$refs.uForm.setRules(this.rules); |
| 108 | + }, |
| 109 | + onLoad(e) { |
| 110 | + this.form.orderId = e.orderId |
| 111 | + this.form.reason = this.reasons[0] |
| 112 | + this._orderSet() |
| 113 | + }, |
| 114 | + mounted() {}, |
| 115 | + methods: { |
| 116 | + async _orderSet() { |
| 117 | + const res = await this.$wxapi.orderSet() |
| 118 | + if(res.code == 0) { |
| 119 | + this.orderSet = res.data |
| 120 | + } |
| 121 | + }, |
| 122 | + // 删除图片 |
| 123 | + deletePic(event) { |
| 124 | + this.pics.splice(event.index, 1) |
| 125 | + }, |
| 126 | + // 新增图片 |
| 127 | + async afterReadPic(event) { |
| 128 | + this.pics = this.pics.concat(event.file) |
| 129 | + }, |
| 130 | + submit() { |
| 131 | + this.$refs.uForm.validate().then(res => { |
| 132 | + this._submit() |
| 133 | + }).catch(errors => { |
| 134 | + uni.showToast({ |
| 135 | + title: '表单请填写完整', |
| 136 | + icon: 'none' |
| 137 | + }) |
| 138 | + }) |
| 139 | + }, |
| 140 | + async _submit() { |
| 141 | + uni.showLoading({ |
| 142 | + title: '', |
| 143 | + }) |
| 144 | + // 上传图片 |
| 145 | + const pics = [] |
| 146 | + if(this.pics && this.pics.length > 0) { |
| 147 | + for (let i = 0; i < this.pics.length; i++) { |
| 148 | + const file = this.pics[i] |
| 149 | + // https://www.yuque.com/apifm/nu0f75/ygvqh6 |
| 150 | + const res = await this.$wxapi.uploadFile(this.token, file.url) |
| 151 | + if(res.code != 0) { |
| 152 | + uni.hideLoading() |
| 153 | + uni.showToast({ |
| 154 | + title: res.msg, |
| 155 | + icon: 'none' |
| 156 | + }) |
| 157 | + return |
| 158 | + } |
| 159 | + pics.push(res.data.url) |
| 160 | + } |
| 161 | + } |
| 162 | + // https://www.yuque.com/apifm/nu0f75/dg4ggt |
| 163 | + const res = await this.$wxapi.refundApply({ |
| 164 | + token: this.token, |
| 165 | + amount: 0, |
| 166 | + ...this.form, |
| 167 | + pic: pics.join() |
| 168 | + }) |
| 169 | + uni.hideLoading() |
| 170 | + if (res.code != 0) { |
| 171 | + uni.showToast({ |
| 172 | + title: res.msg, |
| 173 | + icon: 'none' |
| 174 | + }) |
| 175 | + } else { |
| 176 | + uni.showToast({ |
| 177 | + title: '提交成功，请耐心等待客服处理', |
| 178 | + }) |
| 179 | + uni.navigateBack() |
| 180 | + } |
| 181 | + }, |
| 182 | + cp(v) { |
| 183 | + uni.setClipboardData({ |
| 184 | + data: v, |
| 185 | + success: function () { |
| 186 | + uni.showToast({ |
| 187 | + title: '已复制' |
| 188 | + }) |
| 189 | + } |
| 190 | + }); |
| 191 | + } |
| 192 | + } |
| 193 | + }; |
| 194 | +</script> |
| 195 | + |
| 196 | +<style lang="scss" scoped> |
| 197 | + .form-box { |
| 198 | + padding: 0 32rpx; |
| 199 | + } |
| 200 | + .submit { |
| 201 | + padding: 32rpx; |
| 202 | + } |
| 203 | +</style> |
0 commit comments