app-AgricultureSmart/uniapp/subpkg/payment/payment.vue

<template>
  <view class="container">
    <view class="choose">
      <view class="choose_address">
        <picker mode="selector" :range="addressList" @change="changeAddress">
          <view class="address-item">
            <text>收货地址:</text>
            <text>{{ selectedAddress }}</text>
            <van-icon name="arrow" color="#999" size="14px" />
          </view>
        </picker>
        <view class="add-address" @click="navigateToAddAddress">
          <van-icon name="plus" color="#ff6600" size="16px" />
          <text>添加地址</text>
        </view>
      </view>
      <view class="choose_time">
        <picker mode="selector" :range="timeList" @change="changeTime">
          <view class="time-item">
            <text>预计送达时间:</text>
            <text>{{ selectedTime }}</text>
            <van-icon name="arrow" color="#999" size="14px" />
          </view>
        </picker>
      </view>
    </view>
    <view class="payInfo">
      <view class="shop_title">{{ shopTitle }}</view>
      <view class="orderList">
        <view class="order-item" v-for="item in cart" :key="item.goods_id">
          <image class="goods-image" :src="item.goods_small_logo" mode="aspectFill"></image>
          <view class="goods-info">
            <text class="goods-name">{{ item.goods_name }}</text>
            <text class="goods-price">￥{{ item.goods_price }}</text>
            <text class="goods-count">x {{ item.goods_count }}</text>
          </view>
          <view>￥{{ item.goods_price*item.goods_count|toFixed(2) }}</view>
        </view>
      </view>
      <view class="tip">
        <text>温馨提示: 餐品已包装,请您尽快食用</text>
      </view>
      <view class="priceInfo">
        <view class="PackingFee">
          <text>餐盒费</text>
          <text>￥{{ PackingFee }}</text>
        </view>
        <view class="deliveryFee">
          <text>运费</text>
          <text>￥{{ deliveryFee }}</text>
        </view>
        <view class="disCount">
          <text>优惠券</text>
          <text>-￥{{ PackingFee+deliveryFee }}</text>
        </view>
      </view>
    </view>
    <view class="payBtn">
      <view class="left_info">
        <view class="totalPrice">合计: ￥{{ Number.parseFloat(checkedGoodsAmount()).toFixed(2) }}</view>
        <view class="discountPrice">已优惠: ￥{{ checkedGoodsAmount() - checkedGoodsAmount()+PackingFee+deliveryFee }}</view>
      </view>
      <view class="pay" @click="pay">提交订单</view>
    </view>
  </view>
</template>

