Skip to content

P
paipai-v2

飞啊飞我的骄傲放纵-未来全栈工程师 / paipai-v2

通知 1
Star 0
Fork 0
P
paipai-v2

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 ab64a7ea 编写于 作者: 王 王闪闪T013479
浏览文件
操作

v1.2.1 优化附件下载样式、提示时机

上级 c70c6d2d
展开全部 隐藏空白更改
内联 并排
Showing with 168 addition and 76 deletion
pages/goods-detail/goods-detail.vue
浏览文件 @ ab64a7ea
......@@ -95,7 +95,13 @@
<view class="file-list">
<view class="file-btn" v-for="(file, index) in goods.multiFiles" @click="downLoadFile(file.path, index)">
<view>【点击下载】{{file.name, file.percent}}</view>
<progress v-if="file.percent != null" class="file-progress" :percent="file.percent" activeColor="red" active stroke-width="8" show-info font-size="10" active-mode="forwards" border-radius="50"/>
<!-- <progress v-if="file.percent != null" class="file-progress" :percent="file.percent" activeColor="red" active stroke-width="8" show-info font-size="10" active-mode="forwards" border-radius="50"/> -->
<view v-if="file.percent != null" class="progress">
<view class="progress-stroke">
<view class="inner" :style="'width:' + file.percent + '%;'"></view>
</view>
<view class="progress-percent">{{file.percent}}%</view>
</view>
</view>
</view>
</view>
......@@ -194,6 +200,7 @@
// 页面初始化完成实时更新数据
this.init();
})
// 重要提醒
getDetailIntroduce({
id: this.goodsId,
......@@ -318,15 +325,16 @@
}
return false
},
// auction_cycle(){
// return this.goods.auction_cycle.slice(0, -1)
// },
sendData(){
return {id: Number(this.goodsId),token: this.userInfo.user_token}
}
},
methods: {
downLoadFile(file, index){
// console.log(file)
// 跳转浏览器
// plus.runtime.openURL(getAbsoluteUrl(file));
// return
const multiFiles = this.goods.multiFiles;
if(multiFiles[index].download){
showToast('正在下载...')
......@@ -334,6 +342,8 @@
}
multiFiles[index].download = true
// #ifdef APP-PLUS
let progress = 0
multiFiles[index].percent = progress
const dTask = plus.downloader.createDownload(getAbsoluteUrl(file), {
filename: 'file://storage/emulated/0/paipaichina/download/'
}, (res, status) => {
......@@ -344,9 +354,8 @@
}, () => {
multiFiles[index].download = false
})
let progress = 0
multiFiles[index].percent = progress
dTask.addEventListener('statechanged', (res) => {
console.log(res)
var totalSize = res.totalSize
var downloadedSize = res.downloadedSize
if(totalSize > 0){
......@@ -737,9 +746,29 @@
font-size: 28rpx;
color: $pp-text-color-secondary;
}
.file-box .file-progress {
// .file-box .file-progress {
// margin: 10rpx 20rpx 0;
// }
.file-box .progress {
display: flex;
align-items: center;
margin: 10rpx 20rpx 0;
}
.file-box .progress-stroke {
height: 16rpx;
border-radius: 8rpx;
flex-grow: 1;
background: #eee;
}
.file-box .progress-stroke .inner {
height: 100%;
border-radius: 8rpx;
background: $pp-color-main;
}
.file-box .progress-percent {
margin-left: 20rpx;
font-size: 26rpx;
}
/* 竞买记录 */
.pub-title {
......
unpackage/dist/dev/app-plus/app-view.js
浏览文件 @ ab64a7ea
......@@ -8267,20 +8267,39 @@ var render = function() {
_vm._v("【点击下载】" + _vm._$g("101-" + $32, "t0-0"))
]),
_vm._$g("102-" + $32, "i")
? _c("v-uni-progress", {
staticClass: _vm._$g("102-" + $32, "sc"),
attrs: {
percent: _vm._$g("102-" + $32, "a-percent"),
activeColor: "red",
active: true,
"stroke-width": "8",
"show-info": true,
"font-size": "10",
"active-mode": "forwards",
"border-radius": "50",
_i: "102-" + $32
}
})
? _c(
"v-uni-view",
{
staticClass: _vm._$g("102-" + $32, "sc"),
attrs: { _i: "102-" + $32 }
},
[
_c(
"v-uni-view",
{
staticClass: _vm._$g("103-" + $32, "sc"),
attrs: { _i: "103-" + $32 }
},
[
_c("v-uni-view", {
staticClass: _vm._$g("104-" + $32, "sc"),
style: _vm._$g("104-" + $32, "s"),
attrs: { _i: "104-" + $32 }
})
],
1
),
_c(
"v-uni-view",
{
staticClass: _vm._$g("105-" + $32, "sc"),
attrs: { _i: "105-" + $32 }
},
[_vm._v(_vm._$g("105-" + $32, "t0-0") + "%")]
)
],
1
)
: _vm._e()
],
1
......@@ -8291,11 +8310,11 @@ var render = function() {
],
1
),
_vm._$g(103, "i")
_vm._$g(106, "i")
? [
_vm._$g(104, "i")
_vm._$g(107, "i")
? _c("pp-pay-btn", {
attrs: { _i: 104 },
attrs: { _i: 107 },
on: {
pay: function($event) {
return _vm.$handleViewEvent($event)
......@@ -8306,7 +8325,7 @@ var render = function() {
}
})
: _c("pp-pay-btn", {
attrs: { _i: 105 },
attrs: { _i: 108 },
on: {
pay: function($event) {
return _vm.$handleViewEvent($event)
......@@ -8315,56 +8334,56 @@ var render = function() {
})
]
: [
_vm._$g(107, "i")
_vm._$g(110, "i")
? _c(
"v-uni-button",
{
attrs: { type: "primary", "hover-class": "none", _i: 107 }
attrs: { type: "primary", "hover-class": "none", _i: 110 }
},
[
_vm._v("成交价:"),
_c(
"v-uni-text",
{ staticClass: _vm._$g(108, "sc"), attrs: { _i: 108 } },
{ staticClass: _vm._$g(111, "sc"), attrs: { _i: 111 } },
[_vm._v("￥")]
),
_vm._v(_vm._$g(107, "t2-0"))
_vm._v(_vm._$g(110, "t2-0"))
],
1
)
: _vm._e(),
_vm._$g(109, "i")
_vm._$g(112, "i")
? _c(
"v-uni-button",
{
attrs: { type: "primary", "hover-class": "none", _i: 109 }
attrs: { type: "primary", "hover-class": "none", _i: 112 }
},
[_vm._v("您已拍下，请保持通讯畅通")]
)
: _vm._e(),
_vm._$g(110, "i")
_vm._$g(113, "i")
? _c(
"v-uni-button",
{
attrs: { type: "primary", "hover-class": "none", _i: 110 }
attrs: { type: "primary", "hover-class": "none", _i: 113 }
},
[_vm._v("很遗憾，您未拍下")]
)
: _vm._e(),
_vm._$g(111, "i")
_vm._$g(114, "i")
? _c(
"v-uni-button",
{
attrs: { type: "primary", "hover-class": "none", _i: 111 }
attrs: { type: "primary", "hover-class": "none", _i: 114 }
},
[
_vm._v("已出价:"),
_c(
"v-uni-text",
{ staticClass: _vm._$g(112, "sc"), attrs: { _i: 112 } },
{ staticClass: _vm._$g(115, "sc"), attrs: { _i: 115 } },
[_vm._v("￥")]
),
_vm._v(_vm._$g(111, "t2-0"))
_vm._v(_vm._$g(114, "t2-0"))
],
1
)
......@@ -8372,24 +8391,24 @@ var render = function() {
],
_c("pp-popup", {
ref: "popup",
attrs: { _i: 113 },
attrs: { _i: 116 },
on: {
confirm: function($event) {
return _vm.$handleViewEvent($event)
}
}
}),
_c("pp-popup", { ref: "downloadPopup", attrs: { _i: 114 } }),
_c("pp-popup", { ref: "downloadPopup", attrs: { _i: 117 } }),
_c("pp-popup", {
ref: "payPopup",
attrs: { _i: 115 },
attrs: { _i: 118 },
on: {
confirm: function($event) {
return _vm.$handleViewEvent($event)
}
}
}),
_c("pp-loading", { attrs: { _i: 116 } })
_c("pp-loading", { attrs: { _i: 119 } })
],
2
)
......@@ -9259,7 +9278,7 @@ var ___CSS_LOADER_URL_REPLACEMENT_0___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_
var ___CSS_LOADER_URL_REPLACEMENT_1___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_1___);
var ___CSS_LOADER_URL_REPLACEMENT_2___ = ___CSS_LOADER_GET_URL_IMPORT___(___CSS_LOADER_URL_IMPORT_2___);
// Module
exports.push([module.i, "@charset \"UTF-8\";\n/**\n * 这里是uni-app内置的常用样式变量\n *\n * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量\n * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App\n *\n */\n/**\n * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能\n *\n * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件\n */\n/* 颜色变量 */\n/* 行为相关颜色 */\n/* 文字基本颜色 */\n/* 背景颜色 */\n/* 边框颜色 */\n/* 尺寸变量 */\n/* 文字尺寸 */\n/* 图片尺寸 */\n/* Border Radius */\n/* 水平间距 */\n/* 垂直间距 */\n/* 透明度 */\n/* 文章场景相关 */\n.good-detail[data-v-349d3d56] {\n padding-bottom: 88rpx;\n}\n.back-box[data-v-349d3d56] {\n margin-top: 18rpx;\n line-height: 45rpx;\n font-size: 28rpx;\n color: #fff;\n border: 1rpx solid #df1616;\n}\n.back-box .back-text[data-v-349d3d56] {\n display: inline-block;\n padding-left: 20rpx;\n padding-right: 20rpx;\n background: #df1616;\n color: #fff;\n}\n.back-box .back-time[data-v-349d3d56] {\n display: inline-block;\n padding-left: 20rpx;\n padding-right: 20rpx;\n color: #df1616;\n}\n/* 顶部商品图 */\n.banner-box[data-v-349d3d56] {\n position: relative;\n}\n.banner[data-v-349d3d56] {\n height: 684rpx;\n}\n.banner-image[data-v-349d3d56] {\n width: 100%;\n height: 684rpx;\n}\n.banner-box.chengjiao[data-v-349d3d56]:after,\n.banner-box.yliupai[data-v-349d3d56]:after,\n.banner-box.yhuishou[data-v-349d3d56]:after {\n position: absolute;\n right: 12rpx;\n bottom: 120rpx;\n display: block;\n content: '';\n width: 126rpx;\n height: 104rpx;\n background-size: 100% 100%;\n background-repeat: no-repeat;\n z-index: 1;\n}\n.banner-box.chengjiao[data-v-349d3d56]:after {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_0___ + ");\n}\n.banner-box.yliupai[data-v-349d3d56]:after {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_1___ + ");\n}\n.banner-box.yhuishou[data-v-349d3d56]:after {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_2___ + ");\n}\n.banner-box.big-banner[data-v-349d3d56] {\n position: fixed;\n background: #000;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 10;\n}\n.banner-box.big-banner .banner[data-v-349d3d56] {\n height: 100%;\n}\n.banner-box.big-banner .banner-image[data-v-349d3d56] {\n height: 100%;\n}\n/* 底部button */\nuni-button[type=primary][data-v-349d3d56] {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n line-height: 80rpx;\n background-color: #fe5341;\n border-radius: 0;\n font-size: 30rpx;\n}\n/* 提醒，相关附件 */\n.tip-box[data-v-349d3d56], .file-box[data-v-349d3d56] {\n padding-top: 30rpx;\n padding-bottom: 30rpx;\n}\n.tip-box .head[data-v-349d3d56],\n.file-box .head[data-v-349d3d56] {\n line-height: 1;\n padding-left: 20rpx;\n border-left: 1rpx solid #fe5341;\n font-size: 28rpx;\n font-weight: bold;\n color: #fe5341;\n}\n.file-box .file-list[data-v-349d3d56] {\n line-height: 1.4;\n padding: 20rpx;\n font-size: 28rpx;\n color: #666;\n}\n.file-box .file-progress[data-v-349d3d56] {\n margin: 10rpx 20rpx 0;\n}\n/* 竞买记录 */\n.pub-title[data-v-349d3d56] {\n position: relative;\n line-height: 46rpx;\n padding-top: 20rpx;\n padding-bottom: 20rpx;\n font-size: 28rpx;\n border-bottom: 1px solid #efefef;\n}\n.pub-title .arrow-right[data-v-349d3d56] {\n position: absolute;\n right: 0;\n vertical-align: middle;\n color: #ccc;\n font-size: 20px;\n}\n.pub-title .num[data-v-349d3d56] {\n color: #df1616;\n}\n.pub-title .desc[data-v-349d3d56] {\n font-size: 22rpx;\n color: #df1616;\n text-transform: uppercase;\n}\n.last[data-v-349d3d56] {\n border-bottom: none !important;\n}\n.buy-record[data-v-349d3d56] {\n margin-bottom: 26rpx;\n}\n/* 拍品信息 */\n.good-info-box[data-v-349d3d56] {\n position: relative;\n margin-top: -108rpx;\n}\n.good-info[data-v-349d3d56] {\n position: relative;\n display: -webkit-box;\n display: -webkit-flex;\n display: flex;\n -webkit-flex-wrap: wrap;\n flex-wrap: wrap;\n line-height: 60rpx;\n padding-top: 20rpx;\n padding-bottom: 20rpx;\n border-bottom: 1rpx solid #efefef;\n font-size: 26rpx;\n}\n.good-info .item[data-v-349d3d56] {\n width: 100%;\n}\n.good-name[data-v-349d3d56] {\n padding-top: 40rpx;\n padding-bottom: 20rpx;\n font-size: 38rpx;\n font-weight: bold;\n}\n.good-info .name[data-v-349d3d56] {\n margin-right: 16rpx;\n color: #999;\n}\n.good-info .price[data-v-349d3d56] {\n font-size: 39rpx;\n color: #df1616;\n}\n.good-info .pay-succ[data-v-349d3d56] {\n font-size: 26rpx;\n color: #df1616;\n}\n.sign[data-v-349d3d56] {\n font-size: 20rpx;\n color: #fff;\n}\n.good-info .sign[data-v-349d3d56] {\n color: #df1616;\n}\n.subscribe[data-v-349d3d56] {\n position: absolute;\n right: 10rpx;\n top: 16rpx;\n}\n.subscribe .icon[data-v-349d3d56] {\n width: 29rpx;\n height: 27rpx;\n margin-right: 10rpx;\n vertical-align: middle;\n}\n.subscribe .text[data-v-349d3d56] {\n vertical-align: middle;\n}\n.good-info-item[data-v-349d3d56] {\n width: 50%;\n}\n", ""]);
exports.push([module.i, "@charset \"UTF-8\";\n/**\n * 这里是uni-app内置的常用样式变量\n *\n * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量\n * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App\n *\n */\n/**\n * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能\n *\n * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件\n */\n/* 颜色变量 */\n/* 行为相关颜色 */\n/* 文字基本颜色 */\n/* 背景颜色 */\n/* 边框颜色 */\n/* 尺寸变量 */\n/* 文字尺寸 */\n/* 图片尺寸 */\n/* Border Radius */\n/* 水平间距 */\n/* 垂直间距 */\n/* 透明度 */\n/* 文章场景相关 */\n.good-detail[data-v-349d3d56] {\n padding-bottom: 88rpx;\n}\n.back-box[data-v-349d3d56] {\n margin-top: 18rpx;\n line-height: 45rpx;\n font-size: 28rpx;\n color: #fff;\n border: 1rpx solid #df1616;\n}\n.back-box .back-text[data-v-349d3d56] {\n display: inline-block;\n padding-left: 20rpx;\n padding-right: 20rpx;\n background: #df1616;\n color: #fff;\n}\n.back-box .back-time[data-v-349d3d56] {\n display: inline-block;\n padding-left: 20rpx;\n padding-right: 20rpx;\n color: #df1616;\n}\n/* 顶部商品图 */\n.banner-box[data-v-349d3d56] {\n position: relative;\n}\n.banner[data-v-349d3d56] {\n height: 684rpx;\n}\n.banner-image[data-v-349d3d56] {\n width: 100%;\n height: 684rpx;\n}\n.banner-box.chengjiao[data-v-349d3d56]:after,\n.banner-box.yliupai[data-v-349d3d56]:after,\n.banner-box.yhuishou[data-v-349d3d56]:after {\n position: absolute;\n right: 12rpx;\n bottom: 120rpx;\n display: block;\n content: '';\n width: 126rpx;\n height: 104rpx;\n background-size: 100% 100%;\n background-repeat: no-repeat;\n z-index: 1;\n}\n.banner-box.chengjiao[data-v-349d3d56]:after {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_0___ + ");\n}\n.banner-box.yliupai[data-v-349d3d56]:after {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_1___ + ");\n}\n.banner-box.yhuishou[data-v-349d3d56]:after {\n background-image: url(" + ___CSS_LOADER_URL_REPLACEMENT_2___ + ");\n}\n.banner-box.big-banner[data-v-349d3d56] {\n position: fixed;\n background: #000;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n z-index: 10;\n}\n.banner-box.big-banner .banner[data-v-349d3d56] {\n height: 100%;\n}\n.banner-box.big-banner .banner-image[data-v-349d3d56] {\n height: 100%;\n}\n/* 底部button */\nuni-button[type=primary][data-v-349d3d56] {\n position: fixed;\n bottom: 0;\n left: 0;\n right: 0;\n line-height: 80rpx;\n background-color: #fe5341;\n border-radius: 0;\n font-size: 30rpx;\n}\n/* 提醒，相关附件 */\n.tip-box[data-v-349d3d56], .file-box[data-v-349d3d56] {\n padding-top: 30rpx;\n padding-bottom: 30rpx;\n}\n.tip-box .head[data-v-349d3d56],\n.file-box .head[data-v-349d3d56] {\n line-height: 1;\n padding-left: 20rpx;\n border-left: 1rpx solid #fe5341;\n font-size: 28rpx;\n font-weight: bold;\n color: #fe5341;\n}\n.file-box .file-list[data-v-349d3d56] {\n line-height: 1.4;\n padding: 20rpx;\n font-size: 28rpx;\n color: #666;\n}\n.file-box .progress[data-v-349d3d56] {\n display: -webkit-box;\n display: -webkit-flex;\n display: flex;\n -webkit-box-align: center;\n -webkit-align-items: center;\n align-items: center;\n margin: 10rpx 20rpx 0;\n}\n.file-box .progress-stroke[data-v-349d3d56] {\n height: 16rpx;\n border-radius: 8rpx;\n -webkit-box-flex: 1;\n -webkit-flex-grow: 1;\n flex-grow: 1;\n background: #eee;\n}\n.file-box .progress-stroke .inner[data-v-349d3d56] {\n height: 100%;\n border-radius: 8rpx;\n background: #fe5341;\n}\n.file-box .progress-percent[data-v-349d3d56] {\n margin-left: 20rpx;\n font-size: 26rpx;\n}\n/* 竞买记录 */\n.pub-title[data-v-349d3d56] {\n position: relative;\n line-height: 46rpx;\n padding-top: 20rpx;\n padding-bottom: 20rpx;\n font-size: 28rpx;\n border-bottom: 1px solid #efefef;\n}\n.pub-title .arrow-right[data-v-349d3d56] {\n position: absolute;\n right: 0;\n vertical-align: middle;\n color: #ccc;\n font-size: 20px;\n}\n.pub-title .num[data-v-349d3d56] {\n color: #df1616;\n}\n.pub-title .desc[data-v-349d3d56] {\n font-size: 22rpx;\n color: #df1616;\n text-transform: uppercase;\n}\n.last[data-v-349d3d56] {\n border-bottom: none !important;\n}\n.buy-record[data-v-349d3d56] {\n margin-bottom: 26rpx;\n}\n/* 拍品信息 */\n.good-info-box[data-v-349d3d56] {\n position: relative;\n margin-top: -108rpx;\n}\n.good-info[data-v-349d3d56] {\n position: relative;\n display: -webkit-box;\n display: -webkit-flex;\n display: flex;\n -webkit-flex-wrap: wrap;\n flex-wrap: wrap;\n line-height: 60rpx;\n padding-top: 20rpx;\n padding-bottom: 20rpx;\n border-bottom: 1rpx solid #efefef;\n font-size: 26rpx;\n}\n.good-info .item[data-v-349d3d56] {\n width: 100%;\n}\n.good-name[data-v-349d3d56] {\n padding-top: 40rpx;\n padding-bottom: 20rpx;\n font-size: 38rpx;\n font-weight: bold;\n}\n.good-info .name[data-v-349d3d56] {\n margin-right: 16rpx;\n color: #999;\n}\n.good-info .price[data-v-349d3d56] {\n font-size: 39rpx;\n color: #df1616;\n}\n.good-info .pay-succ[data-v-349d3d56] {\n font-size: 26rpx;\n color: #df1616;\n}\n.sign[data-v-349d3d56] {\n font-size: 20rpx;\n color: #fff;\n}\n.good-info .sign[data-v-349d3d56] {\n color: #df1616;\n}\n.subscribe[data-v-349d3d56] {\n position: absolute;\n right: 10rpx;\n top: 16rpx;\n}\n.subscribe .icon[data-v-349d3d56] {\n width: 29rpx;\n height: 27rpx;\n margin-right: 10rpx;\n vertical-align: middle;\n}\n.subscribe .text[data-v-349d3d56] {\n vertical-align: middle;\n}\n.good-info-item[data-v-349d3d56] {\n width: 50%;\n}\n", ""]);
// Exports
module.exports = exports;
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或