Files
crmeb-mp/pages/behalf/order_confirm/index.vue
karlcarlo a5c5d753b6 feat: 添加静态资源文件及基础组件
- 新增大量图片资源,包括图标、背景图、海报等,用于页面展示
- 添加字体文件及样式配置,支持自定义字体
- 引入 uni-ui 组件库,包括图标、弹窗、日期选择器等常用组件
- 添加网络状态监听、加密工具等基础工具函数
- 配置 Vuex 状态管理,包括购物车数量、热门搜索词等
- 增加页面组件,如用户协议、分销信息、提现状态等
- 配置项目构建和忽略文件,优化开发体验
2026-02-26 17:59:51 +08:00

1380 lines
56 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<template>
<view>
<view class="w-full relative z-99 gradient-box" :style="{ 'padding-top': sysHeight + 'px' }">
<view class="w-full px-20 pl-20 h-80 flex-between-center">
<text class="iconfont icon-ic_leftarrow fs-40 text--w111-fff" @click="goPage(3)"></text>
<text class="fs-34 fw-500 text--w111-fff">提交订单</text>
<text></text>
</view>
<view class="px-20 mt-30">
<view class="allAddress">
<!-- isDisplay 0 两个都展示 1 展示配送 2展示自提 -->
<!-- store_self_mention 自提开关 -->
<view class="h-96 relative" v-if="isDisplay == 0 && store_self_mention">
<view class="w-full abs-lb rd-t-24rpx flex bg--w111-fff fw-500">
<view
class="flex-center w-50p h-76 fs-28 rd-lt-24rpx z-2"
:class="shippingType == 0 ? 'bg--w111-fff text-primary-con' : 'bg-primary-light'"
@tap="addressType(0)"
>
快递配送
</view>
<view
class="flex-center w-50p h-76 fs-28 rd-rt-24rpx z-2"
:class="shippingType == 1 ? 'bg--w111-fff text-primary-con' : 'bg-primary-light'"
@tap="addressType(1)"
>
到店自提
</view>
</view>
<!-- 选中放大样式 -->
<view class="w-50p rd-t-24rpx bg--w111-fff h-96" :class="shippingType == 0 ? 'abs-lt' : 'abs-rt'">
<view class="w-full h-full relative active-card"></view>
</view>
</view>
<view class="address add1 flex-between-center" :class="[1, 2].includes(isDisplay) ? 'rd-24rpx' : 'rd-b-24rpx'" @tap="onAddress()" v-if="shippingType == 0">
<view v-if="addressInfo.real_name">
<view class="fs-26 text--w111-666 lh-36rpx">{{ addressInfo.province }}{{ addressInfo.city }}{{ addressInfo.district }}</view>
<view class="fs-30 text--w111-333 lh-42rpx fw-500 mt-8">{{ addressInfo.detail }}</view>
<view class="fs-26 text--w111-666 lh-34rpx mt-10">
<text>{{ addressInfo.real_name }}</text>
<text class="pl-20">{{ addressInfo.phone }}</text>
</view>
</view>
<view class="fs-30 text--w111-333 fw-500 lh-42rpx flex-y-center" v-else>
<image src="@/static/img/location_order_icon.png" class="w-32 h-32"></image>
<text class="pl-8">设置收货地址</text>
</view>
<text class="iconfont icon-ic_rightarrow fs-24 text--w111-999"></text>
</view>
<view class="address add1 acea-row row-between-wrapper" :class="[1, 2].includes(isDisplay) ? 'rd-24rpx' : 'rd-b-24rpx'" v-else>
<block v-if="storeList.length > 0">
<view class="w-full">
<view class="w-full flex-between-center pb-26rpx dashed-b">
<view>
<view class="fs-30 w-410 line1 fw-500 lh-42rpx">{{ system_store.name }}</view>
<view class="fs-22 w-410 line2 text--w111-666 lh-30rpx mt-12">{{ system_store.address }}{{ system_store.detailed_address }}</view>
</view>
<view
class="_map relative"
:style="{ backgroundImage: 'url(' + imgHost + '/statics/images/order/order_map_bg.png' + ')' }"
@tap="showMaoLocation"
>
<view class="store_distance flex-center bg--w111-fff rd-8rpx fs-20 fw-500 line1">距您{{ (range / 1000).toFixed(1) }}km</view>
<view class="store_logo bg--w111-fff rd-8rpx">
<image class="w-full h-full rd-8rpx relative z-2" :src="site_logo"></image>
</view>
</view>
</view>
<view class="flex-1 pt-18 pr-20">
<view class="flex">
<view>
<view class="fs-24 text--w111-999 lh-34rpx">我的姓名</view>
<view class="flex-y-center mt-6">
<input type="text" v-model="userInfo.real_name" :focus="contactsFocus" class="w-78 h-36 fs-26 fw-500 lh-36rpx" />
<text class="iconfont icon-ic_edit fs-28 text--w111-999 pl-16" @tap="clearInput(0)"></text>
</view>
</view>
<view class="pl-46">
<view class="fs-24 text--w111-999 lh-34rpx">我的电话</view>
<view class="flex-y-center mt-6">
<input type="number" v-model="userInfo.phone" :focus="telFocus" class="w-222 h-36 fs-30 fw-500 lh-30rpx" />
<text class="iconfont icon-ic_edit fs-28 text--w111-999 pl-16" @tap="clearInput(1)"></text>
</view>
</view>
</view>
</view>
</view>
<!-- <view class="w-full flex justify-between">
<view class="flex-1 pr-20">
<view class="fs-30 w-full line2 text--w111-333 fw-500 lh-42rpx">{{system_store.detailed_address}}</view>
<view class="flex mt-40">
<view>
<view class="fs-24 text--w111-999 lh-34rpx">我的姓名</view>
<view class="flex-y-center mt-6">
<input type="text" v-model="userInfo.real_name" :focus="contactsFocus" class="w-78 h-36 fs-26 fw-500 lh-36rpx" />
<text class="iconfont icon-ic_edit fs-28 text--w111-999 pl-16" @tap="clearInput(0)"></text>
</view>
</view>
<view class="pl-46">
<view class="fs-24 text--w111-999 lh-34rpx">我的电话</view>
<view class="flex-y-center mt-6">
<input type="number" v-model="userInfo.phone" :focus="telFocus" class="w-222 h-36 fs-30 fw-500 lh-30rpx" />
<text class="iconfont icon-ic_edit fs-28 text--w111-999 pl-16" @tap="clearInput(1)"></text>
</view>
</view>
</view>
</view>
<view class="_map relative"
:style="{backgroundImage:'url('+imgHost+'/statics/images/order/order_map_bg.png'+')'}"
@tap="showMaoLocation">
<view class="store_distance flex-center bg--w111-fff rd-8rpx fs-20 fw-50 line1">距您{{range}}km</view>
<view class="store_logo bg--w111-fff rd-8rpx">
<image class="w-full h-full rd-8rpx" :src="site_logo"></image>
</view>
</view>
</view> -->
</block>
<block v-else>
<view>暂无门店信息</view>
</block>
</view>
<view class="line">
<image src="/static/images/line.jpg"></image>
</view>
</view>
</view>
</view>
<view class="order-submission">
<view class="px-20">
<view class="bg--w111-fff rd-16rpx p-24 my-20 flex-y-center" v-if="userId == 0">
<image src="@/static/images/f.png" class="w-80 h-80 rd-50-p111-"></image>
<view class="flex-1 pl-20">
<view class="fs-28 lh-40rpx fw-500">游客</view>
<view class="fs-24 lh-34rpx text--w111-999 mt-4"></view>
</view>
</view>
<view class="bg--w111-fff rd-16rpx p-24 my-20 flex-y-center" v-else>
<image :src="userInfo.avatar" class="w-80 h-80 rd-50-p111-"></image>
<view class="flex-1 pl-20">
<view class="flex-y-center">
<view class="fs-28 lh-40rpx fw-500">{{ userInfo.nickname }}</view>
<view class="svip flex-center" v-if="userInfo.isMember == 1">SVIP</view>
<view class="vip flex-center" v-if="userInfo.level_status == 1">
<text class="iconfont icon-huiyuandengji"></text>
V{{ userInfo.level_grade }}
</view>
<view class="channel-tag flex-center flex-center fs-18 ml-12" v-if="priceGroup.channelPrice">采购商身份</view>
</view>
<view class="fs-24 lh-34rpx text--w111-999 mt-4">{{ userPhone }}</view>
</view>
</view>
<view class="bg--w111-fff rd-16rpx pt-32 pr-24 pl-24 pb-32">
<view class="flex order_goods" v-for="(item, index) in cartInfo" :key="index">
<view class="w-176 h-176 relative">
<image class="w-176 h-176 rd-16rpx" :src="item.productInfo.attrInfo.image" v-if="item.productInfo.attrInfo"></image>
<image class="w-176 h-176 rd-16rpx" :src="item.productInfo.image" v-else></image>
<view class="over flex-center fs-24 text--w111-fff" v-if="!item.is_valid">{{ shippingType == 1 ? '非自提' : '不送达' }}</view>
</view>
<view class="flex-1 flex-col justify-between pl-20">
<view @click="goDetail(item.productInfo.id)">
<view class="w-464 line1 fs-28 lh-40rpx" :class="item.is_valid ? 'text--w111-333' : 'text--w111-ccc'">{{ item.productInfo.store_name }}</view>
<view class="w-322 fs-22 lh-30rpx line1 mt-12" :class="item.is_valid ? 'text--w111-999' : 'text--w111-ccc'" v-if="item.productInfo.attrInfo">
{{ item.productInfo.attrInfo.suk }}
</view>
<view class="flex items-end flex-wrap mt-12 w-full">
<BaseTag
:text="label.label_name"
:color="label.color"
:background="label.bg_color"
:borderColor="label.border_color"
:circle="label.border_color ? true : false"
:imgSrc="label.icon"
v-for="(label, idx) in item.productInfo.store_label"
:key="idx"
></BaseTag>
</view>
</view>
<view class="flex-between-center">
<baseMoney
:money="item.productInfo.attrInfo ? item.productInfo.attrInfo.price : item.productInfo.price"
symbolSize="20"
integerSize="36"
decimalSize="20"
:color="item.is_valid ? '#333' : '#cccccc'"
weight
></baseMoney>
<view class="flex-y-center" v-if="[0, 6].includes(goodsType) && news == 0">
<text
class="iconfont icon-ic_Reduce fs-24"
:class="item.cart_num > 1 ? 'text--w111-333' : 'text--w111-999'"
@click.stop="addCart(0, item)"
></text>
<input
type="number"
maxlength="3"
class="w-72 h-36 rd-4rpx bg--w111-f5f5f5 flex-center text-center fs-24 text--w111-333 mx-6"
@input="setValue($event, item)"
v-model="item.cart_num"
/>
<text class="iconfont icon-ic_increase fs-24 text--w111-333" @click.stop="addCart(1, item)"></text>
</view>
<text class="fs-28 text--w111-666" v-else>×{{ item.cart_num }}</text>
</view>
</view>
</view>
<view class="cell flex justify-between mt-32" v-if="giftCount > 0">
<text class="text--w111-333 fs-28">赠品</text>
<view class="w-460 flex-y-center justify-end" @tap="showGiftDrawer = true">
<view class="flex">
<view class="w-64 h-64 mr-8" v-for="(item, index) in giveCartInfo" :key="index">
<image class="h-full w-full rd-8rpx" :src="item.productInfo.attrInfo.image" v-if="item.productInfo.attrInfo"></image>
<image class="h-full w-full rd-8rpx" :src="item.productInfo.image" v-else></image>
</view>
<view class="w-64 h-64 rd-8rpx bg--w111-f5f5f5 flex-center mr-8" v-if="giveData.give_coupon.length">
<text class="gold iconfont icon-a-ic_discount1"></text>
</view>
<view class="w-64 h-64 rd-8rpx bg--w111-f5f5f5 flex-center mr-8" v-if="giveData.give_integral > 0">
<text class="gold iconfont icon-ic_badge11"></text>
</view>
</view>
<view class="fs-26 text--w111-666">
共{{ giftCount }}件
<text class="iconfont icon-ic_rightarrow"></text>
</view>
</view>
</view>
<view class="cell flex justify-between flex-y-center mt-32" v-if="textareaStatus">
<text class="text--w111-333 fs-28">留言</text>
<textarea
class="w-450 fs-28 text-right h-auto"
:auto-height="true"
wrap-style="wrap"
max-height="100px"
placeholder-class="placeholder"
placeholder="请先与商家沟通一致再留言哦~"
:always-embed="true"
:adjust-position="true"
cursor-spacing="30"
v-if="!coupon.coupon"
@input="bindHideKeyboard"
:value="mark"
:maxlength="150"
name="mark"
></textarea>
</view>
</view>
<view class="mt-20 bg--w111-fff rd-16rpx pt-32 pr-24 pl-24 pb-32">
<!-- <view class="cell flex-between-center"
v-if="[0, 6].includes(type) && !noCoupon && goodsType != 7 && priceGroup.firstOrderPrice==0"
@tap='couponTap'>
<text class="text--w111-333 fs-28">优惠券</text>
<view>
<text class="text--w111-333 fs-28">{{couponTitle}}</text>
<text class="iconfont icon-ic_rightarrow fs-24 text--w111-999 pl-8"></text>
</view>
</view> -->
<view class="cell flex-between-center" v-if="[0, 6].includes(type) && integral_ratio_status == 1">
<text class="text--w111-333 fs-28">积分抵扣</text>
<view class="flex-y-center">
<view>
{{ useIntegral ? '剩余积分' : '当前积分' }}
<text class="Regular font-color fs-36 pl-8 pr-12">{{ integral || 0 }}</text>
</view>
<text class="iconfont" :class="useIntegral ? 'icon-a-ic_CompleteSelect' : 'icon-ic_unselect text--w111-999'" @tap="ChangeIntegral"></text>
<!-- v-show="integral <= 0 && !useIntegral" -->
</view>
</view>
</view>
<view class="mt-20 bg--w111-fff rd-16rpx pt-32 pr-24 pl-24 pb-32" v-if="type == 4">
<view class="cell flex-between-center">
<text class="text--w111-333 fs-28">可用积分</text>
<text>{{ userInfo.integral }}</text>
</view>
<view class="cell flex-between-center">
<text class="text--w111-333 fs-28">抵扣积分</text>
<text>{{ totalIntegral }}</text>
</view>
</view>
<view class="mt-20 bg--w111-fff rd-16rpx pt-32 pr-24 pl-24 pb-32">
<view class="cell flex-between-center">
<text class="text--w111-333 fs-28">商品总价</text>
<text class="text--w111-333 fs-36 Regular">¥{{ priceGroup.sumPrice }}</text>
</view>
<view class="cell flex-between-center" v-if="priceGroup.channelPrice">
<text class="text--w111-333 fs-28">采购商优惠</text>
<text class="text--w111-333 fs-36 Regular font-color"> -¥{{priceGroup.channelPrice}}</text>
</view>
<view class="cell flex-between-center" v-if="priceGroup.firstOrderPrice > 0">
<text class="text--w111-333 fs-28">新人首单优惠</text>
<text class="text--w111-333 fs-36 Regular font-color">-¥{{ priceGroup.firstOrderPrice }}</text>
</view>
<view class="cell flex-between-center" v-if="priceGroup.storePostage > 0">
<text class="text--w111-333 fs-28">配送运费</text>
<text class="text--w111-333 fs-36 Regular font-color">
¥{{ (parseFloat(priceGroup.storePostage) + parseFloat(priceGroup.storePostageDiscount)).toFixed(2) }}
</text>
</view>
<view class="cell flex-between-center" v-if="priceGroup.vipPrice > 0 && userInfo.vip && [0, 6].includes(type)">
<text class="text--w111-333 fs-28">用户等级优惠</text>
<text class="text--w111-333 fs-36 Regular font-color">-¥{{ parseFloat(priceGroup.vipPrice).toFixed(2) }}</text>
</view>
<view class="cell flex-between-center" v-if="priceGroup.storePostageDiscount > 0">
<text class="text--w111-333 fs-28">会员运费优惠</text>
<text class="text--w111-333 fs-36 Regular font-color">-¥{{ parseFloat(priceGroup.storePostageDiscount).toFixed(2) }}</text>
</view>
<view class="cell flex-between-center" v-if="coupon_price > 0">
<text class="text--w111-333 fs-28">优惠券抵扣</text>
<text class="text--w111-333 fs-36 Regular font-color">-¥{{ parseFloat(coupon_price).toFixed(2) }}</text>
</view>
<view class="cell flex-between-center" v-if="integral_price > 0">
<text class="text--w111-333 fs-28">积分抵扣</text>
<text class="text--w111-333 fs-36 Regular font-color">-¥{{ parseFloat(integral_price).toFixed(2) }}</text>
</view>
<view class="cell flex-between-center" v-for="(item, index) in promotions_detail" :key="index" v-show="parseFloat(item.promotions_price)">
<text class="text--w111-333 fs-28">{{ item.title }}</text>
<text class="text--w111-333 fs-36 Regular font-color">-¥{{ parseFloat(item.promotions_price).toFixed(2) }}</text>
</view>
</view>
</view>
<view class="height-add"></view>
<view class="fixed-lb w-full bg--w111-fff pb-safe">
<view class="h-80 bg--w111-FFF0D1 flex-between-center px-20" v-if="!svip_status && svip_price > 0">
<view class="flex-y-center">
<image src="@/static/img/vip_leval.png" class="w-36 h-36"></image>
<view class="pl-8">
<text class="fs-24 text--w111-7E4B06">开通 SVIP会员 预计省</text>
<text class="font-color fs-28">¥{{ svip_price }}</text>
<text class="fs-24 text--w111-7E4B06">元</text>
</view>
</view>
<view class="fs-24 text--w111-7E4B06" @click="goPage(1, '/pages/annex/vip_paid/index')">
<text>立即开通</text>
<text class="iconfont icon-ic_rightarrow fs-24"></text>
</view>
</view>
<view class="pl-32 pr-20 h-96 flex-between-center">
<view class="flex items-baseline">
<text class="fs-24 fw-500 text--w111-333">合计</text>
<baseMoney :money="totalPrice || 0" symbolSize="26" integerSize="44" decimalSize="26" color="#FF7E00" weight></baseMoney>
<text class="pl-12" v-if="type == 4 && totalIntegral > 0">+{{ totalIntegral }}积分</text>
</view>
<view class="w-168 h-72 rd-36rpx flex-center text--w111-fff fs-26 bg-primary" @tap.stop="payDrawerChange" v-if="canSubmit">提交订单</view>
<view class="w-168 h-72 rd-36rpx flex-center text--w111-fff fs-26 bg-color-hui" v-else>提交订单</view>
</view>
</view>
</view>
<view class="alipaysubmit" v-html="formContent"></view>
<tuiModal :show="isAddress" title="更新地址" content="当前地址功能已更新,请重新修改" @click="handleClick" @cancel="hideModal"></tuiModal>
<!-- 赠品抽屉 -->
<giftDrawer :visible="showGiftDrawer" :giveCartInfo="giveCartInfo" :giveData="giveData" @closeDrawer="closeDrawer"></giftDrawer>
<couponListWindow
:coupon="coupon"
@ChangCouponsClone="ChangCouponsClone"
:openType="openType"
:cartId="cartId"
@ChangCoupons="ChangCoupons"
@ruleToggle="ruleToggle"
></couponListWindow>
<base-drawer
mode="bottom"
:visible="showAddressDrawer"
background-color="transparent"
mask
maskClosable
@close=" () => { showAddressDrawer = false;} ">
<view class="w-full bg--w111-fff rd-t-40rpx py-32">
<view class="text-center fs-32 text--w111-333 fw-500">选择地址</view>
<view class="mt-64 px-32">
<view
class="mb-38 flex-between-center"
v-for="(item, index) in addressList"
:key="index"
:class="{ 'font-num': addressActive == index }"
@tap="tapAddress(index, item)"
>
<text class="iconfont icon-ic_location5 fs-36"></text>
<view class="flex-1 pl-40">
<view class="fs-28 fw-500">
{{ item.real_name }}
<text class="phone">{{ item.phone }}</text>
</view>
<view class="w-560 line1 mt-4">{{ item.province }}{{ item.city }}{{ item.district }}{{ item.street }}{{ item.detail }}</view>
</view>
</view>
<view v-if="!addressList.length">
<emptyPage title="暂无地址信息~" src="/statics/images/noAddress.png"></emptyPage>
</view>
</view>
<view class="mx-20 pb-safe">
<view class="mt-52 h-72 flex-center rd-36px bg-primary fs-26 text--w111-fff" @tap="goAddressPages">添加地址</view>
</view>
</view>
</base-drawer>
<base-drawer
mode="bottom"
:visible="showPayDrawer"
background-color="transparent"
mask
maskClosable
@close=" () => { showPayDrawer = false;} ">
<view class="w-full bg--w111-f5f5f5 rd-t-40rpx py-32">
<view class="text-center fs-32 text--w111-333 fw-500">支付方式</view>
<view class="mt-54 px-32">
<view class="w-full h-136 rd-24rpx bg--w111-fff pay-card flex-between-center" @tap="goPay(0)">
<view class="flex-y-center">
<image class="w-52 h-52" :src="imgHost + '/statics/images/order/yue_pay.png'"></image>
<view class="flex-col ml-20">
<text class="fs-28">线上支付</text>
<text class="pt-8 fs-22 text--w111-999">微信/支付宝扫码支付</text>
</view>
</view>
<text class="iconfont icon-ic_rightarrow fs-32 text--w111-999 "></text>
</view>
<view class="w-full h-136 rd-24rpx bg--w111-fff pay-card flex-between-center mt-24" @tap="goPay(1)">
<view class="flex-y-center">
<image class="w-52 h-52" :src="imgHost + '/statics/images/order/xianxia_pay.png'"></image>
<view class="flex-col ml-20">
<text class="fs-28">线下支付</text>
<text class="pt-8 fs-22 text--w111-999">选择线下付款方式</text>
</view>
</view>
<text class="iconfont icon-ic_rightarrow fs-32 text--w111-999 "></text>
</view>
</view>
<view class="mx-20 pb-safe">
<view class="mt-52 h-72 flex-center rd-36px bg--w111-fff fs-26 text-primary-con btn-border" @tap="showPayDrawer = false">取消</view>
</view>
</view>
</base-drawer>
</view>
</template>
<script>
const CACHE_CITY = {};
let sysHeight = uni.getWindowInfo().statusBarHeight;
import {
orderConfirm,
postOrderComputed,
getCouponsOrderPrice,
orderCreate,
adminUserAddressList,
adminCartNum,
getCashierApi} from '@/api/admin.js';
import { openPaySubscribe } from '@/utils/SubscribeMessage.js';
import { storeListApi, postCartAdd } from '@/api/store.js';
import { CACHE_LONGITUDE, CACHE_LATITUDE } from '@/config/cache.js';
import couponListWindow from '@/components/couponListWindow';
import giftDrawer from '../components/giftDrawer';
import tuiModal from '@/components/tui-modal/index.vue';
import baseDrawer from '@/components/tui-drawer/tui-drawer.vue';
import emptyPage from '@/components/emptyPage.vue';
import { toLogin } from '@/libs/login.js';
import { mapGetters } from 'vuex';
import colors from '@/mixins/color';
import { HTTP_REQUEST_URL } from '@/config/app';
import { Debounce } from '@/utils/validate.js';
export default {
components: {
couponListWindow,
giftDrawer,
tuiModal,
baseDrawer,
emptyPage
},
mixins: [colors],
data() {
return {
imgHost: HTTP_REQUEST_URL,
sysHeight: sysHeight,
addressInfoArea: [],
cityShow: 2,
display: false,
timeranges: [],
isShow: false,
giveData: {
give_integral: 0,
give_coupon: []
},
giveCartInfo: [],
confirm: [], //自定义留言
id: 0,
isAddress: false,
textareaStatus: true,
formContent: '',
payType: 'weixin', //支付方式
openType: 1, //优惠券打开方式 1=使用
active: 0, //支付方式切换
coupon: {
coupon: false,
list: [],
statusTile: '立即使用'
}, //优惠券组件
showAddressDrawer: false, //地址组件
addressInfo: {}, //地址信息
pinkId: 0, //拼团id
addressId: 0, //地址id
couponId: 0, //优惠券id
cartId: '', //购物车id
type: 0, //活动类型
activityId: 0, //活动ID
BargainId: 0,
combinationId: 0,
seckillId: 0,
discountId: 0,
userInfo: {}, //用户信息
mark: '', //备注信息
couponTitle: '请选择', //优惠券
coupon_price: 0, //优惠券抵扣金额
promotions_detail: [], //优惠活动金额明细
useIntegral: false, //是否使用积分
integral_price: 0, //积分抵扣金额
integral: 0,
ChangePrice: 0, //使用积分抵扣变动后的金额
formIds: [], //收集formid
status: 0,
is_address: false,
shippingType: 0,
system_store: {},
storePostage: 0,
mydata: {},
storeList: [],
store_self_mention: 0,
cartInfo: [],
priceGroup: {},
totalPrice: 0,
totalIntegral: 0,
integralRatio: '0',
orderKey: '',
// usableCoupon: {},
offlinePostage: '',
isAuto: false, //没有授权的不会自动授权
isShowAuth: false, //是否隐藏授权
from: '',
news: 1,
integral_ratio_status: 1,
header_type: '',
pay_close: false,
noCoupon: 0,
valid_count: 0,
discount_id: 0,
storeId: 0,
product_type: 1,
newImg: [],
isDisplay: 0,
goodsType: 0,
timerangesIndex: 0,
isFocus: false,
latitude: '',
longitude: '',
site_logo: '',
range: '',
showGiftDrawer: false,
svip_status: false,
svip_price: 0,
contactsFocus: false,
telFocus: false,
userId: 0,
addressList: [],
addressActive: 0,
userPhone: '',
showPayDrawer: false,
isCash: 0,
is_channel: 0
};
},
computed: {
...mapGetters(['isLogin']),
giftCount() {
let count = 0;
if (this.giveCartInfo.length) {
count = this.giveCartInfo.length;
}
if (this.giveData.give_coupon.length) {
count = count + this.giveData.give_coupon.length;
}
if (this.giveData.give_integral > 0) {
count = count + 1;
}
return count;
},
canSubmit() {
if (
(this.shippingType == 0 && this.addressInfo.city) ||
(this.shippingType == 1 && this.userInfo.real_name && this.userInfo.phone && this.userId != 0) ||
(this.shippingType == 1 && this.userId == 0)
) {
return true;
} else {
return false;
}
}
},
onLoad: function (options) {
this.getLocation();
// #ifdef H5
this.from = this.$wechat.isWeixin() ? 'weixin' : 'weixinh5';
// #endif
// #ifdef MP
this.from = 'routine';
// #endif
if (!options.cartId)
return this.$util.Tips(
{
title: '请选择要购买的商品'
},
{
tab: 3,
url: 1
}
);
this.cartId = options.cartId;
this.userId = options.uid;
this.news = options.news;
this.is_address = options.is_address ? true : false;
// #ifndef APP-PLUS
this.textareaStatus = true;
// #endif
if (this.isLogin) {
this.getAddressInfo();
this.getConfirm();
} else {
toLogin();
}
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
uni.$on('refresh', (data) => {
this.addressInfo.province = data.address.province;
this.$set(this.addressInfo, 'city', data.address.city);
this.addressInfo.district = data.address.district;
this.addressInfo.street = data.address.street;
this.addressInfo.detail = data.detail;
this.addressInfo.real_name = data.real_name;
this.addressInfo.phone = data.phone;
this.addressInfo.id = 0;
this.showAddressDrawer = false;
});
},
methods: {
goPay(type) {
this.isCash = type;
this.formVerify();
},
getLocation() {
uni.getLocation({
type: 'gcj02',
success: (res) => {
this.latitude = res.latitude;
this.longitude = res.longitude;
}
});
},
/**
* 获取门店列表数据
*/
getList: function () {
let data = {
page: 1,
limit: 10,
latitude: this.latitude,
longitude: this.longitude
};
storeListApi(data)
.then((res) => {
let list = res.data.list.list || [];
this.$set(this, 'storeList', list);
this.$set(this, 'system_store', list[0]);
this.$set(this, 'storeId', list[0].id);
this.site_logo = res.data.site_logo;
this.range = list[0].range;
this.getConfirm();
})
.catch((err) => {});
},
computedPrice: function () {
let shippingType = this.shippingType;
postOrderComputed(this.orderKey, this.userId, {
addressId: this.addressInfo.id,
useIntegral: this.useIntegral ? 1 : 0,
couponId: this.priceGroup.couponPrice == 0 ? 0 : this.couponId,
shipping_type: parseInt(shippingType) + 1,
payType: this.payType
})
.then((res) => {
let result = res.data.result;
if (result) {
this.totalPrice = result.pay_price;
this.totalIntegral = result.pay_integral;
this.integral_price = result.deduction_price;
this.coupon_price = result.coupon_price;
this.promotions_detail = result.promotions_detail;
this.integral = this.useIntegral ? result.SurplusIntegral : this.userInfo.integral;
this.$set(this.priceGroup, 'storePostage', shippingType == 1 ? 0 : result.pay_postage);
this.$set(this.priceGroup, 'storePostageDiscount', result.storePostageDiscount);
}
})
.catch((err) => {
return this.$util.Tips({
title: err
});
});
},
addressType: function (e) {
let index = e;
this.shippingType = parseInt(index);
if (index == 1) {
this.getList();
} else {
this.getConfirm();
}
},
bindPickerChange: function (e) {
let value = e.detail.value;
this.shippingType = value;
this.computedPrice();
},
ChangCouponsClone: function () {
this.$set(this.coupon, 'coupon', false);
},
/**
* 处理点击优惠券后的事件
*
*/
ChangCoupons: function (index) {
let list = this.coupon.list;
if (list[index].is_use) {
list[index].use_title = '';
list[index].is_use = 0;
this.couponTitle = '请选择';
this.couponId = 0;
} else {
list[index].use_title = '不使用';
list[index].is_use = 1;
this.couponTitle = list[index].title;
this.couponId = list[index].id;
}
this.$set(this.coupon, 'coupon', false);
this.$set(this.coupon, 'list', list);
this.getConfirm(1);
},
ruleToggle(index) {
this.coupon.list[index].ruleshow = !this.coupon.list[index].ruleshow;
},
/**
* 使用积分抵扣
*/
ChangeIntegral: function () {
this.useIntegral = !this.useIntegral;
this.computedPrice();
},
bindHideKeyboard: function (e) {
this.mark = e.detail.value;
},
// 对象转数组
objToArr(data) {
let obj = Object.keys(data);
let m = obj.map((key) => data[key]);
return m;
},
/**
* 获取当前订单详细信息
*
*/
getConfirm: function (numType) {
let that = this;
let shippingType = parseInt(this.shippingType) + 1;
let addressId = 0,
storeid;
if (shippingType == 1) {
addressId = that.addressInfo.id;
storeid = 0;
} else {
addressId = '';
storeid = that.storeId;
}
let body = {
cartId: that.cartId,
new: that.news,
shipping_type: shippingType,
addressId: ''
};
orderConfirm(this.userId, body)
.then((res) => {
if (res.data.upgrade_addr == 1) {
that.id = res.data.addressInfo.id;
this.isAddress = true;
}
that.$set(that, 'goodsType', res.data.type);
that.$set(that, 'userInfo', res.data.userInfo);
that.$set(that, 'userPhone', res.data.userInfo.phone);
that.$set(that, 'integral', res.data.userInfo.integral);
that.$set(that, 'integralRatio', res.data.integralRatio);
that.$set(that, 'offlinePostage', res.data.offlinePostage);
that.$set(that, 'orderKey', res.data.orderKey);
that.$set(that, 'valid_count', res.data.valid_count);
that.$set(that, 'discount_id', res.data.discount_id);
that.$set(that, 'priceGroup', res.data.priceGroup);
that.$set(that, 'type', parseInt(res.data.type));
that.$set(that, 'activityId', parseInt(res.data.activityId));
that.$set(that, 'seckillId', parseInt(res.data.seckill_id));
that.$set(that, 'BargainId', parseInt(res.data.bargain_id));
that.$set(that, 'combinationId', parseInt(res.data.combination_id));
that.$set(that, 'discountId', parseInt(res.data.discount_id));
that.$set(that, 'integral_ratio_status', res.data.integral_ratio_status);
that.$set(that, 'store_self_mention', res.data.store_self_mention);
that.$set(that, 'svip_status', res.data.svip_status);
that.$set(that, 'svip_price', res.data.svip_price);
that.$set(that, 'is_channel', res.data.is_channel);
that.giveData.give_integral = res.data.give_integral;
that.giveData.give_coupon = res.data.give_coupon;
let cartInfo = res.data.cartInfo;
let cartObj = [],
giftObj = [];
cartInfo.forEach((item) => {
if (item.is_gift == 1) {
giftObj.push(item);
} else {
cartObj.push(item);
}
});
that.$set(that, 'cartInfo', cartObj);
that.$set(that, 'giveCartInfo', giftObj);
let giveType = -1;
giftObj.forEach((item) => {
if (item.product_type == 0) {
return (giveType = 0);
}
});
that.$set(that, 'product_type', res.data.product_type == 0 || giveType == 0 ? 0 : 1);
that.$set(that, 'ChangePrice', that.totalPrice);
that.getCouponList();
that.computedPrice();
that.$set(that, 'totalPrice', that.$util.$h.Add(parseFloat(res.data.priceGroup.totalPrice), parseFloat(res.data.priceGroup.storePostage)));
})
.catch((err) => {
return this.$util.Tips({
title: err
});
});
},
/**
* 获取当前金额可用优惠券
*
*/
getCouponList: function () {
let that = this;
let data = {
cartId: this.cartId,
new: this.news,
shipping_type: that.$util.$h.Add(that.shippingType, 1),
store_id: that.system_store ? that.system_store.id : 0
};
getCouponsOrderPrice(this.userId, data)
.then((res) => {
res.data.map((item) => {
this.$set(item, 'ruleshow', false);
});
that.$set(that.coupon, 'list', res.data);
that.openType = 1;
})
.catch((err) => {
return that.$util.Tips({
title: err
});
});
},
/*
* 获取默认收货地址或者获取某条地址信息
*/
getAddressInfo() {
adminUserAddressList(this.userId, { page: 1, limit: 10 })
.then((res) => {
this.addressList = res.data;
if (res.data.length) {
this.addressInfo = res.data[0];
}
})
.catch((err) => {
uni.hideLoading();
return this.$util.Tips({
title: err
});
});
},
showMaoLocation() {
uni.openLocation({
latitude: parseFloat(this.system_store.longitude),
longitude: parseFloat(this.system_store.latitude),
scale: 8,
name: this.system_store.name,
address: this.system_store.address + this.system_store.detailed_address
});
},
couponTap: function () {
this.coupon.coupon = true;
this.coupon.list.forEach((item, index) => {
if (item.id == this.couponId) {
item.is_use = 1;
} else {
item.is_use = 0;
}
});
this.$set(this.coupon, 'list', this.coupon.list);
},
car: function () {
let that = this;
},
onAddress() {
this.showAddressDrawer = true;
},
goAddressPages() {
uni.navigateTo({
url: '/pages/users/user_address/addClient'
});
},
tapAddress(index, item) {
this.addressActive = index;
this.addressInfo = item;
},
payment: function (data) {
let that = this;
orderCreate(that.orderKey, that.userId, data)
.then((res) => {
this.$Cache.clear('touristId');
uni.hideLoading();
if(!this.isCash){
uni.redirectTo({
url: `/pages/behalf/cashier/index?order_id=${res.data.result.order_id}&uid=${this.userId}`
});
}else{
let payData = {
uni: res.data.result.order_id,
paytype: 'cash',
quitUrl: ''
};
getCashierApi(this.userId,payData).then(response=>{
if(response.data.status == 'SUCCESS'){
return this.$util.Tips({
title: '支付成功'
}, {
tab: 5,
url: '/pages/admin/orderDetail/index?id=' + res.data.result.order_id
});
}
}).catch(err=>{
return this.$util.Tips({
title: err
})
})
}
})
.catch((err) => {
uni.hideLoading();
return that.$util.Tips({
title: err
});
});
},
clickTextArea() {
this.$refs.textarea.focus();
},
bindDateChange: function (e, index) {
this.confirm[index].value = e.target.value;
},
bindTimeChange: function (e, index) {
this.confirm[index].value = e.target.value;
},
bindSelectChange: function (e, index, item) {
this.confirm[index].value = item.wordsConfig.list[e.detail.value].val;
},
getTimeranges(index) {
this.isShow = true;
this.timerangesIndex = index;
},
confrim(e) {
this.isShow = false;
this.confirm[this.timerangesIndex].value = e.time;
let arrayNew = [];
e.val.forEach((item) => {
arrayNew.push(Number(item));
});
this.timeranges = arrayNew;
},
formVerify() {
let that = this;
if (!that.addressInfo.real_name && !that.shippingType && !that.product_type)
return that.$util.Tips({
title: '请选择收货地址'
});
if (that.shippingType == 1 && this.userId != 0) {
if (that.userInfo.real_name == '' || that.userInfo.phone == '') {
return that.$util.Tips({
title: '请填写联系人或联系人电话'
});
}
if (!/^1(3|4|5|7|8|9|6)\d{9}$/.test(that.userInfo.phone)) {
return that.$util.Tips({
title: '请填写正确的手机号'
});
}
if (!/^[\u4e00-\u9fa5\w]{2,16}$/.test(that.userInfo.real_name)) {
return that.$util.Tips({
title: '请填写您的真实姓名'
});
}
if (that.storeList.length == 0)
return that.$util.Tips({
title: '暂无门店,请选择其他方式'
});
}
if (this.type == 4 && this.totalIntegral > this.userInfo.integral) {
return that.$util.Tips({
title: '您的积分不足以抵扣本单积分金额'
});
}
this.SubOrder();
},
SubOrder: function (e) {
let that = this,
data = {};
data = {
real_name: that.shippingType == 0 ? that.addressInfo.real_name : that.userInfo.real_name,
phone: that.shippingType == 0 ? that.addressInfo.phone : that.userInfo.phone,
address:
that.shippingType == 0 ? that.addressInfo.province + that.addressInfo.city + that.addressInfo.district + that.addressInfo.street + that.addressInfo.detail : '',
addressId: that.addressInfo.id,
couponId: that.priceGroup.couponPrice == 0 ? 0 : that.couponId,
useIntegral: that.useIntegral,
mark: that.mark,
shipping_type: that.$util.$h.Add(that.shippingType, 1)
};
uni.showLoading({
title: '订单支付中'
});
// #ifdef MP
openPaySubscribe().then(() => {
that.payment(data);
});
// #endif
// #ifndef MP
that.payment(data);
// #endif
},
// 去详情页
goDetail(id) {
uni.navigateTo({
url: `/pages/goods_details/index?id=${id}&fromType=1`
});
},
addCart(type, item) {
if (type == 1 && item.productInfo.stock == item.cart_num)
return this.$util.Tips({
title: '该产品没有更多库存了!'
});
adminCartNum(this.userId, {
id: item.id,
number: type ? item.cart_num + 1 : item.cart_num - 1,
tourist_uid: this.userId == 0 ? this.$Cache.get('touristId') : ''
})
.then((res) => {
this.getConfirm();
setTimeout(() => {
this.computedPrice();
}, 500);
})
.catch((err) => {
return this.$util.Tips({
title: err
});
});
},
setValue: Debounce(function (e, item) {
let num = e.detail.value;
if (item.productInfo.limit_num > 0 && num > item.productInfo.limit_num) {
item.cart_num = item.productInfo.limit_num;
return this.$util.Tips({
title: '购物车数量不能大于限购数量'
});
}
adminCartNum(this.userId, {
id: item.id,
number: num,
tourist_uid: this.userId == 0 ? this.$Cache.get('touristId') : ''
})
.then((res) => {
this.getConfirm();
setTimeout(() => {
this.computedPrice();
}, 500);
})
.catch((err) => {
return this.$util.Tips({
title: err
});
});
}),
goPage(type, url) {
if (type == 1) {
uni.navigateTo({
url
});
} else if (type == 2) {
uni.switchTab({
url
});
} else if (type == 3) {
uni.navigateBack();
}
},
closeDrawer() {
this.showGiftDrawer = false;
},
hideModal() {
this.isAddress = false;
},
handleClick(e) {
let index = e.index;
if (index == 1) {
uni.navigateTo({
url: '/pages/users/user_address/index?id=' + this.id + '&new=' + this.news + '&cartId=' + this.cartId + '&pinkId=' + this.pinkId + '&couponId=' + this.couponId
});
}
this.isAddress = false;
},
clearInput(type) {
if (type == 0) {
this.userInfo.real_name = '';
this.contactsFocus = true;
} else {
this.userInfo.phone = '';
this.telFocus = true;
}
},
payDrawerChange(){
this.showPayDrawer = true;
}
}
};
</script>
<style lang="scss" scoped>
/deep/.uni-date-x--border {
border: 0;
}
/deep/.uni-icons {
font-size: 0 !important;
}
/deep/.uni-date-x {
color: #999;
font-size: 15px;
}
/deep/.uni-date__x-input {
font-size: 15px;
}
.height-add {
height: calc(176rpx + constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
height: calc(176rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
}
/deep/uni-checkbox[disabled] .uni-checkbox-input {
background-color: #eee;
}
.alipaysubmit {
display: none;
}
.abs-lt .active-card {
&:after {
right: -67rpx;
}
}
.abs-rt .active-card {
&:after {
left: -67rpx;
-moz-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1);
}
}
.active-card {
&:after {
content: '';
width: 67rpx;
height: 76rpx;
background-image: url('@/static/img/nav_circle_left.png');
background-size: contain;
background-repeat: no-repeat;
position: absolute;
bottom: 0;
z-index: 4;
}
}
.line {
width: 680rpx;
margin: auto;
height: 3rpx;
}
.line image {
width: 100%;
height: 100%;
display: block;
}
.address {
background-color: #fff;
box-sizing: border-box;
}
.add1 {
padding: 36rpx 20rpx 32rpx 32rpx;
}
.add2 {
padding: 36rpx 20rpx 0 32rpx;
}
.footer .transparent {
opacity: 0;
}
._map {
width: 188rpx;
height: 104rpx;
background-size: 100%;
background-repeat: no-repeat;
}
.store_distance {
position: absolute;
top: 0;
left: 30rpx;
width: 130rpx;
height: 36rpx;
box-shadow: 0px 0px 16rpx 0px rgba(0, 0, 0, 0.0784);
}
.store_logo {
position: absolute;
top: 40rpx;
left: 68rpx;
width: 52rpx;
height: 52rpx;
box-shadow: 0px 0px 16rpx 0px rgba(0, 0, 0, 0.0784);
padding: 6rpx;
&:after {
content: '';
position: absolute;
bottom: -10rpx;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-top: 20rpx solid #fff;
border-right: 20rpx solid transparent;
border-left: 20rpx solid transparent;
}
}
.w-322 {
width: 322rpx;
}
.w-450 {
width: 450rpx;
}
.order_goods ~ .order_goods {
margin-top: 32rpx;
}
.cell input {
width: 450rpx;
text-align: right;
}
.cell .radio {
margin: 0 22rpx;
padding: 10rpx 0;
}
.cell ~ .cell {
margin-top: 40rpx;
}
.SemiBold {
font-family: SemiBold;
}
.Regular {
font-family: 'Regular';
}
.placeholder {
color: #ccc;
}
.asterisk {
position: absolute;
color: red;
left: 0;
}
.gradient-box {
background: linear-gradient(180deg, $primary-admin 0%, $primary-admin 52%, rgba(233, 51, 35, 0) 100%);
}
.w-50p {
width: 50%;
}
.h-auto {
height: auto;
}
.text-primary-con {
color: $primary-admin;
}
.bg-primary {
background: $primary-admin;
}
.bg-primary-light {
background: $light-primary-admin;
}
.rd-lt-24rpx {
border-radius: 24rpx 0 0 0;
}
.rd-rt-24rpx {
border-radius: 0 24rpx 0 0;
}
.z-2 {
z-index: 2;
}
.gold {
color: #dca658;
}
.over {
width: 104rpx;
height: 104rpx;
border-radius: 50%;
background-color: rgba(51, 51, 51, 0.6);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.con-border {
border: 1px solid $primary-admin;
}
.clear-btn {
border-radius: 0 12rpx 0 12rpx;
}
.svip {
width: 56rpx;
height: 26rpx;
background: linear-gradient(270deg, #484643 0%, #1f1b17 100%);
border-radius: 100rpx;
font-size: 18rpx;
font-weight: 600;
color: #fddaa4;
margin-left: 10rpx;
}
.vip {
width: 64rpx;
height: 26rpx;
background: #fef0d9;
border: 1px solid #facc7d;
border-radius: 50rpx;
font-size: 18rpx;
font-weight: 500;
color: #dfa541;
margin-left: 10rpx;
.iconfont {
font-size: 20rpx;
margin-right: 4rpx;
}
}
.icon-a-ic_CompleteSelect {
color: $primary-admin;
}
.pay-card{
padding: 28rpx 32rpx;
}
.btn-border{
border: 1rpx solid $primary-admin;;
}
.channel-tag{
width: 110rpx;
height: 28rpx;
background: #FEF0D9;
border-radius: 20rpx;
border: 1rpx solid #FACC7D;
color: #DFA541;
}
</style>