<script>
import { mapState, mapMutations, mapGetters } from 'vuex'
export default {
  onLoad(args) {
    this.cart=this.getCart()
    this.addressList = this.getAddressList()
    console.log(this.addressList,"Listen")
    this.shopTitle=args.shopTitle
    this.storeId=args.storeId
  },
  onShow() {
    this.cart=this.getCart()
    this.addressList = this.getAddressList()
    console.log(this.addressList,"Listen")

  },
  data() {
    return {
      storeId:0,
      addressList: ['江西省上饶市', '南昌市青山湖区', '江西省上饶市', '南昌市青山湖区'],
      timeList: ['18:00', '18:30', '19:00', '19:30', '20:00'],
      shopTitle: '麦当劳',
      selectedAddress: '',
      selectedTime: '18:00',
      cart:[],
      PackingFee: 1.5,
      deliveryFee: 3,
      orderList: []
    }
  },
  methods: {
    ...mapGetters('m_cart', ['total', 'checkedGoodsAmount','getCart']),
    ...mapGetters('m_addr', ['getAddressList']),
    ...mapMutations('m_cart', ['clearCart']),
    ...mapMutations('m_order', ['putOrder']),
    changeAddress(e) {
      this.selectedAddress = this.addressList[e.detail.value]
    },
    changeTime(e) {
      this.selectedTime = this.timeList[e.detail.value]
    },
    // pay() {
    //   console.log(this.cart)
    //   console.log(this.getCart())
    // },
    pay() {
      // 模拟微信支付流程
      uni.requestPayment({
        fail: () => {
          // 支付成功后生成订单数据
          const orderId = this.generateOrderId()
          const orderData = {
            id: orderId,
            addressList: this.addressList,
            selectedAddress: this.selectedAddress,
            timeList: this.timeList,
            orderTime: new Date().toLocaleString(),
            selectedTime: this.selectedTime,
            shopTitle: this.shopTitle,
            PackingFee: this.PackingFee,
            deliveryFee: this.deliveryFee,
            total: this.checkedGoodsAmount()
          }
          let userId = 1
          if (!uni.getStorageSync('userId')) {
            userId = 1
          }else{
            userId = uni.getStorageSync('userId')
          }

          let originPay=Number.parseFloat(this.checkedGoodsAmount())+Number.parseFloat(this.PackingFee)+Number.parseFloat(this.deliveryFee)
          let data =[]
          for(let i=0;i<this.cart.length;i++){
            data.push(
                {productId:this.cart[i].goods_id,
                  count:this.cart[i].goods_count,
                  productName:this.cart[i].goods_name,
                  amount:this.cart[i].goods_price*this.cart[i].goods_count
                  ,productIcons:this.cart[i].goods_small_logo})
          }
          console.log(data,"data")
          let order=
              {
                // "address":this.selectedAddress,
                // "phone":"12345678901",
                "bidPay":this.checkedGoodsAmount(),
                "originPay":originPay,
                "addressId":9,
                "userId":userId,
                "storeId":1,
                "orderRemark":"无",
                "orderProductsLists":data
              }
              // {
              //   "bidPay":this.checkedGoodsAmount(),
              //   "originPay":originPay,
              //   "addressId":9,
              //   "userId":1,
              //   "orderProductsLists":[
              //     {
              //       "productName":"芒果",
              //       "count":12,
              //       "cnt":12
              //     },
              //     {
              //       "productName":"芒果",
              //       "count":12,
              //       "cnt":12
              //     }
              //   ]
              // }
          console.log(order,"order")
          this.orderList.push(order)
          this.putOrder(order)
          // 保存订单数据到本地
          console.log(order)
          uni.setStorageSync('orderList', this.orderList)
          // 跳转到订单详情页面
          // uni.navigateTo({
          //   url: `/subpkg/orderDetail/orderDetail?orderId=${orderId}`
          // })
          //清空购物车
          this.clearCart()
          this.cart=[]
          //返回上一页
          uni.navigateBack({
            delta: 1
          })
          // 显示支付成功提示
          uni.showToast({
            title: '支付成功',
            icon: 'success',
            duration: 3000
          })
          // 3秒后自动关闭提示
          setTimeout(() => {
            uni.hideToast()
          }, 3000)
        },
        success: (e) => {
          console.log(e,"e")
          uni.showToast({
            title: '支付失败',
            icon: 'none',
            duration: 3000
          })
        }
      })
    },
    generateOrderId() {
      // 生成随机订单号
      return Math.random().toString(36).substr(2, 9)
    },
    navigateToAddAddress() {
      uni.navigateTo({
        url: '/subpkg/addAddress/addAddress'
      })
    }
  },
  filters: {
    toFixed(val) {
      return Number(val).toFixed(2)
    }
  }
}
</script>

<style lang="scss">
.container {
  padding: 20rpx;
  background-color: #f7f7f7;
}

.choose {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  //col
  flex-direction: column;
  padding: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);

  .choose_address,
  .choose_time {
    flex: 1;

    .address-item,
    .time-item {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      font-size: 35rpx;
      color: #333;
    }
  }
}

.payInfo {
  margin-top: 20rpx;
  background-color: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);

  .shop_title {
    font-size: 32rpx;
    font-weight: bold;
    margin-bottom: 20rpx;
    color: #ff6600;
  }

  .orderList {
    .order-item {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;

      .goods-image {
        width: 120rpx;
        height: 120rpx;
        border-radius: 10rpx;
        margin-right: 20rpx;
      }

      .goods-info {
        flex: 1;

        .goods-name {
          font-size: 28rpx;
          color: #333;
        }

        .goods-price {
          font-size: 26rpx;
          color: #ff6600;
          margin-right: 10rpx;
        }

        .goods-count {
          font-size: 24rpx;
          color: #999;
        }
      }
    }
  }

  .tip {
    font-size: 24rpx;
    color: #999;
    margin: 20rpx 0;
  }

  .priceInfo {
    display: flex;
    justify-content: space-between;
    font-size: 26rpx;
    color: #333;

    view {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10rpx;
    }
  }
}

