Skip to content

dev / zhiliang-light-mp

Go to a project
Toggle navigation
Toggle navigation pinning
5f973076 by simon
Options

默认提交

1 parent 7247f8c5
Inline Side-by-side
Showing 18 changed files with 928 additions and 10 deletions
......@@ -76,8 +76,10 @@
"auction-bid-comp": "../../component/auction-bid-comp/auction-bid-comp",
"auction-bid-success-comp": "../../component/auction-bid-success-comp/auction-bid-success-comp",
"auction-bid-fail-comp": "../../component/auction-bid-fail-comp/auction-bid-fail-comp",
"seckill-order-comp": "../../component/seckill-order-comp/seckill-order-comp",
"empty-tips": "../../component/empty-tips/empty-tips",
"empty-tips-light": "../../component/empty-tips-light/empty-tips-light",
"van-stepper": "../../ui/vant-weapp/stepper/index",
"van-popup": "../../ui/vant-weapp/popup/index"
}
}
......
let app = getApp();
Component({
options: {
styleIsolation: 'apply-shared'
},
properties: {
// 这里定义了innerText属性，属性值可以在组件使用时指定
// cid 用户区分组件
cid: {
type: String,
value: '1',
},
innerTitle: {
type: String,
value: '',
},
innerText: {
type: String,
value: '',
},
innerButton: {
type: String,
value: '确定',
},
userInfo: {
type: Object,
value: {}
},
productInfo: {
type: Object,
value: {}
},
},
data: {
// 这里是一些组件内部数据
someData: {},
num: 1,
},
methods: {
// 这里是一个自定义方法
customMethod() {
this.triggerEvent('evtcomp', {
name: "_evt_custom"
})
},
onStepperChange(e) {
this.setNum(e.detail);
},
setNum(val) {
this.setData({
num: val
})
},
// 隐藏蒙层
hideMask() {
this.triggerEvent('evtcomp', {
name: "_evt_hide_mask"
});
},
// 点击自定义按钮
onInnerButtonHandler() {
this.triggerEvent('evtcomp', {
name: "_evt_hide_mask"
});
}
}
})
@import '../../assets/scss/mixins';
@import '../../assets/scss/utils';
.comp-item {
width: 650px;
min-height: 496px;
border-radius: 10px;
background-color: #ffffff;
padding-bottom: 244px;
.remove {
position: absolute;
right: 16px;
top: 16px;
font-size: 40px;
color: #333333;
}
.cspace {
height: 76px;
}
.cont {
// text-align: center;
width: 572px;
margin: 0 auto;
.product {
@extend .bb;
display: flex;
// justify-content: space-between;
.prize {
.image {
width: 180px;
height: 180px;
}
}
.con {
@extend .bb;
padding: 0 0 0 24px;
display: flex;
align-content: space-between;
justify-content: flex-start;
flex-wrap: wrap;
.tt {
font-size: 24px;
width: 100%;
}
.t1 {
font-size: 30px;
}
.t2 {
// margin-top: 16px;
display: flex;
align-items: center;
.t2-1 {
font-size: 30px;
}
.t2-2 {
font-size: 20px;
color: #888888;
margin-left: 20px;
}
}
.t3 {
font-size: 36px;
}
}
}
// 表单
.table {
width: 572px;
margin: 32px auto 0;
border: solid 1PX #c7c7c7;
@extend .bb;
padding: 24px 28px;
border-radius: 8px;
min-height: 380px;
.tips {
font-size: 18px;
color: #888888;
}
.form {
margin: 48px 0 0;
color: #444444;
font-size: 26px;
&-item {
display: flex;
align-items: center;
margin: 10px 0;
height: 48px;
.label {
width: 140px;
}
.val {
flex: 1;
}
.ipt {
border-bottom: solid 1PX #444444;
}
}
}
.empty-tips {
color: #444444;
text-align: center;
margin-top: 80px;
font-size: 32px;
line-height: 60px;
}
}
}
.btn-wrap {
position: absolute;
left: 0;
right: 0;
bottom: 74px;
margin: 0 auto;
display: flex;
justify-content: center;
.btn {
@include cb();
margin: 0 16px;
}
.btn2 {
@include cb2();
}
}
}
<wxs module="filter" src="../../utils/utilswxs.wxs"></wxs>
<view class="comp-item">
<span class="iconfont iconbaseline-close-px remove" bindtap="hideMask"></span>
<view class="cspace"></view>
<view class="cont">
<view class="product">
<view class="prize">
<image class="image" mode="aspectFill" src="{{productInfo.seckillImages && productInfo.seckillImages[0] || ''}}" />
</view>
<view class="con">
<view class="tt t1">{{productInfo.seckillName}}</view>
<block wx:if="{{productInfo.minNum == productInfo.maxNum}}">
<!-- 固定个数 -->
<view class="tt t2">
<view class="t2-1">{{productInfo.minNum}}个</view>
<view class="t2-2">数量不可修改</view>
</view>
</block>
<block wx:else>
<!-- 不定个数 -->
<view class="tt t2">
<view class="t2-1">
<van-stepper bind:change="onStepperChange" value="{{ num }}" min="{{productInfo.minNum}}" max="{{productInfo.maxNum}}" integer />
</view>
<view class="t2-2">可选填{{productInfo.minNum}}-{{productInfo.maxNum}}个</view>
</view>
</block>
<view class="tt t3 price">￥{{filter.Fen2Yuan(productInfo.originalPrice*num)}}</view>
</view>
</view>
<!-- 表单 -->
<view class="table" wx:if="{{1>10}}">
<view class="tips">*本活动仅记录订单，无需付款，后期由线下工作人员另行安排支付与配送，请确保收货信息准确。</view>
<view class="form">
<view class="form-item">
<view class="label">收件人：</view>
<view class="val">{{userInfo.realName}}</view>
</view>
<view class="form-item">
<view class="label">联系方式：</view>
<view class="val">{{userInfo.memberPhone}}</view>
</view>
<view class="form-item">
<view class="label">店名：</view>
<view class="val">{{userInfo.storeName}}</view>
</view>
<view class="form-item">
<view class="label">备注：</view>
<!-- <view class="val">{{userInfo.storeName}}</view> -->
<input value="{{remark}}" bindinput="bindRemarkInput" class="val ipt" placeholder="请填写备注" />
</view>
</view>
</view>
<!-- 无存库 -->
<view class="table" wx:else>
<view class="empty-tips">
<text class="txt">抱歉来晚一步，库存已告罄\n下次再来吧！</text>
</view>
</view>
</view>
<view class="btn-wrap">
<view bindtap="onInnerButtonHandler" class="btn">确认下单</view>
</view>
</view>
......@@ -270,7 +270,7 @@ Page({
openSocket() {
let memberCode = this.data.userInfo.memberCode;
let auctionCode = this.data.options.code;
let wsUrl = 'wss://ow.go.qudone.com/zlzm/websocket/' + memberCode + auctionCode;
let wsUrl = 'wss://ow.go.qudone.com/zlzm/websocket/auction/' + memberCode + auctionCode;
// console.log("wsUrl:", wsUrl);
if (!memberCode || !auctionCode) {
wx.showModal({
......
......@@ -51,7 +51,7 @@ $contentWidth:690px;
.arrow {
top: 0;
left: 450px;
left: 500px;
position: absolute;
width: 0;
height: 0;
......@@ -96,7 +96,7 @@ $contentWidth:690px;
&-right {
text-align: right;
@extend .linear;
width: 300px;
width: 250px;
height: $funcHei;
@include border-right-radius(4px);
......
......@@ -35,7 +35,7 @@
<view bindtap="queryAuctionRecordLast" class="refresh-btn">刷新价格</view>
<view class="desc-tit">{{productInfo.auctionName}}</view>
<view class="desc-t1">{{productInfo.auctionDescription}}</view>
<view class="desc-t1">{{productInfo.district}}</view>
<view class="desc-t1">活动区域：{{productInfo.district}}</view>
</view>
<!-- 线 -->
<view class="line"></view>
......
......@@ -134,7 +134,7 @@ $contentWidth:690px;
position: absolute;
right: 2px;
top: -28px;
font-size: 40rpx;
font-size: 40px;
}
}
}
......
import {
getBindtapData
getBindtapData,
formatDateTime,
} from '../../utils/util';
let Date = require('../../utils/date.js');
var timer = require('../../utils/wxTimer.js');
var wxTimer;
let app = getApp();
Page({
data: {},
data: {
authorizeVisible: false,
seckillOrderVisible: true,
userInfo: {},
productInfo: {},
navBackTimeout: 0,
options: {},
wxTimerList: {},
lastTime: "",
},
onShareAppMessage() {},
showAuth() {
this.setData({
authorizeVisible: true
})
},
onLoad(options) {},
onShow() {
if (wxTimer) {
wxTimer.calibration()
}
},
onLoad(options) {
this.setData({
options
})
this.querySeckillDetail().then((result) => {
this.startTimer();
})
this.initData();
},
onUnload() {
this.removeTimer();
},
initData() {
this.queryMember().then((result) => {});
},
// 开始倒计时
startTimer() {
let _this = this;
if (wxTimer) {
wxTimer.stop();
}
let beginTime = _this.getTimeStr();
console.log("beginTime:", beginTime);
if (!beginTime) return;
wxTimer = new timer({
beginTime: beginTime,
complete() {
_this.removeTimer();
_this.querySeckillDetail();
},
interval: 1,
intervalFn() {
let lastTime = _this.getTimeStr({
day: true
});
_this.setData({
lastTime
})
// console.log("lastTime:", lastTime);
}
})
wxTimer.start(_this);
},
/**
* 移除倒计时
*/
removeTimer() {
if (wxTimer) {
wxTimer.stop()
}
},
/**
* 获取时间字符串
* @param {*} initObj
*/
getTimeStr(initObj) {
let productInfo = this.data.productInfo;
let endTime = productInfo && productInfo.endTime || 0;
return formatDateTime(endTime, initObj)
},
/**
* 我要秒杀
*/
onSubmitHandler() {
let productInfo = this.data.productInfo;
if (productInfo && productInfo.status == 1) {
// 显示弹窗
this.setData({
seckillOrderVisible: true
})
let minNum = productInfo.minNum;
this.seckillOrderComp = this.selectComponent("#seckillOrderComp");
console.log("this.seckillOrderComp:",this.seckillOrderComp);
console.log("minNum:",minNum);
if (this.seckillOrderComp) {
this.seckillOrderComp.setNum(minNum);
}
}
},
/**
* 秒杀详情
*/
querySeckillDetail() {
let code = this.data.options.code;
let _this = this;
return new Promise((resolve, reject) => {
app.post({
url: app.api.seckillDetail,
data: {
seckillCode: code
}
}).then((result) => {
this.setData({
productInfo: result
})
console.log("result:", result);
resolve();
}).catch((err) => {
clearTimeout(_this.data.navBackTimeout);
_this.data.navBackTimeout = setTimeout(() => {
wx.navigateBack({
delta: 1
});
}, 1000);
});
})
},
/**
* 拍卖出价提交
* @param {*} price
*/
querySeckillSubmit(price) {
let code = this.data.options.code;
app.post({
toast: false,
url: app.api.seckillSubmit,
data: {
seckillCode: code,
price: price * 100 //转成分
}
}).then((result) => {
console.log("result:", result);
// this.setData({
// auctionBidSuccessVisible: true
// })
}).catch((err) => {
console.log("querySeckillSubmit err:", err);
// switch (err.code) {
// // 来晚一步，该价格已经被其他用户提交 显示组件
// case 1010:
// this.setData({
// auctionBidFailVisible: true
// })
// break;
// default:
// wx.showToast({
// title: err.errMsg || "系统开小差"
// })
// break;
// }
});
},
/**
* 获取会员信息
*/
queryMember() {
return new Promise((resolve, reject) => {
app.post({
url: app.api.member,
data: {}
}).then((result) => {
this.setData({
userInfo: result
})
resolve(result);
})
});
},
// 隐藏蒙层
hideMask() {
this.setData({
authorizeVisible: false,
seckillOrderVisible: false,
})
},
// 子组件事件
......@@ -24,6 +213,7 @@ Page({
name,
data
} = evt.detail;
console.log("@seckill-detail || evt:", name)
switch (name) {
// 隐藏弹窗
......@@ -31,6 +221,8 @@ Page({
this.hideMask();
break;
default:
break;
}
......
{
"navigationBarTitleText": "demo"
"navigationBarTitleText": "秒杀活动"
}
......
@import '../../assets/scss/mixins';
@import '../../assets/scss/utils';
$contentWidth:690px;
.page {
padding-bottom: $pageBottom;
.bgc {}
.bg {}
.main {
.top-space {
height: 0px;
}
.content {
position: relative;
min-height: 1000px;
// 产品图片
.img-wrap {
$imgWidth: 750px;
$imgHeight: 480px;
width: $imgWidth;
height: $imgHeight;
// border: 1PX solid #F0F0F0;
border-radius: 4px;
// @extend .bb;
.swiper {
width: $imgWidth;
height: $imgHeight;
.swiper-image {
width: $imgWidth;
height: $imgHeight;
}
}
}
// 价格栏
.func {
position: relative;
$funcHei: 120px;
height: $funcHei;
display: flex;
justify-content: space-between;
background-color: #f2f2f2;
.arrow {
top: 0;
left: 500px;
position: absolute;
width: 0;
height: 0;
border: $funcHei/2 solid transparent;
border-left-color: #f2f2f2;
}
&-ele {
display: flex;
font-size: 22px;
@extend .bb;
.price {
font-size: 52px;
font-weight: bold;
}
}
&-left {
align-items: center;
color: #333333;
padding-left: 24px;
font-size: 20px;
.t1 {
margin-left: 20px;
margin-top: 36px;
align-self: flex-start;
}
.t2 {}
.line-th {
text-decoration: line-through;
}
}
&-right {
text-align: right;
@extend .linear;
width: 250px;
height: $funcHei;
@include border-right-radius(4px);
color: #ffffff;
padding-right: 24px;
align-content: center;
flex-wrap: wrap;
.t1 {
width: 100%;
font-size: 20px;
padding: 4px 0;
}
.t2 {
font-size: 24px;
}
.date {
// width: 100%;
font-size: 22px;
}
}
}
// 描述
.desc {
position: relative;
font-size: 26px;
color: #666666;
width: $contentWidth;
margin: 0 auto;
.refresh-btn {
@include cb2(160px, 48px, 24px);
position: absolute;
right: 0;
top: 0;
}
&-tit {
font-size: 36px;
font-weight: bold;
color: #333333;
margin: 24px 0 10px;
width: 520px;
@include ellipsis(1);
}
&-t1 {
margin-top: 12px;
}
}
// 线
.line {
width: $contentWidth;
margin: 24px auto;
height: 1PX;
background-color: #666666;
opacity: 0.5;
}
// 拍卖详情
.auction {
width: $contentWidth;
margin: 24px auto 0;
font-size: 24px;
&-desc {
color: #666666;
display: flex;
flex-wrap: wrap;
.t1 {
width: 50%;
padding: 6px 0;
// @extend .bb;
}
}
&-table {
@extend .bb;
padding: 24px 0 24px 24px;
background-color: #f8f8f8;
border-radius: 8px;
margin-top: 24px;
font-size: 22px;
.tab {
&-item {
display: flex;
justify-content: space-between;
.item {
text-align: center;
height: 32px;
line-height: 32px;
margin: 6px 0;
@extend .bb;
padding: 0 6px;
}
.item1 {
width: 72px;
@extend .fcc;
.block {
width: 72px;
height: 32px;
line-height: 32px;
@extend .linear;
color: #ffffff;
border-radius: 4px;
}
}
.item2 {
width: 200px;
}
.item3 {
width: 120px;
}
.item4 {
flex: 1;
}
}
&-item2 {
color: #c9c9c9;
.item1 {
.block {
background: #c9c9c9;
}
}
}
}
.all-bid-tips {
color: #3680EB;
margin-top: 32px;
}
.empty-tips{
text-align: center;
padding: 60px 0;
color: #666666;
}
}
}
}
// 提交按钮
.submit-btn {
@include cb(560px, 84px);
@extend .linear;
margin: 72px auto 0;
}
}
}
.disable {
background: #c9c9c9 !important;
}
......
<wxs module="filter" src="../../utils/utilswxs.wxs"></wxs>
<view class="page">
<view class="app__bgc bgc"></view>
<view class="app__bg bg"></view>
<!-- <view class="app__top-shadow"></view> -->
<view class="app__content main">
<view class="top-space"></view>
<view class="content"></view>
<view class="content">
<!-- 产品图 -->
<view class="img-wrap">
<swiper class="swiper" indicator-color="rgba(0,0,0,.3)" indicator-active-color="rgba(255,255,255,1)" indicator-dots="{{true}}" autoplay="{{true}}" interval="{{5000}}" duration="{{500}}">
<block wx:for="{{productInfo.seckillImages}}" wx:key="{{index}}">
<swiper-item>
<image class="swiper-image" src="{{item}}" mode="aspectFill" />
</swiper-item>
</block>
</swiper>
</view>
<!-- 价格栏 -->
<view class="func">
<view class="arrow"></view>
<view class="func-ele func-left">
<text class="price">￥{{filter.Fen2Yuan(productInfo.originalPrice)}}</text>
<text class="t1 line-th">￥{{filter.Fen2Yuan(productInfo.specialPrice)}}</text>
<text class="t1">仅剩{{productInfo.stock}}个</text>
</view>
<view class="func-ele func-right {{productInfo.status != 1 ? 'disable' : ''}}">
<text wx:if="{{productInfo.status == 0}}" class="t1 t2">秒杀未开始</text>
<text wx:if="{{productInfo.status == 1}}" class="t1">秒杀进行中</text>
<text wx:if="{{productInfo.status == 2}}" class="t1 t2">秒杀已结束</text>
<text wx:if="{{productInfo.status == 1}}" class="t1 date">{{lastTime}}</text>
</view>
</view>
<!-- 描述 -->
<view class="desc">
<view class="desc-tit">{{productInfo.seckillName}}</view>
<view class="desc-t1">{{productInfo.seckillDescription}}</view>
<view class="desc-t1">
秒杀数量：{{productInfo.minNum == productInfo.maxNum ? productInfo.minNum+'个' : productInfo.minNum+' - '+productInfo.maxNum+'个'}}
</view>
<view class="desc-t1">活动区域：{{productInfo.district}}</view>
</view>
</view>
<!-- 按钮 -->
<view bindtap="onSubmitHandler" class="submit-btn {{productInfo.status != 1 ? 'disable' : ''}}">
立即秒杀
</view>
</view>
</view>
<van-popup show="{{ authorizeVisible }}">
<authorize-comp bind:evtcomp="evtcomp"></authorize-comp>
</van-popup>
<van-popup show="{{ seckillOrderVisible }}">
<seckill-order-comp id="seckillOrderComp" product-info="{{productInfo}}" user-info="{{userInfo}}" bind:evtcomp="evtcomp"></seckill-order-comp>
</van-popup>
......
import { VantComponent } from '../common/component';
VantComponent({
field: true,
classes: [
'input-class',
'plus-class',
'minus-class'
],
props: {
value: null,
integer: Boolean,
disabled: Boolean,
inputWidth: String,
asyncChange: Boolean,
disableInput: Boolean,
min: {
type: null,
value: 1
},
max: {
type: null,
value: Number.MAX_SAFE_INTEGER
},
step: {
type: null,
value: 1
}
},
computed: {
minusDisabled() {
return this.data.disabled || this.data.value <= this.data.min;
},
plusDisabled() {
return this.data.disabled || this.data.value >= this.data.max;
}
},
watch: {
value(value) {
if (value === '') {
return;
}
const newValue = this.range(value);
if (typeof newValue === 'number' && value !== newValue) {
this.set({ value: newValue });
}
}
},
data: {
focus: false
},
created() {
this.set({
value: this.range(this.data.value)
});
},
methods: {
onFocus(event) {
this.$emit('focus', event.detail);
},
onBlur(event) {
const value = this.range(this.data.value);
this.triggerInput(value);
this.$emit('blur', event.detail);
},
// limit value range
range(value) {
return Math.max(Math.min(this.data.max, value), this.data.min);
},
onInput(event) {
const { value = '' } = event.detail || {};
this.triggerInput(value);
},
onChange(type) {
if (this.data[`${type}Disabled`]) {
this.$emit('overlimit', type);
return;
}
const diff = type === 'minus' ? -this.data.step : +this.data.step;
const value = Math.round((this.data.value + diff) * 100) / 100;
this.triggerInput(this.range(value));
this.$emit(type);
},
onMinus() {
this.onChange('minus');
},
onPlus() {
this.onChange('plus');
},
triggerInput(value) {
this.set({
value: this.data.asyncChange ? this.data.value : value
});
this.$emit('change', value);
}
}
});
{
"component": true
}
\ No newline at end of file
<wxs src="../wxs/utils.wxs" module="utils" />
<view class="van-stepper custom-class">
<view
class="minus-class {{ utils.bem('stepper__minus', { disabled: minusDisabled }) }}"
hover-class="van-stepper__minus--hover"
hover-stay-time="70"
bind:tap="onMinus"
/>
<input
type="{{ integer ? 'number' : 'digit' }}"
class="input-class {{ utils.bem('stepper__input', { disabled: disabled || disableInput }) }}"
style="{{ inputWidth ? 'width: ' + inputWidth : '' }}"
value="{{ value }}"
focus="{{ focus }}"
disabled="{{ disabled || disableInput }}"
bindinput="onInput"
bind:focus="onFocus"
bind:blur="onBlur"
/>
<view
class="plus-class {{ utils.bem('stepper__plus', { disabled: plusDisabled }) }}"
hover-class="van-stepper__plus--hover"
hover-stay-time="70"
bind:tap="onPlus"
/>
</view>
@import '../common/index.wxss';.van-stepper{font-size:0}.van-stepper__minus,.van-stepper__plus{position:relative;display:inline-block;width:28px;height:28px;padding:5px;margin:1px;vertical-align:middle;background-color:#f2f3f5;border:0;box-sizing:border-box}.van-stepper__minus:before,.van-stepper__plus:before{width:9px;height:1px}.van-stepper__minus:after,.van-stepper__plus:after{width:1px;height:9px}.van-stepper__minus:after,.van-stepper__minus:before,.van-stepper__plus:after,.van-stepper__plus:before{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;background-color:#333;content:""}.van-stepper__minus--hover,.van-stepper__plus--hover{background-color:#e8e8e8}.van-stepper__minus--disabled,.van-stepper__plus--disabled{background-color:#f7f8fa}.van-stepper__minus--disabled:after,.van-stepper__minus--disabled:before,.van-stepper__plus--disabled:after,.van-stepper__plus--disabled:before{background-color:#c9c9c9}.van-stepper__minus--disabled.van-stepper__minus--hover,.van-stepper__minus--disabled.van-stepper__plus--hover,.van-stepper__plus--disabled.van-stepper__minus--hover,.van-stepper__plus--disabled.van-stepper__plus--hover{background-color:#f7f8fa}.van-stepper__minus{border-radius:4px 0 0 4px}.van-stepper__minus:after{display:none}.van-stepper__plus{border-radius:0 4px 4px 0}.van-stepper__input{display:inline-block;width:30px;height:26px;padding:1px;margin:1px;font-size:14px;color:#333;text-align:center;vertical-align:middle;background-color:#f2f3f5;border:0;border-width:1px 0;border-radius:0;box-sizing:initial;-webkit-appearance:none}.van-stepper__input--disabled{color:#c9c9c9;background-color:#f2f3f5}
\ No newline at end of file