web-base-h5/pages/thOrder/index.vue

<template>
  <view class="main">
    <u-popup :show="pswShow"
             class="pspopup"
             mode="center"
             closeable
             @close="pswShow=false">
      <view class="t_tit">二级密码</view>
      <view class="box">
        <u--input border="surround"
                  type="password"
                  v-model="password"></u--input>
        <u-button type="success"
                  class="uBtn"
                  shape="circle"
                  loadingText="支付中"
                  @tap="surePsw"
                  color="linear-gradient(to right, #005BAC, #005BAC )">{{'立即支付'}} </u-button>
      </view>
    </u-popup>
    <view class="contents">
      <view class="height-auto">
        <view class="lines"></view>
        <view class="text">收货信息</view>
      </view>
      <u-form :model="addressForm"
              labelWidth="auto"
              ref="uForm">
        <view class="view-class">
          <u-form-item :label="'收货人'"
                       label-width="100px"
                       prop="recName">
            <u-input v-model="addressForm.recName"
                     placeholder-class="place-class"
                     class="border-color"
                     placeholder="请输入收货人姓名" />

          </u-form-item>
        </view>
        <view class="view-class">
          <u-form-item :label="'联系方式'"
                       label-width="100px"
                       prop="recPhone">
            <u-input v-model="addressForm.recPhone"
            :maxlength="userInfo.pkSettleCountry == 1?11:20"
            type="number"
                     placeholder-class="place-class"
                     class="border-color"
                     placeholder="请输入联系方式" />

          </u-form-item>
        </view>
        <view class="view-class"
              @click="getDiqu"
              style="height: 110rpx;display: flex;align-items: center;">
          <u-form-item :label="'收货地址'"
                       label-width="100px"
                       prop="recProvince">
            <view v-if="address"
                  style="font-size: 28rpx;color: #333;margin-left: 20rpx;">{{address}}</view>
            <view style="margin-left: 20rpx;font-size: 28rpx;color: rgb(192, 196, 204);"
                  v-else>请选择</view>
          </u-form-item>
          <view class="drop">
            <image src="../../static/images/drop.png"></image>
          </view>
        </view>
        <view class="view-class">
          <u-form-item :label="'详细地址'"
                       class="label-style"
                       label-width="100px"
                       prop="recAddress">
            <u-input v-model="addressForm.recAddress"
                     placeholder-class="place-class"
                     maxlength="200"
                     class="border-color"
                     :placeholder="'请输入详细地址'" />

          </u-form-item>
        </view>
        <view class="view-class">
          <u-form-item :label="'备注'"
                       label-width="100px"
                       prop="address">
            <u-input v-model="addressForm.remark"
                     placeholder-class="place-class"
                     class="border-color"
                     placeholder="" />
          </u-form-item>
        </view>
      </u-form>
    </view>
    <view style="margin-top: 20rpx;">
      <view class="height-auto bgcolors">
        <view class="lines color-styles"></view>
        <view class="text"
              style="color: #333;">商品信息</view>
      </view>
      <view style="background-color: #fff;">
        <view class="goods-info1"
              v-for="item in allData">
          <view class="goods-infot">
            <img :src="item.cover"
                 class="cover"
                 alt="">
            <view class="disFlex">
              <view style="color: #333;font-size: 28rpx;">{{ item.productName }}</view>
              <view style="color: #999;font-size: 22rpx;">X{{item.quantity}}</view>
            </view>
          </view>
          <view class="goods_infob" style="color: #999;font-size: 28rpx;">产品规格:{{ item.specsName }}</view>
        </view>
        <view class="goods-info"
              style="border: none;">
          <view style="color: #333;font-size: 28rpx;">{{'邮费'}}</view>
          <view style="color: #333;font-size: 24rpx;">￥{{postage}}</view>
        </view>
      </view>
    </view>
    <!-- 成功 -->
    <u-modal :show="showSucce"
             showConfirmButton
             :content='content'
             confirmColor='#DE3932'
             @confirm="reset"
             ref="uModal"
             :asyncClose="true"></u-modal>
    <!-- 二维码 -->
    <u-popup :show="wxPopup"
             mode="center"
             closeable
             @close="closewxPopup">
      <view class="t_tits">{{'微信支付'}}</view>
      <view class="pay_code">
        <div ref="qrCodeUrlWx"
             class="qrcode"></div>
      </view>
    </u-popup>
    <v-address ref="address"
               @getAddressData="AddressData"
               :defaultCode="defaultCode"
               @addressData="addressData"></v-address>
    <u-button type="success"
              shape="circle"
              class="btn"
              @click="paySubmit">购 买</u-button>
    <view style="height: 20rpx;"></view>
  </view>
