|
|
@@ -8,16 +8,134 @@
|
|
|
</view>
|
|
|
<form>
|
|
|
<view class="row">
|
|
|
- <label><span>*</span>分类</label>
|
|
|
- <view class="secondradio" >
|
|
|
+ <label class="label"><span class="red">*</span>分类</label>
|
|
|
+ <view class="secondradio">
|
|
|
<view v-for="(item,index) in fenlei" :key="index" v-model="secondParams.secondHandType" @click="secondHandRidio(item)"
|
|
|
- :class="currentId==item.value?'select active':''" class="icon">
|
|
|
- <label class="icon typeradio"></label>{{item.name}}
|
|
|
+ :class="currentId==item.value?'active':''">
|
|
|
+ <label class="iconfont" :class="currentId==item.value?'icon-yixuanze':'icon-weixuanze'"></label>{{item.name}}
|
|
|
</view>
|
|
|
</view>
|
|
|
+ <view class="secondradio Secondary" v-if="isShow" >
|
|
|
+ <view v-for="(item ,index) in radioList" :key="index" :class="item.isChecked ? 'active':''"
|
|
|
+ @click="secondHandType(item)" class="icon mIcon ">
|
|
|
+ <label class="iconfont" :class="item.isChecked?'icon-yixuanze':'icon-weixuanze'"></label>{{item.name}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="linqi_text" v-show="secondParams.secondHandType==2">
|
|
|
+ <view class="jiaobiao"></view>
|
|
|
+ <p>临期产品是指临近保质期的产品，距离到期日最好在6个月以上</p>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <label class="label"><span class="red">*</span>商品品牌</label>
|
|
|
+ <view class="select spacing" @click="showBrand">
|
|
|
+ <span class="placeholder" >{{brandname}}</span>
|
|
|
+ <!-- <ul v-show="selectBrand">
|
|
|
+ <li v-for="(item,index) in BrandList" :key="index" :value='item.id' @click="ChangeBrand(item)">{{item.name}}</li>
|
|
|
+ </ul> -->
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <label class="label">公司名称</label>
|
|
|
+ <view class="spacing">
|
|
|
+ <input type="text" maxlength="40" id="shopname" v-model="secondParams.name" placeholder="请输入商品名称，不超过40个汉字">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <label class="label">出厂日期</label>
|
|
|
+ <view class="spacing">
|
|
|
+ <input type="text" v-model="secondParams.fixedYears" id="shopyear" maxlength="10" placeholder="请输入出厂日期 如：2020年06月">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="row" v-show="secondParams.secondHandType==2">
|
|
|
+ <label class="label"><span class="red">*</span>产品到期日</label>
|
|
|
+ <view class="spacing">
|
|
|
+ <input type="text" v-model="secondParams.maturityYears" id="expire" maxlength="10" placeholder="请输入产品到期日，如：2020年12月">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <label class="label"><span class="red">*</span>公司名称</label>
|
|
|
+ <view class="spacing">
|
|
|
+ <input type="text" v-model="secondParams.companyName" id="mechanismname" maxlength="30" placeholder="请输入公司名称，不超过30个汉字">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <label class="label"><span class="red">*</span>交易价</label>
|
|
|
+ <view class="spacing">
|
|
|
+ <input type="text" style="width: 288px;" maxlength="20" id="shopprice" oninput="value=value.replace(/[^\d]/g, '')"
|
|
|
+ v-model="secondParams.price1" placeholder="请输入交易价">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view style="margin-top: 15rpx;">
|
|
|
+ <span @click="Detailed($event)" v-model="secondParams.detailTalkFlags" class="iconfont xiangliao"
|
|
|
+ :class="vShow_detailTalkFlag?'icon-jiagexiangliao':'icon-juxingweigouxuan'" ><span style="margin-left: 10rpx;">价格详聊</span></span>
|
|
|
+ <span class="showflag" v-show="vShow_detailTalkFlag">(勾选代表同意不显示交易价)</span>
|
|
|
+ </view>
|
|
|
+ <view class="row" v-show="secondParams.secondHandType==2">
|
|
|
+ <label class="label"><span class="red">*</span>市场价</label>
|
|
|
+ <view class="spacing">
|
|
|
+ <input type="text" v-model="secondParams.normalPrice" id="market" maxlength="30" oninput="value=value.replace(/[^\d]/g, '')" placeholder="请输入市场价">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="row" v-show="secondParams.secondHandType==2">
|
|
|
+ <label class="label"><span class="red">*</span>采购价/原价</label>
|
|
|
+ <view class="spacing">
|
|
|
+ <input type="text" v-model="secondParams.originalPrice" id="original_price" maxlength="30" oninput="value=value.replace(/[^\d]/g, '')" placeholder="请输入采购价/原价"/>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="row" v-show="secondParams.secondHandType==2">
|
|
|
+ <label class="label"><span class="red">*</span>数量</label>
|
|
|
+ <view class="spacing">
|
|
|
+ <input type="text" id="number" v-model="secondParams.stock" maxlength="30" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入数量">
|
|
|
+ </view>
|
|
|
</view>
|
|
|
+ <view class="row">
|
|
|
+ <label class="label"><span class="red">*</span>商品成色</label>
|
|
|
+ <view class="spacing">
|
|
|
+ <input type="text" maxlength="10" id="shopcolor"v-model="secondParams.productQuality" placeholder="请输入商品成色，如“9成新”">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <label class="label"><span class="red">*</span>联系人</label>
|
|
|
+ <view class="spacing">
|
|
|
+ <input type="text" maxlength="6" v-model="secondParams.contactName" id="linkman" placeholder="请输入联系人姓名">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <label class="label"><span class="red">*</span>联系方式</label>
|
|
|
+ <view class="spacing">
|
|
|
+ <input type="text" v-model="secondParams.contactMobile" oninput="value=value.replace(/[^\d]/g,'')" id="phoneNum" maxlength="11" placeholder="请输入联系人手机号 / 固话">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <label class="label">商品类型</label>
|
|
|
+ <view class="secondradio">
|
|
|
+ <view class="buy icon mIcon" v-for="(item ,index) in beauty" :key='index' value="item.value" @click="getProductType(item.value)" :class="secondType==item.value?' active':''">
|
|
|
+ <label class="iconfont" :class="secondType==item.value?'icon-yixuanze':'icon-weixuanze'"></label>{{item.name}}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <label class="label"><span class="red">*</span>联系地址</label>
|
|
|
+ <view class="spacing" @click="showMulLinkageThreePicker">
|
|
|
+ <text class="row-input" :class="addressData.address === '请选择所在地区' ? 'none' : ''">
|
|
|
+ {{addressData.address}}
|
|
|
+ </text>
|
|
|
+ <text class="iconfont icon-xiayibu"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <textarea type="text" id="addressDetails" class="border-grey address-details" v-model="secondParams.address" maxlength="50"
|
|
|
+ placeholder="请填写详细地址，如街道/小区/门牌等" /></textarea>
|
|
|
|
|
|
</form>
|
|
|
+ <tui-drawer @mode="bottom" :class="{'tui-drawer-mask_show':visible}" >
|
|
|
+ </tui-drawer>
|
|
|
+ <mpvue-city-picker :themeColor="themeColor"
|
|
|
+ ref="mpvueCityPicker"
|
|
|
+ :pickerValueDefault="cityPickerValueDefault"
|
|
|
+ @onCancel="onCancel"
|
|
|
+ @onConfirm="onConfirm">
|
|
|
+ </mpvue-city-picker>
|
|
|
</view>
|
|
|
|
|
|
|
|
|
@@ -26,10 +144,14 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+ import tuiDrawer from "@/components/thorui/tui-drawer/tui-drawer.vue"
|
|
|
+ import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
|
|
|
import { mapState,mapMutations } from 'vuex';
|
|
|
export default{
|
|
|
name:'secondHandrelease',
|
|
|
components:{
|
|
|
+ tuiDrawer,
|
|
|
+ mpvueCityPicker
|
|
|
},
|
|
|
data(){
|
|
|
return{
|
|
|
@@ -82,6 +204,13 @@
|
|
|
productDetails:'',//商品详细信息
|
|
|
source:1,
|
|
|
},
|
|
|
+ addressData:{
|
|
|
+ address:'请选择所在地区',
|
|
|
+ townID:'', //区ID
|
|
|
+ cityID:'', //区ID
|
|
|
+ provinceID:'', //区ID
|
|
|
+ addressDetail: '', //地址
|
|
|
+ },
|
|
|
brandname:'请选择',
|
|
|
checkbox:false,
|
|
|
shoplogoTwo:false,
|
|
|
@@ -118,10 +247,22 @@
|
|
|
vShow_detailInfoEditor:true,
|
|
|
vShow_GoodsImages:false,
|
|
|
vShow_checkBox:false,
|
|
|
- selectBrand:false
|
|
|
+ selectBrand:false,
|
|
|
+ isShowInput:true,
|
|
|
}
|
|
|
},
|
|
|
methods:{
|
|
|
+ showMulLinkageThreePicker() {//三级地址联动
|
|
|
+ this.isShowInput = true
|
|
|
+ this.$refs.mpvueCityPicker.show()
|
|
|
+ },
|
|
|
+ onConfirm(e) {//获取选择的地址信息
|
|
|
+ console.log('地址',e);
|
|
|
+ this.addressData.address = e.name;
|
|
|
+ this.addressData.townID = e.townCode;
|
|
|
+ this.addressData.cityID = e.cityCode;
|
|
|
+ this.addressData.provinceID = e.provinceCode;
|
|
|
+ },
|
|
|
showBrand:function(){
|
|
|
var _this = this;
|
|
|
_this.selectBrand = !_this.selectBrand;
|
|
|
@@ -159,12 +300,11 @@
|
|
|
},
|
|
|
Detailed:function(){
|
|
|
var _this = this;
|
|
|
- if(event.target.checked==true){
|
|
|
+ _this.vShow_detailTalkFlag = !_this.vShow_detailTalkFlag;
|
|
|
+ if(_this.vShow_detailTalkFlag){
|
|
|
_this.secondParams.detailTalkFlag = 2 ;//启用价格详聊
|
|
|
- _this.vShow_detailTalkFlag = true;
|
|
|
}else {
|
|
|
_this.secondParams.detailTalkFlag = 1 ;//不启用价格详聊
|
|
|
- _this.vShow_detailTalkFlag = false;
|
|
|
}
|
|
|
},
|
|
|
dragstart: function(value) { // 记录初始信息
|
|
|
@@ -426,16 +566,16 @@
|
|
|
},
|
|
|
|
|
|
},
|
|
|
- created:function () {
|
|
|
- var _this = this;
|
|
|
- _this.SecondService.brandList({},function (res) {//品牌列表
|
|
|
+ created(){
|
|
|
+ this.SecondService.brandList().then(res =>{//品牌列表
|
|
|
if(res.code == 0){
|
|
|
- _this.BrandList = res.data;
|
|
|
+ this.BrandList = res.data;
|
|
|
+ console.log( this.BrandList)
|
|
|
}
|
|
|
})
|
|
|
- _this.SecondService.GetProvince({},function(response){ //省份
|
|
|
+ this.SecondService.GetProvince().then(response=>{//省份
|
|
|
if(response.code == 0){
|
|
|
- _this.provinceArray = response.data
|
|
|
+ this.provinceArray = response.data
|
|
|
}else{
|
|
|
this.$util.msg(response.msg,2000)
|
|
|
}
|
|
|
@@ -445,13 +585,78 @@
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
+ *{
|
|
|
+ border: 0;
|
|
|
+ padding: 0;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
view{font-size: 28rpx;}
|
|
|
.my-maintenance{padding: 20rpx;}
|
|
|
.bannerimg {height: 66rpx;width: 100%;}
|
|
|
.bannerimg image{width: 100%;height: 100% ;}
|
|
|
.newsTitle {line-height: 48rpx;text-align: left;color: #e15616;padding:20rpx;background-color: rgba(225, 86, 22, .1);font-size: 28rpx;}
|
|
|
- .secondradio view{display: inline-block;color: #333333;}
|
|
|
- .typeradio.icon::before{
|
|
|
- .secondradio{margin-bottom:20rpx}
|
|
|
+ .secondradio view{display: inline-block;color: #333333;padding: 0 20rpx;}
|
|
|
+ .secondradio{display: inline-block;margin-left: 40rpx;}
|
|
|
+ .Secondary{width: 100%;text-align: center;margin: 0;}
|
|
|
+ .secondradio view.active {color: #e15616;}
|
|
|
+ .row .label .red{
|
|
|
+ color: #f94b4b;
|
|
|
+ }
|
|
|
+ input[type="text"]::placeholder, textarea::placeholder {color: #b2b2b2;;}
|
|
|
+ .row label.iconfont{margin-right: 10rpx;color: #e15616;}
|
|
|
+ .linqi_text {
|
|
|
+ width: 100%;
|
|
|
+ height: 68rpx;
|
|
|
+ background-color: #1890f9;
|
|
|
+ box-shadow: 0rpx 4rpx 6rpx 0rpx rgba(24, 144, 249, 0.17);
|
|
|
+ text-align: center;
|
|
|
+ line-height: 68rpx;
|
|
|
+ color: #ffffff;
|
|
|
+ margin: auto;
|
|
|
+ font-size:24rpx;
|
|
|
+ }
|
|
|
+ .jiaobiao {
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-left: 20rpx solid transparent;
|
|
|
+ border-right: 20rpx solid transparent;
|
|
|
+ top: 376rpx;
|
|
|
+ right: 45%;
|
|
|
+ border-bottom: 20rpx solid #1890f9;
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+ .row .label{color: #666666;width: 126rpx;display: inline-block;}
|
|
|
+ .row{border-bottom: 2rpx solid #e1e1e1;line-height: 90rpx;height: 90rpx;}
|
|
|
+ .select {
|
|
|
+ position: relative;
|
|
|
+ color: #9aa5b5;
|
|
|
+ text-align: left;
|
|
|
+ user-select: none;
|
|
|
+ }
|
|
|
+ .row .spacing{
|
|
|
+ display: inline-block;
|
|
|
+ margin-left: 60rpx;
|
|
|
+ width: 73%;
|
|
|
+ vertical-align:middle
|
|
|
+ }
|
|
|
+ .select .placeholder {
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
+ width: 100%;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ .icon-xiayibu{margin-left: 280rpx;color: #b2b2b2;}
|
|
|
+ .xiangliao{font-size: 26rpx;margin-right: 10rpx;}
|
|
|
+ .icon-jiagexiangliao{color: #e15616;}
|
|
|
+ .showflag{color: #b2b2b2;}
|
|
|
+ .border-grey{
|
|
|
+ width: 100%;
|
|
|
+ resize: none;
|
|
|
+ padding: 20rpx;
|
|
|
+ height: 160rpx;
|
|
|
+ border-bottom: 2rpx solid #e1e1e1;
|
|
|
+ }
|
|
|
+ .release-main-container {
|
|
|
+ overflow: hidden;
|
|
|
}
|
|
|
</style>
|
