调试

MrShi

12 小时以前 62b483cc627b0a5f7d626d6b333a3ef7c7c1f4f4

 mini-program/pages/confirm-order/confirm-order.vue

@@ -1,71 +1,79 @@
<template>
   <view class="box">
   <view class="box" v-if="orderInfo">
      <view class="box-addr">
         <view class="box-addr-list">
            <view class="box-addr-list-row active">
            <view @click="changeOrderType(0)" :class="receiveType === 0 ? 'box-addr-list-row active' : 'box-addr-list-row'">
               <image src="/static/icon/ic_wuliu_sel@2x.png" mode="widthFix"></image>
               <text>物流配送</text>
            </view>
            <view class="box-addr-list-row">
            <view @click="changeOrderType(1)" :class="receiveType === 1 ? 'box-addr-list-row active' : 'box-addr-list-row'">
               <image src="/static/icon/ic_daodian@2x.png" mode="widthFix"></image>
               <text>门店自提</text>
            </view>
         </view>
         <!-- 物流配送 -->
         <!-- <view class="box-addr-val">
         <view class="box-addr-val" v-if="receiveType === 0">
            <image class="icon1" src="/static/icon/ic_location@2x.png" mode="widthFix"></image>
            <view class="info">
               <view class="info-top">
                  <text>李金平</text>
                  <text>181777889338</text>
               </view>
               <view class="info-bottom">
                  安徽省合肥市经开区松谷路凤凰国际B座808 豆米科技有限公司
            <view class="info" @click="jumpAddr">
               <template v-if="addr">
                  <view class="info-top">
                     <text>{{addr.name}}</text>
                     <text>{{addr.phone}}</text>
                  </view>
                  <view class="info-bottom">
                     {{addr.areaDetail}}{{addr.addr}}
                  </view>
               </template>
               <view class="info-wu" v-else>
                  <text>选择地址</text>
                  <image class="icon2" src="/static/icon/ic_ar2@2x.png" mode="widthFix"></image>
               </view>
            </view>
            <image class="icon2" src="/static/icon/ic_ar2@2x.png" mode="widthFix"></image>
         </view> -->
            <image class="icon2" src="/static/icon/ic_ar2@2x.png" mode="widthFix" v-if="addr"></image>
         </view>
         <!-- 门店自提 -->
         <view class="box-addr-val">
            <image class="icon1" src="/static/icon/ic_address@2x1.png" mode="widthFix"></image>
            <view class="info">
               <view class="info-top">
                  <text>XXX经销商</text>
         <template v-if="receiveType === 1">
            <view class="box-addr-val">
               <image class="icon1" src="/static/icon/ic_address@2x1.png" mode="widthFix"></image>
               <view class="info">
                  <view class="info-top">
                     <text>XXX经销商</text>
                  </view>
                  <view class="info-bottom">
                     安徽省合肥市经开区松谷路凤凰国际B座808室
                  </view>
               </view>
               <view class="info-bottom">
                  安徽省合肥市经开区松谷路凤凰国际B座808室
               <image class="icon2" src="/static/icon/ic_ar2@2x.png" mode="widthFix"></image>
            </view>
            <view class="box-addr-time">
               <text>营业时间：</text>
               <text>周一至周五 09:00-19:00</text>
            </view>
            <view class="box-addr-dz">
               <view class="box-addr-dz-left">
                  <text>联系电话：</text>
                  <text>0551-87899903</text>
               </view>
               <view class="box-addr-dz-r">
                  <image src="/static/icon/ic_address@2x.png" mode="widthFix"></image>
                  <text>1.3km</text>
               </view>
            </view>
            <image class="icon2" src="/static/icon/ic_ar2@2x.png" mode="widthFix"></image>
         </view>
         <view class="box-addr-time">
            <text>营业时间：</text>
            <text>周一至周五 09:00-19:00</text>
         </view>
         <view class="box-addr-dz">
            <view class="box-addr-dz-left">
               <text>联系电话：</text>
               <text>0551-87899903</text>
            </view>
            <view class="box-addr-dz-r">
               <image src="/static/icon/ic_address@2x.png" mode="widthFix"></image>
               <text>1.3km</text>
            </view>
         </view>
         </template>
      </view>
      <view class="box-shop">
         <view class="item">
         <view class="item" v-for="(item, index) in orderInfo.goodsCalculateList" :key="index">
            <view class="item-image">
               <image src="/static/logo.png" mode="widthFix"></image>
               <image :src="item.skuImg" mode="widthFix"></image>
            </view>
            <view class="item-info">
               <view class="item-info-title">中联艾禾宽齿 适用雷沃/中联/久保田</view>
               <view class="item-info-title">{{item.name}}</view>
               <view class="item-info-bottom">
                  <view class="price">¥499.00</view>
                  <view class="price">¥{{item.skuAmount}}</view>
                  <view class="num">
                     <view class="num-add">-</view>
                     <view class="num-total">0</view>
                     <view class="num-add">+</view>
                     <!-- <view class="num-add">-</view> -->
                     <view class="num-total">数量：{{item.goodsNum}}</view>
                     <!-- <view class="num-add">+</view> -->
                  </view>
               </view>
            </view>
