<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">{{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="toSaveOrder">确认支付</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> <u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image> </view> <view class="footer"> <input v-model="password" maxlength="30" style="text-align: center;" type="password" @confirm="toPay" placeholder="请输入支付密码" /> </view> <view class="fot-btn"> <u-button :loading="payBtn" @click="toPay" type="error" >确认支付</u-button> </view> </view> </u-popup> </view> </template> <script> import { saveOrder, signPay, existPayPwd} from '@/api/order.js' import { findAddressBycustomerNo } from '@/api/receiveAddress.js' export default { data() { return { toOrderButton: { borderRadius:'100rpx', fontSize:'30rpx', width: '200rpx', height: '80rpx' }, goodsList: [], // 商品列表 // 用户信息 userInfo: {}, btnLoading: false, // 提交按钮加载圈 orderId: '', // 订单id password: '', // 支付密码 showSetPswModal: false, // 设置支付密码弹窗 showInputPsw: false, // 打开输入密码弹窗 showLeavePsw: false, // 打开确定放弃弹窗 payBtn: false }; }, onShow() { this.getLocation() }, onLoad() { this.goodsList = this.$store.state.vuex_toOrderList // console.log(this.goodsList,'llllllllllll') // 监听设置密码是否成功 uni.$once('setPswSuccess', this.setPsw) }, computed: { // 总计 totalPrice() { let total = 0 this.goodsList.map(item => { total = total + item.buyQty * item.goods.sellGold }) return total }, // 收货地址 receiveAddress() { if (this.userInfo.receiveAreasName) { let area = this.userInfo.receiveAreasName.split(',') return area[0]+area[1]+area[2]+this.userInfo.receiveAddress } } }, 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/smsVerification" }) }, // 设置密码成功, 打开输入密码弹窗 setPsw (e) { if (e.success) { this.showInputPsw = true } }, //确认放弃 canclePay() { this.showLeavePsw = false this.showInputPsw = false this.password = '' // 跳转到订单列表 uni.redirectTo({ url:"/pages/order/order" }) }, // 继续支付 payAgain () { this.showLeavePsw = false this.showInputPsw = true }, // 支付 校验用户是否设置过支付密码 toCheckPwd(){ // 判断用户是否设置过支付密码 existPayPwd().then(res=>{ console.log(res,'rrrrrr') if(res.status == 200) { // 设置过支付密码,输入密码 if(res.data) { this.showInputPsw = true } else { // 没设置过支付密码,提示设置密码 this.showSetPswModal = true } } else { uni.showToast({ title: res.message, icon: 'none' }) } }) }, // 支付 保存订单 toSaveOrder () { if (!this.userInfo.receiveAddress) { uni.showToast({ title: '请先输入收货地址', icon: 'none' }) return false } // 已生成订单 if(this.orderId) { // 校验用户是否设置过支付密码 this.toCheckPwd() } else { this.btnLoading = true let orderGoodsList = [] this.goodsList.map((item,index)=>{ orderGoodsList[index] = { goodsNo: item.goodsNo, buyQty: item.buyQty } }) let params = { receiveAddress: this.receiveAddress, receiverName: this.userInfo.receiverName, receiverPhone: this.userInfo.receiverPhone, orderGoodsList: orderGoodsList, } saveOrder(params).then(res=>{ console.log(res,'rrrrrrr') this.btnLoading = false if(res.status==200) { this.orderId = res.data.id // 校验用户是否设置过支付密码 this.toCheckPwd() // 刷新购物车 uni.$emit('getCartList') } else { uni.showToast({ title: res.message, icon: 'none' }) } }) } }, // 支付 toPay() { if (this.password === '') { uni.showToast({ title: '请先输入支付密码', icon: 'none' }) return false } let params = { payPwd: this.password, id: this.orderId } this.payBtn = true signPay(params).then(res=>{ this.payBtn = false if(res.status == 200) { // 跳转到支付完成界面 uni.redirectTo({ url:"/pages/toOrder/payFinish?id=" + this.orderId }) } else{ this.password = '' 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; display: flex; align-items: center; justify-content: center; .num-big{ font-size: 40upx; color: red; font-weight: 600; margin-right: 6rpx; } } .footer{ width: 80%; border-bottom: 1px solid #b1b1b1; margin-bottom: 30upx; } } } </style>