wangmingchuan
/
yanzong_qianduan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

确认订单页面

Browse Source
version/0412
syt 9 months ago
parent 0483f38591
commit 8433d9fc27
3 changed files with 421 additions and 310 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 16
      pages/cart/index.vue
  2. 613
      pages/sureOrder/index.vue
  3. 6
      pages/user/index.vue

16
pages/cart/index.vue
Unescape View File

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

613
pages/sureOrder/index.vue
Unescape View File

@ -1,28 +1,30 @@
<template>
<view class="sureOrder">
<view>
<u-navbar title="确认订单" :border-bottom="false" title-color="#333"
:background="background"></u-navbar>
<u-navbar title="确认订单" :border-bottom="false" title-color="#333" :background="background"></u-navbar>
</view>
<view class="buyType">
<view class="toDoor" @click="choseType('sm')"
:style="{'background':buyType=='sm'?'#fff':'rgba(255, 255, 255, 0.57)','height':buyType=='zq'?'88rpx':'78rpx'}">
<view class="toDoor" :class="buyType=='sm'?'':'toDoor-dis'" @click="choseType('sm')">
送货上门
</view>
<view class="bySelf" @click="choseType('zq')"
:style="{'background':buyType=='zq'?'#fff':'rgba(255, 255, 255, 0.57)','height':buyType=='zq'?'88rpx':'78rpx'}">
<view class="toDoor" :class="buyType=='zq'?'':'toDoor-dis'" @click="choseType('zq')">
到店自取
</view>
<view class="toDoor-on" :style="{'left': buyType=='sm'?'0':'345rpx'}">{{buyType=='zq'?'到店自取':'送货上门'}}</view>
</view>
<view class="address" v-if="buyType!='sm'">
<view class="getSelf" >
<view class="address" v-if="buyType=='sm'">
<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 class="leftImg">
<image src="/static/order/left.png" mode=""></image>
<image :src="$picUrl+'/static/order/left.png'"></image>
</view>
</view>
<view class="getSelf">
<view class="shopAddress" v-if="buyType=='zq'">
<view class="youTime">
花梨服务站
@ -33,7 +35,7 @@
</view>
</view>
<view class="addressDetail">
{{addressInfo.name}} {{addressInfo.region.province +addressInfo.region.city+addressInfo.region.region}}
</view>
<view class="lookMap" v-if="buyType=='zq'">
<image src="/static/user/address.png" mode="" class="addressIcon"></image>
@ -51,7 +53,7 @@
取件人
</view>
<view class="name">
{{addressInfo.name}}
</view>
</view>
<view class="pickPeople">
@ -67,7 +69,7 @@
预留电话
</view>
<view class="name">
{{addressInfo.phone}}
</view>
</view>
<view class="pickPeople">
@ -94,7 +96,7 @@
<switch />
</view>
</view>
<!-- <view class="time">
<view class="time">
<view class="youTime">
预计到货时间
</view>
@ -103,8 +105,8 @@
<image src="/static/order/left.png" mode=""></image>
</view>
</view> -->
<!-- <view class="time">
</view>
<view class="time">
<view class="youTime">
您期待的收货时间
</view>
@ -112,7 +114,7 @@
请选择
<image src="/static/order/left.png" mode=""></image>
</view>
</view> -->
</view>
<view class="goodsDetail">
<view class="goodsType">
<image src="/static/order/bag.png" mode="" class="bag"></image>
@ -235,242 +237,352 @@
</template>
<script>
import * as order from '@/api/checkout.js'
// import img from "@/static/member/head.png"
import * as storeShop from '@/api/shop.js'
import * as address from '@/api/address.js'
import * as cashier from '@/api/cashier/index.js'
import * as CouponApi from '@/api/coupon'
import {
Wechat
} from '@/core/payment'
import * as Verify from '@/utils/verify'
import * as CheckoutApi from '@/api/checkout'
import * as SharpCheckoutApi from '@/api/sharp/checkout'
import * as BargainCheckoutApi from '@/api/bargain/checkout'
import * as GrouponCheckoutApi from '@/api/groupon/checkout'
import { CouponTypeEnum } from '@/common/enum/coupon'
import { OrderTypeEnum, DeliveryTypeEnum } from '@/common/enum/order'
const CouponColors = ['red', 'blue', 'violet', 'yellow']
// 根据指定mode获取对应的api类
const getCheckoutApi = (mode) => {
const apiEnum = {
buyNow: CheckoutApi,
cart: CheckoutApi,
bargain: BargainCheckoutApi,
sharp: SharpCheckoutApi,
groupon: GrouponCheckoutApi
}
return apiEnum[mode]
}
// 根据指定mode获取param
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 {
data() {
return {
// 枚举类
OrderTypeEnum,
DeliveryTypeEnum,
CouponTypeEnum,
// 当前页面参数
options: {},
// 配送方式
isShowTab: false,
DeliveryTypeEnum,
curDelivery: null,
// 自提信息
selectedShopId: 0, // 选择的门店ID
linkman: '', // 自提联系人
phone: '', // 自提联系电话
// 优惠券颜色组
CouponColors,
// 选择的优惠券
selectCouponId: 0,
// 是否使用积分抵扣
isUsePoints: false,
// 买家留言
remark: '',
payType: 'weChat',
buyType: 'sm',
background: {
background: 'url(https://www.royaum.com.cn/static/member/head.png) center top no-repeat',
backgroundSize: '100% auto',
},
goodsInfo: {},
shopInfo: {},
addressList: [],
addressInfo: {},
payMethList: [],
orderID: '',
// 禁用submit按钮
disabled: false,
// 是否显示积分说明
showPoints: false,
// 是否显示优惠券弹窗
showPopup: false,
// 订单信息 (从后端api中获取)
order: {
// 商品列表
goodsList: [],
// 优惠券列表
couponList: [],
}
// 是否存在收货地址
existAddress: false,
// 默认收货地址
address: null,
// 是否存在收货地址
existAddress: false,
// 当前用户收货城市是否存在配送规则中
isIntraRegion: true,
// 是否存在错误
hasError: false,
// 错误信息
errorMsg: '',
},
onLoad(options) {
console.log(options, 'kkkkkk')
// if (options.goodsInfo) {
let goodsInfo = options.goodsID;
console.log(goodsInfo, '5555555', typeof(goodsInfo));
this.goodsInfo = JSON.parse(decodeURIComponent(goodsInfo))
console.log(this.goodsInfo, '666666');
// }
// 个人信息
personal: {},
// 商城设置
setting: {}
}
},
onShow() {
this.getShopInfo()
this.getAddressList();
this.orderSubmit()
this.getCoupon()
},
methods: {
getCoupon() {
const that =this
let param = {
dataType:'isUsable'
}
CouponApi.myCouponList(param)
.then(res => {
that.couponList = res.data.list.data
})
.finally()
},
choseCoupon() {
// 选择优惠券
uni.navigateTo({
url: '/pages/news/coupon/list?chose=true',
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.options = options;
console.log(options)
// 注册全局事件订阅: 选择自提门店
uni.$on('syncSelectedId', selectedId => {
this.selectedShopId = selectedId
})
},
chosePayType(item) {
this.payType = item.method
/**
* 生命周期函数--监听页面的卸载
*/
onUnload() {
// 卸载全局事件订阅: 选择自提门店
uni.$off('syncSelectedId')
},
choseType(val) {
this.buyType = val
/**
* 生命周期函数--监听页面显示
*/
onShow() {
// 获取当前订单信息
this.getOrderData()
},
getDefaultAddress() {
const that = this
return new Promise((resolve, reject) => {
address.defaultId().then(res => {
if (res.status == 200) {
for (var i = 0; i < that.addressList.length; i++) {
if (res.data.defaultId == that.addressList[i].address_id) {
that.addressInfo = that.addressList[i]
console.log(that.addressInfo, '获取收货地址')
}
}
}
})
.catch()
})
methods: {
// 获取订单数据
getOrderData() {
const app = this
const { options: { mode } } = app
// 请求的参数
const params = app.getRequestParam()
// 请求api
getCheckoutApi(mode)
.order(mode, params)
.then(result => app.initData(result.data))
.catch(err => err)
},
getAddressList() {
const that = this
return new Promise((resolve, reject) => {
address.list().then(res => {
if (res.status == 200) {
that.addressList = res.data.list
that.getDefaultAddress()
// 初始化数据
initData({ order, setting, personal }) {
const app = this
app.order = order
app.personal = personal
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')
let params = {
mode: 'buyNow',
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()
// 切换配送方式
handleSwichDelivery(key) {
this.curDelivery = key
this.getOrderData()
},
getOrderInfoPay(val) {
cashier.orderInfo(val).then(res => {
if (res.status == 200) {
this.payMethList = res.data.paymentMethods
}
})
.catch()
// 显示积分说明
handleShowPoints() {
this.showPoints = true
},
onShowSuccess(res) {
this.$toast(message || '订单支付成功')
uni.navigateTo({
url: '/pages/news/recycling/orderList'
})
// 显示优惠券弹窗
handleShowPopup() {
this.showPopup = true
},
orderPay() {
const that = this
if (that.payType == 'balance') {
that.payBanlance()
// 选择优惠券
handleSelectCoupon(index) {
const app = this
const { couponList } = app.order
// 当前选择的优惠券
const couponItem = couponList[index]
// 判断是否在适用范围
if (!couponItem.is_apply) {
app.showToast(couponItem.not_apply_info)
return
}
cashier.orderPay(that.orderId).then(res => {
if (res.status == 200) {
// 记录选中的优惠券id
app.selectCouponId = couponItem.user_coupon_id
// 重新获取订单信息
app.getOrderData()
// 隐藏优惠券弹层
app.showPopup = false
},
let paymentData = res.data.payment
Wechat.payment({
orderKey: res.data.payment.out_trade_no,
...paymentData
})
.then((result) => {
console.log(result)
that.onShowSuccess(result)
})
.catch(err => {
console.log(err)
})
// 不使用优惠券
handleNotUseCoupon() {
const app = this
app.selectCouponId = 0
// 重新获取订单信息
app.getOrderData()
// 隐藏优惠券弹层
app.showPopup = false
},
// 快递配送：选择收货地址
onSelectAddress() {
this.$navTo('pages/address/index', { from: 'checkout' })
},
}
})
.catch()
// 上门自提：选择自提点
onSelectExtractPoint() {
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(() => {
uni.navigateTo({
url: '/pages/news/recycling/orderList'
this.$navTo('pages/checkout/cashier/index', { orderId }, 'redirectTo')
}, 100)
})
}, 1000)
.catch(res => app.showToast(res.errMsg, 3000))
.finally(() => setTimeout(() => app.disabled = false, 800))
},
}
})
.catch()
// 跳转到我的订单(等待1秒)
navToMyOrder() {
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 = {
// orderId: 10202,
// client: 'wechat'
// }
// cashier.orderInfo(params)
// .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)
})
// 表单验证
onVerifyFrom() {
const app = this
if (app.hasError) {
app.showToast(app.errorMsg, 3000)
return false
}
})
.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>
@ -479,43 +591,51 @@
width: 750rpx;
min-height: 750rpx;
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;
}
.buyType {
display: flex;
margin: 70rpx 0 0 26rpx;
.toDoor {
width: 348rpx;
width: 700rpx;
margin: 30rpx auto 0;
position: relative;
height: 88rpx;
background-color: #fff;
.toDoor {
width: 50%;
height: 74rpx;
background-color: rgba(255, 255, 255, 0.5);
font-size: 28rpx;
font-family: PingFang SC, PingFang SC;
font-weight: 500;
color: #000000;
line-height: 88rpx;
color: #606060;
line-height: 74rpx;
text-align: center;
}
.bySelf {
float: left;
margin-top: 14rpx;
float: left;
&-on{
width: 350rpx;
height: 74rpx;
background-color: rgba(255, 255, 255, 0.570000);
line-height: 74rpx;
height: 88rpx;
background-color: #FFF;
text-align: center;
font-size: 24rpx;
font-family: PingFang SC, PingFang SC;
font-size: 34rpx;
font-weight: 400;
color: #606060;
line-height: 74rpx;
position: relative;
top: 14rpx;
color: #000;
line-height: 88rpx;
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
border-radius: 10rpx 10rpx 0 0;
}
&-dis{
border-radius: 10rpx 10rpx 0 0;
}
}
}
.getSelf {
width: 700rpx;
margin: 0 auto;
.shopAddress {
display: flex;
align-items: center;
@ -541,14 +661,11 @@
}
}
}
margin-left: 26rpx;
background-image: url('../../static/order/map.png');
background-size: 100% 100%;
width: 694rpx;
height: 246rpx;
padding:14rpx 46rpx 0 32rpx;
background-image: url('https://www.royaum.com.cn/static/order/map.png');
background-size: 100%;
height: 160rpx;
padding: 14rpx 46rpx 0 32rpx;
box-sizing: border-box;
.addressDetail {
height: 34rpx;
font-size: 24rpx;

6
pages/user/index.vue
Unescape View File

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

Write Preview
Loading…
Cancel
Save