.payBtn {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);

  .left_info {
    .totalPrice {
      font-size: 32rpx;
      font-weight: bold;
      color: #ff6600;
    }

    .discountPrice {
      font-size: 24rpx;
      color: #999;
    }
  }

  .pay {
    background-color: #ff6600;
    color: #fff;
    font-size: 28rpx;
    padding: 10rpx 20rpx;
    border-radius: 30rpx;
  }
}
/* 样式保持不变 */
.choose_address {
  display: flex;
  justify-content: space-between;
  align-items: center;

  .add-address {
    display: flex;
    align-items: center;
    font-size: 26rpx;
    color: #ff6600;
  }
}
</style>

<!--<template>-->
<!--  <view class="container">-->
<!--    <view class="choose">-->
<!--      <view class="choose_address">-->
<!--        <picker mode="selector" :range="addressList" @change="changeAddress">-->
<!--          <view class="address-item">-->
<!--            <text>收货地址</text>-->
<!--            <text>{{ selectedAddress }}</text>-->
<!--            <van-icon type="arrowright" size="16"></van-icon>-->
<!--          </view>-->
<!--        </picker>-->
<!--      </view>-->
<!--      <view class="choose_time">-->
<!--        <picker mode="selector" :range="timeList" @change="changeTime">-->
<!--          <view class="time-item">-->
<!--            <text>预计送达时间</text>-->
<!--            <text>{{ selectedTime }}</text>-->
<!--            <van-icon type="arrowright" size="16"></van-icon>-->
<!--          </view>-->
<!--        </picker>-->
<!--      </view>-->
<!--    </view>-->
<!--    <view class="payInfo">-->
<!--      <view class="shop_title">{{ shopTitle }}</view>-->
<!--      <view class="orderList">-->
<!--        <view class="order-item" v-for="item in cart" :key="item.goods_id">-->
<!--          <image class="goods-image" :src="item.goods_small_logo" mode="aspectFill"></image>-->
<!--          <view class="goods-info">-->
<!--            <text class="goods-name">{{ item.goods_name }}</text>-->
<!--            <text class="goods-price">￥{{ item.goods_price }}</text>-->
<!--            <text class="goods-count">x {{ item.goods_count }}</text>-->
<!--          </view>-->
<!--        </view>-->
<!--      </view>-->
<!--      <view class="tip">-->
<!--        <text>温馨提示: 餐品已包装,请您尽快食用</text>-->
<!--      </view>-->
<!--      <view class="priceInfo">-->
<!--        <view class="PackingFee">-->
<!--          <text>餐盒费</text>-->
<!--          <text>￥{{ PackingFee }}</text>-->
<!--        </view>-->
<!--        <view class="deliveryFee">-->
<!--          <text>运费</text>-->
<!--          <text>￥{{ deliveryFee }}</text>-->
<!--        </view>-->
<!--        <view class="disCount">-->
<!--          <text>优惠券</text>-->
<!--          <text>-￥0</text>-->
<!--        </view>-->
<!--      </view>-->
<!--    </view>-->
<!--    <view class="payBtn">-->
<!--      <view class="left_info">-->
<!--        <view class="totalPrice">合计: ￥{{ total }}</view>-->
<!--        <view class="discountPrice">已优惠: ￥{{ checkedGoodsAmount - total }}</view>-->
<!--      </view>-->
<!--      <view class="pay">提交订单</view>-->
<!--    </view>-->
<!--  </view>-->
<!--</template>-->

