Feat：分享接口对接&&换一换接口对接
This commit is contained in:
modendeveloper
@@ -32,11 +32,20 @@
|
||||
>
|
||||
<view v-if="items.length > 0" class="v12-d-grid-columns-2 v12-gap-10">
|
||||
<view v-for="(item, index) in items" :key="index" class="store-card" @click="toStore(item.hotelId)">
|
||||
<view>
|
||||
<view class="cover-box">
|
||||
<image class="town-cover" :src="item.cover" mode="aspectFit|aspectFill|widthFix"></image>
|
||||
<view class="name-box">
|
||||
<image
|
||||
:src="webUrl + '/home/icon-location.png'"
|
||||
class="icon"
|
||||
/>
|
||||
<view class="one-t">
|
||||
{{ item.cityName }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="v12-pa-2 card-bottom">
|
||||
<view class="v12-dark-text v12-font-bold v12-font-30 v12-py-1 more-t">{{ item.hotelName }}</view>
|
||||
<view class="v12-dark-text v12-font-bold v12-font-30 more-t v12-pb-1 v12-mb-2">{{ item.content }}</view>
|
||||
<view class="v12-align-center">
|
||||
<view class="avtor">
|
||||
<image class="avtor" :src="item.logo" mode="scaleToFill"></image>
|
||||
@@ -120,6 +129,47 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.icon {
|
||||
display: block;
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin: 0 10rpx 0 0;
|
||||
}
|
||||
.name-box{
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
left: 20rpx;
|
||||
bottom: 20rpx;
|
||||
font-size: 28rpx;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 5;
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
height: 60rpx;
|
||||
padding: 0 16rpx 16rpx 16rpx;
|
||||
border-radius: 0rpx 0rpx 16rpx 16rpx;
|
||||
box-sizing: border-box;
|
||||
font-size: 24rpx;
|
||||
line-height: 28rpx;
|
||||
color: #fff;
|
||||
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000000 100%);
|
||||
.icon {
|
||||
display: block;
|
||||
width: 28rpx;
|
||||
height: 28rpx;
|
||||
margin: 0 10rpx 0 0;
|
||||
}
|
||||
.one-t{
|
||||
width: 240rpx !important;
|
||||
}
|
||||
}
|
||||
.cover-box{
|
||||
position: relative;
|
||||
height: 316rpx;
|
||||
}
|
||||
.img-nodata {
|
||||
position: relative;
|
||||
top: 0;
|
||||
|
||||
+115
-3
@@ -21,7 +21,7 @@
|
||||
4A
|
||||
</text>
|
||||
</view>
|
||||
<view class="shareBtn"><u-icon name="share-square" color="#C52733"></u-icon>分享给好友</view>
|
||||
<view class="shareBtn" @click="shareImg"><u-icon name="share-square" color="#C52733"></u-icon>分享给好友</view>
|
||||
<u-line dashed></u-line>
|
||||
<view v-if="townInfo.intro" class="v12-pa-3 intro-content">
|
||||
<u-read-more :toggle="true" showHeight="200">
|
||||
@@ -47,11 +47,35 @@
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<!-- 分享 -->
|
||||
<u-popup
|
||||
:show="showShare"
|
||||
mode="center"
|
||||
bgColor="transparent"
|
||||
>
|
||||
<view class="box-share">
|
||||
<view class="box-img">
|
||||
<image
|
||||
:src="webUrl + '/20230608112219219303.png'"
|
||||
class="icon"
|
||||
@click="closeShare"
|
||||
/>
|
||||
<image :src="posterUrl" class="main-img" mode="widthFix" />
|
||||
</view>
|
||||
<image
|
||||
:src="webUrl + '/20230608112210135038.png'"
|
||||
mode="widthFix"
|
||||
class="btn"
|
||||
@click="saveImg"
|
||||
/>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getAncientTownInfo, getAncientTownActive } from "@/api/inn.js"
|
||||
import { getAncientTownInfo, getAncientTownActive, shareTown } from "@/api/inn.js"
|
||||
import {getUrlParam} from '@/utils/common.js'
|
||||
import culture from './components/culture.vue'
|
||||
import information from './components/information.vue'
|
||||
import service from './components/service.vue'
|
||||
@@ -65,7 +89,10 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
webUrl: this.$VUE_APP_RESOURCES_URL,
|
||||
showShare: false,
|
||||
townInfo: {},
|
||||
posterUrl: '',
|
||||
activeties: [],
|
||||
id: '',
|
||||
actived: 1,
|
||||
@@ -78,11 +105,95 @@ export default {
|
||||
}
|
||||
},
|
||||
onLoad(opts) {
|
||||
this.id = opts.id
|
||||
this.id = opts.id
|
||||
const obj = uni.getEnterOptionsSync()
|
||||
if(opts.scene || obj.query.scene) {
|
||||
const query = opts ? decodeURIComponent(opts.scene) : decodeURIComponent(obj.query.scene)
|
||||
this.id = getUrlParam(query, 'id') || null
|
||||
}
|
||||
this.getInfo()
|
||||
this.getActive()
|
||||
},
|
||||
methods: {
|
||||
shareImg() {
|
||||
uni.showLoading()
|
||||
shareTown(this.id).then(res => {
|
||||
this.posterUrl = res.data
|
||||
this.showShare = !this.showShare
|
||||
}).finally(() => {
|
||||
uni.hideLoading()
|
||||
})
|
||||
},
|
||||
closeShare() {
|
||||
this.showShare = false
|
||||
},
|
||||
saveImg() {
|
||||
const _this = this
|
||||
uni.getSetting({
|
||||
success: getRes => {
|
||||
if (getRes.authSetting["scope.writePhotosAlbum"]) {
|
||||
_this.downloadImage()
|
||||
} else {
|
||||
uni.authorize({
|
||||
scope: "scope.writePhotosAlbum",
|
||||
success: () => {
|
||||
_this.downloadImage()
|
||||
},
|
||||
fail: () => {
|
||||
uni.openSetting({
|
||||
success: openRes => {
|
||||
console.log(typeof openRes, openRes)
|
||||
},
|
||||
fail: () => {
|
||||
uni.showToast({
|
||||
title: "请在设置中打开对应权限",
|
||||
icon: "none"
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
console.log(err, 2)
|
||||
}
|
||||
})
|
||||
},
|
||||
downloadImage() {
|
||||
const _this = this
|
||||
const randomID = () => Math.random().toString(36).substring(2)
|
||||
uni.downloadFile({
|
||||
url: this.posterUrl, // 网络图片的地址
|
||||
filePath: wx.env.USER_DATA_PATH + "/share_" + randomID() + ".png", // 指定的本地文件路径
|
||||
success: downRes => {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: downRes.filePath, // 临时文件地址
|
||||
success: function () {
|
||||
uni.showToast({
|
||||
title: "保存成功",
|
||||
icon: "success",
|
||||
success() {
|
||||
_this.showShare = false
|
||||
}
|
||||
})
|
||||
},
|
||||
fail: function (err) {
|
||||
uni.showToast({
|
||||
title: err,
|
||||
icon: "none"
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
fail: function (err) {
|
||||
uni.showToast({
|
||||
title: err.errMsg,
|
||||
icon: "error"
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
getInfo() {
|
||||
uni.showLoading()
|
||||
getAncientTownInfo(this.id).then(res => {
|
||||
@@ -107,6 +218,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import "@/assets/css/store.less";
|
||||
.shareBtn{
|
||||
width: fit-content;
|
||||
padding: 5rpx 15rpx;
|
||||
|
||||
Reference in New Issue
Block a user