|
|
@@ -0,0 +1,885 @@
|
|
|
+<template>
|
|
|
+ <view class="box">
|
|
|
+
|
|
|
+ <!-- 自定义导航 -->
|
|
|
+ <view class="zdyNavBox">
|
|
|
+ <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
|
|
|
+ <view class="zdyNav">
|
|
|
+ <view class="zdyNavLeft">
|
|
|
+ <image src="../../static/img/nav_icon_back.png" mode="aspectFit" class="backImg" @click="goback"></image>
|
|
|
+ <image src="../../static/img/nav_icon_home.png" mode="" class="homeImg" @click="gohome"></image>
|
|
|
+ </view>
|
|
|
+ <view class="zdyNavTitle">订单详情</view>
|
|
|
+ <view style="width: 100px;"></view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="status_bar" :style="{height: iStatusBarHeight + 'px'}"></view>
|
|
|
+ <view style="height: 44px;"></view>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="top">
|
|
|
+ <view class="orderState">
|
|
|
+ <image src="../../static/img/icon_order_def.png" mode="" style="width: 44rpx;height: 44rpx;"></image>
|
|
|
+
|
|
|
+
|
|
|
+ <view class="SheetState" v-if="orderData.data.sheetState == 1">待付款</view>
|
|
|
+ <view class="SheetState" v-if="orderData.data.sheetState == 2">待服务</view>
|
|
|
+ <view class="SheetState" v-if="orderData.data.sheetState == 3">已完成</view>
|
|
|
+ <view class="SheetState" v-if="orderData.data.sheetState == 4">已取消</view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 店铺信息 -->
|
|
|
+ <view class="shopBox">
|
|
|
+ <image src="../../../static/img/icon_store.png" mode="" class="shopBoximg"></image>
|
|
|
+ <view class="shopCont">
|
|
|
+ <view class="shopName">{{orderData.shopInfo.shopName}}</view>
|
|
|
+ <view class="Address">
|
|
|
+ {{orderData.shopInfo.provinceName}}{{orderData.shopInfo.cityName}}{{orderData.shopInfo.areaName}}{{orderData.shopInfo.address}}
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view class="shopRightBox" @click="map">
|
|
|
+
|
|
|
+ <image src="../../../static/img/icon_ditu.png" mode="" class="shopRightImg"></image>
|
|
|
+
|
|
|
+ <view class="shopRihgtTxt">地图</view>
|
|
|
+ </view>
|
|
|
+ <view class="shopsx"></view>
|
|
|
+ <view class="shopRightBox" @click="call">
|
|
|
+
|
|
|
+ <image src="../../../static/img/icon_phone.png" mode="" class="shopRightImg"></image>
|
|
|
+
|
|
|
+ <view class="shopRihgtTxt">电话</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 订单内容 -->
|
|
|
+ <view class="information">
|
|
|
+ <view class="detailedTitle">订单内容</view>
|
|
|
+ <view v-if="orderData.openSheetDetail.length>0" v-for="(item,index) in orderData.openSheetDetail" :key="index">
|
|
|
+
|
|
|
+ <view class="goodsName">{{item.itemName}}</view>
|
|
|
+ <view class="informationLine2">
|
|
|
+ <view class="salePrice"><span
|
|
|
+ class="informationNum">￥</span>{{item.salePrice}}</view>
|
|
|
+ <view class="informationNum" style="color: #999999;">
|
|
|
+ x{{item.itemQty}}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view v-if="orderData.data.sheetState != 1 && orderData.data.sheetState != 4" class="line"></view>
|
|
|
+ <view v-if="orderData.data.sheetState != 1 && orderData.data.sheetState != 4">
|
|
|
+ <view class="goodsName">
|
|
|
+ 券码信息（{{quanMaList.length?quanMaList.length:0}}张可用）
|
|
|
+ </view>
|
|
|
+ <view class="detailedLine" v-for="(v,index) in orderData.OpenSheetQRCode">
|
|
|
+
|
|
|
+ <view v-if="v.writeoffState==1" class="detailedName">
|
|
|
+ <view class="redPoint"></view>
|
|
|
+ <view class="code">{{v.qrCode}}</view>
|
|
|
+ <view class="quanState">待使用</view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <view v-if="v.writeoffState==3" class="detailedName">
|
|
|
+ <view class="redPoint"></view>
|
|
|
+ <view class="code old" >{{v.qrCode}}</view>
|
|
|
+ <view class="quanState2">已使用</view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <image src="../../../static/img/icon_erweima.png" mode="" style="width: 36rpx;height: 36rpx;"
|
|
|
+ v-if="v.writeoffState==1" @click="isShowMa=true"></image>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 套餐内容 -->
|
|
|
+ <view class="information" v-if="SheetType==3">
|
|
|
+ <view class="detailedTitle">套餐内容</view>
|
|
|
+ <!-- 项目 -->
|
|
|
+ <view class="itemBox" v-if="orderData.projectList.length>0">
|
|
|
+ <!-- 头 -->
|
|
|
+ <view class="itemTop">
|
|
|
+ <view class="leftItem">项目名称</view>
|
|
|
+ <view class="topTitle">数量</view>
|
|
|
+ <view class="topTitle">有效期</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view v-for="(item,index) in orderData.projectList" :key="index">
|
|
|
+ <view class="itemContent">
|
|
|
+ <view class="leftItem">{{item.flowName}}</view>
|
|
|
+ <view class="topTitle">{{item.flowQty}}</view>
|
|
|
+ <view class="topTitle">{{item.date}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 商品 -->
|
|
|
+ <view class="itemBox" v-if="orderData.shopList.length>0">
|
|
|
+ <!-- 头 -->
|
|
|
+ <view class="itemTop">
|
|
|
+ <view class="leftItem">商品名称</view>
|
|
|
+ <view class="topTitle">数量</view>
|
|
|
+ <view class="topTitle">有效期</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view v-for="(item,index) in orderData.shopList" :key="index">
|
|
|
+ <view class="itemContent">
|
|
|
+ <view class="leftItem">{{item.flowName}}</view>
|
|
|
+ <view class="topTitle">{{item.flowQty}}</view>
|
|
|
+ <view class="topTitle">{{item.date}}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 实付款 -->
|
|
|
+ <view class="money">
|
|
|
+ <view class="informationNum">实付款：</view>
|
|
|
+ <view class="informationNum" style="color: #FF0000;font-weight: bold;">￥{{orderData.data.realMoney}}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 订单信息 -->
|
|
|
+ <view class="information">
|
|
|
+ <view class="detailedTitle">订单信息</view>
|
|
|
+ <view class="informationLine">
|
|
|
+ <view class="informationTxt">订单单号：</view>
|
|
|
+ <view class="informationNum">{{orderData.data.code}}<span class="codeCopy"
|
|
|
+ @click="copy(orderData.data.code)">复制</span></view>
|
|
|
+ </view>
|
|
|
+ <view class="informationLine">
|
|
|
+ <view class="informationTxt">下单人：</view>
|
|
|
+ <view class="informationNum">{{orderData.data.userMobilePhone}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="informationLine">
|
|
|
+ <view class="informationTxt">下单时间：</view>
|
|
|
+ <view class="informationNum">{{orderData.data.createTime}}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="informationLine">
|
|
|
+ <view class="informationTxt">订单备注：</view>
|
|
|
+ <view class="informationNum" style="width: 510rpx;">{{orderData.data.comment?orderData.data.comment:''}}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 支付信息 -->
|
|
|
+ <view class="information">
|
|
|
+ <view class="detailedTitle">支付信息</view>
|
|
|
+ <view class="informationLine">
|
|
|
+ <view class="informationTxt">支付状态：</view>
|
|
|
+ <view class="informationNum" v-if="orderData.data.payState==1">未支付</view>
|
|
|
+ <view class="informationNum" v-if="orderData.data.payState==2">已支付</view>
|
|
|
+ </view>
|
|
|
+ <view class="informationLine">
|
|
|
+ <view class="informationTxt">支付方式：</view>
|
|
|
+ <view class="informationNum" v-if="orderData.data.payType==1">在线支付</view>
|
|
|
+ <view class="informationNum" v-if="orderData.data.payType==2">线下支付</view>
|
|
|
+ </view>
|
|
|
+ <view class="informationLine">
|
|
|
+ <view class="informationTxt">支付时间：</view>
|
|
|
+ <view class="informationNum">{{orderData.data.payTime?orderData.data.payTime:'-'}}</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view style="height: 50rpx;background-color: #F4F5F7;"></view>
|
|
|
+
|
|
|
+ <view class="bottom" v-if="orderData.data.sheetState == 1">
|
|
|
+
|
|
|
+ <view class="cancel" @click="cancelBespeak">取消订单</view>
|
|
|
+ <view class="defer" @click="pay">立即支付</view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <!-- 券码 -->
|
|
|
+ <view class="maBox" v-if="isShowMa==true" @click="isShowMa=false">
|
|
|
+ <view class="querenMa">
|
|
|
+ <view class="maTop">
|
|
|
+ <view class="maTitle">请到店出示券码即可开始服务</view>
|
|
|
+ <image @click="isShowMa=false" src="../../../static/img/icon_delete.png" mode=""
|
|
|
+ style="width: 26rpx;height: 26rpx;margin-left: 10rpx;"></image>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <swiper class="swiper" circular :autoplay="false" :indicator-dots="true" indicator-color="#CCCCCC" indicator-active-color="#D53533">
|
|
|
+ <swiper-item v-for="(item,index) in quanMaList">
|
|
|
+ <view class="swiper-item">
|
|
|
+ <view class="maCode">{{item}}</view>
|
|
|
+ <view class="maBoximg">
|
|
|
+ <tki-qrcode cid="qrcode1" ref="qrcode" :val="item" :size="400" :unit="unit"
|
|
|
+ :pdground="pdground" :icon="icon" :iconSize="iconsize" :lv="lv" :onval="onval"
|
|
|
+ :loadMake="loadMake" :usingComponents="true" @result="qrR" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </swiper-item>
|
|
|
+
|
|
|
+
|
|
|
+ </swiper>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ tkiQrcode
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+
|
|
|
+ id: '',
|
|
|
+ iStatusBarHeight:'',
|
|
|
+ SheetType: '', //SheetType 1 商品2项目3套餐4救援5钣喷6集客
|
|
|
+ orderData: '',
|
|
|
+
|
|
|
+ onval: true, // val值变化时自动重新生成二维码
|
|
|
+ loadMake: true, // 组件加载完成后自动生成二维码
|
|
|
+ size: 500,
|
|
|
+ qrcodeShow: false,
|
|
|
+ qrcodeTop: '-100vh',
|
|
|
+ qrcodeTopVal: '',
|
|
|
+ ifShow: false,
|
|
|
+ val: '二维码', // 要生成的二维码值
|
|
|
+ unit: 'upx', // 单位
|
|
|
+ background: '#b4e9e2', // 背景色
|
|
|
+ foreground: '#309286', // 前景色
|
|
|
+ pdground: '#262637', // 角标色
|
|
|
+ icon: '', // 二维码图标
|
|
|
+ iconsize: 40, // 二维码图标大小
|
|
|
+ lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
|
|
|
+ src: '', // 二维码生成后的图片地址或base64
|
|
|
+ isShowMa: false,
|
|
|
+ quanMaList:[],
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(opt) {
|
|
|
+ this.iStatusBarHeight = uni.getSystemInfoSync().statusBarHeight;
|
|
|
+ this.id = opt.id
|
|
|
+ this.SheetType = opt.SheetType
|
|
|
+
|
|
|
+ if (this.id) {
|
|
|
+ this.getData()
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ methods: {
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ copy(txt) {
|
|
|
+ uni.setClipboardData({
|
|
|
+ data: txt,
|
|
|
+ success: function() {
|
|
|
+ uni.showToast({
|
|
|
+ title: '复制成功',
|
|
|
+ icon: 'none',
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ cancelBespeak(){
|
|
|
+ var that = this
|
|
|
+ uni.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '是否取消该订单',
|
|
|
+ cancelText:'否',
|
|
|
+ confirmText:'是',
|
|
|
+ success: function (res) {
|
|
|
+ if (res.confirm) {
|
|
|
+
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中'
|
|
|
+ })
|
|
|
+
|
|
|
+ that.$http('openOrderManagement/updateSheetState', {
|
|
|
+
|
|
|
+ id: that.id,
|
|
|
+
|
|
|
+ }, 'POST').then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ // var list = res.data.Items
|
|
|
+
|
|
|
+ uni.showToast({
|
|
|
+ title: '取消成功',
|
|
|
+ icon: 'none',
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ setTimeout(function() {
|
|
|
+ that.getData();
|
|
|
+ }, 1000);
|
|
|
+ })
|
|
|
+
|
|
|
+
|
|
|
+ } else if (res.cancel) {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ map() {
|
|
|
+ console.log("打开地图")
|
|
|
+ var that = this;
|
|
|
+ if (!that.orderData.shopInfo.lat || !that.orderData.shopInfo.lng) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '该店铺未设置定位',
|
|
|
+ icon: 'none',
|
|
|
+ duration: 3000
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ uni.openLocation({
|
|
|
+ latitude: Number(that.orderData.shopInfo.lat),
|
|
|
+ longitude: Number(that.orderData.shopInfo.lng),
|
|
|
+ name: that.orderData.shopInfo.shopName,
|
|
|
+ address: that.orderData.shopInfo.provinceName + that.orderData.shopInfo.cityName + that
|
|
|
+ .orderData.shopInfo.areaName + that.orderData.shopInfo.address,
|
|
|
+ success: function() {
|
|
|
+ console.log('success');
|
|
|
+ },
|
|
|
+ fail(err) {
|
|
|
+ console.log(err)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+
|
|
|
+ call() {
|
|
|
+ uni.makePhoneCall({
|
|
|
+ phoneNumber: this.orderData.shopInfo.mobilePhone
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+
|
|
|
+ getData() {
|
|
|
+ uni.showLoading({
|
|
|
+ title: '加载中'
|
|
|
+ });
|
|
|
+
|
|
|
+ this.$http('openOrderManagement/queryOpenSheet', {
|
|
|
+
|
|
|
+ id: this.id,
|
|
|
+ }, 'GET').then(res => {
|
|
|
+ uni.hideLoading();
|
|
|
+ this.orderData = res.data;
|
|
|
+ if (this.quanMaList) {
|
|
|
+ this.quanMaList = [];
|
|
|
+ }
|
|
|
+ let maList = this.orderData.OpenSheetQRCode;
|
|
|
+ if (maList) {
|
|
|
+ maList.forEach(item =>{
|
|
|
+ if (item.writeoffState==1) {
|
|
|
+ this.quanMaList.push(item.qrCode);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log('可用券码--',this.quanMaList);
|
|
|
+
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ goback() {
|
|
|
+ uni.navigateBack({
|
|
|
+ delta: 1
|
|
|
+ })
|
|
|
+ },
|
|
|
+ gohome(){
|
|
|
+ uni.switchTab({
|
|
|
+ url:'../index/index'
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ },
|
|
|
+ onPullDownRefresh() {
|
|
|
+
|
|
|
+ this.getData()
|
|
|
+ setTimeout(function() {
|
|
|
+ uni.stopPullDownRefresh();
|
|
|
+ }, 1000);
|
|
|
+ },
|
|
|
+
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+ .box {
|
|
|
+ min-height: 100vh;
|
|
|
+ background: #F4F5F7;
|
|
|
+ padding-bottom: 135rpx;
|
|
|
+ }
|
|
|
+ .zdyNavBox{
|
|
|
+ width: 100vw;
|
|
|
+ background: #FFFFFF;
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ z-index: 9999999;
|
|
|
+ }
|
|
|
+ .zdyNav{
|
|
|
+ height: 44px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .backImg{
|
|
|
+ width: 44rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ margin-left: 10rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+ .homeImg{
|
|
|
+ width: 44rpx;
|
|
|
+ height: 44rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ .zdyNavLeft{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .zdyNavTitle{
|
|
|
+ width: 100vw;
|
|
|
+ height: 44px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 34rpx;
|
|
|
+ line-height: 44px;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .top {
|
|
|
+ height: 190rpx;
|
|
|
+ background-color: #FF0000;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .orderState {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding-top: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .SheetState {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FFFFFF;
|
|
|
+ margin-left: 15rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .timeEditImg {
|
|
|
+ width: 25rpx;
|
|
|
+ height: 25rpx;
|
|
|
+ padding-left: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .shopBoximg {
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopRightImg {
|
|
|
+ width: 44rpx;
|
|
|
+ height: 45rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopsx {
|
|
|
+ width: 1px;
|
|
|
+ height: 50rpx;
|
|
|
+ background: #EEEEEE;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ margin-left: 28rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopBox {
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ padding: 30rpx 20rpx;
|
|
|
+ margin: 0rpx 24rpx;
|
|
|
+ margin-top: -60rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-radius: 10rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopCont {
|
|
|
+ width: 405rpx;
|
|
|
+ padding-left: 20rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopName {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #3C3C3C;
|
|
|
+ line-height: 42rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .Address {
|
|
|
+ color: #999999;
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-top: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopRihgtTxt {
|
|
|
+ color: #999999;
|
|
|
+ font-size: 24rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .shopRightBox {
|
|
|
+
|
|
|
+ padding-left: 28rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .detailedTitle {
|
|
|
+ padding: 23rpx 20rpx;
|
|
|
+ display: flex;
|
|
|
+ text-align: center;
|
|
|
+ align-content: flex-start;
|
|
|
+ border-bottom: 1rpx solid #EEEEEE;
|
|
|
+
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #3C3C3C;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .detailedLine {
|
|
|
+ display: flex;
|
|
|
+ padding: 16rpx 20rpx;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .detailedImg {
|
|
|
+ width: 120rpx;
|
|
|
+ height: 120rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .detailedName {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .code {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #333333;
|
|
|
+ font-weight: bold;
|
|
|
+ width: 180rpx
|
|
|
+ }
|
|
|
+
|
|
|
+ .old {
|
|
|
+ color: #999999;
|
|
|
+
|
|
|
+ font-weight: 400;
|
|
|
+ text-decoration: line-through;
|
|
|
+ }
|
|
|
+
|
|
|
+ .redPoint {
|
|
|
+ width: 10rpx;
|
|
|
+ height: 10rpx;
|
|
|
+ background: #FF0000;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .quanState {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #F19D01;
|
|
|
+ padding: 0 10rpx;
|
|
|
+
|
|
|
+ border: 1rpx solid #F19D01;
|
|
|
+
|
|
|
+ border-radius: 4rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ }
|
|
|
+ .quanState2{
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #999999;
|
|
|
+ padding: 0 10rpx;
|
|
|
+
|
|
|
+ border: 1rpx solid #DDDDDD;
|
|
|
+
|
|
|
+ border-radius: 4rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .information {
|
|
|
+
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 10rpx;
|
|
|
+
|
|
|
+ margin: 20rpx 24rpx;
|
|
|
+ padding-bottom: 15rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .informationLine {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ padding: 15rpx 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .informationLine2 {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 26rpx;
|
|
|
+ padding: 0 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .salePrice {
|
|
|
+
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 45rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .money {
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 10rpx;
|
|
|
+
|
|
|
+ margin: 20rpx 24rpx;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ font-size: 26rpx;
|
|
|
+ padding: 30rpx 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .informationTxt {
|
|
|
+ width: 190rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .line {
|
|
|
+ height: 20rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ border-bottom: 1rpx solid #EEEEEE;
|
|
|
+ }
|
|
|
+
|
|
|
+ .goodsName {
|
|
|
+ padding: 20rpx 20rpx 15rpx;
|
|
|
+
|
|
|
+ color: #333333;
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .informationNum {
|
|
|
+ color: #333333;
|
|
|
+ font-size: 26rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .codeCopy {
|
|
|
+ width: 77rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ background: #F4F5F7;
|
|
|
+ border-radius: 22rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #333333;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 33rpx;
|
|
|
+ padding: 0 15rpx;
|
|
|
+ margin-left: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .orderBottom {
|
|
|
+ width: 750rpx;
|
|
|
+ height: 98rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ .bottom {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ padding: 20rpx;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+ align-items: center;
|
|
|
+ height: 98rpx;
|
|
|
+ width: 100vw;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0rpx;
|
|
|
+ padding-bottom: constant(safe-area-inset-bottom);
|
|
|
+ padding-bottom: env(safe-area-inset-bottom);
|
|
|
+ }
|
|
|
+
|
|
|
+ .cancel {
|
|
|
+ color: #3C3C3C;
|
|
|
+ font-size: 28rpx;
|
|
|
+ width: 150rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ border-radius: 36rpx;
|
|
|
+ border: 1rpx solid #DDDDDD;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 56rpx;
|
|
|
+ margin-right: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .defer {
|
|
|
+ color: #D53533;
|
|
|
+ font-size: 28rpx;
|
|
|
+ width: 150rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ border-radius: 36rpx;
|
|
|
+ border: 1rpx solid #D53533;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 56rpx;
|
|
|
+ margin-right: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .itemBox {
|
|
|
+ margin: 20rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ border: 2rpx solid #EEEEEE;
|
|
|
+ }
|
|
|
+
|
|
|
+ .itemTop {
|
|
|
+ padding: 18rpx 20rpx;
|
|
|
+ padding-right: 0;
|
|
|
+ background-color: #FFEFD5;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .topTitle {
|
|
|
+ width: 104rpx;
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #333333;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .leftItem {
|
|
|
+ font-size: 26rpx;
|
|
|
+ color: #333333;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ flex-grow: 1;
|
|
|
+ /* 隐藏文字显示 ...不换行 */
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ .itemContent {
|
|
|
+ padding: 20rpx;
|
|
|
+ padding-right: 0;
|
|
|
+ background-color: #FFFFFF;
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-content: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .maBox {
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ background: rgba(0, 0, 0, 0.4);
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ z-index: 9999;
|
|
|
+ }
|
|
|
+
|
|
|
+ .querenMa {
|
|
|
+ width: 578;
|
|
|
+ height: 640rpx;
|
|
|
+ background: #ffffff;
|
|
|
+ margin: 0 86rpx;
|
|
|
+ margin-top: 50%;
|
|
|
+ border-radius: 24rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .maTop {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 30rpx 20rpx 15rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .maTitle {
|
|
|
+ color: #666666;
|
|
|
+ font-size: 26rpx;
|
|
|
+ text-align: center;
|
|
|
+ padding-left: 100rpx;
|
|
|
+ }
|
|
|
+ .swiper{
|
|
|
+ width: 100%;
|
|
|
+ height: 85%;
|
|
|
+ background: #FFFFFF;
|
|
|
+
|
|
|
+ }
|
|
|
+ .swiper-item{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ .maCode {
|
|
|
+
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333333;
|
|
|
+ line-height: 42rpx;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .maBoximg {
|
|
|
+ width: 400rpx;
|
|
|
+ height: 400rpx;
|
|
|
+ margin-left: 86rpx;
|
|
|
+ }
|
|
|
+</style>
|
guo