</template>

<script>
var payStatus
import * as api from '@/config/pay.js'
import * as apis from '@/config/order.js'
import { setToken } from '@/config/auth.js'
import * as min from '@/config/balance.js'
import address from '@/components/address.vue'
import store from '@/store'
export default {
  data() {
    return {
      content: '支付成功',
      showSucce: false,
      paramsPost: {},
      wxPopup: false,
      postage: 0,
      password: '',
      pswShow: false,
      userInfo: '',
      check: false,
      address: '',
      defaultCode: [],
      urls: '/member/api/maker-space/update-file',
      addressForm: {
        recName: '',
        recPhone: '',
        recProvince: '',
        recCity: '',
        recCounty: '',
        recAddress: '',
        isDefault: 0,
        pkId: '',
        postage: 0,
      },
      num: 0,
      rules: {
        recName: [
          {
            // 必填项
            required: true,
            // 提示内容（会出现在u-form-item内的底部）
            message: '姓名不能为空',
          },
        ],
        recAddress: [
          {
            // 必填项
            required: true,
            // 提示内容（会出现在u-form-item内的底部）
            message: '详细地址不能为空',
          },
        ],
        recProvince: [
          {
            // 必填项
            required: true,
            // 提示内容（会出现在u-form-item内的底部）
            message: '地址不能为空',
          },
        ],
        recPhone: [
          {
            required: true,
            message: '请输入手机号',
            trigger: ['blur'],
          },
          {
            validator: (rule, value, callback) => {
              return this.$u.test.mobile(value);
            },
            message: "手机号格式不正确",
            trigger: ["blur"],
          },
        ],
      },
      allData: [],
    }
  },
  onLoad(option) {
    let allData = decodeURIComponent(window.location.href).split('=')
    this.num = allData[2].split('#')[0]
    // 幂等性
    this.getGenerate()
    this.getApiList()
    this.userInfo = uni.getStorageSync('User')
  },
  onUnload() {},
  onReady() {
    this.$refs.uForm.setRules(this.rules)
  },
  components: {
    'v-address': address,
  },
  methods: {
    getApiList() {
      let allData = decodeURIComponent(window.location.href).split('=')
      let num = allData[2].split('#')[0]
      apis
        .pickDetails({
          quantity: allData[2].split('#')[0],
          pkId: allData[1].split('&')[0],
        })
        .then((res) => {
          if (res.code == '200') {
            this.allData = res.data.detailList
          }
        })
    },
    getGenerate() {
      api.generate().then((res) => {
        uni.setStorageSync('mToken', res.msg)
      })
    },
    paySubmit() {
      this.$refs.uForm.validate().then((res) => {
        // this.pswShow = true
        let allData = decodeURIComponent(window.location.href).split('=')
        let obj = {
          quantity: allData[2].split('#')[0],
          pkId: allData[1].split('&')[0],
          recName: this.addressForm.recName,
          recPhone: this.addressForm.recPhone,
          recProvince: this.addressForm.recProvince,
          recCity: this.addressForm.recCity,
          recCounty: this.addressForm.recCounty,
          recAddress: this.addressForm.recAddress,
          remark: this.addressForm.remark,
        }
        api.payPickOrder(obj).then((res) => {
          if (res.code == 200) {
            // this.scanPayBfWx(8)
            this.pswShow = false
            let paramsPost = { orderCode: res.data, specialArea: 8 }
            uni.navigateTo({
              url:
                '/pages/pay/index?paramsPost=' +
                JSON.stringify(paramsPost) +
                '&businessType=1',
            })
            // this.paramsPost = { orderCode: res.data, specialArea: 8 }
          }
        })
      })
    },
    reset() {
      this.$store.dispatch('GetInfo').then((res) => {
        uni.reLaunch({
          url: '/pages/index/index',
        })
      })
    },
    // 查询订单状态
    checkPayStatus(data) {
      let that = this
      // 定时器
      payStatus = setInterval(() => {
        if (that.sucPay == 1) {
          // 清除定时器
          clearInterval(payStatus)
          this.wxPopup = false
          this.showSucce = true
        } else {
          api.payStatus(data).then((res) => {
            that.sucPay = res.data
          })
        }
      }, 2000)
    },
    closewxPopup() {
      this.wxPopup = false
      this.$refs.qrCodeUrlWx.innerHTML = ''
      clearInterval(payStatus)
    },
    scanPayBfWx(val) {
      let params = {
        businessType: this.businessType, //订单类型充值
        businessCode: this.orderCode,
        payChannel: val,
        payType: 2,
      }
      api.unifiedorder(params).then((res) => {
        this.wxPopup = true
        this.$nextTick(() => {
          new QRCode(
            this.$refs.qrCodeUrlWx,
            {
              width: 280,
              height: 280,
              text: res.data,
              colorDark: '#000000',
              colorLight: '#ffffff',
              correctLevel: QRCode.CorrectLevel.Q,
              textAlign: 'center',
            },
            1000
          )
        })
      })
      this.checkPayStatus(params)
    },
    getPostAge(data) {
      apis.pickPostAge(data).then((res) => {
        this.postage = res.data
        // this.totalAmont =
        //   parseFloat(this.allGoodsData.priceAmount) +
        //   parseFloat(res.data.postage)
      })
    },
    surePsw() {
      min
        .checkPwd({
          pwd: this.password,
        })
        .then((res) => {
          if (res.code == 200) {
            let allData = decodeURIComponent(window.location.href).split('=')
            let obj = {
              quantity: allData[2].split('#')[0],
              pkId: allData[1].split('&')[0],
              recName: this.addressForm.recName,
              recPhone: this.addressForm.recPhone,
              recProvince: this.addressForm.recProvince,
              recCity: this.addressForm.recCity,
              recCounty: this.addressForm.recCounty,
              recAddress: this.addressForm.recAddress,
              remark: this.addressForm.remark,
            }
            api
              .payPickOrder(obj)
              .then((res) => {
                if (res.code == 200) {
                  // this.scanPayBfWx(8)
                  this.pswShow = false
                  let paramsPost = { orderCode: res.data, specialArea: 8 }
                  uni.navigateTo({
                    url:
                      '/pages/pay/index?paramsPost=' +
                      JSON.stringify(paramsPost) +
                      '&businessType=1',
                  })
                  // this.paramsPost = { orderCode: res.data, specialArea: 8 }
                }
              })
              .catch((err) => {
                this.isLoading.close()
              })
          }
        })
    },
    AddressData(name) {
      this.address = name
    },
    getDiqu() {
      this.$refs.address.setShow()
    },
    addressData(diqu, obj) {
      this.address = diqu
      this.addressForm.recProvince = obj.province
      this.addressForm.recCity = obj.city
      this.addressForm.recCounty = obj.county
      let allData = decodeURIComponent(window.location.href).split('=')
      let data = {
        quantity: allData[2].split('#')[0],
        pkId: allData[1].split('&')[0],
        recProvince: obj.province,
        recCity: obj.city,
      }
      this.getPostAge(data)
      this.$forceUpdate()
      // this.getPostAge()
      // this.queryAdressPostage()
    },
    checkTap() {
      if (this.addressForm.isDefault == 0) {
        this.addressForm.isDefault = 1
      } else {
        this.addressForm.isDefault = 0
      }
    },
    getAddressData(e) {
      console.error(e)
    },
  },
}
</script>

