yicangzongtai_app_240321/pages/product/surePay/surePaySechill.vue

<template>
  <view class="container">
    <navbar :config="config" backColor="#666"></navbar>
    <view class="topStatus u-flex-center-sa u-plr30" :style="{ top: tabTop + 'px' }"
      v-if="sureDataAll.is_able_select_self_take">
      <text class="u-1A1A1A u-font30 " :class="status == 1 ? 'active' : ''" @click="changeStatus(1)">快递配送</text>
      <text class="u-1A1A1A u-font30" :class="status == 2 ? 'active' : ''" @click="changeStatus(2)">上门自提</text>
    </view>

    <view class="carbox" :class="sureDataAll.is_able_select_self_take ? 'changeTabtwo' : ''">
      <view class="addressBox">
        <view class="" v-if="status == 1">
          <ldaddress :value="sureDataAll.receipt" :link="true"></ldaddress>
        </view>
        <view class="goHome" v-if="status == 2 && sureDataAll.is_able_select_self_take">
          <view class="u-flex-center u-p30 u-border-one-one">
            <image class="u-avatar104 u-mr25" :src="sureDataAll.self_take_shop.logo" mode=""></image>
            <view class="u-flex1">
              <view class="u-1A1A1A u-font28 u-bold ">{{ sureDataAll.self_take_shop.shop_name }}</view>
              <view class="smallAddress u-mt10">
                <text class="iconfont u-02331F u-font30 u-mr10 " style="color: #0F8947;">&#xe611;</text>
                <text class="u-font24 u-bold u-999">
                  {{ sureDataAll.self_take_shop.province_name }}{{ sureDataAll.self_take_shop.city_name }}{{ sureDataAll.self_take_shop.area_name
									}}{{ sureDataAll.self_take_shop.address }}
                </text>
              </view>
            </view>
          </view>
          <view class="u-flex-center u-p30">
            <view class="u-mr45 u-font28 u-999 u-flex-center">
              <text class="u-333 u-bold">提货人：</text>
              <input style="width: 150rpx;" type="text" value="" @input="userName" maxlength="8" placeholder="提货人姓名"
                placeholder-style="font-size:30rpx;" />
            </view>
            <view class="u-font28 u-999 u-flex-center">
              <text class="u-mr10 iconfont u-02331F u-font30">&#xe64e;</text>
              <input style="width: 260rpx;" type="number" value="" maxlength="11" @input="userMobile"
                placeholder="提货人手机号" placeholder-style="font-size:30rpx;" />
            </view>
          </view>
        </view>
      </view>
      <view class="" v-for="(pitem, index) in sureDataAll.shop_orders" :key="pitem.source_shop_id">
        <view class="shopList  u-mt10">
          <ldshop :shopStatus="shopStatus" :value="pitem.source_shop_name"></ldshop>
          <view v-for="item in pitem.items" :key="item.goods_id">
            <ldgoods :value="item"></ldgoods>
          </view>
        </view>

        <!-- 备注 -->
        <view class="listText u-p30">
          <view class="u-font28 u-181818">购买备注</view>
          <textarea class="textarea u-mt10 u-font28 u-333" :auto-height="true" :maxlength="80"
            @input="textareaText($event, index)" value="" placeholder="选填，给商家留言" />
        </view>
        <!-- list -->
        <view class="listText">
          <view class="u-border-one-one border u-p30 u-flex-center-sb">
            <view class="u-font28 u-181818"><text>商品金额</text></view>
            <view class="u-font30 u-999">¥ {{ pitem.original_goods_amount }}</view>
          </view>

          <view class="u-border-one-one border u-p30 u-flex-center-sb">
            <view class="u-font28 u-181818"><text>运费</text></view>
            <view class="u-font30 u-999">
				<!-- + {{ pitem.total_freight }}元 -->
				{{pitem.total_freight?'+¥'+pitem.total_freight+'元':'免运费'}}
			</view>
          </view>
          <view class="u-border-one-one border u-p30 u-flex-center-sb">
            <view class="u-font28 u-181818">
              <text v-if="marketing_type == 1">秒杀活动折扣</text>
              <text v-if="marketing_type == 2">拼团活动折扣</text>
            </view>
            <view class="u-font30 u-999">-¥ {{ pitem.discount_amount }}</view>
          </view>
          <view class="u-border-one-one u-p30 u-flex-center-sb" v-if="pitem.first_order_activity">
            <view class="u-font28 u-181818">
              <text>首单优惠</text>
              <text
                class="u-font24 u-999">（满{{ pitem.first_order_activity.full }}减{{ pitem.first_order_activity.reduction }}）</text>
            </view>
            <view class="u-font30 u-999">-¥ {{ pitem.first_order_reduced }}</view>
          </view>
          <!-- <view class="u-border-one-one border u-p30 u-flex-center-sb">
            <view class="u-font28 u-181818"><text
                class="iconfont3 consumption_value-icon">&#xe603;</text><text>消费补贴</text></view>
            <view class="u-font30 u-999">
              <rich-text :nodes="$mUtil.isToFixed(pitem.total_consumption_value, 2)"></rich-text>
            </view>
          </view> -->
          <!-- <view class="u-border-one-one u-p30 u-flex-center-sb">
						<view class="u-font28 u-181818"><text>支付金额</text></view>
						<view class="u-font30 u-FF0000 u-bold"><rich-text :nodes="$mUtil.priceBigSmall(pitem.total_amount)"></rich-text></view>
					</view> -->
          <view class="u-flex-center pt-pb25" style="justify-content: flex-end;height: 108rpx;padding-right: 28rpx;">
            <view class="">共{{ pitem.goods_num }}件商品</view>
            <view style="display: flex;align-items: center;">
              <text v-if="pitem.total_amount > 0"></text>
              <view class="u-bold u-FF0000" v-if="pitem.total_amount > 0">
                <rich-text :nodes="$mUtil.priceBigSmall(pitem.total_amount)"></rich-text>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="listText u-mt10">
        <view v-if="platformCoupon.my_coupon_id!==0" @click="checkCoupon()"
          class="u-border-one-one border u-p30 u-flex-center-sb">
          <view class="u-font28 u-181818"><text>平台优惠</text></view>
          <view v-if="platformCoupon" class="u-font30 u-999">
            <text
              style="white-space: nowrap;max-width: 450rpx;overflow: hidden;text-overflow: ellipsis;display: inline-block;vertical-align: middle;">{{platformCoupon.coupon_name}}</text>
            <text
              style="color: red;margin-left: 15rpx;display: inline-block;vertical-align: middle;">-{{platformCoupon.coupon_result_value}}</text>
          </view>
          <view v-else class="u-font30 u-999">选择优惠券></view>
        </view>
        <view v-if="sureDataAll.has_platform" class="u-border-one-one border u-p30">
					<view class="u-flex-center-sb">
						<view class="u-font28 u-181818"><text>积分抵扣</text></view>
						<view class="u-font30 u-999">
							<u-switch v-model="usePlatformPoint" @change="changePlatformPoint()" active-color='#FA6138'></u-switch>
						</view>
					</view>
					<view style="color: #808080;font-size: 24rpx;">共计{{sureDataAll.integral_able}}<text v-if="usePlatformPoint">，可使用{{sureDataAll.total_point}}抵扣{{sureDataAll.total_point}}元</text></view>
				</view>
      </view>
    </view>

    <!-- 底部 -->

    <view class="botfixed u-flex-center-sb">
      <view class="leftAll u-flex-center">
        <view class="u-flex-center">
          <text class="u-mr20 u-font24 u-666">共{{ totaltNum }}件</text>
          <text class="u-font28 u-333 ">合计：</text>
          <view class="u-FF0000 u-bold">
            <rich-text :nodes="$mUtil.priceBigSmall(sureDataAll.total_money)"></rich-text>
          </view>
        </view>
      </view>
      <view class="rightP u-flex-center" @click="submitOrder">
        <view class="u-btn btnWidth u-ml30">提交订单</view>
      </view>
    </view>
    <!--页面加载动画-->
    <ldLoading isFullScreen :active="loading"></ldLoading>
  </view>
