395 lines
14 KiB
Vue
395 lines
14 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 状态栏 -->
|
||
<status-nav :titleVal="'购物车'" :statusTitle="true"></status-nav>
|
||
<view v-if="loading" :style="{paddingTop: statusHNH+'px'}" class="pad-zy30" style="padding-bottom: 150rpx;">
|
||
<view class="bacf radius20 mar-s20 disjbac pad-sx27-zy20">
|
||
<view class="bold">配送方式</view>
|
||
<view class="fon26 col3 disac">
|
||
<view @tap="expressEv(0)" :class="isExpress?'activeT':'expressT'" :style="{background:isExpress?publicColor:''}">快递</view>
|
||
<view @tap="expressEv(1)" :class="!isExpress?'activeT':'expressT'" :style="{background:isExpress?'':publicColor}">自提</view>
|
||
</view>
|
||
</view>
|
||
<!-- 地址信息 -->
|
||
<view v-if="isExpress" class="bacf radius20 mar-s20 pad-sx27-zy20">
|
||
<view class="bold">收件人信息</view>
|
||
<navigator url="/pagesA/myAddress/myAddress?isWhere=0" hover-class="none">
|
||
<view class="fon26 col3 disjbac pad-s50">
|
||
<view>
|
||
<view class="fon28 col3 bold mar-x20">{{addressInfo.name}} <span class="mar-z20">{{userPphone}}</span></view>
|
||
<view class="fon24 col9">{{addressInfo.province_str}}{{addressInfo.city_str}}{{addressInfo.county_str || ''}}{{addressInfo.address || ''}}</view>
|
||
</view>
|
||
<image src="/static/public/nextM.png" class="xiaDan-next" mode="aspectFill"></image>
|
||
</view>
|
||
</navigator>
|
||
</view>
|
||
<!-- 自提地址 -->
|
||
<view v-else class="bacf radius20 mar-s20 pad-sx27-zy20">
|
||
<view class="bold">自提地址</view>
|
||
<input type="number" maxlength="11" :focus="isFocus" @blur="blurEv" v-model="zPhone" class="mar-s50 mar-x20" style="border: 2rpx solid #E0E0E0;padding: 20rpx;border-radius: 10rpx;font-size: 24rpx;" placeholder="请输入收货人手机号" />
|
||
<view class="fon26 col3 disjbac">
|
||
<view>
|
||
<view class="fon28 col3 bold mar-x20">恒美植发</view>
|
||
<view class="fon24 col9">{{goAddress}}</view>
|
||
</view>
|
||
<!-- 立即导航 -->
|
||
<image @tap="goThere(goAddress)" src="/static/public/daoh.png" class="there" mode="aspectFill"></image>
|
||
</view>
|
||
</view>
|
||
<!-- 订单信息 -->
|
||
<view class="bacf radius20 mar-s20 pad-sx27-zy20">
|
||
<view class="bold">订单信息</view>
|
||
<view v-for="(item,index) in orderList" :key="index" class="fon26 col3 disjbac pad-sx50 disjbac bbot">
|
||
<navigator url="/pagesB/shopDetail/shopDetail" hover-class="none">
|
||
<image :src="item.imgSrc" class="flexs order-image" mode="aspectFill"></image>
|
||
</navigator>
|
||
<view class="width100 disjb fw" style="height: 166rpx;">
|
||
<view>
|
||
<navigator url="/pagesB/shopDetail/shopDetail" hover-class="none">
|
||
<view class="fon28 col3 bold clips2">{{item.title}}</view>
|
||
</navigator>
|
||
<view class="order-sy">试用</view>
|
||
</view>
|
||
<view class="disjbac mar-s10 width100">
|
||
<view class="order-item-price" v-if="isNei!=3">￥{{item.price}}</view>
|
||
<view class="order-item-price" v-else>积分：{{item.price}}</view>
|
||
<view class="fon28 col6">x{{item.num}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 优惠 -->
|
||
<view v-if="isNei!=3" class="bacf radius20 mar-s20 pad-sx27-zy20">
|
||
<view class="bold">优惠</view>
|
||
<view @tap="quanEv(1)" class="fon28 col3 disjbac mar-sx40">
|
||
<view>优惠券</view>
|
||
<view class="disac">
|
||
<view class="colf8 bold">-￥{{youQuan.youPrice}}.00</view>
|
||
<image src="/static/public/nextM.png" class="xiaDan-next" mode="aspectFill"></image>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="fon28 col3 disjbac">
|
||
<view>立减优惠</view>
|
||
<view class="colf8 bold">-￥{{delPrice}}.00</view>
|
||
</view> -->
|
||
</view>
|
||
<!-- 快递费用 -->
|
||
<view v-if="isExpress" class="bacf radius20 mar-s20 disjbac pad-sx27-zy20">
|
||
<view class="bold">快递费用</view>
|
||
<view class="fon28 colf8 bold">￥{{expressInfo.default_price}}.00</view>
|
||
</view>
|
||
<view class="disjbac posixzy bacf pad-zy32" style="height: 124rpx;line-height: 124rpx;">
|
||
<!-- 去支付 -->
|
||
<view class="fon40 colf8 bold" v-if="isNei!=3">合计：￥{{allPrice}}</view>
|
||
<view class="fon40 colf8 bold dis" v-else><span class="col3 fon28">合计积分：</span>{{allPrice}}<span v-if="isExpress">+ ￥{{expressInfo.default_price}}</span></view>
|
||
<view @tap="goPayment" v-if="isNei!=3" class="goPayment">去支付</view>
|
||
<view @tap="goPayment" v-else class="goPayment">去兑换</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="showQuan" @tap.stop="showQuan=false" class="posAll">
|
||
<view class="bacf posixzy" style="border-radius: 40rpx 40rpx 0rpx 0rpx;" @tap.stop="showQuan=true">
|
||
<view class="pad-sx20 pad-zy50">
|
||
<view class="disjbac">
|
||
<view class="fon28 bold col3">可用优惠券({{quanList.length}})</view>
|
||
<image @tap.stop="showQuan=false" src="/static/public/cha-close.png" style="width: 30rpx;height: 30rpx;" mode="aspectFill"></image>
|
||
</view>
|
||
<!-- <view class="fon28 bold col3 disja pad-s50" style="padding-bottom: 16rpx;">
|
||
<view class="posir" :class="switchQuan?'activeQuan':''" @tap="switchQuan=true">可用优惠券(1)</view>
|
||
<view class="posir" :class="!switchQuan?'activeQuan':''" @tap="switchQuan=false">失效优惠券(0)</view>
|
||
</view> -->
|
||
<scroll-view scroll-y class="mar-s40 quan-list-box">
|
||
<view @tap.stop="chooseQuan(index)" v-for="(item,index) in quanList" :key="index" class="mar-x40">
|
||
<view class="disjbac quan-item-box">
|
||
<view class="posir">
|
||
<image class="posia" src="/static/public/quan-left.png" mode=""></image>
|
||
<view class="posir" style="z-index: 1;">
|
||
<view class="pad-s40 pad-x30 fon28">￥<span class="bold fon56">{{item.youPrice}}</span></view>
|
||
<view class="fon24" style="padding-left: 12rpx;">满{{item.manPrice}}元可使用</view>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<!-- <view class="fon28 col3 mar-s20">{{['黄金','白银'][item.isGrade]}}会员专属优惠券</view> -->
|
||
<view class="fon28 col3 mar-s20">{{item.name}}</view>
|
||
<view>
|
||
<image v-if="item.isStatus" src="/static/public/chooseQuan.png"></image>
|
||
<image v-else src="/static/public/cancleQuan.png"></image>
|
||
</view>
|
||
<view class="fon20 col3 mar-x20">有效期：{{item.startTime.slice(0,10)}}至{{item.endTime.slice(0,10)}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
<!-- 领取优惠券按钮 -->
|
||
<view @tap.stop="goCoupon" class="ling-btn">领取优惠券</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 确认兑换弹框 -->
|
||
<view v-if="isDui" @tap.stop="isDui=false" class="posAll" style="display: flex;justify-content: center;align-items: center;padding: 0 85rpx;">
|
||
<view class="bacf radius20 width100 tc fon28 col3 pad20" @tap.stop="isDui=true">
|
||
<view class="bold" style="margin: 0rpx 0 56rpx 0;">兑换商品</view>
|
||
<view style="margin: 0rpx 0 66rpx 0;">您确定使用7666积分兑换吗？</view>
|
||
<view class="disjbac mar-x20 pad-zy20">
|
||
<view @tap.stop="isDui=false" style="width: 196rpx;height: 60rpx;line-height: 60rpx;text-align: center;font-size: 28rpx;font-weight: 500;border-radius: 10rpx;background: #C8C8C8;color: #FFFFFF;">暂不兑换</view>
|
||
<view @tap.stop="isDui=false" style="width: 196rpx;height: 60rpx;line-height: 60rpx;text-align: center;font-size: 28rpx;font-weight: 500;border-radius: 10rpx;background: #3875F6;color: #FFFFFF;">立即兑换</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
statusHNH:uni.getStorageSync('statusHNH'),
|
||
publicColor:uni.getStorageSync('publicColor'),//主题颜色
|
||
isExpress:true,
|
||
switchQuan:true,
|
||
showQuan:false,//是否显示优惠券弹框
|
||
isDui:false,
|
||
orderList:uni.getStorageSync('orderList'),
|
||
quanList:[],
|
||
goAddress:'四川省成都市青羊区青羊大道213号',
|
||
youQuan:{
|
||
id:0,
|
||
youPrice:0
|
||
},//优惠券
|
||
delPrice:0,//立减优惠（限时活动的）
|
||
allPrice:0,//合计
|
||
allNum:0,//总数量
|
||
zanAllPrice:0,//暂存合计
|
||
isNei:0,
|
||
expressInfo:{},//快递信息
|
||
addressInfo:{},//地址信息
|
||
userPphone:'',
|
||
zPhone:'',//自提时的手机号
|
||
page:1,
|
||
size:10,
|
||
isFocus:false,
|
||
loading:false
|
||
}
|
||
},
|
||
onShow() {
|
||
this.$toolAll.tools.isLogin();
|
||
this.checkexpress();//查询快递
|
||
this.checkAddress();//查询地址
|
||
this.quanEv(0);//查询优惠券列表
|
||
uni.removeStorageSync('orderInfo');
|
||
},
|
||
onLoad(options) {
|
||
this.checkeList();//查询订单列表
|
||
this.checkOrderDetail();//查询订单信息
|
||
this.isNei = options.isNei;
|
||
},
|
||
methods: {
|
||
goPayment(){//去付款
|
||
this.isFocus = false;
|
||
let nphone = '';
|
||
if(this.isExpress) {
|
||
nphone = this.addressInfo.phone;//默认地址的手机号
|
||
} else nphone = this.zPhone;//自提时的手机号
|
||
let self = 0;//快递的配送方式
|
||
if(!this.isExpress) self = 1;//自提的方式
|
||
let nsku_list = [];
|
||
this.orderList.forEach(item=>{
|
||
let obj = {
|
||
sku_coding:item.coding,
|
||
num:item.num
|
||
}
|
||
nsku_list.push(obj);
|
||
})
|
||
let parmas = {
|
||
sku_list: nsku_list,//商品单号和数量数组
|
||
total: this.allPrice,//总金额
|
||
address_id: this.addressInfo.id,//地址ID
|
||
express_code: this.expressInfo.code,//快递编码
|
||
coupon_id: this.youQuan.id,//优惠券ID
|
||
coupon_price: this.youQuan.youPrice,//优惠券可用
|
||
pick_self: self,//是否自提0 快递， 1自提
|
||
pick_self_phone: nphone,//联系电话
|
||
original_total: 0,//原价总金额
|
||
freight: this.expressInfo.default_price,
|
||
remarks: ""//备注
|
||
}
|
||
if(nphone=='') {
|
||
this.$toolAll.tools.showToast('请填写收货人手机号');
|
||
this.focusEv();
|
||
} else if(this.$toolAll.tools.isPhone(nphone)) {
|
||
this.$toolAll.tools.showToast('请正确填写收货人手机号');
|
||
this.focusEv();
|
||
} else {
|
||
this.$requst.post('order/create',parmas).then(res=>{
|
||
if(res.code==0){
|
||
uni.setStorageSync('orderList',this.orderList);
|
||
uni.setStorageSync('orderInfo',res.data);
|
||
console.log(res.data);
|
||
uni.navigateTo({
|
||
url:`/pagesA/immediatePayment/immediatePayment?allPrice=${this.allPrice}&allNum=${this.allNum}`
|
||
})
|
||
} else {
|
||
this.$toolAll.tools.showToast(res.msg);
|
||
}
|
||
})
|
||
}
|
||
},
|
||
goThere(val){//去这里
|
||
wx.getLocation({//获取当前经纬度
|
||
type: 'wgs84', //返回可以用于wx.openLocation的经纬度，官方提示bug: iOS 6.3.30 type 参数不生效，只会返回 wgs84 类型的坐标信息
|
||
success: function (res) {
|
||
wx.openLocation({//使用微信内置地图查看位置。
|
||
latitude: 22.5542080000,//要去的纬度-地址
|
||
longitude: 113.8878770000,//要去的经度-地址
|
||
name: val,
|
||
address: val
|
||
})
|
||
}
|
||
})
|
||
},
|
||
checkAddress(){//默认地址查询
|
||
this.$requst.post('user/address').then(res=>{
|
||
if(res.code==0){
|
||
if(res.data.length!=0){
|
||
res.data.forEach(item=>{
|
||
if(item.is_default==1) {
|
||
this.addressInfo = item;
|
||
}
|
||
})
|
||
this.userPphone = this.$toolAll.tools.hideMPhone(this.addressInfo.phone);
|
||
}
|
||
}
|
||
})
|
||
},
|
||
checkexpress(){//查询快递费
|
||
if(this.isExpress) {
|
||
this.$requst.post('common/express-list').then(res=>{
|
||
if(res.code==0){
|
||
if(res.data.length!=0){
|
||
res.data.forEach(item=>{
|
||
if(item.is_default==1){
|
||
this.expressInfo = item;
|
||
this.expressInfo.default_price = this.expressInfo.default_price/100;
|
||
}
|
||
})
|
||
this.totalEv();
|
||
}
|
||
}
|
||
})
|
||
} else {
|
||
this.totalEv();
|
||
}
|
||
},
|
||
expressEv(index){//快递自取切换事件
|
||
if(index==0) {
|
||
this.isExpress = true;
|
||
}
|
||
if(index==1) {
|
||
this.isExpress = false;
|
||
}
|
||
this.checkexpress();
|
||
},
|
||
totalEv(){//合计运算
|
||
if(this.isNei!=3 && this.isExpress){
|
||
this.allPrice = this.zanAllPrice - this.youQuan.youPrice - this.delPrice + this.expressInfo.default_price;//合计 = 总价 - 优惠券 - 立减券 + 快递费
|
||
}
|
||
if(this.isNei!=3 && !this.isExpress){
|
||
this.allPrice = this.zanAllPrice - this.youQuan.youPrice - this.delPrice;//合计 = 总价 - 优惠券 - 立减券
|
||
}
|
||
this.allPrice = this.$toolAll.tools.addXiaoShu(this.allPrice);
|
||
this.loading = true;
|
||
},
|
||
checkOrderDetail(){//查询订单准备信息
|
||
let nsku_list = [];
|
||
this.orderList.forEach(item=>{
|
||
let obj = {
|
||
sku_coding:item.coding,
|
||
num:item.num
|
||
}
|
||
nsku_list.push(obj)
|
||
})
|
||
let parmas = {
|
||
sku_list: nsku_list,
|
||
pick_self: 0
|
||
}
|
||
this.$requst.post('order/prepare-info',parmas).then(res=>{
|
||
if(res.code==0){
|
||
|
||
} else this.$toolAll.tools.showToast(res.msg);
|
||
})
|
||
},
|
||
checkeList(){
|
||
this.orderList.forEach(item=>{
|
||
this.allPrice += item.price*item.num;
|
||
this.allNum += item.num;
|
||
})
|
||
this.zanAllPrice = this.allPrice;
|
||
},
|
||
quanEv(index){//调起优惠券弹框事件
|
||
if(index==1){
|
||
this.showQuan = true
|
||
}
|
||
this.youQuan.id = 0;
|
||
this.youQuan.youPrice = 0;
|
||
this.allPrice = this.zanAllPrice + this.expressInfo.default_price;
|
||
this.checkQuan();
|
||
},
|
||
checkQuan(){//查询可用优惠券事件
|
||
this.$requst.post('user/get-coupon-list',{status:'normal',page:this.page,size:this.size}).then(res=>{
|
||
if(res.code==0){
|
||
this.quanList = [];
|
||
if(res.data.length!=0){
|
||
res.data.forEach(item=>{
|
||
if(item.type!='taste'){//如果不等于体验券
|
||
let obj = {
|
||
id:item.id,
|
||
youPrice:item.amount/100,
|
||
manPrice:item.condition/100,
|
||
isGrade:0,
|
||
name:item.name,
|
||
startTime:item.begin_at,
|
||
endTime:item.end_at,
|
||
isStatus:false
|
||
}
|
||
this.quanList.push(obj);
|
||
}
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
chooseQuan(index){//选择可用优惠券事件
|
||
if(this.zanAllPrice <= this.quanList[index].manPrice){//如果满减大于合计
|
||
this.$toolAll.tools.showToast('未达到使用条件')
|
||
} else {
|
||
this.quanList.forEach(item=>{
|
||
item.isStatus = false;
|
||
});
|
||
this.quanList[index].isStatus = true;
|
||
this.showQuan = false;
|
||
this.youQuan = this.quanList[index];
|
||
this.allPrice = this.zanAllPrice - this.quanList[index].youPrice + this.expressInfo.default_price;//合计 = 暂存合计 - 选中的优惠券
|
||
}
|
||
},
|
||
goCoupon(){//去领取优惠券
|
||
this.showQuan = false;
|
||
uni.navigateTo({
|
||
url:'/pagesA/coupon/coupon'
|
||
})
|
||
},
|
||
focusEv(){//获取焦点
|
||
this.isFocus = true;
|
||
},
|
||
blurEv(){//失去焦点
|
||
this.isFocus = false;
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
page {
|
||
background-color: #F5F5F5;
|
||
}
|
||
</style>
|