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

<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" v-for="item in goodList">
        <view class="kuang_t">
          <view class="kuang_tl">
            <view class="sTit">{{ '商品主图' }}</view>
            <img :src="item.cover" alt="" />
            <view class="sTit">{{ '商品名称' }}</view>
            <view class="cTit">{{ item.productName }}</view>
          </view>
          <view class="kuang_tr">
            <view class="sTit">{{ '产品' }}</view>
            <view v-for="(ctem, index) in item.waresSkuList" :key="index">
              <view class="cTit">{{ ctem.specValueNames }} </view>
            </view>
          </view>
        </view>
        <view class="kuang_t">
          <view class="kuang_tl">
            <view class="sTit">{{ '商品业绩' }}(￥)</view>
            <view class="cTit">{{ item.waresPrice | numberToCurrency }}</view>
          </view>
          <view class="kuang_tr">
            <view class="sTit">{{ '商品业绩' }}</view>
            <view class="cTit">{{ item.pv | 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>{{ allDataObj.price | numberToCurrency }}</view>
        </view>
        <view class="disFlex just">
          <view>{{ '商品业绩总计' }}：</view>
          <view>{{ allDataObj.pv | 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" @click="toAgree"> 《{{ '购买协议' }}》</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 {
      postList: [],
      allGoodsData: {},
      allDataObj: {},
      goodList: [],
      defaultCode: [],
      specialArea: 21,
      form: {
        deliveryName: '快递发货',
        deliveryWay: 1,
        postage: 0,
        transType: 1,
      },
      deliList: [],
      diqu: '',
      allData: [],
      goodsNum: 1,
      checkboxValue1: [],
      priceAmount: 0, //商品总价
      achiveAmount: 0, //总业绩
      totalMont: 0,
      orderItemsParams: [],
      isLoading: false,
      hasChecked: '',
      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) {
    // this.allData = JSON.parse(options.allData)
    // this.hasChecked = options.hasChecked

    this.allData = JSON.parse(options.allData)
    console.log(
      '%c [ this.allData ]-248',
      'font-size:13px; background:#5a9c24; color:#9ee068;',
      this.allData
    )
    let confirmOrderWaresInfoParamsList = []
    this.hasChecked = options.hasChecked || ''
    this.allData.forEach(item => {
      item.waresSkuList.forEach(ctem => {
        confirmOrderWaresInfoParamsList.push({
          pkTWares: ctem.pkTWares,
          pkTWaresSku: ctem.pkTWaresSku || ctem.pkThWaresSku,
          quantity: item.quantity,
          source: item.source,
        })
      })
    })
    // 获取购物车详情
    this.getCatDetail(confirmOrderWaresInfoParamsList)
    this.getGenerate()
    this.valChange({ value: 1 })
  },
  onShow() {},
  methods: {
    getCatDetail(confirmOrderWaresInfoParamsList) {
      api
        .waresinfo({
          confirmOrderWaresInfoParamsList: confirmOrderWaresInfoParamsList,
        })
        .then(res => {
          this.goodList = res.data
          let price = 0
          let pv = 0
          this.goodList.forEach(item => {
            item.waresItemsParamList = []
            price += Number(item.priceAmount)
            pv += Number(item.pv)
            item.waresSkuList.forEach(ctem => {
              item.waresItemsParamList.push({
                pkWaresSpecsSku: ctem.pkId,
              })
            })
          })
          this.allDataObj.price = price
          this.allDataObj.pv = pv
          this.totalMont = price
          this.achiveAmount = pv
          this.totalAmont = this.allDataObj.price
          let arr = []
          this.goodList.forEach(item => {
            arr.push({
              channel: item.source,
              pkId: item.pkId,
              quantity: item.quantity,
              waresItemsParamList: item.waresItemsParamList,
            })
          })
          this.postList = arr
          this.allGoodsData.specialArea = 21
        })
    },
    addAdress() {
      uni.navigateTo({
        url: '/pages/address/index',
      })
    },
    toAgree() {
      // agreeMent
      this.$refs.agreement.openDig()
    },
    getGenerate() {
      api.generate().then(res => {
        uni.setStorageSync('mToken', res.msg)
      })
    },
    goBuy() {
      if (this.checkboxValue1.length == 0) {
        uni.showToast({
          title: '请阅读并同意购买协议',
          icon: 'none',
          duration: 1500,
        })
        return
      }
      this.$refs.uForm.validate().then(res => {
        this.isLoading = true
        api
          .confirmShareOrder(
            Object.assign({}, this.form, {
              orderItemsParams: this.postList,
              specialArea: 21,
            })
          )
          .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 = {
        channel: this.allData.source,
        pkId: this.allData.pkId,
        quantity: this.goodsNum,
        waresItemsParamList: [
          {
            pkWaresSpecsSku: this.hasChecked,
          },
        ],
      }
      this.orderItemsParams = [carList]
    },
    checkboxChange() {},
    valChange(e) {
      this.goodsNum = e.value
      this.priceAmount = this.allData.waresPrice * this.goodsNum
      this.achiveAmount = this.allData.waresAchieve * this.goodsNum
      this.totalMont = this.priceAmount.toFixed(3)
      this.setGoodlistType()
      if (this.form.recProvince) {
        this.queryAdressPostage()
      }
    },
    getDiqu() {
      this.$refs.address.setShow()
    },
    confirmPopup() {},
    queryAdressPostage() {
      api
        .queryAdressPostage(
          Object.assign({}, this.form, {
            orderItemsParams: this.postList,
          })
        )
        .then(res => {
          this.form.postage = Number(res.data.postage).toFixed(2)
          this.totalMont =
            parseFloat(this.allDataObj.price) + 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>