<template> <view class="cart-pages"> <view v-if="!userInfo.receiveAddress" @click="editAddress" class="noAddress"> <view>请输入收货地址</view> <u-icon name="arrow-right" size="36"></u-icon> </view> <view v-else class="cart-bar"> <view> <u-image height="40rpx" width="40rpx" src="/static/position.png"></u-image> </view> <view class="position"> <view class="address">{{userInfo.receiveAddress}}</view> <view>{{userInfo.receiverName +' ' + userInfo.receiverPhone}}</view> </view> <view @click="editAddress"> <u-image height="50rpx" width="50rpx" src="/static/edit.png"></u-image> </view> </view> <view class="goods-list"> <!-- 商品列表 --> <view class="goods-item" v-for="(item,index) in goodsList" :key="item.id"> <view class="goods-imgs"> <u-image border-radius="12" width="158rpx" height="140rpx" :src="item.goods.homeImage"></u-image> </view> <view class="goods-info"> <view class="good-name">{{item.goods.name}}</view> <view class="goods-price"> <view> <text>{{item.goods.sellGold}}</text> <u-image mode="scaleToFill" width="30rpx" height="30rpx" src="/static/ledou.png"></u-image> </view> <view>×{{item.buyQty}}</view> </view> </view> </view> <!-- 总计 --> <view class="goods-heji"> <view> <view>商品合计:</view> <view class="heji"> <text>{{totalPrice}}</text> <u-image mode="scaleToFill" width="35rpx" height="35rpx" src="/static/ledou.png"></u-image> </view> </view> <view> <view>运费:</view> <view>免运费</view> </view> </view> </view> <view class="cart-submit"> <view> <view>总计:<text>{{totalPrice}}</text></view> <u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image> </view> <view> <u-button size="mini" :loading="btnLoading" :custom-style="toOrderButton" type="error" @click="toSave">确认支付</u-button> </view> </view> <!-- 提示用户设置支付密码 --> <u-modal v-model="showSetPswModal" content="请先设置支付密码,才能使用乐豆" show-cancel-button confirm-text="去设置" cancel-text="暂时放弃" @confirm="toSetPwd" @cancel="showSetPswModal=false" ></u-modal> <!-- 确认取消弹窗 --> <u-modal v-model="showLeavePsw" title="确认放弃支付吗?" content="您的订单在30分钟内未支付将被取消" show-cancel-button confirm-text="确认放弃" cancel-text="继续支付" @confirm="canclePay" @cancel="payAgain" ></u-modal> <!-- 确认支付弹窗 --> <u-popup mode="center" closeable @close="showLeavePsw=true" v-model="showInputPsw" width="500rpx" > <view class="slot-content"> <view>确认支付</view> <view class="text-cont"> <text class="num-big">{{totalPrice}}</text>乐豆 </view> <view class="footer"> <u-input v-model="password" maxlength="30" input-align="center" type="password" placeholder="请输入支付密码" /> </view> </view> </u-popup> </view> </template> <script> import { saveOrder, signPay} from '@/api/order.js' import { findAddressBycustomerNo } from '@/api/receiveAddress.js' export default { data() { return { toOrderButton: { borderRadius:'100rpx', fontSize:'30rpx', width: '180rpx', height: '60rpx' }, goodsList: [], // 商品列表 // 用户信息 userInfo: { receiveAddress: '陕西省西安市未央区华帝金座', receiverName: '王明', receiverPhone: '14564654551', }, btnLoading: false, // 提交按钮加载圈 orderId: '', // 订单id showSetPswModal: false, // 设置支付密码弹窗 showInputPsw: false, // 打开输入密码弹窗 showLeavePsw: false, // 打开确定放弃弹窗 }; }, onShow() { this.getLocation() }, onLoad() { this.goodsList = this.$store.state.vuex_toOrderList // 监听设置密码是否成功 uni.$once('setPswSuccess', this.setPsw) }, computed: { totalPrice() { let total = 0 this.goodsList.map(item => { total = total + item.buyQty * item.goods.sellGold }) return total } }, methods: { // 获取用户位置 getLocation() { findAddressBycustomerNo({}).then(res => { console.log(res) if (res.status == 200) { this.userInfo = res.data[0] || {} } else { this.userInfo = {} uni.showToast({ title: res.message, icon: 'none' }) } }) }, //新增/修改收货地址信息 editAddress(){ this.$u.vuex("vuex_OrderAddress",this.userInfo) uni.navigateTo({ url:"/pages/toOrder/editAddress?" }) }, // 跳转到设置支付密码页 toSetPwd () { uni.navigateTo({ url:"/pages/userCenter/userInfo/paymentPwd" }) }, // 设置密码成功, 打开输入密码弹窗 setPsw (e) { if (e.success) { this.showInputPsw = true } }, //确认放弃 canclePay() { this.showLeavePsw = false this.showInputPsw = false }, // 继续支付 payAgain () { this.showLeavePsw = false this.showInputPsw = true }, // 支付 保存订单 toSave(){ this.showSetPswModal = true return let orderGoodsList = [] this.goodsList.map((item,index)=>{ orderGoodsList[index] = { goodsNo: item.goodsNo, buyQty: item.buyQty } }) this.btnLoading = true let params = Object.assign(this.userInfo,{orderGoodsList:orderGoodsList}) console.log(orderGoodsList,params,'orderGoodsList') saveOrder(params).then(res=>{ console.log(res,'rrrrrrr') if(res.status==200) { this.orderId = res.data.id this.toPay(this.orderId) } else { this.btnLoading = false uni.showToast({ title: res.message, icon: 'none' }) } }) }, // 支付 toPay(id) { signPay({id:id}).then(res=>{ this.btnLoading = false if(res.status == 200) { // 跳转到支付完成界面 uni.navigateTo({ url:"/pages/toOrder/payFinish?id=" + this.orderId }) } else{ uni.showToast({ title: res.message, icon: 'none' }) } }) } }, } </script> <style lang="scss"> page{ height: 100%; } .cart-pages{ width: 100%; height: 100%; display: flex; flex-direction: column; .cart-bar{ background: #FFFFFF; border-bottom: 1px solid #F8F8F8; border-top: 10upx solid #F8F8F8; display: flex; align-items: center; padding:15upx 20upx; .position{ flex-grow: 1; } > view{ padding: 10upx; .address{ padding: 5upx 0; } &:last-child{ padding: 0 20upx; } } } .noAddress{ background: #FFFFFF; border-bottom: 1px solid #F8F8F8; border-top: 10upx solid #F8F8F8; display: flex; align-items: center; justify-content: space-between; padding:30upx 20upx; font-size: 30upx; } .goods-list{ padding: 20upx 0; flex-grow: 1; overflow: auto; .goods-class-box{ background: #FFFFFF; box-shadow: 1px 1px 3px #eee; margin-bottom: 20upx; } .goods-item{ padding: 20upx 40upx; display: flex; align-items: center; border-bottom: 1px solid #F8F8F8; background: #fff; &:last-child{ border: 0; } .goods-imgs{ position: relative; } .goods-info{ flex-grow: 1; padding-left: 20upx; .good-name{ font-weight: bold; word-break: break-all; } } .goods-price{ display: flex; align-items: center; justify-content: space-between; padding-top: 20upx; >view{ &:first-child{ display: flex; align-items: center; text{ color: red; font-size: 35upx; margin-right: 6upx; font-weight: bold; } } } } } } .goods-heji{ padding: 20upx 40upx; background: #FFFFFF; box-shadow: 1px 1px 3px #eee; margin-top: 20upx; >view{ display: flex; align-items: center; justify-content: space-between; padding: 10upx 0; .heji{ display: flex; align-items: center; text{ color: red; margin-right: 6upx; font-size: 35upx; font-weight: bold; } } } } .cart-submit{ padding: 20upx 30upx; background: #FFFFFF; box-shadow: 1px 1px 3px #eee; border-top: 1px solid #eee; display: flex; align-items: center; justify-content: space-between; > view{ &:first-child{ display: flex; align-items: center; text{ color: red; font-size: 40upx; margin-right: 6upx; font-weight: bold; } } } } // 支付密码弹窗 .slot-content{ padding: 30upx 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; .text-cont{ width: 100%; padding: 60upx 0; text-align: center; .num-big{ font-size: 40upx; color: red; } } .footer{ width: 80%; border-bottom: 1px solid #b1b1b1; } } } </style>