详情.我的

This commit is contained in:
18631081161 2025-07-20 22:47:20 +08:00
parent 118a6c7af8
commit 633c4bb59f
120 changed files with 4298 additions and 132 deletions

70
App.vue
View File

@ -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

Binary file not shown.

View 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>

View File

@ -27,6 +27,13 @@
"navigationStyle": "custom",
"navigationBarTitleText": ""
}
},
{
"path": "pages/home/product-details",
"style": {
"navigationStyle": "custom",
"navigationBarTitleText": ""
}
}
],
"globalStyle": {

View File

@ -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>

View File

@ -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>

View 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>

View File

@ -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

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

BIN
static/details.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

BIN
static/details_bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 MiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

BIN
static/goods_bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

BIN
static/ic_address.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
static/ic_back.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

BIN
static/ic_close.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

BIN
static/ic_coupon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

BIN
static/ic_join.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 101 KiB

BIN
static/ic_kf.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

BIN
static/ic_modify.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
static/ic_order.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

BIN
static/ic_pay.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 254 KiB

BIN
static/ic_prompt.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

BIN
static/ic_right_arrow.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
static/pay_pop_bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 472 KiB

BIN
static/share.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

BIN
static/specifics_bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 359 KiB

BIN
static/title_bg.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

View File

@ -0,0 +1,100 @@
## 1.9.102025-07-18
- 修复 nvue 下弹窗样式错乱的问题 ,更新依赖 uni-transition 组件
- 更新 示例取消 borderRadius 属性 ,如需内容圆角,用户应该直接在内容插槽中实现
## 1.9.92025-06-11
- 修复 uni-popup-dialog 中 setVal 方法报错的问题
- 修复 uni-popup-dialog 数据双向绑定问题。
## 1.9.82025-04-16
- 修复 更新组件示例 ,解决更新数据或保存项目导致弹窗消失的问题
## 1.9.72025-04-14
- 修复 uni-popup-dialog 弹出框在vue3中双向绑定问题
## 1.9.62025-01-08
- 修复 示例中过期图片地址
## 1.9.52024-10-15
- 修复 微信小程序中的getSystemInfo警告
## 1.9.22024-09-21
- 修复 uni-popup在android上的重复点击弹出位置不正确的bug
## 1.9.12024-04-02
- 修复 uni-popup-dialog vue3下使用value无法进行绑定的bug(双向绑定兼容旧写法)
## 1.9.02024-03-28
- 修复 uni-popup-dialog 双向绑定时初始化逻辑修正
## 1.8.92024-03-20
- 修复 uni-popup-dialog 数据输入时修正为双向绑定
## 1.8.82024-02-20
- 修复 uni-popup 在微信小程序下出现文字向上闪动的bug
## 1.8.72024-02-02
- 新增 uni-popup-dialog 新增属性focusinput模式下是否自动自动聚焦
## 1.8.62024-01-30
- 新增 uni-popup-dialog 新增属性maxLength:限制输入框字数
## 1.8.52024-01-26
- 新增 uni-popup-dialog 新增属性showClose:控制关闭按钮的显示
## 1.8.42023-11-15
- 新增 uni-popup 支持uni-app-x 注意暂时仅支持 `maskClick` `@open` `@close`
## 1.8.32023-04-17
- 修复 uni-popup 重复打开时的 bug
## 1.8.22023-02-02
- uni-popup-dialog 组件新增 inputType 属性
## 1.8.12022-12-01
- 修复 nvue 下 v-show 报错
## 1.8.02022-11-29
- 优化 主题样式
## 1.7.92022-04-02
- 修复 弹出层内部无法滚动的bug
## 1.7.82022-03-28
- 修复 小程序中高度错误的bug
## 1.7.72022-03-17
- 修复 快速调用open出现问题的Bug
## 1.7.62022-02-14
- 修复 safeArea 属性不能设置为false的bug
## 1.7.52022-01-19
- 修复 isMaskClick 失效的bug
## 1.7.42022-01-19
- 新增 cancelText \ confirmText 属性 ,可自定义文本
- 新增 maskBackgroundColor 属性 ,可以修改蒙版颜色
- 优化 maskClick属性 更新为 isMaskClick ,解决微信小程序警告的问题
## 1.7.32022-01-13
- 修复 设置 safeArea 属性不生效的bug
## 1.7.22021-11-26
- 优化 组件示例
## 1.7.12021-11-26
- 修复 vuedoc 文字错误
## 1.7.02021-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.22021-08-24
- 新增 支持国际化
## 1.6.12021-07-30
- 优化 vue3下事件警告的问题
## 1.6.02021-07-13
- 组件兼容 vue3如何创建vue3项目详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.5.02021-06-23
- 新增 mask-click 遮罩层点击事件
## 1.4.52021-06-22
- 修复 nvue 平台中间弹出后点击内容再点击遮罩无法关闭的Bug
## 1.4.42021-06-18
- 修复 H5平台中间弹出后点击内容再点击遮罩无法关闭的Bug
## 1.4.32021-06-08
- 修复 错误的 watch 字段
- 修复 safeArea 属性不生效的问题
- 修复 点击内容再点击遮罩无法关闭的Bug
## 1.4.22021-05-12
- 新增 组件示例地址
## 1.4.12021-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.92021-02-05
- 优化 组件引用关系通过uni_modules引用组件
## 1.2.82021-02-05
- 调整为uni_modules目录规范
## 1.2.72021-02-05
- 调整为uni_modules目录规范
- 新增 支持 PC 端
- 新增 uni-popup-message 、uni-popup-dialog扩展组件支持 PC 端

View 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

View File

@ -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>

View File

@ -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>

View File

@ -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>

View 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"
}

