web-store-retail-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: [],
      orderCode: '',
    }
  },
  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 => {
        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,
        }
        // this.pswShow = true
        api.payPickOrder(obj).then(res => {
          if (res.code == 200) {
            // this.scanPayBfWx(8)

            this.orderCode = res.data
            this.pswShow = true
            // 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 = {
              orderCode: this.orderCode,
              specialArea: 8,
              payPwd: this.password,
              pkSettleCountry: this.pkCountry || 1,
              pkCountry: this.pkCountry || 1,
            }
            api
              .payOthOrder(obj)
              .then(res => {
                if (res.code == 200) {
                  this.pswShow = false
                  uni.showToast({
                    title: '提货成功',
                    icon: 'none',
                  })
                  setTimeout(() => {
                    uni.reLaunch({
                      url: '/pages/mine/order/index',
                    })
                  }, 500)
                  // 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>