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">{{ '商品业绩' }}</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>{{ '商品业绩' }}{{ '总计' }}：</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>