|
|
@@ -0,0 +1,486 @@
|
|
|
+<template>
|
|
|
+ <view class="confirm-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 box-border-box p-b-20 mb-20" @click="selectFun(2)">
|
|
|
+ <view class="flex-justify-space mb-12">
|
|
|
+ <view v-if="addressData.id" class="fs-36 fw-600 text-overflow-ellipsis w570">
|
|
|
+ {{addressData.address||''}}{{addressData.school_name||''}}{{addressData.dorm_name||''}}
|
|
|
+ </view>
|
|
|
+ <view v-else class="fs-36 fw-600 text-overflow-ellipsis w570">请选择地址</view>
|
|
|
+ <image class="right-icon" src="@/static/img/toRight.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="" v-if="addressData.id">
|
|
|
+ <span class="mr-24 fs-28 fc-9">{{addressData.consignee||''}}</span><span
|
|
|
+ class="fs-28 fc-9">{{addressData.phone||''}}</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="box-input flex-justify-space align-items-center box-border-box p-b-20 mb-20"
|
|
|
+ @click="selectFun(3)">
|
|
|
+ <view class="fs-28 fw-600">预计送达</view>
|
|
|
+ <view class="align-items-center">
|
|
|
+ <view class="fs-28 fw-400 fc-41ABF5"> {{deliverText?'预计'+ deliverText+ '送达':'选择送达时间'}} </view>
|
|
|
+ <image class="right-icon" src="@/static/img/toRight.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="box-input flex-justify-space box-border-box p-b-20 mb-20">
|
|
|
+ <view class="fs-28 fw-600">配送方式</view>
|
|
|
+ <view class="fs-24 fw-400 sd-box fc-FB3D03">送达宿舍</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="box-card box-border-box bgc-f mb-20">
|
|
|
+ <view class="mb-32 b-b-F9F9F9">
|
|
|
+ <!-- <view class="fs-28 fw-600 mb-24">宋氏重庆鸡公煲(重工业店)宋氏重庆鸡公煲(重工业店)宋氏重庆鸡公煲(重工业店)</view> -->
|
|
|
+ <view class="flex-justify-space mb-28" v-for="(item,i) in cardData.goods_list" :key="i">
|
|
|
+ <image class="goods-img" :src="item.goods_image" mode="aspectFill"></image>
|
|
|
+ <view class="w376">
|
|
|
+ <view class="fs-28 fw-400 mb-4">
|
|
|
+ {{item.goods_name}}
|
|
|
+ </view>
|
|
|
+ <view class="fs-24 fc-9 mb-4">{{item.goods_desc}}</view>
|
|
|
+ <view class="fs-24 fc-9">x{{item.goods_number}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="fs-32 fw-600">¥{{item.goods_money}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="flex-justify-space mb-24">
|
|
|
+ <view class="fs-28 fw-400">打包费</view>
|
|
|
+ <view class="fs-32 fw-600">¥{{cardData.pack_price}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="flex-justify-space mb-24">
|
|
|
+ <view class="fs-28 fw-400">配送费</view>
|
|
|
+ <view class="fs-32 fw-600">¥{{delivery_money}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="flex-justify-space mb-24 p-b-20 b-b-F9F9F9" @click="selectFun(1)">
|
|
|
+ <view class="align-items-center">
|
|
|
+ <image class="yhq-icons" src="@/static/img/order/yhq.png" mode=""></image>
|
|
|
+ <view class="fs-28 fw-400">优惠券</view>
|
|
|
+ </view>
|
|
|
+ <view class="align-items-center">
|
|
|
+ <view :class="fromData.coupon_id?'fc-FB3D03 fw-600 fs-32':'fw-400 fs-28'">
|
|
|
+ {{fromData.coupon_id?'-¥'+ quanMoney:'请选择优惠券'}}
|
|
|
+ </view>
|
|
|
+ <image class="right-icon" src="@/static/img/toRight.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="text-align-right p-b-20">
|
|
|
+ <span class="fc-9 fs-28">共{{cardData.total_num||0}}件,</span>
|
|
|
+ <span class="fw-400 fc-0 fs-28">合计¥</span>
|
|
|
+ <span
|
|
|
+ class="fw-600 fc-0 fs-44">{{(total_price - quanMoney) < 0?'0':(total_price - quanMoney)||0}}</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="box-card box-border-box bgc-f mb-20">
|
|
|
+ <view class="flex-justify-space b-b-F9F9F9">
|
|
|
+ <view class="fs-28 fw-600 w158 mr-12">备注</view>
|
|
|
+ <input class="flex-1 text-align-right fs-28" type="text" placeholder="请填写你的备注">
|
|
|
+ </view>
|
|
|
+ <!-- <view class="fs-28 fw-600 mb-16">平台将通过服务通知向你推送最新动态</view>
|
|
|
+ <view class="p-16 bgc-F3F4F6 b-rad-12 tz-an-f">
|
|
|
+ <view class="fc-0 fw-400 fs-24 mb-4">是否电话通知</view>
|
|
|
+ <view class="fc-9 fw-400 fs-24">若开启,则订单送达系统自动曝光(电话)通知</view>
|
|
|
+ <view class="tz-an">
|
|
|
+ <view class="r-right" @click="fromData.is_default == 1?fromData.is_default=0:fromData.is_default=1"
|
|
|
+ :class="fromData.is_default == 0?'n-r':'s-r'">
|
|
|
+ <view class="r-y"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view> -->
|
|
|
+ <view class="p-b-20"></view>
|
|
|
+ </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">{{(total_price - quanMoney) < 0?'0':(total_price - quanMoney)||0}}</span>
|
|
|
+ </view>
|
|
|
+ <view class="text-align-center box-2 fs-32 fc-f fw-600" @click="toSave()">立即支付</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <Coupon ref="coupon" @giveCouPon='giveCouPon'></Coupon>
|
|
|
+ <SelectAddress ref="selectAddress" @giveAddress='giveAddress'></SelectAddress>
|
|
|
+ <Time ref="selectTime" @giveTime='giveTime' @timeAndType='timeAndType'></Time>
|
|
|
+ <EditCode ref='editCode' v-model="fromData.pickup_code"></EditCode>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {
|
|
|
+ getExpressCoupon,
|
|
|
+ getExpressCreate,
|
|
|
+ getExpressPay
|
|
|
+ } from '@/api/express.js';
|
|
|
+ import {
|
|
|
+ getAddressDefault
|
|
|
+ } from '@/api/member.js'
|
|
|
+ import {
|
|
|
+ getShopIngList
|
|
|
+ } from '@/api/shopping.js'
|
|
|
+ import {
|
|
|
+ getDeliveryMoney
|
|
|
+ } from '@/api/common.js'
|
|
|
+ import {
|
|
|
+ orderCreate,
|
|
|
+ orderPay
|
|
|
+ } from '@/api/order.js'
|
|
|
+ import tools from "@/service/tools";
|
|
|
+ import Coupon from './confirm-mod/coupon.vue';
|
|
|
+ import SelectAddress from './confirm-mod/select-address.vue';
|
|
|
+ import Time from './confirm-mod/time.vue';
|
|
|
+ import EditCode from './confirm-mod/edit-code.vue';
|
|
|
+
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ Coupon,
|
|
|
+ SelectAddress,
|
|
|
+ Time,
|
|
|
+ EditCode
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ type: 1, //1外卖 2代取 3干洗
|
|
|
+ fromData: {
|
|
|
+ school_id: '',
|
|
|
+ shop_id: '',
|
|
|
+ // site_id:'',
|
|
|
+ type: '',
|
|
|
+ time: '',
|
|
|
+ address_id: '',
|
|
|
+ coupon_id: '',
|
|
|
+ note: '',
|
|
|
+ // is_default:0,
|
|
|
+ // pickup_code:[],
|
|
|
+ },
|
|
|
+ addressData: {},
|
|
|
+ deliverText: '',
|
|
|
+ cardData: {
|
|
|
+ goods_list: [],
|
|
|
+ },
|
|
|
+ delivery_money: '',
|
|
|
+ quanMoney: "",
|
|
|
+ total_price: '',
|
|
|
+ isAJAX: false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(e) {
|
|
|
+ if (e) {
|
|
|
+ this.fromData.shop_id = e.shop_id
|
|
|
+ this.getCard(e.shop_id)
|
|
|
+ // this.getDeliveryMoney(e.shop_id)
|
|
|
+ }
|
|
|
+ this.getAddressDefault();
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ let isConfirmAddressFlag = uni.getStorageSync('isConfirmAddressFlag');
|
|
|
+ if (isConfirmAddressFlag) {
|
|
|
+ this.selectFun(2);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getDeliveryMoney(shop_id) {
|
|
|
+ // 获取外卖配送费
|
|
|
+ this.fromData.school_id = uni.getStorageSync('school_id');
|
|
|
+ getDeliveryMoney({
|
|
|
+ shop_id: shop_id,
|
|
|
+ school_id: this.fromData.school_id
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.code == 1) {
|
|
|
+ this.delivery_money = res.data.delivery_money
|
|
|
+ this.total_price = Number(this.total_price) + Number(this.delivery_money)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取购物车
|
|
|
+ getCard(shop_id) {
|
|
|
+ getShopIngList({
|
|
|
+ shop_id: shop_id
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.code === 1) {
|
|
|
+ this.cardData = res.data;
|
|
|
+ this.total_price = res.data.total_price
|
|
|
+ this.getDeliveryMoney(shop_id)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 获取默认地址
|
|
|
+ getAddressDefault() {
|
|
|
+ getAddressDefault().then((res) => {
|
|
|
+ if (res.code === 1) {
|
|
|
+ this.addressData = res.data
|
|
|
+ if (this.addressData.id) {
|
|
|
+ this.fromData.address_id = this.addressData.id;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ selectFun(type) {
|
|
|
+ if (type === 1) {
|
|
|
+ // 选择优惠券
|
|
|
+ this.$refs.coupon.getList(this.type, this.fromData.coupon_id, this.fromData.shop_id);
|
|
|
+ } else if (type === 2) {
|
|
|
+ // 选择地址
|
|
|
+ if (this.addressData.id) {
|
|
|
+ this.$refs.selectAddress.id = this.addressData.id;
|
|
|
+ }
|
|
|
+ this.$refs.selectAddress.getList();
|
|
|
+ } else if (type === 3) {
|
|
|
+ // 选择时间
|
|
|
+ this.$refs.selectTime.getList(this.fromData.shop_id);
|
|
|
+ } else if (type === 4) {
|
|
|
+ // 编辑code
|
|
|
+ this.$refs.editCode.getList();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ giveCouPon(e) {
|
|
|
+ this.quanMoney = Number(e.money);
|
|
|
+ this.fromData.coupon_id = e.id;
|
|
|
+ },
|
|
|
+ timeAndType(type, time) {
|
|
|
+ // 时间选择
|
|
|
+ this.fromData.type = type
|
|
|
+ this.fromData.time = time
|
|
|
+ if (type == 1) {
|
|
|
+ this.deliverText = '今天' + time
|
|
|
+ } else {
|
|
|
+ this.deliverText = '明天' + time
|
|
|
+ }
|
|
|
+ console.log(type, time, '&&&&&&&&&&&&&&&&&&&&&&&&');
|
|
|
+ },
|
|
|
+ giveAddress(e) {
|
|
|
+ this.addressData = e;
|
|
|
+ this.fromData.address_id = this.addressData.id;
|
|
|
+ },
|
|
|
+ giveTime(e) {
|
|
|
+ console.log(e);
|
|
|
+ },
|
|
|
+ toSave() {
|
|
|
+ if (!this.fromData.address_id) {
|
|
|
+ return tools.error('请先选择地址')
|
|
|
+ }
|
|
|
+ if (this.isAJAX) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.isAJAX = true;
|
|
|
+ this.fromData.school_id = uni.getStorageSync('school_id');
|
|
|
+ // this.fromData.site_id = uni.getStorageSync('site_id');
|
|
|
+ orderCreate(this.fromData).then((res) => {
|
|
|
+ if (res.code === 1) {
|
|
|
+ orderPay({
|
|
|
+ order_id: res.data.order_id,
|
|
|
+ pay_type: 1
|
|
|
+ }).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">
|
|
|
+ .yhq-icons {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ margin: 0 6rpx 0 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .code-box {
|
|
|
+ min-height: 100rpx;
|
|
|
+ background-color: #F3F4F6;
|
|
|
+ border-radius: 12rpx;
|
|
|
+ padding: 24rpx 24rpx 0 24rpx;
|
|
|
+
|
|
|
+ .code-item {
|
|
|
+ width: 156rpx;
|
|
|
+ margin-right: 52rpx;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .code-item:nth-child(3n) {
|
|
|
+ margin-right: 0 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .tz-an-f {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .tz-an {
|
|
|
+ position: absolute;
|
|
|
+ right: 16rpx;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .r-right {
|
|
|
+ margin-top: 24rpx;
|
|
|
+ width: 88rpx;
|
|
|
+ height: 52rpx;
|
|
|
+ border-radius: 200rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .r-y {
|
|
|
+ width: 44rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 200rpx;
|
|
|
+ position: absolute;
|
|
|
+ top: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .s-r {
|
|
|
+ background-color: #41ABF5;
|
|
|
+ transition: all 1s;
|
|
|
+
|
|
|
+ .r-y {
|
|
|
+ right: 4rpx !important;
|
|
|
+ transition: all 1s;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .n-r {
|
|
|
+ background-color: #ccc;
|
|
|
+ transition: all 1s;
|
|
|
+
|
|
|
+ .r-y {
|
|
|
+ left: 4rpx !important;
|
|
|
+ transition: all 1s;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .goods-img {
|
|
|
+ width: 108rpx;
|
|
|
+ height: 108rpx;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ margin-right: 16rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .right-icon {
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .w376 {
|
|
|
+ width: 376rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .w570 {
|
|
|
+ width: 570rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .sd-box {
|
|
|
+ padding: 3rpx 16rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ background: rgba(251, 61, 3, 0.1);
|
|
|
+ border-radius: 8rpx 8rpx 8rpx 8rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .confirm-order-box {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+
|
|
|
+ .wx-box {
|
|
|
+ image {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .box-input {
|
|
|
+ border-bottom: 2rpx solid #F9F9F9;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|