497 lines
12 KiB
Vue
497 lines
12 KiB
Vue
<template>
|
|
<view class="placeOrder">
|
|
<view class="placetop">
|
|
<view class="placetopone">
|
|
<view style="display: flex;">
|
|
<image :src="info.proImg"
|
|
style="width: 102rpx;height: 102rpx;border-radius: 50%;margin-left: 28rpx;" mode=""></image>
|
|
<view class="placetopInfo">
|
|
<view>{{info.proName.length>12?info.proName.substring(0,12)+'...':info.proName}} </view>
|
|
<view>{{info.avaTime}} </view>
|
|
<view>{{info.proDetail}} </view>
|
|
</view>
|
|
</view>
|
|
<view class="placetopmoney">
|
|
<view>
|
|
<text>￥{{info.originPrice}}</text>
|
|
<text>￥{{info.salePrice}}</text>
|
|
</view>
|
|
<u-number-box v-model="Quantity">
|
|
<view slot="minus" class="minus">
|
|
<u-icon name="minus" color="#CCCCCC" bold size="30"></u-icon>
|
|
</view>
|
|
<text slot="input" style="width: 20px;text-align: center;">{{Quantity}}</text>
|
|
<view slot="plus" class="plus">
|
|
<u-icon name="plus" color="#FF4B10" bold size="30"></u-icon>
|
|
</view>
|
|
</u-number-box>
|
|
</view>
|
|
</view>
|
|
<view class="redMoney" v-if="false">
|
|
<view>
|
|
<image src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/hongbao.png"
|
|
style="width: 30rpx;height: 30.24rpx;;" mode=""></image>
|
|
红包/抵用券
|
|
</view>
|
|
<view>
|
|
{{info.couponDetail.name}}
|
|
</view>
|
|
</view>
|
|
<view style="background-color: #F6F6F6;height: 2rpx;width: 100%;margin: 16rpx 0;"></view>
|
|
<view class="jiesuanmoney">
|
|
<text>
|
|
优惠<text style="color: #FF4C11;font-weight: 500;">￥{{calculateEvent(info.save)}}</text>
|
|
</text>
|
|
<text>
|
|
小计<text style="color: #FF4C11;font-weight: 500;">￥{{calculateEvent(info.salePrice) }}</text>
|
|
</text>
|
|
</view>
|
|
|
|
</view>
|
|
<!-- 支付方式 -->
|
|
<view class="payType">
|
|
<view class="">
|
|
支付方式
|
|
</view>
|
|
<view class="">
|
|
<u-radio-group v-model="radiovalue1" iconPlacement="right" :size="28" placement="column">
|
|
<!-- #ifdef MP-WEIXIN -->
|
|
<u-radio activeColor="#ffd158" name="1">
|
|
<view class="dfs">
|
|
<image style="width:44rpx;height:44rpx"
|
|
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/balance.png" mode="">
|
|
</image>
|
|
<text style="font-size: 28rpx;margin-left: 16rpx;">
|
|
微信支付
|
|
</text>
|
|
</view>
|
|
</u-radio>
|
|
<!-- #endif -->
|
|
<!-- #ifdef MP-ALIPAY -->
|
|
<u-radio activeColor="#ffd158" name="1">
|
|
<view class="dfs">
|
|
<image style="width:44rpx;height:44rpx"
|
|
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/confirmOrder/alipay.png" mode="aspectFill" />
|
|
<text style="font-size: 28rpx;margin-left: 16rpx;">
|
|
支付宝支付
|
|
</text>
|
|
</view>
|
|
</u-radio>
|
|
<!-- #endif -->
|
|
|
|
<!-- <view style="margin: 22rpx 0;width: 100%;height: 2rpx;background-color: #E5E5E5;"
|
|
v-if="info.isUseVip==1"> </view>
|
|
<u-radio activeColor="#ffd158" name="2" v-if="info.isUseVip==1">
|
|
<view class="dfs">
|
|
<image style="width:44rpx;height:44rpx"
|
|
src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/drder/wechat.png" mode="">
|
|
</image>
|
|
<text style="font-size: 28rpx;margin-left: 16rpx;">
|
|
余额支付</text>
|
|
</view>
|
|
</u-radio> -->
|
|
</u-radio-group>
|
|
<view style="font-weight: 400;font-size: 24rpx;color: #333333;margin-left: 60rpx;"
|
|
v-if="info.isUseVip==1">
|
|
会员卡余额{{ amountVIP.amount}} <text
|
|
style="font-weight: 500;font-size: 28rpx;margin-left: 16rpx;color: #FF4C11;"
|
|
@click="goRecharge">去充值</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="placeBottom">
|
|
<view class="">
|
|
<text style="font-size: 24rpx;font-weight: bold;"> 合计 </text><text
|
|
style="font-size: 32rpx;font-weight: bold;color:#FF4C11"> ￥{{calculateEvent(info.salePrice)}}
|
|
</text>
|
|
<text style="font-size: 24rpx;font-weight: 400;color: # 999;">含优惠卷包￥0</text>
|
|
</view>
|
|
<view class="">
|
|
共{{Quantity}}件 已优惠￥{{calculateEvent(info.save) }}
|
|
</view>
|
|
<button class="btnStyle" @click="fangdouevent">提交订单</button>
|
|
</view>
|
|
<payPassword ref="payPwd" @accountPayevent="accountPayevent" v-if="ispws"></payPassword>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import payPassword from '@/components/payPassword.vue'
|
|
export default {
|
|
components: {
|
|
payPassword
|
|
},
|
|
onLoad(e) {
|
|
// this.$store.dispatch("set_shopid"); //获取shapid
|
|
this.getInfo(e.id)
|
|
this.orderIds = e.id
|
|
this.amount = uni.cache.get('userInfo').amount
|
|
this.vipId = uni.cache.get('userInfo').id
|
|
},
|
|
data() {
|
|
return {
|
|
info: null,
|
|
Quantity: 1,
|
|
radiovalue1: '1',
|
|
amount: 0,
|
|
orderIds: null,
|
|
vipId: null,
|
|
ispws: false,
|
|
amountVIP: null,
|
|
listinfoid: null
|
|
}
|
|
},
|
|
methods: {
|
|
async getAount(shopUser) {
|
|
let res = await this.api.shopUserInfo({
|
|
// shopId:店铺ID
|
|
"shopId": shopUser,
|
|
"userId": uni.cache.get('userInfo').id
|
|
})
|
|
if (res.code == 0) {
|
|
this.amountVIP = res.data
|
|
|
|
}
|
|
},
|
|
// 余额支付
|
|
async accountPayevent(pwd) {
|
|
this.ispws = false
|
|
if ( this.amountVIP.isVip == 0 ) {
|
|
uni.pro.navigateTo('/pages/member/index', {
|
|
shopId: this.info.shopId,
|
|
})
|
|
return;
|
|
}
|
|
let res = await this.api.payOrderPay({
|
|
orderId: this.listinfoid.id,
|
|
payType: "deposit",
|
|
pwd
|
|
})
|
|
if (res.code == 0) {
|
|
let orderInfo = {
|
|
createdAt: this.listinfoid.createTime,
|
|
orderNo: this.listinfoid.orderNo,
|
|
orderAmount: this.calculateEvent(this.info.salePrice)
|
|
}
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '支付成功',
|
|
success: () => {
|
|
setTimeout(res => {
|
|
uni.redirectTo({
|
|
url: '/pages/order/successful?orderId=' + this
|
|
.listinfoid.id + '&orderInfo=' + JSON.stringify(
|
|
orderInfo) + '&radiovalue1=' + this.radiovalue1
|
|
});
|
|
}, 1000)
|
|
}
|
|
})
|
|
} else if (res.data == 1) {
|
|
setTimeout(() => {
|
|
// 去充值
|
|
this.goRecharge()
|
|
}, 2000)
|
|
}
|
|
},
|
|
calculateEvent(d) {
|
|
return (d * 1000 * this.Quantity) / 1000
|
|
},
|
|
goRecharge() {
|
|
uni.pro.navigateTo('/pages/member/index', {
|
|
shopId: this.info.shopId
|
|
})
|
|
},
|
|
fangdouevent() {
|
|
this.$u.debounce(() => {
|
|
this.sumbitFrom()
|
|
}, 1000)
|
|
},
|
|
async sumbitFrom() {
|
|
let payMoney = this.info.salePrice * this.Quantity
|
|
let res = await this.api.creatGroupOrder({
|
|
num: this.Quantity,
|
|
proId: this.info.proId,
|
|
shopId: this.info.shopId,
|
|
payAmount: payMoney,
|
|
orderAmount: payMoney
|
|
})
|
|
if (res.code == 0) {
|
|
this.listinfoid = res.data
|
|
// radiovalue1:为1的时候微信支付,为2是会员卡,需要输入支付密码
|
|
if (this.radiovalue1 == 1) {
|
|
// 调用支付接口
|
|
this.payEvent(res.data.id)
|
|
} else {
|
|
// 先判断是否设置支付密码。0是没设置。没设置的情况下跳转到设置页面。有的话输入支付密码
|
|
let isVip = uni.cache.get('userInfo').isPwd
|
|
if (isVip == 0) {
|
|
uni.pro.navigateTo('/pages/user/repairpassword', {
|
|
shopId_id: this.info.shopId
|
|
})
|
|
} else {
|
|
this.ispws = true
|
|
this.$nextTick(() => {
|
|
this.$refs.payPwd.onPayUp();
|
|
})
|
|
}
|
|
}
|
|
}
|
|
|
|
},
|
|
async payEvent(id) {
|
|
let res = await this.api.payOrderPay({
|
|
// #ifdef MP-WEIXIN
|
|
payType: 'wechatPay',
|
|
// #endif
|
|
// #ifdef MP-ALIPAY
|
|
payType: 'aliPay',
|
|
// #endif
|
|
orderId: id,
|
|
orderType: 'group'
|
|
})
|
|
if (res) {
|
|
// 微信支付还是余额支付
|
|
uni.requestPayment({
|
|
// #ifdef MP-WEIXIN
|
|
provider: 'wxpay', //支付类型-固定值
|
|
partnerid: res.data.appId, // 微信支付商户号
|
|
timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
|
|
nonceStr: res.data.nonceStr, // 随机字符串
|
|
package: res.data.package, // 固定值
|
|
signType: res.data.signType, //固定值
|
|
paySign: res.data.paySign, //签名
|
|
// #endif
|
|
// #ifdef MP-ALIPAY
|
|
provider: 'alipay', //支付类型-固定值
|
|
orderInfo: res.data.tradeNo, // 支付宝支付商户号
|
|
// #endif
|
|
success: (res) => {
|
|
let _this = this
|
|
uni.showToast({
|
|
title: "支付成功"
|
|
})
|
|
uni.navigateBack()
|
|
},
|
|
fail: async (err) => {
|
|
console.log(err)
|
|
let res = await this.api.cancelOrderPay({
|
|
orderId: this.listinfoid.id,
|
|
})
|
|
|
|
uni.showToast({
|
|
icon: 'none',
|
|
title: '支付失败'
|
|
})
|
|
uni.hideLoading()
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
},
|
|
async getInfo(id) {
|
|
let res = await this.api.getproductorderConfirm({
|
|
productId: id,
|
|
})
|
|
if (res.code == 0) {
|
|
this.info = res.data
|
|
// 获取余额
|
|
this.getAount(res.data.shopId)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.placeOrder {
|
|
|
|
.placetop {
|
|
width: 750rpx;
|
|
background: #FFFFFF;
|
|
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
|
padding: 20rpx 30rpx;
|
|
|
|
.placetopone {
|
|
.df(space-between);
|
|
|
|
.placetopInfo {
|
|
margin-left: 18rpx;
|
|
|
|
>view:first-child {
|
|
font-weight: 400;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
>view:nth-child(2),
|
|
>view:last-child {
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
|
|
}
|
|
}
|
|
|
|
.placetopmoney {
|
|
>view:first-child {
|
|
margin-bottom: 20rpx;
|
|
|
|
>text:first-child {
|
|
text-decoration: line-through;
|
|
color: #999;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
>text:last-child {
|
|
font-weight: bold;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.redMoney {
|
|
.df(space-between);
|
|
margin-top: 30rpx;
|
|
.m(30rpx);
|
|
|
|
>view:first-child {
|
|
.df;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
>view:last-child {
|
|
background: #FFE9E9;
|
|
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
|
font-weight: 400;
|
|
font-size: 28rpx;
|
|
color: #FF3333;
|
|
text-align: center;
|
|
padding: 9rpx 13rpx;
|
|
}
|
|
}
|
|
|
|
.jiesuanmoney {
|
|
// height: 50rpx;
|
|
// line-height: 50rpx;
|
|
text-align: right;
|
|
|
|
>text:first-child {
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
>text:last-child {
|
|
font-size: 32rpx;
|
|
margin-left: 20rpx;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.payType {
|
|
padding: 32rpx 34rpx;
|
|
margin-top: 48rpx;
|
|
background-color: #fff;
|
|
|
|
>view:first-child {
|
|
font-weight: 500;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
>view:last-child {
|
|
margin-top: 32rpx;
|
|
}
|
|
|
|
.dfs {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
}
|
|
|
|
.placeBottom {
|
|
position: fixed;
|
|
bottom: 0%;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 180rpx;
|
|
background-color: #fff;
|
|
padding: 16rpx 34rpx;
|
|
|
|
>view:last-child {
|
|
margin-top: 16rpx;
|
|
font-weight: 400;
|
|
font-size: 24rpx;
|
|
color: #666666;
|
|
|
|
}
|
|
|
|
.btnStyle {
|
|
width: 302rpx;
|
|
height: 72rpx;
|
|
line-height: 72rpx;
|
|
text-align: center;
|
|
background: linear-gradient(110deg, #F1A666 0%, #FF4C11 100%);
|
|
border-radius: 48rpx 48rpx 48rpx 48rpx;
|
|
font-weight: bold;
|
|
font-size: 36rpx;
|
|
color: #FFFFFF;
|
|
position: absolute;
|
|
right: 58rpx;
|
|
top: 30rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.dfs {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.m(@top, @right: 0, @bottom: 0, @left: 0) {
|
|
margin: @top, @right, @bottom, @left
|
|
}
|
|
|
|
.df(@start: flex-start, @position: center) {
|
|
display: flex;
|
|
align-items: @position;
|
|
justify-content: @start;
|
|
}
|
|
</style>
|
|
<style lang="scss">
|
|
.minus {
|
|
width: 22px;
|
|
height: 22px;
|
|
border-width: 1px;
|
|
border-color: #F0F0F0;
|
|
border-style: solid;
|
|
border-top-left-radius: 100px;
|
|
border-top-right-radius: 100px;
|
|
border-bottom-left-radius: 100px;
|
|
border-bottom-right-radius: 100px;
|
|
@include flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.plus {
|
|
width: 22px;
|
|
height: 22px;
|
|
background-color: #FFF1EC;
|
|
border-radius: 50%;
|
|
/* #ifndef APP-NVUE */
|
|
display: flex;
|
|
/* #endif */
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
</style> |