You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

784 lines
19 KiB

<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>