1219 lines
38 KiB
Vue
1219 lines
38 KiB
Vue
<template>
|
||
<view :data-theme="theme">
|
||
<!-- #ifdef MP || APP -->
|
||
<view class='cart_nav'>
|
||
<nav-bar :navTitle='navTitle' iconColor='#fff' :isBackgroundColor="true" ref="navBarRef"></nav-bar>
|
||
</view>
|
||
<!-- #endif -->
|
||
<view class="borderPad pt20 pick-gradient-bg" v-if="secondType == ProductTypeEnum.PunchCard">
|
||
<view class="pick-up-info-top-box">
|
||
<pick-up-info v-if="merchantOrderVoList[0] && Object.keys(merchantOrderVoList[0]).length > 0 &&
|
||
merchantOrderVoList[0].latitude && merchantOrderVoList[0].longitude" :isPunchCard="true"
|
||
:merAddressInfo="merchantOrderVoList[0]" :secondType="secondType">
|
||
</pick-up-info>
|
||
</view>
|
||
</view>
|
||
<view class='order-submission' @touchstart="touchStart">
|
||
<!-- 拼团切换样式 -->
|
||
<view class="allAddress"
|
||
v-if="Number(orderInfoVo.secondType)<5 && Number(orderInfoVo.secondType)!==2&&orderInfoVo.type==2">
|
||
<view class="h-96 relative" v-if="orderInfoVo.merchantInfoList[0].deliveryMethodMer.split(',').length==2">
|
||
<view class="w-full abs-lb rd-t-24rpx flex bg--w111-fff">
|
||
<view class="flex-center w-50p h-76 fs-28 rd-lt-24rpx z-2"
|
||
:class="shippingType == 1 ? 'bg--w111-fff font-color' : 'bg-primary-light'" @tap="addressType(1)">商家配送
|
||
</view>
|
||
<view class="flex-center w-50p h-76 fs-28 rd-rt-24rpx z-2"
|
||
:class="shippingType == 2 ? 'bg--w111-fff font-color' : 'bg-primary-light'" @tap="addressType(2)">到店自提
|
||
</view>
|
||
</view>
|
||
<view class="w-50p rd-t-24rpx bg--w111-fff h-96" :class="shippingType == 1 ? 'abs-lt' : 'abs-rt'">
|
||
<view class="w-full h-full relative active-card"></view>
|
||
</view>
|
||
</view>
|
||
<view class='address group acea-row row-between-wrapper'
|
||
:class="orderInfoVo.merchantInfoList[0].deliveryMethodMer.split(',').length == 2?'bd-r-14':'' "
|
||
@tap='onAddress' v-if='shippingType == 1'>
|
||
<view class='addressCon' v-if="addressInfo.realName">
|
||
<view class='name acea-row'>
|
||
<view class="line1 select-name">{{addressInfo.realName}}</view>
|
||
<view class='phone'>{{addressInfo.phone}}</view>
|
||
</view>
|
||
<view class="acea-row">
|
||
<view class="line1"><text class='default font-color'
|
||
v-if="addressInfo.isDefault">[默认]</text>{{addressInfo.province}}{{addressInfo.city}}{{addressInfo.district}}{{ addressInfo.street}}{{addressInfo.detail}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class='addressCon' v-else>
|
||
<view class='setaddress'>设置收货地址</view>
|
||
</view>
|
||
<view class='iconfont icon-ic_rightarrow mt30'></view>
|
||
</view>
|
||
<view class='address group acea-row row-between-wrapper' v-if='shippingType == 2'
|
||
:class="orderInfoVo.merchantInfoList[0].deliveryMethodMer.split(',').length == 2?'bd-r-14':'' ">
|
||
<view class='addressCon' v-for="(item, index) in merchantOrderVoList" :key="index" @click="goMap(item)">
|
||
<view class='name acea-row'>
|
||
<view class="line1 select-name">{{item.merName}}</view>
|
||
<view class='phone ml-24'>{{item.phone}}</view>
|
||
</view>
|
||
<view class="acea-row">
|
||
<view class="line1">{{item.addressDetail}}</view>
|
||
</view>
|
||
</view>
|
||
<view class='iconfont icon-ic_rightarrow mt30' @click="goMap(merchantOrderVoList[0])"></view>
|
||
</view>
|
||
<view class='line'>
|
||
<image src='../static/images/line.png'></image>
|
||
</view>
|
||
</view>
|
||
<!-- 只有用户地址样式，预约商品不展示 -->
|
||
<view
|
||
v-if="Number(orderInfoVo.secondType)<5 && Number(orderInfoVo.secondType)!==2&&orderInfoVo.type!=2 &&orderInfoVo.type!==7"
|
||
class="allAddress">
|
||
<view class='address acea-row row-between-wrapper' @tap='onAddress'>
|
||
<view class='addressCon' v-if="addressInfo.realName">
|
||
<view class='name mb-16'>{{addressInfo.realName}}
|
||
<text class='phone ml-24'>{{addressInfo.phone}}</text>
|
||
</view>
|
||
<view class="acea-row line2">
|
||
<text class='default font-color' v-if="addressInfo.isDefault">[默认]</text>
|
||
<text>{{addressInfo.province}}{{addressInfo.city}}{{addressInfo.district}}{{ addressInfo.street}}{{addressInfo.detail}}</text>
|
||
</view>
|
||
</view>
|
||
<view class='addressCon' v-else>
|
||
<view class='setaddress'>设置收货地址</view>
|
||
</view>
|
||
<view class='iconfont icon-ic_rightarrow'></view>
|
||
</view>
|
||
<view class='line'>
|
||
<image src='../static/images/line.png'></image>
|
||
</view>
|
||
</view>
|
||
<!-- 预约商品，预约时间 -->
|
||
<view v-show="orderInfoVo.secondType === ProductTypeEnum.Reservation" class="allAddress">
|
||
<view class='address acea-row row-between-wrapper'>
|
||
<view class='f-s-32'>
|
||
<view class='name'>预约时间：
|
||
<text class=''>{{reservationInfo.reservationDate}}</text>
|
||
<text class="ml-20">{{reservationInfo.reservationTime}}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="borderPad mt20">
|
||
<view v-for="(item, index) in merchantOrderVoList" :key="index" class='wrapper borRadius14 pb-8'>
|
||
<view class="borderPad">
|
||
<orderGoods :cartInfo="item.orderInfoList" :orderInfo="item" :secondType="secondType"
|
||
:orderProNum="orderProNum" :isShowBtn="false" :isShowRecord="false">
|
||
</orderGoods>
|
||
</view>
|
||
<view v-show="orderInfoVo.secondType ===0&&orderInfoVo.type!=2" class="boxs">
|
||
<view class='item acea-row row-between-wrapper'>
|
||
<view>配送方式</view>
|
||
<view v-if="item.deliveryMethodMer.length===3 && item.takeTheirSwitch"
|
||
class='discount acea-row row-middle'>
|
||
<text @tap="openShowBox(item,index)">{{item.shippingType === 1 ? '商家配送' : '到店自提'}}</text>
|
||
|
||
<text @tap="openShowBox(item,index)" class='text-bbb iconfont icon-ic_rightarrow ml-4'></text>
|
||
</view>
|
||
<view v-else class='discount'>
|
||
{{item.shippingType === 1 ? '商家配送' : '到店自提'}}
|
||
</view>
|
||
</view>
|
||
<view v-if="item.shippingType == 2 && item.takeTheirSwitch" class="store-address acea-row">
|
||
<pick-up-info v-if="Object.keys(item).length > 0 && item.latitude && item.longitude"
|
||
:merAddressInfo="item" :secondType="secondType">
|
||
</pick-up-info>
|
||
<!-- <view>
|
||
<view class="name phone">{{item.phone}}</view>
|
||
<view class="name w-480px">{{item.addressDetail}}</view>
|
||
</view>
|
||
<view class="map" @click="goMap(item)">
|
||
<text class="iconfont icon-ic_location51"></text>
|
||
<view class="map_text">查看地图</view>
|
||
</view> -->
|
||
</view>
|
||
</view>
|
||
<view v-show="item.shippingType === 1 && Number(orderInfoVo.secondType)===0"
|
||
class='item acea-row row-between-wrapper'>
|
||
<view>快递费用</view>
|
||
<view v-if='!item.freightFee || item.freightFee == 0' class="noCoupon">免运费</view>
|
||
<view v-else class='money'>￥{{item.freightFee || 0}}</view>
|
||
</view>
|
||
<view v-show="item.svipDiscountPrice != 0&&orderInfoVo.type!=2" class='item acea-row row-between-wrapper'>
|
||
<view>SVIP优惠</view>
|
||
<view class='money'>-￥{{item.svipDiscountPrice || 0}}</view>
|
||
</view>
|
||
<view v-show="item.merchantMemberDiscountPrice != 0&&orderInfoVo.type!=2" class='item acea-row row-between-wrapper'>
|
||
<view>商户会员优惠</view>
|
||
<view class='money'>-￥{{item.merchantMemberDiscountPrice || 0}}</view>
|
||
</view>
|
||
<view v-if="isProductType" class='item acea-row row-between-wrapper'>
|
||
<view>店铺优惠</view>
|
||
<view v-if="item.merCouponUserList && item.merCouponUserList.length"
|
||
@tap='couponTap(item.merCouponUserList,item.merId, index)'>
|
||
<view class='discount acea-row row-between-wrapper'>
|
||
<text
|
||
class="couponTitle line1">{{item.couponFee==0?`有${item.merCouponUserList.length}张优惠券可选`:`-￥${item.couponFee}`}}</text>
|
||
<text class='iconfont text-bbb icon-ic_rightarrow ml-4'></text>
|
||
</view>
|
||
</view>
|
||
<view v-else class="noCoupon">暂无优惠券</view>
|
||
</view>
|
||
<view class='item acea-row row-between-wrapper' v-if="textareaStatus" style="height: auto;">
|
||
<view>买家留言</view>
|
||
<input class="fs-28" placeholder-class='placeholder' value="" name="mark" placeholder='选填买家留言'
|
||
v-model="item.remark" @input='bindHideKeyboard(item.remark,index)'
|
||
style="width: 484rpx;text-align: right;"></input>
|
||
</view>
|
||
</view>
|
||
<!--商品关联系统表单-->
|
||
<view v-if="orderInfoVo.systemFormValue && orderInfoVo.systemFormValue.length" class='borRadius14'>
|
||
<system-from v-model="orderInfoVo.systemFormValue" ref="systemFromRef"></system-from>
|
||
</view>
|
||
<view v-show="secondType !== ProductTypeEnum.Integral" class='moneyList borRadius14'>
|
||
<view class='item acea-row row-between-wrapper'>
|
||
<view>商品总价</view>
|
||
<view class='money'>￥{{orderInfoVo.proTotalFee || 0}}</view>
|
||
</view>
|
||
<view class='item acea-row row-between-wrapper' v-if="parseInt(orderInfoVo.freightFee) > 0">
|
||
<view>运费：</view>
|
||
<view class='money'>+￥{{orderInfoVo.freightFee || 0}}</view>
|
||
</view>
|
||
<view v-show="orderInfoVo.svipDiscountPrice != 0 &&orderInfoVo.type!=2"
|
||
class='item acea-row row-between-wrapper'>
|
||
<view>SVIP优惠</view>
|
||
<view class='money'>-￥{{orderInfoVo.svipDiscountPrice || 0}}</view>
|
||
</view>
|
||
<view v-show="orderInfoVo.merchantMemberDiscountPrice != 0 &&orderInfoVo.type!=2"
|
||
class='item acea-row row-between-wrapper'>
|
||
<view>商户会员优惠</view>
|
||
<view class='money'>-￥{{orderInfoVo.merchantMemberDiscountPrice || 0}}</view>
|
||
</view>
|
||
<view class='item acea-row row-between-wrapper' v-if="parseInt(merCouponFee) > 0 && isProductType">
|
||
<view>店铺优惠</view>
|
||
<view class='money'>-￥{{merCouponFee}}</view>
|
||
</view>
|
||
<view v-if="isProductType" class='item acea-row row-between-wrapper'>
|
||
<view>平台优惠</view>
|
||
<view v-if="orderInfoVo.platCouponUserList && orderInfoVo.platCouponUserList.length"
|
||
class='discount acea-row row-between-wrapper' @tap='couponTap(orderInfoVo.platCouponUserList,0)'>
|
||
<text
|
||
class="couponTitle line1">{{platCouponFee==0?`有${orderInfoVo.platCouponUserList.length}张优惠券可选`:`-￥${platCouponFee}`}}</text>
|
||
<text class='text-bbb iconfont icon-ic_rightarrow ml-4'></text>
|
||
</view>
|
||
<view v-else class="noCoupon">暂无优惠券</view>
|
||
</view>
|
||
<view class='item acea-row row-between-wrapper' v-if="orderInfoVo.integralDeductionSwitch && isProductType">
|
||
<view>积分抵扣</view>
|
||
<view class='discount acea-row row-middle'>
|
||
<view class="mr14"> {{isUseIntegral ? "使用积分":"当前积分"}}
|
||
<text
|
||
class='num font-color'>{{ isUseIntegral ? orderInfoVo.surplusIntegral : orderInfoVo.userIntegral}}</text>
|
||
</view>
|
||
<checkbox-group @change="ChangeIntegral">
|
||
<checkbox :checked='isUseIntegral ? true : false'
|
||
:disabled="orderInfoVo.userIntegral==0 && !isUseIntegral" />
|
||
</checkbox-group>
|
||
</view>
|
||
</view>
|
||
|
||
<view class='item acea-row row-between-wrapper' v-if="Number(orderInfoVo.deductionPrice) > 0">
|
||
<view>抵扣金额</view>
|
||
<view class='money'>-￥{{orderInfoVo.deductionPrice || 0}}</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view style='height:120rpx;'></view>
|
||
</view>
|
||
<view class='footer acea-row row-between-wrapper'>
|
||
<view class="acea-row row-middle">合计：
|
||
<!-- 积分价格 -->
|
||
<PointsPrice v-if="orderInfoVo.secondType === ProductTypeEnum.Integral" :pointsPrice="orderInfoVo"
|
||
:pointsGoodsStyle="hotPointsStyle"></PointsPrice>
|
||
<!-- 其他价格 -->
|
||
<text v-else class='price_color f-s-38 fw-500 regular line-heightOne'>￥{{orderInfoVo.payFee || 0}}</text>
|
||
</view>
|
||
<view class='settlement' style='z-index:100' @tap="SubOrder">
|
||
{{secondType === ProductTypeEnum.Integral?"确认兑换":"立即下单"}}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<couponListWindow :coupon='coupon' @ChangCouponsClone="ChangCouponsClone" :openType='openType'
|
||
@ChangCoupons="ChangCoupons" :orderShow="orderShow" :surplusFee="surplusFee"></couponListWindow>
|
||
|
||
<view v-if="isShowBox">
|
||
<checkDelivery :isShowBox="isShowBox" :activeObj="activeObj" @close="boxClose" @confirmBtn="getShippingType">
|
||
</checkDelivery>
|
||
</view>
|
||
<!-- 满员提示 -->
|
||
<uni-popup ref="sh_popup" background-color="#fff" borderRadius="10px">
|
||
<view class="sh_popup-content">
|
||
<view class="sh_popup_title">
|
||
提示
|
||
</view>
|
||
<view class="sh_popup_text">
|
||
该团已拼成，是否自行开团？
|
||
</view>
|
||
<view class="sh_popup_btn">
|
||
<view class="no_btn btn font-color" @click="popupClose">返回首页</view>
|
||
<view class="yes_btn btn" @click="toAudit">去开团</view>
|
||
</view>
|
||
</view>
|
||
</uni-popup>
|
||
</view>
|
||
</template>
|
||
<script>
|
||
// +----------------------------------------------------------------------
|
||
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
|
||
// +----------------------------------------------------------------------
|
||
// | Copyright (c) 2016~2026 https://www.crmeb.com All rights reserved.
|
||
// +----------------------------------------------------------------------
|
||
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
|
||
// +----------------------------------------------------------------------
|
||
// | Author: CRMEB Team <admin@crmeb.com>
|
||
// +----------------------------------------------------------------------
|
||
import {
|
||
orderCreate,
|
||
postOrderComputed,
|
||
loadPreOrderApi
|
||
} from '@/api/order.js';
|
||
import {
|
||
takeTheirApi
|
||
} from '@/api/merchant.js';
|
||
import couponListWindow from '../components/couponListWindow';
|
||
import orderGoods from '@/components/orderGoods'
|
||
import navBar from '@/components/navBar';
|
||
import checkDelivery from '../components/checkDelivery/index.vue';
|
||
import systemFrom from '../components/systemFrom/index.vue';
|
||
import PointsPrice from '@/components/PointsPrice.vue';
|
||
import pickUpInfo from './components/pickUpInfo.vue';
|
||
import {
|
||
toLogin
|
||
} from '@/libs/login.js';
|
||
import {
|
||
mapGetters
|
||
} from "vuex";
|
||
import {
|
||
Debounce
|
||
} from '@/utils/validate.js'
|
||
import {
|
||
ProductTypeEnum,
|
||
ProductMarketingTypeEnum
|
||
} from "../../../enums/productEnums";
|
||
import orderPay from "@/mixins/OrderPay.js";
|
||
let app = getApp();
|
||
/**
|
||
* 积分商品推荐样式
|
||
*/
|
||
const hotPointsStyle = {
|
||
iconStyle: {
|
||
width: '28rpx',
|
||
height: '28rpx'
|
||
},
|
||
priceStyle: {
|
||
fontSize: '38rpx',
|
||
},
|
||
unitStyle: {
|
||
fontSize: '26rpx',
|
||
},
|
||
}
|
||
export default {
|
||
mixins: [orderPay],
|
||
components: {
|
||
navBar,
|
||
couponListWindow,
|
||
orderGoods,
|
||
checkDelivery,
|
||
systemFrom,
|
||
PointsPrice,
|
||
pickUpInfo
|
||
},
|
||
computed: {
|
||
// 是否可以使用优惠券、积分抵扣。 基础订单/云盘订单，卡密,虚拟，预约，可以使用优惠券、积分抵扣
|
||
isProductType() {
|
||
return this.type === ProductMarketingTypeEnum.Normal && this.secondType !== this.ProductTypeEnum
|
||
.Integral && this.secondType !== this.ProductTypeEnum.Video
|
||
},
|
||
...mapGetters(['productType', 'isLogin'])
|
||
},
|
||
data() {
|
||
return {
|
||
hotPointsStyle: hotPointsStyle,
|
||
ProductMarketingTypeEnum: ProductMarketingTypeEnum,
|
||
ProductTypeEnum: ProductTypeEnum,
|
||
navTitle: '提交订单',
|
||
homeTop: 20,
|
||
orderShow: 'orderShow', //下单页面使用优惠券组件不展示tab切换页
|
||
textareaStatus: true,
|
||
openType: 1, //优惠券打开方式 1=使用
|
||
couponShow: false,
|
||
coupon: {
|
||
coupon: false,
|
||
list: [], //商户优惠券
|
||
statusTile: '立即使用',
|
||
couponMoney: 0
|
||
}, //优惠券组件
|
||
addressInfo: {}, //地址信息
|
||
addressId: 0, //地址id
|
||
orderMerchantRequestList: [], //商户属性集合
|
||
cartId: '', //购物车id
|
||
userInfo: {}, //用户信息
|
||
mark: '', //买家留言
|
||
couponFee: '请选择', //优惠券
|
||
coupon_price: 0, //优惠券抵扣金额
|
||
isUseIntegral: false, //是否使用积分
|
||
integral_price: 0, //积分抵扣金额
|
||
integral: 0,
|
||
ChangePrice: 0, //使用积分抵扣变动后的金额
|
||
formIds: [], //收集formid
|
||
status: 0,
|
||
toPay: false, //修复进入支付时页面隐藏从新刷新页面
|
||
shippingType: 1,
|
||
storePostage: 0,
|
||
contacts: '',
|
||
contactsTel: '',
|
||
mydata: {},
|
||
merchantOrderVoList: [],
|
||
priceGroup: {},
|
||
animated: false,
|
||
totalPrice: 0,
|
||
integralRatio: "0",
|
||
orderKey: "",
|
||
// usableCoupon: {},
|
||
offlinePostage: "",
|
||
news: true,
|
||
again: false,
|
||
addAgain: false,
|
||
bargain: false, //是否是砍价
|
||
combination: false, //是否是拼团
|
||
secKill: false, //是否是秒杀
|
||
orderInfoVo: {},
|
||
addressList: [], //地址列表数据
|
||
orderProNum: 0,
|
||
orderNo: '', //预下单订单号
|
||
theme: app.globalData.theme,
|
||
addressChangeId: 0,
|
||
isShowBox: false,
|
||
activeObj: {},
|
||
activeIndex: 0, // 选中店铺索引
|
||
type: 0, // 0-基础订单,1-秒杀订单,2-拼团订单
|
||
secondType: 0, //订单二级类型:0-普通订单，1-积分订单，2-虚拟订单，4-视频号订单，5-云盘订单，6-卡密订单
|
||
merId: 0, //商户id，用于判断商户优惠券还是平台优惠券，平台优惠券商户id为0
|
||
platUserCouponObj: {}, //平台优惠券对象，用于缓存数据使用
|
||
platUserCouponId: 0, //平台优惠券id
|
||
platCouponFee: '', //平台优惠券金额
|
||
merCouponFee: '', //店铺优惠券总金额
|
||
surplusFee: 0, //商品总金额-商户优惠券金额=平台端可使用优惠券的门槛
|
||
merUserCouponId: 0, //店铺使用优惠券的id
|
||
tempCouponObj: {}, //临时优惠券数据
|
||
merchangtInfo: {}, //商户信息
|
||
orderForm: [], //系统表单配置的数据
|
||
orderExtend: {}, //提交接口表单的数据
|
||
productId: '',
|
||
groupActivityId: '',
|
||
reservationInfo: {} // 预约信息
|
||
};
|
||
},
|
||
watch: {
|
||
isLogin: {
|
||
handler: function(newV, oldV) {
|
||
if (newV) {
|
||
this.getloadPreOrder();
|
||
}
|
||
},
|
||
deep: true
|
||
},
|
||
},
|
||
onLoad(options) {
|
||
this.orderNo = options.orderNo || 0;
|
||
this.addressChangeId = parseInt(options.addressId) || 0;
|
||
if (this.isLogin) {
|
||
this.getloadPreOrder();
|
||
} else {
|
||
toLogin();
|
||
}
|
||
},
|
||
/**
|
||
* 生命周期函数--监听页面显示
|
||
*/
|
||
onShow: function() {
|
||
let _this = this
|
||
this.textareaStatus = true;
|
||
},
|
||
methods: {
|
||
//滚动
|
||
touchStart() {
|
||
// #ifdef MP || APP
|
||
this.$refs.navBarRef.currentPage = false;
|
||
// #endif
|
||
},
|
||
popupClose() {
|
||
this.$refs.sh_popup.close()
|
||
this.$util.navigateTo('/pages/index/index');
|
||
},
|
||
//去开团
|
||
toAudit() {
|
||
this.$refs.sh_popup.close()
|
||
uni.navigateTo({
|
||
url: `/pages/goods/goods_details/index?id=${this.productId}&mt=2&gd=${this.groupActivityId}`
|
||
})
|
||
},
|
||
addressType(type) {
|
||
this.merchantOrderVoList[0].shippingType = type
|
||
this.getShippingType(this.merchantOrderVoList[0])
|
||
if (type == 2) {
|
||
setTimeout(() => {
|
||
this.shippingType = type
|
||
}, 300)
|
||
} else {
|
||
this.shippingType = type
|
||
}
|
||
},
|
||
//选择配送方式回调
|
||
getShippingType(item) {
|
||
this.orderMerchantRequestList[this.activeIndex].shippingType = item.shippingType;
|
||
this.$set(this.merchantOrderVoList[this.activeIndex], 'shippingType', item.shippingType);
|
||
if (item.shippingType === 2) this.getTakeTheir(item.merId);
|
||
this.computedPrice();
|
||
this.isShowBox = false;
|
||
},
|
||
getTakeTheir(id) {
|
||
takeTheirApi(id).then(res => {
|
||
this.merchangtInfo = res.data; //商户信息
|
||
this.$set(this.merchantOrderVoList[this.activeIndex], 'addressDetail', res.data.addressDetail);
|
||
this.$set(this.merchantOrderVoList[this.activeIndex], 'phone', res.data.phone);
|
||
this.$set(this.merchantOrderVoList[this.activeIndex], 'latitude', res.data.latitude);
|
||
this.$set(this.merchantOrderVoList[this.activeIndex], 'longitude', res.data.longitude);
|
||
this.$set(this.merchantOrderVoList[this.activeIndex], 'coverImage', res.data.coverImage);
|
||
}).catch(err => {
|
||
return this.$util.Tips({
|
||
title: err
|
||
});
|
||
})
|
||
},
|
||
//查看内置地图
|
||
goMap(item) {
|
||
let that = this;
|
||
//#ifdef H5
|
||
if (that.$wechat.isWeixin() === true) {
|
||
that.$wechat.seeLocation({
|
||
latitude: parseFloat(this.merchantOrderVoList[this.activeIndex].latitude),
|
||
longitude: parseFloat(this.merchantOrderVoList[this.activeIndex].longitude),
|
||
name: item.merName,
|
||
address: item.addressDetail ? item.addressDetail : '',
|
||
}).then(res => {
|
||
console.log('success');
|
||
})
|
||
} else {
|
||
//#endif
|
||
uni.openLocation({
|
||
latitude: parseFloat(this.merchantOrderVoList[this.activeIndex].latitude),
|
||
longitude: parseFloat(this.merchantOrderVoList[this.activeIndex].longitude),
|
||
scale: 8,
|
||
name: item.merName,
|
||
address: item.addressDetail ? item.addressDetail : '',
|
||
success: function(res) {
|
||
that.go_map = true
|
||
},
|
||
});
|
||
// #ifdef H5
|
||
}
|
||
//#endif
|
||
},
|
||
// 打开配送方式弹窗
|
||
openShowBox(item, index) {
|
||
this.activeObj = item
|
||
this.activeIndex = index
|
||
this.isShowBox = true
|
||
},
|
||
boxClose() {
|
||
this.isShowBox = false
|
||
},
|
||
// 订单详情
|
||
getloadPreOrder: function() {
|
||
loadPreOrderApi(this.orderNo).then(res => {
|
||
let orderInfoVo = res.data;
|
||
if (orderInfoVo.merchantInfoList[0].orderInfoList[0].groupBuyActivityId) {
|
||
this.groupActivityId = orderInfoVo.merchantInfoList[0].orderInfoList[0].groupBuyActivityId
|
||
this.productId = orderInfoVo.merchantInfoList[0].orderInfoList[0].productId
|
||
}
|
||
if (orderInfoVo.merchantInfoList[0].deliveryMethodMer.split(',').length == 1) {
|
||
this.shippingType = orderInfoVo.merchantInfoList[0].deliveryMethodMer
|
||
}
|
||
this.reservationInfo = uni.getStorageSync('reservationInfo') || {} //缓存的预约信息，地址id，配送类型
|
||
orderInfoVo.merchantInfoList.map(item => {
|
||
if (item.shippingType === 2) this.getTakeTheir(item.merId)
|
||
this.orderMerchantRequestList.push({
|
||
shippingType: orderInfoVo.secondType === this.ProductTypeEnum.Reservation ? this
|
||
.reservationInfo.shippingType : item.shippingType,
|
||
merId: item.merId,
|
||
remark: '',
|
||
userCouponId: item.userCouponId
|
||
})
|
||
item.addressDetail = this.merchangtInfo.addressDetail;
|
||
item.phone = this.merchangtInfo.phone;
|
||
item.latitude = this.merchangtInfo.latitude;
|
||
item.longitude = this.merchangtInfo.longitude;
|
||
});
|
||
this.merchantOrderVoList = orderInfoVo.merchantInfoList; //商户端数据
|
||
this.platCouponFee = orderInfoVo.platCouponFee; //平台优惠券总金额
|
||
this.platUserCouponId = orderInfoVo.platUserCouponId;
|
||
this.merCouponFee = orderInfoVo.merCouponFee; //店铺优惠券总金额
|
||
this.orderInfoVo = {
|
||
...orderInfoVo,
|
||
systemFormValue: orderInfoVo.systemFormValue ? this.$util.objToArr(JSON.parse(
|
||
orderInfoVo.systemFormValue)) : []
|
||
};
|
||
let payNum = orderInfoVo.formDataSubmitType === 1 ? orderInfoVo.merchantInfoList[0].orderInfoList[0]
|
||
.payNum : 1 //预约单的商品下单数量
|
||
this.$nextTick(() => {
|
||
if (this.orderInfoVo.systemFormValue.length) {
|
||
this.$refs.systemFromRef.getFormList(payNum)
|
||
}
|
||
})
|
||
this.type = orderInfoVo.type; //订单类型
|
||
this.secondType = orderInfoVo
|
||
.secondType; //订单二级类型:0-普通订单，1-积分订单，2-虚拟订单，4-视频号订单，5-云盘订单，6-卡密订单
|
||
this.orderProNum = orderInfoVo.orderProNum;
|
||
if (orderInfoVo.addressId && this.addressChangeId === 0) {
|
||
this.addressId = orderInfoVo.addressId;
|
||
} else {
|
||
this.addressId = this.addressChangeId;
|
||
if (orderInfoVo.addressId != this.addressChangeId && this.addressChangeId > 0)
|
||
this.computedPrice();
|
||
}
|
||
this.getAddressInfo();
|
||
}).catch(err => {
|
||
uni.navigateTo({
|
||
url: '/pages/goods/order_list/index'
|
||
});
|
||
})
|
||
},
|
||
// 计算订单价格
|
||
computedPrice: function() {
|
||
uni.showLoading({
|
||
title: '加载中...'
|
||
});
|
||
let shippingType = this.shippingType;
|
||
postOrderComputed({
|
||
addressId: this.addressId,
|
||
isUseIntegral: this.isUseIntegral,
|
||
orderMerchantRequestList: this.orderMerchantRequestList,
|
||
preOrderNo: this.orderNo,
|
||
platUserCouponId: this.platUserCouponId
|
||
}).then(res => {
|
||
let data = res.data;
|
||
//usedIntegral 使用的积分，surplusIntegral 剩余积分
|
||
data.merOrderResponseList.map((item, i) => {
|
||
this.merchantOrderVoList[i].freightFee = item.freightFee
|
||
this.merchantOrderVoList[i].couponFee = item.couponFee
|
||
});
|
||
this.orderInfoVo.platCouponUserList = data.platCouponUserList; //平台优惠券数据
|
||
this.merCouponFee = data.merCouponFee; //店铺优惠券总金额
|
||
this.orderInfoVo.couponFee = data.couponFee; //优惠券优惠金额
|
||
this.orderInfoVo.userIntegral = data.surplusIntegral; //使用的积分
|
||
this.orderInfoVo.deductionPrice = data.deductionPrice;
|
||
this.orderInfoVo.freightFee = data.freightFee;
|
||
this.orderInfoVo.payFee = data.payFee;
|
||
this.orderInfoVo.proTotalFee = data.proTotalFee;
|
||
this.orderInfoVo.surplusIntegral = data.usedIntegral; //剩余积分
|
||
this.platCouponFee = data.platCouponFee; //平台优惠金额
|
||
this.orderInfoVo.integralDeductionSwitch = data.integralDeductionSwitch //积分抵扣开关
|
||
//选中商户优惠券的值
|
||
this.merchantOrderVoList[this.activeIndex].merCouponUserList = data.merOrderResponseList[
|
||
this.activeIndex].merCouponUserList; //商户数据
|
||
this.merUserCouponId = data.merOrderResponseList[this.activeIndex]
|
||
.userCouponId //店铺使用优惠券的id
|
||
uni.hideLoading();
|
||
}).catch(err => {
|
||
uni.hideLoading();
|
||
return this.$util.Tips({
|
||
title: err
|
||
});
|
||
});
|
||
},
|
||
bindPickerChange: function(e) {
|
||
let value = e.detail.value;
|
||
this.shippingType = value;
|
||
this.computedPrice();
|
||
},
|
||
/**
|
||
* 使用积分抵扣
|
||
*/
|
||
ChangeIntegral: function() {
|
||
this.isUseIntegral = !this.isUseIntegral;
|
||
this.computedPrice();
|
||
},
|
||
bindHideKeyboard: function(e, i) {
|
||
this.orderMerchantRequestList[i].remark = e;
|
||
},
|
||
|
||
|
||
//关闭优惠券弹窗
|
||
ChangCouponsClone: function(coupon) {
|
||
this.coupon.list = [];
|
||
this.coupon.coupon = false;
|
||
},
|
||
//点击优惠券弹窗确定后
|
||
ChangCoupons: function(item) {
|
||
this.coupon.list = [];
|
||
if (item.merId === 0) {
|
||
this.platUserCouponId = item.isChecked ? item.id : 0;
|
||
} else {
|
||
this.$set(this.orderMerchantRequestList[this.activeIndex], 'userCouponId', item.isChecked ? item
|
||
.id : 0);
|
||
|
||
}
|
||
this.coupon.coupon = false;
|
||
this.computedPrice();
|
||
},
|
||
/**
|
||
* 选择优惠券
|
||
* @param {Object} item优惠券对象
|
||
* @param {Number} merId商户id
|
||
* @param {Number} index索引
|
||
*/
|
||
couponTap: function(item, merId, index) {
|
||
this.$set(this.coupon, 'list', item);
|
||
this.$set(this.coupon, 'couponMoney', item);
|
||
this.coupon.coupon = true;
|
||
this.merId = merId; //商户id
|
||
if (merId !== 0) this.activeIndex = index;
|
||
this.coupon.loading = false;
|
||
},
|
||
/**
|
||
* 获取当前金额可用优惠券
|
||
*
|
||
*/
|
||
getCouponList: function(item, merId) {
|
||
this.$set(this.coupon, 'list', item);
|
||
this.openType = 1;
|
||
uni.hideLoading();
|
||
},
|
||
onAddress: function() {
|
||
uni.navigateTo({
|
||
url: '/pages/address/user_address_list/index?orderNo=' + this.orderNo
|
||
});
|
||
},
|
||
realName: function(e) {
|
||
this.contacts = e.detail.value;
|
||
},
|
||
phone: function(e) {
|
||
this.contactsTel = e.detail.value;
|
||
},
|
||
payment: function(data) {
|
||
let that = this;
|
||
// #ifdef MP
|
||
uni.checkBeforeAddOrder({
|
||
success(res) {
|
||
console.log("下单前置检查 成功：", JSON.stringify(res));
|
||
const traceId = res.data.traceId;
|
||
data.traceId = traceId;
|
||
that.onCreate(data);
|
||
},
|
||
fail(res) {
|
||
console.log("下单前置检查 失败：", JSON.stringify(res));
|
||
}
|
||
});
|
||
// #endif
|
||
// #ifndef MP
|
||
that.onCreate(data);
|
||
// #endif
|
||
},
|
||
onCreate(data) {
|
||
orderCreate(data).then(res => {
|
||
if (res.data.groupBuyIsFull == 1) {
|
||
uni.hideLoading();
|
||
return this.$refs.sh_popup.open('center')
|
||
}
|
||
if (this.secondType === this.ProductTypeEnum.Integral && this.orderInfoVo.payFee == 0) {
|
||
// 积分商品并且支付金额为0时，直接默认走余额支付的逻辑，订单支付成功跳转到支付结果页
|
||
this.changeOrderPay(res.data.orderNo, 'yue', 'yue', 'integral', 'integral', '0')
|
||
} else {
|
||
// 其他商品走正常流程，去支付收银台页面
|
||
this.getToPayment(this.secondType, res.data)
|
||
}
|
||
|
||
uni.hideLoading();
|
||
}).catch(err => {
|
||
uni.hideLoading();
|
||
return this.$util.Tips({
|
||
title: err
|
||
});
|
||
});
|
||
},
|
||
//立即下单
|
||
SubOrder: Debounce(async function(e) {
|
||
let that = this,
|
||
data = {};
|
||
let flag = false;
|
||
that.orderMerchantRequestList.map(function(v) {
|
||
if (v.shippingType === 1 && !that.addressId && that.orderInfoVo.secondType !== 2) {
|
||
flag = true;
|
||
}
|
||
});
|
||
if (flag && this.secondType !== this.ProductTypeEnum.Reservation) {
|
||
that.$util.Tips({
|
||
title: '请选择收货地址'
|
||
});
|
||
return;
|
||
}
|
||
let systemFormData = []
|
||
if (this.orderInfoVo.systemFormValue.length) {
|
||
systemFormData = await this.$refs.systemFromRef.getSubmitFromData()
|
||
if (!systemFormData.length) return;
|
||
}
|
||
|
||
data = {
|
||
addressId: this.secondType === this.ProductTypeEnum.Reservation ? this.reservationInfo.addressId : that
|
||
.addressId,
|
||
orderMerchantRequestList: that.orderMerchantRequestList,
|
||
isUseIntegral: that.isUseIntegral,
|
||
preOrderNo: that.orderNo,
|
||
platUserCouponId: this.platUserCouponId,
|
||
systemFormId: this.orderInfoVo.systemFormId,
|
||
orderExtend: systemFormData.length ? JSON.stringify(systemFormData) : '',
|
||
reservationName: this.reservationInfo.reservationName,
|
||
reservationPhone: this.reservationInfo.reservationPhone
|
||
};
|
||
uni.showLoading({
|
||
title: '订单提交中'
|
||
});
|
||
await that.payment(data);
|
||
})
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.w-480px {
|
||
width: 480rpx;
|
||
}
|
||
|
||
.noCoupon {
|
||
color: #999999;
|
||
|
||
}
|
||
|
||
.mr14 {
|
||
margin-right: 14rpx;
|
||
}
|
||
|
||
.couponTitle {
|
||
width: 430rpx;
|
||
display: inline-block;
|
||
text-align: right;
|
||
color: #666666;
|
||
// @include main_color(theme);
|
||
}
|
||
|
||
.store-address {
|
||
// padding: 20rpx;
|
||
margin: 0 24rpx;
|
||
background: #F6F6F6;
|
||
// background: #FFF;
|
||
// border: solid 2rpx #F6F6F6;
|
||
border-radius: 16rpx;
|
||
font-size: 24rpx;
|
||
/*垂直居中*/
|
||
-webkit-box-align: center;
|
||
/*旧版本*/
|
||
-moz-box-align: center;
|
||
/*旧版本*/
|
||
-ms-flex-align: center;
|
||
/*混合版本*/
|
||
-webkit-align-items: center;
|
||
/*新版本*/
|
||
align-items: center;
|
||
|
||
/*新版本*/
|
||
.phone {
|
||
margin-bottom: 10rpx;
|
||
color: #282828;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.name {
|
||
padding-right: 20rpx;
|
||
}
|
||
|
||
.info {
|
||
flex: 1;
|
||
}
|
||
|
||
.line2 {
|
||
width: 456rpx !important;
|
||
}
|
||
|
||
.map {
|
||
text-align: center;
|
||
padding-left: 36rpx;
|
||
position: relative;
|
||
@include main_color(theme);
|
||
|
||
&::before {
|
||
content: '';
|
||
display: inline-block;
|
||
width: 2rpx;
|
||
height: 42rpx;
|
||
background-color: #DDDDDD;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 18rpx;
|
||
}
|
||
|
||
.iconfont {
|
||
color: var(--view-theme);
|
||
}
|
||
|
||
.map_text {
|
||
color: var(--view-theme);
|
||
}
|
||
}
|
||
}
|
||
|
||
.price_color {
|
||
@include price_color(theme);
|
||
}
|
||
|
||
.line2 {
|
||
width: 624rpx;
|
||
}
|
||
|
||
.textR {
|
||
text-align: right;
|
||
}
|
||
|
||
|
||
.order-submission .wrapper .item .discount .placeholder {
|
||
color: #ccc;
|
||
}
|
||
|
||
.order-submission .wrapper {
|
||
background-color: #fff;
|
||
}
|
||
|
||
.order-submission .wrapper .item {
|
||
padding: 20rpx 24rpx;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.order-submission .wrapper .item .discount {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
}
|
||
|
||
.order-submission .wrapper .item .discount .num {
|
||
font-size: 32rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.order-submission .wrapper .item .shipping {
|
||
font-size: 28rpx;
|
||
color: #999;
|
||
position: relative;
|
||
padding-right: 58rpx;
|
||
}
|
||
|
||
.order-submission .wrapper .item .shipping .iconfont {
|
||
font-size: 35rpx;
|
||
color: #707070;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
margin-left: 30rpx;
|
||
}
|
||
|
||
.order-submission .wrapper .item textarea {
|
||
background-color: #f9f9f9;
|
||
width: auto !important;
|
||
height: 140rpx;
|
||
border-radius: 14rpx;
|
||
margin-top: 30rpx;
|
||
padding: 15rpx;
|
||
box-sizing: border-box;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.order-submission .wrapper .item .placeholder {
|
||
color: #ccc;
|
||
}
|
||
|
||
.order-submission .wrapper .item .list {
|
||
margin-top: 35rpx;
|
||
}
|
||
|
||
.order-submission .wrapper .item .list .payItem {
|
||
border: 1px solid #eee;
|
||
border-radius: 14rpx;
|
||
height: 86rpx;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
margin-top: 20rpx;
|
||
font-size: 28rpx;
|
||
color: #282828;
|
||
}
|
||
|
||
.order-submission .wrapper .item .list .payItem.on {
|
||
// border-color: #fc5445;
|
||
@include coupons_border_color(theme);
|
||
color: $theme-color;
|
||
}
|
||
|
||
.order-submission .wrapper .item .list .payItem .name {
|
||
width: 50%;
|
||
text-align: center;
|
||
border-right: 1px solid #eee;
|
||
}
|
||
|
||
.order-submission .wrapper .item .list .payItem .name .iconfont {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
border-radius: 50%;
|
||
text-align: center;
|
||
line-height: 44rpx;
|
||
background-color: #fe960f;
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
margin-right: 15rpx;
|
||
}
|
||
|
||
.order-submission .wrapper .item .list .payItem .name .iconfont.icon-weixin2 {
|
||
background-color: #41b035;
|
||
}
|
||
|
||
.order-submission .wrapper .item .list .payItem .name .iconfont.icon-a-ic_alipay {
|
||
background-color: #00AAEA;
|
||
}
|
||
|
||
.order-submission .wrapper .item .list .payItem .tip {
|
||
width: 49%;
|
||
text-align: center;
|
||
font-size: 26rpx;
|
||
color: #aaa;
|
||
}
|
||
|
||
.order-submission .moneyList {
|
||
margin-top: 20rpx;
|
||
background-color: #fff;
|
||
padding: 10rpx 24rpx;
|
||
margin-bottom: calc(constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
|
||
margin-bottom: calc(env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
|
||
}
|
||
|
||
.order-submission .moneyList .item {
|
||
font-size: 28rpx;
|
||
color: #282828;
|
||
height: 80rpx;
|
||
}
|
||
|
||
.order-submission .moneyList .item~.item {
|
||
// margin-top: 20rpx;
|
||
}
|
||
|
||
.order-submission .moneyList .item .money {
|
||
color: #666666;
|
||
}
|
||
|
||
.order-submission .footer {
|
||
width: 100%;
|
||
height: 100rpx;
|
||
background-color: #fff;
|
||
padding: 0 30rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
box-sizing: border-box;
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
height: calc(100rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
|
||
height: calc(100rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
|
||
z-index: 999;
|
||
}
|
||
|
||
.order-submission .footer .settlement {
|
||
background-color: #fff;
|
||
font-size: 26rpx;
|
||
color: #fff;
|
||
width: 200rpx;
|
||
height: 72rpx;
|
||
@include main_bg_color(theme);
|
||
border-radius: 60rpx;
|
||
text-align: center;
|
||
line-height: 72rpx;
|
||
}
|
||
|
||
.footer .transparent {
|
||
opacity: 0
|
||
}
|
||
|
||
/deep/ checkbox .uni-checkbox-input.uni-checkbox-input-checked,
|
||
/deep/ .uni-radio-input-checked {
|
||
@include main_bg_color(theme);
|
||
border: none !important;
|
||
color: #fff !important
|
||
}
|
||
|
||
/deep/ checkbox .wx-checkbox-input.wx-checkbox-input-checked,
|
||
/deep/ .wx-radio-input-checked {
|
||
@include main_bg_color(theme);
|
||
border: none !important;
|
||
color: #fff !important;
|
||
margin-right: 0 !important;
|
||
}
|
||
|
||
// 切换
|
||
/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;
|
||
}
|
||
|
||
/deep/uni-checkbox[disabled] .uni-checkbox-input {
|
||
background-color: #eee;
|
||
}
|
||
|
||
.address {
|
||
background-color: #fff;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.footer .transparent {
|
||
opacity: 0
|
||
}
|
||
|
||
.w-322 {
|
||
width: 322rpx;
|
||
}
|
||
|
||
.w-450 {
|
||
width: 450rpx;
|
||
}
|
||
|
||
.h-auto {
|
||
height: auto;
|
||
}
|
||
|
||
.mt30 {
|
||
margin-top: 30rpx;
|
||
}
|
||
|
||
.bg-primary-light {
|
||
@include main_rgba_color(theme);
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.select-name {
|
||
max-width: 300rpx;
|
||
}
|
||
|
||
.font-color {
|
||
font-weight: 500 !important;
|
||
}
|
||
|
||
/deep/ .uni-popup__wrapper {
|
||
background: #FFFFFF;
|
||
border-radius: 32rpx;
|
||
}
|
||
|
||
.sh_popup-content {
|
||
padding: 40rpx;
|
||
|
||
.sh_popup_title {
|
||
font-weight: 500;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
text-align: center;
|
||
}
|
||
|
||
.sh_popup_text {
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #666666;
|
||
text-align: center;
|
||
margin-top: 36rpx;
|
||
}
|
||
|
||
.sh_popup_btn {
|
||
display: flex;
|
||
margin-top: 60rpx;
|
||
justify-content: space-between;
|
||
|
||
.btn {
|
||
width: 244rpx;
|
||
height: 72rpx;
|
||
border-radius: 50rpx;
|
||
text-align: center;
|
||
line-height: 72rpx;
|
||
}
|
||
|
||
.no_btn {
|
||
@include coupons_border_color(theme);
|
||
color: $theme-color;
|
||
margin-right: 32rpx;
|
||
}
|
||
|
||
.yes_btn {
|
||
@include main_bg_color(theme);
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
|
||
.pick-gradient-bg {
|
||
@include index-gradient(theme);
|
||
}
|
||
|
||
.pick-up-info-top-box {
|
||
background: #FFFFFF;
|
||
border-radius: 24rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.wrapper {
|
||
& + .wrapper {
|
||
margin-top: 20rpx;
|
||
}
|
||
}
|
||
|
||
.pt-24 {
|
||
padding-top: 24rpx;
|
||
}
|
||
|
||
.pt20 {
|
||
padding-top: 20rpx;
|
||
}
|
||
|
||
.pb-24 {
|
||
padding-bottom: 24rpx;
|
||
}
|
||
</style> |