Augcl
/
massage-front
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

feat: 商品支付页面;

pull/1/head
fox 2 months ago
parent
fa48f27716
commit
eeaebc31c0
3 changed files with 134 additions and 542 deletions
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +127
    -537
      pages_order/order/createOrder.vue
  2. +7
    -5
      pages_order/product/productDetail.vue
  3. BIN
      pages_order/static/createOrder/icon-arrow.png

+ 127
- 537
pages_order/order/createOrder.vue View File

@ -7,27 +7,6 @@
<!-- 商品详情 --> <!-- 商品详情 -->
<productCard :data="payOrderProduct[0]" :readonly="true"></productCard> <productCard :data="payOrderProduct[0]" :readonly="true"></productCard>
<!-- <view class="product-item" v-for="item in payOrderProduct" :key="item.id">
<view class="img-box">
<image :src="item.image" mode="aspectFill"></image>
</view>
<view class="server-info">
<view class="server-title">{{ item.title }}</view>
<view class="texture">
材质：{{ item.subText }}
</view>
<view class="stepper">
<uv-number-box button-size="60" v-model="item.num"></uv-number-box>
</view>
<view class="sales-volume">
<view class="desc">已售出 {{ item.payNum }}单</view>
</view>
</view>
</view> -->
<view class="card payment"> <view class="card payment">
<uv-radio-group v-model="payMethod"> <uv-radio-group v-model="payMethod">
@ -43,50 +22,38 @@
</view> </view>
</uv-radio-group> </uv-radio-group>
</view> </view>
</view>
<template v-if="false">
<!-- 优惠券 --> <!-- 优惠券 -->
<view @click="openCoupon" class="cell-item">
<view class="cell-item-left">
<image src="@/pages_order/static/createOrder/coupon.png" mode="widthFix" class="cell-icon"></image>
<view class="user-name">优惠券</view>
<view class="descript">(￥{{ coupon.money || 0}})</view>
<view @click="openCoupon" class="card flex coupon">
<image class="icon" src="@/pages_order/static/createOrder/icon-coupon.png" mode="widthFix"></image>
<!-- todo: check is selected coupon -->
<view class="label">优惠券<text v-if="selectedCoupon[0]" class="desc">{{ `（满减券:${'满400减40'}）` }}</text></view>
<view v-if="selectedCoupon[0]">
<uv-checkbox-group v-model="selectedCoupon" shape="circle" >
<uv-checkbox :name="1" size="39rpx" icon-size="39rpx" activeColor="#84A73F"></uv-checkbox>
</uv-checkbox-group>
</view> </view>
<view class="cell-item-right">
<!-- <radio color="#E3441A" :value="2" :checked="coupon.id" /> -->
</view>
</view>
<!-- 提示 -->
<view class="hint"
v-if="payOrderProduct[0] && payOrderProduct[0].orderDetails">
{{ payOrderProduct[0].orderDetails }}
</view>
<!-- 用户协议 -->
<view class="agreement">
<radio color="#E3441A" @click="agreement = !agreement" :checked="agreement" />
本人已同意<text @click="$refs.popup.open('user_xy')">《用户使用协议》</text>
<template v-else>
<image class="icon-arrow" src="../static/createOrder/icon-arrow.png" mode="widthFix"></image>
</template>
</view> </view>
</view>
<!-- 下单 -->
<view class="submit">
<!-- 下单 -->
<view class="flex bar">
<view class="flex count">
<text>合计：</text>
<view class="price"> <view class="price">
<view>
<text style="color: #000;">合计</text>
￥<text style="font-size: 18px;
font-weight: 600;">{{ totalPrice }}</text>元
</view>
</view>
<view class="btn" @click="submit">
立即支付
<text class="price-unit">¥</text>
<!-- todo: check -->
<text>{{ totalPrice }}</text>
</view> </view>
</view> </view>
</template>
<view class="btn btn-pay" @click="submit">
立即支付
</view>
</view>
<!-- 优惠券选择--> <!-- 优惠券选择-->
<uv-popup ref="couponPopup" :round="30"> <uv-popup ref="couponPopup" :round="30">
@ -117,25 +84,10 @@
}, },
data() { data() {
return { return {
address: {
name: '请选择地址',
address: '',
},
addressTotal: 0,
remark: '',
selectedCoupon: [1],
num: 1, num: 1,
agreement: false,
coupon: {}, coupon: {},
payMethod : 0, payMethod : 0,
isGive : 0,
type : '',
titleMap : {
def : '确认订单',
give : '送礼清单',
},
multiNum: 2, // 多人礼包人数
multiMinNum: 2, // 最小人数
multiMaxNum: 100, // 最大人数
} }
}, },
computed: { computed: {
@ -155,58 +107,24 @@
...mapState(['userInfo', 'payOrderProduct']), ...mapState(['userInfo', 'payOrderProduct']),
}, },
onLoad(args) { onLoad(args) {
this.type = args.type || 'def'
if(this.type == 'give'){
this.isGive = 1
}
this.$store.commit('getUserInfo') this.$store.commit('getUserInfo')
}, },
onShow() { onShow() {
// todo
return
this.getAddressList()
this.getCouponList() this.getCouponList()
}, },
methods: { methods: {
// 打开
getAddressList() {
// 获取地址列表
this.$refs.addressList.getAddressList().then(res => {
this.addressTotal = res.total
if (this.addressTotal != 0) {
this.address = res.records[0]
}
})
},
//获取优惠券列表 //获取优惠券列表
getCouponList() { getCouponList() {
this.$refs.couponList.getCouponList() this.$refs.couponList.getCouponList()
}, },
// 打开选择地址
openAddress() {
if (this.addressTotal == 0) {
return uni.navigateTo({
url: '/pages_order/mine/address?type=back'
})
}
this.$refs.addressPopup.open('bottom')
},
// 选择地址
selectAddress(e) {
this.address = e
this.$refs.addressPopup.close()
},
// 打开优惠券选择 // 打开优惠券选择
openCoupon() { openCoupon() {
if (this.addressTotal == 0) {
return uni.navigateTo({
url: '/pages_order/mine/address?type=back'
})
}
this.$refs.couponPopup.open('bottom') this.$refs.couponPopup.open('bottom')
}, },
// 选择优惠券 // 选择优惠券
selectCoupon(e) { selectCoupon(e) {
// todo
//判断优惠券限制 //判断优惠券限制
let { let {
useMoney useMoney
@ -223,62 +141,23 @@
} }
this.coupon = e this.coupon = e
this.$refs.couponPopup.close() this.$refs.couponPopup.close()
this.selectedCoupon = [1]
}, },
submit() { submit() {
let addressId = this.address.id
if (!addressId) {
uni.showToast({
title: '请选择地址',
icon: 'none'
})
return
}
if (!this.agreement) {
uni.showToast({
title: '请先同意使用协议',
icon: 'none'
})
return
}
let data = {} let data = {}
let api = '' let api = ''
// 不是送礼
if(this.type != 'give'){
let list = []
this.payOrderProduct.forEach(n => {
list.push({
num: n.num,
shopId: n.shopId || n.id,
})
})
data = {
addressId,
payType : this.payMethod,
list: JSON.stringify(list),
}
api = 'createSumOrder'
this.deleteCart(this.payOrderProduct.map(n => n.id).join(','))
} else { //体验、常规商品
data = {
addressId,
num: this.payOrderProduct[0].num,
shopId: this.payOrderProduct[0].id,
payType : this.payMethod,
isGive : this.isGive,
memberNum : 1,
}
api = 'createOrder'
data = {
addressId,
num: this.payOrderProduct[0].num,
shopId: this.payOrderProduct[0].id,
payType : this.payMethod,
memberNum : 1,
} }
api = 'createOrder'
if(this.coupon.id){ if(this.coupon.id){
data.couponId = this.coupon.id data.couponId = this.coupon.id
@ -299,38 +178,25 @@
return return
} }
uni.requestPaymentWxPay(res)
.then(e => {
uni.showToast({
title: '下单成功',
icon: 'none'
})
this.paySuccess(res)
}).catch(n => {
setTimeout(uni.redirectTo, 700, {
url: '/pages/index/order'
})
})
uni.requestPaymentWxPay(res).then(e => {
uni.showToast({
title: '下单成功',
icon: 'none'
})
this.paySuccess(res)
}).catch(n => {
setTimeout(uni.redirectTo, 700, {
url: '/pages/index/order'
})
})
} }
}) })
}, },
paySuccess(res){
if(this.type == 'def'){
setTimeout(uni.redirectTo, 700, {
url: '/pages/index/order'
})
}else{
setTimeout(uni.redirectTo, 700, {
url: `/pages_order/order/instantGift?id=${res.message}`
})
}
},
// 删除购物车
deleteCart(ids) {
this.$api('deleteCart', {
ids
paySuccess(res){
setTimeout(uni.redirectTo, 700, {
url: '/pages/index/order'
}) })
}, },
} }
@ -338,10 +204,13 @@
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
$bar-height: 132rpx;
.page { .page {
overflow: auto; overflow: auto;
padding-bottom: 300rpx;
padding-bottom: calc(#{$bar-height} + env(safe-area-inset-bottom));
background-color: #F5F5F5;
/deep/ .nav-bar__view { /deep/ .nav-bar__view {
padding-bottom: 190rpx; padding-bottom: 190rpx;
background-image: linear-gradient(#84A73F, #D8FF8F); background-image: linear-gradient(#84A73F, #D8FF8F);
@ -384,359 +253,32 @@
} }
} }
.bac {
width: 100%;
height: 100px;
background: $uni-color;
}
.give-type {
background: #fff;
border-radius: 20rpx;
padding: 30rpx;
margin-bottom: 20rpx;
.tab-box {
display: flex;
justify-content: space-between;
.tab-item {
width: 30%;
background: #F8F8F8;
border-radius: 20rpx;
padding: 20rpx;
text-align: center;
text {
display: block;
&.desc {
font-size: 24rpx;
color: #999;
margin-top: 10rpx;
}
}
&.active {
background: rgba($uni-color, 0.1);
color: $uni-color;
.desc {
color: $uni-color;
}
}
}
}
.tips {
margin-top: 20rpx;
font-size: 26rpx;
color: #999;
display: flex;
align-items: center;
justify-content: space-between;
.guide {
color: $uni-color;
text-decoration: underline;
}
}
}
.box {
padding: 20rpx;
margin-top: -150rpx;
// 商品详情
.product-item {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
background: white;
border-radius: 15rpx;
box-sizing: border-box;
padding: 25rpx;
margin: 20rpx 0rpx;
.img-box {
width: 200rpx;
height: 200rpx;
background: #ccc;
border-radius: 10rpx;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
.server-info {
width: calc(100% - 200rpx);
box-sizing: border-box;
padding: 10rpx 20rpx;
display: flex;
flex-direction: column;
justify-content: space-around;
.server-title {
font-size: 34rpx;
}
.texture {
color: #B8B8B8;
margin: 10rpx 0rpx;
}
.stepper {
margin-bottom: 10rpx;
&::v-deep .uv-number-box__input {
color: $uni-color !important;
width: 100rpx !important;
}
}
.sales-volume {
display: flex;
align-items: center;
color: #B8B8B8;
font-size: 26rpx;
image {
width: 25rpx;
height: 25rpx;
}
}
}
}
//cell单元格(地址)
.cell-item {
display: flex;
justify-content: space-between;
align-items: center;
background: white;
border-radius: 20rpx;
padding: 20rpx;
box-sizing: border-box;
.cell-item-left {
display: flex;
align-items: center;
width: 90%;
.cell-icon {
width: 40rpx;
}
.user-name,
.user-address {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 150rpx;
padding-left: 20rpx;
box-sizing: border-box;
}
.descript {
color: #888888;
}
.user-address {
width: calc(100% - 230rpx);
}
}
.cell-item-right {
width: 10%;
display: flex;
justify-content: flex-end;
.stepper {
display: flex;
align-items: center;
text {
display: flex;
align-items: center;
justify-content: center;
width: 44rpx;
height: 44rpx;
&.minus, &.plus {
background: #F8F8F8;
border-radius: 50%;
font-size: 32rpx;
&.disabled {
color: #ccc;
}
}
&.num {
margin: 0 20rpx;
color: $uni-color;
font-size: 28rpx;
}
}
}
}
}
.cell-list {
margin: 20rpx 0rpx;
border-radius: 20rpx;
overflow: hidden;
.cell-item {
border-radius: 0rpx;
}
}
// 提示
.hint {
font-size: 26rpx;
margin-top: 80rpx;
color: #BFBFBF;
}
// 用户协议
.agreement {
display: flex;
justify-content: center;
align-items: center;
padding: 10px 0;
.van-checkbox {
margin-right: 5rpx;
}
text {
color: $uni-color;
}
}
}
// 下单
.submit {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
.price {
color: #F39637;
padding: 0 20px;
}
.card {
padding: 22rpx 42rpx 34rpx 41rpx;
color: #000000;
font-size: 28rpx;
.btn {
background: $uni-color;
color: white;
width: 120px;
height: 45px;
border-radius: 23px;
font-size: 16px;
display: flex;
justify-content: center;
align-items: center;
}
}
.icon {
width: 46rpx;
height: auto;
margin-right: 18rpx;
} }
//新增地址按钮
.add-btn {
width: 100%;
.button-submit {
display: flex;
align-items: center;
justify-content: center;
width: 596rpx;
height: 90rpx;
background: #E3441A;
border-radius: 46rpx;
margin: 20rpx auto;
.label {
flex: 1;
}
font-size: 28rpx;
font-family: PingFang SC, PingFang SC-Regular;
font-weight: 400;
text-align: center;
color: #ffffff;
}
.desc {
color: #999999;
} }
.multi-box, .lucky-box {
background: #fff;
border-radius: 20rpx;
padding: 30rpx;
margin-bottom: 20rpx;
.title {
font-size: 28rpx;
font-weight: 500;
margin-bottom: 20rpx;
}
}
.multi-box {
.stepper {
display: flex;
align-items: center;
justify-content: center;
text {
display: flex;
align-items: center;
justify-content: center;
width: 60rpx;
height: 60rpx;
&.minus, &.plus {
background: #F8F8F8;
border-radius: 50%;
font-size: 36rpx;
&.disabled {
color: #ccc;
}
}
&.num {
margin: 0 40rpx;
color: $uni-color;
font-size: 32rpx;
}
}
}
}
.lucky-box {
.tips-list {
.tip-item {
font-size: 26rpx;
color: #666;
line-height: 2;
}
}
}
}
}
.payment { .payment {
margin-top: 23rpx; margin-top: 23rpx;
padding: 22rpx 42rpx 34rpx 41rpx;
color: #000000;
font-size: 28rpx;
&-item { &-item {
width: 100%; width: 100%;
@ -746,18 +288,66 @@
} }
} }
.icon {
width: 46rpx;
}
.coupon {
margin-top: 15rpx;
.icon-arrow {
width: 29rpx;
height: auto; height: auto;
margin-right: 18rpx;
} }
.label {
}
// 下单
.bar {
position: fixed;
bottom: 0;
left: 0;
width: 100vw;
height: $bar-height;
padding-bottom: env(safe-area-inset-bottom);
background-color: $uni-fg-color;
.count {
flex: 1; flex: 1;
color: #000000;
font-size: 28rpx;
margin-left: 48rpx;
justify-content: flex-start;
.price {
color: #FF2A2A;
font-size: 30rpx;
&-unit {
font-size: 18rpx;
}
}
} }
.desc {
color: #999999;
.btn {
border: none;
line-height: 1;
background-color: transparent;
padding: 0;
width: auto;
height: auto;
margin: 0;
&-pay {
margin-right: 41rpx;
padding: 24rpx 137rpx;
color: $uni-text-color-inverse;
font-size: 28rpx;
border-radius: 44rpx;
background-image: linear-gradient(to right, #84A73F, #D8FF8F);
}
} }
} }
</style> </style>

