328 lines
10 KiB
Vue
328 lines
10 KiB
Vue
<template>
|
||
<view>
|
||
<view class="list">
|
||
<view class="address-section">
|
||
<view class="order-content" @click="selectAddress">
|
||
<image src="/static/user/addr.png" mode="" class="img"></image>
|
||
<view class="cen" v-if="form.shippingFullName">
|
||
<view class="top">
|
||
<text class="name">{{ form.shippingFullName }}</text>
|
||
<text class="mobile">{{ form.shippingMobile }}</text>
|
||
</view>
|
||
<text class="address">{{ form.shippingAdcodeThree | filterAddr}}{{form.shippingDetailed}}{{form.shippingAddressSupplement}}</text>
|
||
</view>
|
||
<view class="cen" v-else>
|
||
<text>请选择发货地址</text>
|
||
</view>
|
||
<text class="iconfont icon-right"></text>
|
||
</view>
|
||
</view>
|
||
<!-- <view class="list-item">
|
||
<text class="label">
|
||
<text class="color-red">*</text>
|
||
发货地址：
|
||
</text>
|
||
<view class="flex flex-align-center color-b9" @click="selectAddress">
|
||
<text v-if="!form.shippingAdcodeThree">请选择</text>
|
||
<text v-else>{{form.shippingAdcodeThree | filterAddr}}</text>
|
||
<text class="iconfont font40"></text>
|
||
</view>
|
||
</view> -->
|
||
<!-- <view class="list-item">
|
||
<text class="color-w">*</text>
|
||
<input type="text" placeholder="详细地址" disabled v-model="form.shippingDetailed" class="flex-grow input">
|
||
</view> -->
|
||
<!-- <view class="list-item">
|
||
<text class="label">
|
||
<text class="color-w">*</text>
|
||
是否包邮：
|
||
</text>
|
||
<switch color="#F8D247" @change="switchChange($event, 'freeShipping')" class="switch" />
|
||
</view>
|
||
<view class="list-item" v-if="form.freeShipping === 2">
|
||
<text class="label">
|
||
<text class="color-red">*</text>
|
||
邮费：
|
||
</text>
|
||
<input type="number" placeholder="邮费" v-model="form.postageTemplateId" class="flex-grow input">
|
||
</view> -->
|
||
<view class="list-item" v-if="form.goodsType !== 2 && false">
|
||
<text class="label" >
|
||
<text class="color-w">*</text>
|
||
无需配送：
|
||
</text>
|
||
<switch color="#F8D247" :checked="form.deliveryNo === 1 ?true:false" @change="switchChange($event, 'deliveryNo')" class="switch" />
|
||
</view>
|
||
<block v-if="form.deliveryNo === 2">
|
||
<view class="list-item" v-if="false">
|
||
<text class="label">
|
||
<text class="color-w">*</text>
|
||
商家配送：
|
||
</text>
|
||
<switch color="#F8D247" :checked="form.deliveryBusiness === 1 ?true:false" @change="switchChange($event, 'deliveryBusiness')" class="switch" />
|
||
</view>
|
||
<view class="list-item" v-if="false">
|
||
<text class="label">
|
||
<text class="color-w">*</text>
|
||
平台配送：
|
||
</text>
|
||
<switch color="#F8D247" :checked="form.deliveryPlatform === 1 ?true:false" :disabled="form.goodsType === 2" @change="switchChange($event, 'deliveryPlatform')" class="switch" />
|
||
</view>
|
||
<!-- 开启平台配送 并且 商品类型不是 精品商品 才显示 -->
|
||
<view class="list-item" style="height: auto;" v-if="form.deliveryPlatform === 1 && form.goodsType != 2">
|
||
<text class="font26 color-b9" v-if="false">
|
||
配送员配送费：￥{{(parseFloat(form.wholesalePrice)*(parseFloat(form.bonusProfit)/100)*(parseFloat(distributionFee)/100)).toFixed(2)}} {{(parseFloat(form.wholesalePrice)*(parseFloat(form.bonusProfit)/100)*(parseFloat(distributionFee)/100))<1 ? ' ，配送费过低，可能导致无人接单配送，可去“商品信息”增加“商品分润比例”提高配送费。':''}}
|
||
配送费计算方式：商品零售价(￥{{form.wholesalePrice}})*商品分润比例({{form.bonusProfit}}%)*配送员佣金比例({{distributionFee}}%)。
|
||
</text>
|
||
</view>
|
||
<view class="list-item" v-if="false">
|
||
<text class="label">
|
||
<text class="color-w">*</text>
|
||
用户自提：
|
||
</text>
|
||
<switch color="#F8D247" :checked="form.deliverySelfraising === 1 ?true:false" @change="switchChange($event, 'deliverySelfraising')" class="switch" />
|
||
</view>
|
||
<view class="list-item bor-no">
|
||
<text class="label">
|
||
<text class="color-w">*</text>
|
||
快递邮寄：
|
||
</text>
|
||
<switch color="#F8D247" :checked="form.deliveryExpress === 1 ?true:false" @change="switchChange($event, 'deliveryExpress')" class="switch" />
|
||
</view>
|
||
|
||
</block>
|
||
<view class="list-item bor-no">
|
||
<text class="label">
|
||
<text class="color-w">*</text>
|
||
到店消费：
|
||
</text>
|
||
<switch color="#F8D247" :checked="form.deliveryStore === 1 ?true:false" @change="switchChange($event, 'deliveryStore')" class="switch" />
|
||
</view>
|
||
<!-- <view class="list-item ">
|
||
<text class="label">
|
||
<text class="color-red">*</text>
|
||
支付方式：
|
||
</text>
|
||
<checkbox-group class="checkbox" @change="checkboxChange">
|
||
<view v-for="(item, i) in payList" :key="i">
|
||
<checkbox :value="item.value" :checked="item.check" color="#F8D247" style="transform:scale(0.7)" />
|
||
<text class="color-b3 font32">{{item.name}}</text>
|
||
</view>
|
||
</checkbox-group>
|
||
</view> -->
|
||
</view>
|
||
<view class="btn">
|
||
<button type="primary" class="prev item" @click="prev">上一步，填写商品详情</button>
|
||
<button type="primary" class="bg-base item" :loading="loading" :disabled="loading" @click="next">完成，提交商品</button>
|
||
</view>
|
||
|
||
<!-- <w-picker
|
||
:visible.sync="visible"
|
||
ref="mpvueCityPicker"
|
||
mode="region"
|
||
:value="pickerValue"
|
||
@confirm="onConfirm"
|
||
themeColor="#3a2397"
|
||
></w-picker> -->
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import wPicker from "@/components/w-picker/w-picker.vue"
|
||
import publics from "@/common/utils/public.js"
|
||
import url from "@/common/http/url.js"
|
||
export default{
|
||
components: { wPicker },
|
||
props: ["form", "loading"],
|
||
data(){
|
||
return {
|
||
distributionFee: "",
|
||
visible: false,
|
||
pickerText: "",
|
||
pickerValue: [],
|
||
addrData: {},
|
||
addressInfo: {},
|
||
// payList: [
|
||
// {name: "支付宝", value:"ali", check:false},
|
||
// {name: "微信", value:"wechat", check:false},
|
||
// {name: "银行卡", value:"bank", check:false},
|
||
// {name: "余额", value:"balance", check:false}
|
||
// ]
|
||
}
|
||
},
|
||
filters: {
|
||
filterAddr(code) {
|
||
if (!code) return
|
||
return publics.getAddressByThreeCode(code)
|
||
},
|
||
},
|
||
watch:{
|
||
addrData(val){
|
||
console.log(".....val......", val)
|
||
this.form.shippingAdcodeOne = val.oneAdcode
|
||
this.form.shippingAdcodeTwo = val.twoAdcode
|
||
this.form.shippingAdcodeThree = val.threeAdcode
|
||
this.form.shippingDetailed = val.addressDetails
|
||
this.form.shippingAddressSupplement = val.addressSupplement
|
||
this.form.shippingFullName = val.fullName
|
||
this.form.shippingMobile = val.mobile
|
||
this.form.shippingLng = val.lng
|
||
this.form.shippingLat = val.lat
|
||
this.$forceUpdate()
|
||
}
|
||
},
|
||
mounted() {
|
||
// 获取配送员佣金比例
|
||
this.$http("GET", url.common.distributionFee).then(res=>{
|
||
this.distributionFee = res.data.unBoutique
|
||
})
|
||
this.getList()
|
||
},
|
||
methods:{
|
||
getList(){
|
||
let params = {
|
||
pageSize: 0,
|
||
type: 2
|
||
}
|
||
this.$http("GET", url.address.getAddressList, params).then(res =>{
|
||
res.data.records.forEach((item) => {
|
||
if (item.defaultAd == 1) this.addrData = item;
|
||
})
|
||
})
|
||
},
|
||
selectAddress(){
|
||
this.$navigateTo("/pages/user/address/index?type=2&&source=true&&id="+this.addrData.id)
|
||
},
|
||
onConfirm(e) {
|
||
let _this = this
|
||
this.pickerText = e.result
|
||
this.form.shippingAdcodeOne = e.obj.province.value
|
||
this.form.shippingAdcodeTwo = e.obj.city.value
|
||
this.form.shippingAdcodeThree = e.obj.area.value
|
||
let addressInfo = e.obj.area
|
||
this.addressInfo = addressInfo
|
||
uni.chooseLocation({
|
||
longitude: addressInfo.centerLng.toString(),
|
||
latitude: addressInfo.centerLat.toString(),
|
||
success(res) {
|
||
if (res.address.startsWith(e.result)){
|
||
_this.form.shippingDetailed = res.address.split(e.result)[1]
|
||
} else if (res.name === '地图位置' || res.name === res.address){
|
||
_this.form.shippingDetailed = res.address
|
||
} else {
|
||
_this.form.shippingDetailed = res.name + res.address
|
||
}
|
||
_this.$forceUpdate()
|
||
}
|
||
})
|
||
},
|
||
switchChange(e, name){
|
||
let value = e.detail.value ? 1 : 2
|
||
if (name == 'deliveryStore' && value == 1) {
|
||
this.form['deliveryExpress'] = 2
|
||
this.form['deliveryNo'] = 1
|
||
} else {
|
||
this.form['deliveryNo'] = 2
|
||
}
|
||
if (name == 'deliveryExpress' && value == 1) {
|
||
this.form['deliveryStore'] = 2
|
||
}
|
||
this.form[name] = value
|
||
console.log("switchChange", name, this.form[name])
|
||
this.$forceUpdate()
|
||
},
|
||
// checkboxChange(e){
|
||
// let value = e.detail.value
|
||
// this.form.paymentTypes = JSON.stringify(value)
|
||
// },
|
||
prev(){
|
||
this.$emit("prev")
|
||
},
|
||
next(){
|
||
if ((!this.form.deliveryExpress || this.form.deliveryExpress == 2)&&
|
||
(!this.form.deliveryStore || this.form.deliveryStore == 2)) return this.$msg('请选择配送方式')
|
||
this.$emit("next", this.form)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.list{
|
||
border-radius: 10rpx;
|
||
background-color: #FFFFFF;
|
||
padding: 0rpx 30rpx;
|
||
.address-section {
|
||
padding: 30upx;
|
||
background: #fff;
|
||
position: relative;
|
||
border-bottom: 2rpx solid #EEEEEE;
|
||
.order-content {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.img{
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
}
|
||
.cen {
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex: 1;
|
||
font-size: 32upx;
|
||
color: #303133;
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.name {
|
||
font-size: 34upx;
|
||
margin-right: 24upx;
|
||
}
|
||
|
||
.address {
|
||
margin-top: 16upx;
|
||
margin-right: 20upx;
|
||
color: #909399;
|
||
}
|
||
|
||
.icon-right {
|
||
font-size: 44upx;
|
||
color: #909399;
|
||
}
|
||
}
|
||
&-item{
|
||
border-bottom: 2rpx solid #EEEEEE;
|
||
height: 120rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
font-size: 34rpx;
|
||
.label{
|
||
width: 230rpx;
|
||
}
|
||
.input{
|
||
font-size: 34rpx;
|
||
}
|
||
.checkbox{
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
}
|
||
.switch{
|
||
transform: scale(0.8);
|
||
}
|
||
}
|
||
.btn{
|
||
margin-top: 80rpx;
|
||
padding-bottom: 50rpx;
|
||
.prev{
|
||
background-color: #c0c1c2;
|
||
}
|
||
.item{
|
||
border-radius: 50rpx;
|
||
width: 80%;
|
||
margin-top: 40rpx;
|
||
}
|
||
}
|
||
</style>
|