详情.我的
70
App.vue
|
|
@ -15,14 +15,70 @@
|
|||
<style lang="scss">
|
||||
/*每个页面公共css */
|
||||
|
||||
/* 定义字体 */
|
||||
|
||||
@font-face {
|
||||
font-family: 'jcyt';
|
||||
src: url('/static/fonts/jcyt.ttf') format('truetype');
|
||||
font-family: 'JiangChengYuanTi-300W';
|
||||
/* 定义字体家族名称 */
|
||||
src: url('/static/fonts/JiangChengYuanTi-300W.ttf') format('truetype');
|
||||
/* 指定字体文件路径和格式 */
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* 全局应用字体 */
|
||||
// body {
|
||||
// font-family: 'jcyt', sans-serif;
|
||||
// }
|
||||
@font-face {
|
||||
font-family: 'JiangChengYuanTi-400W';
|
||||
/* 定义字体家族名称 */
|
||||
src: url('/static/fonts/JiangChengYuanTi-300W.ttf') format('truetype');
|
||||
/* 指定字体文件路径和格式 */
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'JiangChengYuanTi-500W';
|
||||
/* 定义字体家族名称 */
|
||||
src: url('/static/fonts/JiangChengYuanTi-300W.ttf') format('truetype');
|
||||
/* 指定字体文件路径和格式 */
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'JiangChengYuanTi-600W';
|
||||
/* 定义字体家族名称 */
|
||||
src: url('/static/fonts/JiangChengYuanTi-300W.ttf') format('truetype');
|
||||
/* 指定字体文件路径和格式 */
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'JiangChengYuanTi-700W';
|
||||
/* 定义字体家族名称 */
|
||||
src: url('/static/fonts/JiangChengYuanTi-300W.ttf') format('truetype');
|
||||
/* 指定字体文件路径和格式 */
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
.myZt-300w {
|
||||
font-family: 'JiangChengYuanTi-300W', sans-serif;
|
||||
}
|
||||
|
||||
.myZt-400w {
|
||||
font-family: 'JiangChengYuanTi-400W', sans-serif;
|
||||
}
|
||||
|
||||
.myZt-500w {
|
||||
font-family: 'JiangChengYuanTi-500W', sans-serif;
|
||||
}
|
||||
|
||||
.myZt-600w {
|
||||
font-family: 'JiangChengYuanTi-600W', sans-serif;
|
||||
}
|
||||
|
||||
.myZt-700w {
|
||||
font-family: 'JiangChengYuanTi-700W', sans-serif;
|
||||
}
|
||||
</style>
|
||||
BIN
components/.DS_Store
vendored
Normal file
209
components/specialBanner.vue
Normal file
|
|
@ -0,0 +1,209 @@
|
|||
<template>
|
||||
<div class="banner-container">
|
||||
<swiper :style="{width: '100vw', height: '410rpx'}" :indicator-dots="swiperConfig.indicatorDots"
|
||||
:indicator-color="swiperConfig.indicatorColor" :indicator-active-color="swiperConfig.indicatorActiveColor"
|
||||
:autoplay="swiperConfig.autoplay" :interval="swiperConfig.interval" :duration="swiperConfig.duration"
|
||||
:circular="swiperConfig.circular" :previous-margin="swiperConfig.previousMargin"
|
||||
:next-margin="swiperConfig.nextMargin" @change="swiperChange" @animationfinish="animationfinish">
|
||||
<swiper-item v-for="(item, i) in bannerList" :key="i">
|
||||
<!-- 1.当前展示为第1项时,bannerList最后一项和第二项的justifyContent值分别为flex-end和flex-start,其余项值为center -->
|
||||
<!-- 2.当前展示为最后一项时,bannerList倒数第2项和第1项的justifyContent值分别为flex-end和flex-start,其余项值为center -->
|
||||
<!-- 3.当前展示为其他项(非第1和最后1项)时,bannerList当前项的前1项和后1项的justifyContent值分别为flex-end和flex-start,其余项值为center -->
|
||||
<!-- 4.padding值也需要根据不同项设定不同值,但理同justifyContent -->
|
||||
<div class="image-container"
|
||||
:class="[curIndex===0?((i===listLen-1)?'item-left':(i===1?'item-right':'item-center')):(curIndex===listLen-1?(i===0?'item-right':(i===listLen-2?'item-left':'item-center')):(i===curIndex-1?'item-left':(i===curIndex+1?'item-right':'item-center')))]">
|
||||
<image :src="item.picture" class="slide-image" :style="{
|
||||
transform: curIndex===i?'scale(' + scaleX + ',' + scaleY + ')':'scale(1,1)',
|
||||
transitionDuration: '.3s',
|
||||
transitionTimingFunction: 'ease'
|
||||
}" @click="getBannerDetail(i)" />
|
||||
</div>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
<!-- <div class="desc-wrap" :class="[isDescAnimating?'hideAndShowDesc':'']">
|
||||
<div class="title">{{bannerList[descIndex].title}}</div>
|
||||
<div class="desc">{{bannerList[descIndex].description}}</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
bannerList: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
},
|
||||
swiperConfig: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {
|
||||
indicatorDots: true,
|
||||
indicatorColor: 'rgba(255, 255, 255, .4)',
|
||||
indicatorActiveColor: 'rgba(255, 255, 255, 1)',
|
||||
autoplay: false,
|
||||
interval: 3000,
|
||||
duration: 300,
|
||||
circular: true,
|
||||
previousMargin: '58rpx',
|
||||
nextMargin: '58rpx'
|
||||
}
|
||||
}
|
||||
},
|
||||
scaleX: {
|
||||
type: String,
|
||||
default: (634 / 550).toFixed(4)
|
||||
},
|
||||
scaleY: {
|
||||
type: String,
|
||||
default: (378 / 328).toFixed(4)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
listLen() {
|
||||
return this.bannerList.length
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
curIndex: 0,
|
||||
descIndex: 0,
|
||||
isDescAnimating: false
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
swiperChange(e) {
|
||||
const that = this
|
||||
this.curIndex = e.mp.detail.current
|
||||
this.isDescAnimating = true
|
||||
let timer = setTimeout(function() {
|
||||
that.descIndex = e.mp.detail.current
|
||||
clearTimeout(timer)
|
||||
}, 150)
|
||||
},
|
||||
animationfinish(e) {
|
||||
this.isDescAnimating = false
|
||||
},
|
||||
getBannerDetail(index) {
|
||||
// uni.showLoading({
|
||||
// title: '将前往详情页面',
|
||||
// duration: 2000,
|
||||
// mask: true
|
||||
// })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.banner-container {
|
||||
width: 100vw;
|
||||
height: 524rpx;
|
||||
|
||||
.image-container {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
.slide-image {
|
||||
width: 447.92rpx;
|
||||
height: 448.61rpx;
|
||||
z-index: 200;
|
||||
}
|
||||
}
|
||||
|
||||
.item-left {
|
||||
justify-content: flex-end;
|
||||
padding: 56rpx 26rpx 0 0;
|
||||
}
|
||||
|
||||
.item-right {
|
||||
justify-content: flex-start;
|
||||
padding: 56rpx 0 0 26rpx;
|
||||
}
|
||||
|
||||
.item-center {
|
||||
justify-content: center;
|
||||
padding: 56rpx 0 0 0;
|
||||
}
|
||||
|
||||
.desc-wrap {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 98rpx;
|
||||
padding: 24rpx 66rpx 0;
|
||||
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 42rpx;
|
||||
line-height: 42rpx;
|
||||
color: #222222;
|
||||
font-size: 30rpx;
|
||||
font-family: 'PingFangTC-Regular';
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.desc {
|
||||
margin-top: 4rpx;
|
||||
width: 100%;
|
||||
height: 34rpx;
|
||||
line-height: 34rpx;
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
font-family: 'PingFangTC-Regular';
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes descAnimation {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
25% {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
75% {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes descAnimation {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
25% {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
75% {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.hideAndShowDesc {
|
||||
animation: descAnimation .3s ease 1;
|
||||
-webkit-animation: descAnimation .3s ease 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -27,6 +27,13 @@
|
|||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/home/product-details",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": ""
|
||||
}
|
||||
}
|
||||
],
|
||||
"globalStyle": {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,8 @@
|
|||
style="width: 100%; height: 161.81rpx; background-color: #FFFBF0; border-radius: 30rpx; margin-bottom: 29.17rpx; display: flex; align-items: center; position: relative;">
|
||||
|
||||
<image :src="item.isCheck?'/static/ic_check_s.png':'/static/ic_check.png'"
|
||||
style="width: 29.17rpx; height: 29.17rpx; margin-left: 20.83rpx;" mode=""></image>
|
||||
@click="toggleItem(index)" style="width: 29.17rpx; height: 29.17rpx; margin-left: 20.83rpx;"
|
||||
mode=""></image>
|
||||
|
||||
<image :src="item.imgurl"
|
||||
style="width: 125rpx; height: 125rpx; background-color: #9B9285; border-radius: 30rpx; margin-left: 19.44rpx;"
|
||||
|
|
@ -31,10 +32,12 @@
|
|||
|
||||
<view class=""
|
||||
style="display: flex; flex-direction: row; position: absolute; bottom: 23.61rpx; right: 23.61rpx; align-items: center;">
|
||||
<image src="/static/ic_minus.png" style="width: 28.47rpx; height: 28.47rpx;" mode=""></image>
|
||||
<image src="/static/ic_minus.png" @click="decrease(index)"
|
||||
style="width: 28.47rpx; height: 28.47rpx;" mode=""></image>
|
||||
<text
|
||||
style="width: 70.83rpx; font-size: 29.17rpx; color: #6E5B51; text-align: center;">{{item.num}}</text>
|
||||
<image src="/static/ic_add.png" style="width: 28.47rpx; height: 28.47rpx;" mode=""></image>
|
||||
<image src="/static/ic_add.png" @click="increase(index)"
|
||||
style="width: 28.47rpx; height: 28.47rpx;" mode=""></image>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
|
|
@ -57,8 +60,10 @@
|
|||
<text style="font-size: 19.42rpx; color: #8C8574; margin-right: 30rpx;">合计: {{checkNum}}件</text>
|
||||
|
||||
|
||||
<view class="" style="display: flex; flex-direction: row; align-items: center; position: fixed; left: 46rpx;">
|
||||
<image src="/static/ic_check.png" style="width: 29.17rpx; height: 29.17rpx;" mode=""></image>
|
||||
<view class=""
|
||||
style="display: flex; flex-direction: row; align-items: center; position: fixed; left: 46rpx;">
|
||||
<image :src="selectAll?'/static/ic_check_s.png':'/static/ic_check.png'" @click="toggleSelectAll"
|
||||
style="width: 29.17rpx; height: 29.17rpx;" mode=""></image>
|
||||
<text style="font-size: 19.42rpx; color: #8C8574; margin-left: 13rpx; margin-bottom: 2rpx;">全选</text>
|
||||
</view>
|
||||
|
||||
|
|
@ -71,14 +76,15 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
checkNum: 1,
|
||||
sumPrice: 20,
|
||||
checkNum: 0, //选中几个
|
||||
sumPrice: 0, //总价
|
||||
selectAll: false,
|
||||
dataList: [{
|
||||
imgurl: "",
|
||||
title: "坂本日常 吧唧",
|
||||
name: "坂本",
|
||||
price: "20",
|
||||
num: "1",
|
||||
price: 20,
|
||||
num: 1,
|
||||
isCheck: false,
|
||||
type: "库存紧张"
|
||||
},
|
||||
|
|
@ -86,8 +92,8 @@
|
|||
imgurl: "",
|
||||
title: "坂本日常 吧唧",
|
||||
name: "坂本",
|
||||
price: "20",
|
||||
num: "1",
|
||||
price: 20,
|
||||
num: 1,
|
||||
isCheck: false,
|
||||
type: "库存紧张"
|
||||
},
|
||||
|
|
@ -95,8 +101,8 @@
|
|||
imgurl: "",
|
||||
title: "坂本日常 吧唧",
|
||||
name: "坂本",
|
||||
price: "20",
|
||||
num: "1",
|
||||
price: 20,
|
||||
num: 1,
|
||||
isCheck: false,
|
||||
type: "库存紧张"
|
||||
},
|
||||
|
|
@ -104,8 +110,8 @@
|
|||
imgurl: "",
|
||||
title: "坂本日常 吧唧",
|
||||
name: "坂本",
|
||||
price: "20",
|
||||
num: "1",
|
||||
price: 20,
|
||||
num: 1,
|
||||
isCheck: false,
|
||||
type: "库存紧张"
|
||||
},
|
||||
|
|
@ -113,8 +119,8 @@
|
|||
imgurl: "",
|
||||
title: "坂本日常 吧唧",
|
||||
name: "坂本",
|
||||
price: "20",
|
||||
num: "1",
|
||||
price: 20,
|
||||
num: 1,
|
||||
isCheck: false,
|
||||
type: "库存紧张"
|
||||
},
|
||||
|
|
@ -122,8 +128,8 @@
|
|||
imgurl: "",
|
||||
title: "坂本日常 吧唧",
|
||||
name: "坂本",
|
||||
price: "20",
|
||||
num: "1",
|
||||
price: 20,
|
||||
num: 1,
|
||||
isCheck: false,
|
||||
type: "库存紧张"
|
||||
},
|
||||
|
|
@ -131,35 +137,74 @@
|
|||
imgurl: "",
|
||||
title: "坂本日常 吧唧",
|
||||
name: "坂本",
|
||||
price: "20",
|
||||
num: "1",
|
||||
isCheck: false,
|
||||
type: "库存紧张"
|
||||
},
|
||||
{
|
||||
imgurl: "",
|
||||
title: "坂本日常 吧唧",
|
||||
name: "坂本",
|
||||
price: "20",
|
||||
num: "1",
|
||||
isCheck: false,
|
||||
type: "库存紧张"
|
||||
},
|
||||
{
|
||||
imgurl: "",
|
||||
title: "坂本日常 吧唧",
|
||||
name: "坂本",
|
||||
price: "20",
|
||||
num: "1",
|
||||
price: 20,
|
||||
num: 1,
|
||||
isCheck: false,
|
||||
type: "库存紧张"
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
}
|
||||
// 切换单个项目的选中状态
|
||||
toggleItem(index) {
|
||||
this.dataList[index].isCheck = !this.dataList[index].isCheck;
|
||||
this.updateSelectAllStatus();
|
||||
},
|
||||
|
||||
// 全选/取消全选
|
||||
toggleSelectAll() {
|
||||
this.selectAll = !this.selectAll;
|
||||
this.dataList.forEach(item => {
|
||||
item.isCheck = this.selectAll;
|
||||
});
|
||||
this.selectedCount();
|
||||
this.totalPrice();
|
||||
},
|
||||
|
||||
// 更新全选状态(当手动选择所有项时自动勾选全选)
|
||||
updateSelectAllStatus() {
|
||||
this.selectAll = this.dataList.every(item => item.isCheck);
|
||||
this.selectedCount();
|
||||
this.totalPrice();
|
||||
},
|
||||
|
||||
|
||||
// 增加数量
|
||||
increase(index) {
|
||||
this.dataList[index].num++;
|
||||
this.selectedCount();
|
||||
this.totalPrice();
|
||||
},
|
||||
|
||||
// 减少数量
|
||||
decrease(index) {
|
||||
if (this.dataList[index].num > 1) {
|
||||
this.dataList[index].num--;
|
||||
}
|
||||
this.selectedCount();
|
||||
this.totalPrice();
|
||||
},
|
||||
|
||||
// 选中的商品总数量
|
||||
selectedCount() {
|
||||
this.checkNum = this.dataList.reduce((total, item) => {
|
||||
return total + (item.isCheck ? item.num : 0);
|
||||
}, 0);
|
||||
},
|
||||
|
||||
// 选中的商品总价格
|
||||
totalPrice() {
|
||||
this.sumPrice = this.dataList.reduce((total, item) => {
|
||||
return total + (item.isCheck ? item.price * item.num : 0);
|
||||
}, 0);
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -45,7 +45,7 @@
|
|||
<view class=""
|
||||
style="width: 100%; display: flex; flex-direction: row; justify-content: space-between; margin-top: 29.86rpx;">
|
||||
|
||||
<view class="" v-for="(item,index) in dataList"
|
||||
<view class="" v-for="(item,index) in dataList" @click="toDetails(dataList[index].id)"
|
||||
style="display: flex; flex-direction: column; justify-content: center;">
|
||||
|
||||
<view class=""
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
:style="{ border: `2px solid ${item.color}`}">
|
||||
</view>
|
||||
|
||||
<text
|
||||
<text class="myZt-300w"
|
||||
style="text-align: center; margin-top: 13.19rpx; font-size: 22.22rpx; color: #685952; width: 159.72rpx; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;">{{item.title}}</text>
|
||||
|
||||
</view>
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
<view class="" style="width: 100%; display: flex; flex-direction: row; margin-top: 32.64rpx;">
|
||||
<view class="" v-for="(item,index) in tabList" @click="clickTab(index)" :style="setTabBg(index)"
|
||||
style="padding: 0 16.67rpx 6rpx 16.67rpx ; margin-right: 26.39rpx; border-radius: 50rpx;">
|
||||
<text style=" font-size: 23.61rpx;">{{item.title}}</text>
|
||||
<text class="myZt-500w" style=" font-size: 23.61rpx;">{{item.title}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
|
@ -80,15 +80,16 @@
|
|||
<!-- <image :src="{{item.imgUrl}}" mode=""></image> -->
|
||||
</view>
|
||||
|
||||
<text
|
||||
style="width: 280.56rpx; margin: 15.28rpx auto; font-size: 25rpx; color: #685952; font-family: 'jcyt', sans-serif;
|
||||
<text class="myZt-500w"
|
||||
style="width: 280.56rpx; margin: 15.28rpx auto; font-size: 25rpx; color: #685952;
|
||||
display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; text-overflow: ellipsis;">{{item.title}}</text>
|
||||
|
||||
|
||||
<text style="font-size: 19.44rpx; color: #FF6A6A; margin-left: 24.31rpx;">现货发售中</text>
|
||||
|
||||
<view class="" style="display: flex; flex-direction: row; margin-left: 20.31rpx;">
|
||||
<text style="font-size: 29.17rpx; color: #87644E;font-family: 'jcyt', sans-serif;">¥{{item.price}}</text>
|
||||
<text class="myZt-500w"
|
||||
style="font-size: 29.17rpx; color: #87644E;">¥{{item.price}}</text>
|
||||
<text style="font-size: 19.44rpx; color: #87644E; margin-top: 10rpx;"> / 包</text>
|
||||
</view>
|
||||
|
||||
|
|
@ -115,21 +116,25 @@
|
|||
currendIndex: 0,
|
||||
swiperList: [1, 2, 3, 4],
|
||||
dataList: [{
|
||||
id: 1,
|
||||
title: "坂本日常",
|
||||
color: "#90BB76",
|
||||
url: ""
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "坂本日常",
|
||||
color: "#FDA6AA",
|
||||
url: ""
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "坂本日常",
|
||||
color: "#96ABEB",
|
||||
url: ""
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "坂本日常",
|
||||
color: "#F9D051",
|
||||
url: ""
|
||||
|
|
@ -157,60 +162,70 @@
|
|||
}
|
||||
],
|
||||
goodsLsit: [{
|
||||
id: 1,
|
||||
title: "坂本日常坂本日常坂本日常坂本日常坂本日常坂本日常坂本日常坂本日常坂本日常",
|
||||
imgUrl: "",
|
||||
type: "",
|
||||
price: "20"
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "坂本日常坂本日常坂本日常坂本日常",
|
||||
imgUrl: "",
|
||||
type: "",
|
||||
price: "20"
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "坂本日常坂本日常坂本日常坂本日常",
|
||||
imgUrl: "",
|
||||
type: "",
|
||||
price: "20"
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "坂本日常坂本日常坂本日常坂本日常",
|
||||
imgUrl: "",
|
||||
type: "",
|
||||
price: "20"
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "坂本日常坂本日常坂本日常坂本日常",
|
||||
imgUrl: "",
|
||||
type: "",
|
||||
price: "20"
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "坂本日常坂本日常坂本日常坂本日常",
|
||||
imgUrl: "",
|
||||
type: "",
|
||||
price: "20"
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "坂本日常坂本日常坂本日常坂本日常",
|
||||
imgUrl: "",
|
||||
type: "",
|
||||
price: "20"
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "坂本日常坂本日常坂本日常坂本日常",
|
||||
imgUrl: "",
|
||||
type: "",
|
||||
price: "20"
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "坂本日常坂本日常坂本日常坂本日常",
|
||||
imgUrl: "",
|
||||
type: "",
|
||||
price: "20"
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "坂本日常坂本日常坂本日常坂本日常",
|
||||
imgUrl: "",
|
||||
type: "",
|
||||
|
|
@ -237,8 +252,16 @@
|
|||
border: '1rpx solid #9A8F79'
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
toDetails(id) {
|
||||
// 方式1:使用 uni.navigateTo
|
||||
uni.navigateTo({
|
||||
url: '/pages/home/product-details?id=' + id
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -277,4 +300,7 @@
|
|||
gap: 34.72rpx;
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
206
pages/home/product-details.vue
Normal file
|
|
@ -0,0 +1,206 @@
|
|||
<template>
|
||||
<view class="content" style="background-image: url('/static/details_bg.png');">
|
||||
|
||||
<view class="" style="width: 40rpx; height: 40rpx; position: fixed; top: 118.06rpx; left: 30.56rpx;"
|
||||
@click="toBack()">
|
||||
<image src="/static/ic_back.png" style="width: 14.58rpx; height: 27.08rpx;" mode=""></image>
|
||||
</view>
|
||||
|
||||
|
||||
<view class=""
|
||||
style="width: 550rpx; height: 93.06rpx; margin-top: 225.69rpx; display: flex; align-items: center; justify-content: center; background-image: url('/static/title_bg.png'); background-size: cover; background-repeat: no-repeat; background-position: center;">
|
||||
<text style="font-size: 23.61rpx; color: #6E5B51;">坂本日常 吧唧</text>
|
||||
</view>
|
||||
|
||||
<view class=""
|
||||
style="width: 550rpx; display: flex; flex-direction: row; justify-content: space-between; margin-top: 31.94rpx;">
|
||||
|
||||
<image src="/static/bags.png" style="width: 111.81rpx; height: 81.94rpx;" mode=""></image>
|
||||
|
||||
<image src="/static/details.png" style="width: 111.81rpx; height: 81.94rpx;" @click="openDetailsPop()"
|
||||
mode="">
|
||||
</image>
|
||||
|
||||
<image src="/static/share.png" style="width: 111.81rpx; height: 81.94rpx;" mode=""></image>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
<!-- ip背景 -->
|
||||
<view class="" style="width: 100%; height: 1118.75rpx; margin-top: 76.39rpx; display: flex; flex-direction: column; background-image: url('/static/goods_bg.png'); background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;">
|
||||
|
||||
<!-- 轮播图 -->
|
||||
<view class="" style="width: 100%; height: 448.61rpx;margin-top: 54.86rpx;">
|
||||
<special-banner :banner-list="bannerList" :swiper-config="swiperConfig"></special-banner>
|
||||
</view>
|
||||
|
||||
|
||||
<view class=""
|
||||
style="margin: 120rpx auto 0;width: 513.89rpx; height: 51.39rpx; position: relative;display: flex;align-items: center; justify-content: center;">
|
||||
<image src="/static/ic_prompt.png" style="width: 513.89rpx; height: 51.39rpx; position: absolute;">
|
||||
</image>
|
||||
<text style="position: absolute; font-size: 20.83rpx; color: #8C8574;">运费10元 满100包邮 3-5个工作日发货</text>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 购买按钮 -->
|
||||
<view class="" @click="openPayPop()"
|
||||
style="margin: 59.03rpx auto 0; position: relative; width: 561.81rpx; height: 161.11rpx; display: flex; justify-content: center;">
|
||||
<image src="/static/ic_pay.png" style="width: 561.81rpx; height: 161.11rpx; position: absolute;"
|
||||
mode=""></image>
|
||||
|
||||
<view class=""
|
||||
style="width: 150rpx; height: 40rpx; position: absolute; bottom: 38rpx; display: flex; align-items: center; justify-content: center;">
|
||||
<text style="font-size: 27.78rpx; color: #FFFFFF;">¥20</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<image src="/static/ic_join.png" style="width: 561.81rpx; height: 122.92rpx; margin: 0 auto 0;" mode="">
|
||||
</image>
|
||||
|
||||
</view>
|
||||
|
||||
<!-- 详情弹窗 -->
|
||||
<uni-popup ref="detailsPop" type="bottom" :safe-area='false'>
|
||||
<view class="" style="width: 100%; height: 819.44rpx; display: flex; flex-direction: column; align-items: center; background-image: url('/static/specifics_bg.png'); background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;">
|
||||
<view class=""
|
||||
style="width: 688.88rpx; display: flex; flex-direction: row; justify-content: space-between; margin-top: 36.11rpx; align-items: center;">
|
||||
<view style="width: 30rpx;"></view>
|
||||
<text style="font-size: 31.25rpx; color: #695C4E;">商品详情</text>
|
||||
<view class=""
|
||||
style="width: 30rpx; height: 30rpx; display: flex; align-items: center; justify-content: center;"
|
||||
@click="closeDetailsPop()">
|
||||
<image src="/static/ic_close.png" style="width: 19.44rpx; height: 19.44rpx;" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<image src=""
|
||||
style="width: 447.92rpx; height: 447.92rpx; background-color: white; margin-top: 85.42rpx;" mode="">
|
||||
</image>
|
||||
|
||||
<text
|
||||
style="font-size: 25rpx; color: #695C4E; width: 100%; margin-left: 38.19rpx; margin-top: 81.94rpx;">品牌:</text>
|
||||
<text
|
||||
style="font-size: 25rpx; color: #695C4E; width: 100%; margin-left: 38.19rpx; margin-top: 19.44rpx;">尺寸:直径约56mm</text>
|
||||
</view>
|
||||
</uni-popup>
|
||||
|
||||
|
||||
|
||||
<uni-popup ref="payPop" type="bottom" :safe-area='false'>
|
||||
|
||||
<view class="" style="width: 100%; height: 1002.78rpx; display: flex; flex-direction: column; align-items: center; background-image: url('/static/pay_pop_bg.png'); background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;">
|
||||
|
||||
<view class=""
|
||||
style="width: 688.88rpx; display: flex; flex-direction: row; justify-content: space-between; margin-top: 36.11rpx; align-items: center;">
|
||||
<view style="width: 30rpx;"></view>
|
||||
<text style="font-size: 22.22rpx; color: #8C8574;">本商品不可退换 未成年人请谨慎购买</text>
|
||||
<view class=""
|
||||
style="width: 30rpx; height: 30rpx; display: flex; align-items: center; justify-content: center;"
|
||||
@click="closePayPop()()">
|
||||
<image src="/static/ic_close.png" style="width: 19.44rpx; height: 19.44rpx;" mode=""></image>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class=""
|
||||
style="width: 690.28rpx; height: 62.5rpx; background-color: #FFFFFF; border-radius: 16rpx; margin-top: 22.92rpx; display: flex; align-items: center; position: relative;">
|
||||
|
||||
<image src="/static/ic_address.png"
|
||||
style="width: 19.44rpx; height: 22.92rpx; position: absolute; left: 19.44rpx;" mode=""></image>
|
||||
|
||||
|
||||
<text style="font-size: 22.22rpx; color: #6E5B51; left: 52.08rpx; position: absolute;">某某
|
||||
河南省河南省河南省河南省</text>
|
||||
|
||||
<image src="/static/ic_right_arrow.png"
|
||||
style="width: 13.19rpx; height: 22.92rpx; position: absolute; right: 26.39rpx;" mode=""></image>
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
</uni-popup>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import specialBanner from '../../components/specialBanner.vue'
|
||||
export default {
|
||||
components: {
|
||||
specialBanner
|
||||
},
|
||||
onLoad(options) {
|
||||
console.log(options.id);
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bannerList: [{
|
||||
picture: 'https://contentcms-bj.cdn.bcebos.com/cmspic/ab7e4834ebc54a128e243bdfd51444da.jpeg?x-bce-process=image/crop,x_0,y_0,w_619,h_337',
|
||||
path: ''
|
||||
}, {
|
||||
picture: 'https://contentcms-bj.cdn.bcebos.com/cmspic/ab7e4834ebc54a128e243bdfd51444da.jpeg?x-bce-process=image/crop,x_0,y_0,w_619,h_337',
|
||||
path: ''
|
||||
}, {
|
||||
picture: 'https://contentcms-bj.cdn.bcebos.com/cmspic/ab7e4834ebc54a128e243bdfd51444da.jpeg?x-bce-process=image/crop,x_0,y_0,w_619,h_337',
|
||||
path: ''
|
||||
}, {
|
||||
picture: 'https://contentcms-bj.cdn.bcebos.com/cmspic/ab7e4834ebc54a128e243bdfd51444da.jpeg?x-bce-process=image/crop,x_0,y_0,w_619,h_337',
|
||||
path: ''
|
||||
}],
|
||||
swiperConfig: {
|
||||
indicatorDots: false,
|
||||
indicatorColor: 'rgba(255, 255, 255, .4)',
|
||||
indicatorActiveColor: 'rgba(255, 255, 255, 1)',
|
||||
autoplay: false,
|
||||
interval: 3000,
|
||||
duration: 300,
|
||||
circular: true,
|
||||
previousMargin: '58rpx',
|
||||
nextMargin: '58rpx'
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toBack() {
|
||||
uni.navigateBack();
|
||||
},
|
||||
|
||||
openDetailsPop() {
|
||||
this.$refs.detailsPop.open()
|
||||
},
|
||||
closeDetailsPop() {
|
||||
this.$refs.detailsPop.close()
|
||||
},
|
||||
|
||||
openPayPop() {
|
||||
this.$refs.payPop.open()
|
||||
},
|
||||
closePayPop() {
|
||||
this.$refs.payPop.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,42 @@
|
|||
<template>
|
||||
<view>
|
||||
|
||||
<view class="content" style="background-image: url('/static/bags_bg.png');">
|
||||
|
||||
|
||||
<view class="" style="width: 100%; height: 138.19rpx; margin-top: 195.14rpx; position: relative;">
|
||||
|
||||
<image src=""
|
||||
style="width: 137.5rpx; height: 137.5rpx; background-color: #FFFFFF; border: 2rpx solid #F5D677; border-radius: 50%; margin-left: 29.17rpx; position: absolute;"
|
||||
mode=""></image>
|
||||
|
||||
<view class=""
|
||||
style="display: flex; flex-direction: row; position: absolute; align-items: center; left: 186.81rpx; top: 35.42rpx;">
|
||||
<text style="font-size: 29.17rpx; color: #6E5B51;">坂本日常</text>
|
||||
<image src="/static/ic_modify.png" style="width: 22.92rpx; height: 22.92rpx; margin-left: 13.16rpx;"
|
||||
mode=""></image>
|
||||
</view>
|
||||
|
||||
<text
|
||||
style="position: absolute; left: 186.81rpx; bottom: 35.42rpx; font-size: 19.42rpx; color: #8C8574;">ID:3232321323</text>
|
||||
|
||||
</view>
|
||||
|
||||
<view class=""
|
||||
style="width: 689.58rpx; height: 161.81rpx; background-color: #FFFFFF; margin: 48.61rpx auto 0; border-radius: 20rpx; display: flex; flex-direction: row; align-items: center; justify-content: space-around;">
|
||||
|
||||
<image src="/static/ic_coupon.png" style="width: 100.69rpx; height: 98.61rpx;" mode=""></image>
|
||||
|
||||
<view style="width: 0.69rpx; height: 98.61rpx; background-color: #6E5B51;"></view>
|
||||
|
||||
<image src="/static/ic_order.png" style="width: 100.69rpx; height: 98.61rpx;" mode=""></image>
|
||||
|
||||
<view style="width: 0.69rpx; height: 98.61rpx; background-color: #6E5B51;"></view>
|
||||
|
||||
<image src="/static/ic_kf.png" style="width: 100.69rpx; height: 98.61rpx;" mode=""></image>
|
||||
|
||||
|
||||
</view>
|
||||
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -8,15 +44,24 @@
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
</style>
|
||||
BIN
static/bags.png
Normal file
|
After Width: | Height: | Size: 32 KiB |
BIN
static/details.png
Normal file
|
After Width: | Height: | Size: 39 KiB |
BIN
static/details_bg.png
Normal file
|
After Width: | Height: | Size: 2.2 MiB |
BIN
static/fonts/JiangChengYuanTi-300W.ttf
Normal file
BIN
static/fonts/JiangChengYuanTi-400W.ttf
Normal file
BIN
static/fonts/JiangChengYuanTi-600W.ttf
Normal file
BIN
static/fonts/JiangChengYuanTi-700W.ttf
Normal file
BIN
static/goods_bg.png
Normal file
|
After Width: | Height: | Size: 1.6 MiB |
BIN
static/ic_address.png
Normal file
|
After Width: | Height: | Size: 6.6 KiB |
BIN
static/ic_back.png
Normal file
|
After Width: | Height: | Size: 2.2 KiB |
BIN
static/ic_close.png
Normal file
|
After Width: | Height: | Size: 4.1 KiB |
BIN
static/ic_coupon.png
Normal file
|
After Width: | Height: | Size: 44 KiB |
BIN
static/ic_join.png
Normal file
|
After Width: | Height: | Size: 101 KiB |
BIN
static/ic_kf.png
Normal file
|
After Width: | Height: | Size: 39 KiB |
BIN
static/ic_modify.png
Normal file
|
After Width: | Height: | Size: 4.9 KiB |
BIN
static/ic_order.png
Normal file
|
After Width: | Height: | Size: 33 KiB |
BIN
static/ic_pay.png
Normal file
|
After Width: | Height: | Size: 254 KiB |
BIN
static/ic_prompt.png
Normal file
|
After Width: | Height: | Size: 11 KiB |
BIN
static/ic_right_arrow.png
Normal file
|
After Width: | Height: | Size: 3.0 KiB |
BIN
static/pay_pop_bg.png
Normal file
|
After Width: | Height: | Size: 472 KiB |
BIN
static/share.png
Normal file
|
After Width: | Height: | Size: 44 KiB |
BIN
static/specifics_bg.png
Normal file
|
After Width: | Height: | Size: 359 KiB |
BIN
static/title_bg.png
Normal file
|
After Width: | Height: | Size: 14 KiB |
100
uni_modules/uni-popup/changelog.md
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
## 1.9.10(2025-07-18)
|
||||
- 修复 nvue 下弹窗样式错乱的问题 ,更新依赖 uni-transition 组件
|
||||
- 更新 示例取消 borderRadius 属性 ,如需内容圆角,用户应该直接在内容插槽中实现
|
||||
## 1.9.9(2025-06-11)
|
||||
- 修复 uni-popup-dialog 中 setVal 方法报错的问题
|
||||
- 修复 uni-popup-dialog 数据双向绑定问题。
|
||||
## 1.9.8(2025-04-16)
|
||||
- 修复 更新组件示例 ,解决更新数据或保存项目导致弹窗消失的问题
|
||||
## 1.9.7(2025-04-14)
|
||||
- 修复 uni-popup-dialog 弹出框在vue3中双向绑定问题
|
||||
## 1.9.6(2025-01-08)
|
||||
- 修复 示例中过期图片地址
|
||||
## 1.9.5(2024-10-15)
|
||||
- 修复 微信小程序中的getSystemInfo警告
|
||||
## 1.9.2(2024-09-21)
|
||||
- 修复 uni-popup在android上的重复点击弹出位置不正确的bug
|
||||
## 1.9.1(2024-04-02)
|
||||
- 修复 uni-popup-dialog vue3下使用value无法进行绑定的bug(双向绑定兼容旧写法)
|
||||
## 1.9.0(2024-03-28)
|
||||
- 修复 uni-popup-dialog 双向绑定时初始化逻辑修正
|
||||
## 1.8.9(2024-03-20)
|
||||
- 修复 uni-popup-dialog 数据输入时修正为双向绑定
|
||||
## 1.8.8(2024-02-20)
|
||||
- 修复 uni-popup 在微信小程序下出现文字向上闪动的bug
|
||||
## 1.8.7(2024-02-02)
|
||||
- 新增 uni-popup-dialog 新增属性focus:input模式下,是否自动自动聚焦
|
||||
## 1.8.6(2024-01-30)
|
||||
- 新增 uni-popup-dialog 新增属性maxLength:限制输入框字数
|
||||
## 1.8.5(2024-01-26)
|
||||
- 新增 uni-popup-dialog 新增属性showClose:控制关闭按钮的显示
|
||||
## 1.8.4(2023-11-15)
|
||||
- 新增 uni-popup 支持uni-app-x 注意暂时仅支持 `maskClick` `@open` `@close`
|
||||
## 1.8.3(2023-04-17)
|
||||
- 修复 uni-popup 重复打开时的 bug
|
||||
## 1.8.2(2023-02-02)
|
||||
- uni-popup-dialog 组件新增 inputType 属性
|
||||
## 1.8.1(2022-12-01)
|
||||
- 修复 nvue 下 v-show 报错
|
||||
## 1.8.0(2022-11-29)
|
||||
- 优化 主题样式
|
||||
## 1.7.9(2022-04-02)
|
||||
- 修复 弹出层内部无法滚动的bug
|
||||
## 1.7.8(2022-03-28)
|
||||
- 修复 小程序中高度错误的bug
|
||||
## 1.7.7(2022-03-17)
|
||||
- 修复 快速调用open出现问题的Bug
|
||||
## 1.7.6(2022-02-14)
|
||||
- 修复 safeArea 属性不能设置为false的bug
|
||||
## 1.7.5(2022-01-19)
|
||||
- 修复 isMaskClick 失效的bug
|
||||
## 1.7.4(2022-01-19)
|
||||
- 新增 cancelText \ confirmText 属性 ,可自定义文本
|
||||
- 新增 maskBackgroundColor 属性 ,可以修改蒙版颜色
|
||||
- 优化 maskClick属性 更新为 isMaskClick ,解决微信小程序警告的问题
|
||||
## 1.7.3(2022-01-13)
|
||||
- 修复 设置 safeArea 属性不生效的bug
|
||||
## 1.7.2(2021-11-26)
|
||||
- 优化 组件示例
|
||||
## 1.7.1(2021-11-26)
|
||||
- 修复 vuedoc 文字错误
|
||||
## 1.7.0(2021-11-19)
|
||||
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-popup](https://uniapp.dcloud.io/component/uniui/uni-popup)
|
||||
## 1.6.2(2021-08-24)
|
||||
- 新增 支持国际化
|
||||
## 1.6.1(2021-07-30)
|
||||
- 优化 vue3下事件警告的问题
|
||||
## 1.6.0(2021-07-13)
|
||||
- 组件兼容 vue3,如何创建vue3项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||
## 1.5.0(2021-06-23)
|
||||
- 新增 mask-click 遮罩层点击事件
|
||||
## 1.4.5(2021-06-22)
|
||||
- 修复 nvue 平台中间弹出后,点击内容,再点击遮罩无法关闭的Bug
|
||||
## 1.4.4(2021-06-18)
|
||||
- 修复 H5平台中间弹出后,点击内容,再点击遮罩无法关闭的Bug
|
||||
## 1.4.3(2021-06-08)
|
||||
- 修复 错误的 watch 字段
|
||||
- 修复 safeArea 属性不生效的问题
|
||||
- 修复 点击内容,再点击遮罩无法关闭的Bug
|
||||
## 1.4.2(2021-05-12)
|
||||
- 新增 组件示例地址
|
||||
## 1.4.1(2021-04-29)
|
||||
- 修复 组件内放置 input 、textarea 组件,无法聚焦的问题
|
||||
## 1.4.0 (2021-04-29)
|
||||
- 新增 type 属性的 left\right 值,支持左右弹出
|
||||
- 新增 open(String:type) 方法参数 ,可以省略 type 属性 ,直接传入类型打开指定弹窗
|
||||
- 新增 backgroundColor 属性,可定义主窗口背景色,默认不显示背景色
|
||||
- 新增 safeArea 属性,是否适配底部安全区
|
||||
- 修复 App\h5\微信小程序底部安全区占位不对的Bug
|
||||
- 修复 App 端弹出等待的Bug
|
||||
- 优化 提升低配设备性能,优化动画卡顿问题
|
||||
- 优化 更简单的组件自定义方式
|
||||
## 1.2.9(2021-02-05)
|
||||
- 优化 组件引用关系,通过uni_modules引用组件
|
||||
## 1.2.8(2021-02-05)
|
||||
- 调整为uni_modules目录规范
|
||||
## 1.2.7(2021-02-05)
|
||||
- 调整为uni_modules目录规范
|
||||
- 新增 支持 PC 端
|
||||
- 新增 uni-popup-message 、uni-popup-dialog扩展组件支持 PC 端
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
// #ifdef H5
|
||||
export default {
|
||||
name: 'Keypress',
|
||||
props: {
|
||||
disable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const keyNames = {
|
||||
esc: ['Esc', 'Escape'],
|
||||
tab: 'Tab',
|
||||
enter: 'Enter',
|
||||
space: [' ', 'Spacebar'],
|
||||
up: ['Up', 'ArrowUp'],
|
||||
left: ['Left', 'ArrowLeft'],
|
||||
right: ['Right', 'ArrowRight'],
|
||||
down: ['Down', 'ArrowDown'],
|
||||
delete: ['Backspace', 'Delete', 'Del']
|
||||
}
|
||||
const listener = ($event) => {
|
||||
if (this.disable) {
|
||||
return
|
||||
}
|
||||
const keyName = Object.keys(keyNames).find(key => {
|
||||
const keyName = $event.key
|
||||
const value = keyNames[key]
|
||||
return value === keyName || (Array.isArray(value) && value.includes(keyName))
|
||||
})
|
||||
if (keyName) {
|
||||
// 避免和其他按键事件冲突
|
||||
setTimeout(() => {
|
||||
this.$emit(keyName, {})
|
||||
}, 0)
|
||||
}
|
||||
}
|
||||
document.addEventListener('keyup', listener)
|
||||
this.$once('hook:beforeDestroy', () => {
|
||||
document.removeEventListener('keyup', listener)
|
||||
})
|
||||
},
|
||||
render: () => {}
|
||||
}
|
||||
// #endif
|
||||
|
|
@ -0,0 +1,327 @@
|
|||
<template>
|
||||
<view class="uni-popup-dialog">
|
||||
<view class="uni-dialog-title">
|
||||
<text class="uni-dialog-title-text" :class="['uni-popup__'+dialogType]">{{titleText}}</text>
|
||||
</view>
|
||||
<view v-if="mode === 'base'" class="uni-dialog-content">
|
||||
<slot>
|
||||
<text class="uni-dialog-content-text">{{content}}</text>
|
||||
</slot>
|
||||
</view>
|
||||
<view v-else class="uni-dialog-content">
|
||||
<slot>
|
||||
<input class="uni-dialog-input" :maxlength="maxlength" v-model="val" :type="inputType"
|
||||
:placeholder="placeholderText" :focus="focus">
|
||||
</slot>
|
||||
</view>
|
||||
<view class="uni-dialog-button-group">
|
||||
<view class="uni-dialog-button" v-if="showClose" @click="closeDialog">
|
||||
<text class="uni-dialog-button-text">{{closeText}}</text>
|
||||
</view>
|
||||
<view class="uni-dialog-button" :class="showClose?'uni-border-left':''" @click="onOk">
|
||||
<text class="uni-dialog-button-text uni-button-color">{{okText}}</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import popup from '../uni-popup/popup.js'
|
||||
import {
|
||||
initVueI18n
|
||||
} from '@dcloudio/uni-i18n'
|
||||
import messages from '../uni-popup/i18n/index.js'
|
||||
const {
|
||||
t
|
||||
} = initVueI18n(messages)
|
||||
/**
|
||||
* PopUp 弹出层-对话框样式
|
||||
* @description 弹出层-对话框样式
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
||||
* @property {String} value input 模式下的默认值
|
||||
* @property {String} placeholder input 模式下输入提示
|
||||
* @property {Boolean} focus input模式下是否自动聚焦,默认为true
|
||||
* @property {String} type = [success|warning|info|error] 主题样式
|
||||
* @value success 成功
|
||||
* @value warning 提示
|
||||
* @value info 消息
|
||||
* @value error 错误
|
||||
* @property {String} mode = [base|input] 模式、
|
||||
* @value base 基础对话框
|
||||
* @value input 可输入对话框
|
||||
* @showClose {Boolean} 是否显示关闭按钮
|
||||
* @property {String} content 对话框内容
|
||||
* @property {Boolean} beforeClose 是否拦截取消事件
|
||||
* @property {Number} maxlength 输入
|
||||
* @event {Function} confirm 点击确认按钮触发
|
||||
* @event {Function} close 点击取消按钮触发
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: "uniPopupDialog",
|
||||
mixins: [popup],
|
||||
emits: ['confirm', 'close', 'update:modelValue', 'input'],
|
||||
props: {
|
||||
inputType: {
|
||||
type: String,
|
||||
default: 'text'
|
||||
},
|
||||
showClose: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// #ifdef VUE2
|
||||
value: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
modelValue: {
|
||||
type: [Number, String],
|
||||
default: ''
|
||||
},
|
||||
// #endif
|
||||
|
||||
|
||||
placeholder: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'error'
|
||||
},
|
||||
mode: {
|
||||
type: String,
|
||||
default: 'base'
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
content: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
beforeClose: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
cancelText: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
maxlength: {
|
||||
type: Number,
|
||||
default: -1,
|
||||
},
|
||||
focus: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
dialogType: 'error',
|
||||
val: ""
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
okText() {
|
||||
return this.confirmText || t("uni-popup.ok")
|
||||
},
|
||||
closeText() {
|
||||
return this.cancelText || t("uni-popup.cancel")
|
||||
},
|
||||
placeholderText() {
|
||||
return this.placeholder || t("uni-popup.placeholder")
|
||||
},
|
||||
titleText() {
|
||||
return this.title || t("uni-popup.title")
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
type(val) {
|
||||
this.dialogType = val
|
||||
},
|
||||
mode(val) {
|
||||
if (val === 'input') {
|
||||
this.dialogType = 'info'
|
||||
}
|
||||
},
|
||||
value(val) {
|
||||
this.setVal(val)
|
||||
},
|
||||
// #ifdef VUE3
|
||||
modelValue(val) {
|
||||
this.setVal(val)
|
||||
},
|
||||
// #endif
|
||||
val(val) {
|
||||
// #ifdef VUE2
|
||||
// TODO 兼容 vue2
|
||||
this.$emit('input', val);
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
// TODO 兼容 vue3
|
||||
this.$emit('update:modelValue', val);
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 对话框遮罩不可点击
|
||||
this.popup.disableMask()
|
||||
// this.popup.closeMask()
|
||||
if (this.mode === 'input') {
|
||||
this.dialogType = 'info'
|
||||
this.val = this.value;
|
||||
// #ifdef VUE3
|
||||
this.val = this.modelValue;
|
||||
// #endif
|
||||
} else {
|
||||
this.dialogType = this.type
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 给val属性赋值
|
||||
*/
|
||||
setVal(val) {
|
||||
if (this.maxlength != -1 && this.mode === 'input') {
|
||||
this.val = val.slice(0, this.maxlength);
|
||||
} else {
|
||||
this.val = val
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 点击确认按钮
|
||||
*/
|
||||
onOk() {
|
||||
if (this.mode === 'input') {
|
||||
this.$emit('confirm', this.val)
|
||||
} else {
|
||||
this.$emit('confirm')
|
||||
}
|
||||
if (this.beforeClose) return
|
||||
this.popup.close()
|
||||
},
|
||||
/**
|
||||
* 点击取消按钮
|
||||
*/
|
||||
closeDialog() {
|
||||
this.$emit('close')
|
||||
if (this.beforeClose) return
|
||||
this.popup.close()
|
||||
},
|
||||
close() {
|
||||
this.popup.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.uni-popup-dialog {
|
||||
width: 300px;
|
||||
border-radius: 11px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.uni-dialog-title {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding-top: 25px;
|
||||
}
|
||||
|
||||
.uni-dialog-title-text {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.uni-dialog-content {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.uni-dialog-content-text {
|
||||
font-size: 14px;
|
||||
color: #6C6C6C;
|
||||
}
|
||||
|
||||
.uni-dialog-button-group {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
border-top-color: #f5f5f5;
|
||||
border-top-style: solid;
|
||||
border-top-width: 1px;
|
||||
}
|
||||
|
||||
.uni-dialog-button {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.uni-border-left {
|
||||
border-left-color: #f0f0f0;
|
||||
border-left-style: solid;
|
||||
border-left-width: 1px;
|
||||
}
|
||||
|
||||
.uni-dialog-button-text {
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.uni-button-color {
|
||||
color: #007aff;
|
||||
}
|
||||
|
||||
.uni-dialog-input {
|
||||
flex: 1;
|
||||
font-size: 14px;
|
||||
border: 1px #eee solid;
|
||||
height: 40px;
|
||||
padding: 0 10px;
|
||||
border-radius: 5px;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.uni-popup__success {
|
||||
color: #4cd964;
|
||||
}
|
||||
|
||||
.uni-popup__warn {
|
||||
color: #f0ad4e;
|
||||
}
|
||||
|
||||
.uni-popup__error {
|
||||
color: #dd524d;
|
||||
}
|
||||
|
||||
.uni-popup__info {
|
||||
color: #909399;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,143 @@
|
|||
<template>
|
||||
<view class="uni-popup-message">
|
||||
<view class="uni-popup-message__box fixforpc-width" :class="'uni-popup__'+type">
|
||||
<slot>
|
||||
<text class="uni-popup-message-text" :class="'uni-popup__'+type+'-text'">{{message}}</text>
|
||||
</slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import popup from '../uni-popup/popup.js'
|
||||
/**
|
||||
* PopUp 弹出层-消息提示
|
||||
* @description 弹出层-消息提示
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
||||
* @property {String} type = [success|warning|info|error] 主题样式
|
||||
* @value success 成功
|
||||
* @value warning 提示
|
||||
* @value info 消息
|
||||
* @value error 错误
|
||||
* @property {String} message 消息提示文字
|
||||
* @property {String} duration 显示时间,设置为 0 则不会自动关闭
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: 'uniPopupMessage',
|
||||
mixins:[popup],
|
||||
props: {
|
||||
/**
|
||||
* 主题 success/warning/info/error 默认 success
|
||||
*/
|
||||
type: {
|
||||
type: String,
|
||||
default: 'success'
|
||||
},
|
||||
/**
|
||||
* 消息文字
|
||||
*/
|
||||
message: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
/**
|
||||
* 显示时间,设置为 0 则不会自动关闭
|
||||
*/
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 3000
|
||||
},
|
||||
maskShow:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
created() {
|
||||
this.popup.maskShow = this.maskShow
|
||||
this.popup.messageChild = this
|
||||
},
|
||||
methods: {
|
||||
timerClose(){
|
||||
if(this.duration === 0) return
|
||||
clearTimeout(this.timer)
|
||||
this.timer = setTimeout(()=>{
|
||||
this.popup.close()
|
||||
},this.duration)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" >
|
||||
.uni-popup-message {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.uni-popup-message__box {
|
||||
background-color: #e1f3d8;
|
||||
padding: 10px 15px;
|
||||
border-color: #eee;
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
.fixforpc-width {
|
||||
margin-top: 20px;
|
||||
border-radius: 4px;
|
||||
flex: none;
|
||||
min-width: 380px;
|
||||
/* #ifndef APP-NVUE */
|
||||
max-width: 50%;
|
||||
/* #endif */
|
||||
/* #ifdef APP-NVUE */
|
||||
max-width: 500px;
|
||||
/* #endif */
|
||||
}
|
||||
}
|
||||
|
||||
.uni-popup-message-text {
|
||||
font-size: 14px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.uni-popup__success {
|
||||
background-color: #e1f3d8;
|
||||
}
|
||||
|
||||
.uni-popup__success-text {
|
||||
color: #67C23A;
|
||||
}
|
||||
|
||||
.uni-popup__warn {
|
||||
background-color: #faecd8;
|
||||
}
|
||||
|
||||
.uni-popup__warn-text {
|
||||
color: #E6A23C;
|
||||
}
|
||||
|
||||
.uni-popup__error {
|
||||
background-color: #fde2e2;
|
||||
}
|
||||
|
||||
.uni-popup__error-text {
|
||||
color: #F56C6C;
|
||||
}
|
||||
|
||||
.uni-popup__info {
|
||||
background-color: #F2F6FC;
|
||||
}
|
||||
|
||||
.uni-popup__info-text {
|
||||
color: #909399;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,188 @@
|
|||
<template>
|
||||
<view class="uni-popup-share">
|
||||
<view class="uni-share-title"><text class="uni-share-title-text">{{shareTitleText}}</text></view>
|
||||
<view class="uni-share-content">
|
||||
<view class="uni-share-content-box">
|
||||
<view class="uni-share-content-item" v-for="(item,index) in bottomData" :key="index" @click.stop="select(item,index)">
|
||||
<image class="uni-share-image" :src="item.icon" mode="aspectFill"></image>
|
||||
<text class="uni-share-text">{{item.text}}</text>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-share-button-box">
|
||||
<button class="uni-share-button" @click="close">{{cancelText}}</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import popup from '../uni-popup/popup.js'
|
||||
import {
|
||||
initVueI18n
|
||||
} from '@dcloudio/uni-i18n'
|
||||
import messages from '../uni-popup/i18n/index.js'
|
||||
const { t } = initVueI18n(messages)
|
||||
export default {
|
||||
name: 'UniPopupShare',
|
||||
mixins:[popup],
|
||||
emits:['select'],
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
beforeClose: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// TODO 替换为自己的图标
|
||||
bottomData: [{
|
||||
text: '微信',
|
||||
icon: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
|
||||
name: 'wx'
|
||||
},
|
||||
{
|
||||
text: '支付宝',
|
||||
icon: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
|
||||
name: 'ali'
|
||||
},
|
||||
{
|
||||
text: 'QQ',
|
||||
icon: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
|
||||
name: 'qq'
|
||||
},
|
||||
{
|
||||
text: '新浪',
|
||||
icon: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png',
|
||||
name: 'sina'
|
||||
},
|
||||
// {
|
||||
// text: '百度',
|
||||
// icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/1ec6e920-50bf-11eb-8a36-ebb87efcf8c0.png',
|
||||
// name: 'copy'
|
||||
// },
|
||||
// {
|
||||
// text: '其他',
|
||||
// icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/2e0fdfe0-50bf-11eb-b997-9918a5dda011.png',
|
||||
// name: 'more'
|
||||
// }
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
computed: {
|
||||
cancelText() {
|
||||
return t("uni-popup.cancel")
|
||||
},
|
||||
shareTitleText() {
|
||||
return this.title || t("uni-popup.shareTitle")
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 选择内容
|
||||
*/
|
||||
select(item, index) {
|
||||
this.$emit('select', {
|
||||
item,
|
||||
index
|
||||
})
|
||||
this.close()
|
||||
|
||||
},
|
||||
/**
|
||||
* 关闭窗口
|
||||
*/
|
||||
close() {
|
||||
if(this.beforeClose) return
|
||||
this.popup.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" >
|
||||
.uni-popup-share {
|
||||
background-color: #fff;
|
||||
border-top-left-radius: 11px;
|
||||
border-top-right-radius: 11px;
|
||||
}
|
||||
.uni-share-title {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 40px;
|
||||
}
|
||||
.uni-share-title-text {
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
.uni-share-content {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
.uni-share-content-box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
width: 360px;
|
||||
}
|
||||
|
||||
.uni-share-content-item {
|
||||
width: 90px;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 10px 0;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.uni-share-content-item:active {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.uni-share-image {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
|
||||
.uni-share-text {
|
||||
margin-top: 10px;
|
||||
font-size: 14px;
|
||||
color: #3B4144;
|
||||
}
|
||||
|
||||
.uni-share-button-box {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
padding: 10px 15px;
|
||||
}
|
||||
|
||||
.uni-share-button {
|
||||
flex: 1;
|
||||
border-radius: 50px;
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.uni-share-button::after {
|
||||
border-radius: 50px;
|
||||
}
|
||||
</style>
|
||||
7
uni_modules/uni-popup/components/uni-popup/i18n/en.json
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"uni-popup.cancel": "cancel",
|
||||
"uni-popup.ok": "ok",
|
||||
"uni-popup.placeholder": "pleace enter",
|
||||
"uni-popup.title": "Hint",
|
||||
"uni-popup.shareTitle": "Share to"
|
||||
}
|
||||
8
uni_modules/uni-popup/components/uni-popup/i18n/index.js
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
import en from './en.json'
|
||||
import zhHans from './zh-Hans.json'
|
||||
import zhHant from './zh-Hant.json'
|
||||
export default {
|
||||
en,
|
||||
'zh-Hans': zhHans,
|
||||
'zh-Hant': zhHant
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"uni-popup.cancel": "取消",
|
||||
"uni-popup.ok": "确定",
|
||||
"uni-popup.placeholder": "请输入",
|
||||
"uni-popup.title": "提示",
|
||||
"uni-popup.shareTitle": "分享到"
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"uni-popup.cancel": "取消",
|
||||
"uni-popup.ok": "確定",
|
||||
"uni-popup.placeholder": "請輸入",
|
||||
"uni-popup.title": "提示",
|
||||
"uni-popup.shareTitle": "分享到"
|
||||
}
|
||||
45
uni_modules/uni-popup/components/uni-popup/keypress.js
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
// #ifdef H5
|
||||
export default {
|
||||
name: 'Keypress',
|
||||
props: {
|
||||
disable: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
const keyNames = {
|
||||
esc: ['Esc', 'Escape'],
|
||||
tab: 'Tab',
|
||||
enter: 'Enter',
|
||||
space: [' ', 'Spacebar'],
|
||||
up: ['Up', 'ArrowUp'],
|
||||
left: ['Left', 'ArrowLeft'],
|
||||
right: ['Right', 'ArrowRight'],
|
||||
down: ['Down', 'ArrowDown'],
|
||||
delete: ['Backspace', 'Delete', 'Del']
|
||||
}
|
||||
const listener = ($event) => {
|
||||
if (this.disable) {
|
||||
return
|
||||
}
|
||||
const keyName = Object.keys(keyNames).find(key => {
|
||||
const keyName = $event.key
|
||||
const value = keyNames[key]
|
||||
return value === keyName || (Array.isArray(value) && value.includes(keyName))
|
||||
})
|
||||
if (keyName) {
|
||||
// 避免和其他按键事件冲突
|
||||
setTimeout(() => {
|
||||
this.$emit(keyName, {})
|
||||
}, 0)
|
||||
}
|
||||
}
|
||||
document.addEventListener('keyup', listener)
|
||||
// this.$once('hook:beforeDestroy', () => {
|
||||
// document.removeEventListener('keyup', listener)
|
||||
// })
|
||||
},
|
||||
render: () => {}
|
||||
}
|
||||
// #endif
|
||||
26
uni_modules/uni-popup/components/uni-popup/popup.js
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.popup = this.getParent()
|
||||
},
|
||||
methods:{
|
||||
/**
|
||||
* 获取父元素实例
|
||||
*/
|
||||
getParent(name = 'uniPopup') {
|
||||
let parent = this.$parent;
|
||||
let parentName = parent.$options.name;
|
||||
while (parentName !== name) {
|
||||
parent = parent.$parent;
|
||||
if (!parent) return false
|
||||
parentName = parent.$options.name;
|
||||
}
|
||||
return parent;
|
||||
},
|
||||
}
|
||||
}
|
||||
90
uni_modules/uni-popup/components/uni-popup/uni-popup.uvue
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
<template>
|
||||
<view class="popup-root" v-if="isOpen" v-show="isShow" @click="clickMask">
|
||||
<view @click.stop>
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
type CloseCallBack = ()=> void;
|
||||
let closeCallBack:CloseCallBack = () :void => {};
|
||||
export default {
|
||||
emits:["close","clickMask"],
|
||||
data() {
|
||||
return {
|
||||
isShow:false,
|
||||
isOpen:false
|
||||
}
|
||||
},
|
||||
props: {
|
||||
maskClick: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
// 设置show = true 时,如果没有 open 需要设置为 open
|
||||
isShow:{
|
||||
handler(isShow) {
|
||||
// console.log("isShow",isShow)
|
||||
if(isShow && this.isOpen == false){
|
||||
this.isOpen = true
|
||||
}
|
||||
},
|
||||
immediate:true
|
||||
},
|
||||
// 设置isOpen = true 时,如果没有 isShow 需要设置为 isShow
|
||||
isOpen:{
|
||||
handler(isOpen) {
|
||||
// console.log("isOpen",isOpen)
|
||||
if(isOpen && this.isShow == false){
|
||||
this.isShow = true
|
||||
}
|
||||
},
|
||||
immediate:true
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
open(){
|
||||
// ...funs : CloseCallBack[]
|
||||
// if(funs.length > 0){
|
||||
// closeCallBack = funs[0]
|
||||
// }
|
||||
this.isOpen = true;
|
||||
},
|
||||
clickMask(){
|
||||
if(this.maskClick == true){
|
||||
this.$emit('clickMask')
|
||||
this.close()
|
||||
}
|
||||
},
|
||||
close(): void{
|
||||
this.isOpen = false;
|
||||
this.$emit('close')
|
||||
closeCallBack()
|
||||
},
|
||||
hiden(){
|
||||
this.isShow = false
|
||||
},
|
||||
show(){
|
||||
this.isShow = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.popup-root {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 750rpx;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 99;
|
||||
}
|
||||
</style>
|
||||
518
uni_modules/uni-popup/components/uni-popup/uni-popup.vue
Normal file
|
|
@ -0,0 +1,518 @@
|
|||
<template>
|
||||
<view v-if="showPopup" class="uni-popup" :class="[popupstyle, isDesktop ? 'fixforpc-z-index' : '']">
|
||||
<view @touchstart="touchstart">
|
||||
<uni-transition key="1" v-if="maskShow" name="mask" mode-class="fade" :styles="maskClass"
|
||||
:duration="duration" :show="showTrans" @click="onTap" />
|
||||
<uni-transition key="2" :mode-class="ani" name="content" :styles="transClass" :duration="duration"
|
||||
:show="showTrans" @click="onTap">
|
||||
<view class="uni-popup__wrapper" :style="getStyles" :class="[popupstyle]" @click="clear">
|
||||
<slot />
|
||||
</view>
|
||||
</uni-transition>
|
||||
</view>
|
||||
<!-- #ifdef H5 -->
|
||||
<keypress v-if="maskShow" @esc="onTap" />
|
||||
<!-- #endif -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// #ifdef H5
|
||||
import keypress from './keypress.js'
|
||||
// #endif
|
||||
|
||||
/**
|
||||
* PopUp 弹出层
|
||||
* @description 弹出层组件,为了解决遮罩弹层的问题
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=329
|
||||
* @property {String} type = [top|center|bottom|left|right|message|dialog|share] 弹出方式
|
||||
* @value top 顶部弹出
|
||||
* @value center 中间弹出
|
||||
* @value bottom 底部弹出
|
||||
* @value left 左侧弹出
|
||||
* @value right 右侧弹出
|
||||
* @value message 消息提示
|
||||
* @value dialog 对话框
|
||||
* @value share 底部分享示例
|
||||
* @property {Boolean} animation = [true|false] 是否开启动画
|
||||
* @property {Boolean} maskClick = [true|false] 蒙版点击是否关闭弹窗(废弃)
|
||||
* @property {Boolean} isMaskClick = [true|false] 蒙版点击是否关闭弹窗
|
||||
* @property {String} backgroundColor 主窗口背景色
|
||||
* @property {String} maskBackgroundColor 蒙版颜色
|
||||
* @property {String} borderRadius 设置圆角(左上、右上、右下和左下) 示例:"10px 10px 10px 10px"
|
||||
* @property {Boolean} safeArea 是否适配底部安全区
|
||||
* @event {Function} change 打开关闭弹窗触发,e={show: false}
|
||||
* @event {Function} maskClick 点击遮罩触发
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: 'uniPopup',
|
||||
components: {
|
||||
// #ifdef H5
|
||||
keypress
|
||||
// #endif
|
||||
},
|
||||
emits: ['change', 'maskClick'],
|
||||
props: {
|
||||
// 开启动画
|
||||
animation: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 弹出层类型,可选值,top: 顶部弹出层;bottom:底部弹出层;center:全屏弹出层
|
||||
// message: 消息提示 ; dialog : 对话框
|
||||
type: {
|
||||
type: String,
|
||||
default: 'center'
|
||||
},
|
||||
// maskClick
|
||||
isMaskClick: {
|
||||
type: Boolean,
|
||||
default: null
|
||||
},
|
||||
// TODO 2 个版本后废弃属性 ,使用 isMaskClick
|
||||
maskClick: {
|
||||
type: Boolean,
|
||||
default: null
|
||||
},
|
||||
backgroundColor: {
|
||||
type: String,
|
||||
default: 'none'
|
||||
},
|
||||
safeArea: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
maskBackgroundColor: {
|
||||
type: String,
|
||||
default: 'rgba(0, 0, 0, 0.4)'
|
||||
},
|
||||
borderRadius:{
|
||||
type: String,
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
/**
|
||||
* 监听type类型
|
||||
*/
|
||||
type: {
|
||||
handler: function(type) {
|
||||
if (!this.config[type]) return
|
||||
this[this.config[type]](true)
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
isDesktop: {
|
||||
handler: function(newVal) {
|
||||
if (!this.config[newVal]) return
|
||||
this[this.config[this.type]](true)
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
/**
|
||||
* 监听遮罩是否可点击
|
||||
* @param {Object} val
|
||||
*/
|
||||
maskClick: {
|
||||
handler: function(val) {
|
||||
this.mkclick = val
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
isMaskClick: {
|
||||
handler: function(val) {
|
||||
this.mkclick = val
|
||||
},
|
||||
immediate: true
|
||||
},
|
||||
// H5 下禁止底部滚动
|
||||
showPopup(show) {
|
||||
// #ifdef H5
|
||||
// fix by mehaotian 处理 h5 滚动穿透的问题
|
||||
document.getElementsByTagName('body')[0].style.overflow = show ? 'hidden' : 'visible'
|
||||
// #endif
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
duration: 300,
|
||||
ani: [],
|
||||
showPopup: false,
|
||||
showTrans: false,
|
||||
popupWidth: 0,
|
||||
popupHeight: 0,
|
||||
config: {
|
||||
top: 'top',
|
||||
bottom: 'bottom',
|
||||
center: 'center',
|
||||
left: 'left',
|
||||
right: 'right',
|
||||
message: 'top',
|
||||
dialog: 'center',
|
||||
share: 'bottom'
|
||||
},
|
||||
maskClass: {
|
||||
position: 'fixed',
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.4)'
|
||||
},
|
||||
transClass: {
|
||||
backgroundColor: 'transparent',
|
||||
borderRadius: this.borderRadius || "0",
|
||||
position: 'fixed',
|
||||
left: 0,
|
||||
right: 0
|
||||
},
|
||||
maskShow: true,
|
||||
mkclick: true,
|
||||
popupstyle: 'top'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getStyles() {
|
||||
let res = { backgroundColor: this.bg };
|
||||
if (this.borderRadius || "0") {
|
||||
res = Object.assign(res, { borderRadius: this.borderRadius })
|
||||
}
|
||||
return res;
|
||||
},
|
||||
isDesktop() {
|
||||
return this.popupWidth >= 500 && this.popupHeight >= 500
|
||||
},
|
||||
bg() {
|
||||
if (this.backgroundColor === '' || this.backgroundColor === 'none') {
|
||||
return 'transparent'
|
||||
}
|
||||
return this.backgroundColor
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const fixSize = () => {
|
||||
// #ifdef MP-WEIXIN
|
||||
const {
|
||||
windowWidth,
|
||||
windowHeight,
|
||||
windowTop,
|
||||
safeArea,
|
||||
screenHeight,
|
||||
safeAreaInsets
|
||||
} = uni.getWindowInfo()
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
const {
|
||||
windowWidth,
|
||||
windowHeight,
|
||||
windowTop,
|
||||
safeArea,
|
||||
screenHeight,
|
||||
safeAreaInsets
|
||||
} = uni.getSystemInfoSync()
|
||||
// #endif
|
||||
this.popupWidth = windowWidth
|
||||
this.popupHeight = windowHeight + (windowTop || 0)
|
||||
// TODO fix by mehaotian 是否适配底部安全区 ,目前微信ios 、和 app ios 计算有差异,需要框架修复
|
||||
if (safeArea && this.safeArea) {
|
||||
// #ifdef MP-WEIXIN
|
||||
this.safeAreaInsets = screenHeight - safeArea.bottom
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
this.safeAreaInsets = safeAreaInsets.bottom
|
||||
// #endif
|
||||
} else {
|
||||
this.safeAreaInsets = 0
|
||||
}
|
||||
}
|
||||
fixSize()
|
||||
// #ifdef H5
|
||||
// window.addEventListener('resize', fixSize)
|
||||
// this.$once('hook:beforeDestroy', () => {
|
||||
// window.removeEventListener('resize', fixSize)
|
||||
// })
|
||||
// #endif
|
||||
},
|
||||
// #ifndef VUE3
|
||||
// TODO vue2
|
||||
destroyed() {
|
||||
this.setH5Visible()
|
||||
},
|
||||
// #endif
|
||||
// #ifdef VUE3
|
||||
// TODO vue3
|
||||
unmounted() {
|
||||
this.setH5Visible()
|
||||
},
|
||||
// #endif
|
||||
activated() {
|
||||
this.setH5Visible(!this.showPopup);
|
||||
},
|
||||
deactivated() {
|
||||
this.setH5Visible(true);
|
||||
},
|
||||
created() {
|
||||
// this.mkclick = this.isMaskClick || this.maskClick
|
||||
if (this.isMaskClick === null && this.maskClick === null) {
|
||||
this.mkclick = true
|
||||
} else {
|
||||
this.mkclick = this.isMaskClick !== null ? this.isMaskClick : this.maskClick
|
||||
}
|
||||
if (this.animation) {
|
||||
this.duration = 300
|
||||
} else {
|
||||
this.duration = 0
|
||||
}
|
||||
// TODO 处理 message 组件生命周期异常的问题
|
||||
this.messageChild = null
|
||||
// TODO 解决头条冒泡的问题
|
||||
this.clearPropagation = false
|
||||
this.maskClass.backgroundColor = this.maskBackgroundColor
|
||||
},
|
||||
methods: {
|
||||
setH5Visible(visible = true) {
|
||||
// #ifdef H5
|
||||
// fix by mehaotian 处理 h5 滚动穿透的问题
|
||||
document.getElementsByTagName('body')[0].style.overflow = visible ? "visible" : "hidden";
|
||||
// #endif
|
||||
},
|
||||
/**
|
||||
* 公用方法,不显示遮罩层
|
||||
*/
|
||||
closeMask() {
|
||||
this.maskShow = false
|
||||
},
|
||||
/**
|
||||
* 公用方法,遮罩层禁止点击
|
||||
*/
|
||||
disableMask() {
|
||||
this.mkclick = false
|
||||
},
|
||||
// TODO nvue 取消冒泡
|
||||
clear(e) {
|
||||
// #ifndef APP-NVUE
|
||||
e.stopPropagation()
|
||||
// #endif
|
||||
this.clearPropagation = true
|
||||
},
|
||||
|
||||
open(direction) {
|
||||
// fix by mehaotian 处理快速打开关闭的情况
|
||||
if (this.showPopup) {
|
||||
return
|
||||
}
|
||||
let innerType = ['top', 'center', 'bottom', 'left', 'right', 'message', 'dialog', 'share']
|
||||
if (!(direction && innerType.indexOf(direction) !== -1)) {
|
||||
direction = this.type
|
||||
}
|
||||
if (!this.config[direction]) {
|
||||
console.error('缺少类型:', direction)
|
||||
return
|
||||
}
|
||||
this[this.config[direction]]()
|
||||
this.$emit('change', {
|
||||
show: true,
|
||||
type: direction
|
||||
})
|
||||
},
|
||||
close(type) {
|
||||
this.showTrans = false
|
||||
this.$emit('change', {
|
||||
show: false,
|
||||
type: this.type
|
||||
})
|
||||
clearTimeout(this.timer)
|
||||
// // 自定义关闭事件
|
||||
// this.customOpen && this.customClose()
|
||||
this.timer = setTimeout(() => {
|
||||
this.showPopup = false
|
||||
}, 300)
|
||||
},
|
||||
// TODO 处理冒泡事件,头条的冒泡事件有问题 ,先这样兼容
|
||||
touchstart() {
|
||||
this.clearPropagation = false
|
||||
},
|
||||
|
||||
onTap() {
|
||||
if (this.clearPropagation) {
|
||||
// fix by mehaotian 兼容 nvue
|
||||
this.clearPropagation = false
|
||||
return
|
||||
}
|
||||
this.$emit('maskClick')
|
||||
if (!this.mkclick) return
|
||||
this.close()
|
||||
},
|
||||
/**
|
||||
* 顶部弹出样式处理
|
||||
*/
|
||||
top(type) {
|
||||
this.popupstyle = this.isDesktop ? 'fixforpc-top' : 'top'
|
||||
this.ani = ['slide-top']
|
||||
this.transClass = {
|
||||
position: 'fixed',
|
||||
left: 0,
|
||||
right: 0,
|
||||
backgroundColor: this.bg,
|
||||
borderRadius:this.borderRadius || "0"
|
||||
}
|
||||
// TODO 兼容 type 属性 ,后续会废弃
|
||||
if (type) return
|
||||
this.showPopup = true
|
||||
this.showTrans = true
|
||||
this.$nextTick(() => {
|
||||
this.showPoptrans()
|
||||
if (this.messageChild && this.type === 'message') {
|
||||
this.messageChild.timerClose()
|
||||
}
|
||||
})
|
||||
},
|
||||
/**
|
||||
* 底部弹出样式处理
|
||||
*/
|
||||
bottom(type) {
|
||||
this.popupstyle = 'bottom'
|
||||
this.ani = ['slide-bottom']
|
||||
this.transClass = {
|
||||
position: 'fixed',
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
paddingBottom: this.safeAreaInsets + 'px',
|
||||
backgroundColor: this.bg,
|
||||
borderRadius:this.borderRadius || "0",
|
||||
}
|
||||
// TODO 兼容 type 属性 ,后续会废弃
|
||||
if (type) return
|
||||
this.showPoptrans()
|
||||
},
|
||||
/**
|
||||
* 中间弹出样式处理
|
||||
*/
|
||||
center(type) {
|
||||
this.popupstyle = 'center'
|
||||
//微信小程序下,组合动画会出现文字向上闪动问题,再此做特殊处理
|
||||
// #ifdef MP-WEIXIN
|
||||
this.ani = ['fade']
|
||||
// #endif
|
||||
// #ifndef MP-WEIXIN
|
||||
this.ani = ['zoom-out', 'fade']
|
||||
// #endif
|
||||
this.transClass = {
|
||||
position: 'fixed',
|
||||
/* #ifndef APP-NVUE */
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
/* #endif */
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
borderRadius:this.borderRadius || "0"
|
||||
}
|
||||
// TODO 兼容 type 属性 ,后续会废弃
|
||||
if (type) return
|
||||
this.showPoptrans()
|
||||
},
|
||||
left(type) {
|
||||
this.popupstyle = 'left'
|
||||
this.ani = ['slide-left']
|
||||
this.transClass = {
|
||||
position: 'fixed',
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
top: 0,
|
||||
backgroundColor: this.bg,
|
||||
borderRadius:this.borderRadius || "0",
|
||||
/* #ifndef APP-NVUE */
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
/* #endif */
|
||||
}
|
||||
// TODO 兼容 type 属性 ,后续会废弃
|
||||
if (type) return
|
||||
this.showPoptrans()
|
||||
},
|
||||
right(type) {
|
||||
this.popupstyle = 'right'
|
||||
this.ani = ['slide-right']
|
||||
this.transClass = {
|
||||
position: 'fixed',
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
top: 0,
|
||||
backgroundColor: this.bg,
|
||||
borderRadius:this.borderRadius || "0",
|
||||
/* #ifndef APP-NVUE */
|
||||
display: 'flex',
|
||||
flexDirection: 'column'
|
||||
/* #endif */
|
||||
}
|
||||
// TODO 兼容 type 属性 ,后续会废弃
|
||||
if (type) return
|
||||
this.showPoptrans()
|
||||
},
|
||||
showPoptrans(){
|
||||
this.$nextTick(()=>{
|
||||
this.showPopup = true
|
||||
this.showTrans = true
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
.uni-popup {
|
||||
position: fixed;
|
||||
/* #ifndef APP-NVUE */
|
||||
z-index: 99;
|
||||
|
||||
/* #endif */
|
||||
&.top,
|
||||
&.left,
|
||||
&.right {
|
||||
/* #ifdef H5 */
|
||||
top: var(--window-top);
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
top: 0;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.uni-popup__wrapper {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: block;
|
||||
/* #endif */
|
||||
position: relative;
|
||||
|
||||
/* iphonex 等安全区设置,底部安全区适配 */
|
||||
/* #ifndef APP-NVUE */
|
||||
// padding-bottom: constant(safe-area-inset-bottom);
|
||||
// padding-bottom: env(safe-area-inset-bottom);
|
||||
/* #endif */
|
||||
&.left,
|
||||
&.right {
|
||||
/* #ifdef H5 */
|
||||
padding-top: var(--window-top);
|
||||
/* #endif */
|
||||
/* #ifndef H5 */
|
||||
padding-top: 0;
|
||||
/* #endif */
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fixforpc-z-index {
|
||||
/* #ifndef APP-NVUE */
|
||||
z-index: 999;
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
.fixforpc-top {
|
||||
top: 0;
|
||||
}
|
||||
</style>
|
||||
107
uni_modules/uni-popup/package.json
Normal file
|
|
@ -0,0 +1,107 @@
|
|||
{
|
||||
"id": "uni-popup",
|
||||
"displayName": "uni-popup 弹出层",
|
||||
"version": "1.9.10",
|
||||
"description": " Popup 组件,提供常用的弹层",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"弹出层",
|
||||
"弹窗",
|
||||
"popup",
|
||||
"弹框"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": "",
|
||||
"uni-app": "^4.06",
|
||||
"uni-app-x": ""
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||
"type": "component-vue",
|
||||
"darkmode": "x",
|
||||
"i18n": "x",
|
||||
"widescreen": "x"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"uni-scss",
|
||||
"uni-transition"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "x",
|
||||
"aliyun": "x",
|
||||
"alipay": "x"
|
||||
},
|
||||
"client": {
|
||||
"uni-app": {
|
||||
"vue": {
|
||||
"vue2": "√",
|
||||
"vue3": "√"
|
||||
},
|
||||
"web": {
|
||||
"safari": "√",
|
||||
"chrome": "√"
|
||||
},
|
||||
"app": {
|
||||
"vue": "√",
|
||||
"nvue": "√",
|
||||
"android": "√",
|
||||
"ios": "√",
|
||||
"harmony": "√"
|
||||
},
|
||||
"mp": {
|
||||
"weixin": "√",
|
||||
"alipay": "√",
|
||||
"toutiao": "√",
|
||||
"baidu": "√",
|
||||
"kuaishou": "-",
|
||||
"jd": "-",
|
||||
"harmony": "-",
|
||||
"qq": "√",
|
||||
"lark": "-"
|
||||
},
|
||||
"quickapp": {
|
||||
"huawei": "-",
|
||||
"union": "-"
|
||||
}
|
||||
},
|
||||
"uni-app-x": {
|
||||
"web": {
|
||||
"safari": "√",
|
||||
"chrome": "√"
|
||||
},
|
||||
"app": {
|
||||
"android": "√",
|
||||
"ios": "√",
|
||||
"harmony": "√"
|
||||
},
|
||||
"mp": {
|
||||
"weixin": "√"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
17
uni_modules/uni-popup/readme.md
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
|
||||
|
||||
## Popup 弹出层
|
||||
> **组件名:uni-popup**
|
||||
> 代码块: `uPopup`
|
||||
> 关联组件:`uni-transition`
|
||||
|
||||
|
||||
弹出层组件,在应用中弹出一个消息提示窗口、提示框等
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-popup)
|
||||
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
31
uni_modules/uni-transition/changelog.md
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
## 1.3.6(2025-07-18)
|
||||
- 修复 nvue 页面,样式错误问题
|
||||
## 1.3.5(2025-06-11)
|
||||
- 修复 第一次执行不显示动画的问题
|
||||
## 1.3.4(2025-04-16)
|
||||
- 修复 页面数据更新到底动画复原的问题
|
||||
- 修复 示例页面打开报错的问题
|
||||
## 1.3.3(2024-04-23)
|
||||
- 修复 当元素会受变量影响自动隐藏的bug
|
||||
## 1.3.2(2023-05-04)
|
||||
- 修复 NVUE 平台报错的问题
|
||||
## 1.3.1(2021-11-23)
|
||||
- 修复 init 方法初始化问题
|
||||
## 1.3.0(2021-11-19)
|
||||
- 优化 组件UI,并提供设计资源,详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
|
||||
- 文档迁移,详见:[https://uniapp.dcloud.io/component/uniui/uni-transition](https://uniapp.dcloud.io/component/uniui/uni-transition)
|
||||
## 1.2.1(2021-09-27)
|
||||
- 修复 init 方法不生效的 Bug
|
||||
## 1.2.0(2021-07-30)
|
||||
- 组件兼容 vue3,如何创建 vue3 项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
|
||||
## 1.1.1(2021-05-12)
|
||||
- 新增 示例地址
|
||||
- 修复 示例项目缺少组件的 Bug
|
||||
## 1.1.0(2021-04-22)
|
||||
- 新增 通过方法自定义动画
|
||||
- 新增 custom-class 非 NVUE 平台支持自定义 class 定制样式
|
||||
- 优化 动画触发逻辑,使动画更流畅
|
||||
- 优化 支持单独的动画类型
|
||||
- 优化 文档示例
|
||||
## 1.0.2(2021-02-05)
|
||||
- 调整为 uni_modules 目录规范
|
||||
|
|
@ -0,0 +1,131 @@
|
|||
// const defaultOption = {
|
||||
// duration: 300,
|
||||
// timingFunction: 'linear',
|
||||
// delay: 0,
|
||||
// transformOrigin: '50% 50% 0'
|
||||
// }
|
||||
// #ifdef APP-NVUE
|
||||
const nvueAnimation = uni.requireNativePlugin('animation')
|
||||
// #endif
|
||||
class MPAnimation {
|
||||
constructor(options, _this) {
|
||||
this.options = options
|
||||
// 在iOS10+QQ小程序平台下,传给原生的对象一定是个普通对象而不是Proxy对象,否则会报parameter should be Object instead of ProxyObject的错误
|
||||
this.animation = uni.createAnimation({
|
||||
...options
|
||||
})
|
||||
this.currentStepAnimates = {}
|
||||
this.next = 0
|
||||
this.$ = _this
|
||||
|
||||
}
|
||||
|
||||
_nvuePushAnimates(type, args) {
|
||||
let aniObj = this.currentStepAnimates[this.next]
|
||||
let styles = {}
|
||||
if (!aniObj) {
|
||||
styles = {
|
||||
styles: {},
|
||||
config: {}
|
||||
}
|
||||
} else {
|
||||
styles = aniObj
|
||||
}
|
||||
if (animateTypes1.includes(type)) {
|
||||
if (!styles.styles.transform) {
|
||||
styles.styles.transform = ''
|
||||
}
|
||||
let unit = ''
|
||||
if(type === 'rotate'){
|
||||
unit = 'deg'
|
||||
}
|
||||
styles.styles.transform += `${type}(${args+unit}) `
|
||||
} else {
|
||||
styles.styles[type] = `${args}`
|
||||
}
|
||||
this.currentStepAnimates[this.next] = styles
|
||||
}
|
||||
_animateRun(styles = {}, config = {}) {
|
||||
let ref = this.$.$refs['ani'].ref
|
||||
if (!ref) return
|
||||
return new Promise((resolve, reject) => {
|
||||
nvueAnimation.transition(ref, {
|
||||
styles,
|
||||
...config
|
||||
}, res => {
|
||||
resolve()
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
_nvueNextAnimate(animates, step = 0, fn) {
|
||||
let obj = animates[step]
|
||||
if (obj) {
|
||||
let {
|
||||
styles,
|
||||
config
|
||||
} = obj
|
||||
this._animateRun(styles, config).then(() => {
|
||||
step += 1
|
||||
this._nvueNextAnimate(animates, step, fn)
|
||||
})
|
||||
} else {
|
||||
this.currentStepAnimates = {}
|
||||
typeof fn === 'function' && fn()
|
||||
this.isEnd = true
|
||||
}
|
||||
}
|
||||
|
||||
step(config = {}) {
|
||||
// #ifndef APP-NVUE
|
||||
this.animation.step(config)
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
this.currentStepAnimates[this.next].config = Object.assign({}, this.options, config)
|
||||
this.currentStepAnimates[this.next].styles.transformOrigin = this.currentStepAnimates[this.next].config.transformOrigin
|
||||
this.next++
|
||||
// #endif
|
||||
return this
|
||||
}
|
||||
|
||||
run(fn) {
|
||||
// #ifndef APP-NVUE
|
||||
this.$.animationData = this.animation.export()
|
||||
this.$.timer = setTimeout(() => {
|
||||
typeof fn === 'function' && fn()
|
||||
}, this.$.durationTime)
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
this.isEnd = false
|
||||
let ref = this.$.$refs['ani'] && this.$.$refs['ani'].ref
|
||||
if(!ref) return
|
||||
this._nvueNextAnimate(this.currentStepAnimates, 0, fn)
|
||||
this.next = 0
|
||||
// #endif
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const animateTypes1 = ['matrix', 'matrix3d', 'rotate', 'rotate3d', 'rotateX', 'rotateY', 'rotateZ', 'scale', 'scale3d',
|
||||
'scaleX', 'scaleY', 'scaleZ', 'skew', 'skewX', 'skewY', 'translate', 'translate3d', 'translateX', 'translateY',
|
||||
'translateZ'
|
||||
]
|
||||
const animateTypes2 = ['opacity', 'backgroundColor']
|
||||
const animateTypes3 = ['width', 'height', 'left', 'right', 'top', 'bottom']
|
||||
animateTypes1.concat(animateTypes2, animateTypes3).forEach(type => {
|
||||
MPAnimation.prototype[type] = function(...args) {
|
||||
// #ifndef APP-NVUE
|
||||
this.animation[type](...args)
|
||||
// #endif
|
||||
// #ifdef APP-NVUE
|
||||
this._nvuePushAnimates(type, args)
|
||||
// #endif
|
||||
return this
|
||||
}
|
||||
})
|
||||
|
||||
export function createAnimation(option, _this) {
|
||||
if(!_this) return
|
||||
clearTimeout(_this.timer)
|
||||
return new MPAnimation(option, _this)
|
||||
}
|
||||
|
|
@ -0,0 +1,292 @@
|
|||
<template>
|
||||
<!-- #ifndef APP-NVUE -->
|
||||
<view v-show="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick">
|
||||
<slot></slot>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-NVUE -->
|
||||
<view v-if="isShow" ref="ani" :animation="animationData" :class="customClass" :style="transformStyles" @click="onClick">
|
||||
<slot></slot>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { createAnimation } from './createAnimation'
|
||||
|
||||
/**
|
||||
* Transition 过渡动画
|
||||
* @description 简单过渡动画组件
|
||||
* @tutorial https://ext.dcloud.net.cn/plugin?id=985
|
||||
* @property {Boolean} show = [false|true] 控制组件显示或隐藏
|
||||
* @property {Array|String} modeClass = [fade|slide-top|slide-right|slide-bottom|slide-left|zoom-in|zoom-out] 过渡动画类型
|
||||
* @value fade 渐隐渐出过渡
|
||||
* @value slide-top 由上至下过渡
|
||||
* @value slide-right 由右至左过渡
|
||||
* @value slide-bottom 由下至上过渡
|
||||
* @value slide-left 由左至右过渡
|
||||
* @value zoom-in 由小到大过渡
|
||||
* @value zoom-out 由大到小过渡
|
||||
* @property {Number} duration 过渡动画持续时间
|
||||
* @property {Object} styles 组件样式,同 css 样式,注意带’-‘连接符的属性需要使用小驼峰写法如:`backgroundColor:red`
|
||||
*/
|
||||
export default {
|
||||
name: 'uniTransition',
|
||||
emits: ['click', 'change'],
|
||||
props: {
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
modeClass: {
|
||||
type: [Array, String],
|
||||
default () {
|
||||
return 'fade'
|
||||
}
|
||||
},
|
||||
duration: {
|
||||
type: Number,
|
||||
default: 300
|
||||
},
|
||||
styles: {
|
||||
type: Object,
|
||||
default () {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
customClass: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
onceRender: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
isShow: false,
|
||||
transform: '',
|
||||
opacity: 0,
|
||||
animationData: {},
|
||||
durationTime: 300,
|
||||
config: {}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
show: {
|
||||
handler(newVal) {
|
||||
if (newVal) {
|
||||
this.open()
|
||||
} else {
|
||||
// 避免上来就执行 close,导致动画错乱
|
||||
if (this.isShow) {
|
||||
this.close()
|
||||
}
|
||||
}
|
||||
},
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
// 生成样式数据
|
||||
stylesObject() {
|
||||
let styles = {
|
||||
...this.styles,
|
||||
'transition-duration': this.duration / 1000 + 's'
|
||||
}
|
||||
let transform = ''
|
||||
for (let i in styles) {
|
||||
let line = this.toLine(i)
|
||||
transform += line + ':' + styles[i] + ';'
|
||||
}
|
||||
return transform
|
||||
},
|
||||
// 初始化动画条件
|
||||
transformStyles() {
|
||||
return 'transform:' + this.transform + ';' + 'opacity:' + this.opacity + ';' + this.stylesObject
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 动画默认配置
|
||||
this.config = {
|
||||
duration: this.duration,
|
||||
timingFunction: 'ease',
|
||||
transformOrigin: '50% 50%',
|
||||
delay: 0
|
||||
}
|
||||
this.durationTime = this.duration
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* ref 触发 初始化动画
|
||||
*/
|
||||
init(obj = {}) {
|
||||
if (obj.duration) {
|
||||
this.durationTime = obj.duration
|
||||
}
|
||||
this.animation = createAnimation(Object.assign(this.config, obj), this)
|
||||
},
|
||||
/**
|
||||
* 点击组件触发回调
|
||||
*/
|
||||
onClick() {
|
||||
this.$emit('click', {
|
||||
detail: this.isShow
|
||||
})
|
||||
},
|
||||
/**
|
||||
* ref 触发 动画分组
|
||||
* @param {Object} obj
|
||||
*/
|
||||
step(obj, config = {}) {
|
||||
if (!this.animation) return this
|
||||
Object.keys(obj).forEach(key => {
|
||||
const value = obj[key]
|
||||
if (typeof this.animation[key] === 'function') {
|
||||
Array.isArray(value) ?
|
||||
this.animation[key](...value) :
|
||||
this.animation[key](value)
|
||||
}
|
||||
})
|
||||
this.animation.step(config)
|
||||
return this
|
||||
},
|
||||
/**
|
||||
* ref 触发 执行动画
|
||||
*/
|
||||
run(fn) {
|
||||
if (!this.animation) return
|
||||
this.animation.run(fn)
|
||||
},
|
||||
// 开始过度动画
|
||||
open() {
|
||||
clearTimeout(this.timer)
|
||||
this.isShow = true
|
||||
// 新增初始状态重置逻辑(关键)
|
||||
this.transform = this.styleInit(false).transform || ''
|
||||
this.opacity = this.styleInit(false).opacity || 0
|
||||
|
||||
// 确保动态样式已经生效后,执行动画,如果不加 nextTick ,会导致 wx 动画执行异常
|
||||
this.$nextTick(() => {
|
||||
// TODO 定时器保证动画完全执行,目前有些问题,后面会取消定时器
|
||||
this.timer = setTimeout(() => {
|
||||
this.animation = createAnimation(this.config, this)
|
||||
this.tranfromInit(false).step()
|
||||
this.animation.run(() => {
|
||||
// #ifdef APP-NVUE
|
||||
this.transform = this.styleInit(false).transform || ''
|
||||
this.opacity = this.styleInit(false).opacity || 1
|
||||
// #endif
|
||||
// #ifndef APP-NVUE
|
||||
this.transform = ''
|
||||
this.opacity = this.styleInit(false).opacity || 1
|
||||
// #endif
|
||||
this.$emit('change', {
|
||||
detail: this.isShow
|
||||
})
|
||||
})
|
||||
}, 80)
|
||||
})
|
||||
},
|
||||
// 关闭过度动画
|
||||
close(type) {
|
||||
if (!this.animation) return
|
||||
this.tranfromInit(true)
|
||||
.step()
|
||||
.run(() => {
|
||||
this.isShow = false
|
||||
this.animationData = null
|
||||
this.animation = null
|
||||
let { opacity, transform } = this.styleInit(false)
|
||||
this.opacity = opacity || 1
|
||||
this.transform = transform
|
||||
this.$emit('change', {
|
||||
detail: this.isShow
|
||||
})
|
||||
})
|
||||
},
|
||||
// 处理动画开始前的默认样式
|
||||
styleInit(type) {
|
||||
let styles = { transform: '', opacity: 1 }
|
||||
const buildStyle = (type, mode) => {
|
||||
const value = this.animationType(type)[mode] // 直接使用 type 控制状态
|
||||
if (mode.startsWith('fade')) {
|
||||
styles.opacity = value
|
||||
} else {
|
||||
styles.transform += value + ' '
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof this.modeClass === 'string') {
|
||||
buildStyle(type, this.modeClass)
|
||||
} else {
|
||||
this.modeClass.forEach(mode => buildStyle(type, mode))
|
||||
}
|
||||
return styles
|
||||
},
|
||||
// 处理内置组合动画
|
||||
tranfromInit(type) {
|
||||
let buildTranfrom = (type, mode) => {
|
||||
let aniNum = null
|
||||
if (mode === 'fade') {
|
||||
aniNum = type ? 0 : 1
|
||||
} else {
|
||||
aniNum = type ? '-100%' : '0'
|
||||
if (mode === 'zoom-in') {
|
||||
aniNum = type ? 0.8 : 1
|
||||
}
|
||||
if (mode === 'zoom-out') {
|
||||
aniNum = type ? 1.2 : 1
|
||||
}
|
||||
if (mode === 'slide-right') {
|
||||
aniNum = type ? '100%' : '0'
|
||||
}
|
||||
if (mode === 'slide-bottom') {
|
||||
aniNum = type ? '100%' : '0'
|
||||
}
|
||||
}
|
||||
this.animation[this.animationMode()[mode]](aniNum)
|
||||
}
|
||||
if (typeof this.modeClass === 'string') {
|
||||
buildTranfrom(type, this.modeClass)
|
||||
} else {
|
||||
this.modeClass.forEach(mode => {
|
||||
buildTranfrom(type, mode)
|
||||
})
|
||||
}
|
||||
|
||||
return this.animation
|
||||
},
|
||||
animationType(type) {
|
||||
return {
|
||||
fade: type ? 1 : 0,
|
||||
'slide-top': `translateY(${type ? '0' : '-100%'})`,
|
||||
'slide-right': `translateX(${type ? '0' : '100%'})`,
|
||||
'slide-bottom': `translateY(${type ? '0' : '100%'})`,
|
||||
'slide-left': `translateX(${type ? '0' : '-100%'})`,
|
||||
'zoom-in': `scaleX(${type ? 1 : 0.8}) scaleY(${type ? 1 : 0.8})`,
|
||||
'zoom-out': `scaleX(${type ? 1 : 1.2}) scaleY(${type ? 1 : 1.2})`
|
||||
}
|
||||
},
|
||||
// 内置动画类型与实际动画对应字典
|
||||
animationMode() {
|
||||
return {
|
||||
fade: 'opacity',
|
||||
'slide-top': 'translateY',
|
||||
'slide-right': 'translateX',
|
||||
'slide-bottom': 'translateY',
|
||||
'slide-left': 'translateX',
|
||||
'zoom-in': 'scale',
|
||||
'zoom-out': 'scale'
|
||||
}
|
||||
},
|
||||
// 驼峰转中横线
|
||||
toLine(name) {
|
||||
return name.replace(/([A-Z])/g, '-$1').toLowerCase()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style></style>
|
||||
112
uni_modules/uni-transition/package.json
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
{
|
||||
"id": "uni-transition",
|
||||
"displayName": "uni-transition 过渡动画",
|
||||
"version": "1.3.6",
|
||||
"description": "元素的简单过渡动画",
|
||||
"keywords": [
|
||||
"uni-ui",
|
||||
"uniui",
|
||||
"动画",
|
||||
"过渡",
|
||||
"过渡动画"
|
||||
],
|
||||
"repository": "https://github.com/dcloudio/uni-ui",
|
||||
"engines": {
|
||||
"HBuilderX": "",
|
||||
"uni-app": "^4.12",
|
||||
"uni-app-x": ""
|
||||
},
|
||||
"directories": {
|
||||
"example": "../../temps/example_temps"
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": ""
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "无",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
|
||||
"type": "component-vue",
|
||||
"darkmode": "x",
|
||||
"i18n": "x",
|
||||
"widescreen": "x"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [
|
||||
"uni-scss"
|
||||
],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "x",
|
||||
"aliyun": "x",
|
||||
"alipay": "x"
|
||||
},
|
||||
"client": {
|
||||
"uni-app": {
|
||||
"vue": {
|
||||
"vue2": "√",
|
||||
"vue3": "√"
|
||||
},
|
||||
"web": {
|
||||
"safari": "√",
|
||||
"chrome": "√"
|
||||
},
|
||||
"app": {
|
||||
"vue": "√",
|
||||
"nvue": "√",
|
||||
"android": "√",
|
||||
"ios": "√",
|
||||
"harmony": "√"
|
||||
},
|
||||
"mp": {
|
||||
"weixin": {
|
||||
},
|
||||
"alipay": {
|
||||
},
|
||||
"toutiao": {
|
||||
},
|
||||
"baidu": {
|
||||
},
|
||||
"kuaishou": {
|
||||
},
|
||||
"jd": {
|
||||
},
|
||||
"harmony": "-",
|
||||
"qq": "√",
|
||||
"lark": "-"
|
||||
},
|
||||
"quickapp": {
|
||||
"huawei": "√",
|
||||
"union": "√"
|
||||
}
|
||||
},
|
||||
"uni-app-x": {
|
||||
"web": {
|
||||
"safari": "-",
|
||||
"chrome": "-"
|
||||
},
|
||||
"app": {
|
||||
"android": "-",
|
||||
"ios": "-",
|
||||
"harmony": "-"
|
||||
},
|
||||
"mp": {
|
||||
"weixin": "-"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
11
uni_modules/uni-transition/readme.md
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
|
||||
|
||||
## Transition 过渡动画
|
||||
> **组件名:uni-transition**
|
||||
> 代码块: `uTransition`
|
||||
|
||||
|
||||
元素过渡动画
|
||||
|
||||
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-transition)
|
||||
#### 如使用过程中有任何问题,或者您对uni-ui有一些好的建议,欢迎加入 uni-ui 交流群:871950839
|
||||
1
unpackage/dist/dev/.sourcemap/mp-weixin-devtools/components/specialBanner.js.map
vendored
Normal file
1
unpackage/dist/dev/.sourcemap/mp-weixin-devtools/pages/home/product-details.js.map
vendored
Normal file
|
|
@ -1 +1 @@
|
|||
{"version":3,"file":"app.js","sources":["App.vue","main.js"],"sourcesContent":["<script>\r\n\texport default {\r\n\t\tonLaunch: function() {\r\n\t\t\tconsole.log('App Launch')\r\n\t\t},\r\n\t\tonShow: function() {\r\n\t\t\tconsole.log('App Show')\r\n\t\t},\r\n\t\tonHide: function() {\r\n\t\t\tconsole.log('App Hide')\r\n\t\t}\r\n\t}\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n\t/*每个页面公共css */\r\n\r\n\t/* 定义字体 */\r\n\t@font-face {\r\n\t\tfont-family: 'jcyt';\r\n\t\tsrc: url('/static/fonts/jcyt.ttf') format('truetype');\r\n\t}\r\n\r\n\t/* 全局应用字体 */\r\n\t// body {\r\n\t// \tfont-family: 'jcyt', sans-serif;\r\n\t// }\r\n</style>","import App from './App'\n\n// #ifndef VUE3\nimport Vue from 'vue'\nimport './uni.promisify.adaptor'\nVue.config.productionTip = false\nApp.mpType = 'app'\nconst app = new Vue({\n ...App\n})\napp.$mount()\n// #endif\n\n// #ifdef VUE3\nimport { createSSRApp } from 'vue'\nexport function createApp() {\n const app = createSSRApp(App)\n return {\n app\n }\n}\n// #endif"],"names":["uni","createSSRApp","App"],"mappings":";;;;;;;;;AACC,MAAK,YAAU;AAAA,EACd,UAAU,WAAW;AACpBA,kBAAAA,MAAA,MAAA,OAAA,gBAAY,YAAY;AAAA,EACxB;AAAA,EACD,QAAQ,WAAW;AAClBA,kBAAAA,MAAY,MAAA,OAAA,gBAAA,UAAU;AAAA,EACtB;AAAA,EACD,QAAQ,WAAW;AAClBA,kBAAAA,MAAY,MAAA,OAAA,iBAAA,UAAU;AAAA,EACvB;AACD;ACIM,SAAS,YAAY;AAC1B,QAAM,MAAMC,cAAY,aAACC,SAAG;AAC5B,SAAO;AAAA,IACL;AAAA,EACD;AACH;;;"}
|
||||
{"version":3,"file":"app.js","sources":["App.vue","main.js"],"sourcesContent":["<script>\r\n\texport default {\r\n\t\tonLaunch: function() {\r\n\t\t\tconsole.log('App Launch')\r\n\t\t},\r\n\t\tonShow: function() {\r\n\t\t\tconsole.log('App Show')\r\n\t\t},\r\n\t\tonHide: function() {\r\n\t\t\tconsole.log('App Hide')\r\n\t\t}\r\n\t}\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n\t/*每个页面公共css */\r\n\r\n\r\n\t@font-face {\r\n\t\tfont-family: 'JiangChengYuanTi-300W';\r\n\t\t/* 定义字体家族名称 */\r\n\t\tsrc: url('/static/fonts/JiangChengYuanTi-300W.ttf') format('truetype');\r\n\t\t/* 指定字体文件路径和格式 */\r\n\t\tfont-weight: normal;\r\n\t\tfont-style: normal;\r\n\t}\r\n\r\n\t@font-face {\r\n\t\tfont-family: 'JiangChengYuanTi-400W';\r\n\t\t/* 定义字体家族名称 */\r\n\t\tsrc: url('/static/fonts/JiangChengYuanTi-300W.ttf') format('truetype');\r\n\t\t/* 指定字体文件路径和格式 */\r\n\t\tfont-weight: normal;\r\n\t\tfont-style: normal;\r\n\t}\r\n\r\n\t@font-face {\r\n\t\tfont-family: 'JiangChengYuanTi-500W';\r\n\t\t/* 定义字体家族名称 */\r\n\t\tsrc: url('/static/fonts/JiangChengYuanTi-300W.ttf') format('truetype');\r\n\t\t/* 指定字体文件路径和格式 */\r\n\t\tfont-weight: normal;\r\n\t\tfont-style: normal;\r\n\t}\r\n\r\n\t@font-face {\r\n\t\tfont-family: 'JiangChengYuanTi-600W';\r\n\t\t/* 定义字体家族名称 */\r\n\t\tsrc: url('/static/fonts/JiangChengYuanTi-300W.ttf') format('truetype');\r\n\t\t/* 指定字体文件路径和格式 */\r\n\t\tfont-weight: normal;\r\n\t\tfont-style: normal;\r\n\t}\r\n\r\n\t@font-face {\r\n\t\tfont-family: 'JiangChengYuanTi-700W';\r\n\t\t/* 定义字体家族名称 */\r\n\t\tsrc: url('/static/fonts/JiangChengYuanTi-300W.ttf') format('truetype');\r\n\t\t/* 指定字体文件路径和格式 */\r\n\t\tfont-weight: normal;\r\n\t\tfont-style: normal;\r\n\t}\r\n\r\n\r\n\t.myZt-300w {\r\n\t\tfont-family: 'JiangChengYuanTi-300W', sans-serif;\r\n\t}\r\n\r\n\t.myZt-400w {\r\n\t\tfont-family: 'JiangChengYuanTi-400W', sans-serif;\r\n\t}\r\n\r\n\t.myZt-500w {\r\n\t\tfont-family: 'JiangChengYuanTi-500W', sans-serif;\r\n\t}\r\n\r\n\t.myZt-600w {\r\n\t\tfont-family: 'JiangChengYuanTi-600W', sans-serif;\r\n\t}\r\n\r\n\t.myZt-700w {\r\n\t\tfont-family: 'JiangChengYuanTi-700W', sans-serif;\r\n\t}\r\n</style>","import App from './App'\n\n// #ifndef VUE3\nimport Vue from 'vue'\nimport './uni.promisify.adaptor'\nVue.config.productionTip = false\nApp.mpType = 'app'\nconst app = new Vue({\n ...App\n})\napp.$mount()\n// #endif\n\n// #ifdef VUE3\nimport { createSSRApp } from 'vue'\nexport function createApp() {\n const app = createSSRApp(App)\n return {\n app\n }\n}\n// #endif"],"names":["uni","createSSRApp","App"],"mappings":";;;;;;;;;;AACC,MAAK,YAAU;AAAA,EACd,UAAU,WAAW;AACpBA,kBAAAA,MAAA,MAAA,OAAA,gBAAY,YAAY;AAAA,EACxB;AAAA,EACD,QAAQ,WAAW;AAClBA,kBAAAA,MAAY,MAAA,OAAA,gBAAA,UAAU;AAAA,EACtB;AAAA,EACD,QAAQ,WAAW;AAClBA,kBAAAA,MAAY,MAAA,OAAA,iBAAA,UAAU;AAAA,EACvB;AACD;ACIM,SAAS,YAAY;AAC1B,QAAM,MAAMC,cAAY,aAACC,SAAG;AAC5B,SAAO;AAAA,IACL;AAAA,EACD;AACH;;;"}
|
||||
|
|
@ -1 +1 @@
|
|||
{"version":3,"file":"assets.js","sources":["static/bg.png","static/ic_search.png","static/ic_notice.png","static/ic_minus.png","static/ic_add.png","static/pay_bg.png","static/ic_check.png"],"sourcesContent":["export default \"__VITE_ASSET__bac8c679__\"","export default \"__VITE_ASSET__3638b49d__\"","export default \"__VITE_ASSET__d68df3c1__\"","export default \"__VITE_ASSET__bda5b53e__\"","export default \"__VITE_ASSET__63ab7a4a__\"","export default \"__VITE_ASSET__1a1db255__\"","export default \"__VITE_ASSET__ec31f9f9__\""],"names":[],"mappings":";AAAA,MAAe,eAAA;ACAf,MAAe,eAAA;ACAf,MAAe,eAAA;ACAf,MAAe,aAAA;ACAf,MAAe,aAAA;ACAf,MAAe,aAAA;ACAf,MAAe,aAAA;;;;;;;;"}
|
||||
{"version":3,"file":"assets.js","sources":["static/bg.png","static/ic_search.png","static/ic_notice.png","static/ic_minus.png","static/ic_add.png","static/pay_bg.png","static/ic_modify.png","static/ic_coupon.png","static/ic_order.png","static/ic_kf.png","static/ic_back.png","static/bags.png","static/details.png","static/share.png","static/ic_prompt.png","static/ic_pay.png","static/ic_join.png","static/ic_close.png","static/ic_address.png","static/ic_right_arrow.png"],"sourcesContent":["export default \"__VITE_ASSET__bac8c679__\"","export default \"__VITE_ASSET__3638b49d__\"","export default \"__VITE_ASSET__d68df3c1__\"","export default \"__VITE_ASSET__bda5b53e__\"","export default \"__VITE_ASSET__63ab7a4a__\"","export default \"__VITE_ASSET__1a1db255__\"","export default \"__VITE_ASSET__82cecd0b__\"","export default \"__VITE_ASSET__a83ffaaf__\"","export default \"__VITE_ASSET__c3b37da8__\"","export default \"__VITE_ASSET__30b826e5__\"","export default \"__VITE_ASSET__35492172__\"","export default \"__VITE_ASSET__8eb81c6b__\"","export default \"__VITE_ASSET__71a6f703__\"","export default \"__VITE_ASSET__e3417b68__\"","export default \"__VITE_ASSET__8282e1ce__\"","export default \"__VITE_ASSET__99e67017__\"","export default \"__VITE_ASSET__1da9a958__\"","export default \"__VITE_ASSET__96212905__\"","export default \"__VITE_ASSET__dc3075f2__\"","export default \"__VITE_ASSET__c9decb20__\""],"names":[],"mappings":";AAAA,MAAe,eAAA;ACAf,MAAe,eAAA;ACAf,MAAe,eAAA;ACAf,MAAe,eAAA;ACAf,MAAe,eAAA;ACAf,MAAe,eAAA;ACAf,MAAe,eAAA;ACAf,MAAe,eAAA;ACAf,MAAe,eAAA;ACAf,MAAe,eAAA;ACAf,MAAe,aAAA;ACAf,MAAe,aAAA;ACAf,MAAe,aAAA;ACAf,MAAe,aAAA;ACAf,MAAe,aAAA;ACAf,MAAe,aAAA;ACAf,MAAe,aAAA;ACAf,MAAe,aAAA;ACAf,MAAe,aAAA;ACAf,MAAe,aAAA;;;;;;;;;;;;;;;;;;;;;"}
|
||||
1
unpackage/dist/dev/.sourcemap/mp-weixin/components/EtherealWheat-banner/specialBanner.js.map
vendored
Normal file
1
unpackage/dist/dev/.sourcemap/mp-weixin/components/specialBanner.js.map
vendored
Normal file
1
unpackage/dist/dev/.sourcemap/mp-weixin/pages/home/product-details.js.map
vendored
Normal file
|
|
@ -1 +1 @@
|
|||
{"version":3,"file":"me-page.js","sources":["pages/me/me-page.vue","../../../Software/HBuilderX.4.15.2024050802/HBuilderX/plugins/uniapp-cli-vite/uniPage:/cGFnZXMvbWUvbWUtcGFnZS52dWU"],"sourcesContent":["<template>\n\t<view>\n\t\t\n\t</view>\n</template>\n\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\t\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\t\n\t\t}\n\t}\n</script>\n\n<style>\n\n</style>\n","import MiniProgramPage from 'F:/gitCode/uniapp/guyu/pages/me/me-page.vue'\nwx.createPage(MiniProgramPage)"],"names":[],"mappings":";;AAOC,MAAK,YAAU;AAAA,EACd,OAAO;AACN,WAAO,CAEP;AAAA,EACA;AAAA,EACD,SAAS,CAET;AACD;;;;;ACfD,GAAG,WAAW,eAAe;"}
|
||||
{"version":3,"file":"me-page.js","sources":["pages/me/me-page.vue","../../../Software/HBuilderX.4.15.2024050802/HBuilderX/plugins/uniapp-cli-vite/uniPage:/cGFnZXMvbWUvbWUtcGFnZS52dWU"],"sourcesContent":["<template>\r\n\t<view class=\"content\" style=\"background-image: url('/static/bags_bg.png');\">\r\n\r\n\r\n\t\t<view class=\"\" style=\"width: 100%; height: 138.19rpx; margin-top: 195.14rpx; position: relative;\">\r\n\r\n\t\t\t<image src=\"\"\r\n\t\t\t\tstyle=\"width: 137.5rpx; height: 137.5rpx; background-color: #FFFFFF; border: 2rpx solid #F5D677; border-radius: 50%; margin-left: 29.17rpx; position: absolute;\"\r\n\t\t\t\tmode=\"\"></image>\r\n\r\n\t\t\t<view class=\"\"\r\n\t\t\t\tstyle=\"display: flex; flex-direction: row; position: absolute; align-items: center; left: 186.81rpx; top: 35.42rpx;\">\r\n\t\t\t\t<text style=\"font-size: 29.17rpx; color: #6E5B51;\">坂本日常</text>\r\n\t\t\t\t<image src=\"/static/ic_modify.png\" style=\"width: 22.92rpx; height: 22.92rpx; margin-left: 13.16rpx;\"\r\n\t\t\t\t\tmode=\"\"></image>\r\n\t\t\t</view>\r\n\r\n\t\t\t<text\r\n\t\t\t\tstyle=\"position: absolute; left: 186.81rpx; bottom: 35.42rpx; font-size: 19.42rpx; color: #8C8574;\">ID:3232321323</text>\r\n\r\n\t\t</view>\r\n\r\n\t\t<view class=\"\"\r\n\t\t\tstyle=\"width: 689.58rpx; height: 161.81rpx; background-color: #FFFFFF; margin: 48.61rpx auto 0; border-radius: 20rpx; display: flex; flex-direction: row; align-items: center; justify-content: space-around;\">\r\n\r\n\t\t\t<image src=\"/static/ic_coupon.png\" style=\"width: 100.69rpx; height: 98.61rpx;\" mode=\"\"></image>\r\n\r\n\t\t\t<view style=\"width: 0.69rpx; height: 98.61rpx; background-color: #6E5B51;\"></view>\r\n\t\t\t\r\n\t\t\t<image src=\"/static/ic_order.png\" style=\"width: 100.69rpx; height: 98.61rpx;\" mode=\"\"></image>\r\n\t\t\t\r\n\t\t\t<view style=\"width: 0.69rpx; height: 98.61rpx; background-color: #6E5B51;\"></view>\r\n\r\n\t\t\t<image src=\"/static/ic_kf.png\" style=\"width: 100.69rpx; height: 98.61rpx;\" mode=\"\"></image>\r\n\r\n\r\n\t\t</view>\r\n\r\n\r\n\t</view>\r\n</template>\r\n\r\n<script>\r\n\texport default {\r\n\t\tdata() {\r\n\t\t\treturn {\r\n\r\n\t\t\t}\r\n\t\t},\r\n\t\tmethods: {\r\n\r\n\t\t}\r\n\t}\r\n</script>\r\n\r\n<style lang=\"scss\">\r\n\t.content {\r\n\t\twidth: 100%;\r\n\t\theight: 100vh;\r\n\t\tdisplay: flex;\r\n\t\tflex-direction: column;\r\n\t\talign-items: center;\r\n\t\tbackground-size: cover;\r\n\t\tbackground-repeat: no-repeat;\r\n\t\tbackground-position: center;\r\n\t}\r\n</style>","import MiniProgramPage from 'F:/gitCode/uniapp/guyu/pages/me/me-page.vue'\nwx.createPage(MiniProgramPage)"],"names":[],"mappings":";;;AA2CC,MAAK,YAAU;AAAA,EACd,OAAO;AACN,WAAO,CAEP;AAAA,EACA;AAAA,EACD,SAAS,CAET;AACD;;;;;;;;;;ACnDD,GAAG,WAAW,eAAe;"}
|
||||
1
unpackage/dist/dev/mp-weixin/app.js
vendored
|
|
@ -6,6 +6,7 @@ if (!Math) {
|
|||
"./pages/index/index.js";
|
||||
"./pages/bags/bags-page.js";
|
||||
"./pages/me/me-page.js";
|
||||
"./pages/home/product-details.js";
|
||||
}
|
||||
const _sfc_main = {
|
||||
onLaunch: function() {
|
||||
|
|
|
|||
3
unpackage/dist/dev/mp-weixin/app.json
vendored
|
|
@ -3,7 +3,8 @@
|
|||
"pages/home/home-page",
|
||||
"pages/index/index",
|
||||
"pages/bags/bags-page",
|
||||
"pages/me/me-page"
|
||||
"pages/me/me-page",
|
||||
"pages/home/product-details"
|
||||
],
|
||||
"window": {
|
||||
"navigationBarTextStyle": "black",
|
||||
|
|
|
|||
57
unpackage/dist/dev/mp-weixin/app.wxss
vendored
|
|
@ -24,9 +24,58 @@
|
|||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
/*每个页面公共css */
|
||||
/* 定义字体 */
|
||||
@font-face {
|
||||
font-family: "jcyt";
|
||||
src: url("static/fonts/jcyt.ttf") format("truetype");
|
||||
font-family: "JiangChengYuanTi-300W";
|
||||
/* 定义字体家族名称 */
|
||||
src: url("static/fonts/JiangChengYuanTi-300W.ttf") format("truetype");
|
||||
/* 指定字体文件路径和格式 */
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
/* 全局应用字体 */page{--status-bar-height:25px;--top-window-height:0px;--window-top:0px;--window-bottom:0px;--window-left:0px;--window-right:0px;--window-magin:0px}[data-c-h="true"]{display: none !important;}
|
||||
@font-face {
|
||||
font-family: "JiangChengYuanTi-400W";
|
||||
/* 定义字体家族名称 */
|
||||
src: url("static/fonts/JiangChengYuanTi-300W.ttf") format("truetype");
|
||||
/* 指定字体文件路径和格式 */
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "JiangChengYuanTi-500W";
|
||||
/* 定义字体家族名称 */
|
||||
src: url("static/fonts/JiangChengYuanTi-300W.ttf") format("truetype");
|
||||
/* 指定字体文件路径和格式 */
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "JiangChengYuanTi-600W";
|
||||
/* 定义字体家族名称 */
|
||||
src: url("static/fonts/JiangChengYuanTi-300W.ttf") format("truetype");
|
||||
/* 指定字体文件路径和格式 */
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "JiangChengYuanTi-700W";
|
||||
/* 定义字体家族名称 */
|
||||
src: url("static/fonts/JiangChengYuanTi-300W.ttf") format("truetype");
|
||||
/* 指定字体文件路径和格式 */
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
.myZt-300w {
|
||||
font-family: "JiangChengYuanTi-300W", sans-serif;
|
||||
}
|
||||
.myZt-400w {
|
||||
font-family: "JiangChengYuanTi-400W", sans-serif;
|
||||
}
|
||||
.myZt-500w {
|
||||
font-family: "JiangChengYuanTi-500W", sans-serif;
|
||||
}
|
||||
.myZt-600w {
|
||||
font-family: "JiangChengYuanTi-600W", sans-serif;
|
||||
}
|
||||
.myZt-700w {
|
||||
font-family: "JiangChengYuanTi-700W", sans-serif;
|
||||
}page{--status-bar-height:25px;--top-window-height:0px;--window-top:0px;--window-bottom:0px;--window-left:0px;--window-right:0px;--window-magin:0px}[data-c-h="true"]{display: none !important;}
|
||||
54
unpackage/dist/dev/mp-weixin/common/assets.js
vendored
|
|
@ -1,16 +1,42 @@
|
|||
"use strict";
|
||||
const _imports_0$1 = "/static/bg.png";
|
||||
const _imports_1$1 = "/static/ic_search.png";
|
||||
const _imports_2$1 = "/static/ic_notice.png";
|
||||
const _imports_0 = "/static/ic_minus.png";
|
||||
const _imports_1 = "/static/ic_add.png";
|
||||
const _imports_2 = "/static/pay_bg.png";
|
||||
const _imports_3 = "/static/ic_check.png";
|
||||
exports._imports_0 = _imports_0$1;
|
||||
exports._imports_0$1 = _imports_0;
|
||||
exports._imports_1 = _imports_1$1;
|
||||
exports._imports_1$1 = _imports_1;
|
||||
exports._imports_2 = _imports_2$1;
|
||||
exports._imports_2$1 = _imports_2;
|
||||
exports._imports_3 = _imports_3;
|
||||
const _imports_0$3 = "/static/bg.png";
|
||||
const _imports_1$3 = "/static/ic_search.png";
|
||||
const _imports_2$3 = "/static/ic_notice.png";
|
||||
const _imports_0$2 = "/static/ic_minus.png";
|
||||
const _imports_1$2 = "/static/ic_add.png";
|
||||
const _imports_2$2 = "/static/pay_bg.png";
|
||||
const _imports_0$1 = "/static/ic_modify.png";
|
||||
const _imports_1$1 = "/static/ic_coupon.png";
|
||||
const _imports_2$1 = "/static/ic_order.png";
|
||||
const _imports_3$1 = "/static/ic_kf.png";
|
||||
const _imports_0 = "/static/ic_back.png";
|
||||
const _imports_1 = "/static/bags.png";
|
||||
const _imports_2 = "/static/details.png";
|
||||
const _imports_3 = "/static/share.png";
|
||||
const _imports_4 = "/static/ic_prompt.png";
|
||||
const _imports_5 = "/static/ic_pay.png";
|
||||
const _imports_6 = "/static/ic_join.png";
|
||||
const _imports_7 = "/static/ic_close.png";
|
||||
const _imports_8 = "/static/ic_address.png";
|
||||
const _imports_9 = "/static/ic_right_arrow.png";
|
||||
exports._imports_0 = _imports_0$3;
|
||||
exports._imports_0$1 = _imports_0$2;
|
||||
exports._imports_0$2 = _imports_0$1;
|
||||
exports._imports_0$3 = _imports_0;
|
||||
exports._imports_1 = _imports_1$3;
|
||||
exports._imports_1$1 = _imports_1$2;
|
||||
exports._imports_1$2 = _imports_1$1;
|
||||
exports._imports_1$3 = _imports_1;
|
||||
exports._imports_2 = _imports_2$3;
|
||||
exports._imports_2$1 = _imports_2$2;
|
||||
exports._imports_2$2 = _imports_2$1;
|
||||
exports._imports_2$3 = _imports_2;
|
||||
exports._imports_3 = _imports_3$1;
|
||||
exports._imports_3$1 = _imports_3;
|
||||
exports._imports_4 = _imports_4;
|
||||
exports._imports_5 = _imports_5;
|
||||
exports._imports_6 = _imports_6;
|
||||
exports._imports_7 = _imports_7;
|
||||
exports._imports_8 = _imports_8;
|
||||
exports._imports_9 = _imports_9;
|
||||
//# sourceMappingURL=../../.sourcemap/mp-weixin/common/assets.js.map
|
||||
|
|
|
|||
|
|
@ -5209,6 +5209,10 @@ function vFor(source, renderItem) {
|
|||
}
|
||||
return ret;
|
||||
}
|
||||
function setRef(ref2, id, opts = {}) {
|
||||
const { $templateRefs } = getCurrentInstance();
|
||||
$templateRefs.push({ i: id, r: ref2, k: opts.k, f: opts.f });
|
||||
}
|
||||
const o = (value, key) => vOn(value, key);
|
||||
const f = (source, renderItem) => vFor(source, renderItem);
|
||||
const s = (value) => stringifyStyle(value);
|
||||
|
|
@ -5216,6 +5220,7 @@ const e = (target, ...sources) => extend(target, ...sources);
|
|||
const n = (value) => normalizeClass(value);
|
||||
const t = (val) => toDisplayString(val);
|
||||
const p = (props) => renderProps(props);
|
||||
const sr = (ref2, id, opts) => setRef(ref2, id, opts);
|
||||
function createApp$1(rootComponent, rootProps = null) {
|
||||
rootComponent && (rootComponent.mpType = "app");
|
||||
return createVueApp(rootComponent, rootProps).use(plugin);
|
||||
|
|
@ -7037,7 +7042,7 @@ function isConsoleWritable() {
|
|||
function initRuntimeSocketService() {
|
||||
const hosts = "172.17.0.1,192.168.1.7,192.168.195.32,127.0.0.1";
|
||||
const port = "8090";
|
||||
const id = "mp-weixin_AAXmV0";
|
||||
const id = "mp-weixin_z4LtYV";
|
||||
const lazy = typeof swan !== "undefined";
|
||||
let restoreError = lazy ? () => {
|
||||
} : initOnError();
|
||||
|
|
@ -7993,5 +7998,6 @@ exports.o = o;
|
|||
exports.p = p;
|
||||
exports.resolveComponent = resolveComponent;
|
||||
exports.s = s;
|
||||
exports.sr = sr;
|
||||
exports.t = t;
|
||||
//# sourceMappingURL=../../.sourcemap/mp-weixin/common/vendor.js.map
|
||||
|
|
|
|||
91
unpackage/dist/dev/mp-weixin/components/specialBanner.js
vendored
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
"use strict";
|
||||
const common_vendor = require("../common/vendor.js");
|
||||
const _sfc_main = {
|
||||
props: {
|
||||
bannerList: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
}
|
||||
},
|
||||
swiperConfig: {
|
||||
type: Object,
|
||||
default() {
|
||||
return {
|
||||
indicatorDots: true,
|
||||
indicatorColor: "rgba(255, 255, 255, .4)",
|
||||
indicatorActiveColor: "rgba(255, 255, 255, 1)",
|
||||
autoplay: false,
|
||||
interval: 3e3,
|
||||
duration: 300,
|
||||
circular: true,
|
||||
previousMargin: "58rpx",
|
||||
nextMargin: "58rpx"
|
||||
};
|
||||
}
|
||||
},
|
||||
scaleX: {
|
||||
type: String,
|
||||
default: (634 / 550).toFixed(4)
|
||||
},
|
||||
scaleY: {
|
||||
type: String,
|
||||
default: (378 / 328).toFixed(4)
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
listLen() {
|
||||
return this.bannerList.length;
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
curIndex: 0,
|
||||
descIndex: 0,
|
||||
isDescAnimating: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
swiperChange(e) {
|
||||
const that = this;
|
||||
this.curIndex = e.mp.detail.current;
|
||||
this.isDescAnimating = true;
|
||||
let timer = setTimeout(function() {
|
||||
that.descIndex = e.mp.detail.current;
|
||||
clearTimeout(timer);
|
||||
}, 150);
|
||||
},
|
||||
animationfinish(e) {
|
||||
this.isDescAnimating = false;
|
||||
},
|
||||
getBannerDetail(index) {
|
||||
}
|
||||
}
|
||||
};
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return {
|
||||
a: common_vendor.f($props.bannerList, (item, i, i0) => {
|
||||
return {
|
||||
a: item.picture,
|
||||
b: $data.curIndex === i ? "scale(" + $props.scaleX + "," + $props.scaleY + ")" : "scale(1,1)",
|
||||
c: common_vendor.o(($event) => $options.getBannerDetail(i), i),
|
||||
d: common_vendor.n($data.curIndex === 0 ? i === $options.listLen - 1 ? "item-left" : i === 1 ? "item-right" : "item-center" : $data.curIndex === $options.listLen - 1 ? i === 0 ? "item-right" : i === $options.listLen - 2 ? "item-left" : "item-center" : i === $data.curIndex - 1 ? "item-left" : i === $data.curIndex + 1 ? "item-right" : "item-center"),
|
||||
e: i
|
||||
};
|
||||
}),
|
||||
b: $props.swiperConfig.indicatorDots,
|
||||
c: $props.swiperConfig.indicatorColor,
|
||||
d: $props.swiperConfig.indicatorActiveColor,
|
||||
e: $props.swiperConfig.autoplay,
|
||||
f: $props.swiperConfig.interval,
|
||||
g: $props.swiperConfig.duration,
|
||||
h: $props.swiperConfig.circular,
|
||||
i: $props.swiperConfig.previousMargin,
|
||||
j: $props.swiperConfig.nextMargin,
|
||||
k: common_vendor.o((...args) => $options.swiperChange && $options.swiperChange(...args)),
|
||||
l: common_vendor.o((...args) => $options.animationfinish && $options.animationfinish(...args))
|
||||
};
|
||||
}
|
||||
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-625b6715"]]);
|
||||
wx.createComponent(Component);
|
||||
//# sourceMappingURL=../../.sourcemap/mp-weixin/components/specialBanner.js.map
|
||||
4
unpackage/dist/dev/mp-weixin/components/specialBanner.json
vendored
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
1
unpackage/dist/dev/mp-weixin/components/specialBanner.wxml
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
<view class="banner-container data-v-625b6715"><swiper class="data-v-625b6715" style="{{'width:' + '100vw' + ';' + ('height:' + '410rpx')}}" indicator-dots="{{b}}" indicator-color="{{c}}" indicator-active-color="{{d}}" autoplay="{{e}}" interval="{{f}}" duration="{{g}}" circular="{{h}}" previous-margin="{{i}}" next-margin="{{j}}" bindchange="{{k}}" bindanimationfinish="{{l}}"><swiper-item wx:for="{{a}}" wx:for-item="item" wx:key="e" class="data-v-625b6715"><view class="{{['image-container', 'data-v-625b6715', item.d]}}"><image src="{{item.a}}" class="slide-image data-v-625b6715" style="{{'transform:' + item.b + ';' + ('transition-duration:' + '.3s') + ';' + ('transition-timing-function:' + 'ease')}}" bindtap="{{item.c}}"/></view></swiper-item></swiper></view>
|
||||
99
unpackage/dist/dev/mp-weixin/components/specialBanner.wxss
vendored
Normal file
|
|
@ -0,0 +1,99 @@
|
|||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
.banner-container.data-v-625b6715 {
|
||||
width: 100vw;
|
||||
height: 524rpx;
|
||||
}
|
||||
.banner-container .image-container.data-v-625b6715 {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
}
|
||||
.banner-container .image-container .slide-image.data-v-625b6715 {
|
||||
width: 447.92rpx;
|
||||
height: 448.61rpx;
|
||||
z-index: 200;
|
||||
}
|
||||
.banner-container .item-left.data-v-625b6715 {
|
||||
justify-content: flex-end;
|
||||
padding: 56rpx 26rpx 0 0;
|
||||
}
|
||||
.banner-container .item-right.data-v-625b6715 {
|
||||
justify-content: flex-start;
|
||||
padding: 56rpx 0 0 26rpx;
|
||||
}
|
||||
.banner-container .item-center.data-v-625b6715 {
|
||||
justify-content: center;
|
||||
padding: 56rpx 0 0 0;
|
||||
}
|
||||
.banner-container .desc-wrap.data-v-625b6715 {
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 98rpx;
|
||||
padding: 24rpx 66rpx 0;
|
||||
}
|
||||
.banner-container .desc-wrap .title.data-v-625b6715 {
|
||||
width: 100%;
|
||||
height: 42rpx;
|
||||
line-height: 42rpx;
|
||||
color: #222222;
|
||||
font-size: 30rpx;
|
||||
font-family: "PingFangTC-Regular";
|
||||
font-weight: 600;
|
||||
text-align: left;
|
||||
}
|
||||
.banner-container .desc-wrap .desc.data-v-625b6715 {
|
||||
margin-top: 4rpx;
|
||||
width: 100%;
|
||||
height: 34rpx;
|
||||
line-height: 34rpx;
|
||||
color: #999999;
|
||||
font-size: 24rpx;
|
||||
font-family: "PingFangTC-Regular";
|
||||
text-align: left;
|
||||
}
|
||||
@keyframes descAnimation-625b6715 {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
25% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
50% {
|
||||
opacity: 0;
|
||||
}
|
||||
75% {
|
||||
opacity: 0.5;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.banner-container .hideAndShowDesc.data-v-625b6715 {
|
||||
animation: descAnimation-625b6715 0.3s ease 1;
|
||||
-webkit-animation: descAnimation-625b6715 0.3s ease 1;
|
||||
}
|
||||
118
unpackage/dist/dev/mp-weixin/pages/bags/bags-page.js
vendored
|
|
@ -4,15 +4,18 @@ const common_assets = require("../../common/assets.js");
|
|||
const _sfc_main = {
|
||||
data() {
|
||||
return {
|
||||
checkNum: 1,
|
||||
sumPrice: 20,
|
||||
checkNum: 0,
|
||||
//选中几个
|
||||
sumPrice: 0,
|
||||
//总价
|
||||
selectAll: false,
|
||||
dataList: [
|
||||
{
|
||||
imgurl: "",
|
||||
title: "坂本日常 吧唧",
|
||||
name: "坂本",
|
||||
price: "20",
|
||||
num: "1",
|
||||
price: 20,
|
||||
num: 1,
|
||||
isCheck: false,
|
||||
type: "库存紧张"
|
||||
},
|
||||
|
|
@ -20,8 +23,8 @@ const _sfc_main = {
|
|||
imgurl: "",
|
||||
title: "坂本日常 吧唧",
|
||||
name: "坂本",
|
||||
price: "20",
|
||||
num: "1",
|
||||
price: 20,
|
||||
num: 1,
|
||||
isCheck: false,
|
||||
type: "库存紧张"
|
||||
},
|
||||
|
|
@ -29,8 +32,8 @@ const _sfc_main = {
|
|||
imgurl: "",
|
||||
title: "坂本日常 吧唧",
|
||||
name: "坂本",
|
||||
price: "20",
|
||||
num: "1",
|
||||
price: 20,
|
||||
num: 1,
|
||||
isCheck: false,
|
||||
type: "库存紧张"
|
||||
},
|
||||
|
|
@ -38,8 +41,8 @@ const _sfc_main = {
|
|||
imgurl: "",
|
||||
title: "坂本日常 吧唧",
|
||||
name: "坂本",
|
||||
price: "20",
|
||||
num: "1",
|
||||
price: 20,
|
||||
num: 1,
|
||||
isCheck: false,
|
||||
type: "库存紧张"
|
||||
},
|
||||
|
|
@ -47,8 +50,8 @@ const _sfc_main = {
|
|||
imgurl: "",
|
||||
title: "坂本日常 吧唧",
|
||||
name: "坂本",
|
||||
price: "20",
|
||||
num: "1",
|
||||
price: 20,
|
||||
num: 1,
|
||||
isCheck: false,
|
||||
type: "库存紧张"
|
||||
},
|
||||
|
|
@ -56,8 +59,8 @@ const _sfc_main = {
|
|||
imgurl: "",
|
||||
title: "坂本日常 吧唧",
|
||||
name: "坂本",
|
||||
price: "20",
|
||||
num: "1",
|
||||
price: 20,
|
||||
num: 1,
|
||||
isCheck: false,
|
||||
type: "库存紧张"
|
||||
},
|
||||
|
|
@ -65,44 +68,76 @@ const _sfc_main = {
|
|||
imgurl: "",
|
||||
title: "坂本日常 吧唧",
|
||||
name: "坂本",
|
||||
price: "20",
|
||||
num: "1",
|
||||
isCheck: false,
|
||||
type: "库存紧张"
|
||||
},
|
||||
{
|
||||
imgurl: "",
|
||||
title: "坂本日常 吧唧",
|
||||
name: "坂本",
|
||||
price: "20",
|
||||
num: "1",
|
||||
isCheck: false,
|
||||
type: "库存紧张"
|
||||
},
|
||||
{
|
||||
imgurl: "",
|
||||
title: "坂本日常 吧唧",
|
||||
name: "坂本",
|
||||
price: "20",
|
||||
num: "1",
|
||||
price: 20,
|
||||
num: 1,
|
||||
isCheck: false,
|
||||
type: "库存紧张"
|
||||
}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {}
|
||||
methods: {
|
||||
// 切换单个项目的选中状态
|
||||
toggleItem(index) {
|
||||
this.dataList[index].isCheck = !this.dataList[index].isCheck;
|
||||
this.updateSelectAllStatus();
|
||||
},
|
||||
// 全选/取消全选
|
||||
toggleSelectAll() {
|
||||
this.selectAll = !this.selectAll;
|
||||
this.dataList.forEach((item) => {
|
||||
item.isCheck = this.selectAll;
|
||||
});
|
||||
this.selectedCount();
|
||||
this.totalPrice();
|
||||
},
|
||||
// 更新全选状态(当手动选择所有项时自动勾选全选)
|
||||
updateSelectAllStatus() {
|
||||
this.selectAll = this.dataList.every((item) => item.isCheck);
|
||||
this.selectedCount();
|
||||
this.totalPrice();
|
||||
},
|
||||
// 增加数量
|
||||
increase(index) {
|
||||
this.dataList[index].num++;
|
||||
this.selectedCount();
|
||||
this.totalPrice();
|
||||
},
|
||||
// 减少数量
|
||||
decrease(index) {
|
||||
if (this.dataList[index].num > 1) {
|
||||
this.dataList[index].num--;
|
||||
}
|
||||
this.selectedCount();
|
||||
this.totalPrice();
|
||||
},
|
||||
// 选中的商品总数量
|
||||
selectedCount() {
|
||||
this.checkNum = this.dataList.reduce((total, item) => {
|
||||
return total + (item.isCheck ? item.num : 0);
|
||||
}, 0);
|
||||
},
|
||||
// 选中的商品总价格
|
||||
totalPrice() {
|
||||
this.sumPrice = this.dataList.reduce((total, item) => {
|
||||
return total + (item.isCheck ? item.price * item.num : 0);
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
};
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return {
|
||||
a: common_vendor.f($data.dataList, (item, index, i0) => {
|
||||
return {
|
||||
a: item.isCheck ? "/static/ic_check_s.png" : "/static/ic_check.png",
|
||||
b: item.imgurl,
|
||||
c: common_vendor.t(item.title),
|
||||
d: common_vendor.t(item.name),
|
||||
e: common_vendor.t(item.price),
|
||||
f: common_vendor.t(item.num)
|
||||
b: common_vendor.o(($event) => $options.toggleItem(index)),
|
||||
c: item.imgurl,
|
||||
d: common_vendor.t(item.title),
|
||||
e: common_vendor.t(item.name),
|
||||
f: common_vendor.t(item.price),
|
||||
g: common_vendor.o(($event) => $options.decrease(index)),
|
||||
h: common_vendor.t(item.num),
|
||||
i: common_vendor.o(($event) => $options.increase(index))
|
||||
};
|
||||
}),
|
||||
b: common_assets._imports_0$1,
|
||||
|
|
@ -111,7 +146,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|||
e: common_vendor.t($data.checkNum),
|
||||
f: common_vendor.t($data.sumPrice),
|
||||
g: common_vendor.t($data.checkNum),
|
||||
h: common_assets._imports_3
|
||||
h: $data.selectAll ? "/static/ic_check_s.png" : "/static/ic_check.png",
|
||||
i: common_vendor.o((...args) => $options.toggleSelectAll && $options.toggleSelectAll(...args))
|
||||
};
|
||||
}
|
||||
const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<view class="content" style="background-image:url('/static/bags_bg.png')"><view class="" style="width:100%;overflow:auto"><view class="" style="width:689.58rpx;margin:201.39rpx auto 114.58rpx;display:flex;flex-direction:column"><view wx:for="{{a}}" wx:for-item="item" class="" style="width:100%;height:161.81rpx;background-color:#FFFBF0;border-radius:30rpx;margin-bottom:29.17rpx;display:flex;align-items:center;position:relative"><image src="{{item.a}}" style="width:29.17rpx;height:29.17rpx;margin-left:20.83rpx" mode=""></image><image src="{{item.b}}" style="width:125rpx;height:125rpx;background-color:#9B9285;border-radius:30rpx;margin-left:19.44rpx" mode=""></image><text style="position:absolute;left:210.42rpx;top:24.31rpx;font-size:23.58rpx;color:#6E5B51">{{item.c}}</text><text style="position:absolute;left:210.42rpx;top:60.42rpx;font-size:19.42rpx;color:#6E5B51">{{item.d}}</text><view class="" style="display:flex;flex-direction:row;position:absolute;left:205.81rpx;bottom:26.39rpx"><text style="font-size:29.13rpx;color:#6E5B51">¥{{item.e}}</text><text style="font-size:19.42rpx;color:#6E5B51;margin-left:17.36rpx;margin-top:10rpx">库存紧张</text></view><view class="" style="display:flex;flex-direction:row;position:absolute;bottom:23.61rpx;right:23.61rpx;align-items:center"><image src="{{b}}" style="width:28.47rpx;height:28.47rpx" mode=""></image><text style="width:70.83rpx;font-size:29.17rpx;color:#6E5B51;text-align:center">{{item.f}}</text><image src="{{c}}" style="width:28.47rpx;height:28.47rpx" mode=""></image></view></view></view></view><view class="" style="width:100%;height:114.58rpx;background-color:#FFFDF1;position:fixed;bottom:0;display:flex;flex-direction:row-reverse;align-items:center"><view class="" style="width:164.58rpx;height:68.75rpx;position:relative;margin-right:19.44rpx;display:flex;align-items:center;justify-content:center"><image src="{{d}}" style="width:100%;height:100%;position:absolute" mode=""></image><text style="position:absolute;font-size:20.83rpx;color:#66594E">结算 ({{e}})</text></view><text style="font-size:29.13rpx;color:#6E5B51;margin-right:30.56rpx">¥{{f}}</text><text style="font-size:19.42rpx;color:#8C8574">共</text><text style="font-size:19.42rpx;color:#8C8574;margin-right:30rpx">合计: {{g}}件</text><view class="" style="display:flex;flex-direction:row;align-items:center;position:fixed;left:46rpx"><image src="{{h}}" style="width:29.17rpx;height:29.17rpx" mode=""></image><text style="font-size:19.42rpx;color:#8C8574;margin-left:13rpx;margin-bottom:2rpx">全选</text></view></view></view>
|
||||
<view class="content" style="background-image:url('/static/bags_bg.png')"><view class="" style="width:100%;overflow:auto"><view class="" style="width:689.58rpx;margin:201.39rpx auto 114.58rpx;display:flex;flex-direction:column"><view wx:for="{{a}}" wx:for-item="item" class="" style="width:100%;height:161.81rpx;background-color:#FFFBF0;border-radius:30rpx;margin-bottom:29.17rpx;display:flex;align-items:center;position:relative"><image src="{{item.a}}" bindtap="{{item.b}}" style="width:29.17rpx;height:29.17rpx;margin-left:20.83rpx" mode=""></image><image src="{{item.c}}" style="width:125rpx;height:125rpx;background-color:#9B9285;border-radius:30rpx;margin-left:19.44rpx" mode=""></image><text style="position:absolute;left:210.42rpx;top:24.31rpx;font-size:23.58rpx;color:#6E5B51">{{item.d}}</text><text style="position:absolute;left:210.42rpx;top:60.42rpx;font-size:19.42rpx;color:#6E5B51">{{item.e}}</text><view class="" style="display:flex;flex-direction:row;position:absolute;left:205.81rpx;bottom:26.39rpx"><text style="font-size:29.13rpx;color:#6E5B51">¥{{item.f}}</text><text style="font-size:19.42rpx;color:#6E5B51;margin-left:17.36rpx;margin-top:10rpx">库存紧张</text></view><view class="" style="display:flex;flex-direction:row;position:absolute;bottom:23.61rpx;right:23.61rpx;align-items:center"><image src="{{b}}" bindtap="{{item.g}}" style="width:28.47rpx;height:28.47rpx" mode=""></image><text style="width:70.83rpx;font-size:29.17rpx;color:#6E5B51;text-align:center">{{item.h}}</text><image src="{{c}}" bindtap="{{item.i}}" style="width:28.47rpx;height:28.47rpx" mode=""></image></view></view></view></view><view class="" style="width:100%;height:114.58rpx;background-color:#FFFDF1;position:fixed;bottom:0;display:flex;flex-direction:row-reverse;align-items:center"><view class="" style="width:164.58rpx;height:68.75rpx;position:relative;margin-right:19.44rpx;display:flex;align-items:center;justify-content:center"><image src="{{d}}" style="width:100%;height:100%;position:absolute" mode=""></image><text style="position:absolute;font-size:20.83rpx;color:#66594E">结算 ({{e}})</text></view><text style="font-size:29.13rpx;color:#6E5B51;margin-right:30.56rpx">¥{{f}}</text><text style="font-size:19.42rpx;color:#8C8574">共</text><text style="font-size:19.42rpx;color:#8C8574;margin-right:30rpx">合计: {{g}}件</text><view class="" style="display:flex;flex-direction:row;align-items:center;position:fixed;left:46rpx"><image src="{{h}}" bindtap="{{i}}" style="width:29.17rpx;height:29.17rpx" mode=""></image><text style="font-size:19.42rpx;color:#8C8574;margin-left:13rpx;margin-bottom:2rpx">全选</text></view></view></view>
|
||||
|
|
@ -8,21 +8,25 @@ const _sfc_main = {
|
|||
swiperList: [1, 2, 3, 4],
|
||||
dataList: [
|
||||
{
|
||||
id: 1,
|
||||
title: "坂本日常",
|
||||
color: "#90BB76",
|
||||
url: ""
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "坂本日常",
|
||||
color: "#FDA6AA",
|
||||
url: ""
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "坂本日常",
|
||||
color: "#96ABEB",
|
||||
url: ""
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "坂本日常",
|
||||
color: "#F9D051",
|
||||
url: ""
|
||||
|
|
@ -52,60 +56,70 @@ const _sfc_main = {
|
|||
],
|
||||
goodsLsit: [
|
||||
{
|
||||
id: 1,
|
||||
title: "坂本日常坂本日常坂本日常坂本日常坂本日常坂本日常坂本日常坂本日常坂本日常",
|
||||
imgUrl: "",
|
||||
type: "",
|
||||
price: "20"
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "坂本日常坂本日常坂本日常坂本日常",
|
||||
imgUrl: "",
|
||||
type: "",
|
||||
price: "20"
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "坂本日常坂本日常坂本日常坂本日常",
|
||||
imgUrl: "",
|
||||
type: "",
|
||||
price: "20"
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "坂本日常坂本日常坂本日常坂本日常",
|
||||
imgUrl: "",
|
||||
type: "",
|
||||
price: "20"
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "坂本日常坂本日常坂本日常坂本日常",
|
||||
imgUrl: "",
|
||||
type: "",
|
||||
price: "20"
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "坂本日常坂本日常坂本日常坂本日常",
|
||||
imgUrl: "",
|
||||
type: "",
|
||||
price: "20"
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "坂本日常坂本日常坂本日常坂本日常",
|
||||
imgUrl: "",
|
||||
type: "",
|
||||
price: "20"
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "坂本日常坂本日常坂本日常坂本日常",
|
||||
imgUrl: "",
|
||||
type: "",
|
||||
price: "20"
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "坂本日常坂本日常坂本日常坂本日常",
|
||||
imgUrl: "",
|
||||
type: "",
|
||||
price: "20"
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
title: "坂本日常坂本日常坂本日常坂本日常",
|
||||
imgUrl: "",
|
||||
type: "",
|
||||
|
|
@ -130,6 +144,11 @@ const _sfc_main = {
|
|||
border: "1rpx solid #9A8F79"
|
||||
};
|
||||
}
|
||||
},
|
||||
toDetails(id) {
|
||||
common_vendor.index.navigateTo({
|
||||
url: "/pages/home/product-details?id=" + id
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -164,7 +183,8 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|||
g: common_vendor.f($data.dataList, (item, index, i0) => {
|
||||
return {
|
||||
a: `2px solid ${item.color}`,
|
||||
b: common_vendor.t(item.title)
|
||||
b: common_vendor.t(item.title),
|
||||
c: common_vendor.o(($event) => $options.toDetails($data.dataList[index].id))
|
||||
};
|
||||
}),
|
||||
h: common_vendor.f($data.tabList, (item, index, i0) => {
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<view class="content" style="background-color:#FFFDF6"><image src="{{a}}" style="width:620.83rpx;height:100%;position:absolute" mode=""></image><view class="content" style="position:absolute"><view class="" style="width:100%;margin-top:96.53rpx"><view class="" style="width:230.56rpx;height:71.53rpx;background-color:#FFFFFF;border:5rpx solid #F5D677;border-radius:50rpx;display:flex;align-items:center"><image src="{{b}}" style="width:28.47rpx;height:28.47rpx;margin-left:25rpx" mode=""></image></view></view><view class="" style="width:100%;height:57.64rpx;background-color:#FFFFFF;border:5rpx solid #F5D677;border-radius:20rpx;margin-top:33.33rpx;display:flex;align-items:center"><image src="{{c}}" style="width:23.61rpx;height:22.92rpx;margin-left:24.31rpx" mode=""></image><view class="news-text"><uni-notice-bar wx:if="{{e}}" style="{{'width:' + d}}" u-i="0110074c-0" bind:__l="__l" u-p="{{e}}"></uni-notice-bar></view></view><view class="" style="width:100%;margin-top:30.56rpx"><swiper indicator-dots="{{false}}" autoplay="{{true}}" interval="{{3000}}" duration="{{500}}" circular="{{true}}"><swiper-item wx:for="{{f}}" wx:for-item="item" wx:key="b"><view class="" style="background-color:#F5D677;width:100%;height:300rpx">{{item.a}}</view></swiper-item></swiper></view><view class="" style="width:100%;display:flex;flex-direction:row;justify-content:space-between;margin-top:29.86rpx"><view wx:for="{{g}}" wx:for-item="item" class="" style="display:flex;flex-direction:column;justify-content:center"><view class="" style="{{'width:159.72rpx;height:159.72rpx;background-color:#FDF4D5;border-radius:40rpx' + ';' + ('border:' + item.a)}}"></view><text style="text-align:center;margin-top:13.19rpx;font-size:22.22rpx;color:#685952;width:159.72rpx;text-overflow:ellipsis;white-space:nowrap;overflow:hidden">{{item.b}}</text></view></view><view class="" style="width:100%;display:flex;flex-direction:row;margin-top:32.64rpx"><view wx:for="{{h}}" wx:for-item="item" class="" bindtap="{{item.b}}" style="{{item.c + ';' + 'padding:0 16.67rpx 6rpx 16.67rpx;margin-right:26.39rpx;border-radius:50rpx'}}"><text style="font-size:23.61rpx">{{item.a}}</text></view></view><view class="grid-container"><view wx:for="{{i}}" wx:for-item="item" class="" style="height:490.28rpx;background-color:#FEF6D6;border:3rpx solid #F9D051;border-radius:40rpx;display:flex;flex-direction:column"><view class="" style="width:100%;height:320.83rpx;background-color:#FFFFFF;border-radius:40rpx 40rpx 0 0"></view><text style="width:280.56rpx;margin:15.28rpx auto;font-size:25rpx;color:#685952;font-family:'jcyt', sans-serif;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis">{{item.a}}</text><text style="font-size:19.44rpx;color:#FF6A6A;margin-left:24.31rpx">现货发售中</text><view class="" style="display:flex;flex-direction:row;margin-left:20.31rpx"><text style="font-size:29.17rpx;color:#87644E;font-family:'jcyt', sans-serif">¥{{item.b}}</text><text style="font-size:19.44rpx;color:#87644E;margin-top:10rpx"> / 包</text></view></view></view></view></view>
|
||||
<view class="content" style="background-color:#FFFDF6"><image src="{{a}}" style="width:620.83rpx;height:100%;position:absolute" mode=""></image><view class="content" style="position:absolute"><view class="" style="width:100%;margin-top:96.53rpx"><view class="" style="width:230.56rpx;height:71.53rpx;background-color:#FFFFFF;border:5rpx solid #F5D677;border-radius:50rpx;display:flex;align-items:center"><image src="{{b}}" style="width:28.47rpx;height:28.47rpx;margin-left:25rpx" mode=""></image></view></view><view class="" style="width:100%;height:57.64rpx;background-color:#FFFFFF;border:5rpx solid #F5D677;border-radius:20rpx;margin-top:33.33rpx;display:flex;align-items:center"><image src="{{c}}" style="width:23.61rpx;height:22.92rpx;margin-left:24.31rpx" mode=""></image><view class="news-text"><uni-notice-bar wx:if="{{e}}" style="{{'width:' + d}}" u-i="0110074c-0" bind:__l="__l" u-p="{{e}}"></uni-notice-bar></view></view><view class="" style="width:100%;margin-top:30.56rpx"><swiper indicator-dots="{{false}}" autoplay="{{true}}" interval="{{3000}}" duration="{{500}}" circular="{{true}}"><swiper-item wx:for="{{f}}" wx:for-item="item" wx:key="b"><view class="" style="background-color:#F5D677;width:100%;height:300rpx">{{item.a}}</view></swiper-item></swiper></view><view class="" style="width:100%;display:flex;flex-direction:row;justify-content:space-between;margin-top:29.86rpx"><view wx:for="{{g}}" wx:for-item="item" class="" bindtap="{{item.c}}" style="display:flex;flex-direction:column;justify-content:center"><view class="" style="{{'width:159.72rpx;height:159.72rpx;background-color:#FDF4D5;border-radius:40rpx' + ';' + ('border:' + item.a)}}"></view><text class="myZt-300w" style="text-align:center;margin-top:13.19rpx;font-size:22.22rpx;color:#685952;width:159.72rpx;text-overflow:ellipsis;white-space:nowrap;overflow:hidden">{{item.b}}</text></view></view><view class="" style="width:100%;display:flex;flex-direction:row;margin-top:32.64rpx"><view wx:for="{{h}}" wx:for-item="item" class="" bindtap="{{item.b}}" style="{{item.c + ';' + 'padding:0 16.67rpx 6rpx 16.67rpx;margin-right:26.39rpx;border-radius:50rpx'}}"><text class="myZt-500w" style="font-size:23.61rpx">{{item.a}}</text></view></view><view class="grid-container"><view wx:for="{{i}}" wx:for-item="item" class="" style="height:490.28rpx;background-color:#FEF6D6;border:3rpx solid #F9D051;border-radius:40rpx;display:flex;flex-direction:column"><view class="" style="width:100%;height:320.83rpx;background-color:#FFFFFF;border-radius:40rpx 40rpx 0 0"></view><text class="myZt-500w" style="width:280.56rpx;margin:15.28rpx auto;font-size:25rpx;color:#685952;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis">{{item.a}}</text><text style="font-size:19.44rpx;color:#FF6A6A;margin-left:24.31rpx">现货发售中</text><view class="" style="display:flex;flex-direction:row;margin-left:20.31rpx"><text class="myZt-500w" style="font-size:29.17rpx;color:#87644E">¥{{item.b}}</text><text style="font-size:19.44rpx;color:#87644E;margin-top:10rpx"> / 包</text></view></view></view></view></view>
|
||||
103
unpackage/dist/dev/mp-weixin/pages/home/product-details.js
vendored
Normal file
|
|
@ -0,0 +1,103 @@
|
|||
"use strict";
|
||||
const common_vendor = require("../../common/vendor.js");
|
||||
const common_assets = require("../../common/assets.js");
|
||||
const specialBanner = () => "../../components/specialBanner.js";
|
||||
const _sfc_main = {
|
||||
components: {
|
||||
specialBanner
|
||||
},
|
||||
onLoad(options) {
|
||||
common_vendor.index.__f__("log", "at pages/home/product-details.vue:143", options.id);
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
bannerList: [{
|
||||
picture: "https://contentcms-bj.cdn.bcebos.com/cmspic/ab7e4834ebc54a128e243bdfd51444da.jpeg?x-bce-process=image/crop,x_0,y_0,w_619,h_337",
|
||||
path: ""
|
||||
}, {
|
||||
picture: "https://contentcms-bj.cdn.bcebos.com/cmspic/ab7e4834ebc54a128e243bdfd51444da.jpeg?x-bce-process=image/crop,x_0,y_0,w_619,h_337",
|
||||
path: ""
|
||||
}, {
|
||||
picture: "https://contentcms-bj.cdn.bcebos.com/cmspic/ab7e4834ebc54a128e243bdfd51444da.jpeg?x-bce-process=image/crop,x_0,y_0,w_619,h_337",
|
||||
path: ""
|
||||
}, {
|
||||
picture: "https://contentcms-bj.cdn.bcebos.com/cmspic/ab7e4834ebc54a128e243bdfd51444da.jpeg?x-bce-process=image/crop,x_0,y_0,w_619,h_337",
|
||||
path: ""
|
||||
}],
|
||||
swiperConfig: {
|
||||
indicatorDots: false,
|
||||
indicatorColor: "rgba(255, 255, 255, .4)",
|
||||
indicatorActiveColor: "rgba(255, 255, 255, 1)",
|
||||
autoplay: false,
|
||||
interval: 3e3,
|
||||
duration: 300,
|
||||
circular: true,
|
||||
previousMargin: "58rpx",
|
||||
nextMargin: "58rpx"
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toBack() {
|
||||
common_vendor.index.navigateBack();
|
||||
},
|
||||
openDetailsPop() {
|
||||
this.$refs.detailsPop.open();
|
||||
},
|
||||
closeDetailsPop() {
|
||||
this.$refs.detailsPop.close();
|
||||
},
|
||||
openPayPop() {
|
||||
this.$refs.payPop.open();
|
||||
},
|
||||
closePayPop() {
|
||||
this.$refs.payPop.close();
|
||||
}
|
||||
}
|
||||
};
|
||||
if (!Array) {
|
||||
const _component_special_banner = common_vendor.resolveComponent("special-banner");
|
||||
const _easycom_uni_popup2 = common_vendor.resolveComponent("uni-popup");
|
||||
(_component_special_banner + _easycom_uni_popup2)();
|
||||
}
|
||||
const _easycom_uni_popup = () => "../../uni_modules/uni-popup/components/uni-popup/uni-popup.js";
|
||||
if (!Math) {
|
||||
_easycom_uni_popup();
|
||||
}
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return {
|
||||
a: common_assets._imports_0$3,
|
||||
b: common_vendor.o(($event) => $options.toBack()),
|
||||
c: common_assets._imports_1$3,
|
||||
d: common_assets._imports_2$3,
|
||||
e: common_vendor.o(($event) => $options.openDetailsPop()),
|
||||
f: common_assets._imports_3$1,
|
||||
g: common_vendor.p({
|
||||
["banner-list"]: $data.bannerList,
|
||||
["swiper-config"]: $data.swiperConfig
|
||||
}),
|
||||
h: common_assets._imports_4,
|
||||
i: common_assets._imports_5,
|
||||
j: common_vendor.o(($event) => $options.openPayPop()),
|
||||
k: common_assets._imports_6,
|
||||
l: common_assets._imports_7,
|
||||
m: common_vendor.o(($event) => $options.closeDetailsPop()),
|
||||
n: common_vendor.sr("detailsPop", "65d16733-1"),
|
||||
o: common_vendor.p({
|
||||
type: "bottom",
|
||||
["safe-area"]: false
|
||||
}),
|
||||
p: common_assets._imports_7,
|
||||
q: common_vendor.o(($event) => $options.closePayPop()()),
|
||||
r: common_assets._imports_8,
|
||||
s: common_assets._imports_9,
|
||||
t: common_vendor.sr("payPop", "65d16733-2"),
|
||||
v: common_vendor.p({
|
||||
type: "bottom",
|
||||
["safe-area"]: false
|
||||
})
|
||||
};
|
||||
}
|
||||
const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
|
||||
wx.createPage(MiniProgramPage);
|
||||
//# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/home/product-details.js.map
|
||||
8
unpackage/dist/dev/mp-weixin/pages/home/product-details.json
vendored
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "",
|
||||
"usingComponents": {
|
||||
"special-banner": "../../components/specialBanner",
|
||||
"uni-popup": "../../uni_modules/uni-popup/components/uni-popup/uni-popup"
|
||||
}
|
||||
}
|
||||
1
unpackage/dist/dev/mp-weixin/pages/home/product-details.wxml
vendored
Normal file
|
|
@ -0,0 +1 @@
|
|||
<view class="content" style="background-image:url('/static/details_bg.png')"><view class="" style="width:40rpx;height:40rpx;position:fixed;top:118.06rpx;left:30.56rpx" bindtap="{{b}}"><image src="{{a}}" style="width:14.58rpx;height:27.08rpx" mode=""></image></view><view class="" style="width:550rpx;height:93.06rpx;margin-top:225.69rpx;display:flex;align-items:center;justify-content:center;background-image:url('/static/title_bg.png');background-size:cover;background-repeat:no-repeat;background-position:center"><text style="font-size:23.61rpx;color:#6E5B51">坂本日常 吧唧</text></view><view class="" style="width:550rpx;display:flex;flex-direction:row;justify-content:space-between;margin-top:31.94rpx"><image src="{{c}}" style="width:111.81rpx;height:81.94rpx" mode=""></image><image src="{{d}}" style="width:111.81rpx;height:81.94rpx" bindtap="{{e}}" mode=""></image><image src="{{f}}" style="width:111.81rpx;height:81.94rpx" mode=""></image></view><view class="" style="width:100%;height:1118.75rpx;margin-top:76.39rpx;display:flex;flex-direction:column;background-image:url('/static/goods_bg.png');background-size:cover;background-repeat:no-repeat;background-position:center"><view class="" style="width:100%;height:448.61rpx;margin-top:54.86rpx"><special-banner wx:if="{{g}}" u-i="65d16733-0" bind:__l="__l" u-p="{{g}}"></special-banner></view><view class="" style="margin:120rpx auto 0;width:513.89rpx;height:51.39rpx;position:relative;display:flex;align-items:center;justify-content:center"><image src="{{h}}" style="width:513.89rpx;height:51.39rpx;position:absolute"></image><text style="position:absolute;font-size:20.83rpx;color:#8C8574">运费10元 满100包邮 3-5个工作日发货</text></view><view class="" bindtap="{{j}}" style="margin:59.03rpx auto 0;position:relative;width:561.81rpx;height:161.11rpx;display:flex;justify-content:center"><image src="{{i}}" style="width:561.81rpx;height:161.11rpx;position:absolute" mode=""></image><view class="" style="width:150rpx;height:40rpx;position:absolute;bottom:38rpx;display:flex;align-items:center;justify-content:center"><text style="font-size:27.78rpx;color:#FFFFFF">¥20</text></view></view><image src="{{k}}" style="width:561.81rpx;height:122.92rpx;margin:0 auto 0" mode=""></image></view><uni-popup wx:if="{{o}}" class="r" u-s="{{['d']}}" u-r="detailsPop" u-i="65d16733-1" bind:__l="__l" u-p="{{o}}"><view class="" style="width:100%;height:819.44rpx;display:flex;flex-direction:column;align-items:center;background-image:url('/static/specifics_bg.png');background-size:cover;background-repeat:no-repeat;background-position:center"><view class="" style="width:688.88rpx;display:flex;flex-direction:row;justify-content:space-between;margin-top:36.11rpx;align-items:center"><view style="width:30rpx"></view><text style="font-size:31.25rpx;color:#695C4E">商品详情</text><view class="" style="width:30rpx;height:30rpx;display:flex;align-items:center;justify-content:center" bindtap="{{m}}"><image src="{{l}}" style="width:19.44rpx;height:19.44rpx" mode=""></image></view></view><image src="{{''}}" style="width:447.92rpx;height:447.92rpx;background-color:white;margin-top:85.42rpx" mode=""></image><text style="font-size:25rpx;color:#695C4E;width:100%;margin-left:38.19rpx;margin-top:81.94rpx">品牌:</text><text style="font-size:25rpx;color:#695C4E;width:100%;margin-left:38.19rpx;margin-top:19.44rpx">尺寸:直径约56mm</text></view></uni-popup><uni-popup wx:if="{{v}}" class="r" u-s="{{['d']}}" u-r="payPop" u-i="65d16733-2" bind:__l="__l" u-p="{{v}}"><view class="" style="width:100%;height:1002.78rpx;display:flex;flex-direction:column;align-items:center;background-image:url('/static/pay_pop_bg.png');background-size:cover;background-repeat:no-repeat;background-position:center"><view class="" style="width:688.88rpx;display:flex;flex-direction:row;justify-content:space-between;margin-top:36.11rpx;align-items:center"><view style="width:30rpx"></view><text style="font-size:22.22rpx;color:#8C8574">本商品不可退换 未成年人请谨慎购买</text><view class="" style="width:30rpx;height:30rpx;display:flex;align-items:center;justify-content:center" bindtap="{{q}}"><image src="{{p}}" style="width:19.44rpx;height:19.44rpx" mode=""></image></view></view><view class="" style="width:690.28rpx;height:62.5rpx;background-color:#FFFFFF;border-radius:16rpx;margin-top:22.92rpx;display:flex;align-items:center;position:relative"><image src="{{r}}" style="width:19.44rpx;height:22.92rpx;position:absolute;left:19.44rpx" mode=""></image><text style="font-size:22.22rpx;color:#6E5B51;left:52.08rpx;position:absolute">某某 河南省河南省河南省河南省</text><image src="{{s}}" style="width:13.19rpx;height:22.92rpx;position:absolute;right:26.39rpx" mode=""></image></view></view></uni-popup></view>
|
||||
35
unpackage/dist/dev/mp-weixin/pages/home/product-details.wxss
vendored
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
"use strict";
|
||||
const common_assets = require("../../common/assets.js");
|
||||
const common_vendor = require("../../common/vendor.js");
|
||||
const _sfc_main = {
|
||||
data() {
|
||||
|
|
@ -7,7 +8,12 @@ const _sfc_main = {
|
|||
methods: {}
|
||||
};
|
||||
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
||||
return {};
|
||||
return {
|
||||
a: common_assets._imports_0$2,
|
||||
b: common_assets._imports_1$2,
|
||||
c: common_assets._imports_2$2,
|
||||
d: common_assets._imports_3
|
||||
};
|
||||
}
|
||||
const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
|
||||
wx.createPage(MiniProgramPage);
|
||||
|
|
|
|||
|
|
@ -1 +1 @@
|
|||
<view></view>
|
||||
<view class="content" style="background-image:url('/static/bags_bg.png')"><view class="" style="width:100%;height:138.19rpx;margin-top:195.14rpx;position:relative"><image src="{{''}}" style="width:137.5rpx;height:137.5rpx;background-color:#FFFFFF;border:2rpx solid #F5D677;border-radius:50%;margin-left:29.17rpx;position:absolute" mode=""></image><view class="" style="display:flex;flex-direction:row;position:absolute;align-items:center;left:186.81rpx;top:35.42rpx"><text style="font-size:29.17rpx;color:#6E5B51">坂本日常</text><image src="{{a}}" style="width:22.92rpx;height:22.92rpx;margin-left:13.16rpx" mode=""></image></view><text style="position:absolute;left:186.81rpx;bottom:35.42rpx;font-size:19.42rpx;color:#8C8574">ID:3232321323</text></view><view class="" style="width:689.58rpx;height:161.81rpx;background-color:#FFFFFF;margin:48.61rpx auto 0;border-radius:20rpx;display:flex;flex-direction:row;align-items:center;justify-content:space-around"><image src="{{b}}" style="width:100.69rpx;height:98.61rpx" mode=""></image><view style="width:0.69rpx;height:98.61rpx;background-color:#6E5B51"></view><image src="{{c}}" style="width:100.69rpx;height:98.61rpx" mode=""></image><view style="width:0.69rpx;height:98.61rpx;background-color:#6E5B51"></view><image src="{{d}}" style="width:100.69rpx;height:98.61rpx" mode=""></image></view></view>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
/**
|
||||
* 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件
|
||||
*/
|
||||
/* 颜色变量 */
|
||||
/* 行为相关颜色 */
|
||||
/* 文字基本颜色 */
|
||||
/* 背景颜色 */
|
||||
/* 边框颜色 */
|
||||
/* 尺寸变量 */
|
||||
/* 文字尺寸 */
|
||||
/* 图片尺寸 */
|
||||
/* Border Radius */
|
||||
/* 水平间距 */
|
||||
/* 垂直间距 */
|
||||
/* 透明度 */
|
||||
/* 文章场景相关 */
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
}
|
||||
BIN
unpackage/dist/dev/mp-weixin/static/bags.png
vendored
Normal file
|
After Width: | Height: | Size: 32 KiB |
BIN
unpackage/dist/dev/mp-weixin/static/details.png
vendored
Normal file
|
After Width: | Height: | Size: 39 KiB |
BIN
unpackage/dist/dev/mp-weixin/static/details_bg.png
vendored
Normal file
|
After Width: | Height: | Size: 2.2 MiB |
BIN
unpackage/dist/dev/mp-weixin/static/fonts/JiangChengYuanTi-300W.ttf
vendored
Normal file
BIN
unpackage/dist/dev/mp-weixin/static/fonts/JiangChengYuanTi-400W.ttf
vendored
Normal file
BIN
unpackage/dist/dev/mp-weixin/static/fonts/JiangChengYuanTi-600W.ttf
vendored
Normal file
BIN
unpackage/dist/dev/mp-weixin/static/fonts/JiangChengYuanTi-700W.ttf
vendored
Normal file
BIN
unpackage/dist/dev/mp-weixin/static/goods_bg.png
vendored
Normal file
|
After Width: | Height: | Size: 1.6 MiB |
BIN
unpackage/dist/dev/mp-weixin/static/ic_address.png
vendored
Normal file
|
After Width: | Height: | Size: 6.6 KiB |
BIN
unpackage/dist/dev/mp-weixin/static/ic_back.png
vendored
Normal file
|
After Width: | Height: | Size: 2.2 KiB |
BIN
unpackage/dist/dev/mp-weixin/static/ic_close.png
vendored
Normal file
|
After Width: | Height: | Size: 4.1 KiB |
BIN
unpackage/dist/dev/mp-weixin/static/ic_coupon.png
vendored
Normal file
|
After Width: | Height: | Size: 44 KiB |