chelvc-custom/src/pages/client/clientPackage/uptickOrder.vue

<template>
	<view class="container">

		<view class="content-box">
			<!-- <view class="message-box">
				<view class="message-item">
					<view class="item-left"> 订购人电话 </view>
					<view class="item-right">
						<u--input border='none' type='number' maxlength='11' fontSize='14' placeholder="请输入您的订购电话"
							v-model="phoneNumber"></u--input>
					</view>
				</view>
				<u-line margin='20rpx 0'></u-line>
				<view class="message-item">
					<view class="item-left"> 备注 </view>
					<view class="item-right">
						<u--textarea v-model="goodsRemark" placeholder="请输入备注内容" autoHeight></u--textarea>
					</view>
				</view>
			</view> -->


			<view class="message-box">
				<view class="message-item">
					<view class="item-left"> 支付方式 </view>
					<view class="item-right flex-end">
						<span>在线支付</span>
						<image class="right-img" src="@/static/order/ic_order_weixin.png"></image>
					</view>
				</view>
			</view>

			<view class="message-box">
				<view class="goods-title"> {{ init_list.merchantDTO.name }} </view>
				<u-line margin='20rpx 0'></u-line>
				<view class="goods-item" v-for="(item,index) of init_list.cartItems" :key='item.goodsId'>
					<view class="item-left">
						<image class="left-img" src="@/static/QR57a.jpg"></image>
						<view class="left-text">
							<view class="text-name">{{ item.goodsName }}</view>
							<view class="text-number">×{{ item.quantity }}</view>
							<view class="price-box">
								<p class="price red-color"> <span style="font-size: 24rpx;">￥</span>{{ item.price }}</p><span
									class="false-price">￥{{ item.originalPrice ? item.originalPrice : 0}}</span>
							</view>
						</view>
					</view>

					<view class="item-right">
						<u-number-box v-model="item.quantity"></u-number-box>
					</view>
				</view>
			</view>

			<view class="message-box">
				<view class="couon-box">
					<view class="coupon-left">
						<image class="img" src='@/static/images/coupon.png'></image>
						<view>通用优惠</view>
					</view>
					<view class="coupon-right red-color"> -0.1 </view>
				</view>
				<u-line margin='20rpx 0'></u-line>
				<view class="couon-box" @click="openCouponshow">
					<view class="coupon-left">
						<image class="img" src='@/static/images/coupon.png'></image>
						<span>商家优惠券</span>
					</view>
					<view class="coupon-right" >
						<view class="">暂无可用</view>
						<u-icon name="arrow-right" size='13'></u-icon>
					</view>
				</view>
			</view>

			<view class="message-box">
				<view class="message-item">
					<view class="item-left"> 订单总价 </view>
					<view class=" flex-end red-color" style="align-items: center;">
						<p style="margin-right: 20rpx; font-size: 36rpx; font-weight: bold;">￥{{ orderParams.price.toFixed(2) }}</p>
						<p>( 已优惠￥{{ orderParams.allPrice.toFixed(2) }} )</p>
					</view>
				</view>
			</view>

			<view class="message-box">
				<view class="message-name"> 购买须知 </view>
				<view class="message-text" style="text-indent:32.4px;">
					洗车机常见的类型有高压洗车机和无水洗车机两种，高压洗车机可以配有不同的喷嘴，可实现不同场景下的清洗需求。
					无水洗车机则是一种更为环保的洗车方式，它可以用高科技的化学技术在不用水的情况下清洗车辆。因此，
					在购买洗车机时需要根据自己的实际需求进行选择
				</view>
			</view>
		</view>

		<u-popup :show="coupon_show" @close="close" mode='bottom' round='20' bgColor='#F4F4F4'>
			<view class="pop-box">
				<view class="pop-title"> 商家优惠券 </view>
				<u-line margin='20rpx 0'></u-line>

				<view class="pop-coupon-box">
				  <view class="pop-item" v-for="(item,index) of coupon_list" @click="handlerSelectCoupon(item,index)">
				  	<view class="item-box">
				  		<view class="item-left">
				  			<view class="img-box">
				  				<image class="left-img" :src="item.img"></image>
				  			</view>
				  			<view class="left-text">
				  				<view class="text-title"> {{ item.name }} </view>
				  				<view class="text"> {{ item.time_text }} </view>
				  			</view>
				  		</view>
				  		<view class="item-right">
				  			<view class="price red-color">
				  				<span class="price-symbol">￥</span> {{ item.price }}
				  			</view>
				  			<view class="text"> {{ item.deduce_text }} </view>
				  		</view>
				  	</view>
				    <view class="item-bottom">
				      <span>{{ item.discript }}</span>
				    </view>
				  </view>
				</view>

        <view class="pop-bottom">
          <button class='coupon-btn' @click="handlerSelectCoupon">确定</button>
        </view>
			</view>
		</u-popup>

		<view class="btn-box">
			<view class="btn" @click="handlerSettleBtn">
				结算
			</view>
		</view>

	</view>