+ 7
- 5
pages_order/product/productDetail.vue View File

@ -149,6 +149,7 @@
imgUrl: TEMP_BANNER_IMG_URL, imgUrl: TEMP_BANNER_IMG_URL,
image: new Array(4).fill(1).map(() => TEMP_BANNER_IMG_URL), image: new Array(4).fill(1).map(() => TEMP_BANNER_IMG_URL),
price: 99, price: 99,
num: 1,
sales: 235, sales: 235,
title: '60分钟肩颈推拿按摩', title: '60分钟肩颈推拿按摩',
desc: '疏通经络 放松肌肉', desc: '疏通经络 放松肌肉',
@ -171,10 +172,10 @@
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
$bar-height: 120rpx;
$bar-height: 132rpx;
.page { .page {
padding-bottom: $bar-height;
padding-bottom: calc(#{$bar-height} + env(safe-area-inset-bottom));
background-color: #F3F3F3; background-color: #F3F3F3;
@ -288,9 +289,8 @@
left: 0; left: 0;
width: 100vw; width: 100vw;
height: $bar-height; height: $bar-height;
padding: 20rpx 27rpx 20rpx 58rpx;
box-sizing: border-box;
padding-bottom: env(safe-area-inset-bottom);
background-color: $uni-fg-color;
.count { .count {
flex: 1; flex: 1;
@ -322,6 +322,7 @@
margin: 0; margin: 0;
&-share { &-share {
margin-left: 58rpx;
color: #000000; color: #000000;
font-size: 22rpx; font-size: 22rpx;
@ -333,6 +334,7 @@
} }
&-pay { &-pay {
margin-right: 27rpx;
padding: 24rpx 137rpx; padding: 24rpx 137rpx;
color: $uni-text-color-inverse; color: $uni-text-color-inverse;
font-size: 28rpx; font-size: 28rpx;


BIN
pages_order/static/createOrder/icon-arrow.png View File

Before After
Width: 29  |  Height: 28  |  Size: 552 B

Write Preview
Loading…
Cancel
Save