Skip to content

U
user
Commit f5556cca by songbingqi
Options

完成优惠券组件开发

parent c4470f45
Showing with 257 additions and 30 deletions
components/Ticket/index.vue
...@@ -3,19 +3,19 @@ ...@@ -3,19 +3,19 @@
<view class="part"> <view class="part">
<view class="partOne"> <view class="partOne">
<view class="one_left"> <view class="one_left">
<view class="type">{{info.typeDesc}}</view> <view class="type" :style="[typeBackground]">{{info.typeDesc}}</view>
<view class="price"> <view class="price">
<view v-if="info.couponType===0">{{info.mjPrice}}<span>元</span></view> <view :style="[priceColor]" v-if="info.couponType===0">{{info.mjPrice}}<span>元</span></view>
<view v-else-if="info.couponType===1">{{info.zkPrice}}<span>折</span></view> <view :style="[priceColor]" v-else-if="info.couponType===1">{{info.zkPrice}}<span>折</span></view>
<view v-else :style="{'font-size':'48rpx'}">{{info.dkPrice}}<span></span></view> <view :style="[priceColor]" class="dkStyle" v-else>{{info.dkPrice}}<span></span></view>
</view> </view>
<view class="price_desc">{{info.priceDesc}}</view> <view :style="[priceDescColor]" class="price_desc">{{info.priceDesc}}</view>
</view> </view>
<view class="one_right"> <view class="one_right">
<view class="right_top"> <view class="right_top">
<view class="info"> <view class="info">
<view class="title">{{info.title}}</view> <view :style="[titleColor]" class="title">{{info.title}}</view>
<view class="time">有效期至{{info.time[0]}}</view> <view :style="[timeColor]" class="time">有效期至{{info.time[0]}}</view>
</view> </view>
<view class="action"> <view class="action">
<view v-if="type==='use'"> <view v-if="type==='use'">
...@@ -25,15 +25,14 @@ ...@@ -25,15 +25,14 @@
<view v-if="info.status===0"> <view v-if="info.status===0">
<button class="gouse">去使用</button> <button class="gouse">去使用</button>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<view class="right_bottom"> <view class="right_bottom">
<view class="more_info" @click="openDetail"> <view class="more_info" @click="openDetail">
<view class="desc" v-if="info.couponType===0||info.couponType===1">抵扣订单金额</view> <view :style="[descColor]"class="desc" v-if="info.couponType===0||info.couponType===1">抵扣订单金额</view>
<view class="desc" v-else>下单可抵扣商品，指定分类商品可用</view> <view :style="[descColor]"class="desc" v-else>下单可抵扣商品，指定分类商品可用</view>
<image class="arrow-right-select" :src="'../../static/imgs/jiantouhei.png'" /> <image :class="['arrow-right-select',arrowFlag?'arrow-right-select-down':'arrow-right-select-up']" :src="'../../static/imgs/jiantouhei.png'" />
</view> </view>
</view> </view>
</view> </view>
...@@ -57,7 +56,7 @@ ...@@ -57,7 +56,7 @@
</view> </view>
</view> </view>
<view class="partThree" v-if="info.status === 1"> <view class="partThree" v-if="info.status === 1">
<view class="reson">{{reson}}</view> <view class="reson">不可使用原因：{{info.reson}}</view>
</view> </view>
</view> </view>
</view> </view>
...@@ -96,17 +95,67 @@ export default { ...@@ -96,17 +95,67 @@ export default {
} }
} }
}, },
computed: {
typeBackground(){
const {status} = this.info
if(status!==0){
return { '--type-background': 'linear-gradient(90deg, #666666 0%, #999999 100%)' }
}else{
return { '--type-background': 'linear-gradient(90deg, #75A2FF 0%, #B6CEFF 100%)' }
}
},
priceColor(){
const {status} = this.info
if(status!==0){
return { 'color': '#666666' }
}else{
return { 'color': '#0050F6' }
}
},
priceDescColor(){
const {status} = this.info
if(status!==0){
return { 'color': '#999999' }
}else{
return { 'color': '#0050F6' }
}
},
titleColor(){
const {status} = this.info
if(status!==0){
return { 'color': '#666666' }
}else{
return { 'color': '#333333' }
}
},
timeColor(){
const {status} = this.info
if(status!==0){
return { 'color': '#999999' }
}else{
return { 'color': '#333333' }
}
},
descColor(){
const {status} = this.info
if(status!==0){
return { 'color': '#999999' }
}else{
return { 'color': '#666666' }
}
}
},
data(){ data(){
return { return {
detailFlag:false, detailFlag:false,
status:true,
checkFlag:false, checkFlag:false,
reson:'' arrowFlag:false
} }
}, },
methods:{ methods:{
openDetail(){ openDetail(){
this.detailFlag = !this.detailFlag this.detailFlag = !this.detailFlag
this.arrowFlag = !this.arrowFlag
}, },
selected() { selected() {
this.checkFlag = !this.checkFlag this.checkFlag = !this.checkFlag
...@@ -128,8 +177,8 @@ export default { ...@@ -128,8 +177,8 @@ export default {
position: relative; position: relative;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
background: radial-gradient(circle at right top, transparent 17rpx, #FFFFFF 0) top left / 180rpx 51% no-repeat, background: radial-gradient(circle at right top, transparent 17rpx, #FFFFFF 0) top left / 182rpx 51% no-repeat,
radial-gradient(circle at right bottom, transparent 17rpx, #FFFFFF 0) bottom left / 180rpx 51% no-repeat, radial-gradient(circle at right bottom, transparent 17rpx, #FFFFFF 0) bottom left / 182rpx 51% no-repeat,
radial-gradient(circle at left top, transparent 17rpx, #FFFFFF 0) top right / 511rpx 51% no-repeat, radial-gradient(circle at left top, transparent 17rpx, #FFFFFF 0) top right / 511rpx 51% no-repeat,
radial-gradient(circle at left bottom, transparent 17rpx, #FFFFFF 0) bottom right / 511rpx 51% no-repeat; radial-gradient(circle at left bottom, transparent 17rpx, #FFFFFF 0) bottom right / 511rpx 51% no-repeat;
filter: drop-shadow(-1px 3px 3px rgba(102,102,102,0.1000)); filter: drop-shadow(-1px 3px 3px rgba(102,102,102,0.1000));
...@@ -145,7 +194,7 @@ export default { ...@@ -145,7 +194,7 @@ export default {
font-size: 20rpx; font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
background: linear-gradient(90deg, #75A2FF 0%, #B6CEFF 100%); background: var(--type-background);
color: #FFFFFF; color: #FFFFFF;
line-height: 28rpx; line-height: 28rpx;
white-space: nowrap; white-space: nowrap;
...@@ -156,17 +205,20 @@ export default { ...@@ -156,17 +205,20 @@ export default {
font-size: 56rpx; font-size: 56rpx;
font-family: Futura-Medium, Futura; font-family: Futura-Medium, Futura;
font-weight: 500; font-weight: 500;
color: #0050F6; color: var(color);
line-height: 74rpx; line-height: 74rpx;
margin: 0 auto; margin: 0 auto;
text-align: center; text-align: center;
margin-top: 40rpx; margin-top: 40rpx;
.dkStyle {
font-size: 48rpx;
}
span { span {
height: 34rpx; height: 34rpx;
font-size: 24rpx; font-size: 24rpx;
font-family: Futura-Medium, Futura; font-family: Futura-Medium, Futura;
font-weight: 500; font-weight: 500;
color: #0050F6; color: var(color);
line-height: 30rpx; line-height: 30rpx;
} }
} }
...@@ -175,7 +227,7 @@ export default { ...@@ -175,7 +227,7 @@ export default {
font-size: 20rpx; font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #0050F6; color: var(color);
line-height: 28rpx; line-height: 28rpx;
width: 178rpx; width: 178rpx;
text-align: center; text-align: center;
...@@ -200,7 +252,7 @@ export default { ...@@ -200,7 +252,7 @@ export default {
font-size: 28rpx; font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC; font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500; font-weight: 500;
color: #333333; color: var(color);
line-height: 40rpx; line-height: 40rpx;
white-space: nowrap; white-space: nowrap;
} }
...@@ -209,7 +261,7 @@ export default { ...@@ -209,7 +261,7 @@ export default {
font-size: 20rpx; font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #333333; color: var(color);
margin-top: 8rpx; margin-top: 8rpx;
line-height: 28rpx; line-height: 28rpx;
} }
...@@ -252,7 +304,7 @@ export default { ...@@ -252,7 +304,7 @@ export default {
font-size: 20rpx; font-size: 20rpx;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400; font-weight: 400;
color: #666666; color: var(color);
line-height: 28rpx; line-height: 28rpx;
} }
.arrow-right-select { .arrow-right-select {
...@@ -260,6 +312,36 @@ export default { ...@@ -260,6 +312,36 @@ export default {
width: 8.27rpx; width: 8.27rpx;
height: 12.68rpx; height: 12.68rpx;
} }
.arrow-right-select-down {
animation-name: upAnidown;
animation-duration: 0s;
animation-fill-mode:forwards;
@keyframes upAnidown {
0% {
transform: rotate(0);
-webkit-transform: rotate(0);
}
100% {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
}
};
.arrow-right-select-up {
animation-name: upAniup;
animation-duration: 0s;
animation-fill-mode:forwards;
@keyframes upAniup {
0% {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
100% {
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
}
}
}
} }
} }
} }
...@@ -309,8 +391,8 @@ export default { ...@@ -309,8 +391,8 @@ export default {
width: 100%; width: 100%;
margin-right: 30rpx; margin-right: 30rpx;
position: relative; position: relative;
background: radial-gradient(circle at right top, transparent 17rpx, #FFFFFF 0) top left / 180rpx 51% no-repeat, background: radial-gradient(circle at right top, transparent 17rpx, #FFFFFF 0) top left / 182rpx 51% no-repeat,
radial-gradient(circle at right bottom, transparent 17rpx, #FFFFFF 0) bottom left / 180rpx 51% no-repeat, radial-gradient(circle at right bottom, transparent 17rpx, #FFFFFF 0) bottom left / 182rpx 51% no-repeat,
radial-gradient(circle at left top, transparent 17rpx, #FFFFFF 0) top right / 511rpx 51% no-repeat, radial-gradient(circle at left top, transparent 17rpx, #FFFFFF 0) top right / 511rpx 51% no-repeat,
radial-gradient(circle at left bottom, transparent 17rpx, #FFFFFF 0) bottom right / 511rpx 51% no-repeat; radial-gradient(circle at left bottom, transparent 17rpx, #FFFFFF 0) bottom right / 511rpx 51% no-repeat;
filter: drop-shadow(-1px 3px 3px rgba(102,102,102,0.1000)); filter: drop-shadow(-1px 3px 3px rgba(102,102,102,0.1000));
...@@ -356,8 +438,8 @@ export default { ...@@ -356,8 +438,8 @@ export default {
width: 100%; width: 100%;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
background: radial-gradient(circle at right top, transparent 17rpx, #E9E9E9 0) top left / 180rpx 51% no-repeat, background: radial-gradient(circle at right top, transparent 17rpx, #E9E9E9 0) top left / 182rpx 51% no-repeat,
radial-gradient(circle at right bottom, transparent 0px, #E9E9E9 0) bottom left / 180rpx 51% no-repeat, radial-gradient(circle at right bottom, transparent 0px, #E9E9E9 0) bottom left / 182rpx 51% no-repeat,
radial-gradient(circle at left top, transparent 17rpx, #E9E9E9 0) top right / 511rpx 51% no-repeat, radial-gradient(circle at left top, transparent 17rpx, #E9E9E9 0) top right / 511rpx 51% no-repeat,
radial-gradient(circle at left bottom, transparent 0px, #E9E9E9 0) bottom right / 511rpx 51% no-repeat; radial-gradient(circle at left bottom, transparent 0px, #E9E9E9 0) bottom right / 511rpx 51% no-repeat;
filter: drop-shadow(-1px 3px 3px rgba(102,102,102,0.1000)); filter: drop-shadow(-1px 3px 3px rgba(102,102,102,0.1000));
......
components/canvas/HomeBanner.vue 0 → 100644
<template>
<!-- <canvas
:style="{ width: '100%', height: '400rpx' }"
canvas-id="canvasId"
></canvas> -->
<view>
<image :src="imgsrc" :style="{ width: '100%', height: '400rpx' }"></image>
</view>
</template>
<script>
import Utils from '@/utils/downfiles.js';
export default {
data() {
return {
context: {},
picList: [],
imgsrc:'../../static/imgs/20220720-115535_001.png',
};
},
// onload生命周期
mounted () {
//首先获取屏幕宽度
// let device=this.getData();
// let width=device.windowWidth;
//然后需要确定比例，设计图一般都是750的屏幕，这里是375px
// let wid=width / 375
// 第一次加载的占位的图片
// console.log(123)
// this.context = uni.createCanvasContext("canvasId", this);
// this.context.drawImage("../../static/imgs/20220720-115535_001.png", 0, 0, 375*wid, 200*wid);
// this.context.draw();
// return
for(let i = 1;i <=37;i++){
let src = ''
if (i < 10) {
src = `https://songclound.oss-cn-hongkong.aliyuncs.com/2022/07/20/20220720-115535_00${i}.png`;
} else if (10 <= i < 100) {
src = `https://songclound.oss-cn-hongkong.aliyuncs.com/2022/07/20/20220720-115535_0${i}.png`;
}
this.picList.push(src)
}
// return
Utils.downfiles(this.picList,7).then(res=>{
this.picList = res
this.startCanvas()
})
},
methods: {
getData(){
var result = 0;
uni.getSystemInfo({
success: function(res) {
result = res
}
});
return result;
},
startCanvas() {
console.log("图片下载完成啦！开始动画效果！");
let i = 0;
setInterval(() => {
if (i < 37) {
const src = this.picList[i];
this.imgsrc = src
i++;
} else {
i = 0;
}
}, 30);
},
},
};
</script>
<style scoped>
.canva{
z-index: 0;
}
</style>
\ No newline at end of file
mineSubPackage/pages/coupon/index.vue
...@@ -27,12 +27,12 @@ ...@@ -27,12 +27,12 @@
<swiper :current="current" class="swiper"> <swiper :current="current" class="swiper">
<swiper-item> <swiper-item>
<view class="list"> <view class="list">
<Ticket /> <Ticket/>
</view> </view>
</swiper-item> </swiper-item>
<swiper-item> <swiper-item>
<view class="list"> <view class="list">
<Ticket v-for="(item,index) in nouserList" :key="index" :info="item"/> <Ticket v-for="(item,index) in nouserList" :key="index" :info="item" />
</view> </view>
</swiper-item> </swiper-item>
</swiper> </swiper>
...@@ -62,7 +62,7 @@ export default { ...@@ -62,7 +62,7 @@ export default {
for(let i=0;i<2;i++){ for(let i=0;i<2;i++){
this.nouserList.push({ this.nouserList.push({
status:2, // 0可使用 1不可使用/已过期/已失效 status:2, // 0可使用 1不可使用/已过期/已失效
couponType:2, // 0满减 1折扣 2抵扣 couponType:0, // 0满减 1折扣 2抵扣
typeDesc:'最大字数最大字', // 左上角文案描述 typeDesc:'最大字数最大字', // 左上角文案描述
mjPrice:'30', // 满减金额 mjPrice:'30', // 满减金额
zkPrice:'7', // 折扣金额 zkPrice:'7', // 折扣金额
......
pages/menu/menu.vue
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
<image :src="img"/> <image :src="img"/>
<!-- <ImageLoader :defaultSrc="'../../static/imgs/shouyezhanweitu.png'" :realSrc="img" width="100%" height="400rpx"/> --> <!-- <ImageLoader :defaultSrc="'../../static/imgs/shouyezhanweitu.png'" :realSrc="img" width="100%" height="400rpx"/> -->
<!-- <video autoplay muted loop :controls="false" :enable-progress-gesture="false" objectFit='cover' src="http://songclound.oss-cn-hongkong.aliyuncs.com/2022/06/27/71d36be0ed966.mp4" /> --> <!-- <video autoplay muted loop :controls="false" :enable-progress-gesture="false" objectFit='cover' src="http://songclound.oss-cn-hongkong.aliyuncs.com/2022/06/27/71d36be0ed966.mp4" /> -->
<!-- <HomeBanner /> -->
<view class="shop-info" :style="'top:100rpx'"> <view class="shop-info" :style="'top:100rpx'">
<view class="shop-box"> <view class="shop-box">
<text @click="showArea" class="shop-name">{{ shopInfo.name }}</text> <text @click="showArea" class="shop-name">{{ shopInfo.name }}</text>
...@@ -63,6 +64,7 @@ ...@@ -63,6 +64,7 @@
import MenuAssembly from '@/components/menuAssembly' import MenuAssembly from '@/components/menuAssembly'
import ImageLoader from '@/components/ImageLoader/index.vue' import ImageLoader from '@/components/ImageLoader/index.vue'
import AreaPicker from '@/components/AreaPicker/index.vue' import AreaPicker from '@/components/AreaPicker/index.vue'
// import HomeBanner from '@/components/canvas/HomeBanner.vue'
import User from '@/request/user' import User from '@/request/user'
import ShopCar from '../../components/shopCar/shopCar.vue' import ShopCar from '../../components/shopCar/shopCar.vue'
import Utils from '@/utils/utils' import Utils from '@/utils/utils'
...@@ -286,6 +288,7 @@ export default { ...@@ -286,6 +288,7 @@ export default {
min-height: 100vh; min-height: 100vh;
.shop-info { .shop-info {
z-index: 100;
position: absolute; position: absolute;
left: 32rpx; left: 32rpx;
color: #FFFFFF; color: #FFFFFF;
......
utils/downfiles.js 0 → 100644
export default {
// imgUrls 需要下载的全部图片 num 每次同时下载张数（最大为7）
downfiles(imgUrls, num = 3) {
return new Promise((resolve, reject) => {
let lsit = []
let imgUrlsLength = imgUrls.length
let downList = []
let spliceIndex = 0
const spliceFunction = () => {
downList[spliceIndex] = imgUrls.splice(0, num)
if (imgUrls.length == 0) {
return
} else {
spliceIndex++
spliceFunction()
}
}
// 切割url数组
spliceFunction()
const final = []
let downIndex = 0
const downFunction = (arr) => {
const list = []
console.log(arr[downIndex])
if(arr[downIndex]){
arr[downIndex].map((item,index) => {
uni.downloadFile({
url: item,
success: (res) => {
list.push({url:res.tempFilePath,index:index})
if (list.length === arr[downIndex].length) {
downIndex++
// 对每一批下载完成的图片进行重新排序 避免动画混乱
list.sort((a,b)=>{
return a.index - b.index
})
list.map(item=>{
final.push(item.url)
})
downFunction(downList)
} else {
return
}
}
});
})
}
if(final.length===imgUrlsLength){
resolve(final)
}
}
// 执行批量下载任务
downFunction(downList)
})
}
}
\ No newline at end of file
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