123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643 |
- <!-- 批量售后 批量选择商品-->
- <template>
- <view class="batchSel">
- <!-- 默认商品 start -->
- <view class="default">
- <view class="batch_sel_pre">
- <image :src="imgUrl+'order-detail/default_sel.png'" mode="" class="sel_btn"></image>
- <view class="default_goods_image" @click="goApplyBatch">
- <image :src="defaultGoods.productImage" mode="aspectFit"></image>
- </view>
- <view class="default_goods_des">
- <view class="default_goods_name" @click="goApplyBatch">{{defaultGoods.goodsName}}</view>
- <view class="default_goods_spec" @click="goApplyBatch" v-if="defaultGoods.specValues">{{defaultGoods.specValues}}</view>
- <view class="default_goods_bottom">
- <view class="default_goods_price" v-if="defaultGoods.moneyAmount && $getPartNumber(defaultGoods.moneyAmount,'int') && $getPartNumber(defaultGoods.moneyAmount,'decimal')">
- <text class="unit">¥</text>
- <text class="price_int">{{$getPartNumber(defaultGoods.moneyAmount,'int')}}</text>
- <text class="price_decimal">{{$getPartNumber(defaultGoods.moneyAmount,'decimal')}}</text>
- </view>
- <view class="default_goods_num">
- <view class="default_goods_number">
- <text @click="editNum('reduce','default',defaultGoods.productNum,defaultGoods.productId,defaultGoods.currNum)">-</text>
- <input type="text" v-model="defaultGoods.currNum" :disabled="isEdit ? true : false" @input="editNum('edit','default',defaultGoods.productNum,defaultGoods.productId,defaultGoods.currNum,$event)" class="pre_num"/>
- <text @click="editNum('add','default',defaultGoods.productNum,defaultGoods.productId,defaultGoods.currNum)">+</text>
- </view>
- </view>
- </view>
- </view>
- </view>
- </view>
- <!-- 默认商品 end -->
- <!-- 批量选择需要售后的商品 start -->
- <view class="batch_sel_list" v-if="batchGoodsList.length > 0">
- <view class="batch_sel_pre" v-for="(item,index) in batchGoodsList" :key="index">
- <image :src="item.sel ? imgUrl+'order-detail/sel.png' : imgUrl+'order-detail/no_sel.png' " mode="" class="sel_btn" @click="selGoods(item.productId)"></image>
- <view class="default_goods_image">
- <image :src="item.productImage" mode="aspectFit"></image>
- </view>
- <view class="default_goods_des">
- <view class="default_goods_name">{{item.goodsName}}</view>
- <view class="default_goods_spec" v-if="item.specValues">{{item.specValues}}</view>
- <view class="default_goods_bottom">
- <view class="default_goods_price" v-if="item.moneyAmount && $getPartNumber(item.moneyAmount,'int') && $getPartNumber(item.moneyAmount,'decimal')">
- <text class="unit">¥</text>
- <text class="price_int">{{$getPartNumber(item.moneyAmount,'int')}}</text>
- <text class="price_decimal">{{$getPartNumber(item.moneyAmount,'decimal')}}</text>
- </view>
- <view class="default_goods_num">
- <view class="default_goods_number">
- <text @click="editNum('reduce','batch',item.productNum,item.productId,item.currNum)">-</text>
- <input type="text" v-model="item.currNum" :disabled="isEdit ? true : false" @input="editNum('edit','batch',item.productNum,item.productId,item.currNum,$event)" class="pre_num"/>
- <text @click="editNum('add','batch',item.productNum,item.productId,item.currNum)">+</text>
- </view>
- </view>
- </view>
- </view>
- </view>
- </view>
- <!-- 批量选择需要售后的商品 end -->
- <view class="batch_bottom">
- <text class="submit_btn" @click="goApplyBatch">提交</text>
- </view>
- </view>
- </template>
- <script>
- import {
- mapState
- } from 'vuex';
- import recommendGoods from "@/components/recommend-goods.vue";
- import uniPopup from '@/components/uni-popup/uni-popup.vue';
- import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue';
- import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue';
- let startY = 0,
- moveY = 0,
- pageAtTop = true;
- export default {
- components: {
- recommendGoods,
- uniPopup,
- uniPopupMessage,
- uniPopupDialog
- },
- data() {
- return {
- imgUrl: getApp().globalData.imgUrl,
- coverTransform: 'translateY(0px)',
- coverTransition: '0s',
- moving: false,
- orderSn:'', //订单号
- orderProductId:'', //商品的订单id
- batchList:[], //订单列表
- defaultGoods:{}, //默认商品
- batchGoodsList:[], //同订单的其他商品
- batchSelListAmount:0, //批量选择的退款总金额
- isEdit:'true', //数量是否可编辑 默认为可编辑
- batchGoods:[], //当前页面数据的各种信息状态
- }
- },
- async onLoad(option) {
- this.orderSn = option.orderSn;
- this.orderProductId = option.orderProductId;
- this.isEdit = option.isEdit;
- this.batchGoods = JSON.parse(option.batchGoods);
- //订单id
- this.initData();
- this.getOrderDetail();
- },
- // #ifndef MP
- onNavigationBarButtonTap(e) {
- const index = e.index;
- if (index === 0) {
- this.navTo('/pages/set/set');
- } else if (index === 1) {
- // #ifdef APP-PLUS
- const pages = getCurrentPages();
- const page = pages[pages.length - 1];
- const currentWebview = page.$getAppWebview();
- currentWebview.hideTitleNViewButtonRedDot({
- index
- });
- // #endif
- uni.navigateTo({
- url: '/pages/notice/notice'
- })
- }
- },
- // #endif
- computed: {
- ...mapState(['hasLogin', 'userInfo', 'userCenterData'])
- },
- methods: {
- initData() {
- },
- /**
- * 统一跳转接口,拦截未登录路由
- * navigator标签现在默认没有转场动画,所以用view
- */
- navTo(url) {
- if (!this.hasLogin) {
- url = '/pages/public/login';
- }
- uni.navigateTo({
- url
- })
- },
- /**
- * 会员卡下拉和回弹
- * 1.关闭bounce避免ios端下拉冲突
- * 2.由于touchmove事件的缺陷(以前做小程序就遇到,比如20跳到40,h5反而好很多),下拉的时候会有掉帧的感觉
- * transition设置0.1秒延迟,让css来过渡这段空窗期
- * 3.回弹效果可修改曲线值来调整效果,推荐一个好用的bezier生成工具 http://cubic-bezier.com/
- */
- coverTouchstart(e) {
- if (pageAtTop === false) {
- return;
- }
- this.coverTransition = 'transform .1s linear';
- startY = e.touches[0].clientY;
- },
- coverTouchmove(e) {
- moveY = e.touches[0].clientY;
- let moveDistance = moveY - startY;
- if (moveDistance < 0) {
- this.moving = false;
- return;
- }
- this.moving = true;
- if (moveDistance >= 80 && moveDistance < 100) {
- moveDistance = 80;
- }
- if (moveDistance > 0 && moveDistance <= 80) {
- this.coverTransform = `translateY(${moveDistance}px)`;
- }
- },
- coverTouchend() {
- if (this.moving === false) {
- return;
- }
- this.moving = false;
- this.coverTransition = 'transform 0.3s cubic-bezier(.21,1.93,.53,.64)';
- this.coverTransform = 'translateY(0px)';
- },
- //获取售后商品选择的商品数据
- getOrderDetail(){
- let param = {};
- param.url = 'v3/business/front/after/sale/apply/getOrderProductList';
- param.method = 'GET';
- param.data = {};
- param.data.orderSn = this.orderSn; //订单号
- param.data.orderProductId = this.orderProductId;
- this.$request(param).then(res => {
- if (res.state == 200) {
- let result = res.data;
- if(this.batchGoods && this.batchGoods.length > 0){
- this.batchList = result;
- this.batchList.map(item=>{
- this.batchGoods.map(item1=>{
- if(item.orderProductId == item1.orderProductId){
- item.currNum = item1.currNum;
- item.sel = item1.sel;
- }
- })
- })
- // 主商品
- this.defaultGoods = this.batchList[0];
- // 同订单的其他商品
- this.batchList.splice(0,1);
- this.batchGoodsList = this.batchList;
- }else{
- this.batchList = result;
- // 主商品
- this.defaultGoods = this.batchList[0];
- this.defaultGoods.currNum = this.batchList[0].productNum;
- this.defaultGoods.sel = true; //sel是否选中
- // 同订单的其他商品
- this.batchList.splice(0,1);
- this.batchGoodsList = this.batchList;
- this.batchGoodsList.map((item,index)=>{
- item.currNum = item.productNum;
- item.sel = false;
- })
- }
- } else {
- this.$api.msg(res.msg);
- }
- }).catch((e) => {
- //异常处理
- })
- },
- /**
- * 功能:商品数量的编辑
- * 参数:
- * type:加减编辑
- * sourseType:点击来源 :default主商品 batch:同订单的其他商品
- * productNum:该商品数量可编辑的最大值
- * productId: 货品id
- * currNum: 当前商品的数量值
- * e:事件对象 $event
- *
- * */
- editNum(type,sourseType,productNum,productId,currNum,e){
- let that = this;
- if(that.isEdit == 'true'){
- if(sourseType == 'default'){ //主商品
- if(type == 'add'){
- if(currNum < productNum){
- that.defaultGoods.currNum++;
- }else{
- uni.showToast({
- title:'不能超出最大限制',
- duration:500,
- icon:'none'
- })
- setTimeout(function(){
- that.defaultGoods.currNum = productNum;
- },700)
- }
- }else if(type == 'reduce'){
- if(that.defaultGoods.currNum <= 1){
- uni.showToast({
- title:'不能低于最小限制',
- duration:500,
- icon:'none'
- })
- setTimeout(function(){
- that.defaultGoods.currNum = 1;
- },700)
- }else{
- that.defaultGoods.currNum--;
- }
- }else if(type == 'edit'){
- that.defaultGoods.currNum = e.detail.value;
- if(that.defaultGoods.currNum <= 1){
- uni.showToast({
- title:'不能低于最小限制',
- duration:500,
- icon:'none'
- })
- setTimeout(function(){
- that.defaultGoods.currNum = 1;
- },700)
- }else if(that.defaultGoods.currNum >= productNum){
- uni.showToast({
- title:'不能超出最大限制',
- duration:500,
- icon:'none'
- })
- setTimeout(function(){
- that.defaultGoods.currNum = productNum;
- },700)
- }
- }
- that.$forceUpdate();
- }else if(sourseType == 'batch'){ //同订单的其他商品
- if(type == 'add'){
- if(currNum < productNum){
- that.batchGoodsList.map((item,index)=>{
- if(item.productId == productId){
- item.currNum++;
- }
- })
- }else{
- that.batchGoodsList.map((item,index)=>{
- if(item.productId == productId){
- uni.showToast({
- title:'不能超出最大限制',
- duration:500,
- icon:'none'
- })
- setTimeout(function(){
- item.currNum = productNum;
- },700)
- }
- })
- }
- }else if(type == 'reduce'){
- that.batchGoodsList.map((item,index)=>{
- if(item.productId == productId){
- if(item.currNum <= 1){
- uni.showToast({
- title:'不能低于最小限制',
- duration:500,
- icon:'none'
- })
- setTimeout(function(){
- item.currNum = 1;
- },700)
- }else{
- item.currNum--;
- }
- }
- })
- }else if(type == 'edit'){
- that.batchGoodsList.map((item,index)=>{
- if(item.productId == productId){
- item.currNum = e.detail.value;
- if(item.currNum <= 1){
- uni.showToast({
- title:'不能低于最小限制',
- duration:500,
- icon:'none'
- })
- setTimeout(function(){
- item.currNum = 1;
- },700)
- item.currNum = 1;
- }else if(item.currNum >= productNum){
- uni.showToast({
- title:'不能超出最大限制',
- duration:500,
- icon:'none'
- })
- setTimeout(function(){
- item.currNum = productNum;
- },700)
- }
- }
- })
- }
- that.$forceUpdate();
- }
- }else{
- uni.showToast({
- title:'不可修改',
- icon:'none',
- duration:700
- })
- }
- },
- //商品选中状态的修改
- selGoods(productId){
- let that = this;
- that.batchGoodsList.map((item,index)=>{
- if(item.productId == productId){
- item.sel = !item.sel;
- }
- })
- that.$forceUpdate(); //强制刷新
- },
- /**
- * 功能:不四舍不入,保留两位小数
- * toFixeds(num,decimal)
- * @param {Object} num 数字(价格)
- * @param {Object} decimal 保留的位数
- */
- toFixeds(num,decimal){
- num = num.toString();
- let index = num.indexOf('.');
- if(index != -1){
- num = num.substring(0,decimal + index + 1)
- }else{
- num = num.substring(0)
- }
- return parseFloat(num).toFixed(decimal)
- },
- //去申请页面
- goApplyBatch(){
- // 售后商品选择存入缓存,来实现页面切换时会显 start
- let batchListStorage = [];
- batchListStorage.push(this.defaultGoods);
- this.batchGoodsList.map(item=>{
- batchListStorage.push(item)
- })
- //改变数据结构 过滤出 货品id,选中状态,当前数量
- let batchGoods = [];
- batchListStorage.forEach(item=>{
- batchGoods.push({
- orderProductId : item.orderProductId,
- currNum:item.currNum,
- sel:item.sel
- })
- })
- // 售后商品选择存入缓存,来实现页面切换时会显 end
- let batchSelList = [];
- batchSelList.push(this.defaultGoods);
- this.batchGoodsList.map(item=>{
- if(item.sel){
- batchSelList.push(item)
- }
- })
- //多个商品
- let orderProductInfos = '';
- batchSelList.forEach(item=>{
- item.infopre = item.orderProductId + '-' + item.currNum
- })
- let Infos = [];
- batchSelList.forEach(item=>{
- Infos.push(item.infopre)
- })
- //获取计算售后退款信息 计算结果为此次最多可退金额
- let param = {};
- param.url = 'v3/business/front/after/sale/apply/countReturnMoney';
- param.method = 'GET';
- param.data = {};
- param.data.orderSn = this.orderSn;
- param.data.orderProductInfos = Infos.join(','); //退换的订单货品列表,格式为:id1-num1,id2-num2...num为空时表示此订单货品全部退换
- this.$request(param).then(res => {
- if (res.state == 200) {
- let result = res.data;
- let pages = getCurrentPages();
- let prevPage = pages[pages.length - 2]; //上一个页面
- prevPage.$vm.refundInfos = result;
- prevPage.$vm.tosource = '1';
- prevPage.$vm.batchSelList = batchSelList;
- prevPage.$vm.applyNum = result.number;
- prevPage.$vm.returnAmount = result.maxReturnMoney;
- prevPage.$vm.refundDetail.maxReturnMoney = result.maxReturnMoney;
- prevPage.$vm.batchGoods = batchGoods;
- uni.navigateBack({
- delta:1
- })
- } else {
- this.$api.msg(res.msg);
- }
- }).catch((e) => {
- //异常处理
- })
- }
- }
- }
- </script>
- <style lang="scss">
- page {
- background: $bg-color-split;
- }
- uni-page-body {
- display: flex;
- height: 100%;
- background: #FFFFFF;
- width: 750rpx;
- margin-left: calc((100vw - 750rpx) / 2)
- }
- .default{
- border-top: 20rpx solid #F5F5F5;
- display: flex;
- align-items: center;
- padding-top: 20rpx;
- box-sizing: border-box;
- border-bottom: 1rpx solid #F2F2F2;
- }
- .batch_sel_list{
- display: flex;
- flex-direction: column;
- padding-top: 20rpx;
- padding-bottom: 100rpx;
- box-sizing: border-box;
- background: #FFFFFF;
- }
- // 商品的公共样式 每一个商品的样式
- .batch_sel_pre{
- height: 200rpx;
- margin-bottom: 20rpx;
- padding: 0 20rpx;
- box-sizing: border-box;
- display: flex;
- align-items: center;
- .sel_btn{
- width: 32rpx;
- height: 32rpx;
- }
- .default_goods_image{
- width: 200rpx;
- height: 200rpx;
- background: #F3F3F3;
- border-radius: 14rpx;
- margin: 0 22rpx 0 20rpx;
- image{
- width: 200rpx;
- height: 200rpx;
- border-radius: 14rpx;
- }
- }
- .default_goods_des{
- display: flex;
- flex-direction: column;
- justify-content: space-between;
- height: 200rpx;
- .default_goods_name{
- font-size: 26rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #343434;
- line-height: 39rpx;
- width: 435rpx;
- text-overflow: -o-ellipsis-lastline;
- overflow: hidden;
- text-overflow: ellipsis;
- display: -webkit-box;
- -webkit-line-clamp: 2;
- line-clamp: 2;
- -webkit-box-orient: vertical;
- }
- .default_goods_spec{
- font-size: 24rpx;
- font-family: PingFang SC;
- font-weight: 400;
- color: #9A9A9A;
- line-height: 24rpx;
- width: 435rpx;
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- word-break: break-all;
- margin: 29rpx 0 24rpx;
- }
- .default_goods_bottom{
- display: flex;
- align-items: center;
- justify-content: space-between;
- .default_goods_price{
- font-size: 24rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #F30300;
- line-height: 30rpx;
- text:nth-child(2){
- font-size: 34rpx;
- }
- }
- .default_goods_num{
- display: flex;
- justify-content: flex-end;
- .default_goods_number{
- display: flex;
- align-items: center;
- text:nth-of-type(1){
- width: 51rpx;
- height: 50rpx;
- text-align: center;
- font-size: 24rpx;
- font-family: PingFang SC;
- font-weight: 400;
- color: #949494;
- line-height: 50rpx;
- border: 1rpx solid #F4F4F4;
- }
- .pre_num{
- font-size: 24Rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #2E2E2E;
- width: 78rpx;
- height: 50rpx;
- line-height: 50rpx;
- border-top: 1rpx solid #F4F4F4;
- border-bottom: 1rpx solid #F4F4F4;
- text-align: center;
- }
- text:nth-of-type(2){
- width: 51rpx;
- height: 50rpx;
- text-align: center;
- font-size: 24rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #2E2E2E;
- line-height: 50rpx;
- border: 1rpx solid #F4F4F4;
- }
- }
- }
- }
- }
- }
- .batch_bottom{
- // width: 100%;
- height: 100rpx;
- background: #FFFFFF;
- box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(154, 154, 154, 0.1);
- width: 100%;
- display: flex;
- justify-content: flex-end;
- align-items: center;
- position: fixed;
- bottom: 0;
- z-index: 10;
- padding-right: 20rpx;
- width: 750rpx;
- .submit_btn{
- width: 120rpx;
- height: 50rpx;
- background: linear-gradient(-90deg, #FC1E1C, #FF7A18);
- border-radius: 25rpx;
- font-size: 28rpx;
- font-family: PingFang SC;
- font-weight: 500;
- color: #FFFFFF;
- text-align: center;
- line-height: 50rpx;
- }
- }
- </style>
|