<!--<script>-->
<!--import { mapState, mapMutations, mapGetters } from 'vuex'-->
<!--export default {-->
<!--  onLoad() {-->
<!--    console.log('吾问无为谓啊')-->
<!--  },-->
<!--  data() {-->
<!--    return {-->
<!--      addressList: ['江西省上饶市', '南昌市青山湖区'],-->
<!--      timeList: ['18:00', '18:30', '19:00', '19:30', '20:00'],-->
<!--      shopTitle: '麦当劳',-->
<!--      selectedAddress: '江西省上饶市',-->
<!--      selectedTime: '18:00',-->
<!--      ...mapState('m_cart', ['cart']), //cart:商品信息列表。每个{}包括{goods_id,goods_name,goods_price,goods_count,goods_small_logo,goods_state}信息-->
<!--      PackingFee: 1.5,-->
<!--      deliveryFee: 3-->
<!--    }-->
<!--  },-->
<!--  methods: {-->
<!--    ...mapGetters('m_cart', ['total', 'checkedGoodsAmount']), //total:计算数量，checkedGoodsAmount:计算总价-->
<!--    changeAddress(e) {-->
<!--      this.selectedAddress = this.addressList[e.detail.value]-->
<!--    },-->
<!--    changeTime(e) {-->
<!--      this.selectedTime = this.timeList[e.detail.value]-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<style lang="scss">-->
<!--.container {-->
<!--  padding: 20rpx;-->
<!--}-->

<!--.choose {-->
<!--  display: flex;-->
<!--  justify-content: space-between;-->
<!--  background-color: #fff;-->
<!--  padding: 20rpx;-->
<!--  border-radius: 10rpx;-->
<!--  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);-->

<!--  .choose_address,-->
<!--  .choose_time {-->
<!--    flex: 1;-->

<!--    .address-item,-->
<!--    .time-item {-->
<!--      display: flex;-->
<!--      align-items: center;-->
<!--      justify-content: space-between;-->
<!--      font-size: 28rpx;-->
<!--      color: #333;-->
<!--    }-->
<!--  }-->
<!--}-->

<!--.payInfo {-->
<!--  margin-top: 20rpx;-->
<!--  background-color: #fff;-->
<!--  padding: 20rpx;-->
<!--  border-radius: 10rpx;-->
<!--  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);-->

<!--  .shop_title {-->
<!--    font-size: 32rpx;-->
<!--    font-weight: bold;-->
<!--    margin-bottom: 20rpx;-->
<!--  }-->

<!--  .orderList {-->
<!--    .order-item {-->
<!--      display: flex;-->
<!--      align-items: center;-->
<!--      margin-bottom: 20rpx;-->

<!--      .goods-image {-->
<!--        width: 120rpx;-->
<!--        height: 120rpx;-->
<!--        border-radius: 10rpx;-->
<!--        margin-right: 20rpx;-->
<!--      }-->

<!--      .goods-info {-->
<!--        flex: 1;-->

<!--        .goods-name {-->
<!--          font-size: 28rpx;-->
<!--          color: #333;-->
<!--        }-->

<!--        .goods-price {-->
<!--          font-size: 26rpx;-->
<!--          color: #ff6600;-->
<!--          margin-right: 10rpx;-->
<!--        }-->

<!--        .goods-count {-->
<!--          font-size: 24rpx;-->
<!--          color: #999;-->
<!--        }-->
<!--      }-->
<!--    }-->
<!--  }-->

<!--  .tip {-->
<!--    font-size: 24rpx;-->
<!--    color: #999;-->
<!--    margin: 20rpx 0;-->
<!--  }-->

<!--  .priceInfo {-->
<!--    display: flex;-->
<!--    justify-content: space-between;-->
<!--    font-size: 26rpx;-->
<!--    color: #333;-->

<!--    view {-->
<!--      display: flex;-->
<!--      justify-content: space-between;-->
<!--      margin-bottom: 10rpx;-->
<!--    }-->
<!--  }-->
<!--}-->

<!--.payBtn {-->
<!--  display: flex;-->
<!--  justify-content: space-between;-->
<!--  align-items: center;-->
<!--  margin-top: 20rpx;-->
<!--  padding: 20rpx;-->
<!--  background-color: #fff;-->
<!--  border-radius: 10rpx;-->
<!--  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);-->

<!--  .left_info {-->
<!--    .totalPrice {-->
<!--      font-size: 32rpx;-->
<!--      font-weight: bold;-->
<!--      color: #ff6600;-->
<!--    }-->

<!--    .discountPrice {-->
<!--      font-size: 24rpx;-->
<!--      color: #999;-->
<!--    }-->
<!--  }-->

<!--  .pay {-->
<!--    background-color: #ff6600;-->
<!--    color: #fff;-->
<!--    font-size: 28rpx;-->
<!--    padding: 10rpx 20rpx;-->
<!--    border-radius: 30rpx;-->
<!--  }-->
<!--}-->
<!--</style>-->


