|
|
@@ -0,0 +1,824 @@
|
|
|
+<config>
|
|
|
+{
|
|
|
+ "navigationBarBackgroundColor": "#ff6c00",
|
|
|
+ "navigationBarTextStyle": "black",
|
|
|
+ "backgroundTextStyle":"light"
|
|
|
+}
|
|
|
+</config>
|
|
|
+<template>
|
|
|
+ <div class="container">
|
|
|
+ <div class="box-top">
|
|
|
+ <p>{{ this.status.label }}</p>
|
|
|
+ <h3>{{ this.status.name }}</h3>
|
|
|
+ </div>
|
|
|
+ <div class="box-adderss">
|
|
|
+ <div
|
|
|
+ v-if="
|
|
|
+ this.status.orderStatus !== 'CREATED' &&
|
|
|
+ this.status.orderStatus !== 'PAYED' &&
|
|
|
+ this.status.orderStatus !== 'CANCELED'
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div class="box-adderss-con" @click="logistics">
|
|
|
+ <img src="../static/imgs/dingdan_icon_wuliu@3x.png" alt="" />
|
|
|
+ <div class="box-con-top">
|
|
|
+ <p>{{ this.stepsShow.status }}</p>
|
|
|
+ <p class="box-adderss-span">{{ this.stepsShow.time }}</p>
|
|
|
+ </div>
|
|
|
+ <div class="box-adderss-right">></div>
|
|
|
+ </div>
|
|
|
+ <div class="box-border"></div>
|
|
|
+ </div>
|
|
|
+ <div class="box-adderss-con">
|
|
|
+ <img src="../static/imgs/dingdan_icon_dizhi@3x.png" alt="" />
|
|
|
+ <div class="box-con-top">
|
|
|
+ <span>{{ this.addressList.name }}</span>
|
|
|
+ <span class="box-con-span">{{ this.addressList.phone }}</span>
|
|
|
+ <p>
|
|
|
+ {{ addressList.province }} {{ addressList.city }} {{ addressList.district }}
|
|
|
+ {{ addressList.detail }}
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-bg"></div>
|
|
|
+ <div class="box-tit">
|
|
|
+ <div>
|
|
|
+ <img src="/native/tabbar/icon_kapai_shangjia_da@3x.png" alt="" />
|
|
|
+ <p>光之城卡牌</p>
|
|
|
+ </div>
|
|
|
+ <div class="box-tit-seller" @click="seller">联系卖家</div>
|
|
|
+ </div>
|
|
|
+ <div v-for="(item, index) in Boxes" :key="index.id">
|
|
|
+ <div class="box-con">
|
|
|
+ <div class="box-con-Cards">
|
|
|
+ <img :src="cardCaseInfo.images[0]" alt="" />
|
|
|
+ <div class="box-con-right">
|
|
|
+ <p class="box-con-tit">{{ cardCaseInfo.name }}</p>
|
|
|
+ <div class="box-con-today">
|
|
|
+ <p>卡盒选号: {{ item.groupCode + item.boxCode }}</p>
|
|
|
+ </div>
|
|
|
+ <div class="box-con-money">
|
|
|
+ <div class="box-con-num">
|
|
|
+ <p>¥{{ item.boxPrice }}</p>
|
|
|
+ </div>
|
|
|
+ <p>×1</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-border-but"></div>
|
|
|
+ <div class="box-buttom">
|
|
|
+ <div class="box-buttom-con">
|
|
|
+ <p>商品价格</p>
|
|
|
+ <p class="box-buttom-p">¥{{ total }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-buttom">
|
|
|
+ <div class="box-buttom-con">
|
|
|
+ <p>邮费</p>
|
|
|
+ <p class="box-buttom-p">¥10</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="this.status.orderStatus !== 'CREATED'" class="box-buttom">
|
|
|
+ <div class="box-buttom-con">
|
|
|
+ <p>实际支付</p>
|
|
|
+ <p class="box-buttom-p3">¥{{ total }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-buttom">
|
|
|
+ <div class="box-buttom-con">
|
|
|
+ <p>支付方式</p>
|
|
|
+ <p class="box-buttom-p">微信支付</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="box-buttom">
|
|
|
+ <div class="box-buttom-con">
|
|
|
+ <p>订单留言</p>
|
|
|
+ <div class="box-buttom-p2">{{ status.remark }}</div>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ <div class="box-border-but"></div>
|
|
|
+ <!-- 下单时间 -->
|
|
|
+ <div v-if="showTimeTab">
|
|
|
+ <div class="box-footer">
|
|
|
+ <div class="box-footer-con">
|
|
|
+ <p>订单编号</p>
|
|
|
+ <div class="box-footer-cr">
|
|
|
+ <span @click="orderCopy">复制</span>
|
|
|
+ <p class="box-footer-p">{{ status.transactionId }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-footer">
|
|
|
+ <div class="box-footer-con">
|
|
|
+ <p>创建时间</p>
|
|
|
+ <p class="box-footer-p">{{ status.createdAt }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="this.status.orderStatus !== 'CREATED'" class="box-footer">
|
|
|
+ <div class="box-footer-con">
|
|
|
+ <p>付款时间</p>
|
|
|
+ <p class="box-footer-p">{{ status.paidTime }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-if="this.status.orderStatus !== 'CREATED'" class="box-footer">
|
|
|
+ <div class="box-footer-con">
|
|
|
+ <p>成交时间</p>
|
|
|
+ <p class="box-footer-p">{{ status.paidTime }}</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-footer-nav">
|
|
|
+ <div class="box-btn">
|
|
|
+ <!-- 已完成 -->
|
|
|
+ <div v-if="this.status.orderStatus === 'COMPETED'" class="box-btn-left" @click="deletes">
|
|
|
+ <img src="/native/imgs/btn_04@3x.png" alt="" />
|
|
|
+ <span>删除订单</span>
|
|
|
+ </div>
|
|
|
+ <div v-if="this.status.orderStatus === 'COMPETED'" class="box-btn-right" @click="sales">
|
|
|
+ <img src="/native/imgs/btn_01@4x.png" alt="" />
|
|
|
+ <span class="box-btn-sp">申请售后</span>
|
|
|
+ </div>
|
|
|
+ <!-- 已发货 -->
|
|
|
+ <div v-if="this.status.orderStatus === 'SEND'" class="box-btn-left" @click="logistics">
|
|
|
+ <img src="/native/imgs/btn_04@3x.png" alt="" />
|
|
|
+ <span>查看物流</span>
|
|
|
+ </div>
|
|
|
+ <div v-if="this.status.orderStatus === 'SEND'" class="box-btn-right" @click="comfrim">
|
|
|
+ <img src="/native/imgs/btn_01@3x.png" alt="" />
|
|
|
+ <span>确认收货</span>
|
|
|
+ </div>
|
|
|
+ <!-- 待发货 -->
|
|
|
+ <div v-if="this.status.orderStatus === 'PAYED'" class="box-btn-left2" @click="cancel">
|
|
|
+ <img src="/native/imgs/btn_04@3x.png" alt="" />
|
|
|
+ <span>取消订单</span>
|
|
|
+ </div>
|
|
|
+ <div v-if="this.status.orderStatus === 'PAYED'" class="box-btn-right" @click="comfrim">
|
|
|
+ <img src="/native/imgs/btn_01@3x.png" alt="" />
|
|
|
+ <span>立即发货</span>
|
|
|
+ </div>
|
|
|
+ <!-- 待支付 -->
|
|
|
+ <div v-if="this.status.orderStatus === 'CREATED'" class="box-btn-left2" @click="cancel">
|
|
|
+ <img src="/native/imgs/btn_04@3x.png" alt="" />
|
|
|
+ <span>取消订单</span>
|
|
|
+ </div>
|
|
|
+ <div v-if="this.status.orderStatus === 'CREATED'" class="box-btn-right" @click="pay">
|
|
|
+ <img src="/native/imgs/btn_01@3x.png" alt="" />
|
|
|
+ <span>立即支付</span>
|
|
|
+ </div>
|
|
|
+ <!-- 已取消 -->
|
|
|
+ <div v-if="this.status.orderStatus === 'CANCELED'" class="box-btn-left2" @click="deletes">
|
|
|
+ <img src="/native/imgs/btn_04@3x.png" alt="" />
|
|
|
+ <span>删除订单</span>
|
|
|
+ </div>
|
|
|
+ <div v-if="this.status.orderStatus === 'CANCELED'" class="box-btn-right" @click="again">
|
|
|
+ <img src="/native/imgs/btn_01@3x.png" alt="" />
|
|
|
+ <span>重新购买</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <van-popup :show="show" custom-style="background:transparent;border-radius: 12px 12px 0 0;" use-slot>
|
|
|
+ <div class="popup-con">
|
|
|
+ <div class="popup-top">快递详情</div>
|
|
|
+ <div>
|
|
|
+ <span>物流快递：{{ this.logisTics.expName }}</span>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <span>物流单号：{{ this.logisTics.number }}</span>
|
|
|
+ <span class="dialog-cv" @click="logisticCopy">复制</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <van-steps :steps="stepsList" direction="vertical">
|
|
|
+ <div>{{ stepsList.text }}</div>
|
|
|
+ <div>{{ stepsList.desc }}</div>
|
|
|
+ </van-steps>
|
|
|
+ <img
|
|
|
+ @click="logisticShow"
|
|
|
+ style="height:40px;width:40px;margin-left:150px;margin-top:30px"
|
|
|
+ src="../static/imgs/icon_tanchuang_close@3x.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </van-popup>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: '',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ show: false,
|
|
|
+ Boxes: [],
|
|
|
+ cardCaseInfo: {},
|
|
|
+ total: '',
|
|
|
+ addressList: [],
|
|
|
+ name: '',
|
|
|
+ showTimeTab: false,
|
|
|
+ orderInfoId: '',
|
|
|
+ records: [],
|
|
|
+ status: [],
|
|
|
+ logisTics: [],
|
|
|
+ stepsList: [],
|
|
|
+ stepsShow: [],
|
|
|
+ caseId: ''
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ logisticShow() {
|
|
|
+ this.show = false;
|
|
|
+ },
|
|
|
+ getFn() {
|
|
|
+ this.showLoading();
|
|
|
+ this.$http
|
|
|
+ .get('/orderInfo/get/' + this.$mp.query.id)
|
|
|
+ .then(res => {
|
|
|
+ this.hideLoading();
|
|
|
+ this.caseId = res.caseId;
|
|
|
+ this.status = res;
|
|
|
+ this.addressList = res.address;
|
|
|
+ this.total = res.total;
|
|
|
+ this.Boxes = res.cardBoxList;
|
|
|
+ this.orderInfoId = res.id;
|
|
|
+ this.cardCaseInfo = res.cardCase.collection;
|
|
|
+ if (this.status.orderStatus === 'CREATED') {
|
|
|
+ this.status.label = '买家待支付';
|
|
|
+ this.status.name = '未支付将自动取消订单';
|
|
|
+ }
|
|
|
+ if (this.status.orderStatus === 'CANCELED') {
|
|
|
+ this.status.label = '交易关闭';
|
|
|
+ this.status.name = '很遗憾，订单已取消';
|
|
|
+ }
|
|
|
+ if (this.status.orderStatus === 'PAYED') {
|
|
|
+ this.status.label = '待发货';
|
|
|
+ this.status.name = '订单支付成功，处理发货';
|
|
|
+ this.showTimeTab = true;
|
|
|
+ }
|
|
|
+ if (this.status.orderStatus === 'COMPETED') {
|
|
|
+ this.status.label = '交易成功';
|
|
|
+ this.status.name = '交易已完成';
|
|
|
+ this.showTimeTab = true;
|
|
|
+ }
|
|
|
+ if (this.status.orderStatus === 'SEND') {
|
|
|
+ this.status.label = '已发货';
|
|
|
+ this.status.name = '等待买家签收';
|
|
|
+ this.showTimeTab = true;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ this.hideLoading();
|
|
|
+ wx.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '请返回首页操作'
|
|
|
+ });
|
|
|
+ });
|
|
|
+ // setTimeout(() => {
|
|
|
+ // if (this.status.orderStatus == 'COMPETED' || this.status.orderStatus == 'SEND') {
|
|
|
+ // console.log(this.status.orderStatus);
|
|
|
+ this.$http.get('/orderInfo/checkLogistic', { orderInfoId: this.$mp.query.id }).then(res => {
|
|
|
+ this.hideLoading();
|
|
|
+ this.logisTics = res.logistic.result;
|
|
|
+ let steps = [];
|
|
|
+ res.logistic.result.list.forEach(item => {
|
|
|
+ let newStep = {
|
|
|
+ desc: item.status,
|
|
|
+ text: item.time
|
|
|
+ };
|
|
|
+ steps.push(newStep);
|
|
|
+ });
|
|
|
+ this.stepsList = steps;
|
|
|
+ this.stepsShow = res.logistic.result.list[0];
|
|
|
+ });
|
|
|
+ // }
|
|
|
+ // }, 1000);
|
|
|
+ },
|
|
|
+ again() {
|
|
|
+ this.navigateTo('/pages/details?id=' + this.caseId);
|
|
|
+ },
|
|
|
+ logistics() {
|
|
|
+ this.showLoading();
|
|
|
+ // 查看物流
|
|
|
+ this.$http
|
|
|
+ .get('/orderInfo/checkLogistic', { orderInfoId: this.$mp.query.id })
|
|
|
+ .then(res => {
|
|
|
+ this.hideLoading();
|
|
|
+ this.logisTics = res.logistic.result;
|
|
|
+ let steps = [];
|
|
|
+ res.logistic.result.list.forEach(item => {
|
|
|
+ let newStep = {
|
|
|
+ desc: item.status,
|
|
|
+ text: item.time
|
|
|
+ };
|
|
|
+ steps.push(newStep);
|
|
|
+ });
|
|
|
+ this.stepsList = steps;
|
|
|
+ this.show = true;
|
|
|
+ })
|
|
|
+ .catch(e => {
|
|
|
+ this.hideLoading();
|
|
|
+ wx.showToast({
|
|
|
+ title: '暂无物流信息',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ comfrim() {
|
|
|
+ wx.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '确定收货？',
|
|
|
+ success: res => {
|
|
|
+ if (res.confirm) {
|
|
|
+ this.$http
|
|
|
+ .post('/orderInfo/finish', { orderInfoId: this.$mp.query.id })
|
|
|
+ .then(res => {
|
|
|
+ wx.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '收货成功'
|
|
|
+ });
|
|
|
+ setTimeout(() => {
|
|
|
+ this.getFn();
|
|
|
+ }, 1000);
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ sales() {
|
|
|
+ wx.showToast({
|
|
|
+ title: '敬请开放',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ seller() {
|
|
|
+ wx.showToast({
|
|
|
+ title: '敬请开放',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ Apply() {
|
|
|
+ wx.showToast({
|
|
|
+ title: '敬请开放',
|
|
|
+ icon: 'none'
|
|
|
+ });
|
|
|
+ },
|
|
|
+ pay() {},
|
|
|
+ cancel() {
|
|
|
+ wx.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '确定取消订单？',
|
|
|
+ success: res => {
|
|
|
+ if (res.confirm) {
|
|
|
+ this.$http
|
|
|
+ .post('/orderInfo/cancel', { orderInfoId: this.$mp.query.id })
|
|
|
+ .then(res => {
|
|
|
+ wx.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '订单已取消'
|
|
|
+ });
|
|
|
+ setTimeout(() => {
|
|
|
+ this.getFn();
|
|
|
+ }, 1000);
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ deletes() {
|
|
|
+ wx.showModal({
|
|
|
+ title: '提示',
|
|
|
+ content: '确定删除订单？',
|
|
|
+ success: res => {
|
|
|
+ if (res.confirm) {
|
|
|
+ this.$http
|
|
|
+ .post('orderInfo/delete', { orderInfoId: this.$mp.query.id })
|
|
|
+ .then(res => {
|
|
|
+ wx.showToast({
|
|
|
+ icon: 'none',
|
|
|
+ title: '订单已删除'
|
|
|
+ });
|
|
|
+ setTimeout(() => {
|
|
|
+ this.navigateTo('/pages/allsellout');
|
|
|
+ }, 1000);
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ orderCopy() {
|
|
|
+ wx.setClipboardData({
|
|
|
+ data: this.status.transactionId + '',
|
|
|
+ success(res) {
|
|
|
+ wx.getClipboardData({
|
|
|
+ success(res) {
|
|
|
+ wx.showToast({
|
|
|
+ title: '订单单号复制成功'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ logisticCopy() {
|
|
|
+ wx.setClipboardData({
|
|
|
+ data: this.logisTics.number + '',
|
|
|
+ success(res) {
|
|
|
+ wx.getClipboardData({
|
|
|
+ success(res) {
|
|
|
+ wx.showToast({
|
|
|
+ title: '物流单号复制成功'
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.getFn();
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.container {
|
|
|
+ /deep/ .van-step__circle-container {
|
|
|
+ height: 0;
|
|
|
+ }
|
|
|
+ /deep/ .van-steps {
|
|
|
+ height: 307px;
|
|
|
+ width: 334px;
|
|
|
+ overflow: auto !important;
|
|
|
+ border-radius: 0 0 12px 12px;
|
|
|
+ }
|
|
|
+ padding-bottom: 140px;
|
|
|
+ padding: 102px 0 140px 0;
|
|
|
+ .box-top {
|
|
|
+ height: 102px;
|
|
|
+ background: #ff6c00;
|
|
|
+ position: fixed;
|
|
|
+ width: 100%;
|
|
|
+ top: 0;
|
|
|
+ p {
|
|
|
+ height: 34px;
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 34px;
|
|
|
+ padding: 11px 0 0 20px;
|
|
|
+ }
|
|
|
+ h3 {
|
|
|
+ height: 24px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 24px;
|
|
|
+ margin: 8px 0 0 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-adderss {
|
|
|
+ margin: 21px 20px;
|
|
|
+ .box-adderss-con {
|
|
|
+ display: flex;
|
|
|
+ img {
|
|
|
+ width: 22px;
|
|
|
+ height: 22px;
|
|
|
+ margin-right: 7px;
|
|
|
+ }
|
|
|
+ .box-adderss-right {
|
|
|
+ font-weight: bold;
|
|
|
+ width: 6px;
|
|
|
+ height: 11px;
|
|
|
+ margin: 15px 0 0 0;
|
|
|
+ }
|
|
|
+ .box-con-top {
|
|
|
+ span {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 24px;
|
|
|
+ width: 300px;
|
|
|
+ }
|
|
|
+ .box-adderss-span {
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #c8c9cc;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .box-con-span {
|
|
|
+ margin-left: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-border {
|
|
|
+ height: 1px;
|
|
|
+ background: #f5f7fa;
|
|
|
+ margin: 22px 20px;
|
|
|
+ }
|
|
|
+ .box-border-but {
|
|
|
+ height: 1px;
|
|
|
+ background: #f5f7fa;
|
|
|
+ margin: 20px 20px 27px;
|
|
|
+ }
|
|
|
+ .box-bg {
|
|
|
+ height: 5px;
|
|
|
+ background: #f5f7fa;
|
|
|
+ }
|
|
|
+ .box-tit {
|
|
|
+ .flex();
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 20px 20px 0 20px;
|
|
|
+ div {
|
|
|
+ .flex();
|
|
|
+ img {
|
|
|
+ width: 17px;
|
|
|
+ height: 17px;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ height: 22px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 22px;
|
|
|
+ margin-left: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-tit-seller {
|
|
|
+ height: 22px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ff6c00;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-con {
|
|
|
+ height: 90px;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 12px;
|
|
|
+ .box-con-Cards {
|
|
|
+ margin: 16px 0 20px 20px;
|
|
|
+ display: flex;
|
|
|
+ img {
|
|
|
+ width: 62px;
|
|
|
+ height: 90px;
|
|
|
+ border-radius: 6px;
|
|
|
+ }
|
|
|
+ .box-con-right {
|
|
|
+ width: 75%;
|
|
|
+ margin-left: 8px;
|
|
|
+ .box-con-tit {
|
|
|
+ height: 24px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-con-today {
|
|
|
+ .flex();
|
|
|
+ height: 30px;
|
|
|
+ margin: 4px 0 8px 0;
|
|
|
+ background: #f5f7fa;
|
|
|
+ border-radius: 6px;
|
|
|
+ width: 142px;
|
|
|
+ p {
|
|
|
+ height: 24px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #303133;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-con-money {
|
|
|
+ .flex();
|
|
|
+ justify-content: space-between;
|
|
|
+ .box-con-num {
|
|
|
+ .flex();
|
|
|
+ img {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ height: 22px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: normal;
|
|
|
+ color: #c8c9cc;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ height: 24px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #c8c9cc;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-buttom {
|
|
|
+ margin: 35px 20px;
|
|
|
+ .box-buttom-con {
|
|
|
+ .flex();
|
|
|
+ justify-content: space-between;
|
|
|
+ p {
|
|
|
+ height: 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ .box-buttom-p {
|
|
|
+ height: 22px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ .box-buttom-p3 {
|
|
|
+ height: 22px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #f42202;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ .box-buttom-p2 {
|
|
|
+ height: 22px;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #c8c9cc;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-footer {
|
|
|
+ margin: 15px 20px;
|
|
|
+ .box-footer-con {
|
|
|
+ .flex();
|
|
|
+ justify-content: space-between;
|
|
|
+ .box-footer-cr {
|
|
|
+ display: flex;
|
|
|
+ span {
|
|
|
+ width: 38px;
|
|
|
+ height: 18px;
|
|
|
+ border-radius: 2px;
|
|
|
+ border: 2px solid #c8c9cc;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #c8c9cc;
|
|
|
+ line-height: 18px;
|
|
|
+ text-align: center;
|
|
|
+ margin-right: 3px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ p {
|
|
|
+ height: 24px;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #939599;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
+ .box-footer-p {
|
|
|
+ height: 22px;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-footer-nav {
|
|
|
+ padding-bottom: 40px;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ background: #ffffff;
|
|
|
+ .box-tit2 {
|
|
|
+ height: 44px;
|
|
|
+ background: #ff6c00;
|
|
|
+ opacity: 0.26;
|
|
|
+ p {
|
|
|
+ text-align: center;
|
|
|
+ font-size: 13px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 44px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-btn {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin: 6px 20px 0 20px;
|
|
|
+ .box-btn-left {
|
|
|
+ width: 163px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #c8c9cc;
|
|
|
+ line-height: 48px;
|
|
|
+ z-index: 1;
|
|
|
+ img {
|
|
|
+ padding-bottom: 40px;
|
|
|
+ position: absolute;
|
|
|
+ width: 163px;
|
|
|
+ height: 48px;
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ padding-left: 49px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-btn-left2 {
|
|
|
+ width: 163px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #c8c9cc;
|
|
|
+ line-height: 48px;
|
|
|
+ img {
|
|
|
+ padding-bottom: 40px;
|
|
|
+ position: absolute;
|
|
|
+ width: 163px;
|
|
|
+ height: 48px;
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ padding-left: 49px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-btn-right {
|
|
|
+ width: 163px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #ffffff;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 48px;
|
|
|
+ padding-right: 25px;
|
|
|
+ img {
|
|
|
+ padding-bottom: 40px;
|
|
|
+ position: absolute;
|
|
|
+ width: 163px;
|
|
|
+ height: 48px;
|
|
|
+ z-index: -1;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ padding-left: 49px;
|
|
|
+ }
|
|
|
+ .box-btn-sp {
|
|
|
+ color: #ff6c00;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .popup-con {
|
|
|
+ padding: 12px 0 20px 9px;
|
|
|
+ background: #ffffff;
|
|
|
+ .popup-top {
|
|
|
+ height: 22px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #000000;
|
|
|
+ line-height: 22px;
|
|
|
+ text-align: center;
|
|
|
+ padding: 50px 0 15px 0;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ height: 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #1a1a1a;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ .dialog-cv {
|
|
|
+ width: 40px;
|
|
|
+ height: 20px;
|
|
|
+ border-radius: 2px;
|
|
|
+ border: 1px solid #c8c9cc;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #c8c9cc;
|
|
|
+ line-height: 20px;
|
|
|
+ text-align: center;
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .steps-con {
|
|
|
+ display: flex;
|
|
|
+ .steps-time {
|
|
|
+ width: 37px;
|
|
|
+ height: 34px;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #1a1a1a;
|
|
|
+ line-height: 17px;
|
|
|
+ margin: 10px 0 22px 11px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
xuqiang-97