web-base-h5/pages/shareArea/orderShare.vue

<!--
 * @Descripttion: 
 * @version: 
 * @Author: kBank
 * @Date: 2022-11-21 15:11:22
-->
<template>
  <view class="content">
    <view class="index_header">

    </view>
    <view class="context">
      <u-form :model="form"
              labelAlign="right"
              labelWidth="75"
              :rules="rules"
              ref="uForm">
        <view class="kuang">
          <u-form-item :label="'发货方式'">
            <view class="pickerHui">
              <u-input v-model="form.deliveryName"
                       disabled
                       :placeholder="'请选择发货方式'"
                       border="none"></u-input>
              <u-icon name="arrow-down"></u-icon>
            </view>
          </u-form-item>
        </view>

        <view class="kuang">
          <view class="disFlex tit_t">
            <view></view>
            <!-- <view class="lan" @click="addAdress">新增收货人地址</view> -->
          </view>
          <u-form-item :label="'收货人'"
                       prop="recName">
            <u-input v-model.trim="form.recName"
                     :placeholder="'请输入收货人'" />
          </u-form-item>
          <u-form-item :label="'收货电话'"
                       prop="recPhone">
            <u-input v-model.trim="form.recPhone" maxlength="20"
            type="number"
                     :placeholder="'请输入收货电话'" />
          </u-form-item>
          <u-form-item :label="'收货地址'"
                       prop="diqu"
                       @click='getDiqu'>
            <view class="picker">
              <u-input v-model.trim="form.diqu"
                       :placeholder="'请选收货地址'"
                       border="none"></u-input>
              <u-icon name="arrow-down"></u-icon>
            </view>
          </u-form-item>
          <u-form-item :label="'详细地址'"
                       prop="recAddress">
            <u--textarea v-model.trim="form.recAddress"
            maxlength="200"
                         :placeholder="'请输入详细地址'"></u--textarea>

          </u-form-item>
          <u-form-item :label="'邮费'">
            <u-input disabled
                     v-model="form.postage" />
          </u-form-item>
          <u-form-item :label="'备注'">
            <u--textarea v-model="form.remark"
                         :placeholder="'请输入备注'"></u--textarea>
          </u-form-item>
        </view>
      </u-form>
      <view class="kuang">
        <view class="kuang_t">
          <view class="kuang_tl">
            <view class="sTit">{{'商品主图'}}</view>
            <img :src="allData.cover"
                 alt="">
            <view class="sTit">{{'商品名称'}}</view>
            <view class="cTit">{{ allData.waresName }}</view>
          </view>
          <view class="kuang_tr">
            <view class="sTit">{{'产品'}}</view>
            <view v-for="item,index in allData.productParams"
                  :key="index">
              <view v-for="ctem,cndex in item.waresItemsParamsList"
                    v-if="ctem.quantity>0"
                    :key="cndex"
                    class="cTit">
                {{ item.productName }}{{ ctem.specsName }}*{{ ctem.quantity }}
              </view>
            </view>
          </view>
        </view>
        <view class="kuang_t">
          <view class="kuang_tl">
            <view class="sTit">{{'商品业绩'}}(￥)</view>
            <view class="cTit">{{ allData.goodsPrice | numberToCurrency }}</view>
          </view>
          <view class="kuang_tr">
            <view class="sTit">{{'商品业绩'}}(PV)</view>
            <view class="cTit">{{ allData.goodsAchive | numberToCurrency }}</view>
          </view>
        </view>
        <view class="kuang_t">
          <view class="kuang_tl">
            <view class="sTit">{{'商品数量'}}</view>
            <u-number-box :min="1"
                          v-model="goodsNum"
                          @change="valChange"></u-number-box>
          </view>
          <view></view>
        </view>
      </view>
      <view class="kuang">
        <view class="disFlex just">
          <view>{{'商品金额总计'}}(¥)：</view>
          <view>{{ priceAmount | numberToCurrency}}</view>
        </view>
        <view class="disFlex just">
          <view>{{'商品业绩'}}{{'总计'}}(PV)：</view>
          <view>{{ achiveAmount | numberToCurrency}}</view>
        </view>
        <view class="disFlex just">
          <view>{{'邮费'}}：</view>
          <view>{{ form.postage | numberToCurrency}}</view>
        </view>
      </view>
      <view class="kuang disFlex">
        <u-checkbox-group v-model="checkboxValue1"
                          @change="checkboxChange">
          <u-checkbox :name="1">
          </u-checkbox>
        </u-checkbox-group>
        <view class="tit3">{{'请阅读并同意'}}</view>
        <view class="tit2"> 《{{'购买协议'}}》</view>
      </view>
    </view>
    <!-- 占空 -->
    <view style="height:150rpx"></view>
    <!-- 底部 -->
    <view class="footer_f">
      <view class="footer">
        <view class="footer_l">
          <view class="disFlex">
            <view class="h1">{{'总价'}}</view>
            <view class="r1">¥{{ totalMont  | numberToCurrency}}</view>
          </view>
          <view class="disFlex">
            <view class="h1">{{'业绩'}}</view>
            <view class="l1">¥{{ achiveAmount | numberToCurrency}}</view>
          </view>
        </view>
        <view class="footer_r">
          <u-button type="success"
                    class="uBtn"
                    shape="circle"
                    :loading="isLoading"
                    :loadingText="'购买中'"
                    @tap="goBuy"
                    color="linear-gradient(to right, #005BAC, #005BAC )">{{'立即购买'}} </u-button>

        </view>
      </view>
    </view>

    <agreement ref="agreement"></agreement>
    <v-address ref="address"
               :defaultCode="defaultCode"
               @addressData="addressData"></v-address>

  </view>
