Skip to content

M
mallapp
Commit 5eecc271 authored by 黄奎's avatar 黄奎
Browse files
Options

页面修改

parent a38ab5d0
Show whitespace changes
Inline Side-by-side
Showing with 662 additions and 735 deletions
components/goods/goodsku.vue
View file @ 5eecc271
......@@ -16,8 +16,7 @@
</view>
</view>
</view>
<scroll-view scroll-y class="sku-box"
:style="{'max-height':x.isdateformat==1?'400px':'300px'}">
<scroll-view scroll-y class="sku-box" :style="{'max-height':x.isdateformat==1?'400px':'300px'}">
<view class="sku-item" v-for="(x, i) in g.attr_groups" :key="i" v-if="x.isdateformat==0">
<view class="sku-title">{{ x.attr_group_name }} </view>
<view>
......@@ -31,7 +30,7 @@
</view>
</view>
</view>
<view class="sku-item" v-for="(x, i) in g.attr_groups" v-if="x.isdateformat==1">
<!-- <view class="sku-item" v-for="(x, i) in g.attr_groups" v-if="x.isdateformat==1">
<view class="sku-title">{{ x.attr_group_name }} </view>
<view>
<view class="sku-chi" :style="{
......@@ -43,15 +42,12 @@
<text class="val">{{ y.attr_name }}</text>
</view>
</view>
</view>
</view> -->
<view class="sku-item" v-for="(x, i) in g.attr_groups" v-if="x.isdateformat==1">
<!--x.isdateformat=1 改成日历模式 -->
<view class="sku-title">{{ x.attr_group_name }} </view>
<view>
<calendar @finish="chosenDateResult"
:defaultDate="x.attr_list[0].attr_name"
:immediately="true"
:priceList="x.attr_list"></calendar>
<calendar @finish="chosenDateResult" :defaultDate="x.attr_list[0].attr_name" :immediately="true" :priceList="x.attr_list"></calendar>
</view>
</view>
</scroll-view>
......@@ -250,11 +246,10 @@
},
methods: {
chosenDateResult(result) {
console.log(result,'---')
for(let index=0;index<this.g.attr_groups.length;index++){
for(let j=0;j<this.g.attr_groups[index].attr_list.length;j++){
if(this.g.attr_groups[index].attr_list[j].attr_name==result.start){
this.clickSkuItemHandler(j,index)
for (let index = 0; index < this.g.attr_groups.length; index++) {
for (let j = 0; j < this.g.attr_groups[index].attr_list.length; j++) {
if (this.g.attr_groups[index].attr_list[j].attr_name == result.start) {
this.clickSkuItemHandler(j, index)
}
}
}
......@@ -420,8 +415,6 @@
}
});
}
if (unchosen != '') {
this.sku = unchosen;
this.skuObj = null;
......@@ -493,15 +486,13 @@
}
});
}
console.log("priceSign", priceSign);
console.log("sign", sign);
if (this.g.attr_groups && this.g.attr_groups.length > 0) {
this.g.attr_groups.forEach((x, index) => {
if (x.isdateformat == 1) {
if (x.attr_list && x.attr_list.length > 0) {
x.attr_list.forEach((subItem,subIndex) => {
x.attr_list.forEach((subItem, subIndex) => {
var newSign = (subIndex + 1) + ":" + priceSign;
console.log("subItem",subItem);
if (this.g.attr && this.g.attr.length) {
this.g.attr.forEach(y => {
if (y.sign_id == newSign) {
......@@ -512,13 +503,10 @@
}
})
}
console.log("x", x)
}
});
}
console.log("this.g.attr_groups", this.g.attr_groups)
if (this.g.attr && this.g.attr.length) {
this.g.attr.forEach(x => {
if (x.sign_id == sign) {
......@@ -526,12 +514,9 @@
}
});
}
if (this.skuObj != null) {
this.goodimage = this.skuObj.pic_url || this.g.cover_pic;
this.goodprice = (parseFloat(this.skuObj.price) * parseFloat(this.gc)).toFixed(2);
console.log("this.goodprice2", this.goodprice);
this.goodamount = this.skuObj.stock;
}
},
......
components/goods/sign/index.vue
View file @ 5eecc271
<template>
<view class="contentBox">
<scroll-view
:scroll-y="true"
style="height: 100%; flex: 1; box-sizing: border-box"
>
<scroll-view :scroll-y="true" style="height: 100%; flex: 1; box-sizing: border-box">
<view class="header">
<view class="tabsBox" style="margin-bottom: 20rpx;">
<view v-for="(item,index) in d"
class="fontw100"
:class="[active==item.Id?'active':'']"
:style="{'color':active==item.Id?mainColor:''}"
<view v-for="(item,index) in d" class="fontw100" :class="[active==item.Id?'active':'']" :style="{'color':active==item.Id?mainColor:''}"
@click="changeHandler(item.Id)">
<view>{{item.Name}}</view>
<text class="fontw100" :style="{'color':mainColor}">￥{{item.minprices}}
......@@ -33,17 +27,9 @@
<template v-if="activeMonth.Month==res.month">
<!-- <view class="year">{{ res.year }}年{{ res.month }}月</view> -->
<view class="day">
<view
v-for="week in res.oneDayWeek"
class="day-list"
:style="{ width: (dayWidth - 10) / 7 + 'px' }"
></view>
<view
@tap="selectDay(line, index, (line + 1).toString() + index)"
v-for="(item, index) in res.day"
:key="index"
class="day-list"
:class="[
<view v-for="week in res.oneDayWeek" class="day-list" :style="{ width: (dayWidth - 10) / 7 + 'px' }"></view>
<view @tap="selectDay(line, index, (line + 1).toString() + index)" v-for="(item, index) in res.day" :key="index"
class="day-list" :class="[
line == start[0] && index == start[1]
? 'bg-orange select-style'
: '',
......@@ -88,21 +74,12 @@
line == end[0] && index == end[1] ? '#111' : '',
color: line == end[0] && index == end[1] ? '#FFFFFF' : '',
background: line == start[0] && index == start[1]?mainColor:''
}"
>
}">
<view style="padding-top: 2px; padding-bottom: 2px">{{
item
}}</view>
<!-- <view class="select-style" v-if="line == start[0] && index == start[1]">最早</view>
<view class="select-style" v-if="line == end[0] && index == end[1]">最晚</view> -->
<view
style="font-size: 12px; padding-bottom: 3px"
v-if="priceStauts.length > 0"
>
<view v-if="priceStauts[line][index] > 0"
>￥{{ priceStauts[line][index] }}</view
>
<view style="font-size: 12px; padding-bottom: 3px" v-if="priceStauts.length > 0">
<view v-if="priceStauts[line][index] > 0">￥{{ priceStauts[line][index] }}</view>
<view v-if="priceStauts[line][index] < 0">售罄</view>
</view>
</view>
......@@ -121,10 +98,9 @@
</template>
<script>
//引入节假日的数据，也可以用后台返回去渲染
import json from "./day.js";
export default {
//引入节假日的数据，也可以用后台返回去渲染
import json from "./day.js";
export default {
props: {
priceList: {
type: Array,
......@@ -151,7 +127,6 @@ export default {
//计算日历里的节假日
resDate() {
if (this.date.length == 0) return;
for (var i = 0; i < this.date.length; i++) {
for (var j = 0; j < this.festival.length; j++) {
if (
......@@ -170,15 +145,12 @@ export default {
}
}
}
return this.date;
},
},
data() {
return {
d: [
// {Id:1,Name:'2月'}
],
d: [],
mainColor: "",
active: 0,
activeMonth: null,
......@@ -193,8 +165,7 @@ export default {
startDay: "", //入住日期
startWeek: "", //入住时间的周几
end: [], //离开时间
endDay: "", //离开日期
endWeek: "", //离开时间的周几
day: 0, //多少晚
priceStauts: [], //价格状态
lastNot: [0, 10], //前置的无房操作
......@@ -205,10 +176,9 @@ export default {
this.userDefaultDate = this.defaultDate;
uni.getSystemInfo({
success: (res) => {
this.dayWidth = res.windowWidth-20;
this.dayWidth = res.windowWidth - 20;
},
});
this.setDate();
const Dates = new Date()
var dateTime = new Date();
......@@ -218,37 +188,36 @@ export default {
this.start = this.setDefaultDate(this.userDefaultDate);
}
this.priceStauts = this.initPrice();
this.mainColor = this.$uiConfig.mainColor;
let ThisYearMonth = ''
for(let i=0;i<4;i++){
for (let i = 0; i < 4; i++) {
let Year = Dates.getFullYear()
let Month = Dates.getMonth()+(i+1)
if(ThisYearMonth&&ThisYearMonth==12){
Year = Dates.getFullYear()+1
let Month = Dates.getMonth() + (i + 1)
if (ThisYearMonth && ThisYearMonth == 12) {
Year = Dates.getFullYear() + 1
}
if(Month==12) ThisYearMonth = Month
if (Month == 12) ThisYearMonth = Month
let obj = {
Id: i,
Year,
Month,
Name: Month+'月',
prices:[],
Name: Month + '月',
prices: [],
minprices: 0,
}
this.d.push(obj)
}
for(let i = 0;i<this.priceList.length;i++){
for (let i = 0; i < this.priceList.length; i++) {
let datas = this.priceList[i].attr_name.split('-')
for(let j = 0;j<this.d.length;j++){
let m = this.d[j].Month>9?this.d[j].Month:'0'+this.d[j].Month
if(datas[1]==m){
for (let j = 0; j < this.d.length; j++) {
let m = this.d[j].Month > 9 ? this.d[j].Month : '0' + this.d[j].Month
if (datas[1] == m) {
this.d[j].prices.push(this.priceList[i].newPrice)
}
}
}
this.d.forEach(x=>{
x.minprices = Math.min.apply(null,x.prices)
this.d.forEach(x => {
x.minprices = Math.min.apply(null, x.prices)
})
this.activeMonth = this.d[0]
// #ifdef MP-ALIPAY
......@@ -307,16 +276,17 @@ export default {
this.lastNot = [];
}
},
priceList(newVal) {
this.priceStauts = this.initPrice();
}
},
methods: {
changeHandler(i) {
console.log(i)
this.active = i;
this.$emit('getMonth')
this.activeMonth = this.d.find(x=>{
this.activeMonth = this.d.find(x => {
return x.Id == i
})
},
initPrice() {
//年份
......@@ -330,7 +300,6 @@ export default {
for (var j = 0; j < new Date(year, month + 1, 0).getDate(); j++) {
let isexsit = false;
this.priceList.forEach((x) => {
let m = month + 1 > 9 ? month + 1 : "0" + (month + 1);
let d = j + 1 > 9 ? j + 1 : "0" + (j + 1);
if (x.attr_name == `${year}-${m}-${d}`) {
......@@ -354,7 +323,6 @@ export default {
month++;
}
}
return data;
},
//月份补零
......@@ -368,7 +336,6 @@ export default {
//如果是节假日名称则返回选择的日期天数
isFestival(line, index, push = false) {
var date = this.date[line].day[index];
if (isNaN(date)) {
var newIndex = this.date[line].day.indexOf(date) + 1;
if (push) return newIndex;
......@@ -390,13 +357,9 @@ export default {
//设置入住时间 如果没有传值则根据默认值设置
setDefaultDate(data) {
var arr = [0, parseInt(this.nowDay - 1)];
var start = data.indexOf("-") != -1 ? data.split("-") : data.split("/");
var year = new Date().getFullYear();
var month = new Date().getMonth() + 1;
for (var i = 0; i < this.date.length; i++) {
if (this.date[i].year == start[0] && this.date[i].month == start[1]) {
if (year == start[0] && month == start[1] && start[2] < this.nowDay) {
......@@ -409,19 +372,6 @@ export default {
}
return arr;
},
//清空
reset() {
this.start = [];
this.end = [];
this.day = 0;
},
//补零操作
setPull(day) {
if (day < 10) {
day = "0" + day;
}
return day;
},
//计算天数
getDay(date1, date2) {
//获得天数
......@@ -437,7 +387,6 @@ export default {
var myDate = new Date(Date.parse(date));
return weekDay[myDate.getDay()];
},
//选择入住离开
selectDay(line, index) {
if (this.priceStauts[line][index] == 0) {
......@@ -453,8 +402,7 @@ export default {
} else {
this.start = [line, index];
}
if (this.priceStauts[line][index]&&this.immediately) {
if (this.priceStauts[line][index] && this.immediately) {
this.submit();
}
},
......@@ -462,17 +410,14 @@ export default {
setDate() {
//年份
var year = new Date().getFullYear();
//月份
var month = new Date().getMonth();
console.log("执行了...");
for (let i = 0; i < this.count; i++) {
var day = [];
var week = 0;
for (var j = 0; j < new Date(year, month + 1, 0).getDate(); j++) {
day.push(j + 1);
}
this.date.push({
year: year,
month: month + 1,
......@@ -488,18 +433,11 @@ export default {
month++;
}
}
return this.date;
},
//关闭
close() {
uni.navigateBack({
delta: 1,
});
},
//确定入住离店事件提交
submit() {
let m = this.activeMonth.Month>9?this.activeMonth.Month:'0'+this.activeMonth.Month;//this.date[0].month>9?this.date[0].month:'0'+this.date[0].month;
let m = this.activeMonth.Month > 9 ? this.activeMonth.Month : '0' + this.activeMonth.Month; //this.date[0].month>9?this.date[0].month:'0'+this.date[0].month;
let d = this.isFestival(this.start[0], this.start[1], true);
d = d > 9 ? d : "0" + d;
var obj = {
......@@ -513,21 +451,22 @@ export default {
obj.priceObj = i;
}
});
this.$emit("finish", obj);
},
},
};
};
</script>
<style>
.fontw100{
.fontw100 {
font-weight: 100;
}
.tabsBox{
.tabsBox {
display: flex;
}
.tabsBox view{
.tabsBox view {
width: auto;
display: flex;
flex-direction: column;
......@@ -536,7 +475,8 @@ export default {
width: 100%;
text-align: center;
}
.tabsBox view.active .tabsLine{
.tabsBox view.active .tabsLine {
width: 100%;
position: absolute;
bottom: -4px;
......@@ -545,12 +485,14 @@ export default {
height: 3px;
border-radius: 2px;
}
.tabsBox view text{
.tabsBox view text {
width: 100%;
font-size: 13px;
}
/**确认按钮**/
.submit {
/**确认按钮**/
.submit {
width: 100%;
background: white;
......@@ -558,87 +500,87 @@ export default {
bottom: 0upx;
height: auto;
}
}
.sub-btn {
.sub-btn {
height: auto;
border-radius: 10upx;
background: #111;
color: white;
}
}
.contentBox {
.contentBox {
height: 100%;
margin-top: 10px;
/* z-index: 999; */
}
}
/**不能预订**/
/**不能预订**/
/* 入住离开时间的color */
.bg-orange {
/* 入住离开时间的color */
.bg-orange {
/* background: #111111 !important; */
border-radius: 6px !important;
}
}
.bg-higlt-orange {
.bg-higlt-orange {
background-color: #fff;
}
}
/* 节假日的日期样式 */
.is-festival {
/* 节假日的日期样式 */
.is-festival {
font-size: 22rpx !important;
color: #000 !important;
}
}
/** 非节假日的日期样式**/
.not-festival {
/** 非节假日的日期样式**/
.not-festival {
font-size: 18upx;
color: white;
}
}
/***入住离开时间的日历样式*/
/***入住离开时间的日历样式*/
.not-sub {
.not-sub {
color: #222222;
background: #dddddd;
}
}
.select-out-item {
.select-out-item {
background: #ffffff;
}
}
.select-style {
.select-style {
color: white !important;
font-size: 20rpx !important;
/* font-size: 20upx; */
/* padding-top: 4upx; */
}
}
.time-out {
.time-out {
/* text-decoration: line-through; */
color: #ccc !important;
}
}
/**
/**
* 点击日期的样式
*/
.bg {
.bg {
background: orange;
}
}
/**
/**
* 日期部分
*/
.section {
.section {
width: 100%;
/* padding-bottom: 150upx; */
height: auto;
padding-top: 16rpx;
background-color: #f1f4f6;
}
}
.section > .item > .year {
.section>.item>.year {
text-align: center;
height: 50rpx;
font-weight: bold;
......@@ -647,17 +589,17 @@ export default {
font-size: 24rpx;
line-height: 50rpx;
color: #1b1d1e;
}
}
.section > .item > .day {
.section>.item>.day {
display: flex;
flex-wrap: wrap;
text-align: center;
margin-left: 5px;
margin-right: 5px;
}
}
.section > .item > .day > .day-list {
.section>.item>.day>.day-list {
/* margin-top: 30upx;
margin-bottom: 30upx;
min-height: 100upx;
......@@ -672,30 +614,30 @@ export default {
align-items: center;
justify-content: center;
color: #1b1d1e;
}
}
/**
/**
* 头部固定
*/
.header {
.header {
position: relative;
top: 0;
width: 100%;
/* height: 400upx; */
background: white;
box-shadow: 0px 10rpx 30rpx 0px rgba(36, 36, 36, 0.06);
}
}
.bar {
.bar {
width: 100%;
height: var(--status-bar-height);
background: #222222;
}
}
/**
/**
* 关闭清空
*/
.set {
.set {
height: 100upx;
padding-left: 30upx;
padding-right: 30upx;
......@@ -703,71 +645,71 @@ export default {
align-items: center;
display: flex;
justify-content: space-between;
}
}
/**
/**
* 入住离开时间
*/
.in-and-out {
.in-and-out {
height: 210upx;
padding-left: 30upx;
padding-right: 30upx;
display: flex;
align-items: center;
justify-content: space-between;
}
}
/**
/**
* 入住离开的view
*/
.in-and-out > .item {
.in-and-out>.item {
display: flex;
flex-direction: column;
height: 100upx;
}
}
/**
/**
* 未选择入离时间时的文字样式
*/
.in-and-out > .text {
.in-and-out>.text {
margin-top: 100upx;
font-weight: bold;
font-size: 36upx;
color: #c0c0c0;
}
}
/**
/**
* 一共选择了多少晚的样式
*/
.in-and-out > .item > .count-border {
.in-and-out>.item>.count-border {
width: 200upx;
font-size: 28upx;
height: 40upx;
margin-top: 48upx;
text-align: center;
}
}
.gray {
.gray {
color: #c0c0c0;
border-bottom: 1px solid #c0c0c0;
}
}
.orange {
.orange {
color: orange;
border-bottom: 1px solid orange;
}
}
/**
/**
* 共多少晚
*/
.in-and-out > .item > .count-border > .count {
.in-and-out>.item>.count-border>.count {
font-size: 10px;
}
}
/**
/**
* 周一到周日
*/
.week {
.week {
/* height: 70upx; */
display: flex;
justify-content: space-between;
......@@ -780,13 +722,13 @@ export default {
color: #1b1d1e;
/* background: #eee; */
margin-bottom: 16rpx;
}
}
.isa {
.isa {
color: red;
}
}
.isa2 {
.isa2 {
color: red;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment