186 lines
8.8 KiB
Vue
186 lines
8.8 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 fon28" style="padding: 27rpx 20rpx;">
|
|||
|
|
<view class="disjbac">
|
|||
|
|
<view class="bold">商城订单</view>
|
|||
|
|
<view style="color: #F85050;font-weight: bold;">待付款</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="bold col3 mar-s40 mar-x20">订单号：1234567890</view>
|
|||
|
|
<view class="fon24 col9">2021-09-06 10:30</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 物流信息 -->
|
|||
|
|
<view class="bacf radius20 mar-s20 fon28" style="padding: 27rpx 20rpx;">
|
|||
|
|
<view class="bold">物流信息</view>
|
|||
|
|
<view class="bold col3 mar-s40 fon26 disjbac">
|
|||
|
|
<view>韵达快递：2983625984729</view>
|
|||
|
|
<view>复制</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 地址信息 -->
|
|||
|
|
<view v-if="isExpress" class="bacf radius20 mar-s20" style="padding: 27rpx 20rpx;">
|
|||
|
|
<view class="bold">收件人信息</view>
|
|||
|
|
<view class="fon26 col3">
|
|||
|
|
<view class="fon28 col3 bold" style="margin: 52rpx 0 20rpx 0;">蒋灰灰 <span>188****0362</span></view>
|
|||
|
|
<view class="fon24 col9">四川省成都市成华区中环路双店路段奥园广场</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<!-- 订单信息 -->
|
|||
|
|
<view class="bacf radius20 mar-s20" style="padding: 27rpx 20rpx;">
|
|||
|
|
<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 class="fon28 disjbac" style="margin: 60rpx 0 20rpx 0;">
|
|||
|
|
<view class="col6">共4件</view>
|
|||
|
|
<view style="font-weight: bold;color: #F85050;">应付款：3888.00+300孔雀币</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="fon28 col3" style="margin: 40rpx 0 40rpx 0;text-align: right;">消费：<span style="font-size: 36rpx;font-weight: bold;color: #F85050;">￥3898+300孔雀币</span></view>
|
|||
|
|
<view class="disjbac posixzy bacf" style="height: 124rpx;padding: 0 32rpx;display: flex;align-items: center;">
|
|||
|
|
<view class="posir">
|
|||
|
|
<image src="/static/public/weix.png" style="width: 56rpx;height: 56rpx;" mode=""></image>
|
|||
|
|
<view class="fon28 col3">分享</view>
|
|||
|
|
<button open-type="share" class="posia" style="top: 0;left: 0;right: 0;bottom: 0;opacity: 0;"></button>
|
|||
|
|
</view>
|
|||
|
|
<!-- 待收货 -->
|
|||
|
|
<!-- <view class="disac">
|
|||
|
|
<view style="width: 249rpx;height: 70rpx;border-radius: 35rpx;line-height: 70rpx;text-align: center;font-size: 28rpx;font-weight: bold;background: #E9E9E9;color: #808080;">取消订单</view>
|
|||
|
|
<view style="width: 249rpx;height: 70rpx;border-radius: 35rpx;line-height: 70rpx;text-align: center;font-size: 28rpx;font-weight: bold;background: #3875F6;color: #FFFFFF;margin-left: 20rpx;">立即支付</view>
|
|||
|
|
</view> -->
|
|||
|
|
<!-- 确认收货 -->
|
|||
|
|
<view style="width: 249rpx;height: 70rpx;border-radius: 35rpx;line-height: 70rpx;text-align: center;font-size: 28rpx;font-weight: bold;background: #3875F6;color: #FFFFFF;margin-left: 20rpx;">确认收货</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>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
statusHNH:uni.getStorageSync('statusHNH'),
|
|||
|
|
publicColor:uni.getStorageSync('publicColor'),//主题颜色
|
|||
|
|
isExpress:true,
|
|||
|
|
switchQuan:true,
|
|||
|
|
showQuan: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>
|