<!--&lt;!&ndash;<template>&ndash;&gt;-->
<!--&lt;!&ndash;  <view>&ndash;&gt;-->
<!--&lt;!&ndash;    <view class="choose">&ndash;&gt;-->
<!--&lt;!&ndash;    <view class="choose_address"></view>&ndash;&gt;-->
<!--&lt;!&ndash;    <view class="choose_time"></view>&ndash;&gt;-->
<!--&lt;!&ndash;    </view>&ndash;&gt;-->
<!--&lt;!&ndash;    <view class="payInfo">&ndash;&gt;-->
<!--&lt;!&ndash;      <view class="shop_title"></view>&ndash;&gt;-->
<!--&lt;!&ndash;      <view class="orderList">&ndash;&gt;-->

<!--&lt;!&ndash;      </view>&ndash;&gt;-->
<!--&lt;!&ndash;      <view class="tip"></view>&ndash;&gt;-->
<!--&lt;!&ndash;      <view class="priceInfo">&ndash;&gt;-->
<!--&lt;!&ndash;        <view class="PackingFee"></view>&ndash;&gt;-->
<!--&lt;!&ndash;        <view class="deliveryFee"></view>&ndash;&gt;-->
<!--&lt;!&ndash;        <view class="disCount"></view>&ndash;&gt;-->
<!--&lt;!&ndash;      </view>&ndash;&gt;-->
<!--&lt;!&ndash;    </view>&ndash;&gt;-->
<!--&lt;!&ndash;    <view class="payBtn">&ndash;&gt;-->
<!--&lt;!&ndash;      <view class="left_info">&ndash;&gt;-->
<!--&lt;!&ndash;        <view class="totalPrice">合计...</view>&ndash;&gt;-->
<!--&lt;!&ndash;        <view class="discountPrice">已优惠...</view>&ndash;&gt;-->
<!--&lt;!&ndash;      </view>&ndash;&gt;-->
<!--&lt;!&ndash;      <view class="pay">提交订单</view>&ndash;&gt;-->
<!--&lt;!&ndash;    </view>&ndash;&gt;-->
<!--&lt;!&ndash;  </view>&ndash;&gt;-->
<!--&lt;!&ndash;</template>&ndash;&gt;-->

<!--&lt;!&ndash;<script>&ndash;&gt;-->
<!--&lt;!&ndash;import {mapState,mapMutations,mapGetters} from'vuex'&ndash;&gt;-->
<!--&lt;!&ndash;export default {&ndash;&gt;-->
<!--&lt;!&ndash;  onLoad() {&ndash;&gt;-->
<!--&lt;!&ndash;    console.log('吾问无为谓啊')&ndash;&gt;-->
<!--&lt;!&ndash;  },&ndash;&gt;-->
<!--&lt;!&ndash;  data() {&ndash;&gt;-->
<!--&lt;!&ndash;    return {&ndash;&gt;-->
<!--&lt;!&ndash;      addressList:['江西省上饶市','南昌市青山湖区'],&ndash;&gt;-->
<!--&lt;!&ndash;      timeList:['18:00','18:30','19:00','19:30','20:00'],&ndash;&gt;-->
<!--&lt;!&ndash;      shopTitle:'麦当劳',&ndash;&gt;-->
<!--&lt;!&ndash;      ...mapState('m_cart',['cart']),//cart:商品信息列表。每个{}包括{goods_id,goods_name,goods_price,goods_count,goods_small_logo,goods_state}信息&ndash;&gt;-->
<!--&lt;!&ndash;      PackingFee:0,&ndash;&gt;-->
<!--&lt;!&ndash;      deliveryFee:0,&ndash;&gt;-->
<!--&lt;!&ndash;    };&ndash;&gt;-->
<!--&lt;!&ndash;  },&ndash;&gt;-->
<!--&lt;!&ndash;  methods: {&ndash;&gt;-->
<!--&lt;!&ndash;    ...mapGetters('m_cart', {'total':'total','checkedGoodsAmount':'checkedGoodsAmount'}),//total:计算数量，checkedGoodsAmount:计算总价&ndash;&gt;-->
<!--&lt;!&ndash;  },&ndash;&gt;-->
<!--&lt;!&ndash;}&ndash;&gt;-->
<!--&lt;!&ndash;</script>&ndash;&gt;-->

<!--&lt;!&ndash;<style lang="scss">&ndash;&gt;-->

<!--&lt;!&ndash;</style>&ndash;&gt;-->