@@ -75,104 +83,95 @@
            <view class="info-item">
               <view class="info-item-label">商品总价</view>
               <view class="info-item-price">
                  <text>897</text>
                  <text>.00</text>
                  <text>{{orderInfo.amount}}</text>
               </view>
            </view>
            <view class="info-item">
               <view class="info-item-label">运费</view>
               <view class="info-item-price1">¥10.00</view>
               <view class="info-item-price1">¥{{orderInfo.mailAmount}}</view>
            </view>
            <view class="info-item">
               <view class="info-item-label">优惠券</view>
               <view class="info-item-price1">
                  -¥100.00
               <view class="info-item-price1" @click="show = true">
                  -¥{{orderInfo.couponAmount}}
                  <image src="/static/icon/ic_ar2@2x.png" mode="widthFix"></image>
               </view>
            </view>
            <view class="info-item">
               <view class="info-item-label">积分抵扣</view>
               <view class="info-item-price1">
                  -¥10.00
               <view class="info-item-price1" @click="show1 = true">
                  -¥{{orderInfo.integralAmount}}
                  <image src="/static/icon/ic_ar2@2x.png" mode="widthFix"></image>
               </view>
            </view>
            <view class="info-item">
               <view class="info-item-label" style="color: #222222; font-size: 30rpx; font-weight: 600;">应付款</view>
               <view class="info-item-price2">
                  <text>797</text>
                  <text>.00</text>
                  <text>{{orderInfo.payAmount}}</text>
               </view>
            </view>
         </view>
      </view>
      <view class="remark">
         <view class="remark-label">订单备注</view>
         <input type="text" placeholder="请输入备注" />
         <input type="text" v-model="remark" placeholder="请输入备注" />
      </view>
      <view class="play">
         <view class="play-info">
            <image src="/static/icon/order_ic_wepay@2x.png" mode="widthFix"></image>
            <text>微信支付</text>
         </view>
         <image src="/static/icon/ic_agree@2x.png" mode=""></image>
         <image src="/static/icon/cart_ic_sel@2x.png" mode="widthFix"></image>
      </view>
      <view class="footer">
         <view class="edit">
            <view class="edit-btn">立即支付 ¥799.00</view>
            <view class="edit-btn" @click="payment">立即支付 ¥{{orderInfo.payAmount}}</view>
         </view>
         <view style="width: 100%; height: env(safe-area-inset-bottom);"></view>
      </view>
      <!-- 优惠券 -->
      <u-popup :show="show" round="15" :closeable="true" mode="bottom">
      <u-popup :show="show" round="15" :closeable="true" @close="show = false" mode="bottom">
         <view class="coupon">
            <view class="coupon-title">选择优惠券</view>
            <view class="coupon-list">
               <view class="coupon-list-item">
                  <view class="jiage">
                     <text>100</text>
                     <text>满300可用</text>
            <scroll-view scroll-y class="coupon-list">
               <view class="coupon-list-item" v-for="(item, index) in orderInfo.memberCouponList" :key="index" @click="selectCoupon(index)">
                  <view class="jiage" v-if="item.couponType === 0">
                     <text>{{item.price}}</text>
                     <text>满{{item.limitPrice}}可用</text>
                  </view>
                  <view class="jiage1" v-if="item.couponType === 1">
                     <text>{{item.price}}</text>
                     <text>满{{item.limitPrice}}可用</text>
                  </view>
                  <view class="juaninfo">
                     <view class="juaninfo-info">
                        <text>新客专享</text>
                        <text>2020.5.25 日到期</text>
                        <text>{{item.name}}</text>
                        <text>{{item.endDate.substring(0, 10)}} 日到期</text>
                     </view>
                     <image src="/static/icon/ic_agree@2x.png" mode="widthFix"></image>
                     <image src="/static/icon/ic_agree@2x.png" mode="widthFix" v-if="!item.active"></image>
                     <image src="/static/icon/cart_ic_sel@2x.png" mode="widthFix" v-else></image>
                  </view>
               </view>
               <view class="coupon-list-item disable">
                  <view class="jiage">
                     <text>100</text>
                     <text>满300可用</text>
                  </view>
                  <view class="juaninfo">
                     <view class="juaninfo-info">
                        <text>新客专享</text>
                        <text>2020.5.25 日到期</text>
                     </view>
                     <image src="/static/icon/ic_agree@2x.png" mode="widthFix"></image>
                  </view>
               </view>
            </view>
            <view class="coupon-btn">确定</view>
            </scroll-view>
            <view class="coupon-btn" @click="confirmCoupon">确定</view>
         </view>
      </u-popup>
      <!-- 积分 -->
      <u-popup :show="show1" round="15" :closeable="true" mode="bottom">
      <u-popup :show="show1" round="15" @close="show1 = false" :closeable="true" mode="bottom">
         <view class="coupon">
            <view class="coupon-title">使用积分</view>
            <view class="coupon-content">
               <view class="coupon-content-a">
                  <text>当前积分：</text>
                  <text>1200</text>
                  <text>{{orderInfo.surplusIntegral || 0}}</text>
               </view>
               <view class="coupon-content-b">
                  <text>本单可用积分：1000</text>
                  <image src="/static/icon/ic_agree_sel@2x.png" mode="widthFix"></image>
               <view class="coupon-content-b" @click="useIntegralCopy = useIntegralCopy === 1 ? 0 : 1">
                  <text>本单可用积分：{{orderInfo.deductIntegral}}</text>
                  <image src="/static/icon/ic_agree_sel@2x.png" mode="widthFix" v-if="useIntegralCopy === 1"></image>
                  <image src="/static/icon/ic_agree@2x.png" mode="widthFix" v-else></image>
               </view>
            </view>
            <view class="coupon-btn">确定</view>
            <view class="coupon-btn" @click="confirmJF">确定</view>
         </view>
      </u-popup>
      <!-- 门店 -->
