|
|
<template> <view> <!-- 收货地址 --> <!-- <view class="addr" @tap="selectAddress"> <view class="icon"> <image src="../../static/img/addricon.png" mode=""></image> </view> <view class="right" v-if="recinfo.address==''||recinfo.address=='-'"> <view class="addres" style="line-height: 75upx;">点我去完善信息</view> </view> <view class="right" v-else> <view class="tel-name"> <view class="name"> {{recinfo.name}} </view> <view class="tel"> {{recinfo.tel}} </view> </view> <view class="addres"> {{recinfo.address}} {{recinfo.detail}} </view> </view> </view> --> <!-- 提示-备注 --> <lotusCalendar :calendarData="calendarData" @returnDate="calendarChange" @closeCalendar="closeCalendar"></lotusCalendar> <view class="order"> <view class="row" style="height: 60upx;"> <view class="left"> 送货日期 : </view> <view class="right" @click="clikcdate" style="border-radius: 10upx; font-size: 30upx; margin-top: -5upx; width: 70%; height: 55upx; line-height: 55upx; padding-left: 10upx;"> {{form.businessDate}} </view> </view> <view style="color: #999; font-size: 20upx;">修改日期后商品价格可能会有浮动！</view> <!-- <view class="row"> <view class="left"> 积分 : </view> <view class="right"> 已扣除{{int}}积分抵扣{{deduction|toFixed}}元 </view> </view> --> <view class="row"> <view class="left"> 备注 : </view> <view class="right"> <input placeholder="选填,备注内容" v-model="note" /> </view> </view> </view> <!-- 购买商品列表 --> <view class="buy-list"> <view class="row" v-for="(row,index) in buylist" :key="index" v-if="row.num"> <view class="goods-info"> <view class="img"> <image :src="row.img"></image> </view> <view class="info"> <view class="title">{{row.mc}}{{row.dw}}</view> <view class="spec">{{row.gg}} <text style="color: red;margin-left: 15upx;">单价:￥{{row.price}}</text></view> <view class="spbz">备注：<view style="color: #41A863;text-align: left;">{{row.bz}}</view></view> <view class="spbz1">副单位：<view style="color: #41A863;text-align: left;">{{row.fudw}}</view></view> <view class="price-number"> <view class="price">￥{{row.price*row.num|toFixed}}</view> <view class="number"> 数量:{{row.num}} </view> </view> </view> </view> </view> </view> <!-- 明细 --> <view class="detail"> <!-- <view class="row"> <view style="font-size: 26rpx; color: #999;">温馨提示:在线支付方可使用积分/优惠券!</view> </view> --> <view class="row"> <view class="nominal"> 商品金额 </view> <view class="content"> ￥{{goodsPrice|toFixed}} </view> </view> <!-- <view class="row"> <view class="nominal"> 运费 </view> <view class="content"> ￥+{{freight|toFixed}} </view> </view>--> <!-- <view class="row"> <view class="nominal"> 优惠券 </view> <view class="content"> <span class="noyhq" @tap="chooseyhq">{{showyhq}}</span> </view> </view> --> </view> <view class="blck"></view> <view class="footer"> <view class="settlement"> <view class="sum">合计:<view class="money">￥{{sumPrice|toFixed}}</view></view> <!-- <view class="btn" @tap="toPay">提交订单</view> --> <view class="btn" v-if="jdyn==1" @click="xiad()">提交订单</view> <view class="btn" style="background-color: #999" v-else>{{jdtime}}</view> </view> </view> <!-- 选择支付方式 --> <uni-popup ref="popup" type="bottom" :maskClick="maskclose"> <view class="dosure" @click="closeit">关闭</view> <view class="pay-type-list"> <view class="type-item b-b" @click="changePayType(3)"> <text class="icon yticon icon-erjiye-yucunkuan"></text> <view class="con"> <text class="tit">账期</text> </view> <label class="radio"> <radio value="1" color="#fa436a" :checked='payType ==3' /> </radio> </label> </view> <!-- <view class="type-item b-b" @click="changePayType(1)"> <text class="icon iconfont icon-huodaofukuan"></text> <view class="con"> <text class="tit">货到付款</text> </view> <label class="radio"> <radio value="1" color="#fa436a" :checked='payType == 1' /> </radio> </label> </view> <view class="type-item b-b" @click="changePayType(2)"> <text class="icon yticon icon-weixinzhifu"></text> <view class="con"> <text class="tit">在线支付</text> <text>推荐在线支付</text> </view> <label class="radio"> <radio value="1" color="#fa436a" :checked='payType == 2' /> </radio> </label> </view> --> <!-- <view class="type-item b-b" @click="changePayType(4)"> <text class="icon iconfont icon-xianjinzhifu"></text> <view class="con"> <text class="tit">现付</text> </view> <label class="radio"> <radio value="1" color="#fa436a" :checked='payType ==4' /> </radio> </label> </view> --> <view class="type-item b-b"></view> </view> <view class="footer" style="padding-right: 40upx;"> <view class="settlement"> <view class="btn" style="background-color:#fa436a;" @tap="toPay">确认</view> </view> </view> </uni-popup> </view></template>
<script> import {throttle} from '@/common/util'; import uniPopup from "@/components/uni-popup/uni-popup.vue"; import lotusCalendar from "../../components/Winglau14-lotusCalendar/Winglau14-lotusCalendar.vue"; export default { components: { lotusCalendar, }, data() { return { maskclose:true, buylist:[], //订单列表
goodsPrice:0.0, //商品合计价格
sumPrice:0.0, //用户付款价格
freight:0.00, //运费
note:'', //备注
int:0, //抵扣积分
deduction:0, //抵扣价格
recinfo:[], oneprice:0,//单价
cpids:'', cpnums:'', cpbeiz:'', cpfudw:'', showyhq:'选择优惠券', yid:0,//优惠券id
payType:3, jdtime:'',//截单时间显示
jdyn:2,//截单标识
calendarData: { isShow: false, choseTime: '', Disablerq:'2023-08-21' }, form: { businessDate: '2024-03-02' }, }; }, onShow() { this.getdhrq(); //页面显示时，加载订单信息
uni.getStorage({ key:'buylist', success: (ret) => { this.buylist = ret.data; this.goodsPrice=0; //合计
let len = this.buylist.length; for(let i=0;i<len;i++){ if(this.buylist[i].num>0){ this.goodsPrice = this.goodsPrice + (this.buylist[i].num*this.buylist[i].price); this.cpids=this.cpids+','+this.buylist[i].id this.cpnums=this.cpnums+','+this.buylist[i].num this.cpbeiz=this.cpbeiz+'^'+this.buylist[i].bz; this.cpfudw=this.cpfudw+'^'+this.buylist[i].fudw; } } this.sumPrice = this.goodsPrice; } }); uni.getStorage({ key:'userinfo', success: (e) => { this.recinfo = e.data; } }) this.yid = getApp().globalData.yid; let getyhjine = getApp().globalData.yhqjine; if (getyhjine > 0) { this.showyhq = '￥-' + getyhjine + ''; let t = this; setTimeout(function() { t.sumPrice = parseFloat(t.sumPrice - getyhjine).toFixed(2); }, 500) }else{ this.showyhq = '选择优惠券'; } this.getendtime(); }, onHide() { }, onBackPress() { //页面后退时候，清除订单信息
this.clearOrder(); }, filters: { toFixed:function(x) { return parseFloat(x).toFixed(2); } }, methods: { //点击选择日期
clikcdate() { this.calendarData.isShow = true; }, // 日期选择
calendarChange(res) { if (res.time) { this.form.businessDate = res.time; this.calendarData.choseTime= res.time; } this.calendarData.isShow = res.isShow; this.checkorder(); }, // 关闭日期控件
closeCalendar(res) { if (res.time) { this.form.businessDate = res.time; this.calendarData.choseTime= res.time; } this.calendarData.isShow = res.isShow; }, //获取截单时间
async getendtime(){ let getuserinfo=uni.getStorageSync('userinfo'); let getdata= await this.$api.endtime({action:'endtime',uid:getuserinfo.uid,aid:getuserinfo.aid}); this.jdyn=getdata.code; if(getdata.code==2){ this.jdtime=getdata.data; uni.showModal({ title: '提醒', content: getdata.msg, showCancel: false, buttonText: '确定', success: (res) => {if (res.confirm) {}} }) } }, //获取截单时间
async getdhrq(){ let getuserinfo=uni.getStorageSync('userinfo'); let getdata= await this.$api.getdhrq({action:'getdhrq',uid:getuserinfo.uid,aid:getuserinfo.aid}); this.calendarData.Disablerq=getdata.data; this.form.businessDate=getdata.data; this.calendarData.choseTime=getdata.data; this.checkorder(); }, async checkorder(){ uni.showLoading({ title:'加载中...' }) let getuserinfo=uni.getStorageSync('userinfo'); let gids=this.cpids.substr(1); let getdata= await this.$api.checkorder({action:'checkorder',gids:gids,uid:getuserinfo.uid,aid:getuserinfo.aid,dhrq:this.form.businessDate}); this.goodsPrice=0; let len = this.buylist.length; for(let i=0;i<len;i++){ for(let y=0;y<getdata.data.length;y++){ if(this.buylist[i].id==getdata.data[y].id){ this.buylist[i].price=getdata.data[y].price; this.goodsPrice = this.goodsPrice + (this.buylist[i].num*this.buylist[i].price); this.cpids=this.cpids+','+this.buylist[i].id; this.cpnums=this.cpnums+','+this.buylist[i].num; this.cpbeiz=this.cpbeiz+'^'+this.buylist[i].bz; this.cpfudw=this.cpfudw+'^'+this.buylist[i].fudw; } } } this.sumPrice = this.goodsPrice; uni.hideLoading(); }, //选择支付方式
changePayType(type) { this.payType = type; // if(type==2){
// let t=this;
// uni.showModal({
// title: '支付说明',
// showCancel:false,
// confirmText:'明白了',
// content: t.zfsmtext,
// success: function (res) {}
// });
// }
}, async getbaseinfo(key){ let getdata= await this.$api.baseinfo({action:'baseinfo',key:key}); if(getdata.data.info!=''){ if(this.goodsPrice<getdata.data.info[0]){ this.freight=getdata.data.info[1]; this.sumPrice = this.goodsPrice; } } }, //删除本地购物车列表对应商品
deleteGoods(id){ let getcartlist=uni.getStorageSync('cartlist'); let len = getcartlist.length; for(let i=0;i<len;i++){ if(id==getcartlist[i].id){ getcartlist.splice(i, 1); break; } } //更新本地储存
uni.setStorageSync('cartlist',getcartlist); }, xiad(){ this.$refs.popup.open() }, closeit(){ this.$refs.popup.close() }, async postorder(paymentOrder) { let that=this; let getuserinfo=uni.getStorageSync('userinfo'); //剔除前面多余的逗号
let dealcpid=this.cpids.substr(1); let dealcpnum=this.cpnums.substr(1); let dealcpbeiz=this.cpbeiz.substr(1); let dealcpfudw=this.cpfudw.substr(1); let reinfo=await this.$api.postorder({action:'postorder',paytype:this.payType,dhrq:this.form.businessDate, uid:getuserinfo.uid,aid:getuserinfo.aid,name:getuserinfo.name,beiz:this.note,cpids:dealcpid,cpnums:dealcpnum,yhqid:this.yid,cpbeizs:dealcpbeiz,cpfudws:dealcpfudw,zjine:parseFloat(this.sumPrice)}); if(reinfo.code==1){ uni.hideLoading(); let len = that.buylist.length; for(let i=0;i<len;i++){ that.deleteGoods(that.buylist[i].id) } if(this.payType==2){ let paymoney = parseFloat(this.sumPrice); getApp().globalData.yid = 0; getApp().globalData.yhqjine = 0; uni.showToast({title:'提交订单成功，立即去支付',icon:'none'}); let t=this; setTimeout(function(){ uni.hideToast(); uni.redirectTo({ //这里的价格是显示作用，实际支付价格后台计算
url: "/pages/pay/pay?paymoney=" + paymoney + '&dhid=' + reinfo.data.dhid }) },1500) }else{ uni.showModal({ title: '下单成功', content: reinfo.msg, showCancel: false, success: (res) => { uni.switchTab({ url: "/pages/cart/cart" }) } }); } }else if(reinfo.code==3){ uni.hideLoading(); uni.showModal({ title: '提醒', content: reinfo.msg, showCancel: false, buttonText: '确定', success: (res) => {if (res.confirm) {}} }) }else{ uni.hideLoading(); uni.showToast({title:reinfo.msg,icon:'none'}); let t=this; setTimeout(function(){ uni.hideToast(); },1500) } }, clearOrder(){ uni.removeStorage({ key: 'buylist', success: (res)=>{ this.buylist = []; } }); }, toPay:throttle(function(){ // if(this.recinfo.address==''||this.recinfo.tel==''){
// uni.showToast({title:'请先添加收货地址',icon:'none'});
// return ;
// }
//商品列表
let paymentOrder = []; let goodsid=[]; let len = this.buylist.length; for(let i=0;i<len;i++){ paymentOrder.push(this.buylist[i]); goodsid.push(this.buylist[i].id); } if(paymentOrder.length==0){ uni.showToast({title:'订单信息有误，请重新购买',icon:'none'}); return ; } //本地模拟订单提交UI效果
uni.showLoading({ title:'正在提交订单...' }) //提交订单
this.postorder(paymentOrder) }), //选择收货地址
// selectAddress(){
// let t=this;
// uni.setStorage({
// key:'address',
// data:t.recinfo,
// success() {
// uni.navigateTo({
// url:"../address/edit/edit?type=edit"
// })
// }
// });
// },
chooseyhq() { uni.navigateTo({ url: '/pages/coupon/coupon?fromchoose=1&allmoney=' + this.sumPrice }) } } }</script>
<style lang="scss"> .pay-type-list { margin-top: 20upx; background-color: #fff; padding-left: 60upx; .type-item{ height: 120upx; padding: 20upx 0; display: flex; justify-content: space-between; align-items: center; padding-right: 60upx; font-size: 30upx; position:relative; } .icon{ width: 100upx; font-size: 52upx; } .jifenicon{ image{ width: 60upx; height: 60upx; } } .icon-erjiye-yucunkuan { color: #fe8e2e; } .icon-weixinzhifu { color: #36cb59; } .icon-alipay { color: #01aaef; } .tit{ font-size: $font-lg; color: $font-color-dark; margin-bottom: 4upx; } .con{ flex: 1; display: flex; flex-direction: column; font-size: $font-sm; color: $font-color-light; .moreuse{ margin-left: 5upx; font-size: 24upx; color: #909399; } } } .mix-btn { display: flex; align-items: center; justify-content: center; width: 630upx; height: 80upx; margin: 50upx auto 30upx; font-size: $font-lg; color: #fff; background-color: $base-color; border-radius: 10upx; box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4); } .shuom{ text-align: center; font-size: 28upx; color: #DD524D; padding: 15upx; } .addr{ width: 86%; padding: 20upx 3%; margin: 30upx auto 20upx auto; box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.1); border-radius: 20upx; display: flex; .icon{ width: 80upx; height: 80upx; display: flex; align-items: center; image{ width: 60upx; height: 60upx; } } .tel-name{ width: 100%; display: flex; font-size: 32upx; .tel{ margin-left: 40upx; } } .addres{ width: 100%; font-size: 26upx; color: #999; }}.buy-list{ width: 86%; padding: 10upx 3%; margin: 30upx auto 20upx auto; box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.1); border-radius: 20upx; .row{ margin: 30upx 0; .goods-info{ width: 100%; display: flex; .img{ width: 25vw; height: 25vw; border-radius: 10upx; overflow: hidden; flex-shrink: 0; margin-right: 10upx; image{ width: 22vw; height: 22vw; } } .info{ width: 100%; height: 25vw; overflow: hidden; display: flex; flex-wrap: wrap; position: relative; .title{ width: 100%; font-size: 28upx; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; // text-align: justify;
overflow: hidden; } .spec{ font-size: 22upx; background-color: #f3f3f3; color: #a7a7a7; height: 40upx; display: flex; align-items: center; padding: 0 10upx; border-radius: 20upx; margin-bottom: 20vw; } .spbz{ position: absolute; color: #999; width: 100%; bottom: 72upx; display: flex; align-items: flex-end; font-size: 25upx; height: 40upx; } .spbz1{ position: absolute; width: 100%; color: #999; bottom: 38upx; display: flex; align-items: flex-end; font-size: 25upx; height: 40upx; } .price-number{ position: absolute; width: 100%; bottom: 0upx; display: flex; justify-content: space-between; align-items: flex-end; font-size: 28upx; height: 40upx; .price{ color: #f06c7a; } .number{ display: flex; justify-content: center; align-items: center; } } } } }}.order{ width: 86%; padding: 10upx 3%; margin: 30upx auto 20upx auto; box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.1); border-radius: 20upx; .row{ margin: 20upx 0; height: 40upx; display: flex; .left{ font-size: 28upx; } .right{ margin-left: 40upx; font-size: 26upx; color: #999; input{ font-size: 26upx; color: #999; } } }}.blck{ width: 100%; height: 100upx;}.footer{ width: 100%; padding: 0 4%; background-color: #fbfbfb; height: 100upx; display: flex; justify-content: flex-end; align-items: center; font-size: 28upx; position: fixed; bottom: 0upx; z-index: 5; .settlement{ width: 95%; display: flex; justify-content: flex-end; align-items: center; .sum{ width: 50%; font-size: 28upx; margin-right: 10upx; display: flex; justify-content: flex-end; .money{ font-weight: 600; } } .btn{ padding: 0 30upx; height: 60upx; background-color: #f06c7a; color: #fff; display: flex; justify-content: center; align-items: center; font-size: 30upx; border-radius: 40upx; } } }.detail{ width: 86%; padding: 10upx 3%; margin: 30upx auto 20upx auto; box-shadow: 0upx 5upx 20upx rgba(0,0,0,0.1); border-radius: 20upx; .row{ height: 60upx; display: flex; justify-content: space-between; align-items: center; .nominal{ font-size: 28upx; } .content{ font-size: 26upx; color: #f06c7a; } }}</style>
|
