800 lines
19 KiB
Vue
800 lines
19 KiB
Vue
|
<template>
|
|||
|
|
<view>
|
|||
|
|
<view class="index-container" style="background-color: white;padding-bottom: 10upx;">
|
|||
|
|
<view class="banner">
|
|||
|
|
<swiper v-if="houseInfo.PICTURE&&houseInfo.PICTURE.length>0" class="swiper-banner" :indicator-dots="true" :autoplay="true" :interval="4000" :duration="1500">
|
|||
|
|
<swiper-item v-for="(item, index) in houseInfo.PICTURE" :key="index">
|
|||
|
|
<view class="swiper-item" >
|
|||
|
|
<image @click="vbPicture(new Array(formatImgUrl(item)))" :src="formatImgUrl(item)"></image>
|
|||
|
|
</view>
|
|||
|
|
</swiper-item>
|
|||
|
|
</swiper>
|
|||
|
|
<view v-else style="height: 500upx;line-height: 500upx;text-align: center;font-size: 60upx;border-bottom: 1px solid #e5e5e5;color: #606060;">
|
|||
|
|
暂无图片
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view style="clear: both;"></view>
|
|||
|
|
<view class="box">
|
|||
|
|
<text style="color: red; font-size:42upx;padding: 40upx 0 0 40upx;">租金: {{houseInfo.RENT+"元/月 "}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="box">
|
|||
|
|
<text style="font-size:32upx;padding: 40upx 0 0 40upx;">物业费{{houseInfo.PROPERTY}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="box">
|
|||
|
|
<text style="font-size:32upx;padding: 40upx 0 0 40upx;">押金{{houseInfo.AMOUNT}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="box">
|
|||
|
|
<text style=" font-size:32upx;padding: 20upx 40upx 0 40upx;">{{houseInfo.HOUSE_NAME}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="box">
|
|||
|
|
<text style=" font-size:32upx;padding: 20upx 40upx 0 40upx;">地址：{{houseInfo.HOUSE_ADDR}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view class="box">
|
|||
|
|
<text style=" font-size:32upx;padding: 20upx 0 0 40upx;">{{houseInfo.BUILDING_YEAR+"年建 " +formatHouseModel(houseInfo.MODEL)+" "+houseInfo.ACREAGE+"㎡"}}</text>
|
|||
|
|
</view>
|
|||
|
|
<view style="margin: 20upx 40upx;border-bottom: 1px solid #e5e5e5;"></view>
|
|||
|
|
<view class="box box-row-reverse box-wrap" style="padding: 20upx 40upx 0 40upx;">
|
|||
|
|
<view v-for="(item, index) in DEVICE_NAME" :key="index" style="color:#606060;padding: 14upx 24upx;background-color: #F6F6F6;border-radius: 10upx;font-size: 28upx;margin-right: 20upx;margin-bottom: 20upx;">
|
|||
|
|
{{item}}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="form-box" style="border-radius: 10upx;border-top: 1px solid #e5e5e5;">
|
|||
|
|
<view class="form-item">
|
|||
|
|
<text class="label"><text style="color: red;">*</text>合同期限:</text>
|
|||
|
|
<view class="ipt-box"><uni-datetime-picker :clear-icon="false" v-model="dateRange" type="daterange" /></view>
|
|||
|
|
</view>
|
|||
|
|
<view class="form-item" >
|
|||
|
|
<text class="label">合同上传:</text>
|
|||
|
|
<view class="ipt-box">
|
|||
|
|
<view class="pic">
|
|||
|
|
<view class="img-box">
|
|||
|
|
<view class="img-item" v-for="(item, index) in imgs2" :key="index">
|
|||
|
|
<image class="remove-btn" @click="removeImg2(index)" src="/static/icons/delete-icon.png" mode=""></image>
|
|||
|
|
<image class="img" :src="item.replace(/[\r\n]/g,'')" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="img-item upload-btn" @click="chooseImg(1)" v-if="imgs2.length < 5"><image class="img" src="/static/imgs/tianjia-img.png" mode=""></image></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view style="font-size: 28rpx;font-weight: 600;color: red;border-bottom: 1px solid #eee;">互联网信息系统严禁存储、传输、处理涉及国家秘密企业秘密以及敏感信息，违者将严肃问责追责!</view>
|
|||
|
|
</view>
|
|||
|
|
<view class="form-item" >
|
|||
|
|
<text class="label">缴费凭证:</text>
|
|||
|
|
<view class="ipt-box">
|
|||
|
|
<view class="pic">
|
|||
|
|
<view class="img-box">
|
|||
|
|
<view class="img-item" v-for="(item, index) in imgs" :key="index">
|
|||
|
|
<image class="remove-btn" @click="removeImg(index)" src="/static/icons/delete-icon.png" mode=""></image>
|
|||
|
|
<image class="img" :src="item.replace(/[\r\n]/g,'')" mode=""></image>
|
|||
|
|
</view>
|
|||
|
|
<view class="img-item upload-btn" @click="chooseImg(0)" v-if="imgs.length < 5"><image class="img" src="/static/imgs/tianjia-img.png" mode=""></image></view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
<view style="font-size: 28rpx;font-weight: 600;color: red;border-bottom: 1px solid #eee;">互联网信息系统严禁存储、传输、处理涉及国家秘密企业秘密以及敏感信息，违者将严肃问责追责!</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
</view>
|
|||
|
|
<view class="occupied" style="height: 200upx;"></view>
|
|||
|
|
|
|||
|
|
<view style="position: fixed;bottom:0upx;width: 100%;;border-top: 1px solid #e5e5e5;height: 150upx;">
|
|||
|
|
<view>
|
|||
|
|
<view class="footer-btn footer-btn-two batchBtn" >
|
|||
|
|
<view style="background-color:#FEB952 ;" class="btn btn-col1 btn1" @click="callPhone(houseInfo.RESPONSIBLE_PHONE)">负责人电话</view>
|
|||
|
|
<view v-if="!submitResult" style="background-color:#4db4ea ;" class="btn btn-col1 btn2" @click="submit(1)">上传合同</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
<script>
|
|||
|
|
import listCell from '@/components/mix-list-cell';
|
|||
|
|
import uniPopup from '@/components/uni-popup/uni-popup.vue';
|
|||
|
|
import clipboard from '@/js_sdk/dc-clipboard/clipboard.js';
|
|||
|
|
import uniIcons from '@/components/uni-icons/uni-icons.vue';
|
|||
|
|
import { addSelectedHouse,getHouseType} from '@/common/api.js';
|
|||
|
|
import { formatImgUrl,vbPicture,callPhone,getStorage,callbackRequest,alertTip,callbackRequestNoLoading,convertImgToBase64,uploadImg} from '@/common/util.js';
|
|||
|
|
export default {
|
|||
|
|
components: {
|
|||
|
|
uniIcons,
|
|||
|
|
listCell,
|
|||
|
|
uniPopup
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
formatImgUrl:formatImgUrl,
|
|||
|
|
vbPicture:vbPicture,
|
|||
|
|
callPhone:callPhone,
|
|||
|
|
houseInfo:{},
|
|||
|
|
vbPicData:[],
|
|||
|
|
DEVICE_NAME:[],
|
|||
|
|
houseDevice:[],
|
|||
|
|
houseModel:[],
|
|||
|
|
applyId:'',
|
|||
|
|
dateRange:'',
|
|||
|
|
imgs:[],
|
|||
|
|
imgsId:[],
|
|||
|
|
imgs2:[],
|
|||
|
|
imgsId2:[],
|
|||
|
|
submitResult:false,
|
|||
|
|
submitFlag:true,
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
onLoad(option) {
|
|||
|
|
this.applyId = option.applyId;
|
|||
|
|
let houseInfo = option.houseInfo||{};
|
|||
|
|
this.houseInfo = JSON.parse(houseInfo);
|
|||
|
|
this.getHouseType("houseDevice");
|
|||
|
|
this.houseModel = JSON.parse(option.houseModel);
|
|||
|
|
let pictures = this.houseInfo.PICTURE||[];
|
|||
|
|
for(let i=0;i<pictures.length;i++){
|
|||
|
|
let newUrl = this.formatImgUrl(pictures[i]);
|
|||
|
|
this.vbPicData.push(newUrl);
|
|||
|
|
}
|
|||
|
|
console.log(this.houseInfo);
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
getHouseType(dataType){
|
|||
|
|
let params = {
|
|||
|
|
method: getHouseType,
|
|||
|
|
data: {
|
|||
|
|
dataType:dataType
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
callbackRequest(params).then(res => {
|
|||
|
|
res = res.data;
|
|||
|
|
if (res.returnCode == 1) {
|
|||
|
|
this.houseDevice = res.returnData;
|
|||
|
|
let device = this.houseInfo.DEVICE;
|
|||
|
|
var DEVICE_NAME = [];
|
|||
|
|
if(device!=null&&device!=''){
|
|||
|
|
let devices = device.split(",");
|
|||
|
|
for(let i=0;i<devices.length;i++){
|
|||
|
|
for(let j=0;j<this.houseDevice.length;j++){
|
|||
|
|
if(devices[i] == this.houseDevice[j].id){
|
|||
|
|
DEVICE_NAME.push(this.houseDevice[j].name);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
this.DEVICE_NAME = DEVICE_NAME;
|
|||
|
|
} else {
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
submit(){
|
|||
|
|
// console.log(this.imgsId.join())
|
|||
|
|
// console.log(this.imgsId2.length)
|
|||
|
|
// if (!this.dateRange) {
|
|||
|
|
// alertTip('请选择合同期限');
|
|||
|
|
// return false;
|
|||
|
|
// }
|
|||
|
|
// if (this.imgsId2.length==0) {
|
|||
|
|
// alertTip('请上传合同图片');
|
|||
|
|
// return false;
|
|||
|
|
// }
|
|||
|
|
if(!this.submitFlag){
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
this.submitFlag=false;
|
|||
|
|
uni.showModal({
|
|||
|
|
title: '确认',
|
|||
|
|
content: '请确认是否开始上传合同！',
|
|||
|
|
showCancel: true,
|
|||
|
|
cancelText: '取消',
|
|||
|
|
confirmText: '确认',
|
|||
|
|
success: res => {
|
|||
|
|
if (res.confirm) {
|
|||
|
|
let data = {
|
|||
|
|
method: addSelectedHouse,
|
|||
|
|
data: {
|
|||
|
|
// photo:this.imgsId.join(),
|
|||
|
|
// contractPhoto:this.imgsId2.join(),
|
|||
|
|
// contractStartTime:this.dateRange[0],
|
|||
|
|
// contractEndTime:this.dateRange[1],
|
|||
|
|
userId:getStorage('userInfo').userId,
|
|||
|
|
applyId:this.applyId,
|
|||
|
|
HOUSE_ID:this.houseInfo.UUID,
|
|||
|
|
HOUSE_NAME:this.houseInfo.HOUSE_NAME,
|
|||
|
|
HOUSE_TYPE:this.houseInfo.HOUSE_TYPE,
|
|||
|
|
HOUSE_ADDR:this.houseInfo.HOUSE_ADDR,
|
|||
|
|
ACREAGE:this.houseInfo.ACREAGE,
|
|||
|
|
MODEL:this.houseInfo.MODEL,
|
|||
|
|
BUILDING_YEAR:this.houseInfo.BUILDING_YEAR,
|
|||
|
|
DEVICE:this.houseInfo.DEVICE,
|
|||
|
|
RESPONSIBLE:this.houseInfo.RESPONSIBLE,
|
|||
|
|
RESPONSIBLE_PHONE:this.houseInfo.RESPONSIBLE_PHONE,
|
|||
|
|
PRICE:this.houseInfo.PRICE,
|
|||
|
|
RENT_TYPE:this.houseInfo.RENT_TYPE
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
// console.log(data,"data");
|
|||
|
|
callbackRequest(data).then(res => {
|
|||
|
|
res = res.data;
|
|||
|
|
if (res.returnCode == 1) {
|
|||
|
|
console.log(res);
|
|||
|
|
// uni.redirectTo({
|
|||
|
|
// url: '/pages/house/house?currentTabIndex=1'
|
|||
|
|
// });
|
|||
|
|
|
|||
|
|
this.submitFlag = true;
|
|||
|
|
alertTip(res.returnMsg);
|
|||
|
|
this.goPageA()
|
|||
|
|
} else {
|
|||
|
|
alertTip(res.returnMsg);
|
|||
|
|
this.submitFlag = true;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
} else if (res.cancel) {
|
|||
|
|
this.submitFlag = true;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
goPageA(){
|
|||
|
|
// 1. 获取当前页面栈实例（此时最后一个元素为当前页）
|
|||
|
|
let pages = getCurrentPages()
|
|||
|
|
// 2. 上一页面实例
|
|||
|
|
// 注意是length长度，所以要想得到上一页面的实例需要 -2
|
|||
|
|
// 若要返回上上页面的实例就 -3，以此类推
|
|||
|
|
let prevPage = pages[pages.length -4]
|
|||
|
|
// 3. 给上一页面实例绑定getValue()方法和参数（注意是$vm）
|
|||
|
|
prevPage.$vm.dataList()
|
|||
|
|
// 4. 返回上一页面
|
|||
|
|
uni.navigateBack({
|
|||
|
|
delta: 3 // 返回的页面数
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
formatHouseModel(houseModel){
|
|||
|
|
for(let i=0;i<this.houseModel.length;i++){
|
|||
|
|
let obj = this.houseModel[i];
|
|||
|
|
if(obj.id == houseModel){
|
|||
|
|
return obj.name;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
//上传图片
|
|||
|
|
|
|||
|
|
async chooseImg(type) {
|
|||
|
|
let chec = 0;
|
|||
|
|
let sty = [];
|
|||
|
|
let _this = this;
|
|||
|
|
uni.showActionSheet({
|
|||
|
|
itemList:['拍照','相册'],
|
|||
|
|
success:function(resp){
|
|||
|
|
chec = resp.tapIndex;
|
|||
|
|
if (chec == 0) {
|
|||
|
|
sty = ['camera']; //从相册相机选择
|
|||
|
|
} else {
|
|||
|
|
sty = ['album']; //从相册相机选择
|
|||
|
|
}
|
|||
|
|
uni.chooseImage({
|
|||
|
|
count:5,
|
|||
|
|
sizeType: ['compressed'],
|
|||
|
|
sourceType: sty,
|
|||
|
|
quality: 1,
|
|||
|
|
success: async function(res){
|
|||
|
|
let resData = res.tempFilePaths;
|
|||
|
|
for(let i=0;i<resData.length;i++){
|
|||
|
|
if(_this.imgs.length>3){
|
|||
|
|
break;
|
|||
|
|
}
|
|||
|
|
uni.getImageInfo({
|
|||
|
|
src: resData[i],
|
|||
|
|
success:async (path) => {
|
|||
|
|
convertImgToBase64(path.path, async function(base64) {
|
|||
|
|
if(_this.imgs.length<5||_this.imgs2.length<3){
|
|||
|
|
// _this.imgs.push(base64);
|
|||
|
|
uni.showLoading({
|
|||
|
|
title: '图片上传中'
|
|||
|
|
})
|
|||
|
|
let blength = base64.length;
|
|||
|
|
let glength = 7500;
|
|||
|
|
if(blength<=glength){
|
|||
|
|
let uploadParam = {
|
|||
|
|
base64: base64,
|
|||
|
|
userId: getStorage('userInfo').userId+i,
|
|||
|
|
groupEnd: '1'
|
|||
|
|
}
|
|||
|
|
await uploadImg(uploadParam).then(resu => {
|
|||
|
|
resu = resu.data ;
|
|||
|
|
uni.hideLoading();
|
|||
|
|
if (resu.returnCode != 1) {
|
|||
|
|
alertTip(resu.returnMsg);
|
|||
|
|
}else{
|
|||
|
|
if(type==0){
|
|||
|
|
_this.imgs.push(base64);
|
|||
|
|
_this.imgsId.push(resu.returnData+".jpg");
|
|||
|
|
}
|
|||
|
|
if(type==1){
|
|||
|
|
_this.imgs2.push(base64);
|
|||
|
|
_this.imgsId2.push(resu.returnData+".jpg");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}else{
|
|||
|
|
let fnum = parseInt(blength/glength);
|
|||
|
|
for(let j=1;j<fnum+1;j++){
|
|||
|
|
if(j==fnum){
|
|||
|
|
let groupBase = base64.slice((j-1)*glength);
|
|||
|
|
console.log(groupBase.length,"groupBaselength");
|
|||
|
|
let uploadParam = {
|
|||
|
|
base64: groupBase,
|
|||
|
|
userId: getStorage('userInfo').userId+i,
|
|||
|
|
groupEnd: '1'
|
|||
|
|
}
|
|||
|
|
await uploadImg(uploadParam).then(resu => {
|
|||
|
|
resu = resu.data ;
|
|||
|
|
if (resu.returnCode == 1) {
|
|||
|
|
if(type==0){
|
|||
|
|
_this.imgs.push(base64);
|
|||
|
|
_this.imgsId.push(resu.returnData+".jpg");
|
|||
|
|
}
|
|||
|
|
if(type==1){
|
|||
|
|
_this.imgs2.push(base64);
|
|||
|
|
_this.imgsId2.push(resu.returnData+".jpg");
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
uni.hideLoading();
|
|||
|
|
alertTip(resu.returnMsg);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}else{
|
|||
|
|
let groupBase = base64.slice((j-1)*glength,glength*j);
|
|||
|
|
let uploadParam = {
|
|||
|
|
base64: groupBase,
|
|||
|
|
userId: getStorage('userInfo').userId+i,
|
|||
|
|
groupEnd: '0'
|
|||
|
|
}
|
|||
|
|
await uploadImg(uploadParam).then(resu => {
|
|||
|
|
resu = resu.data ;
|
|||
|
|
if (resu.returnCode == 1) {
|
|||
|
|
} else {
|
|||
|
|
uni.hideLoading();
|
|||
|
|
alertTip(resu.returnMsg);
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
uni.hideLoading();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
fail:function(resp){
|
|||
|
|
console.log(resp.errMsg);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
//删除图片
|
|||
|
|
removeImg(index) {
|
|||
|
|
this.imgs.splice(index, 1);
|
|||
|
|
this.imgsId.splice(index, 1);
|
|||
|
|
console.log(this.imgs);
|
|||
|
|
console.log(this.imgsId);
|
|||
|
|
},
|
|||
|
|
removeImg2(index) {
|
|||
|
|
this.imgs2.splice(index, 1);
|
|||
|
|
this.imgsId2.splice(index, 1);
|
|||
|
|
console.log(this.imgs);
|
|||
|
|
console.log(this.imgsId);
|
|||
|
|
},
|
|||
|
|
alertTip() {
|
|||
|
|
alertTip('敬请期待');
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
<style lang="scss">
|
|||
|
|
@import '@/static/css/common.scss';
|
|||
|
|
|
|||
|
|
.img-box {
|
|||
|
|
overflow: hidden;
|
|||
|
|
padding-top: 20rpx;
|
|||
|
|
padding-bottom: 10rpx;
|
|||
|
|
|
|||
|
|
.img-item {
|
|||
|
|
float: left;
|
|||
|
|
width: 200upx;
|
|||
|
|
height: 200upx;
|
|||
|
|
border: 1px solid #ddd;
|
|||
|
|
margin: 0 22rpx 20upx 0upx;
|
|||
|
|
position: relative;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
|
|||
|
|
.img {
|
|||
|
|
display: block;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.remove-btn {
|
|||
|
|
position: absolute;
|
|||
|
|
top: -18upx;
|
|||
|
|
right: -18upx;
|
|||
|
|
width: 44upx;
|
|||
|
|
height: 44upx;
|
|||
|
|
z-index: 2;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.upload-btn {
|
|||
|
|
.img {
|
|||
|
|
width: 60upx;
|
|||
|
|
height: 60upx;
|
|||
|
|
margin: unset;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.form-box {
|
|||
|
|
background: #fff;
|
|||
|
|
.form-item {
|
|||
|
|
overflow: hidden;
|
|||
|
|
// border-bottom: 1px solid #eee;
|
|||
|
|
padding: 30upx 20upx;
|
|||
|
|
.label {
|
|||
|
|
float: left;
|
|||
|
|
width: 150upx;
|
|||
|
|
font-size: 32upx;
|
|||
|
|
color: #333;
|
|||
|
|
font-weight: bold;
|
|||
|
|
line-height: 68upx;
|
|||
|
|
}
|
|||
|
|
.ipt-box {
|
|||
|
|
margin-left: 160upx;
|
|||
|
|
input {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 50upx;
|
|||
|
|
line-height: 50upx;
|
|||
|
|
font-size: 26upx;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.select {
|
|||
|
|
.arrow {
|
|||
|
|
float: right;
|
|||
|
|
width: 16upx;
|
|||
|
|
height: 29upx;
|
|||
|
|
margin-top: 10upx;
|
|||
|
|
}
|
|||
|
|
.picker {
|
|||
|
|
height: 50upx;
|
|||
|
|
line-height: 50upx;
|
|||
|
|
font-size: 26upx;
|
|||
|
|
color: #666;
|
|||
|
|
margin-left: 10upx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.batchBtn{
|
|||
|
|
position: absolute;height: 140upx; background: white;padding-top: 30upx;
|
|||
|
|
.btn1{
|
|||
|
|
width:40%;margin-left:7%;margin-right: 6%;border-radius: 10upx;
|
|||
|
|
}
|
|||
|
|
.btn2{
|
|||
|
|
width:40%;border-radius: 10upx;
|
|||
|
|
}
|
|||
|
|
.btn3{
|
|||
|
|
width: 28%;margin-left: 4%;border-radius: 10upx;
|
|||
|
|
}
|
|||
|
|
.btn4{
|
|||
|
|
width: 28%;margin-left: 4%;border-radius: 10upx;
|
|||
|
|
}
|
|||
|
|
.btn5{
|
|||
|
|
width: 28%;margin-left: 4%;border-radius: 10upx;
|
|||
|
|
background: #348CF2;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
.tip-num {
|
|||
|
|
color: #fff;
|
|||
|
|
position: absolute;
|
|||
|
|
right: 48upx;
|
|||
|
|
top: -8upx;
|
|||
|
|
font-size: 24upx;
|
|||
|
|
background: red;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
width: 36upx;
|
|||
|
|
height: 36upx;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 36upx;
|
|||
|
|
}
|
|||
|
|
.index-container {
|
|||
|
|
overflow: hidden;
|
|||
|
|
|
|||
|
|
.banner {
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 500upx;
|
|||
|
|
border-radius: 10rpx;
|
|||
|
|
vertical-align: top;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.swiper-banner {
|
|||
|
|
height: 500upx;
|
|||
|
|
|
|||
|
|
.swiper-item {
|
|||
|
|
line-height: 50upx;
|
|||
|
|
@include overstepOne;
|
|||
|
|
|
|||
|
|
text {
|
|||
|
|
display: block;
|
|||
|
|
vertical-align: top;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.backlog {
|
|||
|
|
background: #f3f4fa;
|
|||
|
|
padding: 20rpx 30rpx;
|
|||
|
|
|
|||
|
|
.icon {
|
|||
|
|
float: left;
|
|||
|
|
width: 36rpx;
|
|||
|
|
height: 36rpx;
|
|||
|
|
vertical-align: top;
|
|||
|
|
margin-top: 8rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.fr-text {
|
|||
|
|
margin-left: 70rpx;
|
|||
|
|
|
|||
|
|
.swiper-box {
|
|||
|
|
height: 50upx;
|
|||
|
|
|
|||
|
|
.swiper-item {
|
|||
|
|
line-height: 50upx;
|
|||
|
|
@include overstepOne;
|
|||
|
|
|
|||
|
|
text {
|
|||
|
|
display: block;
|
|||
|
|
vertical-align: top;
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.category-view {
|
|||
|
|
border-bottom: 1px solid #e3e3e5;
|
|||
|
|
padding-bottom: 8rpx;
|
|||
|
|
|
|||
|
|
.category-name {
|
|||
|
|
padding: 36rpx 0 40rpx 20upx;
|
|||
|
|
font-size: 30upx;
|
|||
|
|
/* margin-bottom: 40upx; */
|
|||
|
|
font-weight: bold;
|
|||
|
|
line-height: 36rpx;
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
margin-right: 14upx;
|
|||
|
|
width: 36upx;
|
|||
|
|
height: 36upx;
|
|||
|
|
vertical-align: top;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.category-view:last-child {
|
|||
|
|
border-bottom: 0px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.box {
|
|||
|
|
display: flex;
|
|||
|
|
display: -webkit-flex;
|
|||
|
|
}
|
|||
|
|
/*水平排列*/
|
|||
|
|
.box-row-reverse {
|
|||
|
|
flex-direction: row;
|
|||
|
|
}
|
|||
|
|
/*上下排列*/
|
|||
|
|
|
|||
|
|
.box-column {
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
.box-left {
|
|||
|
|
justify-content: flex-start;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*居右*/
|
|||
|
|
.box-right {
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*居左*/
|
|||
|
|
.box-center {
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*居中*/
|
|||
|
|
.box-between {
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/*两端对齐*/
|
|||
|
|
.box-align-center {
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.box-wrap {
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.button-fun {
|
|||
|
|
margin-bottom: 36upx;
|
|||
|
|
position: relative;
|
|||
|
|
|
|||
|
|
image {
|
|||
|
|
width: 60upx;
|
|||
|
|
height: 60upx;
|
|||
|
|
margin-bottom: 4upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
text {
|
|||
|
|
font-size: 24upx;
|
|||
|
|
color: #666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.tip-num {
|
|||
|
|
color: #fff;
|
|||
|
|
position: absolute;
|
|||
|
|
right: 48upx;
|
|||
|
|
top: -8upx;
|
|||
|
|
font-size: 24upx;
|
|||
|
|
background: red;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
width: 36upx;
|
|||
|
|
height: 36upx;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 36upx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.wth25 {
|
|||
|
|
width: 24%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
%flex-center {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
%section {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-around;
|
|||
|
|
align-content: center;
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 10upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.server {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: row;
|
|||
|
|
justify-content: center;
|
|||
|
|
align-items: center;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
color: #929292;
|
|||
|
|
margin-top: 20upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.server .line {
|
|||
|
|
border-bottom: 1px solid #333333;
|
|||
|
|
width: 66.6667upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.server .s-text {
|
|||
|
|
font-size: 25upx;
|
|||
|
|
margin-left: 15upx;
|
|||
|
|
margin-right: 15upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-section {
|
|||
|
|
height: 373upx;
|
|||
|
|
padding: 20upx 20upx 0 20upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.img-icon {
|
|||
|
|
width: 70upx;
|
|||
|
|
height: 70upx;
|
|||
|
|
margin-bottom: 18upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.user-info-box {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.cover-container {
|
|||
|
|
background: $page-color-base;
|
|||
|
|
padding: 0 30upx;
|
|||
|
|
position: relative;
|
|||
|
|
background: #f5f5f5;
|
|||
|
|
padding-bottom: 20upx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.order-section {
|
|||
|
|
@extend %section;
|
|||
|
|
padding: 28upx 0;
|
|||
|
|
margin-top: 20upx;
|
|||
|
|
|
|||
|
|
.order-item {
|
|||
|
|
@extend %flex-center;
|
|||
|
|
width: 120upx;
|
|||
|
|
height: 120upx;
|
|||
|
|
border-radius: 10upx;
|
|||
|
|
font-size: $font-sm;
|
|||
|
|
color: $font-color-dark;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.yticon {
|
|||
|
|
font-size: 48upx;
|
|||
|
|
margin-bottom: 18upx;
|
|||
|
|
color: #fa436a;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.history-section {
|
|||
|
|
padding: 10upx 0 0;
|
|||
|
|
margin-top: 20upx;
|
|||
|
|
background: #fff;
|
|||
|
|
border-radius: 10upx;
|
|||
|
|
|
|||
|
|
.sec-header {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
font-size: $font-base;
|
|||
|
|
color: $font-color-dark;
|
|||
|
|
line-height: 40upx;
|
|||
|
|
margin-left: 30upx;
|
|||
|
|
|
|||
|
|
.yticon {
|
|||
|
|
font-size: 44upx;
|
|||
|
|
color: #5eba8f;
|
|||
|
|
margin-right: 16upx;
|
|||
|
|
line-height: 40upx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.img-b {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 330upx;
|
|||
|
|
}
|
|||
|
|
.tip-area {
|
|||
|
|
opacity: 0.8;
|
|||
|
|
filter: alpha(opacity=20);
|
|||
|
|
position: absolute;
|
|||
|
|
background: #ffffff;
|
|||
|
|
width: 60upx;
|
|||
|
|
height: 60upx;
|
|||
|
|
text-align: center;
|
|||
|
|
line-height: 36upx;
|
|||
|
|
}
|
|||
|
|
</style>
|