@@ -226,15 +225,154 @@
</template>

<script>
   import { mapState } from 'vuex'
   export default {
      computed: {
         ...mapState(['position'])
      },
      data() {
         return {
            show: false,
            show1: false,
            show2: false,
            show3: true,
            keyword: ''
            show3: false,
            keyword: '',
            orderInfo: null,
            addr: null,
            remark: '',
            useIntegralCopy: 0,
            useIntegral: 0,
            receiveType: 0,
            couponId: null,
            payDetailRequestList: []
         };
      },
      onLoad(option) {
         const shop = uni.getStorageSync('shop');
         if (shop) {
            this.payDetailRequestList = shop
            uni.removeStorageSync('shop');
         }
         uni.$on('update', (data) => {
            this.addr = data
            this.getOrderInfo()
         })
         this.getDefaultAddr()
      },
      methods: {
         // 获取附近门店
         getShopLists() {
            this.$u.api.getShopList({
               cityName: this.position.ad_info.city,
               lat: this.position.location.lat,
               lgt: this.position.location.lng
            }).then(res => {
               if (res.code === 200) {
                  console.log(res)
               }
            })
         },
         // 支付
         payment() {
            this.$u.api.orderPay({
               addressId: this.addr.id,
               couponId: this.couponId,
               payDetailRequestList: this.payDetailRequestList,
               receiveType: this.receiveType,
               useIntegral: this.useIntegral,
               remark: this.remark,
               titlePrice: this.orderInfo.payAmount
            }).then(res => {
               if (res.code === 200) {
                  // 积分抵扣
                  if (res.data.payType === 1) {
                     uni.reLaunch({
                        url: `/pagesA/pages/order-details/order-details?id=${res.data.orderId}&userType=0`
                     })
                  } else {
                     wx.requestPayment({
                        timeStamp: res.data.response.timeStamp,
                        nonceStr: res.data.response.nonceStr,
                        package: res.data.response.packageValue,
                        signType: res.data.response.signType,
                        paySign: res.data.response.paySign,
                        success (pay) {
                           if (pay.errMsg === "requestPayment:ok") {
                              uni.reLaunch({
                                 url: `/pagesA/pages/order-details/order-details?id=${res.data.orderId}&userType=0`
                              })
                           } else {
                              uni.showToast({ title: '订单取消支付', icon: 'none' })
                           }
                        }
                     })
                  }
               }
            })
         },
         // 确定使用积分
         confirmJF() {
            this.useIntegral = this.useIntegralCopy
            this.show1 = false
            this.getOrderInfo()
         },
         // 确定选择优惠券
         confirmCoupon() {
            let arr = this.orderInfo.memberCouponList.filter(item => item.active)
            if (arr.length > 0) {
               this.couponId = arr[0].id
            }
            this.show = false
            this.getOrderInfo()
         },
         // 选择优惠券
         selectCoupon(i) {
            this.orderInfo.memberCouponList.forEach((item, index) => {
               item.active = index === i
            })
         },
         // 获取订单详细信息
         getOrderInfo() {
            this.$u.api.orderPayConfirm({
               addressId: this.addr ? this.addr.id : null,
               couponId: this.couponId,
               payDetailRequestList: this.payDetailRequestList,
               receiveType: this.receiveType,
               useIntegral: this.useIntegral
            }).then(res => {
               if (res.code === 200) {
                  if (!res.data.memberCouponList) {
                     res.data.memberCouponList = []
                  } else {
                     res.data.memberCouponList.forEach(item => {
                        item.active = false
                     })
                  }
                  this.orderInfo = res.data
               }
            })
         },
         changeOrderType(type) {
            this.receiveType = type
            if (this.receiveType === 1) {
               this.getShopLists()
            }
            this.getOrderInfo()
         },
         jumpAddr() {
            uni.navigateTo({
               url: '/pages/address/address?type=1'
            })
         },
         getDefaultAddr() {
            this.$u.api.findDefault()
               .then(res => {
                  if (res.code === 200) {
                     this.addr = res.data
                     this.getOrderInfo()
                  }
               })
         }
      }
   }
