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({
methods: {
//点击上传图片
uploadImg(){
console.log('1111')
this.chooseImg()
},
deleteImage(event) {
var pics = this.data.pics
pics.splice(event.currentTarget.dataset.index, 1)
this.setData({
pics: pics
})
},
//选取图片
chooseImg(){
let that = this;
......
src/component/uploadImg/uploadImg.wxml
<!--component/uploadImg/uploadImg.wxml-->
<view class="page-upload-img">
<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>
</view>
<view class="flex-item bc_green">
......
src/component/uploadImg/uploadImg.wxss
......@@ -4,8 +4,6 @@
flex-wrap: wrap;
}
.upload-wrap{
/* width: 160rpx;
height: 160rpx;*/
border-radius: 5rpx;
border: 1px solid rgba(216, 216, 216, 1);
line-height: 160rpx;
......@@ -36,7 +34,47 @@
}
.flex-item {
margin-bottom: 20rpx;
width: 21%;
width: 21.5%;
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({
})
// 1556108807316001
// 1556108807316000
this.getCartList()
// this.getCartList()
// const trolleySku = {
// count: 1,
// skuId: '1556108807316001'
// }
// // 加入购物车
// wxService.post('/sale/trolley/put', trolleySku).then(res => {
// if (res) {
// const { result } = res.data
// if (result == 0) {
// wx.hideLoading()
// this.getCartList()
// }
// }
// })
const trolleySku = {
count: 1,
skuId: '1556108807316001'
}
// 加入购物车
wxService.post('/sale/trolley/put', trolleySku).then(res => {
if (res) {
const { result } = res.data
if (result == 0) {
wx.hideLoading()
this.getCartList()
}
}
})
},
// 查询 /trolley/query
getCartList() {
......
src/pages/orderDetail/orderDetail.js
......@@ -61,7 +61,13 @@ wxService.page({
// 取消订单
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('确认收货') },
copy(e) {
......
src/pages/orderDetail/orderDetail.wxml
......@@ -99,21 +99,21 @@
</view>
<!-- 底部按钮 -->
<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 class="button-wrap" wx-if="{{detail.status == 'N'}}">
<button class="btn btn-primary btn-lg" bindtap="handelToPay">立即支付</button>
<button class="btn btn-lg btn-gray" bindtap="handelCancelOrder">取消订单</button>
<button class="btn btn-primary btn-lg" data-id="{{detail.id}}" bindtap="handelToPay">立即支付</button>
<button class="btn btn-lg btn-gray" data-id="{{detail.id}}" bindtap="handelCancelOrder">取消订单</button>
</view>
<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 class="button-wrap" wx-if="{{detail.status == 'D'}}">
<button class="btn btn-primary btn-lg" bindtap="handelRequestRefund">申请退款</button>
<button class="btn btn-lg btn-gray" bindtap="handelCancelOrder">确认收货</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" data-id="{{detail.id}}" bindtap="handelCancelOrder">确认收货</button>
</view>
<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>
src/pages/refund/refund.js
......@@ -10,35 +10,145 @@ wxService.page({
* 页面的初始数据
*/
data: {
cartList: [
{
imgUrl: '',
name: '1111',
sku: '1',
price: '￥456',
shows: '',
imageDomain: '',
refundCreateDto: {
reason: "", // 原因
skuList: [],
tradeId: 0
},
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//这里是选取的图片的地址数组
// });
},
{
imgUrl: '',
name: '222',
sku: '2',
price: '￥222',
shows: ''
}
],
reasonList:[
{
id:'0',
name:'111'
fail: function () {
// fail
},
{
id: '2',
name: '222'
complete: function () {
// complete
}
],
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({
* 生命周期函数--监听页面显示
*/
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": "退款/售后",
"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-->
<view class="page-refund">
<view class="select-pro">选择商品</view>
<view class="cart-content">
<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="select-radio" catchtap="selectPro" data-index="{{index}}">
<view class="{{item.isSelect ? 'theme-color' : ''}} circle-radio" >
<image wx:if="{{item.isSelect}}" class="tick-success" src="/assets/imgs/7_1_0/tick-success.png" mode="widthFix"></image>
</view>
</view>
<view class="pro-info">
<image class="pro-img" src="/assets/imgs/7_1_0/icon.png" mode="widthFix"></image>
<view class="pro-right-info">
<view class="pro-name">{{item.name}}</view>
<view class="pro-sku">{{item.sku}}</view>
<view class="pro-price">
<view class="price">{{item.price}}</view>
<view class="pro-num-edit">
<button class="redus-num" data-index="{{j}}" catchtap="minusNum">-</button>
<input class="pro-num-edit-input" type="number" data-index="{{j}}" catchtap bindblur="blurNum" bindinput="inputNum" value="{{product.quantity}}"></input>
<button class="add-num" data-index="{{j}}" catchtap="addNum">+</button>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="select-pro">选择商品</view>
<view class="cart-content">
<view class="cart-item" wx:for="{{cartList}}" wx:key="{{index}}">
<view class="cart-list" style="{{item.shows}}" data-index="{{index}}">
<view class="select-radio" catchtap="selectPro" data-index="{{index}}">
<icon
size="16"
type="{{item.checked ? 'success' : 'circle'}}"
color="{{checkedColor}}"
data-index="{{index}}"
catchtap="checkPro"
/>
</view>
<view class="pro-info">
<image class="pro-img" src="/assets/imgs/7_1_0/icon.png" mode="widthFix" />
<view class="pro-right-info">
<view class="pro-name">{{item.name}}</view>
<view class="pro-sku">{{item.sku}}</view>
<view class="pro-price">
<view class="price">￥ {{item.price}}</view>
<view class="pro-num-edit">
<button class="redus-num" data-index="{{j}}" catchtap="minusNum">-</button>
<input
class="pro-num-edit-input"
type="number"
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>
<view class="refund-info">
<view class="form">
<view class="form-label">退款原因</view>
<view class="form-picker">
<picker bindchange="bindSelectRefundReason" value="{{reasonIndex}}" range="{{reasonList}}" range-key="name" class="reason-picker">
<view class="picker">
当前选择：{{reasonList[reasonIndex].name}}
</view>
</picker>
</view>
</view>
<view class="form">
<view class="form-label">退款金额</view>
<view class="form-picker">
<text class="refund-price">￥398</text>
</view>
</view>
<view class="form">
<view class="form-label block-label">申请说明</view>
<view class="form-input">
<input type="textarea" class="desc" placeholder="请您详细填写退款说明（最多200字）" maxlength="200"></input>
</view>
</view>
<view class="form">
<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">提交申请</button>
</view>
<view class="refund-info">
<view class="form">
<view class="form-label">退款原因</view>
<view class="form-picker">
<picker
mode="selector"
bindchange="selectType"
range="{{resonType}}"
range-key="name"
class="reason-picker"
>
{{curType.name}}
</picker>
</view>
</view>
<view class="form">
<view class="form-label">退款金额</view>
<view class="form-picker">
<text class="refund-price">￥{{refundAmount}}</text>
</view>
</view>
<view class="form">
<view class="form-label block-label">申请说明</view>
<view class="form-input">
<input
type="textarea"
class="desc"
placeholder="请您详细填写退款说明（最多200字）"
maxlength="200"
bindblur="changeRemark"
/>
</view>
</view>
<view class="form">
<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>
src/pages/refund/refund.wxss
......@@ -148,4 +148,18 @@ page{
position: fixed;
bottom: 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 @@
"list": []
},
"miniprogram": {
"current": -1,
"current": 24,
"list": [
{
"id": -1,
......@@ -196,17 +196,17 @@
"scene": null
},
{
"id": -1,
"name": "退款",
"id": 24,
"name": "退款申请",
"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
},
{
"id": 25,
"name": "订单详情",
"pathName": "pages/orderDetail/orderDetail",
"query": "id=613402110104571904",
"query": "id=614116644096184320",
"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