123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466 |
- <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="success" @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" :mask-close-able="false" negative-top="300" 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"
- :focus="focus"
- style="text-align: center;"
- type="password"
- @confirm="toPay"
- placeholder="请输入支付密码" />
- </view>
- <view class="fot-btn">
- <u-button :loading="payBtn" @click="toPay" type="success" >确认支付</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,
- orderForm: '', // 商品下单来源,商品详情或购物车
- focus: false
- };
- },
- onShow() {
- this.getLocation()
- },
- onLoad(opts) {
- this.orderForm = opts.orderForm
- 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
- },
- // 收货地址
- 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 = {}
- }
- })
- },
- //新增/修改收货地址信息
- 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
- setTimeout(()=>{
- this.focus = true
- },300)
- }
- },
- //确认放弃
- canclePay() {
- this.showLeavePsw = false
- this.showInputPsw = false
- this.focus = false
- this.password = ''
- // 跳转到订单列表
- uni.redirectTo({
- url:"/pages/order/order"
- })
- },
- // 继续支付
- payAgain () {
- this.focus = false
- this.showLeavePsw = false
- this.showInputPsw = true
- setTimeout(()=>{
- this.focus = true
- },300)
- },
- // 支付 校验用户是否设置过支付密码
- toCheckPwd(){
- // 判断用户是否设置过支付密码
- existPayPwd().then(res=>{
- console.log(res,'rrrrrr')
- if(res.status == 200) {
- // 设置过支付密码,输入密码
- if(res.data) {
- this.showInputPsw = true
- setTimeout(()=>{
- this.focus = true
- },300)
- } else {
- // 没设置过支付密码,提示设置密码
- this.showSetPswModal = true
- }
- }
- })
- },
- // 支付 保存订单
- 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,
- orderForm: this.orderForm,
- payGold: this.totalPrice
- }
- 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')
- }
- })
- }
- },
- // 支付
- 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 = ''
- }
- })
- }
- },
- }
- </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;
- word-break: break-all;
- }
- &: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>
|