Skip to content

7
7-Eleven
Commit 0e53a283 by 高淑倩
Options

add： 退款_图片

parent cf95c099
Showing with 332 additions and 125 deletions
src/component/uploadImg/uploadImg.js
...@@ -20,10 +20,15 @@ Component({ ...@@ -20,10 +20,15 @@ Component({
methods: { methods: {
//点击上传图片 //点击上传图片
uploadImg(){ uploadImg(){
console.log('1111')
this.chooseImg() this.chooseImg()
}, },
deleteImage(event) {
var pics = this.data.pics
pics.splice(event.currentTarget.dataset.index, 1)
this.setData({
pics: pics
})
},
//选取图片 //选取图片
chooseImg(){ chooseImg(){
let that = this; let that = this;
......
src/component/uploadImg/uploadImg.wxml
<!--component/uploadImg/uploadImg.wxml--> <!--component/uploadImg/uploadImg.wxml-->
<view class="page-upload-img"> <view class="page-upload-img">
<view class="flex-wrp" style="padding-bottom:{{pics.length >= 4 ? '100px;' : '0px'}};"> <view class="flex-wrp" style="padding-bottom:{{pics.length >= 4 ? '100px;' : '0px'}};">
<view class="flex-item bc_green" wx:for="{{pics}}" wx:key="{{index}}"> <view class="flex-item bc_green image-preview" wx:for="{{pics}}" wx:key="{{index}}">
<icon size="16" type="clear" catchtap="deleteImage" data-index="{{index}}" />
<image class="item-img" src="{{item}}"></image> <image class="item-img" src="{{item}}"></image>
</view> </view>
<view class="flex-item bc_green"> <view class="flex-item bc_green">
......
src/component/uploadImg/uploadImg.wxss
...@@ -4,8 +4,6 @@ ...@@ -4,8 +4,6 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
.upload-wrap{ .upload-wrap{
/* width: 160rpx;
height: 160rpx;*/
border-radius: 5rpx; border-radius: 5rpx;
border: 1px solid rgba(216, 216, 216, 1); border: 1px solid rgba(216, 216, 216, 1);
line-height: 160rpx; line-height: 160rpx;
...@@ -36,7 +34,47 @@ ...@@ -36,7 +34,47 @@
} }
.flex-item { .flex-item {
margin-bottom: 20rpx; margin-bottom: 20rpx;
width: 21%; width: 21.5%;
height: 160rpx; height: 160rpx;
margin-left: 20rpx;
} }
.image-preview {
position: relative;
border: 2rpx solid #d9d9d9;
margin-right: 20rpx;
}
.image-preview icon {
position: absolute;
right: -10rpx;
top: -10rpx;
background: #ffffff;
border-radius: 50%; }
.image-preview image {
float: left; }
.image-choose {
width: 150rpx;
height: 150rpx;
border: 2rpx solid #d9d9d9;
position: relative; }
.image-choose::before, .image-choose::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #d9d9d9; }
.image-choose::before {
width: 4rpx;
height: 80rpx; }
.image-choose::after {
height: 4rpx;
width: 80rpx; }
.page-upload-img{
display: flex;
flex-wrap: wrap;
}
src/pages/cart/cart.js
...@@ -52,22 +52,22 @@ wxService.page({ ...@@ -52,22 +52,22 @@ wxService.page({
}) })
// 1556108807316001 // 1556108807316001
// 1556108807316000 // 1556108807316000
this.getCartList() // this.getCartList()
// const trolleySku = { const trolleySku = {
// count: 1, count: 1,
// skuId: '1556108807316001' skuId: '1556108807316001'
// } }
// // 加入购物车 // 加入购物车
// wxService.post('/sale/trolley/put', trolleySku).then(res => { wxService.post('/sale/trolley/put', trolleySku).then(res => {
// if (res) { if (res) {
// const { result } = res.data const { result } = res.data
// if (result == 0) { if (result == 0) {
// wx.hideLoading() wx.hideLoading()
// this.getCartList() this.getCartList()
// } }
// } }
// }) })
}, },
// 查询 /trolley/query // 查询 /trolley/query
getCartList() { getCartList() {
......
src/pages/orderDetail/orderDetail.js
...@@ -61,7 +61,13 @@ wxService.page({ ...@@ -61,7 +61,13 @@ wxService.page({
// 取消订单 // 取消订单
handelCancelOrder() { console.log('取消订单') }, handelCancelOrder() { console.log('取消订单') },
// 申请退款 // 申请退款
handelRequestRefund() { console.log('申请退款') }, handelRequestRefund(e) {
const { id } = e.currentTarget.dataset
const { detail } = e.currentTarget.dataset
let params = JSON.stringify(detail)
// 退款申请
wxService.router(`/pages/refund/refund`).search({params})
},
// 确认收货 // 确认收货
handelConfirmReceipt() { console.log('确认收货') }, handelConfirmReceipt() { console.log('确认收货') },
copy(e) { copy(e) {
......
src/pages/orderDetail/orderDetail.wxml
...@@ -99,21 +99,21 @@ ...@@ -99,21 +99,21 @@
</view> </view>
<!-- 底部按钮 --> <!-- 底部按钮 -->
<view class="button-wrap" wx-if="{{detail.status == 'C'}}"> <view class="button-wrap" wx-if="{{detail.status == 'C'}}">
<button class="btn btn-primary btn-lg" bindtap="handelDelOrder">删除订单</button> <button class="btn btn-primary btn-lg" data-id="{{detail.id}}" bindtap="handelDelOrder">删除订单</button>
</view> </view>
<view class="button-wrap" wx-if="{{detail.status == 'N'}}"> <view class="button-wrap" wx-if="{{detail.status == 'N'}}">
<button class="btn btn-primary btn-lg" bindtap="handelToPay">立即支付</button> <button class="btn btn-primary btn-lg" data-id="{{detail.id}}" bindtap="handelToPay">立即支付</button>
<button class="btn btn-lg btn-gray" bindtap="handelCancelOrder">取消订单</button> <button class="btn btn-lg btn-gray" data-id="{{detail.id}}" bindtap="handelCancelOrder">取消订单</button>
</view> </view>
<view class="button-wrap" wx-if="{{detail.status == 'P'}}"> <view class="button-wrap" wx-if="{{detail.status == 'P'}}">
<button class="btn btn-lg btn-gray" bindtap="handelRequestRefund">申请退款</button> <button class="btn btn-lg btn-gray" data-id="{{detail.id}}" data-detail="{{detail}}" bindtap="handelRequestRefund">申请退款</button>
</view> </view>
<view class="button-wrap" wx-if="{{detail.status == 'D'}}"> <view class="button-wrap" wx-if="{{detail.status == 'D'}}">
<button class="btn btn-primary btn-lg" bindtap="handelRequestRefund">申请退款</button> <button class="btn btn-primary btn-lg" data-id="{{detail.id}}" data-detail="{{detail}}" bindtap="handelRequestRefund">申请退款</button>
<button class="btn btn-lg btn-gray" bindtap="handelCancelOrder">确认收货</button> <button class="btn btn-lg btn-gray" data-id="{{detail.id}}" bindtap="handelCancelOrder">确认收货</button>
</view> </view>
<view class="button-wrap" wx-if="{{detail.status == 'R'}}"> <view class="button-wrap" wx-if="{{detail.status == 'R'}}">
<button class="btn btn-lg btn-gray" bindtap="handelConfirmReceipt">申请退款</button> <button class="btn btn-lg btn-gray" data-id="{{detail.id}}" data-detail="{{detail}}" bindtap="handelConfirmReceipt">申请退款</button>
</view> </view>
</view> </view>
src/pages/refund/refund.js
...@@ -10,35 +10,145 @@ wxService.page({ ...@@ -10,35 +10,145 @@ wxService.page({
* 页面的初始数据 * 页面的初始数据
*/ */
data: { data: {
cartList: [ imageDomain: '',
{ refundCreateDto: {
imgUrl: '', reason: "", // 原因
name: '1111', skuList: [],
sku: '1', tradeId: 0
price: '￥456', },
shows: '', tempFilePaths: [], // 照片
refundMark: '',
cartList: [],
curType: { // 当前选择原因
value: 0,
name: '请选择'
},
resonType: [{ // 所有退货原因
value: 0,
name: '请选择'
}, {
value: 1,
name: '质量问题'
}, {
value: 2,
name: '大小尺码问题'
}, {
value: 3,
name: '不想要了'
}, {
value: 4,
name: '卖家发错漏发'
}, {
value: 5,
name: '拍错商品'
}, {
value: 6,
name: '商品实物与描述不同'
}],
refundAmount: 0,
checkedColor: 'rgb(203, 60, 60)',
pics:[]
},
submitRefund() {
if (this.data.curType.value == 0) {
wx.showToast({
title: '请选择退款原因',
icon: 'none'
})
return false
}
var selectGoods = this.data.cartList.filter(item => item.checked)
if (selectGoods.length == 0) {
wx.showToast({
title: '请选择退款商品',
icon: 'none'
})
return false
}
console.log('selectGoods', selectGoods)
var refundCreateDto = this.data.refundCreateDto
returnOrder.reason = this.data.curType.value // 退款原因
},
chooseImage: function (event) { // 选择图片
// wx.chooseImage({
// count: 1,
// success: res => {
// var tempFilePaths = res.tempFilePaths
// wx.uploadFile({
// url: app.globalData.ctx + 'returnOrder/uploadReturnGoodsImg',
// filePath: tempFilePaths[0],
// header: { token: wx.getStorageSync('token') },
// name: 'file',
// success: res_ => {
// this.setData({
// imageDomain: JSON.parse(res_.data).data.imageDomain,
// tempFilePaths: this.data.tempFilePaths.concat(JSON.parse(res_.data).data.imageDomain + JSON.parse(res_.data).data.imgPath)
// })
// }
// })
// }
// })
let that = this;
let tempFilePaths = this.data.tempFilePaths;
wx.chooseImage({
count: 5 - tempFilePaths.length, // 最多可以选择的图片5张，
sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有
sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有
success: function (res) {
var imgsrc = res.tempFilePaths;
tempFilePaths = tempFilePaths.concat(imgsrc);
that.setData({
tempFilePaths: tempFilePaths
});
console.log(that.data.tempFilePaths)
// that.moreImgUpload({
// url: 'https://........',//这里是你图片上传的接口
// path: that.data.pics//这里是选取的图片的地址数组
// });
}, },
{ fail: function () {
imgUrl: '', // fail
name: '222',
sku: '2',
price: '￥222',
shows: ''
}
],
reasonList:[
{
id:'0',
name:'111'
}, },
{ complete: function () {
id: '2', // complete
name: '222'
} }
], })
reasonIndex:'0' },
deleteImage: function (event) { // 删除图片
var tempFilePaths = this.data.tempFilePaths
tempFilePaths.splice(event.currentTarget.dataset.index, 1)
this.setData({
tempFilePaths: tempFilePaths
})
},
checkPro(e) {
var index = e.currentTarget.dataset.index
const { cartList } = this.data
console.log('index', index, cartList[index].checked)
if (cartList[index].checked) {
cartList[index].checked = false
} else {
cartList[index].checked = true
}
this.setData({
cartList
})
},
changeRemark(event) { // 备注
this.setData({
refundMark: event.detail.value
})
},
selectType: function (event) { // 选择退货类型
this.setData({
curType: this.data.resonType[event.detail.value]
})
}, },
/** /**
* 生命周期函数--监听页面加载 * 生命周期函数--监听页面加载
*/ */
...@@ -57,7 +167,16 @@ wxService.page({ ...@@ -57,7 +167,16 @@ wxService.page({
* 生命周期函数--监听页面显示 * 生命周期函数--监听页面显示
*/ */
onShow: function () { onShow: function () {
const { params } = this.options
let detail = JSON.parse(params)
// item.checked
detail.skuVOList.forEach(item => {
item.checked = false
})
this.setData({
cartList: detail.skuVOList,
refundAmount: detail.payAmount
})
}, },
/** /**
......
src/pages/refund/refund.json
{ {
"navigationBarTitleText": "退款/售后", "navigationBarTitleText": "退款/售后",
"usingComponents": { "usingComponents": {
"upload-img": "/component/uploadImg/uploadImg" "upload-img": "/component/uploadImg/uploadImg",
"scroll-del": "/component/scrollDel/scrollDel"
} }
} }
\ No newline at end of file
src/pages/refund/refund.wxml
<!--pages/refund/refund.wxml--> <!--pages/refund/refund.wxml-->
<view class="page-refund"> <view class="page-refund">
<view class="select-pro">选择商品</view> <view class="select-pro">选择商品</view>
<view class="cart-content"> <view class="cart-content">
<view class="cart-item" wx:for="{{cartList}}" wx:key="{{index}}"> <view class="cart-item" wx:for="{{cartList}}" wx:key="{{index}}">
<view class="cart-list" bindtouchstart="touchS" bindtouchmove="touchM" bindtouchend="touchE" style="{{item.shows}}" data-index="{{index}}"> <view class="cart-list" style="{{item.shows}}" data-index="{{index}}">
<view class="select-radio" catchtap="selectPro" data-index="{{index}}"> <view class="select-radio" catchtap="selectPro" data-index="{{index}}">
<view class="{{item.isSelect ? 'theme-color' : ''}} circle-radio" > <icon
<image wx:if="{{item.isSelect}}" class="tick-success" src="/assets/imgs/7_1_0/tick-success.png" mode="widthFix"></image> size="16"
</view> type="{{item.checked ? 'success' : 'circle'}}"
</view> color="{{checkedColor}}"
<view class="pro-info"> data-index="{{index}}"
<image class="pro-img" src="/assets/imgs/7_1_0/icon.png" mode="widthFix"></image> catchtap="checkPro"
<view class="pro-right-info"> />
<view class="pro-name">{{item.name}}</view> </view>
<view class="pro-sku">{{item.sku}}</view> <view class="pro-info">
<view class="pro-price"> <image class="pro-img" src="/assets/imgs/7_1_0/icon.png" mode="widthFix" />
<view class="price">{{item.price}}</view> <view class="pro-right-info">
<view class="pro-num-edit"> <view class="pro-name">{{item.name}}</view>
<button class="redus-num" data-index="{{j}}" catchtap="minusNum">-</button> <view class="pro-sku">{{item.sku}}</view>
<input class="pro-num-edit-input" type="number" data-index="{{j}}" catchtap bindblur="blurNum" bindinput="inputNum" value="{{product.quantity}}"></input> <view class="pro-price">
<button class="add-num" data-index="{{j}}" catchtap="addNum">+</button> <view class="price">￥ {{item.price}}</view>
</view> <view class="pro-num-edit">
</view> <button class="redus-num" data-index="{{j}}" catchtap="minusNum">-</button>
</view> <input
</view> class="pro-num-edit-input"
</view> type="number"
</view> data-index="{{j}}"
catchtap
bindblur="blurNum"
bindinput="inputNum"
value="{{item.count}}"
/>
<button class="add-num" data-index="{{j}}" catchtap="addNum">+</button>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="refund-info">
</view> <view class="form">
<view class="refund-info"> <view class="form-label">退款原因</view>
<view class="form"> <view class="form-picker">
<view class="form-label">退款原因</view> <picker
<view class="form-picker"> mode="selector"
<picker bindchange="bindSelectRefundReason" value="{{reasonIndex}}" range="{{reasonList}}" range-key="name" class="reason-picker"> bindchange="selectType"
<view class="picker"> range="{{resonType}}"
当前选择：{{reasonList[reasonIndex].name}} range-key="name"
</view> class="reason-picker"
</picker> >
</view> {{curType.name}}
</view> </picker>
<view class="form"> </view>
<view class="form-label">退款金额</view> </view>
<view class="form-picker"> <view class="form">
<text class="refund-price">￥398</text> <view class="form-label">退款金额</view>
</view> <view class="form-picker">
</view> <text class="refund-price">￥{{refundAmount}}</text>
<view class="form"> </view>
<view class="form-label block-label">申请说明</view> </view>
<view class="form-input"> <view class="form">
<input type="textarea" class="desc" placeholder="请您详细填写退款说明（最多200字）" maxlength="200"></input> <view class="form-label block-label">申请说明</view>
</view> <view class="form-input">
</view> <input
<view class="form"> type="textarea"
<view class="form-label">上传凭证 <text class="img-number">最多5张</text></view> class="desc"
<view class="form-input"> placeholder="请您详细填写退款说明（最多200字）"
<upload-img /> maxlength="200"
</view> bindblur="changeRemark"
</view> />
</view> </view>
<view class="submit"> </view>
<button class="btn btn-primary btn-lg">提交申请</button> <view class="form">
</view> <view class="form-label">上传凭证
<text class="img-number">最多5张</text>
</view>
<view class="form-input">
<upload-img/>
</view>
</view>
</view>
<view class="submit">
<button class="btn btn-primary btn-lg" bindtap="submitRefund">提交申请</button>
</view>
</view> </view>
src/pages/refund/refund.wxss
...@@ -148,4 +148,18 @@ page{ ...@@ -148,4 +148,18 @@ page{
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 0;
} }
\ No newline at end of file .refund-info {
margin-top: 20rpx; }
.refund-head {
background: #fcfcfc;
border-bottom: 2rpx solid #f5f5f5;
color: #616161;
padding: 0 20rpx;
line-height: 80rpx; }
.refund-content {
background: #ffffff;
padding: 20rpx; }
src/project.config.json
...@@ -39,7 +39,7 @@ ...@@ -39,7 +39,7 @@
"list": [] "list": []
}, },
"miniprogram": { "miniprogram": {
"current": -1, "current": 24,
"list": [ "list": [
{ {
"id": -1, "id": -1,
...@@ -196,17 +196,17 @@ ...@@ -196,17 +196,17 @@
"scene": null "scene": null
}, },
{ {
"id": -1, "id": 24,
"name": "退款", "name": "退款申请",
"pathName": "pages/refund/refund", "pathName": "pages/refund/refund",
"query": "", "query": "params={\"id\":\"614116644096184320\",\"memberId\":\"598887367880871936\",\"status\":\"P\",\"skuVOList\":[{\"productId\":\"1556108606443006\",\"productCode\":\"test001\",\"productName\":\"test001\",\"skuId\":\"1556108807316001\",\"skuCode\":\"test001-4\",\"skuSpec\":\"颜色：白，尺寸：xl\",\"count\":1,\"price\":0.03,\"discount\":0,\"mainImgUrl\":\"http://testimg3.bigaka.com/group3/M00/00/17/Cv6CBF1Z9TKAU6T1AAAG8CvHO2o415.png\",\"amount\":0.03}],\"createTime\":\"2019-08-22 15:20:17\",\"payTime\":\"2019-08-22 15:20:42\",\"discount\":0,\"freightMoney\":0,\"payAmount\":0.03,\"skuCount\":1}",
"scene": null "scene": null
}, },
{ {
"id": 25, "id": 25,
"name": "订单详情", "name": "订单详情",
"pathName": "pages/orderDetail/orderDetail", "pathName": "pages/orderDetail/orderDetail",
"query": "id=613402110104571904", "query": "id=614116644096184320",
"scene": null "scene": null
}, },
{ {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment