|
@@ -0,0 +1,544 @@
|
|
|
|
+<template>
|
|
|
|
+ <view class="search-container">
|
|
|
|
+ <or-search :theme="themeClass" @getSearchText="getSearchText"></or-search>
|
|
|
|
+ <view class=" order-container" v-if="isShowWrapper" :style="{'overflow':(showSkeleton? 'hidden' : 'auto'),'height': (showSkeleton? windowHeight + 'px' : 'auto')}">
|
|
|
|
+ <scroll-view class="tui-skeleton" @scrolltolower="scrolltolower" scroll-y >
|
|
|
|
+ <view :class="{'tui-order-list':scrollTop >= 0}" class="tui-skeleton clearfix">
|
|
|
|
+ <!-- 空白页 -->
|
|
|
|
+ <empty v-if="isShowEmpty" :navbarHeight="navbarHeight"></empty>
|
|
|
|
+ <!-- 列表 -->
|
|
|
|
+ <view v-else class="tui-order-content">
|
|
|
|
+ <view class="tui-order-item" v-for="(order,orderIndex) in orderList" :key="orderIndex" @click.stop="detail(order.orderID)">
|
|
|
|
+ <view class="order-title">
|
|
|
|
+ <view class="order-title-t">
|
|
|
|
+ <view class="order-title-num tui-skeleton-fillet">订单号:{{order.orderNo}}</view>
|
|
|
|
+ <view class="order-title-tip tui-skeleton-fillet">{{orderStateExp(order.status)}}</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="order-title-b">下单时间:{{order.orderTime}}</view>
|
|
|
|
+ </view>
|
|
|
|
+ <block v-for="(shop,index) in order.shopOrderList" :key="index">
|
|
|
|
+ <view class="goods-title">
|
|
|
|
+ <view class="title-logo tui-skeleton-fillet"><image :src="shop.shopLogo" mode=""></image></view>
|
|
|
|
+ <view class="title-text tui-skeleton-fillet">{{shop.shopName}}</view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="goods-item" v-for="(pros,prosIndex) in shop.cmOrderProducts" :key="prosIndex">
|
|
|
|
+ <view class="goods-pros-t">
|
|
|
|
+ <view class="pros-img tui-skeleton-fillet"><image :src="pros.productImage" alt="" /></view>
|
|
|
|
+ <view class="pros-product">
|
|
|
|
+ <view class="producttitle tui-skeleton-fillet">{{pros.name}}</view>
|
|
|
|
+ <view class="productspec tui-skeleton-fillet">规格:{{pros.productUnit}}</view>
|
|
|
|
+ <view class="productprice">
|
|
|
|
+ <view class="price tui-skeleton-fillet">
|
|
|
|
+ <text>¥{{pros.price}}</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="count tui-skeleton-fillet">
|
|
|
|
+ <text class="small">x</text>{{pros.num}}
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </block>
|
|
|
|
+ <view class="order-footer">
|
|
|
|
+ <view class="order-footer-top" v-if="order.discountFee!=0">经理折扣:¥{{orderPriceToFixed(order.discountFee)}}</view>
|
|
|
|
+ <view class="order-footer-bot">
|
|
|
|
+ <view class="count tui-skeleton-fillet">共{{order.productCount}}件商品</view>
|
|
|
|
+ <view class="money tui-skeleton-fillet">合计:¥{{orderPriceToFixed(order.payableAmount)}}</view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <!-- 底部button -->
|
|
|
|
+ <order-button ref="orderButton"
|
|
|
|
+ :status="order.status"
|
|
|
|
+ :orderID="order.orderID"
|
|
|
|
+ @buttonConfirm="handButtonConfirm">
|
|
|
|
+ </order-button>
|
|
|
|
+ </view>
|
|
|
|
+ <!--加载loadding-->
|
|
|
|
+ <tui-loadmore :visible="loadding" :index="3" type="black"></tui-loadmore>
|
|
|
|
+ <tui-nomore :visible="!pullUpOn" bgcolor="#F7F7F7" :text='nomoreText'></tui-nomore>
|
|
|
|
+ <!--加载loadding-->
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </scroll-view>
|
|
|
|
+ </view>
|
|
|
|
+ <!-- 分享弹窗 -->
|
|
|
|
+ <share-alert v-if="isShareModal"
|
|
|
|
+ :orderID="btnoRderID"
|
|
|
|
+ @shareConfirm ='onShareAppMessage'>
|
|
|
|
+ </share-alert>
|
|
|
|
+ <!-- 删除订单弹窗 -->
|
|
|
|
+ <model-alert v-if="isShowDelModal"
|
|
|
|
+ :alertText='alertText'
|
|
|
|
+ @btnConfirm ='handOrderDetele'>
|
|
|
|
+ </model-alert>
|
|
|
|
+ <!-- 取消订单弹窗 -->
|
|
|
|
+ <cancel-alert v-if="isCenceModal"
|
|
|
|
+ :cenceAlertText='cenceAlertText'
|
|
|
|
+ @cenceConfirm ='handCenceConfirm'>
|
|
|
|
+ </cancel-alert>
|
|
|
|
+ <!-- 透明模态层 -->
|
|
|
|
+ <modal-layer v-if='isModalLayer'></modal-layer>
|
|
|
|
+ </view>
|
|
|
|
+</template>
|
|
|
|
+
|
|
|
|
+<script>
|
|
|
|
+ import orSearch from '@/components/uni-search/or-search.vue'
|
|
|
|
+ import tuiLoadmore from "@/components/tui-components/loadmore/loadmore"
|
|
|
|
+ import tuiNomore from "@/components/tui-components/nomore/nomore"
|
|
|
|
+ import orderButton from '@/components/module/orderDetails/orderListButton' //按钮
|
|
|
|
+ import modalLayer from "@/components/modal-layer"
|
|
|
|
+ import empty from "@/components/empty";
|
|
|
|
+ import shareAlert from '@/components/module/modelAlert/shareAlert' //分享弹窗
|
|
|
|
+ import modelAlert from '@/components/module/modelAlert/modelAlert' //删除弹窗
|
|
|
|
+ import cancelAlert from '@/components/module/modelAlert/cancelAlert' //取消弹窗
|
|
|
|
+ export default {
|
|
|
|
+ components: {
|
|
|
|
+ orSearch,
|
|
|
|
+ tuiLoadmore,
|
|
|
|
+ tuiNomore,
|
|
|
|
+ orderButton,
|
|
|
|
+ empty,
|
|
|
|
+ shareAlert,
|
|
|
|
+ modelAlert,
|
|
|
|
+ cancelAlert
|
|
|
|
+ },
|
|
|
|
+ data() {
|
|
|
|
+ return {
|
|
|
|
+ themeClass: 'block',
|
|
|
|
+ isShowWrapper:false,
|
|
|
|
+ isModallayer:false,
|
|
|
|
+ isShowEmpty:false,
|
|
|
|
+ windowHeight: '',
|
|
|
|
+ showSkeleton: true,
|
|
|
|
+ userID:0,
|
|
|
|
+ orderList: [],
|
|
|
|
+ btnoRderID: 0, //点击按钮传入的的订单ID
|
|
|
|
+ pageNum: 1, //页数
|
|
|
|
+ pageSize: 10, //条数
|
|
|
|
+ scrollTop: 0,
|
|
|
|
+ deteleType:'',
|
|
|
|
+ skeletonShow: true,
|
|
|
|
+ isShareModal: false,//控制分享弹窗
|
|
|
|
+ isCenceModal: false,//控制取消订单弹窗
|
|
|
|
+ isShowDelModal: false,//控制删除订单弹窗
|
|
|
|
+ isModalLayer: false,
|
|
|
|
+ loadding: false,
|
|
|
|
+ pullUpOn: true,
|
|
|
|
+ hasNextPage: false,
|
|
|
|
+ pullFlag: true,
|
|
|
|
+ navbarHeight:'',
|
|
|
|
+ alertText: '确认删除订单吗?',
|
|
|
|
+ cenceAlertText: '确认取消该订单吗?',
|
|
|
|
+ nomoreText: '上拉显示更多',
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ created() {
|
|
|
|
+ let self = this;
|
|
|
|
+ self.$api.getStorage().then((resolve) =>{
|
|
|
|
+ self.userID = resolve.userID
|
|
|
|
+ })
|
|
|
|
+ self.setScrollHeight();
|
|
|
|
+ self.$api.loginStatus().then((resolveData) => {
|
|
|
|
+ self.loginStatus = resolveData;
|
|
|
|
+ });
|
|
|
|
+ },
|
|
|
|
+ methods:{
|
|
|
|
+ getSearchText(e) {
|
|
|
|
+ this.isShowWrapper = true
|
|
|
|
+ this.getOrderDatainit(4)
|
|
|
|
+ },
|
|
|
|
+ setScrollHeight() {
|
|
|
|
+ const {windowHeight, pixelRatio} = wx.getSystemInfoSync();
|
|
|
|
+ this.windowHeight = windowHeight - 1;
|
|
|
|
+ this.scrollHeight = windowHeight - 1;
|
|
|
|
+ },
|
|
|
|
+ getOrderDatainit(index,source){
|
|
|
|
+ /**
|
|
|
|
+ * @订单初始化加载 仅加载第一页码
|
|
|
|
+ * @param:orderState(订单状态:0全部,1待付款,2待发货,3已发货,4退货款)
|
|
|
|
+ * @param:userID(用户ID)
|
|
|
|
+ * @param:index(页码数)
|
|
|
|
+ * @param:pageSize(每页条数)
|
|
|
|
+ * @param:organizeID(全局变量组织ID)
|
|
|
|
+ */
|
|
|
|
+ this.$api.getStorage().then((resolve) =>{
|
|
|
|
+ this.userID = resolve.userID
|
|
|
|
+ let param = {orderState:index,userID:this.userID,index:1,pageSize:this.pageSize,organizeID:this.userOrganizeID};
|
|
|
|
+ this.$api.lodingGet('/order/myOrder',param,
|
|
|
|
+ response => {
|
|
|
|
+ if(response.code === '1'){
|
|
|
|
+ const _responseData = response.data.results
|
|
|
|
+ if(_responseData && _responseData.length > 0){
|
|
|
|
+ let filrerData = _responseData.filter(item=>{
|
|
|
|
+ //添加不同状态下订单的表现形式
|
|
|
|
+ item = Object.assign(item, this.orderStateExp(item.state));
|
|
|
|
+ return item;
|
|
|
|
+ });
|
|
|
|
+ this.orderList =[];
|
|
|
|
+ filrerData.forEach(item=>{
|
|
|
|
+ this.orderList.push(item);
|
|
|
|
+ })
|
|
|
|
+ this.hasNextPage = response.data.hasNextPage;
|
|
|
|
+ if(this.hasNextPage){
|
|
|
|
+ this.pullUpOn = false
|
|
|
|
+ this.nomoreText = '上拉显示更多'
|
|
|
|
+ }else{
|
|
|
|
+ if(this.orderList.length < 2){
|
|
|
|
+ this.pullUpOn = true
|
|
|
|
+ }else{
|
|
|
|
+ this.pullUpOn = false
|
|
|
|
+ this.nomoreText = '已至底部'
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }else{
|
|
|
|
+ this.isShowEmpty = true
|
|
|
|
+ }
|
|
|
|
+ }else{
|
|
|
|
+ this.$util.msg(response.msg,2000);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ )
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ getOnReachBottomData(index){//上拉加载
|
|
|
|
+ this.pageNum+=1
|
|
|
|
+ let param = {orderState:index,userID:this.userID,index:this.pageNum,pageSize:this.pageSize,organizeID:this.userOrganizeID}
|
|
|
|
+ this.$api.get('/order/myOrder',param,
|
|
|
|
+ response => {
|
|
|
|
+ if(response.code === '1'){
|
|
|
|
+ let resData = response.data.results
|
|
|
|
+ this.hasNextPage = response.data.hasNextPage;
|
|
|
|
+ this.orderList = this.orderList.concat(resData)
|
|
|
|
+ this.pullFlag = false;// 防上拉暴滑
|
|
|
|
+ setTimeout(()=>{this.pullFlag = true;},500)
|
|
|
|
+ if(this.hasNextPage){
|
|
|
|
+ this.pullUpOn = false
|
|
|
|
+ this.nomoreText = '上拉显示更多'
|
|
|
|
+ }else{
|
|
|
|
+ this.loadding = false
|
|
|
|
+ this.pullUpOn = false
|
|
|
|
+ this.nomoreText = '已至底部'
|
|
|
|
+ }
|
|
|
|
+ }else{
|
|
|
|
+ this.$util.msg(response.msg,2000);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ )
|
|
|
|
+ },
|
|
|
|
+ scrolltolower() {
|
|
|
|
+ if(this.hasNextPage){
|
|
|
|
+ this.loadding = true
|
|
|
|
+ this.pullUpOn = true
|
|
|
|
+ this.getOnReachBottomData();
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ detail(id) {//订单详情跳转
|
|
|
|
+ console.log(id)
|
|
|
|
+ this.isModalLayer = true;
|
|
|
|
+ this.$api.navigateTo(`/pages/user/order/order-details?state=${this.currentTab}&orderID=${id}`)
|
|
|
|
+ },
|
|
|
|
+ handButtonConfirm(data) {//获取点击
|
|
|
|
+ console.log('点击按钮的类型是',data);
|
|
|
|
+ this.handShowAlert(data)
|
|
|
|
+ this.btnoRderID = data.orderId
|
|
|
|
+ },
|
|
|
|
+ handShowAlert(data) {//执行
|
|
|
|
+ switch(data.type){
|
|
|
|
+ case 'delete':
|
|
|
|
+ this.isShowDelModal = true;
|
|
|
|
+ break
|
|
|
|
+ case 'cancel':
|
|
|
|
+ this.isCenceModal = true;
|
|
|
|
+ break
|
|
|
|
+ case 'query':
|
|
|
|
+ this.isModalLayer = true;
|
|
|
|
+ this.$api.navigateTo('/pages/user/order/order-logistics?orderID='+data.orderId)
|
|
|
|
+ break
|
|
|
|
+ case 'confirm':
|
|
|
|
+ this.handOrderConfirm(data.orderId);
|
|
|
|
+ break
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ handOrderConfirm (id){//确认收货
|
|
|
|
+ this.$api.get('/order/affirm',{orderID:id},
|
|
|
|
+ response => {
|
|
|
|
+ if(response.code === '1'){
|
|
|
|
+ this.$util.msg(response.msg,2000,true,'success');
|
|
|
|
+ this.isShowDelModal = false
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ this.getOrderDatainit(this.currentTab)
|
|
|
|
+ },2000)
|
|
|
|
+ }else{
|
|
|
|
+ this.$util.msg(response.msg,2000);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ )
|
|
|
|
+ },
|
|
|
|
+ handOrderDetele (){//删除订单
|
|
|
|
+ this.$api.get('/order/delete',{orderID:this.btnoRderID},
|
|
|
|
+ response => {
|
|
|
|
+ if(response.code === '1'){
|
|
|
|
+ this.$util.msg(response.msg,2000,true,'success');
|
|
|
|
+ this.isShowDelModal = false
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ this.getOrderDatainit(this.currentTab)
|
|
|
|
+ },2000)
|
|
|
|
+ }else{
|
|
|
|
+ this.$util.msg(response.msg,2000);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ )
|
|
|
|
+ },
|
|
|
|
+ handCenceConfirm (){//取消订单
|
|
|
|
+ this.$api.get('/order/cancel',{orderID:this.btnoRderID},
|
|
|
|
+ response => {
|
|
|
|
+ if(response.code === '1'){
|
|
|
|
+ this.$util.msg(response.msg,2000,true,'success');
|
|
|
|
+ this.isCenceModal = false
|
|
|
|
+ setTimeout(() => {
|
|
|
|
+ this.getOrderDatainit(this.currentTab)
|
|
|
|
+ },2000)
|
|
|
|
+ }else{
|
|
|
|
+ this.$util.msg(response.msg,2000);
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ )
|
|
|
|
+ },
|
|
|
|
+ onShareAppMessage (res){//分享转发
|
|
|
|
+ this.isShareModal = false
|
|
|
|
+ if (res.from === 'button') {// 来自页面内转发按钮
|
|
|
|
+ // console.log(res.target)
|
|
|
|
+ }
|
|
|
|
+ return {
|
|
|
|
+ title: '您有新的分享订单,快来查看吧~',
|
|
|
|
+ path: `/pages/user/order/orderShareLogin?orderID=${this.btnoRderID}&userID=${this.userID}`,
|
|
|
|
+ imageUrl:'https://admin-b.caimei365.com/userfiles/1/images/photo/2020/02/%E5%88%86%E4%BA%AB%E7%95%8C%E9%9D%A2a%CC%8A%403x.png'
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ //订单状态文字和颜色
|
|
|
|
+ orderStateExp (state){
|
|
|
|
+ let stateText = '',
|
|
|
|
+ stateTextObject={
|
|
|
|
+ 4:'交易完成',
|
|
|
|
+ 5:'订单完成',
|
|
|
|
+ 6:'已关闭',
|
|
|
|
+ 7:'交易全退',
|
|
|
|
+ 77:'交易全退',
|
|
|
|
+ 11:'待付款待发货',
|
|
|
|
+ 12:'待付款部分发货',
|
|
|
|
+ 13:'待付款已发货',
|
|
|
|
+ 21:'部分付款待发货',
|
|
|
|
+ 22:'部分付款部分发货',
|
|
|
|
+ 23:'部分付款已发货',
|
|
|
|
+ 31:'已付款待发货',
|
|
|
|
+ 32:'已付款部分发货',
|
|
|
|
+ 33:'已付款已发货',
|
|
|
|
+ 111:'待付款待发货',
|
|
|
|
+ }
|
|
|
|
+ Object.keys(stateTextObject).forEach(key => {
|
|
|
|
+ if(key == state){
|
|
|
|
+ stateText = stateTextObject[key]
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ return stateText;
|
|
|
|
+ },
|
|
|
|
+ orderPriceToFixed (n){
|
|
|
|
+ let price ='';
|
|
|
|
+ price = n.toFixed(2);
|
|
|
|
+ return price
|
|
|
|
+ },
|
|
|
|
+ },
|
|
|
|
+ onPageScroll(e) {
|
|
|
|
+ this.scrollTop = e.scrollTop;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</script>
|
|
|
|
+
|
|
|
|
+<style lang="scss">
|
|
|
|
+ page{
|
|
|
|
+ background-color: #F7F7F7 !important;
|
|
|
|
+ }
|
|
|
|
+ .order-container {
|
|
|
|
+ scroll-view {
|
|
|
|
+ height: 100%;
|
|
|
|
+ overflow: scroll;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .container {
|
|
|
|
+ padding-bottom: env(safe-area-inset-bottom);
|
|
|
|
+ height: auto;
|
|
|
|
+ position: relative;
|
|
|
|
+ }
|
|
|
|
+ .tui-order-content{
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: auto;
|
|
|
|
+ }
|
|
|
|
+ .tui-order-list {
|
|
|
|
+ width: 100%;
|
|
|
|
+ position: relative;
|
|
|
|
+ }
|
|
|
|
+ .tui-order-item {
|
|
|
|
+ display: flex;
|
|
|
|
+ flex-direction: column;
|
|
|
|
+ width: 702rpx;
|
|
|
|
+ padding:20rpx 24rpx 0 24rpx;
|
|
|
|
+ background: #fff;
|
|
|
|
+ border-bottom: 20rpx solid #F7F7F7;
|
|
|
|
+ }
|
|
|
|
+ .order-title{
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: auto;
|
|
|
|
+ .order-title-t{
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 40rpx;
|
|
|
|
+ float: left;
|
|
|
|
+ font-size: $font-size-base;
|
|
|
|
+ line-height: 40rpx;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ .order-title-num{
|
|
|
|
+ float: left;
|
|
|
|
+ text-align: left;
|
|
|
|
+ color: $color-system;
|
|
|
|
+ }
|
|
|
|
+ .order-title-tip{
|
|
|
|
+ float: right;
|
|
|
|
+ text-align: right;
|
|
|
|
+ color: #FF2A2A;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .order-title-b{
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 40rpx;
|
|
|
|
+ float: left;
|
|
|
|
+ margin-top: 8rpx;
|
|
|
|
+ font-size: $font-size-base;
|
|
|
|
+ line-height: 40rpx;
|
|
|
|
+ color: #999999;
|
|
|
|
+ text-align: left;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .goods-title{
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 48rpx;
|
|
|
|
+ float: left;
|
|
|
|
+ margin-top: 24rpx;
|
|
|
|
+ .title-logo{
|
|
|
|
+ width: 48rpx;
|
|
|
|
+ height: 48rpx;
|
|
|
|
+ float: left;
|
|
|
|
+ image{
|
|
|
|
+ width: 48rpx;
|
|
|
|
+ height: 48rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .title-text{
|
|
|
|
+ float: left;
|
|
|
|
+ margin-left: 16rpx;
|
|
|
|
+ font-size: $font-size-base;
|
|
|
|
+ color: $text-color;
|
|
|
|
+ text-align: left;
|
|
|
|
+ line-height: 48rpx;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .goods-item{
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: auto;
|
|
|
|
+ }
|
|
|
|
+ .goods-pros-t{
|
|
|
|
+ display: flex;
|
|
|
|
+ align-items: center;
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 217rpx;
|
|
|
|
+ padding:24rpx 0;
|
|
|
|
+ .pros-img{
|
|
|
|
+ width: 210rpx;
|
|
|
|
+ height: 100%;
|
|
|
|
+ border-radius: 10rpx;
|
|
|
|
+ margin:0 26rpx 0 0;
|
|
|
|
+ border:1px solid #f3f3f3;
|
|
|
|
+ image{
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 100%;
|
|
|
|
+ border-radius: 10rpx;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .pros-product{
|
|
|
|
+ width: 468rpx;
|
|
|
|
+ height: 100%;
|
|
|
|
+ line-height: 36rpx;
|
|
|
|
+ font-size: $font-size-sb;
|
|
|
|
+ position: relative;
|
|
|
|
+ .producttitle{
|
|
|
|
+ width: 100%;
|
|
|
|
+ display: inline-block;
|
|
|
|
+ height: auto;
|
|
|
|
+ text-overflow:ellipsis;
|
|
|
|
+ display: -webkit-box;
|
|
|
|
+ word-break: break-all;
|
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
|
+ -webkit-line-clamp: 2;
|
|
|
|
+ overflow: hidden;
|
|
|
|
+ margin-bottom: 8rpx;
|
|
|
|
+ }
|
|
|
|
+ .productspec{
|
|
|
|
+ height: 36rpx;
|
|
|
|
+ color: #999999;
|
|
|
|
+ }
|
|
|
|
+ .productprice{
|
|
|
|
+ height: 48rpx;
|
|
|
|
+ position: absolute;
|
|
|
|
+ width: 100%;
|
|
|
|
+ bottom: 0;
|
|
|
|
+ .price{
|
|
|
|
+ line-height: 48rpx;
|
|
|
|
+ font-size: $font-size-base;
|
|
|
|
+ width: 48%;
|
|
|
|
+ color: #FF2A2A;
|
|
|
|
+ float: left;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ }
|
|
|
|
+ .count{
|
|
|
|
+ height: 100%;
|
|
|
|
+ float: right;
|
|
|
|
+ position: relative;
|
|
|
|
+ .small{
|
|
|
|
+ color: #666666;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ .order-footer{
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 78rpx;
|
|
|
|
+ float: left;
|
|
|
|
+ .order-footer-top{
|
|
|
|
+ width: 100%;
|
|
|
|
+ height: 34rpx;
|
|
|
|
+ line-height: 34rpx;
|
|
|
|
+ font-size: $font-size-sm;
|
|
|
|
+ color: #999999;
|
|
|
|
+ text-align: right;
|
|
|
|
+ }
|
|
|
|
+ .order-footer-bot{
|
|
|
|
+ width: 100%;
|
|
|
|
+ float: left;
|
|
|
|
+ height: 48rpx;
|
|
|
|
+ line-height: 48rpx;
|
|
|
|
+ font-size: $font-size-base;
|
|
|
|
+ font-weight: bold;
|
|
|
|
+ color: $text-color;
|
|
|
|
+ .count{
|
|
|
|
+ width: 50%;
|
|
|
|
+ float: left;
|
|
|
|
+ text-align: left;
|
|
|
|
+ }
|
|
|
|
+ .money{
|
|
|
|
+ width: 50%;
|
|
|
|
+ float: right;
|
|
|
|
+ text-align: right;
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+</style>
|