</template>

<script>
import address from '@/components/address.vue'
import * as api from '@/config/goods'

import agreement from '@/components/agreement.vue'
export default {
  components: {
    'v-address': address,
    agreement,
  },
  data() {
    return {
      specialArea: 7,

      defaultCode: [],
      form: {
        deliveryName: '快递发货',
        deliveryWay: 1,
        postage: 0,
        transType: 1,
      },
      deliList: [],
      diqu: '',
      allData: [],
      goodsNum: 1,
      checkboxValue1: [],
      priceAmount: 0, //商品总价
      achiveAmount: 0, //总业绩
      totalMont: 0,
      orderItemsParams: [],
      isLoading: false,
      centerCodeId: '',
      rules: {
        recName: [
          {
            required: true,
            message: '请输入收货人',
            trigger: ['change', 'blur'],
          },
        ],
        recPhone: [
          {
            required: true,
            message: '请输入收货电话',
            trigger: ['change', 'blur'],
          },
        ],
        diqu: [
          {
            required: true,
            message: '请选择收货地址',
            trigger: ['change', 'blur'],
          },
        ],
        recAddress: [
          {
            required: true,
            message: '请输入详细地址',
            trigger: ['change', 'blur'],
          },
        ],
      },
    }
  },
  onLoad(options) {
    let user = uni.getStorageSync('User')
    this.centerCodeId = user.memberCode
    this.allData = JSON.parse(options.allData)
    this.getGenerate()
    this.valChange({ value: 1 })
    // 发货方式
    // this.getDeliveryList()
  },
  onShow() {},
  methods: {
    addAdress() {
      uni.navigateTo({
        url: '/pages/address/index',
      })
    },
    toAgree() {
      // agreeMent
      this.$refs.agreement.openDig()
    },
    getGenerate() {
      api.generate().then((res) => {
        uni.setStorageSync('mToken', res.msg)
      })
    },
    goBuy() {
      this.$refs.uForm.validate().then((res) => {
        this.isLoading = true
        api
          .confirmFunShareOrder(
            Object.assign({}, this.form, {
              orderItemsParams: this.orderItemsParams,
              specialArea: this.specialArea,
            })
          )
          .then((res) => {
            this.isLoading = false
            if (res.code == 200) {
              uni.navigateTo({
                url:
                  '/pages/pay/index?paramsPost=' +
                  JSON.stringify(res.data) +
                  '&businessType=1',
              })
            }
          })
      })
    },
    setGoodlistType() {
      let carList = {
        quantity: this.goodsNum,
        waresCode: this.allData.waresCode,
        waresItemsParamList: [],
      }
      this.allData.productParams.forEach((item) => {
        item.waresItemsParamsList.forEach((ctem) => {
          if (ctem.quantity != 0) {
            carList.waresItemsParamList.push({
              pkWaresSpecsSku: ctem.pkSkuId,
              quantity: ctem.quantity,
            })
          }
        })
      })
      this.orderItemsParams = [carList]
    },
    checkboxChange() {},
    valChange(e) {
      this.goodsNum = e.value
      this.priceAmount = this.allData.goodsPrice * this.goodsNum
      this.achiveAmount = this.allData.goodsAchive * this.goodsNum
      this.totalMont = this.priceAmount
      this.setGoodlistType()
      if (this.form.recProvince) {
        this.queryAdressPostage()
      }
    },
    getDiqu() {
      this.$refs.address.setShow()
    },
    confirmPopup() {},
    queryAdressPostage() {
      api
        .queryAdressPostage(
          Object.assign({}, this.form, {
            orderItemsParams: this.orderItemsParams,
          })
        )
        .then((res) => {
          this.form.postage = Number(res.data.postage).toFixed(2)
          this.totalMont =
            parseFloat(this.priceAmount) + parseFloat(res.data.postage)
          this.totalMont = this.totalMont.toFixed(3)
        })
    },
    addressData(diqu, obj) {
      this.form.diqu = diqu
      this.form.recProvince = obj.province
      this.form.recCity = obj.city
      this.form.recCounty = obj.county
      this.$forceUpdate()
      this.setGoodlistType()
      this.queryAdressPostage()
    },
  },
}
</script>