</template>

<script>
  var app = getApp();
  import ldaddress from '../../../components/ld-address/ld-address.vue';
  import ldshop from '../../../components/ld-shop/ld-shop.vue';
  import ldgoods from '../../../components/ld-goods/ld-goods.vue';
  import {
  	myUserInfo
  } from "@/api/government.js"
  export default {
    components: {
      ldaddress,
      ldshop,
      ldgoods
    },
    data() {
      return {
        shopStatus: false,
        totaltNum: 0,
        tabTop: 0,
        price: 20,
        loading: false,
        status: 1, //快递方式标志
        config: {
          back: true, //false是tolbar页面 是则不写
          title: '确认订单',
          color: '#1a1a1a',
          //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
          backgroundColor: [1, '#fff'],
          statusBarFontColor: '#fff'
        },
        sureDataAll: {},
        shopDiscounts: {},
        self_take: {},
        dataJson: {},
        addressChose: false,
        type: null,
        marketing_type: null,
        imgUrl: this.$mConfig.staticUrl,
        usePlatformPoint: true, //是否使用公益积分抵扣
        // 当前使用的平台优惠券
        platformCoupon: {
          my_coupon_id: 0
        },
		user:{}
      };
    },

    onLoad(options) {
      this.loading = true;
      this.tabTop = app.globalData.barHeight + 44;
      let dataJson = uni.getStorageSync('dataJson');
      if (options.type) {
        this.type = options.type;
      }
      // let sureData = uni.getStorageSync('sureData')
      // this.getByShop(sureDataAll.)

      if (dataJson) {
        this.dataJson = dataJson;
      }
	  this.getUserData()
    },

    onShow() {
      let orderreminder = uni.getStorageSync('orderreminder');
      if (orderreminder) {
        this.$mUtil.toast('已生成待付款订单');
        uni.removeStorageSync('orderreminder');
      }

      let dataJson = uni.getStorageSync('dataJson');
      if (dataJson && !this.addressChose) {
        this.loading = true;
        this.$http.post(`/order/build`, {
          ...dataJson,
          use_platform_point: this.usePlatformPoint,
          platform_coupon: this.platformCoupon.my_coupon_id == 0 ? undefined : {
            my_coupon_id: this.platformCoupon.my_coupon_id
          }
        }).then(res => {
          if (res && res.code == 200) {
            this.loading = false;

            uni.setStorageSync('sureData', res.data);
            if (res.data) {
              this.marketing_type = res.data.marketing_type;
              this.sureDataAll = res.data;
              let totaltNum = 0;
              res.data.shop_orders.forEach(res => {
                totaltNum += res.goods_num;
              });
              this.sureData = res.data;
              this.totaltNum = totaltNum;
            }
            if (!res.data.has_platform) {
              this.usePlatformPoint = false;
            }
            //默认使用的平台优惠券
            if (res.data.platform_coupon.my_coupon_id != 0) {
              this.platformCoupon = res.data.platform_coupon;
            }
          }
        });
      }
    },
    methods: {
      changePlatformPoint() {
        let dataJson = uni.getStorageSync('dataJson');
        if (dataJson) {
          this.postData(dataJson);
        }
      },
	  getUserData() {
	  	myUserInfo().then(res => {
	  		this.user = res.data;
	  	})
	  },
      //提交订单
      submitOrder() {
        if (this.status == 1) {
          //快速配送
          this.dataJson.self_take = null;

          if (this.dataJson.receipt_id == null && !this.sureDataAll.receipt.id) {
            this.$mUtil.toast('请填写收货地址');
            return false;
          }
          this.orderCreated();
        } else {
          //自提
          if (!this.self_take.receiver) {
            this.$mUtil.toast('请填写提货人姓名');
            return false;
          }
          if (!this.self_take.mobile) {
            this.$mUtil.toast('请填写提货人手机号');
            return false;
          }
          if (!this.self_take.mobile.match(this.$mConfig.telRegex)) {
            this.$mUtil.toast('请输入正确手机号');
            return false;
          }
          this.dataJson.self_take = this.self_take;
          this.orderCreated();
        }
        // this.orderCreated()
      },
      orderCreated() {
        this.$http.post('/order/create', {
          ...this.dataJson,
          use_platform_point: this.usePlatformPoint,
          platform_coupon: this.platformCoupon.my_coupon_id == 0 ? undefined : {
            my_coupon_id: this.platformCoupon.my_coupon_id
          }
        }).then(res => {
          this.loading = false;
		  console.log('--------------',res)
		  if(!res.data.payStatus){
		  	uni.navigateTo({
		  		url: "/pages/web-view/Apps?path=" + res.data.payUrl
		  	})
		  }else{
		  	uni.redirectTo({
		  		url: `/pages/order/orderList/orderList`
		  	})
		  }
          // if (res && res.code == 200) {
          //   let target = res.data;
          //   if (target.payment_status == 5) {
          //     uni.reLaunch({
          //       url: `/pages/order/orderList/orderList?orderType=${this.sureDataAll.area_feature==3?3:0}`
          //     });
          //     return false;
          //   } else {
          //     uni.navigateTo({
          //       url: '../../order/pay?id=' + target.id + '&total_amount=' + target.total_amount +
          //         '&expired_pay_time=' + target.expired_pay_time + '&type=' + this.type
          //     });
          //   }
          // }
        });
      },
      userName(e) {
        if (this.status == 2) {
          this.self_take.receiver = e.detail.value;
        }
      },
      userMobile(e) {
        if (this.status == 2) {
          this.self_take.mobile = e.detail.value;
        }
      },
      textareaText(e, index) {
        this.dataJson.shop_orders.map((v, i) => {
          if (i == index) {
            v.user_remark = e.detail.value;
          }
        });
      },
      //店铺优惠查询
      getByShop(id) {
        this.$http.get('/marketing/firstOrder/getByShop/' + id).then(res => {
          if (res && res.code == 200) {
            this.shopDiscounts = res.data;
          }
        });
      },
      //选完地址回选
      otherFun(object) {
        this.addressChose = true;
        if (!!object) {
          let dataJson = uni.getStorageSync('dataJson');
          dataJson.receipt_id = object.addressid;
          this.dataJson = dataJson;
          this.postData(dataJson);
        }
      },
      postData(dataJson) {
        this.$http.post(`/order/build`, {
          ...dataJson,
          use_platform_point: this.usePlatformPoint,
          platform_coupon: this.platformCoupon.my_coupon_id == 0 ? undefined : {
            my_coupon_id: this.platformCoupon.my_coupon_id
          }
        }).then(res => {
          if (res && res.code == 200) {
            uni.setStorageSync('sureData', res.data);
            this.sureDataAll = res.data;
            let totaltNum = 0;
            res.data.shop_orders.forEach(res => {
              totaltNum += res.goods_num;
            });
            this.totaltNum = totaltNum;
            if (!res.data.has_platform) {
              this.usePlatformPoint = false;
            }
          }
        });
      },
      changeStatus(val) {
        this.status = val;
        if (val == 1) {
          this.dataJson.shipment_mode = 0;
        } else {
          this.dataJson.shipment_mode = 1;
        }
        this.postData(this.dataJson);
      },
      //选择优惠券
      checkCoupon() {
        let params = {
          marketing_type: this.sureDataAll.marketing_type,
          total_amount_dec_shop_coupon: this.sureDataAll.total_amount_dec_shop_coupon, // 支付总金额
          shop_order_list: this.sureDataAll.shop_orders.map(item => {
            return {
              total_amount_dec_shop_coupon: item.total_amount_dec_shop_coupon, //不含运费，扣出首单，扣除店铺优惠券的费用
              shop_id: item.shop_id // 店铺id
            }
          })
        }
        uni.navigateTo({
          url: `/pages/couponCenter/index?isCheck=true&couponId=${this.platformCoupon.my_coupon_id}&checkParams=${JSON.stringify(params)}`
        })
      },
      // 优惠券发生变动
      changeCoupon(platformCoupon) {
        this.platformCoupon = platformCoupon;
      }
    }
  };
