734 lines
17 KiB
Vue
734 lines
17 KiB
Vue
<!--
|
|
* @Descripttion:
|
|
* @version:
|
|
* @Author: kBank
|
|
* @Date: 2022-11-21 15:11:22
|
|
-->
|
|
<template>
|
|
<view class="content">
|
|
<!-- <view class="index_header">
|
|
|
|
</view> -->
|
|
|
|
<view class="context">
|
|
<view class="subTxt">
|
|
<view class="subTxt1">{{ '会员信息' }}</view>
|
|
</view>
|
|
<u-form :model="form" labelWidth="75" :rules="rules" ref="uForm">
|
|
<view class="kuang">
|
|
<u-form-item
|
|
:label="'会员姓名'"
|
|
prop="memberName"
|
|
borderBottom
|
|
required
|
|
>
|
|
<u-input
|
|
:placeholder="'请输入会员姓名'"
|
|
v-model.trim="form.memberName"
|
|
border="none"
|
|
/>
|
|
</u-form-item>
|
|
<u-form-item :label="'联系方式'" prop="phone" borderBottom required>
|
|
<u-input
|
|
:placeholder="'请输入联系方式'"
|
|
type="number"
|
|
v-model.trim="form.phone"
|
|
:maxlength="user.pkSettleCountry == 1 ? 11 : 20"
|
|
border="none"
|
|
/>
|
|
</u-form-item>
|
|
|
|
<!-- <u-form-item :label="'运输方式'" borderBottom>
|
|
<view class="pickerHui">
|
|
<u-input
|
|
v-model="form.transTypeVal"
|
|
disabled
|
|
border="none"
|
|
></u-input>
|
|
</view>
|
|
</u-form-item> -->
|
|
<!-- <u-form-item :label="'发货方式'" borderBottom>
|
|
<view class="pickerHui">
|
|
<u-input
|
|
v-model="form.deliveryName"
|
|
disabled
|
|
:placeholder="'请选择发货方式'"
|
|
border="none"
|
|
></u-input>
|
|
</view>
|
|
</u-form-item> -->
|
|
</view>
|
|
<view class="subTxt">
|
|
<view class="subTxt1">收货人信息</view>
|
|
</view>
|
|
<view class="kuang">
|
|
<view class="disFlex tit_t">
|
|
<view></view>
|
|
</view>
|
|
<u-form-item :label="'收货人'" prop="recName" borderBottom required>
|
|
<u-input
|
|
v-model.trim="form.recName"
|
|
:placeholder="'请输入收货人'"
|
|
border="none"
|
|
/>
|
|
</u-form-item>
|
|
<u-form-item
|
|
:label="'收货电话'"
|
|
prop="recPhone"
|
|
borderBottom
|
|
required
|
|
>
|
|
<u-input
|
|
v-model.trim="form.recPhone"
|
|
type="number"
|
|
maxlength="20"
|
|
:placeholder="'请输入收货电话'"
|
|
border="none"
|
|
/>
|
|
</u-form-item>
|
|
<u-form-item
|
|
:label="'收货地址'"
|
|
prop="diqu"
|
|
@click="getDiqu"
|
|
required
|
|
borderBottom
|
|
>
|
|
<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
|
|
required
|
|
:label="'详细地址'"
|
|
prop="recAddress"
|
|
borderBottom
|
|
>
|
|
<u--textarea
|
|
v-model.trim="form.recAddress"
|
|
maxlength="200"
|
|
:placeholder="'请输入详细地址'"
|
|
></u--textarea>
|
|
</u-form-item>
|
|
<u-form-item :label="'邮费'" borderBottom>
|
|
<u-input disabled v-model="form.postage" />
|
|
</u-form-item>
|
|
<u-form-item :label="'备注'" borderBottom>
|
|
<u--textarea
|
|
v-model="form.remark"
|
|
:placeholder="'请输入备注'"
|
|
></u--textarea>
|
|
</u-form-item>
|
|
</view>
|
|
</u-form>
|
|
<view class="subTxt">
|
|
<view class="subTxt1">商品信息</view>
|
|
</view>
|
|
<view class="goodList">
|
|
<view class="goodList_i">
|
|
<view class="goodList_it">
|
|
<img :src="allData.cover1" class="cover" alt="" />
|
|
<view class="goodList_ir">
|
|
<view class="goodList_ib">
|
|
<view class="tit1">
|
|
{{ allData.waresName }}
|
|
</view>
|
|
<view class="tit5"> x{{ allData.quantity }} </view>
|
|
</view>
|
|
<view class="goodList_ib">
|
|
<view class="tit2">
|
|
{{ allData.waresPrice | numberToCurrency }}
|
|
</view>
|
|
<!-- <view class="tit3">业绩: {{ item.achieve | numberToCurrency | isLocal}}</view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view
|
|
v-for="(item, sndex) in allData.specsSkuParamsList"
|
|
:key="sndex"
|
|
class="product_i"
|
|
>
|
|
<img :src="item.cover" alt="" />
|
|
<view class="product_il">
|
|
<view class="tit4"
|
|
>{{ item.productName }} {{ item.specsName }}</view
|
|
>
|
|
<view class="tit5">x{{ item.quantity }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="fen">
|
|
<!-- <view class="disFlex justBwn">
|
|
<view class="tit3">{{'商品业绩'}}</view>
|
|
<view class="tit1">{{ item.achieveAmount | numberToCurrency}}</view>
|
|
</view> -->
|
|
<view class="disFlex justBwn">
|
|
<view class="tit3">{{ '金额小计' }}</view>
|
|
<view class="tit1">{{
|
|
allData.waresPrice | numberToCurrency
|
|
}}</view>
|
|
</view>
|
|
</view>
|
|
</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">{{ allData.waresPrice | 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>
|
|
<!-- 选择国家 -->
|
|
<u-picker
|
|
:show="isCountry"
|
|
@cancel="isCountry = false"
|
|
@confirm="sureCountry"
|
|
:columns="countryList"
|
|
keyName="label"
|
|
></u-picker>
|
|
<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 * as regiest from '@/config/regiest'
|
|
|
|
export default {
|
|
components: {
|
|
'v-address': address,
|
|
},
|
|
data() {
|
|
return {
|
|
specialArea: 7,
|
|
isCountry: false,
|
|
defaultCode: [],
|
|
form: {
|
|
deliveryName: '快递发货',
|
|
deliveryWay: 1,
|
|
postage: 0,
|
|
transType: 1,
|
|
transTypeVal: '陆运',
|
|
pkSettleCountry: '',
|
|
pkSettleCountryLabel: '',
|
|
pkSettleCountryImg: '',
|
|
pkCountry: '',
|
|
pkCountryLabel: '',
|
|
pkCountryImg: '',
|
|
},
|
|
deliList: [],
|
|
diqu: '',
|
|
allData: [],
|
|
goodsNum: 1,
|
|
agreementShow: [],
|
|
priceAmount: 0, //商品总价
|
|
achiveAmount: 0, //总业绩
|
|
totalMont: 0,
|
|
waresList: [],
|
|
isLoading: false,
|
|
centerCodeId: '',
|
|
rules: {
|
|
memberName: [
|
|
{
|
|
required: true,
|
|
message: '请输入会员姓名',
|
|
trigger: ['blur'],
|
|
},
|
|
],
|
|
phone: [{ validator: this.phonePass, trigger: ['blur'] }],
|
|
recName: [
|
|
{
|
|
required: true,
|
|
message: '请输入收货人',
|
|
trigger: ['change', 'blur'],
|
|
},
|
|
],
|
|
recPhone: [
|
|
{
|
|
required: true,
|
|
message: '请输入收货电话',
|
|
trigger: ['change', 'blur'],
|
|
},
|
|
{
|
|
min: 6,
|
|
message: '请输入正确联系电话',
|
|
trigger: 'blur',
|
|
},
|
|
{
|
|
max: 20,
|
|
message: '请输入正确联系电话',
|
|
trigger: 'blur',
|
|
},
|
|
],
|
|
diqu: [
|
|
{
|
|
required: true,
|
|
message: '请选择收货地址',
|
|
trigger: ['change', 'blur'],
|
|
},
|
|
],
|
|
recAddress: [
|
|
{
|
|
required: true,
|
|
message: '请输入详细地址',
|
|
trigger: ['change', 'blur'],
|
|
},
|
|
],
|
|
},
|
|
countryList: [],
|
|
placeParent: '',
|
|
user: '',
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
this.user = uni.getStorageSync('User')
|
|
this.centerCodeId = this.user.memberCode
|
|
this.pkCountry = 1
|
|
this.allData = JSON.parse(options.allData)
|
|
console.log(
|
|
'%c [ this.allData ]-336',
|
|
'font-size:13px; background:#f67b85; color:#ffbfc9;',
|
|
this.allData
|
|
)
|
|
this.placeParent = uni.getStorageSync('placeParent')
|
|
this.allData.quantity = 1
|
|
this.setGoodlistType()
|
|
this.getGenerate()
|
|
this.getCountry()
|
|
// 发货方式
|
|
// this.getDeliveryList()
|
|
},
|
|
onShow() {},
|
|
methods: {
|
|
phonePass(rule, value, callback) {
|
|
if (!value) {
|
|
callback(new Error('请输入联系电话'))
|
|
return false
|
|
}
|
|
if (value.length < 6 || value.length > 20) {
|
|
callback(new Error('请输入正确联系方式'))
|
|
return false
|
|
} else {
|
|
regiest
|
|
.validPhone({
|
|
memberName: this.form.memberName,
|
|
phone: this.form.phone,
|
|
placeParent: this.placeParent,
|
|
})
|
|
.then(res => {
|
|
if (res.code == 200) {
|
|
callback()
|
|
} else {
|
|
callback(new Error(res.msg))
|
|
}
|
|
})
|
|
}
|
|
},
|
|
getCountry() {
|
|
regiest.countryList().then(res => {
|
|
let data = res.data.map(item => {
|
|
return {
|
|
img: item.nationalFlag2,
|
|
id: item.pkId,
|
|
label: item.shortName,
|
|
}
|
|
})
|
|
this.countryList = [data]
|
|
this.countryList[0].forEach(item => {
|
|
if (item.id == this.pkCountry) {
|
|
this.form.pkSettleCountry = item.id
|
|
this.form.pkSettleCountryLabel = item.label
|
|
this.form.pkSettleCountryImg = item.img
|
|
this.form.pkCountry = item.id
|
|
this.form.pkCountryLabel = item.label
|
|
this.form.pkCountryImg = item.img
|
|
}
|
|
// if (item.id == this.userInfo.pkCountry) {
|
|
// this.form.pkCountry = item.id
|
|
// this.form.pkCountryLabel = item.label
|
|
// this.form.pkCountryImg = item.img
|
|
// }
|
|
})
|
|
})
|
|
},
|
|
changeCountry(index) {
|
|
this.isCountry = true
|
|
this.countryIndex = index
|
|
},
|
|
sureCountry(e) {
|
|
console.log(
|
|
'%c [ e ]-418',
|
|
'font-size:13px; background:#b131b9; color:#f575fd;',
|
|
e
|
|
)
|
|
const { value } = e
|
|
this.form.pkCountry = value[0].id
|
|
this.form.pkCountryLabel = value[0].label
|
|
this.form.pkCountryImg = value[0].img
|
|
this.isCountry = false
|
|
},
|
|
// addAdress() {
|
|
// uni.navigateTo({
|
|
// url: '/pages/address/index',
|
|
// })
|
|
// },
|
|
|
|
getGenerate() {
|
|
api.generate().then(res => {
|
|
uni.setStorageSync('mToken', res.msg)
|
|
})
|
|
},
|
|
goBuy() {
|
|
this.$refs.uForm.validate().then(res => {
|
|
this.isLoading = true
|
|
api
|
|
.fansConfirm(
|
|
Object.assign({}, this.form, {
|
|
waresList: this.waresList,
|
|
})
|
|
)
|
|
.then(res => {
|
|
this.isLoading = false
|
|
if (res.code == 200) {
|
|
uni.navigateTo({
|
|
url: '/pages/pay/hiPay?paramsPost=' + JSON.stringify(res.data),
|
|
})
|
|
}
|
|
})
|
|
})
|
|
},
|
|
setGoodlistType() {
|
|
let carList = {
|
|
quantity: 1,
|
|
pkWares: this.allData.pkId,
|
|
skuList: [],
|
|
}
|
|
console.log(
|
|
'%c [ carList ]-419',
|
|
'font-size:13px; background:#b131b9; color:#f575fd;',
|
|
this.allData
|
|
)
|
|
this.allData.productGroup.forEach(item => {
|
|
carList.skuList.push({
|
|
pkWaresSku: item.pkSkuId,
|
|
quantity: item.quantity,
|
|
})
|
|
})
|
|
this.waresList = [carList]
|
|
},
|
|
checkboxChange() {},
|
|
getDiqu() {
|
|
this.$refs.address.setShow()
|
|
},
|
|
confirmPopup() {},
|
|
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%;
|
|
padding: 6px 9px;
|
|
}
|
|
.pickerHui {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
|
|
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;
|
|
}
|
|
.justBwn {
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
}
|
|
.countImg {
|
|
width: 62rpx;
|
|
height: 41rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
.ge {
|
|
padding: 6px 9px;
|
|
border: 0.5px solid #dadbde;
|
|
border-radius: 4px;
|
|
font-size: 16px;
|
|
}
|
|
.hui {
|
|
background: #f5f7fa;
|
|
}
|
|
.subTxt {
|
|
background: #005bac;
|
|
font-size: 28rpx;
|
|
font-family: Source Han Sans CN;
|
|
font-weight: bold;
|
|
color: #fff;
|
|
padding: 35rpx 27rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.subTxt1 {
|
|
border-left: 4px solid #fff;
|
|
padding: 0 20rpx;
|
|
}
|
|
.subTxt2 {
|
|
display: flex;
|
|
align-items: center;
|
|
view {
|
|
margin-left: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
.goodList {
|
|
display: flex;
|
|
padding: 20rpx;
|
|
border-bottom: 1px solid #eee;
|
|
background: #fff;
|
|
}
|
|
.cover {
|
|
width: 136rpx;
|
|
height: 136rpx;
|
|
background: #ffffff;
|
|
border: 1px solid #eeeeee;
|
|
border-radius: 10rpx;
|
|
}
|
|
.goodList_i {
|
|
flex: 1;
|
|
}
|
|
.goodList_it {
|
|
display: flex;
|
|
padding: 0rpx 0 20rpx 0rpx;
|
|
|
|
.goodList_ir {
|
|
margin-left: 20rpx;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
.goodList_ib {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
img {
|
|
width: 56rpx;
|
|
height: 56rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.product_i {
|
|
display: flex;
|
|
align-items: center;
|
|
background: #f6f6f6;
|
|
padding: 28rpx;
|
|
.product_il {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: 1;
|
|
justify-content: space-between;
|
|
margin-left: 20rpx;
|
|
}
|
|
img {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
background: #ffffff;
|
|
border: 1px solid #dddddd;
|
|
border-radius: 10rpx;
|
|
}
|
|
}
|
|
.fen {
|
|
background: #f6f6f6;
|
|
padding: 0 28rpx 28rpx 28rpx;
|
|
}
|
|
.u-form-item {
|
|
::v-deep .u-form-item__body {
|
|
padding: 20rpx 30rpx !important;
|
|
}
|
|
}
|
|
</style>
|