123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207 |
- <template>
- <div class="peripheralDetail">
- <div class="peripheralFirstBox">
- <div class="periTitle">{{detail.businessName}}<span class="periType">{{detail.typeName}}</span></div>
- <div class="periTime">更新时间:{{detail.releaseTime}}</div>
- <div class="periAddress">
- <span>地址:{{detail.businessAddress}}</span>
- <img src="../parkActivity/image/dhIcon.png" class="dhIcon" @tap="searchAddress(detail.businessAddress)">
- </div>
- <div class="contactBox">
- <span class="contackLeft">
- <span style="color: #666666;font-size: 28rpx">联系电话:</span>
- <span style="color: #18172A;font-size: 36rpx;font-weight: 600">{{detail.businessPhone}}</span>
- </span>
- <img src="https://www.idea-co-sf.com/gardenProduct/image/phoneIcon.png" class="phoneIcon" @tap="phoneCall(detail.businessPhone)">
- </div>
- </div>
- <div class="peripheralFirstBox" style="padding: 32rpx">
- <div class="periTitle" style="padding: 0 0 32rpx 0">简介</div>
- <!-- <img src="https://www.idea-co-sf.com/gardenProduct/image/img1.png" class="firstImg"/>-->
- <div v-for="fit in detail.imageUrl" :key="fit">
- <img :src="fit" class="firstImg" />
- </div>
- <div class="perInfo" v-html="detail.introduction">
- </div>
- </div>
- </div>
- </template>
- <script>
- import { peripheryGetById,getUserLocalStorageInfo,getByCodes } from "@/js_sdk/http";
- export default {
- name: "detail",
- data(){
- return{
- getUserLocalStorageInfo: getUserLocalStorageInfo(),
- dc_key: ['periphery_type'],
- serviceList:[],
- detail:{}
- }
- },
- created(){
- this.getByCodes()
- },
- onLoad(item){
- console.log(item.id)
- this.getDetailById(item.id)
- },
- methods:{
- async getByCodes() {
- let data = await getByCodes(JSON.stringify(this.dc_key));
- this.dic_SelectList = this.$common.handleDicList(data);
- this.serviceList = this.dic_SelectList.periphery_type
- },
- phoneCall(phone){
- uni.makePhoneCall({
- phoneNumber: phone, // 需要拨打的电话号码
- success: function () {
- console.log('拨打电话成功!');
- },
- fail: function (err) {
- console.error('拨打电话失败:', err);
- // 可能的失败原因包括:用户拒绝、没有安装电话应用等
- uni.showToast({
- title: '拨打电话失败',
- icon: 'none'
- });
- }
- })
- },
- searchAddress(address){
- console.log(address)
- uni.getLocation({
- type: 'wgs84',
- geocode: true, // 是否解析地址为经纬度
- address: address,
- success: function (res) {
- console.log(res)
- const latitude = res.latitude; //待web端传经纬度
- const longitude = res.longitude;//待web端传经纬度
- uni.openLocation({
- latitude: latitude,
- longitude: longitude,
- address: address,
- // ...其他参数
- });
- },
- fail: function (error) {
- console.error('获取位置失败', error);
- }
- });
- },
- getDetailById(id) {
- const _this = this
- peripheryGetById({ id }).then((res) => {
- console.log(res.data)
- if (res.data) {
- const det = _this.getItemJson(res.data)
- this.detail = det
- this.star = Math.ceil((det.score == null ? 0 : det.score) / (det.evaluateNum == null ? 1 : det.evaluateNum))
- }
- // const item = _this.getItemJson(res)
- })
- },
- getItemJson: function(item) {
- item.releaseTime = this.$common.transDate(item.releaseTime)
- // item.type = this.dic_SelectList.periphery_type[item.type]
- let transformedObject = this.dic_SelectList.periphery_type.reduce((acc, obj) => {
- acc[obj.value] = obj.label;
- return acc;
- }, {'':'全部'});
- item.typeName = transformedObject[item.type]
- if (item.fileUrl && item.fileUrl.length > 2) {
- const files = JSON.parse(item.fileUrl)
- item.imageUrl = []
- files.forEach(itemm => {
- itemm.url = itemm.url.replace('server', 'smartParkH5Server')
- item.imageUrl.push(itemm.url)
- })
- }
- return item
- }
- }
- }
- </script>
- <style lang="scss">
- .peripheralDetail{
- box-sizing: border-box;
- .peripheralFirstBox{
- margin: 24rpx 0;
- padding: 32rpx 0;
- background: white;
- box-sizing: border-box;
- .periTitle{
- color: rgba(34, 34, 34, 1);
- font-size: 32rpx;
- font-weight: 600;
- display: flex;
- align-items: center;
- padding: 0 32rpx;
- box-sizing: border-box;
- .periType{
- display: flex;
- align-items: center;
- justify-content: center;
- width: 92rpx;
- height: 48rpx;
- background: rgba(3, 101, 249, 0.20);
- color: rgba(3, 101, 249, 1);
- border-radius: 8rpx;
- font-size: 28rpx;
- font-weight: 500;
- margin-left: 24rpx;
- }
- }
- .periTime{
- font-size: 28rpx;
- color: rgba(102, 102, 102, 1);
- padding: 16rpx 32rpx;
- box-sizing: border-box;
- }
- .periAddress{
- display: flex;
- justify-content: space-between;
- align-items: center;
- font-size: 28rpx;
- color: rgba(102, 102, 102, 1);
- padding: 0 32rpx 32rpx 32rpx;
- box-sizing: border-box;
- .dhIcon{
- width: 36rpx;
- height: 36rpx;
- padding-left: 20rpx;
- border-left: 1px solid #E6E6E6;
- }
- }
- .contactBox{
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding:24rpx 32rpx 0 32rpx;
- border-top: 1px solid #E6E6E6;
- .contackLeft{
- display: flex;
- align-items: center;
- }
- .phoneIcon{
- width: 64rpx;
- height: 64rpx;
- }
- }
- .firstImg{
- width: 686rpx;
- height: 300rpx;
- }
- .perInfo{
- font-size: 28rpx;
- color: rgba(51, 51, 51, 1);
- line-height: 50rpx;
- margin-top: 24rpx;
- }
- }
- }
- </style>
|