|
|
@@ -0,0 +1,1122 @@
|
|
|
+<template name="secondHandrelease">
|
|
|
+ <view class="fleaMarketForm">
|
|
|
+ <view class="bannerimg"><image src="https://static.caimei365.com/app/img/bg/secondbg.png"></image></view>
|
|
|
+ <view class="my-maintenance" :style="{ paddingBottom: isIphoneX ? '270rpx' : '250rpx' }">
|
|
|
+ <view class="newsTitle">
|
|
|
+ <view class="nestext">
|
|
|
+ 欢迎您来到采美365网二手商品市场，您可以在这里发布二手仪器和产品，采美官方
|
|
|
+ 人员将会对商品进行审核和专业的估价，估价完成后才能上架展示并销售，展示期为
|
|
|
+ 3个月。为了完整展示您的商品，请您认真填写以下商品基本信息，谢谢合作。
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="label"><text class="red">*</text>发布身份：</view>
|
|
|
+ <view class="select spacing">
|
|
|
+ <picker
|
|
|
+ @change="bindPickerChangePublisher($event)"
|
|
|
+ :value="index"
|
|
|
+ :range="publisherActions"
|
|
|
+ range-key="name"
|
|
|
+ >
|
|
|
+ <input
|
|
|
+ class="input"
|
|
|
+ type="text"
|
|
|
+ disabled="true"
|
|
|
+ v-model="publisherText"
|
|
|
+ placeholder="请选择发布身份"
|
|
|
+ placeholder-class="placeholder"
|
|
|
+ />
|
|
|
+ </picker>
|
|
|
+ </view>
|
|
|
+ <text class="iconfont icon-xiayibu"></text>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="label"><text class="red">*</text>联系人：</view>
|
|
|
+ <view class="spacing">
|
|
|
+ <input type="text"
|
|
|
+ maxlength="15"
|
|
|
+ v-model="secondParams.contactName"
|
|
|
+ placeholder="请输入联系人姓名"
|
|
|
+ placeholder-class="placeholder">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="label"><text class="red">*</text>联系方式：</view>
|
|
|
+ <view class="spacing">
|
|
|
+ <input type="text"
|
|
|
+ v-model="secondParams.contactMobile"
|
|
|
+ maxlength="11"
|
|
|
+ placeholder="请输入联系人手机号"
|
|
|
+ @blur="contactMobileOnblur"
|
|
|
+ placeholder-class="placeholder">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="label"><text class="red">*</text>验证码：</view>
|
|
|
+ <view class="spacing">
|
|
|
+ <input type="text"
|
|
|
+ v-model="secondParams.checkCode"
|
|
|
+ maxlength="6"
|
|
|
+ placeholder="请输入验证码"
|
|
|
+ placeholder-class="placeholder">
|
|
|
+ </view>
|
|
|
+ <view class="row-btn" :class="[isMobileDisabled ? 'disabled' : '']">
|
|
|
+ <button class="row-input"
|
|
|
+ type="button"
|
|
|
+ @click.stop="getMobileCodeFn"
|
|
|
+ :disabled="isMobileDisabled">
|
|
|
+ {{ mobileCodeText }}
|
|
|
+ </button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="label"><text class="red">*</text>二手分类：</view>
|
|
|
+ <view class="select spacing">
|
|
|
+ <picker
|
|
|
+ @change="bindPickerChange($event)"
|
|
|
+ :value="index"
|
|
|
+ :range="categoryActions"
|
|
|
+ range-key="name"
|
|
|
+ >
|
|
|
+ <input
|
|
|
+ class="input"
|
|
|
+ type="text"
|
|
|
+ disabled="true"
|
|
|
+ v-model="organizationTypeText"
|
|
|
+ placeholder="请选择分类"
|
|
|
+ placeholder-class="placeholder"
|
|
|
+ />
|
|
|
+ </picker>
|
|
|
+ </view>
|
|
|
+ <text class="iconfont icon-xiayibu"></text>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="label"><text class="red">*</text>商品品牌：</view>
|
|
|
+ <view class="select spacing">
|
|
|
+ <picker
|
|
|
+ @change="bindPickerChangeBrand($event)"
|
|
|
+ :value="index"
|
|
|
+ :range="brandActions"
|
|
|
+ range-key="name"
|
|
|
+ >
|
|
|
+ <input
|
|
|
+ class="input"
|
|
|
+ type="text"
|
|
|
+ disabled="true"
|
|
|
+ v-model="brandName"
|
|
|
+ placeholder="请选择品牌"
|
|
|
+ placeholder-class="placeholder"
|
|
|
+ />
|
|
|
+ </picker>
|
|
|
+ </view>
|
|
|
+ <text class="iconfont icon-xiayibu"></text>
|
|
|
+ </view>
|
|
|
+ <view class="row" v-if="secondParams.brandId==161">
|
|
|
+ <view class="label">其它品牌：</view>
|
|
|
+ <view class="spacing">
|
|
|
+ <input type="text"
|
|
|
+ maxlength="40"
|
|
|
+ v-model="secondParams.brandName"
|
|
|
+ placeholder="请输入商品品牌"
|
|
|
+ placeholder-class="placeholder">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="label"><text class="red">*</text>商品名称：</view>
|
|
|
+ <view class="spacing">
|
|
|
+ <input type="text"
|
|
|
+ maxlength="40"
|
|
|
+ v-model="secondParams.name"
|
|
|
+ placeholder="请输入商品名称，不超过40个汉字"
|
|
|
+ placeholder-class="placeholder">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="label">出厂日期：</view>
|
|
|
+ <view class="spacing">
|
|
|
+ <input type="text"
|
|
|
+ v-model="secondParams.fixedYears"
|
|
|
+ maxlength="10"
|
|
|
+ placeholder="请输入出厂日期 如：2020年06月"
|
|
|
+ placeholder-class="placeholder">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="row" v-if="secondParams.publishIdentity === 2">
|
|
|
+ <view class="label"><text class="red">*</text>公司名称：</view>
|
|
|
+ <view class="spacing">
|
|
|
+ <input type="text"
|
|
|
+ v-model="secondParams.companyName"
|
|
|
+ maxlength="30"
|
|
|
+ placeholder="请输入公司名称，不超过30个汉字"
|
|
|
+ placeholder-class="placeholder">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="label"><text class="red">*</text>商品成色：</view>
|
|
|
+ <view class="spacing">
|
|
|
+ <input type="text"
|
|
|
+ maxlength="10"
|
|
|
+ v-model="secondParams.productQuality"
|
|
|
+ placeholder="请输入商品成色，如“9成新”"
|
|
|
+ placeholder-class="placeholder">
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="row">
|
|
|
+ <view class="label">商品类型：</view>
|
|
|
+ <view class="select spacing">
|
|
|
+ <picker
|
|
|
+ @change="bindPickerChangeProduct($event)"
|
|
|
+ :value="index"
|
|
|
+ :range="productActions"
|
|
|
+ range-key="name"
|
|
|
+ >
|
|
|
+ <input
|
|
|
+ class="input"
|
|
|
+ type="text"
|
|
|
+ disabled="true"
|
|
|
+ v-model="organizationTypeText1"
|
|
|
+ placeholder="请选择发布身份"
|
|
|
+ placeholder-class="placeholder"
|
|
|
+ />
|
|
|
+ </picker>
|
|
|
+ </view>
|
|
|
+ <text class="iconfont icon-xiayibu"></text>
|
|
|
+ </view>
|
|
|
+ <view class="row" >
|
|
|
+ <view class="label"><text class="red">*</text>联系地址：</view>
|
|
|
+ <view class="spacing" @click="showMulLinkageThreePicker">
|
|
|
+ <text class="row-input" :class="addressData.address === '请选择所在地区' ? 'none,placeholder' : ''" >
|
|
|
+ {{addressData.address}}
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <text class="iconfont icon-xiayibu"></text>
|
|
|
+ </view>
|
|
|
+ <textarea type="text"
|
|
|
+ class="border-grey address-details"
|
|
|
+ v-model="secondParams.address"
|
|
|
+ maxlength="50"
|
|
|
+ placeholder="请填写详细地址，如街道/小区/门牌等"
|
|
|
+ placeholder-class="placeholder"/>
|
|
|
+ </textarea>
|
|
|
+ <view class="release-main-container">
|
|
|
+ <view class="release-from">
|
|
|
+ <view class="label"><text class="red">*</text>商品图片</view>
|
|
|
+ <view class="release-input upload image uploadGoodsImages" >
|
|
|
+ <view class="upload-file" v-if="GoodsImagesList.length<5">
|
|
|
+ <text class="iconfont icon-shangchuantupian"></text>
|
|
|
+ <p class="add-text">商品图片</p>
|
|
|
+ <view ref="goodsImages" class="input-file" @click="uploadGoodsImagesFn"></view>
|
|
|
+ </view>
|
|
|
+ <view class="upload-file" v-for="(item, index) in GoodsImagesList" :key="index">
|
|
|
+ <image :data-original='item' :src="item" :data-image="item" alt="" class="upload-img" ></image>
|
|
|
+ <text class=" del iconfont icon-iconfontguanbi" @click="removeGoodsImagesFn(index)"></text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="form-upload-tips">
|
|
|
+ <text class="iconfont icon-wenhao" ></text>
|
|
|
+ <view class="wen-tips" >最多上传5张二手商品图片，请尽量全部上传，单张图片不能超过5M</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="productinfo">
|
|
|
+ <view class="label unlogin-label" style="width: 100%;">商品详细信息</view>
|
|
|
+ <view class="textarea-wrapper">
|
|
|
+ <textarea class="textarea"
|
|
|
+ type="text"
|
|
|
+ v-model="secondParams.productDetails"
|
|
|
+ placeholder="请填写商品详细信息，对商品进行更详细的描述"
|
|
|
+ placeholder-class="placeholder"
|
|
|
+ maxlength="200"
|
|
|
+ @input="onTextareaInputInfo"
|
|
|
+ />
|
|
|
+ <span class="word-limit">{{secondParams.productDetails.length}}/200</span>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="secondBj thebj" v-show="modal1" :class="modal1 ? 'show':''">
|
|
|
+ <view class="bjmain theresult">
|
|
|
+ <text class="title">发布提示</text>
|
|
|
+ <text class="content"> {{ tipsContentText }} </text>
|
|
|
+ <view class="paybtn">
|
|
|
+ <view class="btn cancel" @click.stop="cancelButtonFn">{{ cancelButtonText }}</view>
|
|
|
+ <view class="btn confirm" @click.stop="confirmButtonFn">{{ confirmButtonText }}</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 地址弹窗 -->
|
|
|
+ <mpvue-city-picker :themeColor="themeColor"
|
|
|
+ ref="mpvueCityPicker"
|
|
|
+ :pickerValueDefault="cityPickerValueDefault"
|
|
|
+ @onCancel="onCancel"
|
|
|
+ @onConfirm="onConfirm">
|
|
|
+ </mpvue-city-picker>
|
|
|
+ <!-- 发布按钮 -->
|
|
|
+ <tui-bottom-popup :radius="false" :mask="false" :show="popupShow">
|
|
|
+ <view class="tui-popup-box clearfix">
|
|
|
+ <view class="tui-right-flex tui-popup-btn" :style="{ paddingBottom: isIphoneX ? '68rpx' : '34rpx' }">
|
|
|
+ <view class="tui-flex-1">
|
|
|
+ <view class="tui-button-text" @click="handleChangAgree">
|
|
|
+ <text class="iconfont"
|
|
|
+ :class="checkbox ? 'icon-yixuanze':'icon-weixuanze'" >
|
|
|
+ </text>
|
|
|
+ 已阅读并同意采美
|
|
|
+ <text style="color:#1890f9;" @click.stop="this.$api.navigateTo('/pages/service/service?id=1039&title=二手出让协议')">《二手出让协议》</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="tui-flex-1">
|
|
|
+ <view class="tui-button" @click="handleSubmitBtn">发布</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </tui-bottom-popup>
|
|
|
+ <!-- 弹窗提示 -->
|
|
|
+ <tui-modal :show="modal" :padding="'40rpx 30rpx'" @cancel="hideMobel" :custom="true" fadeIn >
|
|
|
+ <view class="tui-modal-custom">
|
|
|
+ <view class="tui-prompt-text">
|
|
|
+ {{ contentModalText }}
|
|
|
+ </view>
|
|
|
+ <view class="tui-prompt-flex">
|
|
|
+ <view class="btn btn-confirm" @click="handleClick">确定</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </tui-modal>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import mpvueCityPicker from '@/components/mpvue-citypicker/mpvueCityPicker.vue'
|
|
|
+ import { uploadFileImage , uploadFilePdf } from '@/services/public.js'
|
|
|
+ import authorize from '@/common/config/authorize.js'
|
|
|
+ import $reg from '@/common/config/common.js'
|
|
|
+ import { mapState,mapMutations } from 'vuex'
|
|
|
+ export default{
|
|
|
+ name:'secondHandrelease',
|
|
|
+ components:{
|
|
|
+ mpvueCityPicker,
|
|
|
+ },
|
|
|
+ data(){
|
|
|
+ return{
|
|
|
+ isIphoneX: this.$store.state.isIphoneX,
|
|
|
+ popupShow:true,
|
|
|
+ userIdentity:0,
|
|
|
+ publisherText:'个人身份',
|
|
|
+ organizationTypeText:'请选择二手分类',
|
|
|
+ organizationTypeText1:'请选择商品类型',
|
|
|
+ brandActions:[],
|
|
|
+ publisherActions:[
|
|
|
+ {name:'个人身份',value:1},
|
|
|
+ {name:'公司身份',value:2},
|
|
|
+ ],
|
|
|
+ categoryActions:[
|
|
|
+ {name:'二手仪器',value:1},
|
|
|
+ {name:'其他',value:3},
|
|
|
+ ],
|
|
|
+ productActions:[
|
|
|
+ {name:'医美',value:1},
|
|
|
+ {name:'非医美',value:3},
|
|
|
+ ],
|
|
|
+ GoodsImagesList:[],
|
|
|
+ secondParams:{
|
|
|
+ publishIdentity:1, // 发布者身份 1 个人身份 2 公司身份
|
|
|
+ secondHandType:'',//一级分类
|
|
|
+ instrumentType:1,//二手仪器分类
|
|
|
+ name:'',
|
|
|
+ brandId:'',//品牌ID
|
|
|
+ brandName:'',//其他品牌
|
|
|
+ fixedYears:'',//出厂
|
|
|
+ companyName:'',//公司名称
|
|
|
+ maturityYears:'',//产品到期
|
|
|
+ normalPrice:'',//市场价
|
|
|
+ originalPrice:'',//采购价
|
|
|
+ stock:'',//数量
|
|
|
+ productQuality:'',//商品成色
|
|
|
+ contactName:'',//联系人
|
|
|
+ contactMobile:'',//联系方式
|
|
|
+ checkCode:'',// 联系人手机验证码
|
|
|
+ secondProductType:'',//
|
|
|
+ townId:'',//县区地址
|
|
|
+ address:'',//详细地址
|
|
|
+ image:'',//图片
|
|
|
+ productDetails:'',//商品详细信息
|
|
|
+ source:4//二手发布来源.1:WWW,2:小程序,3:后台,4:协销
|
|
|
+ },
|
|
|
+ addressData:{
|
|
|
+ address:'请选择所在地区',
|
|
|
+ townID:'', //区ID
|
|
|
+ cityID:'', //区ID
|
|
|
+ provinceID:'', //区ID
|
|
|
+ addressDetail: '', //地址
|
|
|
+ },
|
|
|
+ brandName:'请选择品牌名称',
|
|
|
+ checkbox:false,
|
|
|
+ tipsContentText:'',
|
|
|
+ cancelButtonText:'取消发布',
|
|
|
+ confirmButtonText:'去支付',
|
|
|
+ contentModalText:'发布成功！商品信息会在1-2个工作日内进行审核，采美官方人员也会联系您进行商品估价，审核通过后将立即上线到采美二手市场。',
|
|
|
+ isButtonsType:0,
|
|
|
+ modal:false,
|
|
|
+ modal1:false,
|
|
|
+ isMobileDisabled: true, //手机验证码按钮控制
|
|
|
+ mobilCount: '', //倒计时
|
|
|
+ mobileCodeText: '获取验证码',
|
|
|
+ mobilTime: null,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ onTextareaInputInfo(e){
|
|
|
+ this.secondParams.productDetails = e.detail.value
|
|
|
+ },
|
|
|
+ showMulLinkageThreePicker() {//三级地址联动
|
|
|
+ this.isShowInput = true
|
|
|
+ this.$refs.mpvueCityPicker.show()
|
|
|
+ },
|
|
|
+ onConfirm(e) {//获取选择的地址信息
|
|
|
+ this.addressData.address = e.name
|
|
|
+ this.addressData.townID = e.townCode
|
|
|
+ this.addressData.cityID = e.cityCode
|
|
|
+ this.addressData.provinceID = e.provinceCode
|
|
|
+ this.secondParams.townId = this.addressData.townID
|
|
|
+ },
|
|
|
+ bindPickerChangePublisher(e) {// 选择发布者身份
|
|
|
+ this.publisherText = this.publisherActions[e.target.value].name
|
|
|
+ this.secondParams.publishIdentity = this.publisherActions[e.target.value].value
|
|
|
+ },
|
|
|
+ bindPickerChange(e) {// 选择二手分类
|
|
|
+ this.secondParams.secondHandType = this.categoryActions[e.target.value].value
|
|
|
+ if(this.secondParams.secondHandType === 1){
|
|
|
+ this.organizationTypeText = '二手仪器-美容仪器'
|
|
|
+ }else{
|
|
|
+ this.organizationTypeText = this.categoryActions[e.target.value].name
|
|
|
+ }
|
|
|
+ },
|
|
|
+ bindPickerChangeBrand(e) {
|
|
|
+ // 选择品牌
|
|
|
+ this.brandName = this.brandActions[e.target.value].name
|
|
|
+ this.secondParams.brandId = this.brandActions[e.target.value].value
|
|
|
+ },
|
|
|
+ bindPickerChangeProduct(e) {
|
|
|
+ // 选择商品类型
|
|
|
+ this.organizationTypeText1 = this.productActions[e.target.value].name
|
|
|
+ this.secondParams.secondProductType = this.productActions[e.target.value].value
|
|
|
+ },
|
|
|
+ contains(arr, val) {// 校验
|
|
|
+ return arr.some(item => item === val)
|
|
|
+ },
|
|
|
+ uploadGoodsImagesFn(event){//上传商品图片
|
|
|
+ uploadFileImage().then(res =>{
|
|
|
+ this.GoodsImagesList.push(JSON.parse(res.data).data)
|
|
|
+ this.secondParams.image =this.GoodsImagesList.toString()+','
|
|
|
+ })
|
|
|
+ },
|
|
|
+ removeGoodsImagesFn(index){//删除商品图片
|
|
|
+ this.GoodsImagesList.splice(index,1)
|
|
|
+ this.secondParams.image =this.GoodsImagesList.toString()+','
|
|
|
+ },
|
|
|
+ contactMobileOnblur(e){// 识别手机号是否正确
|
|
|
+ if(this.$reg.isMobile(e.detail.value)){
|
|
|
+ this.isMobileDisabled = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getMobileCodeFn(){
|
|
|
+ let params = {
|
|
|
+ mobile:this.secondParams.contactMobile,
|
|
|
+ isCheckCaptcha:1,
|
|
|
+ activateCodeType:6,
|
|
|
+ platformType:2
|
|
|
+ }
|
|
|
+ this.isMobileDisabled = true
|
|
|
+ this.PublicService.GetRegisterMobileCode(params).then(response =>{
|
|
|
+ this.$util.msg('验证短信已发送',2000)
|
|
|
+ const TIME_COUNT = 60
|
|
|
+ if (!this.mobilTime) {
|
|
|
+ this.mobilCount = TIME_COUNT
|
|
|
+ this.isMobileDisabled = true
|
|
|
+ this.mobilTime = setInterval(() => {
|
|
|
+ if (this.mobilCount > 1 && this.mobilCount <= TIME_COUNT) {
|
|
|
+ this.mobilCount--
|
|
|
+ this.mobileCodeText = this.mobilCount +'s重新发送'
|
|
|
+ } else {
|
|
|
+ this.isMobileDisabled = false
|
|
|
+ clearInterval(this.mobilTime)
|
|
|
+ this.mobilTime = null
|
|
|
+ this.mobileCodeText = '获取验证码'
|
|
|
+ }
|
|
|
+ },1000)
|
|
|
+ }
|
|
|
+ }).catch( error =>{
|
|
|
+ this.$util.msg(error.msg,2000)
|
|
|
+ this.isMobileDisabled = false
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleSubmitBtn () {
|
|
|
+ if(this.secondParams.contactName == ''){
|
|
|
+ this.$util.msg('请输入联系人姓名',2000)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(this.secondParams.contactMobile == ''){
|
|
|
+ console.log(this.secondParams.contactMobile)
|
|
|
+ this.$util.msg('请输入联系方式',2000)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(!$reg.isMobile(this.secondParams.contactMobile)){
|
|
|
+ this.$util.msg('请填写正确的手机号',2000)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(this.secondParams.checkCode == ''){
|
|
|
+ this.$util.msg('请输入短信验证码',2000)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(this.secondParams.secondHandType == ''){
|
|
|
+ this.$util.msg('请选择分类',2000)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(this.secondParams.secondHandType == 1 ){
|
|
|
+ if(this.secondParams.instrumentType ==''){
|
|
|
+ this.$util.msg('请完善仪器分类',2000)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(this.secondParams.brandId == ''){
|
|
|
+ this.$util.msg('请选择商品品牌',2000)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(this.secondParams.name == ''){
|
|
|
+ this.$util.msg('请输入商品名称',2000)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(this.secondParams.publishIdentity === 2) {
|
|
|
+ if (this.secondParams.companyName=='') {
|
|
|
+ this.$util.msg('请输入公司名称',2000)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if(this.secondParams.productQuality == ''){
|
|
|
+ this.$util.msg('请输入商品成色',2000)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(this.secondParams.townId == ''|| this.secondParams.townId == undefined){
|
|
|
+ this.$util.msg('请完善联系地址',2000)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(this.secondParams.address == ''){
|
|
|
+ this.$util.msg('请填写详细地址',2000)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(this.GoodsImagesList ==''){
|
|
|
+ this.$util.msg('请上传商品图片',2000)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if(this.checkbox==false){
|
|
|
+ this.$util.msg('请勾选已阅读',2000)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ console.log(this.secondParams)
|
|
|
+ },
|
|
|
+ SecondHandProduct(params){//提交发布
|
|
|
+ this.SecondService.SecondHandProduct(params).then(res=>{
|
|
|
+ this.modal = true
|
|
|
+ })
|
|
|
+ .catch(error =>{
|
|
|
+ this.$util.msg(error.msg,2000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ cancelButtonFn(){//弹窗操作按钮
|
|
|
+ switch(this.isButtonsType){
|
|
|
+ case 1:
|
|
|
+ this.modal1 = false
|
|
|
+ this.SecondHandProduct(this.secondParams)
|
|
|
+ break
|
|
|
+ case 2:
|
|
|
+ this.modal1 = false
|
|
|
+ break
|
|
|
+ }
|
|
|
+ },
|
|
|
+ confirmButtonFn(){//弹窗操作按钮
|
|
|
+ switch(this.isButtonsType){
|
|
|
+ case 1:
|
|
|
+ this.modal1 = false
|
|
|
+ break
|
|
|
+ case 2:
|
|
|
+ this.modal1 = false
|
|
|
+ break
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleChangAgree() {
|
|
|
+ this.checkbox = !this.checkbox
|
|
|
+ },
|
|
|
+ getBrandList() {
|
|
|
+ // 获取收款类型列表
|
|
|
+ this.SecondService.brandList()
|
|
|
+ .then(response => {
|
|
|
+ this.brandActions = response.data.map(item => ({
|
|
|
+ ...item,
|
|
|
+ name: item.name,
|
|
|
+ value: item.id
|
|
|
+ }))
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ this.$util.msg(err.msg, 2000)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ hideMobel(){
|
|
|
+ this.modal = false
|
|
|
+ },
|
|
|
+ handleClick(){
|
|
|
+ this.modal = false
|
|
|
+ this.$api.redirectTo ('/pages/second/product/product-list')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onShow() {
|
|
|
+ this.getBrandList()
|
|
|
+ this.$api.getComStorage('userInfo').then((resolve) =>{
|
|
|
+ this.userIdentity = resolve.userIdentity
|
|
|
+ console.log(this.userIdentity)
|
|
|
+ }).catch(error =>{
|
|
|
+ console.log(error)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+ view{font-size: 28rpx;}
|
|
|
+ .my-maintenance{
|
|
|
+ padding: 20rpx;
|
|
|
+ }
|
|
|
+ .bannerimg {
|
|
|
+ height: 100rpx;
|
|
|
+ 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);
|
|
|
+ border-radius: 10rpx;
|
|
|
+ }
|
|
|
+ .nestext{
|
|
|
+ font-size: 24rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ }
|
|
|
+ .secondradio view{
|
|
|
+ display: inline-block;
|
|
|
+ color: #333333;
|
|
|
+ margin-right: 21rpx;
|
|
|
+ }
|
|
|
+ .secondradio{
|
|
|
+ display: inline-block;
|
|
|
+ margin-left: 40rpx;
|
|
|
+ }
|
|
|
+ .Secondary{
|
|
|
+ margin-left: 96rpx;
|
|
|
+ }
|
|
|
+ .secondradio view.active {
|
|
|
+ color: #e15616;
|
|
|
+ }
|
|
|
+ .placeholder{
|
|
|
+ color: #b2b2b2;
|
|
|
+ }
|
|
|
+ .linqi_text {
|
|
|
+ width: 607rpx;
|
|
|
+ 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;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .jiaobiao {
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-left: 20rpx solid transparent;
|
|
|
+ border-right: 20rpx solid transparent;
|
|
|
+ top: -25%;
|
|
|
+ right: 40%;
|
|
|
+ border-bottom: 20rpx solid #1890f9;
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+ .label{
|
|
|
+ color: #666666;
|
|
|
+ display: inline-block;
|
|
|
+ .red{
|
|
|
+ color: #f94b4b;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .label-im{
|
|
|
+ width: 100%;
|
|
|
+ line-height: 50rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ color: #666666;
|
|
|
+ text-align: left;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ .red{
|
|
|
+ color: #f94b4b;
|
|
|
+ }
|
|
|
+ .sms{
|
|
|
+ font-size: $font-size-24;
|
|
|
+ color: #fea785;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .label-em{
|
|
|
+ line-height: 28rpx;
|
|
|
+ font-size: $font-size-20;
|
|
|
+ color: #fea785;
|
|
|
+ width: 100%;
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ .label.second{
|
|
|
+ width: 155rpx;
|
|
|
+ }
|
|
|
+ .row .spacing.second{
|
|
|
+ width: 70%;
|
|
|
+ }
|
|
|
+ .row{
|
|
|
+ width: 100%;
|
|
|
+ border-bottom: 2rpx solid #e1e1e1;
|
|
|
+ line-height: 90rpx;
|
|
|
+ float: left;
|
|
|
+ height: auto;
|
|
|
+ position: relative;
|
|
|
+ .checkbox-main{
|
|
|
+ width: 100%;
|
|
|
+ .checkbox-list {
|
|
|
+ height: 60rpx;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ line-height: 60rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ margin-bottom: 10rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ float: left;
|
|
|
+ color: #333333;
|
|
|
+ .icon-yixuanze{
|
|
|
+ margin-right: 10rpx;
|
|
|
+ color: #E15616;
|
|
|
+ }
|
|
|
+ .icon-weixuanze{
|
|
|
+ margin-right: 10rpx;
|
|
|
+ color: #B2B2B2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .row-btn{
|
|
|
+ width: 180rpx;
|
|
|
+ height:64rpx;
|
|
|
+ background: $btn-confirm;
|
|
|
+ padding: 0;
|
|
|
+ border-radius: 32rpx;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: 10rpx;
|
|
|
+ .row-input{
|
|
|
+ width: 180rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ line-height: 64rpx;
|
|
|
+ padding: 0;
|
|
|
+ color: #FFFFFF;
|
|
|
+ background: $btn-confirm;
|
|
|
+ text-align: center;
|
|
|
+ border-radius: 32rpx;
|
|
|
+ &.other{
|
|
|
+ width: 180rpx;
|
|
|
+ background: #F7F7F7;
|
|
|
+ margin-right: 20rpx;
|
|
|
+ }
|
|
|
+ &.none{
|
|
|
+ background: #F7F7F7;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.disabled{
|
|
|
+ background: #F7F7F7;
|
|
|
+ .row-input{
|
|
|
+ background: #F7F7F7;
|
|
|
+ color: #999999;
|
|
|
+ font-size: 24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.none{
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .row.fenlei{
|
|
|
+ height: auto;
|
|
|
+ margin: 10rpx 0;
|
|
|
+ border: 0;
|
|
|
+ }
|
|
|
+ .select {
|
|
|
+ position: relative;
|
|
|
+ color: #b2b2b2;
|
|
|
+ text-align: left;
|
|
|
+ user-select: none;
|
|
|
+ }
|
|
|
+ .row .spacing{
|
|
|
+ display: inline-block;
|
|
|
+ margin-left: 50rpx;
|
|
|
+ width: 430rpx;
|
|
|
+ vertical-align:middle;
|
|
|
+ position: relative;
|
|
|
+ color: #333333;
|
|
|
+ .input{
|
|
|
+ color: #333333;
|
|
|
+ }
|
|
|
+ &.file{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ &.file-text{
|
|
|
+ width: 100%;
|
|
|
+ line-height: 44rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-left: 0;
|
|
|
+ .file-text-em{
|
|
|
+ width: 100%;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ line-clamp: 1;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+ line-height: 44rpx;
|
|
|
+ font-size: 28rpx;
|
|
|
+ padding-right: 40rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .icon-iconfontguanbi{
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right:0;
|
|
|
+ color: #f94b4b;
|
|
|
+ font-size: 36rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.file-none{
|
|
|
+ width: 100%;
|
|
|
+ margin-left: 0;
|
|
|
+ position: relative;
|
|
|
+ .file-none-button{
|
|
|
+ width: 88rpx;
|
|
|
+ height: 44rpx;
|
|
|
+ background-color: #e15616;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ line-height: 44rpx;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ position: absolute;
|
|
|
+ right: 0;
|
|
|
+ top: -15rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .select .placeholder {
|
|
|
+ position: relative;
|
|
|
+ cursor: pointer;
|
|
|
+ width: 100%;
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ .icon-xiayibu{
|
|
|
+ right: 0rpx;
|
|
|
+ color: #b2b2b2;
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+ .xiangliao{
|
|
|
+ font-size: 26rpx;
|
|
|
+ margin-right: 10rpx;
|
|
|
+ color: #b2b2b2;
|
|
|
+ }
|
|
|
+ .icon-jiagexiangliao{
|
|
|
+ color: #e15616 !important;
|
|
|
+ }
|
|
|
+ .pricecolor{
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ .showflag{
|
|
|
+ color: #b2b2b2;
|
|
|
+ }
|
|
|
+ .border-grey{
|
|
|
+ width: 100%;
|
|
|
+ resize: none;
|
|
|
+ padding: 20rpx 0;
|
|
|
+ height: 160rpx;
|
|
|
+ border-bottom: 2rpx solid #e1e1e1;
|
|
|
+ }
|
|
|
+ .release-main-container {
|
|
|
+ overflow: hidden;
|
|
|
+ margin: 20rpx 0;
|
|
|
+ }
|
|
|
+ .uploadGoodsImages{
|
|
|
+ display: flex;
|
|
|
+ overflow-x: auto;
|
|
|
+ overflow-y: hidden;
|
|
|
+ }
|
|
|
+ .secondradio{
|
|
|
+ .row-radio{
|
|
|
+ transform: scale(.8);
|
|
|
+ }
|
|
|
+ .row-input{margin-right: 10rpx;}
|
|
|
+ }
|
|
|
+ .linqi_text .p{
|
|
|
+ font-size: $font-size-20;
|
|
|
+ }
|
|
|
+ .upload-file {
|
|
|
+ float: left;
|
|
|
+ margin: 20rpx 20rpx 20rpx 0px;
|
|
|
+ cursor: pointer;
|
|
|
+ width: 194rpx;
|
|
|
+ height: 194rpx;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ border: solid 2rpx #e1e1e1;
|
|
|
+ flex-shrink: 0;
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+ .input-file {
|
|
|
+ width: 194rpx;
|
|
|
+ height: 194rpx;
|
|
|
+ opacity: 0;
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ }
|
|
|
+ .upload-img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: block;
|
|
|
+ border-radius: .53vw;
|
|
|
+ }
|
|
|
+
|
|
|
+ .icon-shangchuantupian{
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ height: 100rpx;
|
|
|
+ line-height: 90rpx;
|
|
|
+ color: #b2b2b2;
|
|
|
+ font-size: $font-size-40;
|
|
|
+ text-align: center;
|
|
|
+ padding-top: 20rpx;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+ .add-text {
|
|
|
+ display: block;
|
|
|
+ width: 100%;
|
|
|
+ line-height: 50rpx;
|
|
|
+ font-size: 24rpx;
|
|
|
+ color: #b2b2b2;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .icon-iconfontguanbi{
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ line-height: 40rpx;
|
|
|
+ display: block;
|
|
|
+ position: absolute;
|
|
|
+ background: #f94b4b;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40rpx;
|
|
|
+ border-radius: 50%;
|
|
|
+ top: -15rpx;
|
|
|
+ right:-18rpx;
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: $font-size-24;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .wen-tips {
|
|
|
+ width: 664rpx;
|
|
|
+ height: 68rpx;
|
|
|
+ line-height: 68rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #FFF;
|
|
|
+ font-size: 20rpx;
|
|
|
+ background-color: #1890f9;
|
|
|
+ box-shadow: 0 0.8vw 1.6vw 0 rgba(24, 144, 249, 0.17);
|
|
|
+ border-radius: 2rpx;
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .form-upload-tips:hover .wen-tips {
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .textarea-wrapper {
|
|
|
+ letter-spacing: 2rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ color: #333333;
|
|
|
+ position: relative;
|
|
|
+ font-size: 28rpx;
|
|
|
+ border: 2rpx solid #E1E1E1;
|
|
|
+ height: 300rpx;
|
|
|
+ padding: 16rpx;
|
|
|
+ border-radius: 6rpx;
|
|
|
+ margin: 20rpx 0;
|
|
|
+ }
|
|
|
+ .textarea-wrapper textarea{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .word-limit {
|
|
|
+ position: absolute;
|
|
|
+ right: 2.7vw;
|
|
|
+ bottom: 2.7vw;
|
|
|
+ font-size: 3.2vw;
|
|
|
+ color: #9aa5b5;
|
|
|
+ }
|
|
|
+ .row.Read{
|
|
|
+ border: 0;
|
|
|
+ text-align: center;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ .thebj {
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: rgba(0, 0, 0, .5);
|
|
|
+ z-index: 999999;
|
|
|
+ opacity: 0;
|
|
|
+ }
|
|
|
+ .thebj.show{
|
|
|
+ opacity: 1;
|
|
|
+ }
|
|
|
+ .theresult {
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ width:580rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 32rpx;
|
|
|
+ }
|
|
|
+ .theresult .title{
|
|
|
+ line-height: 100rpx;
|
|
|
+ text-align: center;
|
|
|
+ display: block;
|
|
|
+ color: #333333;
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ border-bottom: 2rpx solid #efefef;
|
|
|
+ }
|
|
|
+ .theresult .content{
|
|
|
+ padding: 30rpx 52rpx;
|
|
|
+ line-height: 48rpx;
|
|
|
+ color: #666666;
|
|
|
+ font-size: 30rpx;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .paybtn{
|
|
|
+ width: 100%;
|
|
|
+ height: 90rpx;
|
|
|
+ float: left;
|
|
|
+ .btn{
|
|
|
+ width: 50%;
|
|
|
+ height: 90rpx;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 90rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ display: inline-block;
|
|
|
+ float: left;
|
|
|
+ &.cancel{
|
|
|
+ background-color: #efefef;
|
|
|
+ border-radius: 0rpx 0rpx 0rpx 32rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ &.confirm{
|
|
|
+ background-image: linear-gradient(270deg, #f28f31 0%, #e15616 100%);
|
|
|
+ border-radius: 0rpx 0rpx 32rpx 0rpx;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .icon-wenhao{
|
|
|
+ color: #1890f9;
|
|
|
+ font-size: 35rpx;
|
|
|
+ width: 50rpx;
|
|
|
+ }
|
|
|
+ .form-upload-tips:hover .wen-tips {display: block;}
|
|
|
+ .tui-popup-box {
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+ min-height: 100rpx;
|
|
|
+ padding: 6rpx 24rpx;
|
|
|
+ .tui-popup-content {
|
|
|
+ padding-top: 30rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tui-popup-btn {
|
|
|
+ width: 100%;
|
|
|
+ height: auto;
|
|
|
+ float: left;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-top: 30rpx;
|
|
|
+ .tui-button {
|
|
|
+ width: 600rpx;
|
|
|
+ height: 88rpx;
|
|
|
+ background: $btn-confirm;
|
|
|
+ line-height: 88rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #ffffff;
|
|
|
+ font-size: $font-size-28;
|
|
|
+ border-radius: 44rpx;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ .tui-button-text{
|
|
|
+ width: 600rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ line-height: 70rpx;
|
|
|
+ text-align: center;
|
|
|
+ color: #333333;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ margin: 0 auto;
|
|
|
+ margin-top: 15rpx;
|
|
|
+ .iconfont{
|
|
|
+ margin-right: 10rpx;
|
|
|
+ &.icon-yixuanze{
|
|
|
+ color: $color-system;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tui-prompt-flex{
|
|
|
+ width: 100%;
|
|
|
+ height: 80rpx;
|
|
|
+ display: flex;
|
|
|
+ margin-top: 20rpx;
|
|
|
+ .btn{
|
|
|
+ flex: 1;
|
|
|
+ line-height: 80rpx;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ text-align: center;
|
|
|
+ color: #FFFFFF;
|
|
|
+ border-radius: 40rpx;
|
|
|
+ margin: 0 24rpx;
|
|
|
+ &.btn-cancel{
|
|
|
+ background: #F7F7F7;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ &.btn-confirm{
|
|
|
+ background: $btn-confirm;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ .tui-prompt-text{
|
|
|
+ line-height: 44rpx;
|
|
|
+ font-size: $font-size-26;
|
|
|
+ color: #333333;
|
|
|
+ .text{
|
|
|
+ color: $color-system;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
