zhangkai/dyqc_hdapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

修改分享

Browse Source
This commit is contained in:
张凯 2025-05-13 14:58:32 +08:00
parent 7a1962f746
commit b5602f098c
1 changed files with 1589 additions and 1540 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

175
pages/center/detail.vue
View File

@ -6,8 +6,8 @@
</view> </view>
<view class="box flex justify-start flex-column align-items" :class="overlay ? 'no-scroll' : ''"> <view class="box flex justify-start flex-column align-items" :class="overlay ? 'no-scroll' : ''">
<view class="swiper"> <view class="swiper">
<u-swiper :list="detail.images" indicator indicatorActiveColor="#323232" indicatorMode="dot" :indicator-style="{ bottom: '60rpx',zIndex: 999}" <u-swiper :list="detail.images" indicator indicatorActiveColor="#323232" indicatorMode="dot"
:height="height_sw" circular></u-swiper> :indicator-style="{ bottom: '60rpx', zIndex: 999 }" :height="height_sw" circular></u-swiper>
</view> </view>
<view class="con-center w-100 flex justify-center flex-column align-items flex-start"> <view class="con-center w-100 flex justify-center flex-column align-items flex-start">
@ -32,12 +32,16 @@
<span class="first-image flex align-items" style="margin-top: 25rpx;width: 100%;"> <span class="first-image flex align-items" style="margin-top: 25rpx;width: 100%;">
<image :src="detail.user.avatar" mode="" class="icon-size" style="width: 36rpx;height: 36rpx;"></image> <image :src="detail.user.avatar" mode="" class="icon-size" style="width: 36rpx;height: 36rpx;">
</image>
<span style="color: #9C9C9C ;width: 32%;">{{ detail.user.nickname }}</span> <span style="color: #9C9C9C ;width: 32%;">{{ detail.user.nickname }}</span>
<span class="flex justify-center align-items xieyi"> <span class="flex justify-center align-items xieyi">
<image src="/static/detail/baohu.png" mode="" style="width: 28rpx;height: 28rpx;margin-right: 0;" ></image> <image src="/static/detail/baohu.png" mode=""
<span class="white-space" style="width: 90rpx;text-align: center;">{{ detail.refund_info.title }}</span> style="width: 28rpx;height: 28rpx;margin-right: 0;"></image>
<image src="/static/detail/zidong.png" mode="" style="width: 20rpx;height: 20rpx;margin-right: 0;" ></image> <span class="white-space" style="width: 90rpx;text-align: center;">{{
detail.refund_info.title }}</span>
<image src="/static/detail/zidong.png" mode=""
style="width: 20rpx;height: 20rpx;margin-right: 0;"></image>
</span> </span>
</span> </span>
@ -50,32 +54,24 @@
@click.stop="toMap(detail.latitude, detail.longitude, detail.address_detail)"> @click.stop="toMap(detail.latitude, detail.longitude, detail.address_detail)">
<image src="/static/center/address.png" mode="" class="icon-size"></image> <image src="/static/center/address.png" mode="" class="icon-size"></image>
<span>{{ detail.address_detail }}</span> <span>{{ detail.address_detail }}</span>
<image src="/static/detail/daohang.png" class="icon-size" style="width: 50rpx; height: 50rpx;"></image> <image src="/static/detail/daohang.png" class="icon-size" style="width: 50rpx; height: 50rpx;">
</image>
</span> </span>
<span class="line"></span> <span class="line"></span>
<view class="second-box flex align-items space-between"> <view class="second-box flex align-items space-between">
<view class="flex align-items"> <view class="flex align-items">
<u-avatar-group :urls="detail.join_info.users" <u-avatar-group :urls="detail.join_info.users" keyName="avatar" size="30" gap="0.3"
keyName="avatar" size="30" gap="0.3" :maxCount="3"></u-avatar-group> :maxCount="3"></u-avatar-group>
<image <image src="/static/index/dian.png"
src="/static/index/dian.png"
:class="detail.join_info.users && detail.join_info.users.length > 0 ? '' : 'smalld'" :class="detail.join_info.users && detail.join_info.users.length > 0 ? '' : 'smalld'"
style="width: 60rpx;height: 60rpx;margin-left:-20rpx;z-index: 1;" style="width: 60rpx;height: 60rpx;margin-left:-20rpx;z-index: 1;"></image>
></image>
</view> </view>
<span class="number">{{detail.join_info.people_number}}/{{detail.join_info.stock >= 10000 ? '9999+' : detail.join_info.stock}} <span class="number">{{ detail.join_info.people_number }}/{{ detail.join_info.stock >= 10000 ?
'9999+' : detail.join_info.stock}}
人数</span> 人数</span>
<view class="value_slide"> <view class="value_slide">
<u-slider <u-slider v-model="value_slide" showValue min="0" max="100" blockSize="12"
v-model="value_slide" inactiveColor="#EBEBEB" activeColor="#BBFC5B" disabled></u-slider>
showValue
min="0"
max="100"
blockSize="12"
inactiveColor="#EBEBEB"
activeColor="#BBFC5B"
disabled
></u-slider>
</view> </view>
</view> </view>
</view> </view>
@ -92,7 +88,8 @@
<view class="v_html"> <view class="v_html">
<rich-text :nodes="detail.content"></rich-text> <rich-text :nodes="detail.content"></rich-text>
</view> </view>
<image mode="widthFix" class="imgs" v-for="(item,index) in detail.images" :key="index" :src="item"></image> <image mode="widthFix" class="imgs" v-for="(item, index) in detail.images" :key="index" :src="item">
</image>
</view> </view>
</view> </view>
@ -152,8 +149,8 @@
</u-popup> </u-popup>
<!-- 购买弹窗 --> <!-- 购买弹窗 -->
<u-popup :show="buyShow" mode="center" :round="10" :zIndex="99999" :custom-style="popupStyle" @close="buyClose" <u-popup :show="buyShow" mode="center" :round="10" :zIndex="99999" :custom-style="popupStyle"
@open="buyOpen" :safeAreaInsetBottom="false" :closeable="true"> @close="buyClose" @open="buyOpen" :safeAreaInsetBottom="false" :closeable="true">
<view class="popupBox flex justify-start align-items flex-column"> <view class="popupBox flex justify-start align-items flex-column">
<view class="pop-header flex align-items flex-column flex-start"> <view class="pop-header flex align-items flex-column flex-start">
<span class="name white-space">{{ detail.title }}</span> <span class="name white-space">{{ detail.title }}</span>
@ -214,12 +211,13 @@
<view> <view>
<view class="c1t1">{{ formattedTitle }}</view> <view class="c1t1">{{ formattedTitle }}</view>
<view class="c2t2">￥{{ detail.price }}</view> <view class="c2t2">￥{{ detail.price }}</view>
<view class="c3t3">地址：{{ detail.address }}</view> <view class="c3t3 white-space">地址：{{ detail.address }}</view>
</view> </view>
<view style="background-color: #ffffff;border-radius: 18rpx;"> <view style="background-color: #ffffff;border-radius: 18rpx;">
<l-painter> <l-painter>
<l-painter-view css="margin:20rpx;"> <l-painter-view css="margin:20rpx;">
<l-painter-qrcode css="width: 160rpx; height: 160rpx;margin:0 auto;" :text="qrUrl"></l-painter-qrcode> <l-painter-qrcode css="width: 160rpx; height: 160rpx;margin:0 auto;"
:text="qrUrl"></l-painter-qrcode>
</l-painter-view> </l-painter-view>
</l-painter> </l-painter>
</view> </view>
@ -236,9 +234,8 @@
<span>分 享</span> <span>分 享</span>
</button> </button>
</view> </view>
<canvas <canvas canvas-id="myCanvas"
canvas-id="myCanvas" style="position: absolute;top:256rpx;left: 48rpx; width: 661rpx;height:1075rpx; visibility: hidden;z-index: 10;">
style="position: absolute;top:256rpx;left: 48rpx; width: 661rpx;height:1075rpx; visibility: hidden;">
</canvas> </canvas>
</u-overlay> </u-overlay>
@ -371,6 +368,7 @@
methods: { methods: {
capturePage() { capturePage() {
let that = this;
uni.canvasToTempFilePath({ uni.canvasToTempFilePath({
x: 0, // 起始x坐标（可选） x: 0, // 起始x坐标（可选）
y: 0, // 起始y坐标（可选） y: 0, // 起始y坐标（可选）
@ -381,7 +379,8 @@
canvasId: 'myCanvas', // Canvas组件的id canvasId: 'myCanvas', // Canvas组件的id
success: function (res) { success: function (res) {
console.log('tempFilePath:', res.tempFilePath); // 图片路径信息输出到控制台或进行其他处理 console.log('tempFilePath:', res.tempFilePath); // 图片路径信息输出到控制台或进行其他处理
this.save(res.tempFilePath) uni.previewImage({ urls: [res.tempFilePath] });
that.save(res.tempFilePath);
}, },
fail: function (err) { fail: function (err) {
console.error(err); // 输出错误信息到控制台进行调试 console.error(err); // 输出错误信息到控制台进行调试
@ -687,36 +686,47 @@
// 保存海报 // 保存海报
save(e) { save(e) {
let base64 = this.path.replace(/^data:image\/\w+;base64,/, ""); //图片替换 wx.saveImageToPhotosAlbum({
let filePath = wx.env.USER_DATA_PATH + '/qrcode.png'; filePath: e,
uni.getFileSystemManager().writeFile({ success: function(res) {
filePath: filePath, //创建一个临时文件名 wx.showToast({
data: base64, //写入的文本或二进制数据
encoding: 'base64', //写入当前文件的字符编码
success: (res) => {
uni.saveImageToPhotosAlbum({
filePath: filePath,
success: () => {
uni.showToast({
title: '保存成功', title: '保存成功',
icon: "none",
duration: 5000
}) })
}, },
fail: (err) => { fail: function(err) {
console.log(err); console.log(err, '失败')
uni.showToast({
title: '保存失败',
icon: "none",
duration: 5000
})
}
})
},
fail: (err) => {
console.log(err)
} }
}) })
// let base64 = this.path.replace(/^data:image\/\w+;base64,/, ""); //图片替换
// let filePath = wx.env.USER_DATA_PATH + '/qrcode.png';
// uni.getFileSystemManager().writeFile({
// filePath: filePath, //创建一个临时文件名
// data: base64, //写入的文本或二进制数据
// encoding: 'base64', //写入当前文件的字符编码
// success: (res) => {
// uni.saveImageToPhotosAlbum({
// filePath: filePath,
// success: () => {
// uni.showToast({
// title: '保存成功',
// icon: "none",
// duration: 5000
// })
// },
// fail: (err) => {
// console.log(err);
// uni.showToast({
// title: '保存失败',
// icon: "none",
// duration: 5000
// })
// }
// })
// },
// fail: (err) => {
// console.log(err)
// }
// })
}, },
//分享发布 //分享发布
sharePoster() { //分享图片给好友按钮的点击事件函数 sharePoster() { //分享图片给好友按钮的点击事件函数
@ -928,6 +938,7 @@
background-color: #f7f7f7; background-color: #f7f7f7;
height: 100vh; height: 100vh;
} }
.w-100 { .w-100 {
width: 100%; width: 100%;
} }
@ -995,24 +1006,28 @@
height: 118rpx; height: 118rpx;
z-index: 0; z-index: 0;
} }
.topimgs { .topimgs {
position: absolute; position: absolute;
top: -120rpx; top: -120rpx;
width: 100%; width: 100%;
z-index: 0; z-index: 0;
} }
.top_texts { .top_texts {
position: absolute; position: absolute;
top: -151rpx; top: -151rpx;
right: 68rpx; right: 68rpx;
z-index: 3; z-index: 3;
color: #ffffff; color: #ffffff;
.xiao { .xiao {
margin-left: 4rpx; margin-left: 4rpx;
font-size: 22rpx; font-size: 22rpx;
font-weight: bold; font-weight: bold;
} }
} }
.first-box { .first-box {
width: 690rpx; width: 690rpx;
background: #FFFFFF; background: #FFFFFF;
@ -1021,6 +1036,7 @@
// margin-top: 20rpx; // margin-top: 20rpx;
border-radius: 20rpx; border-radius: 20rpx;
z-index: 1; z-index: 1;
.sigh { .sigh {
width: 88rpx; width: 88rpx;
height: 40rpx; height: 40rpx;
@ -1031,6 +1047,7 @@
font-size: 24rpx; font-size: 24rpx;
color: #222222; color: #222222;
} }
.first-name { .first-name {
width: 586rpx; width: 586rpx;
height: 52rpx; height: 52rpx;
@ -1074,6 +1091,7 @@
font-size: 26rpx; font-size: 26rpx;
color: #222222; color: #222222;
} }
.xieyi { .xieyi {
background-color: #BBFC5B; background-color: #BBFC5B;
width: 156rpx; width: 156rpx;
@ -1093,6 +1111,7 @@
.smalld { .smalld {
margin-left: 0 !important; margin-left: 0 !important;
} }
.number { .number {
height: 40rpx; height: 40rpx;
font-family: Source Han Sans CN, Source Han Sans CN; font-family: Source Han Sans CN, Source Han Sans CN;
@ -1119,6 +1138,7 @@
margin-top: 20rpx; margin-top: 20rpx;
border-radius: 44rpx; border-radius: 44rpx;
margin-bottom: 150rpx; margin-bottom: 150rpx;
.third-top { .third-top {
font-family: PingFang SC, PingFang SC; font-family: PingFang SC, PingFang SC;
font-weight: bold; font-weight: bold;
@ -1130,8 +1150,10 @@
position: relative; position: relative;
z-index: 10; z-index: 10;
} }
span { span {
position: relative; position: relative;
.icons { .icons {
width: 37rpx; width: 37rpx;
height: 20rpx; height: 20rpx;
@ -1141,16 +1163,20 @@
z-index: -1; z-index: -1;
} }
} }
.third-center { .third-center {
padding: 30rpx; padding: 30rpx;
overflow: hidden; overflow: hidden;
margin: 0 auto; margin: 0 auto;
height: 100%; height: 100%;
.v_html { .v_html {
word-wrap: break-word;word-break: break-all; word-wrap: break-word;
word-break: break-all;
font-size: 26rpx; font-size: 26rpx;
line-height: 42rpx; line-height: 42rpx;
} }
.imgs { .imgs {
margin-top: 30rpx; margin-top: 30rpx;
width: 690rpx; width: 690rpx;
@ -1507,29 +1533,35 @@
// border-radius: 10px !important; // border-radius: 10px !important;
background: #FFFFFF !important; background: #FFFFFF !important;
} }
.pos { .pos {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.Poster { .Poster {
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
.posterClose { .posterClose {
position: absolute; position: absolute;
right: 8rpx; right: 8rpx;
top: 200rpx; top: 200rpx;
} }
.title_top { .title_top {
position: relative; position: relative;
margin: 0 auto; margin: 0 auto;
width: 661rpx;height:1075rpx; width: 661rpx;
height: 1075rpx;
background-image: url('https://naweigetetest2.hschool.com.cn/dyqc/fenxiang.png'); background-image: url('https://naweigetetest2.hschool.com.cn/dyqc/fenxiang.png');
background-size: 100%; background-size: 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
margin-top: 240rpx; margin-top: 240rpx;
} }
.toutop { .toutop {
position: absolute; position: absolute;
top: 120rpx; top: 120rpx;
@ -1537,12 +1569,14 @@
display: flex; display: flex;
align-items: center; align-items: center;
width: 80%; width: 80%;
.toutu { .toutu {
width: 60rpx; width: 60rpx;
height: 60rpx; height: 60rpx;
border-radius: 134rpx 134rpx 134rpx 134rpx; border-radius: 134rpx 134rpx 134rpx 134rpx;
border: 2rpx solid #FFFFFF; border: 2rpx solid #FFFFFF;
} }
.toututt { .toututt {
padding-left: 15rpx; padding-left: 15rpx;
height: 36rpx; height: 36rpx;
@ -1556,8 +1590,10 @@
text-transform: none; text-transform: none;
} }
} }
.center_con { .center_con {
padding-top: 200rpx; padding-top: 200rpx;
.cenimg { .cenimg {
width: 620rpx; width: 620rpx;
height: 620rpx; height: 620rpx;
@ -1565,15 +1601,19 @@
margin: 0 auto; margin: 0 auto;
display: block; display: block;
} }
.center_text { .center_text {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
margin-top: 30rpx; margin-top: 30rpx;
.c1t1 { .c1t1 {
color: #202020;font-size: 36rpx; color: #202020;
font-size: 36rpx;
// margin-top: 30rpx; // margin-top: 30rpx;
} }
.c2t2 { .c2t2 {
font-family: D-DIN-PRO, D-DIN-PRO; font-family: D-DIN-PRO, D-DIN-PRO;
font-weight: 900; font-weight: 900;
@ -1581,12 +1621,14 @@
color: #FF4810; color: #FF4810;
margin-top: 20rpx; margin-top: 20rpx;
} }
.c3t3 { .c3t3 {
margin-top: 20rpx; margin-top: 20rpx;
font-family: PingFang SC Regular, PingFang SC Regular; font-family: PingFang SC Regular, PingFang SC Regular;
font-weight: 400; font-weight: 400;
font-size: 26rpx; font-size: 26rpx;
color: #9C9C9C; color: #9C9C9C;
width: 340rpx;
} }
} }
} }
@ -1672,9 +1714,11 @@
<style lang="scss"> <style lang="scss">
.value_slide { .value_slide {
width: 50%; width: 50%;
::v-deep .uni-slider-handle-wrapper { ::v-deep .uni-slider-handle-wrapper {
height: 10rpx; height: 10rpx;
} }
::v-deep .uni-slider-handle { ::v-deep .uni-slider-handle {
background: url('@/static/detail/qiu.png') !important; background: url('@/static/detail/qiu.png') !important;
border-radius: 0; border-radius: 0;
@ -1684,16 +1728,20 @@
top: 14rpx; top: 14rpx;
margin-left: -18rpx !important; margin-left: -18rpx !important;
} }
::v-deep .uni-slider-value { ::v-deep .uni-slider-value {
color: #323232; color: #323232;
&::after { &::after {
content: '%'; content: '%';
} }
} }
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
.wx-slider-handle-wrapper { .wx-slider-handle-wrapper {
height: 8rpx; height: 8rpx;
} }
.wx-slider-handle { .wx-slider-handle {
background: url('@/static/detail/qiu.png') !important; background: url('@/static/detail/qiu.png') !important;
border-radius: 0; border-radius: 0;
@ -1703,12 +1751,13 @@
top: 14rpx; top: 14rpx;
margin-left: -14rpx !important; margin-left: -14rpx !important;
} }
.wx-slider-value { .wx-slider-value {
display: flex; display: flex;
width: 30rpx; width: 30rpx;
color: #323232; color: #323232;
&::after{
content: '%'; &::after { content: '%';
} }
} }
// #endif // #endif