188 lines
9.1 KiB
Vue
188 lines
9.1 KiB
Vue
<template>
|
||
<view>
|
||
<!-- 状态栏 -->
|
||
<status-nav :titleVal="'购物车'" :statusTitle="true"></status-nav>
|
||
<view :style="{paddingTop: statusHNH+'px'}" class="pad-zy30" style="padding-bottom: 150rpx;">
|
||
<view class="bacf radius20 mar-s20 disjbac" style="padding: 27rpx 20rpx;">
|
||
<view class="bold">配送方式</view>
|
||
<view class="fon26 col3 disac">
|
||
<view @tap="isExpress=true" :class="isExpress?'activeT':'expressT'" :style="{background:isExpress?publicColor:''}">快递</view>
|
||
<view @tap="isExpress=false" :class="!isExpress?'activeT':'expressT'" :style="{background:isExpress?'':publicColor}">自提</view>
|
||
</view>
|
||
</view>
|
||
<!-- 地址信息 -->
|
||
<view v-if="isExpress" class="bacf radius20 mar-s20" style="padding: 27rpx 20rpx;">
|
||
<view class="bold">收件人信息</view>
|
||
<view class="fon26 col3 disjbac">
|
||
<view>
|
||
<view class="fon28 col3 bold" style="margin: 52rpx 0 20rpx 0;">蒋灰灰 <span>188****0362</span></view>
|
||
<view class="fon24 col9">四川省成都市成华区中环路双店路段奥园广场</view>
|
||
</view>
|
||
<image src="/static/public/nextM.png" style="width: 16px;height: 16px;flex-shrink: 0;" mode="aspectFill"></image>
|
||
</view>
|
||
</view>
|
||
<!-- 自提地址 -->
|
||
<view v-else class="bacf radius20 mar-s20" style="padding: 27rpx 20rpx;">
|
||
<view class="bold">自提地址</view>
|
||
<view class="fon26 col3 disjbac" style="margin-top: 50rpx;">
|
||
<view>
|
||
<view class="fon28 col3 bold" style="margin-bottom: 20rpx;">恒美植发</view>
|
||
<view class="fon24 col9">四川省成都市青羊区青羊大道213号</view>
|
||
</view>
|
||
<image @tap="goThere" src="/static/public/daoh.png" style="width: 96rpx;height: 93rpx;flex-shrink: 0;" mode="aspectFill"></image>
|
||
</view>
|
||
</view>
|
||
<!-- 订单信息 -->
|
||
<view class="bacf radius20 mar-s20" style="padding: 27rpx 20rpx;">
|
||
<view class="bold">订单信息</view>
|
||
<view class="fon26 col3 disjbac pad-sx50 disjbac bbot">
|
||
<image src="/static/public/banner.png" class="flexs" style="width: 166rpx;height: 166rpx;border-radius: 15rpx;margin-right: 12rpx;" mode="aspectFill"></image>
|
||
<view class="width100">
|
||
<view class="fon28 col3 bold clips2">【99皮皮节】【种植发际线】1000单位FUE技术案例招募门美人</view>
|
||
<view style="font-size: 22rpx;color: #808080;font-weight: 500;">试用</view>
|
||
<view class="disjbac mar-s10">
|
||
<view style="color: #F85050;font-size: 32rpx;font-weight: bold;">￥3888</view>
|
||
<view class="fon28 col6">x2</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 优惠 -->
|
||
<view class="bacf radius20 mar-s20" style="padding: 27rpx 20rpx;">
|
||
<view class="bold">优惠</view>
|
||
<view @tap="showQuan=true" class="fon28 col3 disjbac mar-sx40">
|
||
<view>优惠券</view>
|
||
<view class="disac">
|
||
<view style="color: #F85050;font-weight: bold;">-￥99.00</view>
|
||
<image src="/static/public/nextM.png" style="width: 16px;height: 16px;flex-shrink: 0;" mode="aspectFill"></image>
|
||
</view>
|
||
</view>
|
||
<view class="fon28 col3 disjbac">
|
||
<view>立减优惠</view>
|
||
<view style="color: #F85050;font-weight: bold;">-￥99.00</view>
|
||
</view>
|
||
</view>
|
||
<!-- 快递费用 -->
|
||
<view class="bacf radius20 mar-s20 disjbac" style="padding: 27rpx 20rpx;">
|
||
<view class="bold">快递费用</view>
|
||
<view class="fon28" style="color: #F85050;font-weight: bold;">￥10.00</view>
|
||
</view>
|
||
<view class="disjbac posixzy bacf" style="height: 124rpx;line-height: 124rpx;padding: 0 32rpx;">
|
||
<!-- 去支付 -->
|
||
<view class="fon40 bold" style="color: #F85050;">合计：￥7166.00</view>
|
||
<view @tap="goPayment" style="color: #FFFFFF;font-size: 28rpx;font-weight: bold;width: 170rpx;height: 70rpx;line-height: 70rpx;text-align: center;background: #3875F6;border-radius: 35rpx;margin-left: 10rpx;">去支付</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="showQuan" @tap.stop="showQuan=false" class="posAll">
|
||
<view class="bacf posixzy" style="border-radius: 40rpx 40rpx 0rpx 0rpx;" @tap.stop="showQuan=true">
|
||
<view style="padding: 20rpx 50rpx;">
|
||
<view class="disjbac">
|
||
<view class="fon28 bold col3">优惠券</view>
|
||
<image @tap.stop="showQuan=false" src="/static/public/cha-close.png" style="width: 30rpx;height: 30rpx;" mode="aspectFill"></image>
|
||
</view>
|
||
<view class="fon28 bold col3" style="display: flex;justify-content: space-around;align-items: center;padding: 50rpx 0 16rpx 0;">
|
||
<view class="posir" :class="switchQuan?'activeQuan':''" @tap="switchQuan=true">可用优惠券(1)</view>
|
||
<view class="posir" :class="!switchQuan?'activeQuan':''" @tap="switchQuan=false">失效优惠券(0)</view>
|
||
</view>
|
||
<view class="mar-s40">
|
||
<view style="height: 200rpx;" class="disjbac">
|
||
<view class="posir" style="width: 218rpx;height: 200rpx;flex-shrink: 0;text-align: center;color: #FFFFFF;">
|
||
<image class="posia" src="/static/public/quan-left.png" style="width: 218rpx;height: 200rpx;left: 0;top: 0;" mode=""></image>
|
||
<view class="posir" style="z-index: 1;">
|
||
<view style="margin: 40rpx 0 30rpx 0rpx;" class="fon28">￥<span style="font-size: 56rpx;font-weight: bold;">10</span></view>
|
||
<view class="fon24">满300元可使用</view>
|
||
</view>
|
||
</view>
|
||
<view style="display: flex;flex-direction: column;justify-content: space-between;width: 100%;height: 200rpx;padding: 0 20rpx;background-color: #F5F5F5;">
|
||
<view class="fon28 col3 mar-s20">黄金会员专属优惠券</view>
|
||
<view>
|
||
<image src="/static/public/chooseQuan.png" style="width: 40rpx;height: 40rpx;border-radius: 100%;float: right;"></image>
|
||
</view>
|
||
<view class="fon20 col3 mar-x20">有效期：2021-09-06至2021-09-15</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="mar-s40">
|
||
<view style="height: 200rpx;" class="disjbac">
|
||
<view class="posir" style="width: 218rpx;height: 200rpx;flex-shrink: 0;text-align: center;color: #FFFFFF;">
|
||
<image class="posia" src="/static/public/quan-left.png" style="width: 218rpx;height: 200rpx;left: 0;top: 0;" mode=""></image>
|
||
<view class="posir" style="z-index: 1;">
|
||
<view style="margin: 40rpx 0 30rpx 0rpx;" class="fon28">￥<span style="font-size: 56rpx;font-weight: bold;">10</span></view>
|
||
<view class="fon24">满300元可使用</view>
|
||
</view>
|
||
</view>
|
||
<view style="display: flex;flex-direction: column;justify-content: space-between;width: 100%;height: 200rpx;padding: 0 20rpx;background-color: #F5F5F5;">
|
||
<view class="fon28 col3 mar-s20">黄金会员专属优惠券</view>
|
||
<view>
|
||
<image src="/static/public/cancleQuan.png" style="width: 40rpx;height: 40rpx;border-radius: 100%;float: right;"></image>
|
||
</view>
|
||
<view class="fon20 col3 mar-x20">有效期：2021-09-06至2021-09-15</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 领取优惠券按钮 -->
|
||
<view @tap.stop="showQuan=false" style="font-size: 36rpx;color: #FFFFFF;font-weight: bold;margin: 0 auto;background: #3875F6;border-radius: 20rpx;height: 90rpx;line-height: 90rpx;text-align: center;margin-top: 156rpx;margin-bottom: 20rpx;">领取优惠券</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 确认兑换弹框 -->
|
||
<view v-if="isDui" @tap.stop="isDui=false" class="posAll" style="display: flex;justify-content: center;align-items: center;padding: 0 85rpx;">
|
||
<view class="bacf radius20 width100 tc fon28 col3 pad20" @tap.stop="isDui=true">
|
||
<view class="bold" style="margin: 0rpx 0 56rpx 0;">兑换商品</view>
|
||
<view style="margin: 0rpx 0 66rpx 0;">您确定使用7666积分兑换吗？</view>
|
||
<view class="disjbac mar-x20 pad-zy20">
|
||
<view @tap.stop="isDui=false" style="width: 196rpx;height: 60rpx;line-height: 60rpx;text-align: center;font-size: 28rpx;font-weight: 500;border-radius: 10rpx;background: #C8C8C8;color: #FFFFFF;">暂不兑换</view>
|
||
<view @tap.stop="isDui=false" style="width: 196rpx;height: 60rpx;line-height: 60rpx;text-align: center;font-size: 28rpx;font-weight: 500;border-radius: 10rpx;background: #3875F6;color: #FFFFFF;">立即兑换</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
statusHNH:uni.getStorageSync('statusHNH'),
|
||
publicColor:uni.getStorageSync('publicColor'),//主题颜色
|
||
isExpress:true,
|
||
switchQuan:true,
|
||
showQuan:false,
|
||
isDui:false
|
||
}
|
||
},
|
||
onShow() {
|
||
this.$toolAll.tools.isLogin()
|
||
},
|
||
onLoad() {
|
||
|
||
},
|
||
methods: {
|
||
goThere(){
|
||
wx.getLocation({//获取当前经纬度
|
||
type: 'wgs84', //返回可以用于wx.openLocation的经纬度，官方提示bug: iOS 6.3.30 type 参数不生效，只会返回 wgs84 类型的坐标信息
|
||
success: function (res) {
|
||
wx.openLocation({//使用微信内置地图查看位置。
|
||
latitude: 22.5542080000,//要去的纬度-地址
|
||
longitude: 113.8878770000,//要去的经度-地址
|
||
name: "宝安中心A地铁口",
|
||
address:'宝安中心A地铁口'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
goPayment(){
|
||
uni.navigateTo({
|
||
url:'/pagesA/immediatePayment/immediatePayment'
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
page {
|
||
background-color: #F5F5F5;
|
||
}
|
||
</style>
|