</template>

<script>
  import { generateOrder ,getCartList , generateConfirmOrder} from "@/api/client/business.js"
  import { maintainCouponPaging } from "@/api/client/mine.js"
	export default {
		data() {
			return {
				coupon_show: false,
        coupon_list:[
          {
            id:1,
            img:'../../../static/images/honglei.png',
            name:'无反不做(无饭不做美工饭)',
            time_text:'有效期至2024.02.32',
            price:34,
            deduce_text:'满23可用',
            discript:'可以与其他活动共享，在线支付指定门店使用'
          },
          {
            id:3,
            img:'../../../static/images/honglei.png',
            name:'我不知道叫啥名儿嗷',
            time_text:'有效期至2024.03.01',
            price:2,
            deduce_text:'满5可用',
            discript:'可以与其他活动共享，在线支付指定门店使用'
          },
          {
            id:5,
            img:'../../../static/images/honglei.png',
            name:'红雷卖瓜',
            time_text:'有效期至2024.03.01',
            price:1,
            deduce_text:'满65可用',
            discript:'可以与其他活动共享，在线支付指定门店使用'
          }
        ],
        init_list:[],
        phoneNumber:null ,// 订购电话
        goodsRemark:'' ,// 备注
        merchantId:null
			}
		},
    mounted(){
      this.handlerInitList()
    },
    onLoad(option){
      this.merchantId = option.ids
    },
    computed: {
      orderParams(){
        let price = 0
        let discountPrice = 0
        let allPrice = 0
        this.init_list.cartItems.map(rs=>{
          price += Number( rs.price * rs.quantity )
          discountPrice += Number( rs.originalPrice * rs.quantity )
        })
        allPrice = discountPrice - price
        return { allPrice , price }
      }
    },
		methods:{
      // 初始化列表接口
      handlerInitList(){
        getCartList(this.merchantId).then(res=>{
          this.init_list = res.data
          this.handlerInitCouponList(res.data.cartItems)
        })


      },
      // 初始化优惠券列表
      handlerInitCouponList(cartItems){
        let params = {
          cartIds:[],
          merchantId:this.merchantId
        }
        cartItems.map(rs=>{
          params.cartIds.push(rs.id)
        })
        // 订单接口 - 根据购物车信息生成确认单信息
        generateConfirmOrder(params).then(res=>{
          console.log("@@@@res",res);
        })
        // maintainCouponPaging( params ).then(res=>{
        //   console.log('@@@@res',res)
        // })
      },
			// 结算按钮
			handlerSettleBtn(){
        let params = {
          payType:'2',
          cartIds:[],
          merchantId:this.init_list.merchantDTO.id
        }
        this.init_list.cartItems.map(rs=>{
          params.cartIds.push(rs.goodsId)
        })
        generateOrder(params).then(res=>{
          if(res.code == 200){
            uni.navigateTo({
              url:'/pages/client/clientPackage/settleStatusPage'
            })
          }else{
            uni.showToast({
              title:res.msg,
            })
            return
          }
        })
			},
      // 选择优惠券
      handlerSelectCoupon(){

      },

      close(){
        this.coupon_show = false
      },
      // 点击展示优惠券pop
      openCouponshow(){
        console.log('@@@@')
        this.coupon_show = true
      },
      // 选择优惠券 点击确定按钮
      handlerSelectCoupon(){
        this.coupon_show = false
      }
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: calc(100vh - 40rpx);
		background: linear-gradient(to bottom,  #bacff5, #F2F4FA, #fff);
		padding: 20rpx;

		.content-box {
			padding: 20rpx 20rpx 120rpx;
			max-height: calc(100vh - 180rpx);
			overflow-y: auto;

			.message-box {
				padding: 20rpx;
				border-radius: 20rpx;
				background-color: #fff;
				margin-bottom: 20rpx;
				box-shadow: 5px 5px 5px rgb(0, 0, 0, 0.1);

				.message-item {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.item-left {
						font-size: 32rpx;
						font-weight: bold;

					}

					.item-right {
						width: 60%;
						align-items: center;

						.right-img {
							width: 50rpx;
							height: 50rpx;
							margin-left: 20rpx;
						}
					}
				}

				.couon-box {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.coupon-left {
						display: flex;
						align-items: center;
						font-size: 30rpx;

						.img {
							width: 50rpx;
							height: 50rpx;
							margin-right: 20rpx;
						}
					}

					.coupon-right {
						display: flex;
						align-items: center;
					}
				}

				.goods-title {
					font-size: 32rpx;
				}

				.goods-item {
					margin-bottom: 30rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.item-left {
						display: flex;

						.left-img {
							width: 130rpx;
							height: 130rpx;
							border-radius: 10rpx;
						}

						.left-text {
							display: flex;
							flex-direction: column;
							justify-content: space-around;
							margin-left: 20rpx;

							.text-name {
								font-weight: bold;
								font-size: 30rpx;
								width: 260rpx;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}

							.price-box {
								display: flex;
								font-style: italic;
								align-items: center;

								.price {
									font-size: 34rpx;
									font-weight: bold;
									margin-right: 20rpx;
								}

								.false-price {
									color: #CACDD4;
									text-decoration: line-through;
								}
							}
						}
					}
				}

				.message-name {
					font-size: 32rpx;
					font-weight: bold;
				}

				.message-text {
					margin-top: 20rpx;
          color: #bcbfc3;
				}
			}
		}
	}

	.flex-end {
		display: flex;
		justify-content: flex-end;
	}

	.red-color {
		color: #FF4B10;
	}

	::v-deep .u-border {
		border-style: none !important;
	}



	.pop-box {
		height: 850rpx;
		background-color: #F4F4F4;
    position: relative;
		.pop-title {
			font-weight: bold;
			font-size: 36rpx;
			text-align: center;
			padding: 20rpx;
      background: linear-gradient(to bottom,  #fff,#fff, #F4F4F4);
		}
    .pop-coupon-box{
      max-height: 650rpx;
      overflow-y: scroll;
    }
		.pop-item {
			padding: 20rpx;
      margin-bottom:10rpx;
			.item-box {
				padding: 20rpx;
				border-radius: 20rpx 20rpx 0 0;
				background-color: #fff;
				display: flex;
				align-items: center;
        box-shadow: 0rpx 7rpx 20rpx 10rpx rgba(0,0,0,0.1);
        background-image: radial-gradient(circle at left bottom, #F4F4F4, #F4F4F4 40rpx, transparent 16rpx), radial-gradient(circle at right bottom, #F4F4F4, #F4F4F4 55rpx, transparent 16rpx),radial-gradient(circle at right top, #F4F4F4, #F4F4F4 35rpx, transparent 16rpx);
				.item-left {
					display: flex;
					width: 70%;
					.img-box,
					.left-img {
						width: 160rpx;
						height: 160rpx;
						border-radius: 20rpx;
					}

					.left-text {
						margin-left: 20rpx;

						.text-title {
							font-size: 34rpx;
							width: 350rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							color: #000;
						}

						.text {
							font-size: 26rpx;
							color: #666666;
							margin-top: 10rpx;
						}
					}

				}

				.item-right {
					text-align: center;
					width: 30%;

					.price {
						font-size: 56rpx;

						.price-symbol {
							font-size: 24rpx;
						}
					}

					.text {
						color: #656565;
						margin-top: 20rpx;
					}
				}
			}
      .item-bottom{
        padding: 20rpx 50rpx 20rpx 30rpx;
        background-color: #fff;
        border-radius: 0 0 20rpx 20rpx;
        box-shadow: 0rpx 10rpx 15rpx 0rpx rgba(0,0,0,0.1);
        background-image: radial-gradient(circle at left top, #F4F4F4, #F4F4F4 40rpx, transparent 16rpx), radial-gradient(circle at right top, #F4F4F4, #F4F4F4 55rpx, transparent 16rpx);
        border-top: 1px dashed #F4F4F4;
        color: #b1b4b9;
        font-size:26rpx;
        font-style:oblique;
        text-indent:32.4px;
      }
		}

    .pop-bottom{
      position: absolute;
      bottom: 0;
      width: 100%;
      display: flex;
      justify-content: center;
      .coupon-btn{
        width: 100%;
        background-color: #FFDE21 !important;
        color: #000;
        font-size:28rpx;
        // height:80rpx;
        // line-height: 80rpx;
        border-radius: 20rpx;
      }
    }
	}



	.btn-box{
		width: 100%;
		position: fixed;
		bottom: 5%;
		.btn{
			width: 90%;
			background: linear-gradient(to right, #1d4350, #a43931);
			color: #fff;
			border-radius: 40rpx;
			text-align: center;
			font-size: 32rpx;
      padding: 20rpx;
		}
	}
</style>