|
|
@@ -1,351 +1,376 @@
|
|
|
<template>
|
|
|
- <div class="app-content">
|
|
|
- <!-- tabs -->
|
|
|
- <app-tabs :tabs="tabs" :currentTab="tabIndex" :isFixed="true" :borderLeft="true" @change="tabChange" itemWidth="50%" />
|
|
|
- <!-- 配送 -->
|
|
|
- <form @submit="formSubmit">
|
|
|
- <block v-if="tabIndex == 0">
|
|
|
- <app-delivery-module ref="appDelivery" @changeAddress="changeAddress" />
|
|
|
- </block>
|
|
|
- <!-- 自取 -->
|
|
|
- <block v-else>
|
|
|
- <!-- 收花人 -->
|
|
|
- <div class="module-com">
|
|
|
- <!-- <tui-list-cell class="line-cell" :hover="false">
|
|
|
- <div class="tui-title">收花人姓名</div>
|
|
|
- <input placeholder-class="phcolor" class="tui-input" name="name" placeholder="请输入姓名" maxlength="50" type="number" />
|
|
|
- </tui-list-cell>-->
|
|
|
- <tui-list-cell class="line-cell" :hover="false">
|
|
|
- <div class="tui-title">手机号</div>
|
|
|
- <input v-model="mentionForm.bookMobile" placeholder-class="phcolor" class="tui-input" name="phone" placeholder="请输入手机号" type="number" />
|
|
|
- </tui-list-cell>
|
|
|
- </div>
|
|
|
- </block>
|
|
|
+ <div class="app-content">
|
|
|
+ <!-- tabs -->
|
|
|
+ <app-tabs
|
|
|
+ :tabs="tabs"
|
|
|
+ :currentTab="tabIndex"
|
|
|
+ :isFixed="true"
|
|
|
+ :borderLeft="true"
|
|
|
+ @change="tabChange"
|
|
|
+ itemWidth="50%"
|
|
|
+ />
|
|
|
+ <!-- 配送 -->
|
|
|
+ <form @submit="formSubmit">
|
|
|
+ <block v-if="tabIndex == 0">
|
|
|
+ <app-delivery-module ref="appDelivery" @changeAddress="changeAddress" />
|
|
|
+ </block>
|
|
|
+ <!-- 自取 -->
|
|
|
+ <block v-else>
|
|
|
+ <!-- 收花人 -->
|
|
|
+ <div class="module-com">
|
|
|
+ <tui-list-cell class="line-cell" :hover="false">
|
|
|
+ <div class="tui-title">手机号</div>
|
|
|
+ <input
|
|
|
+ v-model="mentionForm.bookMobile"
|
|
|
+ placeholder-class="phcolor"
|
|
|
+ class="tui-input"
|
|
|
+ name="phone"
|
|
|
+ placeholder="请输入手机号"
|
|
|
+ type="number"
|
|
|
+ />
|
|
|
+ </tui-list-cell>
|
|
|
+ </div>
|
|
|
+ </block>
|
|
|
|
|
|
- <!-- 商品金额 -->
|
|
|
- <div class="module-com shop-price-wrap">
|
|
|
- <div class="module-tit">商品信息</div>
|
|
|
- <div class="module-det">
|
|
|
- <app-list-module v-if="!$util.isEmpty(goodsInfo)" :info="goodsInfo" />
|
|
|
- <div class="shop-prompt" v-if="!$util.isEmpty(this.orderShop)" @click="showAlert = true">
|
|
|
- <div>
|
|
|
- <span>{{ `运费(${this.orderShop.freight.first}公里)` }}</span>
|
|
|
- <i class="iconfont iconchangjianwentixiangguanwenti2"></i>
|
|
|
- </div>
|
|
|
- <div>￥{{ freightPrice }}</div>
|
|
|
- </div>
|
|
|
- <div class="shop-prompt">
|
|
|
- <div>总计</div>
|
|
|
- <div>￥{{ goodsInfo.price * option.goodsNum }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 可选优惠 -->
|
|
|
- <div class="module-com discount-wrap" v-if="!$util.isEmpty(discountArr)">
|
|
|
- <div class="module-tit">可选优惠</div>
|
|
|
- <div class="module-det">
|
|
|
- <app-coupon-sel ref="couponSel" :price="goodsInfo.price * option.goodsNum" :discountArr="['member', 'coupon']" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <!-- 商品金额 -->
|
|
|
+ <div class="module-com shop-price-wrap">
|
|
|
+ <div class="module-tit">商品信息</div>
|
|
|
+ <div class="module-det">
|
|
|
+ <app-list-module v-if="!$util.isEmpty(goodsInfo)" :info="goodsInfo" />
|
|
|
|
|
|
- <!-- 匿名派送 -->
|
|
|
- <!-- <div class="none-name-delivery flex-center">
|
|
|
- <checkbox class="ljd-checkbox" @change="anonymityChange"></checkbox>
|
|
|
- <span class="none-name-text">匿名派送</span>
|
|
|
- </div>-->
|
|
|
+ <div class="shop-prompt" v-if="!$util.isEmpty(this.orderShop)" @click="showAlert = true">
|
|
|
+ <div>
|
|
|
+ <span>{{ `运费(${this.orderShop.freight.first}公里)` }}</span>
|
|
|
+ <i class="iconfont iconchangjianwentixiangguanwenti2"></i>
|
|
|
+ </div>
|
|
|
+ <div>￥{{ freightPrice }}</div>
|
|
|
+ </div>
|
|
|
|
|
|
- <app-trademark />
|
|
|
- <!-- 按钮 -->
|
|
|
- <div class="page-btn app-footer">
|
|
|
- <div class="flex-center">
|
|
|
- <span>应付款</span>
|
|
|
- <span class="app-price">
|
|
|
- <span>￥</span>
|
|
|
- <span class="app-size-40">{{ totalPrice }}</span>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- <!-- <button class="button-com red" @click="confirmFn" formType="submit">确认</button> -->
|
|
|
- <button class="button-com red" formType="submit">确认</button>
|
|
|
- </div>
|
|
|
- </form>
|
|
|
- <!-- 弹窗 -->
|
|
|
- <alert-module :show="showAlert" @click="hideAlert" @cancel="hideAlert">
|
|
|
- <div class="alt-content" v-if="!$util.isEmpty(this.orderShop)">
|
|
|
- <div>{{ `${this.orderShop.freight.first}公里内免运费` }}</div>
|
|
|
- <div>
|
|
|
- <span>超过</span>
|
|
|
- <span class="app-price">{{ `${this.orderShop.freight.first}公里` }}</span>
|
|
|
- <span>每增加1公里</span>
|
|
|
- <span class="app-price">{{ `+${this.orderShop.freight.add}元` }}</span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </alert-module>
|
|
|
- </div>
|
|
|
+ <div class="shop-prompt">
|
|
|
+ <div>总计</div>
|
|
|
+ <div>￥{{ goodsInfo.price * option.goodsNum }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 可选优惠 -->
|
|
|
+ <div class="module-com discount-wrap" v-if="!$util.isEmpty(discountArr)">
|
|
|
+ <div class="module-tit">可选优惠</div>
|
|
|
+ <div class="module-det">
|
|
|
+ <app-coupon-sel
|
|
|
+ ref="couponSel"
|
|
|
+ :price="goodsInfo.price * option.goodsNum"
|
|
|
+ :discountArr="['member', 'coupon']"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <app-trademark />
|
|
|
+ <!-- 按钮 -->
|
|
|
+ <div class="page-btn app-footer">
|
|
|
+ <div class="flex-center">
|
|
|
+ <span>应付款</span>
|
|
|
+ <span class="app-price">
|
|
|
+ <span>￥</span>
|
|
|
+ <span class="app-size-40">{{ totalPrice(123) }}</span>
|
|
|
+ </span>
|
|
|
+ </div>
|
|
|
+ <button class="button-com red" formType="submit">确认</button>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ <!-- 弹窗 -->
|
|
|
+ <alert-module :show="showAlert" @click="hideAlert" @cancel="hideAlert">
|
|
|
+ <div class="alt-content" v-if="!$util.isEmpty(this.orderShop)">
|
|
|
+ <div>{{ `${this.orderShop.freight.first}公里内免运费` }}</div>
|
|
|
+ <div>
|
|
|
+ <span>超过</span>
|
|
|
+ <span class="app-price">{{ `${this.orderShop.freight.first}公里` }}</span>
|
|
|
+ <span>每增加1公里</span>
|
|
|
+ <span class="app-price">{{ `+${this.orderShop.freight.add}元` }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </alert-module>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import { mapGetters } from 'vuex'
|
|
|
- import AppTabs from '@/components/plugin/tabs'
|
|
|
- import TuiListCell from '@/components/plugin/list-cell'
|
|
|
- import AppDeliveryModule from '@/components/app-delivery'
|
|
|
- import AppTrademark from '@/components/module/app-trademark'
|
|
|
- import AppListModule from '@/components/module/app-order-list'
|
|
|
- import AppCouponSel from '@/components/app-coupon-sel'
|
|
|
- import AlertModule from '@/components/plugin/alert'
|
|
|
- const form = require('@/utils/formValidation.js')
|
|
|
- import { calcDistance } from '@/utils/common'
|
|
|
- // api
|
|
|
- import { getShopUser } from '@/utils/auth'
|
|
|
- import { getOrderShop } from '@/utils/config'
|
|
|
- import { createOrder } from '@/api/order'
|
|
|
- export default {
|
|
|
- name: 'order-buy',
|
|
|
- components: {
|
|
|
- AppTabs,
|
|
|
- AppDeliveryModule,
|
|
|
- TuiListCell,
|
|
|
- AppListModule,
|
|
|
- AppCouponSel,
|
|
|
- AppTrademark,
|
|
|
- AlertModule
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- goodsInfo: {},
|
|
|
- tabIndex: 0,
|
|
|
- tabs: [
|
|
|
- {
|
|
|
- name: '帮我送'
|
|
|
- },
|
|
|
- {
|
|
|
- name: '到店取'
|
|
|
- }
|
|
|
- ],
|
|
|
- showAlert: false,
|
|
|
- // form
|
|
|
- // 初始form
|
|
|
- form: {
|
|
|
- anonymity: '0', // 是否匿名 0不 1要
|
|
|
- sendDistance: '', // 配送距离，根据腾讯js进行计算
|
|
|
- goodsId: '', // 【商城下单特有字段】商品id
|
|
|
- goodsStyleId: '', // 【商城下单特有字段】商品款式id
|
|
|
- goodsNum: '', // 【商城下单特有字段】商品数量
|
|
|
- couponId: '0', // 优惠券id，默认0没有使用优惠券
|
|
|
- receiveLat: '', // 收花人纬度
|
|
|
- receiveLong: '' // 收花人经度
|
|
|
- },
|
|
|
- // 自提form
|
|
|
- mentionForm: {
|
|
|
- bookMobile: ''
|
|
|
- },
|
|
|
- discountArr: false,
|
|
|
- // 运费
|
|
|
- freightPrice: 0
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- ...mapGetters({ orderShop: 'getOrderShop' }),
|
|
|
- ...mapGetters({ shopUser: 'getShopUser' }),
|
|
|
- // 计算总金额
|
|
|
- totalPrice() {
|
|
|
- let totalPrice = this.goodsInfo.price * this.option.goodsNum - this.freightPrice
|
|
|
- console.log('this.shopUser', this.shopUser)
|
|
|
- // let discountMember = this.$util.isEmpty(this.shopUser) ? this.shopUser.userAsset.discount * totalPrice : 1 * totalPrice
|
|
|
- // discountMember = discountMember / 10
|
|
|
- // return discountMember.toFixed(2)
|
|
|
- return totalPrice.toFixed(2)
|
|
|
- },
|
|
|
- },
|
|
|
- onLoad(option) {
|
|
|
- // this.init()
|
|
|
- },
|
|
|
- methods: {
|
|
|
- init() {
|
|
|
- let goodsInfo = uni.getStorageSync('buyGoodsDetil')
|
|
|
- goodsInfo.price = this.option.goodsStyleId ? goodsInfo.goodsStyleList[this.option.selIndex].price : goodsInfo.price
|
|
|
- // if (this.$util.isEmpty(goodsInfo)) {
|
|
|
- // this.$util.pageTo({
|
|
|
- // url: `/pages/goods/detail`,
|
|
|
- // query: {
|
|
|
- // id: this.option.goodsId
|
|
|
- // }
|
|
|
- // })
|
|
|
- // return false
|
|
|
- // }
|
|
|
- getOrderShop().then(() => {
|
|
|
- this.$refs.couponSel._getUserDiscount().then(status => {
|
|
|
- this.discountArr = status
|
|
|
- })
|
|
|
-
|
|
|
- if (!this.$util.isEmpty(this.$refs.appDelivery.region) && this.$refs.appDelivery.region.latitude) {
|
|
|
- // 计算距离价格
|
|
|
- this.freightPrice = calcDistance(this.orderShop.shop, this.$refs.appDelivery.region, this.orderShop.freight)
|
|
|
- }
|
|
|
- })
|
|
|
- getShopUser()
|
|
|
- goodsInfo.buyNum = this.option.goodsNum
|
|
|
- this.goodsInfo = goodsInfo
|
|
|
- // 初始化上个页面带入的值
|
|
|
- Object.keys(this.form).forEach((i, index) => {
|
|
|
- this.form[i] = this.option[i]
|
|
|
- })
|
|
|
- },
|
|
|
- // api
|
|
|
- // 生成订单
|
|
|
- createOrderFn() {
|
|
|
- let addForm = {}
|
|
|
- let form = this.tabIndex == 0 ? this.$refs.appDelivery.form : this.mentionForm
|
|
|
- let region = this.tabIndex == 0 ? this.$refs.appDelivery.region : {}
|
|
|
- if (this.$refs.couponSel) {
|
|
|
- addForm.couponId = this.$refs.couponSel.couponId
|
|
|
- }
|
|
|
- createOrder({
|
|
|
- needSend: this.tabIndex == 0 ? '1' : '0',
|
|
|
- ...form,
|
|
|
- ...this.form,
|
|
|
- ...addForm,
|
|
|
- ...region
|
|
|
- }).then(res => {
|
|
|
- uni.removeStorageSync('buyGoodsDetil')
|
|
|
- this.$util.pageTo({
|
|
|
- url: '/pages/callback/index',
|
|
|
- query: {
|
|
|
- pageStatus: 1,
|
|
|
- ...res.data
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- },
|
|
|
- // operate
|
|
|
- confirmFn() {
|
|
|
- console.log(this.$refs.appDelivery)
|
|
|
- this.createOrderFn()
|
|
|
- },
|
|
|
- tabChange(e) {
|
|
|
- this.tabIndex = e.index
|
|
|
- },
|
|
|
- hideAlert() {
|
|
|
- this.showAlert = false
|
|
|
- },
|
|
|
- anonymityChange(e) {
|
|
|
- this.form.anonymity = this.form.anonymity == 1 ? 0 : 1
|
|
|
- },
|
|
|
- // 选择地址
|
|
|
- changeAddress(e) {
|
|
|
- // 计算距离价格
|
|
|
- this.freightPrice = calcDistance(this.orderShop.shop, this.$refs.appDelivery.region, this.orderShop.freight)
|
|
|
- },
|
|
|
- // 表单验证
|
|
|
- formSubmit(e) {
|
|
|
- console.log(e)
|
|
|
- // 表单规则
|
|
|
- let rules = [
|
|
|
- // {
|
|
|
- // name: 'receiveUserName',
|
|
|
- // rule: ['required'],
|
|
|
- // msg: ['请输入姓名']
|
|
|
- // }
|
|
|
- ]
|
|
|
- // 进行表单检查
|
|
|
- let formData = e.detail.value
|
|
|
- let checkRes = form.validation(formData, rules)
|
|
|
- // 验证通过!
|
|
|
- if (!checkRes) {
|
|
|
- this.confirmFn()
|
|
|
- } else {
|
|
|
- this.$msg(checkRes)
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+import { mapGetters } from "vuex";
|
|
|
+import AppTabs from "@/components/plugin/tabs";
|
|
|
+import TuiListCell from "@/components/plugin/list-cell";
|
|
|
+import AppDeliveryModule from "@/components/app-delivery";
|
|
|
+import AppTrademark from "@/components/module/app-trademark";
|
|
|
+import AppListModule from "@/components/module/app-order-list";
|
|
|
+import AppCouponSel from "@/components/app-coupon-sel";
|
|
|
+import AlertModule from "@/components/plugin/alert";
|
|
|
+const form = require("@/utils/formValidation.js");
|
|
|
+import { calcDistance } from "@/utils/common";
|
|
|
+import { getShopUser } from "@/utils/auth";
|
|
|
+import { getOrderShop } from "@/utils/config";
|
|
|
+import { createOrder } from "@/api/order";
|
|
|
+export default {
|
|
|
+ name: "order-buy",
|
|
|
+ components: {
|
|
|
+ AppTabs,
|
|
|
+ AppDeliveryModule,
|
|
|
+ TuiListCell,
|
|
|
+ AppListModule,
|
|
|
+ AppCouponSel,
|
|
|
+ AppTrademark,
|
|
|
+ AlertModule
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ goodsInfo: {},
|
|
|
+ tabIndex: 0,
|
|
|
+ tabs: [
|
|
|
+ {
|
|
|
+ name: "帮我送"
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "到店取"
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ showAlert: false,
|
|
|
+ // form
|
|
|
+ // 初始form
|
|
|
+ form: {
|
|
|
+ anonymity: "0", // 是否匿名 0不 1要
|
|
|
+ sendDistance: "", // 配送距离，根据腾讯js进行计算
|
|
|
+ goodsId: "", // 【商城下单特有字段】商品id
|
|
|
+ goodsStyleId: "", // 【商城下单特有字段】商品款式id
|
|
|
+ goodsNum: "", // 【商城下单特有字段】商品数量
|
|
|
+ couponId: "0", // 优惠券id，默认0没有使用优惠券
|
|
|
+ receiveLat: "", // 收花人纬度
|
|
|
+ receiveLong: "" // 收花人经度
|
|
|
+ },
|
|
|
+ // 自提form
|
|
|
+ mentionForm: {
|
|
|
+ bookMobile: ""
|
|
|
+ },
|
|
|
+ discountArr: false,
|
|
|
+ // 运费
|
|
|
+ freightPrice: 0,
|
|
|
+ goodsNum: 1,
|
|
|
+ orderShop:{
|
|
|
+ freight:{
|
|
|
+ add:2,
|
|
|
+ first:5
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+ computed: {
|
|
|
+ ...mapGetters({ orderShop: "getOrderShop" }),
|
|
|
+ ...mapGetters({ shopUser: "getShopUser" }),
|
|
|
+ // 计算总金额
|
|
|
+ totalPrice() {
|
|
|
+ return function() {
|
|
|
+ let totalPrice =
|
|
|
+ this.goodsInfo.price * this.goodsNum - this.freightPrice;
|
|
|
+ return totalPrice.toFixed(2);
|
|
|
+ };
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ this.goodsNum = option.goodsNum;
|
|
|
+ // this.init()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ init() {
|
|
|
+ let goodsInfo = uni.getStorageSync("buyGoodsDetil");
|
|
|
+ goodsInfo.price = this.option.goodsStyleId
|
|
|
+ ? goodsInfo.goodsStyleList[this.option.selIndex].price
|
|
|
+ : goodsInfo.price;
|
|
|
+ // if (this.$util.isEmpty(goodsInfo)) {
|
|
|
+ // this.$util.pageTo({
|
|
|
+ // url: `/pages/goods/detail`,
|
|
|
+ // query: {
|
|
|
+ // id: this.option.goodsId
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ // return false
|
|
|
+ // }
|
|
|
+ getOrderShop().then(() => {
|
|
|
+ this.$refs.couponSel._getUserDiscount().then(status => {
|
|
|
+ this.discountArr = status;
|
|
|
+ });
|
|
|
+
|
|
|
+ if (
|
|
|
+ !this.$util.isEmpty(this.$refs.appDelivery.region) &&
|
|
|
+ this.$refs.appDelivery.region.latitude
|
|
|
+ ) {
|
|
|
+ // 计算距离价格
|
|
|
+ this.freightPrice = calcDistance(
|
|
|
+ this.orderShop.shop,
|
|
|
+ this.$refs.appDelivery.region,
|
|
|
+ this.orderShop.freight
|
|
|
+ );
|
|
|
+ }
|
|
|
+ });
|
|
|
+ getShopUser();
|
|
|
+ goodsInfo.buyNum = this.option.goodsNum;
|
|
|
+ this.goodsInfo = goodsInfo;
|
|
|
+ // 初始化上个页面带入的值
|
|
|
+ Object.keys(this.form).forEach((i, index) => {
|
|
|
+ this.form[i] = this.option[i];
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 生成订单
|
|
|
+ createOrderFn() {
|
|
|
+ let addForm = {};
|
|
|
+ let form =
|
|
|
+ this.tabIndex == 0 ? this.$refs.appDelivery.form : this.mentionForm;
|
|
|
+ let region = this.tabIndex == 0 ? this.$refs.appDelivery.region : {};
|
|
|
+ if (this.$refs.couponSel) {
|
|
|
+ addForm.couponId = this.$refs.couponSel.couponId;
|
|
|
+ }
|
|
|
+ createOrder({
|
|
|
+ needSend: this.tabIndex == 0 ? "1" : "0",
|
|
|
+ ...form,
|
|
|
+ ...this.form,
|
|
|
+ ...addForm,
|
|
|
+ ...region
|
|
|
+ }).then(res => {
|
|
|
+ uni.removeStorageSync("buyGoodsDetil");
|
|
|
+ this.$util.pageTo({
|
|
|
+ url: "/pages/callback/index",
|
|
|
+ query: {
|
|
|
+ pageStatus: 1,
|
|
|
+ ...res.data
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ confirmFn() {
|
|
|
+ console.log(this.$refs.appDelivery);
|
|
|
+ this.createOrderFn();
|
|
|
+ },
|
|
|
+ tabChange(e) {
|
|
|
+ this.tabIndex = e.index;
|
|
|
+ },
|
|
|
+ hideAlert() {
|
|
|
+ this.showAlert = false;
|
|
|
+ },
|
|
|
+ anonymityChange(e) {
|
|
|
+ this.form.anonymity = this.form.anonymity == 1 ? 0 : 1;
|
|
|
+ },
|
|
|
+ // 选择地址
|
|
|
+ changeAddress(e) {
|
|
|
+ // 计算距离价格
|
|
|
+ this.freightPrice = calcDistance(
|
|
|
+ this.orderShop.shop,
|
|
|
+ this.$refs.appDelivery.region,
|
|
|
+ this.orderShop.freight
|
|
|
+ );
|
|
|
+ },
|
|
|
+ // 表单验证
|
|
|
+ formSubmit(e) {
|
|
|
+ let rules = [
|
|
|
+ // {
|
|
|
+ // name: 'receiveUserName',
|
|
|
+ // rule: ['required'],
|
|
|
+ // msg: ['请输入姓名']
|
|
|
+ // }
|
|
|
+ ];
|
|
|
+ // 进行表单检查
|
|
|
+ let formData = e.detail.value;
|
|
|
+ let checkRes = form.validation(formData, rules);
|
|
|
+ // 验证通过!
|
|
|
+ if (!checkRes) {
|
|
|
+ this.confirmFn();
|
|
|
+ } else {
|
|
|
+ this.$msg(checkRes);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang='scss' scoped>
|
|
|
- .app-content {
|
|
|
- padding-top: 100px;
|
|
|
- padding-bottom: 120px;
|
|
|
- min-height: calc(100vh - 220px);
|
|
|
- .module-com {
|
|
|
- margin-bottom: 20px;
|
|
|
- background-color: #fff;
|
|
|
- .module-tit {
|
|
|
- padding: 20px 18px;
|
|
|
- font-size: 28px;
|
|
|
- font-weight: 600;
|
|
|
- border-bottom: 1px solid $borderColor;
|
|
|
- }
|
|
|
- .module-det {
|
|
|
- padding: 0 30px;
|
|
|
- }
|
|
|
- }
|
|
|
- // 公共
|
|
|
- .line-cell {
|
|
|
- .tui-title {
|
|
|
- width: 210px;
|
|
|
- color: $fontColor2;
|
|
|
- }
|
|
|
- .tui-input {
|
|
|
- width: calc(100% - 210px);
|
|
|
- font-size: 28px;
|
|
|
- }
|
|
|
- .tui-placeholder {
|
|
|
- color: #ccc;
|
|
|
- }
|
|
|
- .phcolor {
|
|
|
- color: #ccc;
|
|
|
- }
|
|
|
- }
|
|
|
- // 商品金额
|
|
|
- .shop-price-wrap {
|
|
|
- .module-det {
|
|
|
- padding-bottom: 20px;
|
|
|
- }
|
|
|
- .shop-prompt {
|
|
|
- @include disFlex(center, space-between);
|
|
|
- color: $fontColor2;
|
|
|
- margin-top: 20px;
|
|
|
- .iconchangjianwentixiangguanwenti2 {
|
|
|
- color: #ccc;
|
|
|
- margin-left: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- // 可选优惠
|
|
|
- .discount-wrap {
|
|
|
- .module-det {
|
|
|
- padding-top: 20px;
|
|
|
- padding-bottom: 20px;
|
|
|
- }
|
|
|
- }
|
|
|
- // 匿名派送
|
|
|
- .none-name-delivery {
|
|
|
- padding-left: 30px;
|
|
|
- margin-top: 40px;
|
|
|
- .none-name-text {
|
|
|
- margin-left: 14px;
|
|
|
- color: $fontColor2;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .page-btn {
|
|
|
- width: calc(100% - 60px);
|
|
|
- @include disFlex(center, space-between);
|
|
|
- padding: 0 30px;
|
|
|
- .app-price {
|
|
|
- margin-bottom: 8px;
|
|
|
- margin-left: 4px;
|
|
|
- }
|
|
|
- .red {
|
|
|
- width: 270px;
|
|
|
- }
|
|
|
- }
|
|
|
- // 弹窗
|
|
|
- /deep/.tui-alert-content {
|
|
|
- padding: 40px 40px;
|
|
|
- }
|
|
|
- .alt-content {
|
|
|
- & > div {
|
|
|
- margin: 10px 0;
|
|
|
- }
|
|
|
- }
|
|
|
+.app-content {
|
|
|
+ padding-top: 100px;
|
|
|
+ padding-bottom: 120px;
|
|
|
+ min-height: calc(100vh - 220px);
|
|
|
+ .module-com {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ background-color: #fff;
|
|
|
+ .module-tit {
|
|
|
+ padding: 20px 18px;
|
|
|
+ font-size: 28px;
|
|
|
+ font-weight: 600;
|
|
|
+ border-bottom: 1px solid $borderColor;
|
|
|
+ }
|
|
|
+ .module-det {
|
|
|
+ padding: 0 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 公共
|
|
|
+ .line-cell {
|
|
|
+ .tui-title {
|
|
|
+ width: 210px;
|
|
|
+ color: $fontColor2;
|
|
|
+ }
|
|
|
+ .tui-input {
|
|
|
+ width: calc(100% - 210px);
|
|
|
+ font-size: 28px;
|
|
|
+ }
|
|
|
+ .tui-placeholder {
|
|
|
+ color: #ccc;
|
|
|
+ }
|
|
|
+ .phcolor {
|
|
|
+ color: #ccc;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 商品金额
|
|
|
+ .shop-price-wrap {
|
|
|
+ .module-det {
|
|
|
+ padding-bottom: 20px;
|
|
|
+ }
|
|
|
+ .shop-prompt {
|
|
|
+ @include disFlex(center, space-between);
|
|
|
+ color: $fontColor2;
|
|
|
+ margin-top: 20px;
|
|
|
+ .iconchangjianwentixiangguanwenti2 {
|
|
|
+ color: #ccc;
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 可选优惠
|
|
|
+ .discount-wrap {
|
|
|
+ .module-det {
|
|
|
+ padding-top: 20px;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 匿名派送
|
|
|
+ .none-name-delivery {
|
|
|
+ padding-left: 30px;
|
|
|
+ margin-top: 40px;
|
|
|
+ .none-name-text {
|
|
|
+ margin-left: 14px;
|
|
|
+ color: $fontColor2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.page-btn {
|
|
|
+ width: calc(100% - 60px);
|
|
|
+ @include disFlex(center, space-between);
|
|
|
+ padding: 0 30px;
|
|
|
+ .app-price {
|
|
|
+ margin-bottom: 8px;
|
|
|
+ margin-left: 4px;
|
|
|
+ }
|
|
|
+ .red {
|
|
|
+ width: 270px;
|
|
|
+ }
|
|
|
+}
|
|
|
+// 弹窗
|
|
|
+/deep/.tui-alert-content {
|
|
|
+ padding: 40px 40px;
|
|
|
+}
|
|
|
+.alt-content {
|
|
|
+ & > div {
|
|
|
+ margin: 10px 0;
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
shish