451 lines
14 KiB
Vue
451 lines
14 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="exhibition">
|
||
<rich-text :nodes="detailsImg"></rich-text>
|
||
</view>
|
||
<view class="exhibition-receive">
|
||
<view class="exhibition-receive-btn" @click="popLogin" v-if="!detailsData.hasLogin">
|
||
参与活动
|
||
</view>
|
||
<block v-else>
|
||
<view class="exhibition-receive-btn" @click="popClick" v-if="canSample">
|
||
参与活动
|
||
</view>
|
||
<view class="exhibition-receive-btn active" v-else>
|
||
已参与
|
||
</view>
|
||
</block>
|
||
</view>
|
||
|
||
<view class="popBack" v-if="popShow"></view>
|
||
<view class="popCont" v-if="popShow">
|
||
<view class="popCont-title">
|
||
<image @click="popClick" class="popCont-title-close" src="/static/icons/uricacidClose.png" mode="aspectFill"></image>
|
||
<view class="popCont-title-text">
|
||
领取试用装
|
||
</view>
|
||
</view>
|
||
<form @submit="siteform" class="While site-form">
|
||
<view class="site-input">
|
||
<label>收货人</label>
|
||
<input placeholder="请输入收货人姓名" name="name"></input>
|
||
</view>
|
||
<view class="site-input">
|
||
<label>手机号码</label>
|
||
<input placeholder="请输入手机号码" name="mobile" type="number"></input>
|
||
</view>
|
||
<view class="site-input">
|
||
<label>所在省份</label>
|
||
<picker @change="areasChange" :value="area.areaIndex" :range="area.areasArr" :range-key="'name'">
|
||
<view class="picker" v-if="area.areasArr[area.areaIndex]">
|
||
{{ area.areasArr[area.areaIndex].name }}
|
||
</view>
|
||
<image class="site-input-arrow" src="/static/icons/userLogin_icon.png"></image>
|
||
</picker>
|
||
</view>
|
||
<view class="site-input">
|
||
<label>所在城市</label>
|
||
<picker @change="cityDrop" :value="city.cityIndex" :range="city.cityArr" :range-key="'name'" class="conneColor">
|
||
<view class="picker" v-if="city.cityArr[city.cityIndex]">
|
||
{{ city.cityArr[city.cityIndex].name }}
|
||
</view>
|
||
<image class="site-input-arrow" src="/static/icons/userLogin_icon.png"></image>
|
||
</picker>
|
||
</view>
|
||
<view class="site-input">
|
||
<label>所在区域</label>
|
||
<picker @change="regiDrop" :value="regi.regiIndex" :range="regi.regiArr" :range-key="'name'" class="conneColor">
|
||
<view class="picker" v-if="regi.regiArr[regi.regiIndex]">
|
||
{{ regi.regiArr[regi.regiIndex].name }}
|
||
</view>
|
||
<image class="site-input-arrow" src="/static/icons/userLogin_icon.png"></image>
|
||
</picker>
|
||
</view>
|
||
<view class="site-input">
|
||
<label>收货地址</label>
|
||
<input placeholder="请输入详细地址" name="address"></input>
|
||
</view>
|
||
<view class="site-btn">
|
||
<button form-type="submit" :disabled="disabled" size="mini">提交申请</button>
|
||
</view>
|
||
</form>
|
||
</view>
|
||
|
||
<!-- 创建名片前提条件 -->
|
||
<view class="authBack" v-if="authState"></view>
|
||
<view class="authPop" v-if="authState">
|
||
<image @tap="authTap" class="authPop-cloes" src="/static/icons/uricacidClose.png"></image>
|
||
<image class="authPop-img" src="/static/imgs/authPop_img.png" mode="aspectFill"></image>
|
||
<view class="authPop-cont">
|
||
请先添加个人档案，成功后可领取产品
|
||
</view>
|
||
<view class="authBtn" @tap="authUrl">去添加</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { goods, Receive, create } from '@/apis/interfaces/mall'
|
||
export default {
|
||
data() {
|
||
return {
|
||
popShow : false, //弹出层
|
||
detailsData : '', //商品数据信息
|
||
disabled : false , // 提交按钮状态
|
||
detailsImg : '',
|
||
canSample : '',
|
||
authState : false,
|
||
// 省份选择
|
||
area: {
|
||
areasArr : [],
|
||
areaId : '',
|
||
areaIndex : 0,
|
||
},
|
||
|
||
// 市级选择
|
||
city: {
|
||
cityArr : [],
|
||
cityId : 0,
|
||
cityIndex : 0,
|
||
},
|
||
|
||
// 区域选择
|
||
regi: {
|
||
regiArr : [],
|
||
regiId : 0,
|
||
regiIndex : 0,
|
||
}
|
||
};
|
||
},
|
||
onShow() {
|
||
// 获取商品详情数据
|
||
this.detailsInfo();
|
||
},
|
||
methods: {
|
||
// 商品详情数据
|
||
detailsInfo() {
|
||
goods(this.$Route.query.id).then(res => {
|
||
this.detailsData = res
|
||
this.detailsImg = res.content.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;"')
|
||
this.canSample = res.canSample
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: "none"
|
||
})
|
||
})
|
||
},
|
||
|
||
// 去登陆
|
||
popLogin() {
|
||
this.$Router.push({ name: 'Login' });
|
||
},
|
||
|
||
// 领取产品弹出
|
||
popClick() {
|
||
if(!this.detailsData.hasCase) {
|
||
this.authState = !this.authState
|
||
return
|
||
}
|
||
this.popShow = !this.popShow
|
||
// 获取省市区列表
|
||
if(this.popShow == true)this.createInfo();
|
||
},
|
||
|
||
// 去认证
|
||
authUrl() {
|
||
this.$Router.push({ name: 'Attestation', params: { editState: false } });
|
||
this.authState = !this.authState
|
||
},
|
||
|
||
// 关闭认证提示弹出层
|
||
authTap() {
|
||
this.authState = !this.authState
|
||
},
|
||
|
||
// 省市区列表
|
||
createInfo() {
|
||
create().then(res => {
|
||
let areas = res,
|
||
areaIndex = this.area.areaIndex
|
||
this.area.areaId = areas[areaIndex].id
|
||
this.area.areasArr= areas
|
||
this.citylist(areas[areaIndex].id)
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: "none"
|
||
})
|
||
})
|
||
},
|
||
|
||
// 所在省份-下拉
|
||
areasChange(e) {
|
||
let area = this.area.areasArr,
|
||
index = e.detail.value,
|
||
atcode = area[index].id
|
||
if (index != this.area.areaIndex) {
|
||
this.area.areaIndex = index
|
||
this.area.areaId = atcode
|
||
// 获取市级列表
|
||
this.citylist(atcode)
|
||
}
|
||
},
|
||
|
||
// 市级列表
|
||
citylist(cityId) {
|
||
create({
|
||
parent_id: cityId
|
||
}).then(res=>{
|
||
let cityArr = res
|
||
this.city.cityId = cityArr[0].id
|
||
this.city.cityArr = cityArr
|
||
this.city.cityIndex = 0
|
||
this.regilist(cityArr[0].id)
|
||
})
|
||
},
|
||
|
||
// 市级下拉筛选
|
||
cityDrop(e) {
|
||
let city = this.city.cityList,
|
||
index = e.detail.value,
|
||
citycode = city[index].id
|
||
if (index != this.area.areaIndex) {
|
||
this.city.cityIndex = index
|
||
this.city.cityId = citycode
|
||
|
||
// 获取市级列表
|
||
this.regilist(citycode)
|
||
}
|
||
},
|
||
|
||
// 区列表
|
||
regilist(areaId) {
|
||
create({
|
||
parent_id: areaId
|
||
}).then(res=>{
|
||
this.regi.regiArr = res
|
||
this.regi.regiId = res[0].id
|
||
this.regi.regiIndex = 0
|
||
})
|
||
},
|
||
|
||
// 区下拉筛选
|
||
regiDrop(e) {
|
||
let newIndex = e.detail.value
|
||
this.regi.regiIndex = newIndex
|
||
this.regi.regiId = this.regi.regiArr[newIndex].id
|
||
},
|
||
|
||
// 表单提交
|
||
siteform(val) {
|
||
let newVal = val.detail.value
|
||
Receive({
|
||
name: newVal.name,
|
||
mobile: newVal.mobile,
|
||
province_id: this.area.areaId,
|
||
city_id: this.city.cityId,
|
||
district_id: this.regi.regiId,
|
||
address: newVal.address
|
||
}).then(res => {
|
||
uni.showToast({
|
||
title: res,
|
||
icon: "none"
|
||
})
|
||
this.disabled = true
|
||
this.popShow = false
|
||
this.canSample = false
|
||
}).catch(err => {
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: "none"
|
||
})
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.content{
|
||
overflow: hidden;
|
||
background: #f3f4f6;
|
||
}
|
||
|
||
.While {
|
||
border-radius: 10rpx;
|
||
margin-bottom: 30rpx;
|
||
background-color: #FFFFFF;
|
||
box-shadow: 0 0 10rpx rgba($color: #000000, $alpha: .05);
|
||
}
|
||
|
||
.site-form {
|
||
display: block;
|
||
}
|
||
|
||
.site-input {
|
||
padding: 0 0 0 200rpx;
|
||
position: relative;
|
||
line-height: 90rpx;
|
||
min-height: 90rpx;
|
||
border-bottom: 2rpx solid #f2f2f2;
|
||
label {
|
||
position: absolute;
|
||
left: 30rpx;
|
||
top: 0;
|
||
}
|
||
input {
|
||
height: 90rpx;
|
||
}
|
||
.site-input-arrow {
|
||
width: 28rpx;
|
||
height: 28rpx;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 30rpx;
|
||
}
|
||
}
|
||
|
||
.exhibition {
|
||
border-bottom: 120rpx solid transparent;
|
||
.exhibition-img {
|
||
width: 100vw;
|
||
}
|
||
}
|
||
|
||
.exhibition-receive {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 120rpx;
|
||
background-color: #FFFFFF;
|
||
padding: 17rpx 30rpx;
|
||
box-sizing: border-box;
|
||
z-index: 9;
|
||
.exhibition-receive-btn {
|
||
background-color: #ff8260;
|
||
color: #FFFFFF;
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
text-align: center;
|
||
border-radius: 10rpx;
|
||
&.active {
|
||
background-color: #d5d5d5;
|
||
color: #a9a9a9;
|
||
}
|
||
}
|
||
}
|
||
|
||
.site-btn button[size="mini"] {
|
||
width: 100%;
|
||
background: #6e79ec;
|
||
height: 88rpx;
|
||
line-height: 88rpx;
|
||
font-size: 32rpx;
|
||
color: white;
|
||
padding: 0;
|
||
margin-top: 60rpx;
|
||
}
|
||
|
||
// 弹出
|
||
.popBack {
|
||
position: fixed;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba($color: #000000, $alpha: .4);
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 99;
|
||
}
|
||
|
||
.popCont {
|
||
position: fixed;
|
||
width: 100%;
|
||
left: 0;
|
||
bottom: 0;
|
||
background-color: #FFFFFF;
|
||
z-index: 100;
|
||
height: 70vh;
|
||
overflow-y: scroll;
|
||
border-radius: 30rpx 30rpx 0 0;
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
.popCont-title {
|
||
border-bottom: 2rpx solid #F2F2F2;
|
||
padding-bottom: 30rpx;
|
||
display: flex;
|
||
line-height: 54rpx;
|
||
position: relative;
|
||
.popCont-title-close {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-top: 7rpx;
|
||
}
|
||
.popCont-title-text {
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
}
|
||
}/* 认证弹出 */
|
||
.authBack {
|
||
background: rgba(0, 0, 0, .35);
|
||
position: fixed;
|
||
width: 100%;
|
||
height: 100%;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 9;
|
||
}
|
||
|
||
.authPop {
|
||
background-color: #ffffff;
|
||
position: fixed;
|
||
left: 50%;
|
||
top: 50%;
|
||
width: 400rpx;
|
||
height: 500rpx;
|
||
margin-left: -200rpx;
|
||
margin-top: -250rpx;
|
||
z-index: 10;
|
||
border-radius: 10rpx;
|
||
text-align: center;
|
||
padding: 40rpx 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.authPop-img {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
}
|
||
|
||
.authPop-cont {
|
||
padding: 0 40rpx;
|
||
box-sizing: border-box;
|
||
font-size: 28rpx;
|
||
line-height: 44rpx;
|
||
color: #999;
|
||
margin-bottom: 40rpx;
|
||
}
|
||
|
||
.authBtn {
|
||
background: #6d79ec;
|
||
margin: 0 40rpx;
|
||
color: white;
|
||
font-size: 30rpx;
|
||
line-height: 74rpx;
|
||
border-radius: 6rpx;
|
||
width: calc(100% - 80rpx);
|
||
text-align: center;
|
||
}
|
||
|
||
.authPop-cloes {
|
||
position: absolute;
|
||
top: 10rpx;
|
||
right: 10rpx;
|
||
z-index: 11;
|
||
width: 36rpx;
|
||
height: 36rpx;
|
||
}
|
||
</style>
|