确认订单页面

version/0412
syt 9 months ago
parent 0483f38591
commit 8433d9fc27
  1. 16
      pages/cart/index.vue
  2. 613
      pages/sureOrder/index.vue
  3. 6
      pages/user/index.vue

@ -43,17 +43,8 @@
<text class="value">{{ item.goods.skuInfo.goods_price }}</text> <text class="value">{{ item.goods.skuInfo.goods_price }}</text>
</view> </view>
<view class="stepper"> <view class="stepper">
<u-number-box :min="1" class='countNumber' :modelValue="item.goods_num" :step="1" <u-number-box :min="1" class='countNumber' :modelValue="item.goods_num" :step="1" @change="onChangeStepper($event, item)" />
@change="onChangeStepper($event, item)" />
<!-- <view class="del">
-
</view>
<view class="allNum">
{{item.goods_num}}
</view>
<view class="add">
+
</view> -->
</view> </view>
</view> </view>
</view> </view>
@ -599,12 +590,14 @@
} }
.stepper { .stepper {
flex: 1;
display: flex; display: flex;
// width: 154rpx; // width: 154rpx;
height: 56rpx; height: 56rpx;
background: #FFFFFF; background: #FFFFFF;
border-radius: 76rpx 76rpx 76rpx 76rpx; border-radius: 76rpx 76rpx 76rpx 76rpx;
opacity: 1; opacity: 1;
margin-right: 20rpx;
// border: 2rpx solid #E6E6E6; // border: 2rpx solid #E6E6E6;
.del { .del {
@ -689,6 +682,7 @@
padding-right: 30rpx; padding-right: 30rpx;
.goods-price { .goods-price {
flex: 1;
vertical-align: bottom; vertical-align: bottom;
color: $main-bg; color: $main-bg;

@ -1,28 +1,30 @@
<template> <template>
<view class="sureOrder"> <view class="sureOrder">
<view> <view>
<u-navbar title="确认订单" :border-bottom="false" title-color="#333" <u-navbar title="确认订单" :border-bottom="false" title-color="#333" :background="background"></u-navbar>
:background="background"></u-navbar>
</view> </view>
<view class="buyType"> <view class="buyType">
<view class="toDoor" @click="choseType('sm')" <view class="toDoor" :class="buyType=='sm'?'':'toDoor-dis'" @click="choseType('sm')">
:style="{'background':buyType=='sm'?'#fff':'rgba(255, 255, 255, 0.57)','height':buyType=='zq'?'88rpx':'78rpx'}">
送货上门 送货上门
</view> </view>
<view class="bySelf" @click="choseType('zq')" <view class="toDoor" :class="buyType=='zq'?'':'toDoor-dis'" @click="choseType('zq')">
:style="{'background':buyType=='zq'?'#fff':'rgba(255, 255, 255, 0.57)','height':buyType=='zq'?'88rpx':'78rpx'}">
到店自取 到店自取
</view> </view>
<view class="toDoor-on" :style="{'left': buyType=='sm'?'0':'345rpx'}">{{buyType=='zq'?'到店自取':'送货上门'}}</view>
</view> </view>
<view class="address" v-if="buyType!='sm'"> <view class="getSelf" >
<view class="address" v-if="buyType=='sm'">
<view class="addAddress"> <view class="addAddress">
请点击添加收货地址 <view class="tip" v-if="true">请点击添加收货地址</view>
<view class="info" v-else>
<view class="name"></view>
<view class="detail"></view>
</view>
</view> </view>
<view class="leftImg"> <view class="leftImg">
<image src="/static/order/left.png" mode=""></image> <image :src="$picUrl+'/static/order/left.png'"></image>
</view> </view>
</view> </view>
<view class="getSelf">
<view class="shopAddress" v-if="buyType=='zq'"> <view class="shopAddress" v-if="buyType=='zq'">
<view class="youTime"> <view class="youTime">
花梨服务站 花梨服务站
@ -33,7 +35,7 @@
</view> </view>
</view> </view>
<view class="addressDetail"> <view class="addressDetail">
{{addressInfo.name}} {{addressInfo.region.province +addressInfo.region.city+addressInfo.region.region}}
</view> </view>
<view class="lookMap" v-if="buyType=='zq'"> <view class="lookMap" v-if="buyType=='zq'">
<image src="/static/user/address.png" mode="" class="addressIcon"></image> <image src="/static/user/address.png" mode="" class="addressIcon"></image>
@ -51,7 +53,7 @@
取件人 取件人
</view> </view>
<view class="name"> <view class="name">
{{addressInfo.name}}
</view> </view>
</view> </view>
<view class="pickPeople"> <view class="pickPeople">
@ -67,7 +69,7 @@
预留电话 预留电话
</view> </view>
<view class="name"> <view class="name">
{{addressInfo.phone}}
</view> </view>
</view> </view>
<view class="pickPeople"> <view class="pickPeople">
@ -94,7 +96,7 @@
<switch /> <switch />
</view> </view>
</view> </view>
<!-- <view class="time"> <view class="time">
<view class="youTime"> <view class="youTime">
预计到货时间 预计到货时间
</view> </view>
@ -103,8 +105,8 @@
<image src="/static/order/left.png" mode=""></image> <image src="/static/order/left.png" mode=""></image>
</view> </view>
</view> --> </view>
<!-- <view class="time"> <view class="time">
<view class="youTime"> <view class="youTime">
您期待的收货时间 您期待的收货时间
</view> </view>
@ -112,7 +114,7 @@
请选择 请选择
<image src="/static/order/left.png" mode=""></image> <image src="/static/order/left.png" mode=""></image>
</view> </view>
</view> --> </view>
<view class="goodsDetail"> <view class="goodsDetail">
<view class="goodsType"> <view class="goodsType">
<image src="/static/order/bag.png" mode="" class="bag"></image> <image src="/static/order/bag.png" mode="" class="bag"></image>
@ -235,242 +237,352 @@
</template> </template>
<script> <script>
import * as order from '@/api/checkout.js' import * as Verify from '@/utils/verify'
// import img from "@/static/member/head.png" import * as CheckoutApi from '@/api/checkout'
import * as storeShop from '@/api/shop.js' import * as SharpCheckoutApi from '@/api/sharp/checkout'
import * as address from '@/api/address.js' import * as BargainCheckoutApi from '@/api/bargain/checkout'
import * as cashier from '@/api/cashier/index.js' import * as GrouponCheckoutApi from '@/api/groupon/checkout'
import * as CouponApi from '@/api/coupon' import { CouponTypeEnum } from '@/common/enum/coupon'
import { import { OrderTypeEnum, DeliveryTypeEnum } from '@/common/enum/order'
Wechat
} from '@/core/payment' const CouponColors = ['red', 'blue', 'violet', 'yellow']
// modeapi
const getCheckoutApi = (mode) => {
const apiEnum = {
buyNow: CheckoutApi,
cart: CheckoutApi,
bargain: BargainCheckoutApi,
sharp: SharpCheckoutApi,
groupon: GrouponCheckoutApi
}
return apiEnum[mode]
}
// modeparam
const getModeParam = (mode, options) => {
const param = {}
// :
if (mode === 'buyNow') {
param.goodsId = options.goodsId
param.goodsNum = options.goodsNum
param.goodsSkuId = options.goodsSkuId
}
// :
if (mode === 'cart') {
param.cartIds = options.cartIds
}
// :
if (mode === 'bargain') {
param.taskId = options.taskId
param.goodsSkuId = options.goodsSkuId
}
// :
if (mode === 'sharp') {
param.activeTimeId = options.activeTimeId
param.sharpGoodsId = options.sharpGoodsId
param.goodsSkuId = options.goodsSkuId
param.goodsNum = options.goodsNum
}
// :
if (mode === 'groupon') {
param.grouponGoodsId = options.grouponGoodsId
param.taskId = options.taskId
param.goodsSkuId = options.goodsSkuId
param.goodsNum = options.goodsNum
param.stepPeople = options.stepPeople
}
return param
}
export default { export default {
data() { data() {
return { return {
//
OrderTypeEnum,
DeliveryTypeEnum,
CouponTypeEnum,
//
options: {},
//
isShowTab: false,
DeliveryTypeEnum,
curDelivery: null,
//
selectedShopId: 0, // ID
linkman: '', //
phone: '', //
//
CouponColors,
//
selectCouponId: 0,
// 使
isUsePoints: false,
//
remark: '', remark: '',
payType: 'weChat', // submit
buyType: 'sm', disabled: false,
background: { //
background: 'url(https://www.royaum.com.cn/static/member/head.png) center top no-repeat', showPoints: false,
backgroundSize: '100% auto', //
}, showPopup: false,
goodsInfo: {}, // (api)
shopInfo: {}, order: {
addressList: [], //
addressInfo: {}, goodsList: [],
payMethList: [], //
orderID: '',
couponList: [], couponList: [],
} //
existAddress: false,
//
address: null,
//
existAddress: false,
//
isIntraRegion: true,
//
hasError: false,
//
errorMsg: '',
}, },
onLoad(options) { //
console.log(options, 'kkkkkk') personal: {},
// if (options.goodsInfo) { //
let goodsInfo = options.goodsID; setting: {}
console.log(goodsInfo, '5555555', typeof(goodsInfo)); }
this.goodsInfo = JSON.parse(decodeURIComponent(goodsInfo))
console.log(this.goodsInfo, '666666');
// }
}, },
onShow() {
this.getShopInfo()
this.getAddressList();
this.orderSubmit()
this.getCoupon()
}, /**
methods: { * 生命周期函数--监听页面加载
getCoupon() { */
const that =this onLoad(options) {
let param = { this.options = options;
dataType:'isUsable' console.log(options)
} // :
CouponApi.myCouponList(param) uni.$on('syncSelectedId', selectedId => {
.then(res => { this.selectedShopId = selectedId
that.couponList = res.data.list.data
})
.finally()
},
choseCoupon() {
//
uni.navigateTo({
url: '/pages/news/coupon/list?chose=true',
}) })
}, },
chosePayType(item) {
this.payType = item.method /**
* 生命周期函数--监听页面的卸载
*/
onUnload() {
// :
uni.$off('syncSelectedId')
}, },
choseType(val) {
this.buyType = val /**
* 生命周期函数--监听页面显示
*/
onShow() {
//
this.getOrderData()
}, },
getDefaultAddress() {
const that = this methods: {
return new Promise((resolve, reject) => {
address.defaultId().then(res => { //
if (res.status == 200) { getOrderData() {
for (var i = 0; i < that.addressList.length; i++) { const app = this
if (res.data.defaultId == that.addressList[i].address_id) { const { options: { mode } } = app
that.addressInfo = that.addressList[i] //
console.log(that.addressInfo, '获取收货地址') const params = app.getRequestParam()
} // api
} getCheckoutApi(mode)
} .order(mode, params)
}) .then(result => app.initData(result.data))
.catch() .catch(err => err)
})
}, },
getAddressList() {
const that = this //
return new Promise((resolve, reject) => { initData({ order, setting, personal }) {
address.list().then(res => { const app = this
if (res.status == 200) { app.order = order
that.addressList = res.data.list app.personal = personal
that.getDefaultAddress() app.setting = setting
//
if (order.hasError) {
app.showToast(order.errorMsg, 3000)
}
//
app.curDelivery = order.delivery
//
app.isShowTab = setting.deliveryType.length > 1
//
if (app.linkman === '') {
app.linkman = order.lastExtract.linkman
}
if (app.phone === '') {
app.phone = order.lastExtract.phone
} }
})
.catch()
})
}, },
getShopInfo() {
return new Promise((resolve, reject) => {
storeShop.list().then(res => {
console.log(res, '获取店铺信息')
})
.catch()
})
// api
getRequestParam() {
const app = this
const { options } = app
//
const modeParam = getModeParam(options.mode, options)
// ()
const orderParam = {
delivery: app.curDelivery || 0,
shopId: app.selectedShopId || 0,
couponId: app.selectCouponId || 0,
isUsePoints: app.isUsePoints ? 1 : 0,
}
return { ...orderParam, ...modeParam }
}, },
orderSubmit() {
const that = this; //
console.log(that.goodsInfo, '55555') handleSwichDelivery(key) {
let params = { this.curDelivery = key
mode: 'buyNow', this.getOrderData()
delivery: '10',
couponId: '',
isUsePoints: 0,
remark: that.remark,
shopId: '',
linkman: '',
phone: '',
goodsId: that.goodsInfo.goods_id,
goodsNum: 1,
goodsSkuId: that.goodsInfo.skuList[0].goods_sku_id,
cartIds: ''
}
order.submit('buyNow', params)
.then(res => {
if (res.status == 200) {
that.orderId = res.data.orderId
that.getOrderInfoPay(res.data.orderId)
}
})
.catch()
}, },
getOrderInfoPay(val) {
cashier.orderInfo(val).then(res => { //
if (res.status == 200) { handleShowPoints() {
this.payMethList = res.data.paymentMethods this.showPoints = true
}
})
.catch()
}, },
onShowSuccess(res) {
this.$toast(message || '订单支付成功') //
uni.navigateTo({ handleShowPopup() {
url: '/pages/news/recycling/orderList' this.showPopup = true
})
}, },
orderPay() {
const that = this //
if (that.payType == 'balance') { handleSelectCoupon(index) {
that.payBanlance() const app = this
const { couponList } = app.order
//
const couponItem = couponList[index]
//
if (!couponItem.is_apply) {
app.showToast(couponItem.not_apply_info)
return return
} }
cashier.orderPay(that.orderId).then(res => { // id
if (res.status == 200) { app.selectCouponId = couponItem.user_coupon_id
//
app.getOrderData()
//
app.showPopup = false
},
let paymentData = res.data.payment // 使
Wechat.payment({ handleNotUseCoupon() {
orderKey: res.data.payment.out_trade_no, const app = this
...paymentData app.selectCouponId = 0
}) //
.then((result) => { app.getOrderData()
console.log(result) //
that.onShowSuccess(result) app.showPopup = false
}) },
.catch(err => {
console.log(err)
})
//
onSelectAddress() {
this.$navTo('pages/address/index', { from: 'checkout' })
},
} //
}) onSelectExtractPoint() {
.catch() this.$navTo('pages/shop/extract', { selectedId: this.selectedShopId })
},
//
onTargetGoods(goodsId) {
this.$navTo('pages/goods/detail', { goodsId })
}, },
payBanlance() {
const that = this
let params = {
extra: {},
method: 'balance',
client: 'weChat'
}
cashier.orderPay(that.orderID, params).then(res => {
that.$toast(res.message)
if (res.status == 200) {
//
onSubmitOrder() {
const app = this
if (app.disabled) {
return false
}
//
if (!app.onVerifyFrom()) {
return false
}
//
app.disabled = true
// api
getCheckoutApi(app.options.mode)
.submit(app.options.mode, app.getFormData())
.then(result => {
// :
const orderId = result.data.orderId
setTimeout(() => { setTimeout(() => {
uni.navigateTo({ this.$navTo('pages/checkout/cashier/index', { orderId }, 'redirectTo')
url: '/pages/news/recycling/orderList' }, 100)
}) })
}, 1000) .catch(res => app.showToast(res.errMsg, 3000))
.finally(() => setTimeout(() => app.disabled = false, 800))
},
} // (1)
}) navToMyOrder() {
.catch() setTimeout(() => {
this.$navTo('pages/order/index', {}, 'redirectTo')
}, 1000)
},
//
getFormData() {
const app = this
const { options } = app
//
const form = {
delivery: app.curDelivery,
couponId: app.selectCouponId || 0,
shopId: app.selectedShopId || 0,
linkman: app.linkman,
phone: app.phone,
isUsePoints: app.isUsePoints ? 1 : 0,
remark: app.remark || '',
}
//
const modeParam = getModeParam(options.mode, options)
return { ...form, ...modeParam }
}, },
// getOrderInfo() {
// const that = this //
// let params = { onVerifyFrom() {
// orderId: 10202, const app = this
// client: 'wechat' if (app.hasError) {
// } app.showToast(app.errorMsg, 3000)
// cashier.orderInfo(params) return false
// .then(res => {
// if (res.status == 200) {
// that.payOrderInfo()
// }
// })
// .catch()
// },
payOrderInfo() {
const that = this
let form = {
client: 'wechat',
method: 'wechat',
extra: {}
}
cashier.orderInfo(10202, form)
.then(res => {
if (res.status == 200) {
let paymentData = res.data.payment
Wechat.payment({
orderKey: res.data.payment.out_trade_no,
...paymentData
})
.then((result) => {
console.log(result)
})
.catch(err => {
console.log(err)
})
} }
}) //
.catch() if (app.curDelivery == DeliveryTypeEnum.EXTRACT.value) {
}, app.linkman = app.linkman.trim()
app.phone = app.phone.trim()
if (app.selectedShopId <= 0) {
app.showToast('请选择自提的门店')
return false
}
if (Verify.isEmpty(app.linkman)) {
app.showToast('请填写自提联系人')
return false
}
if (Verify.isEmpty(app.phone)) {
app.showToast('请填写自提联系电话')
return false
}
if (!Verify.isPhone(app.phone)) {
app.showToast('请输入正确的联系电话')
return false
}
}
return true
}, },
// toast
showToast(title, duration = 2000) {
this.$refs.uToast.show({ title, duration })
}
}
} }
</script> </script>
@ -479,43 +591,51 @@
width: 750rpx; width: 750rpx;
min-height: 750rpx; min-height: 750rpx;
padding-bottom: 120rpx; padding-bottom: 120rpx;
background: url('https://www.royaum.com.cn/static/member/head.png') center top no-repeat; background: url('https://www.royaum.com.cn/static/news/login-bg.png') center top no-repeat;
background-size: 100% auto; background-size: 100% auto;
} }
.buyType { .buyType {
display: flex; width: 700rpx;
margin: 70rpx 0 0 26rpx; margin: 30rpx auto 0;
position: relative;
.toDoor {
width: 348rpx;
height: 88rpx; height: 88rpx;
background-color: #fff; .toDoor {
width: 50%;
height: 74rpx;
background-color: rgba(255, 255, 255, 0.5);
font-size: 28rpx; font-size: 28rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500; font-weight: 500;
color: #000000; color: #606060;
line-height: 88rpx; line-height: 74rpx;
text-align: center; text-align: center;
} float: left;
margin-top: 14rpx;
.bySelf { float: left;
&-on{
width: 350rpx; width: 350rpx;
height: 74rpx; height: 88rpx;
background-color: rgba(255, 255, 255, 0.570000); background-color: #FFF;
line-height: 74rpx;
text-align: center; text-align: center;
font-size: 24rpx; font-size: 34rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 400; font-weight: 400;
color: #606060; color: #000;
line-height: 74rpx; line-height: 88rpx;
position: relative; position: absolute;
top: 14rpx; bottom: 0;
left: 0;
z-index: 2;
border-radius: 10rpx 10rpx 0 0;
}
&-dis{
border-radius: 10rpx 10rpx 0 0;
}
} }
} }
.getSelf { .getSelf {
width: 700rpx;
margin: 0 auto;
.shopAddress { .shopAddress {
display: flex; display: flex;
align-items: center; align-items: center;
@ -541,14 +661,11 @@
} }
} }
} }
background-image: url('https://www.royaum.com.cn/static/order/map.png');
margin-left: 26rpx; background-size: 100%;
background-image: url('../../static/order/map.png'); height: 160rpx;
background-size: 100% 100%; padding: 14rpx 46rpx 0 32rpx;
width: 694rpx; box-sizing: border-box;
height: 246rpx;
padding:14rpx 46rpx 0 32rpx;
.addressDetail { .addressDetail {
height: 34rpx; height: 34rpx;
font-size: 24rpx; font-size: 24rpx;

@ -60,7 +60,7 @@
</view> </view>
</view> </view>
</view> </view>
<view class="newplus" v-if="isLogin == false || userInfo.user_type==20"> <view class="newplus" v-if="isLogin == false || userInfo.user_type == 10">
<view class="memVip" @click="goMember('hy')"> <view class="memVip" @click="goMember('hy')">
<!-- <view class="vipLine"> <!-- <view class="vipLine">
<image :src="$picUrl+'/static/user/vip.png'" class="vipIcon"></image> <image :src="$picUrl+'/static/user/vip.png'" class="vipIcon"></image>
@ -148,12 +148,12 @@
{{actionCountsInfo.take_goods_number?actionCountsInfo.take_goods_number:0}} {{actionCountsInfo.take_goods_number?actionCountsInfo.take_goods_number:0}}
</view> </view>
<view class="info"> <view class="info">
{{isLogin==false || userInfo.user_type <= 20?'发货记录':'提货记录'}} 提货记录
</view> </view>
</view> </view>
<view class="listItem" @click="goJump('/pages/news/coupon/list')"> <view class="listItem" @click="goJump('/pages/news/coupon/list')">
<view class="num"> <view class="num">
{{actionCountsInfo.view_number?actionCountsInfo.view_number:0}} {{actionCountsInfo.coupon_number?actionCountsInfo.coupon_number:0}}
</view> </view>
<view class="info"> <view class="info">
优惠券 优惠券

Loading…
Cancel
Save