<style lang="scss" scoped>
.content {
  background: #f9f9f9;
}
.index_header {
  background: #f9f9f9;;
  height: 330rpx;
}
.context {
  position: relative;
  padding: 24rpx;
  margin-top: -360rpx;
}
.disFlex {
  display: flex;
  align-items: center;
}
.just {
  justify-content: space-between;
  font-size: 12px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  margin-bottom: 10rpx;
}
.kuang {
  margin-top: 20rpx;
  padding: 20rpx 40rpx;
  background: #fff;
  box-shadow: 0px 2px 10px 0px rgba(204, 204, 204, 0.5);
  border-radius: 10px 10px 10px 10px;
  .tit_t {
    justify-content: space-between;
    font-size: 14px;
    font-family: PingFang SC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333333;
  }
  .lan {
    font-size: 10px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #289fff;
  }
}
.picker {
  display: flex;
  justify-content: space-between;
  width: 100%;
  border-width: 0.5px !important;
  border-color: #dadbde !important;
  border-style: solid;
  border-radius: 4px;
  padding: 6px 9px;
}
.pickerHui {
  display: flex;
  justify-content: space-between;
  width: 100%;
  border-width: 0.5px !important;
  border-color: #dadbde !important;
  border-style: solid;
  border-radius: 4px;
  padding: 6px 9px;
  background: #f5f7fa;
}
.kuang_t {
  display: flex;
  .kuang_tl {
    flex: 1;
    img {
      width: 40px;
      height: 40px;
      border-radius: 6px 6px 6px 6px;
    }
  }
  .kuang_tr {
    flex: 1;
  }
}
.sTit {
  font-size: 12px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #999999;
  margin: 14rpx 0;
}
.cTit {
  font-size: 13px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;

  margin-bottom: 14rpx;
}
.footer_f {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 10;
  box-shadow: 0px -2px 20px 0px rgba(204, 204, 204, 0.5);
}
.footer {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 24rpx 40rpx 20rpx;
  background: #fff;
  .footer_l {
  }
  .footer_r {
    // flex: 1;
    display: flex;
    align-items: center;
    font-size: 20rpx;
    font-weight: 500;
    color: #333333;
  }
}
.h1 {
  font-size: 10px;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  margin-right: 20rpx;
}
.r1 {
  font-size: 18px;
  font-family: PingFang SC-Semibold, PingFang SC;
  font-weight: 600;
  color: #ed4623;
}
.l1 {
  font-size: 16px;
  font-family: PingFang SC-Semibold, PingFang SC;
  font-weight: 600;
  color: #384a8a;
}
.tit2 {
  font-size: 26rpx;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #005BAC;
}
.tit3 {
  font-size: 26rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #333;
}
</style>