</script>
@@ -434,6 +572,7 @@
         }
         .coupon-list {
            width: 100%;
            max-height: 600rpx;
            display: flex;
            flex-direction: column;
            .disable {
@@ -481,6 +620,35 @@
                        color: #E4001D;
                        &::before {
                           content: '￥';
                           font-weight: 600;
                           font-size: 24rpx;
                           color: #E4001D;
                        }
                     }
                     &:nth-child(2) {
                        font-weight: 400;
                        font-size: 24rpx;
                        color: #E93047;
                        margin-top: 8rpx;
                     }
                  }
               }
               .jiage1 {
                  flex-shrink: 0;
                  width: 208rpx;
                  height: 100%;
                  display: flex;
                  flex-direction: column;
                  align-items: center;
                  justify-content: center;
                  border-right: 1rpx dashed #E3C1C1;
                  text {
                     &:nth-child(1) {
                        font-weight: 600;
                        font-size: 44rpx;
                        color: #E4001D;
                        &::after {
                           content: '折';
                           font-weight: 600;
                           font-size: 24rpx;
                           color: #E4001D;
@@ -868,6 +1036,7 @@
            }
            .info {
               flex: 1;
               min-height: 48rpx;
               display: flex;
               flex-direction: column;
               .info-top {
@@ -893,6 +1062,23 @@
                  color: #333333;
                  margin-top: 14rpx;
               }
               .info-wu {
                  flex: 1;
                  height: 100%;
                  display: flex;
                  align-items: center;
                  justify-content: space-between;
                  text {
                     font-weight: 400;
                     font-size: 26rpx;
                     color: #333333;
                  }
                  image {
                     width: 12rpx;
                     height: 24rpx;
                     margin: 0 !important;
                  }
               }
            }
            .icon2 {
               flex-shrink: 0;