</script>

<style lang="scss">
  page {
    background-color: #f5f5f5;
  }

  .address {
    margin-right: 10rpx;
    width: 25rpx;
    height: 25rpx;
  }

  .phone {
    margin-right: 10rpx;
    width: 25rpx;
    height: 25rpx;
  }

  .border {
    border-bottom: 3rpx solid #e7e7e7;
  }

  .textarea {
    width: 100%;
    height: 80rpx;
    background-color: #fafafa;
    padding: 22rpx 20rpx;
    box-sizing: border-box;
    border: 1px solid #ededed;
    border-radius: 20rpx;
  }

  .topStatus {
    height: 100rpx;
    background-color: #fff;
    position: fixed;
    z-index: 9;

    width: 100%;
    box-sizing: border-box;

    text {
      line-height: 100rpx;
      position: relative;
    }

    .active {
      font-weight: bold;
      color: #FA6138;
    }

    .active:after {
      width: 100%;
      height: 2px;
      background-color: #FA6138;
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
    }
  }

  .courierAddress {
    background-color: #fff;
    padding: 36rpx 30rpx;
  }

  .goHome,
  .listText {
    background-color: #fff;
  }

  .consumption_value-icon {
    color: #FF9651;
    font-size: 40rpx;
  }

  .consumption_value {
    color: #FF6600;
  }

  .btnview {
    width: 300rpx;
    margin: 30rpx auto 0;
  }

  .carbox {
    padding: 0rpx 0 160rpx 0;

    .shopList {
      background-color: #fff;
      padding: 30rpx 30rpx 0;
    }
  }

  .changeTabtwo {
    padding: 130rpx 0 160rpx 0;
  }

  .rightText {
    justify-content: space-between;
    height: 200rpx;
  }

  .bottext,
  .botPrice {
    width: 100%;
  }

  .bottext {
    margin-top: 36rpx;
  }

  .rightAddRes {
    width: 172rpx;
    height: 50rpx;
    border-radius: 8rpx;
    border: 1px solid #e5e5e5;

    .centertext {
      text-align: center;
    }

    .btnTag {
      width: 50rpx;
      height: 50rpx;
      line-height: 50rpx;
      text-align: center;
      background-color: #dedede;
      font-size: 46rpx;
      color: #888;
    }
  }

  .btnWidth {
    width: 340rpx;
    background: #FA6138;
  }

  .botfixed {
    position: fixed;
    background-color: #fff;
    width: 100%;
    height: 138rpx;
    bottom: 0;
    left: 0;
    z-index: 9;
    padding: 0 30rpx;
    box-sizing: border-box;
  }
</style>