View 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
}

View File

@ -0,0 +1,7 @@
{
"uni-popup.cancel": "取消",
"uni-popup.ok": "确定",
"uni-popup.placeholder": "请输入",
"uni-popup.title": "提示",
"uni-popup.shareTitle": "分享到"
}

View File

@ -0,0 +1,7 @@
{
"uni-popup.cancel": "取消",
"uni-popup.ok": "確定",
"uni-popup.placeholder": "請輸入",
"uni-popup.title": "提示",
"uni-popup.shareTitle": "分享到"
}

View 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

View 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;
},
}
}

View 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>

View 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: bottomcenter
// 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>

View 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": "√"
}
}
}
}
}
}

View File

@ -0,0 +1,17 @@
## Popup 弹出层
> **组件名uni-popup**
> 代码块: `uPopup`
> 关联组件:`uni-transition`
弹出层组件,在应用中弹出一个消息提示窗口、提示框等
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-popup)
#### 如使用过程中有任何问题或者您对uni-ui有一些好的建议欢迎加入 uni-ui 交流群871950839

View File

@ -0,0 +1,31 @@
## 1.3.62025-07-18
- 修复 nvue 页面,样式错误问题
## 1.3.52025-06-11
- 修复 第一次执行不显示动画的问题
## 1.3.42025-04-16
- 修复 页面数据更新到底动画复原的问题
- 修复 示例页面打开报错的问题
## 1.3.32024-04-23
- 修复 当元素会受变量影响自动隐藏的bug
## 1.3.22023-05-04
- 修复 NVUE 平台报错的问题
## 1.3.12021-11-23
- 修复 init 方法初始化问题
## 1.3.02021-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.12021-09-27
- 修复 init 方法不生效的 Bug
## 1.2.02021-07-30
- 组件兼容 vue3如何创建 vue3 项目,详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
## 1.1.12021-05-12
- 新增 示例地址
- 修复 示例项目缺少组件的 Bug
## 1.1.02021-04-22
- 新增 通过方法自定义动画
- 新增 custom-class 非 NVUE 平台支持自定义 class 定制样式
- 优化 动画触发逻辑,使动画更流畅
- 优化 支持单独的动画类型
- 优化 文档示例
## 1.0.22021-02-05
- 调整为 uni_modules 目录规范

View File

@ -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)
}

View File

@ -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>

View 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": "-"
}
}
}
}
}
}

View File

@ -0,0 +1,11 @@
## Transition 过渡动画
> **组件名uni-transition**
> 代码块: `uTransition`
元素过渡动画
### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-transition)
#### 如使用过程中有任何问题或者您对uni-ui有一些好的建议欢迎加入 uni-ui 交流群871950839

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View 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;;;"}

View File

@ -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;;;;;;;;;;;;;;;;;;;;;"}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View 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;"}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -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() {

View File

@ -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",

View File

@ -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;}

View File

@ -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

View File

@ -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

View 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

View File

@ -0,0 +1,4 @@
{
"component": true,
"usingComponents": {}
}

View 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>

View 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;
}

View File

@ -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]]);

View File

@ -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>

View File

@ -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) => {

View File

@ -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>

View 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

View File

@ -0,0 +1,8 @@
{
"navigationStyle": "custom",
"navigationBarTitleText": "",
"usingComponents": {
"special-banner": "../../components/specialBanner",
"uni-popup": "../../uni_modules/uni-popup/components/uni-popup/uni-popup"
}
}

View 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>

View 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;
}

View File

@ -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);

View File

@ -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>

View 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;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 MiB

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.2 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 44 KiB

Some files were not shown because too many files have changed in this diff Show More