|
|
@@ -0,0 +1,290 @@
|
|
|
+<template>
|
|
|
+ <view class="save-order-box iPhone-bottom flex-common-css box-border-box">
|
|
|
+ <view class="bg-box"></view>
|
|
|
+ <Nav title='提交订单' bgckgroundBox='transparent'></Nav>
|
|
|
+
|
|
|
+ <view class="scroll-view-css box-border-box p-24">
|
|
|
+ <view class="box-card box-border-box mb-20 bgc-f">
|
|
|
+ <view class="box-input align-items-center box-border-box p-b-20 mb-20">
|
|
|
+ <view class="fs-28 fw-600 w158">姓名</view>
|
|
|
+ <input v-model="fromData.name" type="text" placeholder="请输入姓名">
|
|
|
+ </view>
|
|
|
+ <view class="box-input align-items-center box-border-box p-b-20 mb-20">
|
|
|
+ <view class="fs-28 fw-600 w158">手机号</view>
|
|
|
+ <input v-model="fromData.phone" type="number" placeholder="请输入手机号">
|
|
|
+ <view class="fs-28 fc-41ABF5 code-box" @click="getCode()">{{codeText}}{{isCode?'s':''}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="box-input align-items-center box-border-box p-b-20 mb-20">
|
|
|
+ <view class="fs-28 fw-600 w158">验证码</view>
|
|
|
+ <input v-model="fromData.code" type="number" placeholder="请输入验证码">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="box-input align-items-center box-border-box p-b-20 mb-20">
|
|
|
+ <view class="fs-28 fw-600 w158">联系地址</view>
|
|
|
+ <input v-model="fromData.address" type="text" placeholder="请输入联系地址（选填）">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="box-card box-border-box mb-20 bgc-f">
|
|
|
+ <view class="box-top box-border-box flex-justify-space">
|
|
|
+ <view class="box-left display-flex">
|
|
|
+ <image :src="goodsData.cover_img" mode="aspectFill"></image>
|
|
|
+ <view class="w336 fs-28 fw-400">{{goodsData.title||''}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="box-right">
|
|
|
+ <view class="fs-32 fw-600 text-align-right mb-12">￥{{goodsData.price||''}}</view>
|
|
|
+ <view class="display-flex align-items-center">
|
|
|
+ <view class="right-only-right-red fw-500 text-align-center fs-36 fc-f" @click="setNum(1)">-</view>
|
|
|
+ <view class="right-only-right-2 text-align-center fs-28 fw-400">{{fromData.number}}</view>
|
|
|
+ <view class="right-only-right-add fw-500 text-align-center fs-36 fc-f" @click="setNum(2)">+</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="box-buttom text-align-right">
|
|
|
+ <span class="fs-28 fc-9 fw-400">共{{fromData.number}}件，</span>
|
|
|
+ <span class="fs-28 fc-0 fw-400">合计￥</span>
|
|
|
+ <span class="fs-44 fc-0 fw-b">{{goodsData.price?Number(goodsData.price)*fromData.number:''}}</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="box-card box-border-box mb-20 bgc-f flex-justify-space">
|
|
|
+ <view class="fs-28 fw-600 w158">备注</view>
|
|
|
+ <input v-model="fromData.note" class="text-align-right" type="text" placeholder="请填写你的备注">
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="box-card box-border-box mb-20 bgc-f flex-justify-space">
|
|
|
+ <view class="fs-28 fw-600 w158">支付方式</view>
|
|
|
+ <view class="wx-box display-flex">
|
|
|
+ <image src="@/static/img/common/wx-zf.png" mode="scaleToFill"></image>
|
|
|
+ <view class="fs-28 fw-400 ml-10">微信支付</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="bottom-box box-border-box p-24">
|
|
|
+ <view class="flex-justify-space">
|
|
|
+ <view class="align-items-flex-end box-1">
|
|
|
+ <span class="fs-28 fc-f fw-600">￥</span>
|
|
|
+ <span class="fs-44 fc-f fw-600">{{goodsData.price?Number(goodsData.price)*fromData.number:''}}</span>
|
|
|
+ </view>
|
|
|
+ <view class="text-align-center box-2 fs-32 fc-f fw-600" @click="toSave()">立即支付</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {getCode} from '@/api/common.js'
|
|
|
+ import {ticketCreate,ticketPay} from '@/api/ticket.js';
|
|
|
+ import tools from "@/service/tools";
|
|
|
+
|
|
|
+ export default {
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ isCode:false,
|
|
|
+ codeText:'获取验证码',
|
|
|
+
|
|
|
+ fromData:{
|
|
|
+ name:'',
|
|
|
+ id:'',
|
|
|
+ phone:'',
|
|
|
+ school_id:'',
|
|
|
+ code:'',
|
|
|
+ note:'',
|
|
|
+ address:'',
|
|
|
+ number:1,
|
|
|
+ },
|
|
|
+ isAJAX:false,
|
|
|
+
|
|
|
+ goodsData:{},
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(e) {
|
|
|
+ if(e.goodsData){
|
|
|
+ let obj = JSON.parse(decodeURIComponent(e.goodsData));
|
|
|
+ this.goodsData = obj;
|
|
|
+ this.fromData.id = obj.id;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ getCode(){
|
|
|
+ if (this.isCode) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.isCode = true;
|
|
|
+ getCode({phone:this.fromData.phone,send_type:'group_order'}).then((res)=>{
|
|
|
+ if(res.code === 1){
|
|
|
+ this.codeText = 60;
|
|
|
+ let timer = setInterval(() => {
|
|
|
+ this.codeText -= 1;
|
|
|
+ if (this.codeText <= 0) {
|
|
|
+ clearInterval(timer);
|
|
|
+ this.isCode = false;
|
|
|
+ this.codeText = '获取验证码'
|
|
|
+ }
|
|
|
+ }, 1000);
|
|
|
+ }else{
|
|
|
+ this.isCode = false;
|
|
|
+ tools.error('获取验证码失败，请稍后重试')
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ setNum(type){
|
|
|
+ if(type == 1){
|
|
|
+ if(this.fromData.number <= 1){
|
|
|
+ return
|
|
|
+ }else{
|
|
|
+ this.fromData.number -= 1;
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+ this.fromData.number += 1;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ toSave(){
|
|
|
+ if (this.isAJAX) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.isAJAX = true;
|
|
|
+ this.fromData.school_id = uni.getStorageSync('school_id');
|
|
|
+ ticketCreate(this.fromData).then((res)=>{
|
|
|
+ if(res.code === 1){
|
|
|
+ ticketPay({order_id:res.data.order_id}).then((ret)=>{
|
|
|
+ if(ret.code === 1){
|
|
|
+ uni.requestPayment({
|
|
|
+ provider: "wxpay", //支付类型-固定值
|
|
|
+ timeStamp: ret.data.wx_pay.timeStamp + "", // 时间戳（单位：秒）
|
|
|
+ nonceStr: ret.data.wx_pay.nonceStr, // 随机字符串
|
|
|
+ package: ret.data.wx_pay.package, // 固定值
|
|
|
+ signType: ret.data.wx_pay.signType, //固定值
|
|
|
+ paySign: ret.data.wx_pay.paySign, //签名
|
|
|
+ success: (ren) => {
|
|
|
+ tools.success("支付成功");
|
|
|
+ this.isAJAX = false;
|
|
|
+ setTimeout(()=>{
|
|
|
+ uni.switchTab({
|
|
|
+ url:"/pages/order/index"
|
|
|
+ })
|
|
|
+ },1500)
|
|
|
+ },
|
|
|
+ fail: (err) =>{
|
|
|
+ this.isAJAX = false;
|
|
|
+ tools.error("支付失败");
|
|
|
+ },
|
|
|
+ });
|
|
|
+ }else{
|
|
|
+ this.isAJAX = false;
|
|
|
+ tools.error("支付失败");
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ this.isAJAX = false;
|
|
|
+ tools.error(res.msg);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .save-order-box{
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .right-only-right-red{
|
|
|
+ width: 44rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ border: 1rpx solid #41ABF5;
|
|
|
+ color: #41ABF5;
|
|
|
+ }
|
|
|
+ .right-only-right-add{
|
|
|
+ width: 44rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ background: linear-gradient( 117deg, #57CAFF 0%, #41ABF5 100%);
|
|
|
+ border-radius: 12rpx;
|
|
|
+ }
|
|
|
+ .right-only-right-2{
|
|
|
+ min-width: 50rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .bg-box{
|
|
|
+ width: 100%;
|
|
|
+ height: 448rpx;
|
|
|
+ filter: blur(80rpx);
|
|
|
+ background: linear-gradient(to right,rgba(176, 252, 250, 0.6),rgba(249,246,224,0.87),rgba(249,246,224,0.87));
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+ .bottom-box{
|
|
|
+ background-color: #fff;
|
|
|
+ .box-1{
|
|
|
+ flex: 1;
|
|
|
+ height: 100rpx;
|
|
|
+ background: #333;
|
|
|
+ border-radius: 200rpx 0rpx 0rpx 200rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding-left: 32rpx;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ }
|
|
|
+ .box-2{
|
|
|
+ width: 200rpx;
|
|
|
+ height: 100rpx;
|
|
|
+ line-height: 100rpx;
|
|
|
+ background: #41ABF5;
|
|
|
+ border-radius: 0rpx 200rpx 200rpx 0rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-card{
|
|
|
+ width: 100%;
|
|
|
+ min-height: 88rpx;
|
|
|
+ border-radius: 20rpx;
|
|
|
+ padding: 24rpx 24rpx 0 24rpx;
|
|
|
+ .box-top{
|
|
|
+ padding-bottom: 24rpx;
|
|
|
+ border-bottom: 2rpx solid #F9F9F9;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ .box-left{
|
|
|
+ image{
|
|
|
+ width: 108rpx;
|
|
|
+ height: 108rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ }
|
|
|
+ .w336{
|
|
|
+ width: 336rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-buttom{
|
|
|
+ padding-bottom: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-input{
|
|
|
+ border-bottom: 2rpx solid #F9F9F9;
|
|
|
+ position: relative;
|
|
|
+ .w158{
|
|
|
+ width: 158rpx;
|
|
|
+ }
|
|
|
+ input{
|
|
|
+ font-size: 28rpx;
|
|
|
+ }
|
|
|
+ .code-box{
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .wx-box{
|
|
|
+ image{
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