<style lang="scss" scoped>
.pay_code {
  text-align: center;
  margin-top: 20px;
  padding: 20rpx;
  .qrcodeWx {
  }
}
.qrcode {
  display: inline-block;
  img {
    width: 132px;
    height: 132px;
    background-color: #fff; //设置白色背景色
    padding: 6px; // 利用padding的特性，挤出白边
    box-sizing: border-box;
  }
}
.t_tits {
  text-align: center;
  margin-top: 20px;
}
.goods-info {
  display: flex;
  justify-content: space-between;
  border-top: 1rpx solid #eee;
  border-bottom: 1rpx solid #eee;
  // background-color: #fff;
  height: 95rpx;
  line-height: 95rpx;
  padding: 0 30rpx;
  // width: 750rpx;
  margin: 0 20rpx;
}
.goods-info1 {
  // display: flex;
  // justify-content: space-between;
  border-top: 1rpx solid #eee;
  border-bottom: 1rpx solid #eee;
  // background-color: #fff;
  // height: 95rpx;
  // line-height: 95rpx;
  padding: 0 30rpx;
  // width: 750rpx;
  margin: 0 20rpx;
  .goods-infot{
    display: flex;
  }
  .goods_infob{
    padding: 10rpx 0;
  }
  .cover {
    width: 136rpx;
    height: 136rpx;
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 10rpx;
    margin-right: 10px;
    margin-top: 10px;
  }
  .disFlex {
    flex: 1;
    display: flex;
    // align-items: center;
    margin-top: 10px;
    justify-content: space-between;
  }
}
.color-styles {
  background-color: #e03030 !important;
}
.bgcolors {
  background-color: #fff !important;
}
.height-auto {
  height: 94rpx;
  background: #005BAC;
  line-height: 94rpx;
  padding: 0 25rpx;
  display: flex;
  align-items: center;
}
.lines {
  width: 6rpx;
  height: 24rpx;
  background: #ffffff;
}
.text {
  font-size: 28rpx;
  color: #fff;
  margin-left: 10rpx;
}
.pspopup {
  // padding: 30rpx;
  .t_tit {
    text-align: center;
    margin-top: 40rpx;
    font-weight: bold;
    font-size: 32rpx;
  }

  .c_tit {
    margin-bottom: 40rpx;
  }

  .box {
    padding: 40rpx 40rpx;
    text-align: center;
  }

  .uBtn {
    margin-top: 40rpx;
  }
}
:v-deep .u-form-item__body__right__message {
  margin-left: 215rpx !important;
  padding-bottom: 20rpx;
}
.drop {
  image {
    width: 40rpx;
    height: 40rpx;
    position: absolute;
    right: 0;
    top: 30rpx;
  }
}
.check {
  position: relative;
  view {
    width: 36rpx;
    height: 36rpx;
    border: 1rpx solid #dddddd;
    border-radius: 50%;
    margin-top: 25rpx;
  }
  image {
    width: 40rpx;
    height: 40rpx;
    position: absolute;
    right: 0rpx;
    top: 25rpx;
    // margin-top: 20rpx;
  }
}
.flex-s {
  justify-content: space-between;
  display: flex;
  height: 90rpx;
  line-height: 90rpx;
}
.label-style {
  display: block !important;
}
:v-deep .label-style .u-form-item__body__left {
  display: block !important;
  margin-top: 20rpx;
}
.uni-textarea {
  height: 100rpx;
}
.view-class {
  border-bottom: 1rpx solid #eee;
  margin: 0 30rpx;
  position: relative;
}
.border-color {
  border: none;
}
page {
  background-color: #f2f2f2;
}
.contents {
  background-color: #fff;
}
.btn {
  background-color: #005BAC;
  border: none;
  height: 92rpx;
  line-height: 92rpx;
  font-size: 30rpx;
  margin: 100rpx auto auto auto;
  width: 690rpx;
}
</style>