|
@@ -0,0 +1,794 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <view class="top-cont">
|
|
|
+ <!-- 背景图片 -->
|
|
|
+ <image class="bg" src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/order_top_bg.png" mode=""></image>
|
|
|
+ <view class="top-inner">
|
|
|
+ <!-- 这里是状态栏 -->
|
|
|
+ <view class="fixed-top-box">
|
|
|
+ <view class="status_bar" :style="{height: statusBarHeight}"></view>
|
|
|
+ <view class="back-box" @click="back">
|
|
|
+ <image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/back_white.png" mode=""></image>
|
|
|
+ <text class="title">订单详情</text>
|
|
|
+ <text></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 顶部固定后站位元素 -->
|
|
|
+ <view style="padding-bottom: 88upx;">
|
|
|
+ <view :style="{height: statusBarHeight}"></view>
|
|
|
+ </view>
|
|
|
+ <!-- 订单状态 -->
|
|
|
+ <view class="order-status">
|
|
|
+ <!-- 待付款 -->
|
|
|
+ <view v-if="order.status == 0" class="inner">
|
|
|
+ <view class="img-box">
|
|
|
+ <image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/pag96.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="status-box">
|
|
|
+ <text class="status">待付款</text>
|
|
|
+ <text class="desc">请在{{payLimitTime}}前完成支付</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 待发货 -->
|
|
|
+ <view v-if="order.status == 1" class="inner">
|
|
|
+ <view class="img-box">
|
|
|
+ <image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/pag96.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="status-box">
|
|
|
+ <text class="status">待发货</text>
|
|
|
+ <text class="desc">等待后台发货</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 已发货、待收货 -->
|
|
|
+ <view v-if="order.status == 2" class="inner">
|
|
|
+ <view class="img-box">
|
|
|
+ <image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/receipt.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="status-box">
|
|
|
+ <text class="status">待收货</text>
|
|
|
+ <text class="desc">运输中</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 已完成 -->
|
|
|
+ <view v-if="order.status == 3" class="inner">
|
|
|
+ <view class="img-box">
|
|
|
+ <image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/finish96.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="status-box">
|
|
|
+ <text class="status">已完成</text>
|
|
|
+ <text class="desc">订单已确认收货,交易完成</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!--交易取消 -->
|
|
|
+ <view v-if="order.status == -3" class="inner">
|
|
|
+ <view class="img-box">
|
|
|
+ <image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/close_trade.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="status-box">
|
|
|
+ <text class="status">交易关闭</text>
|
|
|
+ <text class="desc">订单已取消</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="order.status == -1" class="inner">
|
|
|
+ <view class="img-box">
|
|
|
+ <image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/close_trade.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="status-box">
|
|
|
+ <text class="status">申请售后</text>
|
|
|
+ <text class="desc">请等待客服审核</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="order.status == -2" class="inner">
|
|
|
+ <view class="img-box">
|
|
|
+ <image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/close_trade.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="status-box">
|
|
|
+ <text class="status">退款成功</text>
|
|
|
+ <text class="desc">已成功退款</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 下单人信息 -->
|
|
|
+ <view class="order-placer">
|
|
|
+ <view class="inner">
|
|
|
+ <image class="location" src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/location.png" mode=""></image>
|
|
|
+ <view class="info">
|
|
|
+ <view class="name-phone">
|
|
|
+ <text class="text">{{order.realName}}</text>
|
|
|
+ <text class="text" v-if="order.userPhone!=null">{{$parsePhone(order.userPhone)}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="address ellipsis2">
|
|
|
+ {{order.userAddress}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="content">
|
|
|
+ <!-- 药品列表 -->
|
|
|
+ <view class="goods-list">
|
|
|
+ <view v-if="order.isPackage!=1" v-for="(item,index) in items" :key="index" class="item" @click="openDetails(item)">
|
|
|
+ <view class="img-box">
|
|
|
+ <image :src="JSON.parse(item.jsonInfo).image" mode="aspectFill"></image>
|
|
|
+ </view>
|
|
|
+ <view class="info-box">
|
|
|
+ <view>
|
|
|
+ <view class="name-box ellipsis2">
|
|
|
+ <view v-if="item.isPrescribe==1" class="tag">处方药</view>{{JSON.parse(item.jsonInfo).productName}}
|
|
|
+ </view>
|
|
|
+ <view class="spec ellipsis2">{{JSON.parse(item.jsonInfo).sku}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="price-num">
|
|
|
+ <view class="price">
|
|
|
+ <text class="unit">¥</text>
|
|
|
+ <text class="num">{{JSON.parse(item.jsonInfo).price.toFixed(2)}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="num">x{{JSON.parse(item.jsonInfo).num}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view v-if="order.isPackage==1&&order.packageJson!=null" class="item" >
|
|
|
+ <view class="img-box">
|
|
|
+ <image :src="JSON.parse(order.packageJson).imgUrl" mode="aspectFill"></image>
|
|
|
+ </view>
|
|
|
+ <view class="info-box">
|
|
|
+ <view>
|
|
|
+ <view class="name-box ellipsis2">
|
|
|
+ <view class="tag">套餐</view>{{JSON.parse(order.packageJson).title}}
|
|
|
+ </view>
|
|
|
+ <view class="spec ellipsis2">{{JSON.parse(order.packageJson).descs}}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 已优惠、小计 -->
|
|
|
+ <view class="sub-total">
|
|
|
+ <view class="discount">
|
|
|
+ 订单金额:¥{{order.payPrice}}
|
|
|
+ </view>
|
|
|
+ <!-- <text class="label">实付金额:</text>
|
|
|
+ <view class="price">
|
|
|
+ <text class="unit">¥</text>
|
|
|
+ <text class="num">{{order.payMoney}}</text>
|
|
|
+ </view> -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 订单信息 -->
|
|
|
+ <view class="order-info">
|
|
|
+ <view class="title">订单信息</view>
|
|
|
+ <view class="item">
|
|
|
+ <text class="label">订单编号</text>
|
|
|
+ <view class="sn-box">
|
|
|
+ <text class="text">{{order.orderCode}}</text>
|
|
|
+ <view class="copy-btn" @click="copyOrderSn(order.orderCode)">复制</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <text class="label">下单时间</text>
|
|
|
+ <text class="text">{{order.createTime}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <text class="label">支付方式</text>
|
|
|
+ <text class="text" v-if="order.payType==1">微信支付</text>
|
|
|
+ <text class="text" v-if="order.payType==2">物流代收</text>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <text class="label">订单金额</text>
|
|
|
+ <text class="text" v-if="order.totalPrice!=null">¥{{order.totalPrice.toFixed(2)}}</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="item">
|
|
|
+ <text class="label">运费</text>
|
|
|
+ <text class="text" v-if="order.payPostage!=null">¥{{order.payPostage.toFixed(2)}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <text class="label">服务费</text>
|
|
|
+ <text class="text" v-if="order.serviceFee!=null">¥{{order.serviceFee.toFixed(2)}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <text class="label">优惠金额</text>
|
|
|
+ <text class="text" v-if="order.couponPrice!=null">-¥{{order.couponPrice.toFixed(2)}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <text class="label">应付金额</text>
|
|
|
+ <text class="text" v-if="order.payPrice!=null">¥{{order.payPrice.toFixed(2)}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <text class="label">支付金额</text>
|
|
|
+ <text class="text" v-if="order.payMoney!=null">¥{{order.payMoney.toFixed(2)}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <text class="label">代收金额</text>
|
|
|
+ <text class="text" v-if="order.payDelivery!=null">¥{{order.payDelivery.toFixed(2)}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <text class="label">支付时间</text>
|
|
|
+ <text class="text" v-if="order.payTime!=null">{{order.payTime}}</text>
|
|
|
+ </view>
|
|
|
+ <!-- <view v-if="order.status >1" class="item">
|
|
|
+ <text class="label">发货时间</text>
|
|
|
+ <text class="text"></text>
|
|
|
+ </view> -->
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <!-- 处方信息 -->
|
|
|
+ <view class="order-info" v-if="order.isPrescribe&&prescribe!=null">
|
|
|
+ <view class="title">处方信息</view>
|
|
|
+ <view class="item">
|
|
|
+ <text class="label">处方单号</text>
|
|
|
+ <text class="text">{{prescribe.rpId}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="item" v-if="prescribe.doctorName!=null">
|
|
|
+ <text class="label">开方医生</text>
|
|
|
+ <text class="text">{{prescribe.doctorName}}</text>
|
|
|
+ </view>
|
|
|
+ <view class="item" v-if="prescribe.rpUrl!=null">
|
|
|
+ <text class="label">电子处方</text>
|
|
|
+ <view class="check-box" @click="showImg()">
|
|
|
+ <text class="text">查看</text>
|
|
|
+ <image src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/app/newImages/shopping/arrow4.png" mode=""></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ <text class="label">审核意见</text>
|
|
|
+ <text class="text" v-if="prescribe.auditReason!=null">{{prescribe.auditReason}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 按钮 -->
|
|
|
+ <view class="btn-box">
|
|
|
+ <!-- <view class="btn cancel">联系客服</view> -->
|
|
|
+ <view class="btn cancel" v-if="order.status==0" @click="cancel()">取消订单</view>
|
|
|
+ <view class="btn pay" v-if="order.status==0" @click="pay()">立即付款</view>
|
|
|
+ <view class="btn cancel" v-if="(order.status==0||order.status==1)&&order.isPrescribe==1&&prescribe==null" @click="addPrescribe()">开处方</view>
|
|
|
+ <view class="btn cancel" v-if="isAfterSales==1" @click="refund()">申请售后</view>
|
|
|
+ <view class="btn pay" v-if="order.status>=2&&order.deliveryId!=null" @click="express()">查看物流</view>
|
|
|
+ <view class="btn pay" v-if="order.status==2&&order.payType!=1&&order.isPayRemain==0&&order.deliverySn=='SF'" @click="payRemain()">支付尾款</view>
|
|
|
+ <view class="btn pay" v-if="order.status==2" @click="finish()">确认收货</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import {getMyStoreOrderById,cancelOrder,express,finishOrder} from '../api/storeOrder'
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isAfterSales:0,
|
|
|
+ payLimitTime:null,
|
|
|
+ orderId:null,
|
|
|
+ order:{},
|
|
|
+ items:[],
|
|
|
+ prescribe:null,
|
|
|
+ // 状态栏的高度
|
|
|
+ statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
|
|
|
+
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ this.orderId = option.id
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.getMyStoreOrderById()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ openDetails(item){
|
|
|
+ console.log(item)
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages/shopping/productDetails?productId='+item.productId
|
|
|
+ })
|
|
|
+ },
|
|
|
+ addPrescribe(){
|
|
|
+ uni.navigateTo({
|
|
|
+ url:"/pages/shopping/prescribe?orderId="+this.order.id
|
|
|
+ })
|
|
|
+ },
|
|
|
+ showImg(){
|
|
|
+ var imgArr = [];
|
|
|
+ imgArr.push(this.prescribe.rpUrl)
|
|
|
+ //预览图片
|
|
|
+ uni.previewImage({
|
|
|
+ urls: imgArr,
|
|
|
+ current: imgArr[0]
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getMyStoreOrderById(){
|
|
|
+ var data={orderId:this.orderId};
|
|
|
+ getMyStoreOrderById(data).then(res => {
|
|
|
+ if(res.code==200){
|
|
|
+ this.order=res.order;
|
|
|
+ this.items=res.items;
|
|
|
+ this.payLimitTime=res.payLimitTime;
|
|
|
+ this.prescribe=res.prescribe;
|
|
|
+ this.isAfterSales=res.isAfterSales;
|
|
|
+ }else{
|
|
|
+ uni.showToast({
|
|
|
+ icon:'none',
|
|
|
+ title: "请求失败",
|
|
|
+ });
|
|
|
+
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ express(){
|
|
|
+ uni.navigateTo({
|
|
|
+ url: './storeOrderDelivery?orderId='+this.order.id
|
|
|
+ })
|
|
|
+ },
|
|
|
+ cancel(){
|
|
|
+ var that=this;
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '确定取消订单吗',
|
|
|
+ success: function (res) {
|
|
|
+ if (res.confirm) {
|
|
|
+ var data = {
|
|
|
+ orderId:that.order.id
|
|
|
+ };
|
|
|
+ cancelOrder(data).then(res => {
|
|
|
+ if(res.code==200){
|
|
|
+ that.getMyStoreOrderById()
|
|
|
+ uni.$emit('refreshOrder');
|
|
|
+ }else{
|
|
|
+ uni.showToast({
|
|
|
+ icon:'none',
|
|
|
+ title: res.msg,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ else if (res.cancel) {
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ finish(){
|
|
|
+ var that=this;
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '确定已收货吗',
|
|
|
+ success: function (res) {
|
|
|
+ if (res.confirm) {
|
|
|
+ var data = {
|
|
|
+ orderId:that.order.id
|
|
|
+ };
|
|
|
+ finishOrder(data).then(res => {
|
|
|
+ if(res.code==200){
|
|
|
+ that.getMyStoreOrderById()
|
|
|
+ uni.$emit('refreshOrder');
|
|
|
+ }else{
|
|
|
+ uni.showToast({
|
|
|
+ icon:'none',
|
|
|
+ title: res.msg,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ else if (res.cancel) {
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ pay() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages_shopping/paymentOrder?orderId='+this.order.id
|
|
|
+ })
|
|
|
+ },
|
|
|
+ payRemain() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: '/pages_user/shopping/paymentOrderRemain?orderId='+this.order.id
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 返回上一页
|
|
|
+ back() {
|
|
|
+ let pages = getCurrentPages();
|
|
|
+ console.log(pages.length);
|
|
|
+ if(pages.length>1){
|
|
|
+ uni.navigateBack()
|
|
|
+ }
|
|
|
+ else{
|
|
|
+ uni.reLaunch({
|
|
|
+ url:"/pages/common/launch"
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ // 复制订单编号
|
|
|
+ copyOrderSn(text) {
|
|
|
+ // 复制方法
|
|
|
+ uni.setClipboardData({
|
|
|
+ data:text,
|
|
|
+ success:()=>{
|
|
|
+ uni.showToast({
|
|
|
+ title:'内容已成功复制到剪切板',
|
|
|
+ icon:'none'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 退货
|
|
|
+ refund() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: './refundOrderProduct?orderId='+this.orderId
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ .fixed-top-box{
|
|
|
+ width: 100%;
|
|
|
+ background: linear-gradient(135deg, #2BC7B9 0%, #60CDC3 100%);
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 1000;
|
|
|
+ }
|
|
|
+ .top-cont{
|
|
|
+ width: 100%;
|
|
|
+ height: 476upx;
|
|
|
+ position: relative;
|
|
|
+ .bg{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+ .top-inner{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 2;
|
|
|
+ .back-box{
|
|
|
+ height: 88upx;
|
|
|
+ padding-left: 22upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 20upx;
|
|
|
+ image{
|
|
|
+ width: 40upx;
|
|
|
+ height: 40upx;
|
|
|
+ }
|
|
|
+ .title{
|
|
|
+ font-size: 36upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .order-status{
|
|
|
+ margin-top: 60upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 30upx;
|
|
|
+ .inner{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .img-box{
|
|
|
+ width: 96upx;
|
|
|
+ height: 96upx;
|
|
|
+ margin-right: 30upx;
|
|
|
+ image{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .status-box{
|
|
|
+ height: 96upx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ .status{
|
|
|
+ font-size: 40upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+ .desc{
|
|
|
+ font-size: 26upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 1;
|
|
|
+ margin-top: 30upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .order-placer{
|
|
|
+ margin-top: 50upx;
|
|
|
+ padding: 0 20upx;
|
|
|
+ .inner{
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 16upx;
|
|
|
+ height: 150upx;
|
|
|
+ padding: 40upx 30upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background: #FFFFFF;
|
|
|
+ .location{
|
|
|
+ width: 24upx;
|
|
|
+ height: 27upx;
|
|
|
+ margin-right: 18upx;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ .info{
|
|
|
+ .name-phone{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .text{
|
|
|
+ font-size: 28upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 1;
|
|
|
+ margin-right: 20upx;
|
|
|
+ &:last-child{
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .address{
|
|
|
+ font-size: 26upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 1.3;
|
|
|
+ margin-top: 10upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content{
|
|
|
+ margin: 20rpx 0rpx;
|
|
|
+ padding: 0 20upx 140rpx 20upx;
|
|
|
+ .goods-list{
|
|
|
+ padding: 0 30upx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-radius: 16upx;
|
|
|
+ .item{
|
|
|
+ padding: 30upx 0;
|
|
|
+ border-bottom: 1px solid #EDEEEF;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .img-box{
|
|
|
+ width: 160upx;
|
|
|
+ height: 160upx;
|
|
|
+ margin-right: 30upx;
|
|
|
+ image{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info-box{
|
|
|
+ width: calc(100% - 190upx);
|
|
|
+ height: 160upx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ .name-box{
|
|
|
+ font-size: 28upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #111111;
|
|
|
+ line-height: 40upx;
|
|
|
+ .tag{
|
|
|
+ display: inline-block;
|
|
|
+ padding: 0 6upx;
|
|
|
+ height: 30upx;
|
|
|
+ background: linear-gradient(90deg, #2BC7B9 0%, #2BC7A4 100%);
|
|
|
+ border-radius: 4upx;
|
|
|
+ margin-right: 10upx;
|
|
|
+ font-size: 22upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 30upx;
|
|
|
+ float: left;
|
|
|
+ margin-top: 7upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .spec{
|
|
|
+ margin-top: 18upx;
|
|
|
+ font-size: 24upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+ .price-num{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .price{
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ .unit{
|
|
|
+ font-size: 24upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #111111;
|
|
|
+ line-height: 1.2;
|
|
|
+ margin-right: 4upx;
|
|
|
+ }
|
|
|
+ .num{
|
|
|
+ font-size: 32upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #111111;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .num{
|
|
|
+ font-size: 24upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sub-total{
|
|
|
+ height: 88upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ .discount{
|
|
|
+ font-size: 24upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999999;
|
|
|
+ line-height: 1;
|
|
|
+ margin-right: 30upx;
|
|
|
+ }
|
|
|
+ .label{
|
|
|
+ font-size: 24upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ .price{
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ .unit{
|
|
|
+ font-size: 24upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FF6633;
|
|
|
+ line-height: 1.2;
|
|
|
+ margin-right: 4upx;
|
|
|
+ }
|
|
|
+ .num{
|
|
|
+ font-size: 32upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #FF6633;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .order-info{
|
|
|
+ margin-top: 20upx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 16upx;
|
|
|
+ padding: 40upx 30upx;
|
|
|
+ .title{
|
|
|
+ font-size: 30upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #222222;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+ .item{
|
|
|
+ margin-top: 40upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ .label{
|
|
|
+ font-size: 26upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #666666;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+ .text{
|
|
|
+ font-size: 26upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #222222;
|
|
|
+ line-height: 32upx;
|
|
|
+ }
|
|
|
+ .cont-text{
|
|
|
+ font-size: 26upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #666666;
|
|
|
+ .bold{
|
|
|
+ color: #111111;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sn-box{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .copy-btn{
|
|
|
+ width: 58upx;
|
|
|
+ height: 32upx;
|
|
|
+ line-height: 32upx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 22upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #222222;
|
|
|
+ background: #F5F5F5;
|
|
|
+ border-radius: 4upx;
|
|
|
+ margin-left: 24upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .check-box{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ image{
|
|
|
+ width: 14upx;
|
|
|
+ height: 24upx;
|
|
|
+ margin-left: 10upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .line{
|
|
|
+ width: 100%;
|
|
|
+ height: 1px;
|
|
|
+ background: #F0F0F0;
|
|
|
+ margin-top: 30upx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btn-box{
|
|
|
+ z-index: 999;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ position: fixed;
|
|
|
+ height: 120upx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #FFFFFF;
|
|
|
+ padding: 0 30upx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-end;
|
|
|
+ .btn{
|
|
|
+ width: 155upx;
|
|
|
+ height: 64upx;
|
|
|
+ line-height: 64upx;
|
|
|
+ font-size: 26upx;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 32upx;
|
|
|
+ margin-left: 15upx;
|
|
|
+ &.cancel{
|
|
|
+ border: 1px solid #DDDDDD;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ &.pay{
|
|
|
+ background: #2BC7B9;
|
|
|
+ color: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|